@swiftwc/ui 0.0.0-dev.46 → 0.0.0-dev.48

package/generated/namespace-browser/base.js

@@ -3,14 +3,6 @@ export class DialogBase extends HTMLDialogElement {
     static polyfillConnectedCallback(el) { }
     static polyfillDisconnectedCallback(el) { }
     static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
-    disconnectedCallback() {
-        const ctor = this.constructor;
-        ctor.polyfillDisconnectedCallback(this);
-    }
-    connectedCallback() {
-        const ctor = this.constructor;
-        ctor.polyfillConnectedCallback(this);
-    }
     attributeChangedCallback(name, oldValue, newValue) {
         const ctor = this.constructor;
         const entry = {
@@ -20,12 +12,6 @@ export class DialogBase extends HTMLDialogElement {
         };
         ctor.polyfillAttributeChangedCallback([entry]);
     }
-}
-export class InputBase extends HTMLInputElement {
-    static polyfillExtends = 'input';
-    static polyfillConnectedCallback(el) { }
-    static polyfillDisconnectedCallback(el) { }
-    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     disconnectedCallback() {
         const ctor = this.constructor;
         ctor.polyfillDisconnectedCallback(this);
@@ -34,6 +20,12 @@ export class InputBase extends HTMLInputElement {
         const ctor = this.constructor;
         ctor.polyfillConnectedCallback(this);
     }
+}
+export class InputBase extends HTMLInputElement {
+    static polyfillExtends = 'input';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     attributeChangedCallback(name, oldValue, newValue) {
         const ctor = this.constructor;
         const entry = {
@@ -43,12 +35,6 @@ export class InputBase extends HTMLInputElement {
         };
         ctor.polyfillAttributeChangedCallback([entry]);
     }
-}
-export class ButtonBase extends HTMLButtonElement {
-    static polyfillExtends = 'button';
-    static polyfillConnectedCallback(el) { }
-    static polyfillDisconnectedCallback(el) { }
-    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     disconnectedCallback() {
         const ctor = this.constructor;
         ctor.polyfillDisconnectedCallback(this);
@@ -57,6 +43,12 @@ export class ButtonBase extends HTMLButtonElement {
         const ctor = this.constructor;
         ctor.polyfillConnectedCallback(this);
     }
+}
+export class ButtonBase extends HTMLButtonElement {
+    static polyfillExtends = 'button';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     attributeChangedCallback(name, oldValue, newValue) {
         const ctor = this.constructor;
         const entry = {
@@ -66,12 +58,6 @@ export class ButtonBase extends HTMLButtonElement {
         };
         ctor.polyfillAttributeChangedCallback([entry]);
     }
-}
-export class DetailsBase extends HTMLDetailsElement {
-    static polyfillExtends = 'details';
-    static polyfillConnectedCallback(el) { }
-    static polyfillDisconnectedCallback(el) { }
-    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     disconnectedCallback() {
         const ctor = this.constructor;
         ctor.polyfillDisconnectedCallback(this);
@@ -80,6 +66,12 @@ export class DetailsBase extends HTMLDetailsElement {
         const ctor = this.constructor;
         ctor.polyfillConnectedCallback(this);
     }
+}
+export class DetailsBase extends HTMLDetailsElement {
+    static polyfillExtends = 'details';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     attributeChangedCallback(name, oldValue, newValue) {
         const ctor = this.constructor;
         const entry = {
@@ -89,12 +81,6 @@ export class DetailsBase extends HTMLDetailsElement {
         };
         ctor.polyfillAttributeChangedCallback([entry]);
     }
-}
-export class FormBase extends HTMLFormElement {
-    static polyfillExtends = 'form';
-    static polyfillConnectedCallback(el) { }
-    static polyfillDisconnectedCallback(el) { }
-    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     disconnectedCallback() {
         const ctor = this.constructor;
         ctor.polyfillDisconnectedCallback(this);
@@ -103,6 +89,12 @@ export class FormBase extends HTMLFormElement {
         const ctor = this.constructor;
         ctor.polyfillConnectedCallback(this);
     }
+}
+export class FormBase extends HTMLFormElement {
+    static polyfillExtends = 'form';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
     attributeChangedCallback(name, oldValue, newValue) {
         const ctor = this.constructor;
         const entry = {
@@ -112,4 +104,12 @@ export class FormBase extends HTMLFormElement {
         };
         ctor.polyfillAttributeChangedCallback([entry]);
     }
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.46",
+  "version": "0.0.0-dev.48",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/utils/_index.scss

@@ -25,16 +25,35 @@
     }
   }
 
-  :where([foreground='secondary']) {
-    color: var(--secondary);
-  }
-
-  :where([foreground='blue']) {
-    color: var(--blue);
-  }
-
-  :where([foreground='blue.secondary']) {
-    color: var(--blue2);
+  @each $k,
+    $v
+      in (
+        secondary: --secondary,
+        blue: --blue,
+        red: --red,
+        green: --green,
+        orange: --orange,
+        'blue.secondary': --blue2,
+        'red.secondary': --red2,
+        'green.secondary': --green2,
+        'orange.secondary': --orange2,
+        'blue.tertiary': --blue3,
+        'red.tertiary': --red3,
+        'green.tertiary': --green3,
+        'orange.tertiary': --orange3,
+        'blue.quaternary': --blue4,
+        'red.quaternary': --red4,
+        'green.quaternary': --green4,
+        'orange.quaternary': --orange4,
+        'blue.quinary': --blue5,
+        'red.quinary': --red5,
+        'green.quinary': --green5,
+        'orange.quinary': --orange5
+      )
+  {
+    :where([foreground='#{"" + $k}']) {
+      color: var(#{$v});
+    }
   }
 
   @each $tint in gray, blue, red, green, orange {