@gitlab/ui 107.2.1 → 107.4.0

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

@@ -94,6 +94,61 @@ $gl-color-red-700: #ae1800;
 $gl-color-red-800: #8d1300;
 $gl-color-red-900: #660e00;
 $gl-color-red-950: #4d0a00;
+$gl-color-data-green-50: #ddfab7;
+$gl-color-data-green-100: #c6ed94;
+$gl-color-data-green-200: #b0d97b;
+$gl-color-data-green-300: #94c25e;
+$gl-color-data-green-400: #81ac41;
+$gl-color-data-green-500: #619025;
+$gl-color-data-green-600: #4e7f0e;
+$gl-color-data-green-700: #366800;
+$gl-color-data-green-800: #275600;
+$gl-color-data-green-900: #1a4500;
+$gl-color-data-green-950: #133a03;
+$gl-color-data-aqua-50: #b5fefd;
+$gl-color-data-aqua-100: #93f2ef;
+$gl-color-data-aqua-200: #5edee3;
+$gl-color-data-aqua-300: #32c5d2;
+$gl-color-data-aqua-400: #00acc4;
+$gl-color-data-aqua-500: #0090b1;
+$gl-color-data-aqua-600: #007b9b;
+$gl-color-data-aqua-700: #006381;
+$gl-color-data-aqua-800: #00516c;
+$gl-color-data-aqua-900: #004059;
+$gl-color-data-aqua-950: #00344b;
+$gl-color-data-blue-50: #e9ebff;
+$gl-color-data-blue-100: #d2dcff;
+$gl-color-data-blue-200: #b7c6ff;
+$gl-color-data-blue-300: #97acff;
+$gl-color-data-blue-400: #7992f5;
+$gl-color-data-blue-500: #617ae2;
+$gl-color-data-blue-600: #4e65cd;
+$gl-color-data-blue-700: #3f51ae;
+$gl-color-data-blue-800: #374291;
+$gl-color-data-blue-900: #303470;
+$gl-color-data-blue-950: #2a2b59;
+$gl-color-data-magenta-50: #ffe3eb;
+$gl-color-data-magenta-100: #ffccdb;
+$gl-color-data-magenta-200: #fcacc5;
+$gl-color-data-magenta-300: #f88aaf;
+$gl-color-data-magenta-400: #e86e9a;
+$gl-color-data-magenta-500: #cf4d81;
+$gl-color-data-magenta-600: #b93d71;
+$gl-color-data-magenta-700: #9a2e5d;
+$gl-color-data-magenta-800: #7c214f;
+$gl-color-data-magenta-900: #661e3a;
+$gl-color-data-magenta-950: #541d31;
+$gl-color-data-orange-50: #fae8d1;
+$gl-color-data-orange-100: #f5d6b3;
+$gl-color-data-orange-200: #eebd8c;
+$gl-color-data-orange-300: #e99b60;
+$gl-color-data-orange-400: #e07e41;
+$gl-color-data-orange-500: #c95d2e;
+$gl-color-data-orange-600: #b14f18;
+$gl-color-data-orange-700: #92430a;
+$gl-color-data-orange-800: #6f3500;
+$gl-color-data-orange-900: #5e2f05;
+$gl-color-data-orange-950: #4b2707;
 $gl-color-theme-indigo-10: #f8f8ff;
 $gl-color-theme-indigo-50: #f1f1ff;
 $gl-color-theme-indigo-100: #dbdbf8;
@@ -181,6 +236,44 @@ $gl-color-brand-gray-03: #74717a;
 $gl-color-brand-gray-04: #45424d;
 $gl-color-brand-gray-05: #2b2838;
 $gl-color-brand-pink-01g: #ffb9c9;
