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.
Files changed (63) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/README.md +100 -31
  3. package/STYLE-MAP.md +19 -0
  4. package/dist/ui-style-kit.css +18417 -1704
  5. package/dist/ui-style-kit.min.css +2 -2
  6. package/dist/ui-style-kit.visual.css +17709 -1446
  7. package/dist/ui-style-kit.visual.min.css +2 -2
  8. package/dist/ui-style-kit.with-bridge.css +18425 -1706
  9. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  10. package/dist/visual/art-deco.css +4776 -0
  11. package/dist/visual/bauhaus.css +1809 -78
  12. package/dist/visual/bento.css +1825 -97
  13. package/dist/visual/brutalism.css +1774 -35
  14. package/dist/visual/clay.css +4789 -0
  15. package/dist/visual/cyberpunk.css +1765 -35
  16. package/dist/visual/data-terminal.css +4804 -0
  17. package/dist/visual/editorial-luxe.css +4804 -0
  18. package/dist/visual/industrial-utility.css +4797 -0
  19. package/dist/visual/maximalist.css +1771 -37
  20. package/dist/visual/minimal-saas.css +1801 -78
  21. package/dist/visual/neo-noir.css +4790 -0
  22. package/dist/visual/neumorphism.css +1807 -78
  23. package/dist/visual/organic-modern.css +4767 -0
  24. package/dist/visual/paper-editorial.css +4799 -0
  25. package/dist/visual/retro-glass.css +1786 -36
  26. package/dist/visual/retrofuturism.css +1759 -36
  27. package/dist/visual/tactile.css +1760 -36
  28. package/dist/visual/technical-blueprint.css +4791 -0
  29. package/dist/visual/y2k.css +1767 -35
  30. package/docs/ECOSYSTEM.md +8 -4
  31. package/docs/PUBLISHING.md +14 -10
  32. package/docs/STYLE-GUIDE.md +53 -13
  33. package/docs/TOKENS.md +10 -1
  34. package/docs/superpowers/plans/2026-08-29-preset-identity-system-refinement.md +649 -0
  35. package/docs/superpowers/specs/2026-08-29-preset-identity-system-refinement-design.md +212 -0
  36. package/manifest.json +160 -2
  37. package/package.json +63 -6
  38. package/styles/art-deco.css +683 -0
  39. package/styles/bauhaus.css +237 -3
  40. package/styles/bento.css +266 -7
  41. package/styles/brutalism.css +235 -3
  42. package/styles/clay.css +692 -0
  43. package/styles/components.css +608 -14
  44. package/styles/content-overflow.css +423 -4
  45. package/styles/cyberpunk.css +234 -3
  46. package/styles/data-terminal.css +691 -0
  47. package/styles/editorial-luxe.css +687 -0
  48. package/styles/industrial-utility.css +690 -0
  49. package/styles/interactive-surface-bridge.css +11 -5
  50. package/styles/interactive-surface-theme.css +11 -3
  51. package/styles/maximalist.css +238 -4
  52. package/styles/minimal-saas.css +234 -3
  53. package/styles/native-elements.css +64 -12
  54. package/styles/neo-noir.css +690 -0
  55. package/styles/neumorphism.css +234 -3
  56. package/styles/organic-modern.css +683 -0
  57. package/styles/paper-editorial.css +688 -0
  58. package/styles/retro-glass.css +242 -3
  59. package/styles/retrofuturism.css +233 -3
  60. package/styles/tactile.css +235 -3
  61. package/styles/technical-blueprint.css +686 -0
  62. package/styles/theme-colors.css +796 -5
  63. package/styles/y2k.css +237 -3
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * UI Style Kit CSS v2.2.0
2
+ * UI Style Kit CSS v2.3.0
3
3
  * CSS theme and UI style preset library.
4
4
  * License: MIT
5
5
  */
@@ -14,6 +14,16 @@
14
14
 
