Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 13, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0356203
refactor: rename some component-specific text-related custom properties
jouni Oct 10, 2025
df38092
test: update map screenshots
jouni Oct 10, 2025
2bbf9cc
Merge branch 'main' into refactor/base-style-text-color-props
web-padawan Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/aura/src/components/checkbox-radio.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
Expand Down Expand Up @@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lumo has --vaadin-checkbox-checkmark-color and --vaadin-checkbox-checkmark-size. Radio button also has --vaadin props with a different naming convention. Just checking that we are aware of the inconsistency. I guess those will be deprecated / removed in favor of the new ones at some point?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, good point, thanks. I forgot to check that.

A bit unfortunate, as I’d like to add the "marker" to clarify the intent, but I don't like the breaking change. @rolfsmeds, shall we just keep the old name?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For reference, radio group has:

  • --vaadin-radio-button-dot-color
  • --vaadin-radio-button-marker-size

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, that one too. Maybe we should just revert those then, keep the old names.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There seem to be more inconsistencies. Lumo uses a --vaadin-checkbox-label-color, but there is no such thing in base styles or Aura.

Copy link
Member Author

@jouni jouni Oct 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is, it’s just abstracted together with radio-button as color: var(--vaadin-${unsafeCSS(propName)}-label-color, ...).

--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);
}

Expand Down
38 changes: 19 additions & 19 deletions packages/aura/src/components/side-nav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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);
}
38 changes: 19 additions & 19 deletions packages/aura/src/components/tabs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] {
Expand All @@ -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);
}
Expand All @@ -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);
}
2 changes: 1 addition & 1 deletion packages/avatar/src/styles/vaadin-avatar-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/checkbox/src/styles/vaadin-checkbox-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/field-base/src/input-control-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`,
];
Expand Down
2 changes: 1 addition & 1 deletion packages/field-base/src/styles/button-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions packages/field-base/src/styles/checkable-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 */
Expand Down
2 changes: 1 addition & 1 deletion packages/grid/src/styles/vaadin-grid-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'] {
Expand Down
6 changes: 3 additions & 3 deletions packages/map/src/styles/vaadin-map-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
Binary file modified ...ages/map/test/visual/base/screenshots/map/baseline/accessibility-focus-ring.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/map/test/visual/base/screenshots/map/baseline/controls-all-controls.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/map/test/visual/base/screenshots/map/baseline/theme-no-border.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/message-list/src/styles/vaadin-message-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']) {
Expand Down
6 changes: 3 additions & 3 deletions packages/multi-select-combo-box/src/styles/vaadin-multi-select-combo-box-chip-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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%;
}
Expand All @@ -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]),
Expand Down
2 changes: 1 addition & 1 deletion packages/password-field/src/styles/vaadin-password-field-button-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions packages/radio-group/src/styles/vaadin-radio-button-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
`;
Expand Down
2 changes: 1 addition & 1 deletion packages/radio-group/src/styles/vaadin-radio-group-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`,
Expand Down
8 changes: 4 additions & 4 deletions packages/side-nav/src/styles/vaadin-side-nav-item-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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'] {
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions packages/tabs/src/styles/vaadin-tab-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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]) {
Expand Down
2 changes: 1 addition & 1 deletion packages/tooltip/src/styles/vaadin-tooltip-overlay-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/vaadin-lumo-styles/src/components/radio-button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down