@primer/primitives 7.17.0-rc.d7413369 → 7.17.1

package/src/PrimerStyleDictionary.ts

@@ -23,6 +23,7 @@ import {
   shadowToCss,
   typographyToCss,
   dimensionToRemPxArray,
+  floatToPixel,
 } from './transformers'
 import {
   javascriptCommonJs,
@@ -132,6 +133,11 @@ StyleDictionary.registerTransform({
   ...colorToHex,
 })
 
+StyleDictionary.registerTransform({
+  name: 'float/pixel',
+  ...floatToPixel,
+})
+
 StyleDictionary.registerTransform({
   name: 'dimension/rem',
   ...dimensionToRem,

package/src/platforms/figma.ts

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

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',

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/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',
       },
     },