@naturacosmeticos/natds-react/dist/components/Select/Select.styles.js

A collection of components from Natura Design System for React

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var react_jss_1 = require("react-jss");
var ThemeProvider_1 = require("../../ThemeProvider");
var getBorderColor = function (theme) { return function (_a) {
    var isFilled = _a.isFilled, feedback = _a.feedback, isDisabled = _a.isDisabled;
    if (isDisabled)
        return theme.color.lowEmphasis;
    if (isFilled)
        return theme.color.highEmphasis;
    if (feedback === 'error')
        return theme.color.alert;
    if (feedback === 'success')
        return theme.color.success;
    return theme.color.lowEmphasis;
}; };
var getLabelColor = function (theme) { return function (_a) {
    var feedback = _a.feedback, isDisabled = _a.isDisabled;
    if (isDisabled)
        return theme.color.lowEmphasis;
    if (feedback === 'error')
        return theme.color.alert;
    if (feedback === 'success')
        return theme.color.success;
    return theme.color.mediumEmphasis;
}; };
var getThemeFocus = function (theme) { return function (_a) {
    var brand = _a.brand;
    var themeSelectFocus = brand ? (0, ThemeProvider_1.buildTheme)(brand, 'light') : theme;
    return themeSelectFocus.color.primary;
}; };
var styles = (0, react_jss_1.createUseStyles)(function (theme) { return ({
    wrapper: {
        display: 'flex',
        flexDirection: 'column',
        fontFamily: theme.select.label.primary.fontFamily
    },
    labelText: {
        color: getLabelColor(theme),
        fontSize: theme.select.label.fontSize,
        fontWeight: theme.select.label.primary.fontWeight,
        letterSpacing: theme.select.label.letterSpacing,
        lineHeight: theme.select.label.lineHeight,
        marginBottom: theme.spacing.micro,
        '&:disabled': {
            color: 'blue'
        }
    },
    inputWrapper: {
        position: 'relative'
    },
    input: {
        width: '100%',
        height: function (_a) {
            var size = _a.size;
            return theme.size[size];
        },
        position: 'relative',
        backgroundColor: theme.color.surface,
        border: '1px solid',
        borderColor: getBorderColor(theme),
        borderRadius: theme.select.borderRadius,
        padding: "0 ".concat(theme.spacing.small, "px"),
        color: function (_a) {
            var isFilled = _a.isFilled;
            return (isFilled ? theme.color.highEmphasis : theme.color.mediumEmphasis);
        },
        fontSize: theme.body1.fontSize,
        fontWeight: theme.select.content.primary.fontWeight,
        letterSpacing: theme.select.content.letterSpacing,
        lineHeight: theme.select.content.lineHeight,
        appearance: 'none',
        outline: 'none',
        boxSizing: 'border-box',
        '&:focus:enabled': {
            borderColor: getThemeFocus(theme),
            color: theme.color.mediumEmphasis
        },
        '&:hover:enabled': {
            borderColor: theme.color.highEmphasis,
            color: theme.color.highEmphasis
        }
    },
    icon: {
        color: function (_a) {
            var isDisabled = _a.isDisabled;
            return (isDisabled ? theme.color.lowEmphasis : 'inherit');
        },
        position: 'absolute',
        top: 0,
        right: theme.spacing.small,
        height: '100%',
        display: 'flex',
        alignItems: 'center'
    }
}); });
exports.default = styles;
//# sourceMappingURL=Select.styles.js.map