ui-style-kit-css 2.2.0 → 2.4.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 (122) hide show
  1. package/CHANGELOG.md +77 -1
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +171 -53
  4. package/STYLE-MAP.md +28 -5
  5. package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
  6. package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
  7. package/dist/assets/bauhaus-barlow.ttf +0 -0
  8. package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
  9. package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
  10. package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
  11. package/dist/assets/bento-manrope-OFL.txt +93 -0
  12. package/dist/assets/bento-manrope.ttf +0 -0
  13. package/dist/assets/clay-grain.png +0 -0
  14. package/dist/assets/clay-rounded-OFL.txt +93 -0
  15. package/dist/assets/clay-rounded.ttf +0 -0
  16. package/dist/assets/neo-noir-corner-dark.png +0 -0
  17. package/dist/assets/neo-noir-corner-light.png +0 -0
  18. package/dist/assets/neo-noir-texture-dark.png +0 -0
  19. package/dist/assets/neo-noir-texture-light.png +0 -0
  20. package/dist/assets/organic-display-OFL.txt +93 -0
  21. package/dist/assets/organic-display.ttf +0 -0
  22. package/dist/assets/organic-icons-LICENSE.txt +21 -0
  23. package/dist/assets/organic-sans-OFL.txt +93 -0
  24. package/dist/assets/organic-sans.ttf +0 -0
  25. package/dist/ui-style-kit.css +55604 -6525
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +55443 -6942
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +55646 -6551
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +7318 -0
  32. package/dist/visual/bauhaus.css +2 -2961
  33. package/dist/visual/bento.css +2 -2980
  34. package/dist/visual/brutalism.css +2679 -352
  35. package/dist/visual/clay.css +5 -0
  36. package/dist/visual/cyberpunk.css +4482 -781
  37. package/dist/visual/data-terminal.css +6182 -0
  38. package/dist/visual/editorial-luxe.css +6450 -0
  39. package/dist/visual/industrial-utility.css +7259 -0
  40. package/dist/visual/maximalist.css +4080 -1025
  41. package/dist/visual/minimal-saas.css +3305 -888
  42. package/dist/visual/neo-noir.css +5 -0
  43. package/dist/visual/neumorphism.css +3582 -975
  44. package/dist/visual/organic-modern.css +5 -0
  45. package/dist/visual/paper-editorial.css +7074 -0
  46. package/dist/visual/retro-glass.css +4426 -760
  47. package/dist/visual/retrofuturism.css +3676 -875
  48. package/dist/visual/tactile.css +4568 -1036
  49. package/dist/visual/technical-blueprint.css +6713 -0
  50. package/dist/visual/y2k.css +3672 -753
  51. package/docs/ART-DECO.md +80 -0
  52. package/docs/BAUHAUS.md +152 -0
  53. package/docs/BENTO.md +121 -0
  54. package/docs/CLAY.md +127 -0
  55. package/docs/DEMO-SHOWCASE.md +65 -0
  56. package/docs/ECOSYSTEM.md +9 -5
  57. package/docs/EDITORIAL-LUX.md +75 -0
  58. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  59. package/docs/NATIVE-ELEMENTS.md +23 -17
  60. package/docs/NEO-NOIR.md +94 -0
  61. package/docs/ORGANIC-MODERN.md +91 -0
  62. package/docs/PAPER-EDITORIAL.md +63 -0
  63. package/docs/PUBLISHING.md +36 -11
  64. package/docs/RELEASE-2.4.0.md +88 -0
  65. package/docs/RETRO-GLASS.md +105 -0
  66. package/docs/STYLE-GUIDE.md +68 -13
  67. package/docs/TACTILE.md +38 -0
  68. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  69. package/docs/TOKENS.md +90 -4
  70. package/docs/superpowers/plans/2026-08-29-preset-identity-system-refinement.md +649 -0
  71. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  72. package/docs/superpowers/specs/2026-08-29-preset-identity-system-refinement-design.md +212 -0
  73. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  74. package/manifest.json +769 -20
  75. package/package.json +79 -14
  76. package/styles/art-deco.css +2068 -0
  77. package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
  78. package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
  79. package/styles/assets/bauhaus-barlow.ttf +0 -0
  80. package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
  81. package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
  82. package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
  83. package/styles/assets/bento-manrope-OFL.txt +93 -0
  84. package/styles/assets/bento-manrope.ttf +0 -0
  85. package/styles/assets/clay-grain.png +0 -0
  86. package/styles/assets/clay-rounded-OFL.txt +93 -0
  87. package/styles/assets/clay-rounded.ttf +0 -0
  88. package/styles/assets/neo-noir-corner-dark.png +0 -0
  89. package/styles/assets/neo-noir-corner-light.png +0 -0
  90. package/styles/assets/neo-noir-texture-dark.png +0 -0
  91. package/styles/assets/neo-noir-texture-light.png +0 -0
  92. package/styles/assets/organic-display-OFL.txt +93 -0
  93. package/styles/assets/organic-display.ttf +0 -0
  94. package/styles/assets/organic-icons-LICENSE.txt +21 -0
  95. package/styles/assets/organic-sans-OFL.txt +93 -0
  96. package/styles/assets/organic-sans.ttf +0 -0
  97. package/styles/bauhaus.css +1092 -87
  98. package/styles/bento.css +1413 -86
  99. package/styles/brutalism.css +493 -10
  100. package/styles/clay.css +1927 -0
  101. package/styles/compat-layout.css +1 -2
  102. package/styles/components.css +698 -33
  103. package/styles/content-overflow.css +434 -9
  104. package/styles/cyberpunk.css +2082 -46
  105. package/styles/data-terminal.css +1795 -0
  106. package/styles/editorial-luxe.css +1251 -0
  107. package/styles/industrial-utility.css +2449 -0
  108. package/styles/interactive-surface-bridge.css +40 -24
  109. package/styles/interactive-surface-theme.css +31 -13
  110. package/styles/maximalist.css +1410 -94
  111. package/styles/minimal-saas.css +675 -73
  112. package/styles/native-elements.css +396 -168
  113. package/styles/neo-noir.css +1332 -0
  114. package/styles/neumorphism.css +1155 -52
  115. package/styles/organic-modern.css +1353 -0
  116. package/styles/paper-editorial.css +1724 -0
  117. package/styles/retro-glass.css +870 -42
  118. package/styles/retrofuturism.css +1173 -55
  119. package/styles/tactile.css +2018 -84
  120. package/styles/technical-blueprint.css +1337 -0
  121. package/styles/theme-colors.css +796 -5
  122. package/styles/y2k.css +1182 -40
