ui-style-kit-css 2.4.0 → 2.5.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 +63 -0
- package/README.md +47 -19
- package/STYLE-MAP.md +5 -0
- package/dist/ui-style-kit.css +1102 -616
- package/dist/ui-style-kit.min.css +2 -2
- package/dist/ui-style-kit.visual.css +1102 -616
- package/dist/ui-style-kit.visual.min.css +2 -2
- package/dist/ui-style-kit.with-bridge.css +1102 -616
- package/dist/ui-style-kit.with-bridge.min.css +2 -2
- package/dist/visual/art-deco.css +539 -65
- package/dist/visual/bauhaus.css +2 -2
- package/dist/visual/bento.css +2 -2
- package/dist/visual/brutalism.css +499 -10
- package/dist/visual/clay.css +2 -2
- package/dist/visual/cyberpunk.css +535 -46
- package/dist/visual/data-terminal.css +516 -27
- package/dist/visual/editorial-luxe.css +526 -37
- package/dist/visual/industrial-utility.css +531 -42
- package/dist/visual/maximalist.css +496 -7
- package/dist/visual/minimal-saas.css +511 -21
- package/dist/visual/neo-noir.css +2 -2
- package/dist/visual/neumorphism.css +500 -11
- package/dist/visual/organic-modern.css +2 -2
- package/dist/visual/paper-editorial.css +537 -48
- package/dist/visual/retro-glass.css +534 -45
- package/dist/visual/retrofuturism.css +500 -11
- package/dist/visual/tactile.css +499 -10
- package/dist/visual/technical-blueprint.css +552 -63
- package/dist/visual/y2k.css +514 -13
- package/docs/BAUHAUS.md +1 -1
- package/docs/BRIDGE-MIGRATION.md +38 -0
- package/docs/CLAY.md +1 -1
- package/docs/COLOR-THEMES.md +63 -0
- package/docs/ECOSYSTEM.md +7 -7
- package/docs/ORGANIC-MODERN.md +1 -1
- package/docs/PUBLISHING.md +13 -13
- package/docs/RELEASE-2.4.1.md +35 -0
- package/docs/RELEASE-2.4.2.md +37 -0
- package/docs/RELEASE-2.5.0.md +34 -0
- package/docs/STYLE-GUIDE.md +1 -1
- package/manifest.json +358 -160
- package/package.json +6 -5
- package/styles/art-deco.css +10 -27
- package/styles/bauhaus.css +12 -12
- package/styles/bento.css +37 -31
- package/styles/brutalism.css +5 -5
- package/styles/clay.css +5 -5
- package/styles/components.css +81 -2
- package/styles/cyberpunk.css +14 -14
- package/styles/data-terminal.css +12 -12
- package/styles/editorial-luxe.css +6 -6
- package/styles/industrial-utility.css +5 -5
- package/styles/maximalist.css +2 -2
- package/styles/minimal-saas.css +13 -12
- package/styles/native-elements.css +1 -1
- package/styles/neo-noir.css +8 -8
- package/styles/neumorphism.css +6 -6
- package/styles/organic-modern.css +8 -9
- package/styles/paper-editorial.css +6 -6
- package/styles/retro-glass.css +5 -5
- package/styles/retrofuturism.css +6 -6
- package/styles/tactile.css +7 -7
- package/styles/technical-blueprint.css +18 -18
- package/styles/theme-colors.css +410 -0
- package/styles/y2k.css +22 -8
package/styles/minimal-saas.css
CHANGED
|
@@ -386,7 +386,7 @@
|
|
|
386
386
|
.saas-title, .saas-heading, .saas-kicker, .saas-button, .saas-badge, .saas-nav-link { font-family: var(--saas-font-heading); }
|
|
387
387
|
.saas-title { margin: 0; color: var(--saas-text); font-size: 1.5rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
|
|
388
388
|
.saas-heading { margin: 0; color: var(--saas-text); font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
|
|
389
|
-
.saas-kicker { margin: 0; color: var(--saas-primary); font-size: .78rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
|
|
389
|
+
.saas-kicker { margin: 0; color: var(--usk-primary-ink, var(--saas-primary)); font-size: .78rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
|
|
390
390
|
.saas-subtitle, .saas-copy { margin: 0; color: var(--saas-text-muted); line-height: 1.55; }
|
|
391
391
|
.saas-text-muted { color: var(--saas-text-muted); }
|
|
392
392
|
.saas-divider { width: 100%; height: 1px; border: 0; background: var(--saas-border); }
|
|
@@ -426,10 +426,10 @@
|
|
|
426
426
|
.saas-button:active, .saas-icon-button:active, .saas-button[aria-pressed="true"], .saas-icon-button[aria-pressed="true"], .saas-button.is-active, .saas-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgb(var(--saas-text-rgb) / .12); }
|
|
427
427
|
.saas-button-primary { background: linear-gradient(135deg, var(--saas-primary), var(--saas-brand-2)); color: var(--saas-on-primary); border-color: var(--saas-primary); }
|
|
428
428
|
.saas-button-primary:hover { background: linear-gradient(135deg, var(--saas-brand-2), var(--saas-primary)); border-color: var(--saas-primary-hover); }
|
|
429
|
-
.saas-button-secondary { background: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha)); color: var(--saas-primary); border-color: rgb(var(--saas-primary-rgb) / .32); box-shadow: none; }
|
|
429
|
+
.saas-button-secondary { background: rgb(var(--saas-surface-strong-rgb) / var(--saas-panel-alpha)); color: var(--usk-primary-ink, var(--saas-primary)); border-color: rgb(var(--saas-primary-rgb) / .32); box-shadow: none; }
|
|
430
430
|
.saas-button-secondary:hover { background: rgb(var(--saas-primary-rgb) / .06); border-color: rgb(var(--saas-primary-rgb) / .52); }
|
|
431
431
|
.saas-button-danger { background: var(--saas-danger); color: var(--saas-on-danger); border-color: var(--saas-danger); }
|
|
432
|
-
.saas-button-ghost { background: transparent; color: var(--saas-primary); border-color: transparent; box-shadow: none; }
|
|
432
|
+
.saas-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--saas-primary)); border-color: transparent; box-shadow: none; }
|
|
433
433
|
.saas-icon-button { width: 2.375rem; padding: 0; border-radius: var(--saas-radius-md); }
|
|
434
434
|
.saas-button:disabled, .saas-icon-button:disabled, .saas-disabled { opacity: .55; cursor: not-allowed; transform: none; }
|
|
435
435
|
|
|
@@ -495,7 +495,7 @@
|
|
|
495
495
|
|
|
496
496
|
.saas-badge { display: inline-flex; align-items: center; gap: var(--saas-space-1); min-height: 1.4rem; padding: .25rem .5rem; background: var(--saas-surface-soft); color: var(--saas-text); border: 1px solid transparent; border-radius: var(--saas-radius-sm); font-size: .75rem; font-weight: 700; line-height: 1; }
|
|
497
497
|
.saas-badge-primary { background: var(--saas-primary); color: var(--saas-on-primary); border-color: var(--saas-primary); }
|
|
498
|
-
.saas-badge-secondary { background: rgb(var(--saas-primary-rgb) / .1); color: var(--saas-primary); border-color: transparent; }
|
|
498
|
+
.saas-badge-secondary { background: rgb(var(--saas-primary-rgb) / .1); color: var(--usk-primary-ink, var(--saas-primary)); border-color: transparent; }
|
|
499
499
|
.saas-badge-success { background: rgb(var(--saas-success-rgb) / .14); color: var(--saas-text); border-color: rgb(var(--saas-success-rgb) / .38); }
|
|
500
500
|
.saas-badge-warning { background: rgb(var(--saas-warning-rgb) / .14); color: var(--saas-text); border-color: rgb(var(--saas-warning-rgb) / .38); }
|
|
501
501
|
.saas-badge-danger { background: rgb(var(--saas-danger-rgb) / .14); color: var(--saas-text); border-color: rgb(var(--saas-danger-rgb) / .38); }
|
|
@@ -520,8 +520,9 @@
|
|
|
520
520
|
.saas-alert-success { background: rgb(var(--saas-success-rgb) / .12); border-color: rgb(var(--saas-success-rgb) / .58); }
|
|
521
521
|
.saas-alert-warning { background: rgb(var(--saas-warning-rgb) / .12); border-color: rgb(var(--saas-warning-rgb) / .58); }
|
|
522
522
|
.saas-alert-danger { background: rgb(var(--saas-danger-rgb) / .12); border-color: rgb(var(--saas-danger-rgb) / .58); }
|
|
523
|
-
|
|
524
|
-
.saas-alert-
|
|
523
|
+
/** Keeps classed alert copy readable above the native paragraph color layer. */
|
|
524
|
+
.saas-alert-title { margin: 0; color: var(--saas-text); font-weight: 900; }
|
|
525
|
+
.saas-alert-body { margin: 0; color: var(--saas-text); line-height: 1.55; }
|
|
525
526
|
|
|
526
527
|
.saas-table-wrap { overflow: auto; }
|
|
527
528
|
.saas-table { width: 100%; border-collapse: collapse; }
|
|
@@ -534,7 +535,7 @@
|
|
|
534
535
|
Utilities
|
|
535
536
|
========================================================= */
|
|
536
537
|
|
|
537
|
-
.saas-text-primary { color: var(--saas-primary); } .saas-text-secondary { color: var(--saas-secondary); } .saas-text-accent { color: var(--saas-accent); } .saas-text-success { color: var(--saas-success); } .saas-text-warning { color: var(--saas-warning); } .saas-text-danger { color: var(--saas-danger); }
|
|
538
|
+
.saas-text-primary { color: var(--usk-primary-ink, var(--saas-primary)); } .saas-text-secondary { color: var(--saas-secondary); } .saas-text-accent { color: var(--usk-accent-ink, var(--saas-accent)); } .saas-text-success { color: var(--saas-success); } .saas-text-warning { color: var(--saas-warning); } .saas-text-danger { color: var(--saas-danger); }
|
|
538
539
|
.saas-bg-primary { background: var(--saas-primary); color: var(--saas-on-primary); } .saas-bg-secondary { background: var(--saas-secondary); color: var(--saas-on-secondary); }
|
|
539
540
|
.saas-border { border: 1px solid var(--saas-border); } .saas-rounded { border-radius: var(--saas-radius-md); } .saas-rounded-lg { border-radius: var(--saas-radius-lg); } .saas-rounded-xl { border-radius: var(--saas-radius-xl); } .saas-pill { border-radius: var(--saas-radius-pill); }
|
|
540
541
|
.saas-sr-only, .saas-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
@@ -642,7 +643,7 @@
|
|
|
642
643
|
.saas-button.saas-button-outline-heavy,
|
|
643
644
|
.saas-button-outline-heavy {
|
|
644
645
|
background: transparent;
|
|
645
|
-
color: var(--saas-primary);
|
|
646
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
646
647
|
border-style: solid;
|
|
647
648
|
border-width: 2px;
|
|
648
649
|
border-color: var(--saas-primary);
|
|
@@ -712,7 +713,7 @@
|
|
|
712
713
|
|
|
713
714
|
.saas-eyebrow {
|
|
714
715
|
margin: 0;
|
|
715
|
-
color: var(--saas-primary);
|
|
716
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
716
717
|
font-family: var(--saas-font-heading);
|
|
717
718
|
font-size: .76rem;
|
|
718
719
|
font-weight: 900;
|
|
@@ -761,7 +762,7 @@
|
|
|
761
762
|
.saas-card-accent-edge { border-inline-start-width: .16rem; }
|
|
762
763
|
.saas-icon-medallion {
|
|
763
764
|
background: var(--saas-surface-soft);
|
|
764
|
-
color: var(--saas-primary);
|
|
765
|
+
color: var(--usk-primary-ink, var(--saas-primary));
|
|
765
766
|
border: 1px solid var(--saas-border);
|
|
766
767
|
border-radius: var(--saas-radius-lg);
|
|
767
768
|
box-shadow: var(--saas-shadow-sm);
|
|
@@ -965,9 +966,9 @@
|
|
|
965
966
|
@layer ui-style-kit.minimal_saas {
|
|
966
967
|
/** Restores source-faithful action hierarchy after identity geometry. */
|
|
967
968
|
.saas-button-primary { background: linear-gradient(135deg, var(--saas-primary), var(--saas-brand-2)); color: var(--saas-on-primary); border-color: var(--saas-primary); }
|
|
968
|
-
.saas-button-secondary { background: var(--saas-surface); color: var(--saas-primary); border-color: var(--saas-primary); }
|
|
969
|
+
.saas-button-secondary { background: var(--saas-surface); color: var(--usk-primary-ink, var(--saas-primary)); border-color: var(--saas-primary); }
|
|
969
970
|
.saas-button-danger { background: var(--saas-danger); color: var(--saas-on-danger); border-color: var(--saas-danger); }
|
|
970
|
-
.saas-button-ghost { background: transparent; color: var(--saas-primary); border-color: transparent; }
|
|
971
|
+
.saas-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--saas-primary)); border-color: transparent; }
|
|
971
972
|
}
|
|
972
973
|
|
|
973
974
|
@layer ui-style-kit.minimal_saas {
|
|
@@ -145,7 +145,7 @@
|
|
|
145
145
|
text-underline-offset: .18em;
|
|
146
146
|
}
|
|
147
147
|
|
|
148
|
-
[data-ui][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
|
|
148
|
+
[data-ui][data-mode] :where(a:hover) { color: var(--usk-primary-ink, var(--usk-native-primary-hover)); }
|
|
149
149
|
|
|
150
150
|
[data-ui][data-mode] :where(ul, ol, menu) {
|
|
151
151
|
margin: 0 0 1rem;
|
package/styles/neo-noir.css
CHANGED
|
@@ -379,7 +379,7 @@
|
|
|
379
379
|
.noir-title, .noir-heading, .noir-kicker, .noir-button, .noir-badge, .noir-nav-link { font-family: var(--noir-font-heading); }
|
|
380
380
|
.noir-title { margin: 0; color: var(--noir-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
|
|
381
381
|
.noir-heading { margin: 0; color: var(--noir-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
|
|
382
|
-
.noir-kicker { margin: 0; color: var(--noir-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
|
|
382
|
+
.noir-kicker { margin: 0; color: var(--usk-primary-ink, var(--noir-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
|
|
383
383
|
.noir-subtitle, .noir-copy { margin: 0; color: var(--noir-text-muted); line-height: 1.65; }
|
|
384
384
|
.noir-text-muted { color: var(--noir-text-muted); }
|
|
385
385
|
.noir-divider { width: 100%; height: 1px; border: 0; background: var(--noir-border); }
|
|
@@ -513,7 +513,7 @@
|
|
|
513
513
|
Utilities
|
|
514
514
|
========================================================= */
|
|
515
515
|
|
|
516
|
-
.noir-text-primary { color: var(--noir-primary); } .noir-text-secondary { color: var(--noir-secondary); } .noir-text-accent { color: var(--noir-accent); } .noir-text-success { color: var(--noir-success); } .noir-text-warning { color: var(--noir-warning); } .noir-text-danger { color: var(--noir-danger); }
|
|
516
|
+
.noir-text-primary { color: var(--usk-primary-ink, var(--noir-primary)); } .noir-text-secondary { color: var(--noir-secondary); } .noir-text-accent { color: var(--usk-accent-ink, var(--noir-accent)); } .noir-text-success { color: var(--noir-success); } .noir-text-warning { color: var(--noir-warning); } .noir-text-danger { color: var(--noir-danger); }
|
|
517
517
|
.noir-bg-primary { background: var(--noir-primary); color: var(--noir-on-primary); } .noir-bg-secondary { background: var(--noir-secondary); color: var(--noir-on-secondary); }
|
|
518
518
|
.noir-border { border: 1px solid var(--noir-border); } .noir-rounded { border-radius: var(--noir-radius-md); } .noir-rounded-lg { border-radius: var(--noir-radius-lg); } .noir-rounded-xl { border-radius: var(--noir-radius-xl); } .noir-pill { border-radius: var(--noir-radius-pill); }
|
|
519
519
|
.noir-sr-only, .noir-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
@@ -621,7 +621,7 @@
|
|
|
621
621
|
.noir-button.noir-button-outline-heavy,
|
|
622
622
|
.noir-button-outline-heavy {
|
|
623
623
|
background: transparent;
|
|
624
|
-
color: var(--noir-primary);
|
|
624
|
+
color: var(--usk-primary-ink, var(--noir-primary));
|
|
625
625
|
border-style: solid;
|
|
626
626
|
border-width: 2px;
|
|
627
627
|
border-color: var(--noir-primary);
|
|
@@ -691,7 +691,7 @@
|
|
|
691
691
|
|
|
692
692
|
.noir-eyebrow {
|
|
693
693
|
margin: 0;
|
|
694
|
-
color: var(--noir-primary);
|
|
694
|
+
color: var(--usk-primary-ink, var(--noir-primary));
|
|
695
695
|
font-family: var(--noir-font-heading);
|
|
696
696
|
font-size: .76rem;
|
|
697
697
|
font-weight: 900;
|
|
@@ -770,7 +770,7 @@
|
|
|
770
770
|
.noir-input, .noir-textarea, .noir-select { background: rgb(var(--noir-surface-strong-rgb) / .68); }
|
|
771
771
|
.noir-card-media { border-color: rgb(var(--noir-primary-rgb) / .25); }
|
|
772
772
|
.noir-media-scrim > :where(figcaption, [data-media-caption]) { background: linear-gradient(to top, rgb(0 0 0 / .96), rgb(var(--noir-primary-rgb) / .18) 54%, transparent); }
|
|
773
|
-
.noir-icon-medallion { background: transparent; color: var(--noir-primary); border-color: var(--noir-primary); box-shadow: 0 0 1.2rem rgb(var(--noir-primary-rgb) / .18); }
|
|
773
|
+
.noir-icon-medallion { background: transparent; color: var(--usk-primary-ink, var(--noir-primary)); border-color: var(--noir-primary); box-shadow: 0 0 1.2rem rgb(var(--noir-primary-rgb) / .18); }
|
|
774
774
|
.noir-badge-seal { background: transparent; border-color: var(--noir-primary); }
|
|
775
775
|
.noir-card-accent-edge { border-inline-start-color: var(--noir-primary); }
|
|
776
776
|
[data-ui="neo-noir"][data-mode="contrast"] :where(.noir-surface, .noir-card, .noir-panel, .noir-toolbar, .noir-table-wrap, .noir-icon-medallion) { box-shadow: none; text-shadow: none; }
|
|
@@ -931,7 +931,7 @@
|
|
|
931
931
|
.noir-button-primary { background: linear-gradient(112deg, var(--noir-warning), var(--noir-primary)); color: var(--noir-on-primary); border-color: var(--noir-warning); }
|
|
932
932
|
.noir-button-secondary { background: linear-gradient(112deg, var(--noir-secondary), var(--noir-focus)); color: var(--noir-on-secondary); border-color: var(--noir-focus); }
|
|
933
933
|
.noir-button-danger { background: linear-gradient(112deg, var(--noir-danger), rgb(var(--noir-danger-rgb) / .68)); color: var(--noir-on-danger); border-color: var(--noir-danger); }
|
|
934
|
-
.noir-button-ghost { background: transparent; color: var(--noir-primary); border-color: transparent; }
|
|
934
|
+
.noir-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--noir-primary)); border-color: transparent; }
|
|
935
935
|
}
|
|
936
936
|
|
|
937
937
|
@layer ui-style-kit.neo_noir {
|
|
@@ -1152,7 +1152,7 @@
|
|
|
1152
1152
|
.noir-badge-success { color: var(--noir-success); background: transparent; }
|
|
1153
1153
|
.noir-badge-warning { color: var(--noir-warning); background: transparent; }
|
|
1154
1154
|
.noir-badge-danger { color: var(--noir-danger); background: transparent; }
|
|
1155
|
-
.noir-badge-review { color: var(--noir-accent); }
|
|
1155
|
+
.noir-badge-review { color: var(--usk-accent-ink, var(--noir-accent)); }
|
|
1156
1156
|
.noir-alert { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .65rem; background: var(--noir-surface); color: var(--noir-text); border: 1px solid var(--noir-secondary); border-radius: 0; box-shadow: none; font: 11px var(--noir-font-mono); }
|
|
1157
1157
|
.noir-alert-success { color: var(--noir-success); border-color: currentColor; }
|
|
1158
1158
|
.noir-alert-warning { color: var(--noir-warning); border-color: currentColor; }
|
|
@@ -1172,7 +1172,7 @@
|
|
|
1172
1172
|
.noir-tooltip-right::after { inset: auto; left: -5px; top: calc(50% - 4px); transform: rotate(135deg); }
|
|
1173
1173
|
.noir-tooltip-bottom::after { inset: auto; top: -5px; left: calc(50% - 4px); transform: rotate(225deg); }
|
|
1174
1174
|
.noir-tooltip-left::after { inset: auto; right: -5px; top: calc(50% - 4px); transform: rotate(-45deg); }
|
|
1175
|
-
.noir-processing { display: grid; align-content: center; justify-items: center; gap: .4rem; padding: 1rem; min-height: 110px; border: 1px solid var(--noir-accent); color: var(--noir-accent); font: 12px var(--noir-font-control); }
|
|
1175
|
+
.noir-processing { display: grid; align-content: center; justify-items: center; gap: .4rem; padding: 1rem; min-height: 110px; border: 1px solid var(--noir-accent); color: var(--usk-accent-ink, var(--noir-accent)); font: 12px var(--noir-font-control); }
|
|
1176
1176
|
[data-ui="neo-noir"] .noir-processing strong { font: 400 28px var(--noir-font-display); color: inherit; }
|
|
1177
1177
|
.noir-processing::after { content: ""; width: 60%; height: 2px; background: currentColor; animation: noir-pulse 1.5s ease-in-out infinite alternate; }
|
|
1178
1178
|
/** A fixed registration ring surrounds rotating aperture blades without layout movement. */
|
package/styles/neumorphism.css
CHANGED
|
@@ -383,7 +383,7 @@
|
|
|
383
383
|
.neo-title, .neo-heading, .neo-kicker, .neo-button, .neo-badge, .neo-nav-link { font-family: var(--neo-font-heading); }
|
|
384
384
|
.neo-title { margin: 0; color: var(--neo-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
|
|
385
385
|
.neo-heading { margin: 0; color: var(--neo-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
|
|
386
|
-
.neo-kicker { margin: 0; color: var(--neo-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
|
|
386
|
+
.neo-kicker { margin: 0; color: var(--usk-primary-ink, var(--neo-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
|
|
387
387
|
.neo-subtitle, .neo-copy { margin: 0; color: var(--neo-text-muted); line-height: 1.65; }
|
|
388
388
|
.neo-text-muted { color: var(--neo-text-muted); }
|
|
389
389
|
.neo-divider { width: 100%; height: 1px; border: 0; background: var(--neo-border); }
|
|
@@ -518,7 +518,7 @@
|
|
|
518
518
|
Utilities
|
|
519
519
|
========================================================= */
|
|
520
520
|
|
|
521
|
-
.neo-text-primary { color: var(--neo-primary); } .neo-text-secondary { color: var(--neo-secondary); } .neo-text-accent { color: var(--neo-accent); } .neo-text-success { color: var(--neo-success); } .neo-text-warning { color: var(--neo-warning); } .neo-text-danger { color: var(--neo-danger); }
|
|
521
|
+
.neo-text-primary { color: var(--usk-primary-ink, var(--neo-primary)); } .neo-text-secondary { color: var(--neo-secondary); } .neo-text-accent { color: var(--usk-accent-ink, var(--neo-accent)); } .neo-text-success { color: var(--neo-success); } .neo-text-warning { color: var(--neo-warning); } .neo-text-danger { color: var(--neo-danger); }
|
|
522
522
|
.neo-bg-primary { background: var(--neo-primary); color: var(--neo-on-primary); } .neo-bg-secondary { background: var(--neo-secondary); color: var(--neo-on-secondary); }
|
|
523
523
|
.neo-border { border: 1px solid var(--neo-border); } .neo-rounded { border-radius: var(--neo-radius-md); } .neo-rounded-lg { border-radius: var(--neo-radius-lg); } .neo-rounded-xl { border-radius: var(--neo-radius-xl); } .neo-pill { border-radius: var(--neo-radius-pill); }
|
|
524
524
|
.neo-sr-only, .neo-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
@@ -854,7 +854,7 @@
|
|
|
854
854
|
.neo-button-outline-heavy {
|
|
855
855
|
background-color: var(--neo-material-raised);
|
|
856
856
|
background-image: linear-gradient(145deg, var(--neo-material-top-light), transparent 52%);
|
|
857
|
-
color: var(--neo-primary);
|
|
857
|
+
color: var(--usk-primary-ink, var(--neo-primary));
|
|
858
858
|
border: 1px solid var(--neo-material-edge);
|
|
859
859
|
border-radius: var(--neo-radius-md);
|
|
860
860
|
box-shadow: var(--neo-button-shadow);
|
|
@@ -862,7 +862,7 @@
|
|
|
862
862
|
|
|
863
863
|
.neo-button.neo-button-outline-heavy:hover,
|
|
864
864
|
.neo-button-outline-heavy:hover {
|
|
865
|
-
color: var(--neo-primary-hover);
|
|
865
|
+
color: var(--usk-primary-ink, var(--neo-primary-hover));
|
|
866
866
|
border-color: var(--neo-primary);
|
|
867
867
|
}
|
|
868
868
|
|
|
@@ -1252,7 +1252,7 @@
|
|
|
1252
1252
|
padding: .7rem;
|
|
1253
1253
|
background-color: var(--neo-material-raised);
|
|
1254
1254
|
background-image: linear-gradient(145deg, var(--neo-material-top-light), transparent 52%);
|
|
1255
|
-
color: var(--neo-primary);
|
|
1255
|
+
color: var(--usk-primary-ink, var(--neo-primary));
|
|
1256
1256
|
border: 1px solid var(--neo-material-edge);
|
|
1257
1257
|
border-radius: var(--neo-radius-lg);
|
|
1258
1258
|
box-shadow: var(--neo-button-shadow);
|
|
@@ -1344,7 +1344,7 @@
|
|
|
1344
1344
|
|
|
1345
1345
|
.neo-eyebrow {
|
|
1346
1346
|
margin: 0;
|
|
1347
|
-
color: var(--neo-primary);
|
|
1347
|
+
color: var(--usk-primary-ink, var(--neo-primary));
|
|
1348
1348
|
font-family: var(--neo-font-heading);
|
|
1349
1349
|
font-size: .76rem;
|
|
1350
1350
|
font-weight: 900;
|
|
@@ -380,7 +380,7 @@
|
|
|
380
380
|
.organic-title, .organic-heading, .organic-kicker, .organic-button, .organic-badge, .organic-nav-link { font-family: var(--organic-font-heading); }
|
|
381
381
|
.organic-title { margin: 0; color: var(--organic-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
|
|
382
382
|
.organic-heading { margin: 0; color: var(--organic-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
|
|
383
|
-
.organic-kicker { margin: 0; color: var(--organic-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
|
|
383
|
+
.organic-kicker { margin: 0; color: var(--usk-primary-ink, var(--organic-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
|
|
384
384
|
.organic-subtitle, .organic-copy { margin: 0; color: var(--organic-text-muted); line-height: 1.65; }
|
|
385
385
|
.organic-text-muted { color: var(--organic-text-muted); }
|
|
386
386
|
.organic-divider { width: 100%; height: 1px; border: 0; background: var(--organic-border); }
|
|
@@ -514,7 +514,7 @@
|
|
|
514
514
|
Utilities
|
|
515
515
|
========================================================= */
|
|
516
516
|
|
|
517
|
-
.organic-text-primary { color: var(--organic-primary); } .organic-text-secondary { color: var(--organic-secondary); } .organic-text-accent { color: var(--organic-accent); } .organic-text-success { color: var(--organic-success); } .organic-text-warning { color: var(--organic-warning); } .organic-text-danger { color: var(--organic-danger); }
|
|
517
|
+
.organic-text-primary { color: var(--usk-primary-ink, var(--organic-primary)); } .organic-text-secondary { color: var(--organic-secondary); } .organic-text-accent { color: var(--usk-accent-ink, var(--organic-accent)); } .organic-text-success { color: var(--organic-success); } .organic-text-warning { color: var(--organic-warning); } .organic-text-danger { color: var(--organic-danger); }
|
|
518
518
|
.organic-bg-primary { background: var(--organic-primary); color: var(--organic-on-primary); } .organic-bg-secondary { background: var(--organic-secondary); color: var(--organic-on-secondary); }
|
|
519
519
|
.organic-border { border: 1px solid var(--organic-border); } .organic-rounded { border-radius: var(--organic-radius-md); } .organic-rounded-lg { border-radius: var(--organic-radius-lg); } .organic-rounded-xl { border-radius: var(--organic-radius-xl); } .organic-pill { border-radius: var(--organic-radius-pill); }
|
|
520
520
|
.organic-sr-only, .organic-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
@@ -622,7 +622,7 @@
|
|
|
622
622
|
.organic-button.organic-button-outline-heavy,
|
|
623
623
|
.organic-button-outline-heavy {
|
|
624
624
|
background: transparent;
|
|
625
|
-
color: var(--organic-primary);
|
|
625
|
+
color: var(--usk-primary-ink, var(--organic-primary));
|
|
626
626
|
border-style: solid;
|
|
627
627
|
border-width: 2px;
|
|
628
628
|
border-color: var(--organic-primary);
|
|
@@ -692,7 +692,7 @@
|
|
|
692
692
|
|
|
693
693
|
.organic-eyebrow {
|
|
694
694
|
margin: 0;
|
|
695
|
-
color: var(--organic-primary);
|
|
695
|
+
color: var(--usk-primary-ink, var(--organic-primary));
|
|
696
696
|
font-family: var(--organic-font-heading);
|
|
697
697
|
font-size: .76rem;
|
|
698
698
|
font-weight: 900;
|
|
@@ -768,7 +768,7 @@
|
|
|
768
768
|
.organic-input, .organic-textarea, .organic-select { border-radius: var(--organic-radius-lg); }
|
|
769
769
|
.organic-card-media { border-radius: 42% 58% 36% 64% / 50% 36% 64% 50%; }
|
|
770
770
|
.organic-media-scrim { border-radius: 2.8rem 1.2rem 3.2rem 1.8rem; }
|
|
771
|
-
.organic-icon-medallion { border-radius: 46% 54% 43% 57% / 56% 43% 57% 44%; background: rgb(var(--organic-primary-rgb) / .14); color: var(--organic-primary); border-color: rgb(var(--organic-primary-rgb) / .3); box-shadow: 0 .5rem 1.4rem rgb(var(--organic-primary-rgb) / .12); }
|
|
771
|
+
.organic-icon-medallion { border-radius: 46% 54% 43% 57% / 56% 43% 57% 44%; background: rgb(var(--organic-primary-rgb) / .14); color: var(--usk-primary-ink, var(--organic-primary)); border-color: rgb(var(--organic-primary-rgb) / .3); box-shadow: 0 .5rem 1.4rem rgb(var(--organic-primary-rgb) / .12); }
|
|
772
772
|
.organic-badge-seal { border-radius: 45% 55% 48% 52% / 55% 44% 56% 45%; }
|
|
773
773
|
.organic-feature-strip, .organic-callout-bar { border-radius: 2.2rem 1.35rem 2.5rem 1.5rem; }
|
|
774
774
|
.organic-card-accent-edge { border-inline-start: 0; background: linear-gradient(100deg, rgb(var(--organic-primary-rgb) / .11), transparent 38%), var(--organic-card-bg); }
|
|
@@ -985,7 +985,7 @@
|
|
|
985
985
|
.organic-button-primary { background: var(--organic-primary); color: var(--organic-on-primary); border-color: var(--organic-primary); }
|
|
986
986
|
.organic-button-secondary { background: var(--organic-secondary); color: var(--organic-on-secondary); border-color: var(--organic-secondary); }
|
|
987
987
|
.organic-button-danger { background: var(--organic-danger); color: var(--organic-on-danger); border-color: var(--organic-danger); }
|
|
988
|
-
.organic-button-ghost { background: transparent; color: var(--organic-primary); border-color: transparent; }
|
|
988
|
+
.organic-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--organic-primary)); border-color: transparent; }
|
|
989
989
|
}
|
|
990
990
|
|
|
991
991
|
@layer ui-style-kit.organic_modern {
|
|
@@ -1044,7 +1044,6 @@
|
|
|
1044
1044
|
--usk-native-progress-track-radius: 99px;
|
|
1045
1045
|
--usk-native-progress-value-background: var(--organic-primary);
|
|
1046
1046
|
--usk-native-progress-value-radius: 99px;
|
|
1047
|
-
--usk-native-select-indicator-image: none;
|
|
1048
1047
|
background: var(--organic-bg);
|
|
1049
1048
|
color: var(--organic-text);
|
|
1050
1049
|
font-family: var(--organic-font-sans);
|
|
@@ -1124,7 +1123,7 @@
|
|
|
1124
1123
|
.organic-masthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 8px 4px 20px; border-bottom: 1px solid var(--organic-border); }
|
|
1125
1124
|
.organic-brand { display: flex; gap: 12px; align-items: center; }
|
|
1126
1125
|
.organic-brand strong { display: block; font: 500 30px/1 var(--organic-font-display); }
|
|
1127
|
-
.organic-brand .organic-icon { color: var(--organic-accent); width: 30px; height: 30px; }
|
|
1126
|
+
.organic-brand .organic-icon { color: var(--usk-accent-ink, var(--organic-accent)); width: 30px; height: 30px; }
|
|
1128
1127
|
.organic-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
|
|
1129
1128
|
.organic-section-heading :where(h3, h4), .organic-section-heading { font-family: var(--organic-font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; }
|
|
1130
1129
|
.organic-workspace { display: grid; grid-template-columns: minmax(170px, .75fr) minmax(0, 2.7fr) minmax(0, 2.25fr); gap: 12px; padding-top: 12px; }
|
|
@@ -1170,7 +1169,7 @@
|
|
|
1170
1169
|
.organic-performance meter { width: 100%; }
|
|
1171
1170
|
.organic-notices { display: flex; gap: 12px; flex-wrap: wrap; }
|
|
1172
1171
|
.organic-notice { display: flex; flex: 1 1 130px; gap: 10px; padding: 12px; background: var(--organic-surface); border-radius: 8px; color: var(--organic-text); }
|
|
1173
|
-
.organic-notice > .organic-icon { color: var(--organic-accent); }
|
|
1172
|
+
.organic-notice > .organic-icon { color: var(--usk-accent-ink, var(--organic-accent)); }
|
|
1174
1173
|
.organic-notice small { display: block; margin-top: 4px; }
|
|
1175
1174
|
.organic-add-material { padding: 16px; background: var(--organic-surface); border: 1px solid var(--organic-border); border-radius: 12px; }
|
|
1176
1175
|
.organic-control-lab { padding: 16px; min-width: 0; background: var(--organic-surface); color: var(--organic-text); border: 1px solid var(--organic-border); border-radius: 14px 14px 14px 26px; box-shadow: var(--organic-quiet-shadow); }
|
|
@@ -379,7 +379,7 @@
|
|
|
379
379
|
.paper-title, .paper-heading, .paper-kicker, .paper-button, .paper-badge, .paper-nav-link { font-family: var(--paper-font-heading); }
|
|
380
380
|
.paper-title { margin: 0; color: var(--paper-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
|
|
381
381
|
.paper-heading { margin: 0; color: var(--paper-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
|
|
382
|
-
.paper-kicker { margin: 0; color: var(--paper-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
|
|
382
|
+
.paper-kicker { margin: 0; color: var(--usk-primary-ink, var(--paper-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
|
|
383
383
|
.paper-subtitle, .paper-copy { margin: 0; color: var(--paper-text-muted); line-height: 1.65; }
|
|
384
384
|
.paper-text-muted { color: var(--paper-text-muted); }
|
|
385
385
|
.paper-divider { width: 100%; height: 1px; border: 0; background: var(--paper-border); }
|
|
@@ -513,7 +513,7 @@
|
|
|
513
513
|
Utilities
|
|
514
514
|
========================================================= */
|
|
515
515
|
|
|
516
|
-
.paper-text-primary { color: var(--paper-primary); } .paper-text-secondary { color: var(--paper-secondary); } .paper-text-accent { color: var(--paper-accent); } .paper-text-success { color: var(--paper-success); } .paper-text-warning { color: var(--paper-warning); } .paper-text-danger { color: var(--paper-danger); }
|
|
516
|
+
.paper-text-primary { color: var(--usk-primary-ink, var(--paper-primary)); } .paper-text-secondary { color: var(--paper-secondary); } .paper-text-accent { color: var(--usk-accent-ink, var(--paper-accent)); } .paper-text-success { color: var(--paper-success); } .paper-text-warning { color: var(--paper-warning); } .paper-text-danger { color: var(--paper-danger); }
|
|
517
517
|
.paper-bg-primary { background: var(--paper-primary); color: var(--paper-on-primary); } .paper-bg-secondary { background: var(--paper-secondary); color: var(--paper-on-secondary); }
|
|
518
518
|
.paper-border { border: 1px solid var(--paper-border); } .paper-rounded { border-radius: var(--paper-radius-md); } .paper-rounded-lg { border-radius: var(--paper-radius-lg); } .paper-rounded-xl { border-radius: var(--paper-radius-xl); } .paper-pill { border-radius: var(--paper-radius-pill); }
|
|
519
519
|
.paper-sr-only, .paper-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
@@ -621,7 +621,7 @@
|
|
|
621
621
|
.paper-button.paper-button-outline-heavy,
|
|
622
622
|
.paper-button-outline-heavy {
|
|
623
623
|
background: transparent;
|
|
624
|
-
color: var(--paper-primary);
|
|
624
|
+
color: var(--usk-primary-ink, var(--paper-primary));
|
|
625
625
|
border-style: solid;
|
|
626
626
|
border-width: 2px;
|
|
627
627
|
border-color: var(--paper-primary);
|
|
@@ -691,7 +691,7 @@
|
|
|
691
691
|
|
|
692
692
|
.paper-eyebrow {
|
|
693
693
|
margin: 0;
|
|
694
|
-
color: var(--paper-primary);
|
|
694
|
+
color: var(--usk-primary-ink, var(--paper-primary));
|
|
695
695
|
font-family: var(--paper-font-heading);
|
|
696
696
|
font-size: .76rem;
|
|
697
697
|
font-weight: 900;
|
|
@@ -771,7 +771,7 @@
|
|
|
771
771
|
.paper-card-media, .paper-media-scrim { border-radius: 0; filter: grayscale(.72) contrast(1.04); }
|
|
772
772
|
.paper-feature-strip, .paper-callout-bar { border-radius: 0; }
|
|
773
773
|
.paper-icon-medallion { background: transparent; color: var(--paper-text); border: 1px solid var(--paper-text); box-shadow: none; }
|
|
774
|
-
.paper-badge-seal { border-radius: 50%; border-style: double; border-width: 4px; background: transparent; color: var(--paper-primary); transform: rotate(-4deg); }
|
|
774
|
+
.paper-badge-seal { border-radius: 50%; border-style: double; border-width: 4px; background: transparent; color: var(--usk-primary-ink, var(--paper-primary)); transform: rotate(-4deg); }
|
|
775
775
|
.paper-card-accent-edge { border-inline-start: 0; border-block-start: .2rem solid var(--paper-primary); }
|
|
776
776
|
.paper-feature-item { align-items: start; }
|
|
777
777
|
|
|
@@ -945,7 +945,7 @@
|
|
|
945
945
|
.paper-button-primary { background: var(--paper-primary); color: var(--paper-on-primary); border-color: var(--paper-primary); }
|
|
946
946
|
.paper-button-secondary { background: var(--paper-secondary); color: var(--paper-on-secondary); border-color: var(--paper-secondary); }
|
|
947
947
|
.paper-button-danger { background: var(--paper-danger); color: var(--paper-on-danger); border-color: var(--paper-danger); }
|
|
948
|
-
.paper-button-ghost { background: transparent; color: var(--paper-primary); border-color: transparent; }
|
|
948
|
+
.paper-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--paper-primary)); border-color: transparent; }
|
|
949
949
|
}
|
|
950
950
|
|
|
951
951
|
@layer ui-style-kit.paper_editorial {
|
package/styles/retro-glass.css
CHANGED
|
@@ -448,7 +448,7 @@
|
|
|
448
448
|
[data-ui="retro-glass"] :where(a) { color: var(--rg-link); text-underline-offset: 0.18em; } [data-ui="retro-glass"] ::selection { background: var(--rg-primary); color: var(--rg-on-primary); }
|
|
449
449
|
|
|
450
450
|
.rg-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); } .rg-container { width: min(100% - 2rem, 1200px); margin-inline: auto; } .rg-stack { display: flex; flex-direction: column; gap: var(--rg-space-4); } .rg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-space-3); } .rg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--rg-space-5); } .rg-section { padding: clamp(1.25rem, 4vw, 2.5rem); }
|
|
451
|
-
.rg-title, .rg-heading, .rg-kicker, .rg-button, .rg-badge, .rg-nav-link { font-family: var(--rg-font-heading); text-transform: uppercase; } .rg-title { margin: 0; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: .06em; text-shadow: 0 0 14px var(--rg-glow-primary), 0 0 34px var(--rg-glow-accent); } .rg-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: .06em; } .rg-kicker { margin: 0; color: var(--rg-primary); font-size: .8rem; font-weight: 900; letter-spacing: .18em; } .rg-subtitle, .rg-copy { margin: 0; color: var(--rg-text-muted); line-height: 1.65; } .rg-text-muted { color: var(--rg-text-muted); }
|
|
451
|
+
.rg-title, .rg-heading, .rg-kicker, .rg-button, .rg-badge, .rg-nav-link { font-family: var(--rg-font-heading); text-transform: uppercase; } .rg-title { margin: 0; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: .06em; text-shadow: 0 0 14px var(--rg-glow-primary), 0 0 34px var(--rg-glow-accent); } .rg-heading { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: .06em; } .rg-kicker { margin: 0; color: var(--usk-primary-ink, var(--rg-primary)); font-size: .8rem; font-weight: 900; letter-spacing: .18em; } .rg-subtitle, .rg-copy { margin: 0; color: var(--rg-text-muted); line-height: 1.65; } .rg-text-muted { color: var(--rg-text-muted); }
|
|
452
452
|
|
|
453
453
|
.rg-card, .rg-panel, .rg-console, .rg-toolbar, .rg-table-wrap { position: relative; background: linear-gradient(135deg, rgb(255 255 255 / .18), rgb(255 255 255 / .04)), linear-gradient(135deg, rgb(var(--rg-primary-rgb) / .06), transparent 52%), var(--rg-surface); color: var(--rg-text); border: 1px solid var(--rg-border); border-top-color: rgb(255 255 255 / .28); border-left-color: rgb(255 255 255 / .2); border-radius: var(--rg-radius-xl); box-shadow: var(--rg-shadow-md), 0 0 28px var(--rg-glow-primary); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); transition: transform var(--rg-transition-base), box-shadow var(--rg-transition-base), border-color var(--rg-transition-base); }
|
|
454
454
|
.rg-card::before, .rg-panel::before, .rg-console::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / .1), transparent 30%), linear-gradient(90deg, transparent, rgb(var(--rg-accent-rgb) / .08), transparent); border-radius: inherit; } .rg-card, .rg-panel, .rg-console { padding: var(--rg-space-6); } .rg-console { border-radius: var(--rg-radius-lg); box-shadow: var(--rg-shadow-lg), inset 0 0 28px rgb(var(--rg-primary-rgb) / .08), 0 0 32px var(--rg-glow-primary); } .rg-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rg-space-4); padding: var(--rg-space-4); } .rg-hover-lift:hover { transform: translateY(-3px); border-color: rgb(var(--rg-primary-rgb) / .68); box-shadow: var(--rg-shadow-lg), 0 0 44px var(--rg-glow-primary), 0 0 60px var(--rg-glow-secondary); }
|
|
@@ -467,7 +467,7 @@
|
|
|
467
467
|
.rg-progress { width: 100%; height: .9rem; background: var(--rg-surface-soft); border: 1px solid rgb(var(--rg-border-rgb) / .4); border-radius: var(--rg-radius-pill); box-shadow: inset 0 8px 18px rgb(0 0 0 / .14); overflow: hidden; } .rg-progress-bar { height: 100%; width: var(--rg-progress-value, 50%); background: linear-gradient(90deg, var(--rg-primary), var(--rg-accent), var(--rg-secondary)); border-radius: inherit; box-shadow: 0 0 18px var(--rg-glow-primary); }
|
|
468
468
|
.rg-alert { padding: var(--rg-space-4); background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-lg); box-shadow: var(--rg-shadow-md), 0 0 22px var(--rg-glow-primary); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .rg-alert-title { margin: 0; font-family: var(--rg-font-heading); text-transform: uppercase; } .rg-alert-body { margin: .5rem 0 0; color: var(--rg-text-muted); } .rg-alert-success { border-left: 4px solid var(--rg-success); } .rg-alert-warning { border-left: 4px solid var(--rg-warning); } .rg-alert-danger { border-left: 4px solid var(--rg-danger); }
|
|
469
469
|
.rg-table-wrap { overflow: auto; } .rg-table { width: 100%; border-collapse: collapse; } .rg-table th, .rg-table td { padding: .9rem 1rem; border-bottom: 1px solid rgb(var(--rg-border-rgb) / .34); text-align: left; } .rg-table th { background: rgb(var(--rg-primary-rgb) / .1); font-family: var(--rg-font-heading); text-transform: uppercase; letter-spacing: .1em; } .rg-table td { color: var(--rg-text-muted); }
|
|
470
|
-
.rg-text-primary { color: var(--rg-primary); } .rg-text-secondary { color: var(--rg-secondary); } .rg-text-accent { color: var(--rg-accent); } .rg-text-success { color: var(--rg-success); } .rg-text-warning { color: var(--rg-warning); } .rg-text-danger { color: var(--rg-danger); }
|
|
470
|
+
.rg-text-primary { color: var(--usk-primary-ink, var(--rg-primary)); } .rg-text-secondary { color: var(--rg-secondary); } .rg-text-accent { color: var(--usk-accent-ink, var(--rg-accent)); } .rg-text-success { color: var(--rg-success); } .rg-text-warning { color: var(--rg-warning); } .rg-text-danger { color: var(--rg-danger); }
|
|
471
471
|
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-ui="retro-glass"] { --rg-panel-alpha: .96; --rg-panel-strong-alpha: 1; --rg-panel-soft-alpha: .9; } }
|
|
472
472
|
[data-ui="retro-glass"] :focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; }
|
|
473
473
|
@media (prefers-reduced-motion: reduce) { [data-ui="retro-glass"] *, [data-ui="retro-glass"] *::before, [data-ui="retro-glass"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
|
|
@@ -598,7 +598,7 @@
|
|
|
598
598
|
.rg-button.rg-button-outline-heavy,
|
|
599
599
|
.rg-button-outline-heavy {
|
|
600
600
|
background: transparent;
|
|
601
|
-
color: var(--rg-primary);
|
|
601
|
+
color: var(--usk-primary-ink, var(--rg-primary));
|
|
602
602
|
border-style: solid;
|
|
603
603
|
border-width: 2px;
|
|
604
604
|
border-color: var(--rg-primary);
|
|
@@ -668,7 +668,7 @@
|
|
|
668
668
|
|
|
669
669
|
.rg-eyebrow {
|
|
670
670
|
margin: 0;
|
|
671
|
-
color: var(--rg-primary);
|
|
671
|
+
color: var(--usk-primary-ink, var(--rg-primary));
|
|
672
672
|
font-family: var(--rg-font-heading);
|
|
673
673
|
font-size: .76rem;
|
|
674
674
|
font-weight: 900;
|
|
@@ -907,7 +907,7 @@
|
|
|
907
907
|
.rg-button-primary { background: linear-gradient(180deg, rgb(var(--rg-surface-strong-rgb) / .55), transparent 52%), var(--rg-primary); color: var(--rg-on-primary); border-color: var(--rg-primary); }
|
|
908
908
|
.rg-button-secondary { background: linear-gradient(180deg, rgb(var(--rg-surface-strong-rgb) / .48), transparent 52%), var(--rg-secondary); color: var(--rg-on-secondary); border-color: var(--rg-secondary); }
|
|
909
909
|
.rg-button-danger { background: linear-gradient(180deg, rgb(var(--rg-surface-strong-rgb) / .42), transparent 52%), var(--rg-danger); color: var(--rg-on-danger); border-color: var(--rg-danger); }
|
|
910
|
-
.rg-button-ghost { background: transparent; color: var(--rg-primary); border-color: transparent; }
|
|
910
|
+
.rg-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--rg-primary)); border-color: transparent; }
|
|
911
911
|
}
|
|
912
912
|
|
|
913
913
|
@layer ui-style-kit.retro_glass {
|
package/styles/retrofuturism.css
CHANGED
|
@@ -380,7 +380,7 @@
|
|
|
380
380
|
.retro-title, .retro-heading, .retro-kicker, .retro-button, .retro-badge, .retro-nav-link { font-family: var(--retro-font-heading); }
|
|
381
381
|
.retro-title { margin: 0; color: var(--retro-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.055em; }
|
|
382
382
|
.retro-heading { margin: 0; color: var(--retro-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
|
|
383
|
-
.retro-kicker { margin: 0; color: var(--retro-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
|
|
383
|
+
.retro-kicker { margin: 0; color: var(--usk-primary-ink, var(--retro-primary)); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
|
|
384
384
|
.retro-subtitle, .retro-copy { margin: 0; color: var(--retro-text-muted); line-height: 1.65; }
|
|
385
385
|
.retro-text-muted { color: var(--retro-text-muted); }
|
|
386
386
|
.retro-divider { width: 100%; height: 1px; border: 0; background: var(--retro-border); }
|
|
@@ -516,7 +516,7 @@
|
|
|
516
516
|
Utilities
|
|
517
517
|
========================================================= */
|
|
518
518
|
|
|
519
|
-
.retro-text-primary { color: var(--retro-primary); } .retro-text-secondary { color: var(--retro-secondary); } .retro-text-accent { color: var(--retro-accent); } .retro-text-success { color: var(--retro-success); } .retro-text-warning { color: var(--retro-warning); } .retro-text-danger { color: var(--retro-danger); }
|
|
519
|
+
.retro-text-primary { color: var(--usk-primary-ink, var(--retro-primary)); } .retro-text-secondary { color: var(--retro-secondary); } .retro-text-accent { color: var(--usk-accent-ink, var(--retro-accent)); } .retro-text-success { color: var(--retro-success); } .retro-text-warning { color: var(--retro-warning); } .retro-text-danger { color: var(--retro-danger); }
|
|
520
520
|
.retro-bg-primary { background: var(--retro-primary); color: var(--retro-on-primary); } .retro-bg-secondary { background: var(--retro-secondary); color: var(--retro-on-secondary); }
|
|
521
521
|
.retro-border { border: 1px solid var(--retro-border); } .retro-rounded { border-radius: var(--retro-radius-md); } .retro-rounded-lg { border-radius: var(--retro-radius-lg); } .retro-rounded-xl { border-radius: var(--retro-radius-xl); } .retro-pill { border-radius: var(--retro-radius-pill); }
|
|
522
522
|
.retro-sr-only, .retro-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
@@ -629,7 +629,7 @@
|
|
|
629
629
|
.retro-button.retro-button-outline-heavy,
|
|
630
630
|
.retro-button-outline-heavy {
|
|
631
631
|
background: transparent;
|
|
632
|
-
color: var(--retro-primary);
|
|
632
|
+
color: var(--usk-primary-ink, var(--retro-primary));
|
|
633
633
|
border-style: solid;
|
|
634
634
|
border-width: 2px;
|
|
635
635
|
border-color: var(--retro-primary);
|
|
@@ -699,7 +699,7 @@
|
|
|
699
699
|
|
|
700
700
|
.retro-eyebrow {
|
|
701
701
|
margin: 0;
|
|
702
|
-
color: var(--retro-primary);
|
|
702
|
+
color: var(--usk-primary-ink, var(--retro-primary));
|
|
703
703
|
font-family: var(--retro-font-heading);
|
|
704
704
|
font-size: .76rem;
|
|
705
705
|
font-weight: 900;
|
|
@@ -1326,7 +1326,7 @@
|
|
|
1326
1326
|
|
|
1327
1327
|
.retro-button.retro-button-outline-heavy, .retro-button-outline-heavy {
|
|
1328
1328
|
background: var(--retro-enamel-bg);
|
|
1329
|
-
color: var(--retro-primary);
|
|
1329
|
+
color: var(--usk-primary-ink, var(--retro-primary));
|
|
1330
1330
|
border: 4px double var(--retro-metal-edge);
|
|
1331
1331
|
border-radius: var(--retro-radius-pill);
|
|
1332
1332
|
clip-path: inset(0 round var(--retro-radius-pill));
|
|
@@ -1410,7 +1410,7 @@
|
|
|
1410
1410
|
.retro-button-primary { background: var(--retro-action-bg); color: var(--retro-on-primary); border-color: var(--retro-primary); }
|
|
1411
1411
|
.retro-button-secondary { background: var(--retro-secondary-action-bg); color: var(--retro-on-secondary); border-color: var(--retro-secondary-hover); }
|
|
1412
1412
|
.retro-button-danger { background: var(--retro-danger-action-bg); color: var(--retro-on-danger); border-color: var(--retro-danger); }
|
|
1413
|
-
.retro-button-ghost { background: transparent; color: var(--retro-primary); border-color: transparent; }
|
|
1413
|
+
.retro-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--retro-primary)); border-color: transparent; }
|
|
1414
1414
|
}
|
|
1415
1415
|
|
|
1416
1416
|
@layer ui-style-kit.retrofuturism {
|
package/styles/tactile.css
CHANGED
|
@@ -449,10 +449,10 @@
|
|
|
449
449
|
.tactile-button:active, .tactile-icon-button:active, .tactile-button[aria-pressed="true"], .tactile-icon-button[aria-pressed="true"], .tactile-button.is-active, .tactile-icon-button.is-active { transform: translateY(1px); box-shadow: var(--tactile-inset-shadow); }
|
|
450
450
|
.tactile-button-primary { background: var(--tactile-action-bg); color: var(--tactile-on-primary); border-color: var(--tactile-primary); box-shadow: var(--tactile-button-shadow); }
|
|
451
451
|
.tactile-button-primary:hover { background: var(--tactile-action-hover-bg); border-color: var(--tactile-primary-hover); }
|
|
452
|
-
.tactile-button-secondary { background: var(--tactile-control-bg); color: var(--tactile-primary); border-color: rgb(var(--tactile-primary-rgb) / .48); }
|
|
452
|
+
.tactile-button-secondary { background: var(--tactile-control-bg); color: var(--usk-primary-ink, var(--tactile-primary)); border-color: rgb(var(--tactile-primary-rgb) / .48); }
|
|
453
453
|
.tactile-button-secondary:hover { background: var(--tactile-field-bg); border-color: var(--tactile-primary); }
|
|
454
454
|
.tactile-button-danger { background: linear-gradient(180deg, var(--tactile-danger), rgb(var(--tactile-danger-rgb) / .82)); color: var(--tactile-on-danger); border-color: var(--tactile-danger); }
|
|
455
|
-
.tactile-button-ghost { background: transparent; color: var(--tactile-primary); border-color: transparent; box-shadow: none; }
|
|
455
|
+
.tactile-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--tactile-primary)); border-color: transparent; box-shadow: none; }
|
|
456
456
|
.tactile-icon-button { width: 3rem; padding: 0; border-radius: var(--tactile-radius-sm); }
|
|
457
457
|
.tactile-button:disabled, .tactile-icon-button:disabled, .tactile-disabled { opacity: .55; cursor: not-allowed; transform: none; }
|
|
458
458
|
|
|
@@ -544,7 +544,7 @@
|
|
|
544
544
|
Utilities
|
|
545
545
|
========================================================= */
|
|
546
546
|
|
|
547
|
-
.tactile-text-primary { color: var(--tactile-primary); } .tactile-text-secondary { color: var(--tactile-secondary); } .tactile-text-accent { color: var(--tactile-accent); } .tactile-text-success { color: var(--tactile-success); } .tactile-text-warning { color: var(--tactile-warning); } .tactile-text-danger { color: var(--tactile-danger); }
|
|
547
|
+
.tactile-text-primary { color: var(--usk-primary-ink, var(--tactile-primary)); } .tactile-text-secondary { color: var(--tactile-secondary); } .tactile-text-accent { color: var(--usk-accent-ink, var(--tactile-accent)); } .tactile-text-success { color: var(--tactile-success); } .tactile-text-warning { color: var(--tactile-warning); } .tactile-text-danger { color: var(--tactile-danger); }
|
|
548
548
|
.tactile-bg-primary { background: var(--tactile-primary); color: var(--tactile-on-primary); } .tactile-bg-secondary { background: var(--tactile-secondary); color: var(--tactile-on-secondary); }
|
|
549
549
|
.tactile-border { border: 1px solid var(--tactile-border); } .tactile-rounded { border-radius: var(--tactile-radius-md); } .tactile-rounded-lg { border-radius: var(--tactile-radius-lg); } .tactile-rounded-xl { border-radius: var(--tactile-radius-xl); } .tactile-pill { border-radius: var(--tactile-radius-pill); }
|
|
550
550
|
.tactile-sr-only, .tactile-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
@@ -655,7 +655,7 @@
|
|
|
655
655
|
.tactile-button.tactile-button-outline-heavy,
|
|
656
656
|
.tactile-button-outline-heavy {
|
|
657
657
|
background: transparent;
|
|
658
|
-
color: var(--tactile-primary);
|
|
658
|
+
color: var(--usk-primary-ink, var(--tactile-primary));
|
|
659
659
|
border-style: solid;
|
|
660
660
|
border-width: 2px;
|
|
661
661
|
border-color: var(--tactile-primary);
|
|
@@ -725,7 +725,7 @@
|
|
|
725
725
|
|
|
726
726
|
.tactile-eyebrow {
|
|
727
727
|
margin: 0;
|
|
728
|
-
color: var(--tactile-primary);
|
|
728
|
+
color: var(--usk-primary-ink, var(--tactile-primary));
|
|
729
729
|
font-family: var(--tactile-font-heading);
|
|
730
730
|
font-size: .76rem;
|
|
731
731
|
font-weight: 900;
|
|
@@ -1161,7 +1161,7 @@
|
|
|
1161
1161
|
.tactile-button-primary { background: var(--tactile-primary); color: var(--tactile-on-primary); border-color: var(--tactile-primary); }
|
|
1162
1162
|
.tactile-button-secondary { background: var(--tactile-secondary); color: var(--tactile-on-secondary); border-color: var(--tactile-secondary); }
|
|
1163
1163
|
.tactile-button-danger { background: var(--tactile-danger); color: var(--tactile-on-danger); border-color: var(--tactile-danger); }
|
|
1164
|
-
.tactile-button-ghost { background: transparent; color: var(--tactile-primary); border-color: transparent; }
|
|
1164
|
+
.tactile-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--tactile-primary)); border-color: transparent; }
|
|
1165
1165
|
}
|
|
1166
1166
|
|
|
1167
1167
|
@layer ui-style-kit.tactile {
|
|
@@ -1549,7 +1549,7 @@
|
|
|
1549
1549
|
|
|
1550
1550
|
.tactile-button-ghost {
|
|
1551
1551
|
background: transparent;
|
|
1552
|
-
color: var(--tactile-primary);
|
|
1552
|
+
color: var(--usk-primary-ink, var(--tactile-primary));
|
|
1553
1553
|
border-color: transparent;
|
|
1554
1554
|
box-shadow: none;
|
|
1555
1555
|
}
|