From 63bcb6ff0353d84ff96796ebeda697c4dd90b99c Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 27 Mar 2025 15:25:54 -0700
Subject: [PATCH] starting themes

---
 .../{stories/docs/component.md => Theme.mdx}  |  10 ++
 src/components/Theme/Theme.stories.svelte     |  89 ++++++------------
 .../Theme/{stories => demo}/ThemedPage.svelte |   0
 .../{stories => demo}/docs/customise-font.md  |   0
 .../Theme/{stories => demo}/docs/customise.md |   0
 .../Theme/{stories => demo}/docs/gfonts.png   | Bin
 .../{stories => demo}/docs/inheritance.md     |   0
 .../Theme/{stories => demo}/docs/pattern.md   |   0
 8 files changed, 40 insertions(+), 59 deletions(-)
 rename src/components/Theme/{stories/docs/component.md => Theme.mdx} (79%)
 rename src/components/Theme/{stories => demo}/ThemedPage.svelte (100%)
 rename src/components/Theme/{stories => demo}/docs/customise-font.md (100%)
 rename src/components/Theme/{stories => demo}/docs/customise.md (100%)
 rename src/components/Theme/{stories => demo}/docs/gfonts.png (100%)
 rename src/components/Theme/{stories => demo}/docs/inheritance.md (100%)
 rename src/components/Theme/{stories => demo}/docs/pattern.md (100%)

diff --git a/src/components/Theme/stories/docs/component.md b/src/components/Theme/Theme.mdx
similarity index 79%
rename from src/components/Theme/stories/docs/component.md
rename to src/components/Theme/Theme.mdx
index 8ab19009..6b95a3df 100644
--- a/src/components/Theme/stories/docs/component.md
+++ b/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} />
diff --git a/src/components/Theme/Theme.stories.svelte b/src/components/Theme/Theme.stories.svelte
index f1084fcc..1a57ad8a 100644
--- a/src/components/Theme/Theme.stories.svelte
+++ b/src/components/Theme/Theme.stories.svelte
@@ -1,99 +1,70 @@
 <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 { defineMeta } from '@storybook/addon-svelte-csf';
   import Theme, { themes } from './Theme.svelte';
 
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '../../docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     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 './stories/ThemedPage.svelte';
+  import ThemedPage from './demo/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)}>
+<Story name="Demo">
+  <div class="reset-article">
+    <Theme theme={themes.light} base="light">
+      <ThemedPage />
+    </Theme>
+  </div>
+</Story>
+<Story name="Custom theme">
   <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'}"
-        dek="{'The beginning of a beautiful page'}"
-        section="{'Global news'}"
+        hed={'Reuters Graphics Interactive'}
+        dek={'The beginning of a beautiful page'}
+        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)}>
-  <Theme theme="{themes.light}">
+<Story name="Inheritance">
+  <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">
diff --git a/src/components/Theme/stories/ThemedPage.svelte b/src/components/Theme/demo/ThemedPage.svelte
similarity index 100%
rename from src/components/Theme/stories/ThemedPage.svelte
rename to src/components/Theme/demo/ThemedPage.svelte
diff --git a/src/components/Theme/stories/docs/customise-font.md b/src/components/Theme/demo/docs/customise-font.md
similarity index 100%
rename from src/components/Theme/stories/docs/customise-font.md
rename to src/components/Theme/demo/docs/customise-font.md
diff --git a/src/components/Theme/stories/docs/customise.md b/src/components/Theme/demo/docs/customise.md
similarity index 100%
rename from src/components/Theme/stories/docs/customise.md
rename to src/components/Theme/demo/docs/customise.md
diff --git a/src/components/Theme/stories/docs/gfonts.png b/src/components/Theme/demo/docs/gfonts.png
similarity index 100%
rename from src/components/Theme/stories/docs/gfonts.png
rename to src/components/Theme/demo/docs/gfonts.png
diff --git a/src/components/Theme/stories/docs/inheritance.md b/src/components/Theme/demo/docs/inheritance.md
similarity index 100%
rename from src/components/Theme/stories/docs/inheritance.md
rename to src/components/Theme/demo/docs/inheritance.md
diff --git a/src/components/Theme/stories/docs/pattern.md b/src/components/Theme/demo/docs/pattern.md
similarity index 100%
rename from src/components/Theme/stories/docs/pattern.md
rename to src/components/Theme/demo/docs/pattern.md