@primer/primitives 0.0.0-20260430114213 → 0.0.0-20260430122223

package/DESIGN_TOKENS_GUIDE.md

@@ -65,18 +65,26 @@
 
 ### Motion
 
-| Keyword | Rule                                                           |
-| ------- | -------------------------------------------------------------- |
-| MUST    | Use motion for interactive state changes (hover, focus, press) |
-| MUST    | Keep animations ≤300ms for UI interactions                     |
-| MUST    | Respect `prefers-reduced-motion` media query                   |
-| MUST    | Provide instant alternatives when motion is reduced            |
-| SHOULD  | Use 100-200ms for micro-interactions                           |
-| SHOULD  | Use 200-300ms for state changes                                |
-| NEVER   | Exceed 500ms for UI interactions                               |
-| NEVER   | Use motion purely for decoration                               |
-| NEVER   | Create indefinitely looping motion without user control        |
-| NEVER   | Rely solely on motion to convey information                    |
+```
+--motion-[property]-[semantic]
+  ├── property: duration | easing | transition
+  └── semantic: micro | short | medium | long       (duration)
+                hover | enter | exit | move | linear (easing)
+                hover | stateChange | enter | exit   (transition)
+```
+
+| Keyword | Rule                                                                       |
+| ------- | -------------------------------------------------------------------------- |
+| MUST    | Use `motion.transition.*` tokens for interactive state changes             |
+| MUST    | Keep animations ≤`motion.duration.medium` (300ms) for UI interactions      |
+| MUST    | Respect `prefers-reduced-motion` media query                               |
+| MUST    | Provide instant alternatives when motion is reduced                        |
+| SHOULD  | Use `motion.duration.micro` (100ms) for hover and focus micro-interactions |
+| SHOULD  | Use `motion.duration.short` (200ms) for state changes                      |
+| NEVER   | Exceed `motion.duration.long` (500ms) for UI interactions                  |
+| NEVER   | Use motion purely for decoration                                           |
+| NEVER   | Create indefinitely looping motion without user control                    |
+| NEVER   | Rely solely on motion to convey information                                |
 
 ### Typography
 
@@ -126,10 +134,10 @@
 
 ## Decision Tree: Easing Selection
 
-1. Is element entering/exiting viewport? → ease-out (default)
-2. Is element moving/morphing on screen? → ease-in-out
-3. Is this a hover state change? → ease
-4. Is this constant motion (loaders)? → linear
+1. Is element entering/exiting viewport? → `motion.easing.enter` / `motion.easing.exit`
+2. Is element moving/morphing on screen? → `motion.easing.move`
+3. Is this a hover state change? → `motion.easing.hover`
+4. Is this constant motion (loaders)? → `motion.easing.linear`
 
 ---
 
@@ -148,11 +156,11 @@
   font: var(--text-body-shorthand-medium);
   cursor: pointer;
 
-  /* Motion: MUST be <300ms */
+  /* Motion: Use functional motion tokens */
   transition:
-    background-color 150ms ease,
-    box-shadow 150ms ease,
-    transform 100ms ease;
+    background-color var(--motion-transition-hover),
+    box-shadow var(--motion-transition-hover),
+    transform var(--motion-transition-hover);
 }
 
 /* State: Hover */

package/DESIGN_TOKENS_SPEC.md

@@ -429,6 +429,73 @@ 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.
 
+## Motion
+
+### motion-duration-long
+Longer duration for complex multi-step animations or large-scale layout shifts. Use sparingly.
+**U:** complex-animation, layout-shift, multi-step
+**R:** Use sparingly for complex animations. NEVER use for simple UI interactions.
+
+### motion-duration-medium
+Standard duration for elements entering or exiting the viewport, such as modals and dropdowns.
+**U:** dropdown-appear, modal-open, tooltip-show
+**R:** Use for elements entering or leaving the viewport. Maximum recommended duration for UI interactions.
+
+### motion-duration-micro
+Fast micro-interactions like hover, focus ring, and color shifts.
+**U:** color-shift, focus-ring, hover-transition
+**R:** Use for instantaneous feedback on hover and focus states.
+
+### motion-duration-short
+Quick transitions for state changes like expand/collapse, toggles, and visibility changes.
+**U:** expand-collapse, toggle, visibility-change
+**R:** Use for interactive state changes that need to feel responsive.
+
+### motion-easing-enter
+Decelerating easing for elements entering the viewport or appearing on screen.
+**U:** element-appearing, enter-animation, modal-open
+**R:** RECOMMENDED default for enter animations. Element decelerates into its final position.
+
+### motion-easing-exit
+Accelerating easing for elements exiting the viewport or leaving the screen.
+**U:** element-leaving, exit-animation, modal-close
+**R:** Use for elements leaving the viewport. Element accelerates away.
+
+### motion-easing-hover
+Easing for hover state changes and micro-interactions.
+**U:** button-hover, hover-state, micro-interaction
+**R:** Use for hover state changes.
+
+### motion-easing-linear
+Constant motion with no acceleration. Use for continuous animations like progress bars or loaders.
+**U:** continuous-animation, loader, progress-bar
+**R:** Use only for constant, uninterrupted motion.
+
+### motion-easing-move
+Smooth easing for elements moving or morphing within the viewport.
+**U:** morph-animation, position-change, size-change
+**R:** Use for elements that move or change shape on screen.
+
+### motion-transition-enter
+Transition for elements entering the viewport, such as modals, dropdowns, and tooltips.
+**U:** dropdown-appear, modal-open, tooltip-show
+**R:** Use for elements appearing on screen. Element decelerates into final position.
+
+### motion-transition-exit
+Transition for elements exiting the viewport, such as closing modals and dismissing dropdowns.
+**U:** dropdown-dismiss, modal-close, tooltip-hide
+**R:** Use for elements leaving the screen. Shorter than enter to feel snappy.
+
+### motion-transition-hover
+Transition for hover state changes on interactive elements like buttons and links.
+**U:** button-hover, interactive-hover, link-hover
+**R:** Use for all hover state transitions. Keeps interactions feeling instantaneous.
+
+### motion-transition-stateChange
+Transition for state changes like toggles, expand/collapse, and visibility changes.
+**U:** accordion, expand-collapse, toggle
+**R:** Use for interactive elements that change between states.
+
 ## 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('/');
