kmcom-nuxt-layers 3.0.0 → 4.0.0

package/layers/core/app/assets/css/core.css

@@ -3,6 +3,20 @@
    and the resulting HMR layout shift on first load. */
 @custom-variant dark (&:where([data-theme-mode="dark"], [data-theme-mode="dark"] *));
 
+/* Explicit cascade-layer priority (low -> high). Tailwind's own
+   `@import 'tailwindcss'` and `@nuxt/ui` already register into this same
+   `theme`/`base`/`components`/`utilities` order internally — this statement
+   pins that order explicitly rather than relying on Tailwind/Nuxt UI's own
+   internal default, so a future re-ordering of the @import statements below,
+   or a change to how Tailwind/Nuxt UI register their layers, can't silently
+   change which of these four layers wins over another.
+   This only fixes ordering BETWEEN the four named layers — it does NOT
+   control precedence WITHIN a layer. base.css registers into `base` and
+   layout.css into `components`, the same layers Nuxt UI's own CSS uses;
+   between project rules and Nuxt UI rules inside the same layer, plain
+   source/import order still decides the winner. */
+@layer theme, base, components, utilities;
+
 @import 'tailwindcss';
 @import '@nuxt/ui';
 
@@ -26,3 +40,15 @@
    typography.css's header comment), and must resolve even for consumers that
    only extend core, since it lives in the same single published package. */
 @import '../../../../design-system/typography/app/assets/css/typography.css';
+
+/* Same relative-path requirement as typography.css above. tokens.css defines
+   an `@theme static` block (radius/shadow/duration) — per the CSS
+   single-build-root rule, that only merges into Tailwind's theme if Tailwind's
+   own PostCSS pipeline actually processes the file via @import from this one
+   root. It previously was NOT imported here — only registered as a standalone
+   stylesheet via theming/nuxt.config.ts's `css:` array — so its @theme block
+   was silently inert: the browser just ignores the unrecognized at-rule, and
+   every rounded-, shadow-, duration- utility fell back to Tailwind's stock
+   defaults instead of this file's values. Confirmed via compiled dev output:
+   the custom --shadow-sm value never appeared; Tailwind's built-in default did. */
+@import '../../../../design-system/theming/app/assets/css/tokens.css';

package/layers/core/app/assets/css/layout.css

@@ -1,9 +1,4 @@
 @layer components {
-  table {
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-
   th {
     vertical-align: top;
     padding: 0;
@@ -20,8 +15,6 @@
     margin: 1rem 0;
     border: 0;
     border-top: 1px solid #ccc;
-    height: 0;
-    color: inherit;
   }
 
   img,

package/layers/design-system/theming/app/assets/css/tokens.css

@@ -1,26 +1,67 @@
 /**
- * Radius/shadow/motion custom properties — mirrors layers/theming/app/types/
- * designSystem.ts by convention (colours are already fully handled by
- * accent-css.ts's per-accent --ui-color-* generation, so this file only
- * covers the two net-new token categories plus motion).
+ * Shadow/duration — vanilla custom properties are the source of truth
+ * (:root block below); the @theme static block bridges them into
+ * Tailwind's namespace so `shadow-lg`, `duration-base`, etc. and any
+ * future non-Tailwind consumer read the same values from one place.
+ * `static` is required — Tailwind v4 tree-shakes @theme entries that no
+ * utility in the scanned source actually uses; without it, an unused
+ * shade here silently disappears from the theme namespace instead of
+ * just being unused. Mirrors the font-token pattern in
+ * layers/design-system/typography/app/assets/css/typography.css.
+ *
+ * Radius is deliberately NOT here. Nuxt UI already owns the rounded-*
+ * scale via its own --ui-radius-based overrides (rounded-sm through
+ * rounded-3xl all resolve to calc(var(--ui-radius) * N)), registered in
+ * a lower-priority cascade layer than Tailwind's own generated
+ * utilities. Defining --radius-* in @theme here made Tailwind generate
+ * competing utilities-layer rules for rounded-sm/md/lg/xl that silently
+ * beat Nuxt UI's design-system scaling app-wide (confirmed: every Nuxt
+ * UI component's corner radius changed), while rounded-2xl/3xl (never
+ * given a --radius-* entry here) stayed on Nuxt UI's scale — a visible,
+ * inconsistent split. Bridging radius through this file needs its
+ * values aligned to --ui-radius's own multipliers to avoid this, which
+ * is out of scope here; until then, Nuxt UI stays the single source of
+ * truth for radius.
+ *
+ * Shadow is bridged in the OPPOSITE direction from duration: @theme
+ * static holds the literal shadow values, and :root's --shadow-token-*
+ * point at them via var(). Tailwind v4's box-shadow utility parses each
+ * shadow's resolved theme value at BUILD TIME to rewrite its color into
+ * a `var(--tw-shadow-color, <original>)` slot — that's the mechanism
+ * behind `shadow-primary/25` and other shadow-color opacity modifiers.
+ * A var() indirection in @theme is opaque to that build-time parser, so
+ * pointing --shadow-md etc. at --shadow-token-md (as duration does)
+ * would silently drop the --tw-shadow-color slot and opacity modifiers
+ * would render a plain black shadow. Duration doesn't have this
+ * constraint — it resolves purely via var() at use time, with no
+ * build-time parsing involved. Nuxt UI doesn't override shadow-*, so
+ * this collision risk doesn't apply to it.
+ *
+ * Colours are NOT here — they're already single-sourced dynamically via
+ * accent-css.ts's per-accent --ui-color-* generation (runtime accent
+ * switching), a different mechanism this file does not touch.
  */
-@theme {
-  --radius-none: 0;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-full: 9999px;
+:root {
+  --shadow-token-none: var(--shadow-none);
+  --shadow-token-sm: var(--shadow-sm);
+  --shadow-token-md: var(--shadow-md);
+  --shadow-token-lg: var(--shadow-lg);
+  --shadow-token-xl: var(--shadow-xl);
 
+  /* --duration-token-base matches theme.css's .theme-transition value —
+     not a new default, just giving the real value in use a named token. */
+  --duration-token-fast: 150ms;
+  --duration-token-base: 700ms;
+  --duration-token-slow: 1000ms;
+}
+
+@theme static {
   --shadow-none: none;
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-
-  /* --duration-base matches theme.css's existing .theme-transition value —
-     not a new default, just giving the real value in use a named token. */
-  --duration-fast: 150ms;
-  --duration-base: 700ms;
-  --duration-slow: 1000ms;
+  --duration-fast: var(--duration-token-fast);
+  --duration-base: var(--duration-token-base);
+  --duration-slow: var(--duration-token-slow);
 }

package/layers/design-system/theming/nuxt.config.ts

@@ -25,7 +25,10 @@ export default defineNuxtConfig({
     '#layers/theming/types': `${import.meta.dirname}/app/types`,
   },
 
-  css: ['#layers/theming/app/assets/css/theme.css', '#layers/theming/app/assets/css/tokens.css'],
+  // tokens.css is NOT listed here — it defines a Tailwind `@theme static` block, so per the
+  // CSS single-build-root rule (see .claude/rules/nuxt-layers.md) it must fold into core.css's
+  // @import chain via relative path instead, or its @theme block is silently inert.
+  css: ['#layers/theming/app/assets/css/theme.css'],
 
   plugins: ['#layers/theming/app/plugins/theme.client.ts'],
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",