package/styles/interactive-surface-bridge.css CHANGED
@@ -9,7 +9,7 @@
9
9
  surface behavior, avoiding per-theme and per-preset token maps.
10
10
  ========================================================= */
11
11
 
12
- :where([data-ui][data-theme][data-mode]) .interactive-surface {
12
+ :where([data-ui][data-mode]) .interactive-surface {
13
13
  --interactive-surface-border-width: 1px;
14
14
  /* Preserve the adapter's opaque paint while semantic surfaces may retain preset alpha. */
15
15
  --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
@@ -52,9 +52,9 @@
52
52
  --interactive-surface-level-2-bg: var(--interactive-surface-bg);
53
53
  --interactive-surface-level-2-border-color: var(--interactive-surface-border-color);
54
54
  --interactive-surface-level-2-shadow: 0 8px 20px rgb(var(--usk-bg-rgb, 0 0 0) / .22);
55
- --interactive-surface-level-3-bg: color-mix(in srgb, var(--interactive-surface-bg) 82%, var(--interactive-surface-variant-primary-bg));
56
- --interactive-surface-level-3-border-color: color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 72%, var(--interactive-surface-border-color));
57
- --interactive-surface-level-3-shadow: 0 14px 34px rgb(var(--usk-bg-rgb, 0 0 0) / .3), 0 0 0 1px color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 34%, transparent);
55
+ --interactive-surface-level-3-bg: var(--interactive-surface-bg);
56
+ --interactive-surface-level-3-border-color: var(--interactive-surface-variant-primary-border-color);
57
+ --interactive-surface-level-3-shadow: 0 14px 34px rgb(var(--usk-bg-rgb, 0 0 0) / .3);
58
58
  --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
59
59
  --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
60
60
  --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);
@@ -69,14 +69,30 @@
69
69
  border-radius: var(--interactive-surface-radius);
70
70
  box-shadow: var(--interactive-surface-level-shadow, none);
71
71
  transition:
72
- background-color 160ms ease,
73
72
  border-color 160ms ease,
74
73
  box-shadow 160ms ease,
75
- color 160ms ease,
76
74
  transform 160ms ease;
77
75
  }
78
76
 
