@vaadin/vaadin-lumo-styles 24.3.0-alpha5 → 24.3.0-alpha6

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 (6) hide show
  1. package/auto-complete.css +57 -0
  2. package/mixins/helper.js +10 -5
  3. package/mixins/input-field-shared.js +9 -17
  4. package/mixins/required-field.js +22 -6
  5. package/package.json +5 -5
  6. package/style.js +66 -0
package/auto-complete.css CHANGED
@@ -99,9 +99,66 @@
99
99
  --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
100
100
  --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
101
101
  --lumo-clickable-cursor: default;
102
+ --vaadin-button-background: var(--lumo-contrast-5pct);
103
+ --vaadin-button-border: none;
104
+ --vaadin-button-border-radius: var(--lumo-border-radius-m);
105
+ --vaadin-button-font-size: var(--lumo-font-size-m);
106
+ --vaadin-button-font-weight: 500;
107
+ --vaadin-button-height: var(--lumo-size-m);
108
+ --vaadin-button-margin: var(--lumo-space-xs) 0;
109
+ --vaadin-button-min-width: calc(var(--vaadin-button-height) * 2);
110
+ --vaadin-button-padding-h: calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);
111
+ --vaadin-button-padding-v: 0;
112
+ --vaadin-button-text-color: var(--lumo-primary-text-color);
113
+ --vaadin-button-primary-background: var(--lumo-primary-color);
114
+ --vaadin-button-primary-border: none;
115
+ --vaadin-button-primary-font-weight: 600;
116
+ --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
117
+ --vaadin-button-tertiary-background: transparent !important;
118
+ --vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);
119
+ --vaadin-button-tertiary-font-weight: 500;
120
+ --vaadin-button-tertiary-padding: 0 calc(var(--vaadin-button-height) / 6);
121
+ --vaadin-checkbox-background: var(--lumo-contrast-20pct);
122
+ --vaadin-checkbox-background-hover: var(--lumo-contrast-30pct);
123
+ --vaadin-checkbox-border-radius: var(--lumo-border-radius-s);
124
+ --vaadin-checkbox-checkmark-char: var(--lumo-icons-checkmark);
125
+ --vaadin-checkbox-checkmark-char-intermediate: '';
126
+ --vaadin-checkbox-checkmark-color: var(--lumo-primary-contrast-color);
127
+ --vaadin-checkbox-checkmark-size: calc(var(--vaadin-checkbox-size) + 2px);
128
+ --vaadin-checkbox-label-color: var(--lumo-body-text-color);
129
+ --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
130
+ --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
102
131
  --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
132
+ --vaadin-radio-button-background: var(--lumo-contrast-20pct);
133
+ --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
134
+ --vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color);
135
+ --vaadin-radio-button-dot-size: 3px;
136
+ --vaadin-radio-button-label-color: var(--lumo-body-text-color);
137
+ --vaadin-radio-button-label-font-size: var(--lumo-font-size-m);
103
138
  --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
139
+ --vaadin-selection-color: var(--lumo-primary-color);
140
+ --vaadin-selection-color-text: var(--lumo-primary-text-color);
104
141
  --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
142
+ --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
143
+ --vaadin-focus-ring-width: 2px;
144
+ --vaadin-input-field-label-color: var(--lumo-secondary-text-color);
145
+ --vaadin-input-field-focused-label-color: var(--lumo-primary-text-color);
146
+ --vaadin-input-field-hovered-label-color: var(--lumo-body-text-color);
147
+ --vaadin-input-field-label-font-size: var(--lumo-font-size-s);
148
+ --vaadin-input-field-label-font-weight: 500;
149
+ --vaadin-input-field-helper-color: var(--lumo-secondary-text-color);
150
+ --vaadin-input-field-helper-font-size: var(--lumo-font-size-xs);
151
+ --vaadin-input-field-helper-font-weight: 400;
152
+ --vaadin-input-field-helper-spacing: 0.4em;
153
+ --vaadin-input-field-error-color: var(--lumo-error-text-color);
154
+ --vaadin-input-field-error-font-size: var(--lumo-font-size-xs);
155
+ --vaadin-input-field-error-font-weight: 400;
156
+ --vaadin-text-input-field-height: var(--lumo-size-m);
157
+ --vaadin-text-input-field-placeholder-color: var(--lumo-secondary-text-color);
158
+ --vaadin-text-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);
159
+ --vaadin-text-input-field-value-color: var(--lumo-body-text-color);
160
+ --vaadin-text-input-field-value-font-size: var(--lumo-font-size-m);
161
+ --vaadin-text-input-field-value-font-weight: 400;
105
162
  --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
