ui-style-kit-css 2.2.0 → 2.3.0
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 +38 -0
- package/README.md +100 -31
- package/STYLE-MAP.md +19 -0
- package/dist/ui-style-kit.css +18417 -1704
- package/dist/ui-style-kit.min.css +2 -2
- package/dist/ui-style-kit.visual.css +17709 -1446
- package/dist/ui-style-kit.visual.min.css +2 -2
- package/dist/ui-style-kit.with-bridge.css +18425 -1706
- package/dist/ui-style-kit.with-bridge.min.css +2 -2
- package/dist/visual/art-deco.css +4776 -0
- package/dist/visual/bauhaus.css +1809 -78
- package/dist/visual/bento.css +1825 -97
- package/dist/visual/brutalism.css +1774 -35
- package/dist/visual/clay.css +4789 -0
- package/dist/visual/cyberpunk.css +1765 -35
- package/dist/visual/data-terminal.css +4804 -0
- package/dist/visual/editorial-luxe.css +4804 -0
- package/dist/visual/industrial-utility.css +4797 -0
- package/dist/visual/maximalist.css +1771 -37
- package/dist/visual/minimal-saas.css +1801 -78
- package/dist/visual/neo-noir.css +4790 -0
- package/dist/visual/neumorphism.css +1807 -78
- package/dist/visual/organic-modern.css +4767 -0
- package/dist/visual/paper-editorial.css +4799 -0
- package/dist/visual/retro-glass.css +1786 -36
- package/dist/visual/retrofuturism.css +1759 -36
- package/dist/visual/tactile.css +1760 -36
- package/dist/visual/technical-blueprint.css +4791 -0
- package/dist/visual/y2k.css +1767 -35
- package/docs/ECOSYSTEM.md +8 -4
- package/docs/PUBLISHING.md +14 -10
- package/docs/STYLE-GUIDE.md +53 -13
- package/docs/TOKENS.md +10 -1
- package/docs/superpowers/plans/2026-08-29-preset-identity-system-refinement.md +649 -0
- package/docs/superpowers/specs/2026-08-29-preset-identity-system-refinement-design.md +212 -0
- package/manifest.json +160 -2
- package/package.json +63 -6
- package/styles/art-deco.css +683 -0
- package/styles/bauhaus.css +237 -3
- package/styles/bento.css +266 -7
- package/styles/brutalism.css +235 -3
- package/styles/clay.css +692 -0
- package/styles/components.css +608 -14
- package/styles/content-overflow.css +423 -4
- package/styles/cyberpunk.css +234 -3
- package/styles/data-terminal.css +691 -0
- package/styles/editorial-luxe.css +687 -0
- package/styles/industrial-utility.css +690 -0
- package/styles/interactive-surface-bridge.css +11 -5
- package/styles/interactive-surface-theme.css +11 -3
- package/styles/maximalist.css +238 -4
- package/styles/minimal-saas.css +234 -3
- package/styles/native-elements.css +64 -12
- package/styles/neo-noir.css +690 -0
- package/styles/neumorphism.css +234 -3
- package/styles/organic-modern.css +683 -0
- package/styles/paper-editorial.css +688 -0
- package/styles/retro-glass.css +242 -3
- package/styles/retrofuturism.css +233 -3
- package/styles/tactile.css +235 -3
- package/styles/technical-blueprint.css +686 -0
- package/styles/theme-colors.css +796 -5
- package/styles/y2k.css +237 -3
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
--usk-native-control-padding-inline: .95rem;
|
|
40
40
|
--usk-native-subcontrol-padding-block: .55rem;
|
|
41
41
|
--usk-native-subcontrol-padding-inline: .8rem;
|
|
42
|
-
--usk-native-track:
|
|
42
|
+
--usk-native-track: var(--usk-native-border);
|
|
43
43
|
--usk-native-track-fill: var(--usk-native-primary);
|
|
44
44
|
--usk-native-thumb: var(--usk-native-surface-strong);
|
|
45
45
|
--usk-native-thumb-border: var(--usk-native-primary);
|
|
@@ -70,7 +70,10 @@
|
|
|
70
70
|
font-family: var(--usk-native-font-heading);
|
|
71
71
|
line-height: 1.15;
|
|
72
72
|
margin: 0 0 .65em;
|
|
73
|
-
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@supports (text-wrap: balance) {
|
|
76
|
+
[data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
|
|
74
77
|
}
|
|
75
78
|
|
|
76
79
|
[data-ui][data-theme][data-mode] :where(hgroup) {
|
|
@@ -118,7 +121,7 @@
|
|
|
118
121
|
padding: .15em .35em;
|
|
119
122
|
color: var(--usk-native-text);
|
|
120
123
|
background: var(--usk-native-surface-soft);
|
|
121
|
-
border: var(--usk-native-border-width) solid
|
|
124
|
+
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
122
125
|
border-radius: var(--usk-native-radius-sm);
|
|
123
126
|
font-family: var(--usk-native-font-mono);
|
|
124
127
|
font-size: .92em;
|
|
@@ -151,7 +154,7 @@
|
|
|
151
154
|
[data-ui][data-theme][data-mode] :where(mark) {
|
|
152
155
|
padding-inline: .15em;
|
|
153
156
|
color: var(--usk-native-text);
|
|
154
|
-
background:
|
|
157
|
+
background: rgb(var(--usk-warning-rgb) / .32);
|
|
155
158
|
border-radius: .2em;
|
|
156
159
|
}
|
|
157
160
|
|
|
@@ -190,7 +193,7 @@
|
|
|
190
193
|
min-inline-size: 0;
|
|
191
194
|
margin: 0 0 1rem;
|
|
192
195
|
padding: var(--usk-native-panel-padding);
|
|
193
|
-
background:
|
|
196
|
+
background: var(--usk-native-card-bg);
|
|
194
197
|
border: var(--usk-native-border-width) solid var(--usk-native-border);
|
|
195
198
|
border-radius: var(--usk-native-radius);
|
|
196
199
|
}
|
|
@@ -218,7 +221,7 @@
|
|
|
218
221
|
align-items: center;
|
|
219
222
|
}
|
|
220
223
|
|
|
221
|
-
[data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
|
|
224
|
+
[data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
|
|
222
225
|
width: 100%;
|
|
223
226
|
min-block-size: var(--usk-native-control-min-block-size);
|
|
224
227
|
padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
|
|
@@ -246,9 +249,16 @@
|
|
|
246
249
|
|
|
247
250
|
[data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
|
|
248
251
|
|
|
249
|
-
[data-ui][data-theme][data-mode] :where(button
|
|
252
|
+
[data-ui][data-theme][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
|
|
253
|
+
-webkit-appearance: none;
|
|
254
|
+
appearance: none;
|
|
255
|
+
box-sizing: border-box;
|
|
250
256
|
min-block-size: var(--usk-native-control-min-block-size);
|
|
251
257
|
padding: .7rem 1rem;
|
|
258
|
+
font: inherit;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
[data-ui][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
|
|
252
262
|
color: var(--usk-native-on-primary);
|
|
253
263
|
background: var(--usk-native-primary);
|
|
254
264
|
border: var(--usk-native-border-width) solid var(--usk-native-primary);
|
|
@@ -258,6 +268,18 @@
|
|
|
258
268
|
cursor: pointer;
|
|
259
269
|
}
|
|
260
270
|
|
|
271
|
+
/* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
|
|
272
|
+
[data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
|
|
273
|
+
display: inline-flex;
|
|
274
|
+
align-items: center;
|
|
275
|
+
justify-content: center;
|
|
276
|
+
gap: .55rem;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
[data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
|
|
280
|
+
flex: 0 0 1em;
|
|
281
|
+
}
|
|
282
|
+
|
|
261
283
|
[data-ui][data-theme][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
|
|
262
284
|
background: var(--usk-native-primary-hover);
|
|
263
285
|
border-color: var(--usk-native-primary-hover);
|
|
@@ -373,7 +395,7 @@
|
|
|
373
395
|
cursor: not-allowed;
|
|
374
396
|
}
|
|
375
397
|
|
|
376
|
-
[data-ui][data-theme][data-mode] :where(input:read-only, textarea:read-only) {
|
|
398
|
+
[data-ui][data-theme][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
|
|
377
399
|
background: var(--usk-native-surface-soft);
|
|
378
400
|
}
|
|
379
401
|
|
|
@@ -399,7 +421,7 @@
|
|
|
399
421
|
|
|
400
422
|
[data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
401
423
|
color: var(--usk-native-text-muted);
|
|
402
|
-
background:
|
|
424
|
+
background: var(--usk-native-surface-soft);
|
|
403
425
|
border-color: var(--usk-native-border);
|
|
404
426
|
box-shadow: none;
|
|
405
427
|
opacity: .55;
|
|
@@ -431,7 +453,7 @@
|
|
|
431
453
|
|
|
432
454
|
[data-ui][data-theme][data-mode] :where(th) {
|
|
433
455
|
color: var(--usk-native-text);
|
|
434
|
-
background:
|
|
456
|
+
background: var(--usk-native-surface-soft);
|
|
435
457
|
}
|
|
436
458
|
|
|
437
459
|
[data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
|
|
@@ -461,6 +483,8 @@
|
|
|
461
483
|
box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
|
|
462
484
|
}
|
|
463
485
|
|
|
486
|
+
[data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
|
|
487
|
+
|
|
464
488
|
[data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
|
|
465
489
|
|
|
466
490
|
[data-ui][data-theme][data-mode] :where(progress, meter) {
|
|
@@ -574,6 +598,32 @@
|
|
|
574
598
|
[data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
|
|
575
599
|
[data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
|
|
576
600
|
|
|
601
|
+
@supports (color: color-mix(in srgb, black, white)) {
|
|
602
|
+
[data-ui][data-theme][data-mode] {
|
|
603
|
+
--usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
[data-ui][data-theme][data-mode] :where(code, kbd, samp) {
|
|
607
|
+
border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
[data-ui][data-theme][data-mode] :where(mark) {
|
|
611
|
+
background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
[data-ui][data-theme][data-mode] :where(fieldset) {
|
|
615
|
+
background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
[data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
|
|
619
|
+
background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
[data-ui][data-theme][data-mode] :where(th) {
|
|
623
|
+
background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
|
|
624
|
+
}
|
|
625
|
+
}
|
|
626
|
+
|
|
577
627
|
@media (prefers-reduced-motion: reduce) {
|
|
578
628
|
[data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
|
|
579
629
|
[data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
|
|
@@ -582,8 +632,10 @@
|
|
|
582
632
|
}
|
|
583
633
|
|
|
584
634
|
@media (forced-colors: active) {
|
|
585
|
-
|
|
586
|
-
|
|
635
|
+
@supports (forced-color-adjust: auto) {
|
|
636
|
+
[data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
|
|
637
|
+
forced-color-adjust: auto;
|
|
638
|
+
}
|
|
587
639
|
}
|
|
588
640
|
|
|
589
641
|
[data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
|