diff --git a/.storybook/themes/spotify.css b/.storybook/themes/spotify.css index ab4c7a4485..c52062fe96 100644 --- a/.storybook/themes/spotify.css +++ b/.storybook/themes/spotify.css @@ -222,11 +222,11 @@ --bui-bg-solid-disabled: #0f6c30; --bui-fg-primary: var(--bui-black); - --bui-fg-secondary: var(--bui-gray-7); + --bui-fg-secondary: #757575; --bui-fg-solid: var(--bui-black); --bui-fg-solid-disabled: #62ab7c; - --bui-border: var(--bui-gray-3); + --bui-border: #d9d9d9; --bui-border-hover: rgba(0, 0, 0, 0.3); --bui-border-pressed: rgba(0, 0, 0, 0.5); --bui-border-disabled: rgba(0, 0, 0, 0.1); @@ -258,15 +258,15 @@ --bui-bg-success: #132d21; --bui-fg-primary: var(--bui-white); - --bui-fg-secondary: var(--bui-gray-7); - --bui-fg-disabled: var(--bui-gray-5); + --bui-fg-secondary: #9e9e9e; + --bui-fg-disabled: #575757; --bui-fg-solid: var(--bui-black); --bui-fg-solid-disabled: #072f15; --bui-fg-danger: #e22b2b; --bui-fg-warning: #e36d05; --bui-fg-success: #1db954; - --bui-border: var(--bui-gray-3); + --bui-border: #373737; --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); diff --git a/docs-ui/src/app/tokens/page.mdx b/docs-ui/src/app/tokens/page.mdx index 739ef74d66..46d67ded95 100644 --- a/docs-ui/src/app/tokens/page.mdx +++ b/docs-ui/src/app/tokens/page.mdx @@ -107,8 +107,6 @@ the value, you add an object with the value and the breakpoint prefix. ## Base colors -These colors are used for special purposes like ring, scrollbar, ... - @@ -133,62 +131,15 @@ These colors are used for special purposes like ring, scrollbar, ... Pure white color. This one should be the same in light and dark themes. - - - --bui-gray-1 - - You can use these mostly for backgrounds colors. - - - - --bui-gray-2 - - You can use these mostly for backgrounds colors. - - - - --bui-gray-3 - - You can use these mostly for backgrounds colors. - - - - --bui-gray-4 - - You can use these mostly for backgrounds colors. - - - - --bui-gray-5 - - You can use these mostly for backgrounds colors. - - - - --bui-gray-6 - - You can use these mostly for backgrounds colors. - - - - --bui-gray-7 - - You can use these mostly for backgrounds colors. - - - - --bui-gray-8 - - You can use these mostly for backgrounds colors. - -## Core background colors +## Neutral 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-neutral-0` should mostly use as the main background -color of your app. +These colors form a layered neutral scale for your application backgrounds. +`--bui-bg-neutral-0` is the base background color of your app. Each subsequent level +(1 through 4) represents an elevated layer on top of the previous one, with hover, +pressed, and disabled variants for interactive states. @@ -202,20 +153,127 @@ color of your app. --bui-bg-neutral-0 - The background color of your Backstage instance. + + The base background color of your Backstage instance. + --bui-bg-neutral-1 - Use for any panels or elevated surfaces. + + First elevated layer. Use for cards, dialogs, and panels. + + + + + --bui-bg-neutral-1-hover + + Hover state for elements on neutral-1. + + + + --bui-bg-neutral-1-pressed + + Pressed state for elements on neutral-1. + + + + --bui-bg-neutral-1-disabled + + Disabled state for elements on neutral-1. --bui-bg-neutral-2 - Use for any panels or elevated surfaces. + + Second elevated layer. Use for elements on top of neutral-1. + + + + --bui-bg-neutral-2-hover + + Hover state for elements on neutral-2. + + + + --bui-bg-neutral-2-pressed + + Pressed state for elements on neutral-2. + + + + --bui-bg-neutral-2-disabled + + Disabled state for elements on neutral-2. + + + + --bui-bg-neutral-3 + + + Third elevated layer. Use for elements on top of neutral-2. + + + + + --bui-bg-neutral-3-hover + + Hover state for elements on neutral-3. + + + + --bui-bg-neutral-3-pressed + + Pressed state for elements on neutral-3. + + + + --bui-bg-neutral-3-disabled + + Disabled state for elements on neutral-3. + + + + --bui-bg-neutral-4 + + + Fourth elevated layer. Use for elements on top of neutral-3. + + + + + --bui-bg-neutral-4-hover + + Hover state for elements on neutral-4. + + + + --bui-bg-neutral-4-pressed + + Pressed state for elements on neutral-4. + + + + --bui-bg-neutral-4-disabled + + Disabled state for elements on neutral-4. + + + + +## Solid background colors + + + + + Prop + Description + + + --bui-bg-solid @@ -240,6 +298,19 @@ color of your app. Used for solid background colors when disabled. + + + +## Status background colors + + + + + Prop + Description + + + --bui-bg-danger diff --git a/docs-ui/src/css/theme-spotify.css b/docs-ui/src/css/theme-spotify.css index 74ff9e4651..73a067d5b0 100644 --- a/docs-ui/src/css/theme-spotify.css +++ b/docs-ui/src/css/theme-spotify.css @@ -195,10 +195,10 @@ --bui-bg-solid-pressed: #1abc54; --bui-bg-solid-disabled: #0f6c30; --bui-fg-primary: var(--bui-black); - --bui-fg-secondary: var(--bui-gray-7); + --bui-fg-secondary: #757575; --bui-fg-solid: var(--bui-black); --bui-fg-solid-disabled: #62ab7c; - --bui-border: var(--bui-gray-3); + --bui-border: #d9d9d9; --bui-border-hover: #0000004d; --bui-border-pressed: #00000080; --bui-border-disabled: #0000001a; @@ -221,14 +221,14 @@ --bui-bg-warning: #302008; --bui-bg-success: #132d21; --bui-fg-primary: var(--bui-white); - --bui-fg-secondary: var(--bui-gray-7); - --bui-fg-disabled: var(--bui-gray-5); + --bui-fg-secondary: #9e9e9e; + --bui-fg-disabled: #575757; --bui-fg-solid: var(--bui-black); --bui-fg-solid-disabled: #072f15; --bui-fg-danger: #e22b2b; --bui-fg-warning: #e36d05; --bui-fg-success: #1db954; - --bui-border: var(--bui-gray-3); + --bui-border: #373737; --bui-border-hover: #fff6; --bui-border-pressed: #ffffff80; --bui-border-disabled: #fff3; diff --git a/docs/conf/user-interface/index.md b/docs/conf/user-interface/index.md index aeee6ab019..abe74dddef 100644 --- a/docs/conf/user-interface/index.md +++ b/docs/conf/user-interface/index.md @@ -143,39 +143,52 @@ And if you’d like to go even further, you can target specific component class #### Base colors -These colors are used for special purposes like ring, scrollbar, ... +| Token Name | Description | +| ------------- | ----------------------------------------------------------------------- | +| `--bui-black` | Pure black color. This one should be the same in light and dark themes. | +| `--bui-white` | Pure white color. This one should be the same in light and dark themes. | -| Token Name | Description | -| -------------- | ----------------------------------------------------------------------- | -| `--bui-black` | Pure black color. This one should be the same in light and dark themes. | -| `--bui-white` | Pure white color. This one should be the same in light and dark themes. | -| `--bui-gray-1` | You can use these mostly for backgrounds colors. | -| `--bui-gray-2` | You can use these mostly for backgrounds colors. | -| `--bui-gray-3` | You can use these mostly for backgrounds colors. | -| `--bui-gray-4` | You can use these mostly for backgrounds colors. | -| `--bui-gray-5` | You can use these mostly for backgrounds colors. | -| `--bui-gray-6` | You can use these mostly for backgrounds colors. | -| `--bui-gray-7` | You can use these mostly for backgrounds colors. | -| `--bui-gray-8` | You can use these mostly for backgrounds colors. | +#### Neutral background colors -#### Core background colors +These colors form a layered neutral scale for your application backgrounds. `--bui-bg-neutral-0` is the base background color. Each subsequent level (1 through 4) represents an elevated layer, with hover, pressed, and disabled variants for interactive states. -These colors are used for the background of your application. We are mostly using for now a single elevated background for panels. `--bui-bg-neutral-0` should mostly use as the main background color of your app. +| Token Name | Description | +| ----------------------------- | ------------------------------------------------------------ | +| `--bui-bg-neutral-0` | The base background color of your Backstage instance. | +| `--bui-bg-neutral-1` | First elevated layer. Use for cards, dialogs, and panels. | +| `--bui-bg-neutral-1-hover` | Hover state for elements on neutral-1. | +| `--bui-bg-neutral-1-pressed` | Pressed state for elements on neutral-1. | +| `--bui-bg-neutral-1-disabled` | Disabled state for elements on neutral-1. | +| `--bui-bg-neutral-2` | Second elevated layer. Use for elements on top of neutral-1. | +| `--bui-bg-neutral-2-hover` | Hover state for elements on neutral-2. | +| `--bui-bg-neutral-2-pressed` | Pressed state for elements on neutral-2. | +| `--bui-bg-neutral-2-disabled` | Disabled state for elements on neutral-2. | +| `--bui-bg-neutral-3` | Third elevated layer. Use for elements on top of neutral-2. | +| `--bui-bg-neutral-3-hover` | Hover state for elements on neutral-3. | +| `--bui-bg-neutral-3-pressed` | Pressed state for elements on neutral-3. | +| `--bui-bg-neutral-3-disabled` | Disabled state for elements on neutral-3. | +| `--bui-bg-neutral-4` | Fourth elevated layer. Use for elements on top of neutral-3. | +| `--bui-bg-neutral-4-hover` | Hover state for elements on neutral-4. | +| `--bui-bg-neutral-4-pressed` | Pressed state for elements on neutral-4. | +| `--bui-bg-neutral-4-disabled` | Disabled state for elements on neutral-4. | -| Token Name | Description | -| ------------------------- | ------------------------------------------------ | -| `--bui-bg-neutral-0` | The background color of your Backstage instance. | -| `--bui-bg-neutral-1` | Use for any panels or elevated surfaces. | -| `--bui-bg-neutral-2` | Use for any panels or elevated surfaces. | -| `--bui-bg-neutral-3` | Use for any panels or elevated surfaces. | -| `--bui-bg-solid` | Used for solid background colors. | -| `--bui-bg-solid-hover` | Used for solid background colors when hovered. | -| `--bui-bg-solid-pressed` | Used for solid background colors when pressed. | -| `--bui-bg-solid-disabled` | Used for solid background colors when disabled. | -| `--bui-bg-danger` | Used to show errors information. | -| `--bui-bg-warning` | Used to show warnings information. | -| `--bui-bg-success` | Used to show success information. | -| `--bui-bg-info` | Used to show informational content. | +#### Solid background colors + +| Token Name | Description | +| ------------------------- | ----------------------------------------------- | +| `--bui-bg-solid` | Used for solid background colors. | +| `--bui-bg-solid-hover` | Used for solid background colors when hovered. | +| `--bui-bg-solid-pressed` | Used for solid background colors when pressed. | +| `--bui-bg-solid-disabled` | Used for solid background colors when disabled. | + +#### Status background colors + +| Token Name | Description | +| ------------------ | ----------------------------------- | +| `--bui-bg-danger` | Used to show errors information. | +| `--bui-bg-warning` | Used to show warnings information. | +| `--bui-bg-success` | Used to show success information. | +| `--bui-bg-info` | Used to show informational content. | #### Foreground colors diff --git a/packages/ui/src/components/Card/Card.stories.tsx b/packages/ui/src/components/Card/Card.stories.tsx index 438dd0e353..dccf3ca555 100644 --- a/packages/ui/src/components/Card/Card.stories.tsx +++ b/packages/ui/src/components/Card/Card.stories.tsx @@ -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)', diff --git a/packages/ui/src/components/Dialog/Dialog.module.css b/packages/ui/src/components/Dialog/Dialog.module.css index e82d6928ef..201f25ed3a 100644 --- a/packages/ui/src/components/Dialog/Dialog.module.css +++ b/packages/ui/src/components/Dialog/Dialog.module.css @@ -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; diff --git a/packages/ui/src/components/Popover/Popover.module.css b/packages/ui/src/components/Popover/Popover.module.css index b6bef0d4d3..8fb53b9ab0 100644 --- a/packages/ui/src/components/Popover/Popover.module.css +++ b/packages/ui/src/components/Popover/Popover.module.css @@ -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); } } diff --git a/packages/ui/src/components/RadioGroup/RadioGroup.module.css b/packages/ui/src/components/RadioGroup/RadioGroup.module.css index a18f2d385d..3b816709ef 100644 --- a/packages/ui/src/components/RadioGroup/RadioGroup.module.css +++ b/packages/ui/src/components/RadioGroup/RadioGroup.module.css @@ -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; diff --git a/packages/ui/src/components/Switch/Switch.module.css b/packages/ui/src/components/Switch/Switch.module.css index d35caf41a6..2d15cc0930 100644 --- a/packages/ui/src/components/Switch/Switch.module.css +++ b/packages/ui/src/components/Switch/Switch.module.css @@ -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; diff --git a/packages/ui/src/components/Tabs/Tabs.module.css b/packages/ui/src/components/Tabs/Tabs.module.css index 158a92952a..68808ae021 100644 --- a/packages/ui/src/components/Tabs/Tabs.module.css +++ b/packages/ui/src/components/Tabs/Tabs.module.css @@ -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, diff --git a/packages/ui/src/components/TagGroup/TagGroup.module.css b/packages/ui/src/components/TagGroup/TagGroup.module.css index 25ea694b0f..5bf6ff605e 100644 --- a/packages/ui/src/components/TagGroup/TagGroup.module.css +++ b/packages/ui/src/components/TagGroup/TagGroup.module.css @@ -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] { diff --git a/packages/ui/src/components/Tooltip/Tooltip.module.css b/packages/ui/src/components/Tooltip/Tooltip.module.css index 3186ebec34..3841fbbcec 100644 --- a/packages/ui/src/components/Tooltip/Tooltip.module.css +++ b/packages/ui/src/components/Tooltip/Tooltip.module.css @@ -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); } }