@gitlab/ui 107.2.1 → 107.3.0

package/dist/tokens/css/tokens.dark.css

@@ -96,6 +96,61 @@
   --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;
@@ -183,6 +238,44 @@
   --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;
   --data-viz-green-100: #1a4500;
   --data-viz-green-200: #275600;
@@ -238,44 +331,6 @@
   --data-viz-orange-800: #eebd8c;
   --data-viz-orange-900: #f5d6b3;
   --data-viz-orange-950: #fae8d1;
-  --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;
   --theme-indigo-50: #222261;
   --theme-indigo-100: #303083;

package/dist/tokens/js/tokens.dark.js

@@ -173,6 +173,61 @@ export const GL_COLOR_RED_700 = '#ae1800';
 export const GL_COLOR_RED_800 = '#8d1300';
 export const GL_COLOR_RED_900 = '#660e00';
 export const GL_COLOR_RED_950 = '#4d0a00';
+export const GL_COLOR_DATA_GREEN_50 = '#ddfab7';
+export const GL_COLOR_DATA_GREEN_100 = '#c6ed94';
+export const GL_COLOR_DATA_GREEN_200 = '#b0d97b';
+export const GL_COLOR_DATA_GREEN_300 = '#94c25e';
+export const GL_COLOR_DATA_GREEN_400 = '#81ac41';
+export const GL_COLOR_DATA_GREEN_500 = '#619025';
+export const GL_COLOR_DATA_GREEN_600 = '#4e7f0e';
+export const GL_COLOR_DATA_GREEN_700 = '#366800';
+export const GL_COLOR_DATA_GREEN_800 = '#275600';
+export const GL_COLOR_DATA_GREEN_900 = '#1a4500';
+export const GL_COLOR_DATA_GREEN_950 = '#133a03';
+export const GL_COLOR_DATA_AQUA_50 = '#b5fefd';
+export const GL_COLOR_DATA_AQUA_100 = '#93f2ef';
+export const GL_COLOR_DATA_AQUA_200 = '#5edee3';
+export const GL_COLOR_DATA_AQUA_300 = '#32c5d2';
+export const GL_COLOR_DATA_AQUA_400 = '#00acc4';
+export const GL_COLOR_DATA_AQUA_500 = '#0090b1';
+export const GL_COLOR_DATA_AQUA_600 = '#007b9b';
+export const GL_COLOR_DATA_AQUA_700 = '#006381';
+export const GL_COLOR_DATA_AQUA_800 = '#00516c';
+export const GL_COLOR_DATA_AQUA_900 = '#004059';
+export const GL_COLOR_DATA_AQUA_950 = '#00344b';
+export const GL_COLOR_DATA_BLUE_50 = '#e9ebff';
+export const GL_COLOR_DATA_BLUE_100 = '#d2dcff';
+export const GL_COLOR_DATA_BLUE_200 = '#b7c6ff';
+export const GL_COLOR_DATA_BLUE_300 = '#97acff';
+export const GL_COLOR_DATA_BLUE_400 = '#7992f5';
+export const GL_COLOR_DATA_BLUE_500 = '#617ae2';
+export const GL_COLOR_DATA_BLUE_600 = '#4e65cd';
+export const GL_COLOR_DATA_BLUE_700 = '#3f51ae';
+export const GL_COLOR_DATA_BLUE_800 = '#374291';
+export const GL_COLOR_DATA_BLUE_900 = '#303470';
+export const GL_COLOR_DATA_BLUE_950 = '#2a2b59';
+export const GL_COLOR_DATA_MAGENTA_50 = '#ffe3eb';
+export const GL_COLOR_DATA_MAGENTA_100 = '#ffccdb';
+export const GL_COLOR_DATA_MAGENTA_200 = '#fcacc5';
+export const GL_COLOR_DATA_MAGENTA_300 = '#f88aaf';
+export const GL_COLOR_DATA_MAGENTA_400 = '#e86e9a';
+export const GL_COLOR_DATA_MAGENTA_500 = '#cf4d81';
+export const GL_COLOR_DATA_MAGENTA_600 = '#b93d71';
+export const GL_COLOR_DATA_MAGENTA_700 = '#9a2e5d';
+export const GL_COLOR_DATA_MAGENTA_800 = '#7c214f';
+export const GL_COLOR_DATA_MAGENTA_900 = '#661e3a';
+export const GL_COLOR_DATA_MAGENTA_950 = '#541d31';
+export const GL_COLOR_DATA_ORANGE_50 = '#fae8d1';
+export const GL_COLOR_DATA_ORANGE_100 = '#f5d6b3';
+export const GL_COLOR_DATA_ORANGE_200 = '#eebd8c';
+export const GL_COLOR_DATA_ORANGE_300 = '#e99b60';
+export const GL_COLOR_DATA_ORANGE_400 = '#e07e41';
+export const GL_COLOR_DATA_ORANGE_500 = '#c95d2e';
+export const GL_COLOR_DATA_ORANGE_600 = '#b14f18';
+export const GL_COLOR_DATA_ORANGE_700 = '#92430a';
+export const GL_COLOR_DATA_ORANGE_800 = '#6f3500';
+export const GL_COLOR_DATA_ORANGE_900 = '#5e2f05';
+export const GL_COLOR_DATA_ORANGE_950 = '#4b2707';
 export const GL_COLOR_THEME_INDIGO_10 = '#f8f8ff';
 export const GL_COLOR_THEME_INDIGO_50 = '#f1f1ff';
 export const GL_COLOR_THEME_INDIGO_100 = '#dbdbf8';
