@primer/primitives 8.0.0 → 8.1.0

package/src/platforms/css.ts

@@ -1,23 +1,27 @@
 import {isFromFile, isSource} from '../filters'
 import type StyleDictionary from 'style-dictionary'
 import type {PlatformInitializer} from '../types/PlatformInitializer'
+import type {TransformedToken} from 'style-dictionary'
 
-const getCssSelectors = (outputFile: string): {selector: string; selectorLight: string; selectorDark: string} => {
+const getCssSelectors = (outputFile: string) => {
   // check for dark in the beginning of the output filename
   const lastSlash = outputFile.lastIndexOf('/')
   const outputBasename = outputFile.substring(lastSlash + 1, outputFile.indexOf('.'))
   const themeName = outputBasename.replace(/-/g, '_')
   const mode = outputBasename.substring(0, 4) === 'dark' ? 'dark' : 'light'
 
-  return {
-    selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="${mode}"][data-${mode}-theme="${themeName}"] ::backdrop`,
-    selectorLight: `[data-color-mode="auto"][data-light-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"] ::backdrop`,
-    selectorDark: `[data-color-mode="auto"][data-dark-theme="${themeName}"], [data-color-mode="auto"][data-dark-theme="${themeName}"] ::backdrop`,
-  }
+  return [
+    {
+      selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="${mode}"][data-${mode}-theme="${themeName}"] ::backdrop, [data-color-mode="auto"][data-light-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"] ::backdrop`,
+    },
+    {
+      query: '@media (prefers-color-scheme: dark)',
+      selector: `[data-color-mode="auto"][data-dark-theme="${themeName}"], [data-color-mode="auto"][data-dark-theme="${themeName}"] ::backdrop`,
+    },
+  ]
 }
 
 export const css: PlatformInitializer = (outputFile, prefix, buildPath, options): StyleDictionary.Platform => {
-  const {selector, selectorLight, selectorDark} = getCssSelectors(outputFile)
   return {
     prefix,
     buildPath,
@@ -40,21 +44,19 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
     files: [
       {
         destination: `${outputFile}`,
-        format: `css/themed`,
+        format: `css/advanced`,
         filter: token => isSource(token) && options?.themed === true,
         options: {
           showFileHeader: false,
           outputReferences: false,
           descriptions: false,
-          selector,
-          selectorLight,
-          selectorDark,
+          queries: getCssSelectors(outputFile),
           ...options?.options,
         },
       },
       {
         destination: `${outputFile}`,
-        format: `css/variables`,
+        format: `css/advanced`,
         filter: token => isSource(token) && options?.themed !== true,
         options: {
           showFileHeader: false,
@@ -72,7 +74,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
       },
       {
         destination: `${outputFile}`,
-        format: `css/wrapMediaQuery`,
+        format: `css/advanced`,
         filter: token =>
           isSource(token) &&
           isFromFile(token, [
@@ -82,10 +84,16 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
         options: {
           descriptions: false,
           showFileHeader: false,
-          mediaQuery: {
-            'css/functional/size/size-fine.css': '(pointer: fine)',
-            'css/functional/size/size-coarse.css': '(pointer: coarse)',
-          },
+          queries: [
+            {
+              query: '@media (pointer: fine)',
+              matcher: (token: TransformedToken) => token.path.includes('size-fine'),
+            },
+            {
+              query: '@media (pointer: coarse)',
+              matcher: (token: TransformedToken) => token.path.includes('size-coarse'),
+            },
+          ],
         },
       },
     ],

package/src/platforms/figma.ts

@@ -28,7 +28,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
     // 'name/pathToSlashNotation',
     'figma/attributes',
     'fontFamily/figma',
-    'float/pixel',
+    'float/pixelUnitless',
     'dimension/pixelUnitless',
     // 'border/figma',
     // 'typography/figma',

package/src/tokens/functional/color/dark/display-dark.json5

@@ -330,6 +330,72 @@
         },
       },
     },
+    coral: {
+      bgColor: {
+        muted: {
+          $value: '{base.display.color.red.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+        emphasis: {
+          $value: '{base.display.color.red.5}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.red.6}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component (internal)',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      borderColor: {
+        muted: {
+          $value: '{base.display.color.red.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+        emphasis: {
+          $value: '{base.display.color.red.5}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+      },
+    },
     yellow: {
       bgColor: {
         muted: {

package/src/tokens/functional/color/light/display-light.json5

@@ -330,6 +330,72 @@
         },
       },
     },
+    coral: {
+      bgColor: {
+        muted: {
+          $value: '{base.display.color.coral.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+        emphasis: {
+          $value: '{base.display.color.coral.5}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.coral.6}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component (internal)',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      borderColor: {
+        muted: {
+          $value: '{base.display.color.coral.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+        emphasis: {
+          $value: '{base.display.color.coral.5}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+      },
+    },
     yellow: {
       bgColor: {
         muted: {

package/src/transformers/floatToPixel.ts

@@ -5,7 +5,7 @@ import {isNumber} from '../filters'
  * @param value
  * @returns string
  */
-export const convertFloatToPixel = (token: StyleDictionary.TransformedToken) => {
+export const convertFloatToPixel = (token: StyleDictionary.TransformedToken, unitless = false) => {
   // short circut if value is not a number
   if (
     typeof token.value !== 'number' ||
@@ -17,7 +17,7 @@ export const convertFloatToPixel = (token: StyleDictionary.TransformedToken) =>
   // convert value
   const convertedValue = token.$extensions?.['org.primer.data']?.fontSize * token.value
   // return converted value
-  return convertedValue === 0 ? 0 : `${Math.round(convertedValue)}px`
+  return convertedValue === 0 ? 0 : unitless ? Math.round(convertedValue) : `${Math.round(convertedValue)}px`
 }
 /**
  * @description converts a float value to a pixel value based on the provided fontSize on the tokersn extension
@@ -31,3 +31,10 @@ export const floatToPixel: StyleDictionary.Transform = {
   matcher: isNumber,
   transformer: (token: StyleDictionary.TransformedToken): string => convertFloatToPixel(token),
 }
+
+export const floatToPixelUnitless: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isNumber,
+  transformer: (token: StyleDictionary.TransformedToken): string => convertFloatToPixel(token, true),
+}

package/src/transformers/index.ts

@@ -5,6 +5,7 @@ export {colorToHexMix} from './colorToHexMix'
 export {colorToRgbAlpha} from './colorToRgbAlpha'
 export {colorToRgbaFloat} from './colorToRgbaFloat'
 export {floatToPixel} from './floatToPixel'
+export {floatToPixelUnitless} from './floatToPixel'
 export {dimensionToRem} from './dimensionToRem'
 export {dimensionToRemPxArray} from './dimensionToRemPxArray'
 export {dimensionToPixelUnitless} from './dimensionToPixelUnitless'

package/src/formats/cssThemed.ts

@@ -1,35 +0,0 @@
-import StyleDictionary from 'style-dictionary'
-import type {FormatterArguments} from 'style-dictionary/types/Format'
-import {format} from 'prettier'
-import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
-const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
-
-/**
- * @description Converts `StyleDictionary.dictionary.tokens` to css with prefers dark and light section
- * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
- * @param arguments.options outputReferences `boolean`, selector `string`, selectorLight `string`, selectorDark `string`
- * @returns formatted `string`
- */
-export const cssThemed: StyleDictionary.Formatter = ({dictionary, options = {}, file}: FormatterArguments) => {
-  const {selector, selectorLight, selectorDark} = options
-  const {outputReferences, descriptions} = options
-  const formatting: LineFormatting = {
-    commentStyle: descriptions ? 'long' : 'none',
-  }
-  // add file header
-  const output = [fileHeader({file})]
-  // add single theme css
-  output.push(`${selector || ':root'}${selectorLight ? `, ${selectorLight}` : ''}{
-    ${formattedVariables({format: 'css', dictionary, outputReferences, formatting})}
-  }`)
-  // add auto dark theme css
-  if (selectorDark) {
-    output.push(`@media (prefers-color-scheme: dark) {
-      ${selectorDark} {
-        ${formattedVariables({format: 'css', dictionary, outputReferences, formatting})}
-      }
-    }`)
-  }
-  // return prettified
-  return format(output.join('\n'), {parser: 'css', printWidth: 500})
-}

package/src/formats/cssVariables.ts

@@ -1,25 +0,0 @@
-import StyleDictionary from 'style-dictionary'
-import type {FormatterArguments} from 'style-dictionary/types/Format'
-import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
-const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
-
-/**
- * @description Converts `StyleDictionary.dictionary.tokens` to csssection
- * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
- * @param arguments.options outputReferences `boolean`, selector `string`
- * @returns formatted `string`
- */
-export const cssVariables: StyleDictionary.Formatter = ({dictionary, options = {}, file}: FormatterArguments) => {
-  const selector = options.selector ? options.selector : `:root`
-  const {outputReferences, descriptions} = options
-  const formatting: LineFormatting = {
-    commentStyle: descriptions ? 'long' : 'none',
-  }
-
-  return `${fileHeader({file})}${selector} {\n${formattedVariables({
-    format: 'css',
-    dictionary,
-    outputReferences,
-    formatting,
-  })}\n}\n`
-}

package/src/formats/cssWrapMediaQuery.ts

@@ -1,29 +0,0 @@
-import StyleDictionary from 'style-dictionary'
-import type {FormatterArguments} from 'style-dictionary/types/Format'
-import {format} from 'prettier'
-import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
-const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
-
-/**
- * @description Converts `StyleDictionary.dictionary.tokens` to css with @custom-media
- * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
- * @returns formatted `string`
- */
-export const cssWrapMediaQuery: StyleDictionary.Formatter = ({dictionary, options, file}: FormatterArguments) => {
-  const {outputReferences, descriptions} = options
-  const formatting: LineFormatting = {
-    commentStyle: descriptions ? 'long' : 'none',
-  }
-  // get specific media query or use screen
-  const mediaQuery = options.mediaQuery?.[file.destination] || 'screen'
-  // add file header
-  const output = [fileHeader({file})]
-  // add meadia query
-  output.push(`@media ${mediaQuery} {\n:root {`)
-  // add tokens
-  output.push(formattedVariables({format: 'css', dictionary, outputReferences, formatting}))
-  // close media query
-  output.push(`}\n}`)
-  // return prettified
-  return format(output.join('\n'), {parser: 'css', printWidth: 500})
-}