kmcom-nuxt-layers 5.0.8 → 6.1.0

package/layers/design-system/typography/app/components/Typography/Headline.test.ts

@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vite-plus/test'
+
+import Headline from './Headline.vue'
+
+const render = (props: Record<string, unknown>) =>
+  mount(Headline, { props, slots: { default: 'Title' } })
+const classesOf = (props: Record<string, unknown>) => render(props).classes()
+const styleOf = (props: Record<string, unknown>) => render(props).attributes('style') ?? ''
+
+describe('Headline step', () => {
+  it('steps each level down from the display step by default', () => {
+    expect(styleOf({ level: 1 })).toContain('--step: var(--step-display)')
+    expect(styleOf({ level: 2 })).toContain('--step: calc(var(--step-display) - 1)')
+    expect(styleOf({ level: 6 })).toContain('--step: calc(var(--step-display) - 5)')
+    expect(classesOf({ level: 2 }).filter((c) => c.startsWith('text-step-'))).toEqual([])
+  })
+
+  it('drops the default step when an explicit size is given', () => {
+    const wrapper = render({ level: 2, size: 'sm' })
+    expect(wrapper.classes()).toContain('text-sm')
+    expect(wrapper.attributes('style') ?? '').not.toContain('--step')
+  })
+
+  it('leaves line height to the step unless leading is given', () => {
+    expect(classesOf({ level: 2 }).filter((c) => c.startsWith('leading-'))).toEqual([])
+    expect(classesOf({ level: 2, leading: 'leading-tight' })).toContain('leading-tight')
+  })
+
+  it('lets an explicit step win over size and the default', () => {
+    const wrapper = render({ level: 2, size: 'sm', step: 5 })
+    expect(wrapper.classes()).toContain('text-step-5')
+    expect(wrapper.classes()).not.toContain('text-sm')
+    expect(wrapper.attributes('style') ?? '').not.toContain('--step')
+  })
+})

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

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+  // Explicit import so Headline mounts under vitest's 'vue' project (no Nuxt auto-imports)
+  // — same exemption as ElementTw.vue (eslint.config.mjs).
+  import { computed } from 'vue'
+
   import { useColor } from '../../composables/color'
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
   import type {
-    FluidFontSize,
     FontFamily,
     FontLeading,
     FontSize,
@@ -13,6 +16,7 @@
     FontWidth,
     TextAlign,
     TextTransform,
+    TypeStep,
   } from '../../types/typography'
 
   const {
@@ -20,13 +24,13 @@
     weight = 'font-bold',
     width = 'font-stretch-normal',
     slant = 'normal',
-    leading = 'leading-tight',
+    leading = undefined,
     tracking = 'tracking-tight',
     align = 'left',
     transform = 'none',
     color = undefined,
     size = undefined,
-    fluidSize = undefined,
+    step = undefined,
     font = undefined,
   } = defineProps<{
     level?: 1 | 2 | 3 | 4 | 5 | 6
@@ -39,43 +43,38 @@
     transform?: TextTransform
     color?: UiColors
     size?: FontSize
-    fluidSize?: FluidFontSize
+    step?: TypeStep
     font?: FontFamily
   }>()
   const tag = computed(() => `h${level}` as const)
 
