@toheeb/base 1.0.0

package/base-settings.js

@@ -0,0 +1,436 @@
+class BaseSettings extends HTMLElement {
+  constructor() {
+    super();
+  }
+  
+  connectedCallback() {
+    this.innerHTML = `
+      <dialog class="_bs">
+        <main>
+          <form id="base-form" method="dialog" novalidate>
+            <p>
+              <button type="submit">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
+              </button>
+            </p>
+            <p class="modes">
+              <label>
+                <input type="checkbox" id="base-mode-doc">
+                <span>Doc Mode</span>
+              </label>
+              <label>
+                <input type="checkbox" id="base-mode-indent">
+                <span>Indent Mode</span>
+              </label>
+            </p>
+            <p class="fields">
+              <label>
+                <span>Font Family</span>
+                <input type="text" id="base-font-family" list="typefaces">
+                <datalist id="typefaces">
+                  <option value="serif">Serif</option>
+                  <option value="cursive">Cursive</option>
+                  <option value="sans-serif">Sans Serif</option>
+                  <option value="system-ui">System UI</option>
+                  <option value="monospace">Monospace</option>
+                </datalist>
+
+              </label>
+              <label>
+                <span>Font Size</span>
+                <input type="number" id="base-font-size" step=".0625">
+              </label>
+              <label>
+                <span>Font Scale</span>
+                <select id="base-font-scale">
+                  <option value="1.067">Minor Second</option>
+                  <option value="1.125">Major Second</option>
+                  <option value="1.2">Minor Third</option>
+                  <option value="1.25">Major Third</option>
+                  <option value="1.333">Perfect Fourth</option>
+                  <option value="1.414">Augmented Fourth</option>
+                  <option value="1.5">Perfect Fifth</option>
+                  <option value="1.618">Golden Ratio</option>
+                </select>
+              </label>
+            </p>
+            <p class="fields">
+              <label>
+                <span>Line Height</span>
+                <input type="number" id="base-line-height" step=".0625">
+              </label>
+              <label>
+                <span>Line Length</span>
+                <input type="number" id="base-line-length">
+              </label>
+              <label>
+                <span>Block Gap</span>
+                <input type="number" id="base-block-gap" step=".0625">
+              </label>
+            </p>
+            <p class="fields">
+              <label>
+                <span>Color Scheme</span>
+                <select id="base-color-scheme">
+                  <option value="">Browser</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </label>
+              <label>
+                <span>Color Hue</span>
+                <input type="number" id="base-color-hue" min="0" max="360" step="1">
+              </label>
+            </p>
+          </form>
+        </main>
+      </dialog>
+      <style>
+        ._bs {
+          box-shadow: 
+            -0px -0px 1px oklch(from currentColor l c h / .01),
+            -2px -2px 3px oklch(from currentColor l c h / .03),
+            -4px -4px 7px oklch(from currentColor l c h / .05)
+          ;
+          margin: auto 0 0 auto;
+          max-width: 20em;
+          border: 1px solid;
+          border-color: oklch(from currentColor l c h / .5);
+          inset-block-end: 16px;
+          inset-inline-end: 16px;
+          border-radius: 1em;
+        }
+        
+        @supports 
+        (color: oklch(0 0 0)) and 
+        (color: light-dark(#000, #fff)) 
+        { 
+          ._bs {
+            background-color: light-dark(
+              oklch(1 0.003 var(--base-color-hue)),
+              oklch(0.22 .03 var(--base-color-hue))
+            );
+          }
+        }
+    
+        dialog::backdrop {
+          background: transparent;
+        }
+    
+        ._bs button[type=submit] {
+          display: flex;
+          border: 0;
+          margin: auto;
+          padding: .25em;
+        }
+    
+        ._bs form {
+          display: grid;
+          width: 100%;
+          gap: var(--bbg);
+        }
+    
+        ._bs p {
+          width: 100%;
+          display: flex;
+          flex-flow: row wrap;
+          justify-content: space-between;
+          gap: calc(.75 * var(--bbg));
+        }
+    
+        ._bs .fields label:not([hidden]) {
+          display: grid;
+          gap: .25em;
+          flex: 1 1 calc(50% - calc(.75 * var(--bbg)));
+        }
+    
+        ._bs .fields span {
+          font-size: calc(var(--bfs-075) * 1rem);
+        }
+    
+        ._bs .fields input {
+          width: 100%;
+        }
+      </style>
+  
+    `;
+
+    document.addEventListener("click", e => {
+      if (e.target.classList.contains("base-settings")) {
+        this.querySelector("dialog").showModal();
+      }
+    })
+
+    const doc_sheets = Array.from(document.styleSheets).filter(sheet => {
+      if (sheet.ownerNode.closest(this.nodeName)) {
+        return false;
+      } else {
+        return true;
+      }
+    })
+
+    
+    // onLoad
+    {
+      
+      // Doc Mode
+      {
+        const has_base_sheet = doc_sheets.some(sheet => sheet.title?.toLowerCase()?.trim() == "base");
+        const label_mode_doc = this.querySelector("#base-mode-doc").closest("label");
+        
+        if (has_base_sheet) {
+          label_mode_doc.hidden = false;
+          const has_other_sheet = doc_sheets.some(sheet => sheet.title?.toLowerCase()?.trim() != "base");
+          const mode_doc = this.querySelector("#base-mode-doc");
+
+          if (has_other_sheet) {
+            mode_doc.checked = false;
+            mode_doc.disabled = false;
+          } else {
+            mode_doc.checked = true;
+            mode_doc.disabled = true;
+          }
+        } else {
+          label_mode_doc.hidden = true;
+        }
+      }
+      
+
+      const root_styles = getComputedStyle(document.documentElement);
+
+      // Indent Mode
+      {
+        const mode_indent = root_styles.getPropertyValue("--base-mode-indent").trim();
+        const label_mode_indent = this.querySelector("#base-mode-indent").closest("label");
+        
+        if (mode_indent) {
+          label_mode_indent.hidden = false;
+          this.querySelector("#base-mode-indent").checked = parseInt(mode_indent) === 1;
+        } else {
+          label_mode_indent.hidden = true;
+        }
+      }
+      
+      // Font Family
+      {
+        const font_family = root_styles.getPropertyValue("--base-font-family").trim();
+        const label_font_family = this.querySelector("#base-font-family").closest("label");
+
+        if (font_family) {
+          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;
+        }
+
+      }
+
+      // Font Size
+      {
+        const font_size = root_styles.getPropertyValue("--base-font-size").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 {
+          label_font_size.hidden = true;
+        }
+      }
+
+      // Font Scale
+      {
+        const font_scale = root_styles.getPropertyValue("--base-font-scale").trim();
+        const label_font_scale = this.querySelector("#base-font-scale").closest("label");
+
+        if (font_scale) {
+          label_font_scale.hidden = false;
+
+          const scale_set = [1.067, 1.125, 1.2, 1.25, 1.333, 1.414, 1.5, 1.618];
+
+          if (scale_set.includes(parseFloat(font_scale))) {
+          } else {
+            const option = document.createElement("option");
+
+            option.value = font_scale;
+            option.textContent = font_scale;
+            this.querySelector("#base-font-scale").append(option);
+          }
+          
+          this.querySelector("#base-font-scale").value = font_scale;
+        } else {
+          label_font_scale.hidden = true;
+        }
+
+      }
+
+      // Line Height
+      {
+        const line_height = root_styles.getPropertyValue("--base-line-height").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 {
+          label_line_height.hidden = true;
+        }
+      }
+
+      // Line Length
+      {
+        const line_length = root_styles.getPropertyValue("--base-line-length").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 {
+          label_line_length.hidden = true;
+        }
+      }
+      
+      // Block Gap
+      {
+        const block_gap = root_styles.getPropertyValue("--base-block-gap").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 {
+          label_block_gap.hidden = true;
+        }
+      }
+      
+      // Color Hue
+      {
+        const supports = CSS.supports('color', 'oklch(0 0 0)');
+        const color_hue = root_styles.getPropertyValue("--base-color-hue").trim();
+        const label_color_hue = this.querySelector("#base-color-hue").closest("label");
+        const positive_numbers = /^\d+\.?\d*$/;
+
+        if (supports && positive_numbers.test(color_hue)) {
+          label_color_hue.hidden = false;
+          this.querySelector("#base-color-hue").value = color_hue;
+        } else {
+          label_color_hue.hidden = true;
+        }
+      }
+      
+      // Color Scheme
+      {
+        const color_scheme = document.querySelector("meta[name=color-scheme]")?.content.split(" ");
+        const node_color_scheme = this.querySelector("#base-color-scheme");
+        const has_light = color_scheme.includes("light");
+        const has_dark = color_scheme.includes("dark");
+
+        if (has_light && has_dark) {
+          node_color_scheme.value = "";
+        } else if (has_light) {
+          node_color_scheme.value = "light";
+        } else if (has_dark) {
+          node_color_scheme.value = "dark";
+        } else {
+          node_color_scheme.value = "";
+        }
+      }
+    }
+
+    // onChange
+    {
+      this.addEventListener("change", e => {
+        const form = e.target;
+        const root_style = document.documentElement.style;
+
+        switch (form.id) {
+
+          case "base-mode-doc":
+
+            if (form.checked) {
+
+              doc_sheets.forEach(sheet => {
+                if (sheet.title?.toLowerCase().trim() == "base") {
+                  sheet.disabled = false;
+                } else {
+                  
+                  // Store disabled to remember later
+                  if (sheet.disabled === true) {
+                    sheet.dataset.disabled = true;
+                  }
+
+                  sheet.disabled = true;
+                }
+              })
+
+            } else {
+              doc_sheets.forEach(sheet => {
+                if (sheet.ownerNode.dataset.disabled) {
+                  sheet.removeAttribute("data-disabled");
+                  sheet.disabled = true;
+                } else {
+                  sheet.disabled = false;
+                }
+              })
+            }
+
+            break;
+
+          case "base-mode-indent":
+            root_style.setProperty("--base-mode-indent", form.checked * 1);
+            break;
+
+          case "base-font-family":
+            root_style.setProperty("--base-font-family", form.value);
+            break;
+
+          case "base-font-size":
+            root_style.setProperty("--base-font-size", form.value);
+            break;
+
+          case "base-font-scale":
+            root_style.setProperty("--base-font-scale", form.value);
+            break;
+
+          case "base-line-height":
+            root_style.setProperty("--base-line-height", form.value);
+            break;
+
+          case "base-line-length":
+            root_style.setProperty("--base-line-length", form.value + "rem");
+            break;
+
+          case "base-block-gap":
+            root_style.setProperty("--base-block-gap", form.value);
+            break;
+
+          case "base-color-scheme":
+            document.querySelector("meta[name=color-scheme]").content = form.value;
+            break;
+
+          case "base-color-hue":
+            root_style.setProperty("--base-color-hue", form.value);
+            break;
+  
+        }
+      })
+    }
+  }
+}
+
+customElements.define("base-settings", BaseSettings);

