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) {
@@ -1357,6 +2188,32 @@
1357
2188
  [data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
1358
2189
  [data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
1359
2190
 
2191
+ @supports (color: color-mix(in srgb, black, white)) {
2192
+ [data-ui][data-theme][data-mode] {
2193
+ --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
2194
+ }
2195
+
2196
+ [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2197
+ border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
2198
+ }
2199
+
2200
+ [data-ui][data-theme][data-mode] :where(mark) {
2201
+ background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
2202
+ }
2203
+
2204
+ [data-ui][data-theme][data-mode] :where(fieldset) {
2205
+ background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
2206
+ }
2207
+
2208
+ [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2209
+ background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2210
+ }
2211
+
2212
+ [data-ui][data-theme][data-mode] :where(th) {
2213
+ background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2214
+ }
2215
+ }
2216
+
1360
2217
  @media (prefers-reduced-motion: reduce) {
1361
2218
  [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
1362
2219
  [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-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="bauhaus"])[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="bauhaus"])[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="bauhaus"])[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;
@@ -1933,31 +2792,651 @@
1933
2792
  .y2k-rounded-xl { border-radius: var(--y2k-radius-xl); }
1934
2793
  .rg-rounded-xl { border-radius: var(--rg-radius-xl); }
1935
2794
 
1936
- .saas-surface, .saas-surface-sm, .saas-surface-lg { color: var(--saas-text); background: var(--saas-card-bg); border: 1px solid var(--saas-border); }
1937
- .bento-surface, .bento-surface-sm, .bento-surface-lg { color: var(--bento-text); background: var(--bento-card-bg); border: 1px solid var(--bento-border); }
1938
- .max-surface, .max-surface-sm, .max-surface-lg { color: var(--max-text); background: var(--max-card-bg); border: 1px solid var(--max-border); }
1939
- .bau-surface, .bau-surface-sm, .bau-surface-lg { color: var(--bau-text); background: var(--bau-card-bg); border: 1px solid var(--bau-border); }
1940
- .tactile-surface, .tactile-surface-sm, .tactile-surface-lg { color: var(--tactile-text); background: var(--tactile-card-bg); border: 1px solid var(--tactile-border); }
1941
- .neo-surface, .neo-surface-sm, .neo-surface-lg { color: var(--neo-text); background: var(--neo-card-bg); border: 1px solid var(--neo-border); }
1942
- .retro-surface, .retro-surface-sm, .retro-surface-lg { color: var(--retro-text); background: var(--retro-card-bg); border: 1px solid var(--retro-border); }
1943
- .brutal-surface, .brutal-surface-sm, .brutal-surface-lg { color: var(--brutal-text); background: var(--brutal-card-bg); border: 3px solid var(--brutal-border); }
1944
- .cyber-surface, .cyber-surface-sm, .cyber-surface-lg { color: var(--cyber-text); background: var(--cyber-card-bg); border: 1px solid var(--cyber-border); }
1945
- .y2k-surface, .y2k-surface-sm, .y2k-surface-lg { color: var(--y2k-text); background: var(--y2k-card-bg); border: 1px solid var(--y2k-border); }
1946
- .rg-surface, .rg-surface-sm, .rg-surface-lg { color: var(--rg-text); background: var(--rg-card-bg); border: 1px solid var(--rg-border); }
2795
+ .saas-surface, .saas-surface-sm, .saas-surface-lg { color: var(--saas-text); background: var(--saas-card-bg); border: 1px solid var(--saas-border); }
2796
+ .bento-surface, .bento-surface-sm, .bento-surface-lg { color: var(--bento-text); background: var(--bento-card-bg); border: 1px solid var(--bento-border); }
2797
+ .max-surface, .max-surface-sm, .max-surface-lg { color: var(--max-text); background: var(--max-card-bg); border: 1px solid var(--max-border); }
2798
+ .bau-surface, .bau-surface-sm, .bau-surface-lg { color: var(--bau-text); background: var(--bau-card-bg); border: 1px solid var(--bau-border); }
2799
+ .tactile-surface, .tactile-surface-sm, .tactile-surface-lg { color: var(--tactile-text); background: var(--tactile-card-bg); border: 1px solid var(--tactile-border); }
2800
+ .neo-surface, .neo-surface-sm, .neo-surface-lg { color: var(--neo-text); background: var(--neo-card-bg); border: 1px solid var(--neo-border); }
2801
+ .retro-surface, .retro-surface-sm, .retro-surface-lg { color: var(--retro-text); background: var(--retro-card-bg); border: 1px solid var(--retro-border); }
2802
+ .brutal-surface, .brutal-surface-sm, .brutal-surface-lg { color: var(--brutal-text); background: var(--brutal-card-bg); border: 3px solid var(--brutal-border); }
2803
+ .cyber-surface, .cyber-surface-sm, .cyber-surface-lg { color: var(--cyber-text); background: var(--cyber-card-bg); border: 1px solid var(--cyber-border); }
2804
+ .y2k-surface, .y2k-surface-sm, .y2k-surface-lg { color: var(--y2k-text); background: var(--y2k-card-bg); border: 1px solid var(--y2k-border); }
2805
+ .rg-surface, .rg-surface-sm, .rg-surface-lg { color: var(--rg-text); background: var(--rg-card-bg); border: 1px solid var(--rg-border); }
2806
+
2807
+ .saas-bg-primary, .bento-bg-primary, .max-bg-primary, .bau-bg-primary, .tactile-bg-primary, .neo-bg-primary, .retro-bg-primary, .brutal-bg-primary, .cyber-bg-primary, .y2k-bg-primary, .rg-bg-primary { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
2808
+ .saas-bg-secondary, .bento-bg-secondary, .max-bg-secondary, .bau-bg-secondary, .tactile-bg-secondary, .neo-bg-secondary, .retro-bg-secondary, .brutal-bg-secondary, .cyber-bg-secondary, .y2k-bg-secondary, .rg-bg-secondary { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
2809
+ .saas-border, .bento-border, .max-border, .bau-border, .tactile-border, .neo-border, .retro-border, .brutal-border, .cyber-border, .y2k-border, .rg-border { border: var(--usk-native-border-width) solid var(--usk-native-border); }
2810
+ .saas-divider, .bento-divider, .max-divider, .bau-divider, .tactile-divider, .neo-divider, .retro-divider, .brutal-divider, .cyber-divider, .y2k-divider, .rg-divider { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
2811
+ .saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
2812
+
2813
+ .saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="ghost"]) {
2814
+ color: var(--usk-native-primary);
2815
+ background: transparent;
2816
+ border-color: var(--usk-native-border);
2817
+ }
2818
+
2819
+ .saas-check, .saas-radio, .saas-switch, .bento-check, .bento-radio, .bento-switch, .max-check, .max-radio, .max-switch, .bau-check, .bau-radio, .bau-switch, .tactile-check, .tactile-radio, .tactile-switch, .neo-check, .neo-radio, .neo-switch, .retro-check, .retro-radio, .retro-switch, .brutal-check, .brutal-radio, .brutal-switch, .cyber-check, .cyber-radio, .cyber-switch, .y2k-check, .y2k-radio, .y2k-switch, .rg-check, .rg-radio, .rg-switch, :where([data-ui="bauhaus"]) .ui-check, :where([data-ui="bauhaus"]) .ui-radio, :where([data-ui="bauhaus"]) .ui-switch {
2820
+ display: inline-flex;
2821
+ align-items: center;
2822
+ gap: var(--usk-native-field-gap);
2823
+ min-block-size: 24px;
2824
+ color: var(--usk-native-text);
2825
+ }
2826
+
2827
+ .saas-check-control, .saas-radio-control, .bento-check-control, .bento-radio-control, .max-check-control, .max-radio-control, .bau-check-control, .bau-radio-control, .tactile-check-control, .tactile-radio-control, .neo-check-control, .neo-radio-control, .retro-check-control, .retro-radio-control, .brutal-check-control, .brutal-radio-control, .cyber-check-control, .cyber-radio-control, .y2k-check-control, .y2k-radio-control, .rg-check-control, .rg-radio-control, :where([data-ui="bauhaus"]) .ui-check-control, :where([data-ui="bauhaus"]) .ui-radio-control {
2828
+ inline-size: 1.5rem;
2829
+ block-size: 1.5rem;
2830
+ accent-color: var(--usk-native-primary);
2831
+ }
2832
+
2833
+ .saas-switch-track, .bento-switch-track, .max-switch-track, .bau-switch-track, .tactile-switch-track, .neo-switch-track, .retro-switch-track, .brutal-switch-track, .cyber-switch-track, .y2k-switch-track, .rg-switch-track, :where([data-ui="bauhaus"]) .ui-switch-track {
2834
+ position: relative;
2835
+ display: inline-flex;
2836
+ align-items: center;
2837
+ flex: 0 0 auto;
2838
+ inline-size: 2.75rem;
2839
+ block-size: 1.5rem;
2840
+ padding: .18rem;
2841
+ background: var(--usk-native-track);
2842
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
2843
+ border-radius: 999px;
2844
+ }
2845
+
2846
+ .saas-switch-thumb, .bento-switch-thumb, .max-switch-thumb, .bau-switch-thumb, .tactile-switch-thumb, .neo-switch-thumb, .retro-switch-thumb, .brutal-switch-thumb, .cyber-switch-thumb, .y2k-switch-thumb, .rg-switch-thumb, :where([data-ui="bauhaus"]) .ui-switch-thumb {
2847
+ inline-size: 1rem;
2848
+ block-size: 1rem;
2849
+ background: var(--usk-native-thumb);
2850
+ border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
2851
+ border-radius: 999px;
2852
+ transition: transform 160ms ease;
2853
+ }
2854
+
2855
+ .saas-switch:has(input:checked) .saas-switch-track,
2856
+ .bento-switch:has(input:checked) .bento-switch-track,
2857
+ .max-switch:has(input:checked) .max-switch-track,
2858
+ .bau-switch:has(input:checked) .bau-switch-track,
2859
+ .tactile-switch:has(input:checked) .tactile-switch-track,
2860
+ .neo-switch:has(input:checked) .neo-switch-track,
2861
+ .retro-switch:has(input:checked) .retro-switch-track,
2862
+ .brutal-switch:has(input:checked) .brutal-switch-track,
2863
+ .cyber-switch:has(input:checked) .cyber-switch-track,
2864
+ .y2k-switch:has(input:checked) .y2k-switch-track,
2865
+ .rg-switch:has(input:checked) .rg-switch-track, :where([data-ui="bauhaus"]) .ui-switch:has(input:checked) .ui-switch-track {
2866
+ background: var(--usk-native-track-fill);
2867
+ }
2868
+
2869
+ .saas-sr-only, .saas-visually-hidden, .bento-sr-only, .bento-visually-hidden, .max-sr-only, .max-visually-hidden, .bau-sr-only, .bau-visually-hidden, .tactile-sr-only, .tactile-visually-hidden, .neo-sr-only, .neo-visually-hidden, .retro-sr-only, .retro-visually-hidden, .brutal-sr-only, .brutal-visually-hidden, .cyber-sr-only, .cyber-visually-hidden, .y2k-sr-only, .y2k-visually-hidden, .rg-sr-only, .rg-visually-hidden {
2870
+ position: absolute !important;
2871
+ inline-size: 1px !important;
2872
+ block-size: 1px !important;
2873
+ padding: 0 !important;
2874
+ margin: -1px !important;
2875
+ overflow: hidden !important;
2876
+ clip: rect(0, 0, 0, 0) !important;
2877
+ white-space: nowrap !important;
2878
+ border: 0 !important;
2879
+ }
2880
+
2881
+ .saas-skip-link, .bento-skip-link, .max-skip-link, .bau-skip-link, .tactile-skip-link, .neo-skip-link, .retro-skip-link, .brutal-skip-link, .cyber-skip-link, .y2k-skip-link, .rg-skip-link {
2882
+ position: absolute;
2883
+ inset-block-start: .75rem;
2884
+ inset-inline-start: .75rem;
2885
+ z-index: 1000;
2886
+ padding: .75rem 1rem;
2887
+ color: var(--usk-native-on-primary);
2888
+ background: var(--usk-native-primary);
2889
+ border-radius: var(--usk-native-radius);
2890
+ transform: translateY(calc(-100% - 1rem));
2891
+ }
1947
2892
 
1948
- .saas-bg-primary, .bento-bg-primary, .max-bg-primary, .bau-bg-primary, .tactile-bg-primary, .neo-bg-primary, .retro-bg-primary, .brutal-bg-primary, .cyber-bg-primary, .y2k-bg-primary, .rg-bg-primary { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
1949
- .saas-bg-secondary, .bento-bg-secondary, .max-bg-secondary, .bau-bg-secondary, .tactile-bg-secondary, .neo-bg-secondary, .retro-bg-secondary, .brutal-bg-secondary, .cyber-bg-secondary, .y2k-bg-secondary, .rg-bg-secondary { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
1950
- .saas-border, .bento-border, .max-border, .bau-border, .tactile-border, .neo-border, .retro-border, .brutal-border, .cyber-border, .y2k-border, .rg-border { border: var(--usk-native-border-width) solid var(--usk-native-border); }
1951
- .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
- .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; }
2893
+ .saas-skip-link:focus-visible, .bento-skip-link:focus-visible, .max-skip-link:focus-visible, .bau-skip-link:focus-visible, .tactile-skip-link:focus-visible, .neo-skip-link:focus-visible, .retro-skip-link:focus-visible, .brutal-skip-link:focus-visible, .cyber-skip-link:focus-visible, .y2k-skip-link:focus-visible, .rg-skip-link:focus-visible {
2894
+ transform: translateY(0);
2895
+ }
2896
+ }
1953
2897
 
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 {
1955
- color: var(--usk-native-primary);
1956
- background: transparent;
1957
- border-color: var(--usk-native-border);
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="bauhaus"])[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="bauhaus"])[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="bauhaus"])[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;
1958
3187
  }
1959
3188
 
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 {
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="bauhaus"]) :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="bauhaus"]) :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) {
1961
3440
  display: inline-flex;
1962
3441
  align-items: center;
1963
3442
  gap: var(--usk-native-field-gap);
@@ -1965,16 +3444,17 @@
1965
3444
  color: var(--usk-native-text);
1966
3445
  }
