mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
129 lines
2.6 KiB
SCSS
129 lines
2.6 KiB
SCSS
/* Global styles imported in the main styles.scss of the app wrapper (shell, demo apps). */
|
|
|
|
@use 'sass:map';
|
|
@use '@angular/material' as mat;
|
|
@use './colors' as clr;
|
|
@use './typography' as tg;
|
|
@use './overrides' as ovr;
|
|
@use './theme' as th;
|
|
@use './inputs';
|
|
@use './tables';
|
|
|
|
@include mat.all-component-typographies();
|
|
@include mat.core();
|
|
@include clr.root-colors();
|
|
@include tg.fonts();
|
|
|
|
$body-tg-level: mat.m2-define-typography-level(
|
|
$font-family: tg.$font-family,
|
|
$font-weight: 400,
|
|
$font-size: tg.$font-size,
|
|
$line-height: 1rem,
|
|
$letter-spacing: normal,
|
|
);
|
|
|
|
$typography: mat.m2-define-typography-config(
|
|
$font-family: tg.$font-family,
|
|
$body-1: $body-tg-level,
|
|
$body-2: $body-tg-level,
|
|
);
|
|
|
|
// Light theme
|
|
$light-primary: mat.m2-define-palette(mat.$m2-grey-palette, 700, 200);
|
|
$light-accent: mat.m2-define-palette(mat.$m2-blue-palette, 800);
|
|
$light-theme: mat.m2-define-light-theme(
|
|
(
|
|
color: (
|
|
primary: $light-primary,
|
|
accent: $light-accent,
|
|
),
|
|
)
|
|
);
|
|
|
|
// Dark theme
|
|
$dark-primary: mat.m2-define-palette(mat.$m2-blue-grey-palette, 50);
|
|
$dark-accent: mat.m2-define-palette(mat.$m2-blue-palette, 200);
|
|
$dark-theme: map.deep-merge(
|
|
mat.m2-define-dark-theme(
|
|
(
|
|
color: (
|
|
primary: $dark-primary,
|
|
accent: $dark-accent,
|
|
),
|
|
)
|
|
),
|
|
(
|
|
'color': (
|
|
'background': (
|
|
background: map.get(clr.$colors, gray-800),
|
|
card: map.get(clr.$colors, gray-800),
|
|
),
|
|
'foreground': (
|
|
text: map.get(clr.$colors, gray-200),
|
|
),
|
|
),
|
|
'background': (
|
|
background: map.get(clr.$colors, gray-800),
|
|
card: map.get(clr.$colors, gray-800),
|
|
),
|
|
'foreground': (
|
|
'text': map.get(clr.$colors, gray-200),
|
|
),
|
|
'typography': $typography,
|
|
)
|
|
);
|
|
|
|
@include th.light-theme(true) {
|
|
color-scheme: light;
|
|
@include mat.all-component-themes($light-theme);
|
|
}
|
|
|
|
@include th.dark-theme(true) {
|
|
color-scheme: dark;
|
|
@include mat.all-component-themes($dark-theme);
|
|
}
|
|
|
|
:root {
|
|
@include ovr.mat-cmp-overrides();
|
|
}
|
|
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: var(--color-background);
|
|
color: var(--color-text);
|
|
@extend %body-01;
|
|
}
|
|
|
|
a {
|
|
/*
|
|
There are some anchor instance inside mat elements
|
|
that inherit the mat parent font styles; hence, we
|
|
need to have an explicit override.
|
|
*/
|
|
@extend %body-01;
|
|
color: var(--dynamic-blue-02);
|
|
}
|
|
|
|
.multiline-tooltip {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
hr {
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: var(--color-separator);
|
|
border: none;
|
|
margin-block: 0.875rem;
|
|
}
|
|
|
|
.ver-ruler {
|
|
width: 1px;
|
|
height: 100%;
|
|
background-color: var(--color-separator);
|
|
margin-inline: 0.875rem;
|
|
}
|