@primer/primitives 7.17.0-rc.a96c5b69 → 7.17.0-rc.ad176f0c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.17.0-rc.a96c5b69",
+  "version": "7.17.0-rc.ad176f0c",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

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/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/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}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/index.ts

@@ -4,6 +4,7 @@ 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'