1967
3446
 
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 {
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="bauhaus"]) :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) {
1969
3448
  inline-size: 1.5rem;
1970
3449
  block-size: 1.5rem;
1971
3450
  accent-color: var(--usk-native-primary);
1972
3451
  }
1973
3452
 
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 {
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="bauhaus"]) :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) {
1975
3454
  position: relative;
1976
3455
  display: inline-flex;
1977
3456
  align-items: center;
3457
+ flex: 0 0 auto;
1978
3458
  inline-size: 2.75rem;
1979
3459
  block-size: 1.5rem;
1980
3460
  padding: .18rem;
@@ -1983,7 +3463,7 @@
1983
3463
  border-radius: 999px;
1984
3464
  }
1985
3465
 
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 {
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="bauhaus"]) :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) {
1987
3467
  inline-size: 1rem;
1988
3468
  block-size: 1rem;
1989
3469
  background: var(--usk-native-thumb);
@@ -1992,35 +3472,9 @@
1992
3472
  transition: transform 160ms ease;
1993
3473
  }
1994
3474
 
1995
- .saas-switch:has(input:checked) .saas-switch-track,
1996
- .bento-switch:has(input:checked) .bento-switch-track,
1997
- .max-switch:has(input:checked) .max-switch-track,
1998
- .bau-switch:has(input:checked) .bau-switch-track,
1999
- .tactile-switch:has(input:checked) .tactile-switch-track,
2000
- .neo-switch:has(input:checked) .neo-switch-track,
2001
- .retro-switch:has(input:checked) .retro-switch-track,
2002
- .brutal-switch:has(input:checked) .brutal-switch-track,
2003
- .cyber-switch:has(input:checked) .cyber-switch-track,
2004
- .y2k-switch:has(input:checked) .y2k-switch-track,
2005
- .rg-switch:has(input:checked) .rg-switch-track {
2006
- background: var(--usk-native-track-fill);
2007
- }
2008
-
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
- }
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="bauhaus"]) :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); }
2022
3476
 
