@threadlabs/looma 0.7.2 → 0.7.3

package/package.json

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

package/styles/ui-button.css

@@ -180,7 +180,7 @@
     }
 
     /* 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
+       disabled outline is still an outline and a disabled ghost still has no edge. 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 {
@@ -205,9 +205,11 @@
     }
 
     /* 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. */
+       it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
+       the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
+       hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
     :scope[data-ui-button-state~="variant=ghost"]:disabled {
-      background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
+      background-color: oklch(from var(--_tone) l c h / 14%);
       border-color: transparent;
     }
 
@@ -280,14 +282,16 @@
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
     /* 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
+       disabled outline is still an outline and a disabled ghost still has no edge. 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. */
+       it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
+       the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
+       hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
 
     @media (pointer: coarse) {
     }

package/vue/UiButton.vue

@@ -230,7 +230,7 @@ const hostState = computed(() =>
 }
 
 /* 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
+   disabled outline is still an outline and a disabled ghost still has no edge. 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. */
 [data-component~="ui-button"]:disabled {
@@ -255,9 +255,11 @@ const hostState = computed(() =>
 }
 
 /* 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. */
+   it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
+   the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
+   hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
-  background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
+  background-color: oklch(from var(--_tone) l c h / 14%);
   border-color: transparent;
 }
 

package/vue/chunks/UiButton.js

@@ -41,6 +41,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-8513eb5d"]]);
+}), [["__scopeId", "data-v-c6ef4679"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/components.css

@@ -204,7 +204,7 @@
   display: none;
 }
 
-[data-component~="ui-button"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-v-c6ef4679] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -223,15 +223,15 @@
   vertical-align: middle;
   color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-c6ef4679] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-c6ef4679] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-v-c6ef4679] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
@@ -255,44 +255,44 @@
   margin: 0;
 }
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-button"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-v-c6ef4679] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-c6ef4679] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.875rem;
 }
-[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-c6ef4679] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: 1rem;
 }
-[data-component~="ui-button"][data-v-8513eb5d]:hover:enabled {
+[data-component~="ui-button"][data-v-c6ef4679]:hover:enabled {
   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. */
-[data-component~="ui-button"][data-v-8513eb5d]:active:enabled {
+[data-component~="ui-button"][data-v-c6ef4679]:active:enabled {
   background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
   background-image: none;
   box-shadow: var(--ui-pressed);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679] {
   border-color: var(--_tone);
   background-color: var(--_tone);
   color: var(--_on-tone);
   box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d]):hover:enabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679]):hover:enabled {
   background-color: var(--_tone-hover);
   border-color: var(--_tone-hover);
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d]):active:enabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679]):active:enabled {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -301,43 +301,43 @@
 
 /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
    destructive secondary action, not a special case. */
-[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-c6ef4679] {
   --_hue: var(--ui-text);
   --_hue-hover: var(--ui-text);
   --_hue-active: var(--ui-text);
   --_hue-text: var(--ui-text);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-8513eb5d],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-c6ef4679],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679] {
   --_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);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-c6ef4679] {
   --_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);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-c6ef4679] {
   --_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);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-c6ef4679] {
   --_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);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -345,34 +345,34 @@
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-8513eb5d]:hover:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679]:hover:enabled {
   background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
   border-color: transparent;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-8513eb5d]:active:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679]:active:enabled {
   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. */
-[data-component~="ui-button"][data-v-8513eb5d]:focus-visible {
+[data-component~="ui-button"][data-v-c6ef4679]:focus-visible {
   outline: none;
   box-shadow:
     var(--ui-button-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
 
 /* 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
+   disabled outline is still an outline and a disabled ghost still has no edge. 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. */
-[data-component~="ui-button"][data-v-8513eb5d]:disabled {
+[data-component~="ui-button"][data-v-c6ef4679]: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. */
@@ -389,25 +389,27 @@
 }
 
 /* A filled button keeps its fill, faded further so its text stays legible on it. */
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-8513eb5d], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-8513eb5d]):disabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-c6ef4679], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-c6ef4679]):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. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-8513eb5d]:disabled {
-  background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
+   it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
+   the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
+   hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-c6ef4679]:disabled {
+  background-color: oklch(from var(--_tone) l c h / 14%);
   border-color: transparent;
 }
 @media (pointer: coarse) {
-[data-component~="ui-button"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-v-c6ef4679] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
 
 /* 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. */
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -425,22 +427,22 @@
     color var(--ui-motion-fast) var(--ui-motion-ease),
     text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]:hover:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:hover:enabled {
   color: var(--ui-button-link-hover-text, var(--ui-text-primary));
   text-decoration-color: currentColor;
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]:active:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:active:enabled {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]:disabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:disabled {
   background: none;
   border-color: transparent;
   color: var(--ui-button-disabled-text, var(--ui-disabled-text));
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-8513eb5d]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-c6ef4679]:focus-visible {
   box-shadow: none;
   /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
   outline: 2px solid var(--ui-focus-ring);
@@ -448,7 +450,7 @@
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-button"][hidden][data-v-8513eb5d] {
+[data-component~="ui-button"][hidden][data-v-c6ef4679] {
   display: none;
 }