Repository: adobe/spectrum-css
Pull request #3669: feat(tokens,card): update to @adobe/spectrum-tokens@13.3.0
Author: login: castastrophe
Labels: name: size-1 XS
description: ~1-6hrs; nearly trivial, a few hours, could do more than one in a single day.
name: feature
description: A request to add a feature or enhancement to a component
name: tokens
description: CSS Custom Properties of or relating to Spectrum Tokens
name: skip_vrt
description: Add to a PR to skip running VRT (but still pass the action)
name: ready-for-review
name: low priority
description: Not a critical update or fix; can be deprioritized if necessary
name: S2
description: Spectrum 2
Created: 2025-04-15T16:22:02Z | Merged: 2025-04-16T19:30:27Z

## Description

Pulling in the latest S2 release from `@adobe/spectrum-tokens`, v13.3.0. Details are outlined in the [changeset](https://github.com/adobe/spectrum-css/pull/3669/files#diff-f8f34138e149af373adcf16b6464425cefe58eba8a92778efaebf946ac7bbf59).

Updated card to remove `--mod-card-selected-background-color-rgb` in favor of `--mod-card-selected-background-color`. With this package update, `--spectrum-card-selection-background-color` now maps to a transparent global property of `--spectrum-transparent-(black|white)-600` depending on color context. This means the previous, hardcoded values are no longer relevant or usable.

## How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

### Validation steps

- [x] Expect the card's selected background color (applied to the ::before element) to be transparent-white-600 in light mode. (@rise-erpelding) (@cdransf)
- [x] Expect the card's selected background color (applied to the ::before element) to be transparent-black-600 in dark mode. (@rise-erpelding) (@cdransf)
- [x] Expect `--mod-card-background-color-selected` to override the previous 2 test results. (@rise-erpelding) (@cdransf)

### Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

- [ ] The pages render correctly, are accessible, and are responsive.

4. If components have been modified, VRTs have been run on this branch:

- [ ] VRTs have been run and looked at.
- [ ] Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

## To-do list

- [x] I have read the [contribution guidelines](/.github/CONTRIBUTING.md).
- [x] I have updated relevant storybook stories and templates.
- [x] I have tested these changes in Windows High Contrast mode.
- [x] If my change impacts **other components**, I have tested to make sure they don't break.
- [x] If my change impacts **documentation**, I have updated the documentation accordingly.
- [x] ✨ This pull request is ready to merge. ✨



Diff:
diff --git a/.changeset/puny-kids-rhyme.md b/.changeset/puny-kids-rhyme.md
new file mode 100644
index 00000000000..92b42d35e33
--- /dev/null
+++ b/.changeset/puny-kids-rhyme.md
@@ -0,0 +1,76 @@
+---
+"@spectrum-css/tokens": minor
+---
+
+Package update from `@adobe/spectrum-tokens@13.0.0-beta.58` to `@adobe/spectrum-tokens@13.3.0`.
+
+#### 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)`
diff --git a/.changeset/spotty-bats-deny.md b/.changeset/spotty-bats-deny.md
new file mode 100644
index 00000000000..b77d1682b85
--- /dev/null
+++ b/.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.
diff --git a/.markdownlint.json b/.markdownlint.json
index 3eb2b8c2789..427f41c1a92 100644
--- a/.markdownlint.json
+++ b/.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
diff --git a/.prettierignore b/.prettierignore
index 13158ed8ac2..bb4ffd976d5 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,6 +3,7 @@
 **/.svn
 **/.hg
 **/node_modules
+yarn.lock
 
 # Compiled and generated files
 dist
diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json
index 56e8fcaac8c..8fc5a6b28df 100644
--- a/components/card/dist/metadata.json
+++ b/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",
diff --git a/components/card/index.css b/components/card/index.css
index 0d41d088761..8eeedd3c1b8 100644
--- a/components/card/index.css
+++ b/components/card/index.css
@@ -12,11 +12,13 @@
  */
 
 .spectrum-Card {
-	--spectrum-card-border-color: var(--spectrum-gray-100);
-	--spectrum-card-border-color-hover: var(--spectrum-gray-200);
-	--spectrum-card-divider-color: var(--spectrum-gray-200);
-	--spectrum-card-preview-background-color: var(--spectrum-gray-100);
-	--spectrum-card-preview-background-color-hover: var(--spectrum-gray-200);
+	--spectrum-card-border-color: var(--mod-card-border-color, var(--spectrum-gray-100));
+	--spectrum-card-border-color-hover: var(--mod-card-border-color-hover, var(--spectrum-gray-200));
+	--spectrum-card-border-color-selected: var(--mod-card-border-color-selected, var(--spectrum-blue-700));
+
+	--spectrum-card-divider-color: var(--mod-card-divider-color, var(--spectrum-gray-200));
+	--spectrum-card-preview-background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-gray-100)));
+	--spectrum-card-preview-background-color-hover: var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-gray-200)));
 
 	/* Default Layout */
 	--spectrum-card-background-color: var(--mod-card-background-color, var(--spectrum-background-layer-2-color));
