@alepha/ui 0.13.2 → 0.13.4

package/src/core/themes/crystal.ts

@@ -0,0 +1,107 @@
+import type { AlephaTheme } from "../providers/ThemeProvider.ts";
+
+export const crystalTheme: AlephaTheme = {
+  id: "crystal",
+  label: "Crystal",
+  description: "Glass-morphism with backdrop blur effects",
+  primaryColor: "blue",
+  primaryShade: { light: 5, dark: 4 },
+  fontFamily:
+    '"SF Pro Display", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontFamilyMonospace:
+    '"SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace',
+  headings: {
+    fontFamily:
+      '"SF Pro Display", "Helvetica Neue", -apple-system, BlinkMacSystemFont, 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.35" },
+      h4: { fontSize: "1.0625rem", lineHeight: "1.4" },
+      h5: { fontSize: "0.9375rem", lineHeight: "1.45" },
+      h6: { fontSize: "0.8125rem", lineHeight: "1.5" },
+    },
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    sm: "0.8125rem",
+    md: "0.9375rem",
+    lg: "1.0625rem",
+    xl: "1.25rem",
+  },
+  lineHeights: {
+    xs: "1.45",
+    sm: "1.5",
+    md: "1.55",
+    lg: "1.6",
+    xl: "1.65",
+  },
+  radius: {
+    xs: "4px",
+    sm: "8px",
+    md: "10px",
+    lg: "14px",
+    xl: "20px",
+  },
+  defaultRadius: "md",
+  shadows: {
+    xs: "0 2px 8px rgba(59, 130, 246, 0.04)",
+    sm: "0 4px 12px rgba(59, 130, 246, 0.06)",
+    md: "0 8px 20px rgba(59, 130, 246, 0.08)",
+    lg: "0 16px 32px rgba(59, 130, 246, 0.1)",
+    xl: "0 24px 48px rgba(59, 130, 246, 0.12)",
+  },
+  defaultGradient: { from: "cyan", to: "blue", deg: 135 },
+  colors: {
+    dark: [
+      "#cbd5e1",
+      "#94a3b8",
+      "#64748b",
+      "#475569",
+      "#334155",
+      "#1e293b",
+      "#0f172a",
+      "#0c1322",
+      "#080e1a",
+      "#040711",
+    ],
+    gray: [
+      "#f8fafc",
+      "#f1f5f9",
+      "#e2e8f0",
+      "#cbd5e1",
+      "#94a3b8",
+      "#64748b",
+      "#475569",
+      "#334155",
+      "#1e293b",
+      "#0f172a",
+    ],
+    blue: [
+      "#f0f9ff",
+      "#e0f2fe",
+      "#bae6fd",
+      "#7dd3fc",
+      "#38bdf8",
+      "#0ea5e9",
+      "#0284c7",
+      "#0369a1",
+      "#075985",
+      "#0c4a6e",
+    ],
+    cyan: [
+      "#ecfeff",
+      "#cffafe",
+      "#a5f3fc",
+      "#67e8f9",
+      "#22d3ee",
+      "#06b6d4",
+      "#0891b2",
+      "#0e7490",
+      "#155e75",
+      "#164e63",
+    ],
+  },
+};

package/src/core/themes/default.ts

@@ -0,0 +1,7 @@
+import type { AlephaTheme } from "../providers/ThemeProvider.ts";
+
+export const defaultTheme: AlephaTheme = {
+  id: "default",
+  label: "Default",
+  description: "Mantine defaults with no customization",
+};

package/src/core/themes/ember.ts

