@primer/primitives 11.4.1-rc.edbe0e39 → 11.5.0-rc.14eaeb12

package/dist/build/schemas/shadowToken.js

@@ -2,6 +2,7 @@ import { z } from 'zod';
 import { baseToken } from './baseToken.js';
 import { referenceValue } from './referenceValue.js';
 import { colorHexValue } from './colorHexValue.js';
+import { colorW3cValue } from './colorW3cValue.js';
 import { alphaValue } from './alphaValue.js';
 import { dimensionValue } from './dimensionValue.js';
 import { tokenType } from './tokenType.js';
@@ -9,8 +10,8 @@ import { collection, mode } from './collections.js';
 import { llmExtension } from './llmExtension.js';
 export const shadowValue = z
     .object({
-    color: z.union([colorHexValue, referenceValue]),
-    alpha: z.union([alphaValue, referenceValue]),
+    color: z.union([colorHexValue, colorW3cValue, referenceValue]),
+    alpha: z.union([alphaValue, referenceValue]).optional(),
     offsetX: z.union([dimensionValue, referenceValue]),
     offsetY: z.union([dimensionValue, referenceValue]),
     blur: z.union([dimensionValue, referenceValue]),
@@ -51,11 +52,16 @@ export const shadowToken = baseToken
             'light-tritanopia': override,
             'light-protanopia-deuteranopia': override,
             'light-high-contrast': override,
+            'light-tritanopia-high-contrast': override,
+            'light-protanopia-deuteranopia-high-contrast': override,
             dark: override,
             'dark-tritanopia': override,
             'dark-protanopia-deuteranopia': override,
             'dark-high-contrast': override,
+            'dark-tritanopia-high-contrast': override,
+            'dark-protanopia-deuteranopia-high-contrast': override,
             'dark-dimmed': override,
+            'dark-dimmed-high-contrast': override,
         })
             .strict()
             .optional(),

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

@@ -3,7 +3,7 @@ export declare const stringToken: z.ZodObject<{
     $description: z.ZodOptional<z.ZodString>;
     $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
     $value: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
-    $type: z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
+    $type: z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "duration" | "dimension" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.llm': z.ZodOptional<z.ZodObject<{
             usage: z.ZodOptional<z.ZodArray<z.ZodString>>;

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

@@ -1,3 +1,3 @@
 import { z } from 'zod';
 import type { TokenType } from './validTokenType.js';
-export declare const tokenType: ($type: TokenType) => z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
+export declare const tokenType: ($type: TokenType) => z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "duration" | "dimension" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;

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

@@ -19,7 +19,7 @@ export declare const transitionToken: z.ZodObject<{
             }>;
         }, z.core.$strict>, z.ZodString]>, z.ZodString]>>;
     }, z.core.$strip>, z.ZodString]>;
-    $type: z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
+    $type: z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "duration" | "dimension" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.llm': z.ZodOptional<z.ZodObject<{
             usage: z.ZodOptional<z.ZodArray<z.ZodString>>;

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

@@ -28,7 +28,7 @@ export declare const typographyToken: z.ZodObject<{
         fontWeight: z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>;
         fontFamily: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
     }, z.core.$strip>, z.ZodString]>;
-    $type: z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
+    $type: z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "duration" | "dimension" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.llm': z.ZodOptional<z.ZodObject<{
             usage: z.ZodOptional<z.ZodArray<z.ZodString>>;

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

@@ -3,7 +3,7 @@ export declare const viewportRangeToken: z.ZodObject<{
     $description: z.ZodOptional<z.ZodString>;
     $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
     $value: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
-    $type: z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
+    $type: z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "duration" | "dimension" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.llm': z.ZodOptional<z.ZodObject<{
             usage: z.ZodOptional<z.ZodArray<z.ZodString>>;

package/dist/build/transformers/borderToCss.js

@@ -1,5 +1,6 @@
 import { isBorder } from '../filters/isBorder.js';
 import { parseDimension } from './utilities/parseDimension.js';
+import { normalizeColorValue } from './utilities/normalizeColorValue.js';
 /**
  * @description Converts a W3C dimension object to CSS string, preserving the original unit
  * @param dim - The dimension value in W3C object format or a string
@@ -49,6 +50,7 @@ export const borderToCss = {
             throw new Error(`Invalid border token property ${JSON.stringify(value)}. Must be an object with color, width and style properties.`);
         }
         /* width | style | color */
-        return `${dimensionToCss(value.width)} ${value.style} ${value.color}`;
+        const color = typeof value.color === 'object' ? normalizeColorValue(value.color) : value.color;
+        return `${dimensionToCss(value.width)} ${value.style} ${color}`;
     },
 };