@@ -30,7 +32,6 @@
 
 	--spectrum-card-border-width: var(--mod-card-border-width, var(--spectrum-border-width-100));
 	--spectrum-card-corner-radius: var(--mod-card-corner-radius, var(--spectrum-corner-radius-100));
-	--spectrum-card-border-color-selected: var(--mod-card-border-color-selected, var(--spectrum-blue-700));
 
 	/* Typography */
 	--spectrum-card-title-font-family: var(--mod-card-title-font-family, var(--spectrum-sans-font-family-stack));
@@ -52,9 +53,6 @@
 	--spectrum-card-actions-size: var(--mod-card-actions-size, var(--spectrum-card-selection-background-size));
 	--spectrum-card-actions-border-radius: var(--mod-card-actions-border-radius, var(--spectrum-corner-radius-100));
 
-	/* TODO update to --spectrum-card-selection-background-color token once an RGB stripped value is available */
-	--spectrum-card-actions-background-color-rgb: var(--mod-card-actions-background-color-rgb, var(--spectrum-gray-100-rgb));
-	--spectrum-card-actions-background-color-opacity: var(--mod-card-actions-background-color-opacity, var(--spectrum-card-selection-background-color-opacity));
 	--spectrum-card-actions-drop-shadow-color: var(--mod-card-actions-drop-shadow-color, var(--spectrum-drop-shadow-color));
 	--spectrum-card-actions-drop-shadow-x: var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-x));
 	--spectrum-card-actions-drop-shadow-y: var(--mod-card-actions-drop-shadow-y, var(--spectrum-drop-shadow-y));
@@ -73,11 +71,6 @@
 	--spectrum-card-horizontal-body-padding: var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300));
 	--spectrum-card-horizontal-preview-padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200));
 
-	&.spectrum-Card--quiet {
-		--mod-card-minimum-width: var(--mod-card-minimum-width-quiet);
-		--mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100));
-	}
-
 	&.spectrum-Card--gallery {
 		--spectrum-card-content-margin-top: var(--spectrum-spacing-100);
 	}
@@ -93,7 +86,7 @@
 
 	border: var(--spectrum-card-border-width) solid transparent;
 	border-radius: var(--spectrum-card-corner-radius);
-	border-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
+	border-color: var(--spectrum-card-border-color);
 
 	background-color: var(--spectrum-card-background-color);
 
@@ -143,11 +136,16 @@
 	}
 
 	&:hover {
-		--mod-card-border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
+		--mod-card-border-color: var(--spectrum-card-border-color-hover);
 	}
 
-	&.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));
+	&.is-selected {
+		--mod-card-border-color: var(--spectrum-card-border-color-selected);
+
+		&::before {
+			/* @deprecated --mod-card-selected-background-color-rgb. Use --mod-card-background-color-selected instead. */
+			background-color: var(--mod-card-background-color-selected, var(--spectrum-card-selection-background-color));
+		}
 	}
 
 	&.is-drop-target {
@@ -177,7 +175,7 @@
 	inline-size: var(--spectrum-card-actions-size);
 	block-size: var(--spectrum-card-actions-size);
 	border-radius: var(--spectrum-card-actions-border-radius);
-	background-color: rgba(var(--spectrum-card-actions-background-color-rgb), var(--spectrum-card-actions-background-color-opacity));
+	background-color: var(--spectrum-card-selection-background-color);
 
 	inset-inline-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width));
 	inset-block-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width));
@@ -218,8 +216,8 @@
 	background-size: cover;
 	background-position: center center;
 
-	background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color));
-	border-block-end-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
+	background-color: var(--spectrum-card-preview-background-color);
+	border-block-end-color: var(--spectrum-card-border-color);
 }
 
 .spectrum-Card .spectrum-Divider {
@@ -290,7 +288,7 @@
 
 	color: var(--spectrum-card-body-font-color);
 	line-height: var(--spectrum-card-body-line-height);
-	border-block-start: var(--spectrum-card-border-width) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
+	border-block-start: var(--spectrum-card-border-width) solid var(--spectrum-card-divider-color);
 }
 
 .spectrum-Card-header {
@@ -303,30 +301,6 @@
 	z-index: 1;
 }
 
