@latte-macchiat-io/latte-vanilla-components 0.0.172 → 0.0.174

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 (12) hide show
  1. package/dist/components/Actions/Actions.css.ts +1 -1
  2. package/dist/index.cjs.js +2 -2
  3. package/dist/index.es.js +738 -737
  4. package/dist/types/components/ToRemove/ToRemove.d.ts +1 -0
  5. package/dist/types/index.d.ts +4 -0
  6. package/dist/types/utils/theme.css.d.ts +165 -9
  7. package/dist/utils/theme.css.ts +28 -30
  8. package/package.json +1 -1
  9. package/src/components/Actions/Actions.css.ts +1 -1
  10. package/src/utils/theme.css.ts +28 -30
  11. package/dist/theme/default.css.ts +0 -9
  12. package/src/theme/default.css.ts +0 -9
package/dist/types/components/ToRemove/ToRemove.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const ToRemove: () => import("react").JSX.Element;
package/dist/types/index.d.ts CHANGED
@@ -51,4 +51,8 @@ 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 { ToRemove } from './components/ToRemove/ToRemove';
54
55
  export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme.css';
56
+ export { themeContract } from './theme/contract.css';
57
+ export { baseLightTheme, baseDarkTheme } from './theme/baseThemeValues';
58
+ export { createThemeOverride, getThemeContract, getThemeValues, toggleTheme, setTheme, getCurrentTheme, type ThemeValues } from './theme/utils';
package/dist/types/utils/theme.css.d.ts CHANGED
@@ -4,14 +4,170 @@ export type ThemeOverrides = {
4
4
  space?: Partial<typeof baseLightTheme.space>;
5
5
  radii?: Partial<typeof baseLightTheme.radii>;
6
6
  fonts?: Partial<typeof baseLightTheme.fonts>;
7
- maxWidth?: Partial<typeof baseLightTheme.maxWidth>;
7
+ maxWidth?: string;
8
8
  fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
9
- fontWeights?: Partial<typeof baseLightTheme.fontSizes>;
10
- lineHeights?: Partial<typeof baseLightTheme.fontSizes>;
11
- shadows?: Partial<typeof baseLightTheme.fontSizes>;
12
- section?: Partial<typeof baseLightTheme.fontSizes>;
13
- header?: Partial<typeof baseLightTheme.fontSizes>;
14
- footer?: Partial<typeof baseLightTheme.fontSizes>;
9
+ fontWeights?: Partial<typeof baseLightTheme.fontWeights>;
10
+ lineHeights?: Partial<typeof baseLightTheme.lineHeights>;
11
+ shadows?: Partial<typeof baseLightTheme.shadows>;
12
+ section?: Partial<typeof baseLightTheme.section>;
13
+ header?: Partial<typeof baseLightTheme.header>;
14
+ footer?: Partial<typeof baseLightTheme.footer>;
15
+ };
16
+ export declare const createLightTheme: (overrides?: ThemeOverrides) => {
17
+ colors: {
18
+ primary: string;
19
+ secondary: string;
20
+ accent: string;
21
+ background: string;
22
+ surface: string;
23
+ text: string;
24
+ textSecondary: string;
25
+ textLight: string;
26
+ border: string;
27
+ error: string;
28
+ warning: string;
29
+ success: string;
30
+ info: string;
31
+ };
32
+ space: {
33
+ none: string;
34
+ xs: string;
35
+ sm: string;
36
+ md: string;
37
+ lg: string;
38
+ xl: string;
39
+ '2xl': string;
40
+ };
41
+ radii: {
42
+ none: string;
43
+ sm: string;
44
+ md: string;
45
+ lg: string;
46
+ xl: string;
47
+ full: string;
48
+ };
49
+ fonts: {
50
+ body: string;
51
+ heading: string;
52
+ mono: string;
53
+ };
54
+ maxWidth: string;
55
+ fontSizes: {
56
+ xs: string;
57
+ sm: string;
58
+ md: string;
59
+ lg: string;
60
+ xl: string;
61
+ '2xl': string;
62
+ '3xl': string;
63
+ '4xl': string;
64
+ };
65
+ fontWeights: {
66
+ light: string;
67
+ normal: string;
68
+ medium: string;
69
+ semibold: string;
70
+ bold: string;
71
+ };
72
+ lineHeights: {
73
+ tight: string;
74
+ normal: string;
75
+ relaxed: string;
76
+ };
77
+ shadows: {
78
+ none: string;
79
+ sm: string;
80
+ md: string;
81
+ lg: string;
82
+ xl: string;
83
+ };
84
+ section: {
85
+ paddingTop: string;
86
+ paddingBottom: string;
87
+ };
88
+ header: {
89
+ height: string;
90
+ };
91
+ footer: {
92
+ height: string;
93
+ };
94
+ };
95
+ export declare const createDarkTheme: (overrides?: ThemeOverrides) => {
96
+ colors: {
97
+ primary: string;
98
+ secondary: string;
99
+ accent: string;
100
+ background: string;
101
+ surface: string;
102
+ text: string;
103
+ textSecondary: string;
104
+ textLight: string;
105
+ border: string;
106
+ error: string;
107
+ warning: string;
108
+ success: string;
109
+ info: string;
110
+ };
111
+ space: {
112
+ none: string;
113
+ xs: string;
114
+ sm: string;
115
+ md: string;
116
+ lg: string;
117
+ xl: string;
118
+ '2xl': string;
119
+ };
120
+ radii: {
121
+ none: string;
122
+ sm: string;
123
+ md: string;
124
+ lg: string;
125
+ xl: string;
126
+ full: string;
127
+ };
128
+ fonts: {
129
+ body: string;
130
+ heading: string;
131
+ mono: string;
132
+ };
133
+ maxWidth: string;
134
+ fontSizes: {
135
+ xs: string;
136
+ sm: string;
137
+ md: string;
138
+ lg: string;
139
+ xl: string;
140
+ '2xl': string;
141
+ '3xl': string;
142
+ '4xl': string;
143
+ };
144
+ fontWeights: {
145
+ light: string;
146
+ normal: string;
147
+ medium: string;
148
+ semibold: string;
149
+ bold: string;
150
+ };
151
+ lineHeights: {
152
+ tight: string;
153
+ normal: string;
154
+ relaxed: string;
155
+ };
156
+ shadows: {
157
+ none: string;
158
+ sm: string;
159
+ md: string;
160
+ lg: string;
161
+ xl: string;
162
+ };
163
+ section: {
164
+ paddingTop: string;
165
+ paddingBottom: string;
166
+ };
167
+ header: {
168
+ height: string;
169
+ };
170
+ footer: {
171
+ height: string;
172
+ };
15
173
  };
