@gitlab/ui 122.14.0 → 123.1.0

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": {

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

@@ -6702,6 +6702,240 @@
       ]
     }
   },
+  "shadow": {
+    "sm": {
+      "key": "{shadow.sm}",
+      "$value": [
+        {
+          "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
+        }
+      ],
+      "$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.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
+        }
+      ],
+      "$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.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
+        }
+      ],
+      "$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.16)",
+        "$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.16)",
-        "$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": {

package/src/tokens/build/scss/_tokens.dark.scss

@@ -571,6 +571,7 @@ $gl-border-color-default: $gl-color-neutral-700; // Used for the default border
 $gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
 $gl-alert-info-border-top-color: $gl-color-blue-400; // Used for the border color of an info alert.
@@ -893,7 +894,6 @@ $gl-highlight-match-text-color: $gl-color-neutral-950; // Used for text within t
 $gl-highlight-target-background-color: $gl-color-blue-950; // Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action.
 $gl-highlight-target-border-color: $gl-color-blue-700; // Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states.
 $gl-icon-color-info: $gl-color-blue-200; // Used for an icon associated with information or help.
-$gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
 $gl-status-neutral-background-color: $gl-color-neutral-800; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
 $gl-status-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
 $gl-status-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
@@ -923,6 +923,9 @@ $gl-text-color-success: $gl-color-green-300; // Used for text indicating success
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
 $gl-border-radius-default: $gl-border-radius-md;
 $gl-border-color-section: $gl-background-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
+$gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
+$gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
+$gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of an info alert.

package/src/tokens/build/scss/_tokens.scss

@@ -571,6 +571,7 @@ $gl-border-color-default: $gl-color-neutral-100; // Used for the default border
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
 $gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
 $gl-alert-info-border-top-color: $gl-color-alpha-0; // Used for the border color of an info alert.
@@ -893,7 +894,6 @@ $gl-highlight-match-text-color: $gl-color-neutral-0; // Used for text within tem
 $gl-highlight-target-background-color: $gl-color-blue-50; // Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action.
 $gl-highlight-target-border-color: $gl-color-blue-200; // Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states.
 $gl-icon-color-info: $gl-color-blue-700; // Used for an icon associated with information or help.
-$gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
 $gl-status-neutral-background-color: $gl-color-neutral-100; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
 $gl-status-neutral-text-color: $gl-color-neutral-700; // Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
 $gl-status-neutral-icon-color: $gl-color-neutral-500; // Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
@@ -923,6 +923,9 @@ $gl-text-color-success: $gl-color-green-600; // Used for text indicating success
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
 $gl-border-radius-default: $gl-border-radius-md;
 $gl-border-color-section: $gl-border-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
+$gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
+$gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
+$gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-info-title-color: $gl-text-color-heading; // Used for the title color of an info alert.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -264,6 +264,10 @@ $gl-opacity-7: var(--gl-opacity-7);
 $gl-opacity-8: var(--gl-opacity-8);
 $gl-opacity-9: var(--gl-opacity-9);
 $gl-opacity-10: var(--gl-opacity-10);
+$gl-shadow-sm: var(--gl-shadow-sm);
+$gl-shadow-md: var(--gl-shadow-md);
+$gl-shadow-lg: var(--gl-shadow-lg);
+$gl-shadow-color-default: var(--gl-shadow-color-default);
 $gl-spacing-scale-0: var(--gl-spacing-scale-0);
 $gl-spacing-scale-1: var(--gl-spacing-scale-1);
 $gl-spacing-scale-2: var(--gl-spacing-scale-2);
@@ -1086,7 +1090,6 @@ $gl-icon-color-info: var(--gl-icon-color-info);
 $gl-icon-color-warning: var(--gl-icon-color-warning);
 $gl-icon-color-danger: var(--gl-icon-color-danger);
 $gl-icon-color-success: var(--gl-icon-color-success);
-$gl-shadow-color-default: var(--gl-shadow-color-default);
 $gl-status-neutral-background-color: var(--gl-status-neutral-background-color);
 $gl-status-neutral-text-color: var(--gl-status-neutral-text-color);
 $gl-status-neutral-icon-color: var(--gl-status-neutral-icon-color);

package/src/tokens/build/tailwind/tokens.cjs

@@ -421,6 +421,11 @@ const zindexes = {
   200: 'var(--gl-zindex-200, 200)',
   9999: 'var(--gl-zindex-9999, 9999)',
 };
+const boxShadow = {
+  sm: 'var(--gl-shadow-sm)',
+  md: 'var(--gl-shadow-md)',
+  lg: 'var(--gl-shadow-lg)',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -506,4 +511,5 @@ module.exports = {
   borderRadius,
   opacity,
   zIndex: zindexes,
+  boxShadow,
 };