added a stylesheet specific to themes
Chris Veilleux
parent
edc956e4b8
commit
ecc26fec1b
24
angular.json
24
angular.json
|
|
@ -27,7 +27,8 @@
|
|||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
|
|
@ -88,7 +89,8 @@
|
|||
"tsConfig": "src/tsconfig.spec.json",
|
||||
"karmaConfig": "src/karma.conf.js",
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
|
|
@ -187,7 +189,8 @@
|
|||
"projects/market/src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
|
|
@ -264,7 +267,8 @@
|
|||
"tsConfig": "projects/market/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/market/karma.conf.js",
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
|
|
@ -363,7 +367,8 @@
|
|||
"projects/sso/src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
|
|
@ -440,7 +445,8 @@
|
|||
"tsConfig": "projects/sso/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/sso/karma.conf.js",
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
|
|
@ -574,7 +580,8 @@
|
|||
"projects/account/src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
|
|
@ -635,7 +642,8 @@
|
|||
"tsConfig": "projects/account/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/account/karma.conf.js",
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
|
|
|
|||
|
|
@ -1,89 +1,3 @@
|
|||
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
// Be sure that you only ever include 'mat-core' mixin once!
|
||||
// it should not be included for each theme.
|
||||
@include mat-core();
|
||||
|
||||
// Mycroft palette defined using http://mcg.mbitson.com
|
||||
$mycroft-color-primary: (
|
||||
50 : #e4f4fd,
|
||||
100 : #bde5fb,
|
||||
200 : #91d3f8,
|
||||
300 : #64c1f5,
|
||||
400 : #43b4f2,
|
||||
500 : #22a7f0,
|
||||
600 : #1e9fee,
|
||||
700 : #1996ec,
|
||||
800 : #148ce9,
|
||||
900 : #0c7ce5,
|
||||
A100 : #ffffff,
|
||||
A200 : #dcedff,
|
||||
A400 : #a9d2ff,
|
||||
A700 : #90c5ff,
|
||||
contrast: (
|
||||
50 : #000000,
|
||||
100 : #000000,
|
||||
200 : #000000,
|
||||
300 : #000000,
|
||||
400 : #000000,
|
||||
500 : #000000,
|
||||
600 : #000000,
|
||||
700 : #ffffff,
|
||||
800 : #ffffff,
|
||||
900 : #ffffff,
|
||||
A100 : #000000,
|
||||
A200 : #000000,
|
||||
A400 : #000000,
|
||||
A700 : #000000,
|
||||
)
|
||||
);
|
||||
|
||||
$mycroft-color-secondary: (
|
||||
50 : #e6e8ea,
|
||||
100 : #c0c5cb,
|
||||
200 : #969fa8,
|
||||
300 : #6b7885,
|
||||
400 : #4c5b6a,
|
||||
500 : #2c3e50,
|
||||
600 : #273849,
|
||||
700 : #213040,
|
||||
800 : #1b2837,
|
||||
900 : #101b27,
|
||||
A100 : #68abff,
|
||||
A200 : #358fff,
|
||||
A400 : #0272ff,
|
||||
A700 : #0067e7,
|
||||
contrast: (
|
||||
50 : #000000,
|
||||
100 : #000000,
|
||||
200 : #000000,
|
||||
300 : #ffffff,
|
||||
400 : #ffffff,
|
||||
500 : #ffffff,
|
||||
600 : #ffffff,
|
||||
700 : #ffffff,
|
||||
800 : #ffffff,
|
||||
900 : #ffffff,
|
||||
A100 : #000000,
|
||||
A200 : #000000,
|
||||
A400 : #ffffff,
|
||||
A700 : #ffffff,
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
// mandatory stuff for theming
|
||||
$mycroft-palette-primary: mat-palette($mycroft-color-primary);
|
||||
$mycroft-palette-accent: mat-palette($mycroft-color-secondary);
|
||||
|
||||
// include the custom theme components into a theme object
|
||||
$mycroft-theme: mat-light-theme($mycroft-palette-primary, $mycroft-palette-accent);
|
||||
|
||||
// include the custom theme object into the angular material theme
|
||||
@include angular-material-theme($mycroft-theme);
|
||||
|
||||
.mycroft-snackbar {
|
||||
width: 500px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,185 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Noto+Sans");
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
$mycroft-typography: mat-typography-config(
|
||||
$font-family: '"Noto Sans", sans-serif'
|
||||
);
|
||||
|
||||
// Be sure that you only ever include 'mat-core' mixin once!
|
||||
// it should not be included for each theme.
|
||||
@include mat-core($mycroft-typography);
|
||||
|
||||
// Mycroft palette defined using http://mcg.mbitson.com
|
||||
$mycroft-color-primary: (
|
||||
50 : #e4f4fd,
|
||||
100 : #bde5fb,
|
||||
200 : #91d3f8,
|
||||
300 : #64c1f5,
|
||||
400 : #43b4f2,
|
||||
500 : #22a7f0,
|
||||
600 : #1e9fee,
|
||||
700 : #1996ec,
|
||||
800 : #148ce9,
|
||||
900 : #0c7ce5,
|
||||
A100 : #ffffff,
|
||||
A200 : #dcedff,
|
||||
A400 : #a9d2ff,
|
||||
A700 : #90c5ff,
|
||||
contrast: (
|
||||
50 : #2c3e50,
|
||||
100 : #2c3e50,
|
||||
200 : #2c3e50,
|
||||
300 : #2c3e50,
|
||||
400 : #ffffff,
|
||||
500 : #ffffff,
|
||||
600 : #ffffff,
|
||||
700 : #ffffff,
|
||||
800 : #ffffff,
|
||||
900 : #ffffff,
|
||||
A100 : #2c3e50,
|
||||
A200 : #2c3e50,
|
||||
A400 : #2c3e50,
|
||||
A700 : #2c3e50,
|
||||
)
|
||||
);
|
||||
|
||||
$mycroft-color-secondary: (
|
||||
50 : #e6e8ea,
|
||||
100 : #c0c5cb,
|
||||
200 : #969fa8,
|
||||
300 : #6b7885,
|
||||
400 : #4c5b6a,
|
||||
500 : #2c3e50,
|
||||
600 : #273849,
|
||||
700 : #213040,
|
||||
800 : #1b2837,
|
||||
900 : #101b27,
|
||||
A100 : #40dbb0,
|
||||
A200 : #fee255,
|
||||
A400 : #fd9e66,
|
||||
A700 : #5b6984,
|
||||
contrast: (
|
||||
50 : #2c3e50,
|
||||
100 : #2c3e50,
|
||||
200 : #ffffff,
|
||||
300 : #ffffff,
|
||||
400 : #ffffff,
|
||||
500 : #ffffff,
|
||||
600 : #ffffff,
|
||||
700 : #ffffff,
|
||||
800 : #ffffff,
|
||||
900 : #ffffff,
|
||||
A100 : #2c3e50,
|
||||
A200 : #2c3e50,
|
||||
A400 : #2c3e50,
|
||||
A700 : #ffffff,
|
||||
)
|
||||
);
|
||||
|
||||
$mycroft-color-warn: (
|
||||
50 : #fdebeb,
|
||||
100 : #f9cdcd,
|
||||
200 : #f5abab,
|
||||
300 : #f18989,
|
||||
400 : #ee7070,
|
||||
500 : #eb5757,
|
||||
600 : #e94f4f,
|
||||
700 : #e54646,
|
||||
800 : #e23c3c,
|
||||
900 : #dd2c2c,
|
||||
A100 : #ffffff,
|
||||
A200 : #ffeaea,
|
||||
A400 : #ffb7b7,
|
||||
A700 : #ff9d9d,
|
||||
contrast: (
|
||||
50 : #2c3e50,
|
||||
100 : #2c3e50,
|
||||
200 : #2c3e50,
|
||||
300 : #2c3e50,
|
||||
400 : #2c3e50,
|
||||
500 : #2c3e50,
|
||||
600 : #ffffff,
|
||||
700 : #ffffff,
|
||||
800 : #ffffff,
|
||||
900 : #ffffff,
|
||||
A100 : #2c3e50,
|
||||
A200 : #2c3e50,
|
||||
A400 : #2c3e50,
|
||||
A700 : #2c3e50,
|
||||
)
|
||||
);
|
||||
|
||||
$mycroft-light-theme-background: (
|
||||
status-bar: map_get($mat-grey, 300),
|
||||
app-bar: map_get($mat-grey, 100),
|
||||
background: #f1f3f4,
|
||||
hover: rgba(black, 0.04),
|
||||
card: white,
|
||||
dialog: white,
|
||||
disabled-button: $black-12-opacity,
|
||||
raised-button: white,
|
||||
focused-button: $black-6-opacity,
|
||||
selected-button: map_get($mat-grey, 300),
|
||||
selected-disabled-button: map_get($mat-grey, 400),
|
||||
disabled-button-toggle: map_get($mat-grey, 200),
|
||||
unselected-chip: map_get($mat-grey, 700),
|
||||
disabled-list-option: black,
|
||||
);
|
||||
|
||||
$mycroft-light-theme-foreground: (
|
||||
base: black,
|
||||
divider: $dark-dividers,
|
||||
dividers: $dark-dividers,
|
||||
disabled: $dark-disabled-text,
|
||||
disabled-button: rgba(black, 0.26),
|
||||
disabled-text: $dark-disabled-text,
|
||||
elevation: black,
|
||||
hint-text: $dark-disabled-text,
|
||||
secondary-text: $dark-secondary-text,
|
||||
icon: rgba(black, 0.54),
|
||||
icons: rgba(black, 0.54),
|
||||
text: rgba(black, 0.87),
|
||||
slider-min: rgba(black, 0.87),
|
||||
slider-off: rgba(black, 0.26),
|
||||
slider-off-active: rgba(black, 0.38),
|
||||
);
|
||||
|
||||
// instead of creating a theme with mat-light-theme like a sane person,
|
||||
// we will create our own theme-creating function that lets us apply our own
|
||||
// foreground and background palettes.
|
||||
@function mycroft-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {
|
||||
@return (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: $warn,
|
||||
is-dark: false,
|
||||
foreground: $mycroft-light-theme-foreground,
|
||||
background: $mycroft-light-theme-background,
|
||||
);
|
||||
}
|
||||
|
||||
// define custom color palettes using the Mycroft colors
|
||||
$custom-theme-primary: mat-palette($mycroft-color-primary);
|
||||
$custom-theme-accent: mat-palette($mycroft-color-secondary);
|
||||
$custom-theme-warn: mat-palette($mycroft-color-warn);
|
||||
|
||||
// include the custom theme components into a theme object
|
||||
$custom-theme: mycroft-light-theme(
|
||||
$custom-theme-primary,
|
||||
$custom-theme-accent,
|
||||
$custom-theme-warn
|
||||
);
|
||||
|
||||
@mixin mycroft-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
|
||||
.form-title {
|
||||
background-color: mat-color($primary, 200);
|
||||
color: mat-contrast($primary, 200)
|
||||
}
|
||||
}
|
||||
|
||||
// include the custom theme object into the angular material theme
|
||||
@include angular-material-theme($custom-theme);
|
||||
@include mycroft-theme($custom-theme);
|
||||
Loading…
Reference in New Issue