@refraktor/core 0.0.1

package/src/theme/ThemeProvider/generateVariables.ts

@@ -0,0 +1,124 @@
+import { getAutoContrastTextColor } from "@refraktor/utils";
+import { RefraktorTheme } from "../createTheme";
+import { Theme } from "../types";
+import { getShade } from "../utils";
+
+const COLORS_TEMPLATE = "--refraktor-colors-{{color}}-{{index}}";
+const SEMANTIC_TEMPLATE = "--refraktor-{{key}}";
+
+export type ThemeVariables = {
+    [key: string]: string;
+};
+
+function getColorShadeFromTheme(
+    themeConfig: RefraktorTheme,
+    color: string,
+    shade: number
+): string {
+    const colorValue = themeConfig.colors[color];
+
+    if (typeof colorValue === "string") return colorValue;
+
+    if (Array.isArray(colorValue))
+        return colorValue[Math.min(Math.max(0, shade), 9)] ?? colorValue[5];
+
+    return color;
+}
+
+const getSemanticColors = (themeConfig: RefraktorTheme) => ({
+    light: {
+        bg: getShade(themeConfig.colors, "light", 2),
+        "bg-hover": getShade(themeConfig.colors, "light", 3),
+        "bg-subtle": getShade(themeConfig.colors, "light", 1),
+        "bg-elevated": getShade(themeConfig.colors, "light", 0),
+
+        text: getShade(themeConfig.colors, "black", 0),
+        "text-secondary": getShade(themeConfig.colors, "dark", 6),
+        "text-tertiary": getShade(themeConfig.colors, "dark", 7),
+
+        border: getShade(themeConfig.colors, "light", 4),
+        "border-hover": getShade(themeConfig.colors, "light", 5),
+
+        "scroll-track": "transparent",
+        "scroll-thumb": getShade(themeConfig.colors, "light", 4),
+        "scroll-thumb-hover": getShade(themeConfig.colors, "light", 5)
+    },
+    dark: {
+        bg: getShade(themeConfig.colors, "dark", 6),
+        "bg-hover": getShade(themeConfig.colors, "dark", 5),
+        "bg-subtle": getShade(themeConfig.colors, "dark", 7),
+        "bg-elevated": getShade(themeConfig.colors, "dark", 5),
+
+        text: getShade(themeConfig.colors, "white", 0),
+        "text-secondary": getShade(themeConfig.colors, "dark", 1),
+        "text-tertiary": getShade(themeConfig.colors, "dark", 2),
+
+        border: getShade(themeConfig.colors, "dark", 4),
+        "border-hover": getShade(themeConfig.colors, "dark", 3),
+
+        "scroll-track": "transparent",
+        "scroll-thumb": getShade(themeConfig.colors, "dark", 4),
+        "scroll-thumb-hover": getShade(themeConfig.colors, "dark", 3)
+    }
+});
+
+export const generateVariables = (
+    theme: Theme,
+    themeConfig: RefraktorTheme
+): ThemeVariables => {
+    const variables: ThemeVariables = {};
+    const { colors, defaults } = themeConfig;
+
+    const { primaryColor, primaryShade, autoContrast } = defaults;
+
+    const primaryColorValue = getColorShadeFromTheme(
+        themeConfig,
+        primaryColor,
+        primaryShade
+    );
+    const primaryTextFallback = getColorShadeFromTheme(
+        themeConfig,
+        primaryColor,
+        0
+    );
+    const darkText = getShade(themeConfig.colors, "black", 0);
+    const lightText = getShade(themeConfig.colors, "white", 0);
+
+    Object.entries(getSemanticColors(themeConfig)[theme]).forEach(
+        ([key, value]) => {
+            if (value !== undefined)
+                variables[SEMANTIC_TEMPLATE.replace("{{key}}", key)] = value;
+        }
+    );
+
+    Object.assign(variables, {
+        "--refraktor-primary": primaryColorValue,
+        "--refraktor-primary-hover": getColorShadeFromTheme(
+            themeConfig,
+            primaryColor,
+            primaryShade - 1
+        ),
+        "--refraktor-primary-text": autoContrast
+            ? getAutoContrastTextColor(
+                  primaryColorValue,
+                  darkText,
+                  lightText,
+                  primaryTextFallback
+              )
+            : primaryTextFallback
+    });
+
+    Object.entries(colors).forEach(([color, shade]) => {
+        if (!Array.isArray(shade)) return;
+
+        shade.forEach((shade, index) => {
+            const varName = COLORS_TEMPLATE.replace("{{color}}", color).replace(
+                "{{index}}",
+                index.toString()
+            );
+            variables[varName] = shade;
+        });
+    });
+
+    return variables;
+};

