@primer/primitives 10.0.0 → 10.1.0-rc.3495b605

package/dist/build/schemas/colorToken.js

@@ -11,13 +11,6 @@ export const colorToken = baseToken
     $value: z.union([colorHexValue, referenceValue]),
     $type: tokenType('color'),
     alpha: alphaValue.optional().nullable(),
-    mix: z
-        .object({
-        color: z.string(),
-        weight: z.number().min(0).max(1),
-    })
-        .nullable()
-        .optional(),
     $extensions: z
         .object({
         alpha: z.number().min(0).max(1).optional().nullable(),
@@ -47,6 +40,29 @@ export const colorToken = baseToken
             group: z.string().optional(),
         })
             .optional(),
+        'org.primer.overrides': z
+            .object({
+            light: z.union([colorHexValue, referenceValue]).optional(),
+            'light-tritanopia': z.union([colorHexValue, referenceValue]).optional(),
+            'light-deutranopia-protanopia': z.union([colorHexValue, referenceValue]).optional(),
+            'light-high-contrast': z.union([colorHexValue, referenceValue]).optional(),
+            dark: z.union([colorHexValue, referenceValue]).optional(),
+            'dark-tritanopia': z.union([colorHexValue, referenceValue]).optional(),
+            'dark-deutranopia-protanopia': z.union([colorHexValue, referenceValue]).optional(),
+            'dark-high-contrast': z.union([colorHexValue, referenceValue]).optional(),
+            'dark-dimmed': z.union([colorHexValue, referenceValue]).optional(),
+        }, {
+            errorMap: e => {
+                if (e.code === 'unrecognized_keys') {
+                    return {
+                        message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-deutranopia-protanopia, light-high-contrast, dark, dark-tritanopia, dark-deutranopia-protanopia, dark-high-contrast, dark-dimmed`,
+                    };
+                }
+                return { message: `Error: ${e.code}` };
+            },
+        })
+            .strict()
+            .optional(),
     })
         .optional(),
 })

package/dist/build/transformers/borderToCss.js

@@ -32,7 +32,7 @@ export const borderToCss = {
         if (!checkForBorderTokenProperties(value)) {
             throw new Error(`Invalid border token property ${JSON.stringify(value)}. Must be an object with color, width and style properties.`);
         }
-        /* color | style | width */
-        return `${value.color} ${value.style} ${value.width}`;
+        /* width | style | color */
+        return `${value.width} ${value.style} ${value.color}`;
     },
 };

package/dist/build/transformers/colorToRgbaFloat.js

@@ -2,25 +2,15 @@ import { toHex } from 'color2k';
 import { isColor } from '../filters/index.js';
 import { getTokenValue } from './utilities/getTokenValue.js';
 import { rgbaFloatToHex } from './utilities/rgbaFloatToHex.js';
-import mix from './utilities/mix.js';
 import { hexToRgbaFloat } from './utilities/hexToRgbaFloat.js';
 import { isRgbaFloat } from './utilities/isRgbaFloat.js';
 const toRgbaFloat = (token, alpha = undefined) => {
-    var _a;
     let tokenValue = getTokenValue(token);
-    let tokenMixColor = (_a = token.mix) === null || _a === void 0 ? void 0 : _a.color;
     // get hex value from color string
     if (isRgbaFloat(tokenValue)) {
         tokenValue = rgbaFloatToHex(tokenValue, false);
     }
-    if (tokenMixColor && isRgbaFloat(tokenMixColor)) {
-        tokenMixColor = rgbaFloatToHex(tokenMixColor, false);
-    }
-    let hex = toHex(tokenValue);
-    // mix color with mix color and weight
-    if (token.mix && token.mix.color && token.mix.weight) {
-        hex = toHex(mix(tokenValue, tokenMixColor, token.mix.weight));
-    }
+    const hex = toHex(tokenValue);
     // return color as RgbaFloat
     return hexToRgbaFloat(hex, alpha);
 };
@@ -38,7 +28,7 @@ export const colorToRgbaFloat = {
     transform: (token) => {
         const value = getTokenValue(token);
         // skip if value is already rgb float
-        if (isRgbaFloat(value) && !('mix' in token) && !('alpha' in token))
+        if (isRgbaFloat(value) && !('alpha' in token))
             return value;
         // convert hex or rgb values to rgba float
         return toRgbaFloat(token, token.alpha);

package/dist/build/transformers/figmaAttributes.js

@@ -45,7 +45,7 @@ export const figmaAttributes = {
         var _a, _b;
         const { modeOverride, collection, scopes, group, codeSyntax } = ((_a = token.$extensions) === null || _a === void 0 ? void 0 : _a['org.primer.figma']) || {};
         return {
-            mode: modeOverride || ((_b = platform.options) === null || _b === void 0 ? void 0 : _b.mode) || 'default',
+            mode: ((_b = platform.options) === null || _b === void 0 ? void 0 : _b.theme) || modeOverride || 'default',
             collection,
             group: group || collection,
             scopes: getScopes(scopes),

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

@@ -1,6 +1,5 @@
 export { borderToCss } from './borderToCss.js';
 export { colorToHex } from './colorToHex.js';
-export { colorToHexMix } from './colorToHexMix.js';
 export { colorToRgbAlpha } from './colorToRgbAlpha.js';
 export { colorToRgbaFloat } from './colorToRgbaFloat.js';
 export { cubicBezierToCss } from './cubicBezierToCss.js';

package/dist/build/transformers/index.js

@@ -1,6 +1,5 @@
 export { borderToCss } from './borderToCss.js';
 export { colorToHex } from './colorToHex.js';
-export { colorToHexMix } from './colorToHexMix.js';
 export { colorToRgbAlpha } from './colorToRgbAlpha.js';
 export { colorToRgbaFloat } from './colorToRgbaFloat.js';
 export { cubicBezierToCss } from './cubicBezierToCss.js';

package/dist/build/transformers/utilities/invalidTokenError.js

@@ -3,14 +3,12 @@ const composeValueErrorMessage = (token) => {
     var _a, _b;
     const originalValue = (_a = token.original.$value) !== null && _a !== void 0 ? _a : token.original.value;
     const value = (_b = token.$value) !== null && _b !== void 0 ? _b : token.value;
-    // eslint-disable-next-line i18n-text/no-en
     return `Invalid token "${namePathToDotNotation.transform(token, {}, {})}" in file "${token.filePath}". Transformed value: "${JSON.stringify(value)}". ${originalValue ? `Original value: "${JSON.stringify(originalValue)}" ` : ''}This may be due to referencing a token that does not exists.`;
 };
 const composeValuePropertyErrorMessage = (token, property) => {
     var _a, _b;
     const originalValue = (_a = token.original.$value) !== null && _a !== void 0 ? _a : token.original.value;
     const value = (_b = token.$value) !== null && _b !== void 0 ? _b : token.value;
-    // eslint-disable-next-line i18n-text/no-en
     return `Invalid property "${property}" of token "${namePathToDotNotation.transform(token, {}, {})}" in file "${token.filePath}". Transformed property value: "${value[property]}". ${originalValue ? `Original value: "${originalValue[property]}" ` : ''}This may be due to referencing a token that does not exists.`;
 };
 export class invalidTokenValueError extends Error {

package/dist/build/types/{StyleDictionaryConfigGenerator.d.ts → styleDictionaryConfigGenerator.d.ts}

@@ -4,6 +4,7 @@ export type ConfigGeneratorOptions = {
   buildPath: string
   prefix?: string
   themed?: boolean
+  theme?: string
 }
 
 export type StyleDictionaryConfigGenerator = (

package/dist/build/types/{TokenBuildInput.d.ts → tokenBuildInput.d.ts}

@@ -3,6 +3,8 @@ export type TokenBuildInput = {
   filename: string
   // Array of `filepaths` to token files that should be converted and included in the output. Accepts relative or glob paths.
   source: string[]
+  // The mode of the theme
+  theme?: string
   // Array of `filepaths` to token fils that should NOT be included in the output, but should be available to reference during compilation e.g. base color scales
   include: string[]
 }

package/dist/build/utilities/lowerCaseFirstCharacter.d.ts

@@ -0,0 +1,8 @@
+/**
+ * lowerCaseFirstCharacter
+ * @scope custom implementation should only be used within `name path to ...` transformer
+ * @description changes first letter to uppercase but keeps the rest of the word as is
+ * @param string
+ * @returns string
+ */
+export declare const lowerCaseFirstCharacter: ([firstLetter, ...restOfWord]: string) => string;

package/dist/build/utilities/lowerCaseFirstCharacter.js

@@ -0,0 +1,10 @@
+/**
+ * lowerCaseFirstCharacter
+ * @scope custom implementation should only be used within `name path to ...` transformer
+ * @description changes first letter to uppercase but keeps the rest of the word as is
+ * @param string
+ * @returns string
+ */
+export const lowerCaseFirstCharacter = ([firstLetter, ...restOfWord]) => {
+    return firstLetter.toLowerCase() + restOfWord.join('');
+};

package/dist/css/functional/size/border.css

@@ -1,10 +1,11 @@
 :root {
-  --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */
-  --boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
-  --boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
-  --borderWidth-thin: max(1px, 0.0625rem);
-  --borderWidth-thick: max(2px, 0.125rem);
-  --borderWidth-thicker: max(4px, 0.25rem);
+  --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
+  --boxShadow-thick: inset 0 0 0 0.125rem;
+  --boxShadow-thicker: inset 0 0 0 0.25rem;
+  --borderWidth-default: 0.0625rem;
+  --borderWidth-thin: 0.0625rem;
+  --borderWidth-thick: 0.125rem;
+  --borderWidth-thicker: 0.25rem;
   --borderRadius-small: 0.1875rem;
   --borderRadius-medium: 0.375rem;
   --borderRadius-large: 0.75rem;

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;
@@ -311,6 +311,7 @@
   --reactionButton-selected-fgColor-rest: #4493f8;
   --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
+  --focus-outline: 2px solid #1f6feb;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #151b23;
   --overlay-borderColor: #3d444db3;
@@ -576,7 +577,33 @@
   --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --outline-focus: #1f6feb solid 2px;
+  --border-default: 0.0625rem solid #3d444d;
+  --border-muted: 0.0625rem solid #3d444db3;
+  --border-emphasis: 0.0625rem solid #656c76;
+  --border-disabled: 0.0625rem solid #656c761a;
+  --border-transparent: 0.0625rem solid #00000000;
+  --border-neutral-emphasis: 0.0625rem solid #656c76;
+  --border-neutral-muted: 0.0625rem solid #3d444db3;
+  --border-accent-emphasis: 0.0625rem solid #1f6feb;
+  --border-accent-muted: 0.0625rem solid #388bfd66;
+  --border-success-emphasis: 0.0625rem solid #1f6feb;
+  --border-success-muted: 0.0625rem solid #388bfd66;
+  --border-open-emphasis: 0.0625rem solid #1f6feb;
+  --border-open-muted: 0.0625rem solid #388bfd66;
+  --border-danger-emphasis: 0.0625rem solid #bd561d;
+  --border-danger-muted: 0.0625rem solid #db6d2866;
+  --border-closed-emphasis: 0.0625rem solid #bd561d;
+  --border-closed-muted: 0.0625rem solid #db6d2866;
+  --border-attention-emphasis: 0.0625rem solid #9e6a03;
+  --border-attention-muted: 0.0625rem solid #bb800966;
+  --border-severe-emphasis: 0.0625rem solid #bd561d;
+  --border-severe-muted: 0.0625rem solid #db6d2866;
+  --border-done-emphasis: 0.0625rem solid #8957e5;
+  --border-done-muted: 0.0625rem solid #ab7df866;
+  --border-upsell-emphasis: 0.0625rem solid #8957e5;
+  --border-upsell-muted: 0.0625rem solid #ab7df866;
+  --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
+  --border-sponsors-muted: 0.0625rem solid #db61a266;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_colorblind"],
@@ -838,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;
@@ -890,6 +917,7 @@
     --reactionButton-selected-fgColor-rest: #4493f8;
     --reactionButton-selected-fgColor-hover: #79c0ff;
     --focus-outlineColor: #1f6feb;
+    --focus-outline: 2px solid #1f6feb;
     --menu-bgColor-active: #151b23;
     --overlay-bgColor: #151b23;
     --overlay-borderColor: #3d444db3;
@@ -1155,6 +1183,32 @@
     --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
     --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
     --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --outline-focus: #1f6feb solid 2px;
+    --border-default: 0.0625rem solid #3d444d;
+    --border-muted: 0.0625rem solid #3d444db3;
+    --border-emphasis: 0.0625rem solid #656c76;
+    --border-disabled: 0.0625rem solid #656c761a;
+    --border-transparent: 0.0625rem solid #00000000;
+    --border-neutral-emphasis: 0.0625rem solid #656c76;
+    --border-neutral-muted: 0.0625rem solid #3d444db3;
+    --border-accent-emphasis: 0.0625rem solid #1f6feb;
+    --border-accent-muted: 0.0625rem solid #388bfd66;
+    --border-success-emphasis: 0.0625rem solid #1f6feb;
+    --border-success-muted: 0.0625rem solid #388bfd66;
+    --border-open-emphasis: 0.0625rem solid #1f6feb;
+    --border-open-muted: 0.0625rem solid #388bfd66;
+    --border-danger-emphasis: 0.0625rem solid #bd561d;
+    --border-danger-muted: 0.0625rem solid #db6d2866;
+    --border-closed-emphasis: 0.0625rem solid #bd561d;
+    --border-closed-muted: 0.0625rem solid #db6d2866;
+    --border-attention-emphasis: 0.0625rem solid #9e6a03;
+    --border-attention-muted: 0.0625rem solid #bb800966;
+    --border-severe-emphasis: 0.0625rem solid #bd561d;
+    --border-severe-muted: 0.0625rem solid #db6d2866;
+    --border-done-emphasis: 0.0625rem solid #8957e5;
+    --border-done-muted: 0.0625rem solid #ab7df866;
+    --border-upsell-emphasis: 0.0625rem solid #8957e5;
+    --border-upsell-muted: 0.0625rem solid #ab7df866;
+    --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
+    --border-sponsors-muted: 0.0625rem solid #db61a266;
   }
 }

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;
@@ -311,6 +311,7 @@
   --reactionButton-selected-fgColor-rest: #478be6;
   --reactionButton-selected-fgColor-hover: #6cb6ff;
   --focus-outlineColor: #316dca;
+  --focus-outline: 2px solid #316dca;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #2a313c;
   --overlay-borderColor: #3d444db3;
@@ -576,7 +577,33 @@
   --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #1c2128;
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #1c2128;
   --shadow-floating-legacy: 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-  --outline-focus: #316dca solid 2px;
+  --border-default: 0.0625rem solid #3d444d;
+  --border-muted: 0.0625rem solid #3d444db3;
+  --border-emphasis: 0.0625rem solid #656c76;
+  --border-disabled: 0.0625rem solid #656c761a;
+  --border-transparent: 0.0625rem solid #00000000;
+  --border-neutral-emphasis: 0.0625rem solid #656c76;
+  --border-neutral-muted: 0.0625rem solid #3d444db3;
+  --border-accent-emphasis: 0.0625rem solid #316dca;
+  --border-accent-muted: 0.0625rem solid #4184e466;
+  --border-success-emphasis: 0.0625rem solid #347d39;
+  --border-success-muted: 0.0625rem solid #46954a66;
+  --border-open-emphasis: 0.0625rem solid #347d39;
+  --border-open-muted: 0.0625rem solid #46954a66;
+  --border-danger-emphasis: 0.0625rem solid #c93c37;
+  --border-danger-muted: 0.0625rem solid #e5534b66;
+  --border-closed-emphasis: 0.0625rem solid #c93c37;
+  --border-closed-muted: 0.0625rem solid #e5534b66;
+  --border-attention-emphasis: 0.0625rem solid #966600;
+  --border-attention-muted: 0.0625rem solid #ae7c1466;
+  --border-severe-emphasis: 0.0625rem solid #ae5622;
+  --border-severe-muted: 0.0625rem solid #cc6b2c66;
+  --border-done-emphasis: 0.0625rem solid #8256d0;
+  --border-done-muted: 0.0625rem solid #986ee266;
+  --border-upsell-emphasis: 0.0625rem solid #8256d0;
+  --border-upsell-muted: 0.0625rem solid #986ee266;
+  --border-sponsors-emphasis: 0.0625rem solid #ae4c82;
+  --border-sponsors-muted: 0.0625rem solid #c9619866;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_dimmed"],
@@ -838,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;
@@ -890,6 +917,7 @@
     --reactionButton-selected-fgColor-rest: #478be6;
     --reactionButton-selected-fgColor-hover: #6cb6ff;
     --focus-outlineColor: #316dca;
+    --focus-outline: 2px solid #316dca;
     --menu-bgColor-active: #151b23;
     --overlay-bgColor: #2a313c;
     --overlay-borderColor: #3d444db3;
@@ -1155,6 +1183,32 @@
     --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #1c2128;
     --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #1c2128;
     --shadow-floating-legacy: 0px 6px 12px -3px #1c212866, 0px 6px 18px 0px #1c212866;
-    --outline-focus: #316dca solid 2px;
+    --border-default: 0.0625rem solid #3d444d;
+    --border-muted: 0.0625rem solid #3d444db3;
+    --border-emphasis: 0.0625rem solid #656c76;
+    --border-disabled: 0.0625rem solid #656c761a;
+    --border-transparent: 0.0625rem solid #00000000;
+    --border-neutral-emphasis: 0.0625rem solid #656c76;
+    --border-neutral-muted: 0.0625rem solid #3d444db3;
+    --border-accent-emphasis: 0.0625rem solid #316dca;
+    --border-accent-muted: 0.0625rem solid #4184e466;
+    --border-success-emphasis: 0.0625rem solid #347d39;
+    --border-success-muted: 0.0625rem solid #46954a66;
+    --border-open-emphasis: 0.0625rem solid #347d39;
+    --border-open-muted: 0.0625rem solid #46954a66;
+    --border-danger-emphasis: 0.0625rem solid #c93c37;
+    --border-danger-muted: 0.0625rem solid #e5534b66;
+    --border-closed-emphasis: 0.0625rem solid #c93c37;
+    --border-closed-muted: 0.0625rem solid #e5534b66;
+    --border-attention-emphasis: 0.0625rem solid #966600;
+    --border-attention-muted: 0.0625rem solid #ae7c1466;
+    --border-severe-emphasis: 0.0625rem solid #ae5622;
+    --border-severe-muted: 0.0625rem solid #cc6b2c66;
+    --border-done-emphasis: 0.0625rem solid #8256d0;
+    --border-done-muted: 0.0625rem solid #986ee266;
+    --border-upsell-emphasis: 0.0625rem solid #8256d0;
+    --border-upsell-muted: 0.0625rem solid #986ee266;
+    --border-sponsors-emphasis: 0.0625rem solid #ae4c82;
+    --border-sponsors-muted: 0.0625rem solid #c9619866;
   }
 }

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;
@@ -311,6 +311,7 @@
   --reactionButton-selected-fgColor-rest: #74b9ff;
   --reactionButton-selected-fgColor-hover: #91cbff;
   --focus-outlineColor: #409eff;
+  --focus-outline: 2px solid #409eff;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #151b23;
   --overlay-borderColor: #b7bdc8;
@@ -576,7 +577,33 @@
   --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
   --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --outline-focus: #409eff solid 2px;
+  --border-default: 0.0625rem solid #b7bdc8;
+  --border-muted: 0.0625rem solid #b7bdc8;
+  --border-emphasis: 0.0625rem solid #b7bdc8;
+  --border-disabled: 0.0625rem solid #9198a11f;
+  --border-transparent: 0.0625rem solid #00000000;
+  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
+  --border-neutral-muted: 0.0625rem solid #b7bdc8;
+  --border-accent-emphasis: 0.0625rem solid #409eff;
+  --border-accent-muted: 0.0625rem solid #5cacff;
+  --border-success-emphasis: 0.0625rem solid #09b43a;
+  --border-success-muted: 0.0625rem solid #0ac740;
+  --border-open-emphasis: 0.0625rem solid #09b43a;
+  --border-open-muted: 0.0625rem solid #0ac740;
+  --border-danger-emphasis: 0.0625rem solid #ff6a69;
+  --border-danger-muted: 0.0625rem solid #ff8080;
+  --border-closed-emphasis: 0.0625rem solid #ff6a69;
+  --border-closed-muted: 0.0625rem solid #ff8080;
+  --border-attention-emphasis: 0.0625rem solid #e09b13;
+  --border-attention-muted: 0.0625rem solid #edaa27;
+  --border-severe-emphasis: 0.0625rem solid #e7811d;
+  --border-severe-muted: 0.0625rem solid #f48b25;
+  --border-done-emphasis: 0.0625rem solid #b87fff;
+  --border-done-muted: 0.0625rem solid #bf8fff;
+  --border-upsell-emphasis: 0.0625rem solid #b87fff;
+  --border-upsell-muted: 0.0625rem solid #bf8fff;
+  --border-sponsors-emphasis: 0.0625rem solid #ef6eb1;
+  --border-sponsors-muted: 0.0625rem solid #f87cbd;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
@@ -838,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;
@@ -890,6 +917,7 @@
     --reactionButton-selected-fgColor-rest: #74b9ff;
     --reactionButton-selected-fgColor-hover: #91cbff;
     --focus-outlineColor: #409eff;
+    --focus-outline: 2px solid #409eff;
     --menu-bgColor-active: #151b23;
     --overlay-bgColor: #151b23;
     --overlay-borderColor: #b7bdc8;
@@ -1155,6 +1183,32 @@
     --shadow-floating-large: 0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409;
     --shadow-floating-xlarge: 0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409;
     --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --outline-focus: #409eff solid 2px;
+    --border-default: 0.0625rem solid #b7bdc8;
+    --border-muted: 0.0625rem solid #b7bdc8;
+    --border-emphasis: 0.0625rem solid #b7bdc8;
+    --border-disabled: 0.0625rem solid #9198a11f;
+    --border-transparent: 0.0625rem solid #00000000;
+    --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
+    --border-neutral-muted: 0.0625rem solid #b7bdc8;
+    --border-accent-emphasis: 0.0625rem solid #409eff;
+    --border-accent-muted: 0.0625rem solid #5cacff;
+    --border-success-emphasis: 0.0625rem solid #09b43a;
+    --border-success-muted: 0.0625rem solid #0ac740;
+    --border-open-emphasis: 0.0625rem solid #09b43a;
+    --border-open-muted: 0.0625rem solid #0ac740;
+    --border-danger-emphasis: 0.0625rem solid #ff6a69;
+    --border-danger-muted: 0.0625rem solid #ff8080;
+    --border-closed-emphasis: 0.0625rem solid #ff6a69;
+    --border-closed-muted: 0.0625rem solid #ff8080;
+    --border-attention-emphasis: 0.0625rem solid #e09b13;
+    --border-attention-muted: 0.0625rem solid #edaa27;
+    --border-severe-emphasis: 0.0625rem solid #e7811d;
+    --border-severe-muted: 0.0625rem solid #f48b25;
+    --border-done-emphasis: 0.0625rem solid #b87fff;
+    --border-done-muted: 0.0625rem solid #bf8fff;
+    --border-upsell-emphasis: 0.0625rem solid #b87fff;
+    --border-upsell-muted: 0.0625rem solid #bf8fff;
+    --border-sponsors-emphasis: 0.0625rem solid #ef6eb1;
+    --border-sponsors-muted: 0.0625rem solid #f87cbd;
   }
 }

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;
@@ -311,6 +311,7 @@
   --reactionButton-selected-fgColor-rest: #4493f8;
   --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
+  --focus-outline: 2px solid #1f6feb;
   --menu-bgColor-active: #151b23;
   --overlay-bgColor: #151b23;
   --overlay-borderColor: #3d444db3;
@@ -576,7 +577,33 @@
   --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-  --outline-focus: #1f6feb solid 2px;
+  --border-default: 0.0625rem solid #3d444d;
+  --border-muted: 0.0625rem solid #3d444db3;
+  --border-emphasis: 0.0625rem solid #656c76;
+  --border-disabled: 0.0625rem solid #656c761a;
+  --border-transparent: 0.0625rem solid #00000000;
+  --border-neutral-emphasis: 0.0625rem solid #656c76;
+  --border-neutral-muted: 0.0625rem solid #3d444db3;
+  --border-accent-emphasis: 0.0625rem solid #1f6feb;
+  --border-accent-muted: 0.0625rem solid #388bfd66;
+  --border-success-emphasis: 0.0625rem solid #1f6feb;
+  --border-success-muted: 0.0625rem solid #388bfd66;
+  --border-open-emphasis: 0.0625rem solid #1f6feb;
+  --border-open-muted: 0.0625rem solid #388bfd66;
+  --border-danger-emphasis: 0.0625rem solid #da3633;
+  --border-danger-muted: 0.0625rem solid #f8514966;
+  --border-closed-emphasis: 0.0625rem solid #da3633;
+  --border-closed-muted: 0.0625rem solid #f8514966;
+  --border-attention-emphasis: 0.0625rem solid #9e6a03;
+  --border-attention-muted: 0.0625rem solid #bb800966;
+  --border-severe-emphasis: 0.0625rem solid #da3633;
+  --border-severe-muted: 0.0625rem solid #f8514966;
+  --border-done-emphasis: 0.0625rem solid #8957e5;
+  --border-done-muted: 0.0625rem solid #ab7df866;
+  --border-upsell-emphasis: 0.0625rem solid #8957e5;
+  --border-upsell-muted: 0.0625rem solid #ab7df866;
+  --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
+  --border-sponsors-muted: 0.0625rem solid #db61a266;
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_tritanopia"],
@@ -838,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;
@@ -890,6 +917,7 @@
     --reactionButton-selected-fgColor-rest: #4493f8;
     --reactionButton-selected-fgColor-hover: #79c0ff;
     --focus-outlineColor: #1f6feb;
+    --focus-outline: 2px solid #1f6feb;
     --menu-bgColor-active: #151b23;
     --overlay-bgColor: #151b23;
     --overlay-borderColor: #3d444db3;
@@ -1155,6 +1183,32 @@
     --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409;
     --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
     --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
-    --outline-focus: #1f6feb solid 2px;
+    --border-default: 0.0625rem solid #3d444d;
+    --border-muted: 0.0625rem solid #3d444db3;
+    --border-emphasis: 0.0625rem solid #656c76;
+    --border-disabled: 0.0625rem solid #656c761a;
+    --border-transparent: 0.0625rem solid #00000000;
+    --border-neutral-emphasis: 0.0625rem solid #656c76;
+    --border-neutral-muted: 0.0625rem solid #3d444db3;
+    --border-accent-emphasis: 0.0625rem solid #1f6feb;
+    --border-accent-muted: 0.0625rem solid #388bfd66;
+    --border-success-emphasis: 0.0625rem solid #1f6feb;
+    --border-success-muted: 0.0625rem solid #388bfd66;
+    --border-open-emphasis: 0.0625rem solid #1f6feb;
+    --border-open-muted: 0.0625rem solid #388bfd66;
+    --border-danger-emphasis: 0.0625rem solid #da3633;
+    --border-danger-muted: 0.0625rem solid #f8514966;
+    --border-closed-emphasis: 0.0625rem solid #da3633;
+    --border-closed-muted: 0.0625rem solid #f8514966;
+    --border-attention-emphasis: 0.0625rem solid #9e6a03;
+    --border-attention-muted: 0.0625rem solid #bb800966;
+    --border-severe-emphasis: 0.0625rem solid #da3633;
+    --border-severe-muted: 0.0625rem solid #f8514966;
+    --border-done-emphasis: 0.0625rem solid #8957e5;
+    --border-done-muted: 0.0625rem solid #ab7df866;
+    --border-upsell-emphasis: 0.0625rem solid #8957e5;
+    --border-upsell-muted: 0.0625rem solid #ab7df866;
+    --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
+    --border-sponsors-muted: 0.0625rem solid #db61a266;
   }
 }