package/base.css

@@ -0,0 +1,737 @@
+
+/* UNIVERSAL
+    ========================================================= */
+
+/* 1 */
+:root {
+  --base-corner-radius: .2em;
+}
+
+*, ::before, ::after 
+{
+  /* 1 */
+  border-radius: var(--base-corner-radius);
+
+  /* 2 */
+  box-sizing: border-box;
+}
+
+
+
+
+/* TYPOGRAPHY
+   ========================================================= */
+
+:root {
+
+  /* 1 */
+  --base-font-size: 1;
+  --base-font-scale: 1.2;
+  --base-line-height: .7;
+  --base-font-family: system-ui;
+  
+  /* 2 */
+  --bfs-050: (var(--bfs-100) / (var(--base-font-scale) * var(--base-font-scale)));
+  --bfs-075: (var(--bfs-100) / (var(--base-font-scale)));
+  --bfs-100: (var(--base-font-size));
+  --bfs-200: (var(--bfs-100) * var(--base-font-scale));
+  --bfs-300: (var(--bfs-100) * var(--base-font-scale) * var(--base-font-scale));
+  --bfs-400: (var(--bfs-100) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale));
+  --bfs-500: (var(--bfs-100) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale));
+  --bfs-600: (var(--bfs-100) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale));
+  --bfs-700: (var(--bfs-100) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale));
+  --bfs-800: (var(--bfs-100) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale));  
+  --bfs-900: (var(--bfs-100) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale) * var(--base-font-scale));  
+}
+
+/* 3a */
+p:has(~ :is(h1, h2, h3, h4, h5, h6)), 
+small, ::marker
+{
+  --bfs: var(--bfs-075);
+}
+
+/* 3b */
+body, 
+p, pre, 
+summary, legend, dt, th 
+{
+  --bfs: var(--bfs-100);
+}
+
+/* 3c */
+:is(h1, h2, h3, h4, h5, h6) ~ p 
+{
+  --bfs: var(--bfs-200);
+}
+
+
+/* 3d */
+
+h6 {
+  --bfs: var(--bfs-300);
+}
+
+h5 {
+  --bfs: var(--bfs-400);
+}
+
+h4 {
+  --bfs: var(--bfs-500);
+}
+
+h3 {
+  --bfs: var(--bfs-600);
+}
+
+h2 {
+  --bfs: var(--bfs-700);
+}
+
+h1 {
+  --bfs: var(--bfs-800);
+}
+
+/* 4 */
+body,
+h1, h2, h3, h4, h5, h6, 
+summary, legend, dt, th, 
+p, pre,
+small, ::marker
+{
+
+  /* 4a */
+  font-family: var(--base-font-family);
+
+  /* 4b */
+  font-size: calc(var(--bfs) * 1rem);
+
+  /* 4c */
+  line-height: calc(
+    1 + (
+      var(--base-line-height) / var(--bfs)      
+    )
+  );
+}
+
+/* 5 */
+p {
+  text-wrap: pretty;
+}
+
+/* 6 */
+h1, h2, h3, h4, h5, h6, 
+:is(h1, h2, h3, h4, h5, h6) ~ p,
+summary, legend, dt, th 
+{
+  text-wrap: balance;
+} 
+
+
+
+
+/* SPACING
+    ========================================================= */
+
+/* 1 - 3 */
+:root {
+
+  /* 1 */
+  --base-mode-indent: 0;
+  --base-block-gap: .9;
+  --base-line-length: 36rem;
+
+  /* 2 */
+  --bbg: calc(1rem * var(--base-block-gap) * var(--base-line-height) * var(--base-font-size));
+
+  /* 3 */
+  --bbg-100: calc( (1 - var(--base-mode-indent)) * var(--bbg));
+  --bbg-200: calc( (2 - var(--base-mode-indent)) * var(--bbg));
+  --bbg-300: calc( (3 - var(--base-mode-indent)) * var(--bbg));
+  --bbg-400: calc( (4 - var(--base-mode-indent)) * var(--bbg));
+  --bbg-500: calc( (5 - var(--base-mode-indent)) * var(--bbg));
+  --bbg-600: calc( (6 - var(--base-mode-indent)) * var(--bbg));
+  --bbg-700: calc( (7 - var(--base-mode-indent)) * var(--bbg));
+  --bbg-800: calc( (8 - var(--base-mode-indent)) * var(--bbg));
+  --bbg-900: calc( (9 - var(--base-mode-indent)) * var(--bbg));
+}
+
+/* 4 */
+h1, h2, h3, h4, h5, h6 
+{
+  /* where .15em is synonymous to line height offset */
+  padding-block: 0 .15em;
+}
+
+/* 5a */
+p:has(~ :is(h1, h2, h3, h4, h5, h6)) {
+  margin-block: 0 calc(.25 * var(--bbg));
+}
+
+/* 5b */
+dt,
+:is(h1, h2, h3, h4, h5, h6) ~ p {
+  margin-block: calc(.50 * var(--bbg));
+}
+
+/* 5c */
+p, pre {
+  margin-block: var(--bbg-100);
+}
+
+
+/* on mixes, enforce space irrespective of indent mode */
+
+ol, ul, dl
+{
+  margin-block: var(--bbg);
+}
+
+dd {
+  margin: 0;
+}
+
+table,
+iframe, object, embed, video, audio, img,
+blockquote, fieldset, address, figure, del, ins, a
+{
+  /* 
+    * add .5 to 1 to compensate for 
+    * loss of ascender and descender space 
+    * prior to border 
+    */
+  margin-block: calc(1.5 * var(--bbg));
+}
+
+:is(table,
+iframe, object, embed, video, audio, img,
+blockquote, fieldset, address, figure, del, ins, a) +
+:is(table,
+iframe, object, embed, video, audio, img,
+blockquote, fieldset, address, figure, del, ins, a) 
+{
+  /* 
+    * add .5 again to start to compensate for 
+    * loss of descender space at end of previous element 
+    * due to border to border 
+    */
+  margin-block-start: calc(2 * var(--bbg));
+}
+
+/* 5d */
+summary, legend, th 
+{
+  margin-block: calc(1.5* var(--bbg-100)) var(--bbg-100);
+}
+
+  
+/* 5e */
+
+header, 
+figcaption:first-child 
+{
+  padding: 0 0 var(--bbg-100);
+}
+
+header + *, 
+figcaption:first-child + *
+{
+  margin-block-start: var(--bbg-200);
+}
+
+footer,
+figcaption:last-child 
+{
+  padding: var(--bbg-100) 0 0;
+  margin-block-start: var(--bbg-200);
+}
+
+hgroup + * {
+  margin-block-start: var(--bbg-200);
+}
+
+hr {
+  margin-block: var(--bbg-200);
+}
+
+
+/* 5f */
+
+/* redirect margin to sections */
+h1, h2, h3, h4, h5, h6 {
+  margin-block: 0;
+}
+
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) {
+  margin-block: var(--bbg-300) 0;
+}
+
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) {
+  margin-block: var(--bbg-400) 0;
+}
+
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) {
+  margin-block: var(--bbg-500) 0;
+}
+
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) {
+  margin-block: var(--bbg-600) 0;
+}
+
+:is(section, aside, nav, article) 
+:is(section, aside, nav, article) {
+  margin-block: var(--bbg-700) 0;
+}
+
+:is(section, aside, nav, article) {
+  margin-block: var(--bbg-800);
+}
+
+/* 6 */
+p + p {
+  text-indent: calc(var(--base-mode-indent) * 1em);
+}
+
+:is(hgroup, form, search, fieldset) p + p {
+  text-indent: 0;
+}
+
+/**
+ * 7
+ *
+ * hgroup to contain kickers
+ * bordered cards to shift inline borders to content
+ * list layers to contain their markers
+ */
+hgroup,
+summary, legend, th, dt,
+p, pre, 
+blockquote, fieldset, address, figure, del, ins, a,
+ol, ul, dl
+{
+  margin-inline: auto;
+  max-width: var(--base-line-length);
+}
+
+/* 8 */
+iframe, object, embed, video, audio, img 
+{
+  display: block;
+  margin-inline: auto;
+  max-width: 100%;
+}
+
+/* 9 */
+table {
+  margin-inline: auto;
+}
+
+
+/* 10 */
+svg, math {
+  vertical-align: middle;
+}
+  
+/* 11 */
+ol, ul, dl
+{
+  padding-inline-start: 2em;
+}    
+
+/* 12 */
+/* redirect margin of body to frames */
+body {
+  margin: 0;
+}
+
+dialog {
+  padding: 0;
+}
+  
+main, td, caption {
+  padding-inline: 1rem;
+}
+
+
+
+
+
+
+/* COLOR
+========================================================= */
+
+@supports 
+(color: oklch(0 0 0)) and 
+(color: light-dark(#000, #fff)) 
+{  
+  :root {
+    --base-color-hue: 230;
+  }
+
+  body, dialog, select, input, button, textarea {
+    color: light-dark(
+      oklch(0.45 .02 var(--base-color-hue)),
+      oklch(.72 .01 var(--base-color-hue))
+    );
+    background-color: light-dark(
+      oklch(0.99 0.003 var(--base-color-hue)),
+      oklch(0.20 .03 var(--base-color-hue))
+    );
+  }
+}
+
+
+select, input, button, textarea {
+  accent-color: currentColor;
+}
+
+
+
+
+
+/************************
+** CUSTOMS
+*************************/
+
+
+/* Cued Parts */
+
+header {
+  background-image: repeating-linear-gradient(
+    45deg,
+    currentColor 0, 
+    currentColor 1.4px,
+    transparent 1.4px,
+    transparent 5px
+  );
+  background-size: var(--base-line-length) 5px;
+  background-repeat: no-repeat;
+  background-position: 50% 100%;
+}
+
+figcaption:first-child {
+  background-image: repeating-linear-gradient(
+    45deg,
+    currentColor 0, 
+    currentColor 1.4px,
+    transparent 1.4px,
+    transparent 5px
+  );
+  background-size: 50% 5px;
+  background-repeat: no-repeat;
+  background-position: 0% 100%;
+}
+
+hr {
+  background-image: repeating-linear-gradient(
+    90deg,
+    currentColor 0, 
+    currentColor 1px,
+    transparent 1px,
+    transparent 5px
+  );
+  border: 0 none;
+  height: 5px;
+  background-size: var(--base-line-length) 5px;
+  background-position: 50% 100%;
+  background-repeat: no-repeat;
+}
+    
+figcaption:last-child {
+  background-image: repeating-linear-gradient(
+    135deg,
+    currentColor 0, 
+    currentColor 1.4px,
+    transparent 1.4px,
+    transparent 5px
+  );
+  background-size: 50% 5px;
+  background-repeat: no-repeat;
+  background-position: 0% 0%;
+}
+
+footer {
+  background-image: repeating-linear-gradient(
+    135deg,
+    currentColor 0, 
+    currentColor 1.4px,
+    transparent 1.4px,
+    transparent 5px
+  );
+  background-size: var(--base-line-length) 5px;
+  background-repeat: no-repeat;
+  background-position: 50% 0%;
+}
+
+
+    
+/* Multi Kickers */  
+p:has(~ :is(h1, h2, h3, h4, h5, h6)) {
+  width: auto;
+  display: inline-block;
+  margin-inline-end: calc(2*var(--bbg));
+}
+
+
+/* Indented Disclosure */
+summary {
+  text-indent: .3em;
+}
+
+
+/* Bordered Legend */
+legend {
+  border: 1px solid currentColor;
+  padding: 0 .75em .3em;
+  margin-inline: 0;
+}
+
+
+/* Bordered Table Layer*/
+
+table {
+  border-collapse: collapse;
+}
+
+table, th, td {
+  border: 1px solid currentColor;
+}
+
+caption {
+  text-align: start;
+
+  /* border caption to table */
+  border: 1px solid currentColor;
+  border-bottom: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Marked Definition List */
+dt, dd {
+  position: relative;
+}
+
+dt::before,
+dd::before {
+  position: absolute;
+  left: -.875em;
+}
+
+dt::before {
+  content: "\203A";
+}
+
+dd::before {
+  content: "\00BB";
+}
+
+
+/* Ordered List */
+
+ol {
+  list-style-type: decimal;
+}
+
+ol ol {
+  list-style-type: lower-alpha;
+}
+
+ol ol ol {
+  list-style-type: lower-roman;
+}
+
+
+/* Marked Cards */
+
+blockquote, fieldset, address, figure,  
+del:has(p, pre, details, fieldset, table, dl),
+ins:has(p, pre, details, fieldset, table, dl),
+a[href]:has(p, pre, details, fieldset, table, dl)
+{
+  border: 1px solid currentColor;
+  padding: 0 calc(1.5 * var(--bbg)) calc(.5 * var(--bbg));
+  position: relative;
+  font-style: normal;
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+blockquote::before,
+blockquote::after,
+address::before,
+address::after,
+del:has(p, pre, details, fieldset, table, dl)::before,
+del:has(p, pre, details, fieldset, table, dl)::after,
+ins:has(p, pre, details, fieldset, table, dl)::before,
+ins:has(p, pre, details, fieldset, table, dl)::after,
+a[href]:has(p, pre, details, fieldset, table, dl)::before,
+a[href]:has(p, pre, details, fieldset, table, dl)::after
+{
+  content: "";
+  position: absolute;
+  left: .2em;
+  display: flex;
+  width: .4em;
+  height: .4em;
+  background-color: currentColor;
+}
+
+blockquote::before {
+  top: .2em;
+  clip-path: polygon(77% 96%, 22% 96%, 22% 48%, 53% 4%, 72% 4%, 51% 48%, 77% 48%, 77% 96%);
+}
+
+blockquote::after {
+  bottom: .2em;
+  clip-path: polygon(23% 4%, 78% 4%, 78% 52%, 47% 96%, 28% 96%, 49% 52%, 23% 52%, 23% 4%);
+}
+
+address::before {
+  top: .15em;
+  clip-path: circle(30% at 50% 50%);
+}
+
+address::after {
+  bottom: .15em;
+  clip-path: circle(30% at 50% 50%);
+}
+
+del:has(p, pre, details, fieldset, table, dl)::before {
+  top: .2em;
+  clip-path: polygon(100% 60%, 0% 60%, 0% 40%, 100% 40%, 100% 60%);
+}
+
+del:has(p, pre, details, fieldset, table, dl)::after {
+  bottom: .2em;
+  clip-path: polygon(100% 60%, 0% 60%, 0% 40%, 100% 40%, 100% 60%);
+}
+
+ins:has(p, pre, details, fieldset, table, dl)::before {
+  top: .2em;
+  clip-path: polygon(60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%, 0% 40%, 40% 40%, 40% 0%, 60% 0%, 60% 40%);
+}
+
+ins:has(p, pre, details, fieldset, table, dl)::after {
+  bottom: .2em;
+  clip-path: polygon(60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%, 0% 40%, 40% 40%, 40% 0%, 60% 0%, 60% 40%);
+}
+
+a[href]:has(p, pre, details, fieldset, table, dl)::before {
+  top: .2em;
+  clip-path: polygon(100% 0%, 100% 70%, 72% 42%, 22% 92%, 8% 78%, 58% 28%, 30% 0%, 100% 0%);
+}
+
+a[href]:has(p, pre, details, fieldset, table, dl)::after {
+  bottom: .2em;
+  clip-path: polygon(100% 0%, 100% 70%, 72% 42%, 22% 92%, 8% 78%, 58% 28%, 30% 0%, 100% 0%);
+}
+
+
+
+/* Scrollable Pres */
+pre {
+  padding: 1em;
+  border: 1px solid currentColor;
+  overflow: auto;
+}
+
+
+
+
+/* Trued Forms */
+
+select,
+button,
+input:not([type]),
+input[type=tel], 
+input[type=url], 
+input[type=text], 
+input[type=date], 
+input[type=week], 
+input[type=time], 
+input[type=file], 
+input[type=email], 
+input[type=month], 
+input[type=color], 
+input[type=reset], 
+input[type=submit], 
+input[type=button], 
+input[type=number], 
+input[type=search], 
+input[type=password], 
+input[type=datetime-local] {
+  border: 1px solid;
+  font: inherit;
+  padding: 0 .5em .15em;
+  height: 2em;
+  vertical-align: middle;
+  line-height: 1.2;
+}
+
+select {
+  padding-inline: .15em 1.5em;
+}
+
+input[type=range] 
+{
+  vertical-align: middle;
+}  
+
+input[type=radio], input[type=checkbox] {
+  width: 1em;
+  height: 1em;
+  font: inherit;
+  vertical-align: -.15em;
+  outline-offset: 0;
+}
+
+textarea {
+  border: 1px solid currentColor;
+  font: inherit;
+  padding: 0 .5em .25em;
+}
+
+
+
+/* Pointed Interractables */
+summary,
+a, 
+label,
+button,
+select,
+input[type=date], 
+input[type=week], 
+input[type=time], 
+input[type=file], 
+input[type=month], 
+input[type=color], 
+input[type=reset], 
+input[type=range], 
+input[type=radio], 
+input[type=button], 
+input[type=submit], 
+input[type=checkbox], 
+input[type=datetime-local] {
+  cursor: pointer;
+}
+
+
+
+
+

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@toheeb/base",
+  "version": "1.0.0",
+  "description": "A classless stylesheet for Personalizable Web Design",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": ["css"],
+  "author": "2",
+  "license": "AGPL-3.0-or-later"
+}