Skip to content

Commit c188e41

Browse files
jounijouni
authored
feat: Aura surface and app layout styles (#10146)
1 parent d7c3ca4 commit c188e41

File tree

6 files changed

+249
-2
lines changed

6 files changed

+249
-2
lines changed

‎dev/aura.html‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,35 @@
99
<link rel="stylesheet" href="../packages/aura/aura.css" />
1010
<script type="module">
1111
import '@vaadin/app-layout';
12+
import '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
13+
import '@vaadin/vertical-layout';
1214
</script>
1315
</head>
1416
<body>
1517

1618
<vaadin-app-layout>
17-
<main>
18-
<h1>Aura</h1>
19+
<div slot="navbar">
20+
<vaadin-drawer-toggle></vaadin-drawer-toggle>
21+
</div>
22+
<div slot="drawer">
23+
Navigation
24+
</div>
25+
<main theme="surface">
26+
<vaadin-vertical-layout theme="padding spacing">
27+
<h1>Aura</h1>
28+
<div theme="surface" style="padding: 2em; --aura-surface-level: 1;">
29+
Level 1
30+
</div>
31+
<div theme="surface" style="padding: 2em; --aura-surface-level: 2;">
32+
Level 2
33+
</div>
34+
<div theme="surface" style="padding: 2em; --aura-surface-level: 3;">
35+
Level 3
36+
</div>
37+
<div theme="surface" style="padding: 2em; --aura-surface-level: 4;">
38+
Level 4
39+
</div>
40+
</vaadin-vertical-layout>
1941
</main>
2042
</vaadin-app-layout>
2143

‎packages/aura/aura.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
@import './src/color.css';
22
@import './src/color-scheme.css';
33
@import './src/palette.css';
4+
@import './src/shadow.css';
45
@import './src/size.css';
6+
@import './src/surface.css';
57
@import './src/typography.css';
68

9+
@import './src/components/app-layout.css';
10+
@import './src/components/overlay.css';
11+
712
:where(html) {
813
cursor: default;
914
}

‎packages/aura/src/components/app-layout.css‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
:where(html) {
2+
--aura-app-layout-inset: 1.5vmin;
3+
--aura-app-layout-radius: var(--vaadin-radius-l);
4+
--_aura-mdl-border: 1px;
5+
--vaadin-app-layout-navbar-padding-top: 0;
6+
--vaadin-app-layout-navbar-padding-bottom: 0;
7+
--vaadin-app-layout-navbar-padding-inline-start: 0;
8+
--vaadin-app-layout-navbar-padding-inline-end: 0;
9+
}
10+
11+
/* Aligned with App Layout overlay breakpoint */
12+
@media (width <= 800px), (height <= 600px) {
13+
html {
14+
--aura-app-layout-inset: 0px !important;
15+
--_aura-mdl-border: 0px;
16+
}
17+
}
18+
19+
html:has(vaadin-app-layout) {
20+
&,
21+
body {
22+
width: 100%;
23+
height: 100%;
24+
margin: 0;
25+
box-sizing: border-box;
26+
}
27+
}
28+
29+
vaadin-app-layout {
30+
--_app-layout-radius: clamp(0px, var(--aura-app-layout-radius), var(--aura-app-layout-inset) * 100);
31+
padding-block: var(--aura-app-layout-inset);
32+
padding-inline-end: var(--aura-app-layout-inset);
33+
padding-top: calc(var(--aura-app-layout-inset) + var(--_vaadin-app-layout-navbar-offset-size));
34+
}
35+
36+
vaadin-app-layout[overlay] {
37+
&::part(navbar),
38+
&::part(drawer) {
39+
--vaadin-app-layout-navbar-background: var(--aura-surface);
40+
--vaadin-app-layout-drawer-background: var(--aura-surface);
41+
--aura-surface-opacity: var(--aura-overlay-surface-opacity);
42+
-webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
43+
backdrop-filter: var(--aura-overlay-backdrop-filter);
44+
}
45+
}
46+
47+
vaadin-app-layout:is([overlay], :not([drawer-opened])) {
48+
padding-inline-start: var(--aura-app-layout-inset);
49+
}
50+
51+
vaadin-app-layout::part(navbar) {
52+
justify-content: space-between;
53+
}
54+
55+
vaadin-app-layout:not([overlay])::part(navbar) {
56+
--vaadin-app-layout-navbar-background: transparent;
57+
}
58+
59+
vaadin-app-layout:not([overlay])::part(drawer) {
60+
padding-block: var(--aura-app-layout-inset);
61+
padding-inline: max(0px, var(--aura-app-layout-inset) - var(--vaadin-padding-s));
62+
}
63+
64+
vaadin-app-layout > vaadin-scroller[slot='drawer'] {
65+
padding-inline: var(--vaadin-padding-m);
66+
scrollbar-width: thin;
67+
}
68+
69+
vaadin-app-layout > vaadin-scroller:nth-child(1 of [slot='drawer']) {
70+
padding-top: var(--vaadin-padding-s);
71+
}
72+
73+
vaadin-app-layout > vaadin-scroller:nth-last-child(1 of [slot='drawer']) {
74+
padding-bottom: var(--vaadin-padding-s);
75+
}
76+
77+
vaadin-app-layout > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
78+
color-scheme: var(--aura-content-color-scheme);
79+
color: var(--vaadin-color);
80+
background: linear-gradient(var(--aura-surface), var(--aura-surface)), var(--aura-app-background);
81+
background-clip: padding-box;
82+
background-origin: border-box;
83+
min-height: 100%;
84+
box-sizing: border-box;
85+
border-radius: var(--_app-layout-radius);
86+
border: var(--_aura-mdl-border) solid var(--vaadin-border-color-subtle);
87+
border-block-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
88+
border-inline-end-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
89+
}
90+
91+
vaadin-app-layout > vaadin-master-detail-layout {
92+
& > vaadin-master-detail-layout,
93+
&:not([drawer])::part(detail) {
94+
border-start-end-radius: var(--_app-layout-radius);
95+
border-end-end-radius: var(--_app-layout-radius);
96+
}
97+
98+
&::part(backdrop) {
99+
border-radius: calc(var(--_app-layout-radius) - var(--_aura-mdl-border));
100+
}
101+
102+
&:is([drawer][has-detail]) {
103+
border-color: var(--vaadin-border-color);
104+
}
105+
}
106+
107+
vaadin-app-layout:has([slot='navbar']):has([slot='drawer']) {
108+
padding-top: var(--_vaadin-app-layout-navbar-offset-size);
109+
110+
&::part(drawer) {
111+
padding-top: 0;
112+
}
113+
}
114+
115+
vaadin-app-layout:has([slot='navbar']):has([slot='drawer']):not([overlay]):not([drawer-opened])
116+
> :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
117+
border-inline-start-width: min(var(--aura-app-layout-inset), 1px);
118+
}
119+
120+
vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])[drawer-opened]:not([overlay])
121+
> :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
122+
border-start-start-radius: var(--aura-app-layout-radius);
123+
}
124+
125+
vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])
126+
> :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
127+
border-top-width: 1px;
128+
}
129+
130+
vaadin-app-layout:has([slot='navbar']) > :is(:not([slot]), [slot='drawer']) vaadin-drawer-toggle,
131+
vaadin-app-layout:not([slot='navbar']) > [slot='drawer'] vaadin-drawer-toggle {
132+
display: none;
133+
}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
:where(html) {
2+
--vaadin-overlay-border-width: 0px;
3+
--vaadin-overlay-backdrop-background: light-dark(
4+
oklch(from var(--aura-background-light) calc(l * 0.1) c h / 0.15),
5+
hsla(0deg, 0%, 0%, 0.3)
6+
);
7+
--aura-overlay-outline-color: light-dark(
8+
oklch(from var(--aura-background-light) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast))),
9+
oklch(from var(--aura-background-dark) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast)))
10+
);
11+
--aura-overlay-inner-outline-color: hsla(0deg, 0%, 100%, max(3%, 2% + 4% * var(--aura-contrast)));
12+
--aura-overlay-shadow:
13+
inset 0 0 0 1px var(--aura-overlay-inner-outline-color), 0 0 0 1px var(--aura-overlay-outline-color),
14+
var(--aura-shadow-m);
15+
--aura-overlay-backdrop-filter: blur(12px) brightness(1.2) saturate(1.2);
16+
--aura-overlay-surface-opacity: 0.85;
17+
18+
@media (prefers-reduced-transparency: reduce) {
19+
--aura-overlay-surface-opacity: 1 !important;
20+
}
21+
}
22+
23+
::part(overlay) {
24+
--vaadin-overlay-background: var(--aura-surface);
25+
--aura-surface-level: 4;
26+
--aura-surface-opacity: var(--aura-overlay-surface-opacity);
27+
box-shadow: var(--aura-overlay-shadow);
28+
-webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
29+
backdrop-filter: var(--aura-overlay-backdrop-filter);
30+
font-family: var(--aura-font-family);
31+
font-size: var(--aura-font-size-m);
32+
font-weight: var(--aura-font-weight);
33+
line-height: var(--aura-line-height-m);
34+
color: var(--vaadin-color);
35+
}

