@primer/primitives 10.1.0 → 10.2.0-rc.265b4e6a

package/dist/build/primerStyleDictionary.js

@@ -2,6 +2,7 @@ import StyleDictionary from 'style-dictionary';
 import { borderToCss, colorToRgbAlpha, colorToHex, colorToRgbaFloat, cubicBezierToCss, dimensionToRem, dimensionToPixelUnitless, durationToCss, figmaAttributes, fontFamilyToCss, fontFamilyToFigma, fontWeightToNumber, jsonDeprecated, namePathToDotNotation, namePathToCamelCase, namePathToPascalCase, namePathToKebabCase, namePathToSlashNotation, namePathToFigma, shadowToCss, typographyToCss, dimensionToRemPxArray, floatToPixel, floatToPixelUnitless, } from './transformers/index.js';
 import { javascriptCommonJs, javascriptEsm, typescriptExportDefinition, jsonNestedPrefixed, cssCustomMedia, jsonOneDimensional, jsonPostCssFallback, cssAdvanced, jsonFigma, } from './formats/index.js';
 import { themeOverrides } from './preprocessors/themeOverrides.js';
+import { colorAlphaToCss } from './transformers/colorAlphaToCss.js';
 /**
  * @name {@link PrimerStyleDictionary}
  * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers
@@ -58,6 +59,7 @@ PrimerStyleDictionary.registerFormat({
  * Transformers
  *
  */
+PrimerStyleDictionary.registerTransform(colorAlphaToCss);
 PrimerStyleDictionary.registerTransform(colorToRgbAlpha);
 PrimerStyleDictionary.registerTransform(colorToRgbaFloat);
 PrimerStyleDictionary.registerTransform(colorToHex);

package/dist/build/schemas/colorToken.d.ts

