1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
import { style, styleVariants } from "@vanilla-extract/css"
import { themeContract } from "./theme.css"
/**
* Base glass-morphism effect
* Provides the signature frosted glass look
*/
const glassBase = style({
backdropFilter: "blur(12px)",
WebkitBackdropFilter: "blur(12px)",
border: `1px solid ${themeContract.colors.document.border}`,
borderRadius: themeContract.radii.lg,
})
/**
* Glass effect variants
*/
export const glass = styleVariants({
/**
* Light glass effect - subtle background
*/
light: [
glassBase,
{
background: "rgba(255, 255, 255, 0.05)",
},
],
/**
* Medium glass effect - more visible
*/
medium: [
glassBase,
{
background: "rgba(255, 255, 255, 0.08)",
},
],
/**
* Dark glass effect - prominent
*/
dark: [
glassBase,
{
background: "rgba(15, 20, 25, 0.8)",
backdropFilter: "blur(20px)",
WebkitBackdropFilter: "blur(20px)",
},
],
})
/**
* Glass panel styles for larger containers
*/
export const glassPanel = styleVariants({
default: {
background: "rgba(15, 20, 25, 0.8)",
backdropFilter: "blur(20px)",
WebkitBackdropFilter: "blur(20px)",
border: `1px solid ${themeContract.colors.document.border}`,
borderRadius: themeContract.radii.xl,
},
bordered: {
background: "rgba(15, 20, 25, 0.8)",
backdropFilter: "blur(20px)",
WebkitBackdropFilter: "blur(20px)",
border: `2px solid ${themeContract.colors.document.border}`,
borderRadius: themeContract.radii.xl,
},
})
/**
* Focus ring styles for accessibility
*/
export const focusRing = style({
outline: "none",
selectors: {
"&:focus-visible": {
outline: `2px solid ${themeContract.colors.accent.primary}`,
outlineOffset: "2px",
},
},
})
/**
* Transition presets
*/
export const transition = styleVariants({
fast: {
transition: themeContract.transitions.fast,
},
normal: {
transition: themeContract.transitions.normal,
},
slow: {
transition: themeContract.transitions.slow,
},
all: {
transition: `all ${themeContract.transitions.normal}`,
},
colors: {
transition: `background-color ${themeContract.transitions.normal}, color ${themeContract.transitions.normal}, border-color ${themeContract.transitions.normal}`,
},
transform: {
transition: `transform ${themeContract.transitions.normal}`,
},
})
/**
* Hover glow effect
*/
export const hoverGlow = style({
position: "relative",
transition: themeContract.transitions.normal,
selectors: {
"&:hover": {
boxShadow: `0 0 20px ${themeContract.colors.document.glow}`,
},
},
})
|