@primer/primitives 7.17.0-rc.9ef8a8c3 → 7.17.0-rc.a85cfb75

package/dist/styleLint/functional/themes/light-tritanopia.json

@@ -3783,6 +3783,151 @@
     "attributes": {},
     "path": ["display", "indigo", "borderColor", "emphasis"]
   },
+  "display-pink-bgColor-muted": {
+    "value": "#ffe5f1",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.pink.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-pink-bgColor-muted",
+    "attributes": {},
+    "path": ["display", "pink", "bgColor", "muted"]
+  },
+  "display-pink-bgColor-emphasis": {
+    "value": "#ce2c85",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.pink.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-pink-bgColor-emphasis",
+    "attributes": {},
+    "path": ["display", "pink", "bgColor", "emphasis"]
+  },
+  "display-pink-fgColor": {
+    "value": "#b12f79",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.pink.6}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "display-pink-fgColor",
+    "attributes": {},
+    "path": ["display", "pink", "fgColor"]
+  },
+  "display-pink-borderColor-muted": {
+    "value": "#fdc9e2",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.pink.1}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-pink-borderColor-muted",
+    "attributes": {},
+    "path": ["display", "pink", "borderColor", "muted"]
+  },
+  "display-pink-borderColor-emphasis": {
+    "value": "#ce2c85",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.pink.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-pink-borderColor-emphasis",
+    "attributes": {},
+    "path": ["display", "pink", "borderColor", "emphasis"]
+  },
   "avatar-bgColor": {
     "value": "#ffffff",
     "$type": "color",

package/dist/styleLint/functional/themes/light.json

@@ -3783,6 +3783,151 @@
     "attributes": {},
     "path": ["display", "indigo", "borderColor", "emphasis"]
   },
+  "display-pink-bgColor-muted": {
+    "value": "#ffe5f1",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.pink.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-pink-bgColor-muted",
+    "attributes": {},
+    "path": ["display", "pink", "bgColor", "muted"]
+  },
+  "display-pink-bgColor-emphasis": {
+    "value": "#ce2c85",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.pink.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-pink-bgColor-emphasis",
+    "attributes": {},
+    "path": ["display", "pink", "bgColor", "emphasis"]
+  },
+  "display-pink-fgColor": {
+    "value": "#b12f79",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.pink.6}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "display-pink-fgColor",
+    "attributes": {},
+    "path": ["display", "pink", "fgColor"]
+  },
+  "display-pink-borderColor-muted": {
+    "value": "#fdc9e2",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.pink.1}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-pink-borderColor-muted",
+    "attributes": {},
+    "path": ["display", "pink", "borderColor", "muted"]
+  },
+  "display-pink-borderColor-emphasis": {
+    "value": "#ce2c85",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/display-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.pink.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-pink-borderColor-emphasis",
+    "attributes": {},
+    "path": ["display", "pink", "borderColor", "emphasis"]
+  },
   "avatar-bgColor": {
     "value": "#ffffff",
     "$type": "color",

package/dist/styleLint/functional/typography/typography.json

@@ -2,11 +2,23 @@
   "fontStack-system": {
     "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "fontFamily",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "typography",
+        "scopes": ["all"]
+      }
+    },
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
       "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-      "$type": "fontFamily"
+      "$type": "fontFamily",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "typography",
+          "scopes": ["all"]
+        }
+      }
     },
     "name": "fontStack-system",
     "attributes": {},
@@ -15,11 +27,23 @@
   "fontStack-sansSerif": {
     "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "fontFamily",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "typography",
+        "scopes": ["all"]
+      }
+    },
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
       "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-      "$type": "fontFamily"
+      "$type": "fontFamily",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "typography",
+          "scopes": ["all"]
+        }
+      }
     },
     "name": "fontStack-sansSerif",
     "attributes": {},
@@ -28,11 +52,23 @@
   "fontStack-monospace": {
     "value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
     "$type": "fontFamily",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "typography",
+        "scopes": ["all"]
+      }
+    },
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
       "value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
-      "$type": "fontFamily"
+      "$type": "fontFamily",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "typography",
+          "scopes": ["all"]
+        }
+      }
     },
     "name": "fontStack-monospace",
     "attributes": {},

package/package.json

@@ -1,13 +1,9 @@
 {
   "name": "@primer/primitives",
-  "version": "7.17.0-rc.9ef8a8c3",
+  "version": "7.17.0-rc.a85cfb75",
   "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 && 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

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