@threadlabs/looma 0.6.5 → 0.7.1

package/package.json

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

package/styles/ui-button.css

@@ -1,15 +1,23 @@
 /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-button"]) to ([data-component], [data-slotted]) {
 :scope {
+      --_hue: var(--ui-accent);
+      --_hue-hover: var(--ui-accent-hover);
+      --_hue-active: var(--ui-accent-active);
+      --_hue-text: var(--ui-accent-active);
+      --_on-hue: var(--ui-on-accent);
+
+      --_tone: var(--_hue);
+      --_tone-hover: var(--_hue-hover);
+      --_tone-active: var(--_hue-active);
+      --_tone-text: var(--_hue-text);
+      --_on-tone: var(--_on-hue);
+
       display: inline-flex;
       align-items: center;
       justify-content: center;
       vertical-align: middle;
-      color: var(--ui-action-secondary-text, var(--ui-text-primary));
-    }
-
-    :scope[data-ui-button-state~="variant=solid"] {
-      color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+      color: var(--_tone-text);
     }
 
     :scope[data-ui-button-state~="align=start"] {
@@ -25,23 +33,24 @@
     :scope {
       appearance: none;
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
-      border: 1px solid var(--ui-button-border, var(--ui-border-strong));
+      border-style: solid;
+      border-width: 1px;
+      border-color: var(--ui-button-border, var(--_tone));
       border-radius: var(--ui-button-radius, var(--ui-radius-md));
-      background: var(--ui-button-surface, var(--ui-surface-elevated));
-      color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+      background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
+      color: var(--ui-button-text, var(--_tone-text));
       font: inherit;
       font-weight: var(--ui-font-medium);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
       background-image: var(--ui-raised-highlight);
-      box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
+      box-shadow: var(--ui-button-shadow, var(--ui-raised));
       cursor: pointer;
       transition:
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         color var(--ui-motion-fast) var(--ui-motion-ease),
-        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-        transform var(--ui-motion-fast) var(--ui-motion-ease);
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
       margin: 0;
     }
 
@@ -65,128 +74,141 @@
     }
 
     :scope:hover:enabled {
-      background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
-      border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+      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%));
     }
 
+    /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :scope:active:enabled {
-      background: var(--ui-surface-subtle);
-    }
-
-    :scope[data-ui-button-state~="variant=solid"] {
-      border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
-      background: var(--ui-action-primary-surface, var(--ui-accent-solid));
-      color: var(--ui-action-primary-text, var(--ui-text-on-accent));
-      box-shadow: var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs));
+      background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
+      background-image: none;
+      box-shadow: var(--ui-pressed);
     }
 
-    :scope[data-ui-button-state~="variant=solid"]:hover:enabled {
-      background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-      border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-      box-shadow: var(--ui-shadow-sm);
-      transform: translateY(-1px);
+    :scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"] {
+      border-color: var(--_tone);
+      background-color: var(--_tone);
+      color: var(--_on-tone);
+      box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
     }
 
-    :scope[data-ui-button-state~="variant=solid"]:active:enabled {
-      background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-      border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-      box-shadow: none;
-      transform: translateY(0);
+    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):hover:enabled {
+      background-color: var(--_tone-hover);
+      border-color: var(--_tone-hover);
     }
 
-    :scope[data-ui-button-state~="variant=danger"] {
-      border-color: var(--ui-danger-solid);
-      background: var(--ui-danger-solid);
-      color: var(--ui-text-on-accent);
-      box-shadow: var(--ui-button-danger-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs));
+    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):active:enabled {
+      background-color: var(--_tone-active);
+      border-color: var(--_tone-active);
+      background-image: none;
+      box-shadow: var(--ui-pressed);
     }
 
