@graupl/core 1.0.0-beta.22 → 1.0.0-beta.24

package/src/scss/component/card/_defaults.scss

@@ -6,20 +6,43 @@
 // They should not be used to define direct property values (i.e. font-size, color, etc.).
 // Those should be defined as custom properties in the `_variables.scss` file.
 
+@use "../../defaults" as root-defaults;
+@use "../../functions/theme";
+@use "sass:map";
+
 // Card selectors.
-$card-selector: ".card" !default;
-$card-image-selector: ".card-image" !default;
-$card-content-selector: ".card-content" !default;
-$card-body-selector: ".card-body" !default;
-$card-header-selector: ".card-header" !default;
-$card-footer-selector: ".card-footer" !default;
-$card-title-selector: ".card-title" !default;
-$horizontal-card-selector: ".horizontal" !default;
-$horizontal-card-left-selector: ".left" !default;
-$horizontal-card-right-selector: ".right" !default;
-$vertical-card-top-selector: ".top" !default;
-$vertical-card-bottom-selector: ".bottom" !default;
-$inverse-card-selector: ".inverse" !default;
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
+$themeable: false !default;
+$card-selector-base: $selector-base !default;
+$card-selector: "card" !default;
+$card-theme-selector-base: $modifier-selector-base !default;
+$card-theme-selector-prefix: "" !default;
+$card-image-selector-base: $selector-base !default;
+$card-image-selector: "card-image" !default;
+$card-content-selector-base: $selector-base !default;
+$card-content-selector: "card-content" !default;
+$card-body-selector-base: $selector-base !default;
+$card-body-selector: "card-body" !default;
+$card-header-selector-base: $selector-base !default;
+$card-header-selector: "card-header" !default;
+$card-footer-selector-base: $selector-base !default;
+$card-footer-selector: "card-footer" !default;
+$card-title-selector-base: $selector-base !default;
+$card-title-selector: "card-title" !default;
+$horizontal-card-selector-base: $modifier-selector-base !default;
+$horizontal-card-selector: "horizontal" !default;
+$horizontal-card-left-selector-base: $modifier-selector-base !default;
+$horizontal-card-left-selector: "left" !default;
+$horizontal-card-right-selector-base: $modifier-selector-base !default;
+$horizontal-card-right-selector: "right" !default;
+$vertical-card-top-selector-base: $modifier-selector-base !default;
+$vertical-card-top-selector: "top" !default;
+$vertical-card-bottom-selector-base: $modifier-selector-base !default;
+$vertical-card-bottom-selector: "bottom" !default;
+$inverse-card-selector-base: $modifier-selector-base !default;
+$inverse-card-selector: "inverse" !default;
 
 // Card properties.
 $card-transform: none !default;
@@ -30,3 +53,31 @@ $card-content-ratio: 1fr !default;
 $card-image-ratio: auto !default;
 $horizontal-card-content-ratio: 3fr !default;
 $horizontal-card-image-ratio: 2fr !default;
+
+// Card transform properties.
+$card-item-content-transform: translateY(-100%) !default;
+$card-item-content-open-transform: translateY(0) !default;
+
+// Card state theme defaults.
+// This map is used to define the default colour shades for the
+// themed card bases.
+//
+// e.g.
+// Primary cards will use primary--900 as the text colour and primary--800 as the title colour.
+//
+// Secondary/tertiary cards will use the same shade for their respective colours.
+$-card-theme-mappings: (
+  color: 900,
+  title-color: 700,
+  border-color: 700,
+);
+$card-theme-mappings: () !default;
+
+// Merge the custom card state theme map with the default one.
+@if $generate-base-theme-map {
+  $card-theme-mappings: map.merge($-card-theme-mappings, $card-theme-mappings);
+}
+
+$-card-theme-map: theme.generate-property-map($card-theme-mappings);
+$card-theme-map: () !default;
+$card-theme-map: map.deep-merge($-card-theme-map, $card-theme-map);

