diff --git a/angular.json b/angular.json index 6317d16..31a1698 100644 --- a/angular.json +++ b/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": [ diff --git a/src/styles.scss b/src/styles.scss index e10fbd8..e78af37 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -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; } diff --git a/src/theme.scss b/src/theme.scss new file mode 100644 index 0000000..f17f626 --- /dev/null +++ b/src/theme.scss @@ -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);