@tecsinapse/cortex-core 1.3.0-beta.0 → 1.3.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/card/card.js +1 -1
- package/dist/cjs/components/drawer/drawer.js +1 -1
- package/dist/cjs/components/input/input.js +1 -1
- package/dist/cjs/components/manager/manager.js +1 -1
- package/dist/cjs/components/modal/modal.js +1 -1
- package/dist/cjs/components/select/select.js +1 -1
- package/dist/cjs/components/table/table.js +2 -2
- package/dist/cjs/components/tag/tag.js +1 -1
- package/dist/cjs/components/toggle/toggle.js +1 -1
- package/dist/cjs/index.js +3 -0
- package/dist/cjs/provider/DarkThemeContext.js +35 -0
- package/dist/cjs/tokens/definitions.js +6 -0
- package/dist/esm/components/card/card.js +1 -1
- package/dist/esm/components/drawer/drawer.js +1 -1
- package/dist/esm/components/input/input.js +1 -1
- package/dist/esm/components/manager/manager.js +1 -1
- package/dist/esm/components/modal/modal.js +1 -1
- package/dist/esm/components/select/select.js +1 -1
- package/dist/esm/components/table/table.js +2 -2
- package/dist/esm/components/tag/tag.js +1 -1
- package/dist/esm/components/toggle/toggle.js +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/provider/DarkThemeContext.js +32 -0
- package/dist/esm/tokens/definitions.js +6 -0
- package/dist/types/components/card/card.d.ts +1 -1
- package/dist/types/components/drawer/drawer.d.ts +2 -2
- package/dist/types/components/input/input.d.ts +2 -2
- package/dist/types/components/manager/manager.d.ts +2 -2
- package/dist/types/components/modal/modal.d.ts +2 -2
- package/dist/types/components/table/table.d.ts +2 -2
- package/dist/types/components/toggle/toggle.d.ts +2 -2
- package/dist/types/index.d.ts +1 -0
- package/dist/types/preset/index.d.ts +6 -0
- package/dist/types/provider/DarkThemeContext.d.ts +12 -0
- package/dist/types/provider/index.d.ts +1 -0
- package/dist/types/tokens/definitions.d.ts +6 -0
- package/package.json +2 -2
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var tailwindVariants = require('tailwind-variants');
|
|
4
4
|
|
|
5
5
|
const drawerStyles = tailwindVariants.tv({
|
|
6
|
-
base: "bg-
|
|
6
|
+
base: "bg-surface-overlay fixed top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll",
|
|
7
7
|
variants: {
|
|
8
8
|
position: {
|
|
9
9
|
left: "left-0 -translate-x-full rounded-r-mili",
|
|
@@ -4,7 +4,7 @@ var clsx = require('clsx');
|
|
|
4
4
|
var tailwindVariants = require('tailwind-variants');
|
|
5
5
|
|
|
6
6
|
const inputBaseStyles = tailwindVariants.tv({
|
|
7
|
-
base: "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-
|
|
7
|
+
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",
|
|
8
8
|
variants: {
|
|
9
9
|
intent: {
|
|
10
10
|
default: [
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var tailwindVariants = require('tailwind-variants');
|
|
4
4
|
|
|
5
5
|
const manager = tailwindVariants.tv({
|
|
6
|
-
base: "fixed rounded-micro p-deca bg-
|
|
6
|
+
base: "fixed rounded-micro p-deca bg-surface-overlay shadow-xl flex transition bottom-deca right-deca z-modal",
|
|
7
7
|
variants: {
|
|
8
8
|
open: {
|
|
9
9
|
true: "scale-100 visible",
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var tailwindVariants = require('tailwind-variants');
|
|
4
4
|
|
|
5
5
|
const modal = tailwindVariants.tv({
|
|
6
|
-
base: "fixed rounded-micro p-kilo bg-
|
|
6
|
+
base: "fixed rounded-micro p-kilo bg-surface-overlay shadow-default flex transition inset-0 z-modal",
|
|
7
7
|
variants: {
|
|
8
8
|
open: {
|
|
9
9
|
true: "scale-100 visible",
|
|
@@ -15,7 +15,7 @@ const option = tailwindVariants.tv({
|
|
|
15
15
|
});
|
|
16
16
|
const selectVariants = tailwindVariants.tv({
|
|
17
17
|
slots: {
|
|
18
|
-
button: "disabled:pointer-events-none disabled:text-secondary-light flex w-full justify-between items-center bg-
|
|
18
|
+
button: "disabled:pointer-events-none disabled:text-secondary-light 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-secondary-light rounded-mili",
|
|
19
19
|
groupedTitle: "font-bold text-secondary-medium mx-centi",
|
|
20
20
|
list: "list-none p-0"
|
|
21
21
|
},
|
|
@@ -18,10 +18,10 @@ const tFoot = tailwindVariants.tv({
|
|
|
18
18
|
base: "[&>tr]:rounded-none [&>tr]:shadow-none"
|
|
19
19
|
});
|
|
20
20
|
const tRoot = tailwindVariants.tv({
|
|
21
|
-
base: "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-
|
|
21
|
+
base: "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-surface-overlay shadow-default"
|
|
22
22
|
});
|
|
23
23
|
const hr = tailwindVariants.tv({
|
|
24
|
-
base: "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-
|
|
24
|
+
base: "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-surface-base"
|
|
25
25
|
});
|
|
26
26
|
|
|
27
27
|
exports.hr = hr;
|
|
@@ -21,7 +21,7 @@ const tagStyles = myTV({
|
|
|
21
21
|
success: "bg-success-medium text-white",
|
|
22
22
|
warning: "bg-warning-medium text-white",
|
|
23
23
|
error: "bg-error-medium text-white",
|
|
24
|
-
white: "bg-
|
|
24
|
+
white: "bg-surface-overlay text-secondary-medium"
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
27
|
defaultVariants: {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var tailwindVariants = require('tailwind-variants');
|
|
4
4
|
|
|
5
5
|
const toggleStyles = tailwindVariants.tv({
|
|
6
|
-
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-
|
|
6
|
+
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-surface-overlay after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none",
|
|
7
7
|
variants: {
|
|
8
8
|
intent: {
|
|
9
9
|
primary: "peer-focus:primary-medium peer-checked:bg-primary-medium",
|
package/dist/cjs/index.js
CHANGED
|
@@ -22,6 +22,7 @@ var manager = require('./components/manager/manager.js');
|
|
|
22
22
|
var index = require('./preset/index.js');
|
|
23
23
|
var definitions = require('./tokens/definitions.js');
|
|
24
24
|
var index$1 = require('./utils/index.js');
|
|
25
|
+
var DarkThemeContext = require('./provider/DarkThemeContext.js');
|
|
25
26
|
|
|
26
27
|
|
|
27
28
|
|
|
@@ -75,3 +76,5 @@ exports.textColor = definitions.textColor;
|
|
|
75
76
|
exports.zIndex = definitions.zIndex;
|
|
76
77
|
exports.setDarkMode = index$1.setDarkMode;
|
|
77
78
|
exports.updateThemeColors = index$1.updateThemeColors;
|
|
79
|
+
exports.ThemeProvider = DarkThemeContext.ThemeProvider;
|
|
80
|
+
exports.useDarkTheme = DarkThemeContext.useDarkTheme;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
|
|
6
|
+
const ThemeContext = react.createContext(null);
|
|
7
|
+
const ThemeProvider = ({ children }) => {
|
|
8
|
+
const [theme, setTheme] = react.useState("light");
|
|
9
|
+
react.useEffect(() => {
|
|
10
|
+
const style = document.documentElement.style;
|
|
11
|
+
if (theme === "dark") {
|
|
12
|
+
style.setProperty("--color-body", "#1e1e1e");
|
|
13
|
+
style.setProperty("--color-text-default", "#fff");
|
|
14
|
+
style.setProperty("--color-surface-base", "#1e1e1e");
|
|
15
|
+
style.setProperty("--color-surface-raised", "#252526");
|
|
16
|
+
style.setProperty("--color-surface-overlay", "#2d2d30");
|
|
17
|
+
} else {
|
|
18
|
+
style.setProperty("--color-body", "#f8f7f7");
|
|
19
|
+
style.setProperty("--color-text-default", "#000");
|
|
20
|
+
style.setProperty("--color-surface-base", "#f8f7f7");
|
|
21
|
+
style.setProperty("--color-surface-raised", "#fbfbfb");
|
|
22
|
+
style.setProperty("--color-surface-overlay", "#ffffff");
|
|
23
|
+
}
|
|
24
|
+
}, [theme]);
|
|
25
|
+
const toggleTheme = () => setTheme((t) => t === "light" ? "dark" : "light");
|
|
26
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
|
|
27
|
+
};
|
|
28
|
+
const useDarkTheme = () => {
|
|
29
|
+
const ctx = react.useContext(ThemeContext);
|
|
30
|
+
if (!ctx) throw new Error("useTheme must be used inside ThemeProvider");
|
|
31
|
+
return ctx;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
exports.ThemeProvider = ThemeProvider;
|
|
35
|
+
exports.useDarkTheme = useDarkTheme;
|
|
@@ -36,6 +36,11 @@ const colors = {
|
|
|
36
36
|
dark: "#cc9f00",
|
|
37
37
|
xdark: "#665000"
|
|
38
38
|
},
|
|
39
|
+
surface: {
|
|
40
|
+
base: "var(--color-surface-base, #f8f7f7)",
|
|
41
|
+
raised: "var(--color-surface-raised, #fbfbfb)",
|
|
42
|
+
overlay: "var(--color-surface-overlay, #ffffff)"
|
|
43
|
+
},
|
|
39
44
|
error: {
|
|
40
45
|
xlight: "#fdf3f2",
|
|
41
46
|
light: "#ee9891",
|
|
@@ -153,6 +158,7 @@ const fontFamily = {
|
|
|
153
158
|
mono: "Consolas, monaco, monospace"
|
|
154
159
|
};
|
|
155
160
|
const textColor = {
|
|
161
|
+
default: "var(--color-text-default, #000)",
|
|
156
162
|
light: "#fff",
|
|
157
163
|
medium: "#85807a",
|
|
158
164
|
dark: "#353231",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { tv } from 'tailwind-variants';
|
|
2
2
|
|
|
3
3
|
const drawerStyles = tv({
|
|
4
|
-
base: "bg-
|
|
4
|
+
base: "bg-surface-overlay fixed top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll",
|
|
5
5
|
variants: {
|
|
6
6
|
position: {
|
|
7
7
|
left: "left-0 -translate-x-full rounded-r-mili",
|
|
@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
|
|
|
2
2
|
import { tv } from 'tailwind-variants';
|
|
3
3
|
|
|
4
4
|
const inputBaseStyles = tv({
|
|
5
|
-
base: "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-
|
|
5
|
+
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",
|
|
6
6
|
variants: {
|
|
7
7
|
intent: {
|
|
8
8
|
default: [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { tv } from 'tailwind-variants';
|
|
2
2
|
|
|
3
3
|
const manager = tv({
|
|
4
|
-
base: "fixed rounded-micro p-deca bg-
|
|
4
|
+
base: "fixed rounded-micro p-deca bg-surface-overlay shadow-xl flex transition bottom-deca right-deca z-modal",
|
|
5
5
|
variants: {
|
|
6
6
|
open: {
|
|
7
7
|
true: "scale-100 visible",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { tv } from 'tailwind-variants';
|
|
2
2
|
|
|
3
3
|
const modal = tv({
|
|
4
|
-
base: "fixed rounded-micro p-kilo bg-
|
|
4
|
+
base: "fixed rounded-micro p-kilo bg-surface-overlay shadow-default flex transition inset-0 z-modal",
|
|
5
5
|
variants: {
|
|
6
6
|
open: {
|
|
7
7
|
true: "scale-100 visible",
|
|
@@ -13,7 +13,7 @@ const option = tv({
|
|
|
13
13
|
});
|
|
14
14
|
const selectVariants = tv({
|
|
15
15
|
slots: {
|
|
16
|
-
button: "disabled:pointer-events-none disabled:text-secondary-light flex w-full justify-between items-center bg-
|
|
16
|
+
button: "disabled:pointer-events-none disabled:text-secondary-light 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-secondary-light rounded-mili",
|
|
17
17
|
groupedTitle: "font-bold text-secondary-medium mx-centi",
|
|
18
18
|
list: "list-none p-0"
|
|
19
19
|
},
|
|
@@ -16,10 +16,10 @@ const tFoot = tv({
|
|
|
16
16
|
base: "[&>tr]:rounded-none [&>tr]:shadow-none"
|
|
17
17
|
});
|
|
18
18
|
const tRoot = tv({
|
|
19
|
-
base: "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-
|
|
19
|
+
base: "min-w-fit border-separate border-spacing-x-[22px] border-spacing-y-mili rounded-mili bg-surface-overlay shadow-default"
|
|
20
20
|
});
|
|
21
21
|
const hr = tv({
|
|
22
|
-
base: "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-
|
|
22
|
+
base: "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-surface-base"
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
export { hr, tCell, tFoot, tHead, tHeadCell, tRoot, tRow };
|
|
@@ -19,7 +19,7 @@ const tagStyles = myTV({
|
|
|
19
19
|
success: "bg-success-medium text-white",
|
|
20
20
|
warning: "bg-warning-medium text-white",
|
|
21
21
|
error: "bg-error-medium text-white",
|
|
22
|
-
white: "bg-
|
|
22
|
+
white: "bg-surface-overlay text-secondary-medium"
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
defaultVariants: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { tv } from 'tailwind-variants';
|
|
2
2
|
|
|
3
3
|
const toggleStyles = tv({
|
|
4
|
-
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-
|
|
4
|
+
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-surface-overlay after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none",
|
|
5
5
|
variants: {
|
|
6
6
|
intent: {
|
|
7
7
|
primary: "peer-focus:primary-medium peer-checked:bg-primary-medium",
|
package/dist/esm/index.js
CHANGED
|
@@ -20,3 +20,4 @@ export { manager } from './components/manager/manager.js';
|
|
|
20
20
|
export { default as preset } from './preset/index.js';
|
|
21
21
|
export { borderColor, borderRadius, borderWidth, boxShadow, colors, fontFamily, fontSize, spacing, textColor, zIndex } from './tokens/definitions.js';
|
|
22
22
|
export { setDarkMode, updateThemeColors } from './utils/index.js';
|
|
23
|
+
export { ThemeProvider, useDarkTheme } from './provider/DarkThemeContext.js';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { createContext, useState, useEffect, useContext } from 'react';
|
|
3
|
+
|
|
4
|
+
const ThemeContext = createContext(null);
|
|
5
|
+
const ThemeProvider = ({ children }) => {
|
|
6
|
+
const [theme, setTheme] = useState("light");
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const style = document.documentElement.style;
|
|
9
|
+
if (theme === "dark") {
|
|
10
|
+
style.setProperty("--color-body", "#1e1e1e");
|
|
11
|
+
style.setProperty("--color-text-default", "#fff");
|
|
12
|
+
style.setProperty("--color-surface-base", "#1e1e1e");
|
|
13
|
+
style.setProperty("--color-surface-raised", "#252526");
|
|
14
|
+
style.setProperty("--color-surface-overlay", "#2d2d30");
|
|
15
|
+
} else {
|
|
16
|
+
style.setProperty("--color-body", "#f8f7f7");
|
|
17
|
+
style.setProperty("--color-text-default", "#000");
|
|
18
|
+
style.setProperty("--color-surface-base", "#f8f7f7");
|
|
19
|
+
style.setProperty("--color-surface-raised", "#fbfbfb");
|
|
20
|
+
style.setProperty("--color-surface-overlay", "#ffffff");
|
|
21
|
+
}
|
|
22
|
+
}, [theme]);
|
|
23
|
+
const toggleTheme = () => setTheme((t) => t === "light" ? "dark" : "light");
|
|
24
|
+
return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
|
|
25
|
+
};
|
|
26
|
+
const useDarkTheme = () => {
|
|
27
|
+
const ctx = useContext(ThemeContext);
|
|
28
|
+
if (!ctx) throw new Error("useTheme must be used inside ThemeProvider");
|
|
29
|
+
return ctx;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export { ThemeProvider, useDarkTheme };
|
|
@@ -34,6 +34,11 @@ const colors = {
|
|
|
34
34
|
dark: "#cc9f00",
|
|
35
35
|
xdark: "#665000"
|
|
36
36
|
},
|
|
37
|
+
surface: {
|
|
38
|
+
base: "var(--color-surface-base, #f8f7f7)",
|
|
39
|
+
raised: "var(--color-surface-raised, #fbfbfb)",
|
|
40
|
+
overlay: "var(--color-surface-overlay, #ffffff)"
|
|
41
|
+
},
|
|
37
42
|
error: {
|
|
38
43
|
xlight: "#fdf3f2",
|
|
39
44
|
light: "#ee9891",
|
|
@@ -151,6 +156,7 @@ const fontFamily = {
|
|
|
151
156
|
mono: "Consolas, monaco, monospace"
|
|
152
157
|
};
|
|
153
158
|
const textColor = {
|
|
159
|
+
default: "var(--color-text-default, #000)",
|
|
154
160
|
light: "#fff",
|
|
155
161
|
medium: "#85807a",
|
|
156
162
|
dark: "#353231",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const card: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "rounded-mili shadow-default bg-
|
|
1
|
+
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>>;
|
|
@@ -8,7 +8,7 @@ declare const drawerStyles: import("tailwind-variants").TVReturnType<{
|
|
|
8
8
|
true: string;
|
|
9
9
|
false: string;
|
|
10
10
|
};
|
|
11
|
-
}, undefined, "bg-
|
|
11
|
+
}, undefined, "bg-surface-overlay fixed top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll", {
|
|
12
12
|
position: {
|
|
13
13
|
left: string;
|
|
14
14
|
right: string;
|
|
@@ -26,7 +26,7 @@ declare const drawerStyles: import("tailwind-variants").TVReturnType<{
|
|
|
26
26
|
true: string;
|
|
27
27
|
false: string;
|
|
28
28
|
};
|
|
29
|
-
}, undefined, "bg-
|
|
29
|
+
}, undefined, "bg-surface-overlay fixed top-0 h-full p-deca shadow-lg transition-all duration-500 transform overflow-y-scroll", unknown, unknown, undefined>>;
|
|
30
30
|
export type DrawerVariants = VariantProps<typeof drawerStyles> & ClassProp;
|
|
31
31
|
export declare const drawer: (props: DrawerVariants) => string;
|
|
32
32
|
export {};
|
|
@@ -6,7 +6,7 @@ export declare const inputBaseStyles: import("tailwind-variants").TVReturnType<{
|
|
|
6
6
|
warning: string[];
|
|
7
7
|
error: string[];
|
|
8
8
|
};
|
|
9
|
-
}, undefined, "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-
|
|
9
|
+
}, 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", {
|
|
10
10
|
intent: {
|
|
11
11
|
default: string[];
|
|
12
12
|
success: string[];
|
|
@@ -20,7 +20,7 @@ export declare const inputBaseStyles: import("tailwind-variants").TVReturnType<{
|
|
|
20
20
|
warning: string[];
|
|
21
21
|
error: string[];
|
|
22
22
|
};
|
|
23
|
-
}, undefined, "relative min-h-[44px] h-auto flex px-centi py-1.5 bg-
|
|
23
|
+
}, 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", unknown, unknown, undefined>>;
|
|
24
24
|
declare const labelBaseStyles: import("tailwind-variants").TVReturnType<{
|
|
25
25
|
intent: {
|
|
26
26
|
default: string[];
|
|
@@ -3,7 +3,7 @@ export declare const manager: import("tailwind-variants").TVReturnType<{
|
|
|
3
3
|
true: string;
|
|
4
4
|
false: string;
|
|
5
5
|
};
|
|
6
|
-
}, undefined, "fixed rounded-micro p-deca bg-
|
|
6
|
+
}, undefined, "fixed rounded-micro p-deca bg-surface-overlay shadow-xl flex transition bottom-deca right-deca z-modal", {
|
|
7
7
|
open: {
|
|
8
8
|
true: string;
|
|
9
9
|
false: string;
|
|
@@ -13,4 +13,4 @@ export declare const manager: import("tailwind-variants").TVReturnType<{
|
|
|
13
13
|
true: string;
|
|
14
14
|
false: string;
|
|
15
15
|
};
|
|
16
|
-
}, undefined, "fixed rounded-micro p-deca bg-
|
|
16
|
+
}, undefined, "fixed rounded-micro p-deca bg-surface-overlay shadow-xl flex transition bottom-deca right-deca z-modal", unknown, unknown, undefined>>;
|
|
@@ -3,7 +3,7 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
|
|
|
3
3
|
true: string;
|
|
4
4
|
false: string;
|
|
5
5
|
};
|
|
6
|
-
}, undefined, "fixed rounded-micro p-kilo bg-
|
|
6
|
+
}, undefined, "fixed rounded-micro p-kilo bg-surface-overlay shadow-default flex transition inset-0 z-modal", {
|
|
7
7
|
open: {
|
|
8
8
|
true: string;
|
|
9
9
|
false: string;
|
|
@@ -13,4 +13,4 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
|
|
|
13
13
|
true: string;
|
|
14
14
|
false: string;
|
|
15
15
|
};
|
|
16
|
-
}, undefined, "fixed rounded-micro p-kilo bg-
|
|
16
|
+
}, undefined, "fixed rounded-micro p-kilo bg-surface-overlay shadow-default flex transition inset-0 z-modal", unknown, unknown, undefined>>;
|
|
@@ -3,5 +3,5 @@ export declare const tRow: import("tailwind-variants").TVReturnType<{} | {} | {}
|
|
|
3
3
|
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>>;
|
|
4
4
|
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>>;
|
|
5
5
|
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>>;
|
|
6
|
-
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-
|
|
7
|
-
export declare const hr: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "-mx-[24px] -mb-[4px] -mt-[50px] h-[42px] border-0 bg-
|
|
6
|
+
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>>;
|
|
7
|
+
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>>;
|
|
@@ -8,7 +8,7 @@ declare const toggleStyles: import("tailwind-variants").TVReturnType<{
|
|
|
8
8
|
warning: string;
|
|
9
9
|
error: string;
|
|
10
10
|
};
|
|
11
|
-
}, 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-
|
|
11
|
+
}, 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-surface-overlay after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none", {
|
|
12
12
|
intent: {
|
|
13
13
|
primary: string;
|
|
14
14
|
secondary: string;
|
|
@@ -26,7 +26,7 @@ declare const toggleStyles: import("tailwind-variants").TVReturnType<{
|
|
|
26
26
|
warning: string;
|
|
27
27
|
error: string;
|
|
28
28
|
};
|
|
29
|
-
}, 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-
|
|
29
|
+
}, 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-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>>;
|
|
30
30
|
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>>;
|
|
31
31
|
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>>;
|
|
32
32
|
type ToggleVariants = VariantProps<typeof toggleStyles> & ClassProp;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -41,6 +41,11 @@ declare const preset: {
|
|
|
41
41
|
dark: string;
|
|
42
42
|
xdark: string;
|
|
43
43
|
};
|
|
44
|
+
surface: {
|
|
45
|
+
base: string;
|
|
46
|
+
raised: string;
|
|
47
|
+
overlay: string;
|
|
48
|
+
};
|
|
44
49
|
error: {
|
|
45
50
|
xlight: string;
|
|
46
51
|
light: string;
|
|
@@ -53,6 +58,7 @@ declare const preset: {
|
|
|
53
58
|
};
|
|
54
59
|
};
|
|
55
60
|
textColor: {
|
|
61
|
+
default: string;
|
|
56
62
|
light: string;
|
|
57
63
|
medium: string;
|
|
58
64
|
dark: string;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
type Theme = 'light' | 'dark';
|
|
3
|
+
interface ThemeContextValue {
|
|
4
|
+
theme: Theme;
|
|
5
|
+
setTheme: (theme: Theme) => void;
|
|
6
|
+
toggleTheme: () => void;
|
|
7
|
+
}
|
|
8
|
+
export declare const ThemeProvider: ({ children }: {
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const useDarkTheme: () => ThemeContextValue;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DarkThemeContext';
|
|
@@ -34,6 +34,11 @@ declare const colors: {
|
|
|
34
34
|
dark: string;
|
|
35
35
|
xdark: string;
|
|
36
36
|
};
|
|
37
|
+
surface: {
|
|
38
|
+
base: string;
|
|
39
|
+
raised: string;
|
|
40
|
+
overlay: string;
|
|
41
|
+
};
|
|
37
42
|
error: {
|
|
38
43
|
xlight: string;
|
|
39
44
|
light: string;
|
|
@@ -97,6 +102,7 @@ declare const fontFamily: {
|
|
|
97
102
|
mono: string;
|
|
98
103
|
};
|
|
99
104
|
declare const textColor: {
|
|
105
|
+
default: string;
|
|
100
106
|
light: string;
|
|
101
107
|
medium: string;
|
|
102
108
|
dark: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/cortex-core",
|
|
3
|
-
"version": "1.3.0-beta.
|
|
3
|
+
"version": "1.3.0-beta.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Core library for tailwindcss based design",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -31,5 +31,5 @@
|
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"tailwindcss": ">=3.3.0"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "5365cc6cb2202caec12950731aff22afcc24ccbb"
|
|
35
35
|
}
|