Update default Backstage theme for the header

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/css/styles.css

@@ -9191,8 +9191,8 @@
   --bui-gray-6: #7b7b7b;
   --bui-gray-7: #9e9e9e;
   --bui-gray-8: #b4b4b4;
-  --bui-bg: var(--bui-black);
-  --bui-bg-surface-1: var(--bui-gray-1);
+  --bui-bg: #333;
+  --bui-bg-surface-1: #424242;
   --bui-bg-surface-2: var(--bui-gray-2);
   --bui-bg-solid: #9cc9ff;
   --bui-bg-solid-hover: #83b9fd;
@@ -9217,7 +9217,7 @@
   --bui-fg-danger: #e22b2b;
   --bui-fg-warning: #e36d05;
   --bui-fg-success: #1db954;
-  --bui-border: #fff3;
+  --bui-border: #ffffff1f;
   --bui-border-hover: #fff6;
   --bui-border-pressed: #ffffff80;
   --bui-border-disabled: #fff3;

packages/ui/src/components/Header/Header.stories.tsx

@@ -123,7 +123,7 @@ const layoutDecorator = [
           left: 'var(--sb-panel-left)',
           top: 'var(--sb-panel-top)',
           bottom: 'var(--sb-panel-bottom)',
-          backgroundColor: 'var(--bui-bg-surface-1)',
+          backgroundColor: 'var(--sb-sidebar-bg)',
           borderRadius: 'var(--sb-panel-radius)',
           border: 'var(--sb-sidebar-border)',
           borderRight: 'var(--sb-sidebar-border-right)',
@@ -132,7 +132,7 @@ const layoutDecorator = [
       />
       <div
         style={{
-          paddingInline: 'var(--sb-content-padding-inline)',
+          paddingLeft: 'var(--sb-content-padding-inline)',
           minHeight: '200vh',
         }}
       >
@@ -144,20 +144,6 @@ const layoutDecorator = [
           </Text>
         </Container>
       </div>
-      <div
-        style={{
-          width: '250px',
-          position: 'fixed',
-          right: 'var(--sb-panel-right)',
-          top: 'var(--sb-panel-top)',
-          bottom: 'var(--sb-panel-bottom)',
-          backgroundColor: 'var(--bui-bg-surface-1)',
-          borderRadius: 'var(--sb-panel-radius)',
-          border: 'var(--sb-options-border)',
-          borderLeft: 'var(--sb-options-border-left)',
-          zIndex: 1,
-        }}
-      />
     </>
   ),
   withRouter,

packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx

@@ -19,6 +19,8 @@ import { HeaderPage } from './HeaderPage';
 import type { HeaderTab, HeaderMenuItem } from '../Header/types';
 import { MemoryRouter } from 'react-router-dom';
 import { Button } from '../Button';
+import { Container } from '../Container';
+import { Text } from '../Text';
 
 const meta = {
   title: 'Components/HeaderPage',
@@ -80,35 +82,30 @@ const layoutDecorator = [
         style={{
           width: '250px',
           position: 'fixed',
-          left: 8,
-          top: 8,
-          bottom: 8,
-          backgroundColor: 'var(--bui-bg-surface-1',
-          borderRadius: 'var(--bui-radius-2)',
-          border: '1px solid var(--bui-border)',
+          left: 'var(--sb-panel-left)',
+          top: 'var(--sb-panel-top)',
+          bottom: 'var(--sb-panel-bottom)',
+          backgroundColor: 'var(--sb-sidebar-bg)',
+          borderRadius: 'var(--sb-panel-radius)',
+          border: 'var(--sb-sidebar-border)',
+          borderRight: 'var(--sb-sidebar-border-right)',
           zIndex: 1,
         }}
       />
       <div
         style={{
-          paddingInline: '266px',
+          paddingLeft: 'var(--sb-content-padding-inline)',
+          minHeight: '200vh',
         }}
       >
         <Story />
+        <Container>
+          <Text>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            quos.
+          </Text>
+        </Container>
       </div>
-      <div
-        style={{
-          width: '250px',
-          position: 'fixed',
-          right: 8,
-          top: 8,
-          bottom: 8,
-          backgroundColor: 'var(--bui-bg-surface-1',
-          borderRadius: 'var(--bui-radius-2)',
-          border: '1px solid var(--bui-border)',
-          zIndex: 1,
-        }}
-      />
     </>
   ),
 ];
@@ -159,4 +156,5 @@ export const WithLayout: Story = {
     ...WithEverything.args,
   },
   decorators: layoutDecorator,
+  render: WithEverything.render,
 };

packages/ui/src/css/core.css

@@ -155,8 +155,8 @@
   --bui-gray-8: #b4b4b4;
 
   /* Background Colors */
-  --bui-bg: var(--bui-black);
-  --bui-bg-surface-1: var(--bui-gray-1);
+  --bui-bg: #333333;
+  --bui-bg-surface-1: #424242;
   --bui-bg-surface-2: var(--bui-gray-2);
   --bui-bg-solid: #9cc9ff;
   --bui-bg-solid-hover: #83b9fd;
@@ -185,7 +185,7 @@
   --bui-fg-success: #1db954;
 
   /* Border Colors */
-  --bui-border: rgba(255, 255, 255, 0.2);
+  --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);

packages/ui/src/css/storybook.css

@@ -6,11 +6,16 @@
   --sb-panel-right: 0;
   --sb-sidebar-border: none;
   --sb-sidebar-border-right: 1px solid var(--bui-border);
+  --sb-sidebar-bg: #000;
   --sb-options-border: none;
   --sb-options-border-left: 1px solid var(--bui-border);
   --sb-content-padding-inline: 250px;
 }
 
+[data-theme='dark'] {
+  --sb-sidebar-bg: var(--bui-bg-surface-1);
+}
+
 [data-theme-name='spotify'] {
   --sb-panel-radius: var(--bui-radius-3);
   --sb-panel-top: 8px;
@@ -19,6 +24,7 @@
   --sb-panel-right: 8px;
   --sb-sidebar-border: none;
   --sb-sidebar-border-right: none;
+  --sb-sidebar-bg: var(--bui-bg-surface-1);
   --sb-options-border: none;
   --sb-options-border-left: none;
   --sb-content-padding-inline: 258px;