diff --git a/web/.storybook/stories-category-doc-pages/Colors.stories.mdx b/web/.storybook/stories-category-doc-pages/Colors.stories.mdx index 0d52a5712..504e1edc0 100644 --- a/web/.storybook/stories-category-doc-pages/Colors.stories.mdx +++ b/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', ]} /> diff --git a/web/components/ui/Statusbar/Statusbar.module.scss b/web/components/ui/Statusbar/Statusbar.module.scss index 5d5bab6d9..d9c02d257 100644 --- a/web/components/ui/Statusbar/Statusbar.module.scss +++ b/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; } diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml index 4af922b4f..e8527b283 100644 --- a/web/style-definitions/tokens/color/default-theme.yaml +++ b/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' diff --git a/web/styles/theme.less b/web/styles/theme.less index 468f75716..f57fe6e7e 100644 --- a/web/styles/theme.less +++ b/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; diff --git a/web/styles/variables.css b/web/styles/variables.css index baddb13b0..ea8a60e9e 100644 --- a/web/styles/variables.css +++ b/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;