Upgrade Nx and Angular (#1646)
* Upgrade Nx and Angular * Update changelog * Feature/eliminate angular material css vars (#1648) * Eliminate angular-material-css-vars * Update changelogpull/1654/head
Thomas Kaul
2 years ago
committed by
GitHub
parent
e5f2a3865d
commit
0000317041
@ -1,18 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
|
||||
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
|
||||
@ -1,6 +1,4 @@
|
||||
$mat-css-dark-theme-selector: '.is-dark-theme';
|
||||
|
||||
@import 'node_modules/angular-material-css-vars/src/lib/public-util';
|
||||
|
||||
$alpha-disabled-text: 0.38;
|
||||
$alpha-hover: 0.04;
|
||||
|
||||
@ -0,0 +1,110 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
$dark-primary-text: rgba(black, 0.87);
|
||||
$light-primary-text: white;
|
||||
|
||||
$gf-primary: (
|
||||
50: var(--gf-theme-primary-50),
|
||||
100: var(--gf-theme-primary-100),
|
||||
200: var(--gf-theme-primary-200),
|
||||
300: var(--gf-theme-primary-300),
|
||||
400: var(--gf-theme-primary-400),
|
||||
500: var(--gf-theme-primary-500),
|
||||
600: var(--gf-theme-primary-600),
|
||||
700: var(--gf-theme-primary-700),
|
||||
800: var(--gf-theme-primary-800),
|
||||
900: var(--gf-theme-primary-900),
|
||||
A100: var(--gf-theme-primary-A100),
|
||||
A200: var(--gf-theme-primary-A200),
|
||||
A400: var(--gf-theme-primary-A400),
|
||||
A700: var(--gf-theme-primary-A700),
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $light-primary-text,
|
||||
400: $light-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text
|
||||
)
|
||||
);
|
||||
|
||||
$gf-secondary: (
|
||||
50: var(--gf-theme-secondary-50),
|
||||
100: var(--gf-theme-secondary-100),
|
||||
200: var(--gf-theme-secondary-200),
|
||||
300: var(--gf-theme-secondary-300),
|
||||
400: var(--gf-theme-secondary-400),
|
||||
500: var(--gf-theme-secondary-500),
|
||||
600: var(--gf-theme-secondary-600),
|
||||
700: var(--gf-theme-secondary-700),
|
||||
800: var(--gf-theme-secondary-800),
|
||||
900: var(--gf-theme-secondary-900),
|
||||
A100: var(--gf-theme-secondary-A100),
|
||||
A200: var(--gf-theme-secondary-A200),
|
||||
A400: var(--gf-theme-secondary-A400),
|
||||
A700: var(--gf-theme-secondary-A700),
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $light-primary-text,
|
||||
400: $light-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text
|
||||
)
|
||||
);
|
||||
|
||||
@include mat.core();
|
||||
@include mat.legacy-core();
|
||||
|
||||
// Create default theme
|
||||
$gf-theme-default: mat.define-light-theme(
|
||||
(
|
||||
color: (
|
||||
primary: mat.define-palette($gf-primary),
|
||||
accent: mat.define-palette($gf-secondary, 500, 900, A100)
|
||||
),
|
||||
density: 0,
|
||||
typography: mat.define-typography-config()
|
||||
)
|
||||
);
|
||||
@include mat.all-component-themes($gf-theme-default);
|
||||
@include mat.all-legacy-component-themes($gf-theme-default);
|
||||
|
||||
// Create dark theme
|
||||
$gf-theme-dark: mat.define-dark-theme(
|
||||
(
|
||||
color: (
|
||||
primary: mat.define-palette($gf-primary),
|
||||
accent: mat.define-palette($gf-secondary, 500, 900, A100)
|
||||
),
|
||||
density: 0,
|
||||
typography: mat.define-typography-config()
|
||||
)
|
||||
);
|
||||
.is-dark-theme {
|
||||
@include mat.all-component-colors($gf-theme-dark);
|
||||
@include mat.all-legacy-component-colors($gf-theme-dark);
|
||||
}
|
||||
|
||||
:root {
|
||||
--gf-theme-primary-500: #36cfcc;
|
||||
--gf-theme-primary-500-rgb: 0, 187, 255;
|
||||
--gf-theme-secondary-500: #3686cf;
|
||||
--gf-theme-secondary-500-rgb: 78, 208, 94;
|
||||
}
|
||||
Loading…
Reference in new issue