diff --git a/labs/card/_elevated-card.scss b/labs/card/_elevated-card.scss new file mode 100644 index 00000000000..e608761c565 --- /dev/null +++ b/labs/card/_elevated-card.scss @@ -0,0 +1,6 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +@forward './internal/elevated-card' show theme; diff --git a/labs/card/_filled-card.scss b/labs/card/_filled-card.scss new file mode 100644 index 00000000000..3a3870447f5 --- /dev/null +++ b/labs/card/_filled-card.scss @@ -0,0 +1,6 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +@forward './internal/filled-card' show theme; diff --git a/labs/card/_outlined-card.scss b/labs/card/_outlined-card.scss new file mode 100644 index 00000000000..0e8765310f6 --- /dev/null +++ b/labs/card/_outlined-card.scss @@ -0,0 +1,6 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +@forward './internal/outlined-card' show theme; diff --git a/labs/card/elevated-card.ts b/labs/card/elevated-card.ts new file mode 100644 index 00000000000..9955133c67f --- /dev/null +++ b/labs/card/elevated-card.ts @@ -0,0 +1,26 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import {customElement} from 'lit/decorators.js'; + +import {Card} from './internal/card.js'; +import {styles as elevatedStyles} from './internal/elevated-styles.css.js'; +import {styles as sharedStyles} from './internal/shared-styles.css.js'; + +declare global { + interface HTMLElementTagNameMap { + 'md-elevated-card': MdElevatedCard; + } +} + +/** + * @final + * @suppress {visibility} + */ +@customElement('md-elevated-card') +export class MdElevatedCard extends Card { + static override styles = [sharedStyles, elevatedStyles]; +} diff --git a/labs/card/filled-card.ts b/labs/card/filled-card.ts new file mode 100644 index 00000000000..c2ecd169ba6 --- /dev/null +++ b/labs/card/filled-card.ts @@ -0,0 +1,26 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import {customElement} from 'lit/decorators.js'; + +import {Card} from './internal/card.js'; +import {styles as filledStyles} from './internal/filled-styles.css.js'; +import {styles as sharedStyles} from './internal/shared-styles.css.js'; + +declare global { + interface HTMLElementTagNameMap { + 'md-filled-card': MdFilledCard; + } +} + +/** + * @final + * @suppress {visibility} + */ +@customElement('md-filled-card') +export class MdFilledCard extends Card { + static override styles = [sharedStyles, filledStyles]; +} diff --git a/labs/card/internal/_elevated-card.scss b/labs/card/internal/_elevated-card.scss new file mode 100644 index 00000000000..52e7c1f7900 --- /dev/null +++ b/labs/card/internal/_elevated-card.scss @@ -0,0 +1,31 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use 'sass:list'; +// go/keep-sorted end +// go/keep-sorted start +@use '../../../tokens'; +// go/keep-sorted end + +@mixin theme($tokens) { + $supported-tokens: tokens.$md-comp-elevated-card-supported-tokens; + + @each $token, $value in $tokens { + @if list.index($supported-tokens, $token) == null { + @error 'Elevated card `#{$token}` is not a supported token.'; + } + + @if $value { + --md-elevated-card-#{$token}: #{$value}; + } + } +} + +@mixin styles() { + $tokens: tokens.md-comp-elevated-card-values(); + + // TODO(b/261201808): add styles +} diff --git a/labs/card/internal/_filled-card.scss b/labs/card/internal/_filled-card.scss new file mode 100644 index 00000000000..e7bc084734d --- /dev/null +++ b/labs/card/internal/_filled-card.scss @@ -0,0 +1,31 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use 'sass:list'; +// go/keep-sorted end +// go/keep-sorted start +@use '../../../tokens'; +// go/keep-sorted end + +@mixin theme($tokens) { + $supported-tokens: tokens.$md-comp-filled-card-supported-tokens; + + @each $token, $value in $tokens { + @if list.index($supported-tokens, $token) == null { + @error 'Filled card `#{$token}` is not a supported token.'; + } + + @if $value { + --md-filled-card-#{$token}: #{$value}; + } + } +} + +@mixin styles() { + $tokens: tokens.md-comp-filled-card-values(); + + // TODO(b/261201808): add styles +} diff --git a/labs/card/internal/_outlined-card.scss b/labs/card/internal/_outlined-card.scss new file mode 100644 index 00000000000..316a2be1656 --- /dev/null +++ b/labs/card/internal/_outlined-card.scss @@ -0,0 +1,31 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use 'sass:list'; +// go/keep-sorted end +// go/keep-sorted start +@use '../../../tokens'; +// go/keep-sorted end + +@mixin theme($tokens) { + $supported-tokens: tokens.$md-comp-outlined-card-supported-tokens; + + @each $token, $value in $tokens { + @if list.index($supported-tokens, $token) == null { + @error 'Outlined card `#{$token}` is not a supported token.'; + } + + @if $value { + --md-outlined-card-#{$token}: #{$value}; + } + } +} + +@mixin styles() { + $tokens: tokens.md-comp-outlined-card-values(); + + // TODO(b/261201808): add styles +} diff --git a/labs/card/internal/_shared.scss b/labs/card/internal/_shared.scss new file mode 100644 index 00000000000..d353432f835 --- /dev/null +++ b/labs/card/internal/_shared.scss @@ -0,0 +1,10 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +@mixin styles() { + :host { + display: flex; + } +} diff --git a/labs/card/internal/card.ts b/labs/card/internal/card.ts new file mode 100644 index 00000000000..e13d16a01af --- /dev/null +++ b/labs/card/internal/card.ts @@ -0,0 +1,16 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import {html, LitElement} from 'lit'; + +/** + * A card component. + */ +export class Card extends LitElement { + protected override render() { + return html``; + } +} diff --git a/labs/card/internal/elevated-styles.scss b/labs/card/internal/elevated-styles.scss new file mode 100644 index 00000000000..96fc083c75d --- /dev/null +++ b/labs/card/internal/elevated-styles.scss @@ -0,0 +1,10 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use './elevated-card'; +// go/keep-sorted end + +@include elevated-card.styles; diff --git a/labs/card/internal/filled-styles.scss b/labs/card/internal/filled-styles.scss new file mode 100644 index 00000000000..766d1732ce9 --- /dev/null +++ b/labs/card/internal/filled-styles.scss @@ -0,0 +1,10 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use './filled-card'; +// go/keep-sorted end + +@include filled-card.styles; diff --git a/labs/card/internal/outlined-styles.scss b/labs/card/internal/outlined-styles.scss new file mode 100644 index 00000000000..6a7f2654234 --- /dev/null +++ b/labs/card/internal/outlined-styles.scss @@ -0,0 +1,10 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use './outlined-card'; +// go/keep-sorted end + +@include outlined-card.styles; diff --git a/labs/card/internal/shared-styles.scss b/labs/card/internal/shared-styles.scss new file mode 100644 index 00000000000..b7d8005fd26 --- /dev/null +++ b/labs/card/internal/shared-styles.scss @@ -0,0 +1,10 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use './shared'; +// go/keep-sorted end + +@include shared.styles; diff --git a/labs/card/outlined-card.ts b/labs/card/outlined-card.ts new file mode 100644 index 00000000000..a8a993b0c2b --- /dev/null +++ b/labs/card/outlined-card.ts @@ -0,0 +1,26 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import {customElement} from 'lit/decorators.js'; + +import {Card} from './internal/card.js'; +import {styles as outlinedStyles} from './internal/outlined-styles.css.js'; +import {styles as sharedStyles} from './internal/shared-styles.css.js'; + +declare global { + interface HTMLElementTagNameMap { + 'md-outlined-card': MdOutlinedCard; + } +} + +/** + * @final + * @suppress {visibility} + */ +@customElement('md-outlined-card') +export class MdOutlinedCard extends Card { + static override styles = [sharedStyles, outlinedStyles]; +}