@gitlab/ui 113.2.4 → 113.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "113.2.4",
+  "version": "113.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/button/button.scss

@@ -431,7 +431,8 @@
   &.btn-confirm-tertiary,
   &.btn-danger-tertiary {
     @media (forced-colors: active) {
-      color: $black;
+      /* stylelint-disable-next-line color-named */
+      color: black; // stylelint-disable-line scale-unlimited/declaration-strict-value
       border: 0;
     }
   }

package/src/components/base/markdown/markdown.scss

@@ -1,7 +1,7 @@
 .gl-markdown {
   @apply gl-text-lg;
   @apply gl-leading-24;
-  color: $gl-text-color;
+  @apply gl-text-default;
   @apply gl-font-regular;
   @apply gl-font-normal;
 
@@ -72,12 +72,12 @@
   }
 
   blockquote {
-    @apply gl-text-gray-700;
+    @apply gl-text-subtle;
     @apply gl-py-3;
     @apply gl-pl-6;
     @apply gl-my-3;
     @apply gl-mx-0;
-    box-shadow: inset $gl-border-size-4 0 0 0 $gray-100;
+    box-shadow: inset $gl-border-size-4 0 0 0 var(--gl-border-color-strong);
   }
 
   .idiff {
@@ -87,17 +87,17 @@
   }
 
   .deletion {
-    @apply gl-bg-red-100;
+    @apply gl-bg-status-danger;
   }
 
   .addition {
-    @apply gl-bg-green-100;
+    @apply gl-bg-status-success;
   }
 
   code {
     @apply gl-rounded-base;
-    @apply gl-bg-gray-50;
-    @apply gl-text-gray-950;
+    @apply gl-bg-strong;
+    @apply gl-text-strong;
     @apply gl-px-2;
     @apply gl-py-1;
   }
@@ -106,14 +106,14 @@
     @apply gl-rounded-base;
     @apply gl-py-3;
     @apply gl-px-4;
-    box-shadow: inset 0 0 0 $gl-border-size-1 $gray-100;
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-border-color-default);
     @apply gl-my-7;
     @apply gl-overflow-auto;
 
     code {
-      @apply gl-bg-white;
+      @apply gl-bg-default;
       @apply gl-rounded-none;
-      @apply gl-text-gray-900;
+      @apply gl-text-strong;
       @apply gl-p-0;
     }
   }
@@ -146,23 +146,23 @@
     td {
       @apply gl-px-3;
       @apply gl-py-4;
-      box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
+      box-shadow: inset 0 -#{$gl-border-size-1} 0 0 var(--gl-border-color-default);
       @apply gl-align-top;
     }
 
     th {
       box-shadow:
-        inset 0 #{$gl-border-size-1} 0 0 $gray-100,
-        inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
+        inset 0 #{$gl-border-size-1} 0 0 var(--gl-border-color-default),
+        inset 0 -#{$gl-border-size-1} 0 0 var(--gl-border-color-default);
       @apply gl-font-bold;
     }
 
     thead {
-      @apply gl-bg-gray-50;
+      @apply gl-bg-strong;
     }
 
     tr:nth-child(even) {
-      @apply gl-bg-gray-10;
+      @apply gl-bg-subtle;
     }
   }
 }

package/src/components/charts/legend/legend.scss

