feat(tokens,card): update to @adobe/[email protected] (#3669)

* feat(tokens): update to latest release
* feat(card): update styles to use refreshed token

Author: castastrophe

.changeset/puny-kids-rhyme.md

@@ -0,0 +1,76 @@
+---
+"@spectrum-css/tokens": minor
+---
+
+Package update from `@adobe/[email protected]` to `@adobe/[email protected]`.
+
+#### New custom properties
+
+- `--spectrum-card-background-loading-color`
+- `--spectrum-card-background-well-color`
+- `--spectrum-card-default-width-extra-small`
+- `--spectrum-card-default-width-small`
+- `--spectrum-card-default-width-medium`
+- `--spectrum-card-default-width-large`
+- `--spectrum-card-default-width-extra-large`
+- `--spectrum-card-description-to-footer`
+- `--spectrum-card-edge-to-content-default-extra-small`
+- `--spectrum-card-edge-to-content-default-small`
+- `--spectrum-card-edge-to-content-default-medium`
+- `--spectrum-card-edge-to-content-default-large`
+- `--spectrum-card-edge-to-content-default-extra-large`
+- `--spectrum-card-edge-to-content-compact-extra-small`
+- `--spectrum-card-edge-to-content-compact-small`
+- `--spectrum-card-edge-to-content-compact-medium`
+- `--spectrum-card-edge-to-content-compact-large`
+- `--spectrum-card-edge-to-content-compact-extra-large`
+- `--spectrum-card-edge-to-content-spacious-extra-small`
+- `--spectrum-card-edge-to-content-spacious-small`
+- `--spectrum-card-edge-to-content-spacious-medium`
+- `--spectrum-card-edge-to-content-spacious-large`
+- `--spectrum-card-edge-to-content-spacious-extra-large`
+- `--spectrum-card-header-to-description`
+- `--spectrum-card-minimum-width-extra-small`
+- `--spectrum-card-minimum-width-small`
+- `--spectrum-card-minimum-width-medium`
+- `--spectrum-card-minimum-width-large`
+- `--spectrum-card-minimum-width-extra-large`
+- `--spectrum-card-maximum-width-extra-small`
+- `--spectrum-card-maximum-width-small`
+- `--spectrum-card-maximum-width-medium`
+- `--spectrum-card-maximum-width-large`
+- `--spectrum-card-maximum-width-extra-large`
+- `--spectrum-card-minimum-height-extra-small`
+- `--spectrum-card-minimum-height-small`
+- `--spectrum-card-minimum-height-medium`
+- `--spectrum-card-minimum-height-large`
+- `--spectrum-card-minimum-height-extra-large`
+- `--spectrum-card-selection-background-size-small`
+- `--spectrum-card-selection-background-size-medium`
+- `--spectrum-card-selection-background-size-large`
+- `--spectrum-card-selection-background-size-extra-large`
+- `--spectrum-collection-card-minimum-height-extra-small`
+- `--spectrum-collection-card-minimum-height-small`
+- `--spectrum-collection-card-minimum-height-medium`
+- `--spectrum-collection-card-minimum-height-large`
+- `--spectrum-collection-card-minimum-height-extra-large`
+- `--spectrum-collection-card-minimum-height-hero-extra-small`
+- `--spectrum-collection-card-minimum-height-hero-small`
+- `--spectrum-collection-card-minimum-height-hero-medium`
+- `--spectrum-collection-card-minimum-height-hero-large`
+- `--spectrum-collection-card-minimum-height-hero-extra-large`
+- `--spectrum-segmented-control-item-maximum-width`
+- `--spectrum-user-card-minimum-height-small`
+- `--spectrum-user-card-minimum-height-medium`
+- `--spectrum-user-card-minimum-height-large`
+- `--spectrum-user-card-minimum-height-extra-large`
+- `--spectrum-user-card-minimum-height-title-below-small`
+- `--spectrum-user-card-minimum-height-title-below-medium`
+- `--spectrum-user-card-minimum-height-title-below-large`
+- `--spectrum-user-card-minimum-height-title-below-extra-large`
+
+#### Updated custom properties
+
+- `--spectrum-card-selection-background-color` was mapped to `var(--spectrum-gray-100)`; updated to:
+  - light: `var(--spectrum-transparent-white-600)`
+  - dark: `var(--spectrum-transparent-black-600)`

.changeset/spotty-bats-deny.md

@@ -0,0 +1,42 @@
+---
+"@spectrum-css/card": major
+---
+
+Previously:
+
+```css
+.spectrum-Card.is-selected::before {
+	background-color: rgba(
+		var(
+			--mod-card-selected-background-color-rgb,
+			var(--spectrum-card-selected-background-color-rgb)
+		),
+		var(--spectrum-card-selected-background-opacity)
+	);
+}
+```
+
+Styles now use `--spectrum-card-selection-background-color` which maps to a transparent global property of `--spectrum-transparent-(black|white)-600` depending on color context.
+
+Updated:
+
+```css
+.spectrum-Card.is-selected::before {
+	background-color: var(
+		--mod-card-background-color-selected,
+		var(--spectrum-card-selection-background-color)
+	);
+}
+```
+
+#### Removed variants
+
+Removed the quiet variant which is no longer supported in Spectrum 2.
+
+#### Removed/replaced properties
+
+- `--mod-card-selected-background-color-rgb`. Use `--mod-card-background-color-selected` to override the selected background color.
+- `--mod-card-content-margin-top-quiet`. Use `--mod-card-content-margin-top` with appropriate selectors to override.
+- `--mod-card-minimum-width-quiet`. Use `--mod-card-minimum-width` with appropriate selectors to override.
+- `--mod-card-actions-background-color-rgb`. No replacement, using token value `--spectrum-card-selection-background-color` directly.
+- `--mod-card-actions-background-color-opacity`. No replacement, using token value `--spectrum-card-selection-background-color` directly.

.markdownlint.json

@@ -1,7 +1,7 @@
 {
     "extends": "markdownlint/style/prettier",
     "first-line-h1": false,
-	"no-inline-html": false,
+    "no-inline-html": false,
     "no-bare-urls": false,
     "no-duplicate-heading": {
       "siblings_only": true

.prettierignore

@@ -3,6 +3,7 @@
 **/.svn
 **/.hg
 **/node_modules
+yarn.lock
 
 # Compiled and generated files
 dist

components/card/dist/metadata.json

@@ -22,23 +22,6 @@
     ".spectrum-Card--horizontal .spectrum-Card-preview",
     ".spectrum-Card--horizontal .spectrum-Card-title",
     ".spectrum-Card--horizontal:hover .spectrum-Card-preview",
-    ".spectrum-Card--quiet",
-    ".spectrum-Card--quiet .spectrum-Card-body",
-    ".spectrum-Card--quiet .spectrum-Card-footer",
-    ".spectrum-Card--quiet .spectrum-Card-preview",
-    ".spectrum-Card--quiet .spectrum-Card-preview:after",
-    ".spectrum-Card--quiet .spectrum-Card-preview:before",
-    ".spectrum-Card--quiet.is-drop-target",
-    ".spectrum-Card--quiet.is-drop-target .spectrum-Card-preview",
-    ".spectrum-Card--quiet.is-drop-target .spectrum-Card-preview:before",
-    ".spectrum-Card--quiet.is-focused .spectrum-Card-preview:after",
-    ".spectrum-Card--quiet.is-focused:after",
-    ".spectrum-Card--quiet.is-selected .spectrum-Card-preview",
-    ".spectrum-Card--quiet.is-selected .spectrum-Card-preview:before",
-    ".spectrum-Card--quiet:before",
-    ".spectrum-Card--quiet:focus .spectrum-Card-preview:after",
-    ".spectrum-Card--quiet:focus:after",
-    ".spectrum-Card--quiet:hover .spectrum-Card-preview",
     ".spectrum-Card-actionButton",
     ".spectrum-Card-actions",
     ".spectrum-Card-body",
@@ -55,11 +38,11 @@
     ".spectrum-Card.is-drop-target",
     ".spectrum-Card.is-focused .spectrum-Card-actions",
     ".spectrum-Card.is-focused .spectrum-Card-quickActions",
+    ".spectrum-Card.is-selected",
     ".spectrum-Card.is-selected .spectrum-Card-actions",
     ".spectrum-Card.is-selected .spectrum-Card-quickActions",
     ".spectrum-Card.is-selected:before",
     ".spectrum-Card.spectrum-Card--gallery",
-    ".spectrum-Card.spectrum-Card--quiet",
     ".spectrum-Card:after",
     ".spectrum-Card:before",
     ".spectrum-Card:focus .spectrum-Card-actions",
@@ -74,8 +57,6 @@
   ],
   "modifiers": [
     "--mod-animation-duration-100",
-    "--mod-card-actions-background-color-opacity",
-    "--mod-card-actions-background-color-rgb",
     "--mod-card-actions-border-radius",
     "--mod-card-actions-drop-shadow-blur",
     "--mod-card-actions-drop-shadow-color",
@@ -86,6 +67,7 @@
     "--mod-card-animation-duration",
     "--mod-card-background-color",
     "--mod-card-background-color-hover",
+    "--mod-card-background-color-selected",
     "--mod-card-body-font-color",
     "--mod-card-body-font-family",
     "--mod-card-body-font-size",
@@ -103,7 +85,6 @@
     "--mod-card-border-width",
     "--mod-card-content-margin-bottom",
     "--mod-card-content-margin-top",
-    "--mod-card-content-margin-top-quiet",
     "--mod-card-corner-radius",
     "--mod-card-divider-color",
     "--mod-card-focus-indicator-color",
@@ -116,7 +97,6 @@
     "--mod-card-horizontal-body-padding",
     "--mod-card-horizontal-preview-padding",
     "--mod-card-minimum-width",
-    "--mod-card-minimum-width-quiet",
     "--mod-card-preview-background-color",
     "--mod-card-preview-background-color-hover",
     "--mod-card-preview-border-width-selected",
@@ -134,8 +114,6 @@
     "--mod-overlay-animation-duration"
   ],
   "component": [
-    "--spectrum-card-actions-background-color-opacity",
-    "--spectrum-card-actions-background-color-rgb",
     "--spectrum-card-actions-border-radius",
     "--spectrum-card-actions-drop-shadow-blur",
     "--spectrum-card-actions-drop-shadow-color",
@@ -172,7 +150,7 @@
     "--spectrum-card-preview-minimum-height",
     "--spectrum-card-selected-background-color-rgb",
     "--spectrum-card-selected-background-opacity",
-    "--spectrum-card-selection-background-color-opacity",
+    "--spectrum-card-selection-background-color",
     "--spectrum-card-selection-background-size",
     "--spectrum-card-subtitle-padding-right",
     "--spectrum-card-title-font-color",
@@ -202,7 +180,6 @@
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-thickness",
     "--spectrum-gray-100",
-    "--spectrum-gray-100-rgb",
     "--spectrum-gray-200",
     "--spectrum-heading-color",
     "--spectrum-heading-line-height",