Skip to content

feat: add link decoration design tokens #4531

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
mxschll merged 2 commits into from
May 20, 2026
+87 −11
Merged

feat: add link decoration design tokens #4531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e958e0
feat: add link decoration design tokens
mxschll May 19, 2026
49d7a31
chore: update jest snapshots
mxschll May 19, 2026
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
40 changes: 40 additions & 0 deletions src/__integ__/__snapshots__/themes.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -574,6 +574,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
"color-text-link-button-normal-hover": "#16191f",
"color-text-link-button-underline": "currentColor",
"color-text-link-button-underline-hover": "currentColor",
"color-text-link-decoration-default": "currentColor",
"color-text-link-decoration-hover": "currentColor",
"color-text-link-default": "#0073bb",
"color-text-link-hover": "#0a4a74",
"color-text-link-info-default": "#0073bb",
Expand Down Expand Up @@ -615,6 +617,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
"color-white": "#ffffff",
"font-button-letter-spacing": "0.25px",
"font-chart-detail-size": "14px",
"font-decoration-style-link": "solid",
"font-decoration-thickness-link": "1px",
"font-decoration-thickness-link-display-l": "2px",
"font-display-label-weight": "400",
"font-expandable-heading-size": "14px",
"font-family-base": ""Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif",
Expand Down Expand Up @@ -1430,6 +1435,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
"color-text-link-button-normal-hover": "#fafafa",
"color-text-link-button-underline": "currentColor",
"color-text-link-button-underline-hover": "currentColor",
"color-text-link-decoration-default": "currentColor",
"color-text-link-decoration-hover": "currentColor",
"color-text-link-default": "#44b9d6",
"color-text-link-hover": "#99cbe4",
"color-text-link-info-default": "#44b9d6",
Expand Down Expand Up @@ -1471,6 +1478,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
"color-white": "#ffffff",
"font-button-letter-spacing": "0.25px",
"font-chart-detail-size": "14px",
"font-decoration-style-link": "solid",
"font-decoration-thickness-link": "1px",
"font-decoration-thickness-link-display-l": "2px",
"font-display-label-weight": "400",
"font-expandable-heading-size": "14px",
"font-family-base": ""Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif",
Expand Down Expand Up @@ -2286,6 +2296,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
"color-text-link-button-normal-hover": "#16191f",
"color-text-link-button-underline": "currentColor",
"color-text-link-button-underline-hover": "currentColor",
"color-text-link-decoration-default": "currentColor",
"color-text-link-decoration-hover": "currentColor",
"color-text-link-default": "#0073bb",
"color-text-link-hover": "#0a4a74",
"color-text-link-info-default": "#0073bb",
Expand Down Expand Up @@ -2327,6 +2339,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
"color-white": "#ffffff",
"font-button-letter-spacing": "0.25px",
"font-chart-detail-size": "14px",
"font-decoration-style-link": "solid",
"font-decoration-thickness-link": "1px",
"font-decoration-thickness-link-display-l": "2px",
"font-display-label-weight": "400",
"font-expandable-heading-size": "14px",
"font-family-base": ""Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif",
Expand Down Expand Up @@ -3142,6 +3157,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
"color-text-link-button-normal-hover": "#16191f",
"color-text-link-button-underline": "currentColor",
"color-text-link-button-underline-hover": "currentColor",
"color-text-link-decoration-default": "currentColor",
"color-text-link-decoration-hover": "currentColor",
"color-text-link-default": "#0073bb",
"color-text-link-hover": "#0a4a74",
"color-text-link-info-default": "#0073bb",
Expand Down Expand Up @@ -3183,6 +3200,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
"color-white": "#ffffff",
"font-button-letter-spacing": "0.25px",
"font-chart-detail-size": "14px",
"font-decoration-style-link": "solid",
"font-decoration-thickness-link": "1px",
"font-decoration-thickness-link-display-l": "2px",
"font-display-label-weight": "400",
"font-expandable-heading-size": "14px",
"font-family-base": ""Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif",
Expand Down Expand Up @@ -3998,6 +4018,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
"color-text-link-button-normal-hover": "#002b66",
"color-text-link-button-underline": "transparent",
"color-text-link-button-underline-hover": "transparent",
"color-text-link-decoration-default": "currentColor",
"color-text-link-decoration-hover": "currentColor",
"color-text-link-default": "#006ce0",
"color-text-link-hover": "#002b66",
"color-text-link-info-default": "#006ce0",
Expand Down Expand Up @@ -4039,6 +4061,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
"color-white": "#ffffff",
"font-button-letter-spacing": "0.005em",
"font-chart-detail-size": "12px",
"font-decoration-style-link": "solid",
"font-decoration-thickness-link": "1px",
"font-decoration-thickness-link-display-l": "2px",
"font-display-label-weight": "700",
"font-expandable-heading-size": "16px",
"font-family-base": ""Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif",
Expand Down Expand Up @@ -4854,6 +4879,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-link-button-normal-hover": "#002b66",
"color-text-link-button-underline": "transparent",
"color-text-link-button-underline-hover": "transparent",
"color-text-link-decoration-default": "currentColor",
"color-text-link-decoration-hover": "currentColor",
"color-text-link-default": "#006ce0",
"color-text-link-hover": "#002b66",
"color-text-link-info-default": "#006ce0",
Expand Down Expand Up @@ -4895,6 +4922,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-white": "#ffffff",
"font-button-letter-spacing": "0.005em",
"font-chart-detail-size": "12px",
"font-decoration-style-link": "solid",
"font-decoration-thickness-link": "1px",
"font-decoration-thickness-link-display-l": "2px",
"font-display-label-weight": "700",
"font-expandable-heading-size": "16px",
"font-family-base": ""Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif",
Expand Down Expand Up @@ -5710,6 +5740,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-link-button-normal-hover": "#75cfff",
"color-text-link-button-underline": "transparent",
"color-text-link-button-underline-hover": "transparent",
"color-text-link-decoration-default": "currentColor",
"color-text-link-decoration-hover": "currentColor",
"color-text-link-default": "#42b4ff",
"color-text-link-hover": "#75cfff",
"color-text-link-info-default": "#42b4ff",
Expand Down Expand Up @@ -5751,6 +5783,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-white": "#ffffff",
"font-button-letter-spacing": "0.005em",
"font-chart-detail-size": "12px",
"font-decoration-style-link": "solid",
"font-decoration-thickness-link": "1px",
"font-decoration-thickness-link-display-l": "2px",
"font-display-label-weight": "700",
"font-expandable-heading-size": "16px",
"font-family-base": ""Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif",
Expand Down Expand Up @@ -6566,6 +6601,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-link-button-normal-hover": "#75cfff",
"color-text-link-button-underline": "transparent",
"color-text-link-button-underline-hover": "transparent",
"color-text-link-decoration-default": "currentColor",
"color-text-link-decoration-hover": "currentColor",
"color-text-link-default": "#42b4ff",
"color-text-link-hover": "#75cfff",
"color-text-link-info-default": "#42b4ff",
Expand Down Expand Up @@ -6607,6 +6644,9 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-white": "#ffffff",
"font-button-letter-spacing": "0.005em",
"font-chart-detail-size": "12px",
"font-decoration-style-link": "solid",
"font-decoration-thickness-link": "1px",
"font-decoration-thickness-link-display-l": "2px",
"font-display-label-weight": "700",
"font-expandable-heading-size": "16px",
"font-family-base": ""Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif",
Expand Down
1 change: 1 addition & 0 deletions src/internal/styles/links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
@mixin link-font-size-style($font-size) {
text-underline-offset: map.get($font-size, 'text-underline-offset');
text-decoration-thickness: map.get($font-size, 'text-decoration-thickness');
text-decoration-style: awsui.$font-decoration-style-link;
Comment thread
mxschll marked this conversation as resolved.
}

