@gitlab/ui
Version:
GitLab UI Components
697 lines (696 loc) • 108 kB
CSS
/**
* Do not edit directly, this file was auto-generated.
*/
:root {
--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-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-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-text-primary: #28272d; /* Use text.color.default instead. */
--gl-text-secondary: #737278; /* Use text.color.subtle instead. */
--gl-text-tertiary: #89888d; /* Use text.color.disabled instead. */
--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-neutral-50); /* Used for the background of an default primary button in the hover state. */
--gl-button-default-primary-background-color-active: var(--gl-color-neutral-100); /* Used for the background of an default primary button in the active state. */
--gl-button-default-primary-border-color-default: var(--gl-color-neutral-200); /* Used for the border of an default primary button in the default state. */
--gl-button-default-primary-border-color-hover: var(--gl-color-neutral-400); /* Used for the border of an default primary button in the hover state. */
--gl-button-default-primary-border-color-active: var(--gl-color-neutral-600); /* Used for the border of an default primary button in the active state. */
--gl-button-default-tertiary-background-color-default: var(--gl-action-neutral-background-color-default); /* Used for the background of a default borderless, tertiary button in the default state. */
--gl-button-default-tertiary-background-color-hover: var(--gl-action-neutral-background-color-hover); /* Used for the background of a default borderless, tertiary button in the hover state. */
--gl-button-default-tertiary-background-color-active: var(--gl-action-neutral-background-color-active); /* Used for the background of a default borderless, tertiary button in the active state. */
--gl-button-confirm-primary-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a confirm (positive) primary button in the default state. */
--gl-button-confirm-primary-border-color-default: var(--gl-color-blue-600); /* Used for the border of a confirm (positive) primary button in the default state. */
--gl-button-confirm-primary-border-color-hover: var(--gl-color-blue-800); /* Used for the border of a confirm (positive) primary button in the hover state. */
--gl-button-confirm-primary-border-color-active: var(--gl-color-blue-900); /* Used for the border of a confirm (positive) primary button in the active state. */
--gl-button-confirm-secondary-foreground-color-default: var(--gl-color-blue-500); /* Used for the foreground of a confirm (positive) button in the default state. */
--gl-button-confirm-secondary-foreground-color-hover: var(--gl-color-blue-700); /* Used for the foreground of a confirm (positive) button in the hover state. */
--gl-button-confirm-secondary-foreground-color-active: var(--gl-color-blue-900); /* Used for the foreground of a confirm (positive) button in the active state. */
--gl-button-confirm-secondary-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an outlined confirm (positive) button in the default state. */
--gl-button-confirm-secondary-background-color-hover: var(--gl-color-blue-50); /* Used for the background of an outlined confirm (positive) button in the hover state. */
--gl-button-confirm-secondary-background-color-active: var(--gl-color-blue-100); /* Used for the background of an outlined confirm (positive) button in the active state. */
--gl-button-confirm-secondary-border-color-default: var(--gl-color-blue-500); /* Used for the border of an outlined confirm (positive) button in the default state. */
--gl-button-confirm-secondary-border-color-hover: var(--gl-color-blue-700); /* Used for the border of an outlined confirm (positive) button in the hover state. */
--gl-button-confirm-secondary-border-color-active: var(--gl-color-blue-900); /* Used for the border of an outlined confirm (positive) button in the active state. */
--gl-button-confirm-tertiary-background-color-default: var(--gl-action-confirm-background-color-default); /* Used for the background of a borderless, tertiary confirm (positive) button in the default state. */
--gl-button-confirm-tertiary-background-color-hover: var(--gl-action-confirm-background-color-hover); /* Used for the background of a borderless, tertiary confirm (positive) button in the hover state. */
--gl-button-confirm-tertiary-background-color-active: var(--gl-action-confirm-background-color-active); /* Used for the background of a borderless, tertiary confirm (positive) button in the active state. */
--gl-button-danger-primary-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a danger (destructive) primary button in the default state. */
--gl-button-danger-primary-background-color-default: var(--gl-color-red-500); /* Used for the background of a danger (destructive) primary button in the default state. */
--gl-button-danger-primary-background-color-hover: var(--gl-color-red-600); /* Used for the background of a danger (destructive) primary button in the hover state. */
--gl-button-danger-primary-background-color-active: var(--gl-color-red-800); /* Used for the background of a danger (destructive) primary button in the active state. */
--gl-button-danger-primary-border-color-default: var(--gl-color-red-600); /* Used for the border of a danger (destructive) primary button in the default state. */
--gl-button-danger-primary-border-color-hover: var(--gl-color-red-800); /* Used for the border of a danger (destructive) primary button in the hover state. */
--gl-button-danger-primary-border-color-active: var(--gl-color-red-900); /* Used for the border of a danger (destructive) primary button in the active state. */
--gl-button-danger-secondary-foreground-color-default: var(--gl-color-red-500); /* Used for the foreground of a danger (destructive) button in the default state. */
--gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-700); /* Used for the foreground of a danger (destructive) button in the hover state. */
--gl-button-danger-secondary-foreground-color-active: var(--gl-color-red-900); /* Used for the foreground of a danger (destructive) button in the active state. */
--gl-button-danger-secondary-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an outlined danger (destructive) button in the default state. */
--gl-button-danger-secondary-background-color-hover: var(--gl-color-red-50); /* Used for the background of an outlined danger (destructive) button in the hover state. */
--g