@threadlabs/looma 0.41.1 → 0.42.0

package/docs/customizer-render.mjs

@@ -47,7 +47,7 @@ export function customizerResource(site, input = defaultRecipe()) {
     const preview = family === 'palette' ? `<span slot="start" data-selected-palette>${swatches()}</span><template slot="option"><span class="palette-option">${Object.keys(presets).map(id => `<template $if="$option.value = '${id}'">${swatches(deriveTheme(applyRefinement(recipe, 'palette', id), { mode: 'light' }).tokens)}</template>`).join('')}<span>{$option.label}</span></span></template>` : '';
     return choice(`id="${location}-${family}" data-refinement-preset="${family}"${muted ? ' muted' : ''}`, `${label} preset`, state.id, options, preview);
   };
-  const paletteDetails = `<ui-grid columns="2" gap="s" style="--ui-grid-min: 8rem">${['light', 'dark'].map(mode => `<ui-card data-theme="${mode}" padding="sm"><ui-stack gap="s"><ui-text variant="eyebrow">${mode === 'light' ? 'Light' : 'Dark'}</ui-text><div class="palette-range" role="img" aria-label="${mode} canvas, content and action range"><span class="palette-canvas"></span><span class="palette-content"></span><span class="palette-action"></span></div><ui-text variant="heading" as="h3">Fellowship</ui-text><ui-text>There and back.</ui-text><ui-text variant="caption">Second breakfast at nine.</ui-text><ui-button size="sm" preset="primary">Accent</ui-button><ui-button size="sm" preset="standard">Neutral</ui-button><ui-button size="sm" variant="outline" tone="accent">Outline</ui-button></ui-stack></ui-card>`).join('')}</ui-grid><ui-text variant="caption" data-palette-adjustments role="status" aria-live="polite"></ui-text><ui-disclosure summary="Resolved palette values"><ui-text variant="caption" data-palette-adjustment-details></ui-text></ui-disclosure>`;
+  const paletteDetails = `<ui-grid columns="2" gap="s" style="--ui-grid-min: 8rem">${['light', 'dark'].map(mode => `<ui-card data-theme="${mode}" padding="sm"><ui-stack gap="s"><ui-text variant="eyebrow">${mode === 'light' ? 'Light' : 'Dark'}</ui-text><div class="palette-range" role="img" aria-label="${mode} canvas, content and action range"><span class="palette-canvas"></span><span class="palette-content"></span><span class="palette-action"></span></div><ui-text variant="heading" as="h3">Fellowship</ui-text><ui-text>There and back.</ui-text><ui-text variant="caption">Second breakfast at nine.</ui-text><ui-action-bar><ui-button slot="tertiary" size="sm" variant="outline" tone="accent">Outline</ui-button><ui-button slot="secondary" size="sm" preset="standard">Neutral</ui-button><ui-button slot="primary" size="sm" preset="primary">Accent</ui-button></ui-action-bar></ui-stack></ui-card>`).join('')}</ui-grid><ui-text variant="caption" data-palette-adjustments role="status" aria-live="polite"></ui-text><ui-disclosure summary="Resolved palette values"><ui-text variant="caption" data-palette-adjustment-details></ui-text></ui-disclosure>`;
   const paletteRelationships = `<ui-stack gap="s"><ui-text variant="heading" as="h3">How should the colors work together?</ui-text>${[
     ['preserve', 'Keep my colors', 'Keep the base colors as chosen. Warmth and intensity still refine the result.'],
     ['neighboring', 'Related colors', 'Tint neutral surfaces with a neighboring hue for a closely coordinated palette.'],
@@ -61,10 +61,12 @@ export function customizerResource(site, input = defaultRecipe()) {
   const typographyView = editor('typography', `<ui-card><ui-stack><ui-text variant="heading" as="h2">There and back again.</ui-text><ui-text>Frodo plans the journey. Sam brings lunch. Clear notes keep the Fellowship moving.</ui-text><ui-text variant="label">Memo ready</ui-text><ui-text variant="caption">Notes by Sméagol · Updated today</ui-text></ui-stack></ui-card>`, `${fieldsFor(['body-font','text-size'])}<ui-disclosure summary="Heading font"><ui-stack>${fieldsFor(['display-font'])}</ui-stack></ui-disclosure><ui-disclosure summary="Label emphasis"><ui-stack>${fieldsFor(['text-weight'])}</ui-stack></ui-disclosure>`);
   const layoutView = editor('layout', `<ui-stack>${sizePreview}</ui-stack>`, `${fieldsFor(['control-roominess','rhythm','spacing','corner-roundness'])}<ui-disclosure summary="Scale & edges"><ui-stack>${fieldsFor(['scale-contrast','space-curve','line-weight'])}</ui-stack></ui-disclosure>`);
   const motionView = editor('motion', `<ui-stack><ui-card><ui-stack><ui-text variant="eyebrow">Motion study</ui-text><div class="motion-track"><span data-motion-object aria-hidden="true"></span></div><ui-cluster><ui-button data-action="replay-motion"><ui-icon name="play"></ui-icon>Replay motion</ui-button><ui-text variant="caption" data-motion-readout></ui-text></ui-cluster><ui-text variant="caption" data-motion-preference></ui-text></ui-stack></ui-card></ui-stack>`, `${fieldsFor(['response-time'])}<ui-disclosure summary="Shape the curve"><ui-stack>${fieldsFor(['response-curve'])}</ui-stack></ui-disclosure><ui-text variant="caption">Replay shows the shared curve. Try the popover to feel it in a real component. System reduced-motion preferences are respected.</ui-text><ui-disclosure summary="Try a popover">${documentationCard('ui-popover', null, true)}</ui-disclosure>`);
-  const materialView = editor('material', `<ui-stack><ui-light-editor data-light-editor x="${recipe.values['light-x']}" y="${recipe.values['light-y']}" label="Theme light position"><ui-stack gap="s"><ui-cluster><ui-button preset="primary">Join briefing</ui-button><ui-button preset="standard">Read memo</ui-button></ui-cluster><ui-input label="Office search" placeholder="Search the Fellowship office"></ui-input></ui-stack></ui-light-editor></ui-stack>`, `<ui-cluster>${renderPreset('material', 'refinement')}<ui-button data-action="restore-material">Reset material</ui-button></ui-cluster>${fieldsFor(['finish','edge-light','glow'])}<ui-text variant="caption" data-material-dependencies role="status"></ui-text><ui-disclosure summary="Light source"><ui-stack>${fieldsFor(['light-spread','light-strength'])}</ui-stack></ui-disclosure><ui-disclosure summary="Depth, glass and separation"><ui-stack>${fieldsFor(['outer-depth','inner-depth','glassiness','surface-separation','translucency'])}</ui-stack></ui-disclosure><ui-disclosure summary="Try floating surfaces"><ui-stack>${documentationCard('ui-card','/04-expressive-surface')}${documentationCard('ui-tooltip')}${documentationCard('ui-popover')}${documentationCard('ui-dialog')}</ui-stack></ui-disclosure>`);
-  const paletteView = refinement('palette', `<ui-cluster>${renderPreset('palette', 'refinement')}<ui-button data-action="restore-palette">Reset palette</ui-button></ui-cluster><div class="refinement-layout"><div class="palette-preview"><ui-stack>${paletteDetails}</ui-stack></div><ui-stack><ui-text variant="heading" as="h3">Base colors</ui-text><ui-text variant="caption">The colors your theme’s light and dark palettes are built from.</ui-text>${themeFields.filter(field => field.type === 'colour').map(renderField).join('')}<ui-disclosure summary="Adjust color character"><ui-stack>${themeFields.filter(field => field.family === 'Colour' && field.type !== 'colour' && field.id !== 'palette-relationship').map(renderField).join('')}</ui-stack></ui-disclosure><ui-disclosure summary="Color relationships">${paletteRelationships}</ui-disclosure></ui-stack></div>`);
+  const materialSample = `<ui-card treatment="expressive"><ui-stack gap="m"><ui-text variant="heading" as="h3">Fellowship briefing</ui-text><ui-text>Readable content stays on an opaque plate while the decorative rim catches the scene.</ui-text><ui-input label="Office search" placeholder="Search the Fellowship office"></ui-input><ui-action-bar><ui-button slot="secondary" preset="standard">Keep draft</ui-button><ui-button slot="primary" preset="primary">Send briefing</ui-button></ui-action-bar></ui-stack></ui-card>`;
+  const lightEditor = `<ui-light-editor data-light-editor x="${recipe.values['light-x']}" y="${recipe.values['light-y']}" label="Theme light position"><ui-stack gap="s"><ui-text variant="heading">Move the light</ui-text><ui-button preset="primary">Material response</ui-button></ui-stack></ui-light-editor>`;
+  const materialView = editor('material', materialSample, `<ui-cluster>${renderPreset('material', 'refinement')}<ui-button data-action="restore-material">Reset material</ui-button></ui-cluster>${fieldsFor(['finish','translucency','glassiness'])}<ui-text variant="caption" data-material-dependencies role="status"></ui-text><ui-stack gap="s" data-glass-hint hidden><ui-text variant="caption">Frosting needs some transparency to reveal the scene behind the decorative rim.</ui-text><ui-button size="sm" data-action="use-glass">Use frosted glass</ui-button></ui-stack><ui-disclosure summary="Advanced material" data-advanced="material"><ui-stack>${lightEditor}${fieldsFor(['light-color','light-spread','light-strength','edge-light','glow','outer-depth','inner-depth','surface-separation'])}</ui-stack></ui-disclosure><ui-disclosure summary="Try floating surfaces"><ui-stack>${documentationCard('ui-card','/04-expressive-surface')}${documentationCard('ui-tooltip')}${documentationCard('ui-popover')}${documentationCard('ui-dialog')}</ui-stack></ui-disclosure>`);
+  const paletteView = refinement('palette', `<ui-cluster>${renderPreset('palette', 'refinement')}<ui-button data-action="restore-palette">Reset palette</ui-button></ui-cluster><div class="refinement-layout"><div class="palette-preview"><ui-stack>${paletteDetails}</ui-stack></div><ui-stack><ui-text variant="heading" as="h3">Base colors</ui-text><ui-text variant="caption">The colors your theme’s light and dark palettes are built from.</ui-text>${themeFields.filter(field => field.family === 'Colour' && field.type === 'colour').map(renderField).join('')}<ui-disclosure summary="Adjust color character"><ui-stack>${themeFields.filter(field => field.family === 'Colour' && field.type !== 'colour' && field.id !== 'palette-relationship').map(renderField).join('')}</ui-stack></ui-disclosure><ui-disclosure summary="Color relationships">${paletteRelationships}</ui-disclosure></ui-stack></div>`);
   const options = site.catalog.groups.map(group => `<optgroup label="${escape(group.label)}">${examples.filter(example => example.category === group.id).map(example => `<option value="${escape(example.id)}" data-description="${escape(example.category + ' · ' + example.tag)}" data-example="${escape(JSON.stringify(example))}" data-search="${escape(`${example.title} ${example.tag} ${example.description} ${example.exampleTitle}`.toLocaleLowerCase())}">${escape(example.title)} · ${escape(example.exampleTitle)}</option>`).join('')}</optgroup>`).join('');
-  const links = ['ui-stack','ui-grid','ui-cluster','ui-form-field','ui-input','ui-select','ui-color-picker','ui-button','ui-disclosure','ui-textarea','ui-number-input','ui-slider','ui-curve-editor','ui-card','ui-text','ui-light-editor','ui-combobox','ui-checkbox','ui-list','ui-list-item'].map(tag => `<link rel="component" href="@threadlabs/looma/components/${tag}/${tag}.html">`).join('\n');
+  const links = ['ui-action-bar','ui-stack','ui-grid','ui-cluster','ui-form-field','ui-input','ui-select','ui-color-picker','ui-button','ui-disclosure','ui-textarea','ui-number-input','ui-slider','ui-curve-editor','ui-card','ui-text','ui-light-editor','ui-combobox','ui-checkbox','ui-list','ui-list-item'].map(tag => `<link rel="component" href="@threadlabs/looma/components/${tag}/${tag}.html">`).join('\n');
   return `${links}\n<link rel="component" href="./card.html">\n<template component="looma-customizer" module="./customizer.js"><defs>
   <state name="previews" type="list" value="${escape(JSON.stringify(initial))}"><prop type="object">${cardFields.map(name => `<prop name="${name}" required type="${name === 'resizable' ? 'boolean' : 'string'}"></prop>`).join('')}</prop></state>
   <state name="cards" type="list" value="${escape(JSON.stringify(initial))}"><prop type="object">${cardFields.map(name => `<prop name="${name}" required type="${name === 'resizable' ? 'boolean' : 'string'}"></prop>`).join('')}</prop></state>