106
163
  --lumo-font-size-xxs: 0.75rem;
107
164
  --lumo-font-size-xs: 0.8125rem;
package/mixins/helper.js CHANGED
@@ -10,17 +10,22 @@ import '../typography.js';
10
10
  import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
11
11
 
12
12
  export const helper = css`
13
+ :host {
14
+ --_helper-spacing: var(--vaadin-input-field-helper-spacing, 0.4em);
15
+ }
16
+
13
17
  :host([has-helper]) [part='helper-text']::before {
14
18
  content: '';
15
19
  display: block;
16
- height: 0.4em;
20
+ height: var(--_helper-spacing);
17
21
  }
18
22
 
19
23
  [part='helper-text'] {
20
24
  display: block;
21
- color: var(--lumo-secondary-text-color);
22
- font-size: var(--lumo-font-size-xs);
25
+ color: var(--vaadin-input-field-helper-color, var(--lumo-secondary-text-color));
26
+ font-size: var(--vaadin-input-field-helper-font-size, var(--lumo-font-size-xs));
23
27
  line-height: var(--lumo-line-height-xs);
28
+ font-weight: var(--vaadin-input-field-helper-font-weight, 400);
24
29
  margin-left: calc(var(--lumo-border-radius-m) / 4);
25
30
  transition: color 0.2s;
26
31
  }
@@ -41,12 +46,12 @@ export const helper = css`
41
46
  :host([has-helper][theme~='helper-above-field']) [part='helper-text']::after {
42
47
  content: '';
43
48
  display: block;
44
- height: 0.4em;
49
+ height: var(--_helper-spacing);
45
50
  }
46
51
 
47
52
  :host([has-helper][theme~='helper-above-field']) [part='label'] {
48
53
  order: 0;
49
- padding-bottom: 0.4em;
54
+ padding-bottom: var(--_helper-spacing);
50
55
  }
51
56
 
52
57
  :host([has-helper][theme~='helper-above-field']) [part='helper-text'] {
package/mixins/input-field-shared.js CHANGED
@@ -17,50 +17,42 @@ import { requiredField } from './required-field.js';
17
17
  const inputField = css`
18
18
  :host {
19
19
  --lumo-text-field-size: var(--lumo-size-m);
20
- color: var(--lumo-body-text-color);
21
- font-size: var(--lumo-font-size-m);
20
+ color: var(--vaadin-text-input-field-value-color, var(--lumo-body-text-color));
21
+ font-size: var(--vaadin-text-input-field-value-font-size, var(--lumo-font-size-m));
22
+ font-weight: var(--vaadin-text-input-field-value-font-weight, 400);
22
23
  font-family: var(--lumo-font-family);
23
24
  -webkit-font-smoothing: antialiased;
24
25
  -moz-osx-font-smoothing: grayscale;
25
26
  -webkit-tap-highlight-color: transparent;
26
27
  padding: var(--lumo-space-xs) 0;
28
+ --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
29
+ --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
30
+ --_input-height: var(--vaadin-text-input-field-height, var(--lumo-text-field-size));
27
31
  }
28
32
 
29
33
  :host::before {
30
- height: var(--lumo-text-field-size);
34
+ height: var(--_input-height);
31
35
  box-sizing: border-box;
32
36
  display: inline-flex;
33
37
  align-items: center;
34
38
  }
35
39
 
36
- :host([focused]:not([readonly])) [part='label'] {
37
- color: var(--lumo-primary-text-color);
38
- }
39
-
40
40
  :host([focused]) [part='input-field'] ::slotted(:is(input, textarea)) {
41
41
  -webkit-mask-image: none;
42
42
  mask-image: none;
43
43
  }
44
44
 
45
45
  ::slotted(:is(input, textarea):placeholder-shown) {
46
- color: var(--lumo-secondary-text-color);
46
+ color: var(--vaadin-text-input-field-placeholder-color, var(--lumo-secondary-text-color));
47
47
  }
48
48
 
49
49
  /* Hover */
50
- :host(:hover:not([readonly]):not([focused])) [part='label'] {
51
- color: var(--lumo-body-text-color);
52
- }
53
-
54
50
  :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
55
51
  opacity: 0.1;
56
52
  }
57
53
 
58
54
  /* Touch device adjustment */
59
55
  @media (pointer: coarse) {
60
- :host(:hover:not([readonly]):not([focused])) [part='label'] {
61
- color: var(--lumo-secondary-text-color);
62
- }
63
-
64
56
  :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
65
57
  opacity: 0;
66
58
  }
@@ -78,7 +70,7 @@ const inputField = css`
78
70
 
79
71
  /* Focus-ring */
80
72
  :host([focus-ring]) [part='input-field'] {
81
- box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
73
+ box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
82
74
  }
83
75
 
84
76
  /* Read-only and disabled */
package/mixins/required-field.js CHANGED
@@ -12,15 +12,15 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
12
12
  const requiredField = css`
13
13
  [part='label'] {
14
14
  align-self: flex-start;
15
- color: var(--lumo-secondary-text-color);
16
- font-weight: 500;
17
- font-size: var(--lumo-font-size-s);
15
+ color: var(--vaadin-input-field-label-color, var(--lumo-secondary-text-color));
16
+ font-weight: var(--vaadin-input-field-label-font-weight, 500);
17
+ font-size: var(--vaadin-input-field-label-font-size, var(--lumo-font-size-s));
18
18
  margin-left: calc(var(--lumo-border-radius-m) / 4);
19
19
  transition: color 0.2s;
20
20
  line-height: 1;
21
21
  padding-right: 1em;
22
22
  padding-bottom: 0.5em;
23
- /* As a workaround for diacritics being cut off, add a top padding and a
23
+ /* As a workaround for diacritics being cut off, add a top padding and a
24
24
  negative margin to compensate */
25
25
  padding-top: 0.25em;
26
26
  margin-top: -0.25em;
@@ -32,6 +32,21 @@ const requiredField = css`
32
32
  box-sizing: border-box;
33
33
  }