-  // Fluid by default (continuous scaling, no mobile-first breakpoint step) —
-  // only used when the caller passes neither `size` nor `fluidSize`.
-  const defaultFluidSizes: Record<number, FluidFontSize> = {
-    1: '6xl',
-    2: '5xl',
-    3: '4xl',
-    4: '3xl',
-    5: 'xl',
-    6: 'lg',
-  }
-
-  const appliedFluidSize = computed(() =>
-    size !== undefined ? undefined : (fluidSize ?? defaultFluidSizes[level])
-  )
+  // Display hierarchy by default: each level sits one scale step below the previous, starting
+  // at the fluid display step, so every level stays fluid (h1 51 → 97px, h2 40 → 77px …). Set as
+  // --step rather than a class so typography.css's h1–h6 base rules size it. Only when neither
+  // `step` nor `size` is passed; an explicit step beats size.
+  const defaultStepStyle = computed(() => {
+    if (step !== undefined || size !== undefined) return undefined
+    const below = level - 1
+    return { '--step': below ? `calc(var(--step-display) - ${below})` : 'var(--step-display)' }
+  })
 
   const { classes } = useTypography(() => ({
     weight,
     width,
     slant,
-    leading,
+    ...(leading !== undefined && { leading }),
     tracking,
     align,
     transform,
     ...(font !== undefined && { font }),
     ...(size !== undefined && { size }),
-    ...(appliedFluidSize.value !== undefined && { fluidSize: appliedFluidSize.value }),
+    ...(step !== undefined && { step }),
   }))
-  const colorClass = useColor(color, 'text')
+  const colorClass = useColor(() => color, 'text')
 </script>
 
 <template>
-  <component :is="tag" :class="[classes, colorClass]">
+  <component :is="tag" :class="[classes, colorClass]" :style="defaultStepStyle">
     <slot />
   </component>
 </template>

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

@@ -3,7 +3,6 @@
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
   import type {
-    FluidFontSize,
     FontFamily,
     FontLeading,
     FontSize,
@@ -13,6 +12,7 @@
     FontWidth,
     TextAlign,
     TextTransform,
+    TypeStep,
   } from '../../types/typography'
 
   const {
@@ -25,7 +25,7 @@
     transform = 'none',
     color = undefined,
     size = undefined,
-    fluidSize = undefined,
+    step = undefined,
     font = undefined,
   } = defineProps<{
     weight?: FontWeight
@@ -37,7 +37,7 @@
     transform?: TextTransform
     color?: UiColors
     size?: FontSize
-    fluidSize?: FluidFontSize
+    step?: TypeStep
     font?: FontFamily
   }>()
   const { classes } = useTypography(() => ({
@@ -50,9 +50,9 @@
     transform,
     ...(font !== undefined && { font }),
     ...(size !== undefined && { size }),
-    ...(fluidSize !== undefined && { fluidSize }),
+    ...(step !== undefined && { step }),
   }))
-  const colorClass = useColor(color, 'text')
+  const colorClass = useColor(() => color, 'text')
 </script>
 
 <template>

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

