colibri-ui 0.8.76 → 0.8.78

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 (128) hide show
  1. package/Autocomplete/Autocomplete.d.ts +6 -0
  2. package/Autocomplete/Autocomplete.js +298 -0
  3. package/Autocomplete/Autocomplete.module.css +147 -0
  4. package/Autocomplete/index.d.ts +2 -0
  5. package/Autocomplete/index.js +7 -0
  6. package/Autocomplete/index.props.d.ts +39 -0
  7. package/Autocomplete/package.json +9 -0
  8. package/Button/tokens.d.ts +78 -0
  9. package/Button/tokens.js +84 -0
  10. package/Calendar/Calendar.js +3 -1
  11. package/Input/index.d.ts +1 -1
  12. package/Input/index.js +20 -14
  13. package/Input/index.props.d.ts +4 -1
  14. package/List/List.d.ts +5 -0
  15. package/List/List.js +161 -0
  16. package/List/List.module.css +185 -0
  17. package/List/index.d.ts +2 -0
  18. package/List/index.js +9 -0
  19. package/List/index.props.d.ts +43 -0
  20. package/List/package.json +9 -0
  21. package/Modal/Modal.module.css +14 -7
  22. package/Modal/components/Body/Body.module.css +12 -0
  23. package/Modal/components/Body/index.d.ts +3 -0
  24. package/Modal/components/Body/index.js +27 -0
  25. package/Modal/components/Body/index.props.d.ts +1 -0
  26. package/Modal/components/Close/index.js +5 -2
  27. package/Modal/components/Close/index.props.d.ts +1 -0
  28. package/Modal/components/Footer/Footer.module.css +10 -0
  29. package/Modal/components/Footer/index.d.ts +3 -0
  30. package/Modal/components/Footer/index.js +23 -0
  31. package/Modal/components/Footer/index.props.d.ts +1 -0
  32. package/Modal/components/Header/Header.module.css +32 -0
  33. package/Modal/components/Header/index.d.ts +3 -0
  34. package/Modal/components/Header/index.js +37 -0
  35. package/Modal/components/Header/index.props.d.ts +1 -0
  36. package/Modal/components/Title/index.js +20 -7
  37. package/Modal/components/Title/index.props.d.ts +1 -2
  38. package/Modal/context.d.ts +9 -0
  39. package/Modal/context.js +15 -0
  40. package/Modal/index.d.ts +12 -2
  41. package/Modal/index.js +103 -31
  42. package/Modal/index.props.d.ts +25 -0
  43. package/Modal/useModalStack.d.ts +2 -0
  44. package/Modal/useModalStack.js +20 -0
  45. package/README.md +59 -0
  46. package/Theme/breakpoints.d.ts +20 -16
  47. package/Theme/breakpoints.js +21 -32
  48. package/Theme/colors/index.d.ts +4 -0
  49. package/Theme/colors/theme_buenos_aires.d.ts +4 -0
  50. package/Theme/colors/theme_buenos_aires.js +2 -0
  51. package/Theme/colors/theme_jaipur.d.ts +4 -0
  52. package/Theme/colors/theme_jaipur.js +2 -0
  53. package/Theme/index.d.ts +300 -152
  54. package/Theme/index.js +6 -2
  55. package/Theme/themes/buenos_aires.d.ts +73 -76
  56. package/Theme/themes/buenos_aires.js +73 -76
  57. package/Theme/themes/jaipur.d.ts +73 -76
  58. package/Theme/themes/jaipur.js +73 -76
  59. package/esm/Autocomplete/Autocomplete.d.ts +6 -0
  60. package/esm/Autocomplete/Autocomplete.js +288 -0
  61. package/esm/Autocomplete/Autocomplete.module.css +147 -0
  62. package/esm/Autocomplete/index.d.ts +2 -0
  63. package/esm/Autocomplete/index.props.d.ts +39 -0
  64. package/esm/Button/tokens.d.ts +78 -0
  65. package/esm/Button/tokens.js +82 -0
  66. package/esm/Calendar/Calendar.js +3 -1
  67. package/esm/Input/index.d.ts +1 -1
  68. package/esm/Input/index.js +16 -10
  69. package/esm/Input/index.props.d.ts +4 -1
  70. package/esm/List/List.d.ts +5 -0
  71. package/esm/List/List.js +150 -0
  72. package/esm/List/List.module.css +185 -0
  73. package/esm/List/index.d.ts +2 -0
  74. package/esm/List/index.props.d.ts +43 -0
  75. package/esm/Modal/Modal.module.css +14 -7
  76. package/esm/Modal/components/Body/Body.module.css +12 -0
  77. package/esm/Modal/components/Body/index.d.ts +3 -0
  78. package/esm/Modal/components/Body/index.js +18 -0
  79. package/esm/Modal/components/Body/index.props.d.ts +1 -0
  80. package/esm/Modal/components/Close/index.js +4 -2
  81. package/esm/Modal/components/Close/index.props.d.ts +1 -0
  82. package/esm/Modal/components/Footer/Footer.module.css +10 -0
  83. package/esm/Modal/components/Footer/index.d.ts +3 -0
  84. package/esm/Modal/components/Footer/index.js +15 -0
  85. package/esm/Modal/components/Footer/index.props.d.ts +1 -0
  86. package/esm/Modal/components/Header/Header.module.css +32 -0
  87. package/esm/Modal/components/Header/index.d.ts +3 -0
  88. package/esm/Modal/components/Header/index.js +28 -0
  89. package/esm/Modal/components/Header/index.props.d.ts +1 -0
  90. package/esm/Modal/components/Title/index.js +20 -8
  91. package/esm/Modal/components/Title/index.props.d.ts +1 -2
  92. package/esm/Modal/context.d.ts +9 -0
  93. package/esm/Modal/context.js +12 -0
  94. package/esm/Modal/index.d.ts +12 -2
  95. package/esm/Modal/index.js +92 -25
  96. package/esm/Modal/index.props.d.ts +25 -0
  97. package/esm/Modal/useModalStack.d.ts +2 -0
  98. package/esm/Modal/useModalStack.js +18 -0
  99. package/esm/Theme/breakpoints.d.ts +20 -16
  100. package/esm/Theme/breakpoints.js +20 -26
  101. package/esm/Theme/colors/index.d.ts +4 -0
  102. package/esm/Theme/colors/theme_buenos_aires.d.ts +4 -0
  103. package/esm/Theme/colors/theme_buenos_aires.js +2 -0
  104. package/esm/Theme/colors/theme_jaipur.d.ts +4 -0
  105. package/esm/Theme/colors/theme_jaipur.js +2 -0
  106. package/esm/Theme/index.d.ts +300 -152
  107. package/esm/Theme/index.js +3 -2
  108. package/esm/Theme/themes/buenos_aires.d.ts +73 -76
  109. package/esm/Theme/themes/buenos_aires.js +73 -76
  110. package/esm/Theme/themes/jaipur.d.ts +73 -76
  111. package/esm/Theme/themes/jaipur.js +73 -76
  112. package/esm/hooks/useMediaSizes/index.d.ts +2 -2
  113. package/esm/hooks/useMediaSizes/index.js +2 -2
  114. package/esm/hooks/useTrapFocus/index.d.ts +1 -1
  115. package/esm/hooks/useTrapFocus/index.js +3 -2
  116. package/esm/index.d.ts +8 -3
  117. package/esm/index.js +7 -0
  118. package/esm/theme_ba_variables.css +149 -76
  119. package/esm/theme_jaipur_variables.css +149 -76
  120. package/hooks/useMediaSizes/index.d.ts +2 -2
  121. package/hooks/useMediaSizes/index.js +1 -1
  122. package/hooks/useTrapFocus/index.d.ts +1 -1
  123. package/hooks/useTrapFocus/index.js +3 -2
  124. package/index.d.ts +8 -3
  125. package/index.js +54 -35
  126. package/package.json +1 -1
  127. package/theme_ba_variables.css +149 -76
  128. package/theme_jaipur_variables.css +149 -76