79
- :where([data-ui][data-theme][data-mode]) .interactive-surface::before {
77
+ /**
78
+ * Gives bridged text links a WCAG-sized pointer target without changing button
79
+ * or form-control geometry.
80
+ */
81
+ :where([data-ui][data-mode]) a.interactive-surface {
82
+ display: inline-flex;
83
+ align-items: center;
84
+ min-block-size: 24px;
85
+ }
86
+
87
+ @supports (color: color-mix(in srgb, black, white)) {
88
+ :where([data-ui][data-mode]) .interactive-surface {
89
+ --interactive-surface-level-3-bg: color-mix(in srgb, var(--interactive-surface-bg) 82%, var(--interactive-surface-variant-primary-bg));
90
+ --interactive-surface-level-3-border-color: color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 72%, var(--interactive-surface-border-color));
91
+ --interactive-surface-level-3-shadow: 0 14px 34px rgb(var(--usk-bg-rgb, 0 0 0) / .3), 0 0 0 1px color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 34%, transparent);
92
+ }
93
+ }
94
+
95
+ :where([data-ui][data-mode]) .interactive-surface::before {
80
96
  position: absolute;
81
97
  inset: 0;
82
98
  border-radius: inherit;
@@ -87,72 +103,72 @@
87
103
  content: "";
88
104
  }
89
105
 
90
- :where([data-ui][data-theme][data-mode]) .interactive-surface:not([disabled]):not([aria-disabled="true"]):hover {
106
+ :where([data-ui][data-mode]) .interactive-surface:not([disabled]):not([aria-disabled="true"]):hover {
91
107
  --interactive-surface-state-layer-opacity: var(--interactive-surface-state-layer-opacity-hover);
92
108
 
93
109
  transform: translateY(-1px);
94
110
  }
95
111
 
96
- :where([data-ui][data-theme][data-mode]) .interactive-surface:not([disabled]):not([aria-disabled="true"]):active,
97
- :where([data-ui][data-theme][data-mode]) .interactive-surface[aria-pressed="true"],
98
- :where([data-ui][data-theme][data-mode]) .interactive-surface[aria-current="page"],
99
- :where([data-ui][data-theme][data-mode]) .interactive-surface.is-active {
112
+ :where([data-ui][data-mode]) .interactive-surface:not([disabled]):not([aria-disabled="true"]):active,
113
+ :where([data-ui][data-mode]) .interactive-surface[aria-pressed="true"],
114
+ :where([data-ui][data-mode]) .interactive-surface[aria-current="page"],
115
+ :where([data-ui][data-mode]) .interactive-surface.is-active {
100
116
  --interactive-surface-state-layer-opacity: var(--interactive-surface-state-layer-opacity-active);
101
117
 
102
118
  transform: translateY(0);
103
119
  }
104
120
 
105
- :where([data-ui][data-theme][data-mode]) .interactive-surface:focus-visible {
121
+ :where([data-ui][data-mode]) .interactive-surface:focus-visible {
106
122
  --interactive-surface-state-layer-opacity: var(--interactive-surface-state-layer-opacity-focus);
107
123
 
108
124
  outline: 2px solid var(--interactive-surface-focus-ring-color);
109
125
  outline-offset: 3px;
110
126
  }
111
127
 
112
- :where([data-ui][data-theme][data-mode]) .interactive-surface[disabled],
113
- :where([data-ui][data-theme][data-mode]) .interactive-surface[aria-disabled="true"] {
128
+ :where([data-ui][data-mode]) .interactive-surface[disabled],
129
+ :where([data-ui][data-mode]) .interactive-surface[aria-disabled="true"] {
114
130
  opacity: .56;
115
131
  cursor: not-allowed;
116
132
  }
117
133
 
118
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="primary"] {
134
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="primary"] {
119
135
  --interactive-surface-bg: var(--interactive-surface-variant-primary-bg);
120
136
  --interactive-surface-fg: var(--interactive-surface-variant-primary-fg);
121
137
  --interactive-surface-border-color: var(--interactive-surface-variant-primary-border-color);
122
138
  }
123
139
 
124
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="secondary"] {
140
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="secondary"] {
125
141
  --interactive-surface-bg: var(--interactive-surface-variant-secondary-bg);
126
142
  --interactive-surface-fg: var(--interactive-surface-variant-secondary-fg);
127
143
  --interactive-surface-border-color: var(--interactive-surface-variant-secondary-border-color);
128
144
  }
129
145
 
130
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="accent"] {
146
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="accent"] {
131
147
  --interactive-surface-bg: var(--interactive-surface-variant-accent-bg);
132
148
  --interactive-surface-fg: var(--interactive-surface-variant-accent-fg);
133
149
  --interactive-surface-border-color: var(--interactive-surface-variant-accent-border-color);
134
150
  }
135
151
 
136
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="subtle"] {
152
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="subtle"] {
137
153
  --interactive-surface-bg: var(--interactive-surface-variant-subtle-bg);
138
154
  --interactive-surface-fg: var(--interactive-surface-variant-subtle-fg);
139
155
  --interactive-surface-border-color: var(--interactive-surface-variant-subtle-border-color);
140
156
  }
