@tecsinapse/cortex-core 1.2.1-beta.2 → 1.3.0-beta.0

package/dist/cjs/components/button/button.js

@@ -3,7 +3,7 @@
 var tailwindVariants = require('tailwind-variants');
 
 const buttonStyles = tailwindVariants.tv({
-  base: "text-base h-fit font-bold disabled:text-light enabled:active:scale-95 transform transition hover:text-light text-light cursor-pointer items-center flex justify-center",
+  base: "text-base h-fit font-bold disabled:text-white enabled:active:scale-95 transform transition hover:text-white text-white cursor-pointer items-center flex justify-center",
   variants: {
     intent: {
       primary: "bg-primary-medium disabled:bg-primary-light active:bg-primary-dark enabled:hover:border-primary-dark hover:bg-primary-dark",

package/dist/cjs/components/tag/tag.js

@@ -15,7 +15,7 @@ const tagStyles = myTV({
   base: "rounded-micro px-micro py-nano w-fit font-bold text-label items-center flex gap-1",
   variants: {
     intent: {
-      primary: "bg-primary-medium text-light",
+      primary: "bg-primary-medium text-white",
       secondary: "bg-secondary-medium text-white",
       info: "bg-info-medium text-white",
       success: "bg-success-medium text-white",

package/dist/cjs/index.js

@@ -73,4 +73,5 @@ exports.fontSize = definitions.fontSize;
 exports.spacing = definitions.spacing;
 exports.textColor = definitions.textColor;
 exports.zIndex = definitions.zIndex;
+exports.setDarkMode = index$1.setDarkMode;
 exports.updateThemeColors = index$1.updateThemeColors;

package/dist/cjs/tokens/definitions.js

@@ -44,7 +44,7 @@ const colors = {
     xdark: "#58240e"
   },
   miscellaneous: {
-    body: "#f8f7f7"
+    body: "var(--color-body, #f8f7f7)"
   }
 };
 const spacing = {
@@ -153,9 +153,9 @@ const fontFamily = {
   mono: "Consolas, monaco, monospace"
 };
 const textColor = {
-  light: "var(--color-text-light, #fff)",
-  medium: "var(--color-text-medium, #85807a)",
-  dark: "var(--color-text-dark, #353231)",
+  light: "#fff",
+  medium: "#85807a",
+  dark: "#353231",
   orange: "#f89907"
 };
 const zIndex = {

package/dist/cjs/utils/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var polished = require('polished');
-
 const updateThemeColors = (theme) => {
   const root = document.documentElement;
   Object.entries(theme).forEach(([colorName, colorShades]) => {
@@ -9,13 +7,18 @@ const updateThemeColors = (theme) => {
     Object.entries(colorShades).forEach(([shade, hexValue]) => {
       if (!hexValue) return;
       root.style.setProperty(`--color-${colorName}-${shade}`, hexValue);
-      if (colorName === "primary" && shade === "medium") {
-        if (polished.getContrast(hexValue, "#fff") < 4.5) {
-          root.style.setProperty("--color-text-light", polished.readableColor(hexValue));
-        }
-      }
     });
   });
 };
+const setDarkMode = () => {
+  const style = document.documentElement.style;
+  const isDark = style.getPropertyValue("--color-body") !== "#f8f7f7";
+  if (!isDark) {
+    style.setProperty("--color-body", "#1e1e1e");
+  } else {
+    style.setProperty("--color-body", "#f8f7f7");
+  }
+};
 
+exports.setDarkMode = setDarkMode;
 exports.updateThemeColors = updateThemeColors;

package/dist/esm/components/button/button.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 const buttonStyles = tv({
-  base: "text-base h-fit font-bold disabled:text-light enabled:active:scale-95 transform transition hover:text-light text-light cursor-pointer items-center flex justify-center",
+  base: "text-base h-fit font-bold disabled:text-white enabled:active:scale-95 transform transition hover:text-white text-white cursor-pointer items-center flex justify-center",
   variants: {
     intent: {
       primary: "bg-primary-medium disabled:bg-primary-light active:bg-primary-dark enabled:hover:border-primary-dark hover:bg-primary-dark",

package/dist/esm/components/tag/tag.js

@@ -13,7 +13,7 @@ const tagStyles = myTV({
   base: "rounded-micro px-micro py-nano w-fit font-bold text-label items-center flex gap-1",
   variants: {
     intent: {
-      primary: "bg-primary-medium text-light",
+      primary: "bg-primary-medium text-white",
       secondary: "bg-secondary-medium text-white",
       info: "bg-info-medium text-white",
       success: "bg-success-medium text-white",

package/dist/esm/index.js

@@ -19,4 +19,4 @@ export { tooltip, tooltipContainer } from './components/tooltip/tooltip.js';
 export { manager } from './components/manager/manager.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';
+export { setDarkMode, updateThemeColors } from './utils/index.js';

package/dist/esm/tokens/definitions.js

@@ -42,7 +42,7 @@ const colors = {
     xdark: "#58240e"
   },
   miscellaneous: {
-    body: "#f8f7f7"
+    body: "var(--color-body, #f8f7f7)"
   }
 };
 const spacing = {
@@ -151,9 +151,9 @@ const fontFamily = {
   mono: "Consolas, monaco, monospace"
 };
 const textColor = {
-  light: "var(--color-text-light, #fff)",
-  medium: "var(--color-text-medium, #85807a)",
-  dark: "var(--color-text-dark, #353231)",
+  light: "#fff",
+  medium: "#85807a",
+  dark: "#353231",
   orange: "#f89907"
 };
 const zIndex = {

package/dist/esm/utils/index.js

@@ -1,5 +1,3 @@
-import { getContrast, readableColor } from 'polished';
-
 const updateThemeColors = (theme) => {
   const root = document.documentElement;
   Object.entries(theme).forEach(([colorName, colorShades]) => {
@@ -7,13 +5,17 @@ const updateThemeColors = (theme) => {
     Object.entries(colorShades).forEach(([shade, hexValue]) => {
       if (!hexValue) return;
       root.style.setProperty(`--color-${colorName}-${shade}`, hexValue);
-      if (colorName === "primary" && shade === "medium") {
-        if (getContrast(hexValue, "#fff") < 4.5) {
-          root.style.setProperty("--color-text-light", readableColor(hexValue));
-        }
-      }
     });
   });
 };
+const setDarkMode = () => {
+  const style = document.documentElement.style;
+  const isDark = style.getPropertyValue("--color-body") !== "#f8f7f7";
+  if (!isDark) {
+    style.setProperty("--color-body", "#1e1e1e");
+  } else {
+    style.setProperty("--color-body", "#f8f7f7");
+  }
+};
 
-export { updateThemeColors };
+export { setDarkMode, updateThemeColors };

package/dist/types/components/button/button.d.ts

@@ -20,7 +20,7 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
         circle: string;
         base: string;
     };
-}, undefined, "text-base h-fit font-bold disabled:text-light enabled:active:scale-95 transform transition hover:text-light text-light cursor-pointer items-center flex justify-center", {
+}, undefined, "text-base h-fit font-bold disabled:text-white enabled:active:scale-95 transform transition hover:text-white text-white cursor-pointer items-center flex justify-center", {
     intent: {
         primary: string;
         secondary: string;
@@ -62,7 +62,7 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
         circle: string;
         base: string;
     };
-}, undefined, "text-base h-fit font-bold disabled:text-light enabled:active:scale-95 transform transition hover:text-light text-light cursor-pointer items-center flex justify-center", unknown, unknown, undefined>>;
+}, undefined, "text-base h-fit font-bold disabled:text-white enabled:active:scale-95 transform transition hover:text-white text-white cursor-pointer items-center flex justify-center", unknown, unknown, undefined>>;
 export type ButtonVariants = VariantProps<typeof buttonStyles> & {
     className?: string;
 };

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

@@ -1,2 +1,3 @@
 import { colors } from '../tokens/definitions';
 export declare const updateThemeColors: (theme: Partial<typeof colors>) => void;
+export declare const setDarkMode: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-core",
-  "version": "1.2.1-beta.2",
+  "version": "1.3.0-beta.0",
   "license": "MIT",
   "description": "Core library for tailwindcss based design",
   "main": "dist/esm/index.js",
@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "clsx": "2.1.1",
-    "polished": "^4.3.1",
     "tailwind-variants": "1.0.0"
   },
   "repository": {
@@ -32,5 +31,5 @@
   "peerDependencies": {
     "tailwindcss": ">=3.3.0"
   },
-  "gitHead": "203b53593f6337305563c06953561528d64139b6"
+  "gitHead": "c267542fbb45c9c598be530f2c2d4211365a816e"
 }