@studiolxd/brand 49.28.0 → 50.0.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 (279) hide show
  1. package/LICENSE +61 -0
  2. package/README.md +26 -4
  3. package/dist/_shared/assign-ref.js +6 -0
  4. package/dist/_shared/calendargrid.js +57 -57
  5. package/dist/_shared/datepicker.js +67 -65
  6. package/dist/_shared/default-render-link.js +7 -0
  7. package/dist/_shared/dialogsurface.js +1 -1
  8. package/dist/_shared/dropdownitems.js +14 -20
  9. package/dist/_shared/imagecropdialog.js +38 -441
  10. package/dist/_shared/overflow-focusable.js +15 -0
  11. package/dist/_shared/side-offset.js +13 -0
  12. package/dist/_shared/tokens.js +31 -129
  13. package/dist/_shared/useasyncoptions.js +30 -0
  14. package/dist/_types/atoms/Accordion/Accordion.d.ts +7 -1
  15. package/dist/_types/atoms/AsyncMultiSelect/AsyncMultiSelect.d.ts +8 -4
  16. package/dist/_types/atoms/AsyncSelect/AsyncSelect.d.ts +8 -4
  17. package/dist/_types/atoms/Autocomplete/Autocomplete.d.ts +10 -6
  18. package/dist/_types/atoms/CloseButton/CloseButton.d.ts +13 -3
  19. package/dist/_types/atoms/Fieldset/Fieldset.d.ts +1 -1
  20. package/dist/_types/atoms/InputPhone/InputPhone.d.ts +2 -0
  21. package/dist/_types/atoms/MultiSelect/MultiSelect.d.ts +11 -10
  22. package/dist/_types/atoms/Select/Select.d.ts +6 -0
  23. package/dist/_types/atoms/Skeleton/Skeleton.d.ts +1 -1
  24. package/dist/_types/atoms/Spinner/Spinner.d.ts +3 -1
  25. package/dist/_types/atoms/TypingIndicator/TypingIndicator.d.ts +3 -1
  26. package/dist/_types/atoms/_shared/useAsyncOptions.d.ts +36 -0
  27. package/dist/_types/constants/assign-ref.d.ts +12 -0
  28. package/dist/_types/constants/default-render-link.d.ts +13 -0
  29. package/dist/_types/constants/overflow-focusable.d.ts +15 -0
  30. package/dist/_types/constants/side-offset.d.ts +18 -0
  31. package/dist/_types/email/EmailLayout.d.ts +38 -21
  32. package/dist/_types/messages/BrandMessages.d.ts +8 -2
  33. package/dist/_types/messages/index.d.ts +1 -1
  34. package/dist/_types/molecules/AppLauncher/AppLauncher.d.ts +9 -3
  35. package/dist/_types/molecules/Calendar/Calendar.d.ts +10 -1
  36. package/dist/_types/molecules/CalendarPlanner/CalendarPlanner.d.ts +43 -13
  37. package/dist/_types/molecules/CalendarRoster/CalendarRoster.d.ts +10 -2
  38. package/dist/_types/molecules/ContextMenu/ContextMenu.d.ts +8 -1
  39. package/dist/_types/molecules/DatePicker/DatePicker.d.ts +6 -0
  40. package/dist/_types/molecules/DateTimeField/DateTimeField.d.ts +2 -0
  41. package/dist/_types/molecules/DocsSearch/DocsSearch.d.ts +2 -2
  42. package/dist/_types/molecules/FloatingToolbar/FloatingToolbar.d.ts +83 -0
  43. package/dist/_types/molecules/FormField/FormField.d.ts +5 -6
  44. package/dist/_types/molecules/LanguageSwitcher/LanguageSwitcher.d.ts +7 -3
  45. package/dist/_types/molecules/LoadingRegion/LoadingRegion.d.ts +12 -4
  46. package/dist/_types/molecules/Modal/Modal.d.ts +10 -4
  47. package/dist/_types/molecules/OrgSwitcher/OrgSwitcher.d.ts +7 -1
  48. package/dist/_types/molecules/PasswordField/PasswordField.d.ts +9 -2
  49. package/dist/_types/molecules/PrevNextNav/PrevNextNav.d.ts +3 -1
  50. package/dist/_types/molecules/RecurrenceField/RecurrenceField.d.ts +6 -1
  51. package/dist/_types/molecules/SidebarNav/SidebarNav.d.ts +18 -2
  52. package/dist/_types/molecules/SiteNav/SiteNav.d.ts +4 -1
  53. package/dist/_types/molecules/StatTile/StatTile.d.ts +15 -1
  54. package/dist/_types/molecules/Table/Table.d.ts +1 -1
  55. package/dist/_types/molecules/ThemeSwitcher/ThemeSwitcher.d.ts +38 -3
  56. package/dist/_types/molecules/Toast/Toaster.d.ts +8 -0
  57. package/dist/_types/molecules/UserMenu/UserMenu.d.ts +7 -1
  58. package/dist/_types/molecules/_shared/calendarGrid.d.ts +15 -2
  59. package/dist/_types/molecules/_shared/dialogSurface.d.ts +6 -1
  60. package/dist/_types/molecules/_shared/dropdownItems.d.ts +0 -2
  61. package/dist/_types/sections/AppHeader/AppHeader.d.ts +3 -1
  62. package/dist/_types/sections/AppShell/AppShell.d.ts +6 -1
  63. package/dist/_types/sections/LegalFooter/LegalFooter.d.ts +7 -1
  64. package/dist/_types/sections/Sidebar/Sidebar.d.ts +3 -1
  65. package/dist/_types/sections/SiteFooter/SiteFooter.d.ts +6 -2
  66. package/dist/_types/sections/SiteHeader/SiteHeader.d.ts +2 -2
  67. package/dist/_types/templates/ConnectorAuth/ConnectorAuthShell.d.ts +5 -2
  68. package/dist/_types/templates/ConnectorAuth/ConnectorConsentPage.d.ts +1 -1
  69. package/dist/_types/templates/ConnectorAuth/ConnectorExternalSignInPage.d.ts +1 -1
  70. package/dist/_types/templates/ConnectorAuth/ConnectorRejectionPage.d.ts +1 -1
  71. package/dist/_types/templates/ConnectorAuth/ConnectorSignInPage.d.ts +1 -1
  72. package/dist/_types/templates/ErrorPage/ErrorPage.d.ts +7 -1
  73. package/dist/_types/templates/NotFoundPage/NotFoundPage.d.ts +7 -1
  74. package/dist/_types/templates/PublicPageShell/PublicPageShell.d.ts +6 -0
  75. package/dist/accordion.css +1 -1
  76. package/dist/accordion.js +6 -5
  77. package/dist/alert.css +1 -1
  78. package/dist/app-header.js +16 -21
  79. package/dist/app-launcher.css +1 -1
  80. package/dist/app-launcher.js +29 -21
  81. package/dist/app-shell.js +43 -43
  82. package/dist/async-multi-select.css +1 -1
  83. package/dist/async-multi-select.js +104 -173
  84. package/dist/async-select.css +1 -1
  85. package/dist/async-select.js +81 -137
  86. package/dist/autocomplete.css +1 -1
  87. package/dist/autocomplete.js +76 -115
  88. package/dist/brand.css +77 -987
  89. package/dist/breadcrumb.js +11 -16
  90. package/dist/button.css +1 -1
  91. package/dist/calendar-planner.css +1 -1
  92. package/dist/calendar-planner.js +100 -95
  93. package/dist/calendar-roster.css +1 -1
  94. package/dist/calendar-roster.js +69 -61
  95. package/dist/calendar.css +1 -1
  96. package/dist/calendar.js +86 -85
  97. package/dist/card.css +1 -1
  98. package/dist/card.js +42 -41
  99. package/dist/chart.css +1 -1
  100. package/dist/chat-shell.js +48 -47
  101. package/dist/checkbox.css +1 -1
  102. package/dist/close-button.js +14 -12
  103. package/dist/command-palette.css +1 -1
  104. package/dist/connector-consent-page.js +19 -18
  105. package/dist/connector-external-sign-in-page.js +6 -5
  106. package/dist/connector-rejection-page.js +5 -4
  107. package/dist/connector-sign-in-page.js +10 -9
  108. package/dist/consent.css +1 -1
  109. package/dist/context-menu.js +3 -2
  110. package/dist/conversation-list.css +1 -1
  111. package/dist/conversation-thread.css +1 -1
  112. package/dist/conversation-thread.js +1 -0
  113. package/dist/data-table.js +74 -1625
  114. package/dist/date-time-field.js +7 -6
  115. package/dist/docs-search.js +36 -38
  116. package/dist/email.js +10 -7
  117. package/dist/error-page.js +2 -2
  118. package/dist/fieldset.css +1 -1
  119. package/dist/figure.js +1 -0
  120. package/dist/file-upload.css +1 -1
  121. package/dist/file-upload.js +48 -50
  122. package/dist/floating-toolbar.css +1 -0
  123. package/dist/floating-toolbar.js +64 -0
  124. package/dist/form-field.js +55 -53
  125. package/dist/imagecropdialog.css +1 -1
  126. package/dist/input-phone.css +1 -1
  127. package/dist/input-phone.js +30 -31
  128. package/dist/input.css +1 -1
  129. package/dist/label.css +1 -1
  130. package/dist/language-switcher.js +37 -44
  131. package/dist/legal-footer.js +12 -17
  132. package/dist/loading-region.css +1 -1
  133. package/dist/loading-region.js +8 -8
  134. package/dist/menu.css +1 -1
  135. package/dist/menu.js +4 -3
  136. package/dist/message-bubble.css +1 -1
  137. package/dist/message-composer.css +1 -1
  138. package/dist/modal.css +1 -1
  139. package/dist/modal.js +9 -9
  140. package/dist/multi-select.css +1 -1
  141. package/dist/multi-select.js +104 -172
  142. package/dist/not-found-page.js +8 -5
  143. package/dist/notification-list.js +16 -21
  144. package/dist/notification-panel.js +34 -46
  145. package/dist/number-badge.css +1 -1
  146. package/dist/number-input.css +1 -1
  147. package/dist/org-switcher.css +1 -1
  148. package/dist/org-switcher.js +13 -11
  149. package/dist/password-field.js +40 -39
  150. package/dist/popover.css +1 -1
  151. package/dist/popover.js +9 -15
  152. package/dist/prev-next-nav.js +8 -7
  153. package/dist/public-page-shell.js +7 -6
  154. package/dist/radio.css +1 -1
  155. package/dist/recurrence-field.css +1 -1
  156. package/dist/recurrence-field.js +38 -37
  157. package/dist/select.css +1 -1
  158. package/dist/select.js +3 -2
  159. package/dist/sheet.css +1 -1
  160. package/dist/sidebar-nav.css +1 -1
  161. package/dist/sidebar-nav.js +75 -70
  162. package/dist/sidebar.css +1 -1
  163. package/dist/sidebar.js +46 -42
  164. package/dist/site-footer.js +28 -28
  165. package/dist/site-header.js +39 -44
  166. package/dist/site-nav.js +10 -19
  167. package/dist/site-search.js +34 -36
  168. package/dist/site-shell.js +17 -16
  169. package/dist/skeleton.js +8 -6
  170. package/dist/sortable.js +20 -19
  171. package/dist/spinner.js +11 -7
  172. package/dist/stat-tile.js +24 -26
  173. package/dist/switcher.css +1 -1
  174. package/dist/table.css +1 -1
  175. package/dist/table.js +57 -45
  176. package/dist/textarea.css +1 -1
  177. package/dist/theme-switcher.js +57 -56
  178. package/dist/toaster.css +1 -1
  179. package/dist/toggle.css +1 -1
  180. package/dist/tokens.css +75 -986
  181. package/dist/tooltip.css +1 -1
  182. package/dist/tooltip.js +20 -27
  183. package/dist/typing-indicator.css +1 -1
  184. package/dist/typing-indicator.js +4 -4
  185. package/dist/user-menu.css +1 -1
  186. package/dist/user-menu.js +38 -45
  187. package/dist/visuallyhidden.css +1 -1
  188. package/package.json +26 -14
  189. package/src/tokens/components/async-multi-select.css +4 -0
  190. package/src/tokens/components/async-select.css +3 -0
  191. package/src/tokens/components/autocomplete.css +1 -0
  192. package/src/tokens/components/breadcrumb.css +0 -2
  193. package/src/tokens/components/button.css +0 -23
  194. package/src/tokens/components/control.css +0 -4
  195. package/src/tokens/components/file-upload.css +0 -4
  196. package/src/tokens/components/radio.css +2 -0
  197. package/src/tokens/components/site-header.css +0 -1
  198. package/src/tokens/index.css +5 -7
  199. package/src/tokens/molecules/async-multi-select-field.css +0 -6
  200. package/src/tokens/molecules/async-select-field.css +0 -6
  201. package/src/tokens/molecules/autocomplete-field.css +0 -5
  202. package/src/tokens/molecules/avatar-upload.css +0 -6
  203. package/src/tokens/molecules/calendar-roster.css +5 -0
  204. package/src/tokens/molecules/chart.css +0 -3
  205. package/src/tokens/molecules/checkbox-field.css +0 -6
  206. package/src/tokens/molecules/consent.css +1 -0
  207. package/src/tokens/molecules/conversation-thread.css +10 -0
  208. package/src/tokens/molecules/date-picker-field.css +0 -6
  209. package/src/tokens/molecules/date-time-field.css +0 -6
  210. package/src/tokens/molecules/dropdown-field.css +0 -6
  211. package/src/tokens/molecules/file-upload-field.css +0 -6
  212. package/src/tokens/molecules/floating-toolbar.css +18 -0
  213. package/src/tokens/molecules/floating-toolbar.ts +4 -0
  214. package/src/tokens/molecules/input-field.css +0 -1
  215. package/src/tokens/molecules/input-phone-field.css +0 -6
  216. package/src/tokens/molecules/modal.css +1 -0
  217. package/src/tokens/molecules/multi-select-field.css +0 -6
  218. package/src/tokens/molecules/number-input-field.css +0 -6
  219. package/src/tokens/molecules/otp-field.css +0 -6
  220. package/src/tokens/molecules/radio-field.css +0 -6
  221. package/src/tokens/molecules/recurrence-field.css +1 -0
  222. package/src/tokens/molecules/select-field.css +0 -6
  223. package/src/tokens/molecules/sidebar-nav.css +0 -6
  224. package/src/tokens/molecules/site-search.css +0 -2
  225. package/src/tokens/molecules/switcher-field.css +0 -1
  226. package/src/tokens/molecules/table.css +1 -0
  227. package/src/tokens/molecules/textarea-field.css +0 -6
  228. package/src/tokens/molecules/time-field.css +0 -6
  229. package/src/tokens/scss/_index.legacy.scss +1 -0
  230. package/src/tokens/scss/_index.scss +1 -0
  231. package/src/tokens/scss/components/_async-multi-select.scss +4 -0
  232. package/src/tokens/scss/components/_async-select.scss +3 -0
  233. package/src/tokens/scss/components/_autocomplete.scss +1 -0
  234. package/src/tokens/scss/components/_breadcrumb.scss +0 -2
  235. package/src/tokens/scss/components/_button.scss +0 -23
  236. package/src/tokens/scss/components/_control.scss +0 -4
  237. package/src/tokens/scss/components/_file-upload.scss +0 -4
  238. package/src/tokens/scss/components/_site-header.scss +0 -1
  239. package/src/tokens/scss/molecules/_async-multi-select-field.scss +0 -5
  240. package/src/tokens/scss/molecules/_async-select-field.scss +0 -5
  241. package/src/tokens/scss/molecules/_autocomplete-field.scss +0 -5
  242. package/src/tokens/scss/molecules/_avatar-upload.scss +0 -5
  243. package/src/tokens/scss/molecules/_calendar-roster.scss +4 -0
  244. package/src/tokens/scss/molecules/_chart.scss +0 -2
  245. package/src/tokens/scss/molecules/_checkbox-field.scss +0 -5
  246. package/src/tokens/scss/molecules/_consent.scss +1 -0
  247. package/src/tokens/scss/molecules/_conversation-thread.scss +3 -0
  248. package/src/tokens/scss/molecules/_date-picker-field.scss +0 -5
  249. package/src/tokens/scss/molecules/_date-time-field.scss +0 -5
  250. package/src/tokens/scss/molecules/_dropdown-field.scss +0 -5
  251. package/src/tokens/scss/molecules/_file-upload-field.scss +0 -5
  252. package/src/tokens/scss/molecules/_floating-toolbar.scss +15 -0
  253. package/src/tokens/scss/molecules/_input-field.scss +0 -1
  254. package/src/tokens/scss/molecules/_input-phone-field.scss +0 -5
  255. package/src/tokens/scss/molecules/_modal.scss +1 -0
  256. package/src/tokens/scss/molecules/_multi-select-field.scss +0 -5
  257. package/src/tokens/scss/molecules/_number-input-field.scss +0 -5
  258. package/src/tokens/scss/molecules/_otp-field.scss +0 -5
  259. package/src/tokens/scss/molecules/_radio-field.scss +0 -5
  260. package/src/tokens/scss/molecules/_recurrence-field.scss +1 -0
  261. package/src/tokens/scss/molecules/_select-field.scss +0 -5
  262. package/src/tokens/scss/molecules/_sidebar-nav.scss +0 -4
  263. package/src/tokens/scss/molecules/_site-search.scss +0 -2
  264. package/src/tokens/scss/molecules/_switcher-field.scss +0 -1
  265. package/src/tokens/scss/molecules/_table.scss +1 -0
  266. package/src/tokens/scss/molecules/_textarea-field.scss +0 -5
  267. package/src/tokens/scss/molecules/_time-field.scss +0 -5
  268. package/src/tokens/surface-dark-derived.css +2 -1
  269. package/src/tokens/surface-invert.css +15 -21
  270. package/src/tokens/surface-public.css +0 -19
  271. package/src/tokens/tokens.json +31 -129
  272. package/CHANGELOG.md +0 -8154
  273. package/dist/_types/data/home.d.ts +0 -83
  274. package/dist/_types/pages/Auth/AuthPage.d.ts +0 -24
  275. package/dist/_types/pages/Onboarding/OnboardingPage.d.ts +0 -37
  276. package/dist/_types/pages/Status/StatusPage.d.ts +0 -37
  277. package/dist/_types/pages/Status/_datos.d.ts +0 -47
  278. package/src/tokens/surface-light.css +0 -782
  279. package/src/tokens/utils.test.ts +0 -86
