ui-style-kit-css 2.1.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 (64) hide show
  1. package/CHANGELOG.md +54 -0
  2. package/README.md +169 -54
  3. package/STYLE-MAP.md +55 -0
  4. package/dist/ui-style-kit.css +23744 -7015
  5. package/dist/ui-style-kit.min.css +2 -2
  6. package/dist/ui-style-kit.visual.css +22948 -6669
  7. package/dist/ui-style-kit.visual.min.css +2 -2
  8. package/dist/ui-style-kit.with-bridge.css +23941 -7205
  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 +1894 -147
  12. package/dist/visual/bento.css +1910 -166
  13. package/dist/visual/brutalism.css +1853 -98
  14. package/dist/visual/clay.css +4789 -0
  15. package/dist/visual/cyberpunk.css +1840 -94
  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 +1862 -112
  20. package/dist/visual/minimal-saas.css +1886 -147
  21. package/dist/visual/neo-noir.css +4790 -0
  22. package/dist/visual/neumorphism.css +1896 -151
  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 +1859 -93
  26. package/dist/visual/retrofuturism.css +1852 -113
  27. package/dist/visual/tactile.css +1851 -111
  28. package/dist/visual/technical-blueprint.css +4791 -0
  29. package/dist/visual/y2k.css +1840 -92
  30. package/docs/BRIDGE-MIGRATION.md +20 -0
  31. package/docs/ECOSYSTEM.md +39 -4
  32. package/docs/PUBLISHING.md +38 -13
  33. package/docs/STYLE-GUIDE.md +53 -13
  34. package/docs/TOKENS.md +50 -1
  35. package/docs/superpowers/plans/2026-08-29-preset-identity-system-refinement.md +649 -0
  36. package/docs/superpowers/specs/2026-08-29-preset-identity-system-refinement-design.md +212 -0
  37. package/manifest.json +482 -2
  38. package/package.json +77 -7
  39. package/styles/art-deco.css +683 -0
  40. package/styles/bauhaus.css +237 -3
  41. package/styles/bento.css +266 -7
  42. package/styles/brutalism.css +235 -3
  43. package/styles/clay.css +692 -0
  44. package/styles/components.css +608 -14
  45. package/styles/content-overflow.css +423 -4
  46. package/styles/cyberpunk.css +234 -3
  47. package/styles/data-terminal.css +691 -0
  48. package/styles/editorial-luxe.css +687 -0
  49. package/styles/industrial-utility.css +690 -0
  50. package/styles/interactive-surface-bridge.css +17 -10
  51. package/styles/interactive-surface-theme.css +17 -8
  52. package/styles/maximalist.css +238 -4
  53. package/styles/minimal-saas.css +234 -3
  54. package/styles/native-elements.css +80 -12
  55. package/styles/neo-noir.css +690 -0
  56. package/styles/neumorphism.css +234 -3
  57. package/styles/organic-modern.css +683 -0
  58. package/styles/paper-editorial.css +688 -0
  59. package/styles/retro-glass.css +242 -3
  60. package/styles/retrofuturism.css +233 -3
  61. package/styles/tactile.css +235 -3
  62. package/styles/technical-blueprint.css +686 -0
  63. package/styles/theme-colors.css +796 -5
  64. package/styles/y2k.css +237 -3
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * UI Style Kit CSS v2.1.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);
@@ -846,6 +1637,22 @@
846
1637
  --usk-native-shadow: none;
847
1638
  --usk-native-shadow-md: var(--usk-native-shadow);
848
1639
  --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
