@threadlabs/looma 0.33.1 → 0.34.0

package/docs/theme.mjs

@@ -1,3 +1,10 @@
+const bounds = {
+  'text-size': [14, 24], 'control-size': [32, 64], 'corner-roundness': [0, 32],
+  'line-weight': [.5, 3], density: [.75, 1.5], 'scale-contrast': [1, 1.5],
+  'space-curve': [.5, 2], 'text-weight': [400, 700], 'outer-depth': [0, 2], 'inner-depth': [0, 2],
+  'response-time': [0, 600],
+};
+
 /** The shared authoring schema; ids remain stable in saved recipes. */
 export const themeFields = [
   ['Colour', 'action', 'Action', '--ui-accent', 'colour', '#5b55d6', 'Primary commands and selected controls.'],
@@ -16,22 +23,40 @@ export const themeFields = [
   ['Size & spacing', 'line-weight', 'Line weight', '--ui-border-width', 'length', '1px', 'Shared edge weight; focus stays independently visible.'],
   ['Material', 'outer-depth', 'Outer depth', '--ui-outer-depth', 'nonnegative', '0.6', 'How strongly controls and floating surfaces rise above the page.'],
   ['Material', 'inner-depth', 'Inner depth', '--ui-inner-depth', 'nonnegative', '0.3', 'How strongly fields and pressed controls sit into their surface.'],
+  ['Material', 'glassiness', 'Glassiness', '--ui-glassiness', 'fraction', '0', 'Frosted blur, richer background colour and light-catching glass edges. Content stays readable.'],
+  ['Material', 'surface-separation', 'Surface separation', '--ui-surface-separation', 'fraction', '0', 'One material offset, scaled by popup purpose and actual size: quiet tooltips through substantial dialogs.'],
   ['Material', 'translucency', 'Overlay translucency', '--ui-overlay-translucency', 'fraction', '0', 'How much background comes through floating surfaces.'],
   ['Material', 'edge-light', 'Edge light', '--ui-edge-light', 'fraction', '0', 'Light caught by surface edges, independent of depth.'],
   ['Motion', 'response-time', 'Response time', '--ui-motion-fast', 'time', '120ms', 'Shared feedback pace; floating transitions take proportionally longer.'],
   ['Motion', 'response-curve', 'Response curve', '--ui-motion-ease', 'easing', 'cubic-bezier(0.2,0,0.2,1)', 'How movement accelerates and settles.'],
-].map(([family, id, label, property, type, defaultValue, description]) => Object.freeze({ family, id, label, property, type, defaultValue, description }));
+].map(([family, id, label, property, type, defaultValue, description]) => Object.freeze({ family, id, label, property, type, defaultValue, description, ...(bounds[id] ? { min: bounds[id][0], max: bounds[id][1] } : type === 'fraction' ? { min: 0, max: 1 } : {}) }));
 
 export const defaultRecipe = () => ({ schemaVersion: 1, values: Object.fromEntries(themeFields.map(field => [field.id, field.defaultValue])) });
 const starting = values => ({ schemaVersion: 1, values: { ...defaultRecipe().values, ...values } });
 export const startingPoints = {
   clear: defaultRecipe(),
-  library: starting({ action: '#2e1228', canvas: '#f7f7f5', surface: '#fffefd', text: '#0d0c0c', 'body-font': 'Arial, sans-serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'control-size': '42px', 'scale-contrast': '1.18', 'outer-depth': '1', 'inner-depth': '1', translucency: '0.18', 'edge-light': '1', 'response-time': '150ms', 'response-curve': 'ease' }),
+  bookish: starting({ action: '#2e1228', canvas: '#f7f7f5', surface: '#fffefd', text: '#0d0c0c', 'body-font': 'Arial, sans-serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'control-size': '42px', 'scale-contrast': '1.18', 'outer-depth': '1', 'inner-depth': '1', glassiness: '0.8', 'surface-separation': '0.65', translucency: '0.18', 'edge-light': '1', 'response-time': '150ms', 'response-curve': 'ease' }),
+  wiki: starting({ action: '#4f46e5', canvas: '#ffffff', surface: '#ffffff', text: '#1a1a1a', 'control-size': '34px', density: '0.85', 'scale-contrast': '1.15', 'corner-roundness': '6px', 'outer-depth': '0.35', 'inner-depth': '0', 'response-time': '110ms' }),
   editorial: starting({ action: '#182c24', canvas: '#eee9dc', surface: '#fffdf5', text: '#182c24', 'corner-roundness': '0px', 'outer-depth': '0', 'inner-depth': '0', 'body-font': 'Georgia, serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'line-weight': '2px', 'response-time': '90ms', 'response-curve': 'linear' }),
   night: starting({ action: '#a7b8ff', canvas: '#11141c', surface: '#202634', text: '#edf1fb', 'corner-roundness': '12px', 'outer-depth': '1.4', 'inner-depth': '0.45', translucency: '0.2', 'edge-light': '0.65', 'response-time': '210ms', 'response-curve': 'cubic-bezier(0.2,0.8,0.2,1)' }),
   garden: starting({ action: '#256342', canvas: '#eef5e7', surface: '#fcfff6', text: '#173121', 'corner-roundness': '22px', 'outer-depth': '0.35', 'inner-depth': '0', 'edge-light': '0.2', 'control-size': '46px', 'scale-contrast': '1.24', density: '1.05', 'response-time': '180ms', 'response-curve': 'cubic-bezier(0.16,1,0.3,1)' }),
 };
-export const startingPointLabels = { clear: 'Clear', library: 'Library', editorial: 'Editorial', night: 'Night', garden: 'Garden' };
+// Preserve the public historical startingPoints.library import without a duplicate UI preset.
+Object.defineProperty(startingPoints, 'library', { value: startingPoints.bookish });
+export const startingPointLabels = { clear: 'Clear', bookish: 'Bookish', wiki: 'Wiki', editorial: 'Editorial', night: 'Night', garden: 'Garden' };
+const paletteKeys = ['action', 'canvas', 'surface', 'text'];
+// Palette choices move only the shared color seeds; size, material and motion stay independent.
+export const themePalettes = Object.fromEntries([
+  ['clear', 'Indigo & mist'], ['bookish', 'Plum & paper'], ['wiki', 'Indigo & chalk'],
+  ['editorial', 'Ink & parchment'], ['night', 'Midnight'], ['garden', 'Forest & cream'],
+].map(([id, label]) => [id, { label, values: Object.fromEntries(paletteKeys.map(key => [key, startingPoints[id].values[key]])) }]));
+
+/** Identify a coordinated palette without coupling it to the rest of a recipe. */
+export function paletteFor(input) {
+  const { values } = validateRecipe(input);
+  return Object.entries(themePalettes).find(([, palette]) => paletteKeys.every(key => values[key].toLowerCase() === palette.values[key].toLowerCase()))?.[0] ?? 'custom';
+}
+
 const scalar = /^[+]?(?:\d+(?:\.\d*)?|\.\d+)$/;
 const length = /^(?:0|[+]?(?:\d+(?:\.\d*)?|\.\d+)(?:px|rem|em|ex|ch|cap|ic|lh|rlh|vw|vh|vi|vb|vmin|vmax|svw|svh|lvw|lvh|dvw|dvh|cm|mm|Q|in|pt|pc))$/;
 const font = /^(?:"[^"\\;{}<>@\x00-\x1f]+"|'[^'\\;{}<>@\x00-\x1f]+'|[\p{L}_-][\p{L}\p{N}_ -]*)(?:\s*,\s*(?:"[^"\\;{}<>@\x00-\x1f]+"|'[^'\\;{}<>@\x00-\x1f]+'|[\p{L}_-][\p{L}\p{N}_ -]*))*$/u;
@@ -39,7 +64,21 @@ const time = /^[+]?(?:\d+(?:\.\d*)?|\.\d+)(?:ms|s)$/;
 function easing(value) {
   if (/^(ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end)$/.test(value)) return true;
   const match = /^cubic-bezier\(\s*([\d.+-]+)\s*,\s*([\d.+-]+)\s*,\s*([\d.+-]+)\s*,\s*([\d.+-]+)\s*\)$/.exec(value);
-  return Boolean(match && match.slice(1).every(n => Number.isFinite(Number(n))) && [1, 3].every(i => Number(match[i]) >= 0 && Number(match[i]) <= 1));
+  return Boolean(match && match.slice(1).every(n => Number.isFinite(Number(n))) && [1, 3].every(i => Number(match[i]) >= 0 && Number(match[i]) <= 1) && [2, 4].every(i => Number(match[i]) >= -1 && Number(match[i]) <= 2));
+}
+
+// Authoring bounds are shared by every entry path. Relative lengths keep their units;
+// viewport/font-metric lengths are constrained at use time rather than guessed in JS.
+
+const pixels = { px: 1, cm: 96 / 2.54, mm: 96 / 25.4, Q: 96 / 101.6, in: 96, pt: 96 / 72, pc: 16 };
+function boundedNumber(field, value) {
+  if (field.type === 'time') return parseFloat(value) * (value.endsWith('ms') ? 1 : 1000);
+  if (field.type.includes('length')) {
+    if (value === '0') return 0;
+    const unit = value.match(/[a-z]+$/i)?.[0];
+    return Object.hasOwn(pixels, unit) ? parseFloat(value) * pixels[unit] : undefined;
+  }
+  return Number(value);
 }
 
 /** Validate the whole recipe before previewing or writing any output. */
@@ -67,6 +106,10 @@ export function validateRecipe(input) {
       }
     }
     if (!valid) throw new Error(`${field.label}: enter a valid ${field.type.replaceAll('-', ' ')} value.`);
+    if (Object.hasOwn(bounds, field.id)) {
+      const number = boundedNumber(field, value), [min, max] = bounds[field.id];
+      if (number !== undefined && (number < min || number > max)) throw new Error(`${field.label}: choose a value between ${min} and ${max}${field.type.includes('length') ? 'px (or equivalent)' : field.type === 'time' ? 'ms' : ''}.`);
+    }
   }
   return { schemaVersion: 1, values };
 }
@@ -83,18 +126,94 @@ const luminance = hex => rgb(hex).map(n => { const s = n / 255; return s <= .040
 const contrast = (a, b) => (Math.max(luminance(a), luminance(b)) + .05) / (Math.min(luminance(a), luminance(b)) + .05);
 const foreground = (fill, light, dark) => [light, dark, '#ffffff', '#000000'].sort((a, b) => contrast(fill, b) - contrast(fill, a))[0];
 
-/** Shared public seeds; combine with theme-system.css for a standalone exported theme. */
-export function themeCSS(input, systemCSS = '') {
+/** Find the nearest mixture with a known readable endpoint, including every supplied surface. */
+function readableColour(seed, surfaces, minimum, endpoint) {
+  if (surfaces.every(surface => contrast(seed, surface) >= minimum)) return seed;
+  for (let step = 1; step <= 256; step++) {
+    const next = mix(seed, endpoint, 1 - step / 256);
+    if (surfaces.every(surface => contrast(next, surface) >= minimum)) return next;
+  }
+  return endpoint;
+}
+
+/** Resolve editable colour seeds into a coordinated set of readable semantic roles. */
+export function deriveTheme(input, { mode } = {}) {
+  if (mode !== undefined && !['light', 'dark'].includes(mode)) throw new Error('Unknown theme color mode.');
   const { values } = validateRecipe(input);
   const tokens = Object.fromEntries(themeFields.map(field => [field.property, values[field.id]]));
-  tokens['--ui-on-accent'] = foreground(values.action, values.surface, values.text);
-  tokens['--ui-surface-sunken'] = mix(values.surface, values.canvas, .92);
-  let muted = values.text;
-  for (let weight = .72; weight <= 1; weight += .01) { muted = mix(values.text, values.surface, weight); if (contrast(muted, values.surface) >= 4.5) break; }
-  tokens['--ui-text-secondary'] = muted;
-  let danger = '#c92d1e';
-  for (let weight = 0; weight <= 1; weight += .02) { danger = mix('#c92d1e', values.text, 1 - weight); if (Math.min(contrast(danger, values.surface), contrast(danger, values.canvas)) >= 4.5) break; }
-  tokens['--ui-danger'] = danger; tokens['--ui-on-danger'] = foreground(danger, values.surface, values.text);
+  for (const field of themeFields.filter(field => field.type.includes('length') && Object.hasOwn(bounds, field.id))) {
+    if (boundedNumber(field, values[field.id]) === undefined) {
+      const [min, max] = bounds[field.id]; tokens[field.property] = `clamp(${min}px, ${values[field.id]}, ${max}px)`;
+    }
+  }
+  const adjustments = [];
+  const nativeInk = foreground(values.canvas, '#ffffff', '#000000');
+  const ink = mode === 'light' ? '#000000' : mode === 'dark' ? '#ffffff' : nativeInk;
+  const paper = ink === '#000000' ? '#ffffff' : '#000000';
+  // Preserve the requested palette in its native mode. The companion keeps a restrained
+  // tint of the same surface seeds; contrast resolution below governs all usable roles.
+  const companionSurface = mix(values.text, paper, .8);
+  const surface = seed => readableColour(nativeInk === ink ? seed : mix(seed, companionSurface, .02), [ink], 7, paper);
+  tokens['--ui-surface'] = surface(values.canvas);
+  tokens['--ui-surface-raised'] = surface(values.surface);
+  tokens['--ui-surface-sunken'] = surface(mix(tokens['--ui-surface-raised'], tokens['--ui-surface'], .92));
+  const surfaces = ['--ui-surface', '--ui-surface-raised', '--ui-surface-sunken'].map(name => tokens[name]);
+  const tones = { accent: values.action, danger: '#c92d1e', success: '#007a33', warning: '#ba5b0b', info: '#0066cc' };
+  for (const [tone, seed] of Object.entries(tones)) {
+    const fill = readableColour(seed, surfaces, 5, ink);
+    tokens[`--ui-${tone}`] = fill;
+    tokens[`--ui-on-${tone}`] = foreground(fill, '#ffffff', '#000000');
+    tokens[`--ui-${tone}-on-strong`] = tokens[`--ui-on-${tone}`];
+    tokens[`--ui-${tone}-hover`] = mix(fill, ink, .86);
+    tokens[`--ui-${tone}-active`] = mix(fill, ink, .74);
+    tokens[`--ui-${tone}-soft`] = mix(fill, tokens['--ui-surface-raised'], .08);
+  }
+  // Readable roles cover the quiet tinted surfaces as well as the neutral family.
+  const readingSurfaces = [...surfaces, ...Object.keys(tones).flatMap(tone => surfaces.map(background => mix(tokens[`--ui-${tone}`], background, .12)))];
+  for (const tone of Object.keys(tones)) {
+    tokens[`--ui-${tone}-subtle-text`] = readableColour(tokens[`--ui-${tone}`], readingSurfaces, 4.5, ink);
+  }
+  const textSeed = nativeInk === ink ? values.text : mix(values.text, ink, .08);
+  tokens['--ui-text'] = readableColour(textSeed, readingSurfaces, 4.5, ink);
+  tokens['--ui-text-secondary'] = readableColour(mix(tokens['--ui-text'], tokens['--ui-surface-raised'], .72), readingSurfaces, 4.5, ink);
+  tokens['--ui-text-muted'] = tokens['--ui-text-secondary'];
+  tokens['--ui-selection-surface'] = mix(tokens['--ui-accent'], tokens['--ui-surface-raised'], .1);
+  tokens['--ui-selection-text'] = tokens['--ui-accent-subtle-text'];
+  tokens['--ui-selection-border'] = mix(tokens['--ui-accent'], tokens['--ui-surface-raised'], .2);
+  tokens['--ui-control-surface'] = tokens['--ui-surface-raised'];
+  tokens['--ui-control-border'] = readableColour(mix(tokens['--ui-text'], tokens['--ui-surface-raised'], .43), readingSurfaces, 3, ink);
+  tokens['--ui-control-border-hover'] = tokens['--ui-control-border'];
+  tokens['--ui-border-strong'] = tokens['--ui-control-border'];
+  tokens['--ui-disabled-text'] = tokens['--ui-text-secondary'];
+  tokens['--ui-disabled-surface'] = tokens['--ui-surface-sunken'];
+  tokens['--ui-disabled-border'] = tokens['--ui-control-border'];
+  tokens['--ui-focus-ring'] = readableColour(tokens['--ui-accent'], readingSurfaces, 3, ink);
   tokens['--ui-focus-width'] = 'max(2px, calc(var(--ui-border-width) * 2))';
-  return `/* Looma shared semantic theme. */\n${systemCSS}\n:root, [data-theme], [data-contrast] {\n${Object.entries(tokens).map(([name, value]) => `  ${name}: ${value};`).join('\n')}\n}\n@media (prefers-reduced-motion: reduce) {\n  :root, [data-theme], [data-contrast] { --ui-motion-fast: 0ms; --ui-motion-base: 0ms; --ui-motion-press: 0ms; --ui-press-scale: 1; }\n}\n`;
+  tokens['color-scheme'] = ink === '#000000' ? 'light' : 'dark';
+  for (const [id, property] of [['action', '--ui-accent'], ['canvas', '--ui-surface'], ['surface', '--ui-surface-raised'], ['text', '--ui-text']]) {
+    if (tokens[property].toLowerCase() !== values[id].toLowerCase()) adjustments.push({ id, requested: values[id], resolved: tokens[property], reason: 'Adjusted to keep the shared palette readable.' });
+  }
+  return { tokens, adjustments };
+}
+
+/** Shared public seeds; combine with theme-system.css for a standalone exported theme. */
+export function themeCSS(input, systemCSS = '', { scope = 'portable' } = {}) {
+  if (!['portable', 'documentation'].includes(scope)) throw new Error('Unknown theme scope.');
+  // The early documentation stylesheet wins over the baseline loaded later without !important.
+  const selector = scope === 'documentation'
+    ? ':root[data-looma-documentation-theme], :root[data-looma-documentation-theme] [data-theme], :root[data-looma-documentation-theme] [data-contrast]'
+    : ':root, [data-theme], [data-contrast]';
+  const light = deriveTheme(input, { mode: 'light' }).tokens;
+  const dark = deriveTheme(input, { mode: 'dark' }).tokens;
+  const palette = [], geometry = [];
+  for (const [name, value] of Object.entries(light)) {
+    if (name === 'color-scheme') continue;
+    if (/^#[\da-f]{6}$/i.test(value)) palette.push(`  ${name}: light-dark(${value}, ${dark[name]});`);
+    else geometry.push(`  ${name}: ${value};`);
+  }
+  const geometrySelector = scope === 'documentation' ? ':root[data-looma-documentation-theme]' : ':root';
+  // Resolve colors at their point of use, so a nearer mode boundary wins independently
+  // of the selector specificity needed to restore an early documentation theme.
+  // Keep the first comment stable: the local writer recognizes its generated files by this marker.
+  return `/* Looma shared semantic theme. */\n/* Always includes light and dark.\n   Set data-theme="light" or "dark" on any element to fix that subtree's mode.\n   Leave the root attribute unset to follow the system; a switch can set/remove it. */\n${systemCSS}\n${geometrySelector} {\n${geometry.join('\n')}\n}\n${selector} {\n${palette.join('\n')}\n}\n:root:not([data-theme]) { color-scheme: light dark; }\n[data-theme="light"] { color-scheme: light; }\n[data-theme="dark"] { color-scheme: dark; }\n@media (prefers-reduced-motion: reduce) {\n  ${selector} { --ui-motion-fast: 0ms; --ui-motion-base: 0ms; --ui-motion-press: 0ms; --ui-press-scale: 1; }\n}\n`;
 }

package/docs/value-editors.mjs

@@ -0,0 +1,33 @@
+/** Translate canonical recipe values for the reusable value editors; never duplicate design bounds here. */
+const lengthUnits = { px: 1, rem: 16, em: 16, cm: 96 / 2.54, mm: 96 / 25.4, Q: 96 / 101.6, in: 96, pt: 96 / 72, pc: 16 };
+const timeUnits = { ms: 1, s: 1000 };
+const rounded = value => String(Number(Number(value).toFixed(6)));
+
+export function valueEditor(field, value, { remPixels = 16 } = {}) {
+  if (field.type === 'easing') return { kind: /^step-/.test(value) ? 'text' : 'curve', value };
+  if (['colour', 'font'].includes(field.type)) return { kind: 'text', value };
+  if (field.type.includes('length') || field.type === 'time') {
+    const unit = value.match(/[a-z]+$/i)?.[0] ?? 'px';
+    const units = field.type === 'time' ? timeUnits : { ...lengthUnits, rem: remPixels, em: remPixels };
+    const factor = units[unit];
+    return { kind: 'number', value: value === '0' ? '0px' : value, unit,
+      min: factor ? field.min / factor : .001, max: factor ? field.max / factor : 1000000,
+      step: (field.type === 'time' ? 10 : field.id === 'line-weight' ? .25 : 1) / (factor ?? 1),
+      units: field.type === 'time' ? ['ms', 's'] : ['px', 'rem'], convertible: Boolean(factor) };
+  }
+  const scale = field.type === 'fraction' || field.id === 'density' ? 100 : 1;
+  return { kind: field.type === 'weight' ? 'number' : 'slider', value: field.type === 'weight' ? value : Number(value) * scale,
+    min: field.min * scale, max: field.max * scale, step: field.type === 'weight' ? 50 : scale === 100 ? 1 : .01,
+    unit: scale === 100 ? '%' : '', scale };
+}
+
+export function editorValue(field, value) {
+  return field.type === 'fraction' || field.id === 'density' ? rounded(Number(value) / 100) : String(value);
+}
+
+export function convertValueUnit(value, nextUnit, { remPixels = 16 } = {}) {
+  const unit = value.match(/[a-z]+$/i)?.[0] ?? 'px';
+  const units = Object.hasOwn(timeUnits, unit) ? timeUnits : { ...lengthUnits, rem: remPixels, em: remPixels };
+  if (!Object.hasOwn(units, unit) || !Object.hasOwn(units, nextUnit)) throw new Error('Choose compatible units.');
+  return rounded(parseFloat(value) * units[unit] / units[nextUnit]) + nextUnit;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -127,7 +127,7 @@
     "@tiptap/pm": ">=2 <3",
     "@tiptap/vue-3": ">=2 <3",
     "vue": "^3.5.43",
-    "markupress": "^0.8.0",
+    "markupress": "^0.8.3",
     "@nextwebwg/htmlkit": "1.0.0-alpha.69",
     "vite": "^8.3.4"
   },

package/styles/ui-button.css

@@ -167,7 +167,7 @@
 
     /* A count is an adornment, not another line of label text. Keep the standard control height
        with enough inset for a 24px mark; large content can still grow the button naturally. */
-    :scope:where([data-component~="ui-button"]):not([variant="link"]):has(.badge:not(:empty)) {
+    :scope:where([data-component~="ui-button"]):not([data-appearance="link"]):has(.badge:not(:empty)) {
       padding-block: var(--ui-space-0-5) !important;
     }
 
@@ -212,7 +212,7 @@
 
     /* Card actions inherit Button's palette and behavior; only their shared layout changes.
        The icon may contain any decorative composition. Empty icons remove their column. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"] {
       display: grid !important;
       grid-template-columns: auto minmax(0, 1fr) auto;
       align-content: center !important;
@@ -225,10 +225,10 @@
       box-shadow: none;
       background-image: none;
     }
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][size="lg"] {
       min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
     }
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]:has(.card-icon:empty) {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"]:has(.card-icon:empty) {
       grid-template-columns: minmax(0, 1fr) auto;
     }
     .card-icon {
@@ -255,11 +255,11 @@
     }
 
     /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"] {
       border-color: var(--ui-button-border, var(--ui-border));
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--ui-border-strong));
     }
 
@@ -271,19 +271,19 @@
       box-shadow: var(--ui-pressed);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"] {
       border-color: var(--_tone);
       background-color: var(--_tone);
       color: var(--_on-tone);
       box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
     }
 
-    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :is(:scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-hover);
       border-color: var(--_tone-hover);
     }
 
-    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
+    :is(:scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"]):active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-active);
       border-color: var(--_tone-active);
       background-image: none;
@@ -292,7 +292,7 @@
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
        destructive secondary action, not a special case. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=neutral"] {
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"] {
       --_hue: var(--ui-text);
       --_hue-hover: var(--ui-text);
       --_hue-active: var(--ui-text);
@@ -300,40 +300,40 @@
       --_on-hue: var(--ui-surface);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=danger"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
+    :scope:where([data-component~="ui-button"])[data-tone="danger"], :scope:where([data-component~="ui-button"])[data-appearance="danger"] {
       --_hue: var(--ui-danger);
       --_hue-hover: var(--ui-danger-hover);
-      --_hue-active: var(--ui-danger-hover);
-      --_hue-text: var(--ui-danger-hover);
+      --_hue-active: var(--ui-danger-active, var(--ui-danger-hover));
+      --_hue-text: var(--ui-danger-subtle-text);
       --_on-hue: var(--ui-on-danger);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=success"] {
+    :scope:where([data-component~="ui-button"])[data-tone="success"] {
       --_hue: var(--ui-success);
-      --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-success-hover);
+      --_hue-active: var(--ui-success-active);
+      --_hue-text: var(--ui-success-subtle-text);
+      --_on-hue: var(--ui-success-on-strong);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=warning"] {
+    :scope:where([data-component~="ui-button"])[data-tone="warning"] {
       --_hue: var(--ui-warning);
-      --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-warning-hover);
+      --_hue-active: var(--ui-warning-active);
+      --_hue-text: var(--ui-warning-subtle-text);
+      --_on-hue: var(--ui-warning-on-strong);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=info"] {
+    :scope:where([data-component~="ui-button"])[data-tone="info"] {
       --_hue: var(--ui-info);
-      --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-info-hover);
+      --_hue-active: var(--ui-info-active);
+      --_hue-text: var(--ui-info-subtle-text);
+      --_on-hue: var(--ui-info-on-strong);
     }
 
     /* A value picker is a field, with Select's quiet edge and resting lift. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="field"] {
       --_ui-field-shadow: var(--ui-shadow-sm);
       border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -343,23 +343,23 @@
       box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="field"]:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-text-secondary)));
       background-color: var(--ui-button-hover-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       --_ui-field-shadow: var(--ui-pressed);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[data-appearance="field"]:focus-visible {
       border-color: var(--ui-control-focus, var(--ui-accent-solid));
       box-shadow:
         var(--ui-button-shadow, var(--_ui-field-shadow)),
         var(--ui-control-focus-halo-shadow);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="ghost"] {
       border-color: transparent;
       background: transparent;
       box-shadow: none;
@@ -367,14 +367,14 @@
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
       border-color: transparent;
     }
 
     /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
        edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
       border-color: transparent;
       box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
@@ -388,13 +388,13 @@
         var(--ui-focus-halo);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[data-appearance="solid"]:focus-visible {
       box-shadow:
         var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
-    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]):focus-visible {
+    :is(:scope:where([data-component~="ui-button"])[data-appearance="ghost"], :scope:where([data-component~="ui-button"])[data-appearance="link"], :scope:where([data-component~="ui-button"])[data-appearance="card"]):focus-visible {
       box-shadow: var(--ui-focus-halo);
     }
 
@@ -416,7 +416,7 @@
     }
 
     /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :scope:where([data-component~="ui-button"])[data-appearance="ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background-color: var(--ui-disabled-surface);
       border-color: transparent;
     }
@@ -433,12 +433,12 @@
        a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
        area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
        Only these need it: a hit area on every button would reach over its neighbours. */
-    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"],
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-appearance="link"],
     html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"] {
       position: relative;
     }
 
-    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]::after, 
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-appearance="link"]::after, 
     html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"]::after {
       position: absolute;
       inset: 50% auto auto 50%;
@@ -450,7 +450,7 @@
 
     /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
        WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"] {
       display: inline !important;
       min-block-size: 0;
       padding: 0 !important;
@@ -467,24 +467,24 @@
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
       background: none;
       transform: none;
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"]:active:not(:disabled, [aria-disabled="true"]) {
       background: none;
       transform: none;
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background: none;
       border-color: transparent;
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"]:focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);

package/styles/ui-card.css

@@ -49,6 +49,47 @@
       box-shadow: var(--ui-shadow-lg);
     }
 
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+      --_ui-panel-glass: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-panel-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+      --_ui-panel-rim: calc((var(--_ui-panel-separation) + var(--_ui-panel-glass) * 0.25) * 0.65 * 8px);
+      border-width: calc(var(--ui-border-width) + var(--_ui-panel-rim));
+      border-color: transparent;
+      background:
+        linear-gradient(var(--_ui-card-surface), var(--_ui-card-surface)) padding-box,
+        linear-gradient(var(--ui-material-glass, var(--ui-surface-raised)), var(--ui-material-glass, var(--ui-surface-raised))) border-box,
+        var(--_ui-card-surface) padding-box;
+      box-shadow:
+        var(--ui-shadow-lg),
+        inset 0 0 0 var(--ui-border-width) var(--ui-material-edge, var(--ui-border-strong));
+      backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px)) saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px)) saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+    }
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+        background: var(--_ui-card-surface);
+      }
+    }
+    @media (prefers-reduced-transparency: reduce) {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+        background: var(--_ui-card-surface);
+        border-width: var(--ui-border-width);
+        border-color: var(--ui-border-strong);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+        background: Canvas;
+        color: CanvasText;
+        border: var(--ui-border-width) solid CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=accent"] {
       border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
       --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
@@ -116,6 +157,12 @@
 @scope ([data-component~="ui-card"]) to ([data-component]) {
 /* A surface that groups content. Its children stack with even space between them, so a card
        needs no layout of its own. */
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    }
+    @media (prefers-reduced-transparency: reduce) {
+    }
+    @media (forced-colors: active) {
+    }
 
     /* A colored panel shades rows in its own hue, without changing button intent. */