feat(card): add tokens and update shim (#811)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [X] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-660

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [ ] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <noreply@github.com>

projects/angular/src/emphasis/alert/_alert.clarity.scss

@@ -501,9 +501,12 @@
   //1.cards
   .card {
     .alert {
-      $clr-alert-card-horizontal-margin: 0;
-      $clr-alert-card-vertical-margin: variables.$clr_baselineRem_0_25;
-      margin: $clr-alert-card-vertical-margin $clr-alert-card-horizontal-margin;
+      @include mixins.css-var(
+        margin,
+        clr-card-alert-margin,
+        variables.$clr_baselineRem_0_25 0,
+        variables.$clr-use-custom-properties
+      );
     }
   }
 

projects/angular/src/layout/_card.clarity.scss

@@ -8,17 +8,17 @@
 @use 'sass:meta';
 @use '../utils/mixins';
 @use '../utils/variables/variables';
-@use '../button/variables.buttons' as button-variables;
 @use 'variables.card' as card-variables;
 @include meta.load-css('properties.card');
 
 @include mixins.exports('card.clarity') {
   %card-border-appearance {
-    // IE/OldEdge
-    box-shadow: card-variables.$clr-card-box-shadow;
-    @if variables.$clr-use-custom-properties == true {
-      box-shadow: 0 variables.$clr_baselineRem_0_125 0 0 var(--clr-card-box-shadow-color);
-    }
+    @include mixins.css-var(
+      box-shadow,
+      clr-card-box-shadow,
+      card-variables.$clr-card-box-shadow,
+      variables.$clr-use-custom-properties
+    );
     @include mixins.css-var(
       border-radius,
       clr-card-border-radius,
@@ -41,14 +41,15 @@
   }
 
   %clickable-card-transition {
-    // IE/OldEdge
-    box-shadow: 0 variables.$clr_baselineRem_0_125 0 0 variables.$clr-color-action-500;
-    @if variables.$clr-use-custom-properties == true {
-      box-shadow: 0 variables.$clr_baselineRem_0_125 0 0 var(--clr-card-clickable-box-shadow-color);
-    }
+    @include mixins.css-var(
+      box-shadow,
+      clr-card-clickable-box-shadow,
+      0 variables.$clr_baselineRem_0_125 0 0 variables.$clr-color-action-500,
+      variables.$clr-use-custom-properties
+    );
     @include mixins.css-var(
       border-width,
-      clr-card-border-width,
+      clr-card-clickable-border-width,
       variables.$clr-global-borderwidth,
       variables.$clr-use-custom-properties
     );
@@ -67,7 +68,12 @@
 
   %card-space-between {
     margin-top: 0;
-    margin-bottom: card-variables.$card-children-space-between;
+    @include mixins.css-var(
+      margin-bottom,
+      clr-card-children-space-between,
+      card-variables.$card-children-space-between,
+      variables.$clr-use-custom-properties
+    );
 
     &:last-child {
       margin-bottom: 0;
@@ -135,8 +141,18 @@
     }
 
     .list-group-item {
-      padding: variables.$clr_baselineRem_0_5 variables.$clr_baselineRem_0_75;
-      font-size: card-variables.$clr-card-text-font-size;
+      @include mixins.css-var(
+        font-size,
+        clr-card-text-font-size,
+        card-variables.$clr-card-text-font-size,
+        variables.$clr-use-custom-properties
+      );
+      @include mixins.css-var(
+        padding,
+        clr-card-list-group-item-padding,
+        variables.$clr_baselineRem_0_5 variables.$clr_baselineRem_0_75,
+        variables.$clr-use-custom-properties
+      );
       @include mixins.css-var(
         background-color,
         clr-card-bg-color,
@@ -170,27 +186,78 @@
     }
   }
 
-  .card-header,
-  .card-block,
+  .card-block {
+    @include mixins.css-var(
+      padding,
+      clr-card-block-padding,
+      card-variables.$card-children-padding-vertical card-variables.$card-children-padding-horizontal,
+      variables.$clr-use-custom-properties
+    );
+  }
+
   .card-footer {
-    padding: card-variables.$card-children-padding-vertical card-variables.$card-children-padding-horizontal;
+    display: flex;
+    flex-direction: row;
+    @include mixins.css-var(
+      gap,
+      clr-card-footer-gap,
+      variables.$clr_baselineRem_0_5,
+      variables.$clr-use-custom-properties
+    );
+    @include mixins.css-var(
+      padding,
+      clr-card-footer-padding,
+      card-variables.$card-children-padding-vertical card-variables.$card-children-padding-horizontal,
+      variables.$clr-use-custom-properties
+    );
   }
 
-  .card-header,
+  h3.card-header,
+  .card-header {
+    @include mixins.css-var(
+      font-size,
+      clr-card-header-title-font-size,
+      variables.$clr-h3-font-size,
+      variables.$clr-use-custom-properties
+    );
+    @include mixins.css-var(
+      padding,
+      clr-card-header-padding,
+      card-variables.$card-children-padding-vertical card-variables.$card-children-padding-horizontal,
+      variables.$clr-use-custom-properties
+    );
+    @include mixins.css-var(
+      color,
+      clr-card-header-title-color,
+      card-variables.$clr-card-title-color,
+      variables.$clr-use-custom-properties
+    );
+  }
+
+  h4.card-title,
   .card-title {
     @include mixins.css-var(
       color,
-      clr-card-title-color,
+      clr-card-content-title-color,
       card-variables.$clr-card-title-color,
       variables.$clr-use-custom-properties
     );
+    @include mixins.css-var(
+      font-size,
+      clr-card-content-title-font-size,
+      variables.$clr-h4-font-size,
+      variables.$clr-use-custom-properties
+    );
+  }
+
+  .card-header,
+  .card-title {
     @include mixins.css-var(
       font-weight,
       clr-card-title-font-weight,
       card-variables.$clr-card-title-font-weight,
       variables.$clr-use-custom-properties
     );
-    font-size: card-variables.$clr-card-title-font-size;
     letter-spacing: card-variables.$clr-card-title-letter-spacing;
   }
 
@@ -207,7 +274,13 @@
   }
 
   .card-text {
-    font-size: card-variables.$clr-card-text-font-size;
+    @include mixins.css-var(
+      font-size,
+      clr-card-text-font-size,
+      card-variables.$clr-card-text-font-size,
+      variables.$clr-use-custom-properties
+    );
+    @include mixins.css-var(color, clr-card-text-color, variables.$clr-p1-color, variables.$clr-use-custom-properties);
   }
 
   //Images
@@ -268,7 +341,7 @@
     .btn,
     .btn.btn-link,
     .card-link {
-      margin: 0 button-variables.$clr-btn-horizontal-margin 0 0;
+      margin: 0;
     }
 
     //Need this level of nesting for now.
@@ -350,7 +423,24 @@
     .card-media-description {
       display: flex;
       flex-direction: column;
-      margin: 0 0 0 variables.$clr_baselineRem_0_5;
+      @include mixins.css-var(
+        color,
+        clr-card-text-color,
+        variables.$clr-p1-color,
+        variables.$clr-use-custom-properties
+      );
+      @include mixins.css-var(
+        font-size,
+        clr-card-text-font-size,
+        variables.$clr_baselineRem_0_5,
+        variables.$clr-use-custom-properties
+      );
+      @include mixins.css-var(
+        margin-left,
+        clr-card-media-description-margin-left,
+        variables.$clr_baselineRem_0_5,
+        variables.$clr-use-custom-properties
+      );
     }
 
     .card-media-title {
@@ -366,7 +456,13 @@
       flex-direction: column;
 
       .card-media-description {
-        margin: variables.$clr_baselineRem_0_25 0 0 0;
+        margin-left: 0;
+        @include mixins.css-var(
+          margin-top,
+          clr-card-media-description-margin-top,
+          variables.$clr_baselineRem_0_25,
+          variables.$clr-use-custom-properties
+        );
       }
     }
   }

projects/angular/src/layout/_properties.card.scss

@@ -4,7 +4,8 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 @use '../utils/mixins';
-@use '../utils/variables/variables.global';
+@use '../utils/variables/variables';
+@use './variables.card' as card-variables;
 
 @include mixins.exports('card.properties') {
   @if variables.$clr-use-custom-properties == true {
@@ -14,13 +15,42 @@
       --clr-card-divider-color: var(--clr-color-neutral-300);
       --clr-card-title-color: var(--clr-h4-color);
       --clr-card-title-font-weight: var(--clr-h4-font-weight);
+      --clr-card-header-title-color: var(--clr-card-title-color);
+      --clr-card-content-title-color: var(--clr-card-title-color);
 
       --clr-card-border-width: var(--clr-global-borderwidth);
+      --clr-card-clickable-border-width: var(--clr-global-borderwidth);
       --clr-card-border-radius: var(--clr-global-borderradius);
       --clr-card-border-color: var(--clr-color-neutral-300);
+      // АТМ
+      // Leave only `clr-card-box-shadow` and remove `clr-card-box-shadow-color`
       --clr-card-box-shadow-color: var(--clr-card-border-color);
+      --clr-card-box-shadow: 0 #{variables.$clr_baselineRem_0_125} 0 0 var(--clr-card-box-shadow-color);
       --clr-card-clickable-border-color: var(--clr-color-action-500);
+      // АТМ
+      // Leave only `clr-card-clickable-box-shadow` and remove `clr-card-clickable-box-shadow-color`
       --clr-card-clickable-box-shadow-color: var(--clr-card-clickable-border-color);
+      --clr-card-clickable-box-shadow: 0
+        #{variables.$clr_baselineRem_0_125}
+        0
+        0
+        var(--clr-card-clickable-box-shadow-color);
+      --clr-card-text-color: #{variables.$clr-p1-color};
+      --clr-card-text-font-size: #{card-variables.$clr-card-text-font-size};
+      --clr-card-children-space-between: #{variables.$clr_baselineRem_0_5};
+      --clr-card-media-description-margin-left: #{variables.$clr_baselineRem_0_5};
+      --clr-card-media-description-margin-top: #{variables.$clr_baselineRem_0_25};
+      --clr-card-list-group-item-padding: #{variables.$clr_baselineRem_0_5} #{variables.$clr_baselineRem_0_75};
+      --clr-card-header-title-font-size: #{variables.$clr-h3-font-size};
+      --clr-card-content-title-font-size: #{variables.$clr-h4-font-size};
+      --clr-card-header-padding: #{card-variables.$card-children-padding-vertical}
+        #{card-variables.$card-children-padding-horizontal};
+      --clr-card-footer-padding: #{card-variables.$card-children-padding-vertical}
+        #{card-variables.$card-children-padding-horizontal};
+      --clr-card-block-padding: #{card-variables.$card-children-padding-vertical}
+        #{card-variables.$card-children-padding-horizontal};
+      --clr-card-alert-margin: #{variables.$clr_baselineRem_0_25} 0;
+      --clr-card-footer-gap: #{variables.$clr_baselineRem_0_5};
     }
   }
 }

projects/angular/src/progress/progress-bars/_progress-bars.clarity.scss

@@ -562,6 +562,10 @@
       // by default, positioned at the topmost of its card-block container
       margin: 0;
       margin-top: -1 * card-variables.$card-children-padding-vertical;
+      @if variables.$clr-use-custom-properties == true {
+        margin-top: calc(-1 * (var(--clr-card-footer-padding, card-variables.$card-children-padding-vertical)));
+      }
+
       height: $clr-progressInCard-height;
       position: absolute;
       left: 0;

projects/demo/src/app/alert/static/alert-cards.demo.html

@@ -6,7 +6,7 @@
 
 <div class="clr-example">
   <div class="card">
-    <div class="card-block">
+    <h3 class="card-header">
       <div class="alert alert-warning alert-sm">
         <div class="alert-items">
           <div class="alert-item static">
@@ -20,6 +20,9 @@
           <cds-icon aria-hidden="true" shape="window-close"></cds-icon>
         </button>
       </div>
+      Header
+    </h3>
+    <div class="card-block">
       <div class="card-media-block wrap">
         <img class="card-media-image" src="//placehold.it/60x60" />
         <div class="card-media-description">

projects/ui/src/shim.cds-core.scss

@@ -549,13 +549,29 @@
 
   --clr-card-bg-color: var(--cds-alias-object-container-background); // var(--clr-color-neutral-0);
   --clr-card-divider-color: var(--cds-alias-object-border-color); // var(--clr-color-neutral-300);
-  --clr-card-title-color: var(--clr-h4-color);
-
-  --clr-card-border-color: var(--cds-alias-object-container-border-color); // var(--clr-color-neutral-300);
-  --clr-card-box-shadow-color: var(--clr-card-border-color); // indirectly mapped to CDS token
+  --clr-card-title-color: var(--cds-alias-typography-color-400, var(--cds-global-typography-color-400));
+  --clr-card-header-title-color: var(--clr-card-title-color);
+  --clr-card-content-title-color: var(--clr-card-title-color);
+  --clr-card-header-title-font-size: var(--cds-global-typography-section-font-size);
+  --clr-card-content-title-font-size: var(--cds-global-typography-subsection-font-size);
+  --clr-card-text-font-size: var(--cds-global-typography-body-font-size);
+  --clr-card-border-color: var(--cds-alias-object-border-color); // var(--clr-color-neutral-300);
+  --clr-card-box-shadow: var(--cds-alias-object-shadow-300); // indirectly mapped to CDS token
   --clr-card-clickable-border-color: var(--cds-alias-object-interaction-background-highlight); // var(--clr-color-action-500);
-  --clr-card-clickable-box-shadow-color: var(--clr-card-clickable-border-color); // indirectly mapped to CDS token
+  --clr-card-clickable-box-shadow: var(--cds-alias-object-shadow-300); // indirectly mapped to CDS token
   --clr-card-border-radius: var(--cds-alias-object-border-radius-100);
+  --clr-card-border-width: var(--cds-alias-object-border-width-100);
+  --clr-card-clickable-border-width: var(--cds-alias-object-border-width-200);
+  --clr-card-text-color: var(--cds-alias-typography-color-400, var(--cds-global-typography-color-400));
+  --clr-card-header-padding: var(--cds-global-space-7);
+  --clr-card-footer-padding: var(--cds-global-space-7);
+  --clr-card-block-padding: var(--cds-global-space-7);
+  --clr-card-list-group-item-padding: var(--cds-global-space-7);
+  --clr-card-children-space-between: var(--cds-global-space-7);
+  --clr-card-media-description-margin-left: var(--cds-global-space-7);
+  --clr-card-media-description-margin-top: var(--cds-global-space-7);
+  --clr-card-alert-margin: 0 0 var(--cds-global-space-5) 0;
+  --clr-card-footer-gap: var(--cds-global-space-5);
 
   /* Forms */