diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 7be5089893..6a0177cafe 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -135,8 +135,7 @@ export default definePreview({
document.body.style.backgroundColor = 'var(--bui-bg-app)';
const docsStoryElements = document.getElementsByClassName('docs-story');
Array.from(docsStoryElements).forEach(element => {
- (element as HTMLElement).style.backgroundColor =
- 'var(--bui-bg-app)';
+ (element as HTMLElement).style.backgroundColor = 'var(--bui-bg-app)';
});
return (
diff --git a/docs-ui/src/app/tokens/page.mdx b/docs-ui/src/app/tokens/page.mdx
index 6d9b5e65ca..bc6e17a27c 100644
--- a/docs-ui/src/app/tokens/page.mdx
+++ b/docs-ui/src/app/tokens/page.mdx
@@ -472,28 +472,6 @@ low contrast to help as a separator with the different background colors.
It should be used on top of `--bui-bg-neutral-1`.
-
-
- --bui-border-2-hover
-
-
- Used when the component is interactive and hovered.
-
-
-
-
- --bui-border-2-pressed
-
-
- Used when the component is interactive and focused.
-
-
-
-
- --bui-border-2-disabled
-
- Used when the component is disabled.
-
--bui-border-2-danger
diff --git a/docs/conf/user-interface/index.md b/docs/conf/user-interface/index.md
index a70026a759..19f5251021 100644
--- a/docs/conf/user-interface/index.md
+++ b/docs/conf/user-interface/index.md
@@ -122,22 +122,22 @@ We recommend starting with a core set of CSS variables to quickly achieve a bran
And if you’d like to go even further, you can target specific component class names for advanced customization.
-| Token Name | Description |
-| -------------------- | --------------------------------------------------------------------------------------------- |
-| `--bui-bg-app` | This is used to define the background color of your app. It will only be used once. |
-| `--bui-bg-neutral-1` | We ar using this color to sit on top of `--bui-bg-app` mostly for `Card`, `Dialog`, ... |
-| `--bui-bg-neutral-2` | This is for content inside elevated components. This colour is less common. |
-| `--bui-bg-solid` | This is used for main actions like primary buttons. |
-| `--bui-fg-solid` | This is for texts or icons on top of a solid backgrounds. |
-| `--bui-fg-primary` | Your primary text or icon colours. |
-| `--bui-fg-secondary` | Your secondary text or icon colours. |
-| `--bui-fg-danger` | Used for error states and destructive actions. |
-| `--bui-fg-warning` | Used for warning states and cautionary information. |
-| `--bui-fg-success` | Used for success states and positive feedback. |
-| `--bui-fg-info` | Used for informational content and neutral status. |
-| `--bui-border-1` | Subtle borders for low-contrast separators. |
-| `--bui-border-2` | Main borders around surfaces like `Card`, `Dialog`, ... |
-| `--bui-font-regular` | The main font of your app. |
+| Token Name | Description |
+| -------------------- | ---------------------------------------------------------------------------------------- |
+| `--bui-bg-app` | This is used to define the background color of your app. It will only be used once. |
+| `--bui-bg-neutral-1` | We are using this color to sit on top of `--bui-bg-app` mostly for `Card`, `Dialog`, ... |
+| `--bui-bg-neutral-2` | This is for content inside elevated components. This colour is less common. |
+| `--bui-bg-solid` | This is used for main actions like primary buttons. |
+| `--bui-fg-solid` | This is for texts or icons on top of a solid backgrounds. |
+| `--bui-fg-primary` | Your primary text or icon colours. |
+| `--bui-fg-secondary` | Your secondary text or icon colours. |
+| `--bui-fg-danger` | Used for error states and destructive actions. |
+| `--bui-fg-warning` | Used for warning states and cautionary information. |
+| `--bui-fg-success` | Used for success states and positive feedback. |
+| `--bui-fg-info` | Used for informational content and neutral status. |
+| `--bui-border-1` | Subtle borders for low-contrast separators. |
+| `--bui-border-2` | Main borders around surfaces like `Card`, `Dialog`, ... |
+| `--bui-font-regular` | The main font of your app. |
All available CSS variables
@@ -155,7 +155,7 @@ These colors form a layered neutral scale for your application backgrounds. `--b
| Token Name | Description |
| ----------------------------- | ------------------------------------------------------------ |
-| `--bui-bg-app` | The base background color of your Backstage instance. |
+| `--bui-bg-app` | 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. |
@@ -214,13 +214,13 @@ Foreground colours are meant to work in pair with a background colours. Typicall
These border colors are mostly meant to be used as borders on top of any components with low contrast to help as a separator with the different background colors.
-| Token Name | Description |
-| ----------------------- | --------------------------------------------------- |
-| `--bui-border-1` | Subtle border for low-contrast separators. |
-| `--bui-border-2` | It should be used on top of `--bui-bg-neutral-1`. |
-| `--bui-border-danger` | It should be used on top of `--bui-bg-danger`. |
-| `--bui-border-warning` | It should be used on top of `--bui-bg-warning`. |
-| `--bui-border-success` | It should be used on top of `--bui-bg-success`. |
+| Token Name | Description |
+| ---------------------- | ------------------------------------------------- |
+| `--bui-border-1` | Subtle border for low-contrast separators. |
+| `--bui-border-2` | It should be used on top of `--bui-bg-neutral-1`. |
+| `--bui-border-danger` | It should be used on top of `--bui-bg-danger`. |
+| `--bui-border-warning` | It should be used on top of `--bui-bg-warning`. |
+| `--bui-border-success` | It should be used on top of `--bui-bg-success`. |
#### Special colors
diff --git a/packages/ui/src/components/Popover/Popover.module.css b/packages/ui/src/components/Popover/Popover.module.css
index 5413532bc7..69d2acffcf 100644
--- a/packages/ui/src/components/Popover/Popover.module.css
+++ b/packages/ui/src/components/Popover/Popover.module.css
@@ -121,17 +121,4 @@
transform: rotate(-90deg);
}
}
-
- /* [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-popover);
- }
-
- [data-theme='dark'] .bui-PopoverArrow svg path:nth-child(2) {
- fill: var(--bui-fg-secondary);
- } */
}
diff --git a/packages/ui/src/css/utilities/sm.css b/packages/ui/src/css/utilities/sm.css
index a3b330026e..4ceb7600ed 100644
--- a/packages/ui/src/css/utilities/sm.css
+++ b/packages/ui/src/css/utilities/sm.css
@@ -37,11 +37,6 @@
border-width: 0;
}
- .bui-sm-border-selected {
- border-width: 1px;
- border-style: solid;
- }
-
.bui-sm-border-warning {
border-color: var(--bui-border-warning);
border-width: 1px;
diff --git a/packages/ui/src/css/utilities/xs.css b/packages/ui/src/css/utilities/xs.css
index dc9d00574d..12d62f1dd8 100644
--- a/packages/ui/src/css/utilities/xs.css
+++ b/packages/ui/src/css/utilities/xs.css
@@ -36,11 +36,6 @@
border-width: 0;
}
- .bui-border-selected {
- border-width: 1px;
- border-style: solid;
- }
-
.bui-border-warning {
border-color: var(--bui-border-warning);
border-width: 1px;