@devseed-ui/form/src/controlskin/index.js

devseed UI Kit Form

import { css } from 'styled-components';

import { themeVal, rgba, disabled } from '@devseed-ui/theme-provider';
import { shake } from '@devseed-ui/animation';

const fontSizeMatrix = {
  small: '0.875rem',
  medium: '1rem',
  large: '1rem',
  xlarge: '1rem'
};

const lineHeightMatrix = {
  small: '1.25rem',
  medium: '1.5rem',
  large: '1.5rem',
  xlarge: '1.5rem'
};

const heightMatrix = {
  small: '1.5rem',
  medium: '2rem',
  large: '2.5rem',
  xlarge: '3rem'
};

export const paddingMatrix = {
  small: '0.125rem 0.5rem',
  medium: '0.25rem 0.5rem',
  large: '0.5rem 0.75rem',
  xlarge: '0.75rem 1rem'
};

const createFormSkinStyles = ({ size = 'medium', invalid, stressed }) => css`
  appearance: none;
  display: flex;
  width: auto;
  height: ${heightMatrix[size]};
  padding: ${paddingMatrix[size]};
  border: ${themeVal('layout.border')} solid ${themeVal('color.base-200a')};
  border-radius: ${themeVal('shape.rounded')};
  background-color: ${themeVal('color.surface')};
  font-family: inherit;
  font-size: ${fontSizeMatrix[size]};
  line-height: ${lineHeightMatrix[size]};
  color: ${themeVal('type.base.color')};
  transition: all 0.24s ease 0s;

  &::placeholder {
    opacity: 0.64;
  }

  &[disabled] {
    ${disabled()}
  }

  &[readonly] {
    cursor: text;
    color: ${rgba(themeVal('type.base.color'), 0.64)};
  }

  &:hover {
    border-color: ${themeVal('color.base-300a')};
  }

  &:focus,
  &:active {
    outline: 0;
    border-color: ${themeVal('color.base-400a')};
  }

  ${() =>
    invalid &&
    css`
      border-color: ${themeVal('color.danger')};
      &:hover,
      &:focus,
      &:active {
        border-color: ${themeVal('color.danger')};
      }
    `}

  ${() =>
    stressed &&
    css`
      animation: ${shake} 0.5s linear;
    `}
`;

export default createFormSkinStyles;