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

package/dist/types/components/Form/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
-import { Sprinkles } from '../../../styles/sprinkles.css';
 import { TextFieldVariants } from './TextField.css';
+import { Sprinkles } from '../../../styles/sprinkles.css';
 export type InputType = 'text' | 'email' | 'search' | 'number' | 'hidden' | 'password' | 'textarea';
 export interface TextFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'>, Sprinkles, NonNullable<TextFieldVariants> {
     css?: string;

package/dist/types/components/Header/HeaderOverlay/index.d.ts

@@ -1,9 +1,7 @@
-import { Theme } from '../../../types/theme';
 import { WithClassName } from '../../../types/withClassName';
 export interface HeaderOverlayProps {
-    theme: Theme;
     isOpen: boolean;
     children: React.ReactNode;
 }
-declare const HeaderOverlay: ({ theme, isOpen, children, className }: HeaderOverlayProps & WithClassName) => import("react").JSX.Element;
+declare const HeaderOverlay: ({ isOpen, children, className }: HeaderOverlayProps & WithClassName) => import("react").JSX.Element;
 export default HeaderOverlay;

package/dist/types/index.d.ts

@@ -51,4 +51,4 @@ export { Input, type InputProps, type InputType as InputFieldType } from './comp
 export { type InputVariants } from './components/Form/TextField/Input/Input.css';
 export { Textarea, type TextareaProps } from './components/Form/TextField/Textarea/Textarea';
 export { type TextareaVariants } from './components/Form/TextField/Textarea/Textarea.css';
-export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme';
+export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme.css';

package/dist/utils/theme.css.ts

@@ -0,0 +1,131 @@
+import { createGlobalTheme } from '@vanilla-extract/css';
+import { baseDarkTheme, baseLightTheme } from '../theme/baseThemeValues';
+import { themeContract } from '../theme/contract.css';
+
+// Type for partial theme overrides
+export type ThemeOverrides = {
+  colors?: Partial<typeof baseLightTheme.colors>;
+  space?: Partial<typeof baseLightTheme.space>;
+  radii?: Partial<typeof baseLightTheme.radii>;
+  fonts?: Partial<typeof baseLightTheme.fonts>;
+  maxWidth?: Partial<typeof baseLightTheme.maxWidth>;
+  fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
+  fontWeights?: Partial<typeof baseLightTheme.fontSizes>;
+  lineHeights?: Partial<typeof baseLightTheme.fontSizes>;
+  shadows?: Partial<typeof baseLightTheme.fontSizes>;
+  section?: Partial<typeof baseLightTheme.fontSizes>;
+  header?: Partial<typeof baseLightTheme.fontSizes>;
+  footer?: Partial<typeof baseLightTheme.fontSizes>;
+};
+
+// Utility to create a theme with partial overrides over light theme base
+const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
+  return createGlobalTheme(selector, themeContract, {
+    colors: {
+      ...baseLightTheme.colors,
+      ...overrides.colors,
+    },
+    space: {
+      ...baseLightTheme.space,
+      ...overrides.space,
+    },
+    radii: {
+      ...baseLightTheme.radii,
+      ...overrides.radii,
+    },
+    fonts: {
+      ...baseLightTheme.fonts,
+      ...overrides.fonts,
+    },
+    maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
+    fontSizes: {
+      ...baseLightTheme.fontSizes,
+      ...overrides.fontSizes,
+    },
+    fontWeights: {
+      ...baseLightTheme.fontWeights,
+      ...overrides.fontWeights,
+    },
+    lineHeights: {
+      ...baseLightTheme.lineHeights,
+      ...overrides.lineHeights,
+    },
+    shadows: {
+      ...baseLightTheme.shadows,
+      ...overrides.shadows,
+    },
+    section: {
+      ...baseLightTheme.section,
+      ...overrides.section,
+    },
+    header: {
+      ...baseLightTheme.header,
+      ...overrides.header,
+    },
+    footer: {
+      ...baseLightTheme.footer,
+      ...overrides.footer,
+    },
+  });
+};
+
+// Utility to create a theme with partial overrides over dark theme base
+const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) => {
+  return createGlobalTheme(selector, themeContract, {
+    colors: {
+      ...baseDarkTheme.colors,
+      ...overrides.colors,
+    },
+    space: {
+      ...baseDarkTheme.space,
+      ...overrides.space,
+    },
+    radii: {
+      ...baseDarkTheme.radii,
+      ...overrides.radii,
+    },
+    fonts: {
+      ...baseDarkTheme.fonts,
+      ...overrides.fonts,
+    },
+    maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
+    fontSizes: {
+      ...baseLightTheme.fontSizes,
+      ...overrides.fontSizes,
+    },
+    fontWeights: {
+      ...baseLightTheme.fontWeights,
+      ...overrides.fontWeights,
+    },
+    lineHeights: {
+      ...baseLightTheme.lineHeights,
+      ...overrides.lineHeights,
+    },
+    shadows: {
+      ...baseLightTheme.shadows,
+      ...overrides.shadows,
+    },
+    section: {
+      ...baseLightTheme.section,
+      ...overrides.section,
+    },
+    header: {
+      ...baseLightTheme.header,
+      ...overrides.header,
+    },
+    footer: {
+      ...baseLightTheme.footer,
+      ...overrides.footer,
+    },
+  });
+};
+
+// Convenience function for light theme (extends base light theme)
+export const createLightTheme = (overrides: ThemeOverrides = {}) => {
+  return createAppTheme('html', overrides);
+};
+
+// Convenience function for dark theme (extends base dark theme)
+export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
+  return createAppDarkTheme('html[data-theme="dark"]', overrides);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.170",
+  "version": "0.0.172",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -38,15 +38,14 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@typescript-eslint/eslint-plugin": "8.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.42.0",
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/sprinkles": "^1.6.5",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^5.0.2",
     "clsx": "^2.1.1",
     "eslint": "^9.15.0",