@@ -3,7 +3,7 @@
   import { useRepeatFill } from '../../composables/repeatFill'
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
-  import type { FluidFontSize, FontWeight, TypographyTag } from '../../types/typography'
+  import type { FontWeight, TypeStep, TypographyTag } from '../../types/typography'
 
   const {
     rows = 1,
@@ -12,7 +12,7 @@
     repeat = 'auto',
     separator = '',
     weight = undefined,
-    size = '4xl',
+    step = 7,
     color = undefined,
     offset = [],
     letterSpacing = undefined,
@@ -28,7 +28,7 @@
     repeat?: number | 'auto'
     separator?: string
     weight?: FontWeight | FontWeight[]
-    size?: FluidFontSize | FluidFontSize[]
+    step?: TypeStep | TypeStep[]
     color?: UiColors | UiColors[]
     offset?: string[]
     letterSpacing?: string | string[]
@@ -49,7 +49,7 @@
 
   const rowText = (i: number) => pick(text, i) ?? ''
   const rowWeight = (i: number) => pick(weight, i)
-  const rowSize = (i: number) => pick(size, i)
+  const rowStep = (i: number) => pick(step, i)
   const rowColor = (i: number) => pick(color, i)
   const rowOffset = (i: number) => offset[i] ?? '0'
   const rowLetterSpacing = (i: number) => pick(letterSpacing, i)
@@ -58,10 +58,11 @@
   const rowClasses = computed(() =>
     Array.from({ length: rows }, (_, i) => {
       const weight = rowWeight(i)
-      const fluidSize = rowSize(i)
+      const step = rowStep(i)
       return useTypography({
+        leading: 'leading-normal',
         ...(weight !== undefined && { weight }),
-        ...(fluidSize !== undefined && { fluidSize }),
+        ...(step !== undefined && { step }),
       }).classes.value
     })
   )

package/layers/design-system/typography/app/components/Typography/index.test.ts

@@ -0,0 +1,31 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vite-plus/test'
+
+import ElementTw from '#layers/core/app/components/ElementTw.vue'
+
+import Typography from './index.vue'
+
+const classesOf = (props: Record<string, unknown> = {}) =>
+  mount(Typography, {
+    props,
+    slots: { default: 'Body copy' },
+    global: { components: { ElementTw } },
+  }).classes()
+
+describe('Typography size', () => {
+  it('inherits the surrounding size by default instead of pinning text-base', () => {
+    expect(classesOf()).not.toContain('text-base')
+  })
+
+  it('inherits the body line height by default', () => {
+    expect(classesOf().filter((c) => c.startsWith('leading-'))).toEqual([])
+  })
+
+  it('still applies an explicit size', () => {
+    expect(classesOf({ size: 'lg' })).toContain('text-lg')
+  })
+
+  it('applies an explicit step', () => {
+    expect(classesOf({ step: 1 })).toContain('text-step-1')
+  })
+})

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

@@ -3,7 +3,6 @@
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
   import type {
-    FluidFontSize,
     FontFamily,
     FontLeading,
     FontSize,
@@ -13,6 +12,7 @@
     FontWidth,
     TextAlign,
     TextTransform,
+    TypeStep,
     TypographyTag,
   } from '../../types/typography'
 
@@ -21,13 +21,15 @@
     weight = 'font-normal',
     width = 'font-stretch-normal',
     slant = 'normal',
-    leading = 'leading-normal',
+    leading = undefined,
     tracking = 'tracking-normal',
     align = 'left',
     transform = 'none',
     color = undefined,
-    size = 'base',
-    fluidSize = undefined,
+    // No default size: body copy inherits the body step (20 → 24px) rather than pinning
+    // Tailwind's 16px text-base inside it.
+    size = undefined,
+    step = undefined,
     font = undefined,
   } = defineProps<{
     tag?: TypographyTag
@@ -40,22 +42,22 @@
     transform?: TextTransform
     color?: UiColors
     size?: FontSize
-    fluidSize?: FluidFontSize
+    step?: TypeStep
     font?: FontFamily
   }>()
   const { classes } = useTypography(() => ({
     weight,
     width,
     slant,
-    leading,
+    ...(leading !== undefined && { leading }),
     tracking,
     align,
     transform,
-    size,
+    ...(size !== undefined && { size }),
     ...(font !== undefined && { font }),
-    ...(fluidSize !== undefined && { fluidSize }),
+    ...(step !== undefined && { step }),
   }))
-  const colorClass = useColor(color, 'text')
+  const colorClass = useColor(() => color, 'text')
 </script>
 
 <template>

package/layers/design-system/typography/app/composables/color.test.ts

@@ -0,0 +1,30 @@
+import { ref } from 'vue'
+import { describe, expect, it } from 'vite-plus/test'
+
+import { useColor } from './color'
+
+describe('useColor', () => {
+  it('builds a class from a plain value', () => {
+    expect(useColor('primary', 'text').value).toBe('text-primary')
+  })
+
+  it('falls back to default when color is undefined', () => {
+    expect(useColor(undefined, 'bg').value).toBe('bg-default')
+  })
+
+  it('tracks a ref', () => {
+    const color = ref<'primary' | 'error'>('primary')
+    const cls = useColor(color)
+    color.value = 'error'
+    expect(cls.value).toBe('text-error')
+  })
+
+  it('tracks a getter', () => {
+    let color: 'primary' | 'error' = 'primary'
+    const state = ref(0)
+    const cls = useColor(() => (state.value, color))
+    color = 'error'
+    state.value++
+    expect(cls.value).toBe('text-error')
+  })
+})

