@gitlab/ui/src/tokens/build/css/tokens.css

GitLab UI Components

/**
 * Do not edit directly, this file was auto-generated.
 */

:root, .gl-light-scope {
  --gl-border-radius-full: 9999px;
  --gl-color-alpha-0: transparent;
  --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
  --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
  --gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
  --gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
  --gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
  --gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
  --gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
  --gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
  --gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
  --gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
  --gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
  --gl-color-alpha-light-16: rgba(255, 255, 255, 0.16);
  --gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
  --gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);
  --gl-color-blue-50: #e9f3fc;
  --gl-color-blue-100: #cbe2f9;
  --gl-color-blue-200: #9dc7f1;
  --gl-color-blue-300: #63a6e9;
  --gl-color-blue-400: #428fdc;
  --gl-color-blue-500: #1f75cb;
  --gl-color-blue-600: #2f68b4;
  --gl-color-blue-700: #2f5ca0;
  --gl-color-blue-800: #284779;
  --gl-color-blue-900: #213454;
  --gl-color-blue-950: #1d283e;
  --gl-color-neutral-0: #fff;
  --gl-color-neutral-10: #fbfafd;
  --gl-color-neutral-50: #ececef;
  --gl-color-neutral-100: #dcdcde;
  --gl-color-neutral-200: #bfbfc3;
  --gl-color-neutral-300: #a4a3a8;
  --gl-color-neutral-400: #89888d;
  --gl-color-neutral-500: #737278;
  --gl-color-neutral-600: #626168;
  --gl-color-neutral-700: #4c4b51;
  --gl-color-neutral-800: #3a383f;
  --gl-color-neutral-900: #28272d;
  --gl-color-neutral-950: #18171d;
  --gl-color-neutral-1000: #050506;
  --gl-color-green-50: #ecf4ee;
  --gl-color-green-100: #c3e6cd;
  --gl-color-green-200: #91d4a8;
  --gl-color-green-300: #52b87a;
  --gl-color-green-400: #2da160;
  --gl-color-green-500: #108548;
  --gl-color-green-600: #2f7549;
  --gl-color-green-700: #306440;
  --gl-color-green-800: #225131;
  --gl-color-green-900: #1e3e28;
  --gl-color-green-950: #17291c;
  --gl-color-orange-50: #fdf1dd;
  --gl-color-orange-100: #f5d9a8;
  --gl-color-orange-200: #e9be74;
  --gl-color-orange-300: #d99530;
  --gl-color-orange-400: #c17d10;
  --gl-color-orange-500: #ab6100;
  --gl-color-orange-600: #995715;
  --gl-color-orange-700: #894b16;
  --gl-color-orange-800: #693c14;
  --gl-color-orange-900: #532e16;
  --gl-color-orange-950: #382315;
  --gl-color-purple-50: #f4f0ff;
  --gl-color-purple-100: #e1d8f9;
  --gl-color-purple-200: #cbbbf2;
  --gl-color-purple-300: #ac93e6;
  --gl-color-purple-400: #9475db;
  --gl-color-purple-500: #7b58cf;
  --gl-color-purple-600: #6a4fb4;
  --gl-color-purple-700: #5c47a6;
  --gl-color-purple-800: #493c83;
  --gl-color-purple-900: #342d59;
  --gl-color-purple-950: #27243e;
  --gl-color-red-50: #fcf1ef;
  --gl-color-red-100: #fdd4cd;
  --gl-color-red-200: #fcb5aa;
  --gl-color-red-300: #f6806d;
  --gl-color-red-400: #ec5941;
  --gl-color-red-500: #dd2b0e;
  --gl-color-red-600: #c02f12;
  --gl-color-red-700: #a32c12;
  --gl-color-red-800: #812713;
  --gl-color-red-900: #582014;
  --gl-color-red-950: #3e1a14;
  --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;
  --gl-color-theme-indigo-200: #c7c7f2;
  --gl-color-theme-indigo-300: #a2a2e6;
  --gl-color-theme-indigo-400: #8181d7;
  --gl-color-theme-indigo-500: #6666c4;
  --gl-color-theme-indigo-600: #5252b5;
  --gl-color-theme-indigo-700: #41419f;
  --gl-color-theme-indigo-800: #303083;
  --gl-color-theme-indigo-900: #222261;
  --gl-color-theme-indigo-950: #14143d;
  --gl-color-theme-blue-10: #e6ecf0;
  --gl-color-theme-blue-50: #cdd8e3;
  --gl-color-theme-blue-100: #b9cadc;
  --gl-color-theme-blue-200: #a6bdd5;
  --gl-color-theme-blue-300: #81a5c9;
  --gl-color-theme-blue-400: #628eb9;
  --gl-color-theme-blue-500: #4977a5;
  --gl-color-theme-blue-600: #346596;
  --gl-color-theme-blue-700: #235180;
  --gl-color-theme-blue-800: #153c63;
  --gl-color-theme-blue-900: #0b2640;
  --gl-color-theme-blue-950: #04101c;
  --gl-color-theme-light-blue-10: #eef3f7;
  --gl-color-theme-light-blue-50: #dde6ee;
  --gl-color-theme-light-blue-100: #c1d4e6;
  --gl-color-theme-light-blue-200: #a0bedc;
  --gl-color-theme-light-blue-300: #74a3d3;
  --gl-color-theme-light-blue-400: #4f8bc7;
  --gl-color-theme-light-blue-500: #3476b9;
  --gl-color-theme-light-blue-600: #2268ae;
  --gl-color-theme-light-blue-700: #145aa1;
  --gl-color-theme-light-blue-800: #0e4d8d;
  --gl-color-theme-light-blue-900: #0c4277;
  --gl-color-theme-light-blue-950: #0a3764;
  --gl-color-theme-green-10: #eef4ef;
  --gl-color-theme-green-50: #dde9de;
  --gl-color-theme-green-100: #b1d6b5;
  --gl-color-theme-green-200: #8cc497;
  --gl-color-theme-green-300: #69af7d;
  --gl-color-theme-green-400: #499767;
  --gl-color-theme-green-500: #308258;
  --gl-color-theme-green-600: #25744c;
  --gl-color-theme-green-700: #1b653f;
  --gl-color-theme-green-800: #155635;
  --gl-color-theme-green-900: #0e4328;
  --gl-color-theme-green-950: #052e19;
  --gl-color-theme-red-10: #faf4f3;
  --gl-color-theme-red-50: #f4e9e7;
  --gl-color-theme-red-100: #ecd3d0;
  --gl-color-theme-red-200: #e3bab5;
  --gl-color-theme-red-300: #d59086;
  --gl-color-theme-red-400: #c66e60;
  --gl-color-theme-red-500: #ad4a3b;
  --gl-color-theme-red-600: #a13322;
  --gl-color-theme-red-700: #8f2110;
  --gl-color-theme-red-800: #761405;
  --gl-color-theme-red-900: #580d02;
  --gl-color-theme-red-950: #380700;
  --gl-color-theme-light-red-10: #fdf9f8;
  --gl-color-theme-light-red-50: #faf2f1;
  --gl-color-theme-light-red-100: #f6d9d5;
  --gl-color-theme-light-red-200: #ebada2;
  --gl-color-theme-light-red-300: #e07f6f;
  --gl-color-theme-light-red-400: #d36250;
  --gl-color-theme-light-red-500: #c24b38;
  --gl-color-theme-light-red-600: #b53a26;
  --gl-color-theme-light-red-700: #a02e1c;
  --gl-color-theme-light-red-800: #8b2212;
  --gl-color-theme-light-red-900: #751709;
  --gl-color-theme-light-red-950: #5c1105;
  --gl-color-brand-white: #fff;
  --gl-color-brand-charcoal: #171321;
  --gl-color-brand-orange-01g: #ffd1bf;
  --gl-color-brand-orange-01p: #fca326;
  --gl-color-brand-orange-02p: #fc6d26;
  --gl-color-brand-orange-03p: #e24329;
  --gl-color-brand-purple-01g: #ceb3ef;
  --gl-color-brand-purple-01p: #a989f5;
  --gl-color-brand-purple-02p: #7759c2;
  --gl-color-brand-gray-01: #d1d0d3;
  --gl-color-brand-gray-02: #a2a1a6;
  --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-font-family-regular: var(--default-regular-font, 'GitLab Sans'),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
  --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
  --gl-font-size-100: 0.75rem; /** Used for meta text and small labels. */
  --gl-font-size-200: 0.8125rem; /** Used for level 6 headings. */
  --gl-font-size-300: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */
  --gl-font-size-400: 1rem; /** Used for level 4 headings, large body text. */
  --gl-font-size-500: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); /** Used for responsive level 3 headings. */
  --gl-font-size-600: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); /** Used for responsive level 2 headings. */
  --gl-font-size-700: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); /** Used for responsive level 1 headings */
  --gl-font-size-800: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); /** Used for a responsive display option that can be applied to a level 1 heading to increase its prominence. */
  --gl-font-size-xs: 0.625rem;
  --gl-font-size-100-fixed: 0.75rem; /** Used for meta text and small labels. */
  --gl-font-size-200-fixed: 0.8125rem; /** Used for level 6 headings. */
  --gl-font-size-300-fixed: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */
  --gl-font-size-400-fixed: 1rem; /** Used for level 4 headings, large body text. */
  --gl-font-size-500-fixed: 1.125rem; /** Used for level 3 headings. */
  --gl-font-size-600-fixed: 1.3125rem; /** Used for level 2 headings. */
  --gl-font-size-700-fixed: 1.5rem; /** Used for level 1 headings */
  --gl-font-size-800-fixed: 1.75rem; /** Used for a display option that can be applied to a level 1 heading to increase its prominence. */
  --gl-font-weight-100: 100;
  --gl-font-weight-300: 300;
  --gl-font-weight-normal: 400;
  --gl-font-weight-semibold: 500;
  --gl-font-weight-bold: 600;
  --gl-heading-default-margin-top: 0;
  --gl-line-height-12: 0.75rem;
  --gl-line-height-16: 1rem;
  --gl-line-height-20: 1.25rem;
  --gl-line-height-24: 1.5rem;
  --gl-line-height-28: 1.75rem;
  --gl-line-height-32: 2rem;
  --gl-line-height-36: 2.25rem;
  --gl-line-height-42: 2.625rem;
  --gl-line-height-44: 2.75rem;
  --gl-line-height-52: 3.25rem;
  --gl-line-height-heading: 1.25;
  --gl-opacity-0: 0;
  --gl-opacity-1: .1;
  --gl-opacity-2: .2;
  --gl-opacity-3: .3;
  --gl-opacity-4: .4;
  --gl-opacity-5: .5;
  --gl-opacity-6: .6;
  --gl-opacity-7: .7;
  --gl-opacity-8: .8;
  --gl-opacity-9: .9;
  --gl-opacity-10: 1;
  --gl-spacing-scale-0: 0;
  --gl-spacing-scale-1: 0.125rem;
  --gl-spacing-scale-2: 0.25rem;
  --gl-spacing-scale-3: 0.5rem;
  --gl-spacing-scale-4: 0.75rem;
  --gl-spacing-scale-5: 1rem;
  --gl-spacing-scale-6: 1.5rem;
  --gl-spacing-scale-7: 2rem;
  --gl-spacing-scale-8: 2.5rem;
  --gl-spacing-scale-9: 3rem;
  --gl-spacing-scale-10: 3.5rem;
  --gl-spacing-scale-11: 4rem;
  --gl-spacing-scale-12: 5rem;
  --gl-spacing-scale-13: 6rem;
  --gl-spacing-scale-15: 7.5rem;
  --gl-spacing-scale-18: 9rem;
  --gl-spacing-scale-20: 10rem;
  --gl-spacing-scale-26: 13rem;
  --gl-spacing-scale-28: 14rem;
  --gl-spacing-scale-30: 15rem;
  --gl-spacing-scale-31: 15.5rem;
  --gl-spacing-scale-33: 16.5rem;
  --gl-spacing-scale-34: 17rem;
  --gl-spacing-scale-37: 18.5rem;
  --gl-spacing-scale-48: 24rem;
  --gl-spacing-scale-62: 31rem;
  --gl-spacing-scale-75: 37.5rem;
  --gl-spacing-scale-80: 40rem;
  --gl-spacing-scale-88: 44rem;
  --gl-spacing-scale-px: 1px;
  --gl-spacing-scale-2-5: 0.375rem;
  --gl-spacing-scale-11-5: 4.5rem;
  --gl-zindex-0: 0;
  --gl-zindex-1: 1;
  --gl-zindex-2: 2;
  --gl-zindex-3: 3;
  --gl-zindex-4: 4;
  --gl-zindex-200: 200;
  --gl-zindex-9999: 9999;
  --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-chart-threshold-area-color: rgba(221,43,14,0.1); /** Used in charts to delineate a threshold area in a chart. */
  --gl-illustration-stroke-color-default: #171321; /** Default stroke color to define shape and provide essential detail. */
  --gl-illustration-stroke-width-default: 2; /** 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: 2; /** 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;
  --data-viz-green-100: #c6ed94;
  --data-viz-green-200: #b0d97b;
  --data-viz-green-300: #94c25e;
  --data-viz-green-400: #81ac41;
  --data-viz-green-500: #619025;
  --data-viz-green-600: #4e7f0e;
  --data-viz-green-700: #366800;
  --data-viz-green-800: #275600;
  --data-viz-green-900: #1a4500;
  --data-viz-green-950: #133a03;
  --data-viz-aqua-50: #b5fefd;
  --data-viz-aqua-100: #93f2ef;
  --data-viz-aqua-200: #5edee3;
  --data-viz-aqua-300: #32c5d2;
  --data-viz-aqua-400: #00acc4;
  --data-viz-aqua-500: #0090b1;
  --data-viz-aqua-600: #007b9b;
  --data-viz-aqua-700: #006381;
  --data-viz-aqua-800: #00516c;
  --data-viz-aqua-900: #004059;
  --data-viz-aqua-950: #00344b;
  --data-viz-blue-50: #e9ebff;
  --data-viz-blue-100: #d2dcff;
  --data-viz-blue-200: #b7c6ff;
  --data-viz-blue-300: #97acff;
  --data-viz-blue-400: #7992f5;
  --data-viz-blue-500: #617ae2;
  --data-viz-blue-600: #4e65cd;
  --data-viz-blue-700: #3f51ae;
  --data-viz-blue-800: #374291;
  --data-viz-blue-900: #303470;
  --data-viz-blue-950: #2a2b59;
  --data-viz-magenta-50: #ffe3eb;
  --data-viz-magenta-100: #ffccdb;
  --data-viz-magenta-200: #fcacc5;
  --data-viz-magenta-300: #f88aaf;
  --data-viz-magenta-400: #e86e9a;
  --data-viz-magenta-500: #cf4d81;
  --data-viz-magenta-600: #b93d71;
  --data-viz-magenta-700: #9a2e5d;
  --data-viz-magenta-800: #7c214f;
  --data-viz-magenta-900: #661e3a;
  --data-viz-magenta-950: #541d31;
  --data-viz-orange-50: #fae8d1;
  --data-viz-orange-100: #f5d6b3;
  --data-viz-orange-200: #eebd8c;
  --data-viz-orange-300: #e99b60;
  --data-viz-orange-400: #e07e41;
  --data-viz-orange-500: #c95d2e;
  --data-viz-orange-600: #b14f18;
  --data-viz-orange-700: #92430a;
  --data-viz-orange-800: #6f3500;
  --data-viz-orange-900: #5e2f05;
  --data-viz-orange-950: #4b2707;
  --theme-indigo-10: #f8f8ff;
  --theme-indigo-50: #f1f1ff;
  --theme-indigo-100: #dbdbf8;
  --theme-indigo-200: #c7c7f2;
  --theme-indigo-300: #a2a2e6;
  --theme-indigo-400: #8181d7;
  --theme-indigo-500: #6666c4;
  --theme-indigo-600: #5252b5;
  --theme-indigo-700: #41419f;
  --theme-indigo-800: #303083;
  --theme-indigo-900: #222261;
  --theme-indigo-950: #14143d;
  --theme-blue-10: #e6ecf0;
  --theme-blue-50: #cdd8e3;
  --theme-blue-100: #b9cadc;
  --theme-blue-200: #a6bdd5;
  --theme-blue-300: #81a5c9;
  --theme-blue-400: #628eb9;
  --theme-blue-500: #4977a5;
  --theme-blue-600: #346596;
  --theme-blue-700: #235180;
  --theme-blue-800: #153c63;
  --theme-blue-900: #0b2640;
  --theme-blue-950: #04101c;
  --theme-light-blue-10: #eef3f7;
  --theme-light-blue-50: #dde6ee;
  --theme-light-blue-100: #c1d4e6;
  --theme-light-blue-200: #a0bedc;
  --theme-light-blue-300: #74a3d3;
  --theme-light-blue-400: #4f8bc7;
  --theme-light-blue-500: #3476b9;
  --theme-light-blue-600: #2268ae;
  --theme-light-blue-700: #145aa1;
  --theme-light-blue-800: #0e4d8d;
  --theme-light-blue-900: #0c4277;
  --theme-light-blue-950: #0a3764;
  --theme-green-10: #eef4ef;
  --theme-green-50: #dde9de;
  --theme-green-100: #b1d6b5;
  --theme-green-200: #8cc497;
  --theme-green-300: #69af7d;
  --theme-green-400: #499767;
  --theme-green-500: #308258;
  --theme-green-600: #25744c;
  --theme-green-700: #1b653f;
  --theme-green-800: #155635;
  --theme-green-900: #0e4328;
  --theme-green-950: #052e19;
  --theme-red-10: #faf4f3;
  --theme-red-50: #f4e9e7;
  --theme-red-100: #ecd3d0;
  --theme-red-200: #e3bab5;
  --theme-red-300: #d59086;
  --theme-red-400: #c66e60;
  --theme-red-500: #ad4a3b;
  --theme-red-600: #a13322;
  --theme-red-700: #8f2110;
  --theme-red-800: #761405;
  --theme-red-900: #580d02;
  --theme-red-950: #380700;
  --theme-light-red-10: #fdf9f8;
  --theme-light-red-50: #faf2f1;
  --theme-light-red-100: #f6d9d5;
  --theme-light-red-200: #ebada2;
  --theme-light-red-300: #e07f6f;
  --theme-light-red-400: #d36250;
  --theme-light-red-500: #c24b38;
  --theme-light-red-600: #b53a26;
  --theme-light-red-700: #a02e1c;
  --theme-light-red-800: #8b2212;
  --theme-light-red-900: #751709;
  --theme-light-red-950: #5c1105;
  --black: #050506;
  --white: #fff;
  --blue-50: #e9f3fc;
  --blue-100: #cbe2f9;
  --blue-200: #9dc7f1;
  --blue-300: #63a6e9;
  --blue-400: #428fdc;
  --blue-500: #1f75cb;
  --blue-600: #2f68b4;
  --blue-700: #2f5ca0;
  --blue-800: #284779;
  --blue-900: #213454;
  --blue-950: #1d283e;
  --gray-10: #fbfafd;
  --gray-50: #ececef;
  --gray-100: #dcdcde;
  --gray-200: #bfbfc3;
  --gray-300: #a4a3a8;
  --gray-400: #89888d;
  --gray-500: #737278;
  --gray-600: #626168;
  --gray-700: #4c4b51;
  --gray-800: #3a383f;
  --gray-900: #28272d;
  --gray-950: #18171d;
  --green-50: #ecf4ee;
  --green-100: #c3e6cd;
  --green-200: #91d4a8;
  --green-300: #52b87a;
  --green-400: #2da160;
  --green-500: #108548;
  --green-600: #2f7549;
  --green-700: #306440;
  --green-800: #225131;
  --green-900: #1e3e28;
  --green-950: #17291c;
  --orange-50: #fdf1dd;
  --orange-100: #f5d9a8;
  --orange-200: #e9be74;
  --orange-300: #d99530;
  --orange-400: #c17d10;
  --orange-500: #ab6100;
  --orange-600: #995715;
  --orange-700: #894b16;
  --orange-800: #693c14;
  --orange-900: #532e16;
  --orange-950: #382315;
  --purple-50: #f4f0ff;
  --purple-100: #e1d8f9;
  --purple-200: #cbbbf2;
  --purple-300: #ac93e6;
  --purple-400: #9475db;
  --purple-500: #7b58cf;
  --purple-600: #6a4fb4;
  --purple-700: #5c47a6;
  --purple-800: #493c83;
  --purple-900: #342d59;
  --purple-950: #27243e;
  --red-50: #fcf1ef;
  --red-100: #fdd4cd;
  --red-200: #fcb5aa;
  --red-300: #f57f6c;
  --red-400: #ec5941;
  --red-500: #dd2b0e;
  --red-600: #c02f12;
  --red-700: #a32c12;
  --red-800: #812713;
  --red-900: #582014;
  --red-950: #3e1a14;
  --brand-charcoal: #171321; /** Use color.brand-charcoal instead. */
  --brand-orange-01: #fca326; /** Use color.brand-orange.01p instead. */
  --brand-orange-02: #fc6d26; /** Use color.brand-orange.02p instead. */
  --brand-orange-03: #e24329; /** Use color.brand-orange.03p instead. */
  --brand-purple-01: #a989f5; /** Use color.purple.01p instead. */
  --brand-purple-02: #7759c2; /** Use color.purple.02p instead. */
  --brand-gray-01: #d1d0d3; /** Use color.brand-gray.01 instead. */
  --brand-gray-02: #a2a1a6; /** Use color.brand-gray.02 instead. */
  --brand-gray-03: #74717a; /** Use color.brand-gray.03 instead. */
  --brand-gray-04: #45424d; /** Use color.brand-gray.04 instead. */
  --brand-gray-05: #2b2838; /** Use color.brand-gray.05 instead. */
  --t-gray-a-16: rgba(05, 05, 06, 0.16); /** Use color.alpha.dark.16 instead. */
  --t-gray-a-24: rgba(05, 05, 06, 0.24); /** Use color.alpha.dark.24 instead. */
  --t-gray-a-02: rgba(05, 05, 06, 0.02); /** Use color.alpha.dark.2 instead. */
  --t-gray-a-04: rgba(05, 05, 06, 0.04); /** Use color.alpha.dark.4 instead. */
  --t-gray-a-06: rgba(05, 05, 06, 0.06); /** Use color.alpha.dark.6 instead. */
  --t-gray-a-08: rgba(05, 05, 06, 0.08); /** Use color.alpha.dark.8 instead. */
  --t-white-a-16: rgba(255, 255, 255, 0.16); /** Use color.alpha.light.16 instead. */
  --t-white-a-24: rgba(255, 255, 255, 0.24); /** Use color.alpha.light.24 instead. */
  --t-white-a-36: rgba(255, 255, 255, 0.36); /** Use color.alpha.light.36 instead. */
  --t-white-a-02: rgba(255, 255, 255, 0.02); /** Use color.alpha.light.2 instead. */
  --t-white-a-04: rgba(255, 255, 255, 0.04); /** Use color.alpha.light.4 instead. */
  --t-white-a-06: rgba(255, 255, 255, 0.06); /** Use color.alpha.light.6 instead. */
  --t-white-a-08: rgba(255, 255, 255, 0.08); /** Use color.alpha.light.8 instead. */
  --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); /** Used for the background of a neutral action in the default state. */
  --gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); /** Used for the background of a neutral action in the hover state. */
  --gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); /** Used for the background of a neutral action in the active state. */
  --gl-action-confirm-background-color-default: rgba(99, 166, 233, 0.0); /** Used for the background of a confirm (positive) action in the default state. */
  --gl-action-confirm-background-color-hover: rgba(99, 166, 233, 0.16); /** Used for the background of a confirm (positive) action in the hover state. */
  --gl-action-confirm-background-color-active: rgba(11, 92, 173, 0.24); /** Used for the background of a confirm (positive) action in the active state. */
  --gl-action-danger-background-color-default: rgba(245, 127, 108, 0.0); /** Used for the background of a danger (destructive) action in the default state. */
  --gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); /** Used for the background of a danger (destructive) action in the hover state. */
  --gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); /** Used for the background of a danger (destructive) action in the active state. */
  --gl-letter-spacing-heading: -0.01em;
  --gl-heading-3-letter-spacing: inherit;
  --gl-heading-4-letter-spacing: inherit;
  --gl-heading-5-letter-spacing: inherit;
  --gl-heading-6-letter-spacing: inherit;
  --gl-heading-scale-100-letter-spacing: inherit;
  --gl-heading-scale-200-letter-spacing: inherit;
  --gl-heading-scale-300-letter-spacing: inherit;
  --gl-heading-scale-400-letter-spacing: inherit;
  --gl-heading-scale-500-letter-spacing: inherit;
  --gl-heading-scale-800-line-height: 1.125;
  --gl-heading-scale-100-fixed-letter-spacing: inherit;
  --gl-heading-scale-200-fixed-letter-spacing: inherit;
  --gl-heading-scale-300-fixed-letter-spacing: inherit;
  --gl-heading-scale-400-fixed-letter-spacing: inherit;
  --gl-heading-scale-500-fixed-letter-spacing: inherit;
  --gl-heading-scale-800-fixed-line-height: 1.125;
  --gl-heading-display-line-height: 1.125;
  --gl-heading-3-fixed-letter-spacing: inherit;
  --gl-heading-4-fixed-letter-spacing: inherit;
  --gl-heading-5-fixed-letter-spacing: inherit;
  --gl-heading-6-fixed-letter-spacing: inherit;
  --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
  --gl-border-color-default: var(--gl-color-neutral-100); /** Used for the default border color. */
  --gl-border-color-subtle: var(--gl-color-neutral-50); /** Used for a subtle border in combination with the default background. */
  --gl-border-color-strong: var(--gl-color-neutral-200); /** Used for a distinct border that emphasizes an edge or boundaries. */
  --gl-border-radius-none: var(--gl-spacing-scale-0);
  --gl-border-radius-xs: var(--gl-spacing-scale-px);
  --gl-border-radius-sm: var(--gl-spacing-scale-1);
  --gl-border-radius-md: var(--gl-spacing-scale-2);
  --gl-border-radius-lg: var(--gl-spacing-scale-3);
  --gl-border-radius-xl: var(--gl-spacing-scale-4);
  --gl-border-radius-2xl: var(--gl-spacing-scale-5);
  --gl-border-radius-3xl: var(--gl-spacing-scale-6);
  --gl-font-size-sm: var(--gl-font-size-100);
  --gl-font-size-md: var(--gl-font-size-300);
  --gl-font-size-lg: var(--gl-font-size-400);
  --gl-font-weight-heading: var(--gl-font-weight-bold);
  --gl-heading-default-margin-bottom: var(--gl-spacing-scale-5);
  --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */
  --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border center color of a neutral alert. */
  --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
  --gl-alert-info-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of an info alert. */
  --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of an info alert. */
  --gl-alert-success-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of a success alert. */
  --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a success alert. */
  --gl-alert-warning-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of a warning alert. */
  --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a warning alert. */
  --gl-alert-danger-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of a danger alert. */
  --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a danger alert. */
  --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /** Used to define the edge of an avatar. */
  --gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /** Used to increase the edge definition of an avatar in the hover state. */
  --gl-avatar-fallback-text-color-red: var(--gl-color-red-800); /** Red text color for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-text-color-purple: var(--gl-color-purple-800); /** Purple text color for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-text-color-blue: var(--gl-color-blue-800); /** Blue text color for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-text-color-green: var(--gl-color-green-800); /** Green text color for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-text-color-orange: var(--gl-color-orange-800); /** Orange text color for avatar fallback with no particular meaning. */
  --gl-avatar-fallback-text-color-neutral: var(--gl-color-neutral-800); /** Neutral text color for avatar fallback with no particular meaning. */
  --gl-badge-muted-background-color-default: var(--gl-color-neutral-50); /** Used for the background of a muted badge when static or the default state when linked. */
  --gl-badge-muted-background-color-active: var(--gl-color-neutral-100); /** Used for the background of a muted badge in the active state. */
  --gl-badge-muted-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a muted badge when static or the default state when linked. */
  --gl-badge-muted-border-color-hover: var(--gl-color-neutral-200); /** Used for the border of a muted badge in the hover state. */
  --gl-badge-muted-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a muted badge in the focus state. */
  --gl-badge-muted-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a muted badge in the active state. */
  --gl-badge-muted-text-color-default: var(--gl-color-neutral-600); /** Used for the text of a muted badge when static or the default state when linked. */
  --gl-badge-muted-text-color-hover: var(--gl-color-neutral-700); /** Used for the text of a muted badge in the hover state. */
  --gl-badge-muted-text-color-active: var(--gl-color-neutral-800); /** Used for the text of a muted badge in the active state. */
  --gl-badge-muted-icon-color-default: var(--gl-color-neutral-500); /** Used for the icon of a muted badge when static or the default state when linked. */
  --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-600); /** Used for the icon of a muted badge in the hover state. */
  --gl-badge-muted-icon-color-active: var(--gl-color-neutral-700); /** Used for the icon of a muted badge in the active state. */
  --gl-badge-neutral-background-color-default: var(--gl-color-neutral-100); /** Used for the background of a neutral badge when static or the default state when linked. */
  --gl-badge-neutral-background-color-active: var(--gl-color-neutral-200); /** Used for the background of a neutral badge in the active state. */
  --gl-badge-neutral-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a neutral badge when static or the default state when linked. */
  --gl-badge-neutral-border-color-hover: var(--gl-color-neutral-200); /** Used for the border of a neutral badge in the hover state. */
  --gl-badge-neutral-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a neutral badge in the focus state. */
  --gl-badge-neutral-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a neutral badge in the active state. */
  --gl-badge-neutral-text-color-default: var(--gl-color-neutral-700); /** Used for the text of a neutral badge when static or the default state when linked. */
  --gl-badge-neutral-text-color-hover: var(--gl-color-neutral-800); /** Used for the text of a neutral badge in the hover state. */
  --gl-badge-neutral-text-color-active: var(--gl-color-neutral-900); /** Used for the text of a neutral badge in the active state. */
  --gl-badge-neutral-icon-color-default: var(--gl-color-neutral-500); /** Used for the icon of a neutral badge when static or the default state when linked. */
  --gl-badge-neutral-icon-color-hover: var(--gl-color-neutral-600); /** Used for the icon of a neutral badge in the hover state. */
  --gl-badge-neutral-icon-color-active: var(--gl-color-neutral-700); /** Used for the icon of a neutral badge in the active state. */
  --gl-badge-info-background-color-default: var(--gl-color-blue-100); /** Used for the background of an informational badge when static or the default state when linked. */
  --gl-badge-info-background-color-active: var(--gl-color-blue-200); /** Used for the background of an informational badge in the active state. */
  --gl-badge-info-border-color-default: var(--gl-color-alpha-0); /** Used for the border of an informational badge when static or the default state when linked. */
  --gl-badge-info-border-color-hover: var(--gl-color-blue-200); /** Used for the border of an informational badge in the hover state. */
  --gl-badge-info-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of an informational badge in the focus state. */
  --gl-badge-info-border-color-active: var(--gl-color-alpha-0); /** Used for the border of an informational badge in the active state. */
  --gl-badge-info-text-color-default: var(--gl-color-blue-700); /** Used for the text of an informational badge when static or the default state when linked. */
  --gl-badge-info-text-color-hover: var(--gl-color-blue-800); /** Used for the text of an informational badge in the hover state. */
  --gl-badge-info-text-color-active: var(--gl-color-blue-900); /** Used for the text of an informational badge in the active state. */
  --gl-badge-info-icon-color-default: var(--gl-color-blue-500); /** Used for the icon of an informational badge when static or the default state when linked. */
  --gl-badge-info-icon-color-hover: var(--gl-color-blue-600); /** Used for the icon of an informational badge in the hover state. */
  --gl-badge-info-icon-color-active: var(--gl-color-blue-700); /** Used for the icon of an informational badge in the active state. */
  --gl-badge-success-background-color-default: var(--gl-color-green-100); /** Used for the background of a success badge when static or the default state when linked. */
  --gl-badge-success-background-color-active: var(--gl-color-green-200); /** Used for the background of a success badge in the active state. */
  --gl-badge-success-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a success badge when static or the default state when linked. */
  --gl-badge-success-border-color-hover: var(--gl-color-green-200); /** Used for the border of a success badge in the hover state. */
  --gl-badge-success-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a success badge in the focus state. */
  --gl-badge-success-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a success badge in the active state. */
  --gl-badge-success-text-color-default: var(--gl-color-green-700); /** Used for the text of a success badge when static or the default state when linked. */
  --gl-badge-success-text-color-hover: var(--gl-color-green-800); /** Used for the text of a success badge in the hover state. */
  --gl-badge-success-text-color-active: var(--gl-color-green-900); /** Used for the text of a success badge in the active state. */
  --gl-badge-success-icon-color-default: var(--gl-color-green-500); /** Used for the icon of a success badge when static or the default state when linked. */
  --gl-badge-success-icon-color-hover: var(--gl-color-green-600); /** Used for the icon of a success badge in the hover state. */
  --gl-badge-success-icon-color-active: var(--gl-color-green-700); /** Used for the icon of a success badge in the active state. */
  --gl-badge-warning-background-color-default: var(--gl-color-orange-100); /** Used for the background of a warning badge when static or the default state when linked. */
  --gl-badge-warning-background-color-active: var(--gl-color-orange-200); /** Used for the background of a warning badge in the active state. */
  --gl-badge-warning-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a warning badge when static or the default state when linked. */
  --gl-badge-warning-border-color-hover: var(--gl-color-orange-200); /** Used for the border of a warning badge in the hover state. */
  --gl-badge-warning-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a warning badge in the focus state. */
  --gl-badge-warning-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a warning badge in the active state. */
  --gl-badge-warning-text-color-default: var(--gl-color-orange-700); /** Used for the text of a warning badge when static or the default state when linked. */
  --gl-badge-warning-text-color-hover: var(--gl-color-orange-800); /** Used for the text of a warning badge in the hover state. */
  --gl-badge-warning-text-color-active: var(--gl-color-orange-900); /** Used for the text of a warning badge in the active state. */
  --gl-badge-warning-icon-color-default: var(--gl-color-orange-500); /** Used for the icon of a warning badge when static or the default state when linked. */
  --gl-badge-warning-icon-color-hover: var(--gl-color-orange-600); /** Used for the icon of a warning badge in the hover state. */
  --gl-badge-warning-icon-color-active: var(--gl-color-orange-700); /** Used for the icon of a warning badge in the active state. */
  --gl-badge-danger-background-color-default: var(--gl-color-red-100); /** Used for the background of a danger badge when static or the default state when linked. */
  --gl-badge-danger-background-color-active: var(--gl-color-red-200); /** Used for the background of a danger badge in the active state. */
  --gl-badge-danger-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a danger badge when static or the default state when linked. */
  --gl-badge-danger-border-color-hover: var(--gl-color-red-200); /** Used for the border of a danger badge in the hover state. */
  --gl-badge-danger-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a danger badge in the focus state. */
  --gl-badge-danger-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a danger badge in the active state. */
  --gl-badge-danger-text-color-default: var(--gl-color-red-700); /** Used for the text of a danger badge when static or the default state when linked. */
  --gl-badge-danger-text-color-hover: var(--gl-color-red-800); /** Used for the text of a danger badge in the hover state. */
  --gl-badge-danger-text-color-active: var(--gl-color-red-900); /** Used for the text of a danger badge in the active state. */
  --gl-badge-danger-icon-color-default: var(--gl-color-red-700); /** Used for the icon of a danger badge when static or the default state when linked. */
  --gl-badge-danger-icon-color-hover: var(--gl-color-red-800); /** Used for the icon of a danger badge in the hover state. */
  --gl-badge-danger-icon-color-active: var(--gl-color-red-900); /** Used for the icon of a danger badge in the active state. */
  --gl-badge-tier-background-color-default: var(--gl-color-purple-100); /** Used for the background of a tier related badge when static or the default state when linked. */
  --gl-badge-tier-background-color-active: var(--gl-color-purple-200); /** Used for the background of a tier related badge in the active state. */
  --gl-badge-tier-border-color-default: var(--gl-color-alpha-0); /** Used for the border of a tier related badge when static or the default state when linked. */
  --gl-badge-tier-border-color-hover: var(--gl-color-purple-200); /** Used for the border of a tier related badge in the hover state. */
  --gl-badge-tier-border-color-focus: var(--gl-color-alpha-0); /** Used for the border of a tier related badge in the focus state. */
  --gl-badge-tier-border-color-active: var(--gl-color-alpha-0); /** Used for the border of a tier related badge in the active state. */
  --gl-badge-tier-text-color-default: var(--gl-color-purple-700); /** Used for the text of a tier related badge when static or the default state when linked. */
  --gl-badge-tier-text-color-hover: var(--gl-color-purple-800); /** Used for the text of a tier related badge in the hover state. */
  --gl-badge-tier-text-color-active: var(--gl-color-purple-900); /** Used for the text of a tier related badge in the active state. */
  --gl-badge-tier-icon-color-default: var(--gl-color-purple-700); /** Used for the icon of a tier related badge when static or the default state when linked. */
  --gl-badge-tier-icon-color-hover: var(--gl-color-purple-800); /** Used for the icon of a tier related badge in the hover state. */
  --gl-badge-tier-icon-color-active: var(--gl-color-purple-900); /** Used for the icon of a tier related badge in the active state. */
  --gl-banner-intro-border-color: var(--gl-color-blue-200); /** Used for the border of an info banner. */
  --gl-banner-promo-background-color: var(--gl-color-purple-50); /** Used for the background of a promo banner. */
  --gl-banner-promo-border-color: var(--gl-color-purple-200); /** Used for the border of a promo banner. */
  --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /** Used for the breadcrumb level separator. */
  --gl-broadcast-banner-background-color-blue: var(--gl-color-theme-blue-700); /** Used for the background for the blue banner type. */
  --gl-broadcast-banner-background-color-dark: var(--gl-color-neutral-500); /** Used for the background for the dark banner type. */
  --gl-broadcast-banner-background-color-green: var(--gl-color-theme-green-700); /** Used for the background for the green banner type. */
  --gl-broadcast-banner-background-color-indigo: var(--gl-color-theme-indigo-700); /** Used for the background for the indigo banner type. */
  --gl-broadcast-banner-background-color-light: var(--gl-color-neutral-50); /** Used for the background for the light banner type. */
  --gl-broadcast-banner-background-color-lightblue: var(--gl-color-theme-blue-500); /** Used for the background for the lightblue banner type. */
  --gl-broadcast-banner-background-color-lightgreen: var(--gl-color-theme-green-500); /** Used for the background for the lightgreen banner type. */
  --gl-broadcast-banner-background-color-lightindigo: var(--gl-color-theme-indigo-500); /** Used for the background for the lightindigo banner type. */
  --gl-broadcast-banner-background-color-lightred: var(--gl-color-theme-red-500); /** Used for the background for the lightred banner type. */
  --gl-broadcast-banner-background-color-red: var(--gl-color-theme-red-700); /** Used for the background for the red banner type. */
  --gl-broadcast-banner-border-color-blue: var(--gl-color-theme-blue-900); /** Used for the border for the blue banner type. */
  --gl-broadcast-banner-border-color-dark: var(--gl-color-neutral-700); /** Used for the border for the dark banner type. */
  --gl-broadcast-banner-border-color-green: var(--gl-color-theme-green-900); /** Used for the border for the green banner type. */
  --gl-broadcast-banner-border-color-indigo: var(--gl-color-theme-indigo-900); /** Used for the border for the indigo banner type. */
  --gl-broadcast-banner-border-color-light: var(--gl-color-neutral-100); /** Used for the border for the light banner type. */
  --gl-broadcast-banner-border-color-lightblue: var(--gl-color-theme-blue-700); /** Used for the border for the lightblue banner type. */
  --gl-broadcast-banner-border-color-lightgreen: var(--gl-color-theme-green-700); /** Used for the border for the lightgreen banner type. */
  --gl-broadcast-banner-border-color-lightindigo: var(--gl-color-theme-indigo-700); /** Used for the border for the lightindigo banner type. */
  --gl-broadcast-banner-border-color-lightred: var(--gl-color-theme-red-700); /** Used for the border for the lightred banner type. */
  --gl-broadcast-banner-border-color-red: var(--gl-color-theme-red-900); /** Used for the border for the red banner type. */
  --gl-broadcast-banner-icon-color-blue: var(--gl-color-neutral-0); /** Used for the icon for the blue banner type. */
  --gl-broadcast-banner-icon-color-dark: var(--gl-color-neutral-0); /** Used for the icon for the dark banner type. */
  --gl-broadcast-banner-icon-color-green: var(--gl-color-neutral-0); /** Used for the icon for the green banner type. */
  --gl-broadcast-banner-icon-color-indigo: var(--gl-color-neutral-0); /** Used for the icon for the indigo banner type. */
  --gl-broadcast-banner-icon-color-light: var(--gl-color-neutral-900); /** Used for the icon for the light banner type. */
  --gl-broadcast-banner-icon-color-lightblue: var(--gl-color-neutral-0); /** Used for the icon for the lightblue banner type. */
  --gl-broadcast-banner-icon-color-lightgreen: var(--gl-color-neutral-0); /** Used for the icon for the lightgreen banner type. */
  --gl-broadcast-banner-icon-color-lightindigo: var(--gl-color-neutral-0); /** Used for the icon for the lightindigo banner type. */
  --gl-broadcast-banner-icon-color-lightred: var(--gl-color-neutral-0); /** Used for the icon for the lightred banner type. */
  --gl-broadcast-banner-icon-color-red: var(--gl-color-neutral-0); /** Used for the icon for the red banner type. */
  --gl-broadcast-banner-text-color-blue: var(--gl-color-neutral-0); /** Used for the text for the blue banner type. */
  --gl-broadcast-banner-text-color-dark: var(--gl-color-neutral-0); /** Used for the text for the dark banner type. */
  --gl-broadcast-banner-text-color-green: var(--gl-color-neutral-0); /** Used for the text for the green banner type. */
  --gl-broadcast-banner-text-color-indigo: var(--gl-color-neutral-0); /** Used for the text for the indigo banner type. */
  --gl-broadcast-banner-text-color-light: var(--gl-color-neutral-900); /** Used for the text for the light banner type. */
  --gl-broadcast-banner-text-color-lightblue: var(--gl-color-neutral-0); /** Used for the text for the lightblue banner type. */
  --gl-broadcast-banner-text-color-lightgreen: var(--gl-color-neutral-0); /** Used for the text for the lightgreen banner type. */
  --gl-broadcast-banner-text-color-lightindigo: var(--gl-color-neutral-0); /** Used for the text for the lightindigo banner type. */
  --gl-broadcast-banner-text-color-lightred: var(--gl-color-neutral-0); /** Used for the text for the lightred banner type. */
  --gl-broadcast-banner-text-color-red: var(--gl-color-neutral-0); /** Used for the text for the red banner type. */
  --gl-button-default-primary-foreground-color-default: var(--gl-color-neutral-800); /** Used for the foreground of a default primary button in the default state. */
  --gl-button-default-primary-background-color-default: var(--gl-color-neutral-0); /** Used for the background of an default primary button in the default state. */
  --gl-button-default-primary-background-color-hover: var(--gl-color-ne