16
- export declare const createLightTheme: (overrides?: ThemeOverrides) => void;
17
- export declare const createDarkTheme: (overrides?: ThemeOverrides) => void;
package/dist/utils/theme.css.ts CHANGED
@@ -1,6 +1,4 @@
1
- import { createGlobalTheme } from '@vanilla-extract/css';
2
1
  import { baseDarkTheme, baseLightTheme } from '../theme/baseThemeValues';
3
- import { themeContract } from '../theme/contract.css';
4
2
 
5
3
  // Type for partial theme overrides
6
4
  export type ThemeOverrides = {
@@ -8,19 +6,19 @@ export type ThemeOverrides = {
8
6
  space?: Partial<typeof baseLightTheme.space>;
9
7
  radii?: Partial<typeof baseLightTheme.radii>;
10
8
  fonts?: Partial<typeof baseLightTheme.fonts>;
11
- maxWidth?: Partial<typeof baseLightTheme.maxWidth>;
9
+ maxWidth?: string;
12
10
  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>;
11
+ fontWeights?: Partial<typeof baseLightTheme.fontWeights>;
12
+ lineHeights?: Partial<typeof baseLightTheme.lineHeights>;
13
+ shadows?: Partial<typeof baseLightTheme.shadows>;
14
+ section?: Partial<typeof baseLightTheme.section>;
15
+ header?: Partial<typeof baseLightTheme.header>;
16
+ footer?: Partial<typeof baseLightTheme.footer>;
19
17
  };
20
18
 
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, {
19
+ // Utility to create a theme object with partial overrides over light theme base
20
+ const createAppTheme = (overrides: ThemeOverrides = {}) => {
21
+ return {
24
22
  colors: {
25
23
  ...baseLightTheme.colors,
26
24
  ...overrides.colors,
@@ -37,7 +35,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
37
35
  ...baseLightTheme.fonts,
38
36
  ...overrides.fonts,
39
37
  },
40
- maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
38
+ maxWidth: overrides.maxWidth || `${baseLightTheme.maxWidth}px`,
41
39
  fontSizes: {
42
40
  ...baseLightTheme.fontSizes,
43
41
  ...overrides.fontSizes,
@@ -66,12 +64,12 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
66
64
  ...baseLightTheme.footer,
67
65
  ...overrides.footer,
68
66
  },
69
- });
67
+ };
70
68
  };