package/dist/build/transformers/colorAlphaToCss.js

@@ -1,5 +1,6 @@
 import { isColorWithAlpha } from '../filters/isColorWithAlpha.js';
 import { getTokenValue } from './utilities/getTokenValue.js';
+import { normalizeColorValue } from './utilities/normalizeColorValue.js';
 export const cssColorMix = (colorA, colorB, colorBPercent) => {
     if (colorBPercent < 0 || colorBPercent > 1) {
         throw new Error(`Invalid argument for "cssColorMix", colorBPercent must be between 0 and 1, ${colorBPercent} provided.`);
@@ -16,8 +17,10 @@ export const colorAlphaToCss = {
     transitive: true,
     filter: isColorWithAlpha,
     transform: (token) => {
-        if (!token.alpha || token.alpha === null)
-            return getTokenValue(token);
-        return cssColorMix(getTokenValue(token), 'transparent', 1 - token.alpha);
+        const rawValue = getTokenValue(token);
+        const colorString = normalizeColorValue(rawValue);
+        if (token.alpha === null || token.alpha === undefined)
+            return colorString;
+        return cssColorMix(colorString, 'transparent', 1 - token.alpha);
     },
 };

package/dist/build/transformers/colorToHex.js

@@ -2,6 +2,7 @@ import { toHex } from 'color2k';
 import { isColor } from '../filters/index.js';
 import { getTokenValue } from './utilities/getTokenValue.js';
 import { alpha } from './utilities/alpha.js';
+import { normalizeColorValue } from './utilities/normalizeColorValue.js';
 /**
  * @description converts color tokens value to `hex6` or `hex8`
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
@@ -14,10 +15,12 @@ export const colorToHex = {
     transitive: true,
     filter: isColor,
     transform: (token, config) => {
+        const rawValue = getTokenValue(token);
+        const colorString = normalizeColorValue(rawValue);
         const alphaValue = token.alpha;
         if (alphaValue === null || alphaValue === undefined || alphaValue === 1) {
-            return toHex(getTokenValue(token));
+            return toHex(colorString);
         }
-        return toHex(alpha(getTokenValue(token), alphaValue, token, config));
+        return toHex(alpha(colorString, alphaValue, token, config));
     },
 };

package/dist/build/transformers/colorToRgbAlpha.js

@@ -1,6 +1,7 @@
 import { isColorWithAlpha } from '../filters/index.js';
 import { alpha } from './utilities/alpha.js';
 import { getTokenValue } from './utilities/getTokenValue.js';
+import { normalizeColorValue } from './utilities/normalizeColorValue.js';
 /**
  * @description replaces tokens value with `rgba` color using the tokens `alpha` property to specify the value used for alpha
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
@@ -13,8 +14,10 @@ export const colorToRgbAlpha = {
     transitive: true,
     filter: isColorWithAlpha,
     transform: (token, config) => {
+        const rawValue = getTokenValue(token);
+        const colorString = normalizeColorValue(rawValue);
         if (token.alpha === null)
-            return getTokenValue(token);
-        return alpha(getTokenValue(token), token.alpha, token, config);
+            return colorString;
+        return alpha(colorString, token.alpha, token, config);
     },
 };

package/dist/build/transformers/colorToRgbaFloat.js

@@ -4,8 +4,13 @@ import { getTokenValue } from './utilities/getTokenValue.js';
 import { rgbaFloatToHex } from './utilities/rgbaFloatToHex.js';
 import { hexToRgbaFloat } from './utilities/hexToRgbaFloat.js';
 import { isRgbaFloat } from './utilities/isRgbaFloat.js';
+import { normalizeColorValue, isW3cColorValue } from './utilities/normalizeColorValue.js';
 const toRgbaFloat = (token, alpha = undefined) => {
     let tokenValue = getTokenValue(token);
+    // Handle W3C color object - convert to hex first
+    if (isW3cColorValue(tokenValue)) {
+        tokenValue = normalizeColorValue(tokenValue);
+    }
     // get hex value from color string
     if (isRgbaFloat(tokenValue)) {
         tokenValue = rgbaFloatToHex(tokenValue, false);

package/dist/build/transformers/durationToCss.js

@@ -27,10 +27,10 @@ export const durationToCss = {
         if (typeof value !== 'number' || !Number.isFinite(value) || value < 0) {
             throw new Error(`duration token value must be a finite, non-negative number, invalid token: ${token.name} with value: ${value}`);
         }
-        // Convert ms >= 1000 to seconds for cleaner output
-        if (unit === 'ms' && value >= 1000) {
-            return `${value / 1000}s`;
+        // Always output in ms
+        if (unit === 's') {
+            return `${value * 1000}ms`;
         }
-        return `${value}${unit}`;
+        return `${value}ms`;
     },
 };

package/dist/build/transformers/gradientToCss.js

@@ -1,6 +1,7 @@
 import { toHex } from 'color2k';
 import { isGradient } from '../filters/isGradient.js';
 import { getTokenValue } from './utilities/getTokenValue.js';
+import { normalizeColorValue } from './utilities/normalizeColorValue.js';
 /**
  * @description converts gradient tokens value to css gradient
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
@@ -16,7 +17,7 @@ export const gradientToCss = {
         var _a, _b;
         const { angle } = (_b = (_a = token.$extensions) === null || _a === void 0 ? void 0 : _a['org.primer.gradient']) !== null && _b !== void 0 ? _b : {};
         const stops = getTokenValue(token).map(({ color, position }) => {
-            return `${toHex(color)} ${position * 100}%`;
+            return `${toHex(normalizeColorValue(color))} ${position * 100}%`;
         });
         return `linear-gradient(${angle || 180}deg, ${stops.join(', ')})`;
     },

package/dist/build/transformers/shadowToCss.js

@@ -3,6 +3,7 @@ import { isShadow } from '../filters/index.js';
 import { alpha } from './utilities/alpha.js';
 import { checkRequiredTokenProperties } from './utilities/checkRequiredTokenProperties.js';
 import { getTokenValue } from './utilities/getTokenValue.js';
+import { normalizeColorValue } from './utilities/normalizeColorValue.js';
 /**
  * @description Converts a W3C dimension object to CSS string
  * @param dim - The dimension value in W3C object format
@@ -38,7 +39,9 @@ export const shadowToCss = {
                 return shadow;
             checkRequiredTokenProperties(shadow, ['color', 'offsetX', 'offsetY', 'blur', 'spread']);
             /*css box shadow:  inset? | offset-x | offset-y | blur-radius | spread-radius | color */
-            return `${shadow.inset === true ? 'inset ' : ''}${dimensionToCss(shadow.offsetX)} ${dimensionToCss(shadow.offsetY)} ${dimensionToCss(shadow.blur)} ${dimensionToCss(shadow.spread)} ${toHex(alpha(getTokenValue(Object.assign(Object.assign({}, token), { [valueProp]: shadow }), 'color'), shadow.alpha || 1, token, config))}`;
+            const colorString = normalizeColorValue(getTokenValue(Object.assign(Object.assign({}, token), { [valueProp]: shadow }), 'color'));
+            const colorHex = shadow.alpha !== undefined ? toHex(alpha(colorString, shadow.alpha, token, config)) : toHex(colorString);
+            return `${shadow.inset === true ? 'inset ' : ''}${dimensionToCss(shadow.offsetX)} ${dimensionToCss(shadow.offsetY)} ${dimensionToCss(shadow.blur)} ${dimensionToCss(shadow.spread)} ${colorHex}`;
         })
             .join(', ');
     },

