@onsvisual/svelte-components 0.0.36 → 0.1.0

package/dist/@types/layout/Cards/Cards.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  CardsEvents */
 /** @typedef {typeof __propDef.slots}  CardsSlots */
 export default class Cards extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "lightblue";
     id?: string;
     cls?: string;
+    theme?: "light" | "dark" | "lightblue";
     width?: "narrow" | "medium" | "wide" | "wider" | "full";
     height?: string | number;
     marginTop?: boolean;
@@ -27,9 +27,9 @@ export type CardsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "lightblue";
         id?: string;
         cls?: string;
+        theme?: "light" | "dark" | "lightblue";
         width?: "narrow" | "medium" | "wide" | "wider" | "full";
         height?: number | string;
         marginTop?: boolean;

package/dist/@types/layout/Grid/Grid.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  GridEvents */
 /** @typedef {typeof __propDef.slots}  GridSlots */
 export default class Grid extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "lightblue";
     id?: string;
     cls?: string;
+    theme?: "light" | "dark" | "lightblue";
     width?: "narrow" | "medium" | "wide" | "full";
     height?: string | number;
     marginTop?: boolean;
@@ -27,9 +27,9 @@ export type GridSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "lightblue";
         id?: string;
         cls?: string;
+        theme?: "light" | "dark" | "lightblue";
         width?: "narrow" | "medium" | "wide" | "full";
         height?: number | string;
         marginTop?: boolean;

package/dist/@types/layout/Hero/Hero.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  HeroEvents */
 /** @typedef {typeof __propDef.slots}  HeroSlots */
 export default class Hero extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "lightblue";
     id?: string;
     cls?: string;
+    theme?: "light" | "dark" | "lightblue";
     background?: string;
     width?: "narrow" | "medium" | "wide" | "wider" | "full";
     height?: "full" | "auto" | "tall";
@@ -24,9 +24,9 @@ export type HeroSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "lightblue";
         id?: string;
         cls?: string;
+        theme?: "light" | "dark" | "lightblue";
         background?: string;
         width?: "narrow" | "medium" | "wide" | "wider" | "full";
         height?: "auto" | "tall" | "full";

package/dist/@types/layout/Highlight/Highlight.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  HighlightEvents */
 /** @typedef {typeof __propDef.slots}  HighlightSlots */
 export default class Highlight extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "lightblue";
     id?: string;
+    theme?: "light" | "dark" | "lightblue";
     background?: string;
     width?: "narrow" | "medium" | "wide" | "wider" | "full";
     height?: "full" | "auto" | "tall";
@@ -22,8 +22,8 @@ export type HighlightSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "lightblue";
         id?: string;
+        theme?: "light" | "dark" | "lightblue";
         background?: string;
         width?: "narrow" | "medium" | "wide" | "wider" | "full";
         height?: "auto" | "tall" | "full";

package/dist/@types/layout/NavSections/NavSections.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  NavSectionsEvents */
 /** @typedef {typeof __propDef.slots}  NavSectionsSlots */
 export default class NavSections extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "lightblue";
     id?: string;
     cls?: string;
+    theme?: "light" | "dark" | "lightblue";
     background?: string;
     width?: "narrow" | "medium" | "wide" | "wider" | "full";
     marginTop?: boolean;
@@ -30,9 +30,9 @@ export type NavSectionsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "lightblue";
         id?: string;
         cls?: string;
+        theme?: "light" | "dark" | "lightblue";
         background?: string;
         width?: "narrow" | "medium" | "wide" | "wider" | "full";
         marginTop?: boolean;

package/dist/@types/layout/Scroller/ScrollerSection.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  ScrollerSectionEvents */
 /** @typedef {typeof __propDef.slots}  ScrollerSectionSlots */
 export default class ScrollerSection extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "lightblue";
     id?: string;
+    theme?: "light" | "dark" | "lightblue";
     title?: string;
     hideTitle?: boolean;
 }, {
@@ -18,8 +18,8 @@ export type ScrollerSectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "lightblue";
         id?: string;
+        theme?: "light" | "dark" | "lightblue";
         title?: string;
         hideTitle?: boolean;
     };

package/dist/@types/layout/Section/Section.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  SectionEvents */
 /** @typedef {typeof __propDef.slots}  SectionSlots */
 export default class Section extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "lightblue";
     id?: string;
     cls?: string;
+    theme?: "light" | "dark" | "lightblue";
     background?: string;
     width?: "narrow" | "medium" | "wide" | "wider" | "full";
     marginTop?: boolean;
@@ -24,9 +24,9 @@ export type SectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "lightblue";
         id?: string;
         cls?: string;
