Lago/power-apps-codeapps-blog-part2
Private
Public Access
1
0
Fork 0
Code Activity

feat: Fluent UI Outlook Lite + connections mockup

Browse Source
This commit is contained in:
Lago
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/ToggleButton.js generated vendored Normal file
View File

@@ -0,0 +1,25 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ToggleButton", {
enumerable: true,
get: function() {
return ToggleButton;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderToggleButton = require("./renderToggleButton");
const _useToggleButton = require("./useToggleButton");
const _useToggleButtonStylesstyles = require("./useToggleButtonStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ToggleButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useToggleButton.useToggleButton_unstable)(props, ref);
(0, _useToggleButtonStylesstyles.useToggleButtonStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToggleButtonStyles_unstable')(state);
return (0, _renderToggleButton.renderToggleButton_unstable)(state);
// Casting is required due to lack of distributive union to support unions on @types/react
});
ToggleButton.displayName = 'ToggleButton';

1
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/ToggleButton.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToggleButton_unstable(props, ref);\n\n useToggleButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);\n\n return renderToggleButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;oCACa,uBAAuB;iCAC1B,oBAAoB;6CACd,iCAAiC;qCAGpC,kCAAkC;AAKvE,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQP,yCAAAA,EAAyBK,OAAOC;QAE9CL,2DAAAA,EAA+BM;QAE/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOR,+CAAAA,EAA4BQ;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}

4
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/ToggleButton.types.js generated vendored Normal file
View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

1
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /**\n * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n\n /**\n * Defines whether the `ToggleButton` should use the alternate selected styles that have adequate contrast with the rest style\n *\n * @default false\n */\n isAccessible?: boolean;\n};\n\nexport type ToggleButtonBaseProps = ButtonBaseProps &\n Pick<ToggleButtonProps, 'defaultChecked' | 'checked' | 'isAccessible'>;\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;\n\nexport type ToggleButtonBaseState = ButtonBaseState & Required<Pick<ToggleButtonProps, 'checked' | 'isAccessible'>>;\n"],"names":[],"mappings":""}

34
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/index.js generated vendored Normal file
View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ToggleButton: function() {
return _ToggleButton.ToggleButton;
},
renderToggleButton_unstable: function() {
return _renderToggleButton.renderToggleButton_unstable;
},
toggleButtonClassNames: function() {
return _useToggleButtonStylesstyles.toggleButtonClassNames;
},
useToggleButtonBase_unstable: function() {
return _useToggleButton.useToggleButtonBase_unstable;
},
useToggleButtonStyles_unstable: function() {
return _useToggleButtonStylesstyles.useToggleButtonStyles_unstable;
},
useToggleButton_unstable: function() {
return _useToggleButton.useToggleButton_unstable;
}
});
const _ToggleButton = require("./ToggleButton");
const _renderToggleButton = require("./renderToggleButton");
const _useToggleButton = require("./useToggleButton");
const _useToggleButtonStylesstyles = require("./useToggleButtonStyles.styles");

1
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/index.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type {\n ToggleButtonBaseProps,\n ToggleButtonProps,\n ToggleButtonState,\n ToggleButtonBaseState,\n} from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable, useToggleButtonBase_unstable } from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAOZC,+CAA2B;;;eAE3BG,mDAAsB;;;eADID,6CAA4B;;;eAC9BE,2DAA8B;;;eADtDH,yCAAwB;;;8BARJ,iBAAiB;oCAOF,uBAAuB;iCACI,oBAAoB;6CACpB,iCAAiC"}

11
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/renderToggleButton.js generated vendored Normal file
View File

@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderToggleButton_unstable", {
enumerable: true,
get: function() {
return _renderButton.renderButton_unstable;
}
});
const _renderButton = require("../Button/renderButton");

1
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/renderToggleButton.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"names":["renderButton_unstable","renderToggleButton_unstable"],"mappings":";;;;+BAAkCC,2BAA2B;;;eAApDD,mCAAAA;;;8BAA4D,yBAAyB"}

33
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/useToggleButton.js generated vendored Normal file
View File

