Skip to content

feat(link): new typography tokens, focus color and design, WHCM focus state #3570

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aramos-adobe merged 21 commits into from
Mar 13, 2025
Merged

feat(link): new typography tokens, focus color and design, WHCM focus state #3570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
a575e30
chore(link): adding yarn file
aramos-adobe Feb 19, 2025
ed32dbf
feat(link): add new migration and changeset
aramos-adobe Feb 20, 2025
097937e
chore(link): add changeset and revert template file
aramos-adobe Feb 20, 2025
4e7c083
chore(link): updating lock file
aramos-adobe Feb 20, 2025
c8ecf03
chore(link): adding missing metadata files
aramos-adobe Feb 20, 2025
899caee
Merge branch 'spectrum-two' into aramos-adobe/css1019-link-s2-migration
aramos-adobe Mar 4, 2025
c32ed10
Merge branch 'spectrum-two' into aramos-adobe/css1019-link-s2-migration
aramos-adobe Mar 6, 2025
c80c8ea
Merge branch 'spectrum-two' into aramos-adobe/css1019-link-s2-migration
aramos-adobe Mar 6, 2025
d689ffe
feat(link): update inline story, template, inline style
aramos-adobe Mar 7, 2025
56f7726
Merge branch 'aramos-adobe/css1019-link-s2-migration' of https://gith…
aramos-adobe Mar 7, 2025
8ba4d26
Merge branch 'spectrum-two' into aramos-adobe/css1019-link-s2-migration
aramos-adobe Mar 7, 2025
96e6a94
Merge branch 'spectrum-two' into aramos-adobe/css1019-link-s2-migration
aramos-adobe Mar 11, 2025
0fdb725
Merge branch 'spectrum-two' into aramos-adobe/css1019-link-s2-migration
aramos-adobe Mar 11, 2025
143410f
Merge branch 'spectrum-two' into aramos-adobe/css1019-link-s2-migration
aramos-adobe Mar 11, 2025
85e6c2d
Merge branch 'spectrum-two' into aramos-adobe/css1019-link-s2-migration
aramos-adobe Mar 13, 2025
6b99839
feat(link): updating changeset, inline docs, stories
aramos-adobe Mar 13, 2025
3046bd3
Merge branch 'aramos-adobe/css1019-link-s2-migration' of https://gith…
aramos-adobe Mar 13, 2025
6e0b181
Merge branch 'spectrum-two' into aramos-adobe/css1019-link-s2-migration
aramos-adobe Mar 13, 2025
5e6039d
chore(link): update template layout and story
aramos-adobe Mar 13, 2025
54a4f9a
chore(link): adding search metadata
aramos-adobe Mar 13, 2025
b24cbc7
chore(link): adding reason for non quiet inline
aramos-adobe Mar 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions .changeset/tasty-eagles-draw.md
View file
Open in desktop
Comment thread
rise-erpelding marked this conversation as resolved.
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
"@spectrum-css/link": major
---

### Link S2 migration

The link component is updated with S2 specifications, colors, and typography. There is a new inline variant which uses the `.spectrum-Link--inline` modifier class and the default is the standalone variant.

#### Note

- Quiet styling does not apply to the inline variant so that it is distinguishable from the surrounding text and the underline indicator is clear
- `--mod-spectrum-link-font-weight` can be used to adjust inline variant to match surrounding text. Apply font weights to this mod `inherit` does not apply.

## New tokens
Comment thread
castastrophe marked this conversation as resolved.

### Color

`spectrum-link-focus-indicator-color`
`spectrum-link-focus-indicator-thickness`
`spectrum-link-focus-indicator-gap`
`spectrum-link-corner-radius`

### Typography

`spectrum-link-line-height`
`spectrum-link-line-height-cjk-100`
`spectrum-link-font-size`
`spectrum-link-font-style`
`spectrum-link-font-weight`
`spectrum-link-text-underline-thickness`
`spectrum-link-text-underline-gap`
46 changes: 39 additions & 7 deletions components/link/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,78 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Link",
".spectrum-Link--inline",
".spectrum-Link--quiet",
".spectrum-Link--quiet:hover",
".spectrum-Link--secondary",
".spectrum-Link--staticBlack",
".spectrum-Link--staticWhite",
".spectrum-Link:active",
".spectrum-Link:focus-visible",
".spectrum-Link:hover"
".spectrum-Link:hover",
".spectrum-Link:lang(ja)",
".spectrum-Link:lang(ko)",
".spectrum-Link:lang(zh)"
],
"modifiers": [
"--mod-link-animation-duration",
"--mod-link-inline-font-weight",
"--mod-link-line-height-cjk",
"--mod-link-text-color",
"--mod-link-text-color-active",
"--mod-link-text-color-black",
"--mod-link-text-color-focus",
"--mod-link-text-color-hover",
"--mod-link-text-color-primary-active",
"--mod-link-text-color-primary-default",
"--mod-link-text-color-primary-focus",
"--mod-link-text-color-primary-hover",
"--mod-link-text-color-secondary-active",
"--mod-link-text-color-secondary-default",
"--mod-link-text-color-secondary-focus",
"--mod-link-text-color-secondary-hover",
"--mod-link-text-color-white"
],
"component": [],
"component": [
"--spectrum-link-corner-radius",
"--spectrum-link-default-font-family",
"--spectrum-link-focus-indicator-color",
"--spectrum-link-focus-indicator-gap",
"--spectrum-link-focus-indicator-thickness",
"--spectrum-link-font-size",
"--spectrum-link-font-style",
"--spectrum-link-font-weight",
"--spectrum-link-inline-font-weight",
"--spectrum-link-line-height",
"--spectrum-link-line-height-cjk",
"--spectrum-link-text-underline-gap",
"--spectrum-link-text-underline-thickness"
],
"global": [
"--spectrum-accent-content-color-default",
"--spectrum-accent-content-color-down",
"--spectrum-accent-content-color-hover",
"--spectrum-accent-content-color-key-focus",
"--spectrum-animation-duration-100",
"--spectrum-black",
"--spectrum-cjk-line-height-100",
"--spectrum-corner-radius-100",
"--spectrum-default-font-style",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
"--spectrum-font-size-100",
"--spectrum-line-height-100",
"--spectrum-medium-font-weight",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
"--spectrum-neutral-content-color-key-focus",
"--spectrum-regular-font-weight",
"--spectrum-sans-font-family-stack",
"--spectrum-text-underline-gap",
"--spectrum-text-underline-thickness",
"--spectrum-white"
],
"passthroughs": [],
"high-contrast": ["--highcontrast-link-text-color"]
"high-contrast": [
"--highcontrast-link-focus-indicator-color",
"--highcontrast-link-text-color"
]
}
83 changes: 59 additions & 24 deletions components/link/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,28 @@
* governing permissions and limitations under the License.
*/