package/src/scss/component/card/_index.scss

@@ -1,14 +1,226 @@
 // @graupl/core card component styles.
+//
+// This module provides the card component styles for vertical and horizontal layouts.
+//
+// The following selectors are generated by default:
+// - `.card`: The card container.
+// - `.card-image`: The card image wrapper.
+// - `.card-content`: The card content wrapper.
+// - `.card-body`: The main body region.
+// - `.card-header`: The header region.
+// - `.card-footer`: The footer region.
+// - `.card-title`: The title element.
+// - `.horizontal`: A modifier to use a horizontal layout for the card.
+// - `.left`: A modifier to position the image on the left in a horizontal layout.
+// - `.right`: A modifier to position the image on the right in a horizontal layout.
+// - `.top`: A modifier to position the image on the top in a vertical layout.
+// - `.bottom`: A modifier to position the image on the bottom in a vertical layout.
+// - `.inverse`: A modifier to invert the image/content positioning.
+//
+// The following custom properties can be used to customize the card component:
+// | Property                                  | Description                                            | Default Value                                                                                                                                                 |
+// | ---                                       | ---                                                    | ---                                                                                                                                                           |
+// | `--graupl-card-padding-x`                 | Horizontal padding of the card.                        | `var(--graupl-spacer-0)`                                                                                                                                      |
+// | `--graupl-card-padding-y`                 | Vertical padding of the card.                          | `var(--graupl-spacer-0)`                                                                                                                                      |
+// | `--graupl-card-padding`                   | Shorthand padding of the card.                         | `var(--graupl-card-padding-y) var(--graupl-card-padding-x)`                                                                                                   |
+// | `--graupl-card-transition`                | Transition applied to the card.                        | `transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)`                                                                   |
+// | `--graupl-card-transition-reduced-motion` | Transition when reduced motion is enabled.             | `none`                                                                                                                                                        |
+// | `--graupl-card-transform`                 | Base transform for the card.                           | `none`                                                                                                                                                        |
+// | `--graupl-card-hover-transform`           | Transform for hovered cards.                           | `none`                                                                                                                                                        |
+// | `--graupl-card-column-gap`                | Column gap inside the card.                            | `var(--graupl-spacer-0)`                                                                                                                                      |
+// | `--graupl-card-row-gap`                   | Row gap inside the card.                               | `var(--graupl-spacer-0)`                                                                                                                                      |
+// | `--graupl-card-gap`                       | Gap inside the card (column/row).                      | `var(--graupl-card-column-gap) var(--graupl-card-row-gap)`                                                                                                    |
+// | `--graupl-card-background`                | Background colour of the card.                         | `var(--graupl-background)`                                                                                                                                    |
+// | `--graupl-card-color`                     | Text colour of the card.                               | `var(--graupl-color)`                                                                                                                                         |
+// | `--graupl-card-border-width`              | Border width of the card.                              | `var(--graupl-border-top-width) var(--graupl-border-right-width) var(--graupl-border-bottom-width) var(--graupl-border-left-width)`                           |
+// | `--graupl-card-border-style`              | Border style of the card.                              | `var(--graupl-border-top-style) var(--graupl-border-right-style) var(--graupl-border-bottom-style) var(--graupl-border-left-style)`                           |
+// | `--graupl-card-border-radius`             | Border radius of the card.                             | `var(--graupl-border-top-left-radius) var(--graupl-border-top-right-radius) var(--graupl-border-bottom-right-radius) var(--graupl-border-bottom-left-radius)` |
+// | `--graupl-card-border-color`              | Border colour of the card.                             | `var(--graupl-card-color)`                                                                                                                                    |
+// | `--graupl-card-content-ratio`             | Grid row ratio used for card content.                  | `1fr`                                                                                                                                                         |
+// | `--graupl-card-image-ratio`               | Grid row ratio used for card images.                   | `auto`                                                                                                                                                        |
+// | `--graupl-horizontal-card-content-ratio`  | Grid column ratio for horizontal cards (content area). | `3fr`                                                                                                                                                         |
+// | `--graupl-horizontal-card-image-ratio`    | Grid column ratio for horizontal cards (image area).   | `2fr`                                                                                                                                                         |
+// | `--graupl-card-image-padding`             | Padding for the card image wrapper.                    | `var(--graupl-spacer-0) var(--graupl-spacer-0)`                                                                                                               |
+// | `--graupl-card-content-padding`           | Padding for the card content wrapper.                  | `var(--graupl-spacer-3) var(--graupl-spacer-5)`                                                                                                               |
+// | `--graupl-card-content-gap`               | Gap inside the card content (column/row).              | `var(--graupl-card-content-column-gap) var(--graupl-card-content-row-gap)`                                                                                    |
+// | `--graupl-card-title-color`               | Text colour of the card title.                         | `var(--graupl-card-color)`                                                                                                                                    |
+// | `--graupl-card-title-font-size`           | Font size of the card title.                           | `var(--graupl-h4)`                                                                                                                                            |
+// | `--graupl-card-title-font-weight`         | Font weight of the card title.                         | `var(--graupl-font-weight-h4)`                                                                                                                                |
+// | `--graupl-card-title-font-family`         | Font family of the card title.                         | `var(--graupl-font-family-h4)`                                                                                                                                |
+// | `--graupl-card-title-line-height`         | Line height of the card title.                         | `var(--graupl-line-height-h4)`                                                                                                                                |
+//
+// The following sass variables can be used to customize the generation of the card component:
+// | Variable                               | Description                                                                           | Default Value    |
+// | ---                                    | ---                                                                                   | ---              |
+// | `$selector-base`                       | Selector base for the component.                                                      | `"."`            |
+// | `$modifier-selector-base`              | Selector base for component modifiers.                                                | `"."`            |
+// | `$generate-base-theme-map`             | A flag to generate the base theme maps for accordion variants.                        | `true`           |
+// | `$themeable`                           | Flag to generate theme modifiers.                                                     | `false`          |
+// | `$card-selector-base`                  | Selector base for the card container.                                                 | `$selector-base` |
+// | `$card-selector`                       | Selector for the card container.                                                      | `"card"`         |
+// | `$card-image-selector-base`            | Selector base for the image wrapper.                                                  | `$selector-base` |
+// | `$card-image-selector`                 | Selector for the image wrapper.                                                       | `"card-image"`   |
+// | `$card-content-selector-base`          | Selector base for the content wrapper.                                                | `$selector-base` |
+// | `$card-content-selector`               | Selector for the content wrapper.                                                     | `"card-content"` |
+// | `$card-body-selector-base`             | Selector base for the body region.                                                    | `$selector-base` |
+// | `$card-body-selector`                  | Selector for the body region.                                                         | `"card-body"`    |
+// | `$card-header-selector-base`           | Selector base for the header region.                                                  | `$selector-base` |
+// | `$card-header-selector`                | Selector for the header region.                                                       | `"card-header"`  |
+// | `$card-footer-selector-base`           | Selector base for the footer region.                                                  | `$selector-base` |
+// | `$card-footer-selector`                | Selector for the footer region.                                                       | `"card-footer"`  |
+// | `$card-title-selector-base`            | Selector base for the title element.                                                  | `$selector-base` |
+// | `$card-title-selector`                 | Selector for the title element.                                                       | `"card-title"`   |
+// | `$horizontal-card-selector-base`       | Selector base for horizontal layout modifier.                                         | `"."`            |
+// | `$horizontal-card-selector`            | Selector for horizontal layout modifier.                                              | `"horizontal"`   |
+// | `$horizontal-card-left-selector-base`  | Selector base for left modifier.                                                      | `"."`            |
+// | `$horizontal-card-left-selector`       | Selector for left modifier.                                                           | `"left"`         |
+// | `$horizontal-card-right-selector-base` | Selector base for right modifier.                                                     | `"."`            |
+// | `$horizontal-card-right-selector`      | Selector for right modifier.                                                          | `"right"`        |
+// | `$vertical-card-top-selector-base`     | Selector base for top modifier.                                                       | `"."`            |
+// | `$vertical-card-top-selector`          | Selector for top modifier.                                                            | `"top"`          |
+// | `$vertical-card-bottom-selector-base`  | Selector base for bottom modifier.                                                    | `"."`            |
+// | `$vertical-card-bottom-selector`       | Selector for bottom modifier.                                                         | `"bottom"`       |
+// | `$inverse-card-selector-base`          | Selector base for inverse layout modifier.                                            | `"."`            |
+// | `$inverse-card-selector`               | Selector for inverse layout modifier.                                                 | `"inverse"`      |
+// | `$card-transform`                      | Base transform for the card.                                                          | `none`           |
+// | `$card-hover-transform`                | Hover transform for the card.                                                         | `none`           |
+// | `$card-content-ratio`                  | Grid ratio for content rows.                                                          | `1fr`            |
+// | `$card-image-ratio`                    | Grid ratio for image rows.                                                            | `auto`           |
+// | `$horizontal-card-content-ratio`       | Grid ratio for content in horizontal layout.                                          | `3fr`            |
+// | `$horizontal-card-image-ratio`         | Grid ratio for images in horizontal layout.                                           | `2fr`            |
+// | `$card-theme-mappings`                 | A map of properties and color shades used generate all card variants.                 | `()`             |
+// | `$card-theme-map`                      | A map of all properties, colors, and color shades used to generate all card variants. | `()`             |
+//
+// ## Using `$card-theme-mappings`
+//
+// `$card-theme-mappings` is a 1-level map of properties and shade values.
+//
+// e.g.
+// ```scss
+// $card-theme-mappings: (
+//   border-color: 700,
+// )
+// ```
+//
+// This directly[1] maps to all card variants, telling them what shade to use for said property.
+// All card variants will use the following based on the example above:
+// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--700`,
+// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and
+// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--700`.
+//
+// You can use this to customize _all_ cards variants in the same way.
+//
+// For example, if you use the following map:
+// ```scss
+// $card-theme-mappings: (
+//   border-color: 500,
+// )
+// ```
+//
+// All card variants will use the following:
+// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--500`,
+// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--500`, and
+// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--500`.
+//
+// [1] `$card-theme-mappings` gets parsed into a larger, more explicit map: `$card-theme-map`.
+//
+// Using `$card-theme-map`
+//
+// `$card-theme-map` is a multi-level map of properties, colors, and shade values.
+//
+// e.g.
+// ```scss
+// $card-theme-map: (
+//   primary: (
+//     border-color: (
+//       color: primary,
+//       shade: 700
+//     ),
+//   ),
+//   secondary: (
+//     border-color: (
+//       color: secondary,
+//       shade: 700
+//     ),
+//   ),
+//   tertiary: (
+//     border-color: (
+//       color: tertiary,
+//       shade: 700
+//     ),
+//   ),
+// )
+// ```
+//
+// This directly maps to all card variants, telling them what shade to use for said property.
+// The card variants will use the following based on the example above:
+// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--700`,
+// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and
+// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--700`.
+//
+// You can use this to customize card variants individually.
+//
+// For example, if you use the following map:
+//
+// ```scss
+// $card-theme-map: (
+//   primary: (
+//     border-color: (
+//       color: secondary,
+//       shade: 700
+//     ),
+//   ),
+//   secondary: (
+//     border-color: (
+//       color: secondary,
+//       shade: 700
+//     ),
+//   ),
+//   tertiary: (
+//     border-color: (
+//       color: secondary,
+//       shade: 700
+//     ),
+//   ),
+// )
+// ```
+//
+// The card variants will use the following:
+// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`,
+// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and
+// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`.
+//
+// @example
+// <div class="card">
+//   <div class="card-image"><img src="https://picsum.photos/600/400" alt="Card image" /></div>
+//   <div class="card-content">
+//     <div class="card-header"><h3 class="card-title">Card Title</h3></div>
+//     <div class="card-body"><p>This is some text that describes the card.</p></div>
+//     <div class="card-footer"><a class="card stretched" href="#">Card Action</a></div>
+//   </div>
+// </div>
+//
+// @example
+// <div class="card horizontal right">
+//   <div class="card-image"><img src="https://picsum.photos/600/400" alt="Card image" /></div>
+//   <div class="card-content">
+//     <div class="card-header"><h3 class="card-title">Card Title</h3></div>
+//     <div class="card-body"><p>This is some text that describes the card.</p></div>
+//     <div class="card-footer"><a class="card stretched" href="#">Card Action</a></div>
+//   </div>
+// </div>
 
 @use "defaults";
 @use "variables" as *;
 @use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
