@dnanpm/styleguide/build/cjs/components/ButtonSecondary/ButtonSecondary.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var Button = require('../Button/Button.js');

/* eslint-disable transient-props/transient-props */
/** @visibleName Button Secondary */
const ButtonSecondary = styledComponents.styled(Button.default) `
    color: ${theme.default.color.text.plum};
    background-color: ${theme.default.color.background.sand.E02};
    border: 2px solid ${theme.default.color.line.L02};

    &:focus {
        color: ${theme.default.color.text.plum};
        background-color: ${theme.default.color.background.sand.E02};
    }

    &:hover {
        color: ${theme.default.color.text.plum};
        background-color: ${Button.shade.sand.E02.darker};
        border: 2px solid ${Button.shade.sand.E02.darker};
    }

    &:active {
        color: ${theme.default.color.text.plum};
        background-color: ${Button.shade.sand.E02.lighter};
        border: 2px solid ${Button.shade.sand.E02.lighter};
    }

    &:disabled,
    &[disabled] {
        background-color: ${theme.default.color.background.sand.E02 + theme.default.color.transparency.T30};
        border: 2px solid ${theme.default.color.line.L02 + theme.default.color.transparency.T30};
        background-clip: padding-box;
    }

    ${({ loading }) => loading &&
    `
        &:focus {
            border-color: ${theme.default.color.line.L02};
            outline: none;
        }

        > * > * {
            background-color: ${theme.default.color.default.plum};
        }
    `}
`;

exports.default = ButtonSecondary;