@@ -260,61 +315,6 @@ 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';
-export const DATA_VIZ_GREEN_300 = '#366800';
-export const DATA_VIZ_GREEN_400 = '#4e7f0e';
-export const DATA_VIZ_GREEN_500 = '#619025';
-export const DATA_VIZ_GREEN_600 = '#81ac41';
-export const DATA_VIZ_GREEN_700 = '#94c25e';
-export const DATA_VIZ_GREEN_800 = '#b0d97b';
-export const DATA_VIZ_GREEN_900 = '#c6ed94';
-export const DATA_VIZ_GREEN_950 = '#ddfab7';
-export const DATA_VIZ_AQUA_50 = '#00344b';
-export const DATA_VIZ_AQUA_100 = '#004059';
-export const DATA_VIZ_AQUA_200 = '#00516c';
-export const DATA_VIZ_AQUA_300 = '#006381';
-export const DATA_VIZ_AQUA_400 = '#007b9b';
-export const DATA_VIZ_AQUA_500 = '#0090b1';
-export const DATA_VIZ_AQUA_600 = '#00acc4';
-export const DATA_VIZ_AQUA_700 = '#32c5d2';
-export const DATA_VIZ_AQUA_800 = '#5edee3';
-export const DATA_VIZ_AQUA_900 = '#93f2ef';
-export const DATA_VIZ_AQUA_950 = '#b5fefd';
-export const DATA_VIZ_BLUE_50 = '#2a2b59';
-export const DATA_VIZ_BLUE_100 = '#303470';
-export const DATA_VIZ_BLUE_200 = '#374291';
-export const DATA_VIZ_BLUE_300 = '#3f51ae';
-export const DATA_VIZ_BLUE_400 = '#4e65cd';
-export const DATA_VIZ_BLUE_500 = '#617ae2';
-export const DATA_VIZ_BLUE_600 = '#7992f5';
-export const DATA_VIZ_BLUE_700 = '#97acff';
-export const DATA_VIZ_BLUE_800 = '#b7c6ff';
-export const DATA_VIZ_BLUE_900 = '#d2dcff';
-export const DATA_VIZ_BLUE_950 = '#e9ebff';
-export const DATA_VIZ_MAGENTA_50 = '#541d31';
-export const DATA_VIZ_MAGENTA_100 = '#661e3a';
-export const DATA_VIZ_MAGENTA_200 = '#7c214f';
-export const DATA_VIZ_MAGENTA_300 = '#9a2e5d';
-export const DATA_VIZ_MAGENTA_400 = '#b93d71';
-export const DATA_VIZ_MAGENTA_500 = '#cf4d81';
-export const DATA_VIZ_MAGENTA_600 = '#e86e9a';
-export const DATA_VIZ_MAGENTA_700 = '#f88aaf';
-export const DATA_VIZ_MAGENTA_800 = '#fcacc5';
-export const DATA_VIZ_MAGENTA_900 = '#ffccdb';
-export const DATA_VIZ_MAGENTA_950 = '#ffe3eb';
-export const DATA_VIZ_ORANGE_50 = '#4b2707';
-export const DATA_VIZ_ORANGE_100 = '#5e2f05';
-export const DATA_VIZ_ORANGE_200 = '#6f3500';
-export const DATA_VIZ_ORANGE_300 = '#92430a';
-export const DATA_VIZ_ORANGE_400 = '#b14f18';
-export const DATA_VIZ_ORANGE_500 = '#c95d2e';
-export const DATA_VIZ_ORANGE_600 = '#e07e41';
-export const DATA_VIZ_ORANGE_700 = '#e99b60';
-export const DATA_VIZ_ORANGE_800 = '#eebd8c';
-export const DATA_VIZ_ORANGE_900 = '#f5d6b3';
-export const DATA_VIZ_ORANGE_950 = '#fae8d1';
 export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#fff';
 export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#28272d';
 export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = '#89888d';
