revite/src/components/ui/Button.tsx

import styled, { css } from "styled-components";

interface Props {
    readonly contrast?: boolean;
    readonly error?: boolean;
};

export default styled.button<Props>`
	z-index: 1;
	padding: 8px;
	font-size: 16px;
	text-align: center;

	transition: 0.2s ease opacity;
	transition: 0.2s ease background-color;

	background: var(--primary-background);
    color: var(--foreground);

	border-radius: 6px;
	cursor: pointer;
    border: none;

	&:hover {
		background: var(--secondary-header);
	}

    &:disabled {
        background: var(--primary-background);
    }

    &:active {
        background: var(--secondary-background);
    }

    ${props => props.contrast && css`
        padding: 4px 8px;
        background: var(--secondary-header);

        &:hover {
            background: var(--primary-header);
        }

        &:disabled {
            background: var(--secondary-header);
        }

        &:active {
            background: var(--secondary-background);
        }
    `}

    ${props => props.error && css`
        color: white;
        background: var(--error);

        &:hover {
            filter: brightness(1.2)
        }

        &:disabled {
            background: var(--error);
        }
    `}
`;