package/theme_ba_variables.css CHANGED
@@ -108,14 +108,17 @@
108
108
  --color-action-secondary-hover: #B9F18E;
109
109
  --color-action-secondary-pressed: #82D257;
110
110
  --color-action-secondary-text: #163300;
111
+ --color-action-clear-text-hover: #2D681A;
111
112
  --color-action-disabled: #EDF0EA;
112
113
  --color-action-disabled-text: #AAB3A8;
113
114
  --color-focus-ring: #9FE870;
114
115
  --color-status-success: #244F18;
115
116
  --color-status-success-bg: #E4FFD2;
117
+ --color-status-success-bg-hover: #D0FBAF;
116
118
  --color-status-warning: #59470C;
117
119
  --color-status-warning-bg: #FFF4BD;
118
120
  --color-status-error: #7A1D21;
121
+ --color-status-error-hover: #5F1519;
119
122
  --color-status-error-accent: #E5484D;
120
123
  --color-status-error-bg: #FFE8E5;
121
124
  --color-status-info: #123B40;
@@ -223,6 +226,36 @@
223
226
  --component-input-padding-block: 0.3125rem;
224
227
  --component-input-padding-inline: 0.625rem;
225
228
  --component-input-content-margin-block: 0.4375rem;
229
+ --component-autocomplete-inline-size: calc(var(--space-32) * 2 + var(--space-16));
230
+ --component-autocomplete-border-success: #244F18;
231
+ --component-autocomplete-end-icon-gap: var(--space-1);
232
+ --component-autocomplete-icon-size: var(--component-input-icon-size);
233
+ --component-autocomplete-clear-size: var(--space-6);
234
+ --component-autocomplete-clear-radius: var(--radius-xs);
235
+ --component-autocomplete-clear-icon: #687568;
236
+ --component-autocomplete-clear-bg-hover: #EDF0EA;
237
+ --component-autocomplete-chevron: #687568;
238
+ --component-autocomplete-popup-bg: #FFFFFF;
239
+ --component-autocomplete-popup-border: #E2E7DF;
240
+ --component-autocomplete-popup-radius: var(--radius-md);
241
+ --component-autocomplete-popup-shadow: var(--shadow-raised);
242
+ --component-autocomplete-popup-offset: var(--space-2);
243
+ --component-autocomplete-popup-z-index: 1001;
244
+ --component-autocomplete-list-max-height: 13.75rem;
245
+ --component-autocomplete-list-padding: var(--space-1);
246
+ --component-autocomplete-option-min-height: var(--component-input-height-l);
247
+ --component-autocomplete-option-padding-block: var(--component-input-padding-block);
248
+ --component-autocomplete-option-padding-inline: var(--component-input-padding-inline);
249
+ --component-autocomplete-option-radius: var(--radius-xs);
250
+ --component-autocomplete-option-gap: var(--space-2);
251
+ --component-autocomplete-option-bg-hover: #EDF0EA;
252
+ --component-autocomplete-option-text: #163300;
253
+ --component-autocomplete-option-text-selected: #163300;
254
+ --component-autocomplete-option-text-disabled: #AAB3A8;
255
+ --component-autocomplete-option-description: #687568;
256
+ --component-autocomplete-description-offset: var(--space-1);
257
+ --component-autocomplete-message-text: #687568;
258
+ --component-autocomplete-message-padding: var(--space-4);
226
259
  --component-editable-icon-size: 1rem;
