@fluentui/react-link 9.8.2 → 9.8.3
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 +15 -2
- package/lib/components/Link/useLinkStyles.styles.js +12 -4
- package/lib/components/Link/useLinkStyles.styles.js.map +1 -1
- package/lib/components/Link/useLinkStyles.styles.raw.js +10 -1
- package/lib/components/Link/useLinkStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Link/useLinkStyles.styles.js +24 -2
- package/lib-commonjs/components/Link/useLinkStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js +10 -1
- package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-link
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 24 Jun 2026 11:03:34 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.8.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.8.3)
|
|
8
|
+
|
|
9
|
+
Wed, 24 Jun 2026 11:03:34 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.8.2..@fluentui/react-link_v9.8.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix(Link): add disabled styles for high contrast mode ([PR #36277](https://github.com/microsoft/fluentui/pull/36277) by sarah.higley@microsoft.com)
|
|
15
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
19
|
+
|
|
7
20
|
## [9.8.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.8.2)
|
|
8
21
|
|
|
9
|
-
Tue, 26 May 2026 09:
|
|
22
|
+
Tue, 26 May 2026 09:39:19 GMT
|
|
10
23
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.8.1..@fluentui/react-link_v9.8.2)
|
|
11
24
|
|
|
12
25
|
### Patches
|
|
@@ -72,7 +72,10 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
72
72
|
Bde5pd6: "fbnuktb",
|
|
73
73
|
Bi91k9c: "fvgxktp",
|
|
74
74
|
i089h6: "fljg2da",
|
|
75
|
-
lj723h: "f19wldhg"
|
|
75
|
+
lj723h: "f19wldhg",
|
|
76
|
+
B7iucu3: "f1cyfu5x",
|
|
77
|
+
Bahaeuw: "fa9u7a5",
|
|
78
|
+
Boo3t63: "fji3q0k"
|
|
76
79
|
},
|
|
77
80
|
inverted: {
|
|
78
81
|
sj55zd: "f1qz2gb0",
|
|
@@ -94,11 +97,16 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
94
97
|
}], ".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;}", ".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".f179xftw{color:var(--colorNeutralForegroundInvertedLink);}"],
|
|
95
98
|
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
|
|
96
99
|
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);}", ".f1ujg2k6:hover{color:var(--colorBrandForegroundInverted);}", ".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);}", ".f1ebemlp:active{color:var(--colorBrandForegroundInverted);}", ".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"]
|
|
100
|
+
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);}", ".f1ebemlp:active{color:var(--colorBrandForegroundInverted);}", ".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"],
|
|
101
|
+
m: [["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
|
|
102
|
+
m: "(forced-colors: active)"
|
|
103
|
+
}], ["@media (forced-colors: active){.fa9u7a5:hover{color:GrayText;}}", {
|
|
104
|
+
m: "(forced-colors: active)"
|
|
105
|
+
}], ["@media (forced-colors: active){.fji3q0k:active{color:GrayText;}}", {
|
|
106
|
+
m: "(forced-colors: active)"
|
|
107
|
+
}]]
|
|
98
108
|
});
|
|
99
109
|
export const useLinkStyles_unstable = state => {
|
|
100
|
-
'use no memo';
|
|
101
|
-
|
|
102
110
|
const styles = useStyles();
|
|
103
111
|
const {
|
|
104
112
|
appearance,
|
|
@@ -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","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.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted\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
|
|
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","B7iucu3","Bahaeuw","Boo3t63","inverted","brand","d","p","i","h","a","m","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 // There is no native disabled state for links, so we need to explicitly style the disabled state for high contrast mode.\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText'\n },\n ':active': {\n color: 'GrayText'\n }\n }\n },\n inverted: {\n color: tokens.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted\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 const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n // eslint-disable-next-line react-hooks/immutability\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;IAAAU,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAxC,MAAA;IAAAyB,OAAA;IAAAE,MAAA;EAAA;EAAAc,KAAA;IAAAzC,MAAA;IAAAyB,OAAA;IAAAE,MAAA;EAAA;AAAA;EAAAe,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAuGjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,MAAM,GAAG3D,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAE4D,UAAU;IAAEf,QAAQ;IAAED,MAAM;IAAE7C,IAAI;IAAE8D;EAAqB,CAAC,GAAGH,KAAK;EAC1E;EACAA,KAAK,CAAC3D,IAAI,CAAC+D,SAAS,GAAGnE,YAAY,CAACG,cAAc,CAACC,IAAI,EAAE4D,MAAM,CAAC5D,IAAI,EAAE4D,MAAM,CAAC1D,cAAc,EAAEF,IAAI,CAACgE,EAAE,KAAK,GAAG,IAAIhE,IAAI,CAAC2C,IAAI,IAAIiB,MAAM,CAACjB,IAAI,EAAE3C,IAAI,CAACgE,EAAE,KAAK,QAAQ,IAAIJ,MAAM,CAACtB,MAAM,EAAEuB,UAAU,KAAK,QAAQ,IAAID,MAAM,CAAChB,MAAM,EAAEkB,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACV,QAAQ,EAAEY,oBAAoB,KAAK,OAAO,IAAIF,MAAM,CAACT,KAAK,EAAEN,MAAM,IAAIe,MAAM,CAACf,MAAM,EAAEC,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEa,KAAK,CAAC3D,IAAI,CAAC+D,SAAS,CAAC;EAChZ,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -78,6 +78,16 @@ const useStyles = makeStyles({
|
|
|
78
78
|
':active': {
|
|
79
79
|
textDecorationLine: 'none',
|
|
80
80
|
color: tokens.colorNeutralForegroundDisabled
|
|
81
|
+
},
|
|
82
|
+
// There is no native disabled state for links, so we need to explicitly style the disabled state for high contrast mode.
|
|
83
|
+
'@media (forced-colors: active)': {
|
|
84
|
+
color: 'GrayText',
|
|
85
|
+
':hover': {
|
|
86
|
+
color: 'GrayText'
|
|
87
|
+
},
|
|
88
|
+
':active': {
|
|
89
|
+
color: 'GrayText'
|
|
90
|
+
}
|
|
81
91
|
}
|
|
82
92
|
},
|
|
83
93
|
inverted: {
|
|
@@ -100,7 +110,6 @@ const useStyles = makeStyles({
|
|
|
100
110
|
}
|
|
101
111
|
});
|
|
102
112
|
export const useLinkStyles_unstable = (state)=>{
|
|
103
|
-
'use no memo';
|
|
104
113
|
const styles = useStyles();
|
|
105
114
|
const { appearance, disabled, inline, root, backgroundAppearance } = state;
|
|
106
115
|
// eslint-disable-next-line react-hooks/immutability
|
|
@@ -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.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.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted,\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted,\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
|
|
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 // There is no native disabled state for links, so we need to explicitly style the disabled state for high contrast mode.\n '@media (forced-colors: active)': {\n color: 'GrayText',\n\n ':hover': {\n color: 'GrayText',\n },\n\n ':active': {\n color: 'GrayText',\n },\n },\n },\n inverted: {\n color: tokens.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted,\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted,\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 const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n\n // eslint-disable-next-line react-hooks/immutability\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","colorBrandForegroundInverted","brand","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"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"}
|
|
@@ -96,7 +96,10 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
96
96
|
Bde5pd6: "fbnuktb",
|
|
97
97
|
Bi91k9c: "fvgxktp",
|
|
98
98
|
i089h6: "fljg2da",
|
|
99
|
-
lj723h: "f19wldhg"
|
|
99
|
+
lj723h: "f19wldhg",
|
|
100
|
+
B7iucu3: "f1cyfu5x",
|
|
101
|
+
Bahaeuw: "fa9u7a5",
|
|
102
|
+
Boo3t63: "fji3q0k"
|
|
100
103
|
},
|
|
101
104
|
inverted: {
|
|
102
105
|
sj55zd: "f1qz2gb0",
|
|
@@ -178,10 +181,29 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
178
181
|
".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}",
|
|
179
182
|
".f1ebemlp:active{color:var(--colorBrandForegroundInverted);}",
|
|
180
183
|
".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"
|
|
184
|
+
],
|
|
185
|
+
m: [
|
|
186
|
+
[
|
|
187
|
+
"@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
|
|
188
|
+
{
|
|
189
|
+
m: "(forced-colors: active)"
|
|
190
|
+
}
|
|
191
|
+
],
|
|
192
|
+
[
|
|
193
|
+
"@media (forced-colors: active){.fa9u7a5:hover{color:GrayText;}}",
|
|
194
|
+
{
|
|
195
|
+
m: "(forced-colors: active)"
|
|
196
|
+
}
|
|
197
|
+
],
|
|
198
|
+
[
|
|
199
|
+
"@media (forced-colors: active){.fji3q0k:active{color:GrayText;}}",
|
|
200
|
+
{
|
|
201
|
+
m: "(forced-colors: active)"
|
|
202
|
+
}
|
|
203
|
+
]
|
|
181
204
|
]
|
|
182
205
|
});
|
|
183
206
|
const useLinkStyles_unstable = (state)=>{
|
|
184
|
-
'use no memo';
|
|
185
207
|
const styles = useStyles();
|
|
186
208
|
const { appearance, disabled, inline, root, backgroundAppearance } = state;
|
|
187
209
|
// eslint-disable-next-line react-hooks/immutability
|
|
@@ -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.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.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted\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
|
|
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 // There is no native disabled state for links, so we need to explicitly style the disabled state for high contrast mode.\n '@media (forced-colors: active)': {\n color: 'GrayText',\n ':hover': {\n color: 'GrayText'\n },\n ':active': {\n color: 'GrayText'\n }\n }\n },\n inverted: {\n color: tokens.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted\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 const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n // eslint-disable-next-line react-hooks/immutability\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","B7iucu3","Bahaeuw","Boo3t63","inverted","brand","d","p","i","h","a","m","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,cAAc;;;0BA2GQ;;;;uBA9GkB,gBAAgB;AAG9D,uBAAuB;IAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,cAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAN,IAAA,EAAA;QAAAO,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,IAAA,EAAA;QAAA7B,OAAA,EAAA;IAAA;IAAA8B,MAAA,EAAA;QAAAlC,MAAA,EAAA;QAAAwB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAQ,MAAA,EAAA;QAAAf,MAAA,EAAA;IAAA;IAAAgB,QAAA,EAAA;QAAAhB,MAAA,EAAA;QAAApB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAuB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAU,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAxC,MAAA,EAAA;QAAAyB,OAAA,EAAA;QAAAE,MAAA,EAAA;IAAA;IAAAc,KAAA,EAAA;QAAAzC,MAAA,EAAA;QAAAyB,OAAA,EAAA;QAAAE,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAe,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAuGjB,CAAC;AACK,MAAMC,0BAA0BC,KAAK,IAAG;IAC3C,MAAMC,MAAM,GAAG3D,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAE4D,UAAU,EAAEf,QAAQ,EAAED,MAAM,EAAE7C,IAAI,EAAE8D,oBAAAA,EAAsB,GAAGH,KAAK;IAC1E,oDAAA;IACAA,KAAK,CAAC3D,IAAI,CAAC+D,SAAS,OAAGnE,mBAAY,EAACG,cAAc,CAACC,IAAI,EAAE4D,MAAM,CAAC5D,IAAI,EAAE4D,MAAM,CAAC1D,cAAc,EAAEF,IAAI,CAACgE,EAAE,KAAK,GAAG,IAAIhE,IAAI,CAAC2C,IAAI,IAAIiB,MAAM,CAACjB,IAAI,EAAE3C,IAAI,CAACgE,EAAE,KAAK,QAAQ,IAAIJ,MAAM,CAACtB,MAAM,EAAEuB,UAAU,KAAK,QAAQ,IAAID,MAAM,CAAChB,MAAM,EAAEkB,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACV,QAAQ,EAAEY,oBAAoB,KAAK,OAAO,IAAIF,MAAM,CAACT,KAAK,EAAEN,MAAM,IAAIe,MAAM,CAACf,MAAM,EAAEC,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEa,KAAK,CAAC3D,IAAI,CAAC+D,SAAS,CAAC;IAChZ,OAAOJ,KAAK;AAChB,CAAC"}
|
|
@@ -96,6 +96,16 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
96
96
|
':active': {
|
|
97
97
|
textDecorationLine: 'none',
|
|
98
98
|
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
99
|
+
},
|
|
100
|
+
// There is no native disabled state for links, so we need to explicitly style the disabled state for high contrast mode.
|
|
101
|
+
'@media (forced-colors: active)': {
|
|
102
|
+
color: 'GrayText',
|
|
103
|
+
':hover': {
|
|
104
|
+
color: 'GrayText'
|
|
105
|
+
},
|
|
106
|
+
':active': {
|
|
107
|
+
color: 'GrayText'
|
|
108
|
+
}
|
|
99
109
|
}
|
|
100
110
|
},
|
|
101
111
|
inverted: {
|
|
@@ -118,7 +128,6 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
118
128
|
}
|
|
119
129
|
});
|
|
120
130
|
const useLinkStyles_unstable = (state)=>{
|
|
121
|
-
'use no memo';
|
|
122
131
|
const styles = useStyles();
|
|
123
132
|
const { appearance, disabled, inline, root, backgroundAppearance } = state;
|
|
124
133
|
// eslint-disable-next-line react-hooks/immutability
|
|
@@ -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.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.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted,\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted,\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
|
|
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 // There is no native disabled state for links, so we need to explicitly style the disabled state for high contrast mode.\n '@media (forced-colors: active)': {\n color: 'GrayText',\n\n ':hover': {\n color: 'GrayText',\n },\n\n ':active': {\n color: 'GrayText',\n },\n },\n },\n inverted: {\n color: tokens.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInverted,\n },\n ':active': {\n color: tokens.colorBrandForegroundInverted,\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 const styles = useStyles();\n const { appearance, disabled, inline, root, backgroundAppearance } = state;\n\n // eslint-disable-next-line react-hooks/immutability\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","colorBrandForegroundInverted","brand","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-link",
|
|
3
|
-
"version": "9.8.
|
|
3
|
+
"version": "9.8.3",
|
|
4
4
|
"description": "Fluent UI React Link component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
16
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
16
|
+
"@fluentui/react-jsx-runtime": "^9.4.4",
|
|
17
17
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
18
|
-
"@fluentui/react-tabster": "^9.26.
|
|
18
|
+
"@fluentui/react-tabster": "^9.26.16",
|
|
19
19
|
"@fluentui/react-theme": "^9.2.1",
|
|
20
|
-
"@fluentui/react-utilities": "^9.26.
|
|
20
|
+
"@fluentui/react-utilities": "^9.26.5",
|
|
21
21
|
"@griffel/react": "^1.5.32",
|
|
22
22
|
"@swc/helpers": "^0.5.1"
|
|
23
23
|
},
|