@mixin link-default($font-size: 'inherit') {
Expand Down
22 changes: 11 additions & 11 deletions src/link/constants.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,39 +10,39 @@
$link-font-sizes: (
'body-s': (
'text-underline-offset': 0.3em,
'text-decoration-thickness': 1px,
'text-decoration-thickness': awsui.$font-decoration-thickness-link,
),
'body-m': (
'text-underline-offset': 0.25em,
'text-decoration-thickness': 1px,
'text-decoration-thickness': awsui.$font-decoration-thickness-link,
),
'heading-xs': (
'text-underline-offset': 0.25em,
'text-decoration-thickness': 1px,
'text-decoration-thickness': awsui.$font-decoration-thickness-link,
),
'heading-s': (
'text-underline-offset': 0.3em,
'text-decoration-thickness': 1px,
'text-decoration-thickness': awsui.$font-decoration-thickness-link,
),
'heading-m': (
'text-underline-offset': 0.25em,
'text-decoration-thickness': 1px,
'text-decoration-thickness': awsui.$font-decoration-thickness-link,
),
'heading-l': (
'text-underline-offset': 0.25em,
'text-decoration-thickness': 1px,
'text-decoration-thickness': awsui.$font-decoration-thickness-link,
),
'heading-xl': (
'text-underline-offset': 0.25em,
'text-decoration-thickness': 1px,
'text-decoration-thickness': awsui.$font-decoration-thickness-link,
),
'display-l': (
'text-underline-offset': 0.25em,
'text-decoration-thickness': 2px,
'text-decoration-thickness': awsui.$font-decoration-thickness-link-display-l,
),
Copy link
Copy Markdown
Member Author

@mxschll mxschll May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one uses 2px, so we use a different token. If necessary, we can split the others up too, but there's currently no need for it.

'inherit': (
'text-underline-offset': 0.25em,
'text-decoration-thickness': 1px,
'text-decoration-thickness': awsui.$font-decoration-thickness-link,
),
);

Expand Down Expand Up @@ -75,8 +75,8 @@ $link-variants: (
'text-color-active': awsui.$color-text-link-hover,
'font-weight': inherit,
'decoration-line': underline,
'decoration-color': currentColor,
'decoration-color-hover': currentColor,
'decoration-color': awsui.$color-text-link-decoration-default,
'decoration-color-hover': awsui.$color-text-link-decoration-hover,
'letter-spacing': normal,
),
'info': (
Expand Down
5 changes: 5 additions & 0 deletions style-dictionary/utils/token-names.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -762,6 +762,8 @@ export type ColorsTokenName =
| 'colorTextLinkButtonUnderlineHover'
| 'colorTextLinkDefault'
| 'colorTextLinkHover'
| 'colorTextLinkDecorationDefault'
| 'colorTextLinkDecorationHover'
| 'colorTextLinkSecondaryDefault'
| 'colorTextLinkSecondaryHover'
| 'colorTextLinkInfoDefault'
Expand Down Expand Up @@ -824,6 +826,9 @@ export type TypographyTokenName =
| 'fontHeaderH2DescriptionSize'
| 'fontLinkButtonLetterSpacing'
| 'fontLinkButtonWeight'
| 'fontDecorationThicknessLink'
| 'fontDecorationThicknessLinkDisplayL'
| 'fontDecorationStyleLink'
| 'fontPanelHeaderLineHeight'
| 'fontPanelHeaderSize'
| 'fontSizeBodyM'
Expand Down
2 changes: 2 additions & 0 deletions style-dictionary/visual-refresh/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
colorTextLayoutToggleSelected: { light: '{colorWhite}', dark: '{colorNeutral950}' },
colorTextLinkDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
colorTextLinkHover: { light: '{colorPrimary900}', dark: '{colorPrimary300}' },
colorTextLinkDecorationDefault: 'currentColor',
colorTextLinkDecorationHover: 'currentColor',
colorTextLinkSecondaryDefault: '{colorTextLinkDefault}',
colorTextLinkSecondaryHover: '{colorTextLinkHover}',
colorTextLinkInfoDefault: '{colorTextLinkDefault}',
Expand Down
10 changes: 10 additions & 0 deletions style-dictionary/visual-refresh/metadata/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -875,6 +875,16 @@ const metadata: StyleDictionary.MetadataIndex = {
public: true,
themeable: true,
},
colorTextLinkDecorationDefault: {
description: 'The default color of the text decoration (underline) of links. Defaults to the link text color.',
public: false,
themeable: true,
},
colorTextLinkDecorationHover: {
description: 'The hover color of the text decoration (underline) of links. Defaults to the link hover text color.',
public: false,
themeable: true,
},
colorTextLinkSecondaryDefault: {
description:
'The default color for secondary links. For example: links with lower visual emphasis or supplementary content.',
Expand Down
15 changes: 15 additions & 0 deletions style-dictionary/visual-refresh/metadata/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,21 @@ const metadata: StyleDictionary.MetadataIndex = {
themeable: true,
public: true,
},
fontDecorationThicknessLink: {
description: 'The text decoration thickness of links.',
themeable: true,
public: false,
},
fontDecorationThicknessLinkDisplayL: {
description: 'The text decoration thickness of links at display-l size.',
themeable: true,
public: false,
},
fontDecorationStyleLink: {
description: 'The text decoration style of links. For example: underline, dashed, dotted.',
themeable: true,
public: false,
},
fontWeightBreadcrumbCurrent: {
description: 'The font weight of the current breadcrumb item (the page the user is currently viewing).',
themeable: true,
Expand Down
3 changes: 3 additions & 0 deletions style-dictionary/visual-refresh/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ export const tokens: StyleDictionary.TypographyDictionary = {
fontBoxValueLargeWeight: '700',
fontButtonLetterSpacing: '0.005em',
fontChartDetailSize: '{fontSizeBodyS}',
fontDecorationStyleLink: 'solid',
fontDecorationThicknessLink: '1px',
fontDecorationThicknessLinkDisplayL: '2px',
fontDisplayLabelWeight: '700',
fontExpandableHeadingSize: '{fontSizeHeadingS}',
fontFamilyBase: "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
Expand Down
Loading