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

package/dist/cjs/index.js

@@ -69,6 +69,7 @@ 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;

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,36 @@ 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-primary", definitions.darkColors.content.primary);
+      style.setProperty(
+        "--color-content-secondary",
+        definitions.darkColors.content.secondary
+      );
+      style.setProperty(
+        "--color-content-tertiary",
+        definitions.darkColors.content.tertiary
+      );
+      style.setProperty(
+        "--color-content-disabled",
+        definitions.darkColors.content.disabled
+      );
+      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-primary", definitions.colors.content.primary);
+      style.setProperty("--color-content-secondary", definitions.colors.content.secondary);
+      style.setProperty("--color-content-tertiary", definitions.colors.content.tertiary);
+      style.setProperty("--color-content-disabled", definitions.colors.content.disabled);
+      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: {
+    primary: "#f8f7f7",
+    secondary: "#c2bfbc",
+    tertiary: "#85807a",
+    disabled: "#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: {
+    primary: "var(--color-content-primary, #353231)",
+    secondary: "var(--color-content-secondary, #5d5955)",
+    tertiary: "var(--color-content-tertiary, #85807a)",
+    disabled: "var(--color-content-disabled, #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/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 { borderColor, borderRadius, borderWidth, boxShadow, colors, darkColors, fontFamily, fontSize, spacing, textColor, zIndex } from './tokens/definitions.js';
 export { setDarkMode, 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,36 @@ 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-primary", darkColors.content.primary);
+      style.setProperty(
+        "--color-content-secondary",
+        darkColors.content.secondary
+      );
+      style.setProperty(
+        "--color-content-tertiary",
+        darkColors.content.tertiary
+      );
+      style.setProperty(
+        "--color-content-disabled",
+        darkColors.content.disabled
+      );
+      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-primary", colors.content.primary);
+      style.setProperty("--color-content-secondary", colors.content.secondary);
+      style.setProperty("--color-content-tertiary", colors.content.tertiary);
+      style.setProperty("--color-content-disabled", colors.content.disabled);
+      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: {
+    primary: "#f8f7f7",
+    secondary: "#c2bfbc",
+    tertiary: "#85807a",
+    disabled: "#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: {
+    primary: "var(--color-content-primary, #353231)",
+    secondary: "var(--color-content-secondary, #5d5955)",
+    tertiary: "var(--color-content-tertiary, #85807a)",
+    disabled: "var(--color-content-disabled, #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/types/preset/index.d.ts

@@ -46,6 +46,13 @@ declare const preset: {
                     raised: string;
                     overlay: string;
                 };
+                content: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    disabled: 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: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        disabled: string;
+        inverse: string;
+    };
+};
 declare const colors: {
     primary: {
         xlight: string;
@@ -39,6 +57,13 @@ declare const colors: {
         raised: string;
         overlay: string;
     };
+    content: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        disabled: 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-core",
-  "version": "1.3.0-beta.2",
+  "version": "1.3.0-beta.3",
   "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": "f13be73645bde5042aeb082331dc6c6d80fb506e"
 }