@reuters-graphics/graphics-components 1.1.6 → 2.0.0

package/dist/components/Table/Table.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Table--default) -->
+<!-- @component `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-table--docs) -->
 <script>import { onMount } from "svelte";
 export let data;
 export let title = null;
@@ -234,6 +234,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 section.table {
   overflow-x: auto;
 }
+
 section.table table {
   background-color: transparent;
   border-collapse: separate;
@@ -279,9 +280,11 @@ section.table table.truncated tbody tr:last-child:not(:first-child) {
   mask-image: linear-gradient(to bottom, var(--theme-colour-text-primary) 0%, transparent 100%);
   -webkit-mask-image: linear-gradient(to bottom, var(--theme-colour-text-primary) 0%, transparent 100%);
 }
+
 .avoid-clicks {
   pointer-events: none;
 }
+
 nav.input {
   padding: 0;
   width: 100%;
@@ -292,6 +295,7 @@ nav.input {
   flex-wrap: wrap;
   gap: clamp(0.31rem, 0.29rem + 0.1vw, 0.38rem);
 }
+
 nav.show-all button {
   min-width: 13rem;
   height: 2.15rem;

package/dist/components/Table/Table.svelte.d.ts

@@ -89,7 +89,7 @@ declare const __propDef: {
 export type TableProps = typeof __propDef.props;
 export type TableEvents = typeof __propDef.events;
 export type TableSlots = typeof __propDef.slots;
-/** `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Table--default) */
+/** `Table` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-table--docs) */
 export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
 }
 export {};

package/dist/components/Theme/Theme.stories.svelte

@@ -1,18 +1,16 @@
-<script>import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-import componentDocs from "./stories/docs/component.md?raw";
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
 import customiseDocs from "./stories/docs/customise.md?raw";
 import customiseFontDocs from "./stories/docs/customise-font.md?raw";
 import patternDocs from "./stories/docs/pattern.md?raw";
 import inheritanceDocs from "./stories/docs/inheritance.md?raw";
-import ThemedPage from "./stories/ThemedPage.svelte";
-import SiteHeader from "../SiteHeader/SiteHeader.svelte";
 import Theme, { themes } from "./Theme.svelte";
-import Headline from "./../Headline/Headline.svelte";
 import {
   withComponentDocs,
   withStoryDocs
 } from "../../docs/utils/withParams.js";