227
260
  --component-code-field-height-m: 3rem;
228
261
  --component-code-field-height-l: 3.5rem;
@@ -271,82 +304,6 @@
271
304
  --component-switch-thumb-size: 1rem;
272
305
  --component-switch-thumb-offset: 0.125rem;
273
306
  --component-switch-thumb-translate: 1.125rem;
274
- --component-button-font-size-xs: 0.75rem;
275
- --component-button-font-size-s: 0.8125rem;
276
- --component-button-font-size-m: 0.9375rem;
277
- --component-button-font-size-l: 1.125rem;
278
- --component-button-height-xs: 1.8125rem;
279
- --component-button-height-s: 2rem;
280
- --component-button-height-m: 2.25rem;
281
- --component-button-height-l: 2.625rem;
282
- --component-button-radius: 1.125rem;
283
- --component-button-radius-lg: 1.5rem;
284
- --component-button-primary-bg: #163300;
285
- --component-button-primary-border: #163300;
286
- --component-button-primary-text: #9FE870;
287
- --component-button-primary-bg-hover: #203F21;
288
- --component-button-primary-border-hover: #203F21;
289
- --component-button-primary-text-hover: #9FE870;
290
- --component-button-primary-bg-pressed: #9FE870;
291
- --component-button-primary-border-pressed: #9FE870;
292
- --component-button-primary-text-pressed: #163300;
293
- --component-button-secondary-bg: #E2E7DF;
294
- --component-button-secondary-border: #CBD2C8;
295
- --component-button-secondary-text: #163300;
296
- --component-button-secondary-bg-hover: #CBD2C8;
297
- --component-button-secondary-border-hover: #879285;
298
- --component-button-secondary-text-hover: #163300;
299
- --component-button-secondary-bg-pressed: #163300;
300
- --component-button-secondary-border-pressed: #163300;
301
- --component-button-secondary-text-pressed: #9FE870;
302
- --component-button-outline-bg: #FFFFFF;
303
- --component-button-outline-border: #CBD2C8;
304
- --component-button-outline-text: #163300;
305
- --component-button-outline-bg-hover: #EDF0EA;
306
- --component-button-outline-border-hover: #879285;
307
- --component-button-outline-text-hover: #163300;
308
- --component-button-outline-bg-pressed: #E2E7DF;
309
- --component-button-outline-border-pressed: #163300;
310
- --component-button-outline-text-pressed: #0D1F12;
311
- --component-button-pseudo-bg: #F5F7F2;
312
- --component-button-pseudo-border: #F5F7F2;
313
- --component-button-pseudo-text: #163300;
314
- --component-button-pseudo-bg-hover: #EDF0EA;
315
- --component-button-pseudo-border-hover: #EDF0EA;
316
- --component-button-pseudo-text-hover: #163300;
317
- --component-button-pseudo-bg-pressed: #E2E7DF;
318
- --component-button-pseudo-border-pressed: #E2E7DF;
319
- --component-button-pseudo-text-pressed: #163300;
320
- --component-button-clear-bg: transparent;
321
- --component-button-clear-border: transparent;
322
- --component-button-clear-text: #163300;
323
- --component-button-clear-bg-hover: transparent;
324
- --component-button-clear-border-hover: transparent;
325
- --component-button-clear-text-hover: #2D681A;
326
- --component-button-clear-bg-pressed: transparent;
327
- --component-button-clear-border-pressed: transparent;
328
- --component-button-clear-text-pressed: #0D1F12;
329
- --component-button-alert-bg: #7A1D21;
330
- --component-button-alert-border: #7A1D21;
331
- --component-button-alert-text: #FFFFFF;
332
- --component-button-alert-bg-hover: #5F1519;
333
- --component-button-alert-border-hover: #5F1519;
334
- --component-button-alert-text-hover: #FFFFFF;
335
- --component-button-alert-bg-pressed: #E5484D;
336
- --component-button-alert-border-pressed: #E5484D;
337
- --component-button-alert-text-pressed: #FFFFFF;
338
- --component-button-success-bg: #E4FFD2;
339
- --component-button-success-border: #E4FFD2;
340
- --component-button-success-text: #163300;
341
- --component-button-success-bg-hover: #D0FBAF;
342
- --component-button-success-border-hover: #D0FBAF;
343
- --component-button-success-text-hover: #163300;
344
- --component-button-success-bg-pressed: #244F18;
345
- --component-button-success-border-pressed: #244F18;
346
- --component-button-success-text-pressed: #FFFFFF;
347
- --component-button-bg-disabled: #EDF0EA;
348
- --component-button-border-disabled: #EDF0EA;
349
- --component-button-text-disabled: #AAB3A8;
350
307
  --component-menu-bg: #FFFFFF;
