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

Author: castastrophe

.github/workflows/development.yml

@@ -98,8 +98,7 @@ jobs:
                   files_yaml: |
                       styles:
                         - components/*/index.css
-                        - components/*/themes/spectrum.css
-                        - components/*/themes/express.css
+                        - components/*/themes/*.css
                       eslint:
                         - components/*/stories/*.js
                       plugins:

.storybook/decorators/context.js

@@ -1,7 +1,6 @@
 import { makeDecorator, useEffect } from "@storybook/preview-api";
 import { fetchContainers, toggleStyles } from "./helpers.js";
 
-import legacyTokens from "@spectrum-css/tokens-legacy/dist/index.css?inline";
 import tokens from "@spectrum-css/tokens/dist/index.css?inline";
 
 /**
@@ -48,8 +47,6 @@ export const withContextWrapper = makeDecorator({
 			const isTesting = testingPreview;
 			const isDocs = viewMode === "docs";
 			const isRaw = Boolean(context === "raw");
-			const isModern = Boolean(context === "spectrum");
-			const isExpress = Boolean(context === "express");
 
 			// Start by attaching the appropriate tokens to the container
 			toggleStyles(document.body, "tokens", tokens, !isRaw);
@@ -60,7 +57,7 @@ export const withContextWrapper = makeDecorator({
 			}
 
 			// Start by attaching the appropriate tokens to the container
-			toggleStyles(document.body, "tokens", isModern ? tokens : legacyTokens, !isRaw);
+			toggleStyles(document.body, "tokens", tokens, !isRaw);
 
 			for (const container of fetchContainers(id, isDocs, isTesting)) {
 				// Reset the context to the original values
@@ -85,19 +82,6 @@ export const withContextWrapper = makeDecorator({
 				// Every container gets the spectrum class
 				container.classList.toggle("spectrum", !isRaw);
 
-				// S1 and S1 Express get the legacy class
-				container.classList.toggle("spectrum--legacy", !isModern && !isRaw);
-
-				// Express only gets the express class
-				container.classList.toggle("spectrum--express", isExpress && !isRaw);
-
-				// Darkest is deprecated in Spectrum 2
-				if (isModern && color === "darkest") {
-					/* eslint-disable no-console -- notify that darkest was deprecated in S2 */
-					console.warn("The 'darkest' color is deprecated in Spectrum 2. Please use 'dark' instead.");
-					color = "dark";
-				}
-
 				// Let the static color override the color if it's set
 				if (hasStaticElement && staticColorSettings[staticKey]?.color) {
 					color = staticColorSettings[staticKey].color;
@@ -109,7 +93,7 @@ export const withContextWrapper = makeDecorator({
 					color = "light";
 				}
 
-				for (let c of ["light", "dark", "darkest"]) {
+				for (let c of ["light", "dark"]) {
 					container.classList.toggle(`spectrum--${c}`, c === color && !isRaw);
 				}
 
@@ -124,7 +108,7 @@ export const withContextWrapper = makeDecorator({
 				}
 			}
 
-		}, [context, viewMode, original, staticColor, color, scale, rootClass, tokens, legacyTokens, staticColorSettings, testingPreview]);
+		}, [context, viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, testingPreview]);
 
 		return StoryFn(data);
 	},

.storybook/guides/develop.mdx

@@ -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/modes/index.js

@@ -34,7 +34,6 @@
 		"@spectrum-css/button": "workspace:^",
 		"@spectrum-css/table": "workspace:^",
 		"@spectrum-css/tokens": "workspace:^",
-		"@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^14.6.0",
 		"@spectrum-css/typography": "workspace:^",
 		"@spectrum-css/ui-icons": "workspace:^",
 		"@spectrum-css/underlay": "workspace:^"

.storybook/package.json

@@ -111,7 +111,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 {

.storybook/preview.js

@@ -13,8 +13,6 @@ export default {
 		toolbar: {
 			items: [
 				{ value: "spectrum", title: "Spectrum 2", right: "default" },
-				{ value: "legacy", title: "Spectrum 1", right: "legacy" },
-				{ value: "express", title: "Express", right: "legacy" },
 				{ value: "raw", title: "Token-free", right: "raw" },
 			],
 			dynamicTitle: true,
@@ -30,7 +28,6 @@ export default {
 			items: [
 				{ value: "light", title: "Light", right: "default" },
 				{ value: "dark", title: "Dark" },
-				{ value: "darkest", title: "Darkest", right: "deprecated" },
 			],
 			dynamicTitle: true,
 		},