@alepha/ui 0.18.0 → 0.18.2

package/src/auth/components/buttons/UserButton.tsx

@@ -64,7 +64,7 @@ const UserButton = (props: UserButtonProps) => {
     ...buttonProps
   } = props;
 
-  buttonProps.variant ??= "subtle";
+  buttonProps.variant ??= "default";
 
   const adminUserCtrl = useClient<AdminUserController>();
   const pages = useInject(ReactPageProvider);
@@ -93,8 +93,6 @@ const UserButton = (props: UserButtonProps) => {
     );
   }
 
-  const userLabel = auth.user.username || auth.user.email;
-
   const items: ActionMenuItem[] = [];
 
   // Add user info label if available

package/src/core/atoms/alephaSidebarAtom.ts

@@ -26,7 +26,7 @@ export const alephaSidebarAtom = $atom({
     closed: true,
     collapsed: false,
     expandedWidth: 300,
-    collapsedWidth: 78,
+    collapsedWidth: 72,
   },
 });
 

package/src/core/atoms/alephaThemeListAtom.ts

@@ -1,12 +1,25 @@
 import { $atom, type Static, t } from "alepha";
 import type { AlephaTheme } from "../interfaces/AlephaTheme.ts";
 import { defaultTheme } from "./themes/default.ts";
+import { editorialTheme } from "./themes/editorial.ts";
 import { midnightTheme } from "./themes/midnight.ts";
+import { monochromeTheme } from "./themes/monochrome.ts";
+import { rosePineTheme } from "./themes/rosePine.ts";
+import { softBrutalismTheme } from "./themes/softBrutalism.ts";
+import { terminalTheme } from "./themes/terminal.ts";
 
 export const alephaThemeListAtom = $atom({
   name: "alepha.ui.themeList",
   schema: t.array(t.json<AlephaTheme>()), // TODO: translate to proper schema
-  default: [defaultTheme, midnightTheme],
+  default: [
+    defaultTheme,
+    midnightTheme,
+    softBrutalismTheme,
+    terminalTheme,
+    editorialTheme,
+    rosePineTheme,
+    monochromeTheme,
+  ],
 });
 
 export type AlephaThemeListAtom = Static<typeof alephaThemeListAtom.schema>;

package/src/core/atoms/alephaThemeOverridesAtom.ts

@@ -0,0 +1,17 @@
+import { $atom, type Static, t } from "alepha";
+
+export const alephaThemeOverridesAtom = $atom({
+  name: "alepha.ui.themeOverrides",
+  schema: t.object({
+    primaryColor: t.optional(t.text()),
+    radius: t.optional(t.text()),
+    fontFamily: t.optional(t.text()),
+    fontSize: t.optional(t.text()),
+    scale: t.optional(t.text()),
+  }),
+  default: {},
+});
+
+export type AlephaThemeOverrides = Static<
+  typeof alephaThemeOverridesAtom.schema
+>;

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