2023
- .saas-sr-only, .saas-visually-hidden, .bento-sr-only, .bento-visually-hidden, .max-sr-only, .max-visually-hidden, .bau-sr-only, .bau-visually-hidden, .tactile-sr-only, .tactile-visually-hidden, .neo-sr-only, .neo-visually-hidden, .retro-sr-only, .retro-visually-hidden, .brutal-sr-only, .brutal-visually-hidden, .cyber-sr-only, .cyber-visually-hidden, .y2k-sr-only, .y2k-visually-hidden, .rg-sr-only, .rg-visually-hidden {
3477
+ :where(.luxe-sr-only, .luxe-visually-hidden, .organic-sr-only, .organic-visually-hidden, .utility-sr-only, .utility-visually-hidden, .blueprint-sr-only, .blueprint-visually-hidden, .deco-sr-only, .deco-visually-hidden, .clay-sr-only, .clay-visually-hidden, .terminal-sr-only, .terminal-visually-hidden, .paper-sr-only, .paper-visually-hidden, .noir-sr-only, .noir-visually-hidden) {
2024
3478
  position: absolute !important;
2025
3479
  inline-size: 1px !important;
2026
3480
  block-size: 1px !important;
@@ -2032,7 +3486,7 @@
2032
3486
  border: 0 !important;
2033
3487
  }
2034
3488
 
2035
- .saas-skip-link, .bento-skip-link, .max-skip-link, .bau-skip-link, .tactile-skip-link, .neo-skip-link, .retro-skip-link, .brutal-skip-link, .cyber-skip-link, .y2k-skip-link, .rg-skip-link {
3489
+ :where(.luxe-skip-link, .organic-skip-link, .utility-skip-link, .blueprint-skip-link, .deco-skip-link, .clay-skip-link, .terminal-skip-link, .paper-skip-link, .noir-skip-link) {
2036
3490
  position: absolute;
2037
3491
  inset-block-start: .75rem;
2038
3492
  inset-inline-start: .75rem;
@@ -2044,10 +3498,9 @@
2044
3498
  transform: translateY(calc(-100% - 1rem));
2045
3499
  }
2046
3500
 
2047
- .saas-skip-link:focus-visible, .bento-skip-link:focus-visible, .max-skip-link:focus-visible, .bau-skip-link:focus-visible, .tactile-skip-link:focus-visible, .neo-skip-link:focus-visible, .retro-skip-link:focus-visible, .brutal-skip-link:focus-visible, .cyber-skip-link:focus-visible, .y2k-skip-link:focus-visible, .rg-skip-link:focus-visible {
2048
- transform: translateY(0);
2049
- }
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); }
2050
3502
  }
3503
+ /* END GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
2051
3504
 
2052
3505
 
2053
3506
  /* styles/bauhaus.css (visual paint) */
@@ -2077,6 +3530,8 @@
2077
3530
  }
2078
3531
 
2079
3532
  [data-ui="bauhaus"][data-mode="light"] {
3533
+ --lightningcss-light: initial;
3534
+ --lightningcss-dark: ;
2080
3535
  color-scheme: light;
2081
3536
  --bau-panel-alpha: .98;
2082
3537
  --bau-panel-soft-alpha: .78;
@@ -2086,6 +3541,8 @@
2086
3541
  }
2087
3542
 
2088
3543
  [data-ui="bauhaus"][data-mode="dark"] {
3544
+ --lightningcss-light: ;
3545
+ --lightningcss-dark: initial;
2089
3546
  color-scheme: dark;
2090
3547
  --bau-panel-alpha: .92;
2091
3548
  --bau-panel-soft-alpha: .64;
@@ -2095,6 +3552,8 @@
2095
3552
  }
2096
3553
 
2097
3554
  [data-ui="bauhaus"][data-mode="contrast"] {
3555
+ --lightningcss-light: ;
3556
+ --lightningcss-dark: initial;
2098
3557
  color-scheme: dark;
2099
3558
  --bau-panel-alpha: 1;
2100
3559
  --bau-panel-soft-alpha: .92;
@@ -2165,7 +3624,7 @@
2165
3624
  --bau-fg: var(--bau-text);
2166
3625
  --bau-surface-fg: var(--bau-text);
2167
3626
  --bau-muted: var(--bau-text-muted);
2168
- --bau-border: rgb(var(--bau-border-rgb) / var(--bau-border-alpha));
3627
+ --bau-border: rgb(var(--bau-border-rgb) / max(var(--bau-border-alpha), var(--usk-border-min-alpha)));
2169
3628
  --bau-control-fg: var(--bau-text);
2170
3629
  --bau-primary: rgb(var(--bau-primary-rgb));
2171
3630
  --bau-primary-hover: rgb(var(--bau-primary-hover-rgb));
@@ -2195,6 +3654,12 @@
2195
3654
  --bau-spinner-accent: var(--bau-accent);
2196
3655
  }
2197
3656
 
3657
+ @supports (color: color-mix(in srgb,black,white)) {
3658
+ [data-ui="bauhaus"][data-theme][data-mode] {
3659
+ --bau-border: color-mix(in srgb, rgb(var(--bau-border-rgb) / max(var(--bau-border-alpha), var(--usk-border-min-alpha))), var(--bau-text) var(--usk-border-text-mix));
3660
+ }
3661
+ }
3662
+
2198
3663
  [data-ui="bauhaus"] {
2199
3664
  background: linear-gradient(90deg,rgb(var(--bau-border-rgb)/.08) 1px,transparent 1px),linear-gradient(rgb(var(--bau-border-rgb)/.08) 1px,transparent 1px),var(--bau-bg);
2200
3665
  color: var(--bau-text);
@@ -2215,7 +3680,7 @@
2215
3680
  background-size: var(--bau-theme-bg-size);
2216
3681
  }
2217
3682
 
2218
- .bau-title, .bau-heading, .bau-kicker, .bau-button, .bau-badge, .bau-nav-link {
3683
+ .bau-title, .bau-heading, .bau-kicker, .bau-button, .bau-badge, .bau-nav-link, :where([data-ui="bauhaus"]) .ui-button, :where([data-ui="bauhaus"]) .ui-badge, :where([data-ui="bauhaus"]) .ui-nav-link {
2219
3684
  font-family: var(--bau-font-heading);
2220
3685
  }
2221
3686
 
@@ -2262,7 +3727,7 @@
2262
3727
  height: 2px;
2263
3728
  }
2264
3729
 
