@gitlab/ui 86.1.0 → 86.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.1.0",
+  "version": "86.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -113,7 +113,7 @@
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.104.0",
+    "@gitlab/svgs": "3.105.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -146,7 +146,7 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.12.0",
+    "cypress": "13.13.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",
@@ -170,8 +170,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.45.0",
-    "playwright-core": "^1.45.0",
+    "playwright": "^1.45.1",
+    "playwright-core": "^1.45.1",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",

package/src/components/base/datepicker/datepicker.scss

@@ -44,7 +44,7 @@ $pd-week-color: $gray-500;
   @include gl-mt-3;
 
   &.is-bound {
-    @include gl-shadow;
+    @include gl-shadow-md;
   }
 
   .pika-lendar {

package/src/components/base/drawer/drawer.scss

@@ -1,8 +1,13 @@
 $gl-drawer-width: 400px;
 $gl-sidebar-width: 290px;
-$gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white);
+$gl-drawer-scrim-gradient: linear-gradient(
+  to bottom,
+  $transparent-rgba,
+  var(--drawer-variant-bg-color)
+);
 
 .gl-drawer {
+  background-color: var(--drawer-variant-bg-color);
   right: 0;
   @include gl-transition-medium;
   position: fixed;
@@ -16,14 +21,14 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
   @include gl-flex-direction-column;
 
   .gl-drawer-header-sticky {
-    @include gl-bg-white;
+    background-color: var(--drawer-variant-bg-color);
     top: 0;
     position: sticky;
   }
 }
 
 .gl-drawer-default {
-  @include gl-bg-white;
+  --drawer-variant-bg-color: var(--gl-background-color-default);
   @include media-breakpoint-up(md) {
     width: $gl-drawer-width;
   }
@@ -35,7 +40,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
 }
 
 .gl-drawer-sidebar {
-  @include gl-bg-gray-10;
+  --drawer-variant-bg-color: var(--gl-background-color-subtle);
   @include media-breakpoint-up(md) {
     width: $gl-sidebar-width;
   }
@@ -56,7 +61,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
 
 .gl-drawer-footer {
   @include gl-border-t-solid;
-  @include gl-border-t-gray-100;
+  border-top-color: var(--gl-border-color-default);
   @include gl-border-t-1;
   @include gl-p-5;
 }
@@ -76,18 +81,19 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
 }
 
 .gl-drawer-footer-sticky {
-  @include gl-bg-white;
+  background-color: var(--drawer-variant-bg-color);
   bottom: 0;
   position: sticky;
 }
 
 .gl-drawer-header {
   @include gl-border-b-solid;
-  @include gl-border-b-gray-100;
+  border-bottom-color: var(--gl-border-color-default);
   @include gl-border-b-1;
 }
 
 .gl-drawer-title {
+  color: var(--gl-text-color-heading);
   @include gl-display-flex;
   @include gl-align-items-center;
   @include gl-justify-content-space-between;
@@ -127,7 +133,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
 
 .gl-drawer-body > * {
   @include gl-border-b-solid;
-  @include gl-border-b-gray-100;
+  border-bottom-color: var(--gl-border-color-default);
   @include gl-border-b-1;
 
   &:last-child {

package/src/components/base/popover/popover.scss

@@ -7,7 +7,7 @@ $gl-popover-max-width: $grid-size * 35;
   @include gl-border-1;
   @include gl-border-solid;
   @include gl-border-none;
-  @include gl-shadow;
+  @include gl-shadow-md;
   @include gl-font-sm;
 
   &,

package/src/scss/utilities.scss

@@ -2355,27 +2355,27 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 }
 
 .gl-shadow-sm {
-  box-shadow: 0 1px 2px $t-gray-a-08
+  box-shadow: 0 1px 2px var(--gl-shadow-color-default)
 }
 
 .gl-shadow-sm\! {
-  box-shadow: 0 1px 2px $t-gray-a-08 !important
+  box-shadow: 0 1px 2px var(--gl-shadow-color-default) !important
 }
 
 .gl-shadow-md {
-  box-shadow: 0 2px 8px $t-gray-a-16, 0 0 2px $t-gray-a-16
+  box-shadow: 0 2px 8px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default)
 }
 
 .gl-shadow-md\! {
-  box-shadow: 0 2px 8px $t-gray-a-16, 0 0 2px $t-gray-a-16 !important
+  box-shadow: 0 2px 8px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default) !important
 }
 
 .gl-shadow-lg {
-  box-shadow: 0 4px 12px $t-gray-a-16, 0 0 4px $t-gray-a-16
+  box-shadow: 0 4px 12px var(--gl-shadow-color-default), 0 0 4px var(--gl-shadow-color-default)
 }
 
 .gl-shadow-lg\! {
-  box-shadow: 0 4px 12px $t-gray-a-16, 0 0 4px $t-gray-a-16 !important
+  box-shadow: 0 4px 12px var(--gl-shadow-color-default), 0 0 4px var(--gl-shadow-color-default) !important
 }
 .gl-clearfix {
   &::after {

package/src/scss/utility-mixins/box-shadow.scss

@@ -208,13 +208,13 @@
 */
 
 @mixin gl-shadow-sm {
-  box-shadow: 0 1px 2px $t-gray-a-08;
+  box-shadow: 0 1px 2px var(--gl-shadow-color-default);
 }
 
 @mixin gl-shadow-md {
-  box-shadow: 0 2px 8px $t-gray-a-16, 0 0 2px $t-gray-a-16;
+  box-shadow: 0 2px 8px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default);
 }
 
 @mixin gl-shadow-lg {
-  box-shadow: 0 4px 12px $t-gray-a-16, 0 0 4px $t-gray-a-16;
+  box-shadow: 0 4px 12px var(--gl-shadow-color-default), 0 0 4px var(--gl-shadow-color-default);
 }

package/src/tokens/build/css/tokens.css

@@ -7,6 +7,7 @@
   --gl-text-tertiary: #89888d; /* Use text.color.disabled instead */
   --gl-text-secondary: #737278; /* Use text.color.subtle instead */
   --gl-text-primary: #333238; /* Use text.color.default instead */
+  --gl-shadow-color-default: rgba(5, 5, 6, 0.16); /* Used for the default shadow color. */
   --gl-line-height-52: 3.25rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-42: 2.625rem;

package/src/tokens/build/css/tokens.dark.css

@@ -7,6 +7,7 @@
   --gl-text-tertiary: #737278; /* Use text.color.disabled instead */
   --gl-text-secondary: #89888d; /* Use text.color.subtle instead */
   --gl-text-primary: #ececef; /* Use text.color.default instead */
+  --gl-shadow-color-default: rgba(5, 5, 6, 0.24); /* Used for the default shadow color. */
   --gl-line-height-52: 3.25rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-42: 2.625rem;

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

@@ -566,6 +566,7 @@ export const GL_LINE_HEIGHT_36 = '2.25rem';
 export const GL_LINE_HEIGHT_42 = '2.625rem';
 export const GL_LINE_HEIGHT_44 = '2.75rem';
 export const GL_LINE_HEIGHT_52 = '3.25rem';
+export const GL_SHADOW_COLOR_DEFAULT = 'rgba(5, 5, 6, 0.24)'; // Used for the default shadow color.
 export const GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for the background of a subtle neutral status item when static or the default state when linked.
 export const GL_STATUS_MUTED_BACKGROUND_COLOR_ACTIVE = '#434248'; // Used for the background of a subtle neutral status item in the active state.
 export const GL_STATUS_MUTED_BORDER_COLOR_HOVER = '#535158'; // Used for the border of a subtle neutral status item in the hover state.

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

@@ -566,6 +566,7 @@ export const GL_LINE_HEIGHT_36 = '2.25rem';
 export const GL_LINE_HEIGHT_42 = '2.625rem';
 export const GL_LINE_HEIGHT_44 = '2.75rem';
 export const GL_LINE_HEIGHT_52 = '3.25rem';
+export const GL_SHADOW_COLOR_DEFAULT = 'rgba(5, 5, 6, 0.16)'; // Used for the default shadow color.
 export const GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the background of a subtle neutral status item when static or the default state when linked.
 export const GL_STATUS_MUTED_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of a subtle neutral status item in the active state.
 export const GL_STATUS_MUTED_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a subtle neutral status item in the hover state.

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

@@ -12432,6 +12432,32 @@
       ]
     }
   },
