@fluentui/react-button 9.6.11 → 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.
Files changed (78) hide show
  1. package/CHANGELOG.md +29 -2
  2. package/lib/components/Button/useButtonStyles.styles.headless.js +36 -0
  3. package/lib/components/Button/useButtonStyles.styles.headless.js.map +1 -0
  4. package/lib/components/Button/useButtonStyles.styles.js +150 -150
  5. package/lib/components/Button/useButtonStyles.styles.js.map +1 -1
  6. package/lib/components/Button/useButtonStyles.styles.raw.headless.js +36 -0
  7. package/lib/components/Button/useButtonStyles.styles.raw.headless.js.map +1 -0
  8. package/lib/components/Button/useButtonStyles.styles.raw.js +15 -15
  9. package/lib/components/Button/useButtonStyles.styles.raw.js.map +1 -1
  10. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.headless.js +49 -0
  11. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.headless.js.map +1 -0
  12. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js +22 -22
  13. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
  14. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js +49 -0
  15. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js.map +1 -0
  16. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js +8 -8
  17. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map +1 -1
  18. package/lib/components/MenuButton/useMenuButtonStyles.styles.headless.js +44 -0
  19. package/lib/components/MenuButton/useMenuButtonStyles.styles.headless.js.map +1 -0
  20. package/lib/components/MenuButton/useMenuButtonStyles.styles.js +2 -2
  21. package/lib/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
  22. package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.headless.js +44 -0
  23. package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.headless.js.map +1 -0
  24. package/lib/components/SplitButton/useSplitButtonStyles.styles.headless.js +39 -0
  25. package/lib/components/SplitButton/useSplitButtonStyles.styles.headless.js.map +1 -0
  26. package/lib/components/SplitButton/useSplitButtonStyles.styles.js +17 -17
  27. package/lib/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
  28. package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.headless.js +39 -0
  29. package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.headless.js.map +1 -0
  30. package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.js +6 -6
  31. package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.js.map +1 -1
  32. package/lib/components/ToggleButton/useToggleButtonStyles.styles.headless.js +36 -0
  33. package/lib/components/ToggleButton/useToggleButtonStyles.styles.headless.js.map +1 -0
  34. package/lib/components/ToggleButton/useToggleButtonStyles.styles.js +133 -133
  35. package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  36. package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.headless.js +36 -0
  37. package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.headless.js.map +1 -0
  38. package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js +10 -10
  39. package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map +1 -1
  40. package/lib-commonjs/components/Button/useButtonStyles.styles.headless.js +52 -0
  41. package/lib-commonjs/components/Button/useButtonStyles.styles.headless.js.map +1 -0
  42. package/lib-commonjs/components/Button/useButtonStyles.styles.js +262 -262
  43. package/lib-commonjs/components/Button/useButtonStyles.styles.js.map +1 -1
  44. package/lib-commonjs/components/Button/useButtonStyles.styles.raw.headless.js +52 -0
  45. package/lib-commonjs/components/Button/useButtonStyles.styles.raw.headless.js.map +1 -0
  46. package/lib-commonjs/components/Button/useButtonStyles.styles.raw.js +15 -15
  47. package/lib-commonjs/components/Button/useButtonStyles.styles.raw.js.map +1 -1
  48. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.headless.js +64 -0
  49. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.headless.js.map +1 -0
  50. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js +25 -25
  51. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
  52. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js +64 -0
  53. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js.map +1 -0
  54. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js +8 -8
  55. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map +1 -1
  56. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.headless.js +60 -0
  57. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.headless.js.map +1 -0
  58. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js +2 -2
  59. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
  60. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.headless.js +60 -0
  61. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.headless.js.map +1 -0
  62. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.headless.js +55 -0
  63. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.headless.js.map +1 -0
  64. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js +42 -42
  65. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
  66. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.headless.js +55 -0
  67. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.headless.js.map +1 -0
  68. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js +6 -6
  69. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js.map +1 -1
  70. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.headless.js +52 -0
  71. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.headless.js.map +1 -0
  72. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js +235 -235
  73. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  74. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.headless.js +52 -0
  75. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.headless.js.map +1 -0
  76. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js +10 -10
  77. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map +1 -1
  78. package/package.json +7 -7
package/lib/components/ToggleButton/useToggleButtonStyles.styles.js CHANGED
@@ -29,51 +29,51 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
29
29
  oetu4i: "f1xlaoq0",
30
30
  gg5e9n: ["f1m52nbi", "f1ub3y4t"],
31
31
  Bi91k9c: "feu1g3u",
32
- iro3zm: "f141de4g",
33
- b661bw: "f11v6sdu",
34
- Bk6r4ia: ["f9yn8i4", "f1ajwf28"],
35
- B9zn80p: "f1uwu36w",
36
- Bpld233: ["f1ajwf28", "f9yn8i4"],
37
- B2d53fq: "f9olfzr"
32
+ Bpjbzib: "f128kf1x",
33
+ im15vp: "f1a38rnh",
34
+ Hjvxdg: ["f1wvuwkr", "fbu0tau"],
35
+ Gpfmf1: "f132k7zb",
36
+ ustxxc: ["fbu0tau", "f1wvuwkr"],
37
+ Brsut9c: "fggfoek"
38
38
  },