+@use "../../mixins/theme";
 @use "../../mixins/animation";
 @use "../../mixins/container";
 
 @include layer(component) {
-  #{defaults.$card-selector} {
+  // .card
+  #{defaults.$card-selector-base}#{defaults.$card-selector} {
     display: grid;
     position: relative;
     grid-template-columns: [image-start content-start] 1fr [image-end content-end];
@@ -21,8 +233,9 @@
     gap: $card-gap;
     isolation: isolate;
 
+    // &, &.top
     &,
-    &#{defaults.$vertical-card-top-selector} {
+    &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector} {
       grid-template-rows:
         [image-start]
         $card-image-ratio
@@ -31,8 +244,9 @@
         [content-end];
     }
 
-    &#{defaults.$vertical-card-bottom-selector},
-    &#{defaults.$inverse-card-selector} {
+    // &.bottom, &.inverse
+    &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},
+    &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {
       grid-template-rows:
         [content-start]
         $card-content-ratio
@@ -45,9 +259,11 @@
       --#{root-defaults.$prefix}card-transform: #{$card-hover-transform};
     }
 
-    &#{defaults.$horizontal-card-selector} {
+    // &.horizontal
+    &#{defaults.$horizontal-card-selector-base}#{defaults.$horizontal-card-selector} {
+      // &, &.left
       &,
