@vireo-ai/trellis-ui 0.1.41 → 0.1.43

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 (106) hide show
  1. package/package.json +1 -1
  2. package/packages/client/src/components/field/styles.css +7 -4
  3. package/packages/client/src/components/keybinding/styles.css +14 -0
  4. package/packages/client/src/components/toast/styles.css +2 -21
  5. package/packages/client/src/components/tooltip/styles.css +23 -0
  6. package/packages/client/src/styles/components.css +3 -0
  7. package/packages/client/src/styles/generated/theme-runtime.css +268 -1
  8. package/packages/client/src/styles/generated-sources.css +1 -1
  9. package/packages/client/src/styles/recipes/floating-surface.css +24 -0
  10. package/packages/client/src/styles/recipes/intent.css +8 -8
  11. package/packages/client/types/assets/full-runtime.generated.d.ts +1 -1
  12. package/packages/client/types/capabilities/shortcut.d.ts +43 -0
  13. package/packages/client/types/capabilities/shortcut.entry.generated.d.ts +3 -0
  14. package/packages/client/types/components/common.d.ts +1 -1
  15. package/packages/client/types/components/entry.generated.d.ts +3 -0
  16. package/packages/client/types/components/input/contract.d.ts +3 -3
  17. package/packages/client/types/components/keybinding/contract.d.ts +8 -0
  18. package/packages/client/types/components/keybinding/controller.d.ts +7 -0
  19. package/packages/client/types/components/keybinding/entry.generated.d.ts +5 -0
  20. package/packages/client/types/components/keybinding/index.d.ts +5 -0
  21. package/packages/client/types/components/runtime.d.ts +4 -0
  22. package/packages/client/types/components/select/contract.d.ts +2 -2
  23. package/packages/client/types/components/select/machine.d.ts +2 -2
  24. package/packages/client/types/components/textarea/contract.d.ts +1 -1
  25. package/packages/client/types/components/tooltip/contract.d.ts +36 -0
  26. package/packages/client/types/components/tooltip/entry.generated.d.ts +5 -0
  27. package/packages/client/types/components/tooltip/index.d.ts +21 -0
  28. package/packages/client/types/components/tooltip/machine.d.ts +40 -0
  29. package/packages/client/types/components/tooltip/runtime-docs.d.ts +2 -0
  30. package/packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.css +260 -26
  31. package/packages/server/trellis_ui/static/trellis_ui/assets/css/trellis.min.css +1 -1
  32. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/build-metadata.json +321 -221
  33. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/capabilities/shortcut.js +2 -0
  34. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/capabilities/shortcut.js.map +1 -0
  35. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/capabilities/sortable.js +1 -1
  36. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/capability-shortcut-Br_XBf7u.js +2 -0
  37. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/capability-shortcut-Br_XBf7u.js.map +1 -0
  38. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{capability-sortable-Ds2wQEQq.js → capability-sortable-aY5GWxrK.js} +2 -2
  39. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{capability-sortable-Ds2wQEQq.js.map → capability-sortable-aY5GWxrK.js.map} +1 -1
  40. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/common-fH2NGblC.js +2 -0
  41. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/common-fH2NGblC.js.map +1 -0
  42. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/controller-DsXbNzqk.js +2 -0
  43. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/controller-DsXbNzqk.js.map +1 -0
  44. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-B74OtpL2.js +2 -0
  45. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-B74OtpL2.js.map +1 -0
  46. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-BZXp8Edl.js +2 -0
  47. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-BZXp8Edl.js.map +1 -0
  48. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-BPZeXRC3.js → entry.generated-BbQ_TNRI.js} +2 -2
  49. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-BPZeXRC3.js.map → entry.generated-BbQ_TNRI.js.map} +1 -1
  50. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-BC8JUf6f.js → entry.generated-BwAge51I.js} +2 -2
  51. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-BC8JUf6f.js.map → entry.generated-BwAge51I.js.map} +1 -1
  52. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-DYBALnuF.js → entry.generated-CEGLKsEl.js} +2 -2
  53. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-DYBALnuF.js.map → entry.generated-CEGLKsEl.js.map} +1 -1
  54. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-BO0EDjBb.js → entry.generated-CYHiRVjx.js} +2 -2
  55. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-BO0EDjBb.js.map → entry.generated-CYHiRVjx.js.map} +1 -1
  56. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry2.generated-B7ROYMLZ.js → entry.generated-Ck7bhyzz.js} +2 -2
  57. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-Ck7bhyzz.js.map +1 -0
  58. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-C8pt5QeK.js → entry.generated-CtoSPDoI.js} +2 -2
  59. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-C8pt5QeK.js.map → entry.generated-CtoSPDoI.js.map} +1 -1
  60. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-DfuZKFMG.js → entry.generated-D0Av2Aiw.js} +2 -2
  61. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-DfuZKFMG.js.map → entry.generated-D0Av2Aiw.js.map} +1 -1
  62. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-BoOsILKj.js → entry.generated-DSyiRko7.js} +2 -2
  63. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-BoOsILKj.js.map → entry.generated-DSyiRko7.js.map} +1 -1
  64. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-DjMJNzy1.js → entry.generated-Dd04OzRH.js} +2 -2
  65. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-DjMJNzy1.js.map → entry.generated-Dd04OzRH.js.map} +1 -1
  66. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-DIPrCNjK.js → entry.generated-Gl6wz0Oh.js} +2 -2
  67. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-DIPrCNjK.js.map → entry.generated-Gl6wz0Oh.js.map} +1 -1
  68. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-jP0UEZIS.js +2 -0
  69. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-jP0UEZIS.js.map +1 -0
  70. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-vM-5KVaL.js +2 -0
  71. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-vM-5KVaL.js.map +1 -0
  72. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-D5gXHQl_.js → entry.generated-xjDWyE7q.js} +2 -2
  73. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-D5gXHQl_.js.map → entry.generated-xjDWyE7q.js.map} +1 -1
  74. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/{entry.generated-Dgrr543E.js → entry2.generated-e3bTOzUi.js} +2 -2
  75. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry2.generated-e3bTOzUi.js.map +1 -0
  76. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/accordion.js +1 -1
  77. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/checkbox.js +1 -1
  78. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/data-grid.js +1 -1
  79. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/date-picker.js +1 -1
  80. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/dropdown.js +1 -1
  81. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/field.js +1 -1
  82. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/index.js +1 -1
  83. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/index.js.map +1 -1
  84. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/input.js +1 -1
  85. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/keybinding.js +1 -0
  86. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/modal.js +1 -1
  87. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/radio.js +1 -1
  88. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/select.js +1 -1
  89. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/sidebar.js +1 -1
  90. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/slider.js +1 -1
  91. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/switch.js +1 -1
  92. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/tabs.js +1 -1
  93. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/components/tooltip.js +1 -0
  94. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/index.js +1 -1
  95. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/index.js.map +1 -1
  96. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/logical-entry-manifest.json +109 -63
  97. package/packages/server/trellis_ui/static/trellis_ui/assets/js/trellis.js +5 -5
  98. package/packages/server/trellis_ui/static/trellis_ui/assets/js/trellis.min.js +5 -5
  99. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/common-BOd_thC-.js +0 -2
  100. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/common-BOd_thC-.js.map +0 -1
  101. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-51hjJ_lu.js +0 -2
  102. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-51hjJ_lu.js.map +0 -1
  103. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-BLloDlP5.js +0 -2
  104. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-BLloDlP5.js.map +0 -1
  105. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry.generated-Dgrr543E.js.map +0 -1
  106. package/packages/server/trellis_ui/static/trellis_ui/assets/js/esm/chunks/entry2.generated-B7ROYMLZ.js.map +0 -1
