mirror of
https://github.com/owncast/owncast.git
synced 2024-11-21 20:28:15 +03:00
Change chat user display colors to meet a11y guidelines
This commit is contained in:
Gabe Kangas
parent
6e22dde434
commit
c352e4a9c1
3 changed files with 42 additions and 83 deletions
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue