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

Migrate all components to 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 13:48:08 +00:00
parent f16694e97f
commit 599f6687a2
43 changed files with 371 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-ui/src/app/tokens/page.mdx
+5 -5
View File
@@ -187,7 +187,7 @@ These colors are used for special purposes like ring, scrollbar, ...
## Core 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-surface-0` should mostly use as the main background
single elevated background for panels. `--bui-bg-neutral-0` should mostly use as the main background
color of your app.
<Table.Root>
@@ -200,19 +200,19 @@ color of your app.
<Table.Body>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-surface-0</Chip>
<Chip head>--bui-bg-neutral-0</Chip>
</Table.Cell>
<Table.Cell>The background color of your Backstage instance.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-surface-1</Chip>
<Chip head>--bui-bg-neutral-1</Chip>
</Table.Cell>
<Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Chip head>--bui-bg-surface-2</Chip>
<Chip head>--bui-bg-neutral-2</Chip>
</Table.Cell>
<Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
</Table.Row>
@@ -393,7 +393,7 @@ low contrast to help as a separator with the different background colors.
<Table.Cell>
<Chip head>--bui-border</Chip>
</Table.Cell>
<Table.Cell>It should be used on top of `--bui-bg-surface-1`.</Table.Cell>
<Table.Cell>It should be used on top of `--bui-bg-neutral-1`.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
docs-ui/src/components/Snippet/styles.module.css
+2 -2
View File
@@ -7,7 +7,7 @@
.preview {
border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--border);
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
padding: 1px;
position: relative;
}
@@ -90,7 +90,7 @@
.sideBySidePreview {
border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--border);
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
padding: 1px;
min-width: 0;
display: flex;
docs-ui/src/css/theme-backstage.css
+1 -1
View File
File diff suppressed because one or more lines are too long
docs-ui/src/css/theme-spotify.css
+1 -1
View File
File diff suppressed because one or more lines are too long
docs-ui/src/snippets/code-snippets.ts
+4 -4
View File
@@ -4,8 +4,8 @@ export const customTheme = `:root {
--bui-font-regular: system-ui;
--bui-font-weight-regular: 400;
--bui-font-weight-bold: 600;
--bui-bg-surface-0: #f8f8f8;
--bui-bg-surface-1: #fff;
--bui-bg-neutral-0: #f8f8f8;
--bui-bg-neutral-1: #fff;
/* ... other CSS variables */
/* Add your custom components styles here */
@@ -19,8 +19,8 @@ export const customTheme = `:root {
--bui-font-regular: system-ui;
--bui-font-weight-regular: 400;
--bui-font-weight-bold: 600;
--bui-bg-surface-0: #f8f8f8;
--bui-bg-surface-1: #fff;
--bui-bg-neutral-0: #f8f8f8;
--bui-bg-neutral-1: #fff;
/* ... other CSS variables */
/* Add your custom components styles here */