package/packages/client/src/styles/generated/theme-runtime.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* Generated by packages/theme-engine/scripts/generate-default-css.mjs. */
2
- /* Theme df3d56b092a0a62a; CSS 10159c90df775d1c. */
2
+ /* Theme df3d56b092a0a62a; CSS dd4bac8af4d18872. */
3
3
  @theme {
4
4
  --color-separator: transparent;
5
5
  --color-separator-muted: transparent;
@@ -1110,6 +1110,9 @@
1110
1110
  --ui-surface-separator: var(--ui-surface-edge);
1111
1111
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1112
1112
  --ui-matched-elevation: var(--ui-local-elevation-0);
1113
+ }
1114
+
1115
+ :where([data-ui-surface="0"]:not([data-ui-semantic-surface])) {
1113
1116
  background-color: var(--ui-surface-color);
1114
1117
  color: var(--ui-surface-ink);
1115
1118
  }
@@ -1125,6 +1128,9 @@
1125
1128
  --ui-surface-separator: var(--ui-surface-edge);
1126
1129
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1127
1130
  --ui-matched-elevation: var(--ui-local-elevation-1);
1131
+ }
1132
+
1133
+ :where([data-ui-surface="1"]:not([data-ui-semantic-surface])) {
1128
1134
  background-color: var(--ui-surface-color);
1129
1135
  color: var(--ui-surface-ink);
1130
1136
  }
@@ -1140,6 +1146,9 @@
1140
1146
  --ui-surface-separator: var(--ui-surface-edge);
1141
1147
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1142
1148
  --ui-matched-elevation: var(--ui-local-elevation-2);
1149
+ }
1150
+
1151
+ :where([data-ui-surface="2"]:not([data-ui-semantic-surface])) {
1143
1152
  background-color: var(--ui-surface-color);
1144
1153
  color: var(--ui-surface-ink);
1145
1154
  }
@@ -1155,6 +1164,9 @@
1155
1164
  --ui-surface-separator: var(--ui-surface-edge);
1156
1165
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1157
1166
  --ui-matched-elevation: var(--ui-local-elevation-3);
1167
+ }
1168
+
1169
+ :where([data-ui-surface="3"]:not([data-ui-semantic-surface])) {
1158
1170
  background-color: var(--ui-surface-color);
1159
1171
  color: var(--ui-surface-ink);
1160
1172
  }
@@ -1170,6 +1182,9 @@
1170
1182
  --ui-surface-separator: var(--ui-surface-edge);
1171
1183
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1172
1184
  --ui-matched-elevation: var(--ui-local-elevation-4);
1185
+ }
1186
+
1187
+ :where([data-ui-surface="4"]:not([data-ui-semantic-surface])) {
1173
1188
  background-color: var(--ui-surface-color);
1174
1189
  color: var(--ui-surface-ink);
1175
1190
  }
@@ -1185,6 +1200,9 @@
1185
1200
  --ui-surface-separator: var(--ui-surface-edge);
1186
1201
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1187
1202
  --ui-matched-elevation: var(--ui-local-elevation-5);
1203
+ }
1204
+
1205
+ :where([data-ui-surface="5"]:not([data-ui-semantic-surface])) {
1188
1206
  background-color: var(--ui-surface-color);
1189
1207
  color: var(--ui-surface-ink);
1190
1208
  }
@@ -1200,6 +1218,9 @@
1200
1218
  --ui-surface-separator: var(--ui-surface-edge);
1201
1219
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1202
1220
  --ui-matched-elevation: var(--ui-local-elevation-6);
1221
+ }
1222
+
1223
+ :where([data-ui-surface="6"]:not([data-ui-semantic-surface])) {
1203
1224
  background-color: var(--ui-surface-color);
1204
1225
  color: var(--ui-surface-ink);
1205
1226
  }
