@instructure/ui-link 10.15.3-snapshot-0 → 10.15.3-snapshot-2

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.15.3-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.15.3-snapshot-0) (2025-04-10)
+## [10.15.3-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.15.3-snapshot-2) (2025-04-11)
 
-**Note:** Version bump only for package @instructure/ui-link
+
+### Features
+
+* **ui-link:** add variants to <Link> ([308bb2f](https://github.com/instructure/instructure-ui/commit/308bb2f0e58cff05fd2358e17f449d6eaadf7d4a))
 
 
 

package/es/Link/index.js

@@ -195,7 +195,7 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       type: type,
       tabIndex: tabIndex,
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link
-    }), renderIcon && iconPlacement === 'start' && this.renderIcon(), children, renderIcon && iconPlacement === 'end' && this.renderIcon());
+    }), renderIcon && iconPlacement === 'start' ? this.renderIcon() : null, children, renderIcon && iconPlacement === 'end' ? this.renderIcon() : null);
   }
 }, _Link.displayName = "Link", _Link.componentId = 'Link', _Link.propTypes = propTypes, _Link.allowedProps = allowedProps, _Link.defaultProps = {
   // Leave interaction default undefined so that `disabled` can also be supplied

package/es/Link/props.js

@@ -40,7 +40,8 @@ const propTypes = {
   onBlur: PropTypes.func,
   onClick: PropTypes.func,
   onFocus: PropTypes.func,
-  onMouseEnter: PropTypes.func
+  onMouseEnter: PropTypes.func,
+  variant: PropTypes.oneOf(['inline', 'inline-small', 'standalone', 'standalone-small'])
 };
-const allowedProps = ['children', 'href', 'color', 'elementRef', 'as', 'role', 'forceButtonRole', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'isWithinText', 'onBlur', 'onClick', 'onFocus', 'onMouseEnter'];
+const allowedProps = ['children', 'href', 'color', 'elementRef', 'as', 'role', 'forceButtonRole', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'isWithinText', 'onBlur', 'onClick', 'onFocus', 'onMouseEnter', 'variant'];
 export { propTypes, allowedProps };

package/es/Link/styles.js

@@ -36,10 +36,33 @@ const generateStyle = (componentTheme, props, state) => {
   const isWithinText = props.isWithinText,
     renderIcon = props.renderIcon,
     iconPlacement = props.iconPlacement,
-    color = props.color;
+    color = props.color,
+    variant = props.variant;
   const containsTruncateText = state.containsTruncateText,
     hasVisibleChildren = state.hasVisibleChildren;
   const inverseStyle = color === 'link-inverse';
+  const variantStyles = {
+    inline: {
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight,
+      textDecoration: 'underline'
+    },
+    'inline-small': {
+      fontSize: componentTheme.fontSizeSmall,
+      lineHeight: '1.3125rem',
+      textDecoration: 'underline'
+    },
+    standalone: {
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight,
+      textDecoration: 'none'
+    },
+    'standalone-small': {
+      fontSize: componentTheme.fontSizeSmall,
+      lineHeight: componentTheme.lineHeight,
+      textDecoration: 'none'
+    }
+  };
   const baseStyles = {
     boxSizing: 'border-box',
     fontFamily: componentTheme.fontFamily,
@@ -75,7 +98,6 @@ const generateStyle = (componentTheme, props, state) => {
     ...baseStyles,
     cursor: 'pointer',
     color: componentTheme.color,
-    textDecoration: isWithinText ? componentTheme.textDecorationWithinText : componentTheme.textDecorationOutsideText,
     '&:focus': {
       color: componentTheme.color,
       outlineColor: componentTheme.focusOutlineColor
@@ -83,7 +105,10 @@ const generateStyle = (componentTheme, props, state) => {
     '&:hover, &:active': {
       color: componentTheme.hoverColor,
       textDecoration: isWithinText ? componentTheme.hoverTextDecorationWithinText : componentTheme.hoverTextDecorationOutsideText
-    }
+    },
+    ...(variant ? variantStyles[variant] : {
+      textDecoration: isWithinText ? componentTheme.textDecorationWithinText : componentTheme.textDecorationOutsideText
+    })
   };
   const buttonStyle = {
     appearance: 'none',
@@ -91,10 +116,12 @@ const generateStyle = (componentTheme, props, state) => {
     background: 'none',
     border: 'none',
     cursor: 'pointer',
-    fontSize: '1em',
     margin: 0,
     padding: 0,
-    textAlign: 'inherit'
+    textAlign: 'inherit',
+    ...(variant ? variantStyles[variant] : {
+      fontSize: '1em'
+    })
   };
   const inverseStyles = {
     color: componentTheme.colorInverse,
@@ -105,6 +132,24 @@ const generateStyle = (componentTheme, props, state) => {
       color: componentTheme.colorInverse
     }
   };
+  const variantIconStyles = {
+    inline: {
+      paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
+      paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
+    },
+    'inline-small': {
+      paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMarginSmall,
+      paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMarginSmall : 0
+    },
+    standalone: {
+      paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
+      paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
+    },
+    'standalone-small': {
+      paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMarginSmall,
+      paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMarginSmall : 0
+    }
+  };
   return {
     link: {
       label: 'link',
@@ -125,8 +170,10 @@ const generateStyle = (componentTheme, props, state) => {
       ...(renderIcon && {
         fontSize: componentTheme.iconSize,
         boxSizing: 'border-box',
-        paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
-        paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
+        ...(variant ? variantIconStyles[variant] : {
+          paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
+          paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
+        })
       })
     }
   };

package/es/Link/theme.js

@@ -54,6 +54,9 @@ const generateComponentTheme = theme => {
   const componentVariables = {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.content,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight150,
+    fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.contentSmall,
     color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue5782,
     textDecorationWithinText: 'underline',
     hoverTextDecorationWithinText: 'none',
@@ -69,7 +72,8 @@ const generateComponentTheme = theme => {
     focusInverseIconOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010,
     iconSize: '1.125em',
     // make icon slightly larger than inherited font-size,
-    iconPlusTextMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    iconPlusTextMargin: spacing.space4,
+    iconPlusTextMarginSmall: spacing.space2,
     textUnderlineOffset: 'auto'
   };
   return {

package/lib/Link/index.js

@@ -207,7 +207,7 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       type: type,
       tabIndex: tabIndex,
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link
-    }), renderIcon && iconPlacement === 'start' && this.renderIcon(), children, renderIcon && iconPlacement === 'end' && this.renderIcon());
+    }), renderIcon && iconPlacement === 'start' ? this.renderIcon() : null, children, renderIcon && iconPlacement === 'end' ? this.renderIcon() : null);
   }
 }, _Link.displayName = "Link", _Link.componentId = 'Link', _Link.propTypes = _props.propTypes, _Link.allowedProps = _props.allowedProps, _Link.defaultProps = {
   // Leave interaction default undefined so that `disabled` can also be supplied

package/lib/Link/props.js

@@ -47,6 +47,7 @@ const propTypes = exports.propTypes = {
   onBlur: _propTypes.default.func,
   onClick: _propTypes.default.func,
   onFocus: _propTypes.default.func,
-  onMouseEnter: _propTypes.default.func
+  onMouseEnter: _propTypes.default.func,
+  variant: _propTypes.default.oneOf(['inline', 'inline-small', 'standalone', 'standalone-small'])
 };
-const allowedProps = exports.allowedProps = ['children', 'href', 'color', 'elementRef', 'as', 'role', 'forceButtonRole', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'isWithinText', 'onBlur', 'onClick', 'onFocus', 'onMouseEnter'];
+const allowedProps = exports.allowedProps = ['children', 'href', 'color', 'elementRef', 'as', 'role', 'forceButtonRole', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'isWithinText', 'onBlur', 'onClick', 'onFocus', 'onMouseEnter', 'variant'];

package/lib/Link/styles.js

@@ -42,10 +42,33 @@ const generateStyle = (componentTheme, props, state) => {
   const isWithinText = props.isWithinText,
     renderIcon = props.renderIcon,
     iconPlacement = props.iconPlacement,
-    color = props.color;
+    color = props.color,
+    variant = props.variant;
   const containsTruncateText = state.containsTruncateText,
     hasVisibleChildren = state.hasVisibleChildren;
   const inverseStyle = color === 'link-inverse';
+  const variantStyles = {
+    inline: {
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight,
+      textDecoration: 'underline'
+    },
+    'inline-small': {
+      fontSize: componentTheme.fontSizeSmall,
+      lineHeight: '1.3125rem',
+      textDecoration: 'underline'
+    },
+    standalone: {
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight,
+      textDecoration: 'none'
+    },
+    'standalone-small': {
+      fontSize: componentTheme.fontSizeSmall,
+      lineHeight: componentTheme.lineHeight,
+      textDecoration: 'none'
+    }
+  };
   const baseStyles = {
     boxSizing: 'border-box',
     fontFamily: componentTheme.fontFamily,
@@ -81,7 +104,6 @@ const generateStyle = (componentTheme, props, state) => {
     ...baseStyles,
     cursor: 'pointer',
     color: componentTheme.color,
-    textDecoration: isWithinText ? componentTheme.textDecorationWithinText : componentTheme.textDecorationOutsideText,
     '&:focus': {
       color: componentTheme.color,
       outlineColor: componentTheme.focusOutlineColor
@@ -89,7 +111,10 @@ const generateStyle = (componentTheme, props, state) => {
     '&:hover, &:active': {
       color: componentTheme.hoverColor,
       textDecoration: isWithinText ? componentTheme.hoverTextDecorationWithinText : componentTheme.hoverTextDecorationOutsideText
-    }
+    },
+    ...(variant ? variantStyles[variant] : {
+      textDecoration: isWithinText ? componentTheme.textDecorationWithinText : componentTheme.textDecorationOutsideText
+    })
   };
   const buttonStyle = {
     appearance: 'none',
@@ -97,10 +122,12 @@ const generateStyle = (componentTheme, props, state) => {
     background: 'none',
     border: 'none',
     cursor: 'pointer',
-    fontSize: '1em',
     margin: 0,
     padding: 0,
-    textAlign: 'inherit'
+    textAlign: 'inherit',
+    ...(variant ? variantStyles[variant] : {
+      fontSize: '1em'
+    })
   };
   const inverseStyles = {
     color: componentTheme.colorInverse,
@@ -111,6 +138,24 @@ const generateStyle = (componentTheme, props, state) => {
       color: componentTheme.colorInverse
     }
   };
+  const variantIconStyles = {
+    inline: {
+      paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
+      paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
+    },
+    'inline-small': {
+      paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMarginSmall,
+      paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMarginSmall : 0
+    },
+    standalone: {
+      paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
+      paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
+    },
+    'standalone-small': {
+      paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMarginSmall,
+      paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMarginSmall : 0
+    }
+  };
   return {
     link: {
       label: 'link',
@@ -131,8 +176,10 @@ const generateStyle = (componentTheme, props, state) => {
       ...(renderIcon && {
         fontSize: componentTheme.iconSize,
         boxSizing: 'border-box',
-        paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
-        paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
+        ...(variant ? variantIconStyles[variant] : {
+          paddingInlineStart: iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
+          paddingInlineEnd: iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
+        })
       })
     }
   };

package/lib/Link/theme.js

@@ -60,6 +60,9 @@ const generateComponentTheme = theme => {
   const componentVariables = {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.content,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight150,
+    fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.contentSmall,
     color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue5782,
     textDecorationWithinText: 'underline',
     hoverTextDecorationWithinText: 'none',
@@ -75,7 +78,8 @@ const generateComponentTheme = theme => {
     focusInverseIconOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010,
     iconSize: '1.125em',
     // make icon slightly larger than inherited font-size,
-    iconPlusTextMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    iconPlusTextMargin: spacing.space4,
+    iconPlusTextMarginSmall: spacing.space2,
     textUnderlineOffset: 'auto'
   };
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-link",
-  "version": "10.15.3-snapshot-0",
+  "version": "10.15.3-snapshot-2",
   "description": "A component for creating links",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,24 +24,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.15.3-snapshot-0",
-    "@instructure/emotion": "10.15.3-snapshot-0",
-    "@instructure/shared-types": "10.15.3-snapshot-0",
-    "@instructure/ui-a11y-utils": "10.15.3-snapshot-0",
-    "@instructure/ui-color-utils": "10.15.3-snapshot-0",
-    "@instructure/ui-dom-utils": "10.15.3-snapshot-0",
-    "@instructure/ui-icons": "10.15.3-snapshot-0",
-    "@instructure/ui-prop-types": "10.15.3-snapshot-0",
-    "@instructure/ui-react-utils": "10.15.3-snapshot-0",
-    "@instructure/ui-testable": "10.15.3-snapshot-0",
-    "@instructure/ui-view": "10.15.3-snapshot-0",
+    "@instructure/console": "10.15.3-snapshot-2",
+    "@instructure/emotion": "10.15.3-snapshot-2",
+    "@instructure/shared-types": "10.15.3-snapshot-2",
+    "@instructure/ui-a11y-utils": "10.15.3-snapshot-2",
+    "@instructure/ui-color-utils": "10.15.3-snapshot-2",
+    "@instructure/ui-dom-utils": "10.15.3-snapshot-2",
+    "@instructure/ui-icons": "10.15.3-snapshot-2",
+    "@instructure/ui-prop-types": "10.15.3-snapshot-2",
+    "@instructure/ui-react-utils": "10.15.3-snapshot-2",
+    "@instructure/ui-testable": "10.15.3-snapshot-2",
+    "@instructure/ui-view": "10.15.3-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.15.3-snapshot-0",
-    "@instructure/ui-babel-preset": "10.15.3-snapshot-0",
-    "@instructure/ui-test-utils": "10.15.3-snapshot-0",
-    "@instructure/ui-themes": "10.15.3-snapshot-0",
+    "@instructure/ui-axe-check": "10.15.3-snapshot-2",
+    "@instructure/ui-babel-preset": "10.15.3-snapshot-2",
+    "@instructure/ui-test-utils": "10.15.3-snapshot-2",
+    "@instructure/ui-themes": "10.15.3-snapshot-2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/Link/README.md

@@ -22,6 +22,37 @@ type: example
 </View>
 ```
 
+### Variant
+
+In order to make it easy to get the most commonly used links, we have the variant prop. It will set all the necessary styles (fontSize, lineHeight, and textDecoration).
+
+```js
+---
+type: example
+---
+<div>
+<div>
+In a line of text you should use the <Link variant="inline" renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">inline</Link> link variant.
+</div>
+
+<br></br>
+<div>
+<Text variant="contentSmall">In a line of text, where the text is smaller, use the <Link variant="inline-small"  renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">inline-small</Link> link variant
+</Text>
+</div>
+
+<br></br>
+<div>
+If the link is standalone (not in a text), use the <code>standalone</code> <Link display="block" variant="standalone" renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">standalone</Link>
+</div>
+
+<br></br>
+<div>
+If the link is standalone (not in a text), but smaller, use the <code>standalone-small</code> <Link display="block" variant="standalone-small"  renderIcon={<IconUserLine />} href="https://instructure.github.io/instructure-ui/">standalone-small</Link>
+</div>
+</div>
+```
+
 ### Adding margin
 
 Use the `margin` prop to add space to the left or right of the Link. Because
@@ -76,6 +107,8 @@ Use the `renderIcon` property to put an [icon](#icons) inside a Link. To positio
 icon _after_ the link text, change the `iconPlacement` property to `end`. You can also
 render a Link with just an icon. Don't forget to add text for screen readers, though.
 
+NOTE: if you want the icon to have the same `font-size` as the link, do not specify its `size`!
+
 ```js
 ---
 type: example

package/src/Link/index.tsx

@@ -252,9 +252,9 @@ class Link extends Component<LinkProps, LinkState> {
         tabIndex={tabIndex}
         css={this.props.styles?.link}
       >
-        {renderIcon && iconPlacement === 'start' && this.renderIcon()}
+        {renderIcon && iconPlacement === 'start' ? this.renderIcon() : null}
         {children}
-        {renderIcon && iconPlacement === 'end' && this.renderIcon()}
+        {renderIcon && iconPlacement === 'end' ? this.renderIcon() : null}
       </View>
     )
   }

package/src/Link/props.ts

@@ -129,6 +129,11 @@ type LinkOwnProps = {
    * Fires when the Link is hovered
    */
   onMouseEnter?: (event: React.MouseEvent<ViewOwnProps>) => void
+
+  /**
+   * Sets pre-defined values for the component to achieve specific roles for the component
+   */
+  variant?: 'inline' | 'inline-small' | 'standalone' | 'standalone-small'
 }
 
 export type LinkStyleProps = {
@@ -174,7 +179,13 @@ const propTypes: PropValidators<PropKeys> = {
   onBlur: PropTypes.func,
   onClick: PropTypes.func,
   onFocus: PropTypes.func,
-  onMouseEnter: PropTypes.func
+  onMouseEnter: PropTypes.func,
+  variant: PropTypes.oneOf([
+    'inline',
+    'inline-small',
+    'standalone',
+    'standalone-small'
+  ])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -194,7 +205,8 @@ const allowedProps: AllowedPropKeys = [
   'onBlur',
   'onClick',
   'onFocus',
-  'onMouseEnter'
+  'onMouseEnter',
+  'variant'
 ]
 
 export type { LinkProps, LinkState, LinkStyle }

package/src/Link/styles.ts

@@ -40,10 +40,33 @@ const generateStyle = (
   props: LinkProps,
   state: LinkStyleProps
 ): LinkStyle => {
-  const { isWithinText, renderIcon, iconPlacement, color } = props
+  const { isWithinText, renderIcon, iconPlacement, color, variant } = props
   const { containsTruncateText, hasVisibleChildren } = state
   const inverseStyle = color === 'link-inverse'
 
+  const variantStyles = {
+    inline: {
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight,
+      textDecoration: 'underline'
+    },
+    'inline-small': {
+      fontSize: componentTheme.fontSizeSmall,
+      lineHeight: '1.3125rem',
+      textDecoration: 'underline'
+    },
+    standalone: {
+      fontSize: componentTheme.fontSize,
+      lineHeight: componentTheme.lineHeight,
+      textDecoration: 'none'
+    },
+    'standalone-small': {
+      fontSize: componentTheme.fontSizeSmall,
+      lineHeight: componentTheme.lineHeight,
+      textDecoration: 'none'
+    }
+  }
+
   const baseStyles = {
     boxSizing: 'border-box',
     fontFamily: componentTheme.fontFamily,
@@ -84,9 +107,6 @@ const generateStyle = (
     ...baseStyles,
     cursor: 'pointer',
     color: componentTheme.color,
-    textDecoration: isWithinText
-      ? componentTheme.textDecorationWithinText
-      : componentTheme.textDecorationOutsideText,
     '&:focus': {
       color: componentTheme.color,
       outlineColor: componentTheme.focusOutlineColor
@@ -96,7 +116,14 @@ const generateStyle = (
       textDecoration: isWithinText
         ? componentTheme.hoverTextDecorationWithinText
         : componentTheme.hoverTextDecorationOutsideText
-    }
+    },
+    ...(variant
+      ? variantStyles[variant]
+      : {
+          textDecoration: isWithinText
+            ? componentTheme.textDecorationWithinText
+            : componentTheme.textDecorationOutsideText
+        })
   }
 
   const buttonStyle = {
@@ -105,10 +132,10 @@ const generateStyle = (
     background: 'none',
     border: 'none',
     cursor: 'pointer',
-    fontSize: '1em',
     margin: 0,
     padding: 0,
-    textAlign: 'inherit'
+    textAlign: 'inherit',
+    ...(variant ? variantStyles[variant] : { fontSize: '1em' })
   }
 
   const inverseStyles = {
@@ -120,7 +147,32 @@ const generateStyle = (
       color: componentTheme.colorInverse
     }
   }
-
+  const variantIconStyles = {
+    inline: {
+      paddingInlineStart:
+        iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
+      paddingInlineEnd:
+        iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
+    },
+    'inline-small': {
+      paddingInlineStart:
+        iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMarginSmall,
+      paddingInlineEnd:
+        iconPlacement === 'start' ? componentTheme.iconPlusTextMarginSmall : 0
+    },
+    standalone: {
+      paddingInlineStart:
+        iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
+      paddingInlineEnd:
+        iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
+    },
+    'standalone-small': {
+      paddingInlineStart:
+        iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMarginSmall,
+      paddingInlineEnd:
+        iconPlacement === 'start' ? componentTheme.iconPlusTextMarginSmall : 0
+    }
+  }
   return {
     link: {
       label: 'link',
@@ -145,10 +197,18 @@ const generateStyle = (
       ...(renderIcon && {
         fontSize: componentTheme.iconSize,
         boxSizing: 'border-box',
-        paddingInlineStart:
-          iconPlacement === 'start' ? 0 : componentTheme.iconPlusTextMargin,
-        paddingInlineEnd:
-          iconPlacement === 'start' ? componentTheme.iconPlusTextMargin : 0
+        ...(variant
+          ? variantIconStyles[variant]
+          : {
+              paddingInlineStart:
+                iconPlacement === 'start'
+                  ? 0
+                  : componentTheme.iconPlusTextMargin,
+              paddingInlineEnd:
+                iconPlacement === 'start'
+                  ? componentTheme.iconPlusTextMargin
+                  : 0
+            })
       })
     }
   }

package/src/Link/theme.ts

@@ -52,6 +52,9 @@ const generateComponentTheme = (theme: Theme): LinkTheme => {
   const componentVariables: LinkTheme = {
     fontFamily: typography?.fontFamily,
     fontWeight: typography?.fontWeightNormal,
+    fontSize: typography?.content,
+    lineHeight: typography?.lineHeight150,
+    fontSizeSmall: typography?.contentSmall,
     color: colors?.contrasts?.blue5782,
 
     textDecorationWithinText: 'underline',
@@ -71,7 +74,8 @@ const generateComponentTheme = (theme: Theme): LinkTheme => {
     focusInverseIconOutlineColor: colors?.contrasts?.white1010,
 
     iconSize: '1.125em', // make icon slightly larger than inherited font-size,
-    iconPlusTextMargin: spacing?.xxSmall,
+    iconPlusTextMargin: spacing.space4,
+    iconPlusTextMarginSmall: spacing.space2,
     textUnderlineOffset: 'auto'
   }