@charstudios/pallet 0.1.0 → 0.3.0

package/dist/index.js

@@ -135,11 +135,11 @@ function resolveColors(theme, scheme) {
 function themeToCss(theme, options = {}) {
   const selector = options.selector ?? ":root";
   const darkSelector = options.darkSelector ?? ".dark";
-  const light3 = resolveTheme(theme, "light");
+  const light4 = resolveTheme(theme, "light");
   const darkColors = resolveColors(theme, "dark");
   const variantComment = options.includeVariantComment ? `/* pallet variant: ${theme.variant} (set data-pallet-variant="${theme.variant}") */
 ` : "";
-  return variantComment + `${selector}{${cssVarsToString(light3)}}${darkSelector}{${cssVarsToString(darkColors)}}`;
+  return variantComment + `${selector}{${cssVarsToString(light4)}}${darkSelector}{${cssVarsToString(darkColors)}}`;
 }
 function serializeTheme(theme) {
   return JSON.stringify(theme);
@@ -305,124 +305,239 @@ var flat = {
   }
 };
 
-// src/presets/launch.ts
+// src/presets/frosted.ts
 var light2 = {
-  background: "oklch(0.98 0.003 264)",
-  foreground: "oklch(0.21 0.03 264)",
-  card: "oklch(1 0 0)",
-  cardForeground: "oklch(0.21 0.03 264)",
-  popover: "oklch(1 0 0)",
-  popoverForeground: "oklch(0.21 0.03 264)",
-  primary: "oklch(0.7 0.11 264)",
-  primaryForeground: "oklch(0.99 0.002 264)",
-  secondary: "oklch(0.965 0.006 264)",
-  secondaryForeground: "oklch(0.3 0.03 264)",
-  muted: "oklch(0.965 0.006 264)",
-  mutedForeground: "oklch(0.55 0.03 264)",
-  accent: "oklch(0.95 0.03 264)",
-  accentForeground: "oklch(0.42 0.11 264)",
-  destructive: "oklch(0.62 0.22 25)",
+  background: "oklch(0.94 0.02 240)",
+  foreground: "oklch(0.24 0.03 255)",
+  card: "oklch(1 0.01 240 / 55%)",
+  cardForeground: "oklch(0.24 0.03 255)",
+  popover: "oklch(1 0.01 240 / 62%)",
+  popoverForeground: "oklch(0.24 0.03 255)",
+  primary: "oklch(0.62 0.12 240)",
+  primaryForeground: "oklch(0.99 0.005 240)",
+  secondary: "oklch(0.92 0.02 240 / 70%)",
+  secondaryForeground: "oklch(0.3 0.04 255)",
+  muted: "oklch(0.93 0.015 240 / 65%)",
+  mutedForeground: "oklch(0.5 0.03 250)",
+  accent: "oklch(0.9 0.04 230 / 70%)",
+  accentForeground: "oklch(0.35 0.08 245)",
+  destructive: "oklch(0.6 0.2 25)",
   destructiveForeground: "oklch(0.99 0 0)",
-  border: "oklch(0.92 0.008 264)",
-  input: "oklch(0.965 0.006 264)",
-  ring: "oklch(0.6 0.19 264)",
-  chart1: "oklch(0.7 0.11 264)",
-  chart2: "oklch(0.62 0.15 264)",
-  chart3: "oklch(0.55 0.19 264)",
-  chart4: "oklch(0.72 0.1 210)",
-  chart5: "oklch(0.68 0.13 300)",
-  sidebar: "oklch(0.985 0.003 264)",
-  sidebarForeground: "oklch(0.21 0.03 264)",
-  sidebarPrimary: "oklch(0.7 0.11 264)",
-  sidebarPrimaryForeground: "oklch(0.99 0.002 264)",
-  sidebarAccent: "oklch(0.95 0.03 264)",
-  sidebarAccentForeground: "oklch(0.42 0.11 264)",
-  sidebarBorder: "oklch(0.92 0.008 264)",
-  sidebarRing: "oklch(0.6 0.19 264)"
+  border: "oklch(0.85 0.02 240 / 55%)",
+  input: "oklch(0.97 0.01 240 / 50%)",
+  ring: "oklch(0.62 0.14 235)",
+  chart1: "oklch(0.62 0.12 240)",
+  chart2: "oklch(0.68 0.1 200)",
+  chart3: "oklch(0.58 0.14 280)",
+  chart4: "oklch(0.72 0.08 180)",
+  chart5: "oklch(0.66 0.11 320)",
+  sidebar: "oklch(0.96 0.015 240 / 55%)",
+  sidebarForeground: "oklch(0.24 0.03 255)",
+  sidebarPrimary: "oklch(0.62 0.12 240)",
+  sidebarPrimaryForeground: "oklch(0.99 0.005 240)",
+  sidebarAccent: "oklch(0.9 0.04 230 / 70%)",
+  sidebarAccentForeground: "oklch(0.35 0.08 245)",
+  sidebarBorder: "oklch(0.85 0.02 240 / 50%)",
+  sidebarRing: "oklch(0.62 0.14 235)"
 };
 var dark2 = {
-  background: "oklch(0.19 0.02 264)",
-  foreground: "oklch(0.97 0.005 264)",
-  card: "oklch(0.23 0.024 264)",
-  cardForeground: "oklch(0.97 0.005 264)",
-  popover: "oklch(0.23 0.024 264)",
-  popoverForeground: "oklch(0.97 0.005 264)",
-  primary: "oklch(0.72 0.12 264)",
-  primaryForeground: "oklch(0.16 0.03 264)",
-  secondary: "oklch(0.28 0.02 264)",
-  secondaryForeground: "oklch(0.97 0.005 264)",
-  muted: "oklch(0.28 0.02 264)",
-  mutedForeground: "oklch(0.72 0.02 264)",
-  accent: "oklch(0.32 0.05 264)",
-  accentForeground: "oklch(0.9 0.05 264)",
-  destructive: "oklch(0.7 0.19 22)",
+  background: "oklch(0.18 0.03 260)",
+  foreground: "oklch(0.96 0.01 240)",
+  card: "oklch(0.28 0.04 260 / 45%)",
+  cardForeground: "oklch(0.96 0.01 240)",
+  popover: "oklch(0.3 0.04 260 / 52%)",
+  popoverForeground: "oklch(0.96 0.01 240)",
+  primary: "oklch(0.72 0.12 230)",
+  primaryForeground: "oklch(0.18 0.03 260)",
+  secondary: "oklch(0.32 0.03 260 / 55%)",
+  secondaryForeground: "oklch(0.96 0.01 240)",
+  muted: "oklch(0.3 0.03 260 / 50%)",
+  mutedForeground: "oklch(0.72 0.03 250)",
+  accent: "oklch(0.36 0.05 250 / 55%)",
+  accentForeground: "oklch(0.92 0.03 230)",
+  destructive: "oklch(0.68 0.18 22)",
   destructiveForeground: "oklch(0.99 0 0)",
-  border: "oklch(1 0 0 / 10%)",
-  input: "oklch(1 0 0 / 12%)",
-  ring: "oklch(0.65 0.17 264)",
-  chart1: "oklch(0.72 0.12 264)",
-  chart2: "oklch(0.64 0.15 264)",
-  chart3: "oklch(0.58 0.18 264)",
-  chart4: "oklch(0.74 0.1 210)",
-  chart5: "oklch(0.7 0.13 300)",
-  sidebar: "oklch(0.21 0.022 264)",
-  sidebarForeground: "oklch(0.97 0.005 264)",
-  sidebarPrimary: "oklch(0.72 0.12 264)",
-  sidebarPrimaryForeground: "oklch(0.16 0.03 264)",
-  sidebarAccent: "oklch(0.32 0.05 264)",
-  sidebarAccentForeground: "oklch(0.9 0.05 264)",
-  sidebarBorder: "oklch(1 0 0 / 10%)",
-  sidebarRing: "oklch(0.65 0.17 264)"
+  border: "oklch(1 0 0 / 14%)",
+  input: "oklch(1 0 0 / 10%)",
+  ring: "oklch(0.7 0.12 230)",
+  chart1: "oklch(0.72 0.12 230)",
+  chart2: "oklch(0.7 0.1 200)",
+  chart3: "oklch(0.66 0.14 280)",
+  chart4: "oklch(0.74 0.08 180)",
+  chart5: "oklch(0.68 0.11 320)",
+  sidebar: "oklch(0.22 0.035 260 / 50%)",
+  sidebarForeground: "oklch(0.96 0.01 240)",
+  sidebarPrimary: "oklch(0.72 0.12 230)",
+  sidebarPrimaryForeground: "oklch(0.18 0.03 260)",
+  sidebarAccent: "oklch(0.36 0.05 250 / 55%)",
+  sidebarAccentForeground: "oklch(0.92 0.03 230)",
+  sidebarBorder: "oklch(1 0 0 / 12%)",
+  sidebarRing: "oklch(0.7 0.12 230)"
 };
-var launch = {
-  name: "launch",
-  variant: "launch",
+var frosted = {
+  name: "frosted",
+  variant: "frosted",
   colors: { light: light2, dark: dark2 },
   typography: {
     sans: '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
-    heading: '"Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif',
+    heading: '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
     mono: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
-    googleFonts: ["Inter", "Plus Jakarta Sans"]
+    googleFonts: ["Inter"]
   },
   radius: {
-    base: "1.25rem",
-    // A slightly gentler ramp so large elements do not over-round.
+    base: "0.75rem",
     scale: {
-      sm: 0.4,
-      md: 0.6,
+      sm: 0.55,
+      md: 0.8,
       lg: 1,
       xl: 1.2,
-      "2xl": 1.5,
-      "3xl": 1.8,
-      "4xl": 2.2
+      "2xl": 1.4,
+      "3xl": 1.6,
+      "4xl": 1.8
     }
   },
   elevation: {
     shadows: {
-      xs: "0 1px 2px 0 oklch(0.55 0.19 264 / 0.06)",
-      sm: "0 2px 8px -2px oklch(0.55 0.19 264 / 0.10), 0 1px 3px -1px oklch(0 0 0 / 0.05)",
-      md: "0 6px 20px -6px oklch(0.55 0.19 264 / 0.16), 0 2px 6px -2px oklch(0 0 0 / 0.06)",
-      lg: "0 14px 34px -10px oklch(0.55 0.19 264 / 0.20), 0 4px 10px -4px oklch(0 0 0 / 0.07)",
-      xl: "0 24px 56px -16px oklch(0.55 0.19 264 / 0.26), 0 8px 18px -8px oklch(0 0 0 / 0.08)"
+      xs: "none",
+      sm: "none",
+      md: "0 4px 16px -8px oklch(0.45 0.08 240 / 0.12)",
+      lg: "0 10px 28px -12px oklch(0.45 0.08 240 / 0.16)",
+      xl: "0 18px 40px -16px oklch(0.45 0.08 240 / 0.2)"
     },
-    borderStrength: 0.5,
-    level: "md"
+    borderStrength: 0.35,
+    level: "sm"
   },
   density: {
-    spacing: "0.26rem",
-    scale: 1.1
+    spacing: "0.25rem",
+    scale: 1.05
   },
   motion: {
-    duration: 240,
+    duration: 260,
     easing: "cubic-bezier(0.22, 1, 0.36, 1)",
     intensity: 1
   }
 };
 
+// src/presets/toon.ts
+var light3 = {
+  background: "oklch(0.965 0.005 260)",
+  foreground: "oklch(0.22 0.02 260)",
+  card: "oklch(1 0 0)",
+  cardForeground: "oklch(0.22 0.02 260)",
+  popover: "oklch(1 0 0)",
+  popoverForeground: "oklch(0.22 0.02 260)",
+  primary: "oklch(0.55 0.19 255)",
+  primaryForeground: "oklch(0.99 0.005 255)",
+  secondary: "oklch(0.96 0.01 260)",
+  secondaryForeground: "oklch(0.28 0.03 260)",
+  muted: "oklch(0.95 0.008 260)",
+  mutedForeground: "oklch(0.52 0.02 260)",
+  accent: "oklch(0.94 0.03 255)",
+  accentForeground: "oklch(0.4 0.12 255)",
+  destructive: "oklch(0.58 0.22 25)",
+  destructiveForeground: "oklch(0.99 0 0)",
+  border: "oklch(0.82 0.015 260)",
+  input: "oklch(1 0 0)",
+  ring: "oklch(0.55 0.19 255)",
+  chart1: "oklch(0.55 0.19 255)",
+  chart2: "oklch(0.62 0.18 300)",
+  chart3: "oklch(0.7 0.16 55)",
+  chart4: "oklch(0.65 0.17 145)",
+  chart5: "oklch(0.6 0.2 25)",
+  sidebar: "oklch(1 0 0)",
+  sidebarForeground: "oklch(0.22 0.02 260)",
+  sidebarPrimary: "oklch(0.55 0.19 255)",
+  sidebarPrimaryForeground: "oklch(0.99 0.005 255)",
+  sidebarAccent: "oklch(0.94 0.03 255)",
+  sidebarAccentForeground: "oklch(0.4 0.12 255)",
+  sidebarBorder: "oklch(0.82 0.015 260)",
+  sidebarRing: "oklch(0.55 0.19 255)"
+};
+var dark3 = {
+  background: "oklch(0.18 0.02 260)",
+  foreground: "oklch(0.96 0.01 260)",
+  card: "oklch(0.24 0.025 260)",
+  cardForeground: "oklch(0.96 0.01 260)",
+  popover: "oklch(0.24 0.025 260)",
+  popoverForeground: "oklch(0.96 0.01 260)",
+  primary: "oklch(0.68 0.16 255)",
+  primaryForeground: "oklch(0.18 0.03 260)",
+  secondary: "oklch(0.3 0.02 260)",
+  secondaryForeground: "oklch(0.96 0.01 260)",
+  muted: "oklch(0.3 0.02 260)",
+  mutedForeground: "oklch(0.7 0.02 260)",
+  accent: "oklch(0.32 0.05 255)",
+  accentForeground: "oklch(0.85 0.06 255)",
+  destructive: "oklch(0.68 0.18 22)",
+  destructiveForeground: "oklch(0.99 0 0)",
+  border: "oklch(1 0 0 / 16%)",
+  input: "oklch(0.24 0.025 260)",
+  ring: "oklch(0.68 0.16 255)",
+  chart1: "oklch(0.68 0.16 255)",
+  chart2: "oklch(0.7 0.15 300)",
+  chart3: "oklch(0.75 0.14 55)",
+  chart4: "oklch(0.7 0.14 145)",
+  chart5: "oklch(0.68 0.18 25)",
+  sidebar: "oklch(0.22 0.025 260)",
+  sidebarForeground: "oklch(0.96 0.01 260)",
+  sidebarPrimary: "oklch(0.68 0.16 255)",
+  sidebarPrimaryForeground: "oklch(0.18 0.03 260)",
+  sidebarAccent: "oklch(0.32 0.05 255)",
+  sidebarAccentForeground: "oklch(0.85 0.06 255)",
+  sidebarBorder: "oklch(1 0 0 / 14%)",
+  sidebarRing: "oklch(0.68 0.16 255)"
+};
+var toon = {
+  name: "toon",
+  variant: "toon",
+  colors: { light: light3, dark: dark3 },
+  typography: {
+    sans: '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    heading: '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
+    googleFonts: ["Inter"]
+  },
+  radius: {
+    base: "0.75rem",
+    scale: {
+      sm: 0.55,
+      md: 0.75,
+      lg: 1,
+      xl: 1.15,
+      "2xl": 1.35,
+      "3xl": 1.55,
+      "4xl": 1.75
+    }
+  },
+  elevation: {
+    // Hard lips live in the variant CSS — keep token shadows empty so utilities
+    // like `shadow-sm` do not reintroduce soft elevation.
+    shadows: {
+      xs: "none",
+      sm: "none",
+      md: "none",
+      lg: "none",
+      xl: "none"
+    },
+    borderStrength: 1,
+    level: "none"
+  },
+  density: {
+    spacing: "0.25rem",
+    scale: 1
+  },
+  motion: {
+    duration: 160,
+    easing: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    intensity: 1
+  }
+};
+
 // src/presets/index.ts
 var presets = {
   flat,
-  launch
+  toon,
+  frosted
 };
 function getPreset(name) {
   return presets[name];
@@ -646,6 +761,6 @@ function useColorScheme() {
   };
 }
 
-export { DEFAULT_RADIUS_SCALE, PalletContext, ThemeProvider, applyCssVars, buildGoogleFontsUrl, clearCssVars, colorTokensToVars, cssVarsToString, deepMerge, defaultPreset, deserializeTheme, flat, getPreset, launch, loadGoogleFonts, mergeAll, presets, resolveColors, resolveTheme, serializeTheme, structuralVars, themeToCss, themeToInlineStyle, useColorScheme, usePalletContext, usePreset, useTheme, useThemeControls };
+export { DEFAULT_RADIUS_SCALE, PalletContext, ThemeProvider, applyCssVars, buildGoogleFontsUrl, clearCssVars, colorTokensToVars, cssVarsToString, deepMerge, defaultPreset, deserializeTheme, flat, frosted, getPreset, loadGoogleFonts, mergeAll, presets, resolveColors, resolveTheme, serializeTheme, structuralVars, themeToCss, themeToInlineStyle, toon, useColorScheme, usePalletContext, usePreset, useTheme, useThemeControls };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map