Skip to content

Commit 3b2f0ee

Browse files
jounijouni
committed
feat!: aura accent and surface colors
1 parent f3db815 commit 3b2f0ee

File tree

8 files changed

+253
-206
lines changed

8 files changed

+253
-206
lines changed

‎dev/aura.html‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,15 @@
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+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-side-nav, vaadin-tabs):not([theme~="accent"]) {
289+
--aura-accent-color-light: var(--aura-text-color-light);
290+
--aura-accent-color-dark: var(--aura-text-color-dark);
282291
}
283292

284293
body {
@@ -360,7 +369,7 @@
360369
<vaadin-side-nav-item path="">
361370
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
362371
Dashboard
363-
<span theme="badge accent" slot="suffix" aria-label="(2 new items)">2</span>
372+
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
364373
</vaadin-side-nav-item>
365374

366375
<vaadin-side-nav-item>
@@ -442,6 +451,7 @@ <h3>Edit Theme</h3>
442451
label="--aura-background-color-dark"
443452
></aura-color-control>
444453
<aura-number-control property="--aura-contrast" min="0" max="2" step="0.1"></aura-number-control>
454+
<aura-number-control property="--aura-surface-level" min="-2" max="2" step="0.1"></aura-number-control>
445455
<aura-number-control
446456
property="--aura-overlay-surface-opacity"
447457
min="0.5"
@@ -474,11 +484,11 @@ <h3>Edit Theme</h3>
474484
<h1>Dashboard</h1>
475485
</header>
476486
<vaadin-scroller theme="overflow-indicators">
477-
<vaadin-side-nav theme="filled">
487+
<vaadin-side-nav theme="filled accent">
478488
<vaadin-side-nav-item path="#components">
479489
<vaadin-icon src="./assets/lucide-icons/home.svg" slot="prefix"></vaadin-icon>
480490
<span>Components</span>
481-
<span theme="badge accent" slot="suffix" aria-label="(2 new items)">2</span>
491+
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
482492
</vaadin-side-nav-item>
483493
<vaadin-side-nav-item>
484494
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
@@ -614,8 +624,8 @@ <h1>Components</h1>
614624

615625
<div class="aura-surface component wide tall">
616626
<div class="badges">
617-
<span theme="badge">Default</span>
618-
<span theme="badge accent">Accent</span>
627+
<span theme="badge neutral">Neutral</span>
628+
<span theme="badge">Accent</span>
619629
<span theme="badge green">Green</span>
620630
<span theme="badge blue">Blue</span>
621631
<span theme="badge purple">Purple</span>
@@ -625,8 +635,8 @@ <h1>Components</h1>
625635
</div>
626636

627637
<div class="badges">
628-
<span theme="filled badge">Default</span>
629-
<span theme="filled badge accent">Accent</span>
638+
<span theme="filled badge neutral">Neutral</span>
639+
<span theme="filled badge">Accent</span>
630640
<span theme="filled badge green">Green</span>
631641
<span theme="filled badge blue">Blue</span>
632642
<span theme="filled badge purple">Purple</span>
@@ -636,10 +646,10 @@ <h1>Components</h1>
636646
</div>
637647

638648
<div class="badges">
639-
<span theme="badge">
649+
<span theme="badge neutral">
640650
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
641651
</span>
642-
<span theme="badge accent">
652+
<span theme="badge">
643653
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
644654
</span>
645655
<span theme="badge green">
@@ -663,10 +673,10 @@ <h1>Components</h1>
663673
</div>
664674

665675
<div class="badges">
666-
<span theme="badge filled">
676+
<span theme="badge filled neutral">
667677
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
668678
</span>
669-
<span theme="badge filled accent">
679+
<span theme="badge filled">
670680
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
671681
</span>
672682
<span theme="badge filled green">
@@ -707,7 +717,7 @@ <h1>Components</h1>
707717

708718
<div class="aura-surface component wide">
709719
<vaadin-tabs>
710-
<vaadin-tab>Details<span theme="badge accent">2</span></vaadin-tab>
720+
<vaadin-tab>Details<span theme="badge">2</span></vaadin-tab>
711721
<vaadin-tab>Preferences</vaadin-tab>
712722
<vaadin-tab>Settings</vaadin-tab>
713723
</vaadin-tabs>

‎dev/aura/badge.css‎

Lines changed: 17 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,31 @@
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+
color: var(--aura-accent-text-color);
1212
padding: 0 0.5em;
1313
border-radius: var(--vaadin-radius-l);
1414
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-
);
2215
--vaadin-icon-size: 0.75lh;
2316
}
2417

25-
[theme~='badge'][theme~='accent'] {
26-
--color: var(--aura-accent-color);
18+
[theme~='badge'][theme~='neutral'] {
19+
--aura-accent-color-light: var(--aura-text-color-light);
20+
--aura-accent-color-dark: var(--aura-text-color-dark);
21+
--aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
2722
}
2823

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);
24+
[theme~='badge'][theme~='filled'] {
25+
background: var(--aura-accent-color);
26+
color: var(--aura-accent-contrast-color);
27+
border-color: transparent;
5228
}
5329

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));
30+
[theme~='badge'][theme~='point']::before {
31+
content: '';
32+
width: 0.5em;
33+
height: 0.5em;
34+
border-radius: 50%;
35+
background: currentColor;
5736
}

0 commit comments

Comments
 (0)