Brighten card covers in alternate theme (#1851)

Author: tylersticka

.changeset/cuddly-hairs-compare.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Card covers within an alternate theme container will be brightened slightly to better offset covers with similar backgrounds to the container

src/components/card/card.scss

@@ -1,5 +1,6 @@
 @use '../../compiled/tokens/scss/aspect-ratio';
 @use '../../compiled/tokens/scss/breakpoint';
+@use '../../compiled/tokens/scss/brightness';
 @use '../../compiled/tokens/scss/color';
 @use '../../compiled/tokens/scss/ease';
 @use '../../compiled/tokens/scss/size';
@@ -228,6 +229,17 @@ $_focus-overflow: (size.$edge-large * -1);
   grid-area: cover;
   transform: translate(0, 0); /* 3 */
 
+  /**
+   * Subtly brighten covers within our alternate theme containers to help offset
+   * imagery with light backgrounds from the surrounding container. We could
+   * also do this for contained cards, but since those are a less common
+   * occurrence we'll keep this simple for now.
+   */
+
+  @include theme.styles(alternate) {
+    filter: brightness(brightness.$image-brighten);
+  }
+
   /**
    * Square aspect ratio + fully rounded corners = circular cover image
    */

src/tokens/number/brightness.json

@@ -4,6 +4,9 @@
       "control": {
         "brighten": { "value": "110%" },
         "dim": { "value": "80%" }
+      },
+      "image": {
+        "brighten": { "value": "102.5%" }
       }
     }
   }