-      &#{defaults.$horizontal-card-left-selector} {
+      &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector} {
         --#{root-defaults.$prefix}card-content-ratio: #{$horizontal-card-content-ratio};
         --#{root-defaults.$prefix}card-image-ratio: #{$horizontal-card-image-ratio};
 
@@ -59,7 +275,9 @@
           [content-end];
         grid-template-rows: [image-start content-start] 1fr [image-end content-end];
 
-        #{defaults.$card-image-selector} img {
+        // .card-image
+        #{defaults.$card-image-selector-base}#{defaults.$card-image-selector}
+          img {
           border-radius: calc(
               $card-border-top-left-radius - min(
                   $card-border-top-width,
@@ -76,8 +294,9 @@
         }
       }
 
-      &#{defaults.$horizontal-card-right-selector},
-      &#{defaults.$inverse-card-selector} {
+      // &.right, &.inverse
+      &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},
+      &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {
         grid-template-columns:
           [content-start]
           $card-content-ratio
@@ -85,7 +304,9 @@
           $card-image-ratio
           [image-end];
 
-        #{defaults.$card-image-selector} img {
+        // .card-image
+        #{defaults.$card-image-selector-base}#{defaults.$card-image-selector}
+          img {
           border-radius: 0
             calc(
               $card-border-top-right-radius - min(
@@ -105,7 +326,8 @@
     }
   }
 
-  #{defaults.$card-image-selector} {
+  // .card-image
+  #{defaults.$card-image-selector-base}#{defaults.$card-image-selector} {
     grid-area: image;
     padding: $card-image-padding;
 
@@ -129,7 +351,8 @@
     }
   }
 
-  #{defaults.$card-content-selector} {
+  // .card-content
+  #{defaults.$card-content-selector-base}#{defaults.$card-content-selector} {
     display: flex;
     grid-area: content;
     flex-direction: column;
@@ -137,37 +360,44 @@
     gap: $card-content-gap;
   }
 
