@primer/primitives 11.4.0 → 11.4.1-rc.6196071f

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

@@ -2,7 +2,13 @@ import { z } from 'zod';
 export declare const durationToken: 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]>;
+    $value: z.ZodUnion<readonly [z.ZodObject<{
+        value: z.ZodNumber;
+        unit: z.ZodEnum<{
+            s: "s";
+            ms: "ms";
+        }>;
+    }, z.core.$strict>, z.ZodString]>;
     $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.llm': z.ZodOptional<z.ZodObject<{

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

@@ -1,2 +1,12 @@
 import { z } from 'zod';
-export declare const durationValue: z.ZodString;
+/**
+ * W3C DTCG duration value format
+ * @see https://www.designtokens.org/tr/2025.10/format/#duration
+ */
+export declare const durationValue: z.ZodObject<{
+    value: z.ZodNumber;
+    unit: z.ZodEnum<{
+        s: "s";
+        ms: "ms";
+    }>;
+}, z.core.$strict>;

package/dist/build/schemas/durationValue.js

@@ -1,10 +1,20 @@
 import { z } from 'zod';
 import { schemaErrorMessage } from '../utilities/index.js';
-export const durationValue = z.string().superRefine((duration, ctx) => {
-    if (!/^[0-9]+ms$/.test(duration)) {
+/**
+ * W3C DTCG duration value format
+ * @see https://www.designtokens.org/tr/2025.10/format/#duration
+ */
+export const durationValue = z
+    .object({
+    value: z.number(),
+    unit: z.enum(['ms', 's']),
+})
+    .strict()
+    .superRefine((duration, ctx) => {
+    if (typeof duration.value !== 'number') {
         ctx.addIssue({
             code: 'custom',
-            message: schemaErrorMessage(`Invalid duration: "${duration}"`, `A duration must be a string with an "ms"`),
+            message: schemaErrorMessage(`Invalid duration value: "${duration.value}"`, `Duration value must be a number`),
         });
     }
 });

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

@@ -3,9 +3,21 @@ export declare const transitionToken: z.ZodObject<{
     $description: z.ZodOptional<z.ZodString>;
     $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
     $value: z.ZodUnion<readonly [z.ZodObject<{
-        duration: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodString]>, z.ZodString]>;
+        duration: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodObject<{
+            value: z.ZodNumber;
+            unit: z.ZodEnum<{
+                s: "s";
+                ms: "ms";
+            }>;
+        }, z.core.$strict>, z.ZodString]>, z.ZodString]>;
         timingFunction: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodArray<z.ZodNumber>, z.ZodString]>, z.ZodString]>;