@@ -1215,6 +1236,9 @@
1215
1236
  --ui-surface-separator: var(--ui-surface-edge);
1216
1237
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1217
1238
  --ui-matched-elevation: var(--ui-local-elevation-7);
1239
+ }
1240
+
1241
+ :where([data-ui-surface="7"]:not([data-ui-semantic-surface])) {
1218
1242
  background-color: var(--ui-surface-color);
1219
1243
  color: var(--ui-surface-ink);
1220
1244
  }
@@ -1230,6 +1254,9 @@
1230
1254
  --ui-surface-separator: var(--ui-surface-edge);
1231
1255
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1232
1256
  --ui-matched-elevation: var(--ui-local-elevation-8);
1257
+ }
1258
+
1259
+ :where([data-ui-surface="8"]:not([data-ui-semantic-surface])) {
1233
1260
  background-color: var(--ui-surface-color);
1234
1261
  color: var(--ui-surface-ink);
1235
1262
  }
@@ -1245,6 +1272,9 @@
1245
1272
  --ui-surface-separator: var(--ui-surface-edge);
1246
1273
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1247
1274
  --ui-matched-elevation: var(--ui-local-elevation-1);
1275
+ }
1276
+
1277
+ :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
1248
1278
  background-color: var(--ui-surface-color);
1249
1279
  color: var(--ui-surface-ink);
1250
1280
  }
@@ -1260,6 +1290,9 @@
1260
1290
  --ui-surface-separator: var(--ui-surface-edge);
1261
1291
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1262
1292
  --ui-matched-elevation: var(--ui-local-elevation-2);
1293
+ }
1294
+
1295
+ :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
1263
1296
  background-color: var(--ui-surface-color);
1264
1297
  color: var(--ui-surface-ink);
1265
1298
  }
@@ -1275,6 +1308,9 @@
1275
1308
  --ui-surface-separator: var(--ui-surface-edge);
1276
1309
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1277
1310
  --ui-matched-elevation: var(--ui-local-elevation-3);
1311
+ }
1312
+
1313
+ :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
1278
1314
  background-color: var(--ui-surface-color);
1279
1315
  color: var(--ui-surface-ink);
1280
1316
  }
@@ -1290,6 +1326,9 @@
1290
1326
  --ui-surface-separator: var(--ui-surface-edge);
1291
1327
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1292
1328
  --ui-matched-elevation: var(--ui-local-elevation-4);
1329
+ }
1330
+
1331
+ :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
1293
1332
  background-color: var(--ui-surface-color);
1294
1333
  color: var(--ui-surface-ink);
1295
1334
  }
@@ -1305,6 +1344,9 @@
1305
1344
  --ui-surface-separator: var(--ui-surface-edge);
1306
1345
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1307
1346
  --ui-matched-elevation: var(--ui-local-elevation-5);
1347
+ }
1348
+
1349
+ :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
1308
1350
  background-color: var(--ui-surface-color);
1309
1351
  color: var(--ui-surface-ink);
1310
1352
  }
@@ -1320,6 +1362,9 @@
1320
1362
  --ui-surface-separator: var(--ui-surface-edge);
1321
1363
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1322
1364
  --ui-matched-elevation: var(--ui-local-elevation-6);
1365
+ }
1366
+
1367
+ :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
1323
1368
  background-color: var(--ui-surface-color);
1324
1369
  color: var(--ui-surface-ink);
1325
1370
  }
@@ -1335,6 +1380,9 @@
1335
1380
  --ui-surface-separator: var(--ui-surface-edge);
1336
1381
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1337
1382
  --ui-matched-elevation: var(--ui-local-elevation-7);
1383
+ }
1384
+
1385
+ :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
1338
1386
  background-color: var(--ui-surface-color);
1339
1387
  color: var(--ui-surface-ink);
1340
1388
  }
@@ -1350,6 +1398,9 @@
1350
1398
  --ui-surface-separator: var(--ui-surface-edge);
1351
1399
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1352
1400
  --ui-matched-elevation: var(--ui-local-elevation-8);
1401
+ }
1402
+
1403
+ :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
1353
1404
  background-color: var(--ui-surface-color);
1354
1405
  color: var(--ui-surface-ink);
1355
1406
  }
@@ -1412,6 +1463,9 @@
1412
1463
  --ui-surface-separator: var(--ui-surface-edge);
1413
1464
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1414
1465
  --ui-matched-elevation: var(--ui-local-elevation-1);
1466
+ }
1467
+
1468
+ :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
1415
1469
  background-color: var(--ui-surface-color);
1416
1470
  color: var(--ui-surface-ink);
1417
1471
  }
@@ -1429,6 +1483,9 @@
1429
1483
  --ui-surface-separator: var(--ui-surface-edge);
1430
1484
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1431
1485
  --ui-matched-elevation: var(--ui-local-elevation-2);
1486
+ }
1487
+
1488
+ :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
1432
1489
  background-color: var(--ui-surface-color);
1433
1490
  color: var(--ui-surface-ink);
1434
1491
  }
@@ -1446,6 +1503,9 @@
1446
1503
  --ui-surface-separator: var(--ui-surface-edge);
1447
1504
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1448
1505
  --ui-matched-elevation: var(--ui-local-elevation-3);
1506
+ }
1507
+
1508
+ :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
1449
1509
  background-color: var(--ui-surface-color);
1450
1510
  color: var(--ui-surface-ink);
1451
1511
  }
@@ -1463,6 +1523,9 @@
1463
1523
  --ui-surface-separator: var(--ui-surface-edge);
