@alepha/ui 0.18.1 → 0.18.3

package/src/core/atoms/themes/rosePine.ts

@@ -0,0 +1,208 @@
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Card,
+  Paper,
+  TextInput,
+} from "@mantine/core";
+import type { AlephaTheme } from "../../interfaces/AlephaTheme.ts";
+
+/**
+ * Rosé Pine theme.
+ *
+ * Muted pinks, golds, and subtle greens on warm dark backgrounds.
+ * Cozy, low-contrast, easy on the eyes.
+ * Based on the Rosé Pine color philosophy.
+ */
+export const rosePineTheme: AlephaTheme = {
+  name: "Rosé Pine",
+  description: "Muted pinks and golds on warm dark backgrounds",
+  defaultColorScheme: "dark",
+  primaryColor: "rose",
+  primaryShade: { light: 5, dark: 4 },
+  autoContrast: true,
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
+  fontFamilyMonospace:
+    'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  headings: {
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
+    fontWeight: "600",
+    textWrap: "wrap",
+    sizes: {
+      h1: { fontSize: "2rem", lineHeight: "1.25" },
+      h2: { fontSize: "1.5rem", lineHeight: "1.3" },
+      h3: { fontSize: "1.25rem", lineHeight: "1.4" },
+      h4: { fontSize: "1rem", lineHeight: "1.5" },
+      h5: { fontSize: "0.875rem", lineHeight: "1.5" },
+      h6: { fontSize: "0.75rem", lineHeight: "1.5" },
+    },
+  },
+  defaultRadius: "md",
+  radius: {
+    xs: "4px",
+    sm: "6px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+  },
+  shadows: {
+    xs: "0 1px 3px rgba(0, 0, 0, 0.2)",
+    sm: "0 2px 6px rgba(0, 0, 0, 0.2)",
+    md: "0 4px 12px rgba(0, 0, 0, 0.25)",
+    lg: "0 8px 24px rgba(0, 0, 0, 0.3)",
+    xl: "0 12px 36px rgba(0, 0, 0, 0.35)",
+  },
+  colors: {
+    // Primary — rose
+    rose: [
+      "#faf0f4",
+      "#f2d8e3",
+      "#eabdd0",
+      "#e0a0bb",
+      "#d4849f",
+      "#c4748f",
+      "#b06282",
+      "#9a5275",
+      "#7a3f5e",
+      "#5c2e47",
+    ],
+    // Accent — gold
+    gold: [
+      "#fdf8ec",
+      "#f8ecc8",
+      "#f2dda0",
+      "#eacb72",
+      "#e0b94d",
+      "#c9a33e",
+      "#a98830",
+      "#866b24",
+      "#634f1a",
+      "#403310",
+    ],
+    // Pine — muted green
+    pine: [
+      "#ecf5f0",
+      "#d0e6da",
+      "#add4be",
+      "#86c0a0",
+      "#62ac84",
+      "#4e9670",
+      "#3e7a5a",
+      "#2f5e44",
+      "#20412f",
+      "#12251b",
+    ],
+    // Foam — muted teal
+    foam: [
+      "#edf6f7",
+      "#d2e9eb",
+      "#b0d9dd",
+      "#8bc6cc",
+      "#6ab3bb",
+      "#569da5",
+      "#438088",
+      "#33636a",
+      "#23454a",
+      "#14292c",
+    ],
+    // Love — muted red
+    red: [
+      "#f9eef0",
+      "#efd3d8",
+      "#e3b2bb",
+      "#d68e9b",
+      "#c86c7c",
+      "#b25566",
+      "#944454",
+      "#733442",
+      "#52252f",
+      "#33161d",
+    ],
+    // Warm grays — subtle mauve tint
+    gray: [
+      "#f4f0f2",
+      "#e4dde1",
+      "#cec5cb",
+      "#b5aab2",
+      "#9a8e96",
+      "#7e737a",
+      "#635a60",
+      "#4a4248",
+      "#332d31",
+      "#1e1a1c",
+    ],
+    // Dark palette — Rosé Pine base/surface/overlay
+    dark: [
+      "#e0d8e0",
+      "#b0a6b2",
+      "#817786",
+      "#615768",
+      "#4a3f54",
+      "#3a3044",
+      "#2a2436",
+      "#211e2e",
+      "#1a1724",
+      "#110f1a",
+    ],
+  },
+
+  components: {
+    Button: Button.extend({
+      defaultProps: {
+        fw: 500,
+      },
+      styles: {
+        root: {
+          transition: "background-color 0.15s ease, opacity 0.15s ease",
+        },
+      },
+    }),
+
+    ActionIcon: ActionIcon.extend({
+      styles: {
+        root: {
+          transition: "background-color 0.15s ease, opacity 0.15s ease",
+        },
+      },
+    }),
+
+    Paper: Paper.extend({
+      defaultProps: {
+        shadow: "sm",
+      },
+      styles: {
+        root: {
+          border: "1px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    Card: Card.extend({
+      defaultProps: {
+        shadow: "sm",
+      },
+      styles: {
+        root: {
+          border: "1px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    TextInput: TextInput.extend({
+      styles: {
+        input: {
+          border: "1px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    Badge: Badge.extend({
+      defaultProps: {
+        fw: 500,
+      },
+    }),
+  },
+};

package/src/core/atoms/themes/softBrutalism.ts

@@ -0,0 +1,221 @@
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Card,
+  Paper,
+  TextInput,
+} from "@mantine/core";
+import type { AlephaTheme } from "../../interfaces/AlephaTheme.ts";
+
+/**
+ * Soft Brutalism theme.
+ *
+ * Pastel pop palette with solid offset shadows, rounded corners, and bold borders.
+ * A friendlier take on neubrutalism — playful but production-ready.
+ */
+export const softBrutalismTheme: AlephaTheme = {
+  name: "Soft Brutalism",
+  description: "Pastel pop with bold borders and offset shadows",
+  head: {
+    link: [
+      { rel: "preconnect", href: "https://fonts.googleapis.com" },
+      {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossorigin: "",
+      },
+      {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap",
+      },
+    ],
+  },
+  primaryColor: "lavender",
+  primaryShade: { light: 5, dark: 7 },
+  autoContrast: true,
+  cursorType: "pointer",
+  fontFamily:
+    'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
+  fontFamilyMonospace:
+    'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  headings: {
+    fontFamily:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
+    fontWeight: "700",
+    textWrap: "wrap",
+    sizes: {
+      h1: { fontSize: "2rem", lineHeight: "1.25" },
+      h2: { fontSize: "1.5rem", lineHeight: "1.3" },
+      h3: { fontSize: "1.25rem", lineHeight: "1.4" },
+      h4: { fontSize: "1rem", lineHeight: "1.5" },
+      h5: { fontSize: "0.875rem", lineHeight: "1.5" },
+      h6: { fontSize: "0.75rem", lineHeight: "1.5" },
+    },
+  },
+  defaultRadius: "md",
+  radius: {
+    xs: "6px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px",
+  },
+  shadows: {
+    xs: "2px 2px 0 0 rgba(100, 80, 140, 0.15)",
+    sm: "3px 3px 0 0 rgba(100, 80, 140, 0.2)",
+    md: "4px 4px 0 0 rgba(100, 80, 140, 0.2)",
+    lg: "6px 6px 0 0 rgba(100, 80, 140, 0.25)",
+    xl: "8px 8px 0 0 rgba(100, 80, 140, 0.3)",
+  },
+  colors: {
+    // Primary — lavender
+    lavender: [
+      "#f3f0fa",
+      "#e4dcf4",
+      "#d1c4e9",
+      "#b4a7d6",
+      "#9a8bc4",
+      "#7f6cb0",
+      "#6a549e",
+      "#543f87",
+      "#3d2d6b",
+      "#2a1d52",
+    ],
+    // Accent — peach
+    peach: [
+      "#fef3ec",
+      "#fce4d0",
+      "#f9d0ae",
+      "#f4b886",
+      "#f4a261",
+      "#e68a42",
+      "#c67234",
+      "#a35a28",
+      "#6b3a1a",
+      "#4a2710",
+    ],
+    // Success — mint
+    mint: [
+      "#ecfaf0",
+      "#d4f2dc",
+      "#b3e8c2",
+      "#8edba4",
+      "#81c995",
+      "#5ab874",
+      "#42a05c",
+      "#2e8548",
+      "#1a5c2e",
+      "#0f3f1e",
+    ],
+    // Danger — coral
+    coral: [
+      "#fef0ef",
+      "#fcd9d7",
+      "#f8b8b4",
+      "#f29490",
+      "#e97171",
+      "#d65454",
+      "#b83e3e",
+      "#962d2d",
+      "#6b1f1f",
+      "#4a1414",
+    ],
+    // Warm grays — cream-shifted
+    gray: [
+      "#faf8f6",
+      "#f0ece8",
+      "#ddd7d0",
+      "#c4bbb2",
+      "#a89e95",
+      "#8c8279",
+      "#6e655d",
+      "#524b44",
+      "#3a342f",
+      "#24211e",
+    ],
+    // Warm dark palette — lavender-tinted blacks
+    dark: [
+      "#d4d0dc",
+      "#a9a2b5",
+      "#7e7690",
+      "#5c546e",
+      "#443c56",
+      "#342d45",
+      "#2a2339",
+      "#1e1a2e",
+      "#161224",
+      "#0f0c1a",
+    ],
+  },
+
+  // ---------------------------------------------------------------------------
+  // Component overrides
+  // ---------------------------------------------------------------------------
+
+  components: {
+    Button: Button.extend({
+      defaultProps: {
+        fw: 600,
+      },
+      styles: {
+        root: {
+          border: "2px solid currentColor",
+          boxShadow: "3px 3px 0 0 rgba(100, 80, 140, 0.2)",
+          transition: "box-shadow 0.15s ease, transform 0.15s ease",
+        },
+      },
+    }),
+
+    ActionIcon: ActionIcon.extend({
+      styles: {
+        root: {
+          border: "2px solid currentColor",
+          boxShadow: "2px 2px 0 0 rgba(100, 80, 140, 0.15)",
+        },
+      },
+    }),
+
+    Paper: Paper.extend({
+      defaultProps: {
+        shadow: "sm",
+      },
+      styles: {
+        root: {
+          border: "2px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    Card: Card.extend({
+      defaultProps: {
+        shadow: "sm",
+      },
+      styles: {
+        root: {
+          border: "2px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    TextInput: TextInput.extend({
+      styles: {
+        input: {
+          border: "2px solid var(--mantine-color-default-border)",
+          transition: "box-shadow 0.15s ease, border-color 0.15s ease",
+        },
+      },
+    }),
+
+    Badge: Badge.extend({
+      defaultProps: {
+        fw: 600,
+      },
+      styles: {
+        root: {
+          border: "2px solid currentColor",
+        },
+      },
+    }),
+  },
+};

package/src/core/atoms/themes/terminal.ts

@@ -0,0 +1,186 @@
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Card,
+  Paper,
+  TextInput,
+} from "@mantine/core";
+import type { AlephaTheme } from "../../interfaces/AlephaTheme.ts";
+
+/**
+ * Terminal theme.
+ *
+ * Monospace everything, green-on-black, zero radius.
+ * CRT/hacker aesthetic for developer tools and dashboards.
+ */
+export const terminalTheme: AlephaTheme = {
+  name: "Terminal",
+  description: "Green phosphor on black — monospace hacker aesthetic",
+  defaultColorScheme: "dark",
+  primaryColor: "terminal",
+  primaryShade: { light: 5, dark: 4 },
+  autoContrast: true,
+  fontFamily:
+    'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  fontFamilyMonospace:
+    'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  headings: {
+    fontFamily:
+      'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+    fontWeight: "700",
+    textWrap: "wrap",
+    sizes: {
+      h1: { fontSize: "1.75rem", lineHeight: "1.3" },
+      h2: { fontSize: "1.375rem", lineHeight: "1.35" },
+      h3: { fontSize: "1.125rem", lineHeight: "1.4" },
+      h4: { fontSize: "1rem", lineHeight: "1.5" },
+      h5: { fontSize: "0.875rem", lineHeight: "1.5" },
+      h6: { fontSize: "0.75rem", lineHeight: "1.5" },
+    },
+  },
+  defaultRadius: "0",
+  radius: {
+    xs: "0",
+    sm: "0",
+    md: "0",
+    lg: "2px",
+    xl: "4px",
+  },
+  shadows: {
+    xs: "none",
+    sm: "none",
+    md: "0 0 8px rgba(0, 255, 65, 0.08)",
+    lg: "0 0 16px rgba(0, 255, 65, 0.1)",
+    xl: "0 0 24px rgba(0, 255, 65, 0.12)",
+  },
+  colors: {
+    // Primary — phosphor green
+    terminal: [
+      "#e6fff0",
+      "#b3ffd1",
+      "#80ffb3",
+      "#4dff94",
+      "#00ff41",
+      "#00d636",
+      "#00ad2b",
+      "#008521",
+      "#005c17",
+      "#00330d",
+    ],
+    // Amber accent
+    amber: [
+      "#fff8e6",
+      "#ffecb3",
+      "#ffe080",
+      "#ffd54d",
+      "#ffca28",
+      "#d4a520",
+      "#aa8418",
+      "#806310",
+      "#554208",
+      "#2b2104",
+    ],
+    // Danger — red
+    red: [
+      "#ffe6e6",
+      "#ffb3b3",
+      "#ff8080",
+      "#ff4d4d",
+      "#ff1a1a",
+      "#d41515",
+      "#aa1010",
+      "#800c0c",
+      "#550808",
+      "#2b0404",
+    ],
+    // Cool grays
+    gray: [
+      "#e8eaed",
+      "#c8cdd3",
+      "#a4aab3",
+      "#808892",
+      "#5f6872",
+      "#474f58",
+      "#363c44",
+      "#282d33",
+      "#1c2026",
+      "#12151a",
+    ],
+    // True black darks
+    dark: [
+      "#c9cdd2",
+      "#8b9198",
+      "#5c636b",
+      "#3d444c",
+      "#2b3138",
+      "#1e242b",
+      "#151a20",
+      "#0e1216",
+      "#080c0f",
+      "#020303",
+    ],
+  },
+
+  components: {
+    Button: Button.extend({
+      defaultProps: {
+        fw: 600,
+      },
+      styles: {
+        root: {
+          border: "1px solid currentColor",
+          textTransform: "uppercase" as const,
+          letterSpacing: "0.05em",
+          fontSize: "0.8125rem",
+        },
+      },
+    }),
+
+    ActionIcon: ActionIcon.extend({
+      styles: {
+        root: {
+          border: "1px solid currentColor",
+        },
+      },
+    }),
+
+    Paper: Paper.extend({
+      styles: {
+        root: {
+          border: "1px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    Card: Card.extend({
+      styles: {
+        root: {
+          border: "1px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    TextInput: TextInput.extend({
+      styles: {
+        input: {
+          border: "1px solid var(--mantine-color-default-border)",
+          fontFamily: "inherit",
+        },
+      },
+    }),
+
+    Badge: Badge.extend({
+      defaultProps: {
+        fw: 600,
+      },
+      styles: {
+        root: {
+          border: "1px solid currentColor",
+          textTransform: "uppercase" as const,
+          letterSpacing: "0.05em",
+        },
+      },
+    }),
+  },
+};