@tecsinapse/cortex-core 1.1.0 → 1.1.2-beta.0

package/dist/cjs/components/common/common.js

@@ -6,7 +6,7 @@ const overlay = tailwindVariants.tv({
   base: "fixed",
   variants: {
     show: {
-      true: "bg-opacity-50 z-backdrop bg-black h-full w-full left-0 top-0 transition cursor-pointer",
+      true: "z-backdrop bg-black/50 h-full w-full left-0 top-0 transition cursor-pointer",
       false: "invisible"
     }
   }

package/dist/cjs/index.js

@@ -20,6 +20,7 @@ var toggle = require('./components/toggle/toggle.js');
 var tooltip = require('./components/tooltip/tooltip.js');
 var index = require('./preset/index.js');
 var definitions = require('./tokens/definitions.js');
+var index$1 = require('./utils/index.js');
 
 
 
@@ -70,3 +71,4 @@ exports.fontSize = definitions.fontSize;
 exports.spacing = definitions.spacing;
 exports.textColor = definitions.textColor;
 exports.zIndex = definitions.zIndex;
+exports.updateThemeColors = index$1.updateThemeColors;

package/dist/cjs/tokens/definitions.js

@@ -2,18 +2,18 @@
 
 const colors = {
   primary: {
-    xlight: "#fef9f0",
-    light: "#fccb83",
-    medium: "#f89907",
-    dark: "#ae6b05",
-    xdark: "#633d03"
+    xlight: "var(--color-primary-xlight, #fef9f0)",
+    light: "var(--color-primary-light, #fccb83)",
+    medium: "var(--color-primary-medium, #f89907)",
+    dark: "var(--color-primary-dark, #ae6b05)",
+    xdark: "var(--color-primary-xdark, #633d03)"
   },
   secondary: {
-    xlight: "#f8f7f7",
-    light: "#c2bfbc",
-    medium: "#85807a",
-    dark: "#5d5955",
-    xdark: "#353231"
+    xlight: "var(--color-secondary-xlight, #f8f7f7)",
+    light: "var(--color-secondary-light, #c2bfbc)",
+    medium: "var(--color-secondary-medium, #85807a)",
+    dark: "var(--color-secondary-dark, #5d5955)",
+    xdark: "var(--color-secondary-xdark, #353231)"
   },
   info: {
     xlight: "#f0f8fe",

package/dist/cjs/utils/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const updateThemeColors = (theme) => {
+  const root = document.documentElement;
+  Object.entries(theme).forEach(([colorName, colorShades]) => {
+    if (!colorShades) return;
+    Object.entries(colorShades).forEach(([shade, hexValue]) => {
+      if (!hexValue) return;
+      root.style.setProperty(`--color-${colorName}-${shade}`, hexValue);
+    });
+  });
+};
+
+exports.updateThemeColors = updateThemeColors;

package/dist/esm/components/common/common.js

@@ -4,7 +4,7 @@ const overlay = tv({
   base: "fixed",
   variants: {
     show: {
-      true: "bg-opacity-50 z-backdrop bg-black h-full w-full left-0 top-0 transition cursor-pointer",
+      true: "z-backdrop bg-black/50 h-full w-full left-0 top-0 transition cursor-pointer",
       false: "invisible"
     }
   }

package/dist/esm/index.js

@@ -18,3 +18,4 @@ export { styleInputElement, styleLabelElement, toggle } from './components/toggl
 export { tooltip, tooltipContainer } from './components/tooltip/tooltip.js';
 export { default as preset } from './preset/index.js';
 export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor, zIndex } from './tokens/definitions.js';
+export { updateThemeColors } from './utils/index.js';

package/dist/esm/tokens/definitions.js

@@ -1,17 +1,17 @@
 const colors = {
   primary: {
-    xlight: "#fef9f0",
-    light: "#fccb83",
-    medium: "#f89907",
-    dark: "#ae6b05",
-    xdark: "#633d03"
+    xlight: "var(--color-primary-xlight, #fef9f0)",
+    light: "var(--color-primary-light, #fccb83)",
+    medium: "var(--color-primary-medium, #f89907)",
+    dark: "var(--color-primary-dark, #ae6b05)",
+    xdark: "var(--color-primary-xdark, #633d03)"
   },
   secondary: {
-    xlight: "#f8f7f7",
-    light: "#c2bfbc",
-    medium: "#85807a",
-    dark: "#5d5955",
-    xdark: "#353231"
+    xlight: "var(--color-secondary-xlight, #f8f7f7)",
+    light: "var(--color-secondary-light, #c2bfbc)",
+    medium: "var(--color-secondary-medium, #85807a)",
+    dark: "var(--color-secondary-dark, #5d5955)",
+    xdark: "var(--color-secondary-xdark, #353231)"
   },
   info: {
     xlight: "#f0f8fe",

package/dist/esm/utils/index.js

@@ -0,0 +1,12 @@
+const updateThemeColors = (theme) => {
+  const root = document.documentElement;
+  Object.entries(theme).forEach(([colorName, colorShades]) => {
+    if (!colorShades) return;
+    Object.entries(colorShades).forEach(([shade, hexValue]) => {
+      if (!hexValue) return;
+      root.style.setProperty(`--color-${colorName}-${shade}`, hexValue);
+    });
+  });
+};
+
+export { updateThemeColors };

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export { default as preset } from './preset';
 export * from './tokens/definitions';
+export * from './utils';

package/dist/types/utils/index.d.ts

@@ -0,0 +1,12 @@
+export interface ColorShade {
+    xlight: string;
+    light: string;
+    medium: string;
+    dark: string;
+    xdark: string;
+}
+export interface ThemeColors {
+    primary: ColorShade;
+    secondary: ColorShade;
+}
+export declare const updateThemeColors: (theme: Partial<ThemeColors>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-core",
-  "version": "1.1.0",
+  "version": "1.1.2-beta.0",
   "license": "MIT",
   "description": "Core library for tailwindcss based design",
   "main": "dist/esm/index.js",
@@ -31,5 +31,5 @@
   "peerDependencies": {
     "tailwindcss": ">=3.3.0"
   },
-  "gitHead": "e2db119fd66716080671d57c50c277f4dff667d4"
+  "gitHead": "607a4dd151aa82ea6f6a01d3c99692d1bbe047f5"
 }