refactor: rename component-specific text-related custom properties (#10307)

jouni · web-flow · commit 37eab9793124 · 2025-10-13T14:45:06.000+03:00
diff --git a/packages/aura/src/components/checkbox-radio.css b/packages/aura/src/components/checkbox-radio.css
@@ -1,6 +1,6 @@
 :where(:root),
 :where(:host) {
-  --vaadin-radio-button-dot-size: 6px;
+  --vaadin-radio-button-marker-size: 6px;
   --vaadin-checkbox-size: round(1lh - 2px, 2px);
   --vaadin-radio-button-size: round(1lh - 2px, 2px);
 }
@@ -32,13 +32,13 @@ vaadin-radio-button:not([checked])::part(radio) {
 
 vaadin-checkbox:is([checked], [indeterminate]):not([readonly], [disabled])::part(checkbox) {
   --vaadin-checkbox-background: var(--aura-accent-color);
-  --vaadin-checkbox-color: var(--aura-accent-contrast);
+  --vaadin-checkbox-marker-color: var(--aura-accent-contrast);
   --vaadin-checkbox-border-color: var(--vaadin-border-color-secondary);
 }
 
 vaadin-radio-button[checked]:not([readonly], [disabled])::part(radio) {
   --vaadin-radio-button-background: var(--aura-accent-color);
-  --vaadin-radio-button-color: var(--aura-accent-contrast);
+  --vaadin-radio-button-marker-color: var(--aura-accent-contrast);
   --vaadin-radio-button-border-color: var(--vaadin-border-color-secondary);
 }
 
diff --git a/packages/aura/src/components/side-nav.css b/packages/aura/src/components/side-nav.css
@@ -20,7 +20,7 @@ vaadin-side-nav-item::part(content) {
 }
 
 vaadin-side-nav-item:not([disabled])::part(content):hover {
-  --vaadin-side-nav-item-color: var(--vaadin-text-color);
+  --vaadin-side-nav-item-text-color: var(--vaadin-text-color);
 }
 
 vaadin-side-nav-item[current]::part(content) {
@@ -33,34 +33,34 @@ vaadin-side-nav-item[current]::part(content) {
     oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
   );
   --vaadin-side-nav-item-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
-  --vaadin-side-nav-item-color: var(--aura-accent-text);
+  --vaadin-side-nav-item-text-color: var(--aura-accent-text);
   --vaadin-side-nav-item-border-color: var(--_accent-border);
 }
 
 /* Filled variant */
 
 vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current]::part(content) {
   --vaadin-side-nav-item-background: var(--aura-accent-color) border-box;
-  --vaadin-side-nav-item-color: var(--aura-accent-contrast);
+  --vaadin-side-nav-item-text-color: var(--aura-accent-contrast);
   outline-offset: 2px;
 }
 
 /* Badges and other content that uses the palette inside a filled nav item */
 vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']) {
-  --vaadin-text-color: var(--vaadin-side-nav-item-color);
-  --vaadin-text-color-secondary: var(--vaadin-side-nav-item-color);
-  --aura-accent-color: var(--vaadin-side-nav-item-color);
-  --aura-accent-text: var(--vaadin-side-nav-item-color);
-  --aura-red: var(--vaadin-side-nav-item-color);
-  --aura-red-text: var(--vaadin-side-nav-item-color);
-  --aura-orange: var(--vaadin-side-nav-item-color);
-  --aura-orange-text: var(--vaadin-side-nav-item-color);
-  --aura-yellow: var(--vaadin-side-nav-item-color);
-  --aura-yellow-text: var(--vaadin-side-nav-item-color);
-  --aura-green: var(--vaadin-side-nav-item-color);
-  --aura-green-text: var(--vaadin-side-nav-item-color);
-  --aura-blue: var(--vaadin-side-nav-item-color);
-  --aura-blue-text: var(--vaadin-side-nav-item-color);
-  --aura-purple: var(--vaadin-side-nav-item-color);
-  --aura-purple-text: var(--vaadin-side-nav-item-color);
+  --vaadin-text-color: var(--vaadin-side-nav-item-text-color);
+  --vaadin-text-color-secondary: var(--vaadin-side-nav-item-text-color);
+  --aura-accent-color: var(--vaadin-side-nav-item-text-color);
+  --aura-accent-text: var(--vaadin-side-nav-item-text-color);
+  --aura-red: var(--vaadin-side-nav-item-text-color);
+  --aura-red-text: var(--vaadin-side-nav-item-text-color);
+  --aura-orange: var(--vaadin-side-nav-item-text-color);
+  --aura-orange-text: var(--vaadin-side-nav-item-text-color);
+  --aura-yellow: var(--vaadin-side-nav-item-text-color);
+  --aura-yellow-text: var(--vaadin-side-nav-item-text-color);
+  --aura-green: var(--vaadin-side-nav-item-text-color);
+  --aura-green-text: var(--vaadin-side-nav-item-text-color);
+  --aura-blue: var(--vaadin-side-nav-item-text-color);
+  --aura-blue-text: var(--vaadin-side-nav-item-text-color);
+  --aura-purple: var(--vaadin-side-nav-item-text-color);
+  --aura-purple-text: var(--vaadin-side-nav-item-text-color);
 }
