@gitlab/ui 86.0.2 → 86.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.0.2",
+  "version": "86.2.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.103.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",

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/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;
@@ -237,6 +238,21 @@
   --data-viz-green-200: #b0d97b;
   --data-viz-green-100: #c6ed94;
   --data-viz-green-50: #ddfab7;
+  --gl-color-brand-pink-01g: #ffb9c9;
+  --gl-color-brand-gray-05: #2b2838;
+  --gl-color-brand-gray-04: #45424d;
+  --gl-color-brand-gray-03: #74717a;
+  --gl-color-brand-gray-02: #a2a1a6;
+  --gl-color-brand-gray-01: #d1d0d3;
+  --gl-color-brand-purple-02p: #7759c2;
+  --gl-color-brand-purple-01p: #a989f5;
+  --gl-color-brand-purple-01g: #ceb3ef;
+  --gl-color-brand-orange-03p: #e24329;
+  --gl-color-brand-orange-02p: #fc6d26;
+  --gl-color-brand-orange-01p: #fca326;
+  --gl-color-brand-orange-01g: #ffd1bf;
+  --gl-color-brand-charcoal: #171321;
+  --gl-color-brand-white: #fff;
   --gl-color-theme-light-red-950: #5c1105;
   --gl-color-theme-light-red-900: #751709;
   --gl-color-theme-light-red-800: #8b2212;

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;
@@ -237,6 +238,21 @@
   --data-viz-green-200: #275600;
   --data-viz-green-100: #1a4500;
   --data-viz-green-50: #133a03;
+  --gl-color-brand-pink-01g: #ffb9c9;
+  --gl-color-brand-gray-05: #2b2838;
+  --gl-color-brand-gray-04: #45424d;
+  --gl-color-brand-gray-03: #74717a;
+  --gl-color-brand-gray-02: #a2a1a6;
+  --gl-color-brand-gray-01: #d1d0d3;
+  --gl-color-brand-purple-02p: #7759c2;
+  --gl-color-brand-purple-01p: #a989f5;
+  --gl-color-brand-purple-01g: #ceb3ef;
+  --gl-color-brand-orange-03p: #e24329;
+  --gl-color-brand-orange-02p: #fc6d26;
+  --gl-color-brand-orange-01p: #fca326;
+  --gl-color-brand-orange-01g: #ffd1bf;
+  --gl-color-brand-charcoal: #171321;
+  --gl-color-brand-white: #fff;
   --gl-color-theme-light-red-950: #5c1105;
   --gl-color-theme-light-red-900: #751709;
   --gl-color-theme-light-red-800: #8b2212;

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

@@ -264,6 +264,21 @@ export const GL_COLOR_THEME_LIGHT_RED_700 = '#a02e1c';
 export const GL_COLOR_THEME_LIGHT_RED_800 = '#8b2212';
 export const GL_COLOR_THEME_LIGHT_RED_900 = '#751709';
 export const GL_COLOR_THEME_LIGHT_RED_950 = '#5c1105';
+export const GL_COLOR_BRAND_WHITE = '#fff';
+export const GL_COLOR_BRAND_CHARCOAL = '#171321';
+export const GL_COLOR_BRAND_ORANGE_01G = '#ffd1bf';
+export const GL_COLOR_BRAND_ORANGE_01P = '#fca326';
+export const GL_COLOR_BRAND_ORANGE_02P = '#fc6d26';
+export const GL_COLOR_BRAND_ORANGE_03P = '#e24329';
+export const GL_COLOR_BRAND_PURPLE_01G = '#ceb3ef';
+export const GL_COLOR_BRAND_PURPLE_01P = '#a989f5';
+export const GL_COLOR_BRAND_PURPLE_02P = '#7759c2';
+export const GL_COLOR_BRAND_GRAY_01 = '#d1d0d3';
+export const GL_COLOR_BRAND_GRAY_02 = '#a2a1a6';
+export const GL_COLOR_BRAND_GRAY_03 = '#74717a';
+export const GL_COLOR_BRAND_GRAY_04 = '#45424d';
+export const GL_COLOR_BRAND_GRAY_05 = '#2b2838';
+export const GL_COLOR_BRAND_PINK_01G = '#ffb9c9';
 export const DATA_VIZ_GREEN_50 = '#133a03';
 export const DATA_VIZ_GREEN_100 = '#1a4500';
 export const DATA_VIZ_GREEN_200 = '#275600';
@@ -551,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

@@ -264,6 +264,21 @@ export const GL_COLOR_THEME_LIGHT_RED_700 = '#a02e1c';
 export const GL_COLOR_THEME_LIGHT_RED_800 = '#8b2212';
 export const GL_COLOR_THEME_LIGHT_RED_900 = '#751709';
 export const GL_COLOR_THEME_LIGHT_RED_950 = '#5c1105';
+export const GL_COLOR_BRAND_WHITE = '#fff';
+export const GL_COLOR_BRAND_CHARCOAL = '#171321';
+export const GL_COLOR_BRAND_ORANGE_01G = '#ffd1bf';
+export const GL_COLOR_BRAND_ORANGE_01P = '#fca326';
+export const GL_COLOR_BRAND_ORANGE_02P = '#fc6d26';
+export const GL_COLOR_BRAND_ORANGE_03P = '#e24329';
+export const GL_COLOR_BRAND_PURPLE_01G = '#ceb3ef';
+export const GL_COLOR_BRAND_PURPLE_01P = '#a989f5';
+export const GL_COLOR_BRAND_PURPLE_02P = '#7759c2';
+export const GL_COLOR_BRAND_GRAY_01 = '#d1d0d3';
+export const GL_COLOR_BRAND_GRAY_02 = '#a2a1a6';
+export const GL_COLOR_BRAND_GRAY_03 = '#74717a';
+export const GL_COLOR_BRAND_GRAY_04 = '#45424d';
+export const GL_COLOR_BRAND_GRAY_05 = '#2b2838';
+export const GL_COLOR_BRAND_PINK_01G = '#ffb9c9';
 export const DATA_VIZ_GREEN_50 = '#ddfab7';
 export const DATA_VIZ_GREEN_100 = '#c6ed94';
 export const DATA_VIZ_GREEN_200 = '#b0d97b';
@@ -551,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.