adobe · 5t3ph · Feb 27, 2026 · Feb 9, 2026 · Feb 9, 2026 · Feb 9, 2026
@@ -17,8 +17,6 @@ To use 2nd-gen SWC in your application, you need two things:
 
 ## Include the stylesheet
 
-{/* TODO: Help needed figuring out how to get this to export post-processing! Open to different name, ex. just `@adobe/spectrum-wc/tokens.css */}
-
 The stylesheet is available via `@adobe/spectrum-wc/swc.css`.
 
 Inclusion will be dependent on your application environment and build pipeline.
@@ -42,9 +40,11 @@ Please note that if you are re-processing the stylesheet through PostCSS and usi
 ```json
 stage: 2,
 features: {
-    'nesting-rules': true,
+    'nesting-rules': false,
     'custom-properties': false,
     'light-dark-function': false,
     'logical-properties-and-values': false,
+    'is-pseudo-class': false,
+    'cascade-layers': false,
 }
 ```
@@ -143,6 +143,21 @@ flowchart TD
 
 </details>
 
+## Renamed/Deprecated Tokens
+
+Deprecated tokens in the source data have an optional second parameter of `renamed` that when included points to the name of the replacement token.
+
+The token JSON created from `--outputType data` is in the following shape:
+
+```json
+{
+  "tokens": { "...": "..." },
+  "renamed": { "old-token": "new-token" }
+}
+```
+
+The `swc-vscode-token` package uses the `renamed` data for hover diagnostics and suggestions.
+
 ## Token Stylesheet Generation
 
 The unified token stylesheet splits tokens into two groups:
@@ -265,7 +280,7 @@ This outputs the stylesheet into the noted `--out` directory and filename, with
 Valid `--outputType` values include:
 
 - `tokens` - token stylesheet
-- `data` - token JSON
+- `data` - token JSON, split into `tokens` and `renamed`
 - `typography` - typography stylesheet
 
 ## Commands

@@ -20,7 +20,7 @@ import prettier from 'prettier';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
 
-import { allTokens, generateCSS } from './src/tokens.js';
+import { allTokenData, generateCSS } from './src/tokens.js';
 import { generateTypographyCssFile } from './src/typography.js';
 
 const argv = yargs(hideBin(process.argv))
