Draft: rough-ish draft of proposed color theme changes (#2067)
* color experimentation and troubleshooting * create color scheme, assign colors, more ant overrides * fun selection color * Prettified Code! * Correctly import opensans * Prettified Code! * Organize+standardize colors/names and update the app to use them * Prettified Code! * Use css var references instead of resolving value of vars in css files * Prettified Code! Co-authored-by: gingervitis <gingervitis@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: gabek <gabek@users.noreply.github.com>
This commit is contained in:
gingervitis
@@ -2,23 +2,17 @@
|
||||
# You can find the variable names to override at:
|
||||
# https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
|
||||
|
||||
text-color:
|
||||
value: 'var(--theme-text-primary)'
|
||||
text-color-secondary:
|
||||
value: 'var(--theme-text-secondary)'
|
||||
link-color:
|
||||
value: 'var(--theme-text-link)'
|
||||
popover-background:
|
||||
value: 'var(--theme-background-secondary)'
|
||||
value: 'var(--theme-color-action)'
|
||||
link-hover-color:
|
||||
value: 'var(--theme-color-action-hover)'
|
||||
modal-header-bg:
|
||||
value: 'var(--theme-color-components-modal-header-background)'
|
||||
modal-content-bg:
|
||||
value: '{color.unknown-2.value}'
|
||||
background-color-light:
|
||||
value: 'var(--theme-background-secondary)'
|
||||
layout-body-background:
|
||||
value: 'var(--theme-background-primary)'
|
||||
|
||||
# These colors need to be explicitly set and cannot use CSS variables.
|
||||
component-background:
|
||||
value: '{color.unknown.value}'
|
||||
warning-color:
|
||||
value: '{color.unknown-2.value}'
|
||||
value: 'var(--theme-color-background-main)'
|
||||
alert-error-bg-color:
|
||||
value: 'var(--theme-color-palette-4)'
|
||||
alert-error-border-color:
|
||||
value: 'var(--theme-color-palette-error)'
|
||||
popover-background:
|
||||
value: 'var(--theme-color-components-menu-background)'
|
||||
|
||||
@@ -4,51 +4,211 @@
|
||||
# The fewer there are the easier it'll be easier to customize and document.
|
||||
|
||||
theme:
|
||||
unknown:
|
||||
value: '{color.unknown.value}'
|
||||
unknown-2:
|
||||
value: '{color.unknown-2.value}'
|
||||
primary:
|
||||
value: '{color.unknown.value}'
|
||||
comment: 'The primary color of the application used for rendering controls.'
|
||||
text:
|
||||
primary:
|
||||
value: '{color.owncast.text.primary.value}'
|
||||
comment: 'The color of the text in the application.'
|
||||
secondary:
|
||||
value: '{color.owncast.text.secondary.value}'
|
||||
link:
|
||||
value: '{color.owncast.text.bright.value}'
|
||||
body-font-family:
|
||||
value: '{font.owncast.body.value}'
|
||||
display-font-family:
|
||||
value: '{font.owncast.display.value}'
|
||||
background:
|
||||
primary:
|
||||
value: '{color.owncast.background.primary.value}'
|
||||
comment: 'The main background color of the page.'
|
||||
secondary:
|
||||
value: '{color.owncast.background.secondary.value}'
|
||||
comment: 'A secondary background color used in sections and controls.'
|
||||
|
||||
rounded-corners:
|
||||
value: '{rounded-corners.value}'
|
||||
value: 0.5rem
|
||||
comment: 'How much corners are rounded in places in the UI.'
|
||||
unknown-1:
|
||||
value: 'green'
|
||||
comment: 'This should never be used and it means something is wrong.'
|
||||
unknown-2:
|
||||
value: 'red'
|
||||
comment: 'This should never be used and it means something is wrong.'
|
||||
color:
|
||||
users:
|
||||
comment: 'Colors used to display chat users.'
|
||||
0:
|
||||
value: 'var(--color-owncast-user-0)'
|
||||
1:
|
||||
value: 'var(--color-owncast-user-1)'
|
||||
2:
|
||||
value: 'var(--color-owncast-user-2)'
|
||||
3:
|
||||
value: 'var(--color-owncast-user-3)'
|
||||
4:
|
||||
value: 'var(--color-owncast-user-4)'
|
||||
5:
|
||||
value: 'var(--color-owncast-user-5)'
|
||||
6:
|
||||
value: 'var(--color-owncast-user-6)'
|
||||
7:
|
||||
value: 'var(--color-owncast-user-7)'
|
||||
|
||||
user-colors:
|
||||
comment: 'Colors used to display chat users.'
|
||||
0:
|
||||
value: '{color.owncast.user.0.value}'
|
||||
1:
|
||||
value: '{color.owncast.user.1.value}'
|
||||
2:
|
||||
value: '{color.owncast.user.2.value}'
|
||||
3:
|
||||
value: '{color.owncast.user.3.value}'
|
||||
4:
|
||||
value: '{color.owncast.user.4.value}'
|
||||
5:
|
||||
value: '{color.owncast.user.5.value}'
|
||||
6:
|
||||
value: '{color.owncast.user.6.value}'
|
||||
7:
|
||||
value: '{color.owncast.user.7.value}'
|
||||
palette:
|
||||
comment: 'Colors used in the user interface for the default theme.'
|
||||
0:
|
||||
value: 'var(--color-owncast-palette-0)'
|
||||
comment: '{color.owncast.palette.0.comment}'
|
||||
1:
|
||||
value: 'var(--color-owncast-palette-1)'
|
||||
comment: '{color.owncast.palette.1.comment}'
|
||||
2:
|
||||
value: 'var(--color-owncast-palette-2)'
|
||||
comment: '{color.owncast.palette.2.comment}'
|
||||
3:
|
||||
value: 'var(--color-owncast-palette-3)'
|
||||
comment: '{color.owncast.palette.3.comment}'
|
||||
4:
|
||||
value: 'var(--color-owncast-palette-4)'
|
||||
comment: '{color.owncast.palette.4.comment}'
|
||||
5:
|
||||
value: 'var(--color-owncast-palette-5)'
|
||||
comment: '{color.owncast.palette.5.comment}'
|
||||
6:
|
||||
value: 'var(--color-owncast-palette-6)'
|
||||
comment: '{color.owncast.palette.6.comment}'
|
||||
7:
|
||||
value: 'var(--color-owncast-palette-7)'
|
||||
comment: '{color.owncast.palette.7.comment}'
|
||||
8:
|
||||
value: 'var(--color-owncast-palette-8)'
|
||||
comment: '{color.owncast.palette.8.comment}'
|
||||
9:
|
||||
value: 'var(--color-owncast-palette-9)'
|
||||
comment: '{color.owncast.palette.9.comment}'
|
||||
10:
|
||||
value: 'var(--color-owncast-palette-10)'
|
||||
comment: '{color.owncast.palette.10.comment}'
|
||||
11:
|
||||
value: 'var(--color-owncast-palette-11)'
|
||||
comment: '{color.owncast.palette.11.comment}'
|
||||
12:
|
||||
value: 'var(--color-owncast-palette-12)'
|
||||
comment: '{color.owncast.palette.12.comment}'
|
||||
13:
|
||||
value: 'var(--color-owncast-palette-13)'
|
||||
comment: '{color.owncast.palette.13.comment}'
|
||||
error:
|
||||
value: 'var(--color-owncast-palette-error)'
|
||||
comment: '{color.owncast.palette.error.comment}'
|
||||
warning:
|
||||
value: 'var(--color-owncast-palette-warning)'
|
||||
comment: '{color.owncast.palette.warning.comment}'
|
||||
|
||||
background:
|
||||
main:
|
||||
value: 'var(--theme-color-palette-3)'
|
||||
comment: '{theme.color.palette.3.comment}'
|
||||
header:
|
||||
value: 'var(--theme-color-palette-0)'
|
||||
comment: '{theme.color.palette.0.comment}'
|
||||
action:
|
||||
value: 'var(--theme-color-palette-6)'
|
||||
comment: '{theme.color.palette.6.comment}'
|
||||
action-hover:
|
||||
value: 'var(--theme-color-palette-7)'
|
||||
comment: '{theme.color.palette.7.comment}'
|
||||
action-disabled:
|
||||
value: 'var(--theme-color-palette-8)'
|
||||
comment: '{theme.color.palette.8.comment}'
|
||||
|
||||
error:
|
||||
value: 'var(--theme-color-palette-error)'
|
||||
comment: '{theme.color.palette.error.comment}'
|
||||
warning:
|
||||
value: 'var(--theme-color-palette-warning)'
|
||||
comment: '{theme.color.palette.warning.comment}'
|
||||
|
||||
components:
|
||||
text-on-light:
|
||||
value: 'var(--theme-color-palette-0)'
|
||||
comment: '{theme.color.palette.0.comment}'
|
||||
text-on-dark:
|
||||
value: 'var(--theme-color-palette-3)'
|
||||
comment: '{theme.color.palette.3.comment}'
|
||||
|
||||
primary-button:
|
||||
background:
|
||||
value: 'var(--theme-color-action)'
|
||||
comment: '{theme.color.action.comment}'
|
||||
background-disabled:
|
||||
value: 'var(--theme-color-action-disabled)'
|
||||
comment: '{theme.color.action-disabled.comment}'
|
||||
text:
|
||||
value: 'var(--theme-color-palette-4)'
|
||||
comment: '{theme.color.palette.4.comment}'
|
||||
text-disabled:
|
||||
value: 'var(--theme-color-palette-10)'
|
||||
comment: '{theme.color.palette.10.comment}'
|
||||
border:
|
||||
value: 'var(--theme-color-palette-4)'
|
||||
comment: '{theme.color.palette.4.comment}'
|
||||
border-disabled:
|
||||
value: 'var(--theme-color-action-disabled)'
|
||||
comment: '{theme.color.action-disabled.comment}'
|
||||
|
||||
secondary-button:
|
||||
background:
|
||||
value: 'var(--theme-color-palette-4)'
|
||||
comment: '{theme.color.palette.4.comment}'
|
||||
background-disabled:
|
||||
value: 'transparent'
|
||||
text:
|
||||
value: 'var(--theme-color-action-disabled)'
|
||||
comment: '{theme.color.action-disabled.comment}'
|
||||
text-disabled:
|
||||
value: 'var(--theme-color-action-disabled)'
|
||||
comment: '{theme.color.action-disabled.comment}'
|
||||
border:
|
||||
value: 'var(--theme-color-action)'
|
||||
comment: '{theme.color.action.comment}'
|
||||
border-disabled:
|
||||
value: 'var(--theme-color-action-disabled)'
|
||||
comment: '{theme.color.action-disabled.comment}'
|
||||
|
||||
chat:
|
||||
background:
|
||||
value: 'var(--theme-color-palette-1)'
|
||||
comment: '{theme.color.palette.1.comment}'
|
||||
text:
|
||||
value: 'var(--theme-color-palette-3)'
|
||||
comment: '{theme.color.palette.3.comment}'
|
||||
|
||||
modal:
|
||||
header:
|
||||
background:
|
||||
value: 'var(--theme-color-palette-1)'
|
||||
comment: '{theme.color.palette.1.comment}'
|
||||
text:
|
||||
value: 'var(--theme-color-palette-3)'
|
||||
comment: '{theme.color.palette.3.comment}'
|
||||
content:
|
||||
background:
|
||||
value: 'var(--theme-color-palette-3)'
|
||||
comment: '{theme.color.palette.3.comment}'
|
||||
text:
|
||||
value: 'var(--theme-color-palette-0)'
|
||||
comment: '{theme.color.palette.0.comment}'
|
||||
|
||||
menu:
|
||||
background:
|
||||
value: 'var(--theme-color-palette-3)'
|
||||
comment: '{theme.color.palette.3.comment}'
|
||||
item:
|
||||
text:
|
||||
value: 'var(--theme-color-palette-0)'
|
||||
comment: '{theme.color.palette.0.comment}'
|
||||
bg:
|
||||
value: 'transparent'
|
||||
hover-bg:
|
||||
value: 'rgba(0, 0, 0, 0.05)'
|
||||
focus-bg:
|
||||
value: 'rgba(0, 0, 0, 0.1)'
|
||||
|
||||
form-field:
|
||||
background:
|
||||
value: 'var(--theme-color-palette-4)'
|
||||
comment: '{theme.color.palette.4.comment}'
|
||||
placeholder:
|
||||
value: 'var(--theme-color-action-disabled)'
|
||||
comment: '{theme.color.action-disabled.comment}'
|
||||
text:
|
||||
value: 'var(--theme-color-palette-0)'
|
||||
comment: '{theme.color.palette.0.comment}'
|
||||
border:
|
||||
value: 'var(--theme-color-palette-0)'
|
||||
comment: '{theme.color.palette.0.comment}'
|
||||
|
||||
video:
|
||||
background:
|
||||
value: 'var(--theme-color-palette-2)'
|
||||
comment: '{theme.color.palette.2.comment}'
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
# Values used in the admin and should be migrated to variables or removed.
|
||||
# See ant-overrides.scss.
|
||||
owncast-purple:
|
||||
value: '{color.unknown.value}'
|
||||
# owncast-purple:
|
||||
# value: '{color.unknown.value}'
|
||||
owncast-purple-25:
|
||||
value: 'rgba(120, 113, 255, 0.25)'
|
||||
owncast-purple-50:
|
||||
value: 'rgba(120, 113, 255, 0.5)'
|
||||
online-color:
|
||||
value: '#73dd3f'
|
||||
offline-color:
|
||||
value: '#999'
|
||||
pink:
|
||||
value: '{color.unknown.value}'
|
||||
purple:
|
||||
value: '{color.unknown-2.value}'
|
||||
blue:
|
||||
value: '{color.unknown.value}'
|
||||
white-88:
|
||||
value: '{color.unknown-2.value}'
|
||||
purple-dark:
|
||||
value: '{color.unknown.value}'
|
||||
default-link-color:
|
||||
value: '{color.owncast.text.bright.value}'
|
||||
default-bg-color:
|
||||
value: '{color.owncast.background.primary.value}'
|
||||
default-text-color:
|
||||
value: '{color.owncast.text.primary.value}'
|
||||
# owncast-purple-50:
|
||||
# value: 'rgba(120, 113, 255, 0.5)'
|
||||
# online-color:
|
||||
# value: '#73dd3f'
|
||||
# offline-color:
|
||||
# value: '#999'
|
||||
# pink:
|
||||
# value: '{color.unknown.value}'
|
||||
# purple:
|
||||
# value: '{color.unknown-2.value}'
|
||||
# blue:
|
||||
# value: '{color.unknown.value}'
|
||||
# white-88:
|
||||
# value: '{color.unknown-2.value}'
|
||||
# purple-dark:
|
||||
# value: '{color.unknown.value}'
|
||||
# default-link-color:
|
||||
# value: '{color.owncast.text.bright.value}'
|
||||
# default-bg-color:
|
||||
# value: '{color.owncast.background.primary.value}'
|
||||
# default-text-color:
|
||||
# value: '{color.owncast.text.primary.value}'
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
# These are colors that make up the Owncast-specific color palette.
|
||||
color:
|
||||
unknown:
|
||||
value: '#00FF00'
|
||||
value: '#7a5cf3'
|
||||
|
||||
# this ends up being primary button text
|
||||
unknown-2:
|
||||
value: '#FF0000'
|
||||
value: '#fffffe'
|
||||
|
||||
owncast:
|
||||
# These are the colors assigned to chat users.
|
||||
# If you add more colors here make sure to add them to
|
||||
@@ -27,25 +30,55 @@ color:
|
||||
7:
|
||||
value: 'rgb(244, 11, 244)'
|
||||
|
||||
text:
|
||||
primary:
|
||||
value: '#030208'
|
||||
secondary:
|
||||
value: '#63638E'
|
||||
highlight:
|
||||
value: '#030208'
|
||||
bright:
|
||||
value: '#5353A6'
|
||||
background:
|
||||
highlight:
|
||||
value: '#F0E678'
|
||||
primary:
|
||||
value: '#FFFCF2'
|
||||
secondary:
|
||||
value: '#F0EFE4'
|
||||
|
||||
rounded-corners:
|
||||
value: '0.5em'
|
||||
palette:
|
||||
0:
|
||||
value: '#12161d'
|
||||
comment: 'Dark primary'
|
||||
1:
|
||||
value: '#2D3748'
|
||||
comment: 'Dark secondary'
|
||||
2:
|
||||
value: '#000000'
|
||||
comment: 'Dark alternate'
|
||||
3:
|
||||
value: '#e2e8f0'
|
||||
comment: 'Light primary'
|
||||
4:
|
||||
value: '#ffffff'
|
||||
comment: 'Light secondary'
|
||||
5:
|
||||
value: '#c3dafe'
|
||||
comment: 'Light alternate'
|
||||
6:
|
||||
value: '#7a5cf3'
|
||||
comment: 'Text link/secondary light text'
|
||||
7:
|
||||
value: '#5d38f3'
|
||||
comment: 'Text link hover'
|
||||
8:
|
||||
value: '#b6b3c6'
|
||||
comment: 'Disabled background'
|
||||
9:
|
||||
value: '#39373d'
|
||||
comment: 'Neutral dark'
|
||||
10:
|
||||
value: '#707283'
|
||||
comment: 'Neutral gray light'
|
||||
11:
|
||||
value: '#2386e2'
|
||||
comment: 'Fun color 1'
|
||||
12:
|
||||
value: '#da9eff'
|
||||
comment: 'Fun color 2'
|
||||
13:
|
||||
value: '#42bea6'
|
||||
comment: 'Fun color 3'
|
||||
error:
|
||||
value: '#ff4b39'
|
||||
comment: 'Error'
|
||||
warning:
|
||||
value: '#ffc655'
|
||||
comment: 'Warning'
|
||||
|
||||
font:
|
||||
owncast:
|
||||
|
||||
Reference in New Issue
Block a user