@idealyst/theme 1.0.24 → 1.0.25

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.
Files changed (11) hide show
  1. package/package.json +1 -1
  2. package/src/breakpoints.ts +8 -8
  3. package/src/colorResolver.ts +217 -217
  4. package/src/colors.ts +314 -314
  5. package/src/common.ts +91 -91
  6. package/src/defaultThemes.ts +237 -237
  7. package/src/index.ts +166 -166
  8. package/src/themeBuilder.ts +601 -601
  9. package/src/unistyles.ts +38 -38
  10. package/src/variantHelpers.ts +583 -583
  11. package/src/variants.ts +55 -55
package/src/common.ts CHANGED
@@ -1,92 +1,92 @@
1
- // =============================================================================
2
- // COMMON THEME PROPERTIES
3
- // =============================================================================
4
-
5
- // Common theme properties shared across all themes
6
- export const commonThemeProperties = {
7
- spacing: {
8
- xs: 4,
9
- sm: 8,
10
- md: 16,
11
- lg: 24,
12
- xl: 32,
13
- xxl: 40,
14
- xxxl: 48,
15
- xxxxl: 64,
16
- },
17
-
18
- borderRadius: {
19
- none: 0,
20
- xs: 2,
21
- sm: 4,
22
- md: 8,
23
- lg: 12,
24
- xl: 16,
25
- xxl: 20,
26
- full: 9999,
27
- },
28
-
29
- typography: {
30
- fontSize: {
31
- xs: 12,
32
- sm: 14,
33
- md: 16,
34
- lg: 18,
35
- xl: 20,
36
- xxl: 24,
37
- xxxl: 32,
38
- xxxxl: 40,
39
- },
40
- fontWeight: {
41
- light: '300',
42
- regular: '400',
43
- medium: '500',
44
- semibold: '600',
45
- bold: '700',
46
- extrabold: '800',
47
- },
48
- lineHeight: {
49
- tight: 1.25,
50
- normal: 1.5,
51
- relaxed: 1.75,
52
- },
53
- },
54
-
55
- shadows: {
56
- sm: {
57
- shadowColor: '#000',
58
- shadowOffset: { width: 0, height: 1 },
59
- shadowOpacity: 0.05,
60
- shadowRadius: 2,
61
- elevation: 1,
62
- },
63
- md: {
64
- shadowColor: '#000',
65
- shadowOffset: { width: 0, height: 4 },
66
- shadowOpacity: 0.1,
67
- shadowRadius: 8,
68
- elevation: 4,
69
- },
70
- lg: {
71
- shadowColor: '#000',
72
- shadowOffset: { width: 0, height: 8 },
73
- shadowOpacity: 0.15,
74
- shadowRadius: 16,
75
- elevation: 8,
76
- },
77
- },
78
-
79
- transitions: {
80
- fast: '0.15s ease',
81
- base: '0.2s ease',
82
- slow: '0.3s ease',
83
- button: 'all 0.2s ease',
84
- fade: 'opacity 0.2s ease',
85
- slide: 'transform 0.3s ease',
86
- },
87
-
88
- // Dynamic helper functions
89
- gap: (value: number) => value * 8,
90
- scale: (value: number) => value * 1.2,
91
- alpha: (color: string, alpha: number) => `${color}${Math.round(alpha * 255).toString(16).padStart(2, '0')}`,
1
+ // =============================================================================
2
+ // COMMON THEME PROPERTIES
3
+ // =============================================================================
4
+
5
+ // Common theme properties shared across all themes
6
+ export const commonThemeProperties = {
7
+ spacing: {
8
+ xs: 4,
9
+ sm: 8,
10
+ md: 16,
11
+ lg: 24,
12
+ xl: 32,
13
+ xxl: 40,
14
+ xxxl: 48,
15
+ xxxxl: 64,
16
+ },
17
+
18
+ borderRadius: {
19
+ none: 0,
20
+ xs: 2,
21
+ sm: 4,
22
+ md: 8,
23
+ lg: 12,
24
+ xl: 16,
25
+ xxl: 20,
26
+ full: 9999,
27
+ },
28
+
29
+ typography: {
30
+ fontSize: {
31
+ xs: 12,
32
+ sm: 14,
33
+ md: 16,
34
+ lg: 18,
35
+ xl: 20,
36
+ xxl: 24,
37
+ xxxl: 32,
38
+ xxxxl: 40,
39
+ },
40
+ fontWeight: {
41
+ light: '300',
42
+ regular: '400',
43
+ medium: '500',
44
+ semibold: '600',
45
+ bold: '700',
46
+ extrabold: '800',
47
+ },
48
+ lineHeight: {
49
+ tight: 1.25,
50
+ normal: 1.5,
51
+ relaxed: 1.75,
52
+ },
53
+ },
54
+
55
+ shadows: {
56
+ sm: {
57
+ shadowColor: '#000',
58
+ shadowOffset: { width: 0, height: 1 },
59
+ shadowOpacity: 0.05,
60
+ shadowRadius: 2,
61
+ elevation: 1,
62
+ },
63
+ md: {
64
+ shadowColor: '#000',
65
+ shadowOffset: { width: 0, height: 4 },
66
+ shadowOpacity: 0.1,
67
+ shadowRadius: 8,
68
+ elevation: 4,
69
+ },
70
+ lg: {
71
+ shadowColor: '#000',
72
+ shadowOffset: { width: 0, height: 8 },
73
+ shadowOpacity: 0.15,
74
+ shadowRadius: 16,
75
+ elevation: 8,
76
+ },
77
+ },
78
+
79
+ transitions: {
80
+ fast: '0.15s ease',
81
+ base: '0.2s ease',
82
+ slow: '0.3s ease',
83
+ button: 'all 0.2s ease',
84
+ fade: 'opacity 0.2s ease',
85
+ slide: 'transform 0.3s ease',
86
+ },
87
+
88
+ // Dynamic helper functions
89
+ gap: (value: number) => value * 8,
90
+ scale: (value: number) => value * 1.2,
91
+ alpha: (color: string, alpha: number) => `${color}${Math.round(alpha * 255).toString(16).padStart(2, '0')}`,
92
92
  };
package/src/defaultThemes.ts CHANGED
@@ -1,238 +1,238 @@
1
- import {
2
- createTheme,
3
- generateColorPalette,
4
- createLightResolvedIntents,
5
- createDarkResolvedIntents,
6
- createLightResolvedColors,
7
- createDarkResolvedColors,
8
- type ThemeConfig
9
- } from './themeBuilder';
10
- import { commonThemeProperties } from './common';
11
-
12
- // =============================================================================
13
- // DEFAULT PALETTES
14
- // =============================================================================
15
-
16
- /**
17
- * Helper function to create standard color palettes
18
- */
19
- export function createStandardPalettes(): ThemeConfig['palettes'] {
20
- return {
21
- red: generateColorPalette('#ef4444'),
22
- orange: generateColorPalette('#f97316'),
23
- yellow: generateColorPalette('#eab308'),
24
- green: generateColorPalette('#22c55e'),
25
- blue: generateColorPalette('#3b82f6'),
26
- purple: generateColorPalette('#a855f7'),
27
- black: generateColorPalette('#000000'),
28
- gray: generateColorPalette('#6b7280'),
29
- white: generateColorPalette('#ffffff'),
30
- };
31
- }
32
-
33
- /**
34
- * Helper function to create dark theme palettes with proper dark mode colors
35
- */
36
- export function createDarkPalettes(): ThemeConfig['palettes'] {
37
- const basePalettes = createStandardPalettes();
38
-
39
- return {
40
- ...basePalettes,
41
- // Adjusted gray palette for dark theme
42
- gray: {
43
- 50: '#18181b', // Very dark background
44
- 100: '#27272a', // Dark surface
45
- 200: '#3f3f46', // Medium dark
46
- 300: '#52525b', // Medium
47
- 400: '#71717a', // Medium light
48
- 500: '#a1a1aa', // Light gray
49
- 600: '#d4d4d8', // Lighter gray
50
- 700: '#e4e4e7', // Very light gray
51
- 800: '#f4f4f5', // Nearly white
52
- 900: '#fafafa', // White
53
- },
54
- // Adjusted black palette for dark theme
55
- black: {
56
- 50: '#000000', // Pure black
57
- 100: '#0a0a0a', // Very dark
58
- 200: '#141414', // Dark
59
- 300: '#1f1f1f', // Medium dark
60
- 400: '#2a2a2a', // Medium
61
- 500: '#3c3c3c', // Medium light
62
- 600: '#525252', // Light
63
- 700: '#737373', // Lighter
64
- 800: '#a3a3a3', // Very light
65
- 900: '#d4d4d4', // Nearly white
66
- },
67
- // Adjusted white palette for dark theme
68
- white: {
69
- 50: '#0c0c0c', // Very dark (inverted)
70
- 100: '#171717', // Dark
71
- 200: '#262626', // Medium dark
72
- 300: '#404040', // Medium
73
- 400: '#525252', // Medium light
74
- 500: '#737373', // Light
75
- 600: '#a3a3a3', // Lighter
76
- 700: '#d4d4d4', // Very light
77
- 800: '#f5f5f5', // Nearly white
78
- 900: '#ffffff', // Pure white
79
- },
80
- };
81
- }
82
-
83
- // Convenience functions for complete theme creation
84
- export function createLightIntentMappings(): ThemeConfig['intents'] {
85
- const palettes = createStandardPalettes();
86
- return createLightResolvedIntents(palettes);
87
- }
88
-
89
- export function createDarkIntentMappings(): ThemeConfig['intents'] {
90
- const palettes = createDarkPalettes();
91
- return createDarkResolvedIntents(palettes);
92
- }
93
-
94
- export function createLightColorMappings(): ThemeConfig['colors'] {
95
- const palettes = createStandardPalettes();
96
- return createLightResolvedColors(palettes);
97
- }
98
-
99
- export function createDarkColorMappings(): ThemeConfig['colors'] {
100
- const palettes = createDarkPalettes();
101
- return createDarkResolvedColors(palettes);
102
- }
103
-
104
- // Create default light theme using the explicit theme builder
105
- export function createDefaultLightTheme() {
106
- return createTheme({
107
- name: 'DefaultLight',
108
- mode: 'light',
109
- palettes: createStandardPalettes(),
110
- intents: createLightIntentMappings(),
111
- colors: createLightColorMappings(),
112
-
113
- typography: {
114
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
115
- },
116
-
117
- borderRadius: {
118
- sm: 4,
119
- md: 8,
120
- lg: 12,
121
- xl: 16,
122
- xxl: 20,
123
- },
124
-
125
- spacing: {
126
- xs: 4,
127
- sm: 8,
128
- md: 16,
129
- lg: 24,
130
- xl: 32,
131
- xxl: 40,
132
- xxxl: 48,
133
- },
134
-
135
- shadows: {
136
- sm: {
137
- shadowColor: '#000',
138
- shadowOffset: { width: 0, height: 1 },
139
- shadowOpacity: 0.05,
140
- shadowRadius: 2,
141
- elevation: 1,
142
- },
143
- md: {
144
- shadowColor: '#000',
145
- shadowOffset: { width: 0, height: 4 },
146
- shadowOpacity: 0.1,
147
- shadowRadius: 8,
148
- elevation: 4,
149
- },
150
- lg: {
151
- shadowColor: '#000',
152
- shadowOffset: { width: 0, height: 8 },
153
- shadowOpacity: 0.15,
154
- shadowRadius: 16,
155
- elevation: 8,
156
- },
157
- },
158
-
159
- transitions: {
160
- fast: '0.15s ease',
161
- base: '0.2s ease',
162
- slow: '0.3s ease',
163
- button: 'all 0.2s ease',
164
- fade: 'opacity 0.2s ease',
165
- slide: 'transform 0.3s ease',
166
- },
167
- });
168
- }
169
-
170
- // Create default dark theme using the explicit theme builder
171
- export function createDefaultDarkTheme() {
172
- return createTheme({
173
- name: 'DefaultDark',
174
- mode: 'dark',
175
- palettes: createDarkPalettes(),
176
- intents: createDarkIntentMappings(),
177
- colors: createDarkColorMappings(),
178
-
179
- typography: {
180
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
181
- },
182
-
183
- borderRadius: {
184
- sm: 4,
185
- md: 8,
186
- lg: 12,
187
- xl: 16,
188
- xxl: 20,
189
- },
190
-
191
- spacing: {
192
- xs: 4,
193
- sm: 8,
194
- md: 16,
195
- lg: 24,
196
- xl: 32,
197
- xxl: 40,
198
- xxxl: 48,
199
- },
200
-
201
- shadows: {
202
- sm: {
203
- shadowColor: '#000',
204
- shadowOffset: { width: 0, height: 1 },
205
- shadowOpacity: 0.2,
206
- shadowRadius: 2,
207
- elevation: 1,
208
- },
209
- md: {
210
- shadowColor: '#000',
211
- shadowOffset: { width: 0, height: 4 },
212
- shadowOpacity: 0.3,
213
- shadowRadius: 8,
214
- elevation: 4,
215
- },
216
- lg: {
217
- shadowColor: '#000',
218
- shadowOffset: { width: 0, height: 8 },
219
- shadowOpacity: 0.4,
220
- shadowRadius: 16,
221
- elevation: 8,
222
- },
223
- },
224
-
225
- transitions: {
226
- fast: '0.15s ease',
227
- base: '0.2s ease',
228
- slow: '0.3s ease',
229
- button: 'all 0.2s ease',
230
- fade: 'opacity 0.2s ease',
231
- slide: 'transform 0.3s ease',
232
- },
233
- });
234
- }
235
-
236
- // Export the created themes
237
- export const defaultLightTheme = createDefaultLightTheme();
1
+ import {
2
+ createTheme,
3
+ generateColorPalette,
4
+ createLightResolvedIntents,
5
+ createDarkResolvedIntents,
6
+ createLightResolvedColors,
7
+ createDarkResolvedColors,
8
+ type ThemeConfig
9
+ } from './themeBuilder';
10
+ import { commonThemeProperties } from './common';
11
+
12
+ // =============================================================================
13
+ // DEFAULT PALETTES
14
+ // =============================================================================
15
+
16
+ /**
17
+ * Helper function to create standard color palettes
18
+ */
19
+ export function createStandardPalettes(): ThemeConfig['palettes'] {
20
+ return {
21
+ red: generateColorPalette('#ef4444'),
22
+ orange: generateColorPalette('#f97316'),
23
+ yellow: generateColorPalette('#eab308'),
24
+ green: generateColorPalette('#22c55e'),
25
+ blue: generateColorPalette('#3b82f6'),
26
+ purple: generateColorPalette('#a855f7'),
27
+ black: generateColorPalette('#000000'),
28
+ gray: generateColorPalette('#6b7280'),
29
+ white: generateColorPalette('#ffffff'),
30
+ };
31
+ }
32
+
33
+ /**
34
+ * Helper function to create dark theme palettes with proper dark mode colors
35
+ */
36
+ export function createDarkPalettes(): ThemeConfig['palettes'] {
37
+ const basePalettes = createStandardPalettes();
38
+
39
+ return {
40
+ ...basePalettes,
41
+ // Adjusted gray palette for dark theme
42
+ gray: {
43
+ 50: '#18181b', // Very dark background
44
+ 100: '#27272a', // Dark surface
45
+ 200: '#3f3f46', // Medium dark
46
+ 300: '#52525b', // Medium
47
+ 400: '#71717a', // Medium light
48
+ 500: '#a1a1aa', // Light gray
49
+ 600: '#d4d4d8', // Lighter gray
50
+ 700: '#e4e4e7', // Very light gray
51
+ 800: '#f4f4f5', // Nearly white
52
+ 900: '#fafafa', // White
53
+ },
54
+ // Adjusted black palette for dark theme
55
+ black: {
56
+ 50: '#000000', // Pure black
57
+ 100: '#0a0a0a', // Very dark
58
+ 200: '#141414', // Dark
59
+ 300: '#1f1f1f', // Medium dark
60
+ 400: '#2a2a2a', // Medium
61
+ 500: '#3c3c3c', // Medium light
62
+ 600: '#525252', // Light
63
+ 700: '#737373', // Lighter
64
+ 800: '#a3a3a3', // Very light
65
+ 900: '#d4d4d4', // Nearly white
66
+ },
67
+ // Adjusted white palette for dark theme
68
+ white: {
69
+ 50: '#0c0c0c', // Very dark (inverted)
70
+ 100: '#171717', // Dark
71
+ 200: '#262626', // Medium dark
72
+ 300: '#404040', // Medium
73
+ 400: '#525252', // Medium light
74
+ 500: '#737373', // Light
75
+ 600: '#a3a3a3', // Lighter
76
+ 700: '#d4d4d4', // Very light
77
+ 800: '#f5f5f5', // Nearly white
78
+ 900: '#ffffff', // Pure white
79
+ },
80
+ };
81
+ }
82
+
83
+ // Convenience functions for complete theme creation
84
+ export function createLightIntentMappings(): ThemeConfig['intents'] {
85
+ const palettes = createStandardPalettes();
86
+ return createLightResolvedIntents(palettes);
87
+ }
88
+
89
+ export function createDarkIntentMappings(): ThemeConfig['intents'] {
90
+ const palettes = createDarkPalettes();
91
+ return createDarkResolvedIntents(palettes);
92
+ }
93
+
94
+ export function createLightColorMappings(): ThemeConfig['colors'] {
95
+ const palettes = createStandardPalettes();
96
+ return createLightResolvedColors(palettes);
97
+ }
98
+
99
+ export function createDarkColorMappings(): ThemeConfig['colors'] {
100
+ const palettes = createDarkPalettes();
101
+ return createDarkResolvedColors(palettes);
102
+ }
103
+
104
+ // Create default light theme using the explicit theme builder
105
+ export function createDefaultLightTheme() {
106
+ return createTheme({
107
+ name: 'DefaultLight',
108
+ mode: 'light',
109
+ palettes: createStandardPalettes(),
110
+ intents: createLightIntentMappings(),
111
+ colors: createLightColorMappings(),
112
+
113
+ typography: {
114
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
115
+ },
116
+
117
+ borderRadius: {
118
+ sm: 4,
119
+ md: 8,
120
+ lg: 12,
121
+ xl: 16,
122
+ xxl: 20,
123
+ },
124
+
125
+ spacing: {
126
+ xs: 4,
127
+ sm: 8,
128
+ md: 16,
129
+ lg: 24,
130
+ xl: 32,
131
+ xxl: 40,
132
+ xxxl: 48,
133
+ },
134
+
135
+ shadows: {
136
+ sm: {
137
+ shadowColor: '#000',
138
+ shadowOffset: { width: 0, height: 1 },
139
+ shadowOpacity: 0.05,
140
+ shadowRadius: 2,
141
+ elevation: 1,
142
+ },
143
+ md: {
144
+ shadowColor: '#000',
145
+ shadowOffset: { width: 0, height: 4 },
146
+ shadowOpacity: 0.1,
147
+ shadowRadius: 8,
148
+ elevation: 4,
149
+ },
150
+ lg: {
151
+ shadowColor: '#000',
152
+ shadowOffset: { width: 0, height: 8 },
153
+ shadowOpacity: 0.15,
154
+ shadowRadius: 16,
155
+ elevation: 8,
156
+ },
157
+ },
158
+
159
+ transitions: {
160
+ fast: '0.15s ease',
161
+ base: '0.2s ease',
162
+ slow: '0.3s ease',
163
+ button: 'all 0.2s ease',
164
+ fade: 'opacity 0.2s ease',
165
+ slide: 'transform 0.3s ease',
166
+ },
167
+ });
168
+ }
169
+
170
+ // Create default dark theme using the explicit theme builder
171
+ export function createDefaultDarkTheme() {
172
+ return createTheme({
173
+ name: 'DefaultDark',
174
+ mode: 'dark',
175
+ palettes: createDarkPalettes(),
176
+ intents: createDarkIntentMappings(),
177
+ colors: createDarkColorMappings(),
178
+
179
+ typography: {
180
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
181
+ },
182
+
183
+ borderRadius: {
184
+ sm: 4,
185
+ md: 8,
186
+ lg: 12,
187
+ xl: 16,
188
+ xxl: 20,
189
+ },
190
+
191
+ spacing: {
192
+ xs: 4,
193
+ sm: 8,
194
+ md: 16,
195
+ lg: 24,
196
+ xl: 32,
197
+ xxl: 40,
198
+ xxxl: 48,
199
+ },
200
+
201
+ shadows: {
202
+ sm: {
203
+ shadowColor: '#000',
204
+ shadowOffset: { width: 0, height: 1 },
205
+ shadowOpacity: 0.2,
206
+ shadowRadius: 2,
207
+ elevation: 1,
208
+ },
209
+ md: {
210
+ shadowColor: '#000',
211
+ shadowOffset: { width: 0, height: 4 },
212
+ shadowOpacity: 0.3,
213
+ shadowRadius: 8,
214
+ elevation: 4,
215
+ },
216
+ lg: {
217
+ shadowColor: '#000',
218
+ shadowOffset: { width: 0, height: 8 },
219
+ shadowOpacity: 0.4,
220
+ shadowRadius: 16,
221
+ elevation: 8,
222
+ },
223
+ },
224
+
225
+ transitions: {
226
+ fast: '0.15s ease',
227
+ base: '0.2s ease',
228
+ slow: '0.3s ease',
229
+ button: 'all 0.2s ease',
230
+ fade: 'opacity 0.2s ease',
231
+ slide: 'transform 0.3s ease',
232
+ },
233
+ });
234
+ }
235
+
236
+ // Export the created themes
237
+ export const defaultLightTheme = createDefaultLightTheme();
238
238
  export const defaultDarkTheme = createDefaultDarkTheme();