LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Draft: rough-ish draft of proposed color theme changes (#2067)

Browse Source 
* 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 2022-08-29 23:17:12 -07:00 committed by GitHub
parent a0a28fa572
commit d5fa81f76e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 817 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/action-buttons/ActionButton.tsx
View File

@ -6,10 +6,15 @@ import s from './ActionButton.module.scss';
interface Props { interface Props {
action: ExternalAction; action: ExternalAction;
primary?: boolean;
} }
ActionButton.defaultProps = {
primary: false,
};
export default function ActionButton({ export default function ActionButton({
action: { url, title, description, icon, color, openExternally }, action: { url, title, description, icon, color, openExternally },
primary = false,
}: Props) { }: Props) {
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
@ -24,7 +29,7 @@ export default function ActionButton({
return ( return (
<> <>
<Button <Button
type="primary" type={primary ? 'primary' : 'default'}
className={`${s.button}`} className={`${s.button}`}
onClick={buttonClicked} onClick={buttonClicked}
style={{ backgroundColor: color }} style={{ backgroundColor: color }}

5
web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
View File

@ -1,5 +1,5 @@
.chatSystemMessage { .chatSystemMessage {
background: var(--theme-background-secondary); background: var(--theme-color-background-main);
background: linear-gradient( background: linear-gradient(
70deg, 70deg,
rgb(78, 54, 114) 0%, rgb(78, 54, 114) 0%,
@ -31,8 +31,7 @@
mark { mark {
padding-left: 0.35em; padding-left: 0.35em;
padding-right: 0.35em; padding-right: 0.35em;
color: var(--theme-text-highlight); background-color: var(--theme-color-palette-12);
background-color: var(--color-bg-highlight);
} }
} }
} }

6
web/components/chat/ChatTextField/ChatTextField.module.scss
View File

@ -4,14 +4,16 @@
bottom: 0px; bottom: 0px;
width: 100%; width: 100%;
padding: 0.3rem; padding: 0.3rem;
color: var(--theme-text-secondary); color: var(--theme-color-components-form-field-text);
overflow-x: hidden; overflow-x: hidden;
div[role='textbox'] { div[role='textbox'] {
font-size: 0.9rem; font-size: 0.9rem;
border-radius: 0.2rem; border-radius: 0.2rem;
padding: 0.6rem; padding: 0.6rem;
padding-right: calc(0.6rem + 44px); padding-right: calc(0.6rem + 44px);
background-color: var(--color-owncast-gray-700); background-color: var(--theme-color-components-form-field-background);
border-color: var(--theme-color-components-form-field-border);
box-shadow: 0; box-shadow: 0;
transition: box-shadow 50ms ease-in-out; transition: box-shadow 50ms ease-in-out;
&:focus { &:focus {

4
web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
View File

@ -13,12 +13,12 @@
font-weight: bold; font-weight: bold;
} }
.message { .message {
color: var(--theme-text-primary); color: var(--theme-color-components-chat-text);
mark { mark {
padding-left: 0.35em; padding-left: 0.35em;
padding-right: 0.35em; padding-right: 0.35em;
color: var(--theme-text-highlight); color: var(--theme-color-palette-12);
} }
} }

19
web/components/common/ContentHeader/ContentHeader.module.scss
View File

@ -1,6 +1,7 @@
.root { .root {
position: relative; position: relative;
display: grid; display: grid;
padding: 20px;
} }
.buttonsLogoTitleSection { .buttonsLogoTitleSection {
@ -28,31 +29,31 @@
.titleSection { .titleSection {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 10px;
.title { .title {
font-family: var(--theme-text-display-font-family);
color: var(--theme-color-palette-0);
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
color: black;
text-transform: uppercase;
line-height: 30px; line-height: 30px;
} }
.subtitle { .subtitle {
font-size: 24px; font-size: 22px;
font-weight: 400; font-weight: 300;
line-height: 22px; line-height: 1.3;
color: var(--theme-text-secondary); color: var(--theme-color-background-header);
} }
} }
.tagList { .tagList {
font-family: var(--theme-text-display-font-family); color: var(--theme-color-palette-10);
color: var(--theme-text-primary);
span { span {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 500;
} }
} }

1
web/components/common/Logo/Logo.module.scss
View File

@ -12,7 +12,6 @@
.contrast { .contrast {
padding: 5px; padding: 5px;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-owncast-gray-100);
svg { svg {
width: clamp(2rem, 7vw, 40px); width: clamp(2rem, 7vw, 40px);
height: clamp(2rem, 7vw, 40px); height: clamp(2rem, 7vw, 40px);

5
web/components/common/UserDropdown/UserDropdown.module.scss
View File

@ -1,5 +1,10 @@
.root { .root {
button { button {
border: none; border: none;
.ant-space {
.ant-space-item {
color: var(--theme-unknown-2);
}
}
} }
} }

2
web/components/common/UserDropdown/UserDropdown.tsx
View File

@ -68,7 +68,7 @@ export default function UserDropdown({ username: defaultUsername }: Props) {
return ( return (
<div className={`${s.root}`}> <div className={`${s.root}`}>
<Dropdown overlay={menu} trigger={['click']}> <Dropdown overlay={menu} trigger={['click']}>
<Button icon={<UserOutlined style={{ marginRight: '.5rem' }} />}> <Button type="primary" icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
<Space> <Space>
{username} {username}
<CaretDownOutlined /> <CaretDownOutlined />

6
web/components/modals/Follow/FollowModal.tsx
View File

@ -111,10 +111,12 @@ export default function FollowModal(props: Props) {
</div> </div>
</div> </div>
<Space className={s.buttons}> <Space className={s.buttons}>
<Button disabled={!valid} onClick={remoteFollowButtonPressed}> <Button disabled={!valid} type="primary" onClick={remoteFollowButtonPressed}>
Follow Follow
</Button> </Button>
<Button onClick={joinButtonPressed}>Join the Fediverse</Button> <Button onClick={joinButtonPressed} type="primary">
Join the Fediverse
</Button>
</Space> </Space>
</Spin> </Spin>
</Space> </Space>

2
web/components/modals/NameChangeModal.tsx
View File

@ -18,7 +18,7 @@ function UserColor(props: { color: number }): React.ReactElement {
const { color } = props; const { color } = props;
const style: CSSProperties = { const style: CSSProperties = {
textAlign: 'center', textAlign: 'center',
backgroundColor: `var(--theme-user-colors-${color})`, backgroundColor: `var(--theme-color-users-${color})`,
width: '100%', width: '100%',
height: '100%', height: '100%',
}; };

16
web/components/ui/Content/Content.module.scss
View File

@ -1,7 +1,16 @@
.root { .root {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
padding: 0.7em;
background-color: var(--theme-color-background-main);
.topSection {
padding: 0;
background-color: var(--theme-color-components-video-background);
}
.lowerSection {
padding: 0em 2em;
}
} }
.leftCol { .leftCol {
@ -22,13 +31,12 @@
flex-direction: column; flex-direction: column;
height: calc(100vh - 64px); height: calc(100vh - 64px);
overflow: hidden; overflow: hidden;
.topHalf { .topSection {
display: grid; display: grid;
grid-template-rows: 30vh 5vh 5vh; grid-template-rows: 30vh 5vh 5vh;
height: 40vh; height: 40vh;
// overflow: hidden;
} }
.lowerHalf { .lowerSection {
height: 60vh; height: 60vh;
} }
} }

8
web/components/ui/Content/Content.tsx
View File

@ -113,7 +113,8 @@ export default function ContentComponent() {
<Content className={rootClassName}> <Content className={rootClassName}>
<div className={s.leftContent}> <div className={s.leftContent}>
<Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} /> <Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
<div className={s.topHalf}>
<div className={s.topSection}>
{online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />} {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
{!online && ( {!online && (
<OfflineBanner <OfflineBanner
@ -129,6 +130,8 @@ export default function ContentComponent() {
lastDisconnectTime={lastDisconnectTime} lastDisconnectTime={lastDisconnectTime}
viewerCount={viewerCount} viewerCount={viewerCount}
/> />
</div>
<div className={s.midSection}>
<div className={s.buttonsLogoTitleSection}> <div className={s.buttonsLogoTitleSection}>
<ActionButtonRow> <ActionButtonRow>
{externalActionButtons} {externalActionButtons}
@ -161,6 +164,9 @@ export default function ContentComponent() {
links={socialHandles} links={socialHandles}
logo="/logo" logo="/logo"
/> />
</div>
<div className={s.lowerSection}>
<Tabs defaultActiveKey="0" style={{ height: '100%' }}> <Tabs defaultActiveKey="0" style={{ height: '100%' }}>
{isChatVisible && isMobile && ( {isChatVisible && isMobile && (
<TabPane tab="Chat" key="0" style={{ height: '100%' }}> <TabPane tab="Chat" key="0" style={{ height: '100%' }}>

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

@ -9,12 +9,10 @@
line-height: 1.5em; line-height: 1.5em;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 80%; color: var(--theme-color-palette-0);
max-width: 1200px; background-color: var(--theme-color-palette-4);
padding: calc(3 * var(--content-padding));
color: var(--theme-text); border-radius: var(--theme-rounded-corners);
background-color: var(--theme-background-secondary);
padding: 1em;
// Allow the content to fill the width on narrow screens. // Allow the content to fill the width on narrow screens.
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {

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

@ -1,5 +1,7 @@
.footer { .footer {
font-size: 0.85em; font-size: 0.85em;
font-weight: 500; font-weight: 500;
color: var(--theme-text-secondary); color: var(--theme-color-palette-1);
background-color: transparent;
padding: var(--content-padding);
} }

11
web/components/ui/Header/Header.module.scss
View File

@ -5,13 +5,18 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
z-index: 20; z-index: 20;
padding: 0.4rem .7rem; padding: 0.4rem 0.7rem;
background-color: var(--default-bg-color); box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
background-color: var(--theme-color-background-header);
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
span { span {
margin-left: .5rem; color: var(--theme-color-components-text-on-dark);
font-family: var(--theme-text-display-font-family);
margin-left: 0.5rem;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
} }

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

@ -10,8 +10,8 @@
border-radius: 50%; border-radius: 50%;
border-width: 5px; border-width: 5px;
border-style: solid; border-style: solid;
border-color: var(--theme-primary-color); border-color: var(--theme-color-palette-0);
background-color: var(--theme-background-secondary); background-color: var(--theme-color-palette-4);
} }
.container { .container {

1
web/components/ui/Modal/Modal.module.scss
View File

@ -8,4 +8,5 @@
display: block; display: block;
height: 100%; height: 100%;
padding: 2vw; padding: 2vw;
background-color: var(--theme-color-components-modal-content-background);
} }

3
web/components/ui/OfflineBanner/OfflineBanner.module.scss
View File

@ -7,7 +7,8 @@
width: clamp(200px, 100%, 300px); width: clamp(200px, 100%, 300px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--theme-background-secondary); color: var(--theme-color-components-text-on-light);
background-color: var(--theme-color-background-main);
margin: 1rem auto; margin: 1rem auto;
border-radius: var(--theme-rounded-corners); border-radius: var(--theme-rounded-corners);
padding: 1rem; padding: 1rem;

3
web/components/ui/Sidebar/Sidebar.module.scss
View File

@ -1,5 +1,5 @@
.root { .root {
background-color: var(--theme-background-secondary); background-color: var(--theme-color-components-chat-background);
display: none; display: none;
--header-h: 64px; --header-h: 64px;
} }
@ -24,4 +24,3 @@ Only way to target it apparently
flex-grow: 1 !important; flex-grow: 1 !important;
height: 100% !important; height: 100% !important;
} }

8
web/components/ui/Statusbar/Statusbar.module.scss
View File

@ -1,12 +1,10 @@
.statusbar { .statusbar {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: .8rem; font-size: 0.8rem;
padding-left: 10px;
padding-right: 10px;
justify-content: space-between; justify-content: space-between;
height: 2rem; height: 2rem;
width: 100%; width: 100%;
color: var(--color-owncast-gray-300); padding: var(--content-padding);
background-color: var(--theme-background-secondary); color: var(--theme-color-palette-5);
} }

19
web/components/video/player.scss
View File

@ -1,20 +1,23 @@
/* Change all text and icon colors in the player. */ /* Change all text and icon colors in the player. */
.vjs-owncast.video-js { .vjs-owncast.video-js {
color: var(--theme-text-secondary); color: var(--theme-color-components-text-on-light);
} }
.vjs-owncast .vjs-big-play-button { .vjs-owncast .vjs-big-play-button {
z-index: 10; z-index: 10;
color: var(--theme-text-secondary); color: var(--theme-color-action);
font-size: 15rem !important; font-size: 8rem !important;
border-color: transparent !important; border-color: transparent !important;
border-radius: var(--theme-rounded-corners) !important; border-radius: var(--theme-rounded-corners) !important;
background-color: transparent !important; background-color: transparent !important;
text-shadow: 2px 3px 4px #0000005f; text-shadow: 2px 3px 4px #0000005f;
-webkit-text-stroke: 2px white;
text-stroke: 2px white;
:hover { :hover {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
font-size: 20rem; font-size: 10rem;
text-shadow: 2px 5px 4px #00000093; text-shadow: 2px 5px 4px #00000093;
} }
} }
@ -22,16 +25,16 @@
.vjs-owncast .vjs-loading-spinner { .vjs-owncast .vjs-loading-spinner {
z-index: 10; z-index: 10;
display: block; display: block;
color: var(--theme-text-secondary); color: var(--theme-color-components-text-on-light);
} }
.vjs-owncast .vjs-control-bar { .vjs-owncast .vjs-control-bar {
color: var(--theme-text-secondary); color: var(--theme-color-components-text-on-light);
background-color: var(--theme-background-primary) !important; background-color: var(--theme-color-background-main) !important;
} }
.vjs-owncast .vjs-control { .vjs-owncast .vjs-control {
color: var(--theme-text-secondary); color: var(--theme-color-components-text-on-light);
} }
.vjs-airplay .vjs-icon-placeholder::before { .vjs-airplay .vjs-icon-placeholder::before {

5
web/stories/Color.tsx
View File

@ -1,3 +1,5 @@
import he from 'date-fns/esm/locale/he/index.js';
import { unset } from 'lodash';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
export function Color(props) { export function Color(props) {
@ -35,8 +37,9 @@ export function Color(props) {
const colorDescriptionStyle = { const colorDescriptionStyle = {
margin: '5px', margin: '5px',
color: 'gray', color: 'gray',
fontSize: '0.9vw', fontSize: '0.95vw',
textAlign: 'center' as 'center', textAlign: 'center' as 'center',
lineHeight: 1.0,
}; };
return ( return (

109
web/stories/Colors.stories.mdx
View File

@ -1,34 +1,111 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Color, ColorRow } from './Color'; import { Color, ColorRow } from './Color';
<Meta title="owncast/Style Guide/Colors" /> <Meta title="owncast/Style Guide/Default Theme" />
# Colors # Default theme colors
These colors are assigned in our [color token](https://github.com/owncast/owncast/tree/webv2/web/style-definitions/tokens/color) files These colors are assigned in our [color token](https://github.com/owncast/owncast/tree/webv2/web/style-definitions/tokens/color) files
and get reflected here as they change. run `npm build-styles` to regenerate. and get reflected here as they change. run `npm run build-styles` to regenerate.
Toggle dark mode on and off in the above toolbar to see how these colors look on a dark vs. light background. ## Default Theme
## Text These color names are assigned to specific component variables. They can be overwritten via CSS.
<ColorRow colors={['theme-text-primary', 'theme-text-secondary', 'theme-text-link']} /> <ColorRow
colors={[
'theme-color-palette-0',
'theme-color-palette-1',
'theme-color-palette-2',
'theme-color-palette-3',
'theme-color-palette-4',
'theme-color-palette-5',
'theme-color-palette-6',
'theme-color-palette-7',
'theme-color-palette-8',
'theme-color-palette-9',
'theme-color-palette-10',
'theme-color-palette-11',
'theme-color-palette-12',
'theme-color-palette-13',
'theme-color-palette-error',
'theme-color-palette-warning',
'theme-color-background-main',
'theme-color-background-header',
'theme-color-action',
'theme-color-action-hover',
'theme-color-action-disabled',
]}
/>
## Backgrounds ## Component Colors
<ColorRow colors={['theme-background-primary', 'theme-background-secondary']} /> <ColorRow
colors={[
'theme-color-components-text-on-light',
'theme-color-components-text-on-dark',
'theme-color-components-primary-button-background',
'theme-color-components-primary-button-background-disabled',
'theme-color-components-primary-button-text',
'theme-color-components-primary-button-text-disabled',
'theme-color-components-primary-button-border',
'theme-color-components-secondary-button-background',
'theme-color-components-secondary-button-background-disabled',
'theme-color-components-secondary-button-text',
'theme-color-components-secondary-button-text-disabled',
'theme-color-components-secondary-button-border',
'theme-color-components-chat-background',
'theme-color-components-chat-text',
'theme-color-components-modal-header-background',
'theme-color-components-modal-header-text',
'theme-color-components-modal-content-background',
'theme-color-components-modal-content-text',
'theme-color-components-menu-background',
'theme-color-components-menu-item-text',
'theme-color-components-menu-item-bg',
'theme-color-components-menu-item-hover-bg',
'theme-color-components-menu-item-focus-bg',
'theme-color-components-form-field-background',
'theme-color-components-form-field-placeholder',
'theme-color-components-form-field-text',
'theme-color-components-form-field-border',
]}
/>
## Default Palette
These are the core colors for the default, out of the box, Owncast web application theme.
They should not be overwritten, instead the theme variables should be overwritten.
<ColorRow
colors={[
'color-owncast-palette-0',
'color-owncast-palette-1',
'color-owncast-palette-2',
'color-owncast-palette-3',
'color-owncast-palette-4',
'color-owncast-palette-5',
'color-owncast-palette-6',
'color-owncast-palette-7',
'color-owncast-palette-9',
'color-owncast-palette-10',
'color-owncast-palette-11',
'color-owncast-palette-12',
'color-owncast-palette-13',
]}
/>
## User Colors ## User Colors
<ColorRow <ColorRow
colors={[ colors={[
'theme-user-colors-0', 'theme-color-users-0',
'theme-user-colors-1', 'theme-color-users-1',
'theme-user-colors-2', 'theme-color-users-2',
'theme-user-colors-3', 'theme-color-users-3',
'theme-user-colors-4', 'theme-color-users-4',
'theme-user-colors-5', 'theme-color-users-5',
'theme-user-colors-6', 'theme-color-users-6',
'theme-user-colors-7', 'theme-color-users-7',
]} ]}
/> />

30
web/style-definitions/tokens/color/antd-overrides.yaml
View File

@ -2,23 +2,17 @@
# You can find the variable names to override at: # You can find the variable names to override at:
# https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less # 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: link-color:
value: 'var(--theme-text-link)' value: 'var(--theme-color-action)'
popover-background: link-hover-color:
value: 'var(--theme-background-secondary)' value: 'var(--theme-color-action-hover)'
modal-header-bg:
value: 'var(--theme-color-components-modal-header-background)'
modal-content-bg: modal-content-bg:
value: '{color.unknown-2.value}' value: 'var(--theme-color-background-main)'
background-color-light: alert-error-bg-color:
value: 'var(--theme-background-secondary)' value: 'var(--theme-color-palette-4)'
layout-body-background: alert-error-border-color:
value: 'var(--theme-background-primary)' value: 'var(--theme-color-palette-error)'
popover-background:
# These colors need to be explicitly set and cannot use CSS variables. value: 'var(--theme-color-components-menu-background)'
component-background:
value: '{color.unknown.value}'
warning-color:
value: '{color.unknown-2.value}'

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

@ -4,51 +4,211 @@
# The fewer there are the easier it'll be easier to customize and document. # The fewer there are the easier it'll be easier to customize and document.
theme: 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: rounded-corners:
value: '{rounded-corners.value}' value: 0.5rem
comment: 'How much corners are rounded in places in the UI.'
user-colors: 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.' comment: 'Colors used to display chat users.'
0: 0:
value: '{color.owncast.user.0.value}' value: 'var(--color-owncast-user-0)'
1: 1:
value: '{color.owncast.user.1.value}' value: 'var(--color-owncast-user-1)'
2: 2:
value: '{color.owncast.user.2.value}' value: 'var(--color-owncast-user-2)'
3: 3:
value: '{color.owncast.user.3.value}' value: 'var(--color-owncast-user-3)'
4: 4:
value: '{color.owncast.user.4.value}' value: 'var(--color-owncast-user-4)'
5: 5:
value: '{color.owncast.user.5.value}' value: 'var(--color-owncast-user-5)'
6: 6:
value: '{color.owncast.user.6.value}' value: 'var(--color-owncast-user-6)'
7: 7:
value: '{color.owncast.user.7.value}' value: 'var(--color-owncast-user-7)'
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}'

48
web/style-definitions/tokens/color/owncast-admin.yaml
View File

@ -1,28 +1,28 @@
# Values used in the admin and should be migrated to variables or removed. # Values used in the admin and should be migrated to variables or removed.
# See ant-overrides.scss. # See ant-overrides.scss.
owncast-purple: # owncast-purple:
value: '{color.unknown.value}' # value: '{color.unknown.value}'
owncast-purple-25: owncast-purple-25:
value: 'rgba(120, 113, 255, 0.25)' value: 'rgba(120, 113, 255, 0.25)'
owncast-purple-50: # owncast-purple-50:
value: 'rgba(120, 113, 255, 0.5)' # value: 'rgba(120, 113, 255, 0.5)'
online-color: # online-color:
value: '#73dd3f' # value: '#73dd3f'
offline-color: # offline-color:
value: '#999' # value: '#999'
pink: # pink:
value: '{color.unknown.value}' # value: '{color.unknown.value}'
purple: # purple:
value: '{color.unknown-2.value}' # value: '{color.unknown-2.value}'
blue: # blue:
value: '{color.unknown.value}' # value: '{color.unknown.value}'
white-88: # white-88:
value: '{color.unknown-2.value}' # value: '{color.unknown-2.value}'
purple-dark: # purple-dark:
value: '{color.unknown.value}' # value: '{color.unknown.value}'
default-link-color: # default-link-color:
value: '{color.owncast.text.bright.value}' # value: '{color.owncast.text.bright.value}'
default-bg-color: # default-bg-color:
value: '{color.owncast.background.primary.value}' # value: '{color.owncast.background.primary.value}'
default-text-color: # default-text-color:
value: '{color.owncast.text.primary.value}' # value: '{color.owncast.text.primary.value}'

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

@ -1,9 +1,12 @@
# These are colors that make up the Owncast-specific color palette. # These are colors that make up the Owncast-specific color palette.
color: color:
unknown: unknown:
value: '#00FF00' value: '#7a5cf3'
# this ends up being primary button text
unknown-2: unknown-2:
value: '#FF0000' value: '#fffffe'
owncast: owncast:
# These are the colors assigned to chat users. # These are the colors assigned to chat users.
# If you add more colors here make sure to add them to # If you add more colors here make sure to add them to
@ -27,25 +30,55 @@ color:
7: 7:
value: 'rgb(244, 11, 244)' value: 'rgb(244, 11, 244)'
text: palette:
primary: 0:
value: '#030208' value: '#12161d'
secondary: comment: 'Dark primary'
value: '#63638E' 1:
highlight: value: '#2D3748'
value: '#030208' comment: 'Dark secondary'
bright: 2:
value: '#5353A6' value: '#000000'
background: comment: 'Dark alternate'
highlight: 3:
value: '#F0E678' value: '#e2e8f0'
primary: comment: 'Light primary'
value: '#FFFCF2' 4:
secondary: value: '#ffffff'
value: '#F0EFE4' comment: 'Light secondary'
5:
rounded-corners: value: '#c3dafe'
value: '0.5em' 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: font:
owncast: owncast:

120
web/styles/ant-overrides.scss
View File

@ -4,36 +4,65 @@
.ant-btn { .ant-btn {
height: 2rem; height: 2rem;
padding: 0.3rem 1rem;
background-color: var(--theme-unknown);
font-size: 0.85rem; font-size: 0.85rem;
font-weight: bold; font-weight: bold;
border-width: 2px;
border-radius: var(--theme-rounded-corners); border-radius: var(--theme-rounded-corners);
border-color: transparent; color: var(--theme-color-components-primary-button-text);
color: var(--theme-unknown-2); border-color: var(--theme-color-action);
&:hover, &:hover,
&:focus { &:focus {
background-color: var(--theme-primary); border-color: var(--theme-color-action-hover);
border-color: transparent; color: var(--theme-color-action-hover);
color: var(--theme-unknown-2); background-color: var(--theme-color-components-secondary-button-background);
} }
&:focus { &:focus {
border-color: var(--theme-unknown-2); border-color: var(--theme-color-components-secondary-button-text);
} }
&[ant-click-animating-without-extra-node]:after { &[ant-click-animating-without-extra-node]:after {
animation: 0s !important; animation: 0s !important;
} }
} }
.ant-btn[disabled] {
background-color: var(--theme-color-components-secondary-button-background-disabled);
color: var(--theme-color-components-secondary-button-text-disabled);
border-color: var(--theme-color-components-secondary-button-border-disabled);
&:hover,
&:focus {
background-color: var(--theme-color-components-secondary-button-background-disabled);
color: var(--theme-color-components-secondary-button-text-disabled);
border-color: var(--theme-color-components-secondary-button-border-disabled);
}
}
.ant-btn-primary { .ant-btn-primary {
background-color: var(--theme-unknown); background-color: var(--theme-color-components-primary-button-background);
color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-components-primary-button-background);
&:hover {
background-color: var(--theme-color-action-hover);
color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-action-hover);
}
&:focus {
background-color: var(--theme-color-action-hover);
color: var(--theme-color-components-primary-button-text);
border-color: var(--theme-color-components-primary-button-text);
}
} }
.ant-btn-primary[disabled] { .ant-btn-primary[disabled] {
background-color: var(--theme-unknown); background-color: var(--theme-color-components-primary-button-background-disabled);
color: var(--theme-unknown-2); border-color: var(--theme-color-components-primary-button-border-disabled);
&:hover { color: var(--theme-color-components-primary-button-text-disabled);
background-color: var(--theme-unknown); &:hover,
&:focus {
background-color: var(--theme-color-components-primary-button-background-disabled);
border-color: var(--theme-color-components-primary-button-border-disabled);
color: var(--theme-color-components-primary-button-text-disabled);
} }
} }
@ -52,5 +81,68 @@
.ant-dropdown-menu { .ant-dropdown-menu {
border-radius: var(--theme-rounded-corners); border-radius: var(--theme-rounded-corners);
background-color: var(--theme-background-secondary); background-color: var(--theme-color-components-menu-background);
}
.ant-dropdown-menu-item {
color: var(--theme-color-components-menu-item-text);
&:hover {
background-color: var(--theme-color-components-menu-item-hover-bg);
}
&:focus {
background-color: var(--theme-color-components-menu-item-focus-bg);
}
}
.ant-modal-header {
color: var(--theme-color-components-modal-header-text);
}
.ant-modal-title {
color: var(--theme-color-components-modal-header-text);
}
.ant-modal {
color: var(--theme-color-components-text-on-light);
h1 {
color: var(--theme-color-components-text-on-light);
}
}
.ant-input {
background-color: var(--theme-color-components-form-field-background);
color: var(--theme-color-components-form-field-text);
border-color: var(--theme-color-components-form-field-border);
&::placeholder {
color: var(--theme-color-components-form-field-placeholder);
}
}
.ant-alert-error {
.ant-alert-icon {
color: var(--theme-color-palette-error);
}
.ant-alert-message {
color: var(--theme-color-palette-error);
}
}
.ant-tabs-tab {
padding: var(--content-padding);
background-color: transparent;
border-radius: var(--theme-rounded-corners) var(--theme-rounded-corners) 0 0;
font-weight: bold;
& + .ant-tabs-tab {
margin-left: var(--module-spacing);
}
&.ant-tabs-tab-active {
background-color: var(--theme-color-palette-4);
.ant-tabs-tab-btn {
color: var(--theme-color-action);
&:hover {
color: var(--theme-color-action-hover);
}
}
}
}
.ant-tabs-ink-bar {
background-color: var(--theme-color-action);
} }

25
web/styles/globals.scss
View File

@ -1,15 +1,26 @@
@import '@fontsource/open-sans/variable.css'; @import '@fontsource/open-sans/300.css';
@import '@fontsource/open-sans/400.css';
@import '@fontsource/open-sans/600.css';
@import '@fontsource/open-sans/800.css';
@import '@fontsource/poppins/400.css'; @import '@fontsource/poppins/400.css';
@import '@fontsource/poppins/600.css'; @import '@fontsource/poppins/600.css';
:root {
--content-padding: 12px;
--module-spacing: 12px; // margin size between lines of stuff, if needed
}
::selection {
background-color: var(--theme-color-palette-12);
}
body { body {
font-family: var(--theme-text-body-font-family); font-family: var(--theme-text-body-font-family);
font-size: 16px; font-size: 16px;
line-height: 1.5em; line-height: 1.5em;
margin: 0; margin: 0;
color: var(--theme-text-primary); background-color: var(--theme-color-background-main);
background-color: var(--theme-background-primary);
div, div,
h1, h1,
@ -20,7 +31,6 @@ body {
h6, h6,
p { p {
padding: 0; padding: 0;
color: var(--theme-text-primary);
} }
h1, h1,
@ -30,6 +40,7 @@ body {
h5, h5,
h6 { h6 {
font-family: var(--theme-text-display-font-family); font-family: var(--theme-text-display-font-family);
color: unset; // reset some colors from global.less file
} }
h1 { h1 {
@ -71,10 +82,10 @@ body {
} }
a { a {
color: var(--theme-text-link); color: var(--theme-color-action);
&:visited { &:hover {
color: var(--theme-text-primary); color: var(--theme-color-palette-12);
} }
} }

141
web/styles/theme.less
View File

@ -1,54 +1,85 @@
// Do not edit directly // Do not edit directly
// Generated on Tue, 16 Aug 2022 03:27:53 GMT // Generated on Tue, 30 Aug 2022 06:12:22 GMT
// //
// How to edit these values: // How to edit these values:
// Edit the corresponding token file under the style-definitions directory // Edit the corresponding token file under the style-definitions directory
// in the Owncast web project. // in the Owncast web project.
@text-color: var(--theme-text-primary); @link-color: var(--theme-color-action);
@text-color-secondary: var(--theme-text-secondary); @link-hover-color: var(--theme-color-action-hover);
@link-color: var(--theme-text-link); @modal-header-bg: var(--theme-color-components-modal-header-background);
@popover-background: var(--theme-background-secondary); @modal-content-bg: var(--theme-color-background-main);
@modal-content-bg: #ff0000; @alert-error-bg-color: var(--theme-color-palette-4);
@background-color-light: var(--theme-background-secondary); @alert-error-border-color: var(--theme-color-palette-error);
@layout-body-background: var(--theme-background-primary); @popover-background: var(--theme-color-components-menu-background);
@component-background: #00ff00; @theme-rounded-corners: 0.5rem; // How much corners are rounded in places in the UI.
@warning-color: #ff0000; @theme-unknown-1: green; // This should never be used and it means something is wrong.
@theme-unknown: #00ff00; @theme-unknown-2: red; // This should never be used and it means something is wrong.
@theme-unknown-2: #ff0000; @theme-color-users-0: var(--color-owncast-user-0);
@theme-primary: #00ff00; // The primary color of the application used for rendering controls. @theme-color-users-1: var(--color-owncast-user-1);
@theme-text-primary: #030208; // The color of the text in the application. @theme-color-users-2: var(--color-owncast-user-2);
@theme-text-secondary: #63638e; @theme-color-users-3: var(--color-owncast-user-3);
@theme-text-link: #5353a6; @theme-color-users-4: var(--color-owncast-user-4);
@theme-text-body-font-family: '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'; @theme-color-users-5: var(--color-owncast-user-5);
@theme-text-display-font-family: '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'; @theme-color-users-6: var(--color-owncast-user-6);
@theme-background-primary: #fffcf2; // The main background color of the page. @theme-color-users-7: var(--color-owncast-user-7);
@theme-background-secondary: #f0efe4; // A secondary background color used in sections and controls. @theme-color-palette-0: var(--color-owncast-palette-0); // Dark primary
@theme-rounded-corners: 0.5em; @theme-color-palette-1: var(--color-owncast-palette-1); // Dark secondary
@theme-user-colors-0: #f40b0b; @theme-color-palette-2: var(--color-owncast-palette-2); // Dark alternate
@theme-user-colors-1: #f4800b; @theme-color-palette-3: var(--color-owncast-palette-3); // Light primary
@theme-user-colors-2: #f4f40b; @theme-color-palette-4: var(--color-owncast-palette-4); // Light secondary
@theme-user-colors-3: #58f40b; @theme-color-palette-5: var(--color-owncast-palette-5); // Light alternate
@theme-user-colors-4: #0bf4f4; @theme-color-palette-6: var(--color-owncast-palette-6); // Text link/secondary light text
@theme-user-colors-5: #0ba6f4; @theme-color-palette-7: var(--color-owncast-palette-7); // Text link hover
@theme-user-colors-6: #6666ff; @theme-color-palette-8: var(--color-owncast-palette-8); // Disabled background
@theme-user-colors-7: #f40bf4; @theme-color-palette-9: var(--color-owncast-palette-9); // Neutral dark
@owncast-purple: #00ff00; @theme-color-palette-10: var(--color-owncast-palette-10); // Neutral gray light
@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-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-header: var(--theme-color-palette-0); // Dark primary
@theme-color-action: var(--theme-color-palette-6); // Text link/secondary light text
@theme-color-action-hover: var(--theme-color-palette-7); // Text link hover
@theme-color-action-disabled: var(--theme-color-palette-8); // Disabled background
@theme-color-error: var(--theme-color-palette-error); // Error
@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-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-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-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-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-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-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
@owncast-purple-25: rgba(120, 113, 255, 0.25); @owncast-purple-25: rgba(120, 113, 255, 0.25);
@owncast-purple-50: rgba(120, 113, 255, 0.5); @color-unknown: #7a5cf3;
@online-color: #73dd3f; @color-unknown-2: #fffffe;
@offline-color: #999;
@pink: #00ff00;
@purple: #ff0000;
@blue: #00ff00;
@white-88: #ff0000;
@purple-dark: #00ff00;
@default-link-color: #5353a6;
@default-bg-color: #fffcf2;
@default-text-color: #030208;
@color-unknown: #00ff00;
@color-unknown-2: #ff0000;
@color-owncast-user-0: #f40b0b; @color-owncast-user-0: #f40b0b;
@color-owncast-user-1: #f4800b; @color-owncast-user-1: #f4800b;
@color-owncast-user-2: #f4f40b; @color-owncast-user-2: #f4f40b;
@ -57,13 +88,21 @@
@color-owncast-user-5: #0ba6f4; @color-owncast-user-5: #0ba6f4;
@color-owncast-user-6: #6666ff; @color-owncast-user-6: #6666ff;
@color-owncast-user-7: #f40bf4; @color-owncast-user-7: #f40bf4;
@color-owncast-text-primary: #030208; @color-owncast-palette-0: #12161d; // Dark primary
@color-owncast-text-secondary: #63638e; @color-owncast-palette-1: #2d3748; // Dark secondary
@color-owncast-text-highlight: #030208; @color-owncast-palette-2: #000000; // Dark alternate
@color-owncast-text-bright: #5353a6; @color-owncast-palette-3: #e2e8f0; // Light primary
@color-owncast-background-highlight: #f0e678; @color-owncast-palette-4: #ffffff; // Light secondary
@color-owncast-background-primary: #fffcf2; @color-owncast-palette-5: #c3dafe; // Light alternate
@color-owncast-background-secondary: #f0efe4; @color-owncast-palette-6: #7a5cf3; // Text link/secondary light text
@rounded-corners: 0.5em; @color-owncast-palette-7: #5d38f3; // Text link hover
@color-owncast-palette-8: #b6b3c6; // Disabled background
@color-owncast-palette-9: #39373d; // Neutral dark
@color-owncast-palette-10: #707283; // Neutral gray light
@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-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-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-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';

173
web/styles/variables.css
View File

@ -1,6 +1,6 @@
/** /**
* Do not edit directly * Do not edit directly
* Generated on Tue, 16 Aug 2022 03:27:53 GMT * Generated on Tue, 30 Aug 2022 06:12:22 GMT
* *
* How to edit these values: * How to edit these values:
* Edit the corresponding token file under the style-definitions directory * Edit the corresponding token file under the style-definitions directory
@ -8,53 +8,108 @@
*/ */
:root { :root {
--text-color: var(--theme-text-primary); --link-color: var(--theme-color-action);
--text-color-secondary: var(--theme-text-secondary); --link-hover-color: var(--theme-color-action-hover);
--link-color: var(--theme-text-link); --modal-header-bg: var(--theme-color-components-modal-header-background);
--popover-background: var(--theme-background-secondary); --modal-content-bg: var(--theme-color-background-main);
--modal-content-bg: #ff0000; --alert-error-bg-color: var(--theme-color-palette-4);
--background-color-light: var(--theme-background-secondary); --alert-error-border-color: var(--theme-color-palette-error);
--layout-body-background: var(--theme-background-primary); --popover-background: var(--theme-color-components-menu-background);
--component-background: #00ff00; --theme-rounded-corners: 0.5rem; /* How much corners are rounded in places in the UI. */
--warning-color: #ff0000; --theme-unknown-1: green; /* This should never be used and it means something is wrong. */
--theme-unknown: #00ff00; --theme-unknown-2: red; /* This should never be used and it means something is wrong. */
--theme-unknown-2: #ff0000; --theme-color-users-0: var(--color-owncast-user-0);
--theme-primary: #00ff00; /* The primary color of the application used for rendering controls. */ --theme-color-users-1: var(--color-owncast-user-1);
--theme-text-primary: #030208; /* The color of the text in the application. */ --theme-color-users-2: var(--color-owncast-user-2);
--theme-text-secondary: #63638e; --theme-color-users-3: var(--color-owncast-user-3);
--theme-text-link: #5353a6; --theme-color-users-4: var(--color-owncast-user-4);
--theme-text-body-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, --theme-color-users-5: var(--color-owncast-user-5);
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', --theme-color-users-6: var(--color-owncast-user-6);
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --theme-color-users-7: var(--color-owncast-user-7);
--theme-text-display-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, --theme-color-palette-0: var(--color-owncast-palette-0); /* Dark primary */
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', --theme-color-palette-1: var(--color-owncast-palette-1); /* Dark secondary */
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --theme-color-palette-2: var(--color-owncast-palette-2); /* Dark alternate */
--theme-background-primary: #fffcf2; /* The main background color of the page. */ --theme-color-palette-3: var(--color-owncast-palette-3); /* Light primary */
--theme-background-secondary: #f0efe4; /* A secondary background color used in sections and controls. */ --theme-color-palette-4: var(--color-owncast-palette-4); /* Light secondary */
--theme-rounded-corners: 0.5em; --theme-color-palette-5: var(--color-owncast-palette-5); /* Light alternate */
--theme-user-colors-0: #f40b0b; --theme-color-palette-6: var(--color-owncast-palette-6); /* Text link/secondary light text */
--theme-user-colors-1: #f4800b; --theme-color-palette-7: var(--color-owncast-palette-7); /* Text link hover */
--theme-user-colors-2: #f4f40b; --theme-color-palette-8: var(--color-owncast-palette-8); /* Disabled background */
--theme-user-colors-3: #58f40b; --theme-color-palette-9: var(--color-owncast-palette-9); /* Neutral dark */
--theme-user-colors-4: #0bf4f4; --theme-color-palette-10: var(--color-owncast-palette-10); /* Neutral gray light */
--theme-user-colors-5: #0ba6f4; --theme-color-palette-11: var(--color-owncast-palette-11); /* Fun color 1 */
--theme-user-colors-6: #6666ff; --theme-color-palette-12: var(--color-owncast-palette-12); /* Fun color 2 */
--theme-user-colors-7: #f40bf4; --theme-color-palette-13: var(--color-owncast-palette-13); /* Fun color 3 */
--owncast-purple: #00ff00; --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-header: var(--theme-color-palette-0); /* Dark primary */
--theme-color-action: var(--theme-color-palette-6); /* Text link/secondary light text */
--theme-color-action-hover: var(--theme-color-palette-7); /* Text link hover */
--theme-color-action-disabled: var(--theme-color-palette-8); /* Disabled background */
--theme-color-error: var(--theme-color-palette-error); /* Error */
--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-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-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-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-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-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-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 */
--owncast-purple-25: rgba(120, 113, 255, 0.25); --owncast-purple-25: rgba(120, 113, 255, 0.25);
--owncast-purple-50: rgba(120, 113, 255, 0.5); --color-unknown: #7a5cf3;
--online-color: #73dd3f; --color-unknown-2: #fffffe;
--offline-color: #999;
--pink: #00ff00;
--purple: #ff0000;
--blue: #00ff00;
--white-88: #ff0000;
--purple-dark: #00ff00;
--default-link-color: #5353a6;
--default-bg-color: #fffcf2;
--default-text-color: #030208;
--color-unknown: #00ff00;
--color-unknown-2: #ff0000;
--color-owncast-user-0: #f40b0b; --color-owncast-user-0: #f40b0b;
--color-owncast-user-1: #f4800b; --color-owncast-user-1: #f4800b;
--color-owncast-user-2: #f4f40b; --color-owncast-user-2: #f4f40b;
@ -63,14 +118,22 @@
--color-owncast-user-5: #0ba6f4; --color-owncast-user-5: #0ba6f4;
--color-owncast-user-6: #6666ff; --color-owncast-user-6: #6666ff;
--color-owncast-user-7: #f40bf4; --color-owncast-user-7: #f40bf4;
--color-owncast-text-primary: #030208; --color-owncast-palette-0: #12161d; /* Dark primary */
--color-owncast-text-secondary: #63638e; --color-owncast-palette-1: #2d3748; /* Dark secondary */
--color-owncast-text-highlight: #030208; --color-owncast-palette-2: #000000; /* Dark alternate */
--color-owncast-text-bright: #5353a6; --color-owncast-palette-3: #e2e8f0; /* Light primary */
--color-owncast-background-highlight: #f0e678; --color-owncast-palette-4: #ffffff; /* Light secondary */
--color-owncast-background-primary: #fffcf2; --color-owncast-palette-5: #c3dafe; /* Light alternate */
--color-owncast-background-secondary: #f0efe4; --color-owncast-palette-6: #7a5cf3; /* Text link/secondary light text */
--rounded-corners: 0.5em; --color-owncast-palette-7: #5d38f3; /* Text link hover */
--color-owncast-palette-8: #b6b3c6; /* Disabled background */
--color-owncast-palette-9: #39373d; /* Neutral dark */
--color-owncast-palette-10: #707283; /* Neutral gray light */
--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-error: #ff4b39; /* Error */
--color-owncast-palette-warning: #ffc655; /* Warning */
--font-owncast-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, --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', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji'; 'Segoe UI Symbol', 'Noto Color Emoji';

18
web/styles/variables.scss
View File

@ -1,5 +1,5 @@
@import "@fontsource/open-sans"; @import '@fontsource/open-sans';
@import "@fontsource/poppins"; @import '@fontsource/poppins';
// See theme.less for specific Ant Design overrides. // See theme.less for specific Ant Design overrides.
:root { :root {
@ -75,21 +75,7 @@
--container-bg-color-alt: var(--purple-dark); --container-bg-color-alt: var(--purple-dark);
--container-border-radius: 4px; --container-border-radius: 4px;
--code-color: #9cdcfe;
--code-bg-color: var(--owncast-purple-25);
--nav-bg-color: var(--gray-dark); --nav-bg-color: var(--gray-dark);
--nav-text: #aaa;
--nav-selected-text: var(--pink); //#cd7cff;
--button-focused: var(--owncast-purple-50);
--textfield-border: var(--white-25); --textfield-border: var(--white-25);
--textfield-bg: var(--black);
//
--popover-base-color: var(--gray);
--tooltip-base-color: var(--gray-medium);
--font-family: var(--theme-font-family);
} }