@primer/primitives 7.17.0-rc.39874fc0 → 7.17.0-rc.3aa69fdf

package/dist/docs/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/dist/figma/figma.json

@@ -85,6 +85,14 @@
         "component",
         "component (internal)"
       ]
+    },
+    "typography": {
+      "modes": [
+        "default"
+      ],
+      "groups": [
+        "typography"
+      ]
     }
   },
   "files": [
@@ -111,6 +119,7 @@
     "dist/figma/themes/light-colorblind.json",
     "dist/figma/themes/light-high-contrast.json",
     "dist/figma/themes/light-tritanopia.json",
-    "dist/figma/themes/light.json"
+    "dist/figma/themes/light.json",
+    "dist/figma/typography/typography.json"
   ]
 }

package/dist/figma/typography/typography.json

@@ -0,0 +1,32 @@
+[
+  {
+    "name": "fontStack/monospace",
+    "value": "SF Mono",
+    "type": "STRING",
+    "refId": "typography/fontStack/monospace",
+    "collection": "typography",
+    "mode": "default",
+    "group": "typography",
+    "scopes": ["ALL_SCOPES"]
+  },
+  {
+    "name": "fontStack/sansSerif",
+    "value": "SF Pro Text",
+    "type": "STRING",
+    "refId": "typography/fontStack/sansSerif",
+    "collection": "typography",
+    "mode": "default",
+    "group": "typography",
+    "scopes": ["ALL_SCOPES"]
+  },
+  {
+    "name": "fontStack/system",
+    "value": "SF Pro Text",
+    "type": "STRING",
+    "refId": "typography/fontStack/system",
+    "collection": "typography",
+    "mode": "default",
+    "group": "typography",
+    "scopes": ["ALL_SCOPES"]
+  }
+]

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,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.17.0-rc.39874fc0",
+  "version": "7.17.0-rc.3aa69fdf",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",
@@ -45,7 +45,7 @@
     "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",
+    "prebuild:next": "rm -rf dist",
     "prepack": "npm run build && npm run build:tokens && npm run build:next",
     "prepare": "husky",
     "release": "changeset publish",

package/src/PrimerStyleDictionary.ts

@@ -12,6 +12,7 @@ import {
   durationToCss,
   figmaAttributes,
   fontFamilyToCss,
+  fontFamilyToFigma,
   fontWeightToNumber,
   jsonDeprecated,
   namePathToDotNotation,
@@ -216,6 +217,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/platforms/figma.ts

@@ -25,6 +25,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 +33,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/typography/typography.json

@@ -2,15 +2,33 @@
   "fontStack": {
     "system": {
       "$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"]
+        }
+      }
     },
     "sansSerif": {
       "$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"]
