@gitlab/ui 72.1.0 → 72.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "72.1.0",
+  "version": "72.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,22 +94,22 @@
     "@gitlab/eslint-plugin": "19.2.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "5.0.1",
-    "@gitlab/svgs": "3.72.0",
+    "@gitlab/svgs": "3.73.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.5.3",
-    "@storybook/addon-docs": "7.5.3",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addon-storyshots": "7.5.3",
-    "@storybook/addon-storyshots-puppeteer": "7.5.3",
-    "@storybook/addon-viewport": "7.5.3",
-    "@storybook/builder-webpack5": "7.5.3",
-    "@storybook/theming": "7.5.3",
-    "@storybook/vue": "7.5.3",
-    "@storybook/vue-webpack5": "7.5.3",
-    "@storybook/vue3": "7.5.3",
-    "@storybook/vue3-webpack5": "7.5.3",
+    "@storybook/addon-a11y": "7.6.5",
+    "@storybook/addon-docs": "7.6.5",
+    "@storybook/addon-essentials": "7.6.5",
+    "@storybook/addon-storyshots": "7.6.5",
+    "@storybook/addon-storyshots-puppeteer": "7.6.5",
+    "@storybook/addon-viewport": "7.6.5",
+    "@storybook/builder-webpack5": "7.6.5",
+    "@storybook/theming": "7.6.5",
+    "@storybook/vue": "7.6.5",
+    "@storybook/vue-webpack5": "7.6.5",
+    "@storybook/vue3": "7.6.5",
+    "@storybook/vue3-webpack5": "7.6.5",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -127,7 +127,7 @@
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.55.0",
+    "eslint": "8.56.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.6.15",
@@ -161,8 +161,8 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.5.3",
-    "storybook-dark-mode": "3.0.1",
+    "storybook": "7.6.5",
+    "storybook-dark-mode": "3.0.3",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",
     "vue": "2.7.15",

package/src/components/base/alert/alert.stories.js