package/src/tokens/surface-invert.css CHANGED
@@ -4,11 +4,19 @@
4
4
  * Superficie invertida dentro de una oscura: `.surface-invert` vuelve a poner
5
5
  * en claro todo token que el modo oscuro haya volteado. Sobre página clara no
6
6
  * hace falta bloque: `.surface-invert` ya es uno de los selectores oscuros.
7
+ *
8
+ * Superficie siempre clara: `.surface-light` devuelve a su valor claro los
9
+ * mismos tokens, con los mismos valores, cuando cae dentro de una superficie
10
+ * oscura. Por eso comparte bloque. Sobre página clara no hace falta nada.
7
11
  */
8
12
 
9
13
  .surface-dark .surface-invert,
10
14
  [data-theme="dark"] .surface-invert,
11
- html.dark .surface-invert {
15
+ html.dark .surface-invert,
16
+ .surface-dark .surface-light,
17
+ .surface-invert .surface-light,
18
+ [data-theme="dark"] .surface-light,
19
+ html.dark .surface-light {
12
20
  --accordion-border-color: var(--color-primary);
13
21
  --accordion-index-color: var(--color-text-muted-on-light);
14
22
  --accordion-focus-ring-color: var(--color-primary);
@@ -307,6 +315,8 @@ html.dark .surface-invert {
307
315
  --radio-error-border-color: var(--color-error-text-on-light);
308
316
  --radio-dot-color: var(--color-primary);
309
317
  --radio-focus-ring-color: var(--color-primary);
318
+ --radio-disabled-border-color: var(--color-disabled-border-on-light);
319
+ --radio-disabled-dot-color: var(--color-disabled-border-on-light);
310
320
  --scroll-area-thumb-bg: var(--color-border-default-on-light);
311
321
  --scroll-area-thumb-hover-bg: var(--color-icon-secondary-on-light);
312
322
  --scroll-area-focus-ring-color: var(--color-primary);
@@ -323,11 +333,9 @@ html.dark .surface-invert {
323
333
  --separator-color: var(--color-primary);
324
334
  --sidebar-nav-group-label-color: var(--color-primary);
325
335
  --sidebar-nav-item-color: var(--color-text-on-light);
326
- --sidebar-nav-item-active-color: var(--color-primary);
327
336
  --sidebar-nav-focus-ring-color: var(--color-primary);
328
337
  --sidebar-nav-item-empty-color: var(--color-text-muted-on-light);
329
338
  --sidebar-nav-item-empty-mark-color: var(--color-text-muted-on-light);
330
- --sidebar-nav-item-hover-line-color: var(--color-primary);
331
339
  --sidebar-bg: var(--color-background-light);
332
340
  --sidebar-border-color: var(--color-primary);
333
341
  --sidebar-resizer-hover-color: var(--color-primary);
@@ -448,15 +456,11 @@ html.dark .surface-invert {
448
456
  --user-menu-separator-color: var(--separator-color);
449
457
  --assistant-message-model-color: var(--color-text-on-light);
450
458
  --assistant-message-timestamp-color: var(--color-text-muted-on-light);
451
- --async-multi-select-field-error-color: var(--form-error-color);
452
459
  --async-multi-select-field-helper-color: var(--form-helper-color);
453
- --async-select-field-error-color: var(--form-error-color);
454
460
  --async-select-field-helper-color: var(--form-helper-color);
455
- --autocomplete-field-error-color: var(--async-select-field-error-color);
456
461
  --autocomplete-field-helper-color: var(--async-select-field-helper-color);
457
462
  --avatar-upload-ring-color: var(--color-primary);
458
463
  --avatar-upload-hint-color: var(--form-helper-color);
459
- --avatar-upload-error-color: var(--form-error-color);
460
464
  --calendar-planner-nav-color: var(--calendar-nav-color);
461
465
  --calendar-planner-nav-focus-ring-color: var(--calendar-nav-focus-ring-color);
462
466
  --calendar-planner-title-color: var(--calendar-title-color);
@@ -486,6 +490,7 @@ html.dark .surface-invert {
486
490
  --calendar-roster-cell-weekend-bg: var(--color-surface-secondary-on-light);
487
491
  --calendar-roster-cell-holiday-bg: var(--color-surface-secondary-on-light);
488
492
  --calendar-roster-cell-non-working-bg: var(--color-surface-secondary-on-light);
493
+ --calendar-roster-focus-ring-color: var(--color-primary);
489
494
  --calendar-roster-schedule-color: var(--color-text-on-light);
490
495
  --calendar-roster-legend-color: var(--color-text-muted-on-light);
491
496
  --calendar-nav-color: var(--color-text-on-light);
@@ -511,7 +516,6 @@ html.dark .surface-invert {
511
516
  --carousel-indicator-current-color: var(--color-text-on-light);
512
517
  --carousel-focus-ring-color: var(--color-primary);
513
518
  --checkbox-field-label-color: var(--text-color);
514
- --checkbox-field-error-color: var(--form-error-color);
515
519
  --checkbox-field-helper-color: var(--form-helper-color);
516
520
  --clock-widget-date-color: var(--color-text-muted-on-light);
517
521
  --clock-widget-status-color: var(--color-text-muted-on-light);
@@ -549,14 +553,13 @@ html.dark .surface-invert {
549
553
  --conversation-list-delete-color: var(--color-icon-secondary-on-light);
550
554
  --conversation-list-delete-hover-color: var(--color-destructive-text-on-light);
551
555
  --conversation-list-focus-ring-color: var(--color-primary);
552
- --date-picker-field-error-color: var(--form-error-color);
556
+ --conversation-thread-focus-ring-color: var(--color-primary);
553
557
  --date-picker-field-helper-color: var(--form-helper-color);
554
558
  --date-picker-button-color: var(--color-primary);
555
559
  --date-picker-button-hover-color: var(--color-primary);
556
560
  --date-picker-button-disabled-color: var(--input-disabled-color);
557
561
  --date-picker-button-focus-ring-color: var(--input-focus-border-color);
558
562
  --date-picker-message-color: var(--form-error-color);
559
- --date-time-field-error-color: var(--form-error-color);
560
563
  --date-time-field-helper-color: var(--form-helper-color);
561
564
  --docs-search-result-color: var(--color-text-on-light);
562
565
  --docs-search-result-excerpt-color: var(--color-text-muted-on-light);
@@ -569,11 +572,11 @@ html.dark .surface-invert {
569
572
  --dropdown-field-border-color: var(--select-border-color);
570
573
  --dropdown-field-focus-ring-color: var(--select-focus-ring-color);
571
574
  --dropdown-field-error-border-color: var(--select-error-border-color);
572
- --dropdown-field-error-color: var(--form-error-color);
573
575
  --dropdown-field-helper-color: var(--form-helper-color);
574
576
  --field-row-empty-color: var(--color-text-muted-on-light);
575
- --file-upload-field-error-color: var(--form-error-color);
576
577
  --file-upload-field-helper-color: var(--form-helper-color);
578
+ --floating-toolbar-bg: var(--floating-panel-bg);
579
+ --floating-toolbar-border-color: var(--floating-panel-border-color);
577
580
  --heatmap-border-color: var(--color-primary);
578
581
  --heatmap-row-header-color: var(--color-text-on-light);
579
582
  --heatmap-row-header-bg: var(--color-background-light);
@@ -602,7 +605,6 @@ html.dark .surface-invert {
602
605
  --input-field-search-clear-focus-ring-color: var(--color-primary);
603
606
  --input-field-error-color: var(--form-error-color);
604
607
  --input-field-helper-color: var(--form-helper-color);
605
- --input-phone-field-error-color: var(--form-error-color);
606
608
  --input-phone-field-helper-color: var(--form-helper-color);
607
609
  --language-switcher-focus-ring-color: var(--color-primary);
608
610
  --message-composer-border-color: var(--textarea-border-color);
@@ -612,13 +614,10 @@ html.dark .surface-invert {
612
614
  --message-composer-disabled-bg: var(--textarea-disabled-bg);
613
615
  --message-composer-disabled-border-color: var(--textarea-disabled-border-color);
614
616
  --message-composer-helper-color: var(--color-text-muted-on-light);
615
- --multi-select-field-error-color: var(--form-error-color);
616
617
  --multi-select-field-helper-color: var(--form-helper-color);
617
618
  --notification-list-time-color: var(--color-text-muted-on-light);
618
619
  --notification-panel-focus-ring-color: var(--color-primary);
619
- --number-input-field-error-color: var(--form-error-color);
620
620
  --number-input-field-helper-color: var(--form-helper-color);
621
- --otp-field-error-color: var(--form-error-color);
622
621
  --otp-field-helper-color: var(--form-helper-color);
623
622
  --prev-next-nav-eyebrow-color: var(--color-text-muted-on-light);
624
623
  --prev-next-nav-title-color: var(--color-text-on-light);
@@ -642,7 +641,6 @@ html.dark .surface-invert {
642
641
  --prose-rule-color: var(--separator-color);
643
642
  --prose-caption-color: var(--color-text-muted-on-light);
644
643
  --radio-field-label-color: var(--text-color);
645
- --radio-field-error-color: var(--form-error-color);
646
644
  --radio-field-helper-color: var(--form-helper-color);
647
645
  --recovery-codes-color: var(--color-text-on-light);
648
646
  --recovery-codes-index-color: var(--color-text-muted-on-light);
@@ -651,7 +649,6 @@ html.dark .surface-invert {
651
649
  --search-form-submit-hover-color: var(--color-primary);
652
650
  --search-form-submit-disabled-color: var(--input-disabled-color);
653
651
  --search-form-submit-focus-ring-color: var(--input-focus-border-color);
654
- --select-field-error-color: var(--form-error-color);
655
652
  --select-field-helper-color: var(--form-helper-color);
656
653
  --sheet-bg: var(--modal-bg);
657
654
  --sheet-title-color: var(--modal-title-color);
@@ -683,10 +680,8 @@ html.dark .surface-invert {
683
680
  --table-of-contents-item-active-color: var(--color-primary);
684
681
  --table-of-contents-item-active-marker-color: var(--color-primary);
685
682
  --table-of-contents-focus-ring-color: var(--color-primary);
686
- --textarea-field-error-color: var(--form-error-color);
687
683
  --textarea-field-helper-color: var(--form-helper-color);
688
684
  --theme-switcher-focus-ring-color: var(--color-primary);
689
- --time-field-error-color: var(--form-error-color);
690
685
  --time-field-helper-color: var(--form-helper-color);
691
686
  --timeline-rail-color: var(--color-border-default-on-light);
692
687
  --timeline-title-color: var(--color-text-on-light);
@@ -741,7 +736,6 @@ html.dark .surface-invert {
741
736
  --chart-radial-track-color: var(--color-icon-secondary-on-light);
742
737
  --chart-tile-label-color-5: var(--color-text-on-dark);
743
738
  --chart-tile-label-color-7: var(--color-text-on-dark);
744
- --chart-tile-label-color-muted: var(--color-text-on-dark);
745
739
  --chart-tooltip-bg: var(--tooltip-bg);
746
740
  --chart-tooltip-color: var(--tooltip-color);
747
741
  --chart-crosshair-color: var(--color-icon-secondary-on-light);
package/src/tokens/surface-public.css CHANGED
@@ -141,8 +141,6 @@
141
141
  --breadcrumb-font-size: var(--text-paragraph-small-font-size);
142
142
  --button-primary-font-size: var(--button-font-size);
143
143
  --button-primary-padding-inline: var(--button-padding-inline);
144
- --button-destructive-font-size: var(--button-font-size);
145
- --button-destructive-padding-inline: var(--button-padding-inline);
146
144
  --button-outline-font-size: var(--button-font-size);
147
145
  --button-outline-padding-inline: var(--button-padding-inline);
148
146
  --button-text-font-size: var(--button-font-size);
@@ -186,20 +184,15 @@
186
184
  --text-list-secondary-font-size: var(--text-paragraph-small-font-size);
187
185
  --assistant-message-model-font-size: var(--text-paragraph-small-font-size);
188
186
  --assistant-message-timestamp-font-size: var(--text-paragraph-small-font-size);
189
- --async-multi-select-field-error-font-size: var(--form-error-font-size);
190
187
  --async-multi-select-field-helper-font-size: var(--form-helper-font-size);
191
- --async-select-field-error-font-size: var(--form-error-font-size);
192
188
  --async-select-field-helper-font-size: var(--form-helper-font-size);
193
- --autocomplete-field-error-font-size: var(--async-select-field-error-font-size);
194
189
  --autocomplete-field-helper-font-size: var(--async-select-field-helper-font-size);
195
190
  --avatar-upload-hint-font-size: var(--form-helper-font-size);
196
- --avatar-upload-error-font-size: var(--form-error-font-size);
197
191
  --banner-font-size: var(--text-font-size);
198
192
  --banner-line-height: var(--text-line-height);
199
193
  --calendar-planner-title-font-size: var(--calendar-title-font-size);
200
194
  --checkbox-field-label-font-size: var(--text-font-size);
201
195
  --checkbox-field-label-line-height: var(--text-line-height);
202
- --checkbox-field-error-font-size: var(--form-error-font-size);
203
196
  --checkbox-field-helper-font-size: var(--form-helper-font-size);
204
197
  --clock-widget-date-font-size: var(--text-paragraph-small-font-size);
205
198
  --clock-widget-status-font-size: var(--text-paragraph-small-font-size);
@@ -208,18 +201,14 @@
208
201
  --consent-banner-title-font-size: var(--text-size-3);
209
202
  --consent-banner-description-font-size: var(--text-font-size);
210
203
  --conversation-list-item-font-size: var(--text-font-size);
211
- --date-picker-field-error-font-size: var(--form-error-font-size);
212
204
  --date-picker-field-helper-font-size: var(--form-helper-font-size);
213
205
  --date-picker-message-font-size: var(--form-error-font-size);
214
- --date-time-field-error-font-size: var(--form-error-font-size);
215
206
  --date-time-field-helper-font-size: var(--form-helper-font-size);
216
207
  --docs-search-result-title-font-size: var(--text-font-size);
217
208
  --docs-search-result-excerpt-font-size: var(--text-paragraph-small-font-size);
218
209
  --docs-search-status-font-size: var(--text-paragraph-small-font-size);
219
- --dropdown-field-error-font-size: var(--form-error-font-size);
220
210
  --dropdown-field-helper-font-size: var(--form-helper-font-size);
221
211
  --field-row-empty-font-size: var(--text-paragraph-small-font-size);
222
- --file-upload-field-error-font-size: var(--form-error-font-size);
223
212
  --file-upload-field-helper-font-size: var(--form-helper-font-size);
224
213
  --filter-bar-label-offset: calc(var(--label-font-size) * var(--label-line-height) + var(--input-field-gap));
225
214
  --filter-bar-control-block-size: var(--control-height);
@@ -227,10 +216,8 @@
227
216
  --input-field-search-input-padding-inline-end: var(--input-field-search-slot-size);
228
217
  --input-field-error-font-size: var(--form-error-font-size);
229
218
  --input-field-helper-font-size: var(--form-helper-font-size);
230
- --input-phone-field-error-font-size: var(--form-error-font-size);
231
219
  --input-phone-field-helper-font-size: var(--form-helper-font-size);
232
220
  --message-composer-helper-font-size: var(--text-paragraph-small-font-size);
233
- --multi-select-field-error-font-size: var(--form-error-font-size);
234
221
  --multi-select-field-helper-font-size: var(--form-helper-font-size);
235
222
  --notification-list-title-font-size: var(--text-font-size);
236
223
  --notification-list-body-font-size: var(--text-font-size);
@@ -239,9 +226,7 @@
239
226
  --notification-panel-item-body-font-size: var(--text-paragraph-small-font-size);
240
227
  --notification-panel-item-time-font-size: var(--text-paragraph-small-font-size);
241
228
  --notification-panel-footer-font-size: var(--text-paragraph-small-font-size);
242
- --number-input-field-error-font-size: var(--form-error-font-size);
243
229
  --number-input-field-helper-font-size: var(--form-helper-font-size);
244
- --otp-field-error-font-size: var(--form-error-font-size);
245
230
  --otp-field-helper-font-size: var(--form-helper-font-size);
246
231
  --prev-next-nav-font-size: var(--text-font-size);
247
232
  --prev-next-nav-eyebrow-font-size: var(--text-paragraph-small-font-size);
@@ -253,12 +238,10 @@
253
238
  --prose-caption-font-size: var(--text-paragraph-small-font-size);
254
239
  --radio-field-label-font-size: var(--text-font-size);
255
240
  --radio-field-label-line-height: var(--text-line-height);
256
- --radio-field-error-font-size: var(--form-error-font-size);
257
241
  --radio-field-helper-font-size: var(--form-helper-font-size);
258
242
  --recovery-codes-font-size: var(--text-paragraph-small-font-size);
259
243
  --recurrence-field-legend-font-size: var(--label-font-size);
260
244
  --search-form-submit-input-padding-inline-end: var(--search-form-submit-slot-size);
261
- --select-field-error-font-size: var(--form-error-font-size);
262
245
  --select-field-helper-font-size: var(--form-helper-font-size);
263
246
  --sheet-description-font-size: var(--modal-description-font-size);
264
247
  --sheet-close-size: var(--modal-close-size);
@@ -272,9 +255,7 @@
272
255
  --switcher-field-error-font-size: var(--form-error-font-size);
273
256
  --switcher-field-helper-font-size: var(--form-helper-font-size);
274
257
  --table-of-contents-item-font-size: var(--text-paragraph-small-font-size);
275
- --textarea-field-error-font-size: var(--form-error-font-size);
276
258
  --textarea-field-helper-font-size: var(--form-helper-font-size);
277
- --time-field-error-font-size: var(--form-error-font-size);
278
259
  --time-field-helper-font-size: var(--form-helper-font-size);
279
260
  --timeline-title-font-size: var(--text-font-size);
280
261
  --timeline-meta-font-size: var(--text-paragraph-small-font-size);