kmcom-nuxt-layers 2.7.5 → 3.0.0

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

@@ -0,0 +1,26 @@
+/**
+ * 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).
+ */
+@theme {
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  --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;
+}

package/layers/{theme → design-system/theming}/app/components/ThemePicker/AccentButton.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-  import type { AccentColor } from '#layers/theme/app/types/theme'
+  import type { AccentColor } from '#layers/theming/app/types/theme'
+  import { ACCENT_SWATCH } from '#layers/theming/app/utils/accentPalette'
 
   const { color, active = false } = defineProps<{
     color: AccentColor
@@ -10,28 +11,8 @@
     select: [color: AccentColor]
   }>()
 
-  const COLORS: Record<AccentColor, string> = {
-    red: '#ef4444',
-    orange: '#f97316',
-    amber: '#f59e0b',
-    yellow: '#eab308',
-    lime: '#84cc16',
-    green: '#22c55e',
-    emerald: '#10b981',
-    teal: '#14b8a6',
-    cyan: '#06b6d4',
-    sky: '#0ea5e9',
-    blue: '#3b82f6',
-    indigo: '#6366f1',
-    violet: '#8b5cf6',
-    purple: '#a855f7',
-    fuchsia: '#d946ef',
-    pink: '#ec4899',
-    rose: '#f43f5e',
-  }
-
   const bgStyle = computed(() => ({
-    backgroundColor: COLORS[color],
+    backgroundColor: ACCENT_SWATCH[color],
   }))
 </script>
 

package/layers/{theme → design-system/theming}/app/components/ThemePicker/Colors.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-  import type { AccentColor } from '#layers/theme/app/types/theme'
+  import type { AccentColor } from '#layers/theming/app/types/theme'
 
   const appConfig = useAppConfig()
+  const themeLayer = appConfig.themeLayer as { accents?: AccentColor[] } | undefined
   const { activeAccent, setAccent } = useAccentColor()
 
-  const accents = computed<AccentColor[]>(
-    () => (appConfig.themeLayer?.accents ?? []) as AccentColor[]
-  )
+  const accents = computed<AccentColor[]>(() => themeLayer?.accents ?? [])
 </script>
 
 <template>

package/layers/{theme → design-system/theming}/app/composables/useAccentColor.ts

