Skip to content

Commit 834b956

Browse files
jounijouni
authored
refactor: adjust aura accent color variants (#10532)
1 parent a5cf5a3 commit 834b956

File tree

7 files changed

+331
-140
lines changed

7 files changed

+331
-140
lines changed

‎dev/aura.html‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -230,9 +230,9 @@
230230
const grid = view.querySelector('vaadin-grid');
231231
grid.items = generateItems(20);
232232
grid.selectedItems = [grid.items[0]];
233-
const badgeColors = ['accent', 'green', 'yellow', 'purple', 'orange', 'blue', 'red'];
233+
const badgeColors = ['neutral', 'green', 'yellow', 'purple', 'orange', 'blue', 'red'];
234234
grid.querySelector('vaadin-grid-column[header="Status"]').renderer = (root, col, model) => {
235-
root.innerHTML = `<span theme="badge ${badgeColors[model.index % badgeColors.length]}">Status</span>`;
235+
root.innerHTML = `<span class="aura-badge aura-accent-${badgeColors[model.index % badgeColors.length]}">Status</span>`;
236236
};
237237
grid.querySelector('vaadin-grid-column.avatar').renderer = (root, col, model) => {
238238
root.innerHTML = `<vaadin-avatar name="${model.item.name}" color-index="${model.index % 9}"></vaadin-avatar>`;
@@ -370,7 +370,7 @@
370370
<vaadin-side-nav-item path="">
371371
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
372372
Dashboard
373-
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
373+
<span class="aura-badge aura-accent-color" slot="suffix" aria-label="(2 new items)">2</span>
374374
</vaadin-side-nav-item>
375375

376376
<vaadin-side-nav-item>
@@ -489,7 +489,7 @@ <h1>Dashboard</h1>
489489
<vaadin-side-nav-item path="#components">
490490
<vaadin-icon src="./assets/lucide-icons/home.svg" slot="prefix"></vaadin-icon>
491491
<span>Components</span>
492-
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
492+
<span class="aura-badge aura-accent-color" slot="suffix" aria-label="(2 new items)">2</span>
493493
</vaadin-side-nav-item>
494494
<vaadin-side-nav-item>
495495
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
@@ -514,7 +514,7 @@ <h1>Dashboard</h1>
514514
><vaadin-side-nav-item>
515515
<vaadin-icon src="./assets/lucide-icons/messages-square.svg" slot="prefix"></vaadin-icon>
516516
<span>Support</span>
517-
<span theme="badge green" slot="suffix">Online</span>
517+
<span class="aura-badge aura-accent-green" slot="suffix">Online</span>
518518
</vaadin-side-nav-item>
519519
</vaadin-side-nav>
520520
</vaadin-scroller>
@@ -625,77 +625,77 @@ <h1>Components</h1>
625625

626626
<div class="aura-surface component wide tall">
627627
<div class="badges">
628-
<span theme="badge neutral">Neutral</span>
629-
<span theme="badge">Accent</span>
630-
<span theme="badge green">Green</span>
631-
<span theme="badge blue">Blue</span>
632-
<span theme="badge purple">Purple</span>
633-
<span theme="badge red">Red</span>
634-
<span theme="badge orange">Orange</span>
635-
<span theme="badge yellow">Yellow</span>
628+
<span class="aura-badge aura-accent-neutral">Neutral</span>
629+
<span class="aura-badge aura-accent-color">Accent</span>
630+
<span class="aura-badge aura-accent-green">Green</span>
631+
<span class="aura-badge aura-accent-blue">Blue</span>
632+
<span class="aura-badge aura-accent-purple">Purple</span>
633+
<span class="aura-badge aura-accent-red">Red</span>
634+
<span class="aura-badge aura-accent-orange">Orange</span>
635+
<span class="aura-badge aura-accent-yellow">Yellow</span>
636636
</div>
637637

638638
<div class="badges">
639-
<span theme="filled badge neutral">Neutral</span>
640-
<span theme="filled badge">Accent</span>
641-
<span theme="filled badge green">Green</span>
642-
<span theme="filled badge blue">Blue</span>
643-
<span theme="filled badge purple">Purple</span>
644-
<span theme="filled badge red">Red</span>
645-
<span theme="filled badge orange">Orange</span>
646-
<span theme="filled badge yellow">Yellow</span>
639+
<span class="aura-badge aura-badge-filled aura-accent-neutral">Neutral</span>
640+
<span class="aura-badge aura-badge-filled">Accent</span>
641+
<span class="aura-badge aura-badge-filled aura-accent-green">Green</span>
642+
<span class="aura-badge aura-badge-filled aura-accent-blue">Blue</span>
643+
<span class="aura-badge aura-badge-filled aura-accent-purple">Purple</span>
644+
<span class="aura-badge aura-badge-filled aura-accent-red">Red</span>
645+
<span class="aura-badge aura-badge-filled aura-accent-orange">Orange</span>
646+
<span class="aura-badge aura-badge-filled aura-accent-yellow">Yellow</span>
647647
</div>
648648

649649
<div class="badges">
650-
<span theme="badge neutral">
650+
<span class="aura-badge aura-accent-neutral">
651651
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
652652
</span>
653-
<span theme="badge">
653+
<span class="aura-badge aura-accent-color">
654654
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
655655
</span>
656-
<span theme="badge green">
656+
<span class="aura-badge aura-accent-green">
657657
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
658658
</span>
659-
<span theme="badge blue">
659+
<span class="aura-badge aura-accent-blue">
660660
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
661661
</span>
662-
<span theme="badge purple">
662+
<span class="aura-badge aura-accent-purple">
663663
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
664664
</span>
665-
<span theme="badge red">
665+
<span class="aura-badge aura-accent-red">
666666
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
667667
</span>
668-
<span theme="badge orange">
668+
<span class="aura-badge aura-accent-orange">
669669
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
670670
</span>
671-
<span theme="badge yellow">
671+
<span class="aura-badge aura-accent-yellow">
672672
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
673673
</span>
674674
</div>
675675

676676
<div class="badges">
677-
<span theme="badge filled neutral">
677+
<span class="aura-badge aura-badge-filled aura-accent-neutral">
678678
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
679679
</span>
680-
<span theme="badge filled">
680+
<span class="aura-badge aura-badge-filled">
681681
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
682682
</span>
683-
<span theme="badge filled green">
683+
<span class="aura-badge aura-badge-filled aura-accent-green">
684684
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
685685
</span>
686-
<span theme="badge filled blue">
686+
<span class="aura-badge aura-badge-filled aura-accent-blue">
687687
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
688688
</span>
689-
<span theme="badge filled purple">
689+
<span class="aura-badge aura-badge-filled aura-accent-purple">
690690
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
691691
</span>
692-
<span theme="badge filled red">
692+
<span class="aura-badge aura-badge-filled aura-accent-red">
693693
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
694694
</span>
695-
<span theme="badge filled orange">
695+
<span class="aura-badge aura-badge-filled aura-accent-orange">
696696
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
697697
</span>
698-
<span theme="badge filled yellow">
698+
<span class="aura-badge aura-badge-filled aura-accent-yellow">
699699
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
700700
</span>
701701
</div>
@@ -718,7 +718,7 @@ <h1>Components</h1>
718718

719719
<div class="aura-surface component wide">
720720
<vaadin-tabs>
721-
<vaadin-tab>Details<span theme="badge">2</span></vaadin-tab>
721+
<vaadin-tab>Details<span class="aura-badge aura-accent-color">2</span></vaadin-tab>
722722
<vaadin-tab>Preferences</vaadin-tab>
723723
<vaadin-tab>Settings</vaadin-tab>
724724
</vaadin-tabs>

‎dev/aura/badge.css‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
[theme~='badge'] {
1+
.aura-badge {
22
display: inline-flex;
33
align-items: center;
44
justify-content: center;
@@ -7,7 +7,7 @@
77
font-weight: var(--aura-font-weight-medium);
88
height: calc(1lh - 2px);
99
border: 1px solid var(--aura-accent-border-color);
10-
background-color: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
10+
background: var(--aura-accent-surface) padding-box;
1111
background-clip: padding-box;
1212
color: var(--aura-accent-text-color);
1313
padding: 0 0.5em;
@@ -16,19 +16,31 @@
1616
--vaadin-icon-size: 0.75lh;
1717
}
1818

19-
[theme~='badge'][theme~='neutral'] {
20-
--aura-accent-color-light: var(--aura-text-color-light);
21-
--aura-accent-color-dark: var(--aura-text-color-dark);
22-
--aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
23-
}
24-
25-
[theme~='badge'][theme~='filled'] {
19+
.aura-badge.aura-badge-filled {
2620
background: var(--aura-accent-color);
2721
color: var(--aura-accent-contrast-color);
28-
border-color: transparent;
2922
}
3023

31-
[theme~='badge'][theme~='point']::before {
24+
/* Special case for filled badges within filled variants */
25+
/* TODO is there a way to solve this without explicitly listing the special cases */
26+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'],
27+
vaadin-tabs[theme~='filled'] > vaadin-tab[selected],
28+
vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] {
29+
> .aura-badge-filled:not(
30+
.aura-accent-red,
31+
.aura-accent-orange,
32+
.aura-accent-yellow,
33+
.aura-accent-green,
34+
.aura-accent-blue,
35+
.aura-accent-purple
36+
) {
37+
border-color: transparent;
38+
background: var(--aura-accent-contrast-color);
39+
color: var(--aura-accent-color);
40+
}
41+
}
42+
43+
.aura-badge.aura-badge-point::before {
3244
content: '';
3345
width: 0.5em;
3446
height: 0.5em;

0 commit comments

Comments
 (0)