@alepha/ui 0.18.1 → 0.18.2

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

package/src/core/components/Flex.tsx

@@ -29,10 +29,65 @@ export interface FlexProps extends MantineFlexProps {
    * Shorthand for direction="column".
    */
   col?: boolean;
+
+  /**
+   * Set ground to `var(--alepha-ground)`.
+   */
+  ground?: boolean;
+
+  /**
+   * Set ground to `var(--alepha-surface)`.
+   */
+  surface?: boolean;
+
+  /**
+   * Set ground to `var(--alepha-elevated)`.
+   */
+  elevated?: boolean;
+
+  /**
+   * Add rounded corners to the container. If `true`, a default border radius will be applied. You can also specify a custom border radius value (e.g., "sm", "md", "lg", or any valid CSS border-radius value).
+   */
+  rounded?: boolean | number | string;
+
+  /**
+   * Add a border to the container. The color will be determined by the current theme.
+   */
+  bordered?: boolean;
+
+  /**
+   * Add a top border only.
+   */
+  borderedTop?: boolean;
+
+  /**
+   * Add a bottom border only.
+   */
+  borderedBottom?: boolean;
+
+  /**
+   * Add a shadow to the container. The intensity will be determined by the current theme.
+   */
+  shadowed?: boolean | number | string;
 }
 
 const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
-  const { fill, center, centerX, centerY, col, ...rest } = props;
+  const {
+    fill,
+    center,
+    centerX,
+    centerY,
+    col,
+    ground,
+    surface,
+    elevated,
+    rounded,
+    bordered,
+    borderedTop,
+    borderedBottom,
+    shadowed,
+    ...rest
+  } = props;
 
   if (fill) {
     rest.flex ??= 1;
@@ -55,6 +110,41 @@ const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
     rest.align ??= "center";
   }
 
+  if (ground) {
+    rest.bg = "var(--alepha-ground)";
+  } else if (surface) {
+    rest.bg = "var(--alepha-surface)";
+  } else if (elevated) {
+    rest.bg = "var(--alepha-elevated)";
+  }
+
+  if (rounded) {
+    rest.bdrs = rounded === true ? "md" : rounded;
+  }
+
+  if (bordered) {
+    rest.bd = "1px solid var(--alepha-border)";
+  }
+
+  if (borderedTop) {
+    rest.style = {
+      borderTop: "1px solid var(--alepha-border)",
+      ...((rest.style as object) ?? {}),
+    };
+  }
+
+  if (borderedBottom) {
+    rest.style = {
+      borderBottom: "1px solid var(--alepha-border)",
+      ...((rest.style as object) ?? {}),
+    };
+  }
+
+  if (shadowed) {
+    rest.className =
+      `${rest.className ?? ""} shadow-${shadowed === true ? "md" : shadowed}`.trim();
+  }
+
   return <MantineFlex ref={ref} {...rest} />;
 });
 

package/src/core/components/Text.tsx