1464
1524
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1465
1525
  --ui-matched-elevation: var(--ui-local-elevation-4);
1526
+ }
1527
+
1528
+ :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
1466
1529
  background-color: var(--ui-surface-color);
1467
1530
  color: var(--ui-surface-ink);
1468
1531
  }
@@ -1480,6 +1543,9 @@
1480
1543
  --ui-surface-separator: var(--ui-surface-edge);
1481
1544
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1482
1545
  --ui-matched-elevation: var(--ui-local-elevation-5);
1546
+ }
1547
+
1548
+ :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
1483
1549
  background-color: var(--ui-surface-color);
1484
1550
  color: var(--ui-surface-ink);
1485
1551
  }
@@ -1497,6 +1563,9 @@
1497
1563
  --ui-surface-separator: var(--ui-surface-edge);
1498
1564
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1499
1565
  --ui-matched-elevation: var(--ui-local-elevation-6);
1566
+ }
1567
+
1568
+ :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
1500
1569
  background-color: var(--ui-surface-color);
1501
1570
  color: var(--ui-surface-ink);
1502
1571
  }
@@ -1514,6 +1583,9 @@
1514
1583
  --ui-surface-separator: var(--ui-surface-edge);
1515
1584
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1516
1585
  --ui-matched-elevation: var(--ui-local-elevation-7);
1586
+ }
1587
+
1588
+ :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
1517
1589
  background-color: var(--ui-surface-color);
1518
1590
  color: var(--ui-surface-ink);
1519
1591
  }
@@ -1531,6 +1603,9 @@
1531
1603
  --ui-surface-separator: var(--ui-surface-edge);
1532
1604
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1533
1605
  --ui-matched-elevation: var(--ui-local-elevation-8);
1606
+ }
1607
+
1608
+ :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
1534
1609
  background-color: var(--ui-surface-color);
1535
1610
  color: var(--ui-surface-ink);
1536
1611
  }
@@ -1548,6 +1623,9 @@
1548
1623
  --ui-surface-separator: var(--ui-surface-edge);
1549
1624
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1550
1625
  --ui-matched-elevation: var(--ui-local-elevation-2);
1626
+ }
1627
+
1628
+ :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
1551
1629
  background-color: var(--ui-surface-color);
1552
1630
  color: var(--ui-surface-ink);
1553
1631
  }
@@ -1565,6 +1643,9 @@
1565
1643
  --ui-surface-separator: var(--ui-surface-edge);
1566
1644
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1567
1645
  --ui-matched-elevation: var(--ui-local-elevation-3);
1646
+ }
1647
+
1648
+ :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
1568
1649
  background-color: var(--ui-surface-color);
1569
1650
  color: var(--ui-surface-ink);
1570
1651
  }
@@ -1582,6 +1663,9 @@
1582
1663
  --ui-surface-separator: var(--ui-surface-edge);
1583
1664
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1584
1665
  --ui-matched-elevation: var(--ui-local-elevation-4);
1666
+ }
1667
+
1668
+ :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
1585
1669
  background-color: var(--ui-surface-color);
1586
1670
  color: var(--ui-surface-ink);
1587
1671
  }
@@ -1599,6 +1683,9 @@
1599
1683
  --ui-surface-separator: var(--ui-surface-edge);
1600
1684
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1601
1685
  --ui-matched-elevation: var(--ui-local-elevation-5);
1686
+ }
1687
+
1688
+ :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
1602
1689
  background-color: var(--ui-surface-color);
1603
1690
  color: var(--ui-surface-ink);
1604
1691
  }
@@ -1616,6 +1703,9 @@
1616
1703
  --ui-surface-separator: var(--ui-surface-edge);
1617
1704
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1618
1705
  --ui-matched-elevation: var(--ui-local-elevation-6);
1706
+ }
1707
+
1708
+ :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
1619
1709
  background-color: var(--ui-surface-color);
1620
1710
  color: var(--ui-surface-ink);
1621
1711
  }
@@ -1633,6 +1723,9 @@
1633
1723
  --ui-surface-separator: var(--ui-surface-edge);
1634
1724
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1635
1725
  --ui-matched-elevation: var(--ui-local-elevation-7);
1726
+ }
1727
+
1728
+ :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
1636
1729
  background-color: var(--ui-surface-color);
1637
1730
  color: var(--ui-surface-ink);
1638
1731
  }
@@ -1650,6 +1743,9 @@
1650
1743
  --ui-surface-separator: var(--ui-surface-edge);
1651
1744
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1652
1745
  --ui-matched-elevation: var(--ui-local-elevation-8);
1746
+ }
1747
+
1748
+ :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
1653
1749
  background-color: var(--ui-surface-color);
1654
1750
  color: var(--ui-surface-ink);
1655
1751
  }
@@ -1667,6 +1763,9 @@
1667
1763
  --ui-surface-separator: var(--ui-surface-edge);
1668
1764
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1669
1765
  --ui-matched-elevation: var(--ui-local-elevation-8);
1766
+ }
1767
+
1768
+ :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
1670
1769
  background-color: var(--ui-surface-color);
1671
1770
  color: var(--ui-surface-ink);
1672
1771
  }
@@ -1684,6 +1783,9 @@
1684
1783
  --ui-surface-separator: var(--ui-surface-edge);
1685
1784
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1686
1785
  --ui-matched-elevation: var(--ui-local-elevation-3);
1786
+ }
1787
+
1788
+ :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
1687
1789
  background-color: var(--ui-surface-color);
1688
1790
  color: var(--ui-surface-ink);
1689
1791
  }
@@ -1701,6 +1803,9 @@
1701
1803
  --ui-surface-separator: var(--ui-surface-edge);
1702
1804
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1703
1805
  --ui-matched-elevation: var(--ui-local-elevation-4);