@@ -747,6 +747,61 @@ export const GL_CONTROL_TEXT_COLOR_VALID = '#52b87a';
 export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d';
 export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#18171d';
 export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#89888d';
+export const DATA_VIZ_GREEN_50 = '#133a03';
+export const DATA_VIZ_GREEN_100 = '#1a4500';
+export const DATA_VIZ_GREEN_200 = '#275600';
+export const DATA_VIZ_GREEN_300 = '#366800';
+export const DATA_VIZ_GREEN_400 = '#4e7f0e';
+export const DATA_VIZ_GREEN_500 = '#619025';
+export const DATA_VIZ_GREEN_600 = '#81ac41';
+export const DATA_VIZ_GREEN_700 = '#94c25e';
+export const DATA_VIZ_GREEN_800 = '#b0d97b';
+export const DATA_VIZ_GREEN_900 = '#c6ed94';
+export const DATA_VIZ_GREEN_950 = '#ddfab7';
+export const DATA_VIZ_AQUA_50 = '#00344b';
+export const DATA_VIZ_AQUA_100 = '#004059';
+export const DATA_VIZ_AQUA_200 = '#00516c';
+export const DATA_VIZ_AQUA_300 = '#006381';
+export const DATA_VIZ_AQUA_400 = '#007b9b';
+export const DATA_VIZ_AQUA_500 = '#0090b1';
+export const DATA_VIZ_AQUA_600 = '#00acc4';
+export const DATA_VIZ_AQUA_700 = '#32c5d2';
+export const DATA_VIZ_AQUA_800 = '#5edee3';
+export const DATA_VIZ_AQUA_900 = '#93f2ef';
+export const DATA_VIZ_AQUA_950 = '#b5fefd';
+export const DATA_VIZ_BLUE_50 = '#2a2b59';
+export const DATA_VIZ_BLUE_100 = '#303470';
+export const DATA_VIZ_BLUE_200 = '#374291';
+export const DATA_VIZ_BLUE_300 = '#3f51ae';
+export const DATA_VIZ_BLUE_400 = '#4e65cd';
+export const DATA_VIZ_BLUE_500 = '#617ae2';
+export const DATA_VIZ_BLUE_600 = '#7992f5';
+export const DATA_VIZ_BLUE_700 = '#97acff';
+export const DATA_VIZ_BLUE_800 = '#b7c6ff';
+export const DATA_VIZ_BLUE_900 = '#d2dcff';
+export const DATA_VIZ_BLUE_950 = '#e9ebff';
+export const DATA_VIZ_MAGENTA_50 = '#541d31';
+export const DATA_VIZ_MAGENTA_100 = '#661e3a';
+export const DATA_VIZ_MAGENTA_200 = '#7c214f';
+export const DATA_VIZ_MAGENTA_300 = '#9a2e5d';
+export const DATA_VIZ_MAGENTA_400 = '#b93d71';
+export const DATA_VIZ_MAGENTA_500 = '#cf4d81';
+export const DATA_VIZ_MAGENTA_600 = '#e86e9a';
+export const DATA_VIZ_MAGENTA_700 = '#f88aaf';
+export const DATA_VIZ_MAGENTA_800 = '#fcacc5';
+export const DATA_VIZ_MAGENTA_900 = '#ffccdb';
+export const DATA_VIZ_MAGENTA_950 = '#ffe3eb';
+export const DATA_VIZ_ORANGE_50 = '#4b2707';
+export const DATA_VIZ_ORANGE_100 = '#5e2f05';
+export const DATA_VIZ_ORANGE_200 = '#6f3500';
+export const DATA_VIZ_ORANGE_300 = '#92430a';
+export const DATA_VIZ_ORANGE_400 = '#b14f18';
+export const DATA_VIZ_ORANGE_500 = '#c95d2e';
+export const DATA_VIZ_ORANGE_600 = '#e07e41';
+export const DATA_VIZ_ORANGE_700 = '#e99b60';
+export const DATA_VIZ_ORANGE_800 = '#eebd8c';
+export const DATA_VIZ_ORANGE_900 = '#f5d6b3';
+export const DATA_VIZ_ORANGE_950 = '#fae8d1';
 export const THEME_INDIGO_10 = '#14143d';
 export const THEME_INDIGO_50 = '#222261';
 export const THEME_INDIGO_100 = '#303083';

