@gitlab/ui 80.3.0 → 80.5.0

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
+// Automatically generated
 // Do not edit directly
-// Generated on Mon, 06 May 2024 09:58:06 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-link: #63a6e9 !default; // Used for default text links.

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
+// Automatically generated
 // Do not edit directly
-// Generated on Mon, 06 May 2024 09:58:06 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-success: #217645 !default; // Used for text indicating success or validity.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.3.0",
+  "version": "80.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -138,7 +138,7 @@
     "emoji-regex": "^10.0.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.0.3",
+    "eslint-plugin-cypress": "3.1.0",
     "eslint-plugin-storybook": "0.8.0",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",

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

@@ -34,10 +34,20 @@ const generateProps = ({
 const Template = (args, { argTypes }) => ({
   components: { GlToggle },
   props: Object.keys(argTypes),
+  data() {
+    return {
+      localValue: this.value,
+    };
+  },
+  watch: {
+    value(newValue) {
+      this.localValue = newValue;
+    },
+  },
   template: `
   <div class="gl-font-base">
     <gl-toggle
-      v-model="value"
+      v-model="localValue"
       :disabled="disabled"
       :description="description"
       :help="help"

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

@@ -0,0 +1,248 @@
+/**
+ * Automatically generated
+ * Do not edit directly
+ */
+
+:root {
+  --gl-text-color-disabled: #89888d; /* Used for disabled text. */
+  --gl-text-color-success: #217645; /* Used for text indicating success or validity. */
+  --gl-text-color-danger: #c91c00; /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
+  --gl-text-color-link: #0b5cad; /* Used for default text links. */
+  --gl-text-color-heading: #1f1e24; /* Used for headings level 1-6. */
+  --gl-text-color-strong: #1f1e24; /* Used for text with the highest contrast. */
+  --gl-text-color-subtle: #626168; /* Used for supplemental text that doesn't need to be as prominent as other text. */
+  --gl-text-color-default: #434248; /* Used for the default text color. */
+  --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-line-height-52: 3.25rem;
+  --gl-line-height-44: 2.75rem;
+  --gl-line-height-42: 2.625rem;
+  --gl-line-height-36: 2.25rem;
+  --gl-line-height-32: 2rem;
+  --gl-line-height-28: 1.75rem;
+  --gl-line-height-24: 1.5rem;
+  --gl-line-height-20: 1.25rem;
+  --gl-line-height-16: 1rem;
+  --gl-line-height-12: 0.75rem;
+  --t-white-a-08: rgba(255, 255, 255, 0.08);
+  --t-white-a-06: rgba(255, 255, 255, 0.06);
+  --t-white-a-04: rgba(255, 255, 255, 0.04);
+  --t-white-a-02: rgba(255, 255, 255, 0.02);
+  --t-white-a-36: rgba(255, 255, 255, 0.36);
+  --t-white-a-24: rgba(255, 255, 255, 0.24);
+  --t-white-a-16: rgba(255, 255, 255, 0.16);
+  --t-gray-a-08: rgba(31, 30, 36, 0.08);
+  --t-gray-a-06: rgba(31, 30, 36, 0.06);
+  --t-gray-a-04: rgba(31, 30, 36, 0.04);
+  --t-gray-a-02: rgba(31, 30, 36, 0.02);
+  --t-gray-a-24: rgba(31, 30, 36, 0.24);
+  --t-gray-a-16: rgba(31, 30, 36, 0.16);
+  --brand-gray-05: #2b2838;
+  --brand-gray-04: #45424d;
+  --brand-gray-03: #74717a;
+  --brand-gray-02: #a2a1a6;
+  --brand-gray-01: #d1d0d3;
+  --brand-purple-02: #7759c2;
+  --brand-purple-01: #a989f5;
+  --brand-orange-03: #e24329;
+  --brand-orange-02: #fc6d26;
+  --brand-orange-01: #fca326;
+  --brand-charcoal: #171321;
+  --red-950: #4d0a00;
+  --red-900: #660e00;
+  --red-800: #8d1300;
+  --red-700: #ae1800;
+  --red-600: #c91c00;
+  --red-500: #dd2b0e;
+  --red-400: #ec5941;
+  --red-300: #f57f6c;
+  --red-200: #fcb5aa;
+  --red-100: #fdd4cd;
+  --red-50: #fcf1ef;
+  --purple-950: #232150;
+  --purple-900: #2f2a6b;
+  --purple-800: #453894;
+  --purple-700: #5943b6;
+  --purple-600: #694cc0;
+  --purple-500: #7b58cf;
+  --purple-400: #9475db;
+  --purple-300: #ac93e6;
+  --purple-200: #cbbbf2;
+  --purple-100: #e1d8f9;
+  --purple-50: #f4f0ff;
+  --orange-950: #421f00;
+  --orange-900: #5c2900;
+  --orange-800: #703800;
+  --orange-700: #8f4700;
+  --orange-600: #9e5400;
+  --orange-500: #ab6100;
+  --orange-400: #c17d10;
+  --orange-300: #d99530;
+  --orange-200: #e9be74;
+  --orange-100: #f5d9a8;
+  --orange-50: #fdf1dd;
+  --green-950: #072b15;
+  --green-900: #0a4020;
+  --green-800: #0d532a;
+  --green-700: #24663b;
+  --green-600: #217645;
+  --green-500: #108548;
+  --green-400: #2da160;
+  --green-300: #52b87a;
+  --green-200: #91d4a8;
+  --green-100: #c3e6cd;
+  --green-50: #ecf4ee;
+  --gray-950: #1f1e24;
+  --gray-900: #333238;
+  --gray-800: #434248;
+  --gray-700: #535158;
+  --gray-600: #626168;
+  --gray-500: #737278;
+  --gray-400: #89888d;
+  --gray-300: #a4a3a8;
+  --gray-200: #bfbfc3;
+  --gray-100: #dcdcde;
+  --gray-50: #ececef;
+  --gray-10: #fbfafd;
+  --blue-950: #002850;
+  --blue-900: #033464;
+  --blue-800: #064787;
+  --blue-700: #0b5cad;
+  --blue-600: #1068bf;
+  --blue-500: #1f75cb;
+  --blue-400: #428fdc;
+  --blue-300: #63a6e9;
+  --blue-200: #9dc7f1;
+  --blue-100: #cbe2f9;
+  --blue-50: #e9f3fc;
+  --white: #fff;
+  --black: #000;
+  --theme-light-red-950: #5c1105;
+  --theme-light-red-900: #751709;
+  --theme-light-red-800: #8b2212;
+  --theme-light-red-700: #a02e1c;
+  --theme-light-red-600: #b53a26;
+  --theme-light-red-500: #c24b38;
+  --theme-light-red-400: #d36250;
+  --theme-light-red-300: #e07f6f;
+  --theme-light-red-200: #ebada2;
+  --theme-light-red-100: #f6d9d5;
+  --theme-light-red-50: #faf2f1;
+  --theme-light-red-10: #fdf9f8;
+  --theme-red-950: #380700;
+  --theme-red-900: #580d02;
+  --theme-red-800: #761405;
+  --theme-red-700: #8f2110;
+  --theme-red-600: #a13322;
+  --theme-red-500: #ad4a3b;
+  --theme-red-400: #c66e60;
+  --theme-red-300: #d59086;
+  --theme-red-200: #e3bab5;
+  --theme-red-100: #ecd3d0;
+  --theme-red-50: #f4e9e7;
+  --theme-red-10: #faf4f3;
+  --theme-green-950: #052e19;
+  --theme-green-900: #0e4328;
+  --theme-green-800: #155635;
+  --theme-green-700: #1b653f;
+  --theme-green-600: #25744c;
+  --theme-green-500: #308258;
+  --theme-green-400: #499767;
+  --theme-green-300: #69af7d;
+  --theme-green-200: #8cc497;
+  --theme-green-100: #b1d6b5;
+  --theme-green-50: #dde9de;
+  --theme-green-10: #eef4ef;
+  --theme-light-blue-950: #0a3764;
+  --theme-light-blue-900: #0c4277;
+  --theme-light-blue-800: #0e4d8d;
+  --theme-light-blue-700: #145aa1;
+  --theme-light-blue-600: #2268ae;
+  --theme-light-blue-500: #3476b9;
+  --theme-light-blue-400: #4f8bc7;
+  --theme-light-blue-300: #74a3d3;
+  --theme-light-blue-200: #a0bedc;
+  --theme-light-blue-100: #c1d4e6;
+  --theme-light-blue-50: #dde6ee;
+  --theme-light-blue-10: #eef3f7;
+  --theme-blue-950: #04101c;
+  --theme-blue-900: #0b2640;
+  --theme-blue-800: #153c63;
+  --theme-blue-700: #235180;
+  --theme-blue-600: #346596;
+  --theme-blue-500: #4977a5;
+  --theme-blue-400: #628eb9;
+  --theme-blue-300: #81a5c9;
+  --theme-blue-200: #a6bdd5;
+  --theme-blue-100: #b9cadc;
+  --theme-blue-50: #cdd8e3;
+  --theme-blue-10: #e6ecf0;
+  --theme-indigo-950: #14143d;
+  --theme-indigo-900: #222261;
+  --theme-indigo-800: #303083;
+  --theme-indigo-700: #41419f;
+  --theme-indigo-600: #5252b5;
+  --theme-indigo-500: #6666c4;
+  --theme-indigo-400: #8181d7;
+  --theme-indigo-300: #a2a2e6;
+  --theme-indigo-200: #c7c7f2;
+  --theme-indigo-100: #dbdbf8;
+  --theme-indigo-50: #f1f1ff;
+  --theme-indigo-10: #f8f8ff;
+  --data-viz-orange-950: #4b2707;
+  --data-viz-orange-900: #5e2f05;
+  --data-viz-orange-800: #6f3500;
+  --data-viz-orange-700: #92430a;
+  --data-viz-orange-600: #b14f18;
+  --data-viz-orange-500: #c95d2e;
+  --data-viz-orange-400: #e07e41;
+  --data-viz-orange-300: #e99b60;
+  --data-viz-orange-200: #eebd8c;
+  --data-viz-orange-100: #f5d6b3;
+  --data-viz-orange-50: #fae8d1;
+  --data-viz-magenta-950: #541d31;
+  --data-viz-magenta-900: #661e3a;
+  --data-viz-magenta-800: #7c214f;
+  --data-viz-magenta-700: #9a2e5d;
+  --data-viz-magenta-600: #b93d71;
+  --data-viz-magenta-500: #cf4d81;
+  --data-viz-magenta-400: #e86e9a;
+  --data-viz-magenta-300: #f88aaf;
+  --data-viz-magenta-200: #fcacc5;
+  --data-viz-magenta-100: #ffccdb;
+  --data-viz-magenta-50: #ffe3eb;
+  --data-viz-blue-950: #2a2b59;
+  --data-viz-blue-900: #303470;
+  --data-viz-blue-800: #374291;
+  --data-viz-blue-700: #3f51ae;
+  --data-viz-blue-600: #4e65cd;
+  --data-viz-blue-500: #617ae2;
+  --data-viz-blue-400: #7992f5;
+  --data-viz-blue-300: #97acff;
+  --data-viz-blue-200: #b7c6ff;
+  --data-viz-blue-100: #d2dcff;
+  --data-viz-blue-50: #e9ebff;
+  --data-viz-aqua-950: #00344b;
+  --data-viz-aqua-900: #004059;
+  --data-viz-aqua-800: #00516c;
+  --data-viz-aqua-700: #006381;
+  --data-viz-aqua-600: #007b9b;
+  --data-viz-aqua-500: #0090b1;
+  --data-viz-aqua-400: #00acc4;
+  --data-viz-aqua-300: #32c5d2;
+  --data-viz-aqua-200: #5edee3;
+  --data-viz-aqua-100: #93f2ef;
+  --data-viz-aqua-50: #b5fefd;
+  --data-viz-green-950: #133a03;
+  --data-viz-green-900: #1a4500;
+  --data-viz-green-800: #275600;
+  --data-viz-green-700: #366800;
+  --data-viz-green-600: #4e7f0e;
+  --data-viz-green-500: #619025;
+  --data-viz-green-400: #81ac41;
+  --data-viz-green-300: #94c25e;
+  --data-viz-green-200: #b0d97b;
+  --data-viz-green-100: #c6ed94;
+  --data-viz-green-50: #ddfab7;
+}

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

@@ -0,0 +1,212 @@
+/**
+ * Automatically generated
+ * Do not edit directly
+ */
+
+:root.gl-dark {
+  --gl-text-color-disabled: #89888d; /* Used for disabled text. */
+  --gl-text-color-link: #63a6e9; /* Used for default text links. */
+  --gl-text-color-heading: #fff; /* Used for headings level 1-6. */
+  --gl-text-color-strong: #fff; /* Used for text with the highest contrast. */
+  --gl-text-color-subtle: #bfbfc3; /* Used for supplemental text that doesn't need to be as prominent as other text. */
+  --gl-text-color-default: #ececef; /* Used for the default text color. */
+  --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 */
+  --red-950: #fff4f3;
+  --red-900: #fcf1ef;
+  --red-800: #fdd4cd;
+  --red-700: #fcb5aa;
+  --red-600: #f57f6c;
+  --red-500: #ec5941;
+  --red-400: #dd2b0e;
+  --red-300: #c91c00;
+  --red-200: #ae1800;
+  --red-100: #8d1300;
+  --red-50: #660e00;
+  --purple-950: #f4f0ff;
+  --purple-900: #e1d8f9;
+  --purple-800: #cbbbf2;
+  --purple-700: #ac93e6;
+  --purple-600: #9475db;
+  --purple-500: #7b58cf;
+  --purple-400: #694cc0;
+  --purple-300: #5943b6;
+  --purple-200: #453894;
+  --purple-100: #2f2a6b;
+  --purple-50: #232150;
+  --orange-950: #fff4e1;
+  --orange-900: #fdf1dd;
+  --orange-800: #f5d9a8;
+  --orange-700: #e9be74;
+  --orange-600: #d99530;
+  --orange-500: #c17d10;
+  --orange-400: #ab6100;
+  --orange-300: #9e5400;
+  --orange-200: #8f4700;
+  --orange-100: #703800;
+  --orange-50: #5c2900;
+  --green-950: #f1fdf6;
+  --green-900: #ecf4ee;
+  --green-800: #c3e6cd;
+  --green-700: #91d4a8;
+  --green-600: #52b87a;
+  --green-500: #2da160;
+  --green-400: #108548;
+  --green-300: #217645;
+  --green-200: #24663b;
+  --green-100: #0d532a;
+  --green-50: #0a4020;
+  --gray-950: #fbfafd;
+  --gray-900: #ececef;
+  --gray-800: #dcdcde;
+  --gray-700: #bfbfc3;
+  --gray-600: #a4a3a8;
+  --gray-500: #89888d;
+  --gray-400: #737278;
+  --gray-300: #626168;
+  --gray-200: #535158;
+  --gray-100: #434248;
+  --gray-50: #333238;
+  --gray-10: #1f1e24;
+  --blue-950: #f2f9ff;
+  --blue-900: #e9f3fc;
+  --blue-800: #cbe2f9;
+  --blue-700: #9dc7f1;
+  --blue-600: #63a6e9;
+  --blue-500: #428fdc;
+  --blue-400: #1f75cb;
+  --blue-300: #1068bf;
+  --blue-200: #0b5cad;
+  --blue-100: #064787;
+  --blue-50: #033464;
+  --white: #333238;
+  --black: #fff;
+  --theme-light-red-950: #fdf9f8;
+  --theme-light-red-900: #faf2f1;
+  --theme-light-red-800: #f6d9d5;
+  --theme-light-red-700: #ebada2;
+  --theme-light-red-600: #e07f6f;
+  --theme-light-red-500: #d36250;
+  --theme-light-red-400: #c24b38;
+  --theme-light-red-300: #b53a26;
+  --theme-light-red-200: #a02e1c;
+  --theme-light-red-100: #8b2212;
+  --theme-light-red-50: #751709;
+  --theme-light-red-10: #5c1105;
+  --theme-red-950: #faf4f3;
+  --theme-red-900: #f4e9e7;
+  --theme-red-800: #ecd3d0;
+  --theme-red-700: #e3bab5;
+  --theme-red-600: #d59086;
+  --theme-red-500: #c66e60;
+  --theme-red-400: #ad4a3b;
+  --theme-red-300: #a13322;
+  --theme-red-200: #8f2110;
+  --theme-red-100: #761405;
+  --theme-red-50: #580d02;
+  --theme-red-10: #380700;
+  --theme-green-950: #eef4ef;
+  --theme-green-900: #dde9de;
+  --theme-green-800: #b1d6b5;
+  --theme-green-700: #8cc497;
+  --theme-green-600: #69af7d;
+  --theme-green-500: #499767;
+  --theme-green-400: #308258;
+  --theme-green-300: #25744c;
+  --theme-green-200: #1b653f;
+  --theme-green-100: #155635;
+  --theme-green-50: #0e4328;
+  --theme-green-10: #052e19;
+  --theme-light-blue-950: #eef3f7;
+  --theme-light-blue-900: #dde6ee;
+  --theme-light-blue-800: #c1d4e6;
+  --theme-light-blue-700: #a0bedc;
+  --theme-light-blue-600: #74a3d3;
+  --theme-light-blue-500: #4f8bc7;
+  --theme-light-blue-400: #3476b9;
+  --theme-light-blue-300: #2268ae;
+  --theme-light-blue-200: #145aa1;
+  --theme-light-blue-100: #0e4d8d;
+  --theme-light-blue-50: #0c4277;
+  --theme-light-blue-10: #0a3764;
+  --theme-blue-950: #e6ecf0;
+  --theme-blue-900: #cdd8e3;
+  --theme-blue-800: #b9cadc;
+  --theme-blue-700: #a6bdd5;
+  --theme-blue-600: #81a5c9;
+  --theme-blue-500: #628eb9;
+  --theme-blue-400: #4977a5;
+  --theme-blue-300: #346596;
+  --theme-blue-200: #235180;
+  --theme-blue-100: #153c63;
+  --theme-blue-50: #0b2640;
+  --theme-blue-10: #04101c;
+  --theme-indigo-950: #f8f8ff;
+  --theme-indigo-900: #f1f1ff;
+  --theme-indigo-800: #dbdbf8;
+  --theme-indigo-700: #c7c7f2;
+  --theme-indigo-600: #a2a2e6;
+  --theme-indigo-500: #8181d7;
+  --theme-indigo-400: #6666c4;
+  --theme-indigo-300: #5252b5;
+  --theme-indigo-200: #41419f;
+  --theme-indigo-100: #303083;
+  --theme-indigo-50: #222261;
+  --theme-indigo-10: #14143d;
+  --data-viz-orange-950: #fae8d1;
+  --data-viz-orange-900: #f5d6b3;
+  --data-viz-orange-800: #eebd8c;
+  --data-viz-orange-700: #e99b60;
+  --data-viz-orange-600: #e07e41;
+  --data-viz-orange-500: #c95d2e;
+  --data-viz-orange-400: #b14f18;
+  --data-viz-orange-300: #92430a;
+  --data-viz-orange-200: #6f3500;
+  --data-viz-orange-100: #5e2f05;
+  --data-viz-orange-50: #4b2707;
+  --data-viz-magenta-950: #ffe3eb;
+  --data-viz-magenta-900: #ffccdb;
+  --data-viz-magenta-800: #fcacc5;
+  --data-viz-magenta-700: #f88aaf;
+  --data-viz-magenta-600: #e86e9a;
+  --data-viz-magenta-500: #cf4d81;
+  --data-viz-magenta-400: #b93d71;
+  --data-viz-magenta-300: #9a2e5d;
+  --data-viz-magenta-200: #7c214f;
+  --data-viz-magenta-100: #661e3a;
+  --data-viz-magenta-50: #541d31;
+  --data-viz-blue-950: #e9ebff;
+  --data-viz-blue-900: #d2dcff;
+  --data-viz-blue-800: #b7c6ff;
+  --data-viz-blue-700: #97acff;
+  --data-viz-blue-600: #7992f5;
+  --data-viz-blue-500: #617ae2;
+  --data-viz-blue-400: #4e65cd;
+  --data-viz-blue-300: #3f51ae;
+  --data-viz-blue-200: #374291;
+  --data-viz-blue-100: #303470;
+  --data-viz-blue-50: #2a2b59;
+  --data-viz-aqua-950: #b5fefd;
+  --data-viz-aqua-900: #93f2ef;
+  --data-viz-aqua-800: #5edee3;
+  --data-viz-aqua-700: #32c5d2;
+  --data-viz-aqua-600: #00acc4;
+  --data-viz-aqua-500: #0090b1;
+  --data-viz-aqua-400: #007b9b;
+  --data-viz-aqua-300: #006381;
+  --data-viz-aqua-200: #00516c;
+  --data-viz-aqua-100: #004059;
+  --data-viz-aqua-50: #00344b;
+  --data-viz-green-950: #ddfab7;
+  --data-viz-green-900: #c6ed94;
+  --data-viz-green-800: #b0d97b;
+  --data-viz-green-700: #94c25e;
+  --data-viz-green-600: #81ac41;
+  --data-viz-green-500: #619025;
+  --data-viz-green-400: #4e7f0e;
+  --data-viz-green-300: #366800;
+  --data-viz-green-200: #275600;
+  --data-viz-green-100: #1a4500;
+  --data-viz-green-50: #133a03;
+}