@primer/primitives 10.4.0-rc.fd8ac4c9 → 10.5.0-rc.2284dc61

package/src/tokens/functional/color/selection.json5

@@ -0,0 +1,22 @@
+{
+  selection: {
+    bgColor: {
+      $value: '{bgColor.accent.emphasis}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'component',
+          scopes: ['bgColor'],
+        },
+        'org.primer.overrides': {
+          dark: {
+            $value: '{bgColor.accent.emphasis}',
+            alpha: 0.7,
+          },
+        },
+      },
+      alpha: 0.2,
+    },
+  },
+}

package/src/tokens/functional/shadow/shadow.json5

@@ -0,0 +1,478 @@
+{
+  shadow: {
+    inset: {
+      $value: {
+        color: '{base.color.neutral.13}',
+        alpha: 0.04,
+        offsetX: '0px',
+        offsetY: '1px',
+        blur: '0px',
+        spread: '0px',
+        inset: true,
+      },
+      $type: 'shadow',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          group: 'shadow',
+        },
+        'org.primer.overrides': {
+          dark: {
+            $value: {
+              color: '{base.color.neutral.0}',
+              alpha: 0.24,
+              offsetX: '0px',
+              offsetY: '1px',
+              blur: '0px',
+              spread: '0px',
+              inset: true,
+            },
+          },
+        },
+      },
+    },
+    resting: {
+      xsmall: {
+        $value: {
+          color: '{base.color.neutral.13}',
+          alpha: 0.06,
+          offsetX: '0px',
+          offsetY: '1px',
+          blur: '1px',
+          spread: '0px',
+          inset: false,
+        },
+        $type: 'shadow',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'shadow',
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: {
+                color: '{base.color.neutral.0}',
+                alpha: 0.8,
+                offsetX: '0px',
+                offsetY: '1px',
+                blur: '1px',
+                spread: '0px',
+                inset: false,
+              },
+            },
+          },
+        },
+      },
+      small: {
+        $value: [
+          {
+            color: '{base.color.neutral.13}',
+            alpha: 0.06,
+            offsetX: '0px',
+            offsetY: '1px',
+            blur: '1px',
+            spread: '0px',
+            inset: false,
+          },
+          {
+            color: '{base.color.neutral.13}',
+            alpha: 0.06,
+            offsetX: '0px',
+            offsetY: '1px',
+            blur: '3px',
+            spread: '0px',
+            inset: false,
+          },
+        ],
+        $type: 'shadow',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'shadow',
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: [
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.6,
+                  offsetX: '0px',
+                  offsetY: '1px',
+                  blur: '1px',
+                  spread: '0px',
+                  inset: false,
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.6,
+                  offsetX: '0px',
+                  offsetY: '1px',
+                  blur: '3px',
+                  spread: '0px',
+                  inset: false,
+                },
+              ],
+            },
+          },
+        },
+      },
+      medium: {
+        $value: [
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.1,
+            offsetX: '0px',
+            offsetY: '1px',
+            blur: '1px',
+            spread: '0px',
+          },
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.12,
+            offsetX: '0px',
+            offsetY: '3px',
+            blur: '6px',
+            spread: '0px',
+          },
+        ],
+        $type: 'shadow',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'shadow',
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: [
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.4,
+                  offsetX: '0px',
+                  offsetY: '1px',
+                  blur: '1px',
+                  spread: '0px',
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.8,
+                  offsetX: '0px',
+                  offsetY: '3px',
+                  blur: '6px',
+                  spread: '0px',
+                },
+              ],
+            },
+          },
+        },
+      },
+    },
+    floating: {
+      small: {
+        $value: [
+          {
+            color: '{overlay.borderColor}',
+            alpha: 0.5,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.04,
+            offsetX: '0px',
+            offsetY: '6px',
+            blur: '12px',
+            spread: '-3px',
+          },
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.12,
+            offsetX: '0px',
+            offsetY: '6px',
+            blur: '18px',
+            spread: '0px',
+          },
+        ],
+        $type: 'shadow',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'shadow',
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  offsetX: '0px',
+                  offsetY: '0px',
+                  blur: '0px',
+                  spread: '1px',
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.4,
+                  offsetX: '0px',
+                  offsetY: '6px',
+                  blur: '12px',
+                  spread: '-3px',
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.4,
+                  offsetX: '0px',
+                  offsetY: '6px',
+                  blur: '18px',
+                  spread: '0px',
+                },
+              ],
+            },
+          },
+        },
+      },
+      medium: {
+        $value: [
+          {
+            color: '{overlay.borderColor}',
+            alpha: 0,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.08,
+            offsetX: '0px',
+            offsetY: '8px',
+            blur: '16px',
+            spread: '-4px',
+          },
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.08,
+            offsetX: '0px',
+            offsetY: '4px',
+            blur: '32px',
+            spread: '-4px',
+          },
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.08,
+            offsetX: '0px',
+            offsetY: '24px',
+            blur: '48px',
+            spread: '-12px',
+          },
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.08,
+            offsetX: '0px',
+            offsetY: '48px',
+            blur: '96px',
+            spread: '-24px',
+          },
+        ],
+        $type: 'shadow',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'shadow',
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  offsetX: '0px',
+                  offsetY: '0px',
+                  blur: '0px',
+                  spread: '1px',
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.4,
+                  offsetX: '0px',
+                  offsetY: '8px',
+                  blur: '16px',
+                  spread: '-4px',
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.4,
+                  offsetX: '0px',
+                  offsetY: '4px',
+                  blur: '32px',
+                  spread: '-4px',
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.4,
+                  offsetX: '0px',
+                  offsetY: '24px',
+                  blur: '48px',
+                  spread: '-12px',
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.4,
+                  offsetX: '0px',
+                  offsetY: '48px',
+                  blur: '96px',
+                  spread: '-24px',
+                },
+              ],
+            },
+          },
+        },
+      },
+      large: {
+        $value: [
+          {
+            color: '{overlay.borderColor}',
+            alpha: 0,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.24,
+            offsetX: '0px',
+            offsetY: '40px',
+            blur: '80px',
+            spread: '0px',
+          },
+        ],
+        $type: 'shadow',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'shadow',
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  offsetX: '0px',
+                  offsetY: '0px',
+                  blur: '0px',
+                  spread: '1px',
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 1,
+                  offsetX: '0px',
+                  offsetY: '24px',
+                  blur: '48px',
+                  spread: '0px',
+                },
+              ],
+            },
+          },
+        },
+      },
+      xlarge: {
+        $value: [
+          {
+            color: '{overlay.borderColor}',
+            alpha: 0,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.32,
+            offsetX: '0px',
+            offsetY: '56px',
+            blur: '112px',
+            spread: '0px',
+          },
+        ],
+        $type: 'shadow',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'mode',
+            group: 'shadow',
+          },
+          'org.primer.overrides': {
+            dark: {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  offsetX: '0px',
+                  offsetY: '0px',
+                  blur: '0px',
+                  spread: '1px',
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 1,
+                  offsetX: '0px',
+                  offsetY: '32px',
+                  blur: '64px',
+                  spread: '0px',
+                },
+              ],
+            },
+          },
+        },
+      },
+      legacy: {
+        $value: [
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.04,
+            offsetX: '0px',
+            offsetY: '6px',
+            blur: '12px',
+            spread: '-3px',
+          },
+          {
+            color: '{base.color.neutral.12}',
+            alpha: 0.12,
+            offsetX: '0px',
+            offsetY: '6px',
+            blur: '18px',
+            spread: '0px',
+          },
+        ],
+        $type: 'shadow',
+        $extensions: {
+          'org.primer.figma': {},
+          'org.primer.overrides': {
+            dark: {
+              $value: [
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.4,
+                  offsetX: '0px',
+                  offsetY: '6px',
+                  blur: '12px',
+                  spread: '-3px',
+                },
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.4,
+                  offsetX: '0px',
+                  offsetY: '6px',
+                  blur: '18px',
+                  spread: '0px',
+                },
+              ],
+            },
+          },
+        },
+      },
+    },
+  },
+}

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

@@ -1,6 +0,0 @@
-: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/docs/functional/motion/motion.json

@@ -1,66 +0,0 @@
-{
-  "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"
-  }
-}

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

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