@urbicon-ui/blocks 6.1.4

package/dist/style/semantic.css

@@ -0,0 +1,271 @@
+/**
+ * Semantic intent tokens — single source of truth for both light and
+ * dark modes via the CSS-native `light-dark()` function.
+ *
+ * Mode resolution: `:root` declares `color-scheme: light dark` so the
+ * UA picks the matching branch from `light-dark()` automatically. The
+ * manual toggle classes `:root.light` / `:root.dark` only override the
+ * `color-scheme` (no token duplication needed) — `light-dark()` re-
+ * resolves on its own.
+ *
+ * Browser support: Chrome 123+, Firefox 120+, Safari 17.5+ — Baseline
+ * Newly Available since 2024-05.
+ */
+
+@theme {
+  /* === SURFACE ===
+     Four-level elevation ladder (L·0 → L·3). Each step sits visually
+     above the one below — themes can differentiate them by color (e.g.
+     cream → lighter cream → near-white → white) or rely on shadows
+     alone when the palette ceiling is reached (as in the neutral default
+     where base and overlay are both white). */
+  /* L·1 — base: the page itself. Content, cards, and reading surfaces
+     sit at this level. */
+  --color-surface-base: light-dark(var(--color-neutral-0), var(--color-neutral-900));
+  /* L·0 — quiet: the ground/table beneath the page. Softest in-page
+     tint; tint alone signals "own zone" without border or shadow. */
+  --color-surface-quiet: light-dark(var(--color-neutral-25), var(--color-neutral-850));
+  /* L·2 — elevated: lifted surfaces (Popover, Menu, Select dropdown).
+     Sits above the page with shadow + meaningful Z-index. */
+  --color-surface-elevated: light-dark(var(--color-neutral-50), var(--color-neutral-800));
+  /* L·3 — overlay: highest surfaces (Dialog, Drawer, Sheet, Toast).
+     Full shadow + backdrop dimming. */
+  --color-surface-overlay: light-dark(var(--color-neutral-0), var(--color-neutral-850));
+  --color-surface-interactive: light-dark(var(--color-neutral-100), var(--color-neutral-700));
+  --color-surface-hover: light-dark(var(--color-neutral-100), var(--color-neutral-750));
+  --color-surface-active: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  --color-surface-disabled: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  --color-surface-selected: light-dark(var(--color-primary-50), var(--color-primary-900));
+  --color-surface-subtle: light-dark(var(--color-neutral-50), var(--color-neutral-800));
+  --color-surface-inverted: light-dark(var(--color-neutral-900), var(--color-neutral-100));
+
+  /* === TEXT ===
+     tertiary/quaternary shifted darker (light) so informative text on
+     surface-base passes WCAG AA 4.5:1. Previous values (neutral-500/400)
+     gave ~3.7/~2.1 respectively. */
+  --color-text-primary: light-dark(var(--color-neutral-900), var(--color-neutral-100));
+  --color-text-inverted: light-dark(var(--color-neutral-0), var(--color-neutral-900));
+  --color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  --color-text-tertiary: light-dark(var(--color-neutral-600), var(--color-neutral-300));
+  --color-text-quaternary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+  --color-text-disabled: light-dark(var(--color-neutral-300), var(--color-neutral-600));
+  --color-text-on-dark: light-dark(var(--color-neutral-0), var(--color-neutral-900));
+  --color-text-on-primary: var(--color-neutral-0);
+  --color-text-on-surface: light-dark(var(--color-neutral-900), var(--color-neutral-100));
+
+  /* === PRIMARY INTENT ===
+     emphasis flips to light shades in dark mode so `text-*-emphasis`
+     stays legible against dark surfaces. */
+  --color-primary: light-dark(var(--color-primary-600), var(--color-primary-500));
+  --color-primary-hover: light-dark(var(--color-primary-700), var(--color-primary-400));
+  --color-primary-active: light-dark(var(--color-primary-800), var(--color-primary-300));
+  --color-primary-subtle: light-dark(var(--color-primary-50), var(--color-primary-900));
+  --color-primary-emphasis: light-dark(var(--color-primary-900), var(--color-primary-200));
+
+  /* === SECONDARY INTENT === */
+  --color-secondary: light-dark(var(--color-secondary-500), var(--color-secondary-400));
+  --color-secondary-hover: light-dark(var(--color-secondary-600), var(--color-secondary-300));
+  --color-secondary-active: light-dark(var(--color-secondary-700), var(--color-secondary-200));
+  --color-secondary-subtle: light-dark(var(--color-secondary-50), var(--color-secondary-900));
+  --color-secondary-emphasis: light-dark(var(--color-secondary-800), var(--color-secondary-200));
+
+  /* === NEUTRAL INTENT ===
+     Themeable chrome. Takes the warm-neutral ramp's lightness + chroma
+     PROFILE — purpose-tuned so that both white-on-fill (bg-neutral) and
+     neutral-on-surface (text-neutral) contrast hold across light/dark — and
+     re-tints only the HUE per theme via `--neutral-chrome-hue`. Because the
+     lightness never moves, every WCAG tradeoff baked into the warm-neutral
+     ramp is preserved exactly; only the temperature follows the theme.
+
+     `--neutral-chrome-hue` defaults to 240 (:root, below), so the library
+     default reads as a cool grey matching its cool chassis. Each theme
+     overrides it to its accent temperature; editorial.css re-pins the neutral
+     intent to the warm ramp directly. Uses the same relative-color syntax
+     already relied on by `--color-interactive-*` below. */
+  --color-neutral: light-dark(
+    oklch(from var(--color-warm-neutral-500) l c var(--neutral-chrome-hue)),
+    oklch(from var(--color-warm-neutral-400) l c var(--neutral-chrome-hue))
+  );
+  --color-neutral-hover: light-dark(
+    oklch(from var(--color-warm-neutral-600) l c var(--neutral-chrome-hue)),
+    oklch(from var(--color-warm-neutral-300) l c var(--neutral-chrome-hue))
+  );
+  --color-neutral-active: light-dark(
+    oklch(from var(--color-warm-neutral-700) l c var(--neutral-chrome-hue)),
+    oklch(from var(--color-warm-neutral-200) l c var(--neutral-chrome-hue))
+  );
+  --color-neutral-subtle: light-dark(
+    oklch(from var(--color-warm-neutral-50) l c var(--neutral-chrome-hue)),
+    oklch(from var(--color-warm-neutral-900) l c var(--neutral-chrome-hue))
+  );
+  --color-neutral-emphasis: light-dark(
+    oklch(from var(--color-warm-neutral-800) l c var(--neutral-chrome-hue)),
+    oklch(from var(--color-warm-neutral-200) l c var(--neutral-chrome-hue))
+  );
+
+  /* === SUCCESS INTENT === */
+  --color-success: light-dark(var(--color-success-500), var(--color-success-400));
+  --color-success-hover: light-dark(var(--color-success-600), var(--color-success-300));
+  --color-success-active: light-dark(var(--color-success-700), var(--color-success-200));
+  --color-success-subtle: light-dark(var(--color-success-50), var(--color-success-900));
+  --color-success-emphasis: light-dark(var(--color-success-800), var(--color-success-200));
+
+  /* === WARNING INTENT === */
+  --color-warning: light-dark(var(--color-warning-500), var(--color-warning-400));
+  --color-warning-hover: light-dark(var(--color-warning-600), var(--color-warning-300));
+  --color-warning-active: light-dark(var(--color-warning-700), var(--color-warning-200));
+  --color-warning-subtle: light-dark(var(--color-warning-50), var(--color-warning-900));
+  --color-warning-emphasis: light-dark(var(--color-warning-800), var(--color-warning-200));
+
+  /* === DANGER INTENT === */
+  --color-danger: light-dark(var(--color-danger-500), var(--color-danger-400));
+  --color-danger-hover: light-dark(var(--color-danger-600), var(--color-danger-300));
+  --color-danger-active: light-dark(var(--color-danger-700), var(--color-danger-200));
+  --color-danger-subtle: light-dark(var(--color-danger-50), var(--color-danger-900));
+  --color-danger-emphasis: light-dark(var(--color-danger-800), var(--color-danger-200));
+
+  /* === INFO INTENT === */
+  --color-info: light-dark(var(--color-info-500), var(--color-info-400));
+  --color-info-hover: light-dark(var(--color-info-600), var(--color-info-300));
+  --color-info-active: light-dark(var(--color-info-700), var(--color-info-200));
+  --color-info-subtle: light-dark(var(--color-info-50), var(--color-info-900));
+  --color-info-emphasis: light-dark(var(--color-info-800), var(--color-info-200));
+
+  /* === CHART CATEGORICAL PALETTE ===
+     An *ordered* series palette for data visualization (the charts/ family),
+     distinct from the single-role intent tokens above: chart series 0 maps to
+     --color-chart-1, series 1 to --color-chart-2, and so on, cycling for more
+     series than colors. Built on the foundation hue ramps so light-dark()
+     resolves dark mode automatically; ordered for maximal adjacent-hue
+     separation (blue → green → amber → violet → cyan → red). Living in the
+     --color-* namespace means Tailwind also generates fill-chart-1 /
+     stroke-chart-1 / bg-chart-1 utilities for legends and static marks. */
+  --color-chart-1: light-dark(var(--color-primary-600), var(--color-primary-400));
+  --color-chart-2: light-dark(var(--color-success-600), var(--color-success-400));
+  --color-chart-3: light-dark(var(--color-warning-500), var(--color-warning-400));
+  --color-chart-4: light-dark(var(--color-secondary-500), var(--color-secondary-400));
+  --color-chart-5: light-dark(var(--color-info-500), var(--color-info-400));
+  --color-chart-6: light-dark(var(--color-danger-500), var(--color-danger-400));
+
+  /* === BORDERS ===
+     border-hairline (Lighter-Refactor) is the quietest tier — structural
+     trennlinien (row dividers, Card header/footer separators, inline
+     section dividers). Sits below border-subtle, which is now reserved
+     for quiet container outlines (e. g. Popover). */
+  --color-border-hairline: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.06));
+  --color-border-subtle: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  --color-border-default: light-dark(var(--color-neutral-300), var(--color-neutral-600));
+  --color-border-emphasis: light-dark(var(--color-neutral-400), var(--color-neutral-500));
+  --color-border-strong: light-dark(var(--color-neutral-500), var(--color-neutral-400));
+
+  /* === INTERACTIVE STATES === */
+  --color-interactive-hover: oklch(from var(--color-primary-500) l c h / 0.1);
+  --color-interactive-active: oklch(from var(--color-primary-500) l c h / 0.2);
+  --color-interactive-focus: light-dark(var(--color-primary-500), var(--color-primary-400));
+  --color-interactive-disabled: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+
+  /* === FEEDBACK ===
+     Mapped onto the intent palette so they automatically follow the
+     light/dark resolution above. */
+  --color-feedback-info: var(--color-info);
+  --color-feedback-info-subtle: var(--color-info-subtle);
+  --color-feedback-success: var(--color-success);
+  --color-feedback-success-subtle: var(--color-success-subtle);
+  --color-feedback-warning: var(--color-warning);
+  --color-feedback-warning-subtle: var(--color-warning-subtle);
+  --color-feedback-error: var(--color-danger);
+  --color-feedback-error-subtle: var(--color-danger-subtle);
+
+  /* === SHADOWS ===
+     Dark mode uses higher alpha to compensate for low contrast against
+     dark surfaces. light-dark() handles the whole multi-layer shadow.
+
+     The shadow tint (`--blocks-shadow-tint`) is an oklch L C H triplet
+     WITHOUT the alpha channel — declared on `:root` (not inside @theme)
+     because it is a raw partial value, not a standalone design token.
+     Default is pure black (0 0 0). Themes can override the tint to warm
+     their shadow palette — e.g. editorial sets it to a dark brown so
+     shadows blend with cream surfaces instead of reading as cool
+     smudges. */
+  --color-shadow-xs: light-dark(
+    0 1px 2px 0 oklch(var(--blocks-shadow-tint) / 0.05),
+    0 1px 2px 0 oklch(var(--blocks-shadow-tint) / 0.2)
+  );
+  --color-shadow-sm: light-dark(
+    0 1px 3px 0 oklch(var(--blocks-shadow-tint) / 0.1) 0 1px 2px -1px
+      oklch(var(--blocks-shadow-tint) / 0.1),
+    0 1px 3px 0 oklch(var(--blocks-shadow-tint) / 0.3) 0 1px 2px -1px
+      oklch(var(--blocks-shadow-tint) / 0.3)
+  );
+  --color-shadow-base: light-dark(
+    0 4px 6px -1px oklch(var(--blocks-shadow-tint) / 0.1) 0 2px 4px -2px
+      oklch(var(--blocks-shadow-tint) / 0.1),
+    0 4px 6px -1px oklch(var(--blocks-shadow-tint) / 0.4) 0 2px 4px -2px
+      oklch(var(--blocks-shadow-tint) / 0.4)
+  );
+  --color-shadow-md: light-dark(
+    0 10px 15px -3px oklch(var(--blocks-shadow-tint) / 0.1) 0 4px 6px -4px
+      oklch(var(--blocks-shadow-tint) / 0.1),
+    0 10px 15px -3px oklch(var(--blocks-shadow-tint) / 0.4) 0 4px 6px -4px
+      oklch(var(--blocks-shadow-tint) / 0.4)
+  );
+  --color-shadow-lg: light-dark(
+    0 20px 25px -5px oklch(var(--blocks-shadow-tint) / 0.1) 0 8px 10px -6px
+      oklch(var(--blocks-shadow-tint) / 0.1),
+    0 20px 25px -5px oklch(var(--blocks-shadow-tint) / 0.5) 0 8px 10px -6px
+      oklch(var(--blocks-shadow-tint) / 0.5)
+  );
+}
+
+/* Shadow tint — declared on :root rather than inside @theme because
+   it is a raw oklch L C H partial, not a standalone design token.
+   Themes override this to warm their shadow palette. */
+:root {
+  --blocks-shadow-tint: 0 0 0;
+
+  /* Hue of the neutral intent chrome (bg-neutral / text-neutral / borders).
+     The neutral intent (above) keeps the warm-neutral ramp's lightness but
+     takes its hue from here. Default 240 = cool grey, matching the default
+     cool chassis. Each theme overrides this to its accent temperature;
+     editorial.css re-pins the neutral intent to the warm ramp instead. */
+  --neutral-chrome-hue: 240;
+}
+
+/* Body styling — `color-scheme` activates the UA's auto pick between
+   light and dark; the toggle classes only override the scheme. */
+body {
+  color: var(--color-text-primary);
+  background-color: var(--color-surface-base);
+}
+
+:root {
+  color-scheme: light dark;
+}
+
+:root.light {
+  color-scheme: light;
+}
+
+:root.dark {
+  color-scheme: dark;
+}
+
+/* High-contrast media adjustments — runs *in addition* to the
+   light-dark() resolution above. light-dark() within the overrides
+   keeps the high-contrast values mode-aware. */
+@media (prefers-contrast: more) {
+  :root {
+    --color-text-primary: light-dark(var(--color-neutral-900), var(--color-neutral-0));
+    --color-text-secondary: light-dark(var(--color-neutral-800), var(--color-neutral-200));
+    /* hairline becomes a real border in high-contrast — otherwise structural
+       trennlinien (table rows, Card dividers) disappear entirely. */
+    --color-border-hairline: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+    --color-border-default: light-dark(var(--color-neutral-900), var(--color-neutral-900));
+    --color-interactive-focus: light-dark(var(--color-neutral-900), var(--color-neutral-900));
+    --color-secondary: light-dark(var(--color-secondary-700), var(--color-secondary-700));
+    --color-neutral: light-dark(
+      oklch(from var(--color-warm-neutral-700) l c var(--neutral-chrome-hue)),
+      oklch(from var(--color-warm-neutral-700) l c var(--neutral-chrome-hue))
+    );
+  }
+}

