diff --git a/web/.storybook/stories-category-doc-pages/Colors.stories.mdx b/web/.storybook/stories-category-doc-pages/Colors.stories.mdx index 94a29f5df..f0ddd52b4 100644 --- a/web/.storybook/stories-category-doc-pages/Colors.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/Colors.stories.mdx @@ -31,6 +31,7 @@ These color names are assigned to specific component variables. They can be over 'theme-color-palette-error', 'theme-color-palette-warning', 'theme-color-background-main', + 'theme-color-background-light', 'theme-color-background-header', 'theme-color-action', 'theme-color-action-hover', diff --git a/web/components/ui/CustomPageContent/CustomPageContent.module.scss b/web/components/ui/CustomPageContent/CustomPageContent.module.scss index ae9e3f307..cd6917ade 100644 --- a/web/components/ui/CustomPageContent/CustomPageContent.module.scss +++ b/web/components/ui/CustomPageContent/CustomPageContent.module.scss @@ -13,9 +13,7 @@ padding: calc(2 * var(--content-padding)); border-radius: var(--theme-rounded-corners); width: 100%; - border-color: var(--theme-color-palette-4); - border-width: 1px; - border-style: solid; + background-color: var(--theme-color-background-light); hr { margin: 1.35em 0; diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml index 4823bd9d9..209127135 100644 --- a/web/style-definitions/tokens/color/default-theme.yaml +++ b/web/style-definitions/tokens/color/default-theme.yaml @@ -84,6 +84,9 @@ theme: 13: value: 'var(--color-owncast-palette-13)' comment: '{color.owncast.palette.13.comment}' + 14: + value: 'var(--color-owncast-palette-14)' + comment: '{color.owncast.palette.14.comment}' error: value: 'var(--color-owncast-palette-error)' comment: '{color.owncast.palette.error.comment}' @@ -95,6 +98,9 @@ theme: main: value: 'var(--theme-color-palette-3)' comment: '{theme.color.palette.3.comment}' + light: + value: 'var(--theme-color-palette-14)' + comment: '{theme.color.palette.14.comment}' header: value: 'var(--theme-color-palette-0)' comment: '{theme.color.palette.0.comment}' diff --git a/web/style-definitions/tokens/color/owncast-colors.yaml b/web/style-definitions/tokens/color/owncast-colors.yaml index d58fe29b3..5c6e8cce2 100644 --- a/web/style-definitions/tokens/color/owncast-colors.yaml +++ b/web/style-definitions/tokens/color/owncast-colors.yaml @@ -73,6 +73,9 @@ color: 13: value: '#42bea6' comment: 'Fun color 3' + 14: + value: '#f0f3f8' + comment: 'Light background' error: value: '#ff4b39' comment: 'Error' diff --git a/web/styles/theme.less b/web/styles/theme.less index 168d82cb8..88ae862d1 100644 --- a/web/styles/theme.less +++ b/web/styles/theme.less @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Sat, 08 Oct 2022 23:40:28 GMT +// Generated on Mon, 10 Oct 2022 01:29:18 GMT // // How to edit these values: // Edit the corresponding token file under the style-definitions directory @@ -57,9 +57,11 @@ @theme-color-palette-11: var(--color-owncast-palette-11); // Fun color 1 @theme-color-palette-12: var(--color-owncast-palette-12); // Fun color 2 @theme-color-palette-13: var(--color-owncast-palette-13); // Fun color 3 +@theme-color-palette-14: var(--color-owncast-palette-14); // Light background @theme-color-palette-error: var(--color-owncast-palette-error); // Error @theme-color-palette-warning: var(--color-owncast-palette-warning); // Warning @theme-color-background-main: var(--theme-color-palette-3); // Light primary +@theme-color-background-light: var(--theme-color-palette-14); // Light background @theme-color-background-header: var(--theme-color-palette-0); // Dark primary @theme-color-background-chat: var(--theme-color-palette-4); // Light secondary @theme-color-action: var(--theme-color-palette-6); // Text link/secondary light text @@ -123,6 +125,7 @@ @color-owncast-palette-11: #2386e2; // Fun color 1 @color-owncast-palette-12: #da9eff; // Fun color 2 @color-owncast-palette-13: #42bea6; // Fun color 3 +@color-owncast-palette-14: #f0f3f8; // Light background @color-owncast-palette-error: #ff4b39; // Error @color-owncast-palette-warning: #ffc655; // Warning @font-owncast-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; diff --git a/web/styles/variables.css b/web/styles/variables.css index cae6b0f94..815684227 100644 --- a/web/styles/variables.css +++ b/web/styles/variables.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Sat, 08 Oct 2022 23:40:28 GMT + * Generated on Mon, 10 Oct 2022 01:29:18 GMT * * How to edit these values: * Edit the corresponding token file under the style-definitions directory @@ -35,12 +35,8 @@ --theme-rounded-corners: 0.5rem; /* How much corners are rounded in places in the UI. */ --theme-unknown-1: green; /* This should never be used and it means something is wrong. */ --theme-unknown-2: red; /* This should never be used and it means something is wrong. */ - --theme-text-body-font-family: var( - --font-owncast-body - ); /* The font family used for the body text. */ - --theme-text-display-font-family: var( - --font-owncast-display - ); /* The font family used for the display/header text. */ + --theme-text-body-font-family: var(--font-owncast-body); /* The font family used for the body text. */ + --theme-text-display-font-family: var(--font-owncast-display); /* The font family used for the display/header text. */ --theme-color-users-0: var(--color-owncast-user-0); --theme-color-users-1: var(--color-owncast-user-1); --theme-color-users-2: var(--color-owncast-user-2); @@ -63,9 +59,11 @@ --theme-color-palette-11: var(--color-owncast-palette-11); /* Fun color 1 */ --theme-color-palette-12: var(--color-owncast-palette-12); /* Fun color 2 */ --theme-color-palette-13: var(--color-owncast-palette-13); /* Fun color 3 */ + --theme-color-palette-14: var(--color-owncast-palette-14); /* Light background */ --theme-color-palette-error: var(--color-owncast-palette-error); /* Error */ --theme-color-palette-warning: var(--color-owncast-palette-warning); /* Warning */ --theme-color-background-main: var(--theme-color-palette-3); /* Light primary */ + --theme-color-background-light: var(--theme-color-palette-14); /* Light background */ --theme-color-background-header: var(--theme-color-palette-0); /* Dark primary */ --theme-color-background-chat: var(--theme-color-palette-4); /* Light secondary */ --theme-color-action: var(--theme-color-palette-6); /* Text link/secondary light text */ @@ -75,65 +73,35 @@ --theme-color-warning: var(--theme-color-palette-warning); /* Warning */ --theme-color-components-text-on-light: var(--theme-color-palette-0); /* Dark primary */ --theme-color-components-text-on-dark: var(--theme-color-palette-3); /* Light primary */ - --theme-color-components-primary-button-background: var( - --theme-color-action - ); /* Text link/secondary light text */ - --theme-color-components-primary-button-background-disabled: var( - --theme-color-action-disabled - ); /* Disabled background */ + --theme-color-components-primary-button-background: var(--theme-color-action); /* Text link/secondary light text */ + --theme-color-components-primary-button-background-disabled: var(--theme-color-action-disabled); /* Disabled background */ --theme-color-components-primary-button-text: var(--theme-color-palette-4); /* Light secondary */ - --theme-color-components-primary-button-text-disabled: var( - --theme-color-palette-10 - ); /* Neutral gray light */ - --theme-color-components-primary-button-border: var( - --theme-color-palette-4 - ); /* Light secondary */ - --theme-color-components-primary-button-border-disabled: var( - --theme-color-action-disabled - ); /* Disabled background */ - --theme-color-components-secondary-button-background: var( - --theme-color-palette-4 - ); /* Light secondary */ + --theme-color-components-primary-button-text-disabled: var(--theme-color-palette-10); /* Neutral gray light */ + --theme-color-components-primary-button-border: var(--theme-color-palette-4); /* Light secondary */ + --theme-color-components-primary-button-border-disabled: var(--theme-color-action-disabled); /* Disabled background */ + --theme-color-components-secondary-button-background: var(--theme-color-palette-4); /* Light secondary */ --theme-color-components-secondary-button-background-disabled: transparent; - --theme-color-components-secondary-button-text: var( - --theme-color-action-disabled - ); /* Disabled background */ - --theme-color-components-secondary-button-text-disabled: var( - --theme-color-action-disabled - ); /* Disabled background */ - --theme-color-components-secondary-button-border: var( - --theme-color-action - ); /* Text link/secondary light text */ - --theme-color-components-secondary-button-border-disabled: var( - --theme-color-action-disabled - ); /* Disabled background */ + --theme-color-components-secondary-button-text: var(--theme-color-action-disabled); /* Disabled background */ + --theme-color-components-secondary-button-text-disabled: var(--theme-color-action-disabled); /* Disabled background */ + --theme-color-components-secondary-button-border: var(--theme-color-action); /* Text link/secondary light text */ + --theme-color-components-secondary-button-border-disabled: var(--theme-color-action-disabled); /* Disabled background */ --theme-color-components-chat-background: var(--theme-color-palette-1); /* Dark secondary */ --theme-color-components-chat-text: var(--theme-color-palette-3); /* Light primary */ - --theme-color-components-modal-header-background: var( - --theme-color-palette-1 - ); /* Dark secondary */ + --theme-color-components-modal-header-background: var(--theme-color-palette-1); /* Dark secondary */ --theme-color-components-modal-header-text: var(--theme-color-palette-3); /* Light primary */ - --theme-color-components-modal-content-background: var( - --theme-color-palette-3 - ); /* Light primary */ + --theme-color-components-modal-content-background: var(--theme-color-palette-3); /* Light primary */ --theme-color-components-modal-content-text: var(--theme-color-palette-0); /* Dark primary */ --theme-color-components-menu-background: var(--theme-color-palette-3); /* Light primary */ --theme-color-components-menu-item-text: var(--theme-color-palette-0); /* Dark primary */ --theme-color-components-menu-item-bg: transparent; --theme-color-components-menu-item-hover-bg: rgba(0, 0, 0, 0.05); --theme-color-components-menu-item-focus-bg: rgba(0, 0, 0, 0.1); - --theme-color-components-form-field-background: var( - --theme-color-palette-4 - ); /* Light secondary */ - --theme-color-components-form-field-placeholder: var( - --theme-color-action-disabled - ); /* Disabled background */ + --theme-color-components-form-field-background: var(--theme-color-palette-4); /* Light secondary */ + --theme-color-components-form-field-placeholder: var(--theme-color-action-disabled); /* Disabled background */ --theme-color-components-form-field-text: var(--theme-color-palette-0); /* Dark primary */ --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-live-indicator: var(--theme-color-palette-7); /* The Live dot indicator in the control bar of the video player */ --owncast-purple-25: rgba(120, 113, 255, 0.25); --color-unknown: #7a5cf3; --color-unknown-2: #fffffe; @@ -159,12 +127,9 @@ --color-owncast-palette-11: #2386e2; /* Fun color 1 */ --color-owncast-palette-12: #da9eff; /* Fun color 2 */ --color-owncast-palette-13: #42bea6; /* Fun color 3 */ + --color-owncast-palette-14: #f0f3f8; /* Light background */ --color-owncast-palette-error: #ff4b39; /* Error */ --color-owncast-palette-warning: #ffc655; /* Warning */ - --font-owncast-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; - --font-owncast-display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', - Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-owncast-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-owncast-display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; }