@@ -54,7 +72,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, 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}`,
@@ -66,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}`,
@@ -74,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,
                 },
             },
             {
@@ -87,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/build/transformers/figmaAttributes.js

@@ -43,12 +43,14 @@ export const figmaAttributes = {
     name: 'figma/attributes',
     type: `attribute`,
     transform: (token, platform = {}) => {
-        var _a, _b;
+        var _a, _b, _c;
         const { modeOverride, collection, scopes, group, codeSyntax } = ((_a = token.$extensions) === null || _a === void 0 ? void 0 : _a['org.primer.figma']) || {};
+        const collectionOverride = (_b = platform.options) === null || _b === void 0 ? void 0 : _b.collectionOverride;
+        const resolvedCollection = collectionOverride && collection && collection in collectionOverride ? collectionOverride[collection] : collection;
         return {
-            mode: asArray((_b = platform.options) === null || _b === void 0 ? void 0 : _b.theme)[0] || modeOverride || 'default',
-            collection,
-            group: group || collection,
+            mode: asArray((_c = platform.options) === null || _c === void 0 ? void 0 : _c.theme)[0] || modeOverride || 'default',
+            collection: resolvedCollection,
+            group: group || resolvedCollection,
             scopes: getScopes(scopes),
             codeSyntax,
         };

package/dist/build/transformers/transitionToCss.js

@@ -22,6 +22,10 @@ export const transitionToCss = {
         }
         // check required properties
         checkRequiredTokenProperties(value, ['duration', 'timingFunction']);
-        return `${value.duration} ${cubicBezierArrayToCss(value.timingFunction, token.path)} ${value.delay ? value.delay : ''}`.trim();
+        // timingFunction may already be a CSS string if resolved from a cubicBezier reference
+        const timing = typeof value.timingFunction === 'string'
+            ? value.timingFunction
+            : cubicBezierArrayToCss(value.timingFunction, token.path);
+        return `${value.duration} ${timing} ${value.delay ? value.delay : ''}`.trim();
     },
 };

package/dist/css/functional/motion/motion.css

@@ -0,0 +1,15 @@
+:root {
+  --motion-duration-long: var(--base-duration-500); /** Longer duration for complex multi-step animations or large-scale layout shifts. Use sparingly. */
+  --motion-duration-medium: var(--base-duration-300); /** Standard duration for elements entering or exiting the viewport, such as modals and dropdowns. */
+  --motion-duration-micro: var(--base-duration-100); /** Fast micro-interactions like hover, focus ring, and color shifts. */
+  --motion-duration-short: var(--base-duration-200); /** Quick transitions for state changes like expand/collapse, toggles, and visibility changes. */
+  --motion-easing-enter: var(--base-easing-easeOut); /** Decelerating easing for elements entering the viewport or appearing on screen. */
+  --motion-easing-exit: var(--base-easing-easeIn); /** Accelerating easing for elements exiting the viewport or leaving the screen. */
+  --motion-easing-hover: var(--base-easing-ease); /** Easing for hover state changes and micro-interactions. */
+  --motion-easing-linear: var(--base-easing-linear); /** Constant motion with no acceleration. Use for continuous animations like progress bars or loaders. */
+  --motion-easing-move: var(--base-easing-easeInOut); /** Smooth easing for elements moving or morphing within the viewport. */
+  --motion-transition-enter: var(--motion-duration-medium) var(--motion-easing-enter); /** Transition for elements entering the viewport, such as modals, dropdowns, and tooltips. */
+  --motion-transition-exit: var(--motion-duration-short) var(--motion-easing-exit); /** Transition for elements exiting the viewport, such as closing modals and dismissing dropdowns. */
+  --motion-transition-hover: var(--motion-duration-micro) var(--motion-easing-hover); /** Transition for hover state changes on interactive elements like buttons and links. */
+  --motion-transition-stateChange: var(--motion-duration-short) var(--motion-easing-move); /** Transition for state changes like toggles, expand/collapse, and visibility changes. */
+}

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 */
@@ -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,7 @@
   --diffBlob-expander-iconColor: var(--fgColor-default);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
   --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-  --focus-outline: 0.125rem 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);
@@ -886,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);
@@ -901,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);
 }
@@ -1555,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 */
@@ -1711,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 */
@@ -1779,7 +1779,7 @@
     --diffBlob-expander-iconColor: var(--fgColor-default);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
     --diffBlob-hunkNum-fgColor-rest: var(--fgColor-default);
-    --focus-outline: 0.125rem 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);
@@ -1789,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);
@@ -1804,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 */
@@ -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,12 +882,12 @@
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --dashboard-bgColor: var(--bgColor-inset);
   --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-  --focus-outline: 0.125rem 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);
@@ -1574,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 */
@@ -1733,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);
@@ -1785,12 +1785,12 @@
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --dashboard-bgColor: var(--bgColor-inset);
     --diffBlob-hunkNum-fgColor-hover: var(--fgColor-onEmphasis);
-    --focus-outline: 0.125rem 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);