@import 'colors';

// Background Colors
// TODO: convert to CSS Custom Properties
$ec-color-bg-content: $white;
$ec-color-bg-dark: $black;
$ec-color-bg-body: #f1f3f4;
$ec-color-bg-modal: rgba($black, .5);
$ec-color-bg-mask: radial-gradient(circle, $gray-6 0%, $gray-8 100%);
$ec-color-bg-content-secondary: rgba($black, .03);

// TODO: remove heading background
$ec-color-bg-heading: #DEE2E4;


// Text Colors
// TODO: convert to CSS Custom Properties
$ec-color-text-primary-dark: $black;
$ec-color-text-primary-light: $white;
$ec-color-text-secondary-dark: rgba($black, .66);
$ec-color-text-secondary-light: rgba($white, .6);
$ec-color-text-hint-dark: rgba($black, .38);
$ec-color-text-hint-light: rgba($white, .38);
$ec-color-text-disabled-dark: rgba($black, .1);
$ec-color-text-danger: $red-4;

$ec-color-link: $blue-4;
$ec-color-icon: $gray-5;

// Status Colors
$ec-color-active: $blue-4;
$ec-color-caution: $yellow-4;
$ec-color-bg-caution: #FFF8cc;
$ec-color-error: $red-5;
$ec-color-success: #3C763D;
$ec-color-good: #619910;
$ec-color-bad: $orange-4;
$ec-color-bg-error: #ecc4c5;
$ec-color-accent: #6F1C8A;
$ec-color-info: rgba($blue-4, .5);
$ec-color-bg-info: #DAE4E9;
$ec-color-bg-success: #DFF0D8;
$ec-color-bg-hover: #BFE0E9;
$ec-color-bg-danger: $red-3;

$ec-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

$ec-font-size-body: 1rem;
$ec-font-size-label: .75rem;
$ec-font-size-action: .875rem;
$ec-font-size-title: 1.25rem;
$ec-font-size-icon: 1rem;

$ec-font-weight-bold: bold;
$ec-font-weight-normal: normal;

$ec-border-color: #d2d7d9;
$ec-border-color-default: rgba($black, .18);
$ec-border-color-dark: rgba($black, .87);
$ec-border-width: 1px;
$ec-border-radius: 0;

$ec-shadow-color: rgba($black, .18);
$ec-shadow: 0 0 .125rem $ec-shadow-color;

$ec-z-indexes: (
    tooltip: 10,
    overlay: 20,
    splitter: 30,
    navbar: 40,
    popup: 50,
    dialog: 60,
);