@@ -1,9 +1,12 @@
-import type { AccentColor } from '#layers/theme/app/types/theme'
+import type { AccentColor } from '#layers/theming/app/types/theme'
 import { createSharedComposable } from '@vueuse/core'
 
 export const useAccentColor = createSharedComposable(() => {
   const appConfig = useAppConfig()
-  const defaultAccent = (appConfig.themeLayer?.defaultAccent ?? 'blue') as AccentColor
+  const themeLayer = appConfig.themeLayer as
+    | { accents?: AccentColor[]; defaultAccent?: AccentColor }
+    | undefined
+  const defaultAccent = (themeLayer?.defaultAccent ?? 'blue') as AccentColor
 
   // useState ensures server value is serialized into the Nuxt payload and reused
   // during hydration, avoiding a mismatch with localStorage (client-only).

package/layers/{theme → design-system/theming}/app/composables/useThemeContrast.ts

@@ -1,4 +1,4 @@
-import type { PreferenceOverride } from '#layers/theme/app/types/theme'
+import type { PreferenceOverride } from '#layers/theming/app/types/theme'
 import { createSharedComposable, usePreferredContrast } from '@vueuse/core'
 
 export const useThemeContrast = createSharedComposable(() => {

package/layers/{theme → design-system/theming}/app/composables/useThemeMotion.ts

@@ -1,4 +1,4 @@
-import type { PreferenceOverride } from '#layers/theme/app/types/theme'
+import type { PreferenceOverride } from '#layers/theming/app/types/theme'
 import { createSharedComposable, usePreferredReducedMotion } from '@vueuse/core'
 
 export const useThemeMotion = createSharedComposable(() => {

package/layers/{theme → design-system/theming}/app/composables/useThemeTransparency.ts

@@ -1,4 +1,4 @@
-import type { PreferenceOverride } from '#layers/theme/app/types/theme'
+import type { PreferenceOverride } from '#layers/theming/app/types/theme'
 import { createSharedComposable, usePreferredReducedTransparency } from '@vueuse/core'
 
 export const useThemeTransparency = createSharedComposable(() => {

package/layers/{theme → design-system/theming}/app/plugins/theme.client.ts

@@ -1,7 +1,8 @@
-import type { AccentColor, PreferenceOverride } from '#layers/theme/app/types/theme'
+import type { AccentColor, PreferenceOverride } from '#layers/theming/app/types/theme'
 
 export default defineNuxtPlugin({
   name: 'theme:theme',
+  // fallow-ignore-next-line complexity
   setup() {
     const { setAccent, activeAccent } = useAccentColor()
     const { setContrastOverride, effectiveHighContrast } = useThemeContrast()

package/layers/design-system/theming/app/types/designSystem.ts

@@ -0,0 +1,102 @@
+// fallow-ignore-file unused-file
+
+/**
+ * Phase 5 token foundation (spec §21); the theme adapter and CSS token file
+ * consume it by convention (hand-synced values), not by import, matching
+ * layers/core/app/types/tokens.ts's existing pattern. Future consumers
+ * (theme adapter component overrides, standalone token exports) will import
+ * it directly.
+ */
+import type { FluidFontSize } from '#layers/typography/app/types/typography'
+import type { UiColors } from '#types'
+
+/**
+ * Design-system tokens — first real config-object source of truth (Phase 5,
+ * nuxt-declarative-layout-system-spec.md §21). Colours key off the existing
+ * `UiColors` union rather than inventing new names; typography keys off the
+ * existing `FluidFontSize` scale/CSS vars in layers/typography — this section
+ * only gives them a config-object home so a Nuxt UI theme adapter and CSS
+ * custom properties can derive from one place.
+ */
+
+const fluidTextVar = (size: FluidFontSize) => `var(--fluid-text-${size}-raw)`
+
+export const designSystem = {
+  colors: {
+    dimmed: 'dimmed',
+    muted: 'muted',
+    toned: 'toned',
+    default: 'default',
+    highlighted: 'highlighted',
+    inverted: 'inverted',
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+    primary: 'primary',
+    neutral: 'neutral',
+    secondary: 'secondary',
+    accent: 'accent',
+    black: 'black',
+    white: 'white',
+  } satisfies Record<UiColors, UiColors>,
+
+  radius: {
+    none: '0',
+    sm: '0.25rem',
+    md: '0.5rem',
+    lg: '0.75rem',
+    xl: '1rem',
+    full: '9999px',
+  },
+
+  shadow: {
+    none: 'none',
+    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  },
+
+  typography: {
+    xs: fluidTextVar('xs'),
+    sm: fluidTextVar('sm'),
+    md: fluidTextVar('md'),
+    lg: fluidTextVar('lg'),
+    xl: fluidTextVar('xl'),
+    '2xl': fluidTextVar('2xl'),
+    '3xl': fluidTextVar('3xl'),
+    '4xl': fluidTextVar('4xl'),
+    '5xl': fluidTextVar('5xl'),
+    '6xl': fluidTextVar('6xl'),
+    '7xl': fluidTextVar('7xl'),
+    '8xl': fluidTextVar('8xl'),
+    '9xl': fluidTextVar('9xl'),
+  },
+
+  motion: {
+    duration: {
+      // `base` matches theme.css's existing `.theme-transition` value — not
+      // a new default, just giving the real value in use a named token.
+      fast: '150ms',
+      base: '700ms',
+      slow: '1000ms',
+    },
+    easing: {
+      linear: 'linear',
+      ease: 'ease',
+      easeIn: 'ease-in',
+      easeOut: 'ease-out',
+      easeInOut: 'ease-in-out',
+    },
+  },
+} as const
+
+/** Identity function — mirrors `defineAppConfig`'s pattern, exists purely for inference. */
+export function defineDesignSystem<T extends typeof designSystem>(config: T): T {
+  return config
+}
+
+export type DesignSystem = typeof designSystem
+
+export type DesignSystemToken<K extends keyof DesignSystem> = keyof DesignSystem[K]

package/layers/design-system/theming/app/types/semanticColor.ts

@@ -0,0 +1,20 @@
+// fallow-ignore-file unused-file
+
+/**
+ * Phase 5 semantic colour types (spec §4.3), first real implementation. Not
+ * yet consumed by any component prop; wiring them into the theme adapter /
+ * component prop types is deferred follow-up work per the Phase 5 plan's
+ * stated scope boundary.
+ */
+import type { ColorUsage, UiColors } from '#types'
+
+/**
+ * Semantic colour types (nuxt-declarative-layout-system-spec.md §4.3) — first
+ * real implementation anywhere in the repo. Built on the existing `ColorUsage`
+ * discriminant + `UiColors` palette rather than a parallel colour system.
+ */
+type UsageClass<U extends ColorUsage> = `${U}-${UiColors}`
+
+export type BackgroundColor = UsageClass<'bg'>
+export type TextColor = UsageClass<'text'>
+export type BorderColor = UsageClass<'border'>

package/layers/design-system/theming/app/types/theme.ts

@@ -0,0 +1,12 @@
+/**
+ * Theme layer type definitions
+ *
+ * Types for accent colors, user preference overrides,
+ * and the theme preferences interface.
+ */
+
+import type { AccentColor } from '#types'
+
+export type { AccentColor }
+
+export type PreferenceOverride = 'system' | 'on' | 'off'

package/layers/design-system/theming/app/utils/accentPalette.ts

@@ -0,0 +1,28 @@
+import type { AccentColor } from '#layers/theming/app/types/theme'
+import twColors from 'tailwindcss/colors'
+
+/**
+ * Single source of truth for each accent's representative swatch colour
+ * (the 500 shade of its real Tailwind palette). Shared by AccentButton.vue's
+ * swatch rendering and accent-css.ts's per-accent CSS-var generation, so the
+ * two never drift apart.
+ */
+export const ACCENT_SWATCH: Record<AccentColor, string> = {
+  red: twColors.red[500],
+  orange: twColors.orange[500],
+  amber: twColors.amber[500],
+  yellow: twColors.yellow[500],
+  lime: twColors.lime[500],
+  green: twColors.green[500],
+  emerald: twColors.emerald[500],
+  teal: twColors.teal[500],
+  cyan: twColors.cyan[500],
+  sky: twColors.sky[500],
+  blue: twColors.blue[500],
+  indigo: twColors.indigo[500],
+  violet: twColors.violet[500],
+  purple: twColors.purple[500],
+  fuchsia: twColors.fuchsia[500],
+  pink: twColors.pink[500],
+  rose: twColors.rose[500],
+}

package/layers/design-system/theming/app/utils/themeAdapter.ts

@@ -0,0 +1,20 @@
+import { ACCENT_PALETTES, type AccentName } from '../../server/utils/accent-css'
+
+/**
+ * Derives Nuxt UI's `ui.colors` shape from the same accent-relationship table
+ * accent-css.ts uses for its per-accent CSS-var generation, so app.config
+ * consumers never hand-pick a colour triple that can drift from it.
+ *
+ * Kept free of any `#`-aliased import (only relative imports) — this file is
+ * also imported from nuxt.config.ts, which type-checks under a Node-only
+ * project with no app path aliases registered.
+ */
+export function resolveUiColors(accent: AccentName) {
+  const { secondary, info } = ACCENT_PALETTES[accent]
+  return {
+    primary: accent,
+    secondary,
+    info,
+    neutral: 'neutral' as const,
+  }
+}

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

@@ -0,0 +1,49 @@
+// Theme Layer - Color mode, accent colors, accessibility preferences
+import { resolveUiColors } from './app/utils/themeAdapter'
+
+declare module '@nuxt/schema' {
+  interface PublicRuntimeConfig {
+    themeDefaultAccent?: string
+  }
+}
+
+export default defineNuxtConfig({
+  $meta: {
+    name: 'theming',
+  },
+
+  extends: ['../../core'],
+
+  runtimeConfig: {
+    public: {
+      themeDefaultAccent: 'blue',
+    },
+  },
+
+  alias: {
+    '#layers/theming': import.meta.dirname,
+    '#layers/theming/types': `${import.meta.dirname}/app/types`,
+  },
+
+  css: ['#layers/theming/app/assets/css/theme.css', '#layers/theming/app/assets/css/tokens.css'],
+
+  plugins: ['#layers/theming/app/plugins/theme.client.ts'],
+
+  colorMode: {
+    dataValue: 'theme-mode',
+    storageKey: 'theme-mode',
+  },
+
+  appConfig: {
+    ui: {
+      colors: resolveUiColors('blue'),
+    },
+  },
+
+  compatibilityDate: '2026-01-30',
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
+})

package/layers/{ui → design-system/theming}/package.json

@@ -1,15 +1,14 @@
 {
-  "name": "kmcom-layer-ui",
-  "type": "module",
+  "name": "kmcom-layer-theming",
   "version": "0.0.1",
+  "type": "module",
   "main": "./nuxt.config.ts",
   "scripts": {
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "typecheck": "vue-tsc --noEmit -p ../../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
-    "dev:ui": "UI_STANDALONE=true nuxi dev",
     "dev:prepare": "nuxt prepare .playground",
-    "build": "UI_STANDALONE=true nuxi build",
-    "generate": "UI_STANDALONE=true nuxi generate",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
     "lint": "eslint ."
   }

package/layers/{theme → design-system/theming}/server/plugins/theme-fouc.ts

@@ -1,3 +1,5 @@
+import { defineNitroPlugin, useRuntimeConfig } from 'nitropack/runtime'
+
 import { buildAccentCSS } from '../utils/accent-css'
 import { buildThemeInitScript } from '../utils/fouc-config'
 

package/layers/{theme → design-system/theming}/server/utils/accent-css.ts

@@ -22,11 +22,11 @@ const ACCENTS = [
   'rose',
 ] as const
 
-type AccentName = (typeof ACCENTS)[number]
+export type AccentName = (typeof ACCENTS)[number]
 
 const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
 
-const ACCENT_PALETTES: Record<AccentName, { secondary: AccentName; info: AccentName }> = {
+export const ACCENT_PALETTES: Record<AccentName, { secondary: AccentName; info: AccentName }> = {
   red: { secondary: 'rose', info: 'orange' },
   orange: { secondary: 'amber', info: 'red' },
   amber: { secondary: 'orange', info: 'yellow' },

package/layers/{theme → design-system/theming}/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../apps/playground/tsconfig.json",
+  "extends": "../../../apps/playground/tsconfig.json",
   "compilerOptions": {
     "strict": true
   },

package/layers/{typography → design-system/typography}/app/assets/css/typography.css

@@ -5,6 +5,15 @@
  * parallel Tailwind build and breaks content-scan coverage for @nuxt/ui
  * utilities elsewhere in the app (see kmcom-nuxt-layers-typography-css-bug.md).
  */
+/* Font-family tokens — generate Tailwind's font-sans/font-mono/font-display
+   utilities. System-font stacks only for now; real webfont choice deferred,
+   non-blocking (matches core/base.css's existing `system-ui, sans-serif`). */
+@theme {
+  --font-sans: system-ui, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-display: system-ui, sans-serif;
+}
+
 :root {
   /* Fluid type scale — rounding interval. rem, never px (see §5 a11y). */
   --fluid-step: 0.25rem;

package/layers/design-system/typography/app/components/Typography/CodeBlock.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+  import { useColor } from '../../composables/color'
+  import { useTypography } from '../../composables/typography'
+  import type { UiColors } from '../../types/colors'
+  import type {
+    FluidFontSize,
+    FontFamily,
+    FontLeading,
+    FontSize,
+    FontSlant,
+    FontTracking,
+    FontWeight,
+    FontWidth,
+    TextAlign,
+    TextTransform,
+  } from '../../types/typography'
+
+  const {
+    language = undefined,
+    weight = 'font-normal',
+    width = 'font-stretch-normal',
+    slant = 'normal',
+    leading = 'leading-normal',
+    tracking = 'tracking-normal',
+    align = 'left',
+    transform = 'none',
+    color = 'default',
+    size = undefined,
+    fluidSize = undefined,
+    font = 'mono',
+  } = defineProps<{
+    language?: string
+    weight?: FontWeight
+    width?: FontWidth
+    slant?: FontSlant
+    leading?: FontLeading
+    tracking?: FontTracking
+    align?: TextAlign
+    transform?: TextTransform
+    color?: UiColors
+    size?: FontSize
+    fluidSize?: FluidFontSize
+    font?: FontFamily
+  }>()
+  const { classes } = useTypography(() => ({
+    weight,
+    width,
+    slant,
+    leading,
+    tracking,
+    align,
+    transform,
+    font,
+    ...(size !== undefined && { size }),
+    ...(fluidSize !== undefined && { fluidSize }),
+  }))
+  const colorClass = useColor(color, 'text')
+</script>
+
+<template>
+  <pre
+    class="overflow-x-auto"
+    :data-language="language"
+  ><code :class="[classes, colorClass, language ? `language-${language}` : '']"><slot /></code></pre>
+</template>

package/layers/{typography → design-system/typography}/app/components/Typography/Headline.vue

@@ -4,6 +4,7 @@
   import type { UiColors } from '../../types/colors'
   import type {
     FluidFontSize,
+    FontFamily,
     FontLeading,
     FontSize,
     FontSlant,
@@ -14,8 +15,6 @@
     TextTransform,
   } from '../../types/typography'
 
-  defineOptions({ inheritAttrs: false })
-
   const {
     level = 1,
     weight = 'font-bold',
@@ -28,7 +27,7 @@
     color = undefined,
     size = undefined,
     fluidSize = undefined,
-    class: classProp = '',
+    font = undefined,
   } = defineProps<{
     level?: 1 | 2 | 3 | 4 | 5 | 6
     weight?: FontWeight
@@ -41,7 +40,7 @@
     color?: UiColors
     size?: FontSize
     fluidSize?: FluidFontSize
-    class?: string
+    font?: FontFamily
   }>()
   const tag = computed(() => `h${level}` as const)
 
@@ -60,37 +59,23 @@
     size !== undefined ? undefined : (fluidSize ?? defaultFluidSizes[level])
   )
 
-  const { classes } = useTypography({
-    weight: weight,
-    width: width,
-    slant: slant,
-    leading: leading,
-    tracking: tracking,
-    align: align,
-    transform: transform,
-    ...(size !== undefined && { size: size }),
+  const { classes } = useTypography(() => ({
+    weight,
+    width,
+    slant,
+    leading,
+    tracking,
+    align,
+    transform,
+    ...(font !== undefined && { font }),
+    ...(size !== undefined && { size }),
     ...(appliedFluidSize.value !== undefined && { fluidSize: appliedFluidSize.value }),
-  })
+  }))
   const colorClass = useColor(color, 'text')
 </script>
 
 <template>
-  <Typography
-    :tag
-    :weight
-    :width
-    :slant
-    :leading
-    :tracking
-    :align
-    :transform
-    :class="[classes, colorClass, classProp]"
-    v-bind="{
-      ...(size !== undefined && { size: size }),
-      ...(appliedFluidSize !== undefined && { fluidSize: appliedFluidSize }),
-      ...$attrs,
-    }"
-  >
+  <component :is="tag" :class="[classes, colorClass]">
     <slot />
-  </Typography>
+  </component>
 </template>