1640
+ --usk-motion-duration: 140ms;
1641
+ --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
1642
+
1643
+ /* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
1644
+ --ui-color-bg: rgb(var(--usk-bg-rgb));
1645
+ --ui-color-surface: var(--usk-native-surface-strong);
1646
+ --ui-color-text: var(--usk-native-text);
1647
+ --ui-color-muted: var(--usk-native-text-muted);
1648
+ --ui-color-primary: var(--usk-native-primary);
1649
+ --ui-color-on-primary: var(--usk-native-on-primary);
1650
+ --ui-color-border: var(--usk-native-border);
1651
+ --ui-radius-control: var(--usk-native-radius);
1652
+ --ui-shadow-control: var(--usk-native-shadow);
1653
+ --ui-focus-color: var(--usk-native-focus);
1654
+ --ui-motion-duration: var(--usk-motion-duration);
1655
+ --ui-motion-easing: var(--usk-motion-easing);
849
1656
  }
850
1657
 
851
1658
  [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
@@ -853,7 +1660,10 @@
853
1660
  font-family: var(--usk-native-font-heading);
854
1661
  line-height: 1.15;
855
1662
  margin: 0 0 .65em;
856
- 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; }
857
1667
  }
858
1668
 
859
1669
  [data-ui][data-theme][data-mode] :where(hgroup) {
@@ -901,7 +1711,7 @@
901
1711
  padding: .15em .35em;
902
1712
  color: var(--usk-native-text);
903
1713
  background: var(--usk-native-surface-soft);
904
- 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);
905
1715
  border-radius: var(--usk-native-radius-sm);
906
1716
  font-family: var(--usk-native-font-mono);
907
1717
  font-size: .92em;
@@ -934,7 +1744,7 @@
934
1744
  [data-ui][data-theme][data-mode] :where(mark) {
935
1745
  padding-inline: .15em;
936
1746
  color: var(--usk-native-text);
937
- background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
1747
+ background: rgb(var(--usk-warning-rgb) / .32);
938
1748
  border-radius: .2em;
939
1749
  }
940
1750
 
@@ -973,7 +1783,7 @@
973
1783
  min-inline-size: 0;
974
1784
  margin: 0 0 1rem;
975
1785
  padding: var(--usk-native-panel-padding);
976
- background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
1786
+ background: var(--usk-native-card-bg);
977
1787
  border: var(--usk-native-border-width) solid var(--usk-native-border);
978
1788
  border-radius: var(--usk-native-radius);
979
1789
  }
@@ -1001,7 +1811,7 @@
1001
1811
  align-items: center;
1002
1812
  }
1003
1813
 
1004
- [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) {
1005
1815
  width: 100%;
1006
1816
  min-block-size: var(--usk-native-control-min-block-size);
1007
1817
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
@@ -1029,9 +1839,16 @@
1029
1839
 
1030
1840
  [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
1031
1841
 
1032
- [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;
1033
1846
  min-block-size: var(--usk-native-control-min-block-size);
1034
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])) {
1035
1852
  color: var(--usk-native-on-primary);
1036
1853
  background: var(--usk-native-primary);
1037
1854
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -1041,6 +1858,18 @@
1041
1858
  cursor: pointer;
1042
1859
  }
1043
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
+
1044
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) {
1045
1874
  background: var(--usk-native-primary-hover);
1046
1875
  border-color: var(--usk-native-primary-hover);
@@ -1156,7 +1985,7 @@
1156
1985
  cursor: not-allowed;
1157
1986
  }
1158
1987
 
1159
- [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) {
1160
1989
  background: var(--usk-native-surface-soft);
1161
1990
  }
1162
1991
 
@@ -1182,7 +2011,7 @@
1182
2011
 
1183
2012
  [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
1184
2013
  color: var(--usk-native-text-muted);
1185
- background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2014
+ background: var(--usk-native-surface-soft);
1186
2015
  border-color: var(--usk-native-border);
1187
2016
  box-shadow: none;
1188
2017
  opacity: .55;
@@ -1214,7 +2043,7 @@
1214
2043
 
1215
2044
  [data-ui][data-theme][data-mode] :where(th) {
1216
2045
  color: var(--usk-native-text);
1217
- background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2046
+ background: var(--usk-native-surface-soft);
1218
2047
  }
1219
2048
 
1220
2049
  [data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
@@ -1244,6 +2073,8 @@
1244
2073
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
1245
2074
  }
1246
2075
 
2076
+ [data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
2077
+
1247
2078
  [data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
1248
2079
 
1249
2080
  [data-ui][data-theme][data-mode] :where(progress, meter) {
@@ -1349,13 +2180,39 @@
1349
2180
  outline-offset: .35rem;
1350
2181
  }
1351
2182
 
1352
- [data-ui][data-theme][data-mode] :where([aria-current="page"]) { font-weight: 900; }
1353
- [data-ui][data-theme][data-mode] :where([aria-busy="true"]) { cursor: progress; }
1354
- [data-ui][data-theme][data-mode] :where([hidden]) { display: none !important; }
1355
- [data-ui][data-theme][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
1356
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar { inline-size: .75rem; block-size: .75rem; }
1357
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
1358
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
2183
+ [data-ui][data-theme][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2184
+ [data-ui][data-theme][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2185
+ [data-ui][data-theme][data-mode] :where([hidden]) { display: none !important; }
2186
+ [data-ui][data-theme][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2187
+ [data-ui][data-theme][data-mode] ::-webkit-scrollbar { inline-size: .75rem; block-size: .75rem; }
2188
+ [data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
2189
+ [data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
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
+ }
1359
2216
 
1360
2217
  @media (prefers-reduced-motion: reduce) {
1361
2218
  [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
@@ -1365,8 +2222,10 @@
1365
2222
  }
1366
2223
 
1367
2224
  @media (forced-colors: active) {
1368
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
1369
- 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
+ }
1370
2229
  }
1371
2230
 
1372
2231
  [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
@@ -1536,7 +2395,7 @@
1536
2395
  [class~="rg-alert"],
1537
2396
  [class~="rg-table-wrap"],
1538
2397
  [class~="rg-nav"]
1539
- ) {
2398
+ ), [data-ui]:where([data-ui="brutalism"])[data-theme][data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
1540
2399
  max-inline-size: 100%;
1541
2400
  min-inline-size: 0;
1542
2401
  overflow-wrap: anywhere;
@@ -1587,7 +2446,7 @@
1587
2446
  [class~="rg-icon-button"],
1588
2447
  [class~="rg-badge"],
1589
2448
  [class~="rg-nav-link"]
1590
- ) {
2449
+ ), [data-ui]:where([data-ui="brutalism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
1591
2450
  max-inline-size: 100%;
1592
2451
  min-inline-size: 0;
1593
2452
  white-space: normal;
@@ -1627,7 +2486,7 @@
1627
2486
  .rg-button,
1628
2487
  .rg-icon-button,
1629
2488
  .rg-button-pill
1630
- ) {
2489
+ ), [data-ui]:where([data-ui="brutalism"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
1631
2490
  box-sizing: border-box;
1632
2491
  display: inline-flex;
1633
2492
  align-items: center;
@@ -1951,13 +2810,13 @@
1951
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); }
1952
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; }
1953
2812
 
1954
- .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 {
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="brutalism"]) .ui-button:where([data-ui-variant="ghost"]) {
1955
2814
  color: var(--usk-native-primary);
1956
2815
  background: transparent;
1957
2816
  border-color: var(--usk-native-border);
1958
2817
  }
1959
2818
 
1960
- .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 {
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="brutalism"]) .ui-check, :where([data-ui="brutalism"]) .ui-radio, :where([data-ui="brutalism"]) .ui-switch {
1961
2820
  display: inline-flex;
1962
2821
  align-items: center;
1963
2822
  gap: var(--usk-native-field-gap);
@@ -1965,16 +2824,17 @@
1965
2824
  color: var(--usk-native-text);
1966
2825
  }
1967
2826
 
1968
- .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 {
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="brutalism"]) .ui-check-control, :where([data-ui="brutalism"]) .ui-radio-control {
1969
2828
  inline-size: 1.5rem;
1970
2829
  block-size: 1.5rem;
1971
2830
  accent-color: var(--usk-native-primary);
1972
2831
  }
1973
2832
 
1974
- .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 {
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="brutalism"]) .ui-switch-track {
1975
2834
  position: relative;
1976
2835
  display: inline-flex;
1977
2836
  align-items: center;
2837
+ flex: 0 0 auto;
1978
2838
  inline-size: 2.75rem;
1979
2839
  block-size: 1.5rem;
1980
2840
  padding: .18rem;
@@ -1983,7 +2843,7 @@
1983
2843
  border-radius: 999px;
1984
2844
  }
1985
2845
 
1986
- .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 {
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="brutalism"]) .ui-switch-thumb {
1987
2847
  inline-size: 1rem;
1988
2848
  block-size: 1rem;
1989
2849
  background: var(--usk-native-thumb);
@@ -2002,24 +2862,10 @@
2002
2862
  .brutal-switch:has(input:checked) .brutal-switch-track,
2003
2863
  .cyber-switch:has(input:checked) .cyber-switch-track,
2004
2864
  .y2k-switch:has(input:checked) .y2k-switch-track,
2005
- .rg-switch:has(input:checked) .rg-switch-track {
2865
+ .rg-switch:has(input:checked) .rg-switch-track, :where([data-ui="brutalism"]) .ui-switch:has(input:checked) .ui-switch-track {
2006
2866
  background: var(--usk-native-track-fill);
2007
2867
  }
2008
2868
 
2009
- .saas-switch:has(input:checked) .saas-switch-thumb,
2010
- .bento-switch:has(input:checked) .bento-switch-thumb,
2011
- .max-switch:has(input:checked) .max-switch-thumb,
2012
- .bau-switch:has(input:checked) .bau-switch-thumb,
2013
- .tactile-switch:has(input:checked) .tactile-switch-thumb,
2014
- .neo-switch:has(input:checked) .neo-switch-thumb,
2015
- .retro-switch:has(input:checked) .retro-switch-thumb,
2016
- .brutal-switch:has(input:checked) .brutal-switch-thumb,
2017
- .cyber-switch:has(input:checked) .cyber-switch-thumb,
2018
- .y2k-switch:has(input:checked) .y2k-switch-thumb,
2019
- .rg-switch:has(input:checked) .rg-switch-thumb {
2020
- transform: translateX(1.25rem);
2021
- }
2022
-
2023
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 {
2024
2870
  position: absolute !important;
2025
2871
  inline-size: 1px !important;
@@ -2049,6 +2895,613 @@
2049
2895
  }
2050
2896
  }
2051
2897
 
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="brutalism"])[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
+ }
3069
+
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="brutalism"])[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;
3147
+ }
3148
+
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="brutalism"])[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="brutalism"]) :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="brutalism"]) :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) {
3440
+ display: inline-flex;
3441
+ align-items: center;
3442
+ gap: var(--usk-native-field-gap);
3443
+ min-block-size: 24px;
3444
+ color: var(--usk-native-text);
3445
+ }
3446
+
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="brutalism"]) :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) {
3448
+ inline-size: 1.5rem;
3449
+ block-size: 1.5rem;
3450
+ accent-color: var(--usk-native-primary);
3451
+ }
3452
+
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="brutalism"]) :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) {
3454
+ position: relative;
3455
+ display: inline-flex;
3456
+ align-items: center;
3457
+ flex: 0 0 auto;
3458
+ inline-size: 2.75rem;
3459
+ block-size: 1.5rem;
3460
+ padding: .18rem;
3461
+ background: var(--usk-native-track);
3462
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
3463
+ border-radius: 999px;
3464
+ }
3465
+
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="brutalism"]) :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) {
3467
+ inline-size: 1rem;
3468
+ block-size: 1rem;
3469
+ background: var(--usk-native-thumb);
3470
+ border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
3471
+ border-radius: 999px;
3472
+ transition: transform 160ms ease;
3473
+ }
3474
+
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="brutalism"]) :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); }
3476
+
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) {
3478
+ position: absolute !important;
3479
+ inline-size: 1px !important;
3480
+ block-size: 1px !important;
3481
+ padding: 0 !important;
3482
+ margin: -1px !important;
3483
+ overflow: hidden !important;
3484
+ clip: rect(0, 0, 0, 0) !important;
3485
+ white-space: nowrap !important;
3486
+ border: 0 !important;
3487
+ }
3488
+
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) {
3490
+ position: absolute;
3491
+ inset-block-start: .75rem;
3492
+ inset-inline-start: .75rem;
3493
+ z-index: 1000;
3494
+ padding: .75rem 1rem;
3495
+ color: var(--usk-native-on-primary);
3496
+ background: var(--usk-native-primary);
3497
+ border-radius: var(--usk-native-radius);
3498
+ transform: translateY(calc(-100% - 1rem));
3499
+ }
3500
+
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); }
3502
+ }
3503
+ /* END GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
3504
+
2052
3505
 
2053
3506
  /* styles/brutalism.css (visual paint) */