@@ -0,0 +1,107 @@
+import type { AlephaTheme } from "../providers/ThemeProvider.ts";
+
+export const emberTheme: AlephaTheme = {
+  id: "ember",
+  label: "Ember",
+  description: "Warm, cozy with stone tints",
+  primaryColor: "orange",
+  primaryShade: { light: 5, dark: 4 },
+  fontFamily:
+    '"Source Sans Pro", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  fontFamilyMonospace:
+    '"Source Code Pro", "Fira Code", ui-monospace, Menlo, Consolas, monospace',
+  headings: {
+    fontFamily:
+      '"Source Sans Pro", "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif',
+    fontWeight: "600",
+    textWrap: "wrap",
+    sizes: {
+      h1: { fontSize: "2rem", lineHeight: "1.3" },
+      h2: { fontSize: "1.5rem", lineHeight: "1.35" },
+      h3: { fontSize: "1.25rem", lineHeight: "1.4" },
+      h4: { fontSize: "1.125rem", lineHeight: "1.45" },
+      h5: { fontSize: "1rem", lineHeight: "1.5" },
+      h6: { fontSize: "0.875rem", lineHeight: "1.5" },
+    },
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+  },
+  lineHeights: {
+    xs: "1.5",
+    sm: "1.55",
+    md: "1.65",
+    lg: "1.7",
+    xl: "1.75",
+  },
+  radius: {
+    xs: "4px",
+    sm: "6px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+  },
+  defaultRadius: "md",
+  shadows: {
+    xs: "0 1px 3px rgba(194, 65, 12, 0.06)",
+    sm: "0 2px 6px rgba(194, 65, 12, 0.08)",
+    md: "0 4px 12px rgba(194, 65, 12, 0.1)",
+    lg: "0 8px 24px rgba(194, 65, 12, 0.12)",
+    xl: "0 16px 40px rgba(194, 65, 12, 0.14)",
+  },
+  defaultGradient: { from: "orange", to: "yellow", deg: 180 },
+  colors: {
+    dark: [
+      "#d6d3d1",
+      "#a8a29e",
+      "#78716c",
+      "#57534e",
+      "#44403c",
+      "#292524",
+      "#1c1917",
+      "#171412",
+      "#120f0d",
+      "#0c0a09",
+    ],
+    gray: [
+      "#fafaf9",
+      "#f5f5f4",
+      "#e7e5e4",
+      "#d6d3d1",
+      "#a8a29e",
+      "#78716c",
+      "#57534e",
+      "#44403c",
+      "#292524",
+      "#1c1917",
+    ],
+    orange: [
+      "#fff7ed",
+      "#ffedd5",
+      "#fed7aa",
+      "#fdba74",
+      "#fb923c",
+      "#f97316",
+      "#ea580c",
+      "#c2410c",
+      "#9a3412",
+      "#7c2d12",
+    ],
+    yellow: [
+      "#fffbeb",
+      "#fef3c7",
+      "#fde68a",
+      "#fcd34d",
+      "#fbbf24",
+      "#f59e0b",
+      "#d97706",
+      "#b45309",
+      "#92400e",
+      "#78350f",
+    ],
+  },
+};

package/src/core/themes/index.ts

@@ -0,0 +1,7 @@
+export { auroraTheme } from "./aurora.ts";
+export { crystalTheme } from "./crystal.ts";
+export { defaultTheme } from "./default.ts";
+export { emberTheme } from "./ember.ts";
+export { midnightTheme } from "./midnight.ts";
+export { remoraidTheme } from "./remoraid.ts";
+export { slateTheme } from "./slate.ts";

package/src/core/themes/midnight.ts

@@ -0,0 +1,98 @@
+import type { AlephaTheme } from "../providers/ThemeProvider.ts";
+
+export const midnightTheme: AlephaTheme = {
+  id: "midnight",
+  label: "Midnight",
+  description: "Clean, developer-focused design",
+  primaryColor: "gray",
+  primaryShade: { light: 7, dark: 8 },
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+  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" },
+    },
+  },
+
+  radius: {
+    xs: "3px",
+    sm: "6px",
+    md: "6px",
+    lg: "8px",
+    xl: "12px",
+  },
+  defaultRadius: "sm",
+  colors: {
+    dark: [
+      "#d0d7de",
+      "#8b949e",
+      "#6e7681",
+      "#484f58",
+      "#30363d",
+      "#21262d",
+      "#161b22",
+      "#151b23",
+      "#0d1117",
+      "#010409",
+    ],
+    gray: [
+      "#f6f8fa",
+      "#eaeef2",
+      "#d0d7de",
+      "#afb8c1",
+      "#8c959f",
+      "#6e7781",
+      "#57606a",
+      "#424a53",
+      "#32383f",
+      "#24292f",
+    ],
+    blue: [
+      "#ddf4ff",
+      "#b6e3ff",
+      "#80ccff",
+      "#54aeff",
+      "#218bff",
+      "#0969da",
+      "#0550ae",
+      "#033d8b",
+      "#0a3069",
+      "#002155",
+    ],
+    green: [
+      "#dafbe1",
+      "#aceebb",
+      "#6fdd8b",
+      "#4ac26b",
+      "#2da44e",
+      "#1a7f37",
+      "#116329",
+      "#044f1e",
+      "#003d16",
+      "#002d11",
+    ],
+    red: [
+      "#ffebe9",
+      "#ffcecb",
+      "#ffaba8",
+      "#ff8182",
+      "#fa4549",
+      "#cf222e",
+      "#a40e26",
+      "#82071e",
+      "#660018",
+      "#4c0014",
+    ],
+  },
+};

