diff --git a/web/style-definitions/tokens/color/owncast-colors.yaml b/web/style-definitions/tokens/color/owncast-colors.yaml index de80689cb..53a62bec8 100644 --- a/web/style-definitions/tokens/color/owncast-colors.yaml +++ b/web/style-definitions/tokens/color/owncast-colors.yaml @@ -12,23 +12,24 @@ color: # If you add more colors here make sure to add them to # GenerateRandomDisplayColor in the Go codebase so it knows the max # number of colors to use. + user: 0: - value: 'rgb(244, 11, 11)' + value: '#ff717b' 1: - value: 'rgb(244, 128, 11)' + value: '#F4E413' 2: - value: 'rgb(162, 162, 1)' + value: '#b99c45' 3: - value: 'rgb(88, 244, 11)' + value: '#58f40b' 4: - value: 'rgb(11, 244, 244)' + value: '#0bf4f4' 5: - value: 'rgb(11, 166, 244)' + value: '#0ba6f4' 6: - value: 'rgb(102, 102, 255)' + value: '#9a92ff' 7: - value: 'rgb(244, 11, 244)' + value: '#ff53ff' palette: 0: diff --git a/web/styles/theme.less b/web/styles/theme.less index afe0cea2f..18317c400 100644 --- a/web/styles/theme.less +++ b/web/styles/theme.less @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Wed, 25 Jan 2023 02:50:50 GMT +// Generated on Sun, 29 Jan 2023 01:28:51 GMT // // How to edit these values: // Edit the corresponding token file under the style-definitions directory @@ -106,14 +106,14 @@ @owncast-purple-25: rgba(120, 113, 255, 0.25); @color-unknown: #7a5cf3; @color-unknown-2: #fffffe; -@color-owncast-user-0: #f40b0b; -@color-owncast-user-1: #f4800b; -@color-owncast-user-2: #a2a201; +@color-owncast-user-0: #ff717b; +@color-owncast-user-1: #f4e413; +@color-owncast-user-2: #b99c45; @color-owncast-user-3: #58f40b; @color-owncast-user-4: #0bf4f4; @color-owncast-user-5: #0ba6f4; -@color-owncast-user-6: #6666ff; -@color-owncast-user-7: #f40bf4; +@color-owncast-user-6: #9a92ff; +@color-owncast-user-7: #ff53ff; @color-owncast-palette-0: #12161d; // Dark primary @color-owncast-palette-1: #2d3748; // Dark secondary @color-owncast-palette-2: #000000; // Dark alternate diff --git a/web/styles/variables.css b/web/styles/variables.css index b14d4f1ba..7f593dbfd 100644 --- a/web/styles/variables.css +++ b/web/styles/variables.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 25 Jan 2023 02:50:50 GMT + * Generated on Sun, 29 Jan 2023 01:28:51 GMT * * How to edit these values: * Edit the corresponding token file under the style-definitions directory @@ -35,12 +35,8 @@ --theme-rounded-corners: 9px; /* 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); @@ -77,83 +73,49 @@ --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-text-disabled: var(--theme-color-palette-10); /* Neutral gray light */ --theme-color-components-primary-button-border: var(--theme-color-action); /* 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-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 primary */ --theme-color-components-chat-text: var(--theme-color-palette-15); /* Lighter background */ - --theme-color-components-content-background: var( - --theme-color-palette-15 - ); /* Lighter background */ - --theme-color-components-modal-header-background: var( - --theme-color-palette-1 - ); /* Dark secondary */ + --theme-color-components-content-background: var(--theme-color-palette-15); /* Lighter background */ + --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-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 */ + --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; - --color-owncast-user-0: #f40b0b; - --color-owncast-user-1: #f4800b; - --color-owncast-user-2: #a2a201; + --color-owncast-user-0: #ff717b; + --color-owncast-user-1: #f4e413; + --color-owncast-user-2: #b99c45; --color-owncast-user-3: #58f40b; --color-owncast-user-4: #0bf4f4; --color-owncast-user-5: #0ba6f4; - --color-owncast-user-6: #6666ff; - --color-owncast-user-7: #f40bf4; + --color-owncast-user-6: #9a92ff; + --color-owncast-user-7: #ff53ff; --color-owncast-palette-0: #12161d; /* Dark primary */ --color-owncast-palette-1: #2d3748; /* Dark secondary */ --color-owncast-palette-2: #000000; /* Dark alternate */ @@ -172,10 +134,6 @@ --color-owncast-palette-15: #eff1f4; /* Lighter 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'; }