@threadlabs/looma 0.2.20 → 0.3.0

package/theme-dark.css

@@ -7,15 +7,40 @@
       --ui-surface-muted: #242424;
       --ui-surface-subtle: #2e2e2e;
       --ui-surface-elevated: #2a2a2a;
+      --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
+      --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
+      --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
+      --ui-control-focus-halo: color-mix(in srgb, var(--ui-accent-solid) 30%, transparent);
+      --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+
+      --ui-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
+      --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
+      --ui-shadow-md: 0 4px 12px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
+      --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
+      --ui-shadow-xl: 0 18px 48px rgb(0 0 0 / 0.6), 0 8px 18px rgb(0 0 0 / 0.4);
 
       --ui-text-primary: #f0f0ec;
       --ui-text-secondary: #a0a09c;
       --ui-text-muted: #6a6a66;
-      --ui-text-on-accent: #ffffff;
+      --ui-text-on-accent: #1a1a1a;
 
       --ui-border-subtle: #2b2b28;
       --ui-border-default: #333330;
       --ui-border-strong: #4a4a46;
+      --ui-focus-ring: #a99bf5;
+
+      /* Form controls need a visible 3:1 boundary and 4.5:1 placeholder text;
+         general dividers intentionally remain quieter. */
+      --ui-control-surface: #202020;
+      --ui-control-surface-disabled: #242424;
+      --ui-control-border: #6f6f69;
+      --ui-control-border-hover: #92928c;
+      --ui-control-placeholder: #a0a09c;
+
+      --ui-accent-solid: #a99bf5;
+      --ui-accent-hover: #b9adff;
+      --ui-accent-active: #c8beff;
+      --ui-accent-soft: #282342;
 
       --ui-danger-solid: #ef6f86;
       --ui-danger-hover: #f58a9d;
@@ -26,6 +51,21 @@
       --ui-warning-soft: #2d2410;
       --ui-info-solid: #4d9fff;
       --ui-info-soft: #1a2a3d;
+      --ui-accent-strong-surface: #5148c8;
+      --ui-accent-on-strong: #ffffff;
+      --ui-accent-subtle-text: #b8b3ff;
+      --ui-danger-strong-surface: #a61b3c;
+      --ui-danger-on-strong: #ffffff;
+      --ui-danger-subtle-text: #ff9aae;
+      --ui-success-strong-surface: #006b2d;
+      --ui-success-on-strong: #ffffff;
+      --ui-success-subtle-text: #62dc89;
+      --ui-warning-strong-surface: #d69a0a;
+      --ui-warning-on-strong: #1f1500;
+      --ui-warning-subtle-text: #ffc45c;
+      --ui-info-strong-surface: #075cad;
+      --ui-info-on-strong: #ffffff;
+      --ui-info-subtle-text: #7eb8ff;
     }
   }
 
@@ -36,15 +76,39 @@
     --ui-surface-muted: #242424;
     --ui-surface-subtle: #2e2e2e;
     --ui-surface-elevated: #2a2a2a;
+    --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
+    --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
+    --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
+    --ui-control-focus-halo: color-mix(in srgb, var(--ui-accent-solid) 30%, transparent);
+    --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+
+    --ui-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
+    --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
+    --ui-shadow-md: 0 4px 12px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
+    --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
+    --ui-shadow-xl: 0 18px 48px rgb(0 0 0 / 0.6), 0 8px 18px rgb(0 0 0 / 0.4);
 
     --ui-text-primary: #f0f0ec;
     --ui-text-secondary: #a0a09c;
     --ui-text-muted: #6a6a66;
-    --ui-text-on-accent: #ffffff;
+    --ui-text-on-accent: #1a1a1a;
 
     --ui-border-subtle: #2b2b28;
     --ui-border-default: #333330;
     --ui-border-strong: #4a4a46;
+    --ui-focus-ring: #a99bf5;
+
+    /* Keep explicit dark mode identical to the system-dark palette. */
+    --ui-control-surface: #202020;
+    --ui-control-surface-disabled: #242424;
+    --ui-control-border: #6f6f69;
+    --ui-control-border-hover: #92928c;
+    --ui-control-placeholder: #a0a09c;
+
+    --ui-accent-solid: #a99bf5;
+    --ui-accent-hover: #b9adff;
+    --ui-accent-active: #c8beff;
+    --ui-accent-soft: #282342;
 
     --ui-danger-solid: #ef6f86;
     --ui-danger-hover: #f58a9d;