+$gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-illustration-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail.
+$gl-illustration-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail.
+$gl-illustration-fill-color-default: #423f4f; // Default fill color for an element where specific meaning or emphasis is not required.
+$gl-illustration-status-fill-color-neutral: #6f6796; // Used as a fill to convey a concept which is neither positive or negative.
+$gl-illustration-status-fill-color-success: #3b8581; // Used as a fill to convey a success or active concept, has a positive connotation.
+$gl-illustration-status-fill-color-warning: #ab752f; // Used as a fill to convey a caution or warning concept, has a slightly negative connotation.
+$gl-illustration-status-fill-color-danger: #aa563a; // Used as a fill to convey a critical or danger concept, has a negative connotation.
+$gl-illustration-accent-stroke-color-orange: #e3865f; // Used for orange accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-teal: #6baea3; // Used for teal accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-strong: #aea5d6; // Used for dark accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-fill-color-subtle: #5c5371; // Used to add depth to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-strong: #6f6796; // Used for an element requiring visual emphasis without competing with primary content or status indicators.
+$gl-illustration-accent-fill-color-orange: #aa563a; // Used to add orange to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-teal: #3b8581; // Used to add teal to a secondary element and supporting surface.
+$gl-illustration-base-fill-color: #32303c; // Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.
+$gl-illustration-isometric-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-glyph-top-fill-color: #5a566c; // Used for the top face of isometric text and number elements.
+$gl-illustration-isometric-glyph-front-fill-color: #423f4f; // Used for the front face of isometric text and number elements.
+$gl-illustration-isometric-glyph-side-fill-color: #373441; // Used for the side face of isometric text and number elements.
+$gl-illustration-isometric-glyph-shadow-fill-color: #292730; // Used for the shadow of isometric text and number elements.
+$gl-illustration-isometric-object-top-fill-color: #aa563a; // Used for the top face of an isometric object or symbol.
+$gl-illustration-isometric-object-front-fill-color: #a54623; // Used for the front face of an isometric object or symbol.
+$gl-illustration-isometric-object-side-fill-color: #8f4424; // Used for the side face of an isometric object or symbol.
+$gl-illustration-isometric-object-highlight-fill-color: #423f4f; // Used for the face of an isometric object or symbol that requires maximum distinction from other elements.
+$gl-illustration-isometric-object-shadow-fill-color: #3d2b2a; // Used for the shadow of an isometric object or symbol.
+$gl-illustration-isometric-accent-top-fill-color: #6d6972; // Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-front-fill-color: #49474d; // Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-side-fill-color: #212023; // Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-base-top-fill-color: #32303c; // Used for the top surface of an isometric base platform.
+$gl-illustration-isometric-base-front-fill-color: #2b2932; // Used for the front face of an isometric base platform.
+$gl-illustration-isometric-base-side-fill-color: #23222b; // Used for the side face of an isometric base platform.
 $data-viz-green-50: #133a03 !default;
 $data-viz-green-100: #1a4500 !default;
 $data-viz-green-200: #275600 !default;
@@ -236,44 +329,6 @@ $data-viz-orange-700: #e99b60 !default;
 $data-viz-orange-800: #eebd8c !default;
 $data-viz-orange-900: #f5d6b3 !default;
 $data-viz-orange-950: #fae8d1 !default;
