@cap3/capitano-components
Version:
# <div style="color: crimson;">ALPHA DISCLAIMER</div>
58 lines • 2.68 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const capitano_theme_1 = require("@cap3/capitano-theme");
const tinycolor_1 = require("@ctrl/tinycolor");
const shadows_1 = require("../basics/shadows");
const effectColorStyle = (disabled, swapped, color, effect, custom) => {
return {
[`&:${effect}`]: Object.assign({ backgroundColor: disabled || swapped ? undefined : color, color: disabled || !swapped ? undefined : color, borderColor: disabled || !swapped ? undefined : color }, custom),
};
};
exports.focusEffect = ({ disabled = false, theme, baseColor, swapped, outline, }) => {
const base = new tinycolor_1.TinyColor(baseColor);
let background;
if (capitano_theme_1.isColorEffect(theme.statusEffects.focus)) {
background = base[theme.statusEffects.focus.effect](theme.statusEffects.focus.factor).toRgbString();
}
else {
background = base
.mix(theme.statusEffects.focus.second, theme.statusEffects.focus.factor)
.toRgbString();
}
return effectColorStyle(disabled, swapped, background, 'focus', outline
? {
backgroundColor: 'transparent',
}
: undefined);
};
exports.activeEffect = ({ disabled = false, theme, baseColor, swapped, outline, }) => {
const base = new tinycolor_1.TinyColor(baseColor);
let background;
if (capitano_theme_1.isColorEffect(theme.statusEffects.pressed)) {
background = base[theme.statusEffects.pressed.effect](theme.statusEffects.pressed.factor).toRgbString();
}
else {
background = base
.mix(theme.statusEffects.pressed.second, theme.statusEffects.pressed.factor)
.toRgbString();
}
return effectColorStyle(disabled, swapped, background, 'active', outline
? {
backgroundColor: 'transparent',
}
: undefined);
};
exports.hoverEffect = ({ disabled = false, theme, baseColor, swapped, outline, }) => {
const base = new tinycolor_1.TinyColor(baseColor);
let background;
if (capitano_theme_1.isColorEffect(theme.statusEffects.hover)) {
background = base[theme.statusEffects.hover.effect](theme.statusEffects.hover.factor).toRgbString();
}
else {
background = base
.mix(theme.statusEffects.hover.second, theme.statusEffects.hover.factor)
.toRgbString();
}
return effectColorStyle(disabled, swapped, background, 'hover', Object.assign({ boxShadow: disabled ? undefined : `${shadows_1.topShadow(0)}, ${shadows_1.bottomShadow(0)}` }, (outline ? { backgroundColor: 'transparent' } : undefined)));
};
//# sourceMappingURL=mouseEffects.js.map