@latte-macchiat-io/latte-vanilla-components 0.0.167 → 0.0.168

package/src/theme/contract.css.ts

@@ -0,0 +1,83 @@
+import { createThemeContract } from '@vanilla-extract/css';
+
+// Define a theme contract with design tokens
+// This contract can then be reused to create multiple themes or overrides on a global level
+export const themeContract = createThemeContract({
+  colors: {
+    primary: null,
+    secondary: null,
+    accent: null,
+    background: null,
+    surface: null,
+    text: null,
+    textSecondary: null,
+    textLight: null,
+    border: null,
+    error: null,
+    warning: null,
+    success: null,
+    info: null,
+  },
+  space: {
+    none: null,
+    xs: null,
+    sm: null,
+    md: null,
+    lg: null,
+    xl: null,
+    '2xl': null,
+  },
+  radii: {
+    none: null,
+    sm: null,
+    md: null,
+    lg: null,
+    xl: null,
+    full: null,
+  },
+  fonts: {
+    body: null,
+    heading: null,
+    mono: null,
+  },
+  fontSizes: {
+    xs: null,
+    sm: null,
+    md: null,
+    lg: null,
+    xl: null,
+    '2xl': null,
+    '3xl': null,
+    '4xl': null,
+  },
+  fontWeights: {
+    light: null,
+    normal: null,
+    medium: null,
+    semibold: null,
+    bold: null,
+  },
+  lineHeights: {
+    tight: null,
+    normal: null,
+    relaxed: null,
+  },
+  shadows: {
+    none: null,
+    sm: null,
+    md: null,
+    lg: null,
+    xl: null,
+  },
+  maxWidth: null,
+  section: {
+    paddingTop: null,
+    paddingBottom: null,
+  },
+  header: {
+    height: null,
+  },
+  footer: {
+    height: null,
+  },
+});

package/src/theme/default.css.ts

@@ -0,0 +1,9 @@
+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);