@tangible/ui 0.0.2 → 0.0.4

package/styles/components/_bundle.scss

@@ -15,6 +15,7 @@
 @use "../../components/Icon/styles"             as icon;
 @use "../../components/IconButton/styles"       as iconbutton;
 @use "../../components/Modal/styles"            as modal;
+@use "../../components/MoveHandle/styles"       as movehandle;
 @use "../../components/Notice/styles"           as notice;
 @use "../../components/OverlapStack/styles"     as overlapstack;
 @use "../../components/Pager/styles"            as pager;
@@ -51,6 +52,7 @@
   @include icon.styles();
   @include iconbutton.styles();
   @include modal.styles();
+  @include movehandle.styles();
   @include notice.styles();
   @include overlapstack.styles();
   @include pager.styles();

package/styles/index.scss

@@ -10,6 +10,10 @@
 @include sys.emit-color-roles-dark(sys.$prefix);
 @include sys.emit-color-roles-auto(sys.$prefix);
 
+@include sys.emit-accent-roles(sys.$prefix);
+@include sys.emit-accent-roles-dark(sys.$prefix);
+@include sys.emit-accent-roles-auto(sys.$prefix);
+
 // Reduced motion: kill all token-driven transitions/animations globally.
 // Components using --tui-motion-duration get instant transitions for free.
 @media (prefers-reduced-motion: reduce) {
@@ -47,6 +51,7 @@
                     0 2px 4px rgba(var(--#{sys.$prefix}shadow-color), 0.06);
   --#{sys.$prefix}shadow-lg: 0 10px 15px rgba(var(--#{sys.$prefix}shadow-color), 0.1),
                     0 4px 6px rgba(var(--#{sys.$prefix}shadow-color), 0.05);
+  --#{sys.$prefix}shadow-dropdown: 0 4px 12px rgba(var(--#{sys.$prefix}shadow-color), 0.15);
 }
 @layer resets {
   .#{sys.$prefix}interface {

package/styles/system/_control.scss

@@ -16,6 +16,13 @@
 //   md  → 16px font → 40px (default)
 //   lg  → 20px font → 48px
 //
+// Override from consuming context (e.g. Fields for WordPress):
+//   .my-context .tui-interface {
+//     --tui-control-height-sm: 32px;
+//     --tui-control-height-md: 36px;
+//     --tui-control-height-lg: 44px;
+//   }
+//
 // Usage:
 //   .tui-select__trigger { @include sys.control-sizing(sys.$prefix); }
 //
@@ -24,11 +31,19 @@
 @mixin control-sizing($prefix) {
   --_fs: var(--#{$prefix}typography-size-md);
   --_py: var(--#{$prefix}spacing-xxs);
+  --_height: calc(2em + 2 * var(--_py));
 
   font-size: var(--_fs);
   padding-block: var(--_py);
-  min-height: calc(2em + 2 * var(--_py));
+  min-height: var(--#{$prefix}control-height-md, var(--_height));
+
+  &.is-size-sm {
+    --_fs: var(--#{$prefix}typography-size-sm);
+    min-height: var(--#{$prefix}control-height-sm, var(--_height));
+  }
 
-  &.is-size-sm { --_fs: var(--#{$prefix}typography-size-sm); }
-  &.is-size-lg { --_fs: var(--#{$prefix}typography-size-lg); }
+  &.is-size-lg {
+    --_fs: var(--#{$prefix}typography-size-lg);
+    min-height: var(--#{$prefix}control-height-lg, var(--_height));
+  }
 }

package/styles/system/_tokens.scss

@@ -46,6 +46,9 @@ $brand: 'blue';
     --#{$prefix}focus-ring-offset: 2px;
     --#{$prefix}focus-ring-color: #2563eb;
 
+    /* Font Weight */
+    --#{$prefix}font-weight-medium: 500;
+
     /* Border */
     --#{$prefix}border-width: 1px;
 
@@ -62,7 +65,8 @@ $brand: 'blue';
 
     /* Neutral: surfaces */
     --#{$prefix}color-bg:             #fff;
-    --#{$prefix}color-bg-surface:      #{pf.tone($neutral, 25)};
+    --#{$prefix}color-bg-surface:     #{pf.tone($neutral, 25)};
+    --#{$prefix}color-bg-muted:       #{pf.tone($neutral, 100)};
     --#{$prefix}color-bg-elevated:    #fff;
     --#{$prefix}color-bg-inverted:    #{pf.tone($neutral, 900)};
     --#{$prefix}color-bg-overlay:     rgba(0, 0, 0, var(--#{$prefix}opacity-backdrop));
@@ -149,7 +153,8 @@ $brand: 'blue';
   /* Backgrounds */
   --#{$prefix}color-bg:             #{pf.tone($neutral, 900)};
   --#{$prefix}color-bg-surface:     #{pf.tone($neutral, 800)};
-  --#{$prefix}color-bg-elevated:    #{pf.tone($neutral, 700)};
+  --#{$prefix}color-bg-muted:       #{pf.tone($neutral, 700)};
+  --#{$prefix}color-bg-elevated:    #{pf.tone($neutral, 900)};
   --#{$prefix}color-bg-inverted:    #{pf.tone($neutral, 50)};
   --#{$prefix}color-bg-overlay:     rgba(0, 0, 0, 0.7);
 
@@ -221,6 +226,118 @@ $brand: 'blue';
   }
 }
 
+// ==========================================================================
+// Accent Roles (compact, OKLCH-derived)
+// ==========================================================================
+//
+// For concepts that need their own colour identity but don't warrant a full
+// 7-step scale (section, page, step, or any future accent slot).
+//
+// Public API per accent (component-safe):
+//   --tui-theme-{name}-base      Primary fill (buttons, active states)
+//   --tui-theme-{name}-soft      Tinted surface (chips, badges, subtle panels)
+//   --tui-theme-{name}-border    Border for soft surfaces
+//   --tui-theme-{name}-on-base   Foreground on base
+//   --tui-theme-{name}-on-soft   Foreground on soft
+//
+// Components must only consume these role tokens, not the palette anchors.
+//
+// Primitives (swizzlable by consumers, OKLCH path only):
+//   --tui-palette-{name}-c       OKLCH chroma (cap at ≤ 0.20)
+//   --tui-palette-{name}-h       OKLCH hue (0–360)
+//
+// Two strategies for defining accents:
+//
+//   Path A — map from existing core families (no OKLCH needed):
+//     .my-context {
+//       --tui-theme-section-base:    var(--tui-theme-warning-base);
+//       --tui-theme-section-soft:    var(--tui-theme-warning-subtle);
+//       --tui-theme-section-border:  var(--tui-theme-warning-soft);
+//       --tui-theme-section-on-base: var(--tui-color-fg-on-accent);
+//       --tui-theme-section-on-soft: var(--tui-color-fg);
+//     }
+//
+//   Path B — derive from OKLCH anchors (true custom accent):
+//     Uses @supports guard with Path A fallback. No silent failures.
+//
+// ==========================================================================
+
+// Each accent: OKLCH anchors (c, h) + fallback core family for @supports guard
+$accent-defaults: (
+  section: (c: 0.17, h: 55,  fallback: warning),  // warm orange/amber
+  page:    (c: 0.15, h: 280, fallback: primary),   // purple
+  step:    (c: 0.14, h: 200, fallback: info),       // teal-blue
+) !default;
+
+// Emit accent role tokens with @supports progressive enhancement.
+// Fallback (all browsers): maps role tokens from core family scales.
+// Enhancement (oklch browsers): overrides with OKLCH-derived values.
+@mixin emit-accent-roles($prefix, $accents: $accent-defaults) {
+  // --- Fallback: map from core families (works everywhere) ---
+  :where(.#{$prefix}interface) {
+    @each $name, $values in $accents {
+      $family: map.get($values, fallback);
+
+      /* Accent: #{$name} (fallback → #{$family}) */
+      --#{$prefix}theme-#{$name}-base:    var(--#{$prefix}theme-#{$family}-base);
+      --#{$prefix}theme-#{$name}-soft:    var(--#{$prefix}theme-#{$family}-subtle);
+      --#{$prefix}theme-#{$name}-border:  var(--#{$prefix}theme-#{$family}-soft);
+      --#{$prefix}theme-#{$name}-on-base: var(--#{$prefix}color-fg-on-accent);
+      --#{$prefix}theme-#{$name}-on-soft: var(--#{$prefix}color-fg);
+    }
+  }
+
+  // --- Enhancement: OKLCH-derived (modern browsers) ---
+  @supports (color: oklch(0.5 0.1 0)) {
+    :where(.#{$prefix}interface) {
+      @each $name, $values in $accents {
+        $c: map.get($values, c);
+        $h: map.get($values, h);
+
+        /* Accent: #{$name} (OKLCH c=#{$c} h=#{$h}) */
+        --#{$prefix}palette-#{$name}-c: #{$c};
+        --#{$prefix}palette-#{$name}-h: #{$h};
+
+        --#{$prefix}theme-#{$name}-base:    oklch(0.62 var(--#{$prefix}palette-#{$name}-c) var(--#{$prefix}palette-#{$name}-h));
+        --#{$prefix}theme-#{$name}-soft:    oklch(0.92 calc(var(--#{$prefix}palette-#{$name}-c) * 0.55) var(--#{$prefix}palette-#{$name}-h));
+        --#{$prefix}theme-#{$name}-border:  oklch(0.80 calc(var(--#{$prefix}palette-#{$name}-c) * 0.45) var(--#{$prefix}palette-#{$name}-h));
+        --#{$prefix}theme-#{$name}-on-base: oklch(0.98 0 0);
+        --#{$prefix}theme-#{$name}-on-soft: var(--#{$prefix}color-fg);
+      }
+    }
+  }
+}
+
+// Private: dark mode accent OKLCH overrides (swap L values, tighten chroma).
+// Fallback path needs no dark override — core family vars already handle it.
+@mixin _accent-dark-overrides($prefix, $accents: $accent-defaults) {
+  @supports (color: oklch(0.5 0.1 0)) {
+    @each $name, $_ in $accents {
+      --#{$prefix}theme-#{$name}-base:    oklch(0.72 var(--#{$prefix}palette-#{$name}-c) var(--#{$prefix}palette-#{$name}-h));
+      --#{$prefix}theme-#{$name}-soft:    oklch(0.30 calc(var(--#{$prefix}palette-#{$name}-c) * 0.35) var(--#{$prefix}palette-#{$name}-h));
+      --#{$prefix}theme-#{$name}-border:  oklch(0.38 calc(var(--#{$prefix}palette-#{$name}-c) * 0.30) var(--#{$prefix}palette-#{$name}-h));
+      --#{$prefix}theme-#{$name}-on-base: oklch(0.18 0 0);
+      --#{$prefix}theme-#{$name}-on-soft: var(--#{$prefix}color-fg);
+    }
+  }
+}
+
+// Public: explicit dark mode (data-theme="dark")
+@mixin emit-accent-roles-dark($prefix, $accents: $accent-defaults) {
+  :where(.#{$prefix}interface)[data-theme="dark"] {
+    @include _accent-dark-overrides($prefix, $accents);
+  }
+}
+
+// Public: auto mode - respects system preference (data-theme="auto")
+@mixin emit-accent-roles-auto($prefix, $accents: $accent-defaults) {
+  @media (prefers-color-scheme: dark) {
+    :where(.#{$prefix}interface)[data-theme="auto"] {
+      @include _accent-dark-overrides($prefix, $accents);
+    }
+  }
+}
+
 @mixin emit-spacing-primitives($prefix, $steps: $spacing-steps) {
   @each $n in $steps {
     --#{$prefix}palette-spacing-#{$n}: calc(var(--#{$prefix}spacing-base) * #{$n});