351
308
  --component-menu-text: #163300;
352
309
  --component-menu-border: #E2E7DF;
@@ -356,6 +313,46 @@
356
313
  --component-menu-item-bg-pressed: #E2E7DF;
357
314
  --component-menu-item-bg-selected: #163300;
358
315
  --component-menu-item-text-disabled: #AAB3A8;
316
+ --component-list-bg: #FFFFFF;
317
+ --component-list-text: #163300;
318
+ --component-list-text-disabled: #AAB3A8;
319
+ --component-list-description: #4B584D;
320
+ --component-list-description-selected: #163300;
321
+ --component-list-divider: #E2E7DF;
322
+ --component-list-focus-ring: #9FE870;
323
+ --component-list-container-radius: var(--radius-lg);
324
+ --component-list-container-padding: var(--space-1);
325
+ --component-list-items-gap: var(--space-1);
326
+ --component-list-item-bg-hover: #EDF0EA;
327
+ --component-list-item-bg-selected: #EDF0EA;
328
+ --component-list-item-text-selected: #163300;
329
+ --component-list-item-text-disabled: #AAB3A8;
330
+ --component-list-item-radius: var(--radius-md);
331
+ --component-list-item-surface-radius: var(--radius-md);
332
+ --component-list-item-gap: var(--space-3);
333
+ --component-list-item-min-height-s: calc(var(--space-10) + var(--space-1));
334
+ --component-list-item-min-height-m: calc(var(--space-10) + var(--space-4));
335
+ --component-list-item-min-height-l: var(--space-16);
336
+ --component-list-item-min-height-compact: calc(var(--space-10) + var(--space-1));
337
+ --component-list-item-padding-block: var(--component-input-padding-inline);
338
+ --component-list-item-padding-block-compact: var(--space-1);
339
+ --component-list-item-padding-inline: var(--space-3);
340
+ --component-list-item-padding-inline-l: var(--space-4);
341
+ --component-list-font-size-s: var(--font-size-text-sm);
342
+ --component-list-line-height-s: var(--line-height-text-sm);
343
+ --component-list-font-size-m: var(--font-size-text-md);
344
+ --component-list-line-height-m: var(--line-height-text-md);
345
+ --component-list-font-size-l: var(--font-size-text-md);
346
+ --component-list-line-height-l: var(--line-height-text-md);
347
+ --component-list-description-font-size: var(--font-size-text-xs);
348
+ --component-list-description-line-height: var(--line-height-text-xs);
349
+ --component-list-description-offset: var(--space-1);
350
+ --component-list-section-gap: var(--space-3);
351
+ --component-list-section-title: #4B584D;
352
+ --component-list-section-title-font-size: var(--font-size-text-xs);
353
+ --component-list-section-title-line-height: var(--line-height-text-xs);
354
+ --component-list-section-title-padding-block-start: var(--space-2);
355
+ --component-list-section-title-padding-block-end: var(--component-input-padding-block);
359
356
  --component-tab-bg: #FFFFFF;
360
357
  --component-tab-bg-hover: #EDF0EA;
361
358
  --component-tab-bg-pressed: #E2E7DF;
@@ -711,4 +708,80 @@
711
708
  --promo-mint: #E4FFD2;
712
709
  --promo-sky: #DDF7F7;
713
710
  --promo-neon: #EAE4FF;