package/src/theme/ThemeProvider/index.ts

@@ -0,0 +1,3 @@
+export { default as ThemeProvider } from "./ThemeProvider";
+export { useThemeContext } from "./context";
+export type { ThemeProviderProps, ThemePersistenceOptions } from "./types";

package/src/theme/ThemeProvider/types.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+import { Theme } from "../types";
+import { RefraktorTheme, ComponentsConfig } from "../createTheme";
+
+export type ThemePersistenceOptions = {
+    /** Whether to persist the theme in localStorage @default `true` */
+    enabled?: boolean;
+
+    /** Key to use for the localStorage item @default `refraktor-theme` */
+    storageKey?: string;
+};
+
+export type ThemeProviderProps = {
+    /** The children to render. */
+    children: ReactNode;
+
+    /** Theme to use by default @default `dark` */
+    theme?: Theme;
+
+    /** Theme configuration @default `defaultTheme` */
+    themeConfig?: RefraktorTheme;
+
+    /** Components configuration */
+    components?: ComponentsConfig;
+
+    /** Options for persisting the theme in localStorage */
+    persistence?: ThemePersistenceOptions;
+};
+
+export type ThemeProviderContextValue = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+    persistenceEnabled: boolean;
+    themeConfig: RefraktorTheme;
+    components: ComponentsConfig;
+};

package/src/theme/createTheme/createTheme.ts

@@ -0,0 +1,41 @@
+import defaultColors from "../defaults/colors";
+import { defaultSettings } from "../defaults/settings";
+import {
+    ColorsConfig,
+    RefraktorTheme,
+    ThemeDefaults,
+    ThemeInput
+} from "./types";
+
+export const defaultTheme: RefraktorTheme = {
+    defaults: defaultSettings,
+    colors: defaultColors
+};
+
+function mergeColors(
+    base: ColorsConfig,
+    override?: Partial<ColorsConfig>
+): ColorsConfig {
+    if (!override) return base;
+
+    return { ...base, ...override } as ColorsConfig;
+}
+
+export function createTheme(settings: ThemeInput): RefraktorTheme {
+    const defaults: Required<ThemeDefaults> = {
+        radius: settings.defaults?.radius ?? defaultSettings.radius,
+        primaryColor:
+            settings.defaults?.primaryColor ?? defaultSettings.primaryColor,
+        primaryShade:
+            settings.defaults?.primaryShade ?? defaultSettings.primaryShade,
+        autoContrast:
+            settings.defaults?.autoContrast ?? defaultSettings.autoContrast
+    };
+
+    const colors = mergeColors(defaultColors, settings.colors);
+
+    return {
+        defaults,
+        colors
+    };
+}

package/src/theme/createTheme/index.ts

@@ -0,0 +1,7 @@
+export { defaultTheme, createTheme } from "./createTheme";
+export type {
+    RefraktorTheme,
+    ThemeDefaults,
+    ClassNamesRecord,
+    ComponentsConfig
+} from "./types";

package/src/theme/createTheme/types.ts

