@vaadin/vaadin-lumo-styles 24.5.0-alpha5 → 24.5.0-alpha7

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 (7) hide show
  1. package/auto-complete.css +20 -3
  2. package/mixins/input-field-shared.js +7 -2
  3. package/mixins/loader.js +3 -1
  4. package/mixins/overlay.js +3 -1
  5. package/package.json +5 -5
  6. package/style.js +2 -0
  7. package/utilities/transition.js +18 -3
package/auto-complete.css CHANGED
@@ -157,6 +157,8 @@
157
157
  --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
158
158
  --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
159
159
  --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
160
+ --vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
161
+ --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
160
162
  --vaadin-input-field-height: var(--lumo-size-m);
161
163
  --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
162
164
  --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
@@ -2222,11 +2224,26 @@
2222
2224
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
2223
2225
  }
2224
2226
  .transition {
2225
- transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
2226
- transform, filter, backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
2227
+ transition:
2228
+ color,
2229
+ background-color,
2230
+ border-color,
2231
+ text-decoration-color,
2232
+ fill,
2233
+ stroke,
2234
+ opacity,
2235
+ box-shadow,
2236
+ transform,
2237
+ filter,
2238
+ backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
2227
2239
  }
2228
2240
  .transition-colors {
2229
- transition: color, background-color, border-color, text-decoration-color, fill,
2241
+ transition:
2242
+ color,
2243
+ background-color,
2244
+ border-color,
2245
+ text-decoration-color,
2246
+ fill,
2230
2247
  stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
2231
2248
  }
2232
2249
  .transition-opacity {
package/mixins/input-field-shared.js CHANGED
@@ -28,6 +28,7 @@ const inputField = css`
28
28
  --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
29
29
  --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
30
30
  --_input-height: var(--vaadin-input-field-height, var(--lumo-text-field-size));
31
+ --_disabled-value-color: var(--vaadin-input-field-disabled-value-color, var(--lumo-disabled-text-color));
31
32
  }
32
33
 
33
34
  :host::before {
@@ -89,12 +90,16 @@ const inputField = css`
89
90
  --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
90
91
  }
91
92
 
92
- :host([disabled]) [part='label'],
93
- :host([disabled]) [part='input-field'] ::slotted(*) {
93
+ :host([disabled]) [part='label'] {
94
94
  color: var(--lumo-disabled-text-color);
95
95
  -webkit-text-fill-color: var(--lumo-disabled-text-color);
96
96
  }
97
97
 
98
+ :host([disabled]) [part='input-field'] ::slotted(*) {
99
+ color: var(--_disabled-value-color);
100
+ -webkit-text-fill-color: var(--_disabled-value-color);
101
+ }
102
+
98
103
  /* Invalid style */
99
104
  :host([invalid]) {
100
105
  --vaadin-input-field-border-color: var(--lumo-error-color);
package/mixins/loader.js CHANGED
@@ -25,7 +25,9 @@ const loader = css`
25
25
  }
26
26
 
27
27
  :host([loading]) [part~='loader'] {
28
- animation: 1s linear infinite lumo-loader-rotate, 0.3s 0.1s lumo-loader-fade-in both;
28
+ animation:
29
+ 1s linear infinite lumo-loader-rotate,
30
+ 0.3s 0.1s lumo-loader-fade-in both;
29
31
  }
30
32
 
31
33
  @keyframes lumo-loader-fade-in {
package/mixins/overlay.js CHANGED
@@ -24,7 +24,9 @@ const overlay = css`
24
24
  background-color: var(--lumo-base-color);
25
25
  background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
26
26
  border-radius: var(--lumo-border-radius-m);
27
- box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
27
+ box-shadow:
28
+ 0 0 0 1px var(--lumo-shade-5pct),
29
+ var(--lumo-box-shadow-m);
28
30
  color: var(--lumo-body-text-color);
29
31
  font-family: var(--lumo-font-family);
30
32
  font-size: var(--lumo-font-size-m);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/vaadin-lumo-styles",
3
- "version": "24.5.0-alpha5",
3
+ "version": "24.5.0-alpha7",
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.5.0-alpha5",
45
- "@vaadin/icon": "24.5.0-alpha5",
46
- "@vaadin/vaadin-themable-mixin": "24.5.0-alpha5"
44
+ "@vaadin/component-base": "24.5.0-alpha7",
45
+ "@vaadin/icon": "24.5.0-alpha7",
46
+ "@vaadin/vaadin-themable-mixin": "24.5.0-alpha7"
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": "4e57d240ababf0c2db9d674891b90bdf3812e6ae"
55
+ "gitHead": "89f77a69ae0eba6247f2b3084941f9395d7134e1"
56
56
  }
package/style.js CHANGED
@@ -98,6 +98,8 @@ const globals = css`
98
98
  --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
99
99
  --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
100
100
  --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
101
+ --vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
102
+ --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
101
103
  --vaadin-input-field-height: var(--lumo-size-m);
102
104
  --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
103
105
  --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
package/utilities/transition.js CHANGED
@@ -13,11 +13,26 @@ export const transition = css`
13
13
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
14
14
  }
15
15
  .transition {
16
- transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
17
- transform, filter, backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
16
+ transition:
17
+ color,
18
+ background-color,
19
+ border-color,
20
+ text-decoration-color,
21
+ fill,
22
+ stroke,
23
+ opacity,
24
+ box-shadow,
25
+ transform,
26
+ filter,
27
+ backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
18
28
  }
19
29
  .transition-colors {
20
- transition: color, background-color, border-color, text-decoration-color, fill,
30
+ transition:
31
+ color,
32
+ background-color,
33
+ border-color,
34
+ text-decoration-color,
35
+ fill,
21
36
  stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
22
37
  }
23
38
  .transition-opacity {