@threadlabs/looma 0.14.4 → 0.14.6

package/package.json

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

package/styles/ui-text.css

@@ -35,14 +35,14 @@
     :scope[data-ui-text-state~="tone=accent"] {
       color: var(--ui-accent-active);
     }
+    /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
+       in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
     :scope[data-ui-text-state~="tone=danger"] {
-      color: var(--ui-danger);
+      color: var(--ui-danger-subtle-text);
     }
     :scope[data-ui-text-state~="tone=success"] {
-      color: var(--ui-success);
+      color: var(--ui-success-subtle-text);
     }
-    /* The base info and warning colours fall short of 4.5:1 on sunken surfaces, so these use the
-       text-safe tokens a subtle badge sets its words in. */
     :scope[data-ui-text-state~="tone=info"] {
       color: var(--ui-info-subtle-text);
     }
@@ -91,8 +91,8 @@
 @scope ([data-component~="ui-text"]) to ([data-component]) {
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, or label. */
-    /* The base info and warning colours fall short of 4.5:1 on sunken surfaces, so these use the
-       text-safe tokens a subtle badge sets its words in. */
+    /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
+       in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
 
     /* A link in running text is underlined, so it stands apart from the words around it by more than
        colour. */

package/vue/UiText.vue

@@ -112,14 +112,14 @@ const hostState = computed(() =>
 [data-component~="ui-text"][data-ui-text-state~="tone=accent"] {
   color: var(--ui-accent-active);
 }
+/* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
+   in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
 [data-component~="ui-text"][data-ui-text-state~="tone=danger"] {
-  color: var(--ui-danger);
+  color: var(--ui-danger-subtle-text);
 }
 [data-component~="ui-text"][data-ui-text-state~="tone=success"] {
-  color: var(--ui-success);
+  color: var(--ui-success-subtle-text);
 }
-/* The base info and warning colours fall short of 4.5:1 on sunken surfaces, so these use the
-   text-safe tokens a subtle badge sets its words in. */
 [data-component~="ui-text"][data-ui-text-state~="tone=info"] {
   color: var(--ui-info-subtle-text);
 }

package/vue/chunks/UiText.js

@@ -57,6 +57,6 @@ var UiText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}, _ctx.$attrs, { "data-ui-text-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_6));
 		};
 	}
-}), [["__scopeId", "data-v-e15a75c1"]]);
+}), [["__scopeId", "data-v-f6cb02e5"]]);
 //#endregion
 export { UiText_default as t };

package/vue/components.css

@@ -6371,89 +6371,89 @@ tbody tr[data-v-9980d203-s]:last-child > * {
 
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, or label. */
-[data-component~="ui-text"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-v-f6cb02e5] {
   margin: 0;
   min-inline-size: 0;
   color: var(--ui-text-primary);
   text-align: start;
 }
-[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-f6cb02e5] {
   font-size: var(--ui-font-size-xs);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-f6cb02e5] {
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-f6cb02e5] {
   font-size: var(--ui-font-size-md);
   line-height: var(--ui-line-height);
 }
-[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-f6cb02e5] {
   font-size: var(--ui-font-size-lg);
   line-height: var(--ui-line-height-relaxed);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-f6cb02e5] {
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-f6cb02e5] {
   color: var(--ui-text-muted);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-f6cb02e5] {
   color: var(--ui-accent-active);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-e15a75c1] {
-  color: var(--ui-danger);
+/* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
+   in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
+[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-f6cb02e5] {
+  color: var(--ui-danger-subtle-text);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-e15a75c1] {
-  color: var(--ui-success);
+[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-f6cb02e5] {
+  color: var(--ui-success-subtle-text);
 }
-/* The base info and warning colours fall short of 4.5:1 on sunken surfaces, so these use the
-   text-safe tokens a subtle badge sets its words in. */
-[data-component~="ui-text"][data-ui-text-state~="tone=info"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="tone=info"][data-v-f6cb02e5] {
   color: var(--ui-info-subtle-text);
 }
-[data-component~="ui-text"][data-ui-text-state~="tone=warning"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="tone=warning"][data-v-f6cb02e5] {
   color: var(--ui-warning-subtle-text);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-f6cb02e5] {
   font-weight: var(--ui-font-normal);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-f6cb02e5] {
   font-weight: var(--ui-font-medium);
 }
-[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-f6cb02e5] {
   font-weight: var(--ui-font-semibold);
 }
-[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-f6cb02e5] {
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-f6cb02e5] {
   font-family: var(--ui-font-family-mono);
 }
 
 /* A link in running text is underlined, so it stands apart from the words around it by more than
    colour. */
-[data-component~="ui-text"] a[data-v-e15a75c1-s] {
+[data-component~="ui-text"] a[data-v-f6cb02e5-s] {
   color: var(--ui-accent-active);
   text-decoration: underline;
   text-decoration-thickness: 0.06em;
   text-underline-offset: 0.18em;
 }
-[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-f6cb02e5] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-e15a75c1] {
+[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-f6cb02e5] {
   text-align: center;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-text"][hidden][data-v-e15a75c1] {
+[data-component~="ui-text"][hidden][data-v-f6cb02e5] {
   display: none;
 }