@primer/primitives 10.1.0-rc.f957a908 → 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/css/functional/themes/dark-colorblind.css

@@ -259,10 +259,10 @@
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #656c7633;
   --button-invisible-bgColor-active: #656c7640;
-  --button-invisible-bgColor-disabled: #212830;
+  --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-  --button-invisible-borderColor-disabled: #656c761a;
+  --button-invisible-borderColor-disabled: #00000000;
   --button-outline-fgColor-rest: #388bfd;
   --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
     --button-invisible-bgColor-rest: #00000000;
     --button-invisible-bgColor-hover: #656c7633;
     --button-invisible-bgColor-active: #656c7640;
-    --button-invisible-bgColor-disabled: #212830;
+    --button-invisible-bgColor-disabled: #00000000;
     --button-invisible-borderColor-rest: #00000000;
     --button-invisible-borderColor-hover: #00000000;
-    --button-invisible-borderColor-disabled: #656c761a;
+    --button-invisible-borderColor-disabled: #00000000;
     --button-outline-fgColor-rest: #388bfd;
     --button-outline-fgColor-hover: #58a6ff;
     --button-outline-fgColor-active: #ffffff;

package/dist/css/functional/themes/dark-dimmed.css

@@ -259,10 +259,10 @@
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #656c7626;
   --button-invisible-bgColor-active: #656c7633;
-  --button-invisible-bgColor-disabled: #2a313c;
+  --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-  --button-invisible-borderColor-disabled: #656c761a;
+  --button-invisible-borderColor-disabled: #00000000;
   --button-outline-fgColor-rest: #4184e4;
   --button-outline-fgColor-hover: #539bf5;
   --button-outline-fgColor-active: #cdd9e5;
@@ -865,10 +865,10 @@
     --button-invisible-bgColor-rest: #00000000;
     --button-invisible-bgColor-hover: #656c7626;
     --button-invisible-bgColor-active: #656c7633;
-    --button-invisible-bgColor-disabled: #2a313c;
+    --button-invisible-bgColor-disabled: #00000000;
     --button-invisible-borderColor-rest: #00000000;
     --button-invisible-borderColor-hover: #00000000;
-    --button-invisible-borderColor-disabled: #656c761a;
+    --button-invisible-borderColor-disabled: #00000000;
     --button-outline-fgColor-rest: #4184e4;
     --button-outline-fgColor-hover: #539bf5;
     --button-outline-fgColor-active: #cdd9e5;

package/dist/css/functional/themes/dark-high-contrast.css

@@ -259,10 +259,10 @@
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #151b23;
   --button-invisible-bgColor-active: #212830;
-  --button-invisible-bgColor-disabled: #262c36;
+  --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #b7bdc8;
-  --button-invisible-borderColor-disabled: #9198a11f;
+  --button-invisible-borderColor-disabled: #00000000;
   --button-outline-fgColor-rest: #5cacff;
   --button-outline-fgColor-hover: #71b7ff;
   --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
     --button-invisible-bgColor-rest: #00000000;
     --button-invisible-bgColor-hover: #151b23;
     --button-invisible-bgColor-active: #212830;
-    --button-invisible-bgColor-disabled: #262c36;
+    --button-invisible-bgColor-disabled: #00000000;
     --button-invisible-borderColor-rest: #00000000;
     --button-invisible-borderColor-hover: #b7bdc8;
-    --button-invisible-borderColor-disabled: #9198a11f;
+    --button-invisible-borderColor-disabled: #00000000;
     --button-outline-fgColor-rest: #5cacff;
     --button-outline-fgColor-hover: #71b7ff;
     --button-outline-fgColor-active: #ffffff;

package/dist/css/functional/themes/dark-tritanopia.css

@@ -259,10 +259,10 @@
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #656c7633;
   --button-invisible-bgColor-active: #656c7640;
-  --button-invisible-bgColor-disabled: #212830;
+  --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-  --button-invisible-borderColor-disabled: #656c761a;
+  --button-invisible-borderColor-disabled: #00000000;
   --button-outline-fgColor-rest: #388bfd;
   --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
     --button-invisible-bgColor-rest: #00000000;
     --button-invisible-bgColor-hover: #656c7633;
     --button-invisible-bgColor-active: #656c7640;
-    --button-invisible-bgColor-disabled: #212830;
+    --button-invisible-bgColor-disabled: #00000000;
     --button-invisible-borderColor-rest: #00000000;
     --button-invisible-borderColor-hover: #00000000;
-    --button-invisible-borderColor-disabled: #656c761a;
+    --button-invisible-borderColor-disabled: #00000000;
     --button-outline-fgColor-rest: #388bfd;
     --button-outline-fgColor-hover: #58a6ff;
     --button-outline-fgColor-active: #ffffff;

