@primer/primitives 11.7.0-rc.9e55ef3b → 11.7.1-rc.97abd424

package/DESIGN_TOKENS_SPEC.md

@@ -400,11 +400,16 @@ Focus ring outline for keyboard navigation and accessibility.
 **U:** accessibility-indicator, focus-ring, keyboard-navigation
 **R:** Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls.
 
-### focus-outlineColor
+### focus-outline-color
 Outline color for focus states on interactive elements
 **U:** accessibility-indicator, focus-ring, keyboard-navigation
 **R:** Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements.
 
+### focus-outline-width
+Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements
+**U:** accessibility, focus-ring, keyboard-focus
+**R:** MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance.
+
 ## Font Stacks
 
 Font family tokens.
@@ -424,15 +429,6 @@ Display font stack for headings and titles. Same as sansSerif but semantically d
 **U:** display-text, heading, title
 **R:** Use for headings and display text. Prefer over sansSerif for titles.
 
-## Outline
-
-Outline tokens for focus indicators.
-
-### outline-focus-width
-Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements
-**U:** accessibility, focus-ring, keyboard-focus
-**R:** MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance.
-
 ## Overlay
 
 Tokens for modals, dialogs, popovers, and dropdown menus.

package/dist/build/platforms/css.js

@@ -1,5 +1,23 @@
 import { isFromFile, isSource } from '../filters/index.js';
 import { outputReferencesTransformed, outputReferencesFilter } from 'style-dictionary/utils';
+/**
+ * Determines whether a token's value should use CSS variable references.
+ *
+ * For most tokens, we check both that referenced tokens are in the current output
+ * (outputReferencesFilter) and that the string replacement is valid (outputReferencesTransformed).
+ *
+ * Composite border tokens need special handling because:
+ * 1. outputReferencesTransformed returns false for object original values
+ * 2. outputReferencesFilter returns false because width tokens are in a separate CSS file
+ * Style Dictionary's formatter correctly handles var() substitution in flattened composite strings,
+ * and the referenced tokens (borderColor.*, borderWidth.*, focus.outline-*) all exist as CSS variables at runtime.
+ */
+const shouldOutputReferences = (token, platformOptions) => {
+    if (token.$type === 'border') {
+        return true;
+    }
+    return outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions);
+};
 const getCssSelectors = (outputFile) => {
     // check for dark in the beginning of the output filename
     const lastSlash = outputFile.lastIndexOf('/');
@@ -49,11 +67,12 @@ export const css = (outputFile, prefix, buildPath, options) => {
                 filter: token => isSource(token) &&
                     (options === null || options === void 0 ? void 0 : options.themed) === true &&
                     token.$type !== 'custom-viewportRange' &&
+                    token.$type !== 'dimension' &&
                     !isFromFile(token, [
                         'src/tokens/functional/size/size-coarse.json5',
                         'src/tokens/functional/size/size-fine.json5',
                     ]),
-                options: Object.assign({ showFileHeader: false, outputReferences: (token, platformOptions) => outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions), descriptions: false, queries: getCssSelectors(outputFile) }, options === null || options === void 0 ? void 0 : options.options),
+                options: Object.assign({ showFileHeader: false, outputReferences: shouldOutputReferences, descriptions: false, queries: getCssSelectors(outputFile) }, options === null || options === void 0 ? void 0 : options.options),
             },
             {
                 destination: `${outputFile}`,
@@ -65,7 +84,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
                         'src/tokens/functional/size/size-coarse.json5',
                         'src/tokens/functional/size/size-fine.json5',
                     ]),