-$gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
-$gl-illustration-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail.
-$gl-illustration-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail.
-$gl-illustration-fill-color-default: #423f4f; // Default fill color for an element where specific meaning or emphasis is not required.
-$gl-illustration-status-fill-color-neutral: #6f6796; // Used as a fill to convey a concept which is neither positive or negative.
-$gl-illustration-status-fill-color-success: #3b8581; // Used as a fill to convey a success or active concept, has a positive connotation.
-$gl-illustration-status-fill-color-warning: #ab752f; // Used as a fill to convey a caution or warning concept, has a slightly negative connotation.
-$gl-illustration-status-fill-color-danger: #aa563a; // Used as a fill to convey a critical or danger concept, has a negative connotation.
-$gl-illustration-accent-stroke-color-orange: #e3865f; // Used for orange accent stroke detail on an object or attention-drawing element.
-$gl-illustration-accent-stroke-color-teal: #6baea3; // Used for teal accent stroke detail on an object or attention-drawing element.
-$gl-illustration-accent-stroke-color-strong: #aea5d6; // Used for dark accent stroke detail on an object or attention-drawing element.
-$gl-illustration-accent-fill-color-subtle: #5c5371; // Used to add depth to a secondary element and supporting surface.
-$gl-illustration-accent-fill-color-strong: #6f6796; // Used for an element requiring visual emphasis without competing with primary content or status indicators.
-$gl-illustration-accent-fill-color-orange: #aa563a; // Used to add orange to a secondary element and supporting surface.
-$gl-illustration-accent-fill-color-teal: #3b8581; // Used to add teal to a secondary element and supporting surface.
-$gl-illustration-base-fill-color: #32303c; // Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.
-$gl-illustration-isometric-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail in isometric illustration.
-$gl-illustration-isometric-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail in isometric illustration.
-$gl-illustration-isometric-glyph-top-fill-color: #5a566c; // Used for the top face of isometric text and number elements.
-$gl-illustration-isometric-glyph-front-fill-color: #423f4f; // Used for the front face of isometric text and number elements.
-$gl-illustration-isometric-glyph-side-fill-color: #373441; // Used for the side face of isometric text and number elements.
-$gl-illustration-isometric-glyph-shadow-fill-color: #292730; // Used for the shadow of isometric text and number elements.
-$gl-illustration-isometric-object-top-fill-color: #aa563a; // Used for the top face of an isometric object or symbol.
-$gl-illustration-isometric-object-front-fill-color: #a54623; // Used for the front face of an isometric object or symbol.
-$gl-illustration-isometric-object-side-fill-color: #8f4424; // Used for the side face of an isometric object or symbol.
-$gl-illustration-isometric-object-highlight-fill-color: #423f4f; // Used for the face of an isometric object or symbol that requires maximum distinction from other elements.
-$gl-illustration-isometric-object-shadow-fill-color: #3d2b2a; // Used for the shadow of an isometric object or symbol.
-$gl-illustration-isometric-accent-top-fill-color: #6d6972; // Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
-$gl-illustration-isometric-accent-front-fill-color: #49474d; // Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
-$gl-illustration-isometric-accent-side-fill-color: #212023; // Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
-$gl-illustration-isometric-base-top-fill-color: #32303c; // Used for the top surface of an isometric base platform.
-$gl-illustration-isometric-base-front-fill-color: #2b2932; // Used for the front face of an isometric base platform.
-$gl-illustration-isometric-base-side-fill-color: #23222b; // Used for the side face of an isometric base platform.
 $theme-indigo-10: #14143d !default;
 $theme-indigo-50: #222261 !default;
 $theme-indigo-100: #303083 !default;

package/dist/tokens/scss/_tokens.scss

@@ -94,6 +94,61 @@ $gl-color-red-700: #ae1800;
 $gl-color-red-800: #8d1300;
 $gl-color-red-900: #660e00;
 $gl-color-red-950: #4d0a00;
+$gl-color-data-green-50: #ddfab7;
+$gl-color-data-green-100: #c6ed94;
+$gl-color-data-green-200: #b0d97b;
+$gl-color-data-green-300: #94c25e;
+$gl-color-data-green-400: #81ac41;
+$gl-color-data-green-500: #619025;
+$gl-color-data-green-600: #4e7f0e;
+$gl-color-data-green-700: #366800;
+$gl-color-data-green-800: #275600;
+$gl-color-data-green-900: #1a4500;
+$gl-color-data-green-950: #133a03;
+$gl-color-data-aqua-50: #b5fefd;
+$gl-color-data-aqua-100: #93f2ef;
+$gl-color-data-aqua-200: #5edee3;
+$gl-color-data-aqua-300: #32c5d2;
+$gl-color-data-aqua-400: #00acc4;
+$gl-color-data-aqua-500: #0090b1;
+$gl-color-data-aqua-600: #007b9b;
+$gl-color-data-aqua-700: #006381;
+$gl-color-data-aqua-800: #00516c;
+$gl-color-data-aqua-900: #004059;
+$gl-color-data-aqua-950: #00344b;
+$gl-color-data-blue-50: #e9ebff;
+$gl-color-data-blue-100: #d2dcff;
+$gl-color-data-blue-200: #b7c6ff;
+$gl-color-data-blue-300: #97acff;
+$gl-color-data-blue-400: #7992f5;
+$gl-color-data-blue-500: #617ae2;
+$gl-color-data-blue-600: #4e65cd;
+$gl-color-data-blue-700: #3f51ae;
+$gl-color-data-blue-800: #374291;
+$gl-color-data-blue-900: #303470;
+$gl-color-data-blue-950: #2a2b59;
+$gl-color-data-magenta-50: #ffe3eb;
+$gl-color-data-magenta-100: #ffccdb;
+$gl-color-data-magenta-200: #fcacc5;
+$gl-color-data-magenta-300: #f88aaf;
+$gl-color-data-magenta-400: #e86e9a;
+$gl-color-data-magenta-500: #cf4d81;
+$gl-color-data-magenta-600: #b93d71;
+$gl-color-data-magenta-700: #9a2e5d;
+$gl-color-data-magenta-800: #7c214f;
+$gl-color-data-magenta-900: #661e3a;
+$gl-color-data-magenta-950: #541d31;
+$gl-color-data-orange-50: #fae8d1;
+$gl-color-data-orange-100: #f5d6b3;
+$gl-color-data-orange-200: #eebd8c;
+$gl-color-data-orange-300: #e99b60;
+$gl-color-data-orange-400: #e07e41;
+$gl-color-data-orange-500: #c95d2e;
+$gl-color-data-orange-600: #b14f18;
+$gl-color-data-orange-700: #92430a;
+$gl-color-data-orange-800: #6f3500;
+$gl-color-data-orange-900: #5e2f05;
+$gl-color-data-orange-950: #4b2707;
 $gl-color-theme-indigo-10: #f8f8ff;
 $gl-color-theme-indigo-50: #f1f1ff;
 $gl-color-theme-indigo-100: #dbdbf8;