package/layers/design-system/typography/app/composables/color.ts

@@ -1,5 +1,12 @@
+import { computed, toValue, type MaybeRefOrGetter } from 'vue'
+
 import type { ColorUsage, UiColors } from '../types/colors'
 
-export function useColor(color?: UiColors, type: ColorUsage = 'text') {
-  return computed(() => `${type}-${color ?? 'default'}`)
+// Takes a getter (`() => color`) when `color` is a destructured prop — passing the bare
+// value reads it once at setup and the class never updates.
+export function useColor(
+  color?: MaybeRefOrGetter<UiColors | undefined>,
+  type: ColorUsage = 'text'
+) {
+  return computed(() => `${type}-${toValue(color) ?? 'default'}`)
 }

package/layers/design-system/typography/app/composables/typography.test.ts

@@ -0,0 +1,53 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vite-plus/test'
+
+import { TYPE_STEP_CLASSES, useTypography } from './typography'
+
+// Tailwind only emits a class that appears literally in source AND has an @utility — a map
+// entry without a utility renders unstyled, a utility without an entry is unreachable from the
+// components. Both fail silently, so pin the two lists to each other.
+const css = readFileSync(new URL('../assets/css/typography.css', import.meta.url), 'utf8')
+const utilities = [...css.matchAll(/@utility\s+(text-step-[\w-]+)/g)].map(([, name]) => name)
+const mapped = Object.values(TYPE_STEP_CLASSES)
+
+describe('TYPE_STEP_CLASSES ↔ typography.css', () => {
+  it('has an @utility for every mapped class', () => {
+    for (const cls of mapped) expect(utilities).toContain(cls)
+  })
+
+  it('maps every text-step @utility', () => {
+    for (const name of utilities) expect(mapped).toContain(name)
+  })
+
+  it('names each class after its step', () => {
+    for (const [step, cls] of Object.entries(TYPE_STEP_CLASSES)) {
+      expect(cls).toBe(`text-step-${step}`)
+    }
+  })
+})
+
+describe('useTypography step', () => {
+  const classesOf = (props: Parameters<typeof useTypography>[0]) =>
+    useTypography(props).classes.value.split(' ')
+
+  it('emits step 0 rather than treating it as unset', () => {
+    expect(classesOf({ step: 0 })).toContain('text-step-0')
+  })
+
+  it('wins over size instead of emitting two font sizes', () => {
+    const classes = classesOf({ step: 3, size: 'sm' })
+    expect(classes).toContain('text-step-3')
+    expect(classes).not.toContain('text-sm')
+  })
+
+  it('falls back to size when no step is given', () => {
+    expect(classesOf({ size: 'sm' })).toContain('text-sm')
+  })
+
+  // A leading-* class sorts after text-step-* and would override the step's line height.
+  it('emits no leading class unless one is given', () => {
+    expect(classesOf({ step: 3 }).filter((c) => c.startsWith('leading-'))).toEqual([])
+    expect(classesOf({ step: 3, leading: 'leading-tight' })).toContain('leading-tight')
+  })
+})

package/layers/design-system/typography/app/composables/typography.ts

@@ -1,7 +1,6 @@
-import { toValue, type MaybeRefOrGetter } from 'vue'
+import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 
 import type {
-  FluidFontSize,
   FontFamily,
   FontLeading,
   FontSize,
@@ -11,6 +10,7 @@ import type {
   FontWidth,
   TextAlign,
   TextTransform,
+  TypeStep,
 } from '../types/typography'
 
 type AxisValue = string | number | undefined
@@ -36,39 +36,25 @@ function getSizeClass(size: FontSize | undefined): string {
 }
 
 // Literal map, not template-literal interpolation — Tailwind's content scanner
-// looks for complete class-name strings in source, so `text-fluid-${x}` is
-// invisible to it and silently drops the utility.
-const FLUID_SIZE_CLASSES: Record<FluidFontSize, string> = {
-  xs: 'text-fluid-xs',
-  sm: 'text-fluid-sm',
-  md: 'text-fluid-md',
-  lg: 'text-fluid-lg',
-  xl: 'text-fluid-xl',
-  '2xl': 'text-fluid-2xl',
-  '3xl': 'text-fluid-3xl',
-  '4xl': 'text-fluid-4xl',
-  '5xl': 'text-fluid-5xl',
-  '6xl': 'text-fluid-6xl',
-  '7xl': 'text-fluid-7xl',
-  '8xl': 'text-fluid-8xl',
-  '9xl': 'text-fluid-9xl',
-  'xs-cq': 'text-fluid-xs-cq',
-  'sm-cq': 'text-fluid-sm-cq',
-  'md-cq': 'text-fluid-md-cq',
-  'lg-cq': 'text-fluid-lg-cq',
-  'xl-cq': 'text-fluid-xl-cq',
-  '2xl-cq': 'text-fluid-2xl-cq',
-  '3xl-cq': 'text-fluid-3xl-cq',
-  '4xl-cq': 'text-fluid-4xl-cq',
-  '5xl-cq': 'text-fluid-5xl-cq',
-  '6xl-cq': 'text-fluid-6xl-cq',
-  '7xl-cq': 'text-fluid-7xl-cq',
-  '8xl-cq': 'text-fluid-8xl-cq',
-  '9xl-cq': 'text-fluid-9xl-cq',
-}
-
-function getFluidSizeClass(fluidSize: FluidFontSize | undefined): string {
-  return fluidSize ? FLUID_SIZE_CLASSES[fluidSize] : ''
+// looks for complete class-name strings in source, so `text-step-${x}` is
+// invisible to it and silently drops the utility. Kept in sync with
+// typography.css's @utility list by typography.test.ts.
+export const TYPE_STEP_CLASSES: Record<TypeStep, string> = {
+  sm: 'text-step-sm',
+  0: 'text-step-0',
+  1: 'text-step-1',
+  2: 'text-step-2',
+  3: 'text-step-3',
+  4: 'text-step-4',
+  5: 'text-step-5',
+  6: 'text-step-6',
+  7: 'text-step-7',
+  8: 'text-step-8',
+  9: 'text-step-9',
+  10: 'text-step-10',
+  11: 'text-step-11',
+  12: 'text-step-12',
+  display: 'text-step-display',
 }
 
 export function useTypography(
@@ -81,7 +67,7 @@ export function useTypography(
     align?: TextAlign
     transform?: TextTransform
     size?: FontSize
-    fluidSize?: FluidFontSize
+    step?: TypeStep
     font?: FontFamily
   }>
 ) {
@@ -103,20 +89,19 @@ export function useTypography(
         fallback: 'not-italic',
       }),
 
-      normalizeAxis(p.leading, {
-        prefix: 'leading',
-        fallback: 'leading-normal',
-      }),
+      // No fallback: a leading-* class sorts after text-step-* and would override the step's
+      // line height, so only emit one when asked.
+      normalizeAxis(p.leading, { prefix: 'leading' }),
 
       normalizeAxis(p.tracking, {
         prefix: 'tracking',
         fallback: 'tracking-normal',
       }),
 
-      // fluidSize is the parallel, opt-in namespace (see typography.css) — takes
+      // step is the parallel modular-scale namespace (see typography.css) — takes
       // precedence over size when both are set, rather than emitting two
-      // conflicting font-size utilities.
-      p.fluidSize ? getFluidSizeClass(p.fluidSize) : getSizeClass(p.size),
+      // conflicting font-size utilities. Checked against undefined: step 0 is valid.
+      p.step !== undefined ? TYPE_STEP_CLASSES[p.step] : getSizeClass(p.size),
 
       p.align ? `text-${p.align}` : '',
 

package/layers/design-system/typography/app/types/typography.ts

@@ -61,40 +61,13 @@ export type FontSize =
   | number
 
 /* ======================================================
-   Fluid Font Size
-   - Stepped clamp() scale, parallel to Tailwind's --text-*
-   - Companion to text-fluid-* utilities (typography.css)
+   Type Step
+   - Step on the modular scale: base × 1.26^step, parallel to Tailwind's --text-*
+   - Companion to text-step-* utilities (typography.css)
+   - 'sm' is step −1; 'display' is fluid, 5 → 7 with viewport width
    ====================================================== */
 
-export type FluidFontSize =
-  | 'xs'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | '3xl'
-  | '4xl'
-  | '5xl'
-  | '6xl'
-  | '7xl'
-  | '8xl'
-  | '9xl'
-  // Container-relative (cqi) variants — require a `container-type` ancestor
-  // (e.g. `@container`), otherwise cqi resolves against the small viewport.
-  | 'xs-cq'
-  | 'sm-cq'
-  | 'md-cq'
-  | 'lg-cq'
-  | 'xl-cq'
-  | '2xl-cq'
-  | '3xl-cq'
-  | '4xl-cq'
-  | '5xl-cq'
-  | '6xl-cq'
-  | '7xl-cq'
-  | '8xl-cq'
-  | '9xl-cq'
+export type TypeStep = 'sm' | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'display'
 
 /* ======================================================
    Font Width

package/layers/design-system/visual/app/composables/tint.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vite-plus/test'
+
+import { useTint } from './tint'
+
+describe('useTint', () => {
+  it('resolves a slot to its ui color token with the level opacity', () => {
+    expect(useTint({ color: 'primary', level: 'light' }).style.value).toEqual({
+      backgroundColor: 'var(--ui-color-primary-500)',
+      opacity: 0.1,
+    })
+  })
+
+  it('honours shade and the white/black literals', () => {
+    expect(
+      useTint({ color: 'error', shade: 200, level: 'subtle' }).style.value.backgroundColor
+    ).toBe('var(--ui-color-error-200)')
+    expect(useTint({ color: 'white', level: 'heavy' }).style.value).toEqual({
+      backgroundColor: '#ffffff',
+      opacity: 0.5,
+    })
+  })
+})

package/layers/design-system/visual/app/composables/tint.ts

@@ -1,18 +1,17 @@
-import { toValue, type ComputedRef, type CSSProperties, type MaybeRefOrGetter } from 'vue'
+import { computed, toValue, type ComputedRef, type CSSProperties, type MaybeRefOrGetter } from 'vue'
 
 import { TINT_LEVEL_OPACITY, type TintConfig } from '../types/tint'
+import { resolveUiColorToken } from '../utils/colorTokens'
 
 export function useTint(config: MaybeRefOrGetter<TintConfig>): {
   style: ComputedRef<CSSProperties>
 } {
   const style = computed((): CSSProperties => {
     const { color, shade = 500, level } = toValue(config)
-    let backgroundColor = `var(--ui-color-${color}-${shade})`
-    if (color === 'white') backgroundColor = '#ffffff'
-    if (color === 'black') backgroundColor = '#000000'
-
-    const opacity = TINT_LEVEL_OPACITY[level] / 100
-    return { backgroundColor, opacity }
+    return {
+      backgroundColor: resolveUiColorToken({ color, shade }),
+      opacity: TINT_LEVEL_OPACITY[level] / 100,
+    }
   })
 
   return { style }

package/layers/render/shader/nuxt.config.ts

@@ -5,7 +5,7 @@ export default defineNuxtConfig({
 
   compatibilityDate: '2025-07-15',
 
-  extends: ['../canvas'],
+  extends: ['../canvas', '../../design-system/theming'],
 
   typescript: {
     typeCheck: false,