@@ -0,0 +1,62 @@
+import { ColorShade, PrimaryColor, RefraktorRadius } from "../types";
+
+export type ColorScale = readonly [
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string
+];
+export type ColorsConfig = {
+    [key: string]: ColorScale | string;
+};
+
+export type ThemeDefaults = {
+    /** Default border radius @default `md` */
+    radius?: RefraktorRadius;
+
+    /** Primary color. Can be a hex code or a color from the default colors @default `cloud` */
+
+    primaryColor?: PrimaryColor | string;
+
+    /** Primary color shade @default `5` */
+    primaryShade?: ColorShade;
+
+    /** Automatically choose readable primary text color @default `true` */
+    autoContrast?: boolean;
+};
+
+export type RefraktorTheme = {
+    defaults: Required<ThemeDefaults>;
+    colors: Required<ColorsConfig>;
+};
+
+export type ThemeInput = {
+    /** Colors for the theme */
+    colors?: ColorsConfig;
+
+    /** Default settings for the theme */
+    defaults?: ThemeDefaults;
+};
+
+export type ClassNamesRecord = Record<string, string | undefined>;
+
+export type ComponentConfigObject<
+    Props = Record<string, any>,
+    ClassNames extends ClassNamesRecord = ClassNamesRecord
+> = {
+    /** Default props for the component */
+    defaultProps?: Partial<Props>;
+
+    /* Default class names for the component */
+    classNames?: ClassNames;
+};
+
+export type ComponentsConfig = {
+    [componentName: string]: ComponentConfigObject<any, any>;
+};

package/src/theme/defaults/colors.ts

@@ -0,0 +1,203 @@
+import { ColorsConfig } from "../createTheme/types";
+
+const defaultColors: ColorsConfig = {
+    white: "#ffffff",
+    black: "#000000",
+
+    dark: [
+        "#c9c9c9",
+        "#b8b8b8",
+        "#828282",
+        "#696969",
+        "#424242",
+        "#3b3b3b",
+        "#2e2e2e",
+        "#242424",
+        "#1f1f1f",
+        "#141414"
+    ],
+
+    light: [
+        "#ffffff",
+        "#f9f9f9",
+        "#f2f2f2",
+        "#e5e5e5",
+        "#d1d1d1",
+        "#b2b2b2",
+        "#8c8c8c",
+        "#666666",
+        "#3f3f3f",
+        "#262626"
+    ],
+
+    gray: [
+        "#fafafa",
+        "#f4f4f5",
+        "#e4e4e7",
+        "#d4d4d8",
+        "#a1a1aa",
+        "#71717a",
+        "#52525b",
+        "#3f3f46",
+        "#27272a",
+        "#18181b"
+    ],
+
+    cloud: [
+        "#ffffff",
+        "#fcfcfd",
+        "#f8fafc",
+        "#eef2f6",
+        "#e2e8f0",
+        "#dbe2ea",
+        "#c2ccd6",
+        "#94a3b8",
+        "#64748b",
+        "#1f2937"
+    ],
+
+    green: [
+        "#ebfbee",
+        "#d3f9d8",
+        "#b2f2bb",
+        "#8ce99a",
+        "#69db7c",
+        "#51cf66",
+        "#40c057",
+        "#37b24d",
+        "#2f9e44",
+        "#2b8a3e"
+    ],
+
+    mint: [
+        "#ecfdf5",
+        "#d1fae5",
+        "#a7f3d0",
+        "#6ee7b7",
+        "#34d399",
+        "#10b981",
+        "#059669",
+        "#047857",
+        "#065f46",
+        "#064e3b"
+    ],
+
+    red: [
+        "#ffeaea",
+        "#ffc5c5",
+        "#ffa0a0",
+        "#ff7a7a",
+        "#ff5555",
+        "#e64545",
+        "#c13838",
+        "#9d2c2c",
+        "#781f1f",
+        "#541414"
+    ],
+
+    blue: [
+        "#e7f2ff",
+        "#b8dcff",
+        "#89c6ff",
+        "#5ab0ff",
+        "#2b9aff",
+        "#1485e6",
+        "#106ec1",
+        "#0d589d",
+        "#094179",
+        "#062b54"
+    ],
+
+    cyan: [
+        "#eefbfc",
+        "#d6f4f6",
+        "#bcecee",
+        "#9ee3e6",
+        "#7ed9de",
+        "#5fcfd6",
+        "#46b8bf",
+        "#329fa6",
+        "#1f7f85",
+        "#145f64"
+    ],
+
+    teal: [
+        "#ecf8f6",
+        "#d0efe9",
+        "#b2e5dc",
+        "#8fdbc9",
+        "#6fd1b6",
+        "#52c7a4",
+        "#3dad8c",
+        "#2f8f74",
+        "#226f5b",
+        "#184f41"
+    ],
+
+    yellow: [
+        "#fffce5",
+        "#fff4b8",
+        "#ffeb8a",
+        "#ffe25c",
+        "#ffd92e",
+        "#e6c020",
+        "#c1a319",
+        "#9d8613",
+        "#79690c",
+        "#544c06"
+    ],
+
+    orange: [
+        "#fff7e0",
+        "#ffd29d",
+        "#ffbb75",
+        "#ff9e4d",
+        "#ff8025",
+        "#e66a00",
+        "#c95300",
+        "#a43c00",
+        "#7f2b00",
+        "#5a1c00"
+    ],
+
+    purple: [
+        "#f4f0ff",
+        "#dbceff",
+        "#c2acff",
+        "#a98aff",
+        "#9068ff",
+        "#774fe6",
+        "#613fc1",
+        "#4c319d",
+        "#372479",
+        "#221654"
+    ],
+
+    magenta: [
+        "#f7ecf6",
+        "#ebd1ea",
+        "#deb5de",
+        "#d19ad2",
+        "#c37fc6",
+        "#b065ba",
+        "#9652a0",
+        "#7b3f85",
+        "#602c6a",
+        "#45194f"
+    ],
+
+    pink: [
+        "#fcebf2",
+        "#f6d2e1",
+        "#efb8cf",
+        "#e79ebb",
+        "#de84a6",
+        "#d36a90",
+        "#b85778",
+        "#9c4662",
+        "#7d344b",
+        "#5c2436"
+    ]
+};
+
+export default defaultColors;

