import { vars } from '../vars.css';
import { ColorsContract } from './colors.contract';

/**
 * Color palette.
 *
 * Syntax for semantic colors:
 * - `<name>-text-strong`   - main text color for the base
 * - `<name>-text-weak`     - [optional] secondary (faint/weak) color for the base
 * - `<name>-text-subtle`   - [optional] subtle color for the base. It's less
 *                            visible than `<name>-text-weak`
 * - `<name>-up`            - [optional] color which is above the base
 * - `<name>`               - base color
 * - `<name>-down`          - [optional] color which is under the base
 */
export const colors: ColorsContract = {
  white: '#FFFFFF',
  black: '#373945',

  gray300: '#F9FAFE',
  gray400: '#EAECF1',
  gray500: '#D3D6DE',
  gray600: '#A2A4B4',
  gray700: '#5F6272',

  red200: '#F9DEDD',
  red300: '#F28E8A',
  red400: '#EF4242',
  red500: '#DA231B',
  red600: '#BD1E17',

  // Base
  'base-text-strong': vars.colors['black'],
  'base-text-weak': vars.colors['gray700'],
  'base-text-subtle': vars.colors['gray600'],
  'base-up': vars.colors['gray400'],
  base: vars.colors['white'],
  'base-down': vars.colors['gray300'],

  // Neutral
  'neutral-text-strong': vars.colors['gray700'],
  neutral: vars.colors['gray300'],

  // Primary
  'primary-text-strong': vars.colors['white'],
  'primary-up': vars.colors['red600'],
  primary: vars.colors['red500'],
  'primary-down': vars.colors['red400'],

  // Secondary
  'secondary-text-strong': vars.colors['base'],
  secondary: vars.colors['base-text-strong'],
  'secondary-down': vars.colors['gray700'],

  // Error
  'error-text-strong': vars.colors['white'],
  'error-up': vars.colors['red600'],
  error: vars.colors['red500'],
  'error-down': vars.colors['red400'],

  // Overlay
  overlay: 'rgba(33, 33, 33, 0.6)',

  // Placeholder
  placeholder: vars.colors['base-text-subtle'],
};