@@ -17,7 +17,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 .gl-legend-tabular.gl-legend-b-fade,
 .gl-chart-h-auto .gl-legend-inline.gl-legend-b-fade {
   &::after {
-    background-image: linear-gradient(to bottom, $transparent-rgba, var(--white, #{$white}));
+    background-image: linear-gradient(to bottom, $transparent-rgba, var(--gl-background-color-default));
     bottom: 0;
     content: '';
     @apply gl-block;
@@ -80,7 +80,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     @apply gl-flex;
 
     &:nth-child(odd) {
-      background-color: var(--gray-50, #{$gray-50});
+      @apply gl-bg-strong;
     }
   }
 

package/src/components/charts/single_stat/single_stat.scss

@@ -2,7 +2,7 @@
   @apply gl-leading-1;
 
   &:hover[tabindex='0'] {
-    @apply gl-bg-gray-50;
+    @apply gl-bg-strong;
     @apply gl-rounded-base;
   }
 

package/src/components/shared_components/clear_icon_button/clear_icon_button.scss

@@ -2,7 +2,6 @@
   @apply gl-bg-transparent;
   @apply gl-border-none;
   @apply gl-cursor-pointer;
-  @apply gl-text-gray-500;
 
   &:focus {
     @apply gl-focus;

package/src/scss/storybook.scss

@@ -21,8 +21,6 @@ $feature-button-border: true;
 @import 'typography';
 @import 'components';
 
-@import 'storybook_dark_mode';
-
 /**
  * Custom padding for docs pages. This improves the integration in Pajamas pages.
  */

package/src/scss/typescale/_index.scss

@@ -1,7 +1,7 @@
 @mixin gl-typescale-ui($selector: 'body') {
   #{$selector} {
     @apply gl-text-base;
-    @apply gl-text-gray-900;
+    @apply gl-text-default;
     @apply gl-font-regular;
     @apply gl-font-normal;
     @apply gl-leading-normal;
@@ -60,7 +60,7 @@
   .gl-h6 {
     @apply gl-text-base;
     @apply gl-leading-20;
-    @apply gl-text-gray-700;
+    @apply gl-text-subtle;
   }
 
   p,
@@ -93,7 +93,7 @@
   }
 
   blockquote {
-    @apply gl-text-gray-700;
+    @apply gl-text-subtle;
     @apply gl-py-3;
     @apply gl-pl-6;
     @apply gl-my-3;

package/src/scss/variables.scss

@@ -59,11 +59,12 @@ $white-contrast: #fff !default;
 $white-normal: #f0f0f0 !default;
 $white-dark: #eaeaea !default;
 $white-transparent: rgba(255, 255, 255, 0.8) !default;
+/* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */
 $transparent-rgba: rgba($white, 0);
 
 // Text
-$gl-text-color: $gray-900 !default;
-$gl-text-color-secondary: $gray-500 !default;
+$gl-text-color: $gl-text-color-default !default;
+$gl-text-color-secondary: $gl-text-color-subtle !default;
 
 $gl-font-weight-light: 300;
 $gl-font-weight-normal: 400;
@@ -186,7 +187,7 @@ $gl-font-size-compact-markdown-h1-md: px-to-rem(20px);
 // media xl (min-width: 1200px)
 $gl-font-size-compact-markdown-h1-xl: px-to-rem(23px);
 
-$border-color: $gray-100 !default;
+$border-color: $gl-border-color-default !default;
 
 // use px for borders rather than rem
 // we don't want borders to scale with font size
@@ -229,8 +230,6 @@ $focus-ring: 0 0 0 $outline-offset var(--gl-focus-ring-inner-color),
   0 0 0 #{$outline-offset + $outline-width} var(--gl-focus-ring-outer-color);
 $focus-ring-inset: inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
   inset 0 0 0 $outline-offset var(--gl-focus-ring-inner-color);
-$focus-ring-dark: 0 0 0 $outline-offset rgba($black, 0.6),
-  0 0 0 #{$outline-offset + $outline-width} $blue-300;
 $focus-ring-outline: $outline-width solid var(--gl-focus-ring-outer-color);
 
 // Toasts
@@ -269,8 +268,8 @@ $gl-modal-medium-width: px-to-rem(768px);
 $gl-modal-large-width: px-to-rem(990px);
 
 // Modal bootstrap variables
-$modal-header-border-color: $gray-200;
-$modal-footer-border-color: $gray-200;
+$modal-header-border-color: $gl-border-color-strong;
+$modal-footer-border-color: $gl-border-color-strong;
 $modal-title-line-height: $gl-line-height-20;
 $modal-backdrop-bg: #000;
 $modal-backdrop-opacity: 0.64;
@@ -281,11 +280,15 @@ $modal-backdrop-opacity: 0.64;
 $body-color: $gl-text-color !default;
 $enable-validation-icons: false;
 
+// Not moved to a design token as it's a vague Bootstrap variable that might have far-reaching, unintended consequences.
+// Ideally, this variable would just be removed once we know it is not used anywhere.
+/* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */
 $secondary: $gray-50;
-$success: $green-500;
+$success: $gl-text-color-success;
+/* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */
 $info: $blue-500;
-$warning: $orange-500;
-$danger: $red-500;
+$warning: $gl-text-color-warning;
+$danger: $gl-text-color-danger;
 
 $font-weight-bold: $gl-font-weight-bold;
 
@@ -312,9 +315,9 @@ $spacers: (
   9: $gl-spacing-scale-11,
 );
 
-$table-accent-bg: $gray-50;
-$card-border-color: $gray-100;
-$card-cap-bg: $gray-10 !default;
+$table-accent-bg: $gl-background-color-strong;
+$card-border-color: $gl-border-color-default;
+$card-cap-bg: $gl-background-color-subtle !default;
 
 // Form input sizes
 $gl-form-input-sizes: (
@@ -325,11 +328,11 @@ $gl-form-input-sizes: (
   xl: $grid-size * 70,
 );
 
-$popover-bg: $white !default;
+$popover-bg: $gl-background-color-default !default;
 $popover-arrow-width: 0.5rem;
 $popover-arrow-height: 0.25rem;
 $popover-arrow-color: $popover-bg;
-$popover-arrow-outer-color: $gray-100;
+$popover-arrow-outer-color: $gl-border-color-default;
 
 $tooltip-opacity: 1;
 

package/src/scss/storybook_dark_mode.scss

@@ -1,21 +0,0 @@
-@import 'variables';
-
-// conditional overrides for dark mode for use in storybook.
-// Because we only use application.css from gitlab (and not
-// application_dark), we need to override some base rules so
-// that we can more easily test components in dark mode
-
-// This is because dark mode in gitlab currently depends on
-// overriding SCSS variables, but we want gitlab-ui dark mode
-// to use Custom Properties instead
-
-.gl-dark {
-  // Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
-  // e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
-  --gl-text-color: #{$gray-50};
-  --white: #{$gray-900}; // define mapping between the colours in dark mode. I have used the values from GitLab for consistency: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/themes/_dark.scss
-  --gray-10: #{$gray-950};
-  --gray-600: #{$gray-300};
-
-  color-scheme: dark;
-}