@@ -7,7 +7,6 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<{
     $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
     alpha: z.ZodNullable<z.ZodOptional<z.ZodEffects<z.ZodAny, any, any>>>;
     $extensions: z.ZodOptional<z.ZodObject<{
-        alpha: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
         'org.primer.figma': z.ZodOptional<z.ZodObject<{
             collection: z.ZodOptional<z.ZodEffects<z.ZodString, string, string>>;
             modeOverride: z.ZodOptional<z.ZodEffects<z.ZodString, string, string>>;
@@ -55,8 +54,7 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<{
             'dark-high-contrast'?: string | undefined;
             'dark-dimmed'?: string | undefined;
         }>>;
-    }, "strip", z.ZodTypeAny, {
-        alpha?: number | null | undefined;
+    }, "strict", z.ZodTypeAny, {
         'org.primer.figma'?: {
             group?: string | undefined;
             collection?: string | undefined;
@@ -75,7 +73,6 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<{
             'dark-dimmed'?: string | undefined;
         } | undefined;
     }, {
-        alpha?: number | null | undefined;
         'org.primer.figma'?: {
             group?: string | undefined;
             collection?: string | undefined;
@@ -101,7 +98,6 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<{
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {
-        alpha?: number | null | undefined;
         'org.primer.figma'?: {
             group?: string | undefined;
             collection?: string | undefined;
@@ -127,7 +123,6 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<{
     $description?: string | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {
-        alpha?: number | null | undefined;
         'org.primer.figma'?: {
             group?: string | undefined;
             collection?: string | undefined;

package/dist/build/schemas/colorToken.js

@@ -13,7 +13,6 @@ export const colorToken = baseToken
     alpha: alphaValue.optional().nullable(),
     $extensions: z
         .object({
-        alpha: z.number().min(0).max(1).optional().nullable(),
         'org.primer.figma': z
             .object({
             collection: collection([
@@ -64,6 +63,7 @@ export const colorToken = baseToken
             .strict()
             .optional(),
     })
+        .strict()
         .optional(),
 })
     .strict();

package/dist/build/transformers/colorAlphaToCss.d.ts

@@ -0,0 +1,3 @@
+import { Transform } from 'style-dictionary/types';
+export declare const cssColorMix: (colorA: string, colorB: string, colorBPercent: number) => string;
+export declare const colorAlphaToCss: Transform;

package/dist/build/transformers/colorAlphaToCss.js

@@ -0,0 +1,23 @@
+import { isColorWithAlpha } from '../filters/isColorWithAlpha.js';
+import { getTokenValue } from './utilities/getTokenValue.js';
+export const cssColorMix = (colorA, colorB, colorBPercent) => {
+    if (colorBPercent < 0 || colorBPercent > 1) {
+        throw new Error(`Invalid argument for "cssColorMix", colorBPercent must be between 0 and 1, ${colorBPercent} provided.`);
+    }
+    if (colorBPercent === 0)
+        return colorA;
+    if (colorBPercent === 1)
+        return colorB;
+    return `color-mix(in srgb, ${colorA}, ${colorB} ${colorBPercent * 100}%)`;
+};
+export const colorAlphaToCss = {
+    name: 'colorAlpha/css',
+    type: 'value',
+    transitive: true,
+    filter: isColorWithAlpha,
+    transform: (token) => {
+        if (!token.alpha || token.alpha === null)
+            return getTokenValue(token);
+        return cssColorMix(getTokenValue(token), 'transparent', 1 - token.alpha);
+    },
+};

package/dist/build/transformers/colorToHex.js

@@ -14,8 +14,7 @@ export const colorToHex = {
     transitive: true,
     filter: isColor,
     transform: (token) => {
-        var _a, _b;
-        const alphaValue = (_a = token.alpha) !== null && _a !== void 0 ? _a : (_b = token.$extensions) === null || _b === void 0 ? void 0 : _b.alpha;
+        const alphaValue = token.alpha;
         if (alphaValue === null || alphaValue === undefined) {
             return toHex(getTokenValue(token));
         }

package/dist/docs/functional/themes/dark-colorblind.json

@@ -376,17 +376,13 @@
     "type": "color"
   },
   "diffBlob-hunkLine-bgColor": {
-    "$extensions": {
-      "alpha": 1
-    },
+    "alpha": 1,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.3}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 1
-      }
+      "alpha": 1
     },
     "name": "diffBlob-hunkLine-bgColor",
     "attributes": {},
@@ -449,17 +445,13 @@
     "type": "color"
   },
   "diffBlob-hunkNum-bgColor-rest": {
-    "$extensions": {
-      "alpha": 1
-    },
+    "alpha": 1,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.6}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 1
-      }
+      "alpha": 1
     },
     "name": "diffBlob-hunkNum-bgColor-rest",
     "attributes": {},
@@ -468,17 +460,13 @@
     "type": "color"
   },
   "diffBlob-hunkNum-bgColor-hover": {
-    "$extensions": {
-      "alpha": 1
-    },
+    "alpha": 1,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.8}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 1
-      }
+      "alpha": 1
     },
     "name": "diffBlob-hunkNum-bgColor-hover",
     "attributes": {},
@@ -11930,8 +11918,8 @@
     "type": "color"
   },
   "fgColor-disabled": {
+    "alpha": 0.6,
     "$extensions": {
-      "alpha": 0.6,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -11943,8 +11931,8 @@
     "original": {
       "$value": "{base.color.neutral.8}",
       "$type": "color",
+      "alpha": 0.6,
       "$extensions": {
-        "alpha": 0.6,
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
@@ -12886,17 +12874,13 @@
     "type": "color"
   },
   "bgColor-closed-muted": {
-    "$extensions": {
-      "alpha": 0.1
-    },
+    "alpha": 0.1,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5",
     "isSource": true,
     "original": {
       "$value": "{bgColor.neutral.muted}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 0.1
-      }
+      "alpha": 0.1
     },
     "name": "bgColor-closed-muted",
     "attributes": {},
@@ -13644,17 +13628,13 @@
     "type": "color"
   },
   "borderColor-closed-muted": {
-    "$extensions": {
-      "alpha": 0.4
-    },
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5",
     "isSource": true,
     "original": {
       "$value": "{borderColor.muted}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 0.4
-      }
+      "alpha": 0.4
     },
     "name": "borderColor-closed-muted",
     "attributes": {},

package/dist/docs/functional/themes/dark-dimmed.json

@@ -12616,8 +12616,8 @@
     "type": "color"
   },
   "bgColor-danger-muted": {
+    "alpha": 0.1,
     "$extensions": {
-      "alpha": 0.1,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -12632,8 +12632,8 @@
     "original": {
       "$value": "{base.color.red.4}",
       "$type": "color",
+      "alpha": 0.1,
       "$extensions": {
-        "alpha": 0.1,
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
@@ -12684,8 +12684,8 @@
     "type": "color"
   },
   "bgColor-closed-muted": {
+    "alpha": 0.1,
     "$extensions": {
-      "alpha": 0.1,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -12700,8 +12700,8 @@
     "original": {
       "$value": "{bgColor.danger.muted}",
       "$type": "color",
+      "alpha": 0.1,
       "$extensions": {
-        "alpha": 0.1,
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",

package/dist/docs/functional/themes/dark-high-contrast.json

@@ -11276,8 +11276,8 @@
     "type": "color"
   },
   "bgColor-danger-muted": {
+    "alpha": 0.1,
     "$extensions": {
-      "alpha": 0.1,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -11292,8 +11292,8 @@
     "original": {
       "$value": "{base.color.red.4}",
       "$type": "color",
+      "alpha": 0.1,
       "$extensions": {
-        "alpha": 0.1,
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
@@ -11324,8 +11324,8 @@
     "type": "color"
   },
   "bgColor-closed-muted": {
+    "alpha": 0.1,
     "$extensions": {
-      "alpha": 0.1,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -11340,8 +11340,8 @@
     "original": {
       "$value": "{bgColor.danger.muted}",
       "$type": "color",
+      "alpha": 0.1,
       "$extensions": {
-        "alpha": 0.1,
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",

package/dist/docs/functional/themes/dark-tritanopia.json

@@ -166,17 +166,13 @@
     "type": "color"
   },
   "diffBlob-additionWord-bgColor": {
-    "$extensions": {
-      "alpha": 0.4
-    },
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.blue.4}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 0.4
-      }
+      "alpha": 0.4
     },
     "name": "diffBlob-additionWord-bgColor",
     "attributes": {},
@@ -212,17 +208,13 @@
     "type": "color"
   },
   "diffBlob-additionNum-bgColor": {
-    "$extensions": {
-      "alpha": 0.3
-    },
+    "alpha": 0.3,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.blue.3}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 0.3
-      }
+      "alpha": 0.3
     },
     "name": "diffBlob-additionNum-bgColor",
     "attributes": {},
@@ -424,17 +416,13 @@
     "type": "color"
   },
   "diffBlob-hunkLine-bgColor": {
-    "$extensions": {
-      "alpha": 1
-    },
+    "alpha": 1,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.3}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 1
-      }
+      "alpha": 1
     },
     "name": "diffBlob-hunkLine-bgColor",
     "attributes": {},
@@ -497,17 +485,13 @@
     "type": "color"
   },
   "diffBlob-hunkNum-bgColor-rest": {
-    "$extensions": {
-      "alpha": 1
-    },
+    "alpha": 1,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.6}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 1
-      }
+      "alpha": 1
     },
     "name": "diffBlob-hunkNum-bgColor-rest",
     "attributes": {},
@@ -516,17 +500,13 @@
     "type": "color"
   },
   "diffBlob-hunkNum-bgColor-hover": {
-    "$extensions": {
-      "alpha": 1
-    },
+    "alpha": 1,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.neutral.8}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 1
-      }
+      "alpha": 1
     },
     "name": "diffBlob-hunkNum-bgColor-hover",
     "attributes": {},
@@ -12020,8 +12000,8 @@
     "type": "color"
   },
   "fgColor-disabled": {
+    "alpha": 0.6,
     "$extensions": {
-      "alpha": 0.6,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -12033,8 +12013,8 @@
     "original": {
       "$value": "{base.color.neutral.8}",
       "$type": "color",
+      "alpha": 0.6,
       "$extensions": {
-        "alpha": 0.6,
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
@@ -12908,8 +12888,8 @@
     "type": "color"
   },
   "bgColor-danger-muted": {
+    "alpha": 0.1,
     "$extensions": {
-      "alpha": 0.1,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -12924,8 +12904,8 @@
     "original": {
       "$value": "{base.color.red.4}",
       "$type": "color",
+      "alpha": 0.1,
       "$extensions": {
-        "alpha": 0.1,
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
@@ -13490,17 +13470,13 @@
     "type": "color"
   },
   "borderColor-success-muted": {
-    "$extensions": {
-      "alpha": 0.4
-    },
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.blue.4}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 0.4
-      }
+      "alpha": 0.4
     },
     "name": "borderColor-success-muted",
     "attributes": {},
@@ -13522,17 +13498,13 @@
     "type": "color"
   },
   "borderColor-open-muted": {
-    "$extensions": {
-      "alpha": 0.4
-    },
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.red.4}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 0.4
-      }
+      "alpha": 0.4
     },
     "name": "borderColor-open-muted",
     "attributes": {},
@@ -13622,17 +13594,13 @@
     "type": "color"
   },
   "borderColor-severe-muted": {
-    "$extensions": {
-      "alpha": 0.4
-    },
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.red.4}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 0.4
-      }
+      "alpha": 0.4
     },
     "name": "borderColor-severe-muted",
     "attributes": {},
@@ -13722,17 +13690,13 @@
     "type": "color"
   },
   "borderColor-closed-muted": {
-    "$extensions": {
-      "alpha": 0.4
-    },
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.tritanopia.json5",
     "isSource": true,
     "original": {
       "$value": "{borderColor.default}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 0.4
-      }
+      "alpha": 0.4
     },
     "name": "borderColor-closed-muted",
     "attributes": {},