package/dist/build/transformers/utilities/normalizeColorValue.d.ts

@@ -0,0 +1,23 @@
+import Color from 'colorjs.io';
+import type { ColorW3cValue } from '../../schemas/colorW3cValue.js';
+export type ColorValue = string | ColorW3cValue;
+/**
+ * Type guard to check if value is a valid W3C color object.
+ * Validates structure: colorSpace is a string, components is a 3-element array
+ * of numbers or 'none' keywords.
+ */
+export declare function isW3cColorValue(value: unknown): value is ColorW3cValue;
+/**
+ * Converts a W3C DTCG color object to a colorjs.io Color instance.
+ * The 'none' keyword is replaced with 0 per CSS Color 4 rules for color computation.
+ */
+export declare function w3cToColor(value: ColorW3cValue): Color;
+/**
+ * Normalizes a color value for use in transformers.
+ * String values (hex, rgb, rgba, references) are returned as-is.
+ * W3C DTCG color objects are converted to hex via colorjs.io,
+ * correctly handling all color spaces (sRGB, display-p3, lab, etc.).
+ * @param value - color string or W3C color object
+ * @returns color string usable by downstream transformers
+ */
+export declare function normalizeColorValue(value: ColorValue): string;

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

@@ -0,0 +1,74 @@
+import Color from 'colorjs.io';
+/**
+ * Type guard to check if value is a valid W3C color object.
+ * Validates structure: colorSpace is a string, components is a 3-element array
+ * of numbers or 'none' keywords.
+ */
+export function isW3cColorValue(value) {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    if (!('colorSpace' in value) || typeof value.colorSpace !== 'string')
+        return false;
+    if (!('components' in value))
+        return false;
+    const components = value.components;
+    if (!Array.isArray(components) || components.length !== 3)
+        return false;
+    return components.every(c => typeof c === 'number' || c === 'none');
+}
+/**
+ * Maps W3C DTCG color space names to colorjs.io space identifiers
+ */
+const getColorSpace = (colorSpace) => {
+    switch (colorSpace) {
+        case 'display-p3':
+            return 'p3';
+        case 'a98-rgb':
+            return 'a98rgb';
+        case 'prophoto-rgb':
+            return 'prophoto';
+        default:
+            return colorSpace;
+    }
+};
+/**
+ * Converts a W3C DTCG color object to a colorjs.io Color instance.
+ * The 'none' keyword is replaced with 0 per CSS Color 4 rules for color computation.
+ */
+export function w3cToColor(value) {
+    var _a;
+    const coords = value.components.map(c => (c === 'none' ? 0 : c));
+    return new Color({
+        space: getColorSpace(value.colorSpace),
+        coords,
+        alpha: (_a = value.alpha) !== null && _a !== void 0 ? _a : 1,
+    });
+}
+/**
+ * Normalizes a color value for use in transformers.
+ * String values (hex, rgb, rgba, references) are returned as-is.
+ * W3C DTCG color objects are converted to hex via colorjs.io,
+ * correctly handling all color spaces (sRGB, display-p3, lab, etc.).
+ * @param value - color string or W3C color object
+ * @returns color string usable by downstream transformers
+ */
+export function normalizeColorValue(value) {
+    // String value (hex, rgb, rgba, reference, etc.) - return as-is
+    if (typeof value === 'string') {
+        return value;
+    }
+    // W3C object with hex property and sRGB color space - use hex directly
+    if (value.hex && value.colorSpace === 'srgb' && (value.alpha === undefined || value.alpha === 1)) {
+        return value.hex;
+    }
+    // Convert via colorjs.io for correct color space handling
+    const color = w3cToColor(value);
+    const rgb = color.toGamut('srgb').to('srgb');
+    const [r, g, b] = rgb.coords.map(x => Math.round(Math.max(0, Math.min(1, x !== null && x !== void 0 ? x : 0)) * 255));
+    const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    if (rgb.alpha < 1) {
+        const a = Math.round(rgb.alpha * 255);
+        return hex + a.toString(16).padStart(2, '0');
+    }
+    return hex;
+}

