Normalize generator

views/projects/item/hex/scripts/index.js

@@ -21,20 +21,14 @@ function getData() {
     size_height.value,
     flag_type.value
   );
-  var ac = averageColors(hexValue);
+  // var ac = averageColors(hexValue);
-  console.log(ac);
+  // console.log(ac);
-  root.style.setProperty(
+  // root.style.setProperty(
-    "--background-color",
+  //   "--base-color",
-    arrayToColor(darkenColor(ac, 70))
+  //   arrayToColor(darkenColor(ac, 70))
-  );
+  // );
-  root.style.setProperty("--color", arrayToColor(lightenColor(ac, 70)));
-  root.style.setProperty("--accent-color", arrayToColor(ac));
-  root.style.setProperty(
-    "--accent-color-fg",
-    arrayToColor(lightenColor(ac, 90))
-  );
 
-  propagateStyles(getComputedStyle(root));
+  // propagateStyles(getComputedStyle(root));
 }
 generateButton.addEventListener("click", getData);
 

views/projects/item/normalize/index.html

@@ -5,7 +5,6 @@
     <title>Normalize</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="/styles/normal.css" />
-    <link rel="stylesheet" href="/styles/style.css" />
     <style>
       :root {
         --base-color: 0, 0%;
@@ -17,7 +16,6 @@
       <section>
         <h1>Normalize</h1>
       </section>
-      <section id="accessibility" hidden></section>
     </header>
     <main>
       <section>
@@ -157,9 +155,10 @@
           spirit of HTML - just keeping it vanilla, but extending it in a way
           that is infinitely useful.
         </p>
+        <h3><a href="https://jquery.com/">jQuery</a></h3>
       </section>
+      <section id="generator"></section>
     </main>
-    <script src="/scripts/accessibility.js"></script>
+    <script src="./scripts/generator.js"></script>
-    <script src="/scripts/interface.js"></script>
   </body>
 </html>

views/projects/item/normalize/scripts/generator.js

@@ -0,0 +1,208 @@
+const generator = document.getElementById("generator");
+
+generator.innerHTML = `<h2>Generator</h2>
+<fieldset>
+  <legend>Sizes</legend>
+  <label for="g_base-scale">Base scale:
+    <input
+      id="g_base-scale"
+      type="number"
+      style="width: 8ch"
+      value="16"
+      min="8"
+    />
+  </label><br />
+  <label for="g_document-width">Document width:
+    <input
+      id="g_document-width"
+      type="number"
+      style="width: 8ch"
+      value="50"
+      min="1"
+    />
+  </label>
+</fieldset>
+<fieldset>
+  <legend>Base color</legend>
+  <label for="g_base-color_hue">Page hue:
+    <input
+    id="g_base-color_hue"
+    type="range"
+    min="0"
+    max="360"
+    value="0"
+    step="30"
+    />
+  </label><br />
+  <label for="g_base-color_sat">Page saturation:
+    <input
+    id="g_base-color_sat"
+    type="range"
+    min="0"
+    max="100"
+    value="100"
+    step="10"
+    />
+  </label>
+</fieldset>
+<fieldset>
+  <legend>Fonts</legend>
+  <label for="g_font-family">Page font:
+    <input
+      id="g_font-family"
+      type="text"
+      style="width: 10em"
+      value="sans-serif"
+    />
+  </label><br />
+  <label for="g_font-weight">Font weight:
+    <input
+      id="g_font-weight"
+      type="range"
+      min="100"
+      max="900"
+      step="100"
+      value="400"
+    />
+  </label><br />
+  <hr />
+  <label for="g_header-font-family">Header font:
+    <input
+      id="g_header-font-family"
+      type="text"
+      style="width: 10em"
+      value="sans-serif"
+    />
+  </label><br />
+  <label for="g_header-font-weight">Header font weight:
+    <input
+      id="g_header-font-weight"
+      type="range"
+      min="100"
+      max="900"
+      step="100"
+      value="600"
+    />
+  </label>
+</fieldset>
+<fieldset>
+  <legend>Border style</legend>
+  <label for="g_border-width">Width:
+    <input
+      id="g_border-width"
+      type="number"
+      style="width: 8ch"
+      value="1"
+      min="0"
+    />
+  </label><br />
+  <label for="g_border-style">Style:
+    <input
+      id="g_border-style"
+      type="text"
+      style="width: 10em"
+      value="solid"
+    />
+  </label><br />
+  <label for="g_border-radius">Radius:
+    <input
+      id="g_border-radius"
+      type="number"
+      style="width: 8ch"
+      value="0"
+      min="0"
+    />
+  </label>
+</fieldset>
+<iframe id="go_view"></iframe>
+<pre id="go_code"></pre>`;
+
+const generatorFields = {
+  baseScale: document.getElementById("g_base-scale"),
+  documentWidth: document.getElementById("g_document-width"),
+
+  baseColor: {
+    hue: document.getElementById("g_base-color_hue"),
+    sat: document.getElementById("g_base-color_sat"),
+  },
+
+  fontFamily: document.getElementById("g_font-family"),
+  fontWeight: document.getElementById("g_font-weight"),
+  headerFontFamily: document.getElementById("g_header-font-family"),
+  headerFontWeight: document.getElementById("g_header-font-weight"),
+
+  borderWidth: document.getElementById("g_border-width"),
+  borderStyle: document.getElementById("g_border-style"),
+  borderRadius: document.getElementById("g_border-radius"),
+};
+
+const generatorOutputs = {
+  view: document.getElementById("go_view"),
+  code: document.getElementById("go_code"),
+}
+
+generatorFields.baseScale.addEventListener('change', preview);
+generatorFields.documentWidth.addEventListener('change', preview);
+generatorFields.baseColor.hue.addEventListener('input', preview);
+generatorFields.baseColor.sat.addEventListener('input', preview);
+generatorFields.fontFamily.addEventListener('change', preview);
+generatorFields.fontWeight.addEventListener('input', preview);
+generatorFields.headerFontFamily.addEventListener('change', preview);
+generatorFields.headerFontWeight.addEventListener('input', preview);
+generatorFields.borderWidth.addEventListener('change', preview);
+generatorFields.borderStyle.addEventListener('change', preview);
+generatorFields.borderRadius.addEventListener('change', preview);
+
+function generateNormalizeCode() {
+  return `:root {
+    --base-scale: ${generatorFields.baseScale.value}px;
+    --document-width: ${generatorFields.documentWidth.value}em;
+
+    --base-color: ${generatorFields.baseColor.hue.value}, ${generatorFields.baseColor.sat.value}%;
+
+    --font-family: ${generatorFields.fontFamily.value};
+    --font-weight: ${generatorFields.fontWeight.value};
+    --header-font-family: ${generatorFields.headerFontFamily.value};
+    --header-font-weight: ${generatorFields.headerFontWeight.value};
+
+    --border-width: calc(${generatorFields.borderWidth.value}em / 16);
+    --border-style: ${generatorFields.borderStyle.value};
+    --border-radius: calc(${generatorFields.borderRadius.value}em / 16);
+  }`
+}
+
+generatorOutputs.view.srcdoc = `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Normalize Style</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="/styles/normal.css" />
+    <style id="csshere"></style>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <p>This is a test.</p>
+    <button>Wee snaw</button>
+  </body>
+</html>`;
+
+function preview() {
+  const css = generateNormalizeCode();
+  
+  generatorOutputs.view.contentDocument.getElementById("csshere").innerHTML = css;
+  generatorOutputs.code.textContent = `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Normalize Style</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="/styles/normal.css" />
+    <style>${css}</style>
+  </head>
+  <body>
+  </body>
+</html>`;
+}
+
+generatorOutputs.view.addEventListener("load", preview);

views/scripts/accessibility.js

@@ -54,30 +54,32 @@ function createAccessibilityNodes() {
       </select>
     </label><br />
       <label for="acc-hue">Page hue:
+        <label for="acc-hue-over" class="checkbox" title="Enable override">
+          <input id="acc-hue-over" type="checkbox" />
+          <span class="checkbox">✓</span>
+        </label>
         <input
           id="acc-hue"
           type="range"
           min="0"
           max="360"
           value="0"
+          step="30"
         />
-        <label for="acc-hue-over" class="checkbox">
-          <input id="acc-hue-over" type="checkbox" />
-          <span class="checkbox">✓</span>
-        </label>
       </label><br />
       <label for="acc-sat">Page saturation:
+        <label for="acc-sat-over" class="checkbox" title="Enable override">
+          <input id="acc-sat-over" type="checkbox" />
+          <span class="checkbox">✓</span>
+        </label>
         <input
           id="acc-sat"
           type="range"
           min="0"
           max="100"
           value="100"
+          step="10"
         />
-        <label for="acc-sat-over" class="checkbox">
-          <input id="acc-sat-over" type="checkbox" />
-          <span class="checkbox">✓</span>
-        </label>
       </label><br />
     <label for="acc-base" class="checkbox">Base style:
       <input id="acc-base" type="checkbox" />
@@ -85,7 +87,8 @@ function createAccessibilityNodes() {
       (requires reload)
     </label>
   </fieldset>
-</details>`;
+</details>
+<style>`;
   document.querySelector("#accessibility").hidden = false;
 
   accScale = document.getElementById("acc-scale");

views/scripts/interface.js

@@ -2,19 +2,9 @@ function propagateStyles(rootStyles, parent) {
   if (parent == null && window.frameElement == null) return;
   const wfParent = parent ?? window.frameElement.parentElement;
   wfParent.style.setProperty(
-    "--background-color",
+    "--base-color",
-    rootStyles.getPropertyValue("--background-color")
+    rootStyles.getPropertyValue("--base-color")
   );
-  wfParent.style.setProperty("--color", rootStyles.getPropertyValue("--color"));
-  wfParent.style.setProperty(
-    "--accent-color",
-    rootStyles.getPropertyValue("--accent-color")
-  );
-  wfParent.style.setProperty(
-    "--accent-color-fg",
-    rootStyles.getPropertyValue("--accent-color-fg")
-  );
-  wfParent.style.setProperty("--border-color", "var(--color)");
 }
 
 window.addEventListener("DOMContentLoaded", () => {

views/styles/normal.css

@@ -78,6 +78,25 @@
   --border-radius: 0;
 }
 
+@media (prefers-color-scheme: light) {
+  :root {
+    /* The underlay color of the document. */
+    --underlay-color: hsl(var(--base-color), 90%);
+    /* The page color. */
+    --background-color: hsl(var(--base-color), 80%);
+    /* The foreground color of the page. */
+    --color: hsl(var(--base-color), 15%);
+    /* The accent color of the page. */
+    --accent-color: hsl(var(--base-color), 60%);
+    /* The background-adjacent accent color of the page. */
+    --accent-color-bg: hsl(var(--base-color), 30%);
+    /* The foreground accent color of the page. */
+    --accent-color-fg: hsl(var(--base-color), 5%);
+    /* The color of the borders used on certain elements. */
+    --border-color: var(--color);
+  }
+}
+
 html.base {
   --base-color: 0, 0% !important;
 
@@ -102,8 +121,6 @@ html.base {
   --border-style: solid;
   --border-color: var(--color);
   --border-radius: 0;
-
-  transition: none;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -123,10 +140,6 @@ html.base body {
   margin: 0;
 }
 
-html.base * {
-  transition: none;
-}
-
 /* Size and type normalize */
 
 html {
@@ -447,8 +460,6 @@ input[type="range"]:focus {
   outline: none;
 }
 
-/***** Chrome, Safari, Opera and Edge Chromium styles *****/
-
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
@@ -465,8 +476,6 @@ input[type="range"]:focus::-webkit-slider-thumb {
   outline: 2px solid var(--accent-color-bg);
 }
 
-/******** Firefox styles ********/
-
 input[type="range"]::-moz-range-thumb {
   border: var(--border-width) var(--border-style) var(--border-color);
   border-radius: var(--border-radius);

views/styles/normal_print.css

@@ -12,7 +12,6 @@
     --document-width: 100% !important;
 
     --border-style: calc(1em / 16) solid var(--color);
-    transition: none;
   }
   body {
     margin: 0;

views/styles/style.css

@@ -35,10 +35,6 @@
   -moz-osx-font-smoothing: grayscale;
 } */
 
-* {
-  transition: background-color 0.25s, color 0.25s, opacity 0.25s;
-}
-
 .nav {
   max-width: 38em;
   margin: auto;

views/styles/windows.css

@@ -29,9 +29,6 @@ div.window-object {
   resize: both;
   overflow: hidden;
   padding: 0.25em;
-  /* padding: 0.5em; */
-  /* transition: background-color 0.25s, color 0.25s, opacity 0.25s; */
-  transition: none;
 
   scale: 1;
   opacity: 1;
@@ -39,6 +36,40 @@ div.window-object {
   animation-duration: 0.25s;
 }
 
+div.window-object {
+  /* The underlay color of the document. */
+  --underlay-color: hsl(var(--base-color), 10%);
+  /* The page color. */
+  --background-color: hsl(var(--base-color), 15%);
+  /* The foreground color of the page. */
+  --color: hsl(var(--base-color), 85%);
+  /* The accent color of the page. */
+  --accent-color: hsl(var(--base-color), 40%);
+  /* The background-adjacent accent color of the page. */
+  --accent-color-bg: hsl(var(--base-color), 50%);
+  /* The foreground accent color of the page. */
+  --accent-color-fg: hsl(var(--base-color), 95%);
+}
+
+@media (prefers-color-scheme: light) {
+  div.window-object {
+    /* The underlay color of the document. */
+    --underlay-color: hsl(var(--base-color), 90%);
+    /* The page color. */
+    --background-color: hsl(var(--base-color), 80%);
+    /* The foreground color of the page. */
+    --color: hsl(var(--base-color), 15%);
+    /* The accent color of the page. */
+    --accent-color: hsl(var(--base-color), 60%);
+    /* The background-adjacent accent color of the page. */
+    --accent-color-bg: hsl(var(--base-color), 30%);
+    /* The foreground accent color of the page. */
+    --accent-color-fg: hsl(var(--base-color), 5%);
+    /* The color of the borders used on certain elements. */
+    --border-color: var(--color);
+  }
+}
+
 div.window-object.unfocused {
   opacity: 0.5;
 }