cyhip-dynamic-themes 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 CyberHippie-io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# cyhip-dynamic-themes
+Dynamic Color Themes for React Apps

package/dist/__version__.d.ts

@@ -0,0 +1 @@
+export declare const version: string;

package/dist/__version__.js

@@ -0,0 +1,2 @@
+import packageJson from "./package.json";
+export var version = packageJson.version;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { consistentChroma } from "./lib/tw-dynamic-themes/runtime";
+export { dynamicTwClasses } from "./lib/tw-dynamic-themes/twPlugin";
+export { hueScheme as defaultHueScheme } from "./src/hue-scheme";
+export { currentAccentValue, getThemeProperties } from "./src/theme-helpers";
+export { useColorTheme } from "./src/theme-hook";
+export { version } from "./__version__";

package/dist/index.js

@@ -0,0 +1,6 @@
+export { consistentChroma } from "./lib/tw-dynamic-themes/runtime";
+export { dynamicTwClasses } from "./lib/tw-dynamic-themes/twPlugin";
+export { hueScheme as defaultHueScheme } from "./src/hue-scheme";
+export { currentAccentValue, getThemeProperties } from "./src/theme-helpers";
+export { useColorTheme } from "./src/theme-hook";
+export { version } from "./__version__";

package/dist/lib/tw-dynamic-themes/common.d.ts

@@ -0,0 +1,7 @@
+export const shades: number[];
+export function makeVariable({ fallbackValue, name, shade, withVar }: {
+    fallbackValue: any;
+    name: any;
+    shade: any;
+    withVar: any;
+}): string;

package/dist/lib/tw-dynamic-themes/common.js

@@ -0,0 +1,20 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+export var shades = __spreadArray(__spreadArray([
+    50
+], Array.from({ length: 9 }).map(function (_, i) { return (i + 1) * 100; }), true), [
+    950,
+], false);
+export var makeVariable = function (_a) {
+    var fallbackValue = _a.fallbackValue, name = _a.name, shade = _a.shade, withVar = _a.withVar;
+    var variable = "--".concat(name, "-").concat(shade);
+    var value = fallbackValue ? variable + ", " + fallbackValue : variable;
+    return withVar ? "var(".concat(value, ")") : variable;
+};

package/dist/lib/tw-dynamic-themes/runtime.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A map of CSS varable name to color
+ */
+type SingleVariable = [string, string];
+export declare function getVariables({ baseName, hue, mode, monoCromatic, }: {
+    baseName: string;
+    hue: number;
+    mode?: "bright" | "consistent";
+    monoCromatic?: boolean;
+}): SingleVariable[];
+export declare function updateVariables(variables: SingleVariable[], el?: HTMLElement): void;
+export declare const highestChroma: (shadeIndex: number, hue: number) => string;
+export declare const consistentChroma: (i: number, hue: number, monoCromatic?: boolean) => string;
+export {};

package/dist/lib/tw-dynamic-themes/runtime.js

