@primer/primitives 7.17.0-rc.34cd1021 → 7.17.0-rc.39874fc0

package/src/PrimerStyleDictionary.ts

@@ -12,7 +12,6 @@ import {
   durationToCss,
   figmaAttributes,
   fontFamilyToCss,
-  fontFamilyToFigma,
   fontWeightToNumber,
   jsonDeprecated,
   namePathToDotNotation,
@@ -23,7 +22,6 @@ import {
   shadowToCss,
   typographyToCss,
   dimensionToRemPxArray,
-  floatToPixel,
 } from './transformers'
 import {
   javascriptCommonJs,
@@ -133,11 +131,6 @@ StyleDictionary.registerTransform({
   ...colorToHex,
 })
 
-StyleDictionary.registerTransform({
-  name: 'float/pixel',
-  ...floatToPixel,
-})
-
 StyleDictionary.registerTransform({
   name: 'dimension/rem',
   ...dimensionToRem,
@@ -223,11 +216,6 @@ 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,7 +7,6 @@ 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/formats/jsonFigma.ts

@@ -28,7 +28,6 @@ const getFigmaType = (type: string): string => {
     color: 'COLOR',
     dimension: 'FLOAT',
     fontWeight: 'FLOAT',
-    number: 'FLOAT',
     fontFamily: 'STRING',
   }
   if (type in validTypes) return validTypes[type as keyof typeof validTypes]

package/src/platforms/figma.ts

@@ -3,11 +3,9 @@ import type {PlatformInitializer} from '../types/PlatformInitializer'
 import {isSource} from '../filters'
 
 const validFigmaToken = (token: StyleDictionary.TransformedToken) => {
-  const validTypes = ['color', 'dimension', 'shadow', 'fontWeight', 'fontFamily', 'number']
+  const validTypes = ['color', 'dimension', 'shadow', 'fontWeight', 'fontFamily']
   // 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) ||
@@ -27,8 +25,6 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
     'name/pathToFigma',
     // 'name/pathToSlashNotation',
     'figma/attributes',
-    'fontFamily/figma',
-    'float/pixel',
     'dimension/pixelUnitless',
     // 'border/figma',
     // 'typography/figma',
@@ -36,11 +32,6 @@ 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/numberToken.ts

@@ -2,27 +2,10 @@ 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 @@
           },
         },
       },
-      neutral: {
+      gray: {
         '0': {
           $value: '#cdd9e5',
           $type: 'color',

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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