Styling at dialo

Buttons.tsx

import * as React from "react";
import { css } from "styled-components";
import { Color, Text, Elevation } from "./Styles";
import { size, spacing, opacity } from "./BaseUnit";
import { keyframes } from "styled-components";

const fadeIn = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
`;
export type Props = {
  text: string;
  onClick?: () => void;
  loading?: boolean;
};

const styles = css`
  padding: ${spacing(2)};
  ${Elevation.button};
  border-radius: ${size(1)};
  ${Text.button};
  text-align: center;
`;

export const PrimaryButton = ({ onClick, text, loading }: Props) => {
  const disabled = !onClick || loading;
  return (
    <button
      onClick={onClick ? (_) => onClick() : undefined}
      css={`
        ${styles};
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: ${disabled ? opacity(10) : 1};
        pointer-events: ${disabled ? "none" : "auto"};
        background: ${Color.fill.primary};
        border: 1px solid ${Color.fill.primaryAccent};
        color: ${Color.text.tertiary};
        &:hover,
        &active {
          background: ${Color.fill.primaryAccent};
        }
      `}
    >
      {loading && (
        <div
          css={`
            width: 16px;
            height: 16px;
            border-radius: 8px;
            border: 2px dotted white;
            animation: ${fadeIn} 1s infinite;
          `}
        ></div>
      )}
      {!loading && text}
    </button>
  );
};

Styles.tsx

import { css } from "styled-components";
import { text, leading, size } from "./BaseUnit";

export const flex = css`
  display: flex;
`;

export const flexRow = css`
  ${flex}
  flex-direction: row;
`;

export const flexCol = css`
  ${flex}
  flex-direction: column;
`;

export const Color = {
  fill: {
    primary: "#2966E0",
    primaryAccent: "#1552CC",
  },
  text: {
    primary: "#4B4B4E",
    secondary: "#737476",
    placeholder: "#A0A1A4",
    tertiary: "#FFFFFF",
  },
  background: {
    primary: "#E6E7EC",
    primaryAccent: "#F0F1F6",
    secondary: "#F0F1F6",
    secondaryAccent: "#E6E7EC",
    tertiary: "#FFFFFF",
    tertiaryAccent: "#F0F1F6",
  },
  border: {
    fill: "#1552CC",
    text: "#737476",
    background: "#D9DADF",
  },
  context: {
    clickable: "#2966E0",
    warning: "#EB5757",
    action: "#F4A649",
    success: "#19954E",
  },
  expression: {
    variable: "#E0F4FF",
    variableAccent: "#D9F0F9",
    conjunctor: "#90DBFC",
    conjunctorAccent: "#7CC7E8",
    comparator: "#FFEFD0",
    comparatorAccent: "#F5E5C6",
    specified: "#C3FCD0",
    specifiedAcctent: "#AFE8BC",
    unspecified: "#F5CBCE",
    unspecifiedAccent: "#F9BCBF",
    placeholder: "#95B3F0",
    arithmetic: "#CFF2FA",
    arithmeticAccent: "#BBDEE6",
    brackets: "#D2A0DA",
    bracketsAccent: "#C492CC",
  },
};

export const Elevation = {
  button: css`
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
  `,
  card: css`
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16), 0px 2px 8px rgba(0, 0, 0, 0.04),
      0px 3px 16px rgba(0, 0, 0, 0.04);
  `,
  modal: css`
    box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.08),
      0px 2px 16px rgba(0, 0, 0, 0.08);
  `,
};

export const FontFamily = {
  mono: css`
    font-family: monospace;
  `,
  sans: css`
    font-family: "Open Sans", sans-serif;
  `,
};

export const Text = {
  mono: css`
    ${FontFamily.mono};
    font-size: ${text(7)};
    line-height: ${leading(6)};
  `,
  body: css`
    ${FontFamily.sans};
    font-size: ${text(7)};
    line-height: ${leading(6)};
  `,
  bodyBold: css`
    ${FontFamily.sans};
    font-weight: bold;
    font-size: ${text(7)};
    line-height: ${leading(6)};
  `,
  bodySmall: css`
    ${FontFamily.sans};
    font-size: ${text(6)};
    line-height: ${leading(5)};
  `,
  button: css`
    ${FontFamily.sans};
    font-size: ${text(7)};
    line-height: ${leading(6)};
  `,
  tag: css`
    ${FontFamily.sans};
    font-weight: 600;
    font-size: ${text(5)};
    line-height: ${leading(5)};
    letter-spacing: 0.02em;
    text-transform: uppercase;
  `,
  expression: css`
    ${FontFamily.mono};
    font-size: ${text(7)};
    line-height: ${leading(5)};
  `,
  input: css`
    ${FontFamily.sans};
    font-size: ${text(7)};
    line-height: ${leading(4)};
  `,
  select: css`
    ${FontFamily.sans};
    font-size: ${text(7)};
    line-height: ${leading(6)};
  `,
  subtitle: css`
    ${FontFamily.sans};
    font-size: ${text(8)};
    line-height: ${leading(6)};
    font-weight: 600;
  `,
  title: css`
    ${FontFamily.sans}
    font-weight: 600;
    font-size: ${text(9)};
    line-height: ${leading(7)};
  `,
  token: css`
    ${FontFamily.sans}
    font-weight: 600;
    font-size: ${text(6)};
    line-height: ${leading(5)};
  `,
  headline: css`
    ${FontFamily.sans};
    font-weight: 600;
    font-size: ${text(11)};
    line-height: ${leading(8)};
  `,
  caption: css`
    ${FontFamily.sans};
    font-size: ${text(6)};
    line-height: ${leading(5)};
  `,
  sectionHeader: css`
    ${FontFamily.sans};
    font-size: ${text(6)};
    line-height: ${leading(5)};
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
  `,
};

export const Card = css`
  ${Elevation.card}
  border-radius: ${size(1)};
  background-color: ${Color.background.tertiary};
`;