Update color palette

src/app.ts

@@ -111,12 +111,30 @@ angular.module('3ema', [
 
 // Configure theme
 .config(['$mdThemingProvider', ($mdThemingProvider) => {
+    $mdThemingProvider.definePalette('threema', {
+        50: 'f2faf5',
+        100: 'e6f6eb',
+        200: 'cdedd9',
+        300: 'b4e4c5',
+        400: '9bdbb2',
+        500: '82d29f',
+        600: '69ca8c',
+        700: '50c078',
+        800: '37b865',
+        900: '1eae52',
+        A100: '05a63f',
+        A200: '048432',
+        A400: '03732b',
+        A700: '036325',
+        contrastDefaultColor: 'light',
+        contrastDarkColors: ['50', '100', '200', '300', '400', '500', '600'],
+    });
     $mdThemingProvider.theme('default')
         .primaryPalette('grey', {
              default: '800',
         })
-        .accentPalette('teal', {
-            default: '500',
+        .accentPalette('threema', {
+            default: 'A100',
         });
 }])
 

src/sass/app.scss

@@ -4,6 +4,12 @@
 // - https://www.sitepoint.com/architecture-sass-project/
 // - http://vanseodesign.com/css/sass-directory-structures/
 
+// Helpers: Tools, helper files, variables, config files.
+@import 'helpers/colors';
+@import 'helpers/sizes';
+@import 'helpers/message_bubble';
+@import 'helpers/texts';
+
 // Base: Boilerplate content. It holds the styles every page of your site
 // should receive.
 @import 'base/reset';
@@ -11,12 +17,6 @@
 @import 'base/colors';
 @import 'base/cloak';
 
-// Helpers: Tools, helper files, variables, config files.
-@import 'helpers/colors';
-@import 'helpers/sizes';
-@import 'helpers/message_bubble';
-@import 'helpers/texts';
-
 // Layouts: Macro layout files. Styles for major sections of the layout like a
 // header or footer and styles for a grid system would belong here.
 @import 'layout/main';

src/sass/base/_colors.scss

@@ -11,3 +11,8 @@ body {
 footer {
     color: #ffffff;
 }
+
+dl.key-values dt {
+    color: $theme-primary;
+    font-weight: 500;
+}

src/sass/components/_links.scss

@@ -2,19 +2,18 @@
 a {
     transition: color .4s;
     text-decoration: none;
-    color: #265c83;
+    color: $theme-primary;
 
     &:link,
     &:visited {
-        color: #265c83;
+        color: $theme-primary;
     }
 
     &:hover {
-        color: lighten(#265c83, 30%);
+        color: $theme-b400;
     }
 
     &:active {
-        transition: color .3s;
-        color: #007be6;
+        color: $theme-b400;
     }
 }

src/sass/helpers/_colors.scss

@@ -1,4 +1,9 @@
-$status-ok: #4caf50;
+$theme-primary: #05a63f;
+$theme-b300: #03732b;
+$theme-b400: #036325;
+$theme-b500: #02521f;
+$theme-green: $theme-primary;
+$status-ok: $theme-primary;
 $status-warning: #ff9800;
 $status-error: #f44336;
 $status-starred: #ffc107;
@@ -6,7 +11,6 @@ $border-grey: #dddddd;
 $background-grey: lighten($border-grey, 7%);
 $material-grey: rgba(0, 0, 0, .54);
 $material-grey-dark: rgba(0, 0, 0, .87);
-$url-light-blue: #63a6cf;
 $work-blue: #3b84df;
 
 $dark-background-color: #f6f6f6;

src/sass/layout/_main.scss

@@ -393,7 +393,7 @@ md-list-item .md-list-item-inner > md-checkbox .md-label {
 }
 
 .status-yes i {
-    color: #4caf50;
+    color: $theme-green;
 }
 
 .status-no i {

troubleshoot/index.html

@@ -82,7 +82,7 @@
             vertical-align: top;
         }
 
-        .status-yes i { color: #4caf50; }
+        .status-yes i { color: #05a63f; }
         .status-no i { color: #f44336; }
         .status-unknown i { color: #0277BD; }