diff --git a/packages/aura/src/components/tabs.css b/packages/aura/src/components/tabs.css
@@ -79,7 +79,7 @@ vaadin-tab {
 }
 
 vaadin-tab:not([disabled], [selected]):hover {
-  --vaadin-tab-color: var(--vaadin-text-color);
+  --vaadin-tab-text-color: var(--vaadin-text-color);
 }
 
 vaadin-tab[selected] {
@@ -92,7 +92,7 @@ vaadin-tab[selected] {
     oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
   );
   --vaadin-tab-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
-  --vaadin-tab-color: var(--aura-accent-text);
+  --vaadin-tab-text-color: var(--aura-accent-text);
   border-color: var(--_accent-border);
   box-shadow: 0 1px 4px -1px var(--aura-shadow-color);
 }
@@ -101,26 +101,26 @@ vaadin-tab[selected] {
 
 vaadin-tabs[theme~='filled'] vaadin-tab[selected] {
   --vaadin-tab-background: var(--aura-accent-color) border-box;
-  --vaadin-tab-color: var(--aura-accent-contrast);
+  --vaadin-tab-text-color: var(--aura-accent-contrast);
   outline-offset: 1px;
 }
 
 /* Badges and other content that uses the palette inside a filled nav item */
 vaadin-tabs[theme~='filled'] vaadin-tab[selected] > :not([slot='tooltip']) {
-  --vaadin-text-color: var(--vaadin-tab-color);
-  --vaadin-text-color-secondary: var(--vaadin-tab-color);
-  --aura-accent-color: var(--vaadin-tab-color);
-  --aura-accent-text: var(--vaadin-tab-color);
-  --aura-red: var(--vaadin-tab-color);
-  --aura-red-text: var(--vaadin-tab-color);
-  --aura-orange: var(--vaadin-tab-color);
-  --aura-orange-text: var(--vaadin-tab-color);
-  --aura-yellow: var(--vaadin-tab-color);
-  --aura-yellow-text: var(--vaadin-tab-color);
-  --aura-green: var(--vaadin-tab-color);
-  --aura-green-text: var(--vaadin-tab-color);
-  --aura-blue: var(--vaadin-tab-color);
-  --aura-blue-text: var(--vaadin-tab-color);
-  --aura-purple: var(--vaadin-tab-color);
-  --aura-purple-text: var(--vaadin-tab-color);
+  --vaadin-text-color: var(--vaadin-tab-text-color);
+  --vaadin-text-color-secondary: var(--vaadin-tab-text-color);
+  --aura-accent-color: var(--vaadin-tab-text-color);
+  --aura-accent-text: var(--vaadin-tab-text-color);
+  --aura-red: var(--vaadin-tab-text-color);
+  --aura-red-text: var(--vaadin-tab-text-color);
+  --aura-orange: var(--vaadin-tab-text-color);
+  --aura-orange-text: var(--vaadin-tab-text-color);
+  --aura-yellow: var(--vaadin-tab-text-color);
+  --aura-yellow-text: var(--vaadin-tab-text-color);
+  --aura-green: var(--vaadin-tab-text-color);
+  --aura-green-text: var(--vaadin-tab-text-color);
+  --aura-blue: var(--vaadin-tab-text-color);
+  --aura-blue-text: var(--vaadin-tab-text-color);
+  --aura-purple: var(--vaadin-tab-text-color);
+  --aura-purple-text: var(--vaadin-tab-text-color);
 }
diff --git a/packages/avatar/src/styles/vaadin-avatar-base-styles.js b/packages/avatar/src/styles/vaadin-avatar-base-styles.js
@@ -13,7 +13,7 @@ export const avatarStyles = css`
     flex: none;
     border-radius: 50%;
     cursor: default;
-    color: var(--vaadin-avatar-color, var(--vaadin-text-color-secondary));
+    color: var(--vaadin-avatar-text-color, var(--vaadin-text-color-secondary));
     overflow: hidden;
     --_size: var(--vaadin-avatar-size, calc(1lh + var(--vaadin-padding-xs) * 2));
     height: var(--_size);
diff --git a/packages/checkbox/src/styles/vaadin-checkbox-base-styles.js b/packages/checkbox/src/styles/vaadin-checkbox-base-styles.js
@@ -17,7 +17,7 @@ const checkbox = css`
   :host([readonly]) {
     --vaadin-checkbox-background: transparent;
     --vaadin-checkbox-border-color: var(--vaadin-border-color);
-    --vaadin-checkbox-color: var(--vaadin-text-color);
+    --vaadin-checkbox-marker-color: var(--vaadin-text-color);
     --_border-style: dashed;
   }
 
diff --git a/packages/field-base/src/input-control-mixin.js b/packages/field-base/src/input-control-mixin.js
@@ -122,7 +122,7 @@ export const InputControlMixin = (superclass) =>
           ${tag}:has(> input[slot='input']:autofill)::part(input-field) {
             --vaadin-input-field-background: var(--vaadin-input-field-autofill-background, lightyellow) !important;
             --vaadin-input-field-value-color: var(--vaadin-input-field-autofill-color, black) !important;
-            --vaadin-input-field-button-color: var(--vaadin-input-field-autofill-color, black) !important;
+            --vaadin-input-field-button-text-color: var(--vaadin-input-field-autofill-color, black) !important;
           }
         `,
       ];
diff --git a/packages/field-base/src/styles/button-base-styles.js b/packages/field-base/src/styles/button-base-styles.js
@@ -8,7 +8,7 @@ import { css } from 'lit';
 
 export const button = css`
   [part$='button'] {
-    color: var(--vaadin-input-field-button-color, var(--vaadin-text-color-secondary));
+    color: var(--vaadin-input-field-button-text-color, var(--vaadin-text-color-secondary));
     cursor: var(--vaadin-clickable-cursor);
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
diff --git a/packages/field-base/src/styles/checkable-base-styles.js b/packages/field-base/src/styles/checkable-base-styles.js
@@ -87,7 +87,7 @@ export const checkable = (part, propName = part) => css`
     --_border-width: var(--vaadin-${unsafeCSS(propName)}-border-width, var(--vaadin-input-field-border-width, 1px));
     border-width: var(--_border-width);
     box-sizing: border-box;
-    color: var(--vaadin-${unsafeCSS(propName)}-color, var(--vaadin-input-field-text-color, var(--vaadin-text-color)));
+    color: var(--vaadin-${unsafeCSS(propName)}-marker-color, var(--vaadin-input-field-text-color, var(--vaadin-text-color)));
     height: var(--vaadin-${unsafeCSS(propName)}-size, 1lh);
     width: var(--vaadin-${unsafeCSS(propName)}-size, 1lh);
     position: relative;
@@ -96,13 +96,13 @@ export const checkable = (part, propName = part) => css`
   :host(:is([checked], [indeterminate])) {
     --vaadin-${unsafeCSS(propName)}-background: var(--vaadin-text-color);
     --vaadin-${unsafeCSS(propName)}-border-color: transparent;
-    --vaadin-${unsafeCSS(propName)}-color: oklch(from var(--vaadin-${unsafeCSS(propName)}-background) clamp(0, (0.62 - l) * 1000, 1) 0 0);
+    --vaadin-${unsafeCSS(propName)}-marker-color: oklch(from var(--vaadin-${unsafeCSS(propName)}-background) clamp(0, (0.62 - l) * 1000, 1) 0 0);
   }
 
   :host([disabled]) {
     --vaadin-${unsafeCSS(propName)}-background: var(--vaadin-input-field-disabled-background, var(--vaadin-background-container-strong));
     --vaadin-${unsafeCSS(propName)}-border-color: transparent;
-    --vaadin-${unsafeCSS(propName)}-color: var(--vaadin-text-color-disabled);
+    --vaadin-${unsafeCSS(propName)}-marker-color: var(--vaadin-text-color-disabled);
   }
 
   /* Focus ring */
diff --git a/packages/grid/src/styles/vaadin-grid-base-styles.js b/packages/grid/src/styles/vaadin-grid-base-styles.js
@@ -127,7 +127,7 @@ export const gridStyles = css`
   [part~='reorder-ghost'] {
     font-size: var(--vaadin-grid-header-font-size, 1em);
     font-weight: var(--vaadin-grid-header-font-weight, 500);
-    color: var(--vaadin-grid-header-color, var(--vaadin-text-color));
+    color: var(--vaadin-grid-header-text-color, var(--vaadin-text-color));
   }
 
   [part~='row'] {
diff --git a/packages/map/src/styles/vaadin-map-base-styles.js b/packages/map/src/styles/vaadin-map-base-styles.js
@@ -247,7 +247,7 @@ export const mapStyles = css`
     gap: 1em;
     list-style: none;
     margin: 0;
-    color: var(--vaadin-map-attribution-color, var(--vaadin-text-color-secondary));
+    color: var(--vaadin-map-attribution-text-color, var(--vaadin-text-color-secondary));
     padding: var(--vaadin-padding-container);
     font-size: 0.8em;
   }
@@ -378,7 +378,7 @@ export const mapStyles = css`
   .ol-attribution:not(.ol-uncollapsible) ul {
     transition: 0.15s opacity;
     background: var(--vaadin-map-control-background, var(--vaadin-background-color));
-    color: var(--vaadin-map-control-color, var(--vaadin-subtle));
+    color: var(--vaadin-map-control-text-color, var(--vaadin-text-color-secondary));
     opacity: 0.65;
     display: flex;
     align-items: center;
@@ -401,7 +401,7 @@ export const mapStyles = css`
   }
 
   .ol-control button:hover {
-    color: var(--vaadin-map-control-color-hover, var(--vaadin-text-color));
+    color: var(--vaadin-map-control-text-color-hover, var(--vaadin-text-color));
   }
 
   .ol-control button:focus-visible {
diff --git a/packages/map/test/visual/base/screenshots/map/baseline/accessibility-focus-ring.png b/packages/map/test/visual/base/screenshots/map/baseline/accessibility-focus-ring.png
diff --git a/packages/map/test/visual/base/screenshots/map/baseline/controls-all-controls.png b/packages/map/test/visual/base/screenshots/map/baseline/controls-all-controls.png
diff --git a/packages/map/test/visual/base/screenshots/map/baseline/theme-no-border.png b/packages/map/test/visual/base/screenshots/map/baseline/theme-no-border.png
diff --git a/packages/message-list/src/styles/vaadin-message-base-styles.js b/packages/message-list/src/styles/vaadin-message-base-styles.js
@@ -56,7 +56,7 @@ export const messageStyles = css`
     font-size: var(--vaadin-message-font-size, inherit);
     font-weight: var(--vaadin-message-font-weight, inherit);
     line-height: var(--vaadin-message-line-height, inherit);
-    color: var(--vaadin-message-color, var(--vaadin-text-color));
+    color: var(--vaadin-message-text-color, var(--vaadin-text-color));
   }
 
   ::slotted([slot='avatar']) {
diff --git a/packages/multi-select-combo-box/src/styles/vaadin-multi-select-combo-box-chip-base-styles.js b/packages/multi-select-combo-box/src/styles/vaadin-multi-select-combo-box-chip-base-styles.js
@@ -15,7 +15,7 @@ export const multiSelectComboBoxChipStyles = css`
     box-sizing: border-box;
     gap: var(--vaadin-chip-gap, 0);
     background: var(--vaadin-chip-background, var(--vaadin-background-container));
-    color: var(--vaadin-chip-color, var(--vaadin-text-color));
+    color: var(--vaadin-chip-text-color, var(--vaadin-text-color));
     font-size: max(11px, var(--vaadin-chip-font-size, 0.875em));
     font-weight: var(--vaadin-chip-font-weight, 500);
     line-height: var(--vaadin-input-field-value-line-height, inherit);
@@ -50,7 +50,7 @@ export const multiSelectComboBoxChipStyles = css`
     display: block;
     margin-inline-start: auto;
     margin-block: calc(var(--vaadin-chip-border-width, 1px) * -1);
-    color: var(--vaadin-chip-remove-button-color, var(--vaadin-text-color-secondary));
+    color: var(--vaadin-chip-remove-button-text-color, var(--vaadin-text-color-secondary));
     cursor: var(--vaadin-clickable-cursor);
     translate: 25%;
   }
@@ -69,7 +69,7 @@ export const multiSelectComboBoxChipStyles = css`
   }
 
   :host([disabled]) [part='label'] {
-    --vaadin-chip-color: var(--vaadin-text-color-disabled);
+    --vaadin-chip-text-color: var(--vaadin-text-color-disabled);
   }
 
   :host([hidden]),
