theme.css

/**
 * Theme definition
 *
 * This defines the theme in fundamental terms, but not how it is applied to
 * the components. That is done in `theme-map.css`.
 */

/**
 * Breakpoints
 */

@custom-media --sm-viewport (min-width:320px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

/**
 * Colors
 */

:root {
  --colorTwitterBlue: #55acee;
  --colorWhite: #fff;

  /* Primary grays */
  --colorCharcoal: #292f33;
  --colorDarkGray: #66757f;
  --colorMediumGray: #8899a6;
  --colorGray: #ccd6dd;
  --colorBorderGray: #e1e8ed;
  --colorFaintGray: #f5f8fa;

  /* Primary blues */
  --colorDarkBlue: #226699;
  --colorDeepBlue: #3b88c3;
  --colorLightBlue: #88c9f9;

  /* Secondary colors */
  --colorOrange: #ffac33;
  --colorGreen: #77b255;
  --colorPurple: #9266cc;
  --colorRed: #dd2e44;
  --colorYellow: #ffcc4d;

  /* Secondary color variants */
  --colorDarkOrange: #f4900c;
  --colorDarkGreen: #3e721d;
  --colorDarkPurple: #553788;
  --colorDarkRed: #a0041e;
  --colorDeepGreen: #5c913b;
  --colorDeepPurple: #744eaa;
  --colorDeepRed: #be1931;
  --colorLightYellow: #ffd983;
  --colorLightGreen: #a6d388;
  --colorLightPurple: #aa8dd8;
  --colorLightRed: #ea596e;
  --colorFadedYellow: #ffe8b6;
  --colorFadedGreen: #c6e5b3;
  --colorFadedBlue: #bbddf5;
  --colorFadedPurple: #cbb7ea;
  --colorFadedRed: #f4abba;
}

/**
 * Fonts
 */

:root {
  --fontSize: 16px;
  --fontFamily: sans-serif;
  --lineHeight: 1.4;
}

/**
 * Spacing
 */

:root {
  --spaceSmall: 10px;
  --spaceMedium: 15px;
  --spaceLarge: 20px;
}