@vaadin/vaadin-lumo-styles 25.0.0-alpha8 → 25.0.0-beta1

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 (188) hide show
  1. package/all-imports.d.ts +0 -8
  2. package/all-imports.js +0 -18
  3. package/components/accordion-heading.css +4 -3
  4. package/components/accordion-panel.css +4 -3
  5. package/components/app-layout.css +4 -3
  6. package/components/avatar-group.css +10 -9
  7. package/components/avatar.css +6 -4
  8. package/components/button.css +4 -4
  9. package/components/card.css +6 -4
  10. package/components/charts.css +4 -3
  11. package/components/checkbox-group.css +4 -3
  12. package/components/checkbox.css +4 -3
  13. package/components/combo-box.css +8 -7
  14. package/components/confirm-dialog.css +4 -3
  15. package/components/context-menu.css +8 -7
  16. package/components/crud.css +13 -12
  17. package/components/custom-field.css +4 -3
  18. package/components/dashboard.css +12 -11
  19. package/components/date-picker.css +12 -11
  20. package/components/date-time-picker.css +4 -3
  21. package/components/details-summary.css +4 -3
  22. package/components/details.css +4 -3
  23. package/components/dialog.css +4 -3
  24. package/components/drawer-toggle.css +4 -3
  25. package/components/email-field.css +4 -3
  26. package/components/field-highlighter.css +8 -7
  27. package/components/form-item.css +4 -3
  28. package/components/form-layout.css +8 -5
  29. package/components/grid-filter.css +4 -3
  30. package/components/grid-pro-edit-column.css +8 -7
  31. package/components/grid-pro.css +4 -3
  32. package/components/grid-sorter.css +4 -3
  33. package/components/grid-tree-toggle.css +4 -3
  34. package/components/grid.css +4 -3
  35. package/components/horizontal-layout.css +4 -3
  36. package/components/icon.css +4 -3
  37. package/components/index.css +71 -0
  38. package/components/input-container.css +4 -3
  39. package/components/integer-field.css +4 -3
  40. package/components/item.css +4 -3
  41. package/components/list-box.css +4 -3
  42. package/components/login-form.css +4 -3
  43. package/components/login.css +4 -3
  44. package/components/map.css +4 -3
  45. package/components/master-detail-layout.css +14 -5
  46. package/components/menu-bar.css +12 -11
  47. package/components/message-input-button.css +12 -0
  48. package/components/message-input.css +5 -4
  49. package/components/message.css +4 -3
  50. package/components/multi-select-combo-box.css +12 -11
  51. package/components/notification.css +6 -5
  52. package/components/number-field.css +4 -3
  53. package/components/overlay.css +4 -3
  54. package/components/password-field.css +6 -5
  55. package/components/popover.css +4 -3
  56. package/components/progress-bar.css +4 -3
  57. package/components/radio-button.css +4 -3
  58. package/components/radio-group.css +4 -3
  59. package/components/rich-text-editor.css +6 -5
  60. package/components/scroller.css +4 -3
  61. package/components/select.css +12 -11
  62. package/components/side-nav-item.css +4 -3
  63. package/components/side-nav.css +4 -3
  64. package/components/split-layout.css +4 -3
  65. package/components/tab.css +4 -3
  66. package/components/tabs.css +4 -3
  67. package/components/tabsheet.css +6 -5
  68. package/components/text-area.css +4 -3
  69. package/components/text-field.css +4 -3
  70. package/components/time-picker.css +8 -7
  71. package/components/tooltip.css +4 -3
  72. package/components/upload.css +15 -10
  73. package/components/vertical-layout.css +4 -3
  74. package/dist/lumo.css +43 -0
  75. package/dist/presets/compact.css +1 -0
  76. package/dist/utility.css +1 -0
  77. package/lumo.css +3 -3
  78. package/mixins/field-button.js +3 -4
  79. package/mixins/helper.js +3 -4
  80. package/mixins/input-field-shared.js +4 -7
  81. package/mixins/loader.js +3 -2
  82. package/mixins/menu-overlay.js +3 -2
  83. package/mixins/overlay.js +3 -4
  84. package/mixins/required-field.js +3 -4
  85. package/package.json +15 -9
  86. package/presets/compact.css +32 -0
  87. package/src/components/app-layout.css +5 -5
  88. package/src/components/avatar-group-overlay.css +0 -4
  89. package/src/components/chart.css +3 -5
  90. package/src/components/checkbox.css +2 -3
  91. package/src/components/combo-box.css +1 -1
  92. package/src/components/confirm-dialog-overlay.css +0 -4
  93. package/src/components/context-menu-overlay.css +21 -1
  94. package/src/components/dashboard-layout.css +0 -66
  95. package/src/components/dashboard-section.css +3 -31
  96. package/src/components/dashboard-widget.css +1 -85
  97. package/src/components/dashboard.css +0 -9
  98. package/src/components/date-picker-overlay-content.css +6 -40
  99. package/src/components/date-picker-overlay.css +2 -14
  100. package/src/components/date-picker.css +2 -2
  101. package/src/components/dialog-overlay.css +10 -19
  102. package/src/components/grid-pro-edit-select.css +1 -1
  103. package/src/components/grid-pro.css +14 -8
  104. package/src/components/grid.css +0 -7
  105. package/src/components/horizontal-layout.css +0 -4
  106. package/src/components/icon.css +2 -2
  107. package/src/components/input-container.css +1 -3
  108. package/src/components/login-form-wrapper.css +5 -26
  109. package/src/components/login-overlay-wrapper.css +14 -4
  110. package/src/components/menu-bar-button.css +7 -7
  111. package/src/components/message.css +7 -32
  112. package/src/components/multi-select-combo-box.css +6 -2
  113. package/src/components/notification-container.css +8 -1
  114. package/src/components/number-field.css +6 -6
  115. package/src/components/password-field.css +4 -4
  116. package/src/components/popover-overlay.css +2 -138
  117. package/src/components/radio-button.css +1 -1
  118. package/src/components/rich-text-editor.css +40 -142
  119. package/src/components/scroller.css +3 -22
  120. package/src/components/select.css +15 -2
  121. package/src/components/side-nav-item.css +13 -0
  122. package/src/components/split-layout.css +19 -97
  123. package/src/components/tabsheet.css +5 -1
  124. package/src/components/text-area.css +2 -2
  125. package/src/components/time-picker.css +1 -1
  126. package/src/components/tooltip-overlay.css +4 -1
  127. package/src/components/upload-file.css +27 -61
  128. package/src/components/upload-icon.css +6 -0
  129. package/src/components/user-tags-overlay.css +2 -5
  130. package/src/components/vertical-layout.css +0 -4
  131. package/src/global/color-scheme.css +2 -1
  132. package/{user-colors.d.ts → src/global/index.css} +3 -3
  133. package/src/global/typography.css +2 -1
  134. package/src/mixins/dashboard-item.css +10 -142
  135. package/src/mixins/field-base.css +1 -1
  136. package/src/mixins/field-button.css +3 -3
  137. package/src/mixins/overlay.css +11 -1
  138. package/src/mixins/resizable-overlay.css +2 -1
  139. package/src/props/color.css +4 -2
  140. package/src/props/icons.css +21 -18
  141. package/src/props/index.css +12 -0
  142. package/src/props/reset.css +2 -1
  143. package/src/props/sizing.css +2 -1
  144. package/src/props/spacing.css +2 -1
  145. package/src/props/style.css +2 -1
  146. package/src/props/typography.css +2 -1
  147. package/utility.css +0 -1
  148. package/vaadin-iconset.js +2 -0
  149. package/auto-complete.css +0 -2512
  150. package/badge-global.js +0 -9
  151. package/badge.d.ts +0 -3
  152. package/badge.js +0 -178
  153. package/color-global.js +0 -9
  154. package/color.d.ts +0 -5
  155. package/color.js +0 -221
  156. package/components.css +0 -71
  157. package/font-icons.js +0 -69
  158. package/global.css +0 -8
  159. package/global.js +0 -5
  160. package/presets/compact.js +0 -40
  161. package/props.css +0 -12
  162. package/sizing.d.ts +0 -3
  163. package/sizing.js +0 -29
  164. package/spacing.d.ts +0 -3
  165. package/spacing.js +0 -37
  166. package/src/components/form-layout.css +0 -11
  167. package/src/components/master-detail-layout.css +0 -21
  168. package/src/components/upload-file-list.css +0 -24
  169. package/style.d.ts +0 -3
  170. package/style.js +0 -31
  171. package/typography-global.js +0 -13
  172. package/typography.d.ts +0 -7
  173. package/typography.js +0 -129
  174. package/user-colors.js +0 -33
  175. package/utilities/accessibility.js +0 -21
  176. package/utilities/background.js +0 -156
  177. package/utilities/border.js +0 -147
  178. package/utilities/filter.js +0 -34
  179. package/utilities/flexbox-grid.js +0 -619
  180. package/utilities/layout.js +0 -504
  181. package/utilities/shadows.js +0 -28
  182. package/utilities/sizing.js +0 -121
  183. package/utilities/spacing.js +0 -542
  184. package/utilities/transition.js +0 -50
  185. package/utilities/typography.js +0 -344
  186. package/utility-global.js +0 -9
  187. package/utility.d.ts +0 -3
  188. package/utility.js +0 -34
