Hue tweaking & chroma scaling, closes #669 #670 (#747)

- General infrastructure to support palette tweaking - Hue shifts per color scale (UI, permalinks, dynamic code snippets) - Scale overall chroma up/down (UI, permalinks, dynamic code snippets) - Update contrast ratio tables (styling for contrast up/down/fail could use improvement, but it's a starting point) - Make sure it works with Turbo (i.e. things don't break when we navigate to another page)
2026-01-12 04:09:12 +00:00 · 2025-02-13 19:28:20 -05:00
parent 4bfebf3249
commit 726dc73e2a
16 changed files with 727 additions and 93 deletions
--- a/.prettierignore
+++ b/.prettierignore
@@ -13,4 +13,4 @@ package-lock.json
 tsconfig.json
 cdn
 _site
-docs/assets/scripts/prism.js
+docs/assets/scripts/prism-downloaded.js
--- a/docs/_data/hueRanges.js
+++ b/docs/_data/hueRanges.js
@@ -0,0 +1 @@
+export { hueRanges as default } from '../assets/scripts/tweak/data.js';
--- a/docs/_includes/contrast-table.njk
+++ b/docs/_includes/contrast-table.njk
@@ -1,4 +1,4 @@
-<table class="colors wa-palette-{{ paletteId }}">
+<table class="colors wa-palette-{{ paletteId }} contrast-table" data-min-contrast="{{ minContrast }}">
  <thead>
    <tr>
      <th></th>
@@ -12,15 +12,15 @@
    </tr>
  </thead>
 {% for hue in hues -%}
-<tr>
+<tr data-hue="{{ hue }}">
  <th>{{ hue | capitalize }}</th>
  {% for tint_bg in tints -%}
    {% set color_bg = palettes[paletteId][hue][tint_bg] %}
    {% for tint_fg in tints | reverse -%}
      {% set color_fg = palettes[paletteId][hue][tint_fg] %}
      {% if (tint_fg - tint_bg) | abs == difference %}
