ngwr 7.3.0 → 9.0.0

package/textarea/styles/_index.scss

@@ -5,15 +5,15 @@
   position: relative;
 
   // Defaults
-  --wr-textarea-color: var(--wr-color-dark);
-  --wr-textarea-placeholder: rgba(var(--wr-color-medium-rgb), 0.7);
-  --wr-textarea-bg: var(--wr-color-white);
-  --wr-textarea-border: var(--wr-color-light);
-  --wr-textarea-radius: var(--wr-border-radius-base);
+  --wr-textarea-color: var(--wr-color-on-surface);
+  --wr-textarea-placeholder: rgba(var(--wr-color-on-surface-muted-rgb), 0.7);
+  --wr-textarea-bg: var(--wr-color-surface);
+  --wr-textarea-border: var(--wr-color-outline);
+  --wr-textarea-radius: var(--wr-control-radius-md);
   --wr-textarea-ring: transparent;
   --wr-textarea-padding-y: 0.5rem;
-  --wr-textarea-padding-x: 0.75rem;
-  --wr-textarea-font-size: 0.875rem;
+  --wr-textarea-padding-x: var(--wr-control-padding-x-md);
+  --wr-textarea-font-size: var(--wr-text-sm);
   --wr-textarea-line-height: 1.375rem;
 
   background: var(--wr-textarea-bg);
@@ -32,11 +32,34 @@
   }
 
   &--disabled {
-    --wr-textarea-color: var(--wr-color-medium);
-    --wr-textarea-bg: rgba(var(--wr-color-light-rgb), 0.35);
+    --wr-textarea-color: var(--wr-color-on-surface-muted);
+    --wr-textarea-bg: rgba(var(--wr-color-outline-rgb), 0.35);
     cursor: not-allowed;
   }
 
+  // Horizontal resize needs a shrinkable, explicit-width box (not full-width block).
+  &--resize-x {
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  // Sizes — radius, padding, font + line-height scale; height stays content-driven.
+  &--sm {
+    --wr-textarea-radius: var(--wr-control-radius-sm);
+    --wr-textarea-padding-y: 0.375rem;
+    --wr-textarea-padding-x: var(--wr-control-padding-x-sm);
+    --wr-textarea-font-size: var(--wr-text-xs);
+    --wr-textarea-line-height: 1.125rem;
+  }
+
+  &--lg {
+    --wr-textarea-radius: var(--wr-control-radius-lg);
+    --wr-textarea-padding-y: 0.625rem;
+    --wr-textarea-padding-x: var(--wr-control-padding-x-lg);
+    --wr-textarea-font-size: var(--wr-text-base);
+    --wr-textarea-line-height: 1.625rem;
+  }
+
   &--no-resize &__native {
     resize: none;
   }
@@ -55,7 +78,8 @@
     line-height: var(--wr-textarea-line-height);
     padding: calc(var(--wr-textarea-padding-y) * var(--wr-density-y, 1))
       calc(var(--wr-textarea-padding-x) * var(--wr-density-x, 1));
-    resize: vertical;
+    // Native grip removed — we draw our own corner grip (&__resize) instead.
+    resize: none;
 
     &::placeholder {
       color: var(--wr-textarea-placeholder);
@@ -65,4 +89,35 @@
       cursor: not-allowed;
     }
   }
+
+  // Corner resize grip — icon (move-vertical / -horizontal / -diagonal-2) and
+  // cursor follow the `resize` direction.
+  &__resize {
+    position: absolute;
+    right: 0.25rem;
+    bottom: 0.25rem;
+    display: inline-flex;
+    color: var(--wr-color-text-faint);
+    touch-action: none;
+    transition: color var(--wr-transition-base);
+
+    &--vertical {
+      cursor: ns-resize;
+    }
+    &--horizontal {
+      cursor: ew-resize;
+    }
+    &--both {
+      cursor: nwse-resize;
+    }
+
+    .wr-icon__svg {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+
+    &:hover {
+      color: var(--wr-color-on-surface-muted);
+    }
+  }
 }

package/theme/styles/_colors.scss

@@ -5,7 +5,7 @@
 // Base palette
 //
 // Override the whole palette via:
-//   @use 'ngwr/theme/colors' with (
+//   @use 'ngwr/theme/styles/colors' with (
 //     $base-colors: (primary: #...)
 //   );
 