‎packages/aura/src/shadow.css‎

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

‎packages/aura/src/surface.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
:where(html) {
2+
--aura-surface-level: 1;
3+
}
4+
5+
/* List all elements that are surfaces */
6+
html,
7+
[theme~='surface'],
8+
[theme~='surface-solid'],
9+
vaadin-app-layout::part(navbar),
10+
vaadin-app-layout::part(drawer),
11+
::part(overlay) {
12+
--aura-surface-opacity: 0.5;
13+
14+
--aura-surface-solid: light-dark(
15+
oklch(
16+
from var(--aura-background-light)
17+
min(
18+
1,
19+
l + (0.98 - l) * 4 + var(--aura-surface-level) * (0.07 - 0.01 * var(--aura-contrast)) -
20+
var(--aura-surface-opacity) / 15
21+
)
22+
clamp(0, c - l / 10 * var(--aura-surface-level) + var(--aura-surface-opacity) / 40, c) h
23+
),
24+
oklch(
25+
from var(--aura-background-dark)
26+
calc(
27+
max(l + 0.03, 0.25) + var(--aura-surface-level) * (0.03 - 0.008 * var(--aura-contrast)) -
28+
var(--aura-surface-opacity) / 40
29+
)
30+
clamp(0, c * (1 + l), 0.2) h
31+
)
32+
);
33+
34+
--aura-surface: color-mix(in oklab, var(--aura-surface-solid) calc(100% * var(--aura-surface-opacity)), transparent);
35+
--vaadin-background-color: var(--aura-surface-solid);
36+
}
37+
38+
[theme~='surface'] {
39+
background: var(--aura-surface) padding-box;
40+
}
41+
42+
[theme~='surface-solid'] {
43+
--aura-surface-opacity: 1;
44+
background: var(--aura-surface-solid) padding-box;
45+
}

0 commit comments

Comments
 (0)