diff --git a/packages/password-field/src/styles/vaadin-password-field-button-base-styles.js b/packages/password-field/src/styles/vaadin-password-field-button-base-styles.js
@@ -11,7 +11,7 @@ const passwordFieldBase = css`
   :host {
     --vaadin-button-background: transparent;
     --vaadin-button-padding: 0;
-    color: var(--vaadin-input-field-button-color, inherit);
+    color: var(--vaadin-input-field-button-text-color, inherit);
     display: block;
     border: none;
     cursor: var(--vaadin-clickable-cursor);
diff --git a/packages/radio-group/src/styles/vaadin-radio-button-base-styles.js b/packages/radio-group/src/styles/vaadin-radio-button-base-styles.js
@@ -16,8 +16,8 @@ const radioButton = css`
     top: 50%;
     left: 50%;
     translate: -50% -50%;
-    width: var(--vaadin-radio-button-dot-size, 50%);
-    height: var(--vaadin-radio-button-dot-size, 50%);
+    width: var(--vaadin-radio-button-marker-size, 50%);
+    height: var(--vaadin-radio-button-marker-size, 50%);
     border-radius: 50%;
   }
 `;
diff --git a/packages/radio-group/src/styles/vaadin-radio-group-base-styles.js b/packages/radio-group/src/styles/vaadin-radio-group-base-styles.js
@@ -14,7 +14,7 @@ export const radioGroupStyles = [
     :host([readonly]) ::slotted(vaadin-radio-button) {
       --vaadin-radio-button-background: transparent;
       --vaadin-radio-button-border-color: var(--vaadin-border-color);
-      --vaadin-radio-button-color: var(--vaadin-text-color);
+      --vaadin-radio-button-marker-color: var(--vaadin-text-color);
       --_border-style: dashed;
     }
   `,
