Skip to content

refactor: aura badge colors inside containers with accent color #11282

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
web-padawan merged 1 commit into from
Mar 9, 2026
Merged

refactor: aura badge colors inside containers with accent color #11282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 26 additions & 6 deletions dev/aura/colors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
import '@vaadin/button';
import '@vaadin/checkbox';
import '@vaadin/checkbox-group';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/side-nav';
import '@vaadin/tabs';

Expand Down Expand Up @@ -67,9 +69,12 @@
accentColors.forEach((color, i) => {
section.querySelectorAll(`:scope > :nth-child(${i + 1}) vaadin-badge`).forEach((badge) => {
badge.classList.toggle('aura-accent-' + color.toLowerCase(), e.target.checked);
badge.textContent = e.target.checked ? color : 'Accent';
badge.lastChild.textContent = e.target.checked ? color : 'Accent';
});
});
section.querySelectorAll(`:scope > :nth-child(${accentColors.length + 1}) vaadin-badge`).forEach((badge) => {
badge.classList.toggle('aura-accent-color', e.target.checked);
});
});
});
</script>
Expand Down Expand Up @@ -246,19 +251,28 @@ <h3 class="heading">Accent Colors</h3>
<section class="section generate-variations">
<vaadin-button>
Button
<vaadin-badge class="aura-accent-color" slot="suffix">Accent</vaadin-badge>
<vaadin-badge slot="suffix">
<vaadin-icon icon="vaadin:check" slot="icon"></vaadin-icon>
Accent
</vaadin-badge>
</vaadin-button>
</section>

<section class="section generate-variations">
<vaadin-tabs>
<vaadin-tab>
Tab
<vaadin-badge class="aura-accent-color">Accent</vaadin-badge>
<vaadin-badge>
<vaadin-icon icon="vaadin:check" slot="icon"></vaadin-icon>
Accent
</vaadin-badge>
</vaadin-tab>
<vaadin-tab>
Tab
<vaadin-badge class="aura-accent-color">Accent</vaadin-badge>
<vaadin-badge>
<vaadin-icon icon="vaadin:check" slot="icon"></vaadin-icon>
Accent
</vaadin-badge>
</vaadin-tab>
</vaadin-tabs>
</section>
Expand All @@ -267,11 +281,17 @@ <h3 class="heading">Accent Colors</h3>
<vaadin-side-nav>
<vaadin-side-nav-item path="">
Nav Item
<vaadin-badge class="aura-accent-color" slot="suffix">Accent</vaadin-badge>
<vaadin-badge slot="suffix">
<vaadin-icon icon="vaadin:check" slot="icon"></vaadin-icon>
Accent
</vaadin-badge>
</vaadin-side-nav-item>
<vaadin-side-nav-item path="foo">
Nav Item
<vaadin-badge class="aura-accent-color" slot="suffix">Accent</vaadin-badge>
<vaadin-badge slot="suffix">
<vaadin-icon icon="vaadin:check" slot="icon"></vaadin-icon>
Accent
</vaadin-badge>
</vaadin-side-nav-item>
</vaadin-side-nav>
</section>
Expand Down
31 changes: 0 additions & 31 deletions packages/aura/src/color.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,34 +249,3 @@ vaadin-upload-file,
--aura-accent-color-dark: var(--aura-blue);
--aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

/* Restore accent color for child elements like badges */
:where(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle) > *,
:where(vaadin-tab) > *,
:where(vaadin-side-nav-item) > * {
--aura-accent-color-light: var(--aura-accent-color-light-initial);
--aura-accent-color-dark: var(--aura-accent-color-dark-initial);
--aura-accent-color: light-dark(var(--aura-accent-color-light-initial), var(--aura-accent-color-dark-initial));
}

/* Badges and other content that uses contrast color inside filled variants */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] > *,
vaadin-tabs[theme~='filled'] > vaadin-tab[selected] > :not([slot='tooltip']),
vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']),
:is(
vaadin-combo-box-item,
vaadin-context-menu-item,
vaadin-item,
vaadin-menu-bar-item,
vaadin-multi-select-combo-box-item,
vaadin-select-item[role]
)[theme~='filled']:not([disabled], [aria-disabled='true']):hover
> * {
--vaadin-icon-color: currentColor;
--vaadin-text-color: currentColor;
--vaadin-text-color-secondary: color-mix(in srgb, currentColor 70%, transparent);
--vaadin-text-color-disabled: color-mix(in srgb, currentColor 50%, transparent);
--aura-accent-text-color: currentColor;
--aura-accent-border-color: color-mix(in srgb, currentColor 30%, transparent);
--aura-accent-surface: color-mix(in srgb, currentColor 10%, transparent);
}
57 changes: 36 additions & 21 deletions packages/aura/src/components/badge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,33 +11,48 @@ vaadin-badge:is([theme~='filled'], [theme~='dot']) {
color: var(--aura-accent-contrast-color);
}

/* Special case for filled badges within filled variants */
/* TODO is there a way to solve this without explicitly listing the special cases? */
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'],
vaadin-tabs[theme~='filled'] > vaadin-tab[selected],
vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current],
/* Inside filled component variants, increase the opacity of default badge variants so that they retain their color */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] > *,
vaadin-tabs[theme~='filled'] > vaadin-tab[selected] > :not([slot='tooltip']),
vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']),
:is(
vaadin-combo-box-item,
vaadin-context-menu-item,
vaadin-item,
vaadin-menu-bar-item,
vaadin-multi-select-combo-box-item,
vaadin-select-item[role]
)[theme~='filled']:not([disabled], [aria-disabled='true']):hover {
> vaadin-badge[theme~='filled']:not(
.aura-accent-red,
.aura-accent-orange,
.aura-accent-yellow,
.aura-accent-green,
.aura-accent-blue,
.aura-accent-purple,
[theme~='info'],
[theme~='success'],
[theme~='warning'],
[theme~='error']
) {
border-color: transparent;
background: var(--aura-accent-contrast-color);
color: var(--aura-accent-color);
)[theme~='filled']:not([disabled], [aria-disabled='true']):hover
> vaadin-badge {
--vaadin-icon-color: currentColor;
--aura-surface-opacity: 1;
--aura-surface-level: 3;

/* Badges that are not explicitly colored (i.e. default/inherited accent color and neutral accent color) inherit their color from the parent container */
&:not(
.aura-accent-color,
.aura-accent-red,
.aura-accent-orange,
.aura-accent-yellow,
.aura-accent-green,
.aura-accent-blue,
.aura-accent-purple,
[theme~='info'],
[theme~='success'],
[theme~='warning'],
[theme~='error']
) {
--aura-surface-opacity: 0.5;
--aura-surface-level: 1;
--aura-accent-text-color: currentColor;
--aura-accent-border-color: color-mix(in srgb, currentColor 30%, transparent);
--aura-accent-surface: color-mix(in srgb, currentColor 10%, transparent);

/* Invert the colors of filled, non-explicitly colored badges */
&[theme~='filled'] {
background: var(--aura-accent-contrast-color);
color: var(--aura-accent-color);
border-color: transparent;
}
}
}
Loading