kmcom-nuxt-layers 6.2.1 → 6.4.0

package/layers/core/app/components/DiagnosticsPage.vue

@@ -31,7 +31,7 @@
         <div class="space-y-8">
           <div class="text-center">
             <h1 class="mb-2 text-4xl font-bold">Core Layer Diagnostics</h1>
-            <p class="text-gray-500 dark:text-gray-400">Feature detection and system information</p>
+            <p class="text-muted">Feature detection and system information</p>
           </div>
 
           <UCard>
@@ -40,33 +40,33 @@
             </template>
             <div class="diag-grid-9 gap-3">
               <div class="flex items-center gap-2">
-                <span v-if="grid" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="grid" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>CSS Grid</span>
               </div>
               <div class="flex items-center gap-2">
-                <span v-if="subgrid" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="subgrid" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>Subgrid</span>
               </div>
               <div class="flex items-center gap-2">
-                <span v-if="containerQueries" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="containerQueries" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>Container Queries</span>
               </div>
               <div class="flex items-center gap-2">
-                <span v-if="has" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="has" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>:has() Selector</span>
               </div>
               <div class="flex items-center gap-2">
-                <span v-if="aspectRatio" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="aspectRatio" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>Aspect Ratio</span>
               </div>
               <div class="flex items-center gap-2">
-                <span v-if="backdropFilter" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="backdropFilter" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>Backdrop Filter</span>
               </div>
             </div>
@@ -78,13 +78,13 @@
             </template>
             <div class="diag-grid-8 gap-3">
               <div class="flex items-center gap-2">
-                <span v-if="webp" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="webp" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>WebP</span>
               </div>
               <div class="flex items-center gap-2">
-                <span v-if="avif" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="avif" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>AVIF</span>
               </div>
             </div>
@@ -96,23 +96,23 @@
             </template>
             <div class="diag-grid-9 gap-3">
               <div class="flex items-center gap-2">
-                <span v-if="intersectionObserver" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="intersectionObserver" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>IntersectionObserver</span>
               </div>
               <div class="flex items-center gap-2">
-                <span v-if="resizeObserver" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="resizeObserver" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>ResizeObserver</span>
               </div>
               <div class="flex items-center gap-2">
-                <span v-if="serviceWorker" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="serviceWorker" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>Service Worker</span>
               </div>
               <div class="flex items-center gap-2">
-                <span v-if="webGL" class="text-green-500">✓</span>
-                <span v-else class="text-red-500">✗</span>
+                <span v-if="webGL" class="text-success">✓</span>
+                <span v-else class="text-error">✗</span>
                 <span>WebGL</span>
               </div>
             </div>
@@ -139,8 +139,8 @@
             <div class="space-y-2">
               <div class="flex items-center gap-2">
                 <span class="w-24 font-medium">Status:</span>
-                <span v-if="isOnline" class="text-green-500">Online</span>
-                <span v-else class="text-red-500">Offline</span>
+                <span v-if="isOnline" class="text-success">Online</span>
+                <span v-else class="text-error">Offline</span>
               </div>
               <div class="flex items-center gap-2">
                 <span class="w-24 font-medium">Type:</span>
@@ -150,10 +150,10 @@
                 <span class="w-24 font-medium">Quality:</span>
                 <span
                   :class="{
-                    'text-green-500': connectionQuality === 'excellent',
-                    'text-yellow-500': connectionQuality === 'good',
-                    'text-red-500': connectionQuality === 'poor',
-                    'text-gray-500': connectionQuality === 'offline',
+                    'text-success': connectionQuality === 'excellent',
+                    'text-warning': connectionQuality === 'good',
+                    'text-error': connectionQuality === 'poor',
+                    'text-muted': connectionQuality === 'offline',
                   }"
                 >
                   {{ connectionQuality }}
@@ -161,13 +161,13 @@
               </div>
               <div class="flex items-center gap-2">
                 <span class="w-24 font-medium">Speed:</span>
-                <span v-if="isFast" class="text-green-500">Fast</span>
-                <span v-else-if="isSlow" class="text-red-500">Slow</span>
+                <span v-if="isFast" class="text-success">Fast</span>
+                <span v-else-if="isSlow" class="text-error">Slow</span>
                 <span v-else>Normal</span>
               </div>
               <div v-if="saveData" class="flex items-center gap-2">
                 <span class="w-24 font-medium">Data Saver:</span>
-                <span class="text-yellow-500">Enabled</span>
+                <span class="text-warning">Enabled</span>
               </div>
             </div>
           </UCard>
