Skip to content

Commit f93e38b

Browse files
anezthesjouni
anezthes
and
jouni
authored
experiment: add card base styles and visual tests (#9603)
Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>
1 parent e2b3c59 commit f93e38b

29 files changed

+541
-256
lines changed

‎dev/card.html‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
import '@vaadin/icons';
1919
import '@vaadin/select';
2020
import '@vaadin/scroller';
21+
import '@vaadin/tooltip';
2122
import '@vaadin/vaadin-lumo-styles/icons.js';
2223

2324
const playground = document.querySelector('.playground');
@@ -109,7 +110,8 @@
109110
.replaceAll(/src=".+?"/g, 'src="..."')
110111
.replace(/Lapland is the[\s\S]+?.</, 'Lapland is the...<')
111112
.replace(/ fill="none"[\s\S]+?<\/svg>/, '>...</svg>')
112-
.replace(/ overflow=".*?"/, ''),
113+
.replace(/ overflow=".*?"/, '')
114+
.replace(/ role="region"/, ''),
113115
).replace('\n </vaadin-avatar>', '</vaadin-avatar>');
114116
}
115117

@@ -135,11 +137,15 @@
135137
</script>
136138

137139
<style>
138-
html {
139-
background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
140+
html:has([theme~='elevated']) {
141+
background-image: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
140142
}
141143

142-
body {
144+
[theme~='dark'] {
145+
color-scheme: dark;
146+
}
147+
148+
:where(body) {
143149
margin: var(--lumo-space-l);
144150
}
145151

@@ -173,9 +179,6 @@
173179
}
174180

175181
.options {
176-
display: flex;
177-
flex-wrap: wrap;
178-
gap: 0 2rem;
179182
margin-bottom: 3rem;
180183
}
181184

@@ -185,10 +188,10 @@
185188
font-size: 13px;
186189
line-height: 1.4;
187190
padding: 1rem;
188-
border: 1px solid var(--lumo-contrast-10pct);
189-
background-color: var(--lumo-shade);
190-
color: var(--lumo-tint-90pct);
191-
border-radius: var(--lumo-border-radius-l);
191+
border: 1px solid rgba(0, 0, 0, 0.1);
192+
background-color: rgba(0, 0, 0, 0.8);
193+
color: #fff;
194+
border-radius: 0.5em;
192195
width: fit-content;
193196
}
194197

@@ -202,7 +205,7 @@
202205
</head>
203206

204207
<body>
205-
<div class="options">
208+
<section class="section options">
206209
<vaadin-select label="Media" id="media"></vaadin-select>
207210
<template id="media-options">
208211
<img
@@ -340,7 +343,10 @@ <h2>Lapland</h2>
340343

341344
<vaadin-checkbox-group class="theme-variant" theme="horizontal" label="Theme Variant">
342345
<vaadin-checkbox label="Outlined" value="outlined"></vaadin-checkbox>
343-
<vaadin-checkbox label="Elevated" value="elevated"></vaadin-checkbox>
346+
<vaadin-checkbox label="Elevated" value="elevated">
347+
<vaadin-tooltip slot="tooltip" text="Also sets the background color of the page to make the elevated style more apparent"></vaadin-tooltip>
348+
<label slot="label">Elevated <vaadin-icon icon="lumo:error" style="scale: -1;"></vaadin-icon></label>
349+
</vaadin-checkbox>
344350
<vaadin-checkbox label="Dark" value="dark"></vaadin-checkbox>
345351
<vaadin-checkbox label="Horizontal" value="horizontal"></vaadin-checkbox>
346352
<vaadin-checkbox label="Stretch Media" value="stretch-media"></vaadin-checkbox>
@@ -351,11 +357,11 @@ <h2>Lapland</h2>
351357
<vaadin-checkbox label="Width" value="width"></vaadin-checkbox>
352358
<vaadin-checkbox label="Height" value="height"></vaadin-checkbox>
353359
</vaadin-checkbox-group>
354-
</div>
360+
</section>
355361

356-
<div class="output">
362+
<section class="section output">
357363
<vaadin-card class="playground"></vaadin-card>
358364
<div class="code-example"></div>
359-
</div>
365+
</section>
360366
</body>
361367
</html>

