fix(css): --font-family-sans renamed to --font-sans (#2680)

Co-authored-by: Benjamin Canac <[email protected]>

Author: tkmcc

devtools/app/app.vue

@@ -168,7 +168,7 @@ const isDark = computed({
 @import '@nuxt/ui';
 
 @theme {
-  --font-family-sans: 'DM Sans', sans-serif;
+  --font-sans: 'DM Sans', sans-serif;
 
   --color-primary-50: var(--ui-color-primary-50);
   --color-primary-100: var(--ui-color-primary-100);

docs/app/app.vue

@@ -126,7 +126,7 @@ provide('navigation', updatedNavigation)
 @theme {
   --container-8xl: 90rem;
 
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
   --color-green-100: #D9FBE8;

docs/content/1.getting-started/3.theme.md

@@ -16,7 +16,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --breakpoint-3xl: 1920px;
 

docs/content/1.getting-started/5.fonts.md

@@ -17,7 +17,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 }
 ```
 

playground-vue/src/app.vue

@@ -116,7 +116,7 @@ defineShortcuts({
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
   --color-green-100: #D9FBE8;

playground/app/app.vue

@@ -125,7 +125,7 @@ defineShortcuts({
 @import "@nuxt/ui";
 
 @theme {
-  --font-family-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Public Sans', sans-serif;
 
   --color-green-50: #EFFDF5;
   --color-green-100: #D9FBE8;