@@ -0,0 +1,88 @@
+import { toGamut as _toGamut, converter, differenceEuclidean, } from "culori";
+import { makeVariable, shades } from "./common";
+var toGamut = _toGamut;
+export function getVariables(_a) {
+    var baseName = _a.baseName, hue = _a.hue, _b = _a.mode, mode = _b === void 0 ? "consistent" : _b, _c = _a.monoCromatic, monoCromatic = _c === void 0 ? false : _c;
+    var calculator = mode === "bright" ? highestChroma : consistentChroma;
+    return shades.map(function (shade, shadeIndex) { return [
+        makeVariable({ name: baseName, shade: shade }),
+        calculator(shadeIndex, hue, monoCromatic),
+    ]; });
+}
+export function updateVariables(variables, el) {
+    var target = el !== null && el !== void 0 ? el : document.documentElement;
+    for (var _i = 0, variables_1 = variables; _i < variables_1.length; _i++) {
+        var _a = variables_1[_i], varName = _a[0], value = _a[1];
+        target.style.setProperty(varName, value + "");
+    }
+}
+var lightnessForShade = function (shade) {
+    var highestL = 100;
+    var lowestL = 13;
+    var diffL = highestL - lowestL;
+    var shadeDiff = shades[shades.length - 1] - shades[0];
+    // Maintaining the proximity of colors with a step of 50 and 100
+    var multiplier = shade / shadeDiff;
+    return (lowestL + (highestL - diffL * multiplier)) / 100;
+};
+var lightness = shades.map(lightnessForShade);
+export var highestChroma = function (shadeIndex, hue) {
+    var oklch = converter("oklch");
+    // Setting an obsurdly high chroma
+    var color = "oklch(".concat(lightness[shadeIndex], " 0.4 ").concat(hue, ")");
+    // Clamping it to the highest chroma possible
+    return serializeColor(oklch(toGamut("p3", "oklch", differenceEuclidean("oklch"), 0)(color)));
+};
+export var consistentChroma = function (i, hue, monoCromatic) {
+    if (monoCromatic === void 0) { monoCromatic = false; }
+    var oklch = converter("oklch");
+    // Using a pinned chroma
+    var chroma = monoCromatic ? chromaData[i] * 0.00001 : chromaData[i];
+    var light = monoCromatic ? lightness[i] * 1.0 : lightness[i] * 0.95;
+    // if (monoCromatic && i > 4) {
+    //     light = 0.24 + i / 10;
+    //     chroma = 0;
+    // }
+    var color = "oklch(".concat(light, " ").concat(chroma, " ").concat(hue, ")");
+    return serializeColor(oklch(toGamut("p3", "oklch", differenceEuclidean("oklch"), 0)(color)));
+};
+// const chromaData: Record<number, number> = {
+//     0: 0.0108,
+//     1: 0.0321,
+//     2: 0.0609,
+//     3: 0.0908,
+//     4: 0.1398,
+//     5: 0.1472,
+//     6: 0.1299,
+//     7: 0.1067,
+//     8: 0.0898,
+//     9: 0.0726,
+//     10: 0.054,
+// };
+var chromaData = {
+    0: 0.0114,
+    1: 0.0331,
+    2: 0.0774,
+    3: 0.1275,
+    4: 0.1547,
+    5: 0.1355,
+    6: 0.1164,
+    7: 0.0974,
+    8: 0.0782,
+    9: 0.0588,
+    10: 0.0491,
+};
+// const chromaData: Record<number, number> = {
+//     0: 0.0,
+//     1: 0.0,
+//     2: 0.0,
+//     3: 0.0,
+//     4: 0.0,
+//     5: 0.0,
+//     6: 0.0,
+//     7: 0.0,
+//     8: 0.0,
+//     9: 0.0,
+//     10: 0.0,
+// };
+var serializeColor = function (c) { var _a; return "".concat(c.l.toFixed(3), " ").concat(c.c.toFixed(3), " ").concat((_a = c.h) === null || _a === void 0 ? void 0 : _a.toFixed(3)); };

package/dist/lib/tw-dynamic-themes/twPlugin.d.ts

@@ -0,0 +1,3 @@
+export function dynamicTwClasses(baseName: any, baseHue: any): {
+    [k: string]: string;
+};

package/dist/lib/tw-dynamic-themes/twPlugin.js

@@ -0,0 +1,16 @@
+import { makeVariable, shades } from "./common";
+import { consistentChroma } from "./runtime";
+export function dynamicTwClasses(baseName, baseHue) {
+    return Object.fromEntries(shades.map(function (shade, i) {
+        var color = consistentChroma(i, baseHue);
+        return [
+            shade,
+            "oklch(".concat(makeVariable({
+                fallbackValue: color,
+                name: baseName,
+                shade: shade,
+                withVar: true,
+            }), " / <alpha-value>)"),
+        ];
+    }));
+}

package/dist/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "cyhip-dynamic-themes",
+    "version": "0.1.1",
+    "description": "Tailwind-powered dynamic color themes for React apps.",
+    "author": "@KassioRF, @CyberHippie-io",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/CyberHippie-io/cyhip-dynamic-themes"
+    },
+    "keywords": [
+        "react",
+        "tailwind",
+        "theme",
+        "color",
+        "dynamic"
+    ],
+    "files": [
+        "dist",
+        "README.md",
+        "LICENSE"
+    ],
+    "main": "./dist/index.js",
+    "module": "./dist/index.esm.js",
+    "types": "./dist/index.d.ts",
+    "scripts": {
+        "build": "tsc --project tsconfig.json",
+        "start": "tsx src/index.ts",
+        "prepublishOnly": "yarn build"
+    },
+    "devDependencies": {
+        "@types/culori": "^2.1.1",
+        "@types/react": "^18.3.11",
+        "tsx": "^4.19.1",
+        "typescript": "^5.6.3"
+    },
+    "dependencies": {
+        "culori": "^4.0.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+    },
+    "exports": {
+        ".": {
+            "import": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            },
+            "require": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            }
+        }
+    }
+}