15
15
  @layer ui-style-kit.theme_colors {
16
16
  /* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
17
+ :where([data-ui][data-theme][data-mode="light"]) {
18
+ --usk-border-text-mix: 45%;
19
+ --usk-border-min-alpha: 1;
20
+ }
21
+
22
+ :where([data-ui][data-theme][data-mode="dark"], [data-ui][data-theme][data-mode="contrast"]) {
23
+ --usk-border-text-mix: 0%;
24
+ --usk-border-min-alpha: 0;
25
+ }
26
+
17
27
  :where([data-ui][data-theme="midnight-gold"][data-mode="light"]) {
18
28
  --usk-bg-rgb: 246 243 234;
19
29
  --usk-surface-rgb: 255 250 240;
@@ -23,7 +33,7 @@
23
33
  --usk-text-muted-rgb: 95 104 121;
24
34
  --usk-border-rgb: 214 200 165;
25
35
  --usk-primary-rgb: 184 135 47;
26
- --usk-primary-hover-rgb: 148 104 31;
36
+ --usk-primary-hover-rgb: 162 118 38;
27
37
  --usk-primary-text-rgb: 16 16 16;
28
38
  --usk-secondary-rgb: 34 49 79;
29
39
  --usk-secondary-hover-rgb: 23 36 60;
@@ -32,7 +42,7 @@
32
42
  --usk-success-rgb: 47 125 84;
33
43
  --usk-warning-rgb: 167 106 0;
34
44
  --usk-danger-rgb: 185 63 63;
35
- --usk-link-rgb: 138 100 31;
45
+ --usk-link-rgb: 132 94 27;
36
46
  --usk-accent-text-rgb: 0 0 0;
37
47
  --usk-success-text-rgb: 255 255 255;
38
48
  --usk-warning-text-rgb: 0 0 0;
@@ -488,7 +498,7 @@
488
498
  --usk-surface-strong-rgb: 255 250 241;
489
499
  --usk-surface-soft-rgb: 234 223 205;
490
500
  --usk-text-rgb: 43 36 25;
491
- --usk-text-muted-rgb: 113 103 84;
501
+ --usk-text-muted-rgb: 107 97 78;
492
502
  --usk-border-rgb: 215 198 167;
493
503
  --usk-primary-rgb: 140 106 61;
494
504
  --usk-primary-hover-rgb: 112 83 47;
@@ -647,7 +657,7 @@
647
657
  --usk-text-muted-rgb: 89 105 82;
648
658
  --usk-border-rgb: 198 216 179;
649
659
  --usk-primary-rgb: 95 159 31;
650
- --usk-primary-hover-rgb: 73 125 23;
660
+ --usk-primary-hover-rgb: 86 145 26;
651
661
  --usk-primary-text-rgb: 16 16 16;
652
662
  --usk-secondary-rgb: 20 127 134;
653
663
  --usk-secondary-hover-rgb: 14 98 104;
@@ -656,7 +666,7 @@
656
666
  --usk-success-rgb: 47 125 84;
657
667
  --usk-warning-rgb: 156 104 0;
658
668
  --usk-danger-rgb: 179 65 65;
659
- --usk-link-rgb: 73 125 23;
669
+ --usk-link-rgb: 65 112 19;
660
670
  --usk-accent-text-rgb: 0 0 0;
661
671
  --usk-success-text-rgb: 255 255 255;
662
672
  --usk-warning-text-rgb: 255 255 255;
@@ -793,6 +803,787 @@
793
803
  --usk-danger-text-rgb: 0 0 0;
794
804
  --usk-focus-rgb: 255 255 255;
795
805
  }
806
+
807
+
808
+ :where([data-ui][data-theme="chrome-navy"][data-mode="light"]) {
809
+ --usk-bg-rgb: 245 247 250;
810
+ --usk-surface-rgb: 255 255 255;
811
+ --usk-surface-strong-rgb: 253 254 255;
812
+ --usk-surface-soft-rgb: 230 234 240;
813
+ --usk-text-rgb: 13 27 42;
814
+ --usk-text-muted-rgb: 78 90 105;
815
+ --usk-border-rgb: 192 198 207;
816
+ --usk-primary-rgb: 31 58 95;
817
+ --usk-primary-hover-rgb: 22 44 72;
818
+ --usk-primary-text-rgb: 255 255 255;
819
+ --usk-secondary-rgb: 62 107 142;
820
+ --usk-secondary-hover-rgb: 50 87 118;
821
+ --usk-secondary-text-rgb: 255 255 255;
822
+ --usk-accent-rgb: 90 127 166;
823
+ --usk-success-rgb: 31 107 83;
824
+ --usk-warning-rgb: 164 106 0;
825
+ --usk-danger-rgb: 178 60 60;
826
+ --usk-link-rgb: 26 53 86;
827
+ --usk-accent-text-rgb: 0 0 0;
828
+ --usk-success-text-rgb: 255 255 255;
829
+ --usk-warning-text-rgb: 0 0 0;
830
+ --usk-danger-text-rgb: 255 255 255;
831
+ --usk-focus-rgb: 90 127 166;
832
+ }
833
+
834
+ :where([data-ui][data-theme="chrome-navy"][data-mode="dark"]) {
835
+ --usk-bg-rgb: 8 17 28;
836
+ --usk-surface-rgb: 16 33 49;
837
+ --usk-surface-strong-rgb: 23 48 66;
838
+ --usk-surface-soft-rgb: 12 26 39;
839
+ --usk-text-rgb: 239 244 250;
840
+ --usk-text-muted-rgb: 181 192 205;
841
+ --usk-border-rgb: 69 87 107;
842
+ --usk-primary-rgb: 126 169 211;
843
+ --usk-primary-hover-rgb: 165 194 225;
844
+ --usk-primary-text-rgb: 8 17 28;
845
+ --usk-secondary-rgb: 168 193 220;
846
+ --usk-secondary-hover-rgb: 199 216 234;
847
+ --usk-secondary-text-rgb: 8 17 28;
848
+ --usk-accent-rgb: 199 213 229;
849
+ --usk-success-rgb: 120 216 181;
850
+ --usk-warning-rgb: 255 209 122;
851
+ --usk-danger-rgb: 255 144 144;
852
+ --usk-link-rgb: 199 213 229;
853
+ --usk-accent-text-rgb: 0 0 0;
854
+ --usk-success-text-rgb: 0 0 0;
855
+ --usk-warning-text-rgb: 0 0 0;
856
+ --usk-danger-text-rgb: 0 0 0;
857
+ --usk-focus-rgb: 159 188 224;
858
+ }
859
+
860
+ :where([data-ui][data-theme="chrome-navy"][data-mode="contrast"]) {
861
+ --usk-bg-rgb: 0 0 0;
862
+ --usk-surface-rgb: 5 8 12;
863
+ --usk-surface-strong-rgb: 10 19 32;
864
+ --usk-surface-soft-rgb: 0 0 0;
865
+ --usk-text-rgb: 255 255 255;
866
+ --usk-text-muted-rgb: 242 247 255;
867
+ --usk-border-rgb: 255 255 255;
868
+ --usk-primary-rgb: 156 197 240;
869
+ --usk-primary-hover-rgb: 255 255 255;
870
+ --usk-primary-text-rgb: 0 0 0;
871
+ --usk-secondary-rgb: 0 230 255;
872
+ --usk-secondary-hover-rgb: 255 255 255;
873
+ --usk-secondary-text-rgb: 0 0 0;
874
+ --usk-accent-rgb: 230 240 255;
875
+ --usk-success-rgb: 0 255 144;
876
+ --usk-warning-rgb: 255 212 0;
877
+ --usk-danger-rgb: 255 92 92;
878
+ --usk-link-rgb: 156 197 240;
879
+ --usk-accent-text-rgb: 0 0 0;
880
+ --usk-success-text-rgb: 0 0 0;
881
+ --usk-warning-text-rgb: 0 0 0;
882
+ --usk-danger-text-rgb: 0 0 0;
883
+ --usk-focus-rgb: 255 255 255;
884
+ }
885
+
886
+ :where([data-ui][data-theme="recycled-emerald"][data-mode="light"]) {
887
+ --usk-bg-rgb: 246 251 249;
888
+ --usk-surface-rgb: 255 255 255;
889
+ --usk-surface-strong-rgb: 252 255 254;
890
+ --usk-surface-soft-rgb: 232 242 239;
891
+ --usk-text-rgb: 14 44 41;
892
+ --usk-text-muted-rgb: 88 112 109;
893
+ --usk-border-rgb: 199 216 212;
894
+ --usk-primary-rgb: 14 91 79;
895
+ --usk-primary-hover-rgb: 10 72 63;
896
+ --usk-primary-text-rgb: 255 255 255;
897
+ --usk-secondary-rgb: 15 118 110;
898
+ --usk-secondary-hover-rgb: 12 95 89;
899
+ --usk-secondary-text-rgb: 255 255 255;
900
+ --usk-accent-rgb: 52 211 153;
901
+ --usk-success-rgb: 21 115 71;
902
+ --usk-warning-rgb: 150 99 0;
903
+ --usk-danger-rgb: 185 63 79;
904
+ --usk-link-rgb: 12 81 71;
905
+ --usk-accent-text-rgb: 0 0 0;
906
+ --usk-success-text-rgb: 255 255 255;
907
+ --usk-warning-text-rgb: 255 255 255;
908
+ --usk-danger-text-rgb: 255 255 255;
909
+ --usk-focus-rgb: 52 211 153;
910
+ }
911
+
912
+ :where([data-ui][data-theme="recycled-emerald"][data-mode="dark"]) {
913
+ --usk-bg-rgb: 7 22 20;
914
+ --usk-surface-rgb: 16 38 34;
915
+ --usk-surface-strong-rgb: 22 54 47;
916
+ --usk-surface-soft-rgb: 11 29 26;
917
+ --usk-text-rgb: 236 251 247;
918
+ --usk-text-muted-rgb: 183 208 203;
919
+ --usk-border-rgb: 65 97 92;
920
+ --usk-primary-rgb: 69 209 175;
921
+ --usk-primary-hover-rgb: 114 227 197;
922
+ --usk-primary-text-rgb: 0 0 0;
923
+ --usk-secondary-rgb: 103 221 209;
924
+ --usk-secondary-hover-rgb: 141 236 227;
925
+ --usk-secondary-text-rgb: 0 0 0;
926
+ --usk-accent-rgb: 139 255 214;
927
+ --usk-success-rgb: 141 229 184;
928
+ --usk-warning-rgb: 255 210 122;
929
+ --usk-danger-rgb: 255 154 168;
930
+ --usk-link-rgb: 139 255 214;
931
+ --usk-accent-text-rgb: 0 0 0;
932
+ --usk-success-text-rgb: 0 0 0;
933
+ --usk-warning-text-rgb: 0 0 0;
934
+ --usk-danger-text-rgb: 0 0 0;
935
+ --usk-focus-rgb: 103 221 209;
936
+ }
937
+
938
+ :where([data-ui][data-theme="recycled-emerald"][data-mode="contrast"]) {
939
+ --usk-bg-rgb: 0 0 0;
940
+ --usk-surface-rgb: 3 16 13;
941
+ --usk-surface-strong-rgb: 8 33 28;
942
+ --usk-surface-soft-rgb: 0 0 0;
943
+ --usk-text-rgb: 255 255 255;
944
+ --usk-text-muted-rgb: 239 255 248;
945
+ --usk-border-rgb: 255 255 255;
946
+ --usk-primary-rgb: 56 240 185;
947
+ --usk-primary-hover-rgb: 255 255 255;
948
+ --usk-primary-text-rgb: 0 0 0;
949
+ --usk-secondary-rgb: 0 240 255;
950
+ --usk-secondary-hover-rgb: 255 255 255;
951
+ --usk-secondary-text-rgb: 0 0 0;
952
+ --usk-accent-rgb: 160 255 217;
953
+ --usk-success-rgb: 0 255 144;
954
+ --usk-warning-rgb: 255 212 0;
955
+ --usk-danger-rgb: 255 102 128;
956
+ --usk-link-rgb: 56 240 185;
957
+ --usk-accent-text-rgb: 0 0 0;
958
+ --usk-success-text-rgb: 0 0 0;
959
+ --usk-warning-text-rgb: 0 0 0;
960
+ --usk-danger-text-rgb: 0 0 0;
961
+ --usk-focus-rgb: 255 255 255;
962
+ }
963
+
964
+ :where([data-ui][data-theme="industrial-orange"][data-mode="light"]) {
965
+ --usk-bg-rgb: 245 243 239;
966
+ --usk-surface-rgb: 255 255 255;
967
+ --usk-surface-strong-rgb: 251 250 248;
968
+ --usk-surface-soft-rgb: 228 224 218;
969
+ --usk-text-rgb: 24 21 18;
970
+ --usk-text-muted-rgb: 98 91 84;
971
+ --usk-border-rgb: 184 178 169;
972
+ --usk-primary-rgb: 183 78 22;
973
+ --usk-primary-hover-rgb: 142 63 18;
974
+ --usk-primary-text-rgb: 255 255 255;
975
+ --usk-secondary-rgb: 43 43 43;
976
+ --usk-secondary-hover-rgb: 27 27 27;
977
+ --usk-secondary-text-rgb: 255 255 255;
978
+ --usk-accent-rgb: 225 139 61;
979
+ --usk-success-rgb: 47 125 84;
980
+ --usk-warning-rgb: 164 106 0;
981
+ --usk-danger-rgb: 178 60 60;
982
+ --usk-link-rgb: 142 63 18;
983
+ --usk-accent-text-rgb: 0 0 0;
984
+ --usk-success-text-rgb: 255 255 255;
985
+ --usk-warning-text-rgb: 0 0 0;
986
+ --usk-danger-text-rgb: 255 255 255;
987
+ --usk-focus-rgb: 225 139 61;
988
+ }
989
+
990
+ :where([data-ui][data-theme="industrial-orange"][data-mode="dark"]) {
991
+ --usk-bg-rgb: 13 12 11;
992
+ --usk-surface-rgb: 26 26 26;
993
+ --usk-surface-strong-rgb: 43 43 43;
994
+ --usk-surface-soft-rgb: 18 17 16;
995
+ --usk-text-rgb: 247 242 235;
996
+ --usk-text-muted-rgb: 197 188 177;
997
+ --usk-border-rgb: 89 81 73;
998
+ --usk-primary-rgb: 255 138 61;
999
+ --usk-primary-hover-rgb: 255 174 113;
1000
+ --usk-primary-text-rgb: 0 0 0;
1001
+ --usk-secondary-rgb: 198 191 182;
1002
+ --usk-secondary-hover-rgb: 227 222 215;
1003
+ --usk-secondary-text-rgb: 0 0 0;
1004
+ --usk-accent-rgb: 255 179 107;
1005
+ --usk-success-rgb: 139 223 178;
1006
+ --usk-warning-rgb: 255 210 122;
1007
+ --usk-danger-rgb: 255 152 152;
1008
+ --usk-link-rgb: 255 179 107;
1009
+ --usk-accent-text-rgb: 0 0 0;
1010
+ --usk-success-text-rgb: 0 0 0;
1011
+ --usk-warning-text-rgb: 0 0 0;
1012
+ --usk-danger-text-rgb: 0 0 0;
1013
+ --usk-focus-rgb: 255 154 66;
1014
+ }
1015
+
1016
+ :where([data-ui][data-theme="industrial-orange"][data-mode="contrast"]) {
1017
+ --usk-bg-rgb: 0 0 0;
1018
+ --usk-surface-rgb: 10 9 8;
1019
+ --usk-surface-strong-rgb: 23 19 17;
1020
+ --usk-surface-soft-rgb: 0 0 0;
1021
+ --usk-text-rgb: 255 255 255;
1022
+ --usk-text-muted-rgb: 247 241 234;
1023
+ --usk-border-rgb: 255 255 255;
1024
+ --usk-primary-rgb: 255 154 66;
1025
+ --usk-primary-hover-rgb: 255 255 255;
1026
+ --usk-primary-text-rgb: 0 0 0;
1027
+ --usk-secondary-rgb: 244 241 236;
1028
+ --usk-secondary-hover-rgb: 255 255 255;
1029
+ --usk-secondary-text-rgb: 0 0 0;
1030
+ --usk-accent-rgb: 255 195 111;
1031
+ --usk-success-rgb: 0 255 144;
1032
+ --usk-warning-rgb: 255 212 0;
1033
+ --usk-danger-rgb: 255 92 92;
1034
+ --usk-link-rgb: 255 179 107;
1035
+ --usk-accent-text-rgb: 0 0 0;
1036
+ --usk-success-text-rgb: 0 0 0;
1037
+ --usk-warning-text-rgb: 0 0 0;
1038
+ --usk-danger-text-rgb: 0 0 0;
1039
+ --usk-focus-rgb: 255 255 255;
1040
+ }
1041
+
1042
+ :where([data-ui][data-theme="performance-red"][data-mode="light"]) {
1043
+ --usk-bg-rgb: 246 246 247;
1044
+ --usk-surface-rgb: 255 255 255;
1045
+ --usk-surface-strong-rgb: 252 252 253;
1046
+ --usk-surface-soft-rgb: 230 231 234;
1047
+ --usk-text-rgb: 18 19 23;
1048
+ --usk-text-muted-rgb: 92 97 107;
1049
+ --usk-border-rgb: 199 203 210;
1050
+ --usk-primary-rgb: 200 16 46;
1051
+ --usk-primary-hover-rgb: 163 14 37;
1052
+ --usk-primary-text-rgb: 255 255 255;
1053
+ --usk-secondary-rgb: 31 31 31;
1054
+ --usk-secondary-hover-rgb: 17 17 17;
1055
+ --usk-secondary-text-rgb: 255 255 255;
1056
+ --usk-accent-rgb: 232 76 97;
1057
+ --usk-success-rgb: 47 125 84;
1058
+ --usk-warning-rgb: 164 106 0;
1059
+ --usk-danger-rgb: 168 15 41;
1060
+ --usk-link-rgb: 163 14 37;
1061
+ --usk-accent-text-rgb: 0 0 0;
1062
+ --usk-success-text-rgb: 255 255 255;
1063
+ --usk-warning-text-rgb: 0 0 0;
1064
+ --usk-danger-text-rgb: 255 255 255;
1065
+ --usk-focus-rgb: 232 76 97;
1066
+ }
1067
+
1068
+ :where([data-ui][data-theme="performance-red"][data-mode="dark"]) {
1069
+ --usk-bg-rgb: 9 9 10;
1070
+ --usk-surface-rgb: 20 20 22;
1071
+ --usk-surface-strong-rgb: 31 31 34;
1072
+ --usk-surface-soft-rgb: 15 16 18;
1073
+ --usk-text-rgb: 249 249 250;
1074
+ --usk-text-muted-rgb: 192 197 207;
1075
+ --usk-border-rgb: 76 79 86;
1076
+ --usk-primary-rgb: 255 76 102;
1077
+ --usk-primary-hover-rgb: 255 112 133;
1078
+ --usk-primary-text-rgb: 0 0 0;
1079
+ --usk-secondary-rgb: 209 211 216;
1080
+ --usk-secondary-hover-rgb: 232 233 236;
1081
+ --usk-secondary-text-rgb: 0 0 0;
1082
+ --usk-accent-rgb: 255 131 148;
1083
+ --usk-success-rgb: 143 223 182;
1084
+ --usk-warning-rgb: 255 210 122;
1085
+ --usk-danger-rgb: 255 127 144;
1086
+ --usk-link-rgb: 255 131 148;
1087
+ --usk-accent-text-rgb: 0 0 0;
1088
+ --usk-success-text-rgb: 0 0 0;
1089
+ --usk-warning-text-rgb: 0 0 0;
1090
+ --usk-danger-text-rgb: 0 0 0;
1091
+ --usk-focus-rgb: 255 76 102;
1092
+ }
1093
+
1094
+ :where([data-ui][data-theme="performance-red"][data-mode="contrast"]) {
1095
+ --usk-bg-rgb: 0 0 0;
1096
+ --usk-surface-rgb: 7 7 7;
1097
+ --usk-surface-strong-rgb: 18 18 18;
1098
+ --usk-surface-soft-rgb: 0 0 0;
1099
+ --usk-text-rgb: 255 255 255;
1100
+ --usk-text-muted-rgb: 245 245 245;
1101
+ --usk-border-rgb: 255 255 255;
1102
+ --usk-primary-rgb: 255 54 86;
1103
+ --usk-primary-hover-rgb: 255 255 255;
1104
+ --usk-primary-text-rgb: 0 0 0;
1105
+ --usk-secondary-rgb: 242 242 242;
1106
+ --usk-secondary-hover-rgb: 255 255 255;
1107
+ --usk-secondary-text-rgb: 0 0 0;
1108
+ --usk-accent-rgb: 255 149 163;
1109
+ --usk-success-rgb: 0 255 144;
1110
+ --usk-warning-rgb: 255 212 0;
1111
+ --usk-danger-rgb: 255 106 125;
1112
+ --usk-link-rgb: 255 149 163;
1113
+ --usk-accent-text-rgb: 0 0 0;
1114
+ --usk-success-text-rgb: 0 0 0;
1115
+ --usk-warning-text-rgb: 0 0 0;
1116
+ --usk-danger-text-rgb: 0 0 0;
1117
+ --usk-focus-rgb: 255 255 255;
1118
+ }
1119
+
1120
+ :where([data-ui][data-theme="heritage-brass"][data-mode="light"]) {
1121
+ --usk-bg-rgb: 250 244 234;
1122
+ --usk-surface-rgb: 255 253 249;
1123
+ --usk-surface-strong-rgb: 255 255 255;
1124
+ --usk-surface-soft-rgb: 239 228 207;
1125
+ --usk-text-rgb: 42 31 26;
1126
+ --usk-text-muted-rgb: 109 92 84;
1127
+ --usk-border-rgb: 212 192 166;
1128
+ --usk-primary-rgb: 107 15 26;
1129
+ --usk-primary-hover-rgb: 91 13 22;
1130
+ --usk-primary-text-rgb: 255 255 255;
1131
+ --usk-secondary-rgb: 17 17 17;
1132
+ --usk-secondary-hover-rgb: 0 0 0;
1133
+ --usk-secondary-text-rgb: 255 255 255;
1134
+ --usk-accent-rgb: 201 154 70;
1135
+ --usk-success-rgb: 47 125 84;
1136
+ --usk-warning-rgb: 160 107 19;
1137
+ --usk-danger-rgb: 178 60 60;
1138
+ --usk-link-rgb: 91 13 22;
1139
+ --usk-accent-text-rgb: 0 0 0;
1140
+ --usk-success-text-rgb: 255 255 255;
1141
+ --usk-warning-text-rgb: 0 0 0;
1142
+ --usk-danger-text-rgb: 255 255 255;
1143
+ --usk-focus-rgb: 201 154 70;
1144
+ }
1145
+
1146
+ :where([data-ui][data-theme="heritage-brass"][data-mode="dark"]) {
1147
+ --usk-bg-rgb: 19 13 10;
1148
+ --usk-surface-rgb: 33 24 20;
1149
+ --usk-surface-strong-rgb: 50 36 30;
1150
+ --usk-surface-soft-rgb: 25 18 15;
1151
+ --usk-text-rgb: 251 245 236;
1152
+ --usk-text-muted-rgb: 211 195 183;
1153
+ --usk-border-rgb: 106 82 62;
1154
+ --usk-primary-rgb: 201 138 93;
1155
+ --usk-primary-hover-rgb: 224 169 126;
1156
+ --usk-primary-text-rgb: 0 0 0;
1157
+ --usk-secondary-rgb: 246 235 215;
1158
+ --usk-secondary-hover-rgb: 255 248 235;
1159
+ --usk-secondary-text-rgb: 0 0 0;
1160
+ --usk-accent-rgb: 231 184 95;
1161
+ --usk-success-rgb: 152 224 182;
1162
+ --usk-warning-rgb: 255 210 122;
1163
+ --usk-danger-rgb: 255 160 154;
1164
+ --usk-link-rgb: 240 200 125;
1165
+ --usk-accent-text-rgb: 0 0 0;
1166
+ --usk-success-text-rgb: 0 0 0;
1167
+ --usk-warning-text-rgb: 0 0 0;
1168
+ --usk-danger-text-rgb: 0 0 0;
1169
+ --usk-focus-rgb: 231 184 95;
1170
+ }
1171
+
1172
+ :where([data-ui][data-theme="heritage-brass"][data-mode="contrast"]) {
1173
+ --usk-bg-rgb: 0 0 0;
1174
+ --usk-surface-rgb: 15 10 7;
1175
+ --usk-surface-strong-rgb: 28 18 13;
1176
+ --usk-surface-soft-rgb: 0 0 0;
1177
+ --usk-text-rgb: 255 255 255;
1178
+ --usk-text-muted-rgb: 255 245 232;
1179
+ --usk-border-rgb: 255 255 255;
1180
+ --usk-primary-rgb: 200 138 54;
1181
+ --usk-primary-hover-rgb: 255 255 255;
1182
+ --usk-primary-text-rgb: 0 0 0;
1183
+ --usk-secondary-rgb: 255 243 217;
1184
+ --usk-secondary-hover-rgb: 255 255 255;
1185
+ --usk-secondary-text-rgb: 0 0 0;
1186
+ --usk-accent-rgb: 255 211 107;
1187
+ --usk-success-rgb: 0 255 144;
1188
+ --usk-warning-rgb: 255 212 0;
1189
+ --usk-danger-rgb: 255 107 107;
1190
+ --usk-link-rgb: 255 211 107;
1191
+ --usk-accent-text-rgb: 0 0 0;
1192
+ --usk-success-text-rgb: 0 0 0;
1193
+ --usk-warning-text-rgb: 0 0 0;
1194
+ --usk-danger-text-rgb: 0 0 0;
1195
+ --usk-focus-rgb: 255 255 255;
1196
+ }
1197
+
1198
+ :where([data-ui][data-theme="service-blue-red"][data-mode="light"]) {
1199
+ --usk-bg-rgb: 245 247 250;
1200
+ --usk-surface-rgb: 255 255 255;
1201
+ --usk-surface-strong-rgb: 252 252 253;
1202
+ --usk-surface-soft-rgb: 232 235 240;
1203
+ --usk-text-rgb: 17 36 59;
1204
+ --usk-text-muted-rgb: 90 104 119;
1205
+ --usk-border-rgb: 200 207 217;
1206
+ --usk-primary-rgb: 13 59 102;
1207
+ --usk-primary-hover-rgb: 11 49 85;
1208
+ --usk-primary-text-rgb: 255 255 255;
1209
+ --usk-secondary-rgb: 214 43 43;
1210
+ --usk-secondary-hover-rgb: 178 35 35;
1211
+ --usk-secondary-text-rgb: 255 255 255;
1212
+ --usk-accent-rgb: 233 90 90;
1213
+ --usk-success-rgb: 47 125 84;
1214
+ --usk-warning-rgb: 164 106 0;
1215
+ --usk-danger-rgb: 198 40 40;
1216
+ --usk-link-rgb: 11 49 85;
1217
+ --usk-accent-text-rgb: 0 0 0;
1218
+ --usk-success-text-rgb: 255 255 255;
1219
+ --usk-warning-text-rgb: 0 0 0;
1220
+ --usk-danger-text-rgb: 255 255 255;
1221
+ --usk-focus-rgb: 214 43 43;
1222
+ }
1223
+
1224
+ :where([data-ui][data-theme="service-blue-red"][data-mode="dark"]) {
1225
+ --usk-bg-rgb: 8 17 28;
1226
+ --usk-surface-rgb: 16 32 48;
1227
+ --usk-surface-strong-rgb: 24 49 73;
1228
+ --usk-surface-soft-rgb: 11 23 36;
1229
+ --usk-text-rgb: 243 247 251;
1230
+ --usk-text-muted-rgb: 188 200 213;
1231
+ --usk-border-rgb: 71 96 121;
1232
+ --usk-primary-rgb: 108 169 227;
1233
+ --usk-primary-hover-rgb: 147 193 237;
1234
+ --usk-primary-text-rgb: 0 0 0;
1235
+ --usk-secondary-rgb: 255 106 106;
1236
+ --usk-secondary-hover-rgb: 255 146 146;
1237
+ --usk-secondary-text-rgb: 0 0 0;
1238
+ --usk-accent-rgb: 255 154 154;
1239
+ --usk-success-rgb: 143 223 182;
1240
+ --usk-warning-rgb: 255 210 122;
1241
+ --usk-danger-rgb: 255 143 143;
1242
+ --usk-link-rgb: 165 203 241;
1243
+ --usk-accent-text-rgb: 0 0 0;
1244
+ --usk-success-text-rgb: 0 0 0;
1245
+ --usk-warning-text-rgb: 0 0 0;
1246
+ --usk-danger-text-rgb: 0 0 0;
1247
+ --usk-focus-rgb: 255 106 106;
1248
+ }
1249
+
1250
+ :where([data-ui][data-theme="service-blue-red"][data-mode="contrast"]) {
1251
+ --usk-bg-rgb: 0 0 0;
1252
+ --usk-surface-rgb: 6 16 26;
1253
+ --usk-surface-strong-rgb: 10 29 48;
1254
+ --usk-surface-soft-rgb: 0 0 0;
1255
+ --usk-text-rgb: 255 255 255;
1256
+ --usk-text-muted-rgb: 238 244 255;
1257
+ --usk-border-rgb: 255 255 255;
1258
+ --usk-primary-rgb: 102 181 255;
1259
+ --usk-primary-hover-rgb: 255 255 255;
1260
+ --usk-primary-text-rgb: 0 0 0;
1261
+ --usk-secondary-rgb: 255 102 102;
1262
+ --usk-secondary-hover-rgb: 255 255 255;
1263
+ --usk-secondary-text-rgb: 0 0 0;
1264
+ --usk-accent-rgb: 255 170 170;
1265
+ --usk-success-rgb: 0 255 144;
1266
+ --usk-warning-rgb: 255 212 0;
1267
+ --usk-danger-rgb: 255 92 92;
1268
+ --usk-link-rgb: 140 198 255;
1269
+ --usk-accent-text-rgb: 0 0 0;
1270
+ --usk-success-text-rgb: 0 0 0;
1271
+ --usk-warning-text-rgb: 0 0 0;
1272
+ --usk-danger-text-rgb: 0 0 0;
1273
+ --usk-focus-rgb: 255 255 255;
1274
+ }
1275
+
1276
+ :where([data-ui][data-theme="newsprint-crimson"][data-mode="light"]) {
1277
+ --usk-bg-rgb: 238 229 212;
1278
+ --usk-surface-rgb: 248 241 229;
1279
+ --usk-surface-strong-rgb: 255 249 238;
1280
+ --usk-surface-soft-rgb: 222 209 188;
1281
+ --usk-text-rgb: 44 38 34;
1282
+ --usk-text-muted-rgb: 99 88 80;
1283
+ --usk-border-rgb: 184 170 152;
1284
+ --usk-primary-rgb: 122 35 41;
1285
+ --usk-primary-hover-rgb: 92 24 29;
1286
+ --usk-primary-text-rgb: 255 255 255;
1287
+ --usk-secondary-rgb: 64 58 54;
1288
+ --usk-secondary-hover-rgb: 45 41 38;
1289
+ --usk-secondary-text-rgb: 255 255 255;
1290
+ --usk-accent-rgb: 199 137 114;
1291
+ --usk-success-rgb: 47 114 82;
1292
+ --usk-warning-rgb: 154 101 0;
1293
+ --usk-danger-rgb: 165 42 50;
1294
+ --usk-link-rgb: 106 30 36;
1295
+ --usk-accent-text-rgb: 0 0 0;
1296
+ --usk-success-text-rgb: 255 255 255;
1297
+ --usk-warning-text-rgb: 255 255 255;
1298
+ --usk-danger-text-rgb: 255 255 255;
1299
+ --usk-focus-rgb: 165 42 50;
1300
+ }
1301
+
1302
+ :where([data-ui][data-theme="newsprint-crimson"][data-mode="dark"]) {
1303
+ --usk-bg-rgb: 22 16 13;
1304
+ --usk-surface-rgb: 33 24 20;
1305
+ --usk-surface-strong-rgb: 48 35 30;
1306
+ --usk-surface-soft-rgb: 26 18 15;
1307
+ --usk-text-rgb: 244 235 221;
1308
+ --usk-text-muted-rgb: 198 184 168;
1309
+ --usk-border-rgb: 106 90 76;
1310
+ --usk-primary-rgb: 216 124 131;
1311
+ --usk-primary-hover-rgb: 238 160 166;
1312
+ --usk-primary-text-rgb: 0 0 0;
1313
+ --usk-secondary-rgb: 200 185 166;
1314
+ --usk-secondary-hover-rgb: 229 214 194;
1315
+ --usk-secondary-text-rgb: 0 0 0;
1316
+ --usk-accent-rgb: 240 165 151;
1317
+ --usk-success-rgb: 138 214 175;
1318
+ --usk-warning-rgb: 255 210 122;
1319
+ --usk-danger-rgb: 255 154 154;
1320
+ --usk-link-rgb: 240 165 151;
1321
+ --usk-accent-text-rgb: 0 0 0;
1322
+ --usk-success-text-rgb: 0 0 0;
1323
+ --usk-warning-text-rgb: 0 0 0;
1324
+ --usk-danger-text-rgb: 0 0 0;
1325
+ --usk-focus-rgb: 240 165 151;
1326
+ }
1327
+
1328
+ :where([data-ui][data-theme="newsprint-crimson"][data-mode="contrast"]) {
1329
+ --usk-bg-rgb: 0 0 0;
1330
+ --usk-surface-rgb: 13 8 6;
1331
+ --usk-surface-strong-rgb: 26 16 12;
1332
+ --usk-surface-soft-rgb: 0 0 0;
1333
+ --usk-text-rgb: 255 255 255;
1334
+ --usk-text-muted-rgb: 255 245 232;
1335
+ --usk-border-rgb: 255 255 255;
1336
+ --usk-primary-rgb: 255 122 132;
1337
+ --usk-primary-hover-rgb: 255 255 255;
1338
+ --usk-primary-text-rgb: 0 0 0;
1339
+ --usk-secondary-rgb: 255 243 218;
1340
+ --usk-secondary-hover-rgb: 255 255 255;
1341
+ --usk-secondary-text-rgb: 0 0 0;
1342
+ --usk-accent-rgb: 255 179 167;
1343
+ --usk-success-rgb: 0 255 144;
1344
+ --usk-warning-rgb: 255 212 0;
1345
+ --usk-danger-rgb: 255 102 102;
1346
+ --usk-link-rgb: 255 154 163;
1347
+ --usk-accent-text-rgb: 0 0 0;
1348
+ --usk-success-text-rgb: 0 0 0;
1349
+ --usk-warning-text-rgb: 0 0 0;
1350
+ --usk-danger-text-rgb: 0 0 0;
1351
+ --usk-focus-rgb: 255 255 255;
1352
+ }
1353
+
1354
+ :where([data-ui][data-theme="foundry-amber"][data-mode="light"]) {
1355
+ --usk-bg-rgb: 241 240 237;
1356
+ --usk-surface-rgb: 255 255 255;
1357
+ --usk-surface-strong-rgb: 250 250 248;
1358
+ --usk-surface-soft-rgb: 223 221 216;
1359
+ --usk-text-rgb: 29 28 26;
1360
+ --usk-text-muted-rgb: 96 93 88;
1361
+ --usk-border-rgb: 167 163 155;
1362
+ --usk-primary-rgb: 169 87 0;
1363
+ --usk-primary-hover-rgb: 134 70 0;
1364
+ --usk-primary-text-rgb: 255 255 255;
1365
+ --usk-secondary-rgb: 58 58 60;
1366
+ --usk-secondary-hover-rgb: 39 39 41;
1367
+ --usk-secondary-text-rgb: 255 255 255;
1368
+ --usk-accent-rgb: 232 154 45;
1369
+ --usk-success-rgb: 47 114 82;
1370
+ --usk-warning-rgb: 154 101 0;
1371
+ --usk-danger-rgb: 173 54 54;
1372
+ --usk-link-rgb: 134 70 0;
1373
+ --usk-accent-text-rgb: 0 0 0;
1374
+ --usk-success-text-rgb: 255 255 255;
1375
+ --usk-warning-text-rgb: 255 255 255;
1376
+ --usk-danger-text-rgb: 255 255 255;
1377
+ --usk-focus-rgb: 232 154 45;
1378
+ }
1379
+
1380
+ :where([data-ui][data-theme="foundry-amber"][data-mode="dark"]) {
1381
+ --usk-bg-rgb: 17 17 19;
1382
+ --usk-surface-rgb: 27 28 31;
1383
+ --usk-surface-strong-rgb: 39 40 44;
1384
+ --usk-surface-soft-rgb: 22 23 26;
1385
+ --usk-text-rgb: 244 242 237;
1386
+ --usk-text-muted-rgb: 187 184 177;
1387
+ --usk-border-rgb: 88 90 95;
1388
+ --usk-primary-rgb: 240 160 58;
1389
+ --usk-primary-hover-rgb: 255 183 95;
1390
+ --usk-primary-text-rgb: 0 0 0;
1391
+ --usk-secondary-rgb: 174 179 184;
1392
+ --usk-secondary-hover-rgb: 208 211 214;
1393
+ --usk-secondary-text-rgb: 0 0 0;
1394
+ --usk-accent-rgb: 255 209 122;
1395
+ --usk-success-rgb: 138 214 175;
1396
+ --usk-warning-rgb: 255 210 122;
1397
+ --usk-danger-rgb: 255 153 153;
1398
+ --usk-link-rgb: 255 209 122;
1399
+ --usk-accent-text-rgb: 0 0 0;
1400
+ --usk-success-text-rgb: 0 0 0;
1401
+ --usk-warning-text-rgb: 0 0 0;
1402
+ --usk-danger-text-rgb: 0 0 0;
1403
+ --usk-focus-rgb: 240 160 58;
1404
+ }
1405
+
1406
+ :where([data-ui][data-theme="foundry-amber"][data-mode="contrast"]) {
1407
+ --usk-bg-rgb: 0 0 0;
1408
+ --usk-surface-rgb: 9 9 9;
1409
+ --usk-surface-strong-rgb: 21 21 21;
1410
+ --usk-surface-soft-rgb: 0 0 0;
1411
+ --usk-text-rgb: 255 255 255;
1412
+ --usk-text-muted-rgb: 244 244 242;
1413
+ --usk-border-rgb: 255 255 255;
1414
+ --usk-primary-rgb: 255 176 0;
1415
+ --usk-primary-hover-rgb: 255 255 255;
1416
+ --usk-primary-text-rgb: 0 0 0;
1417
+ --usk-secondary-rgb: 242 242 242;
1418
+ --usk-secondary-hover-rgb: 255 255 255;
1419
+ --usk-secondary-text-rgb: 0 0 0;
1420
+ --usk-accent-rgb: 255 211 107;
1421
+ --usk-success-rgb: 0 255 144;
1422
+ --usk-warning-rgb: 255 212 0;
1423
+ --usk-danger-rgb: 255 102 102;
1424
+ --usk-link-rgb: 255 194 71;
1425
+ --usk-accent-text-rgb: 0 0 0;
1426
+ --usk-success-text-rgb: 0 0 0;
1427
+ --usk-warning-text-rgb: 0 0 0;
1428
+ --usk-danger-text-rgb: 0 0 0;
1429
+ --usk-focus-rgb: 255 255 255;
1430
+ }
1431
+
1432
+ :where([data-ui][data-theme="soft-orchid"][data-mode="light"]) {
1433
+ --usk-bg-rgb: 247 244 252;
1434
+ --usk-surface-rgb: 255 255 255;
1435
+ --usk-surface-strong-rgb: 252 250 255;
1436
+ --usk-surface-soft-rgb: 233 226 246;
1437
+ --usk-text-rgb: 36 26 58;
1438
+ --usk-text-muted-rgb: 103 92 121;
1439
+ --usk-border-rgb: 207 197 227;
1440
+ --usk-primary-rgb: 101 82 184;
1441
+ --usk-primary-hover-rgb: 75 59 152;
1442
+ --usk-primary-text-rgb: 255 255 255;
1443
+ --usk-secondary-rgb: 105 82 163;
1444
+ --usk-secondary-hover-rgb: 81 63 129;
1445
+ --usk-secondary-text-rgb: 255 255 255;
1446
+ --usk-accent-rgb: 196 156 232;
1447
+ --usk-success-rgb: 62 122 98;
1448
+ --usk-warning-rgb: 152 100 0;
1449
+ --usk-danger-rgb: 168 58 96;
1450
+ --usk-link-rgb: 75 59 152;
1451
+ --usk-accent-text-rgb: 0 0 0;
1452
+ --usk-success-text-rgb: 255 255 255;
1453
+ --usk-warning-text-rgb: 255 255 255;
1454
+ --usk-danger-text-rgb: 255 255 255;
1455
+ --usk-focus-rgb: 141 117 209;
1456
+ }
1457
+
1458
+ :where([data-ui][data-theme="soft-orchid"][data-mode="dark"]) {
1459
+ --usk-bg-rgb: 18 13 29;
1460
+ --usk-surface-rgb: 28 21 43;
1461
+ --usk-surface-strong-rgb: 42 32 64;
1462
+ --usk-surface-soft-rgb: 23 17 34;
1463
+ --usk-text-rgb: 245 240 255;
1464
+ --usk-text-muted-rgb: 196 184 217;
1465
+ --usk-border-rgb: 93 79 120;
1466
+ --usk-primary-rgb: 169 148 242;
1467
+ --usk-primary-hover-rgb: 196 181 255;
1468
+ --usk-primary-text-rgb: 0 0 0;
1469
+ --usk-secondary-rgb: 209 183 245;
1470
+ --usk-secondary-hover-rgb: 229 213 255;
1471
+ --usk-secondary-text-rgb: 0 0 0;
1472
+ --usk-accent-rgb: 231 198 255;
1473
+ --usk-success-rgb: 145 223 184;
1474
+ --usk-warning-rgb: 255 210 122;
1475
+ --usk-danger-rgb: 255 153 183;
1476
+ --usk-link-rgb: 209 183 245;
1477
+ --usk-accent-text-rgb: 0 0 0;
1478
+ --usk-success-text-rgb: 0 0 0;
1479
+ --usk-warning-text-rgb: 0 0 0;
1480
+ --usk-danger-text-rgb: 0 0 0;
1481
+ --usk-focus-rgb: 209 183 245;
1482
+ }
1483
+
1484
+ :where([data-ui][data-theme="soft-orchid"][data-mode="contrast"]) {
1485
+ --usk-bg-rgb: 0 0 0;
1486
+ --usk-surface-rgb: 12 7 20;
1487
+ --usk-surface-strong-rgb: 26 16 40;
1488
+ --usk-surface-soft-rgb: 0 0 0;
1489
+ --usk-text-rgb: 255 255 255;
1490
+ --usk-text-muted-rgb: 247 240 255;
1491
+ --usk-border-rgb: 255 255 255;
1492
+ --usk-primary-rgb: 184 156 255;
1493
+ --usk-primary-hover-rgb: 255 255 255;
1494
+ --usk-primary-text-rgb: 0 0 0;
1495
+ --usk-secondary-rgb: 113 255 226;
1496
+ --usk-secondary-hover-rgb: 255 255 255;
1497
+ --usk-secondary-text-rgb: 0 0 0;
1498
+ --usk-accent-rgb: 255 208 242;
1499
+ --usk-success-rgb: 0 255 144;
1500
+ --usk-warning-rgb: 255 212 0;
1501
+ --usk-danger-rgb: 255 102 139;
1502
+ --usk-link-rgb: 201 181 255;
1503
+ --usk-accent-text-rgb: 0 0 0;
1504
+ --usk-success-text-rgb: 0 0 0;
1505
+ --usk-warning-text-rgb: 0 0 0;
1506
+ --usk-danger-text-rgb: 0 0 0;
1507
+ --usk-focus-rgb: 255 255 255;
1508
+ }
1509
+
1510
+ :where([data-ui][data-theme="electric-noir"][data-mode="light"]) {
1511
+ --usk-bg-rgb: 244 245 248;
1512
+ --usk-surface-rgb: 255 255 255;
1513
+ --usk-surface-strong-rgb: 251 252 255;
1514
+ --usk-surface-soft-rgb: 230 232 240;
1515
+ --usk-text-rgb: 20 17 28;
1516
+ --usk-text-muted-rgb: 95 90 104;
1517
+ --usk-border-rgb: 198 199 209;
1518
+ --usk-primary-rgb: 140 26 120;
1519
+ --usk-primary-hover-rgb: 114 21 98;
1520
+ --usk-primary-text-rgb: 255 255 255;
1521
+ --usk-secondary-rgb: 33 58 85;
1522
+ --usk-secondary-hover-rgb: 23 42 62;
1523
+ --usk-secondary-text-rgb: 255 255 255;
1524
+ --usk-accent-rgb: 46 117 144;
1525
+ --usk-success-rgb: 47 114 82;
1526
+ --usk-warning-rgb: 152 100 0;
1527
+ --usk-danger-rgb: 168 40 90;
1528
+ --usk-link-rgb: 114 21 98;
1529
+ --usk-accent-text-rgb: 255 255 255;
1530
+ --usk-success-text-rgb: 255 255 255;
1531
+ --usk-warning-text-rgb: 255 255 255;
1532
+ --usk-danger-text-rgb: 255 255 255;
1533
+ --usk-focus-rgb: 168 48 160;
1534
+ }
1535
+
1536
+ :where([data-ui][data-theme="electric-noir"][data-mode="dark"]) {
1537
+ --usk-bg-rgb: 9 7 20;
1538
+ --usk-surface-rgb: 17 11 27;
1539
+ --usk-surface-strong-rgb: 27 16 43;
1540
+ --usk-surface-soft-rgb: 13 9 22;
1541
+ --usk-text-rgb: 246 244 250;
1542
+ --usk-text-muted-rgb: 188 179 199;
1543
+ --usk-border-rgb: 75 50 92;
1544
+ --usk-primary-rgb: 226 74 196;
1545
+ --usk-primary-hover-rgb: 255 114 223;
1546
+ --usk-primary-text-rgb: 0 0 0;
1547
+ --usk-secondary-rgb: 75 166 201;
1548
+ --usk-secondary-hover-rgb: 120 197 226;
1549
+ --usk-secondary-text-rgb: 0 0 0;
1550
+ --usk-accent-rgb: 255 122 225;
1551
+ --usk-success-rgb: 138 214 175;
1552
+ --usk-warning-rgb: 255 210 122;
1553
+ --usk-danger-rgb: 255 122 159;
1554
+ --usk-link-rgb: 255 122 225;
1555
+ --usk-accent-text-rgb: 0 0 0;
1556
+ --usk-success-text-rgb: 0 0 0;
1557
+ --usk-warning-text-rgb: 0 0 0;
1558
+ --usk-danger-text-rgb: 0 0 0;
1559
+ --usk-focus-rgb: 255 122 225;
1560
+ }
1561
+
1562
+ :where([data-ui][data-theme="electric-noir"][data-mode="contrast"]) {
1563
+ --usk-bg-rgb: 0 0 0;
1564
+ --usk-surface-rgb: 9 5 18;
1565
+ --usk-surface-strong-rgb: 22 10 36;
1566
+ --usk-surface-soft-rgb: 0 0 0;
1567
+ --usk-text-rgb: 255 255 255;
1568
+ --usk-text-muted-rgb: 248 242 255;
1569
+ --usk-border-rgb: 255 255 255;
1570
+ --usk-primary-rgb: 255 89 215;
1571
+ --usk-primary-hover-rgb: 255 255 255;
1572
+ --usk-primary-text-rgb: 0 0 0;
1573
+ --usk-secondary-rgb: 0 215 255;
1574
+ --usk-secondary-hover-rgb: 255 255 255;
1575
+ --usk-secondary-text-rgb: 0 0 0;
1576
+ --usk-accent-rgb: 255 146 230;
1577
+ --usk-success-rgb: 0 255 144;
1578
+ --usk-warning-rgb: 255 212 0;
1579
+ --usk-danger-rgb: 255 102 139;
1580
+ --usk-link-rgb: 255 123 224;
1581
+ --usk-accent-text-rgb: 0 0 0;
1582
+ --usk-success-text-rgb: 0 0 0;
1583
+ --usk-warning-text-rgb: 0 0 0;
1584
+ --usk-danger-text-rgb: 0 0 0;
1585
+ --usk-focus-rgb: 255 255 255;
1586
+ }
796
1587
  }
797
1588
 
798
1589
 
@@ -838,7 +1629,7 @@
838
1629
  --usk-native-control-padding-inline: .95rem;
839
1630
  --usk-native-subcontrol-padding-block: .55rem;
840
1631
  --usk-native-subcontrol-padding-inline: .8rem;
841
- --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
1632
+ --usk-native-track: var(--usk-native-border);
842
1633
  --usk-native-track-fill: var(--usk-native-primary);
843
1634
  --usk-native-thumb: var(--usk-native-surface-strong);
844
1635
  --usk-native-thumb-border: var(--usk-native-primary);
@@ -869,7 +1660,10 @@
869
1660
  font-family: var(--usk-native-font-heading);
870
1661
  line-height: 1.15;
871
1662
  margin: 0 0 .65em;
872
- text-wrap: balance;
1663
+ }
1664
+
1665
+ @supports (text-wrap: balance) {
1666
+ [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
873
1667
  }
874
1668
 
875
1669
  [data-ui][data-theme][data-mode] :where(hgroup) {
@@ -917,7 +1711,7 @@
917
1711
  padding: .15em .35em;
918
1712
  color: var(--usk-native-text);
919
1713
  background: var(--usk-native-surface-soft);
920
- border: var(--usk-native-border-width) solid color-mix(in srgb, var(--usk-native-border) 62%, transparent);
1714
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
921
1715
  border-radius: var(--usk-native-radius-sm);
922
1716
  font-family: var(--usk-native-font-mono);
923
1717
  font-size: .92em;
@@ -950,7 +1744,7 @@
950
1744
  [data-ui][data-theme][data-mode] :where(mark) {
951
1745
  padding-inline: .15em;
952
1746
  color: var(--usk-native-text);
953
- background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
1747
+ background: rgb(var(--usk-warning-rgb) / .32);
954
1748
  border-radius: .2em;
955
1749
  }
956
1750
 
@@ -989,7 +1783,7 @@
989
1783
  min-inline-size: 0;
990
1784
  margin: 0 0 1rem;
991
1785
  padding: var(--usk-native-panel-padding);
992
- background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
1786
+ background: var(--usk-native-card-bg);
993
1787
  border: var(--usk-native-border-width) solid var(--usk-native-border);
994
1788
  border-radius: var(--usk-native-radius);
995
1789
  }
@@ -1017,7 +1811,7 @@
1017
1811
  align-items: center;
1018
1812
  }
1019
1813
 
1020
- [data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
1814
+ [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) {
1021
1815
  width: 100%;
1022
1816
  min-block-size: var(--usk-native-control-min-block-size);
1023
1817
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
@@ -1045,9 +1839,16 @@
1045
1839
 
1046
1840
  [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
1047
1841
 
1048
- [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])) {
1842
+ [data-ui][data-theme][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1843
+ -webkit-appearance: none;
1844
+ appearance: none;
1845
+ box-sizing: border-box;
1049
1846
  min-block-size: var(--usk-native-control-min-block-size);
1050
1847
  padding: .7rem 1rem;
1848
+ font: inherit;
1849
+ }
1850
+
1851
+ [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])) {
1051
1852
  color: var(--usk-native-on-primary);
1052
1853
  background: var(--usk-native-primary);
1053
1854
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -1057,6 +1858,18 @@
1057
1858
  cursor: pointer;
1058
1859
  }
1059
1860
 
1861
+ /* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
1862
+ [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"]) {
1863
+ display: inline-flex;
1864
+ align-items: center;
1865
+ justify-content: center;
1866
+ gap: .55rem;
1867
+ }
1868
+
1869
+ [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 {
1870
+ flex: 0 0 1em;
1871
+ }
1872
+
1060
1873
  [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) {
1061
1874
  background: var(--usk-native-primary-hover);
1062
1875
  border-color: var(--usk-native-primary-hover);
@@ -1172,7 +1985,7 @@
1172
1985
  cursor: not-allowed;
1173
1986
  }
1174
1987
 
1175
- [data-ui][data-theme][data-mode] :where(input:read-only, textarea:read-only) {
1988
+ [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) {
1176
1989
  background: var(--usk-native-surface-soft);
1177
1990
  }
1178
1991
 
@@ -1198,7 +2011,7 @@
1198
2011
 
1199
2012
  [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
1200
2013
  color: var(--usk-native-text-muted);
1201
- background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2014
+ background: var(--usk-native-surface-soft);
1202
2015
  border-color: var(--usk-native-border);
1203
2016
  box-shadow: none;
1204
2017
  opacity: .55;
@@ -1230,7 +2043,7 @@
1230
2043
 
1231
2044
  [data-ui][data-theme][data-mode] :where(th) {
1232
2045
  color: var(--usk-native-text);
1233
- background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2046
+ background: var(--usk-native-surface-soft);
1234
2047
  }
1235
2048
 
1236
2049
  [data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
@@ -1260,6 +2073,8 @@
1260
2073
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
1261
2074
  }
1262
2075
 
2076
+ [data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
2077
+
1263
2078
  [data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
1264
2079
 
1265
2080
  [data-ui][data-theme][data-mode] :where(progress, meter) {
@@ -1373,6 +2188,32 @@
1373
2188
  [data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
1374
2189
  [data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
1375
2190
 
2191
+ @supports (color: color-mix(in srgb, black, white)) {
2192
+ [data-ui][data-theme][data-mode] {
2193
+ --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
2194
+ }
2195
+
2196
+ [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2197
+ border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
2198
+ }
2199
+
2200
+ [data-ui][data-theme][data-mode] :where(mark) {
2201
+ background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
2202
+ }
2203
+
2204
+ [data-ui][data-theme][data-mode] :where(fieldset) {
2205
+ background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
2206
+ }
2207
+
2208
+ [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2209
+ background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2210
+ }
2211
+
2212
+ [data-ui][data-theme][data-mode] :where(th) {
2213
+ background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2214
+ }
2215
+ }
2216
+
1376
2217
  @media (prefers-reduced-motion: reduce) {
1377
2218
  [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
1378
2219
  [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
@@ -1381,8 +2222,10 @@
1381
2222
  }
1382
2223
 
1383
2224
  @media (forced-colors: active) {
1384
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
1385
- forced-color-adjust: auto;
2225
+ @supports (forced-color-adjust: auto) {
2226
+ [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
2227
+ forced-color-adjust: auto;
2228
+ }
1386
2229
  }
1387
2230
 
1388
2231
  [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
@@ -1949,31 +2792,651 @@
1949
2792
  .y2k-rounded-xl { border-radius: var(--y2k-radius-xl); }
1950
2793
  .rg-rounded-xl { border-radius: var(--rg-radius-xl); }
1951
2794
 
1952
- .saas-surface, .saas-surface-sm, .saas-surface-lg { color: var(--saas-text); background: var(--saas-card-bg); border: 1px solid var(--saas-border); }
1953
- .bento-surface, .bento-surface-sm, .bento-surface-lg { color: var(--bento-text); background: var(--bento-card-bg); border: 1px solid var(--bento-border); }
1954
- .max-surface, .max-surface-sm, .max-surface-lg { color: var(--max-text); background: var(--max-card-bg); border: 1px solid var(--max-border); }
1955
- .bau-surface, .bau-surface-sm, .bau-surface-lg { color: var(--bau-text); background: var(--bau-card-bg); border: 1px solid var(--bau-border); }
1956
- .tactile-surface, .tactile-surface-sm, .tactile-surface-lg { color: var(--tactile-text); background: var(--tactile-card-bg); border: 1px solid var(--tactile-border); }
1957
- .neo-surface, .neo-surface-sm, .neo-surface-lg { color: var(--neo-text); background: var(--neo-card-bg); border: 1px solid var(--neo-border); }
1958
- .retro-surface, .retro-surface-sm, .retro-surface-lg { color: var(--retro-text); background: var(--retro-card-bg); border: 1px solid var(--retro-border); }
1959
- .brutal-surface, .brutal-surface-sm, .brutal-surface-lg { color: var(--brutal-text); background: var(--brutal-card-bg); border: 3px solid var(--brutal-border); }
1960
- .cyber-surface, .cyber-surface-sm, .cyber-surface-lg { color: var(--cyber-text); background: var(--cyber-card-bg); border: 1px solid var(--cyber-border); }
1961
- .y2k-surface, .y2k-surface-sm, .y2k-surface-lg { color: var(--y2k-text); background: var(--y2k-card-bg); border: 1px solid var(--y2k-border); }
1962
- .rg-surface, .rg-surface-sm, .rg-surface-lg { color: var(--rg-text); background: var(--rg-card-bg); border: 1px solid var(--rg-border); }
2795
+ .saas-surface, .saas-surface-sm, .saas-surface-lg { color: var(--saas-text); background: var(--saas-card-bg); border: 1px solid var(--saas-border); }
2796
+ .bento-surface, .bento-surface-sm, .bento-surface-lg { color: var(--bento-text); background: var(--bento-card-bg); border: 1px solid var(--bento-border); }
2797
+ .max-surface, .max-surface-sm, .max-surface-lg { color: var(--max-text); background: var(--max-card-bg); border: 1px solid var(--max-border); }
2798
+ .bau-surface, .bau-surface-sm, .bau-surface-lg { color: var(--bau-text); background: var(--bau-card-bg); border: 1px solid var(--bau-border); }
2799
+ .tactile-surface, .tactile-surface-sm, .tactile-surface-lg { color: var(--tactile-text); background: var(--tactile-card-bg); border: 1px solid var(--tactile-border); }
2800
+ .neo-surface, .neo-surface-sm, .neo-surface-lg { color: var(--neo-text); background: var(--neo-card-bg); border: 1px solid var(--neo-border); }
2801
+ .retro-surface, .retro-surface-sm, .retro-surface-lg { color: var(--retro-text); background: var(--retro-card-bg); border: 1px solid var(--retro-border); }
2802
+ .brutal-surface, .brutal-surface-sm, .brutal-surface-lg { color: var(--brutal-text); background: var(--brutal-card-bg); border: 3px solid var(--brutal-border); }
2803
+ .cyber-surface, .cyber-surface-sm, .cyber-surface-lg { color: var(--cyber-text); background: var(--cyber-card-bg); border: 1px solid var(--cyber-border); }
2804
+ .y2k-surface, .y2k-surface-sm, .y2k-surface-lg { color: var(--y2k-text); background: var(--y2k-card-bg); border: 1px solid var(--y2k-border); }
2805
+ .rg-surface, .rg-surface-sm, .rg-surface-lg { color: var(--rg-text); background: var(--rg-card-bg); border: 1px solid var(--rg-border); }
2806
+
2807
+ .saas-bg-primary, .bento-bg-primary, .max-bg-primary, .bau-bg-primary, .tactile-bg-primary, .neo-bg-primary, .retro-bg-primary, .brutal-bg-primary, .cyber-bg-primary, .y2k-bg-primary, .rg-bg-primary { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
2808
+ .saas-bg-secondary, .bento-bg-secondary, .max-bg-secondary, .bau-bg-secondary, .tactile-bg-secondary, .neo-bg-secondary, .retro-bg-secondary, .brutal-bg-secondary, .cyber-bg-secondary, .y2k-bg-secondary, .rg-bg-secondary { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
2809
+ .saas-border, .bento-border, .max-border, .bau-border, .tactile-border, .neo-border, .retro-border, .brutal-border, .cyber-border, .y2k-border, .rg-border { border: var(--usk-native-border-width) solid var(--usk-native-border); }
2810
+ .saas-divider, .bento-divider, .max-divider, .bau-divider, .tactile-divider, .neo-divider, .retro-divider, .brutal-divider, .cyber-divider, .y2k-divider, .rg-divider { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
2811
+ .saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
2812
+
2813
+ .saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="ghost"]) {
2814
+ color: var(--usk-native-primary);
2815
+ background: transparent;
2816
+ border-color: var(--usk-native-border);
2817
+ }
2818
+
2819
+ .saas-check, .saas-radio, .saas-switch, .bento-check, .bento-radio, .bento-switch, .max-check, .max-radio, .max-switch, .bau-check, .bau-radio, .bau-switch, .tactile-check, .tactile-radio, .tactile-switch, .neo-check, .neo-radio, .neo-switch, .retro-check, .retro-radio, .retro-switch, .brutal-check, .brutal-radio, .brutal-switch, .cyber-check, .cyber-radio, .cyber-switch, .y2k-check, .y2k-radio, .y2k-switch, .rg-check, .rg-radio, .rg-switch, :where([data-ui="neumorphism"]) .ui-check, :where([data-ui="neumorphism"]) .ui-radio, :where([data-ui="neumorphism"]) .ui-switch {
2820
+ display: inline-flex;
2821
+ align-items: center;
2822
+ gap: var(--usk-native-field-gap);
2823
+ min-block-size: 24px;
2824
+ color: var(--usk-native-text);
2825
+ }
2826
+
2827
+ .saas-check-control, .saas-radio-control, .bento-check-control, .bento-radio-control, .max-check-control, .max-radio-control, .bau-check-control, .bau-radio-control, .tactile-check-control, .tactile-radio-control, .neo-check-control, .neo-radio-control, .retro-check-control, .retro-radio-control, .brutal-check-control, .brutal-radio-control, .cyber-check-control, .cyber-radio-control, .y2k-check-control, .y2k-radio-control, .rg-check-control, .rg-radio-control, :where([data-ui="neumorphism"]) .ui-check-control, :where([data-ui="neumorphism"]) .ui-radio-control {
2828
+ inline-size: 1.5rem;
2829
+ block-size: 1.5rem;
2830
+ accent-color: var(--usk-native-primary);
2831
+ }
2832
+
2833
+ .saas-switch-track, .bento-switch-track, .max-switch-track, .bau-switch-track, .tactile-switch-track, .neo-switch-track, .retro-switch-track, .brutal-switch-track, .cyber-switch-track, .y2k-switch-track, .rg-switch-track, :where([data-ui="neumorphism"]) .ui-switch-track {
2834
+ position: relative;
2835
+ display: inline-flex;
2836
+ align-items: center;
2837
+ flex: 0 0 auto;
2838
+ inline-size: 2.75rem;
2839
+ block-size: 1.5rem;
2840
+ padding: .18rem;
2841
+ background: var(--usk-native-track);
2842
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
2843
+ border-radius: 999px;
2844
+ }
2845
+
2846
+ .saas-switch-thumb, .bento-switch-thumb, .max-switch-thumb, .bau-switch-thumb, .tactile-switch-thumb, .neo-switch-thumb, .retro-switch-thumb, .brutal-switch-thumb, .cyber-switch-thumb, .y2k-switch-thumb, .rg-switch-thumb, :where([data-ui="neumorphism"]) .ui-switch-thumb {
2847
+ inline-size: 1rem;
2848
+ block-size: 1rem;
2849
+ background: var(--usk-native-thumb);
2850
+ border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
2851
+ border-radius: 999px;
2852
+ transition: transform 160ms ease;
2853
+ }
2854
+
2855
+ .saas-switch:has(input:checked) .saas-switch-track,
2856
+ .bento-switch:has(input:checked) .bento-switch-track,
2857
+ .max-switch:has(input:checked) .max-switch-track,
2858
+ .bau-switch:has(input:checked) .bau-switch-track,
2859
+ .tactile-switch:has(input:checked) .tactile-switch-track,
2860
+ .neo-switch:has(input:checked) .neo-switch-track,
2861
+ .retro-switch:has(input:checked) .retro-switch-track,
2862
+ .brutal-switch:has(input:checked) .brutal-switch-track,
2863
+ .cyber-switch:has(input:checked) .cyber-switch-track,
2864
+ .y2k-switch:has(input:checked) .y2k-switch-track,
2865
+ .rg-switch:has(input:checked) .rg-switch-track, :where([data-ui="neumorphism"]) .ui-switch:has(input:checked) .ui-switch-track {
2866
+ background: var(--usk-native-track-fill);
2867
+ }
2868
+
2869
+ .saas-sr-only, .saas-visually-hidden, .bento-sr-only, .bento-visually-hidden, .max-sr-only, .max-visually-hidden, .bau-sr-only, .bau-visually-hidden, .tactile-sr-only, .tactile-visually-hidden, .neo-sr-only, .neo-visually-hidden, .retro-sr-only, .retro-visually-hidden, .brutal-sr-only, .brutal-visually-hidden, .cyber-sr-only, .cyber-visually-hidden, .y2k-sr-only, .y2k-visually-hidden, .rg-sr-only, .rg-visually-hidden {
2870
+ position: absolute !important;
2871
+ inline-size: 1px !important;
2872
+ block-size: 1px !important;
2873
+ padding: 0 !important;
2874
+ margin: -1px !important;
2875
+ overflow: hidden !important;
2876
+ clip: rect(0, 0, 0, 0) !important;
2877
+ white-space: nowrap !important;
2878
+ border: 0 !important;
2879
+ }
2880
+
2881
+ .saas-skip-link, .bento-skip-link, .max-skip-link, .bau-skip-link, .tactile-skip-link, .neo-skip-link, .retro-skip-link, .brutal-skip-link, .cyber-skip-link, .y2k-skip-link, .rg-skip-link {
2882
+ position: absolute;
2883
+ inset-block-start: .75rem;
2884
+ inset-inline-start: .75rem;
2885
+ z-index: 1000;
2886
+ padding: .75rem 1rem;
2887
+ color: var(--usk-native-on-primary);
2888
+ background: var(--usk-native-primary);
2889
+ border-radius: var(--usk-native-radius);
2890
+ transform: translateY(calc(-100% - 1rem));
2891
+ }
2892
+
2893
+ .saas-skip-link:focus-visible, .bento-skip-link:focus-visible, .max-skip-link:focus-visible, .bau-skip-link:focus-visible, .tactile-skip-link:focus-visible, .neo-skip-link:focus-visible, .retro-skip-link:focus-visible, .brutal-skip-link:focus-visible, .cyber-skip-link:focus-visible, .y2k-skip-link:focus-visible, .rg-skip-link:focus-visible {
2894
+ transform: translateY(0);
2895
+ }
2896
+ }
1963
2897
 
1964
- .saas-bg-primary, .bento-bg-primary, .max-bg-primary, .bau-bg-primary, .tactile-bg-primary, .neo-bg-primary, .retro-bg-primary, .brutal-bg-primary, .cyber-bg-primary, .y2k-bg-primary, .rg-bg-primary { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
1965
- .saas-bg-secondary, .bento-bg-secondary, .max-bg-secondary, .bau-bg-secondary, .tactile-bg-secondary, .neo-bg-secondary, .retro-bg-secondary, .brutal-bg-secondary, .cyber-bg-secondary, .y2k-bg-secondary, .rg-bg-secondary { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
1966
- .saas-border, .bento-border, .max-border, .bau-border, .tactile-border, .neo-border, .retro-border, .brutal-border, .cyber-border, .y2k-border, .rg-border { border: var(--usk-native-border-width) solid var(--usk-native-border); }
1967
- .saas-divider, .bento-divider, .max-divider, .bau-divider, .tactile-divider, .neo-divider, .retro-divider, .brutal-divider, .cyber-divider, .y2k-divider, .rg-divider { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
1968
- .saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
2898
+ /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
2899
+ /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
2900
+ @layer ui-style-kit.components {
2901
+ [data-ui][data-theme][data-mode] :where(
2902
+ .luxe-surface,
2903
+ .luxe-surface-sm,
2904
+ .luxe-surface-lg,
2905
+ .luxe-card,
2906
+ .luxe-card-service,
2907
+ .luxe-card-feature,
2908
+ .luxe-panel,
2909
+ .luxe-toolbar,
2910
+ .luxe-well,
2911
+ .luxe-inset,
2912
+ .luxe-field,
2913
+ .luxe-alert,
2914
+ .luxe-table-wrap,
2915
+ .luxe-nav,
2916
+ .luxe-feature-strip,
2917
+ .luxe-feature-item,
2918
+ .luxe-callout-bar,
2919
+ .luxe-media-scrim,
2920
+ .organic-surface,
2921
+ .organic-surface-sm,
2922
+ .organic-surface-lg,
2923
+ .organic-card,
2924
+ .organic-card-service,
2925
+ .organic-card-feature,
2926
+ .organic-panel,
2927
+ .organic-toolbar,
2928
+ .organic-well,
2929
+ .organic-inset,
2930
+ .organic-field,
2931
+ .organic-alert,
2932
+ .organic-table-wrap,
2933
+ .organic-nav,
2934
+ .organic-feature-strip,
2935
+ .organic-feature-item,
2936
+ .organic-callout-bar,
2937
+ .organic-media-scrim,
2938
+ .utility-surface,
2939
+ .utility-surface-sm,
2940
+ .utility-surface-lg,
2941
+ .utility-card,
2942
+ .utility-card-service,
2943
+ .utility-card-feature,
2944
+ .utility-panel,
2945
+ .utility-toolbar,
2946
+ .utility-well,
2947
+ .utility-inset,
2948
+ .utility-field,
2949
+ .utility-alert,
2950
+ .utility-table-wrap,
2951
+ .utility-nav,
2952
+ .utility-feature-strip,
2953
+ .utility-feature-item,
2954
+ .utility-callout-bar,
2955
+ .utility-media-scrim,
2956
+ .blueprint-surface,
2957
+ .blueprint-surface-sm,
2958
+ .blueprint-surface-lg,
2959
+ .blueprint-card,
2960
+ .blueprint-card-service,
2961
+ .blueprint-card-feature,
2962
+ .blueprint-panel,
2963
+ .blueprint-toolbar,
2964
+ .blueprint-well,
2965
+ .blueprint-inset,
2966
+ .blueprint-field,
2967
+ .blueprint-alert,
2968
+ .blueprint-table-wrap,
2969
+ .blueprint-nav,
2970
+ .blueprint-feature-strip,
2971
+ .blueprint-feature-item,
2972
+ .blueprint-callout-bar,
2973
+ .blueprint-media-scrim,
2974
+ .deco-surface,
2975
+ .deco-surface-sm,
2976
+ .deco-surface-lg,
2977
+ .deco-card,
2978
+ .deco-card-service,
2979
+ .deco-card-feature,
2980
+ .deco-panel,
2981
+ .deco-toolbar,
2982
+ .deco-well,
2983
+ .deco-inset,
2984
+ .deco-field,
2985
+ .deco-alert,
2986
+ .deco-table-wrap,
2987
+ .deco-nav,
2988
+ .deco-feature-strip,
2989
+ .deco-feature-item,
2990
+ .deco-callout-bar,
2991
+ .deco-media-scrim,
2992
+ .clay-surface,
2993
+ .clay-surface-sm,
2994
+ .clay-surface-lg,
2995
+ .clay-card,
2996
+ .clay-card-service,
2997
+ .clay-card-feature,
2998
+ .clay-panel,
2999
+ .clay-toolbar,
3000
+ .clay-well,
3001
+ .clay-inset,
3002
+ .clay-field,
3003
+ .clay-alert,
3004
+ .clay-table-wrap,
3005
+ .clay-nav,
3006
+ .clay-feature-strip,
3007
+ .clay-feature-item,
3008
+ .clay-callout-bar,
3009
+ .clay-media-scrim,
3010
+ .terminal-surface,
3011
+ .terminal-surface-sm,
3012
+ .terminal-surface-lg,
3013
+ .terminal-card,
3014
+ .terminal-card-service,
3015
+ .terminal-card-feature,
3016
+ .terminal-panel,
3017
+ .terminal-toolbar,
3018
+ .terminal-well,
3019
+ .terminal-inset,
3020
+ .terminal-field,
3021
+ .terminal-alert,
3022
+ .terminal-table-wrap,
3023
+ .terminal-nav,
3024
+ .terminal-feature-strip,
3025
+ .terminal-feature-item,
3026
+ .terminal-callout-bar,
3027
+ .terminal-media-scrim,
3028
+ .paper-surface,
3029
+ .paper-surface-sm,
3030
+ .paper-surface-lg,
3031
+ .paper-card,
3032
+ .paper-card-service,
3033
+ .paper-card-feature,
3034
+ .paper-panel,
3035
+ .paper-toolbar,
3036
+ .paper-well,
3037
+ .paper-inset,
3038
+ .paper-field,
3039
+ .paper-alert,
3040
+ .paper-table-wrap,
3041
+ .paper-nav,
3042
+ .paper-feature-strip,
3043
+ .paper-feature-item,
3044
+ .paper-callout-bar,
3045
+ .paper-media-scrim,
3046
+ .noir-surface,
3047
+ .noir-surface-sm,
3048
+ .noir-surface-lg,
3049
+ .noir-card,
3050
+ .noir-card-service,
3051
+ .noir-card-feature,
3052
+ .noir-panel,
3053
+ .noir-toolbar,
3054
+ .noir-well,
3055
+ .noir-inset,
3056
+ .noir-field,
3057
+ .noir-alert,
3058
+ .noir-table-wrap,
3059
+ .noir-nav,
3060
+ .noir-feature-strip,
3061
+ .noir-feature-item,
3062
+ .noir-callout-bar,
3063
+ .noir-media-scrim
3064
+ ), [data-ui]:where([data-ui="neumorphism"])[data-theme][data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3065
+ max-inline-size: 100%;
3066
+ min-inline-size: 0;
3067
+ overflow-wrap: anywhere;
3068
+ }
1969
3069
 
1970
- .saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost, :where([data-ui="neumorphism"]) .ui-button:where([data-ui-variant="ghost"]) {
1971
- color: var(--usk-native-primary);
1972
- background: transparent;
1973
- border-color: var(--usk-native-border);
3070
+ [data-ui][data-theme][data-mode] :where(
3071
+ .luxe-button,
3072
+ .luxe-icon-button,
3073
+ .luxe-button-cut,
3074
+ .luxe-button-outline-heavy,
3075
+ .luxe-badge,
3076
+ .luxe-badge-seal,
3077
+ .luxe-nav-link,
3078
+ .luxe-icon-medallion,
3079
+ .organic-button,
3080
+ .organic-icon-button,
3081
+ .organic-button-cut,
3082
+ .organic-button-outline-heavy,
3083
+ .organic-badge,
3084
+ .organic-badge-seal,
3085
+ .organic-nav-link,
3086
+ .organic-icon-medallion,
3087
+ .utility-button,
3088
+ .utility-icon-button,
3089
+ .utility-button-cut,
3090
+ .utility-button-outline-heavy,
3091
+ .utility-badge,
3092
+ .utility-badge-seal,
3093
+ .utility-nav-link,
3094
+ .utility-icon-medallion,
3095
+ .blueprint-button,
3096
+ .blueprint-icon-button,
3097
+ .blueprint-button-cut,
3098
+ .blueprint-button-outline-heavy,
3099
+ .blueprint-badge,
3100
+ .blueprint-badge-seal,
3101
+ .blueprint-nav-link,
3102
+ .blueprint-icon-medallion,
3103
+ .deco-button,
3104
+ .deco-icon-button,
3105
+ .deco-button-cut,
3106
+ .deco-button-outline-heavy,
3107
+ .deco-badge,
3108
+ .deco-badge-seal,
3109
+ .deco-nav-link,
3110
+ .deco-icon-medallion,
3111
+ .clay-button,
3112
+ .clay-icon-button,
3113
+ .clay-button-cut,
3114
+ .clay-button-outline-heavy,
3115
+ .clay-badge,
3116
+ .clay-badge-seal,
3117
+ .clay-nav-link,
3118
+ .clay-icon-medallion,
3119
+ .terminal-button,
3120
+ .terminal-icon-button,
3121
+ .terminal-button-cut,
3122
+ .terminal-button-outline-heavy,
3123
+ .terminal-badge,
3124
+ .terminal-badge-seal,
3125
+ .terminal-nav-link,
3126
+ .terminal-icon-medallion,
3127
+ .paper-button,
3128
+ .paper-icon-button,
3129
+ .paper-button-cut,
3130
+ .paper-button-outline-heavy,
3131
+ .paper-badge,
3132
+ .paper-badge-seal,
3133
+ .paper-nav-link,
3134
+ .paper-icon-medallion,
3135
+ .noir-button,
3136
+ .noir-icon-button,
3137
+ .noir-button-cut,
3138
+ .noir-button-outline-heavy,
3139
+ .noir-badge,
3140
+ .noir-badge-seal,
3141
+ .noir-nav-link,
3142
+ .noir-icon-medallion
3143
+ ), [data-ui]:where([data-ui="neumorphism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3144
+ max-inline-size: 100%;
3145
+ min-inline-size: 0;
3146
+ white-space: normal;
1974
3147
  }
1975
3148
 
1976
- .saas-check, .saas-radio, .saas-switch, .bento-check, .bento-radio, .bento-switch, .max-check, .max-radio, .max-switch, .bau-check, .bau-radio, .bau-switch, .tactile-check, .tactile-radio, .tactile-switch, .neo-check, .neo-radio, .neo-switch, .retro-check, .retro-radio, .retro-switch, .brutal-check, .brutal-radio, .brutal-switch, .cyber-check, .cyber-radio, .cyber-switch, .y2k-check, .y2k-radio, .y2k-switch, .rg-check, .rg-radio, .rg-switch, :where([data-ui="neumorphism"]) .ui-check, :where([data-ui="neumorphism"]) .ui-radio, :where([data-ui="neumorphism"]) .ui-switch {
3149
+ [data-ui][data-theme][data-mode] :where(
3150
+ .luxe-button,
3151
+ .luxe-icon-button,
3152
+ .luxe-button-pill,
3153
+ .organic-button,
3154
+ .organic-icon-button,
3155
+ .organic-button-pill,
3156
+ .utility-button,
3157
+ .utility-icon-button,
3158
+ .utility-button-pill,
3159
+ .blueprint-button,
3160
+ .blueprint-icon-button,
3161
+ .blueprint-button-pill,
3162
+ .deco-button,
3163
+ .deco-icon-button,
3164
+ .deco-button-pill,
3165
+ .clay-button,
3166
+ .clay-icon-button,
3167
+ .clay-button-pill,
3168
+ .terminal-button,
3169
+ .terminal-icon-button,
3170
+ .terminal-button-pill,
3171
+ .paper-button,
3172
+ .paper-icon-button,
3173
+ .paper-button-pill,
3174
+ .noir-button,
3175
+ .noir-icon-button,
3176
+ .noir-button-pill
3177
+ ), [data-ui]:where([data-ui="neumorphism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3178
+ box-sizing: border-box;
3179
+ display: inline-flex;
3180
+ align-items: center;
3181
+ justify-content: center;
3182
+ gap: .55rem;
3183
+ min-inline-size: 0;
3184
+ max-inline-size: 100%;
3185
+ line-height: 1.15;
3186
+ vertical-align: middle;
3187
+ }
3188
+
3189
+ [data-ui][data-theme][data-mode] :where(
3190
+ .luxe-button-pill,
3191
+ .organic-button-pill,
3192
+ .utility-button-pill,
3193
+ .blueprint-button-pill,
3194
+ .deco-button-pill,
3195
+ .clay-button-pill,
3196
+ .terminal-button-pill,
3197
+ .paper-button-pill,
3198
+ .noir-button-pill
3199
+ ) {
3200
+ min-block-size: 44px;
3201
+ padding-block: .65rem;
3202
+ padding-inline: max(1rem, 1em);
3203
+ border-style: solid;
3204
+ border-width: 1px;
3205
+ border-radius: 999px;
3206
+ font: inherit;
3207
+ font-weight: 850;
3208
+ text-align: center;
3209
+ text-decoration: none;
3210
+ overflow-wrap: anywhere;
3211
+ white-space: normal;
3212
+ cursor: pointer;
3213
+ transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
3214
+ }
3215
+
3216
+ .luxe-button-pill { color: var(--luxe-on-primary); background: var(--luxe-primary); border-color: var(--luxe-primary); border-radius: var(--luxe-radius-pill); }
3217
+ .luxe-button-pill:hover { border-color: var(--luxe-primary-hover); filter: brightness(1.04); }
3218
+ .luxe-button-pill:focus-visible { outline: 3px solid var(--luxe-focus); outline-offset: 3px; box-shadow: var(--luxe-focus-ring); }
3219
+ .luxe-pill { border-radius: var(--luxe-radius-pill); }
3220
+ .luxe-rounded { border-radius: var(--luxe-radius-md); }
3221
+ .luxe-rounded-lg { border-radius: var(--luxe-radius-lg); }
3222
+ .luxe-rounded-xl { border-radius: var(--luxe-radius-xl); }
3223
+ .luxe-surface, .luxe-surface-sm, .luxe-surface-lg { color: var(--luxe-text); background: var(--luxe-card-bg); border: 1px solid var(--luxe-border); }
3224
+
3225
+ .organic-button-pill { color: var(--organic-on-primary); background: var(--organic-primary); border-color: var(--organic-primary); border-radius: var(--organic-radius-pill); }
3226
+ .organic-button-pill:hover { border-color: var(--organic-primary-hover); filter: brightness(1.04); }
3227
+ .organic-button-pill:focus-visible { outline: 3px solid var(--organic-focus); outline-offset: 3px; box-shadow: var(--organic-focus-ring); }
3228
+ .organic-pill { border-radius: var(--organic-radius-pill); }
3229
+ .organic-rounded { border-radius: var(--organic-radius-md); }
3230
+ .organic-rounded-lg { border-radius: var(--organic-radius-lg); }
3231
+ .organic-rounded-xl { border-radius: var(--organic-radius-xl); }
3232
+ .organic-surface, .organic-surface-sm, .organic-surface-lg { color: var(--organic-text); background: var(--organic-card-bg); border: 1px solid var(--organic-border); }
3233
+
3234
+ .utility-button-pill { color: var(--utility-on-primary); background: var(--utility-primary); border-color: var(--utility-primary); border-radius: var(--utility-radius-pill); }
3235
+ .utility-button-pill:hover { border-color: var(--utility-primary-hover); filter: brightness(1.04); }
3236
+ .utility-button-pill:focus-visible { outline: 3px solid var(--utility-focus); outline-offset: 3px; box-shadow: var(--utility-focus-ring); }
3237
+ .utility-pill { border-radius: var(--utility-radius-pill); }
3238
+ .utility-rounded { border-radius: var(--utility-radius-md); }
3239
+ .utility-rounded-lg { border-radius: var(--utility-radius-lg); }
3240
+ .utility-rounded-xl { border-radius: var(--utility-radius-xl); }
3241
+ .utility-surface, .utility-surface-sm, .utility-surface-lg { color: var(--utility-text); background: var(--utility-card-bg); border: 1px solid var(--utility-border); }
3242
+
3243
+ .blueprint-button-pill { color: var(--blueprint-on-primary); background: var(--blueprint-primary); border-color: var(--blueprint-primary); border-radius: var(--blueprint-radius-pill); }
3244
+ .blueprint-button-pill:hover { border-color: var(--blueprint-primary-hover); filter: brightness(1.04); }
3245
+ .blueprint-button-pill:focus-visible { outline: 3px solid var(--blueprint-focus); outline-offset: 3px; box-shadow: var(--blueprint-focus-ring); }
3246
+ .blueprint-pill { border-radius: var(--blueprint-radius-pill); }
3247
+ .blueprint-rounded { border-radius: var(--blueprint-radius-md); }
3248
+ .blueprint-rounded-lg { border-radius: var(--blueprint-radius-lg); }
3249
+ .blueprint-rounded-xl { border-radius: var(--blueprint-radius-xl); }
3250
+ .blueprint-surface, .blueprint-surface-sm, .blueprint-surface-lg { color: var(--blueprint-text); background: var(--blueprint-card-bg); border: 1px solid var(--blueprint-border); }
3251
+
3252
+ .deco-button-pill { color: var(--deco-on-primary); background: var(--deco-primary); border-color: var(--deco-primary); border-radius: var(--deco-radius-pill); }
3253
+ .deco-button-pill:hover { border-color: var(--deco-primary-hover); filter: brightness(1.04); }
3254
+ .deco-button-pill:focus-visible { outline: 3px solid var(--deco-focus); outline-offset: 3px; box-shadow: var(--deco-focus-ring); }
3255
+ .deco-pill { border-radius: var(--deco-radius-pill); }
3256
+ .deco-rounded { border-radius: var(--deco-radius-md); }
3257
+ .deco-rounded-lg { border-radius: var(--deco-radius-lg); }
3258
+ .deco-rounded-xl { border-radius: var(--deco-radius-xl); }
3259
+ .deco-surface, .deco-surface-sm, .deco-surface-lg { color: var(--deco-text); background: var(--deco-card-bg); border: 1px solid var(--deco-border); }
3260
+
3261
+ .clay-button-pill { color: var(--clay-on-primary); background: var(--clay-primary); border-color: var(--clay-primary); border-radius: var(--clay-radius-pill); }
3262
+ .clay-button-pill:hover { border-color: var(--clay-primary-hover); filter: brightness(1.04); }
3263
+ .clay-button-pill:focus-visible { outline: 3px solid var(--clay-focus); outline-offset: 3px; box-shadow: var(--clay-focus-ring); }
3264
+ .clay-pill { border-radius: var(--clay-radius-pill); }
3265
+ .clay-rounded { border-radius: var(--clay-radius-md); }
3266
+ .clay-rounded-lg { border-radius: var(--clay-radius-lg); }
3267
+ .clay-rounded-xl { border-radius: var(--clay-radius-xl); }
3268
+ .clay-surface, .clay-surface-sm, .clay-surface-lg { color: var(--clay-text); background: var(--clay-card-bg); border: 1px solid var(--clay-border); }
3269
+
3270
+ .terminal-button-pill { color: var(--terminal-on-primary); background: var(--terminal-primary); border-color: var(--terminal-primary); border-radius: var(--terminal-radius-pill); }
3271
+ .terminal-button-pill:hover { border-color: var(--terminal-primary-hover); filter: brightness(1.04); }
3272
+ .terminal-button-pill:focus-visible { outline: 3px solid var(--terminal-focus); outline-offset: 3px; box-shadow: var(--terminal-focus-ring); }
3273
+ .terminal-pill { border-radius: var(--terminal-radius-pill); }
3274
+ .terminal-rounded { border-radius: var(--terminal-radius-md); }
3275
+ .terminal-rounded-lg { border-radius: var(--terminal-radius-lg); }
3276
+ .terminal-rounded-xl { border-radius: var(--terminal-radius-xl); }
3277
+ .terminal-surface, .terminal-surface-sm, .terminal-surface-lg { color: var(--terminal-text); background: var(--terminal-card-bg); border: 1px solid var(--terminal-border); }
3278
+
3279
+ .paper-button-pill { color: var(--paper-on-primary); background: var(--paper-primary); border-color: var(--paper-primary); border-radius: var(--paper-radius-pill); }
3280
+ .paper-button-pill:hover { border-color: var(--paper-primary-hover); filter: brightness(1.04); }
3281
+ .paper-button-pill:focus-visible { outline: 3px solid var(--paper-focus); outline-offset: 3px; box-shadow: var(--paper-focus-ring); }
3282
+ .paper-pill { border-radius: var(--paper-radius-pill); }
3283
+ .paper-rounded { border-radius: var(--paper-radius-md); }
3284
+ .paper-rounded-lg { border-radius: var(--paper-radius-lg); }
3285
+ .paper-rounded-xl { border-radius: var(--paper-radius-xl); }
3286
+ .paper-surface, .paper-surface-sm, .paper-surface-lg { color: var(--paper-text); background: var(--paper-card-bg); border: 1px solid var(--paper-border); }
3287
+
3288
+ .noir-button-pill { color: var(--noir-on-primary); background: var(--noir-primary); border-color: var(--noir-primary); border-radius: var(--noir-radius-pill); }
3289
+ .noir-button-pill:hover { border-color: var(--noir-primary-hover); filter: brightness(1.04); }
3290
+ .noir-button-pill:focus-visible { outline: 3px solid var(--noir-focus); outline-offset: 3px; box-shadow: var(--noir-focus-ring); }
3291
+ .noir-pill { border-radius: var(--noir-radius-pill); }
3292
+ .noir-rounded { border-radius: var(--noir-radius-md); }
3293
+ .noir-rounded-lg { border-radius: var(--noir-radius-lg); }
3294
+ .noir-rounded-xl { border-radius: var(--noir-radius-xl); }
3295
+ .noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
3296
+
3297
+ [data-ui][data-theme][data-mode] :where(
3298
+ .luxe-button-pill:active,
3299
+ .luxe-button-pill[aria-pressed="true"],
3300
+ .organic-button-pill:active,
3301
+ .organic-button-pill[aria-pressed="true"],
3302
+ .utility-button-pill:active,
3303
+ .utility-button-pill[aria-pressed="true"],
3304
+ .blueprint-button-pill:active,
3305
+ .blueprint-button-pill[aria-pressed="true"],
3306
+ .deco-button-pill:active,
3307
+ .deco-button-pill[aria-pressed="true"],
3308
+ .clay-button-pill:active,
3309
+ .clay-button-pill[aria-pressed="true"],
3310
+ .terminal-button-pill:active,
3311
+ .terminal-button-pill[aria-pressed="true"],
3312
+ .paper-button-pill:active,
3313
+ .paper-button-pill[aria-pressed="true"],
3314
+ .noir-button-pill:active,
3315
+ .noir-button-pill[aria-pressed="true"]
3316
+ ) { transform: translateY(1px); }
3317
+
3318
+ [data-ui][data-theme][data-mode] :where(
3319
+ .luxe-button-pill:disabled,
3320
+ .luxe-button-pill[aria-disabled="true"],
3321
+ .organic-button-pill:disabled,
3322
+ .organic-button-pill[aria-disabled="true"],
3323
+ .utility-button-pill:disabled,
3324
+ .utility-button-pill[aria-disabled="true"],
3325
+ .blueprint-button-pill:disabled,
3326
+ .blueprint-button-pill[aria-disabled="true"],
3327
+ .deco-button-pill:disabled,
3328
+ .deco-button-pill[aria-disabled="true"],
3329
+ .clay-button-pill:disabled,
3330
+ .clay-button-pill[aria-disabled="true"],
3331
+ .terminal-button-pill:disabled,
3332
+ .terminal-button-pill[aria-disabled="true"],
3333
+ .paper-button-pill:disabled,
3334
+ .paper-button-pill[aria-disabled="true"],
3335
+ .noir-button-pill:disabled,
3336
+ .noir-button-pill[aria-disabled="true"]
3337
+ ) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
3338
+
3339
+ [data-ui][data-theme][data-mode] :where(
3340
+ .luxe-tooltip,
3341
+ .luxe-tooltip-top,
3342
+ .luxe-tooltip-right,
3343
+ .luxe-tooltip-bottom,
3344
+ .luxe-tooltip-left,
3345
+ .organic-tooltip,
3346
+ .organic-tooltip-top,
3347
+ .organic-tooltip-right,
3348
+ .organic-tooltip-bottom,
3349
+ .organic-tooltip-left,
3350
+ .utility-tooltip,
3351
+ .utility-tooltip-top,
3352
+ .utility-tooltip-right,
3353
+ .utility-tooltip-bottom,
3354
+ .utility-tooltip-left,
3355
+ .blueprint-tooltip,
3356
+ .blueprint-tooltip-top,
3357
+ .blueprint-tooltip-right,
3358
+ .blueprint-tooltip-bottom,
3359
+ .blueprint-tooltip-left,
3360
+ .deco-tooltip,
3361
+ .deco-tooltip-top,
3362
+ .deco-tooltip-right,
3363
+ .deco-tooltip-bottom,
3364
+ .deco-tooltip-left,
3365
+ .clay-tooltip,
3366
+ .clay-tooltip-top,
3367
+ .clay-tooltip-right,
3368
+ .clay-tooltip-bottom,
3369
+ .clay-tooltip-left,
3370
+ .terminal-tooltip,
3371
+ .terminal-tooltip-top,
3372
+ .terminal-tooltip-right,
3373
+ .terminal-tooltip-bottom,
3374
+ .terminal-tooltip-left,
3375
+ .paper-tooltip,
3376
+ .paper-tooltip-top,
3377
+ .paper-tooltip-right,
3378
+ .paper-tooltip-bottom,
3379
+ .paper-tooltip-left,
3380
+ .noir-tooltip,
3381
+ .noir-tooltip-top,
3382
+ .noir-tooltip-right,
3383
+ .noir-tooltip-bottom,
3384
+ .noir-tooltip-left
3385
+ ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: anywhere; }
3386
+
3387
+ [data-ui][data-theme][data-mode] :where(
3388
+ [data-ui-tooltip-anchor] > .luxe-tooltip-top,
3389
+ [data-ui-tooltip-anchor] > .luxe-tooltip-right,
3390
+ [data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
3391
+ [data-ui-tooltip-anchor] > .luxe-tooltip-left,
3392
+ [data-ui-tooltip-anchor] > .organic-tooltip-top,
3393
+ [data-ui-tooltip-anchor] > .organic-tooltip-right,
3394
+ [data-ui-tooltip-anchor] > .organic-tooltip-bottom,
3395
+ [data-ui-tooltip-anchor] > .organic-tooltip-left,
3396
+ [data-ui-tooltip-anchor] > .utility-tooltip-top,
3397
+ [data-ui-tooltip-anchor] > .utility-tooltip-right,
3398
+ [data-ui-tooltip-anchor] > .utility-tooltip-bottom,
3399
+ [data-ui-tooltip-anchor] > .utility-tooltip-left,
3400
+ [data-ui-tooltip-anchor] > .blueprint-tooltip-top,
3401
+ [data-ui-tooltip-anchor] > .blueprint-tooltip-right,
3402
+ [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom,
3403
+ [data-ui-tooltip-anchor] > .blueprint-tooltip-left,
3404
+ [data-ui-tooltip-anchor] > .deco-tooltip-top,
3405
+ [data-ui-tooltip-anchor] > .deco-tooltip-right,
3406
+ [data-ui-tooltip-anchor] > .deco-tooltip-bottom,
3407
+ [data-ui-tooltip-anchor] > .deco-tooltip-left,
3408
+ [data-ui-tooltip-anchor] > .clay-tooltip-top,
3409
+ [data-ui-tooltip-anchor] > .clay-tooltip-right,
3410
+ [data-ui-tooltip-anchor] > .clay-tooltip-bottom,
3411
+ [data-ui-tooltip-anchor] > .clay-tooltip-left,
3412
+ [data-ui-tooltip-anchor] > .terminal-tooltip-top,
3413
+ [data-ui-tooltip-anchor] > .terminal-tooltip-right,
3414
+ [data-ui-tooltip-anchor] > .terminal-tooltip-bottom,
3415
+ [data-ui-tooltip-anchor] > .terminal-tooltip-left,
3416
+ [data-ui-tooltip-anchor] > .paper-tooltip-top,
3417
+ [data-ui-tooltip-anchor] > .paper-tooltip-right,
3418
+ [data-ui-tooltip-anchor] > .paper-tooltip-bottom,
3419
+ [data-ui-tooltip-anchor] > .paper-tooltip-left,
3420
+ [data-ui-tooltip-anchor] > .noir-tooltip-top,
3421
+ [data-ui-tooltip-anchor] > .noir-tooltip-right,
3422
+ [data-ui-tooltip-anchor] > .noir-tooltip-bottom,
3423
+ [data-ui-tooltip-anchor] > .noir-tooltip-left
3424
+ ) { position: absolute; z-index: 20; }
3425
+
3426
+ [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3427
+ [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3428
+ [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3429
+ [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3430
+
3431
+ :where(.luxe-bg-primary, .organic-bg-primary, .utility-bg-primary, .blueprint-bg-primary, .deco-bg-primary, .clay-bg-primary, .terminal-bg-primary, .paper-bg-primary, .noir-bg-primary) { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
3432
+ :where(.luxe-bg-secondary, .organic-bg-secondary, .utility-bg-secondary, .blueprint-bg-secondary, .deco-bg-secondary, .clay-bg-secondary, .terminal-bg-secondary, .paper-bg-secondary, .noir-bg-secondary) { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
3433
+ :where(.luxe-border, .organic-border, .utility-border, .blueprint-border, .deco-border, .clay-border, .terminal-border, .paper-border, .noir-border) { border: var(--usk-native-border-width) solid var(--usk-native-border); }
3434
+ :where(.luxe-divider, .organic-divider, .utility-divider, .blueprint-divider, .deco-divider, .clay-divider, .terminal-divider, .paper-divider, .noir-divider) { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
3435
+ :where(.luxe-disabled, .organic-disabled, .utility-disabled, .blueprint-disabled, .deco-disabled, .clay-disabled, .terminal-disabled, .paper-disabled, .noir-disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }
3436
+
3437
+ :where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="neumorphism"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-native-primary); background: transparent; border-color: var(--usk-native-border); }
3438
+
3439
+ :where(.luxe-check, .luxe-radio, .luxe-switch, .organic-check, .organic-radio, .organic-switch, .utility-check, .utility-radio, .utility-switch, .blueprint-check, .blueprint-radio, .blueprint-switch, .deco-check, .deco-radio, .deco-switch, .clay-check, .clay-radio, .clay-switch, .terminal-check, .terminal-radio, .terminal-switch, .paper-check, .paper-radio, .paper-switch, .noir-check, .noir-radio, .noir-switch), :where([data-ui="neumorphism"]) :where(.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch) {
1977
3440
  display: inline-flex;
1978
3441
  align-items: center;
1979
3442
  gap: var(--usk-native-field-gap);
@@ -1981,16 +3444,17 @@
1981
3444
  color: var(--usk-native-text);
1982
3445
  }
1983
3446
 
1984
- .saas-check-control, .saas-radio-control, .bento-check-control, .bento-radio-control, .max-check-control, .max-radio-control, .bau-check-control, .bau-radio-control, .tactile-check-control, .tactile-radio-control, .neo-check-control, .neo-radio-control, .retro-check-control, .retro-radio-control, .brutal-check-control, .brutal-radio-control, .cyber-check-control, .cyber-radio-control, .y2k-check-control, .y2k-radio-control, .rg-check-control, .rg-radio-control, :where([data-ui="neumorphism"]) .ui-check-control, :where([data-ui="neumorphism"]) .ui-radio-control {
3447
+ :where(.luxe-check-control, .luxe-radio-control, .organic-check-control, .organic-radio-control, .utility-check-control, .utility-radio-control, .blueprint-check-control, .blueprint-radio-control, .deco-check-control, .deco-radio-control, .clay-check-control, .clay-radio-control, .terminal-check-control, .terminal-radio-control, .paper-check-control, .paper-radio-control, .noir-check-control, .noir-radio-control), :where([data-ui="neumorphism"]) :where(.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control,.ui-check-control,.ui-radio-control) {
1985
3448
  inline-size: 1.5rem;
1986
3449
  block-size: 1.5rem;
1987
3450
  accent-color: var(--usk-native-primary);
1988
3451
  }
1989
3452
 
1990
- .saas-switch-track, .bento-switch-track, .max-switch-track, .bau-switch-track, .tactile-switch-track, .neo-switch-track, .retro-switch-track, .brutal-switch-track, .cyber-switch-track, .y2k-switch-track, .rg-switch-track, :where([data-ui="neumorphism"]) .ui-switch-track {
3453
+ :where(.luxe-switch-track, .organic-switch-track, .utility-switch-track, .blueprint-switch-track, .deco-switch-track, .clay-switch-track, .terminal-switch-track, .paper-switch-track, .noir-switch-track), :where([data-ui="neumorphism"]) :where(.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track,.ui-switch-track) {
1991
3454
  position: relative;
1992
3455
  display: inline-flex;
1993
3456
  align-items: center;
3457
+ flex: 0 0 auto;
1994
3458
  inline-size: 2.75rem;
1995
3459
  block-size: 1.5rem;
1996
3460
  padding: .18rem;
@@ -1999,7 +3463,7 @@
1999
3463
  border-radius: 999px;
2000
3464
  }
2001
3465
 
2002
- .saas-switch-thumb, .bento-switch-thumb, .max-switch-thumb, .bau-switch-thumb, .tactile-switch-thumb, .neo-switch-thumb, .retro-switch-thumb, .brutal-switch-thumb, .cyber-switch-thumb, .y2k-switch-thumb, .rg-switch-thumb, :where([data-ui="neumorphism"]) .ui-switch-thumb {
3466
+ :where(.luxe-switch-thumb, .organic-switch-thumb, .utility-switch-thumb, .blueprint-switch-thumb, .deco-switch-thumb, .clay-switch-thumb, .terminal-switch-thumb, .paper-switch-thumb, .noir-switch-thumb), :where([data-ui="neumorphism"]) :where(.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb,.ui-switch-thumb) {
2003
3467
  inline-size: 1rem;
2004
3468
  block-size: 1rem;
2005
3469
  background: var(--usk-native-thumb);
@@ -2008,35 +3472,9 @@
2008
3472
  transition: transform 160ms ease;
2009
3473
  }
2010
3474
 
2011
- .saas-switch:has(input:checked) .saas-switch-track,
2012
- .bento-switch:has(input:checked) .bento-switch-track,
2013
- .max-switch:has(input:checked) .max-switch-track,
2014
- .bau-switch:has(input:checked) .bau-switch-track,
2015
- .tactile-switch:has(input:checked) .tactile-switch-track,
2016
- .neo-switch:has(input:checked) .neo-switch-track,
2017
- .retro-switch:has(input:checked) .retro-switch-track,
2018
- .brutal-switch:has(input:checked) .brutal-switch-track,
2019
- .cyber-switch:has(input:checked) .cyber-switch-track,
2020
- .y2k-switch:has(input:checked) .y2k-switch-track,
2021
- .rg-switch:has(input:checked) .rg-switch-track, :where([data-ui="neumorphism"]) .ui-switch:has(input:checked) .ui-switch-track {
2022
- background: var(--usk-native-track-fill);
2023
- }
2024
-
2025
- .saas-switch:has(input:checked) .saas-switch-thumb,
2026
- .bento-switch:has(input:checked) .bento-switch-thumb,
2027
- .max-switch:has(input:checked) .max-switch-thumb,
2028
- .bau-switch:has(input:checked) .bau-switch-thumb,
2029
- .tactile-switch:has(input:checked) .tactile-switch-thumb,
2030
- .neo-switch:has(input:checked) .neo-switch-thumb,
2031
- .retro-switch:has(input:checked) .retro-switch-thumb,
2032
- .brutal-switch:has(input:checked) .brutal-switch-thumb,
2033
- .cyber-switch:has(input:checked) .cyber-switch-thumb,
2034
- .y2k-switch:has(input:checked) .y2k-switch-thumb,
2035
- .rg-switch:has(input:checked) .rg-switch-thumb, :where([data-ui="neumorphism"]) .ui-switch:has(input:checked) .ui-switch-thumb {
2036
- transform: translateX(1.25rem);
2037
- }
3475
+ :where(.luxe-switch:has(input:checked) .luxe-switch-track, .organic-switch:has(input:checked) .organic-switch-track, .utility-switch:has(input:checked) .utility-switch-track, .blueprint-switch:has(input:checked) .blueprint-switch-track, .deco-switch:has(input:checked) .deco-switch-track, .clay-switch:has(input:checked) .clay-switch-track, .terminal-switch:has(input:checked) .terminal-switch-track, .paper-switch:has(input:checked) .paper-switch-track, .noir-switch:has(input:checked) .noir-switch-track), :where([data-ui="neumorphism"]) :where(.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track,.ui-switch:has(input:checked) .ui-switch-track) { background: var(--usk-native-track-fill); }
2038
3476
 
2039
- .saas-sr-only, .saas-visually-hidden, .bento-sr-only, .bento-visually-hidden, .max-sr-only, .max-visually-hidden, .bau-sr-only, .bau-visually-hidden, .tactile-sr-only, .tactile-visually-hidden, .neo-sr-only, .neo-visually-hidden, .retro-sr-only, .retro-visually-hidden, .brutal-sr-only, .brutal-visually-hidden, .cyber-sr-only, .cyber-visually-hidden, .y2k-sr-only, .y2k-visually-hidden, .rg-sr-only, .rg-visually-hidden {
3477
+ :where(.luxe-sr-only, .luxe-visually-hidden, .organic-sr-only, .organic-visually-hidden, .utility-sr-only, .utility-visually-hidden, .blueprint-sr-only, .blueprint-visually-hidden, .deco-sr-only, .deco-visually-hidden, .clay-sr-only, .clay-visually-hidden, .terminal-sr-only, .terminal-visually-hidden, .paper-sr-only, .paper-visually-hidden, .noir-sr-only, .noir-visually-hidden) {
2040
3478
  position: absolute !important;
2041
3479
  inline-size: 1px !important;
2042
3480
  block-size: 1px !important;
@@ -2048,7 +3486,7 @@
2048
3486
  border: 0 !important;
2049
3487
  }
2050
3488
 
2051
- .saas-skip-link, .bento-skip-link, .max-skip-link, .bau-skip-link, .tactile-skip-link, .neo-skip-link, .retro-skip-link, .brutal-skip-link, .cyber-skip-link, .y2k-skip-link, .rg-skip-link {
3489
+ :where(.luxe-skip-link, .organic-skip-link, .utility-skip-link, .blueprint-skip-link, .deco-skip-link, .clay-skip-link, .terminal-skip-link, .paper-skip-link, .noir-skip-link) {
2052
3490
  position: absolute;
2053
3491
  inset-block-start: .75rem;
2054
3492
  inset-inline-start: .75rem;
@@ -2060,10 +3498,9 @@
2060
3498
  transform: translateY(calc(-100% - 1rem));
2061
3499
  }
2062
3500
 
2063
- .saas-skip-link:focus-visible, .bento-skip-link:focus-visible, .max-skip-link:focus-visible, .bau-skip-link:focus-visible, .tactile-skip-link:focus-visible, .neo-skip-link:focus-visible, .retro-skip-link:focus-visible, .brutal-skip-link:focus-visible, .cyber-skip-link:focus-visible, .y2k-skip-link:focus-visible, .rg-skip-link:focus-visible {
2064
- transform: translateY(0);
2065
- }
3501
+ :where(.luxe-skip-link:focus-visible, .organic-skip-link:focus-visible, .utility-skip-link:focus-visible, .blueprint-skip-link:focus-visible, .deco-skip-link:focus-visible, .clay-skip-link:focus-visible, .terminal-skip-link:focus-visible, .paper-skip-link:focus-visible, .noir-skip-link:focus-visible) { transform: translateY(0); }
2066
3502
  }
3503
+ /* END GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
2067
3504
 
2068
3505
 
2069
3506
  /* styles/neumorphism.css (visual paint) */
@@ -2093,6 +3530,8 @@
2093
3530
  }