-.spectrum-Card--quiet {
-	.spectrum-Card-preview {
-		border: var(--spectrum-card-focus-indicator-width) solid transparent;
-	}
-
-	&:focus,
-	&.is-focused {
-		/* Quiet cards only have the focus indicator around the preview */
-		&::after {
-			border-width: 0;
-		}
-
-		.spectrum-Card-preview::after {
-			border-color: var(--spectrum-card-focus-indicator-color);
-		}
-	}
-
-	&.is-selected .spectrum-Card-preview {
-		border: var(--spectrum-card-preview-border-width-selected) solid;
-		border-color: var(--spectrum-card-border-color);
-	}
-}
-
-.spectrum-Card--quiet,
 .spectrum-Card--gallery {
 	--mod-card-border-color-hover: transparent;
 
@@ -342,7 +316,7 @@
 
 	.spectrum-Card-preview {
 		border-radius: var(--spectrum-card-corner-radius);
-		background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color)));
+		background-color: var(--spectrum-card-preview-background-color);
 		min-block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height));
 		inline-size: 100%;
 		flex: 1;
@@ -384,7 +358,7 @@
 	}
 
 	&:hover .spectrum-Card-preview {
-		background-color: var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover)));
+		background-color: var(--spectrum-card-preview-background-color-hover);
 	}
 
 	&.is-drop-target {
@@ -394,7 +368,7 @@
 
 		.spectrum-Card-preview {
 			transition: none;
-			background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color)));
+			background-color: var(--spectrum-card-preview-background-color);
 		}
 
 		.spectrum-Card-preview::before {
@@ -422,7 +396,7 @@
 	flex-direction: row;
 
 	&:hover .spectrum-Card-preview {
-		border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
+		--mod-card-border-color: var(--spectrum-card-border-color-hover);
 	}
 
 	.spectrum-Card-preview {
@@ -438,8 +412,8 @@
 		border-end-end-radius: 0;
 
 		padding: var(--spectrum-card-horizontal-preview-padding);
-		background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color));
-		border-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
+		background-color: var(--spectrum-card-preview-background-color);
+		border-color: var(--spectrum-card-border-color);
 	}
 
 	.spectrum-Card-header,
diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js
index 2d8147cda37..5afad0c1c20 100644
--- a/components/card/stories/card.stories.js
+++ b/components/card/stories/card.stories.js
@@ -1,7 +1,7 @@
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isFocused, isQuiet, isSelected } from "@spectrum-css/preview/types";
+import { isFocused, isSelected } from "@spectrum-css/preview/types";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { CardGroup } from "./card.test.js";
@@ -23,7 +23,6 @@ export default {
 			},
 			control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" },
 		},