package/src/theme/defaults/settings.ts

@@ -0,0 +1,8 @@
+import type { ThemeDefaults } from "../createTheme";
+
+export const defaultSettings: Required<ThemeDefaults> = {
+    radius: "md",
+    primaryColor: "cloud",
+    primaryShade: 5,
+    autoContrast: true
+};

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+export * from "./createTheme";
+export * from "./ThemeProvider";
+export * from "./utils";
+export * from "./types";

package/src/theme/types.ts

@@ -0,0 +1,31 @@
+export type Theme = "dark" | "light";
+
+export type PrimaryColor =
+    | "gray"
+    | "cloud"
+    | "green"
+    | "mint"
+    | "red"
+    | "blue"
+    | "cyan"
+    | "teal"
+    | "yellow"
+    | "orange"
+    | "purple"
+    | "magenta"
+    | "pink";
+export type ColorShade = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+
+export type RefraktorRadius =
+    | "none"
+    | "default"
+    | "xs"
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl"
+    | "3xl"
+    | "4xl"
+    | "full";
+export type RefraktorSize = "xs" | "sm" | "md" | "lg" | "xl";

package/src/theme/utils/get-radius.ts

@@ -0,0 +1,23 @@
+import type { ThemeDefaults } from "../createTheme";
+import type { RefraktorRadius } from "../types";
+
+const radiusMap: Record<RefraktorRadius, string> = {
+    none: "rounded-[var(--refraktor-radius-none)]",
+    default: "rounded-[var(--refraktor-radius-md)]",
+    xs: "rounded-[var(--refraktor-radius-xs)]",
+    sm: "rounded-[var(--refraktor-radius-sm)]",
+    md: "rounded-[var(--refraktor-radius-md)]",
+    lg: "rounded-[var(--refraktor-radius-lg)]",
+    xl: "rounded-[var(--refraktor-radius-xl)]",
+    "2xl": "rounded-[var(--refraktor-radius-2xl)]",
+    "3xl": "rounded-[var(--refraktor-radius-3xl)]",
+    "4xl": "rounded-[var(--refraktor-radius-4xl)]",
+    full: "rounded-[var(--refraktor-radius-full)]"
+};
+
+export function getRadius(radius: RefraktorRadius, defaults?: ThemeDefaults) {
+    const effectiveRadius =
+        radius === "default" ? defaults?.radius ?? "md" : radius;
+
+    return radiusMap[effectiveRadius] ?? radiusMap.default;
+}

