@nebutra/design-tokens 2.0.0 → 3.0.0

package/build/ts/light.js

@@ -24,17 +24,17 @@ export const ColorNebutraCyan700 = "#07a183";
 export const ColorNebutraCyan800 = "#057963";
 export const ColorNebutraCyan900 = "#035143";
 export const ColorNebutraCyan950 = "#012923";
-export const ColorNebutraNeutral50 = "#f8fafc";
-export const ColorNebutraNeutral100 = "#f1f5f9";
-export const ColorNebutraNeutral200 = "#e2e8f0";
-export const ColorNebutraNeutral300 = "#cbd5e1";
-export const ColorNebutraNeutral400 = "#94a3b8";
-export const ColorNebutraNeutral500 = "#64748b";
-export const ColorNebutraNeutral600 = "#475569";
-export const ColorNebutraNeutral700 = "#334155";
-export const ColorNebutraNeutral800 = "#1e293b";
-export const ColorNebutraNeutral900 = "#0f172a";
-export const ColorNebutraNeutral950 = "#020617";
+export const ColorNebutraNeutral50 = "#f9fafb";
+export const ColorNebutraNeutral100 = "#f3f4f6";
+export const ColorNebutraNeutral200 = "#e4e5e8";
+export const ColorNebutraNeutral300 = "#d2d4d8";
+export const ColorNebutraNeutral400 = "#9fa1a5";
+export const ColorNebutraNeutral500 = "#717377";
+export const ColorNebutraNeutral600 = "#515357";
+export const ColorNebutraNeutral700 = "#3f4044";
+export const ColorNebutraNeutral800 = "#26272a";
+export const ColorNebutraNeutral900 = "#18191c";
+export const ColorNebutraNeutral950 = "#0b0c0d";
 export const ColorNebutraGray50 = "#fafafa";
 export const ColorNebutraGray100 = "#f5f5f5";
 export const ColorNebutraGray200 = "#e5e5e5";
@@ -82,18 +82,89 @@ export const EasingSpring = "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
 export const TrackingDisplay = "-0.04em"; // Hero H1
 export const TrackingHeading = "-0.03em"; // Section H2/H3
 export const TrackingTight = "-0.015em"; // Body emphasis
+export const TrackingLabel = "0.07em"; // Uppercase micro-labels. 0.07em is Vercel's measured eyebrow value (0.071em); open tracking keeps small caps legible.
 export const LeadingDisplay = "1.05";
 export const LeadingHeading = "1.15";
