@happyvertical/smrt-ui 0.30.0

package/dist/themes/glass/index.js

@@ -0,0 +1,286 @@
+/**
+ * Glass Theme
+ *
+ * Apple-inspired glass morphism theme with backdrop blur effects,
+ * translucency, and layered depth. Features frosted glass surfaces
+ * and vibrant material effects.
+ */
+import { appleEasing, borderRadiusScale, durationScale, spacingScale, } from '../shared.js';
+/**
+ * Glass light color palette
+ * Translucent whites with subtle color tints
+ */
+const lightColors = {
+    // Primary - Apple system blue
+    primary: '#007aff',
+    onPrimary: '#ffffff',
+    primaryContainer: 'rgba(0, 122, 255, 0.15)',
+    onPrimaryContainer: '#003d80',
+    // Secondary - System gray
+    secondary: '#6c757d',
+    onSecondary: '#ffffff',
+    secondaryContainer: 'rgba(108, 117, 125, 0.12)',
+    onSecondaryContainer: '#2c3237',
+    // Tertiary - System indigo
+    tertiary: '#5856d6',
+    onTertiary: '#ffffff',
+    tertiaryContainer: 'rgba(88, 86, 214, 0.15)',
+    onTertiaryContainer: '#2a2866',
+    // Error - System red
+    error: '#ff3b30',
+    onError: '#ffffff',
+    errorContainer: 'rgba(255, 59, 48, 0.15)',
+    onErrorContainer: '#801810',
+    // Warning - System orange
+    warning: '#ff9500',
+    onWarning: '#000000',
+    warningContainer: 'rgba(255, 149, 0, 0.15)',
+    onWarningContainer: '#804a00',
+    // Success - System green
+    success: '#34c759',
+    onSuccess: '#000000',
+    successContainer: 'rgba(52, 199, 89, 0.15)',
+    onSuccessContainer: '#1a642d',
+    // Surface - Translucent whites
+    surface: 'rgba(255, 255, 255, 0.72)',
+    onSurface: '#000000',
+    surfaceVariant: 'rgba(255, 255, 255, 0.52)',
+    onSurfaceVariant: '#3c3c43',
+    surfaceContainer: 'rgba(255, 255, 255, 0.82)',
+    surfaceContainerLow: 'rgba(255, 255, 255, 0.62)',
+    surfaceContainerHigh: 'rgba(255, 255, 255, 0.88)',
+    surfaceContainerHighest: 'rgba(255, 255, 255, 0.92)',
+    surfaceContainerLowest: 'rgba(255, 255, 255, 0.42)',
+    surfaceDim: 'rgba(120, 120, 128, 0.16)',
+    surfaceBright: 'rgba(255, 255, 255, 0.95)',
+    // Background - Vibrant light background
+    background: '#f2f2f7',
+    onBackground: '#000000',
+    // Outline - Subtle translucent borders
+    outline: 'rgba(120, 120, 128, 0.29)',
+    outlineVariant: 'rgba(120, 120, 128, 0.16)',
+    // Inverse
+    inverseSurface: '#1c1c1e',
+    inverseOnSurface: '#ffffff',
+    inversePrimary: '#66b0ff',
+    // Effects
+    shadow: 'rgba(0, 0, 0, 0.12)',
+    scrim: 'rgba(0, 0, 0, 0.4)',
+    // Glass-specific
+    glassBackdrop: 'rgba(255, 255, 255, 0.72)',
+    glassBorder: 'rgba(255, 255, 255, 0.3)',
+};
+/**
+ * Glass dark color palette
+ * Translucent darks with depth layers
+ */
+const darkColors = {
+    // Primary - Lighter blue for dark mode
+    primary: '#0a84ff',
+    onPrimary: '#000000',
+    primaryContainer: 'rgba(10, 132, 255, 0.25)',
+    onPrimaryContainer: '#b3d9ff',
+    // Secondary
+    secondary: '#8e8e93',
+    onSecondary: '#000000',
+    secondaryContainer: 'rgba(142, 142, 147, 0.2)',
+    onSecondaryContainer: '#e5e5ea',
+    // Tertiary
+    tertiary: '#5e5ce6',
+    onTertiary: '#ffffff',
+    tertiaryContainer: 'rgba(94, 92, 230, 0.25)',
+    onTertiaryContainer: '#d4d3ff',
+    // Error
+    error: '#ff453a',
+    onError: '#000000',
+    errorContainer: 'rgba(255, 69, 58, 0.25)',
+    onErrorContainer: '#ffcac7',
+    // Warning
+    warning: '#ff9f0a',
+    onWarning: '#000000',
+    warningContainer: 'rgba(255, 159, 10, 0.25)',
+    onWarningContainer: '#ffe3b3',
+    // Success
+    success: '#30d158',
+    onSuccess: '#000000',
+    successContainer: 'rgba(48, 209, 88, 0.25)',
+    onSuccessContainer: '#b8f5c9',
+    // Surface - Translucent darks
+    surface: 'rgba(30, 30, 30, 0.72)',
+    onSurface: '#ffffff',
+    surfaceVariant: 'rgba(44, 44, 46, 0.65)',
+    onSurfaceVariant: '#8e8e93',
+    surfaceContainer: 'rgba(44, 44, 46, 0.82)',
+    surfaceContainerLow: 'rgba(30, 30, 30, 0.62)',
+    surfaceContainerHigh: 'rgba(58, 58, 60, 0.85)',
+    surfaceContainerHighest: 'rgba(72, 72, 74, 0.88)',
+    surfaceContainerLowest: 'rgba(28, 28, 30, 0.55)',
+    surfaceDim: 'rgba(0, 0, 0, 0.3)',
+    surfaceBright: 'rgba(58, 58, 60, 0.9)',
+    // Background - Deep dark with subtle tint
+    background: '#000000',
+    onBackground: '#ffffff',
+    // Outline
+    outline: 'rgba(84, 84, 88, 0.65)',
+    outlineVariant: 'rgba(84, 84, 88, 0.35)',
+    // Inverse
+    inverseSurface: '#f2f2f7',
+    inverseOnSurface: '#000000',
+    inversePrimary: '#007aff',
+    // Effects
+    shadow: 'rgba(0, 0, 0, 0.4)',
+    scrim: 'rgba(0, 0, 0, 0.6)',
+    // Glass-specific
+    glassBackdrop: 'rgba(30, 30, 30, 0.72)',
+    glassBorder: 'rgba(255, 255, 255, 0.1)',
+};
+/**
+ * Glass typography scale
+ * Apple SF Pro-style metrics
+ */
+const typography = {
+    displayLarge: {
+        size: '3rem',
+        lineHeight: '1.1',
+        weight: '600',
+        tracking: '-0.022em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    displayMedium: {
+        size: '2.5rem',
+        lineHeight: '1.15',
+        weight: '600',
+        tracking: '-0.021em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    displaySmall: {
+        size: '2rem',
+        lineHeight: '1.2',
+        weight: '600',
+        tracking: '-0.019em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    headlineLarge: {
+        size: '1.75rem',
+        lineHeight: '1.25',
+        weight: '600',
+        tracking: '-0.017em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    headlineMedium: {
+        size: '1.5rem',
+        lineHeight: '1.3',
+        weight: '600',
+        tracking: '-0.015em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    headlineSmall: {
+        size: '1.25rem',
+        lineHeight: '1.35',
+        weight: '600',
+        tracking: '-0.012em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    titleLarge: {
+        size: '1.25rem',
+        lineHeight: '1.4',
+        weight: '600',
+        tracking: '-0.012em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    titleMedium: {
+        size: '1.0625rem',
+        lineHeight: '1.4',
+        weight: '600',
+        tracking: '-0.011em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    titleSmall: {
+        size: '0.9375rem',
+        lineHeight: '1.4',
+        weight: '600',
+        tracking: '-0.009em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    bodyLarge: {
+        size: '1.0625rem',
+        lineHeight: '1.5',
+        weight: '400',
+        tracking: '-0.011em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    bodyMedium: {
+        size: '0.9375rem',
+        lineHeight: '1.5',
+        weight: '400',
+        tracking: '-0.009em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    bodySmall: {
+        size: '0.8125rem',
+        lineHeight: '1.4',
+        weight: '400',
+        tracking: '-0.006em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    labelLarge: {
+        size: '0.9375rem',
+        lineHeight: '1.4',
+        weight: '500',
+        tracking: '-0.009em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    labelMedium: {
+        size: '0.8125rem',
+        lineHeight: '1.4',
+        weight: '500',
+        tracking: '-0.006em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    labelSmall: {
+        size: '0.6875rem',
+        lineHeight: '1.3',
+        weight: '600',
+        tracking: '-0.004em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+};
+/**
+ * Glass elevation
+ * Softer, more diffuse shadows with color tint
+ */
+const elevation = {
+    0: 'none',
+    1: '0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)',
+    2: '0 3px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03)',
+    3: '0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04)',
+    4: '0 12px 24px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05)',
+    5: '0 24px 48px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.06)',
+};
+/**
+ * Glass effect configuration
+ */
+const glassEffects = {
+    blur: '20px',
+    saturation: '180%',
+    borderOpacity: '0.3',
+    backgroundOpacity: '0.72',
+};
+/**
+ * Glass theme definition
+ */
+export const glassTheme = {
+    id: 'glass',
+    name: 'Glass',
+    light: lightColors,
+    dark: darkColors,
+    typography,
+    elevation,
+    spacing: spacingScale,
+    borderRadius: borderRadiusScale,
+    duration: durationScale,
+    easing: appleEasing,
+    glass: glassEffects,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif',
+};
+export default glassTheme;

package/dist/themes/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * SMRT Svelte Themes
+ *
+ * Unified theme system with Material, Glass, and Studio presets.
+ * Supports runtime theme switching, dark/light modes, and CSS custom properties.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { ThemeProvider } from '@smrt/svelte/themes';
+ * </script>
+ *
+ * <ThemeProvider preset="glass" colorScheme="system">
+ *   <YourApp />
+ * </ThemeProvider>
+ * ```
+ */
+export { ColorSchemeToggle, ThemeSwitcher } from './components/index.js';
+export { getThemeContext, hasThemeContext, setThemeContext, tryGetThemeContext, } from './context.svelte.js';
+export type { CreateThemeOptions } from './create-theme.js';
+export { createTheme, createThemeFromColor, getRegisteredTheme, isThemeRegistered, preloadThemeRegistry, registerTheme, } from './create-theme.js';
+export { generateAllThemesCSS, generateThemeCSS, generateThemeVariables, variablesToStyleString, } from './css-generator.js';
+export { glassTheme } from './glass/index.js';
+export { materialTheme } from './material/index.js';
+export { availablePresets, getAllThemes, getTheme, getThemeName, getThemeOptions, isValidPreset, themes, } from './registry.js';
+export { appleEasing, borderRadiusScale, durationScale, materialEasing, spacingScale, studioEasing, } from './shared.js';
+export { studioTheme } from './studio/index.js';
+export { default as ThemeProvider } from './ThemeProvider.svelte';
+export type { BorderRadius, BorderRadiusScale, ColorPalette, ColorScheme, CSSVariableOptions, DurationScale, EasingScale, ElevationScale, GlassEffects, ResolvedScheme, SpacingScale, Theme, ThemeConfig, ThemeContext, ThemePreset, ThemeState, TypographyScale, TypographyToken, } from './types.js';
+export { defaultThemeConfig } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/themes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EACL,eAAe,EACf,eAAe,EACf,eAAe,EACf,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,aAAa,EACb,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}

package/dist/themes/index.js

@@ -0,0 +1,37 @@
+/**
+ * SMRT Svelte Themes
+ *
+ * Unified theme system with Material, Glass, and Studio presets.
+ * Supports runtime theme switching, dark/light modes, and CSS custom properties.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { ThemeProvider } from '@smrt/svelte/themes';
+ * </script>
+ *
+ * <ThemeProvider preset="glass" colorScheme="system">
+ *   <YourApp />
+ * </ThemeProvider>
+ * ```
+ */
+// Theme UI components
+export { ColorSchemeToggle, ThemeSwitcher } from './components/index.js';
+// Context
+export { getThemeContext, hasThemeContext, setThemeContext, tryGetThemeContext, } from './context.svelte.js';
+// Custom theme creation
+export { createTheme, createThemeFromColor, getRegisteredTheme, isThemeRegistered, preloadThemeRegistry, registerTheme, } from './create-theme.js';
+// CSS generation
+export { generateAllThemesCSS, generateThemeCSS, generateThemeVariables, variablesToStyleString, } from './css-generator.js';
+export { glassTheme } from './glass/index.js';
+// Theme definitions
+export { materialTheme } from './material/index.js';
+// Registry
+export { availablePresets, getAllThemes, getTheme, getThemeName, getThemeOptions, isValidPreset, themes, } from './registry.js';
+// Shared tokens (if needed for custom themes)
+export { appleEasing, borderRadiusScale, durationScale, materialEasing, spacingScale, studioEasing, } from './shared.js';
+export { studioTheme } from './studio/index.js';
+// Main components
+export { default as ThemeProvider } from './ThemeProvider.svelte';
+// Constants
+export { defaultThemeConfig } from './types.js';

package/dist/themes/material/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Material Theme
+ *
+ * Improved Material Design 3 theme with modern Google product aesthetics.
+ * Features refined colors, updated typography, and polished elevation.
+ */
+import type { Theme } from '../types.js';
+/**
+ * Material theme definition
+ */
+export declare const materialTheme: Theme;
+export default materialTheme;
+//# sourceMappingURL=index.d.ts.map

package/dist/themes/material/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/material/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,OAAO,KAAK,EAGV,KAAK,EAEN,MAAM,aAAa,CAAC;AA+QrB;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/themes/material/index.js

@@ -0,0 +1,269 @@
+/**
+ * Material Theme
+ *
+ * Improved Material Design 3 theme with modern Google product aesthetics.
+ * Features refined colors, updated typography, and polished elevation.
+ */
+import { borderRadiusScale, durationScale, materialEasing, spacingScale, } from '../shared.js';
+/**
+ * Material light color palette
+ * Refined M3 colors with slightly more vibrant accents
+ */
+const lightColors = {
+    // Primary - Vibrant blue like modern Google products
+    primary: '#0b57d0',
+    onPrimary: '#ffffff',
+    primaryContainer: '#d3e3fd',
+    onPrimaryContainer: '#041e49',
+    // Secondary - Neutral with slight warm tint
+    secondary: '#5e5e5e',
+    onSecondary: '#ffffff',
+    secondaryContainer: '#f0f0f0',
+    onSecondaryContainer: '#1f1f1f',
+    // Tertiary - Soft purple
+    tertiary: '#7c4dff',
+    onTertiary: '#ffffff',
+    tertiaryContainer: '#e8ddff',
+    onTertiaryContainer: '#1e005f',
+    // Error - Google red
+    error: '#b3261e',
+    onError: '#ffffff',
+    errorContainer: '#f9dedc',
+    onErrorContainer: '#410e0b',
+    // Warning - Amber
+    warning: '#f9ab00',
+    onWarning: '#000000',
+    warningContainer: '#fff4d9',
+    onWarningContainer: '#3d2a00',
+    // Success - Green
+    success: '#1e8e3e',
+    onSuccess: '#ffffff',
+    successContainer: '#e6f4ea',
+    onSuccessContainer: '#1e4620',
+    // Surface - Clean white with subtle warm tint
+    surface: '#ffffff',
+    onSurface: '#1f1f1f',
+    surfaceVariant: '#f2f2f2',
+    onSurfaceVariant: '#444746',
+    surfaceContainer: '#f0f4f8',
+    surfaceContainerLow: '#f8f9fa',
+    surfaceContainerHigh: '#e8eaed',
+    surfaceContainerHighest: '#e1e3e6',
+    surfaceContainerLowest: '#ffffff',
+    surfaceDim: '#dadce0',
+    surfaceBright: '#f8f9fa',
+    // Background
+    background: '#ffffff',
+    onBackground: '#1f1f1f',
+    // Outline
+    outline: '#747775',
+    outlineVariant: '#c4c7c5',
+    // Inverse
+    inverseSurface: '#303133',
+    inverseOnSurface: '#f2f2f2',
+    inversePrimary: '#a8c7fa',
+    // Effects
+    shadow: '#000000',
+    scrim: 'rgba(0, 0, 0, 0.5)',
+};
+/**
+ * Material dark color palette
+ * True dark mode with OLED-friendly blacks
+ */
+const darkColors = {
+    // Primary - Lighter blue for dark mode
+    primary: '#a8c7fa',
+    onPrimary: '#062e6f',
+    primaryContainer: '#0842a0',
+    onPrimaryContainer: '#d3e3fd',
+    // Secondary
+    secondary: '#c7c7c7',
+    onSecondary: '#303133',
+    secondaryContainer: '#444746',
+    onSecondaryContainer: '#e3e3e3',
+    // Tertiary
+    tertiary: '#cbb7ff',
+    onTertiary: '#3e1e96',
+    tertiaryContainer: '#5e3fc0',
+    onTertiaryContainer: '#e8ddff',
+    // Error
+    error: '#f2b8b5',
+    onError: '#601410',
+    errorContainer: '#8c1d18',
+    onErrorContainer: '#f9dedc',
+    // Warning
+    warning: '#ffcd66',
+    onWarning: '#5c3d00',
+    warningContainer: '#8a5d00',
+    onWarningContainer: '#fff4d9',
+    // Success
+    success: '#81c995',
+    onSuccess: '#0d522d',
+    successContainer: '#1e4620',
+    onSuccessContainer: '#e6f4ea',
+    // Surface - True dark OLED black base
+    surface: '#0e0e0e',
+    onSurface: '#e3e3e3',
+    surfaceVariant: '#1f1f1f',
+    onSurfaceVariant: '#c4c7c5',
+    surfaceContainer: '#1f1f1f',
+    surfaceContainerLow: '#141414',
+    surfaceContainerHigh: '#2d2d2d',
+    surfaceContainerHighest: '#363636',
+    surfaceContainerLowest: '#0a0a0a',
+    surfaceDim: '#141414',
+    surfaceBright: '#2d2d2d',
+    // Background
+    background: '#0e0e0e',
+    onBackground: '#e3e3e3',
+    // Outline
+    outline: '#8e918f',
+    outlineVariant: '#444746',
+    // Inverse
+    inverseSurface: '#e3e3e3',
+    inverseOnSurface: '#1f1f1f',
+    inversePrimary: '#0b57d0',
+    // Effects
+    shadow: '#000000',
+    scrim: 'rgba(0, 0, 0, 0.7)',
+};
+/**
+ * Material typography scale
+ * Uses Google Sans / Roboto-style metrics
+ */
+const typography = {
+    displayLarge: {
+        size: '3.5rem',
+        lineHeight: '1.1',
+        weight: '400',
+        tracking: '-0.02em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    displayMedium: {
+        size: '2.75rem',
+        lineHeight: '1.15',
+        weight: '400',
+        tracking: '-0.01em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    displaySmall: {
+        size: '2.25rem',
+        lineHeight: '1.2',
+        weight: '400',
+        tracking: '0',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    headlineLarge: {
+        size: '2rem',
+        lineHeight: '1.25',
+        weight: '400',
+        tracking: '0',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    headlineMedium: {
+        size: '1.75rem',
+        lineHeight: '1.3',
+        weight: '400',
+        tracking: '0',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    headlineSmall: {
+        size: '1.5rem',
+        lineHeight: '1.35',
+        weight: '400',
+        tracking: '0',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    titleLarge: {
+        size: '1.375rem',
+        lineHeight: '1.4',
+        weight: '500',
+        tracking: '0',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    titleMedium: {
+        size: '1rem',
+        lineHeight: '1.5',
+        weight: '500',
+        tracking: '0.01em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    titleSmall: {
+        size: '0.875rem',
+        lineHeight: '1.5',
+        weight: '500',
+        tracking: '0.01em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    bodyLarge: {
+        size: '1rem',
+        lineHeight: '1.5',
+        weight: '400',
+        tracking: '0.03em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    bodyMedium: {
+        size: '0.875rem',
+        lineHeight: '1.5',
+        weight: '400',
+        tracking: '0.02em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    bodySmall: {
+        size: '0.75rem',
+        lineHeight: '1.4',
+        weight: '400',
+        tracking: '0.03em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    labelLarge: {
+        size: '0.875rem',
+        lineHeight: '1.4',
+        weight: '500',
+        tracking: '0.01em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    labelMedium: {
+        size: '0.75rem',
+        lineHeight: '1.4',
+        weight: '500',
+        tracking: '0.05em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+    labelSmall: {
+        size: '0.6875rem',
+        lineHeight: '1.4',
+        weight: '500',
+        tracking: '0.05em',
+        fontFamily: 'var(--smrt-font-family)',
+    },
+};
+/**
+ * Material elevation shadows
+ * More refined shadows with better diffusion
+ */
+const elevation = {
+    0: 'none',
+    1: '0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.02)',
+    2: '0 1px 2px 0 rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04)',
+    3: '0 2px 4px 0 rgb(0 0 0 / 0.06), 0 4px 8px 0 rgb(0 0 0 / 0.04)',
+    4: '0 4px 8px 0 rgb(0 0 0 / 0.08), 0 8px 16px 0 rgb(0 0 0 / 0.04)',
+    5: '0 8px 16px 0 rgb(0 0 0 / 0.1), 0 16px 32px 0 rgb(0 0 0 / 0.04)',
+};
+/**
+ * Material theme definition
+ */
+export const materialTheme = {
+    id: 'material',
+    name: 'Material',
+    light: lightColors,
+    dark: darkColors,
+    typography,
+    elevation,
+    spacing: spacingScale,
+    borderRadius: borderRadiusScale,
+    duration: durationScale,
+    easing: materialEasing,
+    fontFamily: '"Google Sans", "Roboto", system-ui, -apple-system, sans-serif',
+};
+export default materialTheme;