mirror of
https://github.com/google/nomulus
synced 2026-05-23 08:11:48 +00:00
104 lines
2.9 KiB
SCSS
104 lines
2.9 KiB
SCSS
@use "sass:map";
|
|
@use "@angular/material" as mat;
|
|
|
|
/** Copied from docs section **/
|
|
|
|
// Include the common styles for Angular Material. We include this here so that you only
|
|
// have to load a single css file for Angular Material in your app.
|
|
// Be sure that you only ever include this mixin once!
|
|
@include mat.core();
|
|
|
|
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
|
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
|
// hue. Available color palettes: https://material.io/design/color/
|
|
$theme-primary: mat.define-palette(mat.$indigo-palette);
|
|
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
|
|
|
|
// The warn palette is optional (defaults to red).
|
|
$theme-warn: mat.define-palette(mat.$red-palette);
|
|
|
|
/**
|
|
** Application specific section - Global styles and mixins
|
|
**/
|
|
|
|
@mixin form-field-density($density) {
|
|
$field-typography: mat.define-typography-config(
|
|
$body-1: mat.define-typography-level(12px, 24px, 400),
|
|
);
|
|
@include mat.typography-level($field-typography, "body-1");
|
|
@include mat.form-field-density($density);
|
|
}
|
|
|
|
// Define lowest possible density class to be used in application
|
|
// In the same manner -1...-5 classes can be defined
|
|
.mat-form-field-density-5 {
|
|
@include form-field-density(-5);
|
|
}
|
|
|
|
@import "@angular/material/theming";
|
|
|
|
// Define application specific typography settings, font-family, etc
|
|
$typography-configuration: mat-typography-config(
|
|
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
|
|
);
|
|
|
|
@include angular-material-typography($typography-configuration);
|
|
|
|
/**
|
|
** Light theme
|
|
**/
|
|
$light-theme: mat.define-light-theme(
|
|
(
|
|
color: (
|
|
primary: $theme-primary,
|
|
accent: $theme-accent,
|
|
warn: $theme-warn,
|
|
),
|
|
density: 0,
|
|
)
|
|
);
|
|
|
|
// Access and define a class with secondary color exposed
|
|
.secondary-text {
|
|
color: map.get(mat.$light-theme-foreground-palette, "secondary-text");
|
|
}
|
|
|
|
:root {
|
|
--text: #{map.get(mat.$light-theme-foreground-palette, "base")};
|
|
--primary: #{mat.get-color-from-palette($theme-primary, 500)};
|
|
--secondary: #{map.get(mat.$light-theme-foreground-palette, "secondary-text")};
|
|
}
|
|
|
|
@include mat.all-component-themes($light-theme);
|
|
|
|
/**
|
|
** Dark theme
|
|
**/
|
|
$dark-theme: mat.define-dark-theme(
|
|
(
|
|
color: (
|
|
primary: mat.define-palette(mat.$pink-palette),
|
|
accent: mat.define-palette(mat.$blue-grey-palette),
|
|
),
|
|
density: 0,
|
|
)
|
|
);
|
|
|
|
@mixin _apply-dark-mode-colors() {
|
|
@include mat.all-component-colors($dark-theme);
|
|
|
|
.secondary-text {
|
|
color: map.get(mat.$dark-theme-foreground-palette, "secondary-text");
|
|
}
|
|
|
|
:root {
|
|
--text: #{map.get(mat.$dark-theme-foreground-palette, "base")};
|
|
--primary: #{mat.get-color-from-palette(mat.$pink-palette, 500)};
|
|
--secondary: #{map.get(mat.$dark-theme-background-palette, "secondary-text")};
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
@include _apply-dark-mode-colors();
|
|
}
|