chore(card): add Sass theming apis

PiperOrigin-RevId: 575887392

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;

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;

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;

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];
+}

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];
+}

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
+}

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
+}

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
+}

labs/card/internal/_shared.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  :host {
+    display: flex;
+  }
+}

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`<slot></slot>`;
+  }
+}

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;

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;

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;

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;

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];
+}