Skip to content

Commit f6571da

Browse files
jounijouni
authored
feat: aura accent color for button, side-nav, radio-button and checkbox (#10249)
1 parent 9c38f2c commit f6571da

File tree

6 files changed

+120
-109
lines changed

6 files changed

+120
-109
lines changed

‎dev/aura.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@
298298
<vaadin-side-nav-item path="">
299299
<vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
300300
Dashboard
301-
<span theme="badge accent" slot="suffix" aria-label="(2 new items)">2</span>
301+
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
302302
</vaadin-side-nav-item>
303303

304304
<vaadin-side-nav-item>
@@ -354,7 +354,7 @@
354354
<h1>Dashboard</h1>
355355
</header>
356356
<vaadin-scroller theme="overflow-indicators">
357-
<vaadin-side-nav theme="contrast">
357+
<vaadin-side-nav theme="filled">
358358
<vaadin-side-nav-item path="#components">
359359
<vaadin-icon src="./assets/lucide-icons/home.svg" slot="prefix"></vaadin-icon>
360360
<span>Components</span>

‎packages/aura/src/color.css‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,9 @@
88
oklch(from var(--aura-background-light) 0.1 calc(c / 2 + c * (1 - c)) h),
99
oklch(from var(--aura-background-dark) 1 c h)
1010
);
11-
--vaadin-text-color: light-dark(
12-
color-mix(in srgb, var(--_color-base) calc(90% + 5% * var(--aura-contrast)), transparent),
13-
color-mix(in srgb, #fff calc(90% + 5% * var(--aura-contrast)), transparent)
14-
);
11+
--aura-text-light: color-mix(in srgb, var(--_color-base) calc(90% + 5% * var(--aura-contrast)), transparent);
12+
--aura-text-dark: color-mix(in srgb, #fff calc(90% + 5% * var(--aura-contrast)), transparent);
13+
--vaadin-text-color: light-dark(var(--aura-text-light), var(--aura-text-dark));
1514
--vaadin-text-color-secondary: light-dark(
1615
color-mix(in srgb, var(--_color-base) calc(55% + 10% * var(--aura-contrast)), transparent),
1716
color-mix(in srgb, var(--_color-base) calc(57% + 10% * var(--aura-contrast)), transparent)
@@ -57,26 +56,8 @@
5756
var(--_bg-accent),
5857
radial-gradient(circle at 25% 0% in xyz, var(--aura-background) 33%, var(--_bg-alt)) var(--aura-background);
5958

60-
--aura-accent-color: light-dark(var(--aura-accent-light), var(--aura-accent-dark));
6159
--vaadin-focus-ring-color: var(--aura-accent-color);
6260
accent-color: var(--aura-accent-color);
63-
/* Workaround Safari 17 limitation and compute these separately for light and dark */
64-
--aura-accent-contrast: light-dark(
65-
oklch(from var(--aura-accent-light) clamp(0, (0.62 - l) * 1000, 1) 0 0),
66-
oklch(from var(--aura-accent-dark) clamp(0, (0.62 - l) * 1000, 1) 0 0)
67-
);
68-
69-
--aura-accent-text-light: color-mix(
70-
in srgb,
71-
var(--aura-accent-light) calc(70% - 15% * var(--aura-contrast)),
72-
var(--vaadin-text-color)
73-
);
74-
--aura-accent-text-dark: color-mix(
75-
in srgb,
76-
var(--aura-accent-dark) calc(70% - 15% * var(--aura-contrast)),
77-
var(--vaadin-text-color)
78-
);
79-
--aura-accent-text: light-dark(var(--aura-accent-text-light), var(--aura-accent-text-dark));
8061

8162
/* TODO probably broken for Safari 17 */
8263
--vaadin-user-color: var(--aura-accent-color);
@@ -99,6 +80,36 @@
9980
background-attachment: fixed;
10081
}
10182

83+
:where(:root, :host),
84+
vaadin-button,
85+
vaadin-menu-bar-button,
86+
vaadin-drawer-toggle,
87+
vaadin-checkbox::part(checkbox),
88+
vaadin-radio-button::part(radio),
89+
vaadin-side-nav-item::part(content) {
90+
--aura-accent-contrast-light: oklch(
91+
from var(--aura-accent-light) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
92+
);
93+
--aura-accent-contrast-dark: oklch(
94+
from var(--aura-accent-dark) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
95+
);
96+
97+
--aura-accent-text-light: color-mix(
98+
in srgb,
99+
var(--aura-accent-light) calc(70% - 15% * var(--aura-contrast)),
100+
var(--vaadin-text-color)
101+
);
102+
--aura-accent-text-dark: color-mix(
103+
in srgb,
104+
var(--aura-accent-dark) calc(70% - 15% * var(--aura-contrast)),
105+
var(--vaadin-text-color)
106+
);
107+
108+
--aura-accent-color: light-dark(var(--aura-accent-light), var(--aura-accent-dark));
109+
--aura-accent-contrast: light-dark(var(--aura-accent-contrast-light), var(--aura-accent-contrast-dark));
110+
--aura-accent-text: light-dark(var(--aura-accent-text-light), var(--aura-accent-text-dark));
111+
}
112+
102113
@supports (color: hsl(0 0 0)) {
103114
:where(:root, :host) {
104115
--_safari-17-deg: 1;

‎packages/aura/src/components/button.css‎

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
:where(:root, :host) {
2-
--vaadin-button-border-color: var(--vaadin-border-color);
32
--vaadin-button-shadow: 0 1px 4px -1px hsla(0, 0%, 0%, 0.07);
43
}
54

65
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle) {
76
transition: scale 180ms;
87
position: relative;
8+
--_accent: light-dark(
9+
oklch(from var(--aura-accent-light) calc(l + 0.2) c h / min(0.3, c / 2)),
10+
oklch(from var(--aura-accent-dark) calc(l - 0.2) c h / min(0.3, c / 2))
11+
);
12+
--_accent-border: light-dark(
13+
oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast))),
14+
oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast)))
15+
);
16+
--_background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
917
}
1018

