@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
197 lines • 7.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
/* eslint-disable deprecation/deprecation */
var GlobalClassNames = {
root: 'ms-Toggle',
label: 'ms-Toggle-label',
container: 'ms-Toggle-innerContainer',
pill: 'ms-Toggle-background',
thumb: 'ms-Toggle-thumb',
text: 'ms-Toggle-stateText',
};
var toggleEnabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
pillBackground: semanticColors.bodyBackground,
pillBorderColor: semanticColors.smallInputBorder,
pillHoveredBorderColor: semanticColors.inputBorderHovered,
pillHighContrastBorderColor: 'Highlight',
pillHighContrastHoveredBorderColor: 'Highlight',
thumbBackground: semanticColors.inputBorderHovered,
};
};
var toggleDisabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
pillBackground: semanticColors.bodyBackground,
pillBorderColor: semanticColors.disabledBodySubtext,
thumbBackground: semanticColors.disabledBodySubtext,
textColor: semanticColors.disabledText,
textHighContrastColor: 'GrayText',
};
};
var toggleCheckedVariables = {
pillBorderColor: 'transparent',
pillJustifyContent: 'flex-end',
};
var toggleCheckedEnabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
pillBackground: semanticColors.inputBackgroundChecked,
pillHoveredBackground: semanticColors.inputBackgroundCheckedHovered,
pillHoveredBorderColor: 'transparent',
pillHighContrastBackground: 'WindowText',
pillHighContrastHoveredBackground: 'Highlight',
pillHighContrastHoveredBorderColor: 'transparent',
thumbBackground: semanticColors.inputForegroundChecked,
thumbHighContrastBackground: 'Window',
thumbHighContrastBorderColor: 'Window',
};
};
var toggleCheckedDisabledTokens = function (props, theme) {
var semanticColors = theme.semanticColors;
return {
pillBackground: semanticColors.disabledBodySubtext,
thumbBackground: semanticColors.disabledBackground,
};
};
/** @deprecated */
exports.ToggleTokens = function (props) { return [
props.checked && toggleCheckedVariables,
props.disabled && [toggleDisabledTokens, props.checked && toggleCheckedDisabledTokens],
!props.disabled && [toggleEnabledTokens, props.checked && toggleCheckedEnabledTokens],
]; };
/** @deprecated */
exports.ToggleStyles = function (props, theme, tokens) {
var _a, _b, _c, _d, _e, _f, _g;
var className = props.className, disabled = props.disabled, checked = props.checked;
var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
var textStyles = [
classNames.text,
{
selectors: {
// Workaround: make rules more sepecific than Label rules.
'&&': {
color: tokens.textColor,
padding: '0',
margin: '0 10px',
userSelect: 'none',
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
color: tokens.textHighContrastColor,
},
_a),
},
},
},
];
return {
root: [
classNames.root,
checked && 'is-checked',
!disabled && 'is-enabled',
disabled && 'is-disabled',
theme.fonts.medium,
{
marginBottom: '8px',
},
className,
],
label: [
classNames.label,
{
color: tokens.textColor,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
color: tokens.textHighContrastColor,
},
_b),
},
],
container: [
classNames.container,
{
display: 'inline-flex',
position: 'relative',
},
],
pill: [
classNames.pill,
Styling_1.getFocusStyle(theme, { inset: -3 }),
{
fontSize: '20px',
boxSizing: 'border-box',
width: '2.2em',
height: '1em',
borderRadius: '1em',
transition: 'all 0.1s ease',
borderWidth: '1px',
borderStyle: 'solid',
background: tokens.pillBackground,
borderColor: tokens.pillBorderColor,
justifyContent: tokens.pillJustifyContent,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
padding: '0 .2em',
selectors: (_c = {
':hover': [
{
backgroundColor: tokens.pillHoveredBackground,
borderColor: tokens.pillHoveredBorderColor,
selectors: (_d = {},
_d[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.pillHighContrastHoveredBackground,
},
_d),
},
],
':hover .ms-Toggle-thumb': [
{
selectors: (_e = {},
_e[Styling_1.HighContrastSelector] = {
borderColor: tokens.pillHighContrastHoveredBorderColor,
},
_e),
},
]
},
_c[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.pillHighContrastBackground,
},
_c['&:hover'] = {
selectors: (_f = {},
_f[Styling_1.HighContrastSelector] = {
borderColor: tokens.pillHighContrastBorderColor,
},
_f),
},
_c),
},
],
thumb: [
classNames.thumb,
{
width: '.5em',
height: '.5em',
borderRadius: '.5em',
transition: 'all 0.1s ease',
backgroundColor: tokens.thumbBackground,
/* Border is added to handle high contrast mode for Firefox */
borderColor: 'transparent',
borderWidth: '.28em',
borderStyle: 'solid',
boxSizing: 'border-box',
selectors: (_g = {},
_g[Styling_1.HighContrastSelector] = {
backgroundColor: tokens.thumbHighContrastBackground,
borderColor: tokens.thumbHighContrastBorderColor,
},
_g),
},
],
text: textStyles,
};
};
//# sourceMappingURL=Toggle.styles.js.map