@@ -15,6 +15,7 @@ $base-colors: (
   success: #00a400,
   warning: #ffba00,
   danger: #fa383e,
+  info: #3b82f6,
   light: #cbd5e1,
   medium: #8594a4,
   dark: #0f172a,
@@ -65,6 +66,72 @@ $contrast-light: #ffffff !default;
   // and turns the backdrop into a white wash.
   --wr-color-backdrop-rgb: 0, 0, 0;
 
+  // Generic subtle hover-surface tint (icon buttons, list rows) — one place
+  // so the hover strength stays consistent everywhere.
+  --wr-color-hover: rgba(var(--wr-color-light-rgb), 0.4);
+
+  // Border / divider strengths — translucent so they read on any surface and
+  // auto-adapt in dark (via the flipping `light` channels). One place each.
+  --wr-color-border: rgba(var(--wr-color-light-rgb), 0.5);
+  --wr-color-border-subtle: rgba(var(--wr-color-light-rgb), 0.35);
+  --wr-color-border-strong: rgba(var(--wr-color-light-rgb), 0.6);
+
+  // Scrim behind modals / drawers — always black so the dim reads as "covered"
+  // regardless of theme.
+  --wr-color-overlay: rgba(var(--wr-color-backdrop-rgb), 0.45);
+
+  // De-emphasized text — `medium` dimmed to two canonical strengths so muted
+  // labels / captions / placeholders read consistently. One place each.
+  --wr-color-text-muted: rgba(var(--wr-color-medium-rgb), 0.85);
+  --wr-color-text-faint: rgba(var(--wr-color-medium-rgb), 0.6);
+
+  // Neutral gray ramp — a FIXED primitive scale (slate). Each step is a stable
+  // job (50 = subtlest surface tint … 950 = strongest ink) and, unlike the
+  // semantic neutrals, does NOT flip in dark mode. For theme-aware surface /
+  // text jobs reach for the role aliases below instead.
+  --wr-color-gray-50: #f8fafc;
+  --wr-color-gray-100: #f1f5f9;
+  --wr-color-gray-200: #e2e8f0;
+  --wr-color-gray-300: #cbd5e1;
+  --wr-color-gray-400: #94a3b8;
+  --wr-color-gray-500: #64748b;
+  --wr-color-gray-600: #475569;
+  --wr-color-gray-700: #334155;
+  --wr-color-gray-800: #1e293b;
+  --wr-color-gray-900: #0f172a;
+  --wr-color-gray-950: #020617;
+
+  // Semantic role aliases over the flipping neutrals — prefer these in new code
+  // for intent-free surface / text / outline jobs. They resolve through
+  // `white` / `dark` / `medium` / `light`, so they flip with the theme
+  // automatically.
+  //
+  // Why roles at all: the neutrals do double duty. `--wr-color-dark` is both
+  // the `color="dark"` INTENT (a button variant, public API) and the default
+  // text colour; `--wr-color-white` is both the `color="light"`-adjacent
+  // surface and the page background. Reading `dark` in a component tells you
+  // nothing about which job it is doing. The roles name the job, so a future
+  // reader — and a future re-theme — can tell them apart. The intent scale
+  // stays exactly as it is; these sit on top of it.
+  //
+  // Each role mirrors the literal 1:1, including the `-rgb` channel list so
+  // translucent fills (`rgba(var(--wr-color-surface-rgb), α)`) never have to
+  // reach back down to a literal.
+  --wr-color-surface: var(--wr-color-white);
+  --wr-color-surface-rgb: var(--wr-color-white-rgb);
+  --wr-color-on-surface: var(--wr-color-dark);
+  --wr-color-on-surface-rgb: var(--wr-color-dark-rgb);
+  --wr-color-on-surface-muted: var(--wr-color-medium);
+  --wr-color-on-surface-muted-rgb: var(--wr-color-medium-rgb);
+
+  // Solid hairline / divider colour. Distinct from `--wr-color-border` above,
+  // which is deliberately translucent (`light` at 50%) so it reads on any
+  // surface — `outline` is the opaque one components actually draw 1px rules
+  // with today. Both are kept: swapping one for the other changes appearance,
+  // not just naming.
+  --wr-color-outline: var(--wr-color-light);
+  --wr-color-outline-rgb: var(--wr-color-light-rgb);
+
   @each $name, $base in $base-colors {
     --wr-color-#{$name}: #{$base};
     --wr-color-#{$name}-rgb: #{_rgb-channels($base)};
@@ -74,6 +141,20 @@ $contrast-light: #ffffff !default;
     --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)};
     --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)};
   }
