@primer/primitives 10.1.0-rc.f1589f93 → 10.1.0

package/README.md

@@ -80,27 +80,6 @@ You can create color tokens that inherit a color but have a different alpha valu
 }
 ```
 
-#### Mix
-
-In rare cases, you may need to create a color between two steps in the color scale, e.g. between `gray.4` and `gray.5`. A common example are interactive states, like `hover` where a full step on the color scale would be to much. For those cases you can use the `mix` property.
-
-The `mix` proeprty mixes the color it gets into the main color from the `$value` attribute. The amount added is controlled by the `weight`. A weight of `0.1` adds 10% of the color, and a weight of `0.75` adds 75%.
-
-A `mix` proprty must always have a `color` and a `weight` child. `color` can be a `hex` value or a reference to a valid color. The `weight` property must receive a value between `0.0` and `1`.
-
-```json5
-{
-  control: {
-    $value: '{base.color.gray.4}', // main color
-    $type: 'color',
-    mix: {
-      color: '{base.color.gray.5}', // color to mix into the main color
-      weight: 0.2, // amount of the mix color that is added === 20% of gray.5 is mix into gray.4
-    },
-  },
-}
-```
-
 #### Extensions property
 
 According to the [w3c design token specs](https://design-tokens.github.io/community-group/format/#design-token), the [`$extensions`](https://design-tokens.github.io/community-group/format/#extensions) property is used for additional meta data.

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

@@ -1,7 +1,6 @@
 export { isBorder } from './isBorder.js';
 export { isColor } from './isColor.js';
 export { isColorWithAlpha } from './isColorWithAlpha.js';
-export { isColorWithMix } from './isColorWithMix.js';
 export { isDimension } from './isDimension.js';
 export { isDeprecated } from './isDeprecated.js';
 export { isDuration } from './isDuration.js';

package/dist/build/filters/index.js

@@ -1,7 +1,6 @@
 export { isBorder } from './isBorder.js';
 export { isColor } from './isColor.js';
 export { isColorWithAlpha } from './isColorWithAlpha.js';
-export { isColorWithMix } from './isColorWithMix.js';
 export { isDimension } from './isDimension.js';
 export { isDeprecated } from './isDeprecated.js';
 export { isDuration } from './isDuration.js';

package/dist/build/formats/jsonFigma.js

@@ -76,7 +76,7 @@ export const jsonFigma = (_a) => __awaiter(void 0, [_a], void 0, function* ({ di
     // loop through tokens sorted by reference
     for (const token of sortedTokens) {
         // deconstruct token
-        const { attributes, $value: value, $type, $description: description, original, alpha, mix } = token;
+        const { attributes, $value: value, $type, $description: description, original, alpha } = token;
         const { mode, collection, scopes, group, codeSyntax } = attributes || {};
         // early escape if no type is present
         if (!$type)
@@ -102,7 +102,6 @@ export const jsonFigma = (_a) => __awaiter(void 0, [_a], void 0, function* ({ di
                 value,
                 type: getFigmaType($type),
                 alpha,
-                isMix: mix ? true : undefined,
                 description,
                 refId: [collection, token.name].filter(Boolean).join('/'),
                 reference: getReference(dictionary, original.$value, platform),

package/dist/build/platforms/css.js

@@ -23,7 +23,6 @@ export const css = (outputFile, prefix, buildPath, options) => {
         transforms: [
             'name/pathToKebabCase',
             'color/hex',
-            'color/hexMix',
             'cubicBezier/css',
             'dimension/rem',
             'duration/css',
@@ -47,8 +46,8 @@ export const css = (outputFile, prefix, buildPath, options) => {
                     (options === null || options === void 0 ? void 0 : options.themed) === true &&
                     token.$type !== 'custom-viewportRange' &&
                     !isFromFile(token, [
-                        'src/tokens/functional/size/size-coarse.json',
-                        'src/tokens/functional/size/size-fine.json',
+                        'src/tokens/functional/size/size-coarse.json5',
+                        'src/tokens/functional/size/size-fine.json5',
                     ]),
                 options: Object.assign({ showFileHeader: false, outputReferences: false, descriptions: false, queries: getCssSelectors(outputFile) }, options === null || options === void 0 ? void 0 : options.options),
             },
@@ -59,8 +58,8 @@ export const css = (outputFile, prefix, buildPath, options) => {
                     (options === null || options === void 0 ? void 0 : options.themed) !== true &&
                     token.$type !== 'custom-viewportRange' &&
                     !isFromFile(token, [
-                        'src/tokens/functional/size/size-coarse.json',
-                        'src/tokens/functional/size/size-fine.json',
+                        'src/tokens/functional/size/size-coarse.json5',
+                        'src/tokens/functional/size/size-fine.json5',
                     ]),
                 options: Object.assign({ showFileHeader: false, descriptions: false }, options === null || options === void 0 ? void 0 : options.options),
             },
@@ -77,8 +76,8 @@ export const css = (outputFile, prefix, buildPath, options) => {
                 format: `css/advanced`,
                 filter: token => isSource(token) &&
                     isFromFile(token, [
-                        'src/tokens/functional/size/size-coarse.json',
-                        'src/tokens/functional/size/size-fine.json',
+                        'src/tokens/functional/size/size-coarse.json5',
+                        'src/tokens/functional/size/size-fine.json5',
                     ]),
                 options: {
                     descriptions: false,

package/dist/build/platforms/docJson.js

@@ -6,7 +6,6 @@ export const docJson = (outputFile, prefix, buildPath, options) => ({
     transforms: [
         'name/pathToKebabCase',
         'color/hex',
-        'color/hexMix',
         'dimension/rem',
         'shadow/css',
         'border/css',

package/dist/build/platforms/fallbacks.js

@@ -5,7 +5,6 @@ export const fallbacks = (outputFile, prefix, buildPath) => ({
     transforms: [
         'name/pathToKebabCase',
         'color/hex',
-        'color/hexMix',
         'dimension/rem',
         'shadow/css',
         'border/css',

package/dist/build/platforms/javascript.js

@@ -5,7 +5,6 @@ export const javascript = (outputFile, prefix, buildPath, options) => ({
     preprocessors: ['themeOverrides'],
     transforms: [
         'color/hex',
-        'color/hexMix',
         'dimension/rem',
         'shadow/css',
         'border/css',

package/dist/build/platforms/json.js

@@ -5,7 +5,6 @@ export const json = (outputFile, prefix, buildPath, options) => ({
     preprocessors: ['themeOverrides'],
     transforms: [
         'color/hex',
-        'color/hexMix',
         'dimension/rem',
         'shadow/css',
         'border/css',

package/dist/build/platforms/styleLint.js

@@ -6,7 +6,6 @@ export const styleLint = (outputFile, prefix, buildPath, options) => ({
     transforms: [
         'name/pathToKebabCase',
         'color/hex',
-        'color/hexMix',
         'dimension/remPxArray',
         'shadow/css',
         'border/css',

package/dist/build/platforms/typescript.js

@@ -5,7 +5,6 @@ export const typescript = (outputFile, prefix, buildPath, options) => ({
     preprocessors: ['themeOverrides'],
     transforms: [
         'color/hex',
-        'color/hexMix',
         'dimension/rem',
         'shadow/css',
         'border/css',

package/dist/build/primerStyleDictionary.js

@@ -1,5 +1,5 @@
 import StyleDictionary from 'style-dictionary';
-import { borderToCss, colorToRgbAlpha, colorToHex, colorToHexMix, 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 { 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';
 /**
@@ -8,7 +8,12 @@ import { themeOverrides } from './preprocessors/themeOverrides.js';
  * @formats [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts)
  * @transformers [color/rgbAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-rgb-alpha.ts), [color/hexAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex-alpha.ts), [color/hex](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex6.ts), [json/deprecated](https://github.com/primer/primitives/blob/main/config/tranformers/json-deprecated.ts), [name/pathToDotNotation](https://github.com/primer/primitives/blob/main/config/tranformers/name-path-to-dot-notation.ts)
  */
-export const PrimerStyleDictionary = new StyleDictionary();
+export const PrimerStyleDictionary = new StyleDictionary({
+    // these are the defaults
+    log: {
+        verbosity: 'default', // 'default' | 'silent' | 'verbose'
+    },
+});
 /**
  * Formats
  *
@@ -55,7 +60,6 @@ PrimerStyleDictionary.registerFormat({
  */
 PrimerStyleDictionary.registerTransform(colorToRgbAlpha);
 PrimerStyleDictionary.registerTransform(colorToRgbaFloat);
-PrimerStyleDictionary.registerTransform(colorToHexMix);
 PrimerStyleDictionary.registerTransform(colorToHex);
 PrimerStyleDictionary.registerTransform(cubicBezierToCss);
 PrimerStyleDictionary.registerTransform(floatToPixel);

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

@@ -6,16 +6,6 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<{
     $value: z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodEffects<z.ZodString, string, string>]>;
     $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>>>;
-    mix: z.ZodOptional<z.ZodNullable<z.ZodObject<{
-        color: z.ZodString;
-        weight: z.ZodNumber;
-    }, "strip", z.ZodTypeAny, {
-        color: string;
-        weight: number;
-    }, {
-        color: string;
-        weight: number;
-    }>>>;
     $extensions: z.ZodOptional<z.ZodObject<{
         alpha: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
         'org.primer.figma': z.ZodOptional<z.ZodObject<{
@@ -109,10 +99,6 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<{
     $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     alpha?: any;
     $description?: string | undefined;
-    mix?: {
-        color: string;
-        weight: number;
-    } | null | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {
         alpha?: number | null | undefined;
@@ -139,10 +125,6 @@ export declare const colorToken: z.ZodObject<z.objectUtil.extendShape<{
     $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
     alpha?: any;
     $description?: string | undefined;
-    mix?: {
-        color: string;
-        weight: number;
-    } | null | undefined;
     $deprecated?: string | boolean | undefined;
     $extensions?: {
         alpha?: number | null | undefined;

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(),

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/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/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;
   }
 }