fix(pagination): deprecate legacy features to align with foundations

Author: castastrophe

.storybook/modes/index.js

@@ -12,31 +12,22 @@
  */
 
 const modes = {
-    "Light | LTR": {
-        color: "light",
-        textDirection: "ltr",
-    },
-    "Dark | RTL": {
-        color: "dark",
-        textDirection: "rtl",
-    },
-    "S1 | Light | LTR": {
-        context: "legacy",
-        color: "light",
-        textDirection: "ltr",
-    },
-    "Express | Light | LTR": {
-        context: "express",
-        color: "light",
-        textDirection: "ltr",
-    },
+	Light: {
+		color: "light",
+	},
+	Dark: {
+		color: "dark",
+	},
+	RTL: {
+		textDirection: "rtl",
+	},
 };
 
 export default modes;
 
 export const disableDefaultModes = {
-    ...Object.keys(modes).reduce((acc, key) => {
-        acc[key] = { disable: true };
-        return acc;
-    }, {}),
+	...Object.keys(modes).reduce((acc, key) => {
+		acc[key] = { disable: true };
+		return acc;
+	}, {}),
 };

.storybook/preview.js

@@ -95,7 +95,7 @@ export const parameters = {
 	// Set an empty object to avoid the "undefined" value in the ComponentDetails doc block
 	packageJson: {},
 	// A list of published npm tags that should not appear in the ComponentDetails doc block
-	ignoredTags: ["beta", "next"],
+	ignoredTags: ["beta"],
 };
 
 export default {

components/card/index.css

@@ -12,6 +12,12 @@
  */
 
 .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);
+
 	/* Default Layout */
 	--spectrum-card-background-color: var(--mod-card-background-color, var(--spectrum-background-layer-2-color));
 	--spectrum-card-body-spacing: var(--mod-card-body-spacing, var(--spectrum-spacing-400));
@@ -22,13 +28,9 @@
 	--spectrum-card-footer-padding-top: var(--mod-card-footer-padding-block-start, var(--spectrum-spacing-100));
 	--spectrum-card-subtitle-padding-right: var(--mod-card-subtitle-padding-right, var(--spectrum-spacing-100));
 
-	--spectrum-card-border-width: var(--spectrum-border-width-100);
-	--spectrum-card-corner-radius: var(--spectrum-corner-radius-100);
-	--spectrum-card-border-color: var(--spectrum-gray-100);
-	--spectrum-card-border-color-hover: var(--spectrum-gray-200);
-	--spectrum-card-border-color-selected: var(--spectrum-blue-700);
-
-	--spectrum-card-divider-color: var(--spectrum-gray-200);
+	--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));
@@ -65,40 +67,22 @@
 	/* Selected */
 	--spectrum-card-selected-background-opacity: var(--mod-card-selected-background-opacity, 0.1); /* table-selected-row-background-opacity does not exist in tokens yet */
 
-	--spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100);
-	--spectrum-card-preview-background-color: var(--spectrum-background-base-color);
-	--spectrum-card-preview-background-color-hover: var(--spectrum-gray-300);
+	--spectrum-card-preview-border-width-selected: var(--mod-card-preview-border-width-selected, var(--spectrum-border-width-100));
 
 	/* Horizontal */
 	--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));
 
-	/* TODO: These are placeholder until recursive RGB is available */
-	.spectrum--light & {
-		--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
+	&.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);
 	}
-}
 
