@livenetworks/ashlar 2.1.12 → 2.2.0

package/theme/config/_palette.scss

@@ -11,64 +11,51 @@
 	--color-secondary-light:   160 84% 94%;
 	--color-secondary-lighter: 160 84% 97%;
 
-	// Status colors
-	--color-success:         142 76% 36%;
+	// Status colors — solid tones sit below the 7:1 text/fill target;
+	// ratios are against white (D2: design values kept exact).
+	--color-success:         142 72% 29%;   // 5.07:1
 	--color-success-light:   142 71% 94%;
 	--color-success-lighter: 142 71% 97%;
 
-	--color-error:           0 84% 48%;
+	--color-error:           0 72% 51%;     // 4.80:1
 	--color-error-light:     0 84% 94%;
 	--color-error-lighter:   0 84% 97%;
 
-	--color-warning:         32 95% 38%;
+	--color-warning:         26 90% 37%;    // 5.04:1
 	--color-warning-light:   38 92% 94%;
 	--color-warning-lighter: 38 92% 97%;
 
-	--color-info:            200 95% 38%;
+	--color-info:            221 83% 53%;   // 5.20:1
 	--color-info-light:      199 89% 94%;
 	--color-info-lighter:    199 89% 97%;
 
-	// Neutral scale (canonical greys)
-	--color-neutral-50:  210 20% 98%;
-	--color-neutral-100: 220 14% 96%;
-	--color-neutral-150: 220 13% 93%;
-	--color-neutral-175: 220 13% 91%;
-	--color-neutral-200: 220 13% 90%;
-	--color-neutral-300: 216 12% 84%;
-	--color-neutral-400: 218 11% 58%;
-	--color-neutral-500: 220 10% 40%;
-	--color-neutral-600: 215 14% 34%;
-	--color-neutral-700: 217 19% 27%;
-	--color-neutral-800: 215 28% 17%;
+	// Neutral scale — cool slate greys
+	--color-neutral-50:  210 40% 98%;
+	--color-neutral-100: 210 40% 96%;
+	--color-neutral-150: 214 35% 93%;
+	--color-neutral-175: 214 33% 92%;
+	--color-neutral-200: 214 32% 91%;
+	--color-neutral-300: 213 27% 84%;
+	--color-neutral-400: 215 20% 65%;
+	--color-neutral-500: 215 16% 47%;
+	--color-neutral-600: 215 19% 35%;
+	--color-neutral-700: 215 25% 27%;
+	--color-neutral-800: 217 33% 17%;
 	--color-neutral-900: 222 47% 11%;
 
 	// Base canvas background
 	--color-white: 0 0% 100%;
 
-	// Shadows — cool-tinted, dual-layer (ambient + key light)
+	// Shadows — soft, diffuse, single layer. Resting surfaces are defined by
+	// their border; depth is reserved for floating layers.
 	--shadow-none: none;
 
-	--shadow-xs:
-		0 1px 2px 0 hsl(220 40% 10% / 0.05);
-
-	--shadow-sm:
-		0 1px 3px 0 hsl(220 40% 10% / 0.07),
-		0 1px 2px -1px hsl(220 40% 10% / 0.05);
-
-	--shadow-md:
-		0 4px 6px -1px hsl(220 40% 10% / 0.08),
-		0 2px 4px -2px hsl(220 40% 10% / 0.05);
-
-	--shadow-lg:
-		0 10px 15px -3px hsl(220 40% 10% / 0.08),
-		0 4px 6px -4px hsl(220 40% 10% / 0.04);
-
-	--shadow-xl:
-		0 20px 25px -5px hsl(220 40% 10% / 0.09),
-		0 8px 10px -6px hsl(220 40% 10% / 0.04);
-
-	--shadow-2xl:
-		0 25px 50px -12px hsl(220 40% 10% / 0.18);
+	--shadow-xs:  0 1px 2px hsl(215 40% 20% / 0.04);
+	--shadow-sm:  0 2px 6px hsl(215 40% 20% / 0.05);
+	--shadow-md:  0 4px 16px -4px hsl(215 40% 20% / 0.10);
+	--shadow-lg:  0 12px 32px -8px hsl(215 40% 20% / 0.14);
+	--shadow-xl:  0 24px 48px -12px hsl(215 40% 20% / 0.18);
+	--shadow-2xl: 0 32px 64px -16px hsl(215 40% 20% / 0.22);
 
 	--shadow-inner:
 		inset 0 2px 4px 0 hsl(220 40% 15% / 0.06);