@@ -0,0 +1,184 @@
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Card,
+  Paper,
+  TextInput,
+} from "@mantine/core";
+import type { AlephaTheme } from "../../interfaces/AlephaTheme.ts";
+
+/**
+ * Editorial theme.
+ *
+ * Serif typography, high contrast black and white, thin borders, generous whitespace.
+ * Newspaper/magazine aesthetic — elegant restraint.
+ */
+export const editorialTheme: AlephaTheme = {
+  name: "Editorial",
+  description: "Serif typography with newspaper elegance",
+  defaultColorScheme: "light",
+  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=Playfair+Display:wght@400;600;700;800&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap",
+      },
+    ],
+  },
+  primaryColor: "ink",
+  primaryShade: { light: 7, dark: 3 },
+  autoContrast: true,
+  fontFamily: '"Source Serif 4", "Georgia", "Times New Roman", serif',
+  fontFamilyMonospace:
+    'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  headings: {
+    fontFamily: '"Playfair Display", "Georgia", "Times New Roman", serif',
+    fontWeight: "700",
+    textWrap: "wrap",
+    sizes: {
+      h1: { fontSize: "2.5rem", lineHeight: "1.15" },
+      h2: { fontSize: "1.75rem", lineHeight: "1.2" },
+      h3: { fontSize: "1.375rem", lineHeight: "1.3" },
+      h4: { fontSize: "1.125rem", lineHeight: "1.4" },
+      h5: { fontSize: "1rem", lineHeight: "1.5" },
+      h6: { fontSize: "0.875rem", lineHeight: "1.5" },
+    },
+  },
+  defaultRadius: "sm",
+  radius: {
+    xs: "2px",
+    sm: "3px",
+    md: "4px",
+    lg: "6px",
+    xl: "8px",
+  },
+  shadows: {
+    xs: "0 1px 2px rgba(0, 0, 0, 0.06)",
+    sm: "0 1px 3px rgba(0, 0, 0, 0.08)",
+    md: "0 2px 6px rgba(0, 0, 0, 0.08)",
+    lg: "0 4px 12px rgba(0, 0, 0, 0.1)",
+    xl: "0 8px 24px rgba(0, 0, 0, 0.1)",
+  },
+  colors: {
+    // Primary — ink black with warm tint
+    ink: [
+      "#f5f3f0",
+      "#e8e4de",
+      "#d4cec5",
+      "#b5ad9f",
+      "#8c8272",
+      "#6b6050",
+      "#4a4035",
+      "#332b22",
+      "#1f1812",
+      "#0d0a07",
+    ],
+    // Accent — muted burgundy
+    burgundy: [
+      "#faf0f0",
+      "#f0d4d4",
+      "#e0adad",
+      "#cc8585",
+      "#b35e5e",
+      "#944545",
+      "#763636",
+      "#5a2828",
+      "#3d1b1b",
+      "#220f0f",
+    ],
+    // Warm grays — paper-tinted
+    gray: [
+      "#faf9f7",
+      "#f0eee9",
+      "#e0dcd5",
+      "#c8c2b8",
+      "#a8a194",
+      "#8a8273",
+      "#6b6456",
+      "#504a3f",
+      "#36322b",
+      "#1e1b17",
+    ],
+    // Dark palette — warm charcoal
+    dark: [
+      "#d5d2cd",
+      "#aba59c",
+      "#817a6e",
+      "#5e584e",
+      "#46413a",
+      "#36322c",
+      "#2a2721",
+      "#201d19",
+      "#171411",
+      "#0d0b09",
+    ],
+  },
+
+  components: {
+    Button: Button.extend({
+      defaultProps: {
+        fw: 600,
+      },
+      styles: {
+        root: {
+          letterSpacing: "0.02em",
+        },
+      },
+    }),
+
+    ActionIcon: ActionIcon.extend({
+      styles: {
+        root: {
+          border: "1px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    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)",
+        },
+      },
+    }),
+
+    Badge: Badge.extend({
+      defaultProps: {
+        fw: 600,
+        variant: "outline",
+      },
+      styles: {
+        root: {
+          fontFamily:
+            '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+          letterSpacing: "0.04em",
+          textTransform: "uppercase" as const,
+          fontSize: "0.65rem",
+        },
+      },
+    }),
+  },
+};

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