package/src/core/themes/remoraid.ts

@@ -0,0 +1,278 @@
+import type { AlephaTheme } from "../providers/ThemeProvider.ts";
+
+export const remoraidTheme: AlephaTheme = {
+  id: "remoraid",
+  label: "Remoraid",
+  description: "Soft, nature-inspired with green tones",
+  colors: {
+    dark: [
+      "#fafcff",
+      "#cad5e8",
+      "#8697b5",
+      "#4c5d7d",
+      "#222833",
+      "#222938",
+      "#0b0f14",
+      "#0b0f14",
+      "#030405",
+      "#000000",
+    ],
+    gray: [
+      "#e3e7f1",
+      "#d8ddeb",
+      "#ced4e5",
+      "#c3cadf",
+      "#b8c1d9",
+      "#b8c1d9",
+      "#7b8cb8",
+      "#4b5c8b",
+      "#2a334d",
+      "#090b10",
+    ],
+    blue: [
+      "#ddf4ff",
+      "#b6e3ff",
+      "#80ccff",
+      "#54aeff",
+      "#218bff",
+      "#0969da",
+      "#0550ae",
+      "#033d8b",
+      "#0a3069",
+      "#002155",
+    ],
+    green: [
+      "#dafbe1",
+      "#aceebb",
+      "#6fdd8b",
+      "#4ac26b",
+      "#2da44e",
+      "#1a7f37",
+      "#116329",
+      "#044f1e",
+      "#003d16",
+      "#002d11",
+    ],
+    yellow: [
+      "#fff8c5",
+      "#fae17d",
+      "#eac54f",
+      "#d4a72c",
+      "#bf8700",
+      "#9a6700",
+      "#7d4e00",
+      "#633c01",
+      "#4d2d00",
+      "#3b2300",
+    ],
+    orange: [
+      "#fff1e5",
+      "#ffd8b5",
+      "#ffb77c",
+      "#fb8f44",
+      "#e16f24",
+      "#bc4c00",
+      "#953800",
+      "#762c00",
+      "#5c2200",
+      "#471700",
+    ],
+    red: [
+      "#fff5f5",
+      "#ffe3e3",
+      "#ffc9c9",
+      "#ffa8a8",
+      "#ff8787",
+      "#ff6b6b",
+      "#fa5252",
+      "#f03e3e",
+      "#e03131",
+      "#c92a2a",
+    ],
+    pink: [
+      "#fff0f6",
+      "#ffdeeb",
+      "#fcc2d7",
+      "#faa2c1",
+      "#f783ac",
+      "#f06595",
+      "#e64980",
+      "#d6336c",
+      "#c2255c",
+      "#a61e4d",
+    ],
+    grape: [
+      "#f8f0fc",
+      "#f3d9fa",
+      "#eebefa",
+      "#e599f7",
+      "#da77f2",
+      "#cc5de8",
+      "#be4bdb",
+      "#ae3ec9",
+      "#9c36b5",
+      "#862e9c",
+    ],
+    violet: [
+      "#f3f0ff",
+      "#e5dbff",
+      "#d0bfff",
+      "#b197fc",
+      "#9775fa",
+      "#845ef7",
+      "#7950f2",
+      "#7048e8",
+      "#6741d9",
+      "#5f3dc4",
+    ],
+    indigo: [
+      "#edf2ff",
+      "#dbe4ff",
+      "#bac8ff",
+      "#91a7ff",
+      "#748ffc",
+      "#5c7cfa",
+      "#4c6ef5",
+      "#4263eb",
+      "#3b5bdb",
+      "#364fc7",
+    ],
+    cyan: [
+      "#e3fafc",
+      "#c5f6fa",
+      "#99e9f2",
+      "#66d9e8",
+      "#3bc9db",
+      "#22b8cf",
+      "#15aabf",
+      "#1098ad",
+      "#0c8599",
+      "#0b7285",
+    ],
+    teal: [
+      "#e6fcf5",
+      "#c3fae8",
+      "#96f2d7",
+      "#63e6be",
+      "#38d9a9",
+      "#20c997",
+      "#12b886",
+      "#0ca678",
+      "#099268",
+      "#087f5b",
+    ],
+    lime: [
+      "#f4fce3",
+      "#e9fac8",
+      "#d8f5a2",
+      "#c0eb75",
+      "#a9e34b",
+      "#94d82d",
+      "#82c91e",
+      "#74b816",
+      "#66a80f",
+      "#5c940d",
+    ],
+    Remoraid: [
+      "#dcf2de",
+      "#c7eccc",
+      "#b2e6b9",
+      "#9de1a6",
+      "#88db93",
+      "#88db93",
+      "#5fc26d",
+      "#479454",
+      "#296133",
+      "#19361d",
+    ],
+  },
+  primaryColor: "Remoraid",
+  primaryShade: {
+    light: 6,
+    dark: 7,
+  },
+  white: "#ffffff",
+  black: "#24292f",
+  autoContrast: true,
+  luminanceThreshold: 0.3,
+  fontFamily: "Open Sans",
+  fontFamilyMonospace: "Roboto Mono",
+  headings: {
+    fontFamily: "Open Sans",
+    fontWeight: "500",
+    sizes: {
+      h1: {
+        fontSize: "3.125rem",
+        lineHeight: "1.3",
+        fontWeight: "700",
+      },
+      h2: {
+        fontSize: "1.625rem",
+        lineHeight: "1.35",
+        fontWeight: "0",
+      },
+      h3: {
+        fontSize: "1.375rem",
+        lineHeight: "1.4",
+        fontWeight: "0",
+      },
+      h4: {
+        fontSize: "1.125rem",
+        lineHeight: "1.45",
+        fontWeight: "0",
+      },
+      h5: {
+        fontSize: "1rem",
+        lineHeight: "1.5",
+        fontWeight: "0",
+      },
+      h6: {
+        fontSize: "0.875rem",
+        lineHeight: "1.5",
+        fontWeight: "0",
+      },
+    },
+  },
+  scale: 1,
+  radius: {
+    xs: "0.325rem",
+    sm: "0.75rem",
+    md: "0.7rem",
+    lg: "1.2rem",
+    xl: "2.4rem",
+  },
+  spacing: {
+    xs: "0.525rem",
+    sm: "0.65rem",
+    md: "0.9rem",
+    lg: "1.35rem",
+    xl: "2.2rem",
+  },
+  defaultRadius: "md",
+  breakpoints: {
+    xs: "36em",
+    sm: "48em",
+    md: "62em",
+    lg: "75em",
+    xl: "88em",
+  },
+  fontSmoothing: true,
+  respectReducedMotion: false,
+  focusRing: "auto",
+  cursorType: "default",
+  components: {
+    Input: {
+      defaultProps: {
+        variant: "default",
+        radius: "xl",
+      },
+      styles: {},
+    },
+    Card: {
+      defaultProps: {
+        withBorder: true,
+      },
+      styles: {},
+    },
+  },
+};

