@onsvisual/svelte-components 0.1.105 → 1.0.0-next.1

package/dist/wrappers/Theme/Theme.stories.svelte

@@ -0,0 +1,70 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Theme from "./Theme.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Wrappers/Theme",
+		component: Theme,
+		tags: ["autodocs"],
+		argTypes: {
+			theme: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Theme {...args}>
+		<div style:padding="12px">
+			<h2>Title</h2>
+			<p>Text with a <a href="#0">hyperlink</a>.</p>
+		</div>
+	</Theme>
+{/snippet}
+
+<Story name="Default light theme" args={{}} {template} />
+
+<Story
+	name="Dark theme"
+	args={{
+		theme: "dark"
+	}}
+	{template}
+/>
+
+<Story
+	name="Pale blue theme"
+	args={{
+		theme: "paleblue"
+	}}
+	{template}
+/>
+
+<Story
+	name="Blue theme"
+	args={{
+		theme: "blue"
+	}}
+	{template}
+/>
+
+<Story
+	name="Navy blue theme"
+	args={{
+		theme: "navyblue"
+	}}
+	{template}
+/>
+
+<Story
+	name="Dark with background override"
+	args={{
+		theme: "dark",
+		background: "var(--ons-color-aqua-teal)"
+	}}
+	{template}
+/>

package/dist/{@types/wrappers/Theme/Theme.svelte.d.ts → wrappers/Theme/Theme.stories.svelte.d.ts}

@@ -2,18 +2,10 @@
 /** @typedef {typeof __propDef.events}  ThemeEvents */
 /** @typedef {typeof __propDef.slots}  ThemeSlots */
 export default class Theme extends SvelteComponentTyped<{
-    id?: string;
-    cls?: string;
-    global?: boolean;
-    theme?: "light" | "dark" | "lightblue";
-    overrides?: any;
-    background?: string;
-    allowClientOverrides?: boolean;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+}, {}> {
 }
 export type ThemeProps = typeof __propDef.props;
 export type ThemeEvents = typeof __propDef.events;
@@ -21,19 +13,11 @@ export type ThemeSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string;
-        cls?: string;
-        global?: boolean;
-        theme?: "light" | "dark" | "lightblue";
-        overrides?: object;
-        background?: string;
-        allowClientOverrides?: boolean;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export {};

package/dist/wrappers/Theme/Theme.svelte

@@ -1,113 +1,76 @@
 <script>
-  import themes from "./themes.js";
+	import themes from "./themes.js";
 
-  /**
-   * (Optional) Sets the unique ID of the container
-   * @type {string}
-   */
-  export let id = null;
-  /**
-   * (Optional) Sets a css class for the container
-   * @type {string}
-   */
-  export let cls = null;
-  /**
-   * Sets the body background to match this theme (only use this at the top level)
-   * @type {boolean}
-   */
-  export let global = false;
-  /**
-   * Sets a predefined theme
-   * @type {"light"|"dark"|"lightblue"}
-   */
-  export let theme = null;
-  /**
-   * Define additional props to override the base theme
-   * @type {object}
-   */
-  export let overrides = null;
-  /**
-   * Overrides the base theme background (accepts any valid CSS background value)
-   * @type {string}
-   */
-  export let background = null;
-  /**
-   * Allows client imported CSS for embeddable content
-   * @type {boolean}
-   */
-  export let allowClientOverrides = false;
+	/**
+	 * Sets a base theme ("light", "dark" or null for no theme)
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|null}
+	 */
+	export let theme = null;
+	/**
+	 * Define additional props to override the base theme
+	 * @type {object}
+	 */
+	export let overrides = {};
+	/**
+	 * Overrides the base theme background (accepts any valid CSS background value)
+	 * @type {string|null}
+	 */
+	export let background = null;
+	/**
+	 * Sets the theme at html body level (only use this at the top level)
+	 * @type {boolean}
+	 */
+	export let global = false;
+	/**
+	 * Allows client imported CSS for embeddable content
+	 * @type {boolean}
+	 */
+	export let allowClientOverrides = false;
+	/**
+	 * Optional: Set a CSS class for the theme container
+	 * @type {string}
+	 */
+	export let cls = "";
 
-  function makeStyle(theme, overrides, background) {
-    if (theme) {
-      const _theme = themes[theme] || themes.light;
-      if (overrides) Object.keys(overrides).forEach((key) => (_theme[key] = overrides[key]));
-      if (background) _theme.background = background;
-      return Object.keys(_theme)
-        .map((key) => `--${key}: ${_theme[key]};`)
-        .join("");
-    } else if (background) {
-      return `--background:${background};`;
-    }
-    return null;
-  }
-
-  $: style = makeStyle(theme, overrides, background);
+	function makeStyle(theme, overrides) {
+		if (theme) {
+			const _theme = { ...themes[theme], ...overrides };
+			return Object.keys(_theme)
+				.map(
+					(key) => `${key}:${_theme[key].startsWith("--") ? `var(${_theme[key]})` : _theme[key]};`
+				)
+				.join("");
+		}
+		return "";
+	}
+	$: style = makeStyle(theme, overrides);
 </script>
 
 <svelte:head>
-  {#if global}
-    {@html "<st" + `yle>${style}</st` + "yle>"}
-  {/if}
+	{#if global}
+		{@html "<st" +
+			`yle>:root{${style}background:${background || "var(--ons-color-page-light)"};color:var(--ons-color-text);</st` +
+			"yle>"}
+	{/if}
 </svelte:head>
 
-{#if style && !global}
-  <div
-    id="{id}"
-    class="{cls ? `theme-wrapper ${cls}` : 'theme-wrapper'}"
-    style="{style} display: contents"
-  >
-    {#if allowClientOverrides}
-      <div class="client-css-override" style:display="contents">
-        <div class="theme-internal">
-          <slot />
-        </div>
-      </div>
-    {:else}
-      <div class="theme-internal">
-        <slot />
-      </div>
-    {/if}
-  </div>
+{#if global || (!theme && !background)}
+	<slot />
 {:else}
-  <slot />
+	<div class="ons-svelte-theme-wrapper {cls}" {style} style:background>
+		{#if allowClientOverrides}
+			<div class="client-css-override" style:display="contents">
+				<slot />
+			</div>
+		{:else}
+			<slot />
+		{/if}
+	</div>
 {/if}
 
 <style>
-  .theme-wrapper {
-    --ons-color-text: var(--text, --ons-color-text);
-    --ons-color-text-light: var(--muted, --ons-color-text-light);
-    --ons-color-borders: var(--muted, --ons-color-borders);
-  }
-  .theme-wrapper :global(a) {
-    color: var(--link, --ons-color-text-link);
-  }
-  .theme-wrapper :global(a:hover) {
-    -webkit-text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px;
-            text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px;
-  }
-  .theme-wrapper :global(a:hover) {
-    color: var(--link-hover, --ons-color-text-link-hover);
-  }
-  .theme-wrapper :global(.form-label-bold) {
-    color: var(--text, #222);
-  }
-  .theme-wrapper :global(.form-control) {
-    background: none;
-    border-color: var(--text, #222);
-    color: var(--text, #222);
-  }
-  .theme-internal {
-    position: relative;
-    color: var(--text, #222);
-    background: var(--background, none);
-  }</style>
+	.ons-svelte-theme-wrapper {
+		background: var(--ons-color-page-light);
+		color: var(--ons-color-text);
+	}
+</style>

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

@@ -0,0 +1,37 @@
+/** @typedef {typeof __propDef.props}  ThemeProps */
+/** @typedef {typeof __propDef.events}  ThemeEvents */
+/** @typedef {typeof __propDef.slots}  ThemeSlots */
+export default class Theme extends SvelteComponentTyped<{
+    cls?: string | undefined;
+    background?: string | null | undefined;
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
+    overrides?: object | undefined;
+    global?: boolean | undefined;
+    allowClientOverrides?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ThemeProps = typeof __propDef.props;
+export type ThemeEvents = typeof __propDef.events;
+export type ThemeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        cls?: string | undefined;
+        background?: string | null | undefined;
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
+        overrides?: object | undefined;
+        global?: boolean | undefined;
+        allowClientOverrides?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/wrappers/Theme/docs/component.md

@@ -0,0 +1,10 @@
+A component that sets the colour scheme of its child components using CSS variables.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Theme } from "@onsvisual/svelte-components";
+</script>
+
+<Theme theme="{theme_name}"> {child_components} </Theme>
+```

package/dist/wrappers/Theme/themes.d.ts

@@ -0,0 +1,143 @@
+declare namespace _default {
+    export { light };
+    export { dark };
+    export { paleblue };
+    export { blue };
+    export { navyblue };
+}
+export default _default;
+declare const light: {
+    "--ons-color-text": string;
+    "--ons-color-text-light": string;
+    "--ons-color-text-link": string;
+    "--ons-color-text-link-hover": string;
+    "--ons-color-text-link-active": string;
+    "--ons-color-text-link-focus": string;
+    "--ons-color-text-inverse": string;
+    "--ons-color-text-inverse-link": string;
+    "--ons-color-text-inverse-link-hover": string;
+    "--ons-color-text-banner-link": string;
+    "--ons-color-text-banner-link-hover": string;
+    "--ons-color-text-metadata": string;
+    "--ons-color-page-light": string;
+    "--ons-color-input-bg": string;
+    "--ons-color-hero-bg": string;
+    "--ons-color-hero-bg-dark": string;
+    "--ons-color-banner-bg": string;
+    "--ons-color-banner-bg-dark": string;
+    "--ons-color-banner-browser-bg:": string;
+    "--ons-color-focus": string;
+    "--ons-color-focus-dark": string;
+    "--ons-color-highlight": string;
+    "--ons-color-borders": string;
+    "--ons-color-borders-indent": string;
+    "--ons-color-borders-light": string;
+};
+declare const dark: {
+    "--ons-color-text": string;
+    "--ons-color-text-light": string;
+    "--ons-color-text-link": string;
+    "--ons-color-text-link-hover": string;
+    "--ons-color-text-link-active": string;
+    "--ons-color-text-link-focus": string;
+    "--ons-color-text-inverse": string;
+    "--ons-color-text-inverse-link": string;
+    "--ons-color-text-inverse-link-hover": string;
+    "--ons-color-text-banner-link": string;
+    "--ons-color-text-banner-link-hover": string;
+    "--ons-color-text-metadata": string;
+    "--ons-color-page-light": string;
+    "--ons-color-input-bg": string;
+    "--ons-color-hero-bg": string;
+    "--ons-color-hero-bg-dark": string;
+    "--ons-color-banner-bg": string;
+    "--ons-color-banner-bg-dark": string;
+    "--ons-color-banner-browser-bg:": string;
+    "--ons-color-focus": string;
+    "--ons-color-focus-dark": string;
+    "--ons-color-highlight": string;
+    "--ons-color-borders": string;
+    "--ons-color-borders-indent": string;
+    "--ons-color-borders-light": string;
+};
+declare const paleblue: {
+    "--ons-color-page-light": string;
+    "--ons-color-text": string;
+    "--ons-color-text-light": string;
+    "--ons-color-text-link": string;
+    "--ons-color-text-link-hover": string;
+    "--ons-color-text-link-active": string;
+    "--ons-color-text-link-focus": string;
+    "--ons-color-text-inverse": string;
+    "--ons-color-text-inverse-link": string;
+    "--ons-color-text-inverse-link-hover": string;
+    "--ons-color-text-banner-link": string;
+    "--ons-color-text-banner-link-hover": string;
+    "--ons-color-text-metadata": string;
+    "--ons-color-input-bg": string;
+    "--ons-color-hero-bg": string;
+    "--ons-color-hero-bg-dark": string;
+    "--ons-color-banner-bg": string;
+    "--ons-color-banner-bg-dark": string;
+    "--ons-color-banner-browser-bg:": string;
+    "--ons-color-focus": string;
+    "--ons-color-focus-dark": string;
+    "--ons-color-highlight": string;
+    "--ons-color-borders": string;
+    "--ons-color-borders-indent": string;
+    "--ons-color-borders-light": string;
+};
+declare const blue: {
+    "--ons-color-page-light": string;
+    "--ons-color-text": string;
+    "--ons-color-text-light": string;
+    "--ons-color-text-link": string;
+    "--ons-color-text-link-hover": string;
+    "--ons-color-text-link-active": string;
+    "--ons-color-text-link-focus": string;
+    "--ons-color-text-inverse": string;
+    "--ons-color-text-inverse-link": string;
+    "--ons-color-text-inverse-link-hover": string;
+    "--ons-color-text-banner-link": string;
+    "--ons-color-text-banner-link-hover": string;
+    "--ons-color-text-metadata": string;
+    "--ons-color-input-bg": string;
+    "--ons-color-hero-bg": string;
+    "--ons-color-hero-bg-dark": string;
+    "--ons-color-banner-bg": string;
+    "--ons-color-banner-bg-dark": string;
+    "--ons-color-banner-browser-bg:": string;
+    "--ons-color-focus": string;
+    "--ons-color-focus-dark": string;
+    "--ons-color-highlight": string;
+    "--ons-color-borders": string;
+    "--ons-color-borders-indent": string;
+    "--ons-color-borders-light": string;
+};
+declare const navyblue: {
+    "--ons-color-page-light": string;
+    "--ons-color-text": string;
+    "--ons-color-text-light": string;
+    "--ons-color-text-link": string;
+    "--ons-color-text-link-hover": string;
+    "--ons-color-text-link-active": string;
+    "--ons-color-text-link-focus": string;
+    "--ons-color-text-inverse": string;
+    "--ons-color-text-inverse-link": string;
+    "--ons-color-text-inverse-link-hover": string;
+    "--ons-color-text-banner-link": string;
+    "--ons-color-text-banner-link-hover": string;
+    "--ons-color-text-metadata": string;
+    "--ons-color-input-bg": string;
+    "--ons-color-hero-bg": string;
+    "--ons-color-hero-bg-dark": string;
+    "--ons-color-banner-bg": string;
+    "--ons-color-banner-bg-dark": string;
+    "--ons-color-banner-browser-bg:": string;
+    "--ons-color-focus": string;
+    "--ons-color-focus-dark": string;
+    "--ons-color-highlight": string;
+    "--ons-color-borders": string;
+    "--ons-color-borders-indent": string;
+    "--ons-color-borders-light": string;
+};

package/dist/wrappers/Theme/themes.js

@@ -1,28 +1,69 @@
-export default {
-  light: {
-    text: "#222",
-    muted: "#777",
-    hinted: "#e2e2e3",
-    pale: "#f0f0f0",
-    background: "#fff",
-    link: "#206095",
-    "link-hover": "#003c57",
-  },
-  dark: {
-    text: "#fff",
-    muted: "#bbb",
-    hinted: "#444",
-    pale: "#333",
-    background: "#222",
-    link: "#f5f5f6",
-    "link-hover": "#f5f5f6",
-  },
-  lightblue: {
-    text: "#206095",
-    muted: "#707070",
-    pale: "#f0f0f0",
-    background: "rgb(233, 239, 244)",
-    link: "#206095",
-    "link-hover": "#003c57",
-  },
+const light = {
+	// Text
+	"--ons-color-text": "--ons-color-black",
+	"--ons-color-text-light": "--ons-color-grey-75",
+	"--ons-color-text-link": "--ons-color-ocean-blue",
+	"--ons-color-text-link-hover": "--ons-color-night-blue",
+	"--ons-color-text-link-active": "--ons-color-night-blue",
+	"--ons-color-text-link-focus": "--ons-color-black",
+	"--ons-color-text-inverse": "--ons-color-white",
+	"--ons-color-text-inverse-link": "--ons-color-white",
+	"--ons-color-text-inverse-link-hover": "--ons-color-grey-5",
+	"--ons-color-text-banner-link": "--ons-color-grey-100",
+	"--ons-color-text-banner-link-hover": "--ons-color-black",
+	"--ons-color-text-metadata": "--ons-color-black",
+
+	// Background
+	"--ons-color-page-light": "--ons-color-white",
+	"--ons-color-input-bg": "--ons-color-white",
+	"--ons-color-hero-bg": "--ons-color-branded-tint",
+	"--ons-color-hero-bg-dark": "--ons-color-branded",
+	"--ons-color-banner-bg": "--ons-color-grey-5",
+	"--ons-color-banner-bg-dark": "--ons-color-grey-15",
+	"--ons-color-banner-browser-bg:": "--ons-color-black",
+
+	// Other
+	"--ons-color-focus": "--ons-color-sun-yellow",
+	"--ons-color-focus-dark": "--ons-color-sun-yellow-dark",
+	"--ons-color-highlight": "--ons-color-neon-yellow",
+	"--ons-color-borders": "--ons-color-grey-35",
+	"--ons-color-borders-indent": "--ons-color-grey-35",
+	"--ons-color-borders-light": "--ons-color-grey-35"
 };
+const dark = {
+	// Text
+	"--ons-color-text": "--ons-color-white",
+	"--ons-color-text-light": "--ons-color-grey-35",
+	"--ons-color-text-link": "--ons-color-white",
+	"--ons-color-text-link-hover": "--ons-color-grey-5",
+	"--ons-color-text-link-active": "--ons-color-grey-5",
+	"--ons-color-text-link-focus": "--ons-color-black",
+	"--ons-color-text-inverse": "--ons-color-black",
+	"--ons-color-text-inverse-link": "--ons-color-ocean-blue",
+	"--ons-color-text-inverse-link-hover": "--ons-color-night-blue",
+	"--ons-color-text-banner-link": "--ons-color-grey-5",
+	"--ons-color-text-banner-link-hover": "--ons-color-white",
+	"--ons-color-text-metadata": "--ons-color-white",
+
+	// Background
+	"--ons-color-page-light": "--ons-color-black",
+	"--ons-color-input-bg": "--ons-color-white",
+	"--ons-color-hero-bg": "--ons-color-branded-tint",
+	"--ons-color-hero-bg-dark": "--ons-color-branded",
+	"--ons-color-banner-bg": "--ons-color-grey-100",
+	"--ons-color-banner-bg-dark": "--ons-color-grey-75",
+	"--ons-color-banner-browser-bg:": "--ons-color-white",
+
+	// Other
+	"--ons-color-focus": "--ons-color-sun-yellow",
+	"--ons-color-focus-dark": "--ons-color-sun-yellow-dark",
+	"--ons-color-highlight": "--ons-color-neon-yellow",
+	"--ons-color-borders": "--ons-color-grey-75",
+	"--ons-color-borders-indent": "--ons-color-grey-75",
+	"--ons-color-borders-light": "--ons-color-grey-75"
+};
+const paleblue = { ...light, "--ons-color-page-light": "--ons-color-ocean-blue-tint" };
+const blue = { ...dark, "--ons-color-page-light": "--ons-color-ocean-blue" };
+const navyblue = { ...dark, "--ons-color-page-light": "--ons-color-night-blue" };
+
+export default { light, dark, paleblue, blue, navyblue };