package/dist/style/themes/forest.css

@@ -0,0 +1,105 @@
+/*
+ * @urbicon-ui/blocks – Forest Theme
+ *
+ * Earthy green palette inspired by natural environments.
+ * Import AFTER the base styles:
+ *
+ *   @import '@urbicon-ui/blocks/style/index.css';
+ *   @import '@urbicon-ui/blocks/style/themes/forest.css';
+ */
+
+@theme {
+  --color-primary-50: oklch(0.95 0.03 155);
+  --color-primary-100: oklch(0.9 0.05 155);
+  --color-primary-200: oklch(0.82 0.08 155);
+  --color-primary-300: oklch(0.74 0.1 155);
+  --color-primary-400: oklch(0.66 0.12 155);
+  --color-primary-500: oklch(0.58 0.13 155);
+  --color-primary-600: oklch(0.5 0.13 155);
+  --color-primary-700: oklch(0.42 0.11 155);
+  --color-primary-800: oklch(0.34 0.09 155);
+  --color-primary-900: oklch(0.26 0.06 155);
+  --color-primary-950: oklch(0.17 0.04 155);
+
+  --color-secondary-50: oklch(0.95 0.02 90);
+  --color-secondary-100: oklch(0.9 0.04 90);
+  --color-secondary-200: oklch(0.82 0.06 90);
+  --color-secondary-300: oklch(0.74 0.08 90);
+  --color-secondary-400: oklch(0.66 0.1 90);
+  --color-secondary-500: oklch(0.55 0.08 90);
+  --color-secondary-600: oklch(0.48 0.08 90);
+  --color-secondary-700: oklch(0.4 0.07 90);
+  --color-secondary-800: oklch(0.32 0.05 90);
+  --color-secondary-900: oklch(0.25 0.04 90);
+  --color-secondary-950: oklch(0.18 0.03 90);
+
+  /*
+   * Chassis neutral ramp — re-tinted toward a green-grey stone (Hue 150) so
+   * surfaces, text and borders read as natural/earthy rather than cool blue
+   * (the library default neutral sits at Hue 240). Lightness and chroma
+   * match the foundation ramp one-to-one — only the hue shifts — so WCAG
+   * contrast stays unchanged. surface-*, text-* and border-* pick this up
+   * automatically through semantic.css.
+   */
+  --color-neutral-25: oklch(0.99 0.002 150);
+  --color-neutral-50: oklch(0.98 0.005 150);
+  --color-neutral-100: oklch(0.95 0.008 150);
+  --color-neutral-200: oklch(0.89 0.012 150);
+  --color-neutral-300: oklch(0.83 0.014 150);
+  --color-neutral-400: oklch(0.7 0.015 150);
+  --color-neutral-500: oklch(0.55 0.016 150);
+  --color-neutral-600: oklch(0.42 0.017 150);
+  --color-neutral-650: oklch(0.38 0.016 150);
+  --color-neutral-700: oklch(0.32 0.016 150);
+  --color-neutral-750: oklch(0.28 0.014 150);
+  --color-neutral-800: oklch(0.23 0.015 150);
+  --color-neutral-850: oklch(0.18 0.014 150);
+  --color-neutral-900: oklch(0.15 0.012 150);
+  --color-neutral-950: oklch(0.08 0.008 150);
+
+  /*
+   * Intent re-tuning — the green primary (Hue 155) collides with the default
+   * success (Hue 140), and the lime secondary (Hue 90) collides with the
+   * default warning (Hue 80). Success is pushed to a teal-green (Hue 172) so a
+   * "saved" state reads as verification rather than brand; warning is pulled
+   * to amber (Hue 60) so it leaves the lime register. Same L/C profile as the
+   * foundation ramps; only the hue shifts. Danger (25) and info (220) keep the
+   * library defaults. Derived --color-success / --color-warning re-resolve at
+   * :root automatically (global @theme).
+   */
+  --color-success-50: oklch(0.95 0.03 172);
+  --color-success-100: oklch(0.9 0.05 172);
+  --color-success-200: oklch(0.82 0.08 172);
+  --color-success-300: oklch(0.74 0.11 172);
+  --color-success-400: oklch(0.62 0.14 172);
+  --color-success-500: oklch(0.5 0.15 172);
+  --color-success-600: oklch(0.44 0.14 172);
+  --color-success-700: oklch(0.38 0.12 172);
+  --color-success-800: oklch(0.3 0.1 172);
+  --color-success-900: oklch(0.22 0.08 172);
+  --color-success-950: oklch(0.14 0.05 172);
+
+  --color-warning-50: oklch(0.95 0.05 60);
+  --color-warning-100: oklch(0.9 0.08 60);
+  --color-warning-200: oklch(0.82 0.1 60);
+  --color-warning-300: oklch(0.74 0.12 60);
+  --color-warning-400: oklch(0.66 0.14 60);
+  --color-warning-500: oklch(0.75 0.15 60);
+  --color-warning-600: oklch(0.65 0.15 60);
+  --color-warning-700: oklch(0.55 0.13 60);
+  --color-warning-800: oklch(0.45 0.11 60);
+  --color-warning-900: oklch(0.25 0.08 60);
+  --color-warning-950: oklch(0.15 0.05 60);
+}
+
+/*
+ * Earthy shadow tint — a faint deep green-grey so shadows sit naturally on the
+ * stone chassis. :root (not @theme) to mirror semantic.css; imported after the
+ * base styles, so it wins.
+ */
+:root {
+  --blocks-shadow-tint: 0.2 0.025 150;
+  /* Neutral intent (bg-neutral / text-neutral / borders) follows the stone
+     chassis instead of the library-default cool grey. */
+  --neutral-chrome-hue: 150;
+}

