m3-theme.scss

// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.

@use 'sass:map';
@use '@angular/material' as mat;
@use 'src/components/cosmetics/_button-toggle-theme.scss' as buttontoggle;
@use 'src/components/cosmetics/_search-bar-theme.scss' as searchbar;
@use 'src/components/cosmetic-list/button-theme' as button;

// Note: Color palettes are generated from primary: #051232, secondary: #3661CF, tertiary: #FFFFFF
$_palettes: (
  primary: (
    0: #000000,
    10: #0d1a3a,
    20: #232f50,
    25: #2f3a5c,
    30: #3a4668,
    35: #465174,
    40: #525d81,
    50: #6b769b,
    60: #8490b6,
    70: #9faad2,
    80: #bac5ee,
    90: #dbe1ff,
    95: #eef0ff,
    98: #faf8ff,
    99: #fefbff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #00174b,
    20: #002a78,
    25: #003390,
    30: #003ea8,
    35: #164ab8,
    40: #2957c5,
    50: #4871df,
    60: #648bfb,
    70: #8ca8ff,
    80: #b4c5ff,
    90: #dbe1ff,
    95: #eef0ff,
    98: #faf8ff,
    99: #fefbff,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #1a1c1c,
    20: #2f3131,
    25: #3a3c3c,
    30: #454747,
    35: #515353,
    40: #5d5f5f,
    50: #767777,
    60: #909191,
    70: #aaabab,
    80: #c6c6c7,
    90: #e2e2e2,
    95: #f0f1f1,
    98: #f9f9f9,
    99: #fcfcfc,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    10: #1b1b1e,
    20: #303033,
    25: #3b3b3e,
    30: #474649,
    35: #525255,
    40: #5e5e61,
    50: #77767a,
    60: #919093,
    70: #acaaae,
    80: #c8c6c9,
    90: #e4e2e5,
    95: #f2f0f3,
    98: #fbf8fc,
    99: #fefbff,
    100: #ffffff,
    4: #0e0e10,
    6: #131316,
    12: #1f1f22,
    17: #2a2a2c,
    22: #343437,
    24: #39393c,
    87: #dbd9dc,
    92: #eae7eb,
    94: #f0edf0,
    96: #f5f3f6,
  ),
  neutral-variant: (
    0: #000000,
    10: #1a1b22,
    20: #2f3037,
    25: #3a3b42,
    30: #45464e,
    35: #51525a,
    40: #5d5e66,
    50: #76767f,
    60: #8f9099,
    70: #aaaab3,
    80: #c6c6cf,
    90: #e2e2eb,
    95: #f0f0f9,
    98: #faf8ff,
    99: #fefbff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
);

$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,    
    tertiary: $_tertiary,
  ),
  typography: (
    plain-family: '"Karla", serif'
  )

));

html {
  @include mat.core-theme($light-theme);
  @include mat.form-field-color($light-theme);
  @include buttontoggle.backgroundcolor($light-theme);
  @include buttontoggle.center($light-theme);
  @include buttontoggle.borders($light-theme);
  @include searchbar.colors($light-theme);
  @include button.style($light-theme);
}