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
@@ -1,3 +1,5 @@
|
||||
import he from 'date-fns/esm/locale/he/index.js';
|
||||
import { unset } from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export function Color(props) {
|
||||
@@ -35,8 +37,9 @@ export function Color(props) {
|
||||
const colorDescriptionStyle = {
|
||||
margin: '5px',
|
||||
color: 'gray',
|
||||
fontSize: '0.9vw',
|
||||
fontSize: '0.95vw',
|
||||
textAlign: 'center' as 'center',
|
||||
lineHeight: 1.0,
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,34 +1,111 @@
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
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
|
||||
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
|
||||
|
||||
<ColorRow
|
||||
colors={[
|
||||
'theme-user-colors-0',
|
||||
'theme-user-colors-1',
|
||||
'theme-user-colors-2',
|
||||
'theme-user-colors-3',
|
||||
'theme-user-colors-4',
|
||||
'theme-user-colors-5',
|
||||
'theme-user-colors-6',
|
||||
'theme-user-colors-7',
|
||||
'theme-color-users-0',
|
||||
'theme-color-users-1',
|
||||
'theme-color-users-2',
|
||||
'theme-color-users-3',
|
||||
'theme-color-users-4',
|
||||
'theme-color-users-5',
|
||||
'theme-color-users-6',
|
||||
'theme-color-users-7',
|
||||
]}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user