kmcom-nuxt-layers 2.6.2 → 2.7.0

package/layers/typography/app/assets/css/typography.css

@@ -0,0 +1,313 @@
+/*
+ * Loaded as its own global stylesheet (see layers/typography/nuxt.config.ts
+ * `css:` array), not @import-chained through core.css's Tailwind root — so
+ * @utility below is invisible to Tailwind unless this file is its own build
+ * root. theme+utilities only (no preflight) to avoid double-emitting the
+ * reset core.css already provides.
+ */
+@import 'tailwindcss/theme' layer(theme);
+@import 'tailwindcss/utilities' layer(utilities);
+
+@source '../../../../*/app/**/*.{vue,ts}';
+@source '../../../../../apps/*/app/**/*.{vue,ts}';
+
+:root {
+  /* Fluid type scale — rounding interval. rem, never px (see §5 a11y). */
+  --fluid-step: 0.25rem;
+
+  /* Unrounded fluid ranges. Endpoints MUST be integer multiples of --fluid-step. */
+  --fluid-text-xs-raw: clamp(0.5rem, 0.475rem + 0.1vi, 0.75rem);
+  --fluid-text-sm-raw: clamp(0.75rem, 0.7rem + 0.15vi, 1rem);
+  --fluid-text-md-raw: clamp(1rem, 0.9375rem + 0.35vi, 1.25rem);
+  --fluid-text-lg-raw: clamp(1.25rem, 1.125rem + 0.75vi, 1.75rem);
+  --fluid-text-xl-raw: clamp(1.5rem, 1.25rem + 1.5vi, 2.5rem);
+  --fluid-text-2xl-raw: clamp(2rem, 1.5rem + 2.5vi, 3.5rem);
+  --fluid-text-3xl-raw: clamp(2.5rem, 1.75rem + 4vi, 5rem);
+  --fluid-text-4xl-raw: clamp(3rem, 2rem + 5vi, 6rem);
+  --fluid-text-5xl-raw: clamp(3.75rem, 2.5rem + 6.5vi, 7.5rem);
+  --fluid-text-6xl-raw: clamp(4.5rem, 3rem + 8vi, 9rem);
+  --fluid-text-7xl-raw: clamp(5.5rem, 3.5rem + 10vi, 11rem);
+  --fluid-text-8xl-raw: clamp(6.75rem, 4rem + 14vi, 13.5rem);
+  --fluid-text-9xl-raw: clamp(8rem, 4.5rem + 20vi, 16rem);
+
+  /* Damp heading growth under large OS text-scale prefs (>100%) so words
+     don't break to one-per-line. Root font-size (rem) already scales by
+     env(preferred-text-scale); this backs that out then re-applies it at
+     half rate. No-op at 100% scale or without support (env() undefined → 1). */
+  --heading-text-scale-damp: calc(1 + (env(preferred-text-scale, 1) - 1) * 0.5);
+
+  /* Container-relative counterparts — same rem endpoints, cqi instead of vi.
+     Require a `container-type` ancestor (e.g. `@container`); with none, cqi
+     falls back to the small viewport per spec, so these are opt-in, not a
+     replacement for the vi-based scale above. */
+  /* Coefficients retuned vs the vi scale (not a straight port): small steps'
+     min→max diff is only 0.25-0.5rem (1-2 --fluid-step increments), so vi's
+     slope needs 250+rem of container width to cross even one rounding step —
+     reads as frozen. Retuned so the full min→max transition happens between
+     an 8rem and 24rem container (the actual draggable range in practice). */
+  --fluid-text-xs-cq-raw: clamp(0.5rem, 0.375rem + 1.5625cqi, 0.75rem);
+  --fluid-text-sm-cq-raw: clamp(0.75rem, 0.625rem + 1.5625cqi, 1rem);
+  --fluid-text-md-cq-raw: clamp(1rem, 0.875rem + 1.5625cqi, 1.25rem);
+  --fluid-text-lg-cq-raw: clamp(1.25rem, 1rem + 3.125cqi, 1.75rem);
+  --fluid-text-xl-cq-raw: clamp(1.5rem, 1.25rem + 1.5cqi, 2.5rem);
+  --fluid-text-2xl-cq-raw: clamp(2rem, 1.5rem + 2.5cqi, 3.5rem);
+  --fluid-text-3xl-cq-raw: clamp(2.5rem, 1.75rem + 4cqi, 5rem);
+  --fluid-text-4xl-cq-raw: clamp(3rem, 2rem + 5cqi, 6rem);
+  --fluid-text-5xl-cq-raw: clamp(3.75rem, 2.5rem + 6.5cqi, 7.5rem);
+  --fluid-text-6xl-cq-raw: clamp(4.5rem, 3rem + 8cqi, 9rem);
+  --fluid-text-7xl-cq-raw: clamp(5.5rem, 3.5rem + 10cqi, 11rem);
+  --fluid-text-8xl-cq-raw: clamp(6.75rem, 4rem + 14cqi, 13.5rem);
+  --fluid-text-9xl-cq-raw: clamp(8rem, 4.5rem + 20cqi, 16rem);
+}
+
+/*
+ * Fluid type utilities, parallel to Tailwind's --text-* namespace.
+ * Do not override --text-xs..--text-9xl — Nuxt UI components consume those.
+ * round() must live in the utility declaration (not a custom property) so
+ * var(--fluid-step) resolves per-element, not frozen at :root.
+ */
+@utility text-fluid-xs {
+  font-size: var(--fluid-text-xs-raw);
+  line-height: 1.5;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-xs-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-sm {
+  font-size: var(--fluid-text-sm-raw);
+  line-height: 1.45;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-sm-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-md {
+  font-size: var(--fluid-text-md-raw);
+  line-height: 1.4;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-md-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-lg {
+  font-size: var(--fluid-text-lg-raw);
+  line-height: 1.25;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-lg-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-xl {
+  font-size: var(--fluid-text-xl-raw);
+  line-height: 1.15;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-xl-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-2xl {
+  font-size: var(--fluid-text-2xl-raw);
+  line-height: 1.1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-2xl-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-3xl {
+  font-size: var(--fluid-text-3xl-raw);
+  line-height: 1.05;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-3xl-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-4xl {
+  font-size: calc(var(--fluid-text-4xl-raw) * var(--heading-text-scale-damp));
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: calc(
+      round(down, var(--fluid-text-4xl-raw), var(--fluid-step)) * var(--heading-text-scale-damp)
+    );
+  }
+}
+
+@utility text-fluid-5xl {
+  font-size: calc(var(--fluid-text-5xl-raw) * var(--heading-text-scale-damp));
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: calc(
+      round(down, var(--fluid-text-5xl-raw), var(--fluid-step)) * var(--heading-text-scale-damp)
+    );
+  }
+}
+
+@utility text-fluid-6xl {
+  font-size: calc(var(--fluid-text-6xl-raw) * var(--heading-text-scale-damp));
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: calc(
+      round(down, var(--fluid-text-6xl-raw), var(--fluid-step)) * var(--heading-text-scale-damp)
+    );
+  }
+}
+
+@utility text-fluid-7xl {
+  font-size: calc(var(--fluid-text-7xl-raw) * var(--heading-text-scale-damp));
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: calc(
+      round(down, var(--fluid-text-7xl-raw), var(--fluid-step)) * var(--heading-text-scale-damp)
+    );
+  }
+}
+
+@utility text-fluid-8xl {
+  font-size: calc(var(--fluid-text-8xl-raw) * var(--heading-text-scale-damp));
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: calc(
+      round(down, var(--fluid-text-8xl-raw), var(--fluid-step)) * var(--heading-text-scale-damp)
+    );
+  }
+}
+
+@utility text-fluid-9xl {
+  font-size: calc(var(--fluid-text-9xl-raw) * var(--heading-text-scale-damp));
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: calc(
+      round(down, var(--fluid-text-9xl-raw), var(--fluid-step)) * var(--heading-text-scale-damp)
+    );
+  }
+}
+
+@utility text-fluid-xs-cq {
+  font-size: var(--fluid-text-xs-cq-raw);
+  line-height: 1.5;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-xs-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-sm-cq {
+  font-size: var(--fluid-text-sm-cq-raw);
+  line-height: 1.45;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-sm-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-md-cq {
+  font-size: var(--fluid-text-md-cq-raw);
+  line-height: 1.4;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-md-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-lg-cq {
+  font-size: var(--fluid-text-lg-cq-raw);
+  line-height: 1.25;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-lg-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-xl-cq {
+  font-size: var(--fluid-text-xl-cq-raw);
+  line-height: 1.15;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-xl-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-2xl-cq {
+  font-size: var(--fluid-text-2xl-cq-raw);
+  line-height: 1.1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-2xl-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-3xl-cq {
+  font-size: var(--fluid-text-3xl-cq-raw);
+  line-height: 1.05;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-3xl-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-4xl-cq {
+  font-size: var(--fluid-text-4xl-cq-raw);
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-4xl-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-5xl-cq {
+  font-size: var(--fluid-text-5xl-cq-raw);
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-5xl-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-6xl-cq {
+  font-size: var(--fluid-text-6xl-cq-raw);
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-6xl-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-7xl-cq {
+  font-size: var(--fluid-text-7xl-cq-raw);
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-7xl-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-8xl-cq {
+  font-size: var(--fluid-text-8xl-cq-raw);
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-8xl-cq-raw), var(--fluid-step));
+  }
+}
+
+@utility text-fluid-9xl-cq {
+  font-size: var(--fluid-text-9xl-cq-raw);
+  line-height: 1;
+
+  @supports (font-size: round(1rem, 1rem)) {
+    font-size: round(down, var(--fluid-text-9xl-cq-raw), var(--fluid-step));
+  }
+}

package/layers/typography/app/components/Typography/Headline.vue

@@ -3,6 +3,7 @@
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
   import type {
+    FluidFontSize,
     FontLeading,
     FontSize,
     FontSlant,
@@ -26,6 +27,7 @@
     transform = 'none',
     color = undefined,
     size = undefined,
+    fluidSize = undefined,
     class: classProp = '',
   } = defineProps<{
     level?: 1 | 2 | 3 | 4 | 5 | 6
@@ -38,23 +40,25 @@
     transform?: TextTransform
     color?: UiColors
     size?: FontSize
+    fluidSize?: FluidFontSize
     class?: string
   }>()
   const tag = computed(() => `h${level}` as const)
 
-  const sizeClass = computed(() => {
-    if (size) return null
+  // 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 sizes: Record<number, string> = {
-      1: 'text-4xl sm:text-5xl',
-      2: 'text-3xl sm:text-4xl',
-      3: 'text-2xl sm:text-3xl',
-      4: 'text-xl sm:text-2xl',
-      5: 'text-lg sm:text-xl',
-      6: 'text-base sm:text-lg',
-    }
-    return sizes[level]
-  })
+  const appliedFluidSize = computed(() =>
+    size !== undefined ? undefined : (fluidSize ?? defaultFluidSizes[level])
+  )
 
   const { classes } = useTypography({
     weight: weight,
@@ -65,6 +69,7 @@
     align: align,
     transform: transform,
     ...(size !== undefined && { size: size }),
+    ...(appliedFluidSize.value !== undefined && { fluidSize: appliedFluidSize.value }),
   })
   const colorClass = useColor(color, 'text')
 </script>
@@ -79,8 +84,12 @@
     :tracking
     :align
     :transform
-    :class="[sizeClass, classes, colorClass, classProp]"
-    v-bind="{ ...(size !== undefined && { size: size }), ...$attrs }"
+    :class="[classes, colorClass, classProp]"
+    v-bind="{
+      ...(size !== undefined && { size: size }),
+      ...(appliedFluidSize !== undefined && { fluidSize: appliedFluidSize }),
+      ...$attrs,
+    }"
   >
     <slot />
   </Typography>

package/layers/typography/app/components/Typography/HeadlineScreen.vue

@@ -3,8 +3,8 @@
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
   import type {
+    FluidFontSize,
     FontLeading,
-    FontScreenSize,
     FontSlant,
     FontTracking,
     FontWeight,
@@ -17,7 +17,7 @@
 
   const {
     level = 1,
-    size = 'screen-xxl',
+    fluidSize = '2xl',
     weight = 'font-bold',
     width = 'font-stretch-normal',
     slant = 'normal',
@@ -29,7 +29,7 @@
     class: classProp = '',
   } = defineProps<{
     level?: 1 | 2 | 3 | 4 | 5 | 6
-    size?: FontScreenSize
+    fluidSize?: FluidFontSize
     weight?: FontWeight
     width?: FontWidth
     slant?: FontSlant
@@ -43,14 +43,6 @@
 
   const tag = computed(() => `h${level}` as const)
 
-  const sizeMap: Record<string, string> = {
-    screen: 'text-screen',
-    'screen-xl': 'text-screen-xl',
-    'screen-xxl': 'text-screen-xxl',
-    'screen-xxxl': 'text-screen-xxxl',
-  }
-  const sizeClass = computed(() => sizeMap[size] ?? 'text-screen-xxl')
-
   const { classes } = useTypography({
     weight: weight,
     width: width,
@@ -59,13 +51,14 @@
     tracking: tracking,
     align: align,
     transform: transform,
+    fluidSize: fluidSize,
   })
 
   const colorClass = useColor(color, 'text')
 </script>
 
 <template>
-  <component :is="tag" :class="[sizeClass, classes, colorClass, classProp]" v-bind="$attrs">
+  <component :is="tag" :class="[classes, colorClass, classProp]" v-bind="$attrs">
     <slot />
   </component>
 </template>

package/layers/typography/app/components/Typography/index.vue

@@ -3,6 +3,7 @@
   import { useTypography } from '../../composables/typography'
   import type { UiColors } from '../../types/colors'
   import type {
+    FluidFontSize,
     FontLeading,
     FontSize,
     FontSlant,
@@ -27,6 +28,7 @@
     transform = 'none',
     color = undefined,
     size = 'base',
+    fluidSize = undefined,
   } = defineProps<{
     tag?: TypographyTag
     weight?: FontWeight
@@ -38,6 +40,7 @@
     transform?: TextTransform
     color?: UiColors
     size?: FontSize
+    fluidSize?: FluidFontSize
   }>()
   const { classes } = useTypography(() => ({
     weight,
@@ -48,6 +51,7 @@
     align,
     transform,
     size,
+    ...(fluidSize !== undefined && { fluidSize }),
   }))
   const colorClass = useColor(color, 'text')
 </script>

package/layers/typography/app/composables/typography.ts

@@ -1,7 +1,7 @@
-import type { MaybeRefOrGetter } from 'vue'
-import { toValue } from 'vue'
+import { toValue, type MaybeRefOrGetter } from 'vue'
 
 import type {
+  FluidFontSize,
   FontLeading,
   FontSize,
   FontSlant,
@@ -25,8 +25,8 @@ function normalizeAxis(
   const { prefix = '', fallback = '', numericFormatter } = options
 
   return typeof value === 'number'
-    ? numericFormatter?.(value) ?? (prefix ? `${prefix}-[${value}]` : `[${value}]`)
-    : value ?? fallback
+    ? (numericFormatter?.(value) ?? (prefix ? `${prefix}-[${value}]` : `[${value}]`))
+    : (value ?? fallback)
 }
 
 function getSizeClass(size: FontSize | undefined): string {
@@ -34,6 +34,42 @@ function getSizeClass(size: FontSize | undefined): string {
   return typeof size === 'number' ? `text-[${size}]` : `text-${size}`
 }
 
+// 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] : ''
+}
+
 export function useTypography(
   props: MaybeRefOrGetter<{
     weight?: FontWeight
@@ -44,6 +80,7 @@ export function useTypography(
     align?: TextAlign
     transform?: TextTransform
     size?: FontSize
+    fluidSize?: FluidFontSize
   }>
 ) {
   const classes = computed(() => {
@@ -72,7 +109,10 @@ export function useTypography(
         fallback: 'tracking-normal',
       }),
 
-      getSizeClass(p.size),
+      // fluidSize is the parallel, opt-in 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),
 
       p.align ? `text-${p.align}` : '',
 

package/layers/typography/app/types/typography.ts

@@ -60,6 +60,42 @@ export type FontSize =
   | '9xl'
   | number
 
+/* ======================================================
+   Fluid Font Size
+   - Stepped clamp() scale, parallel to Tailwind's --text-*
+   - Companion to text-fluid-* utilities (typography.css)
+   ====================================================== */
+
+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'
+
 /* ======================================================
    Font Width
    - Semantic abstraction over wdth axis
@@ -112,13 +148,6 @@ export type FontTracking =
   | 'tracking-widest'
   | FontTrackingNumber
 
-/* ======================================================
-   Screen-scale Font Sizes
-   - Companion to text-screen-* fluid tokens
-   ====================================================== */
-
-export type FontScreenSize = 'screen' | 'screen-xl' | 'screen-xxl' | 'screen-xxxl'
-
 /* ======================================================
    Text Layout
    ====================================================== */

package/layers/typography/nuxt.config.ts

@@ -8,6 +8,8 @@ export default defineNuxtConfig({
     '#layers/typography/types': `${import.meta.dirname}/app/types`,
   },
 
+  css: ['#layers/typography/app/assets/css/typography.css'],
+
   compatibilityDate: '2026-06-06',
 
   typescript: {

package/layers/visual/app/app.config.ts

@@ -1,5 +1,5 @@
-import type { GradientConfig } from './types/gradient'
 import type { AccentSceneConfig } from './types/accent'
+import type { GradientConfig } from './types/gradient'
 
 export default defineAppConfig({
   uiLayer: {

package/layers/visual/app/assets/css/visual.css

@@ -1,5 +1,5 @@
 .gradient-text {
-  -webkit-background-clip: text;
+  background-clip: text;
   background-clip: text;
   color: transparent;
 }

package/layers/visual/app/composables/accent.ts

@@ -1,5 +1,4 @@
-import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from 'vue'
-import { toValue } from 'vue'
+import { toValue, type ComputedRef, type CSSProperties, type MaybeRefOrGetter } from 'vue'
 
 import type { BlobBlur, BlobConfig } from '../types/accent'
 import { resolveUiColorToken } from '../utils/colorTokens'

package/layers/visual/app/composables/tint.ts

@@ -1,5 +1,4 @@
-import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from 'vue'
-import { toValue } from 'vue'
+import { toValue, type ComputedRef, type CSSProperties, type MaybeRefOrGetter } from 'vue'
 
 import { TINT_LEVEL_OPACITY, type TintConfig } from '../types/tint'
 

package/layers/visual/app/types/media.ts

@@ -1,3 +1,5 @@
+import type { ComputedRef } from 'vue'
+
 /**
  * Media Types
  *
@@ -174,8 +176,6 @@ export type PictureProps = {
   decoding?: 'sync' | 'async' | 'auto'
 }
 
-import type { ComputedRef } from 'vue'
-
 /**
  * Return type for usePicture composable
  */

package/layers/visual/app/utils/gradientStyle.test.ts

@@ -69,8 +69,7 @@ describe('buildGradientStyle', () => {
   it('builds a conic gradient', () => {
     const cfg: GradientConfig = { from, to, shape: 'conic' }
     expect(buildGradientStyle(cfg)).toEqual({
-      backgroundImage:
-        'conic-gradient(var(--ui-color-primary-500), var(--ui-color-secondary-500))',
+      backgroundImage: 'conic-gradient(var(--ui-color-primary-500), var(--ui-color-secondary-500))',
     })
   })
 })

package/layers/visual/app/utils/responsiveSizes.ts

@@ -4,7 +4,6 @@ import {
   PHONE_BREAKPOINT_VALUES,
   TABLET_BREAKPOINT_VALUES,
 } from '../types/breakpoints'
-
 import type { ResponsiveSizes } from '../types/media'
 
 type BreakpointGroup = readonly [keyof ResponsiveSizes, number]