/*
 * Copyright (C) 2021 The Gravitee team (http://gravitee.io)
 *
 * Licensed 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;

@use './gio-mat-palettes' as palettes;

// Config mat Typography
$mat-typography: mat.m2-define-typography-config(
  $font-family: '"Kanit", "Helvetica Neue", sans-serif',
  $headline-1: mat.m2-define-typography-level(112px, 112px, 400, $letter-spacing: -0.05em),
  $headline-2: mat.m2-define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $headline-3: mat.m2-define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $headline-4: mat.m2-define-typography-level(60px, 66px, 600, $letter-spacing: -0.5px),
  $headline-5: mat.m2-define-typography-level(34px, 44px, 600),
  $headline-6: mat.m2-define-typography-level(26px, 36px, 600),
  $subtitle-1: mat.m2-define-typography-level(18px, 24px, 600, $letter-spacing: 0.4px),
  $subtitle-2: mat.m2-define-typography-level(14px, 20px, 700, '"Manrope", sans-serif', $letter-spacing: 0.4px),
  $body-1: mat.m2-define-typography-level(14px, 22px, 500, '"Manrope", sans-serif', $letter-spacing: 0.4px),
  $body-2: mat.m2-define-typography-level(14px, 22px, 500, '"Manrope", sans-serif', $letter-spacing: 0.4px),
  $caption: mat.m2-define-typography-level(12px, 16px, 400, '"Manrope", sans-serif'),
  $button: mat.m2-define-typography-level(14px, 14px, 500, '"Manrope", sans-serif'),
  $overline: mat.m2-define-typography-level(inherit, 1.125, 400, '"Manrope", sans-serif'),
);

// Mat default light theme
$mat-theme-default: mat.m2-define-light-theme(
  (
    color: (
      primary: palettes.$mat-primary-palette,
      accent: palettes.$mat-accent-palette,
      warn: palettes.$mat-error-palette,
    ),
    typography: $mat-typography,
    density: 0,
  )
);

// Mat default dark theme
$mat-theme-dark: mat.m2-define-dark-theme(
  (
    color: (
      primary: palettes.$mat-primary-palette,
      accent: palettes.$mat-accent-palette,
      warn: palettes.$mat-error-palette,
    ),
    typography: $mat-typography,
  )
);

// Custom mat background & foreground color
$mat-background: map.get($mat-theme-default, background);
$mat-foreground: map.get($mat-theme-default, foreground);

// Override $light-theme-background-palette config from node_modules/@angular/material/core/theming/_palette.scss
$gio-background: map.merge(
  $mat-background,
  (
    background: mat.m2-get-color-from-palette(palettes.$mat-dove-palette, default),
    tooltip: mat.m2-get-color-from-palette(palettes.$mat-space-palette, default),
  )
);

// Override $light-theme-foreground-palette config from node_modules/@angular/material/core/theming/_palette.scss
$gio-foreground: map.merge(
  $mat-foreground,
  (
    text: mat.m2-get-color-from-palette(palettes.$mat-space-palette, default),
    slider-min: mat.m2-get-color-from-palette(palettes.$mat-space-palette, default),
  )
);
$gio-background-foreground: (
  background: $gio-background,
  foreground: $gio-foreground,
);

// For backward compatibility with Material Design merge $gio-background-foreground into $mat-theme-default and into $mat-theme-default.color.
// Otherwise the colors of bg and fg seton partially applied
$mat-color: map.merge(map.get($mat-theme-default, color), $gio-background-foreground);
$mat-theme: map.merge(
  $mat-theme-default,
  map.merge(
    $gio-background-foreground,
    (
      color: $mat-color,
    )
  )
);