v1.1.2 - ready to publish

README.md

@@ -7,20 +7,20 @@
 ## Installation
 
 [![npm (scoped)](https://img.shields.io/npm/v/dynamic-colors)](https://www.npmjs.com/package/dynamic-colors)
-[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/dynamic-colors)](https://bundlephobia.com/package/[email protected].1)
+[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/dynamic-colors)](https://bundlephobia.com/package/[email protected].2)
 [![npm](https://img.shields.io/npm/dy/dynamic-colors)](https://www.npmjs.com/package/dynamic-colors)
-[![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/gh/hy/patelka2211/dynamic-colors)](https://cdn.jsdelivr.net/gh/patelka2211/[email protected].1/)
+[![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/gh/hy/patelka2211/dynamic-colors)](https://cdn.jsdelivr.net/gh/patelka2211/[email protected].2/)
 
 To install Dynamic Colors using npm, run the following command:
 
 ```sh
 npm i dynamic-colors
 ```
 
-Alternatively, you can include [Dynnamic Colors's IIFE file](https://cdn.jsdelivr.net/gh/patelka2211/[email protected].1/DynamicColors.js) in your website using a `<script>` tag:
+Alternatively, you can include [Dynnamic Colors's IIFE file](https://cdn.jsdelivr.net/gh/patelka2211/[email protected].2/DynamicColors.js) in your website using a `<script>` tag:
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/patelka2211/[email protected].1/DynamicColors.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/patelka2211/[email protected].2/DynamicColors.js"></script>
 ```
 
 ## Available APIs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-colors",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Dynamic Colors is a JavaScript library that can dynamically generate color theme from a single HEX color and it provides a range of useful APIs for creating, managing, and manipulating color themes.",
   "main": "index.js",
   "module": "index.js",

src/dynamicColors.ts

@@ -1,3 +1,4 @@
+import { theme2x } from "./OSTheme";
 import { getThemeCSSFromColor } from "./getColor";
 import { addInstance, dcIDList, instances, removeInstance } from "./instances";
 import { addLock, isLocked, removeLock } from "./lockMechanism";
@@ -51,8 +52,7 @@ export class DynamicColors {
 
         if (this.id === undefined) return;
 
-        const { css, theme2x } = getThemeCSSFromColor(this.id, color);
-        this.styleTag.innerHTML = css;
+        this.styleTag.innerHTML = getThemeCSSFromColor(this.id, color);
         this.styleTag.setAttribute("dc-color", color);
         this.styleTag.setAttribute("dc-theme", theme2x);
     }

src/getColor.ts

@@ -1,21 +1,15 @@
-import materialDynamicColors from "./helper/mdc";
+import { fromHEX } from "./helper/mdc";
 import { hex2rgb } from "./hex2rgb";
-import { LightOrDark, theme2x } from "./OSTheme";
+import { theme2x } from "./OSTheme";
 
 /**
  * Retrieves the theme CSS string for a given color.
  * @param {string} id The ID associated with the DynamicColors.
  * @param {string} color The color value.
- * @returns {Object} An object containing the CSS string and theme value.
+ * @returns {string} CSS string.
  */
-export function getThemeCSSFromColor(
-    id: string,
-    color: string
-): {
-    css: string;
-    theme2x: LightOrDark;
-} {
-    let themeObj = materialDynamicColors(color)[theme2x] as {
+export function getThemeCSSFromColor(id: string, color: string): string {
+    let themeObj = fromHEX(color)[theme2x] as {
             [_: string]: string;
         },
         css = "*{";
@@ -28,6 +22,5 @@ export function getThemeCSSFromColor(
                 css += `--${id}-${colorName}-rgb:${rgb.r},${rgb.g},${rgb.b};`;
         }
     css += "}";
-
-    return { css, theme2x };
+    return css;
 }