cleanup: Layers

Author: lucsoft

demo/layer.ts

@@ -1,7 +1,7 @@
 import { Horizontal, Layer, PlainText, Vertical, View, WebGen } from "../mod.ts";
 
 WebGen({
-    // primiaryColor: "#6750A4",
+    primiaryColor: "hsl(256, 34%, 40%)",
 });
 
 View(() => Horizontal(
@@ -35,7 +35,7 @@ View(() => Horizontal(
             PlainText("Hello World! 0")
                 .setFont(1.5).setPadding("0 .5rem"),
             0
-        )
+        ).setGrow()
     ).setGap("2.5rem").setGrow(),
     Vertical(
         Layer(
@@ -67,7 +67,7 @@ View(() => Horizontal(
             PlainText("Hello World! 0")
                 .setFont(1.5).setPadding("0 .5rem"),
             0, "tint"
-        ),
+        ).setGrow(),
     ).setGap("2.5rem").setGrow(),
     Vertical(
         Layer(
@@ -99,6 +99,6 @@ View(() => Horizontal(
             PlainText("Hello World! 0")
                 .setFont(1.5).setPadding("0 .5rem"),
             0, "tint-shadow"
-        ),
+        ).setGrow(),
     ).setGap("2.5rem").setGrow()
 ).setGap("2.5rem").setPadding("2.5rem")).appendOn(document.body);

src/components/generic/Layer.css

@@ -34,8 +34,7 @@
     --layer-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
 }
 
-.wlayer.tint-shadow,
-.wlayer.shadow {
+.wlayer:is(.shadow, .tint-shadow) {
     box-shadow: var(--layer-shadow, none);
 }
 
@@ -47,11 +46,10 @@
 }
 
 
-.wlayer.tint-shadow .wlayer-inner,
-.wlayer.tint .wlayer-inner {
+.wlayer:is(.tint-shadow, .tint) .wlayer-inner {
     position: absolute;
     inset: 0;
-    background: var(--webgen-primary-color);
+    background: hsl(var(--webgen-primary-hue), var(--webgen-primary-sat), 40%);
     opacity: calc(calc(var(--color-overlay, 0%) * 1.8) - 5%);
 }
 
@@ -63,7 +61,6 @@
     --layer-shadow: none;
 }
 
-[data-theme="dark"] .wlayer:is(.tint-shadow, .tint) {
-    /* We don't have any color-mix or lsh functions so we use this hack */
-    box-shadow: 0 0 0 10000rem rgba(255, 255, 255, calc(calc(var(--color-overlay, 0%) * 1.7) - 18%)) inset;
+[data-theme="dark"] .wlayer:is(.tint-shadow, .tint) .wlayer-inner {
+    background: hsl(var(--webgen-primary-hue), var(--webgen-primary-sat), 80%);
 }

src/css/00.colors.css

@@ -1,11 +1,11 @@
 :root {
-    --layer-background: #ececec;
+    --layer-background: #e6e6e6;
     --layer-color: #000000;
     --layer-foreground-hue: 102;
     --layer-foreground-sat: 34%;
 }
 
 [data-theme="dark"] {
-    --layer-background: #141314;
+    --layer-background: #0a0a0a;
     --layer-color: #FFFFFF;
 }

src/lib/Style.ts

@@ -14,7 +14,10 @@ export class Style {
         const styleAppendTo = options.defaultElementToHookStylesIn ?? document.documentElement;
         this.options = options;
         this.theme = styleAppendTo;
-        document.adoptedStyleSheets.push(css`:root{ --webgen-primary-color: ${options.primiaryColor ?? "#5A7BF2"};}`);
+        const data = (options.primiaryColor ?? "hsl(200, 50%, 40%)")?.match(/hsl\((?<hue>\d+), (?<saturation>\d+%), .*%\)/);
+        if (!(data && data.groups && data.groups.hue && data.groups.saturation)) throw new Error("Bad Primary Color");
+        document.adoptedStyleSheets.push(css`:root{ --webgen-primary-hue: ${data.groups.hue}; --webgen-primary-sat: ${data.groups.saturation};}`);
+
         this.mediaQuery.addEventListener('change', e => {
             if (this.current == SupportedThemes.autoDark || this.current == SupportedThemes.autoLight)
                 this.updateTheme(e.matches ? SupportedThemes.autoDark : SupportedThemes.autoLight);

src/webgen.ts

@@ -40,7 +40,7 @@ export * from "./Components.ts";
 
 export type WebGenOptions = {
     updateThemeOnInit?: false,
-    primiaryColor?: string,
+    primiaryColor?: `hsl(${number}, ${number}%, 40%)`,
     colors?: ColorDef,
     icon?: Icons,
     events?: {