@primer/primitives 10.2.0 → 10.3.0-rc.22c9c6cf

package/dist/css/primitives.css

@@ -49,20 +49,20 @@
   --motion-spinner-easing-rotation: var(--base-easing-linear); /* The easing curve for the "Spinner" loading indicator rotation */
 }
 :root {
-  --borderRadius-default: 0.375rem;
   --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
   --borderRadius-large: 0.75rem;
   --borderRadius-medium: 0.375rem;
   --borderRadius-small: 0.1875rem;
-  --borderWidth-default: 0.0625rem;
   --borderWidth-thick: 0.125rem;
   --borderWidth-thicker: 0.25rem;
   --borderWidth-thin: 0.0625rem;
-  --boxShadow-thick: inset 0 0 0 0.125rem;
-  --boxShadow-thicker: inset 0 0 0 0.25rem;
-  --boxShadow-thin: inset 0 0 0 0.0625rem; /* Thin shadow for borders */
   --outline-focus-offset: -0.125rem;
   --outline-focus-width: 0.125rem;
+  --borderRadius-default: var(--borderRadius-medium);
+  --borderWidth-default: var(--borderWidth-thin);
+  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick);
+  --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker);
+  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /* Thin shadow for borders */
 }
 :root {
   --breakpoint-large: 63.25rem;
@@ -87,15 +87,28 @@
   }
 }
 :root {
+  --control-large-paddingBlock: 0.625rem;
+  --control-medium-paddingBlock: 0.375rem;
+  --control-xlarge-paddingBlock: 0.875rem;
+  --control-xsmall-paddingBlock: 0.125rem;
+  --overlay-height-large: 27rem;
+  --overlay-height-medium: 20rem;
+  --overlay-height-small: 16rem;
+  --overlay-height-xlarge: 37.5rem;
+  --overlay-offset: 0.25rem;
+  --overlay-width-large: 40rem;
+  --overlay-width-medium: 30rem;
+  --overlay-width-small: 20rem;
+  --overlay-width-xlarge: 60rem;
+  --overlay-width-xsmall: 12rem;
+  --spinner-strokeWidth-default: 0.125rem;
   --control-large-gap: 0.5rem;
   --control-large-lineBoxHeight: 1.25rem;
-  --control-large-paddingBlock: 0.625rem;
   --control-large-paddingInline-normal: 0.75rem;
   --control-large-paddingInline-spacious: 1rem;
   --control-large-size: 2.5rem;
   --control-medium-gap: 0.5rem;
   --control-medium-lineBoxHeight: 1.25rem;
-  --control-medium-paddingBlock: 0.375rem;
   --control-medium-paddingInline-condensed: 0.5rem;
   --control-medium-paddingInline-normal: 0.75rem;
   --control-medium-paddingInline-spacious: 1rem;
@@ -110,13 +123,11 @@
   --control-small-size: 1.75rem;
   --control-xlarge-gap: 0.5rem;
   --control-xlarge-lineBoxHeight: 1.25rem;
-  --control-xlarge-paddingBlock: 0.875rem;
   --control-xlarge-paddingInline-normal: 0.75rem;
   --control-xlarge-paddingInline-spacious: 1rem;
   --control-xlarge-size: 3rem;
   --control-xsmall-gap: 0.25rem;
   --control-xsmall-lineBoxHeight: 1.25rem;
-  --control-xsmall-paddingBlock: 0.125rem;
   --control-xsmall-paddingInline-condensed: 0.25rem;
   --control-xsmall-paddingInline-normal: 0.5rem;
   --control-xsmall-paddingInline-spacious: 0.75rem;
@@ -129,24 +140,13 @@
   --controlStack-small-gap-condensed: 0.5rem;
   --controlStack-small-gap-spacious: 1rem;
   --overlay-borderRadius: 0.375rem;
-  --overlay-height-large: 27rem;
-  --overlay-height-medium: 20rem;
-  --overlay-height-small: 16rem;
-  --overlay-height-xlarge: 37.5rem;
-  --overlay-offset: 0.25rem;
   --overlay-padding-condensed: 0.5rem;
   --overlay-padding-normal: 1rem;
   --overlay-paddingBlock-condensed: 0.25rem;
   --overlay-paddingBlock-normal: 0.75rem;
-  --overlay-width-large: 40rem;
-  --overlay-width-medium: 30rem;
-  --overlay-width-small: 20rem;
-  --overlay-width-xlarge: 60rem;
-  --overlay-width-xsmall: 12rem;
   --spinner-size-large: 4rem;
   --spinner-size-medium: 2rem;
   --spinner-size-small: 1rem;
-  --spinner-strokeWidth-default: 0.125rem;
   --stack-gap-condensed: 0.5rem;
   --stack-gap-normal: 1rem;
   --stack-gap-spacious: 1.5rem;

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

@@ -1,64 +1,4 @@
 {
-  "base-easing-linear": {
-    "filePath": "src/tokens/base/motion/easing.json5",
-    "isSource": true,
-    "original": {
-      "$value": [0, 0, 1, 1],
-      "$type": "cubicBezier",
-      "$description": "Ideal for non-movement properties, like opacity or background color."
-    },
-    "name": "base-easing-linear",
-    "attributes": {},
-    "path": ["base", "easing", "linear"],
-    "value": [0, 0, 1, 1],
-    "type": "cubicBezier",
-    "description": "Ideal for non-movement properties, like opacity or background color."
-  },
-  "base-easing-easeIn": {
-    "filePath": "src/tokens/base/motion/easing.json5",
-    "isSource": true,
-    "original": {
-      "$value": [0.7, 0.1, 0.75, 0.9],
-      "$type": "cubicBezier",
-      "$description": "Ideal for movement that starts on the page and ends off the page."
-    },
-    "name": "base-easing-easeIn",
-    "attributes": {},
-    "path": ["base", "easing", "easeIn"],
-    "value": [0.7, 0.1, 0.75, 0.9],
-    "type": "cubicBezier",
-    "description": "Ideal for movement that starts on the page and ends off the page."
-  },
-  "base-easing-easeOut": {
-    "filePath": "src/tokens/base/motion/easing.json5",
-    "isSource": true,
-    "original": {
-      "$value": [0.16, 1, 0.3, 1],
-      "$type": "cubicBezier",
-      "$description": "Ideal for movement that starts off the page and ends on the page."
-    },
-    "name": "base-easing-easeOut",
-    "attributes": {},
-    "path": ["base", "easing", "easeOut"],
-    "value": [0.16, 1, 0.3, 1],
-    "type": "cubicBezier",
-    "description": "Ideal for movement that starts off the page and ends on the page."
-  },
-  "base-easing-easeInOut": {
-    "filePath": "src/tokens/base/motion/easing.json5",
-    "isSource": true,
-    "original": {
-      "$value": [0.6, 0, 0.2, 1],
-      "$type": "cubicBezier",
-      "$description": "Ideal for movement that starts and ends on the page."
-    },
-    "name": "base-easing-easeInOut",
-    "attributes": {},
-    "path": ["base", "easing", "easeInOut"],
-    "value": [0.6, 0, 0.2, 1],
-    "type": "cubicBezier",
-    "description": "Ideal for movement that starts and ends on the page."
-  },
   "base-duration-0": {
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
@@ -69,20 +9,22 @@
     "name": "base-duration-0",
     "attributes": {},
     "path": ["base", "duration", "0"],
+    "key": "{base.duration.0}",
     "value": "0ms",
     "type": "duration"
   },
-  "base-duration-75": {
+  "base-duration-1000": {
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
     "original": {
-      "$value": "75ms",
+      "$value": "1000ms",
       "$type": "duration"
     },
-    "name": "base-duration-75",
+    "name": "base-duration-1000",
     "attributes": {},
-    "path": ["base", "duration", "75"],
-    "value": "75ms",
+    "path": ["base", "duration", "1000"],
+    "key": "{base.duration.1000}",
+    "value": "1000ms",
     "type": "duration"
   },
   "base-duration-200": {
@@ -95,6 +37,7 @@
     "name": "base-duration-200",
     "attributes": {},
     "path": ["base", "duration", "200"],
+    "key": "{base.duration.200}",
     "value": "200ms",
     "type": "duration"
   },
@@ -108,6 +51,7 @@
     "name": "base-duration-300",
     "attributes": {},
     "path": ["base", "duration", "300"],
+    "key": "{base.duration.300}",
     "value": "300ms",
     "type": "duration"
   },
@@ -121,6 +65,7 @@
     "name": "base-duration-400",
     "attributes": {},
     "path": ["base", "duration", "400"],
+    "key": "{base.duration.400}",
     "value": "400ms",
     "type": "duration"
   },
@@ -134,6 +79,7 @@
     "name": "base-duration-500",
     "attributes": {},
     "path": ["base", "duration", "500"],
+    "key": "{base.duration.500}",
     "value": "500ms",
     "type": "duration"
   },
