@primer/primitives 7.17.0-rc.1685583f → 7.17.0-rc.34cd1021

package/package.json

@@ -1,13 +1,9 @@
 {
   "name": "@primer/primitives",
-  "version": "7.17.0-rc.1685583f",
+  "version": "7.17.0-rc.34cd1021",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",
-    "tokens-v2-private",
-    "tokens-next-private",
-    "build.js",
-    "tokens/",
     "src/**/*",
     "!src/**/*.test.ts"
   ],
@@ -34,8 +30,6 @@
     "build:v8": "ts-node ./scripts/buildTokens.ts",
     "build:fallbacks": "ts-node ./scripts/buildFallbacks.ts",
     "build:figma": "ts-node scripts/buildFigma.ts",
-    "build:tokens": "node -e \"require('./build')._init()\"",
-    "build:new-tokens": "npm run build:tokens && npm run build:next && npm run build:figma",
     "tokenJson:check": "ts-node scripts/diffThemes.ts && ts-node scripts/diffTokenProps.ts",
     "contrast:check": "ts-node scripts/color-contrast.ts",
     "format": "prettier --write  '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
@@ -45,14 +39,12 @@
     "lint:fix": "eslint '**/*.{js,ts,tsx,md,mdx}' --fix --max-warnings=0 --config .eslintrc.js",
     "lint:tokens": "ts-node ./scripts/validateTokenJson.ts",
     "prebuild": "rm -rf dist",
-    "prebuild:tokens": "rm -rf tokens-v2-private",
-    "prebuild:next": "rm -rf tokens-next-private",
-    "prepack": "npm run build && npm run build:tokens && npm run build:next",
+    "prebuild:next": "rm -rf dist",
+    "prepack": "npm run build && npm run build:next",
     "prepare": "husky",
     "release": "changeset publish",