@@ -188,8 +188,8 @@
               </div>
               <div class="flex items-center gap-2">
                 <span class="w-24 font-medium">Hydrated:</span>
-                <span v-if="isHydrated" class="text-green-500">Yes</span>
-                <span v-else class="text-yellow-500">No</span>
+                <span v-if="isHydrated" class="text-success">Yes</span>
+                <span v-else class="text-warning">No</span>
               </div>
             </div>
           </UCard>
@@ -201,17 +201,17 @@
             <div class="space-y-2">
               <div class="flex items-center gap-2">
                 <span class="w-24 font-medium">Installed:</span>
-                <span v-if="isInstalled" class="text-green-500">Yes</span>
-                <span v-else class="text-gray-500">No</span>
+                <span v-if="isInstalled" class="text-success">Yes</span>
+                <span v-else class="text-muted">No</span>
               </div>
               <div class="flex items-center gap-2">
                 <span class="w-24 font-medium">Installable:</span>
-                <span v-if="canInstall" class="text-green-500">Yes</span>
-                <span v-else class="text-gray-500">No</span>
+                <span v-if="canInstall" class="text-success">Yes</span>
+                <span v-else class="text-muted">No</span>
               </div>
               <div v-if="needRefresh" class="flex items-center gap-2">
                 <span class="w-24 font-medium">Update:</span>
-                <span class="text-yellow-500">Available</span>
+                <span class="text-warning">Available</span>
               </div>
             </div>
           </UCard>

package/layers/core/app/components/LoadingScreen.vue

@@ -92,6 +92,7 @@
       'Helvetica Neue',
       Arial,
       sans-serif;
+
     /* `backwards`, not `both` - a held end state would block the exit transition below */
     animation: loading-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
   }
@@ -110,6 +111,7 @@
     font-stretch: ultra-expanded;
     font-size: clamp(3rem, 35cqw + 1rem, 18rem);
     line-height: 0.8;
+
     /* Equal-width digits - the counter doesn't jitter as it ticks */
     font-variant-numeric: tabular-nums;
   }

package/layers/core/app/utils/loading.test.ts

