Skip to content

Commit 031f19d

Browse files
jouniweb-padawan
jouni
authored and
web-padawan
committed
Lucide icons, Inter as an alternative font, layout updates
1 parent 6446541 commit 031f19d

File tree

12 files changed

+207
-79
lines changed

12 files changed

+207
-79
lines changed

‎dev/aura.html‎

Lines changed: 72 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,11 @@
2828
import '@vaadin/grid/all-imports';
2929
import { html } from 'lit';
3030
import { Notification } from '@vaadin/notification';
31+
import { Button } from '@vaadin/button';
3132

3233
const notification = Notification.show(
3334
html`<vaadin-card theme="horizontal footer-end no-frame">
34-
<vaadin-icon icon="uui:chat" slot="media"></vaadin-icon>
35+
<vaadin-icon icon="lucide:chat" slot="media"></vaadin-icon>
3536
<div slot="title">New Message from Olivia</div>
3637
<div>The AI chat UI is evolving with the integration of components…</div>
3738
<vaadin-button slot="footer">Show</vaadin-button>
@@ -86,6 +87,33 @@
8687
}
8788
return parts;
8889
};
90+
91+
customElements.define('mdl-back-button', class extends Button {
92+
connectedCallback() {
93+
super.connectedCallback();
94+
this.setAttribute('theme', 'tertiary');
95+
const icon = document.createElement('vaadin-icon');
96+
icon.setAttribute('icon', 'lucide:arrow-back');
97+
this.append(icon);
98+
this.addEventListener('click', () => {
99+
// TODO how to find the correct layout?
100+
this.closest('vaadin-master-detail-layout').parentNode.closest('vaadin-master-detail-layout')?._setDetail(null);
101+
});
102+
}
103+
});
104+
105+
// Fake navigation: prevent actual navigation, update 'current' item manually
106+
document.querySelectorAll('vaadin-side-nav').forEach((nav) => nav.addEventListener('click', (e) => {
107+
const link = e.composedPath().find((el) => el.localName === 'a');
108+
if (link) {
109+
e.preventDefault();
110+
if (link.href) {
111+
link.getRootNode().host.closest('vaadin-side-nav').querySelectorAll('vaadin-side-nav-item').forEach((item) => item.removeAttribute('current'));
112+
const navItem = e.composedPath().find((el) => el.localName === 'vaadin-side-nav-item');
113+
navItem.setAttribute('current', '');
114+
}
115+
}
116+
}));
89117
</script>
90118
</head>
91119
<body>
@@ -97,84 +125,81 @@
97125
</header>
98126
<vaadin-scroller slot="drawer" theme="overflow-indicators">
99127
<vaadin-side-nav collapsible>
100-
<span slot="label">Main menu</span>
128+
<span slot="label">General</span>
101129

102-
<vaadin-side-nav-item path="/dev/aura.html">
103-
Home
104-
<span theme="badge" slot="suffix" aria-label="(2 new items)">1</span>
130+
<vaadin-side-nav-item path="">
131+
<vaadin-icon icon="lucide:chart-column" slot="prefix"></vaadin-icon>
132+
Dashboard
133+
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
105134
</vaadin-side-nav-item>
106135

107-
<vaadin-side-nav-item path="/dev" expanded>
108-
Dev pages
109-
<span theme="badge" slot="suffix" aria-label="(2 new items)">99+</span>
110-
111-
<vaadin-side-nav-item path="/dev/grid.html" slot="children">Grid</vaadin-side-nav-item>
112-
<vaadin-side-nav-item path="/dev/select.html" slot="children">Select</vaadin-side-nav-item>
113-
<vaadin-side-nav-item path="/dev/button.html" slot="children">Button</vaadin-side-nav-item>
114-
115-
<vaadin-side-nav-item slot="children" expanded>
116-
Layouts
117-
118-
<vaadin-side-nav-item path="/dev/app-layout.html" slot="children"> App Layout </vaadin-side-nav-item>
119-
<vaadin-side-nav-item path="/dev/form-layout.html" slot="children"> Form Layout </vaadin-side-nav-item>
120-
<vaadin-side-nav-item path="/dev/master-detail-layout.html" slot="children">
121-
Master-Detail Layout
122-
<span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
123-
</vaadin-side-nav-item>
124-
<vaadin-side-nav-item path="/dev/split-layout.html" slot="children"> Split Layout </vaadin-side-nav-item>
125-
<vaadin-side-nav-item path="/dev/horizontal-layout.html" slot="children">
126-
Horizontal Layout
127-
</vaadin-side-nav-item>
128-
<vaadin-side-nav-item path="/dev/vertical-layout.html" slot="children">
129-
Vertical Layout
130-
</vaadin-side-nav-item>
131-
</vaadin-side-nav-item>
136+
<vaadin-side-nav-item path="projects">
137+
<vaadin-icon icon="lucide:layers" slot="prefix"></vaadin-icon>
138+
Projects
139+
</vaadin-side-nav-item>
132140

133-
<vaadin-side-nav-item slot="children" disabled data-disabled expanded>
134-
Form Fields
141+
<vaadin-side-nav-item path="documents">
142+
<vaadin-icon icon="lucide:file-text" slot="prefix"></vaadin-icon>
143+
Documents
144+
</vaadin-side-nav-item>
135145

136-
<vaadin-side-nav-item path="/dev/combo-box.html" slot="children"> Combo Box </vaadin-side-nav-item>
137-
<vaadin-side-nav-item path="/dev/date-picker.html" slot="children"> Date Picker </vaadin-side-nav-item>
138-
<vaadin-side-nav-item path="/dev/checkbox.html" slot="children"> Checkbox </vaadin-side-nav-item>
139-
<vaadin-side-nav-item path="/dev/text-field.html" slot="children"> Text Field </vaadin-side-nav-item>
140-
</vaadin-side-nav-item>
146+
<vaadin-side-nav-item path="calendar">
147+
<vaadin-icon icon="lucide:calendar" slot="prefix"></vaadin-icon>
148+
Calendar
149+
</vaadin-side-nav-item>
150+
</vaadin-side-nav>
151+
152+
<vaadin-side-nav collapsible>
153+
<span slot="label">Organization</span>
154+
155+
<vaadin-side-nav-item path="">
156+
<vaadin-icon icon="lucide:chart-pie" slot="prefix"></vaadin-icon>
157+
Reporting
141158
</vaadin-side-nav-item>
142159

143-
<vaadin-side-nav-item> Label only (no path) </vaadin-side-nav-item>
160+
<vaadin-side-nav-item path="projects">
161+
<vaadin-icon icon="lucide:list-todo" slot="prefix"></vaadin-icon>
162+
Tasks
163+
</vaadin-side-nav-item>
164+
165+
<vaadin-side-nav-item path="documents">
166+
<vaadin-icon icon="lucide:users" slot="prefix"></vaadin-icon>
167+
Users
168+
</vaadin-side-nav-item>
144169
</vaadin-side-nav>
145170
</vaadin-scroller>
146171
<footer slot="drawer">
147172
<a href="">Sign in</a>
148173
</footer>
149174

150-
<vaadin-master-detail-layout theme master-min-size="14em" master-size="25%" detail-min-size="30em">
175+
<vaadin-master-detail-layout theme master-min-size="14em" detail-size="75%" detail-min-size="20em">
151176
<div class="aura-view">
152177
<header>
153178
<vaadin-drawer-toggle></vaadin-drawer-toggle>
154179
<h1>Aura</h1>
155180
</header>
156181
<vaadin-side-nav>
157-
<vaadin-side-nav-item path="/">
158-
<vaadin-icon icon="uui:home" slot="prefix"></vaadin-icon>
182+
<vaadin-side-nav-item path="">
183+
<vaadin-icon icon="lucide:home" slot="prefix"></vaadin-icon>
159184
<span>Home</span>
160185
</vaadin-side-nav-item>
161186
<vaadin-side-nav-item path="/">
162-
<vaadin-icon icon="uui:chart-bar" slot="prefix"></vaadin-icon>
187+
<vaadin-icon icon="lucide:chart-column" slot="prefix"></vaadin-icon>
163188
<span>Dashboard</span>
164189
</vaadin-side-nav-item>
165190
<vaadin-side-nav-item path="/">
166-
<vaadin-icon icon="uui:layout-vertical" slot="prefix"></vaadin-icon>
191+
<vaadin-icon icon="lucide:folder" slot="prefix"></vaadin-icon>
167192
<span>Projects</span>
168193
</vaadin-side-nav-item>
169194
<vaadin-side-nav-item path="/">
170-
<vaadin-icon icon="uui:chart-pie" slot="prefix"></vaadin-icon>
195+
<vaadin-icon icon="lucide:chart-pie" slot="prefix"></vaadin-icon>
171196
<span>Reporting</span>
172197
</vaadin-side-nav-item>
173198
<vaadin-side-nav-item path="/">
174-
<vaadin-icon icon="uui:cog" slot="prefix"></vaadin-icon>
199+
<vaadin-icon icon="lucide:gear" slot="prefix"></vaadin-icon>
175200
<span>Settings</span>
176201
</vaadin-side-nav-item><vaadin-side-nav-item path="/">
177-
<vaadin-icon icon="uui:chat" slot="prefix"></vaadin-icon>
202+
<vaadin-icon icon="lucide:chat" slot="prefix"></vaadin-icon>
178203
<span>Support</span>
179204
<span theme="badge positive">Online</span>
180205
</vaadin-side-nav-item>
@@ -184,6 +209,7 @@ <h1>Aura</h1>
184209
<vaadin-master-detail-layout slot="detail" containment="viewport" theme="inset-drawer" force-overlay>
185210
<div class="aura-view">
186211
<header>
212+
<mdl-back-button></mdl-back-button>
187213
<h1>Contacts</h1>
188214
</header>
189215
<vaadin-grid multi-sort column-reordering-allowed theme="no-border">

‎packages/aura/aura.css‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import './src/components/badge.css';
99
@import './src/components/card.css';
1010
@import './src/components/form-layout.css';
11+
@import './src/components/grid.css';
1112
@import './src/components/notification.css';
1213
@import './src/components/side-nav.css';
1314

@@ -50,13 +51,18 @@ vaadin-app-layout > vaadin-master-detail-layout {
5051
overflow: visible;
5152
}
5253

54+
/* TODO move to base styles */
55+
vaadin-app-layout > vaadin-master-detail-layout::part(backdrop) {
56+
border-radius: inherit;
57+
}
58+
5359
vaadin-app-layout > vaadin-master-detail-layout::before {
5460
content: '';
5561
position: absolute;
56-
z-index: 1;
62+
z-index: 2;
5763
inset: 0;
5864
border-radius: inherit;
59-
border: min(1px, var(--app-layout-inset)) solid var(--aura-border-color-subtle);
65+
border: var(--mdl-border, 1px) solid var(--aura-border-color-subtle);
6066
pointer-events: none;
6167
}
6268

@@ -73,6 +79,7 @@ vaadin-master-detail-layout[theme~='inset-drawer'][drawer]::part(detail) {
7379
vaadin-master-detail-layout > vaadin-master-detail-layout,
7480
vaadin-master-detail-layout:not([drawer])::part(detail) {
7581
background: var(--aura-surface-background);
82+
background-clip: padding-box;
7683
border-start-end-radius: var(--app-layout-radius);
7784
border-end-end-radius: var(--app-layout-radius);
7885
}

‎packages/aura/src/aura-view.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,22 @@
1515
gap: 8px;
1616
}
1717

18-
.aura-view > :is(header, footer) :is(h1, h2, h3, h4, h5, h6) {
18+
.aura-view > header :is(h1, h2, h3, h4, h5, h6) {
1919
margin: 0;
20-
padding: var(--vaadin-padding-container);
20+
padding-block: var(--vaadin-padding-xs);
2121
font-size: var(--aura-font-size-l);
22-
font-weight: 600;
22+
font-weight: var(--aura-font-weight-strong);
2323
color: var(--vaadin-color);
2424
}
25+
26+
:is(vaadin-app-layout:not([overlay]), vaadin-master-detail-layout:not([drawer], [stack]) [slot='detail'])
27+
.aura-view
28+
> header
29+
:is(h1, h2, h3, h4, h5, h6) {
30+
padding-inline: var(--vaadin-padding-s);
31+
}
32+
33+
vaadin-app-layout:not([overlay]) .aura-view > header vaadin-drawer-toggle,
34+
vaadin-master-detail-layout:not([drawer], [stack]) [slot='detail'] .aura-view > header mdl-back-button {
35+
display: none;
36+
}

‎packages/aura/src/color.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ html {
2121

2222
--aura-surface-background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.07));
2323

24-
--aura-accent-color-1: light-dark(#ffeeb7, #504a34);
25-
--aura-accent-color-2: light-dark(#c2f3fe, #243337);
24+
--aura-accent-color-1: light-dark(#e5e8ea, #242526);
25+
--aura-accent-color-2: light-dark(#f1f6f8, #181819);
2626

2727
accent-color: var(--aura-accent-color-1);
2828

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
html {
22
--app-layout-inset: 1.5vmin;
3-
--nav-inset: 12px;
43
}
54

65
/* Aligned with App Layout overlay breakpoint */
76
@media (width <= 800px), (height <= 600px) {
87
html {
98
--app-layout-inset: 0px;
9+
--mdl-border: 0px;
1010
}
1111
}
1212

@@ -19,10 +19,6 @@ vaadin-app-layout[overlay] {
1919
padding-inline-start: var(--app-layout-inset);
2020
}
2121

22-
vaadin-app-layout:not([overlay]) vaadin-drawer-toggle {
23-
display: none;
24-
}
25-
2622
vaadin-app-layout::part(drawer) {
2723
padding: var(--app-layout-inset);
2824
}
@@ -40,6 +36,6 @@ vaadin-app-layout > footer[slot='drawer'] {
4036
grid-row: 3;
4137
}
4238

43-
vaadin-app-layout vaadin-side-nav {
44-
padding: var(--nav-inset);
39+
vaadin-app-layout > [slot='drawer'] vaadin-side-nav {
40+
padding-inline: calc(var(--side-nav-padding) - var(--app-layout-inset));
4541
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
vaadin-card[theme~='no-frame'] {
22
--vaadin-card-padding: 0px;
33
--vaadin-card-background: transparent;
4-
--vaadin-card-title-font-weight: 600;
4+
--vaadin-card-title-font-weight: var(--aura-font-weight-emphasis);
55
}
66

77
/* TODO could be a built-in variant */

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
vaadin-grid[theme~='no-border']::part(first-column-cell) {
2+
/* TODO can't use --vaadin-grid-cell-padding, it only works on the host */
3+
/* quite difficult to override the cell padding when it’s on the slotted vaadin-grid-cell-content element */
4+
--_cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-s) var(--vaadin-padding-xs) var(--vaadin-padding-l);
5+
}
6+
7+
vaadin-grid[theme~='no-border']::part(last-column-cell) {
8+
--_cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-l) var(--vaadin-padding-xs) var(--vaadin-padding-s);
9+
}

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

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
11
html {
2-
--vaadin-side-nav-item-font-weight: 600;
2+
--vaadin-side-nav-label-line-height: var(--aura-line-height-xs);
3+
--vaadin-side-nav-item-font-weight: var(--aura-font-weight-emphasis);
4+
--vaadin-side-nav-item-border-width: 1px;
5+
/* TODO add var(--vaadin-gap-xs) */
6+
--vaadin-side-nav-items-gap: 6px;
7+
--side-nav-padding: var(--vaadin-padding-m);
8+
}
9+
10+
vaadin-side-nav {
11+
padding: var(--side-nav-padding);
12+
padding-top: 0;
13+
}
14+
15+
vaadin-side-nav-item[current] {
16+
--vaadin-side-nav-item-background: var(--aura-accent-gradient);
17+
--vaadin-side-nav-item-border-color: var(--vaadin-border-color-subtle);
18+
}
19+
20+
vaadin-side-nav-item::part(content) {
21+
background-clip: padding-box;
322
}
423

524
@media (prefers-reduced-motion: no-preference) {
@@ -24,11 +43,6 @@ html {
2443
}
2544
}
2645

27-
vaadin-side-nav-item[current]::part(content) {
28-
--vaadin-side-nav-item-background: var(--aura-accent-gradient);
29-
border: 1px solid var(--vaadin-border-color);
30-
}
31-
3246
/* TODO bug in component/base styles: hide label part if no label is provided */
3347
vaadin-side-nav:not(:has([slot='label']))::part(label) {
3448
display: none;

‎packages/aura/src/font/Inter.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@font-face {
2+
font-family: 'Inter';
3+
src: url(./Inter.woff2) format('woff2');
4+
font-display: swap;
5+
font-style: normal;
6+
font-weight: 100 900;
7+
}

‎packages/aura/src/font/Inter.woff2‎

341 KB
Binary file not shown.

0 commit comments

Comments
 (0)