package/src/core/themes/slate.ts

@@ -0,0 +1,81 @@
+import type { AlephaTheme } from "../providers/ThemeProvider.ts";
+
+export const slateTheme: AlephaTheme = {
+  id: "slate",
+  label: "Slate",
+  description: "Professional, minimal zinc palette",
+  primaryColor: "dark",
+  primaryShade: { light: 9, dark: 7 },
+  fontFamily:
+    '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  fontFamilyMonospace:
+    '"JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+  headings: {
+    fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, sans-serif',
+    fontWeight: "600",
+    textWrap: "wrap",
+    sizes: {
+      h1: { fontSize: "2rem", lineHeight: "1.2" },
+      h2: { fontSize: "1.5rem", lineHeight: "1.25" },
+      h3: { fontSize: "1.25rem", lineHeight: "1.3" },
+      h4: { fontSize: "1rem", lineHeight: "1.4" },
+      h5: { fontSize: "0.875rem", lineHeight: "1.5" },
+      h6: { fontSize: "0.75rem", lineHeight: "1.5" },
+    },
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "0.875rem",
+    lg: "1rem",
+    xl: "1.125rem",
+  },
+  lineHeights: {
+    xs: "1.4",
+    sm: "1.45",
+    md: "1.5",
+    lg: "1.55",
+    xl: "1.6",
+  },
+  radius: {
+    xs: "0.125rem",
+    sm: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+  },
+  defaultRadius: "md",
+  shadows: {
+    xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+  },
+  colors: {
+    dark: [
+      "#f4f4f5",
+      "#a1a1aa",
+      "#71717a",
+      "#52525b",
+      "#3f3f46",
+      "#27272a",
+      "#18181b",
+      "#0f0f10",
+      "#09090b",
+      "#000000",
+    ],
+    gray: [
+      "#fafafa",
+      "#f4f4f5",
+      "#e4e4e7",
+      "#d4d4d8",
+      "#a1a1aa",
+      "#71717a",
+      "#52525b",
+      "#3f3f46",
+      "#27272a",
+      "#18181b",
+    ],
+  },
+};