@latte-macchiat-io/latte-vanilla-components 0.0.179 → 0.0.180

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/utils/theme.ts +23 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.179",
3
+ "version": "0.0.180",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
@@ -1,4 +1,6 @@
1
+ import { createGlobalTheme } from '@vanilla-extract/css';
1
2
  import { baseDarkTheme, baseLightTheme } from '../theme/baseThemeValues';
3
+ import { themeContract } from '../theme/contract.css';
2
4
 
3
5
  // Type for partial theme overrides
4
6
  export type ThemeOverrides = {
@@ -6,19 +8,19 @@ export type ThemeOverrides = {
6
8
  space?: Partial<typeof baseLightTheme.space>;
7
9
  radii?: Partial<typeof baseLightTheme.radii>;
8
10
  fonts?: Partial<typeof baseLightTheme.fonts>;
9
- maxWidth?: string;
11
+ maxWidth?: Partial<typeof baseLightTheme.maxWidth>;
10
12
  fontSizes?: 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>;
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>;
17
19
  };
18
20
 
19
- // Utility to create a theme object with partial overrides over light theme base
20
- const createAppTheme = (overrides: ThemeOverrides = {}) => {
21
- return {
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, {
22
24
  colors: {
23
25
  ...baseLightTheme.colors,
24
26
  ...overrides.colors,
@@ -35,7 +37,7 @@ const createAppTheme = (overrides: ThemeOverrides = {}) => {
35
37
  ...baseLightTheme.fonts,
36
38
  ...overrides.fonts,
37
39
  },
38
- maxWidth: overrides.maxWidth || `${baseLightTheme.maxWidth}px`,
40
+ maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
39
41
  fontSizes: {
40
42
  ...baseLightTheme.fontSizes,
41
43
  ...overrides.fontSizes,
@@ -64,12 +66,12 @@ const createAppTheme = (overrides: ThemeOverrides = {}) => {
64
66
  ...baseLightTheme.footer,
65
67
  ...overrides.footer,
66
68
  },
67
- };
69
+ });
68
70
  };
69
71
 
70
- // Utility to create a theme object with partial overrides over dark theme base
71
- const createAppDarkTheme = (overrides: ThemeOverrides = {}) => {
72
- return {
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, {
73
75
  colors: {
74
76
  ...baseDarkTheme.colors,
75
77
  ...overrides.colors,
@@ -115,15 +117,15 @@ const createAppDarkTheme = (overrides: ThemeOverrides = {}) => {
115
117
  ...baseDarkTheme.footer,
116
118
  ...overrides.footer,
117
119
  },
118
- };
120
+ });
119
121
  };
120
122
 
121
- // Returns theme object for light theme - consuming app must call createGlobalTheme
123
+ // Convenience function for light theme (extends base light theme)
122
124
  export const createLightTheme = (overrides: ThemeOverrides = {}) => {
123
- return createAppTheme(overrides);
125
+ return createAppTheme('html', overrides);
124
126
  };
125
127
 
126
- // Returns theme object for dark theme - consuming app must call createGlobalTheme
128
+ // Convenience function for dark theme (extends base dark theme)
127
129
  export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
128
- return createAppDarkTheme(overrides);
129
- };
130
+ return createAppDarkTheme('html[data-theme="dark"]', overrides);
131
+ };