feat(colors): improve theme text colors

src/_variables.scss

@@ -8,14 +8,20 @@ $card-border-radius: 4px;
 // ------
 $dark-theme-bg-darker: rgb(39, 39, 39);
 $dark-theme-bg-lighter: rgb(70, 70, 70);
-$dark-theme-bg-lightest:rgb(84, 84, 84);
+$dark-theme-bg-lightest: rgb(84, 84, 84);
 $dark-theme-bg: rgb(48, 48, 48);
 $light-theme-bg: #fafafa;
-//$light-theme-bg-darker: #f1f1f1;
 $light-theme-bg-darker: rgb(244, 244, 244);
 
-$dark-theme-text-color: #bdbdbd;
-$light-theme-text-color: #333333;
+$dark-theme-text-color: rgb(225, 225, 225);
+$dark-theme-text-color-less-intense: transparentize($dark-theme-text-color, 0.1);
+$dark-theme-text-color-more-intense: rgb(240, 240, 240);
+$dark-theme-text-color-most-intense: rgb(255, 255, 255);
+
+$light-theme-text-color: rgb(44, 44, 44);
+$light-theme-text-color-less-intense: transparentize($light-theme-text-color, 0.1);
+$light-theme-text-color-most-intense: rgb(0, 0, 0);
+
 $light-theme-extra-border-color: #dddddd;
 $dark-theme-extra-border-color: #333333;
 

src/app/features/tasks/task-additional-info/task-additional-info.component.scss

@@ -93,7 +93,6 @@
 .attachment-list-tab-wrapper,
 .mat-tab-body {
   // needed to overstyle current task
-  @include standardThemeTextColor();
 }
 
 
@@ -104,17 +103,13 @@
   display: block;
   box-shadow: $whiteframe-shadow-3dp;
 
+  @include layerTextAndBgHighest();
+
   @include lightTheme {
-    color: $standard-note-fg-light;
     border: 1px solid #dddddd;
-    //background: $light-theme-bg-darker;
-    background-color: #fff;
-  }
-  @include darkTheme {
-    background: $standard-note-bg-dark;
-    color: #fff;
   }
 
+
   &.issue-content-wrapper {
   }
 
@@ -140,15 +135,11 @@
 
     .markdown-unparsed,
     .markdown-parsed {
-      @include standardThemeTextColor();
+      color: inherit;
+      background-color: inherit;
+
       @include lightTheme {
         background: $light-theme-bg-darker;
-        color: $standard-note-fg-light;
-      }
-
-      @include darkTheme {
-        background: $standard-note-bg-dark;
-        color: #fff;
       }
     }
   }

src/app/features/tasks/task/task.component.scss

@@ -37,9 +37,10 @@ $z-time-btn-svg-wrapper: 5555;
 
 // TASK BOX STYLES
 // ---------------
-// needs to come first to be overwritten by :host.isCurrent
+// NOTE: needs to come first to be overwritten by :host.isCurrent
+// NOTE: needs to be very light, because we're on a lighter background for the dark theme
 :host-context(.isDarkTheme) {
-  color: #fff;
+  color: $dark-theme-text-color-most-intense;
 }
 
 :host {

src/styles/components/table.scss

@@ -48,6 +48,8 @@ div.material-table {
 
   .isDarkTheme & {
     background: $dark-theme-bg-lighter;
+    // NOTE: because we're on a lighter background
+    color: $dark-theme-text-color-more-intense;
   }
 
   tr {

src/styles/mixins/_theming.scss

@@ -1,12 +1,26 @@
 @mixin darkTheme {
-  :host-context(.isDarkTheme) & {
-    @content;
+  $sel: #{&};
+  @if ($sel and $sel !='') {
+    @at-root  :host-context(.isDarkTheme) & {
+      @content;
+    }
+  } @else {
+    :host-context(.isDarkTheme) {
+      @content;
+    }
   }
 }
 
 @mixin lightTheme {
-  :host-context(.isLightTheme) & {
-    @content;
+  $sel: #{&};
+  @if ($sel and $sel !='') {
+    @at-root  :host-context(.isLightTheme) & {
+      @content;
+    }
+  } @else {
+    :host-context(.isLightTheme) {
+      @content;
+    }
   }
 }
 
@@ -25,3 +39,47 @@
   }
 }
 
+
+@mixin standardThemeTextColorLessIntense {
+  @include darkTheme() {
+    color: $dark-theme-text-color-less-intense;
+  }
+  @include lightTheme() {
+    color: $light-theme-text-color-less-intense;
+  }
+}
+
+
+@mixin standardThemeTextColorMostIntense {
+  @include darkTheme() {
+    color: $dark-theme-text-color-most-intense;
+  }
+  @include lightTheme() {
+    color: $light-theme-text-color-most-intense;
+  }
+}
+
+
+// e.g. cards and tasks
+@mixin layerTextAndBgHigher {
+  @include darkTheme() {
+    color: $dark-theme-text-color-less-intense;
+    background-color: $dark-theme-bg-lighter;
+  }
+  @include lightTheme() {
+    color: $light-theme-text-color-less-intense;
+  }
+}
+
+
+// e.g. nested cards / tabs etc
+@mixin layerTextAndBgHighest {
+  @include darkTheme() {
+    // NOTE: needs to be more intense than light color, because we have a lighter background
+    color: $dark-theme-text-color-more-intense;
+    background-color: $dark-theme-bg-lightest;
+  }
+  @include lightTheme() {
+    color: $light-theme-text-color-less-intense;
+  }
+}