Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use built-in storybook color components and render as docs instead of story

Browse Source
This commit is contained in:
Gabe Kangas 2023-02-13 19:01:27 -08:00
parent 42ebdc4213
commit 4226e66286
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
7 changed files with 253 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/.storybook/preview.js
View File

@ -13,6 +13,8 @@ export const parameters = {
docs: {
container: DocsContainer,
},
actions: { argTypesRegex: '^on[A-Z].*' },
viewMode: 'docs',
controls: {
matchers: {
color: /(background|color)$/i,

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

@ -1,132 +0,0 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { ColorRow } from './Color';
<Meta title="owncast/Styles/Colors" parameters={{ chromatic: { disableSnapshot: true } }} />
# Default theme colors
These colors are assigned in our [color token](https://github.com/owncast/owncast/tree/develop/web/style-definitions/tokens/color) files
and get reflected here as they change. run `npm run build-styles` to regenerate.
<Story name="Default Theme">
## Default Theme
These color names are assigned to specific component variables. They can be overwritten via CSS.
<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-15',
'theme-color-palette-error',
'theme-color-palette-warning',
'theme-color-background-main',
'theme-color-background-light',
'theme-color-background-header',
'theme-color-action',
'theme-color-action-hover',
'theme-color-action-disabled',
]}
/>
</Story>
<Story
name="Frontend Components"
>
## Component Colors
<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-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',
'theme-color-components-video-status-bar-background',
'theme-color-components-video-status-bar-foreground',
]}
/>
</Story>
<Story
name="Owncast Color Palette"
>
## 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',
'color-owncast-palette-15',
]}
/>
</Story>
<Story
name="User Chat Colors"
>
## User Colors
<ColorRow
colors={[
'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',
]}
/>
</Story>

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

@ -1,6 +1,12 @@
import { Canvas, Meta, Story, Typeset, Source } from '@storybook/addon-docs';
<Meta title="owncast/Styles/Typography" />
<Meta
title="owncast/Styles/Typography"
parameters={{
previewTabs: { canvas: { hidden: true } },
chromatic: { disableSnapshot: true },
}}
/>
export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';

6
web/.storybook/stories-category-doc-pages/Color.tsx → web/.storybook/stories-category-doc-pages/colors/Color.tsx
View File

