Skip to content

Commit a30aabc

Browse files
web-padawanweb-padawan
authored
refactor: add -color suffix to Aura color custom CSS properties (#10471)
1 parent 4334e50 commit a30aabc

File tree

10 files changed

+76
-52
lines changed

10 files changed

+76
-52
lines changed

‎dev/aura.html‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -426,10 +426,22 @@ <h3>Edit Theme</h3>
426426
property="--aura-notification-color-scheme"
427427
label="--aura-notification-color-scheme"
428428
></aura-scheme-control>
429-
<aura-color-control property="--aura-accent-light" label="--aura-accent-light"></aura-color-control>
430-
<aura-color-control property="--aura-background-light" label="--aura-background-light"></aura-color-control>
431-
<aura-color-control property="--aura-accent-dark" label="--aura-accent-dark"></aura-color-control>
432-
<aura-color-control property="--aura-background-dark" label="--aura-background-dark"></aura-color-control>
429+
<aura-color-control
430+
property="--aura-accent-color-light"
431+
label="--aura-accent-color-light"
432+
></aura-color-control>
433+
<aura-color-control
434+
property="--aura-background-color-light"
435+
label="--aura-background-color-light"
436+
></aura-color-control>
437+
<aura-color-control
438+
property="--aura-accent-color-dark"
439+
label="--aura-accent-color-dark"
440+
></aura-color-control>
441+
<aura-color-control
442+
property="--aura-background-color-dark"
443+
label="--aura-background-color-dark"
444+
></aura-color-control>
433445
<aura-number-control property="--aura-contrast" min="0" max="2" step="0.1"></aura-number-control>
434446
<aura-number-control
435447
property="--aura-overlay-surface-opacity"

‎packages/aura/src/color.css‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
:where(:host) {
33
--aura-contrast: 1;
44

5-
--aura-accent-light: hsl(220, 80%, 47%);
6-
--aura-accent-dark: hsl(220, 75%, 55%);
5+
--aura-accent-color-light: hsl(220, 80%, 47%);
6+
--aura-accent-color-dark: hsl(220, 75%, 55%);
77

88
--_color-base: light-dark(
9-
oklch(from var(--aura-background-light) 0.1 calc(c / 2 + c * (1 - c)) h),
10-
oklch(from var(--aura-background-dark) 1 c h)
9+
oklch(from var(--aura-background-color-light) 0.1 calc(c / 2 + c * (1 - c)) h),
10+
oklch(from var(--aura-background-color-dark) 1 c h)
1111
);
1212
--aura-text-light: color-mix(in srgb, var(--_color-base) calc(90% + 5% * var(--aura-contrast)), transparent);
1313
--aura-text-dark: color-mix(in srgb, #fff calc(90% + 5% * var(--aura-contrast)), transparent);
@@ -23,8 +23,8 @@
2323
);
2424

2525
--_border-color-base: light-dark(
26-
oklch(from var(--aura-background-light) 0.1 c h),
27-
oklch(from var(--aura-background-dark) 0.85 c h)
26+
oklch(from var(--aura-background-color-light) 0.1 c h),
27+
oklch(from var(--aura-background-color-dark) 0.85 c h)
2828
);
2929
--vaadin-border-color: color-mix(
3030
in srgb,
@@ -37,19 +37,19 @@
3737
);
3838

3939
/* Using static values (vs relative colors) for these backgrounds improves first paint rendering performance quite much (~200ms) */
40-
--aura-background-light: oklch(95% 0.005 260);
41-
--aura-background-dark: oklch(20% 0.01 260);
40+
--aura-background-color-light: oklch(95% 0.005 260);
41+
--aura-background-color-dark: oklch(20% 0.01 260);
4242

43-
--aura-background: light-dark(var(--aura-background-light), var(--aura-background-dark));
43+
--aura-background: light-dark(var(--aura-background-color-light), var(--aura-background-color-dark));
4444

4545
--_bg-alt: oklch(
4646
from var(--aura-background) calc(l + c) min(c, c * 2 - l/20) calc(h + 180 * var(--_safari-17-deg, 1deg) * l * c * 4)
4747
);
4848
--_bg-accent: radial-gradient(
4949
circle at 0% 0%,
5050
light-dark(
51-
oklch(from var(--aura-background-light) min(1, l + c * 3) min(c, c * 3) h),
52-
oklch(from var(--aura-background-dark) min(1, l + c) clamp(0, c * 1.5, 0.4) h)
51+
oklch(from var(--aura-background-color-light) min(1, l + c * 3) min(c, c * 3) h),
52+
oklch(from var(--aura-background-color-dark) min(1, l + c) clamp(0, c * 1.5, 0.4) h)
5353
),
5454
transparent 30%
5555
);
@@ -94,26 +94,26 @@ vaadin-radio-button::part(radio),
9494
vaadin-side-nav-item::part(content),
9595
vaadin-tab {
9696
--aura-accent-contrast-light: oklch(
97-
from var(--aura-accent-light) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
97+
from var(--aura-accent-color-light) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
9898
);
9999
--aura-accent-contrast-dark: oklch(
100-
from var(--aura-accent-dark) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
100+
from var(--aura-accent-color-dark) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
101101
);
102102

103-
--aura-accent-text-light: color-mix(
103+
--aura-accent-text-color-light: color-mix(
104104
in srgb,
105-
var(--aura-accent-light) calc(70% - 15% * var(--aura-contrast)),
105+
var(--aura-accent-color-light) calc(70% - 15% * var(--aura-contrast)),
106106
var(--vaadin-text-color)
107107
);
108-
--aura-accent-text-dark: color-mix(
108+
--aura-accent-text-color-dark: color-mix(
109109
in srgb,
110-
var(--aura-accent-dark) calc(70% - 15% * var(--aura-contrast)),
110+
var(--aura-accent-color-dark) calc(70% - 15% * var(--aura-contrast)),
111111
var(--vaadin-text-color)
112112
);
113113

114-
--aura-accent-color: light-dark(var(--aura-accent-light), var(--aura-accent-dark));
114+
--aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
115115
--aura-accent-contrast: light-dark(var(--aura-accent-contrast-light), var(--aura-accent-contrast-dark));
116-
--aura-accent-text: light-dark(var(--aura-accent-text-light), var(--aura-accent-text-dark));
116+
--aura-accent-text: light-dark(var(--aura-accent-text-color-light), var(--aura-accent-text-color-dark));
117117
}
118118

119119
@supports (color: hsl(0 0 0)) {

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,16 @@
77
transition: scale 180ms;
88
position: relative;
99
--_accent: light-dark(
10-
oklch(from var(--aura-accent-light) calc(l + 0.2) c h / min(0.3, c / 2)),
11-
oklch(from var(--aura-accent-dark) calc(l - 0.2) c h / min(0.3, c / 2))
10+
oklch(from var(--aura-accent-color-light) calc(l + 0.2) c h / min(0.3, c / 2)),
11+
oklch(from var(--aura-accent-color-dark) calc(l - 0.2) c h / min(0.3, c / 2))
1212
);
1313
--_accent-border: light-dark(
14-
oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast))),
15-
oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast)))
14+
oklch(
15+
from var(--aura-accent-color-light) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast))
16+
),
17+
oklch(
18+
from var(--aura-accent-color-dark) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast))
19+
)
1620
);
1721
--_background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
1822
}
@@ -134,12 +138,12 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
134138
/* Color variants */
135139