39
39
  highContrast: {
40
- Bsw6fvg: "f1rirnrt",
41
- Bjwas2f: "f132fbg1",
42
- Bn1d65q: ["f1ene5x0", "fzbc999"],
43
- Bxeuatn: "f6jgcol",
44
- n51gp8: ["fzbc999", "f1ene5x0"],
45
- Bbusuzp: "f1lkg8j3",
46
- ycbfsm: "fkc42ay",
47
- Bqrx1nm: "fq7113v",
48
- pgvf35: "ff1wgvm",
49
- Bh7lczh: ["fiob0tu", "f1x4h75k"],
50
- dpv3f4: "f1j6scgf",
51
- Bpnjhaq: ["f1x4h75k", "fiob0tu"],
52
- ze5xyy: "f4xjyn1",
53
- g2kj27: "fbgcvur",
54
- Bf756sw: "f1ks1yx8",
55
- Bow2dr7: ["f1o6qegi", "fmxjhhp"],
56
- Bvhedfk: "fcnxywj",
57
- Gye4lf: ["fmxjhhp", "f1o6qegi"],
58
- pc6evw: "f9ddjv3",
59
- F3bflw: 0,
60
- mxns5l: 0,
61
- B0tp99d: 0,
62
- l9kbep: 0,
63
- Bg4echp: 0,
64
- o3nasb: 0,
65
- B55dcl7: 0,
66
- By5cl00: 0,
67
- Bnk1xnq: 0,
68
- gdbnj: 0,
69
- Bw5jppy: 0,
70
- B8jyv7h: 0,
71
- ka51wi: 0,
72
- G867l3: 0,
73
- abbn9y: 0,
74
- Btyszwp: 0,
75
- Bi9mhhg: "f1mh9o5k",
76
- B7d2ofm: "fkom8lu"
40
+ By8wz76: "f1nz3ub2",
41
+ Bcq6wej: "fjq791v",
42
+ Jcjdmf: ["fkq2p2y", "f1sehlss"],
43
+ sc4o1m: "f11odvng",
44
+ Bosien3: ["f1sehlss", "fkq2p2y"],
45
+ B7iucu3: "fqc85l4",
46
+ B8gzw0y: "f1h3a8gf",
47
+ Bbkh6qg: "fkiggi6",
48
+ F230oe: "f8gmj8i",
49
+ Bdw8ktp: ["f1ap8nzx", "fjag8bx"],
50
+ Bj1xduy: "f1igan7k",
51
+ Bhh2cfd: ["fjag8bx", "f1ap8nzx"],
52
+ Bahaeuw: "f1v3eptx",
53
+ Bv2bamp: "f1ysmecq",
54
+ vxuvv6: "faulsx",
55
+ Bli9q98: ["f79t15f", "f8qmx7k"],
56
+ Bx2tt8t: "fbtzoaq",
57
+ yad0b3: ["f8qmx7k", "f79t15f"],
58
+ j2fop7: "fd4bjan",
59
+ B6rz4yo: 0,
60
+ Buk7464: 0,
61
+ Bqg8rp8: 0,
62
+ pjr8j7: 0,
63
+ Bgs2klq: 0,
64
+ Hwei09: 0,
65
+ Bi9aqk7: 0,
66
+ Fihjvf: 0,
67
+ nhyz0p: 0,
68
+ Buw724y: 0,
69
+ Bn7qjfh: 0,
70
+ B0u7xl9: 0,
71
+ md97jv: 0,
72
+ h3ptyc: 0,
73
+ s1kvfj: 0,
74
+ kogrdj: 0,
75
+ dqx2i2: "fdmpsdn",
76
+ o0nolc: "fgjsukj"
77
77
  },
78
78
  outline: {
79
79
  De3pzq: "f1q9pm1r",
@@ -86,7 +86,7 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
86
86
  Bn0qgzm: "fv51ejd",
87
87
  ibv6hh: ["f1efpmoh", "f130t4y6"],
88
88
  Jwef8y: "fjxutwb",
89
- iro3zm: "fwiml72",
89
+ Bpjbzib: "fkoldzo",
90
90
  B8q5s1w: "fcaw57c",
91
91
  Bci5o5g: ["fpwd27e", "f1999bjr"],
92
92
  n8qw10: "f1hi52o4",
@@ -105,12 +105,12 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
105
105
  oetu4i: "f1ukrpxl",
106
106
  gg5e9n: ["fecsdlb", "fr80ssc"],
107
107
  Bi91k9c: "f1rq72xc",
108
- iro3zm: "fnp9lpt",
109
- b661bw: "f1h0usnq",
110
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
111
- B9zn80p: "f16h9ulv",
112
- Bpld233: ["fx2bmrt", "fs4ktlq"],
113
- B2d53fq: "f1d6v5y2"
108
+ Bpjbzib: "f1ksv2xa",
109
+ im15vp: "fhvnf4x",
110
+ Hjvxdg: ["fb6swo4", "f232fm2"],
111
+ Gpfmf1: "f1klyf7k",
112
+ ustxxc: ["f232fm2", "fb6swo4"],
113
+ Brsut9c: "f1d6mv4x"
114
114
  },
