kmcom-nuxt-layers 1.3.1 → 1.4.0

package/layers/shader/app/components/Preset/ThemeAurora.client.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemeAuroraColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+    color1: '#8b5cf6',
+    color2: '#6366f1',
+    color3: '#a78bfa',
+    color4: '#38bdf8',
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+if (props.mouseInteraction) {
+  uniforms.mouseStrength.value = props.mouseStrength
+}
+
+const c1 = useShaderColor(props.color1)
+const c2 = useShaderColor(props.color2)
+const c3 = useShaderColor(props.color3)
+const c4 = useShaderColor(props.color4)
+
+const colorNode = createThemeAuroraColorNode(uniforms, {
+  color1: c1.node,
+  color2: c2.node,
+  color3: c3.node,
+  color4: c4.node,
+})
+
+watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
+watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
+watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
+watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+
+try {
+  const runtime = useShaderRuntimeContext()
+  watch(
+    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+    ([mx, my]) => {
+      uniforms.mouseX.value = mx
+      uniforms.mouseY.value = my
+    },
+    { immediate: true }
+  )
+} catch {
+  // No runtime context
+}
+
+watch(() => props.speed,            (v) => { uniforms.speed.value = v })
+watch(() => props.intensity,        (v) => { uniforms.intensity.value = v })
+watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
+watch(() => props.mouseStrength,    (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Preset/ThemeFlow.client.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemeFlowColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+    color1: '#8b5cf6',
+    color2: '#6366f1',
+    color3: '#a78bfa',
+    color4: '#38bdf8',
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+if (props.mouseInteraction) {
+  uniforms.mouseStrength.value = props.mouseStrength
+}
+
+const c1 = useShaderColor(props.color1)
+const c2 = useShaderColor(props.color2)
+const c3 = useShaderColor(props.color3)
+const c4 = useShaderColor(props.color4)
+
+const colorNode = createThemeFlowColorNode(uniforms, {
+  color1: c1.node,
+  color2: c2.node,
+  color3: c3.node,
+  color4: c4.node,
+})
+
+watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
+watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
+watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
+watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+
+try {
+  const runtime = useShaderRuntimeContext()
+  watch(
+    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+    ([mx, my]) => {
+      uniforms.mouseX.value = mx
+      uniforms.mouseY.value = my
+    },
+    { immediate: true }
+  )
+} catch {
+  // No runtime context
+}
+
+watch(() => props.speed,            (v) => { uniforms.speed.value = v })
+watch(() => props.intensity,        (v) => { uniforms.intensity.value = v })
+watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
+watch(() => props.mouseStrength,    (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Preset/ThemeGradient.client.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemeGradientColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+    color1: '#8b5cf6',
+    color2: '#6366f1',
+    color3: '#a78bfa',
+    color4: '#38bdf8',
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+// createAmbientUniforms hardcodes 0.5 — override with our prop value
+if (props.mouseInteraction) {
+  uniforms.mouseStrength.value = props.mouseStrength
+}
+
+const c1 = useShaderColor(props.color1)
+const c2 = useShaderColor(props.color2)
+const c3 = useShaderColor(props.color3)
+const c4 = useShaderColor(props.color4)
+
+const colorNode = createThemeGradientColorNode(uniforms, {
+  color1: c1.node,
+  color2: c2.node,
+  color3: c3.node,
+  color4: c4.node,
+})
+
+watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
+watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
+watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
+watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+
+try {
+  const runtime = useShaderRuntimeContext()
+  watch(
+    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+    ([mx, my]) => {
+      uniforms.mouseX.value = mx
+      uniforms.mouseY.value = my
+    },
+    { immediate: true }
+  )
+} catch {
+  // No runtime context
+}
+
+watch(() => props.speed,           (v) => { uniforms.speed.value = v })
+watch(() => props.intensity,       (v) => { uniforms.intensity.value = v })
+watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
+watch(() => props.mouseStrength,   (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Shader/Background.client.vue

@@ -118,6 +118,12 @@ async function init() {
   planeMesh = new Mesh(geometry, props.material ?? new MeshBasicMaterial({ color: 0x000000 }))
   scene.add(planeMesh)
 
+  // Pre-compile the shader pipeline asynchronously before starting the render loop.
+  // Without this, the first render() call uses device.createRenderPipeline() which
+  // blocks the main thread for 1-5s on first visit (cold WebGPU pipeline cache).
+  // compileAsync() uses device.createRenderPipelineAsync() instead, which is non-blocking.
+  await renderer.compileAsync(scene, camera)
+
   initialized = true
   emit('ready', renderer)
   animate()

package/layers/shader/app/composables/useAmbientMaterials.ts

@@ -277,6 +277,156 @@ export function createGradientMeshColorNode(uniforms: AmbientUniforms): any {
   })()
 }
 
+export interface ThemeColorUniforms {
+  color1: any   // TSL uniform node wrapping a THREE.Color
+  color2: any
+  color3: any
+  color4: any
+}
+
+export function createThemeGradientColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity,
+          mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.2)
+    const uvCoord = uv()
+
+    // Gentle UV shift for p2-p4 area
+    const mouseOffset = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength, 0.05),
+      mul(sub(uMouseY, 0.5), uMouseStrength, 0.05),
+    )
+    const adjustedUV = add(uvCoord, mouseOffset)
+
+    // p1 attracted toward mouse cursor
+    const p1Base = vec2(add(0.2, mul(sin(mul(t, 0.5)), 0.15)), add(0.3, mul(sin(add(mul(t, 0.4), 1.57)), 0.15)))
+    const mousePos = vec2(uMouseX, uMouseY)
+    const p1 = mix(p1Base, mousePos, mul(uMouseStrength, 0.5))
+
+    const p2 = vec2(add(0.8, mul(sin(add(mul(t, 0.6), 1.57)), 0.1)), add(0.2, mul(sin(mul(t, 0.5)), 0.1)))
+    const p3 = vec2(add(0.3, mul(sin(mul(t, 0.7)), 0.15)),           add(0.8, mul(sin(add(mul(t, 0.3), 1.57)), 0.1)))
+    const p4 = vec2(add(0.7, mul(sin(add(mul(t, 0.4), 1.57)), 0.15)), add(0.7, mul(sin(mul(t, 0.6)), 0.15)))
+
+    const nm1 = simplexNoise2D(add(mul(adjustedUV, 3.0), mul(t, 0.3))).mul(0.5).add(0.5)
+    const nm2 = simplexNoise2D(add(mul(adjustedUV, 4.5), mul(t, -0.2), 8.0)).mul(0.5).add(0.5)
+    const nm3 = fbm2D(add(adjustedUV, mul(t, 0.1)), { octaves: 3, frequency: 2.0 }).mul(0.5).add(0.5)
+    const nm4 = simplexNoise2D(add(mul(adjustedUV, 7.0), mul(t, 0.5))).mul(0.5).add(0.5)
+
+    const d1 = mul(sub(1.0, smoothstep(0.0, 0.7, length(sub(adjustedUV, p1)))), add(0.7, mul(nm1, 0.3)))
+    const d2 = mul(sub(1.0, smoothstep(0.0, 0.7, length(sub(adjustedUV, p2)))), add(0.7, mul(nm2, 0.3)))
+    const d3 = mul(sub(1.0, smoothstep(0.0, 0.7, length(sub(adjustedUV, p3)))), add(0.7, mul(nm3, 0.3)))
+    const d4 = mul(sub(1.0, smoothstep(0.0, 0.7, length(sub(adjustedUV, p4)))), add(0.7, mul(nm4, 0.3)))
+
+    let colorNode = mul(colors.color1, d1)
+    colorNode = add(colorNode, mul(colors.color2, d2))
+    colorNode = add(colorNode, mul(colors.color3, d3))
+    colorNode = add(colorNode, mul(colors.color4, d4))
+
+    // Normalise first, then vignette, then intensity
+    const totalWeight = add(d1, d2, d3, d4, 0.01)
+    colorNode = colorNode.div(totalWeight)
+
+    const dist = length(sub(uvCoord, 0.5))
+    colorNode = mul(colorNode, sub(1.0, mul(dist, 0.25)))
+    colorNode = mul(colorNode, uIntensity)
+
+    return colorNode
+  })()
+}
+
+export function createThemeFlowColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.15)
+    const uvCoord = uv()
+
+    const mouseOffset = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength, 0.3),
+      mul(sub(uMouseY, 0.5), uMouseStrength, 0.3),
+    )
+
+    const warpCoarse1 = simplexNoise2D(add(mul(uvCoord, 1.5), t))
+    const warpCoarse2 = simplexNoise2D(add(mul(uvCoord, 1.5), mul(t, -0.5), 7.0))
+    const warpedUV1 = add(uvCoord, mul(vec2(warpCoarse1, warpCoarse2), 0.25), mouseOffset)
+
+    const warpMed1 = simplexNoise2D(add(mul(warpedUV1, 3.0), mul(t, 0.7)))
+    const warpMed2 = simplexNoise2D(add(mul(warpedUV1, 3.0), mul(t, -0.3), 15.0))
+    const warpedUV2 = add(warpedUV1, mul(vec2(warpMed1, warpMed2), 0.12))
+
+    const warpFine1 = simplexNoise2D(add(mul(warpedUV2, 5.0), mul(t, 1.2)))
+    const warpFine2 = simplexNoise2D(add(mul(warpedUV2, 5.0), mul(t, -0.8), 25.0))
+    const warpedUV = add(warpedUV2, mul(vec2(warpFine1, warpFine2), 0.05))
+
+    const n1 = fbm2D(warpedUV, { octaves: 5, frequency: 2.0 }).mul(0.5).add(0.5)
+    const n2 = ridgedFbm2d(warpedUV, { octaves: 4, frequency: 1.5 })
+
+    let colorNode = mix(colors.color1, colors.color2, n1)
+    colorNode = mix(colorNode, colors.color3, mul(n2, 0.5))
+
+    const iridescence = mix(colors.color3, colors.color4, add(mul(n1, 0.6), mul(n2, 0.4)))
+    colorNode = mix(colorNode, iridescence, 0.3)
+    colorNode = mix(colorNode, colors.color4, mul(smoothstep(0.6, 0.9, n2), 0.25))
+
+    const brightness = add(0.85, mul(0.15, sin(add(mul(n1, 6.28), t))))
+    colorNode = mul(colorNode, brightness, uIntensity)
+
+    const dist = length(sub(uvCoord, 0.5))
+    colorNode = mul(colorNode, sub(1.0, mul(dist, 0.3)))
+
+    return colorNode
+  })()
+}
+
+export function createThemeAuroraColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.2)
+    const uvCoord = uv()
+
+    const mouseOffset = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength),
+      mul(sub(uMouseY, 0.5), uMouseStrength),
+    )
+
+    const curtainCoord = add(
+      vec2(mul(uvCoord.x, 3.0), mul(uvCoord.y, 0.5)),
+      vec2(t, mul(t, 0.3)),
+      mouseOffset,
+    )
+
+    const curtain1 = simplexNoise2D(curtainCoord).mul(0.5).add(0.5)
+    const curtain2 = simplexNoise2D(add(mul(curtainCoord, 1.5), vec2(mul(t, -0.2), 5.0))).mul(0.5).add(0.5)
+    const curtain3 = simplexNoise2D(add(mul(curtainCoord, 0.7), vec2(mul(t, 0.4), 12.0))).mul(0.5).add(0.5)
+    const detail = fbm2D(curtainCoord, { octaves: 4, frequency: 2.0 }).mul(0.5).add(0.5)
+    const curtain = mul(add(mul(curtain1, 0.4), mul(curtain2, 0.25), mul(curtain3, 0.2), mul(detail, 0.15)), 1.0)
+
+    const fade = mul(pow(sub(1.0, uvCoord.y), 1.2), smoothstep(0.0, 0.3, uvCoord.y))
+    const aurora = mul(smoothstep(0.2, 0.8, mul(curtain, fade)), uIntensity)
+
+    const shimmer = simplexNoise2D(add(mul(curtainCoord, 8.0), mul(t, 3.0))).mul(0.5).add(0.5)
+
+    const colorDriver = add(mul(curtain2, 0.6), mul(curtain3, 0.4))
+    const auroraColor = mix(colors.color1, colors.color2, colorDriver)
+
+    const skyColor = mul(colors.color1, 0.04)
+    const shimmerColor = mul(colors.color3, mul(shimmer, mul(aurora, 0.15)))
+
+    return add(mix(skyColor, auroraColor, aurora), shimmerColor)
+  })()
+}
+
 export function createOceanColorNode(uniforms: AmbientUniforms): any {
   const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
 

package/layers/shader/app/composables/useThemeColors.ts

@@ -0,0 +1,43 @@
+import { parseOKLCH, oklchToColor } from '../utils/tsl/oklch'
+
+export function useThemeColors() {
+  const { activeAccent } = useAccentColor()
+  const colorMode = useColorMode()
+
+  const primaryHex = ref('#8b5cf6')
+  const secondaryHex = ref('#6366f1')
+  const infoHex = ref('#38bdf8')
+  const primaryLightHex = ref('#a78bfa')
+
+  const clearColor = computed(() =>
+    colorMode.value === 'dark' ? '#0a0a0a' : '#f8f8f8'
+  )
+
+  function cssVarToHex(varName: string): string {
+    const raw = getComputedStyle(document.documentElement)
+      .getPropertyValue(varName).trim()
+    try {
+      const [l, c, h] = parseOKLCH(raw)
+      return `#${oklchToColor(l, c, h).getHexString()}`
+    } catch {
+      return '#888888'
+    }
+  }
+
+  function refresh() {
+    nextTick(() => {
+      const isDark = colorMode.value === 'dark'
+      primaryHex.value      = cssVarToHex(isDark ? '--ui-color-primary-500'   : '--ui-color-primary-600')
+      secondaryHex.value    = cssVarToHex(isDark ? '--ui-color-secondary-500' : '--ui-color-secondary-700')
+      primaryLightHex.value = cssVarToHex(isDark ? '--ui-color-primary-300'   : '--ui-color-primary-400')
+      infoHex.value         = cssVarToHex(isDark ? '--ui-color-info-500'      : '--ui-color-info-600')
+    })
+  }
+
+  if (import.meta.client) {
+    watch(activeAccent, refresh, { immediate: true })
+    watch(() => colorMode.value, refresh)
+  }
+
+  return { primaryHex, secondaryHex, infoHex, primaryLightHex, clearColor, refresh }
+}

package/layers/shader/app/utils/tsl/oklch.ts

@@ -23,15 +23,21 @@ export function oklchToLinearSRGB(l: TSLNode, c: TSLNode, h: TSLNode): TSLNode {
   // OKLab -> linear sRGB (approximate matrix transform)
   const l_ = l.add(mul(a, float(0.3963377774))).add(mul(b, float(0.2158037573)))
   const m_ = l.sub(mul(a, float(0.1055613458))).sub(mul(b, float(0.0638541728)))
-  const s_ = l.sub(mul(a, float(0.0894841775))).sub(mul(b, float(1.2914855480)))
+  const s_ = l.sub(mul(a, float(0.0894841775))).sub(mul(b, float(1.291485548)))
 
   const lCubed = pow(l_, 3)
   const mCubed = pow(m_, 3)
   const sCubed = pow(s_, 3)
 
-  const r = mul(lCubed, float(4.0767416621)).sub(mul(mCubed, float(3.3077115913))).add(mul(sCubed, float(0.2309699292)))
-  const g = mul(lCubed, float(-1.2684380046)).add(mul(mCubed, float(2.6097574011))).sub(mul(sCubed, float(0.3413193965)))
-  const bOut = mul(lCubed, float(-0.0041960863)).sub(mul(mCubed, float(0.7034186147))).add(mul(sCubed, float(1.7076147010)))
+  const r = mul(lCubed, float(4.0767416621))
+    .sub(mul(mCubed, float(3.3077115913)))
+    .add(mul(sCubed, float(0.2309699292)))
+  const g = mul(lCubed, float(-1.2684380046))
+    .add(mul(mCubed, float(2.6097574011)))
+    .sub(mul(sCubed, float(0.3413193965)))
+  const bOut = mul(lCubed, float(-0.0041960863))
+    .sub(mul(mCubed, float(0.7034186147)))
+    .add(mul(sCubed, float(1.707614701)))
 
   return vec3(r, g, bOut)
 }
@@ -70,7 +76,7 @@ export function oklchToColor(l: number, c: number, h: number): Color {
   // OKLab to linear sRGB (approximate)
   const l_ = l + a * 0.3963377774 + b * 0.2158037573
   const m_ = l - a * 0.1055613458 - b * 0.0638541728
-  const s_ = l - a * 0.0894841775 - b * 1.2914855480
+  const s_ = l - a * 0.0894841775 - b * 1.291485548
 
   const lCubed = l_ * l_ * l_
   const mCubed = m_ * m_ * m_
@@ -78,7 +84,7 @@ export function oklchToColor(l: number, c: number, h: number): Color {
 
   const r = lCubed * 4.0767416621 - mCubed * 3.3077115913 + sCubed * 0.2309699292
   const g = lCubed * -1.2684380046 + mCubed * 2.6097574011 - sCubed * 0.3413193965
-  const bOut = lCubed * -0.0041960863 - mCubed * 0.7034186147 + sCubed * 1.7076147010
+  const bOut = lCubed * -0.0041960863 - mCubed * 0.7034186147 + sCubed * 1.707614701
 
   // Clamp to [0,1]
   const color = new Color()

package/layers/theme/app/assets/css/theme.css

@@ -1,47 +1,52 @@
 /*
  * Theme Layer CSS
  *
- * Accent colors are handled via appConfig.ui.colors.primary at runtime.
- * The [data-theme] attribute provides a CSS hook for custom styling.
- * Preference classes are applied to <html> by useThemePreferences.
+ * Accessibility attributes are applied to <html> by the individual composables.
+ * The dark mode @custom-variant lives in core/main.css so it is defined in the
+ * same Tailwind pass as all utility generation (avoids HMR regeneration shift).
  */
 
 /* --- Reduced Motion --- */
-.reduce-motion *,
-.reduce-motion *::before,
-.reduce-motion *::after {
+[data-theme-motion="reduced"] *,
+[data-theme-motion="reduced"] *::before,
+[data-theme-motion="reduced"] *::after {
   animation-duration: 0.01ms !important;
   animation-iteration-count: 1 !important;
   transition-duration: 0.01ms !important;
   scroll-behavior: auto !important;
 }
 
+[data-theme-motion="reduced"] {
+  --duration-base: 0ms;
+}
+
 /* --- Reduced Transparency --- */
-/* Replace semi-transparent backgrounds with solid equivalents */
-.reduce-transparency {
+[data-theme-transparency="reduced"] {
   --ui-bg-elevated: var(--ui-bg);
+  --opacity-glass: 1;
+  --backdrop-blur: 0px;
 }
 
-.reduce-transparency :where([class*='backdrop-blur']) {
+[data-theme-transparency="reduced"] :where([class*='backdrop-blur']) {
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
 }
 
-.reduce-transparency :where([class*='bg-default/'], [class*='bg-elevated/']) {
+[data-theme-transparency="reduced"] :where([class*='bg-default/'], [class*='bg-elevated/']) {
   background-color: var(--ui-bg-elevated) !important;
 }
 
 /* --- High Contrast --- */
-.high-contrast {
+[data-theme-contrast="high"] {
   --ui-border: var(--ui-border-accented);
 }
 
-.high-contrast :where(button, a, [role='button']) {
+[data-theme-contrast="high"] :where(button, a, [role='button']) {
   outline-width: 2px;
 }
 
-.high-contrast .text-muted,
-.high-contrast .text-dimmed {
+[data-theme-contrast="high"] .text-muted,
+[data-theme-contrast="high"] .text-dimmed {
   opacity: 1;
   filter: contrast(1.25);
 }

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>