@latte-macchiat-io/latte-vanilla-components 0.0.171 → 0.0.173

package/dist/types/components/ToRemove/ToRemove.d.ts

@@ -0,0 +1 @@
+export declare const ToRemove: () => import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -51,4 +51,5 @@ 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 { ToRemove } from './components/ToRemove/ToRemove';
+export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme.css';

package/dist/types/utils/theme.css.d.ts

@@ -0,0 +1,173 @@
+import { baseLightTheme } from '../theme/baseThemeValues';
+export type ThemeOverrides = {
+    colors?: Partial<typeof baseLightTheme.colors>;
+    space?: Partial<typeof baseLightTheme.space>;
+    radii?: Partial<typeof baseLightTheme.radii>;
+    fonts?: Partial<typeof baseLightTheme.fonts>;
+    maxWidth?: string;
+    fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
+    fontWeights?: Partial<typeof baseLightTheme.fontWeights>;
+    lineHeights?: Partial<typeof baseLightTheme.lineHeights>;
+    shadows?: Partial<typeof baseLightTheme.shadows>;
+    section?: Partial<typeof baseLightTheme.section>;
+    header?: Partial<typeof baseLightTheme.header>;
+    footer?: Partial<typeof baseLightTheme.footer>;
+};
+export declare const createLightTheme: (overrides?: ThemeOverrides) => {
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        background: string;
+        surface: string;
+        text: string;
+        textSecondary: string;
+        textLight: string;
+        border: string;
+        error: string;
+        warning: string;
+        success: string;
+        info: string;
+    };
+    space: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    radii: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    maxWidth: string;
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    fontWeights: {
+        light: string;
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    lineHeights: {
+        tight: string;
+        normal: string;
+        relaxed: string;
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    section: {
+        paddingTop: string;
+        paddingBottom: string;
+    };
+    header: {
+        height: string;
+    };
+    footer: {
+        height: string;
+    };
+};
+export declare const createDarkTheme: (overrides?: ThemeOverrides) => {
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        background: string;
+        surface: string;
+        text: string;
+        textSecondary: string;
+        textLight: string;
+        border: string;
+        error: string;
+        warning: string;
+        success: string;
+        info: string;
+    };
+    space: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    radii: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    maxWidth: string;
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    fontWeights: {
+        light: string;
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    lineHeights: {
+        tight: string;
+        normal: string;
+        relaxed: string;
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    section: {
+        paddingTop: string;
+        paddingBottom: string;
+    };
+    header: {
+        height: string;
+    };
+    footer: {
+        height: string;
+    };
+};

package/dist/utils/theme.css.ts

@@ -0,0 +1,129 @@
+import { baseDarkTheme, baseLightTheme } from '../theme/baseThemeValues';
+
+// 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?: string;
+  fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
+  fontWeights?: Partial<typeof baseLightTheme.fontWeights>;
+  lineHeights?: Partial<typeof baseLightTheme.lineHeights>;
+  shadows?: Partial<typeof baseLightTheme.shadows>;
+  section?: Partial<typeof baseLightTheme.section>;
+  header?: Partial<typeof baseLightTheme.header>;
+  footer?: Partial<typeof baseLightTheme.footer>;
+};
+
+// Utility to create a theme object with partial overrides over light theme base
+const createAppTheme = (overrides: ThemeOverrides = {}) => {
+  return {
+    colors: {
+      ...baseLightTheme.colors,
+      ...overrides.colors,
+    },
+    space: {
+      ...baseLightTheme.space,
+      ...overrides.space,
+    },
+    radii: {
+      ...baseLightTheme.radii,
+      ...overrides.radii,
+    },
+    fonts: {
+      ...baseLightTheme.fonts,
+      ...overrides.fonts,
+    },
+    maxWidth: overrides.maxWidth || `${baseLightTheme.maxWidth}px`,
+    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 object with partial overrides over dark theme base
+const createAppDarkTheme = (overrides: ThemeOverrides = {}) => {
+  return {
+    colors: {
+      ...baseDarkTheme.colors,
+      ...overrides.colors,
+    },
+    space: {
+      ...baseDarkTheme.space,
+      ...overrides.space,
+    },
+    radii: {
+      ...baseDarkTheme.radii,
+      ...overrides.radii,
+    },
+    fonts: {
+      ...baseDarkTheme.fonts,
+      ...overrides.fonts,
+    },
+    maxWidth: overrides.maxWidth || `${baseDarkTheme.maxWidth}px`,
+    fontSizes: {
+      ...baseDarkTheme.fontSizes,
+      ...overrides.fontSizes,
+    },
+    fontWeights: {
+      ...baseDarkTheme.fontWeights,
+      ...overrides.fontWeights,
+    },
+    lineHeights: {
+      ...baseDarkTheme.lineHeights,
+      ...overrides.lineHeights,
+    },
+    shadows: {
+      ...baseDarkTheme.shadows,
+      ...overrides.shadows,
+    },
+    section: {
+      ...baseDarkTheme.section,
+      ...overrides.section,
+    },
+    header: {
+      ...baseDarkTheme.header,
+      ...overrides.header,
+    },
+    footer: {
+      ...baseDarkTheme.footer,
+      ...overrides.footer,
+    },
+  };
+};
+
+// Returns theme object for light theme - consuming app must call createGlobalTheme
+export const createLightTheme = (overrides: ThemeOverrides = {}) => {
+  return createAppTheme(overrides);
+};
+
+// Returns theme object for dark theme - consuming app must call createGlobalTheme  
+export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
+  return createAppDarkTheme(overrides);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.171",
+  "version": "0.0.173",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/components/Actions/Actions.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { queries } from '../../styles/mediaqueries';
 import { themeContract } from '../../theme';
+import { queries } from '../../styles/mediaqueries';
 
 const actionsBase = style({
   display: 'flex',

package/src/utils/theme.css.ts

@@ -0,0 +1,129 @@
+import { baseDarkTheme, baseLightTheme } from '../theme/baseThemeValues';
+
+// 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?: string;
+  fontSizes?: Partial<typeof baseLightTheme.fontSizes>;
+  fontWeights?: Partial<typeof baseLightTheme.fontWeights>;
+  lineHeights?: Partial<typeof baseLightTheme.lineHeights>;
+  shadows?: Partial<typeof baseLightTheme.shadows>;
+  section?: Partial<typeof baseLightTheme.section>;
+  header?: Partial<typeof baseLightTheme.header>;
+  footer?: Partial<typeof baseLightTheme.footer>;
+};
+
+// Utility to create a theme object with partial overrides over light theme base
+const createAppTheme = (overrides: ThemeOverrides = {}) => {
+  return {
+    colors: {
+      ...baseLightTheme.colors,
+      ...overrides.colors,
+    },
+    space: {
+      ...baseLightTheme.space,
+      ...overrides.space,
+    },
+    radii: {
+      ...baseLightTheme.radii,
+      ...overrides.radii,
+    },
+    fonts: {
+      ...baseLightTheme.fonts,
+      ...overrides.fonts,
+    },
+    maxWidth: overrides.maxWidth || `${baseLightTheme.maxWidth}px`,
+    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 object with partial overrides over dark theme base
+const createAppDarkTheme = (overrides: ThemeOverrides = {}) => {
+  return {
+    colors: {
+      ...baseDarkTheme.colors,
+      ...overrides.colors,
+    },
+    space: {
+      ...baseDarkTheme.space,
+      ...overrides.space,
+    },
+    radii: {
+      ...baseDarkTheme.radii,
+      ...overrides.radii,
+    },
+    fonts: {
+      ...baseDarkTheme.fonts,
+      ...overrides.fonts,
+    },
+    maxWidth: overrides.maxWidth || `${baseDarkTheme.maxWidth}px`,
+    fontSizes: {
+      ...baseDarkTheme.fontSizes,
+      ...overrides.fontSizes,
+    },
+    fontWeights: {
+      ...baseDarkTheme.fontWeights,
+      ...overrides.fontWeights,
+    },
+    lineHeights: {
+      ...baseDarkTheme.lineHeights,
+      ...overrides.lineHeights,
+    },
+    shadows: {
+      ...baseDarkTheme.shadows,
+      ...overrides.shadows,
+    },
+    section: {
+      ...baseDarkTheme.section,
+      ...overrides.section,
+    },
+    header: {
+      ...baseDarkTheme.header,
+      ...overrides.header,
+    },
+    footer: {
+      ...baseDarkTheme.footer,
+      ...overrides.footer,
+    },
+  };
+};
+
+// Returns theme object for light theme - consuming app must call createGlobalTheme
+export const createLightTheme = (overrides: ThemeOverrides = {}) => {
+  return createAppTheme(overrides);
+};
+
+// Returns theme object for dark theme - consuming app must call createGlobalTheme  
+export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
+  return createAppDarkTheme(overrides);
+};

package/dist/theme/default.css.ts

@@ -1,9 +0,0 @@
-import { createGlobalTheme } from '@vanilla-extract/css';
-import { baseDarkTheme, baseLightTheme } from './baseThemeValues';
-import { themeContract } from './contract.css';
-
-// Create the default light theme at the root
-createGlobalTheme('html', themeContract, baseLightTheme);
-
-// Apply dark theme when data-theme="dark"
-createGlobalTheme('html[data-theme="dark"]', themeContract, baseDarkTheme);

package/dist/types/utils/theme.d.ts

@@ -1,17 +0,0 @@
-import { baseLightTheme } from '../theme/baseThemeValues';
-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>;
-};
-export declare const createLightTheme: (overrides?: ThemeOverrides) => void;
-export declare const createDarkTheme: (overrides?: ThemeOverrides) => void;

package/src/theme/default.css.ts

@@ -1,9 +0,0 @@
-import { createGlobalTheme } from '@vanilla-extract/css';
-import { baseDarkTheme, baseLightTheme } from './baseThemeValues';
-import { themeContract } from './contract.css';
-
-// Create the default light theme at the root
-createGlobalTheme('html', themeContract, baseLightTheme);
-
-// Apply dark theme when data-theme="dark"
-createGlobalTheme('html[data-theme="dark"]', themeContract, baseDarkTheme);