@@ -0,0 +1,197 @@
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Card,
+  Paper,
+  TextInput,
+} from "@mantine/core";
+import type { AlephaTheme } from "../../interfaces/AlephaTheme.ts";
+
+/**
+ * Monochrome theme.
+ *
+ * Pure black and white. No color. Bold typography does all the heavy lifting.
+ * A design-school statement piece — minimalist color, maximalist type.
+ */
+export const monochromeTheme: AlephaTheme = {
+  name: "Monochrome",
+  description: "Pure black and white — zero color, maximum typography",
+  primaryColor: "mono",
+  primaryShade: { light: 8, dark: 1 },
+  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: "800",
+    textWrap: "wrap",
+    sizes: {
+      h1: { fontSize: "2.25rem", lineHeight: "1.15" },
+      h2: { fontSize: "1.625rem", lineHeight: "1.25" },
+      h3: { fontSize: "1.25rem", lineHeight: "1.35" },
+      h4: { fontSize: "1.0625rem", lineHeight: "1.45" },
+      h5: { fontSize: "0.9375rem", lineHeight: "1.5" },
+      h6: { fontSize: "0.8125rem", lineHeight: "1.5" },
+    },
+  },
+  defaultRadius: "0",
+  radius: {
+    xs: "0",
+    sm: "0",
+    md: "0",
+    lg: "0",
+    xl: "2px",
+  },
+  shadows: {
+    xs: "0 1px 2px rgba(0, 0, 0, 0.08)",
+    sm: "0 1px 4px rgba(0, 0, 0, 0.1)",
+    md: "0 2px 8px rgba(0, 0, 0, 0.12)",
+    lg: "0 4px 16px rgba(0, 0, 0, 0.14)",
+    xl: "0 8px 32px rgba(0, 0, 0, 0.16)",
+  },
+  colors: {
+    // Primary — pure grayscale
+    mono: [
+      "#f5f5f5",
+      "#e0e0e0",
+      "#c0c0c0",
+      "#a0a0a0",
+      "#808080",
+      "#606060",
+      "#404040",
+      "#282828",
+      "#141414",
+      "#000000",
+    ],
+    // Gray — identical to mono for consistency
+    gray: [
+      "#f5f5f5",
+      "#e5e5e5",
+      "#cccccc",
+      "#b0b0b0",
+      "#909090",
+      "#707070",
+      "#555555",
+      "#3a3a3a",
+      "#252525",
+      "#121212",
+    ],
+    // "Colors" are all grayscale — no hue anywhere
+    blue: [
+      "#f5f5f5",
+      "#e0e0e0",
+      "#c0c0c0",
+      "#a0a0a0",
+      "#808080",
+      "#606060",
+      "#404040",
+      "#282828",
+      "#141414",
+      "#000000",
+    ],
+    green: [
+      "#f5f5f5",
+      "#e0e0e0",
+      "#c0c0c0",
+      "#a0a0a0",
+      "#808080",
+      "#606060",
+      "#404040",
+      "#282828",
+      "#141414",
+      "#000000",
+    ],
+    red: [
+      "#f5f5f5",
+      "#e0e0e0",
+      "#c0c0c0",
+      "#a0a0a0",
+      "#808080",
+      "#606060",
+      "#404040",
+      "#282828",
+      "#141414",
+      "#000000",
+    ],
+    // Dark palette — true blacks
+    dark: [
+      "#d0d0d0",
+      "#a0a0a0",
+      "#707070",
+      "#505050",
+      "#383838",
+      "#282828",
+      "#1c1c1c",
+      "#141414",
+      "#0a0a0a",
+      "#000000",
+    ],
+  },
+
+  components: {
+    Button: Button.extend({
+      defaultProps: {
+        fw: 700,
+      },
+      styles: {
+        root: {
+          border: "2px solid currentColor",
+          letterSpacing: "0.03em",
+          textTransform: "uppercase" as const,
+          fontSize: "0.8125rem",
+        },
+      },
+    }),
+
+    ActionIcon: ActionIcon.extend({
+      styles: {
+        root: {
+          border: "2px solid currentColor",
+        },
+      },
+    }),
+
+    Paper: Paper.extend({
+      styles: {
+        root: {
+          border: "2px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    Card: Card.extend({
+      styles: {
+        root: {
+          border: "2px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    TextInput: TextInput.extend({
+      styles: {
+        input: {
+          border: "2px solid var(--mantine-color-default-border)",
+        },
+      },
+    }),
+
+    Badge: Badge.extend({
+      defaultProps: {
+        fw: 700,
+        variant: "outline",
+      },
+      styles: {
+        root: {
+          textTransform: "uppercase" as const,
+          letterSpacing: "0.06em",
+          fontSize: "0.65rem",
+          border: "2px solid currentColor",
+        },
+      },
+    }),
+  },
+};

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,
+      },
+    }),
+  },
+};