Skip to content

chore(tokens): sync upstream design tokens (2026-09-29) #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NriotHrreion merged 1 commit into from
Sep 29, 2026
Merged

chore(tokens): sync upstream design tokens (2026-09-29) #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
288 changes: 144 additions & 144 deletions packages/styles/dist/gitlab-ui.css
View file
Open in desktop

Large diffs are not rendered by default.

148 changes: 74 additions & 74 deletions packages/tokens/dist/css/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,17 @@
--gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
--gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);
--gl-color-alpha-light-40: rgba(255, 255, 255, 0.4);
--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-blue-50: #e8f2fd;
--gl-color-blue-100: #c8e0f9;
--gl-color-blue-200: #9dc8f2;
--gl-color-blue-300: #64a7e9;
--gl-color-blue-400: #3f8edd;
--gl-color-blue-500: #1f73ca;
--gl-color-blue-600: #2566b5;
--gl-color-blue-700: #27599f;
--gl-color-blue-800: #254581;
--gl-color-blue-900: #1f3166;
--gl-color-blue-950: #1d2153;
--gl-color-brand-white: #fff;
--gl-color-brand-charcoal: #171321;
--gl-color-brand-orange-01g: #ffd1bf;
Expand Down Expand Up @@ -101,17 +101,17 @@
--gl-color-data-orange-800: #6f3500;
--gl-color-data-orange-900: #5e2f05;
--gl-color-data-orange-950: #4b2707;
--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-green-50: #e6f5ea;
--gl-color-green-100: #bee6d0;
--gl-color-green-200: #84d4b6;
--gl-color-green-300: #35b597;
--gl-color-green-400: #129c84;
--gl-color-green-500: #0d8070;
--gl-color-green-600: #0c7265;
--gl-color-green-700: #0b645a;
--gl-color-green-800: #075048;
--gl-color-green-900: #003c36;
--gl-color-green-950: #002c26;
--gl-color-neutral-0: #fff;
--gl-color-neutral-10: #f7f7f5;
--gl-color-neutral-50: #ecebea;
Expand All @@ -126,39 +126,39 @@
--gl-color-neutral-900: #28272d;
--gl-color-neutral-950: #18171d;
--gl-color-neutral-1000: #050408;
--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-orange-50: #fdf0d5;
--gl-color-orange-100: #fada9c;
--gl-color-orange-200: #f7b951;
--gl-color-orange-300: #fb8017;
--gl-color-orange-400: #e95f21;
--gl-color-orange-500: #c74816;
--gl-color-orange-600: #b34013;
--gl-color-orange-700: #9e3811;
--gl-color-orange-800: #7d2d0e;
--gl-color-orange-900: #5d220d;
--gl-color-orange-950: #461807;
--gl-color-purple-50: #f4f0fc;
--gl-color-purple-100: #e1daf7;
--gl-color-purple-200: #c9beef;
--gl-color-purple-300: #a997e1;
--gl-color-purple-400: #927cd7;
--gl-color-purple-500: #7862c8;
--gl-color-purple-600: #6a54c0;
--gl-color-purple-700: #5b46b8;
--gl-color-purple-800: #483698;
--gl-color-purple-900: #362676;
--gl-color-purple-950: #291a5c;
--gl-color-red-50: #feeef0;
--gl-color-red-100: #ffd3d7;
--gl-color-red-200: #ffafb8;
--gl-color-red-300: #fc7988;
--gl-color-red-400: #f15168;
--gl-color-red-500: #de1d4b;
--gl-color-red-600: #c52042;
--gl-color-red-700: #ac203a;
--gl-color-red-800: #891c2f;
--gl-color-red-900: #641925;
--gl-color-red-950: #48151d;
--gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'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'),'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. */
Expand Down Expand Up @@ -244,11 +244,11 @@
--gl-zindex-4: 4;
--gl-zindex-200: 200;
--gl-zindex-9999: 9999;
--gl-avatar-fallback-background-color-red: rgba(252, 181, 170, 0.23921568627450981); /** Red background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-purple: rgba(203, 187, 242, 0.23921568627450981); /** Purple background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-blue: rgba(157, 199, 241, 0.23921568627450981); /** Blue background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-green: rgba(145, 212, 168, 0.23921568627450981); /** Green background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-orange: rgba(233, 190, 116, 0.23921568627450981); /** Orange background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-red: rgba(255, 175, 184, 0.23921568627450981); /** Red background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-purple: rgba(201, 190, 239, 0.23921568627450981); /** Purple background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-blue: rgba(157, 200, 242, 0.23921568627450981); /** Blue background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-green: rgba(132, 212, 182, 0.23921568627450981); /** Green background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-orange: rgba(247, 185, 81, 0.23921568627450981); /** Orange background for avatar fallback with no particular meaning. */
--gl-avatar-fallback-background-color-neutral: rgba(191, 191, 195, 0.23921568627450981); /** Neutral background for avatar fallback with no particular meaning. */
--gl-broadcast-banner-background-color-blue: #235180; /** Used for the background for the blue banner type. */
--gl-broadcast-banner-background-color-green: #1b653f; /** Used for the background for the green banner type. */
Expand All @@ -266,7 +266,7 @@
--gl-broadcast-banner-border-color-lightindigo: #41419f; /** Used for the border for the lightindigo banner type. */
--gl-broadcast-banner-border-color-lightred: #8f2110; /** Used for the border for the lightred banner type. */
--gl-broadcast-banner-border-color-red: #580d02; /** Used for the border for the red banner type. */
--gl-chart-threshold-area-color: rgba(221, 43, 14, 0.1); /** Used in charts to delineate a threshold area in a chart. */
--gl-chart-threshold-area-color: rgba(222, 29, 75, 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. */
Expand Down Expand Up @@ -379,9 +379,9 @@
--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-danger-background-color-default: rgba(245, 127, 108, 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-action-danger-background-color-default: rgba(222, 29, 75, 0); /** Used for the background of a danger (destructive) action in the default state. */
--gl-action-danger-background-color-hover: rgba(222, 29, 75, 0.16); /** Used for the background of a danger (destructive) action in the hover state. */
--gl-action-danger-background-color-active: rgba(172, 32, 58, 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;
Expand Down Expand Up @@ -577,20 +577,20 @@
--gl-button-confirm-secondary-border-color-hover: var(--gl-color-neutral-950); /** Used for the border of an outlined confirm (positive) button in the hover state. */
--gl-button-confirm-secondary-border-color-active: var(--gl-color-neutral-1000); /** Used for the border of an outlined 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-primary-background-color-default: var(--gl-color-red-600); /** 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-700); /** 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-900); /** 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-700); /** 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-900); /** 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-950); /** 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-600); /** Used for the foreground of a danger (destructive) button in the default state. */
--gl-button-danger-secondary-foreground-color-hover: var(--gl-color-red-800); /** 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. */
--gl-button-danger-secondary-background-color-active: var(--gl-color-red-100); /** Used for the background of an outlined danger (destructive) button in the active state. */
--gl-button-danger-secondary-border-color-default: var(--gl-color-red-500); /** Used for the border of an outlined danger (destructive) button in the default state. */
--gl-button-danger-secondary-border-color-hover: var(--gl-color-red-700); /** Used for the border of an outlined danger (destructive) button in the hover state. */
--gl-button-danger-secondary-border-color-default: var(--gl-color-red-600); /** Used for the border of an outlined danger (destructive) button in the default state. */
--gl-button-danger-secondary-border-color-hover: var(--gl-color-red-800); /** Used for the border of an outlined danger (destructive) button in the hover state. */
--gl-button-danger-secondary-border-color-active: var(--gl-color-red-900); /** Used for the border of an outlined danger (destructive) button in the active state. */
--gl-button-danger-tertiary-background-color-default: var(--gl-action-danger-background-color-default); /** Used for the background of a borderless, tertiary danger (destructive) button in the default state. */
--gl-button-danger-tertiary-background-color-hover: var(--gl-action-danger-background-color-hover); /** Used for the background of a borderless, tertiary danger (destructive) button in the hover state. */
Expand Down
Loading
Loading