@@ -55,5 +119,20 @@
     --ui-warning-soft: #2d2410;
     --ui-info-solid: #4d9fff;
     --ui-info-soft: #1a2a3d;
+    --ui-accent-strong-surface: #5148c8;
+    --ui-accent-on-strong: #ffffff;
+    --ui-accent-subtle-text: #b8b3ff;
+    --ui-danger-strong-surface: #a61b3c;
+    --ui-danger-on-strong: #ffffff;
+    --ui-danger-subtle-text: #ff9aae;
+    --ui-success-strong-surface: #006b2d;
+    --ui-success-on-strong: #ffffff;
+    --ui-success-subtle-text: #62dc89;
+    --ui-warning-strong-surface: #d69a0a;
+    --ui-warning-on-strong: #1f1500;
+    --ui-warning-subtle-text: #ffc45c;
+    --ui-info-strong-surface: #075cad;
+    --ui-info-on-strong: #ffffff;
+    --ui-info-subtle-text: #7eb8ff;
   }
 }

package/theme-high-contrast.css

@@ -13,6 +13,13 @@
       --ui-border-default: #000000;
       --ui-border-strong: #000000;
       --ui-focus-ring: #0000ff;
+      --ui-accent-solid: #0000cc;
+      --ui-accent-hover: #000080;
+      --ui-accent-active: #000066;
+      --ui-accent-soft: #e6e6ff;
+      --ui-danger-solid: #8b0000;
+      --ui-danger-hover: #5c0000;
+      --ui-danger-soft: #fff0f0;
     }
   }
 
@@ -29,5 +36,12 @@
     --ui-border-default: #000000;
     --ui-border-strong: #000000;
     --ui-focus-ring: #0000ff;
+    --ui-accent-solid: #0000cc;
+    --ui-accent-hover: #000080;
+    --ui-accent-active: #000066;
+    --ui-accent-soft: #e6e6ff;
+    --ui-danger-solid: #8b0000;
+    --ui-danger-hover: #5c0000;
+    --ui-danger-soft: #fff0f0;
   }
 }

package/theme-light.css

@@ -1,5 +1,5 @@
 @layer base {
-  :root,
+  :root:not([data-theme]),
   [data-theme="light"] {
     color-scheme: light;
     --ui-surface-canvas: #ffffff;
@@ -16,6 +16,20 @@
     --ui-border-subtle: #ecece8;
     --ui-border-default: #e4e4e0;
     --ui-border-strong: #c8c8c4;
+    --ui-focus-ring: #5b55d6;
+
+    /* Form controls need a visible 3:1 boundary and 4.5:1 placeholder text;
+       general dividers intentionally remain quieter. */
+    --ui-control-surface: #ffffff;
+    --ui-control-surface-disabled: #f0f0ec;
+    --ui-control-border: #858580;
+    --ui-control-border-hover: #5c5c58;
+    --ui-control-placeholder: #62625e;
+
+    --ui-accent-solid: #5b55d6;
+    --ui-accent-hover: #4b45bd;
+    --ui-accent-active: #3e399e;
+    --ui-accent-soft: #efeffc;
 
     --ui-danger-solid: #b4233f;
     --ui-danger-hover: #941d35;
@@ -26,5 +40,20 @@
     --ui-warning-soft: #fdf7e6;
     --ui-info-solid: #0066cc;
     --ui-info-soft: #e8f0fb;
+    --ui-accent-strong-surface: #5b55d6;
+    --ui-accent-on-strong: #ffffff;
+    --ui-accent-subtle-text: #3e399e;
+    --ui-danger-strong-surface: #b4233f;
+    --ui-danger-on-strong: #ffffff;
+    --ui-danger-subtle-text: #941d35;
+    --ui-success-strong-surface: #007a33;
+    --ui-success-on-strong: #ffffff;
+    --ui-success-subtle-text: #006629;
+    --ui-warning-strong-surface: #b45309;
+    --ui-warning-on-strong: #ffffff;
+    --ui-warning-subtle-text: #704800;
+    --ui-info-strong-surface: #0066cc;
+    --ui-info-on-strong: #ffffff;
+    --ui-info-subtle-text: #0058b0;
   }
 }

