feat: improve accessibility of text elements

- Add light blue color. - Increase contrast of text elements.
Splode · May 25, 2020 · 20a56b7 · 20a56b7
1 parent 5bd03d6
commit 20a56b7
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 26 deletions.
diff --git a/src/renderer/assets/stylesheets/_base.scss b/src/renderer/assets/stylesheets/_base.scss
@@ -54,12 +54,12 @@ p {
 }
 
 .TextButton {
-  color: $colorBlueGrey;
+  color: $colorBlueGrey--lighter;
   font-size: 14px;
   letter-spacing: 0.05em;
   margin-top: 12px;
   transition: $transitionDefault;
   &:hover {
-    color: $colorRed;
+    color: $colorGreen;
   }
 }
diff --git a/src/renderer/assets/stylesheets/_variables.scss b/src/renderer/assets/stylesheets/_variables.scss
@@ -12,6 +12,8 @@
 
 $colorBlue: #0bbddb;
 $colorBlueGrey: #858c99;
+$colorBlueGrey--lighter: #c0c9da;
+$colorBlueWhite: #dbe1ef;
 $colorGreen: #05ec8c;
 $colorLightNavy: #3d4457;
 $colorNavy: #2f384b;

diff --git a/src/renderer/components/drawer/Drawer-settings.vue b/src/renderer/components/drawer/Drawer-settings.vue
@@ -25,10 +25,7 @@
         :class="notifications ? 'is-active' : 'is-inactive'"
       ></div>
     </div>
-    <div
-      class="Setting-wrapper"
-      v-if="os === 'win32'"
-    >
+    <div class="Setting-wrapper" v-if="os === 'win32'">
       <p class="Setting-title">Minimize to Tray</p>
       <div
         class="Checkbox"
@@ -141,7 +138,7 @@ export default {
 }
 
 .Setting-title {
-  color: $colorBlueGrey;
+  color: $colorBlueGrey--lighter;
   font-size: 14px;
   letter-spacing: 0.05em;
 }

diff --git a/src/renderer/components/drawer/Drawer-timer.vue b/src/renderer/components/drawer/Drawer-timer.vue
@@ -13,12 +13,11 @@
           class="Slider Slider--red"
           v-model.number="localTimeWork"
           @change="setTimeWork($event, 'work')"
-        >
+        />
         <div
           class="Slider-bar Slider-bar--red"
           :style="{ width: calcPercentage(localTimeWork, maxTime) + '%' }"
-        >
-        </div>
+        ></div>
       </div>
     </div>
 
@@ -34,12 +33,11 @@
           class="Slider Slider--green"
           v-model.number="localTimeShortBreak"
           @change="setTimeShortBreak($event, 'short-break')"
-        >
+        />
         <div
           class="Slider-bar Slider-bar--green"
           :style="{ width: calcPercentage(localTimeShortBreak, maxTime) + '%' }"
-        >
-        </div>
+        ></div>
       </div>
     </div>
 
@@ -55,12 +53,11 @@
           class="Slider Slider--blue"
           v-model.number="localTimeLongBreak"
           @change="setTimeLongBreak($event, 'long-break')"
-        >
+        />
         <div
           class="Slider-bar Slider-bar--blue"
           :style="{ width: calcPercentage(localTimeLongBreak, maxTime) + '%' }"
-        >
-        </div>
+        ></div>
       </div>
     </div>
 
@@ -76,20 +73,18 @@
           class="Slider"
           v-model.number="localWorkRounds"
           @change="setWorkRounds"
-        >
+        />
         <div
           class="Slider-bar Slider-bar--blueGrey"
-          :style="{ width: calcRoundPercentage(localWorkRounds, maxRounds) + '%' }"
-        >
-        </div>
+          :style="{
+            width: calcRoundPercentage(localWorkRounds, maxRounds) + '%'
+          }"
+        ></div>
       </div>
     </div>
 
     <div class="Setting-wrapper">
-      <p
-        class="TextButton"
-        @click="resetDefaults"
-      >Reset Defaults</p>
+      <p class="TextButton" @click="resetDefaults">Reset Defaults</p>
     </div>
   </div>
 </template>
@@ -211,7 +206,7 @@ export default {
 }
 
 .Setting-title {
-  color: $colorBlueGrey;
+  color: $colorBlueWhite;
   font-size: 14px;
   letter-spacing: 0.05em;
   margin-bottom: 8px;
@@ -225,4 +220,8 @@ export default {
   font-size: 12px;
   padding: 2px 6px;
 }
+
+.TextButton {
+  color: $colorBlueWhite;
+}
 </style>
diff --git a/src/renderer/components/timer/Timer-footer.vue b/src/renderer/components/timer/Timer-footer.vue
@@ -249,7 +249,7 @@ export default {
   text-align: center;
 
   .Total-rounds {
-    color: #858c99;
+    color: $colorBlueGrey--lighter;
     font-size: 0.7rem;
   }
 }