chore(card): add styles and tests

PiperOrigin-RevId: 576660710

Author: asyncLiz

labs/card/elevated-card_test.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// import 'jasmine'; (google3-only)
+
+import {createTokenTests} from '../../testing/tokens.js';
+
+import {MdElevatedCard} from './elevated-card.js';
+
+describe('<md-elevated-card>', () => {
+  describe('.styles', () => {
+    createTokenTests(MdElevatedCard.styles);
+  });
+});

labs/card/filled-card_test.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// import 'jasmine'; (google3-only)
+
+import {createTokenTests} from '../../testing/tokens.js';
+
+import {MdFilledCard} from './filled-card.js';
+
+describe('<md-filled-card>', () => {
+  describe('.styles', () => {
+    createTokenTests(MdFilledCard.styles);
+  });
+});

labs/card/internal/_elevated-card.scss

@@ -27,5 +27,9 @@
 @mixin styles() {
   $tokens: tokens.md-comp-elevated-card-values();
 
-  // TODO(b/261201808): add styles
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-elevated-card-#{$token}, #{$value});
+    }
+  }
 }

labs/card/internal/_filled-card.scss

@@ -27,5 +27,9 @@
 @mixin styles() {
   $tokens: tokens.md-comp-filled-card-values();
 
-  // TODO(b/261201808): add styles
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-filled-card-#{$token}, #{$value});
+    }
+  }
 }

labs/card/internal/_outlined-card.scss

@@ -27,5 +27,13 @@
 @mixin styles() {
   $tokens: tokens.md-comp-outlined-card-values();
 
-  // TODO(b/261201808): add styles
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-outlined-card-#{$token}, #{$value});
+    }
+  }
+
+  .container {
+    outline: var(--_outline-width) solid var(--_outline-color);
+  }
 }

labs/card/internal/_shared.scss

@@ -3,8 +3,38 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use '../../../elevation/elevation';
+// go/keep-sorted end
+
 @mixin styles() {
   :host {
+    border-radius: var(--_container-shape);
     display: flex;
+    padding: 16px;
+    position: relative;
+  }
+
+  // Separate element will be needed for disabled opacities (b/307361748)
+  .container {
+    background: var(--_container-color);
+    border-radius: inherit;
+    inset: 0;
+    position: absolute;
+  }
+
+  md-elevation {
+    border-radius: inherit;
+
+    @include elevation.theme(
+      (
+        'level': var(--_container-elevation),
+        'shadow-color': var(--_container-shadow-color),
+      )
+    );
+  }
+
+  slot {
+    z-index: 0; // Place content above background elements
   }
 }

labs/card/internal/card.ts

@@ -4,13 +4,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../../elevation/elevation.js';
+
 import {html, LitElement} from 'lit';
 
 /**
  * A card component.
  */
 export class Card extends LitElement {
   protected override render() {
-    return html`<slot></slot>`;
+    return html`
+      <md-elevation part="elevation"></md-elevation>
+      <div class="container"></div>
+      <slot></slot>
+    `;
   }
 }

labs/card/outlined-card_test.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// import 'jasmine'; (google3-only)
+
+import {createTokenTests} from '../../testing/tokens.js';
+
+import {MdOutlinedCard} from './outlined-card.js';
+
+describe('<md-outlined-card>', () => {
+  describe('.styles', () => {
+    createTokenTests(MdOutlinedCard.styles);
+  });
+});