@@ -92,6 +94,7 @@ export function customizerResource(site, input = defaultRecipe()) {
   <ui-button data-action="more-examples">Show more components</ui-button></ui-stack></section>
 `)}</ui-stack></div>
   <style>
+    :host { background-color: var(--ui-surface); background-image: repeating-linear-gradient(0deg, transparent 0 15px, color-mix(in srgb, var(--ui-text) 12%, transparent) 15px 16px), repeating-linear-gradient(90deg, transparent 0 15px, color-mix(in srgb, var(--ui-text) 12%, transparent) 15px 16px); background-attachment: fixed; }
     [data-customizer-overview][hidden], [data-refinement-view][hidden] { display: none !important; }
     .customizer-layout { display: grid !important; grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); gap: var(--ui-space-6) !important; align-items: start !important; }
     aside { grid-row: 1 / span 2; position: sticky; inset-block-start: calc(var(--_editor-chrome-height, 4.25rem) + var(--ui-space-2)); max-block-size: calc(100dvh - var(--_editor-chrome-height, 4.25rem) - var(--ui-space-4)); overflow: auto; padding: max(var(--ui-space-2), calc(var(--ui-focus-width) * 2)) !important; scroll-padding: max(var(--ui-space-2), calc(var(--ui-focus-width) * 2)); }
@@ -99,6 +102,7 @@ export function customizerResource(site, input = defaultRecipe()) {
     .refinement-layout { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1fr); gap: var(--ui-space-6) !important; align-items: start !important; }
     [data-refinement-view] { scroll-margin-block-start: calc(var(--_editor-chrome-height, 4.25rem) + var(--ui-space-2)); }
     .palette-preview, .editor-preview { position: sticky; inset-block-start: calc(var(--_editor-chrome-height, 4.25rem) + var(--ui-space-2)); max-block-size: calc(100dvh - var(--_editor-chrome-height, 4.25rem) - var(--ui-space-4)); overflow: auto; padding: max(var(--ui-space-2), calc(var(--ui-focus-width) * 2)) !important; }
+    [data-editor-preview="material"] { background: transparent; }
     .spacing-samples { display: flex !important; align-items: center !important; gap: 0 !important; padding-block: var(--ui-space-3) !important; }
     .spacing-samples > span { display: block !important; block-size: var(--ui-space-1); inline-size: var(--ui-space-1); border-radius: 50%; background: var(--ui-accent); }
     .spacing-samples > span:nth-child(2) { margin-inline-start: var(--ui-space-2) !important; }
@@ -114,7 +118,7 @@ export function customizerResource(site, input = defaultRecipe()) {
     .palette-action { background: var(--_palette-action, var(--ui-accent)); }
     .motion-track { overflow: clip; display: flex; align-items: center; block-size: 5rem; padding: var(--ui-space-3); border-radius: var(--ui-radius-md); background: var(--ui-surface-muted); }
     [data-motion-object] { display: block; inline-size: 2rem; block-size: 2rem; border-radius: var(--ui-radius-sm); background: var(--ui-accent-solid); box-shadow: var(--ui-action-shadow); }
-    @media (max-width: 64rem) { .customizer-layout, .refinement-layout { grid-template-columns: minmax(0, 1fr); } aside { grid-row: auto; order: 1; position: static; max-block-size: none; } .palette-preview, .editor-preview { position: sticky; inset-block-start: calc(var(--_editor-chrome-height, 4.25rem) + var(--ui-space-2)); z-index: 1; background: var(--ui-surface); max-block-size: none; overflow: visible; padding: 0 !important; } [data-theme-sampler] { order: 2; } .examples { order: 3; } }
+    @media (max-width: 64rem) { .customizer-layout, .refinement-layout { grid-template-columns: minmax(0, 1fr); } aside { grid-row: auto; order: 1; position: static; max-block-size: none; } .palette-preview, .editor-preview { position: sticky; inset-block-start: calc(var(--_editor-chrome-height, 4.25rem) + var(--ui-space-2)); z-index: 1; background: var(--ui-surface); max-block-size: none; overflow: visible; padding: 0 !important; } .editor-preview { position: static; } [data-theme-sampler] { order: 2; } .examples { order: 3; } }
     @media (max-width: 64rem) { .palette-preview[data-page-flow], .editor-preview[data-page-flow] { position: static; } }
   </style></template>`;
 }