@@ -79,24 +66,29 @@
 	// Value vocabulary — what bg/fg/border/shadow values exist
 	--bg-base:     hsl(var(--color-white));
 	--bg-elevated: var(--bg-base);
-	--bg-sunken:   hsl(var(--color-neutral-100));
-	--bg-recessed: hsl(var(--color-neutral-50));
+	--bg-sunken:   hsl(var(--color-neutral-50));    // quiet chrome (thead, tracks)
+	--bg-recessed: hsl(var(--color-neutral-100));   // page canvas
 
 	--bg-hover:  hsl(var(--color-neutral-100));
 	--bg-active: hsl(var(--color-neutral-150));
 
-	// Bound low on the ramp so every tier clears 7:1 against --bg-active,
-	// the lightest surface any of them lands on (8.02 / 11.52 / 14.11).
-	--fg-default: hsl(var(--color-neutral-900));
-	--fg-muted:   hsl(var(--color-neutral-800));
-	--fg-subtle:  hsl(var(--color-neutral-700));
+	// fg-muted and fg-subtle are below the 7:1 target (D2: design values kept).
+	--fg-default: hsl(var(--color-neutral-800));
+	--fg-muted:   hsl(213 20% 40%);                 // 6.07:1 on white
+	--fg-subtle:  hsl(var(--color-neutral-500));    // 4.72:1 on white, 4.30:1 on the canvas
 
 	--border-subtle:       hsl(var(--color-neutral-200));
 	--border-strong:       hsl(var(--color-neutral-300));
+	--border-strong-hover: hsl(var(--color-neutral-500));   // 4.72:1 on white; one ramp step darker than --border-ui
 
 	// Interactive boundaries only (input/select/checkbox). 1.4.11 wants 3:1
 	// for these; --border-subtle/-strong stay decorative and exempt.
-	--border-ui:           hsl(var(--color-neutral-400));
+	// Solved literal: slate-300 is 1.48:1, slate-400 is 2.57:1.
+	--border-ui:           hsl(215 20% 58%);        // 3.24:1 on white
+
+	// Lightness step for accent hover/active (relative colour syntax,
+	// unitless). Light surfaces darken; dark values flip the sign.
+	--accent-hover-shift: -8;
 
 	--color-scrim:  hsl(var(--color-neutral-900) / 0.5);
 
@@ -143,14 +135,23 @@
 
 	--border-subtle:       hsl(var(--color-neutral-175));
 	--border-strong:       hsl(var(--color-neutral-300));
+	--border-strong-hover: hsl(var(--color-neutral-400));
 
 	--border-ui:           hsl(var(--color-neutral-400));
 
+	// Dark surfaces lighten on hover.
+	--accent-hover-shift: 8;
+
 	// Scrims — anchored to black, not the ramp: dark --color-neutral-900 is
 	// near-white, so binding either to it would need an index flip.
 	--color-scrim:  hsl(0 0% 0% / 0.6);
 	--app-scrim-bg: hsl(0 0% 0% / 0.4);
 
+	// Status tones — brighter on dark surfaces
+	--color-success:         142 69% 48%;
+	--color-warning:         38 92% 55%;
+	--color-info:            213 94% 68%;
+
 	// Status tint layers — re-tuned for dark surfaces
 	--color-success-light:   142 50% 18%;
 	--color-success-lighter: 142 40% 13%;