package/dist/src/hue-scheme.d.ts

@@ -0,0 +1,13 @@
+/**
+ * HUE THEMES
+ *
+ * Define the available color palettes here!
+ *
+ * The palettes are based on HUE values.
+ *
+ * To add or modify a HUE palette, explore and preview colors at:
+ * https://oklch.com/#70,0.1,250,100
+ *
+ */
+declare const hueScheme: Record<string, string>;
+export { hueScheme };

package/dist/src/hue-scheme.js

@@ -0,0 +1,20 @@
+/**
+ * HUE THEMES
+ *
+ * Define the available color palettes here!
+ *
+ * The palettes are based on HUE values.
+ *
+ * To add or modify a HUE palette, explore and preview colors at:
+ * https://oklch.com/#70,0.1,250,100
+ *
+ */
+var hueScheme = {
+    monoCromatic: "-1",
+    blue: "250",
+    green: "150",
+    orange: "35",
+    pink: "0",
+    purple: "316",
+};
+export { hueScheme };

package/dist/src/index.d.ts

@@ -0,0 +1,5 @@
+export { consistentChroma } from "../lib/tw-dynamic-themes/runtime";
+export { dynamicTwClasses } from "../lib/tw-dynamic-themes/twPlugin";
+export { hueScheme as defaultHueScheme } from "./hue-scheme";
+export { currentAccentValue, getThemeProperties } from "./theme-helpers";
+export { useColorTheme } from "./theme-hook";

package/dist/src/index.js

@@ -0,0 +1,5 @@
+export { consistentChroma } from "../lib/tw-dynamic-themes/runtime";
+export { dynamicTwClasses } from "../lib/tw-dynamic-themes/twPlugin";
+export { hueScheme as defaultHueScheme } from "./hue-scheme";
+export { currentAccentValue, getThemeProperties } from "./theme-helpers";
+export { useColorTheme } from "./theme-hook";

package/dist/src/theme-helpers.d.ts

@@ -0,0 +1,25 @@
+/**
+ * getThemeProperties
+ *
+ *  Defines CSS class and style properties based on the provided HUE value and dark mode setting.
+ *
+ * - If `hue` is "-1", the theme is monochromatic, which affects the accent color behavior.
+ * - Returns an object with:
+ *    - `className`: A string containing the class for dark mode ("dark") or an empty string for light mode.
+ *    - `style`: A record with dynamically generated CSS variables for the accent colors.
+ *
+ */
+export declare const getThemeProperties: (hue: string, darkMode: boolean) => {
+    className: string;
+    style: Record<string, string>;
+};
+/**
+ * Retrieves the current value of a specified CSS variable from the root element.
+ *
+ * - If the function is executed in a non-browser environment (e.g., during server-side rendering), it returns `null`.
+ * - If the CSS variable is not found or its value is empty, it also returns `null`.
+ *
+ * @param variableName - The name of the CSS variable to retrieve, e.g., "--accent-500".
+ * @returns The OKLCH color value for the provided CSS variable, e.g., "0.614 0.136 250.000", or `null` if not available.
+ */
+export declare const currentAccentValue: (variableName: string) => string | null;

package/dist/src/theme-helpers.js

