// define a real custom palette (using http://mcg.mbitson.com)
$openslides-blue: (
    50: #e6eff2,
    100: #c1d6e0,
    200: #98bbcb,
    300: #6fa0b6,
    400: #508ba6,
    500: #317796,
    600: #2c6f8e,
    700: #002a42,
    800: #00253c,
    900: #001f33,
    A100: #9fd7ff,
    A200: #6cc2ff,
    A400: #39acff,
    A700: #1fa2ff,
    contrast: (
        50: #ffffff,
        100: #ffffff,
        200: #ffffff,
        300: #ffffff,
        400: #ffffff,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #000000,
        A200: #000000,
        A400: #000000,
        A700: #000000
    )
);

// Generate paletes using: https://material.io/design/color/
// default values fir mat-palette: $default: 500, $lighter: 100, $darker: 700.
$openslides-primary: mat-palette($openslides-blue);

$openslides-accent: mat-palette($mat-light-blue);

$openslides-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$openslides-theme: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn);

// Create Sass color vars (for using in scss files).
// This will be set dynamically with the selecting theme
// $os-primary: mat-color($openslides-primary);
// $os-accent: mat-color($openslides-accent);
// $os-warn: mat-color($openslides-warn);

$os-outline: mat-color($mat-grey, 300);
$os-background: mat-color($mat-grey, 100);

/** This is the workaround to set a custom background-color
 *  In the first step the color must be merged, in order to have to a map.
 *  The components will get a value from this map.
 */
$background: map-get($openslides-theme, background);
$background: map_merge($background, (background: $os-background));

/**
 *  Merge the theme with the custom-background.
 */
$openslides-theme: map_merge($openslides-theme, (background: $background));