package/docs/customizer.js

@@ -131,6 +131,7 @@ export function connect(host) {
       componentRegistry.update(control, { value: control.dataset.fontPicker === 'display-font' && recipe.values['display-font'] === recipe.values['body-font'] ? 'inherit' : recipe.fonts?.[control.dataset.fontPicker] ?? (recipe.values[control.dataset.fontPicker] === systemFont ? 'system' : 'custom') });
     }
     componentRegistry.update(root.querySelector('[data-light-editor]'), { x: Number(recipe.values['light-x']), y: Number(recipe.values['light-y']) });
+    root.querySelector('[data-glass-hint]').hidden = !(Number(recipe.values.glassiness) > 0 && Number(recipe.values.translucency) === 0);
     const adjustments = ['light', 'dark'].flatMap(mode => deriveTheme(recipe, { mode }).adjustments.map(item => ({ ...item, mode })));
     const report = root.querySelector('[data-palette-adjustments]');
     report.textContent = adjustments.length ? 'Paired ranges are derived for readability. Your base colors stay editable; resolved values are shown below.' : 'Both ranges preserve your base colors with readable text and essential outlines.';
@@ -283,6 +284,7 @@ export function connect(host) {
           break;
         }
         case 'back': navigate(''); break;
+        case 'use-glass': show(applyRefinement(recipe, 'material', 'glass')); sayApplied('Frosted glass applied. Your colors and type are unchanged.'); break;
         case 'restore-material': case 'restore-palette': {
           const family = button.dataset.action.slice(8), state = refinementState(recipe, family);
           if (state.id !== 'custom') { show(applyRefinement(recipe, family, state.id)); sayApplied(`${family === 'material' ? 'Material' : 'Palette'} preset restored; other theme decisions are unchanged.`); }

package/docs/fonts.mjs

@@ -4,7 +4,7 @@ export const googleFonts = Object.fromEntries([
   ['Source Sans 3', 'sans-serif'], ['Lato', 'sans-serif'], ['Nunito Sans', 'sans-serif'],
   ['DM Sans', 'sans-serif'], ['Manrope', 'sans-serif'], ['Work Sans', 'sans-serif'],
   ['IBM Plex Sans', 'sans-serif'], ['Public Sans', 'sans-serif'], ['Atkinson Hyperlegible', 'sans-serif'],
-  ['Outfit', 'sans-serif'], ['Merriweather', 'serif'], ['Lora', 'serif'],
+  ['Outfit', 'sans-serif'], ['Fraunces', 'serif'], ['Merriweather', 'serif'], ['Lora', 'serif'],
   ['Source Serif 4', 'serif'], ['Libre Baskerville', 'serif'], ['Crimson Pro', 'serif'],
   ['EB Garamond', 'serif'], ['Playfair Display', 'serif'], ['Roboto Mono', 'monospace'],
   ['IBM Plex Mono', 'monospace'], ['JetBrains Mono', 'monospace'], ['Fira Code', 'monospace'],

package/docs/theme.mjs

@@ -10,7 +10,7 @@ const bounds = {
 
 /** 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.'],
+  ['Colour', 'action', 'Action', '--ui-accent', 'colour', '#5b55d6', 'Primary fill; readable labels and contextual action text are derived separately.'],
   ['Colour', 'canvas', 'Canvas', '--ui-surface', 'colour', '#f6f6f8', 'The ground behind surfaces.'],
   ['Colour', 'surface', 'Surface', '--ui-surface-raised', 'colour', '#ffffff', 'Fields, cards and floating surfaces.'],
   ['Colour', 'text', 'Text', '--ui-text', 'colour', '#1a1a1a', 'Readable content; supporting text follows this and Surface.'],
@@ -30,12 +30,13 @@ 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', 'Clear through richly frosted: the upper range adds stronger blur, saturation and glass edges. Content stays readable.'],
+  ['Material', 'glassiness', 'Frosting', '--ui-glassiness', 'fraction', '0', 'Backdrop blur on decorative glass, from none to frosted. Content remains opaque.'],
   ['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 material around opaque content.'],
+  ['Material', 'translucency', 'Transparency', '--ui-overlay-translucency', 'fraction', '0', 'How much of the scene comes through decorative glass rims, from opaque to clear. Content remains opaque.'],
   ['Material', 'edge-light', 'Edge light', '--ui-edge-light', 'fraction', '0', 'Light caught by surface edges, independent of depth.'],
   ['Material', 'finish', 'Finish', '--ui-finish', 'fraction', '0', 'Matte through polished: how strongly the material catches a reflection.'],
   ['Material', 'glow', 'Glow', '--ui-glow', 'fraction', '0', 'Reflected light beyond a surface, from a quiet halo to a vivid bloom at the upper end.'],
+  ['Material', 'light-color', 'Light color', '--ui-light-color', 'colour', '#ffffff', 'The reflected environment, independent of object pigment. Neutral white by default; reflected hues remain readable.'],
   ['Material', 'light-x', 'Light horizontal position', '--ui-light-x', 'fraction', '0.5', 'The light source from left to right, relative to each surface.'],
   ['Material', 'light-y', 'Light vertical position', '--ui-light-y', 'fraction', '0', 'The light source from top to bottom, relative to each surface.'],
   ['Material', 'light-spread', 'Light spread', '--ui-light-spread', 'fraction', '0.5', 'A concentrated spot through broad illumination.'],
@@ -44,21 +45,25 @@ export const themeFields = [
   ['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, ...(type === 'choice' ? { choices: { preserve: 'Preserve seed hues', neighboring: 'Neighboring hues', complementary: 'Complementary hues' } } : {}), ...(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 } });
+const baseRecipe = () => ({ schemaVersion: 1, values: Object.fromEntries(themeFields.map(field => [field.id, field.defaultValue])) });
+const starting = values => ({ schemaVersion: 1, values: { ...baseRecipe().values, ...values } });
+/** The documentation starts with Looma's coordinated identity; Clear keeps the neutral baseline. */
+export const defaultRecipe = () => ({ ...starting({ action: '#7658d6', canvas: '#fbf9f4', surface: '#fffdf8', text: '#2b2538', 'body-font': googleFontStack('Manrope'), 'display-font': googleFontStack('Manrope'), 'text-size': '17px' }), fonts: { 'body-font': 'Manrope', 'display-font': 'Manrope' } });
 export const startingPoints = {
-  clear: defaultRecipe(),
+  looma: defaultRecipe(),
+  clear: baseRecipe(),
+  gold: { ...starting({ action: '#ffb84d', canvas: '#ffffff', surface: '#ffffff', text: '#171717', 'body-font': googleFontStack('Lato'), 'display-font': googleFontStack('Fraunces'), 'text-size': '17px', 'corner-roundness': '16px', finish: '0.55', 'light-x': '0' }), fonts: { 'body-font': 'Lato', 'display-font': 'Fraunces' } },
   bookish: starting({ rhythm: '1.05', action: '#2e1228', canvas: '#f7f7f5', surface: '#fffefd', text: '#0d0c0c', 'body-font': 'Arial, sans-serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'control-roominess': '2.625', 'scale-contrast': '1.18', 'outer-depth': '1', 'inner-depth': '1', glassiness: '0.8', 'surface-separation': '0.65', translucency: '0.18', 'edge-light': '1', finish: '0.85', glow: '0.3', 'light-spread': '0.3', 'light-strength': '0.9', 'response-time': '150ms', 'response-curve': 'ease' }),
   wiki: starting({ rhythm: '0.95', 'text-weight': '400', 'space-curve': '0.8', action: '#4f46e5', canvas: '#ffffff', surface: '#ffffff', text: '#1a1a1a', 'control-roominess': '2.125', spacing: '0.95', 'scale-contrast': '1.15', 'corner-roundness': '6px', 'outer-depth': '0.35', 'inner-depth': '0', 'response-time': '110ms' }),
   editorial: starting({ rhythm: '1.3', 'text-size': '17px', spacing: '1.12', 'space-curve': '1.4', 'scale-contrast': '1.3', 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({ rhythm: '1.05', 'display-font': 'ui-monospace, monospace', 'text-weight': '500', 'control-roominess': '2.375', spacing: '1.05', 'scale-contrast': '1.25', 'space-curve': '1', finish: '0.6', glow: '0.45', glassiness: '0.45', 'surface-separation': '0.25', 'light-x': '0.25', 'light-spread': '0.65', 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({ rhythm: '1.2', 'body-font': 'ui-rounded, system-ui, sans-serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'space-curve': '1.15', finish: '0.15', 'light-spread': '1', action: '#256342', canvas: '#f4edda', surface: '#fff8e7', text: '#173121', 'corner-roundness': '22px', 'outer-depth': '0.35', 'inner-depth': '0', 'edge-light': '0.2', 'control-roominess': '2.875', 'scale-contrast': '1.24', spacing: '1.05', 'response-time': '180ms', 'response-curve': 'cubic-bezier(0.16,1,0.3,1)' }),
 };
-export const startingPointLabels = { clear: 'Clear', bookish: 'Bookish', wiki: 'Wiki', editorial: 'Editorial', night: 'Night', garden: 'Garden' };
+export const startingPointLabels = { looma: 'Looma', clear: 'Clear', gold: 'Gold', bookish: 'Bookish', wiki: 'Wiki', editorial: 'Editorial', night: 'Night', garden: 'Garden' };
 const paletteKeys = themeFields.filter(field => field.family === 'Colour').map(field => field.id);
 // 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'],
+  ['looma', 'Looma'], ['clear', 'Indigo & mist'], ['gold', 'Gold'], ['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]])) }]));
 
@@ -124,7 +129,8 @@ export function validateRecipe(input) {
   if (!input || input.schemaVersion !== 1 || !input.values || typeof input.values !== 'object' || Array.isArray(input.values)) throw new Error('Unsupported theme recipe version or values.');
   const known = new Set(themeFields.map(field => field.id));
   for (const key of Object.keys(input.values)) if (!known.has(key)) throw new Error(`Unknown theme decision ${key}.`);
-  const values = { ...defaultRecipe().values, ...input.values };
+  const defaults = defaultRecipe();
+  const values = { ...defaults.values, ...input.values };
   for (const field of themeFields) {
     const value = values[field.id];
     let valid = typeof value === 'string' && value.length > 0;
@@ -153,8 +159,10 @@ export function validateRecipe(input) {
   }
   if (input.presets !== undefined && (!input.presets || typeof input.presets !== 'object' || Array.isArray(input.presets) || Object.entries(input.presets).some(([family, id]) => !Object.hasOwn(refinementPresets(family) ?? {}, id)))) throw new Error('Unknown refinement preset.');
   if (input.fonts !== undefined && (!input.fonts || typeof input.fonts !== 'object' || Array.isArray(input.fonts) || Object.entries(input.fonts).some(([key, family]) => !['body-font', 'display-font'].includes(key) || !Object.hasOwn(googleFonts, family) || values[key] !== googleFontStack(family)))) throw new Error('Choose a Google font with its matching font stack.');
+  const inheritedFonts = Object.fromEntries(Object.entries(defaults.fonts ?? {}).filter(([role]) => !Object.hasOwn(input.values, role)));
+  const fonts = { ...inheritedFonts, ...input.fonts };
   if (input.origin !== undefined && !Object.hasOwn(startingPoints, input.origin)) throw new Error('Unknown theme origin.');
-  return { schemaVersion: 1, values, ...(input.fonts === undefined ? {} : { fonts: { ...input.fonts } }), ...(input.origin === undefined ? {} : { origin: input.origin }), ...(input.presets === undefined ? {} : { presets: { ...input.presets } }) };
+  return { schemaVersion: 1, values, ...(input.fonts === undefined && !Object.keys(fonts).length ? {} : { fonts }), ...(input.origin === undefined ? {} : { origin: input.origin }), ...(input.presets === undefined ? {} : { presets: { ...input.presets } }) };
 }
 
 /** Match presets by their complete semantic recipe, including locally saved themes. */
@@ -164,15 +172,51 @@ export function startingPointFor(input) {
 }
 
 const rgb = hex => [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16));
-const luminance = hex => rgb(hex).map(n => { const s = n / 255; return s <= .04045 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4; }).reduce((sum, n, i) => sum + n * [.2126, .7152, .0722][i], 0);
-const contrast = (a, b) => (Math.max(luminance(a), luminance(b)) + .05) / (Math.min(luminance(a), luminance(b)) + .05);
-// The brightest reflection stop is itself readable. Interpolating it over a readable
-// fill cannot wash out the label, even at maximum finish and light strength.
-function reflection(fill, text) {
-  const labels = Array.isArray(text) ? text : [text];
-  let amount = .6;
-  while (amount > 0 && labels.some(label => contrast(mix('#ffffff', fill, amount), label) < 4.5)) amount = Math.max(0, amount - .005);
-  return mix('#ffffff', fill, amount);
+const channelLuminance = channels => channels.map(n => { const s = n / 255; return s <= .04045 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4; }).reduce((sum, n, i) => sum + n * [.2126, .7152, .0722][i], 0);
+const luminance = hex => channelLuminance(rgb(hex));
+const alphaSurface = (fill, background, alpha) => {
+  const a = rgb(fill), b = rgb(background);
+  return '#' + a.map((n, i) => Math.round(n * alpha + b[i] * (1 - alpha)).toString(16).padStart(2, '0')).join('');
+};
+const luminanceContrast = (a, b) => (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
+const contrast = (a, b) => luminanceContrast(luminance(a), luminance(b));
+// Bound both material stops for opaque ink. The shade scales each sRGB channel
+// down, so the darkest mixtures lie on its segment with the reflected light.
+function materialLuminances(start, end) {
+  const a = rgb(start), b = rgb(end);
+  const at = t => channelLuminance(a.map((n, i) => n + (b[i] - n) * t));
+  let low = 0, high = 1;
+  for (let step = 0; step < 24; step++) {
+    const left = (2 * low + high) / 3, right = (low + 2 * high) / 3;
+    if (at(left) < at(right)) high = right; else low = left;
+  }
+  return [Math.min(at(0), at(1), at((low + high) / 2)), Math.max(at(0), at(1))];
+}
+function materialContrast(start, end, ink) {
+  const [minimum, maximum] = materialLuminances(start, end);
+  return ink < minimum ? luminanceContrast(minimum, ink) : ink > maximum ? luminanceContrast(maximum, ink) : 1;
+}
+function materialColours(fill, text, light, minimum = 4.55) {
+  const labels = (Array.isArray(text) ? text : [text]).map(label => typeof label === 'number' ? label : luminance(label));
+  const [l, c, h] = toLch(fill), [lightness] = toLch(light);
+  // Recede perceptually while retaining relative saturation and hue. Scaling
+  // L and C together scales linear RGB, keeping every shade channel <= fill.
+  let depth = .05;
+  const shaded = amount => amount === 0 ? fill : fromLch([Math.max(0, l - amount), c * Math.max(0, l - amount) / (l || 1), h]);
+  while (depth > 0 && labels.some(label => luminanceContrast(luminance(shaded(depth)), label) < minimum)) depth = Math.max(0, depth - .001);
+  const shade = shaded(depth);
+  // Environment influences reflected hue, not the pigment's saturation. Neutral
+  // light lifts lightness without the broad white mixture that washes colour out.
+  const [, tintChroma, tintHue] = toLch(mix(light, fill, .18));
+  const target = fromLch([l + (lightness - l) * .16, Math.max(c * .95, tintChroma), tintHue]);
+  let amount = 1;
+  while (amount > 0 && labels.some(label => materialContrast(mix(target, fill, amount), shade, label) < minimum)) amount = Math.max(0, amount - .005);
+  const reflection = mix(target, fill, amount);
+  // A tiny specular peak is allowed to brighten separately from the chromatic
+  // body reflection. Keep the same quantization margin as every material stop.
+  let glare = .55 * lightness;
+  while (glare > 0 && labels.some(label => luminanceContrast(luminance(alphaSurface('#ffffff', reflection, glare)), label) < minimum)) glare = Math.max(0, glare - .005);
+  return { reflection, shade, specular: alphaSurface('#ffffff', reflection, glare) };
 }
 const foreground = (fill, light, dark) => [light, dark, '#ffffff', '#000000'].sort((a, b) => contrast(fill, b) - contrast(fill, a))[0];
 
@@ -187,6 +231,20 @@ function readableColour(seed, surfaces, minimum, endpoint) {
 }
 
 /** Resolve editable colour seeds into a coordinated set of readable semantic roles. */
+// Perceptual distance in Cartesian Oklab, including chroma-only separation.
+const colourDistance = (a, b) => {
+  const [l1, c1, h1] = toLch(a), [l2, c2, h2] = toLch(b);
+  return Math.sqrt((l1 - l2) ** 2 + (c1 - c2) ** 2 + 2 * c1 * c2 * (1 - Math.cos((h1 - h2) * Math.PI / 180)));
+};
+const surfaceOffset = (surface, ink, distance) => mix(ink, surface, Math.min(1, distance / Math.max(.001, colourDistance(surface, ink))));
+const actionBoundary = (fill, surfaces, ink, amplitude) => {
+  const distance = Math.min(...surfaces.map(surface => colourDistance(fill, surface)));
+  const shortfall = Math.max(0, 1 - distance / amplitude);
+  // Blend assistance in continuously. Searching for an exact distance along an
+  // ink path can jump when that path initially reduces chroma separation.
+  return mix(surfaceOffset(surfaces[1], ink, amplitude), fill, shortfall ** 2);
+};
+
 const paletteCache = new Map();
 export function deriveTheme(input, { mode } = {}) {
   if (mode !== undefined && !['light', 'dark'].includes(mode)) throw new Error('Unknown theme color mode.');
@@ -197,7 +255,7 @@ export function deriveTheme(input, { mode } = {}) {
       const [min, max] = bounds[field.id]; tokens[field.property] = `clamp(${min}px, ${values[field.id]}, ${max}px)`;
     }
   }
-  const cacheKey = JSON.stringify([mode, ...paletteKeys.map(key => values[key])]);
+  const cacheKey = JSON.stringify([mode, ...paletteKeys.map(key => values[key]), values['light-color']]);
   if (paletteCache.has(cacheKey)) {
     const cached = paletteCache.get(cacheKey);
     return { tokens: { ...tokens, ...cached.tokens }, adjustments: cached.adjustments.map(item => ({ ...item })) };
@@ -219,29 +277,73 @@ export function deriveTheme(input, { mode } = {}) {
   for (const [tone, original] of Object.entries(tones)) {
     const [l, c, h] = toLch(original);
     const seed = tone === 'accent' ? original : fromLch([l, c * (.6 + Number(values['color-intensity']) * .8), h]);
-    const fill = readableColour(seed, surfaces, 5, ink);
+    const fill = seed;
+    const onFill = foreground(fill, '#ffffff', '#000000');
     tokens[`--ui-${tone}`] = fill;
-    tokens[`--ui-on-${tone}`] = foreground(fill, '#ffffff', '#000000');
-    tokens[`--ui-${tone}-on-strong`] = tokens[`--ui-on-${tone}`];
-    tokens[`--ui-${tone}-reflection`] = reflection(fill, tokens[`--ui-on-${tone}`]);
-    tokens[`--ui-${tone}-hover`] = mix(fill, ink, .86);
-    tokens[`--ui-${tone}-active`] = mix(fill, ink, .74);
+    tokens[`--ui-on-${tone}`] = onFill;
+    tokens[`--ui-${tone}-on-strong`] = onFill;
+    for (const [part, colour] of Object.entries(materialColours(fill, onFill, values['light-color']))) tokens[`--ui-${tone}-${part}`] = colour;
+    const stateTarget = onFill === '#000000' ? '#ffffff' : '#000000';
+    tokens[`--ui-${tone}-hover`] = mix(fill, stateTarget, .86);
+    tokens[`--ui-${tone}-active`] = mix(fill, stateTarget, .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)))];
+  // Quiet fills are actual alpha composites. At an extreme light/dark flip,
+  // reduce their shared tint before it would leave no readable contextual ink.
+  const quietSurfaces = strength => [...surfaces, ...Object.keys(tones).flatMap(tone => surfaces.flatMap(background => [
+    mix(tokens[`--ui-${tone}`], background, .12 * strength),
+    ...[.05, .12, .18].map(alpha => alphaSurface(tokens[`--ui-${tone}`], background, alpha * strength)),
+  ]))];
+  let tonalOpacity = 1;
+  while (tonalOpacity > 0 && quietSurfaces(tonalOpacity).some(background => contrast(ink, background) < 4.5)) tonalOpacity = Math.max(0, tonalOpacity - .01);
+  tokens['--ui-tonal-opacity'] = String(Number(tonalOpacity.toFixed(2)));
+  const readingSurfaces = quietSurfaces(tonalOpacity);
   for (const tone of Object.keys(tones)) {
     tokens[`--ui-${tone}-subtle-text`] = readableColour(tokens[`--ui-${tone}`], readingSurfaces, 4.5, ink);
   }
+  // Existing validation/editor hooks must receive a contextual text role, never
+  // a pressed fill. Preserve consumer overrides at their established boundaries.
+  tokens['--ui-field-danger'] = tokens['--ui-danger-subtle-text'];
+  for (const hook of ['code-keyword', 'link-color', 'toolbar-active-text', 'mention-color']) tokens[`--ui-editor-${hook}`] = tokens['--ui-accent-subtle-text'];
   const textSeed = nativeInk === ink ? seeds.text : mix(seeds.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'];
-  for (const [state, amount] of [['surface', .06], ['hover', .1], ['active', .14]]) {
-    tokens[`--ui-neutral-${state}`] = readableColour(mix(tokens['--ui-text'], tokens['--ui-surface-raised'], amount), [tokens['--ui-text']], 4.5, paper);
+  // One continuous action-family range: primary pigment determines the neutral
+  // companion and their boundaries. These are design calibration values, not an
+  // empirical attention score. A floor preserves near-surface action boundaries.
+  const separation = Math.min(...surfaces.map(surface => colourDistance(tokens['--ui-accent'], surface)));
+  const amplitude = .10 + .16 * separation / (separation + .20);
+  for (const tone of Object.keys(tones)) for (const state of ['', '-hover', '-active']) {
+    tokens[`--ui-${tone}${state}-border`] = actionBoundary(tokens[`--ui-${tone}${state}`], surfaces, ink, amplitude);
+  }
+  // Keep secondary contours quieter than the weakest resolved primary edge,
+  // including warm surfaces where an assisted edge can approach its backdrop.
+  const familyRange = Math.min(amplitude, ...['', '-hover', '-active'].flatMap(state => surfaces.map(surface =>
+    colourDistance(tokens[`--ui-accent${state}-border`], surface),
+  )));
+  for (const [state, fillScale, edgeScale] of [['surface', .25, .45], ['hover', .35, .55], ['active', .45, .65]]) {
+    tokens[`--ui-neutral-${state}`] = readableColour(surfaceOffset(tokens['--ui-surface-raised'], tokens['--ui-text'], familyRange * fillScale), [tokens['--ui-text']], 4.5, paper);
+    tokens[`--ui-neutral-${state === 'surface' ? '' : state + '-'}border`] = surfaceOffset(tokens['--ui-surface-raised'], tokens['--ui-text'], familyRange * edgeScale);
+  }
+  // Enclosure lines describe regions; native field affordances retain their
+  // independently resolved control border below.
+  tokens['--ui-border'] = surfaceOffset(tokens['--ui-surface-raised'], tokens['--ui-text'], familyRange * .20);
+  tokens['--ui-border-strong'] = surfaceOffset(tokens['--ui-surface-raised'], tokens['--ui-text'], familyRange * .35);
+  for (const [role, fill, labels] of [
+    ['surface', tokens['--ui-surface-raised'], [tokens['--ui-text'], tokens['--ui-text-secondary'], ...Object.keys(tones).map(tone => tokens[`--ui-${tone}-subtle-text`])]],
+    ['neutral', tokens['--ui-neutral-surface'], tokens['--ui-text']],
+  ]) for (const [part, colour] of Object.entries(materialColours(fill, labels, values['light-color']))) tokens[`--ui-${role}-${part}`] = colour;
+  // Knobs are painted foreground surfaces, not text. Bound them against the
+  // continuous track luminance range, not just its colored endpoints (3:1).
+  for (const [role, fill, track, trackFill] of [
+    ['knob', tokens['--ui-text-secondary'], 'surface', tokens['--ui-surface-raised']],
+    ['knob-on-accent', tokens['--ui-on-accent'], 'accent', tokens['--ui-accent']],
+  ]) {
+    const [low, high] = materialLuminances(tokens[`--ui-${track}-reflection`], tokens[`--ui-${track}-shade`]);
+    const range = [Math.min(low, luminance(trackFill)), Math.max(high, luminance(trackFill), luminance(tokens[`--ui-${track}-specular`]))];
+    for (const [part, colour] of Object.entries(materialColours(fill, range, values['light-color'], 3.05))) tokens[`--ui-${role}-${part}`] = colour;
   }
-  tokens['--ui-surface-reflection'] = reflection(tokens['--ui-surface-raised'], [tokens['--ui-text'], tokens['--ui-text-secondary'], ...Object.keys(tones).map(tone => tokens[`--ui-${tone}-subtle-text`])]);
-  tokens['--ui-neutral-reflection'] = reflection(tokens['--ui-neutral-surface'], tokens['--ui-text']);
   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);
@@ -250,14 +352,13 @@ export function deriveTheme(input, { mode } = {}) {
   tokens['--ui-control-placeholder'] = readableColour(mix(tokens['--ui-text'], tokens['--ui-control-surface'], .5), [tokens['--ui-control-surface']], 4.5, ink);
   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'] = mix(tokens['--ui-text'], tokens['--ui-surface-raised'], .45);
   tokens['--ui-disabled-surface'] = tokens['--ui-surface-sunken'];
   tokens['--ui-disabled-border'] = mix(tokens['--ui-text'], tokens['--ui-surface-raised'], .2);
   tokens['--ui-focus-ring'] = readableColour(tokens['--ui-accent'], readingSurfaces, 3, ink);
   tokens['--ui-focus-width'] = 'max(2px, calc(var(--ui-border-width) * 2))';
   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']]) {
+  for (const [id, property] of [['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.' });
   }
   const colors = Object.fromEntries(Object.entries(tokens).filter(([key]) => !geometry.has(key) || /^#[\da-f]{6}$/i.test(tokens[key])));
@@ -285,7 +386,7 @@ export function themeCSS(input, systemCSS = '', { scope = 'portable' } = {}) {
     if (/^#[\da-f]{6}$/i.test(value)) palette.push(`  ${name}: light-dark(${value}, ${dark[name]});`);
     else {
       const relative = relativeLengths.get(name);
-      const resolved = relative ? value.replace(relative, `calc(${parseFloat(relative)} * var(--_ui-root-font-unit, 1rem))`) : value;
+      const resolved = name === '--ui-tonal-opacity' ? Math.min(Number(value), Number(dark[name])) : relative ? value.replace(relative, `calc(${parseFloat(relative)} * var(--_ui-root-font-unit, 1rem))`) : value;
       geometry.push(`  ${name}: ${resolved};`);
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.41.1",
+  "version": "0.42.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-button.css

@@ -92,12 +92,15 @@
         inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
       );
       --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+      --_tone-border: var(--ui-accent-border, var(--ui-accent));
+      --_tone-hover-border: var(--ui-accent-hover-border, var(--ui-accent-hover));
+      --_tone-active-border: var(--ui-accent-active-border, var(--ui-accent-active));
       --_tone-highlight: var(--ui-accent-highlight, none);
       --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
       --_hue: var(--ui-accent);
       --_hue-hover: var(--ui-accent-hover);
       --_hue-active: var(--ui-accent-active);
-      --_hue-text: var(--ui-accent-active);
+      --_hue-text: var(--ui-accent-subtle-text);
       --_on-hue: var(--ui-on-accent);
 
       --_tone: var(--_hue);
@@ -135,9 +138,9 @@
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border-style: solid;
       border-width: var(--ui-border-width);
-      border-color: var(--ui-button-border, var(--_tone));
+      border-color: var(--ui-button-border, var(--_tone-text));
       border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-      background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
+      background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / calc(5% * var(--ui-tonal-opacity, 1))));
       color: var(--ui-button-text, var(--_tone-text));
       font: inherit;
       font-weight: var(--ui-font-medium);
@@ -280,8 +283,8 @@
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
     :scope:where([data-component~="ui-button"]):hover:not(:disabled, [aria-disabled="true"]) {
-      border-color: var(--ui-button-hover-border, var(--_tone-hover));
-      background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
+      border-color: var(--ui-button-hover-border, var(--_tone-text));
+      background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / calc(12% * var(--ui-tonal-opacity, 1))));
     }
 
     :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"] {
@@ -301,13 +304,13 @@
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :scope:where([data-component~="ui-button"]):active:not(:disabled, [aria-disabled="true"]) {
       scale: var(--ui-press-scale, 1);
-      background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
+      background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / calc(18% * var(--ui-tonal-opacity, 1))));
       background-image: none;
       box-shadow: var(--ui-pressed);
     }
 
     :scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"] {
-      border-color: var(--_tone);
+      border-color: var(--ui-button-border, var(--_tone-border));
       background-color: var(--_tone);
       color: var(--_on-tone);
       background-image: var(--_tone-highlight);
@@ -316,14 +319,15 @@
         var(--_tone-glow);
     }
 
-    :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"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]),
+    :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);
+      border-color: var(--ui-button-hover-border, var(--_tone-hover-border));
     }
 
     :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);
+      border-color: var(--_tone-active-border);
       background-image: none;
       box-shadow: var(--ui-pressed);
     }
@@ -331,6 +335,9 @@
     /* 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-tone="neutral"] {
+      --_tone-border: var(--ui-neutral-border, var(--ui-neutral-surface));
+      --_tone-hover-border: var(--ui-neutral-hover-border, var(--ui-neutral-hover));
+      --_tone-active-border: var(--ui-neutral-active-border, var(--ui-neutral-active));
       --_tone-highlight: var(--ui-neutral-highlight, none);
       --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
       --_hue: var(--ui-text);
@@ -341,7 +348,7 @@
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"] {
-      border-color: var(--ui-button-border, var(--ui-control-border));
+      border-color: var(--ui-button-border, var(--_tone-border));
       background-color: var(--ui-button-surface, var(--ui-neutral-surface));
       color: var(--ui-button-text, var(--ui-text));
     }
@@ -358,13 +365,18 @@
       background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
     }
     :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--_tone-hover-border));
       background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
     }
     :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:active:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--_tone-active-border);
       background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="danger"], :scope:where([data-component~="ui-button"])[data-appearance="danger"] {
+      --_tone-border: var(--ui-danger-border, var(--ui-danger));
+      --_tone-hover-border: var(--ui-danger-hover-border, var(--ui-danger-hover));
+      --_tone-active-border: var(--ui-danger-active-border, var(--ui-danger-active));
       --_tone-highlight: var(--ui-danger-highlight, none);
       --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
       --_hue: var(--ui-danger);
@@ -375,6 +387,9 @@
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="success"] {
+      --_tone-border: var(--ui-success-border, var(--ui-success));
+      --_tone-hover-border: var(--ui-success-hover-border, var(--ui-success-hover));
+      --_tone-active-border: var(--ui-success-active-border, var(--ui-success-active));
       --_tone-highlight: var(--ui-success-highlight, none);
       --_tone-glow: var(--ui-success-glow, 0 0 transparent);
       --_hue: var(--ui-success);
@@ -385,6 +400,9 @@
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="warning"] {
+      --_tone-border: var(--ui-warning-border, var(--ui-warning));
+      --_tone-hover-border: var(--ui-warning-hover-border, var(--ui-warning-hover));
+      --_tone-active-border: var(--ui-warning-active-border, var(--ui-warning-active));
       --_tone-highlight: var(--ui-warning-highlight, none);
       --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
       --_hue: var(--ui-warning);
@@ -395,6 +413,9 @@
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="info"] {
+      --_tone-border: var(--ui-info-border, var(--ui-info));
+      --_tone-hover-border: var(--ui-info-hover-border, var(--ui-info-hover));
+      --_tone-active-border: var(--ui-info-active-border, var(--ui-info-active));
       --_tone-highlight: var(--ui-info-highlight, none);
       --_tone-glow: var(--ui-info-glow, 0 0 transparent);
       --_hue: var(--ui-info);
@@ -440,7 +461,7 @@
 
     /* 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-appearance="ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
-      background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
+      background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / calc(10% * var(--ui-tonal-opacity, 1))));
       border-color: transparent;
     }
 

package/styles/ui-callout.css

@@ -169,7 +169,7 @@
 
     /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
     .content :where([data-slotted], [data-slotted] *):is(a) {
-      color: var(--ui-accent-active);
+      color: var(--ui-accent-subtle-text);
       text-decoration: underline;
       text-decoration-thickness: 0.06em;
       text-underline-offset: 0.18em;