-    "start:storybook": "npm run build:next && cd docs/storybook && npm run storybook",
-    "test": "jest --verbose --coverage",
-    "watch": "ls data/**/*.scss scripts/**/*.ts | entr -s 'npm run build'"
+    "start:storybook": "npm run build && npm run build:next && cd docs/storybook && npm run storybook",
+    "test": "jest --verbose --coverage"
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {

package/src/PrimerStyleDictionary.ts

@@ -12,6 +12,7 @@ import {
   durationToCss,
   figmaAttributes,
   fontFamilyToCss,
+  fontFamilyToFigma,
   fontWeightToNumber,
   jsonDeprecated,
   namePathToDotNotation,
@@ -22,6 +23,7 @@ import {
   shadowToCss,
   typographyToCss,
   dimensionToRemPxArray,
+  floatToPixel,
 } from './transformers'
 import {
   javascriptCommonJs,
@@ -131,6 +133,11 @@ StyleDictionary.registerTransform({
   ...colorToHex,
 })
 
+StyleDictionary.registerTransform({
+  name: 'float/pixel',
+  ...floatToPixel,
+})
+
 StyleDictionary.registerTransform({
   name: 'dimension/rem',
   ...dimensionToRem,
@@ -216,6 +223,11 @@ StyleDictionary.registerTransform({
   ...fontFamilyToCss,
 })
 
+StyleDictionary.registerTransform({
+  name: 'fontFamily/figma',
+  ...fontFamilyToFigma,
+})
+
 /**
  * @name {@link PrimerStyleDictionary}
  * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers

package/src/filters/index.ts

@@ -7,6 +7,7 @@ export {isDeprecated} from './isDeprecated'
 export {isFromFile} from './isFromFile'
 export {isFontFamily} from './isFontFamily'
 export {isFontWeight} from './isFontWeight'
+export {isNumber} from './isNumber'
 export {isShadow} from './isShadow'
 export {isSource} from './isSource'
 export {isTypography} from './isTypography'

package/src/filters/isNumber.ts

@@ -0,0 +1,8 @@
+import type StyleDictionary from 'style-dictionary'
+
+/**
+ * @description Checks if token type is a number
+ * @param token [StyleDictionary.TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isNumber = (token: StyleDictionary.TransformedToken): boolean => token.$type === 'number'

package/src/formats/jsonFigma.ts

@@ -27,6 +27,9 @@ const getFigmaType = (type: string): string => {
   const validTypes = {
     color: 'COLOR',
     dimension: 'FLOAT',
+    fontWeight: 'FLOAT',
+    number: 'FLOAT',
+    fontFamily: 'STRING',
   }
   if (type in validTypes) return validTypes[type as keyof typeof validTypes]
   throw new Error(`Invalid type: ${type}`)

package/src/platforms/figma.ts

@@ -3,9 +3,11 @@ import type {PlatformInitializer} from '../types/PlatformInitializer'
 import {isSource} from '../filters'
 
 const validFigmaToken = (token: StyleDictionary.TransformedToken) => {
-  const validTypes = ['color', 'dimension', 'shadow']
+  const validTypes = ['color', 'dimension', 'shadow', 'fontWeight', 'fontFamily', 'number']
   // is a siource token, not an included one
   if (!isSource(token)) return false
+
+  if (`${token.value}`.substring(token.value.length - 2) === 'em') return false
   // has a collection attribute
   if (
     !('$extensions' in token) ||
@@ -25,6 +27,8 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
     'name/pathToFigma',
     // 'name/pathToSlashNotation',
     'figma/attributes',
+    'fontFamily/figma',
+    'float/pixel',
     'dimension/pixelUnitless',
     // 'border/figma',
     // 'typography/figma',
@@ -32,6 +36,11 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
   ],
   options: {
     basePxFontSize: 16,
+    fontFamilies: {
+      'fontStack/system': 'SF Pro Text',
+      'fontStack/sansSerif': 'SF Pro Text',
+      'fontStack/monospace': 'SF Mono',
+    },
     ...options,
   },
   files: [

package/src/schemas/collections.ts

@@ -8,11 +8,13 @@ type Collections =
   | 'base/color/dark'
   | 'base/color/dark-dimmed'
   | 'base/color/dark-high-contrast'
+  | 'base/typography'
   | 'mode'
   | 'pattern/mode'
   | 'base/size'
   | 'functional/size'
   | 'pattern/size'
+  | 'typography'
 
 export const collection = (collections: Collections[]) => {
   return z.string().refine(

package/src/schemas/dimensionToken.ts

@@ -13,7 +13,7 @@ export const dimensionToken = baseToken
     $extensions: z
       .object({
         'org.primer.figma': z.object({
-          collection: collection(['base/size', 'functional/size', 'pattern/size']),
+          collection: collection(['base/size', 'functional/size', 'pattern/size', 'typography']),
           scopes: scopes(['all', 'size', 'gap', 'radius', 'borderColor']),
         }),
       })

package/src/schemas/fontFamilyToken.ts

@@ -2,10 +2,20 @@ import {z} from 'zod'
 import {referenceValue} from './referenceValue'
 import {baseToken} from './baseToken'
 import {tokenType} from './tokenType'
+import {collection} from './collections'
+import {scopes} from './scopes'
 
 export const fontFamilyToken = baseToken
   .extend({
     $value: z.union([z.string(), referenceValue]),
     $type: tokenType('fontFamily'),
+    $extensions: z
+      .object({
+        'org.primer.figma': z.object({
+          collection: collection(['base/typography', 'typography']).optional(),
+          scopes: scopes(['all']).optional(),
+        }),
+      })
+      .optional(),
   })
   .strict()

package/src/schemas/fontWeightToken.ts

@@ -3,10 +3,20 @@ import {fontWeightValue} from './fontWeightValue'
 import {referenceValue} from './referenceValue'
 import {baseToken} from './baseToken'
 import {tokenType} from './tokenType'
+import {collection} from './collections'
+import {scopes} from './scopes'
 
 export const fontWeightToken = baseToken
   .extend({
     $type: tokenType('fontWeight'),
     $value: z.union([fontWeightValue, referenceValue]),
+    $extensions: z
+      .object({
+        'org.primer.figma': z.object({
+          collection: collection(['base/typography', 'typography']).optional(),
+          scopes: scopes(['all']).optional(),
+        }),
+      })
+      .optional(),
   })
   .strict()

package/src/schemas/numberToken.ts

@@ -2,10 +2,27 @@ import {z} from 'zod'
 import {baseToken} from './baseToken'
 import {referenceValue} from './referenceValue'
 import {tokenType} from './tokenType'
+import {scopes} from './scopes'
+import {collection} from './collections'
 
 export const numberToken = baseToken
   .extend({
     $value: z.union([z.number(), referenceValue]),
     $type: tokenType('number'),
+    $extensions: z
+      .object({
+        'org.primer.data': z
+          .object({
+            fontSize: z.number().optional(),
+          })
+          .optional(),
+        'org.primer.figma': z
+          .object({
+            collection: collection(['typography']).optional(),
+            scopes: scopes(['all']).optional(),
+          })
+          .optional(),
+      })
+      .optional(),
   })
   .strict()

package/src/tokens/base/color/dark/dark.dimmed.json5

@@ -43,7 +43,7 @@
           },
         },
       },
-      gray: {
+      neutral: {
         '0': {
           $value: '#cdd9e5',
           $type: 'color',

package/src/tokens/base/color/dark/dark.high-contrast.json5

@@ -23,7 +23,7 @@
           },
         },
       },
-      gray: {
+      neutral: {
         '0': {
           $value: '#ffffff',
           $type: 'color',

package/src/tokens/base/color/dark/dark.json5

@@ -33,7 +33,7 @@
         },
         alpha: 0,
       },
-      gray: {
+      neutral: {
         '0': {
           $value: '#f0f6fc',
           $type: 'color',
@@ -614,7 +614,7 @@
           },
         },
         '3': {
-          $value: '#bc8cff',
+          $value: '#BE8FFF',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -623,7 +623,7 @@
           },
         },
         '4': {
-          $value: '#a371f7',
+          $value: '#AB7DF8',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {

package/src/tokens/base/color/light/light.high-contrast.json5

@@ -14,7 +14,7 @@
           },
         },
       },
-      gray: {
+      neutral: {
         '0': {
           $value: '#ffffff',
           $type: 'color',

package/src/tokens/base/color/light/light.json5

@@ -33,7 +33,7 @@
           },
         },
       },
-      gray: {
+      neutral: {
         '0': {
           $value: '#f6f8fa',
           $type: 'color',

package/src/tokens/base/typography/typography.json

@@ -4,19 +4,43 @@
       "weight": {
         "light": {
           "$type": "fontWeight",
-          "$value": 300
+          "$value": 300,
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "base/typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "normal": {
           "$value": 400,
-          "$type": "fontWeight"
+          "$type": "fontWeight",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "base/typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": 500,
-          "$type": "fontWeight"
+          "$type": "fontWeight",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "base/typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "semibold": {
           "$value": 600,
-          "$type": "fontWeight"
+          "$type": "fontWeight",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "base/typography",
+              "scopes": ["all"]
+            }
+          }
         }
       }
     }

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

@@ -372,7 +372,7 @@
     syntax: {
       fgColor: {
         comment: {
-          $value: '{base.color.gray.3}',
+          $value: '{base.color.neutral.3}',
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -499,7 +499,7 @@
       },
     },
     bgColor: {
-      $value: '{base.color.gray.9}',
+      $value: '{base.color.neutral.9}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -512,7 +512,7 @@
     },
     borderColor: {
       divider: {
-        $value: '{base.color.gray.3}',
+        $value: '{base.color.neutral.3}',
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -527,7 +527,7 @@
   },
   headerSearch: {
     bgColor: {
-      $value: '{base.color.gray.9}',
+      $value: '{base.color.neutral.9}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -539,7 +539,7 @@
       },
     },
     borderColor: {
-      $value: '{base.color.gray.6}',
+      $value: '{base.color.neutral.6}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {

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

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

package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5

@@ -6,17 +6,17 @@
 {
   fgColor: {
     onEmphasis: {
-      $value: '{base.color.gray.9}',
+      $value: '{base.color.neutral.9}',
       $type: 'color',
     },
     muted: {
-      $value: '{base.color.gray.1}',
+      $value: '{base.color.neutral.1}',
       $type: 'color',
       mix: null,
       alpha: 1,
     },
     disabled: {
-      $value: '{base.color.gray.4}',
+      $value: '{base.color.neutral.4}',
       $type: 'color',
     },
   },
@@ -27,29 +27,29 @@
     },
     neutral: {
       emphasis: {
-        $value: '{base.color.gray.4}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
       },
     },
   },
   borderColor: {
     default: {
-      $value: '{base.color.gray.5}',
+      $value: '{base.color.neutral.5}',
       $type: 'color',
     },
     muted: {
-      $value: '{base.color.gray.5}',
+      $value: '{base.color.neutral.5}',
       $type: 'color',
       alpha: 1,
     },
     neutral: {
       muted: {
-        $value: '{base.color.gray.4}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
         alpha: 1,
       },
       emphasis: {
-        $value: '{base.color.gray.4}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
       },
     },
@@ -120,7 +120,7 @@
   control: {
     bgColor: {
       selected: {
-        $value: '{base.color.gray.6}',
+        $value: '{base.color.neutral.6}',
         $type: 'color',
       },
     },
@@ -134,17 +134,17 @@
     transparent: {
       bgColor: {
         hover: {
-          $value: '{base.color.gray.8}',
+          $value: '{base.color.neutral.8}',
           $type: 'color',
           alpha: 1,
         },
         active: {
-          $value: '{base.color.gray.6}',
+          $value: '{base.color.neutral.6}',
           $type: 'color',
           alpha: 1,
         },
         selected: {
-          $value: '{base.color.gray.6}',
+          $value: '{base.color.neutral.6}',
           $type: 'color',
           alpha: 1,
         },
@@ -155,7 +155,7 @@
           $type: 'color',
         },
         active: {
-          $value: '{base.color.gray.4}',
+          $value: '{base.color.neutral.4}',
           $type: 'color',
         },
       },
@@ -249,13 +249,13 @@
       },
       bgColor: {
         hover: {
-          $value: '{base.color.gray.1}',
+          $value: '{base.color.neutral.1}',
           $type: 'color',
           alpha: null,
           mix: null,
         },
         active: {
-          $value: '{base.color.gray.2}',
+          $value: '{base.color.neutral.2}',
           $type: 'color',
           alpha: null,
           mix: null,
@@ -354,13 +354,13 @@
   underlineNav: {
     borderColor: {
       hover: {
-        $value: '{base.color.gray.3}',
+        $value: '{base.color.neutral.3}',
         $type: 'color',
       },
     },
     iconColor: {
       rest: {
-        $value: '{base.color.gray.1}',
+        $value: '{base.color.neutral.1}',
         $type: 'color',
       },
     },

package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5

@@ -25,7 +25,7 @@
     },
     closed: {
       '@': {
-        $value: '{base.color.gray.3}',
+        $value: '{base.color.neutral.3}',
         $type: 'color',
       },
     },
@@ -66,12 +66,12 @@
     },
     closed: {
       muted: {
-        $value: '{base.color.gray.4}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.gray.4}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
       },
     },
@@ -90,12 +90,12 @@
     },
     closed: {
       muted: {
-        $value: '{base.color.gray.4}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.gray.4}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
       },
     },

package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5

@@ -25,7 +25,7 @@
     },
     closed: {
       '@': {
-        $value: '{base.color.gray.4}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
       },
     },
@@ -63,11 +63,11 @@
     },
     closed: {
       muted: {
-        $value: '{base.color.gray.4}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
       },
       emphasis: {
-        $value: '{base.color.gray.5}',
+        $value: '{base.color.neutral.5}',
         $type: 'color',
       },
     },
@@ -108,12 +108,12 @@
     },
     closed: {
       muted: {
-        $value: '{base.color.gray.4}',
+        $value: '{base.color.neutral.4}',
         $type: 'color',
         alpha: 0.4,
       },
       emphasis: {
-        $value: '{base.color.gray.5}',
+        $value: '{base.color.neutral.5}',
         $type: 'color',
       },
     },