theme.scss

@use '@angular/material' as mat;
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
//  The following line adds:
//    1. Default typography styles for all components
//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
//  If you specify typography styles for the components you use elsewhere, you should delete this line.
//  If you don't need the default component typographies but still want the hierarchy styles,
//  you can delete this line and instead use:
//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
@include mat.all-legacy-component-typographies();
@include mat.legacy-core();

// palettes générées sur http://mcg.mbitson.com
$mat-irstea-marine: (
    50 : #e0e7f0,
    100 : #b3c4d9,
    200 : #809dc0,
    300 : #4d75a6,
    400 : #265893,
    500 : #003a80,
    600 : #003478,
    700 : #002c6d,
    800 : #002563,
    900 : #001850,
    A100 : #839cff,
    A200 : #5073ff,
    A400 : #1d4bff,
    A700 : #0336ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #ffffff,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);

$mat-irstea-ocean: (
    50 : #e0f3fb,
    100 : #b3e2f6,
    200 : #80cff0,
    300 : #4dbbe9,
    400 : #26ade5,
    500 : #009ee0,
    600 : #0096dc,
    700 : #008cd8,
    800 : #0082d3,
    900 : #0070cb,
    A100 : #f3f9ff,
    A200 : #c0dfff,
    A400 : #8dc5ff,
    A700 : #74b9ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$mat-irstea-prune: (
    50 : #f5e3f0,
    100 : #e7b8d9,
    200 : #d789c0,
    300 : #c759a6,
    400 : #bb3693,
    500 : #af1280,
    600 : #a81078,
    700 : #9f0d6d,
    800 : #960a63,
    900 : #860550,
    A100 : #ffb3db,
    A200 : #ff80c3,
    A400 : #ff4dab,
    A700 : #ff349f,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #ffffff,
    )
);

$mat-irstea-brique: (
    50 : #fae3e3,
    100 : #f2b8b9,
    200 : #ea898b,
    300 : #e25a5d,
    400 : #db363a,
    500 : #d51317,
    600 : #d01114,
    700 : #ca0e11,
    800 : #c40b0d,
    900 : #ba0607,
    A100 : #ffe4e4,
    A200 : #ffb1b1,
    A400 : #ff7e7f,
    A700 : #ff6465,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$mat-irstea-rouille: (
    50 : #fcebe2,
    100 : #f8ceb6,
    200 : #f4ad86,
    300 : #f08c55,
    400 : #ec7430,
    500 : #e95b0c,
    600 : #e6530a,
    700 : #e34908,
    800 : #df4006,
    900 : #d92f03,
    A100 : #ffffff,
    A200 : #ffd5ce,
    A400 : #ffaa9b,
    A700 : #ff9481,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);


$nghyd-primary: mat.define-palette($mat-irstea-marine);
$nghyd-accent:  mat.define-palette($mat-irstea-ocean);
$nghyd-warn:    mat.define-palette($mat-irstea-prune);
$nghyd-error:   mat.define-palette($mat-irstea-rouille);
// $nghyd-warn:    mat-palette($mat-irstea-rouille);

// $nghyd-theme: mat.define-light-theme($nghyd-primary, $nghyd-accent, $nghyd-warn);

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

@include mat.all-legacy-component-themes($nghyd-theme);

// reuse custom base colors anywhere
$primary: map-get($nghyd-theme, primary);
$accent: map-get($nghyd-theme, accent);
$warn: map-get($nghyd-theme, warn);
// $error: map-get($nghyd-error);

// convenience classes (functions mat-* cannot be used outside of this file)

.color-primary {
    color: mat.get-color-from-palette($primary);
}
.bg-primary {
    background-color: mat.get-color-from-palette($primary);
}
.bg-primary-light {
    background-color: mat.get-color-from-palette($primary, 300);
}
.bg-primary-lighter {
    background-color: mat.get-color-from-palette($primary, 200);
}
.bg-primary-verylight {
    background-color: mat.get-color-from-palette($primary, 100);
}
.bg-primary-extralight {
    background-color: mat.get-color-from-palette($primary, 50);
}
.border-primary {
    border-color: mat.get-color-from-palette($primary);
}

.color-accent {
    color: mat.get-color-from-palette($accent);
}
.bg-accent {
    background-color: mat.get-color-from-palette($accent);
}
.bg-accent-light {
    background-color: mat.get-color-from-palette($accent, 300);
}
.bg-accent-lighter {
    background-color: mat.get-color-from-palette($accent, 200);
}
.bg-accent-verylight {
    background-color: mat.get-color-from-palette($accent, 100);
}
.bg-accent-extralight {
    background-color: mat.get-color-from-palette($accent, 50);
}
.border-accent {
    border-color: mat.get-color-from-palette($accent);
}

.color-warn {
    color: mat.get-color-from-palette($warn);
}
.bg-warn {
    background-color: mat.get-color-from-palette($warn);
}
.bg-warn-light {
    background-color: mat.get-color-from-palette($warn, 300);
}
.bg-warn-lighter {
    background-color: mat.get-color-from-palette($warn, 200);
}
.bg-warn-verylight {
    background-color: mat.get-color-from-palette($warn, 100);
}
.bg-warn-extralight {
    background-color: mat.get-color-from-palette($warn, 50);
}
.border-warn {
    border-color: mat.get-color-from-palette($warn);
}

.color-error {
    color: mat.get-color-from-palette($nghyd-error);
}
.bg-error {
    background-color: mat.get-color-from-palette($nghyd-error);
}
.border-error {
    border-color: mat.get-color-from-palette($nghyd-error);
}

.mat-button-toggle-checked {
    background-color: mat.get-color-from-palette($accent);
    color: mat.get-color-from-palette($accent, default-contrast) !important;
}