package/dist/style/themes/index.css

@@ -0,0 +1,50 @@
+/*
+ * @urbicon-ui/blocks – Theme Index
+ *
+ * This file does NOT import any theme. It exists for documentation purposes.
+ * Import individual themes AFTER the base styles in your app's CSS:
+ *
+ *   @import '@urbicon-ui/blocks/style/index.css';
+ *   @import '@urbicon-ui/blocks/style/themes/ocean.css';
+ *
+ * Available themes:
+ *
+ *   ocean.css    – Cool blue-teal palette (hue 220)
+ *   forest.css   – Earthy green palette (hue 155)
+ *   sunset.css   – Warm orange-amber palette (hue 55)
+ *   rose.css     – Soft pink-rose palette (hue 350)
+ *   neutral.css  – Desaturated grayscale for content-focused UIs
+ *
+ * Each theme overrides three foundation ramps via Tailwind 4 @theme blocks:
+ *
+ *   --color-primary-*    the brand accent
+ *   --color-secondary-*  the supporting accent
+ *   --color-neutral-*    the chassis — re-tinted to the accent's temperature
+ *                        (e.g. Sunset shifts it warm, Ocean cool) so that
+ *                        surfaces, text and borders harmonise instead of
+ *                        reading as a fixed cool grey. Only the hue shifts;
+ *                        lightness and chroma match the foundation ramp, so
+ *                        WCAG contrast is preserved.
+ *
+ * Because surface-*, text-* and border-* all derive from --color-neutral-*
+ * in semantic.css, re-tinting that one ramp flows through the whole chassis
+ * automatically — no per-token surface overrides needed.
+ *
+ * Each colored theme additionally re-tunes only the intent ramps that would
+ * collide with its accent (e.g. Forest pushes success/warning away from its
+ * green/lime, Ocean moves info off the brand blue), sets a matching shadow
+ * tint, and re-tints the NEUTRAL intent (bg-neutral / text-neutral / borders)
+ * to its temperature via `--neutral-chrome-hue` — all on :root. The neutral
+ * intent keeps the warm-neutral ramp's lightness profile (so its WCAG
+ * tradeoffs are preserved); only the hue follows the theme. Other
+ * non-colliding intents (success/warning/danger/info) stay at the library
+ * defaults. The Neutral theme inherits the library-default cool grey chrome
+ * and leaves success/warning/danger/info + shadow tint untouched, by design.
+ *
+ * You can also create your own theme by defining a @theme block that
+ * overrides these ramps. Use the Theme Builder at /customization/theme-builder
+ * in the docs app to generate matched OKLCH palettes (accent + chassis)
+ * interactively. To art-direct further (re-tuned intents, custom surface
+ * stops, warm shadow tint), see apps/docs/src/lib/style/editorial.css for a
+ * fully worked example.
+ */

