starting themes

src/components/Theme/Theme.mdx

@@ -1,3 +1,11 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ThemeStories from './Theme.stories.svelte';
+
+<Meta of={ThemeStories} />
+
+# Theme
+
 The `Theme` component wraps your page content and uses [CSS variables](../?path=/docs/scss-css-variables--page) to set major colour and typography styles for your page. All of the components in this library will use those CSS variables for styling by default.
 
 Use our [theme builder](../?path=/docs/theming-theme-builder--docs) to customise your page's theme.
@@ -13,3 +21,5 @@ Use our [theme builder](../?path=/docs/theming-theme-builder--docs) to customise
 ```
 
 > For Graphics Kit users, the `Theme` is set for you in your graphics homepage (`pages/+page.svelte`). You can customise it there for the whole page.
+
+<Canvas of={ThemeStories.Demo} />

src/components/Theme/Theme.stories.svelte

@@ -1,99 +1,70 @@
 <script module lang="ts">
-  // @ts-ignore raw
+  import { defineMeta } from '@storybook/addon-svelte-csf';
-  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 {
+  const { Story } = defineMeta({
-    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 },
+      theme: { control: false },
     },
-  };
+  });
 </script>
 
 <script lang="ts">
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  import ThemedPage from './demo/ThemedPage.svelte';
-
-  import ThemedPage from './stories/ThemedPage.svelte';
   import SiteHeader from '../SiteHeader/SiteHeader.svelte';
 
   import Headline from './../Headline/Headline.svelte';
 </script>
 
-<Template >
+<Story name="Demo">
-  {#snippet children({ args })}
+  <div class="reset-article">
-    <div class="reset-article">
+    <Theme theme={themes.light} base="light">
-      <Theme {...args}>
+      <ThemedPage />
-        <ThemedPage />
+    </Theme>
-      </Theme>
+  </div>
-    </div>
+</Story>
-  {/snippet}
+<Story name="Custom theme">
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    theme: themes.light,
-    base: 'light',
-  }}"
-/>
-
-<Story name="Custom theme" {...withStoryDocs(customiseDocs)}>
   <Theme
     base="dark"
-    theme="{{
+    theme={{
       colour: { accent: 'var(--tr-light-orange)' },
       font: { family: { hed: 'FreightText, serif' } },
-    }}"
+    }}
   >
     <ThemedPage />
   </Theme>
 </Story>
 
-<Story name="Custom Google font" {...withStoryDocs(customiseFontDocs)}>
+<Story name="Custom Google font">
   <Theme
     base="light"
-    theme="{{
+    theme={{
       font: { family: { hed: 'Bebas Neue, sans-serif' } },
-    }}"
+    }}
   >
     <div class="gfont">
       <Headline
-        hed="{'Reuters Graphics Interactive'}"
+        hed={'Reuters Graphics Interactive'}
-        dek="{'The beginning of a beautiful page'}"
+        dek={'The beginning of a beautiful page'}
-        section="{'Global news'}"
+        section={'Global news'}
       />
     </div>
   </Theme>
 </Story>
 
-<Story name="Background patterns" {...withStoryDocs(patternDocs)}>
+<Story name="Background patterns">
   <div id="pattern-bg">
     <Theme
       base="dark"
-      theme="{{
+      theme={{
         colour: { background: 'transparent' },
-      }}"
+      }}
     >
       <SiteHeader />
       <ThemedPage />
@@ -101,23 +72,23 @@
   </div>
 </Story>
 
-<Story name="Inheritance" {...withStoryDocs(inheritanceDocs)}>
+<Story name="Inheritance">
-  <Theme theme="{themes.light}">
+  <Theme theme={themes.light}>
     <div class="themed">
       <p>Theme</p>
-      <Theme theme="{themes.dark}">
+      <Theme theme={themes.dark}>
         <div class="themed">
           <p>Sub-theme</p>
-          <Theme theme="{themes.light}">
+          <Theme theme={themes.light}>
             <div class="themed">
               <p>Sub-sub</p>
             </div>
           </Theme>
           <Theme
-            theme="{{
+            theme={{
               colour: { background: 'steelblue', 'text-primary': '#fff' },
               font: { family: { note: 'FreightText, serif' } },
-            }}"
+            }}
             base="dark"
           >
             <div class="themed">