+
+  // Soft trio per intent (+ `medium` for neutral surfaces) — tokenizes the
+  // ad-hoc `rgba(var(--*-rgb), α)` fills components hand-rolled at ~8
+  // different alphas, so each alpha lives in ONE place. `-soft` is the
+  // canonical low-alpha fill, `-soft-border` the matching hairline, and
+  // `-soft-contrast` the readable same-hue text on it (deep in light,
+  // light in dark — follows `--wr-color-dark`). All theme-correct over any
+  // background via the -rgb channels.
+  @each $name in (primary, secondary, success, warning, danger, info, medium) {
+    --wr-color-#{$name}-soft: rgba(var(--wr-color-#{$name}-rgb), 0.12);
+    --wr-color-#{$name}-soft-border: rgba(var(--wr-color-#{$name}-rgb), 0.3);
+    --wr-color-#{$name}-soft-contrast: color-mix(in srgb, var(--wr-color-#{$name}) 62%, var(--wr-color-dark));
+    --wr-color-#{$name}-active: rgba(var(--wr-color-#{$name}-rgb), 0.2);
+  }
 }
 
 // Public SCSS list

package/theme/styles/_dark.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Dark theme overrides — opt-in via `[data-theme="dark"]` on <html>.
 // Drive the toggle from `WrTheme` (provided automatically with
 // `provideWrTheme(...)`).
@@ -5,6 +7,16 @@
 // Only semantic tokens flip — palette hues stay so brand-coloured
 // elements look the same regardless of theme.
 
+// Intents re-tuned for the dark canvas. Looped (below) so each gets the
+// FULL symmetric shade set — the hand blocks used to ship only base+rgb,
+// leaving -light/-dark/-lighter/-darker baked from the LIGHT palette.
+// (primary keeps its hand-tuned block; info stays its light values.)
+$dark-intents: (
+  success: #34c759,
+  warning: #ffcc33,
+  danger: #ff5c5c,
+);
+
 [data-theme='dark'] {
   // Canvas (was `--wr-color-white` in light mode)
   // Deeper than slate-900 so an elevated surface in slate-800 reads
@@ -63,14 +75,16 @@
   --wr-color-primary-lighter: #99b6ff;
   --wr-color-primary-darker: #1f3a99;
 
-  --wr-color-success: #34c759;
-  --wr-color-success-rgb: 52, 199, 89;
-
-  --wr-color-warning: #ffcc33;
-  --wr-color-warning-rgb: 255, 204, 51;
-
-  --wr-color-danger: #ff5c5c;
-  --wr-color-danger-rgb: 255, 92, 92;
+  // success / warning / danger — retuned bases now get the FULL symmetric
+  // shade set in dark too (generated, so no intent can silently drift).
+  @each $name, $base in $dark-intents {
+    --wr-color-#{$name}: #{$base};
+    --wr-color-#{$name}-rgb: #{color.channel($base, 'red')}, #{color.channel($base, 'green')}, #{color.channel($base, 'blue')};
+    --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)};
+    --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)};
+    --wr-color-#{$name}-dark: #{color.adjust($base, $lightness: -5%)};
+    --wr-color-#{$name}-darker: #{color.adjust($base, $lightness: -10%)};
+  }
 
   // Elevation
   // Black shadows at light-mode alphas vanish on the deep canvas; same

package/theme/styles/_focus.scss

@@ -91,3 +91,8 @@
 .wr-dropdown-item:focus-visible {
   @include focus-ring;
 }
+
+// Alert close
+.wr-alert__close:focus-visible {
+  @include focus-ring;
+}

package/theme/styles/_variables.scss

@@ -10,6 +10,30 @@
   --wr-border-radius-lg: 1rem;
   --wr-border-radius-pill: 50rem;
 