34
34
 
35
+ :host([focused]:not([readonly])) [part='label'] {
36
+ color: var(--vaadin-input-field-focused-label-color, var(--lumo-primary-text-color));
37
+ }
38
+
39
+ :host(:hover:not([readonly]):not([focused])) [part='label'] {
40
+ color: var(--vaadin-input-field-hovered-label-color, var(--lumo-body-text-color));
41
+ }
42
+
43
+ /* Touch device adjustment */
44
+ @media (pointer: coarse) {
45
+ :host(:hover:not([readonly]):not([focused])) [part='label'] {
46
+ color: var(--vaadin-input-field-label-color, var(--lumo-secondary-text-color));
47
+ }
48
+ }
49
+
35
50
  :host([has-label])::before {
36
51
  margin-top: calc(var(--lumo-font-size-s) * 1.5);
37
52
  }
@@ -64,9 +79,10 @@ const requiredField = css`
64
79
 
65
80
  [part='error-message'] {
66
81
  margin-left: calc(var(--lumo-border-radius-m) / 4);
67
- font-size: var(--lumo-font-size-xs);
82
+ font-size: var(--vaadin-input-field-error-font-size, var(--lumo-font-size-xs));
68
83
  line-height: var(--lumo-line-height-xs);
69
- color: var(--lumo-error-text-color);
84
+ font-weight: var(--vaadin-input-field-error-font-weight, 400);
85
+ color: var(--vaadin-input-field-error-color, var(--lumo-error-text-color));
70
86
  will-change: max-height;
71
87
  transition: 0.4s max-height;
72
88
  max-height: 5em;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/vaadin-lumo-styles",
3
- "version": "24.3.0-alpha5",
3
+ "version": "24.3.0-alpha6",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -41,9 +41,9 @@
41
41
  ],
42
42
  "dependencies": {
43
43
  "@polymer/polymer": "^3.0.0",
44
- "@vaadin/component-base": "24.3.0-alpha5",
45
- "@vaadin/icon": "24.3.0-alpha5",
46
- "@vaadin/vaadin-themable-mixin": "24.3.0-alpha5"
44
+ "@vaadin/component-base": "24.3.0-alpha6",
45
+ "@vaadin/icon": "24.3.0-alpha6",
46
+ "@vaadin/vaadin-themable-mixin": "24.3.0-alpha6"
47
47
  },
48
48
  "devDependencies": {
49
49
  "gulp": "^4.0.2",
@@ -52,5 +52,5 @@
52
52
  "gulp-sort": "^2.0.0",
53
53
  "gulp-svgmin": "^4.1.0"
54
54
  },
55
- "gitHead": "b1fb1be6cc5dc69a82952571fbbda4ffd8e7527c"
55
+ "gitHead": "2721ab38ba3bc7d38dc1241016915354617ff659"
56
56
  }
package/style.js CHANGED
@@ -31,9 +31,75 @@ const style = css`
31
31
  */