115
115
  secondary: {},
116
116
  subtle: {
@@ -126,12 +126,12 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
126
126
  oetu4i: "f1ukrpxl",
127
127
  gg5e9n: ["fecsdlb", "fr80ssc"],
128
128
  Bi91k9c: "fnwyq0v",
129
- iro3zm: "fsv2rcd",
130
- b661bw: "f1h0usnq",
131
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
132
- B9zn80p: "f16h9ulv",
133
- Bpld233: ["fx2bmrt", "fs4ktlq"],
134
- B2d53fq: "f1omzyqd"
129
+ Bpjbzib: "f1q1yqic",
130
+ im15vp: "fhvnf4x",
131
+ Hjvxdg: ["fb6swo4", "f232fm2"],
132
+ Gpfmf1: "f1klyf7k",
133
+ ustxxc: ["f232fm2", "fb6swo4"],
134
+ Brsut9c: "fwga7ee"
135
135
  },
136
136
  transparent: {
137
137
  De3pzq: "f1q9pm1r",
@@ -146,52 +146,52 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
146
146
  oetu4i: "f1ukrpxl",
147
147
  gg5e9n: ["fecsdlb", "fr80ssc"],
148
148
  Bi91k9c: "f139oj5f",
149
- iro3zm: "fwiml72",
150
- b661bw: "f1h0usnq",
151
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
152
- B9zn80p: "f16h9ulv",
153
- Bpld233: ["fx2bmrt", "fs4ktlq"],
154
- B2d53fq: "f1fg1p5m"
149
+ Bpjbzib: "fkoldzo",
150
+ im15vp: "fhvnf4x",
151
+ Hjvxdg: ["fb6swo4", "f232fm2"],
152
+ Gpfmf1: "f1klyf7k",
153
+ ustxxc: ["f232fm2", "fb6swo4"],
154
+ Brsut9c: "f1l983o9"
155
155
  }