1119
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='tertiary'])) {
@@ -15,15 +23,13 @@
1523
}
1624

1725
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([theme~='primary'], [theme~='tertiary']) {
18-
background: var(--vaadin-button-background, var(--aura-surface) padding-box);
26+
background: var(--vaadin-button-background, var(--_background));
27+
--vaadin-button-border-color: var(--_accent-border);
1928
}
2029

2130
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='primary'])) {
2231
outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
23-
}
24-
25-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where([theme~='primary']) {
26-
outline-offset: 2px;
32+
--vaadin-button-text-color: var(--aura-accent-text);
2733
}
2834

2935
/*
@@ -49,13 +55,15 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
4955
padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
5056
}
5157

52-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] {
58+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where([theme~='primary']) {
59+
outline-offset: 2px;
5360
--vaadin-button-font-weight: var(--aura-font-weight-semibold);
54-
--vaadin-button-text-color: light-dark(var(--vaadin-background-color), var(--aura-background-dark));
61+
--vaadin-button-text-color: var(--aura-accent-contrast);
62+
--vaadin-button-background: var(--aura-accent-color);
5563
}
5664

57-
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[disabled][theme~='primary'] {
58-
--vaadin-button-text-color: var(--vaadin-text-color-secondary);
65+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[disabled][theme~='primary']::part(label) {
66+
color: color-mix(in srgb, currentColor 50%, transparent);
5967
}
6068

6169
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
@@ -73,13 +81,13 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
7381

7482
@supports (color: hsl(0 0 0)) {
7583
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
76-
background-color: oklch(from currentColor calc(l + 0.4 - c) c h);
84+
background-color: oklch(from currentColor calc(l + 0.4 - c) c h / calc(1 - l / 2));
7785
}
7886
}
7987

8088
@media (any-hover: hover) {
8189
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):hover:not([disabled], [active])::before {
82-
opacity: 0.05;
90+
opacity: 0.03;
8391
}
8492

8593
/* prettier-ignore */
@@ -111,3 +119,20 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
111119
border-inline-start-color: transparent;
112120
}
113121
}
122+
123+
/* Color variants */
124+
125+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='accent'])) {
126+
--aura-accent-light: var(--aura-text-light);
127+
--aura-accent-dark: var(--aura-text-dark);
128+
}
129+
130+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):is([theme~='danger'], [theme~='error']) {
131+
--aura-accent-light: var(--aura-red);
132+
--aura-accent-dark: var(--aura-red);
133+
}
134+
135+
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='success'] {
136+
--aura-accent-light: var(--aura-green);
137+
--aura-accent-dark: var(--aura-green);
138+
}