package/dist/tokens/js/tokens.js

@@ -173,6 +173,61 @@ export const GL_COLOR_RED_700 = '#ae1800';
 export const GL_COLOR_RED_800 = '#8d1300';
 export const GL_COLOR_RED_900 = '#660e00';
 export const GL_COLOR_RED_950 = '#4d0a00';
+export const GL_COLOR_DATA_GREEN_50 = '#ddfab7';
+export const GL_COLOR_DATA_GREEN_100 = '#c6ed94';
+export const GL_COLOR_DATA_GREEN_200 = '#b0d97b';
+export const GL_COLOR_DATA_GREEN_300 = '#94c25e';
+export const GL_COLOR_DATA_GREEN_400 = '#81ac41';
+export const GL_COLOR_DATA_GREEN_500 = '#619025';
+export const GL_COLOR_DATA_GREEN_600 = '#4e7f0e';
+export const GL_COLOR_DATA_GREEN_700 = '#366800';
+export const GL_COLOR_DATA_GREEN_800 = '#275600';
+export const GL_COLOR_DATA_GREEN_900 = '#1a4500';
+export const GL_COLOR_DATA_GREEN_950 = '#133a03';
+export const GL_COLOR_DATA_AQUA_50 = '#b5fefd';
+export const GL_COLOR_DATA_AQUA_100 = '#93f2ef';
+export const GL_COLOR_DATA_AQUA_200 = '#5edee3';
+export const GL_COLOR_DATA_AQUA_300 = '#32c5d2';
+export const GL_COLOR_DATA_AQUA_400 = '#00acc4';
+export const GL_COLOR_DATA_AQUA_500 = '#0090b1';
+export const GL_COLOR_DATA_AQUA_600 = '#007b9b';
+export const GL_COLOR_DATA_AQUA_700 = '#006381';
+export const GL_COLOR_DATA_AQUA_800 = '#00516c';
+export const GL_COLOR_DATA_AQUA_900 = '#004059';
+export const GL_COLOR_DATA_AQUA_950 = '#00344b';
+export const GL_COLOR_DATA_BLUE_50 = '#e9ebff';
+export const GL_COLOR_DATA_BLUE_100 = '#d2dcff';
+export const GL_COLOR_DATA_BLUE_200 = '#b7c6ff';
+export const GL_COLOR_DATA_BLUE_300 = '#97acff';
+export const GL_COLOR_DATA_BLUE_400 = '#7992f5';
+export const GL_COLOR_DATA_BLUE_500 = '#617ae2';
+export const GL_COLOR_DATA_BLUE_600 = '#4e65cd';
+export const GL_COLOR_DATA_BLUE_700 = '#3f51ae';
+export const GL_COLOR_DATA_BLUE_800 = '#374291';
+export const GL_COLOR_DATA_BLUE_900 = '#303470';
+export const GL_COLOR_DATA_BLUE_950 = '#2a2b59';
+export const GL_COLOR_DATA_MAGENTA_50 = '#ffe3eb';
+export const GL_COLOR_DATA_MAGENTA_100 = '#ffccdb';
+export const GL_COLOR_DATA_MAGENTA_200 = '#fcacc5';
+export const GL_COLOR_DATA_MAGENTA_300 = '#f88aaf';
+export const GL_COLOR_DATA_MAGENTA_400 = '#e86e9a';
+export const GL_COLOR_DATA_MAGENTA_500 = '#cf4d81';
+export const GL_COLOR_DATA_MAGENTA_600 = '#b93d71';
+export const GL_COLOR_DATA_MAGENTA_700 = '#9a2e5d';
+export const GL_COLOR_DATA_MAGENTA_800 = '#7c214f';
+export const GL_COLOR_DATA_MAGENTA_900 = '#661e3a';
+export const GL_COLOR_DATA_MAGENTA_950 = '#541d31';
+export const GL_COLOR_DATA_ORANGE_50 = '#fae8d1';
+export const GL_COLOR_DATA_ORANGE_100 = '#f5d6b3';
+export const GL_COLOR_DATA_ORANGE_200 = '#eebd8c';
+export const GL_COLOR_DATA_ORANGE_300 = '#e99b60';
+export const GL_COLOR_DATA_ORANGE_400 = '#e07e41';
+export const GL_COLOR_DATA_ORANGE_500 = '#c95d2e';
+export const GL_COLOR_DATA_ORANGE_600 = '#b14f18';
+export const GL_COLOR_DATA_ORANGE_700 = '#92430a';
+export const GL_COLOR_DATA_ORANGE_800 = '#6f3500';
+export const GL_COLOR_DATA_ORANGE_900 = '#5e2f05';
+export const GL_COLOR_DATA_ORANGE_950 = '#4b2707';
 export const GL_COLOR_THEME_INDIGO_10 = '#f8f8ff';
 export const GL_COLOR_THEME_INDIGO_50 = '#f1f1ff';
 export const GL_COLOR_THEME_INDIGO_100 = '#dbdbf8';
