@toheeb/base 1.5.6 → 1.6.1

package/base-settings.js

@@ -86,7 +86,7 @@ class BaseSettings extends HTMLElement {
         </main>
       </dialog>
       <style>
-        ._bs {
+        :where(._bs) {
           box-shadow: 
             -0px -0px 1px oklch(from currentColor l c h / .01),
             -2px -2px 3px oklch(from currentColor l c h / .03),
@@ -105,7 +105,7 @@ class BaseSettings extends HTMLElement {
         (color: oklch(0 0 0)) and 
         (color: light-dark(#000, #fff)) 
         { 
-          ._bs {
+          :where(._bs) {
             background-color: light-dark(
               oklch(1 0.003 var(--base-color-hue)),
               oklch(0.22 .03 var(--base-color-hue))
@@ -113,11 +113,11 @@ class BaseSettings extends HTMLElement {
           }
         }
     
-        dialog::backdrop {
+        :where(dialog::backdrop) {
           background: transparent;
         }
     
-        ._bs button[type=submit] {
+        :where(._bs button[type=submit]) {
           display: flex;
           justify-content: center;
           align-items: center;
@@ -126,13 +126,13 @@ class BaseSettings extends HTMLElement {
           padding: .25em;
         }
     
-        ._bs form {
+        :where(._bs form) {
           display: grid;
           width: 100%;
           gap: calc(.5 * var(--bbg));
         }
     
-        ._bs p {
+        :where(._bs p) {
           width: 100%;
           display: flex;
           flex-flow: row wrap;
@@ -140,22 +140,22 @@ class BaseSettings extends HTMLElement {
           gap: calc(.25 * var(--bbg)) calc(.75 * var(--bbg));
         }
 
-        ._bs .modes {
+        :where(._bs .modes) {
           margin-top: var(--bbg);
         }
     
-        ._bs .fields label:not([hidden]) {
+        :where(._bs .fields label:not([hidden])) {
           display: grid;
           gap: .25em;
           flex: 1 1 calc(50% - calc(.75 * var(--bbg)));
         }
     
-        ._bs .fields span {
+        :where(._bs .fields span) {
           font-size: calc(var(--bfs-075) * 1rem);
         }
     
-        ._bs .fields input, 
-        ._bs .fields select 
+        :where(._bs .fields input), 
+        :where(._bs .fields select) 
         {
           width: 100%;
         }
@@ -214,7 +214,7 @@ class BaseSettings extends HTMLElement {
         
         if (has_other_sheet) {
           label_mode_indent.hidden = true;
-          mode_indent.checked = false;
+          this.querySelector("#base-mode-indent").checked = false;
         } else {
 
           if (mode_indent) {
@@ -230,25 +230,27 @@ class BaseSettings extends HTMLElement {
       // Font Family
       {
         const font_family = root_styles.getPropertyValue("--base-font-family").trim();
+        const font_family_toggle = root_styles.getPropertyValue("--base-font-family-toggle").trim();
         const label_font_family = this.querySelector("#base-font-family").closest("label");
-
-        if (font_family) {
+        
+        if (parseInt(font_family_toggle) == 0) {
+          label_font_family.hidden = true;
+        } else {
           label_font_family.hidden = false;
-
+  
           const def_typefaces = ["serif", "sans-serif", "cursive", "system-ui", "monospace"];
-
+  
           if (def_typefaces.includes(font_family.toLowerCase())) {
           } else {
             const option = document.createElement("option");
-
+  
             option.value = font_family;
             option.textContent = font_family;
             this.querySelector("#base-font-family").append(option);
           }
           
           this.querySelector("#base-font-family").value = font_family;
-        } else {
-          label_font_family.hidden = true;
+
         }
 
       }
@@ -256,23 +258,29 @@ class BaseSettings extends HTMLElement {
       // Font Size
       {
         const font_size = root_styles.getPropertyValue("--base-font-size").trim();
+        const font_size_toggle = root_styles.getPropertyValue("--base-font-size-toggle").trim();
         const label_font_size = this.querySelector("#base-font-size").closest("label");
         const positive_numbers = /^\d+\.?\d*$/;
 
-        if (positive_numbers.test(font_size)) {
-          label_font_size.hidden = false;
-          this.querySelector("#base-font-size").value = font_size;
-        } else {
+        if (parseInt(font_size_toggle) == 0) {
           label_font_size.hidden = true;
+        } else {
+          if (positive_numbers.test(font_size)) {
+            label_font_size.hidden = false;
+            this.querySelector("#base-font-size").value = font_size;
+          }
         }
       }
 
       // Font Scale
       {
         const font_scale = root_styles.getPropertyValue("--base-font-scale").trim();
+        const font_scale_toggle = root_styles.getPropertyValue("--base-font-scale-toggle").trim();
         const label_font_scale = this.querySelector("#base-font-scale").closest("label");
-
-        if (font_scale) {
+        
+        if (parseInt(font_scale_toggle) == 0) {
+          label_font_scale.hidden = true;
+        } else {
           label_font_scale.hidden = false;
 
           const scale_set = [1.067, 1.125, 1.2, 1.25, 1.333, 1.414, 1.5, 1.618];
@@ -287,8 +295,6 @@ class BaseSettings extends HTMLElement {
           }
           
           this.querySelector("#base-font-scale").value = font_scale;
-        } else {
-          label_font_scale.hidden = true;
         }
 
       }
@@ -296,41 +302,50 @@ class BaseSettings extends HTMLElement {
       // Line Height
       {
         const line_height = root_styles.getPropertyValue("--base-line-height").trim();
+        const line_height_toggle = root_styles.getPropertyValue("--base-line-height-toggle").trim();
         const label_line_height = this.querySelector("#base-line-height").closest("label");
         const positive_numbers = /^\d*\.?\d*$/;
 
-        if (positive_numbers.test(line_height)) {
-          label_line_height.hidden = false;
-          this.querySelector("#base-line-height").value = line_height;
-        } else {
+        if (parseInt(line_height_toggle) == 0) {
           label_line_height.hidden = true;
+        } else {
+          if (positive_numbers.test(line_height)) {
+            label_line_height.hidden = false;
+            this.querySelector("#base-line-height").value = line_height;
+          } 
         }
       }
 
       // Line Length
       {
         const line_length = root_styles.getPropertyValue("--base-line-length").trim();
+        const line_length_toggle = root_styles.getPropertyValue("--base-line-length-toggle").trim();
         const label_line_length = this.querySelector("#base-line-length").closest("label");
 
-        if (parseFloat(line_length)) {
-          label_line_length.hidden = false;
-          this.querySelector("#base-line-length").value = parseFloat(line_length);
-        } else {
+        if (parseInt(line_length_toggle) == 0) {
           label_line_length.hidden = true;
+        } else {
+          if (parseFloat(line_length)) {
+            label_line_length.hidden = false;
+            this.querySelector("#base-line-length").value = parseFloat(line_length);
+          } 
         }
       }
       
       // Block Gap
       {
         const block_gap = root_styles.getPropertyValue("--base-block-gap").trim();
+        const block_gap_toggle = root_styles.getPropertyValue("--base-block-gap-toggle").trim();
         const label_block_gap = this.querySelector("#base-block-gap").closest("label");
         const positive_numbers = /^\d*\.?\d*$/;
 
-        if (positive_numbers.test(block_gap)) {
-          label_block_gap.hidden = false;
-          this.querySelector("#base-block-gap").value = block_gap;
-        } else {
+        if (parseInt(block_gap_toggle) == 0) {
           label_block_gap.hidden = true;
+        } else {
+          if (positive_numbers.test(block_gap)) {
+            label_block_gap.hidden = false;
+            this.querySelector("#base-block-gap").value = block_gap;
+          } 
         }
       }
       

package/base.html

@@ -8,6 +8,16 @@
   <link rel="stylesheet" href="./base.css" title="Base">
   <meta name="color-scheme" content="darks slight">
   <script src="./base-settings.js"></script>
+  <style>
+    :root {
+      /* --base-font-family-toggle: 0;
+      --base-font-scale-toggle: 0;
+      --base-font-size-toggle: 0;
+      --base-line-length-toggle: 0;
+      --base-line-height-toggle: 0;
+      --base-block-gap-toggle: 0; */
+    }
+  </style>
 </head>
 
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toheeb/base",
-  "version": "1.5.6",
+  "version": "1.6.1",
   "description": "A classless stylesheet for Personalizable Web Design",
   "main": "index.js",
   "scripts": {