-/* Quiet/Gallery */
-.spectrum-Card--quiet,
-.spectrum-Card--gallery {
-	--mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100));
-	--mod-card-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width));
-}
-
-.spectrum-Card--quiet,
-.spectrum-Card--gallery,
-.spectrum-Card--horizontal {
-	--mod-card-preview-background-color: var(--spectrum-card-preview-background-color-quiet, var(--spectrum-background-base-color));
-	--spectrum-card-preview-background-color-hover: var(--spectrum-card-background-color-hover-quiet, var(--spectrum-gray-200));
-}
-
-.spectrum-Card {
 	position: relative;
 	display: inline-flex;
 	flex-direction: column;
@@ -254,12 +238,10 @@
 }
 
 .spectrum-Card-body {
-	/* @deprecation --mod-card-title-padding-top has been renamed to --mod-card-body-padding-block-start
-	   and will be removed in a future version. */
-	padding-block-start: var(--mod-card-body-padding-block-start, var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top)));
-	padding-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
-	padding-inline-start: var(--mod-card-body-padding-inline-start, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
-	padding-block-end: var(--mod-card-body-padding-block-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
+	padding-block-start: var(--spectrum-card-body-padding-block-start);
+	padding-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
+	padding-inline-start: var(--mod-card-body-padding-inline-start, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
+	padding-block-end: var(--mod-card-body-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
 }
 
 .spectrum-Card-preview {
@@ -305,18 +287,15 @@
 
 .spectrum-Card-footer {
 	/* Accommodate for wanting less spacing between body and footer */
-	margin-block-start: var(--mod-card-footer-margin-block-start, calc(-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-content-margin-bottom, var(--spectrum-card-content-margin-bottom)))));
-	margin-inline-start: var(--mod-card-footer-margin-inline-start, var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)));
-	margin-inline-end: var(--mod-card-footer-margin-inline-end, var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)));
-	padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
-
-	/* @deprecation --mod-card-footer-margin-top has been renamed to --mod-card-footer-padding-block-start
-	   and will be removed in a future version. */
-	padding-block-start: var(--mod-card-footer-padding-block-start, var(--mod-card-footer-margin-top, var(--spectrum-card-footer-padding-top)));
-
-	color: var(--highcontrast-card-body-font-color, var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)));
-	line-height: var(--mod-card-body-line-height, var(--spectrum-card-body-line-height));
-	border-block-start: var(--mod-card-border-width, var(--spectrum-card-border-width)) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
+	margin-block-start: var(--mod-card-footer-margin-block-start, calc(-1 * (var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom))));
+	margin-inline-start: var(--mod-card-footer-margin-inline-start, var(--spectrum-card-body-spacing));
+	margin-inline-end: var(--mod-card-footer-margin-inline-end, var(--spectrum-card-body-spacing));
+	padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
+	padding-block-start: var(--spectrum-card-footer-padding-top);
+
+	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));
 }
 
 .spectrum-Card-header {
@@ -468,9 +447,9 @@
 		align-items: center;
 		justify-content: center;
 
-		border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
+		border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
 		border-start-end-radius: 0;
-		border-end-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
+		border-end-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
 		border-end-end-radius: 0;
 
 		padding: var(--spectrum-card-horizontal-preview-padding);

components/card/metadata/metadata.json

@@ -1,7 +1,6 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".spectrum--light .spectrum-Card",
     ".spectrum-Card",
     ".spectrum-Card .spectrum-Divider",
     ".spectrum-Card--gallery",
@@ -63,6 +62,7 @@
     ".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",
@@ -102,6 +102,7 @@
     "--mod-card-body-spacing",
     "--mod-card-border-color",
     "--mod-card-border-color-hover",
+    "--mod-card-border-color-selected",
     "--mod-card-border-width",
     "--mod-card-content-margin-bottom",
     "--mod-card-content-margin-top",
@@ -113,7 +114,6 @@
     "--mod-card-footer-margin-block-start",
     "--mod-card-footer-margin-inline-end",
     "--mod-card-footer-margin-inline-start",
-    "--mod-card-footer-margin-top",
     "--mod-card-footer-padding-block-end",
     "--mod-card-footer-padding-block-start",
     "--mod-card-horizontal-body-padding",
@@ -122,6 +122,7 @@
     "--mod-card-minimum-width-quiet",
     "--mod-card-preview-background-color",
     "--mod-card-preview-background-color-hover",
+    "--mod-card-preview-border-width-selected",
     "--mod-card-preview-minimum-height",
     "--mod-card-selected-background-color-rgb",
     "--mod-card-selected-background-opacity",
@@ -133,7 +134,6 @@
     "--mod-card-title-font-weight",
     "--mod-card-title-line-height",
     "--mod-card-title-padding-right",
-    "--mod-card-title-padding-top",
     "--mod-overlay-animation-duration"
   ],
   "component": [
@@ -147,7 +147,6 @@
     "--spectrum-card-actions-size",
     "--spectrum-card-actions-spacing",
     "--spectrum-card-background-color",
-    "--spectrum-card-background-color-hover-quiet",
     "--spectrum-card-body-font-color",
     "--spectrum-card-body-font-family",
     "--spectrum-card-body-font-size",
@@ -172,7 +171,6 @@
     "--spectrum-card-minimum-width",
     "--spectrum-card-preview-background-color",
     "--spectrum-card-preview-background-color-hover",
-    "--spectrum-card-preview-background-color-quiet",
     "--spectrum-card-preview-border-width-selected",
     "--spectrum-card-preview-minimum-height",
     "--spectrum-card-selected-background-color-rgb",
@@ -186,15 +184,13 @@
     "--spectrum-card-title-font-style",
     "--spectrum-card-title-font-weight",
     "--spectrum-card-title-line-height",
-    "--spectrum-card-title-padding-right",
-    "--spectrum-card-title-padding-top"
+    "--spectrum-card-title-padding-right"
   ],
   "global": [
     "--spectrum-animation-duration-100",
     "--spectrum-background-base-color",
     "--spectrum-background-layer-2-color",
     "--spectrum-blue-700",
-    "--spectrum-blue-900-rgb",
     "--spectrum-body-color",
     "--spectrum-body-line-height",
     "--spectrum-body-sans-serif-font-style",
@@ -211,7 +207,6 @@
     "--spectrum-gray-100",
     "--spectrum-gray-100-rgb",
     "--spectrum-gray-200",
-    "--spectrum-gray-300",
     "--spectrum-heading-color",
     "--spectrum-heading-line-height",
     "--spectrum-heading-sans-serif-font-style",
@@ -225,5 +220,5 @@
   ],
   "system-theme": [],
   "passthroughs": [],
