/* These tokens are generated using https://themes.angular-material.dev/ */
/* Preview: https://themes.angular-material.dev/?bold-font-weight=700&brand-font-family=Roboto&medium-font-weight=500&plain-font-family=Roboto®ular-font-weight=400&seed-error=%23FF5449&seed-neutral=%23938F94&seed-neutral-variant=%23948F99&seed-primary=%236750A4&seed-secondary=%23958DA4&seed-tertiary=%23B58392 */
/* Seed Colors: primary: #6750A4, secondary: #958DA4, tertiary: #B58392, error: #FF5449, neutral: #938F94, neutral-variant: #948F99 */
/* Seed Typography: plain-font-family: Roboto, brand-font-family: Roboto, bold-font-weight: 700, medium-font-weight: 500, regular-font-weight: 400 */
/* Make sure to import fonts in `` of html */
/*
OR
*/
@use "@angular/material" as mat;
/* Light Theme */
:root, :host {
@include mat.theme-overrides((
primary: #6750a4,
on-primary: #ffffff,
primary-container: #e9ddff,
on-primary-container: #22005d,
inverse-primary: #cfbcff,
primary-fixed: #e9ddff,
primary-fixed-dim: #cfbcff,
on-primary-fixed: #22005d,
on-primary-fixed-variant: #4f378a,
secondary: #625b70,
on-secondary: #ffffff,
secondary-container: #e8def8,
on-secondary-container: #1e192b,
secondary-fixed: #e8def8,
secondary-fixed-dim: #ccc2db,
on-secondary-fixed: #1e192b,
on-secondary-fixed-variant: #4a4458,
tertiary: #7e5260,
on-tertiary: #ffffff,
tertiary-container: #ffd9e3,
on-tertiary-container: #31101d,
tertiary-fixed: #ffd9e3,
tertiary-fixed-dim: #efb8c8,
on-tertiary-fixed: #31101d,
on-tertiary-fixed-variant: #633b48,
background: #fdf8f8,
on-background: #1c1b1c,
surface: #fdf8f8,
surface-dim: #ddd9d9,
surface-bright: #fdf8f8,
surface-container-lowest: #ffffff,
surface-container-low: #f7f3f2,
surface-container: #f1eded,
surface-container-high: #ebe7e7,
surface-container-highest: #e6e1e1,
on-surface: #1c1b1c,
shadow: #000000,
scrim: #000000,
surface-tint: #605d62,
inverse-surface: #313030,
inverse-on-surface: #f4f0f0,
outline: #79767b,
outline-variant: #cac5cb,
neutral: #797676,
neutral10: #1c1b1c,
error: #ba1a1a,
error-container: #ffdad6,
on-error: #ffffff,
on-error-container: #410002,
surface-variant: #e6e1e7,
on-surface-variant: #48464b,
neutral-variant: #79767b,
neutral-variant20: #322f34,
inverse-secondary: #ccc2db,
inverse-tertiary: #efb8c8,
));
}
/* Dark Theme */
.dark {
@include mat.theme-overrides((
primary: #cfbcff,
on-primary: #381e72,
primary-container: #4f378a,
on-primary-container: #e9ddff,
inverse-primary: #6750a4,
primary-fixed: #e9ddff,
primary-fixed-dim: #cfbcff,
on-primary-fixed: #22005d,
on-primary-fixed-variant: #4f378a,
secondary: #ccc2db,
on-secondary: #332d40,
secondary-container: #4a4458,
on-secondary-container: #e8def8,
secondary-fixed: #e8def8,
secondary-fixed-dim: #ccc2db,
on-secondary-fixed: #1e192b,
on-secondary-fixed-variant: #4a4458,
tertiary: #efb8c8,
on-tertiary: #4a2532,
tertiary-container: #633b48,
on-tertiary-container: #ffd9e3,
tertiary-fixed: #ffd9e3,
tertiary-fixed-dim: #efb8c8,
on-tertiary-fixed: #31101d,
on-tertiary-fixed-variant: #633b48,
background: #141313,
on-background: #e6e1e1,
surface: #141313,
surface-dim: #141313,
surface-bright: #3a3939,
surface-container-lowest: #0f0e0e,
surface-container-low: #1c1b1c,
surface-container: #201f20,
surface-container-high: #2b2a2a,
surface-container-highest: #363435,
on-surface: #e6e1e1,
shadow: #000000,
scrim: #000000,
surface-tint: #cac5ca,
inverse-surface: #e6e1e1,
inverse-on-surface: #313030,
outline: #938f95,
outline-variant: #48464b,
neutral: #797676,
neutral10: #1c1b1c,
error: #ffb4ab,
error-container: #93000a,
on-error: #690005,
on-error-container: #ffdad6,
surface-variant: #48464b,
on-surface-variant: #cac5cb,
neutral-variant: #79767b,
neutral-variant20: #322f34,
inverse-secondary: #625b70,
inverse-tertiary: #7e5260,
));
}
/* Typography */
:root, :host {
/* core typography tokens are not generating css variables, hence below */
--mat-sys-brand-font-family: Roboto;
--mat-sys-plain-font-family: Roboto;
--mat-sys-bold-font-weight: 700;
--mat-sys-medium-font-weight: 500;
--mat-sys-regular-font-weight: 400;
@include mat.theme-overrides((
brand-family: Roboto,
plain-family: Roboto,
bold-weight: 700,
medium-weight: 500,
regular-weight: 400,
headline-large-font: var(--mat-sys-brand-font-family),
headline-medium-font: var(--mat-sys-brand-font-family),
headline-small-font: var(--mat-sys-brand-font-family),
display-large-font: var(--mat-sys-brand-font-family),
display-medium-font: var(--mat-sys-brand-font-family),
display-small-font: var(--mat-sys-brand-font-family),
title-large-font: var(--mat-sys-brand-font-family),
body-large: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height) var(--mat-sys-body-large-font),
body-medium: var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) var(--mat-sys-body-medium-font),
body-small: var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) var(--mat-sys-body-small-font),
label-large: var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) var(--mat-sys-label-large-font),
label-medium: var(--mat-sys-label-medium-weight) var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height) var(--mat-sys-label-medium-font),
label-small: var(--mat-sys-label-small-weight) var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) var(--mat-sys-label-small-font),
title-large: var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) var(--mat-sys-title-large-font),
title-medium: var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height) var(--mat-sys-title-medium-font),
title-small: var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) var(--mat-sys-title-small-font),
headline-large: var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font),
headline-medium: var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height) var(--mat-sys-headline-medium-font),
headline-small: var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font),
display-large: var(--mat-sys-display-large-weight) var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height) var(--mat-sys-display-large-font),
display-medium: var(--mat-sys-display-medium-weight) var(--mat-sys-display-medium-size) / var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font),
display-small: var(--mat-sys-display-small-weight) var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height) var(--mat-sys-display-small-font),
body-large-font: var(--mat-sys-plain-font-family),
body-medium-font: var(--mat-sys-plain-font-family),
body-small-font: var(--mat-sys-plain-font-family),
label-large-font: var(--mat-sys-plain-font-family),
label-medium-font: var(--mat-sys-plain-font-family),
label-small-font: var(--mat-sys-plain-font-family),
title-medium-font: var(--mat-sys-plain-font-family),
title-small-font: var(--mat-sys-plain-font-family),
label-large-weight-prominent: var(--mat-sys-bold-font-weight),
label-medium-weight-prominent: var(--mat-sys-bold-font-weight),
label-large-weight: var(--mat-sys-medium-font-weight),
label-medium-weight: var(--mat-sys-medium-font-weight),
label-small-weight: var(--mat-sys-medium-font-weight),
title-medium-weight: var(--mat-sys-medium-font-weight),
title-small-weight: var(--mat-sys-medium-font-weight),
body-large-weight: var(--mat-sys-regular-font-weight),
body-medium-weight: var(--mat-sys-regular-font-weight),
body-small-weight: var(--mat-sys-regular-font-weight),
display-large-weight: var(--mat-sys-regular-font-weight),
display-medium-weight: var(--mat-sys-regular-font-weight),
display-small-weight: var(--mat-sys-regular-font-weight),
headline-large-weight: var(--mat-sys-regular-font-weight),
headline-medium-weight: var(--mat-sys-regular-font-weight),
headline-small-weight: var(--mat-sys-regular-font-weight),
title-large-weight: var(--mat-sys-regular-font-weight),
));
}