package/src/theme/utils/get-shade.ts

@@ -0,0 +1,16 @@
+import { ColorsConfig } from "../createTheme/types";
+import defaultColors from "../defaults/colors";
+
+export function getShade(
+    colors: ColorsConfig,
+    color: keyof typeof defaultColors,
+    tone: number
+) {
+    const value = colors[color] ?? defaultColors[color];
+
+    if (Array.isArray(value)) {
+        return value[Math.min(Math.max(0, tone), 9)] ?? value[5];
+    }
+
+    return value;
+}

package/src/theme/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./get-radius";
+export * from "./use-theme";
+export * from "./get-shade";

package/src/theme/utils/use-theme.ts

@@ -0,0 +1,27 @@
+import { useThemeContext } from "../ThemeProvider";
+import { RefraktorRadius } from "../types";
+import { getRadius } from "./get-radius";
+import { cx } from "../../utils";
+
+export function useTheme() {
+    const { theme, setTheme, toggleTheme, themeConfig } = useThemeContext();
+
+    if (!theme)
+        throw new Error(
+            "[@refraktor/core] ThemeProvider was not found in the tree"
+        );
+
+    const _getRadius = (radius: RefraktorRadius = "default") =>
+        getRadius(radius, themeConfig.defaults);
+
+    return {
+        theme,
+        setTheme,
+        toggleTheme,
+        getRadius: _getRadius,
+
+        colors: themeConfig.colors,
+
+        cx
+    };
+}

package/src/utils/configs/create-config.ts

@@ -0,0 +1,15 @@
+import { ClassNamesRecord } from "../../theme/createTheme";
+
+export function createComponentConfig<Props extends Record<string, any>>() {
+    return function configure(defaultProps: Partial<Props>): Partial<Props> {
+        return defaultProps;
+    };
+}
+
+export function createClassNamesConfig<ClassNames extends ClassNamesRecord>() {
+    return function classNames(
+        classNamesConfig: Partial<ClassNames>
+    ): Partial<ClassNames> {
+        return classNamesConfig;
+    };
+}

package/src/utils/configs/index.ts

@@ -0,0 +1,3 @@
+export { createComponentConfig, createClassNamesConfig } from "./create-config";
+export { useClassNames } from "./use-class-names";
+export { useProps } from "./use-props";

package/src/utils/configs/use-class-names.ts

@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import { ClassNamesRecord, useThemeContext } from "../../theme";
+import { cx } from "../cx";
+
+function mergeClassNames<T extends ClassNamesRecord>(
+    themeClassNames: Partial<T> | undefined,
+    runtimeClassNames: Partial<T> | undefined
+): T {
+    const allKeys = new Set([
+        ...Object.keys(themeClassNames ?? {}),
+        ...Object.keys(runtimeClassNames ?? {})
+    ]);
+
+    const result: ClassNamesRecord = {};
+
+    for (const key of Array.from(allKeys)) {
+        const combined = cx(themeClassNames?.[key], runtimeClassNames?.[key]);
+
+        if (combined) {
+            result[key] = combined;
+        }
+    }
+
+    return result as T;
+}
+
+export function useClassNames<T extends ClassNamesRecord>(
+    componentName: string,
+    runtimeClassNames: Partial<T> | undefined
+): T {
+    const { components } = useThemeContext();
+
+    const themeClassNames = components?.[componentName]?.classNames as
+        | Partial<T>
+        | undefined;
+
+    return useMemo(
+        () => mergeClassNames<T>(themeClassNames, runtimeClassNames),
+        [themeClassNames, runtimeClassNames]
+    );
+}