@@ -181,6 +236,44 @@ $gl-color-brand-gray-03: #74717a;
 $gl-color-brand-gray-04: #45424d;
 $gl-color-brand-gray-05: #2b2838;
 $gl-color-brand-pink-01g: #ffb9c9;
+$gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
+$gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-illustration-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail.
+$gl-illustration-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail.
+$gl-illustration-fill-color-default: #fff; // Default fill color for an element where specific meaning or emphasis is not required.
+$gl-illustration-status-fill-color-neutral: #aea5d6; // Used as a fill to convey a concept which is neither positive or negative.
+$gl-illustration-status-fill-color-success: #6fdac9; // Used as a fill to convey a success or active concept, has a positive connotation.
+$gl-illustration-status-fill-color-warning: #fca326; // Used as a fill to convey a caution or warning concept, has a slightly negative connotation.
+$gl-illustration-status-fill-color-danger: #ff9d73; // Used as a fill to convey a critical or danger concept, has a negative connotation.
+$gl-illustration-accent-stroke-color-orange: #ff9d73; // Used for orange accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-teal: #6fdac9; // Used for teal accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-strong: #aea5d6; // Used for dark accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-fill-color-subtle: #d0c5e2; // Used to add depth to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-strong: #aea5d6; // Used for an element requiring visual emphasis without competing with primary content or status indicators.
+$gl-illustration-accent-fill-color-orange: #ff9d73; // Used to add orange to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-teal: #6fdac9; // Used to add teal to a secondary element and supporting surface.
+$gl-illustration-base-fill-color: #e7e4f2; // Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.
+$gl-illustration-isometric-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-glyph-top-fill-color: #c5f4ec; // Used for the top face of isometric text and number elements.
+$gl-illustration-isometric-glyph-front-fill-color: #fff; // Used for the front face of isometric text and number elements.
+$gl-illustration-isometric-glyph-side-fill-color: #6fdac9; // Used for the side face of isometric text and number elements.
+$gl-illustration-isometric-glyph-shadow-fill-color: #10b1b1; // Used for the shadow of isometric text and number elements.
+$gl-illustration-isometric-object-top-fill-color: #ff9d73; // Used for the top face of an isometric object or symbol.
+$gl-illustration-isometric-object-front-fill-color: #ffc2a8; // Used for the front face of an isometric object or symbol.
+$gl-illustration-isometric-object-side-fill-color: #ff7b42; // Used for the side face of an isometric object or symbol.
+$gl-illustration-isometric-object-highlight-fill-color: #fff; // Used for the face of an isometric object or symbol that requires maximum distinction from other elements.
+$gl-illustration-isometric-object-shadow-fill-color: #e24329; // Used for the shadow of an isometric object or symbol.
+$gl-illustration-isometric-accent-top-fill-color: #45424d; // Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-front-fill-color: #74717a; // Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-side-fill-color: #2b2838; // Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-base-top-fill-color: #e7e4f2; // Used for the top surface of an isometric base platform.
+$gl-illustration-isometric-base-front-fill-color: #d5d0e8; // Used for the front face of an isometric base platform.
+$gl-illustration-isometric-base-side-fill-color: #aea5d6; // Used for the side face of an isometric base platform.
 $data-viz-green-50: #ddfab7 !default;
 $data-viz-green-100: #c6ed94 !default;
 $data-viz-green-200: #b0d97b !default;
