fix: Change forCards modifier to forSurfaces (#576)

* fix: Change forCards modifier to forSurfaces

After much reflection and thought about the modifier forCards. I wanted to align more clearly to the tokens surface. To make it as clear as possible that its intention is to be used with surfaces

* Update ThemeTokens.jsx

Replace forCards to be forSurfaces in the theme example

* Update wpds.tokens.json

* Update wpds.tokens.json

build.washingtonpost.com/components/Markdown/Examples/ThemeTokens.jsx

@@ -135,12 +135,12 @@ export default function ThemeAndSemantic() {
       </Box>
       <Box>
         <Label css={{ color: theme.colors.onBackground }}>
-          Background-forCards
+          Background-forSurfaces
         </Label>
         <Container
           css={{
             border: `1px solid ${theme.colors.outline}`,
-            background: theme.colors["background-forCards"],
+            background: theme.colors["background-forSurfaces"],
           }}
         >
           <Label css={{ color: theme.colors.onBackground }}>onBackground</Label>

ui/theme/src/wpds.tokens.json

@@ -3,7 +3,7 @@
     "light": {
       "alpha0": {
         "type": "color",
-        "value": "rgba(0, 0, 0, .65)",
+        "value": "rgba(0, 0, 0, .50)",
         "hex": "#000000a6"
       },
       "alpha20": {
@@ -543,7 +543,7 @@
     "dark": {
       "alpha0": {
         "type": "color",
-        "value": "rgba(255, 255, 255, .65)",
+        "value": "rgba(255, 255, 255, .50)",
         "hex": "#ffffffa6"
       },
       "alpha20": {
@@ -1755,7 +1755,7 @@
         "value": "{gray20}",
         "valueDark": "{gray0}"
       },
-      "background-forCards": {
+      "background-forSurfaces": {
         "type": "color",
         "value": "{gray600}",
         "valueDark": "{gray700}"