diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 826c49f5db0770..a337b6e9ee2933 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -25,6 +25,7 @@ }, "dependencies": { "@fluentui/react-button": "^9.4.6", + "@fluentui/react-link": "^9.6.7", "@fluentui/semantic-tokens": "^0.0.1", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-provider": "^9.22.7", diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/useSemanticLinkStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/useSemanticLinkStyles.styles.ts new file mode 100644 index 00000000000000..34af21ba2f9e6e --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/useSemanticLinkStyles.styles.ts @@ -0,0 +1,151 @@ +'use client'; + +import { shorthands, makeStyles, mergeClasses } from '@griffel/react'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { tokens } from '@fluentui/react-theme'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { linkClassNames, type LinkState } from '@fluentui/react-link'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useStyles = makeStyles({ + focusIndicator: createCustomFocusIndicatorStyle({ + textDecorationColor: semanticTokens.groupFocusInnerStroke, + textDecorationLine: 'underline', + textDecorationStyle: 'double', + outlineStyle: 'none', + }), + // Common styles. + root: { + ':focus-visible': { + outlineStyle: 'none', + }, + textDecoration: semanticTokens.groupLinkTextUnderlineStyle, + backgroundColor: 'transparent', + boxSizing: 'border-box', + color: semanticTokens.groupLinkBrandTextForeground, + cursor: 'pointer', + display: 'inline', + fontFamily: semanticTokens.groupLinkTextFontfamily, + fontSize: semanticTokens.groupLinkMediumTextFontsize, + lineHeight: semanticTokens.groupLinkMediumTextLineheight, + fontWeight: semanticTokens.groupLinkMediumTextFontweight, + margin: '0', + padding: '0', + overflow: 'inherit', + textAlign: 'left', + textDecorationLine: semanticTokens.groupLinkOnpageTextDecorationline, + textDecorationThickness: semanticTokens.groupLinkTextUnderlineStrokewidth, + textOverflow: 'inherit', + userSelect: 'text', + + ':hover': { + textDecorationLine: semanticTokens.groupLinkOnpageTextDecorationlineHover, + color: semanticTokens.groupLinkBrandTextForegroundHover, + }, + + ':active': { + textDecorationLine: semanticTokens.groupLinkOnpageTextDecorationlinePressed, + color: semanticTokens.groupLinkBrandTextForegroundPressed, + }, + }, + // Overrides when the Link renders as a button. + button: { + ...shorthands.borderStyle('none'), + }, + // Overrides when an href is present so the Link renders as an anchor. + href: { + fontSize: 'inherit', + lineHeight: 'inherit', + }, + // Overrides when the Link appears subtle. + subtle: { + color: semanticTokens.groupLinkNeutralTextForeground, + + ':hover': { + color: semanticTokens.groupLinkNeutralTextForegroundHover, + }, + + ':active': { + color: semanticTokens.groupLinkNeutralTextForegroundPressed, + }, + }, + // Overrides when the Link is rendered inline within text. + inline: { + textDecorationLine: 'underline', + ':hover': { + textDecorationLine: 'underline', + }, + ':active': { + textDecorationLine: 'underline', + }, + }, + // Overrides when the Link is disabled. + disabled: { + textDecorationLine: 'none', + color: semanticTokens.groupLinkBrandTextForegroundDisabled, + cursor: 'not-allowed', + + ':hover': { + textDecorationLine: 'none', + color: semanticTokens.groupLinkBrandTextForegroundDisabled, + }, + + ':active': { + textDecorationLine: 'none', + color: semanticTokens.groupLinkBrandTextForegroundDisabled, + }, + }, + // Overrides when the Link is disabled. + disabledSubtle: { + textDecorationLine: 'none', + color: semanticTokens.groupLinkNeutralTextForegroundDisabled, + cursor: 'not-allowed', + + ':hover': { + textDecorationLine: 'none', + color: semanticTokens.groupLinkNeutralTextForegroundDisabled, + }, + + ':active': { + textDecorationLine: 'none', + color: semanticTokens.groupLinkNeutralTextForegroundDisabled, + }, + }, + + // Semantic-tokens does not include inverted tokens, use legacy/inverted themes + inverted: { + color: tokens.colorBrandForegroundInverted, + ':hover': { + color: tokens.colorBrandForegroundInvertedHover, + }, + ':active': { + color: tokens.colorBrandForegroundInvertedPressed, + }, + }, +}); + +export const useSemanticLinkStyles = (_state: unknown): LinkState => { + 'use no memo'; + + const state = _state as LinkState; + + const styles = useStyles(); + const { appearance, disabled, inline, root, backgroundAppearance } = state; + + state.root.className = mergeClasses( + state.root.className, + linkClassNames.root, + styles.root, + styles.focusIndicator, + root.as === 'a' && root.href && styles.href, + root.as === 'button' && styles.button, + appearance === 'subtle' && styles.subtle, + backgroundAppearance === 'inverted' && styles.inverted, + inline && styles.inline, + disabled && styles.disabled, + appearance === 'subtle' && disabled && styles.disabledSubtle, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index d0308d27a24381..29c36757b1691b 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -7,6 +7,7 @@ import { useSemanticSplitButtonStyles, useSemanticToggleButtonStyles, } from './Button'; +import { useSemanticLinkStyles } from './Link/useSemanticLinkStyles.styles'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Button styles @@ -15,4 +16,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useSplitButtonStyles_unstable: useSemanticSplitButtonStyles, useMenuButtonStyles_unstable: useSemanticMenuButtonStyles, useCompoundButtonStyles_unstable: useSemanticCompoundButtonStyles, + // Link styles + useLinkStyles_unstable: useSemanticLinkStyles, }; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 783f4f3c2f886c..04c4e31a8664fc 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -862,6 +862,114 @@ export const groupFocusOuterStroke = "var(--smtc-group-focus-outer-stroke, var(- // @public (undocumented) export const groupFocusOuterStrokewidth = "var(--smtc-group-focus-outer-strokewidth, var(--strokeWidthThick))"; +// @public (undocumented) +export const groupLinkBrandIconForeground = "var(--smtc-group-link-brand-icon-foreground)"; + +// @public (undocumented) +export const groupLinkBrandIconForegroundDisabled = "var(--smtc-group-link-brand-icon-foreground-disabled)"; + +// @public (undocumented) +export const groupLinkBrandIconForegroundHover = "var(--smtc-group-link-brand-icon-foreground-hover)"; + +// @public (undocumented) +export const groupLinkBrandIconForegroundPressed = "var(--smtc-group-link-brand-icon-foreground-pressed)"; + +// @public (undocumented) +export const groupLinkBrandTextForeground = "var(--smtc-group-link-brand-text-foreground, var(--colorBrandForegroundLink))"; + +// @public (undocumented) +export const groupLinkBrandTextForegroundDisabled = "var(--smtc-group-link-brand-text-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupLinkBrandTextForegroundHover = "var(--smtc-group-link-brand-text-foreground-hover, var(--colorBrandForegroundLinkHover))"; + +// @public (undocumented) +export const groupLinkBrandTextForegroundPressed = "var(--smtc-group-link-brand-text-foreground-pressed, var(--colorBrandForegroundLinkPressed))"; + +// @public (undocumented) +export const groupLinkGap = "var(--smtc-group-link-gap)"; + +// @public (undocumented) +export const groupLinkLargeIconSize = "var(--smtc-group-link-large-icon-size)"; + +// @public (undocumented) +export const groupLinkLargeTextFontsize = "var(--smtc-group-link-large-text-fontsize)"; + +// @public (undocumented) +export const groupLinkLargeTextFontweight = "var(--smtc-group-link-large-text-fontweight)"; + +// @public (undocumented) +export const groupLinkLargeTextLineheight = "var(--smtc-group-link-large-text-lineheight)"; + +// @public (undocumented) +export const groupLinkMediumIconSize = "var(--smtc-group-link-medium-icon-size)"; + +// @public (undocumented) +export const groupLinkMediumTextFontsize = "var(--smtc-group-link-medium-text-fontsize, var(--fontSizeBase300))"; + +// @public (undocumented) +export const groupLinkMediumTextFontweight = "var(--smtc-group-link-medium-text-fontweight, var(--fontWeightRegular))"; + +// @public (undocumented) +export const groupLinkMediumTextLineheight = "var(--smtc-group-link-medium-text-lineheight, var(--lineHeightBase300))"; + +// @public (undocumented) +export const groupLinkNeutralIconForeground = "var(--smtc-group-link-neutral-icon-foreground)"; + +// @public (undocumented) +export const groupLinkNeutralIconForegroundDisabled = "var(--smtc-group-link-neutral-icon-foreground-disabled)"; + +// @public (undocumented) +export const groupLinkNeutralIconForegroundHover = "var(--smtc-group-link-neutral-icon-foreground-hover)"; + +// @public (undocumented) +export const groupLinkNeutralIconForegroundPressed = "var(--smtc-group-link-neutral-icon-foreground-pressed)"; + +// @public (undocumented) +export const groupLinkNeutralTextForeground = "var(--smtc-group-link-neutral-text-foreground, var(--colorNeutralForeground2))"; + +// @public (undocumented) +export const groupLinkNeutralTextForegroundDisabled = "var(--smtc-group-link-neutral-text-foreground-disabled, var(--colorNeutralForegroundDisabled))"; + +// @public (undocumented) +export const groupLinkNeutralTextForegroundHover = "var(--smtc-group-link-neutral-text-foreground-hover, var(--colorNeutralForeground2Hover))"; + +// @public (undocumented) +export const groupLinkNeutralTextForegroundPressed = "var(--smtc-group-link-neutral-text-foreground-pressed, var(--colorNeutralForeground2Pressed))"; + +// @public (undocumented) +export const groupLinkOnpageTextDecorationline = "var(--smtc-group-link-onpage-text-decorationline, none)"; + +// @public (undocumented) +export const groupLinkOnpageTextDecorationlineDisabled = "var(--smtc-group-link-onpage-text-decorationline-disabled, none)"; + +// @public (undocumented) +export const groupLinkOnpageTextDecorationlineHover = "var(--smtc-group-link-onpage-text-decorationline-hover, underline)"; + +// @public (undocumented) +export const groupLinkOnpageTextDecorationlinePressed = "var(--smtc-group-link-onpage-text-decorationline-pressed, underline)"; + +// @public (undocumented) +export const groupLinkSmallIconSize = "var(--smtc-group-link-small-icon-size)"; + +// @public (undocumented) +export const groupLinkSmallTextFontsize = "var(--smtc-group-link-small-text-fontsize)"; + +// @public (undocumented) +export const groupLinkSmallTextFontweight = "var(--smtc-group-link-small-text-fontweight)"; + +// @public (undocumented) +export const groupLinkSmallTextLineheight = "var(--smtc-group-link-small-text-lineheight)"; + +// @public (undocumented) +export const groupLinkTextFontfamily = "var(--smtc-group-link-text-fontfamily, var(--fontFamilyBase))"; + +// @public (undocumented) +export const groupLinkTextUnderlineStrokewidth = "var(--smtc-group-link-text-underline-strokewidth, var(--strokeWidthThin))"; + +// @public (undocumented) +export const groupLinkTextUnderlineStyle = "var(--smtc-group-link-text-underline-style, solid)"; + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/semantic-tokens/scripts/definitions/components/link.ts b/packages/semantic-tokens/scripts/definitions/components/link.ts new file mode 100644 index 00000000000000..1d3f1c7fc0fc2c --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/components/link.ts @@ -0,0 +1,39 @@ +import { GroupPart } from '../groups.types'; + +// Link tokens +export const linkGroup: GroupPart = { + components: ['link'], + coreProperties: ['gap'], + variants: ['brand', 'neutral'], + states: ['', 'hover', 'pressed', 'disabled'], + parts: { + icon: { + variants: ['brand', 'neutral'], + states: ['', 'hover', 'pressed', 'disabled'], + scales: ['small', 'medium', 'large'], + scaleProperties: ['size'], + variantStateProperties: ['foreground'], + }, + text: { + variants: ['brand', 'neutral'], + coreProperties: ['fontfamily'], + variantStateProperties: ['foreground'], + scales: ['small', 'medium', 'large'], + states: ['', 'hover', 'pressed', 'disabled'], + scaleProperties: ['fontsize', 'lineheight', 'fontweight'], + exceptions: [ + { + // Onpage has full control over how to apply underline styles per state + states: ['', 'hover', 'pressed', 'disabled'], + variants: ['onpage'], + variantStateProperties: ['decorationline'], + }, + ], + }, + 'text.underline': { + coreProperties: ['strokewidth', 'style'], + variants: ['brand', 'neutral'], + states: ['', 'hover', 'pressed', 'disabled'], + }, + }, +}; diff --git a/packages/semantic-tokens/scripts/definitions/fallbacks/link.ts b/packages/semantic-tokens/scripts/definitions/fallbacks/link.ts new file mode 100644 index 00000000000000..22d2e75e4bada1 --- /dev/null +++ b/packages/semantic-tokens/scripts/definitions/fallbacks/link.ts @@ -0,0 +1,57 @@ +import { tokens } from '@fluentui/tokens'; +import { GroupFallback } from './fallbacks.types'; + +export const linkFallbacks: GroupFallback = { + groupLinkTextUnderlineStrokewidth: { + fluent: tokens.strokeWidthThin, + }, + groupLinkTextUnderlineStyle: { fluent: 'solid' }, + groupLinkTextFontfamily: { + fluent: tokens.fontFamilyBase, + }, + groupLinkMediumTextFontsize: { + fluent: tokens.fontSizeBase300, + }, + groupLinkMediumTextFontweight: { + fluent: tokens.fontWeightRegular, + }, + groupLinkBrandTextForeground: { + fluent: tokens.colorBrandForegroundLink, + }, + groupLinkBrandTextForegroundHover: { + fluent: tokens.colorBrandForegroundLinkHover, + }, + groupLinkBrandTextForegroundPressed: { + fluent: tokens.colorBrandForegroundLinkPressed, + }, + groupLinkNeutralTextForeground: { + fluent: tokens.colorNeutralForeground2, + }, + groupLinkNeutralTextForegroundHover: { + fluent: tokens.colorNeutralForeground2Hover, + }, + groupLinkNeutralTextForegroundPressed: { + fluent: tokens.colorNeutralForeground2Pressed, + }, + groupLinkBrandTextForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupLinkNeutralTextForegroundDisabled: { + fluent: tokens.colorNeutralForegroundDisabled, + }, + groupLinkMediumTextLineheight: { + fluent: tokens.lineHeightBase300, + }, + groupLinkOnpageTextDecorationline: { + fluent: 'none', + }, + groupLinkOnpageTextDecorationlineHover: { + fluent: 'underline', + }, + groupLinkOnpageTextDecorationlinePressed: { + fluent: 'underline', + }, + groupLinkOnpageTextDecorationlineDisabled: { + fluent: 'none', + }, +}; diff --git a/packages/semantic-tokens/scripts/definitions/groupFallbacks.ts b/packages/semantic-tokens/scripts/definitions/groupFallbacks.ts index 5136310d5da48f..2f716a5ca81c31 100644 --- a/packages/semantic-tokens/scripts/definitions/groupFallbacks.ts +++ b/packages/semantic-tokens/scripts/definitions/groupFallbacks.ts @@ -1,8 +1,10 @@ import { buttonFallbacks } from './fallbacks/button'; import { focusFallbacks } from './fallbacks/focus'; import { GroupFallbacks } from './fallbacks/fallbacks.types'; +import { linkFallbacks } from './fallbacks/link'; export const groupFallbacks: GroupFallbacks = { focus: focusFallbacks, button: buttonFallbacks, + link: linkFallbacks, }; diff --git a/packages/semantic-tokens/scripts/definitions/groups.ts b/packages/semantic-tokens/scripts/definitions/groups.ts index 9546f46b5f530e..0e365224f13cfd 100644 --- a/packages/semantic-tokens/scripts/definitions/groups.ts +++ b/packages/semantic-tokens/scripts/definitions/groups.ts @@ -1,5 +1,6 @@ import { focusGroup } from './application/focus'; import { buttonGroup } from './components/button'; +import { linkGroup } from './components/link'; import { Groups } from './groups.types'; export const groups: Groups = { @@ -7,4 +8,5 @@ export const groups: Groups = { focus: focusGroup, // Components button: buttonGroup, + link: linkGroup, }; diff --git a/packages/semantic-tokens/src/groups/link/tokens.ts b/packages/semantic-tokens/src/groups/link/tokens.ts new file mode 100644 index 00000000000000..c420c835c3a236 --- /dev/null +++ b/packages/semantic-tokens/src/groups/link/tokens.ts @@ -0,0 +1,48 @@ +export const groupLinkGap = 'var(--smtc-group-link-gap)'; +export const groupLinkBrandIconForeground = 'var(--smtc-group-link-brand-icon-foreground)'; +export const groupLinkBrandIconForegroundHover = 'var(--smtc-group-link-brand-icon-foreground-hover)'; +export const groupLinkBrandIconForegroundPressed = 'var(--smtc-group-link-brand-icon-foreground-pressed)'; +export const groupLinkBrandIconForegroundDisabled = 'var(--smtc-group-link-brand-icon-foreground-disabled)'; +export const groupLinkNeutralIconForeground = 'var(--smtc-group-link-neutral-icon-foreground)'; +export const groupLinkNeutralIconForegroundHover = 'var(--smtc-group-link-neutral-icon-foreground-hover)'; +export const groupLinkNeutralIconForegroundPressed = 'var(--smtc-group-link-neutral-icon-foreground-pressed)'; +export const groupLinkNeutralIconForegroundDisabled = 'var(--smtc-group-link-neutral-icon-foreground-disabled)'; +export const groupLinkSmallIconSize = 'var(--smtc-group-link-small-icon-size)'; +export const groupLinkMediumIconSize = 'var(--smtc-group-link-medium-icon-size)'; +export const groupLinkLargeIconSize = 'var(--smtc-group-link-large-icon-size)'; +export const groupLinkTextFontfamily = 'var(--smtc-group-link-text-fontfamily, var(--fontFamilyBase))'; +export const groupLinkBrandTextForeground = + 'var(--smtc-group-link-brand-text-foreground, var(--colorBrandForegroundLink))'; +export const groupLinkBrandTextForegroundHover = + 'var(--smtc-group-link-brand-text-foreground-hover, var(--colorBrandForegroundLinkHover))'; +export const groupLinkBrandTextForegroundPressed = + 'var(--smtc-group-link-brand-text-foreground-pressed, var(--colorBrandForegroundLinkPressed))'; +export const groupLinkBrandTextForegroundDisabled = + 'var(--smtc-group-link-brand-text-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupLinkNeutralTextForeground = + 'var(--smtc-group-link-neutral-text-foreground, var(--colorNeutralForeground2))'; +export const groupLinkNeutralTextForegroundHover = + 'var(--smtc-group-link-neutral-text-foreground-hover, var(--colorNeutralForeground2Hover))'; +export const groupLinkNeutralTextForegroundPressed = + 'var(--smtc-group-link-neutral-text-foreground-pressed, var(--colorNeutralForeground2Pressed))'; +export const groupLinkNeutralTextForegroundDisabled = + 'var(--smtc-group-link-neutral-text-foreground-disabled, var(--colorNeutralForegroundDisabled))'; +export const groupLinkSmallTextFontsize = 'var(--smtc-group-link-small-text-fontsize)'; +export const groupLinkSmallTextLineheight = 'var(--smtc-group-link-small-text-lineheight)'; +export const groupLinkSmallTextFontweight = 'var(--smtc-group-link-small-text-fontweight)'; +export const groupLinkMediumTextFontsize = 'var(--smtc-group-link-medium-text-fontsize, var(--fontSizeBase300))'; +export const groupLinkMediumTextLineheight = 'var(--smtc-group-link-medium-text-lineheight, var(--lineHeightBase300))'; +export const groupLinkMediumTextFontweight = 'var(--smtc-group-link-medium-text-fontweight, var(--fontWeightRegular))'; +export const groupLinkLargeTextFontsize = 'var(--smtc-group-link-large-text-fontsize)'; +export const groupLinkLargeTextLineheight = 'var(--smtc-group-link-large-text-lineheight)'; +export const groupLinkLargeTextFontweight = 'var(--smtc-group-link-large-text-fontweight)'; +export const groupLinkOnpageTextDecorationline = 'var(--smtc-group-link-onpage-text-decorationline, none)'; +export const groupLinkOnpageTextDecorationlineHover = + 'var(--smtc-group-link-onpage-text-decorationline-hover, underline)'; +export const groupLinkOnpageTextDecorationlinePressed = + 'var(--smtc-group-link-onpage-text-decorationline-pressed, underline)'; +export const groupLinkOnpageTextDecorationlineDisabled = + 'var(--smtc-group-link-onpage-text-decorationline-disabled, none)'; +export const groupLinkTextUnderlineStrokewidth = + 'var(--smtc-group-link-text-underline-strokewidth, var(--strokeWidthThin))'; +export const groupLinkTextUnderlineStyle = 'var(--smtc-group-link-text-underline-style, solid)'; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 93eca1989c00da..ac87a9154638e8 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -268,6 +268,45 @@ export { groupButtonLargeTextSecondaryLineheight, groupButtonLargeTextSecondaryFontweight, } from './groups/button/tokens'; + +export { + groupLinkGap, + groupLinkBrandIconForeground, + groupLinkBrandIconForegroundHover, + groupLinkBrandIconForegroundPressed, + groupLinkBrandIconForegroundDisabled, + groupLinkNeutralIconForeground, + groupLinkNeutralIconForegroundHover, + groupLinkNeutralIconForegroundPressed, + groupLinkNeutralIconForegroundDisabled, + groupLinkSmallIconSize, + groupLinkMediumIconSize, + groupLinkLargeIconSize, + groupLinkTextFontfamily, + groupLinkBrandTextForeground, + groupLinkBrandTextForegroundHover, + groupLinkBrandTextForegroundPressed, + groupLinkBrandTextForegroundDisabled, + groupLinkNeutralTextForeground, + groupLinkNeutralTextForegroundHover, + groupLinkNeutralTextForegroundPressed, + groupLinkNeutralTextForegroundDisabled, + groupLinkSmallTextFontsize, + groupLinkSmallTextLineheight, + groupLinkSmallTextFontweight, + groupLinkMediumTextFontsize, + groupLinkMediumTextLineheight, + groupLinkMediumTextFontweight, + groupLinkLargeTextFontsize, + groupLinkLargeTextLineheight, + groupLinkLargeTextFontweight, + groupLinkOnpageTextDecorationline, + groupLinkOnpageTextDecorationlineHover, + groupLinkOnpageTextDecorationlinePressed, + groupLinkOnpageTextDecorationlineDisabled, + groupLinkTextUnderlineStrokewidth, + groupLinkTextUnderlineStyle, +} from './groups/link/tokens'; export { ctrlCompoundbuttonIconSize, ctrlCompoundbuttonGap,