-                options: Object.assign({ showFileHeader: false, outputReferences: (token, platformOptions) => outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions), descriptions: false }, options === null || options === void 0 ? void 0 : options.options),
+                options: Object.assign({ showFileHeader: false, outputReferences: shouldOutputReferences, descriptions: false }, options === null || options === void 0 ? void 0 : options.options),
             },
             {
                 destination: `${outputFile}`,
@@ -73,7 +92,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
                 filter: token => isSource(token) && (options === null || options === void 0 ? void 0 : options.themed) !== true && token.$type === 'custom-viewportRange',
                 options: {
                     showFileHeader: false,
-                    outputReferences: (token, platformOptions) => outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
+                    outputReferences: shouldOutputReferences,
                 },
             },
             {
@@ -86,7 +105,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
                     ]),
                 options: {
                     descriptions: false,
-                    outputReferences: (token, platformOptions) => outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
+                    outputReferences: shouldOutputReferences,
                     showFileHeader: false,
                     queries: [
                         {

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

@@ -2,10 +2,12 @@
   --borderWidth-thick: 0.125rem; /** Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries */
   --borderWidth-thicker: 0.25rem; /** Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators */
   --borderWidth-thin: 0.0625rem; /** Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface */
-  --outline-focus-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
-  --outline-focus-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
+  --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
+  --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
   --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
   --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
   --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker); /** Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact */
   --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
+  --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
+  --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
 }

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

@@ -652,24 +652,24 @@
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
   --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
   --bgColor-white: #ffffff; /** Pure white background */
-  --border-accent-emphasis: 0.0625rem solid #409eff;
-  --border-accent-muted: 0.0625rem solid #5cacff;
-  --border-attention-emphasis: 0.0625rem solid #e09b13;
-  --border-attention-muted: 0.0625rem solid #edaa27;
-  --border-danger-emphasis: 0.0625rem solid #e7811d;
-  --border-danger-muted: 0.0625rem solid #f48b25;
-  --border-default: 0.0625rem solid #b7bdc8;
-  --border-disabled: 0.0625rem solid #656c761a;
-  --border-done-emphasis: 0.0625rem solid #b87fff;
-  --border-done-muted: 0.0625rem solid #bf8fff;
-  --border-severe-emphasis: 0.0625rem solid #e7811d;
-  --border-severe-muted: 0.0625rem solid #e7811d;
-  --border-sponsors-emphasis: 0.0625rem solid #ef6eb1;
-  --border-sponsors-muted: 0.0625rem solid #f87cbd;
-  --border-success-emphasis: 0.0625rem solid #409eff;
-  --border-success-muted: 0.0625rem solid #5cacff;
-  --border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
-  --border-transparent: 0.0625rem solid #00000000;
+  --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
+  --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
+  --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
+  --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
+  --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
+  --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
+  --border-default: var(--borderWidth-default) solid var(--borderColor-default);
+  --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
+  --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
+  --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
+  --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
+  --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
+  --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
+  --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
+  --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
+  --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
+  --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
+  --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
   --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
   --borderColor-draft-muted: var(--borderColor-default); /** Subtle border for draft state indicators */
   --borderColor-emphasis: var(--borderColor-default); /** Strong border for emphasis and visual weight */
@@ -765,7 +765,7 @@
   --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
   --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
   --fgColor-white: #ffffff; /** Pure white text */
-  --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
+  --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
   --header-fgColor-default: #ffffffb3;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
   --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -808,13 +808,13 @@
   --avatar-borderColor: var(--borderColor-emphasis);
   --border-closed-emphasis: var(--border-danger-emphasis);
   --border-closed-muted: var(--border-danger-muted);
-  --border-draft-muted: 0.0625rem solid #b7bdc8;
-  --border-emphasis: 0.0625rem solid #b7bdc8;
-  --border-muted: 0.0625rem solid #b7bdc8;
+  --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
+  --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
+  --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
   --border-open-emphasis: var(--border-success-emphasis);
   --border-open-muted: var(--border-success-muted);
-  --border-upsell-emphasis: 0.0625rem solid #b87fff;
-  --border-upsell-muted: 0.0625rem solid #bf8fff;
+  --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
+  --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
   --borderColor-closed-emphasis: var(--borderColor-emphasis); /** Strong border for closed state badges */
   --borderColor-neutral-emphasis: var(--borderColor-emphasis); /** Strong neutral semantic border */
   --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
@@ -876,7 +876,8 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-track-bgColor: var(--bgColor-inverse);
   --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
@@ -885,8 +886,8 @@
   --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
   --tooltip-bgColor: var(--bgColor-inverse);
   --tooltip-fgColor: var(--fgColor-onInverse);
-  --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
-  --border-neutral-muted: 0.0625rem solid #b7bdc8;
+  --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
+  --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
   --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
   --button-default-borderColor-active: var(--button-default-borderColor-rest);
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
@@ -900,7 +901,7 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --progressBar-track-borderColor: var(--progressBar-track-bgColor);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
-  --border-draft-emphasis: 0.0625rem solid #b7bdc8;
+  --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
@@ -1554,24 +1555,24 @@
     --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
     --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
     --bgColor-white: #ffffff; /** Pure white background */
-    --border-accent-emphasis: 0.0625rem solid #409eff;
-    --border-accent-muted: 0.0625rem solid #5cacff;
-    --border-attention-emphasis: 0.0625rem solid #e09b13;
-    --border-attention-muted: 0.0625rem solid #edaa27;
-    --border-danger-emphasis: 0.0625rem solid #e7811d;
-    --border-danger-muted: 0.0625rem solid #f48b25;
-    --border-default: 0.0625rem solid #b7bdc8;
-    --border-disabled: 0.0625rem solid #656c761a;
-    --border-done-emphasis: 0.0625rem solid #b87fff;
-    --border-done-muted: 0.0625rem solid #bf8fff;
-    --border-severe-emphasis: 0.0625rem solid #e7811d;
-    --border-severe-muted: 0.0625rem solid #e7811d;
-    --border-sponsors-emphasis: 0.0625rem solid #ef6eb1;
-    --border-sponsors-muted: 0.0625rem solid #f87cbd;
-    --border-success-emphasis: 0.0625rem solid #409eff;
-    --border-success-muted: 0.0625rem solid #5cacff;
-    --border-translucent: 0.0625rem solid #9198a1; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
-    --border-transparent: 0.0625rem solid #00000000;
+    --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
+    --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
+    --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
+    --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
+    --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
+    --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
+    --border-default: var(--borderWidth-default) solid var(--borderColor-default);
+    --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
+    --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
+    --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
+    --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
+    --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
+    --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
+    --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
+    --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
+    --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
+    --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
+    --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
     --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
     --borderColor-draft-muted: var(--borderColor-default); /** Subtle border for draft state indicators */
     --borderColor-emphasis: var(--borderColor-default); /** Strong border for emphasis and visual weight */
@@ -1667,7 +1668,7 @@
     --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
     --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
     --fgColor-white: #ffffff; /** Pure white text */
-    --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
+    --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
     --header-fgColor-default: #ffffffb3;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
     --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -1710,13 +1711,13 @@
     --avatar-borderColor: var(--borderColor-emphasis);
     --border-closed-emphasis: var(--border-danger-emphasis);
     --border-closed-muted: var(--border-danger-muted);
-    --border-draft-muted: 0.0625rem solid #b7bdc8;
-    --border-emphasis: 0.0625rem solid #b7bdc8;
-    --border-muted: 0.0625rem solid #b7bdc8;
+    --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
+    --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
+    --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
     --border-open-emphasis: var(--border-success-emphasis);
     --border-open-muted: var(--border-success-muted);
-    --border-upsell-emphasis: 0.0625rem solid #b87fff;
-    --border-upsell-muted: 0.0625rem solid #bf8fff;
+    --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
+    --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
     --borderColor-closed-emphasis: var(--borderColor-emphasis); /** Strong border for closed state badges */
     --borderColor-neutral-emphasis: var(--borderColor-emphasis); /** Strong neutral semantic border */
     --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
@@ -1778,7 +1779,8 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 2px solid #409eff; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-track-bgColor: var(--bgColor-inverse);
     --shadow-floating-large: 0 0 0 1px #b7bdc8, 0 24px 48px 0 #010409; /** Large floating shadow for modals and dialogs */
@@ -1787,8 +1789,8 @@
     --shadow-floating-xlarge: 0 0 0 1px #b7bdc8, 0 32px 64px 0 #010409; /** Extra large floating shadow for full-screen overlays and sheets */
     --tooltip-bgColor: var(--bgColor-inverse);
     --tooltip-fgColor: var(--fgColor-onInverse);
-    --border-neutral-emphasis: 0.0625rem solid #b7bdc8;
-    --border-neutral-muted: 0.0625rem solid #b7bdc8;
+    --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
+    --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
     --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
     --button-default-borderColor-active: var(--button-default-borderColor-rest);
     --button-default-borderColor-hover: var(--button-default-borderColor-rest);
@@ -1802,7 +1804,7 @@
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
     --progressBar-track-borderColor: var(--progressBar-track-bgColor);
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
-    --border-draft-emphasis: 0.0625rem solid #b7bdc8;
+    --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
   }

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