@@ -159,7 +160,7 @@
 	--color-info-light:      217 55% 22%;
 	--color-info-lighter:    217 45% 15%;
 	
-	--color-error:           0 84% 65%; // Lighter red for text contrast in dark mode
+	--color-error:           0 91% 71%; // Lighter red for text contrast in dark mode
 	--color-error-light:     0 50% 20%;
 	--color-error-lighter:   0 40% 14%;
 
@@ -215,7 +216,7 @@
 // stylesheet load order, which is brand.css's whole guarantee.
 // ---------------------------------------------------------------------------
 :where(:root) {
-	--brand-primary:   221 83% 43%;
+	--brand-primary:   201 96% 32%;   // 5.94:1 on white (D2: design value kept)
 	--brand-secondary: 160 84% 36%;
 }
 
@@ -239,6 +240,8 @@
 	--color-border: var(--border-subtle);
 	--shadow:       var(--shadow-resting);
 	--radius:       var(--radius-md);
+	// Indirection so a skin that zeroes --radius-lg (glass) reaches panels.
+	--panel-radius: var(--radius-lg);
 
 	// accent — tints computed against the LOCAL --bg-base, so one
 	// formula serves both themes. The two override slots are
@@ -272,3 +275,22 @@
 	--btn-fg-hover:     var(--color-fg);
 	--btn-border-hover: var(--border-strong);
 }
+
+// ---------------------------------------------------------------------------
+// Default dark lift — brighter accent with an ink label on dark surfaces.
+// Zero specificity; [data-theme] subtrees are excluded so an ancestor theme's
+// declaration is not clobbered (Declaration-Site Invariant).
+// ---------------------------------------------------------------------------
+:where([data-mode="dark"]:not([data-theme], [data-theme] *)) {
+	--brand-primary:   199 89% 64%;   // 8.79:1 vs ink
+	--color-accent-fg: hsl(var(--color-ink));
+	--check-mark:      var(--check-mark-on-dark);
+}
+
+@media (prefers-color-scheme: dark) {
+	:where(:root:not([data-mode="light"]):not([data-theme])) {
+		--brand-primary:   199 89% 64%;
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark:      var(--check-mark-on-dark);
+	}
+}

package/theme/config/_theme.scss

@@ -16,6 +16,7 @@
 //   :root:not([data-mode="light"])          ← opt-out of auto
 //   <html data-skin="glass">                ← structural preset (flat, borderless)
 //   <html data-theme="ocean">               ← brand palette preset
+//   <aside data-mode="dark" data-theme="navy"> ← dark navy brand region
 //
 // See docs-mcp/css/theming.md for the full guide.
 // ==========================================================================
@@ -153,6 +154,28 @@
 	}
 }
 
+// Brand region — a dark-navy surface island, e.g. a sidebar. Always paired
+// with data-mode="dark": the ramp re-seats the dark vocabulary on navy.
+//   <aside data-mode="dark" data-theme="navy">
+[data-theme="navy"] {
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--color-neutral-50:  213 74% 8%;
+		--color-neutral-100: 213 74% 11%;
+		--color-neutral-150: 213 55% 15%;
+		--color-neutral-175: 213 50% 17%;
+		--color-neutral-200: 213 45% 20%;
+		--color-neutral-300: 213 35% 28%;
+		--color-neutral-400: 213 30% 40%;   // 2.82:1 on navy-100, under the 3:1 ui target
+		--color-neutral-600: 215 20% 65%;   // 6.80:1 on navy-100 (fg-subtle)
+		--color-neutral-700: 213 27% 84%;   // 11.79:1
+		--color-neutral-900: 210 40% 98%;   // 16.70:1
+		--brand-primary: 199 89% 64%;       // 8.59:1 on navy-100
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
 // ---------------------------------------------------------------------------
 // Named skins — structural/physics presets. Polarity-agnostic. Activation:
 //   <html data-skin="glass">
@@ -185,9 +208,10 @@
 	--btn-bg-hover: var(--bg-hover);
 	--btn-border: var(--color-accent);
 	// --color-accent-hover is declared only below <html> (a, mixin bodies);
-	// invalid at computed-value time here — derive locally. l - 6 matches
-	// @mixin btn's own accent-hover so neutral and accent buttons agree.
-	--btn-border-hover: hsl(from var(--color-accent) h s calc(l - 6));
+	// invalid at computed-value time here — derive locally. Follows
+	// --accent-hover-shift like @mixin btn's own accent-hover, so neutral
+	// and accent buttons agree.
+	--btn-border-hover: hsl(from var(--color-accent) h s calc(l + var(--accent-hover-shift)));
 
 	// ── Accent buttons — translucent fill via consumer-scope rebind
 	// Rebind --btn-* on the button itself (not at skin :root) so
@@ -263,31 +287,3 @@
 		--btn-border-hover: hsl(var(--color-primary));
 	}
 }