136140
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='accent'])) {
137-
--aura-accent-light: var(--aura-text-light);
138-
--aura-accent-dark: var(--aura-text-dark);
141+
--aura-accent-color-light: var(--aura-text-light);
142+
--aura-accent-color-dark: var(--aura-text-dark);
139143
}
140144

141145
/* prettier-ignore */
142146
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):is([theme~='danger'], [theme~='error']) {
143-
--aura-accent-light: var(--aura-red);
144-
--aura-accent-dark: var(--aura-red);
147+
--aura-accent-color-light: var(--aura-red);
148+
--aura-accent-color-dark: var(--aura-red);
145149
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ vaadin-card[theme~='elevated'] {
3232
--aura-surface-opacity: 0.7;
3333
--aura-surface-level: 3;
3434
--_shadow-color: light-dark(
35-
oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h / 0.1),
36-
oklch(from var(--aura-background-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
35+
oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h / 0.1),
36+
oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
3737
);
3838
--vaadin-card-shadow: 0 1px 6px -1px var(--_shadow-color);
3939
background-clip: padding-box;

‎packages/aura/src/components/item-overlay.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@
6161
}
6262

6363
&[theme~='danger'] {
64-
--aura-accent-light: var(--aura-red);
65-
--aura-accent-dark: var(--aura-red);
64+
--aura-accent-color-light: var(--aura-red);
65+
--aura-accent-color-dark: var(--aura-red);
6666
color: var(--aura-red-text);
6767
}
6868
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
:where(:host) {
33
--vaadin-overlay-border-width: 0px;
44
--vaadin-overlay-backdrop-background: light-dark(
5-
oklch(from var(--aura-background-light) calc(l * 0.1) c h / 0.15),
5+
oklch(from var(--aura-background-color-light) calc(l * 0.1) c h / 0.15),
66
hsla(0deg, 0%, 0%, 0.3)
77
);
88
--aura-overlay-outline-color: light-dark(
9-
oklch(from var(--aura-background-light) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast))),
10-
oklch(from var(--aura-background-dark) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast)))
9+
oklch(from var(--aura-background-color-light) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast))),
10+
oklch(from var(--aura-background-color-dark) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast)))
1111
);
1212
--aura-overlay-inner-outline-color: hsla(0deg, 0%, 100%, max(3%, 2% + 4% * var(--aura-contrast)));
1313
--aura-overlay-shadow:

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,16 @@ vaadin-side-nav-item:not([disabled])::part(content):hover {
2525

2626
vaadin-side-nav-item[current]::part(content) {
2727
--_accent: light-dark(
28-
oklch(from var(--aura-accent-light) calc(l + 0.2) c h / min(0.3, c / 2)),
29-
oklch(from var(--aura-accent-dark) calc(l - 0.2) c h / min(0.3, c / 2))
28+
oklch(from var(--aura-accent-color-light) calc(l + 0.2) c h / min(0.3, c / 2)),
29+
oklch(from var(--aura-accent-color-dark) calc(l - 0.2) c h / min(0.3, c / 2))
3030
);
3131
--_accent-border: light-dark(
32-
oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))),
33-
oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
32+
oklch(
33+
from var(--aura-accent-color-light) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))
34+
),
35+
oklch(
36+
from var(--aura-accent-color-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))
37+
)
3438
);
3539
--vaadin-side-nav-item-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
3640
--vaadin-side-nav-item-text-color: var(--aura-accent-text);

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ vaadin-tabs {
1212
}
1313