711
+ --component-button-font-size-xs: 0.75rem;
712
+ --component-button-font-size-s: 0.8125rem;
713
+ --component-button-font-size-m: 0.9375rem;
714
+ --component-button-font-size-l: 1.125rem;
715
+ --component-button-height-xs: 1.8125rem;
716
+ --component-button-height-s: 2rem;
717
+ --component-button-height-m: 2.25rem;
718
+ --component-button-height-l: 2.625rem;
719
+ --component-button-radius: 1.125rem;
720
+ --component-button-radius-lg: 1.5rem;
721
+ --component-button-primary-bg: var(--color-action-primary);
722
+ --component-button-primary-border: var(--color-action-primary);
723
+ --component-button-primary-text: var(--color-action-secondary);
724
+ --component-button-primary-bg-hover: var(--color-action-primary-hover);
725
+ --component-button-primary-border-hover: var(--color-action-primary-hover);
726
+ --component-button-primary-text-hover: var(--color-action-secondary);
727
+ --component-button-primary-bg-pressed: var(--color-action-secondary);
728
+ --component-button-primary-border-pressed: var(--color-action-secondary);
729
+ --component-button-primary-text-pressed: var(--color-text-on-brand);
730
+ --component-button-secondary-bg: var(--color-bg-surface-strong);
731
+ --component-button-secondary-border: var(--color-border-default);
732
+ --component-button-secondary-text: var(--color-text-primary);
733
+ --component-button-secondary-bg-hover: var(--color-neutral-300);
734
+ --component-button-secondary-border-hover: var(--color-border-strong);
735
+ --component-button-secondary-text-hover: var(--color-text-primary);
736
+ --component-button-secondary-bg-pressed: var(--color-action-primary);
737
+ --component-button-secondary-border-pressed: var(--color-action-primary);
738
+ --component-button-secondary-text-pressed: var(--color-action-secondary);
739
+ --component-button-outline-bg: var(--color-bg-surface);
740
+ --component-button-outline-border: var(--color-border-default);
741
+ --component-button-outline-text: var(--color-text-primary);
742
+ --component-button-outline-bg-hover: var(--color-bg-surface-subtle);
743
+ --component-button-outline-border-hover: var(--color-border-strong);
744
+ --component-button-outline-text-hover: var(--color-text-primary);
745
+ --component-button-outline-bg-pressed: var(--color-bg-surface-strong);
746
+ --component-button-outline-border-pressed: var(--color-action-primary);
747
+ --component-button-outline-text-pressed: var(--color-action-primary-pressed);
748
+ --component-button-pseudo-bg: var(--color-bg-canvas);
749
+ --component-button-pseudo-border: var(--color-bg-canvas);
750
+ --component-button-pseudo-text: var(--color-text-primary);
751
+ --component-button-pseudo-bg-hover: var(--color-bg-surface-subtle);
752
+ --component-button-pseudo-border-hover: var(--color-bg-surface-subtle);
753
+ --component-button-pseudo-text-hover: var(--color-text-primary);
754
+ --component-button-pseudo-bg-pressed: var(--color-bg-surface-strong);
755
+ --component-button-pseudo-border-pressed: var(--color-bg-surface-strong);
756
+ --component-button-pseudo-text-pressed: var(--color-text-primary);
757
+ --component-button-clear-bg: transparent;
758
+ --component-button-clear-border: transparent;
759
+ --component-button-clear-text: var(--color-text-primary);
760
+ --component-button-clear-bg-hover: transparent;
761
+ --component-button-clear-border-hover: transparent;
762
+ --component-button-clear-text-hover: var(--color-action-clear-text-hover);
763
+ --component-button-clear-bg-pressed: transparent;
764
+ --component-button-clear-border-pressed: transparent;
765
+ --component-button-clear-text-pressed: var(--color-action-primary-pressed);
766
+ --component-button-alert-bg: var(--color-status-error);
767
+ --component-button-alert-border: var(--color-status-error);
768
+ --component-button-alert-text: var(--color-brand-white);
769
+ --component-button-alert-bg-hover: var(--color-status-error-hover);
770
+ --component-button-alert-border-hover: var(--color-status-error-hover);
771
+ --component-button-alert-text-hover: var(--color-brand-white);
772
+ --component-button-alert-bg-pressed: var(--color-status-error-accent);
773
+ --component-button-alert-border-pressed: var(--color-status-error-accent);
774
+ --component-button-alert-text-pressed: var(--color-brand-white);
775
+ --component-button-success-bg: var(--color-status-success-bg);
776
+ --component-button-success-border: var(--color-status-success-bg);
777
+ --component-button-success-text: var(--color-text-primary);
778
+ --component-button-success-bg-hover: var(--color-status-success-bg-hover);
779
+ --component-button-success-border-hover: var(--color-status-success-bg-hover);
780
+ --component-button-success-text-hover: var(--color-text-primary);
781
+ --component-button-success-bg-pressed: var(--color-status-success);
782
+ --component-button-success-border-pressed: var(--color-status-success);
783
+ --component-button-success-text-pressed: var(--color-brand-white);
784
+ --component-button-bg-disabled: var(--color-action-disabled);
785
+ --component-button-border-disabled: var(--color-action-disabled);
786
+ --component-button-text-disabled: var(--color-action-disabled-text);
714
787
  }
package/theme_jaipur_variables.css CHANGED
@@ -108,14 +108,17 @@
108
108
  --color-action-secondary-hover: #FFBDD8;
109
109
  --color-action-secondary-pressed: #F586B6;
110
110
  --color-action-secondary-text: #2C2242;
111
+ --color-action-clear-text-hover: #87305F;
111
112
  --color-action-disabled: #F2F1EE;
112
113
  --color-action-disabled-text: #AAA6AA;
113
114
  --color-focus-ring: #FFA8CD;
114
115
  --color-status-success: #46591B;
115
116
  --color-status-success-bg: #E6FFA9;
117
+ --color-status-success-bg-hover: #EEFFC6;
116
118
  --color-status-warning: #624D15;
117
119
  --color-status-warning-bg: #FFF0AD;
118
120
  --color-status-error: #7A263C;
121
+ --color-status-error-hover: #D9639A;
119
122
  --color-status-error-accent: #D94B69;
120
123
  --color-status-error-bg: #FFE5EB;
121
124
  --color-status-info: #303F6C;
@@ -223,6 +226,36 @@
223
226
  --component-input-padding-block: 0.3125rem;
224
227
  --component-input-padding-inline: 0.625rem;
225
228
  --component-input-content-margin-block: 0.4375rem;