-		isQuiet,
 		isSelected,
 		isFocused,
 		hasActions: {
@@ -109,7 +108,6 @@ export default {
 		rootClass: "spectrum-Card",
 		isSelected: false,
 		isFocused: false,
-		isQuiet: false,
 		isGrid: false,
 		isGallery: false,
 		isDropTarget: false,
@@ -131,7 +129,7 @@ export default {
 };
 
 /**
- *  Cards can either be standard or quiet style. A standard card includes a cover photo and footer, with buttons and more information. A vertical layout is default for cards, and the recommended default preview size is 2:1.
+ *  A standard card includes a cover photo and footer, with buttons and more information. A vertical layout is default for cards, and the recommended default preview size is 2:1.
  */
 export const Default = CardGroup.bind({});
 Default.args = {
@@ -176,35 +174,6 @@ Focused.parameters = {
 };
 Focused.storyName = "Default - focused";
 
-/**
- * Quiet card styling is reserved for very simple cards with little metadata. The border of the `.spectrum-Card` element is removed, and additional rounded corners are added to the `.spectrum-Card-preview` container.
- */
-export const Quiet = Template.bind({});
-Quiet.args = {
-	...Default.args,
-	showAsset: "image",
-	image: "example-ava@2x.png",
-	isQuiet: true,
-};
-Quiet.tags = ["!dev"];
-Quiet.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
-/** A quiet card for a file asset. */
-export const QuietFile = Template.bind({});
-QuietFile.storyName = "Quiet - file";
-QuietFile.args = {
-	...Quiet.args,
-	title: "FileName",
-	description: "PDF",
-	showAsset: "file",
-};
-QuietFile.tags = ["!dev"];
-QuietFile.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-
 /**
  * A card with a horizontal layout. Horizontal cards always have a square preview, and the image is cropped to fit inside the square. These can only be laid out in a tile grid where every card is the same size.
  * */
@@ -233,44 +202,6 @@ NoImage.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
-/**
- * A quiet card for a folder asset.
- * */
-export const QuietFolder = Quiet.bind({});
-QuietFolder.args = {
-	title: "Name",
-	showAsset: "folder",
-	description: "10/15/18",
-	isQuiet: true,
-};
-QuietFolder.tags = ["!dev"];
-QuietFolder.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-QuietFolder.storyName = "Quiet - folder";
-
-export const QuietFocused = Quiet.bind({});
-QuietFocused.args = {
-	...Quiet.args,
-	isFocused: true,
-};
-QuietFocused.tags = ["!dev"];
-QuietFocused.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-QuietFocused.storyName = "Quiet - focused";
-
-export const QuietSelected = Quiet.bind({});
-QuietSelected.args = {
-	...Quiet.args,
-	isSelected: true,
-};
-QuietSelected.tags = ["!dev"];
-QuietSelected.parameters = {
-	chromatic: { disableSnapshot: true },
-};
-QuietSelected.storyName = "Quiet - selected";
-
 /**
  * Card preview areas can have any aspect ratio between 4:1 (shortest) and 3:4 (tallest).
  */
diff --git a/components/card/stories/card.test.js b/components/card/stories/card.test.js
index 143d1ad8009..37883aaf287 100644
--- a/components/card/stories/card.test.js
+++ b/components/card/stories/card.test.js
@@ -21,30 +21,6 @@ export const CardGroup = Variants({
 			hasQuickAction: false,
 			footer: undefined,
 		},
-		{
-			testHeading: "Quiet",
-			showAsset: "image",
-			image: "example-ava@2x.png",
-			isQuiet: true,
-			footer: undefined,
-		},
-		{
-			testHeading: "Quiet file",
-			title: "FileName",
-			description: "PDF",
-			showAsset: "file",
-			isQuiet: true,
-			footer: undefined,
-		},
-		{
-			testHeading: "Quiet folder",
-			title: "Name",
-			showAsset: "folder",
-			description: "10/15/18",
-			isQuiet: true,
-			image: undefined,
-			footer: undefined,
-		},
 		{
 			testHeading: "Asset preview",
 			showAsset: "image",
diff --git a/components/card/stories/template.js b/components/card/stories/template.js
index 09eb0360803..0911e3a78d7 100644
--- a/components/card/stories/template.js
+++ b/components/card/stories/template.js
@@ -22,7 +22,6 @@ export const Template = ({
 	isFocused = false,
 	isSelected = false,
 	isHorizontal = false,
-	isQuiet = false,
 	isGallery = false,
 	isImageFill = false,
 	isGrid = false,
@@ -42,7 +41,6 @@ export const Template = ({
         [rootClass]: true,
         "is-selected": isSelected,
         "is-focused": isFocused,
-        [`${rootClass}--quiet`]: isQuiet,
         [`${rootClass}--gallery`]: isGallery,
         [`${rootClass}--horizontal`]: isHorizontal,
         ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -62,7 +60,7 @@ export const Template = ({
     >
       ${when(image || showAsset, () =>
         when(
-          showAsset || (isGallery && image) || isQuiet,
+          showAsset || (isGallery && image),
           () => html`
             <div
               class=${classMap({
@@ -185,7 +183,7 @@ export const Template = ({
           </div>`
       )}
       ${when(
-        footer && !isQuiet && !isHorizontal && !isGallery,
+        footer && !isHorizontal && !isGallery,
         () => html`
           <div
             class=${classMap({
diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json
index 5a4bb6de487..4fef5d731af 100644
--- a/tokens/dist/json/tokens.json
+++ b/tokens/dist/json/tokens.json
@@ -2317,22 +2317,193 @@
     "prop": "--spectrum-button-minimum-width-multiplier",
     "value": 2.25
   },
+  "card-background-loading-color": {
+    "prop": "--spectrum-card-background-loading-color",
+    "ref": "var(--spectrum-gray-100)",
+    "light": {
+      "value": "rgb(233, 233, 233)"
+    },
+    "dark": {
+      "value": "rgb(44, 44, 44)"
+    }
+  },
+  "card-background-well-color": {
+    "prop": "--spectrum-card-background-well-color",
+    "ref": "var(--spectrum-gray-100)",
+    "light": {
+      "value": "rgb(233, 233, 233)"
+    },
+    "dark": {
+      "value": "rgb(44, 44, 44)"
+    }
+  },
+  "card-default-width-extra-large": {
+    "prop": "--spectrum-card-default-width-extra-large",
+    "value": "400px"
+  },
+  "card-default-width-extra-small": {
+    "prop": "--spectrum-card-default-width-extra-small",
+    "value": "120px"
+  },
+  "card-default-width-large": {
+    "prop": "--spectrum-card-default-width-large",
+    "value": "320px"
+  },
+  "card-default-width-medium": {
+    "prop": "--spectrum-card-default-width-medium",
+    "value": "240px"
+  },
+  "card-default-width-small": {
+    "prop": "--spectrum-card-default-width-small",
+    "value": "180px"
+  },
+  "card-description-to-footer": {
+    "prop": "--spectrum-card-description-to-footer",
+    "ref": "var(--spectrum-spacing-300)",
+    "value": "16px"
+  },
+  "card-edge-to-content-compact-extra-large": {
+    "prop": "--spectrum-card-edge-to-content-compact-extra-large",
+    "value": "20px"
+  },
+  "card-edge-to-content-compact-extra-small": {
+    "prop": "--spectrum-card-edge-to-content-compact-extra-small",
+    "value": "6px"
+  },
+  "card-edge-to-content-compact-large": {
+    "prop": "--spectrum-card-edge-to-content-compact-large",
+    "value": "16px"
+  },
+  "card-edge-to-content-compact-medium": {
+    "prop": "--spectrum-card-edge-to-content-compact-medium",
+    "value": "12px"
+  },
+  "card-edge-to-content-compact-small": {
+    "prop": "--spectrum-card-edge-to-content-compact-small",
+    "value": "8px"
+  },
+  "card-edge-to-content-default-extra-large": {
+    "prop": "--spectrum-card-edge-to-content-default-extra-large",
+    "value": "24px"
+  },
+  "card-edge-to-content-default-extra-small": {
+    "prop": "--spectrum-card-edge-to-content-default-extra-small",
+    "value": "8px"
+  },
+  "card-edge-to-content-default-large": {
+    "prop": "--spectrum-card-edge-to-content-default-large",
+    "value": "20px"
+  },
+  "card-edge-to-content-default-medium": {
+    "prop": "--spectrum-card-edge-to-content-default-medium",
+    "value": "16px"
+  },
+  "card-edge-to-content-default-small": {
+    "prop": "--spectrum-card-edge-to-content-default-small",
+    "value": "12px"
+  },
+  "card-edge-to-content-spacious-extra-large": {
+    "prop": "--spectrum-card-edge-to-content-spacious-extra-large",
+    "value": "28px"
+  },
+  "card-edge-to-content-spacious-extra-small": {
+    "prop": "--spectrum-card-edge-to-content-spacious-extra-small",
+    "value": "12px"
+  },
+  "card-edge-to-content-spacious-large": {
+    "prop": "--spectrum-card-edge-to-content-spacious-large",
+    "value": "24px"
+  },
+  "card-edge-to-content-spacious-medium": {
+    "prop": "--spectrum-card-edge-to-content-spacious-medium",
+    "value": "20px"
+  },
+  "card-edge-to-content-spacious-small": {
+    "prop": "--spectrum-card-edge-to-content-spacious-small",
+    "value": "16px"
+  },
+  "card-header-to-description": {
+    "prop": "--spectrum-card-header-to-description",
+    "ref": "var(--spectrum-spacing-75)",
+    "value": "4px"
+  },
+  "card-maximum-width-extra-large": {
+    "prop": "--spectrum-card-maximum-width-extra-large",
+    "value": "460px"
+  },
+  "card-maximum-width-extra-small": {
+    "prop": "--spectrum-card-maximum-width-extra-small",
+    "value": "140px"
+  },
+  "card-maximum-width-large": {
+    "prop": "--spectrum-card-maximum-width-large",
+    "value": "370px"
+  },
+  "card-maximum-width-medium": {
+    "prop": "--spectrum-card-maximum-width-medium",
+    "value": "280px"
+  },
+  "card-maximum-width-small": {
+    "prop": "--spectrum-card-maximum-width-small",
+    "value": "210px"
+  },
+  "card-minimum-height-extra-large": {
+    "prop": "--spectrum-card-minimum-height-extra-large",
+    "value": "300px"
+  },
+  "card-minimum-height-extra-small": {
+    "prop": "--spectrum-card-minimum-height-extra-small",
+    "value": "90px"
+  },
+  "card-minimum-height-large": {
+    "prop": "--spectrum-card-minimum-height-large",
+    "value": "240px"
+  },
+  "card-minimum-height-medium": {
+    "prop": "--spectrum-card-minimum-height-medium",
+    "value": "180px"
+  },
+  "card-minimum-height-small": {
+    "prop": "--spectrum-card-minimum-height-small",
+    "value": "135px"
+  },
   "card-minimum-width": {
     "prop": "--spectrum-card-minimum-width",
     "value": "100px"
   },
+  "card-minimum-width-extra-large": {
+    "prop": "--spectrum-card-minimum-width-extra-large",
+    "value": "340px"
+  },
+  "card-minimum-width-extra-small": {
+    "prop": "--spectrum-card-minimum-width-extra-small",
+    "value": "100px"
+  },
+  "card-minimum-width-large": {
+    "prop": "--spectrum-card-minimum-width-large",
+    "value": "270px"
+  },
+  "card-minimum-width-medium": {
+    "prop": "--spectrum-card-minimum-width-medium",
+    "value": "200px"
+  },
+  "card-minimum-width-small": {
+    "prop": "--spectrum-card-minimum-width-small",
+    "value": "150px"
+  },
   "card-preview-minimum-height": {
     "prop": "--spectrum-card-preview-minimum-height",
     "value": "130px"
   },
   "card-selection-background-color": {
     "prop": "--spectrum-card-selection-background-color",
-    "ref": "var(--spectrum-gray-100)",
     "light": {
-      "value": "rgb(233, 233, 233)"
+      "ref": "var(--spectrum-transparent-white-600)",
+      "value": "rgba(255, 255, 255, 0.51)"
     },
     "dark": {
-      "value": "rgb(44, 44, 44)"
+      "ref": "var(--spectrum-transparent-black-600)",
+      "value": "rgba(0, 0, 0, 0.56)"
     }
   },
   "card-selection-background-color-opacity": {
@@ -2343,6 +2514,22 @@
     "prop": "--spectrum-card-selection-background-size",
     "value": "40px"
   },
+  "card-selection-background-size-extra-large": {
+    "prop": "--spectrum-card-selection-background-size-extra-large",
+    "value": "28px"
+  },
+  "card-selection-background-size-large": {
+    "prop": "--spectrum-card-selection-background-size-large",
+    "value": "26px"
+  },
+  "card-selection-background-size-medium": {
+    "prop": "--spectrum-card-selection-background-size-medium",
+    "value": "24px"
+  },
+  "card-selection-background-size-small": {
+    "prop": "--spectrum-card-selection-background-size-small",
+    "value": "22px"
+  },
   "celery-100": {
     "prop": "--spectrum-celery-100",
     "light": {
@@ -3516,6 +3703,46 @@
     "ref": "var(--spectrum-bold-font-weight)",
     "value": "700"
   },
+  "collection-card-minimum-height-extra-large": {
+    "prop": "--spectrum-collection-card-minimum-height-extra-large",
+    "value": "249px"
+  },
+  "collection-card-minimum-height-extra-small": {
+    "prop": "--spectrum-collection-card-minimum-height-extra-small",
+    "value": "88px"
+  },
+  "collection-card-minimum-height-hero-extra-large": {
+    "prop": "--spectrum-collection-card-minimum-height-hero-extra-large",
+    "value": "514px"
+  },
+  "collection-card-minimum-height-hero-extra-small": {
+    "prop": "--spectrum-collection-card-minimum-height-hero-extra-small",
+    "value": "168px"
+  },
+  "collection-card-minimum-height-hero-large": {
+    "prop": "--spectrum-collection-card-minimum-height-hero-large",
+    "value": "414px"
+  },
+  "collection-card-minimum-height-hero-medium": {
+    "prop": "--spectrum-collection-card-minimum-height-hero-medium",
+    "value": "317px"
+  },
+  "collection-card-minimum-height-hero-small": {
+    "prop": "--spectrum-collection-card-minimum-height-hero-small",
+    "value": "243px"
+  },
+  "collection-card-minimum-height-large": {
+    "prop": "--spectrum-collection-card-minimum-height-large",
+    "value": "202px"
+  },
+  "collection-card-minimum-height-medium": {
+    "prop": "--spectrum-collection-card-minimum-height-medium",
+    "value": "157px"
+  },
+  "collection-card-minimum-height-small": {
+    "prop": "--spectrum-collection-card-minimum-height-small",
+    "value": "124px"
+  },
   "color-area-border-color": {
     "prop": "--spectrum-color-area-border-color",
     "ref": "var(--spectrum-gray-1000)",
@@ -12052,6 +12279,10 @@
       "value": "40px"
     }
   },
+  "segmented-control-item-maximum-width": {
+    "prop": "--spectrum-segmented-control-item-maximum-width",
+    "value": "265px"
+  },
   "segmented-control-selection-border-width": {
     "prop": "--spectrum-segmented-control-selection-border-width",
     "ref": "var(--spectrum-border-width-200)",
@@ -16217,6 +16448,38 @@
       "value": "rgb(11, 151, 164)"
     }
   },
+  "user-card-minimum-height-extra-large": {
+    "prop": "--spectrum-user-card-minimum-height-extra-large",
+    "value": "236px"
+  },
+  "user-card-minimum-height-large": {
+    "prop": "--spectrum-user-card-minimum-height-large",
+    "value": "219px"
+  },
+  "user-card-minimum-height-medium": {
+    "prop": "--spectrum-user-card-minimum-height-medium",
+    "value": "202px"
+  },
+  "user-card-minimum-height-small": {
+    "prop": "--spectrum-user-card-minimum-height-small",
+    "value": "192px"
+  },
+  "user-card-minimum-height-title-below-extra-large": {
+    "prop": "--spectrum-user-card-minimum-height-title-below-extra-large",
+    "value": "263px"
+  },
+  "user-card-minimum-height-title-below-large": {
+    "prop": "--spectrum-user-card-minimum-height-title-below-large",
+    "value": "244px"
+  },
+  "user-card-minimum-height-title-below-medium": {
+    "prop": "--spectrum-user-card-minimum-height-title-below-medium",
+    "value": "224px"
+  },
+  "user-card-minimum-height-title-below-small": {
+    "prop": "--spectrum-user-card-minimum-height-title-below-small",
+    "value": "212px"
+  },
   "white": {
     "prop": "--spectrum-white",
     "value": "rgb(255, 255, 255)"
diff --git a/tokens/package.json b/tokens/package.json
index 091c9b8e0ec..a6b8c19d96c 100644
--- a/tokens/package.json
+++ b/tokens/package.json
@@ -27,7 +27,7 @@
 		"package.json"
 	],
 	"devDependencies": {
-		"@adobe/spectrum-tokens": "13.0.0-beta.58",
+		"@adobe/spectrum-tokens": "^13.3.0",
 		"@adobe/token-diff-generator": "^1.3.0",
 		"@nxkit/style-dictionary": "^6.0.0",
 		"@spectrum-tools/postcss-rgb-mapping": "1.0.0",
diff --git a/tokens/project.json b/tokens/project.json
index 92061b809b0..46ea4c8e045 100644
--- a/tokens/project.json
+++ b/tokens/project.json
@@ -47,7 +47,7 @@
 			"inputs": [{ "externalDependencies": ["@adobe/token-diff-generator", "@adobe/spectrum-tokens"] }],
 			"options": {
 				"commands": [
-					"tdiff report --old-token-version @adobe/spectrum-tokens@12.25.0 --new-token-version @adobe/spectrum-tokens@0.0.0-s2-foundations-20241121221506 --format markdown --output ./dist/tokens-diff.md"
+					"tdiff report --old-token-version @adobe/spectrum-tokens@13.0.0-beta.58 --new-token-version @adobe/spectrum-tokens@13.3.0 --format markdown --output ./dist/tokens-diff.md"
 				],
 				"cwd": "{projectRoot}",
 				"parallel": false
diff --git a/yarn.lock b/yarn.lock
index a79ea6c1756..22260cd72bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -186,10 +186,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@adobe/spectrum-tokens@npm:13.0.0-beta.58":
-  version: 13.0.0-beta.58
-  resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.58"
-  checksum: 10c0/2713a0dfd73b11172c5f9d2be4ae92c472387e74aad857575cee0a4391f029f9fa7b10f8b46e917d8972b1c7631758432130ca361ce9dfc76064af2378c12a02
+"@adobe/spectrum-tokens@npm:^13.3.0":
+  version: 13.3.0
+  resolution: "@adobe/spectrum-tokens@npm:13.3.0"
+  checksum: 10c0/38024ea32e2554c5f27539993e67af8ba41d5a19a6e02eaeb00dd45df094d0196d1823a72c71e32b2097cf55b2e5f98d2a8bd40840fa537b6801b1371fd99f4e
   languageName: node
   linkType: hard
 
@@ -5525,7 +5525,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/tokens@workspace:tokens"
   dependencies:
-    "@adobe/spectrum-tokens": "npm:13.0.0-beta.58"
+    "@adobe/spectrum-tokens": "npm:^13.3.0"
     "@adobe/token-diff-generator": "npm:^1.3.0"
     "@nxkit/style-dictionary": "npm:^6.0.0"
     "@spectrum-tools/postcss-rgb-mapping": "npm:1.0.0"


Reviews:
user: login: rise-erpelding
body: This looks good! I left one small note on quiet + selected below in case that's something we want to adjust here.
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-16T13:59:08Z
user: login: castastrophe
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T15:57:45Z
user: login: github-actions[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T17:48:35Z
user: login: cdransf
body: Looks good! All the validation steps check out. ✨
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-16T19:22:18Z

Review comments:
diff_hunk: @@ -27,7 +27,7 @@
 		"package.json"
 	],
 	"devDependencies": {
-		"@adobe/spectrum-tokens": "13.0.0-beta.58",
+		"@adobe/spectrum-tokens": "^13.3.0",
path: tokens/package.json
user: login: rise-erpelding
body: 🎉 
created_at: 2025-04-15T21:13:02Z
author_association: COLLABORATOR
path: components/card/index.css
user: login: rise-erpelding
body: There's a lingering blue background color on the quiet variant, I think because the background color gets applied to the preview for this variant? It seems like maybe there isn't a quiet variant in S2 anyway so this would go away on its own, but do we want to change that to `--spectrum-card-selection-background-color` for consistency?

![image](https://github.com/user-attachments/assets/8b6be85c-ce63-456e-b709-f3199a7dbbac)
created_at: 2025-04-16T13:17:46Z
author_association: COLLABORATOR
path: components/card/index.css
user: login: castastrophe
body: Oh good catch. What would you think if I removed quiet from Card completely here even though it's not officially being migrated here?
created_at: 2025-04-16T15:57:45Z
author_association: CONTRIBUTOR
path: yarn.lock
user: login: github-actions[bot]
body: **[markdownlint-fix]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>

https://github.com/adobe/spectrum-css/blob/9f5640e42c844062e82a62fec063030b3f824dd8/yarn.lock#L1-L20991
<!-- __reviewdog__:ChBiNGNiYmYyNThhODc5MGI1EhBtYXJrZG93bmxpbnQtZml4 -->

created_at: 2025-04-16T17:48:32Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-04-15T16:22:06Z
body: ###  🦋  Changeset detected

Latest commit: 9f5640e42c844062e82a62fec063030b3f824dd8

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 3 packages</summary>

  | Name                  | Type  |
| --------------------- | ----- |
| @spectrum-css/tokens  | Minor |
| @spectrum-css/card    | Major |
| @spectrum-css/preview | Patch |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/adobe/spectrum-css/new/feat-tokens-latest-release?filename=.changeset/fifty-years-sparkle.md&value=---%0A%22%40spectrum-css%2Fcard%22%3A%20patch%0A%22%40spectrum-css%2Ftokens%22%3A%20patch%0A---%0A%0Afeat(tokens%2Ccard)%3A%20update%20to%20%40adobe%2Fspectrum-tokens%4013.3.0%0A)


author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-15T16:29:49Z
body: <!-- NETLIFY DEPLOY COMMENT GENERATED BY ACTIONS_NETLIFY - APP ID SHA256: 94e9cffcef04e5d6d39a747e6920c3aba7ee2c8809e1b0004d9e77e32dd122ae -->
🚀 Deployed on https://pr-3669--spectrum-css.netlify.app
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-04-15T16:34:46Z
body: ## File metrics

### Summary
**Total size**: 1.38 MB<sup>*</sup>
**Total change (Δ)**: 🔴 ⬆ 6.94 KB (0.49%)

<small><em>Table reports on changes to a package's main file. Other changes can be found in the collapsed <a href="#details">Details</a> section below.</em></small>

| Package | Size | Minified | Gzipped | Δ |
| - | - | - | - | - |
| card | 16.20 KB | 15.23 KB | 2.53 KB | 🟢 ⬇ 1.93 KB |

<a name="details"></a>
<details>
<summary><b>File change details</b></summary>


#### card

| Filename | Head | Minified | Gzipped | Compared to base |
| - | - | - | - | - |
| **index.css** | 16.20 KB | 15.23 KB | 2.53 KB | 🟢 ⬇ 1.93 KB |
| metadata.json | 7.62 KB |  -  |  -  | 🟢 ⬇ 1.19 KB |

#### tokens

| Filename | Head | Minified | Gzipped | Compared to base |
| - | - | - | - | - |
| css/dark-vars.css | 46.52 KB |  -  |  -  | 🔴 ⬆ 0.08 KB |
| css/global-vars.css | 72.90 KB |  -  |  -  | 🔴 ⬆ 3.31 KB |
| css/index.css | 245.27 KB |  -  |  -  | 🔴 ⬆ 3.47 KB |
| css/large-vars.css | 40.81 KB |  -  |  -  | - |
| css/light-vars.css | 46.51 KB |  -  |  -  | 🔴 ⬆ 0.08 KB |
| css/medium-vars.css | 40.93 KB |  -  |  -  | - |
| json/tokens.json | 388.25 KB |  -  |  -  | 🔴 ⬆ 8.18 KB |

</details>

<small>
* <em>Size is the sum of all main files for packages in the library.</em><br/>
* <em>An ASCII character in UTF-8 is 8 bits or 1 byte.</em>
</small>
author_association: CONTRIBUTOR