-    "eslint-config-next": "15.1.6",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
@@ -55,9 +54,8 @@
     "storybook": "^8.5.2",
     "typescript": "5.6.3",
     "typescript-eslint": "^8.21.0",
-    "vite": "^6.0.11",
-    "vite-plugin-dts": "^4.5.0",
-    "vite-plugin-static-copy": "^3.1.2"
+    "vite": "^7.1.4",
+    "vite-plugin-dts": "^4.5.4"
   },
   "engines": {
     "node": ">=20.9.0",

package/src/components/Carousel/Carousel.css.ts

@@ -2,8 +2,7 @@ import { keyframes, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
 import { themeContract } from '../../theme';
-
-const slideTransition = keyframes({
+keyframes({
   '0%': { transform: 'translateX(0)' },
   '100%': { transform: 'translateX(var(--slide-offset))' },
 });

package/src/components/Header/ToggleNav/styles.css.ts

@@ -1,4 +1,4 @@
-import { createVar, style, globalStyle } from '@vanilla-extract/css';
+import { createVar, globalStyle, style } from '@vanilla-extract/css';
 
 export const vars = {
   displayOnDesktop: createVar(),
@@ -37,4 +37,4 @@ globalStyle(`${toggleNavBarStyle}[data-open="true"]:nth-of-type(1)`, {
 
 globalStyle(`${toggleNavBarStyle}[data-open="true"]:nth-of-type(2)`, {
   transform: 'rotate(-45deg) translate(4px, -3px)',
-});
+});

package/src/utils/theme.css.ts

@@ -0,0 +1,131 @@
+import { createGlobalTheme } from '@vanilla-extract/css';
+import { baseDarkTheme, baseLightTheme } from '../theme/baseThemeValues';
+import { themeContract } from '../theme/contract.css';
+
+// Type for partial theme overrides
+export type ThemeOverrides = {
+  colors?: Partial<typeof baseLightTheme.colors>;
+  space?: Partial<typeof baseLightTheme.space>;
+  radii?: Partial<typeof baseLightTheme.radii>;
+  fonts?: Partial<typeof baseLightTheme.fonts>;
+  maxWidth?: Partial<typeof baseLightTheme.maxWidth>;
+  fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
+  fontWeights?: Partial<typeof baseLightTheme.fontSizes>;
+  lineHeights?: Partial<typeof baseLightTheme.fontSizes>;
+  shadows?: Partial<typeof baseLightTheme.fontSizes>;
+  section?: Partial<typeof baseLightTheme.fontSizes>;
+  header?: Partial<typeof baseLightTheme.fontSizes>;
+  footer?: Partial<typeof baseLightTheme.fontSizes>;
+};
+
+// Utility to create a theme with partial overrides over light theme base
+const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
+  return createGlobalTheme(selector, themeContract, {
+    colors: {
+      ...baseLightTheme.colors,
+      ...overrides.colors,
+    },
+    space: {
+      ...baseLightTheme.space,
+      ...overrides.space,
+    },
+    radii: {
+      ...baseLightTheme.radii,
+      ...overrides.radii,
+    },
+    fonts: {
+      ...baseLightTheme.fonts,
+      ...overrides.fonts,
+    },
+    maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
+    fontSizes: {
+      ...baseLightTheme.fontSizes,
+      ...overrides.fontSizes,
+    },
+    fontWeights: {
+      ...baseLightTheme.fontWeights,
+      ...overrides.fontWeights,
+    },
+    lineHeights: {
+      ...baseLightTheme.lineHeights,
+      ...overrides.lineHeights,
+    },
+    shadows: {
+      ...baseLightTheme.shadows,
+      ...overrides.shadows,
+    },
+    section: {
+      ...baseLightTheme.section,
+      ...overrides.section,
+    },
+    header: {
+      ...baseLightTheme.header,
+      ...overrides.header,
+    },
+    footer: {
+      ...baseLightTheme.footer,
+      ...overrides.footer,
+    },
+  });
+};
+
+// Utility to create a theme with partial overrides over dark theme base
+const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) => {
+  return createGlobalTheme(selector, themeContract, {
+    colors: {
+      ...baseDarkTheme.colors,
+      ...overrides.colors,
+    },
+    space: {
+      ...baseDarkTheme.space,
+      ...overrides.space,
+    },
+    radii: {
+      ...baseDarkTheme.radii,
+      ...overrides.radii,
+    },
+    fonts: {
+      ...baseDarkTheme.fonts,
+      ...overrides.fonts,
+    },
+    maxWidth: `${baseLightTheme.maxWidth || overrides.maxWidth}`,
+    fontSizes: {
+      ...baseLightTheme.fontSizes,
+      ...overrides.fontSizes,
+    },
+    fontWeights: {
+      ...baseLightTheme.fontWeights,
+      ...overrides.fontWeights,
+    },
+    lineHeights: {
+      ...baseLightTheme.lineHeights,
+      ...overrides.lineHeights,
+    },
+    shadows: {
+      ...baseLightTheme.shadows,
+      ...overrides.shadows,
+    },
+    section: {
+      ...baseLightTheme.section,
+      ...overrides.section,
+    },
+    header: {
+      ...baseLightTheme.header,
+      ...overrides.header,
+    },
+    footer: {
+      ...baseLightTheme.footer,
+      ...overrides.footer,
+    },
+  });
+};
+
+// Convenience function for light theme (extends base light theme)
+export const createLightTheme = (overrides: ThemeOverrides = {}) => {
+  return createAppTheme('html', overrides);
+};
+
+// Convenience function for dark theme (extends base dark theme)
+export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
+  return createAppDarkTheme('html[data-theme="dark"]', overrides);
+};