+        theme?: "light" | "dark" | "lightblue";
         background?: string;
         width?: "narrow" | "medium" | "wide" | "wider" | "full";
         marginTop?: boolean;

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

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  ContainerEvents */
 /** @typedef {typeof __propDef.slots}  ContainerSlots */
 export default class Container extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "lightblue";
     id?: string;
     cls?: string;
+    theme?: "light" | "dark" | "lightblue";
     background?: string;
     width?: "narrow" | "medium" | "wide" | "wider" | "full";
     height?: "full" | "auto" | "tall";
@@ -23,9 +23,9 @@ export type ContainerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "lightblue";
         id?: string;
         cls?: string;
+        theme?: "light" | "dark" | "lightblue";
         background?: string;
         width?: "narrow" | "medium" | "wide" | "wider" | "full";
         height?: "auto" | "tall" | "full";

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

@@ -2,10 +2,10 @@
 /** @typedef {typeof __propDef.events}  ThemeEvents */
 /** @typedef {typeof __propDef.slots}  ThemeSlots */
 export default class Theme extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "lightblue";
     id?: string;
     cls?: string;
     global?: boolean;
+    theme?: "light" | "dark" | "lightblue";
     overrides?: any;
     background?: string;
 }, {
@@ -20,10 +20,10 @@ export type ThemeSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "lightblue";
         id?: string;
         cls?: string;
         global?: boolean;
+        theme?: "light" | "dark" | "lightblue";
         overrides?: object;
         background?: string;
     };

package/dist/css/main.css

@@ -16,6 +16,7 @@ body {
   --background: #fff;
   --link: #206095;
   --link-hover: #003c57;
+  background: var(--background, #fff);
 }
 .theme-wrapper {
   color: var(--text);
@@ -28,8 +29,7 @@ a {
   color: var(--link, --ons-color-text-link);
 }
 a:hover {
-  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;
 }
 a:hover {
   color: var(--link-hover, --ons-color-text-link-hover);

package/dist/layout/Scroller/ScrollerSection.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte";
+  // import { onMount } from "svelte";
   import Container from "../../wrappers/Container/Container.svelte";
 
   /**
@@ -24,17 +24,17 @@
   export let hideTitle = false;
 
   let section;
-  let background;
+  // let background;
 
-  onMount(() => {
-    background = getComputedStyle(section).getPropertyValue("--background").replaceAll('"', "");
-    console.log(section, getComputedStyle(section), background);
-  });
+  // onMount(() => {
+  //   background = getComputedStyle(section).getPropertyValue("--background").replaceAll('"', "");
+  //   console.log(section, getComputedStyle(section), background);
+  // });
 </script>
 
 <section data-id="{id}" bind:this="{section}">
-  <Container theme="{theme}" width="narrow" background="none">
-    <div class="ons-scroller-section" style:--background="{background}">
+  <Container theme="{theme}" width="narrow">
+    <div class="ons-scroller-section">
       {#if title}
         <h2 class="section-title" class:ons-u-vh="{hideTitle}">{title}</h2>
       {/if}

package/dist/wrappers/Container/Container.svelte

@@ -100,7 +100,6 @@
 
 <style>
   .ons-page__container {
-    background: var(--background, "none");
     padding-top: 0.05px;
     padding-bottom: 0.05px;
   }

package/dist/wrappers/Theme/Theme.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { setContext, getContext } from "svelte";
   import themes from "./themes.js";
 
   /**
@@ -17,17 +16,11 @@
    * @type {boolean}
    */
   export let global = false;
-
-  let themeParent = global ? null : getContext("theme");
-
   /**
    * Sets a predefined theme
    * @type {"light"|"dark"|"lightblue"}
    */
-  export let theme = themeParent || null;
-
-  if (!themeParent) setContext("theme", theme);
-
+  export let theme = null;
   /**
    * Define additional props to override the base theme
    * @type {object}
@@ -37,7 +30,7 @@
    * Overrides the base theme background (accepts any valid CSS background value)
    * @type {string}
    */
-  export let background = overrides?.background || themes[theme]?.background || null;
+  export let background = null;
 
   function makeStyle(theme, overrides, background) {
     if (theme) {
@@ -57,12 +50,12 @@
 </script>
 
 <svelte:head>
-  {#if global && background}
-    {@html "<st" + `yle>body{background:${background}}</st` + "yle>"}
+  {#if global}
+    {@html "<st" + `yle>${style}</st` + "yle>"}
   {/if}
 </svelte:head>
 
-{#if style}
+{#if style && !global}
   <div id="{id}" class="{cls ? `theme-wrapper ${cls}` : 'theme-wrapper'}" style="{style}">
     <slot />
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.36",
+  "version": "0.1.0",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",