@suiteop/storefront 0.4.0 → 0.6.0

package/dist/config.d.ts

@@ -4,163 +4,183 @@ declare const STOREFRONT_FONTS: readonly ["inter", "montserrat", "poppins", "ral
 type StorefrontFont = (typeof STOREFRONT_FONTS)[number];
 declare const STOREFRONT_FONT_FAMILIES: Record<StorefrontFont, string>;
 
-declare const STOREFRONT_LOCALES: readonly ["en", "fr", "es", "de", "it", "pt", "nl"];
+declare const STOREFRONT_LOCALES: readonly ['en', 'fr', 'es', 'de', 'it', 'pt', 'nl'];
 type StorefrontLocale = (typeof STOREFRONT_LOCALES)[number];
+declare const STOREFRONT_LAYOUTS: readonly ['listings', 'locations', 'areas', 'single'];
+type StorefrontLayout = (typeof STOREFRONT_LAYOUTS)[number];
+declare const STOREFRONT_THEMES: readonly ['folio', 'hearth', 'circuit', 'tide', 'noir', 'fjord'];
+type StorefrontTheme = (typeof STOREFRONT_THEMES)[number];
 declare const storefrontSiteConfigSchema: z.ZodObject<{
+    layout: z.ZodCatch<z.ZodOptional<z.ZodEnum<{
+        areas: "areas";
+        listings: "listings";
+        locations: "locations";
+        single: "single";
+    }>>>;
+    theme: z.ZodCatch<z.ZodOptional<z.ZodEnum<{
+        circuit: "circuit";
+        fjord: "fjord";
+        folio: "folio";
+        hearth: "hearth";
+        noir: "noir";
+        tide: "tide";
+    }>>>;
     brand: z.ZodObject<{
         name: z.ZodString;
         logoUrl: z.ZodNullable<z.ZodURL>;
+        logoOnDarkUrl: z.ZodOptional<z.ZodNullable<z.ZodURL>>;
         faviconUrl: z.ZodNullable<z.ZodURL>;
     }, z.core.$strip>;
     colors: z.ZodObject<{
         primary: z.ZodString;
-        primaryForeground: z.ZodString;
-        background: z.ZodString;
-        foreground: z.ZodString;
-        accent: z.ZodString;
+        secondary: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+        primaryForeground: z.ZodOptional<z.ZodString>;
+        background: z.ZodOptional<z.ZodString>;
+        foreground: z.ZodOptional<z.ZodString>;
+        accent: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>;
-    fonts: z.ZodObject<{
-        heading: z.ZodEnum<{
-            inter: "inter";
-            montserrat: "montserrat";
-            poppins: "poppins";
-            raleway: "raleway";
-            nunito: "nunito";
-            work_sans: "work_sans";
-            mulish: "mulish";
+    fonts: z.ZodOptional<z.ZodObject<{
+        heading: z.ZodOptional<z.ZodEnum<{
+            anybody: "anybody";
+            archivo: "archivo";
             barlow: "barlow";
-            jost: "jost";
             bitter: "bitter";
-            archivo: "archivo";
-            public_sans: "public_sans";
-            gantari: "gantari";
-            anybody: "anybody";
-            lato: "lato";
-            playfair_display: "playfair_display";
-            karla: "karla";
-            reddit_sans: "reddit_sans";
-            overpass: "overpass";
-            roboto: "roboto";
-            open_sans: "open_sans";
-            merriweather: "merriweather";
-            outfit: "outfit";
-            fraunces: "fraunces";
-            dm_sans: "dm_sans";
             cormorant_garamond: "cormorant_garamond";
-            eb_garamond: "eb_garamond";
-            lora: "lora";
             crimson_pro: "crimson_pro";
-            source_serif_4: "source_serif_4";
-            ibm_plex_serif: "ibm_plex_serif";
-            manrope: "manrope";
-            plus_jakarta_sans: "plus_jakarta_sans";
-            space_grotesk: "space_grotesk";
+            dm_sans: "dm_sans";
+            eb_garamond: "eb_garamond";
+            fraunces: "fraunces";
+            gantari: "gantari";
             ibm_plex_sans: "ibm_plex_sans";
-            libre_franklin: "libre_franklin";
-            josefin_sans: "josefin_sans";
-        }>;
-        body: z.ZodEnum<{
+            ibm_plex_serif: "ibm_plex_serif";
             inter: "inter";
+            josefin_sans: "josefin_sans";
+            jost: "jost";
+            karla: "karla";
+            lato: "lato";
+            libre_franklin: "libre_franklin";
+            lora: "lora";
+            manrope: "manrope";
+            merriweather: "merriweather";
             montserrat: "montserrat";
+            mulish: "mulish";
+            nunito: "nunito";
+            open_sans: "open_sans";
+            outfit: "outfit";
+            overpass: "overpass";
+            playfair_display: "playfair_display";
+            plus_jakarta_sans: "plus_jakarta_sans";
             poppins: "poppins";
+            public_sans: "public_sans";
             raleway: "raleway";
-            nunito: "nunito";
+            reddit_sans: "reddit_sans";
+            roboto: "roboto";
+            source_serif_4: "source_serif_4";
+            space_grotesk: "space_grotesk";
             work_sans: "work_sans";
-            mulish: "mulish";
+        }>>;
+        body: z.ZodOptional<z.ZodEnum<{
+            anybody: "anybody";
+            archivo: "archivo";
             barlow: "barlow";
-            jost: "jost";
             bitter: "bitter";
-            archivo: "archivo";
-            public_sans: "public_sans";
+            cormorant_garamond: "cormorant_garamond";
+            crimson_pro: "crimson_pro";
+            dm_sans: "dm_sans";
+            eb_garamond: "eb_garamond";
+            fraunces: "fraunces";
             gantari: "gantari";
-            anybody: "anybody";
+            ibm_plex_sans: "ibm_plex_sans";
+            ibm_plex_serif: "ibm_plex_serif";
+            inter: "inter";
+            josefin_sans: "josefin_sans";
+            jost: "jost";
+            karla: "karla";
             lato: "lato";
+            libre_franklin: "libre_franklin";
+            lora: "lora";
+            manrope: "manrope";
+            merriweather: "merriweather";
+            montserrat: "montserrat";
+            mulish: "mulish";
+            nunito: "nunito";
+            open_sans: "open_sans";
+            outfit: "outfit";
+            overpass: "overpass";
             playfair_display: "playfair_display";
-            karla: "karla";
+            plus_jakarta_sans: "plus_jakarta_sans";
+            poppins: "poppins";
+            public_sans: "public_sans";
+            raleway: "raleway";
             reddit_sans: "reddit_sans";
-            overpass: "overpass";
             roboto: "roboto";
-            open_sans: "open_sans";
-            merriweather: "merriweather";
-            outfit: "outfit";
-            fraunces: "fraunces";
-            dm_sans: "dm_sans";
-            cormorant_garamond: "cormorant_garamond";
-            eb_garamond: "eb_garamond";
-            lora: "lora";
-            crimson_pro: "crimson_pro";
             source_serif_4: "source_serif_4";
-            ibm_plex_serif: "ibm_plex_serif";
-            manrope: "manrope";
-            plus_jakarta_sans: "plus_jakarta_sans";
             space_grotesk: "space_grotesk";
-            ibm_plex_sans: "ibm_plex_sans";
-            libre_franklin: "libre_franklin";
-            josefin_sans: "josefin_sans";
-        }>;
-    }, z.core.$strip>;
+            work_sans: "work_sans";
+        }>>;
+    }, z.core.$strip>>;
     nav: z.ZodArray<z.ZodObject<{
         label: z.ZodRecord<z.ZodEnum<{
+            de: "de";
             en: "en";
             es: "es";
             fr: "fr";
-            nl: "nl";
-            de: "de";
             it: "it";
+            nl: "nl";
             pt: "pt";
         }> & z.core.$partial, z.ZodString>;
         href: z.ZodString;
     }, z.core.$strip>>;
     footer: z.ZodObject<{
         text: z.ZodRecord<z.ZodEnum<{
+            de: "de";
             en: "en";
             es: "es";
             fr: "fr";
-            nl: "nl";
-            de: "de";
             it: "it";
+            nl: "nl";
             pt: "pt";
         }> & z.core.$partial, z.ZodString>;
         links: z.ZodArray<z.ZodObject<{
             label: z.ZodRecord<z.ZodEnum<{
+                de: "de";
                 en: "en";
                 es: "es";
                 fr: "fr";
-                nl: "nl";
-                de: "de";
                 it: "it";
+                nl: "nl";
                 pt: "pt";
             }> & z.core.$partial, z.ZodString>;
             href: z.ZodString;
         }, z.core.$strip>>;
     }, z.core.$strip>;
     defaultLocale: z.ZodEnum<{
+        de: "de";
         en: "en";
         es: "es";
         fr: "fr";
-        nl: "nl";
-        de: "de";
         it: "it";
+        nl: "nl";
         pt: "pt";
     }>;
     locales: z.ZodArray<z.ZodEnum<{
+        de: "de";
         en: "en";
         es: "es";
         fr: "fr";
-        nl: "nl";
-        de: "de";
         it: "it";
+        nl: "nl";
         pt: "pt";
     }>>;
     seo: z.ZodObject<{
         titleTemplate: z.ZodString;
         defaultDescription: z.ZodRecord<z.ZodEnum<{
+            de: "de";
             en: "en";
             es: "es";
             fr: "fr";
-            nl: "nl";
-            de: "de";
             it: "it";
+            nl: "nl";
             pt: "pt";
         }> & z.core.$partial, z.ZodString>;
         ogImageUrl: z.ZodNullable<z.ZodURL>;
@@ -168,6 +188,147 @@ declare const storefrontSiteConfigSchema: z.ZodObject<{
 }, z.core.$strip>;
 type StorefrontSiteConfig = z.infer<typeof storefrontSiteConfigSchema>;
 
+declare const DEFAULT_STOREFRONT_LAYOUT: StorefrontLayout;
+declare const DEFAULT_STOREFRONT_THEME: StorefrontTheme;
+type TypeStep = readonly [number, number, number, string, ('uppercase' | 'none')?];
+type TypeScale = Record<'display' | 'h1' | 'h2' | 'h3' | 'body' | 'small' | 'label', TypeStep>;
+interface StorefrontThemeRecipe {
+    mode: 'light' | 'dark';
+    fonts: {
+        heading: StorefrontFont;
+        body: StorefrontFont;
+    };
+    radius: {
+        sm: number;
+        md: number;
+        lg: number;
+        btn: number;
+    };
+    btn: {
+        size: number;
+        w: number;
+        ls: string;
+        tt: 'uppercase' | 'none';
+        h: number;
+    };
+    type: TypeScale;
+    space: {
+        section: number;
+        gutter: number;
+    };
+    neutral: {
+        hue: number | null;
+        mix: number;
+        c: number;
+    };
+    L: {
+        bg: number;
+        surface: number;
+        surface2: number;
+        tint: number;
+        border: number;
+        ink: number;
+        muted: number;
+        dark: number;
+    };
+    C: {
+        ink: number;
+        dark: number;
+        tint: number;
+    };
+    shadow: boolean;
+}
+declare const STOREFRONT_THEME_RECIPES: Readonly<Record<StorefrontTheme, StorefrontThemeRecipe>>;
+interface StorefrontThemeTokens {
+    bg: string;
+    surface: string;
+    surface2: string;
+    tint: string;
+    border: string;
+    borderStrong: string;
+    ink: string;
+    muted: string;
+    primary: string;
+    onPrimary: string;
+    primaryHover: string;
+    accentText: string;
+    dark: string;
+    onDark: string;
+    onDarkMuted: string;
+    darkAccent: string;
+    focus: string;
+    phBg: string;
+    phText: string;
+    accent2?: string;
+}
+interface StorefrontColorOverrides {
+    background?: string;
+    foreground?: string;
+    accent?: string;
+    primaryForeground?: string;
+}
+type StorefrontColorOverride = keyof StorefrontColorOverrides;
+type StorefrontThemeNote = {
+    code: 'light_brand_ink_label';
+    text: string;
+} | {
+    code: 'button_darkened';
+    from: number;
+    to: number;
+    text: string;
+} | {
+    code: 'brand_lifted';
+    from: number;
+    to: number;
+    text: string;
+} | {
+    code: 'brand_text_darkened';
+    steps: number;
+    text: string;
+};
+interface StorefrontOverrideProblem {
+    field: StorefrontColorOverride;
+    ratio: number;
+    against: 'background' | 'text' | 'button';
+}
+interface StorefrontThemeCheck {
+    label: 'Body text' | 'Muted text' | 'Button label' | 'Brand text' | 'On dark section' | 'Brand on dark';
+    ratio: string;
+    grade: 'AAA' | 'AA' | 'Fail';
+    pass: boolean;
+}
+interface DerivedStorefrontTheme {
+    theme: StorefrontTheme;
+    tokens: StorefrontThemeTokens;
+    vars: Record<string, string>;
+    checks: StorefrontThemeCheck[];
+    notes: StorefrontThemeNote[];
+    problems: StorefrontOverrideProblem[];
+}
+interface DeriveThemeOptions {
+    secondary?: string | null;
+    heading?: StorefrontFont;
+    body?: StorefrontFont;
+    overrides?: StorefrontColorOverrides;
+}
+declare function deriveStorefrontTheme(theme: StorefrontTheme, brandHex: string, opts?: DeriveThemeOptions): DerivedStorefrontTheme;
+interface ResolvedStorefrontTheme {
+    theme: StorefrontTheme;
+    layout: StorefrontLayout;
+    fonts: {
+        heading: StorefrontFont;
+        body: StorefrontFont;
+    };
+    derived: DerivedStorefrontTheme;
+    cssVariables: Record<string, string>;
+}
+type ThemeConfig = Pick<StorefrontSiteConfig, 'colors'> & Partial<Pick<StorefrontSiteConfig, 'theme' | 'layout' | 'fonts'>>;
+declare function resolveStorefrontTheme(config: ThemeConfig): ResolvedStorefrontTheme;
+
+/**
+ * Validates `suiteop.config.ts` and returns it. Throws a `ZodError` listing every problem, so a
+ * build with an invalid theme fails loudly instead of rendering a broken site.
+ */
 declare function defineSuiteOpConfig(config: StorefrontSiteConfig): StorefrontSiteConfig;
 
-export { STOREFRONT_FONT_FAMILIES, STOREFRONT_LOCALES, type StorefrontLocale, type StorefrontSiteConfig, defineSuiteOpConfig, storefrontSiteConfigSchema };
+export { DEFAULT_STOREFRONT_LAYOUT, DEFAULT_STOREFRONT_THEME, type DerivedStorefrontTheme, type ResolvedStorefrontTheme, STOREFRONT_FONT_FAMILIES, STOREFRONT_LAYOUTS, STOREFRONT_LOCALES, STOREFRONT_THEMES, STOREFRONT_THEME_RECIPES, type StorefrontLayout, type StorefrontLocale, type StorefrontSiteConfig, type StorefrontTheme, type StorefrontThemeRecipe, defineSuiteOpConfig, deriveStorefrontTheme, resolveStorefrontTheme, storefrontSiteConfigSchema };

package/dist/config.js

@@ -1,7 +1,7 @@
-import { STOREFRONT_FONTS } from './chunk-PYVUDQSQ.js';
-export { STOREFRONT_FONT_FAMILIES } from './chunk-PYVUDQSQ.js';
+import { STOREFRONT_FONTS, STOREFRONT_FONT_FAMILIES } from './chunk-UQWQPTHO.js';
+export { STOREFRONT_FONT_FAMILIES } from './chunk-UQWQPTHO.js';
 import { z } from 'zod';
 
-var STOREFRONT_LOCALES=["en","fr","es","de","it","pt","nl"];var REQUIRED="validation.required";var TOO_LONG="validation.max_length";var TOO_MANY="validation.too_large";var INVALID="validation.invalid";var text=max=>z.string(INVALID).max(max,TOO_LONG);var localeSchema=z.enum(STOREFRONT_LOCALES,"validation.storefront.locale_unsupported");var hexSchema=z.string(INVALID).regex(/^#[0-9A-Fa-f]{6}$/,"validation.storefront.color_hex");var assetUrlSchema=z.url({protocol:/^https$/,error:"validation.storefront.url_https"});var localizedSchema=z.partialRecord(localeSchema,text(200),INVALID);var linkSchema=z.object({label:localizedSchema,href:text(500).regex(/^(\/(?!\/)|https:\/\/)/,"validation.storefront.link_href")},INVALID);var fontSchema=z.enum(STOREFRONT_FONTS,"validation.invalid_option");var storefrontSiteConfigSchema=z.object({brand:z.object({name:text(80).min(1,REQUIRED),logoUrl:assetUrlSchema.nullable(),faviconUrl:assetUrlSchema.nullable()},INVALID),colors:z.object({primary:hexSchema,primaryForeground:hexSchema,background:hexSchema,foreground:hexSchema,accent:hexSchema},INVALID),fonts:z.object({heading:fontSchema,body:fontSchema},INVALID),nav:z.array(linkSchema,INVALID).max(8,TOO_MANY),footer:z.object({text:localizedSchema,links:z.array(linkSchema,INVALID).max(12,TOO_MANY)},INVALID),defaultLocale:localeSchema,locales:z.array(localeSchema,INVALID).min(1,REQUIRED).max(STOREFRONT_LOCALES.length,TOO_MANY),seo:z.object({titleTemplate:text(80).includes("%s",{error:"validation.storefront.title_template_placeholder"}),defaultDescription:localizedSchema,ogImageUrl:assetUrlSchema.nullable()},INVALID)},INVALID).refine(c=>c.locales.includes(c.defaultLocale),{path:["defaultLocale"],message:"validation.storefront.default_locale_not_listed"});function defineSuiteOpConfig(config){return storefrontSiteConfigSchema.parse(config)}
+var STOREFRONT_LOCALES=["en","fr","es","de","it","pt","nl"];var STOREFRONT_LAYOUTS=["listings","locations","areas","single"];var STOREFRONT_THEMES=["folio","hearth","circuit","tide","noir","fjord"];var REQUIRED="validation.required";var TOO_LONG="validation.max_length";var TOO_MANY="validation.too_large";var INVALID="validation.invalid";var text=max=>z.string(INVALID).max(max,TOO_LONG);var localeSchema=z.enum(STOREFRONT_LOCALES,"validation.storefront.locale_unsupported");var hexSchema=z.string(INVALID).regex(/^#[0-9A-Fa-f]{6}$/,"validation.storefront.color_hex");var assetUrlSchema=z.url({protocol:/^https$/,error:"validation.storefront.url_https"});var localizedSchema=z.partialRecord(localeSchema,text(200),INVALID);var linkSchema=z.object({label:localizedSchema,href:text(500).regex(/^(\/(?!\/)|https:\/\/)/,"validation.storefront.link_href")},INVALID);var fontSchema=z.enum(STOREFRONT_FONTS,"validation.invalid_option");var storefrontSiteConfigSchema=z.object({layout:z.enum(STOREFRONT_LAYOUTS).optional().catch(void 0),theme:z.enum(STOREFRONT_THEMES).optional().catch(void 0),brand:z.object({name:text(80).min(1,REQUIRED),logoUrl:assetUrlSchema.nullable(),logoOnDarkUrl:assetUrlSchema.nullable().optional(),faviconUrl:assetUrlSchema.nullable()},INVALID),colors:z.object({primary:hexSchema,secondary:hexSchema.nullable().optional(),primaryForeground:hexSchema.optional(),background:hexSchema.optional(),foreground:hexSchema.optional(),accent:hexSchema.optional()},INVALID),fonts:z.object({heading:fontSchema.optional(),body:fontSchema.optional()},INVALID).optional(),nav:z.array(linkSchema,INVALID).max(8,TOO_MANY),footer:z.object({text:localizedSchema,links:z.array(linkSchema,INVALID).max(12,TOO_MANY)},INVALID),defaultLocale:localeSchema,locales:z.array(localeSchema,INVALID).min(1,REQUIRED).max(STOREFRONT_LOCALES.length,TOO_MANY),seo:z.object({titleTemplate:text(80).includes("%s",{error:"validation.storefront.title_template_placeholder"}),defaultDescription:localizedSchema,ogImageUrl:assetUrlSchema.nullable()},INVALID)},INVALID).refine(c=>c.locales.includes(c.defaultLocale),{path:["defaultLocale"],message:"validation.storefront.default_locale_not_listed"});var DEFAULT_STOREFRONT_LAYOUT="listings";var DEFAULT_STOREFRONT_THEME="tide";var STOREFRONT_THEME_RECIPES={folio:{mode:"light",fonts:{heading:"eb_garamond",body:"libre_franklin"},radius:{sm:0,md:0,lg:0,btn:0},btn:{size:12,w:600,ls:"0.14em",tt:"uppercase",h:46},type:{display:[88,1,400,"-0.015em"],h1:[56,1.05,400,"-0.01em"],h2:[36,1.15,400,"0"],h3:[24,1.25,500,"0"],body:[18,1.6,400,"0"],small:[14,1.5,400,"0"],label:[11,1.3,600,"0.16em","uppercase"]},space:{section:144,gutter:32},neutral:{hue:null,mix:0,c:.006},L:{bg:.985,surface:1,surface2:.955,tint:.95,border:.87,ink:.19,muted:.47,dark:.22},C:{ink:.02,dark:.04,tint:.022},shadow:false},hearth:{mode:"light",fonts:{heading:"lora",body:"karla"},radius:{sm:6,md:12,lg:18,btn:8},btn:{size:15,w:700,ls:"0",tt:"none",h:48},type:{display:[64,1.08,500,"-0.01em"],h1:[48,1.12,500,"-0.01em"],h2:[32,1.2,500,"0"],h3:[22,1.3,600,"0"],body:[17,1.6,400,"0"],small:[14,1.5,400,"0"],label:[12,1.3,700,"0.1em","uppercase"]},space:{section:112,gutter:28},neutral:{hue:75,mix:.85,c:.014},L:{bg:.972,surface:.99,surface2:.945,tint:.935,border:.885,ink:.25,muted:.48,dark:.28},C:{ink:.025,dark:.05,tint:.032},shadow:true},circuit:{mode:"light",fonts:{heading:"space_grotesk",body:"ibm_plex_sans"},radius:{sm:8,md:12,lg:16,btn:999},btn:{size:15,w:600,ls:"-0.005em",tt:"none",h:44},type:{display:[64,1.02,600,"-0.035em"],h1:[44,1.08,600,"-0.03em"],h2:[30,1.15,600,"-0.02em"],h3:[20,1.3,600,"-0.01em"],body:[16,1.55,400,"0"],small:[14,1.45,400,"0"],label:[12,1.3,600,"0.02em"]},space:{section:88,gutter:20},neutral:{hue:null,mix:0,c:.004},L:{bg:1,surface:.975,surface2:.958,tint:.958,border:.915,ink:.17,muted:.48,dark:.19},C:{ink:.012,dark:.03,tint:.035},shadow:true},tide:{mode:"light",fonts:{heading:"outfit",body:"mulish"},radius:{sm:12,md:20,lg:28,btn:999},btn:{size:15,w:700,ls:"0.01em",tt:"none",h:50},type:{display:[76,1.02,300,"-0.02em"],h1:[48,1.1,400,"-0.015em"],h2:[34,1.15,400,"-0.01em"],h3:[21,1.3,500,"0"],body:[17,1.6,400,"0"],small:[14,1.5,400,"0"],label:[12,1.3,700,"0.08em","uppercase"]},space:{section:120,gutter:24},neutral:{hue:null,mix:0,c:.005},L:{bg:.99,surface:.968,surface2:.945,tint:.95,border:.905,ink:.26,muted:.48,dark:.29},C:{ink:.035,dark:.055,tint:.028},shadow:true},noir:{mode:"dark",fonts:{heading:"cormorant_garamond",body:"manrope"},radius:{sm:0,md:2,lg:2,btn:0},btn:{size:11,w:600,ls:"0.22em",tt:"uppercase",h:48},type:{display:[84,1,300,"0.02em","uppercase"],h1:[56,1.05,300,"0.01em"],h2:[38,1.15,400,"0"],h3:[24,1.25,500,"0.02em"],body:[16,1.7,400,"0"],small:[13,1.55,400,"0.01em"],label:[11,1.3,600,"0.24em","uppercase"]},space:{section:152,gutter:32},neutral:{hue:null,mix:0,c:.016},L:{bg:.165,surface:.205,surface2:.245,tint:.24,border:.34,ink:.94,muted:.76,dark:.12},C:{ink:.01,dark:.014,tint:.035},shadow:false},fjord:{mode:"light",fonts:{heading:"dm_sans",body:"dm_sans"},radius:{sm:2,md:4,lg:6,btn:4},btn:{size:14,w:500,ls:"0",tt:"none",h:44},type:{display:[60,1.05,500,"-0.03em"],h1:[42,1.1,500,"-0.025em"],h2:[28,1.2,500,"-0.015em"],h3:[19,1.35,500,"-0.005em"],body:[16,1.6,400,"0"],small:[13,1.5,400,"0"],label:[12,1.3,500,"0"]},space:{section:128,gutter:24},neutral:{hue:85,mix:.85,c:.006},L:{bg:.976,surface:.995,surface2:.948,tint:.945,border:.895,ink:.23,muted:.49,dark:.26},C:{ink:.008,dark:.02,tint:.022},shadow:false}};var clamp=(v,a,b)=>Math.min(b,Math.max(a,v));var toLin=c=>c<=.04045?c/12.92:Math.pow((c+.055)/1.055,2.4);var toGam=c=>c<=.0031308?12.92*c:1.055*Math.pow(c,1/2.4)-.055;var hexToRgb=hex=>{const h=hex.replace("#","");return [0,2,4].map(i=>parseInt(h.slice(i,i+2),16)/255)};var rgbToHex=rgb=>"#"+rgb.map(v=>Math.round(clamp(v,0,1)*255).toString(16).padStart(2,"0")).join("").toUpperCase();function hexToOklch(hex){const[r,g,b]=hexToRgb(hex).map(toLin);const l=Math.cbrt(.4122214708*r+.5363325363*g+.0514459929*b);const m=Math.cbrt(.2119034982*r+.6806995451*g+.1073969566*b);const s=Math.cbrt(.0883024619*r+.2817188376*g+.6299787005*b);const L=.2104542553*l+.793617785*m-.0040720468*s;const A=1.9779984951*l-2.428592205*m+.4505937099*s;const B=.0259040371*l+.7827717662*m-.808675766*s;let H=Math.atan2(B,A)*180/Math.PI;if(H<0)H+=360;return [L,Math.sqrt(A*A+B*B),H]}function oklchToLinear(L,C,H){const a=C*Math.cos(H*Math.PI/180);const b=C*Math.sin(H*Math.PI/180);const l=(L+.3963377774*a+.2158037573*b)**3;const m=(L-.1055613458*a-.0638541728*b)**3;const s=(L-.0894841775*a-1.291485548*b)**3;return [4.0767416621*l-3.3077115913*m+.2309699292*s,-1.2684380046*l+2.6097574011*m-.3413193965*s,-0.0041960863*l-.7034186147*m+1.707614701*s]}var inGamut=rgb=>rgb.every(v=>v>=-1e-4&&v<=1.0001);function oklchToHex(lightness,C,H){const L=clamp(lightness,0,1);let rgb=oklchToLinear(L,C,H);if(!inGamut(rgb)){let lo=0;let hi=C;for(let i=0;i<22;i++){const mid=(lo+hi)/2;if(inGamut(oklchToLinear(L,mid,H)))lo=mid;else hi=mid;}rgb=oklchToLinear(L,lo,H);}return rgbToHex(rgb.map(v=>toGam(clamp(v,0,1))))}var luminance=hex=>{const[r,g,b]=hexToRgb(hex).map(toLin);return .2126*r+.7152*g+.0722*b};function contrastRatio(a,b){const x=luminance(a);const y=luminance(b);return (Math.max(x,y)+.05)/(Math.min(x,y)+.05)}var minContrast=(hex,grounds)=>Math.min(...grounds.map(g=>contrastRatio(hex,g)));var rgba=(hex,alpha)=>{const[r,g,b]=hexToRgb(hex).map(v=>Math.round(v*255));return `rgba(${r},${g},${b},${alpha})`};var mixHue=(a,b,t)=>{const d=(b-a+540)%360-180;return (a+d*t+360)%360};function fit(lightness,C,H,grounds,target,dir){let L=lightness;let hex=oklchToHex(L,C,H);let steps=0;while(minContrast(hex,grounds)<target&&steps<100){L=clamp(L+dir*.01,0,1);hex=oklchToHex(L,C,H);steps++;}return {hex,L,steps}}var SERIF_FONTS=new Set(["playfair_display","merriweather","bitter","fraunces","cormorant_garamond","eb_garamond","lora","crimson_pro","source_serif_4","ibm_plex_serif"]);function storefrontFontStack(font){return `'${STOREFRONT_FONT_FAMILIES[font]}', ${SERIF_FONTS.has(font)?"serif":"sans-serif"}`}var AA=4.5;var INK=7;function derivePalette(recipe,brandHex,secondary,overrides){const[bL,bC,bH]=hexToOklch(brandHex);const nh=recipe.neutral.hue==null?bH:mixHue(bH,recipe.neutral.hue,recipe.neutral.mix);const nc=recipe.neutral.c;const{L,C}=recipe;const dark=recipe.mode==="dark";const dir=dark?1:-1;const N=(l,c=nc)=>oklchToHex(l,c,nh);const bg=overrides.background?.toUpperCase()??N(L.bg);const surface=N(L.surface,L.surface>=.999?0:nc);const surface2=N(L.surface2);const tint=oklchToHex(L.tint,Math.min(bC,C.tint),bH);const border=N(L.border,nc*1.5);const borderStrong=N(dark?L.border+.12:L.border-.2,nc*1.5);const grounds=[bg,surface,surface2,tint];const ink=overrides.foreground?.toUpperCase()??fit(L.ink,C.ink,nh,grounds,INK,dir).hex;const muted=fit(L.muted,nc*2.5,nh,grounds,AA,dir).hex;const brandText=fit(bL,bC,bH,grounds,AA,dir);const accentText=overrides.accent?.toUpperCase()??brandText.hex;const notes=[];let p;let on;if(!dark){const white=oklchToHex(.995,.003,bH);if(contrastRatio(brandHex,white)>=AA){p={hex:brandHex.toUpperCase(),L:bL};on=white;}else if(bL>=.7&&contrastRatio(brandHex,ink)>=AA){p={hex:brandHex.toUpperCase(),L:bL};on=ink;notes.push({code:"light_brand_ink_label",text:"Light brand: button keeps the colour and takes an ink label"});}else {p=fit(bL,bC,bH,[white],AA,-1);on=white;notes.push({code:"button_darkened",from:round2(bL),to:round2(p.L),text:`Button darkened L ${bL.toFixed(2)} \u2192 ${p.L.toFixed(2)} for a white label`});}}else {on=bg;p=fit(Math.max(bL,.72),bC,bH,[bg,surface],AA,1);if(p.L>bL+.005){notes.push({code:"brand_lifted",from:round2(bL),to:round2(p.L),text:`Brand lifted L ${bL.toFixed(2)} \u2192 ${p.L.toFixed(2)} to read on dark`});}}const onPrimary=overrides.primaryForeground?.toUpperCase()??on;let primaryHover=oklchToHex(p.L+(dark?.05:-0.06),bC,bH);if(contrastRatio(primaryHover,onPrimary)<AA){primaryHover=oklchToHex(p.L+(dark?-0.04:.04),bC,bH);}const darkToken=oklchToHex(L.dark,Math.min(bC,C.dark),bH);const phBg=dark?oklchToHex(.27,Math.min(bC,.03),bH):oklchToHex(L.tint-.045,Math.min(bC,.03),bH);const t={bg,surface,surface2,tint,border,borderStrong,ink,muted,primary:p.hex,onPrimary,primaryHover,accentText,dark:darkToken,onDark:oklchToHex(.97,.008,bH),onDarkMuted:fit(.82,.012,bH,[darkToken],AA,1).hex,darkAccent:fit(Math.max(bL,.72),bC,bH,[darkToken],AA,1).hex,focus:dark?p.hex:accentText,phBg,phText:fit(dark?.7:.48,.02,bH,[phBg],AA,dir).hex};if(secondary)t.accent2=fit(...hexToOklch(secondary),grounds,AA,dir).hex;if(!dark&&brandText.steps>0&&accentText===brandText.hex){notes.push({code:"brand_text_darkened",steps:brandText.steps,text:`Brand text darkened ${brandText.steps} step${brandText.steps>1?"s":""} to reach 4.5:1`});}return {t,notes}}var round2=n=>Math.round(n*100)/100;function failingOverride(t,overrides){const grounds=[t.bg,t.surface,t.surface2,t.tint];if(overrides.foreground){const ratio=minContrast(t.ink,grounds);if(ratio<AA)return {field:"foreground",ratio,against:"background"}}if(overrides.accent){const ratio=minContrast(t.accentText,grounds);if(ratio<AA)return {field:"accent",ratio,against:"background"}}if(overrides.primaryForeground){const ratio=contrastRatio(t.onPrimary,t.primary);if(ratio<AA)return {field:"primaryForeground",ratio,against:"button"}}if(overrides.background){const ratio=Math.min(contrastRatio(t.ink,t.bg),contrastRatio(t.muted,t.bg));if(ratio<AA)return {field:"background",ratio,against:"text"}}return null}function deriveStorefrontTheme(theme,brandHex,opts={}){const recipe=STOREFRONT_THEME_RECIPES[theme];const overrides={...opts.overrides};const problems=[];let palette=derivePalette(recipe,brandHex,opts.secondary,overrides);for(let problem=failingOverride(palette.t,overrides);problem;){problems.push({...problem,ratio:Math.round(problem.ratio*10)/10});delete overrides[problem.field];palette=derivePalette(recipe,brandHex,opts.secondary,overrides);problem=failingOverride(palette.t,overrides);}const{t,notes}=palette;const r=recipe.radius;const px=n=>`${n}px`;const vars={"--so-bg":t.bg,"--so-surface":t.surface,"--so-surface-2":t.surface2,"--so-tint":t.tint,"--so-border":t.border,"--so-border-strong":t.borderStrong,"--so-ink":t.ink,"--so-muted":t.muted,"--so-primary":t.primary,"--so-on-primary":t.onPrimary,"--so-primary-hover":t.primaryHover,"--so-accent-text":t.accentText,"--so-dark":t.dark,"--so-on-dark":t.onDark,"--so-on-dark-muted":t.onDarkMuted,"--so-dark-accent":t.darkAccent,"--so-focus":t.focus,"--so-ph-bg":t.phBg,"--so-ph-text":t.phText,"--so-ph-line":rgba(t.phText,.16),"--so-accent-2":t.accent2??t.accentText,"--so-scrim":`linear-gradient(180deg, ${rgba(t.dark,.55)} 0%, ${rgba(t.dark,0)} 26%, ${rgba(t.dark,0)} 40%, ${rgba(t.dark,.72)} 100%)`,"--so-scrim-solid":rgba(t.dark,.45),"--so-shadow":recipe.shadow?`0 1px 2px ${rgba(t.dark,.06)}, 0 10px 30px ${rgba(t.dark,.1)}`:"none","--so-shadow-float":`0 2px 6px ${rgba(t.dark,.08)}, 0 18px 50px ${rgba(t.dark,.18)}`,"--so-font-heading":storefrontFontStack(opts.heading??recipe.fonts.heading),"--so-font-body":storefrontFontStack(opts.body??recipe.fonts.body),"--so-r-sm":px(r.sm),"--so-r-md":px(r.md),"--so-r-lg":px(r.lg),"--so-r-btn":px(r.btn),"--so-btn-size":px(recipe.btn.size),"--so-btn-w":String(recipe.btn.w),"--so-btn-ls":recipe.btn.ls,"--so-btn-tt":recipe.btn.tt,"--so-btn-h":px(recipe.btn.h),"--so-section":px(recipe.space.section),"--so-gutter":px(recipe.space.gutter)};for(const[step,[size,lh,w,ls,tt]]of Object.entries(recipe.type)){vars[`--t-${step}-size`]=px(size);vars[`--t-${step}-lh`]=String(lh);vars[`--t-${step}-w`]=String(w);vars[`--t-${step}-ls`]=ls;vars[`--t-${step}-tt`]=tt??"none";}const grade=x=>x>=7?"AAA":x>=AA?"AA":"Fail";const checks=[["Body text",t.ink,t.bg],["Muted text",t.muted,t.surface2],["Button label",t.onPrimary,t.primary],["Brand text",t.accentText,t.bg],["On dark section",t.onDark,t.dark],["Brand on dark",t.darkAccent,t.dark]].map(([label,a,b])=>{const x=Math.round(contrastRatio(a,b)*10)/10;return {label,ratio:x.toFixed(1),grade:grade(x),pass:x>=AA}});return {theme,tokens:t,vars,checks,notes,problems}}function storefrontThemeFonts(theme,fonts){const pair=STOREFRONT_THEME_RECIPES[theme].fonts;return {heading:fonts?.heading??pair.heading,body:fonts?.body??pair.body}}function resolveStorefrontTheme(config){const theme=config.theme??DEFAULT_STOREFRONT_THEME;const fonts=storefrontThemeFonts(theme,config.fonts);const{primary,secondary,background,foreground,accent,primaryForeground}=explicitThemeChoices(config).colors;const derived=deriveStorefrontTheme(theme,primary,{secondary,...fonts,overrides:{background,foreground,accent,primaryForeground}});return {theme,layout:config.layout??DEFAULT_STOREFRONT_LAYOUT,fonts,derived,cssVariables:derived.vars}}var OVERRIDE_TOKENS={background:"bg",foreground:"ink",accent:"accentText",primaryForeground:"onPrimary"};var OVERRIDES=Object.keys(OVERRIDE_TOKENS);function legacyButtonLabel(primary,t){if(contrastRatio(t.onPrimary,primary)>=AA)return t.onPrimary;const reads=[t.onDark,t.ink,t.dark,t.bg].filter(hex=>contrastRatio(hex,primary)>=AA);return (reads.length?reads:["#FFFFFF","#000000"]).reduce((best,hex)=>contrastRatio(hex,primary)>contrastRatio(best,primary)?hex:best)}function explicitThemeChoices(config){const theme=config.theme??DEFAULT_STOREFRONT_THEME;const given=pickOverrides(config.colors);const colors={...config.colors};for(const field of OVERRIDES){const value=given[field];if(!value)continue;const others={...given};delete others[field];const{tokens}=deriveStorefrontTheme(theme,config.colors.primary,{overrides:others});const derived=field==="primaryForeground"?[tokens.onPrimary,legacyButtonLabel(config.colors.primary,tokens)]:[tokens[OVERRIDE_TOKENS[field]]];if(derived.includes(value.toUpperCase()))delete colors[field];}const pair=STOREFRONT_THEME_RECIPES[theme].fonts;const fonts={...config.fonts?.heading&&config.fonts.heading!==pair.heading?{heading:config.fonts.heading}:{},...config.fonts?.body&&config.fonts.body!==pair.body?{body:config.fonts.body}:{}};const{fonts:_fonts,...rest}=config;return {...rest,colors,...fonts.heading||fonts.body?{fonts}:{}}}function pickOverrides(colors){const{background,foreground,accent,primaryForeground}=colors;return Object.fromEntries(Object.entries({background,foreground,accent,primaryForeground}).filter(([,v])=>!!v))}function defineSuiteOpConfig(config){return storefrontSiteConfigSchema.parse(config)}
 
-export { STOREFRONT_LOCALES, defineSuiteOpConfig, storefrontSiteConfigSchema };
+export { DEFAULT_STOREFRONT_LAYOUT, DEFAULT_STOREFRONT_THEME, STOREFRONT_LAYOUTS, STOREFRONT_LOCALES, STOREFRONT_THEMES, STOREFRONT_THEME_RECIPES, defineSuiteOpConfig, deriveStorefrontTheme, resolveStorefrontTheme, storefrontSiteConfigSchema };

package/dist/content.cjs

@@ -1,37 +1,37 @@
 'use strict';
 
-var chunkIUJTHNB3_cjs = require('./chunk-IUJTHNB3.cjs');
-require('./chunk-E5CGGMCO.cjs');
-require('./chunk-USOISC2R.cjs');
-require('./chunk-LVFRVNT3.cjs');
+var chunkOXCLLFCY_cjs = require('./chunk-OXCLLFCY.cjs');
+require('./chunk-QBHOJGZI.cjs');
+require('./chunk-J5FZ4WDQ.cjs');
+require('./chunk-EHQFWSP6.cjs');
 
 
 
 Object.defineProperty(exports, "contentModelSchema", {
 	enumerable: true,
-	get: function () { return chunkIUJTHNB3_cjs.contentModelSchema; }
+	get: function () { return chunkOXCLLFCY_cjs.contentModelSchema; }
 });
 Object.defineProperty(exports, "createContentReader", {
 	enumerable: true,
-	get: function () { return chunkIUJTHNB3_cjs.createContentReader; }
+	get: function () { return chunkOXCLLFCY_cjs.createContentReader; }
 });
 Object.defineProperty(exports, "defineContent", {
 	enumerable: true,
-	get: function () { return chunkIUJTHNB3_cjs.defineContent; }
+	get: function () { return chunkOXCLLFCY_cjs.defineContent; }
 });
 Object.defineProperty(exports, "field", {
 	enumerable: true,
-	get: function () { return chunkIUJTHNB3_cjs.field; }
+	get: function () { return chunkOXCLLFCY_cjs.field; }
 });
 Object.defineProperty(exports, "parseContentModel", {
 	enumerable: true,
-	get: function () { return chunkIUJTHNB3_cjs.parseContentModel; }
+	get: function () { return chunkOXCLLFCY_cjs.parseContentModel; }
 });
 Object.defineProperty(exports, "readFields", {
 	enumerable: true,
-	get: function () { return chunkIUJTHNB3_cjs.readFields; }
+	get: function () { return chunkOXCLLFCY_cjs.readFields; }
 });
 Object.defineProperty(exports, "toContentModel", {
 	enumerable: true,
-	get: function () { return chunkIUJTHNB3_cjs.toContentModel; }
+	get: function () { return chunkOXCLLFCY_cjs.toContentModel; }
 });