@@ -671,24 +671,24 @@
   --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
   --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
   --bgColor-white: #ffffff; /** Pure white background */
-  --border-accent-emphasis: 0.0625rem solid #1f6feb;
-  --border-accent-muted: 0.0625rem solid #388bfd66;
-  --border-attention-emphasis: 0.0625rem solid #9e6a03;
-  --border-attention-muted: 0.0625rem solid #bb800966;
-  --border-danger-emphasis: 0.0625rem solid #bd561d;
-  --border-danger-muted: 0.0625rem solid #db6d2866;
-  --border-default: 0.0625rem solid #3d444d;
-  --border-disabled: 0.0625rem solid #656c761a;
-  --border-done-emphasis: 0.0625rem solid #8957e5;
-  --border-done-muted: 0.0625rem solid #ab7df866;
-  --border-emphasis: 0.0625rem solid #656c76;
-  --border-severe-emphasis: 0.0625rem solid #bd561d;
-  --border-severe-muted: 0.0625rem solid #db6d2866;
-  --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
-  --border-sponsors-muted: 0.0625rem solid #db61a266;
-  --border-success-emphasis: 0.0625rem solid #1f6feb;
-  --border-success-muted: 0.0625rem solid #388bfd66;
-  --border-transparent: 0.0625rem solid #00000000;
+  --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
+  --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
+  --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
+  --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
+  --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
+  --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
+  --border-default: var(--borderWidth-default) solid var(--borderColor-default);
+  --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
+  --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
+  --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
+  --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
+  --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
+  --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
+  --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
+  --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
+  --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
+  --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
+  --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
   --borderColor-closed-emphasis: var(--borderColor-emphasis); /** Strong border for closed state badges */
   --borderColor-closed-muted: #3d444d66; /** Subtle border for closed state indicators */
   --borderColor-draft-muted: #3d444d66; /** Subtle border for draft state indicators */
