kmcom-nuxt-layers 1.3.1 → 1.5.0

package/layers/theme/app/components/ThemePicker/AccentButton.vue

@@ -40,8 +40,8 @@ const bgStyle = computed(() => ({
     class="size-8 rounded-full ring-1 ring-offset-2 transition-shadow duration-200"
     :class="[
       active
-        ? 'ring-2 ring-primary ring-offset-[var(--ui-bg)] shadow-lg'
-        : 'ring-transparent hover:ring-muted ring-offset-[var(--ui-bg)] hover:shadow-md',
+        ? 'ring-2 ring-primary ring-offset-bg shadow-lg'
+        : 'ring-transparent hover:ring-muted ring-offset-bg hover:shadow-md',
     ]"
     :style="bgStyle"
     :aria-label="`Set accent color to ${color}`"

package/layers/theme/app/components/ThemePicker/Colors.vue

@@ -2,11 +2,9 @@
 import type { AccentColor } from '#layers/theme/app/types/theme'
 
 const appConfig = useAppConfig()
-const { activeAccent, setAccent } = useThemePreferences()
+const { activeAccent, setAccent } = useAccentColor()
 
-const accents = computed(
-  () => (appConfig as any).themeLayer?.accents as AccentColor[] ?? [],
-)
+const accents = computed(() => ((appConfig as any).themeLayer?.accents as AccentColor[]) ?? [])
 </script>
 
 <template>

package/layers/theme/app/components/ThemePicker/Menu.vue

@@ -9,7 +9,7 @@ const {
   effectiveHighContrast,
   effectiveReducedMotion,
   effectiveReducedTransparency,
-} = useThemePreferences()
+} = useTheme()
 
 const contrastModel = computed({
   get: () => effectiveHighContrast.value,
@@ -50,10 +50,7 @@ const transparencyModel = computed({
             <li class="flex w-full flex-row items-center justify-between py-1">
               <div>
                 <h2 class="text-lg font-semibold">High Contrast</h2>
-                <p
-                  v-if="contrastOverride === 'system'"
-                  class="text-sm text-muted"
-                >
+                <p v-if="contrastOverride === 'system'" class="text-sm text-muted">
                   Following system
                 </p>
               </div>
@@ -68,10 +65,7 @@ const transparencyModel = computed({
             <li class="flex w-full flex-row items-center justify-between py-1">
               <div>
                 <h2 class="text-lg font-semibold">Reduce Motion</h2>
-                <p
-                  v-if="motionOverride === 'system'"
-                  class="text-sm text-muted"
-                >
+                <p v-if="motionOverride === 'system'" class="text-sm text-muted">
                   Following system
                 </p>
               </div>
@@ -86,10 +80,7 @@ const transparencyModel = computed({
             <li class="flex w-full flex-row items-center justify-between py-1">
               <div>
                 <h2 class="text-lg font-semibold">Reduce Transparency</h2>
-                <p
-                  v-if="transparencyOverride === 'system'"
-                  class="text-sm text-muted"
-                >
+                <p v-if="transparencyOverride === 'system'" class="text-sm text-muted">
                   Following system
                 </p>
               </div>

package/layers/theme/app/components/ThemePicker/MenuButton.vue

@@ -1,9 +1,3 @@
 <template>
-  <UButton
-    icon="i-lucide-swatch-book"
-    variant="ghost"
-    square
-    aria-label="Theme picker"
-    size="xl"
-  />
+  <UButton icon="i-lucide-swatch-book" variant="ghost" square aria-label="Theme picker" size="xl" />
 </template>

package/layers/theme/app/composables/useAccentColor.ts

@@ -0,0 +1,38 @@
+import { createSharedComposable, useLocalStorage } from '@vueuse/core'
+import type { AccentColor } from '#layers/theme/app/types/theme'
+
+export const useAccentColor = createSharedComposable(() => {
+  const appConfig = useAppConfig()
+
+  const defaultAccent = ((appConfig as any).themeLayer?.defaultAccent ?? 'blue') as AccentColor
+  const accent = useLocalStorage<AccentColor>('theme-colour', defaultAccent)
+
+  const pageAccent = ref<AccentColor | null>(null)
+  const activeAccent = computed<AccentColor>(() => pageAccent.value ?? accent.value)
+
+  function setAccent(color: AccentColor) {
+    accent.value = color
+  }
+
+  function setPageAccent(color: AccentColor | null) {
+    pageAccent.value = color
+  }
+
+  if (import.meta.client) {
+    watch(
+      activeAccent,
+      (color) => {
+        document.documentElement.setAttribute('data-theme-colour', color)
+      },
+      { immediate: true }
+    )
+  }
+
+  return {
+    accent: readonly(accent),
+    setAccent,
+    pageAccent: readonly(pageAccent),
+    setPageAccent,
+    activeAccent,
+  }
+})

package/layers/theme/app/composables/useTheme.ts

@@ -0,0 +1,14 @@
+/**
+ * Unified theme facade.
+ *
+ * Composes useAccentColor, useThemeContrast, useThemeMotion, and
+ * useThemeTransparency. Each sub-composable is individually shared via
+ * createSharedComposable, so calling useTheme() or any sub-composable
+ * directly always returns the same reactive instances.
+ */
+export const useTheme = () => ({
+  ...useAccentColor(),
+  ...useThemeContrast(),
+  ...useThemeMotion(),
+  ...useThemeTransparency(),
+})

package/layers/theme/app/composables/useThemeContrast.ts

@@ -0,0 +1,34 @@
+import { createSharedComposable, useLocalStorage, usePreferredContrast } from '@vueuse/core'
+import type { PreferenceOverride } from '#layers/theme/app/types/theme'
+
+export const useThemeContrast = createSharedComposable(() => {
+  const contrastOverride = useLocalStorage<PreferenceOverride>('theme-contrast', 'system')
+  const systemContrast = usePreferredContrast()
+
+  const effectiveHighContrast = computed(() => {
+    if (contrastOverride.value === 'on') return true
+    if (contrastOverride.value === 'off') return false
+    return systemContrast.value === 'more'
+  })
+
+  function setContrastOverride(value: PreferenceOverride) {
+    contrastOverride.value = value
+  }
+
+  if (import.meta.client) {
+    watch(
+      effectiveHighContrast,
+      (high) => {
+        document.documentElement.setAttribute('data-theme-contrast', high ? 'high' : 'standard')
+      },
+      { immediate: true }
+    )
+  }
+
+  return {
+    contrastOverride: readonly(contrastOverride),
+    setContrastOverride,
+    effectiveHighContrast,
+    systemContrast,
+  }
+})

package/layers/theme/app/composables/useThemeMotion.ts

@@ -0,0 +1,34 @@
+import { createSharedComposable, useLocalStorage, usePreferredReducedMotion } from '@vueuse/core'
+import type { PreferenceOverride } from '#layers/theme/app/types/theme'
+
+export const useThemeMotion = createSharedComposable(() => {
+  const motionOverride = useLocalStorage<PreferenceOverride>('theme-motion', 'system')
+  const systemMotion = usePreferredReducedMotion()
+
+  const effectiveReducedMotion = computed(() => {
+    if (motionOverride.value === 'on') return true
+    if (motionOverride.value === 'off') return false
+    return systemMotion.value === 'reduce'
+  })
+
+  function setMotionOverride(value: PreferenceOverride) {
+    motionOverride.value = value
+  }
+
+  if (import.meta.client) {
+    watch(
+      effectiveReducedMotion,
+      (reduced) => {
+        document.documentElement.setAttribute('data-theme-motion', reduced ? 'reduced' : 'full')
+      },
+      { immediate: true }
+    )
+  }
+
+  return {
+    motionOverride: readonly(motionOverride),
+    setMotionOverride,
+    effectiveReducedMotion,
+    systemMotion,
+  }
+})

package/layers/theme/app/composables/useThemePreferences.ts

@@ -1,158 +1,5 @@
-import {
-  createSharedComposable,
-  useLocalStorage,
-  usePreferredContrast,
-  usePreferredReducedMotion,
-  usePreferredReducedTransparency,
-} from '@vueuse/core'
-import type { AccentColor, PreferenceOverride } from '#layers/theme/app/types/theme'
-
-const HTML_CLASSES = {
-  highContrast: 'high-contrast',
-  reduceMotion: 'reduce-motion',
-  reduceTransparency: 'reduce-transparency',
-} as const
-
 /**
- * Central composable for managing theme preferences.
- *
- * Wrapped with `createSharedComposable` so all callers share a single
- * reactive instance — changes in the popover menu are immediately
- * reflected on the page and vice versa.
- *
- * Accent colors are applied purely via a `[data-theme]` attribute on `<html>`.
- * The server plugin injects a `<style>` tag with `[data-theme="X"]` CSS rules
- * that override Nuxt UI's `@layer theme` variables — no appConfig mutation needed.
+ * @deprecated Use `useTheme()` instead.
+ * Kept as a backward-compatible alias.
  */
-export const useThemePreferences = createSharedComposable(() => {
-  const appConfig = useAppConfig()
-
-  // --- Accent Color (user preference, persisted) ---
-  const defaultAccent = ((appConfig as any).themeLayer?.defaultAccent ?? 'blue') as AccentColor
-  const accent = useLocalStorage<AccentColor>('theme-accent', defaultAccent)
-
-  // --- Page-level Accent Override (runtime only, not persisted) ---
-  const pageAccent = ref<AccentColor | null>(null)
-  const activeAccent = computed<AccentColor>(() => pageAccent.value ?? accent.value)
-
-  // --- User Overrides (localStorage) ---
-  const contrastOverride = useLocalStorage<PreferenceOverride>(
-    'theme-contrast',
-    'system',
-  )
-  const motionOverride = useLocalStorage<PreferenceOverride>(
-    'theme-motion',
-    'system',
-  )
-  const transparencyOverride = useLocalStorage<PreferenceOverride>(
-    'theme-transparency',
-    'system',
-  )
-
-  // --- System Preferences (VueUse media queries) ---
-  const systemContrast = usePreferredContrast()
-  const systemMotion = usePreferredReducedMotion()
-  const systemTransparency = usePreferredReducedTransparency()
-
-  // --- Effective (merged) Preferences ---
-  const effectiveHighContrast = computed(() => {
-    if (contrastOverride.value === 'on') return true
-    if (contrastOverride.value === 'off') return false
-    return systemContrast.value === 'more'
-  })
-
-  const effectiveReducedMotion = computed(() => {
-    if (motionOverride.value === 'on') return true
-    if (motionOverride.value === 'off') return false
-    return systemMotion.value === 'reduce'
-  })
-
-  const effectiveReducedTransparency = computed(() => {
-    if (transparencyOverride.value === 'on') return true
-    if (transparencyOverride.value === 'off') return false
-    return systemTransparency.value === 'reduce'
-  })
-
-  // --- DOM Side Effects ---
-  function applyAccent(color: AccentColor) {
-    if (!import.meta.client) return
-    // Setting data-theme activates the matching [data-theme="X"] CSS rule
-    // from the server-injected <style> tag, which overrides Nuxt UI's
-    // @layer theme variables. No appConfig mutation needed (avoids HMR loops).
-    document.documentElement.setAttribute('data-theme', color)
-  }
-
-  function applyPreferenceClasses() {
-    if (!import.meta.client) return
-    const cl = document.documentElement.classList
-
-    cl.toggle(HTML_CLASSES.highContrast, effectiveHighContrast.value)
-    cl.toggle(HTML_CLASSES.reduceMotion, effectiveReducedMotion.value)
-    cl.toggle(HTML_CLASSES.reduceTransparency, effectiveReducedTransparency.value)
-  }
-
-  // --- Setters ---
-  function setAccent(color: AccentColor) {
-    accent.value = color
-  }
-
-  function setPageAccent(color: AccentColor | null) {
-    pageAccent.value = color
-  }
-
-  function setContrastOverride(value: PreferenceOverride) {
-    contrastOverride.value = value
-  }
-
-  function setMotionOverride(value: PreferenceOverride) {
-    motionOverride.value = value
-  }
-
-  function setTransparencyOverride(value: PreferenceOverride) {
-    transparencyOverride.value = value
-  }
-
-  // --- Watchers ---
-  if (import.meta.client) {
-    // Apply accent on change (uses activeAccent = page override or user pref)
-    watch(activeAccent, (color) => applyAccent(color), { immediate: true })
-
-    // Apply preference classes on any effective change
-    watch(
-      [effectiveHighContrast, effectiveReducedMotion, effectiveReducedTransparency],
-      () => applyPreferenceClasses(),
-      { immediate: true },
-    )
-  }
-
-  return {
-    // Accent (user preference)
-    accent: readonly(accent),
-    setAccent,
-
-    // Page override
-    pageAccent: readonly(pageAccent),
-    setPageAccent,
-
-    // Effective accent (page override wins over user preference)
-    activeAccent,
-
-    // Overrides
-    contrastOverride: readonly(contrastOverride),
-    motionOverride: readonly(motionOverride),
-    transparencyOverride: readonly(transparencyOverride),
-    setContrastOverride,
-    setMotionOverride,
-    setTransparencyOverride,
-
-    // Effective (computed booleans)
-    effectiveHighContrast,
-    effectiveReducedMotion,
-    effectiveReducedTransparency,
-
-    // System values (for display)
-    systemContrast,
-    systemMotion,
-    systemTransparency,
-  }
-})
+export const useThemePreferences = useTheme

package/layers/theme/app/composables/useThemeTransparency.ts

@@ -0,0 +1,41 @@
+import {
+  createSharedComposable,
+  useLocalStorage,
+  usePreferredReducedTransparency,
+} from '@vueuse/core'
+import type { PreferenceOverride } from '#layers/theme/app/types/theme'
+
+export const useThemeTransparency = createSharedComposable(() => {
+  const transparencyOverride = useLocalStorage<PreferenceOverride>('theme-transparency', 'system')
+  const systemTransparency = usePreferredReducedTransparency()
+
+  const effectiveReducedTransparency = computed(() => {
+    if (transparencyOverride.value === 'on') return true
+    if (transparencyOverride.value === 'off') return false
+    return systemTransparency.value === 'reduce'
+  })
+
+  function setTransparencyOverride(value: PreferenceOverride) {
+    transparencyOverride.value = value
+  }
+
+  if (import.meta.client) {
+    watch(
+      effectiveReducedTransparency,
+      (reduced) => {
+        document.documentElement.setAttribute(
+          'data-theme-transparency',
+          reduced ? 'reduced' : 'full'
+        )
+      },
+      { immediate: true }
+    )
+  }
+
+  return {
+    transparencyOverride: readonly(transparencyOverride),
+    setTransparencyOverride,
+    effectiveReducedTransparency,
+    systemTransparency,
+  }
+})

package/layers/theme/app/plugins/theme.client.ts

@@ -1,5 +1,5 @@
 export default defineNuxtPlugin(() => {
-  // Initialize the shared composable — applies appConfig.ui.colors.primary,
-  // cleans up FOUC inline styles, and applies preference classes on <html>.
-  useThemePreferences()
+  // Initialize shared composables — applies data-theme-colour, data-theme-contrast,
+  // data-theme-motion, and data-theme-transparency on <html> on first load.
+  useTheme()
 })

package/layers/theme/app/types/theme.ts

@@ -26,6 +26,10 @@ export type AccentColor =
 
 export type PreferenceOverride = 'system' | 'on' | 'off'
 
+export type ThemeContrast = 'high' | 'standard'
+export type ThemeMotion = 'reduced' | 'full'
+export type ThemeTransparency = 'reduced' | 'full'
+
 export interface ThemePreferences {
   accent: AccentColor
   contrast: PreferenceOverride

package/layers/theme/nuxt.config.ts

@@ -12,10 +12,17 @@ export default defineNuxtConfig({
 
   plugins: ['#layers/theme/app/plugins/theme.client.ts'],
 
+  colorMode: {
+    dataValue: 'theme-mode',
+    storageKey: 'theme-mode',
+  },
+
   appConfig: {
     ui: {
       colors: {
         primary: 'blue',
+        secondary: 'indigo',
+        info: 'sky',
       },
     },
     themeLayer: {

package/layers/ui/app/app.config.ts

@@ -0,0 +1,44 @@
+export default defineAppConfig({
+  uiLayer: {
+    gradients: {
+      brand: { shape: 'linear', direction: 'to-br', from: { color: 'primary', shade: 500 }, to: { color: 'secondary', shade: 600 } },
+      subtle: { shape: 'linear', direction: 'to-b', from: { color: 'primary', shade: 100, opacity: 50 }, to: { color: 'transparent' } },
+      hero: { shape: 'radial', from: { color: 'primary', shade: 400, opacity: 40 }, to: { color: 'transparent' } },
+    },
+    accentScenes: {
+      hero: {
+        blobs: [
+          { x: 20, y: 30, size: '50rem', blur: '3xl', opacity: 25, color: 'primary', shade: 400 },
+          { x: 80, y: 70, size: '40rem', blur: '3xl', opacity: 20, color: 'secondary', shade: 500 },
+        ],
+      },
+      corner: {
+        blobs: [
+          { x: 100, y: 0, size: '35rem', blur: '2xl', opacity: 30, color: 'primary', shade: 500 },
+        ],
+      },
+      scattered: {
+        blobs: [
+          { x: 15, y: 20, size: '30rem', blur: 'xl', opacity: 20, color: 'primary', shade: 400 },
+          { x: 85, y: 30, size: '25rem', blur: 'xl', opacity: 15, color: 'secondary', shade: 400 },
+          { x: 50, y: 80, size: '35rem', blur: '2xl', opacity: 18, color: 'info', shade: 400 },
+        ],
+      },
+      minimal: {
+        blobs: [
+          { x: 50, y: 50, size: '60rem', blur: '3xl', opacity: 10, color: 'primary', shade: 500 },
+        ],
+      },
+    },
+  },
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    uiLayer?: {
+      name?: string
+      gradients?: Record<string, import('./types/gradient').GradientConfig>
+      accentScenes?: Record<string, import('./types/accent').AccentSceneConfig>
+    }
+  }
+}

package/layers/ui/app/assets/css/main.css

@@ -2,3 +2,17 @@
   background-color: var(--ui-bg);
   color: var(--ui-text);
 }
+
+.gradient-text {
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.accent-blob {
+  transition: background-color 400ms ease, opacity 300ms ease;
+}
+
+[data-theme-transparency="reduced"] .accent-blob {
+  opacity: 0 !important;
+}

package/layers/ui/app/components/Accent/Blob.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { AccentBlobColor, BlobBlur } from '../../types/accent'
+
+const props = withDefaults(
+  defineProps<{
+    x: number
+    y: number
+    size?: string
+    blur?: BlobBlur
+    opacity?: number
+    color?: AccentBlobColor
+    shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
+    customColor?: string
+  }>(),
+  {
+    size: '40rem',
+    blur: '3xl',
+    opacity: 25,
+    color: 'primary',
+    shade: 500,
+  }
+)
+
+const { style } = useAccentBlob(props)
+</script>
+
+<template>
+  <div class="accent-blob" :style="style" aria-hidden="true" />
+</template>

package/layers/ui/app/components/Accent/Scene.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { AccentSceneConfig, BlobConfig } from '../../types/accent'
+
+const props = withDefaults(
+  defineProps<{
+    preset?: string
+    blobs?: BlobConfig[]
+    tag?: string
+  }>(),
+  {
+    tag: 'div',
+  }
+)
+
+const appConfig = useAppConfig()
+
+const resolvedBlobs = computed((): BlobConfig[] => {
+  if (props.blobs) return props.blobs
+  if (props.preset) {
+    const scenes = (appConfig.uiLayer as Record<string, unknown> | undefined)?.accentScenes as
+      | Record<string, AccentSceneConfig>
+      | undefined
+    return scenes?.[props.preset]?.blobs ?? []
+  }
+  return []
+})
+</script>
+
+<template>
+  <component :is="tag" class="relative overflow-clip isolate">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <AccentBlob v-for="(blob, i) in resolvedBlobs" :key="i" v-bind="blob" />
+    </div>
+    <div class="relative z-10">
+      <slot />
+    </div>
+  </component>
+</template>

package/layers/ui/app/components/Gradient/Background.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { GradientConfig } from '../../types/gradient'
+
+const props = withDefaults(
+  defineProps<{
+    preset?: string
+    config?: GradientConfig
+    tag?: string
+  }>(),
+  {
+    tag: 'div',
+  }
+)
+
+const { style } = useGradient(computed(() => props.preset ?? props.config ?? 'brand'))
+</script>
+
+<template>
+  <component :is="tag" :style="style">
+    <slot />
+  </component>
+</template>

package/layers/ui/app/components/Gradient/Text.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { GradientConfig } from '../../types/gradient'
+
+const props = withDefaults(
+  defineProps<{
+    preset?: string
+    config?: GradientConfig
+    tag?: string
+  }>(),
+  {
+    tag: 'span',
+  }
+)
+
+const { style } = useGradient(computed(() => props.preset ?? props.config ?? 'brand'))
+</script>
+
+<template>
+  <component :is="tag" :style="style" class="gradient-text inline-block">
+    <slot />
+  </component>
+</template>

package/layers/ui/app/components/Progress/Bar.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const {
+  progress = null,
+  color,
+  size,
+  orientation,
+  status,
+  animation,
+  inverted,
+} = defineProps<{
+  progress?: number | null
+  color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  orientation?: 'horizontal' | 'vertical'
+  status?: boolean
+  animation?: 'carousel' | 'carousel-inverse' | 'swing' | 'elastic'
+  inverted?: boolean
+}>()
+
+const modelValue = computed(() => (progress != null ? progress * 100 : undefined))
+</script>
+
+<template>
+  <UProgress :model-value="modelValue" :color :size :orientation :status :animation :inverted />
+</template>