@praxiis/ui 0.0.1

package/src/core/restyle/restylePresetRegistry.ts

@@ -0,0 +1,195 @@
+/**
+ * El Sendero Design System - Restyle Preset Registry
+ *
+ * Pre-built Restyle themes for each design-system preset.
+ * Ensures Restyle components visually match the active preset.
+ */
+
+import {
+  lightSemanticColors,
+  darkSemanticColors,
+} from "../../tokens";
+import {
+  restyleLightTheme,
+  restyleDarkTheme,
+  buildRestyleThemeFromThemeColors,
+} from "./restyleTheme";
+import type { ThemeColors, DeepPartial } from "../../providers/ThemeProvider/types";
+
+export type RestyleThemePair = {
+  light: typeof restyleLightTheme;
+  dark: typeof restyleDarkTheme;
+};
+
+/**
+ * Build light + dark Restyle themes from ThemeColors overrides.
+ * The most convenient way to create a custom theme pair — only specify
+ * what differs from the default semantic colors.
+ */
+export function buildPair(
+  lightOverrides: DeepPartial<ThemeColors>,
+  darkOverrides: DeepPartial<ThemeColors>,
+): RestyleThemePair {
+  return {
+    light: buildRestyleThemeFromThemeColors(lightSemanticColors, lightOverrides),
+    dark: buildRestyleThemeFromThemeColors(darkSemanticColors, darkOverrides),
+  };
+}
+
+// Horizon uses base colors — no overrides needed
+const horizon: RestyleThemePair = {
+  light: restyleLightTheme,
+  dark: restyleDarkTheme,
+};
+
+// Sage — green accents
+const sage = buildPair(
+  {
+    accent: {
+      primary: "#6B8F6B",
+      primaryHover: "#557255",
+      primaryPressed: "#445944",
+      secondary: "#8FAF8F",
+      secondaryHover: "#6B8F6B",
+      secondaryPressed: "#557255",
+    },
+    text: { link: "#6B8F6B" },
+    border: { focus: "#6B8F6B" },
+  },
+  {
+    accent: {
+      primary: "#8FAF8F",
+      primaryHover: "#B3C7B3",
+      primaryPressed: "#6B8F6B",
+      secondary: "#6B8F6B",
+      secondaryHover: "#8FAF8F",
+      secondaryPressed: "#557255",
+    },
+    text: { link: "#8FAF8F" },
+    border: { focus: "#8FAF8F" },
+  },
+);
+
+// Sunset — warm coral accents
+const sunset = buildPair(
+  {
+    accent: {
+      primary: "#E8836B",
+      primaryHover: "#CC6B55",
+      primaryPressed: "#A85545",
+      secondary: "#FF9B85",
+      secondaryHover: "#E8836B",
+      secondaryPressed: "#CC6B55",
+    },
+    text: { link: "#E8836B" },
+    border: { focus: "#E8836B" },
+  },
+  {
+    accent: {
+      primary: "#FF9B85",
+      primaryHover: "#FFBAA8",
+      primaryPressed: "#E8836B",
+      secondary: "#E8836B",
+      secondaryHover: "#FF9B85",
+      secondaryPressed: "#CC6B55",
+    },
+    text: { link: "#FF9B85" },
+    border: { focus: "#FF9B85" },
+  },
+);
+
+// Ocean — teal accents
+const ocean = buildPair(
+  {
+    accent: {
+      primary: "#0E9AA5",
+      primaryHover: "#0B7E87",
+      primaryPressed: "#086269",
+      secondary: "#2DD4BF",
+      secondaryHover: "#0E9AA5",
+      secondaryPressed: "#0B7E87",
+    },
+    text: { link: "#0E9AA5" },
+    border: { focus: "#0E9AA5" },
+  },
+  {
+    accent: {
+      primary: "#2DD4BF",
+      primaryHover: "#5EEAD4",
+      primaryPressed: "#0E9AA5",
+      secondary: "#0E9AA5",
+      secondaryHover: "#2DD4BF",
+      secondaryPressed: "#0B7E87",
+    },
+    text: { link: "#2DD4BF" },
+    border: { focus: "#2DD4BF" },
+  },
+);
+
+// Lavender — purple accents
+const lavender = buildPair(
+  {
+    accent: {
+      primary: "#8B5CF6",
+      primaryHover: "#7C3AED",
+      primaryPressed: "#6D28D9",
+      secondary: "#A78BFA",
+      secondaryHover: "#8B5CF6",
+      secondaryPressed: "#7C3AED",
+    },
+    text: { link: "#8B5CF6" },
+    border: { focus: "#8B5CF6" },
+  },
+  {
+    accent: {
+      primary: "#A78BFA",
+      primaryHover: "#C4B5FD",
+      primaryPressed: "#8B5CF6",
+      secondary: "#8B5CF6",
+      secondaryHover: "#A78BFA",
+      secondaryPressed: "#7C3AED",
+    },
+    text: { link: "#A78BFA" },
+    border: { focus: "#A78BFA" },
+  },
+);
+
+// Rose — pink accents
+const rose = buildPair(
+  {
+    accent: {
+      primary: "#E11D6C",
+      primaryHover: "#BE185D",
+      primaryPressed: "#9D174D",
+      secondary: "#F472B6",
+      secondaryHover: "#E11D6C",
+      secondaryPressed: "#BE185D",
+    },
+    text: { link: "#E11D6C" },
+    border: { focus: "#E11D6C" },
+  },
+  {
+    accent: {
+      primary: "#F472B6",
+      primaryHover: "#F9A8D4",
+      primaryPressed: "#E11D6C",
+      secondary: "#E11D6C",
+      secondaryHover: "#F472B6",
+      secondaryPressed: "#BE185D",
+    },
+    text: { link: "#F472B6" },
+    border: { focus: "#F472B6" },
+  },
+);
+
+/**
+ * Map of all preset Restyle themes, keyed by preset name.
+ */
+export const restylePresetThemes: Record<string, RestyleThemePair> = {
+  horizon,
+  sage,
+  sunset,
+  ocean,
+  lavender,
+  rose,
+};