diff --git a/dev/card.html b/dev/card.html new file mode 100644 index 0000000000..a8d3a9bee0 --- /dev/null +++ b/dev/card.html @@ -0,0 +1,528 @@ + + + + + + + Card + + + + + + + + + +

Default

+
+ + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

+ Label +
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit incididunt ut.

+ Label +
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit incididunt ut.

+ Label +
+ +
+ +
+ + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ +
+ + + + +
+ +
+

Page Views

+ +
+
+

12,450

+ + 15.8% + + +
+ + +
+

Total Revenue

+ +
+
+

$363.95

+ + 34.0% + + +
+ + +
+

Bounce Rate

+ +
+
+

86.5%

+ + 24.3% + + +
+ +
+ + + + +

Outlined

+
+ + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit tempor incididunt ut.

+ Label +
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

+ Label +
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

+ Label +
+ +
+ + +
+ + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ +
+ + + +
+ +
+

Page Views

+ +
+
+

12,450

+ + 15.8% + + +
+ + +
+

Total Revenue

+ +
+
+

$363.95

+ + 34.0% + + +
+ + +
+

Bounce Rate

+ +
+
+

86.5%

+ + 24.3% + + +
+ +
+ + + + +

Elevated

+
+ + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit tempor incididunt ut.

+ Label +
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit tempor incididunt ut.

+ Label +
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

+ Label +
+ +
+ + +
+ + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ +
+ + + +
+ +
+

Page Views

+ +
+
+

12,450

+ + 15.8% + + +
+ + +
+

Total Revenue

+ +
+
+

$363.95

+ + 34.0% + + +
+ + +
+

Bounce Rate

+ +
+
+

86.5%

+ + 24.3% + + +
+ +
+ + + + +

Outlined & Elevated

+
+ + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit tempor incididunt ut.

+ Label +
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit tempor incididunt ut.

+ Label +
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

+ Label +
+ +
+ + +
+ + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ + + + +
+

Card Title

+

Lorem ipsum dolor sit amet

+
+ +
+ + + + +
+ +
+

Page Views

+ +
+
+

12,450

+ + 15.8% + + +
+ + +
+

Total Revenue

+ +
+
+

$363.95

+ + 34.0% + + +
+ + +
+

Bounce Rate

+ +
+
+

86.5%

+ + 24.3% + + +
+ +
+ + + + + + + diff --git a/packages/card/LICENSE b/packages/card/LICENSE new file mode 100644 index 0000000000..7c7442668e --- /dev/null +++ b/packages/card/LICENSE @@ -0,0 +1,190 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + Copyright 2024 Vaadin Ltd. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/packages/card/README.md b/packages/card/README.md new file mode 100644 index 0000000000..c995a29867 --- /dev/null +++ b/packages/card/README.md @@ -0,0 +1,49 @@ +# @vaadin/card + +A visual content container. + +> ⚠️ This component is experimental and the API may change. In order to use it, enable the feature flag by setting `window.Vaadin.cardComponent = true`. + +[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/card) + +[![npm version](https://badgen.net/npm/v/@vaadin/card)](https://www.npmjs.com/package/@vaadin/card) + +```html + + +
+

Card Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

