Add active styles for Card and Event Summary (#1852)

Co-authored-by: Gerardo Rodriguez <[email protected]>

Author: tylersticka

.changeset/thin-worms-whisper.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Make active states more consistent between Button, Card and Event Summary

src/components/card/card.scss

@@ -274,14 +274,17 @@ $_focus-overflow: (size.$edge-large * -1);
 
 /**
  * Hover effect for when the card contains a link. The image appears to zoom in
- * a very slight amount.
+ * a very slight amount. We negate that zoom for the `:active` state for some
+ * subtle consistency with other scale interactions, such as buttons and event
+ * summary calendars, but we don't go quite as dramatic since these are larger
+ * elements that would feel a bit more jarring.
  */
 
 .c-card__cover > *,
 .c-card__cover > picture > img {
   transition: transform transition.$prompt ease.$out;
 
-  .c-card--with-link:hover & {
+  .c-card--with-link:hover:not(:active) & {
     transform: scale(1.025);
   }
 }

src/components/event-summary/event-summary.scss

@@ -1,3 +1,4 @@
+@use '../../compiled/tokens/scss/brightness';
 @use '../../compiled/tokens/scss/color';
 @use '../../compiled/tokens/scss/ease';
 @use '../../compiled/tokens/scss/scale';
@@ -55,9 +56,16 @@ $_focus-overflow: (size.$edge-large * -1);
 }
 
 .c-event-summary__calendar-date {
-  transition: transform transition.$quick ease.$out;
+  transition: filter transition.$slow ease.$out,
+    transform transition.$quick ease.$out;
 
   .c-event-summary:hover & {
+    filter: brightness(brightness.$control-brighten);
     transform: scale(scale.$effect-grow);
   }
+
+  .c-event-summary:active & {
+    filter: brightness(brightness.$control-dim);
+    transform: scale(scale.$effect-shrink);
+  }
 }