style(card): Card theme-styles mixin creates css variables.

Also updates relevant card mixins to use `theme.property` wherever a value from the theme map is used. (Omitting this results in css compilation errors).

PiperOrigin-RevId: 465115942

Author: sayris

packages/mdc-card/_elevated-card-theme.scss

@@ -63,6 +63,10 @@ $light-theme: (
 
 @mixin theme-styles($theme, $resolver: resolvers.$material) {
   @include theme.validate-theme-keys($light-theme, $theme);
+  $theme: keys.create-theme-properties(
+    $theme,
+    $prefix: $custom-property-prefix
+  );
 
   @include card-shared-theme.theme($theme, $resolver);
   @include card.outline(

packages/mdc-card/_filled-card-theme.scss

@@ -63,6 +63,10 @@ $light-theme: (
 
 @mixin theme-styles($theme, $resolver: resolvers.$material) {
   @include theme.validate-theme-keys($light-theme, $theme);
+  $theme: keys.create-theme-properties(
+    $theme,
+    $prefix: $custom-property-prefix
+  );
 
   @include card-shared-theme.theme($theme, $resolver);
   @include card.outline(

packages/mdc-card/_mixins.scss

@@ -381,12 +381,12 @@ $ripple-target: '.mdc-card__ripple';
   $feat-structure: feature-targeting.create-target($query, structure);
 
   @include feature-targeting.targets($feat-structure) {
-    border-width: $thickness;
+    @include theme.property(border-width, $thickness);
     border-style: solid;
   }
 
   @include feature-targeting.targets($feat-color) {
-    border-color: theme-color.prop-value($color);
+    @include theme.property(border-color, $color);
   }
 }
 

packages/mdc-card/_outlined-card-theme.scss

@@ -72,7 +72,10 @@ $light-theme: (
 
 @mixin theme-styles($theme, $resolver: resolvers.$material) {
   @include theme.validate-theme-keys($light-theme, $theme);
-
+  $theme: keys.create-theme-properties(
+    $theme,
+    $prefix: $custom-property-prefix
+  );
   @include _outline(
     $outline-width: map.get($theme, outline-width),
     $map: (