‎packages/aura/src/components/checkbox-radio.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,15 @@ vaadin-radio-button:not([checked])::part(radio) {
3030
}
3131

3232
vaadin-checkbox:is([checked], [indeterminate]):not([readonly], [disabled])::part(checkbox) {
33-
/* TODO add/use selection color */
3433
--vaadin-checkbox-background: var(--aura-accent-color);
3534
--vaadin-checkbox-color: var(--aura-accent-contrast);
35+
--vaadin-checkbox-border-color: var(--vaadin-border-color-secondary);
3636
}
3737

3838
vaadin-radio-button[checked]:not([readonly], [disabled])::part(radio) {
39-
/* TODO add/use selection color */
4039
--vaadin-radio-button-background: var(--aura-accent-color);
4140
--vaadin-radio-button-color: var(--aura-accent-contrast);
41+
--vaadin-radio-button-border-color: var(--vaadin-border-color-secondary);
4242
}
4343

4444
vaadin-checkbox:not([readonly], [disabled])::part(checkbox)::before,

‎packages/aura/src/components/grid.css‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
:where(:root, :host) {
2-
/* TODO should likely be just a color prop, not a background-image */
3-
--vaadin-grid-row-selected-background: linear-gradient(
4-
var(--vaadin-background-container),
5-
var(--vaadin-background-container)
6-
);
2+
--vaadin-grid-row-selected-background-color: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
3+
--vaadin-grid-background: linear-gradient(var(--aura-surface), var(--aura-surface)) var(--aura-background) padding-box;
74
}
85

96
vaadin-grid[theme~='no-border']::part(first-column-cell) {
10-
/* TODO can't use --vaadin-grid-cell-padding, it only works on the host */
11-
/* quite difficult to override the cell padding when it’s on the slotted vaadin-grid-cell-content element */
12-
--_cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-s) var(--vaadin-padding-xs) var(--vaadin-padding-l);
7+
--vaadin-grid-cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-s) var(--vaadin-padding-xs)
8+
var(--vaadin-padding-l);
139
}
1410

1511
vaadin-grid[theme~='no-border']::part(last-column-cell) {
16-
--_cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-l) var(--vaadin-padding-xs) var(--vaadin-padding-s);
12+
--vaadin-grid-cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-l) var(--vaadin-padding-xs)
13+
var(--vaadin-padding-s);
14+
}
15+
16+
vaadin-grid::part(empty-state) {
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
1720
}
1821

1922
/* TODO custom part name: how should we indicate an active row? Should we have a built-in part name? */
2023
vaadin-grid::part(active-nav-item) {
21-
/* TODO should likely be just a color prop, not a background-image */
22-
/* TODO need a custom prop in grid base styles that can be used to just highlight a row, which works together with row stripes, selection color, etc. */
23-
--vaadin-grid-cell-background: linear-gradient(var(--vaadin-background-container), var(--vaadin-background-container))
24-
var(--vaadin-background-color);
24+
--vaadin-grid-row-highlight-background-color: var(--vaadin-background-container);
2525
}

‎packages/aura/src/components/side-nav.css‎

Lines changed: 33 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ vaadin-side-nav-item::part(content) {
1515
color 120ms,
1616
border-color 120ms,
1717
background-color 120ms;
18-
background-clip: padding-box;
1918
--aura-surface-level: 3;
2019
}
2120

@@ -24,67 +23,43 @@ vaadin-side-nav-item:not([disabled])::part(content):hover {
2423
}
2524

2625
vaadin-side-nav-item[current]::part(content) {
27-
--vaadin-side-nav-item-background: var(--aura-surface);
28-
--vaadin-side-nav-item-border-color: var(--vaadin-border-color-secondary);
26+
--_accent: light-dark(
27+
oklch(from var(--aura-accent-light) calc(l + 0.2) c h / min(0.3, c / 2)),
28+
oklch(from var(--aura-accent-dark) calc(l - 0.2) c h / min(0.3, c / 2))
29+
);
30+
--_accent-border: light-dark(
31+
oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))),
32+
oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
33+
);
34+
--vaadin-side-nav-item-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
35+
--vaadin-side-nav-item-color: var(--aura-accent-text);
36+
--vaadin-side-nav-item-border-color: var(--_accent-border);
2937
}
3038

