@primer/primitives 10.3.4 → 10.4.0-rc.06084fce

package/src/tokens/functional/shadow/{light.json5 → shadow.json5}

@@ -1,123 +1,4 @@
 {
-  avatar: {
-    shadow: {
-      $value: [
-        {
-          color: '{base.color.neutral.0}',
-          alpha: 0.8,
-          offsetX: '0px',
-          offsetY: '0px',
-          blur: '0px',
-          spread: '2px',
-        },
-      ],
-      $type: 'shadow',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'mode',
-          group: 'component shadow',
-        },
-      },
-    },
-  },
-  button: {
-    default: {
-      shadow: {
-        resting: {
-          $value: [
-            {
-              color: '{base.color.neutral.13}',
-              alpha: 0.04,
-              offsetX: '0px',
-              offsetY: '1px',
-              blur: '0px',
-              spread: '0px',
-              inset: false,
-            },
-          ],
-          $type: 'shadow',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component shadow',
-            },
-          },
-        },
-      },
-    },
-    primary: {
-      shadow: {
-        selected: {
-          $value: [
-            {
-              color: '{base.color.green.9}',
-              alpha: 0.3,
-              offsetX: '0px',
-              offsetY: '1px',
-              blur: '0px',
-              spread: '0px',
-              inset: true,
-            },
-          ],
-          $type: 'shadow',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component shadow',
-            },
-          },
-        },
-      },
-    },
-    outline: {
-      shadow: {
-        selected: {
-          $value: [
-            {
-              color: '{base.color.blue.9}',
-              alpha: 0.2,
-              offsetX: '0px',
-              offsetY: '1px',
-              blur: '0px',
-              spread: '0px',
-              inset: true,
-            },
-          ],
-          $type: 'shadow',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component shadow',
-            },
-          },
-        },
-      },
-    },
-    danger: {
-      shadow: {
-        selected: {
-          $value: [
-            {
-              color: '{base.color.red.9}',
-              alpha: 0.2,
-              offsetX: '0px',
-              offsetY: '1px',
-              blur: '0px',
-              spread: '0px',
-              inset: true,
-            },
-          ],
-          $type: 'shadow',
-          $extensions: {
-            'org.primer.figma': {
-              collection: 'mode',
-              group: 'component shadow',
-            },
-          },
-        },
-      },
-    },
-  },
   shadow: {
     inset: {
       $value: {
@@ -135,6 +16,19 @@
           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: {
@@ -154,6 +48,19 @@
             collection: 'mode',
             group: 'shadow',
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: {
+                color: '{base.color.neutral.0}',
+                alpha: 0.8,
+                offsetX: '0px',
+                offsetY: '1px',
+                blur: '0px',
+                spread: '0px',
+                inset: false,
+              },
+            },
+          },
         },
       },
       small: {
@@ -174,6 +81,21 @@
             collection: 'mode',
             group: 'shadow',
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: [
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.4,
+                  offsetX: '0px',
+                  offsetY: '1px',
+                  blur: '0px',
+                  spread: '0px',
+                  inset: false,
+                },
+              ],
+            },
+          },
         },
       },
       medium: {
@@ -193,6 +115,20 @@
             collection: 'mode',
             group: 'shadow',
           },
+          'org.primer.overrides': {
+            dark: {
+              $value: [
+                {
+                  color: '{base.color.neutral.0}',
+                  alpha: 0.8,
+                  offsetX: '0px',
+                  offsetY: '3px',
+                  blur: '6px',
+                  spread: '0px',
+                },
+              ],
+            },
+          },
         },
       },
     },
@@ -230,6 +166,36 @@
             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: {
@@ -281,6 +247,52 @@
             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: {
@@ -308,6 +320,28 @@
             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: {
@@ -335,6 +369,28 @@
             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: {
@@ -357,7 +413,33 @@
           },
         ],
         $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"
-}