@gitlab/ui 123.0.0 → 123.2.0

package/src/tokens/build/js/tokens.dark.js

@@ -264,6 +264,69 @@ export const GL_OPACITY_7 = '.7';
 export const GL_OPACITY_8 = '.8';
 export const GL_OPACITY_9 = '.9';
 export const GL_OPACITY_10 = '1';
+export const GL_SHADOW_SM = [
+  {
+    color: 'rgba(05, 05, 06, 0.4)',
+    offsetX: 0,
+    offsetY: 0,
+    blur: '2px',
+    spread: 0,
+  },
+  {
+    color: 'rgba(05, 05, 06, 0.4)',
+    offsetX: 0,
+    offsetY: '1px',
+    blur: '4px',
+    spread: 0,
+  },
+];
+export const GL_SHADOW_MD = [
+  {
+    color: 'rgba(05, 05, 06, 0.4)',
+    offsetX: 0,
+    offsetY: 0,
+    blur: '1px',
+    spread: 0,
+  },
+  {
+    color: 'rgba(05, 05, 06, 0.4)',
+    offsetX: 0,
+    offsetY: 0,
+    blur: '2px',
+    spread: 0,
+  },
+  {
+    color: 'rgba(05, 05, 06, 0.4)',
+    offsetX: 0,
+    offsetY: '2px',
+    blur: '8px',
+    spread: 0,
+  },
+];
+export const GL_SHADOW_LG = [
+  {
+    color: 'rgba(05, 05, 06, 0.4)',
+    offsetX: 0,
+    offsetY: 0,
+    blur: '2px',
+    spread: 0,
+  },
+  {
+    color: 'rgba(05, 05, 06, 0.4)',
+    offsetX: 0,
+    offsetY: 0,
+    blur: '2px',
+    spread: 0,
+  },
+  {
+    color: 'rgba(05, 05, 06, 0.4)',
+    offsetX: 0,
+    offsetY: '4px',
+    blur: '12px',
+    spread: 0,
+  },
+];
+export const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)';
 export const GL_SPACING_SCALE_0 = '0';
 export const GL_SPACING_SCALE_1 = '0.125rem';
 export const GL_SPACING_SCALE_2 = '0.25rem';
@@ -1086,7 +1149,6 @@ export const GL_ICON_COLOR_INFO = '#9dc7f1';
 export const GL_ICON_COLOR_WARNING = '#d99530';
 export const GL_ICON_COLOR_DANGER = '#f6806d';
 export const GL_ICON_COLOR_SUCCESS = '#52b87a';
-export const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)';
 export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR = '#3a383f';
 export const GL_STATUS_NEUTRAL_TEXT_COLOR = '#bfbfc3';
 export const GL_STATUS_NEUTRAL_ICON_COLOR = '#a4a3a8';

package/src/tokens/build/js/tokens.js

@@ -264,6 +264,69 @@ export const GL_OPACITY_7 = '.7';
 export const GL_OPACITY_8 = '.8';
 export const GL_OPACITY_9 = '.9';
 export const GL_OPACITY_10 = '1';
+export const GL_SHADOW_SM = [
+  {
+    color: 'rgba(05, 05, 06, 0.16)',
+    offsetX: 0,
+    offsetY: 0,
+    blur: '2px',
+    spread: 0,
+  },
+  {
+    color: 'rgba(05, 05, 06, 0.16)',
+    offsetX: 0,
+    offsetY: '1px',
+    blur: '4px',
+    spread: 0,
+  },
+];
+export const GL_SHADOW_MD = [
+  {
+    color: 'rgba(05, 05, 06, 0.16)',
+    offsetX: 0,
+    offsetY: 0,
+    blur: '1px',
+    spread: 0,
+  },
+  {
+    color: 'rgba(05, 05, 06, 0.16)',
+    offsetX: 0,
+    offsetY: 0,
+    blur: '2px',
+    spread: 0,
+  },
+  {
+    color: 'rgba(05, 05, 06, 0.16)',
+    offsetX: 0,
+    offsetY: '2px',
+    blur: '8px',
+    spread: 0,
+  },
+];
+export const GL_SHADOW_LG = [
+  {
+    color: 'rgba(05, 05, 06, 0.16)',
+    offsetX: 0,
+    offsetY: 0,
+    blur: '2px',
+    spread: 0,
+  },
+  {
+    color: 'rgba(05, 05, 06, 0.16)',
+    offsetX: 0,
+    offsetY: 0,
+    blur: '2px',
+    spread: 0,
+  },
+  {
+    color: 'rgba(05, 05, 06, 0.16)',
+    offsetX: 0,
+    offsetY: '4px',
+    blur: '12px',
+    spread: 0,
+  },
+];
+export const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.16)';
 export const GL_SPACING_SCALE_0 = '0';
 export const GL_SPACING_SCALE_1 = '0.125rem';
 export const GL_SPACING_SCALE_2 = '0.25rem';