package/dist/css/functional/themes/dark.css

@@ -259,10 +259,10 @@
   --button-invisible-bgColor-rest: #00000000;
   --button-invisible-bgColor-hover: #656c7633;
   --button-invisible-bgColor-active: #656c7640;
-  --button-invisible-bgColor-disabled: #212830;
+  --button-invisible-bgColor-disabled: #00000000;
   --button-invisible-borderColor-rest: #00000000;
   --button-invisible-borderColor-hover: #00000000;
-  --button-invisible-borderColor-disabled: #656c761a;
+  --button-invisible-borderColor-disabled: #00000000;
   --button-outline-fgColor-rest: #388bfd;
   --button-outline-fgColor-hover: #58a6ff;
   --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
     --button-invisible-bgColor-rest: #00000000;
     --button-invisible-bgColor-hover: #656c7633;
     --button-invisible-bgColor-active: #656c7640;
-    --button-invisible-bgColor-disabled: #212830;
+    --button-invisible-bgColor-disabled: #00000000;
     --button-invisible-borderColor-rest: #00000000;
     --button-invisible-borderColor-hover: #00000000;
-    --button-invisible-borderColor-disabled: #656c761a;
+    --button-invisible-borderColor-disabled: #00000000;
     --button-outline-fgColor-rest: #388bfd;
     --button-outline-fgColor-hover: #58a6ff;
     --button-outline-fgColor-active: #ffffff;

package/dist/css/functional/themes/light-colorblind.css

@@ -259,10 +259,10 @@
   --button-invisible-bgColor-rest: #ffffff00;
   --button-invisible-bgColor-hover: #818b981a;
   --button-invisible-bgColor-active: #818b9826;
-  --button-invisible-bgColor-disabled: #eff2f5;
+  --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #ffffff00;
-  --button-invisible-borderColor-disabled: #818b981a;
+  --button-invisible-borderColor-disabled: #ffffff00;
   --button-outline-fgColor-rest: #0969da;
   --button-outline-fgColor-hover: #ffffff;
   --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
     --button-invisible-bgColor-rest: #ffffff00;
     --button-invisible-bgColor-hover: #818b981a;
     --button-invisible-bgColor-active: #818b9826;
-    --button-invisible-bgColor-disabled: #eff2f5;
+    --button-invisible-bgColor-disabled: #ffffff00;
     --button-invisible-borderColor-rest: #ffffff00;
     --button-invisible-borderColor-hover: #ffffff00;
-    --button-invisible-borderColor-disabled: #818b981a;
+    --button-invisible-borderColor-disabled: #ffffff00;
     --button-outline-fgColor-rest: #0969da;
     --button-outline-fgColor-hover: #ffffff;
     --button-outline-fgColor-active: #ffffff;

package/dist/css/functional/themes/light-high-contrast.css

@@ -259,10 +259,10 @@
   --button-invisible-bgColor-rest: #ffffff00;
   --button-invisible-bgColor-hover: #dae0e7;
   --button-invisible-bgColor-active: #d1d9e0;
-  --button-invisible-bgColor-disabled: #e0e6eb;
+  --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #454c54;
-  --button-invisible-borderColor-disabled: #59636e1f;
+  --button-invisible-borderColor-disabled: #ffffff00;
   --button-outline-fgColor-rest: #023b95;
   --button-outline-fgColor-hover: #ffffff;
   --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
     --button-invisible-bgColor-rest: #ffffff00;
     --button-invisible-bgColor-hover: #dae0e7;
     --button-invisible-bgColor-active: #d1d9e0;
-    --button-invisible-bgColor-disabled: #e0e6eb;
+    --button-invisible-bgColor-disabled: #ffffff00;
     --button-invisible-borderColor-rest: #ffffff00;
     --button-invisible-borderColor-hover: #454c54;
-    --button-invisible-borderColor-disabled: #59636e1f;
+    --button-invisible-borderColor-disabled: #ffffff00;
     --button-outline-fgColor-rest: #023b95;
     --button-outline-fgColor-hover: #ffffff;
     --button-outline-fgColor-active: #ffffff;

package/dist/css/functional/themes/light-tritanopia.css

@@ -259,10 +259,10 @@
   --button-invisible-bgColor-rest: #ffffff00;
   --button-invisible-bgColor-hover: #818b981a;
   --button-invisible-bgColor-active: #818b9826;