@@ -0,0 +1,52 @@
+import { getVariables } from "../lib/tw-dynamic-themes/runtime";
+/**
+ * getThemeProperties
+ *
+ *  Defines CSS class and style properties based on the provided HUE value and dark mode setting.
+ *
+ * - If `hue` is "-1", the theme is monochromatic, which affects the accent color behavior.
+ * - Returns an object with:
+ *    - `className`: A string containing the class for dark mode ("dark") or an empty string for light mode.
+ *    - `style`: A record with dynamically generated CSS variables for the accent colors.
+ *
+ */
+export var getThemeProperties = function (hue, darkMode) {
+    var monoCromatic = hue == "-1";
+    var accent = getVariables({
+        baseName: "accent",
+        hue: +hue,
+        monoCromatic: monoCromatic,
+    });
+    // MonoCromatic have a different accent behavior for accent values
+    if (monoCromatic) {
+        accent.push([
+            "--accent-500",
+            darkMode ? "1.000 0.000 89.876" : "0.212 0.000 359.000",
+        ]);
+        accent.push([
+            "--accent-50",
+            darkMode ? "0.212 0.000 359.000" : "1.000 0.000 89.876",
+        ]);
+    }
+    return {
+        className: darkMode ? "dark" : "",
+        style: Object.fromEntries(accent),
+    };
+};
+/**
+ * Retrieves the current value of a specified CSS variable from the root element.
+ *
+ * - If the function is executed in a non-browser environment (e.g., during server-side rendering), it returns `null`.
+ * - If the CSS variable is not found or its value is empty, it also returns `null`.
+ *
+ * @param variableName - The name of the CSS variable to retrieve, e.g., "--accent-500".
+ * @returns The OKLCH color value for the provided CSS variable, e.g., "0.614 0.136 250.000", or `null` if not available.
+ */
+export var currentAccentValue = function (variableName) {
+    if (typeof window === "undefined") {
+        return null;
+    }
+    var rootElement = document.documentElement;
+    var computedStyle = getComputedStyle(rootElement);
+    return computedStyle.getPropertyValue(variableName).trim() || null;
+};

package/dist/src/theme-hook.d.ts

@@ -0,0 +1,17 @@
+/**
+ * useColorTheme
+ *
+ * A custom hook that manages the application of color themes based on
+ * the provided HUE value and dark mode setting.
+ *
+ * It updates the document's root element with the appropriate
+ * class name and CSS variables for the theme.
+ *
+ * Note: This hook dispatches a custom event 'themeChange' when the theme changes.
+ *        You can listen for this event to update components that depend on the theme.
+ *
+ */
+declare const useColorTheme: (hue: string, darkMode: boolean) => {
+    setTheme: (newHue: string, newDarkMode: boolean) => void;
+};
+export { useColorTheme };

package/dist/src/theme-hook.js

@@ -0,0 +1,35 @@
+import { useCallback, useEffect } from "react";
+import { getThemeProperties } from "./theme-helpers";
+/**
+ * useColorTheme
+ *
+ * A custom hook that manages the application of color themes based on
+ * the provided HUE value and dark mode setting.
+ *
+ * It updates the document's root element with the appropriate
+ * class name and CSS variables for the theme.
+ *
+ * Note: This hook dispatches a custom event 'themeChange' when the theme changes.
+ *        You can listen for this event to update components that depend on the theme.
+ *
+ */
+var useColorTheme = function (hue, darkMode) {
+    var setTheme = useCallback(function (newHue, newDarkMode) {
+        var _a = getThemeProperties(newHue, newDarkMode), className = _a.className, style = _a.style;
+        document.documentElement.className = className;
+        document.documentElement.style.setProperty("color-scheme", newDarkMode ? "dark" : "light");
+        Object.entries(style).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            document.documentElement.style.setProperty(key, value);
+        });
+        var themeChangeEvent = new CustomEvent("themeChange", {
+            detail: { hue: newHue, darkMode: newDarkMode },
+        });
+        window.dispatchEvent(themeChangeEvent);
+    }, []);
+    useEffect(function () {
+        setTheme(hue, darkMode);
+    }, [hue, darkMode, setTheme]);
+    return { setTheme: setTheme };
+};
+export { useColorTheme };

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "cyhip-dynamic-themes",
+  "version": "0.1.1",
+  "description": "Tailwind-powered dynamic color themes for React apps.",
+  "author": "@KassioRF, @CyberHippie-io",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CyberHippie-io/cyhip-dynamic-themes"
+  },
+  "keywords": [
+    "react",
+    "tailwind",
+    "theme",
+    "color",
+    "dynamic"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "devDependencies": {
+    "@types/culori": "^2.1.1",
+    "@types/react": "^18.3.11",
+    "tsx": "^4.19.1",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "culori": "^4.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "start": "tsx src/index.ts"
+  }
+}