71
69
 
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, {
70
+ // Utility to create a theme object with partial overrides over dark theme base
71
+ const createAppDarkTheme = (overrides: ThemeOverrides = {}) => {
72
+ return {
75
73
  colors: {
76
74
  ...baseDarkTheme.colors,
77
75
  ...overrides.colors,
@@ -88,44 +86,44 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
88
86
  ...baseDarkTheme.fonts,
89
87
  ...overrides.fonts,
90
88
  },
91
- maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
89
+ maxWidth: overrides.maxWidth || `${baseDarkTheme.maxWidth}px`,
92
90
  fontSizes: {
93
- ...baseLightTheme.fontSizes,
91
+ ...baseDarkTheme.fontSizes,
94
92
  ...overrides.fontSizes,
95
93
  },
96
94
  fontWeights: {
97
- ...baseLightTheme.fontWeights,
95
+ ...baseDarkTheme.fontWeights,
98
96
  ...overrides.fontWeights,
99
97
  },
100
98
  lineHeights: {
101
- ...baseLightTheme.lineHeights,
99
+ ...baseDarkTheme.lineHeights,
102
100
  ...overrides.lineHeights,
103
101
  },
104
102
  shadows: {
105
- ...baseLightTheme.shadows,
103
+ ...baseDarkTheme.shadows,
106
104
  ...overrides.shadows,
107
105
  },
108
106
  section: {
109
- ...baseLightTheme.section,
107
+ ...baseDarkTheme.section,
110
108
  ...overrides.section,
111
109
  },
112
110
  header: {
113
- ...baseLightTheme.header,
111
+ ...baseDarkTheme.header,
114
112
  ...overrides.header,
115
113
  },
116
114
  footer: {
117
- ...baseLightTheme.footer,
115
+ ...baseDarkTheme.footer,
118
116
  ...overrides.footer,
119
117
  },
120
- });
118
+ };
121
119
  };
122
120
 
123
- // Convenience function for light theme (extends base light theme)
121
+ // Returns theme object for light theme - consuming app must call createGlobalTheme
124
122
  export const createLightTheme = (overrides: ThemeOverrides = {}) => {
125
- return createAppTheme('html', overrides);
123
+ return createAppTheme(overrides);
126
124
  };
127
125
 
128
- // Convenience function for dark theme (extends base dark theme)
126
+ // Returns theme object for dark theme - consuming app must call createGlobalTheme
129
127
  export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
130
- return createAppDarkTheme('html[data-theme="dark"]', overrides);
128
+ return createAppDarkTheme(overrides);
131
129
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.172",
3
+ "version": "0.0.174",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",
package/src/components/Actions/Actions.css.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { queries } from '../../styles/mediaqueries';
4
3
  import { themeContract } from '../../theme';
4
+ import { queries } from '../../styles/mediaqueries';
5
5
 