@@ -1086,7 +1149,6 @@ export const GL_ICON_COLOR_INFO = '#2f5ca0';
 export const GL_ICON_COLOR_WARNING = '#995715';
 export const GL_ICON_COLOR_DANGER = '#c02f12';
 export const GL_ICON_COLOR_SUCCESS = '#2f7549';
-export const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.16)';
 export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR = '#dcdcde';
 export const GL_STATUS_NEUTRAL_TEXT_COLOR = '#4c4b51';
 export const GL_STATUS_NEUTRAL_ICON_COLOR = '#737278';

package/src/tokens/build/json/tokens.dark.json

@@ -6702,6 +6702,240 @@
       ]
     }
   },
+  "shadow": {
+    "sm": {
+      "key": "{shadow.sm}",
+      "$value": [
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": "1px",
+          "blur": "4px",
+          "spread": 0
+        }
+      ],
+      "$type": "shadow",
+      "$description": "Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/shadow.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": [
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": 0,
+            "blur": "2px",
+            "spread": 0
+          },
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": "1px",
+            "blur": "4px",
+            "spread": 0
+          }
+        ],
+        "$type": "shadow",
+        "$description": "Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{shadow.sm}"
+      },
+      "name": "SHADOW_SM",
+      "attributes": {},
+      "path": [
+        "shadow",
+        "sm"
+      ]
+    },
+    "md": {
+      "key": "{shadow.md}",
+      "$value": [
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "1px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": "2px",
+          "blur": "8px",
+          "spread": 0
+        }
+      ],
+      "$type": "shadow",
+      "$description": "Used for surfaces that need boundary definition and appear on hover. For example, popovers.",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/shadow.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": [
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": 0,
+            "blur": "1px",
+            "spread": 0
+          },
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": 0,
+            "blur": "2px",
+            "spread": 0
+          },
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": "2px",
+            "blur": "8px",
+            "spread": 0
+          }
+        ],
+        "$type": "shadow",
+        "$description": "Used for surfaces that need boundary definition and appear on hover. For example, popovers.",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{shadow.md}"
+      },
+      "name": "SHADOW_MD",
+      "attributes": {},
+      "path": [
+        "shadow",
+        "md"
+      ]
+    },
+    "lg": {
+      "key": "{shadow.lg}",
+      "$value": [
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": "4px",
+          "blur": "12px",
+          "spread": 0
+        }
+      ],
+      "$type": "shadow",
+      "$description": "Used for large surfaces that present additional context to the user.",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/shadow.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": [
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": 0,
+            "blur": "2px",
+            "spread": 0
+          },
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": 0,
+            "blur": "2px",
+            "spread": 0
+          },
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": "4px",
+            "blur": "12px",
+            "spread": 0
+          }
+        ],
+        "$type": "shadow",
+        "$description": "Used for large surfaces that present additional context to the user.",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{shadow.lg}"
+      },
+      "name": "SHADOW_LG",
+      "attributes": {},
+      "path": [
+        "shadow",
+        "lg"
+      ]
+    },
+    "color": {
+      "default": {
+        "key": "{shadow.color.default}",
+        "$value": "rgba(05, 05, 06, 0.4)",
+        "$type": "color",
+        "$description": "Used for the default shadow color.",
+        "$extensions": {
+          "com.figma.scope": [
+            "EFFECT_COLOR"
+          ]
+        },
+        "filePath": "src/tokens/semantic/shadow.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{color.alpha.dark.16}",
+            "dark": "{color.alpha.dark.40}"
+          },
+          "$type": "color",
+          "$description": "Used for the default shadow color.",
+          "$extensions": {
+            "com.figma.scope": [
+              "EFFECT_COLOR"
+            ]
+          },
+          "key": "{shadow.color.default}"
+        },
+        "name": "SHADOW_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "shadow",
+          "color",
+          "default"
+        ]
+      }
+    }
+  },
   "spacing-scale": {
     "0": {
       "key": "{spacing-scale.0}",
@@ -36057,44 +36291,6 @@
       }
     }
   },
-  "shadow": {
-    "color": {
-      "default": {
-        "key": "{shadow.color.default}",
-        "$value": "rgba(05, 05, 06, 0.4)",
-        "$type": "color",
-        "$description": "Used for the default shadow color.",
-        "$extensions": {
-          "com.figma.scope": [
-            "EFFECT_COLOR"
-          ]
-        },
-        "filePath": "src/tokens/semantic/shadow.tokens.json",
-        "isSource": true,
-        "original": {
-          "$value": {
-            "default": "{color.alpha.dark.16}",
-            "dark": "{color.alpha.dark.40}"
-          },
-          "$type": "color",
-          "$description": "Used for the default shadow color.",
-          "$extensions": {
-            "com.figma.scope": [
-              "EFFECT_COLOR"
-            ]
-          },
-          "key": "{shadow.color.default}"
-        },
-        "name": "SHADOW_COLOR_DEFAULT",
-        "attributes": {},
-        "path": [
-          "shadow",
-          "color",
-          "default"
-        ]
-      }
-    }
-  },
   "status": {
     "neutral": {
       "background": {