+        }
+      }
     },
     "monospace": {
       "$value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
-      "$type": "fontFamily"
+      "$type": "fontFamily",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "typography",
+          "scopes": ["all"]
+        }
+      }
     }
   },
   "text": {

package/src/transformers/fontFamilyToCss.ts

@@ -1,8 +1,7 @@
 import type StyleDictionary from 'style-dictionary'
 import {isFontFamily} from '../filters'
 import {getTokenValue} from './utilities/getTokenValue'
-
-const hasSpaceInName = (string: string) => /\s/g.test(string)
+import {hasSpaceInString} from './utilities/hasSpaceInString'
 /**
  * takes a value and returns it if its a string or concats strings in an array quoting strings with spaces
  * @param value
@@ -18,7 +17,7 @@ export const parseFontFamily = (value: unknown): string => {
         if (typeof string !== 'string') {
           throw new Error(`Invalid value in array ${string}, must be a string`)
         }
-        return hasSpaceInName(string) ? `'${string}'` : string
+        return hasSpaceInString(string) ? `'${string}'` : string
       })
       .join(', ')
   }
@@ -28,7 +27,7 @@ export const parseFontFamily = (value: unknown): string => {
  * @description converts fontFamily tokens value to string
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `fontFamily`
- * @transformer returns a number
+ * @transformer returns a string
  */
 export const fontFamilyToCss: StyleDictionary.Transform = {
   type: `value`,

package/src/transformers/fontFamilyToFigma.ts

@@ -0,0 +1,47 @@
+import type StyleDictionary from 'style-dictionary'
+import {isFontFamily} from '../filters'
+import {hasSpaceInString} from './utilities/hasSpaceInString'
+/**
+ * takes a value and returns it if its a string or concats strings in an array quoting strings with spaces
+ * @param value
+ * @returns string
+ */
+export const parseFontFamily = (
+  token: StyleDictionary.TransformedToken,
+  fontFamilies: Record<string, string> = {},
+): string => {
+  // return value from fontFamilies
+  if (token.name in fontFamilies) {
+    return fontFamilies[token.name]
+  }
+  // return string
+  if (typeof token.value === 'string') {
+    return token.value
+  }
+  // return stringified array
+  if (Array.isArray(token.value)) {
+    return token.value
+      .map((string: string) => {
+        if (typeof string !== 'string') {
+          throw new Error(`Invalid value in array ${string}, must be a string`)
+        }
+        return hasSpaceInString(string) ? `'${string}'` : string
+      })
+      .join(', ')
+  }
+  // invalid value
+  throw new Error(`Invalid value ${token.value}, should be a string or array of strings`)
+}
+/**
+ * @description converts fontFamily tokens value to string
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `fontFamily`
+ * @transformer returns a string
+ */
+export const fontFamilyToFigma: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isFontFamily,
+  transformer: (token: StyleDictionary.TransformedToken, platform: StyleDictionary.Platform): string =>
+    parseFontFamily(token, platform.options?.fontFamilies),
+}

package/src/transformers/index.ts

@@ -10,6 +10,7 @@ export {dimensionToPixelUnitless} from './dimensionToPixelUnitless'
 export {durationToCss} from './durationToCss'
 export {figmaAttributes} from './figmaAttributes'
 export {fontFamilyToCss} from './fontFamilyToCss'
+export {fontFamilyToFigma} from './fontFamilyToFigma'
 export {fontWeightToNumber} from './fontWeightToNumber'
 export {jsonDeprecated} from './jsonDeprecated'
 export {namePathToCamelCase} from './namePathToCamelCase'

package/src/transformers/utilities/hasSpaceInString.ts

@@ -0,0 +1,6 @@
+export const hasSpaceInString = (string: string): boolean => {
+  if (typeof string !== 'string') {
+    throw new TypeError(`Invalid input. Input must be a string, ${typeof string} provided`)
+  }
+  return /\s/g.test(string)
+}

package/tokens-v2-private/css/tokens/base/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/base/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/size/border.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/size/breakpoints.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/size/size-coarse.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 

package/tokens-v2-private/css/tokens/functional/size/size-fine.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 

package/tokens-v2-private/css/tokens/functional/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 :root {

package/tokens-v2-private/js/module/tokens/base/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/base/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/border.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/breakpoints.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/size-coarse.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/size-fine.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/viewport.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/tokens/base/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 export const BaseSize4 = "0.25rem";

package/tokens-v2-private/js/tokens/base/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 export const BaseTextWeightLight = "300";

package/tokens-v2-private/js/tokens/functional/size/border.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 export const PrimerBorderInsetThin = "inset 0 0 0 max(1px, 0.0625rem)";

package/tokens-v2-private/js/tokens/functional/size/breakpoints.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 export const PrimerBreakpointXsmall = "20rem";

package/tokens-v2-private/js/tokens/functional/size/size-coarse.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 export const PrimerControlMinTargetAuto = "2.75rem";

package/tokens-v2-private/js/tokens/functional/size/size-fine.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 export const PrimerControlMinTargetAuto = "1rem";

package/tokens-v2-private/js/tokens/functional/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 export const PrimerControlMinTargetFine = "1rem";

package/tokens-v2-private/js/tokens/functional/size/viewport.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 export const PrimerViewportRangeNarrow = "(max-width: calc(48rem - 0.02px))";

package/tokens-v2-private/js/tokens/functional/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Apr 2024 06:46:04 GMT
+ * Generated on Thu, 18 Apr 2024 12:05:02 GMT
  */
 
 export const PrimerFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";

package/tokens-v2-private/scss/tokens/base/size/size.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 18 Apr 2024 06:46:04 GMT
+// Generated on Thu, 18 Apr 2024 12:05:02 GMT
 
 $base-size-128: 8rem;
 $base-size-112: 7rem;

package/tokens-v2-private/scss/tokens/base/typography/typography.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 18 Apr 2024 06:46:04 GMT
+// Generated on Thu, 18 Apr 2024 12:05:02 GMT
 
 $base-text-weight-semibold: 600;
 $base-text-weight-medium: 500;