@brightweblabs/theme 0.8.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/surfaces.css +46 -2
package/package.json
CHANGED
package/src/surfaces.css
CHANGED
|
@@ -3,18 +3,54 @@
|
|
|
3
3
|
Unlayered, these beat @layer utilities and e.g. p-0 on the CRM table card
|
|
4
4
|
silently loses to the default card padding. */
|
|
5
5
|
@layer components {
|
|
6
|
+
.card-root,
|
|
6
7
|
.surface-card {
|
|
7
8
|
border-radius: var(--radius-card);
|
|
8
9
|
border: 1px solid var(--border-hairline);
|
|
9
10
|
background: var(--surface-card);
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
color: var(--card-foreground);
|
|
12
|
+
box-shadow: var(--dashboard-shadow-sm);
|
|
12
13
|
}
|
|
13
14
|
|
|
15
|
+
.card-root[data-variant="light"],
|
|
14
16
|
.surface-card.is-light {
|
|
15
17
|
background: var(--surface-card-light);
|
|
16
18
|
}
|
|
17
19
|
|
|
20
|
+
.card-root[data-variant="elevated"] {
|
|
21
|
+
box-shadow: var(--dashboard-shadow-md);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.card-root[data-variant="interactive"] {
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.card-root[data-variant="interactive"]:hover,
|
|
30
|
+
.card-root[data-variant="interactive"]:focus-visible,
|
|
31
|
+
.card-root[data-variant="interactive"]:focus-within {
|
|
32
|
+
border-color: var(--border-selection);
|
|
33
|
+
box-shadow: var(--dashboard-shadow-md);
|
|
34
|
+
transform: translateY(-1px);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.card-root[data-variant="interactive"]:focus-visible,
|
|
38
|
+
.card-root[data-variant="interactive"]:focus-within {
|
|
39
|
+
outline: 2px solid var(--ring);
|
|
40
|
+
outline-offset: 2px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.card-root[data-variant="insight"] {
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
border-color: transparent;
|
|
46
|
+
background: var(--card);
|
|
47
|
+
box-shadow: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.card-enter {
|
|
51
|
+
animation: surface-fade-in 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
|
|
52
|
+
}
|
|
53
|
+
|
|
18
54
|
/* A near-black panel has strong figure/ground in light mode. In dark mode it
|
|
19
55
|
elevates above the page through a lighter accent mix, border, and shadow. */
|
|
20
56
|
.brand-panel {
|
|
@@ -120,6 +156,14 @@
|
|
|
120
156
|
}
|
|
121
157
|
|
|
122
158
|
@media (prefers-reduced-motion: reduce) {
|
|
159
|
+
.card-root,
|
|
160
|
+
.surface-card {
|
|
161
|
+
animation: none;
|
|
162
|
+
opacity: 1;
|
|
163
|
+
transform: none;
|
|
164
|
+
transition: none;
|
|
165
|
+
}
|
|
166
|
+
|
|
123
167
|
.skeleton-ghost::after {
|
|
124
168
|
display: none;
|
|
125
169
|
}
|