mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-25 14:20:54 +03:00
Code Issues Projects Releases Packages Wiki Activity

Split up design/style pages

Browse source
This commit is contained in:
Gabe Kangas 2022-05-12 14:45:56 -07:00
parent 6ad88b2e28
commit f1e3adbec5
No known key found for this signature in database
GPG key ID: 9A56337728BC81EA
4 changed files with 63 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/stories/BrowserNotifyModal.stories.tsx
View file

@ -1,16 +1,15 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import BrowserNotifyModal from '../components/modals/BrowserNotifyModal';
import AuthModal from '../components/modals/AuthModal';
const Example = () => (
<div>
<AuthModal />
<BrowserNotifyModal />
</div>
);
export default {
title: 'owncast/Modals/Browser Push Notifications',
title: 'owncast/Modals/Browser Notifications',
component: BrowserNotifyModal,
parameters: {},
} as ComponentMeta<typeof BrowserNotifyModal>;

59
web/stories/StyleGuide.stories.mdx → web/stories/Colors.stories.mdx
View file

@ -1,51 +1,10 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Color, ColorRow } from './Color';
import { Image, ImageRow } from './ImageAsset';
import Logo from '../assets/images/logo.svg';
import FediverseColor from '../assets/images/fediverse-color.png';
import FediverseBlack from '../assets/images/fediverse-black.png';
import Moderator from '../assets/images/moderator.svg';
import IndieAuth from '../assets/images/indieauth.png';
import IsBot from '../assets/images/bot.svg';
<Meta title="owncast/Style Guide" />
<style>{`
`}</style>
export const images = [
{
src: Logo,
name: 'Logo',
},
{
src: FediverseColor,
name: 'Fediverse Color',
},
{
src: FediverseBlack,
name: 'Fediverse Black',
},
{
src: Moderator,
name: 'Moderator',
},
{
src: IndieAuth,
name: 'IndieAuth',
},
{
src: IsBot,
name: 'Bot Flag',
},
];
<Meta title="owncast/Style Guide/Colors" />
# Colors
<Story name="Colors"></Story>
<ColorRow colors={['theme-primary-color', 'theme-text-color-secondary']} />
@ -110,19 +69,3 @@ export const images = [
'color-owncast-orange-900',
]}
/>
# Font
[Inter font](https://rsms.me/inter/)
<Story name="Fonts">
<Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
{getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
</Canvas>
</Story>
# Images
<Story name="Images and Icons"></Story>
<ImageRow images={images} />

49
web/stories/Images.stories.mdx Normal file
View file

@ -0,0 +1,49 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
import Logo from '../assets/images/logo.svg';
import FediverseColor from '../assets/images/fediverse-color.png';
import FediverseBlack from '../assets/images/fediverse-black.png';
import Moderator from '../assets/images/moderator.svg';
import IndieAuth from '../assets/images/indieauth.png';
import IsBot from '../assets/images/bot.svg';
<Meta title="owncast/Style Guide/Images+Icons" />
export const images = [
{
src: Logo,
name: 'Logo',
},
];
# Images
<ImageRow images={images} />
## App Icons
export const icons = [
{
src: FediverseColor,
name: 'Fediverse Color',
},
{
src: FediverseBlack,
name: 'Fediverse Black',
},
{
src: Moderator,
name: 'Moderator',
},
{
src: IndieAuth,
name: 'IndieAuth',
},
{
src: IsBot,
name: 'Bot Flag',
},
];
<ImageRow images={icons} />

11
web/stories/Typography.stories.mdx Normal file
View file

@ -0,0 +1,11 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta title="owncast/Style Guide/Typography" />
# Font
[Inter font](https://rsms.me/inter/)
<Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
{getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
</Canvas>