Remove hsl and use Primitive v8 colors

.changeset/cool-comics-dream.md

@@ -0,0 +1,10 @@
+---
+"@primer/brand-primitives": minor
+"@primer/react-brand": minor
+---
+
+- Change base color scales to hex instead of hsl
+- Remove the hsl logic that handles opacity
+- Use a raw hex8 value where alpha was used temporarily until we have the new build process in place from Primitives
+- Adds new tokens for videoPlayer to help with this transition
+- Use two files for light/dark vs. one in the base tokens

apps/docs/scripts/components-with-animation.js

@@ -11,6 +11,7 @@ export const supportedComponents = [
   'Pillar',
   'SectionIntro',
   'Stack',
+  'Pillar',
   'Testimonial',
   'Text',
   'Timeline',

apps/docs/src/components/content/ColorScales.js

@@ -1,4 +1,4 @@
-import colors from '@primer/brand-primitives/lib/design-tokens/js/module/tokens/base/colors/color-scales'
+import colors from '@primer/brand-primitives/lib/design-tokens/js/module/tokens/base/colors/light'
 import React from 'react'
 import {
   Box as PRCBox,
@@ -14,16 +14,16 @@ import {useColorTheme} from './ColorThemeContext'
 
 const availableColorModes = Object.values(ColorModesEnum)
 
-const convertToHsl = (rawHSL) => `hsl(${rawHSL.split(' ').join(', ')})`
-
 export function ColorScales() {
   const [colorTheme, setCurrentMode] = useColorTheme()
 
   const predicateFn = (colorEntry) => ['black', 'white'].includes(colorEntry[0])
 
-  const rgbScales = Object.entries(colors.base.color.scale).filter(
-    (color) => !predicateFn(color),
-  )
+  const rgbScales = Object.entries(colors.base.color.scale)
+    .filter(([scaleName]) => {
+      return scaleName !== 'transparent'
+    })
+    .filter((color) => !predicateFn(color))
 
   const blackWhiteScales = Object.entries(colors.base.color.scale).filter(
     (color) => predicateFn(color),
@@ -35,14 +35,15 @@ export function ColorScales() {
       <PRCBox key={name}>
         {Object.entries(colorScale).map(([key, obj]) => {
           const value = colorTheme === 'dark' ? obj.dark : obj.value
-          const hslValue = convertToHsl(value)
+
+          if (!value) return null
 
           return (
             <PRCBox
-              key={`${key}-${hslValue}`}
+              key={`${key}-${value}`}
               sx={{
-                color: readableColor(hslValue),
-                bg: hslValue,
+                color: readableColor(value),
+                bg: value,
                 p: 2,
                 display: 'flex',
                 justifyContent: 'space-between',
@@ -53,7 +54,7 @@ export function ColorScales() {
               <Text>
                 {name}.{key}
               </Text>
-              <Text>{hslValue}</Text>
+              <Text>{value}</Text>
             </PRCBox>
           )
         })}

apps/docs/src/components/content/ColorThemePicker.js

@@ -1,7 +1,7 @@
 import {Box as PRCBox} from '@primer/react'
 import React from 'react'
 import {useColorTheme, availableModes} from './ColorThemeContext'
-import globalFunctionalTokens from '@primer/brand-primitives/lib/design-tokens/js/module/tokens/base/colors/color-scales'
+import baseColorScales from '@primer/brand-primitives/lib/design-tokens/js/module/tokens/base/colors/light'
 
 export function ColorThemePicker() {
   const [colorTheme, setColorTheme] = useColorTheme()
@@ -67,10 +67,7 @@ function ColorThemePreview() {
             sx={{
               width: 20,
               height: 20,
-              bg: `hsl(${globalFunctionalTokens.base.color.scale[name][5].value
-                .split(' ')
-                .join(', ')})`,
-              margin: '2px',
+              bg: baseColorScales.base.color.scale[name][5].value,
               borderRadius: 999,
             }}
           />

packages/design-tokens/scripts/build-tokens.js

@@ -4,6 +4,9 @@ const {buildPrimitives, StyleDictionary} = require('@primer/primitives/build')
 const mediaQueryFormat = require('../src/formats/responsive-media-query')
 const colorModeFormat = require('../src/formats/color-mode-attributes')
 
+const lightJson = require('../src/tokens/base/colors/light')
+const darkJson = require('../src/tokens/base/colors/dark')
+
 ;(function () {
   const namespace = 'brand'
   const outputPath = './lib/design-tokens'
@@ -14,7 +17,6 @@ const colorModeFormat = require('../src/formats/color-mode-attributes')
    * Step 1:
    * Create a temporary directory with JSON files to convert into tokens
    */
-  // move over base configs
 
   fs.cpSync('../../node_modules/@primer/primitives/tokens', dest, {recursive: true})
 
@@ -24,6 +26,30 @@ const colorModeFormat = require('../src/formats/color-mode-attributes')
 
   /**
    * Step 2:
+   * Produce a color-scales.json src file temporarily
+   */
+
+  const mergeLightAndDark = (light, dark) => {
+    const merged = {}
+
+    for (const key in dark) {
+      if (typeof dark[key] === 'object' && dark[key] !== null) {
+        merged[key] = mergeLightAndDark(light[key] || {}, dark[key])
+      } else if (key === 'value' && light) {
+        merged[key] = light[key]
+        merged['dark'] = dark[key]
+      }
+    }
+
+    return merged
+  }
+
+  const mergedColorScales = mergeLightAndDark(lightJson, darkJson)
+
+  fs.writeFileSync(`${dest}/base/colors/color-scales.json`, JSON.stringify(mergedColorScales))
+
+  /**
+   * Step 3:
    * Build tokens by running function against the temporary directory
    */
 
@@ -178,7 +204,6 @@ const colorModeFormat = require('../src/formats/color-mode-attributes')
             format: `css/color-mode-attributes`,
             options: {
               outputReferences: false,
-              containsRawHSL: true,
             },
           },
         ],
@@ -206,6 +231,7 @@ const colorModeFormat = require('../src/formats/color-mode-attributes')
     `tokens/functional/components/grid/colors.json`,
     `tokens/functional/components/logosuite/colors.json`,
     `tokens/functional/components/timeline/colors.json`,
+    `tokens/functional/components/video-player/colors.js`,
     `tokens/functional/components/prose/colors.js`,
   ]
 
@@ -225,7 +251,6 @@ const colorModeFormat = require('../src/formats/color-mode-attributes')
               format: `css/color-mode-attributes`,
               options: {
                 outputReferences: false,
-                containsRawHSL: false,
               },
             },
           ],
@@ -235,7 +260,7 @@ const colorModeFormat = require('../src/formats/color-mode-attributes')
   }
 
   /**
-   * Step 3:
+   * Step 4:
    * Clean up the temporary directory
    */
   fs.rmdirSync(dest, {recursive: true})

packages/design-tokens/src/formats/color-mode-attributes.js

@@ -7,7 +7,7 @@ const prettier = require('prettier')
  * Custom style dictionary formatter for outputting CSS variables that are
  * compatible with the ThemeProvider component.
  */
-function colorModeAttributes({dictionary: origDictionary, file, options}) {
+function colorModeAttributes({dictionary, file, options}) {
   /**
    * Need to add a new color mode? Add it here!
    */
@@ -24,42 +24,6 @@ function colorModeAttributes({dictionary: origDictionary, file, options}) {
   ]
   const defaultMode = supportedModes[0]
 
-  const convertToHSL = value => `hsl(${value.split(' ').join(', ')})`
-
-  const dictionary = options.containsRawHSL ? JSON.parse(JSON.stringify(origDictionary)) : origDictionary
-
-  if (options.containsRawHSL) {
-    const reduceProperties = (acc, token) => {
-      acc.push({
-        ...token,
-        name: `${token.name}-hsl`,
-        path: [...token.path, 'hsl'],
-      })
-
-      /**
-       * Creates a new token object adjacent to the original
-       * This takes the raw HSL values and wraps it in a HSL css function
-       */
-      const tokenWithHSL = {...token, value: convertToHSL(token.value)}
-
-      /**
-       * Checks if the token object contains one of the supported modes
-       * If yes; mutate the HSL-specific token object with the converted HSL value for the alternate mode
-       */
-      for (const mode of supportedModes) {
-        if (token.hasOwnProperty(mode)) {
-          tokenWithHSL[mode] = convertToHSL(token[mode])
-        }
-      }
-
-      acc.push(tokenWithHSL)
-      return acc
-    }
-
-    dictionary.allTokens = dictionary.allTokens.reduce(reduceProperties, [])
-    dictionary.allProperties = dictionary.allProperties.reduce(reduceProperties, [])
-  }
-
   const {outputReferences} = options
   let {allTokens} = dictionary
 
@@ -123,7 +87,6 @@ function colorModeAttributes({dictionary: origDictionary, file, options}) {
 
     }\n`
   }
-
   const template = `
       ${fileHeader({file})}