-  #{defaults.$card-body-selector} {
+  // .card-body
+  #{defaults.$card-body-selector-base}#{defaults.$card-body-selector} {
     flex: 1 0 auto;
   }
 
-  #{defaults.$card-footer-selector} {
+  // .card-footer
+  #{defaults.$card-footer-selector-base}#{defaults.$card-footer-selector} {
     flex: 0 0 auto;
   }
 
-  #{defaults.$card-title-selector} {
+  // .card-title
+  #{defaults.$card-title-selector-base}#{defaults.$card-title-selector} {
     flex: 0 0 auto;
   }
 
   @include container.trigger(force-vertical-card) {
-    #{defaults.$card-selector} {
-      &#{defaults.$horizontal-card-selector} {
+    // .card
+    #{defaults.$card-selector-base}#{defaults.$card-selector} {
+      // .horizontal
+      &#{defaults.$horizontal-card-selector-base}#{defaults.$horizontal-card-selector} {
+        // &, &.left, &.top, &.right, &.bottom, &.inverse
         &,
-        &#{defaults.$horizontal-card-left-selector},
-        &#{defaults.$vertical-card-top-selector},
-        &#{defaults.$horizontal-card-right-selector},
-        &#{defaults.$vertical-card-bottom-selector},
-        &#{defaults.$inverse-card-selector} {
+        &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector},
+        &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector},
+        &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},
+        &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},
+        &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {
           --#{root-defaults.$prefix}horizontal-card-image-ratio: #{defaults.$card-image-ratio};
           --#{root-defaults.$prefix}horizontal-card-content-ratio: #{defaults.$card-content-ratio};
 
           grid-template-columns: [image-start content-start] 1fr [image-end content-end];
         }
 