package/dist/build/types/borderTokenValue.d.ts

@@ -1,4 +1,5 @@
 import type {DimensionTokenValue} from './dimensionTokenValue.js'
+import type {ColorW3cValue} from '../schemas/colorW3cValue.js'
 
 /**
  * Type definition for w3c border composite token value
@@ -6,7 +7,7 @@ import type {DimensionTokenValue} from './dimensionTokenValue.js'
  */
 export type StrokeStyleString = 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'outset' | 'inset'
 export type BorderTokenValue = {
-  color: string
+  color: string | ColorW3cValue
   width: string | DimensionTokenValue
   style: StrokeStyleString
 }

package/dist/build/types/shadowTokenValue.d.ts

@@ -1,11 +1,12 @@
 import type {DimensionTokenValue} from './dimensionTokenValue.js'
+import type {ColorW3cValue} from '../schemas/colorW3cValue.js'
 
 /**
  * Type definition for w3c shadow composite token value
  * @link https://design-tokens.github.io/community-group/format/#shadow
  */
 export type ShadowTokenValue = {
-  color: string
+  color: string | ColorW3cValue
   offsetX: DimensionTokenValue
   offsetY: DimensionTokenValue
   blur: DimensionTokenValue

package/dist/css/base/motion/motion.css

@@ -1,7 +1,7 @@
 :root {
   --base-duration-0: 0ms;
   --base-duration-100: 100ms;
-  --base-duration-1000: 1s;
+  --base-duration-1000: 1000ms;
   --base-duration-200: 200ms;
   --base-duration-300: 300ms;
   --base-duration-400: 400ms;

package/dist/css/functional/size/radius.css

@@ -1,6 +1,6 @@
 :root {
   --borderRadius-full: 624.9375rem; /** Use this border radius for pill shaped elements */
-  --borderRadius-large: 0.75rem; /** Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons. */
+  --borderRadius-large: 0.75rem; /** Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. */
   --borderRadius-medium: 0.375rem; /** Medium border radius (6px). The default choice for most buttons, cards, and containers */
   --borderRadius-small: 0.1875rem; /** Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height */
   --borderRadius-default: var(--borderRadius-medium); /** Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt */

package/dist/css/functional/size/size-coarse.css

@@ -1,6 +1,7 @@
 @media (pointer: coarse) {
   :root {
     --control-minTarget-auto: 2.75rem; /** Minimum touch target size for coarse pointer devices (touch screens) */
+    --controlStack-large-gap-auto: 0.75rem; /** Gap between stacked controls in large density layouts for touch devices */
     --controlStack-medium-gap-auto: 0.75rem; /** Gap between stacked controls in medium density layouts for touch devices */
     --controlStack-small-gap-auto: 1rem; /** Gap between stacked controls in small density layouts for touch devices */
   }

package/dist/css/functional/size/size-fine.css

@@ -1,6 +1,7 @@
 @media (pointer: fine) {
   :root {
     --control-minTarget-auto: 1rem; /** Minimum target size for fine pointer devices (mouse) */
+    --controlStack-large-gap-auto: 0.5rem; /** Gap between stacked controls in large density layouts for mouse interfaces */
     --controlStack-medium-gap-auto: 0.5rem; /** Gap between stacked controls in medium density layouts for mouse interfaces */
     --controlStack-small-gap-auto: 0.5rem; /** Gap between stacked controls in small density layouts for mouse interfaces */
   }

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

@@ -16,6 +16,7 @@
   --spinner-strokeWidth-default: 0.125rem;
   --control-large-gap: 0.5rem;
   --control-large-lineBoxHeight: 1.25rem;
+  --control-large-paddingInline-condensed: 0.5rem;
   --control-large-paddingInline-normal: 0.75rem;
   --control-large-paddingInline-spacious: 1rem;
   --control-large-size: 2.5rem;
@@ -32,9 +33,11 @@
   --control-small-paddingBlock: 0.25rem;
   --control-small-paddingInline-condensed: 0.5rem;
   --control-small-paddingInline-normal: 0.75rem;
+  --control-small-paddingInline-spacious: 1rem;
   --control-small-size: 1.75rem;
   --control-xlarge-gap: 0.5rem;
   --control-xlarge-lineBoxHeight: 1.25rem;
+  --control-xlarge-paddingInline-condensed: 0.5rem;
   --control-xlarge-paddingInline-normal: 0.75rem;
   --control-xlarge-paddingInline-spacious: 1rem;
   --control-xlarge-size: 3rem;
@@ -47,8 +50,10 @@
   --controlStack-large-gap-auto: 0.5rem;
   --controlStack-large-gap-condensed: 0.5rem;
   --controlStack-large-gap-spacious: 0.75rem;
+  --controlStack-medium-gap-auto: 0.5rem;
   --controlStack-medium-gap-condensed: 0.5rem;
   --controlStack-medium-gap-spacious: 0.75rem;
+  --controlStack-small-gap-auto: 0.5rem;
   --controlStack-small-gap-condensed: 0.5rem;
   --controlStack-small-gap-spacious: 1rem;
   --overlay-borderRadius: 0.375rem;

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

@@ -58,13 +58,13 @@
   --borderColor-sponsors-muted: #f87cbd; /** Subtle border for GitHub Sponsors content */
   --borderColor-success-emphasis: #409eff; /** Strong success border for prominent positive elements */
   --borderColor-success-muted: #5cacff; /** Subtle success border for positive feedback elements */
-  --borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements */
+  --borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
   --borderColor-transparent: #00000000; /** Fully transparent border */
   --button-danger-bgColor-hover: #8f3c00;
   --button-danger-borderColor-hover: #ffb757;
   --button-danger-fgColor-rest: #ffb757;
-  --button-danger-shadow-selected: 0 0 0 0 #000000;
-  --button-default-shadow-resting: 0 0 0 0 #000000;
+  --button-danger-shadow-selected: 0 0 0 0 #00000000;
+  --button-default-shadow-resting: 0 0 0 0 #00000000;
   --button-inactive-bgColor: #262c36;
   --button-inactive-fgColor: #b7bdc8;
   --button-invisible-bgColor-active: #212830;
@@ -78,10 +78,10 @@
   --button-outline-fgColor-disabled: #74b9ff80;
   --button-outline-fgColor-hover: #71b7ff;
   --button-outline-fgColor-rest: #5cacff;
-  --button-outline-shadow-selected: 0 0 0 0 #000000;
+  --button-outline-shadow-selected: 0 0 0 0 #00000000;
   --button-primary-bgColor-disabled: #318bf8;
   --button-primary-borderColor-rest: #91cbff;
-  --button-primary-shadow-selected: 0 0 0 0 #000000;
+  --button-primary-shadow-selected: 0 0 0 0 #00000000;
   --button-star-iconColor: #f7c843;
   --buttonCounter-default-bgColor-rest: #2f3742;
   --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -668,6 +668,7 @@
   --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;
   --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
   --borderColor-draft-muted: var(--borderColor-default); /** Subtle border for draft state indicators */
@@ -807,6 +808,7 @@
   --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-open-emphasis: var(--border-success-emphasis);
@@ -818,14 +820,17 @@
   --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
   --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
   --button-danger-borderColor-rest: var(--control-borderColor-rest);
+  --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
+  --button-default-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
   --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
   --button-primary-fgColor-rest: var(--fgColor-white);
+  --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
   --button-primary-iconColor-rest: var(--fgColor-white);
   --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
   --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -896,6 +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;
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
@@ -955,13 +961,13 @@
     --borderColor-sponsors-muted: #f87cbd; /** Subtle border for GitHub Sponsors content */
     --borderColor-success-emphasis: #409eff; /** Strong success border for prominent positive elements */
     --borderColor-success-muted: #5cacff; /** Subtle success border for positive feedback elements */
-    --borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements */
+    --borderColor-translucent: #9198a1; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
     --borderColor-transparent: #00000000; /** Fully transparent border */
     --button-danger-bgColor-hover: #8f3c00;
     --button-danger-borderColor-hover: #ffb757;
     --button-danger-fgColor-rest: #ffb757;
-    --button-danger-shadow-selected: 0 0 0 0 #000000;
-    --button-default-shadow-resting: 0 0 0 0 #000000;
+    --button-danger-shadow-selected: 0 0 0 0 #00000000;
+    --button-default-shadow-resting: 0 0 0 0 #00000000;
     --button-inactive-bgColor: #262c36;
     --button-inactive-fgColor: #b7bdc8;
     --button-invisible-bgColor-active: #212830;
@@ -975,10 +981,10 @@
     --button-outline-fgColor-disabled: #74b9ff80;
     --button-outline-fgColor-hover: #71b7ff;
     --button-outline-fgColor-rest: #5cacff;
-    --button-outline-shadow-selected: 0 0 0 0 #000000;
+    --button-outline-shadow-selected: 0 0 0 0 #00000000;
     --button-primary-bgColor-disabled: #318bf8;
     --button-primary-borderColor-rest: #91cbff;
-    --button-primary-shadow-selected: 0 0 0 0 #000000;
+    --button-primary-shadow-selected: 0 0 0 0 #00000000;
     --button-star-iconColor: #f7c843;
     --buttonCounter-default-bgColor-rest: #2f3742;
     --buttonCounter-outline-bgColor-hover: #194fb133;
@@ -1565,6 +1571,7 @@
     --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;
     --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
     --borderColor-draft-muted: var(--borderColor-default); /** Subtle border for draft state indicators */
@@ -1704,6 +1711,7 @@
     --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-open-emphasis: var(--border-success-emphasis);
@@ -1715,14 +1723,17 @@
     --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
     --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
     --button-danger-borderColor-rest: var(--control-borderColor-rest);
+    --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
     --button-default-bgColor-disabled: var(--control-bgColor-disabled);
     --button-default-borderColor-disabled: var(--control-borderColor-disabled);
     --button-default-borderColor-rest: var(--control-borderColor-rest);
+    --button-default-fgColor-disabled: var(--control-fgColor-disabled);
     --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
     --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
     --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
     --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
     --button-primary-fgColor-rest: var(--fgColor-white);
+    --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
     --button-primary-iconColor-rest: var(--fgColor-white);
     --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
     --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -1793,6 +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;
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
     --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
   }