@doneisbetter/gds-theme 2.6.7 → 3.0.1

package/dist/server.js

@@ -20,12 +20,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/server.ts
 var server_exports = {};
 __export(server_exports, {
+  applyGdsFontLane: () => applyGdsFontLane,
   createPublicBrandTheme: () => createPublicBrandTheme,
   extendGdsTheme: () => extendGdsTheme,
   gdsDarkPublicTheme: () => gdsDarkPublicTheme,
   gdsEditorialPublicTheme: () => gdsEditorialPublicTheme,
   gdsFlatSurfaceTheme: () => gdsFlatSurfaceTheme,
   gdsTheme: () => gdsTheme,
+  getGdsFontLanes: () => getGdsFontLanes,
+  getGdsThemePresets: () => getGdsThemePresets,
+  resolveGdsFontLane: () => resolveGdsFontLane,
+  resolveGdsThemePreset: () => resolveGdsThemePreset,
   withGdsMotion: () => withGdsMotion
 });
 module.exports = __toCommonJS(server_exports);
@@ -67,7 +72,7 @@ var baseTheme = (0, import_core.mergeMantineTheme)(import_core.DEFAULT_THEME, (0
       },
       styles: {
         root: {
-          backgroundColor: "var(--mantine-color-body)"
+          background: "var(--mantine-color-body)"
         }
       }
     },
