paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 30 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
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);
}
}