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

Rename and remove CSS design tokens

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-02-13 13:11:29 +00:00
parent 6209c67072
commit 4137a43a1b
41 changed files with 144 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/CHANGELOG.md
+1 -1
View File
@@ -14,7 +14,7 @@
```diff
- background: var(--bui-bg-surface-0);
+ background: var(--bui-bg-neutral-0);
+ background: var(--bui-bg-app);
```
Replace on-surface tokens shifted by +1:
packages/ui/src/components/Avatar/Avatar.module.css
+1 -1
View File
@@ -74,7 +74,7 @@
width: 100%;
font-size: var(--bui-font-size-3);
font-weight: var(--bui-font-weight-regular);
box-shadow: inset 0 0 0 1px var(--bui-border);
box-shadow: inset 0 0 0 1px var(--bui-border-2);
border-radius: var(--bui-radius-full);
}
}
packages/ui/src/components/Checkbox/Checkbox.module.css
+2 -7
View File
@@ -42,7 +42,7 @@
justify-content: center;
width: 1rem;
height: 1rem;
box-shadow: inset 0 0 0 1px var(--bui-border);
box-shadow: inset 0 0 0 1px var(--bui-border-2);
border-radius: 2px;
transition: background-color 0.2s ease-in-out;
background-color: var(--bui-bg-neutral-1);
@@ -64,15 +64,10 @@
.bui-Checkbox[data-indeterminate] & {
background-color: var(--bui-bg-neutral-1);
box-shadow: inset 0 0 0 1px var(--bui-border);
box-shadow: inset 0 0 0 1px var(--bui-border-2);
color: var(--bui-fg-primary);
}
.bui-Checkbox[data-hovered]:not([data-selected]):not([data-indeterminate])
& {
box-shadow: inset 0 0 0 1px var(--bui-border-hover);
}
@media (prefers-reduced-motion: reduce) {
& {
transition: none;
packages/ui/src/components/Dialog/Dialog.module.css
+3 -3
View File
@@ -45,7 +45,7 @@
.bui-Dialog {
background: var(--bui-bg-neutral-1);
border-radius: 0.5rem;
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
color: var(--bui-fg-primary);
position: relative;
width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));
@@ -73,7 +73,7 @@
align-items: center;
padding-inline: var(--bui-space-3);
padding-block: var(--bui-space-2);
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
}
.bui-DialogHeaderTitle {
@@ -89,7 +89,7 @@
gap: var(--bui-space-2);
padding-inline: var(--bui-space-3);
padding-block: var(--bui-space-3);
border-top: 1px solid var(--bui-border);
border-top: 1px solid var(--bui-border-2);
}
.bui-DialogBody {
packages/ui/src/components/Header/Header.module.css
+3 -3
View File
@@ -29,7 +29,7 @@
left: 0px;
right: 0px;
height: 16px;
background-color: var(--bui-bg-neutral-0);
background-color: var(--bui-bg-app);
z-index: 0;
}
}
@@ -43,7 +43,7 @@
justify-content: space-between;
background-color: var(--bui-bg-neutral-1);
padding-inline: var(--bui-space-5);
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
color: var(--bui-fg-primary);
height: 52px;
}
@@ -89,7 +89,7 @@
.bui-HeaderTabsWrapper {
padding-inline: var(--bui-space-3);
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
}
}
packages/ui/src/components/Menu/Menu.module.css
+3 -3
View File
@@ -21,7 +21,7 @@
display: flex;
flex-direction: column;
box-shadow: var(--bui-shadow);
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
border-radius: var(--bui-radius-2);
background: var(--bui-bg-neutral-1);
color: var(--bui-fg-primary);
@@ -183,7 +183,7 @@
.bui-MenuSeparator {
height: 1px;
background: var(--bui-border);
background: var(--bui-border-2);
margin-inline: var(--bui-space-1_5);
margin-block: var(--bui-space-1);
}
@@ -194,7 +194,7 @@
flex-shrink: 0;
display: flex;
align-items: center;
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
height: 2rem;
packages/ui/src/components/PasswordField/PasswordField.module.css
+1 -11
View File
@@ -37,7 +37,7 @@
display: flex;
align-items: center;
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
@@ -49,15 +49,6 @@
height: 2.5rem;
}
&:focus-within {
border-color: var(--bui-border-pressed);
outline-width: 0px;
}
&:hover {
border-color: var(--bui-border-hover);
}
&:has([data-invalid]) {
border-color: var(--bui-fg-danger);
}
@@ -65,7 +56,6 @@
&:has([data-disabled]) {
opacity: 0.5;
cursor: not-allowed;
border: 1px solid var(--bui-border-disabled);
}
}
packages/ui/src/components/Popover/Popover.module.css
+9 -9
View File
@@ -20,8 +20,8 @@
.bui-Popover {
box-shadow: var(--bui-shadow);
border-radius: var(--bui-radius-3);
background: var(--bui-bg-neutral-1);
border: 1px solid var(--bui-border);
background: var(--bui-bg-popover);
border: 1px solid var(--bui-border-1);
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-neutral-1);
fill: var(--bui-bg-popover);
}
path:nth-child(2) {
fill: var(--bui-fg-secondary);
fill: var(--bui-border-1);
}
/* The arrow svg overlaps the popover by 2px, so we
@@ -122,16 +122,16 @@
}
}
[data-theme='dark'] .bui-Popover {
background: var(--bui-bg-neutral-2);
border: 1px solid var(--bui-border);
/* [data-theme='dark'] .bui-Popover {
background: var(--bui-bg-popover);
border: 1px solid var(--bui-border-1);
}
[data-theme='dark'] .bui-PopoverArrow svg path:nth-child(1) {
fill: var(--bui-bg-neutral-2);
fill: var(--bui-bg-popover);
}
[data-theme='dark'] .bui-PopoverArrow svg path:nth-child(2) {
fill: var(--bui-fg-secondary);
}
} */
}
packages/ui/src/components/RadioGroup/RadioGroup.module.css
+2 -12
View File
@@ -50,7 +50,7 @@
width: 1rem;
height: 1rem;
box-sizing: border-box;
border: 0.125rem solid var(--bui-border);
border: 0.125rem solid var(--bui-border-2);
background: var(--bui-bg-neutral-1);
border-radius: var(--bui-radius-full);
transition: all 200ms;
@@ -59,7 +59,7 @@
}
&[data-pressed]:before {
border-color: var(--bui-border);
border-color: var(--bui-border-2);
}
&[data-selected] {
@@ -83,13 +83,8 @@
color: var(--bui-fg-disabled);
&:before {
border-color: var(--bui-border-disabled);
background: var(--bui-bg-disabled);
}
&[data-selected]:before {
border-color: var(--bui-border-disabled);
}
}
&[data-invalid]:before {
@@ -105,13 +100,8 @@
color: var(--bui-fg-disabled);
&:before {
border-color: var(--bui-border-disabled);
background: var(--bui-bg-disabled);
}
&[data-selected]:before {
border-color: var(--bui-border-disabled);
}
}
}
}
packages/ui/src/components/SearchField/SearchField.module.css
+1 -11
View File
@@ -93,7 +93,7 @@
display: flex;
align-items: center;
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
@@ -105,15 +105,6 @@
height: 2.5rem;
}
&:focus-within {
border-color: var(--bui-border-pressed);
outline-width: 0px;
}
&:hover {
border-color: var(--bui-border-hover);
}
&[data-invalid] {
border-color: var(--bui-fg-danger);
}
@@ -121,7 +112,6 @@
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
border: 1px solid var(--bui-border-disabled);
}
}
packages/ui/src/components/Select/Select.module.css
+2 -13
View File
@@ -35,7 +35,7 @@
.bui-SelectTrigger {
box-sizing: border-box;
border-radius: var(--bui-radius-3);
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
display: flex;
justify-content: space-between;
@@ -72,16 +72,6 @@
color: var(--bui-fg-secondary);
}
&:hover {
transition: border-color 0.2s ease-in-out;
border-color: var(--bui-border-hover);
}
&:focus-visible {
border-color: var(--bui-border-pressed);
outline: 0;
}
.bui-Select[data-invalid] & {
border-color: var(--bui-fg-danger);
@@ -93,7 +83,6 @@
&[disabled] {
cursor: not-allowed;
border-color: var(--bui-border-disabled);
color: var(--bui-fg-disabled);
}
}
@@ -194,7 +183,7 @@
display: flex;
align-items: center;
padding-inline: var(--bui-space-3) 0;
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
}
.bui-SelectSearch {
packages/ui/src/components/Table/Table.module.css
+2 -2
View File
@@ -30,7 +30,7 @@
}
.bui-TableHeader {
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
transition: color 0.2s ease-in-out;
}
@@ -81,7 +81,7 @@
}
.bui-TableRow {
border-bottom: 1px solid var(--bui-border);
border-bottom: 1px solid var(--bui-border-2);
transition: color 0.2s ease-in-out;
&:hover {
packages/ui/src/components/TextField/TextField.module.css
+1 -16
View File
@@ -75,7 +75,7 @@
align-items: center;
padding: 0 var(--bui-space-3);
border-radius: var(--bui-radius-2);
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
background-color: var(--bui-bg-neutral-1);
font-size: var(--bui-font-size-3);
font-family: var(--bui-font-regular);
@@ -95,20 +95,6 @@
color: var(--bui-fg-secondary);
}
&[data-focused] {
outline-color: var(--bui-border-pressed);
outline-width: 0px;
}
&[data-hovered] {
border-color: var(--bui-border-hover);
}
&[data-focused] {
border-color: var(--bui-border-pressed);
outline-width: 0px;
}
&[data-invalid] {
border-color: var(--bui-fg-danger);
}
@@ -116,7 +102,6 @@
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
border: 1px solid var(--bui-border-disabled);
}
}
}
packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css
+3 -3
View File
@@ -23,7 +23,7 @@
flex-wrap: nowrap;
border-radius: var(--bui-radius-2);
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--bui-border);
box-shadow: inset 0 0 0 1px var(--bui-border-2);
width: fit-content;
}
@@ -65,7 +65,7 @@
.bui-ToggleButtonGroup:not([data-orientation='vertical'])
:global(.bui-ToggleButton)
+ :global(.bui-ToggleButton) {
border-left: 1px solid var(--bui-border);
border-left: 1px solid var(--bui-border-2);
}
/* Vertical dividers */
@@ -77,7 +77,7 @@
.bui-ToggleButtonGroup[data-orientation='vertical']
:global(.bui-ToggleButton)
+ :global(.bui-ToggleButton) {
border-top: 1px solid var(--bui-border);
border-top: 1px solid var(--bui-border-2);
}
/* Vertical radius rules */
packages/ui/src/components/Tooltip/Tooltip.module.css
+2 -2
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-border);
border: 1px solid var(--bui-border-2);
forced-color-adjust: none;
outline: none;
padding: var(--bui-space-2) var(--bui-space-3);
@@ -109,7 +109,7 @@
[data-theme='dark'] .bui-Tooltip {
background: var(--bui-bg-neutral-2);
box-shadow: none;
border: 1px solid var(--bui-border);
border: 1px solid var(--bui-border-2);
}
[data-theme='dark'] .bui-TooltipArrow svg path:nth-child(1) {
packages/ui/src/css/colors.stories.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ const meta = preview.meta({
export const Default = meta.story({
render: () => (
<div style={{ backgroundColor: 'var(--bui-bg-neutral-0)' }}>
<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>
packages/ui/src/css/core.css
+1 -1
View File
@@ -27,7 +27,7 @@
}
body {
background-color: var(--bui-bg-neutral-0);
background-color: var(--bui-bg-app);
/* Text defaults */
color: var(--bui-fg-primary);
packages/ui/src/css/tokens.css
+8 -10
View File
@@ -77,7 +77,8 @@
--bui-bg-solid-disabled: #163a66;
/* Neutral background colors */
--bui-bg-neutral-0: #f8f8f8;
--bui-bg-app: #f8f8f8;
--bui-bg-popover: #ffffff;
--bui-bg-neutral-1: #fff;
--bui-bg-neutral-1-hover: oklch(0% 0 0 / 12%);
@@ -123,10 +124,8 @@
--bui-fg-info: #0d74ce;
/* Border colors */
--bui-border: rgba(0, 0, 0, 0.1);
--bui-border-hover: rgba(0, 0, 0, 0.2);
--bui-border-pressed: rgba(0, 0, 0, 0.4);
--bui-border-disabled: rgba(0, 0, 0, 0.1);
--bui-border-1: #d5d5d5;
--bui-border-2: #bababa;
--bui-border-info: #7ea9d6;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
@@ -153,7 +152,8 @@
--bui-bg-solid-disabled: #1b3d68;
/* Neutral background colors */
--bui-bg-neutral-0: #333333;
--bui-bg-app: #333333;
--bui-bg-popover: #1a1a1a;
--bui-bg-neutral-1: oklch(100% 0 0 / 10%);
--bui-bg-neutral-1-hover: oklch(100% 0 0 / 14%);
@@ -199,10 +199,8 @@
--bui-fg-info: #70b8ff;
/* Border colors */
--bui-border: rgba(255, 255, 255, 0.12);
--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);
--bui-border-1: #434343;
--bui-border-2: #585858;
--bui-border-info: #7ea9d6;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
packages/ui/src/css/utilities/sm.css
+1 -2
View File
@@ -21,7 +21,7 @@
}
.bui-sm-border-base {
border-color: var(--bui-border);
border-color: var(--bui-border-2);
border-width: 1px;
border-style: solid;
}
@@ -38,7 +38,6 @@
}
.bui-sm-border-selected {
border-color: var(--bui-border-pressed);
border-width: 1px;
border-style: solid;
}
packages/ui/src/css/utilities/xs.css
+1 -2
View File
@@ -20,7 +20,7 @@
}
.bui-border-base {
border-color: var(--bui-border);
border-color: var(--bui-border-2);
border-width: 1px;
border-style: solid;
}
@@ -37,7 +37,6 @@
}
.bui-border-selected {
border-color: var(--bui-border-pressed);
border-width: 1px;
border-style: solid;
}