@sinchsmb/ui-kit/src/form/StyledInput.ts

UI kit for SinchSMB frontend

import { AriaAttributes } from 'react';
import { css } from 'styled-components/macro';

import { color, radius, shadow } from '../theme';

export const commonInputBaseStyles = css`
  background-color: ${color('sys/color/input/background/default')};
  border-radius: ${radius('sys/radius/form-item')};
  box-sizing: border-box;
  color: ${color('sys/color/text/primary')};
  font-size: 14px;
  height: 36px;
  outline: none;
  padding: 6px 8px;
  text-overflow: ellipsis;
  width: 100%;

  &::placeholder {
    color: ${color('sys/color/text/disabled')};
  }

  &:disabled {
    background-color: ${color('sys/color/input/background/disabled')};
    color: ${color('sys/color/text/disabled')};
    cursor: not-allowed;
  }
`;

/**
 * **IMPORTANT**: Pay attention that some components has their onw styled separated from this.
 * Don't forget to fix it to on any this changes.
 *
 * @see inputBorderContainerStyles
 */
export const commonInputStyles = css`
  @mixin ${commonInputBaseStyles};

  border: 1px solid ${color('sys/color/input/border/default')};
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;

  &[aria-invalid='true'] {
    border-color: ${color('sys/color/input/border/invalid')};
  }

  &:hover:not(&:disabled) {
    border: 1px solid ${color('sys/color/input/border/focus')};
  }

  &:focus:not(&:disabled) {
    border: 1px solid ${color('sys/color/input/border/focus')};
    box-shadow: ${shadow('sys/shadow/focus')};
  }
`;

/* Styles for wrapper of {@link TextField} and {@link TextArea} */
export const inputBorderContainerStyles = (props: {
  $invalid?: AriaAttributes['aria-invalid'];
  $disabled?: boolean;
}) => {
  return css`
    background-color: ${() => {
      if (props.$disabled) {
        return color('sys/color/input/background/disabled');
      }
      return color('sys/color/input/background/default');
    }};

    border: 1px solid ${color('sys/color/input/border/default')};

    border-color: ${() => {
      if (props.$invalid) {
        return color('sys/color/input/border/invalid');
      }
      if (props.$disabled) {
        return color('sys/color/input/border/disabled');
      }
      return color('sys/color/input/border/default');
    }};

    border-radius: ${radius('sys/radius/form-item')};

    &:focus-within {
      box-shadow: ${shadow('sys/shadow/focus')};
      border-color: ${color('sys/color/input/border/focus')};
    }

    &:hover {
      border-color: ${() => {
        if (props.$disabled) {
          return undefined;
        }
        return color('sys/color/input/border/focus');
      }};
    }
  `;
};