@tecsinapse/cortex-core 2.0.2-beta.1 → 2.0.2-beta.3

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-white enabled:active:scale-95 transform transition hover:text-white text-white cursor-pointer items-center flex justify-center",
+  base: "text-base h-fit font-bold disabled:text-on-primary enabled:active:scale-95 transform transition hover:text-on-primary text-on-primary 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-white",
+      primary: "bg-primary-medium text-on-primary",
       secondary: "bg-secondary-medium text-white",
       info: "bg-info-medium text-white",
       success: "bg-success-medium text-white",

package/dist/cjs/index.js

@@ -74,3 +74,4 @@ exports.spacing = definitions.spacing;
 exports.textColor = definitions.textColor;
 exports.zIndex = definitions.zIndex;
 exports.updateThemeColors = index.updateThemeColors;
+exports.updateThemeText = index.updateThemeText;

package/dist/cjs/tokens/definitions.js

@@ -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: "var(--color-on-primary, #fff)",
+  medium: "var(--color-medium, #85807a)",
+  dark: "var(--color-dark, #353231)",
   orange: "#f89907"
 };
 const zIndex = {

package/dist/cjs/utils/index.js

@@ -2,24 +2,30 @@
 
 var polished = require('polished');
 
-const updateThemeColors = (theme) => {
+const updateThemeText = (colorName, shade, hexValue) => {
+  const root = document.documentElement;
+  if (colorName === "primary" && shade === "medium") {
+    if (polished.getContrast(hexValue, "#fff") < 2.5) {
+      root.setAttribute("data-contrast", "black");
+    } else {
+      root.setAttribute("data-contrast", "white");
+    }
+  }
+};
+const updateThemeColors = ({
+  theme,
+  updateText = false
+}) => {
   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);
-      if (shade !== "xlight" && shade !== "xdark" && polished.getContrast(
-        root.style.getPropertyValue(`--color-text-${shade}`),
-        hexValue
-      ) < 4.5) {
-        root.style.setProperty(
-          `--color-text-${shade}`,
-          polished.readableColor(hexValue)
-        );
-      }
+      if (updateText) updateThemeText(colorName, shade, hexValue);
     });
   });
 };
 
 exports.updateThemeColors = updateThemeColors;
+exports.updateThemeText = updateThemeText;

package/dist/default.css

@@ -1,5 +1,13 @@
 @import "tailwindcss";
 
+:root {
+  --color-on-primary: #fff
+}
+
+:root[data-contrast='black'] {
+  --color-on-primary: #000
+}
+
 @theme {
   /* Colors - primary */
   --color-primary-xlight: #fef9f0;
@@ -128,10 +136,11 @@
   --color-border-success-light: #99E6C9;
 
   /* Text colors */
-  --color-text-light: #fff;
-  --color-text-medium: #85807a;
-  --color-text-dark: #353231;
-  --color-text-orange: #f89907;
+  --color-on-primary: var(--color-on-primary);
+  --color-light: #fff;
+  --color-medium: #85807a;
+  --color-dark: #353231;
+  --color-orange: #f89907;
 
   /* Z-index */
   --z-index-default: 0;

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-white enabled:active:scale-95 transform transition hover:text-white text-white cursor-pointer items-center flex justify-center",
+  base: "text-base h-fit font-bold disabled:text-on-primary enabled:active:scale-95 transform transition hover:text-on-primary text-on-primary 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-white",
+      primary: "bg-primary-medium text-on-primary",
       secondary: "bg-secondary-medium text-white",
       info: "bg-info-medium text-white",
       success: "bg-success-medium text-white",

package/dist/esm/index.js

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

package/dist/esm/tokens/definitions.js

@@ -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: "var(--color-on-primary, #fff)",
+  medium: "var(--color-medium, #85807a)",
+  dark: "var(--color-dark, #353231)",
   orange: "#f89907"
 };
 const zIndex = {

package/dist/esm/utils/index.js

@@ -1,23 +1,28 @@
-import { getContrast, readableColor } from 'polished';
+import { getContrast } from 'polished';
 
-const updateThemeColors = (theme) => {
+const updateThemeText = (colorName, shade, hexValue) => {
+  const root = document.documentElement;
+  if (colorName === "primary" && shade === "medium") {
+    if (getContrast(hexValue, "#fff") < 2.5) {
+      root.setAttribute("data-contrast", "black");
+    } else {
+      root.setAttribute("data-contrast", "white");
+    }
+  }
+};
+const updateThemeColors = ({
+  theme,
+  updateText = false
+}) => {
   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);
-      if (shade !== "xlight" && shade !== "xdark" && getContrast(
-        root.style.getPropertyValue(`--color-text-${shade}`),
-        hexValue
-      ) < 4.5) {
-        root.style.setProperty(
-          `--color-text-${shade}`,
-          readableColor(hexValue)
-        );
-      }
+      if (updateText) updateThemeText(colorName, shade, hexValue);
     });
   });
 };
 
-export { updateThemeColors };
+export { updateThemeColors, updateThemeText };

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-white enabled:active:scale-95 transform transition hover:text-white text-white cursor-pointer items-center flex justify-center", {
+}, undefined, "text-base h-fit font-bold disabled:text-on-primary enabled:active:scale-95 transform transition hover:text-on-primary text-on-primary 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-white enabled:active:scale-95 transform transition hover:text-white text-white cursor-pointer items-center flex justify-center", unknown, unknown, undefined>>;
+}, undefined, "text-base h-fit font-bold disabled:text-on-primary enabled:active:scale-95 transform transition hover:text-on-primary text-on-primary 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,6 @@
 import { colors } from '../tokens/definitions';
-export declare const updateThemeColors: (theme: Partial<typeof colors>) => void;
+export declare const updateThemeText: (colorName: string, shade: string, hexValue: string) => void;
+export declare const updateThemeColors: ({ theme, updateText, }: {
+    theme: Partial<typeof colors>;
+    updateText?: boolean;
+}) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-core",
-  "version": "2.0.2-beta.1",
+  "version": "2.0.2-beta.3",
   "license": "MIT",
   "description": "Core library for tailwindcss based design",
   "main": "dist/esm/index.js",
@@ -35,5 +35,5 @@
   "peerDependencies": {
     "tailwindcss": "^4.1.16"
   },
-  "gitHead": "7312335a32c082dd8cf3b264bae6cda03678f5f1"
+  "gitHead": "5de99380c3dbe5a345730503a21bf91fc17eba3d"
 }