‎packages/card/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
"type": "module",
2222
"files": [
2323
"src",
24+
"!src/styles/*-base-styles.d.ts",
25+
"!src/styles/*-base-styles.js",
2426
"theme",
2527
"vaadin-*.d.ts",
2628
"vaadin-*.js",

‎packages/card/src/styles/vaadin-card-base-styles.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2024 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import type { CSSResult } from 'lit';
7+
8+
export const cardStyles: CSSResult;

‎packages/card/src/styles/vaadin-card-base-styles.js‎

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2024 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import { css } from 'lit';
7+
8+
export const cardStyles = css`
9+
@layer base {
10+
:host {
11+
--_content: 0;
12+
--_footer: 0;
13+
--_gap: var(--vaadin-card-gap, var(--vaadin-gap-container-block) var(--vaadin-gap-container-inline));
14+
--_header: max(var(--_header-prefix), var(--_title), var(--_subtitle), var(--_header-suffix));
15+
--_header-prefix: 0;
16+
--_header-suffix: 0;
17+
--_media: 0;
18+
--_padding: var(--vaadin-card-padding, var(--vaadin-padding));
19+
--_subtitle: 0;
20+
--_title: 0;
21+
background: var(--vaadin-card-background, var(--vaadin-background-container));
22+
border-radius: var(--vaadin-card-border-radius, var(--vaadin-radius-m));
23+
box-shadow: var(--vaadin-card-shadow, none);
24+
box-sizing: border-box;
25+
display: flex;
26+
flex-direction: column;
27+
gap: var(--_gap);
28+
padding: var(--_padding);
29+
position: relative;
30+
}
31+
32+
/* Could be an inset outline on the host as well, but let's reserve that for a potential focus outline */
33+
:host::before {
34+
border: var(--vaadin-card-border-width, 0) solid var(--vaadin-card-border-color, var(--vaadin-border-color));
35+
border-radius: inherit;
36+
content: '';
37+
inset: 0;
38+
pointer-events: none;
39+
position: absolute;
40+
}
41+
42+
:host([hidden]) {
43+
display: none !important;
44+
}
45+
46+
:host(:not([theme~='horizontal'])) {
47+
justify-content: space-between;
48+
}
49+
50+
:host([_m]) {
51+
--_media: 1;
52+
}
53+
54+
:host([_t]) {
55+
--_title: 1;
56+
}
57+
58+
:host([_st]) {
59+
--_subtitle: 1;
60+
}
61+
62+
:host([_h]) {
63+
--_header: 1;
64+
--_title: 0;
65+
--_subtitle: 0;
66+
}
67+
68+
:host([_hp]) {
69+
--_header-prefix: 1;
70+
}
71+
72+
:host([_hs]) {
73+
--_header-suffix: 1;
74+
}
75+
76+
:host([_c]) {
77+
--_content: 1;
78+
}
79+
80+
:host([_f]) {
81+
--_footer: 1;
82+
}
83+
84+
[part='media'],
85+
[part='header'],
86+
[part='content'],
87+
[part='footer'] {
88+
display: none;
89+
}
90+
91+
:host([_m]) [part='media'] {
92+
display: block;
93+
}
94+
95+
:host(:is([_h], [_t], [_st], [_hp], [_hs])) [part='header'] {
96+
align-items: center;
97+
display: grid;
98+
gap: var(--_gap);
99+
row-gap: 0;
100+
}
101+
102+
:host([_hs]) [part='header'] {
103+
grid-template-columns: 1fr auto;
104+
}
105+
106+
:host([_hp]) [part='header'] {
107+
grid-template-columns: repeat(var(--_header-prefix), auto) 1fr;
108+
}
109+
110+
:host([_c]) [part='content'] {
111+
display: block;
112+
}
113+
114+
:host([_f]) [part='footer'] {
115+
display: flex;
116+
flex-wrap: wrap;
117+
gap: var(--_gap);
118+
}
119+
120+
slot {
121+
border-radius: inherit;
122+
}
123+
124+
::slotted([slot='header-prefix']) {
125+
grid-column: 1;
126+
grid-row: 1 / span calc(var(--_title) + var(--_subtitle));
127+
}
128+
129+
::slotted([slot='header']),
130+
::slotted([slot='title']) {
131+
grid-column: calc(1 + var(--_header-prefix));
132+
grid-row: 1;
133+
}
134+
135+
::slotted([slot='title']) {
136+
color: var(--vaadin-card-title-color, var(--vaadin-color)) !important;
137+
font-size: var(--vaadin-card-title-font-size, inherit) !important;
138+
font-weight: var(--vaadin-card-title-font-weight, 500) !important;
139+
line-height: var(--vaadin-card-title-line-height, inherit) !important;
140+
margin: 0 !important;
141+
}
142+
143+
::slotted([slot='subtitle']) {
144+
color: var(--vaadin-card-subtitle-color, var(--vaadin-color-subtle)) !important;
145+
font-size: var(--vaadin-card-subtitle-font-size, inherit) !important;
146+
font-weight: var(--vaadin-card-subtitle-font-weight, 400) !important;
147+
line-height: var(--vaadin-card-subtitle-line-height, inherit) !important;
148+
margin: 0 !important;
149+
grid-column: calc(1 + var(--_header-prefix));
150+
grid-row: calc(1 + var(--_title));
151+
}
152+
153+
::slotted([slot='header-suffix']) {
154+
grid-column: calc(2 + var(--_header-prefix));
155+
grid-row: 1 / span calc(var(--_title) + var(--_subtitle));
156+
}
157+
158+
/* Horizontal */
159+
:host([theme~='horizontal']) {
160+
align-items: start;
161+
display: grid;
162+
grid-template-columns: repeat(var(--_media), minmax(auto, max-content)) 1fr;
163+
}
164+
165+
:host([theme~='horizontal'][_f]) {
166+
grid-template-rows: 1fr auto;
167+
}
168+
169+
:host([theme~='horizontal'][_c]) {
170+
grid-template-rows: repeat(var(--_header), auto) 1fr;
171+
}
172+
173+
[part='media'] {
174+
align-self: stretch;
175+
border-radius: inherit;
176+
grid-column: 1;
177+
grid-row: 1 / span calc(var(--_header) + var(--_content) + var(--_footer));
178+
}
179+
180+
[part='header'] {
181+
margin-bottom: auto;
182+
grid-column: calc(1 + var(--_media));
183+
grid-row: 1;
184+
}
185+
186+
[part='content'] {
187+
grid-column: calc(1 + var(--_media));
188+
grid-row: calc(1 + var(--_header));
189+
flex: auto;
190+
min-height: 0;
191+
}
192+
193+
[part='footer'] {
194+
border-radius: inherit;
195+
grid-column: calc(1 + var(--_media));
196+
grid-row: calc(1 + var(--_header) + var(--_content));
197+
}
198+
199+
:host([theme~='horizontal']) [part='footer'] {
200+
align-self: end;
201+
}
202+
203+
:host(:not([theme~='horizontal'])) ::slotted([slot='media']:is(img, video, svg)) {
204+
max-width: 100%;
205+
}
206+
207+
::slotted([slot='media']) {
208+
vertical-align: middle;
209+
}
210+
211+
:host(:is([theme~='cover-media'], [theme~='stretch-media']))
212+
::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
213+
aspect-ratio: var(--vaadin-card-media-aspect-ratio, 16/9);
214+
height: auto;
215+
object-fit: cover;
216+
/* Fixes an issue where an icon overflows the card boundaries on Firefox: https://github.com/vaadin/web-components/issues/8641 */
217+
overflow: hidden;
218+
width: 100%;
219+
}
220+
221+
:host([theme~='horizontal']:is([theme~='cover-media'], [theme~='stretch-media'])) {
222+
grid-template-columns: repeat(var(--_media), minmax(auto, 0.5fr)) 1fr;
223+
}
224+
225+
:host([theme~='horizontal']:is([theme~='cover-media'], [theme~='stretch-media']))
226+
::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
227+
aspect-ratio: auto;
228+
height: 100%;
229+
}
230+
231+
:host([theme~='cover-media']) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
232+
border-radius: inherit;
233+
border-end-end-radius: 0;
234+
border-end-start-radius: 0;
235+
margin-inline: calc(var(--_padding) * -1);
236+
margin-top: calc(var(--_padding) * -1);
237+
max-width: none;
238+
width: calc(100% + var(--_padding) * 2);
239+
}
240+
241+
:host([theme~='horizontal'][theme~='cover-media']) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
242+
border-radius: inherit;
243+
border-end-end-radius: 0;
244+
border-start-end-radius: 0;
245+
height: calc(100% + var(--_padding) * 2);
246+
margin-inline-end: 0;
247+
width: calc(100% + var(--_padding));
248+
}
249+
250+
/* Scroller in content */
251+
[part='content'] ::slotted(vaadin-scroller) {
252+
margin-inline: calc(var(--_padding) * -1);
253+
padding-inline: var(--_padding);
254+
}
255+
256+
[part='content'] ::slotted(vaadin-scroller)::before,
257+
[part='content'] ::slotted(vaadin-scroller)::after {
258+
margin-inline: calc(var(--_padding) * -1);
259+
}
260+
261+
/* Outlined */
262+
:host([theme~='outlined']) {
263+
--vaadin-card-border-width: 1px;
264+
}
265+
266+
/* Elevated */
267+
:host([theme~='elevated']) {
268+
--vaadin-card-background: var(--vaadin-background-color);
269+
box-shadow: var(--vaadin-card-shadow, 0 1px 4px -1px rgba(0, 0, 0, 0.3));
270+
}
271+
}
272+
`;

0 commit comments

Comments
 (0)