package/dist/style/themes/neutral.css

@@ -0,0 +1,63 @@
+/*
+ * @urbicon-ui/blocks – Neutral Theme
+ *
+ * Desaturated grayscale palette for content-focused interfaces.
+ * Removes color from primary/secondary intents, letting content
+ * and status colors (success/warning/danger) stand out.
+ *
+ * Import AFTER the base styles:
+ *
+ *   @import '@urbicon-ui/blocks/style/index.css';
+ *   @import '@urbicon-ui/blocks/style/themes/neutral.css';
+ */
+
+@theme {
+  --color-primary-50: oklch(0.96 0.003 240);
+  --color-primary-100: oklch(0.92 0.005 240);
+  --color-primary-200: oklch(0.84 0.008 240);
+  --color-primary-300: oklch(0.76 0.01 240);
+  --color-primary-400: oklch(0.65 0.012 240);
+  --color-primary-500: oklch(0.53 0.012 240);
+  --color-primary-600: oklch(0.43 0.012 240);
+  --color-primary-700: oklch(0.36 0.01 240);
+  --color-primary-800: oklch(0.29 0.008 240);
+  --color-primary-900: oklch(0.22 0.005 240);
+  --color-primary-950: oklch(0.15 0.003 240);
+
+  --color-secondary-50: oklch(0.96 0.003 240);
+  --color-secondary-100: oklch(0.92 0.005 240);
+  --color-secondary-200: oklch(0.84 0.008 240);
+  --color-secondary-300: oklch(0.76 0.01 240);
+  --color-secondary-400: oklch(0.65 0.012 240);
+  --color-secondary-500: oklch(0.53 0.012 240);
+  --color-secondary-600: oklch(0.43 0.012 240);
+  --color-secondary-700: oklch(0.36 0.01 240);
+  --color-secondary-800: oklch(0.29 0.008 240);
+  --color-secondary-900: oklch(0.22 0.005 240);
+  --color-secondary-950: oklch(0.15 0.003 240);
+
+  /*
+   * Chassis neutral ramp — pure grayscale (chroma 0). The library default
+   * neutral carries a faint cool tint (Hue 240, chroma ~0.01); this theme
+   * strips it entirely so surfaces, text and borders read as a true,
+   * temperature-free grayscale — the most content-focused chassis the system
+   * ships. Lightness matches the foundation ramp one-to-one, so WCAG
+   * contrast stays unchanged. surface-*, text-* and border-* pick this up
+   * automatically through semantic.css.
+   */
+  --color-neutral-25: oklch(0.99 0 0);
+  --color-neutral-50: oklch(0.98 0 0);
+  --color-neutral-100: oklch(0.95 0 0);
+  --color-neutral-200: oklch(0.89 0 0);
+  --color-neutral-300: oklch(0.83 0 0);
+  --color-neutral-400: oklch(0.7 0 0);
+  --color-neutral-500: oklch(0.55 0 0);
+  --color-neutral-600: oklch(0.42 0 0);
+  --color-neutral-650: oklch(0.38 0 0);
+  --color-neutral-700: oklch(0.32 0 0);
+  --color-neutral-750: oklch(0.28 0 0);
+  --color-neutral-800: oklch(0.23 0 0);
+  --color-neutral-850: oklch(0.18 0 0);
+  --color-neutral-900: oklch(0.15 0 0);
+  --color-neutral-950: oklch(0.08 0 0);
+}