+        // &, &.left, &.top
         &,
-        &#{defaults.$horizontal-card-left-selector},
-        &#{defaults.$horizontal-card-right-selector},
-        &#{defaults.$vertical-card-top-selector} {
+        &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector},
+        &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},
+        &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector} {
           grid-template-rows:
             [image-start]
             $card-image-ratio
@@ -176,8 +406,9 @@
             [content-end];
         }
 
-        &#{defaults.$vertical-card-bottom-selector},
-        &#{defaults.$inverse-card-selector} {
+        // &.bottom, &.inverse
+        &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},
+        &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {
           grid-template-rows:
             [content-start]
             $card-content-ratio
@@ -190,20 +421,35 @@
   }
 
   @include animation.off {
-    #{defaults.$card-selector} {
+    // .card
+    #{#{defaults.$card-selector-base}}#{defaults.$card-selector} {
       --#{root-defaults.$prefix}card-transition: #{$card-transition-reduced-motion};
     }
   }
 }
 
 @include layer(theme) {
-  #{defaults.$card-selector} {
+  // .card
+  #{#{defaults.$card-selector-base}}#{defaults.$card-selector} {
+    --#{root-defaults.$prefix}color: #{$card-color};
+    --#{root-defaults.$prefix}background: #{$card-background};
+
     border-color: $card-border-color;
     background: $card-background;
     color: $card-color;
+
+    @if root-defaults.$themeable-components and defaults.$themeable {
+      @include theme.generate-modifiers(
+        defaults.$card-theme-map,
+        defaults.$card-theme-selector-base,
+        defaults.$card-theme-selector-prefix,
+        "card-"
+      );
+    }
   }
 
-  #{defaults.$card-title-selector} {
+  // .card-title
+  #{defaults.$card-title-selector-base}#{defaults.$card-title-selector} {
     color: $card-title-color;
     font-size: $card-title-font-size;
     font-weight: $card-title-font-weight;