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

Merge branch 'master' into bui-surfaces

Browse Source
This commit is contained in:
Charles de Dreuille
2026-02-06 17:37:05 +00:00
parent 7c966d34eb 5e639d4368
commit 0bcd685427
58 changed files with 837 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/css/styles.css
+39 -61
View File
@@ -43,45 +43,34 @@
--bui-radius-full: 9999px;
--bui-black: #000;
--bui-white: #fff;
--bui-gray-1: #f8f8f8;
--bui-gray-2: #ececec;
--bui-gray-3: #d9d9d9;
--bui-gray-4: #c1c1c1;
--bui-gray-5: #9e9e9e;
--bui-gray-6: #8c8c8c;
--bui-gray-7: #757575;
--bui-gray-8: #595959;
--bui-bg-surface-0: var(--bui-gray-1);
--bui-bg-surface-1: var(--bui-white);
--bui-bg-surface-2: var(--bui-gray-1);
--bui-bg-surface-3: var(--bui-gray-2);
--bui-bg-solid: #1f5493;
--bui-bg-solid-hover: #163a66;
--bui-bg-solid-pressed: #0f2b4e;
--bui-bg-solid-disabled: #163a66;
--bui-bg-neutral-on-surface-0: oklch(0% 0 0 / .06);
--bui-bg-neutral-on-surface-0-hover: oklch(0% 0 0 / .12);
--bui-bg-neutral-on-surface-0-pressed: oklch(0% 0 0 / .16);
--bui-bg-neutral-on-surface-0-disabled: oklch(0% 0 0 / .06);
--bui-bg-neutral-on-surface-1: oklch(0% 0 0 / .06);
--bui-bg-neutral-on-surface-1-hover: oklch(0% 0 0 / .12);
--bui-bg-neutral-on-surface-1-pressed: oklch(0% 0 0 / .16);
--bui-bg-neutral-on-surface-1-disabled: oklch(0% 0 0 / .06);
--bui-bg-neutral-on-surface-2: oklch(0% 0 0 / .06);
--bui-bg-neutral-on-surface-2-hover: oklch(0% 0 0 / .12);
--bui-bg-neutral-on-surface-2-pressed: oklch(0% 0 0 / .16);
--bui-bg-neutral-on-surface-2-disabled: oklch(0% 0 0 / .06);
--bui-bg-neutral-on-surface-3: oklch(0% 0 0 / .06);
--bui-bg-neutral-on-surface-3-hover: oklch(0% 0 0 / .12);
--bui-bg-neutral-on-surface-3-pressed: oklch(0% 0 0 / .16);
--bui-bg-neutral-on-surface-3-disabled: oklch(0% 0 0 / .06);
--bui-bg-neutral-0: #f8f8f8;
--bui-bg-neutral-1: #fff;
--bui-bg-neutral-1-hover: oklch(0% 0 0 / .12);
--bui-bg-neutral-1-pressed: oklch(0% 0 0 / .16);
--bui-bg-neutral-1-disabled: oklch(0% 0 0 / .06);
--bui-bg-neutral-2: oklch(0% 0 0 / .06);
--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 / .06);
--bui-bg-neutral-3: oklch(0% 0 0 / .06);
--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 / .06);
--bui-bg-neutral-4: oklch(0% 0 0 / .06);
--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 / .06);
--bui-bg-danger: #ffe2e2;
--bui-bg-warning: #ffedd5;
--bui-bg-success: #dcfce7;
--bui-bg-info: #dbeafe;
--bui-fg-primary: var(--bui-black);
--bui-fg-secondary: var(--bui-gray-7);
--bui-fg-disabled: #9e9e9e;
--bui-fg-secondary: oklch(0% 0 0 / .5);
--bui-fg-disabled: oklch(0% 0 0 / .28);
--bui-fg-solid: var(--bui-white);
--bui-fg-solid-disabled: #98a8bc;
--bui-fg-danger-on-bg: #991919;
@@ -108,45 +97,34 @@
}
[data-theme-mode="dark"] {
--bui-gray-1: #191919;
--bui-gray-2: #242424;
--bui-gray-3: #373737;
--bui-gray-4: #464646;
--bui-gray-5: #575757;
--bui-gray-6: #7b7b7b;
--bui-gray-7: #9e9e9e;
--bui-gray-8: #b4b4b4;
--bui-bg-surface-0: #333;
--bui-bg-surface-1: var(--bui-gray-1);
--bui-bg-surface-2: var(--bui-gray-2);
--bui-bg-surface-3: var(--bui-gray-3);
--bui-bg-solid: #9cc9ff;
--bui-bg-solid-hover: #83b9fd;
--bui-bg-solid-pressed: #83b9fd;
--bui-bg-solid-disabled: #1b3d68;
--bui-bg-neutral-on-surface-0: oklch(100% 0 0 / .1);
--bui-bg-neutral-on-surface-0-hover: oklch(100% 0 0 / .14);
--bui-bg-neutral-on-surface-0-pressed: oklch(100% 0 0 / .2);
--bui-bg-neutral-on-surface-0-disabled: oklch(100% 0 0 / .1);
--bui-bg-neutral-on-surface-1: oklch(100% 0 0 / .06);
--bui-bg-neutral-on-surface-1-hover: oklch(100% 0 0 / .1);
--bui-bg-neutral-on-surface-1-pressed: oklch(100% 0 0 / .16);
--bui-bg-neutral-on-surface-1-disabled: oklch(100% 0 0 / .06);
--bui-bg-neutral-on-surface-2: oklch(100% 0 0 / .08);
--bui-bg-neutral-on-surface-2-hover: oklch(100% 0 0 / .12);
--bui-bg-neutral-on-surface-2-pressed: oklch(100% 0 0 / .2);
--bui-bg-neutral-on-surface-2-disabled: oklch(100% 0 0 / .08);
--bui-bg-neutral-on-surface-3: oklch(100% 0 0 / .08);
--bui-bg-neutral-on-surface-3-hover: oklch(100% 0 0 / .12);
--bui-bg-neutral-on-surface-3-pressed: oklch(100% 0 0 / .2);
--bui-bg-neutral-on-surface-3-disabled: oklch(100% 0 0 / .08);
--bui-bg-neutral-0: #333;
--bui-bg-neutral-1: oklch(100% 0 0 / .1);
--bui-bg-neutral-1-hover: oklch(100% 0 0 / .14);
--bui-bg-neutral-1-pressed: oklch(100% 0 0 / .2);
--bui-bg-neutral-1-disabled: oklch(100% 0 0 / .1);
--bui-bg-neutral-2: oklch(100% 0 0 / .06);
--bui-bg-neutral-2-hover: oklch(100% 0 0 / .1);
--bui-bg-neutral-2-pressed: oklch(100% 0 0 / .16);
--bui-bg-neutral-2-disabled: oklch(100% 0 0 / .06);
--bui-bg-neutral-3: oklch(100% 0 0 / .08);
--bui-bg-neutral-3-hover: oklch(100% 0 0 / .12);
--bui-bg-neutral-3-pressed: oklch(100% 0 0 / .2);
--bui-bg-neutral-3-disabled: oklch(100% 0 0 / .08);
--bui-bg-neutral-4: oklch(100% 0 0 / .08);
--bui-bg-neutral-4-hover: oklch(100% 0 0 / .12);
--bui-bg-neutral-4-pressed: oklch(100% 0 0 / .2);
--bui-bg-neutral-4-disabled: oklch(100% 0 0 / .08);
--bui-bg-danger: #300c0c;
--bui-bg-warning: #302008;
--bui-bg-success: #042713;
--bui-bg-info: #132049;
--bui-fg-primary: var(--bui-white);
--bui-fg-secondary: var(--bui-gray-7);
--bui-fg-disabled: var(--bui-gray-7);
--bui-fg-secondary: oklch(0% 0 0 / .5);
--bui-fg-disabled: oklch(0% 0 0 / .28);
--bui-fg-solid: #101821;
--bui-fg-solid-disabled: #6191cc;
--bui-fg-danger-on-bg: #fca5a5;
@@ -273,7 +251,7 @@
}
body {
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
color: var(--bui-fg-primary);
font-family: var(--bui-font-regular);
font-weight: var(--bui-font-weight-regular);
packages/ui/src/components/Accordion/Accordion.module.css
+1 -1
View File
@@ -19,7 +19,7 @@
@layer components {
.bui-Accordion {
width: 100%;
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
border-radius: var(--bui-radius-3);
padding: var(--bui-space-3);
}
packages/ui/src/components/Alert/Alert.module.css
+1 -1
View File
@@ -18,7 +18,7 @@
@layer components {
.bui-Alert {
--alert-bg: var(--bui-bg-surface-1);
--alert-bg: var(--bui-bg-neutral-1);
--alert-fg: var(--bui-fg-primary);
display: flex;
packages/ui/src/components/Avatar/Avatar.module.css
+1 -1
View File
@@ -26,7 +26,7 @@
user-select: none;
font-weight: 500;
color: var(--bui-fg-primary);
background-color: var(--bui-bg-surface-2);
background-color: var(--bui-bg-neutral-2);
font-size: 1rem;
line-height: 1;
overflow: hidden;
packages/ui/src/components/Box/Box.module.css
+4 -4
View File
@@ -24,19 +24,19 @@
}
.bui-Box[data-surface='0'] {
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
}
.bui-Box[data-surface='1'] {
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
}
.bui-Box[data-surface='2'] {
background-color: var(--bui-bg-surface-2);
background-color: var(--bui-bg-neutral-2);
}
.bui-Box[data-surface='3'] {
background-color: var(--bui-bg-surface-3);
background-color: var(--bui-bg-neutral-3);
}
.bui-Box[data-surface='danger'] {
packages/ui/src/components/Button/Button.module.css
+20 -20
View File
@@ -113,27 +113,27 @@
}
.bui-Button[data-variant='secondary'] {
--bg: var(--bui-bg-neutral-on-surface-0);
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg: var(--bui-bg-neutral-1);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg: var(--bui-bg-neutral-on-surface-1);
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg: var(--bui-bg-neutral-2);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg: var(--bui-bg-neutral-on-surface-2);
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg: var(--bui-bg-neutral-3);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg: var(--bui-bg-neutral-on-surface-3);
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg: var(--bui-bg-neutral-4);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'],
@@ -178,23 +178,23 @@
}
.bui-Button[data-variant='tertiary'] {
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'],
packages/ui/src/components/Button/Button.stories.tsx
+58 -44
View File
@@ -82,7 +82,7 @@ export const Variants = meta.story({
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 0</Text>
<Text>Neutral 0</Text>
<Flex align="center" surface="0" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
@@ -105,7 +105,7 @@ export const Variants = meta.story({
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 1</Text>
<Text>Neutral 1</Text>
<Flex align="center" surface="1" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
@@ -128,50 +128,64 @@ export const Variants = meta.story({
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 2</Text>
<Flex align="center" surface="2" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="primary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary" destructive>
Button
</Button>
</Flex>
<Text>Neutral 2</Text>
<Box surface="1">
<Flex align="center" surface="2" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="primary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary" destructive>
Button
</Button>
</Flex>
</Box>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 3</Text>
<Flex align="center" surface="3" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="primary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary" destructive>
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary" destructive>
Button
</Button>
</Flex>
<Text>Neutral 3</Text>
<Box surface="1">
<Box surface="2">
<Flex align="center" surface="3" p="4">
<Button iconStart={<RiCloudLine />} variant="primary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="secondary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="tertiary">
Button
</Button>
<Button iconStart={<RiCloudLine />} variant="primary" destructive>
Button
</Button>
<Button
iconStart={<RiCloudLine />}
variant="secondary"
destructive
>
Button
</Button>
<Button
iconStart={<RiCloudLine />}
variant="tertiary"
destructive
>
Button
</Button>
</Flex>
</Box>
</Box>
</Flex>
</Flex>
),
packages/ui/src/components/ButtonIcon/ButtonIcon.module.css
+20 -20
View File
@@ -80,27 +80,27 @@
}
.bui-ButtonIcon[data-variant='secondary'] {
--bg: var(--bui-bg-neutral-on-surface-0);
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg: var(--bui-bg-neutral-1);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg: var(--bui-bg-neutral-on-surface-1);
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg: var(--bui-bg-neutral-2);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg: var(--bui-bg-neutral-on-surface-2);
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg: var(--bui-bg-neutral-3);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg: var(--bui-bg-neutral-on-surface-3);
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg: var(--bui-bg-neutral-4);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'],
@@ -118,23 +118,23 @@
}
.bui-ButtonIcon[data-variant='tertiary'] {
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'],
packages/ui/src/components/ButtonLink/ButtonLink.module.css
+20 -20
View File
@@ -74,27 +74,27 @@
}
.bui-ButtonLink[data-variant='secondary'] {
--bg: var(--bui-bg-neutral-on-surface-0);
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg: var(--bui-bg-neutral-1);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg: var(--bui-bg-neutral-on-surface-1);
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg: var(--bui-bg-neutral-2);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg: var(--bui-bg-neutral-on-surface-2);
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg: var(--bui-bg-neutral-3);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg: var(--bui-bg-neutral-on-surface-3);
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg: var(--bui-bg-neutral-4);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'] {
@@ -111,23 +111,23 @@
}
.bui-ButtonLink[data-variant='tertiary'] {
--bg-hover: var(--bui-bg-neutral-on-surface-0-hover);
--bg-active: var(--bui-bg-neutral-on-surface-0-pressed);
--bg-hover: var(--bui-bg-neutral-1-hover);
--bg-active: var(--bui-bg-neutral-1-pressed);
--fg: var(--bui-fg-primary);
&[data-on-surface='1'] {
--bg-hover: var(--bui-bg-neutral-on-surface-1-hover);
--bg-active: var(--bui-bg-neutral-on-surface-1-pressed);
--bg-hover: var(--bui-bg-neutral-2-hover);
--bg-active: var(--bui-bg-neutral-2-pressed);
}
&[data-on-surface='2'] {
--bg-hover: var(--bui-bg-neutral-on-surface-2-hover);
--bg-active: var(--bui-bg-neutral-on-surface-2-pressed);
--bg-hover: var(--bui-bg-neutral-3-hover);
--bg-active: var(--bui-bg-neutral-3-pressed);
}
&[data-on-surface='3'] {
--bg-hover: var(--bui-bg-neutral-on-surface-3-hover);
--bg-active: var(--bui-bg-neutral-on-surface-3-pressed);
--bg-hover: var(--bui-bg-neutral-4-hover);
--bg-active: var(--bui-bg-neutral-4-pressed);
}
&[data-disabled='true'] {
packages/ui/src/components/Card/Card.module.css
+1
View File
@@ -21,6 +21,7 @@
display: flex;
flex-direction: column;
gap: var(--bui-space-3);
background-color: var(--bui-bg-neutral-1);
border-radius: var(--bui-radius-3);
padding-block: var(--bui-space-3);
color: var(--bui-fg-primary);
packages/ui/src/components/Card/Card.stories.tsx
+1 -1
View File
@@ -83,7 +83,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/Checkbox/Checkbox.module.css
+2 -2
View File
@@ -45,7 +45,7 @@
box-shadow: inset 0 0 0 1px var(--bui-border);
border-radius: 2px;
transition: background-color 0.2s ease-in-out;
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
padding: 0;
flex-shrink: 0;
color: transparent;
@@ -63,7 +63,7 @@
}
.bui-Checkbox[data-indeterminate] & {
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
box-shadow: inset 0 0 0 1px var(--bui-border);
color: var(--bui-fg-primary);
}
packages/ui/src/components/Dialog/Dialog.module.css
+2 -2
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;
@@ -43,7 +43,7 @@
}
.bui-Dialog {
background: var(--bui-bg-surface-1);
background: var(--bui-bg-neutral-1);
border-radius: 0.5rem;
border: 1px solid var(--bui-border);
color: var(--bui-fg-primary);
packages/ui/src/components/Flex/Flex.module.css
+4 -4
View File
@@ -25,19 +25,19 @@
}
.bui-Flex[data-surface='0'] {
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
}
.bui-Flex[data-surface='1'] {
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
}
.bui-Flex[data-surface='2'] {
background-color: var(--bui-bg-surface-2);
background-color: var(--bui-bg-neutral-2);
}
.bui-Flex[data-surface='3'] {
background-color: var(--bui-bg-surface-3);
background-color: var(--bui-bg-neutral-3);
}
.bui-Flex[data-surface='danger'] {
packages/ui/src/components/Grid/Grid.module.css
+4 -4
View File
@@ -23,22 +23,22 @@
.bui-Grid[data-surface='0'],
.bui-GridItem[data-surface='0'] {
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
}
.bui-Grid[data-surface='1'],
.bui-GridItem[data-surface='1'] {
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
}
.bui-Grid[data-surface='2'],
.bui-GridItem[data-surface='2'] {
background-color: var(--bui-bg-surface-2);
background-color: var(--bui-bg-neutral-2);
}
.bui-Grid[data-surface='3'],
.bui-GridItem[data-surface='3'] {
background-color: var(--bui-bg-surface-3);
background-color: var(--bui-bg-neutral-3);
}
.bui-Grid[data-surface='danger'],
packages/ui/src/components/Header/Header.module.css
+3 -3
View File
@@ -27,7 +27,7 @@
left: 0px;
right: 0px;
height: 16px;
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
z-index: 0;
}
@@ -43,7 +43,7 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
padding-inline: var(--bui-space-5);
border-bottom: 1px solid var(--bui-border);
color: var(--bui-fg-primary);
@@ -93,6 +93,6 @@
margin-bottom: var(--bui-space-4);
padding-inline: var(--bui-space-3);
border-bottom: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
}
}
packages/ui/src/components/Menu/Menu.module.css
+5 -5
View File
@@ -23,7 +23,7 @@
box-shadow: var(--bui-shadow);
border: 1px solid var(--bui-border);
border-radius: var(--bui-radius-2);
background: var(--bui-bg-surface-1);
background: var(--bui-bg-neutral-1);
color: var(--bui-fg-primary);
outline: none;
transition: transform 200ms, opacity 200ms;
@@ -70,12 +70,12 @@
display: block;
&[data-focused] .bui-MenuItemWrapper {
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
color: var(--bui-fg-primary);
}
&[data-open] .bui-MenuItemWrapper {
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
color: var(--bui-fg-primary);
}
@@ -114,7 +114,7 @@
display: block;
&:hover .bui-MenuItemWrapper {
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
color: var(--bui-fg-primary);
}
@@ -195,7 +195,7 @@
display: flex;
align-items: center;
border-bottom: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
height: 2rem;
&[data-empty] {
packages/ui/src/components/PasswordField/PasswordField.module.css
+1 -1
View File
@@ -38,7 +38,7 @@
align-items: center;
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
&[data-size='small'] {
packages/ui/src/components/Popover/Popover.module.css
+8 -8
View File
@@ -20,8 +20,8 @@
.bui-Popover {
box-shadow: var(--bui-shadow);
border-radius: var(--bui-radius-3);
background: var(--bui-bg-surface-1);
border: 1px solid var(--bui-gray-3);
background: var(--bui-bg-neutral-1);
border: 1px solid var(--bui-border);
forced-color-adjust: none;
outline: none;
max-height: inherit;
@@ -90,11 +90,11 @@
elements in order to guarantee that the stroke is
always overlaying a consistent color. */
path:nth-child(1) {
fill: var(--bui-bg-surface-1);
fill: var(--bui-bg-neutral-1);
}
path:nth-child(2) {
fill: var(--bui-gray-3);
fill: var(--bui-fg-secondary);
}
/* The arrow svg overlaps the popover by 2px, so we
@@ -123,15 +123,15 @@
}
[data-theme='dark'] .bui-Popover {
background: var(--bui-bg-surface-2);
border: 1px solid var(--bui-gray-4);
background: var(--bui-bg-neutral-2);
border: 1px solid var(--bui-border);
}
[data-theme='dark'] .bui-PopoverArrow svg path:nth-child(1) {
fill: var(--bui-bg-surface-2);
fill: var(--bui-bg-neutral-2);
}
[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/SearchField/SearchField.module.css
+1 -1
View File
@@ -94,7 +94,7 @@
align-items: center;
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
&[data-size='small'] {
packages/ui/src/components/Select/Select.module.css
+2 -2
View File
@@ -36,7 +36,7 @@
box-sizing: border-box;
border-radius: var(--bui-radius-3);
border: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
display: flex;
justify-content: space-between;
align-items: center;
@@ -160,7 +160,7 @@
inset-block: 0;
inset-inline: var(--bui-space-1);
border-radius: var(--bui-radius-2);
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
z-index: -1;
}
packages/ui/src/components/Skeleton/Skeleton.module.css
+1 -1
View File
@@ -19,7 +19,7 @@
@layer components {
.bui-Skeleton {
animation: var(--bui-animate-pulse);
background-color: var(--bui-bg-surface-2);
background-color: var(--bui-bg-neutral-2);
border-radius: var(--bui-radius-2);
}
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/TextField/TextField.module.css
+1 -1
View File
@@ -76,7 +76,7 @@
padding: 0 var(--bui-space-3);
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
background-color: var(--bui-bg-neutral-1);
font-size: var(--bui-font-size-3);
font-family: var(--bui-font-regular);
font-weight: var(--bui-font-weight-regular);
packages/ui/src/components/ToggleButton/ToggleButton.module.css
+4 -4
View File
@@ -25,7 +25,7 @@
gap: var(--bui-space-1_5);
border: none;
border-radius: var(--bui-radius-2);
background: var(--bui-bg-surface-1);
background: var(--bui-bg-neutral-1);
color: var(--bui-fg-primary);
font-family: var(--bui-font-regular);
font-weight: var(--bui-font-weight-bold);
@@ -41,16 +41,16 @@
}
&:not([data-selected])[data-hovered] {
background: var(--bui-bg-surface-2);
background: var(--bui-bg-neutral-2);
}
&[data-disabled] {
background: var(--bui-bg-neutral-on-surface-0-disabled);
background: var(--bui-bg-neutral-1-disabled);
color: var(--bui-fg-disabled);
}
&[data-disabled][data-hovered] {
background: var(--bui-bg-neutral-on-surface-0-disabled);
background: var(--bui-bg-neutral-1-disabled);
}
&[data-disabled][data-selected] {
packages/ui/src/components/Tooltip/Tooltip.module.css
+8 -8
View File
@@ -20,8 +20,8 @@
.bui-Tooltip {
box-shadow: var(--bui-shadow);
border-radius: 4px;
background: var(--bui-bg-surface-1);
border: 1px solid var(--bui-gray-3);
background: var(--bui-bg-neutral-1);
border: 1px solid var(--bui-border);
forced-color-adjust: none;
outline: none;
padding: var(--bui-space-2) var(--bui-space-3);
@@ -74,11 +74,11 @@
elements in order to guarantee that the stroke is
always overlaying a consistent color. */
path:nth-child(1) {
fill: var(--bui-bg-surface-1);
fill: var(--bui-bg-neutral-1);
}
path:nth-child(2) {
fill: var(--bui-gray-3);
fill: var(--bui-fg-secondary);
}
/* The arrow svg overlaps the tooltip by 2px, so we
@@ -107,16 +107,16 @@
}
[data-theme='dark'] .bui-Tooltip {
background: var(--bui-bg-surface-2);
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) {
fill: var(--bui-bg-surface-2);
fill: var(--bui-bg-neutral-2);
}
[data-theme='dark'] .bui-TooltipArrow svg path:nth-child(2) {
fill: var(--bui-gray-4);
fill: var(--bui-fg-secondary);
}
}
packages/ui/src/css/colors.stories.tsx
+152
View File
@@ -0,0 +1,152 @@
/*
* Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* 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',
});
export const Default = meta.story({
render: () => (
<div style={{ backgroundColor: 'var(--bui-bg-neutral-0)' }}>
<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>
),
});
packages/ui/src/css/core.css
+1 -1
View File
@@ -27,7 +27,7 @@
}
body {
background-color: var(--bui-bg-surface-0);
background-color: var(--bui-bg-neutral-0);
/* Text defaults */
color: var(--bui-fg-primary);
packages/ui/src/css/tokens.css
+40 -68
View File
@@ -70,22 +70,6 @@
--bui-black: #000000;
--bui-white: #ffffff;
/* Gray scale */
--bui-gray-1: #f8f8f8;
--bui-gray-2: #ececec;
--bui-gray-3: #d9d9d9;
--bui-gray-4: #c1c1c1;
--bui-gray-5: #9e9e9e;
--bui-gray-6: #8c8c8c;
--bui-gray-7: #757575;
--bui-gray-8: #595959;
/* Surfaces colors */
--bui-bg-surface-0: var(--bui-gray-1);
--bui-bg-surface-1: var(--bui-white);
--bui-bg-surface-2: var(--bui-gray-1);
--bui-bg-surface-3: var(--bui-gray-2);
/* Solid background colors */
--bui-bg-solid: #1f5493;
--bui-bg-solid-hover: #163a66;
@@ -93,25 +77,27 @@
--bui-bg-solid-disabled: #163a66;
/* Neutral background colors */
--bui-bg-neutral-on-surface-0: oklch(0% 0 0 / 6%);
--bui-bg-neutral-on-surface-0-hover: oklch(0% 0 0 / 12%);
--bui-bg-neutral-on-surface-0-pressed: oklch(0% 0 0 / 16%);
--bui-bg-neutral-on-surface-0-disabled: oklch(0% 0 0 / 6%);
--bui-bg-neutral-0: #f8f8f8;
--bui-bg-neutral-on-surface-1: oklch(0% 0 0 / 6%);
--bui-bg-neutral-on-surface-1-hover: oklch(0% 0 0 / 12%);
--bui-bg-neutral-on-surface-1-pressed: oklch(0% 0 0 / 16%);
--bui-bg-neutral-on-surface-1-disabled: oklch(0% 0 0 / 6%);
--bui-bg-neutral-1: #fff;
--bui-bg-neutral-1-hover: oklch(0% 0 0 / 12%);
--bui-bg-neutral-1-pressed: oklch(0% 0 0 / 16%);
--bui-bg-neutral-1-disabled: oklch(0% 0 0 / 6%);
--bui-bg-neutral-on-surface-2: oklch(0% 0 0 / 6%);
--bui-bg-neutral-on-surface-2-hover: oklch(0% 0 0 / 12%);
--bui-bg-neutral-on-surface-2-pressed: oklch(0% 0 0 / 16%);
--bui-bg-neutral-on-surface-2-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-on-surface-3: oklch(0% 0 0 / 6%);
--bui-bg-neutral-on-surface-3-hover: oklch(0% 0 0 / 12%);
--bui-bg-neutral-on-surface-3-pressed: oklch(0% 0 0 / 16%);
--bui-bg-neutral-on-surface-3-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;
@@ -121,8 +107,8 @@
/* Foreground colors */
--bui-fg-primary: var(--bui-black);
--bui-fg-secondary: var(--bui-gray-7);
--bui-fg-disabled: #9e9e9e;
--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;
@@ -160,22 +146,6 @@
/* Dark theme tokens */
[data-theme-mode='dark'] {
/* Gray scale */
--bui-gray-1: #191919;
--bui-gray-2: #242424;
--bui-gray-3: #373737;
--bui-gray-4: #464646;
--bui-gray-5: #575757;
--bui-gray-6: #7b7b7b;
--bui-gray-7: #9e9e9e;
--bui-gray-8: #b4b4b4;
/* Background Colors */
--bui-bg-surface-0: #333333;
--bui-bg-surface-1: var(--bui-gray-1);
--bui-bg-surface-2: var(--bui-gray-2);
--bui-bg-surface-3: var(--bui-gray-3);
/* Solid background colors */
--bui-bg-solid: #9cc9ff;
--bui-bg-solid-hover: #83b9fd;
@@ -183,25 +153,27 @@
--bui-bg-solid-disabled: #1b3d68;
/* Neutral background colors */
--bui-bg-neutral-on-surface-0: oklch(100% 0 0 / 10%);
--bui-bg-neutral-on-surface-0-hover: oklch(100% 0 0 / 14%);
--bui-bg-neutral-on-surface-0-pressed: oklch(100% 0 0 / 20%);
--bui-bg-neutral-on-surface-0-disabled: oklch(100% 0 0 / 10%);
--bui-bg-neutral-0: #333333;
--bui-bg-neutral-on-surface-1: oklch(100% 0 0 / 6%);
--bui-bg-neutral-on-surface-1-hover: oklch(100% 0 0 / 10%);
--bui-bg-neutral-on-surface-1-pressed: oklch(100% 0 0 / 16%);
--bui-bg-neutral-on-surface-1-disabled: oklch(100% 0 0 / 6%);
--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-on-surface-2: oklch(100% 0 0 / 8%);
--bui-bg-neutral-on-surface-2-hover: oklch(100% 0 0 / 12%);
--bui-bg-neutral-on-surface-2-pressed: oklch(100% 0 0 / 20%);
--bui-bg-neutral-on-surface-2-disabled: oklch(100% 0 0 / 8%);
--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-on-surface-3: oklch(100% 0 0 / 8%);
--bui-bg-neutral-on-surface-3-hover: oklch(100% 0 0 / 12%);
--bui-bg-neutral-on-surface-3-pressed: oklch(100% 0 0 / 20%);
--bui-bg-neutral-on-surface-3-disabled: oklch(100% 0 0 / 8%);
--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;
@@ -211,8 +183,8 @@
/* Foreground colors */
--bui-fg-primary: var(--bui-white);
--bui-fg-secondary: var(--bui-gray-7);
--bui-fg-disabled: var(--bui-gray-7);
--bui-fg-secondary: oklch(0% 0 0 / 50%);
--bui-fg-disabled: oklch(0% 0 0 / 28%);
--bui-fg-solid: #101821;
--bui-fg-solid-disabled: #6191cc;