229
+ --component-autocomplete-inline-size: calc(var(--space-32) * 2 + var(--space-16));
230
+ --component-autocomplete-border-success: #46591B;
231
+ --component-autocomplete-end-icon-gap: var(--space-1);
232
+ --component-autocomplete-icon-size: var(--component-input-icon-size);
233
+ --component-autocomplete-clear-size: var(--space-6);
234
+ --component-autocomplete-clear-radius: var(--radius-xs);
235
+ --component-autocomplete-clear-icon: #66606C;
236
+ --component-autocomplete-clear-bg-hover: #F2F1EE;
237
+ --component-autocomplete-chevron: #66606C;
238
+ --component-autocomplete-popup-bg: #FFFFFF;
239
+ --component-autocomplete-popup-border: #E4E3DF;
240
+ --component-autocomplete-popup-radius: var(--radius-md);
241
+ --component-autocomplete-popup-shadow: var(--shadow-raised);
242
+ --component-autocomplete-popup-offset: var(--space-2);
243
+ --component-autocomplete-popup-z-index: 1001;
244
+ --component-autocomplete-list-max-height: 13.75rem;
245
+ --component-autocomplete-list-padding: var(--space-1);
246
+ --component-autocomplete-option-min-height: var(--component-input-height-l);
247
+ --component-autocomplete-option-padding-block: var(--component-input-padding-block);
248
+ --component-autocomplete-option-padding-inline: var(--component-input-padding-inline);
249
+ --component-autocomplete-option-radius: var(--radius-xs);
250
+ --component-autocomplete-option-gap: var(--space-2);
251
+ --component-autocomplete-option-bg-hover: #F2F1EE;
252
+ --component-autocomplete-option-text: #2C2242;
253
+ --component-autocomplete-option-text-selected: #2C2242;
254
+ --component-autocomplete-option-text-disabled: #AAA6AA;
255
+ --component-autocomplete-option-description: #66606C;
256
+ --component-autocomplete-description-offset: var(--space-1);
257
+ --component-autocomplete-message-text: #66606C;
258
+ --component-autocomplete-message-padding: var(--space-4);
226
259
  --component-editable-icon-size: 1rem;
227
260
  --component-code-field-height-m: 3rem;
228
261
  --component-code-field-height-l: 3.5rem;
@@ -271,82 +304,6 @@
271
304
  --component-switch-thumb-size: 1rem;
272
305
  --component-switch-thumb-offset: 0.125rem;
273
306
  --component-switch-thumb-translate: 1.125rem;
274
- --component-button-font-size-xs: 0.75rem;
275
- --component-button-font-size-s: 0.8125rem;
276
- --component-button-font-size-m: 0.9375rem;
277
- --component-button-font-size-l: 1.125rem;
278
- --component-button-height-xs: 1.8125rem;
279
- --component-button-height-s: 2rem;
280
- --component-button-height-m: 2.25rem;
281
- --component-button-height-l: 2.625rem;
282
- --component-button-radius: 1.125rem;
283
- --component-button-radius-lg: 1.5rem;
284
- --component-button-primary-bg: #2C2242;
285
- --component-button-primary-border: #2C2242;
286
- --component-button-primary-text: #FFA8CD;
287
- --component-button-primary-bg-hover: #0B051D;
288
- --component-button-primary-border-hover: #0B051D;
289
- --component-button-primary-text-hover: #FFA8CD;
290
- --component-button-primary-bg-pressed: #FFA8CD;
291
- --component-button-primary-border-pressed: #FFA8CD;
292
- --component-button-primary-text-pressed: #2C2242;
293
- --component-button-secondary-bg: #E4E3DF;
294
- --component-button-secondary-border: #D0CECC;
295
- --component-button-secondary-text: #2C2242;
296
- --component-button-secondary-bg-hover: #D0CECC;
297
- --component-button-secondary-border-hover: #858087;
298
- --component-button-secondary-text-hover: #2C2242;
299
- --component-button-secondary-bg-pressed: #2C2242;
300
- --component-button-secondary-border-pressed: #2C2242;
301
- --component-button-secondary-text-pressed: #FFA8CD;
302
- --component-button-outline-bg: #FFFFFF;
303
- --component-button-outline-border: #D0CECC;
304
- --component-button-outline-text: #2C2242;
305
- --component-button-outline-bg-hover: #F2F1EE;
306
- --component-button-outline-border-hover: #858087;
307
- --component-button-outline-text-hover: #2C2242;
308
- --component-button-outline-bg-pressed: #E4E3DF;
309
- --component-button-outline-border-pressed: #2C2242;
310
- --component-button-outline-text-pressed: #0B051D;
311
- --component-button-pseudo-bg: #F9F8F5;
312
- --component-button-pseudo-border: #F9F8F5;
313
- --component-button-pseudo-text: #2C2242;
314
- --component-button-pseudo-bg-hover: #F2F1EE;
315
- --component-button-pseudo-border-hover: #F2F1EE;
316
- --component-button-pseudo-text-hover: #2C2242;
317
- --component-button-pseudo-bg-pressed: #E4E3DF;
318
- --component-button-pseudo-border-pressed: #E4E3DF;
319
- --component-button-pseudo-text-pressed: #2C2242;
320
- --component-button-clear-bg: transparent;
321
- --component-button-clear-border: transparent;
322
- --component-button-clear-text: #2C2242;
323
- --component-button-clear-bg-hover: transparent;
324
- --component-button-clear-border-hover: transparent;
325
- --component-button-clear-text-hover: #87305F;
326
- --component-button-clear-bg-pressed: transparent;
327
- --component-button-clear-border-pressed: transparent;
328
- --component-button-clear-text-pressed: #0B051D;
329
- --component-button-alert-bg: #7A263C;
330
- --component-button-alert-border: #7A263C;
331
- --component-button-alert-text: #FFFFFF;
332
- --component-button-alert-bg-hover: #D9639A;
333
- --component-button-alert-border-hover: #D9639A;
334
- --component-button-alert-text-hover: #FFFFFF;
335
- --component-button-alert-bg-pressed: #D94B69;
336
- --component-button-alert-border-pressed: #D94B69;
337
- --component-button-alert-text-pressed: #FFFFFF;
338
- --component-button-success-bg: #E6FFA9;
339
- --component-button-success-border: #E6FFA9;
340
- --component-button-success-text: #2C2242;
341
- --component-button-success-bg-hover: #EEFFC6;
342
- --component-button-success-border-hover: #EEFFC6;
343
- --component-button-success-text-hover: #2C2242;
344
- --component-button-success-bg-pressed: #46591B;
345
- --component-button-success-border-pressed: #46591B;
346
- --component-button-success-text-pressed: #FFFFFF;
347
- --component-button-bg-disabled: #F2F1EE;
348
- --component-button-border-disabled: #F2F1EE;
349
- --component-button-text-disabled: #AAA6AA;
350
307
  --component-menu-bg: #FFFFFF;