2054
3507
  @layer ui-style-kit.presets {
@@ -2078,6 +3531,8 @@
2078
3531
  }
2079
3532
 
2080
3533
  [data-ui="brutalism"][data-mode="light"] {
3534
+ --lightningcss-light: initial;
3535
+ --lightningcss-dark: ;
2081
3536
  color-scheme: light;
2082
3537
  --brutal-panel-alpha: .92;
2083
3538
  --brutal-panel-strong-alpha: .98;
@@ -2089,6 +3544,8 @@
2089
3544
  }
2090
3545
 
2091
3546
  [data-ui="brutalism"][data-mode="dark"] {
3547
+ --lightningcss-light: ;
3548
+ --lightningcss-dark: initial;
2092
3549
  color-scheme: dark;
2093
3550
  --brutal-panel-alpha: .82;
2094
3551
  --brutal-panel-strong-alpha: .94;
@@ -2100,6 +3557,8 @@
2100
3557
  }
2101
3558
 
2102
3559
  [data-ui="brutalism"][data-mode="contrast"] {
3560
+ --lightningcss-light: ;
3561
+ --lightningcss-dark: initial;
2103
3562
  color-scheme: dark;
2104
3563
  --brutal-panel-alpha: 1;
2105
3564
  --brutal-panel-strong-alpha: 1;
@@ -2172,7 +3631,7 @@
2172
3631
  --brutal-fg: var(--brutal-text);
2173
3632
  --brutal-surface-fg: var(--brutal-text);
2174
3633
  --brutal-muted: var(--brutal-text-muted);
2175
- --brutal-border: rgb(var(--brutal-border-rgb) / var(--brutal-border-alpha));
3634
+ --brutal-border: rgb(var(--brutal-border-rgb) / max(var(--brutal-border-alpha), var(--usk-border-min-alpha)));
2176
3635
  --brutal-control-fg: var(--brutal-text);
2177
3636
  --brutal-primary: rgb(var(--brutal-primary-rgb));
2178
3637
  --brutal-primary-hover: rgb(var(--brutal-primary-hover-rgb));
@@ -2207,6 +3666,12 @@
2207
3666
  --brutal-spinner-accent: var(--brutal-accent);
2208
3667
  }
2209
3668
 
3669
+ @supports (color: color-mix(in srgb,black,white)) {
3670
+ [data-ui="brutalism"][data-theme][data-mode] {
3671
+ --brutal-border: color-mix(in srgb, rgb(var(--brutal-border-rgb) / max(var(--brutal-border-alpha), var(--usk-border-min-alpha))), var(--brutal-text) var(--usk-border-text-mix));
3672
+ }
3673
+ }
3674
+
2210
3675
  [data-ui="brutalism"] {
2211
3676
  background: linear-gradient(90deg,rgb(var(--brutal-border-rgb)/var(--brutal-grid-alpha)) 1px,transparent 1px),linear-gradient(rgb(var(--brutal-border-rgb)/var(--brutal-grid-alpha)) 1px,transparent 1px),var(--brutal-bg);
2212
3677
  color: var(--brutal-text);
@@ -2260,12 +3725,12 @@
2260
3725
  inline-size: 3rem;
2261
3726
  }
