Sample sentence with an ${anchor} in running text.
+ `;
+ }
+
+ if (context === 'links') {
+ const items = LINK_LIST_ITEMS.map((item, index) => ({
+ href: item.href,
+ label:
+ index === 0 && text !== LINK_LIST_ITEMS[0].label ? text : item.label,
+ }));
+
+ return html`
+ ` elements inside **`.swc-Typography--prose`** or **`.swc-Typography--links`** receive default Spectrum link styling when `typography.css` is loaded. Anchors inherit surrounding typography in prose; import `@adobe/spectrum-wc/link.css` and apply `.swc-Link` modifier classes when you need standalone or secondary / quiet / static-color treatments. See the [Link migration guide](../link/migration-guide.mdx).
+
+```html
+
+
+
+```
+
+### 4. Remove light variants
The `--light` modifier has been removed from both Heading and Detail. Choose a size that produces the desired visual weight in your layout.
diff --git a/2nd-gen/packages/swc/components/typography/stories/typography.stories.ts b/2nd-gen/packages/swc/components/typography/stories/typography.stories.ts
index 28d9c622e9..434c71e40a 100644
--- a/2nd-gen/packages/swc/components/typography/stories/typography.stories.ts
+++ b/2nd-gen/packages/swc/components/typography/stories/typography.stories.ts
@@ -224,6 +224,7 @@ export const MarginsModifier: Story = {
* - `h3` - Title, size L
* - `h4` - Title, size M
* - `p, li` - Body, size M
+ * - `a` - Default link styling (inherits body typography in prose)
*/
export const ProseContainer: Story = {
args: {
@@ -238,9 +239,11 @@ export const ProseContainer: Story = {
Semantic H1
Semantic H2
- Semantic paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing
- elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien
- lacinia.
+ Semantic paragraph with an
+ inline link
+ that inherits body typography. Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus
+ ultricies sapien lacinia.
Semantic H3
@@ -266,3 +269,23 @@ export const ProseContainer: Story = {
`,
};
+
+/**
+ * Link lists in footers, sidebars, and navigation regions use
+ * `.swc-Typography--links` so child `` elements receive default link
+ * styling without per-link classes. See [Link migration guide](/docs/link-migration-guide--docs)
+ * for modifier classes on individual anchors.
+ */
+export const LinkList: Story = {
+ tags: ['options'],
+ render: () => html`
+
+ `,
+};
diff --git a/2nd-gen/packages/swc/package.json b/2nd-gen/packages/swc/package.json
index 9ce58e44a1..2d5bea1df9 100644
--- a/2nd-gen/packages/swc/package.json
+++ b/2nd-gen/packages/swc/package.json
@@ -41,6 +41,12 @@
"./global-elements.css": {
"default": "./dist/global-elements.css"
},
+ "./global-link.css": {
+ "default": "./dist/global-link.css"
+ },
+ "./link.css": {
+ "default": "./dist/link.css"
+ },
"./patterns/*": {
"types": "./dist/patterns/*/index.d.ts",
"import": "./dist/patterns/*/index.js"
diff --git a/2nd-gen/packages/swc/stylesheets/global/global-link.css b/2nd-gen/packages/swc/stylesheets/global/global-link.css
new file mode 100644
index 0000000000..7f85f5b3b5
--- /dev/null
+++ b/2nd-gen/packages/swc/stylesheets/global/global-link.css
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * Opt-in baseline styling for bare `` elements application-wide.
+ *
+ * Import explicitly when the app should apply standalone Spectrum link presentation
+ * without a wrapper class or per-link BEM classes. Not included in `swc.css` and
+ * intentionally outside cascade layers so it remains easy to override.
+ *
+ * Modifier classes (`.swc-Link--secondary`, etc.) live in `link.css` — import that
+ * file alongside this one when anchors need explicit presentation control.
+ */
+
+
+@import url("../link.css");
+
+a:where(:not([class])) {
+ inline-size: fit-content;
+ font-family: token("sans-serif-font");
+ font-size: token("font-size-100");
+ font-style: token("default-font-style");
+ font-weight: token("medium-font-weight");
+ line-height: token("line-height-100");
+ color: var(--swc-link-text-color, token("accent-content-color-default"));
+ text-decoration: underline;
+ text-decoration-thickness: token("text-underline-thickness");
+ text-underline-offset: token("text-underline-gap");
+ transition: color token("animation-duration-100") ease-in-out;
+
+ &:hover {
+ color: var(--swc-link-text-color-hover, token("accent-content-color-hover"));
+ }
+
+ &:active {
+ color: var(--swc-link-text-color-down, token("accent-content-color-down"));
+ }
+
+ &:focus-visible {
+ color: var(--swc-link-text-color-focus, token("accent-content-color-key-focus"));
+ border-radius: token("corner-radius-100");
+ outline: token("focus-indicator-thickness") solid
+ var(--swc-link-focus-indicator-color, token("focus-indicator-color"));
+ outline-offset: token("focus-indicator-gap");
+ }
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ line-height: token("cjk-line-height-100");
+ }
+}
+
+@media (forced-colors: active) {
+ a:where(:not([class])) {
+ color: LinkText;
+ }
+}
diff --git a/2nd-gen/packages/swc/stylesheets/link.css b/2nd-gen/packages/swc/stylesheets/link.css
new file mode 100644
index 0000000000..c3283a5c64
--- /dev/null
+++ b/2nd-gen/packages/swc/stylesheets/link.css
@@ -0,0 +1,90 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * Standalone link presentation for native `` elements.
+ *
+ * Default anchor appearance inside `.swc-Typography--prose` and
+ * `.swc-Typography--links` ships with `typography.css` (generated). Import this
+ * stylesheet when authors need explicit BEM modifiers on anchors.
+ *
+ */
+
+.swc-Link {
+ inline-size: fit-content;
+ font-family: token("sans-serif-font");
+ font-size: token("font-size-100");
+ font-style: token("default-font-style");
+ font-weight: token("regular-font-weight");
+ line-height: token("line-height-100");
+ color: var(--swc-link-text-color, token("accent-content-color-default"));
+ text-decoration: underline;
+ text-decoration-thickness: token("text-underline-thickness");
+ text-underline-offset: token("text-underline-gap");
+ transition: color token("animation-duration-100") ease-in-out;
+
+ &:hover {
+ color: var(--swc-link-text-color-hover, token("accent-content-color-hover"));
+ }
+
+ &:active {
+ color: var(--swc-link-text-color-down, token("accent-content-color-down"));
+ }
+
+ &:focus-visible {
+ color: var(--swc-link-text-color-focus, token("accent-content-color-key-focus"));
+ border-radius: token("corner-radius-100");
+ outline: token("focus-indicator-thickness") solid var(--swc-link-focus-indicator-color, token("focus-indicator-color"));
+ outline-offset: token("focus-indicator-gap");
+ }
+
+ &:lang(ja),
+ &:lang(zh),
+ &:lang(ko) {
+ line-height: token("cjk-line-height-100");
+ }
+}
+
+.swc-Link--standalone {
+ font-weight: token("medium-font-weight");
+}
+
+.swc-Link--secondary {
+ --swc-link-text-color: token("neutral-content-color-default");
+ --swc-link-text-color-hover: token("neutral-content-color-hover");
+ --swc-link-text-color-down: token("neutral-content-color-down");
+ --swc-link-text-color-focus: token("neutral-content-color-key-focus");
+}
+
+.swc-Link--staticWhite {
+ --swc-link-text-color: token("static-white-text-color");
+ --swc-link-text-color-hover: token("static-white-text-color");
+ --swc-link-text-color-down: token("static-white-text-color");
+ --swc-link-text-color-focus: token("static-white-text-color");
+ --swc-link-focus-indicator-color: token("static-white-focus-indicator-color");
+}
+
+.swc-Link--staticBlack {
+ --swc-link-text-color: token("static-black-text-color");
+ --swc-link-text-color-hover: token("static-black-text-color");
+ --swc-link-text-color-down: token("static-black-text-color");
+ --swc-link-text-color-focus: token("static-black-text-color");
+ --swc-link-focus-indicator-color: token("static-black-focus-indicator-color");
+}
+
+.swc-Link--quiet.swc-Link--standalone {
+ text-decoration: none;
+}
+
+.swc-Link--quiet.swc-Link--standalone:hover {
+ text-decoration: underline;
+}
diff --git a/2nd-gen/packages/swc/stylesheets/typography.css b/2nd-gen/packages/swc/stylesheets/typography.css
index cea8fde677..944af24d37 100644
--- a/2nd-gen/packages/swc/stylesheets/typography.css
+++ b/2nd-gen/packages/swc/stylesheets/typography.css
@@ -534,3 +534,30 @@
.swc-Typography--emphasized:not(:lang(zh), :lang(ja), :lang(ko)) {
font-style: token("italic-font-style");
}
+
+/* =========================
+ Links (prose and link lists)
+ ========================= */
+:is(.swc-Typography--prose, .swc-Typography--links) :where(a) {
+ font: inherit;
+ color: var(--swc-link-text-color, token("accent-content-color-default"));
+ text-decoration: underline;
+ text-decoration-thickness: var(--swc-link-text-underline-thickness, token("text-underline-thickness"));
+ text-underline-offset: var(--swc-link-text-underline-gap, token("text-underline-gap"));
+ transition: color token("animation-duration-100") ease-in-out;
+}
+
+:is(.swc-Typography--prose, .swc-Typography--links) :where(a):hover {
+ color: var(--swc-link-text-color-hover, token("accent-content-color-hover"));
+}
+
+:is(.swc-Typography--prose, .swc-Typography--links) :where(a):active {
+ color: var(--swc-link-text-color-down, token("accent-content-color-down"));
+}
+
+:is(.swc-Typography--prose, .swc-Typography--links) :where(a):focus-visible {
+ color: var(--swc-link-text-color-focus, token("accent-content-color-key-focus"));
+ border-radius: token("corner-radius-100");
+ outline: token("focus-indicator-thickness") solid var(--swc-link-focus-indicator-color, token("focus-indicator-color"));
+ outline-offset: token("focus-indicator-gap");
+}
diff --git a/2nd-gen/packages/tools/swc-tokens/src/typography.js b/2nd-gen/packages/tools/swc-tokens/src/typography.js
index 1ecb47b222..54b865e519 100644
--- a/2nd-gen/packages/tools/swc-tokens/src/typography.js
+++ b/2nd-gen/packages/tools/swc-tokens/src/typography.js
@@ -128,10 +128,72 @@ const CJK_OVERRIDES = {
};
const PROSE_CLASS = 'Typography--prose';
+const LINKS_CLASS = 'Typography--links';
+
function proseSelector(prefix) {
return `.${prefix}-${PROSE_CLASS}`;
}
+function linksSelector(prefix) {
+ return `.${prefix}-${LINKS_CLASS}`;
+}
+
+function typographyLinksWrapperSelector(prefix) {
+ return `:is(${proseSelector(prefix)}, ${linksSelector(prefix)})`;
+}
+
+/**
+ * Default native anchor appearance inside typography wrappers.
+ * Uses :where(a) so BEM modifiers from link.css can override.
+ */
+function generateTypographyAnchorRules(prefix) {
+ const wrapper = typographyLinksWrapperSelector(prefix);
+ const anchor = ':where(a)';
+ const wrapperSelectors = `${wrapper} ${anchor}`;
+ const stateSelectors = (pseudo) => `${wrapper} ${anchor}${pseudo}`;
+
+ const baseDecls = pickValidDecls({
+ 'background-color': 'transparent',
+ 'text-decoration-skip': 'objects',
+ 'text-decoration': 'underline',
+ 'text-decoration-thickness': `var(--${prefix}-typography-link-text-underline-thickness, token("text-underline-thickness"))`,
+ 'text-underline-offset': `var(--${prefix}-typography-link-text-underline-gap, token("text-underline-gap"))`,
+ transition: `color token("animation-duration-100") ease-in-out`,
+ outline: 'none',
+ cursor: 'pointer',
+ color: `var(--${prefix}-typography-link-text-color, token("accent-content-color-default"))`,
+ 'font-family': 'inherit',
+ 'font-size': 'inherit',
+ 'font-style': 'inherit',
+ 'font-weight': 'inherit',
+ 'line-height': 'inherit',
+ });
+
+ const hoverDecls = pickValidDecls({
+ color: `var(--${prefix}-typography-link-text-color-hover, token("accent-content-color-hover"))`,
+ });
+
+ const activeDecls = pickValidDecls({
+ color: `var(--${prefix}-typography-link-text-color-down, token("accent-content-color-down"))`,
+ });
+
+ const focusDecls = pickValidDecls({
+ color: `var(--${prefix}-typography-link-text-color-focus, token("accent-content-color-key-focus"))`,
+ outline: `token("focus-indicator-thickness") solid var(--${prefix}-typography-link-focus-indicator-color, token("focus-indicator-color"))`,
+ 'outline-offset': 'token("focus-indicator-gap")',
+ 'border-radius': 'token("corner-radius-100")',
+ });
+
+ return `/* =========================
+ Links (prose and link lists)
+ ========================= */
+${cssBlock(wrapperSelectors, baseDecls)}
+${cssBlock(stateSelectors(':hover'), hoverDecls)}
+${cssBlock(stateSelectors(':active'), activeDecls)}
+${cssBlock(stateSelectors(':focus-visible'), focusDecls)}
+`;
+}
+
/**
* Selector aliases let us "attach" semantic selectors to an existing variant/size class
* without duplicating styling logic. These are only applied under the `--prose` container class.
@@ -785,6 +847,9 @@ export async function generateTypographyCssString(options = {}) {
font-style: token("italic-font-style");
}\n`;
+ out += '\n';
+ out += generateTypographyAnchorRules(prefix);
+
return out;
}