351
308
  --component-menu-text: #2C2242;
352
309
  --component-menu-border: #E4E3DF;
@@ -356,6 +313,46 @@
356
313
  --component-menu-item-bg-pressed: #E4E3DF;
357
314
  --component-menu-item-bg-selected: #2C2242;
358
315
  --component-menu-item-text-disabled: #AAA6AA;
316
+ --component-list-bg: #FFFFFF;
317
+ --component-list-text: #2C2242;
318
+ --component-list-text-disabled: #AAA6AA;
319
+ --component-list-description: #4B4456;
320
+ --component-list-description-selected: #2C2242;
321
+ --component-list-divider: #E4E3DF;
322
+ --component-list-focus-ring: #FFA8CD;
323
+ --component-list-container-radius: var(--radius-lg);
324
+ --component-list-container-padding: var(--space-1);
325
+ --component-list-items-gap: var(--space-1);
326
+ --component-list-item-bg-hover: #F2F1EE;
327
+ --component-list-item-bg-selected: #F2F1EE;
328
+ --component-list-item-text-selected: #2C2242;
329
+ --component-list-item-text-disabled: #AAA6AA;
330
+ --component-list-item-radius: var(--radius-md);
331
+ --component-list-item-surface-radius: var(--radius-md);
332
+ --component-list-item-gap: var(--space-3);
333
+ --component-list-item-min-height-s: calc(var(--space-10) + var(--space-1));
334
+ --component-list-item-min-height-m: calc(var(--space-10) + var(--space-4));
335
+ --component-list-item-min-height-l: var(--space-16);
336
+ --component-list-item-min-height-compact: calc(var(--space-10) + var(--space-1));
337
+ --component-list-item-padding-block: var(--component-input-padding-inline);
338
+ --component-list-item-padding-block-compact: var(--space-1);
339
+ --component-list-item-padding-inline: var(--space-3);
340
+ --component-list-item-padding-inline-l: var(--space-4);
341
+ --component-list-font-size-s: var(--font-size-text-sm);
342
+ --component-list-line-height-s: var(--line-height-text-sm);
343
+ --component-list-font-size-m: var(--font-size-text-md);
344
+ --component-list-line-height-m: var(--line-height-text-md);
345
+ --component-list-font-size-l: var(--font-size-text-md);
346
+ --component-list-line-height-l: var(--line-height-text-md);
347
+ --component-list-description-font-size: var(--font-size-text-xs);
348
+ --component-list-description-line-height: var(--line-height-text-xs);
349
+ --component-list-description-offset: var(--space-1);
350
+ --component-list-section-gap: var(--space-3);
351
+ --component-list-section-title: #4B4456;
352
+ --component-list-section-title-font-size: var(--font-size-text-xs);
353
+ --component-list-section-title-line-height: var(--line-height-text-xs);
354
+ --component-list-section-title-padding-block-start: var(--space-2);
355
+ --component-list-section-title-padding-block-end: var(--component-input-padding-block);
359
356
  --component-tab-bg: #FFFFFF;
360
357
  --component-tab-bg-hover: #F2F1EE;
361
358
  --component-tab-bg-pressed: #E4E3DF;
@@ -711,4 +708,80 @@
711
708
  --promo-mint: #E6FFA9;
712
709
  --promo-sky: #E4EDFF;
713
710
  --promo-neon: #EEE7F1;
