Skip to content

Commit 5e9cd86

Browse files
Mitch-At-WorkMitch-At-Work
committed
Update link tokens
1 parent c38929f commit 5e9cd86

File tree

8 files changed

+815
-516
lines changed

8 files changed

+815
-516
lines changed

‎packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { defaultTheme, ThemeIds } from '../theme';
1616
import { DIR_ID, THEME_ID } from '../constants';
1717
import { FluentStoryContext } from '../hooks';
1818
import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
19-
import { SEMANTIC_STYLE_HOOKS } from '@fluentui/semantic-style-hooks-preview';
2019

2120
const themes: Record<ThemeIds, Theme> = {
2221
'web-light': webLightTheme,
@@ -47,7 +46,7 @@ export const withFluentProvider = (StoryFn: () => JSXElement, context: FluentSto
4746
const theme = paramTheme ?? globalTheme ?? themes[defaultTheme.id];
4847

4948
return (
50-
<FluentProvider theme={theme} dir={dir} customStyleHooks_unstable={SEMANTIC_STYLE_HOOKS}>
49+
<FluentProvider theme={theme} dir={dir}>
5150
{isVrTest ? StoryFn() : <FluentExampleContainer theme={theme}>{StoryFn()}</FluentExampleContainer>}
5251
</FluentProvider>
5352
);

‎packages/react-components/semantic-style-hooks-preview/library/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
},
2626
"dependencies": {
2727
"@fluentui/react-button": "^9.4.6",
28+
"@fluentui/react-link": "^9.6.7",
2829
"@fluentui/semantic-tokens": "^0.0.1",
2930
"@fluentui/react-icons": "^2.0.245",
3031
"@fluentui/react-provider": "^9.22.7",

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Link/useSemanticLinkStyles.styles.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
24
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
35
import { tokens } from '@fluentui/react-theme';
@@ -60,18 +62,22 @@ const useStyles = makeStyles({
6062
color: semanticTokens.groupLinkNeutralTextForeground,
6163

6264
':hover': {
63-
textDecorationLine: 'underline',
6465
color: semanticTokens.groupLinkNeutralTextForegroundHover,
6566
},
6667

6768
':active': {
68-
textDecorationLine: 'underline',
6969
color: semanticTokens.groupLinkNeutralTextForegroundPressed,
7070
},
7171
},
7272
// Overrides when the Link is rendered inline within text.
7373
inline: {
7474
textDecorationLine: 'underline',
75+
':hover': {
76+
textDecorationLine: 'underline',
77+
},
78+
':active': {
79+
textDecorationLine: 'underline',
80+
},
7581
},
7682
// Overrides when the Link is disabled.
7783
disabled: {

‎packages/semantic-tokens/etc/semantic-tokens.api.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -862,6 +862,114 @@ export const groupFocusOuterStroke = "var(--smtc-group-focus-outer-stroke, var(-
862862
// @public (undocumented)
863863
export const groupFocusOuterStrokewidth = "var(--smtc-group-focus-outer-strokewidth, var(--strokeWidthThick))";
864864

865+
// @public (undocumented)
866+
export const groupLinkBrandIconForeground = "var(--smtc-group-link-brand-icon-foreground)";
867+
868+
// @public (undocumented)
869+
export const groupLinkBrandIconForegroundDisabled = "var(--smtc-group-link-brand-icon-foreground-disabled)";
870+
871+
// @public (undocumented)
872+
export const groupLinkBrandIconForegroundHover = "var(--smtc-group-link-brand-icon-foreground-hover)";
873+
874+
// @public (undocumented)
875+
export const groupLinkBrandIconForegroundPressed = "var(--smtc-group-link-brand-icon-foreground-pressed)";
876+
877+
// @public (undocumented)
878+
export const groupLinkBrandTextForeground = "var(--smtc-group-link-brand-text-foreground, var(--colorBrandForegroundLink))";
879+
880+
// @public (undocumented)
881+
export const groupLinkBrandTextForegroundDisabled = "var(--smtc-group-link-brand-text-foreground-disabled, var(--colorNeutralForegroundDisabled))";
882+
883+
// @public (undocumented)
884+
export const groupLinkBrandTextForegroundHover = "var(--smtc-group-link-brand-text-foreground-hover, var(--colorBrandForegroundLinkHover))";
885+
886+
// @public (undocumented)
887+
export const groupLinkBrandTextForegroundPressed = "var(--smtc-group-link-brand-text-foreground-pressed, var(--colorBrandForegroundLinkPressed))";
888+
889+
// @public (undocumented)
890+
export const groupLinkGap = "var(--smtc-group-link-gap)";
891+
892+
// @public (undocumented)
893+
export const groupLinkLargeIconSize = "var(--smtc-group-link-large-icon-size)";
894+
895+
// @public (undocumented)
896+
export const groupLinkLargeTextFontsize = "var(--smtc-group-link-large-text-fontsize)";
897+
898+
// @public (undocumented)
899+
export const groupLinkLargeTextFontweight = "var(--smtc-group-link-large-text-fontweight)";
900+
901+
// @public (undocumented)
902+
export const groupLinkLargeTextLineheight = "var(--smtc-group-link-large-text-lineheight)";
903+
904+
// @public (undocumented)
905+
export const groupLinkMediumIconSize = "var(--smtc-group-link-medium-icon-size)";
906+
907+
// @public (undocumented)
908+
export const groupLinkMediumTextFontsize = "var(--smtc-group-link-medium-text-fontsize, var(--fontSizeBase300))";
909+
910+
// @public (undocumented)
911+
export const groupLinkMediumTextFontweight = "var(--smtc-group-link-medium-text-fontweight, var(--fontWeightRegular))";
912+
913+
// @public (undocumented)
914+
export const groupLinkMediumTextLineheight = "var(--smtc-group-link-medium-text-lineheight, var(--lineHeightBase300))";
915+
916+
// @public (undocumented)
917+
export const groupLinkNeutralIconForeground = "var(--smtc-group-link-neutral-icon-foreground)";
918+
919+
// @public (undocumented)
920+
export const groupLinkNeutralIconForegroundDisabled = "var(--smtc-group-link-neutral-icon-foreground-disabled)";
921+
922+
// @public (undocumented)
923+
export const groupLinkNeutralIconForegroundHover = "var(--smtc-group-link-neutral-icon-foreground-hover)";
924+
925+
// @public (undocumented)
926+
export const groupLinkNeutralIconForegroundPressed = "var(--smtc-group-link-neutral-icon-foreground-pressed)";
927+
928+
// @public (undocumented)
929+
export const groupLinkNeutralTextForeground = "var(--smtc-group-link-neutral-text-foreground, var(--colorNeutralForeground2))";
930+
931+
// @public (undocumented)
932+
export const groupLinkNeutralTextForegroundDisabled = "var(--smtc-group-link-neutral-text-foreground-disabled, var(--colorNeutralForegroundDisabled))";
933+
934+
// @public (undocumented)
935+
export const groupLinkNeutralTextForegroundHover = "var(--smtc-group-link-neutral-text-foreground-hover, var(--colorNeutralForeground2Hover))";
936+
937+
// @public (undocumented)
938+
export const groupLinkNeutralTextForegroundPressed = "var(--smtc-group-link-neutral-text-foreground-pressed, var(--colorNeutralForeground2Pressed))";
939+
940+
// @public (undocumented)
941+
export const groupLinkOnpageTextDecorationline = "var(--smtc-group-link-onpage-text-decorationline, none)";
942+
943+
// @public (undocumented)
944+
export const groupLinkOnpageTextDecorationlineDisabled = "var(--smtc-group-link-onpage-text-decorationline-disabled, none)";
945+
946+
// @public (undocumented)
947+
export const groupLinkOnpageTextDecorationlineHover = "var(--smtc-group-link-onpage-text-decorationline-hover, underline)";
948+
949+
// @public (undocumented)
950+
export const groupLinkOnpageTextDecorationlinePressed = "var(--smtc-group-link-onpage-text-decorationline-pressed, underline)";
951+
952+
// @public (undocumented)
953+
export const groupLinkSmallIconSize = "var(--smtc-group-link-small-icon-size)";
954+
955+
// @public (undocumented)
956+
export const groupLinkSmallTextFontsize = "var(--smtc-group-link-small-text-fontsize)";
957+
958+
// @public (undocumented)
959+
export const groupLinkSmallTextFontweight = "var(--smtc-group-link-small-text-fontweight)";
960+
961+
// @public (undocumented)
962+
export const groupLinkSmallTextLineheight = "var(--smtc-group-link-small-text-lineheight)";
963+
964+
// @public (undocumented)
965+
export const groupLinkTextFontfamily = "var(--smtc-group-link-text-fontfamily, var(--fontFamilyBase))";
966+
967+
// @public (undocumented)
968+
export const groupLinkTextUnderlineStrokewidth = "var(--smtc-group-link-text-underline-strokewidth, var(--strokeWidthThin))";
969+
970+
// @public (undocumented)
971+
export const groupLinkTextUnderlineStyle = "var(--smtc-group-link-text-underline-style, solid)";
972+
865973
// (No @packageDocumentation comment for this package)
866974

867975
```

‎packages/semantic-tokens/src/controls/compoundbutton/tokens.ts‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
export const ctrlCompoundbuttonIconSize = 'var(--smtc-ctrl-compoundbutton-icon-size, 40px)';
22
export const ctrlCompoundbuttonGap = 'var(--smtc-ctrl-compoundbutton-gap, var(--spacingHorizontalM))';
3-
export const ctrlCompoundbuttonSmallPaddingHorizontal = 'var(--smtc-ctrl-compoundbutton-small-padding-horizontal, var(--spacingHorizontalS))';
4-
export const ctrlCompoundbuttonSmallPaddingTop = 'var(--smtc-ctrl-compoundbutton-small-padding-top, var(--spacingHorizontalS))';
5-
export const ctrlCompoundbuttonSmallPaddingBottom = 'var(--smtc-ctrl-compoundbutton-small-padding-bottom, var(--spacingHorizontalMNudge))';
3+
export const ctrlCompoundbuttonSmallPaddingHorizontal =
4+
'var(--smtc-ctrl-compoundbutton-small-padding-horizontal, var(--spacingHorizontalS))';
5+
export const ctrlCompoundbuttonSmallPaddingTop =
6+
'var(--smtc-ctrl-compoundbutton-small-padding-top, var(--spacingHorizontalS))';
7+
export const ctrlCompoundbuttonSmallPaddingBottom =
8+
'var(--smtc-ctrl-compoundbutton-small-padding-bottom, var(--spacingHorizontalMNudge))';
69
export const ctrlCompoundbuttonSmallMinwidth = 'var(--smtc-ctrl-compoundbutton-small-minwidth)';
710
export const ctrlCompoundbuttonSmallMinheight = 'var(--smtc-ctrl-compoundbutton-small-minheight)';
8-
export const ctrlCompoundbuttonMediumPaddingHorizontal = 'var(--smtc-ctrl-compoundbutton-medium-padding-horizontal, var(--spacingHorizontalM))';
11+
export const ctrlCompoundbuttonMediumPaddingHorizontal =
12+
'var(--smtc-ctrl-compoundbutton-medium-padding-horizontal, var(--spacingHorizontalM))';
913
export const ctrlCompoundbuttonMediumPaddingTop = 'var(--smtc-ctrl-compoundbutton-medium-padding-top, 14px)';
10-
export const ctrlCompoundbuttonMediumPaddingBottom = 'var(--smtc-ctrl-compoundbutton-medium-padding-bottom, var(--spacingHorizontalL))';
14+
export const ctrlCompoundbuttonMediumPaddingBottom =
15+
'var(--smtc-ctrl-compoundbutton-medium-padding-bottom, var(--spacingHorizontalL))';
1116
export const ctrlCompoundbuttonMediumMinwidth = 'var(--smtc-ctrl-compoundbutton-medium-minwidth)';
1217
export const ctrlCompoundbuttonMediumMinheight = 'var(--smtc-ctrl-compoundbutton-medium-minheight)';
13-
export const ctrlCompoundbuttonLargePaddingHorizontal = 'var(--smtc-ctrl-compoundbutton-large-padding-horizontal, var(--spacingHorizontalL))';
18+
export const ctrlCompoundbuttonLargePaddingHorizontal =
19+
'var(--smtc-ctrl-compoundbutton-large-padding-horizontal, var(--spacingHorizontalL))';
1420
export const ctrlCompoundbuttonLargePaddingTop = 'var(--smtc-ctrl-compoundbutton-large-padding-top, 18px)';
15-
export const ctrlCompoundbuttonLargePaddingBottom = 'var(--smtc-ctrl-compoundbutton-large-padding-bottom, var(--spacingHorizontalXL))';
21+
export const ctrlCompoundbuttonLargePaddingBottom =
22+
'var(--smtc-ctrl-compoundbutton-large-padding-bottom, var(--spacingHorizontalXL))';
1623
export const ctrlCompoundbuttonLargeMinwidth = 'var(--smtc-ctrl-compoundbutton-large-minwidth)';
1724
export const ctrlCompoundbuttonLargeMinheight = 'var(--smtc-ctrl-compoundbutton-large-minheight)';
18-
export const ctrlCompoundbuttonSmallIcononlyPadding = 'var(--smtc-ctrl-compoundbutton-small-icononly-padding, var(--spacingHorizontalXS))';
19-
export const ctrlCompoundbuttonMediumIcononlyPadding = 'var(--smtc-ctrl-compoundbutton-medium-icononly-padding, var(--spacingHorizontalSNudge))';
20-
export const ctrlCompoundbuttonLargeIcononlyPadding = 'var(--smtc-ctrl-compoundbutton-large-icononly-padding, var(--spacingHorizontalS))';
25+
export const ctrlCompoundbuttonSmallIcononlyPadding =
26+
'var(--smtc-ctrl-compoundbutton-small-icononly-padding, var(--spacingHorizontalXS))';
27+
export const ctrlCompoundbuttonMediumIcononlyPadding =
28+
'var(--smtc-ctrl-compoundbutton-medium-icononly-padding, var(--spacingHorizontalSNudge))';
29+
export const ctrlCompoundbuttonLargeIcononlyPadding =
30+
'var(--smtc-ctrl-compoundbutton-large-icononly-padding, var(--spacingHorizontalS))';

0 commit comments

Comments
 (0)