@buddhacognitivelab/theme-glassmorphic
Version:
Enhanced glassmorphic theme package with dual-mode support, advanced glass effects, interactive UI components, and gesture-based interactions
1,455 lines (1,451 loc) • 662 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var styled = require('styled-components');
var stateManager = require('@buddhacognitivelab/state-manager');
var framerMotion = require('framer-motion');
var clsx = require('clsx');
var reactDom = require('react-dom');
/**
* @fileoverview Enhanced Color palettes for Glassmorphic Theme
* Defines light and dark mode color schemes with expanded color scales
*/
// Enhanced vibrant color scales for light mode
const lightPrimaryScale = {
50: '#EBF4FF', // Ultra light blue
100: '#DBEAFE', // Very light blue
200: '#BFDBFE', // Light blue
300: '#93C5FD', // Light medium blue
400: '#60A5FA', // Medium blue
500: '#3B82F6', // Base blue (main)
600: '#2563EB', // Medium dark blue
700: '#1D4ED8', // Dark blue
800: '#1E40AF', // Very dark blue
900: '#1E3A8A', // Ultra dark blue
A100: '#82B1FF', // Accent light
A200: '#448AFF', // Accent medium
A400: '#2979FF', // Accent dark
A700: '#2962FF', // Accent ultra dark
// Legacy compatibility
main: '#3B82F6',
light: '#60A5FA',
dark: '#1D4ED8',
contrastText: '#FFFFFF',
};
const lightSecondaryScale = {
50: '#F3E8FF', // Ultra light violet
100: '#E9D5FF', // Very light violet
200: '#DDD6FE', // Light violet
300: '#C4B5FD', // Light medium violet
400: '#A78BFA', // Medium violet
500: '#8B5CF6', // Base violet (main)
600: '#7C3AED', // Medium dark violet
700: '#6D28D9', // Dark violet
800: '#5B21B6', // Very dark violet
900: '#4C1D95', // Ultra dark violet
A100: '#B388FF', // Accent light
A200: '#7C4DFF', // Accent medium
A400: '#651FFF', // Accent dark
A700: '#6200EA', // Accent ultra dark
// Legacy compatibility
main: '#8B5CF6',
light: '#A78BFA',
dark: '#7C3AED',
contrastText: '#FFFFFF',
};
const lightTertiaryScale = {
50: '#ECFDF5', // Ultra light emerald
100: '#D1FAE5', // Very light emerald
200: '#A7F3D0', // Light emerald
300: '#6EE7B7', // Light medium emerald
400: '#34D399', // Medium emerald
500: '#10B981', // Base emerald (main)
600: '#059669', // Medium dark emerald
700: '#047857', // Dark emerald
800: '#065F46', // Very dark emerald
900: '#064E3B', // Ultra dark emerald
A100: '#69F0AE', // Accent light
A200: '#00E676', // Accent medium
A400: '#00C853', // Accent dark
A700: '#00B248', // Accent ultra dark
// Legacy compatibility
main: '#10B981',
light: '#34D399',
dark: '#059669',
contrastText: '#FFFFFF',
};
// Light mode palette
const lightPalette = {
primary: lightPrimaryScale,
secondary: lightSecondaryScale,
tertiary: lightTertiaryScale,
background: {
default: '#F8FAFC', // Slate 50
paper: '#FFFFFF', // White
glass: 'rgba(255, 255, 255, 0.25)', // Glass overlay
primary: '#FFFFFF', // White
secondary: '#F8FAFC', // Slate 50
tertiary: '#F1F5F9', // Slate 100
hover: 'rgba(71, 85, 105, 0.04)', // Slate 600 with low opacity
active: 'rgba(59, 130, 246, 0.08)', // Primary with low opacity
disabled: '#F1F5F9', // Slate 100
},
surface: {
primary: 'rgba(255, 255, 255, 0.8)', // Primary glass surface
secondary: 'rgba(248, 250, 252, 0.9)', // Secondary glass surface
tertiary: 'rgba(241, 245, 249, 0.7)', // Tertiary glass surface
},
text: {
primary: '#0F172A', // Slate 900
secondary: '#475569', // Slate 600
disabled: '#94A3B8', // Slate 400
hint: '#CBD5E1', // Slate 300
placeholder: '#94A3B8', // Slate 400
},
error: {
50: '#FEF2F2', // Red 50
100: '#FEE2E2', // Red 100
200: '#FECACA', // Red 200
300: '#FCA5A5', // Red 300
400: '#F87171', // Red 400
500: '#EF4444', // Red 500
600: '#DC2626', // Red 600
700: '#B91C1C', // Red 700
800: '#991B1B', // Red 800
900: '#7F1D1D', // Red 900
A100: '#FF8A80', // Red A100
A200: '#FF5252', // Red A200
A400: '#FF1744', // Red A400
A700: '#D50000', // Red A700
// Legacy compatibility
main: '#EF4444',
light: '#F87171',
dark: '#DC2626',
contrastText: '#FFFFFF',
},
warning: {
50: '#FFFBEB', // Amber 50
100: '#FEF3C7', // Amber 100
200: '#FDE68A', // Amber 200
300: '#FCD34D', // Amber 300
400: '#FBBF24', // Amber 400
500: '#F59E0B', // Amber 500
600: '#D97706', // Amber 600
700: '#B45309', // Amber 700
800: '#92400E', // Amber 800
900: '#78350F', // Amber 900
A100: '#FFE57F', // Amber A100
A200: '#FFD740', // Amber A200
A400: '#FFC400', // Amber A400
A700: '#FFAB00', // Amber A700
// Legacy compatibility
main: '#F59E0B',
light: '#FBBF24',
dark: '#D97706',
contrastText: '#FFFFFF',
},
info: {
50: '#ECFEFF', // Cyan 50
100: '#CFFAFE', // Cyan 100
200: '#A5F3FC', // Cyan 200
300: '#67E8F9', // Cyan 300
400: '#22D3EE', // Cyan 400
500: '#06B6D4', // Cyan 500
600: '#0891B2', // Cyan 600
700: '#0E7490', // Cyan 700
800: '#155E75', // Cyan 800
900: '#164E63', // Cyan 900
A100: '#84FFFF', // Cyan A100
A200: '#18FFFF', // Cyan A200
A400: '#00E5FF', // Cyan A400
A700: '#00B8D4', // Cyan A700
// Legacy compatibility
main: '#06B6D4',
light: '#22D3EE',
dark: '#0891B2',
contrastText: '#FFFFFF',
},
success: {
50: '#ECFDF5', // Emerald 50
100: '#D1FAE5', // Emerald 100
200: '#A7F3D0', // Emerald 200
300: '#6EE7B7', // Emerald 300
400: '#34D399', // Emerald 400
500: '#10B981', // Emerald 500
600: '#059669', // Emerald 600
700: '#047857', // Emerald 700
800: '#065F46', // Emerald 800
900: '#064E3B', // Emerald 900
A100: '#69F0AE', // Emerald A100
A200: '#00E676', // Emerald A200
A400: '#00C853', // Emerald A400
A700: '#00B248', // Emerald A700
// Legacy compatibility
main: '#10B981',
light: '#34D399',
dark: '#059669',
contrastText: '#FFFFFF',
},
divider: 'rgba(148, 163, 184, 0.2)', // Slate 400 with opacity
action: {
active: '#475569', // Slate 600
hover: 'rgba(71, 85, 105, 0.04)', // Slate 600 with low opacity
selected: 'rgba(59, 130, 246, 0.08)', // Primary with low opacity
disabled: '#CBD5E1', // Slate 300
disabledBackground: 'rgba(203, 213, 225, 0.12)', // Slate 300 with opacity
},
border: {
primary: 'rgba(148, 163, 184, 0.3)', // Slate 400 with opacity
secondary: 'rgba(203, 213, 225, 0.5)', // Slate 300 with opacity
glass: 'rgba(255, 255, 255, 0.2)', // Glass border
hover: 'rgba(59, 130, 246, 0.3)', // Primary with opacity
default: 'rgba(148, 163, 184, 0.2)', // Slate 400 with low opacity
light: 'rgba(203, 213, 225, 0.4)', // Slate 300 with opacity
},
};
// Enhanced dark mode color scales
const darkPrimaryScale = {
50: '#EFF6FF', // Blue 50
100: '#DBEAFE', // Blue 100
200: '#BFDBFE', // Blue 200
300: '#93C5FD', // Blue 300
400: '#60A5FA', // Blue 400
500: '#3B82F6', // Blue 500
600: '#2563EB', // Blue 600
700: '#1D4ED8', // Blue 700
800: '#1E40AF', // Blue 800
900: '#1E3A8A', // Blue 900
A100: '#82B1FF', // Blue A100
A200: '#448AFF', // Blue A200
A400: '#2979FF', // Blue A400
A700: '#2962FF', // Blue A700
// Legacy compatibility
main: '#3B82F6',
light: '#60A5FA',
dark: '#1D4ED8',
contrastText: '#FFFFFF',
};
const darkSecondaryScale = {
50: '#F5F3FF', // Violet 50
100: '#EDE9FE', // Violet 100
200: '#DDD6FE', // Violet 200
300: '#C4B5FD', // Violet 300
400: '#A78BFA', // Violet 400
500: '#8B5CF6', // Violet 500
600: '#7C3AED', // Violet 600
700: '#6D28D9', // Violet 700
800: '#5B21B6', // Violet 800
900: '#4C1D95', // Violet 900
A100: '#B388FF', // Violet A100
A200: '#7C4DFF', // Violet A200
A400: '#651FFF', // Violet A400
A700: '#6200EA', // Violet A700
// Legacy compatibility
main: '#8B5CF6',
light: '#A78BFA',
dark: '#7C3AED',
contrastText: '#FFFFFF',
};
const darkTertiaryScale = {
50: '#ECFDF5', // Emerald 50
100: '#D1FAE5', // Emerald 100
200: '#A7F3D0', // Emerald 200
300: '#6EE7B7', // Emerald 300
400: '#34D399', // Emerald 400
500: '#10B981', // Emerald 500
600: '#059669', // Emerald 600
700: '#047857', // Emerald 700
800: '#065F46', // Emerald 800
900: '#064E3B', // Emerald 900
A100: '#69F0AE', // Emerald A100
A200: '#00E676', // Emerald A200
A400: '#00C853', // Emerald A400
A700: '#00B248', // Emerald A700
// Legacy compatibility
main: '#10B981',
light: '#34D399',
dark: '#059669',
contrastText: '#FFFFFF',
};
// Dark mode palette
const darkPalette = {
primary: {
...darkPrimaryScale,
// Legacy compatibility
main: darkPrimaryScale[400],
light: darkPrimaryScale[300],
dark: darkPrimaryScale[500],
contrastText: '#0F172A',
},
secondary: {
...darkSecondaryScale,
// Legacy compatibility
main: darkSecondaryScale[400],
light: darkSecondaryScale[300],
dark: darkSecondaryScale[500],
contrastText: '#0F172A',
},
tertiary: {
...darkTertiaryScale,
// Legacy compatibility
main: darkTertiaryScale[400],
light: darkTertiaryScale[300],
dark: darkTertiaryScale[500],
contrastText: '#0F172A',
},
background: {
default: '#0F172A', // Slate 900
paper: '#1E293B', // Slate 800
glass: 'rgba(30, 41, 59, 0.4)', // Glass overlay
primary: '#1E293B', // Slate 800
secondary: '#334155', // Slate 700
tertiary: '#475569', // Slate 600
hover: 'rgba(203, 213, 225, 0.08)', // Slate 300 with low opacity
active: 'rgba(96, 165, 250, 0.16)', // Primary with low opacity
disabled: '#334155', // Slate 700
},
surface: {
primary: 'rgba(30, 41, 59, 0.8)', // Primary glass surface
secondary: 'rgba(51, 65, 85, 0.9)', // Secondary glass surface
tertiary: 'rgba(71, 85, 105, 0.7)', // Tertiary glass surface
},
text: {
primary: '#F8FAFC', // Slate 50
secondary: '#CBD5E1', // Slate 300
disabled: '#64748B', // Slate 500
hint: '#475569', // Slate 600
placeholder: '#64748B', // Slate 500
},
error: {
50: '#FEF2F2', // Red 50
100: '#FEE2E2', // Red 100
200: '#FECACA', // Red 200
300: '#FCA5A5', // Red 300
400: '#F87171', // Red 400
500: '#EF4444', // Red 500
600: '#DC2626', // Red 600
700: '#B91C1C', // Red 700
800: '#991B1B', // Red 800
900: '#7F1D1D', // Red 900
A100: '#FF8A80', // Red A100
A200: '#FF5252', // Red A200
A400: '#FF1744', // Red A400
A700: '#D50000', // Red A700
// Legacy compatibility
main: '#F87171',
light: '#FCA5A5',
dark: '#EF4444',
contrastText: '#0F172A',
},
warning: {
50: '#FFFBEB', // Amber 50
100: '#FEF3C7', // Amber 100
200: '#FDE68A', // Amber 200
300: '#FCD34D', // Amber 300
400: '#FBBF24', // Amber 400
500: '#F59E0B', // Amber 500
600: '#D97706', // Amber 600
700: '#B45309', // Amber 700
800: '#92400E', // Amber 800
900: '#78350F', // Amber 900
A100: '#FFE57F', // Amber A100
A200: '#FFD740', // Amber A200
A400: '#FFC400', // Amber A400
A700: '#FFAB00', // Amber A700
// Legacy compatibility
main: '#FBBF24',
light: '#FCD34D',
dark: '#F59E0B',
contrastText: '#0F172A',
},
info: {
50: '#ECFEFF', // Cyan 50
100: '#CFFAFE', // Cyan 100
200: '#A5F3FC', // Cyan 200
300: '#67E8F9', // Cyan 300
400: '#22D3EE', // Cyan 400
500: '#06B6D4', // Cyan 500
600: '#0891B2', // Cyan 600
700: '#0E7490', // Cyan 700
800: '#155E75', // Cyan 800
900: '#164E63', // Cyan 900
A100: '#84FFFF', // Cyan A100
A200: '#18FFFF', // Cyan A200
A400: '#00E5FF', // Cyan A400
A700: '#00B8D4', // Cyan A700
// Legacy compatibility
main: '#22D3EE',
light: '#67E8F9',
dark: '#06B6D4',
contrastText: '#0F172A',
},
success: {
50: '#ECFDF5', // Emerald 50
100: '#D1FAE5', // Emerald 100
200: '#A7F3D0', // Emerald 200
300: '#6EE7B7', // Emerald 300
400: '#34D399', // Emerald 400
500: '#10B981', // Emerald 500
600: '#059669', // Emerald 600
700: '#047857', // Emerald 700
800: '#065F46', // Emerald 800
900: '#064E3B', // Emerald 900
A100: '#B9F6CA', // Emerald A100
A200: '#69F0AE', // Emerald A200
A400: '#00E676', // Emerald A400
A700: '#00C853', // Emerald A700
// Legacy compatibility
main: '#34D399',
light: '#6EE7B7',
dark: '#10B981',
contrastText: '#0F172A',
},
divider: 'rgba(100, 116, 139, 0.2)', // Slate 500 with opacity
action: {
active: '#CBD5E1', // Slate 300
hover: 'rgba(203, 213, 225, 0.08)', // Slate 300 with low opacity
selected: 'rgba(96, 165, 250, 0.16)', // Primary with low opacity
disabled: '#64748B', // Slate 500
disabledBackground: 'rgba(100, 116, 139, 0.12)', // Slate 500 with opacity
},
border: {
primary: 'rgba(100, 116, 139, 0.4)', // Slate 500 with opacity
secondary: 'rgba(71, 85, 105, 0.6)', // Slate 600 with opacity
glass: 'rgba(30, 41, 59, 0.3)', // Glass border
hover: 'rgba(96, 165, 250, 0.4)', // Primary with opacity
default: 'rgba(100, 116, 139, 0.3)', // Slate 500 with low opacity
light: 'rgba(71, 85, 105, 0.5)', // Slate 600 with opacity
},
};
// Utility function to get palette by mode
const getPalette = (mode) => {
return mode === 'dark' ? darkPalette : lightPalette;
};
// Utility function to create custom palette variants
const createPaletteVariant = (basePalette, overrides) => {
return {
...basePalette,
...overrides,
primary: {
...basePalette.primary,
...overrides.primary,
},
secondary: {
...basePalette.secondary,
...overrides.secondary,
},
background: {
...basePalette.background,
...overrides.background,
},
surface: {
...basePalette.surface,
...overrides.surface,
},
text: {
...basePalette.text,
...overrides.text,
},
error: {
...basePalette.error,
...overrides.error,
},
warning: {
...basePalette.warning,
...overrides.warning,
},
info: {
...basePalette.info,
...overrides.info,
},
success: {
...basePalette.success,
...overrides.success,
},
action: {
...basePalette.action,
...overrides.action,
},
border: {
...basePalette.border,
...overrides.border,
},
};
};
/**
* @fileoverview Enhanced Glassmorphism Effects
* Phase 2: Advanced glassmorphism effects with multi-layer system and theme modes
*/
// Legacy glassmorphism configurations
const lightGlassmorphism = {
light: {
backdropFilter: 'blur(10px) saturate(180%)',
backgroundColor: 'rgba(255, 255, 255, 0.25)',
border: '1px solid rgba(255, 255, 255, 0.18)',
boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)'
},
medium: {
backdropFilter: 'blur(16px) saturate(180%)',
backgroundColor: 'rgba(255, 255, 255, 0.35)',
border: '1px solid rgba(255, 255, 255, 0.25)',
boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.45)'
},
heavy: {
backdropFilter: 'blur(20px) saturate(180%)',
backgroundColor: 'rgba(255, 255, 255, 0.45)',
border: '1px solid rgba(255, 255, 255, 0.35)',
boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.55)'
}
};
const darkGlassmorphism = {
light: {
backdropFilter: 'blur(10px) saturate(180%)',
backgroundColor: 'rgba(17, 25, 40, 0.25)',
border: '1px solid rgba(255, 255, 255, 0.125)',
boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)'
},
medium: {
backdropFilter: 'blur(16px) saturate(180%)',
backgroundColor: 'rgba(17, 25, 40, 0.35)',
border: '1px solid rgba(255, 255, 255, 0.18)',
boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.45)'
},
heavy: {
backdropFilter: 'blur(20px) saturate(180%)',
backgroundColor: 'rgba(17, 25, 40, 0.45)',
border: '1px solid rgba(255, 255, 255, 0.25)',
boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.55)'
}
};
const glassmorphismEffects = {
light: lightGlassmorphism,
dark: darkGlassmorphism
};
// Enhanced Glass Variants with Multi-layer System
const enhancedGlassVariants = {
subtle: {
surface: {
light: {
background: {
blur: 8,
opacity: 0.15,
saturation: 120,
brightness: 105,
tint: 'rgba(255, 255, 255, 0.15)'
},
border: {
opacity: 0.1,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05))'
},
shadow: {
outer: '0 2px 8px rgba(0, 0, 0, 0.1)',
glow: '0 0 16px rgba(255, 255, 255, 0.1)'
},
effects: {
gradientBorder: true,
innerShadow: false,
outerGlow: true
}
},
dark: {
background: {
blur: 8,
opacity: 0.2,
saturation: 140,
brightness: 90,
tint: 'rgba(17, 25, 40, 0.2)'
},
border: {
opacity: 0.15,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05))'
},
shadow: {
outer: '0 2px 8px rgba(0, 0, 0, 0.3)',
glow: '0 0 16px rgba(100, 150, 255, 0.1)'
},
effects: {
gradientBorder: true,
innerShadow: false,
outerGlow: true
}
}
},
elevated: {
light: {
background: {
blur: 12,
opacity: 0.2,
saturation: 130,
brightness: 110,
tint: 'rgba(255, 255, 255, 0.2)'
},
border: {
opacity: 0.15,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1))'
},
shadow: {
outer: '0 4px 16px rgba(0, 0, 0, 0.15)',
glow: '0 0 20px rgba(255, 255, 255, 0.15)'
},
effects: {
gradientBorder: true,
innerShadow: false,
outerGlow: true
}
},
dark: {
background: {
blur: 12,
opacity: 0.25,
saturation: 150,
brightness: 85,
tint: 'rgba(17, 25, 40, 0.25)'
},
border: {
opacity: 0.2,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08))'
},
shadow: {
outer: '0 4px 16px rgba(0, 0, 0, 0.4)',
glow: '0 0 20px rgba(100, 150, 255, 0.15)'
},
effects: {
gradientBorder: true,
innerShadow: false,
outerGlow: true
}
}
},
floating: {
light: {
background: {
blur: 16,
opacity: 0.25,
saturation: 140,
brightness: 115,
tint: 'rgba(255, 255, 255, 0.25)'
},
border: {
opacity: 0.2,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15))'
},
shadow: {
outer: '0 8px 24px rgba(0, 0, 0, 0.2)',
glow: '0 0 24px rgba(255, 255, 255, 0.2)'
},
effects: {
gradientBorder: true,
innerShadow: false,
outerGlow: true
}
},
dark: {
background: {
blur: 16,
opacity: 0.3,
saturation: 160,
brightness: 80,
tint: 'rgba(17, 25, 40, 0.3)'
},
border: {
opacity: 0.25,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1))'
},
shadow: {
outer: '0 8px 24px rgba(0, 0, 0, 0.5)',
glow: '0 0 24px rgba(100, 150, 255, 0.2)'
},
effects: {
gradientBorder: true,
innerShadow: false,
outerGlow: true
}
}
},
modal: {
light: {
background: {
blur: 20,
opacity: 0.3,
saturation: 150,
brightness: 120,
tint: 'rgba(255, 255, 255, 0.3)'
},
border: {
opacity: 0.25,
width: 2,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.2))'
},
shadow: {
outer: '0 12px 32px rgba(0, 0, 0, 0.25)',
glow: '0 0 32px rgba(255, 255, 255, 0.25)'
},
effects: {
gradientBorder: true,
innerShadow: false,
outerGlow: true
}
},
dark: {
background: {
blur: 20,
opacity: 0.35,
saturation: 170,
brightness: 75,
tint: 'rgba(17, 25, 40, 0.35)'
},
border: {
opacity: 0.3,
width: 2,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15))'
},
shadow: {
outer: '0 12px 32px rgba(0, 0, 0, 0.6)',
glow: '0 0 32px rgba(100, 150, 255, 0.25)'
},
effects: {
gradientBorder: true,
innerShadow: false,
outerGlow: true
}
}
}
},
prominent: {
surface: {
light: {
background: {
blur: 10,
opacity: 0.25,
saturation: 140,
brightness: 110,
tint: 'rgba(255, 255, 255, 0.25)'
},
border: {
opacity: 0.2,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1))'
},
shadow: {
inner: 'inset 0 1px 2px rgba(255, 255, 255, 0.3)',
outer: '0 4px 12px rgba(0, 0, 0, 0.15)',
glow: '0 0 20px rgba(255, 255, 255, 0.2)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
},
dark: {
background: {
blur: 10,
opacity: 0.3,
saturation: 160,
brightness: 85,
tint: 'rgba(17, 25, 40, 0.3)'
},
border: {
opacity: 0.25,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1))'
},
shadow: {
inner: 'inset 0 1px 2px rgba(255, 255, 255, 0.2)',
outer: '0 4px 12px rgba(0, 0, 0, 0.4)',
glow: '0 0 20px rgba(100, 150, 255, 0.2)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
}
},
elevated: {
light: {
background: {
blur: 14,
opacity: 0.3,
saturation: 150,
brightness: 115,
tint: 'rgba(255, 255, 255, 0.3)'
},
border: {
opacity: 0.25,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15))'
},
shadow: {
inner: 'inset 0 1px 3px rgba(255, 255, 255, 0.35)',
outer: '0 6px 18px rgba(0, 0, 0, 0.2)',
glow: '0 0 24px rgba(255, 255, 255, 0.25)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
},
dark: {
background: {
blur: 14,
opacity: 0.35,
saturation: 170,
brightness: 80,
tint: 'rgba(17, 25, 40, 0.35)'
},
border: {
opacity: 0.3,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12))'
},
shadow: {
inner: 'inset 0 1px 3px rgba(255, 255, 255, 0.25)',
outer: '0 6px 18px rgba(0, 0, 0, 0.5)',
glow: '0 0 24px rgba(100, 150, 255, 0.25)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
}
},
floating: {
light: {
background: {
blur: 18,
opacity: 0.35,
saturation: 160,
brightness: 120,
tint: 'rgba(255, 255, 255, 0.35)'
},
border: {
opacity: 0.3,
width: 2,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2))'
},
shadow: {
inner: 'inset 0 2px 4px rgba(255, 255, 255, 0.4)',
outer: '0 10px 28px rgba(0, 0, 0, 0.25)',
glow: '0 0 28px rgba(255, 255, 255, 0.3)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
},
dark: {
background: {
blur: 18,
opacity: 0.4,
saturation: 180,
brightness: 75,
tint: 'rgba(17, 25, 40, 0.4)'
},
border: {
opacity: 0.35,
width: 2,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15))'
},
shadow: {
inner: 'inset 0 2px 4px rgba(255, 255, 255, 0.3)',
outer: '0 10px 28px rgba(0, 0, 0, 0.6)',
glow: '0 0 28px rgba(100, 150, 255, 0.3)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
}
},
modal: {
light: {
background: {
blur: 24,
opacity: 0.4,
saturation: 170,
brightness: 125,
tint: 'rgba(255, 255, 255, 0.4)'
},
border: {
opacity: 0.35,
width: 2,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.25))'
},
shadow: {
inner: 'inset 0 2px 6px rgba(255, 255, 255, 0.45)',
outer: '0 16px 40px rgba(0, 0, 0, 0.3)',
glow: '0 0 40px rgba(255, 255, 255, 0.35)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
},
dark: {
background: {
blur: 24,
opacity: 0.45,
saturation: 190,
brightness: 70,
tint: 'rgba(17, 25, 40, 0.45)'
},
border: {
opacity: 0.4,
width: 2,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2))'
},
shadow: {
inner: 'inset 0 2px 6px rgba(255, 255, 255, 0.35)',
outer: '0 16px 40px rgba(0, 0, 0, 0.7)',
glow: '0 0 40px rgba(100, 150, 255, 0.35)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
}
}
},
frosted: {
surface: {
light: {
background: {
blur: 12,
opacity: 0.3,
saturation: 110,
brightness: 105,
tint: 'rgba(255, 255, 255, 0.3)'
},
border: {
opacity: 0.15,
width: 1
},
shadow: {
outer: '0 3px 10px rgba(0, 0, 0, 0.12)'
},
effects: {
gradientBorder: false,
innerShadow: false,
outerGlow: false
}
},
dark: {
background: {
blur: 12,
opacity: 0.35,
saturation: 130,
brightness: 90,
tint: 'rgba(17, 25, 40, 0.35)'
},
border: {
opacity: 0.2,
width: 1
},
shadow: {
outer: '0 3px 10px rgba(0, 0, 0, 0.35)'
},
effects: {
gradientBorder: false,
innerShadow: false,
outerGlow: false
}
}
},
elevated: {
light: {
background: {
blur: 16,
opacity: 0.35,
saturation: 120,
brightness: 110,
tint: 'rgba(255, 255, 255, 0.35)'
},
border: {
opacity: 0.2,
width: 1
},
shadow: {
outer: '0 5px 15px rgba(0, 0, 0, 0.18)'
},
effects: {
gradientBorder: false,
innerShadow: false,
outerGlow: false
}
},
dark: {
background: {
blur: 16,
opacity: 0.4,
saturation: 140,
brightness: 85,
tint: 'rgba(17, 25, 40, 0.4)'
},
border: {
opacity: 0.25,
width: 1
},
shadow: {
outer: '0 5px 15px rgba(0, 0, 0, 0.45)'
},
effects: {
gradientBorder: false,
innerShadow: false,
outerGlow: false
}
}
},
floating: {
light: {
background: {
blur: 20,
opacity: 0.4,
saturation: 130,
brightness: 115,
tint: 'rgba(255, 255, 255, 0.4)'
},
border: {
opacity: 0.25,
width: 1
},
shadow: {
outer: '0 8px 20px rgba(0, 0, 0, 0.22)'
},
effects: {
gradientBorder: false,
innerShadow: false,
outerGlow: false
}
},
dark: {
background: {
blur: 20,
opacity: 0.45,
saturation: 150,
brightness: 80,
tint: 'rgba(17, 25, 40, 0.45)'
},
border: {
opacity: 0.3,
width: 1
},
shadow: {
outer: '0 8px 20px rgba(0, 0, 0, 0.55)'
},
effects: {
gradientBorder: false,
innerShadow: false,
outerGlow: false
}
}
},
modal: {
light: {
background: {
blur: 28,
opacity: 0.45,
saturation: 140,
brightness: 120,
tint: 'rgba(255, 255, 255, 0.45)'
},
border: {
opacity: 0.3,
width: 2
},
shadow: {
outer: '0 12px 28px rgba(0, 0, 0, 0.28)'
},
effects: {
gradientBorder: false,
innerShadow: false,
outerGlow: false
}
},
dark: {
background: {
blur: 28,
opacity: 0.5,
saturation: 160,
brightness: 75,
tint: 'rgba(17, 25, 40, 0.5)'
},
border: {
opacity: 0.35,
width: 2
},
shadow: {
outer: '0 12px 28px rgba(0, 0, 0, 0.65)'
},
effects: {
gradientBorder: false,
innerShadow: false,
outerGlow: false
}
}
}
},
crystal: {
surface: {
light: {
background: {
blur: 6,
opacity: 0.2,
saturation: 160,
brightness: 120,
tint: 'rgba(255, 255, 255, 0.2)'
},
border: {
opacity: 0.3,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1))'
},
shadow: {
inner: 'inset 0 1px 2px rgba(255, 255, 255, 0.5)',
outer: '0 2px 6px rgba(0, 0, 0, 0.08)',
glow: '0 0 12px rgba(255, 255, 255, 0.3)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
},
dark: {
background: {
blur: 6,
opacity: 0.25,
saturation: 180,
brightness: 95,
tint: 'rgba(17, 25, 40, 0.25)'
},
border: {
opacity: 0.35,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1))'
},
shadow: {
inner: 'inset 0 1px 2px rgba(255, 255, 255, 0.4)',
outer: '0 2px 6px rgba(0, 0, 0, 0.25)',
glow: '0 0 12px rgba(100, 150, 255, 0.3)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
}
},
elevated: {
light: {
background: {
blur: 8,
opacity: 0.25,
saturation: 170,
brightness: 125,
tint: 'rgba(255, 255, 255, 0.25)'
},
border: {
opacity: 0.35,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15))'
},
shadow: {
inner: 'inset 0 1px 3px rgba(255, 255, 255, 0.55)',
outer: '0 4px 10px rgba(0, 0, 0, 0.12)',
glow: '0 0 16px rgba(255, 255, 255, 0.35)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
},
dark: {
background: {
blur: 8,
opacity: 0.3,
saturation: 190,
brightness: 90,
tint: 'rgba(17, 25, 40, 0.3)'
},
border: {
opacity: 0.4,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.15))'
},
shadow: {
inner: 'inset 0 1px 3px rgba(255, 255, 255, 0.45)',
outer: '0 4px 10px rgba(0, 0, 0, 0.35)',
glow: '0 0 16px rgba(100, 150, 255, 0.35)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
}
},
floating: {
light: {
background: {
blur: 10,
opacity: 0.3,
saturation: 180,
brightness: 130,
tint: 'rgba(255, 255, 255, 0.3)'
},
border: {
opacity: 0.4,
width: 2,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))'
},
shadow: {
inner: 'inset 0 2px 4px rgba(255, 255, 255, 0.6)',
outer: '0 6px 16px rgba(0, 0, 0, 0.15)',
glow: '0 0 20px rgba(255, 255, 255, 0.4)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
},
dark: {
background: {
blur: 10,
opacity: 0.35,
saturation: 200,
brightness: 85,
tint: 'rgba(17, 25, 40, 0.35)'
},
border: {
opacity: 0.45,
width: 2,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.2))'
},
shadow: {
inner: 'inset 0 2px 4px rgba(255, 255, 255, 0.5)',
outer: '0 6px 16px rgba(0, 0, 0, 0.45)',
glow: '0 0 20px rgba(100, 150, 255, 0.4)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
}
},
modal: {
light: {
background: {
blur: 14,
opacity: 0.35,
saturation: 190,
brightness: 135,
tint: 'rgba(255, 255, 255, 0.35)'
},
border: {
opacity: 0.45,
width: 2,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25))'
},
shadow: {
inner: 'inset 0 2px 6px rgba(255, 255, 255, 0.65)',
outer: '0 10px 24px rgba(0, 0, 0, 0.2)',
glow: '0 0 32px rgba(255, 255, 255, 0.45)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
},
dark: {
background: {
blur: 14,
opacity: 0.4,
saturation: 210,
brightness: 80,
tint: 'rgba(17, 25, 40, 0.4)'
},
border: {
opacity: 0.5,
width: 2,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.25))'
},
shadow: {
inner: 'inset 0 2px 6px rgba(255, 255, 255, 0.55)',
outer: '0 10px 24px rgba(0, 0, 0, 0.55)',
glow: '0 0 32px rgba(100, 150, 255, 0.45)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true
}
}
}
},
ethereal: {
surface: {
light: {
background: {
blur: 15,
opacity: 0.12,
saturation: 200,
brightness: 130,
tint: 'rgba(255, 255, 255, 0.12)'
},
border: {
opacity: 0.4,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6))'
},
shadow: {
inner: 'inset 0 1px 3px rgba(255, 255, 255, 0.7)',
outer: '0 4px 12px rgba(0, 0, 0, 0.05)',
glow: '0 0 24px rgba(255, 255, 255, 0.4)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true,
dynamicBlur: 2
}
},
dark: {
background: {
blur: 15,
opacity: 0.15,
saturation: 220,
brightness: 110,
tint: 'rgba(17, 25, 40, 0.15)'
},
border: {
opacity: 0.45,
width: 1,
gradient: 'linear-gradient(135deg, rgba(100, 150, 255, 0.6), rgba(255, 255, 255, 0.1), rgba(100, 150, 255, 0.6))'
},
shadow: {
inner: 'inset 0 1px 3px rgba(255, 255, 255, 0.6)',
outer: '0 4px 12px rgba(0, 0, 0, 0.15)',
glow: '0 0 24px rgba(100, 150, 255, 0.4)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true,
dynamicBlur: 2
}
}
},
elevated: {
light: {
background: {
blur: 18,
opacity: 0.15,
saturation: 210,
brightness: 135,
tint: 'rgba(255, 255, 255, 0.15)'
},
border: {
opacity: 0.45,
width: 1,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.65))'
},
shadow: {
inner: 'inset 0 2px 4px rgba(255, 255, 255, 0.75)',
outer: '0 6px 18px rgba(0, 0, 0, 0.08)',
glow: '0 0 28px rgba(255, 255, 255, 0.45)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true,
dynamicBlur: 3
}
},
dark: {
background: {
blur: 18,
opacity: 0.18,
saturation: 230,
brightness: 105,
tint: 'rgba(17, 25, 40, 0.18)'
},
border: {
opacity: 0.5,
width: 1,
gradient: 'linear-gradient(135deg, rgba(100, 150, 255, 0.65), rgba(255, 255, 255, 0.15), rgba(100, 150, 255, 0.65))'
},
shadow: {
inner: 'inset 0 2px 4px rgba(255, 255, 255, 0.65)',
outer: '0 6px 18px rgba(0, 0, 0, 0.25)',
glow: '0 0 28px rgba(100, 150, 255, 0.45)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true,
dynamicBlur: 3
}
}
},
floating: {
light: {
background: {
blur: 22,
opacity: 0.18,
saturation: 220,
brightness: 140,
tint: 'rgba(255, 255, 255, 0.18)'
},
border: {
opacity: 0.5,
width: 2,
gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7))'
},
shadow: {
inner: 'inset 0 2px 6px rgba(255, 255, 255, 0.8)',
outer: '0 8px 24px rgba(0, 0, 0, 0.1)',
glow: '0 0 36px rgba(255, 255, 255, 0.5)'
},
effects: {
gradientBorder: true,
innerShadow: true,
outerGlow: true,
dynamicBlur: 4
}
},
dark: {
background: {
blur: 22,
opacity: 0.22,
saturation: 240,
brightness: 100,
tint: 'rgba(17, 25, 40, 0.22)'
},
border: {
opacity: 0.55,
width: 2,
gradient: 'linear-gradient(135deg, rgba(100, 150, 255, 0.7), rgba(255, 255, 255, 0.2), rgba(100, 150, 255, 0.7))'
},
shadow: {
inner: 'inset 0 2px 6px rgba(255, 255, 255, 0.7)',
outer: '0 8px 24px rgba(0, 0, 0, 0.35)',
glow: '0 0 36px rgba(100, 150, 255, 0.5)'
},
effects: {