feat: Update colors for inputs

Author: rstoenescu

src/components/color/QColorPicker.js

@@ -254,7 +254,6 @@ export default {
           h(QBtn, {
             props: {
               flat: true,
-              color: 'grey-7',
               disable: this.disable
             },
             on: {

src/components/color/color.ios.styl

@@ -3,12 +3,7 @@
   border 1px solid $grey-4
   display inline-block
   width 240px
-  &.q-color-dark
-    background $dark
-    border 1px solid $grey-9
-    input
-      background $dark
-      color $light
+  background white
 
 .q-color-saturation
   width 100%
@@ -81,11 +76,21 @@
 
 .q-color-inputs
   font-size 11px
+  color $grey-7
   input
     border 1px solid $grey-4
     outline 0
 .q-color-padding
   padding 0 2px
 .q-color-label
-  color $grey-7
   padding-top 4px
+
+.q-color-dark
+  background $dark
+  border 1px solid $grey-9
+  input
+    background $dark
+    color $light
+    border 1px solid $light
+  .q-color-inputs
+    color $light

src/components/color/color.mat.styl

@@ -3,12 +3,7 @@
   border 1px solid $grey-4
   display inline-block
   width 240px
-  &.q-color-dark
-    background $dark
-    border 1px solid $grey-9
-    input
-      background $dark
-      color $light
+  background white
 
 .q-color-saturation
   width 100%
@@ -81,11 +76,21 @@
 
 .q-color-inputs
   font-size 11px
+  color $grey-7
   input
     border 1px solid $grey-4
     outline 0
 .q-color-padding
   padding 0 2px
 .q-color-label
-  color $grey-7
   padding-top 4px
+
+.q-color-dark
+  background $dark
+  border 1px solid $grey-9
+  input
+    background $dark
+    color $light
+    border 1px solid $light
+  .q-color-inputs
+    color $light

src/components/datetime/datetime.mat.styl

@@ -9,15 +9,11 @@
   text-align center
   user-select none
   line-height initial
-  &.q-datetime-dark
-    background $dark
 
 .q-datetime-header
   background currentColor
   > div
     color white
-  .q-datetime-dark &
-    background $grey-8
 
 .q-datetime-weekdaystring
   font-size .8rem
@@ -55,15 +51,10 @@ div + .q-datetime-time
   width 250px
   height 300px
   color black
-  .q-datetime-dark &
-    color white
+
 .q-datetime-view-year, .q-datetime-view-month
-    & > .q-btn:not(.active)
-      color black
-.q-datetime-dark
-  .q-datetime-view-year, .q-datetime-view-month
-    & > .q-btn:not(.active)
-      color white
+  > .q-btn:not(.active)
+    color black
 
 .q-datetime-weekdays
   font-size .75rem
@@ -97,10 +88,6 @@ div + .q-datetime-time
     font-size 105%
   &:not(.q-datetime-fillerday):not(.disabled):not(.q-datetime-day-active):hover
     background $grey-4
-    .q-datetime-dark &
-      color black
-.q-datetime-dark .q-datetime-days div.q-datetime-day-active > span
-  color black
 
 .q-datetime-btn
   font-weight normal
@@ -115,8 +102,6 @@ div + .q-datetime-time
   border-radius 50%
   background $grey-4
   padding 24px
-  .q-datetime-dark &
-    background $grey-8
 
 .q-datetime-clock-circle
   position relative
@@ -158,6 +143,19 @@ div + .q-datetime-time
     transform translate(-50%, -50%)
     background currentColor
 
+.q-datetime-dark
+  background $dark
+  .q-datetime-header, .q-datetime-clock
+    background $grey-8
+  .q-datetime-view-day
+    color white
+  .q-datetime-view-year, .q-datetime-view-month
+    > .q-btn:not(.active)
+      color white
+  .q-datetime-days div
+    &:not(.q-datetime-fillerday):not(.disabled):not(.q-datetime-day-active):hover
+      color black
+
 body.desktop .q-datetime-clock-position:not(.active):hover
   background $grey-2 !important
 body.desktop .q-datetime-dark .q-datetime-clock-position:not(.active):hover

src/components/input-frame/input-frame.mat.styl

@@ -80,12 +80,6 @@
   margin-left 0
   margin-right 4px
 
-.q-if-dark
-  &:before, .q-if-label, .q-if-control
-    color rgba(255, 255, 255, .7)
-  &:hover:before, .q-if-addon
-    color rgba(255, 255, 255, .9)
-
 .q-if-focused
   &:after
     width 100%
@@ -99,9 +93,12 @@
   padding-left 8px
   padding-right 8px
   box-shadow $shadow-1
+
 .q-if-dark
-  .q-if-control
-    color white
+  &:before, .q-if-label, .q-if-control
+    color rgba(255, 255, 255, .7)
+  &:hover:before, .q-if-addon
+    color rgba(255, 255, 255, .9)
 
 .q-if-error
   &:before, &:after, &:not(.q-if-inverted) .q-if-label, .q-if-addon