166 lines
4 KiB
Svelte
166 lines
4 KiB
Svelte
<script module lang="ts">
|
|
// @ts-ignore raw
|
|
import componentDocs from './stories/docs/component.md?raw';
|
|
// @ts-ignore raw
|
|
import customiseDocs from './stories/docs/customise.md?raw';
|
|
// @ts-ignore raw
|
|
import customiseFontDocs from './stories/docs/customise-font.md?raw';
|
|
// @ts-ignore raw
|
|
import patternDocs from './stories/docs/pattern.md?raw';
|
|
// @ts-ignore raw
|
|
import inheritanceDocs from './stories/docs/inheritance.md?raw';
|
|
|
|
import Theme, { themes } from './Theme.svelte';
|
|
|
|
import {
|
|
withComponentDocs,
|
|
withStoryDocs,
|
|
} from '../../docs/utils/withParams.js';
|
|
|
|
export const meta = {
|
|
title: 'Components/Theming/Theme',
|
|
component: Theme,
|
|
...withComponentDocs(componentDocs),
|
|
argTypes: {
|
|
base: {
|
|
control: 'select',
|
|
options: ['light', 'dark'],
|
|
},
|
|
themes: { control: false },
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { Template, Story } from '@storybook/addon-svelte-csf';
|
|
|
|
import ThemedPage from './stories/ThemedPage.svelte';
|
|
import SiteHeader from '../SiteHeader/SiteHeader.svelte';
|
|
|
|
import Headline from './../Headline/Headline.svelte';
|
|
</script>
|
|
|
|
<Template>
|
|
{#snippet children({ args })}
|
|
<div class="reset-article">
|
|
<Theme {...args}>
|
|
<ThemedPage />
|
|
</Theme>
|
|
</div>
|
|
{/snippet}
|
|
</Template>
|
|
|
|
<Story
|
|
name="Default"
|
|
args={{
|
|
theme: themes.light,
|
|
base: 'light',
|
|
}}
|
|
/>
|
|
|
|
<Story name="Custom theme" {...withStoryDocs(customiseDocs)}>
|
|
<Theme
|
|
base="dark"
|
|
theme={{
|
|
colour: { accent: 'var(--tr-light-orange)' },
|
|
font: { family: { hed: 'FreightText, serif' } },
|
|
}}
|
|
>
|
|
<ThemedPage />
|
|
</Theme>
|
|
</Story>
|
|
|
|
<Story name="Custom Google font" {...withStoryDocs(customiseFontDocs)}>
|
|
<Theme
|
|
base="light"
|
|
theme={{
|
|
font: { family: { hed: 'Bebas Neue, sans-serif' } },
|
|
}}
|
|
>
|
|
<div class="gfont">
|
|
<Headline
|
|
hed={'Reuters Graphics Interactive'}
|
|
dek={'The beginning of a beautiful page'}
|
|
section={'Global news'}
|
|
/>
|
|
</div>
|
|
</Theme>
|
|
</Story>
|
|
|
|
<Story name="Background patterns" {...withStoryDocs(patternDocs)}>
|
|
<div id="pattern-bg">
|
|
<Theme
|
|
base="dark"
|
|
theme={{
|
|
colour: { background: 'transparent' },
|
|
}}
|
|
>
|
|
<SiteHeader />
|
|
<ThemedPage />
|
|
</Theme>
|
|
</div>
|
|
</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: 'FreightText, serif' } },
|
|
}}
|
|
base="dark"
|
|
>
|
|
<div class="themed">
|
|
<p>Sub-sub sibling</p>
|
|
</div>
|
|
</Theme>
|
|
</div>
|
|
</Theme>
|
|
</div>
|
|
</Theme>
|
|
</Story>
|
|
|
|
<style lang="scss">
|
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
|
|
|
|
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%;
|
|
}
|
|
}
|
|
|
|
div#pattern-bg {
|
|
background-image: url(https://res.cloudinary.com/practicaldev/image/fetch/s--BuPz-p40--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nphrgz8yfnjylrwfr0yl.png);
|
|
|
|
:global(.nav-container .inner) {
|
|
background: #161019 !important;
|
|
}
|
|
:global(.nav-container .dropdown) {
|
|
background: #161019 !important;
|
|
}
|
|
}
|
|
</style>
|