150 lines
3.9 KiB
Svelte
150 lines
3.9 KiB
Svelte
<script module lang="ts">
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import Theme, { themes } from './Theme.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Components/Theming/Theme',
|
|
component: Theme,
|
|
argTypes: {
|
|
base: {
|
|
control: 'select',
|
|
options: ['light', 'dark'],
|
|
},
|
|
theme: {
|
|
control: { expanded: true },
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import ThemedPage from './demo/ThemedPage.svelte';
|
|
import SiteHeader from '../SiteHeader/SiteHeader.svelte';
|
|
import Headline from './../Headline/Headline.svelte';
|
|
import BodyText from '../BodyText/BodyText.svelte';
|
|
</script>
|
|
|
|
<Story name="Demo">
|
|
<div class="reset-article">
|
|
<Theme theme={themes.light} base="light">
|
|
<ThemedPage />
|
|
</Theme>
|
|
</div>
|
|
</Story>
|
|
|
|
<Story name="Custom theme" exportName="CustomTheme">
|
|
<Theme
|
|
base="dark"
|
|
theme={{
|
|
colour: { accent: 'var(--tr-light-orange)' },
|
|
font: { family: { hed: '"Newsreader Text", serif' } },
|
|
}}
|
|
>
|
|
<ThemedPage />
|
|
</Theme>
|
|
</Story>
|
|
|
|
<Story name="Custom font" exportName="CustomFont">
|
|
<Theme
|
|
base="light"
|
|
theme={{
|
|
font: { family: { hed: 'Indie Flower', body: 'Indie Flower' } },
|
|
}}
|
|
>
|
|
<div class="gfont">
|
|
<Headline
|
|
hed={'Reuters Graphics Interactive'}
|
|
dek={'The beginning of a beautiful page'}
|
|
section={'Global news'}
|
|
/>
|
|
<BodyText
|
|
text={'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'}
|
|
/>
|
|
</div>
|
|
</Theme>
|
|
</Story>
|
|
|
|
<Story name="Background patterns" exportName="BackgroundPatterns">
|
|
<div id="pattern-bg">
|
|
<Theme
|
|
base="dark"
|
|
theme={{
|
|
colour: { background: 'transparent' },
|
|
}}
|
|
>
|
|
<SiteHeader />
|
|
<Headline
|
|
hed={'Reuters Graphics Interactive'}
|
|
dek={'The beginning of a beautiful page'}
|
|
section={'Global news'}
|
|
/>
|
|
<BodyText
|
|
text={'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'}
|
|
/>
|
|
</Theme>
|
|
</div>
|
|
</Story>
|
|
|
|
<Story name="Inheritance" tags={['!autodocs', '!dev']}>
|
|
<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: '"Newsreader Text", 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=Indie+Flower&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>
|