@ -81,3 +81,9 @@ export const ColorRow = props => {
ColorRow.propTypes = {
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
};
export const getColor = color => {
const colorValue = getComputedStyle(document.documentElement).getPropertyValue(`--${color}`);
return { [color]: colorValue };
// return { [color]: colorValue };
};

110
web/.storybook/stories-category-doc-pages/colors/ComponentColors.stories.mdx Normal file
View File

@ -0,0 +1,110 @@
import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
import { ColorRow, getColor } from './Color';
<Meta
title="owncast/Styles/Colors/Components"
parameters={{
previewTabs: { canvas: { hidden: true } },
chromatic: { disableSnapshot: true },
}}
/>
<Description markdown={`
## Component Colors
These are the specific colors used for components in the web application. They point to colors in the Owncast color palette but CSS variable names can be overwritten for customizing the theme.
`}/>
<ColorPalette>
<ColorItem
title="Text"
subtitle=""
colors={{
...getColor('theme-color-components-text-on-light'),
...getColor('theme-color-components-text-on-dark'),
}}
/>
<ColorItem
title="Primary Button"
subtitle=""
colors={{
...getColor('theme-color-components-primary-button-background'),
...getColor('theme-color-components-primary-button-background-disabled'),
...getColor('theme-color-components-primary-button-text'),
...getColor('theme-color-components-primary-button-text-disabled'),
...getColor('theme-color-components-primary-button-border')
}}
/>
<ColorItem
title="Secondary Button"
subtitle=""
colors={{
...getColor('theme-color-components-secondary-button-background'),
...getColor('theme-color-components-secondary-button-background-disabled'),
...getColor('theme-color-components-secondary-button-text'),
...getColor('theme-color-components-secondary-button-text-disabled'),
...getColor('theme-color-components-secondary-button-border'),
}}
/>
<ColorItem
title="Chat"
subtitle=""
colors={{
...getColor('theme-color-components-chat-background'),
...getColor('theme-color-components-chat-text'),
}}
/>
<ColorItem
title="Modals"
subtitle=""
colors={{
...getColor('theme-color-components-modal-header-background'),
...getColor('theme-color-components-modal-header-text'),
...getColor('theme-color-components-modal-content-background'),
...getColor('theme-color-components-modal-content-text'),
}}
/>
<ColorItem
title="Page Content"
subtitle="Tabbed content"
colors={{
...getColor('theme-color-components-content-background'),
}}
/>
<ColorItem
title="Menus"
subtitle=""
colors={{
...getColor('theme-color-components-menu-background'),
...getColor('theme-color-components-menu-item-text'),
...getColor('theme-color-components-menu-item-bg'),
...getColor('theme-color-components-menu-item-text'),
...getColor('theme-color-components-menu-item-hover-bg'),
...getColor('theme-color-components-menu-item-focus-bg'),
}}
/>
<ColorItem
title="Form Fields"
subtitle=""
colors={{
...getColor('theme-color-components-form-field-background'),
...getColor('theme-color-components-form-field-placeholder'),
...getColor('theme-color-components-form-field-text'),
...getColor('theme-color-components-menu-item-text'),
...getColor('theme-color-components-form-field-border'),
}}
/>
<ColorItem
title="Video Player Status Bar"
subtitle="Displays duration and viewer count."
colors={{
...getColor('theme-color-components-video-status-bar-background'),
...getColor('theme-color-components-video-status-bar-foreground'),
}}
/>
</ColorPalette>

64
web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.stories.mdx Normal file
View File

@ -0,0 +1,64 @@
import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
import { ColorRow, getColor } from './Color';
<Meta
title="owncast/Styles/Colors/Palette"
parameters={{
previewTabs: { canvas: { hidden: true } },
chromatic: { disableSnapshot: true },
}}
/>
<Description markdown={`
## Theme Color Palette
These are the colors used across the web application. All the specific component colors point to colors in this palette. If you override one of these colors all usage of that color will be updated.
`}/>
<ColorPalette>
<ColorItem
title="Theme color palette"
subtitle="Colors used across the theme."
colors={{
...getColor('theme-color-palette-0'),
...getColor('theme-color-palette-1'),
...getColor('theme-color-palette-2'),
...getColor('theme-color-palette-3'),
...getColor('theme-color-palette-4'),
...getColor('theme-color-palette-5'),
}}
/>
<ColorItem
colors={{
...getColor('theme-color-palette-6'),
...getColor('theme-color-palette-7'),
...getColor('theme-color-palette-8'),
...getColor('theme-color-palette-9'),
...getColor('theme-color-palette-10'),
...getColor('theme-color-palette-11'),
}}
/>
<ColorItem
colors={{
...getColor('theme-color-palette-12'),
...getColor('theme-color-palette-13'),
...getColor('theme-color-palette-14'),
...getColor('theme-color-palette-15'),
...getColor('theme-color-palette-error'),
...getColor('theme-color-palette-warning'),
}}
/>
<ColorItem
colors={{
...getColor('theme-color-background-light'),
...getColor('theme-color-background-header'),
...getColor('theme-color-action'),
...getColor('theme-color-action-hover'),
...getColor('theme-color-action-disabled'),
}}
/>
</ColorPalette>

64
web/.storybook/stories-category-doc-pages/colors/UserColors.stories.mdx Normal file
View File

@ -0,0 +1,64 @@
import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
import { ColorRow, getColor } from './Color';
<Meta
title="owncast/Styles/Colors/Users"
parameters={{
previewTabs: { canvas: { hidden: true } },
chromatic: { disableSnapshot: true },
}}
/>
<Description markdown={`
## User Colors
These are the colors available for assigning to chat users for display purposes. The CSS variables can be overwritten for customizing the theme.
`}/>
<ColorPalette>
<ColorItem title="User Color 0" colors={{ ...getColor('theme-color-users-0') }} />
<ColorItem
title="User Color 1"
colors={{
...getColor('theme-color-users-1'),
}}
/>
<ColorItem
title="User Color 2"
colors={{
...getColor('theme-color-users-2'),
}}
/>
<ColorItem
title="User Color 3"
colors={{
...getColor('theme-color-users-3'),
}}
/>
<ColorItem
title="User Color 4"
colors={{
...getColor('theme-color-users-4'),
}}
/>
<ColorItem
title="User Color 5"
colors={{
...getColor('theme-color-users-5'),
}}
/>
<ColorItem
title="User Color 6"
colors={{
...getColor('theme-color-users-6'),
}}
/>
<ColorItem
title="User Color 7"
colors={{
...getColor('theme-color-users-7'),
}}
/>
</ColorPalette>