1806
+ }
1807
+
1808
+ :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
1704
1809
  background-color: var(--ui-surface-color);
1705
1810
  color: var(--ui-surface-ink);
1706
1811
  }
@@ -1718,6 +1823,9 @@
1718
1823
  --ui-surface-separator: var(--ui-surface-edge);
1719
1824
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1720
1825
  --ui-matched-elevation: var(--ui-local-elevation-5);
1826
+ }
1827
+
1828
+ :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
1721
1829
  background-color: var(--ui-surface-color);
1722
1830
  color: var(--ui-surface-ink);
1723
1831
  }
@@ -1735,6 +1843,9 @@
1735
1843
  --ui-surface-separator: var(--ui-surface-edge);
1736
1844
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1737
1845
  --ui-matched-elevation: var(--ui-local-elevation-6);
1846
+ }
1847
+
1848
+ :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
1738
1849
  background-color: var(--ui-surface-color);
1739
1850
  color: var(--ui-surface-ink);
1740
1851
  }
@@ -1752,6 +1863,9 @@
1752
1863
  --ui-surface-separator: var(--ui-surface-edge);
1753
1864
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1754
1865
  --ui-matched-elevation: var(--ui-local-elevation-7);
1866
+ }
1867
+
1868
+ :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
1755
1869
  background-color: var(--ui-surface-color);
1756
1870
  color: var(--ui-surface-ink);
1757
1871
  }
@@ -1769,6 +1883,9 @@
1769
1883
  --ui-surface-separator: var(--ui-surface-edge);
1770
1884
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1771
1885
  --ui-matched-elevation: var(--ui-local-elevation-8);
1886
+ }
1887
+
1888
+ :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
1772
1889
  background-color: var(--ui-surface-color);
1773
1890
  color: var(--ui-surface-ink);
1774
1891
  }
@@ -1786,6 +1903,9 @@
1786
1903
  --ui-surface-separator: var(--ui-surface-edge);
1787
1904
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1788
1905
  --ui-matched-elevation: var(--ui-local-elevation-8);
1906
+ }
1907
+
1908
+ :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
1789
1909
  background-color: var(--ui-surface-color);
1790
1910
  color: var(--ui-surface-ink);
1791
1911
  }
@@ -1803,6 +1923,9 @@
1803
1923
  --ui-surface-separator: var(--ui-surface-edge);
1804
1924
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1805
1925
  --ui-matched-elevation: var(--ui-local-elevation-8);
1926
+ }
1927
+
1928
+ :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
1806
1929
  background-color: var(--ui-surface-color);
1807
1930
  color: var(--ui-surface-ink);
1808
1931
  }
@@ -1820,6 +1943,9 @@
1820
1943
  --ui-surface-separator: var(--ui-surface-edge);
1821
1944
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1822
1945
  --ui-matched-elevation: var(--ui-local-elevation-4);
1946
+ }
1947
+
1948
+ :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
1823
1949
  background-color: var(--ui-surface-color);
1824
1950
  color: var(--ui-surface-ink);
1825
1951
  }
@@ -1837,6 +1963,9 @@
1837
1963
  --ui-surface-separator: var(--ui-surface-edge);
1838
1964
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1839
1965
  --ui-matched-elevation: var(--ui-local-elevation-5);
1966
+ }
1967
+
1968
+ :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
1840
1969
  background-color: var(--ui-surface-color);
1841
1970
  color: var(--ui-surface-ink);
1842
1971
  }
@@ -1854,6 +1983,9 @@
1854
1983
  --ui-surface-separator: var(--ui-surface-edge);
1855
1984
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1856
1985
  --ui-matched-elevation: var(--ui-local-elevation-6);
1986
+ }
1987
+
1988
+ :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
1857
1989
  background-color: var(--ui-surface-color);
1858
1990
  color: var(--ui-surface-ink);
1859
1991
  }
@@ -1871,6 +2003,9 @@
1871
2003
  --ui-surface-separator: var(--ui-surface-edge);
1872
2004
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1873
2005
  --ui-matched-elevation: var(--ui-local-elevation-7);
2006
+ }
2007
+
2008
+ :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
1874
2009
  background-color: var(--ui-surface-color);
1875
2010
  color: var(--ui-surface-ink);
1876
2011
  }
@@ -1888,6 +2023,9 @@
1888
2023
  --ui-surface-separator: var(--ui-surface-edge);
1889
2024
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1890
2025
  --ui-matched-elevation: var(--ui-local-elevation-8);
2026
+ }
2027
+
2028
+ :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
1891
2029
  background-color: var(--ui-surface-color);
1892
2030
  color: var(--ui-surface-ink);
1893
2031
  }
@@ -1905,6 +2043,9 @@
1905
2043
  --ui-surface-separator: var(--ui-surface-edge);
1906
2044
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1907
2045
  --ui-matched-elevation: var(--ui-local-elevation-8);
2046
+ }
2047
+
2048
+ :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
1908
2049
  background-color: var(--ui-surface-color);
1909
2050
  color: var(--ui-surface-ink);
1910
2051
  }
@@ -1922,6 +2063,9 @@
1922
2063
  --ui-surface-separator: var(--ui-surface-edge);
1923
2064
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1924
2065
  --ui-matched-elevation: var(--ui-local-elevation-8);
2066
+ }
2067
+
2068
+ :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
1925
2069
  background-color: var(--ui-surface-color);
1926
2070
  color: var(--ui-surface-ink);
1927
2071
  }
@@ -1939,6 +2083,9 @@
1939
2083
  --ui-surface-separator: var(--ui-surface-edge);
1940
2084
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1941
2085
  --ui-matched-elevation: var(--ui-local-elevation-8);