-
-[data-skin="soft"] {
-	// Soft — playful, maximum radius, heavily shadow-based, no borders.
-	--radius-xs: 0.5rem;
-	--radius-sm: 0.75rem;
-	--radius-md: 1rem;
-	--radius-lg: 1.5rem;
-	--radius-xl: 2rem;
-	--radius-2xl: 2.5rem;
-
-	// Override shadows to be much larger and softer (volumetric look)
-	--shadow-sm: 0 8px 16px -2px rgba(0, 0, 0, 0.08);
-	--shadow-md: 0 12px 24px -4px rgba(0, 0, 0, 0.12);
-	--shadow-lg: 0 24px 48px -4px rgba(0, 0, 0, 0.16);
-
-	// Floating elements are more pronounced
-	--shadow-resting: var(--shadow-sm);
-	--shadow-floating: var(--shadow-lg);
-
-	// Remove default subtle borders (cards, panels) so they rely solely on shadows
-	--border-subtle: transparent;
-
-	// ── Buttons — pill shapes, floating, no borders
-	--btn-border: transparent;
-	--btn-border-hover: transparent;
-	--btn-bg: var(--bg-elevated);
-	--btn-bg-hover: var(--bg-hover);
-}

package/theme/config/_tokens.scss

@@ -1,5 +1,3 @@
-@use 'mixins/breakpoints' as *;
-
 // ==========================================================================
 // Design Tokens — ln-ashlar
 // ==========================================================================
@@ -53,23 +51,24 @@
 	--max-w-form:      32rem;
 	--max-w-content:   48rem;
 	--max-w-container: 80rem;
+	--grid-item-min-width: 14rem;   // intrinsic minimum for auto-fit card grids
 
 	// -----------------------------------------------------------------------
 	// Border Radius
 	// -----------------------------------------------------------------------
 	--radius-none: 0;
-	--radius-xs:   0.125rem;   // 2px
-	--radius-sm:   0.25rem;    // 4px
-	--radius-md:   0.375rem;   // 6px
-	--radius-lg:   0.5rem;     // 8px
-	--radius-xl:   0.75rem;    // 12px
-	--radius-2xl:  1rem;       // 16px
+	--radius-xs:   0.25rem;    // 4px
+	--radius-sm:   0.375rem;   // 6px
+	--radius-md:   0.625rem;   // 10px — controls (--radius)
+	--radius-lg:   1rem;       // 16px — panels, modals
+	--radius-xl:   1.375rem;   // 22px
+	--radius-2xl:  1.75rem;    // 28px
 	--radius-full: 9999px;
 
 	// -----------------------------------------------------------------------
 	// Transitions — durations
 	// -----------------------------------------------------------------------
-	--transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	--transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 	--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 	--transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
@@ -85,7 +84,9 @@
 	// -----------------------------------------------------------------------
 	// Typography
 	// -----------------------------------------------------------------------
-	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	// Plus Jakarta Sans is not bundled — the page loads it, or the stack
+	// falls back to Inter / system UI.
+	--font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 	--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
 	--font-features: "cv02", "cv03", "cv04", "cv11", "tnum";
 
