@primer/primitives 10.0.0-rc.6cee60d3 → 10.0.0-rc.74fb4d30

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

@@ -0,0 +1,205 @@
+{
+  "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,
+    "original": {
+      "$value": "0ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-0",
+    "attributes": {},
+    "path": ["base", "duration", "0"],
+    "value": "0ms",
+    "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"],
+    "value": "75ms",
+    "type": "duration"
+  },
+  "base-duration-200": {
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "200ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-200",
+    "attributes": {},
+    "path": ["base", "duration", "200"],
+    "value": "200ms",
+    "type": "duration"
+  },
+  "base-duration-300": {
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "300ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-300",
+    "attributes": {},
+    "path": ["base", "duration", "300"],
+    "value": "300ms",
+    "type": "duration"
+  },
+  "base-duration-400": {
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "400ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-400",
+    "attributes": {},
+    "path": ["base", "duration", "400"],
+    "value": "400ms",
+    "type": "duration"
+  },
+  "base-duration-500": {
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "500ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-500",
+    "attributes": {},
+    "path": ["base", "duration", "500"],
+    "value": "500ms",
+    "type": "duration"
+  },
+  "base-duration-600": {
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "600ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-600",
+    "attributes": {},
+    "path": ["base", "duration", "600"],
+    "value": "600ms",
+    "type": "duration"
+  },
+  "base-duration-700": {
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "700ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-700",
+    "attributes": {},
+    "path": ["base", "duration", "700"],
+    "value": "700ms",
+    "type": "duration"
+  },
+  "base-duration-800": {
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "800ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-800",
+    "attributes": {},
+    "path": ["base", "duration", "800"],
+    "value": "800ms",
+    "type": "duration"
+  },
+  "base-duration-900": {
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "900ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-900",
+    "attributes": {},
+    "path": ["base", "duration", "900"],
+    "value": "900ms",
+    "type": "duration"
+  },
+  "base-duration-1000": {
+    "filePath": "src/tokens/base/motion/timing.json5",
+    "isSource": true,
+    "original": {
+      "$value": "1000ms",
+      "$type": "duration"
+    },
+    "name": "base-duration-1000",
+    "attributes": {},
+    "path": ["base", "duration", "1000"],
+    "value": "1000ms",
+    "type": "duration"
+  }
+}

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

@@ -3,7 +3,7 @@
     "filePath": "src/tokens/functional/motion/loading.json5",
     "isSource": true,
     "original": {
-      "$value": "1000ms",
+      "$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."
     },
@@ -18,7 +18,7 @@
     "filePath": "src/tokens/functional/motion/patterns.json5",
     "isSource": true,
     "original": {
-      "$value": "1000ms",
+      "$value": "{base.duration.1000}",
       "$type": "duration",
       "$description": "The amount of time it takes the \"Spinner\" loading indicator to make a full 360deg rotation"
     },
@@ -29,11 +29,26 @@
     "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"],
+    "value": [0, 0, 1, 1],
+    "type": "cubicBezier",
+    "description": "The easing curve for the \"Spinner\" loading indicator rotation"
+  },
   "motion-skeletonLoader-shimmer-duration-scale": {
     "filePath": "src/tokens/functional/motion/patterns.json5",
     "isSource": true,
     "original": {
-      "$value": "1000ms",
+      "$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)"
     },

package/dist/docs/functional/themes/dark-colorblind.json

@@ -7113,6 +7113,35 @@
     "value": "#f0f6fc",
     "type": "color"
   },