+  // Control sizing
+  //
+  // The shared contract every form control reads (button, input, select, …)
+  // so they line up pixel-for-pixel at each size. Height is NOT fixed — it's
+  // the sum of `line-height + 2×padding-y + 2×border(1px)`, so padding-y can
+  // stay density-aware (`* var(--wr-density-y)`) and controls track density
+  // together. Keep the three parts in sync if you retune a size.
+  //   sm → 22px · md → 30px · lg → 36px   (radius 5 / 6 / 7)
+  --wr-control-padding-y-sm: 0.125rem; // 2px  → 16 + 4 + 2 = 22
+  --wr-control-padding-y-md: 0.25rem; // 4px  → 20 + 8 + 2 = 30
+  --wr-control-padding-y-lg: 0.3125rem; // 5px  → 24 + 10 + 2 = 36
+  --wr-control-padding-x-sm: 0.5rem; // 8px
+  --wr-control-padding-x-md: 0.75rem; // 12px
+  --wr-control-padding-x-lg: 1rem; // 16px
+  --wr-control-line-height-sm: 1rem; // 16px
+  --wr-control-line-height-md: 1.25rem; // 20px
+  --wr-control-line-height-lg: 1.5rem; // 24px
+  --wr-control-font-size-sm: var(--wr-text-xs); // 12px
+  --wr-control-font-size-md: var(--wr-text-sm); // 14px
+  --wr-control-font-size-lg: var(--wr-text-base); // 16px
+  --wr-control-radius-sm: 5px;
+  --wr-control-radius-md: 6px;
+  --wr-control-radius-lg: 7px;
+
   // Easing curves
   --wr-ease-linear: linear;
   --wr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

package/tilt-card/styles/_index.scss

@@ -7,9 +7,9 @@
   position: relative;
   padding: 1.5rem;
   border-radius: 0.75rem;
-  border: 1px solid var(--wr-color-light);
-  background: var(--wr-color-white);
-  color: var(--wr-color-dark);
+  border: 1px solid var(--wr-color-outline);
+  background: var(--wr-color-surface);
+  color: var(--wr-color-on-surface);
   box-shadow: 0 1px 2px rgba(var(--wr-color-backdrop-rgb), 0.06);
   // Card itself doesn't need overflow:hidden by default — the directive
   // toggles overflow when glare is enabled. Authors can opt in.
@@ -27,7 +27,7 @@
   // to the classic white sheen below.
   background: radial-gradient(
     circle at var(--wr-tilt-glare-x, 50%) var(--wr-tilt-glare-y, 50%),
-    var(--wr-tilt-glare-color, rgba(var(--wr-color-dark-rgb), 0.12)),
+    var(--wr-tilt-glare-color, rgba(var(--wr-color-on-surface-rgb), 0.12)),
     transparent 60%
   );
   mix-blend-mode: multiply;

package/timeline/styles/_index.scss

@@ -7,7 +7,7 @@
   width: 100%;
   min-width: 0;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &--vertical {
     flex-direction: column;
@@ -36,7 +36,7 @@
     margin-top: 0.125rem;
     border-radius: 50%;
     background: var(--wr-color-primary);
-    box-shadow: 0 0 0 2px var(--wr-color-white);
+    box-shadow: 0 0 0 2px var(--wr-color-surface);
     z-index: 1;
   }
 
@@ -53,6 +53,7 @@
   }
 
   &--medium &__dot {
+    // The `color="medium"` INTENT, not the muted-text role — keep the literal.
     background: var(--wr-color-medium);
   }
 
@@ -64,7 +65,7 @@
   &__time {
     font-size: var(--wr-text-xs);
     line-height: 1rem;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-weight: var(--wr-font-weight-medium);
     margin-bottom: 0.125rem;
   }
@@ -79,7 +80,7 @@
     margin-top: 0.25rem;
     font-size: var(--wr-text-sm);
     line-height: var(--wr-leading-relaxed);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
   }
 
   // Vertical: connector line between dots.
@@ -91,7 +92,7 @@
       top: 1rem;
       bottom: -1.25rem;
       width: 1.5px;
