Merge pull request #27 from MycroftAI/ui-theming

Initial theming file definitions
2018-12-20 14:02:35 -06:00 · 2018-12-20 14:02:35 -06:00 · eec9ca9ffb
parent dc47e6f5fd de2ee8a118
commit eec9ca9ffb
4 changed files with 201 additions and 94 deletions
--- 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": [
--- a/projects/account/src/favicon.ico
+++ b/projects/account/src/favicon.ico
--- 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;
 }
--- a/src/theme.scss
+++ 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);