@stnd/styles 0.10.1 → 0.10.2
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/CHANGELOG.md
CHANGED
|
@@ -60,7 +60,7 @@ $rhythm-tags: $rhythm-simple-tags + ", div, " + $rhythm-double-tags;
|
|
|
60
60
|
%surface {
|
|
61
61
|
border: none;
|
|
62
62
|
/* Raised effect for all surfaces */
|
|
63
|
-
box-shadow: var(--shadow
|
|
63
|
+
box-shadow: var(--shadow);
|
|
64
64
|
background: var(--color-surface);
|
|
65
65
|
border-radius: var(--radius);
|
|
66
66
|
}
|
package/_standard-01-token.scss
CHANGED
|
@@ -188,10 +188,13 @@
|
|
|
188
188
|
--shadow-raised:
|
|
189
189
|
inset 0 1px 0 0 var(--color-highlight), 0 0 0 1px var(--color-border),
|
|
190
190
|
var(--shadow-ambient);
|
|
191
|
-
|
|
191
|
+
|
|
192
192
|
--shadow-lg: var(--shadow-ambient), var(--shadow-lift);
|
|
193
193
|
--shadow-xl: var(--shadow-ambient), var(--shadow-lift), var(--shadow-glow);
|
|
194
194
|
|
|
195
|
+
--shadow: var(--shadow-raised);
|
|
196
|
+
--shadow-hover: var(--shadow-raised), var(--shadow-lg);
|
|
197
|
+
|
|
195
198
|
/**
|
|
196
199
|
* @name Mathematical Ratios
|
|
197
200
|
* @description Proportional ratios driving modular scales, typographic scaling, and harmonic layout proportions.
|
|
@@ -325,7 +325,7 @@ kbd {
|
|
|
325
325
|
background-image: var(--effect-grain);
|
|
326
326
|
border: none;
|
|
327
327
|
border-radius: var(--radius);
|
|
328
|
-
box-shadow: var(--shadow
|
|
328
|
+
box-shadow: var(--shadow);
|
|
329
329
|
padding: var(--space-d6) var(--space-d3);
|
|
330
330
|
font-family: var(--font-monospace);
|
|
331
331
|
font-size: var(--size-xs);
|
package/_standard-08-media.scss
CHANGED
|
@@ -23,7 +23,7 @@ iframe,
|
|
|
23
23
|
.video {
|
|
24
24
|
max-width: 100%;
|
|
25
25
|
border-radius: var(--radius);
|
|
26
|
-
box-shadow: var(--shadow
|
|
26
|
+
box-shadow: var(--shadow);
|
|
27
27
|
background: var(--color-surface);
|
|
28
28
|
max-height: 80vh;
|
|
29
29
|
border: var(--border);
|
|
@@ -39,7 +39,7 @@ iframe,
|
|
|
39
39
|
max-width: 100%;
|
|
40
40
|
overflow: hidden;
|
|
41
41
|
border-radius: var(--radius);
|
|
42
|
-
box-shadow: var(--shadow
|
|
42
|
+
box-shadow: var(--shadow);
|
|
43
43
|
border: var(--border);
|
|
44
44
|
background: var(--color-surface);
|
|
45
45
|
|
package/_standard-11-forms.scss
CHANGED
|
@@ -80,8 +80,8 @@ textarea {
|
|
|
80
80
|
color: var(--color-foreground);
|
|
81
81
|
background: var(--color-surface);
|
|
82
82
|
/* shadcn-style raised effect. */
|
|
83
|
-
border:
|
|
84
|
-
box-shadow: var(--shadow
|
|
83
|
+
border: none;
|
|
84
|
+
box-shadow: var(--shadow);
|
|
85
85
|
/* Transparent outline at full width reserves the space a real focus
|
|
86
86
|
outline (set on :focus below) will need — prevents layout shift when
|
|
87
87
|
the outline color actually appears. */
|
|
@@ -106,8 +106,8 @@ select {
|
|
|
106
106
|
border-radius: var(--radius-sm);
|
|
107
107
|
color: var(--color-muted);
|
|
108
108
|
background-color: var(--color-surface);
|
|
109
|
-
border:
|
|
110
|
-
box-shadow: var(--shadow
|
|
109
|
+
border: none;
|
|
110
|
+
box-shadow: var(--shadow);
|
|
111
111
|
outline: none;
|
|
112
112
|
transition: all var(--transition-fast);
|
|
113
113
|
cursor: pointer;
|
|
@@ -188,7 +188,7 @@ input[type="radio"] {
|
|
|
188
188
|
box-sizing: content-box;
|
|
189
189
|
width: calc(var(--space-d8));
|
|
190
190
|
height: calc(var(--space-d2));
|
|
191
|
-
border:
|
|
191
|
+
border: none;
|
|
192
192
|
border-radius: var(--radius);
|
|
193
193
|
background-color: var(--color-surface);
|
|
194
194
|
cursor: pointer;
|
|
@@ -196,14 +196,14 @@ input[type="radio"] {
|
|
|
196
196
|
margin-inline-end: var(--space-d2);
|
|
197
197
|
|
|
198
198
|
/* Subtle inset with border */
|
|
199
|
-
box-shadow: var(--shadow
|
|
199
|
+
box-shadow: var(--shadow);
|
|
200
200
|
outline: 0;
|
|
201
201
|
transition: all var(--transition-fast);
|
|
202
202
|
|
|
203
203
|
&:hover {
|
|
204
204
|
/* Add subtle glow on hover */
|
|
205
205
|
background-color: var(--color-surface-high);
|
|
206
|
-
box-shadow: var(--shadow
|
|
206
|
+
box-shadow: var(--shadow);
|
|
207
207
|
}
|
|
208
208
|
|
|
209
209
|
&:active {
|
|
@@ -221,11 +221,11 @@ input[type="radio"] {
|
|
|
221
221
|
&:checked {
|
|
222
222
|
background-color: var(--color-accent);
|
|
223
223
|
/* Raised effect when checked, with accent border for clarity */
|
|
224
|
-
box-shadow: var(--shadow
|
|
224
|
+
box-shadow: var(--shadow);
|
|
225
225
|
}
|
|
226
226
|
|
|
227
227
|
&:checked:hover {
|
|
228
|
-
box-shadow: var(--shadow
|
|
228
|
+
box-shadow: var(--shadow);
|
|
229
229
|
}
|
|
230
230
|
|
|
231
231
|
/* Checkmark using pseudo-element */
|
|
@@ -386,7 +386,7 @@ input[type="range"]::-webkit-slider-thumb {
|
|
|
386
386
|
|
|
387
387
|
background: var(--color-surface-high);
|
|
388
388
|
/* Raised effect for better grip affordance */
|
|
389
|
-
box-shadow: var(--shadow
|
|
389
|
+
box-shadow: var(--shadow);
|
|
390
390
|
|
|
391
391
|
/* Vertical alignment logic for Webkit:
|
|
392
392
|
(Thumb Height / 2) - (Track Height / 2) * -1
|
|
@@ -396,6 +396,6 @@ input[type="range"]::-webkit-slider-thumb {
|
|
|
396
396
|
|
|
397
397
|
input[type="range"]:hover::-webkit-slider-thumb {
|
|
398
398
|
background: var(--color-accent);
|
|
399
|
-
box-shadow: var(--shadow-
|
|
399
|
+
box-shadow: var(--shadow-hover);
|
|
400
400
|
cursor: pointer;
|
|
401
401
|
}
|
|
@@ -28,7 +28,7 @@ kbd {
|
|
|
28
28
|
background-color: var(--color-surface);
|
|
29
29
|
border: none;
|
|
30
30
|
border-radius: 15%;
|
|
31
|
-
box-shadow: var(--shadow
|
|
31
|
+
box-shadow: var(--shadow);
|
|
32
32
|
padding: var(--space-d4) var(--space-d4);
|
|
33
33
|
font-family: var(--font-monospace);
|
|
34
34
|
font-size: var(--size-2xs);
|
|
@@ -88,8 +88,8 @@ a.btn {
|
|
|
88
88
|
min-height: 1em;
|
|
89
89
|
|
|
90
90
|
/* shadcn-style raised effect */
|
|
91
|
-
box-shadow: var(--shadow
|
|
92
|
-
border:
|
|
91
|
+
box-shadow: var(--shadow);
|
|
92
|
+
border: none;
|
|
93
93
|
|
|
94
94
|
transition: all var(--transition-fast);
|
|
95
95
|
|
|
@@ -102,7 +102,7 @@ a.btn {
|
|
|
102
102
|
background-color: var(--color-surface-highest);
|
|
103
103
|
/* Lift shadow slightly on hover */
|
|
104
104
|
color: var(--color-foreground);
|
|
105
|
-
box-shadow: var(--shadow-
|
|
105
|
+
box-shadow: var(--shadow-hover);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
&:active {
|
|
@@ -166,7 +166,7 @@ a.btn.link {
|
|
|
166
166
|
a.btn.outline {
|
|
167
167
|
background-color: transparent;
|
|
168
168
|
backdrop-filter: var(--filter-blur);
|
|
169
|
-
color: var(--color-
|
|
169
|
+
color: var(--color-foreground);
|
|
170
170
|
|
|
171
171
|
&:hover {
|
|
172
172
|
color: var(--color-foreground);
|
|
@@ -191,7 +191,7 @@ a.btn.ghost {
|
|
|
191
191
|
&:hover {
|
|
192
192
|
color: var(--color-foreground);
|
|
193
193
|
background-color: var(--color-surface-higher);
|
|
194
|
-
box-shadow: var(--shadow-
|
|
194
|
+
box-shadow: var(--shadow-hover);
|
|
195
195
|
}
|
|
196
196
|
|
|
197
197
|
&:active {
|
|
@@ -261,6 +261,7 @@ a.btn:disabled {
|
|
|
261
261
|
border-radius: 999px;
|
|
262
262
|
border: var(--stroke-width) solid
|
|
263
263
|
color-mix(in oklch, currentColor 30%, transparent);
|
|
264
|
+
border: none;
|
|
264
265
|
font-size: var(--size-xs);
|
|
265
266
|
display: inline-flex;
|
|
266
267
|
align-items: center;
|
|
@@ -383,7 +384,7 @@ a.badge.secondary:hover,
|
|
|
383
384
|
background: oklch(from var(--color-alert) l c h / 0.1);
|
|
384
385
|
border-left: var(--stroke-width) solid
|
|
385
386
|
oklch(from var(--color-alert) l c h / 0.5);
|
|
386
|
-
box-shadow: var(--shadow
|
|
387
|
+
box-shadow: var(--shadow);
|
|
387
388
|
text-shadow: none !important;
|
|
388
389
|
}
|
|
389
390
|
|
|
@@ -533,7 +534,7 @@ a.badge.secondary:hover,
|
|
|
533
534
|
background-color: var(--color-surface);
|
|
534
535
|
transition: all var(--transition);
|
|
535
536
|
border-radius: var(--radius);
|
|
536
|
-
border:
|
|
537
|
+
border: none;
|
|
537
538
|
|
|
538
539
|
&.hero {
|
|
539
540
|
border-radius: 0;
|
|
@@ -909,7 +910,7 @@ details .callout-fold {
|
|
|
909
910
|
font-size: var(--size-sm);
|
|
910
911
|
|
|
911
912
|
.comment {
|
|
912
|
-
border:
|
|
913
|
+
border: none;
|
|
913
914
|
box-shadow: var(--shadow);
|
|
914
915
|
border-radius: var(--radius);
|
|
915
916
|
background: var(--color-surface);
|
|
@@ -1111,7 +1112,7 @@ a.skip-link {
|
|
|
1111
1112
|
|
|
1112
1113
|
&:hover:not(.disabled) {
|
|
1113
1114
|
background: var(--color-surface-highest);
|
|
1114
|
-
box-shadow: var(--shadow
|
|
1115
|
+
box-shadow: var(--shadow);
|
|
1115
1116
|
}
|
|
1116
1117
|
|
|
1117
1118
|
&:active:not(.disabled) {
|