coriolis-web/src/components/Theme.ts

/*
Copyright (C) 2021  Cloudbase Solutions SRL
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

import { css } from "styled-components";

const exactWidth = (width: string) => css`
  min-width: ${width};
  max-width: ${width};
`;

const exactHeight = (height: string) => css`
  min-height: ${height};
  max-height: ${height};
`;

export const ThemePalette = {
  primary: "#0044CB",
  primaryLight: "#000EA9",
  secondary: "#D9DCE3",
  secondaryLight: "#777A8B",
  black: "#202134",
  alert: "#F91661",
  success: "#4CD964",
  warning: "#FDC02F",
  grayscale: [
    "#D8DBE2", // 0
    "#ECEDF1", // 1
    "#C8CCD7", // 2
    "#A4AAB5", // 3
    "#616770", // 4
    "#7F8795", // 5
    "#1B2733", // 6
    "#F2F3F4", // 7
    "#858B93", // 8
  ],
};

export const ThemeProps = {
  fontWeights: {
    extraLight: 200,
    light: 300,
    regular: 400,
    medium: 500,
    bold: 600,
  },

  inputSizes: {
    regular: { width: 208, height: 32 },
    large: { width: 224, height: 32 },
    wizard: { width: 384 },
  },

  borderRadius: "4px",
  contentWidth: "928px",
  boxShadow: "box-shadow: rgba(0, 0, 0, 0.1) 0 0 6px 2px;",

  animations: {
    swift: ".45s cubic-bezier(0.3, 1, 0.4, 1) 0s",
    rotation: css`
      animation: rotate 2s infinite linear;
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    `,
    disabledLoading: css`
      animation: opacityToggle 750ms linear infinite alternate-reverse;
      @keyframes opacityToggle {
        0% {
          opacity: 1;
        }
        100% {
          opacity: 0.3;
        }
      }
    `,
  },

  mobileMaxWidth: 1350,

  exactWidth,
  exactHeight,
  exactSize: (size: string) => css`
    ${exactWidth(size)}
    ${exactHeight(size)}
  `,
};