src/components/common-style/theme.css

/* Copyright 2015 The Vanadium Authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

/* CSS variables for the color theme of the application.
 * Many color values come from Material Design and Vanadium Style Guide
 * See https://docs.google.com/a/google.com/uc?id=0B-KEC9O0kcv5aUZTSHNYN3VyS2s
 * See http://www.google.com/design/spec/style/color.html
 */
:root {
  --font-family: 'Roboto', sans-serif;

  /*
   * Text colors
   */
  /* Regular text such as paragraphs, values. Off-black */
  --color-text-primary: rgba(0, 0, 0, 0.87);

  /* Secondary text such as labels, action icons. Lighter grey than text-primary */
  --color-text-secondary: rgba(0, 0, 0, 0.54);

  /* Hint text such as inline help text. Lighter grey than text-secondary */
  --color-text-hint: rgba(0, 0, 0, 0.26);

  /* Invert of text-primary to be used for regular text on darker backgrounds or to indicate highlighting. White */
  --color-text-primary-invert: var(--color-white);

  /* Link text. */
  --color-text-link: var(--color-secondary-800);
  /* Link hover text. */
  --color-text-link-hover: var(--color-secondary-700);

  /* Heading text. */
  --color-text-heading: var(--color-secondary-700);

  /*
   * Layout colors
   */
  /* White. Use where-ever traditionally regular white is used such as reading backgrounds. White */
  --color-white: #ffffff;

  /* Primary brand color. Use this icons and icon */
  --color-primary-600: #00ACC1;

  /* Secondary color 1. Use this for navbar backgrounds, primary buttons */
  --color-secondary-800: #00838F;

  /* Secondary color 2. Use this for header text, tabs, and contrasting backgrounds */
  --color-secondary-700: #0097A7;

  /* Bright accent background color for highlighting */
  --color-bright: #FF6E40;

  /* Divider color for separators and borders */
  --color-divider: rgba(0, 0, 0, 0.12);

  /*
   * Button colors
   */
  /* Primary button colors, main dark color background with white text */
  --color-button-primary: var(--color-secondary-800);
  --color-button-primary-text: var(--color-white);

  /* Primary button colors, white background with main dark color text */
  --color-button-secondary: var(--color-white);
  --color-button-secondary-text: var(--color-secondary-800);

  /* Very Light Grey. Use as background color where-ever darker shade of white is needed such as toolbars and secondary reading backgrounds */
  --color-grey-very-light: #ECEFF1;

  /* Icon button colors. Use as background color for actionable icons. */
  --color-icon-button: var(--color-grey-very-light);

  /*
   * Shadows
   */
  --color-shadow: rgba(0, 0, 0, 0.2);
  --shadow-bottom: 0px 3px 2px var(--color-shadow);
  --shadow-all-around: 0 2px 10px 0 var(--color-shadow);

  /*
   * Borders
   */
  --border: solid 1px var(--color-divider);

  /*
   * Miscellaneous colors
   */
  /* Redish color used to indicate errors. */
  --color-error: #D32F2F;

  /* Greenish color used to indicate success or an action the user can initiate */
  --color-ok: #388E3C;

  /* Blueish color used to indicate neutral information */
  --color-info: var(--color-button-primary);

  /* hover color for menus, like context menus */
  --color-menu-hover: rgba(236, 239, 241, 0.8);
}