141
157
 
142
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="warning"] {
158
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="warning"] {
143
159
  --interactive-surface-bg: var(--interactive-surface-variant-warning-bg);
144
160
  --interactive-surface-fg: var(--interactive-surface-variant-warning-fg);
145
161
  --interactive-surface-border-color: var(--interactive-surface-variant-warning-border-color);
146
162
  }
147
163
 
148
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="danger"] {
164
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="danger"] {
149
165
  --interactive-surface-bg: var(--interactive-surface-variant-danger-bg);
150
166
  --interactive-surface-fg: var(--interactive-surface-variant-danger-fg);
151
167
  --interactive-surface-border-color: var(--interactive-surface-variant-danger-border-color);
152
168
  }
153
169
 
154
170
  /* Surface levels define the three visual depths consumed by the demo and bridge hooks. */
155
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="1"] {
171
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="1"] {
156
172
  --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
157
173
  --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
158
174
  --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);
@@ -161,7 +177,7 @@
161
177
  --interactive-surface-state-layer-opacity-focus: .18;
162
178
  }
163
179
 
164
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="2"] {
180
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="2"] {
165
181
  --interactive-surface-level-bg: var(--interactive-surface-level-2-bg);
166
182
  --interactive-surface-level-border-color: var(--interactive-surface-level-2-border-color);
167
183
  --interactive-surface-level-shadow: var(--interactive-surface-level-2-shadow);
@@ -170,7 +186,7 @@
170
186
  --interactive-surface-state-layer-opacity-focus: .22;
171
187
  }
172
188
 
173
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="3"] {
189
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="3"] {
174
190
  --interactive-surface-level-bg: var(--interactive-surface-level-3-bg);
175
191
  --interactive-surface-level-border-color: var(--interactive-surface-level-3-border-color);
176
192
  --interactive-surface-level-shadow: var(--interactive-surface-level-3-shadow);
package/styles/interactive-surface-theme.css CHANGED
@@ -6,7 +6,7 @@
6
6
  hover, focus, active, disabled, and reduced-motion behavior.
7
7
  ========================================================= */
8
8
 
9
- :where([data-ui][data-theme][data-mode]) .interactive-surface {
9
+ :where([data-ui][data-mode]) .interactive-surface {
10
10
  --interactive-surface-border-width: 1px;
11
11
  /* Preserve the adapter's opaque paint while semantic surfaces may retain preset alpha. */
12
12
  --interactive-surface-bg: rgb(var(--usk-surface-strong-rgb, var(--usk-surface-rgb, 255 255 255)));
@@ -44,9 +44,9 @@
44
44
  --interactive-surface-level-2-bg: var(--interactive-surface-bg);
45
45
  --interactive-surface-level-2-border-color: var(--interactive-surface-border-color);
46
46
  --interactive-surface-level-2-shadow: 0 8px 20px rgb(var(--usk-bg-rgb, 0 0 0) / .22);
47
- --interactive-surface-level-3-bg: color-mix(in srgb, var(--interactive-surface-bg) 82%, var(--interactive-surface-variant-primary-bg));
48
- --interactive-surface-level-3-border-color: color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 72%, var(--interactive-surface-border-color));
49
- --interactive-surface-level-3-shadow: 0 14px 34px rgb(var(--usk-bg-rgb, 0 0 0) / .3), 0 0 0 1px color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 34%, transparent);
47
+ --interactive-surface-level-3-bg: var(--interactive-surface-bg);
48
+ --interactive-surface-level-3-border-color: var(--interactive-surface-variant-primary-border-color);
49
+ --interactive-surface-level-3-shadow: 0 14px 34px rgb(var(--usk-bg-rgb, 0 0 0) / .3);
50
50
  --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
51
51
  --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
52
52
  --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);
@@ -59,56 +59,74 @@
59
59
  color: var(--interactive-surface-fg);
60
60
  }
61
61
 