2086
+ }
2087
+
2088
+ :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
1942
2089
  background-color: var(--ui-surface-color);
1943
2090
  color: var(--ui-surface-ink);
1944
2091
  }
@@ -1956,6 +2103,9 @@
1956
2103
  --ui-surface-separator: var(--ui-surface-edge);
1957
2104
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1958
2105
  --ui-matched-elevation: var(--ui-local-elevation-5);
2106
+ }
2107
+
2108
+ :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
1959
2109
  background-color: var(--ui-surface-color);
1960
2110
  color: var(--ui-surface-ink);
1961
2111
  }
@@ -1973,6 +2123,9 @@
1973
2123
  --ui-surface-separator: var(--ui-surface-edge);
1974
2124
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1975
2125
  --ui-matched-elevation: var(--ui-local-elevation-6);
2126
+ }
2127
+
2128
+ :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
1976
2129
  background-color: var(--ui-surface-color);
1977
2130
  color: var(--ui-surface-ink);
1978
2131
  }
@@ -1990,6 +2143,9 @@
1990
2143
  --ui-surface-separator: var(--ui-surface-edge);
1991
2144
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
1992
2145
  --ui-matched-elevation: var(--ui-local-elevation-7);
2146
+ }
2147
+
2148
+ :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
1993
2149
  background-color: var(--ui-surface-color);
1994
2150
  color: var(--ui-surface-ink);
1995
2151
  }
@@ -2007,6 +2163,9 @@
2007
2163
  --ui-surface-separator: var(--ui-surface-edge);
2008
2164
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2009
2165
  --ui-matched-elevation: var(--ui-local-elevation-8);
2166
+ }
2167
+
2168
+ :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
2010
2169
  background-color: var(--ui-surface-color);
2011
2170
  color: var(--ui-surface-ink);
2012
2171
  }
@@ -2024,6 +2183,9 @@
2024
2183
  --ui-surface-separator: var(--ui-surface-edge);
2025
2184
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2026
2185
  --ui-matched-elevation: var(--ui-local-elevation-8);
2186
+ }
2187
+
2188
+ :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
2027
2189
  background-color: var(--ui-surface-color);
2028
2190
  color: var(--ui-surface-ink);
2029
2191
  }
@@ -2041,6 +2203,9 @@
2041
2203
  --ui-surface-separator: var(--ui-surface-edge);
2042
2204
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2043
2205
  --ui-matched-elevation: var(--ui-local-elevation-8);
2206
+ }
2207
+
2208
+ :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
2044
2209
  background-color: var(--ui-surface-color);
2045
2210
  color: var(--ui-surface-ink);
2046
2211
  }
@@ -2058,6 +2223,9 @@
2058
2223
  --ui-surface-separator: var(--ui-surface-edge);
2059
2224
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2060
2225
  --ui-matched-elevation: var(--ui-local-elevation-8);
2226
+ }
2227
+
2228
+ :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
2061
2229
  background-color: var(--ui-surface-color);
2062
2230
  color: var(--ui-surface-ink);
2063
2231
  }
@@ -2075,6 +2243,9 @@
2075
2243
  --ui-surface-separator: var(--ui-surface-edge);
2076
2244
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2077
2245
  --ui-matched-elevation: var(--ui-local-elevation-8);
2246
+ }
2247
+
2248
+ :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
2078
2249
  background-color: var(--ui-surface-color);
2079
2250
  color: var(--ui-surface-ink);
2080
2251
  }
@@ -2092,6 +2263,9 @@
2092
2263
  --ui-surface-separator: var(--ui-surface-edge);
2093
2264
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2094
2265
  --ui-matched-elevation: var(--ui-local-elevation-6);
2266
+ }
2267
+
2268
+ :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
2095
2269
  background-color: var(--ui-surface-color);
2096
2270
  color: var(--ui-surface-ink);
2097
2271
  }
@@ -2109,6 +2283,9 @@
2109
2283
  --ui-surface-separator: var(--ui-surface-edge);
2110
2284
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2111
2285
  --ui-matched-elevation: var(--ui-local-elevation-7);
2286
+ }
2287
+
2288
+ :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
2112
2289
  background-color: var(--ui-surface-color);
2113
2290
  color: var(--ui-surface-ink);
2114
2291
  }
@@ -2126,6 +2303,9 @@
2126
2303
  --ui-surface-separator: var(--ui-surface-edge);
2127
2304
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2128
2305
  --ui-matched-elevation: var(--ui-local-elevation-8);
2306
+ }
2307
+
2308
+ :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
2129
2309
  background-color: var(--ui-surface-color);
2130
2310
  color: var(--ui-surface-ink);
2131
2311
  }
@@ -2143,6 +2323,9 @@
2143
2323
  --ui-surface-separator: var(--ui-surface-edge);
2144
2324
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2145
2325
  --ui-matched-elevation: var(--ui-local-elevation-8);
2326
+ }
2327
+
2328
+ :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
2146
2329
  background-color: var(--ui-surface-color);
2147
2330
  color: var(--ui-surface-ink);
2148
2331
  }
@@ -2160,6 +2343,9 @@
2160
2343
  --ui-surface-separator: var(--ui-surface-edge);
2161
2344
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2162
2345
  --ui-matched-elevation: var(--ui-local-elevation-8);
2346
+ }
2347
+
2348
+ :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
2163
2349
  background-color: var(--ui-surface-color);
2164
2350
  color: var(--ui-surface-ink);
2165
2351
  }
@@ -2177,6 +2363,9 @@
2177
2363
  --ui-surface-separator: var(--ui-surface-edge);
2178
2364
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2179
2365
  --ui-matched-elevation: var(--ui-local-elevation-8);
