@tecsinapse/cortex-core 1.3.0-beta.2 → 1.3.0-beta.4

package/dist/cjs/index.js

@@ -69,12 +69,12 @@ exports.borderRadius = definitions.borderRadius;
 exports.borderWidth = definitions.borderWidth;
 exports.boxShadow = definitions.boxShadow;
 exports.colors = definitions.colors;
+exports.darkColors = definitions.darkColors;
 exports.fontFamily = definitions.fontFamily;
 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;
 exports.ThemeProvider = DarkThemeContext.ThemeProvider;
 exports.useDarkTheme = DarkThemeContext.useDarkTheme;

package/dist/cjs/provider/DarkThemeContext.js

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var definitions = require('../tokens/definitions.js');
 
 const ThemeContext = react.createContext(null);
 const ThemeProvider = ({ children }) => {
@@ -9,17 +10,27 @@ const ThemeProvider = ({ children }) => {
   react.useEffect(() => {
     const style = document.documentElement.style;
     if (theme === "dark") {
-      style.setProperty("--color-body", "#1e1e1e");
-      style.setProperty("--color-text-default", "#fff");
-      style.setProperty("--color-surface-base", "#1e1e1e");
-      style.setProperty("--color-surface-raised", "#252526");
-      style.setProperty("--color-surface-overlay", "#2d2d30");
+      style.setProperty("--color-body", definitions.darkColors.body);
+      style.setProperty("--color-text-default", definitions.darkColors.text.default);
+      style.setProperty("--color-surface-base", definitions.darkColors.surface.base);
+      style.setProperty("--color-surface-raised", definitions.darkColors.surface.raised);
+      style.setProperty("--color-surface-overlay", definitions.darkColors.surface.overlay);
+      style.setProperty("--color-content-high", definitions.darkColors.content.high);
+      style.setProperty("--color-content-medium", definitions.darkColors.content.medium);
+      style.setProperty("--color-content-low", definitions.darkColors.content.low);
+      style.setProperty("--color-content-minimal", definitions.darkColors.content.minimal);
+      style.setProperty("--color-content-inverse", definitions.darkColors.content.inverse);
     } else {
-      style.setProperty("--color-body", "#f8f7f7");
-      style.setProperty("--color-text-default", "#000");
-      style.setProperty("--color-surface-base", "#f8f7f7");
-      style.setProperty("--color-surface-raised", "#fbfbfb");
-      style.setProperty("--color-surface-overlay", "#ffffff");
+      style.setProperty("--color-body", definitions.colors.miscellaneous.body);
+      style.setProperty("--color-text-default", definitions.textColor.default);
+      style.setProperty("--color-surface-base", definitions.colors.surface.base);
+      style.setProperty("--color-surface-raised", definitions.colors.surface.raised);
+      style.setProperty("--color-surface-overlay", definitions.colors.surface.overlay);
+      style.setProperty("--color-content-high", definitions.colors.content.high);
+      style.setProperty("--color-content-medium", definitions.colors.content.medium);
+      style.setProperty("--color-content-low", definitions.colors.content.low);
+      style.setProperty("--color-content-minimal", definitions.colors.content.minimal);
+      style.setProperty("--color-content-inverse", definitions.colors.content.inverse);
     }
   }, [theme]);
   const toggleTheme = () => setTheme((t) => t === "light" ? "dark" : "light");

package/dist/cjs/tokens/definitions.js

@@ -1,5 +1,23 @@
 'use strict';
 
+const darkColors = {
+  body: "#1e1e1e",
+  text: {
+    default: "#fff"
+  },
+  surface: {
+    base: "#1e1e1e",
+    raised: "#252526",
+    overlay: "#2d2d30"
+  },
+  content: {
+    high: "#f8f7f7",
+    medium: "#c2bfbc",
+    low: "#85807a",
+    minimal: "#5d5955",
+    inverse: "#353231"
+  }
+};
 const colors = {
   primary: {
     xlight: "var(--color-primary-xlight, #fef9f0)",
@@ -41,6 +59,13 @@ const colors = {
     raised: "var(--color-surface-raised, #fbfbfb)",
     overlay: "var(--color-surface-overlay, #ffffff)"
   },
+  content: {
+    high: "var(--color-content-high, #353231)",
+    medium: "var(--color-content-medium, #5d5955)",
+    low: "var(--color-content-low, #85807a)",
+    minimal: "var(--color-content-minimal, #c2bfbc)",
+    inverse: "var(--color-content-inverse, #ffffff)"
+  },
   error: {
     xlight: "#fdf3f2",
     light: "#ee9891",
@@ -183,6 +208,7 @@ exports.borderRadius = borderRadius;
 exports.borderWidth = borderWidth;
 exports.boxShadow = boxShadow;
 exports.colors = colors;
+exports.darkColors = darkColors;
 exports.fontFamily = fontFamily;
 exports.fontSize = fontSize;
 exports.spacing = spacing;

package/dist/cjs/utils/index.js

@@ -10,15 +10,5 @@ const updateThemeColors = (theme) => {
     });
   });
 };
-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/index.js

@@ -18,6 +18,6 @@ export { styleInputElement, styleLabelElement, toggle } from './components/toggl
 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 { setDarkMode, updateThemeColors } from './utils/index.js';
+export { borderColor, borderRadius, borderWidth, boxShadow, colors, darkColors, fontFamily, fontSize, spacing, textColor, zIndex } from './tokens/definitions.js';
+export { updateThemeColors } from './utils/index.js';
 export { ThemeProvider, useDarkTheme } from './provider/DarkThemeContext.js';

package/dist/esm/provider/DarkThemeContext.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useEffect, useContext } from 'react';
+import { darkColors, colors, textColor } from '../tokens/definitions.js';
 
 const ThemeContext = createContext(null);
 const ThemeProvider = ({ children }) => {
@@ -7,17 +8,27 @@ const ThemeProvider = ({ children }) => {
   useEffect(() => {
     const style = document.documentElement.style;
     if (theme === "dark") {
-      style.setProperty("--color-body", "#1e1e1e");
-      style.setProperty("--color-text-default", "#fff");
-      style.setProperty("--color-surface-base", "#1e1e1e");
-      style.setProperty("--color-surface-raised", "#252526");
-      style.setProperty("--color-surface-overlay", "#2d2d30");
+      style.setProperty("--color-body", darkColors.body);
+      style.setProperty("--color-text-default", darkColors.text.default);
+      style.setProperty("--color-surface-base", darkColors.surface.base);
+      style.setProperty("--color-surface-raised", darkColors.surface.raised);
+      style.setProperty("--color-surface-overlay", darkColors.surface.overlay);
+      style.setProperty("--color-content-high", darkColors.content.high);
+      style.setProperty("--color-content-medium", darkColors.content.medium);
+      style.setProperty("--color-content-low", darkColors.content.low);
+      style.setProperty("--color-content-minimal", darkColors.content.minimal);
+      style.setProperty("--color-content-inverse", darkColors.content.inverse);
     } else {
-      style.setProperty("--color-body", "#f8f7f7");
-      style.setProperty("--color-text-default", "#000");
-      style.setProperty("--color-surface-base", "#f8f7f7");
-      style.setProperty("--color-surface-raised", "#fbfbfb");
-      style.setProperty("--color-surface-overlay", "#ffffff");
+      style.setProperty("--color-body", colors.miscellaneous.body);
+      style.setProperty("--color-text-default", textColor.default);
+      style.setProperty("--color-surface-base", colors.surface.base);
+      style.setProperty("--color-surface-raised", colors.surface.raised);
+      style.setProperty("--color-surface-overlay", colors.surface.overlay);
+      style.setProperty("--color-content-high", colors.content.high);
+      style.setProperty("--color-content-medium", colors.content.medium);
+      style.setProperty("--color-content-low", colors.content.low);
+      style.setProperty("--color-content-minimal", colors.content.minimal);
+      style.setProperty("--color-content-inverse", colors.content.inverse);
     }
   }, [theme]);
   const toggleTheme = () => setTheme((t) => t === "light" ? "dark" : "light");

package/dist/esm/tokens/definitions.js

@@ -1,3 +1,21 @@
+const darkColors = {
+  body: "#1e1e1e",
+  text: {
+    default: "#fff"
+  },
+  surface: {
+    base: "#1e1e1e",
+    raised: "#252526",
+    overlay: "#2d2d30"
+  },
+  content: {
+    high: "#f8f7f7",
+    medium: "#c2bfbc",
+    low: "#85807a",
+    minimal: "#5d5955",
+    inverse: "#353231"
+  }
+};
 const colors = {
   primary: {
     xlight: "var(--color-primary-xlight, #fef9f0)",
@@ -39,6 +57,13 @@ const colors = {
     raised: "var(--color-surface-raised, #fbfbfb)",
     overlay: "var(--color-surface-overlay, #ffffff)"
   },
+  content: {
+    high: "var(--color-content-high, #353231)",
+    medium: "var(--color-content-medium, #5d5955)",
+    low: "var(--color-content-low, #85807a)",
+    minimal: "var(--color-content-minimal, #c2bfbc)",
+    inverse: "var(--color-content-inverse, #ffffff)"
+  },
   error: {
     xlight: "#fdf3f2",
     light: "#ee9891",
@@ -176,4 +201,4 @@ const zIndex = {
   modal: 1e3
 };
 
-export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor, zIndex };
+export { borderColor, borderRadius, borderWidth, boxShadow, colors, darkColors, fontFamily, fontSize, spacing, textColor, zIndex };

package/dist/esm/utils/index.js

@@ -8,14 +8,5 @@ const updateThemeColors = (theme) => {
     });
   });
 };
