refactor: accent color variants #10532
Conversation
There was a problem hiding this comment.
Pull request overview
This PR refactors the Aura theme's accent color system by migrating from theme attribute-based modifiers ([theme~="red"]) to CSS class-based modifiers (.aura-accent-red). The refactoring consolidates duplicated color override CSS rules from component-specific stylesheets into a centralized color.css file, improving maintainability. A new neutral accent color modifier is introduced, and badge styling is migrated from [theme~="badge"] to .aura-badge classes. Additionally, a comprehensive color testing page is added to facilitate development and testing.
Key changes:
- Introduced CSS classes for accent color modifiers (
.aura-accent-[color]) replacing theme attributes - Consolidated color overrides from button.css, tabs.css, and side-nav.css into color.css
- Refactored badge styling to use CSS classes (
.aura-badge,.aura-badge-filled,.aura-badge-point)
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/aura/src/color.css | Added accent color CSS class selectors, refactored accent surface calculation algorithm, consolidated "restore accent color" and "contrast color" rules from component stylesheets |
| packages/aura/src/components/button.css | Removed duplicated color override rules and "restore accent color" selector (consolidated into color.css) |
| packages/aura/src/components/tabs.css | Removed duplicated color override rules, updated filled variant selector to use child combinator |
| packages/aura/src/components/side-nav.css | Removed duplicated color override rules, updated filled variant selector to use child combinator |
| dev/aura/badge.css | Migrated from theme attributes to CSS classes, added special handling for filled badges within filled variants |
| dev/aura/colors.html | New test/dev page for testing Aura color combinations with interactive controls |
| dev/aura.html | Updated all badge instances from theme attributes to CSS classes throughout the demo page |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const grid = view.querySelector('vaadin-grid'); | ||
| grid.items = generateItems(20); | ||
| grid.selectedItems = [grid.items[0]]; | ||
| const badgeColors = ['accent', 'green', 'yellow', 'purple', 'orange', 'blue', 'red']; |
There was a problem hiding this comment.
The badgeColors array uses 'accent' which will generate the invalid class aura-accent-accent. It should be 'color' to generate the correct class aura-accent-color:
const badgeColors = ['color', 'green', 'yellow', 'purple', 'orange', 'blue', 'red'];| const badgeColors = ['accent', 'green', 'yellow', 'purple', 'orange', 'blue', 'red']; | |
| const badgeColors = ['color', 'green', 'yellow', 'purple', 'orange', 'blue', 'red']; |
| :is(#id, .aura-accent-green) { | ||
| --aura-accent-color-light: var(--aura-green); | ||
| --aura-accent-color-dark: var(--aura-green); | ||
| --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark)); | ||
| } | ||
|
|
||
| :is(#id, [theme~='yellow'], [theme~='warning']) { | ||
| :is(#id, .aura-accent-yellow) { | ||
| --aura-accent-color-light: var(--aura-yellow); | ||
| --aura-accent-color-dark: var(--aura-yellow); | ||
| --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark)); | ||
| } | ||
|
|
||
| :is(#id, [theme~='orange']) { | ||
| :is(#id, .aura-accent-orange) { | ||
| --aura-accent-color-light: var(--aura-orange); | ||
| --aura-accent-color-dark: var(--aura-orange); | ||
| --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark)); | ||
| } | ||
|
|
||
| :is(#id, [theme~='purple']) { | ||
| :is(#id, .aura-accent-purple) { | ||
| --aura-accent-color-light: var(--aura-purple); | ||
| --aura-accent-color-dark: var(--aura-purple); | ||
| --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark)); | ||
| } | ||
|
|
||
| :is(#id, [theme~='blue'], [theme~='info']) { | ||
| :is(#id, .aura-accent-blue) { | ||
| --aura-accent-color-light: var(--aura-blue); | ||
| --aura-accent-color-dark: var(--aura-blue); | ||
| --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark)); | ||
| } |
There was a problem hiding this comment.
The theme attribute selectors [theme~='success'], [theme~='warning'], and [theme~='info'] were removed during this refactor, while [theme~='danger'] and [theme~='error'] were preserved for red. This creates an inconsistency in backwards compatibility. Consider adding them back for consistency:
:is(#id, [theme~='success'], .aura-accent-green) {
--aura-accent-color-light: var(--aura-green);
--aura-accent-color-dark: var(--aura-green);
--aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}
:is(#id, [theme~='warning'], .aura-accent-yellow) {
--aura-accent-color-light: var(--aura-yellow);
--aura-accent-color-dark: var(--aura-yellow);
--aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}
:is(#id, [theme~='info'], .aura-accent-blue) {
--aura-accent-color-light: var(--aura-blue);
--aura-accent-color-dark: var(--aura-blue);
--aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}| > .aura-badge-filled:not( | ||
| .aura-accent-red, | ||
| .aura-accent-orange, | ||
| .aura-accent-yellow, | ||
| .aura-accent-green, | ||
| .aura-accent-blue, | ||
| .aura-accent-purple | ||
| ) { |
There was a problem hiding this comment.
The .aura-accent-neutral class is missing from the :not() selector. When a neutral-colored filled badge is placed within a filled variant (like a primary button), it should maintain its explicit color like the other color variants do. Consider adding .aura-accent-neutral to the exclusion list:
> .aura-badge-filled:not(
.aura-accent-neutral,
.aura-accent-red,
.aura-accent-orange,
.aura-accent-yellow,
.aura-accent-green,
.aura-accent-blue,
.aura-accent-purple
)
dev/aura/colors.html
Outdated
| .level--1 { | ||
| --aura-surface-level: -1; | ||
| } | ||
|
|
||
| .level-0 { | ||
| --aura-surface-level: 0; | ||
| } | ||
|
|
||
| .level-2 { | ||
| --aura-surface-level: 2; | ||
| } | ||
|
|
||
| .level-3 { | ||
| --aura-surface-level: 3; | ||
| } | ||
|
|
||
| .level-4 { | ||
| --aura-surface-level: 4; | ||
| } |
There was a problem hiding this comment.
Missing CSS class definition for .level-1. The class is used in the HTML at lines 142 and 150, but there's no corresponding CSS rule to set --aura-surface-level: 1. Add:
.level-1 {
--aura-surface-level: 1;
}
There was a problem hiding this comment.
This doesn't seem to be needed as --aura-surface-level: 1 is the default one.
| } | ||
|
|
||
| /* Restore accent color for child elements like badges */ | ||
| :where(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle) > *, |
There was a problem hiding this comment.
vaadin-crud-edit is missing from this selector. It was included in the original rule in button.css (:where(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) > *) and should be consolidated here as well. Add it to maintain consistency:
:where(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) > *,| :where(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle) > *, | |
| :where(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) > *, |
| } | ||
|
|
||
| /* Badges and other content that uses contrast color inside filled variants */ | ||
| :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] > *, |
There was a problem hiding this comment.
vaadin-crud-edit is missing from this selector. It should be included alongside the other button components since it can have the theme~='primary' attribute (as seen in button.css line 52). Update to:
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary'] > *,| :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] > *, | |
| :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary'] > *, |
|
[theme~=red|orange|yellow|green|blue|purple]accent-color modifiers to.aura-accent-red|orange|yellow|green|blue|purple.neutralaccent color modifier (move it from aura-badge).[theme=badge]to.aura-badge, including.aura-badge-filledand.aura-badge-point.