@@ -214,6 +215,21 @@
 	--btn-padding-x:    var(--size-sm-up);
 	--btn-padding-y:    var(--size-xs-up);
 
+	// Control size contract — buttons, text inputs, selects and pills share
+	// one line box and one vertical padding per density tier:
+	//   height = --control-line-height + 2 × padding-y + 2 × border
+	//   compact 22 + 2×6 + 2 = 36px · comfortable 44px · spacious 54px
+	// Density rebinds all three in _density.scss.
+	--control-line-height: 1.375rem;   // 22px
+	--input-padding-y:     var(--btn-padding-y);
+
+	// Card and table padding — structural rhythm, density-reactive via
+	// _density.scss (compact values here).
+	--card-padding-y:        var(--size-sm-up);   // 12px
+	--card-padding-x:        var(--size-md);      // 16px
+	--table-cell-padding-y:  var(--size-sm);      // 8px
+	--table-cell-padding-x:  var(--size-md);      // 16px
+
 	// -- Typography — primitives -----------------------------------------
 	// Mixins read these two primitives ONLY (via @include typography(role),
 	// which rebinds them per role on the consuming element's scope — mirror
@@ -267,19 +283,5 @@
 	// spacing — that is --gap.
 }
 
-// ---------------------------------------------------------------------------
-// Mobile rhythm — logical tokens tighten at ≤ md viewport.
-// Not the same as `[data-density]` (that's a user opt-in).
-// This is viewport-driven structural compression: content dominates chrome
-// at narrow widths. Components reading --padding-x/--padding-y/--gap
-// react via the cascade.
-//
-// Interaction with [data-density]: stacks. Compact density + mobile viewport =
-// both apply; the underlying --padding-y tightens further from the mobile rebind.
-// ---------------------------------------------------------------------------
-@include mq-down(md) {
-	:root {
-		--padding-y: var(--size-xs);     // 6px → 4px
-		--gap:       var(--size-xs-up);  // 6px → 6px (already tight)
-	}
-}
+// Mobile rhythm (viewport-driven tightening) lives at the end of
+// _density.scss so it stacks on top of every density tier.

package/theme/config/mixins/_app-shell.scss

@@ -125,13 +125,13 @@
 
 	// Equalize height across icon-only and text-only siblings AND
 	// search-icon labels. Geometric — locks the border-box chrome to
