From 9d95dc1d2de7f1623c78b9a9ff256db8f9f84d5b Mon Sep 17 00:00:00 2001
From: Will Ernest <wernest@vmware.com>
Date: Fri, 26 Jan 2024 09:43:42 -0800
Subject: [PATCH] fix(card): resolve clickable card hover shifting text (#1166)

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

- [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?

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

## What is the new behavior?

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.

## Does this PR introduce a breaking change?

- [ ] Yes
- [X] No

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

## Other information
---
 projects/ui/src/shim.cds-core.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/ui/src/shim.cds-core.scss b/projects/ui/src/shim.cds-core.scss
index bf8bbddfaa..bb95f5595b 100644
--- a/projects/ui/src/shim.cds-core.scss
+++ b/projects/ui/src/shim.cds-core.scss
@@ -934,10 +934,10 @@ $metropolis-font-family: Metropolis, 'Avenir Next', 'Helvetica Neue', Arial, san
   --clr-card-border-color: #{tokens.$cds-alias-object-border-color}; // var(--clr-color-neutral-300);
   --clr-card-box-shadow: #{tokens.$cds-alias-object-shadow-300}; // indirectly mapped to CDS token
   --clr-card-clickable-border-color: #{tokens.$cds-alias-object-interaction-background-highlight}; // var(--clr-color-action-500);
-  --clr-card-clickable-box-shadow: #{tokens.$cds-alias-object-shadow-300}; // indirectly mapped to CDS token
+  --clr-card-clickable-box-shadow: 0 0 0 #{tokens.$cds-global-space-1} var(--clr-card-clickable-border-color);
   --clr-card-border-radius: #{tokens.$cds-alias-object-border-radius-100};
   --clr-card-border-width: #{tokens.$cds-alias-object-border-width-100};
-  --clr-card-clickable-border-width: #{tokens.$cds-alias-object-border-width-200};
+  --clr-card-clickable-border-width: #{tokens.$cds-alias-object-border-width-100};
   --clr-card-text-color: #{tokens.$cds-alias-typography-color-400};
   --clr-card-header-padding: #{tokens.$cds-global-space-7};
   --clr-card-footer-vertical-padding: #{tokens.$cds-global-space-5}; // ATM: internal property to be deleted