2262
3727
 
2263
- .brutal-button[aria-busy="true"], .brutal-icon-button[aria-busy="true"], [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
3728
+ .brutal-button[aria-busy="true"], .brutal-icon-button[aria-busy="true"], [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]), :where([data-ui="brutalism"]) .ui-button[aria-busy="true"], :where([data-ui="brutalism"]) .ui-icon-button[aria-busy="true"] {
2264
3729
  cursor: progress;
2265
3730
  gap: .55rem;
2266
3731
  }
2267
3732
 
2268
- .brutal-button[aria-busy="true"]:after, .brutal-icon-button[aria-busy="true"]:after, [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
3733
+ .brutal-button[aria-busy="true"]:after, .brutal-icon-button[aria-busy="true"]:after, [data-ui="brutalism"] :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="brutalism"]) .ui-button[aria-busy="true"]:after, :where([data-ui="brutalism"]) .ui-icon-button[aria-busy="true"]:after {
2269
3734
  content: "";
2270
3735
  border: .16em solid rgb(var(--brutal-primary-text-rgb)/.42);
2271
3736
  border-block-start-color: currentColor;
@@ -2282,7 +3747,7 @@
2282
3747
  }
2283
3748
  }
2284
3749
 
2285
- .brutal-title, .brutal-heading, .brutal-kicker, .brutal-button, .brutal-badge, .brutal-nav-link {
3750
+ .brutal-title, .brutal-heading, .brutal-kicker, .brutal-button, .brutal-badge, .brutal-nav-link, :where([data-ui="brutalism"]) .ui-button, :where([data-ui="brutalism"]) .ui-badge, :where([data-ui="brutalism"]) .ui-nav-link {
2286
3751
  font-family: var(--brutal-font-heading);
2287
3752
  text-transform: uppercase;
2288
3753
  }
@@ -2321,7 +3786,7 @@
2321
3786
  color: var(--brutal-text-muted);
2322
3787
  }
2323
3788
 
