@frontlit/page-builder 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/theme-style-BVd5tOsc.d.ts

@@ -0,0 +1,183 @@
+type FontWeight = "font-thin" | "font-extralight" | "font-light" | "font-normal" | "font-medium" | "font-semibold" | "font-bold" | "font-extrabold" | "font-black";
+type FontSize = "text-xs" | "text-sm" | "text-base" | "text-lg" | "text-xl" | "text-2xl" | "text-3xl" | "text-4xl" | "text-5xl" | "text-6xl" | "text-7xl" | "text-8xl" | "text-9xl";
+type LineHeight = "leading-none" | "leading-tight" | "leading-snug" | "leading-normal" | "leading-relaxed" | "leading-loose";
+type LetterSpacing = "tracking-tighter" | "tracking-tight" | "tracking-normal" | "tracking-wide" | "tracking-wider" | "tracking-widest";
+type TextTransform = "uppercase" | "lowercase" | "capitalize" | "normal-case";
+type TextDecoration = "underline" | "line-through" | "no-underline";
+type TextOverflow = "truncate" | "text-ellipsis" | "text-clip";
+type BorderRadius = "rounded-none" | "rounded-sm" | "rounded" | "rounded-md" | "rounded-lg" | "rounded-xl" | "rounded-2xl" | "rounded-3xl" | "rounded-full";
+type Shadow = "shadow-2xs" | "shadow-xs" | "shadow-sm" | "shadow-md" | "shadow-lg" | "shadow-xl" | "shadow-2xl" | "shadow-none";
+type Cursor = "cursor-not-allowed" | "cursor-default" | "cursor-pointer";
+interface Typography {
+    fontFamily: string;
+    fontSize: FontSize;
+    fontWeight: FontWeight;
+    lineHeight?: LineHeight;
+    letterSpacing?: LetterSpacing;
+    textTransform?: TextTransform;
+    textDecoration?: TextDecoration;
+    textOverflow?: TextOverflow;
+    /**
+     * Fluid size in px: scales from `min` on a phone to `max` on a desktop
+     * and overrides `fontSize`. Honoured by the heading levels.
+     */
+    fluid?: {
+        min: number;
+        max: number;
+    };
+}
+interface Border {
+    width?: "border" | "border-0" | "border-2" | "border-4" | "border-8";
+    radius?: BorderRadius;
+    style?: "border-solid" | "border-dashed" | "border-dotted" | "border-double" | "border-hidden" | "border-none";
+}
+interface Padding {
+    x?: "px-0" | "px-1" | "px-2" | "px-3" | "px-4" | "px-5" | "px-6" | "px-8" | "px-10" | "px-12" | "px-16" | "px-20" | "px-24" | "px-32" | "px-40" | "px-48" | "px-56" | "px-64";
+    y?: "py-0" | "py-1" | "py-2" | "py-3" | "py-4" | "py-5" | "py-6" | "py-8" | "py-10" | "py-12" | "py-16" | "py-20" | "py-24" | "py-32" | "py-40" | "py-48" | "py-56" | "py-64";
+}
+type CustomStyle = string;
+interface DisabledStyle {
+    color?: string;
+    background?: string;
+    border?: string;
+    opacity?: "opacity-50" | "opacity-75" | "opacity-100";
+    cursor?: Cursor;
+}
+interface MenuItemStyle {
+    padding?: Padding;
+    border?: Border;
+    custom?: CustomStyle;
+}
+interface MenuStyle {
+    padding?: Padding;
+    border?: Border;
+    shadow?: Shadow;
+    custom?: CustomStyle;
+    item?: MenuItemStyle;
+}
+interface SurfaceStyle {
+    padding?: Padding;
+    border?: Border;
+    shadow?: Shadow;
+    custom?: CustomStyle;
+}
+interface Colors {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    border: string;
+    input: string;
+    ring: string;
+    chart1: string;
+    chart2: string;
+    chart3: string;
+    chart4: string;
+    chart5: string;
+    sidebar: string;
+    sidebarForeground: string;
+    sidebarPrimary: string;
+    sidebarPrimaryForeground: string;
+    sidebarAccent: string;
+    sidebarAccentForeground: string;
+    sidebarBorder: string;
+    sidebarRing: string;
+    shadow2xs: string;
+    shadowXs: string;
+    shadowSm: string;
+    shadowMd: string;
+    shadowLg: string;
+    shadowXl: string;
+    shadow2xl: string;
+}
+interface ThemeStyle {
+    colors: {
+        light: Colors;
+        dark: Colors;
+    };
+    typography: {
+        preheader: Typography;
+        /** Hero-sized headline. Optional for older themes; falls back to `header1`. */
+        display?: Typography;
+        header1: Typography;
+        header2: Typography;
+        header3: Typography;
+        header4: Typography;
+        subheader1: Typography;
+        subheader2: Typography;
+        text1: Typography;
+        text2: Typography;
+        link: Typography;
+        button: Typography;
+        input: Typography;
+        caption: Typography;
+        /** Code snippets. Optional; defaults to JetBrains Mono. */
+        code?: Typography;
+    };
+    /**
+     * How words wrapped in *asterisks* in a block title stand out: in the
+     * primary colour ("color", the default) or on a primary-coloured marker
+     * ("marker") for themes whose primary is close to the text colour.
+     */
+    highlight?: "color" | "marker";
+    interactives: {
+        button: {
+            padding?: Padding;
+            border?: Border;
+            shadow?: Shadow;
+            custom?: CustomStyle;
+            disabled?: DisabledStyle;
+        };
+        menu?: MenuStyle;
+        dialog?: SurfaceStyle;
+        popover?: SurfaceStyle;
+        tooltip?: SurfaceStyle;
+        link: {
+            padding?: Padding;
+            border?: Border;
+            textShadow?: string;
+            custom?: CustomStyle;
+            disabled?: DisabledStyle;
+        };
+        card: {
+            padding?: Padding;
+            border?: Border;
+            shadow?: Shadow;
+            custom?: CustomStyle;
+        };
+        input: {
+            borderRadius?: BorderRadius;
+            padding?: Padding;
+            border?: Border;
+            shadow?: Shadow;
+            custom?: CustomStyle;
+            disabled?: DisabledStyle;
+        };
+    };
+    structure: {
+        page: {
+            width: "max-w-2xl" | "max-w-3xl" | "max-w-4xl" | "max-w-5xl" | "max-w-6xl";
+        };
+        section: {
+            /** Draw a 1px hairline between sections. */
+            dividers?: boolean;
+            padding: {
+                x: "px-0" | "px-4" | "px-6" | "px-8" | "px-10" | "px-12" | "px-16" | "px-20" | "px-24" | "px-32" | "px-40" | "px-48" | "px-56" | "px-64";
+                y: "py-0" | "py-4" | "py-6" | "py-8" | "py-10" | "py-12" | "py-16" | "py-20" | "py-24" | "py-32" | "py-40" | "py-48" | "py-56" | "py-64";
+            };
+        };
+    };
+}
+
+export type { Border as B, Colors as C, DisabledStyle as D, MenuItemStyle as M, Padding as P, Shadow as S, ThemeStyle as T, CustomStyle as a, MenuStyle as b, SurfaceStyle as c, Typography as d };

