@onsvisual/svelte-components 1.0.0-next.5 → 1.0.0-next.7

package/dist/wrappers/Container/Container.svelte

@@ -1,11 +1,13 @@
 <script>
+	import Theme from "../Theme/Theme.svelte";
+
 	/**
 	 * Optional: Set the unique ID of the container
 	 * @type {string}
 	 */
 	export let id = "";
 	/**
-	 * Optional: Set a CSS class for the container
+	 * Optional: Set an additional CSS class for the container
 	 * @type {string}
 	 */
 	export let cls = "";
@@ -20,45 +22,56 @@
 	 */
 	export let height = null;
 	/**
-	 * Optional margin above container
+	 * Adds margin above container
 	 * @type {boolean}
 	 */
 	export let marginTop = false;
 	/**
-	 * Optional margin below container
+	 * Adds margin below container
 	 * @type {boolean}
 	 */
 	export let marginBottom = false;
 	/**
-	 * Overrides the base theme background (accepts any valid CSS background value)
+	 * Optional: Sets a base theme ("light", "dark" or null for no theme)
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
+	 */
+	export let theme = null;
+	/**
+	 * Optional: Define additional props to override the base theme
+	 * @type {object}
+	 */
+	export let themeOverrides = {};
+	/**
+	 * Optional: Overrides the base theme background (accepts any valid CSS background value)
 	 * @type {string|null}
 	 */
 	export let background = null;
 </script>
 
-<div
-	{id}
-	class="ons-page__container {cls || ''}"
-	class:ons-container={width !== "full"}
-	class:ons-container--wide={width === "wider"}
-	class:ons-u-mt-xl={marginTop}
-	class:ons-u-mb-xl={marginBottom}
-	style:background
-	style:height={typeof height === "number" ? `${height}px` : height === "full" ? "100vh" : height}
->
-	{#if width === "narrow"}
-		<div class="ons-grid">
-			<div class="ons-grid__col ons-col-10@m ons-col-8@l">
-				<slot />
+<Theme {theme} overrides={themeOverrides} {background}>
+	<div
+		{id}
+		class="ons-page__container {cls || ''}"
+		class:ons-container={width !== "full"}
+		class:ons-container--wide={width === "wider"}
+		class:ons-u-mt-xl={marginTop}
+		class:ons-u-mb-xl={marginBottom}
+		style:height={typeof height === "number" ? `${height}px` : height === "full" ? "100vh" : height}
+	>
+		{#if width === "narrow"}
+			<div class="ons-grid">
+				<div class="ons-grid__col ons-col-10@m ons-col-8@l">
+					<slot />
+				</div>
 			</div>
-		</div>
-	{:else if width === "medium"}
-		<div class="ons-grid">
-			<div class="ons-grid__col ons-col-10@l">
-				<slot />
+		{:else if width === "medium"}
+			<div class="ons-grid">
+				<div class="ons-grid__col ons-col-10@l">
+					<slot />
+				</div>
 			</div>
-		</div>
-	{:else}
-		<slot />
-	{/if}
-</div>
+		{:else}
+			<slot />
+		{/if}
+	</div>
+</Theme>

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

@@ -2,13 +2,15 @@
 /** @typedef {typeof __propDef.events}  ContainerEvents */
 /** @typedef {typeof __propDef.slots}  ContainerSlots */
 export default class Container extends SvelteComponentTyped<{
-    id?: string | undefined;
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+    background?: string | null | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     height?: string | number | null | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
-    background?: string | null | undefined;
+    themeOverrides?: object | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -21,13 +23,15 @@ export type ContainerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+        background?: string | null | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         height?: string | number | null | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;
-        background?: string | null | undefined;
+        themeOverrides?: object | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,4 +1,6 @@
-A container to set the width, minimum height and theme of a block of content.
+A container to set the width and minimum height of a block of content.
+
+Note that the this component includes the `<Theme>` component internally, allowing colour themes to be applied directly without adding an additional wrapper around it.
 
 <!-- prettier-ignore -->
 ```html
@@ -6,5 +8,5 @@ A container to set the width, minimum height and theme of a block of content.
   import { Container } from "@onsvisual/svelte-components";
 </script>
 
-<Container width="{narrow|medium|wide|full}"> {child_components} </Container>
+<Container width="{narrow|medium|wide|wider|full}" theme="light">{child_components}</Container>
 ```

package/dist/wrappers/Theme/Theme.svelte

@@ -3,7 +3,7 @@
 
 	/**
 	 * Sets a base theme ("light", "dark" or null for no theme)
-	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|null}
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
 	 */
 	export let theme = null;
 	/**
@@ -27,7 +27,7 @@
 	 */
 	export let allowClientOverrides = false;
 	/**
-	 * Optional: Set a CSS class for the theme container
+	 * Optional: Set an additional CSS class for the theme container
 	 * @type {string}
 	 */
 	export let cls = "";
@@ -47,14 +47,14 @@
 </script>
 
 <svelte:head>
-	{#if global}
+	{#if global && (style || background)}
 		{@html "<st" +
 			`yle>:root{${style}background:${background || "var(--ons-color-page-light)"};color:var(--ons-color-text);</st` +
 			"yle>"}
 	{/if}
 </svelte:head>
 
-{#if global || (!theme && !background)}
+{#if global || !(theme || background)}
 	<slot />
 {:else}
 	<div class="ons-svelte-theme-wrapper {cls}" {style} style:background>

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

@@ -2,12 +2,12 @@
 /** @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;
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
     overrides?: object | undefined;
+    background?: string | null | undefined;
     global?: boolean | undefined;
     allowClientOverrides?: boolean | undefined;
+    cls?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,12 +20,12 @@ 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;
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
         overrides?: object | undefined;
+        background?: string | null | undefined;
         global?: boolean | undefined;
         allowClientOverrides?: boolean | undefined;
+        cls?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -6,5 +6,5 @@ A component that sets the colour scheme of its child components using CSS variab
   import { Theme } from "@onsvisual/svelte-components";
 </script>
 
-<Theme theme="{theme_name}"> {child_components} </Theme>
+<Theme theme="{light|dark|paleblue|blue|navyblue|grey}"> {child_components} </Theme>
 ```

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

@@ -4,6 +4,7 @@ declare namespace _default {
     export { paleblue };
     export { blue };
     export { navyblue };
+    export { grey };
 }
 export default _default;
 declare const light: {
@@ -141,3 +142,30 @@ declare const navyblue: {
     "--ons-color-borders-indent": string;
     "--ons-color-borders-light": string;
 };
+declare const grey: {
+    "--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

@@ -65,5 +65,6 @@ const dark = {
 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" };
+const grey = { ...light, "--ons-color-page-light": "--ons-color-grey-5" };
 
-export default { light, dark, paleblue, blue, navyblue };
+export default { light, dark, paleblue, blue, navyblue, grey };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.0-next.5",
+	"version": "1.0.0-next.7",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",
@@ -61,6 +61,8 @@
 		"@vitest/browser": "3.2.3",
 		"@vitest/coverage-v8": "3.2.3",
 		"csso": "^5.0.5",
+		"d3-scale": "^4.0.2",
+		"d3-shape": "^3.2.0",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-storybook": "^9.0.11",