@@ -77,7 +77,7 @@ export const CustomActions = () => ({
     <gl-alert>
       Lorem ipsum dolor sit amet
       <template #actions>
-        <gl-toggle v-model="toggle" />
+        <gl-toggle v-model="toggle" label="label-name" label-position="hidden" />
       </template>
     </gl-alert>`,
 });

package/src/scss/utilities.scss

@@ -2183,6 +2183,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   box-shadow: inset 0 0 0 $gl-border-size-1 $orange-600 !important
 }
 
+.gl-inset-border-1-red-300 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-300
+}
+
+.gl-inset-border-1-red-300\! {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-300 !important
+}
+
 .gl-inset-border-1-red-400 {
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-400
 }
@@ -2744,6 +2752,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   color: $orange-900 !important;
 }
 
+.gl-text-red-300 {
+  color: $red-300;
+}
+
+.gl-text-red-300\! {
+  color: $red-300 !important;
+}
+
 .gl-text-red-500 {
   color: $red-500;
 }
@@ -3259,6 +3275,30 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   display: grid !important;
 }
 
+.gl-sm-display-grid {
+  @include gl-media-breakpoint-up(sm) {
+    display: grid;
+  }
+}
+
+.gl-sm-display-grid\! {
+  @include gl-media-breakpoint-up(sm) {
+    display: grid !important;
+  }
+}
+
+.gl-md-display-grid {
+  @include gl-media-breakpoint-up(md) {
+    display: grid;
+  }
+}
+
+.gl-md-display-grid\! {
+  @include gl-media-breakpoint-up(md) {
+    display: grid !important;
+  }
+}
+
 .gl-sm-display-table-cell {
   @include gl-media-breakpoint-up(sm) {
   display: table-cell;

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

@@ -113,6 +113,10 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $orange-600;
 }
 
+@mixin gl-inset-border-1-red-300 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-300;
+}
+
 @mixin gl-inset-border-1-red-400 {
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-400;
 }

package/src/scss/utility-mixins/color.scss

@@ -169,6 +169,10 @@
   color: $orange-900;
 }
 
+@mixin gl-text-red-300 {
+  color: $red-300;
+}
+
 @mixin gl-text-red-500 {
   color: $red-500;
 }

package/src/scss/utility-mixins/display.scss

@@ -151,6 +151,18 @@
   display: grid;
 }
 
+@mixin gl-sm-display-grid {
+  @include gl-media-breakpoint-up(sm) {
+    display: grid;
+  }
+}
+
+@mixin gl-md-display-grid {
+  @include gl-media-breakpoint-up(md) {
+    display: grid;
+  }
+}
+
 @mixin gl-sm-display-table-cell {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-table-cell;

package/src/tokens/color.theme.dark.tokens.json

@@ -1,411 +1,447 @@
 {
   "theme": {
     "indigo": {
-      "50": {
+      "10": {
         "$value": "#14143d",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "100": {
+      "50": {
         "$value": "#222261",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "200": {
+      "100": {
         "$value": "#303083",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "300": {
+      "200": {
         "$value": "#41419f",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "400": {
+      "300": {
         "$value": "#5252b5",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "500": {
+      "400": {
         "$value": "#6666c4",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "600": {
+      "500": {
         "$value": "#8181d7",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "700": {
+      "600": {
         "$value": "#a2a2e6",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "800": {
+      "700": {
         "$value": "#c7c7f2",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "900": {
+      "800": {
         "$value": "#dbdbf8",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "950": {
+      "900": {
         "$value": "#f1f1ff",
         "$type": "color",
         "themeable": false,
         "prefix": false
+      },
+      "950": {
+        "$value": "#f8f8ff",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
       }
     },
     "blue": {
-      "50": {
+      "10": {
         "$value": "#04101c",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "100": {
+      "50": {
         "$value": "#0b2640",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "200": {
+      "100": {
         "$value": "#153c63",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "300": {
+      "200": {
         "$value": "#235180",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "400": {
+      "300": {
         "$value": "#346596",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "500": {
+      "400": {
         "$value": "#4977a5",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "600": {
+      "500": {
         "$value": "#628eb9",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "700": {
+      "600": {
         "$value": "#81a5c9",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "800": {
+      "700": {
         "$value": "#a6bdd5",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "900": {
+      "800": {
         "$value": "#b9cadc",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "950": {
+      "900": {
         "$value": "#cdd8e3",
         "$type": "color",
         "themeable": false,
         "prefix": false
+      },
+      "950": {
+        "$value": "#e6ecf0",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
       }
     },
     "light-blue": {
-      "50": {
+      "10": {
         "$value": "#0a3764",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "100": {
+      "50": {
         "$value": "#0c4277",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "200": {
+      "100": {
         "$value": "#0e4d8d",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "300": {
+      "200": {
         "$value": "#145aa1",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "400": {
+      "300": {
         "$value": "#2268ae",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "500": {
+      "400": {
         "$value": "#3476b9",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "600": {
+      "500": {
         "$value": "#4f8bc7",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "700": {
+      "600": {
         "$value": "#74a3d3",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "800": {
+      "700": {
         "$value": "#a0bedc",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "900": {
+      "800": {
         "$value": "#c1d4e6",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "950": {
+      "900": {
         "$value": "#dde6ee",
         "$type": "color",
         "themeable": false,
         "prefix": false
+      },
+      "950": {
+        "$value": "#eef3f7",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
       }
     },
     "green": {
-      "50": {
+      "10": {
         "$value": "#052e19",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "100": {
+      "50": {
         "$value": "#0e4328",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "200": {
+      "100": {
         "$value": "#155635",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "300": {
+      "200": {
         "$value": "#1b653f",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "400": {
+      "300": {
         "$value": "#25744c",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "500": {
+      "400": {
         "$value": "#308258",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "600": {
+      "500": {
         "$value": "#499767",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "700": {
+      "600": {
         "$value": "#69af7d",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "800": {
+      "700": {
         "$value": "#8cc497",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "900": {
+      "800": {
         "$value": "#b1d6b5",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "950": {
+      "900": {
         "$value": "#dde9de",
         "$type": "color",
         "themeable": false,
         "prefix": false
+      },
+      "950": {
+        "$value": "#eef4ef",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
       }
     },
     "red": {
-      "50": {
+      "10": {
         "$value": "#380700",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "100": {
+      "50": {
         "$value": "#580d02",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "200": {
+      "100": {
         "$value": "#761405",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "300": {
+      "200": {
         "$value": "#8f2110",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "400": {
+      "300": {
         "$value": "#a13322",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "500": {
+      "400": {
         "$value": "#ad4a3b",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "600": {
+      "500": {
         "$value": "#c66e60",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "700": {
+      "600": {
         "$value": "#d59086",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "800": {
+      "700": {
         "$value": "#e3bab5",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "900": {
+      "800": {
         "$value": "#ecd3d0",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "950": {
+      "900": {
         "$value": "#f4e9e7",
         "$type": "color",
         "themeable": false,
         "prefix": false
+      },
+      "950": {
+        "$value": "#faf4f3",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
       }
     },
     "light-red": {
-      "50": {
+      "10": {
         "$value": "#5c1105",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "100": {
+      "50": {
         "$value": "#751709",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "200": {
+      "100": {
         "$value": "#8b2212",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "300": {
+      "200": {
         "$value": "#a02e1c",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "400": {
+      "300": {
         "$value": "#b53a26",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "500": {
+      "400": {
         "$value": "#c24b38",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "600": {
+      "500": {
         "$value": "#d36250",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "700": {
+      "600": {
         "$value": "#e07f6f",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "800": {
+      "700": {
         "$value": "#ebada2",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "900": {
+      "800": {
         "$value": "#f6d9d5",
         "$type": "color",
         "themeable": false,
         "prefix": false
       },
-      "950": {
+      "900": {
         "$value": "#faf2f1",
         "$type": "color",
         "themeable": false,
         "prefix": false
+      },
+      "950": {
+        "$value": "#fdf9f8",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
       }
     }
   }