package/dist/theme.css

@@ -14,208 +14,203 @@
  * generate-theme-styles.ts). Scoped so it doesn't leak into a consuming
  * app's own chrome outside the page-builder-rendered subtree. */
 .pb-theme {
-    --background: hsl(0 0% 100%);
-    --foreground: hsl(222.2 84% 4.9%);
-    --card: hsl(0 0% 100%);
-    --card-foreground: hsl(222.2 84% 4.9%);
-    --popover: hsl(0 0% 100%);
-    --popover-foreground: hsl(222.2 84% 4.9%);
-    --primary: hsl(222.2 47.4% 11.2%);
-    --primary-foreground: hsl(210 40% 98%);
-    --secondary: hsl(210 40% 96.1%);
-    --secondary-foreground: hsl(222.2 47.4% 11.2%);
-    --muted: hsl(210 40% 96.1%);
-    --muted-foreground: hsl(215.4 16.3% 46.9%);
-    --accent: hsl(210 40% 96.1%);
-    --accent-foreground: hsl(222.2 47.4% 11.2%);
-    --destructive: hsl(0 84.2% 60.2%);
-    --destructive-foreground: hsl(210 40% 98%);
-    --border: hsl(214.3 31.8% 91.4%);
-    --input: hsl(214.3 31.8% 91.4%);
-    --ring: hsl(222.2 84% 4.9%);
-    --chart-1: hsl(12 76% 61%);
-    --chart-2: hsl(173 58% 39%);
-    --chart-3: hsl(197 37% 24%);
-    --chart-4: hsl(43 74% 66%);
-    --chart-5: hsl(27 87% 67%);
-    --radius: 0.5rem;
-    --sidebar-background: hsl(0 0% 98%);
-    --sidebar-foreground: hsl(240 5.3% 26.1%);
-    --sidebar-primary: hsl(240 5.9% 10%);
-    --sidebar-primary-foreground: hsl(0 0% 98%);
-    --sidebar-accent: hsl(240 4.8% 95.9%);
-    --sidebar-accent-foreground: hsl(240 5.9% 10%);
-    --sidebar-border: hsl(220 13% 91%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(222.2 84% 4.9%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(222.2 84% 4.9%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(222.2 84% 4.9%);
+  --primary: hsl(222.2 47.4% 11.2%);
+  --primary-foreground: hsl(210 40% 98%);
+  --secondary: hsl(210 40% 96.1%);
+  --secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --muted: hsl(210 40% 96.1%);
+  --muted-foreground: hsl(215.4 16.3% 46.9%);
+  --accent: hsl(210 40% 96.1%);
+  --accent-foreground: hsl(222.2 47.4% 11.2%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(210 40% 98%);
+  --border: hsl(214.3 31.8% 91.4%);
+  --input: hsl(214.3 31.8% 91.4%);
+  --ring: hsl(222.2 84% 4.9%);
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+  --radius: 0.5rem;
+  --sidebar-background: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
 
 .pb-theme:is(.dark, .dark *) {
-    --background: hsl(222.2 84% 4.9%);
-    --foreground: hsl(210 40% 98%);
-    --card: hsl(222.2 84% 4.9%);
-    --card-foreground: hsl(210 40% 98%);
-    --popover: hsl(222.2 84% 4.9%);
-    --popover-foreground: hsl(210 40% 98%);
-    --primary: hsl(210 40% 98%);
-    --primary-foreground: hsl(222.2 47.4% 11.2%);
-    --secondary: hsl(217.2 32.6% 17.5%);
-    --secondary-foreground: hsl(210 40% 98%);
-    --muted: hsl(217.2 32.6% 17.5%);
-    --muted-foreground: hsl(215 20.2% 65.1%);
-    --accent: hsl(217.2 32.6% 17.5%);
-    --accent-foreground: hsl(210 40% 98%);
-    --destructive: hsl(0 62.8% 30.6%);
-    --destructive-foreground: hsl(210 40% 98%);
-    --border: hsl(217.2 32.6% 17.5%);
-    --input: hsl(217.2 32.6% 17.5%);
-    --ring: hsl(212.7 26.8% 83.9%);
-    --chart-1: hsl(220 70% 50%);
-    --chart-2: hsl(160 60% 45%);
-    --chart-3: hsl(30 80% 55%);
-    --chart-4: hsl(280 65% 60%);
-    --chart-5: hsl(340 75% 55%);
-    --sidebar-background: hsl(240 5.9% 10%);
-    --sidebar-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-primary: hsl(224.3 76.3% 48%);
-    --sidebar-primary-foreground: hsl(0 0% 100%);
-    --sidebar-accent: hsl(240 3.7% 15.9%);
-    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-border: hsl(240 3.7% 15.9%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
+  --background: hsl(222.2 84% 4.9%);
+  --foreground: hsl(210 40% 98%);
+  --card: hsl(222.2 84% 4.9%);
+  --card-foreground: hsl(210 40% 98%);
+  --popover: hsl(222.2 84% 4.9%);
+  --popover-foreground: hsl(210 40% 98%);
+  --primary: hsl(210 40% 98%);
+  --primary-foreground: hsl(222.2 47.4% 11.2%);
+  --secondary: hsl(217.2 32.6% 17.5%);
+  --secondary-foreground: hsl(210 40% 98%);
+  --muted: hsl(217.2 32.6% 17.5%);
+  --muted-foreground: hsl(215 20.2% 65.1%);
+  --accent: hsl(217.2 32.6% 17.5%);
+  --accent-foreground: hsl(210 40% 98%);
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(210 40% 98%);
+  --border: hsl(217.2 32.6% 17.5%);
+  --input: hsl(217.2 32.6% 17.5%);
+  --ring: hsl(212.7 26.8% 83.9%);
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+  --sidebar-background: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
 
 /* Semantic token mapping. Runtime theme variables contain complete CSS
  * colors, which works consistently in both the public app and the dashboard. */
 @theme inline {
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-destructive: var(--destructive);
-    --color-destructive-foreground: var(--destructive-foreground);
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-    --color-chart-1: var(--chart-1);
-    --color-chart-2: var(--chart-2);
-    --color-chart-3: var(--chart-3);
-    --color-chart-4: var(--chart-4);
-    --color-chart-5: var(--chart-5);
-    --color-sidebar: var(--sidebar-background);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-ring: var(--sidebar-ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 
-    --radius-lg: var(--radius);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-sm: calc(var(--radius) - 4px);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
 
-    --shadow: var(--shadow);
-    --shadow-2xs: var(--shadow-2xs);
-    --shadow-xs: var(--shadow-xs);
-    --shadow-sm: var(--shadow-sm);
-    --shadow-md: var(--shadow-md);
-    --shadow-lg: var(--shadow-lg);
-    --shadow-xl: var(--shadow-xl);
-    --shadow-2xl: var(--shadow-2xl);
+  --shadow: var(--shadow);
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
 
-    --font-open-sans:
-        var(--font-open-sans, "Open Sans"), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-montserrat:
-        var(--font-montserrat, Montserrat), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-lato:
-        var(--font-lato, Lato), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-poppins:
-        var(--font-poppins, Poppins), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-source-sans-3:
-        var(--font-source-sans-3, "Source Sans 3"), ui-sans-serif, system-ui,
-        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-raleway:
-        var(--font-raleway, Raleway), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-noto-sans:
-        var(--font-noto-sans, "Noto Sans"), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-merriweather:
-        var(--font-merriweather, Merriweather), ui-serif, Georgia, Cambria,
-        "Times New Roman", Times, serif;
-    --font-inter:
-        var(--font-inter, Inter), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-alegreya:
-        var(--font-alegreya, Alegreya), ui-serif, Georgia, Cambria,
-        "Times New Roman", Times, serif;
-    --font-roboto:
-        var(--font-roboto, Roboto), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-mulish:
-        var(--font-mulish, Mulish), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-nunito:
-        var(--font-nunito, Nunito), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-rubik:
-        var(--font-rubik, Rubik), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-playfair-display:
-        var(--font-playfair-display, "Playfair Display"), ui-serif, Georgia,
-        Cambria, "Times New Roman", Times, serif;
-    --font-oswald:
-        var(--font-oswald, Oswald), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-pt-sans:
-        var(--font-pt-sans, "PT Sans"), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-work-sans:
-        var(--font-work-sans, "Work Sans"), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-roboto-slab:
-        var(--font-roboto-slab, "Roboto Slab"), ui-serif, Georgia, Cambria,
-        "Times New Roman", Times, serif;
-    --font-source-serif-4:
-        var(--font-source-serif-4, "Source Serif 4"), ui-serif, Georgia, Cambria,
-        "Times New Roman", Times, serif;
-    --font-bebas-neue:
-        var(--font-bebas-neue, "Bebas Neue"), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-    --font-quicksand:
-        var(--font-quicksand, Quicksand), ui-sans-serif, system-ui, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
+  --font-open-sans:
+    var(--font-open-sans, "Open Sans"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-montserrat:
+    var(--font-montserrat, Montserrat), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-lato:
+    var(--font-lato, Lato), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-poppins:
+    var(--font-poppins, Poppins), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-source-sans-3:
+    var(--font-source-sans-3, "Source Sans 3"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-raleway:
+    var(--font-raleway, Raleway), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-noto-sans:
+    var(--font-noto-sans, "Noto Sans"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-merriweather:
+    var(--font-merriweather, Merriweather), ui-serif, Georgia, Cambria,
+    "Times New Roman", Times, serif;
+  --font-inter:
+    var(--font-inter, Inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-archivo:
+    var(--font-archivo, Archivo), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-jetbrains-mono:
+    var(--font-jetbrains-mono, "JetBrains Mono"), ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-hanken-grotesk:
+    var(--font-hanken-grotesk, "Hanken Grotesk"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-spline-sans-mono:
+    var(--font-spline-sans-mono, "Spline Sans Mono"), ui-monospace, SFMono-Regular,
+    Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-alegreya:
+    var(--font-alegreya, Alegreya), ui-serif, Georgia, Cambria, "Times New Roman",
+    Times, serif;
+  --font-roboto:
+    var(--font-roboto, Roboto), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mulish:
+    var(--font-mulish, Mulish), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-nunito:
+    var(--font-nunito, Nunito), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-rubik:
+    var(--font-rubik, Rubik), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-playfair-display:
+    var(--font-playfair-display, "Playfair Display"), ui-serif, Georgia, Cambria,
+    "Times New Roman", Times, serif;
+  --font-oswald:
+    var(--font-oswald, Oswald), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-pt-sans:
+    var(--font-pt-sans, "PT Sans"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-work-sans:
+    var(--font-work-sans, "Work Sans"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-roboto-slab:
+    var(--font-roboto-slab, "Roboto Slab"), ui-serif, Georgia, Cambria,
+    "Times New Roman", Times, serif;
+  --font-source-serif-4:
+    var(--font-source-serif-4, "Source Serif 4"), ui-serif, Georgia, Cambria,
+    "Times New Roman", Times, serif;
+  --font-bebas-neue:
+    var(--font-bebas-neue, "Bebas Neue"), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-quicksand:
+    var(--font-quicksand, Quicksand), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 /* Safelist for classes the theme system composes at runtime.