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

Merge pull request #34400 from backstage/feat/bui-token-redesign

Browse Source 
feat(ui): introduce semantic color token families and deprecate legacy tokens
This commit is contained in:
Charles de Dreuille
2026-05-29 15:40:20 +01:00
committed by GitHub
parent 8f7c02a525 78f6fd3b5b
commit c2f9d8c25d
10 changed files with 1022 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/.eslintrc.js
+2 -1
View File
@@ -3,7 +3,8 @@ module.exports = {
extends: ['plugin:storybook/recommended'],
rules: {
'react/forbid-elements': 'off',
'@backstage/no-mixed-plugin-imports': 'off'
'@backstage/no-mixed-plugin-imports': 'off',
'@backstage/no-deprecated-bui-tokens': 'warn',
},
};
packages/ui/src/css/colors.stories.tsx
+269 -172
View File
@@ -14,192 +14,289 @@
* limitations under the License.
*/
import preview from '../../../../.storybook/preview';
import { Box } from '../components/Box';
import { Flex } from '../components/Flex';
import { Text } from '../components/Text';
const meta = preview.meta({
title: 'Backstage UI/Colors',
tags: ['!manifest'],
});
/**
* A `<div>` styled with `background: var(--bui-bg-inherit)` should always
* resolve to the same color as the surrounding bg provider — at every level
* of the neutral chain and inside intent surfaces.
*/
const Probe = ({ label }: { label: string }) => (
type SwatchItem = { label: string; token: string };
const Swatch = ({ label, token }: SwatchItem) => (
<div
style={{
backgroundColor: 'var(--bui-bg-inherit)',
padding: '0.5rem 0.75rem',
borderRadius: '0.25rem',
outline: '1px dashed var(--bui-fg-secondary)',
display: 'flex',
alignItems: 'center',
gap: '0.75rem',
padding: '0.375rem 0',
}}
>
<Text>{label}</Text>
<div
style={{
width: 28,
height: 28,
borderRadius: 6,
backgroundColor: `var(${token})`,
border: '1px solid rgba(127 127 127 / 20%)',
flexShrink: 0,
}}
/>
<div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
<span
style={{
fontSize: '0.8125rem',
color: 'var(--bui-fg-primary)',
lineHeight: 1.3,
}}
>
{label}
</span>
<span
style={{
fontSize: '0.6875rem',
color: 'var(--bui-fg-secondary)',
fontFamily: 'var(--bui-font-monospace)',
lineHeight: 1.3,
}}
>
{token}
</span>
</div>
</div>
);
export const Default = meta.story({
const Section = ({
title,
tokens,
}: {
title: string;
tokens: SwatchItem[];
}) => (
<div style={{ display: 'flex', flexDirection: 'column', minWidth: 260 }}>
<div
style={{
fontSize: '0.75rem',
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.06em',
color: 'var(--bui-fg-secondary)',
padding: '0.5rem 0',
marginBottom: '0.25rem',
borderBottom: '1px solid var(--bui-border-1)',
}}
>
{title}
</div>
{tokens.map(t => (
<Swatch key={t.token} {...t} />
))}
</div>
);
export const All = meta.story({
name: 'All Colors',
render: () => (
<div style={{ backgroundColor: 'var(--bui-bg-app)' }}>
<Box p="4" style={{ backgroundColor: 'var(--bui-bg-neutral-1)' }}>
<Flex direction="row" gap="4" align="center">
<Text>Neutral 1</Text>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-1-hover)' }}
>
<Text>Hover</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-1-pressed)' }}
>
<Text>Pressed</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-1-disabled)' }}
>
<Text style={{ color: 'var(--bui-fg-disabled)' }}>Disabled</Text>
</Flex>
</Flex>
<Box
p="4"
mt="4"
style={{ backgroundColor: 'var(--bui-bg-neutral-2)' }}
>
<Flex direction="row" gap="4" align="center">
<Text>Neutral 2</Text>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-2-hover)' }}
>
<Text>Hover</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-2-pressed)' }}
>
<Text>Pressed</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-2-disabled)' }}
>
<Text style={{ color: 'var(--bui-fg-disabled)' }}>Disabled</Text>
</Flex>
</Flex>
<Box
p="4"
mt="4"
style={{ backgroundColor: 'var(--bui-bg-neutral-3)' }}
>
<Flex direction="row" gap="4" align="center">
<Text>Neutral 3</Text>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-3-hover)' }}
>
<Text>Hover</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-3-pressed)' }}
>
<Text>Pressed</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-3-disabled)' }}
>
<Text style={{ color: 'var(--bui-fg-disabled)' }}>
Disabled
</Text>
</Flex>
</Flex>
<Box
p="4"
mt="4"
style={{ backgroundColor: 'var(--bui-bg-neutral-4)' }}
>
<Flex direction="row" gap="4" align="center">
<Text>Neutral 4</Text>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-4-hover)' }}
>
<Text>Hover</Text>
</Flex>
<Flex
px="2"
py="1"
style={{ backgroundColor: 'var(--bui-bg-neutral-4-pressed)' }}
>
<Text>Pressed</Text>
</Flex>
<Flex
px="2"
py="1"
style={{
backgroundColor: 'var(--bui-bg-neutral-4-disabled)',
}}
>
<Text style={{ color: 'var(--bui-fg-disabled)' }}>
Disabled
</Text>
</Flex>
</Flex>
</Box>
</Box>
</Box>
</Box>
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
gap: '2.5rem 3rem',
padding: '2rem',
}}
>
<Section
title="Gray Scale"
tokens={[
{ label: 'Gray 1', token: '--bui-gray-1' },
{ label: 'Gray 2', token: '--bui-gray-2' },
{ label: 'Gray 3', token: '--bui-gray-3' },
{ label: 'Gray 4', token: '--bui-gray-4' },
{ label: 'Gray 5', token: '--bui-gray-5' },
{ label: 'Gray 6', token: '--bui-gray-6' },
{ label: 'Gray 7', token: '--bui-gray-7' },
{ label: 'Gray 8', token: '--bui-gray-8' },
{ label: 'Gray 9', token: '--bui-gray-9' },
{ label: 'Gray 10', token: '--bui-gray-10' },
{ label: 'Gray 11', token: '--bui-gray-11' },
]}
/>
<Section
title="Neutral Backgrounds"
tokens={[
{ label: 'App', token: '--bui-bg-app' },
{ label: 'Neutral 1', token: '--bui-bg-neutral-1' },
{ label: 'Neutral 2', token: '--bui-bg-neutral-2' },
{ label: 'Neutral 3', token: '--bui-bg-neutral-3' },
{ label: 'Neutral 4', token: '--bui-bg-neutral-4' },
]}
/>
<Section
title="Foreground"
tokens={[
{ label: 'Primary', token: '--bui-fg-primary' },
{ label: 'Secondary', token: '--bui-fg-secondary' },
{ label: 'Disabled', token: '--bui-fg-disabled' },
{ label: 'Positive', token: '--bui-fg-positive' },
{ label: 'Negative', token: '--bui-fg-negative' },
{ label: 'Warning', token: '--bui-fg-warning' },
{ label: 'Announcement', token: '--bui-fg-announcement' },
]}
/>
<Section
title="Border"
tokens={[
{ label: 'Border 1', token: '--bui-border-1' },
{ label: 'Border 2', token: '--bui-border-2' },
]}
/>
<Section
title="Accent"
tokens={[
{ label: 'Bg', token: '--bui-accent-bg' },
{ label: 'Bg - Hover', token: '--bui-accent-bg-hover' },
{ label: 'Bg - Disabled', token: '--bui-accent-bg-disabled' },
{ label: 'Fg', token: '--bui-accent-fg' },
{ label: 'Fg - Disabled', token: '--bui-accent-fg-disabled' },
]}
/>
<Section
title="Announcement"
tokens={[
{ label: 'Bg - Base', token: '--bui-announcement-bg' },
{
label: 'Bg - Base - Hover',
token: '--bui-announcement-bg-hover',
},
{
label: 'Bg - Base - Disabled',
token: '--bui-announcement-bg-disabled',
},
{ label: 'Bg - Subdued', token: '--bui-announcement-bg-subdued' },
{
label: 'Bg - Subdued - Hover',
token: '--bui-announcement-bg-subdued-hover',
},
{
label: 'Bg - Subdued - Disabled',
token: '--bui-announcement-bg-subdued-disabled',
},
{ label: 'Border', token: '--bui-announcement-border' },
{ label: 'Fg - On Base', token: '--bui-announcement-fg' },
{
label: 'Fg - On Base - Disabled',
token: '--bui-announcement-fg-disabled',
},
{
label: 'Fg - On Subdued',
token: '--bui-announcement-fg-subdued',
},
{
label: 'Fg - On Subdued - Disabled',
token: '--bui-announcement-fg-subdued-disabled',
},
]}
/>
<Section
title="Warning"
tokens={[
{ label: 'Bg - Base', token: '--bui-warning-bg' },
{ label: 'Bg - Base - Hover', token: '--bui-warning-bg-hover' },
{
label: 'Bg - Base - Disabled',
token: '--bui-warning-bg-disabled',
},
{ label: 'Bg - Subdued', token: '--bui-warning-bg-subdued' },
{
label: 'Bg - Subdued - Hover',
token: '--bui-warning-bg-subdued-hover',
},
{
label: 'Bg - Subdued - Disabled',
token: '--bui-warning-bg-subdued-disabled',
},
{ label: 'Border', token: '--bui-warning-border' },
{ label: 'Fg - On Base', token: '--bui-warning-fg' },
{
label: 'Fg - On Base - Disabled',
token: '--bui-warning-fg-disabled',
},
{ label: 'Fg - On Subdued', token: '--bui-warning-fg-subdued' },
{
label: 'Fg - On Subdued - Disabled',
token: '--bui-warning-fg-subdued-disabled',
},
]}
/>
<Section
title="Negative"
tokens={[
{ label: 'Bg - Base', token: '--bui-negative-bg' },
{ label: 'Bg - Base - Hover', token: '--bui-negative-bg-hover' },
{
label: 'Bg - Base - Disabled',
token: '--bui-negative-bg-disabled',
},
{ label: 'Bg - Subdued', token: '--bui-negative-bg-subdued' },
{
label: 'Bg - Subdued - Hover',
token: '--bui-negative-bg-subdued-hover',
},
{
label: 'Bg - Subdued - Disabled',
token: '--bui-negative-bg-subdued-disabled',
},
{ label: 'Border', token: '--bui-negative-border' },
{ label: 'Fg - On Base', token: '--bui-negative-fg' },
{
label: 'Fg - On Base - Disabled',
token: '--bui-negative-fg-disabled',
},
{ label: 'Fg - On Subdued', token: '--bui-negative-fg-subdued' },
{
label: 'Fg - On Subdued - Disabled',
token: '--bui-negative-fg-subdued-disabled',
},
]}
/>
<Section
title="Positive"
tokens={[
{ label: 'Bg - Base', token: '--bui-positive-bg' },
{ label: 'Bg - Base - Hover', token: '--bui-positive-bg-hover' },
{
label: 'Bg - Base - Disabled',
token: '--bui-positive-bg-disabled',
},
{ label: 'Bg - Subdued', token: '--bui-positive-bg-subdued' },
{
label: 'Bg - Subdued - Hover',
token: '--bui-positive-bg-subdued-hover',
},
{
label: 'Bg - Subdued - Disabled',
token: '--bui-positive-bg-subdued-disabled',
},
{ label: 'Border', token: '--bui-positive-border' },
{ label: 'Fg - On Base', token: '--bui-positive-fg' },
{
label: 'Fg - On Base - Disabled',
token: '--bui-positive-fg-disabled',
},
{ label: 'Fg - On Subdued', token: '--bui-positive-fg-subdued' },
{
label: 'Fg - On Subdued - Disabled',
token: '--bui-positive-fg-subdued-disabled',
},
]}
/>
</div>
),
});
export const BgInherit = meta.story({
render: () => (
<Flex direction="column" gap="4">
<Probe label="App level (no provider) — resolves to --bui-bg-app" />
<Box bg="neutral" p="4">
<Flex direction="column" gap="3">
<Probe label="Inside neutral-1 — resolves to --bui-bg-neutral-1" />
<Box bg="neutral" p="4">
<Flex direction="column" gap="3">
<Probe label="Inside neutral-2 — resolves to --bui-bg-neutral-2" />
<Box bg="neutral" p="4">
<Probe label="Inside neutral-3 — resolves to --bui-bg-neutral-3" />
</Box>
</Flex>
</Box>
</Flex>
</Box>
<Box bg="danger" p="4">
<Probe label="Inside danger — resolves to --bui-bg-danger" />
</Box>
<Box bg="warning" p="4">
<Probe label="Inside warning — resolves to --bui-bg-warning" />
</Box>
<Box bg="success" p="4">
<Probe label="Inside success — resolves to --bui-bg-success" />
</Box>
</Flex>
),
});
packages/ui/src/css/tokens.css
+184 -68
View File
@@ -67,150 +67,266 @@
--bui-radius-6: calc(1.25rem);
--bui-radius-full: 9999px;
/* Animations */
--bui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
/* Base Colors */
--bui-black: #000000;
--bui-white: #ffffff;
--bui-ring: #1f5493;
--bui-scrollbar: #a0a0a03b;
--bui-scrollbar-thumb: #a0a0a0;
/* Solid background colors */
/* Gray scale */
--bui-gray-1: #fafafa;
--bui-gray-2: #f5f5f5;
--bui-gray-3: #e5e5e5;
--bui-gray-4: #d4d4d4;
--bui-gray-5: #a1a1a1;
--bui-gray-6: #737373;
--bui-gray-7: #525252;
--bui-gray-8: #404040;
--bui-gray-9: #262626;
--bui-gray-10: #171717;
--bui-gray-11: #0a0a0a;
/* Neutral background colors */
--bui-bg-app: #f5f5f5;
--bui-bg-neutral-1: var(--bui-white);
--bui-bg-neutral-2: #f7f7f7;
--bui-bg-neutral-3: var(--bui-white);
--bui-bg-neutral-4: #f7f7f7;
/* Foreground colors */
--bui-fg-primary: var(--bui-black);
--bui-fg-secondary: #696969;
--bui-fg-disabled: #aaaaaa;
--bui-fg-positive: #1abc54;
--bui-fg-negative: #ee3a4c;
--bui-fg-warning: #f18900;
--bui-fg-announcement: #2a86f3;
/* Border colors */
--bui-border-1: var(--bui-gray-3);
--bui-border-2: var(--bui-gray-6);
/* Accent */
--bui-accent-bg: #1f5493;
--bui-accent-bg-hover: #163a66;
--bui-accent-bg-disabled: #163a66;
--bui-accent-fg: #ffffff;
--bui-accent-fg-disabled: #98a8bc;
/* Announcement */
--bui-announcement-bg: #0d72ea;
--bui-announcement-bg-hover: #2b88f5;
--bui-announcement-bg-disabled: #0d72ea;
--bui-announcement-bg-subdued: #c8e0fc;
--bui-announcement-bg-subdued-hover: #e0edfd;
--bui-announcement-bg-subdued-disabled: #c8e0fc;
--bui-announcement-border: #549ef4;
--bui-announcement-fg: #ffffff;
--bui-announcement-fg-disabled: #a4ccfb;
--bui-announcement-fg-subdued: #173da6;
--bui-announcement-fg-subdued-disabled: #7391e3;
/* Warning */
--bui-warning-bg: #ff9400;
--bui-warning-bg-hover: #ffb656;
--bui-warning-bg-disabled: #ff9400;
--bui-warning-bg-subdued: #ffedd5;
--bui-warning-bg-subdued-hover: #f8ddb9;
--bui-warning-bg-subdued-disabled: #f8ddb9;
--bui-warning-border: #ff9400;
--bui-warning-fg: #000000;
--bui-warning-fg-disabled: #aa4d00;
--bui-warning-fg-subdued: #aa4d00;
--bui-warning-fg-subdued-disabled: #e3a572;
/* Negative */
--bui-negative-bg: #dc2626;
--bui-negative-bg-hover: #f44b4b;
--bui-negative-bg-disabled: #ff8686;
--bui-negative-bg-subdued: #ffcbcb;
--bui-negative-bg-subdued-hover: #f7b6b6;
--bui-negative-bg-subdued-disabled: #f7b6b6;
--bui-negative-border: #d06565;
--bui-negative-fg: #ffffff;
--bui-negative-fg-disabled: #f7b6b6;
--bui-negative-fg-subdued: #991919;
--bui-negative-fg-subdued-disabled: #bb7272;
/* Positive */
--bui-positive-bg: #1ed760;
--bui-positive-bg-hover: #3be477;
--bui-positive-bg-disabled: #1abc54;
--bui-positive-bg-subdued: #96f0b6;
--bui-positive-bg-subdued-hover: #c5f7d7;
--bui-positive-bg-subdued-disabled: #96f0b6;
--bui-positive-border: #54a671;
--bui-positive-fg: #000000;
--bui-positive-fg-disabled: #0c632b;
--bui-positive-fg-subdued: #0c632b;
--bui-positive-fg-subdued-disabled: #4b9666;
/* Deprecated tokens */
--bui-bg-solid: #1f5493;
--bui-bg-solid-hover: #163a66;
--bui-bg-solid-pressed: #0f2b4e;
--bui-bg-solid-disabled: #163a66;
/* Neutral background colors */
--bui-bg-app: #f8f8f8;
--bui-bg-neutral-1: #fff;
--bui-bg-neutral-1-hover: oklch(0% 0 0 / 6%);
--bui-bg-neutral-1-pressed: oklch(0% 0 0 / 12%);
--bui-bg-neutral-1-disabled: oklch(0% 0 0 / 6%);
--bui-bg-neutral-2: oklch(0% 0 0 / 6%);
--bui-bg-neutral-2-hover: oklch(0% 0 0 / 12%);
--bui-bg-neutral-2-pressed: oklch(0% 0 0 / 16%);
--bui-bg-neutral-2-disabled: oklch(0% 0 0 / 6%);
--bui-bg-neutral-3: oklch(0% 0 0 / 6%);
--bui-bg-neutral-3-hover: oklch(0% 0 0 / 12%);
--bui-bg-neutral-3-pressed: oklch(0% 0 0 / 16%);
--bui-bg-neutral-3-disabled: oklch(0% 0 0 / 6%);
--bui-bg-neutral-4: oklch(0% 0 0 / 6%);
--bui-bg-neutral-4-hover: oklch(0% 0 0 / 12%);
--bui-bg-neutral-4-pressed: oklch(0% 0 0 / 16%);
--bui-bg-neutral-4-disabled: oklch(0% 0 0 / 6%);
/* Status background colors */
--bui-bg-danger: #ffe2e2;
--bui-bg-warning: #ffedd5;
--bui-bg-success: #dcfce7;
--bui-bg-info: #dbeafe;
/* Foreground colors */
--bui-fg-primary: var(--bui-black);
--bui-fg-secondary: oklch(0% 0 0 / 50%);
--bui-fg-disabled: oklch(0% 0 0 / 28%);
--bui-fg-solid: var(--bui-white);
--bui-fg-solid-disabled: #98a8bc;
/* Foreground Statuses */
--bui-fg-danger-on-bg: #991919;
--bui-fg-warning-on-bg: #92310a;
--bui-fg-success-on-bg: #116932;
--bui-fg-info-on-bg: #173da6;
--bui-fg-danger: #ec3b18;
--bui-fg-warning: #ef7a32;
--bui-fg-success: #1aaf4f;
--bui-fg-info: #0d74ce;
/* Border colors */
--bui-border-1: #d5d5d5;
--bui-border-2: #bababa;
--bui-border-info: #7ea9d6;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
--bui-border-success: #53db83;
/* Special colors */
--bui-ring: #1f5493;
--bui-scrollbar: #a0a0a03b;
--bui-scrollbar-thumb: #a0a0a0;
/* Shadows */
--bui-shadow: 0 10px 15px -3px rgba(0 0 0 / 0.1),
0 4px 6px -4px rgba(0 0 0 / 0.1);
--bui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Dark theme tokens */
[data-theme-mode='dark'] {
/* Solid background colors */
/* Base colors */
--bui-ring: #1f5493;
--bui-scrollbar: #3636363a;
--bui-scrollbar-thumb: #575757;
/* Neutral background colors */
--bui-bg-app: #333333;
--bui-bg-neutral-1: #1a1a1a;
--bui-bg-neutral-2: #282828;
--bui-bg-neutral-3: #393939;
--bui-bg-neutral-4: #474747;
/* Foreground colors */
--bui-fg-primary: var(--bui-white);
--bui-fg-secondary: #a3a3a3;
--bui-fg-disabled: var(--bui-white);
--bui-fg-positive: #21b656;
--bui-fg-negative: #ee3a4c;
--bui-fg-warning: #f18900;
--bui-fg-announcement: #2a86f3;
/* Border colors */
--bui-border-1: var(--bui-gray-6);
--bui-border-2: var(--bui-gray-5);
/* Accent */
--bui-accent-bg: #9cc9ff;
--bui-accent-bg-hover: #83b9fd;
--bui-accent-bg-disabled: #3b6293;
--bui-accent-fg: #101821;
--bui-accent-fg-disabled: #6191cc;
/* Announcement */
--bui-announcement-bg: #0d72ea;
--bui-announcement-bg-hover: #2b88f5;
--bui-announcement-bg-disabled: #0d72ea;
--bui-announcement-bg-subdued: #052a56;
--bui-announcement-bg-subdued-hover: #0c3d77;
--bui-announcement-bg-subdued-disabled: #052a56;
--bui-announcement-border: #2363af;
--bui-announcement-fg: #ffffff;
--bui-announcement-fg-disabled: #70b8ff;
--bui-announcement-fg-subdued: #70b8ff;
--bui-announcement-fg-subdued-disabled: #4275a6;
/* Warning */
--bui-warning-bg: #ffa42c;
--bui-warning-bg-hover: #ffb656;
--bui-warning-bg-disabled: #ffb656;
--bui-warning-bg-subdued: #491e00;
--bui-warning-bg-subdued-hover: #612901;
--bui-warning-bg-subdued-disabled: #582400;
--bui-warning-border: #7c4903;
--bui-warning-fg: #000000;
--bui-warning-fg-disabled: #aa4d00;
--bui-warning-fg-subdued: #f2ab4a;
--bui-warning-fg-subdued-disabled: #aa4d00;
/* Negative */
--bui-negative-bg: #dc2626;
--bui-negative-bg-hover: #f44b4b;
--bui-negative-bg-disabled: #dc2626;
--bui-negative-bg-subdued: #350708;
--bui-negative-bg-subdued-hover: #5e1a1b;
--bui-negative-bg-subdued-disabled: #5e1a1b;
--bui-negative-border: #6f101c;
--bui-negative-fg: #ffffff;
--bui-negative-fg-disabled: #f7b6b6;
--bui-negative-fg-subdued: #fca5a5;
--bui-negative-fg-subdued-disabled: #bb7272;
/* Positive */
--bui-positive-bg: #1ed760;
--bui-positive-bg-hover: #3be477;
--bui-positive-bg-disabled: #1abc54;
--bui-positive-bg-subdued: #073116;
--bui-positive-bg-subdued-hover: #0b431f;
--bui-positive-bg-subdued-disabled: #073116;
--bui-positive-border: #136d33;
--bui-positive-fg: #000000;
--bui-positive-fg-disabled: #0c632b;
--bui-positive-fg-subdued: #8ddeaa;
--bui-positive-fg-subdued-disabled: #509c6b;
/* Deprecated tokens */
--bui-bg-solid: #9cc9ff;
--bui-bg-solid-hover: #83b9fd;
--bui-bg-solid-pressed: #83b9fd;
--bui-bg-solid-disabled: #1b3d68;
/* Neutral background colors */
--bui-bg-app: #333333;
--bui-bg-neutral-1: oklch(100% 0 0 / 10%);
--bui-bg-neutral-1-hover: oklch(100% 0 0 / 14%);
--bui-bg-neutral-1-pressed: oklch(100% 0 0 / 20%);
--bui-bg-neutral-1-disabled: oklch(100% 0 0 / 10%);
--bui-bg-neutral-2: oklch(100% 0 0 / 6%);
--bui-bg-neutral-2-hover: oklch(100% 0 0 / 10%);
--bui-bg-neutral-2-pressed: oklch(100% 0 0 / 16%);
--bui-bg-neutral-2-disabled: oklch(100% 0 0 / 6%);
--bui-bg-neutral-3: oklch(100% 0 0 / 8%);
--bui-bg-neutral-3-hover: oklch(100% 0 0 / 12%);
--bui-bg-neutral-3-pressed: oklch(100% 0 0 / 20%);
--bui-bg-neutral-3-disabled: oklch(100% 0 0 / 8%);
--bui-bg-neutral-4: oklch(100% 0 0 / 8%);
--bui-bg-neutral-4-hover: oklch(100% 0 0 / 12%);
--bui-bg-neutral-4-pressed: oklch(100% 0 0 / 20%);
--bui-bg-neutral-4-disabled: oklch(100% 0 0 / 8%);
/* Status background colors */
--bui-bg-danger: #300c0c;
--bui-bg-warning: #302008;
--bui-bg-success: #042713;
--bui-bg-info: #132049;
/* Foreground colors */
--bui-fg-primary: var(--bui-white);
--bui-fg-secondary: oklch(100% 0 0 / 50%);
--bui-fg-disabled: oklch(100% 0 0 / 28%);
--bui-fg-solid: #101821;
--bui-fg-solid-disabled: #6191cc;
/* Foreground statuses */
--bui-fg-danger-on-bg: #fca5a5;
--bui-fg-warning-on-bg: #fdba74;
--bui-fg-success-on-bg: #86efac;
--bui-fg-info-on-bg: #a3cfff;
--bui-fg-danger: #ff5a30;
--bui-fg-warning: #ffa057;
--bui-fg-success: #1ed760;
--bui-fg-info: #70b8ff;
/* Border colors */
--bui-border-1: #434343;
--bui-border-2: #585858;
--bui-border-info: #7ea9d6;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
--bui-border-success: #53db83;
/* Special colors */
--bui-ring: #1f5493;
--bui-scrollbar: #3636363a;
--bui-scrollbar-thumb: #575757;
/* Shadows */
--bui-shadow: none;
}
}