+ Label +
+ +``` + +[Screenshot of vaadin-card](https://vaadin.com/docs/latest/components/card) + +## Installation + +Install the component: + +```sh +npm i @vaadin/card +``` + +Once installed, import the component in your application: + +```js +import '@vaadin/card'; +``` + +## Contributing + +Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components. + +## License + +Apache License 2.0 + +Vaadin collects usage statistics at development time to improve this product. +For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics. diff --git a/packages/card/package.json b/packages/card/package.json new file mode 100644 index 0000000000..cf583d8982 --- /dev/null +++ b/packages/card/package.json @@ -0,0 +1,52 @@ +{ + "name": "@vaadin/card", + "version": "24.6.0-alpha8", + "publishConfig": { + "access": "public" + }, + "description": "vaadin-card", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "https://github.com/vaadin/web-components.git", + "directory": "packages/card" + }, + "author": "Vaadin Ltd", + "homepage": "https://vaadin.com/components", + "bugs": { + "url": "https://github.com/vaadin/web-components/issues" + }, + "main": "vaadin-card.js", + "module": "vaadin-card.js", + "type": "module", + "files": [ + "src", + "theme", + "vaadin-*.d.ts", + "vaadin-*.js", + "web-types.json", + "web-types.lit.json" + ], + "keywords": [ + "Vaadin", + "card", + "web-components", + "web-component" + ], + "dependencies": { + "@vaadin/component-base": "24.6.0-alpha8", + "@vaadin/vaadin-lumo-styles": "24.6.0-alpha8", + "@vaadin/vaadin-material-styles": "24.6.0-alpha8", + "@vaadin/vaadin-themable-mixin": "24.6.0-alpha8", + "lit": "^3.0.0" + }, + "devDependencies": { + "@vaadin/chai-plugins": "24.6.0-alpha8", + "@vaadin/testing-helpers": "^1.0.0", + "sinon": "^18.0.0" + }, + "web-types": [ + "web-types.json", + "web-types.lit.json" + ] +} diff --git a/packages/card/screenshot.png b/packages/card/screenshot.png new file mode 100644 index 0000000000..46370a6011 Binary files /dev/null and b/packages/card/screenshot.png differ diff --git a/packages/card/src/vaadin-card.d.ts b/packages/card/src/vaadin-card.d.ts new file mode 100644 index 0000000000..95dc96f1f7 --- /dev/null +++ b/packages/card/src/vaadin-card.d.ts @@ -0,0 +1,26 @@ +/** + * @license + * Copyright (c) 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; + +/** + * `` is a visual content container. + * + * ```html + * + *
Card content
+ * + * ``` + */ +declare class Card extends ElementMixin(ThemableMixin(HTMLElement)) {} + +declare global { + interface HTMLElementTagNameMap { + 'vaadin-card': Card; + } +} + +export { Card }; diff --git a/packages/card/src/vaadin-card.js b/packages/card/src/vaadin-card.js new file mode 100644 index 0000000000..d8b0694c8d --- /dev/null +++ b/packages/card/src/vaadin-card.js @@ -0,0 +1,55 @@ +/** + * @license + * Copyright (c) 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +import { css, html, LitElement } from 'lit'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; +import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; + +/** + * `` is a visual content container. + * + * ```html + * + *
Card content
+ * + * ``` + * + * @customElement + * @extends HTMLElement + * @mixes ElementMixin + * @mixes ThemableMixin + */ +class Card extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) { + static get is() { + return 'vaadin-card'; + } + + static get styles() { + return css` + :host { + display: block; + } + + :host([hidden]) { + display: none !important; + } + `; + } + + static get experimental() { + return true; + } + + /** @protected */ + render() { + return html``; + } +} + +defineCustomElement(Card); + +export { Card }; diff --git a/packages/card/test/card.test.ts b/packages/card/test/card.test.ts new file mode 100644 index 0000000000..167c70c638 --- /dev/null +++ b/packages/card/test/card.test.ts @@ -0,0 +1,28 @@ +import { expect } from '@vaadin/chai-plugins'; +import { fixtureSync } from '@vaadin/testing-helpers'; +import '../vaadin-card.js'; +import type { Card } from '../vaadin-card.js'; + +window.Vaadin.featureFlags ||= {}; +window.Vaadin.featureFlags.cardComponent = true; + +describe('vaadin-card', () => { + let card: Card; + + describe('custom element definition', () => { + let tagName: string; + + beforeEach(() => { + card = fixtureSync(''); + tagName = card.tagName.toLowerCase(); + }); + + it('should be defined in custom element registry', () => { + expect(customElements.get(tagName)).to.be.ok; + }); + + it('should have a valid static "is" getter', () => { + expect((customElements.get(tagName) as any).is).to.equal(tagName); + }); + }); +}); diff --git a/packages/card/test/visual/lumo/card.test.js b/packages/card/test/visual/lumo/card.test.js new file mode 100644 index 0000000000..76faabfcd1 --- /dev/null +++ b/packages/card/test/visual/lumo/card.test.js @@ -0,0 +1,37 @@ +import { fixtureSync } from '@vaadin/testing-helpers'; +import { visualDiff } from '@web/test-runner-visual-regression'; +import '../../../theme/lumo/vaadin-card.js'; + +window.Vaadin.featureFlags.cardComponent = true; + +describe('card', () => { + let div, element; + + beforeEach(() => { + div = document.createElement('div'); + div.style.display = 'inline-block'; + div.style.padding = '20px'; + element = fixtureSync('
Card
', div); + }); + + describe('theme', () => { + it('default', async () => { + await visualDiff(div, 'theme-default'); + }); + + it('outlined', async () => { + element.setAttribute('theme', 'outlined'); + await visualDiff(div, 'theme-outlined'); + }); + + it('elevated', async () => { + element.setAttribute('theme', 'elevated'); + await visualDiff(div, 'theme-elevated'); + }); + + it('outlined elevated', async () => { + element.setAttribute('theme', 'outlined elevated'); + await visualDiff(div, 'theme-outlined-elevated'); + }); + }); +}); diff --git a/packages/card/test/visual/lumo/screenshots/card/baseline/theme-default.png b/packages/card/test/visual/lumo/screenshots/card/baseline/theme-default.png new file mode 100644 index 0000000000..3c0a7b5212 Binary files /dev/null and b/packages/card/test/visual/lumo/screenshots/card/baseline/theme-default.png differ diff --git a/packages/card/test/visual/lumo/screenshots/card/baseline/theme-elevated.png b/packages/card/test/visual/lumo/screenshots/card/baseline/theme-elevated.png new file mode 100644 index 0000000000..190e6fb131 Binary files /dev/null and b/packages/card/test/visual/lumo/screenshots/card/baseline/theme-elevated.png differ diff --git a/packages/card/test/visual/lumo/screenshots/card/baseline/theme-outlined-elevated.png b/packages/card/test/visual/lumo/screenshots/card/baseline/theme-outlined-elevated.png new file mode 100644 index 0000000000..6cf38ab4f6 Binary files /dev/null and b/packages/card/test/visual/lumo/screenshots/card/baseline/theme-outlined-elevated.png differ diff --git a/packages/card/test/visual/lumo/screenshots/card/baseline/theme-outlined.png b/packages/card/test/visual/lumo/screenshots/card/baseline/theme-outlined.png new file mode 100644 index 0000000000..959322ccf7 Binary files /dev/null and b/packages/card/test/visual/lumo/screenshots/card/baseline/theme-outlined.png differ diff --git a/packages/card/test/visual/material/card.test.js b/packages/card/test/visual/material/card.test.js new file mode 100644 index 0000000000..b049721903 --- /dev/null +++ b/packages/card/test/visual/material/card.test.js @@ -0,0 +1,37 @@ +import { fixtureSync } from '@vaadin/testing-helpers'; +import { visualDiff } from '@web/test-runner-visual-regression'; +import '../../../theme/material/vaadin-card.js'; + +window.Vaadin.featureFlags.cardComponent = true; + +describe('card', () => { + let div, element; + + beforeEach(() => { + div = document.createElement('div'); + div.style.display = 'inline-block'; + div.style.padding = '20px'; + element = fixtureSync('
Card
', div); + }); + + describe('theme', () => { + it('default', async () => { + await visualDiff(div, 'theme-default'); + }); + + it('outlined', async () => { + element.setAttribute('theme', 'outlined'); + await visualDiff(div, 'theme-outlined'); + }); + + it('elevated', async () => { + element.setAttribute('theme', 'elevated'); + await visualDiff(div, 'theme-elevated'); + }); + + it('outlined elevated', async () => { + element.setAttribute('theme', 'outlined elevated'); + await visualDiff(div, 'theme-outlined-elevated'); + }); + }); +}); diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-default.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-default.png new file mode 100644 index 0000000000..7b1d7bc9a3 Binary files /dev/null and b/packages/card/test/visual/material/screenshots/card/baseline/theme-default.png differ diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-elevated.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-elevated.png new file mode 100644 index 0000000000..6984b0ec90 Binary files /dev/null and b/packages/card/test/visual/material/screenshots/card/baseline/theme-elevated.png differ diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined-elevated.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined-elevated.png new file mode 100644 index 0000000000..937d0a2d4c Binary files /dev/null and b/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined-elevated.png differ diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined.png new file mode 100644 index 0000000000..e407d101a4 Binary files /dev/null and b/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined.png differ diff --git a/packages/card/theme/lumo/vaadin-card-styles.js b/packages/card/theme/lumo/vaadin-card-styles.js new file mode 100644 index 0000000000..da04ea6760 --- /dev/null +++ b/packages/card/theme/lumo/vaadin-card-styles.js @@ -0,0 +1,56 @@ +import '@vaadin/vaadin-lumo-styles/color.js'; +import '@vaadin/vaadin-lumo-styles/style.js'; +import { addGlobalThemeStyles, css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'; + +const cardProps = css` + html { + --vaadin-card-background: var(--lumo-shade-5pct); + --vaadin-card-border-radius: var(--lumo-border-radius-l); + --vaadin-card-border-width: 0; + --vaadin-card-border-color: var(--lumo-contrast-20pct); + } +`; + +addGlobalThemeStyles('card-props', cardProps); + +const card = css` + :host { + background: var(--vaadin-card-background); + border-radius: var(--vaadin-card-border-radius); + box-shadow: var(--vaadin-card-box-shadow); + position: relative; + } + + /* Could be an inset outline on the host as well, but rounded outlines only work since Safari 16.4 */ + :host::before { + content: ''; + position: absolute; + inset: 0; + z-index: 999; + pointer-events: none; + border-radius: inherit; + border: var(--vaadin-card-border, var(--vaadin-card-border-width) solid var(--vaadin-card-border-color)); + } + + :host([theme~='outlined']) { + --vaadin-card-border-width: 1px; + --vaadin-card-background: transparent; + } + + :host([theme~='elevated']) { + --vaadin-card-background: var(--lumo-tint-10pct); + --vaadin-card-box-shadow: var(--lumo-box-shadow-xs); + /* TODO I would like to update --lumo-box-shadow-xs to this (30pct instead of 50pct): */ + --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-30pct); + } + + :host([theme~='elevated'][theme~='outlined']) { + box-shadow: + inset 0 -1px 0 0 var(--lumo-shade-10pct), + var(--vaadin-card-box-shadow); + } +`; + +registerStyles('vaadin-card', card, { moduleId: 'lumo-card' }); + +export { card }; diff --git a/packages/card/theme/lumo/vaadin-card.js b/packages/card/theme/lumo/vaadin-card.js new file mode 100644 index 0000000000..e3164eb32b --- /dev/null +++ b/packages/card/theme/lumo/vaadin-card.js @@ -0,0 +1,2 @@ +import './vaadin-card-styles.js'; +import '../../src/vaadin-card.js'; diff --git a/packages/card/theme/material/vaadin-card-styles.js b/packages/card/theme/material/vaadin-card-styles.js new file mode 100644 index 0000000000..e4c01c7055 --- /dev/null +++ b/packages/card/theme/material/vaadin-card-styles.js @@ -0,0 +1,48 @@ +import '@vaadin/vaadin-material-styles/color.js'; +import '@vaadin/vaadin-material-styles/shadow.js'; +import { addGlobalThemeStyles, css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'; + +const cardProps = css` + html { + --vaadin-card-background: var(--material-secondary-background-color); + --vaadin-card-border-radius: 8px; + --vaadin-card-border-width: 0; + --vaadin-card-border-color: var(--material-divider-color); + } +`; + +addGlobalThemeStyles('card-props', cardProps); + +const card = css` + :host { + background: var(--vaadin-card-background); + border-radius: var(--vaadin-card-border-radius); + box-shadow: var(--vaadin-card-box-shadow); + position: relative; + } + + /* Could be an inset outline on the host as well, but rounded outlines only work since Safari 16.4 */ + :host::before { + content: ''; + position: absolute; + inset: 0; + z-index: 999; + pointer-events: none; + border-radius: inherit; + border: var(--vaadin-card-border, var(--vaadin-card-border-width) solid var(--vaadin-card-border-color)); + } + + :host([theme~='outlined']) { + --vaadin-card-border-width: 1px; + --vaadin-card-background: transparent; + } + + :host([theme~='elevated']) { + --vaadin-card-background: var(--material-background-color); + --vaadin-card-box-shadow: var(--material-shadow-elevation-2dp); + } +`; + +registerStyles('vaadin-card', card, { moduleId: 'material-card' }); + +export { card }; diff --git a/packages/card/theme/material/vaadin-card.js b/packages/card/theme/material/vaadin-card.js new file mode 100644 index 0000000000..e3164eb32b --- /dev/null +++ b/packages/card/theme/material/vaadin-card.js @@ -0,0 +1,2 @@ +import './vaadin-card-styles.js'; +import '../../src/vaadin-card.js'; diff --git a/packages/card/vaadin-card.d.ts b/packages/card/vaadin-card.d.ts new file mode 100644 index 0000000000..01571e63db --- /dev/null +++ b/packages/card/vaadin-card.d.ts @@ -0,0 +1 @@ +export * from './src/vaadin-card.js'; diff --git a/packages/card/vaadin-card.js b/packages/card/vaadin-card.js new file mode 100644 index 0000000000..a0e3ba45ae --- /dev/null +++ b/packages/card/vaadin-card.js @@ -0,0 +1,3 @@ +import './theme/lumo/vaadin-card.js'; + +export * from './src/vaadin-card.js';