1414
vaadin-tabs:not([theme~='accent']) {
15-
--aura-accent-light: var(--aura-text-light);
16-
--aura-accent-dark: var(--aura-text-dark);
15+
--aura-accent-color-light: var(--aura-text-light);
16+
--aura-accent-color-dark: var(--aura-text-dark);
1717
}
1818

1919
vaadin-tabs::part(tabs) {
@@ -84,12 +84,16 @@ vaadin-tab:not([disabled], [selected]):hover {
8484

8585
vaadin-tab[selected] {
8686
--_accent: light-dark(
87-
oklch(from var(--aura-accent-light) calc(l + 0.2) c h / min(0.3, c / 2)),
88-
oklch(from var(--aura-accent-dark) calc(l - 0.2) c h / min(0.3, c / 2))
87+
oklch(from var(--aura-accent-color-light) calc(l + 0.2) c h / min(0.3, c / 2)),
88+
oklch(from var(--aura-accent-color-dark) calc(l - 0.2) c h / min(0.3, c / 2))
8989
);
9090
--_accent-border: light-dark(
91-
oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))),
92-
oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
91+
oklch(
92+
from var(--aura-accent-color-light) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))
93+
),
94+
oklch(
95+
from var(--aura-accent-color-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))
96+
)
9397
);
9498
--vaadin-tab-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
9599
--vaadin-tab-text-color: var(--aura-accent-text);

‎packages/aura/src/shadow.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
:where(:root),
22
:where(:host) {
33
--aura-shadow-color: light-dark(
4-
oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h / 0.2),
5-
oklch(from var(--aura-background-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
4+
oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h / 0.2),
5+
oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
66
);
77
--aura-shadow-m: 0 8px 16px -3px var(--aura-shadow-color);
88
}

‎packages/aura/src/surface.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ vaadin-crud-dialog::part(overlay) {
3535

3636
--aura-surface-solid: light-dark(
3737
oklch(
38-
from var(--aura-background-light)
38+
from var(--aura-background-color-light)
3939
min(1, l + (0.98 - l) * 4 + var(--aura-surface-level) * 0.06 - var(--aura-surface-opacity) / 20)
4040
clamp(0, c - l / 10 * var(--aura-surface-level) + var(--aura-surface-opacity) / 40, c) h
4141
),
4242
oklch(
43-
from var(--aura-background-dark)
43+
from var(--aura-background-color-dark)
4444
calc(max(l + 0.03, 0.25) + var(--aura-surface-level) * 0.022 - var(--aura-surface-opacity) / 40)
4545
clamp(0, c * (1 + l), 0.2) h
4646
)

0 commit comments

Comments
 (0)