chore: remove outdated system references (#4239)

Author: castastrophe

stylelint.config.js

@@ -75,7 +75,7 @@ module.exports = {
 				],
 			},
 		],
-		"custom-property-pattern": [/^(spectrum|mod|highcontrast|system|_)/, {}],
+		"custom-property-pattern": [/^(spectrum|mod|highcontrast|_)/, {}],
 		"declaration-block-no-duplicate-custom-properties": true,
 		"declaration-property-value-no-unknown": [
 			true,
@@ -171,7 +171,7 @@ module.exports = {
 	 * -------------------------------------------------------------- */
 	overrides: [
 		{
-			files: ["components/*/index.css", "components/*/themes/spectrum.css"],
+			files: ["components/*/index.css"],
 			rules: {
 				"selector-class-pattern": [
 					"^(spectrum-|is-|u-)[A-Za-z0-9-]+", {
@@ -184,7 +184,6 @@ module.exports = {
 						/** @note this is a list of custom properties that are allowed to be unknown */
 						ignoreList: [
 							/^--mod-/,
-							/^--system-/,
 							/^--spectrum-picked-color$/,
 							/^--spectrum-downstate-(height|width)$/,
 						],
@@ -218,7 +217,7 @@ module.exports = {
 		{
 			files: ["tokens*/**/*.css(?inline)?", "tokens/**/*.css"],
 			rules: {
-				"custom-property-pattern": [/^(spectrum|color|scale|system)/, {}],
+				"custom-property-pattern": [/^(spectrum|color|scale)/, {}],
 			}
 		},
 		{

tokens/README.md

@@ -11,19 +11,6 @@ This package uses StyleDictionary to build Spectrum core tokens for CSS.
 - **Context**: This terms refers to the design language an application wants to use. Contexts previously supported were Spectrum and Express. The current system supports only Spectrum but has committed to offering backward compatibility through at least December 2024.
 - **Color**: This term refers to the color mode. The current system supports light and dark only. The lightest and darkest color modes were deprecated in the final version for **14.x**.
 - **Scale**: This term refers to the scale of the design system. The current system supports medium and large scales. The large scale is used for mobile applications and the medium scale is used for desktop applications.
-- **System variables**: These are randomly generated variable names (prefixed with `--system`) that are used to map the component-level class styles to the core tokens from the desired context. These are generated by the `postcss-add-theming-layer` plugin as part of the build and should not be relied upon for naming consistency across releases. **Do not attempt to overwrite or extend these variables in your application.**
-
-## Backwards compatibility for Spectrum 1 and Express
-
-Though the token data in this package focus on only the current context (Spectrum 2), our team is committed to offering backwards compatibility for Spectrum 1 and Express through at least December of 2024.
-
-To this end, every component that requires backward mapping support will include:
-
-- Spectrum 1: `dist/themes/spectrum.css`
-- Express: `dist/themes/express.css`
-- Spectrum 2: `dist/themes/spectrum-two.css`
-
-Consumers should load only the mappings for the components they are using in their application. This will ensure that the component-level mappings are aligned with the base CSS for each component. Spectrum 1 and Express component mappings should be loaded with the `global-vars.css` and appropriate color and scale assets from the last version of the tokens package: **v14.x**. Loading the Spectrum 1 or Express component-level mappings with the Spectrum 2 global variables will result in incorrect values being applied to the components and will break the desired design for the component.
 
 ## Usage