+  "button-invisible-fgColor-active": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{control.fgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-invisible-fgColor-active",
+    "attributes": {},
+    "path": ["button", "invisible", "fgColor", "active"],
+    "value": "#f0f6fc",
+    "type": "color"
+  },
   "button-invisible-fgColor-disabled": {
     "$extensions": {
       "org.primer.figma": {

package/dist/docs/functional/themes/dark-dimmed.json

@@ -7109,6 +7109,35 @@
     "value": "#d1d7e0",
     "type": "color"
   },
+  "button-invisible-fgColor-active": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{control.fgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-invisible-fgColor-active",
+    "attributes": {},
+    "path": ["button", "invisible", "fgColor", "active"],
+    "value": "#d1d7e0",
+    "type": "color"
+  },
   "button-invisible-fgColor-disabled": {
     "$extensions": {
       "org.primer.figma": {

package/dist/docs/functional/themes/dark-high-contrast.json

@@ -5837,6 +5837,35 @@
     "value": "#ffffff",
     "type": "color"
   },
+  "button-invisible-fgColor-active": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{control.fgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-invisible-fgColor-active",
+    "attributes": {},
+    "path": ["button", "invisible", "fgColor", "active"],
+    "value": "#ffffff",
+    "type": "color"
+  },
   "button-invisible-fgColor-disabled": {
     "$extensions": {
       "org.primer.figma": {

package/dist/docs/functional/themes/dark-tritanopia.json

@@ -7205,6 +7205,35 @@
     "value": "#f0f6fc",
     "type": "color"
   },
+  "button-invisible-fgColor-active": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{control.fgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-invisible-fgColor-active",
+    "attributes": {},
+    "path": ["button", "invisible", "fgColor", "active"],
+    "value": "#f0f6fc",
+    "type": "color"
+  },
   "button-invisible-fgColor-disabled": {
     "$extensions": {
       "org.primer.figma": {

package/dist/docs/functional/themes/dark.json

@@ -7317,6 +7317,35 @@
     "value": "#f0f6fc",
     "type": "color"
   },
+  "button-invisible-fgColor-active": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{control.fgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-invisible-fgColor-active",
+    "attributes": {},
+    "path": ["button", "invisible", "fgColor", "active"],
+    "value": "#f0f6fc",
+    "type": "color"
+  },
   "button-invisible-fgColor-disabled": {
     "$extensions": {
       "org.primer.figma": {

package/dist/docs/functional/themes/light-colorblind.json

@@ -7123,6 +7123,35 @@
     "value": "#25292e",
     "type": "color"
   },
+  "button-invisible-fgColor-active": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{control.fgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-invisible-fgColor-active",
+    "attributes": {},
+    "path": ["button", "invisible", "fgColor", "active"],
+    "value": "#25292e",
+    "type": "color"
+  },
   "button-invisible-fgColor-disabled": {
     "$extensions": {
       "org.primer.figma": {

package/dist/docs/functional/themes/light-high-contrast.json

@@ -5873,6 +5873,35 @@
     "value": "#393f46",
     "type": "color"
   },
+  "button-invisible-fgColor-active": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{control.fgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-invisible-fgColor-active",
+    "attributes": {},
+    "path": ["button", "invisible", "fgColor", "active"],
+    "value": "#25292e",
+    "type": "color"
+  },
   "button-invisible-fgColor-disabled": {
     "$extensions": {
       "org.primer.figma": {

package/dist/docs/functional/themes/light-tritanopia.json

@@ -7139,6 +7139,35 @@
     "value": "#25292e",
     "type": "color"
   },
+  "button-invisible-fgColor-active": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{control.fgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-invisible-fgColor-active",
+    "attributes": {},
+    "path": ["button", "invisible", "fgColor", "active"],
+    "value": "#25292e",
+    "type": "color"
+  },
   "button-invisible-fgColor-disabled": {
     "$extensions": {
       "org.primer.figma": {

package/dist/docs/functional/themes/light.json

@@ -7283,6 +7283,35 @@
     "value": "#25292e",
     "type": "color"
   },
+  "button-invisible-fgColor-active": {
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/light/patterns-light.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{control.fgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "button-invisible-fgColor-active",
+    "attributes": {},
+    "path": ["button", "invisible", "fgColor", "active"],
+    "value": "#25292e",
+    "type": "color"
+  },
   "button-invisible-fgColor-disabled": {
     "$extensions": {
       "org.primer.figma": {

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

@@ -0,0 +1,17 @@
+{
+  "--base-easing-linear": [0, 0, 1, 1],
+  "--base-easing-easeIn": [0.7, 0.1, 0.75, 0.9],
+  "--base-easing-easeOut": [0.16, 1, 0.3, 1],
+  "--base-easing-easeInOut": [0.6, 0, 0.2, 1],
+  "--base-duration-0": "0ms",
+  "--base-duration-75": "75ms",
+  "--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"
+}

package/dist/fallbacks/functional/motion/motion.json

@@ -1,5 +1,6 @@
 {
   "--motion-loading-delay-default": "1000ms",
   "--motion-spinner-duration-rotation": "1000ms",
+  "--motion-spinner-easing-rotation": [0, 0, 1, 1],
   "--motion-skeletonLoader-shimmer-duration-scale": "1000ms"
 }