@primer/primitives 10.1.0 → 10.2.0-rc.356b5bb4

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

@@ -2,7 +2,6 @@
 [data-color-mode="dark"][data-dark-theme="dark_colorblind"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="dark_colorblind"],
 [data-color-mode="auto"][data-light-theme="dark_colorblind"] ::backdrop {
-  --topicTag-borderColor: #00000000;
   --highlight-neutral-bgColor: #d2992266;
   --page-header-bgColor: #0d1117;
   --diffBlob-additionLine-fgColor: #f0f6fc;
@@ -604,11 +603,11 @@
   --border-upsell-muted: 0.0625rem solid #ab7df866;
   --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
   --border-sponsors-muted: 0.0625rem solid #db61a266;
+  --topicTag-borderColor: #00000000;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_colorblind"],
   [data-color-mode="auto"][data-dark-theme="dark_colorblind"] ::backdrop {
-    --topicTag-borderColor: #00000000;
     --highlight-neutral-bgColor: #d2992266;
     --page-header-bgColor: #0d1117;
     --diffBlob-additionLine-fgColor: #f0f6fc;
@@ -1210,5 +1209,6 @@
     --border-upsell-muted: 0.0625rem solid #ab7df866;
     --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
     --border-sponsors-muted: 0.0625rem solid #db61a266;
+    --topicTag-borderColor: #00000000;
   }
 }

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

@@ -2,7 +2,6 @@
 [data-color-mode="dark"][data-dark-theme="dark_high_contrast"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="dark_high_contrast"],
 [data-color-mode="auto"][data-light-theme="dark_high_contrast"] ::backdrop {
-  --topicTag-borderColor: #409eff;
   --highlight-neutral-bgColor: #f0b72f66;
   --page-header-bgColor: #010409;
   --diffBlob-additionLine-fgColor: #ffffff;
@@ -604,11 +603,11 @@
   --border-upsell-muted: 0.0625rem solid #bf8fff;
   --border-sponsors-emphasis: 0.0625rem solid #ef6eb1;
   --border-sponsors-muted: 0.0625rem solid #f87cbd;
+  --topicTag-borderColor: #409eff;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
   [data-color-mode="auto"][data-dark-theme="dark_high_contrast"] ::backdrop {
-    --topicTag-borderColor: #409eff;
     --highlight-neutral-bgColor: #f0b72f66;
     --page-header-bgColor: #010409;
     --diffBlob-additionLine-fgColor: #ffffff;
@@ -1210,5 +1209,6 @@
     --border-upsell-muted: 0.0625rem solid #bf8fff;
     --border-sponsors-emphasis: 0.0625rem solid #ef6eb1;
     --border-sponsors-muted: 0.0625rem solid #f87cbd;
+    --topicTag-borderColor: #409eff;
   }
 }

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

@@ -2,7 +2,6 @@
 [data-color-mode="dark"][data-dark-theme="dark_tritanopia"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="dark_tritanopia"],
 [data-color-mode="auto"][data-light-theme="dark_tritanopia"] ::backdrop {
-  --topicTag-borderColor: #00000000;
   --highlight-neutral-bgColor: #d2992266;
   --page-header-bgColor: #0d1117;
   --diffBlob-additionLine-fgColor: #f0f6fc;
@@ -604,11 +603,11 @@
   --border-upsell-muted: 0.0625rem solid #ab7df866;
   --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
   --border-sponsors-muted: 0.0625rem solid #db61a266;
+  --topicTag-borderColor: #00000000;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_tritanopia"],
   [data-color-mode="auto"][data-dark-theme="dark_tritanopia"] ::backdrop {
-    --topicTag-borderColor: #00000000;
     --highlight-neutral-bgColor: #d2992266;
     --page-header-bgColor: #0d1117;
     --diffBlob-additionLine-fgColor: #f0f6fc;
@@ -1210,5 +1209,6 @@
     --border-upsell-muted: 0.0625rem solid #ab7df866;
     --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
     --border-sponsors-muted: 0.0625rem solid #db61a266;
+    --topicTag-borderColor: #00000000;
   }
 }

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

@@ -2,7 +2,6 @@
 [data-color-mode="dark"][data-dark-theme="dark"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="dark"],
 [data-color-mode="auto"][data-light-theme="dark"] ::backdrop {
-  --topicTag-borderColor: #00000000;
   --highlight-neutral-bgColor: #d2992266;
   --page-header-bgColor: #0d1117;
   --diffBlob-additionLine-fgColor: #f0f6fc;
@@ -604,11 +603,11 @@
   --border-upsell-muted: 0.0625rem solid #ab7df866;
   --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
   --border-sponsors-muted: 0.0625rem solid #db61a266;
+  --topicTag-borderColor: #00000000;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark"],
   [data-color-mode="auto"][data-dark-theme="dark"] ::backdrop {
-    --topicTag-borderColor: #00000000;
     --highlight-neutral-bgColor: #d2992266;
     --page-header-bgColor: #0d1117;
     --diffBlob-additionLine-fgColor: #f0f6fc;
@@ -1210,5 +1209,6 @@
     --border-upsell-muted: 0.0625rem solid #ab7df866;
     --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
     --border-sponsors-muted: 0.0625rem solid #db61a266;
+    --topicTag-borderColor: #00000000;
   }
 }

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

