maverick-wave 5.5.0 → 5.7.0

package/index.html

@@ -21,7 +21,10 @@
       @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css')
       layer(vendor);
     </style>
-    <link rel="stylesheet" href="maverick-wave.min.css" />
+    <!-- ?v= so a release actually reaches a browser that has the last one
+         cached: the filename never changes, and without it a stale stylesheet
+         survives a normal reload -->
+    <link rel="stylesheet" href="maverick-wave.min.css?v={{VERSION}}" />
     <!-- Favicons -->
     <link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
     <link
@@ -151,7 +154,12 @@
         right: 18px;
         bottom: 82px;
         z-index: 400;
-        width: 300px;
+        width: 360px;
+        /* The variant list makes the panel taller than a laptop in landscape -
+           the top of it would be behind the browser chrome without this */
+        max-height: calc(100dvh - 120px);
+        overflow-y: auto;
+        overscroll-behavior: contain;
         padding: 18px;
         border-radius: 12px;
         border: 1px solid var(--mw-border);
@@ -241,7 +249,121 @@
         cursor: pointer;
       }
 
-      @media (max-width: 576px) {
+      /* Single accent means the secondary picker writes a token nothing reads any
+         more - left live it is a knob that does nothing */
+      :root.mw-accent-single .palette-field:has(#palette-secondary) {
+        opacity: 0.4;
+        pointer-events: none;
+      }
+
+      .palette-heading-split {
+        margin-top: 18px;
+        padding-top: 14px;
+        border-top: 1px solid var(--mw-border);
+      }
+
+      .variant-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding-block: 9px;
+        font-size: 0.8rem;
+        color: var(--mw-text-color);
+        cursor: pointer;
+      }
+
+      .variant-label {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .variant-label small {
+        font-size: 0.68rem;
+        line-height: 1.35;
+        color: var(--mw-text-muted-color);
+      }
+
+      .variant-row + .variant-row {
+        border-top: 1px solid var(--mw-border);
+      }
+
+      .variant-row select {
+        flex-shrink: 0;
+        max-width: 110px;
+        padding: 3px 6px;
+        font-size: 0.75rem;
+        color: var(--mw-text-color);
+        border: 1px solid var(--mw-border);
+        border-radius: 6px;
+        background: transparent;
+        cursor: pointer;
+      }
+
+      /* Drawn by hand rather than reusing mw-toggle: a framework switch would
+         reshape itself along with the variants it is there to control */
+      .variant-row input[type='checkbox'] {
+        appearance: none;
+        flex-shrink: 0;
+        position: relative;
+        width: 34px;
+        height: 18px;
+        margin: 0;
+        border: 1px solid var(--mw-border);
+        border-radius: 9px;
+        background: var(--mw-gray-background);
+        cursor: pointer;
+        transition: var(--mw-transition);
+      }
+
+      .variant-row input[type='checkbox']::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: var(--mw-text-muted-color);
+        transition: var(--mw-transition);
+      }
+
+      .variant-row input[type='checkbox']:checked {
+        background: var(--mw-primary-color);
+        border-color: var(--mw-primary-color);
+      }
+
+      .variant-row input[type='checkbox']:checked::after {
+        left: 18px;
+        background: var(--mw-primary-accent-text-color);
+      }
+
+      .variant-setup-label {
+        display: block;
+        margin-top: 14px;
+        margin-bottom: 5px;
+        font-size: 0.7rem;
+        color: var(--mw-text-muted-color);
+      }
+
+      .variant-setup {
+        display: block;
+        width: 100%;
+        resize: vertical;
+        padding: 10px;
+        border-radius: 8px;
+        border: 1px solid var(--mw-border);
+        background: var(--mw-gray-background);
+        color: var(--mw-text-muted-color);
+        font-family: var(--mw-font-family-mono);
+        font-size: 0.68rem;
+        line-height: 1.5;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      @media (max-width: 480px) {
         .palette-fab {
           right: 12px;
           bottom: 12px;
@@ -258,7 +380,7 @@
       }
     </style>
 
-    <script src="maverick-wave.min.js"></script>
+    <script src="maverick-wave.min.js?v={{VERSION}}"></script>
   </head>
 
   <body>
@@ -795,6 +917,13 @@
 
         const root = document.documentElement;
 
+        // The values the markup ships with, so the setup box below can tell a
+        // chosen colour from the built-in one and print only the difference
+        const BUILT_IN = {
+          primary: primaryInput.value,
+          secondary: secondaryInput.value,
+        };
+
         const DARK_INK = '#131925';
         const LIGHT_INK = '#f2f6fc';
 
@@ -830,6 +959,7 @@
           void root.offsetHeight;
           root.classList.remove('mw-theme-switching');
           window.mwRefreshColorSwatches?.();
+          window.mwRefreshSetup?.();
         };
 
         const paint = (name, color) => {
@@ -884,6 +1014,231 @@
         document.addEventListener('keydown', (event) => {
           if (event.key === 'Escape') toggle(false);
         });
+
+        // The seam to the variants panel below, which prints and reads the whole
+        // setup - the palette is half of it. Only inline values count as chosen:
+        // anything still coming from the stylesheet is the built-in one.
+        const PAGE_GROUNDS = {
+          dark: '--mw-dark-page-background',
+          light: '--mw-light-page-background',
+        };
+
+        window.mwPalette = {
+          read: () => ({
+            primary: root.style.getPropertyValue('--mw-primary-color') || null,
+            secondary:
+              root.style.getPropertyValue('--mw-secondary-color') || null,
+            // The label colour ink() measured for each fill. It has to travel
+            // with the setup: a project that only copies the two brand colours
+            // keeps the stock accent text, and on a light brand tone that is an
+            // unreadable button. write() recomputes it, so pasting it back is
+            // harmless.
+            primaryInk:
+              root.style.getPropertyValue('--mw-primary-accent-text-color') ||
+              null,
+            secondaryInk:
+              root.style.getPropertyValue('--mw-secondary-accent-text-color') ||
+              null,
+            dark: root.style.getPropertyValue(PAGE_GROUNDS.dark) || null,
+            light: root.style.getPropertyValue(PAGE_GROUNDS.light) || null,
+          }),
+
+          write: ({ primary, secondary, dark, light }) => {
+            const current = window.mwPalette.read();
+            const same =
+              current.primary === primary &&
+              current.secondary === secondary &&
+              current.dark === dark &&
+              current.light === light;
+            // Typing into the setup box fires per keystroke, and settle() forces
+            // a reflow - so a run that changes nothing has to cost nothing
+            if (same) return;
+
+            [
+              ['primary', primary, primaryInput],
+              ['secondary', secondary, secondaryInput],
+            ].forEach(([name, value, input]) => {
+              if (value) {
+                paint(name, value);
+                input.value = value;
+              } else {
+                root.style.removeProperty(`--mw-${name}-color`);
+                root.style.removeProperty(`--mw-${name}-accent-text-color`);
+                input.value = BUILT_IN[name];
+              }
+            });
+
+            Object.entries(PAGE_GROUNDS).forEach(([key, prop]) => {
+              const value = key === 'dark' ? dark : light;
+              if (value) root.style.setProperty(prop, value);
+              else root.style.removeProperty(prop);
+            });
+
+            const shownPrimary = primary || BUILT_IN.primary;
+            const shownSecondary = secondary || BUILT_IN.secondary;
+            items.forEach((item) =>
+              item.classList.toggle(
+                'mw-active',
+                item.dataset.primary === shownPrimary &&
+                  item.dataset.secondary === shownSecondary
+              )
+            );
+
+            settle();
+          },
+        };
+      });
+
+      // just for the showcase: the variant switches. Each one is a class on <html>
+      // or a single custom property, never a walk over the DOM - markup that
+      // arrives later (a modal, a toast, a kanban card) is covered by the same
+      // class that was already set. The readout at the bottom of the panel is the
+      // whole setup a project would carry to get the look it is currently seeing.
+      document.addEventListener('DOMContentLoaded', () => {
+        const list = document.getElementById('variant-list');
+        const setup = document.getElementById('variant-setup');
+        if (!list || !setup) return;
+
+        const root = document.documentElement;
+        const controls = [...list.querySelectorAll('input, select')];
+
+        const isOn = (input) =>
+          input.hasAttribute('data-variant-invert')
+            ? !input.checked
+            : input.checked;
+
+        const render = () => {
+          // Never while it is being typed in - the box is an input as well as a
+          // readout, and rewriting it under the cursor would eat the paste
+          if (document.activeElement === setup) return;
+
+          const classes = [];
+          const notes = [];
+          const props = [];
+
+          // The palette is part of the setup, and it is printed first because a
+          // project sets its brand colours before it retunes anything else
+          const palette = window.mwPalette?.read() ?? {};
+          [
+            ['--mw-primary-color', palette.primary],
+            ['--mw-primary-accent-text-color', palette.primaryInk],
+            ['--mw-secondary-color', palette.secondary],
+            ['--mw-secondary-accent-text-color', palette.secondaryInk],
+            ['--mw-dark-page-background', palette.dark],
+            ['--mw-light-page-background', palette.light],
+          ].forEach(([prop, value]) => {
+            if (value) props.push(`  ${prop}: ${value};`);
+          });
+
+          controls.forEach((control) => {
+            if (control.type !== 'checkbox') {
+              if (control.value) {
+                props.push(
+                  `  ${control.dataset.variantProp}: ${control.value};`
+                );
+              }
+              return;
+            }
+
+            // A targeted class is one the markup already ships, so its absence is
+            // the deviation worth naming - the rest are classes to add
+            const target = control.dataset.variantTarget;
+            if (target) {
+              if (!isOn(control)) {
+                notes.push(target + ': no ' + control.dataset.variantClass);
+              }
+            } else if (isOn(control)) {
+              classes.push(control.dataset.variantClass);
+            }
+          });
+
+          const lines = [];
+          if (classes.length) {
+            lines.push('html class="' + classes.join(' ') + '"');
+          }
+          lines.push(...notes);
+          if (props.length) lines.push(':root {', ...props, '}');
+
+          setup.value = lines.length
+            ? lines.join('\n')
+            : 'Default setup - nothing to change.';
+        };
+
+        const apply = (control) => {
+          if (control.type === 'checkbox') {
+            const target = control.dataset.variantTarget;
+            const el = target ? document.querySelector(target) : root;
+            el?.classList.toggle(control.dataset.variantClass, isOn(control));
+          } else if (control.value) {
+            root.style.setProperty(control.dataset.variantProp, control.value);
+          } else {
+            root.style.removeProperty(control.dataset.variantProp);
+          }
+        };
+
+        // The box read backwards: someone else's setup pasted in drives the
+        // switches, which drive the page. Anything the text does not mention
+        // falls back to the default, so an empty box is a reset.
+        const load = (text) => {
+          const named = new Set(
+            (text.match(/class\s*=\s*"([^"]*)"/)?.[1] || '')
+              .trim()
+              .split(/\s+/)
+              .filter(Boolean)
+          );
+          // `.mw-header: no mw-header-reveal` - a class the markup ships and the
+          // setup takes away, which is the deviation worth reading
+          const dropped = new Set(
+            [...text.matchAll(/:\s*no\s+([\w-]+)/g)].map((m) => m[1])
+          );
+          const props = new Map(
+            [...text.matchAll(/(--[\w-]+)\s*:\s*([^;\n}]+)/g)].map((m) => [
+              m[1],
+              m[2].trim(),
+            ])
+          );
+
+          window.mwPalette?.write({
+            primary: props.get('--mw-primary-color') ?? null,
+            secondary: props.get('--mw-secondary-color') ?? null,
+            dark: props.get('--mw-dark-page-background') ?? null,
+            light: props.get('--mw-light-page-background') ?? null,
+          });
+
+          controls.forEach((control) => {
+            if (control.type === 'checkbox') {
+              const name = control.dataset.variantClass;
+              const on = control.dataset.variantTarget
+                ? !dropped.has(name)
+                : named.has(name);
+              control.checked = control.hasAttribute('data-variant-invert')
+                ? !on
+                : on;
+            } else {
+              control.value = props.get(control.dataset.variantProp) ?? '';
+            }
+            apply(control);
+          });
+        };
+
+        // Picking a palette repaints the page, and the box has to say so
+        window.mwRefreshSetup = render;
+
+        setup.addEventListener('input', () => load(setup.value));
+        // Normalises what was pasted back into the shape render() writes
+        setup.addEventListener('blur', render);
+
+        controls.forEach((control) =>
+          control.addEventListener('change', () => {
+            apply(control);
+            render();
+          })
+        );
+
+        // Applied on load too, so a browser that restored a checked box after a
+        // reload does not leave the page and the panel disagreeing
+        controls.forEach(apply);
+        render();
       });
 
       // for the modals - the framework handles both shapes, div and <dialog>