@@ -147,6 +93,7 @@
     "name": "base-duration-600",
     "attributes": {},
     "path": ["base", "duration", "600"],
+    "key": "{base.duration.600}",
     "value": "600ms",
     "type": "duration"
   },
@@ -160,9 +107,24 @@
     "name": "base-duration-700",
     "attributes": {},
     "path": ["base", "duration", "700"],
+    "key": "{base.duration.700}",
     "value": "700ms",
     "type": "duration"
   },
+  "base-duration-75": {
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "75ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-75",
+    "attributes": {},
+    "path": ["base", "duration", "75"],
+    "key": "{base.duration.75}",
+    "value": "75ms",
+    "type": "duration"
+  },
   "base-duration-800": {
     "filePath": "src/tokens/base/motion/timing.json5",
     "isSource": true,
@@ -173,6 +135,7 @@
     "name": "base-duration-800",
     "attributes": {},
     "path": ["base", "duration", "800"],
+    "key": "{base.duration.800}",
     "value": "800ms",
     "type": "duration"
   },
@@ -186,20 +149,72 @@
     "name": "base-duration-900",
     "attributes": {},
     "path": ["base", "duration", "900"],
+    "key": "{base.duration.900}",
     "value": "900ms",
     "type": "duration"
   },
-  "base-duration-1000": {
-    "filePath": "src/tokens/base/motion/timing.json5",
+  "base-easing-easeIn": {
+    "filePath": "src/tokens/base/motion/easing.json5",
     "isSource": true,
     "original": {
-      "$value": "1000ms",
-      "$type": "duration"
+      "$value": [0.7, 0.1, 0.75, 0.9],
+      "$type": "cubicBezier",
+      "$description": "Ideal for movement that starts on the page and ends off the page."
     },
-    "name": "base-duration-1000",
+    "name": "base-easing-easeIn",
     "attributes": {},
-    "path": ["base", "duration", "1000"],
-    "value": "1000ms",
-    "type": "duration"
+    "path": ["base", "easing", "easeIn"],
+    "key": "{base.easing.easeIn}",
+    "value": [0.7, 0.1, 0.75, 0.9],
+    "type": "cubicBezier",
+    "description": "Ideal for movement that starts on the page and ends off the page."
+  },
+  "base-easing-easeInOut": {
+    "filePath": "src/tokens/base/motion/easing.json5",
+    "isSource": true,
+    "original": {
+      "$value": [0.6, 0, 0.2, 1],
+      "$type": "cubicBezier",
+      "$description": "Ideal for movement that starts and ends on the page."
+    },
+    "name": "base-easing-easeInOut",
+    "attributes": {},
+    "path": ["base", "easing", "easeInOut"],
+    "key": "{base.easing.easeInOut}",
+    "value": [0.6, 0, 0.2, 1],
+    "type": "cubicBezier",
+    "description": "Ideal for movement that starts and ends on the page."
+  },
+  "base-easing-easeOut": {
+    "filePath": "src/tokens/base/motion/easing.json5",
+    "isSource": true,
+    "original": {
+      "$value": [0.16, 1, 0.3, 1],
+      "$type": "cubicBezier",
+      "$description": "Ideal for movement that starts off the page and ends on the page."
+    },
+    "name": "base-easing-easeOut",
+    "attributes": {},
+    "path": ["base", "easing", "easeOut"],
+    "key": "{base.easing.easeOut}",
+    "value": [0.16, 1, 0.3, 1],
+    "type": "cubicBezier",
+    "description": "Ideal for movement that starts off the page and ends on the page."
+  },
+  "base-easing-linear": {
+    "filePath": "src/tokens/base/motion/easing.json5",
+    "isSource": true,
+    "original": {
+      "$value": [0, 0, 1, 1],
+      "$type": "cubicBezier",
+      "$description": "Ideal for non-movement properties, like opacity or background color."
+    },
+    "name": "base-easing-linear",
+    "attributes": {},
+    "path": ["base", "easing", "linear"],
+    "key": "{base.easing.linear}",
+    "value": [0, 0, 1, 1],
+    "type": "cubicBezier",
+    "description": "Ideal for non-movement properties, like opacity or background color."
   }
 }