sandre
137b2ab1fc
Reviewed-on: #3 Co-authored-by: sandre <perso@sebastienandre.com> Co-committed-by: sandre <perso@sebastienandre.com>
206 lines
9.0 KiB
SCSS
206 lines
9.0 KiB
SCSS
/* 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 `<head>` of html */
|
|
/*
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap');
|
|
</style>
|
|
|
|
OR
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap">
|
|
*/
|
|
|
|
@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),
|
|
));
|
|
}
|