@tecsinapse/cortex-core 2.0.2-beta.2 → 2.1.0-beta.0

package/dist/cjs/components/badge/badge.js

@@ -7,7 +7,7 @@ const badgeStyles = tailwindVariants.tv({
   variants: {
     intent: {
       primary: "bg-primary-medium",
-      secondary: "bg-secondary-medium",
+      secondary: "bg-content-low",
       error: "bg-error-medium",
       success: "bg-success-medium",
       warning: "bg-warning-medium",

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

@@ -3,11 +3,11 @@
 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",
-      secondary: "bg-secondary-medium disabled:bg-secondary-light active:bg-secondary-dark hover:bg-secondary-dark hover:border-secondary-dark ",
+      secondary: "bg-content-low disabled:bg-content-minimal active:bg-content-medium hover:bg-content-medium hover:border-content-medium ",
       success: "bg-success-medium disabled:bg-success-light hover:bg-success-dark hover:border-success-dark",
       info: " bg-info-medium disabled:bg-info-light hover:bg-info-dark hover:border-info-dark ",
       warning: " bg-warning-medium disabled:bg-warning-light hover:bg-warning-dark hover:border-warning-dark",
@@ -35,7 +35,7 @@ const buttonStyles = tailwindVariants.tv({
     {
       intent: "secondary",
       variant: "outline",
-      className: "text-secondary-medium disabled:text-secondary-light border border-secondary-medium disabled:border-secondary-light"
+      className: "text-content-low disabled:text-content-minimal border border-content-low disabled:border-content-minimal"
     },
     {
       intent: "success",
@@ -65,7 +65,7 @@ const buttonStyles = tailwindVariants.tv({
     {
       intent: "secondary",
       variant: "text",
-      className: "text-secondary-medium disabled:text-secondary-light"
+      className: "text-content-low disabled:text-content-minimal"
     },
     {
       intent: "success",

package/dist/cjs/components/card/card.js

@@ -3,7 +3,7 @@
 var tailwindVariants = require('tailwind-variants');
 
 const card = tailwindVariants.tv({
-  base: "rounded-mili shadow-default bg-white p-deca"
+  base: "rounded-mili shadow-default bg-surface-overlay p-deca"
 });
 
 exports.card = card;

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

@@ -6,7 +6,7 @@ const overlay = tailwindVariants.tv({
   base: "fixed",
   variants: {
     show: {
-      true: "z-backdrop bg-black/50 h-full w-full left-0 top-0 transition cursor-pointer",
+      true: "z-backdrop bg-surface-inverse/50 h-full w-full left-0 top-0 transition cursor-pointer",
       false: "invisible"
     }
   }
@@ -15,7 +15,7 @@ const pressableSurface = tailwindVariants.tv({
   base: "rounded-mili flex flex-1 justify-center py-mili font-bold hover:cursor-pointer",
   variants: {
     selected: {
-      true: "border text-black border-secondary-light",
+      true: "border text-default border-secondary-light",
       false: "text-secondary-medium  hover:bg-secondary-xlight hover:border"
     }
   }

package/dist/cjs/components/divider/divider.js

@@ -3,7 +3,7 @@
 var tailwindVariants = require('tailwind-variants');
 
 const divider = tailwindVariants.tv({
-  base: "border-solid border-t border-secondary-light w-full"
+  base: "border-solid border-t border-content-minimal w-full"
 });
 
 exports.divider = divider;

package/dist/cjs/components/drawer/drawer.js

@@ -3,7 +3,7 @@
 var tailwindVariants = require('tailwind-variants');
 
 const drawerStyles = tailwindVariants.tv({
-  base: "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll",
+  base: "bg-surface-overlay fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll",
   variants: {
     position: {
       left: "left-0 -translate-x-full rounded-r-mili",

package/dist/cjs/components/hint/hint.js

@@ -6,7 +6,7 @@ const hintStyles = tailwindVariants.tv({
   base: "text-label font-bold flex items-center",
   variants: {
     intent: {
-      default: "text-secondary-medium",
+      default: "text-content-low",
       success: "text-success-medium",
       warning: "text-warning-medium",
       error: "text-error-medium"

package/dist/cjs/components/input/input.js

@@ -4,14 +4,14 @@ var clsx = require('clsx');
 var tailwindVariants = require('tailwind-variants');
 
 const inputBaseStyles = tailwindVariants.tv({
-  base: "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-secondary-light has-[:disabled]:text-secondary-light",
+  base: "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-surface-overlay focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-content-minimal has-[:disabled]:text-content-minimal",
   variants: {
     intent: {
       default: [
-        "input-secondary",
-        "border-secondary-light",
-        "focus-within:border-secondary-dark",
-        "focus-within:outline-secondary-dark"
+        "input-content",
+        "border-content-minimal",
+        "focus-within:border-content-medium",
+        "focus-within:outline-content-medium"
       ],
       success: [
         "input-success",
@@ -38,13 +38,13 @@ const inputBaseStyles = tailwindVariants.tv({
   }
 });
 const labelBaseStyles = tailwindVariants.tv({
-  base: "absolute duration-300 -translate-y-2 scale-[0.72] top-2.5 z-10 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-0 peer-focus:scale-[0.72] peer-focus:-translate-y-2 peer-focus:top-2.5 font-bold text-base peer-disabled:text-secondary-light select-none w-max peer-autofill:scale-[0.72] peer-autofill:-translate-y-2 peer-autofill:top-2.5",
+  base: "absolute duration-300 -translate-y-2 scale-[0.72] top-2.5 z-10 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-0 peer-focus:scale-[0.72] peer-focus:-translate-y-2 peer-focus:top-2.5 font-bold text-base peer-disabled:text-content-minimal select-none w-max peer-autofill:scale-[0.72] peer-autofill:-translate-y-2 peer-autofill:top-2.5",
   variants: {
     intent: {
       default: [
-        "text-secondary-medium",
-        "peer-focus:text-secondary-medium",
-        "peer-placeholder-shown:text-secondary-medium"
+        "text-content-low",
+        "peer-focus:text-content-low",
+        "peer-placeholder-shown:text-content-low"
       ],
       success: ["text-success-medium"],
       warning: ["text-warning-medium"],
@@ -63,7 +63,7 @@ const labelStyle = ({ intent, placeholder, className }) => labelBaseStyles({
 });
 const inputBox = (placeholder, label2, className) => clsx.clsx(
   className,
-  "peer relative outline-none placeholder:text-base placeholder:text-secondary-medium placeholder-shown:top-0 disabled:placeholder:text-secondary-light disabled:text-secondary-light bg-transparent",
+  "peer relative outline-none placeholder:text-base placeholder:text-content-low placeholder-shown:top-0 disabled:placeholder:text-content-minimal disabled:text-content-minimal bg-transparent",
   {
     "focus:top-1.5": !placeholder && !!label2,
     "top-1.5": !!label2

package/dist/cjs/components/manager/manager.js

@@ -3,7 +3,7 @@
 var tailwindVariants = require('tailwind-variants');
 
 const manager = tailwindVariants.tv({
-  base: "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal",
+  base: "fixed rounded-micro p-deca bg-surface-overlay shadow-xl flex transition bottom-deca right-deca z-modal",
   variants: {
     open: {
       true: "scale-100 visible",

package/dist/cjs/components/modal/modal.js

@@ -3,7 +3,7 @@
 var tailwindVariants = require('tailwind-variants');
 
 const modal = tailwindVariants.tv({
-  base: "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 m-auto max-w-fit z-modal",
+  base: "fixed rounded-micro p-kilo bg-surface-overlay shadow-default flex transition inset-0 m-auto max-w-fit z-modal",
   variants: {
     open: {
       true: "scale-100 visible",

package/dist/cjs/components/popover/popover.js

@@ -6,7 +6,7 @@ const popoverContainer = tailwindVariants.tv({
   base: "group relative inline-block"
 });
 const popoverStyles = tailwindVariants.tv({
-  base: "border border-gray-200 bg-black text-white p-4 rounded-md shadow-lg z-50"
+  base: "border border-gray-200 bg-surface-inverse text-white p-4 rounded-md shadow-lg z-50"
 });
 const popoverItem = tailwindVariants.tv({
   base: "p-deca flex flex-row space-x-mili items-center hover:bg-primary-light hover:cursor-pointer"

package/dist/cjs/components/select/select.js

@@ -15,8 +15,8 @@ const option = tailwindVariants.tv({
 });
 const selectVariants = tailwindVariants.tv({
   slots: {
-    button: "disabled:pointer-events-none disabled:text-secondary-light flex w-full justify-between items-center bg-white relative min-h-[44px] h-auto flex px-centi py-1.5 text-base font-bold items-center border border-secondary-light rounded-mili",
-    groupedTitle: "font-bold text-secondary-medium mx-centi",
+    button: "disabled:pointer-events-none disabled:text-content-minimal flex w-full justify-between items-center bg-surface-overlay relative min-h-[44px] h-auto flex px-centi py-1.5 text-base font-bold items-center border border-content-minimal rounded-mili",
+    groupedTitle: "font-bold text-content-low mx-centi",
     list: "list-none p-0"
   },
   variants: {

package/dist/cjs/components/snackbar/snackbar.js

@@ -7,7 +7,7 @@ const snackbarStyles = tailwindVariants.tv({
   variants: {
     intent: {
       default: "bg-primary-xlight text-primary-medium",
-      secondary: "bg-secondary-xlight text-secondary-medium",
+      secondary: "bg-content-inverse text-content-low",
       success: "bg-success-xlight text-success-medium",
       error: "bg-error-xlight text-error-medium",
       info: "bg-info-xlight text-info-medium",

package/dist/cjs/components/table/table.js

@@ -18,10 +18,10 @@ const tFoot = tailwindVariants.tv({
   base: "[&>tr]:rounded-none [&>tr]:shadow-none"
 });
 const tRoot = tailwindVariants.tv({
-  base: "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-white shadow-default"
+  base: "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-surface-overlay shadow-default"
 });
 const hr = tailwindVariants.tv({
-  base: "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-secondary-xlight"
+  base: "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-surface-base"
 });
 
 exports.hr = hr;

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

@@ -15,13 +15,13 @@ 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",
-      secondary: "bg-secondary-medium text-white",
+      primary: "bg-primary-medium text-white",
+      secondary: "bg-content-low text-white",
       info: "bg-info-medium text-white",
       success: "bg-success-medium text-white",
       warning: "bg-warning-medium text-white",
       error: "bg-error-medium text-white",
-      white: "bg-white text-secondary-medium"
+      white: "bg-surface-overlay text-content-low"
     }
   },
   defaultVariants: {

package/dist/cjs/components/toggle/toggle.js

@@ -3,11 +3,11 @@
 var tailwindVariants = require('tailwind-variants');
 
 const toggleStyles = tailwindVariants.tv({
-  base: "peer h-[22px] w-[40px] rounded-full bg-secondary-light after:absolute after:left-micro after:top-[3px] after:h-deca after:w-deca after:rounded-full after:border after:border-white after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none",
+  base: "peer h-[22px] w-[40px] rounded-full bg-content-minimal after:absolute after:left-micro after:top-[3px] after:h-deca after:w-deca after:rounded-full after:border after:border-white after:bg-surface-overlay after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none",
   variants: {
     intent: {
       primary: "peer-focus:primary-medium peer-checked:bg-primary-medium",
-      secondary: "peer-focus:secondary-medium peer-checked:bg-secondary-medium",
+      secondary: "peer-focus:secondary-medium peer-checked:bg-content-low",
       info: "peer-focus:info-medium peer-checked:bg-info-medium",
       success: "peer-focus:success-medium peer-checked:bg-success-medium",
       warning: "peer-focus:warning-medium peer-checked:bg-warning-medium",

package/dist/cjs/components/tooltip/tooltip.js

@@ -6,7 +6,7 @@ const tooltipContainer = tailwindVariants.tv({
   base: "group relative inline-block"
 });
 const arrowTooltipStyles = tailwindVariants.tv({
-  base: 'after:content-[""] after:absolute after:border-secondary-dark',
+  base: 'after:content-[""] after:absolute after:border-content-medium',
   variants: {
     position: {
       top: "after:left-[50%] after:-ml-[5px] after:top-[100%] after:border-x-8 after:border-x-transparent after:border-t-[8px]",
@@ -15,7 +15,7 @@ const arrowTooltipStyles = tailwindVariants.tv({
   }
 });
 const tooltipStyles = tailwindVariants.tv({
-  base: "h-8 mt-deca w-max h-fit invisible group-hover:visible opacity-0 group-hover:opacity-100  bg-secondary-dark text-white px-centi py-micro rounded-mili absolute",
+  base: "h-8 mt-deca w-max h-fit invisible group-hover:visible opacity-0 group-hover:opacity-100  bg-content-medium text-white px-centi py-micro rounded-mili absolute",
   variants: {
     position: {
       bottom: [

package/dist/cjs/index.js

@@ -21,6 +21,7 @@ var tooltip = require('./components/tooltip/tooltip.js');
 var manager = require('./components/manager/manager.js');
 var definitions = require('./tokens/definitions.js');
 var index = require('./utils/index.js');
+var DarkThemeContext = require('./provider/DarkThemeContext.js');
 
 
 
@@ -74,3 +75,5 @@ exports.spacing = definitions.spacing;
 exports.textColor = definitions.textColor;
 exports.zIndex = definitions.zIndex;
 exports.updateThemeColors = index.updateThemeColors;
+exports.DarkThemeProvider = DarkThemeContext.DarkThemeProvider;
+exports.useDarkTheme = DarkThemeContext.useDarkTheme;

package/dist/cjs/provider/DarkThemeContext.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const DarkThemeContext = react.createContext(null);
+const DarkThemeProvider = ({ children }) => {
+  const [theme, setTheme] = react.useState("light");
+  react.useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [theme]);
+  const toggleTheme = () => setTheme((t) => t === "light" ? "dark" : "light");
+  return /* @__PURE__ */ jsxRuntime.jsx(DarkThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
+};
+const useDarkTheme = () => {
+  const ctx = react.useContext(DarkThemeContext);
+  if (!ctx) throw new Error("useTheme must be used inside ThemeProvider");
+  return ctx;
+};
+
+exports.DarkThemeProvider = DarkThemeProvider;
+exports.useDarkTheme = useDarkTheme;

package/dist/cjs/tokens/definitions.js

@@ -36,6 +36,18 @@ const colors = {
     dark: "#cc9f00",
     xdark: "#665000"
   },
+  surface: {
+    base: "var(--color-surface-base, #f8f7f7)",
+    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",
@@ -153,9 +165,11 @@ 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)",
+  default: "var(--color-default, #000)",
+  inverse: "var(--color-inverse, #fff)",
+  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,11 +7,6 @@ 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));
-        }
-      }
     });
   });
 };

package/dist/default.css

@@ -1,5 +1,73 @@
 @import "tailwindcss";
 
+:root {
+  /* Body */
+  --color-body: #f8f7f7;
+
+  /* Text */
+  --color-default: #000;
+  --color-inverse: #fff;
+  
+  /* Surface */
+  --color-surface-base: #f8f7f7;
+  --color-surface-raised: #fbfbfb;
+  --color-surface-overlay: #ffffff;
+  --color-surface-inverse: #000;
+  
+  /* Content */
+  --color-content-high: #353231;
+  --color-content-medium: #5d5955;
+  --color-content-low: #85807a;
+  --color-content-minimal: #c2bfbc;
+  --color-content-inverse: #ffffff;
+}
+
+@media(prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    /* Body */
+    --color-body: #1e1e1e;
+
+    /* Text */
+    --color-default: #fff;
+    --color-inverse: #000;
+
+    /* Surface */
+    --color-surface-base: #1e1e1e;
+    --color-surface-raised: #252526;
+    --color-surface-overlay: #2d2d30;
+    --color-surface-inverse: #fff;
+
+    /* Content */
+    --color-content-high: #f8f7f7;
+    --color-content-medium: #c2bfbc;
+    --color-content-low: #85807a;
+    --color-content-minimal: #5d5955;
+    --color-content-inverse: #353231;
+    }
+}
+
+:root[data-theme='dark'] {
+  /* Body */
+  --color-body: #1e1e1e;
+
+  /* Text */
+  --color-default: #fff;
+  --color-inverse: #000;
+
+  /* Surface */
+  --color-surface-base: #1e1e1e;
+  --color-surface-raised: #252526;
+  --color-surface-overlay: #2d2d30;
+  --color-surface-inverse: #fff;
+
+  /* Content */
+  --color-content-high: #f8f7f7;
+  --color-content-medium: #c2bfbc;
+  --color-content-low: #85807a;
+  --color-content-minimal: #5d5955;
+  --color-content-inverse: #353231;
+}
+
 @theme {
   /* Colors - primary */
   --color-primary-xlight: #fef9f0;
@@ -41,8 +109,21 @@
   --color-error-dark: #9b2318;
   --color-error-xdark: #58240e;
 
+  /* Colors - content */
+  --color-content-high: var(--color-content-high);
+  --color-content-medium: var(--color-content-medium);
+  --color-content-low: var(--color-content-low);
+  --color-content-minimal: var(--color-content-minimal);
+  --color-content-inverse: var(--color-content-inverse);
+
+  /* Colors - surface */
+  --color-surface-base: var(--color-surface-base);
+  --color-surface-raised: var(--color-surface-raised);
+  --color-surface-overlay: var(--color-surface-overlay);
+  --color-surface-inverse: var(--color-surface-inverse);
+
   /* Misc */
-  --color-body: #f8f7f7;
+  --color-body: var(--color-body);
 
   /* Spacing */
   --spacing-nano: 0.125rem;
@@ -128,10 +209,12 @@
   --color-border-success-light: #99E6C9;
 
   /* Text colors */
-  --color-text-light: #fff;
-  --color-text-medium: #85807a;
-  --color-text-dark: #353231;
-  --color-text-orange: #f89907;
+  --color-default: var(--color-default);
+  --color-inverse: var(--color-inverse);
+  --color-light: #fff;
+  --color-medium: #85807a;
+  --color-dark: #353231;
+  --color-orange: #f89907;
 
   /* Z-index */
   --z-index-default: 0;

package/dist/esm/components/badge/badge.js

@@ -5,7 +5,7 @@ const badgeStyles = tv({
   variants: {
     intent: {
       primary: "bg-primary-medium",
-      secondary: "bg-secondary-medium",
+      secondary: "bg-content-low",
       error: "bg-error-medium",
       success: "bg-success-medium",
       warning: "bg-warning-medium",

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

@@ -1,11 +1,11 @@
 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",
-      secondary: "bg-secondary-medium disabled:bg-secondary-light active:bg-secondary-dark hover:bg-secondary-dark hover:border-secondary-dark ",
+      secondary: "bg-content-low disabled:bg-content-minimal active:bg-content-medium hover:bg-content-medium hover:border-content-medium ",
       success: "bg-success-medium disabled:bg-success-light hover:bg-success-dark hover:border-success-dark",
       info: " bg-info-medium disabled:bg-info-light hover:bg-info-dark hover:border-info-dark ",
       warning: " bg-warning-medium disabled:bg-warning-light hover:bg-warning-dark hover:border-warning-dark",
@@ -33,7 +33,7 @@ const buttonStyles = tv({
     {
       intent: "secondary",
       variant: "outline",
-      className: "text-secondary-medium disabled:text-secondary-light border border-secondary-medium disabled:border-secondary-light"
+      className: "text-content-low disabled:text-content-minimal border border-content-low disabled:border-content-minimal"
     },
     {
       intent: "success",
@@ -63,7 +63,7 @@ const buttonStyles = tv({
     {
       intent: "secondary",
       variant: "text",
-      className: "text-secondary-medium disabled:text-secondary-light"
+      className: "text-content-low disabled:text-content-minimal"
     },
     {
       intent: "success",

package/dist/esm/components/card/card.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 const card = tv({
-  base: "rounded-mili shadow-default bg-white p-deca"
+  base: "rounded-mili shadow-default bg-surface-overlay p-deca"
 });
 
 export { card };

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

@@ -4,7 +4,7 @@ const overlay = tv({
   base: "fixed",
   variants: {
     show: {
-      true: "z-backdrop bg-black/50 h-full w-full left-0 top-0 transition cursor-pointer",
+      true: "z-backdrop bg-surface-inverse/50 h-full w-full left-0 top-0 transition cursor-pointer",
       false: "invisible"
     }
   }
@@ -13,7 +13,7 @@ const pressableSurface = tv({
   base: "rounded-mili flex flex-1 justify-center py-mili font-bold hover:cursor-pointer",
   variants: {
     selected: {
-      true: "border text-black border-secondary-light",
+      true: "border text-default border-secondary-light",
       false: "text-secondary-medium  hover:bg-secondary-xlight hover:border"
     }
   }

package/dist/esm/components/divider/divider.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 const divider = tv({
-  base: "border-solid border-t border-secondary-light w-full"
+  base: "border-solid border-t border-content-minimal w-full"
 });
 
 export { divider };

package/dist/esm/components/drawer/drawer.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 const drawerStyles = tv({
-  base: "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll",
+  base: "bg-surface-overlay fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll",
   variants: {
     position: {
       left: "left-0 -translate-x-full rounded-r-mili",

package/dist/esm/components/hint/hint.js

@@ -4,7 +4,7 @@ const hintStyles = tv({
   base: "text-label font-bold flex items-center",
   variants: {
     intent: {
-      default: "text-secondary-medium",
+      default: "text-content-low",
       success: "text-success-medium",
       warning: "text-warning-medium",
       error: "text-error-medium"

package/dist/esm/components/input/input.js

@@ -2,14 +2,14 @@ import { clsx } from 'clsx';
 import { tv } from 'tailwind-variants';
 
 const inputBaseStyles = tv({
-  base: "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-secondary-light has-[:disabled]:text-secondary-light",
+  base: "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-surface-overlay focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-content-minimal has-[:disabled]:text-content-minimal",
   variants: {
     intent: {
       default: [
-        "input-secondary",
-        "border-secondary-light",
-        "focus-within:border-secondary-dark",
-        "focus-within:outline-secondary-dark"
+        "input-content",
+        "border-content-minimal",
+        "focus-within:border-content-medium",
+        "focus-within:outline-content-medium"
       ],
       success: [
         "input-success",
@@ -36,13 +36,13 @@ const inputBaseStyles = tv({
   }
 });
 const labelBaseStyles = tv({
-  base: "absolute duration-300 -translate-y-2 scale-[0.72] top-2.5 z-10 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-0 peer-focus:scale-[0.72] peer-focus:-translate-y-2 peer-focus:top-2.5 font-bold text-base peer-disabled:text-secondary-light select-none w-max peer-autofill:scale-[0.72] peer-autofill:-translate-y-2 peer-autofill:top-2.5",
+  base: "absolute duration-300 -translate-y-2 scale-[0.72] top-2.5 z-10 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-0 peer-focus:scale-[0.72] peer-focus:-translate-y-2 peer-focus:top-2.5 font-bold text-base peer-disabled:text-content-minimal select-none w-max peer-autofill:scale-[0.72] peer-autofill:-translate-y-2 peer-autofill:top-2.5",
   variants: {
     intent: {
       default: [
-        "text-secondary-medium",
-        "peer-focus:text-secondary-medium",
-        "peer-placeholder-shown:text-secondary-medium"
+        "text-content-low",
+        "peer-focus:text-content-low",
+        "peer-placeholder-shown:text-content-low"
       ],
       success: ["text-success-medium"],
       warning: ["text-warning-medium"],
@@ -61,7 +61,7 @@ const labelStyle = ({ intent, placeholder, className }) => labelBaseStyles({
 });
 const inputBox = (placeholder, label2, className) => clsx(
   className,
-  "peer relative outline-none placeholder:text-base placeholder:text-secondary-medium placeholder-shown:top-0 disabled:placeholder:text-secondary-light disabled:text-secondary-light bg-transparent",
+  "peer relative outline-none placeholder:text-base placeholder:text-content-low placeholder-shown:top-0 disabled:placeholder:text-content-minimal disabled:text-content-minimal bg-transparent",
   {
     "focus:top-1.5": !placeholder && !!label2,
     "top-1.5": !!label2

package/dist/esm/components/manager/manager.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 const manager = tv({
-  base: "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal",
+  base: "fixed rounded-micro p-deca bg-surface-overlay shadow-xl flex transition bottom-deca right-deca z-modal",
   variants: {
     open: {
       true: "scale-100 visible",

package/dist/esm/components/modal/modal.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 const modal = tv({
-  base: "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 m-auto max-w-fit z-modal",
+  base: "fixed rounded-micro p-kilo bg-surface-overlay shadow-default flex transition inset-0 m-auto max-w-fit z-modal",
   variants: {
     open: {
       true: "scale-100 visible",

package/dist/esm/components/popover/popover.js

@@ -4,7 +4,7 @@ const popoverContainer = tv({
   base: "group relative inline-block"
 });
 const popoverStyles = tv({
-  base: "border border-gray-200 bg-black text-white p-4 rounded-md shadow-lg z-50"
+  base: "border border-gray-200 bg-surface-inverse text-white p-4 rounded-md shadow-lg z-50"
 });
 const popoverItem = tv({
   base: "p-deca flex flex-row space-x-mili items-center hover:bg-primary-light hover:cursor-pointer"

package/dist/esm/components/select/select.js

@@ -13,8 +13,8 @@ const option = tv({
 });
 const selectVariants = tv({
   slots: {
-    button: "disabled:pointer-events-none disabled:text-secondary-light flex w-full justify-between items-center bg-white relative min-h-[44px] h-auto flex px-centi py-1.5 text-base font-bold items-center border border-secondary-light rounded-mili",
-    groupedTitle: "font-bold text-secondary-medium mx-centi",
+    button: "disabled:pointer-events-none disabled:text-content-minimal flex w-full justify-between items-center bg-surface-overlay relative min-h-[44px] h-auto flex px-centi py-1.5 text-base font-bold items-center border border-content-minimal rounded-mili",
+    groupedTitle: "font-bold text-content-low mx-centi",
     list: "list-none p-0"
   },
   variants: {

package/dist/esm/components/snackbar/snackbar.js

@@ -5,7 +5,7 @@ const snackbarStyles = tv({
   variants: {
     intent: {
       default: "bg-primary-xlight text-primary-medium",
-      secondary: "bg-secondary-xlight text-secondary-medium",
+      secondary: "bg-content-inverse text-content-low",
       success: "bg-success-xlight text-success-medium",
       error: "bg-error-xlight text-error-medium",
       info: "bg-info-xlight text-info-medium",

package/dist/esm/components/table/table.js

@@ -16,10 +16,10 @@ const tFoot = tv({
   base: "[&>tr]:rounded-none [&>tr]:shadow-none"
 });
 const tRoot = tv({
-  base: "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-white shadow-default"
+  base: "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-surface-overlay shadow-default"
 });
 const hr = tv({
-  base: "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-secondary-xlight"
+  base: "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-surface-base"
 });
 
 export { hr, tCell, tFoot, tHead, tHeadCell, tRoot, tRow };

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

@@ -13,13 +13,13 @@ 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",
-      secondary: "bg-secondary-medium text-white",
+      primary: "bg-primary-medium text-white",
+      secondary: "bg-content-low text-white",
       info: "bg-info-medium text-white",
       success: "bg-success-medium text-white",
       warning: "bg-warning-medium text-white",
       error: "bg-error-medium text-white",
-      white: "bg-white text-secondary-medium"
+      white: "bg-surface-overlay text-content-low"
     }
   },
   defaultVariants: {

package/dist/esm/components/toggle/toggle.js

@@ -1,11 +1,11 @@
 import { tv } from 'tailwind-variants';
 
 const toggleStyles = tv({
-  base: "peer h-[22px] w-[40px] rounded-full bg-secondary-light after:absolute after:left-micro after:top-[3px] after:h-deca after:w-deca after:rounded-full after:border after:border-white after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none",
+  base: "peer h-[22px] w-[40px] rounded-full bg-content-minimal after:absolute after:left-micro after:top-[3px] after:h-deca after:w-deca after:rounded-full after:border after:border-white after:bg-surface-overlay after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none",
   variants: {
     intent: {
       primary: "peer-focus:primary-medium peer-checked:bg-primary-medium",
-      secondary: "peer-focus:secondary-medium peer-checked:bg-secondary-medium",
+      secondary: "peer-focus:secondary-medium peer-checked:bg-content-low",
       info: "peer-focus:info-medium peer-checked:bg-info-medium",
       success: "peer-focus:success-medium peer-checked:bg-success-medium",
       warning: "peer-focus:warning-medium peer-checked:bg-warning-medium",

package/dist/esm/components/tooltip/tooltip.js

@@ -4,7 +4,7 @@ const tooltipContainer = tv({
   base: "group relative inline-block"
 });
 const arrowTooltipStyles = tv({
-  base: 'after:content-[""] after:absolute after:border-secondary-dark',
+  base: 'after:content-[""] after:absolute after:border-content-medium',
   variants: {
     position: {
       top: "after:left-[50%] after:-ml-[5px] after:top-[100%] after:border-x-8 after:border-x-transparent after:border-t-[8px]",
@@ -13,7 +13,7 @@ const arrowTooltipStyles = tv({
   }
 });
 const tooltipStyles = tv({
-  base: "h-8 mt-deca w-max h-fit invisible group-hover:visible opacity-0 group-hover:opacity-100  bg-secondary-dark text-white px-centi py-micro rounded-mili absolute",
+  base: "h-8 mt-deca w-max h-fit invisible group-hover:visible opacity-0 group-hover:opacity-100  bg-content-medium text-white px-centi py-micro rounded-mili absolute",
   variants: {
     position: {
       bottom: [

package/dist/esm/index.js

@@ -19,3 +19,4 @@ 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 { DarkThemeProvider, useDarkTheme } from './provider/DarkThemeContext.js';

package/dist/esm/provider/DarkThemeContext.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useContext } from 'react';
+
+const DarkThemeContext = createContext(null);
+const DarkThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState("light");
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [theme]);
+  const toggleTheme = () => setTheme((t) => t === "light" ? "dark" : "light");
+  return /* @__PURE__ */ jsx(DarkThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
+};
+const useDarkTheme = () => {
+  const ctx = useContext(DarkThemeContext);
+  if (!ctx) throw new Error("useTheme must be used inside ThemeProvider");
+  return ctx;
+};
+
+export { DarkThemeProvider, useDarkTheme };

package/dist/esm/tokens/definitions.js

@@ -34,6 +34,18 @@ const colors = {
     dark: "#cc9f00",
     xdark: "#665000"
   },
+  surface: {
+    base: "var(--color-surface-base, #f8f7f7)",
+    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",
@@ -151,9 +163,11 @@ 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)",
+  default: "var(--color-default, #000)",
+  inverse: "var(--color-inverse, #fff)",
+  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,11 +5,6 @@ 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));
-        }
-      }
     });
   });
 };

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/components/card/card.d.ts

@@ -1 +1 @@
-export declare const card: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "rounded-mili shadow-default bg-white p-deca", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "rounded-mili shadow-default bg-white p-deca", unknown, unknown, undefined>>;
+export declare const card: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "rounded-mili shadow-default bg-surface-overlay p-deca", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "rounded-mili shadow-default bg-surface-overlay p-deca", unknown, unknown, undefined>>;

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

@@ -1 +1 @@
-export declare const divider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border-solid border-t border-secondary-light w-full", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border-solid border-t border-secondary-light w-full", unknown, unknown, undefined>>;
+export declare const divider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border-solid border-t border-content-minimal w-full", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border-solid border-t border-content-minimal w-full", unknown, unknown, undefined>>;

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

@@ -8,7 +8,7 @@ declare const drawerStyles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll", {
+}, undefined, "bg-surface-overlay fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll", {
     position: {
         left: string;
         right: string;
@@ -26,7 +26,7 @@ declare const drawerStyles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "bg-white fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll", unknown, unknown, undefined>>;
+}, undefined, "bg-surface-overlay fixed  top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll", unknown, unknown, undefined>>;
 export type DrawerVariants = VariantProps<typeof drawerStyles> & ClassProp;
 export declare const drawer: (props: DrawerVariants) => string;
 export {};

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

@@ -6,7 +6,7 @@ export declare const inputBaseStyles: import("tailwind-variants").TVReturnType<{
         warning: string[];
         error: string[];
     };
-}, undefined, "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-secondary-light has-[:disabled]:text-secondary-light", {
+}, undefined, "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-surface-overlay focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-content-minimal has-[:disabled]:text-content-minimal", {
     intent: {
         default: string[];
         success: string[];
@@ -20,7 +20,7 @@ export declare const inputBaseStyles: import("tailwind-variants").TVReturnType<{
         warning: string[];
         error: string[];
     };
-}, undefined, "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-white focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-secondary-light has-[:disabled]:text-secondary-light", unknown, unknown, undefined>>;
+}, undefined, "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-surface-overlay focus-within:outline focus-within:outline-1 text-base font-bold items-center border rounded-mili has-[:disabled]:bg-transparent has-[:disabled]:border-content-minimal has-[:disabled]:text-content-minimal", unknown, unknown, undefined>>;
 declare const labelBaseStyles: import("tailwind-variants").TVReturnType<{
     intent: {
         default: string[];
@@ -28,7 +28,7 @@ declare const labelBaseStyles: import("tailwind-variants").TVReturnType<{
         warning: string[];
         error: string[];
     };
-}, undefined, "absolute duration-300 -translate-y-2 scale-[0.72] top-2.5 z-10 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-0 peer-focus:scale-[0.72] peer-focus:-translate-y-2 peer-focus:top-2.5 font-bold text-base peer-disabled:text-secondary-light select-none w-max peer-autofill:scale-[0.72] peer-autofill:-translate-y-2 peer-autofill:top-2.5", {
+}, undefined, "absolute duration-300 -translate-y-2 scale-[0.72] top-2.5 z-10 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-0 peer-focus:scale-[0.72] peer-focus:-translate-y-2 peer-focus:top-2.5 font-bold text-base peer-disabled:text-content-minimal select-none w-max peer-autofill:scale-[0.72] peer-autofill:-translate-y-2 peer-autofill:top-2.5", {
     intent: {
         default: string[];
         success: string[];
@@ -42,7 +42,7 @@ declare const labelBaseStyles: import("tailwind-variants").TVReturnType<{
         warning: string[];
         error: string[];
     };
-}, undefined, "absolute duration-300 -translate-y-2 scale-[0.72] top-2.5 z-10 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-0 peer-focus:scale-[0.72] peer-focus:-translate-y-2 peer-focus:top-2.5 font-bold text-base peer-disabled:text-secondary-light select-none w-max peer-autofill:scale-[0.72] peer-autofill:-translate-y-2 peer-autofill:top-2.5", unknown, unknown, undefined>>;
+}, undefined, "absolute duration-300 -translate-y-2 scale-[0.72] top-2.5 z-10 origin-[0] peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-0 peer-focus:scale-[0.72] peer-focus:-translate-y-2 peer-focus:top-2.5 font-bold text-base peer-disabled:text-content-minimal select-none w-max peer-autofill:scale-[0.72] peer-autofill:-translate-y-2 peer-autofill:top-2.5", unknown, unknown, undefined>>;
 export interface LabelVariants extends VariantProps<typeof labelBaseStyles> {
     className?: string;
     placeholder?: string;

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

@@ -3,7 +3,7 @@ export declare const manager: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal", {
+}, undefined, "fixed rounded-micro p-deca bg-surface-overlay shadow-xl flex transition bottom-deca right-deca z-modal", {
     open: {
         true: string;
         false: string;
@@ -13,4 +13,4 @@ export declare const manager: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "fixed rounded-micro p-deca bg-white shadow-xl flex transition bottom-deca right-deca z-modal", unknown, unknown, undefined>>;
+}, undefined, "fixed rounded-micro p-deca bg-surface-overlay shadow-xl flex transition bottom-deca right-deca z-modal", unknown, unknown, undefined>>;

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

@@ -3,7 +3,7 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 m-auto max-w-fit z-modal", {
+}, undefined, "fixed rounded-micro p-kilo bg-surface-overlay shadow-default flex transition inset-0 m-auto max-w-fit z-modal", {
     open: {
         true: string;
         false: string;
@@ -13,4 +13,4 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "fixed rounded-micro p-kilo bg-white shadow-default flex transition inset-0 m-auto max-w-fit z-modal", unknown, unknown, undefined>>;
+}, undefined, "fixed rounded-micro p-kilo bg-surface-overlay shadow-default flex transition inset-0 m-auto max-w-fit z-modal", unknown, unknown, undefined>>;

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

@@ -1,6 +1,6 @@
 import { ClassProp, VariantProps } from 'tailwind-variants';
 export declare const popoverContainer: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "group relative inline-block", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "group relative inline-block", unknown, unknown, undefined>>;
-export declare const popoverStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border border-gray-200 bg-black text-white p-4 rounded-md shadow-lg z-50", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border border-gray-200 bg-black text-white p-4 rounded-md shadow-lg z-50", unknown, unknown, undefined>>;
+export declare const popoverStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border border-gray-200 bg-surface-inverse text-white p-4 rounded-md shadow-lg z-50", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border border-gray-200 bg-surface-inverse text-white p-4 rounded-md shadow-lg z-50", unknown, unknown, undefined>>;
 export declare const popoverItem: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "p-deca flex flex-row space-x-mili items-center hover:bg-primary-light hover:cursor-pointer", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "p-deca flex flex-row space-x-mili items-center hover:bg-primary-light hover:cursor-pointer", unknown, unknown, undefined>>;
 export type popoverVariants = VariantProps<typeof popoverStyles> & ClassProp;
 export declare const popover: (props: popoverVariants) => string;

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

@@ -3,5 +3,5 @@ export declare const tRow: import("tailwind-variants").TVReturnType<{} | {} | {}
 export declare const tHeadCell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "truncate px-deca py-centi text-start text-sub font-bold text-medium", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "truncate px-deca py-centi text-start text-sub font-bold text-medium", unknown, unknown, undefined>>;
 export declare const tCell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "p-deca text-base font-bold text-dark", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "p-deca text-base font-bold text-dark", unknown, unknown, undefined>>;
 export declare const tFoot: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "[&>tr]:rounded-none [&>tr]:shadow-none", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "[&>tr]:rounded-none [&>tr]:shadow-none", unknown, unknown, undefined>>;
-export declare const tRoot: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-white shadow-default", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-white shadow-default", unknown, unknown, undefined>>;
-export declare const hr: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-secondary-xlight", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-secondary-xlight", unknown, unknown, undefined>>;
+export declare const tRoot: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-surface-overlay shadow-default", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-surface-overlay shadow-default", unknown, unknown, undefined>>;
+export declare const hr: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-surface-base", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-surface-base", unknown, unknown, undefined>>;

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

@@ -8,7 +8,7 @@ declare const toggleStyles: import("tailwind-variants").TVReturnType<{
         warning: string;
         error: string;
     };
-}, undefined, "peer h-[22px] w-[40px] rounded-full bg-secondary-light after:absolute after:left-micro after:top-[3px] after:h-deca after:w-deca after:rounded-full after:border after:border-white after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none", {
+}, undefined, "peer h-[22px] w-[40px] rounded-full bg-content-minimal after:absolute after:left-micro after:top-[3px] after:h-deca after:w-deca after:rounded-full after:border after:border-white after:bg-surface-overlay after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none", {
     intent: {
         primary: string;
         secondary: string;
@@ -26,7 +26,7 @@ declare const toggleStyles: import("tailwind-variants").TVReturnType<{
         warning: string;
         error: string;
     };
-}, undefined, "peer h-[22px] w-[40px] rounded-full bg-secondary-light after:absolute after:left-micro after:top-[3px] after:h-deca after:w-deca after:rounded-full after:border after:border-white after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none", unknown, unknown, undefined>>;
+}, undefined, "peer h-[22px] w-[40px] rounded-full bg-content-minimal after:absolute after:left-micro after:top-[3px] after:h-deca after:w-deca after:rounded-full after:border after:border-white after:bg-surface-overlay after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none", unknown, unknown, undefined>>;
 export declare const styleLabelElement: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative inline-flex cursor-pointer items-center", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative inline-flex cursor-pointer items-center", unknown, unknown, undefined>>;
 export declare const styleInputElement: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "peer sr-only", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "peer sr-only", unknown, unknown, undefined>>;
 type ToggleVariants = VariantProps<typeof toggleStyles> & ClassProp;

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

@@ -5,7 +5,7 @@ declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
         bottom: string[];
         top: string[];
     };
-}, undefined, "h-8 mt-deca w-max h-fit invisible group-hover:visible opacity-0 group-hover:opacity-100  bg-secondary-dark text-white px-centi py-micro rounded-mili absolute", {
+}, undefined, "h-8 mt-deca w-max h-fit invisible group-hover:visible opacity-0 group-hover:opacity-100  bg-content-medium text-white px-centi py-micro rounded-mili absolute", {
     position: {
         bottom: string[];
         top: string[];
@@ -15,7 +15,7 @@ declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
         bottom: string[];
         top: string[];
     };
-}, undefined, "h-8 mt-deca w-max h-fit invisible group-hover:visible opacity-0 group-hover:opacity-100  bg-secondary-dark text-white px-centi py-micro rounded-mili absolute", unknown, unknown, undefined>>;
+}, undefined, "h-8 mt-deca w-max h-fit invisible group-hover:visible opacity-0 group-hover:opacity-100  bg-content-medium text-white px-centi py-micro rounded-mili absolute", unknown, unknown, undefined>>;
 export type TooltipVariants = VariantProps<typeof tooltipStyles> & ClassProp;
 export declare const tooltip: (props: TooltipVariants) => string;
 export {};

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './tokens/definitions';
 export * from './utils';
+export * from './provider';

package/dist/types/provider/DarkThemeContext.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+type Theme = 'light' | 'dark';
+interface DarkThemeContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+}
+export declare const DarkThemeProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useDarkTheme: () => DarkThemeContextValue;
+export {};

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

@@ -0,0 +1 @@
+export * from './DarkThemeContext';

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

@@ -34,6 +34,18 @@ declare const colors: {
         dark: string;
         xdark: string;
     };
+    surface: {
+        base: string;
+        raised: string;
+        overlay: string;
+    };
+    content: {
+        high: string;
+        medium: string;
+        low: string;
+        minimal: string;
+        inverse: string;
+    };
     error: {
         xlight: string;
         light: string;
@@ -97,6 +109,8 @@ declare const fontFamily: {
     mono: string;
 };
 declare const textColor: {
+    default: string;
+    inverse: string;
     light: string;
     medium: string;
     dark: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-core",
-  "version": "2.0.2-beta.2",
+  "version": "2.1.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": "3.1.1"
   },
   "devDependencies": {
@@ -35,5 +34,5 @@
   "peerDependencies": {
     "tailwindcss": "^4.1.16"
   },
-  "gitHead": "206d1de1e16b2cc748feff799ab53fc3306248f3"
+  "gitHead": "a28d6b7a49fa7466507b9a5e3d5c8114e9224e83"
 }