@fluentui/react-link 9.6.10 → 9.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -2
- package/lib/components/Link/useLinkStyles.styles.js +12 -7
- package/lib/components/Link/useLinkStyles.styles.js.map +1 -1
- package/lib/components/Link/useLinkStyles.styles.raw.js +13 -4
- package/lib/components/Link/useLinkStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Link/useLinkStyles.styles.js +15 -7
- package/lib-commonjs/components/Link/useLinkStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js +13 -4
- package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-link
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 11 Nov 2025 19:13:32 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.7.0)
|
|
8
|
+
|
|
9
|
+
Tue, 11 Nov 2025 19:13:32 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.6.10..@fluentui/react-link_v9.7.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: add brand appearance variant ([PR #35403](https://github.com/microsoft/fluentui/pull/35403) by vgenaev@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.3 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v9.26.0 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.26.10 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.25.4 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
|
|
19
|
+
|
|
20
|
+
### Patches
|
|
21
|
+
|
|
22
|
+
- chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
|
|
23
|
+
- fix: incorrect token for subtle appearance ([PR #35467](https://github.com/microsoft/fluentui/pull/35467) by vgenaev@gmail.com)
|
|
24
|
+
|
|
7
25
|
## [9.6.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.6.10)
|
|
8
26
|
|
|
9
|
-
Thu, 06 Nov 2025
|
|
27
|
+
Thu, 06 Nov 2025 15:01:25 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.6.9..@fluentui/react-link_v9.6.10)
|
|
11
29
|
|
|
12
30
|
### Patches
|
|
@@ -56,11 +56,11 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
56
56
|
Be2twd7: "fjoy568"
|
|
57
57
|
},
|
|
58
58
|
subtle: {
|
|
59
|
-
sj55zd: "
|
|
59
|
+
sj55zd: "f2yjg6r",
|
|
60
60
|
Bde5pd6: "f1tx3yz7",
|
|
61
|
-
Bi91k9c: "
|
|
61
|
+
Bi91k9c: "fj1cjhr",
|
|
62
62
|
i089h6: "f1eh06m1",
|
|
63
|
-
lj723h: "
|
|
63
|
+
lj723h: "fhucn0c"
|
|
64
64
|
},
|
|
65
65
|
inline: {
|
|
66
66
|
w71qe1: "f13mvf36"
|
|
@@ -75,6 +75,11 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
75
75
|
lj723h: "f19wldhg"
|
|
76
76
|
},
|
|
77
77
|
inverted: {
|
|
78
|
+
sj55zd: "f1w7i9ko",
|
|
79
|
+
Bi91k9c: "fni4grw",
|
|
80
|
+
lj723h: "fipv1hy"
|
|
81
|
+
},
|
|
82
|
+
brand: {
|
|
78
83
|
sj55zd: "f179xftw",
|
|
79
84
|
Bi91k9c: "f1sk1dtk",
|
|
80
85
|
lj723h: "f182g21t"
|
|
@@ -86,10 +91,10 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
86
91
|
p: -1
|
|
87
92
|
}], [".fnbmjn9{overflow:inherit;}", {
|
|
88
93
|
p: -1
|
|
89
|
-
}], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f1iuv45f{text-decoration-line:none;}", ".f1cmlufx{text-decoration-thickness:var(--strokeWidthThin);}", ".f9n3di6{text-overflow:inherit;}", ".f1ids18y{-webkit-user-select:text;-moz-user-select:text;user-select:text;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".fjoy568{font-size:inherit;}", ".
|
|
94
|
+
}], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f1iuv45f{text-decoration-line:none;}", ".f1cmlufx{text-decoration-thickness:var(--strokeWidthThin);}", ".f9n3di6{text-overflow:inherit;}", ".f1ids18y{-webkit-user-select:text;-moz-user-select:text;user-select:text;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".fjoy568{font-size:inherit;}", ".f2yjg6r{color:var(--colorNeutralForeground2Link);}", ".f13mvf36{text-decoration-line:underline;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f179xftw{color:var(--colorNeutralForegroundInvertedLink);}"],
|
|
90
95
|
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
|
|
91
|
-
h: [".f1tx3yz7:hover{text-decoration-line:underline;}", ".f1deo86v:hover{color:var(--colorBrandForegroundLinkHover);}", ".
|
|
92
|
-
a: [".f1eh06m1:active{text-decoration-line:underline;}", ".f1iescvh:active{color:var(--colorBrandForegroundLinkPressed);}", ".
|
|
96
|
+
h: [".f1tx3yz7:hover{text-decoration-line:underline;}", ".f1deo86v:hover{color:var(--colorBrandForegroundLinkHover);}", ".fj1cjhr:hover{color:var(--colorNeutralForeground2LinkHover);}", ".fbnuktb:hover{text-decoration-line:none;}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fni4grw:hover{color:var(--colorNeutralForegroundInverted2);}", ".f1sk1dtk:hover{color:var(--colorNeutralForegroundInvertedLinkHover);}"],
|
|
97
|
+
a: [".f1eh06m1:active{text-decoration-line:underline;}", ".f1iescvh:active{color:var(--colorBrandForegroundLinkPressed);}", ".fhucn0c:active{color:var(--colorNeutralForeground2LinkPressed);}", ".fljg2da:active{text-decoration-line:none;}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".fipv1hy:active{color:var(--colorNeutralForegroundInverted2);}", ".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"]
|
|
93
98
|
});
|
|
94
99
|
export const useLinkStyles_unstable = state => {
|
|
95
100
|
'use no memo';
|
|
@@ -102,6 +107,6 @@ export const useLinkStyles_unstable = state => {
|
|
|
102
107
|
root,
|
|
103
108
|
backgroundAppearance
|
|
104
109
|
} = state;
|
|
105
|
-
state.root.className = mergeClasses(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, state.root.className);
|
|
110
|
+
state.root.className = mergeClasses(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, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
|
|
106
111
|
return state;
|
|
107
112
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","Bttzg6e","B3uz8dt","B6ihwck","g9k6zt","B486eqv","De3pzq","B7ck84d","sj55zd","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","w71qe1","Bkioxbp","ygn44y","famaaq","Bde5pd6","Bi91k9c","i089h6","lj723h","button","icvyot","vrafjx","oivjwe","wvpqe5","href","subtle","inline","disabled","inverted","d","p","i","h","a","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none'\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none'\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed\n }\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none')\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit'\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.
|
|
1
|
+
{"version":3,"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","Bttzg6e","B3uz8dt","B6ihwck","g9k6zt","B486eqv","De3pzq","B7ck84d","sj55zd","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","w71qe1","Bkioxbp","ygn44y","famaaq","Bde5pd6","Bi91k9c","i089h6","lj723h","button","icvyot","vrafjx","oivjwe","wvpqe5","href","subtle","inline","disabled","inverted","brand","d","p","i","h","a","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none'\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none'\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed\n }\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none')\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit'\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed\n }\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline'\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n },\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n ':hover': {\n color: tokens.colorNeutralForegroundInverted2\n },\n ':active': {\n color: tokens.colorNeutralForegroundInverted2\n }\n },\n brand: {\n color: tokens.colorNeutralForegroundInvertedLink,\n ':hover': {\n color: tokens.colorNeutralForegroundInvertedLinkHover\n },\n ':active': {\n color: tokens.colorNeutralForegroundInvertedLinkPressed\n }\n }\n});\nexport const useLinkStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n state.root.className = mergeClasses(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, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,UAAU,EAAAC,QAAA,EAAcC,YAAY,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAO,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,IAAA;IAAAO,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAA7B,OAAA;EAAA;EAAA8B,MAAA;IAAAlC,MAAA;IAAAwB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAQ,MAAA;IAAAf,MAAA;EAAA;EAAAgB,QAAA;IAAAhB,MAAA;IAAApB,MAAA;IAAAC,OAAA;IAAAuB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAU,QAAA;IAAArC,MAAA;IAAAyB,OAAA;IAAAE,MAAA;EAAA;EAAAW,KAAA;IAAAtC,MAAA;IAAAyB,OAAA;IAAAE,MAAA;EAAA;AAAA;EAAAY,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CA6FjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,aAAa;;EACb,MAAMC,MAAM,GAAGvD,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEwD,UAAU;IAAEX,QAAQ;IAAED,MAAM;IAAE7C,IAAI;IAAE0D;EAAqB,CAAC,GAAGH,KAAK;EAC1EA,KAAK,CAACvD,IAAI,CAAC2D,SAAS,GAAG/D,YAAY,CAACG,cAAc,CAACC,IAAI,EAAEwD,MAAM,CAACxD,IAAI,EAAEwD,MAAM,CAACtD,cAAc,EAAEF,IAAI,CAAC4D,EAAE,KAAK,GAAG,IAAI5D,IAAI,CAAC2C,IAAI,IAAIa,MAAM,CAACb,IAAI,EAAE3C,IAAI,CAAC4D,EAAE,KAAK,QAAQ,IAAIJ,MAAM,CAAClB,MAAM,EAAEmB,UAAU,KAAK,QAAQ,IAAID,MAAM,CAACZ,MAAM,EAAEc,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACT,QAAQ,EAAEW,oBAAoB,KAAK,OAAO,IAAIF,MAAM,CAACR,KAAK,EAAEH,MAAM,IAAIW,MAAM,CAACX,MAAM,EAAEC,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAES,KAAK,CAACvD,IAAI,CAAC2D,SAAS,CAAC;EAChZ,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -52,14 +52,14 @@ const useStyles = makeStyles({
|
|
|
52
52
|
},
|
|
53
53
|
// Overrides when the Link appears subtle.
|
|
54
54
|
subtle: {
|
|
55
|
-
color: tokens.
|
|
55
|
+
color: tokens.colorNeutralForeground2Link,
|
|
56
56
|
':hover': {
|
|
57
57
|
textDecorationLine: 'underline',
|
|
58
|
-
color: tokens.
|
|
58
|
+
color: tokens.colorNeutralForeground2LinkHover
|
|
59
59
|
},
|
|
60
60
|
':active': {
|
|
61
61
|
textDecorationLine: 'underline',
|
|
62
|
-
color: tokens.
|
|
62
|
+
color: tokens.colorNeutralForeground2LinkPressed
|
|
63
63
|
}
|
|
64
64
|
},
|
|
65
65
|
// Overrides when the Link is rendered inline within text.
|
|
@@ -81,6 +81,15 @@ const useStyles = makeStyles({
|
|
|
81
81
|
}
|
|
82
82
|
},
|
|
83
83
|
inverted: {
|
|
84
|
+
color: tokens.colorNeutralForegroundInverted2,
|
|
85
|
+
':hover': {
|
|
86
|
+
color: tokens.colorNeutralForegroundInverted2
|
|
87
|
+
},
|
|
88
|
+
':active': {
|
|
89
|
+
color: tokens.colorNeutralForegroundInverted2
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
brand: {
|
|
84
93
|
color: tokens.colorNeutralForegroundInvertedLink,
|
|
85
94
|
':hover': {
|
|
86
95
|
color: tokens.colorNeutralForegroundInvertedLinkHover
|
|
@@ -94,6 +103,6 @@ export const useLinkStyles_unstable = (state)=>{
|
|
|
94
103
|
'use no memo';
|
|
95
104
|
const styles = useStyles();
|
|
96
105
|
const { appearance, disabled, inline, root, backgroundAppearance } = state;
|
|
97
|
-
state.root.className = mergeClasses(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, state.root.className);
|
|
106
|
+
state.root.className = mergeClasses(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, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
|
|
98
107
|
return state;
|
|
99
108
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none',\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none',\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed,\n },\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none'),\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit',\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.
|
|
1
|
+
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none',\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none',\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed,\n },\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none'),\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit',\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed,\n },\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline',\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n ':hover': {\n color: tokens.colorNeutralForegroundInverted2,\n },\n ':active': {\n color: tokens.colorNeutralForegroundInverted2,\n },\n },\n brand: {\n color: tokens.colorNeutralForegroundInvertedLink,\n ':hover': {\n color: tokens.colorNeutralForegroundInvertedLinkHover,\n },\n ':active': {\n color: tokens.colorNeutralForegroundInvertedLinkPressed,\n },\n },\n});\n\nexport const useLinkStyles_unstable = (state: LinkState): LinkState => {\n 'use no memo';\n\n const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n\n state.root.className = mergeClasses(\n linkClassNames.root,\n styles.root,\n styles.focusIndicator,\n root.as === 'a' && root.href && styles.href,\n root.as === 'button' && styles.button,\n appearance === 'subtle' && styles.subtle,\n backgroundAppearance === 'inverted' && styles.inverted,\n backgroundAppearance === 'brand' && styles.brand,\n inline && styles.inline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["shorthands","makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","textDecorationColor","colorStrokeFocus2","textDecorationLine","textDecorationStyle","outlineStyle","backgroundColor","boxSizing","color","colorBrandForegroundLink","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","margin","padding","overflow","textAlign","textDecorationThickness","strokeWidthThin","textOverflow","userSelect","colorBrandForegroundLinkHover","colorBrandForegroundLinkPressed","button","borderStyle","href","subtle","colorNeutralForeground2Link","colorNeutralForeground2LinkHover","colorNeutralForeground2LinkPressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorNeutralForegroundInverted2","brand","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"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"}
|
|
@@ -80,11 +80,11 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
80
80
|
Be2twd7: "fjoy568"
|
|
81
81
|
},
|
|
82
82
|
subtle: {
|
|
83
|
-
sj55zd: "
|
|
83
|
+
sj55zd: "f2yjg6r",
|
|
84
84
|
Bde5pd6: "f1tx3yz7",
|
|
85
|
-
Bi91k9c: "
|
|
85
|
+
Bi91k9c: "fj1cjhr",
|
|
86
86
|
i089h6: "f1eh06m1",
|
|
87
|
-
lj723h: "
|
|
87
|
+
lj723h: "fhucn0c"
|
|
88
88
|
},
|
|
89
89
|
inline: {
|
|
90
90
|
w71qe1: "f13mvf36"
|
|
@@ -99,6 +99,11 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
99
99
|
lj723h: "f19wldhg"
|
|
100
100
|
},
|
|
101
101
|
inverted: {
|
|
102
|
+
sj55zd: "f1w7i9ko",
|
|
103
|
+
Bi91k9c: "fni4grw",
|
|
104
|
+
lj723h: "fipv1hy"
|
|
105
|
+
},
|
|
106
|
+
brand: {
|
|
102
107
|
sj55zd: "f179xftw",
|
|
103
108
|
Bi91k9c: "f1sk1dtk",
|
|
104
109
|
lj723h: "f182g21t"
|
|
@@ -146,10 +151,11 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
146
151
|
".f1deefiw{border-left-style:none;}",
|
|
147
152
|
".f1h8hb77{border-bottom-style:none;}",
|
|
148
153
|
".fjoy568{font-size:inherit;}",
|
|
149
|
-
".
|
|
154
|
+
".f2yjg6r{color:var(--colorNeutralForeground2Link);}",
|
|
150
155
|
".f13mvf36{text-decoration-line:underline;}",
|
|
151
156
|
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
|
|
152
157
|
".fdrzuqr{cursor:not-allowed;}",
|
|
158
|
+
".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}",
|
|
153
159
|
".f179xftw{color:var(--colorNeutralForegroundInvertedLink);}"
|
|
154
160
|
],
|
|
155
161
|
i: [
|
|
@@ -158,17 +164,19 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
158
164
|
h: [
|
|
159
165
|
".f1tx3yz7:hover{text-decoration-line:underline;}",
|
|
160
166
|
".f1deo86v:hover{color:var(--colorBrandForegroundLinkHover);}",
|
|
161
|
-
".
|
|
167
|
+
".fj1cjhr:hover{color:var(--colorNeutralForeground2LinkHover);}",
|
|
162
168
|
".fbnuktb:hover{text-decoration-line:none;}",
|
|
163
169
|
".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
|
|
170
|
+
".fni4grw:hover{color:var(--colorNeutralForegroundInverted2);}",
|
|
164
171
|
".f1sk1dtk:hover{color:var(--colorNeutralForegroundInvertedLinkHover);}"
|
|
165
172
|
],
|
|
166
173
|
a: [
|
|
167
174
|
".f1eh06m1:active{text-decoration-line:underline;}",
|
|
168
175
|
".f1iescvh:active{color:var(--colorBrandForegroundLinkPressed);}",
|
|
169
|
-
".
|
|
176
|
+
".fhucn0c:active{color:var(--colorNeutralForeground2LinkPressed);}",
|
|
170
177
|
".fljg2da:active{text-decoration-line:none;}",
|
|
171
178
|
".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}",
|
|
179
|
+
".fipv1hy:active{color:var(--colorNeutralForegroundInverted2);}",
|
|
172
180
|
".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"
|
|
173
181
|
]
|
|
174
182
|
});
|
|
@@ -176,6 +184,6 @@ const useLinkStyles_unstable = (state)=>{
|
|
|
176
184
|
'use no memo';
|
|
177
185
|
const styles = useStyles();
|
|
178
186
|
const { appearance, disabled, inline, root, backgroundAppearance } = state;
|
|
179
|
-
state.root.className = (0, _react.mergeClasses)(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, state.root.className);
|
|
187
|
+
state.root.className = (0, _react.mergeClasses)(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, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
|
|
180
188
|
return state;
|
|
181
189
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none'\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none'\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed\n }\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none')\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit'\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.
|
|
1
|
+
{"version":3,"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none'\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none'\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed\n }\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none')\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit'\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed\n }\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline'\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n },\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n ':hover': {\n color: tokens.colorNeutralForegroundInverted2\n },\n ':active': {\n color: tokens.colorNeutralForegroundInverted2\n }\n },\n brand: {\n color: tokens.colorNeutralForegroundInvertedLink,\n ':hover': {\n color: tokens.colorNeutralForegroundInvertedLinkHover\n },\n ':active': {\n color: tokens.colorNeutralForegroundInvertedLinkPressed\n }\n }\n});\nexport const useLinkStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n state.root.className = mergeClasses(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, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);\n return state;\n};\n"],"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","Bttzg6e","B3uz8dt","B6ihwck","g9k6zt","B486eqv","De3pzq","B7ck84d","sj55zd","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","w71qe1","Bkioxbp","ygn44y","famaaq","Bde5pd6","Bi91k9c","i089h6","lj723h","button","icvyot","vrafjx","oivjwe","wvpqe5","href","subtle","inline","disabled","inverted","brand","d","p","i","h","a","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"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"}
|
|
@@ -70,14 +70,14 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
70
70
|
},
|
|
71
71
|
// Overrides when the Link appears subtle.
|
|
72
72
|
subtle: {
|
|
73
|
-
color: _reacttheme.tokens.
|
|
73
|
+
color: _reacttheme.tokens.colorNeutralForeground2Link,
|
|
74
74
|
':hover': {
|
|
75
75
|
textDecorationLine: 'underline',
|
|
76
|
-
color: _reacttheme.tokens.
|
|
76
|
+
color: _reacttheme.tokens.colorNeutralForeground2LinkHover
|
|
77
77
|
},
|
|
78
78
|
':active': {
|
|
79
79
|
textDecorationLine: 'underline',
|
|
80
|
-
color: _reacttheme.tokens.
|
|
80
|
+
color: _reacttheme.tokens.colorNeutralForeground2LinkPressed
|
|
81
81
|
}
|
|
82
82
|
},
|
|
83
83
|
// Overrides when the Link is rendered inline within text.
|
|
@@ -99,6 +99,15 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
99
99
|
}
|
|
100
100
|
},
|
|
101
101
|
inverted: {
|
|
102
|
+
color: _reacttheme.tokens.colorNeutralForegroundInverted2,
|
|
103
|
+
':hover': {
|
|
104
|
+
color: _reacttheme.tokens.colorNeutralForegroundInverted2
|
|
105
|
+
},
|
|
106
|
+
':active': {
|
|
107
|
+
color: _reacttheme.tokens.colorNeutralForegroundInverted2
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
brand: {
|
|
102
111
|
color: _reacttheme.tokens.colorNeutralForegroundInvertedLink,
|
|
103
112
|
':hover': {
|
|
104
113
|
color: _reacttheme.tokens.colorNeutralForegroundInvertedLinkHover
|
|
@@ -112,6 +121,6 @@ const useLinkStyles_unstable = (state)=>{
|
|
|
112
121
|
'use no memo';
|
|
113
122
|
const styles = useStyles();
|
|
114
123
|
const { appearance, disabled, inline, root, backgroundAppearance } = state;
|
|
115
|
-
state.root.className = (0, _react.mergeClasses)(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, state.root.className);
|
|
124
|
+
state.root.className = (0, _react.mergeClasses)(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, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
|
|
116
125
|
return state;
|
|
117
126
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none',\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none',\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed,\n },\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none'),\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit',\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.
|
|
1
|
+
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createCustomFocusIndicatorStyle({\n textDecorationColor: tokens.colorStrokeFocus2,\n textDecorationLine: 'underline',\n textDecorationStyle: 'double',\n outlineStyle: 'none',\n }),\n // Common styles.\n root: {\n ':focus-visible': {\n outlineStyle: 'none',\n },\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorBrandForegroundLink,\n cursor: 'pointer',\n display: 'inline',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n margin: '0',\n padding: '0',\n overflow: 'inherit',\n textAlign: 'left',\n textDecorationLine: 'none',\n textDecorationThickness: tokens.strokeWidthThin,\n textOverflow: 'inherit',\n userSelect: 'text',\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorBrandForegroundLinkPressed,\n },\n },\n // Overrides when the Link renders as a button.\n button: {\n ...shorthands.borderStyle('none'),\n },\n // Overrides when an href is present so the Link renders as an anchor.\n href: {\n fontSize: 'inherit',\n },\n // Overrides when the Link appears subtle.\n subtle: {\n color: tokens.colorNeutralForeground2Link,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkHover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2LinkPressed,\n },\n },\n // Overrides when the Link is rendered inline within text.\n inline: {\n textDecorationLine: 'underline',\n },\n // Overrides when the Link is disabled.\n disabled: {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n\n ':hover': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':active': {\n textDecorationLine: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n ':hover': {\n color: tokens.colorNeutralForegroundInverted2,\n },\n ':active': {\n color: tokens.colorNeutralForegroundInverted2,\n },\n },\n brand: {\n color: tokens.colorNeutralForegroundInvertedLink,\n ':hover': {\n color: tokens.colorNeutralForegroundInvertedLinkHover,\n },\n ':active': {\n color: tokens.colorNeutralForegroundInvertedLinkPressed,\n },\n },\n});\n\nexport const useLinkStyles_unstable = (state: LinkState): LinkState => {\n 'use no memo';\n\n const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n\n state.root.className = mergeClasses(\n linkClassNames.root,\n styles.root,\n styles.focusIndicator,\n root.as === 'a' && root.href && styles.href,\n root.as === 'button' && styles.button,\n appearance === 'subtle' && styles.subtle,\n backgroundAppearance === 'inverted' && styles.inverted,\n backgroundAppearance === 'brand' && styles.brand,\n inline && styles.inline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["shorthands","makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","textDecorationColor","colorStrokeFocus2","textDecorationLine","textDecorationStyle","outlineStyle","backgroundColor","boxSizing","color","colorBrandForegroundLink","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","margin","padding","overflow","textAlign","textDecorationThickness","strokeWidthThin","textOverflow","userSelect","colorBrandForegroundLinkHover","colorBrandForegroundLinkPressed","button","borderStyle","href","subtle","colorNeutralForeground2Link","colorNeutralForeground2LinkHover","colorNeutralForeground2LinkPressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorNeutralForegroundInverted2","brand","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,cAAAA;;;0BAyGA+C;eAAAA;;;uBA/GwC,iBAAiB;8BACtB,0BAA0B;4BACnD,wBAAwB;AAIxC,uBAAkD;IACvD9C,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BO,oBAAgBL,6CAAAA,EAAgC;QAC9CM,qBAAqBL,kBAAAA,CAAOM,iBAAiB;QAC7CC,oBAAoB;QACpBC,qBAAqB;QACrBC,cAAc;IAChB;IACA,iBAAiB;IACjBP,MAAM;QACJ,kBAAkB;YAChBO,cAAc;QAChB;QACAC,iBAAiB;QACjBC,WAAW;QACXC,OAAOZ,kBAAAA,CAAOa,wBAAwB;QACtCC,QAAQ;QACRC,SAAS;QACTC,YAAYhB,kBAAAA,CAAOiB,cAAc;QACjCC,UAAUlB,kBAAAA,CAAOmB,eAAe;QAChCC,YAAYpB,kBAAAA,CAAOqB,iBAAiB;QACpCC,QAAQ;QACRC,SAAS;QACTC,UAAU;QACVC,WAAW;QACXlB,oBAAoB;QACpBmB,yBAAyB1B,kBAAAA,CAAO2B,eAAe;QAC/CC,cAAc;QACdC,YAAY;QAEZ,UAAU;YACRtB,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAO8B,6BAA6B;QAC7C;QAEA,WAAW;YACTvB,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAO+B,+BAA+B;QAC/C;IACF;IACA,+CAA+C;IAC/CC,QAAQ;QACN,GAAGpC,iBAAAA,CAAWqC,WAAW,CAAC,OAAO;IACnC;IACA,sEAAsE;IACtEC,MAAM;QACJhB,UAAU;IACZ;IACA,0CAA0C;IAC1CiB,QAAQ;QACNvB,OAAOZ,kBAAAA,CAAOoC,2BAA2B;QAEzC,UAAU;YACR7B,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOqC,gCAAgC;QAChD;QAEA,WAAW;YACT9B,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOsC,kCAAkC;QAClD;IACF;IACA,0DAA0D;IAC1DC,QAAQ;QACNhC,oBAAoB;IACtB;IACA,uCAAuC;IACvCiC,UAAU;QACRjC,oBAAoB;QACpBK,OAAOZ,kBAAAA,CAAOyC,8BAA8B;QAC5C3B,QAAQ;QAER,UAAU;YACRP,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOyC,8BAA8B;QAC9C;QAEA,WAAW;YACTlC,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOyC,8BAA8B;QAC9C;IACF;IACAC,UAAU;QACR9B,OAAOZ,kBAAAA,CAAO2C,+BAA+B;QAC7C,UAAU;YACR/B,OAAOZ,kBAAAA,CAAO2C,+BAA+B;QAC/C;QACA,WAAW;YACT/B,OAAOZ,kBAAAA,CAAO2C,+BAA+B;QAC/C;IACF;IACAC,OAAO;QACLhC,OAAOZ,kBAAAA,CAAO6C,kCAAkC;QAChD,UAAU;YACRjC,OAAOZ,kBAAAA,CAAO8C,uCAAuC;QACvD;QACA,WAAW;YACTlC,OAAOZ,kBAAAA,CAAO+C,yCAAyC;QACzD;IACF;AACF;AAEO,+BAA+B,CAACE;IACrC;IAEA,MAAMC,SAAS/C;IACf,MAAM,EAAEgD,UAAU,EAAEX,QAAQ,EAAED,MAAM,EAAErC,IAAI,EAAEkD,oBAAoB,EAAE,GAAGH;IAErEA,MAAM/C,IAAI,CAACmD,SAAS,OAAGvD,mBAAAA,EACrBG,eAAeC,IAAI,EACnBgD,OAAOhD,IAAI,EACXgD,OAAO9C,cAAc,EACrBF,KAAKoD,EAAE,KAAK,OAAOpD,KAAKgC,IAAI,IAAIgB,OAAOhB,IAAI,EAC3ChC,KAAKoD,EAAE,KAAK,YAAYJ,OAAOlB,MAAM,EACrCmB,eAAe,YAAYD,OAAOf,MAAM,EACxCiB,yBAAyB,cAAcF,OAAOR,QAAQ,EACtDU,yBAAyB,WAAWF,OAAON,KAAK,EAChDL,UAAUW,OAAOX,MAAM,EACvBC,YAAYU,OAAOV,QAAQ,EAC3BS,MAAM/C,IAAI,CAACmD,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-link",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.7.0",
|
|
4
4
|
"description": "Fluent UI React Link component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -20,12 +20,12 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
23
|
-
"@fluentui/react-jsx-runtime": "^9.3.
|
|
24
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
25
|
-
"@fluentui/react-tabster": "^9.26.
|
|
23
|
+
"@fluentui/react-jsx-runtime": "^9.3.3",
|
|
24
|
+
"@fluentui/react-shared-contexts": "^9.26.0",
|
|
25
|
+
"@fluentui/react-tabster": "^9.26.10",
|
|
26
26
|
"@fluentui/react-theme": "^9.2.0",
|
|
27
|
-
"@fluentui/react-utilities": "^9.25.
|
|
28
|
-
"@griffel/react": "^1.5.
|
|
27
|
+
"@fluentui/react-utilities": "^9.25.4",
|
|
28
|
+
"@griffel/react": "^1.5.32",
|
|
29
29
|
"@swc/helpers": "^0.5.1"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|