-      background: var(--wr-color-light);
+      background: var(--wr-color-outline);
     }
 
     &:last-child::before {
@@ -101,19 +102,28 @@
 
   // Horizontal: row layout with line through dots.
   .wr-timeline--horizontal & {
+    // Equal-width columns so every dot sits at the same horizontal pitch
+    // and the connectors line up across items.
+    flex: 1 1 0;
     flex-direction: column;
     align-items: center;
     text-align: center;
     min-width: 8rem;
+    padding-bottom: 0;
 
+    // Connector runs from this dot's centre to the next dot's centre:
+    // half of this item + the 2rem gap + half of the next item. With equal
+    // widths that is `100% of the item + the gap`, anchored at the centre.
     &::before {
       content: '';
       position: absolute;
-      top: 0.625rem;
+      // Dot centre: margin-top 0.125rem + half of the 0.75rem dot = 0.5rem.
+      top: 0.5rem;
       left: 50%;
-      right: -2rem;
+      width: calc(100% + 2rem);
       height: 1.5px;
-      background: var(--wr-color-light);
+      background: var(--wr-color-outline);
+      z-index: 0;
     }
 
     &:last-child::before {

package/toast/styles/_index.scss

@@ -33,6 +33,14 @@ $toast-colors: (
     pointer-events: auto;
   }
 
+  // While expanded the toasts spread into a column with gaps. Those gaps are
+  // dead space under `pointer-events: none`, so the cursor crossing them fires
+  // mouseleave/mouseenter and toggles `expanded` (jitter). Make the whole host
+  // hit-testable while expanded so the inter-toast gaps stay "inside" it.
+  &--expanded {
+    pointer-events: auto;
+  }
+
   // Sonner-style stack
   // Collapsed: every toast except the front one collapses behind it with a
   // scale-down + tiny offset. Hovering the host expands them into the
@@ -117,11 +125,11 @@ $toast-colors: (
 }
 
 .wr-toast {
-  --wr-toast-bg: var(--wr-color-white);
-  --wr-toast-border: var(--wr-color-light);
+  --wr-toast-bg: var(--wr-color-surface);
+  --wr-toast-border: var(--wr-color-outline);
   --wr-toast-accent: var(--wr-color-primary);
-  --wr-toast-title: var(--wr-color-dark);
-  --wr-toast-message: var(--wr-color-medium);
+  --wr-toast-title: var(--wr-color-on-surface);
+  --wr-toast-message: var(--wr-color-on-surface-muted);
 
   position: relative;
   display: flex;
@@ -147,7 +155,7 @@ $toast-colors: (
   &__title {
     margin: 0 0 0.125rem;
     color: var(--wr-toast-title);
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     font-weight: 600;
     line-height: 1.25rem;
   }
@@ -155,7 +163,7 @@ $toast-colors: (
   &__message {
     margin: 0;
     color: var(--wr-toast-message);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.125rem;
     overflow-wrap: break-word;
   }
@@ -172,7 +180,7 @@ $toast-colors: (
     background: transparent;
     border: 0;
     padding: 0.125rem;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     cursor: pointer;
     border-radius: var(--wr-border-radius-sm);
     transition:
@@ -182,8 +190,8 @@ $toast-colors: (
     --wr-icon-size: 0.875rem;
 
     &:hover {
-      color: var(--wr-color-dark);
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      color: var(--wr-color-on-surface);
+      background: var(--wr-color-hover);
     }
   }
 
@@ -237,26 +245,26 @@ $toast-colors: (
   align-self: stretch;
   pointer-events: auto;
   appearance: none;
-  background: var(--wr-color-white);
-  border: 1px solid var(--wr-color-light);
+  background: var(--wr-color-surface);
+  border: 1px solid var(--wr-color-outline);
   @include theme.smooth-br(var(--wr-border-radius-base));
   padding: 0.375rem 0.75rem;
-  color: var(--wr-color-medium);
+  color: var(--wr-color-on-surface-muted);
   font-family: var(--wr-font-family-base);
-  font-size: 0.75rem;
+  font-size: var(--wr-text-xs);
   font-weight: 500;
   line-height: 1rem;
   text-align: center;
   cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--wr-shadow-xs);
   transition:
     color var(--wr-transition-base),
     background var(--wr-transition-base),
     border-color var(--wr-transition-base);
 
   &:hover {
-    color: var(--wr-color-dark);
-    border-color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface);
+    border-color: var(--wr-color-on-surface-muted);
   }
 }
 

package/toolbar/styles/_index.scss

@@ -13,12 +13,12 @@
   min-width: 0;
   min-height: 3rem;
   padding: 0.5rem 0.875rem;
-  background: var(--wr-color-white);
-  border: 1px solid var(--wr-color-light);
+  background: var(--wr-color-surface);
+  border: 1px solid var(--wr-color-outline);
   @include theme.smooth-br(var(--wr-border-radius-base));
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
+  box-shadow: var(--wr-shadow-xs);
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   // Opt-in (`responsive`): query the toolbar's own width so the zones stack
   // when it's too narrow for a row. Already full-width, so containment is safe.
@@ -69,7 +69,7 @@
       transform: translateY(-50%);
       height: 1.25rem;
       width: 1px;
-      background: var(--wr-color-light);
+      background: var(--wr-color-outline);
     }
   }
 }