LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Organize colors

Browse Source
This commit is contained in:
Gabe Kangas 2023-01-27 15:35:47 -08:00
parent d19cf3d1a3
commit 212a12b4ef
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/.storybook/stories-category-doc-pages/Colors.stories.mdx
View File

@ -1,13 +1,16 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { ColorRow } from './Color'; import { ColorRow } from './Color';
<Meta title="owncast/Style Guide/Default Theme" /> <Meta title="owncast/Styles/Colors" />
# 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 run build-styles` to regenerate. and get reflected here as they change. run `npm run build-styles` to regenerate.
<Story
name="Default Theme"
>
## Default Theme ## Default Theme
These color names are assigned to specific component variables. They can be overwritten via CSS. These color names are assigned to specific component variables. They can be overwritten via CSS.
@ -39,7 +42,11 @@ These color names are assigned to specific component variables. They can be over
'theme-color-action-disabled', 'theme-color-action-disabled',
]} ]}
/> />
</Story>
<Story
name="Frontend Components"
>
## Component Colors ## Component Colors
<ColorRow <ColorRow
@ -76,7 +83,11 @@ These color names are assigned to specific component variables. They can be over
'theme-color-components-video-status-bar-foreground', 'theme-color-components-video-status-bar-foreground',
]} ]}
/> />
</Story>
<Story
name="Owncast Color Palette"
>
## Default Palette ## Default Palette
These are the core colors for the default, out of the box, Owncast web application theme. These are the core colors for the default, out of the box, Owncast web application theme.
@ -100,7 +111,11 @@ They should not be overwritten, instead the theme variables should be overwritte
'color-owncast-palette-15', 'color-owncast-palette-15',
]} ]}
/> />
</Story>
<Story
name="User Chat Colors"
>
## User Colors ## User Colors
<ColorRow <ColorRow
@ -115,3 +130,4 @@ They should not be overwritten, instead the theme variables should be overwritte
'theme-color-users-7', 'theme-color-users-7',
]} ]}
/> />
</Story>

2
web/.storybook/stories-category-doc-pages/Typography.stories.mdx
View File

@ -1,6 +1,6 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta title="owncast/Style Guide/Typography" /> <Meta title="owncast/Styles/Typography" />
## Body ## Body