Skip to content

Commit 1f86125

Browse files
jounijouni
authored
refactor!: update aura accent and surface colors (#10522)
1 parent f4c1fc6 commit 1f86125

File tree

8 files changed

+255
-206
lines changed

8 files changed

+255
-206
lines changed

‎dev/aura.html‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,16 @@
279279
html {
280280
height: calc(100% + env(safe-area-inset-top, 0px));
281281
--icon-rotate-ccw: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>');
282+
--aura-accent-color-light: var(--aura-blue);
283+
--aura-accent-color-dark: var(--aura-blue);
284+
--vaadin-user-color: var(--aura-accent-color);
285+
--vaadin-focus-ring-color: var(--aura-blue);
286+
}
287+
288+
/* prettier-ignore */
289+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-side-nav, vaadin-tabs):not([theme~="accent"]) {
290+
--aura-accent-color-light: var(--aura-text-color-light);
291+
--aura-accent-color-dark: var(--aura-text-color-dark);
282292
}
283293

284294
body {
@@ -360,7 +370,7 @@
360370
<vaadin-side-nav-item path="">
361371
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
362372
Dashboard
363-
<span theme="badge accent" slot="suffix" aria-label="(2 new items)">2</span>
373+
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
364374
</vaadin-side-nav-item>
365375

366376
<vaadin-side-nav-item>
@@ -442,6 +452,7 @@ <h3>Edit Theme</h3>
442452
label="--aura-background-color-dark"
443453
></aura-color-control>
444454
<aura-number-control property="--aura-contrast" min="0" max="2" step="0.1"></aura-number-control>
455+
<aura-number-control property="--aura-surface-level" min="-2" max="2" step="0.1"></aura-number-control>
445456
<aura-number-control
446457
property="--aura-overlay-surface-opacity"
447458
min="0.5"
@@ -474,11 +485,11 @@ <h3>Edit Theme</h3>
474485
<h1>Dashboard</h1>
475486
</header>
476487
<vaadin-scroller theme="overflow-indicators">
477-
<vaadin-side-nav theme="filled">
488+
<vaadin-side-nav theme="filled accent">
478489
<vaadin-side-nav-item path="#components">
479490
<vaadin-icon src="./assets/lucide-icons/home.svg" slot="prefix"></vaadin-icon>
480491
<span>Components</span>
481-
<span theme="badge accent" slot="suffix" aria-label="(2 new items)">2</span>
492+
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
482493
</vaadin-side-nav-item>
483494
<vaadin-side-nav-item>
484495
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
@@ -614,8 +625,8 @@ <h1>Components</h1>
614625

615626
<div class="aura-surface component wide tall">
616627
<div class="badges">
617-
<span theme="badge">Default</span>
618-
<span theme="badge accent">Accent</span>
628+
<span theme="badge neutral">Neutral</span>
629+
<span theme="badge">Accent</span>
619630
<span theme="badge green">Green</span>
620631
<span theme="badge blue">Blue</span>
621632
<span theme="badge purple">Purple</span>
@@ -625,8 +636,8 @@ <h1>Components</h1>
625636
</div>
626637

627638
<div class="badges">
628-
<span theme="filled badge">Default</span>
629-
<span theme="filled badge accent">Accent</span>
639+
<span theme="filled badge neutral">Neutral</span>
640+
<span theme="filled badge">Accent</span>
630641
<span theme="filled badge green">Green</span>
631642
<span theme="filled badge blue">Blue</span>
632643
<span theme="filled badge purple">Purple</span>
@@ -636,10 +647,10 @@ <h1>Components</h1>
636647
</div>
637648

638649
<div class="badges">
639-
<span theme="badge">
650+
<span theme="badge neutral">
640651
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
641652
</span>
642-
<span theme="badge accent">
653+
<span theme="badge">
643654
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
644655
</span>
645656
<span theme="badge green">
@@ -663,10 +674,10 @@ <h1>Components</h1>
663674
</div>
664675

665676
<div class="badges">
666-
<span theme="badge filled">
677+
<span theme="badge filled neutral">
667678
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
668679
</span>
669-
<span theme="badge filled accent">
680+
<span theme="badge filled">
670681
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
671682
</span>
672683
<span theme="badge filled green">
@@ -707,7 +718,7 @@ <h1>Components</h1>
707718

708719
<div class="aura-surface component wide">
709720
<vaadin-tabs>
710-
<vaadin-tab>Details<span theme="badge accent">2</span></vaadin-tab>
721+
<vaadin-tab>Details<span theme="badge">2</span></vaadin-tab>
711722
<vaadin-tab>Preferences</vaadin-tab>
712723
<vaadin-tab>Settings</vaadin-tab>
713724
</vaadin-tabs>

‎dev/aura/badge.css‎

Lines changed: 18 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,32 @@
66
font-size: var(--aura-font-size-s);
77
font-weight: var(--aura-font-weight-medium);
88
height: calc(1lh - 2px);
9-
border: 1px solid var(--_bg);
10-
--_bg: color-mix(in srgb, var(--color) 12%, transparent);
11-
background: var(--_bg);
9+
border: 1px solid var(--aura-accent-border-color);
10+
background-color: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
11+
background-clip: padding-box;
12+
color: var(--aura-accent-text-color);
1213
padding: 0 0.5em;
1314
border-radius: var(--vaadin-radius-l);
1415
min-width: calc(1lh - 1em - 2px);
15-
--color: var(--vaadin-text-color);
16-
--text-opacity: 70%;
17-
color: color-mix(
18-
in srgb,
19-
var(--color) calc(var(--text-opacity) - 15% * var(--aura-contrast)),
20-
var(--vaadin-text-color)
21-
);
2216
--vaadin-icon-size: 0.75lh;
2317
}
2418

25-
[theme~='badge'][theme~='accent'] {
26-
--color: var(--aura-accent-color);
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));
2723
}
2824

29-
[theme~='badge'][theme~='blue'] {
30-
--color: var(--aura-blue);
31-
}
32-
33-
[theme~='badge'][theme~='red'] {
34-
--color: var(--aura-red);
35-
}
36-
37-
[theme~='badge'][theme~='green'] {
38-
--color: var(--aura-green);
39-
}
40-
41-
[theme~='badge'][theme~='yellow'] {
42-
--color: var(--aura-yellow);
43-
--text-opacity: 60%;
44-
}
45-
46-
[theme~='badge'][theme~='orange'] {
47-
--color: var(--aura-orange);
48-
}
49-
50-
[theme~='badge'][theme~='purple'] {
51-
--color: var(--aura-purple);
25+
[theme~='badge'][theme~='filled'] {
26+
background: var(--aura-accent-color);
27+
color: var(--aura-accent-contrast-color);
28+
border-color: transparent;
5229
}
5330

54-
[theme~='badge'][theme~='filled'] {
55-
--_bg: color-mix(in srgb, var(--vaadin-text-color) 5%, var(--color));
56-
color: oklch(from var(--_bg) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1));
31+
[theme~='badge'][theme~='point']::before {
32+
content: '';
33+
width: 0.5em;
34+
height: 0.5em;
35+
border-radius: 50%;
36+
background: currentColor;
5737
}

0 commit comments

Comments
 (0)