6
6
  const actionsBase = style({
7
7
  display: 'flex',
package/src/utils/theme.css.ts CHANGED
@@ -1,6 +1,4 @@
1
- import { createGlobalTheme } from '@vanilla-extract/css';
2
1
  import { baseDarkTheme, baseLightTheme } from '../theme/baseThemeValues';
3
- import { themeContract } from '../theme/contract.css';
4
2
 
5
3
  // Type for partial theme overrides
6
4
  export type ThemeOverrides = {
@@ -8,19 +6,19 @@ export type ThemeOverrides = {
8
6
  space?: Partial<typeof baseLightTheme.space>;
9
7
  radii?: Partial<typeof baseLightTheme.radii>;
10
8
  fonts?: Partial<typeof baseLightTheme.fonts>;
11
- maxWidth?: Partial<typeof baseLightTheme.maxWidth>;
9
+ maxWidth?: string;
12
10
  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>;
11
+ fontWeights?: Partial<typeof baseLightTheme.fontWeights>;
12
+ lineHeights?: Partial<typeof baseLightTheme.lineHeights>;
13
+ shadows?: Partial<typeof baseLightTheme.shadows>;
14
+ section?: Partial<typeof baseLightTheme.section>;
15
+ header?: Partial<typeof baseLightTheme.header>;
16
+ footer?: Partial<typeof baseLightTheme.footer>;
19
17
  };
20
18
 
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, {
19
+ // Utility to create a theme object with partial overrides over light theme base
20
+ const createAppTheme = (overrides: ThemeOverrides = {}) => {
21
+ return {
24
22
  colors: {
25
23
  ...baseLightTheme.colors,
26
24
  ...overrides.colors,
@@ -37,7 +35,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
37
35
  ...baseLightTheme.fonts,
38
36
  ...overrides.fonts,
39
37
  },
40
- maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
38
+ maxWidth: overrides.maxWidth || `${baseLightTheme.maxWidth}px`,
41
39
  fontSizes: {
42
40
  ...baseLightTheme.fontSizes,
43
41
  ...overrides.fontSizes,
@@ -66,12 +64,12 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
66
64
  ...baseLightTheme.footer,
67
65
  ...overrides.footer,
68
66
  },
69
- });
67
+ };
70
68
  };
71
69
 
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, {
70
+ // Utility to create a theme object with partial overrides over dark theme base
71
+ const createAppDarkTheme = (overrides: ThemeOverrides = {}) => {
72
+ return {
75
73
  colors: {
76
74
  ...baseDarkTheme.colors,
77
75
  ...overrides.colors,
@@ -88,44 +86,44 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
88
86
  ...baseDarkTheme.fonts,
89
87
  ...overrides.fonts,
90
88
  },
91
- maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
89
+ maxWidth: overrides.maxWidth || `${baseDarkTheme.maxWidth}px`,
92
90
  fontSizes: {
93
- ...baseLightTheme.fontSizes,
91
+ ...baseDarkTheme.fontSizes,
94
92
  ...overrides.fontSizes,
95
93
  },
96
94
  fontWeights: {
97
- ...baseLightTheme.fontWeights,
95
+ ...baseDarkTheme.fontWeights,
98
96
  ...overrides.fontWeights,
99
97
  },
100
98
  lineHeights: {
101
- ...baseLightTheme.lineHeights,
99
+ ...baseDarkTheme.lineHeights,
102
100
  ...overrides.lineHeights,
103
101
  },
104
102
  shadows: {
105
- ...baseLightTheme.shadows,
103
+ ...baseDarkTheme.shadows,
106
104
  ...overrides.shadows,
107
105
  },
108
106
  section: {
109
- ...baseLightTheme.section,
107
+ ...baseDarkTheme.section,
110
108
  ...overrides.section,
111
109
  },
112
110
  header: {
113
- ...baseLightTheme.header,
111
+ ...baseDarkTheme.header,
114
112
  ...overrides.header,
115
113
  },
116
114
  footer: {
117
- ...baseLightTheme.footer,
115
+ ...baseDarkTheme.footer,
118
116
  ...overrides.footer,
119
117
  },
120
- });
118
+ };
121
119
  };
122
120
 
123
- // Convenience function for light theme (extends base light theme)
121
+ // Returns theme object for light theme - consuming app must call createGlobalTheme
124
122
  export const createLightTheme = (overrides: ThemeOverrides = {}) => {
125
- return createAppTheme('html', overrides);
123
+ return createAppTheme(overrides);
126
124
  };
127
125
 
128
- // Convenience function for dark theme (extends base dark theme)
126
+ // Returns theme object for dark theme - consuming app must call createGlobalTheme
129
127
  export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
130
- return createAppDarkTheme('html[data-theme="dark"]', overrides);
128
+ return createAppDarkTheme(overrides);
131
129
  };
package/dist/theme/default.css.ts DELETED
@@ -1,9 +0,0 @@
1
- import { createGlobalTheme } from '@vanilla-extract/css';
2
- import { baseDarkTheme, baseLightTheme } from './baseThemeValues';
3
- import { themeContract } from './contract.css';
4
-
5
- // Create the default light theme at the root
6
- createGlobalTheme('html', themeContract, baseLightTheme);
7
-
8
- // Apply dark theme when data-theme="dark"
9
- createGlobalTheme('html[data-theme="dark"]', themeContract, baseDarkTheme);
package/src/theme/default.css.ts DELETED
@@ -1,9 +0,0 @@
1
- import { createGlobalTheme } from '@vanilla-extract/css';
2
- import { baseDarkTheme, baseLightTheme } from './baseThemeValues';
3
- import { themeContract } from './contract.css';
4
-
5
- // Create the default light theme at the root
6
- createGlobalTheme('html', themeContract, baseLightTheme);
7
-
8
- // Apply dark theme when data-theme="dark"
9
- createGlobalTheme('html[data-theme="dark"]', themeContract, baseDarkTheme);