@@ -236,44 +329,6 @@ $data-viz-orange-700: #92430a !default;
 $data-viz-orange-800: #6f3500 !default;
 $data-viz-orange-900: #5e2f05 !default;
 $data-viz-orange-950: #4b2707 !default;
-$gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
-$gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
-$gl-illustration-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail.
-$gl-illustration-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail.
-$gl-illustration-fill-color-default: #fff; // Default fill color for an element where specific meaning or emphasis is not required.
-$gl-illustration-status-fill-color-neutral: #aea5d6; // Used as a fill to convey a concept which is neither positive or negative.
-$gl-illustration-status-fill-color-success: #6fdac9; // Used as a fill to convey a success or active concept, has a positive connotation.
-$gl-illustration-status-fill-color-warning: #fca326; // Used as a fill to convey a caution or warning concept, has a slightly negative connotation.
-$gl-illustration-status-fill-color-danger: #ff9d73; // Used as a fill to convey a critical or danger concept, has a negative connotation.
-$gl-illustration-accent-stroke-color-orange: #ff9d73; // Used for orange accent stroke detail on an object or attention-drawing element.
-$gl-illustration-accent-stroke-color-teal: #6fdac9; // Used for teal accent stroke detail on an object or attention-drawing element.
-$gl-illustration-accent-stroke-color-strong: #aea5d6; // Used for dark accent stroke detail on an object or attention-drawing element.
-$gl-illustration-accent-fill-color-subtle: #d0c5e2; // Used to add depth to a secondary element and supporting surface.
-$gl-illustration-accent-fill-color-strong: #aea5d6; // Used for an element requiring visual emphasis without competing with primary content or status indicators.
-$gl-illustration-accent-fill-color-orange: #ff9d73; // Used to add orange to a secondary element and supporting surface.
-$gl-illustration-accent-fill-color-teal: #6fdac9; // Used to add teal to a secondary element and supporting surface.
-$gl-illustration-base-fill-color: #e7e4f2; // Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.
-$gl-illustration-isometric-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail in isometric illustration.
-$gl-illustration-isometric-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail in isometric illustration.
-$gl-illustration-isometric-glyph-top-fill-color: #c5f4ec; // Used for the top face of isometric text and number elements.
-$gl-illustration-isometric-glyph-front-fill-color: #fff; // Used for the front face of isometric text and number elements.
-$gl-illustration-isometric-glyph-side-fill-color: #6fdac9; // Used for the side face of isometric text and number elements.
-$gl-illustration-isometric-glyph-shadow-fill-color: #10b1b1; // Used for the shadow of isometric text and number elements.
-$gl-illustration-isometric-object-top-fill-color: #ff9d73; // Used for the top face of an isometric object or symbol.
-$gl-illustration-isometric-object-front-fill-color: #ffc2a8; // Used for the front face of an isometric object or symbol.
-$gl-illustration-isometric-object-side-fill-color: #ff7b42; // Used for the side face of an isometric object or symbol.
-$gl-illustration-isometric-object-highlight-fill-color: #fff; // Used for the face of an isometric object or symbol that requires maximum distinction from other elements.
-$gl-illustration-isometric-object-shadow-fill-color: #e24329; // Used for the shadow of an isometric object or symbol.
-$gl-illustration-isometric-accent-top-fill-color: #45424d; // Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
-$gl-illustration-isometric-accent-front-fill-color: #74717a; // Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
-$gl-illustration-isometric-accent-side-fill-color: #2b2838; // Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
-$gl-illustration-isometric-base-top-fill-color: #e7e4f2; // Used for the top surface of an isometric base platform.
-$gl-illustration-isometric-base-front-fill-color: #d5d0e8; // Used for the front face of an isometric base platform.
-$gl-illustration-isometric-base-side-fill-color: #aea5d6; // Used for the side face of an isometric base platform.
 $theme-indigo-10: #f8f8ff !default;
 $theme-indigo-50: #f1f1ff !default;
 $theme-indigo-100: #dbdbf8 !default;

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -173,6 +173,61 @@ $gl-color-red-700: var(--gl-color-red-700);
 $gl-color-red-800: var(--gl-color-red-800);
 $gl-color-red-900: var(--gl-color-red-900);
 $gl-color-red-950: var(--gl-color-red-950);
