Untitled
raw download clone
TYPESCRIPT
views 14
,
size 3274 b
import { Borders, Fonts, IconsSize, Palette, Shadows, TStyleGuide } from './enums';

export const StyleGuide: TStyleGuide = {
  palette: {
    [Palette.PrimaryMain]: '#C60432',
    [Palette.PrimaryHover]: '#AD042C',
    [Palette.PrimaryActive]: '#A10429',
    [Palette.PrimaryDark]: '#A9001C',

    [Palette.SuccessMain]: '#C60432',
    [Palette.SuccessHover]: '#AD042C',
    [Palette.SuccessActive]: '#A10429',

    [Palette.GreyMain]: 'rgba(0, 0, 0, 0.4)',
    [Palette.GreyHover]: 'rgba(0, 0, 0, 0.5)',
    [Palette.GreyActive]: 'rgba(0, 0, 0, 0.6)',

    [Palette.Black]: '#333333',
    [Palette.DarkGray]: '#626264',
    [Palette.MediumGray]: '#929295',
    [Palette.LightGray]: 'rgba(0, 0, 0, 0.3)',
    [Palette.ExtralightGray]: 'rgba(170, 170, 170, 0.32)',
    [Palette.HoverLightGray]: 'rgba(0, 0, 0, 0.04)',
    [Palette.MiddleGray]: 'rgba(0, 0, 0, 0.08)',
    [Palette.Disabled]: '#CBD0DB',
    [Palette.AlertRed]: '#EF2B00',
    [Palette.White]: '#FFFFFF',
    [Palette.TransparentWhite]: 'rgba(255, 255, 255, 0.6)',
    [Palette.Background]: '#F4F4F9',
    [Palette.Orange]: '#FF9800',
    [Palette.Fade]: 'rgba(17, 17, 17, 0.48)',

    [Palette.InputBackground]: '#F4F4F9',
    [Palette.InputDisabledBackground]: '#FCFCFC',
    [Palette.InputErrorBackground]: '#FCE3D4',
    [Palette.InputBorder]: '#EAEEF0',
    [Palette.InputFocusBorder]: '#D6DADB',
    [Palette.InputDisabledBorder]: '#EAEEF0',
    [Palette.InputErrorBorder]: '#EBDBCC',
    [Palette.InputIconColor]: 'rgba(0, 0, 0, 0.3)',
    [Palette.LabelColor]: 'rgba(0, 0, 0, 0.6)',
    [Palette.Green]: '#009688',
  },

  fonts: {
    [Fonts.TextH1]: '32px',
    [Fonts.TextH2]: '24px',
    [Fonts.TextH3]: '20px',
    [Fonts.TextH4]: '14px',
    [Fonts.TextH5]: '12px',
    [Fonts.TextLink1]: '16px',
    [Fonts.TextLink2]: '14px',
    [Fonts.TextBody]: '16px',
    [Fonts.TextSecondary]: '14px',
    [Fonts.TextSupplementary]: '12px',
    [Fonts.Notification]: '10px',
  },

  lineHeight: {
    [Fonts.TextH1]: '40px',
    [Fonts.TextH2]: '32px',
    [Fonts.TextH3]: '28px',
    [Fonts.TextH4]: '20px',
    [Fonts.TextH5]: '16px',
    [Fonts.TextLink1]: '20px',
    [Fonts.TextLink2]: '20px',
    [Fonts.TextBody]: '24px',
    [Fonts.TextSecondary]: '20px',
    [Fonts.TextSupplementary]: '16px',
    [Fonts.Notification]: '14px',
  },

  icons: {
    [IconsSize.Big]: 24,
    [IconsSize.Normal]: 20,
  },

  borders: {
    [Borders.ExtraLight]: '1px solid rgba(0, 0, 0, 0.04)',
    [Borders.Light]: '1px solid rgba(170, 170, 170, 0.32)',
    [Borders.Normal]: '1px solid rgba(0, 0, 0, 0.3)',
    [Borders.Dark]: '1px solid rgba(0, 0, 0, 0.6)',
    [Borders.Button]: '1px solid #f4f4f9',
    [Borders.Error]: '1px solid  #EF2B00',
    [Borders.Tab]: '3px solid #e4e4e4',
    [Borders.Checkbox]: '2px solid rgba(0, 0, 0, 0.3)',
  },

  shadows: {
    [Shadows.Small]: '0px 0px 40px rgba(0, 0, 0, 0.12)',
    [Shadows.Normal]: '0px 2px 16px rgba(0, 0, 0, 0.04)',
    [Shadows.Big]: '0px 1px 4px rgba(0, 0, 0, 0.2)',
    [Shadows.Button]: '0 2px 16px rgba(0, 0, 0, 0.06)',
    [Shadows.ContentContainer]: '0 0 40px rgba(0, 0, 0, 0.08)',
    [Shadows.Switch]: '0px 1px 4px rgba(17, 17, 17, 0.12)',
  },
};
close fullscreen
Login or Register to edit or fork this paste. It's free.