@vaadin/vaadin-lumo-styles 25.0.0-alpha2 → 25.0.0-alpha21

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 (261) hide show
  1. package/all-imports.d.ts +0 -8
  2. package/all-imports.js +0 -18
  3. package/components/accordion-heading.css +14 -0
  4. package/components/accordion-panel.css +15 -0
  5. package/{user-colors.d.ts → components/accordion.css} +2 -3
  6. package/components/app-layout.css +11 -0
  7. package/components/avatar-group.css +31 -0
  8. package/components/avatar.css +17 -0
  9. package/components/button.css +11 -0
  10. package/components/card.css +50 -0
  11. package/components/charts.css +11 -0
  12. package/components/checkbox-group.css +23 -0
  13. package/components/checkbox.css +14 -0
  14. package/components/combo-box.css +47 -0
  15. package/components/confirm-dialog.css +17 -0
  16. package/components/context-menu.css +32 -0
  17. package/components/crud.css +40 -0
  18. package/components/custom-field.css +20 -0
  19. package/components/dashboard.css +34 -0
  20. package/components/date-picker.css +49 -0
  21. package/components/date-time-picker.css +28 -0
  22. package/components/details-summary.css +11 -0
  23. package/components/details.css +12 -0
  24. package/components/dialog.css +16 -0
  25. package/components/drawer-toggle.css +14 -0
  26. package/components/email-field.css +25 -0
  27. package/components/field-highlighter.css +22 -0
  28. package/components/form-item.css +11 -0
  29. package/components/form-layout.css +13 -0
  30. package/components/grid-filter-column.css +6 -0
  31. package/components/grid-filter.css +12 -0
  32. package/components/grid-pro-edit-column.css +48 -0
  33. package/components/grid-pro.css +14 -0
  34. package/components/grid-selection-column.css +6 -0
  35. package/components/grid-sort-column.css +6 -0
  36. package/components/grid-sorter.css +19 -0
  37. package/components/grid-tree-column.css +6 -0
  38. package/components/grid-tree-toggle.css +11 -0
  39. package/components/grid.css +11 -0
  40. package/components/horizontal-layout.css +11 -0
  41. package/components/icon.css +11 -0
  42. package/components/index.css +71 -0
  43. package/components/input-container.css +11 -0
  44. package/components/integer-field.css +25 -0
  45. package/components/item.css +11 -0
  46. package/components/list-box.css +11 -0
  47. package/components/login-form.css +14 -0
  48. package/components/login.css +15 -0
  49. package/components/map.css +11 -0
  50. package/components/master-detail-layout.css +19 -0
  51. package/components/menu-bar.css +47 -0
  52. package/components/message-input-button.css +11 -0
  53. package/components/message-input.css +13 -0
  54. package/components/message-list.css +6 -0
  55. package/components/message.css +12 -0
  56. package/components/multi-select-combo-box.css +61 -0
  57. package/components/notification.css +15 -0
  58. package/components/number-field.css +25 -0
  59. package/components/overlay.css +11 -0
  60. package/components/password-field.css +32 -0
  61. package/components/popover.css +14 -0
  62. package/components/progress-bar.css +11 -0
  63. package/components/radio-button.css +14 -0
  64. package/components/radio-group.css +23 -0
  65. package/components/rich-text-editor.css +26 -0
  66. package/components/scroller.css +11 -0
  67. package/components/select.css +48 -0
  68. package/components/side-nav-item.css +14 -0
  69. package/components/side-nav.css +12 -0
  70. package/components/split-layout.css +11 -0
  71. package/components/tab.css +11 -0
  72. package/components/tabs.css +12 -0
  73. package/components/tabsheet.css +19 -0
  74. package/components/text-area.css +25 -0
  75. package/components/text-field.css +23 -0
  76. package/components/time-picker.css +43 -0
  77. package/components/tooltip.css +14 -0
  78. package/components/upload.css +31 -0
  79. package/components/vertical-layout.css +11 -0
  80. package/dist/lumo.css +43 -0
  81. package/dist/presets/compact.css +1 -0
  82. package/dist/utility.css +1 -0
  83. package/{color-global.js → lumo.css} +3 -4
  84. package/mixins/field-button.js +3 -4
  85. package/mixins/helper.js +3 -4
  86. package/mixins/input-field-shared.js +5 -9
  87. package/mixins/loader.js +3 -2
  88. package/mixins/menu-overlay.js +3 -4
  89. package/mixins/overlay.js +3 -4
  90. package/mixins/required-field.js +3 -4
  91. package/package.json +24 -14
  92. package/presets/compact.css +31 -0
  93. package/src/components/accordion-heading.css +42 -0
  94. package/src/components/accordion-panel.css +38 -0
  95. package/src/components/app-layout.css +193 -0
  96. package/src/components/avatar-group-menu-item.css +22 -0
  97. package/src/components/avatar-group-overlay.css +11 -0
  98. package/src/components/avatar-group.css +67 -0
  99. package/src/components/avatar.css +86 -0
  100. package/src/components/button.css +334 -0
  101. package/src/components/card.css +38 -0
  102. package/src/components/chart.css +86 -0
  103. package/src/components/checkbox-group.css +18 -0
  104. package/src/components/checkbox.css +340 -0
  105. package/src/components/combo-box-item.css +18 -0
  106. package/src/components/combo-box-overlay.css +15 -0
  107. package/src/components/combo-box.css +14 -0
  108. package/src/components/confirm-dialog-overlay.css +55 -0
  109. package/src/components/context-menu-item.css +39 -0
  110. package/src/components/context-menu-list-box.css +40 -0
  111. package/src/components/context-menu-overlay.css +61 -0
  112. package/src/components/crud-dialog-overlay.css +57 -0
  113. package/src/components/crud-edit.css +30 -0
  114. package/src/components/crud.css +157 -0
  115. package/src/components/custom-field.css +102 -0
  116. package/src/components/dashboard-layout.css +28 -0
  117. package/src/components/dashboard-section.css +85 -0
  118. package/src/components/dashboard-widget.css +140 -0
  119. package/src/components/dashboard.css +14 -0
  120. package/src/components/date-picker-month-calendar.css +192 -0
  121. package/src/components/date-picker-overlay-content.css +127 -0
  122. package/src/components/date-picker-overlay.css +48 -0
  123. package/src/components/date-picker-year.css +35 -0
  124. package/src/components/date-picker.css +41 -0
  125. package/src/components/date-time-picker.css +36 -0
  126. package/src/components/details-summary.css +131 -0
  127. package/src/components/details.css +37 -0
  128. package/src/components/dialog-overlay.css +164 -0
  129. package/src/components/drawer-toggle.css +51 -0
  130. package/src/components/email-field.css +26 -0
  131. package/src/components/field-outline.css +51 -0
  132. package/src/components/form-item.css +36 -0
  133. package/src/components/grid-filter.css +16 -0
  134. package/src/components/grid-pro-edit-select.css +19 -0
  135. package/src/components/grid-pro.css +90 -0
  136. package/src/components/grid-sorter.css +70 -0
  137. package/src/components/grid-tree-toggle.css +104 -0
  138. package/src/components/grid.css +755 -0
  139. package/src/components/horizontal-layout.css +34 -0
  140. package/src/components/icon.css +11 -0
  141. package/src/components/input-container.css +228 -0
  142. package/src/components/item.css +94 -0
  143. package/src/components/list-box.css +31 -0
  144. package/src/components/login-form-wrapper.css +113 -0
  145. package/src/components/login-overlay-wrapper.css +189 -0
  146. package/src/components/map.css +182 -0
  147. package/src/components/menu-bar-button.css +128 -0
  148. package/src/components/menu-bar-item.css +23 -0
  149. package/{badge-global.js → src/components/menu-bar-overlay.css} +5 -4
  150. package/src/components/menu-bar.css +31 -0
  151. package/src/components/message-input.css +30 -0
  152. package/src/components/message.css +57 -0
  153. package/src/components/multi-select-combo-box-chip.css +113 -0
  154. package/src/components/multi-select-combo-box-container.css +20 -0
  155. package/src/components/multi-select-combo-box-item.css +13 -0
  156. package/src/components/multi-select-combo-box-overlay.css +18 -0
  157. package/src/components/multi-select-combo-box.css +102 -0
  158. package/src/components/notification-card.css +228 -0
  159. package/src/components/notification-container.css +60 -0
  160. package/src/components/number-field.css +53 -0
  161. package/src/components/password-field-button.css +19 -0
  162. package/src/components/password-field.css +24 -0
  163. package/src/components/popover-overlay.css +20 -0
  164. package/src/components/progress-bar.css +295 -0
  165. package/src/components/radio-button.css +156 -0
  166. package/src/components/radio-group.css +18 -0
  167. package/src/components/rich-text-editor-popup-overlay.css +27 -0
  168. package/src/components/rich-text-editor.css +383 -0
  169. package/src/components/scroller.css +21 -0
  170. package/src/components/select-overlay.css +54 -0
  171. package/src/components/select-value-button.css +57 -0
  172. package/src/components/select.css +73 -0
  173. package/src/components/side-nav-item.css +183 -0
  174. package/src/components/side-nav.css +102 -0
  175. package/src/components/split-layout.css +53 -0
  176. package/src/components/tab.css +246 -0
  177. package/src/components/tabs.css +285 -0
  178. package/src/components/tabsheet.css +63 -0
  179. package/src/components/text-area.css +116 -0
  180. package/src/components/time-picker-overlay.css +15 -0
  181. package/src/components/time-picker.css +36 -0
  182. package/src/components/tooltip-overlay.css +53 -0
  183. package/src/components/upload-file.css +99 -0
  184. package/src/components/upload-icon.css +20 -0
  185. package/src/components/upload.css +56 -0
  186. package/src/components/user-tag.css +48 -0
  187. package/src/components/user-tags-overlay.css +64 -0
  188. package/src/components/vertical-layout.css +34 -0
  189. package/src/global/badge.css +167 -0
  190. package/src/global/color-scheme.css +99 -0
  191. package/{utility-global.js → src/global/index.css} +3 -4
  192. package/src/global/typography.css +113 -0
  193. package/src/mixins/checkable-field.css +67 -0
  194. package/src/mixins/combo-box-loader.css +14 -0
  195. package/src/mixins/combo-box-overlay.css +30 -0
  196. package/src/mixins/dashboard-item.css +121 -0
  197. package/src/mixins/field-base.css +187 -0
  198. package/src/mixins/field-button.css +46 -0
  199. package/src/mixins/field-error-message.css +36 -0
  200. package/src/mixins/field-helper.css +62 -0
  201. package/src/mixins/field-label.css +62 -0
  202. package/src/mixins/field-required.css +26 -0
  203. package/src/mixins/grid-pro-editor.css +35 -0
  204. package/src/mixins/group-field.css +58 -0
  205. package/src/mixins/loader.css +48 -0
  206. package/src/mixins/menu-overlay-core.css +36 -0
  207. package/src/mixins/menu-overlay-ext.css +63 -0
  208. package/src/mixins/overlay.css +131 -0
  209. package/src/mixins/resizable-overlay.css +100 -0
  210. package/src/props/color.css +98 -0
  211. package/src/props/icons.css +63 -0
  212. package/src/props/index.css +12 -0
  213. package/src/props/reset.css +11 -0
  214. package/src/props/sizing.css +19 -0
  215. package/src/props/spacing.css +27 -0
  216. package/src/props/style.css +21 -0
  217. package/src/props/typography.css +24 -0
  218. package/src/utilities/accessibility.css +17 -0
  219. package/src/utilities/background.css +189 -0
  220. package/src/utilities/border.css +173 -0
  221. package/src/utilities/filter.css +37 -0
  222. package/src/utilities/flexbox-grid.css +781 -0
  223. package/src/utilities/layout.css +629 -0
  224. package/src/utilities/shadows.css +29 -0
  225. package/src/utilities/sizing.css +142 -0
  226. package/src/utilities/spacing.css +682 -0
  227. package/src/utilities/transition.css +46 -0
  228. package/src/utilities/typography.css +424 -0
  229. package/utility.css +16 -0
  230. package/vaadin-iconset.js +4 -0
  231. package/auto-complete.css +0 -2582
  232. package/badge.d.ts +0 -3
  233. package/badge.js +0 -178
  234. package/color.d.ts +0 -5
  235. package/color.js +0 -221
  236. package/font-icons.js +0 -67
  237. package/global.js +0 -5
  238. package/presets/compact.js +0 -40
  239. package/sizing.d.ts +0 -3
  240. package/sizing.js +0 -29
  241. package/spacing.d.ts +0 -3
  242. package/spacing.js +0 -37
  243. package/style.d.ts +0 -5
  244. package/style.js +0 -119
  245. package/typography-global.js +0 -13
  246. package/typography.d.ts +0 -7
  247. package/typography.js +0 -129
  248. package/user-colors.js +0 -33
  249. package/utilities/accessibility.js +0 -21
  250. package/utilities/background.js +0 -156
  251. package/utilities/border.js +0 -147
  252. package/utilities/filter.js +0 -34
  253. package/utilities/flexbox-grid.js +0 -619
  254. package/utilities/layout.js +0 -504
  255. package/utilities/shadows.js +0 -28
  256. package/utilities/sizing.js +0 -121
  257. package/utilities/spacing.js +0 -542
  258. package/utilities/transition.js +0 -49
  259. package/utilities/typography.js +0 -344
  260. package/utility.d.ts +0 -3
  261. package/utility.js +0 -34
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.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/font-icons.js DELETED
@@ -1,67 +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-clock: '\\ea14';
40
- --lumo-icons-cog: '\\ea15';
41
- --lumo-icons-cross: '\\ea16';
42
- --lumo-icons-download: '\\ea17';
43
- --lumo-icons-drag-handle: '\\ea18';
44
- --lumo-icons-dropdown: '\\ea19';
45
- --lumo-icons-edit: '\\ea1a';
46
- --lumo-icons-error: '\\ea1b';
47
- --lumo-icons-eye: '\\ea1c';
48
- --lumo-icons-eye-disabled: '\\ea1d';
49
- --lumo-icons-menu: '\\ea1e';
50
- --lumo-icons-minus: '\\ea1f';
51
- --lumo-icons-ordered-list: '\\ea20';
52
- --lumo-icons-phone: '\\ea21';
53
- --lumo-icons-photo: '\\ea22';
54
- --lumo-icons-play: '\\ea23';
55
- --lumo-icons-plus: '\\ea24';
56
- --lumo-icons-redo: '\\ea25';
57
- --lumo-icons-reload: '\\ea26';
58
- --lumo-icons-resize-handle: '\\ea27';
59
- --lumo-icons-search: '\\ea28';
60
- --lumo-icons-undo: '\\ea29';
61
- --lumo-icons-unordered-list: '\\ea2a';
62
- --lumo-icons-upload: '\\ea2b';
63
- --lumo-icons-user: '\\ea2c';
64
- }
65
- `;
66
-
67
- addLumoGlobalStyles('font-icons', fontIcons);
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/sizing.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import type { CSSResult } from 'lit';
2
-
3
- export const sizing: CSSResult;
package/sizing.js DELETED
@@ -1,29 +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 sizing = css`
11
- :host {
12
- --lumo-size-xs: 1.625rem;
13
- --lumo-size-s: 1.875rem;
14
- --lumo-size-m: 2.25rem;
15
- --lumo-size-l: 2.75rem;
16
- --lumo-size-xl: 3.5rem;
17
-
18
- /* Icons */
19
- --lumo-icon-size-s: 1.25em;
20
- --lumo-icon-size-m: 1.5em;
21
- --lumo-icon-size-l: 2.25em;
22
- /* For backwards compatibility */
23
- --lumo-icon-size: var(--lumo-icon-size-m);
24
- }
25
- `;
26
-
27
- addLumoGlobalStyles('sizing-props', sizing);
28
-
29
- export { sizing };
package/spacing.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import type { CSSResult } from 'lit';
2
-
3
- export const spacing: CSSResult;
package/spacing.js DELETED
@@ -1,37 +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 spacing = css`
11
- :host {
12
- /* Square */
13
- --lumo-space-xs: 0.25rem;
14
- --lumo-space-s: 0.5rem;
15
- --lumo-space-m: 1rem;
16
- --lumo-space-l: 1.5rem;
17
- --lumo-space-xl: 2.5rem;
18
-
19
- /* Wide */
20
- --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);
21
- --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);
22
- --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);
23
- --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);
24
- --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);
25
-
26
- /* Tall */
27
- --lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
28
- --lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);
29
- --lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);
30
- --lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);
31
- --lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);
32
- }
33
- `;
34
-
35
- addLumoGlobalStyles('spacing-props', spacing);
36
-
37
- export { spacing };
package/style.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { CSSResult } from 'lit';
2
-
3
- export const globals: CSSResult;
4
-
5
- export const style: CSSResult;