@latte-macchiat-io/latte-vanilla-components 0.0.171 → 0.0.172
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/types/index.d.ts
CHANGED
|
@@ -51,4 +51,4 @@ export { Input, type InputProps, type InputType as InputFieldType } from './comp
|
|
|
51
51
|
export { type InputVariants } from './components/Form/TextField/Input/Input.css';
|
|
52
52
|
export { Textarea, type TextareaProps } from './components/Form/TextField/Textarea/Textarea';
|
|
53
53
|
export { type TextareaVariants } from './components/Form/TextField/Textarea/Textarea.css';
|
|
54
|
-
export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme';
|
|
54
|
+
export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme.css';
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { createGlobalTheme } from '@vanilla-extract/css';
|
|
2
|
+
import { baseDarkTheme, baseLightTheme } from '../theme/baseThemeValues';
|
|
3
|
+
import { themeContract } from '../theme/contract.css';
|
|
4
|
+
|
|
5
|
+
// Type for partial theme overrides
|
|
6
|
+
export type ThemeOverrides = {
|
|
7
|
+
colors?: Partial<typeof baseLightTheme.colors>;
|
|
8
|
+
space?: Partial<typeof baseLightTheme.space>;
|
|
9
|
+
radii?: Partial<typeof baseLightTheme.radii>;
|
|
10
|
+
fonts?: Partial<typeof baseLightTheme.fonts>;
|
|
11
|
+
maxWidth?: Partial<typeof baseLightTheme.maxWidth>;
|
|
12
|
+
fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
|
|
13
|
+
fontWeights?: Partial<typeof baseLightTheme.fontSizes>;
|
|
14
|
+
lineHeights?: Partial<typeof baseLightTheme.fontSizes>;
|
|
15
|
+
shadows?: Partial<typeof baseLightTheme.fontSizes>;
|
|
16
|
+
section?: Partial<typeof baseLightTheme.fontSizes>;
|
|
17
|
+
header?: Partial<typeof baseLightTheme.fontSizes>;
|
|
18
|
+
footer?: Partial<typeof baseLightTheme.fontSizes>;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
// Utility to create a theme with partial overrides over light theme base
|
|
22
|
+
const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
|
|
23
|
+
return createGlobalTheme(selector, themeContract, {
|
|
24
|
+
colors: {
|
|
25
|
+
...baseLightTheme.colors,
|
|
26
|
+
...overrides.colors,
|
|
27
|
+
},
|
|
28
|
+
space: {
|
|
29
|
+
...baseLightTheme.space,
|
|
30
|
+
...overrides.space,
|
|
31
|
+
},
|
|
32
|
+
radii: {
|
|
33
|
+
...baseLightTheme.radii,
|
|
34
|
+
...overrides.radii,
|
|
35
|
+
},
|
|
36
|
+
fonts: {
|
|
37
|
+
...baseLightTheme.fonts,
|
|
38
|
+
...overrides.fonts,
|
|
39
|
+
},
|
|
40
|
+
maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
|
|
41
|
+
fontSizes: {
|
|
42
|
+
...baseLightTheme.fontSizes,
|
|
43
|
+
...overrides.fontSizes,
|
|
44
|
+
},
|
|
45
|
+
fontWeights: {
|
|
46
|
+
...baseLightTheme.fontWeights,
|
|
47
|
+
...overrides.fontWeights,
|
|
48
|
+
},
|
|
49
|
+
lineHeights: {
|
|
50
|
+
...baseLightTheme.lineHeights,
|
|
51
|
+
...overrides.lineHeights,
|
|
52
|
+
},
|
|
53
|
+
shadows: {
|
|
54
|
+
...baseLightTheme.shadows,
|
|
55
|
+
...overrides.shadows,
|
|
56
|
+
},
|
|
57
|
+
section: {
|
|
58
|
+
...baseLightTheme.section,
|
|
59
|
+
...overrides.section,
|
|
60
|
+
},
|
|
61
|
+
header: {
|
|
62
|
+
...baseLightTheme.header,
|
|
63
|
+
...overrides.header,
|
|
64
|
+
},
|
|
65
|
+
footer: {
|
|
66
|
+
...baseLightTheme.footer,
|
|
67
|
+
...overrides.footer,
|
|
68
|
+
},
|
|
69
|
+
});
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
// Utility to create a theme with partial overrides over dark theme base
|
|
73
|
+
const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) => {
|
|
74
|
+
return createGlobalTheme(selector, themeContract, {
|
|
75
|
+
colors: {
|
|
76
|
+
...baseDarkTheme.colors,
|
|
77
|
+
...overrides.colors,
|
|
78
|
+
},
|
|
79
|
+
space: {
|
|
80
|
+
...baseDarkTheme.space,
|
|
81
|
+
...overrides.space,
|
|
82
|
+
},
|
|
83
|
+
radii: {
|
|
84
|
+
...baseDarkTheme.radii,
|
|
85
|
+
...overrides.radii,
|
|
86
|
+
},
|
|
87
|
+
fonts: {
|
|
88
|
+
...baseDarkTheme.fonts,
|
|
89
|
+
...overrides.fonts,
|
|
90
|
+
},
|
|
91
|
+
maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
|
|
92
|
+
fontSizes: {
|
|
93
|
+
...baseLightTheme.fontSizes,
|
|
94
|
+
...overrides.fontSizes,
|
|
95
|
+
},
|
|
96
|
+
fontWeights: {
|
|
97
|
+
...baseLightTheme.fontWeights,
|
|
98
|
+
...overrides.fontWeights,
|
|
99
|
+
},
|
|
100
|
+
lineHeights: {
|
|
101
|
+
...baseLightTheme.lineHeights,
|
|
102
|
+
...overrides.lineHeights,
|
|
103
|
+
},
|
|
104
|
+
shadows: {
|
|
105
|
+
...baseLightTheme.shadows,
|
|
106
|
+
...overrides.shadows,
|
|
107
|
+
},
|
|
108
|
+
section: {
|
|
109
|
+
...baseLightTheme.section,
|
|
110
|
+
...overrides.section,
|
|
111
|
+
},
|
|
112
|
+
header: {
|
|
113
|
+
...baseLightTheme.header,
|
|
114
|
+
...overrides.header,
|
|
115
|
+
},
|
|
116
|
+
footer: {
|
|
117
|
+
...baseLightTheme.footer,
|
|
118
|
+
...overrides.footer,
|
|
119
|
+
},
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
// Convenience function for light theme (extends base light theme)
|
|
124
|
+
export const createLightTheme = (overrides: ThemeOverrides = {}) => {
|
|
125
|
+
return createAppTheme('html', overrides);
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
// Convenience function for dark theme (extends base dark theme)
|
|
129
|
+
export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
|
|
130
|
+
return createAppDarkTheme('html[data-theme="dark"]', overrides);
|
|
131
|
+
};
|
package/package.json
CHANGED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { createGlobalTheme } from '@vanilla-extract/css';
|
|
2
|
+
import { baseDarkTheme, baseLightTheme } from '../theme/baseThemeValues';
|
|
3
|
+
import { themeContract } from '../theme/contract.css';
|
|
4
|
+
|
|
5
|
+
// Type for partial theme overrides
|
|
6
|
+
export type ThemeOverrides = {
|
|
7
|
+
colors?: Partial<typeof baseLightTheme.colors>;
|
|
8
|
+
space?: Partial<typeof baseLightTheme.space>;
|
|
9
|
+
radii?: Partial<typeof baseLightTheme.radii>;
|
|
10
|
+
fonts?: Partial<typeof baseLightTheme.fonts>;
|
|
11
|
+
maxWidth?: Partial<typeof baseLightTheme.maxWidth>;
|
|
12
|
+
fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
|
|
13
|
+
fontWeights?: Partial<typeof baseLightTheme.fontSizes>;
|
|
14
|
+
lineHeights?: Partial<typeof baseLightTheme.fontSizes>;
|
|
15
|
+
shadows?: Partial<typeof baseLightTheme.fontSizes>;
|
|
16
|
+
section?: Partial<typeof baseLightTheme.fontSizes>;
|
|
17
|
+
header?: Partial<typeof baseLightTheme.fontSizes>;
|
|
18
|
+
footer?: Partial<typeof baseLightTheme.fontSizes>;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
// Utility to create a theme with partial overrides over light theme base
|
|
22
|
+
const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
|
|
23
|
+
return createGlobalTheme(selector, themeContract, {
|
|
24
|
+
colors: {
|
|
25
|
+
...baseLightTheme.colors,
|
|
26
|
+
...overrides.colors,
|
|
27
|
+
},
|
|
28
|
+
space: {
|
|
29
|
+
...baseLightTheme.space,
|
|
30
|
+
...overrides.space,
|
|
31
|
+
},
|
|
32
|
+
radii: {
|
|
33
|
+
...baseLightTheme.radii,
|
|
34
|
+
...overrides.radii,
|
|
35
|
+
},
|
|
36
|
+
fonts: {
|
|
37
|
+
...baseLightTheme.fonts,
|
|
38
|
+
...overrides.fonts,
|
|
39
|
+
},
|
|
40
|
+
maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
|
|
41
|
+
fontSizes: {
|
|
42
|
+
...baseLightTheme.fontSizes,
|
|
43
|
+
...overrides.fontSizes,
|
|
44
|
+
},
|
|
45
|
+
fontWeights: {
|
|
46
|
+
...baseLightTheme.fontWeights,
|
|
47
|
+
...overrides.fontWeights,
|
|
48
|
+
},
|
|
49
|
+
lineHeights: {
|
|
50
|
+
...baseLightTheme.lineHeights,
|
|
51
|
+
...overrides.lineHeights,
|
|
52
|
+
},
|
|
53
|
+
shadows: {
|
|
54
|
+
...baseLightTheme.shadows,
|
|
55
|
+
...overrides.shadows,
|
|
56
|
+
},
|
|
57
|
+
section: {
|
|
58
|
+
...baseLightTheme.section,
|
|
59
|
+
...overrides.section,
|
|
60
|
+
},
|
|
61
|
+
header: {
|
|
62
|
+
...baseLightTheme.header,
|
|
63
|
+
...overrides.header,
|
|
64
|
+
},
|
|
65
|
+
footer: {
|
|
66
|
+
...baseLightTheme.footer,
|
|
67
|
+
...overrides.footer,
|
|
68
|
+
},
|
|
69
|
+
});
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
// Utility to create a theme with partial overrides over dark theme base
|
|
73
|
+
const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) => {
|
|
74
|
+
return createGlobalTheme(selector, themeContract, {
|
|
75
|
+
colors: {
|
|
76
|
+
...baseDarkTheme.colors,
|
|
77
|
+
...overrides.colors,
|
|
78
|
+
},
|
|
79
|
+
space: {
|
|
80
|
+
...baseDarkTheme.space,
|
|
81
|
+
...overrides.space,
|
|
82
|
+
},
|
|
83
|
+
radii: {
|
|
84
|
+
...baseDarkTheme.radii,
|
|
85
|
+
...overrides.radii,
|
|
86
|
+
},
|
|
87
|
+
fonts: {
|
|
88
|
+
...baseDarkTheme.fonts,
|
|
89
|
+
...overrides.fonts,
|
|
90
|
+
},
|
|
91
|
+
maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
|
|
92
|
+
fontSizes: {
|
|
93
|
+
...baseLightTheme.fontSizes,
|
|
94
|
+
...overrides.fontSizes,
|
|
95
|
+
},
|
|
96
|
+
fontWeights: {
|
|
97
|
+
...baseLightTheme.fontWeights,
|
|
98
|
+
...overrides.fontWeights,
|
|
99
|
+
},
|
|
100
|
+
lineHeights: {
|
|
101
|
+
...baseLightTheme.lineHeights,
|
|
102
|
+
...overrides.lineHeights,
|
|
103
|
+
},
|
|
104
|
+
shadows: {
|
|
105
|
+
...baseLightTheme.shadows,
|
|
106
|
+
...overrides.shadows,
|
|
107
|
+
},
|
|
108
|
+
section: {
|
|
109
|
+
...baseLightTheme.section,
|
|
110
|
+
...overrides.section,
|
|
111
|
+
},
|
|
112
|
+
header: {
|
|
113
|
+
...baseLightTheme.header,
|
|
114
|
+
...overrides.header,
|
|
115
|
+
},
|
|
116
|
+
footer: {
|
|
117
|
+
...baseLightTheme.footer,
|
|
118
|
+
...overrides.footer,
|
|
119
|
+
},
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
// Convenience function for light theme (extends base light theme)
|
|
124
|
+
export const createLightTheme = (overrides: ThemeOverrides = {}) => {
|
|
125
|
+
return createAppTheme('html', overrides);
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
// Convenience function for dark theme (extends base dark theme)
|
|
129
|
+
export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
|
|
130
|
+
return createAppDarkTheme('html[data-theme="dark"]', overrides);
|
|
131
|
+
};
|
|
File without changes
|