@@ -109,7 +109,7 @@ const Text = forwardRef<HTMLParagraphElement, TextProps>((props, ref) => {
   }
 
   if (small) {
-    rest.size ??= "sm";
+    rest.size ??= "xs";
   }
 
   if (uppercase) {

package/src/core/components/buttons/ActionButton.tsx

@@ -8,7 +8,6 @@ import {
   type MenuItemProps,
   type MenuProps,
   type MenuTargetProps,
-  ThemeIcon,
   type ThemeIconProps,
   Tooltip,
   type TooltipProps,
@@ -140,6 +139,8 @@ export interface ActionCommonProps extends ButtonProps {
    */
   icon?: ReactNode | ComponentType;
 
+  iconSize?: number | string;
+
   /**
    * Additional props to pass to the ThemeIcon wrapping the icon.
    */
@@ -221,16 +222,16 @@ const ActionMenuItem = (props: {
   return (
     <Menu.Item
       key={index}
-      leftSection={item.icon}
+      leftSection={
+        item.icon ??
+        (item.active ? (
+          <IconCheck size={ui.sizes.icon.sm} />
+        ) : (
+          <Flex w={ui.sizes.icon.sm} />
+        ))
+      }
       onClick={item.onClick}
       color={item.color}
-      rightSection={
-        item.active ? (
-          <ThemeIcon size={"xs"} variant={"transparent"}>
-            <IconCheck />
-          </ThemeIcon>
-        ) : undefined
-      }
       {...menuItemProps}
     >
       {item.label}
@@ -241,16 +242,10 @@ const ActionMenuItem = (props: {
 const ActionButton = (_props: ActionProps) => {
   const theme = useMantineTheme();
   const props = { ..._props };
-  const { tooltip, menu, icon, ...restProps } = props;
-
-  if (props.variant === "subtle" || props.variant === "outline") {
-    restProps.color ??= "gray";
-  }
+  const { tooltip, menu, icon, iconSize, ...restProps } = props;
 
   if (props.intent) {
-    if (props.intent === "none") {
-      restProps.color ??= "gray";
-    } else if (props.intent === "primary") {
+    if (props.intent === "primary") {
       restProps.color ??= theme.primaryColor;
     } else if (props.intent === "success") {
       restProps.c ??= "white";
@@ -268,15 +263,16 @@ const ActionButton = (_props: ActionProps) => {
 
   if (props.icon) {
     const sizes = ui.sizes.icon as Record<string, number>;
+    const iconSize = props.iconSize ?? sizes[props.size || "sm"];
     const icon = isComponentType(props.icon) ? (
-      <props.icon size={sizes[props.size || "md"]} />
+      <props.icon size={iconSize} />
     ) : (
       <span>{props.icon as ReactNode}</span>
     );
 
     if (!props.children) {
       restProps.children = Children.only(icon);
-      restProps.px ??= "xs"; // TODO: change based on props.size ?
+      restProps.p ??= 8;
     } else {
       restProps.leftSection = icon;
     }

package/src/core/components/buttons/DarkModeButton.tsx

@@ -20,14 +20,14 @@ const DarkModeButton = (props: Partial<ActionProps>) => {
     setColorScheme(current === "dark" ? "light" : "dark");
   };
 
-  const size = props.size ?? "md";
+  const size = props.size ?? "sm";
   const iconSize =
-    (ui.sizes.icon as Record<string, number>)[size] ?? ui.sizes.icon.md;
+    (ui.sizes.icon as Record<string, number>)[size] ?? ui.sizes.icon.sm;
 
   return (
     <ActionButton
       onClick={toggleColorScheme}
-      variant={props.variant ?? "subtle"}
+      variant={props.variant ?? "default"}
       size={size}
       aria-label="Toggle color scheme"
       icon={

package/src/core/components/buttons/LanguageButton.tsx

@@ -6,7 +6,7 @@ const LanguageButton = (props: Partial<ActionProps>) => {
   const i18n = useI18n();
   return (
     <ActionButton
-      variant={"subtle"}
+      variant={"default"}
       icon={IconLanguage}
       menu={{
         items: i18n.languages.map((lang) => ({

package/src/core/components/buttons/OmnibarButton.tsx

@@ -20,8 +20,7 @@ const OmnibarButton = (props: OmnibarButtonProps) => {
       <ActionButton
         variant={"subtle"}
         onClick={spotlight.open}
-        radius={"md"}
-        icon={<IconSearch size={16} />}
+        icon={IconSearch}
         tooltip={{ label: "Search", position: "right" }}
         {...props.actionProps}
       />

package/src/core/components/buttons/ThemeButton.tsx

@@ -1,28 +1,57 @@
 import { IconPalette } from "@tabler/icons-react";
 import { useStore } from "alepha/react";
 import { alephaThemeListAtom } from "../../atoms/alephaThemeListAtom.ts";
+import { useDialog } from "../../hooks/useDialog.ts";
 import { useTheme } from "../../hooks/useTheme.ts";
+import type { ActionMenuItem } from "./ActionButton.tsx";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
+import ThemeExpertModal from "./ThemeExpertModal.tsx";
 
-const ThemeButton = (props: Partial<ActionProps>) => {
+type ThemeButtonProps = Partial<ActionProps> & {
+  /**
+   * Enable expert mode with color, radius, and font customization.
+   */
+  expert?: boolean;
+};
+
+const ThemeButton = (props: ThemeButtonProps) => {
+  const { expert, ...actionProps } = props;
   const [theme, setTheme] = useTheme();
   const themeList = useStore(alephaThemeListAtom)[0];
+  const dialog = useDialog();
+
+  const items: ActionMenuItem[] = themeList.map((it, index) => ({
+    label: it.name,
+    onClick: () =>
+      setTheme({
+        index,
+      }),
+    active: theme.name === it.name,
+  }));
+
+  if (expert) {
+    items.push(
+      { type: "divider" },
+      {
+        label: "Customize...",
+        onClick: () => {
+          dialog.open({
+            title: "Customize Theme",
+            content: <ThemeExpertModal />,
+          });
+        },
+      },
+    );
+  }
 
   return (
     <ActionButton
-      variant="subtle"
+      variant="default"
       icon={IconPalette}
       menu={{
-        items: themeList.map((it, index) => ({
-          label: it.name,
-          onClick: () =>
-            setTheme({
-              index,
-            }),
-          active: theme.name === it.name,
-        })),
+        items,
       }}
-      {...props}
+      {...actionProps}
     />
   );
 };