2265
- .bau-surface, .bau-card, .bau-panel, .bau-toolbar, .bau-table-wrap {
3730
+ .bau-surface, .bau-card, .bau-panel, .bau-toolbar, .bau-table-wrap, :where([data-ui="bauhaus"]) .ui-card, :where([data-ui="bauhaus"]) .ui-toolbar, :where([data-ui="bauhaus"]) .ui-table-wrap {
2266
3731
  background: linear-gradient(90deg,rgb(var(--bau-primary-rgb)/.1)0 .5rem,transparent .5rem),var(--bau-surface);
2267
3732
  color: var(--bau-text);
2268
3733
  border: 2px solid var(--bau-border);
@@ -2272,11 +3737,11 @@
2272
3737
  position: relative;
2273
3738
  }
2274
3739
 
2275
- .bau-card, .bau-panel {
3740
+ .bau-card, .bau-panel, :where([data-ui="bauhaus"]) .ui-card {
2276
3741
  padding: var(--bau-space-6);
2277
3742
  }
2278
3743
 
2279
- .bau-toolbar {
3744
+ .bau-toolbar, :where([data-ui="bauhaus"]) .ui-toolbar {
2280
3745
  justify-content: space-between;
2281
3746
  align-items: center;
2282
3747
  gap: var(--bau-space-4);
@@ -2309,7 +3774,7 @@
2309
3774
  transform: translate(-3px, -3px);
2310
3775
  }
2311
3776
 
2312
- .bau-button, .bau-icon-button {
3777
+ .bau-button, .bau-icon-button, :where([data-ui="bauhaus"]) .ui-button, :where([data-ui="bauhaus"]) .ui-icon-button {
2313
3778
  appearance: none;
2314
3779
  justify-content: center;
2315
3780
  align-items: center;
@@ -2323,7 +3788,6 @@
2323
3788
  font: inherit;
2324
3789
  cursor: pointer;
2325
3790
  -webkit-user-select: none;
2326
- -moz-user-select: none;
2327
3791
  user-select: none;
2328
3792
  transition: color var(--bau-transition-fast),background var(--bau-transition-fast),border-color var(--bau-transition-fast),box-shadow var(--bau-transition-fast),transform var(--bau-transition-fast);
2329
3793
  padding: .75rem 1.1rem;
@@ -2333,87 +3797,87 @@
2333
3797
  display: inline-flex;
2334
3798
  }
2335
3799
 
2336
- .bau-button:hover, .bau-icon-button:hover {
3800
+ .bau-button:hover, .bau-icon-button:hover, :where([data-ui="bauhaus"]) .ui-button:hover, :where([data-ui="bauhaus"]) .ui-icon-button:hover {
2337
3801
  border-color: var(--bau-primary);
2338
3802
  transform: translateY(-1px);
2339
3803
  }
2340
3804
 
2341
- .bau-button:active, .bau-icon-button:active, .bau-button[aria-pressed="true"], .bau-icon-button[aria-pressed="true"], .bau-button.is-active, .bau-icon-button.is-active {
3805
+ .bau-button:active, .bau-icon-button:active, .bau-button[aria-pressed="true"], .bau-icon-button[aria-pressed="true"], .bau-button.is-active, .bau-icon-button.is-active, :where([data-ui="bauhaus"]) .ui-button:active, :where([data-ui="bauhaus"]) .ui-icon-button:active, :where([data-ui="bauhaus"]) .ui-button[aria-pressed="true"], :where([data-ui="bauhaus"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="bauhaus"]) .ui-button.is-active, :where([data-ui="bauhaus"]) .ui-icon-button.is-active {
2342
3806
  transform: translateY(1px);
2343
3807
  box-shadow: inset 0 3px 10px #0000002e;
2344
3808
  }
2345
3809
 
2346
- .bau-button-primary {
3810
+ .bau-button-primary, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="primary"]) {
2347
3811
  background: var(--bau-primary);
2348
3812
  color: var(--bau-on-primary);
2349
3813
  border-color: var(--bau-primary);
2350
3814
  }
2351
3815
 
2352
- .bau-button-primary:hover {
3816
+ .bau-button-primary:hover, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="primary"]):hover {
2353
3817
  background: var(--bau-primary-hover);
2354
3818
  border-color: var(--bau-primary-hover);
2355
3819
  }
2356
3820
 
2357
- .bau-button-secondary {
3821
+ .bau-button-secondary, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="secondary"]) {
2358
3822
  background: var(--bau-secondary);
2359
3823
  color: var(--bau-on-secondary);
2360
3824
  border-color: var(--bau-secondary);
2361
3825
  }
2362
3826
 
2363
- .bau-button-secondary:hover {
3827
+ .bau-button-secondary:hover, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="secondary"]):hover {
2364
3828
  background: var(--bau-secondary-hover);
2365
3829
  border-color: var(--bau-secondary-hover);
2366
3830
  }
2367
3831
 
2368
- .bau-button-danger {
3832
+ .bau-button-danger, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="danger"]) {
2369
3833
  background: var(--bau-danger);
2370
3834
  color: var(--bau-on-danger);
2371
3835
  border-color: var(--bau-danger);
2372
3836
  }
2373
3837
 
2374
- .bau-button-ghost {
3838
+ .bau-button-ghost, :where([data-ui="bauhaus"]) .ui-button:where([data-ui-variant="ghost"]) {
2375
3839
  color: var(--bau-text);
2376
3840
  box-shadow: none;
2377
3841
  background: none;
2378
3842
  }
2379
3843
 
2380
- .bau-icon-button {
3844
+ .bau-icon-button, :where([data-ui="bauhaus"]) .ui-icon-button {
2381
3845
  border-radius: var(--bau-radius-pill);
2382
3846
  width: 2.75rem;
2383
3847
  padding: 0;
2384
3848
  }
2385
3849
 
2386
- .bau-button:disabled, .bau-icon-button:disabled, .bau-disabled {
3850
+ .bau-button:disabled, .bau-icon-button:disabled, .bau-disabled, :where([data-ui="bauhaus"]) .ui-button:disabled, :where([data-ui="bauhaus"]) .ui-icon-button:disabled {
2387
3851
  opacity: .55;
2388
3852
  cursor: not-allowed;
2389
3853
  transform: none;
2390
3854
  }
2391
3855
 
2392
- .bau-card, .bau-panel {
3856
+ .bau-card, .bau-panel, :where([data-ui="bauhaus"]) .ui-card {
2393
3857
  background: var(--bau-card-bg);
2394
3858
  }
2395
3859
 
2396
- .bau-toolbar, .bau-table-wrap, .bau-button:not(.bau-button-primary):not(.bau-button-secondary):not(.bau-button-danger):not(.bau-button-ghost), .bau-icon-button {
3860
+ .bau-toolbar, .bau-table-wrap, .bau-button:not(.bau-button-primary):not(.bau-button-secondary):not(.bau-button-danger):not(.bau-button-ghost), .bau-icon-button, :where([data-ui="bauhaus"]) .ui-toolbar, :where([data-ui="bauhaus"]) .ui-table-wrap, :where([data-ui="bauhaus"]) .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="bauhaus"]) .ui-icon-button {
2397
3861
  background: var(--bau-control-bg);
2398
3862
  }
2399
3863
 
2400
- .bau-button, .bau-icon-button, .bau-badge, .bau-nav-link {
3864
+ .bau-button, .bau-icon-button, .bau-badge, .bau-nav-link, :where([data-ui="bauhaus"]) .ui-button, :where([data-ui="bauhaus"]) .ui-icon-button, :where([data-ui="bauhaus"]) .ui-badge, :where([data-ui="bauhaus"]) .ui-nav-link {
2401
3865
  font-family: var(--bau-font-control);
2402
3866
  }
2403
3867
 
2404
- .bau-field {
3868
+ .bau-field, :where([data-ui="bauhaus"]) .ui-field {
2405
3869
  gap: var(--bau-space-2);
2406
3870
  flex-direction: column;
2407
3871
  display: flex;
2408
3872
  }
2409
3873
 
2410
- .bau-label {
3874
+ .bau-label, :where([data-ui="bauhaus"]) .ui-label {
2411
3875
  color: var(--bau-text);
2412
3876
  font-size: .925rem;
2413
3877
  font-weight: 800;
2414
3878
  }
2415
3879
 
2416
- .bau-input, .bau-textarea, .bau-select {
3880
+ .bau-input, .bau-textarea, .bau-select, :where([data-ui="bauhaus"]) .ui-input, :where([data-ui="bauhaus"]) .ui-textarea, :where([data-ui="bauhaus"]) .ui-select {
2417
3881
  background: var(--bau-surface-soft);
2418
3882
  width: 100%;
2419
3883
  min-height: 2.875rem;
@@ -2426,32 +3890,32 @@
2426
3890
  padding: .75rem 1rem;
2427
3891
  }
2428
3892
 
2429
- .bau-textarea {
3893
+ .bau-textarea, :where([data-ui="bauhaus"]) .ui-textarea {
2430
3894
  resize: vertical;
2431
3895
  min-height: 8rem;
2432
3896
  }
2433
3897
 
2434
- .bau-input::placeholder, .bau-textarea::placeholder {
3898
+ .bau-input::placeholder, .bau-textarea::placeholder, :where([data-ui="bauhaus"]) .ui-input::placeholder, :where([data-ui="bauhaus"]) .ui-textarea::placeholder {
2435
3899
  color: var(--bau-text-muted);
2436
3900
  opacity: .82;
2437
3901
  }
2438
3902
 
2439
- .bau-input:hover, .bau-textarea:hover, .bau-select:hover {
3903
+ .bau-input:hover, .bau-textarea:hover, .bau-select:hover, :where([data-ui="bauhaus"]) .ui-input:hover, :where([data-ui="bauhaus"]) .ui-textarea:hover, :where([data-ui="bauhaus"]) .ui-select:hover {
2440
3904
  border-color: rgb(var(--bau-primary-rgb)/.58);
2441
3905
  }
2442
3906
 
2443
- .bau-input:focus, .bau-textarea:focus, .bau-select:focus {
3907
+ .bau-input:focus, .bau-textarea:focus, .bau-select:focus, :where([data-ui="bauhaus"]) .ui-input:focus, :where([data-ui="bauhaus"]) .ui-textarea:focus, :where([data-ui="bauhaus"]) .ui-select:focus {
2444
3908
  border-color: var(--bau-focus);
2445
3909
  box-shadow: var(--bau-focus-ring);
2446
3910
  }
2447
3911
 
2448
- .bau-help-text {
3912
+ .bau-help-text, :where([data-ui="bauhaus"]) .ui-help-text {
2449
3913
  color: var(--bau-text-muted);
2450
3914
  font-size: .875rem;
2451
3915
  line-height: 1.45;
2452
3916
  }
2453
3917
 
2454
- .bau-check, .bau-radio {
3918
+ .bau-check, .bau-radio, :where([data-ui="bauhaus"]) .ui-check, :where([data-ui="bauhaus"]) .ui-radio {
2455
3919
  align-items: center;
2456
3920
  gap: var(--bau-space-2);
2457
3921
  color: var(--bau-text);
@@ -2459,13 +3923,13 @@
2459
3923
  display: inline-flex;
2460
3924
  }
2461
3925
 
2462
- .bau-check input, .bau-radio input {
3926
+ .bau-check input, .bau-radio input, :where([data-ui="bauhaus"]) .ui-check input, :where([data-ui="bauhaus"]) .ui-radio input {
2463
3927
  opacity: 0;
2464
3928
  pointer-events: none;
2465
3929
  position: absolute;
2466
3930
  }
2467
3931
 
2468
- .bau-check-control, .bau-radio-control {
3932
+ .bau-check-control, .bau-radio-control, :where([data-ui="bauhaus"]) .ui-check-control, :where([data-ui="bauhaus"]) .ui-radio-control {
2469
3933
  background: var(--bau-surface-soft);
2470
3934
  border: 2px solid var(--bau-border);
2471
3935
  width: 1.35rem;
@@ -2475,28 +3939,28 @@
2475
3939
  display: inline-grid;
2476
3940
  }
2477
3941
 
2478
- .bau-check-control {
3942
+ .bau-check-control, :where([data-ui="bauhaus"]) .ui-check-control {
2479
3943
  border-radius: var(--bau-radius-xs);
2480
3944
  }
2481
3945
 
2482
- .bau-radio-control {
3946
+ .bau-radio-control, :where([data-ui="bauhaus"]) .ui-radio-control {
2483
3947
  border-radius: 50%;
2484
3948
  }
2485
3949
 
2486
- .bau-check input:checked + .bau-check-control, .bau-radio input:checked + .bau-radio-control {
3950
+ .bau-check input:checked + .bau-check-control, .bau-radio input:checked + .bau-radio-control, :where([data-ui="bauhaus"]) .ui-check input:checked+.ui-check-control, :where([data-ui="bauhaus"]) .ui-radio input:checked+.ui-radio-control {
2487
3951
  background: var(--bau-primary);
2488
3952
  border-color: var(--bau-primary);
2489
3953
  box-shadow: var(--bau-focus-ring);
2490
3954
  }
2491
3955
 
2492
- .bau-check input:checked + .bau-check-control:after {
3956
+ .bau-check input:checked + .bau-check-control:after, :where([data-ui="bauhaus"]) .ui-check input:checked+.ui-check-control:after {
2493
3957
  content: "✓";
2494
3958
  color: var(--bau-on-primary);
2495
3959
  font-size: .9rem;
2496
3960
  font-weight: 900;
2497
3961
  }
2498
3962
 
2499
- .bau-radio input:checked + .bau-radio-control:after {
3963
+ .bau-radio input:checked + .bau-radio-control:after, :where([data-ui="bauhaus"]) .ui-radio input:checked+.ui-radio-control:after {
2500
3964
  content: "";
2501
3965
  background: var(--bau-on-primary);
2502
3966
  border-radius: 50%;
@@ -2504,7 +3968,7 @@
2504
3968
  height: .55rem;
2505
3969
  }
2506
3970
 
2507
- .bau-switch {
3971
+ .bau-switch, :where([data-ui="bauhaus"]) .ui-switch {
2508
3972
  align-items: center;
2509
3973
  gap: var(--bau-space-3);
2510
3974
  color: var(--bau-text);
@@ -2512,13 +3976,13 @@
2512
3976
  display: inline-flex;
2513
3977
  }
2514
3978
 
2515
- .bau-switch input {
3979
+ .bau-switch input, :where([data-ui="bauhaus"]) .ui-switch input {
2516
3980
  opacity: 0;
2517
3981
  pointer-events: none;
2518
3982
  position: absolute;
2519
3983
  }
2520
3984
 
2521
- .bau-switch-track {
3985
+ .bau-switch-track, :where([data-ui="bauhaus"]) .ui-switch-track {
2522
3986
  background: var(--bau-surface-soft);
2523
3987
  border: 2px solid var(--bau-border);
2524
3988
  border-radius: var(--bau-radius-pill);
@@ -2528,7 +3992,7 @@
2528
3992
  position: relative;
2529
3993
  }
2530
3994
 
2531
- .bau-switch-thumb {
3995
+ .bau-switch-thumb, :where([data-ui="bauhaus"]) .ui-switch-thumb {
2532
3996
  background: var(--bau-surface-strong);
2533
3997
  border: 2px solid var(--bau-border);
2534
3998
  width: 1.34rem;
@@ -2541,17 +4005,17 @@
2541
4005
  left: .22rem;
2542
4006
  }
2543
4007
 
2544
- .bau-switch input:checked + .bau-switch-track {
4008
+ .bau-switch input:checked + .bau-switch-track, :where([data-ui="bauhaus"]) .ui-switch input:checked+.ui-switch-track {
2545
4009
  background: var(--bau-primary);
2546
4010
  border-color: var(--bau-primary);
2547
4011
  }
2548
4012
 
2549
- .bau-switch input:checked + .bau-switch-track .bau-switch-thumb {
4013
+ .bau-switch input:checked + .bau-switch-track .bau-switch-thumb, :where([data-ui="bauhaus"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
2550
4014
  background: var(--bau-on-primary);
2551
4015
  left: calc(100% - 1.56rem);
2552
4016
  }
2553
4017
 
2554
- .bau-badge {
4018
+ .bau-badge, :where([data-ui="bauhaus"]) .ui-badge {
2555
4019
  align-items: center;
2556
4020
  gap: var(--bau-space-1);
2557
4021
  background: var(--bau-surface-soft);
@@ -2566,37 +4030,37 @@
2566
4030
  display: inline-flex;
2567
4031
  }
2568
4032
 
2569
- .bau-badge-primary {
4033
+ .bau-badge-primary, :where([data-ui="bauhaus"]) .ui-badge:where([data-ui-variant="primary"]) {
2570
4034
  background: var(--bau-primary);
2571
4035
  color: var(--bau-on-primary);
2572
4036
  border-color: var(--bau-primary);
2573
4037
  }
2574
4038
 
2575
- .bau-badge-secondary {
4039
+ .bau-badge-secondary, :where([data-ui="bauhaus"]) .ui-badge:where([data-ui-variant="secondary"]) {
2576
4040
  background: var(--bau-secondary);
2577
4041
  color: var(--bau-on-secondary);
2578
4042
  border-color: var(--bau-secondary);
2579
4043
  }
2580
4044
 
2581
- .bau-badge-success {
4045
+ .bau-badge-success, :where([data-ui="bauhaus"]) .ui-badge:where([data-ui-variant="success"]) {
2582
4046
  background: var(--bau-success);
2583
4047
  color: var(--bau-on-success);
2584
4048
  border-color: var(--bau-success);
2585
4049
  }
2586
4050
 
2587
- .bau-badge-warning {
4051
+ .bau-badge-warning, :where([data-ui="bauhaus"]) .ui-badge:where([data-ui-variant="warning"]) {
2588
4052
  background: var(--bau-warning);
2589
4053
  color: var(--bau-on-warning);
2590
4054
  border-color: var(--bau-warning);
2591
4055
  }
2592
4056
 
2593
- .bau-badge-danger {
4057
+ .bau-badge-danger, :where([data-ui="bauhaus"]) .ui-badge:where([data-ui-variant="danger"]) {
2594
4058
  background: var(--bau-danger);
2595
4059
  color: var(--bau-on-danger);
2596
4060
  border-color: var(--bau-danger);
2597
4061
  }
2598
4062
 
2599
- .bau-nav {
4063
+ .bau-nav, :where([data-ui="bauhaus"]) .ui-nav {
2600
4064
  align-items: center;
2601
4065
  gap: var(--bau-space-2);
2602
4066
  padding: var(--bau-space-2);
@@ -2608,7 +4072,7 @@
2608
4072
  display: flex;
2609
4073
  }
2610
4074
 
2611
- .bau-nav-link {
4075
+ .bau-nav-link, :where([data-ui="bauhaus"]) .ui-nav-link {
2612
4076
  min-height: 2.5rem;
2613
4077
  color: var(--bau-text-muted);
2614
4078
  border-radius: var(--bau-radius-pill);
@@ -2621,12 +4085,12 @@
2621
4085
  display: inline-flex;
2622
4086
  }
2623
4087
 
2624
- .bau-nav-link:hover {
4088
+ .bau-nav-link:hover, :where([data-ui="bauhaus"]) .ui-nav-link:hover {
2625
4089
  color: var(--bau-text);
2626
4090
  background: var(--bau-surface-soft);
2627
4091
  }
2628
4092
 
2629
- .bau-nav-link[aria-current="page"], .bau-nav-link.is-active {
4093
+ .bau-nav-link[aria-current="page"], .bau-nav-link.is-active, :where([data-ui="bauhaus"]) .ui-nav-link[aria-current="page"], :where([data-ui="bauhaus"]) .ui-nav-link.is-active {
2630
4094
  color: var(--bau-on-primary);
2631
4095
  background: var(--bau-primary);
2632
4096
  }
@@ -2657,7 +4121,7 @@
2657
4121
  transform: rotate(45deg);
2658
4122
  }
2659
4123
 
2660
- .bau-progress {
4124
+ .bau-progress, :where([data-ui="bauhaus"]) .ui-progress {
2661
4125
  background: var(--bau-surface-soft);
2662
4126
  border: 2px solid var(--bau-border);
2663
4127
  border-radius: var(--bau-radius-pill);
@@ -2666,14 +4130,14 @@
2666
4130
  overflow: hidden;
2667
4131
  }
2668
4132
 
2669
- .bau-progress-bar {
4133
+ .bau-progress-bar, :where([data-ui="bauhaus"]) .ui-progress-bar {
2670
4134
  height: 100%;
2671
4135
  width: var(--bau-progress-value, 50%);
2672
4136
  background: linear-gradient(90deg,var(--bau-primary),var(--bau-accent));
2673
4137
  border-radius: inherit;
2674
4138
  }
2675
4139
 
2676
- .bau-alert {
4140
+ .bau-alert, :where([data-ui="bauhaus"]) .ui-alert {
2677
4141
  gap: var(--bau-space-2);
2678
4142
  padding: var(--bau-space-4);
2679
4143
  background: var(--bau-surface);
@@ -2684,45 +4148,45 @@
2684
4148
  display: grid;
2685
4149
  }
2686
4150
 
2687
- .bau-alert-success {
4151
+ .bau-alert-success, :where([data-ui="bauhaus"]) .ui-alert:where([data-ui-variant="success"]) {
2688
4152
  border-left-color: var(--bau-success);
2689
4153
  }
2690
4154
 
2691
- .bau-alert-warning {
4155
+ .bau-alert-warning, :where([data-ui="bauhaus"]) .ui-alert:where([data-ui-variant="warning"]) {
2692
4156
  border-left-color: var(--bau-warning);
2693
4157
  }
2694
4158
 
2695
- .bau-alert-danger {
4159
+ .bau-alert-danger, :where([data-ui="bauhaus"]) .ui-alert:where([data-ui-variant="danger"]) {
2696
4160
  border-left-color: var(--bau-danger);
2697
4161
  }
2698
4162
 
2699
- .bau-alert-title {
4163
+ .bau-alert-title, :where([data-ui="bauhaus"]) .ui-alert-title {
2700
4164
  margin: 0;
2701
4165
  font-weight: 900;
2702
4166
  }
2703
4167
 
2704
- .bau-alert-body {
4168
+ .bau-alert-body, :where([data-ui="bauhaus"]) .ui-alert-body {
2705
4169
  color: var(--bau-text-muted);
2706
4170
  margin: 0;
2707
4171
  line-height: 1.55;
2708
4172
  }
2709
4173
 
2710
- .bau-table-wrap {
4174
+ .bau-table-wrap, :where([data-ui="bauhaus"]) .ui-table-wrap {
2711
4175
  overflow: auto;
2712
4176
  }
2713
4177
 
2714
- .bau-table {
4178
+ .bau-table, :where([data-ui="bauhaus"]) .ui-table {
2715
4179
  border-collapse: collapse;
2716
4180
  width: 100%;
2717
4181
  }
2718
4182
 
2719
- .bau-table th, .bau-table td {
4183
+ .bau-table th, .bau-table td, :where([data-ui="bauhaus"]) .ui-table th, :where([data-ui="bauhaus"]) .ui-table td {
2720
4184
  text-align: left;
2721
4185
  border-bottom: 2px solid var(--bau-border);
2722
4186
  padding: .95rem 1rem;
2723
4187
  }
2724
4188
 
2725
- .bau-table th {
4189
+ .bau-table th, :where([data-ui="bauhaus"]) .ui-table th {
2726
4190
  color: var(--bau-text);
2727
4191
  text-transform: uppercase;
2728
4192
  letter-spacing: .08em;
@@ -2731,11 +4195,11 @@
2731
4195
  font-weight: 900;
2732
4196
  }
2733
4197
 
2734
- .bau-table td {
4198
+ .bau-table td, :where([data-ui="bauhaus"]) .ui-table td {
2735
4199
  color: var(--bau-text-muted);
2736
4200
  }
2737
4201
 
2738
- .bau-table tr:hover td {
4202
+ .bau-table tr:hover td, :where([data-ui="bauhaus"]) .ui-table tr:hover td {
2739
4203
  background: rgb(var(--bau-primary-rgb)/.045);
2740
4204
  }
2741
4205
 
@@ -2881,12 +4345,12 @@
2881
4345
  inline-size: 3rem;
2882
4346
  }
2883
4347
 
2884
- .bau-button[aria-busy="true"], .bau-icon-button[aria-busy="true"], [data-ui="bauhaus"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
4348
+ .bau-button[aria-busy="true"], .bau-icon-button[aria-busy="true"], [data-ui="bauhaus"] :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="bauhaus"]) .ui-button[aria-busy="true"], :where([data-ui="bauhaus"]) .ui-icon-button[aria-busy="true"] {
2885
4349
  cursor: progress;
2886
4350
  gap: .55rem;
2887
4351
  }
2888
4352
 
2889
- .bau-button[aria-busy="true"]:after, .bau-icon-button[aria-busy="true"]:after, [data-ui="bauhaus"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after {
4353
+ .bau-button[aria-busy="true"]:after, .bau-icon-button[aria-busy="true"]:after, [data-ui="bauhaus"] :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="bauhaus"]) .ui-button[aria-busy="true"]:after, :where([data-ui="bauhaus"]) .ui-icon-button[aria-busy="true"]:after {
2890
4354
  content: "";
2891
4355
  border: .16em solid rgb(var(--bau-primary-text-rgb)/.42);
2892
4356
  border-block-start-color: currentColor;
@@ -2903,6 +4367,287 @@
2903
4367
  }
2904
4368
  }
2905
4369
 
4370
+ .bau-card-media {
4371
+ aspect-ratio: 16 / 9;
4372
+ object-fit: cover;
4373
+ border: 1px solid rgb(var(--bau-border-rgb)/.72);
4374
+ border-radius: var(--bau-radius-lg);
4375
+ inline-size: 100%;
4376
+ display: block;
4377
+ }
4378
+
4379
+ .bau-card-service {
4380
+ gap: var(--bau-space-3);
4381
+ text-align: center;
4382
+ align-content: start;
4383
+ display: grid;
4384
+ position: relative;
4385
+ overflow: visible;
4386
+ }
4387
+
4388
+ .bau-card-service > .bau-icon-medallion {
4389
+ z-index: 2;
4390
+ justify-self: center;
4391
+ margin-block-start: -2.15rem;
4392
+ position: relative;
4393
+ }
4394
+
4395
+ .bau-card-service > .bau-card-media + .bau-icon-medallion {
4396
+ margin-block-start: -2.15rem;
4397
+ }
4398
+
4399
+ .bau-card-feature {
4400
+ gap: var(--bau-space-4);
4401
+ grid-template-columns: auto minmax(0, 1fr);
4402
+ align-items: start;
4403
+ display: grid;
4404
+ }
4405
+
4406
+ .bau-card-accent-edge {
4407
+ border-inline-start: .35rem solid var(--bau-primary);
4408
+ }
4409
+
4410
+ .bau-icon-medallion {
4411
+ background: var(--bau-primary);
4412
+ block-size: 3.75rem;
4413
+ inline-size: 3.75rem;
4414
+ color: var(--bau-on-primary);
4415
+ border: 2px solid rgb(var(--bau-border-rgb)/.82);
4416
+ border-radius: 50%;
4417
+ flex: none;
4418
+ place-items: center;
4419
+ padding: .7rem;
4420
+ line-height: 1;
4421
+ display: inline-grid;
4422
+ }
4423
+
4424
+ .bau-icon-medallion > :where(svg, img) {
4425
+ object-fit: contain;
4426
+ block-size: 100%;
4427
+ inline-size: 100%;
4428
+ }
4429
+
4430
+ .bau-button.bau-button-cut, .bau-button-cut, :where([data-ui="bauhaus"]) .ui-button.bau-button-cut {
4431
+ clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
4432
+ border-radius: 0;
4433
+ }
4434
+
4435
+ .bau-button.bau-button-cut:focus-visible, .bau-button-cut:focus-visible, :where([data-ui="bauhaus"]) .ui-button.bau-button-cut:focus-visible {
4436
+ outline-offset: -3px;
4437
+ }
4438
+
4439
+ .bau-button.bau-button-outline-heavy, .bau-button-outline-heavy, :where([data-ui="bauhaus"]) .ui-button.bau-button-outline-heavy {
4440
+ color: var(--bau-primary);
4441
+ border-style: solid;
4442
+ border-width: 2px;
4443
+ border-color: var(--bau-primary);
4444
+ box-shadow: none;
4445
+ background: none;
4446
+ }
4447
+
4448
+ .bau-button.bau-button-outline-heavy:hover, .bau-button-outline-heavy:hover, :where([data-ui="bauhaus"]) .ui-button.bau-button-outline-heavy:hover {
4449
+ background: var(--bau-primary);
4450
+ color: var(--bau-on-primary);
4451
+ border-color: var(--bau-primary-hover);
4452
+ }
4453
+
4454
+ .bau-badge-seal {
4455
+ aspect-ratio: 1;
4456
+ background: var(--bau-surface-strong);
4457
+ inline-size: 5rem;
4458
+ min-inline-size: 5rem;
4459
+ color: var(--bau-text);
4460
+ border: 2px solid var(--bau-primary);
4461
+ text-align: center;
4462
+ font-family: var(--bau-font-heading);
4463
+ letter-spacing: .04em;
4464
+ border-radius: 50%;
4465
+ align-content: center;
4466
+ place-items: center;
4467
+ padding: .65rem;
4468
+ font-size: .72rem;
4469
+ font-weight: 900;
4470
+ line-height: 1.05;
4471
+ display: inline-grid;
4472
+ }
4473
+
4474
+ .bau-feature-strip {
4475
+ background: var(--bau-card-bg);
4476
+ color: var(--bau-text);
4477
+ border: 1px solid var(--bau-border);
4478
+ border-radius: var(--bau-radius-lg);
4479
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4480
+ display: grid;
4481
+ overflow: hidden;
4482
+ }
4483
+
4484
+ .bau-feature-item {
4485
+ align-items: center;
4486
+ gap: var(--bau-space-3);
4487
+ min-inline-size: 0;
4488
+ padding: var(--bau-space-4);
4489
+ border-inline-end: 1px solid rgb(var(--bau-border-rgb)/.62);
4490
+ grid-template-columns: auto minmax(0, 1fr);
4491
+ display: grid;
4492
+ }
4493
+
4494
+ .bau-feature-item:last-child {
4495
+ border-inline-end: 0;
4496
+ }
4497
+
4498
+ .bau-feature-item > :where(p, small) {
4499
+ color: var(--bau-text-muted);
4500
+ margin: 0;
4501
+ }
4502
+
4503
+ .bau-callout-bar {
4504
+ align-items: center;
4505
+ gap: var(--bau-space-4);
4506
+ padding: var(--bau-space-4) var(--bau-space-5);
4507
+ background: var(--bau-card-bg);
4508
+ color: var(--bau-text);
4509
+ border: 1px solid var(--bau-border);
4510
+ border-radius: var(--bau-radius-lg);
4511
+ grid-template-columns: auto minmax(0, 1fr) auto;
4512
+ display: grid;
4513
+ }
4514
+
4515
+ .bau-callout-bar > :where(p, div) {
4516
+ min-inline-size: 0;
4517
+ }
4518
+
4519
+ .bau-callout-bar > :where(.bau-button, a, button):last-child, :where([data-ui="bauhaus"]) .bau-callout-bar>:where(.ui-button,a,button):last-child {
4520
+ justify-self: end;
4521
+ }
4522
+
4523
+ .bau-eyebrow {
4524
+ color: var(--bau-primary);
4525
+ font-family: var(--bau-font-heading);
4526
+ letter-spacing: .14em;
4527
+ text-transform: uppercase;
4528
+ margin: 0;
4529
+ font-size: .76rem;
4530
+ font-weight: 900;
4531
+ line-height: 1.2;
4532
+ }
4533
+
4534
+ .bau-media-scrim {
4535
+ isolation: isolate;
4536
+ background: var(--bau-surface-soft);
4537
+ border: 1px solid var(--bau-border);
4538
+ border-radius: var(--bau-radius-lg);
4539
+ min-block-size: 12rem;
4540
+ position: relative;
4541
+ overflow: hidden;
4542
+ }
4543
+
4544
+ .bau-media-scrim > :where(img, picture, video) {
4545
+ block-size: 100%;
4546
+ inline-size: 100%;
4547
+ min-block-size: inherit;
4548
+ object-fit: cover;
4549
+ display: block;
4550
+ }
4551
+
4552
+ .bau-media-scrim > :where(figcaption, [data-media-caption]) {
4553
+ z-index: 1;
4554
+ color: #fff;
4555
+ background: linear-gradient(to top, #000000e6, #00000094 56%, #0000);
4556
+ padding: clamp(1rem, 4vw, 2rem);
4557
+ position: absolute;
4558
+ inset-block-end: 0;
4559
+ inset-inline: 0;
4560
+ }
4561
+
4562
+ .bau-media-scrim > :where(figcaption, [data-media-caption]) * {
4563
+ color: inherit;
4564
+ }
4565
+
4566
+ @media (max-width: 42rem) {
4567
+ .bau-callout-bar {
4568
+ grid-template-columns: 1fr;
4569
+ align-items: start;
4570
+ }
4571
+
4572
+ .bau-callout-bar > :where(.bau-button, a, button):last-child, :where([data-ui="bauhaus"]) .bau-callout-bar>:where(.ui-button,a,button):last-child {
4573
+ justify-self: stretch;
4574
+ }
4575
+
4576
+ .bau-feature-item {
4577
+ border-inline-end: 0;
4578
+ border-block-end: 1px solid rgb(var(--bau-border-rgb)/.62);
4579
+ }
4580
+
4581
+ .bau-feature-item:last-child {
4582
+ border-block-end: 0;
4583
+ }
4584
+ }
4585
+
4586
+ .bau-card-service, .bau-card-feature, .bau-feature-strip, .bau-callout-bar, .bau-media-scrim {
4587
+ border-width: 2px;
4588
+ border-radius: 0;
4589
+ }
4590
+
4591
+ .bau-icon-medallion, .bau-badge-seal {
4592
+ box-shadow: .3rem .3rem 0 var(--bau-text);
4593
+ border-width: 2px;
4594
+ border-radius: 0;
4595
+ }
4596
+
4597
+ .bau-card-accent-edge {
4598
+ border-inline-start-width: .5rem;
4599
+ }
4600
+
4601
+ .bau-button-cut {
4602
+ clip-path: polygon(.55rem 0, 100% 0, calc(100% - .55rem) 100%, 0 100%);
4603
+ }
4604
+
4605
+ .bau-button.bau-button-cut, .bau-button-cut, :where([data-ui="bauhaus"]) .ui-button.bau-button-cut {
4606
+ clip-path: polygon(.7rem 0, 100% 0, calc(100% - .45rem) 100%, 0 100%);
4607
+ justify-content: center;
4608
+ justify-self: start;
4609
+ inline-size: min(100%, 12rem);
4610
+ min-inline-size: 6rem;
4611
+ max-inline-size: 100%;
4612
+ }
4613
+
4614
+ .bau-button.bau-button-outline-heavy, .bau-button-outline-heavy, :where([data-ui="bauhaus"]) .ui-button.bau-button-outline-heavy {
4615
+ clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 100%, .45rem 100%);
4616
+ box-shadow: inset .32rem 0 0 rgb(var(--bau-primary-rgb)/.24);
4617
+ border-width: 2px;
4618
+ border-radius: 0;
4619
+ }
4620
+
4621
+ .bau-card-service, .bau-media-scrim, .bau-feature-strip, .bau-callout-bar, .bau-well {
4622
+ border: 2px solid var(--bau-border);
4623
+ border-inline-start-width: .48rem;
4624
+ border-inline-start-color: var(--bau-primary);
4625
+ box-shadow: none;
4626
+ border-radius: 0;
4627
+ }
4628
+
4629
+ [data-ui="bauhaus"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4630
+ border: 2px solid var(--bau-primary);
4631
+ box-shadow: .22rem .22rem 0 rgb(var(--bau-text-rgb)/.72);
4632
+ border-radius: 0;
4633
+ }
4634
+
4635
+ [data-ui="bauhaus"][data-theme][data-mode] :where(dialog) {
4636
+ border: 2px solid var(--bau-border);
4637
+ box-shadow: .4rem .4rem 0 rgb(var(--bau-text-rgb)/.32);
4638
+ border-inline-start-width: .48rem;
4639
+ border-radius: 0;
4640
+ }
4641
+
4642
+ .bau-button[aria-busy="true"]:after, .bau-icon-button[aria-busy="true"]:after, [data-ui="bauhaus"] :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="bauhaus"]) .ui-button[aria-busy="true"]:after, :where([data-ui="bauhaus"]) .ui-icon-button[aria-busy="true"]:after {
4643
+ background: conic-gradient(currentColor 0 25%,transparent 0 50%,currentColor 0 75%,transparent 0);
4644
+ box-shadow: none;
4645
+ clip-path: inset(0);
4646
+ border: .12em double;
4647
+ border-radius: 0;
4648
+ animation: .78s steps(4, end) infinite bau-spin;
4649
+ }
4650
+
2906
4651
  @media (prefers-reduced-motion: reduce) {
2907
4652
  [data-ui="bauhaus"] *, [data-ui="bauhaus"] :before, [data-ui="bauhaus"] :after {
2908
4653
  scroll-behavior: auto !important;
@@ -2920,8 +4665,10 @@
2920
4665
  }
2921
4666
 
2922
4667
  @media (forced-colors: active) {
2923
- [data-ui="bauhaus"] * {
2924
- forced-color-adjust: auto;
4668
+ @supports (forced-color-adjust: auto) {
4669
+ [data-ui="bauhaus"] * {
4670
+ forced-color-adjust: auto;
4671
+ }
2925
4672
  }
2926
4673
 
2927
4674
  [data-ui="bauhaus"] :where(:focus-visible) {