+  "shadow": {
+    "color": {
+      "default": {
+        "value": "rgba(5, 5, 6, 0.24)",
+        "$type": "color",
+        "comment": "Used for the default shadow color.",
+        "filePath": "src/tokens/shadow.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "rgba(5, 5, 6, 0.16)",
+            "dark": "rgba(5, 5, 6, 0.24)"
+          },
+          "$type": "color",
+          "comment": "Used for the default shadow color."
+        },
+        "name": "SHADOW_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "shadow",
+          "color",
+          "default"
+        ]
+      }
+    }
+  },
   "status": {
     "muted": {
       "background": {

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

@@ -12432,6 +12432,32 @@
       ]
     }
   },
+  "shadow": {
+    "color": {
+      "default": {
+        "value": "rgba(5, 5, 6, 0.16)",
+        "$type": "color",
+        "comment": "Used for the default shadow color.",
+        "filePath": "src/tokens/shadow.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "rgba(5, 5, 6, 0.16)",
+            "dark": "rgba(5, 5, 6, 0.24)"
+          },
+          "$type": "color",
+          "comment": "Used for the default shadow color."
+        },
+        "name": "SHADOW_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "shadow",
+          "color",
+          "default"
+        ]
+      }
+    }
+  },
   "status": {
     "muted": {
       "background": {

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

@@ -5,6 +5,7 @@
 $gl-text-tertiary: #737278; // Use text.color.disabled instead
 $gl-text-secondary: #89888d; // Use text.color.subtle instead
 $gl-text-primary: #ececef; // Use text.color.default instead
+$gl-shadow-color-default: rgba(5, 5, 6, 0.24); // Used for the default shadow color.
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;

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

@@ -5,6 +5,7 @@
 $gl-text-tertiary: #89888d; // Use text.color.disabled instead
 $gl-text-secondary: #737278; // Use text.color.subtle instead
 $gl-text-primary: #333238; // Use text.color.default instead
+$gl-shadow-color-default: rgba(5, 5, 6, 0.16); // Used for the default shadow color.
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;

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

@@ -566,6 +566,7 @@ $gl-line-height-36: var(--gl-line-height-36);
 $gl-line-height-42: var(--gl-line-height-42);
 $gl-line-height-44: var(--gl-line-height-44);
 $gl-line-height-52: var(--gl-line-height-52);
+$gl-shadow-color-default: var(--gl-shadow-color-default);
 $gl-status-muted-background-color-default: var(--gl-status-muted-background-color-default);
 $gl-status-muted-background-color-active: var(--gl-status-muted-background-color-active);
 $gl-status-muted-border-color-hover: var(--gl-status-muted-border-color-hover);

package/src/tokens/shadow.tokens.json

@@ -0,0 +1,14 @@
+{
+  "shadow": {
+    "color": {
+      "default": {
+        "$value": {
+          "default": "rgba(5, 5, 6, 0.16)",
+          "dark": "rgba(5, 5, 6, 0.24)"
+        },
+        "$type": "color",
+        "$description": "Used for the default shadow color."
+      }
+    }
+  }
+}

package/tailwind.defaults.js

@@ -394,9 +394,9 @@ module.exports = {
     boxShadow: {
       DEFAULT: '0 1px 4px 0 #0000004d',
       none: 'none',
-      sm: '0 1px 2px var(--t-gray-a-08, #1f1e2414)',
-      md: '0 2px 8px var(--t-gray-a-16, #1f1e2429), 0 0 2px var(--t-gray-a-16, #1f1e2429)',
-      lg: '0 4px 12px var(--t-gray-a-16, #1f1e2429), 0 0 4px var(--t-gray-a-16, #1f1e2429)',
+      sm: '0 1px 2px var(--gl-shadow-color-default, #05050629)',
+      md: '0 2px 8px var(--gl-shadow-color-default, #05050629), 0 0 2px var(--gl-shadow-color-default, #05050629)',
+      lg: '0 4px 12px var(--gl-shadow-color-default, #05050629), 0 0 4px var(--gl-shadow-color-default, #05050629)',
       'inner-1-blue-500': 'inset 0 0 0 1px var(--blue-500, #1f75cb)',
       'inner-1-gray-100': 'inset 0 0 0 1px var(--gray-100, #dcdcde)',
       'inner-1-gray-200': 'inset 0 0 0 1px var(--gray-200, #bfbfc3)',