+$gl-color-data-green-50: var(--gl-color-data-green-50);
+$gl-color-data-green-100: var(--gl-color-data-green-100);
+$gl-color-data-green-200: var(--gl-color-data-green-200);
+$gl-color-data-green-300: var(--gl-color-data-green-300);
+$gl-color-data-green-400: var(--gl-color-data-green-400);
+$gl-color-data-green-500: var(--gl-color-data-green-500);
+$gl-color-data-green-600: var(--gl-color-data-green-600);
+$gl-color-data-green-700: var(--gl-color-data-green-700);
+$gl-color-data-green-800: var(--gl-color-data-green-800);
+$gl-color-data-green-900: var(--gl-color-data-green-900);
+$gl-color-data-green-950: var(--gl-color-data-green-950);
+$gl-color-data-aqua-50: var(--gl-color-data-aqua-50);
+$gl-color-data-aqua-100: var(--gl-color-data-aqua-100);
+$gl-color-data-aqua-200: var(--gl-color-data-aqua-200);
+$gl-color-data-aqua-300: var(--gl-color-data-aqua-300);
+$gl-color-data-aqua-400: var(--gl-color-data-aqua-400);
+$gl-color-data-aqua-500: var(--gl-color-data-aqua-500);
+$gl-color-data-aqua-600: var(--gl-color-data-aqua-600);
+$gl-color-data-aqua-700: var(--gl-color-data-aqua-700);
+$gl-color-data-aqua-800: var(--gl-color-data-aqua-800);
+$gl-color-data-aqua-900: var(--gl-color-data-aqua-900);
+$gl-color-data-aqua-950: var(--gl-color-data-aqua-950);
+$gl-color-data-blue-50: var(--gl-color-data-blue-50);
+$gl-color-data-blue-100: var(--gl-color-data-blue-100);
+$gl-color-data-blue-200: var(--gl-color-data-blue-200);
+$gl-color-data-blue-300: var(--gl-color-data-blue-300);
+$gl-color-data-blue-400: var(--gl-color-data-blue-400);
+$gl-color-data-blue-500: var(--gl-color-data-blue-500);
+$gl-color-data-blue-600: var(--gl-color-data-blue-600);
+$gl-color-data-blue-700: var(--gl-color-data-blue-700);
+$gl-color-data-blue-800: var(--gl-color-data-blue-800);
+$gl-color-data-blue-900: var(--gl-color-data-blue-900);
+$gl-color-data-blue-950: var(--gl-color-data-blue-950);
+$gl-color-data-magenta-50: var(--gl-color-data-magenta-50);
+$gl-color-data-magenta-100: var(--gl-color-data-magenta-100);
+$gl-color-data-magenta-200: var(--gl-color-data-magenta-200);
+$gl-color-data-magenta-300: var(--gl-color-data-magenta-300);
+$gl-color-data-magenta-400: var(--gl-color-data-magenta-400);
+$gl-color-data-magenta-500: var(--gl-color-data-magenta-500);
+$gl-color-data-magenta-600: var(--gl-color-data-magenta-600);
+$gl-color-data-magenta-700: var(--gl-color-data-magenta-700);
+$gl-color-data-magenta-800: var(--gl-color-data-magenta-800);
+$gl-color-data-magenta-900: var(--gl-color-data-magenta-900);
+$gl-color-data-magenta-950: var(--gl-color-data-magenta-950);
+$gl-color-data-orange-50: var(--gl-color-data-orange-50);
+$gl-color-data-orange-100: var(--gl-color-data-orange-100);
+$gl-color-data-orange-200: var(--gl-color-data-orange-200);
+$gl-color-data-orange-300: var(--gl-color-data-orange-300);
+$gl-color-data-orange-400: var(--gl-color-data-orange-400);
+$gl-color-data-orange-500: var(--gl-color-data-orange-500);
+$gl-color-data-orange-600: var(--gl-color-data-orange-600);
+$gl-color-data-orange-700: var(--gl-color-data-orange-700);
+$gl-color-data-orange-800: var(--gl-color-data-orange-800);
+$gl-color-data-orange-900: var(--gl-color-data-orange-900);
+$gl-color-data-orange-950: var(--gl-color-data-orange-950);
 $gl-color-theme-indigo-10: var(--gl-color-theme-indigo-10);
 $gl-color-theme-indigo-50: var(--gl-color-theme-indigo-50);
 $gl-color-theme-indigo-100: var(--gl-color-theme-indigo-100);