@@ -99,7 +99,7 @@ if (outputType === 'tokens') {
 } else {
   fs.writeFileSync(
     out,
-    JSON.stringify(await allTokens(prefix, log), '', 4) + '\n',
+    JSON.stringify(await allTokenData(prefix, log), '', 4) + '\n',
     'utf8'
   );
 

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/swc-tokens",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "private": true,
   "description": "Second generation Spectrum Web Components token processing",
   "license": "Apache-2.0",

@@ -360,7 +360,13 @@ function extractTokenValues(
 
   for (const [name, token] of Object.entries(json)) {
     if (token?.deprecated) {
-      log(`[DEPRECATED] token '${name}'`);
+      if (token?.renamed) {
+        log(
+          `[RENAMED] deprecated token '${name}' renamed to '${token.renamed}'`
+        );
+      } else {
+        log(`[DEPRECATED] token '${name}'`);
+      }
       continue;
     }
 
@@ -390,6 +396,20 @@ function extractTokenValues(
   return out;
 }
 
+function extractRenamedTokenValues(json, debug = false) {
+  const out = {};
+  const log = typeof debug === 'function' ? debug : () => {};
+
+  for (const [name, token] of Object.entries(json)) {
+    if (token?.deprecated && typeof token?.renamed === 'string') {
+      out[name] = token.renamed;
+      log(`[RENAMED-MAP] '${name}' -> '${token.renamed}'`);
+    }
+  }
+
+  return out;
+}
+
 /* -----------------------------------------------------------------------------
  *  CSS Generation
  * -------------------------------------------------------------------------- */
@@ -517,8 +537,44 @@ async function loadAllTokens(prefix, debug = false) {
   );
 }
 
+async function loadAllTokenData(prefix, debug = false) {
+  const sources = [
+    ...SPECTRUM_TOKENS.map((t) => ({ ...t, src: 'spectrum' })),
+    ...CUSTOM_TOKENS.map((t) => ({ ...t, src: 'custom' })),
+  ];
+
+  const rawFiles = await Promise.all(
+    sources.map(async (s) => ({
+      ...s,
+      raw: await loadTokenJson(s.file, s.src),
+    }))
+  );
+
+  const globalLookup = Object.assign(
+    {},
+    ...rawFiles.map((f) => buildRawLookup(f.raw))
+  );
+
+  return {
+    tokens: Object.assign(
+      {},
+      ...rawFiles.map((f) =>
+        extractTokenValues(f.raw, f.resolveAliases, prefix, {
+          debug,
+          rawLookupOverride: globalLookup,
+        })
+      )
+    ),
+    renamed: Object.assign(
+      {},
+      ...rawFiles.map((f) => extractRenamedTokenValues(f.raw, debug))
+    ),
+  };
+}
+
 // Cache for loaded tokens (keyed by prefix)
 const tokenCache = new Map();
+const tokenDataCache = new Map();
 
 // Returns combined total token JSON (cached)
 export const allTokens = (prefix, debug = false) => {
@@ -529,6 +585,15 @@ export const allTokens = (prefix, debug = false) => {
   return tokenCache.get(cacheKey);
 };
 
+// Returns combined token + renamed metadata JSON (cached)
+export const allTokenData = (prefix, debug = false) => {
+  const cacheKey = `${prefix ?? ''}:${debug}`;
+  if (!tokenDataCache.has(cacheKey)) {
+    tokenDataCache.set(cacheKey, loadAllTokenData(prefix, debug));
+  }
+  return tokenDataCache.get(cacheKey);
+};
+
 // Lookup individual token values for use in component styles
 export async function lookupToken(key, prefix) {
   const tokens = await allTokens(prefix);
@@ -553,5 +618,6 @@ export const __test__ = {
   normalizePrimitive,
   normalizeSetGroup,
   extractTokenValues,
+  extractRenamedTokenValues,
   lookupToken,
 };
@@ -158,15 +158,15 @@ function getPatchedTokenName(typeVar, suffix, mode) {
 }
 
 function tokenRefFromName(name) {
-  return name ? `token('${name}')` : null;
+  return name ? `token("${name}")` : null;
 }
 
 function tokenExists(tokens, name) {
   return Boolean(tokens?.[name]);
 }
 
 function tokenRefIfExists(tokens, name) {
-  return tokenExists(tokens, name) ? `token('${name}')` : null;
+  return tokenExists(tokens, name) ? `token("${name}")` : null;
 }
 
 function warnMissing(typeVar, what, name, debug) {
@@ -175,7 +175,7 @@ function warnMissing(typeVar, what, name, debug) {
 }
 
 /**
- * Get a token('...') reference by name and warn if missing.
+ * Get a token("...") reference by name and warn if missing.
  * Use for non-variant tokens (e.g. derived line-height-*, cjk-line-height-*, etc.)
  */
 function tokenRefOrWarn(tokens, typeVar, what, tokenName, debug) {
@@ -498,7 +498,7 @@ export async function generateTypographyCssString(options = {}) {
 
   // Separate :lang() rule once for font-family only
   out += `${langSelectorList({
-    'font-family': `token('${fontTokens.cjk}')`,
+    'font-family': `token("${fontTokens.cjk}")`,
   })}\n`;
 
   for (const typeVar of variants) {
@@ -612,10 +612,10 @@ export async function generateTypographyCssString(options = {}) {
       }),
       pickValidDecls({
         color: `var(--${cpBase}-font-color, ${colorRef})`,
-        'font-family': `var(--${cpBase}-font-family, token('${defaultFont}'))`,
+        'font-family': `var(--${cpBase}-font-family, token("${defaultFont}"))`,
         'font-weight': sansWeightRef
           ? `var(--${cpBase}-font-weight, ${sansWeightRef})`
-          : `var(--${cpBase}-font-weight, token('regular-font-weight'))`,
+          : `var(--${cpBase}-font-weight, token("regular-font-weight"))`,
         'font-size': mSizeRef
           ? `var(--${cpBase}-font-size, ${mSizeRef})`
           : null,
@@ -741,16 +741,16 @@ export async function generateTypographyCssString(options = {}) {
     // Serif modifier (cascade order wins; no compounding)
     if (tokens[serifWeightTokenName]?.value) {
       out += cssBlock(`.${className}--serif`, {
-        [`--${cpBase}-font-family`]: `token('${fontTokens.serif}')`,
-        [`--${cpBase}-font-weight`]: `token('${serifWeightTokenName}')`,
+        [`--${cpBase}-font-family`]: `token("${fontTokens.serif}")`,
+        [`--${cpBase}-font-weight`]: `token("${serifWeightTokenName}")`,
       });
       out += '\n';
     }
 
     // Heavy modifier (optional)
     if (tokens[sansHeavyWeightTokenName]?.value) {
       out += cssBlock(`.${className}--heavy`, {
-        [`--${cpBase}-font-weight`]: `token('${sansHeavyWeightTokenName}')`,
+        [`--${cpBase}-font-weight`]: `token("${sansHeavyWeightTokenName}")`,
       });
       out += '\n';
     }
@@ -762,7 +762,7 @@ export async function generateTypographyCssString(options = {}) {
   out += `/* =========================\n  Modifiers\n  ========================= */\n`;
 
   out += `.${prefix}-Typography--emphasized:not(${CJK_NOT_LIST}) {
-  font-style: token('italic-font-style');
+  font-style: token("italic-font-style");
 }\n`;
 
   return out;

@@ -155,6 +155,32 @@ describe('extractTokenValues', () => {
   });
 });
 
+describe('extractRenamedTokenValues', () => {
+  const { extractRenamedTokenValues } = __test__;
+
+  it('collects renamed mapping for deprecated tokens only', () => {
+    const json = {
+      oldToken: {
+        deprecated: true,
+        renamed: 'new-token',
+        value: '1rem',
+      },
+      notDeprecated: {
+        renamed: 'ignored',
+        value: '2rem',
+      },
+      deprecatedWithoutRename: {
+        deprecated: true,
+        value: '3rem',
+      },
+    };
+
+    expect(extractRenamedTokenValues(json)).toEqual({
+      oldToken: 'new-token',
+    });
+  });
+});
+
 describe('buildRawLookup', () => {
   const { buildRawLookup } = __test__;
 

@@ -7,7 +7,9 @@ VS Code extension providing autocomplete and diagnostics for `token('...')` valu
 - Partial, case‑insensitive autocomplete for `token('...')`
 - Quote balancing and automatic trimming of trailing whitespace
 - Completions resume after editing inside an existing token
-- Hover message for unknown tokens with suggestions
+- Deprecated token detection with "renamed to..." diagnostics
+- Hover guidance that shows replacement tokens
+- Improved unknown-token suggestions that can include renamed-token candidates
 - Diagnostic messages as displayed on hover and in "Problems"
 
 ### Supported file types/languages
@@ -63,7 +65,7 @@ Deploy to build and package updated VSIX file required for VSCode to load the ex
 yarn deploy
 ```
 
-Post-build, will require uninstalling and re-installing the extension to see changes take affect.
+Post-build, will require uninstalling and re-installing the extension to see changes take effect.
 
 ### Updating extension logic
 

@@ -33,7 +33,7 @@
   },
   "displayName": "SWC token() Intellisense",
   "engines": {
-    "vscode": "1.1.37"
+    "vscode": "^1.109.0"
   },
   "homepage": "https://opensource.adobe.com/spectrum-web-components/",
   "icon": "resources/icon.png",