diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 8f0951285f..67ec4243eb 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -688,6 +688,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-text-link-info-hover": "#0a4a74", "color-text-link-inverted-default": "#fafafa", "color-text-link-inverted-hover": "#fafafa", + "color-text-link-secondary-decoration-default": "transparent", "color-text-link-secondary-default": "#0073bb", "color-text-link-secondary-hover": "#0a4a74", "color-text-notification-default": "#fafafa", @@ -746,6 +747,7 @@ 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-line-link-secondary": "none", "font-decoration-style-link": "solid", "font-decoration-thickness-link": "1px", "font-decoration-thickness-link-display-l": "2px", @@ -1696,6 +1698,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-text-link-info-hover": "#99cbe4", "color-text-link-inverted-default": "#fafafa", "color-text-link-inverted-hover": "#fafafa", + "color-text-link-secondary-decoration-default": "transparent", "color-text-link-secondary-default": "#44b9d6", "color-text-link-secondary-hover": "#99cbe4", "color-text-notification-default": "#fafafa", @@ -1754,6 +1757,7 @@ 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-line-link-secondary": "none", "font-decoration-style-link": "solid", "font-decoration-thickness-link": "1px", "font-decoration-thickness-link-display-l": "2px", @@ -2704,6 +2708,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-text-link-info-hover": "#0a4a74", "color-text-link-inverted-default": "#fafafa", "color-text-link-inverted-hover": "#fafafa", + "color-text-link-secondary-decoration-default": "transparent", "color-text-link-secondary-default": "#0073bb", "color-text-link-secondary-hover": "#0a4a74", "color-text-notification-default": "#fafafa", @@ -2762,6 +2767,7 @@ 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-line-link-secondary": "none", "font-decoration-style-link": "solid", "font-decoration-thickness-link": "1px", "font-decoration-thickness-link-display-l": "2px", @@ -3712,6 +3718,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-text-link-info-hover": "#0a4a74", "color-text-link-inverted-default": "#fafafa", "color-text-link-inverted-hover": "#fafafa", + "color-text-link-secondary-decoration-default": "transparent", "color-text-link-secondary-default": "#0073bb", "color-text-link-secondary-hover": "#0a4a74", "color-text-notification-default": "#fafafa", @@ -3770,6 +3777,7 @@ 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-line-link-secondary": "none", "font-decoration-style-link": "solid", "font-decoration-thickness-link": "1px", "font-decoration-thickness-link-display-l": "2px", @@ -4720,6 +4728,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-text-link-info-hover": "#002b66", "color-text-link-inverted-default": "#f9f9fa", "color-text-link-inverted-hover": "#ffffff", + "color-text-link-secondary-decoration-default": "transparent", "color-text-link-secondary-default": "#006ce0", "color-text-link-secondary-hover": "#002b66", "color-text-notification-default": "#f9f9fa", @@ -4778,6 +4787,7 @@ 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-line-link-secondary": "none", "font-decoration-style-link": "solid", "font-decoration-thickness-link": "1px", "font-decoration-thickness-link-display-l": "2px", @@ -5728,6 +5738,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-link-info-hover": "#002b66", "color-text-link-inverted-default": "#f9f9fa", "color-text-link-inverted-hover": "#ffffff", + "color-text-link-secondary-decoration-default": "transparent", "color-text-link-secondary-default": "#006ce0", "color-text-link-secondary-hover": "#002b66", "color-text-notification-default": "#f9f9fa", @@ -5786,6 +5797,7 @@ 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-line-link-secondary": "none", "font-decoration-style-link": "solid", "font-decoration-thickness-link": "1px", "font-decoration-thickness-link-display-l": "2px", @@ -6736,6 +6748,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-link-info-hover": "#75cfff", "color-text-link-inverted-default": "#f9f9fa", "color-text-link-inverted-hover": "#ffffff", + "color-text-link-secondary-decoration-default": "transparent", "color-text-link-secondary-default": "#42b4ff", "color-text-link-secondary-hover": "#75cfff", "color-text-notification-default": "#f9f9fa", @@ -6794,6 +6807,7 @@ 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-line-link-secondary": "none", "font-decoration-style-link": "solid", "font-decoration-thickness-link": "1px", "font-decoration-thickness-link-display-l": "2px", @@ -7744,6 +7758,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-text-link-info-hover": "#75cfff", "color-text-link-inverted-default": "#f9f9fa", "color-text-link-inverted-hover": "#ffffff", + "color-text-link-secondary-decoration-default": "transparent", "color-text-link-secondary-default": "#42b4ff", "color-text-link-secondary-hover": "#75cfff", "color-text-notification-default": "#f9f9fa", @@ -7802,6 +7817,7 @@ 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-line-link-secondary": "none", "font-decoration-style-link": "solid", "font-decoration-thickness-link": "1px", "font-decoration-thickness-link-display-l": "2px", diff --git a/src/link/constants.scss b/src/link/constants.scss index 72f6551a83..9754103648 100644 --- a/src/link/constants.scss +++ b/src/link/constants.scss @@ -64,8 +64,8 @@ $link-variants: ( 'text-color-hover': awsui.$color-text-link-secondary-hover, 'text-color-active': awsui.$color-text-link-secondary-hover, 'font-weight': awsui.$font-weight-link-secondary, - 'decoration-line': none, - 'decoration-color': transparent, + 'decoration-line': awsui.$font-decoration-line-link-secondary, + 'decoration-color': awsui.$color-text-link-secondary-decoration-default, 'decoration-color-hover': awsui.$color-text-link-decoration-hover, 'letter-spacing': normal, ), diff --git a/style-dictionary/one-theme/colors.ts b/style-dictionary/one-theme/colors.ts index 4c060689e3..2e14854b31 100644 --- a/style-dictionary/one-theme/colors.ts +++ b/style-dictionary/one-theme/colors.ts @@ -101,6 +101,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextLinkHover: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, colorTextLinkSecondaryDefault: { light: '{colorNeutral850}', dark: '{colorNeutral350}' }, colorTextLinkSecondaryHover: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, + colorTextLinkSecondaryDecorationDefault: '{colorTextLinkDecorationDefault}', colorTextLinkInfoDefault: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, colorTextLinkInfoHover: { light: '{colorPrimary800}', dark: '{colorPrimary300}' }, colorTextAccent: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, diff --git a/style-dictionary/one-theme/typography.ts b/style-dictionary/one-theme/typography.ts index 4396d34b04..34b30e9d72 100644 --- a/style-dictionary/one-theme/typography.ts +++ b/style-dictionary/one-theme/typography.ts @@ -39,7 +39,8 @@ const tokens: StyleDictionary.TypographyDictionary = { fontWeightTabs: '600', fontSizeTabs: '14px', fontWayfindingLinkActiveWeight: '600', - fontWeightLinkSecondary: '500', + fontWeightLinkSecondary: 'inherit', + fontDecorationLineLinkSecondary: 'underline', // ── Alerts / flashbars ──────────────────────────────────────────────────── fontWeightAlertHeader: '500', diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index a6f383f47f..1b05eca5a9 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -868,6 +868,7 @@ export type ColorsTokenName = | 'colorTextLinkDecorationHover' | 'colorTextLinkSecondaryDefault' | 'colorTextLinkSecondaryHover' + | 'colorTextLinkSecondaryDecorationDefault' | 'colorTextLinkInfoDefault' | 'colorTextLinkInfoHover' | 'colorTextLinkInvertedDefault' @@ -957,6 +958,7 @@ export type TypographyTokenName = | 'fontDecorationThicknessLink' | 'fontDecorationThicknessLinkDisplayL' | 'fontDecorationStyleLink' + | 'fontDecorationLineLinkSecondary' | 'fontPanelHeaderLineHeight' | 'fontPanelHeaderSize' | 'fontSideNavigationSectionHeaderSize' diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index fd88bb09da..dba44e351a 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -320,6 +320,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextLinkDecorationHover: 'currentColor', colorTextLinkSecondaryDefault: '{colorTextLinkDefault}', colorTextLinkSecondaryHover: '{colorTextLinkHover}', + colorTextLinkSecondaryDecorationDefault: 'transparent', colorTextLinkInfoDefault: '{colorTextLinkDefault}', colorTextLinkInfoHover: '{colorTextLinkHover}', colorTextLinkInvertedDefault: '{colorTextNotificationDefault}', diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index a4dfb22b1e..f6fb831492 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -1238,6 +1238,11 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorTextLinkSecondaryDecorationDefault: { + description: 'The default color of the text decoration (underline) of secondary links.', + public: false, + themeable: false, + }, colorTextLinkInfoDefault: { description: 'The default color for info links.', public: true, diff --git a/style-dictionary/visual-refresh/metadata/typography.ts b/style-dictionary/visual-refresh/metadata/typography.ts index 9e035f6f90..55189b408b 100644 --- a/style-dictionary/visual-refresh/metadata/typography.ts +++ b/style-dictionary/visual-refresh/metadata/typography.ts @@ -267,6 +267,11 @@ const metadata: StyleDictionary.MetadataIndex = { themeable: true, public: false, }, + fontDecorationLineLinkSecondary: { + description: 'The text decoration line of secondary links. For example: underline, none.', + themeable: false, + 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 914e42effe..499c52ad40 100644 --- a/style-dictionary/visual-refresh/typography.ts +++ b/style-dictionary/visual-refresh/typography.ts @@ -7,6 +7,7 @@ export const tokens: StyleDictionary.TypographyDictionary = { fontButtonLetterSpacing: '0.005em', fontChartDetailSize: '{fontSizeBodyS}', fontDecorationStyleLink: 'solid', + fontDecorationLineLinkSecondary: 'none', fontDecorationThicknessLink: '1px', fontDecorationThicknessLinkDisplayL: '2px', fontDisplayLabelWeight: '700',