Make statusbar dark

web/.storybook/stories-category-doc-pages/Colors.stories.mdx

@@ -72,6 +72,8 @@ These color names are assigned to specific component variables. They can be over
     'theme-color-components-form-field-placeholder',
     'theme-color-components-form-field-text',
     'theme-color-components-form-field-border',
+    'theme-color-components-video-status-bar-background',
+    'theme-color-components-video-status-bar-foreground',
   ]}
 />
 

web/components/ui/Statusbar/Statusbar.module.scss

@@ -6,8 +6,8 @@
   height: 2rem;
   width: 100%;
   padding: var(--content-padding);
-  color: var(--theme-color-components-text-on-light);
-  background-color: var(--component-background);
+  color: var(--theme-color-components-video-status-bar-foreground);
+  background-color: var(--theme-color-components-video-status-bar-background);
   font-family: var(--theme-text-display-font-family);
-  font-weight: 600;
+  font-weight: 500;
 }

web/style-definitions/tokens/color/default-theme.yaml

@@ -237,3 +237,10 @@ theme:
         live-indicator:
           value: 'var(--theme-color-palette-7)'
           comment: 'The Live dot indicator in the control bar of the video player'
+        status-bar:
+          background:
+            value: 'var(--theme-color-palette-2)'
+            comment: 'The background color of the video status bar'
+          foreground:
+            value: 'var(--theme-color-palette-4)'
+            comment: 'The foreground color of the video status bar'

web/styles/theme.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 18 Jan 2023 23:58:29 GMT
+// Generated on Thu, 19 Jan 2023 00:03:35 GMT
 // 
 // How to edit these values:
 // Edit the corresponding token file under the style-definitions directory
@@ -101,6 +101,8 @@
 @theme-color-components-form-field-border: var(--theme-color-palette-0); // Dark primary
 @theme-color-components-video-background: var(--theme-color-palette-2); // Dark alternate
 @theme-color-components-video-live-indicator: var(--theme-color-palette-7); // The Live dot indicator in the control bar of the video player
+@theme-color-components-video-status-bar-background: var(--theme-color-palette-2); // The background color of the video status bar
+@theme-color-components-video-status-bar-foreground: var(--theme-color-palette-4); // The foreground color of the video status bar
 @owncast-purple-25: rgba(120, 113, 255, 0.25);
 @color-unknown: #7a5cf3;
 @color-unknown-2: #fffffe;

web/styles/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Jan 2023 23:58:29 GMT
+ * Generated on Thu, 19 Jan 2023 00:03:35 GMT
  * 
  * How to edit these values:
  * Edit the corresponding token file under the style-definitions directory
@@ -103,6 +103,8 @@
   --theme-color-components-form-field-border: var(--theme-color-palette-0); /* Dark primary */
   --theme-color-components-video-background: var(--theme-color-palette-2); /* Dark alternate */
   --theme-color-components-video-live-indicator: var(--theme-color-palette-7); /* The Live dot indicator in the control bar of the video player */
+  --theme-color-components-video-status-bar-background: var(--theme-color-palette-2); /* The background color of the video status bar */
+  --theme-color-components-video-status-bar-foreground: var(--theme-color-palette-4); /* The foreground color of the video status bar */
   --owncast-purple-25: rgba(120, 113, 255, 0.25);
   --color-unknown: #7a5cf3;
   --color-unknown-2: #fffffe;