@fluentui/react-link 9.6.2 → 9.6.4
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 +26 -2
- package/lib/components/Link/useLinkStyles.styles.js +6 -6
- package/lib/components/Link/useLinkStyles.styles.js.map +1 -1
- package/lib/components/Link/useLinkStyles.styles.raw.js +3 -3
- package/lib/components/Link/useLinkStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Link/useLinkStyles.styles.js +6 -6
- package/lib-commonjs/components/Link/useLinkStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js +3 -3
- package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,36 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-link
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 21 Aug 2025 12:20:43 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.6.4)
|
|
8
|
+
|
|
9
|
+
Thu, 21 Aug 2025 12:20:43 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.6.3..@fluentui/react-link_v9.6.4)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.6.3)
|
|
20
|
+
|
|
21
|
+
Thu, 07 Aug 2025 10:03:24 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.6.2..@fluentui/react-link_v9.6.3)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- fix: update inverted link styles to use neutral color tokens ([PR #34955](https://github.com/microsoft/fluentui/pull/34955) by dmytrokirpa@microsoft.com)
|
|
27
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
28
|
+
- Bump @fluentui/react-tabster to v9.26.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.23.2 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
30
|
+
|
|
7
31
|
## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.6.2)
|
|
8
32
|
|
|
9
|
-
Wed, 30 Jul 2025
|
|
33
|
+
Wed, 30 Jul 2025 13:10:57 GMT
|
|
10
34
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.6.1..@fluentui/react-link_v9.6.2)
|
|
11
35
|
|
|
12
36
|
### Patches
|
|
@@ -73,9 +73,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
73
73
|
lj723h: "f19wldhg"
|
|
74
74
|
},
|
|
75
75
|
inverted: {
|
|
76
|
-
sj55zd: "
|
|
77
|
-
Bi91k9c: "
|
|
78
|
-
lj723h: "
|
|
76
|
+
sj55zd: "f179xftw",
|
|
77
|
+
Bi91k9c: "f1sk1dtk",
|
|
78
|
+
lj723h: "f182g21t"
|
|
79
79
|
}
|
|
80
80
|
}, {
|
|
81
81
|
d: [".fhgqx19[data-fui-focus-visible]{text-decoration-color:var(--colorStrokeFocus2);}", ".f1olyrje[data-fui-focus-visible]{text-decoration-line:underline;}", ".f1p93eir[data-fui-focus-visible]{text-decoration-style:double;}", ".f1nev41a[data-fui-focus-visible]{outline-style:none;}", ".f3rmtva{background-color:transparent;}", ".f1ewtqcl{box-sizing:border-box;}", ".fyind8e{color:var(--colorBrandForegroundLink);}", ".f1k6fduh{cursor:pointer;}", ".f1w7gpdv{display:inline;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", [".f1s184ao{margin:0;}", {
|
|
@@ -84,10 +84,10 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
84
84
|
p: -1
|
|
85
85
|
}], [".fnbmjn9{overflow:inherit;}", {
|
|
86
86
|
p: -1
|
|
87
|
-
}], ".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;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f13mvf36{text-decoration-line:underline;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".
|
|
87
|
+
}], ".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;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f13mvf36{text-decoration-line:underline;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f179xftw{color:var(--colorNeutralForegroundInvertedLink);}"],
|
|
88
88
|
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
|
|
89
|
-
h: [".f1tx3yz7:hover{text-decoration-line:underline;}", ".f1deo86v:hover{color:var(--colorBrandForegroundLinkHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fbnuktb:hover{text-decoration-line:none;}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".
|
|
90
|
-
a: [".f1eh06m1:active{text-decoration-line:underline;}", ".f1iescvh:active{color:var(--colorBrandForegroundLinkPressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".fljg2da:active{text-decoration-line:none;}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".
|
|
89
|
+
h: [".f1tx3yz7:hover{text-decoration-line:underline;}", ".f1deo86v:hover{color:var(--colorBrandForegroundLinkHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fbnuktb:hover{text-decoration-line:none;}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1sk1dtk:hover{color:var(--colorNeutralForegroundInvertedLinkHover);}"],
|
|
90
|
+
a: [".f1eh06m1:active{text-decoration-line:underline;}", ".f1iescvh:active{color:var(--colorBrandForegroundLinkPressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".fljg2da:active{text-decoration-line:none;}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"]
|
|
91
91
|
});
|
|
92
92
|
export const useLinkStyles_unstable = state => {
|
|
93
93
|
'use no memo';
|
|
@@ -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":["import { 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.colorNeutralForeground2,\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Hover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Pressed\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.
|
|
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":["import { 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.colorNeutralForeground2,\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Hover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Pressed\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.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, inline && styles.inline, disabled && styles.disabled, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,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;AAAA;EAAAW,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAoFjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,aAAa;;EACb,MAAMC,MAAM,GAAGtD,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEuD,UAAU;IAAEV,QAAQ;IAAED,MAAM;IAAE7C,IAAI;IAAEyD;EAAqB,CAAC,GAAGH,KAAK;EAC1EA,KAAK,CAACtD,IAAI,CAAC0D,SAAS,GAAG9D,YAAY,CAACG,cAAc,CAACC,IAAI,EAAEuD,MAAM,CAACvD,IAAI,EAAEuD,MAAM,CAACrD,cAAc,EAAEF,IAAI,CAAC2D,EAAE,KAAK,GAAG,IAAI3D,IAAI,CAAC2C,IAAI,IAAIY,MAAM,CAACZ,IAAI,EAAE3C,IAAI,CAAC2D,EAAE,KAAK,QAAQ,IAAIJ,MAAM,CAACjB,MAAM,EAAEkB,UAAU,KAAK,QAAQ,IAAID,MAAM,CAACX,MAAM,EAAEa,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACR,QAAQ,EAAEF,MAAM,IAAIU,MAAM,CAACV,MAAM,EAAEC,QAAQ,IAAIS,MAAM,CAACT,QAAQ,EAAEQ,KAAK,CAACtD,IAAI,CAAC0D,SAAS,CAAC;EAC9V,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -80,12 +80,12 @@ const useStyles = makeStyles({
|
|
|
80
80
|
}
|
|
81
81
|
},
|
|
82
82
|
inverted: {
|
|
83
|
-
color: tokens.
|
|
83
|
+
color: tokens.colorNeutralForegroundInvertedLink,
|
|
84
84
|
':hover': {
|
|
85
|
-
color: tokens.
|
|
85
|
+
color: tokens.colorNeutralForegroundInvertedLinkHover
|
|
86
86
|
},
|
|
87
87
|
':active': {
|
|
88
|
-
color: tokens.
|
|
88
|
+
color: tokens.colorNeutralForegroundInvertedLinkPressed
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["import { 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.colorNeutralForeground2,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Pressed,\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\n inverted: {\n color: tokens.
|
|
1
|
+
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["import { 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.colorNeutralForeground2,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Pressed,\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\n inverted: {\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 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","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"AAAA,SAASA,UAAU,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AACtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BO,gBAAgBL,gCAAgC;QAC9CM,qBAAqBL,OAAOM,iBAAiB;QAC7CC,oBAAoB;QACpBC,qBAAqB;QACrBC,cAAc;IAChB;IACA,iBAAiB;IACjBP,MAAM;QACJ,kBAAkB;YAChBO,cAAc;QAChB;QACAC,iBAAiB;QACjBC,WAAW;QACXC,OAAOZ,OAAOa,wBAAwB;QACtCC,QAAQ;QACRC,SAAS;QACTC,YAAYhB,OAAOiB,cAAc;QACjCC,UAAUlB,OAAOmB,eAAe;QAChCC,YAAYpB,OAAOqB,iBAAiB;QACpCC,QAAQ;QACRC,SAAS;QACTC,UAAU;QACVC,WAAW;QACXlB,oBAAoB;QACpBmB,yBAAyB1B,OAAO2B,eAAe;QAC/CC,cAAc;QACdC,YAAY;QAEZ,UAAU;YACRtB,oBAAoB;YACpBK,OAAOZ,OAAO8B,6BAA6B;QAC7C;QAEA,WAAW;YACTvB,oBAAoB;YACpBK,OAAOZ,OAAO+B,+BAA+B;QAC/C;IACF;IACA,+CAA+C;IAC/CC,QAAQ;QACN,GAAGpC,WAAWqC,WAAW,CAAC,OAAO;IACnC;IACA,sEAAsE;IACtEC,MAAM;QACJhB,UAAU;IACZ;IACA,0CAA0C;IAC1CiB,QAAQ;QACNvB,OAAOZ,OAAOoC,uBAAuB;QAErC,UAAU;YACR7B,oBAAoB;YACpBK,OAAOZ,OAAOqC,4BAA4B;QAC5C;QAEA,WAAW;YACT9B,oBAAoB;YACpBK,OAAOZ,OAAOsC,8BAA8B;QAC9C;IACF;IACA,0DAA0D;IAC1DC,QAAQ;QACNhC,oBAAoB;IACtB;IACA,uCAAuC;IACvCiC,UAAU;QACRjC,oBAAoB;QACpBK,OAAOZ,OAAOyC,8BAA8B;QAC5C3B,QAAQ;QAER,UAAU;YACRP,oBAAoB;YACpBK,OAAOZ,OAAOyC,8BAA8B;QAC9C;QAEA,WAAW;YACTlC,oBAAoB;YACpBK,OAAOZ,OAAOyC,8BAA8B;QAC9C;IACF;IAEAC,UAAU;QACR9B,OAAOZ,OAAO2C,kCAAkC;QAChD,UAAU;YACR/B,OAAOZ,OAAO4C,uCAAuC;QACvD;QACA,WAAW;YACThC,OAAOZ,OAAO6C,yCAAyC;QACzD;IACF;AACF;AAEA,OAAO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,SAAS7C;IACf,MAAM,EAAE8C,UAAU,EAAET,QAAQ,EAAED,MAAM,EAAErC,IAAI,EAAEgD,oBAAoB,EAAE,GAAGH;IAErEA,MAAM7C,IAAI,CAACiD,SAAS,GAAGrD,aACrBG,eAAeC,IAAI,EACnB8C,OAAO9C,IAAI,EACX8C,OAAO5C,cAAc,EACrBF,KAAKkD,EAAE,KAAK,OAAOlD,KAAKgC,IAAI,IAAIc,OAAOd,IAAI,EAC3ChC,KAAKkD,EAAE,KAAK,YAAYJ,OAAOhB,MAAM,EACrCiB,eAAe,YAAYD,OAAOb,MAAM,EACxCe,yBAAyB,cAAcF,OAAON,QAAQ,EACtDH,UAAUS,OAAOT,MAAM,EACvBC,YAAYQ,OAAOR,QAAQ,EAC3BO,MAAM7C,IAAI,CAACiD,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
|
|
@@ -98,9 +98,9 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
98
98
|
lj723h: "f19wldhg"
|
|
99
99
|
},
|
|
100
100
|
inverted: {
|
|
101
|
-
sj55zd: "
|
|
102
|
-
Bi91k9c: "
|
|
103
|
-
lj723h: "
|
|
101
|
+
sj55zd: "f179xftw",
|
|
102
|
+
Bi91k9c: "f1sk1dtk",
|
|
103
|
+
lj723h: "f182g21t"
|
|
104
104
|
}
|
|
105
105
|
}, {
|
|
106
106
|
d: [
|
|
@@ -149,7 +149,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
149
149
|
".f13mvf36{text-decoration-line:underline;}",
|
|
150
150
|
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
|
|
151
151
|
".fdrzuqr{cursor:not-allowed;}",
|
|
152
|
-
".
|
|
152
|
+
".f179xftw{color:var(--colorNeutralForegroundInvertedLink);}"
|
|
153
153
|
],
|
|
154
154
|
i: [
|
|
155
155
|
".f2hkw1w:focus-visible{outline-style:none;}"
|
|
@@ -160,7 +160,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
160
160
|
".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}",
|
|
161
161
|
".fbnuktb:hover{text-decoration-line:none;}",
|
|
162
162
|
".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
|
|
163
|
-
".
|
|
163
|
+
".f1sk1dtk:hover{color:var(--colorNeutralForegroundInvertedLinkHover);}"
|
|
164
164
|
],
|
|
165
165
|
a: [
|
|
166
166
|
".f1eh06m1:active{text-decoration-line:underline;}",
|
|
@@ -168,7 +168,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
168
168
|
".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}",
|
|
169
169
|
".fljg2da:active{text-decoration-line:none;}",
|
|
170
170
|
".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}",
|
|
171
|
-
".
|
|
171
|
+
".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"
|
|
172
172
|
]
|
|
173
173
|
});
|
|
174
174
|
const useLinkStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useLinkStyles.styles.js"],"sourcesContent":["import { 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.colorNeutralForeground2,\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Hover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Pressed\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.
|
|
1
|
+
{"version":3,"sources":["useLinkStyles.styles.js"],"sourcesContent":["import { 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.colorNeutralForeground2,\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Hover\n },\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Pressed\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.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, 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","d","p","i","h","a","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"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"}
|
|
@@ -98,12 +98,12 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
98
98
|
}
|
|
99
99
|
},
|
|
100
100
|
inverted: {
|
|
101
|
-
color: _reacttheme.tokens.
|
|
101
|
+
color: _reacttheme.tokens.colorNeutralForegroundInvertedLink,
|
|
102
102
|
':hover': {
|
|
103
|
-
color: _reacttheme.tokens.
|
|
103
|
+
color: _reacttheme.tokens.colorNeutralForegroundInvertedLinkHover
|
|
104
104
|
},
|
|
105
105
|
':active': {
|
|
106
|
-
color: _reacttheme.tokens.
|
|
106
|
+
color: _reacttheme.tokens.colorNeutralForegroundInvertedLinkPressed
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["import { 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.colorNeutralForeground2,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Pressed,\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\n inverted: {\n color: tokens.
|
|
1
|
+
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["import { 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.colorNeutralForeground2,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Pressed,\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\n inverted: {\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 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","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":";;;;;;;;;;;IAMaK,cAAAA;;;0BAiGA6C;eAAAA;;;uBAvGwC,iBAAiB;8BACtB,0BAA0B;4BACnD,wBAAwB;AAIxC,uBAAkD;IACvD5C,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,uBAAuB;QAErC,UAAU;YACR7B,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOqC,4BAA4B;QAC5C;QAEA,WAAW;YACT9B,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOsC,8BAA8B;QAC9C;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;IAEAC,UAAU;QACR9B,OAAOZ,kBAAAA,CAAO2C,kCAAkC;QAChD,UAAU;YACR/B,OAAOZ,kBAAAA,CAAO4C,uCAAuC;QACvD;QACA,WAAW;YACThC,OAAOZ,kBAAAA,CAAO6C,yCAAyC;QACzD;IACF;AACF;AAEO,+BAA+B,CAACE;IACrC;IAEA,MAAMC,SAAS7C;IACf,MAAM,EAAE8C,UAAU,EAAET,QAAQ,EAAED,MAAM,EAAErC,IAAI,EAAEgD,oBAAoB,EAAE,GAAGH;IAErEA,MAAM7C,IAAI,CAACiD,SAAS,OAAGrD,mBAAAA,EACrBG,eAAeC,IAAI,EACnB8C,OAAO9C,IAAI,EACX8C,OAAO5C,cAAc,EACrBF,KAAKkD,EAAE,KAAK,OAAOlD,KAAKgC,IAAI,IAAIc,OAAOd,IAAI,EAC3ChC,KAAKkD,EAAE,KAAK,YAAYJ,OAAOhB,MAAM,EACrCiB,eAAe,YAAYD,OAAOb,MAAM,EACxCe,yBAAyB,cAAcF,OAAON,QAAQ,EACtDH,UAAUS,OAAOT,MAAM,EACvBC,YAAYQ,OAAOR,QAAQ,EAC3BO,MAAM7C,IAAI,CAACiD,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-link",
|
|
3
|
-
"version": "9.6.
|
|
3
|
+
"version": "9.6.4",
|
|
4
4
|
"description": "Fluent UI React Link component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
23
|
-
"@fluentui/react-jsx-runtime": "^9.1.
|
|
24
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
25
|
-
"@fluentui/react-tabster": "^9.26.
|
|
23
|
+
"@fluentui/react-jsx-runtime": "^9.1.6",
|
|
24
|
+
"@fluentui/react-shared-contexts": "^9.25.0",
|
|
25
|
+
"@fluentui/react-tabster": "^9.26.4",
|
|
26
26
|
"@fluentui/react-theme": "^9.2.0",
|
|
27
|
-
"@fluentui/react-utilities": "^9.
|
|
27
|
+
"@fluentui/react-utilities": "^9.24.0",
|
|
28
28
|
"@griffel/react": "^1.5.22",
|
|
29
29
|
"@swc/helpers": "^0.5.1"
|
|
30
30
|
},
|