@primer/primitives 8.1.0-rc.313f1fc7 → 8.1.0

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

@@ -2188,6 +2188,151 @@
     "attributes": {},
     "path": ["display", "red", "borderColor", "emphasis"]
   },
+  "display-coral-bgColor-muted": {
+    "value": "#ffe5db",
+    "$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.coral.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "muted"]
+  },
+  "display-coral-bgColor-emphasis": {
+    "value": "#d43511",
+    "$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.coral.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "emphasis"]
+  },
+  "display-coral-fgColor": {
+    "value": "#ba2e12",
+    "$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.coral.6}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "display-coral-fgColor",
+    "attributes": {},
+    "path": ["display", "coral", "fgColor"]
+  },
+  "display-coral-borderColor-muted": {
+    "value": "#fecebe",
+    "$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.coral.1}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "muted"]
+  },
+  "display-coral-borderColor-emphasis": {
+    "value": "#d43511",
+    "$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.coral.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "emphasis"]
+  },
   "display-yellow-bgColor-muted": {
     "value": "#ffec9e",
     "$type": "color",

package/package.json

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

package/src/PrimerStyleDictionary.ts

@@ -24,6 +24,7 @@ import {
   typographyToCss,
   dimensionToRemPxArray,
   floatToPixel,
+  floatToPixelUnitless,
 } from './transformers'
 import {
   javascriptCommonJs,
@@ -126,6 +127,11 @@ StyleDictionary.registerTransform({
   ...floatToPixel,
 })
 
+StyleDictionary.registerTransform({
+  name: 'float/pixelUnitless',
+  ...floatToPixelUnitless,
+})
+
 StyleDictionary.registerTransform({
   name: 'dimension/rem',
   ...dimensionToRem,

package/src/platforms/figma.ts

@@ -28,7 +28,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
     // 'name/pathToSlashNotation',
     'figma/attributes',
     'fontFamily/figma',
-    'float/pixel',
+    'float/pixelUnitless',
     'dimension/pixelUnitless',
     // 'border/figma',
     // 'typography/figma',

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

@@ -330,6 +330,72 @@
         },
       },
     },
+    coral: {
+      bgColor: {
+        muted: {
+          $value: '{base.display.color.red.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+        emphasis: {
+          $value: '{base.display.color.red.5}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.red.6}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component (internal)',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      borderColor: {
+        muted: {
+          $value: '{base.display.color.red.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+        emphasis: {
+          $value: '{base.display.color.red.5}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+      },
+    },
     yellow: {
       bgColor: {
         muted: {

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

@@ -330,6 +330,72 @@
         },
       },
     },
+    coral: {
+      bgColor: {
+        muted: {
+          $value: '{base.display.color.coral.0}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+        emphasis: {
+          $value: '{base.display.color.coral.5}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['bgColor'],
+            },
+          },
+        },
+      },
+      fgColor: {
+        $value: '{base.display.color.coral.6}',
+        $type: 'color',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            mode: 'light',
+            group: 'component (internal)',
+            scopes: ['fgColor'],
+          },
+        },
+      },
+      borderColor: {
+        muted: {
+          $value: '{base.display.color.coral.1}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+        emphasis: {
+          $value: '{base.display.color.coral.5}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['borderColor'],
+            },
+          },
+        },
+      },
+    },
     yellow: {
       bgColor: {
         muted: {

package/src/transformers/floatToPixel.ts

@@ -5,7 +5,7 @@ import {isNumber} from '../filters'
  * @param value
  * @returns string
  */
-export const convertFloatToPixel = (token: StyleDictionary.TransformedToken) => {
+export const convertFloatToPixel = (token: StyleDictionary.TransformedToken, unitless = false) => {
   // short circut if value is not a number
   if (
     typeof token.value !== 'number' ||
@@ -17,7 +17,7 @@ export const convertFloatToPixel = (token: StyleDictionary.TransformedToken) =>
   // convert value
   const convertedValue = token.$extensions?.['org.primer.data']?.fontSize * token.value
   // return converted value
-  return convertedValue === 0 ? 0 : `${Math.round(convertedValue)}px`
+  return convertedValue === 0 ? 0 : unitless ? Math.round(convertedValue) : `${Math.round(convertedValue)}px`
 }
 /**
  * @description converts a float value to a pixel value based on the provided fontSize on the tokersn extension
@@ -31,3 +31,10 @@ export const floatToPixel: StyleDictionary.Transform = {
   matcher: isNumber,
   transformer: (token: StyleDictionary.TransformedToken): string => convertFloatToPixel(token),
 }
+
+export const floatToPixelUnitless: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isNumber,
+  transformer: (token: StyleDictionary.TransformedToken): string => convertFloatToPixel(token, true),
+}

package/src/transformers/index.ts

@@ -5,6 +5,7 @@ export {colorToHexMix} from './colorToHexMix'
 export {colorToRgbAlpha} from './colorToRgbAlpha'
 export {colorToRgbaFloat} from './colorToRgbaFloat'
 export {floatToPixel} from './floatToPixel'
+export {floatToPixelUnitless} from './floatToPixel'
 export {dimensionToRem} from './dimensionToRem'
 export {dimensionToRemPxArray} from './dimensionToRemPxArray'
 export {dimensionToPixelUnitless} from './dimensionToPixelUnitless'