156
156
  }, {
157
157
  d: [".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fcaw57c[data-fui-focus-visible]{border-top-color:var(--colorNeutralStroke1);}", ".fpwd27e[data-fui-focus-visible]{border-right-color:var(--colorNeutralStroke1);}", ".f1999bjr[data-fui-focus-visible]{border-left-color:var(--colorNeutralStroke1);}", ".f1hi52o4[data-fui-focus-visible]{border-bottom-color:var(--colorNeutralStroke1);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1eryozh{color:var(--colorNeutralForeground2Selected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
158
- h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
159
- m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
158
+ h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f128kf1x:hover:active,.f128kf1x:active:focus-visible{background-color:var(--colorNeutralBackground1Pressed);}", ".f1a38rnh:hover:active,.f1a38rnh:active:focus-visible{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1wvuwkr:hover:active,.f1wvuwkr:active:focus-visible{border-right-color:var(--colorNeutralStroke1Pressed);}", ".fbu0tau:hover:active,.fbu0tau:active:focus-visible{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f132k7zb:hover:active,.f132k7zb:active:focus-visible{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".fggfoek:hover:active,.fggfoek:active:focus-visible{color:var(--colorNeutralForeground1Pressed);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fkoldzo:hover:active,.fkoldzo:active:focus-visible{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1ksv2xa:hover:active,.f1ksv2xa:active:focus-visible{background-color:var(--colorBrandBackgroundPressed);}", ".fhvnf4x:hover:active,.fhvnf4x:active:focus-visible{border-top-color:transparent;}", ".fb6swo4:hover:active,.fb6swo4:active:focus-visible{border-right-color:transparent;}", ".f232fm2:hover:active,.f232fm2:active:focus-visible{border-left-color:transparent;}", ".f1klyf7k:hover:active,.f1klyf7k:active:focus-visible{border-bottom-color:transparent;}", ".f1d6mv4x:hover:active,.f1d6mv4x:active:focus-visible{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1q1yqic:hover:active,.f1q1yqic:active:focus-visible{background-color:var(--colorSubtleBackgroundPressed);}", ".fwga7ee:hover:active,.fwga7ee:active:focus-visible{color:var(--colorNeutralForeground2Pressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1l983o9:hover:active,.f1l983o9:active:focus-visible{color:var(--colorNeutralForeground2BrandPressed);}"],
159
+ m: [["@media (forced-colors: active){.f1nz3ub2{background-color:Highlight;}}", {
160
160
  m: "(forced-colors: active)"
161
- }], ["@media (forced-colors: active){.f132fbg1{border-top-color:Highlight;}}", {
161
+ }], ["@media (forced-colors: active){.fjq791v{border-top-color:Highlight;}}", {
162
162
  m: "(forced-colors: active)"
163
- }], ["@media (forced-colors: active){.f1ene5x0{border-right-color:Highlight;}.fzbc999{border-left-color:Highlight;}}", {
163
+ }], ["@media (forced-colors: active){.f1sehlss{border-left-color:Highlight;}.fkq2p2y{border-right-color:Highlight;}}", {
164
164
  m: "(forced-colors: active)"
165
- }], ["@media (forced-colors: active){.f6jgcol{border-bottom-color:Highlight;}}", {
165
+ }], ["@media (forced-colors: active){.f11odvng{border-bottom-color:Highlight;}}", {
166
166
  m: "(forced-colors: active)"
167
- }], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
167
+ }], ["@media (forced-colors: active){.fqc85l4{color:HighlightText;}}", {
168
168
  m: "(forced-colors: active)"
169
- }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
169
+ }], ["@media (forced-colors: active){.f1h3a8gf{forced-color-adjust:none;}}", {
170
170
  m: "(forced-colors: active)"
171
- }], ["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
171
+ }], ["@media (forced-colors: active){.fkiggi6:hover{background-color:HighlightText;}}", {
172
172
  m: "(forced-colors: active)"
173
- }], ["@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", {
173
+ }], ["@media (forced-colors: active){.f8gmj8i:hover{border-top-color:Highlight;}}", {
174
174
  m: "(forced-colors: active)"
175
- }], ["@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", {
175
+ }], ["@media (forced-colors: active){.f1ap8nzx:hover{border-right-color:Highlight;}.fjag8bx:hover{border-left-color:Highlight;}}", {
176
176
  m: "(forced-colors: active)"
177
- }], ["@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", {
177
+ }], ["@media (forced-colors: active){.f1igan7k:hover{border-bottom-color:Highlight;}}", {
178
178
  m: "(forced-colors: active)"
179
- }], ["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
179
+ }], ["@media (forced-colors: active){.f1v3eptx:hover{color:Highlight;}}", {
180
180
  m: "(forced-colors: active)"
181
- }], ["@media (forced-colors: active){.fbgcvur:hover:active{background-color:HighlightText;}}", {
181
+ }], ["@media (forced-colors: active){.f1ysmecq:hover:active,.f1ysmecq:active:focus-visible{background-color:HighlightText;}}", {
182
182
  m: "(forced-colors: active)"
183
- }], ["@media (forced-colors: active){.f1ks1yx8:hover:active{border-top-color:Highlight;}}", {
183
+ }], ["@media (forced-colors: active){.faulsx:hover:active,.faulsx:active:focus-visible{border-top-color:Highlight;}}", {
184
184
  m: "(forced-colors: active)"
185
- }], ["@media (forced-colors: active){.f1o6qegi:hover:active{border-right-color:Highlight;}.fmxjhhp:hover:active{border-left-color:Highlight;}}", {
185
+ }], ["@media (forced-colors: active){.f79t15f:hover:active,.f79t15f:active:focus-visible{border-right-color:Highlight;}.f8qmx7k:hover:active,.f8qmx7k:active:focus-visible{border-left-color:Highlight;}}", {
186
186
  m: "(forced-colors: active)"
187
- }], ["@media (forced-colors: active){.fcnxywj:hover:active{border-bottom-color:Highlight;}}", {
187
+ }], ["@media (forced-colors: active){.fbtzoaq:hover:active,.fbtzoaq:active:focus-visible{border-bottom-color:Highlight;}}", {
188
188
  m: "(forced-colors: active)"
189
- }], ["@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}", {
189
+ }], ["@media (forced-colors: active){.fd4bjan:hover:active,.fd4bjan:active:focus-visible{color:Highlight;}}", {
190
190
  m: "(forced-colors: active)"
191
- }], ["@media (forced-colors: active){.f1mh9o5k:focus{border:1px solid HighlightText;}}", {
191
+ }], ["@media (forced-colors: active){.fdmpsdn:focus{border:1px solid HighlightText;}}", {
192
192
  p: -2,
193
193
  m: "(forced-colors: active)"
194
- }], ["@media (forced-colors: active){.fkom8lu:focus{outline-color:Highlight;}}", {
194
+ }], ["@media (forced-colors: active){.fgjsukj:focus{outline-color:Highlight;}}", {
195
195
  m: "(forced-colors: active)"
196
196
  }]]
197
197
  });
@@ -209,12 +209,12 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
209
209
  oetu4i: "f1jnshp0",
210
210
  gg5e9n: ["f18rmfxp", "f1gwvigk"],
211
211
  Bi91k9c: "fvgxktp",
212
- iro3zm: "f1t6o4dc",
213
- b661bw: "f10ztigi",
214
- Bk6r4ia: ["f1ft5sdu", "f1gzf82w"],
215
- B9zn80p: "f12zbtn2",
216
- Bpld233: ["f1gzf82w", "f1ft5sdu"],
217
- B2d53fq: "fcvwxyo"
212
+ Bpjbzib: "f1jct5ie",
213
+ im15vp: "f13txml0",
214
+ Hjvxdg: ["f1ncddno", "f1axfvow"],
215
+ Gpfmf1: "f1z04ada",
216
+ ustxxc: ["f1axfvow", "f1ncddno"],
217
+ Brsut9c: "f1uhomfy"
218
218
  },
219
219
  outline: {},
