_variables.scss

$wh: #fff;
$bl: #000;
$col_14: #141414;

//*** ---------------------------------------------------------------------------------
//*** Global variables for edit forms   ***//
//***

$acme-input-border-radius: 2px;
$acme-input-border-color: #656565;
$acme-input-border: 1px solid $acme-input-border-color;
$acme-input-border-color-disabled: #cdcdcd; // if an input is disabled, border should be this color
$acme-form-required-color: #e74c3c;
$acme-form-error-color: #e74c3c; // the color of all errors
$acme-form-label-color: #656565; // the color of labels on top of inputs
$acme-input-placeholder-color: #cdcdcd;
$acme-input-font-size: 16px;
$acme-form-label-font-size: 14px; // label font-size
$acme-input-error-font-size: 12px;

$acme-body-text-color: #222222;

$acme-content-border-color: #b9b9b9; // bbox border color used to section off parts of our forms
$acme-content-border-width: 1px; // bbox border width used to section off parts of our forms
$acme-content-border: $acme-content-border-width solid $acme-content-border-color; // bbox border used to section off parts of our forms
$acme-content-header-color: #222222; // main label is darker then sub label
$acme-edit-header-sub-label-color: #4b4b4b; // sub label is lighter then main edit label

$acme-empty-state-text-color: #cdcdcd; // example, if view should show list of x, but there are no x's
$acme-delete-button-color: #e74c3c;

$acme-table-header-color: #707071;
$acme-table-empty-state-text-color: #707070;

$acme-skeleton-data-default-height: 20px;
$acme-skeleton-data-title-height: 15px;
$acme-skeleton-data-small-height: 12px;

$acme-detail-header-height: 50px;
$acme-navbar-height: 60px;

/** Chips */
$acme-chips-padding: 2px 12px;
$acme-chips-min-height: 24px;
$acme-chips-font-size: 14px;
$acme-chips-border-radius: 16px;
$acme-chips-text-color: #656565;
$acme-chips-border-color: #656565;
$acme-chips-background-color: #ffffff;
$acme-chips-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
$acme-chips-transition: color 500ms;

//****
//**** ---------------------------------------------------------------------------------

/*** Checkout ***/
$acme-checkout-main-gray: #707070;
$acme-checkout-return-item-red: red;
$acme-checkout-gc-balance-green: #008000;

// variables below direct the color of device connection status
$acme-checkout-cardconnect-success: #28a745;
$acme-checkout-cardconnect-warn: #fdad4e;
$acme-checkout-cardconnect-error: #e74c3c;

/*** Order Summary ***/
$acme-order-summary-gray: #656565;
$acme-order-summary-payment-title-font-size: 16px;
$acme-order-summary-payment-item-font-size: 14px;
// When the order summary moves from the side to the bottom of the checkout screen
$acme-order-summary-screen-breakpoint: 1320px;

//**** ---------------------------------------------------------------------------------
//**** JULY 30th, 2019
//**** The styles below are old, and should NOT be used
//**** for anything after the above date!

// Styles applied to all form fields (textbox, dropdown, checkbox...)
$acme-border-color: #707070;
$acme-border-width: 1px;
$acme-font-color: #141414;
$acme-font-size: 20px;
$acme-font-family: "Lato", Arial, sans-serif;

// Required star for form field color
$acme-required-star-color: #e74c3c;

// Form validation error text color
$acme-input-error-color: #e74c3c;

black-theme.scss

@import '../../styles/component-themes';
@include mat-core();
@import '../../../node_modules/@angular/material/theming';

$custom-typography: mat-typography-config(
    $font-family: 'Lato, Arial, sans-serif'
);

@include angular-material-typography($custom-typography);
/*
** Initial black theme when loading theme from local storage
*/
$programname-black: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #000000,
    500 : #303030,
    600 : #473c34,
    700 : #000000,
    800 : #000000,
    900 : #000000,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #000000,
        700 : #000000,
        800 : #000000,
        900 : #000000,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

// Theme used for material components
$primary: mat-palette($programname-black, 500);
$accent: mat-palette($programname-black, 500);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);

// Theme used for app components we created
// For example: navbar icon active state background color
$posonline-accent: mat-palette($programname-black, 600);
$posonline-theme: mat-light-theme($primary, $posonline-accent, $warn);

@include angular-material-theme($theme);
@include component-themes($posonline-theme);

$accent: mat-color($primary, 500); /* Get primary color from material to override accent variable in kendo */
@import '../../styles/kendo-override-variables';
@import "../../../node_modules/@progress/kendo-theme-default/scss/all";
@import '../../styles/kendo-override-styles';

.mat-raised-button, .k-button {
    .mat-spinner circle {
        stroke: map-get(map-get($programname-black, contrast), 500);
    }
}


.mat-step-header .mat-step-label.mat-step-label-active {
    color: map-get($programname-black, 500);
}

.mat-button.mat-primary[disabled], .mat-button.mat-accent[disabled], .mat-button.mat-warn[disabled], .mat-button[disabled][disabled], .mat-icon-button.mat-primary[disabled], .mat-icon-button.mat-accent[disabled], .mat-icon-button.mat-warn[disabled], .mat-icon-button[disabled][disabled], .mat-stroked-button.mat-primary[disabled], .mat-stroked-button.mat-accent[disabled], .mat-stroked-button.mat-warn[disabled], .mat-stroked-button[disabled][disabled] {
    outline: none;
    cursor: default;
    opacity: 0.6;
    filter: grayscale(0.1);
    pointer-events: none;
}

@import './generic-theme.scss';

kendo-override-variables.scss

/* Kendo variables that we want to override */
@import 'variables';

$font-size: $acme-font-size;
$base-text: $acme-font-color;
$hovered-text: $acme-font-color;
$base-bg: white;
$border-radius: 0;
$base-border: $acme-border-color;
$hovered-border: $acme-border-color;