@@ -2,7 +2,6 @@
 [data-color-mode="light"][data-light-theme="light_colorblind"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="light_colorblind"],
 [data-color-mode="auto"][data-light-theme="light_colorblind"] ::backdrop {
-  --topicTag-borderColor: #ffffff00;
   --highlight-neutral-bgColor: #fff8c5;
   --page-header-bgColor: #f6f8fa;
   --diffBlob-additionLine-fgColor: #1f2328;
@@ -604,11 +603,11 @@
   --border-upsell-muted: 0.0625rem solid #c297ff66;
   --border-sponsors-emphasis: 0.0625rem solid #bf3989;
   --border-sponsors-muted: 0.0625rem solid #ff80c866;
+  --topicTag-borderColor: #ffffff00;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light_colorblind"],
   [data-color-mode="auto"][data-dark-theme="light_colorblind"] ::backdrop {
-    --topicTag-borderColor: #ffffff00;
     --highlight-neutral-bgColor: #fff8c5;
     --page-header-bgColor: #f6f8fa;
     --diffBlob-additionLine-fgColor: #1f2328;
@@ -1210,5 +1209,6 @@
     --border-upsell-muted: 0.0625rem solid #c297ff66;
     --border-sponsors-emphasis: 0.0625rem solid #bf3989;
     --border-sponsors-muted: 0.0625rem solid #ff80c866;
+    --topicTag-borderColor: #ffffff00;
   }
 }

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

@@ -2,7 +2,6 @@
 [data-color-mode="light"][data-light-theme="light_high_contrast"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="light_high_contrast"],
 [data-color-mode="auto"][data-light-theme="light_high_contrast"] ::backdrop {
-  --topicTag-borderColor: #0349b4;
   --highlight-neutral-bgColor: #fcf7be;
   --page-header-bgColor: #e6eaef;
   --diffBlob-additionLine-fgColor: #010409;
@@ -604,11 +603,11 @@
   --border-upsell-muted: 0.0625rem solid #a371f7;
   --border-sponsors-emphasis: 0.0625rem solid #971368;
   --border-sponsors-muted: 0.0625rem solid #ed4baf;
+  --topicTag-borderColor: #0349b4;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light_high_contrast"],
   [data-color-mode="auto"][data-dark-theme="light_high_contrast"] ::backdrop {
-    --topicTag-borderColor: #0349b4;
     --highlight-neutral-bgColor: #fcf7be;
     --page-header-bgColor: #e6eaef;
     --diffBlob-additionLine-fgColor: #010409;
@@ -1210,5 +1209,6 @@
     --border-upsell-muted: 0.0625rem solid #a371f7;
     --border-sponsors-emphasis: 0.0625rem solid #971368;
     --border-sponsors-muted: 0.0625rem solid #ed4baf;
+    --topicTag-borderColor: #0349b4;
   }
 }

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

@@ -2,7 +2,6 @@
 [data-color-mode="light"][data-light-theme="light_tritanopia"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="light_tritanopia"],
 [data-color-mode="auto"][data-light-theme="light_tritanopia"] ::backdrop {
-  --topicTag-borderColor: #ffffff00;
   --highlight-neutral-bgColor: #fff8c5;
   --page-header-bgColor: #f6f8fa;
   --diffBlob-additionLine-fgColor: #1f2328;
@@ -604,11 +603,11 @@
   --border-upsell-muted: 0.0625rem solid #c297ff66;
   --border-sponsors-emphasis: 0.0625rem solid #bf3989;
   --border-sponsors-muted: 0.0625rem solid #ff80c866;
+  --topicTag-borderColor: #ffffff00;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light_tritanopia"],
   [data-color-mode="auto"][data-dark-theme="light_tritanopia"] ::backdrop {
-    --topicTag-borderColor: #ffffff00;
     --highlight-neutral-bgColor: #fff8c5;
     --page-header-bgColor: #f6f8fa;
     --diffBlob-additionLine-fgColor: #1f2328;
@@ -1210,5 +1209,6 @@
     --border-upsell-muted: 0.0625rem solid #c297ff66;
     --border-sponsors-emphasis: 0.0625rem solid #bf3989;
     --border-sponsors-muted: 0.0625rem solid #ff80c866;
+    --topicTag-borderColor: #ffffff00;
   }
 }

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