220
220
  primary: {
@@ -226,10 +226,10 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
226
226
  Bwzppfd: ["fr80ssc", "fecsdlb"],
227
227
  oetu4i: "f1ukrpxl",
228
228
  gg5e9n: ["fecsdlb", "fr80ssc"],
229
- b661bw: "f1h0usnq",
230
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
231
- B9zn80p: "f16h9ulv",
232
- Bpld233: ["fx2bmrt", "fs4ktlq"]
229
+ im15vp: "fhvnf4x",
230
+ Hjvxdg: ["fb6swo4", "f232fm2"],
231
+ Gpfmf1: "f1klyf7k",
232
+ ustxxc: ["f232fm2", "fb6swo4"]
233
233
  },
234
234
  secondary: {},
235
235
  subtle: {
@@ -243,11 +243,11 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
243
243
  Bwzppfd: ["fr80ssc", "fecsdlb"],
244
244
  oetu4i: "f1ukrpxl",
245
245
  gg5e9n: ["fecsdlb", "fr80ssc"],
246
- iro3zm: "fwiml72",
247
- b661bw: "f1h0usnq",
248
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
249
- B9zn80p: "f16h9ulv",
250
- Bpld233: ["fx2bmrt", "fs4ktlq"]
246
+ Bpjbzib: "fkoldzo",
247
+ im15vp: "fhvnf4x",
248
+ Hjvxdg: ["fb6swo4", "f232fm2"],
249
+ Gpfmf1: "f1klyf7k",
250
+ ustxxc: ["f232fm2", "fb6swo4"]
251
251
  },
252
252
  transparent: {
253
253
  De3pzq: "f1c21dwh",
@@ -260,76 +260,76 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
260
260
  Bwzppfd: ["fr80ssc", "fecsdlb"],
261
261
  oetu4i: "f1ukrpxl",
262
262
  gg5e9n: ["fecsdlb", "fr80ssc"],
263
- iro3zm: "fwiml72",
264
- b661bw: "f1h0usnq",
265
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
266
- B9zn80p: "f16h9ulv",
267
- Bpld233: ["fx2bmrt", "fs4ktlq"]
263
+ Bpjbzib: "fkoldzo",
264
+ im15vp: "fhvnf4x",
265
+ Hjvxdg: ["fb6swo4", "f232fm2"],
266
+ Gpfmf1: "f1klyf7k",
267
+ ustxxc: ["f232fm2", "fb6swo4"]
268
268
  }
