fix(card): resolve clickable card hover shifting text (#1166) (#1170)

Port of #1166 

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

What kind of change does this PR introduce?

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

- [X] Bugfix
- [ ] 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:

When hovering over clickable card the border width animates from 1px to
2px, causing the text content contained within the card to noticeably
shift. This can be seen when hovering the clickable card on our
[website](https://clarity.design/documentation/card/code#clickable-cards)
and our

[storybook](https://storybook.clarity.design/?path=/story/card-card--default).

Issue Number: CDE-917

This changes the clickable border-width token to 1px (which is the
correct value for non-hovered clickable cards), and then uses the
box-shadow to set a 1px shadow around the element. Since both the
box-shadow and the border-color are the same color, and they're both 1px
by default, the result is a non-shifting 2px stroke on hover.

- [ ] Yes
- [X] No

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

## 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
- [ ] 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: N/A

## 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

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

@@ -22,10 +22,10 @@
 
   %clickable-card-transition {
     box-shadow: card-variables.$clr-card-clickable-box-shadow;
-    border: tokens.$cds-alias-object-border-width-200 solid card-variables.$clr-card-clickable-border-color;
+    border: tokens.$cds-alias-object-border-width-100 solid card-variables.$clr-card-clickable-border-color;
     cursor: pointer;
     text-decoration: none;
-    transition: border 0.2s ease, transform 0.2s ease;
+    transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
   }
 
   %card-space-between {

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

@@ -20,7 +20,7 @@
     --clr-card-border-color: #{tokens.$cds-alias-object-border-color};
     --clr-card-box-shadow: #{tokens.$cds-alias-object-shadow-300};
     --clr-card-clickable-border-color: #{tokens.$cds-alias-object-interaction-background-highlight};
-    --clr-card-clickable-box-shadow: #{tokens.$cds-alias-object-shadow-300};
+    --clr-card-clickable-box-shadow: 0 0 0 #{tokens.$cds-global-space-1} var(--clr-card-clickable-border-color);
     --clr-card-header-title-color: var(--clr-card-title-color);
     --clr-card-content-title-color: var(--clr-card-title-color);
     --clr-card-text-color: #{tokens.$cds-alias-typography-color-400};