@@ -260,61 +315,6 @@ 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';
-export const DATA_VIZ_GREEN_300 = '#94c25e';
-export const DATA_VIZ_GREEN_400 = '#81ac41';
-export const DATA_VIZ_GREEN_500 = '#619025';
-export const DATA_VIZ_GREEN_600 = '#4e7f0e';
-export const DATA_VIZ_GREEN_700 = '#366800';
-export const DATA_VIZ_GREEN_800 = '#275600';
-export const DATA_VIZ_GREEN_900 = '#1a4500';
-export const DATA_VIZ_GREEN_950 = '#133a03';
-export const DATA_VIZ_AQUA_50 = '#b5fefd';
-export const DATA_VIZ_AQUA_100 = '#93f2ef';
-export const DATA_VIZ_AQUA_200 = '#5edee3';
-export const DATA_VIZ_AQUA_300 = '#32c5d2';
-export const DATA_VIZ_AQUA_400 = '#00acc4';
-export const DATA_VIZ_AQUA_500 = '#0090b1';
-export const DATA_VIZ_AQUA_600 = '#007b9b';
-export const DATA_VIZ_AQUA_700 = '#006381';
-export const DATA_VIZ_AQUA_800 = '#00516c';
-export const DATA_VIZ_AQUA_900 = '#004059';
-export const DATA_VIZ_AQUA_950 = '#00344b';
-export const DATA_VIZ_BLUE_50 = '#e9ebff';
-export const DATA_VIZ_BLUE_100 = '#d2dcff';
-export const DATA_VIZ_BLUE_200 = '#b7c6ff';
-export const DATA_VIZ_BLUE_300 = '#97acff';
-export const DATA_VIZ_BLUE_400 = '#7992f5';
-export const DATA_VIZ_BLUE_500 = '#617ae2';
-export const DATA_VIZ_BLUE_600 = '#4e65cd';
-export const DATA_VIZ_BLUE_700 = '#3f51ae';
-export const DATA_VIZ_BLUE_800 = '#374291';
-export const DATA_VIZ_BLUE_900 = '#303470';
-export const DATA_VIZ_BLUE_950 = '#2a2b59';
-export const DATA_VIZ_MAGENTA_50 = '#ffe3eb';
-export const DATA_VIZ_MAGENTA_100 = '#ffccdb';
-export const DATA_VIZ_MAGENTA_200 = '#fcacc5';
-export const DATA_VIZ_MAGENTA_300 = '#f88aaf';
-export const DATA_VIZ_MAGENTA_400 = '#e86e9a';
-export const DATA_VIZ_MAGENTA_500 = '#cf4d81';
-export const DATA_VIZ_MAGENTA_600 = '#b93d71';
-export const DATA_VIZ_MAGENTA_700 = '#9a2e5d';
-export const DATA_VIZ_MAGENTA_800 = '#7c214f';
-export const DATA_VIZ_MAGENTA_900 = '#661e3a';
-export const DATA_VIZ_MAGENTA_950 = '#541d31';
-export const DATA_VIZ_ORANGE_50 = '#fae8d1';
-export const DATA_VIZ_ORANGE_100 = '#f5d6b3';
-export const DATA_VIZ_ORANGE_200 = '#eebd8c';
-export const DATA_VIZ_ORANGE_300 = '#e99b60';
-export const DATA_VIZ_ORANGE_400 = '#e07e41';
-export const DATA_VIZ_ORANGE_500 = '#c95d2e';
-export const DATA_VIZ_ORANGE_600 = '#b14f18';
-export const DATA_VIZ_ORANGE_700 = '#92430a';
-export const DATA_VIZ_ORANGE_800 = '#6f3500';
-export const DATA_VIZ_ORANGE_900 = '#5e2f05';
-export const DATA_VIZ_ORANGE_950 = '#4b2707';
 export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#18171d';
 export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#ececef';
 export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = 'transparent';