diff --git a/packages/side-nav/src/styles/vaadin-side-nav-item-base-styles.js b/packages/side-nav/src/styles/vaadin-side-nav-item-base-styles.js
@@ -20,7 +20,7 @@ const sideNavItem = css`
     font-size: var(--vaadin-side-nav-item-font-size, 1em);
     font-weight: var(--vaadin-side-nav-item-font-weight, 500);
     line-height: var(--vaadin-side-nav-item-line-height, inherit);
-    color: var(--vaadin-side-nav-item-color, var(--vaadin-text-color-secondary));
+    color: var(--vaadin-side-nav-item-text-color, var(--vaadin-text-color-secondary));
     background: var(--vaadin-side-nav-item-background, transparent);
     background-origin: border-box;
     border: var(--vaadin-side-nav-item-border-width, 0) solid var(--vaadin-side-nav-item-border-color, transparent);
@@ -31,15 +31,15 @@ const sideNavItem = css`
 
   :host([current]) [part='content'] {
     --vaadin-side-nav-item-background: var(--vaadin-background-container);
-    --vaadin-side-nav-item-color: var(--vaadin-text-color);
+    --vaadin-side-nav-item-text-color: var(--vaadin-text-color);
   }
 
   :host([disabled]) {
     --vaadin-clickable-cursor: var(--vaadin-disabled-cursor);
   }
 
   :host([disabled]) [part='content'] {
-    --vaadin-side-nav-item-color: var(--vaadin-text-color-disabled);
+    --vaadin-side-nav-item-text-color: var(--vaadin-text-color-disabled);
   }
 
   [part='link'] {
@@ -112,7 +112,7 @@ const sideNavItem = css`
     }
 
     :host([disabled]) [part='content'] {
-      --vaadin-side-nav-item-color: GrayText !important;
+      --vaadin-side-nav-item-text-color: GrayText !important;
     }
 
     :host([disabled]) [part='toggle-button']::before {
diff --git a/packages/tabs/src/styles/vaadin-tab-base-styles.js b/packages/tabs/src/styles/vaadin-tab-base-styles.js
@@ -18,7 +18,7 @@ export const tabStyles = css`
     font-size: var(--vaadin-tab-font-size, 1em);
     font-weight: var(--vaadin-tab-font-weight, 500);
     line-height: var(--vaadin-tab-line-height, inherit);
-    color: var(--vaadin-tab-color, var(--vaadin-text-color-secondary));
+    color: var(--vaadin-tab-text-color, var(--vaadin-text-color-secondary));
     background: var(--vaadin-tab-background, transparent);
     border-radius: var(--vaadin-tab-border-radius, var(--vaadin-radius-m));
     -webkit-tap-highlight-color: transparent;
@@ -38,7 +38,7 @@ export const tabStyles = css`
 
   :host([selected]) {
     --vaadin-tab-background: var(--vaadin-background-container);
-    --vaadin-tab-color: var(--vaadin-text-color);
+    --vaadin-tab-text-color: var(--vaadin-text-color);
   }
 
   :host([disabled]) {
diff --git a/packages/tooltip/src/styles/vaadin-tooltip-overlay-base-styles.js b/packages/tooltip/src/styles/vaadin-tooltip-overlay-base-styles.js
@@ -17,7 +17,7 @@ export const tooltipOverlayStyles = css`
     padding: var(--vaadin-tooltip-padding, var(--vaadin-padding-container));
     border-radius: var(--vaadin-tooltip-border-radius, var(--vaadin-radius-m));
     background: var(--vaadin-tooltip-background, var(--vaadin-background-color));
-    color: var(--vaadin-tooltip-color, inherit);
+    color: var(--vaadin-tooltip-text-color, inherit);
     font-size: var(--vaadin-tooltip-font-size, 0.9em);
     font-weight: var(--vaadin-tooltip-font-weight, inherit);
     line-height: var(--vaadin-tooltip-line-height, inherit);
diff --git a/packages/vaadin-lumo-styles/src/components/radio-button.css b/packages/vaadin-lumo-styles/src/components/radio-button.css
@@ -66,7 +66,7 @@
     pointer-events: none;
     width: 0;
     height: 0;
-    border: var(--vaadin-radio-button-dot-size, 3px) solid
+    border: var(--vaadin-radio-button-marker-size, 3px) solid
       var(--vaadin-radio-button-dot-color, var(--lumo-primary-contrast-color));
     border-radius: 50%;
     position: absolute;

Original file line number	Diff line number	Diff line change
@@ -17,7 +17,7 @@ const checkbox = css`
`17`	`17`	`:host([readonly]) {`
`18`	`18`	`--vaadin-checkbox-background: transparent;`
`19`	`19`	`--vaadin-checkbox-border-color: var(--vaadin-border-color);`
`20`		`- --vaadin-checkbox-color: var(--vaadin-text-color);`
	`20`	`+ --vaadin-checkbox-marker-color: var(--vaadin-text-color);`
`21`	`21`	`--_border-style: dashed;`
`22`	`22`	`}`
`23`	`23`
Original file line number	Diff line number	Diff line change
`@@ -122,7 +122,7 @@ export const InputControlMixin = (superclass) =>`
`122`	`122`	`${tag}:has(> input[slot='input']:autofill)::part(input-field) {`
`123`	`123`	`--vaadin-input-field-background: var(--vaadin-input-field-autofill-background, lightyellow) !important;`
`124`	`124`	`--vaadin-input-field-value-color: var(--vaadin-input-field-autofill-color, black) !important;`
`125`		`- --vaadin-input-field-button-color: var(--vaadin-input-field-autofill-color, black) !important;`
	`125`	`+ --vaadin-input-field-button-text-color: var(--vaadin-input-field-autofill-color, black) !important;`
`126`	`126`	`}`
`127`	`127`	`,
`128`	`128`	`];`
Original file line number	Diff line number	Diff line change
@@ -127,7 +127,7 @@ export const gridStyles = css`
`127`	`127`	`[part~='reorder-ghost'] {`
`128`	`128`	`font-size: var(--vaadin-grid-header-font-size, 1em);`
`129`	`129`	`font-weight: var(--vaadin-grid-header-font-weight, 500);`
`130`		`- color: var(--vaadin-grid-header-color, var(--vaadin-text-color));`
	`130`	`+ color: var(--vaadin-grid-header-text-color, var(--vaadin-text-color));`
`131`	`131`	`}`
`132`	`132`
`133`	`133`	`[part~='row'] {`