-  "high-contrast": ["--highcontrast-card-body-font-color"]
+  "high-contrast": []
 }

components/card/metadata/mods.md

@@ -26,6 +26,7 @@
 | `--mod-card-body-spacing`                     |
 | `--mod-card-border-color`                     |
 | `--mod-card-border-color-hover`               |
+| `--mod-card-border-color-selected`            |
 | `--mod-card-border-width`                     |
 | `--mod-card-content-margin-bottom`            |
 | `--mod-card-content-margin-top`               |
@@ -37,7 +38,6 @@
 | `--mod-card-footer-margin-block-start`        |
 | `--mod-card-footer-margin-inline-end`         |
 | `--mod-card-footer-margin-inline-start`       |
-| `--mod-card-footer-margin-top`                |
 | `--mod-card-footer-padding-block-end`         |
 | `--mod-card-footer-padding-block-start`       |
 | `--mod-card-horizontal-body-padding`          |
@@ -46,6 +46,7 @@
 | `--mod-card-minimum-width-quiet`              |
 | `--mod-card-preview-background-color`         |
 | `--mod-card-preview-background-color-hover`   |
+| `--mod-card-preview-border-width-selected`    |
 | `--mod-card-preview-minimum-height`           |
 | `--mod-card-selected-background-color-rgb`    |
 | `--mod-card-selected-background-opacity`      |
@@ -57,5 +58,4 @@
 | `--mod-card-title-font-weight`                |
 | `--mod-card-title-line-height`                |
 | `--mod-card-title-padding-right`              |
-| `--mod-card-title-padding-top`                |
 | `--mod-overlay-animation-duration`            |

components/pagination/CHANGELOG.md

