/*!
 *  Licensed to the Apache Software Foundation (ASF) under one or more
 *  contributor license agreements.  See the NOTICE file distributed with
 *  this work for additional information regarding copyright ownership.
 *  The ASF licenses this file to You under the Apache License, Version 2.0
 *  (the "License"); you may not use this file except in compliance with
 *  the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@use 'sass:map';
@use '@angular/material' as mat;

$material-primary-light-palette: (
    50: rgba(#F9FAFB, 0.97),
    100: #e5ebed,
    200: #cbd8dd,
    300: #abbdc5,
    400: #8aa2ad,
    500: #728e9b,
    600: #597b8a,
    700: #4e6c79,
    800: #3f5863,
    900: #004849,
    A100: #666666,
    A200: #444444,
    A400: #303030,
    A700: #121212,
    contrast: (
        50: rgba(#000000, .87),
        100: rgba(#000000, .87),
        200: rgba(#000000, .87),
        300: rgba(#000000, .87),
        400: rgba(#000000, .87),
        500: rgba(#000000, .87),
        600: rgba(#000000, .87),
        700: #ffffff,
        800: #ffffff,
        900: #ffffff,
        A100: #ffffff,
        A200: #ffffff,
        A400: #ffffff,
        A700: rgba(#000000, .87),
    )
);

$material-accent-light-palette: mat.$brown-palette;

$warn-light-palette: (
    50: #ffebee,
    100: #ffccd2,
    200: #f49999,
    300: #eb7071,
    400: #f64e4c,
    500: #fa3b30,
    600: #ec3030,
    700: #ff1507,
    800: #ff0000,
    900: #ba554a,
    contrast: (
        50: rgba(#000000, 0.87),
        100: rgba(#000000, 0.87),
        200: rgba(#000000, 0.87),
        300: rgba(#000000, 0.87),
        400: #ffffff,
        500: #ffffff,
        600: #ffffff,
        700: #ffffff,
        800: #ffffff,
        900: #ffffff
    )
);

// Dark and light palettes are identical for NiFi, their "default", "lighter", and "darker" values are different and set below.
$material-primary-dark-palette: $material-primary-light-palette;
$material-accent-dark-palette: $material-accent-light-palette;
$warn-dark-palette: $warn-light-palette;

// For light mode:
//
// primary material palette:
//
// default hue: must have enough contrast on top of the mat-app-background (#fafafa). For light mode this is a minimum of 600 up to 900. It needs to be dark enough to be displayed on top of the darker hue.
// lighter hue: is used for the flow run status icons, PG banner run status icons, RPG banner run status icons as well as PG banner background color, RPG banner background color. For light mode this is a minimum of 600 up to 900.
// darker hue: is used for the navigation header background color. It needs to have enough contrast with the default hue since the default hue is displayed on top of the darker hue. In this case the darker hue is 300 so 900 was chosen for the default hue.
$material-primary-light: mat.define-palette($material-primary-light-palette, 900, 600, 300);
// accent material palette:
//
// default hue: must have enough contrast on top of the mat-app-background (#fafafa). For light mode this is a minimum of 600 up to 900.
// lighter hue: snackbar action button text color, Should be light as the action button is on a dark background in light mode.
// darker hue: nothing
$material-accent-light: mat.define-palette($material-accent-light-palette, 500, 100, 700);
// warn material palette color default hue must have enough contrast on top of the mat-app-background. For light mode this is a minimum of 600 up to 900.
$warn-light: mat.define-palette($warn-light-palette, 400, 200, 900);

@use '@fontsource/roboto/latin.css' as roboto-normal;
@use '@fontsource/roboto/latin-300-italic.css' as roboto-light-italic;
@use '@fontsource/roboto/latin-400-italic.css' as roboto-normal-italic;

//https://m2.material.io/design/typography/the-type-system.html#type-scale
$typography-config: mat.define-typography-config(
    $font-family: Roboto,
    //h2
    $headline-6: mat.define-typography-level(16px, 24px, 400, $letter-spacing: 0.5px),
    //h3
    $subtitle-1: mat.define-typography-level(20px, 20px, 700),
    //h4
    $subtitle-2: mat.define-typography-level(14px, 26px, 400, $letter-spacing: 0.4375px),
    //body
    $body-1: mat.define-typography-level(16px, 24px, 400),
    //body2
    $body-2: mat.define-typography-level(14px, 14px, 400),
    //caption <mat-error> or <mat-hint>
    $caption: mat.define-typography-level(12px, 20px, 400, $letter-spacing: 0.4px),
    //button
    $button: mat.define-typography-level(16px, 24px, 400),
);

@include mat.typography-hierarchy($typography-config);

// Create the theme objects. We can extract the values we need from the theme passed into the mixins.
$material-theme-light: mat.define-light-theme(
        (
            color: (
                primary: $material-primary-light,
                accent: $material-accent-light,
                warn: $warn-light
            ),
            typography: $typography-config,
            density: -3
        )
);

// For dark mode:
//
// primary material palette:
//
// default hue: default is used for the navigation header background color. It must have enough contrast on top of the mat-app-background (#303030). For dark mode this is a minimum of 200 to 400. It needs to be light enough to have the darker hue displayed on top of it.
// lighter hue: is used for the flow run status icons, PG banner run status icons, RPG banner run status icons as well as PG banner background color, RPG banner background color. For light mode this is a minimum of 50 up to 200.
// darker hue: is used for the PG banner background color, RPG banner background color. For light mode this is a minimum of 700 to 900 (or A700). It needs to be dark enough to be displayed on top of the default hue.
$material-primary-dark: mat.define-palette($material-primary-dark-palette, 400, 200, A700);
// accent material palette color default hue must have enough contrast on top of the mat-app-background (#303030). For dark mode this is a minimum of 300 up to 500.
// accent material palette:
//
// default hue: must have enough contrast on top of the mat-app-background (#303030). For light mode this is a minimum of 300 up to 400.
// lighter hue: nothing
// darker hue: snackbar action button text color, Should be darker as the action button is on a light background in dark mode.
$material-accent-dark: mat.define-palette($material-accent-dark-palette, 200, 100, 900);
// warn material palette color default hue must have enough contrast on top of the mat-app-background (#303030). For dark mode this is a minimum of 300 up to 500.
$warn-dark: mat.define-palette($warn-dark-palette, 600, 200, 300);

$material-theme-dark: mat.define-dark-theme(
        (
            color: (
                primary: $material-primary-dark,
                accent: $material-accent-dark,
                warn: $warn-dark
            ),
            typography: $typography-config,
            density: 0
        )
);