31-
/* Contrast variant */
39+
/* Filled variant */
3240

33-
vaadin-side-nav[theme~='contrast'] vaadin-side-nav-item[current]::part(content) {
34-
color-scheme: var(--_side-nav-current-item-color-scheme, dark);
35-
background: var(--aura-surface-solid);
36-
border-color: transparent;
41+
vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current]::part(content) {
42+
--vaadin-side-nav-item-background: var(--aura-accent-color) border-box;
43+
--vaadin-side-nav-item-color: var(--aura-accent-contrast);
3744
outline-offset: 2px;
3845
}
3946

40-
vaadin-side-nav[theme~='contrast'] vaadin-side-nav-item[current] > :not([slot='children']) {
41-
--aura-red: var(--vaadin-text-color);
42-
--aura-red-text: var(--vaadin-text-color);
43-
--aura-orange: var(--vaadin-text-color);
44-
--aura-orange-text: var(--vaadin-text-color);
45-
--aura-yellow: var(--vaadin-text-color);
46-
--aura-yellow-text: var(--vaadin-text-color);
47-
--aura-green: var(--vaadin-text-color);
48-
--aura-green-text: var(--vaadin-text-color);
49-
--aura-blue: var(--vaadin-text-color);
50-
--aura-blue-text: var(--vaadin-text-color);
51-
--aura-purple: var(--vaadin-text-color);
52-
--aura-purple-text: var(--vaadin-text-color);
53-
}
54-
55-
@container style(--aura-color-scheme: dark) {
56-
[slot='drawer'] {
57-
--_side-nav-current-item-color-scheme: light;
58-
}
59-
}
60-
61-
@container style(--aura-content-color-scheme: dark) {
62-
vaadin-app-layout > :not([slot]) {
63-
--_side-nav-current-item-color-scheme: light;
64-
}
65-
}
66-
67-
@container style(--aura-content-color-scheme: light) {
68-
vaadin-app-layout > :not([slot]) {
69-
--_side-nav-current-item-color-scheme: dark;
70-
}
71-
}
72-
73-
@media (prefers-color-scheme: dark) {
74-
@container style(--aura-content-color-scheme: light dark) {
75-
vaadin-app-layout > :not([slot]) {
76-
--_side-nav-current-item-color-scheme: light;
77-
}
78-
}
79-
80-
@container style(--aura-color-scheme: light dark) {
81-
[slot='drawer'] {
82-
--_side-nav-current-item-color-scheme: light;
83-
}
84-
}
85-
}
86-
87-
/* TODO bug in component/base styles: hide label part if no label is provided */
88-
vaadin-side-nav:not(:has([slot='label']))::part(label) {
89-
display: none;
47+
/* Badges and other content that uses the palette inside a filled nav item */
48+
vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']) {
49+
--vaadin-text-color: var(--vaadin-side-nav-item-color);
50+
--vaadin-text-color-secondary: var(--vaadin-side-nav-item-color);
51+
--aura-accent-color: var(--vaadin-side-nav-item-color);
52+
--aura-accent-text: var(--vaadin-side-nav-item-color);
53+
--aura-red: var(--vaadin-side-nav-item-color);
54+
--aura-red-text: var(--vaadin-side-nav-item-color);
55+
--aura-orange: var(--vaadin-side-nav-item-color);
56+
--aura-orange-text: var(--vaadin-side-nav-item-color);
57+
--aura-yellow: var(--vaadin-side-nav-item-color);
58+
--aura-yellow-text: var(--vaadin-side-nav-item-color);
59+
--aura-green: var(--vaadin-side-nav-item-color);
60+
--aura-green-text: var(--vaadin-side-nav-item-color);
61+
--aura-blue: var(--vaadin-side-nav-item-color);
62+
--aura-blue-text: var(--vaadin-side-nav-item-color);
63+
--aura-purple: var(--vaadin-side-nav-item-color);
64+
--aura-purple-text: var(--vaadin-side-nav-item-color);
9065
}

0 commit comments

Comments
 (0)