114 lines
2.5 KiB
Svelte
114 lines
2.5 KiB
Svelte
<script>
|
|
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
|
|
|
// @ts-ignore
|
|
import componentDocs from './stories/docs/component.md?raw';
|
|
// @ts-ignore
|
|
import customiseDocs from './stories/docs/customise.md?raw';
|
|
// @ts-ignore
|
|
import inheritanceDocs from './stories/docs/inheritance.md?raw';
|
|
|
|
import ThemedPage from './stories/ThemedPage.svelte';
|
|
|
|
import Theme, { themes } from './Theme.svelte';
|
|
|
|
import {
|
|
withComponentDocs,
|
|
withStoryDocs,
|
|
} from '$lib/docs/utils/withParams.js';
|
|
|
|
const meta = {
|
|
title: 'Theming/Theme',
|
|
component: Theme,
|
|
...withComponentDocs(componentDocs),
|
|
argTypes: {
|
|
base: {
|
|
control: 'select',
|
|
options: ['light', 'dark'],
|
|
},
|
|
themes: { control: false },
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<Meta {...meta} />
|
|
|
|
<Template let:args>
|
|
<div class="reset-article">
|
|
<Theme {...args}>
|
|
<ThemedPage />
|
|
</Theme>
|
|
</div>
|
|
</Template>
|
|
|
|
<Story
|
|
name="Default"
|
|
args="{{
|
|
theme: themes.light,
|
|
base: 'light',
|
|
}}"
|
|
/>
|
|
|
|
<Story name="Custom theme" {...withStoryDocs(customiseDocs)}>
|
|
<Theme
|
|
base="dark"
|
|
theme="{{
|
|
colour: { accent: 'yellow' },
|
|
font: { 'family-hed': 'freight-book' },
|
|
}}"
|
|
>
|
|
<ThemedPage />
|
|
</Theme>
|
|
</Story>
|
|
|
|
<Story name="Inheritance" {...withStoryDocs(inheritanceDocs)}>
|
|
<Theme theme="{themes.light}">
|
|
<div class="themed">
|
|
<p>Theme</p>
|
|
<Theme theme="{themes.dark}">
|
|
<div class="themed">
|
|
<p>Sub-theme</p>
|
|
<Theme theme="{themes.light}">
|
|
<div class="themed">
|
|
<p>Sub-sub</p>
|
|
</div>
|
|
</Theme>
|
|
<Theme
|
|
theme="{{
|
|
colour: { background: 'steelblue', 'text-primary': '#fff' },
|
|
font: { 'family-note': 'freight-book' },
|
|
}}"
|
|
base="dark"
|
|
>
|
|
<div class="themed">
|
|
<p>Sub-sub sibling</p>
|
|
</div>
|
|
</Theme>
|
|
</div>
|
|
</Theme>
|
|
</div>
|
|
</Theme>
|
|
</Story>
|
|
|
|
<style lang="scss">
|
|
@import '../../scss/fonts/mixins';
|
|
div.themed {
|
|
background-color: var(--theme-colour-background);
|
|
padding: 2rem;
|
|
width: 80%;
|
|
margin: 1rem auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-flow: column;
|
|
border: 1px solid var(--theme-colour-text-primary);
|
|
border-radius: 20px;
|
|
p {
|
|
font-family: var(--theme-font-family-note);
|
|
color: var(--theme-colour-text-primary);
|
|
text-align: center;
|
|
margin: 0;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|