saas-one/frontend/operation-web/ext/modern/theme-material/sass/var/Component.scss

$modern-theme-material: true;

//------------------------------------------
//-----Material User Defined Variables
//------------------------------------------

/**
  * @var {string} $base-color-name
  * Material Design color name to be used as the primary application color.
  * For more information go here https://www.google.com/design/spec/style/color.html#color-color-palette
  */
$base-color-name: dynamic('blue');

/**
  * @var {string} $accent-color-name
  * Material Design color name to be used as the accent application color.
  * For more information go here https://www.google.com/design/spec/style/color.html#color-color-palette
  */
$accent-color-name: dynamic('orange');

/**
  * @var {boolean} $dark-mode
  * Toggles all calculations to dark backgrounds and light text
  */
$dark-mode: dynamic(false);

/**
  * @var {boolean} $enable-all-icon-classes
  * Determines if all Material icons should be added to the CSS
  * if not user must add each icon they wish to use
  * material-icon-class('arrow-back');
  */
$enable-all-icon-classes: dynamic(true);

/**
  * @var {boolean} $enable-color-classes
  * Determines if all colors should be added as a class selectors
  * for color and background-color
  */
$enable-color-classes: dynamic(false);

$content-padding: dynamic(16px);
$font-family: dynamic(Roboto, sans-serif);
$enable-big: dynamic(true);
$font-size: dynamic(13px);
$font-size-big: dynamic(14px);
$font-weight-normal: dynamic(400);
$font-weight-bold: dynamic(600);
$font-icon-font-family: 'Material Icons';

//------------------------------------------
//----- Material generated variables
//------------------------------------------
// Calculated variables, can be overridden
$base-color: dynamic(material-color($base-color-name, '500'));
$base-highlight-color: dynamic(material-color($base-color-name, '300'));
$base-light-color: dynamic(material-color($base-color-name, '100'));
$base-dark-color: dynamic(material-color($base-color-name, '700'));
$base-pressed-color: dynamic(if($dark-mode, darken($base-color, 15%), lighten($base-color, 15%)));
$base-focused-color: dynamic(material-color($base-color-name, '400'));
$base-invisible-color: dynamic(rgba($base-color, 0));
$base-foreground-color: dynamic(material-foreground-color($base-color-name));

$accent-color: dynamic(material-color($accent-color-name, '500'));
$accent-light-color: dynamic(material-color($accent-color-name, '100'));
$accent-dark-color: dynamic(material-color($accent-color-name, '700'));
$accent-pressed-color: dynamic(if($dark-mode, darken($accent-color, 15%), lighten($accent-color, 15%)));
$accent-invisible-color: dynamic(rgba($accent-color, 0));
$accent-foreground-color: dynamic(material-foreground-color($accent-color-name));

$confirm-color: dynamic(material-color('light-green', '600'));
$confirm-pressed-color: dynamic(if($dark-mode, darken($confirm-color, 15%), lighten($confirm-color, 15%)));

$alert-color: dynamic(material-color('red', '800'));
$alert-pressed-color: dynamic(if($dark-mode, darken($alert-color, 15%), lighten($alert-color, 15%)));

$color: dynamic(if($dark-mode, #fff, #111111));
$reverse-color: dynamic(if($dark-mode, #222, #fff));

$highlight-color: dynamic(rgba($color, .54));
$disabled-color: dynamic(rgba($color, .38));
$reverse-disabled-color: dynamic(rgba($reverse-color, .38));
$divider-color: dynamic(mix($color, $reverse-color, 12%));

$selected-background-color: dynamic(if($dark-mode, $base-dark-color, material-color('grey', '300')));
$hovered-background-color: dynamic(if($dark-mode, #4d4d4d, material-color('grey', '200')));

$header-background-color: dynamic(if($dark-mode, material-color('grey', '800'), material-color('grey', '100')));


$faded-color: dynamic(if($dark-mode, #4d4d4d, #e1e1e1));

$background-color: dynamic(if($dark-mode, #303030, #fafafa));
$alt-background-color: dynamic(if($dark-mode, #3a3a3a, #f5f5f5));

$reverse-background-color: dynamic(if($dark-mode, #fafafa, #303030));
$reverse-alt-background-color: dynamic(if($dark-mode, #f5f5f5, #3a3a3a));

// Used for subtle overlays on top of items (picker bar, etc)
$overlay-color: dynamic(if($dark-mode, rgba(#fff, .03), rgba(#000, .03)));