package/tokens.css

@@ -81,11 +81,18 @@
     --ui-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
     --ui-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.08);
     --ui-shadow-dialog: var(--ui-shadow-xl);
+
+    /* Semantic elevation: every floating surface uses one of these so overlays read consistently. */
+    --ui-elevation-tooltip: var(--ui-shadow-md);
+    --ui-elevation-overlay: var(--ui-shadow-lg);
+    --ui-elevation-dialog: var(--ui-shadow-xl);
     --ui-overlay-backdrop: rgba(0, 0, 0, 0.4);
 
     --ui-motion-fast: 120ms;
     --ui-motion-base: 180ms;
     --ui-motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
+    /* Fast start, gentle settle: for reveals that should feel immediate (expanding panels). */
+    --ui-motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 
     /* Anticipatory interaction: guide → near → direct → active. */
     --ui-affordance-guide-size: 0.25rem;
@@ -127,6 +134,42 @@
     --ui-info-solid: #0066cc;
     --ui-info-soft: #e8f0fb;
 
+    /* Intent colors split readable foreground use from filled-surface use. */
+    --ui-accent-strong-surface: #5b55d6;
+    --ui-accent-on-strong: #ffffff;
+    --ui-accent-subtle-text: #3e399e;
+    --ui-danger-strong-surface: #b4233f;
+    --ui-danger-on-strong: #ffffff;
+    --ui-danger-subtle-text: #941d35;
+    --ui-success-strong-surface: #007a33;
+    --ui-success-on-strong: #ffffff;
+    --ui-success-subtle-text: #006629;
+    /* Deeper amber so the solid warning badge carries white text like the other tones (5:1). */
+    --ui-warning-strong-surface: #b45309;
+    --ui-warning-on-strong: #ffffff;
+    --ui-warning-subtle-text: #704800;
+    --ui-info-strong-surface: #0066cc;
+    --ui-info-on-strong: #ffffff;
+    --ui-info-subtle-text: #0058b0;
+
+    /* Depth and focus. Fields read as a shallow well; buttons as gently raised. Focus is a soft halo
+       that transitions in (no hard outline ring). */
+    --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.07), inset 0 1px 0 rgb(0 0 0 / 0.02);
+    --ui-control-focus-halo-shadow: 0 0 0 3px var(--ui-control-focus-halo, color-mix(in srgb, var(--ui-focus-ring) 24%, transparent));
+    --ui-raised: 0 1px 2px rgb(0 0 0 / 0.07), 0 1px 1px rgb(0 0 0 / 0.04);
+    --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0));
+    --ui-focus-halo: 0 0 0 3px color-mix(in srgb, var(--ui-focus-ring) 40%, transparent);
+
+    /* Icon sizes, used by icon buttons and field affordances. */
+    --ui-icon-size-sm: 1rem;
+    --ui-icon-size-md: 1.25rem;
+    --ui-icon-size-lg: 1.5rem;
+
+    /* One height scale for every form control and button size. */
+    --ui-control-size-sm: 2rem;
+    --ui-control-size-md: 2.5rem;
+    --ui-control-size-lg: 3rem;
+    /* Touch-target floor applied under coarse pointers. */
     --ui-control-min-block-size: 2.75rem;
 
     /* Compatibility aliases used by the editor's public styling surface.
@@ -165,7 +208,8 @@
     --ui-control-border: var(--ui-border-default);
     --ui-control-border-hover: var(--ui-border-strong);
     --ui-control-focus: var(--ui-focus-ring);
-    --ui-control-focus-halo: var(--ui-accent-soft);
+    /* Derived from the ring, not the near-white accent tint, so the halo shows on any surface. */
+    --ui-control-focus-halo: color-mix(in srgb, var(--ui-focus-ring) 24%, transparent);
   }
 
   @supports (color: oklch(0.5 0.1 240)) {