@gitlab/ui 123.0.0 → 123.1.0

package/dist/tokens/docs/tokens-tailwind-docs.dark.json

@@ -44512,5 +44512,206 @@
       ],
       "cssWithValue": "var(--gl-zindex-9999, 9999)"
     }
+  },
+  "boxShadow": {
+    "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"
+      ],
+      "cssWithValue": "var(--gl-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"
+      ],
+      "cssWithValue": "var(--gl-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"
+      ],
+      "cssWithValue": "var(--gl-shadow-lg)"
+    }
   }
 }

package/dist/tokens/docs/tokens-tailwind-docs.json

@@ -44512,5 +44512,206 @@
       ],
       "cssWithValue": "var(--gl-zindex-9999, 9999)"
     }
+  },
+  "boxShadow": {
+    "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"
+      ],
+      "cssWithValue": "var(--gl-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"
+      ],
+      "cssWithValue": "var(--gl-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"
+      ],
+      "cssWithValue": "var(--gl-shadow-lg)"
+    }
   }
 }

package/dist/tokens/figma/constants.tokens.json

@@ -1876,6 +1876,91 @@
       }
     }
   },
+  "shadow": {
+    "sm": {
+      "$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": []
+      }
+    },
+    "md": {
+      "$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": []
+      }
+    },
+    "lg": {
+      "$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": []
+      }
+    }
+  },
   "spacing-scale": {
     "0": {
       "$value": "0",

package/dist/tokens/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";
@@ -1128,7 +1191,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/dist/tokens/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";
@@ -1117,7 +1180,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";