/* Windows high contrast mode */
@media (forced-colors: active) {
.spectrum-Link {
--highcontrast-link-text-color: LinkText;
}
}
.spectrum-Link {
/* Focus state */
--spectrum-link-focus-indicator-color: var(--spectrum-focus-indicator-color);
--spectrum-link-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
--spectrum-link-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
--spectrum-link-corner-radius: var(--spectrum-corner-radius-100);

.spectrum-Link--secondary {
--mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default));
--mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover));
--mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down));
--mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus));
}
/* Typography */
--spectrum-link-default-font-family: var(--spectrum-sans-font-family-stack);

/* Standalone */
--spectrum-link-line-height: var(--spectrum-line-height-100);
--spectrum-link-line-height-cjk: var(--spectrum-cjk-line-height-100);
--spectrum-link-font-size: var(--spectrum-font-size-100);
--spectrum-link-font-style: var(--spectrum-default-font-style);
--spectrum-link-font-weight: var(--spectrum-medium-font-weight);
--spectrum-link-text-underline-thickness: var(--spectrum-text-underline-thickness);
--spectrum-link-text-underline-gap: var(--spectrum-text-underline-gap);

/* Inline */
--spectrum-link-inline-font-weight: var(--spectrum-regular-font-weight);

.spectrum-Link {
/* Remove the gray background on active links in IE 10. */
background-color: transparent;

Expand All @@ -36,29 +43,45 @@
outline: none;
cursor: pointer;

/* @deprecated --mod-link-text-color-primary-default in favor of --mod-link-text-color */
color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))));
color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--spectrum-accent-content-color-default)));
font-family: var(--spectrum-link-default-font-family);
font-weight: var(--spectrum-link-font-weight);
font-size: var(--spectrum-link-font-size);
font-style: var(--spectrum-link-font-style);
line-height: var(--spectrum-link-line-height);
text-decoration-thickness: var(--spectrum-link-text-underline-thickness);
text-underline-offset: var(--spectrum-link-text-underline-gap);

&:hover {
/* @deprecated --mod-link-text-color-primary-hover in favor of --mod-link-text-color-hover */
--mod-link-text-color: var(--mod-link-text-color-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover)));
--mod-link-text-color: var(--mod-link-text-color-hover, var(--spectrum-accent-content-color-hover));
Comment thread
castastrophe marked this conversation as resolved.
}

&:active {
/* @deprecated --mod-link-text-color-primary-active in favor of --mod-link-text-color-active */
--mod-link-text-color: var(--mod-link-text-color-active, var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down)));
--mod-link-text-color: var(--mod-link-text-color-active, var(--spectrum-accent-content-color-down));
}

&:focus-visible {
/* @deprecated --mod-link-text-color-primary-focus in favor of --mod-link-text-color-focus */
--mod-link-text-color: var(--mod-link-text-color-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus)));
--mod-link-text-color: var(--mod-link-text-color-focus, var(--spectrum-accent-content-color-key-focus));

text-decoration: underline;
text-decoration-style: double;
text-decoration-color: inherit;
outline: var(--spectrum-link-focus-indicator-thickness) solid var(--highcontrast-link-focus-indicator-color, var(--spectrum-link-focus-indicator-color));
padding: var(--spectrum-link-focus-indicator-gap);
border-radius: var(--spectrum-link-corner-radius);
}

&:lang(ja),
&:lang(zh),
&:lang(ko) {
line-height: var(--mod-link-line-height-cjk, var(--spectrum-link-line-height-cjk));
}
}

.spectrum-Link--secondary {
--mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default));
--mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover));
--mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down));
--mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus));
}

.spectrum-Link--quiet {
text-decoration: none;

Expand All @@ -67,6 +90,10 @@
}
}

.spectrum-Link--inline {
--spectrum-link-font-weight: var(--mod-link-inline-font-weight, var(--spectrum-link-inline-font-weight));
Comment thread
rise-erpelding marked this conversation as resolved.
}

.spectrum-Link--staticWhite {
--mod-link-text-color: var(--mod-link-text-color-white, var(--spectrum-white));
--mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white));
Expand All @@ -80,3 +107,11 @@
--mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black));
--mod-link-text-color-focus: var(--mod-link-text-color-black, var(--spectrum-black));
}

/* Windows high contrast mode */
@media (forced-colors: active) {
.spectrum-Link {
--highcontrast-link-text-color: LinkText;
--highcontrast-link-focus-indicator-color: LinkText;
}
}
Loading