package/components/tab.css CHANGED
@@ -5,7 +5,8 @@
5
5
  */
6
6
  @import '../src/components/tab.css';
7
7
 
8
- :is(:root, :host)::before {
9
- --vaadin-tab-lumo-inject: 1;
10
- --vaadin-tab-lumo-inject-modules: lumo_components_tab;
8
+ :root::before,
9
+ :host::before {
10
+ --_lumo-vaadin-tab-inject: 1;
11
+ --_lumo-vaadin-tab-inject-modules: lumo_components_tab;
11
12
  }
package/components/tabs.css CHANGED
@@ -6,7 +6,8 @@
6
6
  @import '../src/components/tabs.css';
7
7
  @import './tab.css';
8
8
 
9
- :is(:root, :host)::before {
10
- --vaadin-tabs-lumo-inject: 1;
11
- --vaadin-tabs-lumo-inject-modules: lumo_components_tabs;
9
+ :root::before,
10
+ :host::before {
11
+ --_lumo-vaadin-tabs-inject: 1;
12
+ --_lumo-vaadin-tabs-inject-modules: lumo_components_tabs;
12
13
  }
package/components/tabsheet.css CHANGED
@@ -8,12 +8,13 @@
8
8
  @import './scroller.css';
9
9
  @import './tabs.css';
10
10
 
11
- :is(:root, :host)::before {
12
- --vaadin-tabsheet-lumo-inject: 1;
13
- --vaadin-tabsheet-lumo-inject-modules:
11
+ :root::before,
12
+ :host::before {
13
+ --_lumo-vaadin-tabsheet-inject: 1;
14
+ --_lumo-vaadin-tabsheet-inject-modules:
14
15
  lumo_mixins_loader,
15
16
  lumo_components_tabsheet;
16
17
 
17
- --vaadin-tabsheet-scroller-lumo-inject: 1;
18
- --vaadin-tabsheet-scroller-lumo-inject-modules: lumo_components_scroller;
18
+ --_lumo-vaadin-tabsheet-scroller-inject: 1;
19
+ --_lumo-vaadin-tabsheet-scroller-inject-modules: lumo_components_scroller;
19
20
  }
package/components/text-area.css CHANGED
@@ -12,9 +12,10 @@
12
12
  @import '../src/components/text-area.css';
13
13
  @import './input-container.css';
14
14
 
15
- :is(:root, :host)::before {
16
- --vaadin-text-area-lumo-inject: 1;
17
- --vaadin-text-area-lumo-inject-modules:
15
+ :root::before,
16
+ :host::before {
17
+ --_lumo-vaadin-text-area-inject: 1;
18
+ --_lumo-vaadin-text-area-inject-modules:
18
19
  lumo_mixins_field-label,
19
20
  lumo_mixins_field-required,
20
21
  lumo_mixins_field-error-message,
package/components/text-field.css CHANGED
@@ -11,9 +11,10 @@
11
11
  @import '../src/mixins/field-required.css';
12
12
  @import './input-container.css';
13
13
 
14
- :is(:root, :host)::before {
15
- --vaadin-text-field-lumo-inject: 1;
16
- --vaadin-text-field-lumo-inject-modules:
14
+ :root::before,
15
+ :host::before {
16
+ --_lumo-vaadin-text-field-inject: 1;
17
+ --_lumo-vaadin-text-field-inject-modules:
17
18
  lumo_mixins_field-label,
18
19
  lumo_mixins_field-required,
19
20
  lumo_mixins_field-error-message,
package/components/time-picker.css CHANGED
@@ -18,9 +18,10 @@
18
18
  @import '../src/components/time-picker.css';
19
19
  @import './input-container.css';
20
20
 
21
- :is(:root, :host)::before {
22
- --vaadin-time-picker-lumo-inject: 1;
23
- --vaadin-time-picker-lumo-inject-modules:
21
+ :root::before,
22
+ :host::before {
23
+ --_lumo-vaadin-time-picker-inject: 1;
24
+ --_lumo-vaadin-time-picker-inject-modules:
24
25
  lumo_mixins_field-label,
25
26
  lumo_mixins_field-required,
26
27
  lumo_mixins_field-error-message,
@@ -29,13 +30,13 @@
29
30
  lumo_mixins_field-base,
30
31
  lumo_components_time-picker;
31
32
 
32
- --vaadin-time-picker-item-lumo-inject: 1;
33
- --vaadin-time-picker-item-lumo-inject-modules:
33
+ --_lumo-vaadin-time-picker-item-inject: 1;
34
+ --_lumo-vaadin-time-picker-item-inject-modules:
34
35
  lumo_components_item,
35
36
  lumo_components_combo-box-item;
36
37
 
37
- --vaadin-time-picker-overlay-lumo-inject: 1;
38
- --vaadin-time-picker-overlay-lumo-inject-modules:
38
+ --_lumo-vaadin-time-picker-overlay-inject: 1;
39
+ --_lumo-vaadin-time-picker-overlay-inject-modules:
39
40
  lumo_mixins_overlay,
40
41
  lumo_mixins_menu-overlay-core,
41
42
  lumo_mixins_combo-box-overlay,
package/components/tooltip.css CHANGED
@@ -6,9 +6,10 @@
6
6
  @import '../src/mixins/overlay.css';
7
7
  @import '../src/components/tooltip-overlay.css';
8
8
 
9
- :is(:root, :host)::before {
10
- --vaadin-tooltip-overlay-lumo-inject: 1;
11
- --vaadin-tooltip-overlay-lumo-inject-modules:
9
+ :root::before,
10
+ :host::before {
11
+ --_lumo-vaadin-tooltip-overlay-inject: 1;
12
+ --_lumo-vaadin-tooltip-overlay-inject-modules:
12
13
  lumo_mixins_overlay,
13
14
  lumo_components_tooltip-overlay;
14
15
  }
package/components/upload.css CHANGED
@@ -4,25 +4,30 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  @import '../src/mixins/field-button.css';
7
- @import '../src/components/upload-file-list.css';
8
7
  @import '../src/components/upload-file.css';
9
8
  @import '../src/components/upload-icon.css';
10
9
  @import '../src/components/upload.css';
11
10
  @import './button.css';
12
11
  @import './progress-bar.css';
13
12
 
14
- :is(:root, :host)::before {
15
- --vaadin-upload-lumo-inject: 1;
16
- --vaadin-upload-lumo-inject-modules: lumo_components_upload;
13
+ :root::before,
14
+ :host::before {
15
+ --_lumo-vaadin-upload-inject: 1;
16
+ --_lumo-vaadin-upload-inject-modules: lumo_components_upload;
17
17
 
18
- --vaadin-upload-icon-lumo-inject: 1;
19
- --vaadin-upload-icon-lumo-inject-modules: lumo_components_upload-icon;
18
+ --_lumo-vaadin-upload-icon-inject: 1;
19
+ --_lumo-vaadin-upload-icon-inject-modules: lumo_components_upload-icon;
20
20
 
21
- --vaadin-upload-file-lumo-inject: 1;
22
- --vaadin-upload-file-lumo-inject-modules:
21
+ --_lumo-vaadin-upload-file-inject: 1;
22
+ --_lumo-vaadin-upload-file-inject-modules:
23
23
  lumo_mixins_field-button,
24
24
  lumo_components_upload-file;
25
+ }
25
26
 
26
- --vaadin-upload-file-list-lumo-inject: 1;
27
- --vaadin-upload-file-list-lumo-inject-modules: lumo_components_upload-file-list;
27
+ :where(:root),
28
+ :where(:host) {
29
+ --vaadin-upload-gap: 0;
30
+ --vaadin-upload-file-list-divider-color: var(
31
+ --lumo-contrast-10pct
32
+ );
28
33
  }
package/components/vertical-layout.css CHANGED
@@ -5,7 +5,8 @@
5
5
  */
6
6
  @import '../src/components/vertical-layout.css';
7
7
 
8
- :is(:root, :host)::before {
9
- --vaadin-vertical-layout-lumo-inject: 1;
10
- --vaadin-vertical-layout-lumo-inject-modules: lumo_components_vertical-layout;
8
+ :root::before,
9
+ :host::before {
10
+ --_lumo-vaadin-vertical-layout-inject: 1;
11
+ --_lumo-vaadin-vertical-layout-inject-modules: lumo_components_vertical-layout;
11
12
  }