// // Components Variables and Settings - Dark // —————————————-

////// Scaffolding ////// $background-color-regular: #262626; // used for transparency calculations

////// Colors ////// $color-bright: fff; $color-dark: #383838;

$color-positive: #6bb32d; $color-warning: dbad39; $color-negative: d90000; $color-brand: e20074; $color-inactive: d0d0d0; $color-function: #0ca1dc; $color-highlight: ff0;

$color-border: #858585; $color-border-bright: #5c5c5c;

$color-element-background: #383838; $color-element-border: #737373; $color-element-divider: #858585;

$font-color-regular: $color-bright; $font-color-light: a3a3a3; $font-color-dark: $color-dark;

$font-color-positive: $color-positive; $font-color-warning: $color-warning; $font-color-negative: $color-negative; $font-color-brand: $color-brand; $font-color-inactive: hsv-lighten($background-color-regular, 10%, true);

$font-color-link: #31c3f7; $font-color-link-hover: hsv-darken($font-color-link, 7%, true); // -7% $font-color-link-active: hsv-darken($font-color-link, 15%, true); // -15% $font-color-link-focus: hsv-darken($font-color-link, 21%, true); // -21%

//////Heading/////

$heading-border-color: $color-element-divider;

////// Mark ////// $marked-font-color: $font-color-dark; $marked-bgr-color: $color-highlight;

////// Quotes ////// $quote-figure-border-left: 1px solid $color-border-bright;

////// Tables //////

$table-row-border-bottom: 1px solid $color-border-bright;

$table-header-border-bottom: 1px solid $color-border; $table-footer-border-top: 1px double $color-border; // double wins over solid from $table-row-border-bottom $table-footer-border-bottom: 1px solid $color-border;

$table-font-color-hover: hsv-darken($font-color-regular, 7%, true);

$table-font-color-positive: hsv-darken($font-color-positive, 10%, true); $table-font-color-warning: hsv-darken($font-color-warning , 10%, true); $table-font-color-negative: hsv-darken($font-color-negative, 10%, true); $table-font-color-brand: $color-bright; $table-font-color-inactive: $font-color-inactive;

$table-bgr-color-hover: hsv-lighten($background-color-regular, 12%, true);

$table-bgr-color-positive: $color-positive; $table-bgr-color-warning: $color-warning; $table-bgr-color-negative: $color-negative; $table-bgr-color-brand: $color-brand; // brand has no fallback $table-bgr-color-inactive: transparent; // inactive has no fallback

$table-bgr-color-alpha: .05; $table-bgr-color-hover-alpha: .2;

$table-gray-odd-bgr-color: hsv-darken($background-color-regular, -5%, true); $table-gray-odd-font-color: $font-color-regular;

////// Forms ////// $input-bgr-color: $color-bright; $input-border-color: $color-bright;

$input-border-color-positive: hsv-darken($color-positive, -15, true); $input-border-color-warning: hsv-darken($color-warning, 0, true); $input-border-color-negative: hsv-darken($color-negative, 0, true);

////// Checkboxes | JS ////// $checkbox-border-color: $color-element-border;

////// Radios | JS ////// $radio-border-color: $color-element-border;

////// Selects | JS ////// $select-font-color: $font-color-regular; $select-font-color-dropdown: $font-color-dark; $select-border-color: $color-element-border; $select-bgr-color: $color-element-background;

$select-disabled-font-color: hsv-darken($select-font-color, 50%, true); $select-disabled-border-color: hsv-darken($select-border-color, 14%, true); $select-disabled-bgr-color: hsv-darken($select-bgr-color, 5%, true);

$select-options-bgr-color: $color-bright; $select-options-active-bgr-color: hsv-darken($select-options-bgr-color, 15%, true);

////// Buttons ////// $button-border-color-positive: hsv-darken($color-positive, 32%, true); $button-border-color-function: hsv-darken($color-function, 32%, true); $button-border-color-negative: hsv-darken($color-negative, 32%, true); $button-border-color-brand: e3bacf; // special color

////// Content-Lists ////// $cl-element-bgr-color-focus: hsv-lighten($background-color-regular, 21%, true); $cl-element-bgr-color-hover: hsv-lighten($background-color-regular, 7%, true); $cl-element-bgr-color-active: hsv-lighten($background-color-regular, 15%, true);

$cl-element-font-color-brand: $color-bright; $cl-element-bgr-color-brand: $color-brand;

////// Pager ////// $pager-text-color: $font-color-regular; $pager-border-color: $color-element-border; $pager-background-color: $background-color-regular;

$pager-disabled-text-color: hsv-darken($pager-text-color, 50%, true); $pager-disabled-border-color: hsv-darken($pager-border-color, 14%, true); $pager-disabled-bgr-color: hsv-lighten($pager-background-color, 5%, true);

////// Breadcrumb ////// $breadcrumb-color: #757575;

////// Pagination //////

$pagination-bgr-color: $color-element-background; $pagination-border-color: $color-element-border;

$pagination-active-bgr-color: $color-brand; $pagination-active-border-color: $pagination-active-bgr-color;

$pagination-disabled-bgr-color: $pagination-bgr-color; $pagination-disabled-border-color: hsv-darken($pagination-border-color, 15%, true);

////// Badges ////// $badges-bgr-color: $color-bright; $badges-bgr-color-positive: $color-positive; $badges-bgr-color-warning: $color-warning; $badges-bgr-color-negative: $color-negative; $badges-bgr-color-function: $color-function; $badges-bgr-color-brand: $color-brand; $badges-bgr-color-dark: $color-element-background; $badges-font-color-normal: $color-dark; $badges-font-color-bright: $font-color-regular;

////// Modal ////// $modal-content-bgr: $color-dark;