-        delay: z.ZodOptional<z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodString]>, z.ZodString]>>;
+        delay: z.ZodOptional<z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodObject<{
+            value: z.ZodNumber;
+            unit: z.ZodEnum<{
+                s: "s";
+                ms: "ms";
+            }>;
+        }, z.core.$strict>, z.ZodString]>, z.ZodString]>>;
     }, z.core.$strip>, z.ZodString]>;
     $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
     $extensions: z.ZodOptional<z.ZodObject<{

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

@@ -1,8 +1,9 @@
 import type { Transform } from 'style-dictionary/types';
 /**
- * @description converts duration tokens string value to number with `ms` unit
+ * @description converts duration tokens to css duration string
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `duration`
  * @transformer returns a css duration
+ * @note W3C DTCG format: { value: number, unit: "ms" | "s" }
  */
 export declare const durationToCss: Transform;

package/dist/build/transformers/durationToCss.js

@@ -1,9 +1,10 @@
 import { isDuration } from '../filters/index.js';
 /**
- * @description converts duration tokens string value to number with `ms` unit
+ * @description converts duration tokens to css duration string
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher matches all tokens of $type `duration`
  * @transformer returns a css duration
+ * @note W3C DTCG format: { value: number, unit: "ms" | "s" }
  */
 export const durationToCss = {
     name: 'duration/css',
@@ -12,18 +13,24 @@ export const durationToCss = {
     filter: isDuration,
     transform: (token, _config, options) => {
         const valueProp = options.usesDtcg ? '$value' : 'value';
-        // throw an error if token value is not a string or does not end with `ms`
-        if (typeof token[valueProp] !== `string` || !(token[valueProp].endsWith(`ms`) || token[valueProp].endsWith(`s`))) {
-            throw new Error(`duration token value must be a string with an "ms" || "s" unit, invalid token: ${token.name} with value: ${token[valueProp]}`);
+        const tokenValue = token[valueProp];
+        // Validate W3C DTCG object format: { value: number, unit: "ms" | "s" }
+        if (typeof tokenValue !== 'object' || tokenValue === null || !('value' in tokenValue) || !('unit' in tokenValue)) {
+            throw new Error(`duration token value must be an object with "value" and "unit" properties (W3C DTCG format). Invalid token: ${token.name} with value: ${JSON.stringify(tokenValue)}`);
         }
-        // get value
-        let value = parseInt(token[valueProp].replace('ms', ''));
-        let unit = `ms`;
-        if (value >= 1000) {
-            value = value / 1000;
-            unit = `s`;
+        const { value, unit } = tokenValue;
+        // Validate unit
+        if (unit !== 'ms' && unit !== 's') {
+            throw new Error(`duration token unit must be "ms" or "s", invalid token: ${token.name} with unit: ${unit}`);
+        }
+        // Validate value is a finite, non-negative number
+        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`;
         }
-        // return value
         return `${value}${unit}`;
     },
 };

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="dark"][data-dark-theme="dark_colorblind_high_contrast"],
 [data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"] {
   --button-primary-bgColor-active: #3685f3;

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="dark"][data-dark-theme="dark_colorblind"],
 [data-color-mode="auto"][data-light-theme="dark_colorblind"] {
   --button-primary-bgColor-active: #3685f3;

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="dark"][data-dark-theme="dark_dimmed_high_contrast"],
 [data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"] {
   --button-danger-fgColor-active: #ffffff;

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="dark"][data-dark-theme="dark_dimmed"],
 [data-color-mode="auto"][data-light-theme="dark_dimmed"] {
   --button-danger-fgColor-active: #ffffff;

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="dark"][data-dark-theme="dark_high_contrast"],
 [data-color-mode="auto"][data-light-theme="dark_high_contrast"] {
   --button-primary-bgColor-active: #109135;

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="dark"][data-dark-theme="dark_tritanopia_high_contrast"],
 [data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"] {
   --button-outline-bgColor-active: #0d419d;

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="dark"][data-dark-theme="dark_tritanopia"],
 [data-color-mode="auto"][data-light-theme="dark_tritanopia"] {
   --bgColor-sponsors-muted: #db61a21a; /** Subtle background for GitHub Sponsors content */

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="dark"][data-dark-theme="dark"],
 [data-color-mode="auto"][data-light-theme="dark"] {
   --button-danger-fgColor-rest: #fa5e55;

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="light"][data-light-theme="light_colorblind_high_contrast"],
 [data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"] {
   --button-outline-bgColor-active: #033f9d;

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

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="light"][data-light-theme="light_colorblind"],
 [data-color-mode="auto"][data-light-theme="light_colorblind"] {
   --button-outline-bgColor-active: #0757ba;

package/dist/css/functional/themes/light-high-contrast.css

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="light"][data-light-theme="light_high_contrast"],
 [data-color-mode="auto"][data-light-theme="light_high_contrast"] {
   --button-outline-bgColor-active: #033f9d;

package/dist/css/functional/themes/light-tritanopia-high-contrast.css

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="light"][data-light-theme="light_tritanopia_high_contrast"],
 [data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"] {
   --button-outline-bgColor-active: #033f9d;

package/dist/css/functional/themes/light-tritanopia.css

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="light"][data-light-theme="light_tritanopia"],
 [data-color-mode="auto"][data-light-theme="light_tritanopia"] {
   --button-outline-bgColor-active: #0757ba;

package/dist/css/functional/themes/light.css

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 [data-color-mode="light"][data-light-theme="light"],
 [data-color-mode="auto"][data-light-theme="light"] {
   --bgColor-success-emphasis: #1f883d; /** Strong success background for prominent positive actions */

package/dist/css/primitives.css

@@ -1,3 +1,7 @@
+/**
+ * @spec See /DESIGN_TOKENS_SPEC.md for naming logic and semantic pairings.
+ * @rule Never use raw values (hex/px). Use semantic tokens ONLY.
+ */
 @import './base/motion/motion.css';
 @import './base/size/size.css';
 @import './base/typography/typography.css';

package/dist/docs/base/motion/motion.json

@@ -4,14 +4,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "0ms",
+      "$value": {
+        "value": 0,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.0}"
     },
     "name": "base-duration-0",
     "attributes": {},
     "path": ["base", "duration", "0"],
-    "value": "0ms",
+    "value": {
+      "value": 0,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-100": {
@@ -19,14 +25,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "100ms",
+      "$value": {
+        "value": 100,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.100}"
     },
     "name": "base-duration-100",
     "attributes": {},
     "path": ["base", "duration", "100"],
-    "value": "100ms",
+    "value": {
+      "value": 100,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-1000": {
@@ -34,14 +46,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "1000ms",
+      "$value": {
+        "value": 1000,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.1000}"
     },
     "name": "base-duration-1000",
     "attributes": {},
     "path": ["base", "duration", "1000"],
-    "value": "1000ms",
+    "value": {
+      "value": 1000,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-200": {
@@ -49,14 +67,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "200ms",
+      "$value": {
+        "value": 200,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.200}"
     },
     "name": "base-duration-200",
     "attributes": {},
     "path": ["base", "duration", "200"],
-    "value": "200ms",
+    "value": {
+      "value": 200,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-300": {
@@ -64,14 +88,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "300ms",
+      "$value": {
+        "value": 300,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.300}"
     },
     "name": "base-duration-300",
     "attributes": {},
     "path": ["base", "duration", "300"],
-    "value": "300ms",
+    "value": {
+      "value": 300,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-400": {
@@ -79,14 +109,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "400ms",
+      "$value": {
+        "value": 400,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.400}"
     },
     "name": "base-duration-400",
     "attributes": {},
     "path": ["base", "duration", "400"],
-    "value": "400ms",
+    "value": {
+      "value": 400,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-50": {
@@ -94,14 +130,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "50ms",
+      "$value": {
+        "value": 50,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.50}"
     },
     "name": "base-duration-50",
     "attributes": {},
     "path": ["base", "duration", "50"],
-    "value": "50ms",
+    "value": {
+      "value": 50,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-500": {
@@ -109,14 +151,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "500ms",
+      "$value": {
+        "value": 500,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.500}"
     },
     "name": "base-duration-500",
     "attributes": {},
     "path": ["base", "duration", "500"],
-    "value": "500ms",
+    "value": {
+      "value": 500,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-600": {
@@ -124,14 +172,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "600ms",
+      "$value": {
+        "value": 600,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.600}"
     },
     "name": "base-duration-600",
     "attributes": {},
     "path": ["base", "duration", "600"],
-    "value": "600ms",
+    "value": {
+      "value": 600,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-700": {
@@ -139,14 +193,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "700ms",
+      "$value": {
+        "value": 700,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.700}"
     },
     "name": "base-duration-700",
     "attributes": {},
     "path": ["base", "duration", "700"],
-    "value": "700ms",
+    "value": {
+      "value": 700,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-800": {
@@ -154,14 +214,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "800ms",
+      "$value": {
+        "value": 800,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.800}"
     },
     "name": "base-duration-800",
     "attributes": {},
     "path": ["base", "duration", "800"],
-    "value": "800ms",
+    "value": {
+      "value": 800,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-duration-900": {
@@ -169,14 +235,20 @@
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "900ms",
+      "$value": {
+        "value": 900,
+        "unit": "ms"
+      },
       "$type": "duration",
       "key": "{base.duration.900}"
     },
     "name": "base-duration-900",
     "attributes": {},
     "path": ["base", "duration", "900"],
-    "value": "900ms",
+    "value": {
+      "value": 900,
+      "unit": "ms"
+    },
     "type": "duration"
   },
   "base-easing-ease": {

package/dist/fallbacks/base/motion/motion.json

@@ -4,16 +4,52 @@
   "--base-easing-easeIn": [0.7, 0.1, 0.75, 0.9],
   "--base-easing-easeOut": [0.3, 0.8, 0.6, 1],
   "--base-easing-easeInOut": [0.6, 0, 0.2, 1],
-  "--base-duration-0": "0ms",
-  "--base-duration-50": "50ms",
-  "--base-duration-100": "100ms",
-  "--base-duration-200": "200ms",
-  "--base-duration-300": "300ms",
-  "--base-duration-400": "400ms",
-  "--base-duration-500": "500ms",
-  "--base-duration-600": "600ms",
-  "--base-duration-700": "700ms",
-  "--base-duration-800": "800ms",
-  "--base-duration-900": "900ms",
-  "--base-duration-1000": "1000ms"
+  "--base-duration-0": {
+    "value": 0,
+    "unit": "ms"
+  },
+  "--base-duration-50": {
+    "value": 50,
+    "unit": "ms"
+  },
+  "--base-duration-100": {
+    "value": 100,
+    "unit": "ms"
+  },
+  "--base-duration-200": {
+    "value": 200,
+    "unit": "ms"
+  },
+  "--base-duration-300": {
+    "value": 300,
+    "unit": "ms"
+  },
+  "--base-duration-400": {
+    "value": 400,
+    "unit": "ms"
+  },
+  "--base-duration-500": {
+    "value": 500,
+    "unit": "ms"
+  },
+  "--base-duration-600": {
+    "value": 600,
+    "unit": "ms"
+  },
+  "--base-duration-700": {
+    "value": 700,
+    "unit": "ms"
+  },
+  "--base-duration-800": {
+    "value": 800,
+    "unit": "ms"
+  },
+  "--base-duration-900": {
+    "value": 900,
+    "unit": "ms"
+  },
+  "--base-duration-1000": {
+    "value": 1000,
+    "unit": "ms"
+  }
 }