2324
- .brutal-card, .brutal-panel, .brutal-surface, .brutal-toolbar, .brutal-table-wrap {
3789
+ .brutal-card, .brutal-panel, .brutal-surface, .brutal-toolbar, .brutal-table-wrap, :where([data-ui="brutalism"]) .ui-card, :where([data-ui="brutalism"]) .ui-toolbar, :where([data-ui="brutalism"]) .ui-table-wrap {
2325
3790
  background: var(--brutal-surface-strong);
2326
3791
  color: var(--brutal-text);
2327
3792
  border: 3px solid var(--brutal-border);
@@ -2330,11 +3795,11 @@
2330
3795
  transition: transform var(--brutal-transition-fast),box-shadow var(--brutal-transition-fast),background var(--brutal-transition-fast);
2331
3796
  }
2332
3797
 
2333
- .brutal-card, .brutal-panel {
3798
+ .brutal-card, .brutal-panel, :where([data-ui="brutalism"]) .ui-card {
2334
3799
  padding: var(--brutal-space-6);
2335
3800
  }
2336
3801
 
2337
- .brutal-toolbar {
3802
+ .brutal-toolbar, :where([data-ui="brutalism"]) .ui-toolbar {
2338
3803
  justify-content: space-between;
2339
3804
  align-items: center;
2340
3805
  gap: var(--brutal-space-4);
@@ -2365,7 +3830,7 @@
2365
3830
  transform: translate(4px, 4px);
2366
3831
  }
2367
3832
 
2368
- .brutal-button, .brutal-icon-button {
3833
+ .brutal-button, .brutal-icon-button, :where([data-ui="brutalism"]) .ui-button, :where([data-ui="brutalism"]) .ui-icon-button {
2369
3834
  appearance: none;
2370
3835
  justify-content: center;
2371
3836
  align-items: center;
@@ -2388,76 +3853,76 @@
2388
3853
  display: inline-flex;
2389
3854
  }
2390
3855
 
2391
- .brutal-button:hover, .brutal-icon-button:hover {
3856
+ .brutal-button:hover, .brutal-icon-button:hover, :where([data-ui="brutalism"]) .ui-button:hover, :where([data-ui="brutalism"]) .ui-icon-button:hover {
2392
3857
  box-shadow: 8px 8px 0 var(--brutal-primary);
2393
3858
  transform: translate(-2px, -2px);
2394
3859
  }
2395
3860
 
2396
- .brutal-button:active, .brutal-icon-button:active, .brutal-button.is-active, .brutal-button[aria-pressed="true"] {
3861
+ .brutal-button:active, .brutal-icon-button:active, .brutal-button.is-active, .brutal-button[aria-pressed="true"], :where([data-ui="brutalism"]) .ui-button:active, :where([data-ui="brutalism"]) .ui-icon-button:active, :where([data-ui="brutalism"]) .ui-button.is-active, :where([data-ui="brutalism"]) .ui-button[aria-pressed="true"] {
2397
3862
  box-shadow: 2px 2px 0 var(--brutal-secondary);
2398
3863
  transform: translate(4px, 4px);
2399
3864
  }
2400
3865
 
2401
- .brutal-button-primary {
3866
+ .brutal-button-primary, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="primary"]) {
2402
3867
  background: var(--brutal-primary);
2403
3868
  color: var(--brutal-on-primary);
2404
3869
  }
2405
3870
 
2406
- .brutal-button-primary:hover {
3871
+ .brutal-button-primary:hover, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="primary"]):hover {
2407
3872
  background: var(--brutal-primary-hover);
2408
3873
  }
2409
3874
 
2410
- .brutal-button-secondary {
3875
+ .brutal-button-secondary, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="secondary"]) {
2411
3876
  background: var(--brutal-secondary);
2412
3877
  color: var(--brutal-on-secondary);
2413
3878
  box-shadow: 6px 6px 0 var(--brutal-primary);
2414
3879
  }
2415
3880
 
2416
- .brutal-button-secondary:hover {
3881
+ .brutal-button-secondary:hover, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="secondary"]):hover {
2417
3882
  background: var(--brutal-secondary-hover);
2418
3883
  }
2419
3884
 
2420
- .brutal-button-danger {
3885
+ .brutal-button-danger, :where([data-ui="brutalism"]) .ui-button:where([data-ui-variant="danger"]) {
2421
3886
  background: var(--brutal-danger);
2422
3887
  color: var(--brutal-on-danger);
2423
3888
  }
2424
3889
 
2425
- .brutal-icon-button {
3890
+ .brutal-icon-button, :where([data-ui="brutalism"]) .ui-icon-button {
2426
3891
  width: 2.85rem;
2427
3892
  padding: 0;
2428
3893
  }
2429
3894
 
2430
- .brutal-button:disabled, .brutal-icon-button:disabled, .brutal-disabled {
3895
+ .brutal-button:disabled, .brutal-icon-button:disabled, .brutal-disabled, :where([data-ui="brutalism"]) .ui-button:disabled, :where([data-ui="brutalism"]) .ui-icon-button:disabled {
2431
3896
  opacity: .55;
2432
3897
  cursor: not-allowed;
2433
3898
  transform: none;
2434
3899
  }
2435
3900
 
2436
- .brutal-card, .brutal-panel {
3901
+ .brutal-card, .brutal-panel, :where([data-ui="brutalism"]) .ui-card {
2437
3902
  background: var(--brutal-card-bg);
2438
3903
  }
2439
3904
 
2440
- .brutal-toolbar, .brutal-table-wrap, .brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-ghost), .brutal-icon-button {
3905
+ .brutal-toolbar, .brutal-table-wrap, .brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-ghost), .brutal-icon-button, :where([data-ui="brutalism"]) .ui-toolbar, :where([data-ui="brutalism"]) .ui-table-wrap, :where([data-ui="brutalism"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="brutalism"]) .ui-icon-button {
2441
3906
  background: var(--brutal-control-bg);
2442
3907
  }
2443
3908
 
2444
- .brutal-button, .brutal-icon-button, .brutal-badge, .brutal-nav-link {
3909
+ .brutal-button, .brutal-icon-button, .brutal-badge, .brutal-nav-link, :where([data-ui="brutalism"]) .ui-button, :where([data-ui="brutalism"]) .ui-icon-button, :where([data-ui="brutalism"]) .ui-badge, :where([data-ui="brutalism"]) .ui-nav-link {
2445
3910
  font-family: var(--brutal-font-control);
2446
3911
  }
2447
3912
 
2448
- .brutal-field {
3913
+ .brutal-field, :where([data-ui="brutalism"]) .ui-field {
2449
3914
  gap: var(--brutal-space-2);
2450
3915
  flex-direction: column;
2451
3916
  display: flex;
2452
3917
  }
2453
3918
 
2454
- .brutal-label {
3919
+ .brutal-label, :where([data-ui="brutalism"]) .ui-label {
2455
3920
  text-transform: uppercase;
2456
3921
  letter-spacing: .05em;
2457
3922
  font-weight: 900;
2458
3923
  }
2459
3924
 
2460
- .brutal-input, .brutal-textarea, .brutal-select {
3925
+ .brutal-input, .brutal-textarea, .brutal-select, :where([data-ui="brutalism"]) .ui-input, :where([data-ui="brutalism"]) .ui-textarea, :where([data-ui="brutalism"]) .ui-select {
2461
3926
  background: var(--brutal-surface-strong);
2462
3927
  width: 100%;
2463
3928
  min-height: 2.9rem;
@@ -2470,22 +3935,22 @@
2470
3935
  box-shadow: inset 4px 4px #0000001f;
2471
3936
  }
2472
3937
 
2473
- .brutal-textarea {
3938
+ .brutal-textarea, :where([data-ui="brutalism"]) .ui-textarea {
2474
3939
  resize: vertical;
2475
3940
  min-height: 8rem;
2476
3941
  }
2477
3942
 
2478
- .brutal-input:focus, .brutal-textarea:focus, .brutal-select:focus {
3943
+ .brutal-input:focus, .brutal-textarea:focus, .brutal-select:focus, :where([data-ui="brutalism"]) .ui-input:focus, :where([data-ui="brutalism"]) .ui-textarea:focus, :where([data-ui="brutalism"]) .ui-select:focus {
2479
3944
  border-color: var(--brutal-focus);
2480
3945
  box-shadow: 0 0 0 4px rgb(var(--brutal-focus-rgb)/.28),inset 4px 4px 0 #0000001f;
2481
3946
  }
2482
3947
 
2483
- .brutal-help-text {
3948
+ .brutal-help-text, :where([data-ui="brutalism"]) .ui-help-text {
2484
3949
  color: var(--brutal-text-muted);
2485
3950
  font-size: .9rem;
2486
3951
  }
2487
3952
 
2488
- .brutal-badge {
3953
+ .brutal-badge, :where([data-ui="brutalism"]) .ui-badge {
2489
3954
  background: var(--brutal-surface-strong);
2490
3955
  min-height: 1.8rem;
2491
3956
  color: var(--brutal-text);
@@ -2498,32 +3963,32 @@
2498
3963
  display: inline-flex;
2499
3964
  }
2500
3965
 
2501
- .brutal-badge-primary {
3966
+ .brutal-badge-primary, :where([data-ui="brutalism"]) .ui-badge:where([data-ui-variant="primary"]) {
2502
3967
  background: var(--brutal-primary);
2503
3968
  color: var(--brutal-on-primary);
2504
3969
  }
2505
3970
 
2506
- .brutal-badge-secondary {
3971
+ .brutal-badge-secondary, :where([data-ui="brutalism"]) .ui-badge:where([data-ui-variant="secondary"]) {
2507
3972
  background: var(--brutal-secondary);
2508
3973
  color: var(--brutal-on-secondary);
2509
3974
  }
2510
3975
 
2511
- .brutal-badge-success {
3976
+ .brutal-badge-success, :where([data-ui="brutalism"]) .ui-badge:where([data-ui-variant="success"]) {
2512
3977
  background: var(--brutal-success);
2513
3978
  color: var(--brutal-on-success);
2514
3979
  }
2515
3980
 
2516
- .brutal-badge-warning {
3981
+ .brutal-badge-warning, :where([data-ui="brutalism"]) .ui-badge:where([data-ui-variant="warning"]) {
2517
3982
  background: var(--brutal-warning);
2518
3983
  color: var(--brutal-on-warning);
2519
3984
  }
2520
3985
 
2521
- .brutal-badge-danger {
3986
+ .brutal-badge-danger, :where([data-ui="brutalism"]) .ui-badge:where([data-ui-variant="danger"]) {
2522
3987
  background: var(--brutal-danger);
2523
3988
  color: var(--brutal-on-danger);
2524
3989
  }
2525
3990
 
2526
- .brutal-nav {
3991
+ .brutal-nav, :where([data-ui="brutalism"]) .ui-nav {
2527
3992
  gap: var(--brutal-space-2);
2528
3993
  padding: var(--brutal-space-2);
2529
3994
  background: var(--brutal-surface-strong);
@@ -2533,7 +3998,7 @@
2533
3998
  display: flex;
2534
3999
  }
2535
4000
 
2536
- .brutal-nav-link {
4001
+ .brutal-nav-link, :where([data-ui="brutalism"]) .ui-nav-link {
2537
4002
  min-height: 2.5rem;
2538
4003
  color: var(--brutal-text);
2539
4004
  border: 3px solid #0000;
@@ -2544,12 +4009,12 @@
2544
4009
  display: inline-flex;
2545
4010
  }
2546
4011
 
2547
- .brutal-nav-link:hover {
4012
+ .brutal-nav-link:hover, :where([data-ui="brutalism"]) .ui-nav-link:hover {
2548
4013
  border-color: var(--brutal-border);
2549
4014
  background: var(--brutal-surface-soft);
2550
4015
  }
2551
4016
 
2552
- .brutal-nav-link.is-active, .brutal-nav-link[aria-current="page"] {
4017
+ .brutal-nav-link.is-active, .brutal-nav-link[aria-current="page"], :where([data-ui="brutalism"]) .ui-nav-link.is-active, :where([data-ui="brutalism"]) .ui-nav-link[aria-current="page"] {
2553
4018
  background: var(--brutal-primary);
2554
4019
  color: var(--brutal-on-primary);
2555
4020
  border-color: var(--brutal-border);
@@ -2582,66 +4047,66 @@
2582
4047
  transform: rotate(45deg);
2583
4048
  }
2584
4049
 
2585
- .brutal-progress {
4050
+ .brutal-progress, :where([data-ui="brutalism"]) .ui-progress {
2586
4051
  background: var(--brutal-surface-soft);
2587
4052
  border: 3px solid var(--brutal-border);
2588
4053
  width: 100%;
2589
4054
  height: 1rem;
2590
4055
  }
2591
4056
 
2592
- .brutal-progress-bar {
4057
+ .brutal-progress-bar, :where([data-ui="brutalism"]) .ui-progress-bar {
2593
4058
  height: 100%;
2594
4059
  width: var(--brutal-progress-value, 50%);
2595
4060
  background: var(--brutal-primary);
2596
4061
  }
2597
4062
 
2598
- .brutal-alert {
4063
+ .brutal-alert, :where([data-ui="brutalism"]) .ui-alert {
2599
4064
  padding: var(--brutal-space-4);
2600
4065
  background: var(--brutal-surface-strong);
2601
4066
  border: 3px solid var(--brutal-border);
2602
4067
  box-shadow: 8px 8px 0 var(--brutal-accent);
2603
4068
  }
2604
4069
 
2605
- .brutal-alert-success {
4070
+ .brutal-alert-success, :where([data-ui="brutalism"]) .ui-alert:where([data-ui-variant="success"]) {
2606
4071
  box-shadow: 8px 8px 0 var(--brutal-success);
2607
4072
  }
2608
4073
 
2609
- .brutal-alert-warning {
4074
+ .brutal-alert-warning, :where([data-ui="brutalism"]) .ui-alert:where([data-ui-variant="warning"]) {
2610
4075
  box-shadow: 8px 8px 0 var(--brutal-warning);
2611
4076
  }
2612
4077
 
2613
- .brutal-alert-danger {
4078
+ .brutal-alert-danger, :where([data-ui="brutalism"]) .ui-alert:where([data-ui-variant="danger"]) {
2614
4079
  box-shadow: 8px 8px 0 var(--brutal-danger);
2615
4080
  }
2616
4081
 
2617
- .brutal-alert-title {
4082
+ .brutal-alert-title, :where([data-ui="brutalism"]) .ui-alert-title {
2618
4083
  text-transform: uppercase;
2619
4084
  margin: 0;
2620
4085
  font-weight: 900;
2621
4086
  }
2622
4087
 
2623
- .brutal-alert-body {
4088
+ .brutal-alert-body, :where([data-ui="brutalism"]) .ui-alert-body {
2624
4089
  color: var(--brutal-text-muted);
2625
4090
  margin: .5rem 0 0;
2626
4091
  }
2627
4092
 
2628
- .brutal-table-wrap {
4093
+ .brutal-table-wrap, :where([data-ui="brutalism"]) .ui-table-wrap {
2629
4094
  box-shadow: 8px 8px 0 var(--brutal-primary);
2630
4095
  overflow: auto;
2631
4096
  }
2632
4097
 
2633
- .brutal-table {
4098
+ .brutal-table, :where([data-ui="brutalism"]) .ui-table {
2634
4099
  border-collapse: collapse;
2635
4100
  width: 100%;
2636
4101
  }
2637
4102
 
2638
- .brutal-table th, .brutal-table td {
4103
+ .brutal-table th, .brutal-table td, :where([data-ui="brutalism"]) .ui-table th, :where([data-ui="brutalism"]) .ui-table td {
2639
4104
  border: 2px solid var(--brutal-border);
2640
4105
  text-align: left;
2641
4106
  padding: .9rem 1rem;
2642
4107
  }
2643
4108
 
2644
- .brutal-table th {
4109
+ .brutal-table th, :where([data-ui="brutalism"]) .ui-table th {
2645
4110
  background: var(--brutal-primary);
2646
4111
  color: var(--brutal-on-primary);
2647
4112
  text-transform: uppercase;
@@ -2686,6 +4151,294 @@
2686
4151
  outline-offset: 3px;
2687
4152
  }
2688
4153
 
4154
+ @media (prefers-reduced-motion: reduce) {
4155
+ [data-ui="brutalism"] *, [data-ui="brutalism"] :before, [data-ui="brutalism"] :after {
4156
+ transition-duration: 1ms !important;
4157
+ animation-duration: 1ms !important;
4158
+ }
4159
+ }
4160
+
4161
+ .brutal-card-media {
4162
+ aspect-ratio: 16 / 9;
4163
+ object-fit: cover;
4164
+ border: 1px solid rgb(var(--brutal-border-rgb)/.72);
4165
+ border-radius: var(--brutal-radius-lg);
4166
+ inline-size: 100%;
4167
+ display: block;
4168
+ }
4169
+
4170
+ .brutal-card-service {
4171
+ gap: var(--brutal-space-3);
4172
+ text-align: center;
4173
+ align-content: start;
4174
+ display: grid;
4175
+ position: relative;
4176
+ overflow: visible;
4177
+ }
4178
+
4179
+ .brutal-card-service > .brutal-icon-medallion {
4180
+ z-index: 2;
4181
+ justify-self: center;
4182
+ margin-block-start: -2.15rem;
4183
+ position: relative;
4184
+ }
4185
+
4186
+ .brutal-card-service > .brutal-card-media + .brutal-icon-medallion {
4187
+ margin-block-start: -2.15rem;
4188
+ }
4189
+
4190
+ .brutal-card-feature {
4191
+ gap: var(--brutal-space-4);
4192
+ grid-template-columns: auto minmax(0, 1fr);
4193
+ align-items: start;
4194
+ display: grid;
4195
+ }
4196
+
4197
+ .brutal-icon-medallion {
4198
+ background: var(--brutal-primary);
4199
+ block-size: 3.75rem;
4200
+ inline-size: 3.75rem;
4201
+ color: var(--brutal-on-primary);
4202
+ border: 2px solid rgb(var(--brutal-border-rgb)/.82);
4203
+ border-radius: 50%;
4204
+ flex: none;
4205
+ place-items: center;
4206
+ padding: .7rem;
4207
+ line-height: 1;
4208
+ display: inline-grid;
4209
+ }
4210
+
4211
+ .brutal-icon-medallion > :where(svg, img) {
4212
+ object-fit: contain;
4213
+ block-size: 100%;
4214
+ inline-size: 100%;
4215
+ }
4216
+
4217
+ .brutal-button.brutal-button-cut, .brutal-button-cut, :where([data-ui="brutalism"]) .ui-button.brutal-button-cut {
4218
+ clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
4219
+ border-radius: 0;
4220
+ }
4221
+
4222
+ .brutal-button.brutal-button-cut:focus-visible, .brutal-button-cut:focus-visible, :where([data-ui="brutalism"]) .ui-button.brutal-button-cut:focus-visible {
4223
+ outline-offset: -3px;
4224
+ }
4225
+
4226
+ .brutal-button.brutal-button-outline-heavy, .brutal-button-outline-heavy, :where([data-ui="brutalism"]) .ui-button.brutal-button-outline-heavy {
4227
+ color: var(--brutal-primary);
4228
+ border-style: solid;
4229
+ border-width: 2px;
4230
+ border-color: var(--brutal-primary);
4231
+ box-shadow: none;
4232
+ background: none;
4233
+ }
4234
+
4235
+ .brutal-button.brutal-button-outline-heavy:hover, .brutal-button-outline-heavy:hover, :where([data-ui="brutalism"]) .ui-button.brutal-button-outline-heavy:hover {
4236
+ background: var(--brutal-primary);
4237
+ color: var(--brutal-on-primary);
4238
+ border-color: var(--brutal-primary-hover);
4239
+ }
4240
+
4241
+ .brutal-badge-seal {
4242
+ aspect-ratio: 1;
4243
+ background: var(--brutal-surface-strong);
4244
+ inline-size: 5rem;
4245
+ min-inline-size: 5rem;
4246
+ color: var(--brutal-text);
4247
+ border: 2px solid var(--brutal-primary);
4248
+ text-align: center;
4249
+ font-family: var(--brutal-font-heading);
4250
+ letter-spacing: .04em;
4251
+ border-radius: 50%;
4252
+ align-content: center;
4253
+ place-items: center;
4254
+ padding: .65rem;
4255
+ font-size: .72rem;
4256
+ font-weight: 900;
4257
+ line-height: 1.05;
4258
+ display: inline-grid;
4259
+ }
4260
+
4261
+ .brutal-feature-strip {
4262
+ background: var(--brutal-card-bg);
4263
+ color: var(--brutal-text);
4264
+ border: 1px solid var(--brutal-border);
4265
+ border-radius: var(--brutal-radius-lg);
4266
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4267
+ display: grid;
4268
+ overflow: hidden;
4269
+ }
4270
+
4271
+ .brutal-feature-item {
4272
+ align-items: center;
4273
+ gap: var(--brutal-space-3);
4274
+ min-inline-size: 0;
4275
+ padding: var(--brutal-space-4);
4276
+ border-inline-end: 1px solid rgb(var(--brutal-border-rgb)/.62);
4277
+ grid-template-columns: auto minmax(0, 1fr);
4278
+ display: grid;
4279
+ }
4280
+
4281
+ .brutal-feature-item:last-child {
4282
+ border-inline-end: 0;
4283
+ }
4284
+
4285
+ .brutal-feature-item > :where(p, small) {
4286
+ color: var(--brutal-text-muted);
4287
+ margin: 0;
4288
+ }
4289
+
4290
+ .brutal-callout-bar {
4291
+ align-items: center;
4292
+ gap: var(--brutal-space-4);
4293
+ padding: var(--brutal-space-4) var(--brutal-space-5);
4294
+ background: var(--brutal-card-bg);
4295
+ color: var(--brutal-text);
4296
+ border: 1px solid var(--brutal-border);
4297
+ border-radius: var(--brutal-radius-lg);
4298
+ grid-template-columns: auto minmax(0, 1fr) auto;
4299
+ display: grid;
4300
+ }
4301
+
4302
+ .brutal-callout-bar > :where(p, div) {
4303
+ min-inline-size: 0;
4304
+ }
4305
+
4306
+ .brutal-callout-bar > :where(.brutal-button, a, button):last-child, :where([data-ui="brutalism"]) .brutal-callout-bar>:where(.ui-button,a,button):last-child {
4307
+ justify-self: end;
4308
+ }
4309
+
4310
+ .brutal-eyebrow {
4311
+ color: var(--brutal-primary);
4312
+ font-family: var(--brutal-font-heading);
4313
+ letter-spacing: .14em;
4314
+ text-transform: uppercase;
4315
+ margin: 0;
4316
+ font-size: .76rem;
4317
+ font-weight: 900;
4318
+ line-height: 1.2;
4319
+ }
4320
+
4321
+ .brutal-media-scrim {
4322
+ isolation: isolate;
4323
+ background: var(--brutal-surface-soft);
4324
+ border: 1px solid var(--brutal-border);
4325
+ border-radius: var(--brutal-radius-lg);
4326
+ min-block-size: 12rem;
4327
+ position: relative;
4328
+ overflow: hidden;
4329
+ }
4330
+
4331
+ .brutal-media-scrim > :where(img, picture, video) {
4332
+ block-size: 100%;
4333
+ inline-size: 100%;
4334
+ min-block-size: inherit;
4335
+ object-fit: cover;
4336
+ display: block;
4337
+ }
4338
+
4339
+ .brutal-media-scrim > :where(figcaption, [data-media-caption]) {
4340
+ z-index: 1;
4341
+ color: #fff;
4342
+ background: linear-gradient(to top, #000000e6, #00000094 56%, #0000);
4343
+ padding: clamp(1rem, 4vw, 2rem);
4344
+ position: absolute;
4345
+ inset-block-end: 0;
4346
+ inset-inline: 0;
4347
+ }
4348
+
4349
+ .brutal-media-scrim > :where(figcaption, [data-media-caption]) * {
4350
+ color: inherit;
4351
+ }
4352
+
4353
+ @media (max-width: 42rem) {
4354
+ .brutal-callout-bar {
4355
+ grid-template-columns: 1fr;
4356
+ align-items: start;
4357
+ }
4358
+
4359
+ .brutal-callout-bar > :where(.brutal-button, a, button):last-child, :where([data-ui="brutalism"]) .brutal-callout-bar>:where(.ui-button,a,button):last-child {
4360
+ justify-self: stretch;
4361
+ }
4362
+
4363
+ .brutal-feature-item {
4364
+ border-inline-end: 0;
4365
+ border-block-end: 1px solid rgb(var(--brutal-border-rgb)/.62);
4366
+ }
4367
+
4368
+ .brutal-feature-item:last-child {
4369
+ border-block-end: 0;
4370
+ }
4371
+ }
4372
+
4373
+ .brutal-card-service, .brutal-card-feature, .brutal-feature-strip, .brutal-callout-bar, .brutal-media-scrim {
4374
+ border: 3px solid var(--brutal-text);
4375
+ box-shadow: .45rem .45rem 0 var(--brutal-primary);
4376
+ border-radius: 0;
4377
+ }
4378
+
4379
+ .brutal-icon-medallion, .brutal-badge-seal {
4380
+ border: 3px solid var(--brutal-text);
4381
+ box-shadow: .3rem .3rem 0 var(--brutal-secondary);
4382
+ border-radius: 0;
4383
+ }
4384
+
4385
+ .brutal-card-accent-edge {
4386
+ border-inline-start: .6rem solid var(--brutal-primary);
4387
+ }
4388
+
4389
+ .brutal-button-outline-heavy {
4390
+ box-shadow: .22rem .22rem 0 var(--brutal-text);
4391
+ border-width: 3px;
4392
+ }
4393
+
4394
+ .brutal-button-cut {
4395
+ clip-path: polygon(.5rem 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%, 0 .5rem);
4396
+ }
4397
+
4398
+ .brutal-button.brutal-button-cut, .brutal-button-cut, :where([data-ui="brutalism"]) .ui-button.brutal-button-cut {
4399
+ clip-path: polygon(.52rem 0, 100% 0, 100% calc(100% - .52rem), calc(100% - .52rem) 100%, 0 100%, 0 .52rem);
4400
+ justify-content: center;
4401
+ justify-self: start;
4402
+ inline-size: min(100%, 14rem);
4403
+ min-inline-size: 6rem;
4404
+ max-inline-size: 100%;
4405
+ }
4406
+
4407
+ .brutal-button.brutal-button-outline-heavy, .brutal-button-outline-heavy, :where([data-ui="brutalism"]) .ui-button.brutal-button-outline-heavy {
4408
+ clip-path: polygon(0 0, calc(100% - .52rem) 0, 100% .52rem, 100% 100%, .52rem 100%, 0 calc(100% - .52rem));
4409
+ box-shadow: .28rem .28rem 0 var(--brutal-text);
4410
+ border-width: 3px;
4411
+ border-radius: 0;
4412
+ }
4413
+
4414
+ .brutal-card-service, .brutal-media-scrim, .brutal-feature-strip, .brutal-callout-bar, .brutal-well {
4415
+ border: 3px solid var(--brutal-text);
4416
+ box-shadow: .38rem .38rem 0 var(--brutal-text);
4417
+ border-radius: 0;
4418
+ }
4419
+
4420
+ [data-ui="brutalism"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4421
+ border: 3px solid var(--brutal-text);
4422
+ box-shadow: .26rem .26rem 0 var(--brutal-text);
4423
+ border-radius: 0;
4424
+ }
4425
+
4426
+ [data-ui="brutalism"][data-theme][data-mode] :where(dialog) {
4427
+ border: 3px solid var(--brutal-text);
4428
+ box-shadow: .48rem .48rem 0 var(--brutal-text);
4429
+ border-radius: 0;
4430
+ }
4431
+
4432
+ .brutal-button[aria-busy="true"]:after, .brutal-icon-button[aria-busy="true"]:after, [data-ui="brutalism"] :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="brutalism"]) .ui-button[aria-busy="true"]:after, :where([data-ui="brutalism"]) .ui-icon-button[aria-busy="true"]:after {
4433
+ border: .18em solid;
4434
+ clip-path: inset(0);
4435
+ background: none;
4436
+ border-block-start-color: #0000;
4437
+ border-radius: 0;
4438
+ animation: .64s steps(4, end) infinite brutal-spin;
4439
+ box-shadow: .12em .12em;
4440
+ }
4441
+
2689
4442
  @media (prefers-reduced-motion: reduce) {
2690
4443
  [data-ui="brutalism"] *, [data-ui="brutalism"] :before, [data-ui="brutalism"] :after {
2691
4444
  scroll-behavior: auto !important;
@@ -2702,8 +4455,10 @@
2702
4455
  }
2703
4456
 
2704
4457
  @media (forced-colors: active) {
2705
- [data-ui="brutalism"] * {
2706
- forced-color-adjust: auto;
4458
+ @supports (forced-color-adjust: auto) {
4459
+ [data-ui="brutalism"] * {
4460
+ forced-color-adjust: auto;
4461
+ }
2707
4462
  }
2708
4463
 
2709
4464
  [data-ui="brutalism"] :where(:focus-visible) {