@@ -747,6 +747,61 @@ export const GL_CONTROL_TEXT_COLOR_VALID = '#217645';
 export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d';
 export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff';
 export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#737278';
+export const DATA_VIZ_GREEN_50 = '#ddfab7';
+export const DATA_VIZ_GREEN_100 = '#c6ed94';
+export const DATA_VIZ_GREEN_200 = '#b0d97b';
+export const DATA_VIZ_GREEN_300 = '#94c25e';
+export const DATA_VIZ_GREEN_400 = '#81ac41';
+export const DATA_VIZ_GREEN_500 = '#619025';
+export const DATA_VIZ_GREEN_600 = '#4e7f0e';
+export const DATA_VIZ_GREEN_700 = '#366800';
+export const DATA_VIZ_GREEN_800 = '#275600';
+export const DATA_VIZ_GREEN_900 = '#1a4500';
+export const DATA_VIZ_GREEN_950 = '#133a03';
+export const DATA_VIZ_AQUA_50 = '#b5fefd';
+export const DATA_VIZ_AQUA_100 = '#93f2ef';
+export const DATA_VIZ_AQUA_200 = '#5edee3';
+export const DATA_VIZ_AQUA_300 = '#32c5d2';
+export const DATA_VIZ_AQUA_400 = '#00acc4';
+export const DATA_VIZ_AQUA_500 = '#0090b1';
+export const DATA_VIZ_AQUA_600 = '#007b9b';
+export const DATA_VIZ_AQUA_700 = '#006381';
+export const DATA_VIZ_AQUA_800 = '#00516c';
+export const DATA_VIZ_AQUA_900 = '#004059';
+export const DATA_VIZ_AQUA_950 = '#00344b';
+export const DATA_VIZ_BLUE_50 = '#e9ebff';
+export const DATA_VIZ_BLUE_100 = '#d2dcff';
+export const DATA_VIZ_BLUE_200 = '#b7c6ff';
+export const DATA_VIZ_BLUE_300 = '#97acff';
+export const DATA_VIZ_BLUE_400 = '#7992f5';
+export const DATA_VIZ_BLUE_500 = '#617ae2';
+export const DATA_VIZ_BLUE_600 = '#4e65cd';
+export const DATA_VIZ_BLUE_700 = '#3f51ae';
+export const DATA_VIZ_BLUE_800 = '#374291';
+export const DATA_VIZ_BLUE_900 = '#303470';
+export const DATA_VIZ_BLUE_950 = '#2a2b59';
+export const DATA_VIZ_MAGENTA_50 = '#ffe3eb';
+export const DATA_VIZ_MAGENTA_100 = '#ffccdb';
+export const DATA_VIZ_MAGENTA_200 = '#fcacc5';
+export const DATA_VIZ_MAGENTA_300 = '#f88aaf';
+export const DATA_VIZ_MAGENTA_400 = '#e86e9a';
+export const DATA_VIZ_MAGENTA_500 = '#cf4d81';
+export const DATA_VIZ_MAGENTA_600 = '#b93d71';
+export const DATA_VIZ_MAGENTA_700 = '#9a2e5d';
+export const DATA_VIZ_MAGENTA_800 = '#7c214f';
+export const DATA_VIZ_MAGENTA_900 = '#661e3a';
+export const DATA_VIZ_MAGENTA_950 = '#541d31';
+export const DATA_VIZ_ORANGE_50 = '#fae8d1';
+export const DATA_VIZ_ORANGE_100 = '#f5d6b3';
+export const DATA_VIZ_ORANGE_200 = '#eebd8c';
+export const DATA_VIZ_ORANGE_300 = '#e99b60';
+export const DATA_VIZ_ORANGE_400 = '#e07e41';
+export const DATA_VIZ_ORANGE_500 = '#c95d2e';
+export const DATA_VIZ_ORANGE_600 = '#b14f18';
+export const DATA_VIZ_ORANGE_700 = '#92430a';
+export const DATA_VIZ_ORANGE_800 = '#6f3500';
+export const DATA_VIZ_ORANGE_900 = '#5e2f05';
+export const DATA_VIZ_ORANGE_950 = '#4b2707';
 export const THEME_INDIGO_10 = '#f8f8ff';
 export const THEME_INDIGO_50 = '#f1f1ff';
 export const THEME_INDIGO_100 = '#dbdbf8';