@@ -260,61 +315,6 @@ $gl-color-brand-gray-03: var(--gl-color-brand-gray-03);
 $gl-color-brand-gray-04: var(--gl-color-brand-gray-04);
 $gl-color-brand-gray-05: var(--gl-color-brand-gray-05);
 $gl-color-brand-pink-01g: var(--gl-color-brand-pink-01g);
-$data-viz-green-50: var(--data-viz-green-50);
-$data-viz-green-100: var(--data-viz-green-100);
-$data-viz-green-200: var(--data-viz-green-200);
-$data-viz-green-300: var(--data-viz-green-300);
-$data-viz-green-400: var(--data-viz-green-400);
-$data-viz-green-500: var(--data-viz-green-500);
-$data-viz-green-600: var(--data-viz-green-600);
-$data-viz-green-700: var(--data-viz-green-700);
-$data-viz-green-800: var(--data-viz-green-800);
-$data-viz-green-900: var(--data-viz-green-900);
-$data-viz-green-950: var(--data-viz-green-950);
-$data-viz-aqua-50: var(--data-viz-aqua-50);
-$data-viz-aqua-100: var(--data-viz-aqua-100);
-$data-viz-aqua-200: var(--data-viz-aqua-200);
-$data-viz-aqua-300: var(--data-viz-aqua-300);
-$data-viz-aqua-400: var(--data-viz-aqua-400);
-$data-viz-aqua-500: var(--data-viz-aqua-500);
-$data-viz-aqua-600: var(--data-viz-aqua-600);
-$data-viz-aqua-700: var(--data-viz-aqua-700);
-$data-viz-aqua-800: var(--data-viz-aqua-800);
-$data-viz-aqua-900: var(--data-viz-aqua-900);
-$data-viz-aqua-950: var(--data-viz-aqua-950);
-$data-viz-blue-50: var(--data-viz-blue-50);
-$data-viz-blue-100: var(--data-viz-blue-100);
-$data-viz-blue-200: var(--data-viz-blue-200);
-$data-viz-blue-300: var(--data-viz-blue-300);
-$data-viz-blue-400: var(--data-viz-blue-400);
-$data-viz-blue-500: var(--data-viz-blue-500);
-$data-viz-blue-600: var(--data-viz-blue-600);
-$data-viz-blue-700: var(--data-viz-blue-700);
-$data-viz-blue-800: var(--data-viz-blue-800);
-$data-viz-blue-900: var(--data-viz-blue-900);
-$data-viz-blue-950: var(--data-viz-blue-950);
-$data-viz-magenta-50: var(--data-viz-magenta-50);
-$data-viz-magenta-100: var(--data-viz-magenta-100);
-$data-viz-magenta-200: var(--data-viz-magenta-200);
-$data-viz-magenta-300: var(--data-viz-magenta-300);
-$data-viz-magenta-400: var(--data-viz-magenta-400);
-$data-viz-magenta-500: var(--data-viz-magenta-500);
-$data-viz-magenta-600: var(--data-viz-magenta-600);
-$data-viz-magenta-700: var(--data-viz-magenta-700);
-$data-viz-magenta-800: var(--data-viz-magenta-800);
-$data-viz-magenta-900: var(--data-viz-magenta-900);
-$data-viz-magenta-950: var(--data-viz-magenta-950);
-$data-viz-orange-50: var(--data-viz-orange-50);
-$data-viz-orange-100: var(--data-viz-orange-100);
-$data-viz-orange-200: var(--data-viz-orange-200);
-$data-viz-orange-300: var(--data-viz-orange-300);
-$data-viz-orange-400: var(--data-viz-orange-400);
-$data-viz-orange-500: var(--data-viz-orange-500);
-$data-viz-orange-600: var(--data-viz-orange-600);
-$data-viz-orange-700: var(--data-viz-orange-700);
-$data-viz-orange-800: var(--data-viz-orange-800);
-$data-viz-orange-900: var(--data-viz-orange-900);
-$data-viz-orange-950: var(--data-viz-orange-950);
 $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
 $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);
 $gl-alert-neutral-border-top-color: var(--gl-alert-neutral-border-top-color);