@@ -6,9 +6,9 @@ const FRAME = 1 / 60
 
 describe('resolveLoadingConfig', () => {
   it('fills unset keys with defaults but keeps falsy values that were set', () => {
-    expect(resolveLoadingConfig(undefined)).toMatchObject({ enabled: true, minDuration: 1500 })
+    expect(resolveLoadingConfig(undefined)).toMatchObject({ enabled: false, minDuration: 1500 })
     expect(resolveLoadingConfig({ loading: { minDuration: 0, label: '' } })).toMatchObject({
-      enabled: true,
+      enabled: false,
       minDuration: 0,
       label: '',
     })

package/layers/core/app/utils/loading.ts

@@ -2,7 +2,7 @@ import type { LoadingConfig } from '../types/loading'
 
 /** Fallbacks for keys app.config leaves unset - core's app.config ships the same values. */
 const LOADING_DEFAULTS: LoadingConfig = {
-  enabled: true,
+  enabled: false,
   minDuration: 1500,
   maxDuration: 3000,
   label: 'Loading',

package/layers/delivery/feeds/app/components/Feeds/Index.vue

@@ -20,18 +20,13 @@
 
 <template>
   <div
-    class="feeds-shell relative overflow-hidden rounded-4xl border border-amber-200/70 bg-[linear-gradient(180deg,rgba(255,251,244,0.96),rgba(243,236,223,0.95))] shadow-[0_30px_100px_rgba(15,23,42,0.12)] dark:border-slate-800/80 dark:bg-[linear-gradient(180deg,rgba(2,6,23,0.96),rgba(3,7,18,0.98))]"
-    style="container-type: inline-size"
+    class="feeds-shell border-default bg-muted @container relative overflow-hidden rounded-4xl border shadow-xl"
   >
     <div class="pointer-events-none absolute inset-0">
+      <div class="bg-primary/20 absolute top-0 -right-20 h-72 w-72 rounded-full blur-3xl" />
+      <div class="bg-secondary/10 absolute bottom-0 -left-20 h-80 w-80 rounded-full blur-3xl" />
       <div
-        class="absolute top-0 -right-20 h-72 w-72 rounded-full bg-orange-400/20 blur-3xl dark:bg-orange-500/15"
-      />
-      <div
-        class="absolute bottom-0 -left-20 h-80 w-80 rounded-full bg-sky-400/12 blur-3xl dark:bg-sky-500/10"
-      />
-      <div
-        class="absolute inset-x-8 top-0 h-px bg-linear-to-r from-transparent via-orange-400/35 to-transparent"
+        class="via-primary/35 absolute inset-x-8 top-0 h-px bg-linear-to-r from-transparent to-transparent"
       />
     </div>
 
@@ -39,19 +34,17 @@
       <div class="feeds-split grid gap-6">
         <div class="space-y-6">
           <div
-            class="inline-flex items-center gap-2 rounded-full border border-amber-200/80 bg-white/80 px-3 py-1 text-[0.68rem] font-semibold tracking-[0.35em] text-amber-700 uppercase shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/60 dark:text-amber-200"
+            class="border-default bg-default/80 text-primary inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold tracking-[0.35em] uppercase shadow-sm backdrop-blur"
           >
             <UIcon name="i-lucide-rss" class="text-sm" />
             Feeds layer
           </div>
 
           <div class="space-y-3">
-            <h1
-              class="feeds-h1 max-w-3xl font-semibold tracking-tight text-slate-950 dark:text-slate-50"
-            >
+            <h1 class="feeds-h1 text-highlighted max-w-3xl font-semibold tracking-tight">
               Feed catalog for {{ catalog.site.title }}
             </h1>
-            <p class="feeds-body max-w-2xl leading-7 text-slate-700 dark:text-slate-300">
+            <p class="feeds-body text-toned max-w-2xl leading-7">
               Configured in <code class="font-mono text-[0.9em]">app.config.ts</code>, validated
               against <code class="font-mono text-[0.9em]">content.config.ts</code>, and rendered as
               a human-readable index for readers and site owners.
@@ -60,82 +53,56 @@
 
           <div class="feeds-cards-grid gap-3">
             <div
-              class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+              class="border-default bg-default/75 rounded-2xl border p-4 shadow-sm backdrop-blur"
             >
-              <p
-                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
-              >
-                Default
-              </p>
-              <p class="mt-2 text-lg font-semibold text-slate-950 dark:text-slate-100">
+              <p class="text-muted text-xs font-semibold tracking-[0.3em] uppercase">Default</p>
+              <p class="text-highlighted mt-2 text-lg font-semibold">
                 {{ catalog.feed.defaultCollection }}
               </p>
-              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                Shorthand routes point here.
-              </p>
+              <p class="text-muted mt-1 text-xs">Shorthand routes point here.</p>
             </div>
 
             <div
-              class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+              class="border-default bg-default/75 rounded-2xl border p-4 shadow-sm backdrop-blur"
             >
-              <p
-                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
-              >
-                Exposed
-              </p>
-              <p class="mt-2 text-lg font-semibold text-slate-950 dark:text-slate-100">
+              <p class="text-muted text-xs font-semibold tracking-[0.3em] uppercase">Exposed</p>
+              <p class="text-highlighted mt-2 text-lg font-semibold">
                 {{ catalog.collectionGroups.length }} collections
               </p>
-              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                Published in the feed catalog.
-              </p>
+              <p class="text-muted mt-1 text-xs">Published in the feed catalog.</p>
             </div>
 
             <div
-              class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+              class="border-default bg-default/75 rounded-2xl border p-4 shadow-sm backdrop-blur"
             >
-              <p
-                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
-              >
-                Limit
-              </p>
-              <p class="mt-2 text-lg font-semibold text-slate-950 dark:text-slate-100">
+              <p class="text-muted text-xs font-semibold tracking-[0.3em] uppercase">Limit</p>
+              <p class="text-highlighted mt-2 text-lg font-semibold">
                 {{ catalog.feed.limit }} items
               </p>
-              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                Applied to each feed response.
-              </p>
+              <p class="text-muted mt-1 text-xs">Applied to each feed response.</p>
             </div>
           </div>
 
           <div
             v-if="catalog.site.url || catalog.site.description"
-            class="flex flex-wrap items-center gap-3 rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+            class="border-default bg-default/70 flex flex-wrap items-center gap-3 rounded-2xl border px-4 py-3 text-sm shadow-sm backdrop-blur"
           >
-            <span
-              class="text-xs font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
-            >
-              Site
-            </span>
-            <span v-if="catalog.site.description" class="text-slate-700 dark:text-slate-300">
+            <span class="text-muted text-xs font-semibold tracking-[0.3em] uppercase"> Site </span>
+            <span v-if="catalog.site.description" class="text-toned">
               {{ catalog.site.description }}
             </span>
             <code
               v-if="catalog.site.url"
-              class="rounded-full bg-slate-100 px-2 py-1 font-mono text-[0.72rem] text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+              class="bg-elevated text-muted rounded-full px-2 py-1 font-mono text-xs"
             >
               {{ catalog.site.url }}
             </code>
           </div>
         </div>
 
-        <aside
-          class="rounded-[1.5rem] border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
-        >
+        <aside class="border-default bg-default/75 rounded-3xl border p-4 shadow-sm backdrop-blur">
           <div class="flex items-center justify-between gap-3">
-            <p
-              class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
-            >
+            <p class="text-muted text-xs font-semibold tracking-[0.35em] uppercase">
               Global routes
             </p>
             <UBadge color="neutral" variant="subtle" size="xs">
@@ -161,18 +128,14 @@
       <div class="space-y-4">
         <div class="flex flex-wrap items-end justify-between gap-4">
           <div>
-            <p
-              class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
-            >
+            <p class="text-muted text-xs font-semibold tracking-[0.35em] uppercase">
               Collection routes
             </p>
-            <h2
-              class="mt-2 text-2xl font-semibold tracking-tight text-slate-950 dark:text-slate-100"
-            >
+            <h2 class="text-highlighted mt-2 text-2xl font-semibold tracking-tight">
               Each exposed collection gets RSS, Atom, and JSON.
             </h2>
           </div>
-          <p class="max-w-lg text-sm text-slate-600 dark:text-slate-400">
+          <p class="text-muted max-w-lg text-sm">
             Add or remove collections in <code class="font-mono text-[0.9em]">app.config.ts</code>
             and the catalog updates automatically.
           </p>
@@ -183,21 +146,19 @@
             v-for="group in catalog.collectionGroups"
             :key="group.collection"
             :ui="{ body: 'p-0' }"
-            class="overflow-hidden border-slate-200/80 bg-white/80 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-950/45"
+            class="border-default bg-default/80 overflow-hidden shadow-sm backdrop-blur"
           >
             <div
-              class="flex flex-wrap items-start justify-between gap-4 border-b border-slate-200/80 px-5 py-4 dark:border-slate-800"
+              class="border-default flex flex-wrap items-start justify-between gap-4 border-b px-5 py-4"
             >
               <div>
-                <p
-                  class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
-                >
+                <p class="text-muted text-xs font-semibold tracking-[0.35em] uppercase">
                   Collection
                 </p>
-                <h3 class="mt-2 text-xl font-semibold text-slate-950 dark:text-slate-100">
+                <h3 class="text-highlighted mt-2 text-xl font-semibold">
                   {{ group.label }}
                 </h3>
-                <p class="mt-1 font-mono text-sm text-slate-500 dark:text-slate-400">
+                <p class="text-muted mt-1 font-mono text-sm">
                   {{ group.collection }}
                 </p>
               </div>
@@ -215,13 +176,13 @@
         <UCard
           v-else
           :ui="{ body: 'p-0' }"
-          class="border-dashed border-slate-300 bg-white/70 shadow-none dark:border-slate-700 dark:bg-slate-950/40"
+          class="border-accented bg-default/70 border-dashed shadow-none"
         >
           <div class="space-y-2 p-5">
-            <p class="text-sm font-medium text-slate-950 dark:text-slate-100">
+            <p class="text-highlighted text-sm font-medium">
               No collection feeds are currently exposed.
             </p>
-            <p class="text-sm text-slate-600 dark:text-slate-400">
+            <p class="text-muted text-sm">
               Add page collections to
               <code class="font-mono text-[0.9em]">feedsLayer.feed.collections</code>
               in <code class="font-mono text-[0.9em]">app.config.ts</code>.

package/layers/delivery/feeds/app/components/Feeds/RouteCard.vue

@@ -16,8 +16,8 @@
     }
   > = {
     index: {
-      strip: 'bg-slate-400',
-      dot: 'bg-slate-500',
+      strip: 'bg-accented',
+      dot: 'bg-inverted/40',
     },
     rss: {
       strip: 'bg-orange-400',
@@ -50,23 +50,21 @@
   <UCard
     :to="route.path"
     :ui="{ body: 'p-0' }"
-    class="group @container relative overflow-hidden border-slate-200/80 bg-white/90 shadow-none transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-950/55 dark:hover:border-slate-700"
+    class="group border-default bg-default/90 hover:border-accented @container relative overflow-hidden shadow-none transition duration-200 hover:-translate-y-0.5 hover:shadow-md"
   >
     <div class="absolute inset-y-0 left-0 w-1" :class="routeTone.strip" />
     <div :class="compact ? 'flex items-center gap-3 p-3' : 'flex items-center gap-3 p-4'">
       <span class="h-2.5 w-2.5 rounded-full" :class="routeTone.dot" />
       <div class="min-w-0 flex-1">
         <div class="flex items-start justify-between gap-3">
-          <p class="font-medium text-slate-950 dark:text-slate-100">
+          <p class="text-highlighted font-medium">
             {{ route.label }}
           </p>
-          <code
-            class="shrink-0 rounded-full bg-slate-100 px-2 py-1 font-mono text-[0.72rem] text-slate-600 dark:bg-slate-800 dark:text-slate-300"
-          >
+          <code class="bg-elevated text-muted shrink-0 rounded-full px-2 py-1 font-mono text-xs">
             {{ route.path }}
           </code>
         </div>
-        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
+        <p class="text-muted mt-1 text-xs">
           {{ getRouteDescription() }}
         </p>
       </div>

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

@@ -25,9 +25,7 @@ export default defineNuxtConfig({
     '#layers/theming/types': `${import.meta.dirname}/app/types`,
   },
 
-  // tokens.css is NOT listed here — it defines a Tailwind `@theme static` block, so per the
-  // CSS single-build-root rule (see .claude/rules/nuxt-layers.md) it must fold into core.css's
-  // @import chain via relative path instead, or its @theme block is silently inert.
+  // Shadow/duration tokens live in core (core/app/assets/css/tokens/elevation-motion.css).
   css: ['#layers/theming/app/assets/css/theme.css'],
 
   plugins: ['#layers/theming/app/plugins/theme.client.ts'],

package/layers/design-system/typography/app/assets/css/typography.css

@@ -31,12 +31,25 @@
   --type-scale: 1.26;
   --type-snap: 0.0625rem; /* rounding interval: rem so it scales with the root; never px, never 0 */
 
-  /* Fluid display step, 5 → 7 across 360 → 1280px. tan(atan2(length, 1rem)) casts the
-     length to the unitless exponent pow() needs; normalised by 1rem (not 1px) so the
-     exponent stays 5 → 7 whatever the user's root font size; the vw term is scaled by root / 16px so a
-     larger root doesn't lower the exponent at a given width (h1 stays visibly larger). */
+  /* Fluid display step: --display-from at ≤360px → --display-to at ≥1280px (57.5 = 920px / 16).
+     tan(atan2(length, 1rem)) casts the length to the unitless exponent pow() needs; normalised
+     by 1rem (not 1px) so the exponent doesn't move with the user's root font size; the vw term
+     is scaled by root / 16px so a larger root doesn't lower it at a given width (h1 stays
+     visibly larger). Defaults reduce to clamp(5rem, 4.2176rem + 3.4784vw·k, 7rem).
+     --step-display resolves var() here at :root, so overriding --display-from/to on a subtree
+     only reaches elements that recompute it: text-step-display and h1 do. */
+  --display-from: 5;
+  --display-to: 7;
   --step-display: tan(
-    atan2(clamp(5rem, 4.2176rem + 3.4784vw * tan(atan2(1rem, 16px)), 7rem), 1rem)
+    atan2(
+      clamp(
+        var(--display-from) * 1rem,
+        var(--display-from) * 1rem + (var(--display-to) - var(--display-from)) * (100vw - 360px) *
+          tan(atan2(1rem, 16px)) / 57.5,
+        var(--display-to) * 1rem
+      ),
+      1rem
+    )
   );
 }
 
@@ -252,6 +265,18 @@
 }
 
 @utility text-step-display {
+  /* Recomputed here so [--display-from:4] [--display-to:9] on the element takes effect */
+  --step-display: tan(
+    atan2(
+      clamp(
+        var(--display-from) * 1rem,
+        var(--display-from) * 1rem + (var(--display-to) - var(--display-from)) * (100vw - 360px) *
+          tan(atan2(1rem, 16px)) / 57.5,
+        var(--display-to) * 1rem
+      ),
+      1rem
+    )
+  );
   --step: var(--step-display);
 
   font-size: calc(var(--type-base) * pow(var(--type-scale), var(--step)));
@@ -283,6 +308,17 @@
 
   /* Same expressions as the text-step-* utilities. h1 uses the display step. */
   h1:where(:not([data-slot])) {
+    --step-display: tan(
+      atan2(
+        clamp(
+          var(--display-from) * 1rem,
+          var(--display-from) * 1rem + (var(--display-to) - var(--display-from)) * (100vw - 360px) *
+            tan(atan2(1rem, 16px)) / 57.5,
+          var(--display-to) * 1rem
+        ),
+        1rem
+      )
+    );
     --step: var(--step-display);
 
     font-size: calc(var(--type-base) * pow(var(--type-scale), var(--step)));