@@ -2,7 +2,6 @@
 [data-color-mode="light"][data-light-theme="light"] ::backdrop,
 [data-color-mode="auto"][data-light-theme="light"],
 [data-color-mode="auto"][data-light-theme="light"] ::backdrop {
-  --topicTag-borderColor: #ffffff00;
   --highlight-neutral-bgColor: #fff8c5;
   --page-header-bgColor: #f6f8fa;
   --diffBlob-additionLine-fgColor: #1f2328;
@@ -604,11 +603,11 @@
   --border-upsell-muted: 0.0625rem solid #c297ff66;
   --border-sponsors-emphasis: 0.0625rem solid #bf3989;
   --border-sponsors-muted: 0.0625rem solid #ff80c866;
+  --topicTag-borderColor: #ffffff00;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="light"],
   [data-color-mode="auto"][data-dark-theme="light"] ::backdrop {
-    --topicTag-borderColor: #ffffff00;
     --highlight-neutral-bgColor: #fff8c5;
     --page-header-bgColor: #f6f8fa;
     --diffBlob-additionLine-fgColor: #1f2328;
@@ -1210,5 +1209,6 @@
     --border-upsell-muted: 0.0625rem solid #c297ff66;
     --border-sponsors-emphasis: 0.0625rem solid #bf3989;
     --border-sponsors-muted: 0.0625rem solid #ff80c866;
+    --topicTag-borderColor: #ffffff00;
   }
 }

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

@@ -1,31 +1,4 @@
 {
-  "topicTag-borderColor": {
-    "$extensions": {
-      "org.primer.figma": {
-        "collection": "mode",
-        "group": "component",
-        "scopes": ["borderColor"]
-      }
-    },
-    "filePath": "src/tokens/functional/color/dark/app-dark.json5",
-    "isSource": true,
-    "original": {
-      "$value": "{base.color.transparent}",
-      "$type": "color",
-      "$extensions": {
-        "org.primer.figma": {
-          "collection": "mode",
-          "group": "component",
-          "scopes": ["borderColor"]
-        }
-      }
-    },
-    "name": "topicTag-borderColor",
-    "attributes": {},
-    "path": ["topicTag", "borderColor"],
-    "value": "#00000000",
-    "type": "color"
-  },
   "highlight-neutral-bgColor": {
     "$extensions": {
       "org.primer.figma": {
@@ -376,17 +349,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 +418,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 +433,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 +11891,8 @@
     "type": "color"
   },
   "fgColor-disabled": {
+    "alpha": 0.6,
     "$extensions": {
-      "alpha": 0.6,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -11943,8 +11904,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 +12847,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 +13601,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": {},
@@ -15705,5 +15658,40 @@
     "path": ["border", "sponsors", "muted"],
     "value": "0.0625rem solid #db61a266",
     "type": "border"
+  },
+  "topicTag-borderColor": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "group": "component",
+        "scopes": ["borderColor"]
+      },
+      "org.primer.overrides": {
+        "light-high-contrast": "#1f6feb",
+        "dark-high-contrast": "#1f6feb"
+      }
+    },
+    "filePath": "src/tokens/component/topicTag.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.color.transparent}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "group": "component",
+          "scopes": ["borderColor"]
+        },
+        "org.primer.overrides": {
+          "light-high-contrast": "{borderColor.accent.emphasis}",
+          "dark-high-contrast": "{borderColor.accent.emphasis}"
+        }
+      }
+    },
+    "name": "topicTag-borderColor",
+    "attributes": {},
+    "path": ["topicTag", "borderColor"],
+    "value": "#00000000",
+    "type": "color"
   }
 }

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

@@ -5,9 +5,13 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["borderColor"]
+      },
+      "org.primer.overrides": {
+        "light-high-contrast": "#316dca",
+        "dark-high-contrast": "#316dca"
       }
     },
-    "filePath": "src/tokens/functional/color/dark/app-dark.json5",
+    "filePath": "src/tokens/component/topicTag.json5",
     "isSource": true,
     "original": {
       "$value": "{base.color.transparent}",
@@ -17,6 +21,10 @@
           "collection": "mode",
           "group": "component",
           "scopes": ["borderColor"]
+        },
+        "org.primer.overrides": {
+          "light-high-contrast": "{borderColor.accent.emphasis}",
+          "dark-high-contrast": "{borderColor.accent.emphasis}"
         }
       }
     },
@@ -12616,8 +12624,8 @@
     "type": "color"
   },
   "bgColor-danger-muted": {
+    "alpha": 0.1,
     "$extensions": {
-      "alpha": 0.1,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -12632,8 +12640,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 +12692,8 @@
     "type": "color"
   },
   "bgColor-closed-muted": {
+    "alpha": 0.1,
     "$extensions": {
-      "alpha": 0.1,
       "org.primer.figma": {
         "collection": "mode",
         "group": "semantic",
@@ -12700,8 +12708,8 @@
     "original": {
       "$value": "{bgColor.danger.muted}",
       "$type": "color",
+      "alpha": 0.1,
       "$extensions": {
-        "alpha": 0.1,
         "org.primer.figma": {
           "collection": "mode",
           "group": "semantic",