-const metaProps = {
+export const meta = {
+  title: "Components/Theming/Theme",
+  component: Theme,
   ...withComponentDocs(componentDocs),
   argTypes: {
     base: {
@@ -24,7 +22,11 @@ const metaProps = {
 };
 </script>
 
-<Meta title="Theming/Theme" component="{Theme}" {...metaProps} />
+<script>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 let:args>
   <div class="reset-article">

package/dist/components/Theme/Theme.stories.svelte.d.ts

@@ -1,4 +1,20 @@
 import { SvelteComponent } from "svelte";
+export declare const meta: {
+    argTypes: {
+        base: {
+            control: string;
+            options: string[];
+        };
+        themes: {
+            control: boolean;
+        };
+    };
+    parameters: {
+        docs: any;
+    };
+    title: string;
+    component: typeof Theme;
+};
 declare const __propDef: {
     props: Record<string, never>;
     events: {

package/dist/components/Theme/Theme.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/theming-Theme--default) -->
+<!-- @component `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-theming-theme--docs) -->
 <script context="module">import light from "./themes/light.js";
 import dark from "./themes/dark.js";
 export const themes = { light, dark };

package/dist/components/Theme/Theme.svelte.d.ts

@@ -31,7 +31,7 @@ declare const __propDef: {
 export type ThemeProps = typeof __propDef.props;
 export type ThemeEvents = typeof __propDef.events;
 export type ThemeSlots = typeof __propDef.slots;
-/** `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/theming-Theme--default) */
+/** `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-theming-theme--docs) */
 export default class Theme extends SvelteComponent<ThemeProps, ThemeEvents, ThemeSlots> {
 }
 export {};

package/dist/components/ToolsHeader/ToolsHeader.stories.svelte

@@ -1,19 +1,16 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
-  import ToolsHeader from './ToolsHeader.svelte';
-
-  import { withComponentDocs } from '$docs/utils/withParams.js';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import ToolsHeader from "./ToolsHeader.svelte";
+import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Page furniture/ToolsHeader",
+  component: ToolsHeader,
+  ...withComponentDocs(componentDocs)
+};
 </script>
 
-<Meta
-  title="Components/ToolsHeader"
-  component="{ToolsHeader}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <div>

package/dist/components/ToolsHeader/ToolsHeader.stories.svelte.d.ts

@@ -1,25 +1,23 @@
-/** @typedef {typeof __propDef.props}  ToolsHeaderProps */
-/** @typedef {typeof __propDef.events}  ToolsHeaderEvents */
-/** @typedef {typeof __propDef.slots}  ToolsHeaderSlots */
-export default class ToolsHeader extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ToolsHeaderProps = typeof __propDef.props;
-export type ToolsHeaderEvents = typeof __propDef.events;
-export type ToolsHeaderSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof ToolsHeader;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type ToolsHeaderProps = typeof __propDef.props;
+export type ToolsHeaderEvents = typeof __propDef.events;
+export type ToolsHeaderSlots = typeof __propDef.slots;
+export default class ToolsHeader extends SvelteComponent<ToolsHeaderProps, ToolsHeaderEvents, ToolsHeaderSlots> {
+}
 export {};

package/dist/components/ToolsHeader/ToolsHeader.svelte

@@ -1,4 +1,4 @@
-<!-- @component `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ToolsHeader--default) -->
+<!-- @component `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-toolsheader--docs) -->
 <script>export let id = "";
 let cls = "";
 export { cls as class };

package/dist/components/ToolsHeader/ToolsHeader.svelte.d.ts

@@ -16,8 +16,7 @@ declare const __propDef: {
            * Colour props passed to `ReutersGraphicsLogo` component.
            */ logoProps?: {
             logoColour?: string;
-            primaryTextColor?: string;
-            secondaryTextColor?: string;
+            textColor?: string;
         };
         /**
            * Link the logo points to.
@@ -35,7 +34,7 @@ declare const __propDef: {
 export type ToolsHeaderProps = typeof __propDef.props;
 export type ToolsHeaderEvents = typeof __propDef.events;
 export type ToolsHeaderSlots = typeof __propDef.slots;
-/** `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ToolsHeader--default) */
+/** `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-toolsheader--docs) */
 export default class ToolsHeader extends SvelteComponent<ToolsHeaderProps, ToolsHeaderEvents, ToolsHeaderSlots> {
 }
 export {};

package/dist/components/Video/Video.stories.svelte

@@ -1,34 +1,27 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import playAndLoopDocs from "./stories/docs/playAndLoop.md?raw";
+import controlsDocs from "./stories/docs/controls.md?raw";
+import Video from "./Video.svelte";
+import {
+  withComponentDocs,
+  withStoryDocs
+} from "../../lib/docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Multimedia/Video",
+  component: Video,
+  ...withComponentDocs(componentDocs)
+};
+</script>
 
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import playAndLoopDocs from './stories/docs/playAndLoop.md?raw';
-  // @ts-ignore raw
-  import controlsDocs from './stories/docs/controls.md?raw';
-  // @ts-ignore raw
-  // import withSoundDocs from './stories/docs/withSound.md?raw';
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore raw
   import SilentVideo from './stories/videos/silent-video.mp4';
   // @ts-ignore raw
   import SoundVideo from './stories/videos/sound-video.mp4';
-
-  import Video from './Video.svelte';
-
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '../../lib/docs/utils/withParams.js';
 </script>
 
-<Meta
-  title="Components/Video"
-  component="{Video}"
-  {...withComponentDocs(componentDocs)}
-/>
-
 <Template let:args>
   <Video {...args} />
 </Template>

package/dist/components/Video/Video.stories.svelte.d.ts

@@ -1,25 +1,23 @@
-/** @typedef {typeof __propDef.props}  VideoProps */
-/** @typedef {typeof __propDef.events}  VideoEvents */
-/** @typedef {typeof __propDef.slots}  VideoSlots */
-export default class Video extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type VideoProps = typeof __propDef.props;
-export type VideoEvents = typeof __propDef.events;
-export type VideoSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof Video;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type VideoProps = typeof __propDef.props;
+export type VideoEvents = typeof __propDef.events;
+export type VideoSlots = typeof __propDef.slots;
+export default class Video extends SvelteComponent<VideoProps, VideoEvents, VideoSlots> {
+}
 export {};

package/dist/components/Video/Video.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Video` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Video--default) -->
+<!-- @component `Video` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-video--docs) -->
 <script>import IntersectionObserver from "svelte-intersection-observer";
 import Controls from "./Controls.svelte";
 import GraphicBlock from "../GraphicBlock/GraphicBlock.svelte";

package/dist/components/Video/Video.svelte.d.ts

@@ -73,7 +73,7 @@ declare const __propDef: {
 export type VideoProps = typeof __propDef.props;
 export type VideoEvents = typeof __propDef.events;
 export type VideoSlots = typeof __propDef.slots;
-/** `Video` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Video--default) */
+/** `Video` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-video--docs) */
 export default class Video extends SvelteComponent<VideoProps, VideoEvents, VideoSlots> {
 }
 export {};

package/dist/components/Visible/Visible.stories.svelte

@@ -1,21 +1,17 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import defaultSnippet from './stories/snippets/default.svelte?raw';
-
-  import Visible from './Visible.svelte';
-
-  import { withSource, withComponentDocs } from '../../lib/docs/utils/withParams.js';
+<script context="module">import componentDocs from "./stories/docs/component.md?raw";
+import defaultSnippet from "./stories/snippets/default.svelte?raw";
+import Visible from "./Visible.svelte";
+import { withSource, withComponentDocs } from "../../lib/docs/utils/withParams.js";
+export const meta = {
+  title: "Components/Utilities/Visible",
+  component: Visible,
+  ...withComponentDocs(componentDocs)
+};
 </script>
 
-<Meta
-  title="Components/Visible"
-  component="{Visible}"
-  {...withComponentDocs(componentDocs)}
-/>
+<script>
+  import { Template, Story } from '@storybook/addon-svelte-csf';
+</script>
 
 <Template let:args>
   <Visible {...args} let:visible>

package/dist/components/Visible/Visible.stories.svelte.d.ts

@@ -1,25 +1,23 @@
-/** @typedef {typeof __propDef.props}  VisibleProps */
-/** @typedef {typeof __propDef.events}  VisibleEvents */
-/** @typedef {typeof __propDef.slots}  VisibleSlots */
-export default class Visible extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type VisibleProps = typeof __propDef.props;
-export type VisibleEvents = typeof __propDef.events;
-export type VisibleSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+export declare const meta: {
+    parameters: {
+        docs: any;
     };
+    title: string;
+    component: typeof Visible;
+};
+declare const __propDef: {
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
+export type VisibleProps = typeof __propDef.props;
+export type VisibleEvents = typeof __propDef.events;
+export type VisibleSlots = typeof __propDef.slots;
+export default class Visible extends SvelteComponent<VisibleProps, VisibleEvents, VisibleSlots> {
+}
 export {};

package/dist/components/Visible/Visible.svelte

@@ -1,4 +1,4 @@
-<!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Visible--default) -->
+<!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) -->
 <script>import { onMount } from "svelte";
 export let once = false;
 export let top = 0;

package/dist/components/Visible/Visible.svelte.d.ts

@@ -26,7 +26,7 @@ declare const __propDef: {
 export type VisibleProps = typeof __propDef.props;
 export type VisibleEvents = typeof __propDef.events;
 export type VisibleSlots = typeof __propDef.slots;
-/** `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Visible--default) */
+/** `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) */
 export default class Visible extends SvelteComponent<VisibleProps, VisibleEvents, VisibleSlots> {
 }
 export {};

package/dist/docs/actions/intro.mdx

@@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Actions/Intro" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Actions
 
 Svelte [actions](https://svelte.dev/tutorial/actions) are arbitrary functions that run after Svelte "mounts" an element in the DOM.

package/dist/docs/contributing/component-guidelines.mdx

@@ -6,8 +6,6 @@ import { parameters } from '../utils/docsPage.js';
   parameters={{ ...parameters }}
 />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Component guidelines
 
 ## Dependencies

package/dist/docs/contributing/quickstart.mdx

@@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Contributing/Quickstart" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Contributing
 
 Reuters Graphics team members can contribute new components, and we welcome pull requests for any of our existing components from the community.
@@ -30,7 +28,7 @@ This library includes a basic template for creating and documenting your compone
 Just run...
 
 ```
-yarn new
+pnpm new
 ```
 
 ... which will create a new directory for your component and copy over an example Svelte component and story page.
@@ -38,7 +36,7 @@ yarn new
 To start developing your component, start the dev server with...
 
 ```
-yarn start
+pnpm start
 ```
 
 When you're ready to share your chart, commit your branch to GitHub, make a PR and we'll get it published!

package/dist/docs/contributing/story-recipes/basic-story.mdx

@@ -6,8 +6,6 @@ import { parameters } from '../../utils/docsPage.js';
   parameters={{ ...parameters }}
 />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Recipes: Basic story
 
 To make a basic story, you'll need to setup a few things from storybook's Svelte [Component Story Framework (CSF)](https://storybook.js.org/docs/svelte/api/csf) library.

package/dist/docs/contributing/story-recipes/story-with-custom-controls.mdx

@@ -6,8 +6,6 @@ import { parameters } from '../../utils/docsPage.js';
   parameters={{ ...parameters }}
 />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Recipes: Story with custom controls
 
 You can customise the controls in Storybook's built-in [controls panel](https://storybook.js.org/docs/svelte/essentials/controls) by passing [argTypes](https://storybook.js.org/docs/svelte/api/argtypes) to `Meta` like this:

package/dist/docs/contributing/story-recipes/story-with-custom-docs.mdx

@@ -10,8 +10,6 @@ import '../../docStyles.scss';
   parameters={{ ...parameters }}
 />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Recipes: Story with custom docs
 
 You can add custom markdown to your story page by importing and using markdown files.

package/dist/docs/contributing/story-recipes/story-with-media.mdx

@@ -6,8 +6,6 @@ import { parameters } from '../../utils/docsPage.js';
   parameters={{ ...parameters }}
 />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Recipes: Story with media
 
 To use media files in your stories, import them directly.

package/dist/docs/contributing/writing-component-stories.mdx

@@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Contributing/Writing stories" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Writing component stories
 
 As well as writing your component, you should also document how to use it using Storybook "stories."

package/dist/docs/contributing/writing-docs-stories.mdx

@@ -3,8 +3,6 @@ import { parameters } from '../utils/docsPage.js';
 
 <Meta title="Contributing/Writing docs pages" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # Writing docs-only pages
 
 You can write docs-only pages in simple markdown using MDX format.
@@ -29,8 +27,6 @@ import { parameters } from '$docs/utils/docsPage.js';
 
 <Meta title="SCSS/Special rules" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # My docs page
 
 Your docs TK...

package/dist/docs/docs-components/CopyColourTable/ImportSnippet.jsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 // @ts-ignore scss
 import classes from './styles.module.scss';
-import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
+import { prismNord } from '../syntax/nord';
 import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 
 SyntaxHighlighter.registerLanguage('scss', scss);
@@ -25,7 +25,7 @@ const Copyable = (props) => {
   }, [copied]);
 
   const handleClick = async ({ partial }) => {
-    const copyText = `@import "@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}";`;
+    const copyText = `@use "@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}";`;
     await navigator.clipboard.writeText(copyText);
     setCopied(true);
   };
@@ -44,8 +44,8 @@ const ImportSnippet = ({ included = false, partial = 'thematic/_tr.scss' }) => {
         <p>Included</p>
       </div>
     : <div className={classes.importsnippet}>
-        <SyntaxHighlighter language="scss" style={prism}>
-          {`// global.scss \n@import "@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}";`}
+        <SyntaxHighlighter language="scss" style={prismNord}>
+          {`// global.scss \n@use "@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}";`}
         </SyntaxHighlighter>
         <Copyable partial={partial} />
       </div>;

package/dist/docs/docs-components/CopyColourTable/styles.module.scss

@@ -134,6 +134,7 @@ $header: #5e81ac;
 .importsnippet :global {
   max-width: 600px;
   position: relative;
+  
   p {
     font-size: 0.8rem;
     line-height: 1;
@@ -146,6 +147,7 @@ $header: #5e81ac;
   }
 
   pre {
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23) !important;
     margin-top: 0 !important;
     border-radius: 4px;
     border: 1px solid hsla(203, 50%, 30%, 0.15);

package/dist/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx

@@ -6,7 +6,7 @@ import VariableTable from '../CSSVariables/VariableTable';
 import classes from './styles.module.scss';
 import darkTheme from '../../../../components/Theme/themes/dark';
 import lightTheme from '../../../../components/Theme/themes/light';
-import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
+import { prismNord } from '../../syntax/nord';
 import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 import svelteSyntax from '../../../../../.storybook/svelte-highlighting';
 import { updatedDiff } from 'deep-object-diff';
@@ -26,7 +26,7 @@ const NewTheme = ({ theme, themeName }) => {
         Use the code below to adapt the <code>Theme</code> component for your
         new design:
       </p>
-      <SyntaxHighlighter language="svelte" style={prism}>
+      <SyntaxHighlighter language="svelte" style={prismNord}>
         {`<Theme
   base="${themeName}"
   theme={${JSON.stringify(updates, null, 2).replaceAll('"', "'")}}
@@ -38,7 +38,7 @@ const NewTheme = ({ theme, themeName }) => {
       {bgChanged && (
         <SyntaxHighlighter
           language="scss"
-          style={prism}
+          style={prismNord}
           customStyle={{ maxHeight: '140px' }}
         >
           {`// global.scss

package/dist/docs/docs-components/ThemeBuilder/NewTheme/styles.module.scss

@@ -6,4 +6,10 @@
     line-height: 18px;
     color: #666;
   }
+
+  pre {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
+    border: 0 !important;
+    padding: 1em 1.5em !important;
+  }
 }