@primer/primitives 7.17.0-rc.3f0bd2a1 → 7.17.0-rc.4dfa9cdd

package/src/tokens/functional/typography/typography.json

@@ -2,34 +2,83 @@
   "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": {
     "display": {
       "lineBoxHeight": {
-        "$value": "56px",
-        "$type": "dimension"
+        "$value": 1.4,
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 40
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"],
+            "fontSizeInPx": 40
+          }
+        }
       },
       "size": {
         "$value": "40px",
-        "$type": "dimension"
+        "$type": "dimension",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "lineHeight": {
         "$value": 1.4,
-        "$type": "number"
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 40
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.medium}",
-        "$type": "fontWeight"
+        "$type": "fontWeight",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "shorthand": {
         "$value": {
@@ -46,43 +95,106 @@
       "size": {
         "large": {
           "$value": "32px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": "20px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": "16px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "lineHeight": {
         "large": {
           "$value": 1.5,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 32
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": 1.6,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 20
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": 1.5,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 16
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "weight": {
         "large": {
           "$value": "{base.text.weight.semibold}",
-          "$type": "fontWeight"
+          "$type": "fontWeight",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": "{base.text.weight.semibold}",
-          "$type": "fontWeight"
+          "$type": "fontWeight",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": "{base.text.weight.semibold}",
-          "$type": "fontWeight"
+          "$type": "fontWeight",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "shorthand": {
@@ -121,15 +233,33 @@
     "subtitle": {
       "size": {
         "$value": "20px",
-        "$type": "dimension"
+        "$type": "dimension",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "lineHeight": {
         "$value": 1.6,
-        "$type": "number"
+        "$type": "number",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight"
+        "$type": "fontWeight",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "shorthand": {
         "$value": {
@@ -146,29 +276,74 @@
       "size": {
         "large": {
           "$value": "16px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": "14px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": "12px",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$extensions": {
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "lineHeight": {
         "large": {
           "$value": 1.5,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 16
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "medium": {
           "$value": 1.4285,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 14
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         },
         "small": {
           "$value": 1.6666,
-          "$type": "number"
+          "$type": "number",
+          "$extensions": {
+            "org.primer.data": {
+              "fontSize": 12
+            },
+            "org.primer.figma": {
+              "collection": "typography",
+              "scopes": ["all"]
+            }
+          }
         }
       },
       "weight": {
@@ -211,15 +386,36 @@
     "caption": {
       "size": {
         "$value": "12px",
-        "$type": "dimension"
+        "$type": "dimension",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "lineHeight": {
         "$value": 1.3333,
-        "$type": "number"
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 12
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight"
+        "$type": "fontWeight",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "shorthand": {
         "$value": {
@@ -235,15 +431,36 @@
     "codeBlock": {
       "size": {
         "$value": "13px",
-        "$type": "dimension"
+        "$type": "dimension",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "lineHeight": {
         "$value": 1.5385,
-        "$type": "number"
+        "$type": "number",
+        "$extensions": {
+          "org.primer.data": {
+            "fontSize": 13
+          },
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight"
+        "$type": "fontWeight",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "shorthand": {
         "$value": {
@@ -259,11 +476,23 @@
     "codeInline": {
       "size": {
         "$value": "0.9285em",
-        "$type": "dimension"
+        "$type": "dimension",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "weight": {
         "$value": "{base.text.weight.normal}",
-        "$type": "fontWeight"
+        "$type": "fontWeight",
+        "$extensions": {
+          "org.primer.figma": {
+            "collection": "typography",
+            "scopes": ["all"]
+          }
+        }
       },
       "shorthand": {
         "$value": {

package/src/transformers/floatToPixel.ts

@@ -0,0 +1,33 @@
+import type StyleDictionary from 'style-dictionary'
+import {isNumber} from '../filters'
+/**
+ * takes a value and returns it if its a px string if it is a float and the token has a fontSize value in extensions['org.primer.data']
+ * @param value
+ * @returns string
+ */
+export const convertFloatToPixel = (token: StyleDictionary.TransformedToken) => {
+  // short circut if value is not a number
+  if (
+    typeof token.value !== 'number' ||
+    !token.$extensions?.['org.primer.data']?.fontSize ||
+    typeof token.$extensions?.['org.primer.data']?.fontSize !== 'number'
+  ) {
+    return token.value
+  }
+  // convert value
+  const convertedValue = token.$extensions?.['org.primer.data']?.fontSize * token.value
+  // return converted value
+  return convertedValue === 0 ? 0 : `${Math.round(convertedValue)}px`
+}
+/**
+ * @description converts a float value to a pixel value based on the provided fontSize on the tokersn extension
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `isNumber`
+ * @transformer returns a pixel string
+ */
+export const floatToPixel: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isNumber,
+  transformer: (token: StyleDictionary.TransformedToken): string => convertFloatToPixel(token),
+}

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

@@ -4,12 +4,14 @@ export {colorToHexAlpha} from './colorToHexAlpha'
 export {colorToHexMix} from './colorToHexMix'
 export {colorToRgbAlpha} from './colorToRgbAlpha'
 export {colorToRgbaFloat} from './colorToRgbaFloat'
+export {floatToPixel} from './floatToPixel'
 export {dimensionToRem} from './dimensionToRem'
 export {dimensionToRemPxArray} from './dimensionToRemPxArray'
 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)
+}