@vaadin/vaadin-lumo-styles 24.5.0-alpha6 → 24.5.0-alpha8

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 (4) hide show
  1. package/auto-complete.css +6 -0
  2. package/mixins/input-field-shared.js +7 -2
  3. package/package.json +5 -5
  4. package/style.js +6 -0
package/auto-complete.css CHANGED
@@ -128,6 +128,8 @@
128
128
  --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
129
129
  --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
130
130
  --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
131
+ --vaadin-checkbox-disabled-checkmark-color: var(--lumo-contrast-30pct);
132
+ --vaadin-checkbox-disabled-background: var(--lumo-contrast-10pct);
131
133
  --vaadin-radio-button-background: var(--lumo-contrast-20pct);
132
134
  --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
133
135
  --vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color);
@@ -135,6 +137,8 @@
135
137
  --vaadin-radio-button-label-color: var(--lumo-body-text-color);
136
138
  --vaadin-radio-button-label-font-size: var(--lumo-font-size-m);
137
139
  --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
140
+ --vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct);
141
+ --vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct);
138
142
  --vaadin-selection-color: var(--lumo-primary-color);
139
143
  --vaadin-selection-color-text: var(--lumo-primary-text-color);
140
144
  --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
@@ -157,6 +161,8 @@
157
161
  --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
158
162
  --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
159
163
  --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
164
+ --vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
165
+ --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
160
166
  --vaadin-input-field-height: var(--lumo-size-m);
161
167
  --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
162
168
  --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/vaadin-lumo-styles",
3
- "version": "24.5.0-alpha6",
3
+ "version": "24.5.0-alpha8",
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-alpha6",
45
- "@vaadin/icon": "24.5.0-alpha6",
46
- "@vaadin/vaadin-themable-mixin": "24.5.0-alpha6"
44
+ "@vaadin/component-base": "24.5.0-alpha8",
45
+ "@vaadin/icon": "24.5.0-alpha8",
46
+ "@vaadin/vaadin-themable-mixin": "24.5.0-alpha8"
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": "c5f541dbe961a994730d4c60472ae957bf6b4c12"
55
+ "gitHead": "1e227aaa55df3f5dae3d477b9afb5fce4f5ece33"
56
56
  }
package/style.js CHANGED
@@ -62,6 +62,8 @@ const globals = css`
62
62
  --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
63
63
  --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
64
64
  --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
65
+ --vaadin-checkbox-disabled-checkmark-color: var(--lumo-contrast-30pct);
66
+ --vaadin-checkbox-disabled-background: var(--lumo-contrast-10pct);
65
67
  /* Radio button */
66
68
  --vaadin-radio-button-background: var(--lumo-contrast-20pct);
67
69
  --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
@@ -72,6 +74,8 @@ const globals = css`
72
74
  --vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs)
73
75
  var(--lumo-space-xs);
74
76
  --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
77
+ --vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct);
78
+ --vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct);
75
79
  --vaadin-selection-color: var(--lumo-primary-color);
76
80
  --vaadin-selection-color-text: var(--lumo-primary-text-color);
77
81
  --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
@@ -98,6 +102,8 @@ const globals = css`
98
102
  --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
99
103
  --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
100
104
  --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
105
+ --vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
106
+ --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
101
107
  --vaadin-input-field-height: var(--lumo-size-m);
102
108
  --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
103
109
  --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);