@@ -747,6 +747,61 @@ $gl-control-text-color-valid: var(--gl-control-text-color-valid);
 $gl-control-placeholder-color: var(--gl-control-placeholder-color);
 $gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
 $gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
+$data-viz-green-50: var(--data-viz-green-50);
+$data-viz-green-100: var(--data-viz-green-100);
+$data-viz-green-200: var(--data-viz-green-200);
+$data-viz-green-300: var(--data-viz-green-300);
+$data-viz-green-400: var(--data-viz-green-400);
+$data-viz-green-500: var(--data-viz-green-500);
+$data-viz-green-600: var(--data-viz-green-600);
+$data-viz-green-700: var(--data-viz-green-700);
+$data-viz-green-800: var(--data-viz-green-800);
+$data-viz-green-900: var(--data-viz-green-900);
+$data-viz-green-950: var(--data-viz-green-950);
+$data-viz-aqua-50: var(--data-viz-aqua-50);
+$data-viz-aqua-100: var(--data-viz-aqua-100);
+$data-viz-aqua-200: var(--data-viz-aqua-200);
+$data-viz-aqua-300: var(--data-viz-aqua-300);
+$data-viz-aqua-400: var(--data-viz-aqua-400);
+$data-viz-aqua-500: var(--data-viz-aqua-500);
+$data-viz-aqua-600: var(--data-viz-aqua-600);
+$data-viz-aqua-700: var(--data-viz-aqua-700);
+$data-viz-aqua-800: var(--data-viz-aqua-800);
+$data-viz-aqua-900: var(--data-viz-aqua-900);
+$data-viz-aqua-950: var(--data-viz-aqua-950);
+$data-viz-blue-50: var(--data-viz-blue-50);
+$data-viz-blue-100: var(--data-viz-blue-100);
+$data-viz-blue-200: var(--data-viz-blue-200);
+$data-viz-blue-300: var(--data-viz-blue-300);
+$data-viz-blue-400: var(--data-viz-blue-400);
+$data-viz-blue-500: var(--data-viz-blue-500);
+$data-viz-blue-600: var(--data-viz-blue-600);
+$data-viz-blue-700: var(--data-viz-blue-700);
+$data-viz-blue-800: var(--data-viz-blue-800);
+$data-viz-blue-900: var(--data-viz-blue-900);
+$data-viz-blue-950: var(--data-viz-blue-950);
+$data-viz-magenta-50: var(--data-viz-magenta-50);
+$data-viz-magenta-100: var(--data-viz-magenta-100);
+$data-viz-magenta-200: var(--data-viz-magenta-200);
+$data-viz-magenta-300: var(--data-viz-magenta-300);
+$data-viz-magenta-400: var(--data-viz-magenta-400);
+$data-viz-magenta-500: var(--data-viz-magenta-500);
+$data-viz-magenta-600: var(--data-viz-magenta-600);
+$data-viz-magenta-700: var(--data-viz-magenta-700);
+$data-viz-magenta-800: var(--data-viz-magenta-800);
+$data-viz-magenta-900: var(--data-viz-magenta-900);
+$data-viz-magenta-950: var(--data-viz-magenta-950);
+$data-viz-orange-50: var(--data-viz-orange-50);
+$data-viz-orange-100: var(--data-viz-orange-100);
+$data-viz-orange-200: var(--data-viz-orange-200);
+$data-viz-orange-300: var(--data-viz-orange-300);
+$data-viz-orange-400: var(--data-viz-orange-400);
+$data-viz-orange-500: var(--data-viz-orange-500);
+$data-viz-orange-600: var(--data-viz-orange-600);
+$data-viz-orange-700: var(--data-viz-orange-700);
+$data-viz-orange-800: var(--data-viz-orange-800);
+$data-viz-orange-900: var(--data-viz-orange-900);
+$data-viz-orange-950: var(--data-viz-orange-950);
 $theme-indigo-10: var(--theme-indigo-10);
 $theme-indigo-50: var(--theme-indigo-50);
 $theme-indigo-100: var(--theme-indigo-100);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "107.2.1",
+  "version": "107.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -144,7 +144,7 @@
     "axe-playwright": "^2.0.3",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
-    "cypress": "13.17.0",
+    "cypress": "14.0.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",