143 lines
3.7 KiB
SCSS
143 lines
3.7 KiB
SCSS
@use '~@angular/material' as mat;
|
|
@import "app/ui/misc/navigation/navigation.component.scss";
|
|
@import "~@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';
|
|
|
|
$app-green-theme-primary-palette: (
|
|
50: #e3f3f3,
|
|
100: #b8e2e0,
|
|
200: #89cecc,
|
|
300: #59bab8,
|
|
400: #36aca8,
|
|
500: #129d99,
|
|
600: #109591,
|
|
700: #0d8b86,
|
|
800: #0a817c,
|
|
900: #056f6b,
|
|
A100: #9ffffa,
|
|
A200: #6cfff7,
|
|
A400: #39fff5,
|
|
A700: #20fff3,
|
|
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
|
|
)
|
|
);
|
|
|
|
$app-green-theme-accent-palette: (
|
|
50: #fefbee,
|
|
100: #fdf5d5,
|
|
200: #fbeeb9,
|
|
300: #f9e79c,
|
|
400: #f8e287,
|
|
500: #f7dd72,
|
|
600: #f6d96a,
|
|
700: #f5d45f,
|
|
800: #f3cf55,
|
|
900: #f1c742,
|
|
A100: #ffffff,
|
|
A200: #ffffff,
|
|
A400: #fff6dc,
|
|
A700: #fff0c3,
|
|
contrast: (
|
|
50: #000000,
|
|
100: #000000,
|
|
200: #000000,
|
|
300: #000000,
|
|
400: #000000,
|
|
500: #000000,
|
|
600: #000000,
|
|
700: #000000,
|
|
800: #000000,
|
|
900: #000000,
|
|
A100: #000000,
|
|
A200: #000000,
|
|
A400: #000000,
|
|
A700: #000000
|
|
)
|
|
);
|
|
|
|
$app-green-theme-primary: mat.define-palette($app-green-theme-primary-palette);
|
|
$app-green-theme-accent: mat.define-palette($app-green-theme-accent-palette, A200, A100, A400);
|
|
$app-green-theme-warn: mat.define-palette(mat.$red-palette);
|
|
|
|
$app-green-theme-background: (
|
|
status-bar: map_get(mat.$grey-palette, 300),
|
|
app-bar: map_get(mat.$grey-palette, 100),
|
|
background: map_get(mat.$grey-palette, 50),
|
|
hover: rgba(black, 0.04),
|
|
card: white,
|
|
dialog: white,
|
|
disabled-button: rgba(black, 0.12),
|
|
raised-button: white,
|
|
focused-button: $dark-focused,
|
|
selected-button: map_get(mat.$grey-palette, 300),
|
|
selected-disabled-button: map_get(mat.$grey-palette, 400),
|
|
disabled-button-toggle: map_get(mat.$grey-palette, 200),
|
|
unselected-chip: map_get(mat.$grey-palette, 300),
|
|
disabled-list-option: map_get(mat.$grey-palette, 200)
|
|
);
|
|
|
|
$app-green-theme-foreground: (
|
|
base: white,
|
|
divider: $dark-dividers,
|
|
dividers: $dark-dividers,
|
|
disabled: $dark-disabled-text,
|
|
disabled-button: rgba(black, 0.26),
|
|
disabled-text: $dark-disabled-text,
|
|
hint-text: $dark-disabled-text,
|
|
secondary-text: $dark-secondary-text,
|
|
icon: rgba(white, 0.54),
|
|
icons: rgba(white, 0.54),
|
|
text: rgba(white, 0.87),
|
|
slider-min: rgba(black, 0.87),
|
|
slider-off: rgba(black, 0.26),
|
|
slider-off-active: rgba(black, 0.38)
|
|
);
|
|
|
|
$custom-theme: (
|
|
primary: $app-green-theme-primary,
|
|
accent: $app-green-theme-accent,
|
|
warn: $app-green-theme-warn,
|
|
is-dark: false,
|
|
foreground: $app-green-theme-foreground,
|
|
background: $app-green-theme-background
|
|
);
|
|
|
|
$custom-typography: mat.define-typography-config(
|
|
$font-family: "Lato, regular",
|
|
$headline: mat.define-typography-level(32px, 48px, 700),
|
|
$body-1: mat.define-typography-level(16px, 24px, 500)
|
|
);
|
|
|
|
.green-theme {
|
|
@include mat.core();
|
|
|
|
@include mat.all-component-themes($custom-theme);
|
|
@include navigation-component-theme($custom-theme);
|
|
|
|
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
|
|
@include mat.typography-hierarchy($custom-typography);
|
|
|
|
// Override typography for a specific Angular Material components.
|
|
@include mat.checkbox-typography($custom-typography);
|
|
|
|
// Override typography for all Angular Material, including mat-base-typography and all components.
|
|
@include mat.all-component-typographies($custom-typography);
|
|
//If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:
|
|
|
|
// Override the typography in the core CSS.
|
|
@include mat.core($custom-typography);
|
|
}
|