2094
3531
 
2095
3532
  [data-ui="neumorphism"][data-mode="light"] {
3533
+ --lightningcss-light: initial;
3534
+ --lightningcss-dark: ;
2096
3535
  color-scheme: light;
2097
3536
  --neo-panel-alpha: .98;
2098
3537
  --neo-panel-soft-alpha: .78;
@@ -2102,6 +3541,8 @@
2102
3541
  }
2103
3542
 
2104
3543
  [data-ui="neumorphism"][data-mode="dark"] {
3544
+ --lightningcss-light: ;
3545
+ --lightningcss-dark: initial;
2105
3546
  color-scheme: dark;
2106
3547
  --neo-panel-alpha: .92;
2107
3548
  --neo-panel-soft-alpha: .64;
@@ -2111,6 +3552,8 @@
2111
3552
  }
2112
3553
 
2113
3554
  [data-ui="neumorphism"][data-mode="contrast"] {
3555
+ --lightningcss-light: ;
3556
+ --lightningcss-dark: initial;
2114
3557
  color-scheme: dark;
2115
3558
  --neo-panel-alpha: 1;
2116
3559
  --neo-panel-soft-alpha: .92;
@@ -2181,7 +3624,7 @@
2181
3624
  --neo-fg: var(--neo-text);
2182
3625
  --neo-surface-fg: var(--neo-text);
2183
3626
  --neo-muted: var(--neo-text-muted);
2184
- --neo-border: rgb(var(--neo-border-rgb) / var(--neo-border-alpha));
3627
+ --neo-border: rgb(var(--neo-border-rgb) / max(var(--neo-border-alpha), var(--usk-border-min-alpha)));
2185
3628
  --neo-control-fg: var(--neo-text);
2186
3629
  --neo-primary: rgb(var(--neo-primary-rgb));
2187
3630
  --neo-primary-hover: rgb(var(--neo-primary-hover-rgb));
@@ -2211,6 +3654,12 @@
2211
3654
  --neo-spinner-accent: var(--neo-accent);
2212
3655
  }