package/dist/style/themes/ocean.css

@@ -0,0 +1,92 @@
+/*
+ * @urbicon-ui/blocks – Ocean Theme
+ *
+ * Cool blue-teal palette with deeper saturation.
+ * Import AFTER the base styles:
+ *
+ *   @import '@urbicon-ui/blocks/style/index.css';
+ *   @import '@urbicon-ui/blocks/style/themes/ocean.css';
+ */
+
+@theme {
+  --color-primary-50: oklch(0.95 0.03 220);
+  --color-primary-100: oklch(0.9 0.05 220);
+  --color-primary-200: oklch(0.82 0.08 220);
+  --color-primary-300: oklch(0.74 0.11 220);
+  --color-primary-400: oklch(0.66 0.14 220);
+  --color-primary-500: oklch(0.58 0.14 220);
+  --color-primary-600: oklch(0.52 0.14 220);
+  --color-primary-700: oklch(0.44 0.12 220);
+  --color-primary-800: oklch(0.36 0.1 220);
+  --color-primary-900: oklch(0.28 0.07 220);
+  --color-primary-950: oklch(0.18 0.04 220);
+
+  --color-secondary-50: oklch(0.95 0.03 190);
+  --color-secondary-100: oklch(0.9 0.05 190);
+  --color-secondary-200: oklch(0.82 0.08 190);
+  --color-secondary-300: oklch(0.74 0.11 190);
+  --color-secondary-400: oklch(0.66 0.13 190);
+  --color-secondary-500: oklch(0.55 0.12 190);
+  --color-secondary-600: oklch(0.48 0.12 190);
+  --color-secondary-700: oklch(0.4 0.1 190);
+  --color-secondary-800: oklch(0.32 0.08 190);
+  --color-secondary-900: oklch(0.25 0.06 190);
+  --color-secondary-950: oklch(0.18 0.04 190);
+
+  /*
+   * Chassis neutral ramp — re-tinted cool-blue (Hue 220) so surfaces, text
+   * and borders sit in the same temperature family as the blue-teal accent
+   * (the library default neutral sits at Hue 240, a touch more violet).
+   * Lightness and chroma match the foundation ramp one-to-one — only the
+   * hue shifts — so WCAG contrast stays unchanged. surface-*, text-* and
+   * border-* pick this up automatically through semantic.css.
+   */
+  --color-neutral-25: oklch(0.99 0.002 220);
+  --color-neutral-50: oklch(0.98 0.005 220);
+  --color-neutral-100: oklch(0.95 0.008 220);
+  --color-neutral-200: oklch(0.89 0.012 220);
+  --color-neutral-300: oklch(0.83 0.014 220);
+  --color-neutral-400: oklch(0.7 0.015 220);
+  --color-neutral-500: oklch(0.55 0.016 220);
+  --color-neutral-600: oklch(0.42 0.017 220);
+  --color-neutral-650: oklch(0.38 0.016 220);
+  --color-neutral-700: oklch(0.32 0.016 220);
+  --color-neutral-750: oklch(0.28 0.014 220);
+  --color-neutral-800: oklch(0.23 0.015 220);
+  --color-neutral-850: oklch(0.18 0.014 220);
+  --color-neutral-900: oklch(0.15 0.012 220);
+  --color-neutral-950: oklch(0.08 0.008 220);
+
+  /*
+   * Intent re-tuning — the blue primary (Hue 220) is identical to the default
+   * info hue, so info would read as the brand. Info is shifted to a violet-
+   * blue (Hue 255): still cool and clearly "informational", but distinct from
+   * both the primary (220) and the teal secondary (190). Same L/C profile as
+   * the foundation ramp; only the hue shifts. Success, warning and danger keep
+   * the library defaults (far from the cool accent). Derived --color-info
+   * re-resolves at :root automatically (global @theme).
+   */
+  --color-info-50: oklch(0.96 0.025 255);
+  --color-info-100: oklch(0.92 0.045 255);
+  --color-info-200: oklch(0.84 0.075 255);
+  --color-info-300: oklch(0.76 0.105 255);
+  --color-info-400: oklch(0.66 0.13 255);
+  --color-info-500: oklch(0.55 0.14 255);
+  --color-info-600: oklch(0.48 0.13 255);
+  --color-info-700: oklch(0.4 0.11 255);
+  --color-info-800: oklch(0.32 0.09 255);
+  --color-info-900: oklch(0.24 0.07 255);
+  --color-info-950: oklch(0.16 0.05 255);
+}
+
+/*
+ * Cool shadow tint — keeps shadows in the blue-grey family of the chassis
+ * rather than neutral black. :root (not @theme) to mirror semantic.css;
+ * imported after the base styles, so it wins.
+ */
+:root {
+  --blocks-shadow-tint: 0.2 0.02 235;
+  /* Neutral intent (bg-neutral / text-neutral / borders) follows the cool
+     chassis instead of the library-default violet-leaning grey. */
+  --neutral-chrome-hue: 220;
+}

