@refraktor/core 0.0.4 → 0.0.5

package/src/theme/ThemeProvider/generateVariables.test.ts

@@ -1,49 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { createTheme } from "../createTheme";
-import { generateVariables } from "./generateVariables";
-
-describe("generateVariables", () => {
-    it("uses dark text on light primary colors when autoContrast is enabled", () => {
-        const themeConfig = createTheme({
-            defaults: {
-                primaryColor: "cloud",
-                primaryShade: 5,
-                autoContrast: true
-            }
-        });
-
-        const variables = generateVariables("light", themeConfig);
-
-        expect(variables["--refraktor-primary"]).toBe("#dbe2ea");
-        expect(variables["--refraktor-primary-text"]).toBe("#000000");
-    });
-
-    it("keeps shade-based text color when autoContrast is disabled", () => {
-        const themeConfig = createTheme({
-            defaults: {
-                primaryColor: "cloud",
-                primaryShade: 5,
-                autoContrast: false
-            }
-        });
-
-        const variables = generateVariables("light", themeConfig);
-
-        expect(variables["--refraktor-primary-text"]).toBe("#ffffff");
-    });
-
-    it("supports custom hex primary colors and chooses readable text", () => {
-        const themeConfig = createTheme({
-            defaults: {
-                primaryColor: "#f8fafc",
-                autoContrast: true
-            }
-        });
-
-        const variables = generateVariables("light", themeConfig);
-
-        expect(variables["--refraktor-primary"]).toBe("#f8fafc");
-        expect(variables["--refraktor-primary-hover"]).toBe("#f8fafc");
-        expect(variables["--refraktor-primary-text"]).toBe("#000000");
-    });
-});

package/src/theme/ThemeProvider/generateVariables.ts

@@ -1,124 +0,0 @@
-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

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

package/src/theme/ThemeProvider/types.ts

@@ -1,37 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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

package/src/theme/createTheme/types.ts

@@ -1,62 +0,0 @@
-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

@@ -1,203 +0,0 @@
-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

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

package/src/theme/index.ts

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

package/src/theme/types.ts

@@ -1,31 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,27 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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