@livenetworks/ashlar 2.0.6 → 2.0.8

package/theme/config/_theme.scss

@@ -1,293 +1,293 @@
-@use 'palette' as *;
-
-// ==========================================================================
-// Theme — ln-ashlar
-// ==========================================================================
-// Three orthogonal activation axes:
-//   data-skin   — structure/physics (radius, shadow, button chrome, nav/menu
-//                 rebinds). Polarity-agnostic.
-//   data-mode   — polarity only (bg/fg base values + native color-scheme).
-//   data-theme  — brand palette only (color values).
-//
-// Activation paths:
-//   <html data-mode="dark">                 ← explicit dark polarity
-//   <element data-mode="dark">              ← scoped dark polarity island
-//   @media (prefers-color-scheme: dark)     ← system preference (auto)
-//   :root:not([data-mode="light"])          ← opt-out of auto
-//   <html data-skin="glass">                ← structural preset (flat, borderless)
-//   <html data-theme="ocean">               ← brand palette preset
-//
-// See docs-mcp/css/theming.md for the full guide.
-// ==========================================================================
-
-// ---------------------------------------------------------------------------
-// Activation — ashlar values at zero specificity, derivations at every scope
-// ---------------------------------------------------------------------------
-
-// Ashlar values — zero specificity, a client file always outranks them
-:where(:root),
-:where([data-mode="light"]) {
-	@include ln-values-light;
-	color-scheme: light;
-}
-
-:where([data-mode="dark"]) {
-	@include ln-values-dark;
-	color-scheme: dark;
-}
-
-@media (prefers-color-scheme: dark) {
-	:where(:root:not([data-mode="light"])) {
-		@include ln-values-dark;
-		color-scheme: dark;
-	}
-}
-
-// Derivations — library-owned, normal specificity, every colour-bearing scope.
-// data-skin is deliberately absent: it declares no colour values, so the chain
-// there could only reproduce the inherited result — while clobbering the
-// preset --btn-* / tint overrides of any ancestor theme.
-:root,
-[data-theme],
-[data-mode] {
-	@include ln-color-chain;
-}
-
-:where([data-mode]) {
-	color: var(--color-fg);
-}
-
-:where([data-mode]:not(html):not(body)) {
-	background-color: var(--color-bg);
-}
-
-// ---------------------------------------------------------------------------
-// Named presets — demo theme picker. Brand palette only. Activation:
-//   <html data-theme="ocean">   <html data-theme="sunset">   etc.
-// ---------------------------------------------------------------------------
-
-// Lightness is solved, not authored: each fill sits at the AAA (7:1) limit
-// for its hue against whichever foreground pole is nearer. Dark lifts cross
-// the white/ink boundary, so they pair themselves — see --color-ink.
-[data-theme="ocean"] {
-	--brand-primary: 190 80% 24%;   // 7.40 on white
-
-	&[data-mode="dark"],
-	:where([data-mode="dark"]) & {
-		--brand-primary: 190 80% 46%;   // 7.24 on ink
-		--color-accent-fg: hsl(var(--color-ink));
-		--check-mark: var(--check-mark-on-dark);
-	}
-}
-
-[data-theme="sunset"] {
-	--brand-primary: 10 80% 36%;   // 7.10 on white
-
-	&[data-mode="dark"],
-	:where([data-mode="dark"]) & {
-		--brand-primary: 10 80% 69%;   // 7.09 on ink
-		--color-accent-fg: hsl(var(--color-ink));
-		--check-mark: var(--check-mark-on-dark);
-	}
-}
-
-[data-theme="midnight"] {
-	// Pure palette — no polarity opinion, but both lightnesses are now solved,
-	// so the unpaired light case reads at AAA instead of being "accepted".
-	--brand-primary: 265 70% 50%;   // 7.05 on white
-
-	&[data-mode="dark"],
-	:where([data-mode="dark"]) & {
-		--brand-primary: 265 70% 75%;   // 7.15 on ink
-		--color-accent-fg: hsl(var(--color-ink));
-		--check-mark: var(--check-mark-on-dark);
-	}
-}
-
-[data-theme="glass"] {
-	// Electric blue accent — luminescent on dark navy glass
-	// No &[data-mode="dark"] lift block (unlike ocean/sunset/midnight): glass
-	// was authored dark-first, so it solves straight to the ink pole in both
-	// polarities — a lift here would blow out on dark.
-	--brand-primary: 218 95% 71%;   // 7.04 on ink
-	--check-mark: var(--check-mark-on-dark);
-	--color-accent-fg: hsl(var(--color-ink));
-
-	// Active-nav wash — Glass computes a stronger 24% tint mix against
-	// local --bg-base for contrast on the deep dark surface.
-	// Side-effect: dropdown active items + upload drop-zone also pick up the
-	// slightly darker tint — improvement, not regression.
-	--color-accent-tint: color-mix(in srgb, hsl(var(--color-primary)) 24%, var(--bg-base));
-}
-
-[data-theme="aurora"] {
-	--brand-primary: 158 80% 30%;
-
-	&[data-mode="dark"],
-	:where([data-mode="dark"]) & {
-		--brand-primary: 158 80% 55%;
-		--color-accent-fg: hsl(var(--color-ink));
-		--check-mark: var(--check-mark-on-dark);
-	}
-}
-
-[data-theme="violet"] {
-	--brand-primary: 255 75% 48%;
-
-	&[data-mode="dark"],
-	:where([data-mode="dark"]) & {
-		--brand-primary: 255 85% 72%;
-		--color-accent-fg: hsl(var(--color-ink));
-		--check-mark: var(--check-mark-on-dark);
-	}
-}
-
-[data-theme="cyber"] {
-	--brand-primary: 198 95% 38%;
-
-	&[data-mode="dark"],
-	:where([data-mode="dark"]) & {
-		--brand-primary: 198 95% 58%;
-		--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">
-// ---------------------------------------------------------------------------
-
-[data-skin="glass"] {
-	// Flat — zero radius everywhere
-	--radius-xs: 0;
-	--radius-sm: 0;
-	--radius-md: 0;
-	--radius-lg: 0;
-	--radius-xl: 0;
-	--radius-2xl: 0;
-	--radius-full: 0;
-
-	// Flat — no elevation shadows. --shadow-inner kept for recessed
-	// surfaces (code blocks, progress tracks) which read it as a depth
-	// affordance rather than elevation.
-	--shadow-xs: none;
-	--shadow-sm: none;
-	--shadow-md: none;
-	--shadow-lg: none;
-	--shadow-xl: none;
-	--shadow-2xl: none;
-
-	// ── Buttons — neutral chrome via --btn-* rebind, accent variant via
-	// cross-cutting --color-accent-bg-* companion tokens. Skin rebinds
-	// at :root only; library owns structure. (See docs/architecture/reference.md ## Theme Architecture for exact mechanics)
-	--btn-bg: var(--bg-elevated);
-	--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));
-
-	// ── Accent buttons — translucent fill via consumer-scope rebind
-	// Rebind --btn-* on the button itself (not at skin :root) so
-	// var(--color-primary) inside the values resolves on the button's
-	// cascade — letting .success / .error / .warning / .info status
-	// overrides reach the fill and text color. Token-only rebinds; no
-	// background/color/border-color declarations, no &:hover blocks
-	// (button-base already handles state via --btn-*-hover).
-	button[type="submit"],
-	.btn {
-		--btn-bg: hsl(var(--color-primary) / 0.2);
-		--btn-fg: hsl(var(--color-primary));
-		--btn-bg-hover: hsl(var(--color-primary) / 0.3);
-		--btn-fg-hover: hsl(var(--color-primary));
-	}
-
-	// ── Nav surface — palette-only rebind ──────────────────────────
-	// @mixin nav reads --nav-link-border-color* via fallback (defaults:
-	// transparent). Glass rebinds them so hover/active draw an accent
-	// ring. --nav-list-bleed shifts the ul to the sidebar's vertical
-	// borders so dividers reach edge-to-edge; @mixin nav reads it with
-	// `0` fallback so default theme is unaffected.
-	--nav-link-border-color-hover: var(--color-accent);
-	--nav-link-border-color-active: var(--color-accent);
-	// Resolves against the ROOT --padding-x, not a sidebar-local one — valid
-	// today because nothing between :root and the nav rebinds it, but latent.
-	--nav-list-bleed: calc(-1 * var(--padding-x));
-
-	// ── Dropdown / menu-items dividers ─────────────────────────────
-	// @mixin menu-items reads SOFT --border-block-start on `li + li`
-	// and `hr` with `none` fallback. Glass rebinds the slot in scope
-	// so the divider appears for both. Scoped (not skin :root)
-	// because --border-block-start is read by ~10 other mixins
-	// (cards, tables, accordions) where the divider should NOT appear.
-	[data-ln-dropdown-menu],
-	.menu-items {
-		--border-block-start: var(--border-width) solid var(--color-border);
-	}
-}
-
-[data-skin="outline"] {
-	// Outline — no elevation shadows, structural borders only.
-	--shadow-xs: none;
-	--shadow-sm: none;
-	--shadow-md: none;
-	--shadow-lg: none;
-	--shadow-xl: none;
-	--shadow-2xl: none;
-	
-	// Retain the inner shadow for recessed tracks.
-	--shadow-resting: none;
-	--shadow-floating: none;
-
-	// Make the borders stand out more since there are no shadows
-	// Resolves once at <html> against whichever polarity is active there —
-	// a nested [data-mode] island under this skin inherits root neutral-300.
-	--border-subtle: hsl(var(--color-neutral-300));
-
-	// ── Buttons — neutral chrome
-	--btn-bg: transparent;
-	--btn-bg-hover: var(--bg-hover);
-	// Give buttons a visible border instead of filling them
-	--btn-border: var(--border-strong);
-
-	// ── Accent buttons — transparent fill, colored border
-	button[type="submit"],
-	.btn {
-		--btn-bg: transparent;
-		--btn-fg: hsl(var(--color-primary));
-		--btn-border: hsl(var(--color-primary));
-		--btn-bg-hover: hsl(var(--color-primary) / 0.1);
-		--btn-fg-hover: hsl(var(--color-primary));
-		--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);
+@use 'palette' as *;
+
+// ==========================================================================
+// Theme — ln-ashlar
+// ==========================================================================
+// Three orthogonal activation axes:
+//   data-skin   — structure/physics (radius, shadow, button chrome, nav/menu
+//                 rebinds). Polarity-agnostic.
+//   data-mode   — polarity only (bg/fg base values + native color-scheme).
+//   data-theme  — brand palette only (color values).
+//
+// Activation paths:
+//   <html data-mode="dark">                 ← explicit dark polarity
+//   <element data-mode="dark">              ← scoped dark polarity island
+//   @media (prefers-color-scheme: dark)     ← system preference (auto)
+//   :root:not([data-mode="light"])          ← opt-out of auto
+//   <html data-skin="glass">                ← structural preset (flat, borderless)
+//   <html data-theme="ocean">               ← brand palette preset
+//
+// See docs-mcp/css/theming.md for the full guide.
+// ==========================================================================
+
+// ---------------------------------------------------------------------------
+// Activation — ashlar values at zero specificity, derivations at every scope
+// ---------------------------------------------------------------------------
+
+// Ashlar values — zero specificity, a client file always outranks them
+:where(:root),
+:where([data-mode="light"]) {
+	@include ln-values-light;
+	color-scheme: light;
+}
+
+:where([data-mode="dark"]) {
+	@include ln-values-dark;
+	color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+	:where(:root:not([data-mode="light"])) {
+		@include ln-values-dark;
+		color-scheme: dark;
+	}
+}
+
+// Derivations — library-owned, normal specificity, every colour-bearing scope.
+// data-skin is deliberately absent: it declares no colour values, so the chain
+// there could only reproduce the inherited result — while clobbering the
+// preset --btn-* / tint overrides of any ancestor theme.
+:root,
+[data-theme],
+[data-mode] {
+	@include ln-color-chain;
+}
+
+:where([data-mode]) {
+	color: var(--color-fg);
+}
+
+:where([data-mode]:not(html):not(body)) {
+	background-color: var(--color-bg);
+}
+
+// ---------------------------------------------------------------------------
+// Named presets — demo theme picker. Brand palette only. Activation:
+//   <html data-theme="ocean">   <html data-theme="sunset">   etc.
+// ---------------------------------------------------------------------------
+
+// Lightness is solved, not authored: each fill sits at the AAA (7:1) limit
+// for its hue against whichever foreground pole is nearer. Dark lifts cross
+// the white/ink boundary, so they pair themselves — see --color-ink.
+[data-theme="ocean"] {
+	--brand-primary: 190 80% 24%;   // 7.40 on white
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 190 80% 46%;   // 7.24 on ink
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
+[data-theme="sunset"] {
+	--brand-primary: 10 80% 36%;   // 7.10 on white
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 10 80% 69%;   // 7.09 on ink
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
+[data-theme="midnight"] {
+	// Pure palette — no polarity opinion, but both lightnesses are now solved,
+	// so the unpaired light case reads at AAA instead of being "accepted".
+	--brand-primary: 265 70% 50%;   // 7.05 on white
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 265 70% 75%;   // 7.15 on ink
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
+[data-theme="glass"] {
+	// Electric blue accent — luminescent on dark navy glass
+	// No &[data-mode="dark"] lift block (unlike ocean/sunset/midnight): glass
+	// was authored dark-first, so it solves straight to the ink pole in both
+	// polarities — a lift here would blow out on dark.
+	--brand-primary: 218 95% 71%;   // 7.04 on ink
+	--check-mark: var(--check-mark-on-dark);
+	--color-accent-fg: hsl(var(--color-ink));
+
+	// Active-nav wash — Glass computes a stronger 24% tint mix against
+	// local --bg-base for contrast on the deep dark surface.
+	// Side-effect: dropdown active items + upload drop-zone also pick up the
+	// slightly darker tint — improvement, not regression.
+	--color-accent-tint: color-mix(in srgb, hsl(var(--color-primary)) 24%, var(--bg-base));
+}
+
+[data-theme="aurora"] {
+	--brand-primary: 158 80% 30%;
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 158 80% 55%;
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
+[data-theme="violet"] {
+	--brand-primary: 255 75% 48%;
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 255 85% 72%;
+		--color-accent-fg: hsl(var(--color-ink));
+		--check-mark: var(--check-mark-on-dark);
+	}
+}
+
+[data-theme="cyber"] {
+	--brand-primary: 198 95% 38%;
+
+	&[data-mode="dark"],
+	:where([data-mode="dark"]) & {
+		--brand-primary: 198 95% 58%;
+		--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">
+// ---------------------------------------------------------------------------
+
+[data-skin="glass"] {
+	// Flat — zero radius everywhere
+	--radius-xs: 0;
+	--radius-sm: 0;
+	--radius-md: 0;
+	--radius-lg: 0;
+	--radius-xl: 0;
+	--radius-2xl: 0;
+	--radius-full: 0;
+
+	// Flat — no elevation shadows. --shadow-inner kept for recessed
+	// surfaces (code blocks, progress tracks) which read it as a depth
+	// affordance rather than elevation.
+	--shadow-xs: none;
+	--shadow-sm: none;
+	--shadow-md: none;
+	--shadow-lg: none;
+	--shadow-xl: none;
+	--shadow-2xl: none;
+
+	// ── Buttons — neutral chrome via --btn-* rebind, accent variant via
+	// cross-cutting --color-accent-bg-* companion tokens. Skin rebinds
+	// at :root only; library owns structure. (See docs/architecture/reference.md ## Theme Architecture for exact mechanics)
+	--btn-bg: var(--bg-elevated);
+	--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));
+
+	// ── Accent buttons — translucent fill via consumer-scope rebind
+	// Rebind --btn-* on the button itself (not at skin :root) so
+	// var(--color-primary) inside the values resolves on the button's
+	// cascade — letting .success / .error / .warning / .info status
+	// overrides reach the fill and text color. Token-only rebinds; no
+	// background/color/border-color declarations, no &:hover blocks
+	// (button-base already handles state via --btn-*-hover).
+	button[type="submit"],
+	.btn {
+		--btn-bg: hsl(var(--color-primary) / 0.2);
+		--btn-fg: hsl(var(--color-primary));
+		--btn-bg-hover: hsl(var(--color-primary) / 0.3);
+		--btn-fg-hover: hsl(var(--color-primary));
+	}
+
+	// ── Nav surface — palette-only rebind ──────────────────────────
+	// @mixin nav reads --nav-link-border-color* via fallback (defaults:
+	// transparent). Glass rebinds them so hover/active draw an accent
+	// ring. --nav-list-bleed shifts the ul to the sidebar's vertical
+	// borders so dividers reach edge-to-edge; @mixin nav reads it with
+	// `0` fallback so default theme is unaffected.
+	--nav-link-border-color-hover: var(--color-accent);
+	--nav-link-border-color-active: var(--color-accent);
+	// Resolves against the ROOT --padding-x, not a sidebar-local one — valid
+	// today because nothing between :root and the nav rebinds it, but latent.
+	--nav-list-bleed: calc(-1 * var(--padding-x));
+
+	// ── Dropdown / menu-items dividers ─────────────────────────────
+	// @mixin menu-items reads SOFT --border-block-start on `li + li`
+	// and `hr` with `none` fallback. Glass rebinds the slot in scope
+	// so the divider appears for both. Scoped (not skin :root)
+	// because --border-block-start is read by ~10 other mixins
+	// (cards, tables, accordions) where the divider should NOT appear.
+	[data-ln-dropdown-menu],
+	.menu-items {
+		--border-block-start: var(--border-width) solid var(--color-border);
+	}
+}
+
+[data-skin="outline"] {
+	// Outline — no elevation shadows, structural borders only.
+	--shadow-xs: none;
+	--shadow-sm: none;
+	--shadow-md: none;
+	--shadow-lg: none;
+	--shadow-xl: none;
+	--shadow-2xl: none;
+	
+	// Retain the inner shadow for recessed tracks.
+	--shadow-resting: none;
+	--shadow-floating: none;
+
+	// Make the borders stand out more since there are no shadows
+	// Resolves once at <html> against whichever polarity is active there —
+	// a nested [data-mode] island under this skin inherits root neutral-300.
+	--border-subtle: hsl(var(--color-neutral-300));
+
+	// ── Buttons — neutral chrome
+	--btn-bg: transparent;
+	--btn-bg-hover: var(--bg-hover);
+	// Give buttons a visible border instead of filling them
+	--btn-border: var(--border-strong);
+
+	// ── Accent buttons — transparent fill, colored border
+	button[type="submit"],
+	.btn {
+		--btn-bg: transparent;
+		--btn-fg: hsl(var(--color-primary));
+		--btn-border: hsl(var(--color-primary));
+		--btn-bg-hover: hsl(var(--color-primary) / 0.1);
+		--btn-fg-hover: hsl(var(--color-primary));
+		--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);
 }