diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index d369271406..15a12f5214 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", @@ -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", diff --git a/src/internal/styles/links.scss b/src/internal/styles/links.scss index 597a01ee4f..fe02e9f024 100644 --- a/src/internal/styles/links.scss +++ b/src/internal/styles/links.scss @@ -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; } @mixin link-default($font-size: 'inherit') { diff --git a/src/link/constants.scss b/src/link/constants.scss index 9873e8f2e6..b26d1f3932 100644 --- a/src/link/constants.scss +++ b/src/link/constants.scss @@ -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, ), 'inherit': ( 'text-underline-offset': 0.25em, - 'text-decoration-thickness': 1px, + 'text-decoration-thickness': awsui.$font-decoration-thickness-link, ), ); @@ -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': ( diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 5f0a74ba41..3c244c7c0c 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -762,6 +762,8 @@ export type ColorsTokenName = | 'colorTextLinkButtonUnderlineHover' | 'colorTextLinkDefault' | 'colorTextLinkHover' + | 'colorTextLinkDecorationDefault' + | 'colorTextLinkDecorationHover' | 'colorTextLinkSecondaryDefault' | 'colorTextLinkSecondaryHover' | 'colorTextLinkInfoDefault' @@ -824,6 +826,9 @@ export type TypographyTokenName = | 'fontHeaderH2DescriptionSize' | 'fontLinkButtonLetterSpacing' | 'fontLinkButtonWeight' + | 'fontDecorationThicknessLink' + | 'fontDecorationThicknessLinkDisplayL' + | 'fontDecorationStyleLink' | 'fontPanelHeaderLineHeight' | 'fontPanelHeaderSize' | 'fontSizeBodyM' diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index f9e8a45150..c6e5c2c6f7 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -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}', diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index 4ae45906cc..8de8172788 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -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.', diff --git a/style-dictionary/visual-refresh/metadata/typography.ts b/style-dictionary/visual-refresh/metadata/typography.ts index c0e41c6606..ed6800c1dc 100644 --- a/style-dictionary/visual-refresh/metadata/typography.ts +++ b/style-dictionary/visual-refresh/metadata/typography.ts @@ -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, diff --git a/style-dictionary/visual-refresh/typography.ts b/style-dictionary/visual-refresh/typography.ts index f14df87ee7..ec70817902 100644 --- a/style-dictionary/visual-refresh/typography.ts +++ b/style-dictionary/visual-refresh/typography.ts @@ -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",