package/dist/docs/functional/themes/dark.json

@@ -12176,8 +12176,8 @@
     "type": "color"
   },
   "fgColor-disabled": {
+    "alpha": 0.6,
     "$extensions": {
-      "alpha": 0.6,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -12189,8 +12189,8 @@
     "original": {
       "$value": "{base.color.neutral.8}",
       "$type": "color",
+      "alpha": 0.6,
       "$extensions": {
-        "alpha": 0.6,
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
@@ -13264,8 +13264,8 @@
     "type": "color"
   },
   "bgColor-danger-muted": {
+    "alpha": 0.1,
     "$extensions": {
-      "alpha": 0.1,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -13280,8 +13280,8 @@
     "original": {
       "$value": "{base.color.red.4}",
       "$type": "color",
+      "alpha": 0.1,
       "$extensions": {
-        "alpha": 0.1,
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",
@@ -13332,8 +13332,8 @@
     "type": "color"
   },
   "bgColor-closed-muted": {
+    "alpha": 0.1,
     "$extensions": {
-      "alpha": 0.1,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -13348,8 +13348,8 @@
     "original": {
       "$value": "{bgColor.danger.muted}",
       "$type": "color",
+      "alpha": 0.1,
       "$extensions": {
-        "alpha": 0.1,
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",

package/dist/docs/functional/themes/light-colorblind.json

@@ -13666,17 +13666,13 @@
     "type": "color"
   },
   "borderColor-closed-muted": {
-    "$extensions": {
-      "alpha": 0.4
-    },
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5",
     "isSource": true,
     "original": {
       "$value": "{borderColor.default}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 0.4
-      }
+      "alpha": 0.4
     },
     "name": "borderColor-closed-muted",
     "attributes": {},

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

@@ -13708,17 +13708,13 @@
     "type": "color"
   },
   "borderColor-closed-muted": {
-    "$extensions": {
-      "alpha": 0.4
-    },
+    "alpha": 0.4,
     "filePath": "src/tokens/functional/color/light/overrides/light.tritanopia.json5",
     "isSource": true,
     "original": {
       "$value": "{borderColor.default}",
       "$type": "color",
-      "$extensions": {
-        "alpha": 0.4
-      }
+      "alpha": 0.4
     },
     "name": "borderColor-closed-muted",
     "attributes": {},