elements-kit 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/dist/ui/card/card.css +102 -7
- package/package.json +1 -1
package/dist/ui/card/card.css
CHANGED
|
@@ -56,6 +56,62 @@
|
|
|
56
56
|
--card-border-radius: var(--radius-6);
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
+
:where([data-base-color]) {
|
|
60
|
+
--card-surface-box-shadow: 0 0 0 1px var(--base-color-a5);
|
|
61
|
+
--card-surface-hover-box-shadow: 0 0 0 1px var(--base-color-a7);
|
|
62
|
+
--card-surface-active-box-shadow: 0 0 0 1px var(--base-color-a6);
|
|
63
|
+
--card-elevated-box-shadow-inner: 0 0 0 1px var(--base-color-a3), 0 0 0 1px transparent,
|
|
64
|
+
0 0 0 .5px var(--black-a1), 0 1px 1px 0 var(--base-color-a2),
|
|
65
|
+
0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
|
|
66
|
+
--card-elevated-box-shadow-outer: 0 0 0 0 var(--base-color-a3), 0 0 0 0 transparent, 0 0 0 0 var(--black-a1),
|
|
67
|
+
0 1px 1px -1px var(--base-color-a2), 0 2px 1px -2px var(--black-a1),
|
|
68
|
+
0 1px 3px -1px var(--black-a1);
|
|
69
|
+
--card-elevated-hover-box-shadow-inner: 0 0 0 1px var(--base-color-a4), 0 1px 1px 1px var(--black-a1),
|
|
70
|
+
0 2px 1px -1px var(--base-color-a3), 0 2px 3px -2px var(--black-a1),
|
|
71
|
+
0 3px 12px -4px var(--base-color-a3), 0 4px 16px -8px var(--black-a1);
|
|
72
|
+
--card-elevated-hover-box-shadow-outer: 0 0 0 0 var(--base-color-a4), 0 1px 1px 0 var(--black-a1),
|
|
73
|
+
0 2px 1px -2px var(--base-color-a3), 0 2px 3px -3px var(--black-a1),
|
|
74
|
+
0 3px 12px -5px var(--base-color-a3), 0 4px 16px -9px var(--black-a1);
|
|
75
|
+
--card-elevated-active-box-shadow-inner: 0 0 0 1px var(--base-color-a3), 0 0 0 1px transparent,
|
|
76
|
+
0 0 0 .5px var(--black-a1), 0 1px 1px 0 var(--base-color-a4),
|
|
77
|
+
0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
|
|
78
|
+
--card-elevated-active-box-shadow-outer: 0 0 0 0 var(--base-color-a3), 0 0 0 0 transparent, 0 0 0 0 var(--black-a1),
|
|
79
|
+
0 1px 1px -1px var(--base-color-a4), 0 2px 1px -2px var(--black-a1),
|
|
80
|
+
0 1px 3px -1px var(--black-a1);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@supports (color: color-mix(in oklab, white, black)) {
|
|
84
|
+
:where([data-base-color]) {
|
|
85
|
+
--card-surface-box-shadow: 0 0 0 1px
|
|
86
|
+
color-mix(in oklab, var(--base-color-a5), var(--base-color-5) 25%);
|
|
87
|
+
--card-surface-hover-box-shadow: 0 0 0 1px
|
|
88
|
+
color-mix(in oklab, var(--base-color-a7), var(--base-color-7) 25%);
|
|
89
|
+
--card-surface-active-box-shadow: 0 0 0 1px
|
|
90
|
+
color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
:is(.dark, .dark-theme), :is(.dark, .dark-theme) :where([data-base-color]:not(.light, .light-theme)) {
|
|
95
|
+
--card-elevated-box-shadow-inner: 0 0 0 1px var(--base-color-a6), 0 0 0 1px transparent,
|
|
96
|
+
0 0 0 .5px var(--black-a3), 0 1px 1px 0 var(--black-a6),
|
|
97
|
+
0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
|
|
98
|
+
--card-elevated-box-shadow-outer: 0 0 0 0 var(--base-color-a6), 0 0 0 0 transparent, 0 0 0 0 var(--black-a3),
|
|
99
|
+
0 1px 1px -1px var(--black-a6), 0 2px 1px -2px var(--black-a6),
|
|
100
|
+
0 1px 3px -1px var(--black-a5);
|
|
101
|
+
--card-elevated-hover-box-shadow-inner: 0 0 0 1px var(--base-color-a6), 0 0 1px 1px var(--base-color-a4),
|
|
102
|
+
0 0 1px -1px var(--base-color-a4), 0 0 3px -2px var(--base-color-a3),
|
|
103
|
+
0 0 12px -2px var(--base-color-a3), 0 0 16px -8px var(--base-color-a7);
|
|
104
|
+
--card-elevated-hover-box-shadow-outer: 0 0 0 0 var(--base-color-a6), 0 0 1px 0 var(--base-color-a4),
|
|
105
|
+
0 0 1px -2px var(--base-color-a4), 0 0 3px -3px var(--base-color-a3),
|
|
106
|
+
0 0 12px -3px var(--base-color-a3), 0 0 16px -9px var(--base-color-a7);
|
|
107
|
+
--card-elevated-active-box-shadow-inner: 0 0 0 1px var(--base-color-a6), 0 0 0 1px transparent,
|
|
108
|
+
0 0 0 .5px var(--black-a3), 0 1px 1px 0 var(--black-a6),
|
|
109
|
+
0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
|
|
110
|
+
--card-elevated-active-box-shadow-outer: 0 0 0 0 var(--base-color-a6), 0 0 0 0 transparent, 0 0 0 0 var(--black-a3),
|
|
111
|
+
0 1px 1px -1px var(--black-a6), 0 2px 1px -2px var(--black-a6),
|
|
112
|
+
0 1px 3px -1px var(--black-a5);
|
|
113
|
+
}
|
|
114
|
+
|
|
59
115
|
.x-card, .x-card:where([data-variant="surface"]) {
|
|
60
116
|
--card-border-width: 1px;
|
|
61
117
|
}
|
|
@@ -67,22 +123,26 @@
|
|
|
67
123
|
}
|
|
68
124
|
|
|
69
125
|
:is(.x-card, .x-card:where([data-variant="surface"])):after {
|
|
70
|
-
box-shadow:
|
|
126
|
+
box-shadow: var(--card-surface-box-shadow);
|
|
71
127
|
}
|
|
72
128
|
|
|
73
129
|
@media (hover: hover) {
|
|
74
130
|
:is(.x-card, .x-card:where([data-variant="surface"])):where(:any-link, button, label):where(:hover):after {
|
|
75
|
-
box-shadow:
|
|
131
|
+
box-shadow: var(--card-surface-hover-box-shadow);
|
|
76
132
|
}
|
|
77
133
|
}
|
|
78
134
|
|
|
135
|
+
:is(.x-card, .x-card:where([data-variant="surface"])):where(:any-link, button, label):where([data-state="open"]):after {
|
|
136
|
+
box-shadow: var(--card-surface-hover-box-shadow);
|
|
137
|
+
}
|
|
138
|
+
|
|
79
139
|
:is(.x-card, .x-card:where([data-variant="surface"])):where(:any-link, button, label):where(:active:not([data-state="open"])):after {
|
|
80
|
-
box-shadow:
|
|
140
|
+
box-shadow: var(--card-surface-active-box-shadow);
|
|
81
141
|
}
|
|
82
142
|
|
|
83
143
|
.x-card:where([data-variant="elevated"]) {
|
|
84
144
|
--card-border-width: 1px;
|
|
85
|
-
box-shadow: var(--shadow-
|
|
145
|
+
box-shadow: var(--card-elevated-box-shadow-outer);
|
|
86
146
|
transition: box-shadow .12s;
|
|
87
147
|
}
|
|
88
148
|
|
|
@@ -93,31 +153,62 @@
|
|
|
93
153
|
}
|
|
94
154
|
|
|
95
155
|
.x-card:where([data-variant="elevated"]):after {
|
|
96
|
-
box-shadow:
|
|
156
|
+
box-shadow: var(--card-elevated-box-shadow-inner);
|
|
97
157
|
}
|
|
98
158
|
|
|
99
159
|
@media (hover: hover) {
|
|
100
160
|
.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:hover) {
|
|
101
|
-
box-shadow: var(--shadow-
|
|
161
|
+
box-shadow: var(--card-elevated-hover-box-shadow-outer);
|
|
102
162
|
transition-duration: 40ms;
|
|
103
163
|
}
|
|
164
|
+
|
|
165
|
+
.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:hover):after {
|
|
166
|
+
box-shadow: var(--card-elevated-hover-box-shadow-inner);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where([data-state="open"]) {
|
|
171
|
+
box-shadow: var(--card-elevated-hover-box-shadow-outer);
|
|
172
|
+
transition-duration: 40ms;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where([data-state="open"]):after {
|
|
176
|
+
box-shadow: var(--card-elevated-hover-box-shadow-inner);
|
|
104
177
|
}
|
|
105
178
|
|
|
106
179
|
.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:active:not([data-state="open"])) {
|
|
107
|
-
box-shadow: var(--shadow-
|
|
180
|
+
box-shadow: var(--card-elevated-active-box-shadow-outer);
|
|
108
181
|
transition-duration: 40ms;
|
|
109
182
|
}
|
|
110
183
|
|
|
184
|
+
.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:active:not([data-state="open"])):after {
|
|
185
|
+
box-shadow: var(--card-elevated-active-box-shadow-inner);
|
|
186
|
+
}
|
|
187
|
+
|
|
111
188
|
.x-card:where([data-variant="borderless"]) {
|
|
112
189
|
--card-border-width: 0px;
|
|
113
190
|
}
|
|
114
191
|
|
|
192
|
+
.x-card:where([data-variant="borderless"]):before {
|
|
193
|
+
-webkit-backdrop-filter: none;
|
|
194
|
+
backdrop-filter: none;
|
|
195
|
+
background-color: #0000;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.x-card:where([data-variant="borderless"]):after {
|
|
199
|
+
box-shadow: none;
|
|
200
|
+
}
|
|
201
|
+
|
|
115
202
|
@media (hover: hover) {
|
|
116
203
|
.x-card:where([data-variant="borderless"]):where(:any-link, button, label):where(:hover) {
|
|
117
204
|
background-color: var(--base-color-a3);
|
|
118
205
|
}
|
|
119
206
|
}
|
|
120
207
|
|
|
208
|
+
.x-card:where([data-variant="borderless"]):where(:any-link, button, label):where([data-state="open"]) {
|
|
209
|
+
background-color: var(--base-color-a3);
|
|
210
|
+
}
|
|
211
|
+
|
|
121
212
|
.x-card:where([data-variant="borderless"]):where(:any-link, button, label):where(:active:not([data-state="open"])) {
|
|
122
213
|
background-color: var(--base-color-a4);
|
|
123
214
|
}
|
|
@@ -131,6 +222,10 @@
|
|
|
131
222
|
outline: inherit;
|
|
132
223
|
}
|
|
133
224
|
|
|
225
|
+
.x-card:where(:focus-visible):where(:active:not([data-state="open"])):before {
|
|
226
|
+
background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
|
|
227
|
+
}
|
|
228
|
+
|
|
134
229
|
.x-card > [data-inset] {
|
|
135
230
|
--inset-radius: calc(var(--card-border-radius) - var(--card-border-width));
|
|
136
231
|
box-sizing: border-box;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "elements-kit",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.8.
|
|
4
|
+
"version": "0.8.1",
|
|
5
5
|
"description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"webcomponents",
|