@@ -357,11 +357,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 🗓 2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/pagination@7.1.6...@spectrum-css/pagination@8.0.0)
 
-\*feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
+- feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
 
 ### 🛑 BREAKING CHANGES
- - Removes component-builder & component-builder-simple for script leveraging postcss
 
+- Removes component-builder & component-builder-simple for script leveraging postcss
 - Imports added to index.css and themes/express.css
 
 <a name="7.1.6"></a>
@@ -412,7 +412,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### 🐛 Bug fixes
 
-\*deprecate logical transform plugin ([#2437](https://github.com/adobe/spectrum-css/issues/2437))([ff5dda6](https://github.com/adobe/spectrum-css/commit/ff5dda6))
+- deprecate logical transform plugin ([#2437](https://github.com/adobe/spectrum-css/issues/2437))([ff5dda6](https://github.com/adobe/spectrum-css/commit/ff5dda6))
 
 <a name="7.1.0"></a>
 
@@ -422,7 +422,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### ✨ Features
 
-\*remove theme files without content([1eadd4f](https://github.com/adobe/spectrum-css/commit/1eadd4f))
+- remove theme files without content([1eadd4f](https://github.com/adobe/spectrum-css/commit/1eadd4f))
 
 <a name="7.0.5"></a>
 
@@ -440,7 +440,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 **Note:** Version bump only for package @spectrum-css/pagination
 
-<a name="7.0.3"></a>
+<a name="7.0.3"></a>'
 
 ## 7.0.3
 
@@ -470,12 +470,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 🗓 2023-10-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/pagination@6.0.50...@spectrum-css/pagination@7.0.0)
 
-\*feat(pagination)!: migrate to spectrum tokens package([f29a74d](https://github.com/adobe/spectrum-css/commit/f29a74d))
+- feat(pagination)!: migrate to spectrum tokens package([f29a74d](https://github.com/adobe/spectrum-css/commit/f29a74d))
 
 ### 🛑 BREAKING CHANGES
 
-    		*
-    		Replaces DNA tokens with Spectrum tokens.
+- Replaces DNA tokens with Spectrum tokens.
 
 Update build to use Spectrum tokens.
 Remove skin.css and incorporate its CSS into index.css.
@@ -590,7 +589,7 @@ Add the "Button style" version of Pagination from the docs to Storybook.
 
 ### 🔙 Reverts
 
-\*gulp and build updates ([#2121](https://github.com/adobe/spectrum-css/issues/2121))([03a37f5](https://github.com/adobe/spectrum-css/commit/03a37f5)), closes[#2099](https://github.com/adobe/spectrum-css/issues/2099)
+- gulp and build updates ([#2121](https://github.com/adobe/spectrum-css/issues/2121))([03a37f5](https://github.com/adobe/spectrum-css/commit/03a37f5)), closes[#2099](https://github.com/adobe/spectrum-css/issues/2099)
 
 <a name="6.0.40"></a>
 
@@ -656,7 +655,7 @@ Add the "Button style" version of Pagination from the docs to Storybook.
 
 ### 🐛 Bug fixes
 
-\*icon sizing in Storybook story templates ([#2037](https://github.com/adobe/spectrum-css/issues/2037))([c90c8a3](https://github.com/adobe/spectrum-css/commit/c90c8a3))
+- icon sizing in Storybook story templates ([#2037](https://github.com/adobe/spectrum-css/issues/2037))([c90c8a3](https://github.com/adobe/spectrum-css/commit/c90c8a3))
 
 <a name="6.0.32"></a>
 
@@ -714,7 +713,7 @@ Add the "Button style" version of Pagination from the docs to Storybook.
 
 ### 🐛 Bug fixes
 
-\*restore files to pre-formatted state([491dbcb](https://github.com/adobe/spectrum-css/commit/491dbcb))
+- restore files to pre-formatted state([491dbcb](https://github.com/adobe/spectrum-css/commit/491dbcb))
 
 <a name="6.0.25"></a>