711
+ --component-button-font-size-xs: 0.75rem;
712
+ --component-button-font-size-s: 0.8125rem;
713
+ --component-button-font-size-m: 0.9375rem;
714
+ --component-button-font-size-l: 1.125rem;
715
+ --component-button-height-xs: 1.8125rem;
716
+ --component-button-height-s: 2rem;
717
+ --component-button-height-m: 2.25rem;
718
+ --component-button-height-l: 2.625rem;
719
+ --component-button-radius: 1.125rem;
720
+ --component-button-radius-lg: 1.5rem;
721
+ --component-button-primary-bg: var(--color-action-primary);
722
+ --component-button-primary-border: var(--color-action-primary);
723
+ --component-button-primary-text: var(--color-action-secondary);
724
+ --component-button-primary-bg-hover: var(--color-action-primary-hover);
725
+ --component-button-primary-border-hover: var(--color-action-primary-hover);
726
+ --component-button-primary-text-hover: var(--color-action-secondary);
727
+ --component-button-primary-bg-pressed: var(--color-action-secondary);
728
+ --component-button-primary-border-pressed: var(--color-action-secondary);
729
+ --component-button-primary-text-pressed: var(--color-text-on-brand);
730
+ --component-button-secondary-bg: var(--color-bg-surface-strong);
731
+ --component-button-secondary-border: var(--color-border-default);
732
+ --component-button-secondary-text: var(--color-text-primary);
733
+ --component-button-secondary-bg-hover: var(--color-neutral-300);
734
+ --component-button-secondary-border-hover: var(--color-border-strong);
735
+ --component-button-secondary-text-hover: var(--color-text-primary);
736
+ --component-button-secondary-bg-pressed: var(--color-action-primary);
737
+ --component-button-secondary-border-pressed: var(--color-action-primary);
738
+ --component-button-secondary-text-pressed: var(--color-action-secondary);
739
+ --component-button-outline-bg: var(--color-bg-surface);
740
+ --component-button-outline-border: var(--color-border-default);
741
+ --component-button-outline-text: var(--color-text-primary);
742
+ --component-button-outline-bg-hover: var(--color-bg-surface-subtle);
743
+ --component-button-outline-border-hover: var(--color-border-strong);
744
+ --component-button-outline-text-hover: var(--color-text-primary);
745
+ --component-button-outline-bg-pressed: var(--color-bg-surface-strong);
746
+ --component-button-outline-border-pressed: var(--color-action-primary);
747
+ --component-button-outline-text-pressed: var(--color-action-primary-pressed);
748
+ --component-button-pseudo-bg: var(--color-bg-canvas);
749
+ --component-button-pseudo-border: var(--color-bg-canvas);
750
+ --component-button-pseudo-text: var(--color-text-primary);
751
+ --component-button-pseudo-bg-hover: var(--color-bg-surface-subtle);
752
+ --component-button-pseudo-border-hover: var(--color-bg-surface-subtle);
753
+ --component-button-pseudo-text-hover: var(--color-text-primary);
754
+ --component-button-pseudo-bg-pressed: var(--color-bg-surface-strong);
755
+ --component-button-pseudo-border-pressed: var(--color-bg-surface-strong);
756
+ --component-button-pseudo-text-pressed: var(--color-text-primary);
757
+ --component-button-clear-bg: transparent;
758
+ --component-button-clear-border: transparent;
759
+ --component-button-clear-text: var(--color-text-primary);
760
+ --component-button-clear-bg-hover: transparent;
761
+ --component-button-clear-border-hover: transparent;
762
+ --component-button-clear-text-hover: var(--color-action-clear-text-hover);
763
+ --component-button-clear-bg-pressed: transparent;
764
+ --component-button-clear-border-pressed: transparent;
765
+ --component-button-clear-text-pressed: var(--color-action-primary-pressed);
766
+ --component-button-alert-bg: var(--color-status-error);
767
+ --component-button-alert-border: var(--color-status-error);
768
+ --component-button-alert-text: var(--color-brand-white);
769
+ --component-button-alert-bg-hover: var(--color-status-error-hover);
770
+ --component-button-alert-border-hover: var(--color-status-error-hover);
771
+ --component-button-alert-text-hover: var(--color-brand-white);
772
+ --component-button-alert-bg-pressed: var(--color-status-error-accent);
773
+ --component-button-alert-border-pressed: var(--color-status-error-accent);
774
+ --component-button-alert-text-pressed: var(--color-brand-white);
775
+ --component-button-success-bg: var(--color-status-success-bg);
776
+ --component-button-success-border: var(--color-status-success-bg);
777
+ --component-button-success-text: var(--color-text-primary);
778
+ --component-button-success-bg-hover: var(--color-status-success-bg-hover);
779
+ --component-button-success-border-hover: var(--color-status-success-bg-hover);
780
+ --component-button-success-text-hover: var(--color-text-primary);
781
+ --component-button-success-bg-pressed: var(--color-status-success);
782
+ --component-button-success-border-pressed: var(--color-status-success);
783
+ --component-button-success-text-pressed: var(--color-brand-white);
784
+ --component-button-bg-disabled: var(--color-action-disabled);
785
+ --component-button-border-disabled: var(--color-action-disabled);
786
+ --component-button-text-disabled: var(--color-action-disabled-text);
714
787
  }