@@ -102,14 +107,14 @@ var gdsDarkPublicTheme = extendGdsTheme({
     AppShell: {
       styles: {
         main: {
-          backgroundColor: "var(--mantine-color-dark-8)"
+          background: "var(--mantine-color-dark-8)"
         }
       }
     },
     Card: {
       styles: {
         root: {
-          backgroundColor: "var(--mantine-color-dark-7)",
+          background: "var(--mantine-color-dark-7)",
           borderColor: "var(--mantine-color-dark-4)"
         }
       }
@@ -117,7 +122,7 @@ var gdsDarkPublicTheme = extendGdsTheme({
     Paper: {
       styles: {
         root: {
-          backgroundColor: "var(--mantine-color-dark-7)",
+          background: "var(--mantine-color-dark-7)",
           borderColor: "var(--mantine-color-dark-4)"
         }
       }
@@ -241,13 +246,146 @@ function withGdsMotion(overrides = {}) {
     )
   );
 }
+
+// src/theme-presets.ts
+function createVibrantPresetTheme(primaryColor, options = {}) {
+  const darkSurface = options.darkForward ? `color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 18%, var(--mantine-color-dark-8))` : "var(--mantine-color-dark-8)";
+  return extendGdsTheme({
+    primaryColor,
+    components: {
+      AppShell: {
+        styles: {
+          main: {
+            background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 58%, var(--mantine-color-white)), ${darkSurface})`
+          },
+          header: {
+            background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 68%, var(--mantine-color-white)), var(--mantine-color-dark-8))`,
+            borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-5))`
+          },
+          navbar: {
+            background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 48%, var(--mantine-color-white)), var(--mantine-color-dark-8))`,
+            borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-5))`
+          }
+        }
+      },
+      Card: {
+        styles: {
+          root: {
+            background: `light-dark(var(--mantine-color-white), color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 10%, var(--mantine-color-dark-7)))`,
+            borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-4))`
+          }
+        }
+      },
+      Paper: {
+        styles: {
+          root: {
+            background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 16%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 8%, var(--mantine-color-dark-7)))`,
+            borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-4))`
+          }
+        }
+      }
+    }
+  });
+}
+var customPresetThemes = {
+  sunset: createVibrantPresetTheme("orange"),
+  oceanic: createVibrantPresetTheme("cyan"),
+  forest: createVibrantPresetTheme("green"),
+  ruby: createVibrantPresetTheme("red"),
+  amber: createVibrantPresetTheme("yellow"),
+  "neon-night": createVibrantPresetTheme("lime", { darkForward: true }),
+  skyline: createVibrantPresetTheme("indigo"),
+  aurora: createVibrantPresetTheme("teal"),
+  coral: createVibrantPresetTheme("pink"),
+  mint: createVibrantPresetTheme("lime"),
+  orchid: createVibrantPresetTheme("grape"),
+  royal: createVibrantPresetTheme("violet")
+};
+var themePresetCatalog = [
+  { id: "default", label: "Default runtime theme", description: "Balanced, neutral baseline lane.", runtimeLane: "gdsTheme" },
+  { id: "dark-public", label: "Dark public theme", description: "Dark-first public lane.", runtimeLane: "gdsDarkPublicTheme" },
+  { id: "flat-surface", label: "Flat surface theme", description: "Lower-elevation operational lane.", runtimeLane: "gdsFlatSurfaceTheme" },
+  { id: "editorial", label: "Editorial serif theme", description: "Reading-first, serif headline lane.", runtimeLane: "gdsEditorialPublicTheme" },
+  { id: "brand", label: "Brand theme generator", description: "Governed brand composition lane.", runtimeLane: "createPublicBrandTheme(...)" },
+  { id: "sunset", label: "Sunset pulse", description: "Warm orange-magenta vibrant lane.", runtimeLane: "resolveGdsThemePreset(sunset)" },
+  { id: "oceanic", label: "Oceanic wave", description: "Cool cyan-blue vibrant lane.", runtimeLane: "resolveGdsThemePreset(oceanic)" },
+  { id: "forest", label: "Forest signal", description: "Natural emerald-driven vibrant lane.", runtimeLane: "resolveGdsThemePreset(forest)" },
+  { id: "ruby", label: "Ruby spark", description: "Bold red high-contrast lane.", runtimeLane: "resolveGdsThemePreset(ruby)" },
+  { id: "amber", label: "Amber glow", description: "Golden yellow energetic lane.", runtimeLane: "resolveGdsThemePreset(amber)" },
+  { id: "neon-night", label: "Neon night", description: "Lime-accented dark-forward lane.", runtimeLane: "resolveGdsThemePreset(neon-night)" },
+  { id: "skyline", label: "Skyline indigo", description: "Indigo technology-forward lane.", runtimeLane: "resolveGdsThemePreset(skyline)" },
+  { id: "aurora", label: "Aurora teal", description: "Fresh teal-cyan app lane for optimistic product surfaces.", runtimeLane: "resolveGdsThemePreset(aurora)" },
+  { id: "coral", label: "Coral bloom", description: "Expressive pink-coral lane for creator, commerce, and social products.", runtimeLane: "resolveGdsThemePreset(coral)" },
+  { id: "mint", label: "Mint circuit", description: "Clean green-mint lane for health, learning, and growth products.", runtimeLane: "resolveGdsThemePreset(mint)" },
+  { id: "orchid", label: "Orchid signal", description: "Purple-grape lane for editorial, culture, and premium tools.", runtimeLane: "resolveGdsThemePreset(orchid)" },
+  { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" }
+];
+function getGdsThemePresets() {
+  return themePresetCatalog;
+}
+function resolveGdsThemePreset(id, options) {
+  switch (id) {
+    case "default":
+      return gdsTheme;
+    case "dark-public":
+      return gdsDarkPublicTheme;
+    case "flat-surface":
+      return gdsFlatSurfaceTheme;
+    case "editorial":
+      return gdsEditorialPublicTheme;
+    case "brand":
+      return createPublicBrandTheme({
+        editorialSerif: options?.brandEditorialSerif ?? false,
+        flatSurfaces: options?.brandFlatSurfaces ?? true,
+        overrides: { primaryColor: options?.brandPrimary ?? "blue" }
+      });
+    default:
+      return customPresetThemes[id] ?? gdsTheme;
+  }
+}
+
+// src/font-lanes.ts
+var import_core2 = require("@mantine/core");
+var lanes = [
+  { id: "inter", label: "Inter", body: "Inter, system-ui, sans-serif", heading: "Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "manrope", label: "Manrope", body: "Manrope, system-ui, sans-serif", heading: "Manrope, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "space-grotesk", label: "Space Grotesk", body: '"Space Grotesk", Inter, system-ui, sans-serif', heading: '"Space Grotesk", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "plus-jakarta", label: "Plus Jakarta Sans", body: '"Plus Jakarta Sans", Inter, system-ui, sans-serif', heading: '"Plus Jakarta Sans", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "nunito", label: "Nunito", body: "Nunito, Inter, system-ui, sans-serif", heading: "Nunito, Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "work-sans", label: "Work Sans", body: '"Work Sans", Inter, system-ui, sans-serif', heading: '"Work Sans", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "barlow", label: "Barlow", body: "Barlow, Inter, system-ui, sans-serif", heading: "Barlow, Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "dm-sans", label: "DM Sans", body: '"DM Sans", Inter, system-ui, sans-serif', heading: '"DM Sans", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "instrument-serif", label: "Instrument Serif", body: "Inter, system-ui, sans-serif", heading: '"Instrument Serif", Georgia, serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "source-serif", label: "Source Serif", body: '"Source Serif 4", Georgia, serif', heading: '"Source Serif 4", Georgia, serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" }
+];
+function getGdsFontLanes() {
+  return lanes;
+}
+function resolveGdsFontLane(id) {
+  return lanes.find((lane) => lane.id === id) ?? lanes[0];
+}
+function applyGdsFontLane(theme, laneId) {
+  const lane = resolveGdsFontLane(laneId);
+  return (0, import_core2.mergeThemeOverrides)(theme, {
+    fontFamily: lane.body,
+    fontFamilyMonospace: lane.mono,
+    headings: {
+      fontFamily: lane.heading
+    }
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  applyGdsFontLane,
   createPublicBrandTheme,
   extendGdsTheme,
   gdsDarkPublicTheme,
   gdsEditorialPublicTheme,
   gdsFlatSurfaceTheme,
   gdsTheme,
+  getGdsFontLanes,
+  getGdsThemePresets,
+  resolveGdsFontLane,
+  resolveGdsThemePreset,
   withGdsMotion
 });

package/dist/server.mjs

@@ -1,18 +1,28 @@
 import {
+  applyGdsFontLane,
   createPublicBrandTheme,
   extendGdsTheme,
   gdsDarkPublicTheme,
   gdsEditorialPublicTheme,
   gdsFlatSurfaceTheme,
   gdsTheme,
+  getGdsFontLanes,
+  getGdsThemePresets,
+  resolveGdsFontLane,
+  resolveGdsThemePreset,
   withGdsMotion
-} from "./chunk-Z5I7D255.mjs";
+} from "./chunk-TAPLA36E.mjs";
 export {
+  applyGdsFontLane,
   createPublicBrandTheme,
   extendGdsTheme,
   gdsDarkPublicTheme,
   gdsEditorialPublicTheme,
   gdsFlatSurfaceTheme,
   gdsTheme,
+  getGdsFontLanes,
+  getGdsThemePresets,
+  resolveGdsFontLane,
+  resolveGdsThemePreset,
   withGdsMotion
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doneisbetter/gds-theme",
-  "version": "2.6.7",
+  "version": "3.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/styles.css

@@ -1,2 +1,3 @@
 @import '@mantine/core/styles.css';
 @import '@mantine/notifications/styles.css';
+@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Source+Serif+4:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700;800&display=swap');

package/dist/chunk-Z5I7D255.mjs

@@ -1,221 +0,0 @@
-// src/theme.ts
-import { DEFAULT_THEME, createTheme, mergeMantineTheme, mergeThemeOverrides } from "@mantine/core";
-var baseTheme = mergeMantineTheme(DEFAULT_THEME, createTheme({
-  primaryColor: "violet",
-  fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
-  fontSmoothing: true,
-  defaultRadius: "md",
-  black: "#111827",
-  white: "#ffffff",
-  headings: {
-    fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
-    sizes: {
-      h1: { fontSize: "2.5rem", fontWeight: "800" },
-      h2: { fontSize: "1.75rem", fontWeight: "700" },
-      h3: { fontSize: "1.25rem", fontWeight: "600" }
-    }
-  },
-  shadows: {
-    md: "0 8px 24px rgba(15, 23, 42, 0.08)",
-    lg: "0 16px 40px rgba(15, 23, 42, 0.12)"
-  },
-  components: {
-    Button: {
-      defaultProps: {
-        radius: "md",
-        size: "sm",
-        fw: 600
-      }
-    },
-    Card: {
-      defaultProps: {
-        radius: "lg",
-        shadow: "sm",
-        withBorder: true
-      },
-      styles: {
-        root: {
-          backgroundColor: "var(--mantine-color-body)"
-        }
-      }
-    },
-    Paper: {
-      defaultProps: {
-        radius: "lg",
-        withBorder: true
-      }
-    },
-    TextInput: {
-      defaultProps: {
-        radius: "md"
-      }
-    },
-    Table: {
-      defaultProps: {
-        highlightOnHover: true,
-        verticalSpacing: "md"
-      }
-    },
-    Badge: {
-      defaultProps: {
-        radius: "xl"
-      }
-    }
-  }
-}));
-var gdsTheme = baseTheme;
-var gdsDarkPublicTheme = extendGdsTheme({
-  primaryColor: "violet",
-  components: {
-    AppShell: {
-      styles: {
-        main: {
-          backgroundColor: "var(--mantine-color-dark-8)"
-        }
-      }
-    },
-    Card: {
-      styles: {
-        root: {
-          backgroundColor: "var(--mantine-color-dark-7)",
-          borderColor: "var(--mantine-color-dark-4)"
-        }
-      }
-    },
-    Paper: {
-      styles: {
-        root: {
-          backgroundColor: "var(--mantine-color-dark-7)",
-          borderColor: "var(--mantine-color-dark-4)"
-        }
-      }
-    },
-    Table: {
-      styles: {
-        table: {
-          color: "var(--mantine-color-gray-0)"
-        }
-      }
-    }
-  }
-});
-var gdsFlatSurfaceTheme = extendGdsTheme({
-  shadows: {
-    xs: "none",
-    sm: "none",
-    md: "none",
-    lg: "none",
-    xl: "none"
-  },
-  components: {
-    Card: {
-      defaultProps: {
-        shadow: void 0,
-        withBorder: true
-      }
-    },
-    Paper: {
-      defaultProps: {
-        withBorder: true
-      }
-    }
-  }
-});
-var gdsEditorialPublicTheme = extendGdsTheme({
-  headings: {
-    fontFamily: '"Instrument Serif", Georgia, "Times New Roman", serif',
-    sizes: {
-      h1: { fontSize: "2.75rem", fontWeight: "700" },
-      h2: { fontSize: "2rem", fontWeight: "700" },
-      h3: { fontSize: "1.375rem", fontWeight: "600" }
-    }
-  },
-  shadows: {
-    xs: "none",
-    sm: "none",
-    md: "none",
-    lg: "none",
-    xl: "none"
-  },
-  components: {
-    Card: {
-      defaultProps: {
-        shadow: void 0,
-        withBorder: true
-      }
-    },
-    Paper: {
-      defaultProps: {
-        withBorder: true
-      }
-    }
-  }
-});
-function composeGdsTheme(overrides = {}) {
-  return mergeMantineTheme(baseTheme, overrides);
-}
-function createPublicBrandTheme({
-  editorialSerif = false,
-  flatSurfaces = false,
-  overrides = {}
-} = {}) {
-  const layeredOverrides = [];
-  if (flatSurfaces) {
-    layeredOverrides.push(gdsFlatSurfaceTheme);
-  }
-  if (editorialSerif) {
-    layeredOverrides.push(gdsEditorialPublicTheme);
-  }
-  layeredOverrides.push(overrides);
-  const mergedOverrides = layeredOverrides.reduce(
-    (theme, layer) => mergeThemeOverrides(theme, layer),
-    {}
-  );
-  return composeGdsTheme(mergedOverrides);
-}
-function extendGdsTheme(overrides = {}) {
-  return composeGdsTheme(overrides);
-}
-function withGdsMotion(overrides = {}) {
-  return extendGdsTheme(
-    mergeThemeOverrides(
-      {
-        components: {
-          Button: {
-            styles: {
-              root: {
-                transition: "transform 150ms ease, filter 120ms ease",
-                "&:hover": {
-                  transform: "translateY(-1px)",
-                  filter: "brightness(1.05)"
-                },
-                "&:active": {
-                  transform: "translateY(0)",
-                  filter: "brightness(0.95)"
-                }
-              }
-            }
-          },
-          Card: {
-            styles: {
-              root: {
-                transition: "transform 150ms ease, box-shadow 150ms ease"
-              }
-            }
-          }
-        }
-      },
-      overrides
-    )
-  );
-}
-
-export {
-  gdsTheme,
-  gdsDarkPublicTheme,
-  gdsFlatSurfaceTheme,
-  gdsEditorialPublicTheme,
-  createPublicBrandTheme,
-  extendGdsTheme,
-  withGdsMotion
-};