@@ -804,7 +804,7 @@
   --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** Pure white text */
-  --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
+  --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
   --header-fgColor-default: #ffffffb3;
   --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
@@ -830,14 +830,14 @@
   --avatar-borderColor: var(--borderColor-translucent);
   --border-closed-emphasis: var(--border-danger-emphasis);
   --border-closed-muted: var(--border-danger-muted);
-  --border-draft-muted: 0.0625rem solid #3d444d66;
-  --border-muted: 0.0625rem solid #3d444db3;
-  --border-neutral-emphasis: 0.0625rem solid #656c76;
+  --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
+  --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
+  --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
   --border-open-emphasis: var(--border-success-emphasis);
   --border-open-muted: var(--border-success-muted);
-  --border-translucent: 0.0625rem solid #ffffff26; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
-  --border-upsell-emphasis: 0.0625rem solid #8957e5;
-  --border-upsell-muted: 0.0625rem solid #ab7df866;
+  --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
+  --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
+  --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
   --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
   --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
   --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
@@ -882,11 +882,12 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --dashboard-bgColor: var(--bgColor-inset);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
+  --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
   --overlay-borderColor: var(--borderColor-muted);
   --tooltip-fgColor: var(--fgColor-onEmphasis);
-  --border-draft-emphasis: 0.0625rem solid #656c76;
-  --border-neutral-muted: 0.0625rem solid #3d444db3;
+  --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
+  --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
   --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
   --button-default-borderColor-active: var(--button-default-borderColor-rest);
   --button-default-borderColor-hover: var(--button-default-borderColor-rest);
@@ -1573,24 +1574,24 @@
     --bgColor-upsell-emphasis: var(--bgColor-done-emphasis); /** Strong background for prominent upsell elements */
     --bgColor-upsell-muted: var(--bgColor-done-muted); /** Subtle background for upsell and promotional content */
     --bgColor-white: #ffffff; /** Pure white background */
