tokens.js

export const tokens = {
  /**
   *  Type: color
   */
  colorPrimary: '#273653',
  /**
   *  Type: color
   */
  colorSecondary: '#c6e8ff',
  /**
   *  Type: color
   */
  colorAccent: '#46b6ff',
  /**
   *  Type: color
   */
  colorBackground: '#fefefe',
  /**
   *  Type: color
   */
  colorBackgroundDark: '#f5f6f9',
  /**
   *  Type: color
   */
  colorLink: '#0a87d8',
  /**
   *  Type: color
   */
  colorLinkHover: '#18a0f8',
  /**
   *  Type: color
   */
  colorSurface: '#fefefe',
  /**
   *  Type: color
   */
  colorButtonPrimary: '#46b6ff',
  /**
   *  Type: color
   */
  colorError: '#fe4a49',
  /**
   *  Type: color
   */
  colorDisabled: '#999898',
  /**
   *  Type: color
   */
  colorOnPrimary: '#fefefe',
  /**
   *  Type: color
   */
  colorOnSecondary: '#010101',
  /**
   *  Type: color
   */
  colorOnAccent: '#fefefe',
  /**
   *  Type: color
   */
  colorOnBackground: '#010101',
  /**
   *  Type: color
   */
  colorOnSurface: '#1f5644',
  /**
   *  Type: color
   */
  colorOnSurfaceLight: '#f1efef',
  /**
   *  Type: color
   */
  colorOnError: '#fefefe',
  /**
   *  Type: color
   */
  colorOnDisabled: '#fefefe',
  /**
   *  Type: color
   */
  colorTextDarkPrimary: 'rgba(142, 146, 156, 0.87)',
  /**
   *  Type: color
   */
  colorTextDarkSecondary: 'rgba(89, 88, 88, 0.87)',
  /**
   *  Type: color
   */
  colorTextDarkHint: 'rgba(142, 146, 156, 0.38)',
  /**
   *  Type: color
   */
  colorTextDarkDisabled: 'rgba(142, 146, 156, 0.38)',
  /**
   *  Type: color
   */
  colorTextDarkIcon: 'rgba(142, 146, 156, 0.38)',
  /**
   *  Type: color
   */
  colorTextLightPrimary: 'rgba(255, 255, 255, 1)',
  /**
   *  Type: color
   */
  colorTextLightSecondary: 'rgba(255, 255, 255, 0.7)',
  /**
   *  Type: color
   */
  colorTextLightHint: 'rgba(255, 255, 255, 0.5)',
  /**
   *  Type: color
   */
  colorTextLightDisabled: 'rgba(255, 255, 255, 0.5)',
  /**
   *  Type: color
   */
  colorTextLightIcon: 'rgba(255, 255, 255, 0.5)',
  /**
   *  Type: font
   */
  fontH1: '700 3rem / 1.2 OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font
   */
  fontH2: '700 2.25rem / 1.2 OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font
   */
  fontH3: '700 1.5rem / 1.2 OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font
   */
  fontH4: '700 1.25rem / 1.2 OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font
   */
  fontH5: '700 1rem / 1.2 OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font
   */
  fontH6: '700 0.75rem / 1.2 OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font
   */
  fontSubtitle: '700 1.125rem / 1.2 OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font
   */
  fontSubtitleSmall: '700 0.875rem / 1.2 OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font
   */
  fontBody: '500 1rem / 1.2 OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font
   */
  fontBodySmall: '500 0.875rem / 1.2 OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font
   */
  fontBodyTiny: '500 0.8125rem / 1.2 OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font
   */
  fontButtonLarge: '700 1.25rem / 1.2 OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font
   */
  fontButton: '700 0.9375rem / 1.2 OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font
   */
  fontOverline: '500 0.75rem / 1.2 OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font
   */
  fontLegal: '500 0.625rem / 1.2 OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyH1: 'OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyH2: 'OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyH3: 'OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyH4: 'OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyH5: 'OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyH6: 'OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilySubtitle: 'OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilySubtitleSmall: 'OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyBody: 'OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyBodySmall: 'OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyBodyTiny: 'OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyButtonLarge: 'OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyButton: 'OpenSans, Galano, Verdana, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyOverline: 'OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font-family
   */
  fontFamilyLegal: 'OpenSans, "Maison Neue", Helvetica, sans-serif',
  /**
   *  Type: font-weight
   */
  fontWeightH1: 700,
  /**
   *  Type: font-weight
   */
  fontWeightH2: 700,
  /**
   *  Type: font-weight
   */
  fontWeightH3: 700,
  /**
   *  Type: font-weight
   */
  fontWeightH4: 700,
  /**
   *  Type: font-weight
   */
  fontWeightH5: 700,
  /**
   *  Type: font-weight
   */
  fontWeightH6: 700,
  /**
   *  Type: font-weight
   */
  fontWeightSubtitle: 700,
  /**
   *  Type: font-weight
   */
  fontWeightSubtitleSmall: 700,
  /**
   *  Type: font-weight
   */
  fontWeightBody: 500,
  /**
   *  Type: font-weight
   */
  fontWeightBodySmall: 500,
  /**
   *  Type: font-weight
   */
  fontWeightBodyTiny: 500,
  /**
   *  Type: font-weight
   */
  fontWeightButton: 700,
  /**
   *  Type: font-weight
   */
  fontWeightButtonLarge: 700,
  /**
   *  Type: font-weight
   */
  fontWeightOverline: 500,
  /**
   *  Type: font-weight
   */
  fontWeightLegal: 500,
  /**
   *  Type: font-size
   */
  fontSizeH1: '3rem',
  /**
   *  Type: font-size
   */
  fontSizeH2: '2.25rem',
  /**
   *  Type: font-size
   */
  fontSizeH3: '1.5rem',
  /**
   *  Type: font-size
   */
  fontSizeH4: '1.25rem',
  /**
   *  Type: font-size
   */
  fontSizeH5: '1rem',
  /**
   *  Type: font-size
   */
  fontSizeH6: '0.75rem',
  /**
   *  Type: font-size
   */
  fontSizeSubtitle: '1.125rem',
  /**
   *  Type: font-size
   */
  fontSizeSubtitleSmall: '0.875rem',
  /**
   *  Type: font-size
   */
  fontSizeBody: '1rem',
  /**
   *  Type: font-size
   */
  fontSizeBodySmall: '0.875rem',
  /**
   *  Type: font-size
   */
  fontSizeBodyTiny: '0.8125rem',
  /**
   *  Type: font-size
   */
  fontSizeButtonLarge: '1.25rem',
  /**
   *  Type: font-size
   */
  fontSizeButton: '0.9375rem',
  /**
   *  Type: font-size
   */
  fontSizeOverline: '0.75rem',
  /**
   *  Type: font-size
   */
  fontSizeLegal: '0.625rem',
  /**
   *  Type: letter-spacing
   */
  letterSpacingH1: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingH2: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingH3: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingH4: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingH5: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingH6: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingSubtitle: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingSubtitleSmall: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingBody: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingBodySmall: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingBodyTiny: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingButtonLarge: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingButton: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingOverline: 'normal',
  /**
   *  Type: letter-spacing
   */
  letterSpacingLegal: 'normal',
  /**
   *  For things like switches, control boxes, etc...
   *  Type: time
   */
  durationSimpleSmall: '0.1s',
  /**
   *  For small dialogs, alerts, etc...
   *  Type: time
   */
  durationSimpleSmallEnter: '.15s',
  /**
   *  For small dialogs, alerts, etc...
   *  Type: time
   */
  durationSimpleSmallExit: '0.075s',
  /**
   *  For card transforms, etc...
   *  Type: time
   */
  durationSimpleMedium: '0.225s',
  /**
   *  For card transforms, etc...
   *  Type: time
   */
  durationSimpleMediumEnter: '0.25s',
  /**
   *  For card transforms, etc...
   *  Type: time
   */
  durationSimpleMediumExit: '0.2s',
  /**
   *  For page transforms, etc...
   *  Type: time
   */
  durationSimpleLarge: '0.275s',
  /**
   *  For card transforms, etc...
   *  Type: time
   */
  durationSimpleLargeEnter: '0.3s',
  /**
   *  For card transforms, etc...
   *  Type: time
   */
  durationSimpleLargeExit: '0.25s',
  /**
   *  Type: timing function
   */
  timingCurveDecelerate: 'cubic-bezier(0, 0, .2, 1)',
  /**
   *  Type: timing function
   */
  timingCurveAccelerate: 'cubic-bezier(.4, 0, 1, 1)',
  /**
   *  Type: timing function
   */
  timingCurveStandard: 'cubic-bezier(.4, 0, .2, 1)',
  /**
   *  Type: timing function
   */
  timingCurveSharp: 'cubic-bezier(.4, 0, .6, 1)',
  /**
   *  For items that should be on the page but not visible
   *  Type: z-index
   */
  elevationZHidden: -1,
  /**
   *  Used for setting a standard z-index
   *  Type: z-index
   */
  elevationZDefault: 1,
  /**
   *  used for dropdowns
   *  Type: z-index
   */
  elevationZDropdown: 1000,
  /**
   *  Used for overlays and things that are supposed to mask the page so that other things above them can be afforded visual focus
   *  Type: z-index
   */
  elevationZOverlay: 5000,
  /**
   *  For popups and other modal elements with a high elevation
   *  Type: z-index
   */
  elevationZModal: 6000,
  /**
   *  Use for more prominent text
   *  Type: alpha
   */
  emphasisHigh: 0.87,
  /**
   *  Use for secondary text
   *  Type: alpha
   */
  emphasisMedium: 0.6,
  /**
   *  Use for hints and things that are disabled
   *  Type: alpha
   */
  emphasisDisabled: 0.38,
};

export default tokens;