269
269
  }, {
270
270
  d: [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
271
- h: [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}"]
271
+ h: [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1jct5ie:hover:active,.f1jct5ie:active:focus-visible{background-color:var(--colorNeutralBackgroundDisabled);}", ".f13txml0:hover:active,.f13txml0:active:focus-visible{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ncddno:hover:active,.f1ncddno:active:focus-visible{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1axfvow:hover:active,.f1axfvow:active:focus-visible{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1z04ada:hover:active,.f1z04ada:active:focus-visible{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1uhomfy:hover:active,.f1uhomfy:active:focus-visible{color:var(--colorNeutralForegroundDisabled);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".fhvnf4x:hover:active,.fhvnf4x:active:focus-visible{border-top-color:transparent;}", ".fb6swo4:hover:active,.fb6swo4:active:focus-visible{border-right-color:transparent;}", ".f232fm2:hover:active,.f232fm2:active:focus-visible{border-left-color:transparent;}", ".f1klyf7k:hover:active,.f1klyf7k:active:focus-visible{border-bottom-color:transparent;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fkoldzo:hover:active,.fkoldzo:active:focus-visible{background-color:var(--colorTransparentBackgroundPressed);}"]
272
272
  });
273
273
  const useIconCheckedStyles = /*#__PURE__*/__styles({
274
274
  subtleOrTransparent: {
275
275
  sj55zd: "f1qj7y59"
276
276
  },
277
277
  highContrast: {
278
- ycbfsm: "fg4l7m0"
278
+ B8gzw0y: "f1dd5bof"
279
279
  }
280
280
  }, {
281
281
  d: [".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
282
- m: [["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}", {
282
+ m: [["@media (forced-colors: active){.f1dd5bof{forced-color-adjust:auto;}}", {
283
283
  m: "(forced-colors: active)"
284
284
  }]]
285
285
  });
286
286
  const usePrimaryHighContrastStyles = /*#__PURE__*/__styles({
287
287
  base: {
288
- Bsw6fvg: "f4lkoma",
289
- Bjwas2f: "f1bauw5b",
290
- Bn1d65q: ["fbpknfk", "fedl69w"],
291
- Bxeuatn: "f15s25nd",
292
- n51gp8: ["fedl69w", "fbpknfk"],
293
- Bbusuzp: "f1e4kh5",
294
- ycbfsm: "fg4l7m0"
288
+ By8wz76: "f14ptb23",
289
+ Bcq6wej: "fd7znuh",
290
+ Jcjdmf: ["f1wh4a04", "f15h7fac"],
291
+ sc4o1m: "f1f064oi",
292
+ Bosien3: ["f15h7fac", "f1wh4a04"],
293
+ B7iucu3: "f3ggph1",
294
+ B8gzw0y: "f1dd5bof"
295
295
  },
296
296
  disabled: {
297
- Bjwas2f: "fg455y9",
298
- Bn1d65q: ["f1rvyvqg", "f14g86mu"],
299
- Bxeuatn: "f1cwzwz",
300
- n51gp8: ["f14g86mu", "f1rvyvqg"],
301
- Bbusuzp: "f1dcs8yz",
302
- G867l3: "fjwq6ea",
303
- gdbnj: ["f1lr3nhc", "f1mbxvi6"],
304
- mxns5l: "fn5gmvv",
305
- o3nasb: ["f1mbxvi6", "f1lr3nhc"]
297
+ Bcq6wej: "f9dbb4x",
298
+ Jcjdmf: ["f3qs60o", "f5u9ap2"],
299
+ sc4o1m: "fwd1oij",
300
+ Bosien3: ["f5u9ap2", "f3qs60o"],
301
+ B7iucu3: "f1cyfu5x",
302
+ h3ptyc: "f19etb0b",
303
+ Buw724y: ["f4f984j", "fw441p0"],
304
+ Buk7464: "f3d22hf",
305
+ Hwei09: ["fw441p0", "f4f984j"]
306
306
  }
307
307
  }, {
308
- m: [["@media (forced-colors: active){.f4lkoma{background-color:ButtonFace;}}", {
308
+ m: [["@media (forced-colors: active){.f14ptb23{background-color:ButtonFace;}}", {
309
309
  m: "(forced-colors: active)"
310
- }], ["@media (forced-colors: active){.f1bauw5b{border-top-color:ButtonBorder;}}", {
310
+ }], ["@media (forced-colors: active){.fd7znuh{border-top-color:ButtonBorder;}}", {
311
311
  m: "(forced-colors: active)"
312
- }], ["@media (forced-colors: active){.fbpknfk{border-right-color:ButtonBorder;}.fedl69w{border-left-color:ButtonBorder;}}", {
312
+ }], ["@media (forced-colors: active){.f15h7fac{border-left-color:ButtonBorder;}.f1wh4a04{border-right-color:ButtonBorder;}}", {
313
313
  m: "(forced-colors: active)"
314
- }], ["@media (forced-colors: active){.f15s25nd{border-bottom-color:ButtonBorder;}}", {
314
+ }], ["@media (forced-colors: active){.f1f064oi{border-bottom-color:ButtonBorder;}}", {
315
315
  m: "(forced-colors: active)"
316
- }], ["@media (forced-colors: active){.f1e4kh5{color:ButtonText;}}", {
316
+ }], ["@media (forced-colors: active){.f3ggph1{color:ButtonText;}}", {
317
317
  m: "(forced-colors: active)"
318
- }], ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}", {
318
+ }], ["@media (forced-colors: active){.f1dd5bof{forced-color-adjust:auto;}}", {
319
319
  m: "(forced-colors: active)"
320
- }], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
320
+ }], ["@media (forced-colors: active){.f9dbb4x{border-top-color:GrayText;}}", {
321
321
  m: "(forced-colors: active)"
322
- }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
322
+ }], ["@media (forced-colors: active){.f3qs60o{border-right-color:GrayText;}.f5u9ap2{border-left-color:GrayText;}}", {
323
323
  m: "(forced-colors: active)"
324
- }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
324
+ }], ["@media (forced-colors: active){.fwd1oij{border-bottom-color:GrayText;}}", {
325
325
  m: "(forced-colors: active)"
326
- }], ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
326
+ }], ["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
327
327
  m: "(forced-colors: active)"
328
- }], ["@media (forced-colors: active){.fjwq6ea:focus{border-top-color:GrayText;}}", {
328
+ }], ["@media (forced-colors: active){.f19etb0b:focus{border-top-color:GrayText;}}", {
329
329
  m: "(forced-colors: active)"
330
- }], ["@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}", {
330
+ }], ["@media (forced-colors: active){.f4f984j:focus{border-right-color:GrayText;}.fw441p0:focus{border-left-color:GrayText;}}", {
331
331
  m: "(forced-colors: active)"
332
- }], ["@media (forced-colors: active){.fn5gmvv:focus{border-bottom-color:GrayText;}}", {
332
+ }], ["@media (forced-colors: active){.f3d22hf:focus{border-bottom-color:GrayText;}}", {
333
333
  m: "(forced-colors: active)"
334
334
  }]]
335
335
  });
package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","highContrast","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","F3bflw","mxns5l","B0tp99d","l9kbep","Bg4echp","o3nasb","B55dcl7","By5cl00","Bnk1xnq","gdbnj","Bw5jppy","B8jyv7h","ka51wi","G867l3","abbn9y","Btyszwp","Bi9mhhg","B7d2ofm","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const toggleButtonClassNames = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed\n }\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\n },\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n })\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover\n },\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed\n }\n }\n});\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n }\n});\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto'\n }\n },\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n }\n }\n }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n const { appearance, checked, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","Bpjbzib","im15vp","Hjvxdg","Gpfmf1","ustxxc","Brsut9c","highContrast","By8wz76","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","B7iucu3","B8gzw0y","Bbkh6qg","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","Bahaeuw","Bv2bamp","vxuvv6","Bli9q98","Bx2tt8t","yad0b3","j2fop7","B6rz4yo","Buk7464","Bqg8rp8","pjr8j7","Bgs2klq","Hwei09","Bi9aqk7","Fihjvf","nhyz0p","Buw724y","Bn7qjfh","B0u7xl9","md97jv","h3ptyc","s1kvfj","kogrdj","dqx2i2","o0nolc","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const toggleButtonClassNames = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed\n }\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\n },\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n })\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed\n }\n }\n});\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n }\n});\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto'\n }\n },\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n }\n }\n }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n const { appearance, checked, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.headless.js ADDED
@@ -0,0 +1,36 @@
1
+ 'use client';
2
+ export const toggleButtonClassNames = {
3
+ root: 'fui-ToggleButton',
4
+ icon: 'fui-ToggleButton__icon'
5
+ };
6
+ /**
7
+ * Attaches only semantic slot class names and state modifiers
8
+ */ export const useToggleButtonStyles_unstable = (state)=>{
9
+ 'use no memo';
10
+ const { appearance, disabled, disabledFocusable, shape, size, checked, iconOnly } = state;
11
+ state.root.className = [
12
+ toggleButtonClassNames.root,
13
+ // Appearance
14
+ appearance && `${toggleButtonClassNames.root}--${appearance}`,
15
+ // Size
16
+ size && `${toggleButtonClassNames.root}--${size}`,
17
+ // Shape
18
+ shape && `${toggleButtonClassNames.root}--${shape}`,
19
+ // Checked
20
+ checked && `${toggleButtonClassNames.root}--checked`,
21
+ // Icons
22
+ iconOnly && `${toggleButtonClassNames.root}--iconOnly`,
23
+ // Disabled
24
+ disabled && `${toggleButtonClassNames.root}--disabled`,
25
+ disabledFocusable && `${toggleButtonClassNames.root}--disabledFocusable`,
26
+ // User provided class name
27
+ state.root.className
28
+ ].filter(Boolean).join(' ');
29
+ if (state.icon) {
30
+ state.icon.className = [
31
+ toggleButtonClassNames.icon,
32
+ state.icon.className
33
+ ].filter(Boolean).join(' ');
34
+ }
35
+ return state;
36
+ };
package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.headless.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.headless.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\n/**\n * Attaches only semantic slot class names and state modifiers\n */\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n 'use no memo';\n\n const { appearance, disabled, disabledFocusable, shape, size, checked, iconOnly } = state;\n\n state.root.className = [\n toggleButtonClassNames.root,\n\n // Appearance\n appearance && `${toggleButtonClassNames.root}--${appearance}`,\n\n // Size\n size && `${toggleButtonClassNames.root}--${size}`,\n\n // Shape\n shape && `${toggleButtonClassNames.root}--${shape}`,\n\n // Checked\n checked && `${toggleButtonClassNames.root}--checked`,\n\n // Icons\n iconOnly && `${toggleButtonClassNames.root}--iconOnly`,\n\n // Disabled\n disabled && `${toggleButtonClassNames.root}--disabled`,\n disabledFocusable && `${toggleButtonClassNames.root}--disabledFocusable`,\n\n // User provided class name\n state.root.className,\n ]\n .filter(Boolean)\n .join(' ');\n\n if (state.icon) {\n state.icon.className = [toggleButtonClassNames.icon, state.icon.className].filter(Boolean).join(' ');\n }\n\n return state;\n};\n"],"names":["toggleButtonClassNames","root","icon","useToggleButtonStyles_unstable","state","appearance","disabled","disabledFocusable","shape","size","checked","iconOnly","className","filter","Boolean","join"],"mappings":"AAAA;AAMA,OAAO,MAAMA,yBAAsD;IACjEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,KAAK,EAAEC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGP;IAEpFA,MAAMH,IAAI,CAACW,SAAS,GAAG;QACrBZ,uBAAuBC,IAAI;QAE3B,aAAa;QACbI,cAAc,GAAGL,uBAAuBC,IAAI,CAAC,EAAE,EAAEI,YAAY;QAE7D,OAAO;QACPI,QAAQ,GAAGT,uBAAuBC,IAAI,CAAC,EAAE,EAAEQ,MAAM;QAEjD,QAAQ;QACRD,SAAS,GAAGR,uBAAuBC,IAAI,CAAC,EAAE,EAAEO,OAAO;QAEnD,UAAU;QACVE,WAAW,GAAGV,uBAAuBC,IAAI,CAAC,SAAS,CAAC;QAEpD,QAAQ;QACRU,YAAY,GAAGX,uBAAuBC,IAAI,CAAC,UAAU,CAAC;QAEtD,WAAW;QACXK,YAAY,GAAGN,uBAAuBC,IAAI,CAAC,UAAU,CAAC;QACtDM,qBAAqB,GAAGP,uBAAuBC,IAAI,CAAC,mBAAmB,CAAC;QAExE,2BAA2B;QAC3BG,MAAMH,IAAI,CAACW,SAAS;KACrB,CACEC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIX,MAAMF,IAAI,EAAE;QACdE,MAAMF,IAAI,CAACU,SAAS,GAAG;YAACZ,uBAAuBE,IAAI;YAAEE,MAAMF,IAAI,CAACU,SAAS;SAAC,CAACC,MAAM,CAACC,SAASC,IAAI,CAAC;IAClG;IAEA,OAAOX;AACT,EAAE"}
package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js CHANGED
@@ -26,7 +26,7 @@ const useRootCheckedStyles = makeStyles({
26
26
  ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
27
27
  color: tokens.colorNeutralForeground1Hover
28
28
  },
29
- ':hover:active': {
29
+ ':hover:active,:active:focus-visible': {
30
30
  backgroundColor: tokens.colorNeutralBackground1Pressed,
31
31
  ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
32
32
  color: tokens.colorNeutralForeground1Pressed
@@ -44,7 +44,7 @@ const useRootCheckedStyles = makeStyles({
44
44
  ...shorthands.borderColor('Highlight'),
45
45
  color: 'Highlight'
46
46
  },
47
- ':hover:active': {
47
+ ':hover:active,:active:focus-visible': {
48
48
  backgroundColor: 'HighlightText',
49
49
  ...shorthands.borderColor('Highlight'),
50
50
  color: 'Highlight'
@@ -63,7 +63,7 @@ const useRootCheckedStyles = makeStyles({
63
63
  ':hover': {
64
64
  backgroundColor: tokens.colorTransparentBackgroundHover
65
65
  },
66
- ':hover:active': {
66
+ ':hover:active,:active:focus-visible': {
67
67
  backgroundColor: tokens.colorTransparentBackgroundPressed
68
68
  },
69
69
  ...createCustomFocusIndicatorStyle({
@@ -79,7 +79,7 @@ const useRootCheckedStyles = makeStyles({
79
79
  ...shorthands.borderColor('transparent'),
80
80
  color: tokens.colorNeutralForegroundOnBrand
81
81
  },
82
- ':hover:active': {
82
+ ':hover:active,:active:focus-visible': {
83
83
  backgroundColor: tokens.colorBrandBackgroundPressed,
84
84
  ...shorthands.borderColor('transparent'),
85
85
  color: tokens.colorNeutralForegroundOnBrand
@@ -96,7 +96,7 @@ const useRootCheckedStyles = makeStyles({
96
96
  ...shorthands.borderColor('transparent'),
97
97
  color: tokens.colorNeutralForeground2Hover
98
98
  },
99
- ':hover:active': {
99
+ ':hover:active,:active:focus-visible': {
100
100
  backgroundColor: tokens.colorSubtleBackgroundPressed,
101
101
  ...shorthands.borderColor('transparent'),
102
102
  color: tokens.colorNeutralForeground2Pressed
@@ -111,7 +111,7 @@ const useRootCheckedStyles = makeStyles({
111
111
  ...shorthands.borderColor('transparent'),
112
112
  color: tokens.colorNeutralForeground2BrandHover
113
113
  },
114
- ':hover:active': {
114
+ ':hover:active,:active:focus-visible': {
115
115
  backgroundColor: tokens.colorTransparentBackgroundPressed,
116
116
  ...shorthands.borderColor('transparent'),
117
117
  color: tokens.colorNeutralForeground2BrandPressed
@@ -129,7 +129,7 @@ const useRootDisabledStyles = makeStyles({
129
129
  ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
130
130
  color: tokens.colorNeutralForegroundDisabled
131
131
  },
132
- ':hover:active': {
132
+ ':hover:active,:active:focus-visible': {
133
133
  backgroundColor: tokens.colorNeutralBackgroundDisabled,
134
134
  ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
135
135
  color: tokens.colorNeutralForegroundDisabled
@@ -143,7 +143,7 @@ const useRootDisabledStyles = makeStyles({
143
143
  ':hover': {
144
144
  ...shorthands.borderColor('transparent')
145
145
  },
146
- ':hover:active': {
146
+ ':hover:active,:active:focus-visible': {
147
147
  ...shorthands.borderColor('transparent')
148
148
  }
149
149
  },
@@ -156,7 +156,7 @@ const useRootDisabledStyles = makeStyles({
156
156
  backgroundColor: tokens.colorTransparentBackgroundHover,
157
157
  ...shorthands.borderColor('transparent')
158
158
  },
159
- ':hover:active': {
159
+ ':hover:active,:active:focus-visible': {
160
160
  backgroundColor: tokens.colorTransparentBackgroundPressed,
161
161
  ...shorthands.borderColor('transparent')
162
162
  }
@@ -168,7 +168,7 @@ const useRootDisabledStyles = makeStyles({
168
168
  backgroundColor: tokens.colorTransparentBackgroundHover,
169
169
  ...shorthands.borderColor('transparent')
170
170
  },
171
- ':hover:active': {
171
+ ':hover:active,:active:focus-visible': {
172
172
  backgroundColor: tokens.colorTransparentBackgroundPressed,
173
173
  ...shorthands.borderColor('transparent')
174
174
  }