@primer/primitives 10.4.0-rc.eab36abe → 10.4.0-rc.fd8ac4c9

package/dist/build/schemas/shadowToken.js

@@ -17,10 +17,6 @@ export const shadowValue = z
     inset: z.boolean().optional(),
 })
     .strict();
-const baseShadowToken = baseToken.extend({
-    $value: z.union([shadowValue, referenceValue, z.array(shadowValue)]),
-});
-const override = z.union([referenceValue, baseShadowToken]).optional();
 export const shadowToken = baseToken
     .extend({
     $value: z.union([shadowValue, z.array(shadowValue), referenceValue]),
@@ -44,29 +40,6 @@ export const shadowToken = baseToken
             group: z.string().optional(),
         })
             .strict(),
-        'org.primer.overrides': z
-            .object({
-            light: override,
-            'light-tritanopia': override,
-            'light-protanopia-deuteranopia': override,
-            'light-high-contrast': override,
-            dark: override,
-            'dark-tritanopia': override,
-            'dark-protanopia-deuteranopia': override,
-            'dark-high-contrast': override,
-            'dark-dimmed': override,
-        }, {
-            errorMap: e => {
-                if (e.code === 'unrecognized_keys') {
-                    return {
-                        message: `Unrecognized key: "${e.keys.join(', ')}", must be one of: light, light-tritanopia, light-protanopia-deuteranopia, light-high-contrast, dark, dark-tritanopia, dark-protanopia-deuteranopia, dark-high-contrast, dark-dimmed`,
-                    };
-                }
-                return { message: `Error: ${e.code}` };
-            },
-        })
-            .strict()
-            .optional(),
     })
         .optional(),
 })

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

@@ -0,0 +1,6 @@
+:root {
+  --motion-loading-delay-default: var(--base-duration-1000); /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
+  --motion-skeletonLoader-shimmer-duration-scale: var(--base-duration-1000); /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
+  --motion-spinner-duration-rotation: var(--base-duration-1000); /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
+  --motion-spinner-easing-rotation: var(--base-easing-linear); /* The easing curve for the "Spinner" loading indicator rotation */
+}

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

@@ -621,7 +621,7 @@
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_colorblind"],
@@ -1245,6 +1245,6 @@
     --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
   }
 }

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

@@ -621,7 +621,7 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --focus-outline: 2px solid #316dca;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_dimmed"],
@@ -1245,6 +1245,6 @@
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
     --focus-outline: 2px solid #316dca;
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
   }
 }

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

@@ -621,7 +621,7 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
@@ -1245,6 +1245,6 @@
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
   }
 }

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

@@ -621,7 +621,7 @@
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark_tritanopia"],
@@ -1245,6 +1245,6 @@
     --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
   }
 }

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

@@ -621,7 +621,7 @@
   --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
   --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
   --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+  --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
   [data-color-mode="auto"][data-dark-theme="dark"],
@@ -1245,6 +1245,6 @@
     --shadow-floating-xlarge: 0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409;
     --underlineNav-borderColor-hover: var(--borderColor-neutral-muted);
     --button-outline-borderColor-hover: var(--button-default-borderColor-hover);
-    --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
+    --button-outline-borderColor-selected: var(--button-outline-borderColor-hover);
   }
 }

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

@@ -574,6 +574,7 @@
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-active: var(--control-borderColor-rest);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
+  --button-default-borderColor-hover: var(--control-borderColor-rest);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -615,7 +616,6 @@
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
   --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
@@ -1198,6 +1198,7 @@
     --button-default-bgColor-disabled: var(--control-bgColor-disabled);
     --button-default-borderColor-active: var(--control-borderColor-rest);
     --button-default-borderColor-disabled: var(--control-borderColor-disabled);
+    --button-default-borderColor-hover: var(--control-borderColor-rest);
     --button-default-borderColor-rest: var(--control-borderColor-rest);
     --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
     --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -1239,7 +1240,6 @@
     --underlineNav-borderColor-hover: var(--borderColor-muted);
     --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-    --button-default-borderColor-hover: var(--button-default-borderColor-rest);
     --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
     --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
     --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;

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

@@ -574,6 +574,7 @@
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-active: var(--control-borderColor-rest);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
+  --button-default-borderColor-hover: var(--control-borderColor-rest);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
   --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
@@ -620,7 +621,6 @@
   --tooltip-fgColor: var(--fgColor-onEmphasis);
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #454c54;
-  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 }
 @media (prefers-color-scheme: dark) {
@@ -1198,6 +1198,7 @@
     --button-default-bgColor-disabled: var(--control-bgColor-disabled);
     --button-default-borderColor-active: var(--control-borderColor-rest);
     --button-default-borderColor-disabled: var(--control-borderColor-disabled);
+    --button-default-borderColor-hover: var(--control-borderColor-rest);
     --button-default-borderColor-rest: var(--control-borderColor-rest);
     --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
     --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
@@ -1244,7 +1245,6 @@
     --tooltip-fgColor: var(--fgColor-onEmphasis);
     --underlineNav-borderColor-hover: var(--borderColor-muted);
     --border-neutral-muted: 0.0625rem solid #454c54;
-    --button-default-borderColor-hover: var(--button-default-borderColor-rest);
     --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
   }
 }

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

@@ -574,6 +574,7 @@
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-active: var(--control-borderColor-rest);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
+  --button-default-borderColor-hover: var(--control-borderColor-rest);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -615,7 +616,6 @@
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
   --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