2213
3656
 
3657
+ @supports (color: color-mix(in srgb,black,white)) {
3658
+ [data-ui="neumorphism"][data-theme][data-mode] {
3659
+ --neo-border: color-mix(in srgb, rgb(var(--neo-border-rgb) / max(var(--neo-border-alpha), var(--usk-border-min-alpha))), var(--neo-text) var(--usk-border-text-mix));
3660
+ }
3661
+ }
3662
+
2214
3663
  [data-ui="neumorphism"] {
2215
3664
  background: radial-gradient(circle at 50% -10%,#ffffff14,transparent 30rem),var(--neo-bg);
2216
3665
  color: var(--neo-text);
@@ -2337,7 +3786,6 @@
2337
3786
  font: inherit;
2338
3787
  cursor: pointer;
2339
3788
  -webkit-user-select: none;
2340
- -moz-user-select: none;
2341
3789
  user-select: none;
2342
3790
  transition: color var(--neo-transition-fast),background var(--neo-transition-fast),border-color var(--neo-transition-fast),box-shadow var(--neo-transition-fast),transform var(--neo-transition-fast);
2343
3791
  padding: .75rem 1.1rem;
@@ -2923,6 +4371,285 @@
2923
4371
  }
2924
4372
  }
2925
4373
 
4374
+ .neo-card-media {
4375
+ aspect-ratio: 16 / 9;
4376
+ object-fit: cover;
4377
+ border: 1px solid rgb(var(--neo-border-rgb)/.72);
4378
+ border-radius: var(--neo-radius-lg);
4379
+ inline-size: 100%;
4380
+ display: block;
4381
+ }
4382
+
4383
+ .neo-card-service {
4384
+ gap: var(--neo-space-3);
4385
+ text-align: center;
4386
+ align-content: start;
4387
+ display: grid;
4388
+ position: relative;
4389
+ overflow: visible;
4390
+ }
4391
+
4392
+ .neo-card-service > .neo-icon-medallion {
4393
+ z-index: 2;
4394
+ justify-self: center;
4395
+ margin-block-start: -2.15rem;
4396
+ position: relative;
4397
+ }
4398
+
4399
+ .neo-card-service > .neo-card-media + .neo-icon-medallion {
4400
+ margin-block-start: -2.15rem;
4401
+ }
4402
+
4403
+ .neo-card-feature {
4404
+ gap: var(--neo-space-4);
4405
+ grid-template-columns: auto minmax(0, 1fr);
4406
+ align-items: start;
4407
+ display: grid;
4408
+ }
4409
+
4410
+ .neo-card-accent-edge {
4411
+ border-inline-start: .35rem solid var(--neo-primary);
4412
+ }
4413
+
4414
+ .neo-icon-medallion {
4415
+ background: var(--neo-primary);
4416
+ block-size: 3.75rem;
4417
+ inline-size: 3.75rem;
4418
+ color: var(--neo-on-primary);
4419
+ border: 2px solid rgb(var(--neo-border-rgb)/.82);
4420
+ border-radius: 50%;
4421
+ flex: none;
4422
+ place-items: center;
4423
+ padding: .7rem;
4424
+ line-height: 1;
4425
+ display: inline-grid;
4426
+ }
4427
+
4428
+ .neo-icon-medallion > :where(svg, img) {
4429
+ object-fit: contain;
4430
+ block-size: 100%;
4431
+ inline-size: 100%;
4432
+ }
4433
+
4434
+ .neo-button.neo-button-cut, .neo-button-cut, :where([data-ui="neumorphism"]) .ui-button.neo-button-cut {
4435
+ clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
4436
+ border-radius: 0;
4437
+ }
4438
+
4439
+ .neo-button.neo-button-cut:focus-visible, .neo-button-cut:focus-visible, :where([data-ui="neumorphism"]) .ui-button.neo-button-cut:focus-visible {
4440
+ outline-offset: -3px;
4441
+ }
4442
+
4443
+ .neo-button.neo-button-outline-heavy, .neo-button-outline-heavy, :where([data-ui="neumorphism"]) .ui-button.neo-button-outline-heavy {
4444
+ color: var(--neo-primary);
4445
+ border-style: solid;
4446
+ border-width: 2px;
4447
+ border-color: var(--neo-primary);
4448
+ box-shadow: none;
4449
+ background: none;
4450
+ }
4451
+
4452
+ .neo-button.neo-button-outline-heavy:hover, .neo-button-outline-heavy:hover, :where([data-ui="neumorphism"]) .ui-button.neo-button-outline-heavy:hover {
4453
+ background: var(--neo-primary);
4454
+ color: var(--neo-on-primary);
4455
+ border-color: var(--neo-primary-hover);
4456
+ }
4457
+
4458
+ .neo-badge-seal {
4459
+ aspect-ratio: 1;
4460
+ background: var(--neo-surface-strong);
4461
+ inline-size: 5rem;
4462
+ min-inline-size: 5rem;
4463
+ color: var(--neo-text);
4464
+ border: 2px solid var(--neo-primary);
4465
+ text-align: center;
4466
+ font-family: var(--neo-font-heading);
4467
+ letter-spacing: .04em;
4468
+ border-radius: 50%;
4469
+ align-content: center;
4470
+ place-items: center;
4471
+ padding: .65rem;
4472
+ font-size: .72rem;
4473
+ font-weight: 900;
4474
+ line-height: 1.05;
4475
+ display: inline-grid;
4476
+ }
4477
+
4478
+ .neo-feature-strip {
4479
+ background: var(--neo-card-bg);
4480
+ color: var(--neo-text);
4481
+ border: 1px solid var(--neo-border);
4482
+ border-radius: var(--neo-radius-lg);
4483
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4484
+ display: grid;
4485
+ overflow: hidden;
4486
+ }
4487
+
4488
+ .neo-feature-item {
4489
+ align-items: center;
4490
+ gap: var(--neo-space-3);
4491
+ min-inline-size: 0;
4492
+ padding: var(--neo-space-4);
4493
+ border-inline-end: 1px solid rgb(var(--neo-border-rgb)/.62);
4494
+ grid-template-columns: auto minmax(0, 1fr);
4495
+ display: grid;
4496
+ }
4497
+
4498
+ .neo-feature-item:last-child {
4499
+ border-inline-end: 0;
4500
+ }
4501
+
4502
+ .neo-feature-item > :where(p, small) {
4503
+ color: var(--neo-text-muted);
4504
+ margin: 0;
4505
+ }
4506
+
4507
+ .neo-callout-bar {
4508
+ align-items: center;
4509
+ gap: var(--neo-space-4);
4510
+ padding: var(--neo-space-4) var(--neo-space-5);
4511
+ background: var(--neo-card-bg);
4512
+ color: var(--neo-text);
4513
+ border: 1px solid var(--neo-border);
4514
+ border-radius: var(--neo-radius-lg);
4515
+ grid-template-columns: auto minmax(0, 1fr) auto;
4516
+ display: grid;
4517
+ }
4518
+
4519
+ .neo-callout-bar > :where(p, div) {
4520
+ min-inline-size: 0;
4521
+ }
4522
+
4523
+ .neo-callout-bar > :where(.neo-button, a, button):last-child, :where([data-ui="neumorphism"]) .neo-callout-bar>:where(.ui-button,a,button):last-child {
4524
+ justify-self: end;
4525
+ }
4526
+
4527
+ .neo-eyebrow {
4528
+ color: var(--neo-primary);
4529
+ font-family: var(--neo-font-heading);
4530
+ letter-spacing: .14em;
4531
+ text-transform: uppercase;
4532
+ margin: 0;
4533
+ font-size: .76rem;
4534
+ font-weight: 900;
4535
+ line-height: 1.2;
4536
+ }
4537
+
4538
+ .neo-media-scrim {
4539
+ isolation: isolate;
4540
+ background: var(--neo-surface-soft);
4541
+ border: 1px solid var(--neo-border);
4542
+ border-radius: var(--neo-radius-lg);
4543
+ min-block-size: 12rem;
4544
+ position: relative;
4545
+ overflow: hidden;
4546
+ }
4547
+
4548
+ .neo-media-scrim > :where(img, picture, video) {
4549
+ block-size: 100%;
4550
+ inline-size: 100%;
4551
+ min-block-size: inherit;
4552
+ object-fit: cover;
4553
+ display: block;
4554
+ }
4555
+
4556
+ .neo-media-scrim > :where(figcaption, [data-media-caption]) {
4557
+ z-index: 1;
4558
+ color: #fff;
4559
+ background: linear-gradient(to top, #000000e6, #00000094 56%, #0000);
4560
+ padding: clamp(1rem, 4vw, 2rem);
4561
+ position: absolute;
4562
+ inset-block-end: 0;
4563
+ inset-inline: 0;
4564
+ }
4565
+
4566
+ .neo-media-scrim > :where(figcaption, [data-media-caption]) * {
4567
+ color: inherit;
4568
+ }
4569
+
4570
+ @media (max-width: 42rem) {
4571
+ .neo-callout-bar {
4572
+ grid-template-columns: 1fr;
4573
+ align-items: start;
4574
+ }
4575
+
4576
+ .neo-callout-bar > :where(.neo-button, a, button):last-child, :where([data-ui="neumorphism"]) .neo-callout-bar>:where(.ui-button,a,button):last-child {
4577
+ justify-self: stretch;
4578
+ }
4579
+
4580
+ .neo-feature-item {
4581
+ border-inline-end: 0;
4582
+ border-block-end: 1px solid rgb(var(--neo-border-rgb)/.62);
4583
+ }
4584
+
4585
+ .neo-feature-item:last-child {
4586
+ border-block-end: 0;
4587
+ }
4588
+ }
4589
+
4590
+ .neo-card-service, .neo-card-feature, .neo-feature-strip, .neo-callout-bar {
4591
+ border-color: #0000;
4592
+ box-shadow: .65rem .65rem 1.35rem #00000029, -.55rem -.55rem 1.25rem #ffffff14;
4593
+ }
4594
+
4595
+ .neo-icon-medallion, .neo-badge-seal {
4596
+ border-color: #0000;
4597
+ box-shadow: .38rem .38rem .8rem #0000002e, -.3rem -.3rem .7rem #ffffff1a;
4598
+ }
4599
+
4600
+ .neo-button-outline-heavy {
4601
+ border-color: var(--neo-primary);
4602
+ box-shadow: inset .18rem .18rem .45rem #0000001f;
4603
+ }
4604
+
4605
+ .neo-button.neo-button-cut, .neo-button-cut, :where([data-ui="neumorphism"]) .ui-button.neo-button-cut {
4606
+ border-radius: var(--neo-radius-pill);
4607
+ min-inline-size: 6rem;
4608
+ max-inline-size: 100%;
4609
+ clip-path: inset(0 round var(--neo-radius-pill));
4610
+ justify-content: center;
4611
+ justify-self: center;
4612
+ }
4613
+
4614
+ .neo-button.neo-button-outline-heavy, .neo-button-outline-heavy, :where([data-ui="neumorphism"]) .ui-button.neo-button-outline-heavy {
4615
+ border-radius: var(--neo-radius-pill);
4616
+ clip-path: inset(.08rem round var(--neo-radius-pill));
4617
+ box-shadow: -.28rem -.28rem .65rem rgb(var(--neo-surface-strong-rgb)/.72),.32rem .32rem .72rem rgb(var(--neo-text-rgb)/.16);
4618
+ border-width: 1px;
4619
+ }
4620
+
4621
+ .neo-card-service, .neo-media-scrim, .neo-feature-strip, .neo-callout-bar, .neo-well {
4622
+ border: 1px solid rgb(var(--neo-border-rgb)/.36);
4623
+ border-radius: var(--neo-radius-xl);
4624
+ box-shadow: -.55rem -.55rem 1.15rem rgb(var(--neo-surface-strong-rgb)/.74),.58rem .58rem 1.2rem rgb(var(--neo-text-rgb)/.14);
4625
+ }
4626
+
4627
+ .neo-well {
4628
+ box-shadow: inset .3rem .3rem .7rem rgb(var(--neo-text-rgb)/.12),inset -.3rem -.3rem .7rem rgb(var(--neo-surface-strong-rgb)/.68);
4629
+ }
4630
+
4631
+ [data-ui="neumorphism"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4632
+ border: 1px solid rgb(var(--neo-border-rgb)/.42);
4633
+ border-radius: var(--neo-radius-pill);
4634
+ box-shadow: -.28rem -.28rem .65rem rgb(var(--neo-surface-strong-rgb)/.72),.32rem .32rem .72rem rgb(var(--neo-text-rgb)/.16);
4635
+ }
4636
+
4637
+ [data-ui="neumorphism"][data-theme][data-mode] :where(dialog) {
4638
+ border: 1px solid rgb(var(--neo-border-rgb)/.38);
4639
+ border-radius: var(--neo-radius-xl);
4640
+ box-shadow: -.65rem -.65rem 1.3rem rgb(var(--neo-surface-strong-rgb)/.72),.72rem .72rem 1.45rem rgb(var(--neo-text-rgb)/.2);
4641
+ }
4642
+
4643
+ .neo-button[aria-busy="true"]:after, .neo-icon-button[aria-busy="true"]:after, [data-ui="neumorphism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="neumorphism"]) .ui-button[aria-busy="true"]:after, :where([data-ui="neumorphism"]) .ui-icon-button[aria-busy="true"]:after {
4644
+ border: .12em solid #0000;
4645
+ box-shadow: -.09em -.09em .18em #ffffff61,.09em .09em .2em #00000038,inset 0 0 0 .18em rgb(var(--neo-surface-rgb)/.6);
4646
+ clip-path: circle(50%);
4647
+ background: conic-gradient(currentColor, #0000 42%, currentColor);
4648
+ border-block-start-color: currentColor;
4649
+ border-radius: 50%;
4650
+ animation: 1.04s linear infinite neo-spin;
4651
+ }
4652
+
2926
4653
  @media (prefers-reduced-motion: reduce) {
2927
4654
  [data-ui="neumorphism"] *, [data-ui="neumorphism"] :before, [data-ui="neumorphism"] :after {
2928
4655
  scroll-behavior: auto !important;
@@ -2940,8 +4667,10 @@
2940
4667
  }
2941
4668
 
2942
4669
  @media (forced-colors: active) {
2943
- [data-ui="neumorphism"] * {
2944
- forced-color-adjust: auto;
4670
+ @supports (forced-color-adjust: auto) {
4671
+ [data-ui="neumorphism"] * {
4672
+ forced-color-adjust: auto;
4673
+ }
2945
4674
  }
2946
4675
 
2947
4676
  [data-ui="neumorphism"] :where(:focus-visible) {