From 715264b967c0811cde77f29ec7e98312d780cd45 Mon Sep 17 00:00:00 2001
From: Gethin Webster <gethinw@amazon.de>
Date: Mon, 7 Aug 2023 09:14:30 +0200
Subject: [PATCH] feat: Update primary link styling and usage (#1405)

---
 pages/cards/hooks.page.tsx                    |   6 +-
 pages/cards/permutations.page.tsx             |   3 +-
 pages/help-panel/permutations.page.tsx        |   4 +-
 .../__snapshots__/themes.test.ts.snap         |  40 +-
 .../__snapshots__/design-tokens.test.ts.snap  |  20 +-
 .../__snapshots__/documenter.test.ts.snap     |  10 +-
 src/alert/internal.tsx                        |  55 +--
 src/breadcrumb-group/item/styles.scss         |   2 +-
 src/cards/index.tsx                           | 111 ++---
 src/help-panel/index.tsx                      |   5 +-
 .../context/link-default-variant-context.ts   |   8 +
 src/internal/styles/links.scss                |   2 +
 src/link/constants.scss                       |  13 +-
 src/link/index.tsx                            |   6 +-
 src/link/interfaces.ts                        |   7 +
 src/link/internal.tsx                         |   5 +-
 src/popover/internal.tsx                      |  21 +-
 src/table/internal.tsx                        | 421 +++++++++---------
 .../congratulation-screen.tsx                 |   2 +-
 .../components/tutorial-list/index.tsx        |   1 +
 src/wizard/wizard-navigation.tsx              |   1 +
 style-dictionary/classic/colors.ts            |   3 +-
 style-dictionary/classic/typography.ts        |   3 -
 style-dictionary/utils/token-names.ts         |   4 -
 style-dictionary/visual-refresh/colors.ts     |   1 -
 style-dictionary/visual-refresh/typography.ts |   3 -
 26 files changed, 382 insertions(+), 375 deletions(-)
 create mode 100644 src/internal/context/link-default-variant-context.ts

diff --git a/pages/cards/hooks.page.tsx b/pages/cards/hooks.page.tsx
index f1bbe30a87..fcde6ac35b 100644
--- a/pages/cards/hooks.page.tsx
+++ b/pages/cards/hooks.page.tsx
@@ -14,7 +14,11 @@ import { EmptyState, getMatchesCountText, paginationLabels, pageSizeOptions } fr
 import ScreenshotArea from '../utils/screenshot-area';
 
 export const cardDefinition: CardsProps.CardDefinition<Instance> = {
-  header: item => <Link fontSize="heading-m">{item.id}</Link>,
+  header: item => (
+    <Link fontSize="heading-m" href="#">
+      {item.id}
+    </Link>
+  ),
   sections: [
     {
       id: 'type',
diff --git a/pages/cards/permutations.page.tsx b/pages/cards/permutations.page.tsx
index 0548481561..417f1e64bb 100644
--- a/pages/cards/permutations.page.tsx
+++ b/pages/cards/permutations.page.tsx
@@ -9,6 +9,7 @@ import Cards, { CardsProps } from '~components/cards/index';
 import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
+import { Link } from '~components';
 
 interface Item {
   number: number;
@@ -27,7 +28,7 @@ function createSimpleItems(count: number) {
 }
 
 const cardDefinition: CardsProps.CardDefinition<Item> = {
-  header: item => item.text,
+  header: item => (item.number === 2 ? <Link href="#">{item.text}</Link> : item.text),
   sections: [
     {
       id: 'description',
diff --git a/pages/help-panel/permutations.page.tsx b/pages/help-panel/permutations.page.tsx
index da065a84e7..cbe03dd361 100644
--- a/pages/help-panel/permutations.page.tsx
+++ b/pages/help-panel/permutations.page.tsx
@@ -6,6 +6,7 @@ import Box from '~components/box';
 import Icon from '~components/icon';
 import ScreenshotArea from '../utils/screenshot-area';
 import styles from './styles.scss';
+import { Link } from '~components';
 
 const mainContent = (
   <div>
@@ -97,7 +98,8 @@ const mainContent = (
         <ul>
           <li>This is a nested list.</li>
           <li>
-            <a>This is a link</a>. Mi proin sed libero enim sed faucibus turpis.
+            <a>This is a link</a>. And a <Link href="#">Cloudscape Link</Link>. Mi proin sed libero enim sed faucibus
+            turpis.
           </li>
           <li>
             <pre>
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index e89d4be106..5b084f88f5 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -392,9 +392,8 @@ Object {
   "color-text-link-button-underline": "currentColor",
   "color-text-link-button-underline-hover": "currentColor",
   "color-text-link-default": "#0073bb",
-  "color-text-link-hover": "#0073bb",
+  "color-text-link-hover": "#0a4a74",
   "color-text-link-inverted-hover": "#fafafa",
-  "color-text-link-primary-underline": "transparent",
   "color-text-notification-default": "#fafafa",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#16191f",
@@ -450,9 +449,6 @@ Object {
   "font-heading-xs-weight": "400",
   "font-link-button-letter-spacing": "normal",
   "font-link-button-weight": "400",
-  "font-link-primary-decoration": "none",
-  "font-link-primary-letter-spacing": "0.005em",
-  "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "auto",
@@ -1003,9 +999,8 @@ Object {
   "color-text-link-button-underline": "currentColor",
   "color-text-link-button-underline-hover": "currentColor",
   "color-text-link-default": "#44b9d6",
-  "color-text-link-hover": "#44b9d6",
+  "color-text-link-hover": "#99cbe4",
   "color-text-link-inverted-hover": "#fafafa",
-  "color-text-link-primary-underline": "transparent",
   "color-text-notification-default": "#fafafa",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#16191f",
@@ -1061,9 +1056,6 @@ Object {
   "font-heading-xs-weight": "400",
   "font-link-button-letter-spacing": "normal",
   "font-link-button-weight": "400",
-  "font-link-primary-decoration": "none",
-  "font-link-primary-letter-spacing": "0.005em",
-  "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "auto",
@@ -1614,9 +1606,8 @@ Object {
   "color-text-link-button-underline": "currentColor",
   "color-text-link-button-underline-hover": "currentColor",
   "color-text-link-default": "#0073bb",
-  "color-text-link-hover": "#0073bb",
+  "color-text-link-hover": "#0a4a74",
   "color-text-link-inverted-hover": "#fafafa",
-  "color-text-link-primary-underline": "transparent",
   "color-text-notification-default": "#fafafa",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#16191f",
@@ -1672,9 +1663,6 @@ Object {
   "font-heading-xs-weight": "400",
   "font-link-button-letter-spacing": "normal",
   "font-link-button-weight": "400",
-  "font-link-primary-decoration": "none",
-  "font-link-primary-letter-spacing": "0.005em",
-  "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "auto",
@@ -2225,9 +2213,8 @@ Object {
   "color-text-link-button-underline": "currentColor",
   "color-text-link-button-underline-hover": "currentColor",
   "color-text-link-default": "#0073bb",
-  "color-text-link-hover": "#0073bb",
+  "color-text-link-hover": "#0a4a74",
   "color-text-link-inverted-hover": "#fafafa",
-  "color-text-link-primary-underline": "transparent",
   "color-text-notification-default": "#fafafa",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#16191f",
@@ -2283,9 +2270,6 @@ Object {
   "font-heading-xs-weight": "400",
   "font-link-button-letter-spacing": "normal",
   "font-link-button-weight": "400",
-  "font-link-primary-decoration": "none",
-  "font-link-primary-letter-spacing": "0.005em",
-  "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "auto",
@@ -2838,7 +2822,6 @@ Object {
   "color-text-link-default": "#0972d3",
   "color-text-link-hover": "#033160",
   "color-text-link-inverted-hover": "#ffffff",
-  "color-text-link-primary-underline": "#0972d3",
   "color-text-notification-default": "#fbfbfb",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#000716",
@@ -2894,9 +2877,6 @@ Object {
   "font-heading-xs-weight": "700",
   "font-link-button-letter-spacing": "0.005em",
   "font-link-button-weight": "700",
-  "font-link-primary-decoration": "underline",
-  "font-link-primary-letter-spacing": "\\"inherit\\"",
-  "font-link-primary-weight": "\\"inherit\\"",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "grayscale",
@@ -3449,7 +3429,6 @@ Object {
   "color-text-link-default": "#0972d3",
   "color-text-link-hover": "#033160",
   "color-text-link-inverted-hover": "#ffffff",
-  "color-text-link-primary-underline": "#0972d3",
   "color-text-notification-default": "#fbfbfb",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#000716",
@@ -3505,9 +3484,6 @@ Object {
   "font-heading-xs-weight": "700",
   "font-link-button-letter-spacing": "0.005em",
   "font-link-button-weight": "700",
-  "font-link-primary-decoration": "underline",
-  "font-link-primary-letter-spacing": "\\"inherit\\"",
-  "font-link-primary-weight": "\\"inherit\\"",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "grayscale",
@@ -4060,7 +4036,6 @@ Object {
   "color-text-link-default": "#539fe5",
   "color-text-link-hover": "#89bdee",
   "color-text-link-inverted-hover": "#ffffff",
-  "color-text-link-primary-underline": "#539fe5",
   "color-text-notification-default": "#fbfbfb",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#000716",
@@ -4116,9 +4091,6 @@ Object {
   "font-heading-xs-weight": "700",
   "font-link-button-letter-spacing": "0.005em",
   "font-link-button-weight": "700",
-  "font-link-primary-decoration": "underline",
-  "font-link-primary-letter-spacing": "\\"inherit\\"",
-  "font-link-primary-weight": "\\"inherit\\"",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "grayscale",
@@ -4671,7 +4643,6 @@ Object {
   "color-text-link-default": "#539fe5",
   "color-text-link-hover": "#89bdee",
   "color-text-link-inverted-hover": "#ffffff",
-  "color-text-link-primary-underline": "#539fe5",
   "color-text-notification-default": "#fbfbfb",
   "color-text-notification-stack-bar": "#ffffff",
   "color-text-notification-yellow": "#000716",
@@ -4727,9 +4698,6 @@ Object {
   "font-heading-xs-weight": "700",
   "font-link-button-letter-spacing": "0.005em",
   "font-link-button-weight": "700",
-  "font-link-primary-decoration": "underline",
-  "font-link-primary-letter-spacing": "\\"inherit\\"",
-  "font-link-primary-weight": "\\"inherit\\"",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
   "font-smoothing-moz-osx": "grayscale",
diff --git a/src/__tests__/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/__snapshots__/design-tokens.test.ts.snap
index d4ae14a606..c703ffabc8 100644
--- a/src/__tests__/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/__snapshots__/design-tokens.test.ts.snap
@@ -1815,8 +1815,8 @@ Object {
         "color-text-link-hover": Object {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": Object {
-            "dark": "#44b9d6",
-            "light": "#0073bb",
+            "dark": "#99cbe4",
+            "light": "#0a4a74",
           },
         },
         "color-text-notification-default": Object {
@@ -3907,8 +3907,8 @@ Object {
         "color-text-link-hover": Object {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": Object {
-            "dark": "#44b9d6",
-            "light": "#0073bb",
+            "dark": "#99cbe4",
+            "light": "#0a4a74",
           },
         },
         "color-text-notification-default": Object {
@@ -5999,8 +5999,8 @@ Object {
         "color-text-link-hover": Object {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": Object {
-            "dark": "#44b9d6",
-            "light": "#0073bb",
+            "dark": "#99cbe4",
+            "light": "#0a4a74",
           },
         },
         "color-text-notification-default": Object {
@@ -8091,8 +8091,8 @@ Object {
         "color-text-link-hover": Object {
           "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
           "$value": Object {
-            "dark": "#44b9d6",
-            "light": "#44b9d6",
+            "dark": "#99cbe4",
+            "light": "#99cbe4",
           },
         },
         "color-text-notification-default": Object {
@@ -10183,8 +10183,8 @@ Object {
     "color-text-link-hover": Object {
       "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
       "$value": Object {
-        "dark": "#44b9d6",
-        "light": "#0073bb",
+        "dark": "#99cbe4",
+        "light": "#0a4a74",
       },
     },
     "color-text-notification-default": Object {
diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
index 746e594c76..3152e5dd33 100644
--- a/src/__tests__/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/__snapshots__/documenter.test.ts.snap
@@ -8191,7 +8191,6 @@ For other options see the documentation for <a> tag's
       "type": "string",
     },
     Object {
-      "defaultValue": "'secondary'",
       "description": "Determines the visual style of the link as follows:
 - \`primary\` - Displays the link text with bold styling for sufficient contrast with surrounding text.
     Use this for links where the context doesn't imply interactivity such as
@@ -8199,7 +8198,14 @@ For other options see the documentation for <a> tag's
 - \`secondary\` - Does not provide any additional indicators for interactivity (except for an underline when the user hovers over or focuses the link).
     This can be used in cases where the interactivity is strongly implied by its context,
     such as in a table or a list of external links.
-- \`info\` - Use for \\"info\\" links that link to content in a help panel.",
+- \`info\` - Use for \\"info\\" links that link to content in a help panel.
+The default is \`secondary\`, except inside the following components where it defaults to \`primary\`:
+- Table
+- Cards
+- Alert
+- Popover
+- Help Panel (main \`content\` only)
+",
       "inlineType": Object {
         "name": "LinkProps.Variant",
         "type": "union",
diff --git a/src/alert/internal.tsx b/src/alert/internal.tsx
index 4f4c183e20..1226e2375b 100644
--- a/src/alert/internal.tsx
+++ b/src/alert/internal.tsx
@@ -18,6 +18,7 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { SomeRequired } from '../internal/types';
 import { useInternalI18n } from '../i18n/context';
 import { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';
+import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 
 const typeToIcon: Record<AlertProps.Type, IconProps['name']> = {
   error: 'status-negative',
@@ -87,36 +88,38 @@ const InternalAlert = React.forwardRef(
         )}
         ref={mergedRef}
       >
-        <VisualContext contextName="alert">
-          <div className={clsx(styles.alert, styles[`type-${type}`], styles[`icon-size-${size}`])}>
-            <div className={styles['alert-mobile-block']}>
-              <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef}>
-                <div className={clsx(styles.icon, styles.text)} role="img" aria-label={statusIconAriaLabel}>
-                  <InternalIcon name={typeToIcon[type]} size={size} />
-                </div>
-                <div className={styles.body}>
-                  <div className={clsx(styles.message, styles.text)}>
-                    {header && <div className={styles.header}>{header}</div>}
-                    <div className={styles.content}>{children}</div>
+        <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>
+          <VisualContext contextName="alert">
+            <div className={clsx(styles.alert, styles[`type-${type}`], styles[`icon-size-${size}`])}>
+              <div className={styles['alert-mobile-block']}>
+                <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef}>
+                  <div className={clsx(styles.icon, styles.text)} role="img" aria-label={statusIconAriaLabel}>
+                    <InternalIcon name={typeToIcon[type]} size={size} />
+                  </div>
+                  <div className={styles.body}>
+                    <div className={clsx(styles.message, styles.text)}>
+                      {header && <div className={styles.header}>{header}</div>}
+                      <div className={styles.content}>{children}</div>
+                    </div>
                   </div>
                 </div>
+                {hasAction && <div className={styles.action}>{actionButton}</div>}
               </div>
-              {hasAction && <div className={styles.action}>{actionButton}</div>}
+              {dismissible && (
+                <div className={styles.dismiss}>
+                  <InternalButton
+                    className={styles['dismiss-button']}
+                    variant="icon"
+                    iconName="close"
+                    formAction="none"
+                    ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}
+                    onClick={() => fireNonCancelableEvent(onDismiss)}
+                  />
+                </div>
+              )}
             </div>
-            {dismissible && (
-              <div className={styles.dismiss}>
-                <InternalButton
-                  className={styles['dismiss-button']}
-                  variant="icon"
-                  iconName="close"
-                  formAction="none"
-                  ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}
-                  onClick={() => fireNonCancelableEvent(onDismiss)}
-                />
-              </div>
-            )}
-          </div>
-        </VisualContext>
+          </VisualContext>
+        </LinkDefaultVariantContext.Provider>
       </div>
     );
   }
diff --git a/src/breadcrumb-group/item/styles.scss b/src/breadcrumb-group/item/styles.scss
index 5561acdce6..ea2d2026c9 100644
--- a/src/breadcrumb-group/item/styles.scss
+++ b/src/breadcrumb-group/item/styles.scss
@@ -20,7 +20,7 @@
   }
 
   > .anchor {
-    @include styles.link-default;
+    @include styles.link-inline;
 
     @include focus-visible.when-visible {
       @include styles.link-focus;
diff --git a/src/cards/index.tsx b/src/cards/index.tsx
index dc886e056e..2d19307339 100644
--- a/src/cards/index.tsx
+++ b/src/cards/index.tsx
@@ -25,6 +25,7 @@ import { supportsStickyPosition } from '../internal/utils/dom';
 import { useInternalI18n } from '../i18n/context';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
+import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 
 export { CardsProps };
 
@@ -127,59 +128,63 @@ const Cards = React.forwardRef(function <T = any>(
   }
 
   return (
-    <AnalyticsFunnelSubStep>
-      <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>
-        <InternalContainer
-          header={
-            hasToolsHeader && (
-              <div
-                className={clsx(
-                  styles.header,
-                  isRefresh && styles['header-refresh'],
-                  styles[`header-variant-${computedVariant}`]
-                )}
-              >
-                <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />
-              </div>
-            )
-          }
-          footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}
-          disableContentPaddings={true}
-          disableHeaderPaddings={computedVariant === 'full-page'}
-          variant={computedVariant === 'container' ? 'cards' : computedVariant}
-          __stickyHeader={stickyHeader}
-          __stickyOffset={stickyHeaderVerticalOffset}
-          __headerRef={headerRef}
-          __headerId={cardsHeaderId}
-          __darkHeader={computedVariant === 'full-page'}
-          __disableFooterDivider={true}
-        >
-          <div className={clsx(hasToolsHeader && styles['has-header'])}>
-            {!!renderAriaLive && !!firstIndex && (
-              <LiveRegion>
-                <span>{renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}</span>
-              </LiveRegion>
-            )}
-            {status ?? (
-              <CardsList
-                items={items}
-                cardDefinition={cardDefinition}
-                trackBy={trackBy}
-                selectionType={selectionType}
-                columns={columns}
-                isItemSelected={isItemSelected}
-                getItemSelectionProps={getItemSelectionProps}
-                visibleSections={visibleSections}
-                updateShiftToggle={updateShiftToggle}
-                onFocus={onCardFocus}
-                ariaLabel={ariaLabels?.cardsLabel}
-                ariaLabelledby={ariaLabels?.cardsLabel ? undefined : cardsHeaderId}
-              />
-            )}
-          </div>
-        </InternalContainer>
-      </div>
-    </AnalyticsFunnelSubStep>
+    <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>
+      <AnalyticsFunnelSubStep>
+        <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>
+          <InternalContainer
+            header={
+              hasToolsHeader && (
+                <div
+                  className={clsx(
+                    styles.header,
+                    isRefresh && styles['header-refresh'],
+                    styles[`header-variant-${computedVariant}`]
+                  )}
+                >
+                  <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />
+                </div>
+              )
+            }
+            footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}
+            disableContentPaddings={true}
+            disableHeaderPaddings={computedVariant === 'full-page'}
+            variant={computedVariant === 'container' ? 'cards' : computedVariant}
+            __stickyHeader={stickyHeader}
+            __stickyOffset={stickyHeaderVerticalOffset}
+            __headerRef={headerRef}
+            __headerId={cardsHeaderId}
+            __darkHeader={computedVariant === 'full-page'}
+            __disableFooterDivider={true}
+          >
+            <div className={clsx(hasToolsHeader && styles['has-header'])}>
+              {!!renderAriaLive && !!firstIndex && (
+                <LiveRegion>
+                  <span>
+                    {renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}
+                  </span>
+                </LiveRegion>
+              )}
+              {status ?? (
+                <CardsList
+                  items={items}
+                  cardDefinition={cardDefinition}
+                  trackBy={trackBy}
+                  selectionType={selectionType}
+                  columns={columns}
+                  isItemSelected={isItemSelected}
+                  getItemSelectionProps={getItemSelectionProps}
+                  visibleSections={visibleSections}
+                  updateShiftToggle={updateShiftToggle}
+                  onFocus={onCardFocus}
+                  ariaLabel={ariaLabels?.cardsLabel}
+                  ariaLabelledby={ariaLabels?.cardsLabel ? undefined : cardsHeaderId}
+                />
+              )}
+            </div>
+          </InternalContainer>
+        </div>
+      </AnalyticsFunnelSubStep>
+    </LinkDefaultVariantContext.Provider>
   );
 }) as CardsForwardRefType;
 
diff --git a/src/help-panel/index.tsx b/src/help-panel/index.tsx
index 1f842c60d5..ca5072040c 100644
--- a/src/help-panel/index.tsx
+++ b/src/help-panel/index.tsx
@@ -10,6 +10,7 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { HelpPanelProps } from './interfaces';
 import LiveRegion from '../internal/components/live-region';
 import { useInternalI18n } from '../i18n/context';
+import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 
 export { HelpPanelProps };
 
@@ -30,7 +31,9 @@ export default function HelpPanel({ header, footer, children, loading, loadingTe
   ) : (
     <div {...containerProps} ref={__internalRootRef}>
       {header && <div className={clsx(styles.header)}>{header}</div>}
-      <div className={clsx(styles.content)}>{children}</div>
+      <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>
+        <div className={clsx(styles.content)}>{children}</div>
+      </LinkDefaultVariantContext.Provider>
       {footer && <div className={styles.footer}>{footer}</div>}
     </div>
   );
diff --git a/src/internal/context/link-default-variant-context.ts b/src/internal/context/link-default-variant-context.ts
new file mode 100644
index 0000000000..3f7201f352
--- /dev/null
+++ b/src/internal/context/link-default-variant-context.ts
@@ -0,0 +1,8 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { createContext } from 'react';
+import { LinkProps } from '../../link/interfaces';
+
+export const LinkDefaultVariantContext = createContext<{ defaultVariant: LinkProps.Variant }>({
+  defaultVariant: 'secondary',
+});
diff --git a/src/internal/styles/links.scss b/src/internal/styles/links.scss
index 24ef4a5bfc..bf2021892d 100644
--- a/src/internal/styles/links.scss
+++ b/src/internal/styles/links.scss
@@ -19,6 +19,7 @@
   text-decoration: map.get($variant, 'decoration');
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   text-decoration-color: map.get($variant, 'decoration-color');
+  text-decoration-thickness: map.get($variant, 'decoration-thickness');
 
   @include styles.with-motion {
     transition-property: color, text-decoration;
@@ -44,6 +45,7 @@
     text-decoration: underline;
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     text-decoration-color: map.get($variant, 'decoration-color-hover');
+    text-decoration-thickness: map.get($variant, 'decoration-thickness');
   }
 }
 
diff --git a/src/link/constants.scss b/src/link/constants.scss
index 327082da58..8bbd91e984 100644
--- a/src/link/constants.scss
+++ b/src/link/constants.scss
@@ -22,11 +22,11 @@ $link-variants: (
     'text-color-default': awsui.$color-text-link-default,
     'text-color-hover': awsui.$color-text-link-hover,
     'text-color-active': awsui.$color-text-link-hover,
-    'font-weight': awsui.$font-link-primary-weight,
-    'decoration': awsui.$font-link-primary-decoration,
-    'decoration-color': awsui.$color-text-link-primary-underline,
+    'font-weight': inherit,
+    'decoration': underline,
+    'decoration-color': currentColor,
     'decoration-color-hover': currentColor,
-    'letter-spacing': awsui.$font-link-primary-letter-spacing,
+    'letter-spacing': normal,
   ),
   'info': (
     'text-color-default': awsui.$color-text-link-default,
@@ -43,9 +43,10 @@ $link-variants: (
     'text-color-hover': awsui.$color-text-link-hover,
     'text-color-active': awsui.$color-text-link-hover,
     'font-weight': awsui.$font-box-value-large-weight,
-    'decoration': none,
-    'decoration-color': transparent,
+    'decoration': underline,
+    'decoration-color': currentColor,
     'decoration-color-hover': currentColor,
+    'decoration-thickness': 0.3rem,
   ),
   'top-navigation': (
     'text-color-default': awsui.$color-text-interactive-default,
diff --git a/src/link/index.tsx b/src/link/index.tsx
index 64c4b8948d..61f884b38f 100644
--- a/src/link/index.tsx
+++ b/src/link/index.tsx
@@ -9,14 +9,10 @@ import InternalLink from './internal';
 export { LinkProps };
 
 const Link = React.forwardRef(
-  (
-    { variant = 'secondary', fontSize = 'body-m', color = 'normal', external = false, ...props }: LinkProps,
-    ref: React.Ref<LinkProps.Ref>
-  ) => {
+  ({ fontSize = 'body-m', color = 'normal', external = false, ...props }: LinkProps, ref: React.Ref<LinkProps.Ref>) => {
     const baseComponentProps = useBaseComponent('Link');
     return (
       <InternalLink
-        variant={variant}
         fontSize={fontSize}
         color={color}
         external={external}
diff --git a/src/link/interfaces.ts b/src/link/interfaces.ts
index 71c8ca1dd2..12575587d5 100644
--- a/src/link/interfaces.ts
+++ b/src/link/interfaces.ts
@@ -14,6 +14,13 @@ export interface LinkProps extends BaseComponentProps {
    *     This can be used in cases where the interactivity is strongly implied by its context,
    *     such as in a table or a list of external links.
    * - `info` - Use for "info" links that link to content in a help panel.
+   *
+   * The default is `secondary`, except inside the following components where it defaults to `primary`:
+   * - Table
+   * - Cards
+   * - Alert
+   * - Popover
+   * - Help Panel (main `content` only)
    */
   variant?: LinkProps.Variant;
 
diff --git a/src/link/internal.tsx b/src/link/internal.tsx
index 5cc60a8f6f..8403e269ae 100644
--- a/src/link/internal.tsx
+++ b/src/link/internal.tsx
@@ -25,6 +25,7 @@ import {
   getNameFromSelector,
   getSubStepAllSelector,
 } from '../internal/analytics/selectors';
+import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 
 type InternalLinkProps = InternalBaseComponentProps &
   Omit<LinkProps, 'variant'> & {
@@ -34,7 +35,7 @@ type InternalLinkProps = InternalBaseComponentProps &
 const InternalLink = React.forwardRef(
   (
     {
-      variant = 'secondary',
+      variant: providedVariant,
       fontSize = 'body-m',
       color = 'normal',
       external = false,
@@ -52,6 +53,8 @@ const InternalLink = React.forwardRef(
   ) => {
     checkSafeUrl('Link', href);
     const isButton = !href;
+    const { defaultVariant } = useContext(LinkDefaultVariantContext);
+    const variant = providedVariant || defaultVariant;
     const specialStyles = ['top-navigation', 'link', 'recovery'];
     const hasSpecialStyle = specialStyles.indexOf(variant) > -1;
 
diff --git a/src/popover/internal.tsx b/src/popover/internal.tsx
index 190740eff3..e5bbfdfba3 100644
--- a/src/popover/internal.tsx
+++ b/src/popover/internal.tsx
@@ -21,6 +21,7 @@ import { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes'
 import { useInternalI18n } from '../i18n/context';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { getFirstFocusable } from '../internal/components/focus-lock/utils';
+import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 
 export interface InternalPopoverProps extends PopoverProps, InternalBaseComponentProps {
   __onOpen?: NonCancelableEventHandler<null>;
@@ -141,15 +142,17 @@ function InternalPopover(
           renderWithPortal={renderWithPortal}
           zIndex={renderWithPortal ? 7000 : undefined}
         >
-          <PopoverBody
-            dismissButton={dismissButton}
-            dismissAriaLabel={dismissAriaLabel}
-            header={header}
-            onDismiss={onDismiss}
-            overflowVisible="both"
-          >
-            {content}
-          </PopoverBody>
+          <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>
+            <PopoverBody
+              dismissButton={dismissButton}
+              dismissAriaLabel={dismissAriaLabel}
+              header={header}
+              onDismiss={onDismiss}
+              overflowVisible="both"
+            >
+              {content}
+            </PopoverBody>
+          </LinkDefaultVariantContext.Provider>
         </PopoverContainer>
       )}
     </div>
diff --git a/src/table/internal.tsx b/src/table/internal.tsx
index 1a214c9c22..9b93714ae8 100644
--- a/src/table/internal.tsx
+++ b/src/table/internal.tsx
@@ -38,6 +38,7 @@ import { useMobile } from '../internal/hooks/use-mobile';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { getTableRoleProps, getTableRowRoleProps } from './table-role';
 import { useCellEditing } from './use-cell-editing';
+import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 
 const SELECTION_COLUMN_WIDTH = 54;
 const selectionColumnId = Symbol('selection-column-id');
@@ -228,229 +229,233 @@ const InternalTable = React.forwardRef(
       (toolsHeaderWrapper?.current as HTMLDivElement | null)?.getBoundingClientRect().height ?? 0;
 
     return (
-      <ColumnWidthsProvider visibleColumns={visibleColumnWidthsWithSelection} resizableColumns={resizableColumns}>
-        <InternalContainer
-          {...baseProps}
-          __internalRootRef={__internalRootRef}
-          className={clsx(baseProps.className, styles.root)}
-          header={
-            <>
-              {hasHeader && (
-                <div
-                  ref={overlapElement}
-                  className={clsx(hasDynamicHeight && [styles['dark-header'], 'awsui-context-content-header'])}
-                >
+      <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>
+        <ColumnWidthsProvider visibleColumns={visibleColumnWidthsWithSelection} resizableColumns={resizableColumns}>
+          <InternalContainer
+            {...baseProps}
+            __internalRootRef={__internalRootRef}
+            className={clsx(baseProps.className, styles.root)}
+            header={
+              <>
+                {hasHeader && (
                   <div
-                    ref={toolsHeaderWrapper}
-                    className={clsx(styles['header-controls'], styles[`variant-${computedVariant}`])}
+                    ref={overlapElement}
+                    className={clsx(hasDynamicHeight && [styles['dark-header'], 'awsui-context-content-header'])}
                   >
-                    <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />
+                    <div
+                      ref={toolsHeaderWrapper}
+                      className={clsx(styles['header-controls'], styles[`variant-${computedVariant}`])}
+                    >
+                      <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />
+                    </div>
+                  </div>
+                )}
+                {stickyHeader && (
+                  <StickyHeader
+                    ref={stickyHeaderRef}
+                    variant={computedVariant}
+                    theadProps={theadProps}
+                    wrapperRef={wrapperRefObject}
+                    theadRef={theadRef}
+                    secondaryWrapperRef={secondaryWrapperRef}
+                    tableRef={tableRefObject}
+                    onScroll={handleScroll}
+                    tableHasHeader={hasHeader}
+                    contentDensity={contentDensity}
+                    tableRole={tableRole}
+                  />
+                )}
+              </>
+            }
+            disableHeaderPaddings={true}
+            disableContentPaddings={true}
+            variant={toContainerVariant(computedVariant)}
+            __disableFooterPaddings={true}
+            __disableFooterDivider={true}
+            __disableStickyMobile={false}
+            footer={
+              hasFooter ? (
+                <div className={clsx(styles['footer-wrapper'], styles[`variant-${computedVariant}`])}>
+                  <div className={clsx(styles.footer, hasFooterPagination && styles['footer-with-pagination'])}>
+                    {footer && <span>{footer}</span>}
+                    {hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}
                   </div>
                 </div>
-              )}
-              {stickyHeader && (
-                <StickyHeader
-                  ref={stickyHeaderRef}
-                  variant={computedVariant}
-                  theadProps={theadProps}
-                  wrapperRef={wrapperRefObject}
-                  theadRef={theadRef}
-                  secondaryWrapperRef={secondaryWrapperRef}
-                  tableRef={tableRefObject}
-                  onScroll={handleScroll}
-                  tableHasHeader={hasHeader}
-                  contentDensity={contentDensity}
-                  tableRole={tableRole}
-                />
-              )}
-            </>
-          }
-          disableHeaderPaddings={true}
-          disableContentPaddings={true}
-          variant={toContainerVariant(computedVariant)}
-          __disableFooterPaddings={true}
-          __disableFooterDivider={true}
-          __disableStickyMobile={false}
-          footer={
-            hasFooter ? (
-              <div className={clsx(styles['footer-wrapper'], styles[`variant-${computedVariant}`])}>
-                <div className={clsx(styles.footer, hasFooterPagination && styles['footer-with-pagination'])}>
-                  {footer && <span>{footer}</span>}
-                  {hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}
-                </div>
-              </div>
-            ) : null
-          }
-          __stickyHeader={stickyHeader}
-          __mobileStickyOffset={toolsHeaderHeight}
-          __stickyOffset={stickyHeaderVerticalOffset}
-          {...focusMarkers.root}
-        >
-          <div
-            ref={wrapperRef}
-            className={clsx(styles.wrapper, styles[`variant-${computedVariant}`], {
-              [styles['has-footer']]: hasFooter,
-              [styles['has-header']]: hasHeader,
-            })}
-            style={stickyState.style.wrapper}
-            onScroll={handleScroll}
-            {...wrapperProps}
+              ) : null
+            }
+            __stickyHeader={stickyHeader}
+            __mobileStickyOffset={toolsHeaderHeight}
+            __stickyOffset={stickyHeaderVerticalOffset}
+            {...focusMarkers.root}
           >
-            {!!renderAriaLive && !!firstIndex && (
-              <LiveRegion>
-                <span>{renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}</span>
-              </LiveRegion>
-            )}
-            <table
-              ref={tableRef}
-              className={clsx(
-                styles.table,
-                resizableColumns && styles['table-layout-fixed'],
-                contentDensity === 'compact' && getVisualContextClassname('compact-table')
-              )}
-              {...getTableRoleProps({ tableRole, totalItemsCount, ariaLabel: ariaLabels?.tableLabel })}
+            <div
+              ref={wrapperRef}
+              className={clsx(styles.wrapper, styles[`variant-${computedVariant}`], {
+                [styles['has-footer']]: hasFooter,
+                [styles['has-header']]: hasHeader,
+              })}
+              style={stickyState.style.wrapper}
+              onScroll={handleScroll}
+              {...wrapperProps}
             >
-              <Thead
-                ref={theadRef}
-                hidden={stickyHeader}
-                onFocusedComponentChange={component => stickyHeaderRef.current?.setFocus(component)}
-                {...theadProps}
-              />
-              <tbody>
-                {loading || items.length === 0 ? (
-                  <tr>
-                    <td
-                      colSpan={selectionType ? visibleColumnDefinitions.length + 1 : visibleColumnDefinitions.length}
-                      className={clsx(styles['cell-merged'], hasFooter && styles['has-footer'])}
-                    >
-                      <div
-                        className={styles['cell-merged-content']}
-                        style={{
-                          width:
-                            (supportsStickyPosition() && containerWidth && Math.floor(containerWidth)) || undefined,
-                        }}
-                      >
-                        {loading ? (
-                          <InternalStatusIndicator type="loading" className={styles.loading} wrapText={true}>
-                            <LiveRegion visible={true}>{loadingText}</LiveRegion>
-                          </InternalStatusIndicator>
-                        ) : (
-                          <div className={styles.empty}>{empty}</div>
-                        )}
-                      </div>
-                    </td>
-                  </tr>
-                ) : (
-                  items.map((item, rowIndex) => {
-                    const firstVisible = rowIndex === 0;
-                    const lastVisible = rowIndex === items.length - 1;
-                    const isEven = rowIndex % 2 === 0;
-                    const isSelected = !!selectionType && isItemSelected(item);
-                    const isPrevSelected = !!selectionType && !firstVisible && isItemSelected(items[rowIndex - 1]);
-                    const isNextSelected = !!selectionType && !lastVisible && isItemSelected(items[rowIndex + 1]);
-                    return (
-                      <tr
-                        key={getItemKey(trackBy, item, rowIndex)}
-                        className={clsx(styles.row, isSelected && styles['row-selected'])}
-                        onFocus={({ currentTarget }) => {
-                          // When an element inside table row receives focus we want to adjust the scroll.
-                          // However, that behaviour is unwanted when the focus is received as result of a click
-                          // as it causes the click to never reach the target element.
-                          if (!currentTarget.contains(getMouseDownTarget())) {
-                            stickyHeaderRef.current?.scrollToRow(currentTarget);
-                          }
-                        }}
-                        {...focusMarkers.item}
-                        onClick={onRowClickHandler && onRowClickHandler.bind(null, rowIndex, item)}
-                        onContextMenu={onRowContextMenuHandler && onRowContextMenuHandler.bind(null, rowIndex, item)}
-                        {...getTableRowRoleProps({ tableRole, firstIndex, rowIndex })}
+              {!!renderAriaLive && !!firstIndex && (
+                <LiveRegion>
+                  <span>
+                    {renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}
+                  </span>
+                </LiveRegion>
+              )}
+              <table
+                ref={tableRef}
+                className={clsx(
+                  styles.table,
+                  resizableColumns && styles['table-layout-fixed'],
+                  contentDensity === 'compact' && getVisualContextClassname('compact-table')
+                )}
+                {...getTableRoleProps({ tableRole, totalItemsCount, ariaLabel: ariaLabels?.tableLabel })}
+              >
+                <Thead
+                  ref={theadRef}
+                  hidden={stickyHeader}
+                  onFocusedComponentChange={component => stickyHeaderRef.current?.setFocus(component)}
+                  {...theadProps}
+                />
+                <tbody>
+                  {loading || items.length === 0 ? (
+                    <tr>
+                      <td
+                        colSpan={selectionType ? visibleColumnDefinitions.length + 1 : visibleColumnDefinitions.length}
+                        className={clsx(styles['cell-merged'], hasFooter && styles['has-footer'])}
                       >
-                        {selectionType !== undefined && (
-                          <TableTdElement
-                            className={clsx(styles['selection-control'])}
-                            isVisualRefresh={isVisualRefresh}
-                            isFirstRow={firstVisible}
-                            isLastRow={lastVisible}
-                            isSelected={isSelected}
-                            isNextSelected={isNextSelected}
-                            isPrevSelected={isPrevSelected}
-                            wrapLines={false}
-                            isEvenRow={isEven}
-                            stripedRows={stripedRows}
-                            hasSelection={hasSelection}
-                            hasFooter={hasFooter}
-                            stickyState={stickyState}
-                            columnId={selectionColumnId}
-                            tableRole={tableRole}
-                          >
-                            <SelectionControl
-                              onFocusDown={moveFocusDown}
-                              onFocusUp={moveFocusUp}
-                              onShiftToggle={updateShiftToggle}
-                              {...getItemSelectionProps(item)}
-                            />
-                          </TableTdElement>
-                        )}
-                        {visibleColumnDefinitions.map((column, colIndex) => {
-                          const isEditing = cellEditing.checkEditing({ rowIndex, colIndex });
-                          const successfulEdit = cellEditing.checkLastSuccessfulEdit({ rowIndex, colIndex });
-                          const isEditable = !!column.editConfig && !cellEditing.isLoading;
-                          return (
-                            <TableBodyCell
-                              key={getColumnKey(column, colIndex)}
-                              style={
-                                resizableColumns
-                                  ? {}
-                                  : {
-                                      width: column.width,
-                                      minWidth: column.minWidth,
-                                      maxWidth: column.maxWidth,
-                                    }
-                              }
-                              ariaLabels={ariaLabels}
-                              column={column}
-                              item={item}
-                              wrapLines={wrapLines}
-                              isEditable={isEditable}
-                              isEditing={isEditing}
-                              isRowHeader={column.isRowHeader}
+                        <div
+                          className={styles['cell-merged-content']}
+                          style={{
+                            width:
+                              (supportsStickyPosition() && containerWidth && Math.floor(containerWidth)) || undefined,
+                          }}
+                        >
+                          {loading ? (
+                            <InternalStatusIndicator type="loading" className={styles.loading} wrapText={true}>
+                              <LiveRegion visible={true}>{loadingText}</LiveRegion>
+                            </InternalStatusIndicator>
+                          ) : (
+                            <div className={styles.empty}>{empty}</div>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ) : (
+                    items.map((item, rowIndex) => {
+                      const firstVisible = rowIndex === 0;
+                      const lastVisible = rowIndex === items.length - 1;
+                      const isEven = rowIndex % 2 === 0;
+                      const isSelected = !!selectionType && isItemSelected(item);
+                      const isPrevSelected = !!selectionType && !firstVisible && isItemSelected(items[rowIndex - 1]);
+                      const isNextSelected = !!selectionType && !lastVisible && isItemSelected(items[rowIndex + 1]);
+                      return (
+                        <tr
+                          key={getItemKey(trackBy, item, rowIndex)}
+                          className={clsx(styles.row, isSelected && styles['row-selected'])}
+                          onFocus={({ currentTarget }) => {
+                            // When an element inside table row receives focus we want to adjust the scroll.
+                            // However, that behaviour is unwanted when the focus is received as result of a click
+                            // as it causes the click to never reach the target element.
+                            if (!currentTarget.contains(getMouseDownTarget())) {
+                              stickyHeaderRef.current?.scrollToRow(currentTarget);
+                            }
+                          }}
+                          {...focusMarkers.item}
+                          onClick={onRowClickHandler && onRowClickHandler.bind(null, rowIndex, item)}
+                          onContextMenu={onRowContextMenuHandler && onRowContextMenuHandler.bind(null, rowIndex, item)}
+                          {...getTableRowRoleProps({ tableRole, firstIndex, rowIndex })}
+                        >
+                          {selectionType !== undefined && (
+                            <TableTdElement
+                              className={clsx(styles['selection-control'])}
+                              isVisualRefresh={isVisualRefresh}
                               isFirstRow={firstVisible}
                               isLastRow={lastVisible}
                               isSelected={isSelected}
                               isNextSelected={isNextSelected}
                               isPrevSelected={isPrevSelected}
-                              successfulEdit={successfulEdit}
-                              onEditStart={() => cellEditing.startEdit({ rowIndex, colIndex })}
-                              onEditEnd={editCancelled =>
-                                cellEditing.completeEdit({ rowIndex, colIndex }, editCancelled)
-                              }
-                              submitEdit={cellEditing.submitEdit}
-                              hasFooter={hasFooter}
-                              stripedRows={stripedRows}
+                              wrapLines={false}
                               isEvenRow={isEven}
-                              columnId={column.id ?? colIndex}
+                              stripedRows={stripedRows}
+                              hasSelection={hasSelection}
+                              hasFooter={hasFooter}
                               stickyState={stickyState}
-                              isVisualRefresh={isVisualRefresh}
+                              columnId={selectionColumnId}
                               tableRole={tableRole}
-                            />
-                          );
-                        })}
-                      </tr>
-                    );
-                  })
-                )}
-              </tbody>
-            </table>
-            {resizableColumns && <ResizeTracker />}
-          </div>
-          <StickyScrollbar
-            ref={scrollbarRef}
-            wrapperRef={wrapperRefObject}
-            tableRef={tableRefObject}
-            onScroll={handleScroll}
-          />
-        </InternalContainer>
-      </ColumnWidthsProvider>
+                            >
+                              <SelectionControl
+                                onFocusDown={moveFocusDown}
+                                onFocusUp={moveFocusUp}
+                                onShiftToggle={updateShiftToggle}
+                                {...getItemSelectionProps(item)}
+                              />
+                            </TableTdElement>
+                          )}
+                          {visibleColumnDefinitions.map((column, colIndex) => {
+                            const isEditing = cellEditing.checkEditing({ rowIndex, colIndex });
+                            const successfulEdit = cellEditing.checkLastSuccessfulEdit({ rowIndex, colIndex });
+                            const isEditable = !!column.editConfig && !cellEditing.isLoading;
+                            return (
+                              <TableBodyCell
+                                key={getColumnKey(column, colIndex)}
+                                style={
+                                  resizableColumns
+                                    ? {}
+                                    : {
+                                        width: column.width,
+                                        minWidth: column.minWidth,
+                                        maxWidth: column.maxWidth,
+                                      }
+                                }
+                                ariaLabels={ariaLabels}
+                                column={column}
+                                item={item}
+                                wrapLines={wrapLines}
+                                isEditable={isEditable}
+                                isEditing={isEditing}
+                                isRowHeader={column.isRowHeader}
+                                isFirstRow={firstVisible}
+                                isLastRow={lastVisible}
+                                isSelected={isSelected}
+                                isNextSelected={isNextSelected}
+                                isPrevSelected={isPrevSelected}
+                                successfulEdit={successfulEdit}
+                                onEditStart={() => cellEditing.startEdit({ rowIndex, colIndex })}
+                                onEditEnd={editCancelled =>
+                                  cellEditing.completeEdit({ rowIndex, colIndex }, editCancelled)
+                                }
+                                submitEdit={cellEditing.submitEdit}
+                                hasFooter={hasFooter}
+                                stripedRows={stripedRows}
+                                isEvenRow={isEven}
+                                columnId={column.id ?? colIndex}
+                                stickyState={stickyState}
+                                isVisualRefresh={isVisualRefresh}
+                                tableRole={tableRole}
+                              />
+                            );
+                          })}
+                        </tr>
+                      );
+                    })
+                  )}
+                </tbody>
+              </table>
+              {resizableColumns && <ResizeTracker />}
+            </div>
+            <StickyScrollbar
+              ref={scrollbarRef}
+              wrapperRef={wrapperRefObject}
+              tableRef={tableRefObject}
+              onScroll={handleScroll}
+            />
+          </InternalContainer>
+        </ColumnWidthsProvider>
+      </LinkDefaultVariantContext.Provider>
     );
   }
 ) as TableForwardRefType;
diff --git a/src/tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx b/src/tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx
index 2fd685bff8..fcbdc40ed8 100644
--- a/src/tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx
+++ b/src/tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx
@@ -42,7 +42,7 @@ export function CongratulationScreen({ children, onFeedbackClick, i18nStrings }:
       <div className={styles.divider} />
 
       {onFeedbackClick && (
-        <InternalLink onFollow={onFeedbackClick} className={styles['feedback-link']}>
+        <InternalLink onFollow={onFeedbackClick} className={styles['feedback-link']} variant="primary">
           {i18nStrings.feedbackLinkText}
         </InternalLink>
       )}
diff --git a/src/tutorial-panel/components/tutorial-list/index.tsx b/src/tutorial-panel/components/tutorial-list/index.tsx
index 81bf1aee2b..ba5ca17372 100644
--- a/src/tutorial-panel/components/tutorial-list/index.tsx
+++ b/src/tutorial-panel/components/tutorial-list/index.tsx
@@ -173,6 +173,7 @@ function Tutorial({
                       externalIconAriaLabel={i18nStrings.labelLearnMoreExternalIcon}
                       ariaLabel={i18nStrings.labelLearnMoreLink}
                       external={true}
+                      variant="primary"
                     >
                       {i18nStrings.learnMoreLinkText}
                     </InternalLink>
diff --git a/src/wizard/wizard-navigation.tsx b/src/wizard/wizard-navigation.tsx
index 72f3aa9e77..f9bf43296a 100644
--- a/src/wizard/wizard-navigation.tsx
+++ b/src/wizard/wizard-navigation.tsx
@@ -206,6 +206,7 @@ function NavigationStepClassic({ i18nStrings, index, onStepClick, onSkipToClick,
               evt.preventDefault();
               status === Statuses.Visited ? onStepClick(index) : onSkipToClick(index);
             }}
+            variant="primary"
           >
             {step.title}
           </InternalLink>
diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts
index 9739338c75..1240111630 100644
--- a/style-dictionary/classic/colors.ts
+++ b/style-dictionary/classic/colors.ts
@@ -115,11 +115,10 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextLayoutToggleHover: { light: '{colorBlue600}', dark: '{colorBlue500}' },
   colorTextLayoutToggleSelected: { light: '{colorWhite}', dark: '{colorGrey900}' },
   colorTextLinkDefault: { dark: '{colorBlue400}' },
-  colorTextLinkHover: '{colorTextLinkDefault}',
+  colorTextLinkHover: { light: '{colorBlue700}', dark: '{colorBlue300}' },
   colorTextLinkInvertedHover: '{colorTextNotificationDefault}',
   colorTextLinkButtonUnderline: 'currentColor',
   colorTextLinkButtonUnderlineHover: 'currentColor',
-  colorTextLinkPrimaryUnderline: 'transparent',
   colorTextPaginationPageNumberActiveDisabled: '{colorTextBodySecondary}',
   colorTextPaginationPageNumberDefault: { dark: '{colorTextInteractiveDefault}' },
   colorTextSegmentActive: { dark: '{colorGrey800}' },
diff --git a/style-dictionary/classic/typography.ts b/style-dictionary/classic/typography.ts
index 382f89ba72..3a1f3a15b5 100644
--- a/style-dictionary/classic/typography.ts
+++ b/style-dictionary/classic/typography.ts
@@ -37,9 +37,6 @@ const tokens: StyleDictionary.TypographyDictionary = {
   fontBoxValueLargeWeight: '300',
   fontLinkButtonLetterSpacing: 'normal',
   fontLinkButtonWeight: '400',
-  fontLinkPrimaryDecoration: 'none',
-  fontLinkPrimaryLetterSpacing: '0.005em',
-  fontLinkPrimaryWeight: '700',
   fontPanelHeaderLineHeight: '{fontHeadingLLineHeight}',
   fontPanelHeaderSize: '{fontHeadingLSize}',
   fontSmoothingWebkit: 'auto',
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 1baba23c9e..5fa9583465 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -416,7 +416,6 @@ export type ColorsTokenName =
   | 'colorTextLinkDefault'
   | 'colorTextLinkHover'
   | 'colorTextLinkInvertedHover'
-  | 'colorTextLinkPrimaryUnderline'
   | 'colorTextNotificationDefault'
   | 'colorTextNotificationStackBar'
   | 'colorTextNotificationYellow'
@@ -480,9 +479,6 @@ export type TypographyTokenName =
   | 'fontBoxValueLargeWeight'
   | 'fontLinkButtonLetterSpacing'
   | 'fontLinkButtonWeight'
-  | 'fontLinkPrimaryDecoration'
-  | 'fontLinkPrimaryLetterSpacing'
-  | 'fontLinkPrimaryWeight'
   | 'fontPanelHeaderLineHeight'
   | 'fontPanelHeaderSize'
   | 'fontSmoothingWebkit'
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 9011fd7eff..50318b7f9c 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -214,7 +214,6 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextLinkInvertedHover: '{colorWhite}',
   colorTextLinkButtonUnderline: 'transparent',
   colorTextLinkButtonUnderlineHover: 'transparent',
-  colorTextLinkPrimaryUnderline: '{colorTextLinkDefault}',
   colorTextNotificationDefault: '{colorGrey100}',
   colorTextNotificationStackBar: '{colorWhite}',
   colorTextNotificationYellow: '{colorGrey900}',
diff --git a/style-dictionary/visual-refresh/typography.ts b/style-dictionary/visual-refresh/typography.ts
index d9ac99f20c..72688e0570 100644
--- a/style-dictionary/visual-refresh/typography.ts
+++ b/style-dictionary/visual-refresh/typography.ts
@@ -42,9 +42,6 @@ export const tokens: StyleDictionary.TypographyDictionary = {
   fontBoxValueLargeWeight: '700',
   fontLinkButtonLetterSpacing: '{fontButtonLetterSpacing}',
   fontLinkButtonWeight: '{fontButtonWeight}',
-  fontLinkPrimaryDecoration: 'underline',
-  fontLinkPrimaryLetterSpacing: '"inherit"',
-  fontLinkPrimaryWeight: '"inherit"',
   fontPanelHeaderLineHeight: '{fontHeadingMLineHeight}',
   fontPanelHeaderSize: '{fontHeadingMSize}',
   fontSmoothingWebkit: 'antialiased',