2366
+ }
2367
+
2368
+ :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
2180
2369
  background-color: var(--ui-surface-color);
2181
2370
  color: var(--ui-surface-ink);
2182
2371
  }
@@ -2194,6 +2383,9 @@
2194
2383
  --ui-surface-separator: var(--ui-surface-edge);
2195
2384
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2196
2385
  --ui-matched-elevation: var(--ui-local-elevation-8);
2386
+ }
2387
+
2388
+ :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
2197
2389
  background-color: var(--ui-surface-color);
2198
2390
  color: var(--ui-surface-ink);
2199
2391
  }
@@ -2211,6 +2403,9 @@
2211
2403
  --ui-surface-separator: var(--ui-surface-edge);
2212
2404
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2213
2405
  --ui-matched-elevation: var(--ui-local-elevation-8);
2406
+ }
2407
+
2408
+ :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
2214
2409
  background-color: var(--ui-surface-color);
2215
2410
  color: var(--ui-surface-ink);
2216
2411
  }
@@ -2228,6 +2423,9 @@
2228
2423
  --ui-surface-separator: var(--ui-surface-edge);
2229
2424
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2230
2425
  --ui-matched-elevation: var(--ui-local-elevation-7);
2426
+ }
2427
+
2428
+ :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
2231
2429
  background-color: var(--ui-surface-color);
2232
2430
  color: var(--ui-surface-ink);
2233
2431
  }
@@ -2245,6 +2443,9 @@
2245
2443
  --ui-surface-separator: var(--ui-surface-edge);
2246
2444
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2247
2445
  --ui-matched-elevation: var(--ui-local-elevation-8);
2446
+ }
2447
+
2448
+ :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
2248
2449
  background-color: var(--ui-surface-color);
2249
2450
  color: var(--ui-surface-ink);
2250
2451
  }
@@ -2262,6 +2463,9 @@
2262
2463
  --ui-surface-separator: var(--ui-surface-edge);
2263
2464
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2264
2465
  --ui-matched-elevation: var(--ui-local-elevation-8);
2466
+ }
2467
+
2468
+ :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
2265
2469
  background-color: var(--ui-surface-color);
2266
2470
  color: var(--ui-surface-ink);
2267
2471
  }
@@ -2279,6 +2483,9 @@
2279
2483
  --ui-surface-separator: var(--ui-surface-edge);
2280
2484
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2281
2485
  --ui-matched-elevation: var(--ui-local-elevation-8);
2486
+ }
2487
+
2488
+ :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
2282
2489
  background-color: var(--ui-surface-color);
2283
2490
  color: var(--ui-surface-ink);
2284
2491
  }
@@ -2296,6 +2503,9 @@
2296
2503
  --ui-surface-separator: var(--ui-surface-edge);
2297
2504
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2298
2505
  --ui-matched-elevation: var(--ui-local-elevation-8);
2506
+ }
2507
+
2508
+ :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
2299
2509
  background-color: var(--ui-surface-color);
2300
2510
  color: var(--ui-surface-ink);
2301
2511
  }
@@ -2313,6 +2523,9 @@
2313
2523
  --ui-surface-separator: var(--ui-surface-edge);
2314
2524
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2315
2525
  --ui-matched-elevation: var(--ui-local-elevation-8);
2526
+ }
2527
+
2528
+ :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
2316
2529
  background-color: var(--ui-surface-color);
2317
2530
  color: var(--ui-surface-ink);
2318
2531
  }
@@ -2330,6 +2543,9 @@
2330
2543
  --ui-surface-separator: var(--ui-surface-edge);
2331
2544
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2332
2545
  --ui-matched-elevation: var(--ui-local-elevation-8);
2546
+ }
2547
+
2548
+ :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
2333
2549
  background-color: var(--ui-surface-color);
2334
2550
  color: var(--ui-surface-ink);
2335
2551
  }
@@ -2347,6 +2563,9 @@
2347
2563
  --ui-surface-separator: var(--ui-surface-edge);
2348
2564
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2349
2565
  --ui-matched-elevation: var(--ui-local-elevation-8);
2566
+ }
2567
+
2568
+ :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
2350
2569
  background-color: var(--ui-surface-color);
2351
2570
  color: var(--ui-surface-ink);
2352
2571
  }
@@ -2364,6 +2583,9 @@
2364
2583
  --ui-surface-separator: var(--ui-surface-edge);
2365
2584
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2366
2585
  --ui-matched-elevation: var(--ui-local-elevation-8);
2586
+ }
2587
+
2588
+ :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
2367
2589
  background-color: var(--ui-surface-color);
2368
2590
  color: var(--ui-surface-ink);
2369
2591
  }
@@ -2381,6 +2603,9 @@
2381
2603
  --ui-surface-separator: var(--ui-surface-edge);
2382
2604
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2383
2605
  --ui-matched-elevation: var(--ui-local-elevation-8);
2606
+ }
2607
+
2608
+ :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
2384
2609
  background-color: var(--ui-surface-color);
2385
2610
  color: var(--ui-surface-ink);
2386
2611
  }
@@ -2398,6 +2623,9 @@
2398
2623
  --ui-surface-separator: var(--ui-surface-edge);
2399
2624
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2400
2625
  --ui-matched-elevation: var(--ui-local-elevation-8);
2626
+ }
2627
+
2628
+ :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
2401
2629
  background-color: var(--ui-surface-color);
2402
2630
  color: var(--ui-surface-ink);
2403
2631
  }
@@ -2415,6 +2643,9 @@
2415
2643
  --ui-surface-separator: var(--ui-surface-edge);
2416
2644
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2417
2645
  --ui-matched-elevation: var(--ui-local-elevation-8);
2646
+ }
2647
+
2648
+ :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
2418
2649
  background-color: var(--ui-surface-color);
