@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/badge-global.js DELETED
@@ -1,9 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { badge } from './badge.js';
7
- import { addLumoGlobalStyles } from './global.js';
8
-
9
- addLumoGlobalStyles('badge', badge);
package/badge.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import type { CSSResult } from 'lit';
2
-
3
- export const badge: CSSResult;
package/badge.js DELETED
@@ -1,178 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import './style.js';
7
- import './color.js';
8
- import './typography.js';
9
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
-
11
- const badge = css`
12
- [theme~='badge'] {
13
- display: inline-flex;
14
- align-items: center;
15
- justify-content: center;
16
- box-sizing: border-box;
17
- padding: 0.4em calc(0.5em + var(--lumo-border-radius-s) / 4);
18
- color: var(--lumo-primary-text-color);
19
- background-color: var(--lumo-primary-color-10pct);
20
- border-radius: var(--lumo-border-radius-s);
21
- font-family: var(--lumo-font-family);
22
- font-size: var(--lumo-font-size-s);
23
- line-height: 1;
24
- font-weight: 500;
25
- text-transform: initial;
26
- letter-spacing: initial;
27
- min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
28
- flex-shrink: 0;
29
- }
30
-
31
- /* Ensure proper vertical alignment */
32
- [theme~='badge']::before {
33
- display: inline-block;
34
- content: '\\2003';
35
- width: 0;
36
- }
37
-
38
- [theme~='badge'][theme~='small'] {
39
- font-size: var(--lumo-font-size-xxs);
40
- line-height: 1;
41
- }
42
-
43
- /* Colors */
44
-
45
- [theme~='badge'][theme~='success'] {
46
- color: var(--lumo-success-text-color);
47
- background-color: var(--lumo-success-color-10pct);
48
- }
49
-
50
- [theme~='badge'][theme~='error'] {
51
- color: var(--lumo-error-text-color);
52
- background-color: var(--lumo-error-color-10pct);
53
- }
54
-
55
- [theme~='badge'][theme~='warning'] {
56
- color: var(--lumo-warning-text-color);
57
- background-color: var(--lumo-warning-color-10pct);
58
- }
59
-
60
- [theme~='badge'][theme~='contrast'] {
61
- color: var(--lumo-contrast-80pct);
62
- background-color: var(--lumo-contrast-5pct);
63
- }
64
-
65
- /* Primary */
66
-
67
- [theme~='badge'][theme~='primary'] {
68
- color: var(--lumo-primary-contrast-color);
69
- background-color: var(--lumo-primary-color);
70
- }
71
-
72
- [theme~='badge'][theme~='success'][theme~='primary'] {
73
- color: var(--lumo-success-contrast-color);
74
- background-color: var(--lumo-success-color);
75
- }
76
-
77
- [theme~='badge'][theme~='error'][theme~='primary'] {
78
- color: var(--lumo-error-contrast-color);
79
- background-color: var(--lumo-error-color);
80
- }
81
-
82
- [theme~='badge'][theme~='warning'][theme~='primary'] {
83
- color: var(--lumo-warning-contrast-color);
84
- background-color: var(--lumo-warning-color);
85
- }
86
-
87
- [theme~='badge'][theme~='contrast'][theme~='primary'] {
88
- color: var(--lumo-base-color);
89
- background-color: var(--lumo-contrast);
90
- }
91
-
92
- /* Links */
93
-
94
- [theme~='badge'][href]:hover {
95
- text-decoration: none;
96
- }
97
-
98
- /* Icon */
99
-
100
- [theme~='badge'] > vaadin-icon {
101
- margin: -0.25em 0;
102
- }
103
-
104
- [theme~='badge'] > vaadin-icon:first-child {
105
- margin-left: -0.375em;
106
- }
107
-
108
- [theme~='badge'] > vaadin-icon:last-child {
109
- margin-right: -0.375em;
110
- }
111
-
112
- vaadin-icon[theme~='badge'][icon] {
113
- min-width: 0;
114
- padding: 0;
115
- font-size: 1rem;
116
- width: var(--lumo-icon-size-m);
117
- height: var(--lumo-icon-size-m);
118
- }
119
-
120
- vaadin-icon[theme~='badge'][icon][theme~='small'] {
121
- width: var(--lumo-icon-size-s);
122
- height: var(--lumo-icon-size-s);
123
- }
124
-
125
- /* Empty */
126
-
127
- [theme~='badge']:not([icon]):empty {
128
- min-width: 0;
129
- width: 1em;
130
- height: 1em;
131
- padding: 0;
132
- border-radius: 50%;
133
- background-color: var(--lumo-primary-color);
134
- }
135
-
136
- [theme~='badge'][theme~='small']:not([icon]):empty {
137
- width: 0.75em;
138
- height: 0.75em;
139
- }
140
-
141
- [theme~='badge'][theme~='contrast']:not([icon]):empty {
142
- background-color: var(--lumo-contrast);
143
- }
144
-
145
- [theme~='badge'][theme~='success']:not([icon]):empty {
146
- background-color: var(--lumo-success-color);
147
- }
148
-
149
- [theme~='badge'][theme~='error']:not([icon]):empty {
150
- background-color: var(--lumo-error-color);
151
- }
152
-
153
- [theme~='badge'][theme~='warning']:not([icon]):empty {
154
- background-color: var(--lumo-warning-color);
155
- }
156
-
157
- /* Pill */
158
-
159
- [theme~='badge'][theme~='pill'] {
160
- --lumo-border-radius-s: 1em;
161
- }
162
-
163
- /* RTL specific styles */
164
-
165
- [dir='rtl'][theme~='badge'] vaadin-icon:first-child {
166
- margin-right: -0.375em;
167
- margin-left: 0;
168
- }
169
-
170
- [dir='rtl'][theme~='badge'] vaadin-icon:last-child {
171
- margin-left: -0.375em;
172
- margin-right: 0;
173
- }
174
- `;
175
-
176
- registerStyles('', badge, { moduleId: 'lumo-badge' });
177
-
178
- export { badge };
package/color-global.js DELETED
@@ -1,9 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { color } from './color.js';
7
- import { addLumoGlobalStyles } from './global.js';
8
-
9
- addLumoGlobalStyles('color', color);
package/color.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { CSSResult } from 'lit';
2
-
3
- export const colorBase: CSSResult;
4
-
5
- export const color: CSSResult;
package/color.js DELETED
@@ -1,221 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import './version.js';
7
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
- import { addLumoGlobalStyles } from './global.js';
9
-
10
- const colorBase = css`
11
- :host {
12
- /* Base (background) */
13
- --lumo-base-color: #fff;
14
-
15
- /* Tint */
16
- --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
17
- --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
18
- --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
19
- --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
20
- --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
21
- --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
22
- --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
23
- --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
24
- --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
25
- --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
26
- --lumo-tint: #fff;
27
-
28
- /* Shade */
29
- --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
30
- --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
31
- --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
32
- --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
33
- --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
34
- --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
35
- --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
36
- --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
37
- --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
38
- --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
39
- --lumo-shade: hsl(214, 35%, 15%);
40
-
41
- /* Contrast */
42
- --lumo-contrast-5pct: var(--lumo-shade-5pct);
43
- --lumo-contrast-10pct: var(--lumo-shade-10pct);
44
- --lumo-contrast-20pct: var(--lumo-shade-20pct);
45
- --lumo-contrast-30pct: var(--lumo-shade-30pct);
46
- --lumo-contrast-40pct: var(--lumo-shade-40pct);
47
- --lumo-contrast-50pct: var(--lumo-shade-50pct);
48
- --lumo-contrast-60pct: var(--lumo-shade-60pct);
49
- --lumo-contrast-70pct: var(--lumo-shade-70pct);
50
- --lumo-contrast-80pct: var(--lumo-shade-80pct);
51
- --lumo-contrast-90pct: var(--lumo-shade-90pct);
52
- --lumo-contrast: var(--lumo-shade);
53
-
54
- /* Text */
55
- --lumo-header-text-color: var(--lumo-contrast);
56
- --lumo-body-text-color: var(--lumo-contrast-90pct);
57
- --lumo-secondary-text-color: var(--lumo-contrast-70pct);
58
- --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
59
- --lumo-disabled-text-color: var(--lumo-contrast-30pct);
60
-
61
- /* Primary */
62
- --lumo-primary-color: hsl(214, 100%, 48%);
63
- --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
64
- --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
65
- --lumo-primary-text-color: hsl(214, 100%, 43%);
66
- --lumo-primary-contrast-color: #fff;
67
-
68
- /* Error */
69
- --lumo-error-color: hsl(3, 85%, 48%);
70
- --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
71
- --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
72
- --lumo-error-text-color: hsl(3, 89%, 42%);
73
- --lumo-error-contrast-color: #fff;
74
-
75
- /* Success */
76
- --lumo-success-color: hsl(145, 72%, 30%);
77
- --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
78
- --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
79
- --lumo-success-text-color: hsl(145, 85%, 25%);
80
- --lumo-success-contrast-color: #fff;
81
-
82
- /* Warning */
83
- --lumo-warning-color: hsl(48, 100%, 50%);
84
- --lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
85
- --lumo-warning-text-color: hsl(32, 100%, 30%);
86
- --lumo-warning-contrast-color: var(--lumo-shade-90pct);
87
- }
88
-
89
- /* forced-colors mode adjustments */
90
- @media (forced-colors: active) {
91
- html {
92
- --lumo-disabled-text-color: GrayText;
93
- }
94
- }
95
- `;
96
-
97
- addLumoGlobalStyles('color-props', colorBase);
98
-
99
- const color = css`
100
- [theme~='dark'] {
101
- /* Base (background) */
102
- --lumo-base-color: hsl(214, 35%, 21%);
103
-
104
- /* Tint */
105
- --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
106
- --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
107
- --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
108
- --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
109
- --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
110
- --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
111
- --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
112
- --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
113
- --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
114
- --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
115
- --lumo-tint: hsl(214, 100%, 98%);
116
-
117
- /* Shade */
118
- --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
119
- --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
120
- --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
121
- --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
122
- --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
123
- --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
124
- --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
125
- --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
126
- --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
127
- --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
128
- --lumo-shade: hsl(214, 33%, 13%);
129
-
130
- /* Contrast */
131
- --lumo-contrast-5pct: var(--lumo-tint-5pct);
132
- --lumo-contrast-10pct: var(--lumo-tint-10pct);
133
- --lumo-contrast-20pct: var(--lumo-tint-20pct);
134
- --lumo-contrast-30pct: var(--lumo-tint-30pct);
135
- --lumo-contrast-40pct: var(--lumo-tint-40pct);
136
- --lumo-contrast-50pct: var(--lumo-tint-50pct);
137
- --lumo-contrast-60pct: var(--lumo-tint-60pct);
138
- --lumo-contrast-70pct: var(--lumo-tint-70pct);
139
- --lumo-contrast-80pct: var(--lumo-tint-80pct);
140
- --lumo-contrast-90pct: var(--lumo-tint-90pct);
141
- --lumo-contrast: var(--lumo-tint);
142
-
143
- /* Text */
144
- --lumo-header-text-color: var(--lumo-contrast);
145
- --lumo-body-text-color: var(--lumo-contrast-90pct);
146
- --lumo-secondary-text-color: var(--lumo-contrast-70pct);
147
- --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
148
- --lumo-disabled-text-color: var(--lumo-contrast-30pct);
149
-
150
- /* Primary */
151
- --lumo-primary-color: hsl(214, 90%, 48%);
152
- --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
153
- --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
154
- --lumo-primary-text-color: hsl(214, 90%, 77%);
155
- --lumo-primary-contrast-color: #fff;
156
-
157
- /* Error */
158
- --lumo-error-color: hsl(3, 79%, 49%);
159
- --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
160
- --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
161
- --lumo-error-text-color: hsl(3, 100%, 80%);
162
-
163
- /* Success */
164
- --lumo-success-color: hsl(145, 72%, 30%);
165
- --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
166
- --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
167
- --lumo-success-text-color: hsl(145, 85%, 46%);
168
-
169
- /* Warning */
170
- --lumo-warning-color: hsl(43, 100%, 48%);
171
- --lumo-warning-color-10pct: hsla(40, 100%, 50%, 0.2);
172
- --lumo-warning-text-color: hsl(45, 100%, 60%);
173
- --lumo-warning-contrast-color: var(--lumo-shade-90pct);
174
- }
175
-
176
- html {
177
- color: var(--lumo-body-text-color);
178
- background-color: var(--lumo-base-color);
179
- color-scheme: light;
180
- }
181
-
182
- [theme~='dark'] {
183
- color: var(--lumo-body-text-color);
184
- background-color: var(--lumo-base-color);
185
- color-scheme: dark;
186
- }
187
-
188
- h1,
189
- h2,
190
- h3,
191
- h4,
192
- h5,
193
- h6 {
194
- color: var(--lumo-header-text-color);
195
- }
196
-
197
- a:where(:any-link) {
198
- color: var(--lumo-primary-text-color);
199
- }
200
-
201
- a:not(:any-link) {
202
- color: var(--lumo-disabled-text-color);
203
- }
204
-
205
- blockquote {
206
- color: var(--lumo-secondary-text-color);
207
- }
208
-
209
- code,
210
- pre {
211
- background-color: var(--lumo-contrast-10pct);
212
- border-radius: var(--lumo-border-radius-m);
213
- }
214
- pre code {
215
- background: transparent;
216
- }
217
- `;
218
-
219
- registerStyles('', color, { moduleId: 'lumo-color' });
220
-
221
- export { colorBase, color };
package/components.css DELETED
@@ -1,71 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- @import './components/accordion.css';
7
- @import './components/app-layout.css';
8
- @import './components/avatar-group.css';
9
- @import './components/avatar.css';
10
- @import './components/button.css';
11
- @import './components/card.css';
12
- @import './components/charts.css';
13
- @import './components/checkbox-group.css';
14
- @import './components/checkbox.css';
15
- @import './components/combo-box.css';
16
- @import './components/confirm-dialog.css';
17
- @import './components/context-menu.css';
18
- @import './components/crud.css';
19
- @import './components/custom-field.css';
20
- @import './components/dashboard.css';
21
- @import './components/date-picker.css';
22
- @import './components/date-time-picker.css';
23
- @import './components/details-summary.css';
24
- @import './components/details.css';
25
- @import './components/dialog.css';
26
- @import './components/drawer-toggle.css';
27
- @import './components/email-field.css';
28
- @import './components/field-highlighter.css';
29
- @import './components/form-item.css';
30
- @import './components/form-layout.css';
31
- @import './components/grid-filter-column.css';
32
- @import './components/grid-pro-edit-column.css';
33
- @import './components/grid-pro.css';
34
- @import './components/grid-selection-column.css';
35
- @import './components/grid-sort-column.css';
36
- @import './components/grid-tree-column.css';
37
- @import './components/grid.css';
38
- @import './components/horizontal-layout.css';
39
- @import './components/icon.css';
40
- @import './components/input-container.css';
41
- @import './components/integer-field.css';
42
- @import './components/item.css';
43
- @import './components/list-box.css';
44
- @import './components/login.css';
45
- @import './components/map.css';
46
- @import './components/master-detail-layout.css';
47
- @import './components/menu-bar.css';
48
- @import './components/message-input.css';
49
- @import './components/message-list.css';
50
- @import './components/multi-select-combo-box.css';
51
- @import './components/notification.css';
52
- @import './components/number-field.css';
53
- @import './components/overlay.css';
54
- @import './components/password-field.css';
55
- @import './components/popover.css';
56
- @import './components/progress-bar.css';
57
- @import './components/radio-button.css';
58
- @import './components/radio-group.css';
59
- @import './components/rich-text-editor.css';
60
- @import './components/scroller.css';
61
- @import './components/select.css';
62
- @import './components/side-nav.css';
63
- @import './components/split-layout.css';
64
- @import './components/tabs.css';
65
- @import './components/tabsheet.css';
66
- @import './components/text-area.css';
67
- @import './components/text-field.css';
68
- @import './components/time-picker.css';
69
- @import './components/tooltip.css';
70
- @import './components/upload.css';
71
- @import './components/vertical-layout.css';
package/font-icons.js DELETED
@@ -1,69 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import './version.js';
7
- import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
- import { addLumoGlobalStyles } from './global.js';
9
-
10
- const fontIcons = css`
11
- @font-face {
12
- font-family: 'lumo-icons';
13
- src: url(data:application/font-woff;charset=utf-8;base64,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)
14
- format('woff');
15
- font-weight: normal;
16
- font-style: normal;
17
- }
18
-
19
- html {
20
- --lumo-icons-align-center: '\\ea01';
21
- --lumo-icons-align-left: '\\ea02';
22
- --lumo-icons-align-right: '\\ea03';
23
- --lumo-icons-angle-down: '\\ea04';
24
- --lumo-icons-angle-left: '\\ea05';
25
- --lumo-icons-angle-right: '\\ea06';
26
- --lumo-icons-angle-up: '\\ea07';
27
- --lumo-icons-arrow-down: '\\ea08';
28
- --lumo-icons-arrow-left: '\\ea09';
29
- --lumo-icons-arrow-right: '\\ea0a';
30
- --lumo-icons-arrow-up: '\\ea0b';
31
- --lumo-icons-bar-chart: '\\ea0c';
32
- --lumo-icons-bell: '\\ea0d';
33
- --lumo-icons-calendar: '\\ea0e';
34
- --lumo-icons-checkmark: '\\ea0f';
35
- --lumo-icons-chevron-down: '\\ea10';
36
- --lumo-icons-chevron-left: '\\ea11';
37
- --lumo-icons-chevron-right: '\\ea12';
38
- --lumo-icons-chevron-up: '\\ea13';
39
- --lumo-icons-clean: '\\ea14';
40
- --lumo-icons-clock: '\\ea15';
41
- --lumo-icons-cog: '\\ea16';
42
- --lumo-icons-cross: '\\ea17';
43
- --lumo-icons-download: '\\ea18';
44
- --lumo-icons-drag-handle: '\\ea19';
45
- --lumo-icons-dropdown: '\\ea1a';
46
- --lumo-icons-edit: '\\ea1b';
47
- --lumo-icons-error: '\\ea1c';
48
- --lumo-icons-eye: '\\ea1d';
49
- --lumo-icons-eye-disabled: '\\ea1e';
50
- --lumo-icons-link: '\\ea1f';
51
- --lumo-icons-menu: '\\ea20';
52
- --lumo-icons-minus: '\\ea21';
53
- --lumo-icons-ordered-list: '\\ea22';
54
- --lumo-icons-phone: '\\ea23';
55
- --lumo-icons-photo: '\\ea24';
56
- --lumo-icons-play: '\\ea25';
57
- --lumo-icons-plus: '\\ea26';
58
- --lumo-icons-redo: '\\ea27';
59
- --lumo-icons-reload: '\\ea28';
60
- --lumo-icons-resize-handle: '\\ea29';
61
- --lumo-icons-search: '\\ea2a';
62
- --lumo-icons-undo: '\\ea2b';
63
- --lumo-icons-unordered-list: '\\ea2c';
64
- --lumo-icons-upload: '\\ea2d';
65
- --lumo-icons-user: '\\ea2e';
66
- }
67
- `;
68
-
69
- addLumoGlobalStyles('font-icons', fontIcons);
package/global.css DELETED
@@ -1,8 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- @import './src/global/badge.css';
7
- @import './src/global/color-scheme.css';
8
- @import './src/global/typography.css';
package/global.js DELETED
@@ -1,5 +0,0 @@
1
- import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
2
-
3
- export const addLumoGlobalStyles = (id, ...styles) => {
4
- addGlobalThemeStyles(`lumo-${id}`, styles);
5
- };
@@ -1,40 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import '../sizing.js';
7
- import '../spacing.js';
8
- const template = document.createElement('template');
9
-
10
- template.innerHTML = `
11
- <style>
12
- /* Use a stronger selector so that imports added later do not override the property values */
13
- html:not(div) {
14
- --lumo-size-xl: 3rem;
15
- --lumo-size-l: 2.5rem;
16
- --lumo-size-m: 2rem;
17
- --lumo-size-s: 1.75rem;
18
- --lumo-size-xs: 1.5rem;
19
- --lumo-font-size: 1rem;
20
- --lumo-font-size-xxxl: 1.75rem;
21
- --lumo-font-size-xxl: 1.375rem;
22
- --lumo-font-size-xl: 1.125rem;
23
- --lumo-font-size-l: 1rem;
24
- --lumo-font-size-m: 0.875rem;
25
- --lumo-font-size-s: 0.8125rem;
26
- --lumo-font-size-xs: 0.75rem;
27
- --lumo-font-size-xxs: 0.6875rem;
28
- --lumo-line-height-m: 1.4;
29
- --lumo-line-height-s: 1.2;
30
- --lumo-line-height-xs: 1.1;
31
- --lumo-space-xl: 1.875rem;
32
- --lumo-space-l: 1.25rem;
33
- --lumo-space-m: 0.625rem;
34
- --lumo-space-s: 0.3125rem;
35
- --lumo-space-xs: 0.1875rem;
36
- }
37
- </style>
38
- `;
39
-
40
- document.head.appendChild(template.content);
package/props.css DELETED
@@ -1,12 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- @import './src/props/reset.css';
7
- @import './src/props/icons.css';
8
- @import './src/props/style.css';
9
- @import './src/props/color.css';
10
- @import './src/props/sizing.css';
11
- @import './src/props/spacing.css';
12
- @import './src/props/typography.css';
package/sizing.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import type { CSSResult } from 'lit';
2
-
3
- export const sizing: CSSResult;