@@ -0,0 +1,33 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useToggleButtonBase_unstable: function() {
return useToggleButtonBase_unstable;
},
useToggleButton_unstable: function() {
return useToggleButton_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useToggleState = require("../../utils/useToggleState");
const _useButton = require("../Button/useButton");
const useToggleButton_unstable = (props, ref)=>{
const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;
const buttonState = (0, _useButton.useButton_unstable)(buttonProps, ref);
return (0, _useToggleState.useToggleState)(props, buttonState);
};
const useToggleButtonBase_unstable = (props, ref)=>{
const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;
const buttonState = (0, _useButton.useButtonBase_unstable)(buttonProps, ref);
return (0, _useToggleState.useToggleState)(props, buttonState);
};

1
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/useToggleButton.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable, useButtonBase_unstable } from '../Button/useButton';\nimport type { ToggleButtonBaseState, ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n const buttonState = useButton_unstable(buttonProps, ref);\n\n return useToggleState(props, buttonState);\n};\n\n/**\n * Base hook for ToggleButton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n props: ToggleButtonProps,\n ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n const { checked = false, defaultChecked = false, isAccessible = false, ...buttonProps } = props;\n const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"names":["React","useToggleState","useButton_unstable","useButtonBase_unstable","useToggleButton_unstable","props","ref","checked","defaultChecked","isAccessible","buttonProps","buttonState","useToggleButtonBase_unstable"],"mappings":"AAAA;;;;;;;;;;;;IA6BaY,4BAAAA;;;4BAhBAR;;;;;iEAXU,QAAQ;gCACA,6BAA6B;2BACD,sBAAsB;AAS1E,MAAMA,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,kBAAcT,6BAAAA,EAAmBQ,aAAaJ;IAEpD,WAAOL,8BAAAA,EAAeI,OAAOM;AAC/B,EAAE;AAQK,qCAAqC,CAC1CN,OACAC;IAEA,MAAM,EAAEC,UAAU,KAAK,EAAEC,iBAAiB,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGC,aAAa,GAAGL;IAC1F,MAAMM,kBAAcR,iCAAAA,EAAuBO,aAAaJ;IAExD,WAAOL,8BAAAA,EAAeI,OAAOM;AAC/B,EAAE"}

916
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js generated vendored Normal file
View File

@@ -0,0 +1,916 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
toggleButtonClassNames: function() {
return toggleButtonClassNames;
},
useToggleButtonStyles_unstable: function() {
return useToggleButtonStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
const toggleButtonClassNames = {
root: 'fui-ToggleButton',
icon: 'fui-ToggleButton__icon'
};
const useRootCheckedStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
De3pzq: "f1nfm20t",
g2u3we: "fj3muxo",
h3c5rm: [
"f1akhkt",
"f1lxtadh"
],
B9xav0g: "f1aperda",
zhjwy3: [
"f1lxtadh",
"f1akhkt"
],
sj55zd: "f14nttnl",
B4j52fo: "f192inf7",
Bekrc4i: [
"f5tn483",
"f1ojsxk5"
],
Bn0qgzm: "f1vxd6vx",
ibv6hh: [
"f1ojsxk5",
"f5tn483"
],
D0sxk3: "fxoiby5",
t6yez3: "f15q0o9g",
Jwef8y: "f1knas48",
Bgoe8wy: "fvcxoqz",
Bwzppfd: [
"f1ub3y4t",
"f1m52nbi"
],
oetu4i: "f1xlaoq0",
gg5e9n: [
"f1m52nbi",
"f1ub3y4t"
],
Bi91k9c: "feu1g3u",
Bpjbzib: "f128kf1x",
im15vp: "f1a38rnh",
Hjvxdg: [
"f1wvuwkr",
"fbu0tau"
],
Gpfmf1: "f132k7zb",
ustxxc: [
"fbu0tau",
"f1wvuwkr"
],
Brsut9c: "fggfoek"
},
highContrast: {
By8wz76: "f1nz3ub2",
Bcq6wej: "fjq791v",
Jcjdmf: [
"fkq2p2y",
"f1sehlss"
],
sc4o1m: "f11odvng",
Bosien3: [
"f1sehlss",
"fkq2p2y"
],
B7iucu3: "fqc85l4",
B8gzw0y: "f1h3a8gf",
Bbkh6qg: "fkiggi6",
F230oe: "f8gmj8i",
Bdw8ktp: [
"f1ap8nzx",
"fjag8bx"
],
Bj1xduy: "f1igan7k",
Bhh2cfd: [
"fjag8bx",
"f1ap8nzx"
],
Bahaeuw: "f1v3eptx",
Bv2bamp: "f1ysmecq",
vxuvv6: "faulsx",
Bli9q98: [
"f79t15f",
"f8qmx7k"
],
Bx2tt8t: "fbtzoaq",
yad0b3: [
"f8qmx7k",
"f79t15f"
],
j2fop7: "fd4bjan",
B6rz4yo: 0,
Buk7464: 0,
Bqg8rp8: 0,
pjr8j7: 0,
Bgs2klq: 0,
Hwei09: 0,
Bi9aqk7: 0,
Fihjvf: 0,
nhyz0p: 0,
Buw724y: 0,
Bn7qjfh: 0,
B0u7xl9: 0,
md97jv: 0,
h3ptyc: 0,
s1kvfj: 0,
kogrdj: 0,
dqx2i2: "fdmpsdn",
o0nolc: "fgjsukj"
},
outline: {
De3pzq: "f1q9pm1r",
g2u3we: "fj3muxo",
h3c5rm: [
"f1akhkt",
"f1lxtadh"
],
B9xav0g: "f1aperda",
zhjwy3: [
"f1lxtadh",
"f1akhkt"
],
B4j52fo: "fgx37oo",
Bekrc4i: [
"f130t4y6",
"f1efpmoh"
],
Bn0qgzm: "fv51ejd",
ibv6hh: [
"f1efpmoh",
"f130t4y6"
],
Jwef8y: "fjxutwb",
Bpjbzib: "fkoldzo",
B8q5s1w: "fcaw57c",
Bci5o5g: [
"fpwd27e",
"f1999bjr"
],
n8qw10: "f1hi52o4",
Bdrgwmp: [
"f1999bjr",
"fpwd27e"
]
},
primary: {
De3pzq: "f8w4g0q",
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
sj55zd: "f1phragk",
Jwef8y: "f15wkkf3",
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
Bi91k9c: "f1rq72xc",
Bpjbzib: "f1ksv2xa",
im15vp: "fhvnf4x",
Hjvxdg: [
"fb6swo4",
"f232fm2"
],
Gpfmf1: "f1klyf7k",
ustxxc: [
"f232fm2",
"fb6swo4"
],
Brsut9c: "f1d6mv4x"
},
secondary: {},
subtle: {
De3pzq: "fq5gl1p",
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
sj55zd: "f1eryozh",
Jwef8y: "f1t94bn6",
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
Bi91k9c: "fnwyq0v",
Bpjbzib: "f1q1yqic",
im15vp: "fhvnf4x",
Hjvxdg: [
"fb6swo4",
"f232fm2"
],
Gpfmf1: "f1klyf7k",
ustxxc: [
"f232fm2",
"fb6swo4"
],
Brsut9c: "fwga7ee"
},
transparent: {
De3pzq: "f1q9pm1r",
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
sj55zd: "f1qj7y59",
Jwef8y: "fjxutwb",
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
Bi91k9c: "f139oj5f",
Bpjbzib: "fkoldzo",
im15vp: "fhvnf4x",
Hjvxdg: [
"fb6swo4",
"f232fm2"
],
Gpfmf1: "f1klyf7k",
ustxxc: [
"f232fm2",
"fb6swo4"
],
Brsut9c: "f1l983o9"
}
}, {
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);}"
],
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);}"
],
m: [
[
"@media (forced-colors: active){.f1nz3ub2{background-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fjq791v{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1sehlss{border-left-color:Highlight;}.fkq2p2y{border-right-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f11odvng{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fqc85l4{color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1h3a8gf{forced-color-adjust:none;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fkiggi6:hover{background-color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f8gmj8i:hover{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1ap8nzx:hover{border-right-color:Highlight;}.fjag8bx:hover{border-left-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1igan7k:hover{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1v3eptx:hover{color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1ysmecq:hover:active,.f1ysmecq:active:focus-visible{background-color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.faulsx:hover:active,.faulsx:active:focus-visible{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@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;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fbtzoaq:hover:active,.fbtzoaq:active:focus-visible{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fd4bjan:hover:active,.fd4bjan:active:focus-visible{color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fdmpsdn:focus{border:1px solid HighlightText;}}",
{
p: -2,
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fgjsukj:focus{outline-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useCheckedAccessibleStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
De3pzq: "ffp7eso",
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
sj55zd: "f1phragk",
Jwef8y: "f15wkkf3",
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
Bi91k9c: "f1rq72xc",
Bpjbzib: "f1ksv2xa",
im15vp: "fhvnf4x",
Hjvxdg: [
"fb6swo4",
"f232fm2"
],
Gpfmf1: "f1klyf7k",
ustxxc: [
"f232fm2",
"fb6swo4"
],
Brsut9c: "f1d6mv4x"
},
outline: {
B4j52fo: "f192inf7",
Bekrc4i: [
"f5tn483",
"f1ojsxk5"
],
Bn0qgzm: "f1vxd6vx",
ibv6hh: [
"f1ojsxk5",
"f5tn483"
]
},
primary: {
Bw0xxkn: 0,
oeaueh: 0,
Bpd4iqm: 0,
Befb4lg: "f12rpxh0",
Dhobit: "f10okvgz",
Bfpq7zp: 0,
g9k6zt: 0,
Bn4voq9: 0,
giviqs: "f40way",
Bpkdmpa: "ftbw7yw"
},
subtle: {
ysa4qo: "f17xzaca"
},
transparent: {},
secondary: {}
}, {
d: [
".ffp7eso{background-color:var(--colorBrandBackground);}",
".f1p3nwhy{border-top-color:transparent;}",
".f11589ue{border-right-color:transparent;}",
".f1pdflbu{border-left-color:transparent;}",
".f1q5o8ev{border-bottom-color:transparent;}",
".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
".f192inf7{border-top-width:var(--strokeWidthThin);}",
".f5tn483{border-right-width:var(--strokeWidthThin);}",
".f1ojsxk5{border-left-width:var(--strokeWidthThin);}",
".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}",
[
".f12rpxh0{outline:var(--strokeWidthThin) solid var(--colorNeutralForegroundOnBrand);}",
{
p: -1
}
],
".f10okvgz{outline-offset:calc(var(--strokeWidthThicker) * -1);}",
[
".f40way[data-fui-focus-visible]{outline:var(--strokeWidthThin) solid var(--colorNeutralForegroundOnBrand);}",
{
p: -1
}
],
".ftbw7yw[data-fui-focus-visible]{outline-offset:calc(var(--strokeWidthThickest) * -1);}"
],
h: [
".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);}",
".f17xzaca:hover .fui-ToggleButton__icon{color:var(--colorNeutralForegroundOnBrand);}"
]
});
const useRootDisabledStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
De3pzq: "f1bg9a2p",
g2u3we: "f1jj8ep1",
h3c5rm: [
"f15xbau",
"fy0fskl"
],
B9xav0g: "f4ikngz",
zhjwy3: [
"fy0fskl",
"f15xbau"
],
sj55zd: "f1s2aq7o",
Jwef8y: "f1falr9n",
Bgoe8wy: "f12mpcsy",
Bwzppfd: [
"f1gwvigk",
"f18rmfxp"
],
oetu4i: "f1jnshp0",
gg5e9n: [
"f18rmfxp",
"f1gwvigk"
],
Bi91k9c: "fvgxktp",
Bpjbzib: "f1jct5ie",
im15vp: "f13txml0",
Hjvxdg: [
"f1ncddno",
"f1axfvow"
],
Gpfmf1: "f1z04ada",
ustxxc: [
"f1axfvow",
"f1ncddno"
],
Brsut9c: "f1uhomfy"
},
outline: {},
primary: {
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
im15vp: "fhvnf4x",
Hjvxdg: [
"fb6swo4",
"f232fm2"
],
Gpfmf1: "f1klyf7k",
ustxxc: [
"f232fm2",
"fb6swo4"
]
},
secondary: {},
subtle: {
De3pzq: "f1c21dwh",
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
Jwef8y: "fjxutwb",
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
Bpjbzib: "fkoldzo",
im15vp: "fhvnf4x",
Hjvxdg: [
"fb6swo4",
"f232fm2"
],
Gpfmf1: "f1klyf7k",
ustxxc: [
"f232fm2",
"fb6swo4"
]
},
transparent: {
De3pzq: "f1c21dwh",
g2u3we: "f1p3nwhy",
h3c5rm: [
"f11589ue",
"f1pdflbu"
],
B9xav0g: "f1q5o8ev",
zhjwy3: [
"f1pdflbu",
"f11589ue"
],
Jwef8y: "fjxutwb",
Bgoe8wy: "f1s2uweq",
Bwzppfd: [
"fr80ssc",
"fecsdlb"
],
oetu4i: "f1ukrpxl",
gg5e9n: [
"fecsdlb",
"fr80ssc"
],
Bpjbzib: "fkoldzo",
im15vp: "fhvnf4x",
Hjvxdg: [
"fb6swo4",
"f232fm2"
],
Gpfmf1: "f1klyf7k",
ustxxc: [
"f232fm2",
"fb6swo4"
]
}
}, {
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);}"
],
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);}"
]
});
const useIconCheckedStyles = /*#__PURE__*/ (0, _react.__styles)({
subtleOrTransparent: {
sj55zd: "f1qj7y59"
},
highContrast: {
B8gzw0y: "f1dd5bof"
}
}, {
d: [
".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"
],
m: [
[
"@media (forced-colors: active){.f1dd5bof{forced-color-adjust:auto;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const usePrimaryHighContrastStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
By8wz76: "f14ptb23",
Bcq6wej: "fd7znuh",
Jcjdmf: [
"f1wh4a04",
"f15h7fac"
],
sc4o1m: "f1f064oi",
Bosien3: [
"f15h7fac",
"f1wh4a04"
],
B7iucu3: "f3ggph1",
B8gzw0y: "f1dd5bof"
},
disabled: {
Bcq6wej: "f9dbb4x",
Jcjdmf: [
"f3qs60o",
"f5u9ap2"
],
sc4o1m: "fwd1oij",
Bosien3: [
"f5u9ap2",
"f3qs60o"
],
B7iucu3: "f1cyfu5x",
h3ptyc: "f19etb0b",
Buw724y: [
"f4f984j",
"fw441p0"
],
Buk7464: "f3d22hf",
Hwei09: [
"fw441p0",
"f4f984j"
]
}
}, {
m: [
[
"@media (forced-colors: active){.f14ptb23{background-color:ButtonFace;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fd7znuh{border-top-color:ButtonBorder;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f15h7fac{border-left-color:ButtonBorder;}.f1wh4a04{border-right-color:ButtonBorder;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1f064oi{border-bottom-color:ButtonBorder;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f3ggph1{color:ButtonText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1dd5bof{forced-color-adjust:auto;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f9dbb4x{border-top-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f3qs60o{border-right-color:GrayText;}.f5u9ap2{border-left-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fwd1oij{border-bottom-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f19etb0b:focus{border-top-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f4f984j:focus{border-right-color:GrayText;}.fw441p0:focus{border-left-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f3d22hf:focus{border-bottom-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useToggleButtonStyles_unstable = (state)=>{
'use no memo';
const rootCheckedStyles = useRootCheckedStyles();
const accessibleCheckedStyles = useCheckedAccessibleStyles();
const rootDisabledStyles = useRootDisabledStyles();
const iconCheckedStyles = useIconCheckedStyles();
const primaryHighContrastStyles = usePrimaryHighContrastStyles();
const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;
state.root.className = (0, _react.mergeClasses)(toggleButtonClassNames.root, // Primary high contrast styles
appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles
checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles
isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], // Disabled styles
(disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name
state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
}
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
return state;
};

1
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js.map generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

282
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js generated vendored Normal file
View File

@@ -0,0 +1,282 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
toggleButtonClassNames: function() {
return toggleButtonClassNames;
},
useToggleButtonStyles_unstable: function() {
return useToggleButtonStyles_unstable;
}
});
const _reacticons = require("@fluentui/react-icons");
const _reacttabster = require("@fluentui/react-tabster");
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
const toggleButtonClassNames = {
root: 'fui-ToggleButton',
icon: 'fui-ToggleButton__icon'
};
const useRootCheckedStyles = (0, _react.makeStyles)({
// Base styles
base: {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1),
color: _reacttheme.tokens.colorNeutralForeground1Selected,
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin),
[`& .${_reacticons.iconFilledClassName}`]: {
display: 'inline'
},
[`& .${_reacticons.iconRegularClassName}`]: {
display: 'none'
},
':hover': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
color: _reacttheme.tokens.colorNeutralForeground1Hover
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
color: _reacttheme.tokens.colorNeutralForeground1Pressed
}
},
// High contrast styles
highContrast: {
'@media (forced-colors: active)': {
backgroundColor: 'Highlight',
..._react.shorthands.borderColor('Highlight'),
color: 'HighlightText',
forcedColorAdjust: 'none',
':hover': {
backgroundColor: 'HighlightText',
..._react.shorthands.borderColor('Highlight'),
color: 'Highlight'
},
':hover:active,:active:focus-visible': {
backgroundColor: 'HighlightText',
..._react.shorthands.borderColor('Highlight'),
color: 'Highlight'
},
':focus': {
border: '1px solid HighlightText',
outlineColor: 'Highlight'
}
}
},
// Appearance variations
outline: {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1),
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThicker),
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed
},
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1)
})
},
primary: {
backgroundColor: _reacttheme.tokens.colorBrandBackgroundSelected,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
':hover': {
backgroundColor: _reacttheme.tokens.colorBrandBackgroundHover,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorBrandBackgroundPressed,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
}
},
secondary: {},
subtle: {
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2Selected,
':hover': {
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2Hover
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2Pressed
}
},
transparent: {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected,
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2BrandHover
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForeground2BrandPressed
}
}
});
const useCheckedAccessibleStyles = (0, _react.makeStyles)({
// Base styles
base: {
backgroundColor: _reacttheme.tokens.colorBrandBackground,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
':hover': {
backgroundColor: _reacttheme.tokens.colorBrandBackgroundHover,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorBrandBackgroundPressed,
..._react.shorthands.borderColor('transparent'),
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
}
},
// Appearance variations
outline: {
// There's no longer a reason to thicken the outline variant's border
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin)
},
primary: {
// primary has an inner stroke for the checked style
outline: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForegroundOnBrand}`,
outlineOffset: `calc(${_reacttheme.tokens.strokeWidthThicker} * -1)`,
// need to not have the default focus style that removes the outline
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
outline: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForegroundOnBrand}`,
outlineOffset: `calc(${_reacttheme.tokens.strokeWidthThickest} * -1)`
})
},
subtle: {
// override subtle-appearance-specific icon color on hover
':hover': {
[`& .${toggleButtonClassNames.icon}`]: {
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
}
}
},
transparent: {},
secondary: {}
});
const useRootDisabledStyles = (0, _react.makeStyles)({
// Base styles
base: {
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
':hover': {
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
color: _reacttheme.tokens.colorNeutralForegroundDisabled
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
color: _reacttheme.tokens.colorNeutralForegroundDisabled
}
},
// Appearance variations
outline: {},
primary: {
..._react.shorthands.borderColor('transparent'),
':hover': {
..._react.shorthands.borderColor('transparent')
},
':hover:active,:active:focus-visible': {
..._react.shorthands.borderColor('transparent')
}
},
secondary: {},
subtle: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor('transparent'),
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
..._react.shorthands.borderColor('transparent')
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
..._react.shorthands.borderColor('transparent')
}
},
transparent: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor('transparent'),
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
..._react.shorthands.borderColor('transparent')
},
':hover:active,:active:focus-visible': {
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
..._react.shorthands.borderColor('transparent')
}
}
});
const useIconCheckedStyles = (0, _react.makeStyles)({
// Appearance variations with isAccessible=false
subtleOrTransparent: {
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
},
// High contrast styles
highContrast: {
'@media (forced-colors: active)': {
forcedColorAdjust: 'auto'
}
}
});
const usePrimaryHighContrastStyles = (0, _react.makeStyles)({
// Do not use primary variant high contrast styles for toggle buttons
// otherwise there isn't enough difference between on/off states
base: {
'@media (forced-colors: active)': {
backgroundColor: 'ButtonFace',
..._react.shorthands.borderColor('ButtonBorder'),
color: 'ButtonText',
forcedColorAdjust: 'auto'
}
},
disabled: {
'@media (forced-colors: active)': {
..._react.shorthands.borderColor('GrayText'),
color: 'GrayText',
':focus': {
..._react.shorthands.borderColor('GrayText')
}
}
}
});
const useToggleButtonStyles_unstable = (state)=>{
'use no memo';
const rootCheckedStyles = useRootCheckedStyles();
const accessibleCheckedStyles = useCheckedAccessibleStyles();
const rootDisabledStyles = useRootDisabledStyles();
const iconCheckedStyles = useIconCheckedStyles();
const primaryHighContrastStyles = usePrimaryHighContrastStyles();
const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;
state.root.className = (0, _react.mergeClasses)(toggleButtonClassNames.root, appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
}
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
return state;
};

1
node_modules/@fluentui/react-button/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map generated vendored Normal file
View File

File diff suppressed because one or more lines are too long