-    :scope[data-ui-button-state~="variant=danger"]:hover:enabled {
-      background: var(--ui-danger-hover);
-      border-color: var(--ui-danger-hover);
-      box-shadow: var(--ui-shadow-sm);
-      transform: translateY(-1px);
+    /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
+       destructive secondary action, not a special case. */
+    :scope[data-ui-button-state~="tone=neutral"] {
+      --_hue: var(--ui-text);
+      --_hue-hover: var(--ui-text);
+      --_hue-active: var(--ui-text);
+      --_hue-text: var(--ui-text);
+      --_on-hue: var(--ui-surface);
     }
 
-    :scope[data-ui-button-state~="variant=danger"]:active:enabled {
-      box-shadow: none;
-      transform: translateY(0);
+    :scope[data-ui-button-state~="tone=danger"], :scope[data-ui-button-state~="variant=danger"] {
+      --_hue: var(--ui-danger);
+      --_hue-hover: var(--ui-danger-hover);
+      --_hue-active: var(--ui-danger-hover);
+      --_hue-text: var(--ui-danger-hover);
+      --_on-hue: var(--ui-on-danger);
     }
 
-    /* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
-       Solid and danger already carry their own intent. */
-    :scope[data-ui-button-state~="tone=accent"]:scope[data-ui-button-state~="variant=outline"] {
-      border-color: var(--ui-button-accent-border, var(--ui-accent));
-      background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
-      color: var(--ui-button-accent-text, var(--ui-accent-active));
+    :scope[data-ui-button-state~="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);
     }
 
-    :scope[data-ui-button-state~="tone=accent"]:scope[data-ui-button-state~="variant=outline"]:hover:enabled {
-      border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
-      background: var(--ui-button-accent-hover-surface, color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)));
+    :scope[data-ui-button-state~="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);
     }
 
-    :scope[data-ui-button-state~="tone=accent"]:is(:scope[data-ui-button-state~="variant=ghost"], :scope[data-ui-button-state~="variant=link"]) {
-      color: var(--ui-button-accent-text, var(--ui-accent-active));
+    :scope[data-ui-button-state~="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);
     }
 
     :scope[data-ui-button-state~="variant=ghost"] {
       border-color: transparent;
       background: transparent;
       box-shadow: none;
-      color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+      color: var(--ui-button-ghost-text, var(--_tone-text));
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
     :scope[data-ui-button-state~="variant=ghost"]:hover:enabled {
-      background: var(--ui-button-ghost-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
+      background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
       border-color: transparent;
     }
 
     :scope[data-ui-button-state~="variant=ghost"]:active:enabled {
-      background: var(--ui-button-ghost-active-surface, color-mix(in srgb, currentColor 14%, transparent));
+      background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
       border-color: transparent;
+      box-shadow: var(--ui-pressed);
     }
 
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
     :scope:focus-visible {
       outline: none;
       box-shadow:
-        var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
+        var(--ui-button-shadow, var(--ui-raised)),
         var(--ui-focus-halo);
     }
 
     :scope[data-ui-button-state~="variant=solid"]:focus-visible {
       box-shadow:
-        var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
+        var(--ui-button-solid-shadow, var(--ui-raised)),
         var(--ui-focus-halo);
     }
 
-    /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
+    /* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
+       disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
+       unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
+       highlight and shadow, because nothing that cannot be pressed should look raised. */
     :scope:disabled {
+      /* Derived from the tone itself, not from a separate disabled palette: faded toward the
+         page, which desaturates it at the same time. Toward the page rather than toward white,
+         so a dark theme dims where a light one lightens — the same rule, both schemes. */
+      --_tone: color-mix(in oklab, var(--_hue) 58%, var(--ui-surface));
+      --_tone-hover: var(--_tone);
+      --_tone-active: var(--_tone);
+      --_tone-text: color-mix(in oklab, var(--_hue-text) 72%, var(--ui-surface));
+      --_on-tone: var(--_tone-text);
+
       opacity: var(--ui-button-disabled-opacity, 1);
       cursor: not-allowed;
-      border-color: var(--ui-button-disabled-border, var(--ui-border));
-      background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
-    }
-
-    :scope[data-ui-button-state~="variant=solid"]:disabled {
-      border-color: var(--ui-button-disabled-border, var(--ui-border));
-      background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
+      background-image: none;
+      box-shadow: none;
     }
 
-    :scope[data-ui-button-state~="variant=danger"]:disabled {
-      border-color: var(--ui-button-disabled-border, var(--ui-border));
-      background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
+    /* A filled button keeps its fill, faded further so its text stays legible on it. */
+    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):disabled {
+      --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
     }
 
+    /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
+       it takes a surface, light and tinted, rather than reading as plain text. */
     :scope[data-ui-button-state~="variant=ghost"]:disabled {
-      background: none;
+      background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
       border-color: transparent;
-      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
     }
 
     @media (pointer: coarse) {
@@ -248,14 +270,24 @@
 @supports (text-box-trim: trim-both) {
     }
 
-    /* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
-       Solid and danger already carry their own intent. */
+    /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
+
+    /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
+       destructive secondary action, not a special case. */
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
-    /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
+    /* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
+       disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
+       unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
+       highlight and shadow, because nothing that cannot be pressed should look raised. */
+
+    /* A filled button keeps its fill, faded further so its text stays legible on it. */
+
+    /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
+       it takes a surface, light and tinted, rather than reading as plain text. */
 
     @media (pointer: coarse) {
     }

package/styles/ui-checkbox.css

@@ -52,7 +52,10 @@
       margin: auto;
       inline-size: 0.32rem;
       block-size: 0.58rem;
-      border: solid var(--ui-text-on-accent);
+      /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
+         component, which left the tick with no style and no colour. */
+      border-style: solid;
+      border-color: var(--ui-text-on-accent);
       border-width: 0 0.125rem 0.125rem 0;
       opacity: 1;
       transform: translateY(-0.11rem) rotate(45deg);

package/styles/ui-combobox.css

@@ -208,6 +208,39 @@
       }
     }
 
+    /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
+       before anything is picked. aria-selected is the state; this draws it.
+       Longhands, not shorthands: lowering drops a shorthand that omits a component. */
+    :scope[data-ui-combobox-state~="multiple"] .option {
+      display: flex;
+      gap: var(--ui-space-2);
+      align-items: center;
+    }
+
+    :scope[data-ui-combobox-state~="multiple"] .option::before {
+      content: "";
+      flex: none;
+      inline-size: 1.125rem;
+      block-size: 1.125rem;
+      border-style: solid;
+      border-width: 1px;
+      border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+      border-radius: var(--ui-radius-sm);
+      background-color: var(--ui-control-surface, var(--ui-surface-default));
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 0.7rem;
+    }
+
+    :scope[data-ui-combobox-state~="multiple"] .option[aria-selected="true"]::before {
+      border-color: var(--ui-accent-solid);
+      background-color: var(--ui-accent-solid);
+      background-image: var(
+        --ui-combobox-option-check,
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E")
+      );
+    }
+
     /* Multiple mode: chips wrap before the cursor on one flexible field line. */
     :scope[data-ui-combobox-state~="multiple"] .field {
       flex-wrap: wrap;
@@ -258,6 +291,10 @@
     @media (forced-colors: active) {
     }
 
+    /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
+       before anything is picked. aria-selected is the state; this draws it.
+       Longhands, not shorthands: lowering drops a shorthand that omits a component. */
+
     /* Multiple mode: chips wrap before the cursor on one flexible field line. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-editor-table-context-menu.css

@@ -1,6 +1,8 @@
 /* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component], [data-slotted]) {
 :scope {
+      /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
+      box-sizing: border-box;
       min-width: 14rem;
       max-width: min(17rem, calc(100vw - 24px));
       max-height: min(28rem, calc(100vh - 24px));

package/styles/ui-select.css

@@ -22,9 +22,9 @@
         background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    /* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
+    /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
      * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
-    :scope:not([multiple]) {
+    :scope {
       appearance: none;
       padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
       background-image: var(
@@ -65,7 +65,6 @@
       cursor: not-allowed;
     }
 
-    :scope[multiple],
     :scope[size]:not([size="1"]) {
       min-block-size: 7rem;
       padding: var(--ui-space-2);
@@ -77,7 +76,7 @@
     }
 }
 @scope ([data-component~="ui-select"]) to ([data-component]) {
-/* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
+/* The select draws its own chevron: the native caret cannot be inset or sized consistently.
      * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */

package/theme-dark.css

@@ -2,30 +2,18 @@
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme]) {
       color-scheme: dark;
+      /* The same eleven seeds the light theme sets. Every neutral, tint, hover, and disabled
+         colour is mixed from these, and the mixes read the scheme from them: toward this ink
+         brightens here, where it darkened there. */
       --ui-surface: #1a1a1a;
       --ui-surface-raised: #2a2a2a;
       --ui-surface-sunken: #2e2e2e;
-
       --ui-text: #f0f0ec;
-      --ui-text-secondary: #a0a09c;
-      --ui-text-muted: #6a6a66;
-      --ui-disabled-surface: #242424;
-      --ui-disabled-text: #6a6a66;
       --ui-on-accent: #1a1a1a;
       --ui-on-danger: #1a1a1a;
 
-      --ui-border: #333330;
-      --ui-border-strong: #4a4a46;
-      --ui-focus-ring: #a99bf5;
-      --ui-control-border: #6f6f69;
-
       --ui-accent: #a99bf5;
-      --ui-accent-hover: #b9adff;
-      --ui-accent-active: #c8beff;
-      --ui-accent-subtle: #282342;
-
       --ui-danger: #ef6f86;
-      --ui-danger-hover: #f58a9d;
       --ui-success: #33cc66;
       --ui-warning: #ffaa22;
       --ui-info: #4d9fff;
@@ -42,30 +30,18 @@
 
   [data-theme="dark"] {
     color-scheme: dark;
+    /* The same eleven seeds the light theme sets. Every neutral, tint, hover, and disabled
+       colour is mixed from these, and the mixes read the scheme from them: toward this ink
+       brightens here, where it darkened there. */
     --ui-surface: #1a1a1a;
     --ui-surface-raised: #2a2a2a;
     --ui-surface-sunken: #2e2e2e;
-
     --ui-text: #f0f0ec;
-    --ui-text-secondary: #a0a09c;
-    --ui-text-muted: #6a6a66;
-    --ui-disabled-surface: #242424;
-    --ui-disabled-text: #6a6a66;
     --ui-on-accent: #1a1a1a;
     --ui-on-danger: #1a1a1a;
 
-    --ui-border: #333330;
-    --ui-border-strong: #4a4a46;
-    --ui-focus-ring: #a99bf5;
-    --ui-control-border: #6f6f69;
-
     --ui-accent: #a99bf5;
-    --ui-accent-hover: #b9adff;
-    --ui-accent-active: #c8beff;
-    --ui-accent-subtle: #282342;
-
     --ui-danger: #ef6f86;
-    --ui-danger-hover: #f58a9d;
     --ui-success: #33cc66;
     --ui-warning: #ffaa22;
     --ui-info: #4d9fff;

package/theme-high-contrast.css

@@ -2,46 +2,56 @@
   @media (prefers-contrast: more) {
     :root:not([data-contrast]) {
       color-scheme: light;
+      /* The seeds, as in every theme. */
       --ui-surface: #ffffff;
       --ui-surface-raised: #ffffff;
       --ui-surface-sunken: #f0f0ec;
       --ui-text: #000000;
-      --ui-text-secondary: #111111;
-      --ui-text-muted: #222222;
-      --ui-disabled-surface: #e6e6e6;
-      --ui-disabled-text: #333333;
+      --ui-on-accent: #ffffff;
+      --ui-on-danger: #ffffff;
+      --ui-accent: #0000cc;
+      --ui-danger: #8b0000;
+      --ui-success: #006400;
+      --ui-warning: #7a3d00;
+      --ui-info: #00008b;
+
+      /* The deliberate divergence, and the whole point of this theme: a mixed border is a grey
+         one, and high contrast asks for an edge that is drawn rather than implied. Text steps
+         stay closer to the ink than the mixes put them. */
       --ui-border: #000000;
       --ui-border-strong: #000000;
       --ui-control-border: #000000;
+      --ui-text-secondary: #111111;
+      --ui-text-muted: #222222;
+      --ui-disabled-text: #333333;
       --ui-focus-ring: #0000ff;
-      --ui-accent: #0000cc;
-      --ui-accent-hover: #000080;
-      --ui-accent-active: #000066;
-      --ui-accent-subtle: #e6e6ff;
-      --ui-danger: #8b0000;
-      --ui-danger-hover: #5c0000;
     }
   }
 
   [data-contrast="high"] {
     color-scheme: light;
+    /* The seeds, as in every theme. */
     --ui-surface: #ffffff;
     --ui-surface-raised: #ffffff;
     --ui-surface-sunken: #f0f0ec;
     --ui-text: #000000;
-    --ui-text-secondary: #111111;
-    --ui-text-muted: #222222;
-    --ui-disabled-surface: #e6e6e6;
-    --ui-disabled-text: #333333;
+    --ui-on-accent: #ffffff;
+    --ui-on-danger: #ffffff;
+    --ui-accent: #0000cc;
+    --ui-danger: #8b0000;
+    --ui-success: #006400;
+    --ui-warning: #7a3d00;
+    --ui-info: #00008b;
+
+    /* The deliberate divergence, and the whole point of this theme: a mixed border is a grey
+       one, and high contrast asks for an edge that is drawn rather than implied. Text steps
+       stay closer to the ink than the mixes put them. */
     --ui-border: #000000;
     --ui-border-strong: #000000;
     --ui-control-border: #000000;
+    --ui-text-secondary: #111111;
+    --ui-text-muted: #222222;
+    --ui-disabled-text: #333333;
     --ui-focus-ring: #0000ff;
-    --ui-accent: #0000cc;
-    --ui-accent-hover: #000080;
-    --ui-accent-active: #000066;
-    --ui-accent-subtle: #e6e6ff;
-    --ui-danger: #8b0000;
-    --ui-danger-hover: #5c0000;
   }
 }

package/theme-light.css

@@ -2,31 +2,17 @@
   :root:not([data-theme]),
   [data-theme="light"] {
     color-scheme: light;
+    /* The seeds, and only the seeds. Neutrals, hovers, tints, and disabled colours are mixed from
+       these in tokens.css, so a product themes Looma by changing these eleven values. */
     --ui-surface: #ffffff;
     --ui-surface-raised: #ffffff;
     --ui-surface-sunken: #f0f0ec;
-
     --ui-text: #1a1a1a;
-    --ui-text-secondary: #5c5c5c;
-    --ui-text-muted: #9b9b9b;
-    --ui-disabled-surface: #f0f0ec;
-    --ui-disabled-text: #8a8a86;
     --ui-on-accent: #ffffff;
     --ui-on-danger: #ffffff;
 
-    --ui-border: #e4e4e0;
-    --ui-border-strong: #c8c8c4;
-    --ui-focus-ring: #5b55d6;
-    /* A control needs a visible 3:1 boundary; general dividers stay quieter. */
-    --ui-control-border: #858580;
-
     --ui-accent: #5b55d6;
-    --ui-accent-hover: #4b45bd;
-    --ui-accent-active: #3e399e;
-    --ui-accent-subtle: #efeffc;
-
     --ui-danger: #b4233f;
-    --ui-danger-hover: #941d35;
     --ui-success: #007a33;
     /* Deep amber, so a solid warning surface carries white text like the other tones (5:1). */
     --ui-warning: #b45309;