paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 43 Packages Projects Releases Wiki Activity

Migrate new tokens

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-02-06 14:45:45 +00:00
parent 53aaa2bf53
commit ce90e89d35
12 changed files with 197 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.storybook/themes/spotify.css
+5 -5
View File
@@ -222,11 +222,11 @@
--bui-bg-solid-disabled: #0f6c30;
--bui-fg-primary: var(--bui-black);
--bui-fg-secondary: var(--bui-gray-7);
--bui-fg-secondary: #757575;
--bui-fg-solid: var(--bui-black);
--bui-fg-solid-disabled: #62ab7c;
--bui-border: var(--bui-gray-3);
--bui-border: #d9d9d9;
--bui-border-hover: rgba(0, 0, 0, 0.3);
--bui-border-pressed: rgba(0, 0, 0, 0.5);
--bui-border-disabled: rgba(0, 0, 0, 0.1);
@@ -258,15 +258,15 @@
--bui-bg-success: #132d21;
--bui-fg-primary: var(--bui-white);
--bui-fg-secondary: var(--bui-gray-7);
--bui-fg-disabled: var(--bui-gray-5);
--bui-fg-secondary: #9e9e9e;
--bui-fg-disabled: #575757;
--bui-fg-solid: var(--bui-black);
--bui-fg-solid-disabled: #072f15;
--bui-fg-danger: #e22b2b;
--bui-fg-warning: #e36d05;
--bui-fg-success: #1db954;
--bui-border: var(--bui-gray-3);
--bui-border: #373737;
--bui-border-hover: rgba(255, 255, 255, 0.4);
--bui-border-pressed: rgba(255, 255, 255, 0.5);
--bui-border-disabled: rgba(255, 255, 255, 0.2);
docs-ui/src/app/tokens/page.mdx
+128 -57
View File
@@ -107,8 +107,6 @@ the value, you add an object with the value and the breakpoint prefix.
## Base colors
These colors are used for special purposes like ring, scrollbar, ...
<Table.Root>
<Table.Header>
<Table.HeaderRow>
@@ -133,62 +131,15 @@ These colors are used for special purposes like ring, scrollbar, ...
Pure white color. This one should be the same in light and dark themes.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-gray-1</Chip>
</Table.Cell>
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-gray-2</Chip>
</Table.Cell>
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-gray-3</Chip>
</Table.Cell>
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-gray-4</Chip>
</Table.Cell>
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-gray-5</Chip>
</Table.Cell>
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-gray-6</Chip>
</Table.Cell>
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-gray-7</Chip>
</Table.Cell>
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-gray-8</Chip>
</Table.Cell>
<Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
## Core background colors
## Neutral background colors
These colors are used for the background of your application. We are mostly using for now a
single elevated background for panels. `--bui-bg-neutral-0` should mostly use as the main background
color of your app.
These colors form a layered neutral scale for your application backgrounds.
`--bui-bg-neutral-0` is the base background color of your app. Each subsequent level
(1 through 4) represents an elevated layer on top of the previous one, with hover,
pressed, and disabled variants for interactive states.
<Table.Root>
<Table.Header>
@@ -202,20 +153,127 @@ color of your app.
<Table.Cell>
<Chip head>--bui-bg-neutral-0</Chip>
</Table.Cell>
<Table.Cell>The background color of your Backstage instance.</Table.Cell>
<Table.Cell>
The base background color of your Backstage instance.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-1</Chip>
</Table.Cell>
<Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
<Table.Cell>
First elevated layer. Use for cards, dialogs, and panels.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-1-hover</Chip>
</Table.Cell>
<Table.Cell>Hover state for elements on neutral-1.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-1-pressed</Chip>
</Table.Cell>
<Table.Cell>Pressed state for elements on neutral-1.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-1-disabled</Chip>
</Table.Cell>
<Table.Cell>Disabled state for elements on neutral-1.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-2</Chip>
</Table.Cell>
<Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
<Table.Cell>
Second elevated layer. Use for elements on top of neutral-1.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-2-hover</Chip>
</Table.Cell>
<Table.Cell>Hover state for elements on neutral-2.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-2-pressed</Chip>
</Table.Cell>
<Table.Cell>Pressed state for elements on neutral-2.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-2-disabled</Chip>
</Table.Cell>
<Table.Cell>Disabled state for elements on neutral-2.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-3</Chip>
</Table.Cell>
<Table.Cell>
Third elevated layer. Use for elements on top of neutral-2.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-3-hover</Chip>
</Table.Cell>
<Table.Cell>Hover state for elements on neutral-3.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-3-pressed</Chip>
</Table.Cell>
<Table.Cell>Pressed state for elements on neutral-3.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-3-disabled</Chip>
</Table.Cell>
<Table.Cell>Disabled state for elements on neutral-3.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-4</Chip>
</Table.Cell>
<Table.Cell>
Fourth elevated layer. Use for elements on top of neutral-3.
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-4-hover</Chip>
</Table.Cell>
<Table.Cell>Hover state for elements on neutral-4.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-4-pressed</Chip>
</Table.Cell>
<Table.Cell>Pressed state for elements on neutral-4.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-neutral-4-disabled</Chip>
</Table.Cell>
<Table.Cell>Disabled state for elements on neutral-4.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
## Solid background colors
<Table.Root>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Prop</Table.HeaderCell>
<Table.HeaderCell>Description</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-solid</Chip>
@@ -240,6 +298,19 @@ color of your app.
</Table.Cell>
<Table.Cell>Used for solid background colors when disabled.</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
## Status background colors
<Table.Root>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Prop</Table.HeaderCell>
<Table.HeaderCell>Description</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-danger</Chip>
docs-ui/src/css/theme-spotify.css
+5 -5
View File
@@ -195,10 +195,10 @@
--bui-bg-solid-pressed: #1abc54;
--bui-bg-solid-disabled: #0f6c30;
--bui-fg-primary: var(--bui-black);
--bui-fg-secondary: var(--bui-gray-7);
--bui-fg-secondary: #757575;
--bui-fg-solid: var(--bui-black);
--bui-fg-solid-disabled: #62ab7c;
--bui-border: var(--bui-gray-3);
--bui-border: #d9d9d9;
--bui-border-hover: #0000004d;
--bui-border-pressed: #00000080;
--bui-border-disabled: #0000001a;
@@ -221,14 +221,14 @@
--bui-bg-warning: #302008;
--bui-bg-success: #132d21;
--bui-fg-primary: var(--bui-white);
--bui-fg-secondary: var(--bui-gray-7);
--bui-fg-disabled: var(--bui-gray-5);
--bui-fg-secondary: #9e9e9e;
--bui-fg-disabled: #575757;
--bui-fg-solid: var(--bui-black);
--bui-fg-solid-disabled: #072f15;
--bui-fg-danger: #e22b2b;
--bui-fg-warning: #e36d05;
--bui-fg-success: #1db954;
--bui-border: var(--bui-gray-3);
--bui-border: #373737;
--bui-border-hover: #fff6;
--bui-border-pressed: #ffffff80;
--bui-border-disabled: #fff3;
docs/conf/user-interface/index.md
+42 -29
View File
@@ -143,39 +143,52 @@ And if you’d like to go even further, you can target specific component class
#### Base colors
These colors are used for special purposes like ring, scrollbar, ...
| Token Name | Description |
| ------------- | ----------------------------------------------------------------------- |
| `--bui-black` | Pure black color. This one should be the same in light and dark themes. |
| `--bui-white` | Pure white color. This one should be the same in light and dark themes. |
| Token Name | Description |
| -------------- | ----------------------------------------------------------------------- |
| `--bui-black` | Pure black color. This one should be the same in light and dark themes. |
| `--bui-white` | Pure white color. This one should be the same in light and dark themes. |
| `--bui-gray-1` | You can use these mostly for backgrounds colors. |
| `--bui-gray-2` | You can use these mostly for backgrounds colors. |
| `--bui-gray-3` | You can use these mostly for backgrounds colors. |
| `--bui-gray-4` | You can use these mostly for backgrounds colors. |
| `--bui-gray-5` | You can use these mostly for backgrounds colors. |
| `--bui-gray-6` | You can use these mostly for backgrounds colors. |
| `--bui-gray-7` | You can use these mostly for backgrounds colors. |
| `--bui-gray-8` | You can use these mostly for backgrounds colors. |
#### Neutral background colors
#### Core background colors
These colors form a layered neutral scale for your application backgrounds. `--bui-bg-neutral-0` is the base background color. Each subsequent level (1 through 4) represents an elevated layer, with hover, pressed, and disabled variants for interactive states.
These colors are used for the background of your application. We are mostly using for now a single elevated background for panels. `--bui-bg-neutral-0` should mostly use as the main background color of your app.
| Token Name | Description |
| ----------------------------- | ------------------------------------------------------------ |
| `--bui-bg-neutral-0` | The base background color of your Backstage instance. |
| `--bui-bg-neutral-1` | First elevated layer. Use for cards, dialogs, and panels. |
| `--bui-bg-neutral-1-hover` | Hover state for elements on neutral-1. |
| `--bui-bg-neutral-1-pressed` | Pressed state for elements on neutral-1. |
| `--bui-bg-neutral-1-disabled` | Disabled state for elements on neutral-1. |
| `--bui-bg-neutral-2` | Second elevated layer. Use for elements on top of neutral-1. |
| `--bui-bg-neutral-2-hover` | Hover state for elements on neutral-2. |
| `--bui-bg-neutral-2-pressed` | Pressed state for elements on neutral-2. |
| `--bui-bg-neutral-2-disabled` | Disabled state for elements on neutral-2. |
| `--bui-bg-neutral-3` | Third elevated layer. Use for elements on top of neutral-2. |
| `--bui-bg-neutral-3-hover` | Hover state for elements on neutral-3. |
| `--bui-bg-neutral-3-pressed` | Pressed state for elements on neutral-3. |
| `--bui-bg-neutral-3-disabled` | Disabled state for elements on neutral-3. |
| `--bui-bg-neutral-4` | Fourth elevated layer. Use for elements on top of neutral-3. |
| `--bui-bg-neutral-4-hover` | Hover state for elements on neutral-4. |
| `--bui-bg-neutral-4-pressed` | Pressed state for elements on neutral-4. |
| `--bui-bg-neutral-4-disabled` | Disabled state for elements on neutral-4. |
| Token Name | Description |
| ------------------------- | ------------------------------------------------ |
| `--bui-bg-neutral-0` | The background color of your Backstage instance. |
| `--bui-bg-neutral-1` | Use for any panels or elevated surfaces. |
| `--bui-bg-neutral-2` | Use for any panels or elevated surfaces. |
| `--bui-bg-neutral-3` | Use for any panels or elevated surfaces. |
| `--bui-bg-solid` | Used for solid background colors. |
| `--bui-bg-solid-hover` | Used for solid background colors when hovered. |
| `--bui-bg-solid-pressed` | Used for solid background colors when pressed. |
| `--bui-bg-solid-disabled` | Used for solid background colors when disabled. |
| `--bui-bg-danger` | Used to show errors information. |
| `--bui-bg-warning` | Used to show warnings information. |
| `--bui-bg-success` | Used to show success information. |
| `--bui-bg-info` | Used to show informational content. |
#### Solid background colors
| Token Name | Description |
| ------------------------- | ----------------------------------------------- |
| `--bui-bg-solid` | Used for solid background colors. |
| `--bui-bg-solid-hover` | Used for solid background colors when hovered. |
| `--bui-bg-solid-pressed` | Used for solid background colors when pressed. |
| `--bui-bg-solid-disabled` | Used for solid background colors when disabled. |
#### Status background colors
| Token Name | Description |
| ------------------ | ----------------------------------- |
| `--bui-bg-danger` | Used to show errors information. |
| `--bui-bg-warning` | Used to show warnings information. |
| `--bui-bg-success` | Used to show success information. |
| `--bui-bg-info` | Used to show informational content. |
#### Foreground colors
packages/ui/src/components/Card/Card.stories.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ const ListRow = ({ children }: { children: React.ReactNode }) => {
style={{
height: 40,
width: '100%',
backgroundColor: 'var(--bui-gray-3)',
backgroundColor: 'var(--bui-bg-neutral-3)',
display: 'flex',
alignItems: 'center',
paddingInline: 'var(--bui-space-3)',
packages/ui/src/components/Dialog/Dialog.module.css
+1 -1
View File
@@ -23,7 +23,7 @@
left: 0;
width: 100%;
height: 100%;
background: color-mix(in srgb, var(--bui-gray-2) 80%, transparent);
background: color-mix(in srgb, var(--bui-bg-neutral-2) 80%, transparent);
display: flex;
align-items: center;
justify-content: center;
packages/ui/src/components/Popover/Popover.module.css
+4 -4
View File
@@ -21,7 +21,7 @@
box-shadow: var(--bui-shadow);
border-radius: var(--bui-radius-3);
background: var(--bui-bg-neutral-1);
border: 1px solid var(--bui-gray-3);
border: 1px solid var(--bui-border);
forced-color-adjust: none;
outline: none;
max-height: inherit;
@@ -94,7 +94,7 @@
}
path:nth-child(2) {
fill: var(--bui-gray-3);
fill: var(--bui-fg-secondary);
}
/* The arrow svg overlaps the popover by 2px, so we
@@ -124,7 +124,7 @@
[data-theme='dark'] .bui-Popover {
background: var(--bui-bg-neutral-2);
border: 1px solid var(--bui-gray-4);
border: 1px solid var(--bui-border);
}
[data-theme='dark'] .bui-PopoverArrow svg path:nth-child(1) {
@@ -132,6 +132,6 @@
}
[data-theme='dark'] .bui-PopoverArrow svg path:nth-child(2) {
fill: var(--bui-gray-4);
fill: var(--bui-fg-secondary);
}
}
packages/ui/src/components/RadioGroup/RadioGroup.module.css
+1 -1
View File
@@ -51,7 +51,7 @@
height: 1rem;
box-sizing: border-box;
border: 0.125rem solid var(--bui-border);
background: var(--bui-gray-1);
background: var(--bui-bg-neutral-1);
border-radius: var(--bui-radius-full);
transition: all 200ms;
flex-shrink: 0;
packages/ui/src/components/Switch/Switch.module.css
+2 -2
View File
@@ -50,7 +50,7 @@
&[data-pressed] {
.indicator {
background: var(--bui-gray-3);
background: var(--bui-bg-neutral-3);
}
}
}
@@ -65,7 +65,7 @@
width: 2rem;
height: 1.143rem;
border: 2px;
background: var(--bui-gray-3);
background: var(--bui-bg-neutral-3);
border-radius: 1.143rem;
transition: all 200ms;
packages/ui/src/components/Tabs/Tabs.module.css
+1 -1
View File
@@ -86,7 +86,7 @@
top: calc(var(--hovered-tab-top) + 4px);
width: var(--hovered-tab-width);
height: calc(var(--hovered-tab-height) - 8px);
background-color: var(--bui-gray-2);
background-color: var(--bui-bg-neutral-2);
border-radius: 4px;
opacity: var(--hovered-tab-opacity);
transition: left var(--hovered-transition-duration) ease-out,
packages/ui/src/components/TagGroup/TagGroup.module.css
+3 -3
View File
@@ -25,7 +25,7 @@
.bui-Tag {
color: var(--bui-fg-primary);
background-color: var(--bui-gray-2);
background-color: var(--bui-bg-neutral-2);
border-radius: var(--bui-radius-2);
display: flex;
align-items: center;
@@ -51,7 +51,7 @@
}
.bui-Tag[data-hovered] {
background-color: var(--bui-gray-3);
background-color: var(--bui-bg-neutral-3);
cursor: pointer;
}
@@ -61,7 +61,7 @@
}
.bui-Tag[data-selected] {
box-shadow: inset 0 0 0 1px var(--bui-gray-8);
box-shadow: inset 0 0 0 1px var(--bui-fg-secondary);
}
.bui-Tag[data-disabled] {
packages/ui/src/components/Tooltip/Tooltip.module.css
+4 -4
View File
@@ -21,7 +21,7 @@
box-shadow: var(--bui-shadow);
border-radius: 4px;
background: var(--bui-bg-neutral-1);
border: 1px solid var(--bui-gray-3);
border: 1px solid var(--bui-border);
forced-color-adjust: none;
outline: none;
padding: var(--bui-space-2) var(--bui-space-3);
@@ -78,7 +78,7 @@
}
path:nth-child(2) {
fill: var(--bui-gray-3);
fill: var(--bui-fg-secondary);
}
/* The arrow svg overlaps the tooltip by 2px, so we
@@ -109,7 +109,7 @@
[data-theme='dark'] .bui-Tooltip {
background: var(--bui-bg-neutral-2);
box-shadow: none;
border: 1px solid var(--bui-gray-4);
border: 1px solid var(--bui-border);
}
[data-theme='dark'] .bui-TooltipArrow svg path:nth-child(1) {
@@ -117,6 +117,6 @@
}
[data-theme='dark'] .bui-TooltipArrow svg path:nth-child(2) {
fill: var(--bui-gray-4);
fill: var(--bui-fg-secondary);
}
}