@@ -1198,6 +1198,7 @@
     --button-default-bgColor-disabled: var(--control-bgColor-disabled);
     --button-default-borderColor-active: var(--control-borderColor-rest);
     --button-default-borderColor-disabled: var(--control-borderColor-disabled);
+    --button-default-borderColor-hover: var(--control-borderColor-rest);
     --button-default-borderColor-rest: var(--control-borderColor-rest);
     --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
     --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -1239,7 +1240,6 @@
     --underlineNav-borderColor-hover: var(--borderColor-muted);
     --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-    --button-default-borderColor-hover: var(--button-default-borderColor-rest);
     --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
     --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
     --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;

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

@@ -574,6 +574,7 @@
   --button-default-bgColor-disabled: var(--control-bgColor-disabled);
   --button-default-borderColor-active: var(--control-borderColor-rest);
   --button-default-borderColor-disabled: var(--control-borderColor-disabled);
+  --button-default-borderColor-hover: var(--control-borderColor-rest);
   --button-default-borderColor-rest: var(--control-borderColor-rest);
   --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
   --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -615,7 +616,6 @@
   --underlineNav-borderColor-hover: var(--borderColor-muted);
   --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-  --button-default-borderColor-hover: var(--button-default-borderColor-rest);
   --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
   --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
   --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
@@ -1198,6 +1198,7 @@
     --button-default-bgColor-disabled: var(--control-bgColor-disabled);
     --button-default-borderColor-active: var(--control-borderColor-rest);
     --button-default-borderColor-disabled: var(--control-borderColor-disabled);
+    --button-default-borderColor-hover: var(--control-borderColor-rest);
     --button-default-borderColor-rest: var(--control-borderColor-rest);
     --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
     --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
@@ -1239,7 +1240,6 @@
     --underlineNav-borderColor-hover: var(--borderColor-muted);
     --border-neutral-muted: 0.0625rem solid #d1d9e0b3;
     --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
-    --button-default-borderColor-hover: var(--button-default-borderColor-rest);
     --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
     --shadow-floating-large: 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d;
     --shadow-floating-medium: 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;

package/dist/css/primitives.css

@@ -43,6 +43,12 @@
   --base-text-weight-normal: 400;
   --base-text-weight-semibold: 600;
 }
+:root {
+  --motion-loading-delay-default: var(--base-duration-1000); /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
+  --motion-skeletonLoader-shimmer-duration-scale: var(--base-duration-1000); /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
+  --motion-spinner-duration-rotation: var(--base-duration-1000); /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
+  --motion-spinner-easing-rotation: var(--base-easing-linear); /* The easing curve for the "Spinner" loading indicator rotation */
+}
 :root {
   --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
   --borderRadius-large: 0.75rem;

package/dist/docs/functional/motion/motion.json

@@ -0,0 +1,66 @@
+{
+  "motion-loading-delay-default": {
+    "filePath": "src/tokens/functional/motion/loading.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.1000}",
+      "$type": "duration",
+      "$description": "The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies."
+    },
+    "name": "motion-loading-delay-default",
+    "attributes": {},
+    "path": ["motion", "loading", "delay", "default"],
+    "key": "{motion.loading.delay.default}",
+    "value": "1000ms",
+    "type": "duration",
+    "description": "The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies."
+  },
+  "motion-skeletonLoader-shimmer-duration-scale": {
+    "filePath": "src/tokens/functional/motion/patterns.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.1000}",
+      "$type": "duration",
+      "$description": "The amount of times it takes the \"shimmer\" effect to go from the start (left) of the skeleton loader to the end (right)"
+    },
+    "name": "motion-skeletonLoader-shimmer-duration-scale",
+    "attributes": {},
+    "path": ["motion", "skeletonLoader", "shimmer", "duration", "scale"],
+    "key": "{motion.skeletonLoader.shimmer.duration.scale}",
+    "value": "1000ms",
+    "type": "duration",
+    "description": "The amount of times it takes the \"shimmer\" effect to go from the start (left) of the skeleton loader to the end (right)"
+  },
+  "motion-spinner-duration-rotation": {
+    "filePath": "src/tokens/functional/motion/patterns.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.1000}",
+      "$type": "duration",
+      "$description": "The amount of time it takes the \"Spinner\" loading indicator to make a full 360deg rotation"
+    },
+    "name": "motion-spinner-duration-rotation",
+    "attributes": {},
+    "path": ["motion", "spinner", "duration", "rotation"],
+    "key": "{motion.spinner.duration.rotation}",
+    "value": "1000ms",
+    "type": "duration",
+    "description": "The amount of time it takes the \"Spinner\" loading indicator to make a full 360deg rotation"
+  },
+  "motion-spinner-easing-rotation": {
+    "filePath": "src/tokens/functional/motion/patterns.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.easing.linear}",
+      "$type": "cubicBezier",
+      "$description": "The easing curve for the \"Spinner\" loading indicator rotation"
+    },
+    "name": "motion-spinner-easing-rotation",
+    "attributes": {},
+    "path": ["motion", "spinner", "easing", "rotation"],
+    "key": "{motion.spinner.easing.rotation}",
+    "value": [0, 0, 1, 1],
+    "type": "cubicBezier",
+    "description": "The easing curve for the \"Spinner\" loading indicator rotation"
+  }
+}