-      <td>
-        <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
+      <td data-tint-bg="{{ tint_bg }}" data-tint-fg="{{ tint_fg }}">
+        <div class="color swatch" style="--color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
          {% set contrast_wcag = '' %}
          {% if color_fg and color_bg %}
            {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -1,17 +1,24 @@
 {% set hasSidebar = true %}
 {% set hasOutline = true %}
-{# {% set forceTheme = page.fileSlug %} #}
+{% set paletteId = page.fileSlug %}

 {% extends '../_layouts/block.njk' %}

-{% set paletteId = page.fileSlug %}
+{% block head %}
+<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
+<link href="{{ page.url }}../tweak.css" rel="stylesheet">
+{% endblock %}

 {% block afterContent %}
-<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>

 {% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
+{% set maxChroma = 0 %}
+<div id="palette-app">
+<div
+  :class="{ tweaking: tweaking.chroma, 'tweaking-chroma': tweaking.chroma, 'tweaking-hue': tweaking.chroma }"
+  :style="{ '--chroma-scale': chromaScale }">

-<table class="colors wa-palette-{{ paletteId }}">
+<table class="colors main wa-palette-{{ paletteId }}">
  <thead>
    <tr>
      <th></th>
@@ -21,17 +28,57 @@
      {%- endfor %}
    </tr>
  </thead>
+{# Initialize to last hue before gray #}
+{%- set hueBefore = hues[hues|length - 2] -%}
 {% for hue in hues -%}
-<tr>
-  <th>{{ hue | capitalize }}</th>
-  <td class="core-column">
-    <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
+{%- set coreColor = palettes[paletteId][hue][palettes[paletteId][hue].maxChromaTint] -%}
+{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
+<tr data-hue="{{ hue }}" class="color-scale" :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
+    :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
+  <th>
+    {{ hue | capitalize }}
+  </th>
+  <td class="core-column" style="--color: var(--wa-color-{{ hue }})">
+    {% if hue !== 'gray' %}
+    {%- set hueAfter = hues[loop.index0 + 1] -%}
+    {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
+    {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
+    {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
+    <wa-dropdown>
+    <div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
      {{ palettes[paletteId][hue].maxChromaTint }}
-      <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+      <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
    </div>
+    <div class="popup">
+      <div class="decorated-slider hue-shift-slider" style="--min: {{ minShift }}; --max: {{ maxShift }};">
+        <wa-slider name="{{ hue }}-shift" v-model="hueShifts.{{ hue }}" value="0"
+          min="{{ minShift }}" max="{{ maxShift }}" step="1"
+          @input="tweaking.hue = tweaking.{{hue}} = true"
+          @change="tweaking.hue = tweaking.{{ hue }} = false">
+          <div slot="label">
+            Tweak {{ hue }} hue
+            <wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
+          </div>
+        </wa-slider>
+        <div class="label-min">More {{hueBefore}}</div>
+        <div class="label-max">More {{hueAfter}}</div>
+      </div>
+      <div class="wa-gap-s">
+        <code>--wa-color-{{ hue }}</code>
+        <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
+      </div>
+    </div>`
+    </wa-dropdown>
+    {%- set hueBefore = hue -%}
+    {% else %}
+    <div id="core-{{ hue }}-swatch" class="color swatch" data-tint="core" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
+      {{ palettes[paletteId][hue].maxChromaTint }}
+    </div>
+    {% endif %}
  </td>
  {% for tint in tints -%}
-    <td>
+    {%- set color = palettes[paletteId][hue][tint] -%}
+    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
      </div>
@@ -41,6 +88,37 @@
 {%- endfor %}
 </table>

+{% set chromaScaleBounds = [
+(0.08 / maxChroma) | number({maximumFractionDigits: 2}),
+(0.3 / maxChroma]) | number({maximumFractionDigits: 2}) -%}
+<div class="decorated-slider chroma-scale-slider wa-palette-{{ paletteId }}"
+:class="{ tweaked: chromaScale !== 1 }"
+style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
+  <wa-slider name="chroma-scale" v-model="chromaScale" value="1" step="0.01"
+    min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
+    @input="tweaking.chroma = true"
+    @change="tweaking.chroma = false">
+    <div slot="label">
+      Overall colorfulness
+      <wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
+    </div>
+  </wa-slider>
+  <div class="label-min">More muted</div>
+  <div class="label-max">More vibrant</div>
+</div>
+
+</div>
+</div>
+
+<script>
+  globalThis.wa_data = {
+    paletteId: '{{ paletteId }}',
+    colors: {{ palettes[paletteId] | dump | safe }},
+    maxChroma: {{ maxChroma }},
+  }
+</script>
+<script type="module" src="{{ page.url }}../tweak.js"></script>
+
 <h2>Used By</h2>

 <section class="index-grid">
@@ -65,6 +143,7 @@ A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for larg
 {% endmarkdown %}

 {% set difference = 40 %}
+{% set minContrast = 3 %}
 {% include "contrast-table.njk" %}

 {% markdown %}
@@ -84,6 +163,7 @@ A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for no
 {% endmarkdown %}

 {% set difference = 50 %}
+{% set minContrast = 4.5 %}
 {% include "contrast-table.njk" %}

 {% markdown %}
@@ -102,6 +182,7 @@ A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all
 {% endmarkdown %}

 {% set difference = 60 %}
+{% set minContrast = 7 %}
 {% include "contrast-table.njk" %}

 {% markdown %}
@@ -114,7 +195,7 @@ This also goes for a difference of `65`:
 {% include "contrast-table.njk" %}

 {% markdown %}
-## How to use this palette
+## How to use this palette { #usage }

 If you are using a Web Awesome theme that uses this palette, it will already be included.
 To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
--- a/docs/assets/scripts/prism-downloaded.js
+++ b/docs/assets/scripts/prism-downloaded.js
--- a/docs/assets/scripts/prism.js
+++ b/docs/assets/scripts/prism.js
--- a/docs/assets/scripts/remix.js
+++ b/docs/assets/scripts/remix.js
@@ -1,37 +0,0 @@
-/**
- * Get import code for remixed themes.
- */
-export const urls = {
-  colors: id => `styles/themes/${id}/color.css`,
-  palette: id => `styles/color/${id}.css`,
-  brand: id => `styles/brand/${id}.css`,
-  typography: id => `styles/themes/${id}/typography.css`,
-};
-
-function getImport(url, options = {}) {
-  let { language = 'html', cdnUrl = '/dist/', attributes } = options;
-  url = cdnUrl + url;
-
-  if (language === 'css') {
-    return `@import url('${url}');`;
-  } else {
-    attributes = attributes ? ` ${attributes}` : '';
-    return `<link rel="stylesheet" href="${url}"${attributes} />`;
-  }
-}
-
-export function getCode(base, params, options) {
-  let ret = [];
-
-  if (base) {
-    ret.push(`styles/themes/${base}.css`);
-  }
-
-  ret.push(
-    ...Object.entries(params)
-      .filter(([aspect, id]) => Boolean(id))
-      .map(([aspect, id]) => urls[aspect](id)),
-  );
-
-  return ret.map(url => getImport(url, options)).join('\n');
-}
--- a/docs/assets/scripts/tweak.js
+++ b/docs/assets/scripts/tweak.js
@@ -0,0 +1,6 @@
+/**
+ * Get import code for remixed themes and tweaked palettes.
+ */
+export { palette as getPaletteCode, theme as getThemeCode } from './tweak/code.js';
+export { cdnUrl, hueRanges, hues, selectors, tints, urls } from './tweak/data.js';
+export { default as Permalink } from './tweak/permalink.js';
--- a/docs/assets/scripts/tweak/code.js
+++ b/docs/assets/scripts/tweak/code.js
@@ -0,0 +1,109 @@
+/**
+ * Get import code for remixed themes and tweaked palettes.
+ */
+import { selectors, urls } from './data.js';
+
+export function cssImport(url, options = {}) {
+  let { language = 'html', cdnUrl = '/dist/', attributes } = options;
+  url = cdnUrl + url;
+
+  if (language === 'css') {
+    return `@import url('${url}');`;
+  } else {
+    attributes = attributes ? ` ${attributes}` : '';
+    return `<link rel="stylesheet" href="${url}"${attributes} />`;
+  }
+}
+
+export function cssLiteral(value, options = {}) {
+  let { language = 'html' } = options;
+
+  if (language === 'css') {
+    return value;
+  } else {
+    return `<style>\n${value}\n</style>`;
+  }
+}
+
+export function theme(base, params, options) {
+  let ret = [];
+
+  if (base) {
+    ret.push(urls.theme(base));
+  }
+
+  ret.push(
+    ...Object.entries(params)
+      .filter(([aspect, id]) => Boolean(id))
+      .map(([aspect, id]) => urls[aspect](id)),
+  );
+
+  return ret.map(url => cssImport(url, options)).join('\n');
+}
+
+export function palette(paletteId, tweaks, options) {
+  let imports = [];
+
+  if (paletteId) {
+    imports.push(urls.palette(paletteId));
+  }
+
+  let css = '';
+
+  if (tweaks) {
+    let { hueShifts, chromaScale = 1 } = tweaks;
+    let declarations = [];
+
+    if (chromaScale !== 1) {
+      declarations.push(`--wa-chroma-scale: ${chromaScale};`);
+    }
+
+    if (hueShifts || chromaScale !== 1) {
+      let element = document.querySelector(`.wa-palette-${paletteId}`) ?? document.documentElement;
+      let cs = getComputedStyle(element);
+
+      for (let hue in hueShifts) {
+        let shift = hueShifts[hue];
+
+        if ((!shift && chromaScale === 1) || hue === 'orange') {
+          continue;
+        }
+
+        let shiftCode = shift > 0 ? `+ ${shift}` : `- ${-shift}`;
+        let c = chromaScale === 1 ? 'c' : `calc(c * var(--wa-chroma-scale))`;
+        let h = shift ? `calc(h ${shiftCode})` : 'h';
+        declarations.push(`--wa-color-${hue}-tweak: l ${c} ${h});`);
+
+        for (let suffix of ['', '-05', '-10', '-20', '-30', '-40', '-50', '-60', '-70', '-80', '-90', '-95']) {
+          let baseColor = cs.getPropertyValue(`--wa-color-${hue}${suffix}`);
+          // Work around https://bugs.webkit.org/show_bug.cgi?id=287637
+          let colorSpace = ['-95', '-90'].includes(suffix) ? '  lch' : 'oklch';
+          let value = `${colorSpace}(from ${baseColor.padEnd(7)} var(--wa-color-${hue}-tweak))`;
+          suffix = (suffix + ':').padEnd(4);
+          declarations.push(`--wa-color-${hue}${suffix} ${value};`);
+        }
+
+        declarations.push('');
+      }
+    }
+
+    if (declarations.length > 0) {
+      css += cssRule(selectors.palette(paletteId), declarations);
+    }
+  }
+
+  let ret = imports.map(url => cssImport(url, options)).join('\n');
+
+  if (css) {
+    ret += `\n\n${cssLiteral(css, options)}`;
+  }
+
+  return ret;
+}
+
+export function cssRule(selector, declarations, { indent = '  ' } = {}) {
+  selector = Array.isArray(selector) ? selector.flat().join(',\n') : selector;
+  declarations = Array.isArray(declarations) ? declarations.flat() : declarations;
+  declarations = declarations.map(declaration => indent + declaration.trim()).join('\n');
+  return `${selector} {\n${declarations.trimEnd()}\n}`;
+}
--- a/docs/assets/scripts/tweak/data.js
+++ b/docs/assets/scripts/tweak/data.js
@@ -0,0 +1,34 @@
+/**
+ * Data related to theme remixing and palette tweaking
+ * Must work in both browser and Node.js
+ */
+export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/';
+
+export const urls = {
+  theme: id => `styles/themes/${id}.css`,
+  colors: id => `styles/themes/${id}/color.css`,
+  palette: id => `styles/color/${id}.css`,
+  brand: id => `styles/brand/${id}.css`,
+  typography: id => `styles/themes/${id}/typography.css`,
+};
+
+export const selectors = {
+  palette: id =>
+    [':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'),
+};
+
+export const hueRanges = {
+  red: { min: 5, max: 35 }, // 30
+  orange: { min: 35, max: 60 }, // 25
+  yellow: { min: 60, max: 112 }, // 45
+  green: { min: 112, max: 170 }, // 55
+  cyan: { min: 170, max: 220 }, // 50
+  blue: { min: 220, max: 265 }, // 45
+  indigo: { min: 265, max: 290 }, // 25
+  purple: { min: 290, max: 320 }, // 30
+  pink: { min: 320, max: 365 }, // 45
+};
+
+export const hues = Object.keys(hueRanges);
+
+export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
--- a/docs/assets/scripts/tweak/permalink.js
+++ b/docs/assets/scripts/tweak/permalink.js
@@ -0,0 +1,79 @@
+const IDENTITY = x => x;
+
+export default class Permalink extends URLSearchParams {
+  /** Params changed since last URL I/O */
+  changed = false;
+
+  constructor(params) {
+    super(location.search);
+    this.params = params;
+  }
+
+  toJSON() {
+    return Object.fromEntries(this.entries());
+  }
+
+  #mappings = new WeakMap();
+
+  mapObject(obj, mapping = {}) {
+    this.#mappings.set(obj, mapping);
+  }
+
+  readFrom(obj) {
+    let mapping = this.#mappings.get(obj) ?? {};
+    let { keyFrom = IDENTITY, valueFrom = IDENTITY } = mapping;
+
+    for (let key in obj) {
+      let value = obj[key];
+      let mappedValue = valueFrom(value);
+      let mappedKey = keyFrom(key);
+      this.set(mappedKey, mappedValue);
+    }
+  }
+
+  writeTo(obj) {
+    let mapping = this.#mappings.get(obj) ?? {};
+    let { keyTo = IDENTITY, valueTo = IDENTITY, canExtend = false } = mapping;
+
+    for (let [key, value] of this) {
+      let mappedKey = keyTo(key);
+      let mappedValue = valueTo(value);
+
+      if (canExtend || mappedKey in obj) {
+        obj[mappedKey] = mappedValue;
+      }
+    }
+  }
+
+  set(key, value, defaultValue) {
+    let oldValue = this.get(key);
+
+    if (!value || value == defaultValue) {
+      super.delete(key);
+
+      if (oldValue) {
+        this.changed = true;
+      }
+    } else {
+      super.set(key, value);
+
+      if (String(value) !== String(oldValue)) {
+        this.changed = true;
+      }
+    }
+  }
+
+  /**
+   * Update page URL if it has changed since last time
+   */
+  updateLocation() {
+    if (this.changed) {
+      // If there’s already a search, replace it.
+      // We don’t want to clog the user’s history while they iterate
+      let search = this.toString();
+      let historyAction = location.search && search ? 'replaceState' : 'pushState';
+      history[historyAction](null, '', `?${search}`);
+      this.changed = false;
+    }
+  }
+}
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -400,9 +400,18 @@ wa-page > main:has(> .index-grid) {

  &.color {
    border-color: transparent;
+    transition: background var(--wa-transition-slow);
+    background: linear-gradient(var(--color-2, transparent) 0% 100%) no-repeat border-box var(--color,);
+    background-position: var(--color-2-position, bottom);
+    background-size: var(--color-2-width, 100%) var(--color-2-height, 50%);
+
+    &.contrast-fail {
+      outline: 1px dashed var(--wa-color-red);
+      outline-offset: calc(-1 * var(--wa-space-2xs));
+    }
  }

-  wa-copy-button {
+  > wa-copy-button {
    position: absolute;
    top: 0;
    left: 0;
@@ -463,6 +472,34 @@ table.colors {
  }
 }

+.value-up,
+.value-down {
+  position: relative;
+
+  &::after {
+    content: ' ' var(--icon);
+    position: absolute;
+    margin-inline-start: 3em;
+    scale: 1 0.6;
+    color: color-mix(in oklch, oklch(from var(--icon-color) none c h) 0%, oklch(from currentColor l none none));
+    font-size: 90%;
+  }
+}
+
+.value-down {
+  --icon: '▼';
+  --icon-color: var(--wa-color-danger-fill-quiet);
+
+  &::after {
+    margin-block-end: -0.2em;
+  }
+}
+
+.value-up {
+  --icon: '▲';
+  --icon-color: var(--wa-color-success-fill-quiet);
+}
+
 /* Layout Examples */
 .layout-example-boundary {
  border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
--- a/docs/docs/palettes/tweak.css
+++ b/docs/docs/palettes/tweak.css
@@ -0,0 +1,140 @@
+:root {
+  --fa-sliders-simple: '\f1de';
+}
+
+.core-column {
+  position: relative;
+
+  > wa-dropdown {
+    min-width: 100%;
+  }
+}
+
+wa-dropdown > .color.swatch {
+  cursor: pointer;
+}
+
+.decorated-slider {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  margin-block-end: var(--wa-space-xl);
+
+  wa-slider {
+    grid-column: 1 / -1;
+    --track-height: 1em;
+    --track-color-inactive: transparent;
+    --track-color-active: transparent;
+    --thumb-color: var(--color-tweaked, var(--color));
+
+    &::part(base) {
+      background: linear-gradient(to right in oklch, var(--color-1), var(--color-2));
+    }
+  }
+
+  [slot='label'] {
+    min-height: 1.1lh;
+  }
+
+  .clear-button {
+    vertical-align: middle;
+    font-size: var(--wa-font-size-xs);
+
+    &:not(.tweaked *) {
+      display: none;
+    }
+  }
+
+  .label-min,
+  .label-max {
+    font-size: var(--wa-font-size-xs);
+  }
+
+  .label-min {
+    grid-column: 1;
+    margin-inline-start: 0.15em;
+  }
+
+  .label-max {
+    grid-column: 3;
+    margin-inline-end: 0.1em;
+  }
+}
+
+.hue-shift-slider {
+  --color-1: oklch(from var(--color) l c calc(h + var(--min, 0)));
+  --color-2: oklch(from var(--color) l c calc(h + var(--max, 0)));
+}
+
+.chroma-scale-slider {
+  --color: var(--wa-color-brand);
+  --color-1: oklch(from var(--color) l calc(c * var(--min)) h);
+  --color-2: oklch(from var(--color) l calc(c * var(--max)) h);
+  --color-tweaked: oklch(from var(--color) l calc(c * var(--chroma-scale)) h);
+}
+
+.popup {
+  background: var(--wa-color-surface-default);
+  border: 1px solid var(--wa-color-surface-border);
+  padding: var(--wa-space-xl);
+  border-radius: var(--wa-border-radius-m);
+
+  code {
+    white-space: nowrap;
+  }
+}
+
+.color-scale {
+  th {
+    white-space: nowrap;
+  }
+
+  td:not([data-hue='gray'] *) {
+    --tweak-c: calc(c * var(--chroma-scale, 1));
+    --tweak-h: calc(h + var(--hue-shift, 0));
+    --color-tweaked: oklch(from var(--color) l var(--tweak-c) var(--tweak-h));
+    --color-tweaked-no-chroma-scale: oklch(from var(--color) l c var(--tweak-h));
+    --color-tweaked-no-hue-shift: oklch(from var(--color) l var(--tweak-c) h);
+
+    &:is([data-tint='90'], [data-tint='95']) {
+      /* Work around  https://bugs.webkit.org/show_bug.cgi?id=287637 */
+      --color-tweaked: lch(from var(--color) l var(--tweak-c) var(--tweak-h));
+      --color-tweaked-no-chroma-scale: lch(from var(--color) l c var(--tweak-h));
+      --color-tweaked-no-hue-shift: lch(from var(--color) l var(--tweak-c) h);
+
+      /* outline: 1px dashed red; */
+    }
+  }
+
+  .color.swatch {
+    --color-2: var(--color-tweaked);
+    --color-2-height: 100%;
+
+    &:is(.tweaking *) {
+      --color-2-height: 70%;
+
+      &:is(.tweaking-chroma *) {
+        --color: var(--color-tweaked-no-chroma-scale);
+      }
+
+      &:is(.tweaking-hue *) {
+        --color: var(--color-tweaked-no-hue-shift);
+      }
+    }
+  }
+
+  .tweak-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: var(--wa-space-s);
+    opacity: var(--tweak-icon-opacity, 0%);
+  }
+
+  .core-column:hover {
+    --tweak-icon-opacity: 40%;
+  }
+
+  &.tweaked .core-column {
+    --tweak-icon-opacity: 80%;
+  }
+}
--- a/docs/docs/palettes/tweak.js
+++ b/docs/docs/palettes/tweak.js
@@ -0,0 +1,194 @@
+// TODO move these to local imports
+import Color from 'https://colorjs.io/dist/color.js';
+import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
+
+import { cdnUrl, getPaletteCode, hueRanges, hues, Permalink, tints } from '../../assets/scripts/tweak.js';
+import Prism from '/assets/scripts/prism.js';
+
+await Promise.all(['wa-slider'].map(tag => customElements.whenDefined(tag)));
+
+// // Detect https://bugs.webkit.org/show_bug.cgi?id=287637
+// const SAFARI_OKLCH_BUG = (() => {
+//   let dummy = document.createElement('div');
+//   document.body.appendChild(dummy);
+//   dummy.style.color = 'oklch(from #d5e0e6 l c h)';
+//   let computedColor = getComputedStyle(dummy).color;
+//   dummy.remove();
+//   return computedColor.endsWith(' 0)');
+// })();
+
+let paletteAppSpec = {
+  data() {
+    const { paletteId, colors, maxChroma } = wa_data;
+
+    // Replace colors with their oklch coords (since they're all opaque and all in the same color space)
+    for (let hue in colors) {
+      for (let tint of tints) {
+        colors[hue][tint] = colors[hue][tint].coords;
+      }
+    }
+
+    return {
+      permalink: new Permalink(),
+      hueRanges,
+      hueShifts: Object.fromEntries(hues.map(hue => [hue, 0])),
+      paletteId,
+      originalColors: colors,
+      maxChroma,
+      chromaScale: 1,
+      tweaking: {},
+    };
+  },
+
+  created() {
+    // Read URL params and apply them. This facilitates permalinks.
+    this.permalink.mapObject(this.hueShifts, {
+      keyTo: key => key.replace(/-shift$/, ''),
+      keyFrom: key => key + '-shift',
+      valueFrom: value => (!value ? '' : Number(value)),
+      valueTo: value => (!value ? 0 : Number(value)),
+    });
+
+    if (location.search) {
+      // Update from URL
+      this.permalink.writeTo(this.hueShifts);
+
+      if (this.permalink.has('chroma-scale')) {
+        this.chromaScale = Number(this.permalink.get('chromaScale') || 1);
+      }
+    }
+  },
+
+  mounted() {
+    if (this.isTweaked) {
+      // Update contrast colors
+      updateContrastTables(this.colors);
+    }
+  },
+
+  computed: {
+    tweaks() {
+      return { hueShifts: this.hueShifts, chromaScale: this.chromaScale };
+    },
+
+    isTweaked() {
+      return Object.values(this.hueShifts).some(Boolean);
+    },
+
+    paletteHTML() {
+      return getPaletteCode(this.paletteId, this.tweaks, { language: 'html', cdnUrl });
+    },
+
+    paletteCSS() {
+      return getPaletteCode(this.paletteId, this.tweaks, { language: 'css', cdnUrl });
+    },
+
+    colors() {
+      let ret = {};
+
+      for (let hue in this.originalColors) {
+        ret[hue] = {};
+
+        for (let tint of tints) {
+          ret[hue][tint] = this.originalColors[hue][tint].slice();
+
+          if (this.hueShifts[hue]) {
+            ret[hue][tint][2] += this.hueShifts[hue];
+          }
+
+          if (this.chromaScale !== 1) {
+            ret[hue][tint][1] *= this.chromaScale;
+          }
+        }
+      }
+
+      return ret;
+    },
+  },
+
+  watch: {
+    // Note: These could move to `v-html` directives if we widen the app root
+    paletteHTML() {
+      let codeElement = document.querySelector('#usage ~ wa-tab-group.import-stylesheet-code code.language-html');
+      codeElement.textContent = this.paletteHTML;
+      let copyButton = codeElement.previousElementSibling;
+      copyButton.value = this.paletteHTML;
+      Prism.highlightElement(codeElement);
+    },
+
+    paletteCSS() {
+      let codeElement = document.querySelector('#usage ~ wa-tab-group.import-stylesheet-code code.language-css');
+      codeElement.textContent = this.paletteCSS;
+      let copyButton = codeElement.previousElementSibling;
+      copyButton.value = this.paletteCSS;
+      Prism.highlightElement(codeElement);
+    },
+
+    hueShifts: {
+      deep: true,
+      handler() {
+        this.permalink.readFrom(this.hueShifts);
+
+        // Update page URL
+        this.permalink.updateLocation();
+
+        // Update contrast colors
+        updateContrastTables(this.colors);
+      },
+    },
+
+    chromaScale() {
+      this.permalink.set('chroma-scale', this.chromaScale, 1);
+
+      // Update page URL
+      this.permalink.updateLocation();
+
+      // Update contrast colors
+      updateContrastTables(this.colors);
+    },
+  },
+
+  compilerOptions: {
+    isCustomElement: tag => tag.startsWith('wa-'),
+  },
+};
+
+function init() {
+  globalThis.paletteApp = createApp(paletteAppSpec).mount('#palette-app');
+}
+
+function updateContrastTables(colors) {
+  for (let table of document.querySelectorAll('.contrast-table')) {
+    let { minContrast } = table.dataset;
+
+    for (let tr of table.querySelectorAll('tr[data-hue]')) {
+      let { hue } = tr.dataset;
+
+      for (let td of tr.querySelectorAll('td[data-tint-bg][data-tint-fg]')) {
+        let swatch = td.querySelector('.color.swatch');
+
+        let { tintBg, tintFg, originalContrast } = td.dataset;
+
+        let bg = new Color('oklch', colors[hue][tintBg]);
+        let fg = new Color('oklch', colors[hue][tintFg]);
+
+        if (!originalContrast) {
+          td.dataset.originalContrast = originalContrast = swatch.textContent.trim();
+        }
+
+        let contrast = bg.contrast(fg, 'WCAG21').toLocaleString(undefined, { maximumSignificantDigits: 2 });
+        swatch.textContent = contrast;
+
+        swatch.classList.toggle('value-up', contrast > originalContrast);
+        swatch.classList.toggle('value-down', contrast < originalContrast);
+        swatch.classList.toggle('contrast-fail', contrast < minContrast);
+
+        swatch.style.setProperty('--color', bg.display());
+        swatch.style.setProperty('color', fg.display());
+      }
+    }
+  }
+}
+
+init();
+addEventListener('turbo:render', init);
--- a/docs/docs/themes/demo.njk
+++ b/docs/docs/themes/demo.njk
@@ -34,7 +34,8 @@ eleventyComputed:
 </wa-image-comparer>

 <script type="module">
-import { getCode, urls as stylesheetURLs } from "/assets/scripts/remix.js";
+import { urls as stylesheetURLs } from "/assets/scripts/tweak/data.js";
+import { theme as getThemeCode } from "/assets/scripts/tweak/code.js";

 function updateTheme() {
  let params = new URLSearchParams(window.location.search);
@@ -57,7 +58,7 @@ function updateTheme() {
  }

  let msgs = [];
-  let code = getCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
+  let code = getThemeCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
  document.head.insertAdjacentHTML('beforeend', code);

  for (let name in stylesheetURLs) {
--- a/docs/docs/themes/remix.js
+++ b/docs/docs/themes/remix.js
@@ -1,12 +1,6 @@
-import { getCode } from '/assets/scripts/remix.js';
-
+import Prism from '/assets/scripts/prism.js';
+import { cdnUrl, getThemeCode, Permalink } from '/assets/scripts/tweak.js';
 await Promise.all(['wa-select', 'wa-option', 'wa-details'].map(tag => customElements.whenDefined(tag)));
-globalThis.Prism = globalThis.Prism || {};
-globalThis.Prism.manual = true;
-await import('/assets/scripts/prism.js');
-Prism.plugins.customClass.prefix('code-');
-
-const cdnUrl = document.documentElement.dataset.cdnUrl;

 const domChange = document.startViewTransition ? document.startViewTransition.bind(document) : fn => fn();

@@ -57,17 +51,11 @@ function init() {
      typography: '',
    },
    params: { colors: '', palette: '', brand: '', typography: '' },
-    urlParams: new URLSearchParams(location.search),
+    urlParams: new Permalink(),
  };

-  // Read URL params and apply them. This facilitates permalinks.
-  if (location.search) {
-    for (let aspect in data.params) {
-      if (data.urlParams.has(aspect)) {
-        data.params[aspect] = data.urlParams.get(aspect);
-      }
-    }
-  }
+  data.urlParams.mapObject(data.params);
+  data.urlParams.writeTo(data.params);

  if (computed.isRemixed) {
    // Start with the remixing UI open if the theme has been remixed
@@ -133,16 +121,11 @@ function render(changedAspect) {

  for (let aspect in data.params) {
    let value = data.params[aspect];
-
-    if (value) {
-      data.urlParams.set(aspect, value);
-    } else {
-      data.urlParams.delete(aspect);
-    }
-
    selects[aspect].value = value;
  }

+  data.urlParams.readFrom(data.params);
+
  // Update demo URL
  domChange(() => {
    url.search = data.urlParams;
@@ -150,16 +133,14 @@ function render(changedAspect) {
    return new Promise(resolve => (demo.onload = resolve));
  });

-  // Update page URL. If there’s already a search, replace it.
-  // We don’t want to clog the user’s history while they iterate
-  let historyAction = location.search ? 'replaceState' : 'pushState';
-  history[historyAction](null, '', `?${data.urlParams}`);
+  // Update page URL
+  data.urlParams.updateLocation();

  // Update code snippets
  for (let language in codeSnippets) {
    let codeSnippet = codeSnippets[language];
    let copyButton = codeSnippet.previousElementSibling;
-    let code = getCode(data.baseTheme, data.params, { language, cdnUrl });
+    let code = getThemeCode(data.baseTheme, data.params, { language, cdnUrl });
    codeSnippet.textContent = code;
    copyButton.value = code;
    Prism.highlightElement(codeSnippet);
				`@@ -0,0 +1 @@`
				`export { hueRanges as default } from '../assets/scripts/tweak/data.js';`