@gitlab/ui 122.1.2 → 122.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "122.1.2",
+  "version": "122.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -104,7 +104,7 @@
     "@cypress/grep": "^4.1.1",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/svgs": "3.146.0",
-    "@jest/test-sequencer": "30.1.2",
+    "@jest/test-sequencer": "30.1.3",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
@@ -165,10 +165,10 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.91.0",
+    "sass": "^1.92.0",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
-    "start-server-and-test": "^2.0.13",
+    "start-server-and-test": "^2.1.0",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
     "style-dictionary": "^5.0.4",

package/src/components/base/new_dropdowns/dropdown.scss

@@ -33,7 +33,7 @@
     @apply gl-bg-dropdown;
     @apply gl-border-1 gl-border-solid gl-border-dropdown;
     @apply gl-rounded-lg;
-    @apply gl-shadow-md;
+    @apply gl-drop-shadow-md;
     top: 0;
     left: 0;
     min-width: $gl-new-dropdown-min-width;

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

@@ -5,7 +5,7 @@ $gl-popover-max-width: $grid-size * 35;
 .gl-popover {
   max-width: $gl-popover-max-width;
   @apply gl-border-none;
-  @apply gl-shadow-md;
+  @apply gl-drop-shadow-md;
   @apply gl-text-sm;
 
   &,

package/src/components/base/tooltip/tooltip.scss

@@ -1,9 +1,9 @@
 .gl-tooltip {
   @apply gl-text-sm;
   @apply gl-p-2;
-  
+
   .tooltip-inner {
-    @apply gl-shadow-md;
+    @apply gl-drop-shadow-md;
     @apply gl-rounded-base;
     @apply gl-leading-normal;
     @apply gl-font-normal;

package/tailwind.defaults.js

@@ -509,7 +509,8 @@ module.exports = {
       pill: '.75rem',
     },
     boxShadow: {
-      DEFAULT: '0 1px 4px 0 #0000004d',
+      DEFAULT:
+        '0 0 1px var(--gl-shadow-color-default, #05050629), 0 0 2px var(--gl-shadow-color-default, #05050629), 0 2px 8px var(--gl-shadow-color-default, #05050629)',
       none: 'none',
       sm: '0 0 2px var(--gl-shadow-color-default, #05050629), 0 1px 4px var(--gl-shadow-color-default, #05050629)',
       md: '0 0 1px var(--gl-shadow-color-default, #05050629), 0 0 2px var(--gl-shadow-color-default, #05050629), 0 2px 8px var(--gl-shadow-color-default, #05050629)',
@@ -540,6 +541,28 @@ module.exports = {
       'x0-y2-b4-s0': '0 2px 4px 0 #0000001a',
     },
     colors,
+    dropShadow: {
+      DEFAULT: [
+        '0 0 0.5px var(--gl-shadow-color-default, #05050629)',
+        '0 0.5px 1px var(--gl-shadow-color-default, #05050629)',
+        '0 1px 3px var(--gl-shadow-color-default, #05050629)',
+      ],
+      none: 'none',
+      sm: [
+        '0 0 1px var(--gl-shadow-color-default, #05050629)',
+        '0 0.5px 2px var(--gl-shadow-color-default, #05050629)',
+      ],
+      md: [
+        '0 0 0.5px var(--gl-shadow-color-default, #05050629)',
+        '0 0.5px 1px var(--gl-shadow-color-default, #05050629)',
+        '0 1px 3px var(--gl-shadow-color-default, #05050629)',
+      ],
+      lg: [
+        '0 0 1px var(--gl-shadow-color-default, #05050629)',
+        '0 0 2px var(--gl-shadow-color-default, #05050629)',
+        '0 2px 8px var(--gl-shadow-color-default, #05050629)',
+      ],
+    },
     fill,
     fontFamily: {
       regular:

package/tailwind_cqs_mqs_plugin.js

@@ -78,8 +78,8 @@ const tailwindCQsMQsPlugin = (buildCQs = false) =>
 
       matchVariant(
         ...buildVariantMatcher('@max', {
-          cqBuilder: (modifier, value) => `@container ${modifier ?? ''} (max-width: ${value})`,
-          mqBuilder: (value) => `@media (max-width: ${value})`,
+          cqBuilder: (modifier, value) => `@container ${modifier ?? ''} (width < ${value})`,
+          mqBuilder: (value) => `@media (width < ${value})`,
         }),
       );
     },