-  --button-invisible-bgColor-disabled: #eff2f5;
+  --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #ffffff00;
-  --button-invisible-borderColor-disabled: #818b981a;
+  --button-invisible-borderColor-disabled: #ffffff00;
   --button-outline-fgColor-rest: #0969da;
   --button-outline-fgColor-hover: #ffffff;
   --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
     --button-invisible-bgColor-rest: #ffffff00;
     --button-invisible-bgColor-hover: #818b981a;
     --button-invisible-bgColor-active: #818b9826;
-    --button-invisible-bgColor-disabled: #eff2f5;
+    --button-invisible-bgColor-disabled: #ffffff00;
     --button-invisible-borderColor-rest: #ffffff00;
     --button-invisible-borderColor-hover: #ffffff00;
-    --button-invisible-borderColor-disabled: #818b981a;
+    --button-invisible-borderColor-disabled: #ffffff00;
     --button-outline-fgColor-rest: #0969da;
     --button-outline-fgColor-hover: #ffffff;
     --button-outline-fgColor-active: #ffffff;

package/dist/css/functional/themes/light.css

@@ -259,10 +259,10 @@
   --button-invisible-bgColor-rest: #ffffff00;
   --button-invisible-bgColor-hover: #818b981a;
   --button-invisible-bgColor-active: #818b9826;
-  --button-invisible-bgColor-disabled: #eff2f5;
+  --button-invisible-bgColor-disabled: #ffffff00;
   --button-invisible-borderColor-rest: #ffffff00;
   --button-invisible-borderColor-hover: #ffffff00;
-  --button-invisible-borderColor-disabled: #818b981a;
+  --button-invisible-borderColor-disabled: #ffffff00;
   --button-outline-fgColor-rest: #0969da;
   --button-outline-fgColor-hover: #ffffff;
   --button-outline-fgColor-active: #ffffff;
@@ -865,10 +865,10 @@
     --button-invisible-bgColor-rest: #ffffff00;
     --button-invisible-bgColor-hover: #818b981a;
     --button-invisible-bgColor-active: #818b9826;
-    --button-invisible-bgColor-disabled: #eff2f5;
+    --button-invisible-bgColor-disabled: #ffffff00;
     --button-invisible-borderColor-rest: #ffffff00;
     --button-invisible-borderColor-hover: #ffffff00;
-    --button-invisible-borderColor-disabled: #818b981a;
+    --button-invisible-borderColor-disabled: #ffffff00;
     --button-outline-fgColor-rest: #0969da;
     --button-outline-fgColor-hover: #ffffff;
     --button-outline-fgColor-active: #ffffff;

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": {},
@@ -6812,7 +6800,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6825,7 +6813,7 @@
     "name": "button-invisible-bgColor-disabled",
     "attributes": {},
     "path": ["button", "invisible", "bgColor", "disabled"],
-    "value": "#212830",
+    "value": "#00000000",
     "type": "color"
   },
   "button-invisible-borderColor-rest": {
@@ -6893,7 +6881,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6906,7 +6894,7 @@
     "name": "button-invisible-borderColor-disabled",
     "attributes": {},
     "path": ["button", "invisible", "borderColor", "disabled"],
-    "value": "#656c761a",
+    "value": "#00000000",
     "type": "color"
   },
   "button-outline-fgColor-rest": {
@@ -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

@@ -6668,7 +6668,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6681,7 +6681,7 @@
     "name": "button-invisible-bgColor-disabled",
     "attributes": {},
     "path": ["button", "invisible", "bgColor", "disabled"],
-    "value": "#2a313c",
+    "value": "#00000000",
     "type": "color"
   },
   "button-invisible-borderColor-rest": {
@@ -6749,7 +6749,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -6762,7 +6762,7 @@
     "name": "button-invisible-borderColor-disabled",
     "attributes": {},
     "path": ["button", "invisible", "borderColor", "disabled"],
-    "value": "#656c761a",
+    "value": "#00000000",
     "type": "color"
   },
   "button-outline-fgColor-rest": {
@@ -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

@@ -5582,7 +5582,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "$value": "{control.transparent.bgColor.disabled}",
+      "$value": "{base.color.transparent}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -5595,7 +5595,7 @@
     "name": "button-invisible-bgColor-disabled",
     "attributes": {},
     "path": ["button", "invisible", "bgColor", "disabled"],
-    "value": "#262c36",
+    "value": "#00000000",
     "type": "color"
   },
   "button-invisible-borderColor-rest": {
@@ -5663,7 +5663,7 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "$value": "{control.borderColor.disabled}",
+      "$value": "{base.color.transparent}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -5676,7 +5676,7 @@
     "name": "button-invisible-borderColor-disabled",
     "attributes": {},
     "path": ["button", "invisible", "borderColor", "disabled"],
-    "value": "#9198a11f",
+    "value": "#00000000",
     "type": "color"
   },
   "button-outline-fgColor-rest": {
@@ -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",