-    --border-accent-emphasis: 0.0625rem solid #1f6feb;
-    --border-accent-muted: 0.0625rem solid #388bfd66;
-    --border-attention-emphasis: 0.0625rem solid #9e6a03;
-    --border-attention-muted: 0.0625rem solid #bb800966;
-    --border-danger-emphasis: 0.0625rem solid #bd561d;
-    --border-danger-muted: 0.0625rem solid #db6d2866;
-    --border-default: 0.0625rem solid #3d444d;
-    --border-disabled: 0.0625rem solid #656c761a;
-    --border-done-emphasis: 0.0625rem solid #8957e5;
-    --border-done-muted: 0.0625rem solid #ab7df866;
-    --border-emphasis: 0.0625rem solid #656c76;
-    --border-severe-emphasis: 0.0625rem solid #bd561d;
-    --border-severe-muted: 0.0625rem solid #db6d2866;
-    --border-sponsors-emphasis: 0.0625rem solid #bf4b8a;
-    --border-sponsors-muted: 0.0625rem solid #db61a266;
-    --border-success-emphasis: 0.0625rem solid #1f6feb;
-    --border-success-muted: 0.0625rem solid #388bfd66;
-    --border-transparent: 0.0625rem solid #00000000;
+    --border-accent-emphasis: var(--borderWidth-default) solid var(--borderColor-accent-emphasis);
+    --border-accent-muted: var(--borderWidth-default) solid var(--borderColor-accent-muted);
+    --border-attention-emphasis: var(--borderWidth-default) solid var(--borderColor-attention-emphasis);
+    --border-attention-muted: var(--borderWidth-default) solid var(--borderColor-attention-muted);
+    --border-danger-emphasis: var(--borderWidth-default) solid var(--borderColor-danger-emphasis);
+    --border-danger-muted: var(--borderWidth-default) solid var(--borderColor-danger-muted);
+    --border-default: var(--borderWidth-default) solid var(--borderColor-default);
+    --border-disabled: var(--borderWidth-default) solid var(--borderColor-disabled);
+    --border-done-emphasis: var(--borderWidth-default) solid var(--borderColor-done-emphasis);
+    --border-done-muted: var(--borderWidth-default) solid var(--borderColor-done-muted);
+    --border-emphasis: var(--borderWidth-default) solid var(--borderColor-emphasis);
+    --border-severe-emphasis: var(--borderWidth-default) solid var(--borderColor-severe-emphasis);
+    --border-severe-muted: var(--borderWidth-default) solid var(--borderColor-severe-muted);
+    --border-sponsors-emphasis: var(--borderWidth-default) solid var(--borderColor-sponsors-emphasis);
+    --border-sponsors-muted: var(--borderWidth-default) solid var(--borderColor-sponsors-muted);
+    --border-success-emphasis: var(--borderWidth-default) solid var(--borderColor-success-emphasis);
+    --border-success-muted: var(--borderWidth-default) solid var(--borderColor-success-muted);
+    --border-transparent: var(--borderWidth-default) solid var(--borderColor-transparent);
     --borderColor-closed-emphasis: var(--borderColor-emphasis); /** Strong border for closed state badges */
     --borderColor-closed-muted: #3d444d66; /** Subtle border for closed state indicators */
     --borderColor-draft-muted: #3d444d66; /** Subtle border for draft state indicators */
@@ -1706,7 +1707,7 @@
     --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** Pure white text */
-    --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
+    --focus-outline-color: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
     --header-fgColor-default: #ffffffb3;
     --overlay-bgColor: #010409;
     --page-header-bgColor: var(--bgColor-default);
@@ -1732,14 +1733,14 @@
     --avatar-borderColor: var(--borderColor-translucent);
     --border-closed-emphasis: var(--border-danger-emphasis);
     --border-closed-muted: var(--border-danger-muted);
-    --border-draft-muted: 0.0625rem solid #3d444d66;
-    --border-muted: 0.0625rem solid #3d444db3;
-    --border-neutral-emphasis: 0.0625rem solid #656c76;
+    --border-draft-muted: var(--borderWidth-default) solid var(--borderColor-draft-muted);
+    --border-muted: var(--borderWidth-default) solid var(--borderColor-muted);
+    --border-neutral-emphasis: var(--borderWidth-default) solid var(--borderColor-neutral-emphasis);
     --border-open-emphasis: var(--border-success-emphasis);
     --border-open-muted: var(--border-success-muted);
-    --border-translucent: 0.0625rem solid #ffffff26; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
-    --border-upsell-emphasis: 0.0625rem solid #8957e5;
-    --border-upsell-muted: 0.0625rem solid #ab7df866;
+    --border-translucent: var(--borderWidth-default) solid var(--borderColor-translucent); /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
+    --border-upsell-emphasis: var(--borderWidth-default) solid var(--borderColor-upsell-emphasis);
+    --border-upsell-muted: var(--borderWidth-default) solid var(--borderColor-upsell-muted);
     --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
     --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
     --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
@@ -1784,11 +1785,12 @@
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --dashboard-bgColor: var(--bgColor-inset);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --focus-outline: 2px solid #1f6feb; /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); /** Focus ring outline for keyboard navigation and accessibility. */
+    --focus-outlineColor: var(--focus-outline-color); /** Deprecated. Use focus.outline-color instead. */
     --overlay-borderColor: var(--borderColor-muted);
     --tooltip-fgColor: var(--fgColor-onEmphasis);
-    --border-draft-emphasis: 0.0625rem solid #656c76;
-    --border-neutral-muted: 0.0625rem solid #3d444db3;
+    --border-draft-emphasis: var(--borderWidth-default) solid var(--borderColor-draft-emphasis);
+    --border-neutral-muted: var(--borderWidth-default) solid var(--borderColor-neutral-muted);
     --button-danger-borderColor-hover: var(--button-primary-borderColor-rest);
     --button-default-borderColor-active: var(--button-default-borderColor-rest);
     --button-default-borderColor-hover: var(--button-default-borderColor-rest);