package/dist/style/themes/rose.css

@@ -0,0 +1,91 @@
+/*
+ * @urbicon-ui/blocks – Rose Theme
+ *
+ * Soft pink-rose palette for elegant, modern interfaces.
+ * Import AFTER the base styles:
+ *
+ *   @import '@urbicon-ui/blocks/style/index.css';
+ *   @import '@urbicon-ui/blocks/style/themes/rose.css';
+ */
+
+@theme {
+  --color-primary-50: oklch(0.95 0.03 350);
+  --color-primary-100: oklch(0.9 0.05 350);
+  --color-primary-200: oklch(0.82 0.08 350);
+  --color-primary-300: oklch(0.74 0.11 350);
+  --color-primary-400: oklch(0.66 0.14 350);
+  --color-primary-500: oklch(0.6 0.16 350);
+  --color-primary-600: oklch(0.53 0.15 350);
+  --color-primary-700: oklch(0.45 0.13 350);
+  --color-primary-800: oklch(0.36 0.1 350);
+  --color-primary-900: oklch(0.28 0.07 350);
+  --color-primary-950: oklch(0.18 0.04 350);
+
+  --color-secondary-50: oklch(0.95 0.03 310);
+  --color-secondary-100: oklch(0.9 0.05 310);
+  --color-secondary-200: oklch(0.82 0.08 310);
+  --color-secondary-300: oklch(0.74 0.1 310);
+  --color-secondary-400: oklch(0.66 0.12 310);
+  --color-secondary-500: oklch(0.55 0.12 310);
+  --color-secondary-600: oklch(0.48 0.12 310);
+  --color-secondary-700: oklch(0.4 0.1 310);
+  --color-secondary-800: oklch(0.32 0.08 310);
+  --color-secondary-900: oklch(0.25 0.06 310);
+  --color-secondary-950: oklch(0.18 0.04 310);
+
+  /*
+   * Chassis neutral ramp — re-tinted warm-pink (Hue 350) so surfaces, text
+   * and borders carry a soft rosé warmth instead of reading cool grey (the
+   * library default neutral sits at Hue 240). Lightness and chroma match the
+   * foundation ramp one-to-one — only the hue shifts — so WCAG contrast
+   * stays unchanged. surface-*, text-* and border-* pick this up
+   * automatically through semantic.css.
+   */
+  --color-neutral-25: oklch(0.99 0.002 350);
+  --color-neutral-50: oklch(0.98 0.005 350);
+  --color-neutral-100: oklch(0.95 0.008 350);
+  --color-neutral-200: oklch(0.89 0.012 350);
+  --color-neutral-300: oklch(0.83 0.014 350);
+  --color-neutral-400: oklch(0.7 0.015 350);
+  --color-neutral-500: oklch(0.55 0.016 350);
+  --color-neutral-600: oklch(0.42 0.017 350);
+  --color-neutral-650: oklch(0.38 0.016 350);
+  --color-neutral-700: oklch(0.32 0.016 350);
+  --color-neutral-750: oklch(0.28 0.014 350);
+  --color-neutral-800: oklch(0.23 0.015 350);
+  --color-neutral-850: oklch(0.18 0.014 350);
+  --color-neutral-900: oklch(0.15 0.012 350);
+  --color-neutral-950: oklch(0.08 0.008 350);
+
+  /*
+   * Intent re-tuning — the pink primary (Hue 350) shares the warm-red register
+   * with the default danger (Hue 25). Danger is nudged toward an orange-red
+   * (Hue 34) so an error state reads distinctly from both the pink brand and
+   * the magenta secondary (Hue 310). Same L/C profile as the foundation ramp;
+   * only the hue shifts. Success, warning and info keep the library defaults.
+   * Derived --color-danger re-resolves at :root automatically (global @theme).
+   */
+  --color-danger-50: oklch(0.95 0.05 34);
+  --color-danger-100: oklch(0.9 0.08 34);
+  --color-danger-200: oklch(0.82 0.1 34);
+  --color-danger-300: oklch(0.74 0.12 34);
+  --color-danger-400: oklch(0.62 0.16 34);
+  --color-danger-500: oklch(0.5 0.17 34);
+  --color-danger-600: oklch(0.44 0.16 34);
+  --color-danger-700: oklch(0.38 0.14 34);
+  --color-danger-800: oklch(0.3 0.12 34);
+  --color-danger-900: oklch(0.22 0.1 34);
+  --color-danger-950: oklch(0.14 0.07 34);
+}
+
+/*
+ * Warm rosé shadow tint — keeps shadows in the warm family of the chassis
+ * rather than neutral black. :root (not @theme) to mirror semantic.css;
+ * imported after the base styles, so it wins.
+ */
+:root {
+  --blocks-shadow-tint: 0.22 0.03 352;
+  /* Neutral intent (bg-neutral / text-neutral / borders) follows the warm
+     rosé chassis instead of the library-default cool grey. */
+  --neutral-chrome-hue: 350;
+}