@fluentui/react-switch 0.0.0-nightly-20240730-0407.1 → 0.0.0-nightly-20240816-2133.1
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 +13 -13
- package/lib/components/Switch/useSwitchStyles.styles.js +11 -11
- package/lib/components/Switch/useSwitchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.styles.js +49 -47
- package/lib-commonjs/components/Switch/useSwitchStyles.styles.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 16 Aug 2024 21:43:56 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240816-2133.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20240816-2133.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.89..@fluentui/react-switch_v0.0.0-nightly-
|
|
9
|
+
Fri, 16 Aug 2024 21:43:56 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.89..@fluentui/react-switch_v0.0.0-nightly-20240816-2133.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
17
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
18
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
20
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
22
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
23
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
24
24
|
|
|
25
25
|
## [9.1.89](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.89)
|
|
26
26
|
|
|
@@ -27,9 +27,9 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
27
27
|
}, {
|
|
28
28
|
d: [".f1vx9l62{flex-direction:column;}"]
|
|
29
29
|
});
|
|
30
|
-
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("
|
|
31
|
-
r: [".
|
|
32
|
-
s: ["@media screen and (prefers-reduced-motion: reduce){.
|
|
30
|
+
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r2wb08n", null, {
|
|
31
|
+
r: [".r2wb08n{border-radius:var(--ctrl-token-Switch-1897, var(--semantic-token-Switch-1898, var(--borderRadiusCircular)));border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--ctrl-token-Switch-1899, var(--semantic-token-Switch-1900, var(--durationNormal)));transition-timing-function:var(--ctrl-token-Switch-1901, var(--semantic-token-Switch-1902, var(--curveEasyEase)));transition-property:background,border,color;width:40px;}", ".r2wb08n>*{transition-duration:var(--ctrl-token-Switch-1903, var(--semantic-token-Switch-1904, var(--durationNormal)));transition-timing-function:var(--ctrl-token-Switch-1905, var(--semantic-token-Switch-1906, var(--curveEasyEase)));transition-property:transform;}"],
|
|
32
|
+
s: ["@media screen and (prefers-reduced-motion: reduce){.r2wb08n{transition-duration:0.01ms;}}", "@media (forced-colors: active){.r2wb08n{color:CanvasText;}.r2wb08n>i{forced-color-adjust:none;}}", "@media screen and (prefers-reduced-motion: reduce){.r2wb08n>*{transition-duration:0.01ms;}}"]
|
|
33
33
|
});
|
|
34
34
|
const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
35
35
|
labelAbove: {
|
|
@@ -38,9 +38,9 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
38
38
|
}, {
|
|
39
39
|
d: [".f1hu3pq6{margin-top:0;}"]
|
|
40
40
|
});
|
|
41
|
-
const useInputBaseClassName = /*#__PURE__*/__resetStyles("
|
|
42
|
-
r: [".
|
|
43
|
-
s: ["@media (forced-colors: active){.
|
|
41
|
+
const useInputBaseClassName = /*#__PURE__*/__resetStyles("r18xcjlx", "r1x52umh", {
|
|
42
|
+
r: [".r18xcjlx{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r18xcjlx:checked~.fui-Switch__indicator>*{transform:translateX(20px);}", ".r18xcjlx:disabled{cursor:default;}", ".r18xcjlx:disabled~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1907, var(--semantic-token-Switch-1908, var(--colorNeutralForegroundDisabled)));}", ".r18xcjlx:disabled~.fui-Switch__label{cursor:default;color:var(--ctrl-token-Switch-1909, var(--semantic-token-Switch-1910, var(--colorNeutralForegroundDisabled)));}", ".r18xcjlx:enabled:not(:checked)~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1911, var(--semantic-token-Switch-1912, var(--colorNeutralStrokeAccessible)));border-color:var(--ctrl-token-Switch-1913, var(--semantic-token-Switch-1914, var(--colorNeutralStrokeAccessible)));}", ".r18xcjlx:enabled:not(:checked)~.fui-Switch__label{color:var(--ctrl-token-Switch-1915, var(--semantic-token-Switch-1916, var(--colorNeutralForeground1)));}", ".r18xcjlx:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1917, var(--semantic-token-Switch-1918, var(--colorNeutralStrokeAccessibleHover)));border-color:var(--ctrl-token-Switch-1919, var(--semantic-token-Switch-1920, var(--colorNeutralStrokeAccessibleHover)));}", ".r18xcjlx:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1921, var(--semantic-token-Switch-1922, var(--colorNeutralStrokeAccessiblePressed)));border-color:var(--ctrl-token-Switch-1923, var(--semantic-token-Switch-1924, var(--colorNeutralStrokeAccessiblePressed)));}", ".r18xcjlx:enabled:checked~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1925, var(--semantic-token-Switch-1926, var(--colorCompoundBrandBackground)));color:var(--ctrl-token-Switch-1927, var(--semantic-token-Switch-1928, var(--colorNeutralForegroundInverted)));border-color:var(--ctrl-token-Switch-1929, var(--semantic-token-Switch-1930, var(--colorTransparentStroke)));}", ".r18xcjlx:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1931, var(--semantic-token-Switch-1932, var(--colorCompoundBrandBackgroundHover)));border-color:var(--ctrl-token-Switch-1933, var(--semantic-token-Switch-1934, var(--colorTransparentStrokeInteractive)));}", ".r18xcjlx:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1935, var(--semantic-token-Switch-1936, var(--colorCompoundBrandBackgroundPressed)));border-color:var(--ctrl-token-Switch-1937, var(--semantic-token-Switch-1938, var(--colorTransparentStrokeInteractive)));}", ".r18xcjlx:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--ctrl-token-Switch-1939, var(--semantic-token-Switch-1940, var(--colorNeutralStrokeDisabled)));}", ".r18xcjlx:disabled:checked~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1941, var(--semantic-token-Switch-1942, var(--colorNeutralBackgroundDisabled)));border-color:var(--ctrl-token-Switch-1943, var(--semantic-token-Switch-1944, var(--colorTransparentStrokeDisabled)));}", ".r1x52umh{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r1x52umh:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}", ".r1x52umh:disabled{cursor:default;}", ".r1x52umh:disabled~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1907, var(--semantic-token-Switch-1908, var(--colorNeutralForegroundDisabled)));}", ".r1x52umh:disabled~.fui-Switch__label{cursor:default;color:var(--ctrl-token-Switch-1909, var(--semantic-token-Switch-1910, var(--colorNeutralForegroundDisabled)));}", ".r1x52umh:enabled:not(:checked)~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1911, var(--semantic-token-Switch-1912, var(--colorNeutralStrokeAccessible)));border-color:var(--ctrl-token-Switch-1913, var(--semantic-token-Switch-1914, var(--colorNeutralStrokeAccessible)));}", ".r1x52umh:enabled:not(:checked)~.fui-Switch__label{color:var(--ctrl-token-Switch-1915, var(--semantic-token-Switch-1916, var(--colorNeutralForeground1)));}", ".r1x52umh:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1917, var(--semantic-token-Switch-1918, var(--colorNeutralStrokeAccessibleHover)));border-color:var(--ctrl-token-Switch-1919, var(--semantic-token-Switch-1920, var(--colorNeutralStrokeAccessibleHover)));}", ".r1x52umh:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1921, var(--semantic-token-Switch-1922, var(--colorNeutralStrokeAccessiblePressed)));border-color:var(--ctrl-token-Switch-1923, var(--semantic-token-Switch-1924, var(--colorNeutralStrokeAccessiblePressed)));}", ".r1x52umh:enabled:checked~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1925, var(--semantic-token-Switch-1926, var(--colorCompoundBrandBackground)));color:var(--ctrl-token-Switch-1927, var(--semantic-token-Switch-1928, var(--colorNeutralForegroundInverted)));border-color:var(--ctrl-token-Switch-1929, var(--semantic-token-Switch-1930, var(--colorTransparentStroke)));}", ".r1x52umh:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1931, var(--semantic-token-Switch-1932, var(--colorCompoundBrandBackgroundHover)));border-color:var(--ctrl-token-Switch-1933, var(--semantic-token-Switch-1934, var(--colorTransparentStrokeInteractive)));}", ".r1x52umh:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1935, var(--semantic-token-Switch-1936, var(--colorCompoundBrandBackgroundPressed)));border-color:var(--ctrl-token-Switch-1937, var(--semantic-token-Switch-1938, var(--colorTransparentStrokeInteractive)));}", ".r1x52umh:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--ctrl-token-Switch-1939, var(--semantic-token-Switch-1940, var(--colorNeutralStrokeDisabled)));}", ".r1x52umh:disabled:checked~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1941, var(--semantic-token-Switch-1942, var(--colorNeutralBackgroundDisabled)));border-color:var(--ctrl-token-Switch-1943, var(--semantic-token-Switch-1944, var(--colorTransparentStrokeDisabled)));}"],
|
|
43
|
+
s: ["@media (forced-colors: active){.r18xcjlx:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r18xcjlx:disabled~.fui-Switch__label{color:GrayText;}.r18xcjlx:hover{color:CanvasText;}.r18xcjlx:hover:active{color:CanvasText;}.r18xcjlx:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r18xcjlx:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r18xcjlx:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}", "@media (forced-colors: active){.r1x52umh:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r1x52umh:disabled~.fui-Switch__label{color:GrayText;}.r1x52umh:hover{color:CanvasText;}.r1x52umh:hover:active{color:CanvasText;}.r1x52umh:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r1x52umh:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r1x52umh:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"]
|
|
44
44
|
});
|
|
45
45
|
const useInputStyles = /*#__PURE__*/__styles({
|
|
46
46
|
before: {
|
|
@@ -72,20 +72,20 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
72
72
|
B0ocmuz: "f1f5q0n8"
|
|
73
73
|
},
|
|
74
74
|
above: {
|
|
75
|
-
z8tnut: "
|
|
76
|
-
Byoj8tv: "
|
|
75
|
+
z8tnut: "foln0q0",
|
|
76
|
+
Byoj8tv: "ftc0vn4",
|
|
77
77
|
a9b677: "fly5x3f"
|
|
78
78
|
},
|
|
79
79
|
after: {
|
|
80
|
-
uwmqm3: ["
|
|
80
|
+
uwmqm3: ["f1vrb2xw", "f1amny7f"]
|
|
81
81
|
},
|
|
82
82
|
before: {
|
|
83
|
-
z189sj: ["
|
|
83
|
+
z189sj: ["fgle4fo", "f1qw91m5"]
|
|
84
84
|
}
|
|
85
85
|
}, {
|
|
86
86
|
d: [".f1k6fduh{cursor:pointer;}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", [".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}", {
|
|
87
87
|
p: -1
|
|
88
|
-
}], ".
|
|
88
|
+
}], ".foln0q0{padding-top:var(--ctrl-token-Switch-1945, var(--semantic-token-Switch-1946, var(--spacingVerticalXS)));}", ".ftc0vn4{padding-bottom:var(--ctrl-token-Switch-1947, var(--semantic-token-Switch-1948, var(--spacingVerticalXS)));}", ".fly5x3f{width:100%;}", ".f1vrb2xw{padding-left:var(--ctrl-token-Switch-1949, var(--semantic-token-Switch-1950, var(--spacingHorizontalXS)));}", ".f1amny7f{padding-right:var(--ctrl-token-Switch-1949, var(--semantic-token-Switch-1950, var(--spacingHorizontalXS)));}", ".fgle4fo{padding-right:var(--ctrl-token-Switch-1951, var(--semantic-token-Switch-1952, var(--spacingHorizontalXS)));}", ".f1qw91m5{padding-left:var(--ctrl-token-Switch-1951, var(--semantic-token-Switch-1952, var(--spacingHorizontalXS)));}"]
|
|
89
89
|
});
|
|
90
90
|
/**
|
|
91
91
|
* Apply styling to the Switch slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none'\n }\n },\n '> *': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n }\n },\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled\n }\n },\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled\n }\n },\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\n }\n },\n ':hover': {\n color: 'CanvasText'\n },\n ':hover:active': {\n color: 'CanvasText'\n },\n ':enabled:checked': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n }\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0\n },\n after: {\n left: 0,\n top: 0\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%'\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%'\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const { label, labelPosition } = state;\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: `var(--ctrl-token-Switch-1897, var(--semantic-token-Switch-1898, ${tokens.borderRadiusCircular}))`,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: `var(--ctrl-token-Switch-1899, var(--semantic-token-Switch-1900, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--ctrl-token-Switch-1901, var(--semantic-token-Switch-1902, ${tokens.curveEasyEase}))`,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none'\n }\n },\n '> *': {\n transitionDuration: `var(--ctrl-token-Switch-1903, var(--semantic-token-Switch-1904, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--ctrl-token-Switch-1905, var(--semantic-token-Switch-1906, ${tokens.curveEasyEase}))`,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--ctrl-token-Switch-1907, var(--semantic-token-Switch-1908, ${tokens.colorNeutralForegroundDisabled}))`\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: `var(--ctrl-token-Switch-1909, var(--semantic-token-Switch-1910, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--ctrl-token-Switch-1911, var(--semantic-token-Switch-1912, ${tokens.colorNeutralStrokeAccessible}))`,\n borderColor: `var(--ctrl-token-Switch-1913, var(--semantic-token-Switch-1914, ${tokens.colorNeutralStrokeAccessible}))`\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: `var(--ctrl-token-Switch-1915, var(--semantic-token-Switch-1916, ${tokens.colorNeutralForeground1}))`\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--ctrl-token-Switch-1917, var(--semantic-token-Switch-1918, ${tokens.colorNeutralStrokeAccessibleHover}))`,\n borderColor: `var(--ctrl-token-Switch-1919, var(--semantic-token-Switch-1920, ${tokens.colorNeutralStrokeAccessibleHover}))`\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--ctrl-token-Switch-1921, var(--semantic-token-Switch-1922, ${tokens.colorNeutralStrokeAccessiblePressed}))`,\n borderColor: `var(--ctrl-token-Switch-1923, var(--semantic-token-Switch-1924, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n }\n },\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--ctrl-token-Switch-1925, var(--semantic-token-Switch-1926, ${tokens.colorCompoundBrandBackground}))`,\n color: `var(--ctrl-token-Switch-1927, var(--semantic-token-Switch-1928, ${tokens.colorNeutralForegroundInverted}))`,\n borderColor: `var(--ctrl-token-Switch-1929, var(--semantic-token-Switch-1930, ${tokens.colorTransparentStroke}))`\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--ctrl-token-Switch-1931, var(--semantic-token-Switch-1932, ${tokens.colorCompoundBrandBackgroundHover}))`,\n borderColor: `var(--ctrl-token-Switch-1933, var(--semantic-token-Switch-1934, ${tokens.colorTransparentStrokeInteractive}))`\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--ctrl-token-Switch-1935, var(--semantic-token-Switch-1936, ${tokens.colorCompoundBrandBackgroundPressed}))`,\n borderColor: `var(--ctrl-token-Switch-1937, var(--semantic-token-Switch-1938, ${tokens.colorTransparentStrokeInteractive}))`\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: `var(--ctrl-token-Switch-1939, var(--semantic-token-Switch-1940, ${tokens.colorNeutralStrokeDisabled}))`\n }\n },\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--ctrl-token-Switch-1941, var(--semantic-token-Switch-1942, ${tokens.colorNeutralBackgroundDisabled}))`,\n borderColor: `var(--ctrl-token-Switch-1943, var(--semantic-token-Switch-1944, ${tokens.colorTransparentStrokeDisabled}))`\n }\n },\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\n }\n },\n ':hover': {\n color: 'CanvasText'\n },\n ':hover:active': {\n color: 'CanvasText'\n },\n ':enabled:checked': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n }\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0\n },\n after: {\n left: 0,\n top: 0\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%'\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n },\n above: {\n paddingTop: `var(--ctrl-token-Switch-1945, var(--semantic-token-Switch-1946, ${tokens.spacingVerticalXS}))`,\n paddingBottom: `var(--ctrl-token-Switch-1947, var(--semantic-token-Switch-1948, ${tokens.spacingVerticalXS}))`,\n width: '100%'\n },\n after: {\n paddingLeft: `var(--ctrl-token-Switch-1949, var(--semantic-token-Switch-1950, ${tokens.spacingHorizontalXS}))`\n },\n before: {\n paddingRight: `var(--ctrl-token-Switch-1951, var(--semantic-token-Switch-1952, ${tokens.spacingHorizontalXS}))`\n }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const { label, labelPosition } = state;\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE,uBAAuB;EAClCC,KAAK,EAAE,mBAAmB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,eAAe,GAAGL,gBAAgB,CAACC,IAAI;AACxD;AACA,MAAMK,yBAAyB,GAAG,CAAC;AACnC,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAGF,WAAW,GAAGD,yBAAyB;AACzD,MAAMI,oBAAoB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAS5B,CAAC;AACF,MAAMC,aAAa,gBAAGf,QAAA;EAAAgB,QAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIrB,CAAC;AACF,MAAMC,yBAAyB,gBAAGpB,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAgCjC,CAAC;AACF,MAAMM,kBAAkB,gBAAGpB,QAAA;EAAAqB,UAAA;IAAAC,OAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAI1B,CAAC;AACF,MAAMK,qBAAqB,gBAAGxB,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAuH7B,CAAC;AACF,MAAMU,cAAc,gBAAGxB,QAAA;EAAAyB,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAF,OAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAf,CAAA;AAAA,CActB,CAAC;AACF;AACA,MAAMgB,cAAc,gBAAGlC,QAAA;EAAAmC,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAf,OAAA;IAAAgB,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,KAAA;IAAAW,MAAA;IAAAH,OAAA;IAAAL,MAAA;EAAA;EAAAL,KAAA;IAAAW,MAAA;EAAA;EAAAd,MAAA;IAAAe,MAAA;EAAA;AAAA;EAAAtB,CAAA;IAAAyB,CAAA;EAAA;AAAA,CAoBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAIC,KAAK,IAAG;EACjD,aAAa;;EACb,MAAMC,iBAAiB,GAAGlC,oBAAoB,CAAC,CAAC;EAChD,MAAMmC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,sBAAsB,GAAG7B,yBAAyB,CAAC,CAAC;EAC1D,MAAM8B,eAAe,GAAG7B,kBAAkB,CAAC,CAAC;EAC5C,MAAM8B,kBAAkB,GAAG3B,qBAAqB,CAAC,CAAC;EAClD,MAAM4B,WAAW,GAAG3B,cAAc,CAAC,CAAC;EACpC,MAAM4B,WAAW,GAAGlB,cAAc,CAAC,CAAC;EACpC,MAAM;IAAE5B,KAAK;IAAE+C;EAAc,CAAC,GAAGR,KAAK;EACtCA,KAAK,CAAC1C,IAAI,CAACmD,SAAS,GAAGrD,YAAY,CAACC,gBAAgB,CAACC,IAAI,EAAE2C,iBAAiB,EAAEO,aAAa,KAAK,OAAO,IAAIN,UAAU,CAAC/B,QAAQ,EAAE6B,KAAK,CAAC1C,IAAI,CAACmD,SAAS,CAAC;EACrJT,KAAK,CAACzC,SAAS,CAACkD,SAAS,GAAGrD,YAAY,CAACC,gBAAgB,CAACE,SAAS,EAAE4C,sBAAsB,EAAE1C,KAAK,IAAI+C,aAAa,KAAK,OAAO,IAAIJ,eAAe,CAAC5B,UAAU,EAAEwB,KAAK,CAACzC,SAAS,CAACkD,SAAS,CAAC;EACzLT,KAAK,CAACxC,KAAK,CAACiD,SAAS,GAAGrD,YAAY,CAACC,gBAAgB,CAACG,KAAK,EAAE6C,kBAAkB,EAAE5C,KAAK,IAAI6C,WAAW,CAACE,aAAa,CAAC,EAAER,KAAK,CAACxC,KAAK,CAACiD,SAAS,CAAC;EAC5I,IAAIT,KAAK,CAACvC,KAAK,EAAE;IACbuC,KAAK,CAACvC,KAAK,CAACgD,SAAS,GAAGrD,YAAY,CAACC,gBAAgB,CAACI,KAAK,EAAE8C,WAAW,CAACjB,IAAI,EAAEiB,WAAW,CAACC,aAAa,CAAC,EAAER,KAAK,CAACvC,KAAK,CAACgD,SAAS,CAAC;EACrI;EACA,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -59,15 +59,15 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
59
59
|
".f1vx9l62{flex-direction:column;}"
|
|
60
60
|
]
|
|
61
61
|
});
|
|
62
|
-
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
62
|
+
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r2wb08n", null, {
|
|
63
63
|
r: [
|
|
64
|
-
".
|
|
65
|
-
".
|
|
64
|
+
".r2wb08n{border-radius:var(--ctrl-token-Switch-1897, var(--semantic-token-Switch-1898, var(--borderRadiusCircular)));border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--ctrl-token-Switch-1899, var(--semantic-token-Switch-1900, var(--durationNormal)));transition-timing-function:var(--ctrl-token-Switch-1901, var(--semantic-token-Switch-1902, var(--curveEasyEase)));transition-property:background,border,color;width:40px;}",
|
|
65
|
+
".r2wb08n>*{transition-duration:var(--ctrl-token-Switch-1903, var(--semantic-token-Switch-1904, var(--durationNormal)));transition-timing-function:var(--ctrl-token-Switch-1905, var(--semantic-token-Switch-1906, var(--curveEasyEase)));transition-property:transform;}"
|
|
66
66
|
],
|
|
67
67
|
s: [
|
|
68
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
69
|
-
"@media (forced-colors: active){.
|
|
70
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
68
|
+
"@media screen and (prefers-reduced-motion: reduce){.r2wb08n{transition-duration:0.01ms;}}",
|
|
69
|
+
"@media (forced-colors: active){.r2wb08n{color:CanvasText;}.r2wb08n>i{forced-color-adjust:none;}}",
|
|
70
|
+
"@media screen and (prefers-reduced-motion: reduce){.r2wb08n>*{transition-duration:0.01ms;}}"
|
|
71
71
|
]
|
|
72
72
|
});
|
|
73
73
|
const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -79,40 +79,40 @@ const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
79
79
|
".f1hu3pq6{margin-top:0;}"
|
|
80
80
|
]
|
|
81
81
|
});
|
|
82
|
-
const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
82
|
+
const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r18xcjlx", "r1x52umh", {
|
|
83
83
|
r: [
|
|
84
|
-
".
|
|
85
|
-
".
|
|
86
|
-
".
|
|
87
|
-
".
|
|
88
|
-
".
|
|
89
|
-
".
|
|
90
|
-
".
|
|
91
|
-
".
|
|
92
|
-
".
|
|
93
|
-
".
|
|
94
|
-
".
|
|
95
|
-
".
|
|
96
|
-
".
|
|
97
|
-
".
|
|
98
|
-
".
|
|
99
|
-
".
|
|
100
|
-
".
|
|
101
|
-
".
|
|
102
|
-
".
|
|
103
|
-
".
|
|
104
|
-
".
|
|
105
|
-
".
|
|
106
|
-
".
|
|
107
|
-
".
|
|
108
|
-
".
|
|
109
|
-
".
|
|
110
|
-
".
|
|
111
|
-
".
|
|
84
|
+
".r18xcjlx{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
|
|
85
|
+
".r18xcjlx:checked~.fui-Switch__indicator>*{transform:translateX(20px);}",
|
|
86
|
+
".r18xcjlx:disabled{cursor:default;}",
|
|
87
|
+
".r18xcjlx:disabled~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1907, var(--semantic-token-Switch-1908, var(--colorNeutralForegroundDisabled)));}",
|
|
88
|
+
".r18xcjlx:disabled~.fui-Switch__label{cursor:default;color:var(--ctrl-token-Switch-1909, var(--semantic-token-Switch-1910, var(--colorNeutralForegroundDisabled)));}",
|
|
89
|
+
".r18xcjlx:enabled:not(:checked)~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1911, var(--semantic-token-Switch-1912, var(--colorNeutralStrokeAccessible)));border-color:var(--ctrl-token-Switch-1913, var(--semantic-token-Switch-1914, var(--colorNeutralStrokeAccessible)));}",
|
|
90
|
+
".r18xcjlx:enabled:not(:checked)~.fui-Switch__label{color:var(--ctrl-token-Switch-1915, var(--semantic-token-Switch-1916, var(--colorNeutralForeground1)));}",
|
|
91
|
+
".r18xcjlx:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1917, var(--semantic-token-Switch-1918, var(--colorNeutralStrokeAccessibleHover)));border-color:var(--ctrl-token-Switch-1919, var(--semantic-token-Switch-1920, var(--colorNeutralStrokeAccessibleHover)));}",
|
|
92
|
+
".r18xcjlx:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1921, var(--semantic-token-Switch-1922, var(--colorNeutralStrokeAccessiblePressed)));border-color:var(--ctrl-token-Switch-1923, var(--semantic-token-Switch-1924, var(--colorNeutralStrokeAccessiblePressed)));}",
|
|
93
|
+
".r18xcjlx:enabled:checked~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1925, var(--semantic-token-Switch-1926, var(--colorCompoundBrandBackground)));color:var(--ctrl-token-Switch-1927, var(--semantic-token-Switch-1928, var(--colorNeutralForegroundInverted)));border-color:var(--ctrl-token-Switch-1929, var(--semantic-token-Switch-1930, var(--colorTransparentStroke)));}",
|
|
94
|
+
".r18xcjlx:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1931, var(--semantic-token-Switch-1932, var(--colorCompoundBrandBackgroundHover)));border-color:var(--ctrl-token-Switch-1933, var(--semantic-token-Switch-1934, var(--colorTransparentStrokeInteractive)));}",
|
|
95
|
+
".r18xcjlx:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1935, var(--semantic-token-Switch-1936, var(--colorCompoundBrandBackgroundPressed)));border-color:var(--ctrl-token-Switch-1937, var(--semantic-token-Switch-1938, var(--colorTransparentStrokeInteractive)));}",
|
|
96
|
+
".r18xcjlx:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--ctrl-token-Switch-1939, var(--semantic-token-Switch-1940, var(--colorNeutralStrokeDisabled)));}",
|
|
97
|
+
".r18xcjlx:disabled:checked~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1941, var(--semantic-token-Switch-1942, var(--colorNeutralBackgroundDisabled)));border-color:var(--ctrl-token-Switch-1943, var(--semantic-token-Switch-1944, var(--colorTransparentStrokeDisabled)));}",
|
|
98
|
+
".r1x52umh{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
|
|
99
|
+
".r1x52umh:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}",
|
|
100
|
+
".r1x52umh:disabled{cursor:default;}",
|
|
101
|
+
".r1x52umh:disabled~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1907, var(--semantic-token-Switch-1908, var(--colorNeutralForegroundDisabled)));}",
|
|
102
|
+
".r1x52umh:disabled~.fui-Switch__label{cursor:default;color:var(--ctrl-token-Switch-1909, var(--semantic-token-Switch-1910, var(--colorNeutralForegroundDisabled)));}",
|
|
103
|
+
".r1x52umh:enabled:not(:checked)~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1911, var(--semantic-token-Switch-1912, var(--colorNeutralStrokeAccessible)));border-color:var(--ctrl-token-Switch-1913, var(--semantic-token-Switch-1914, var(--colorNeutralStrokeAccessible)));}",
|
|
104
|
+
".r1x52umh:enabled:not(:checked)~.fui-Switch__label{color:var(--ctrl-token-Switch-1915, var(--semantic-token-Switch-1916, var(--colorNeutralForeground1)));}",
|
|
105
|
+
".r1x52umh:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1917, var(--semantic-token-Switch-1918, var(--colorNeutralStrokeAccessibleHover)));border-color:var(--ctrl-token-Switch-1919, var(--semantic-token-Switch-1920, var(--colorNeutralStrokeAccessibleHover)));}",
|
|
106
|
+
".r1x52umh:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--ctrl-token-Switch-1921, var(--semantic-token-Switch-1922, var(--colorNeutralStrokeAccessiblePressed)));border-color:var(--ctrl-token-Switch-1923, var(--semantic-token-Switch-1924, var(--colorNeutralStrokeAccessiblePressed)));}",
|
|
107
|
+
".r1x52umh:enabled:checked~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1925, var(--semantic-token-Switch-1926, var(--colorCompoundBrandBackground)));color:var(--ctrl-token-Switch-1927, var(--semantic-token-Switch-1928, var(--colorNeutralForegroundInverted)));border-color:var(--ctrl-token-Switch-1929, var(--semantic-token-Switch-1930, var(--colorTransparentStroke)));}",
|
|
108
|
+
".r1x52umh:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1931, var(--semantic-token-Switch-1932, var(--colorCompoundBrandBackgroundHover)));border-color:var(--ctrl-token-Switch-1933, var(--semantic-token-Switch-1934, var(--colorTransparentStrokeInteractive)));}",
|
|
109
|
+
".r1x52umh:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1935, var(--semantic-token-Switch-1936, var(--colorCompoundBrandBackgroundPressed)));border-color:var(--ctrl-token-Switch-1937, var(--semantic-token-Switch-1938, var(--colorTransparentStrokeInteractive)));}",
|
|
110
|
+
".r1x52umh:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--ctrl-token-Switch-1939, var(--semantic-token-Switch-1940, var(--colorNeutralStrokeDisabled)));}",
|
|
111
|
+
".r1x52umh:disabled:checked~.fui-Switch__indicator{background-color:var(--ctrl-token-Switch-1941, var(--semantic-token-Switch-1942, var(--colorNeutralBackgroundDisabled)));border-color:var(--ctrl-token-Switch-1943, var(--semantic-token-Switch-1944, var(--colorTransparentStrokeDisabled)));}"
|
|
112
112
|
],
|
|
113
113
|
s: [
|
|
114
|
-
"@media (forced-colors: active){.
|
|
115
|
-
"@media (forced-colors: active){.
|
|
114
|
+
"@media (forced-colors: active){.r18xcjlx:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r18xcjlx:disabled~.fui-Switch__label{color:GrayText;}.r18xcjlx:hover{color:CanvasText;}.r18xcjlx:hover:active{color:CanvasText;}.r18xcjlx:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r18xcjlx:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r18xcjlx:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}",
|
|
115
|
+
"@media (forced-colors: active){.r1x52umh:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r1x52umh:disabled~.fui-Switch__label{color:GrayText;}.r1x52umh:hover{color:CanvasText;}.r1x52umh:hover:active{color:CanvasText;}.r1x52umh:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r1x52umh:enabled:checked:hover:active~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r1x52umh:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"
|
|
116
116
|
]
|
|
117
117
|
});
|
|
118
118
|
const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -158,20 +158,20 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
158
158
|
B0ocmuz: "f1f5q0n8"
|
|
159
159
|
},
|
|
160
160
|
above: {
|
|
161
|
-
z8tnut: "
|
|
162
|
-
Byoj8tv: "
|
|
161
|
+
z8tnut: "foln0q0",
|
|
162
|
+
Byoj8tv: "ftc0vn4",
|
|
163
163
|
a9b677: "fly5x3f"
|
|
164
164
|
},
|
|
165
165
|
after: {
|
|
166
166
|
uwmqm3: [
|
|
167
|
-
"
|
|
168
|
-
"
|
|
167
|
+
"f1vrb2xw",
|
|
168
|
+
"f1amny7f"
|
|
169
169
|
]
|
|
170
170
|
},
|
|
171
171
|
before: {
|
|
172
172
|
z189sj: [
|
|
173
|
-
"
|
|
174
|
-
"
|
|
173
|
+
"fgle4fo",
|
|
174
|
+
"f1qw91m5"
|
|
175
175
|
]
|
|
176
176
|
}
|
|
177
177
|
}, {
|
|
@@ -185,11 +185,13 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
185
185
|
p: -1
|
|
186
186
|
}
|
|
187
187
|
],
|
|
188
|
-
".
|
|
189
|
-
".
|
|
188
|
+
".foln0q0{padding-top:var(--ctrl-token-Switch-1945, var(--semantic-token-Switch-1946, var(--spacingVerticalXS)));}",
|
|
189
|
+
".ftc0vn4{padding-bottom:var(--ctrl-token-Switch-1947, var(--semantic-token-Switch-1948, var(--spacingVerticalXS)));}",
|
|
190
190
|
".fly5x3f{width:100%;}",
|
|
191
|
-
".
|
|
192
|
-
".
|
|
191
|
+
".f1vrb2xw{padding-left:var(--ctrl-token-Switch-1949, var(--semantic-token-Switch-1950, var(--spacingHorizontalXS)));}",
|
|
192
|
+
".f1amny7f{padding-right:var(--ctrl-token-Switch-1949, var(--semantic-token-Switch-1950, var(--spacingHorizontalXS)));}",
|
|
193
|
+
".fgle4fo{padding-right:var(--ctrl-token-Switch-1951, var(--semantic-token-Switch-1952, var(--spacingHorizontalXS)));}",
|
|
194
|
+
".f1qw91m5{padding-left:var(--ctrl-token-Switch-1951, var(--semantic-token-Switch-1952, var(--spacingHorizontalXS)));}"
|
|
193
195
|
]
|
|
194
196
|
});
|
|
195
197
|
const useSwitchStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none'\n }\n },\n '> *': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n }\n },\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled\n }\n },\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled\n }\n },\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\n }\n },\n ':hover': {\n color: 'CanvasText'\n },\n ':hover:active': {\n color: 'CanvasText'\n },\n ':enabled:checked': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n }\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0\n },\n after: {\n left: 0,\n top: 0\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%'\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%'\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const { label, labelPosition } = state;\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"names":["switchClassName","switchClassNames","useSwitchStyles_unstable","root","indicator","input","label","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","__resetStyles","r","s","useRootStyles","__styles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: `var(--ctrl-token-Switch-1897, var(--semantic-token-Switch-1898, ${tokens.borderRadiusCircular}))`,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: `var(--ctrl-token-Switch-1899, var(--semantic-token-Switch-1900, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--ctrl-token-Switch-1901, var(--semantic-token-Switch-1902, ${tokens.curveEasyEase}))`,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none'\n }\n },\n '> *': {\n transitionDuration: `var(--ctrl-token-Switch-1903, var(--semantic-token-Switch-1904, ${tokens.durationNormal}))`,\n transitionTimingFunction: `var(--ctrl-token-Switch-1905, var(--semantic-token-Switch-1906, ${tokens.curveEasyEase}))`,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--ctrl-token-Switch-1907, var(--semantic-token-Switch-1908, ${tokens.colorNeutralForegroundDisabled}))`\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: `var(--ctrl-token-Switch-1909, var(--semantic-token-Switch-1910, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--ctrl-token-Switch-1911, var(--semantic-token-Switch-1912, ${tokens.colorNeutralStrokeAccessible}))`,\n borderColor: `var(--ctrl-token-Switch-1913, var(--semantic-token-Switch-1914, ${tokens.colorNeutralStrokeAccessible}))`\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: `var(--ctrl-token-Switch-1915, var(--semantic-token-Switch-1916, ${tokens.colorNeutralForeground1}))`\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--ctrl-token-Switch-1917, var(--semantic-token-Switch-1918, ${tokens.colorNeutralStrokeAccessibleHover}))`,\n borderColor: `var(--ctrl-token-Switch-1919, var(--semantic-token-Switch-1920, ${tokens.colorNeutralStrokeAccessibleHover}))`\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: `var(--ctrl-token-Switch-1921, var(--semantic-token-Switch-1922, ${tokens.colorNeutralStrokeAccessiblePressed}))`,\n borderColor: `var(--ctrl-token-Switch-1923, var(--semantic-token-Switch-1924, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n }\n },\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--ctrl-token-Switch-1925, var(--semantic-token-Switch-1926, ${tokens.colorCompoundBrandBackground}))`,\n color: `var(--ctrl-token-Switch-1927, var(--semantic-token-Switch-1928, ${tokens.colorNeutralForegroundInverted}))`,\n borderColor: `var(--ctrl-token-Switch-1929, var(--semantic-token-Switch-1930, ${tokens.colorTransparentStroke}))`\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--ctrl-token-Switch-1931, var(--semantic-token-Switch-1932, ${tokens.colorCompoundBrandBackgroundHover}))`,\n borderColor: `var(--ctrl-token-Switch-1933, var(--semantic-token-Switch-1934, ${tokens.colorTransparentStrokeInteractive}))`\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--ctrl-token-Switch-1935, var(--semantic-token-Switch-1936, ${tokens.colorCompoundBrandBackgroundPressed}))`,\n borderColor: `var(--ctrl-token-Switch-1937, var(--semantic-token-Switch-1938, ${tokens.colorTransparentStrokeInteractive}))`\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: `var(--ctrl-token-Switch-1939, var(--semantic-token-Switch-1940, ${tokens.colorNeutralStrokeDisabled}))`\n }\n },\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: `var(--ctrl-token-Switch-1941, var(--semantic-token-Switch-1942, ${tokens.colorNeutralBackgroundDisabled}))`,\n borderColor: `var(--ctrl-token-Switch-1943, var(--semantic-token-Switch-1944, ${tokens.colorTransparentStrokeDisabled}))`\n }\n },\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\n }\n },\n ':hover': {\n color: 'CanvasText'\n },\n ':hover:active': {\n color: 'CanvasText'\n },\n ':enabled:checked': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n }\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0\n },\n after: {\n left: 0,\n top: 0\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%'\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n },\n above: {\n paddingTop: `var(--ctrl-token-Switch-1945, var(--semantic-token-Switch-1946, ${tokens.spacingVerticalXS}))`,\n paddingBottom: `var(--ctrl-token-Switch-1947, var(--semantic-token-Switch-1948, ${tokens.spacingVerticalXS}))`,\n width: '100%'\n },\n after: {\n paddingLeft: `var(--ctrl-token-Switch-1949, var(--semantic-token-Switch-1950, ${tokens.spacingHorizontalXS}))`\n },\n before: {\n paddingRight: `var(--ctrl-token-Switch-1951, var(--semantic-token-Switch-1952, ${tokens.spacingHorizontalXS}))`\n }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const { label, labelPosition } = state;\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n"],"names":["switchClassName","switchClassNames","useSwitchStyles_unstable","root","indicator","input","label","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","__resetStyles","r","s","useRootStyles","__styles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240816-2133.1",
|
|
4
4
|
"description": "Fluent UI React Switch component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,20 +26,20 @@
|
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
29
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20240816-2133.1",
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20240816-2133.1",
|
|
31
31
|
"@fluentui/scripts-api-extractor": "*",
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-field": "0.0.0-nightly-20240816-2133.1",
|
|
36
36
|
"@fluentui/react-icons": "^2.0.245",
|
|
37
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
41
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
42
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
37
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20240816-2133.1",
|
|
38
|
+
"@fluentui/react-label": "0.0.0-nightly-20240816-2133.1",
|
|
39
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20240816-2133.1",
|
|
40
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20240816-2133.1",
|
|
41
|
+
"@fluentui/react-theme": "0.0.0-nightly-20240816-2133.1",
|
|
42
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240816-2133.1",
|
|
43
43
|
"@griffel/react": "^1.5.22",
|
|
44
44
|
"@swc/helpers": "^0.5.1"
|
|
45
45
|
},
|