@fluentui/react-northstar
Version:
A themable React component library.
61 lines (59 loc) • 3.41 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.checkboxVariables = void 0;
var _get2 = _interopRequireDefault(require("lodash/get"));
var _utils = require("../../../../utils");
var toggleMovementDistance = (0, _utils.pxToRem)(20);
var padding = (0, _utils.pxToRem)(2);
var defaultValue = 'red';
var checkboxVariables = function checkboxVariables(siteVars) {
return {
checkboxColor: 'transparent',
toggleBackground: 'transparent',
toggleBorderColor: siteVars.colors.grey[300],
toggleBorderStyle: "solid",
toggleBorderWidth: (0, _utils.pxToRem)(1),
toggleIndicatorColor: 'inherit',
checkboxCheckedColor: siteVars.colors.grey[500],
checkboxToggleCheckedBackground: 'transparent',
checkboxToggleCheckedBorderColor: siteVars.colors.grey[500],
checkboxToggleCheckedColor: 'inherit',
disabledColor: siteVars.colors.grey[300],
disabledCheckboxColor: siteVars.colors.grey[300],
disabledToggleBackground: 'transparent',
disabledToggleBorderColor: siteVars.colors.grey[200],
textColor: (0, _get2.default)(siteVars, 'colorScheme.default.foreground1', defaultValue),
background: 'transparent',
borderColor: (0, _get2.default)(siteVars, 'colorScheme.default.foreground1', defaultValue),
borderStyle: 'solid',
borderRadius: siteVars.borderRadiusSmall,
borderWidth: (0, _utils.pxToRem)(1),
indicatorColor: 'transparent',
gap: (0, _utils.pxToRem)(12),
margin: (0, _utils.pxToRem)(2.8) + " 0 0 0",
padding: padding,
rootPadding: '3px 5px',
textColorHover: (0, _get2.default)(siteVars, 'colorScheme.default.foreground', defaultValue),
borderColorHover: (0, _get2.default)(siteVars, 'colorScheme.default.foreground', defaultValue),
checkedBackgroundHover: (0, _get2.default)(siteVars, 'colorScheme.brand.backgroundHover', defaultValue),
toggleBorderRadius: (0, _utils.pxToRem)(999),
toggleIndicatorSize: (0, _utils.pxToRem)(14),
toggleMargin: '0',
togglePadding: padding + " " + toggleMovementDistance + " " + padding + " " + padding,
toggleWidth: (0, _utils.pxToRem)(38),
toggleHeight: (0, _utils.pxToRem)(20),
checkedTextColor: (0, _get2.default)(siteVars, 'colorScheme.default.foreground', defaultValue),
checkedBackground: (0, _get2.default)(siteVars, 'colorScheme.brand.backgroundActive1', defaultValue),
checkedBorderColor: (0, _get2.default)(siteVars, 'colorScheme.brand.backgroundActive1', defaultValue),
checkedIndicatorColor: (0, _get2.default)(siteVars, 'colorScheme.default.background', defaultValue),
toggleCheckedPadding: padding + " " + padding + " " + padding + " " + toggleMovementDistance,
disabledBackground: (0, _get2.default)(siteVars, 'colorScheme.default.background', defaultValue),
disabledBackgroundChecked: (0, _get2.default)(siteVars, 'colorScheme.default.backgroundDisabled', defaultValue),
disabledBorderColor: (0, _get2.default)(siteVars, 'colorScheme.default.foregroundDisabled1', defaultValue),
disabledCheckedIndicatorColor: (0, _get2.default)(siteVars, 'colorScheme.default.foregroundDisabled', defaultValue),
disabledToggleIndicatorColor: (0, _get2.default)(siteVars, 'colorScheme.default.foregroundDisabled', defaultValue)
};
};
exports.checkboxVariables = checkboxVariables;
//# sourceMappingURL=checkboxVariables.js.map