2419
2650
  color: var(--ui-surface-ink);
2420
2651
  }
@@ -2432,6 +2663,9 @@
2432
2663
  --ui-surface-separator: var(--ui-surface-edge);
2433
2664
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2434
2665
  --ui-matched-elevation: var(--ui-local-elevation-8);
2666
+ }
2667
+
2668
+ :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
2435
2669
  background-color: var(--ui-surface-color);
2436
2670
  color: var(--ui-surface-ink);
2437
2671
  }
@@ -2449,6 +2683,9 @@
2449
2683
  --ui-surface-separator: var(--ui-surface-edge);
2450
2684
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2451
2685
  --ui-matched-elevation: var(--ui-local-elevation-8);
2686
+ }
2687
+
2688
+ :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
2452
2689
  background-color: var(--ui-surface-color);
2453
2690
  color: var(--ui-surface-ink);
2454
2691
  }
@@ -2466,6 +2703,9 @@
2466
2703
  --ui-surface-separator: var(--ui-surface-edge);
2467
2704
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2468
2705
  --ui-matched-elevation: var(--ui-local-elevation-8);
2706
+ }
2707
+
2708
+ :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
2469
2709
  background-color: var(--ui-surface-color);
2470
2710
  color: var(--ui-surface-ink);
2471
2711
  }
@@ -2483,6 +2723,9 @@
2483
2723
  --ui-surface-separator: var(--ui-surface-edge);
2484
2724
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2485
2725
  --ui-matched-elevation: var(--ui-local-elevation-8);
2726
+ }
2727
+
2728
+ :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
2486
2729
  background-color: var(--ui-surface-color);
2487
2730
  color: var(--ui-surface-ink);
2488
2731
  }
@@ -2500,6 +2743,9 @@
2500
2743
  --ui-surface-separator: var(--ui-surface-edge);
2501
2744
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2502
2745
  --ui-matched-elevation: var(--ui-local-elevation-8);
2746
+ }
2747
+
2748
+ :where([data-ui-surface="+1"]:not([data-ui-semantic-surface])) {
2503
2749
  background-color: var(--ui-surface-color);
2504
2750
  color: var(--ui-surface-ink);
2505
2751
  }
@@ -2517,6 +2763,9 @@
2517
2763
  --ui-surface-separator: var(--ui-surface-edge);
2518
2764
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2519
2765
  --ui-matched-elevation: var(--ui-local-elevation-8);
2766
+ }
2767
+
2768
+ :where([data-ui-surface="+2"]:not([data-ui-semantic-surface])) {
2520
2769
  background-color: var(--ui-surface-color);
2521
2770
  color: var(--ui-surface-ink);
2522
2771
  }
@@ -2534,6 +2783,9 @@
2534
2783
  --ui-surface-separator: var(--ui-surface-edge);
2535
2784
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2536
2785
  --ui-matched-elevation: var(--ui-local-elevation-8);
2786
+ }
2787
+
2788
+ :where([data-ui-surface="+3"]:not([data-ui-semantic-surface])) {
2537
2789
  background-color: var(--ui-surface-color);
2538
2790
  color: var(--ui-surface-ink);
2539
2791
  }
@@ -2551,6 +2803,9 @@
2551
2803
  --ui-surface-separator: var(--ui-surface-edge);
2552
2804
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2553
2805
  --ui-matched-elevation: var(--ui-local-elevation-8);
2806
+ }
2807
+
2808
+ :where([data-ui-surface="+4"]:not([data-ui-semantic-surface])) {
2554
2809
  background-color: var(--ui-surface-color);
2555
2810
  color: var(--ui-surface-ink);
2556
2811
  }
@@ -2568,6 +2823,9 @@
2568
2823
  --ui-surface-separator: var(--ui-surface-edge);
2569
2824
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2570
2825
  --ui-matched-elevation: var(--ui-local-elevation-8);
2826
+ }
2827
+
2828
+ :where([data-ui-surface="+5"]:not([data-ui-semantic-surface])) {
2571
2829
  background-color: var(--ui-surface-color);
2572
2830
  color: var(--ui-surface-ink);
2573
2831
  }
@@ -2585,6 +2843,9 @@
2585
2843
  --ui-surface-separator: var(--ui-surface-edge);
2586
2844
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2587
2845
  --ui-matched-elevation: var(--ui-local-elevation-8);
2846
+ }
2847
+
2848
+ :where([data-ui-surface="+6"]:not([data-ui-semantic-surface])) {
2588
2849
  background-color: var(--ui-surface-color);
2589
2850
  color: var(--ui-surface-ink);
2590
2851
  }
@@ -2602,6 +2863,9 @@
2602
2863
  --ui-surface-separator: var(--ui-surface-edge);
2603
2864
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2604
2865
  --ui-matched-elevation: var(--ui-local-elevation-8);
2866
+ }
2867
+
2868
+ :where([data-ui-surface="+7"]:not([data-ui-semantic-surface])) {
2605
2869
  background-color: var(--ui-surface-color);
2606
2870
  color: var(--ui-surface-ink);
2607
2871
  }
@@ -2619,6 +2883,9 @@
2619
2883
  --ui-surface-separator: var(--ui-surface-edge);
2620
2884
  --ui-surface-separator-muted: color-mix(in oklab, var(--ui-surface-edge) 60%, transparent);
2621
2885
  --ui-matched-elevation: var(--ui-local-elevation-8);
2886
+ }
2887
+
2888
+ :where([data-ui-surface="+8"]:not([data-ui-semantic-surface])) {
2622
2889
  background-color: var(--ui-surface-color);
2623
2890
  color: var(--ui-surface-ink);
2624
2891
  }