+export const Type2xsSize = "0.6875rem";
+export const Type2xsLeading = "1.45";
+export const Type2xsTracking = "0.01em";
+export const TypeXsSize = "0.75rem";
+export const TypeXsLeading = "1.4";
+export const TypeXsTracking = "0.005em";
+export const TypeUiSize = "0.8125rem";
+export const TypeUiLeading = "1.45";
+export const TypeUiTracking = "0em";
+export const TypeSmSize = "0.875rem";
+export const TypeSmLeading = "1.5";
+export const TypeSmTracking = "0em";
+export const TypeBaseSize = "1rem";
+export const TypeBaseLeading = "1.6";
+export const TypeBaseTracking = "-0.005em";
+export const TypeLgSize = "1.125rem";
+export const TypeLgLeading = "1.55";
+export const TypeLgTracking = "-0.01em";
+export const TypeXlSize = "1.25rem";
+export const TypeXlLeading = "1.45";
+export const TypeXlTracking = "-0.012em";
+export const Type2xlSize = "1.5rem";
+export const Type2xlLeading = "1.33";
+export const Type2xlTracking = "-0.015em";
+export const Type3xlSize = "1.875rem";
+export const Type3xlLeading = "1.25";
+export const Type3xlTracking = "-0.02em";
+export const Type4xlSize = "2.25rem";
+export const Type4xlLeading = "1.15";
+export const Type4xlTracking = "-0.022em";
+export const Type5xlSize = "3rem";
+export const Type5xlLeading = "1.08";
+export const Type5xlTracking = "-0.028em";
+export const Type6xlSize = "3.75rem";
+export const Type6xlLeading = "1.04";
+export const Type6xlTracking = "-0.032em";
+export const Type7xlSize = "4.5rem";
+export const Type7xlLeading = "1";
+export const Type7xlTracking = "-0.035em";
+export const Type8xlSize = "6rem";
+export const Type8xlLeading = "1";
+export const Type8xlTracking = "-0.04em";
+export const Type9xlSize = "8rem";
+export const Type9xlLeading = "1";
+export const Type9xlTracking = "-0.045em";
+export const TypeDisplaySize = "1.25rem";
+export const TypeDisplayLeading = "1.45";
+export const TypeDisplayTracking = "-0.012em";
+export const TypeBodySize = "0.875rem";
+export const TypeBodyLeading = "1.5";
+export const TypeBodyTracking = "0em";
+export const TypeLabelSize = "0.75rem";
+export const TypeLabelLeading = "1.4";
+export const TypeLabelTracking = "0.005em";
+export const TypeMetaSize = "0.6875rem";
+export const TypeMetaLeading = "1.45";
+export const TypeMetaTracking = "0.01em";
+export const LayerRaised = "10"; // Within a component: an element lifted over its siblings.
+export const LayerSticky = "20"; // Sticky headers and table heads.
+export const LayerFloating = "30"; // Floating toolbars and canvas chrome anchored to content.
+export const LayerNav = "40"; // App navigation and the shell's top bar.
+export const LayerDrawer = "60"; // Mobile navigation drawers and their toggles.
+export const LayerBanner = "90"; // Page-level banners: cookie consent, announcements.
+export const LayerSkipLink = "100"; // The skip link — above page chrome whenever it is focused.
+export const LayerPanel = "200"; // App-owned floating panels that are not overlays (locale switcher, search flyouts).
+export const LayerBackdrop = "1040"; // Overlay tier. Mirrors overlayZIndex in @nebutra/ui; a test keeps them equal.
+export const LayerModal = "1050"; // Dialogs and sheets.
+export const LayerPopover = "1060"; // Popovers, menus, selects.
+export const LayerTooltip = "1070"; // Tooltips.
+export const LayerDevtools = "9999"; // Developer and debug surfaces only — never product UI.
 export const RingHairline = "inset 0 0 0 1px rgb(255 255 255 / 0.04)"; // Etched-glass hairline (light mode value, dark mode override in themes/dark.json)
 export const OverlayFaint = "rgb(0 0 0 / 0.06)"; // Light-mode faint overlay (6% black)
 export const FontFamilySans =
-  'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif';
+  'var(--font-geist-sans), "Geist", var(--font-misans, "MiSans"), "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif';
 export const FontFamilyCn =
-  'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", "Microsoft YaHei", sans-serif'; // CJK-locale stack — same order as sans, minus the Latin-only system faces
+  'var(--font-geist-sans), "Geist", var(--font-misans, "MiSans"), "PingFang SC", "Microsoft YaHei", sans-serif'; // CJK-locale stack — same order as sans, minus the Latin-only system faces
 export const FontFamilyDisplay =
-  'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif';
+  'var(--font-dm-sans), "DM Sans", var(--font-misans, "MiSans"), "PingFang SC", sans-serif';
 export const FontFamilyHeading =