62
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="primary"] {
62
+ /**
63
+ * Gives bridged text links a WCAG-sized pointer target without changing button
64
+ * or form-control geometry.
65
+ */
66
+ :where([data-ui][data-mode]) a.interactive-surface {
67
+ display: inline-flex;
68
+ align-items: center;
69
+ min-block-size: 24px;
70
+ }
71
+
72
+ @supports (color: color-mix(in srgb, black, white)) {
73
+ :where([data-ui][data-mode]) .interactive-surface {
74
+ --interactive-surface-level-3-bg: color-mix(in srgb, var(--interactive-surface-bg) 82%, var(--interactive-surface-variant-primary-bg));
75
+ --interactive-surface-level-3-border-color: color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 72%, var(--interactive-surface-border-color));
76
+ --interactive-surface-level-3-shadow: 0 14px 34px rgb(var(--usk-bg-rgb, 0 0 0) / .3), 0 0 0 1px color-mix(in srgb, var(--interactive-surface-variant-primary-border-color) 34%, transparent);
77
+ }
78
+ }
79
+
80
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="primary"] {
63
81
  --interactive-surface-bg: var(--interactive-surface-variant-primary-bg);
64
82
  --interactive-surface-fg: var(--interactive-surface-variant-primary-fg);
65
83
  --interactive-surface-border-color: var(--interactive-surface-variant-primary-border-color);
66
84
  }
67
85
 
68
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="secondary"] {
86
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="secondary"] {
69
87
  --interactive-surface-bg: var(--interactive-surface-variant-secondary-bg);
70
88
  --interactive-surface-fg: var(--interactive-surface-variant-secondary-fg);
71
89
  --interactive-surface-border-color: var(--interactive-surface-variant-secondary-border-color);
72
90
  }
73
91
 
74
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="accent"] {
92
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="accent"] {
75
93
  --interactive-surface-bg: var(--interactive-surface-variant-accent-bg);
76
94
  --interactive-surface-fg: var(--interactive-surface-variant-accent-fg);
77
95
  --interactive-surface-border-color: var(--interactive-surface-variant-accent-border-color);
78
96
  }
79
97
 
80
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="subtle"] {
98
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="subtle"] {
81
99
  --interactive-surface-bg: var(--interactive-surface-variant-subtle-bg);
82
100
  --interactive-surface-fg: var(--interactive-surface-variant-subtle-fg);
83
101
  --interactive-surface-border-color: var(--interactive-surface-variant-subtle-border-color);
84
102
  }
85
103
 
86
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="warning"] {
104
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="warning"] {
87
105
  --interactive-surface-bg: var(--interactive-surface-variant-warning-bg);
88
106
  --interactive-surface-fg: var(--interactive-surface-variant-warning-fg);
89
107
  --interactive-surface-border-color: var(--interactive-surface-variant-warning-border-color);
90
108
  }
91
109
 
92
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-variant="danger"] {
110
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-variant="danger"] {
93
111
  --interactive-surface-bg: var(--interactive-surface-variant-danger-bg);
94
112
  --interactive-surface-fg: var(--interactive-surface-variant-danger-fg);
95
113
  --interactive-surface-border-color: var(--interactive-surface-variant-danger-border-color);
96
114
  }
97
115
 
98
116
  /* Level selectors select paint depth without taking ownership of interaction states. */
99
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="1"] {
117
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="1"] {
100
118
  --interactive-surface-level-bg: var(--interactive-surface-level-1-bg);
101
119
  --interactive-surface-level-border-color: var(--interactive-surface-level-1-border-color);
102
120
  --interactive-surface-level-shadow: var(--interactive-surface-level-1-shadow);
103
121
  }
104
122
 
105
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="2"] {
123
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="2"] {
106
124
  --interactive-surface-level-bg: var(--interactive-surface-level-2-bg);
107
125
  --interactive-surface-level-border-color: var(--interactive-surface-level-2-border-color);
108
126
  --interactive-surface-level-shadow: var(--interactive-surface-level-2-shadow);
109
127
  }
110
128
 
111
- :where([data-ui][data-theme][data-mode]) .interactive-surface[data-surface-level="3"] {
129
+ :where([data-ui][data-mode]) .interactive-surface[data-surface-level="3"] {
112
130
  --interactive-surface-level-bg: var(--interactive-surface-level-3-bg);
113
131
  --interactive-surface-level-border-color: var(--interactive-surface-level-3-border-color);
114
132
  --interactive-surface-level-shadow: var(--interactive-surface-level-3-shadow);