-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 { setDarkMode, updateThemeColors };
+export { updateThemeColors };

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

@@ -46,6 +46,13 @@ declare const preset: {
                     raised: string;
                     overlay: string;
                 };
+                content: {
+                    high: string;
+                    medium: string;
+                    low: string;
+                    minimal: string;
+                    inverse: string;
+                };
                 error: {
                     xlight: string;
                     light: string;

package/dist/types/tokens/definitions.d.ts

@@ -1,3 +1,21 @@
+declare const darkColors: {
+    body: string;
+    text: {
+        default: string;
+    };
+    surface: {
+        base: string;
+        raised: string;
+        overlay: string;
+    };
+    content: {
+        high: string;
+        medium: string;
+        low: string;
+        minimal: string;
+        inverse: string;
+    };
+};
 declare const colors: {
     primary: {
         xlight: string;
@@ -39,6 +57,13 @@ declare const colors: {
         raised: string;
         overlay: string;
     };
+    content: {
+        high: string;
+        medium: string;
+        low: string;
+        minimal: string;
+        inverse: string;
+    };
     error: {
         xlight: string;
         light: string;
@@ -121,4 +146,4 @@ declare const zIndex: {
     sidebar: number;
     modal: number;
 };
-export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor, zIndex, };
+export { borderColor, borderRadius, borderWidth, boxShadow, colors, darkColors, fontFamily, fontSize, spacing, textColor, zIndex, };

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

@@ -1,3 +1,2 @@
 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.3.0-beta.2",
+  "version": "1.3.0-beta.4",
   "license": "MIT",
   "description": "Core library for tailwindcss based design",
   "main": "dist/esm/index.js",
@@ -31,5 +31,5 @@
   "peerDependencies": {
     "tailwindcss": ">=3.3.0"
   },
-  "gitHead": "5365cc6cb2202caec12950731aff22afcc24ccbb"
+  "gitHead": "b874e5cbb323a24981bb9d6e2e1f1d2ccf454b0a"
 }