32
32
  const globals = css`
33
33
  html {
34
+ /* Button */
35
+ --vaadin-button-background: var(--lumo-contrast-5pct);
36
+ --vaadin-button-border: none;
37
+ --vaadin-button-border-radius: var(--lumo-border-radius-m);
38
+ --vaadin-button-font-size: var(--lumo-font-size-m);
39
+ --vaadin-button-font-weight: 500;
40
+ --vaadin-button-height: var(--lumo-size-m);
41
+ --vaadin-button-margin: var(--lumo-space-xs) 0;
42
+ --vaadin-button-min-width: calc(var(--vaadin-button-height) * 2);
43
+ --vaadin-button-padding-h: calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);
44
+ --vaadin-button-padding-v: 0;
45
+ --vaadin-button-text-color: var(--lumo-primary-text-color);
46
+ --vaadin-button-primary-background: var(--lumo-primary-color);
47
+ --vaadin-button-primary-border: none;
48
+ --vaadin-button-primary-font-weight: 600;
49
+ --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
50
+ --vaadin-button-tertiary-background: transparent !important;
51
+ --vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);
52
+ --vaadin-button-tertiary-font-weight: 500;
53
+ --vaadin-button-tertiary-padding: 0 calc(var(--vaadin-button-height) / 6);
54
+ /* Checkbox */
55
+ --vaadin-checkbox-background: var(--lumo-contrast-20pct);
56
+ --vaadin-checkbox-background-hover: var(--lumo-contrast-30pct);
57
+ --vaadin-checkbox-border-radius: var(--lumo-border-radius-s);
58
+ --vaadin-checkbox-checkmark-char: var(--lumo-icons-checkmark);
59
+ --vaadin-checkbox-checkmark-char-intermediate: '';
60
+ --vaadin-checkbox-checkmark-color: var(--lumo-primary-contrast-color);
61
+ --vaadin-checkbox-checkmark-size: calc(var(--vaadin-checkbox-size) + 2px);
62
+ --vaadin-checkbox-label-color: var(--lumo-body-text-color);
63
+ --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
64
+ --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
34
65
  --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
66
+ /* Radio button */
67
+ --vaadin-radio-button-background: var(--lumo-contrast-20pct);
68
+ --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
69
+ --vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color);
70
+ --vaadin-radio-button-dot-size: 3px;
71
+ --vaadin-radio-button-label-color: var(--lumo-body-text-color);
72
+ --vaadin-radio-button-label-font-size: var(--lumo-font-size-m);
73
+ --vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs)
74
+ var(--lumo-space-xs);
35
75
  --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
76
+ --vaadin-selection-color: var(--lumo-primary-color);
77
+ --vaadin-selection-color-text: var(--lumo-primary-text-color);
36
78
  --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
79
+ --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
80
+ --vaadin-focus-ring-width: 2px;
81
+ /* Label */
82
+ --vaadin-input-field-label-color: var(--lumo-secondary-text-color);
83
+ --vaadin-input-field-focused-label-color: var(--lumo-primary-text-color);
84
+ --vaadin-input-field-hovered-label-color: var(--lumo-body-text-color);
85
+ --vaadin-input-field-label-font-size: var(--lumo-font-size-s);
86
+ --vaadin-input-field-label-font-weight: 500;
87
+ /* Helper */
88
+ --vaadin-input-field-helper-color: var(--lumo-secondary-text-color);
89
+ --vaadin-input-field-helper-font-size: var(--lumo-font-size-xs);
90
+ --vaadin-input-field-helper-font-weight: 400;
91
+ --vaadin-input-field-helper-spacing: 0.4em;
92
+ /* Error message */
93
+ --vaadin-input-field-error-color: var(--lumo-error-text-color);
94
+ --vaadin-input-field-error-font-size: var(--lumo-font-size-xs);
95
+ --vaadin-input-field-error-font-weight: 400;
96
+ /* Text field */
97
+ --vaadin-text-input-field-height: var(--lumo-size-m);
98
+ --vaadin-text-input-field-placeholder-color: var(--lumo-secondary-text-color);
99
+ --vaadin-text-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);
100
+ --vaadin-text-input-field-value-color: var(--lumo-body-text-color);
101
+ --vaadin-text-input-field-value-font-size: var(--lumo-font-size-m);
102
+ --vaadin-text-input-field-value-font-weight: 400;
37
103
  }
38
104
  `;
39
105