LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Add and use additional light background color for custom page content

Browse Source
This commit is contained in:
Gabe Kangas 2022-10-09 18:41:52 -07:00
parent c0021f1f9a
commit 34a5104a6d
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
6 changed files with 38 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/.storybook/stories-category-doc-pages/Colors.stories.mdx
View File

@ -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',

4
web/components/ui/CustomPageContent/CustomPageContent.module.scss
View File

@ -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;

6
web/style-definitions/tokens/color/default-theme.yaml
View File

@ -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}'

3
web/style-definitions/tokens/color/owncast-colors.yaml
View File

@ -73,6 +73,9 @@ color:
13:
value: '#42bea6'
comment: 'Fun color 3'
14:
value: '#f0f3f8'
comment: 'Light background'
error:
value: '#ff4b39'
comment: 'Error'

5
web/styles/theme.less
View File

@ -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';

81
web/styles/variables.css
View File

@ -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';
}