-	// the icon-content height (1.25rem) plus rebound --padding-y and
+	// the shared control line box (--control-line-height) plus rebound --padding-y and
 	// border-width on both edges. Buttons rebind --padding-y below;
 	// search labels read --padding-y from @mixin form-input-icon-group
 	// (same var(--size-xs) value), so the formula resolves identically
 	// for both. Border-box is the project default (scss/base/_reset.scss).
 	:is(button, label) {
-		min-height: calc(1.25rem + 2 * var(--padding-y) + 2 * var(--border-width));
+		min-height: calc(var(--control-line-height) + 2 * var(--padding-y) + 2 * var(--border-width));
 	}
 
 	button {
@@ -190,20 +190,12 @@
 	height: calc(100dvh - var(--app-header-height));
 	overflow: hidden;
 
-	// When the sidebar drawer is open on desktop, reserve its space
-	// on THIS element (the parent) so both content and footer shift
-	// together. Padding on the parent keeps child widths at 100% and
-	// avoids the horizontal overflow caused by margin-left on
-	// width:100% children.
-	&:has(.app-sidebar[data-ln-toggle="open"]) {
-		padding-left: var(--app-sidebar-width);
-	}
-
-	// On mobile the sidebar overlays (scrim covers content) —
-	// no content shift.
-	@include mq-down(md) {
-		&:has(.app-sidebar[data-ln-toggle="open"]) {
-			padding-left: 0;
+	// Open drawer on desktop: reserve its width on the parent so content
+	// and footer shift together (padding, not child margin — no overflow).
+	// On mobile the drawer overlays the content instead.
+	@include mq-up(md) {
+		&:has(> aside[data-ln-toggle="open"]) {
+			padding-left: var(--app-sidebar-width);
 		}
 	}
 
@@ -222,10 +214,13 @@
 		// `> *:first-child` / `> *:last-child` margins below — those
 		// margins scroll past with the content, leaving sticky to pin
 		// against the actual section edges.
-		padding-inline: var(--padding-x);
+		padding-inline: clamp(var(--size-md), 3vw, var(--size-xl));
 		@include overflow-auto;
 		@include w-full;
-		@include stack(var(--gap));
+		@include stack(var(--size-lg));
+		// The stack gap owns vertical rhythm here — section-cards drop
+		// their own bottom margin so the two do not add up.
+		--panel-margin-block: 0;
 		@include transition;
 
 		// Children keep intrinsic height — wrapper's overflow-auto
@@ -243,11 +238,11 @@
 		// descendants (sticky top:0 toolbar/thead, sticky bottom:0 footer)
 		// to the inside of the padding edge.
 		> *:first-child {
-			margin-block-start: var(--padding-x);
+			margin-block-start: clamp(var(--size-md), 3vw, var(--size-xl));
 		}
 
 		> *:last-child {
-			margin-block-end: var(--padding-x);
+			margin-block-end: clamp(var(--size-md), 3vw, var(--size-xl));
 		}
 	}
 }
@@ -309,6 +304,7 @@
 	max-width: var(--max-w-container);
 	@include mx(auto);
 	@include w-full;
-	@include stack(var(--gap));
+	@include stack(var(--size-lg));
+	--panel-margin-block: 0;
 }
 

package/theme/config/mixins/_avatar.scss

@@ -66,7 +66,7 @@
 	}
 
 	// Initials fallback — <abbr class="avatar">SO</abbr>
-	&:not(:has(img)):not(:has(span)) {
+	&:not(:has(img, span)) {
 		@include _avatar-media;
 		@include flex-center;
 		@include text-sm;
@@ -97,7 +97,7 @@
 // ─── Sizes ─────────────────────────────────────────────
 @mixin _avatar-size($size, $font-size, $line-height) {
 	img { @include size($size); }
-	&:not(:has(img)):not(:has(span)) {
+	&:not(:has(img, span)) {
 		@include size($size);
 		font-size: $font-size;
 		line-height: $line-height;

package/theme/config/mixins/_btn.scss

@@ -37,6 +37,8 @@
 	--padding-x: var(--btn-padding-x, var(--size-md));
 	padding: var(--padding-y) var(--padding-x);
 	@include text-sm;
+	// Shared control line box — aligns with inputs/selects (see _tokens.scss).
+	line-height: var(--control-line-height);
 	@include font-medium;
 	border-radius: var(--radius);
 	white-space: nowrap;
@@ -69,14 +71,14 @@
 @mixin btn {
 	// Accent variant — rebinds the --btn-* token surface to accent values.
 	--color-accent:       hsl(var(--color-primary));
-	--color-accent-hover: hsl(from var(--color-accent) h s calc(l - 6));
+	--color-accent-hover: hsl(from var(--color-accent) h s calc(l + var(--accent-hover-shift)));
 
 	--btn-bg:           var(--color-accent-bg,       var(--color-accent));
 	--btn-fg:           var(--color-accent-bg-fg,    var(--color-accent-fg));
 	--btn-border:       hsl(from var(--color-accent) h s calc(l - 4));
 	--btn-bg-hover:     var(--color-accent-bg-hover, var(--color-accent-hover));
 	--btn-fg-hover:     var(--color-accent-bg-fg,    var(--color-accent-fg));
-	--btn-border-hover: hsl(from var(--color-accent) h s calc(l - 6));
+	--btn-border-hover: hsl(from var(--color-accent) h s calc(l + var(--accent-hover-shift)));
 }
 
 @mixin btn-soft {