Skip to content

Commit fc350cf

Browse files
jounijouni
committed
feat: aura tabs theme
1 parent 2c7a153 commit fc350cf

File tree

4 files changed

+136
-0
lines changed

4 files changed

+136
-0
lines changed

‎dev/aura.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
import '@vaadin/select';
4444
import '@vaadin/scroller';
4545
import '@vaadin/side-nav';
46+
import '@vaadin/tabs';
4647
import '@vaadin/text-field';
4748
import '@vaadin/vertical-layout';
4849
import { html, render } from 'lit';
@@ -597,6 +598,14 @@ <h1>Components</h1>
597598
</vaadin-checkbox>
598599
</div>
599600

601+
<div class="aura-surface component wide">
602+
<vaadin-tabs>
603+
<vaadin-tab>Details<span theme="badge accent">2</span></vaadin-tab>
604+
<vaadin-tab>Preferences</vaadin-tab>
605+
<vaadin-tab>Settings</vaadin-tab>
606+
</vaadin-tabs>
607+
</div>
608+
600609
<div class="aura-surface component wide">
601610
<vaadin-date-time-picker style="width: 20em" value="2025-09-09T12:00"></vaadin-date-time-picker>
602611
</div>

‎packages/aura/aura.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
@import './src/components/rich-text-editor.css';
3131
@import './src/components/select.css';
3232
@import './src/components/side-nav.css';
33+
@import './src/components/tabs.css';
3334
@import './src/components/upload.css';
3435

3536
:where(:root, :host) {

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
:where(:root, :host) {
2+
--vaadin-tab-font-weight: var(--aura-font-weight-medium);
3+
--vaadin-tabs-gap: 2px;
4+
}
5+
6+
vaadin-tabs {
7+
background: var(--vaadin-background-container);
8+
border-radius: calc(var(--vaadin-radius-m) + 3px);
9+
padding: 3px;
10+
contain: paint;
11+
}
12+
13+
vaadin-tabs:not([theme~='accent']) {
14+
--aura-accent-light: var(--aura-text-light);
15+
--aura-accent-dark: var(--aura-text-dark);
16+
}
17+
18+
vaadin-tabs::part(tabs) {
19+
padding: 3px;
20+
margin: -3px;
21+
--_mask-fade-start: 0.5lh;
22+
--_mask-fade-size: 2lh;
23+
mask-image: linear-gradient(
24+
var(--_mask-dir, to right),
25+
var(--_mask-start, black) var(--_mask-fade-start),
26+
black var(--_mask-fade-size),
27+
black calc(100% - var(--_mask-fade-size)),
28+
var(--_mask-end, black) calc(100% - var(--_mask-fade-start))
29+
);
30+
}
31+
32+
vaadin-tabs[dir='rtl']::part(tabs) {
33+
--_mask-dir: to left;
34+
}
35+
36+
vaadin-tabs[orientation='vertical']::part(tabs) {
37+
--_mask-dir: to bottom;
38+
--_mask-fade-start: 0px;
39+
--_mask-fade-size: 0.5lh;
40+
}
41+
42+
vaadin-tabs[overflow~='start'] {
43+
--_mask-start: transparent;
44+
}
45+
46+
vaadin-tabs[overflow~='end'] {
47+
--_mask-end: transparent;
48+
}
49+
50+
vaadin-tabs::part(back-button),
51+
vaadin-tabs::part(forward-button) {
52+
background: var(--aura-surface-solid) padding-box;
53+
border: 1px solid var(--vaadin-border-color);
54+
border-radius: var(--vaadin-radius-m);
55+
padding: var(--vaadin-padding-xs);
56+
height: auto;
57+
align-self: center;
58+
box-shadow: 0 1px 4px -1px var(--aura-shadow-color);
59+
transition: opacity 120ms;
60+
}
61+
62+
vaadin-tabs::part(back-button) {
63+
inset-inline-start: 5px;
64+
}
65+
66+
vaadin-tabs::part(forward-button) {
67+
inset-inline-end: 5px;
68+
}
69+
70+
vaadin-tab {
71+
transition:
72+
color 120ms,
73+
border-color 120ms,
74+
background-color 120ms;
75+
--aura-surface-level: 8;
76+
--aura-surface-opacity: 0.7;
77+
border: 1px solid transparent;
78+
}
79+
80+
vaadin-tab:not([disabled], [selected]):hover {
81+
--vaadin-tab-color: var(--vaadin-text-color);
82+
}
83+
84+
vaadin-tab[selected] {
85+
--_accent: light-dark(
86+
oklch(from var(--aura-accent-light) calc(l + 0.2) c h / min(0.3, c / 2)),
87+
oklch(from var(--aura-accent-dark) calc(l - 0.2) c h / min(0.3, c / 2))
88+
);
89+
--_accent-border: light-dark(
90+
oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))),
91+
oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
92+
);
93+
--vaadin-tab-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
94+
--vaadin-tab-color: var(--aura-accent-text);
95+
border-color: var(--_accent-border);
96+
box-shadow: 0 1px 4px -1px var(--aura-shadow-color);
97+
}
98+
99+
/* Filled variant */
100+
101+
vaadin-tabs[theme~='filled'] vaadin-tab[selected] {
102+
--vaadin-tab-background: var(--aura-accent-color) border-box;
103+
--vaadin-tab-color: var(--aura-accent-contrast);
104+
outline-offset: 1px;
105+
}
106+
107+
/* Badges and other content that uses the palette inside a filled nav item */
108+
vaadin-tabs[theme~='filled'] vaadin-tab[selected] > :not([slot='tooltip']) {
109+
--vaadin-text-color: var(--vaadin-tab-color);
110+
--vaadin-text-color-secondary: var(--vaadin-tab-color);
111+
--aura-accent-color: var(--vaadin-tab-color);
112+
--aura-accent-text: var(--vaadin-tab-color);
113+
--aura-red: var(--vaadin-tab-color);
114+
--aura-red-text: var(--vaadin-tab-color);
115+
--aura-orange: var(--vaadin-tab-color);
116+
--aura-orange-text: var(--vaadin-tab-color);
117+
--aura-yellow: var(--vaadin-tab-color);
118+
--aura-yellow-text: var(--vaadin-tab-color);
119+
--aura-green: var(--vaadin-tab-color);
120+
--aura-green-text: var(--vaadin-tab-color);
121+
--aura-blue: var(--vaadin-tab-color);
122+
--aura-blue-text: var(--vaadin-tab-color);
123+
--aura-purple: var(--vaadin-tab-color);
124+
--aura-purple-text: var(--vaadin-tab-color);
125+
}

‎packages/aura/src/surface.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ vaadin-message-input,
1919
vaadin-radio-button::part(radio),
2020
vaadin-rich-text-editor,
2121
vaadin-side-nav-item::part(content),
22+
vaadin-tab,
2223
vaadin-upload,
2324
vaadin-upload-file,
2425
::part(input-field),

0 commit comments

Comments
 (0)