Button.jsx

Button.jsx

import Button from 'app/components/Form/Button';

export default Button.extend`
    border-radius: 8rem;
    font-family: 'Fira Sans', sans-serif;
    font-size: 1rem;
    line-height: 1;
    text-transform: none;
    ${styleOnInfo}
    ${styleOnHighlight}
    ${styleOnLight}
`;

function styleOnInfo({ theme, info }) {
    return info && `
        background-color: #fff;
        border-color: ${theme.colors.main(40)};
        color: ${theme.colors.main(80)};
        font-size: 0.78rem;
        text-transform: uppercase;

        :active,
        :focus {
            color: #fff;
            background-color: ${theme.colors.main(60)};
        }
    `;
}

function styleOnHighlight({ theme, highlight }) {
    return highlight && `
        background-color: ${theme.colors.green()};
        font-size: 0.78rem;
        letter-spacing: 0.0225rem;
        text-transform: uppercase;

        :active,
        :focus {
            background-color: ${theme.colors.green(80)};
        }
    `;
}

function styleOnLight({ theme, light }) {
    return light && `
        background-color: #fff;
        color: ${theme.colors.black(60)};

        :active,
        :focus {
            background-color: ${theme.colors.black(10)};
        }
    `;
}

import Button from 'app/components/Form/Button';

export default Button.extend`
    border-radius: 8rem;
    font-family: 'Fira Sans', sans-serif;
    font-size: 1rem;
    line-height: 1;
    text-transform: none;
    ${styleOnInfo}
    ${styleOnHighlight}
    ${styleOnLight}
`;

function styleOnInfo({ theme, info }) {
    return info && `
        background-color: #fff;
        border-color: ${theme.colors.main(40)};
        color: ${theme.colors.main(80)};
        font-size: 0.78rem;
        text-transform: uppercase;

        :active,
        :focus {
            color: #fff;
            background-color: ${theme.colors.main(60)};
        }
    `;
}

function styleOnHighlight({ theme, highlight }) {
    return highlight && `
        background-color: ${theme.colors.green()};
        font-size: 0.78rem;
        letter-spacing: 0.0225rem;
        text-transform: uppercase;

        :active,
        :focus {
            background-color: ${theme.colors.green(80)};
        }
    `;
}

function styleOnLight({ theme, light }) {
    return light && `
        background-color: #fff;
        color: ${theme.colors.black(60)};

        :active,
        :focus {
            background-color: ${theme.colors.black(10)};
        }
    `;
}