@xanui/core 1.2.2 → 1.2.4
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/Tag/useTagProps.d.ts +1 -1
- package/Tag/useTagProps.js +6 -5
- package/Tag/useTagProps.js.map +1 -1
- package/Tag/useTagProps.mjs +6 -5
- package/Tag/useTagProps.mjs.map +1 -1
- package/breakpoint/BreakpointProvider.js +2 -3
- package/breakpoint/BreakpointProvider.js.map +1 -1
- package/breakpoint/BreakpointProvider.mjs +2 -3
- package/breakpoint/BreakpointProvider.mjs.map +1 -1
- package/breakpoint/useBreakpoint.js +2 -2
- package/breakpoint/useBreakpoint.js.map +1 -1
- package/breakpoint/useBreakpoint.mjs +2 -2
- package/breakpoint/useBreakpoint.mjs.map +1 -1
- package/css/getValue.js +5 -3
- package/css/getValue.js.map +1 -1
- package/css/getValue.mjs +5 -3
- package/css/getValue.mjs.map +1 -1
- package/hooks/useColorTemplate.d.ts +35 -4
- package/hooks/useColorTemplate.js +39 -4
- package/hooks/useColorTemplate.js.map +1 -1
- package/hooks/useColorTemplate.mjs +39 -4
- package/hooks/useColorTemplate.mjs.map +1 -1
- package/hooks/useInterface.d.ts +1 -1
- package/hooks/useInterface.js +1 -1
- package/hooks/useInterface.mjs +1 -1
- package/hooks/usePortal.js +1 -1
- package/hooks/usePortal.js.map +1 -1
- package/hooks/usePortal.mjs +1 -1
- package/hooks/useScrollbar.js +3 -3
- package/hooks/useScrollbar.js.map +1 -1
- package/hooks/useScrollbar.mjs +3 -3
- package/hooks/useScrollbar.mjs.map +1 -1
- package/index.d.ts +1 -3
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/package.json +2 -2
- package/theme/ThemeCssVars.js +1 -1
- package/theme/ThemeCssVars.js.map +1 -1
- package/theme/ThemeCssVars.mjs +1 -1
- package/theme/ThemeCssVars.mjs.map +1 -1
- package/theme/ThemeDefaultOptions.js +70 -26
- package/theme/ThemeDefaultOptions.js.map +1 -1
- package/theme/ThemeDefaultOptions.mjs +70 -26
- package/theme/ThemeDefaultOptions.mjs.map +1 -1
- package/theme/ThemeProvider.js +2 -3
- package/theme/ThemeProvider.js.map +1 -1
- package/theme/ThemeProvider.mjs +2 -3
- package/theme/ThemeProvider.mjs.map +1 -1
- package/theme/createTheme.js +2 -13
- package/theme/createTheme.js.map +1 -1
- package/theme/createTheme.mjs +2 -13
- package/theme/createTheme.mjs.map +1 -1
- package/theme/createThemeSwitcher.d.ts +3 -2
- package/theme/createThemeSwitcher.js +2 -2
- package/theme/createThemeSwitcher.js.map +1 -1
- package/theme/createThemeSwitcher.mjs +3 -3
- package/theme/createThemeSwitcher.mjs.map +1 -1
- package/theme/index.js +1 -1
- package/theme/index.mjs +1 -1
- package/theme/types.d.ts +9 -46
- package/RenderServerStyles.d.ts +0 -5
- package/RenderServerStyles.js +0 -3
- package/RenderServerStyles.js.map +0 -1
- package/RenderServerStyles.mjs +0 -3
- package/RenderServerStyles.mjs.map +0 -1
- package/isWindow.d.ts +0 -3
- package/isWindow.js +0 -1
- package/isWindow.js.map +0 -1
- package/isWindow.mjs +0 -1
- package/isWindow.mjs.map +0 -1
- package/theme/createColor.js +0 -46
- package/theme/createColor.js.map +0 -1
- package/theme/createColor.mjs +0 -46
- package/theme/createColor.mjs.map +0 -1
|
@@ -53,59 +53,103 @@ const darkShadows = [
|
|
|
53
53
|
"0px 11px 15px -7px rgba(255,255,255,0.05),0px 24px 38px 3px rgba(255,255,255,0.04),0px 9px 46px 8px rgba(255,255,255,0.03)",
|
|
54
54
|
];
|
|
55
55
|
const lightColorPallete = {
|
|
56
|
-
|
|
57
|
-
primary: "#1F2937", // slate-800
|
|
58
|
-
secondary: "#6B7280", // slate-500
|
|
59
|
-
},
|
|
60
|
-
background: {
|
|
56
|
+
common: {
|
|
61
57
|
primary: "#FFFFFF",
|
|
62
|
-
secondary: "#F4F6FB",
|
|
58
|
+
secondary: "#F4F6FB",
|
|
59
|
+
divider: "#E5E7EB",
|
|
60
|
+
alpha: "#F9FAFB",
|
|
61
|
+
text: {
|
|
62
|
+
primary: "#1F2937", // slate-800
|
|
63
|
+
secondary: "#6B7280", // slate-500
|
|
64
|
+
},
|
|
63
65
|
},
|
|
64
66
|
surface: {
|
|
65
67
|
primary: "#FFFFFF", // cards, dialogs
|
|
66
|
-
secondary: "#F9FAFB", // subtle sections
|
|
68
|
+
secondary: "#F9FAFB", // subtle sections,
|
|
69
|
+
divider: "#E5E7EB",
|
|
70
|
+
alpha: "#F4F6FB",
|
|
71
|
+
text: {
|
|
72
|
+
primary: "#1F2937", // slate-800
|
|
73
|
+
secondary: "#6B7280", // slate-500
|
|
74
|
+
},
|
|
67
75
|
},
|
|
68
|
-
divider: "#E5E7EB" // neutral-200
|
|
69
76
|
};
|
|
70
77
|
const darkColorPallete = {
|
|
71
|
-
|
|
72
|
-
primary: "#
|
|
73
|
-
secondary: "#
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
+
common: {
|
|
79
|
+
primary: "#0F172A",
|
|
80
|
+
secondary: "#111827",
|
|
81
|
+
divider: "#374151",
|
|
82
|
+
alpha: "#1F2937",
|
|
83
|
+
text: {
|
|
84
|
+
primary: "#F9FAFB",
|
|
85
|
+
secondary: "#9CA3AF",
|
|
86
|
+
},
|
|
78
87
|
},
|
|
79
88
|
surface: {
|
|
80
89
|
primary: "#1F2937", // cards & modals
|
|
81
90
|
secondary: "#273449", // nested surfaces
|
|
91
|
+
divider: "#4B5563",
|
|
92
|
+
alpha: "#111827",
|
|
93
|
+
text: {
|
|
94
|
+
primary: "#F9FAFB", // near-white
|
|
95
|
+
secondary: "#9CA3AF", // slate-400
|
|
96
|
+
},
|
|
82
97
|
},
|
|
83
|
-
divider: "#1F2937" // slate-700
|
|
84
98
|
};
|
|
85
99
|
const ThemeColors = Object.assign(Object.assign({}, lightColorPallete), { brand: {
|
|
86
100
|
primary: "#2563EB", // blue-600
|
|
87
101
|
secondary: "#3B82F6", // blue-500
|
|
88
|
-
|
|
102
|
+
divider: "#E5E7EB", // neutral-200
|
|
103
|
+
alpha: "#EFF6FF", // blue-50
|
|
104
|
+
text: {
|
|
105
|
+
primary: "#FFFFFF",
|
|
106
|
+
secondary: "#DBEAFE",
|
|
107
|
+
}
|
|
89
108
|
}, accent: {
|
|
90
109
|
primary: "#0D9488", // teal-600
|
|
91
110
|
secondary: "#14B8A6", // teal-500
|
|
92
|
-
|
|
111
|
+
divider: "#E5E7EB", // neutral-200
|
|
112
|
+
alpha: "#F0FDFA", // teal-50
|
|
113
|
+
text: {
|
|
114
|
+
primary: "#FFFFFF",
|
|
115
|
+
secondary: "#E0F2F1",
|
|
116
|
+
}
|
|
93
117
|
}, info: {
|
|
94
118
|
primary: "#0284C7", // sky-600
|
|
95
119
|
secondary: "#38BDF8", // sky-400
|
|
96
|
-
|
|
120
|
+
divider: "#E5E7EB", // neutral-200
|
|
121
|
+
alpha: "#EFF6FF", // sky-50
|
|
122
|
+
text: {
|
|
123
|
+
primary: "#FFFFFF",
|
|
124
|
+
secondary: "#E0F2FE",
|
|
125
|
+
}
|
|
97
126
|
}, success: {
|
|
98
127
|
primary: "#16A34A", // green-600
|
|
99
128
|
secondary: "#4ADE80", // green-400
|
|
100
|
-
|
|
129
|
+
divider: "#E5E7EB", // neutral-200
|
|
130
|
+
alpha: "#ECFDF5", // green-50
|
|
131
|
+
text: {
|
|
132
|
+
primary: "#FFFFFF",
|
|
133
|
+
secondary: "#D1FAE5",
|
|
134
|
+
},
|
|
101
135
|
}, warning: {
|
|
102
|
-
primary: "#D97706",
|
|
103
|
-
secondary: "#FBBF24",
|
|
104
|
-
|
|
136
|
+
primary: "#D97706",
|
|
137
|
+
secondary: "#FBBF24",
|
|
138
|
+
divider: "#E5E7EB",
|
|
139
|
+
alpha: "#FFFBEB",
|
|
140
|
+
text: {
|
|
141
|
+
primary: "#000000",
|
|
142
|
+
secondary: "#78350F",
|
|
143
|
+
},
|
|
105
144
|
}, danger: {
|
|
106
|
-
primary: "#DC2626",
|
|
107
|
-
secondary: "#F87171",
|
|
108
|
-
|
|
145
|
+
primary: "#DC2626",
|
|
146
|
+
secondary: "#F87171",
|
|
147
|
+
divider: "#E5E7EB",
|
|
148
|
+
alpha: "#FEF2F2",
|
|
149
|
+
text: {
|
|
150
|
+
primary: "#FFFFFF",
|
|
151
|
+
secondary: "#FECACA",
|
|
152
|
+
}
|
|
109
153
|
} });
|
|
110
154
|
const ThemeTypography = {
|
|
111
155
|
h1: { fontSize: 48, lineHeight: 1.3, fontWeight: 600 }, // bolder for emphasis
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeDefaultOptions.mjs","sources":["../../src/theme/ThemeDefaultOptions.ts"],"sourcesContent":["import { ThemeOptionInput, ThemeTypographyType } from './types'\r\n\r\nexport const lightShadows = [\r\n \"none\",\r\n \"0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)\",\r\n \"0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)\",\r\n \"0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)\",\r\n \"0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)\",\r\n \"0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)\",\r\n \"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)\",\r\n \"0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)\",\r\n \"0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)\",\r\n \"0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)\",\r\n \"0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)\",\r\n \"0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)\",\r\n \"0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)\",\r\n \"0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)\",\r\n \"0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)\",\r\n \"0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)\",\r\n \"0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)\",\r\n \"0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)\",\r\n \"0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)\",\r\n \"0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)\",\r\n \"0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)\",\r\n \"0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)\",\r\n \"0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)\",\r\n \"0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)\",\r\n \"0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)\",\r\n]\r\n\r\nexport const darkShadows = [\r\n \"none\",\r\n \"0px 2px 1px -1px rgba(255,255,255,0.05),0px 1px 1px 0px rgba(255,255,255,0.04),0px 1px 3px 0px rgba(255,255,255,0.03)\",\r\n \"0px 3px 1px -2px rgba(255,255,255,0.05),0px 2px 2px 0px rgba(255,255,255,0.04),0px 1px 5px 0px rgba(255,255,255,0.03)\",\r\n \"0px 3px 3px -2px rgba(255,255,255,0.05),0px 3px 4px 0px rgba(255,255,255,0.04),0px 1px 8px 0px rgba(255,255,255,0.03)\",\r\n \"0px 2px 4px -1px rgba(255,255,255,0.05),0px 4px 5px 0px rgba(255,255,255,0.04),0px 1px 10px 0px rgba(255,255,255,0.03)\",\r\n \"0px 3px 5px -1px rgba(255,255,255,0.05),0px 5px 8px 0px rgba(255,255,255,0.04),0px 1px 14px 0px rgba(255,255,255,0.03)\",\r\n \"0px 3px 5px -1px rgba(255,255,255,0.05),0px 6px 10px 0px rgba(255,255,255,0.04),0px 1px 18px 0px rgba(255,255,255,0.03)\",\r\n \"0px 4px 5px -2px rgba(255,255,255,0.05),0px 7px 10px 1px rgba(255,255,255,0.04),0px 2px 16px 1px rgba(255,255,255,0.03)\",\r\n \"0px 5px 5px -3px rgba(255,255,255,0.05),0px 8px 10px 1px rgba(255,255,255,0.04),0px 3px 14px 2px rgba(255,255,255,0.03)\",\r\n \"0px 5px 6px -3px rgba(255,255,255,0.05),0px 9px 12px 1px rgba(255,255,255,0.04),0px 3px 16px 2px rgba(255,255,255,0.03)\",\r\n \"0px 6px 6px -3px rgba(255,255,255,0.05),0px 10px 14px 1px rgba(255,255,255,0.04),0px 4px 18px 3px rgba(255,255,255,0.03)\",\r\n \"0px 6px 7px -4px rgba(255,255,255,0.05),0px 11px 15px 1px rgba(255,255,255,0.04),0px 4px 20px 3px rgba(255,255,255,0.03)\",\r\n \"0px 7px 8px -4px rgba(255,255,255,0.05),0px 12px 17px 2px rgba(255,255,255,0.04),0px 5px 22px 4px rgba(255,255,255,0.03)\",\r\n \"0px 7px 8px -4px rgba(255,255,255,0.05),0px 13px 19px 2px rgba(255,255,255,0.04),0px 5px 24px 4px rgba(255,255,255,0.03)\",\r\n \"0px 7px 9px -4px rgba(255,255,255,0.05),0px 14px 21px 2px rgba(255,255,255,0.04),0px 5px 26px 4px rgba(255,255,255,0.03)\",\r\n \"0px 8px 9px -5px rgba(255,255,255,0.05),0px 15px 22px 2px rgba(255,255,255,0.04),0px 6px 28px 5px rgba(255,255,255,0.03)\",\r\n \"0px 8px 10px -5px rgba(255,255,255,0.05),0px 16px 24px 2px rgba(255,255,255,0.04),0px 6px 30px 5px rgba(255,255,255,0.03)\",\r\n \"0px 8px 11px -5px rgba(255,255,255,0.05),0px 17px 26px 2px rgba(255,255,255,0.04),0px 6px 32px 5px rgba(255,255,255,0.03)\",\r\n \"0px 9px 11px -5px rgba(255,255,255,0.05),0px 18px 28px 2px rgba(255,255,255,0.04),0px 7px 34px 6px rgba(255,255,255,0.03)\",\r\n \"0px 9px 12px -6px rgba(255,255,255,0.05),0px 19px 29px 2px rgba(255,255,255,0.04),0px 7px 36px 6px rgba(255,255,255,0.03)\",\r\n \"0px 10px 13px -6px rgba(255,255,255,0.05),0px 20px 31px 3px rgba(255,255,255,0.04),0px 8px 38px 7px rgba(255,255,255,0.03)\",\r\n \"0px 10px 13px -6px rgba(255,255,255,0.05),0px 21px 33px 3px rgba(255,255,255,0.04),0px 8px 40px 7px rgba(255,255,255,0.03)\",\r\n \"0px 10px 14px -6px rgba(255,255,255,0.05),0px 22px 35px 3px rgba(255,255,255,0.04),0px 8px 42px 7px rgba(255,255,255,0.03)\",\r\n \"0px 11px 14px -7px rgba(255,255,255,0.05),0px 23px 36px 3px rgba(255,255,255,0.04),0px 9px 44px 8px rgba(255,255,255,0.03)\",\r\n \"0px 11px 15px -7px rgba(255,255,255,0.05),0px 24px 38px 3px rgba(255,255,255,0.04),0px 9px 46px 8px rgba(255,255,255,0.03)\",\r\n]\r\n\r\n\r\nexport const lightColorPallete = {\r\n text: {\r\n primary: \"#1F2937\", // slate-800\r\n secondary: \"#6B7280\", // slate-500\r\n },\r\n background: {\r\n primary: \"#FFFFFF\",\r\n secondary: \"#F4F6FB\", // softer than #EDEFF7\r\n },\r\n surface: {\r\n primary: \"#FFFFFF\", // cards, dialogs\r\n secondary: \"#F9FAFB\", // subtle sections\r\n },\r\n\r\n divider: \"#E5E7EB\" // neutral-200\r\n}\r\n\r\n\r\nexport const darkColorPallete = {\r\n text: {\r\n primary: \"#F9FAFB\", // near-white\r\n secondary: \"#9CA3AF\", // slate-400\r\n },\r\n background: {\r\n primary: \"#0F172A\", // slate-900\r\n secondary: \"#111827\", // slate-800\r\n },\r\n surface: {\r\n primary: \"#1F2937\", // cards & modals\r\n secondary: \"#273449\", // nested surfaces\r\n },\r\n divider: \"#1F2937\" // slate-700\r\n}\r\n\r\nexport const ThemeColors = {\r\n ...lightColorPallete,\r\n\r\n brand: {\r\n primary: \"#2563EB\", // blue-600\r\n secondary: \"#3B82F6\", // blue-500\r\n text: \"#FFFFFF\",\r\n },\r\n\r\n accent: {\r\n primary: \"#0D9488\", // teal-600\r\n secondary: \"#14B8A6\", // teal-500\r\n text: \"#FFFFFF\",\r\n },\r\n\r\n info: {\r\n primary: \"#0284C7\", // sky-600\r\n secondary: \"#38BDF8\", // sky-400\r\n text: \"#FFFFFF\",\r\n },\r\n\r\n success: {\r\n primary: \"#16A34A\", // green-600\r\n secondary: \"#4ADE80\", // green-400\r\n text: \"#FFFFFF\",\r\n },\r\n\r\n warning: {\r\n primary: \"#D97706\", // amber-600\r\n secondary: \"#FBBF24\", // amber-400\r\n text: \"#1F2937\", // dark text reads better on yellow\r\n },\r\n\r\n danger: {\r\n primary: \"#DC2626\", // red-600\r\n secondary: \"#F87171\", // red-400\r\n text: \"#FFFFFF\",\r\n },\r\n}\r\n\r\nexport const ThemeTypography: ThemeTypographyType = {\r\n h1: { fontSize: 48, lineHeight: 1.3, fontWeight: 600 }, // bolder for emphasis\r\n h2: { fontSize: 40, lineHeight: 1.35, fontWeight: 500 },\r\n h3: { fontSize: 34, lineHeight: 1.4, fontWeight: 500 },\r\n h4: { fontSize: 28, lineHeight: 1.45, fontWeight: 500 },\r\n h5: { fontSize: 24, lineHeight: 1.5, fontWeight: 500 },\r\n h6: { fontSize: 20, lineHeight: 1.55, fontWeight: 500 },\r\n big: { fontSize: 18, lineHeight: 1.6, fontWeight: 400 },\r\n text: { fontSize: 16, lineHeight: 1.6, fontWeight: 400 },\r\n button: { fontSize: 14, lineHeight: 1.6, fontWeight: 500 },\r\n small: { fontSize: 12, lineHeight: 1.6, fontWeight: 400 },\r\n}\r\n\r\n\r\nexport const darkThemeOptions: ThemeOptionInput = {\r\n name: \"dark\",\r\n rtl: false,\r\n shadow: darkShadows,\r\n globalStyle: {},\r\n colors: darkColorPallete,\r\n typography: ThemeTypography,\r\n interfaces: {}\r\n} as ThemeOptionInput\r\n\r\nexport const lightThemeOptions: ThemeOptionInput = {\r\n name: \"light\",\r\n rtl: false,\r\n shadow: lightShadows,\r\n globalStyle: {},\r\n colors: ThemeColors,\r\n typography: ThemeTypography,\r\n interfaces: {}\r\n} as ThemeOptionInput\r\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ThemeDefaultOptions.mjs","sources":["../../src/theme/ThemeDefaultOptions.ts"],"sourcesContent":["import { ThemeOptionInput, ThemeTypographyType } from './types'\r\n\r\nexport const lightShadows = [\r\n \"none\",\r\n \"0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)\",\r\n \"0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)\",\r\n \"0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)\",\r\n \"0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)\",\r\n \"0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)\",\r\n \"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)\",\r\n \"0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)\",\r\n \"0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)\",\r\n \"0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)\",\r\n \"0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)\",\r\n \"0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)\",\r\n \"0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)\",\r\n \"0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)\",\r\n \"0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)\",\r\n \"0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)\",\r\n \"0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)\",\r\n \"0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)\",\r\n \"0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)\",\r\n \"0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)\",\r\n \"0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)\",\r\n \"0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)\",\r\n \"0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)\",\r\n \"0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)\",\r\n \"0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)\",\r\n]\r\n\r\nexport const darkShadows = [\r\n \"none\",\r\n \"0px 2px 1px -1px rgba(255,255,255,0.05),0px 1px 1px 0px rgba(255,255,255,0.04),0px 1px 3px 0px rgba(255,255,255,0.03)\",\r\n \"0px 3px 1px -2px rgba(255,255,255,0.05),0px 2px 2px 0px rgba(255,255,255,0.04),0px 1px 5px 0px rgba(255,255,255,0.03)\",\r\n \"0px 3px 3px -2px rgba(255,255,255,0.05),0px 3px 4px 0px rgba(255,255,255,0.04),0px 1px 8px 0px rgba(255,255,255,0.03)\",\r\n \"0px 2px 4px -1px rgba(255,255,255,0.05),0px 4px 5px 0px rgba(255,255,255,0.04),0px 1px 10px 0px rgba(255,255,255,0.03)\",\r\n \"0px 3px 5px -1px rgba(255,255,255,0.05),0px 5px 8px 0px rgba(255,255,255,0.04),0px 1px 14px 0px rgba(255,255,255,0.03)\",\r\n \"0px 3px 5px -1px rgba(255,255,255,0.05),0px 6px 10px 0px rgba(255,255,255,0.04),0px 1px 18px 0px rgba(255,255,255,0.03)\",\r\n \"0px 4px 5px -2px rgba(255,255,255,0.05),0px 7px 10px 1px rgba(255,255,255,0.04),0px 2px 16px 1px rgba(255,255,255,0.03)\",\r\n \"0px 5px 5px -3px rgba(255,255,255,0.05),0px 8px 10px 1px rgba(255,255,255,0.04),0px 3px 14px 2px rgba(255,255,255,0.03)\",\r\n \"0px 5px 6px -3px rgba(255,255,255,0.05),0px 9px 12px 1px rgba(255,255,255,0.04),0px 3px 16px 2px rgba(255,255,255,0.03)\",\r\n \"0px 6px 6px -3px rgba(255,255,255,0.05),0px 10px 14px 1px rgba(255,255,255,0.04),0px 4px 18px 3px rgba(255,255,255,0.03)\",\r\n \"0px 6px 7px -4px rgba(255,255,255,0.05),0px 11px 15px 1px rgba(255,255,255,0.04),0px 4px 20px 3px rgba(255,255,255,0.03)\",\r\n \"0px 7px 8px -4px rgba(255,255,255,0.05),0px 12px 17px 2px rgba(255,255,255,0.04),0px 5px 22px 4px rgba(255,255,255,0.03)\",\r\n \"0px 7px 8px -4px rgba(255,255,255,0.05),0px 13px 19px 2px rgba(255,255,255,0.04),0px 5px 24px 4px rgba(255,255,255,0.03)\",\r\n \"0px 7px 9px -4px rgba(255,255,255,0.05),0px 14px 21px 2px rgba(255,255,255,0.04),0px 5px 26px 4px rgba(255,255,255,0.03)\",\r\n \"0px 8px 9px -5px rgba(255,255,255,0.05),0px 15px 22px 2px rgba(255,255,255,0.04),0px 6px 28px 5px rgba(255,255,255,0.03)\",\r\n \"0px 8px 10px -5px rgba(255,255,255,0.05),0px 16px 24px 2px rgba(255,255,255,0.04),0px 6px 30px 5px rgba(255,255,255,0.03)\",\r\n \"0px 8px 11px -5px rgba(255,255,255,0.05),0px 17px 26px 2px rgba(255,255,255,0.04),0px 6px 32px 5px rgba(255,255,255,0.03)\",\r\n \"0px 9px 11px -5px rgba(255,255,255,0.05),0px 18px 28px 2px rgba(255,255,255,0.04),0px 7px 34px 6px rgba(255,255,255,0.03)\",\r\n \"0px 9px 12px -6px rgba(255,255,255,0.05),0px 19px 29px 2px rgba(255,255,255,0.04),0px 7px 36px 6px rgba(255,255,255,0.03)\",\r\n \"0px 10px 13px -6px rgba(255,255,255,0.05),0px 20px 31px 3px rgba(255,255,255,0.04),0px 8px 38px 7px rgba(255,255,255,0.03)\",\r\n \"0px 10px 13px -6px rgba(255,255,255,0.05),0px 21px 33px 3px rgba(255,255,255,0.04),0px 8px 40px 7px rgba(255,255,255,0.03)\",\r\n \"0px 10px 14px -6px rgba(255,255,255,0.05),0px 22px 35px 3px rgba(255,255,255,0.04),0px 8px 42px 7px rgba(255,255,255,0.03)\",\r\n \"0px 11px 14px -7px rgba(255,255,255,0.05),0px 23px 36px 3px rgba(255,255,255,0.04),0px 9px 44px 8px rgba(255,255,255,0.03)\",\r\n \"0px 11px 15px -7px rgba(255,255,255,0.05),0px 24px 38px 3px rgba(255,255,255,0.04),0px 9px 46px 8px rgba(255,255,255,0.03)\",\r\n]\r\n\r\n\r\nexport const lightColorPallete = {\r\n common: {\r\n primary: \"#FFFFFF\",\r\n secondary: \"#F4F6FB\",\r\n divider: \"#E5E7EB\",\r\n alpha: \"#F9FAFB\",\r\n text: {\r\n primary: \"#1F2937\", // slate-800\r\n secondary: \"#6B7280\", // slate-500\r\n },\r\n },\r\n surface: {\r\n primary: \"#FFFFFF\", // cards, dialogs\r\n secondary: \"#F9FAFB\", // subtle sections,\r\n divider: \"#E5E7EB\",\r\n alpha: \"#F4F6FB\",\r\n text: {\r\n primary: \"#1F2937\", // slate-800\r\n secondary: \"#6B7280\", // slate-500\r\n },\r\n },\r\n}\r\n\r\n\r\nexport const darkColorPallete = {\r\n common: {\r\n primary: \"#0F172A\",\r\n secondary: \"#111827\",\r\n divider: \"#374151\",\r\n alpha: \"#1F2937\",\r\n text: {\r\n primary: \"#F9FAFB\",\r\n secondary: \"#9CA3AF\",\r\n },\r\n },\r\n surface: {\r\n primary: \"#1F2937\", // cards & modals\r\n secondary: \"#273449\", // nested surfaces\r\n divider: \"#4B5563\",\r\n alpha: \"#111827\",\r\n text: {\r\n primary: \"#F9FAFB\", // near-white\r\n secondary: \"#9CA3AF\", // slate-400\r\n },\r\n },\r\n}\r\n\r\nexport const ThemeColors = {\r\n ...lightColorPallete,\r\n\r\n brand: {\r\n primary: \"#2563EB\", // blue-600\r\n secondary: \"#3B82F6\", // blue-500\r\n divider: \"#E5E7EB\", // neutral-200\r\n alpha: \"#EFF6FF\", // blue-50\r\n text: {\r\n primary: \"#FFFFFF\",\r\n secondary: \"#DBEAFE\",\r\n }\r\n },\r\n\r\n accent: {\r\n primary: \"#0D9488\", // teal-600\r\n secondary: \"#14B8A6\", // teal-500\r\n divider: \"#E5E7EB\", // neutral-200\r\n alpha: \"#F0FDFA\", // teal-50\r\n text: {\r\n primary: \"#FFFFFF\",\r\n secondary: \"#E0F2F1\",\r\n }\r\n },\r\n\r\n info: {\r\n primary: \"#0284C7\", // sky-600\r\n secondary: \"#38BDF8\", // sky-400\r\n divider: \"#E5E7EB\", // neutral-200\r\n alpha: \"#EFF6FF\", // sky-50\r\n text: {\r\n primary: \"#FFFFFF\",\r\n secondary: \"#E0F2FE\",\r\n }\r\n },\r\n\r\n success: {\r\n primary: \"#16A34A\", // green-600\r\n secondary: \"#4ADE80\", // green-400\r\n divider: \"#E5E7EB\", // neutral-200\r\n alpha: \"#ECFDF5\", // green-50\r\n text: {\r\n primary: \"#FFFFFF\",\r\n secondary: \"#D1FAE5\",\r\n },\r\n },\r\n\r\n warning: {\r\n primary: \"#D97706\",\r\n secondary: \"#FBBF24\",\r\n divider: \"#E5E7EB\",\r\n alpha: \"#FFFBEB\",\r\n text: {\r\n primary: \"#000000\",\r\n secondary: \"#78350F\",\r\n },\r\n },\r\n\r\n danger: {\r\n primary: \"#DC2626\",\r\n secondary: \"#F87171\",\r\n divider: \"#E5E7EB\",\r\n alpha: \"#FEF2F2\",\r\n text: {\r\n primary: \"#FFFFFF\",\r\n secondary: \"#FECACA\",\r\n }\r\n },\r\n}\r\n\r\nexport const ThemeTypography: ThemeTypographyType = {\r\n h1: { fontSize: 48, lineHeight: 1.3, fontWeight: 600 }, // bolder for emphasis\r\n h2: { fontSize: 40, lineHeight: 1.35, fontWeight: 500 },\r\n h3: { fontSize: 34, lineHeight: 1.4, fontWeight: 500 },\r\n h4: { fontSize: 28, lineHeight: 1.45, fontWeight: 500 },\r\n h5: { fontSize: 24, lineHeight: 1.5, fontWeight: 500 },\r\n h6: { fontSize: 20, lineHeight: 1.55, fontWeight: 500 },\r\n big: { fontSize: 18, lineHeight: 1.6, fontWeight: 400 },\r\n text: { fontSize: 16, lineHeight: 1.6, fontWeight: 400 },\r\n button: { fontSize: 14, lineHeight: 1.6, fontWeight: 500 },\r\n small: { fontSize: 12, lineHeight: 1.6, fontWeight: 400 },\r\n}\r\n\r\n\r\nexport const darkThemeOptions: ThemeOptionInput = {\r\n name: \"dark\",\r\n rtl: false,\r\n shadow: darkShadows,\r\n globalStyle: {},\r\n colors: darkColorPallete,\r\n typography: ThemeTypography,\r\n interfaces: {}\r\n} as ThemeOptionInput\r\n\r\nexport const lightThemeOptions: ThemeOptionInput = {\r\n name: \"light\",\r\n rtl: false,\r\n shadow: lightShadows,\r\n globalStyle: {},\r\n colors: ThemeColors,\r\n typography: ThemeTypography,\r\n interfaces: {}\r\n} as ThemeOptionInput\r\n"],"names":[],"mappings":"AAEO,MAAM,YAAY,GAAG;IACxB,MAAM;IACN,oGAAoG;IACpG,oGAAoG;IACpG,oGAAoG;IACpG,qGAAqG;IACrG,qGAAqG;IACrG,sGAAsG;IACtG,sGAAsG;IACtG,sGAAsG;IACtG,sGAAsG;IACtG,uGAAuG;IACvG,uGAAuG;IACvG,uGAAuG;IACvG,uGAAuG;IACvG,uGAAuG;IACvG,uGAAuG;IACvG,wGAAwG;IACxG,wGAAwG;IACxG,wGAAwG;IACxG,wGAAwG;IACxG,yGAAyG;IACzG,yGAAyG;IACzG,yGAAyG;IACzG,yGAAyG;IACzG,yGAAyG;;AAGtG,MAAM,WAAW,GAAG;IACvB,MAAM;IACN,uHAAuH;IACvH,uHAAuH;IACvH,uHAAuH;IACvH,wHAAwH;IACxH,wHAAwH;IACxH,yHAAyH;IACzH,yHAAyH;IACzH,yHAAyH;IACzH,yHAAyH;IACzH,0HAA0H;IAC1H,0HAA0H;IAC1H,0HAA0H;IAC1H,0HAA0H;IAC1H,0HAA0H;IAC1H,0HAA0H;IAC1H,2HAA2H;IAC3H,2HAA2H;IAC3H,2HAA2H;IAC3H,2HAA2H;IAC3H,4HAA4H;IAC5H,4HAA4H;IAC5H,4HAA4H;IAC5H,4HAA4H;IAC5H,4HAA4H;;AAIzH,MAAM,iBAAiB,GAAG;AAC7B,IAAA,MAAM,EAAE;AACJ,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE;YACF,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA;AACD,IAAA,OAAO,EAAE;QACL,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,SAAS;AACpB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE;YACF,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA;;AAIE,MAAM,gBAAgB,GAAG;AAC5B,IAAA,MAAM,EAAE;AACJ,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA;AACD,IAAA,OAAO,EAAE;QACL,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,SAAS;AACpB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE;YACF,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA;;AAGE,MAAM,WAAW,mCACjB,iBAAiB,CAAA,EAAA,EAEpB,KAAK,EAAE;QACH,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE,SAAS;AACvB;AACJ,KAAA,EAED,MAAM,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE,SAAS;AACvB;AACJ,KAAA,EAED,IAAI,EAAE;QACF,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE,SAAS;AACvB;AACJ,KAAA,EAED,OAAO,EAAE;QACL,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA,EAED,OAAO,EAAE;AACL,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA,EAED,MAAM,EAAE;AACJ,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE,SAAS;AACvB;AACJ,KAAA,EAAA;AAGE,MAAM,eAAe,GAAwB;AAChD,IAAA,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE;AACtD,IAAA,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE;AACvD,IAAA,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE;AACtD,IAAA,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE;AACvD,IAAA,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE;AACtD,IAAA,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE;AACvD,IAAA,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE;AACvD,IAAA,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE;AACxD,IAAA,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE;AAC1D,IAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE;;AAItD,MAAM,gBAAgB,GAAqB;AAC9C,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,MAAM,EAAE,WAAW;AACnB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,MAAM,EAAE,gBAAgB;AACxB,IAAA,UAAU,EAAE,eAAe;AAC3B,IAAA,UAAU,EAAE;;AAGT,MAAM,iBAAiB,GAAqB;AAC/C,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,MAAM,EAAE,WAAW;AACnB,IAAA,UAAU,EAAE,eAAe;AAC3B,IAAA,UAAU,EAAE;"}
|
package/theme/ThemeProvider.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../Tag/index.js'),core=require('./core.js'),ThemeCssVars=require('./ThemeCssVars.js'),index=require('../css/index.js'),createTheme=require('./createTheme.js'),ThemeDefaultOptions=require('./ThemeDefaultOptions.js');function _interopNamespaceDefault(e){var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var React__namespace=/*#__PURE__*/_interopNamespaceDefault(React);createTheme.createTheme("light", ThemeDefaultOptions.lightThemeOptions);
|
|
2
2
|
createTheme.createTheme("dark", ThemeDefaultOptions.darkThemeOptions);
|
|
3
3
|
const ThemeProvider = (_a) => {
|
|
4
|
-
var _b;
|
|
5
4
|
var { children, theme } = _a, props = tslib.__rest(_a, ["children", "theme"]);
|
|
6
5
|
let THEME = core.ThemeFactory.get(theme);
|
|
7
6
|
if (!THEME) {
|
|
@@ -21,9 +20,9 @@ const ThemeProvider = (_a) => {
|
|
|
21
20
|
injectStyle: typeof window !== 'undefined'
|
|
22
21
|
});
|
|
23
22
|
}, [theme]);
|
|
24
|
-
return (jsxRuntime.jsxs(core.ThemeContex.Provider, { value: theme, children: [typeof window === 'undefined' && jsxRuntime.jsx("style", { precedence: globalStyle.classname, href: globalStyle.classname, dangerouslySetInnerHTML: { __html: globalStyle.css } }), jsxRuntime.jsx(index$1.default, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.
|
|
23
|
+
return (jsxRuntime.jsxs(core.ThemeContex.Provider, { value: theme, children: [typeof window === 'undefined' && jsxRuntime.jsx("style", { precedence: globalStyle.classname, href: globalStyle.classname, dangerouslySetInnerHTML: { __html: globalStyle.css } }), jsxRuntime.jsx(index$1.default, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.common.primary, color: THEME.colors.common.text.primary, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { sxr: {
|
|
25
24
|
"& a": {
|
|
26
|
-
color:
|
|
25
|
+
color: THEME.colors.brand.primary || 'inherit',
|
|
27
26
|
},
|
|
28
27
|
}, baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: children }))] }));
|
|
29
28
|
};exports.default=ThemeProvider;//# sourceMappingURL=ThemeProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createTheme } from \"./createTheme\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n theme: string;\r\n}\r\n\r\ncreateTheme(\"light\", lightThemeOptions)\r\ncreateTheme(\"dark\", darkThemeOptions)\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\r\n let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n if (!THEME) {\r\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n }\r\n\r\n const globalStyle: any = React.useMemo(() => {\r\n const root_cls = `.xui-${theme}-theme-root`\r\n let gkeys = Object.keys(THEME.globalStyle || {})\r\n let gstyles: any = {}\r\n gkeys.forEach((key) => {\r\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\r\n })\r\n\r\n return css({\r\n \"@global\": {\r\n ...gstyles,\r\n [root_cls]: ThemeCssVars(THEME)\r\n }\r\n }, {\r\n injectStyle: typeof window !== 'undefined'\r\n })\r\n }, [theme])\r\n\r\n return (\r\n <ThemeContex.Provider value={theme}>\r\n {\r\n typeof window === 'undefined' && <style\r\n precedence={globalStyle.classname}\r\n href={globalStyle.classname}\r\n dangerouslySetInnerHTML={{ __html: globalStyle.css }}\r\n />\r\n }\r\n <Tag\r\n minHeight=\"100%\"\r\n bgcolor={THEME.colors.
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createTheme } from \"./createTheme\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n theme: string;\r\n}\r\n\r\ncreateTheme(\"light\", lightThemeOptions)\r\ncreateTheme(\"dark\", darkThemeOptions)\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\r\n let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n if (!THEME) {\r\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n }\r\n\r\n const globalStyle: any = React.useMemo(() => {\r\n const root_cls = `.xui-${theme}-theme-root`\r\n let gkeys = Object.keys(THEME.globalStyle || {})\r\n let gstyles: any = {}\r\n gkeys.forEach((key) => {\r\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\r\n })\r\n\r\n return css({\r\n \"@global\": {\r\n ...gstyles,\r\n [root_cls]: ThemeCssVars(THEME)\r\n }\r\n }, {\r\n injectStyle: typeof window !== 'undefined'\r\n })\r\n }, [theme])\r\n\r\n return (\r\n <ThemeContex.Provider value={theme}>\r\n {\r\n typeof window === 'undefined' && <style\r\n precedence={globalStyle.classname}\r\n href={globalStyle.classname}\r\n dangerouslySetInnerHTML={{ __html: globalStyle.css }}\r\n />\r\n }\r\n <Tag\r\n minHeight=\"100%\"\r\n bgcolor={THEME.colors.common.primary}\r\n color={THEME.colors.common.text.primary}\r\n fontSize={THEME.typography.text.fontSize}\r\n fontWeight={THEME.typography.text.fontWeight}\r\n lineHeight={THEME.typography.text.lineHeight}\r\n {...props}\r\n sxr={{\r\n \"& a\": {\r\n color: THEME.colors.brand.primary || 'inherit',\r\n },\r\n }}\r\n baseClass={`${theme}-theme-root`}\r\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\r\n >\r\n {children}\r\n </Tag>\r\n </ThemeContex.Provider>\r\n )\r\n}\r\n\r\nexport default ThemeProvider"],"names":["createTheme","lightThemeOptions","darkThemeOptions","__rest","ThemeFactory","React","css","ThemeCssVars","_jsxs","ThemeContex","_jsx","Tag"],"mappings":"wuBAcAA,uBAAW,CAAC,OAAO,EAAEC,qCAAiB,CAAC;AACvCD,uBAAW,CAAC,MAAM,EAAEE,oCAAgB,CAAC;AAErC,MAAM,aAAa,GAAG,CAAqC,EAAoD,KAAI;QAAxD,EAAE,QAAQ,EAAE,KAAK,EAAA,GAAA,EAAmC,EAA9B,KAAK,GAAAC,YAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;IACnF,IAAI,KAAK,GAAGC,iBAAY,CAAC,GAAG,CAAC,KAAK,CAAiB;IACnD,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,6BAA6B,KAAK,CAAA,6DAAA,CAA+D,CAAC;AAChH,QAAA,KAAK,GAAGA,iBAAY,CAAC,GAAG,CAAC,OAAO,CAAiB;IACpD;AAEA,IAAA,MAAM,WAAW,GAAQC,gBAAK,CAAC,OAAO,CAAC,MAAK;AACzC,QAAA,MAAM,QAAQ,GAAG,CAAA,KAAA,EAAQ,KAAK,aAAa;AAC3C,QAAA,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;QAChD,IAAI,OAAO,GAAQ,EAAE;AACrB,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnB,YAAA,OAAO,CAAC,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAU,CAAC;AAChE,QAAA,CAAC,CAAC;AAEF,QAAA,OAAOC,SAAG,CAAC;YACR,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,OAAO,CAAA,EAAA,EACV,CAAC,QAAQ,GAAGC,oBAAY,CAAC,KAAK,CAAC,EAAA;SAEpC,EAAE;AACA,YAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACGC,gBAACC,gBAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAE5B,OAAO,MAAM,KAAK,WAAW,IAAIC,cAAA,CAAA,OAAA,EAAA,EAC9B,UAAU,EAAE,WAAW,CAAC,SAAS,EACjC,IAAI,EAAE,WAAW,CAAC,SAAS,EAC3B,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,GAAG,EAAE,GACrD,EAELA,cAAA,CAACC,eAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,EACpC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAC5C,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAA,EACxC,KAAK,EAAA,EACT,GAAG,EAAE;AACF,oBAAA,KAAK,EAAE;wBACJ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,SAAS;AAChD,qBAAA;iBACH,EACD,SAAS,EAAE,CAAA,EAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,YAEnC,QAAQ,EAAA,CAAA,CACN,CAAA,EAAA,CACc;AAE7B"}
|
package/theme/ThemeProvider.mjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import Tag from'../Tag/index.mjs';import {ThemeFactory,ThemeContex}from'./core.mjs';import ThemeCssVars from'./ThemeCssVars.mjs';import {css}from'../css/index.mjs';import {createTheme}from'./createTheme.mjs';import {lightThemeOptions,darkThemeOptions}from'./ThemeDefaultOptions.mjs';createTheme("light", lightThemeOptions);
|
|
2
2
|
createTheme("dark", darkThemeOptions);
|
|
3
3
|
const ThemeProvider = (_a) => {
|
|
4
|
-
var _b;
|
|
5
4
|
var { children, theme } = _a, props = __rest(_a, ["children", "theme"]);
|
|
6
5
|
let THEME = ThemeFactory.get(theme);
|
|
7
6
|
if (!THEME) {
|
|
@@ -21,9 +20,9 @@ const ThemeProvider = (_a) => {
|
|
|
21
20
|
injectStyle: typeof window !== 'undefined'
|
|
22
21
|
});
|
|
23
22
|
}, [theme]);
|
|
24
|
-
return (jsxs(ThemeContex.Provider, { value: theme, children: [typeof window === 'undefined' && jsx("style", { precedence: globalStyle.classname, href: globalStyle.classname, dangerouslySetInnerHTML: { __html: globalStyle.css } }), jsx(Tag, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.
|
|
23
|
+
return (jsxs(ThemeContex.Provider, { value: theme, children: [typeof window === 'undefined' && jsx("style", { precedence: globalStyle.classname, href: globalStyle.classname, dangerouslySetInnerHTML: { __html: globalStyle.css } }), jsx(Tag, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.common.primary, color: THEME.colors.common.text.primary, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { sxr: {
|
|
25
24
|
"& a": {
|
|
26
|
-
color:
|
|
25
|
+
color: THEME.colors.brand.primary || 'inherit',
|
|
27
26
|
},
|
|
28
27
|
}, baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: children }))] }));
|
|
29
28
|
};export{ThemeProvider as default};//# sourceMappingURL=ThemeProvider.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.mjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createTheme } from \"./createTheme\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n theme: string;\r\n}\r\n\r\ncreateTheme(\"light\", lightThemeOptions)\r\ncreateTheme(\"dark\", darkThemeOptions)\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\r\n let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n if (!THEME) {\r\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n }\r\n\r\n const globalStyle: any = React.useMemo(() => {\r\n const root_cls = `.xui-${theme}-theme-root`\r\n let gkeys = Object.keys(THEME.globalStyle || {})\r\n let gstyles: any = {}\r\n gkeys.forEach((key) => {\r\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\r\n })\r\n\r\n return css({\r\n \"@global\": {\r\n ...gstyles,\r\n [root_cls]: ThemeCssVars(THEME)\r\n }\r\n }, {\r\n injectStyle: typeof window !== 'undefined'\r\n })\r\n }, [theme])\r\n\r\n return (\r\n <ThemeContex.Provider value={theme}>\r\n {\r\n typeof window === 'undefined' && <style\r\n precedence={globalStyle.classname}\r\n href={globalStyle.classname}\r\n dangerouslySetInnerHTML={{ __html: globalStyle.css }}\r\n />\r\n }\r\n <Tag\r\n minHeight=\"100%\"\r\n bgcolor={THEME.colors.
|
|
1
|
+
{"version":3,"file":"ThemeProvider.mjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createTheme } from \"./createTheme\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n theme: string;\r\n}\r\n\r\ncreateTheme(\"light\", lightThemeOptions)\r\ncreateTheme(\"dark\", darkThemeOptions)\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\r\n let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n if (!THEME) {\r\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n }\r\n\r\n const globalStyle: any = React.useMemo(() => {\r\n const root_cls = `.xui-${theme}-theme-root`\r\n let gkeys = Object.keys(THEME.globalStyle || {})\r\n let gstyles: any = {}\r\n gkeys.forEach((key) => {\r\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\r\n })\r\n\r\n return css({\r\n \"@global\": {\r\n ...gstyles,\r\n [root_cls]: ThemeCssVars(THEME)\r\n }\r\n }, {\r\n injectStyle: typeof window !== 'undefined'\r\n })\r\n }, [theme])\r\n\r\n return (\r\n <ThemeContex.Provider value={theme}>\r\n {\r\n typeof window === 'undefined' && <style\r\n precedence={globalStyle.classname}\r\n href={globalStyle.classname}\r\n dangerouslySetInnerHTML={{ __html: globalStyle.css }}\r\n />\r\n }\r\n <Tag\r\n minHeight=\"100%\"\r\n bgcolor={THEME.colors.common.primary}\r\n color={THEME.colors.common.text.primary}\r\n fontSize={THEME.typography.text.fontSize}\r\n fontWeight={THEME.typography.text.fontWeight}\r\n lineHeight={THEME.typography.text.lineHeight}\r\n {...props}\r\n sxr={{\r\n \"& a\": {\r\n color: THEME.colors.brand.primary || 'inherit',\r\n },\r\n }}\r\n baseClass={`${theme}-theme-root`}\r\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\r\n >\r\n {children}\r\n </Tag>\r\n </ThemeContex.Provider>\r\n )\r\n}\r\n\r\nexport default ThemeProvider"],"names":["_jsxs","_jsx"],"mappings":"2XAcA,WAAW,CAAC,OAAO,EAAE,iBAAiB,CAAC;AACvC,WAAW,CAAC,MAAM,EAAE,gBAAgB,CAAC;AAErC,MAAM,aAAa,GAAG,CAAqC,EAAoD,KAAI;QAAxD,EAAE,QAAQ,EAAE,KAAK,EAAA,GAAA,EAAmC,EAA9B,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;IACnF,IAAI,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAiB;IACnD,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,6BAA6B,KAAK,CAAA,6DAAA,CAA+D,CAAC;AAChH,QAAA,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAiB;IACpD;AAEA,IAAA,MAAM,WAAW,GAAQ,KAAK,CAAC,OAAO,CAAC,MAAK;AACzC,QAAA,MAAM,QAAQ,GAAG,CAAA,KAAA,EAAQ,KAAK,aAAa;AAC3C,QAAA,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;QAChD,IAAI,OAAO,GAAQ,EAAE;AACrB,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnB,YAAA,OAAO,CAAC,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAU,CAAC;AAChE,QAAA,CAAC,CAAC;AAEF,QAAA,OAAO,GAAG,CAAC;YACR,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,OAAO,CAAA,EAAA,EACV,CAAC,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,EAAA;SAEpC,EAAE;AACA,YAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACGA,KAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAE5B,OAAO,MAAM,KAAK,WAAW,IAAIC,GAAA,CAAA,OAAA,EAAA,EAC9B,UAAU,EAAE,WAAW,CAAC,SAAS,EACjC,IAAI,EAAE,WAAW,CAAC,SAAS,EAC3B,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,GAAG,EAAE,GACrD,EAELA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,EACpC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAC5C,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAA,EACxC,KAAK,EAAA,EACT,GAAG,EAAE;AACF,oBAAA,KAAK,EAAE;wBACJ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,SAAS;AAChD,qBAAA;iBACH,EACD,SAAS,EAAE,CAAA,EAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,YAEnC,QAAQ,EAAA,CAAA,CACN,CAAA,EAAA,CACc;AAE7B"}
|
package/theme/createTheme.js
CHANGED
|
@@ -1,20 +1,9 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var core=require('./core.js'),index=require('../css/index.js'),ThemeDefaultOptions=require('./ThemeDefaultOptions.js');const createTheme = (name, options, darkMode) => {
|
|
2
2
|
if (core.ThemeFactory.has(name)) {
|
|
3
3
|
console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`);
|
|
4
4
|
return core.ThemeFactory.get(name);
|
|
5
5
|
}
|
|
6
|
-
let theme = core.mergeObject(ThemeDefaultOptions.lightThemeOptions, Object.assign(Object.assign(
|
|
7
|
-
theme = core.mergeObject(theme, {
|
|
8
|
-
colors: {
|
|
9
|
-
background: createColor.default(theme, "background"),
|
|
10
|
-
brand: createColor.default(theme, "brand"),
|
|
11
|
-
accent: createColor.default(theme, "accent"),
|
|
12
|
-
info: createColor.default(theme, "info"),
|
|
13
|
-
success: createColor.default(theme, "success"),
|
|
14
|
-
warning: createColor.default(theme, "warning"),
|
|
15
|
-
danger: createColor.default(theme, "danger")
|
|
16
|
-
}
|
|
17
|
-
});
|
|
6
|
+
let theme = core.mergeObject(darkMode ? ThemeDefaultOptions.darkThemeOptions : ThemeDefaultOptions.lightThemeOptions, Object.assign(Object.assign({}, options), { name, breakpoints: index.breakpoints }));
|
|
18
7
|
core.ThemeFactory.set(name, theme);
|
|
19
8
|
return theme;
|
|
20
9
|
};exports.createTheme=createTheme;//# sourceMappingURL=createTheme.js.map
|
package/theme/createTheme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["import { ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport {
|
|
1
|
+
{"version":3,"file":"createTheme.js","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["import { ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport { mergeObject, ThemeFactory } from \"./core\"\r\nimport { breakpoints } from \"../css\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport const createTheme = (name: string, options: ThemeOptionInput, darkMode?: boolean): ThemeOptions => {\r\n if (ThemeFactory.has(name)) {\r\n console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`)\r\n return ThemeFactory.get(name) as ThemeOptions\r\n }\r\n\r\n let theme: any = mergeObject(darkMode ? darkThemeOptions : lightThemeOptions, {\r\n ...options,\r\n name,\r\n breakpoints: breakpoints\r\n })\r\n\r\n ThemeFactory.set(name, theme)\r\n\r\n return theme as ThemeOptions\r\n}\r\n"],"names":["ThemeFactory","mergeObject","darkThemeOptions","lightThemeOptions","breakpoints"],"mappings":"6LAKO,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,OAAyB,EAAE,QAAkB,KAAkB;AACtG,IAAA,IAAIA,iBAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AACzB,QAAA,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,CAAA,mEAAA,CAAqE,CAAC;AACnH,QAAA,OAAOA,iBAAY,CAAC,GAAG,CAAC,IAAI,CAAiB;IAChD;IAEA,IAAI,KAAK,GAAQC,gBAAW,CAAC,QAAQ,GAAGC,oCAAgB,GAAGC,qCAAiB,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACtE,OAAO,CAAA,EAAA,EACV,IAAI,EACJ,WAAW,EAAEC,iBAAW,EAAA,CAAA,CACzB;AAEF,IAAAJ,iBAAY,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC;AAE7B,IAAA,OAAO,KAAqB;AAC/B"}
|
package/theme/createTheme.mjs
CHANGED
|
@@ -1,20 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {ThemeFactory,mergeObject}from'./core.mjs';import {breakpoints}from'../css/index.mjs';import {lightThemeOptions,darkThemeOptions}from'./ThemeDefaultOptions.mjs';const createTheme = (name, options, darkMode) => {
|
|
2
2
|
if (ThemeFactory.has(name)) {
|
|
3
3
|
console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`);
|
|
4
4
|
return ThemeFactory.get(name);
|
|
5
5
|
}
|
|
6
|
-
let theme = mergeObject(lightThemeOptions, Object.assign(Object.assign(
|
|
7
|
-
theme = mergeObject(theme, {
|
|
8
|
-
colors: {
|
|
9
|
-
background: createColor(theme, "background"),
|
|
10
|
-
brand: createColor(theme, "brand"),
|
|
11
|
-
accent: createColor(theme, "accent"),
|
|
12
|
-
info: createColor(theme, "info"),
|
|
13
|
-
success: createColor(theme, "success"),
|
|
14
|
-
warning: createColor(theme, "warning"),
|
|
15
|
-
danger: createColor(theme, "danger")
|
|
16
|
-
}
|
|
17
|
-
});
|
|
6
|
+
let theme = mergeObject(darkMode ? darkThemeOptions : lightThemeOptions, Object.assign(Object.assign({}, options), { name, breakpoints: breakpoints }));
|
|
18
7
|
ThemeFactory.set(name, theme);
|
|
19
8
|
return theme;
|
|
20
9
|
};export{createTheme};//# sourceMappingURL=createTheme.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.mjs","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["import { ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport {
|
|
1
|
+
{"version":3,"file":"createTheme.mjs","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["import { ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport { mergeObject, ThemeFactory } from \"./core\"\r\nimport { breakpoints } from \"../css\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport const createTheme = (name: string, options: ThemeOptionInput, darkMode?: boolean): ThemeOptions => {\r\n if (ThemeFactory.has(name)) {\r\n console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`)\r\n return ThemeFactory.get(name) as ThemeOptions\r\n }\r\n\r\n let theme: any = mergeObject(darkMode ? darkThemeOptions : lightThemeOptions, {\r\n ...options,\r\n name,\r\n breakpoints: breakpoints\r\n })\r\n\r\n ThemeFactory.set(name, theme)\r\n\r\n return theme as ThemeOptions\r\n}\r\n"],"names":[],"mappings":"wKAKO,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,OAAyB,EAAE,QAAkB,KAAkB;AACtG,IAAA,IAAI,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AACzB,QAAA,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,CAAA,mEAAA,CAAqE,CAAC;AACnH,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAiB;IAChD;IAEA,IAAI,KAAK,GAAQ,WAAW,CAAC,QAAQ,GAAG,gBAAgB,GAAG,iBAAiB,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACtE,OAAO,CAAA,EAAA,EACV,IAAI,EACJ,WAAW,EAAE,WAAW,EAAA,CAAA,CACzB;AAEF,IAAA,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC;AAE7B,IAAA,OAAO,KAAqB;AAC/B"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { ThemeOptions } from './types.js';
|
|
2
|
+
import { BucketOptions } from 'react-state-bucket/Bucket';
|
|
2
3
|
|
|
3
4
|
type ThemeSwitcherOption = {
|
|
4
|
-
store?:
|
|
5
|
+
store?: BucketOptions['store'];
|
|
5
6
|
onChange?: (theme: string) => void;
|
|
6
7
|
};
|
|
7
8
|
declare const createThemeSwitcher: (defaultTheme: string, option?: ThemeSwitcherOption) => () => {
|
|
8
|
-
name:
|
|
9
|
+
name: any;
|
|
9
10
|
theme: ThemeOptions | undefined;
|
|
10
11
|
change: (theme: string) => void;
|
|
11
12
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var reactStateBucket=require('react-state-bucket'),core=require('./core.js');const createThemeSwitcher = (defaultTheme, option) => {
|
|
2
|
-
const useThemeState = reactStateBucket.createBucket({ name: defaultTheme }, {
|
|
2
|
+
const useThemeState = reactStateBucket.createBucket({ name: reactStateBucket.xv.string().default(defaultTheme) }, {
|
|
3
3
|
store: (option === null || option === void 0 ? void 0 : option.store) || "memory",
|
|
4
|
-
onChange: (
|
|
4
|
+
onChange: (_key, value) => {
|
|
5
5
|
(option === null || option === void 0 ? void 0 : option.onChange) && (option === null || option === void 0 ? void 0 : option.onChange(value));
|
|
6
6
|
}
|
|
7
7
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createThemeSwitcher.js","sources":["../../src/theme/createThemeSwitcher.ts"],"sourcesContent":["import { createBucket } from \"react-state-bucket\"\r\nimport { getTheme } from \"./core\"\r\n\r\nexport type ThemeSwitcherOption = {\r\n store?:
|
|
1
|
+
{"version":3,"file":"createThemeSwitcher.js","sources":["../../src/theme/createThemeSwitcher.ts"],"sourcesContent":["import { createBucket, xv } from \"react-state-bucket\"\r\nimport { getTheme } from \"./core\"\r\nimport { BucketOptions } from \"react-state-bucket/Bucket\"\r\n\r\nexport type ThemeSwitcherOption = {\r\n store?: BucketOptions['store'],\r\n onChange?: (theme: string) => void\r\n}\r\n\r\nconst createThemeSwitcher = (defaultTheme: string, option?: ThemeSwitcherOption) => {\r\n\r\n const useThemeState = createBucket({ name: xv.string().default(defaultTheme) }, {\r\n store: option?.store || \"memory\",\r\n onChange: (_key, value) => {\r\n option?.onChange && option?.onChange(value)\r\n }\r\n })\r\n\r\n const useThemeSwitcher = () => {\r\n const state = useThemeState()\r\n return {\r\n name: state.get(\"name\"),\r\n theme: getTheme(state.get(\"name\")),\r\n change: (theme: string) => state.set(\"name\", theme)\r\n }\r\n }\r\n return useThemeSwitcher\r\n}\r\n\r\nexport default createThemeSwitcher"],"names":["createBucket","xv","getTheme"],"mappings":"mJASA,MAAM,mBAAmB,GAAG,CAAC,YAAoB,EAAE,MAA4B,KAAI;AAEhF,IAAA,MAAM,aAAa,GAAGA,6BAAY,CAAC,EAAE,IAAI,EAAEC,mBAAE,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE;QAC7E,KAAK,EAAE,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,QAAQ;AAChC,QAAA,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAI;AACvB,YAAA,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,MAAI,MAAM,aAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC9C;AACF,KAAA,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAK;AAC3B,QAAA,MAAM,KAAK,GAAG,aAAa,EAAE;QAC7B,OAAO;AACJ,YAAA,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC;YACvB,KAAK,EAAEC,aAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAClC,YAAA,MAAM,EAAE,CAAC,KAAa,KAAK,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK;SACpD;AACJ,IAAA,CAAC;AACD,IAAA,OAAO,gBAAgB;AAC1B"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {createBucket}from'react-state-bucket';import {getTheme}from'./core.mjs';const createThemeSwitcher = (defaultTheme, option) => {
|
|
2
|
-
const useThemeState = createBucket({ name: defaultTheme }, {
|
|
1
|
+
import {createBucket,xv}from'react-state-bucket';import {getTheme}from'./core.mjs';const createThemeSwitcher = (defaultTheme, option) => {
|
|
2
|
+
const useThemeState = createBucket({ name: xv.string().default(defaultTheme) }, {
|
|
3
3
|
store: (option === null || option === void 0 ? void 0 : option.store) || "memory",
|
|
4
|
-
onChange: (
|
|
4
|
+
onChange: (_key, value) => {
|
|
5
5
|
(option === null || option === void 0 ? void 0 : option.onChange) && (option === null || option === void 0 ? void 0 : option.onChange(value));
|
|
6
6
|
}
|
|
7
7
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createThemeSwitcher.mjs","sources":["../../src/theme/createThemeSwitcher.ts"],"sourcesContent":["import { createBucket } from \"react-state-bucket\"\r\nimport { getTheme } from \"./core\"\r\n\r\nexport type ThemeSwitcherOption = {\r\n store?:
|
|
1
|
+
{"version":3,"file":"createThemeSwitcher.mjs","sources":["../../src/theme/createThemeSwitcher.ts"],"sourcesContent":["import { createBucket, xv } from \"react-state-bucket\"\r\nimport { getTheme } from \"./core\"\r\nimport { BucketOptions } from \"react-state-bucket/Bucket\"\r\n\r\nexport type ThemeSwitcherOption = {\r\n store?: BucketOptions['store'],\r\n onChange?: (theme: string) => void\r\n}\r\n\r\nconst createThemeSwitcher = (defaultTheme: string, option?: ThemeSwitcherOption) => {\r\n\r\n const useThemeState = createBucket({ name: xv.string().default(defaultTheme) }, {\r\n store: option?.store || \"memory\",\r\n onChange: (_key, value) => {\r\n option?.onChange && option?.onChange(value)\r\n }\r\n })\r\n\r\n const useThemeSwitcher = () => {\r\n const state = useThemeState()\r\n return {\r\n name: state.get(\"name\"),\r\n theme: getTheme(state.get(\"name\")),\r\n change: (theme: string) => state.set(\"name\", theme)\r\n }\r\n }\r\n return useThemeSwitcher\r\n}\r\n\r\nexport default createThemeSwitcher"],"names":[],"mappings":"mFASA,MAAM,mBAAmB,GAAG,CAAC,YAAoB,EAAE,MAA4B,KAAI;AAEhF,IAAA,MAAM,aAAa,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE;QAC7E,KAAK,EAAE,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,QAAQ;AAChC,QAAA,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAI;AACvB,YAAA,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,MAAI,MAAM,aAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC9C;AACF,KAAA,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAK;AAC3B,QAAA,MAAM,KAAK,GAAG,aAAa,EAAE;QAC7B,OAAO;AACJ,YAAA,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC;YACvB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAClC,YAAA,MAAM,EAAE,CAAC,KAAa,KAAK,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK;SACpD;AACJ,IAAA,CAAC;AACD,IAAA,OAAO,gBAAgB;AAC1B"}
|
package/theme/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var core=require('./core.js');require('../css/getValue.js'),require('oncss'),require('./ThemeDefaultOptions.js');var ThemeProvider=require('./ThemeProvider.js');require('react-state-bucket');const themeRootClass = (theme) => `.xui-${theme}-theme-root`;exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;exports.ThemeProvider=ThemeProvider.default;exports.themeRootClass=themeRootClass;//# sourceMappingURL=index.js.map
|
package/theme/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
export{getTheme,useTheme}from'./core.mjs';import'../css/getValue.mjs';import'oncss';import'./ThemeDefaultOptions.mjs';export{default as ThemeProvider}from'./ThemeProvider.mjs';import'react-state-bucket';const themeRootClass = (theme) => `.xui-${theme}-theme-root`;export{themeRootClass};//# sourceMappingURL=index.mjs.map
|
package/theme/types.d.ts
CHANGED
|
@@ -6,43 +6,11 @@ type ObjectType = {
|
|
|
6
6
|
type ThemeColorItem = {
|
|
7
7
|
primary: string;
|
|
8
8
|
secondary: string;
|
|
9
|
-
text: string;
|
|
10
9
|
alpha: string;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
border: number;
|
|
16
|
-
borderColor: string;
|
|
17
|
-
hover: {
|
|
18
|
-
bgcolor: string;
|
|
19
|
-
color: string;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
fill: {
|
|
23
|
-
bgcolor: string;
|
|
24
|
-
color: string;
|
|
25
|
-
hover: {
|
|
26
|
-
bgcolor: string;
|
|
27
|
-
color: string;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
text: {
|
|
31
|
-
bgcolor: string;
|
|
32
|
-
color: string;
|
|
33
|
-
hover: {
|
|
34
|
-
bgcolor: string;
|
|
35
|
-
color: string;
|
|
36
|
-
};
|
|
37
|
-
};
|
|
38
|
-
alpha: {
|
|
39
|
-
bgcolor: string;
|
|
40
|
-
color: string;
|
|
41
|
-
hover: {
|
|
42
|
-
bgcolor: string;
|
|
43
|
-
color: string;
|
|
44
|
-
};
|
|
45
|
-
};
|
|
10
|
+
divider: string;
|
|
11
|
+
text: {
|
|
12
|
+
primary: string;
|
|
13
|
+
secondary: string;
|
|
46
14
|
};
|
|
47
15
|
};
|
|
48
16
|
type ThemeTypographyItem = {
|
|
@@ -51,10 +19,8 @@ type ThemeTypographyItem = {
|
|
|
51
19
|
fontWeight: number;
|
|
52
20
|
};
|
|
53
21
|
type ThemeColor = {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
background: Omit<ThemeColorItem, "text">;
|
|
57
|
-
surface: Omit<ThemeColorItem, "text">;
|
|
22
|
+
common: ThemeColorItem;
|
|
23
|
+
surface: ThemeColorItem;
|
|
58
24
|
brand: ThemeColorItem;
|
|
59
25
|
accent: ThemeColorItem;
|
|
60
26
|
success: ThemeColorItem;
|
|
@@ -91,10 +57,8 @@ interface ThemeOptions {
|
|
|
91
57
|
type ThemeColorItemInput = Partial<Omit<ThemeColorItem, "alpha">>;
|
|
92
58
|
type ThemeTypographyItemInput = Partial<ThemeTypographyItem>;
|
|
93
59
|
type ThemeColorInput = {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
background?: Omit<ThemeColorItemInput, "text">;
|
|
97
|
-
surface?: Omit<ThemeColorItemInput, "text">;
|
|
60
|
+
common?: ThemeColorItemInput;
|
|
61
|
+
surface?: ThemeColorItemInput;
|
|
98
62
|
brand?: ThemeColorItemInput;
|
|
99
63
|
accent?: ThemeColorItemInput;
|
|
100
64
|
success?: ThemeColorItemInput;
|
|
@@ -103,7 +67,6 @@ type ThemeColorInput = {
|
|
|
103
67
|
danger?: ThemeColorItemInput;
|
|
104
68
|
};
|
|
105
69
|
type ThemeTypographyInputType = {
|
|
106
|
-
fontFamily?: string;
|
|
107
70
|
h1?: ThemeTypographyItemInput;
|
|
108
71
|
h2?: ThemeTypographyItemInput;
|
|
109
72
|
h3?: ThemeTypographyItemInput;
|
|
@@ -124,6 +87,6 @@ interface ThemeOptionInput {
|
|
|
124
87
|
typography?: ThemeTypographyInputType;
|
|
125
88
|
}
|
|
126
89
|
type TypographyRefTypes = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "text" | "button" | "small";
|
|
127
|
-
type ColorsRefTypes = "
|
|
90
|
+
type ColorsRefTypes = "common" | "common.primary" | "common.secondary" | "common.alpha" | "common.divider" | "common.text.primary" | "common.text.secondary" | "surface" | "surface.primary" | "surface.secondary" | "surface.divider" | "surface.alpha" | "surface.text.primary" | "surface.text.secondary" | "brand" | "brand.primary" | "brand.secondary" | "brand.alpha" | "brand.divider" | "brand.text.primary" | "brand.text.secondary" | "accent" | "accent.primary" | "accent.secondary" | "accent.alpha" | "accent.divider" | "accent.text.primary" | "accent.text.secondary" | "info" | "info.primary" | "info.secondary" | "info.alpha" | "info.divider" | "info.text.primary" | "info.text.secondary" | "success" | "success.primary" | "success.secondary" | "success.alpha" | "success.divider" | "success.text.primary" | "success.text.secondary" | "warning" | "warning.primary" | "warning.secondary" | "warning.alpha" | "warning.divider" | "warning.text.primary" | "warning.text.secondary" | "danger" | "danger.primary" | "danger.secondary" | "danger.alpha" | "danger.divider" | "danger.text.primary" | "danger.text.secondary";
|
|
128
91
|
|
|
129
92
|
export type { ColorsRefTypes, ObjectType, ThemeColor, ThemeColorInput, ThemeColorItem, ThemeColorItemInput, ThemeOptionInput, ThemeOptions, ThemeTypographyInputType, ThemeTypographyItem, ThemeTypographyItemInput, ThemeTypographyType, TypographyRefTypes };
|
package/RenderServerStyles.d.ts
DELETED
package/RenderServerStyles.js
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),oncss=require('oncss');const ServerStyleTags = () => {
|
|
2
|
-
return Array.from(oncss.CSSFactory.values()).map((c, idx) => jsxRuntime.jsx("style", { "data-oncss": c.classname, dangerouslySetInnerHTML: { __html: c.css } }, c.classname + idx));
|
|
3
|
-
};exports.default=ServerStyleTags;//# sourceMappingURL=RenderServerStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RenderServerStyles.js","sources":["../src/RenderServerStyles.tsx"],"sourcesContent":["import * as React from 'react'\r\nimport { CSSFactory } from 'oncss'\r\n\r\nconst ServerStyleTags = () => {\r\n return Array.from(CSSFactory.values()).map((c, idx) => <style\r\n key={c.classname + idx}\r\n data-oncss={c.classname}\r\n dangerouslySetInnerHTML={{ __html: c.css }}\r\n />)\r\n}\r\n\r\nexport default ServerStyleTags"],"names":["CSSFactory","_jsx"],"mappings":"yIAGA,MAAM,eAAe,GAAG,MAAK;AACzB,IAAA,OAAO,KAAK,CAAC,IAAI,CAACA,gBAAU,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAKC,cAAA,CAAA,OAAA,EAAA,EAAA,YAAA,EAEvC,CAAC,CAAC,SAAS,EACvB,uBAAuB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,EAAA,EAFrC,CAAC,CAAC,SAAS,GAAG,GAAG,CAGxB,CAAC;AACP"}
|
package/RenderServerStyles.mjs
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import {jsx}from'react/jsx-runtime';import {CSSFactory}from'oncss';const ServerStyleTags = () => {
|
|
2
|
-
return Array.from(CSSFactory.values()).map((c, idx) => jsx("style", { "data-oncss": c.classname, dangerouslySetInnerHTML: { __html: c.css } }, c.classname + idx));
|
|
3
|
-
};export{ServerStyleTags as default};//# sourceMappingURL=RenderServerStyles.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RenderServerStyles.mjs","sources":["../src/RenderServerStyles.tsx"],"sourcesContent":["import * as React from 'react'\r\nimport { CSSFactory } from 'oncss'\r\n\r\nconst ServerStyleTags = () => {\r\n return Array.from(CSSFactory.values()).map((c, idx) => <style\r\n key={c.classname + idx}\r\n data-oncss={c.classname}\r\n dangerouslySetInnerHTML={{ __html: c.css }}\r\n />)\r\n}\r\n\r\nexport default ServerStyleTags"],"names":["_jsx"],"mappings":"mEAGA,MAAM,eAAe,GAAG,MAAK;AACzB,IAAA,OAAO,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAKA,GAAA,CAAA,OAAA,EAAA,EAAA,YAAA,EAEvC,CAAC,CAAC,SAAS,EACvB,uBAAuB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,EAAA,EAFrC,CAAC,CAAC,SAAS,GAAG,GAAG,CAGxB,CAAC;AACP"}
|
package/isWindow.d.ts
DELETED
package/isWindow.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});const isWindow = () => typeof window !== 'undefined';exports.default=isWindow;//# sourceMappingURL=isWindow.js.map
|
package/isWindow.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isWindow.js","sources":["../src/isWindow.ts"],"sourcesContent":["\r\nconst isWindow = () => typeof window !== 'undefined'\r\nexport default isWindow"],"names":[],"mappings":"sEACA,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,KAAK"}
|
package/isWindow.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const isWindow = () => typeof window !== 'undefined';export{isWindow as default};//# sourceMappingURL=isWindow.mjs.map
|
package/isWindow.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isWindow.mjs","sources":["../src/isWindow.ts"],"sourcesContent":["\r\nconst isWindow = () => typeof window !== 'undefined'\r\nexport default isWindow"],"names":[],"mappings":"AACA,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,KAAK"}
|