import { Props } from '../types/props'

/**
 * The following variables are the core design variables for the entire design system
 *
 * When updating this file, ALWAYS update common/sass/variables.scss at the same time.
 * Note that only flat values should be exported from this file: maps and objects
 * cannot be exported from sass, and so cannot be kept the same between both files.
 */

// tslint:disable-next-line:no-namespace
namespace Variables {
  export enum Breakpoint {
    breakpointMin =        0,
    breakpointTablet =     640,
    breakpointDesktop =    1034,
    breakpointBigDesktop = 1440
  }

  export enum Color {
    // Neutral
    n100 = '#FFFFFF',
    n150 = '#f8fbff',
    n200 = '#f2f6fd', /* Custom hf 025 grey */
    n250 = '#eaeff6',
    n300 = '#d2d9e4',
    n400 = '#aeb9c9',
    n500 = '#8d9bae',
    n600 = '#546378',
    n700 = '#3c4a5e',
    n800 = '#273343',

    // Blue
    b100 = '#e1f3ff',
    b200 = '#cdebfe',
    b300 = '#8ACFF9',
    b400 = '#139FF5',
    b500 = '#0078C2',
    b600 = '#00588f',

    // Cyan
    c100 = '#EDFCFF',
    c200 = '#C8F2FA',
    c300 = '#A2EBFA',
    c400 = '#61DAF2',
    c500 = '#4DACBF',
    c600 = '#32707D',

    // Green
    g100 = '#DBF1DA',
    g200 = '#CDECCB',
    g300 = '#84D17F',
    g400 = '#50B848',
    g500 = '#317C2C',
    g600 = '#245A20',

    // Indigo
    i100 = '#f4f6fb',
    i200 = '#D9E1F2',
    i300 = '#8E9ED7',
    i400 = '#3C479D',
    i500 = '#2E3880',
    i600 = '#232A63',

    // Orange
    o100 = '#FFF4C7',
    o200 = '#FEEEA0',
    o300 = '#FFD540',
    o400 = '#E59D00',
    o500 = '#A86D00',
    o600 = '#754C00',

    // Red
    r100 = '#FDE5E2',
    r200 = '#FBD5D0',
    r300 = '#F6947E',
    r400 = '#F15A29',
    r500 = '#BD350F',
    r600 = '#8E280B',

    // Yellow
    y100 = '#FFFDED',
    y200 = '#FFF7BF',
    y300 = '#FFEC73',
    y400 = '#FFE226',
    y500 = '#BFA91C',
    y600 = '#7F7012'
  }

  export enum FontSize {
    fzXSmall =          12,
    fzSmall =           14,
    fzBody =            16,
    fzHeading =         18,
    fzDisplay =         24,
    fzDisplayLarge =    36
  }

  export const fontSizeMap: { [i in Props.TypographyType]: FontSize } = {
    [Props.TypographyType.XSmall]:        14,
    [Props.TypographyType.Small]:         18,
    [Props.TypographyType.Body]:          20,
    [Props.TypographyType.Heading]:       22,
    [Props.TypographyType.Display]:       28,
    [Props.TypographyType.DisplayLarge]:  40
  }

  export enum FontWeight {
    fwNormal =           400,
    fwSemiBold =         600,
    fwBold =             700
  }

  export enum Layout {
    l2XSmall =    16,
    lXSmall =     24,
    lSmall =      32,
    lMedium =     40,
    lLarge =      64,
    lXLarge =     80,
    l2XLarge =   120
  }

  export enum LineHeight {
    lhXSmall =          18,
    lhSmall =           20,
    lhBody =            24,
    lhHeading =         24,
    lhDisplay =         32,
    lhDisplayLarge =    44
  }

  export enum Spacing {
    s3XSmall =    2,
    s2XSmall =    4,
    sXSmall =     8,
    sSmall =     12,
    sMedium =    16,
    sLarge =     24,
    sXLarge =    32,
    s2XLarge =   40,
    s3XLarge =   48
  }

  export enum Style {
    borderRadius = 4
  }

  export enum ZIndex {
    zIndexAbsoluteBottom =  -9999,
    zIndexDefault =         0,
    zIndexModal =           1000,
    zIndexDateInput =       2000,
    zIndexDropdownMenu =    3000,
    zIndexDialog =          3500,
    zIndexToaster =         4000,
    zIndexAbsoluteTop =     9999
  }

  export enum BoxShadow {
    bsLv1Static = '0 2px 1px rgba(102, 115, 128, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.12)',
    bsLv2Prominent = '0 2px 4px rgba(102, 115, 128, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12)',
    bsLv3Active = '0 5px 5px rgba(102, 115, 128, 0.18), 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.10)',
    bsLv4FrontOfMind = '0 10px 14px rgba(102, 115, 128, 0.2), 0 22px 35px rgba(0, 0, 0, 0.14), 0 8px 42px rgba(0, 0, 0, 0.12)'
  }
}

export {
  Variables
}