-  'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif';
+  'var(--font-dm-sans), "DM Sans", var(--font-misans, "MiSans"), "PingFang SC", sans-serif';
 export const FontFamilyMono =
   'var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace';
 export const TransitionDefault = {
@@ -128,17 +199,17 @@ export const MotionDurationReveal = "300ms";
 export const MotionDurationCinematic = "500ms";
 export const FocusRingDefault = "0 0 0 2px hsl(var(--ring) / 0.4)"; // Single-layer translucent focus ring (2026 pattern). Legacy box-shadow consumers stay compatible; modern surfaces should prefer the global :focus-visible outline rule in static/base.css.
 export const ScaleNeutral1 = "#ffffff"; // app background
-export const ScaleNeutral2 = "#f8fafc"; // subtle background
-export const ScaleNeutral3 = "#f1f5f9"; // component bg default
-export const ScaleNeutral4 = "#e2e8f0"; // component bg hover
-export const ScaleNeutral5 = "#cbd5e1"; // component bg active
-export const ScaleNeutral6 = "#b0bccb"; // subtle border — DERIVED at build time (scripts/derive-border-tier.mjs): OKLab lerp step5 → step9 at t=0.25. The $value here is a placeholder anchor only; the preprocessor overwrites it.
-export const ScaleNeutral7 = "#96a3b5"; // default border — DERIVED: OKLab lerp step5 → step9 at t=0.50.
-export const ScaleNeutral8 = "#7d8ba0"; // hovered border — DERIVED: OKLab lerp step5 → step9 at t=0.75.
-export const ScaleNeutral9 = "#64748b"; // solid fill
-export const ScaleNeutral10 = "#475569"; // solid fill hover
-export const ScaleNeutral11 = "#334155"; // secondary text
-export const ScaleNeutral12 = "#0f172a"; // primary text
+export const ScaleNeutral2 = "#f9fafb"; // subtle background
+export const ScaleNeutral3 = "#f3f4f6"; // component bg default
+export const ScaleNeutral4 = "#e4e5e8"; // component bg hover
+export const ScaleNeutral5 = "#d2d4d8"; // component bg active
+export const ScaleNeutral6 = "#b9bbbf"; // subtle border — DERIVED at build time (scripts/derive-border-tier.mjs): OKLab lerp step5 → step9 at t=0.25. The $value here is a placeholder anchor only; the preprocessor overwrites it.
+export const ScaleNeutral7 = "#a0a2a6"; // default border — DERIVED: OKLab lerp step5 → step9 at t=0.50.
+export const ScaleNeutral8 = "#888a8e"; // hovered border — DERIVED: OKLab lerp step5 → step9 at t=0.75.
+export const ScaleNeutral9 = "#717377"; // solid fill
+export const ScaleNeutral10 = "#515357"; // solid fill hover
+export const ScaleNeutral11 = "#3f4044"; // secondary text
+export const ScaleNeutral12 = "#18191c"; // primary text
 export const ScaleBlue1 = "#fafcfe"; // app tint — L* 99.01, C 0.003, hue 264. Radix blue-1 sits at L* 99.31 C 0.003.
 export const ScaleBlue2 = "#f2f6fd"; // subtle background — L* 97.21, C 0.010.
 export const ScaleBlue3 = "#e7eefc"; // component background default — L* 94.79, C 0.020.
@@ -165,20 +236,20 @@ export const ScaleCyan10 = "#33e5bb"; // solid fill hover — L* 82.61, C 0.150.
 export const ScaleCyan11 = "#027a61"; // secondary text — L* 51.64, C 0.100. 5.17:1 on step 1.
 export const ScaleCyan12 = "#004133"; // primary text — L* 33.45, C 0.065. 11.35:1 on step 1.
 export const ScaleCyanContrast = "#0d2b25"; // Label ink for the bright fill tier. Absolute near-black, identical in both modes, carrying a trace of the scale hue. A bright fill needs an explicit dark ink; comparing white against the scale's own step 12 picks white in dark mode, where step 12 is light, and measures 1.52:1. 10.35:1 on step 9, 9.40:1 on step 10.
-export const ShadcnBackground = "0 0% 100%"; // HSL channel triple — consume via hsl(var(--background))
-export const ShadcnForeground = "222 47% 11%";
+export const ShadcnBackground = "210 20% 98%"; // House canvas. Light is gray-50 under white cards (two-surface layering, as Vercel #fafafa/#fff); dark is OKLCH L 0.16, inside the near-black band every reference measures (Linear L 0.14, Raycast #040506).
+export const ShadcnForeground = "225 7.7% 10.2%";
 export const ShadcnCard = "0 0% 100%";
-export const ShadcnCardForeground = "222 47% 11%";
+export const ShadcnCardForeground = "225 7.7% 10.2%";
 export const ShadcnPopover = "0 0% 100%";
-export const ShadcnPopoverForeground = "222 47% 11%";
-export const ShadcnPrimary = "222.8 85% 55.7%"; // Product action blue. Derived, not borrowed: hue 264 is the VI hue, L* and C were chosen inside the band the industry actually ships (measured OKLCH C 0.167-0.235, L* 54-67 across Vercel, Stripe, Linear, GitHub, Tailwind, Radix, Figma, Notion). #2e65ee = L*55.5 C0.215, white label 4.99:1. The previous 228 85% 56% (#2f56ee, C0.232) also passed at 5.70:1 — this trims it to the middle of the band rather than its top edge. The VI lock --blue-9 (#0033FE, C0.290) is 23% above anything in that band and must never surface on a component.
+export const ShadcnPopoverForeground = "225 7.7% 10.2%";
+export const ShadcnPrimary = "225 7.7% 10.2%"; // House action fill = ink, not blue (owner decision 2026-09-24). Every measured reference ships a solid near-black primary (Vercel #171717, Figma #000) and keeps its one saturated hue for a single signal. Blue now lives on --ring (focus, selection) only.
 export const ShadcnPrimaryForeground = "0 0% 100%";
-export const ShadcnSecondary = "210 40% 96%";
-export const ShadcnSecondaryForeground = "222 47% 11%";
-export const ShadcnMuted = "210 40% 96%";
-export const ShadcnMutedForeground = "215 25% 45%";
-export const ShadcnAccent = "228 100% 97%";
-export const ShadcnAccentForeground = "228 85% 56%"; // Softer brand blue — desaturated to match --primary, avoids 100% saturation glare on focus/accent
+export const ShadcnSecondary = "220 14.3% 95.9%";
+export const ShadcnSecondaryForeground = "225 7.7% 10.2%";
+export const ShadcnMuted = "220 14.3% 95.9%";
+export const ShadcnMutedForeground = "220 2.6% 45.5%";
+export const ShadcnAccent = "220 14.3% 95.9%";
+export const ShadcnAccentForeground = "225 7.7% 10.2%"; // Softer brand blue — desaturated to match --primary, avoids 100% saturation glare on focus/accent
 export const ShadcnDestructive = "0 84% 45%";
 export const ShadcnDestructiveForeground = "0 0% 100%";
 export const ShadcnDestructiveStrong = "0 84% 45%"; // Red as FOREGROUND. In light mode --destructive already passes (5.42:1 on white), so this equals it; the token exists so consumers reference one name across themes. In DARK, --destructive is 0 63% 38% = 2.15:1 on --card, unreadable as text — see dark.json. Mirrors --warning-strong.
@@ -190,17 +261,17 @@ export const ShadcnWarningForeground = "222 47% 11%";
 export const ShadcnWarningStrong = "38 92% 30%"; // Amber as FOREGROUND on a light surface. --warning is a fill: at 38 92% 50% it is 2.04:1 against --neutral-2, so it is unreadable as text or as an icon stroke. This darkened step is 5.17:1, which sits between --success (4.92) and --destructive (5.19) so the three status colours read with the same weight. Use --warning for fills with --warning-foreground on top; use this for amber text and icons. Destructive and success need no equivalent — they already pass AA as foreground.
 export const ShadcnInfo = "228 85% 56%";
 export const ShadcnInfoForeground = "0 0% 100%";
-export const ShadcnBorder = "240 5.9% 90%";
-export const ShadcnInput = "240 5.9% 90%";
-export const ShadcnRing = "222 47% 11%"; // Focus ring — neutral foreground (Vercel/Linear/Cursor 2026 pattern). Brand blue is reserved for selected/active states; focus indication is chrome and stays neutral. Consumed by global :focus-visible outline as hsl(var(--ring) / 0.5).
-export const ShadcnSidebar = "210 40% 98%";
-export const ShadcnSidebarForeground = "215 25% 27%";
-export const ShadcnSidebarPrimary = "228 85% 56%";
+export const ShadcnBorder = "225 8% 90.2%";
+export const ShadcnInput = "225 8% 90.2%";
+export const ShadcnRing = "222.8 85% 55.7%"; // The House blue. Focus rings, selection and links — the one saturated hue on a product screen. #2e65ee light / #6b93f5 dark.
+export const ShadcnSidebar = "210 20% 98%";
+export const ShadcnSidebarForeground = "225 7.7% 10.2%";
+export const ShadcnSidebarPrimary = "225 7.7% 10.2%"; // Current-page accent in the sidebar (icon tint + edge). Same value as --primary: the sidebar carried the superseded 228 85% 56% (#2f56ee, C 0.232), which the action-blue measurement trimmed to C 0.215.
 export const ShadcnSidebarPrimaryForeground = "0 0% 100%";
-export const ShadcnSidebarAccent = "228 100% 97%";
-export const ShadcnSidebarAccentForeground = "228 85% 56%";
-export const ShadcnSidebarBorder = "214 32% 91%";
-export const ShadcnSidebarRing = "228 85% 56%";
+export const ShadcnSidebarAccent = "220 14.3% 95.9%";
+export const ShadcnSidebarAccentForeground = "225 7.7% 10.2%";
+export const ShadcnSidebarBorder = "225 8% 90.2%";
+export const ShadcnSidebarRing = "222.8 85% 55.7%";
 export const ShadcnChart1 = "228 100% 50%";
 export const ShadcnChart2 = "168 91% 49%";
 export const ShadcnChart3 = "263 70% 66%";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebutra/design-tokens",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "W3C DTCG ($value/$type) tokens — SSOT, Style Dictionary 4 pipeline. Coexists with @nebutra/tokens; not a replacement.",
   "private": false,
   "nebutra": {

package/style-dictionary.config.mjs

@@ -57,7 +57,8 @@ const FONT_REGISTRY = {
   geist: "--font-geist-sans",
   "geist sans": "--font-geist-sans",
   "geist mono": "--font-geist-mono",
-  "vivo sans sc": "--font-noto-sans-sc",
+  misans: "--font-misans",
+  "dm sans display": "--font-dm-sans",
   inter: "--font-inter",
   "space grotesk": "--font-space-grotesk",
   "playfair display": "--font-playfair-display",
@@ -688,6 +689,12 @@ function buildTailwindThemeInline() {
   --color-success-foreground: hsl(var(--success-foreground));
   --color-warning: hsl(var(--warning));
   --color-warning-foreground: hsl(var(--warning-foreground));
+  /* Status colours as INK (text, icon fill/stroke). --destructive / --warning /
+     --success are fills: amber is 2.0:1 as text in light, red 2.5:1 in dark.
+     text-destructive-strong etc. read at ~5:1 in both themes. */
+  --color-destructive-strong: hsl(var(--destructive-strong));
+  --color-warning-strong: hsl(var(--warning-strong));
+  --color-success-strong: hsl(var(--success-strong));
   --color-info: hsl(var(--info));
   --color-info-foreground: hsl(var(--info-foreground));
   --color-border: hsl(var(--border));
@@ -862,6 +869,66 @@ function buildTailwindThemeInline() {
   --ease-in-out: var(--motion-ease-in-out);
   --ease-spring: var(--motion-ease-spring);
 
+  /* Type scale — see core.json:type. Indirect so a Brand Package can retune size,
+     leading and tracking; each text-* utility sets all three. */
+  --text-2xs: var(--type-2xs-size);
+  --text-2xs--line-height: var(--type-2xs-leading);
+  --text-2xs--letter-spacing: var(--type-2xs-tracking);
+  --text-xs: var(--type-xs-size);
+  --text-xs--line-height: var(--type-xs-leading);
+  --text-xs--letter-spacing: var(--type-xs-tracking);
+  --text-ui: var(--type-ui-size);
+  --text-ui--line-height: var(--type-ui-leading);
+  --text-ui--letter-spacing: var(--type-ui-tracking);
+  --text-sm: var(--type-sm-size);
+  --text-sm--line-height: var(--type-sm-leading);
+  --text-sm--letter-spacing: var(--type-sm-tracking);
+  --text-base: var(--type-base-size);
+  --text-base--line-height: var(--type-base-leading);
+  --text-base--letter-spacing: var(--type-base-tracking);
+  --text-lg: var(--type-lg-size);
+  --text-lg--line-height: var(--type-lg-leading);
+  --text-lg--letter-spacing: var(--type-lg-tracking);
+  --text-xl: var(--type-xl-size);
+  --text-xl--line-height: var(--type-xl-leading);
+  --text-xl--letter-spacing: var(--type-xl-tracking);
+  --text-2xl: var(--type-2xl-size);
+  --text-2xl--line-height: var(--type-2xl-leading);
+  --text-2xl--letter-spacing: var(--type-2xl-tracking);
+  --text-3xl: var(--type-3xl-size);
+  --text-3xl--line-height: var(--type-3xl-leading);
+  --text-3xl--letter-spacing: var(--type-3xl-tracking);
+  --text-4xl: var(--type-4xl-size);
+  --text-4xl--line-height: var(--type-4xl-leading);
+  --text-4xl--letter-spacing: var(--type-4xl-tracking);
+  --text-5xl: var(--type-5xl-size);
+  --text-5xl--line-height: var(--type-5xl-leading);
+  --text-5xl--letter-spacing: var(--type-5xl-tracking);
+  --text-6xl: var(--type-6xl-size);
+  --text-6xl--line-height: var(--type-6xl-leading);
+  --text-6xl--letter-spacing: var(--type-6xl-tracking);
+  --text-7xl: var(--type-7xl-size);
+  --text-7xl--line-height: var(--type-7xl-leading);
+  --text-7xl--letter-spacing: var(--type-7xl-tracking);
+  --text-8xl: var(--type-8xl-size);
+  --text-8xl--line-height: var(--type-8xl-leading);
+  --text-8xl--letter-spacing: var(--type-8xl-tracking);
+  --text-9xl: var(--type-9xl-size);
+  --text-9xl--line-height: var(--type-9xl-leading);
+  --text-9xl--letter-spacing: var(--type-9xl-tracking);
+  --text-display: var(--type-display-size);
+  --text-display--line-height: var(--type-display-leading);
+  --text-display--letter-spacing: var(--type-display-tracking);
+  --text-body: var(--type-body-size);
+  --text-body--line-height: var(--type-body-leading);
+  --text-body--letter-spacing: var(--type-body-tracking);
+  --text-label: var(--type-label-size);
+  --text-label--line-height: var(--type-label-leading);
+  --text-label--letter-spacing: var(--type-label-tracking);
+  --text-meta: var(--type-meta-size);
+  --text-meta--line-height: var(--type-meta-leading);
+  --text-meta--letter-spacing: var(--type-meta-tracking);
+
   /* Motion — Durations (four-rail; see core.json:duration). Names denote intent, not relative speed. */
   --duration-micro: var(--motion-duration-micro);
   --duration-flow: var(--motion-duration-flow);
@@ -893,14 +960,15 @@ function buildTailwindThemeInline() {
      --spacing-{step} alias. --spacing itself (0.25rem arithmetic base) stays
      untouched. See static/base.css. */
 
-  /* Font family — Geist keeps Latin + numerals, self-hosted Noto Sans SC takes
-     CJK, system CJK faces behind it. Order is the design decision; see the
-     fontFamily $description in tokens/core.json. Mirror of those tokens — keep
-     the two in sync (verify:parity compares them). */
-  --font-sans: var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-  --font-cn: var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", "Microsoft YaHei", sans-serif;
-  --font-display: var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif;
-  --font-heading: var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif;
+  /* Font family — Geist keeps Latin + numerals for body/UI, DM Sans sets Latin
+     display and headings, self-hosted MiSans takes CJK, system CJK faces behind
+     it. Order is the design decision; see the fontFamily $description in
+     tokens/core.json. Mirror of those tokens — keep the two in sync
+     (verify:parity compares them). */
+  --font-sans: var(--font-geist-sans), "Geist", var(--font-misans, "MiSans"), "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-cn: var(--font-geist-sans), "Geist", var(--font-misans, "MiSans"), "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-display: var(--font-dm-sans), "DM Sans", var(--font-misans, "MiSans"), "PingFang SC", sans-serif;
+  --font-heading: var(--font-dm-sans), "DM Sans", var(--font-misans, "MiSans"), "PingFang SC", sans-serif;
   --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
 }
 `;