More adaptive colors (quasarframework#1739)

pdanpdan · rstoenescu · commit 8cc2172d1a09 · 2018-03-09T20:22:59.000+02:00
diff --git a/src/components/action-sheet/action-sheet.ios.styl b/src/components/action-sheet/action-sheet.ios.styl
@@ -11,6 +11,7 @@
   min-height 48px
   padding 0 16px
   color $faded
+  color var(--q-color-faded, $faded)
   text-align center
 
 .q-actionsheet-grid
@@ -32,3 +33,4 @@
     height 48px
   span
     color $faded
+    color var(--q-color-faded, $faded)
diff --git a/src/components/action-sheet/action-sheet.mat.styl b/src/components/action-sheet/action-sheet.mat.styl
@@ -2,6 +2,7 @@
   min-height 56px
   padding 0 16px
   color $faded
+  color var(--q-color-faded, $faded)
 
 .q-actionsheet-body
   max-height 500px
@@ -25,3 +26,4 @@
     height 48px
   span
     color $faded
+    color var(--q-color-faded, $faded)
diff --git a/src/components/color/color.ios.styl b/src/components/color/color.ios.styl
@@ -85,8 +85,12 @@
   input
     background black
     color $light
+    color var(--q-color-light, $light)
     border 1px solid $dark
+    border 1px solid var(--q-color-dark, $dark)
   .q-color-inputs
     color $light
+    color var(--q-color-light, $light)
   .q-color-swatch
     border 1px solid $dark
+    border 1px solid var(--q-color-dark, $dark)
diff --git a/src/components/color/color.mat.styl b/src/components/color/color.mat.styl
@@ -83,8 +83,12 @@
   input
     background black
     color $light
+    color var(--q-color-light, $light)
     border 1px solid $dark
+    border 1px solid var(--q-color-dark, $dark)
   .q-color-inputs
     color $light
+    color var(--q-color-light, $light)
   .q-color-swatch
     border 1px solid $dark
+    border 1px solid var(--q-color-dark, $dark)
diff --git a/src/components/datetime/datetime.ios.styl b/src/components/datetime/datetime.ios.styl
@@ -105,6 +105,7 @@
 
 .q-datetime-dark
   background $dark
+  background var(--q-color-dark, $dark)
 
   .modal-buttons
     background black
diff --git a/src/components/datetime/datetime.mat.styl b/src/components/datetime/datetime.mat.styl
@@ -153,8 +153,10 @@ div + .q-datetime-time
 
 .q-datetime-dark
   background $dark
+  background var(--q-color-dark, $dark)
   .q-datetime-arrow
     color $light
+    color var(--q-color-light, $light)
   .q-datetime-header, .q-datetime-clock
     background $grey-8
   .q-datetime-view-day
@@ -230,6 +232,7 @@ for $pos in 0..23
         border-color $grey-4
       &.q-datetime-dark
         border 1px solid $dark
+        border 1px solid var(--q-color-dark, $dark)
 
 @media (min-width $breakpoint-md-min)
   .q-datetime-datestring
@@ -257,3 +260,4 @@ for $pos in 0..23
         border-color $grey-4
       &.q-datetime-dark
         border 1px solid $dark
+        border 1px solid var(--q-color-dark, $dark)
diff --git a/src/components/field/field.ios.styl b/src/components/field/field.ios.styl
@@ -34,14 +34,18 @@
 .q-field-with-error
   .q-field-icon, .q-field-label, .q-field-bottom
     color $negative
+    color var(--q-color-negative, $negative)
   .q-field-no-input
     border-top 1px solid $negative
+    border-top 1px solid var(--q-color-negative, $negative)
 
 .q-field-with-warning
   .q-field-icon, .q-field-label, .q-field-bottom
     color $warning
+    color var(--q-color-warning, $warning)
   .q-field-no-input
     border-top 1px solid $warning
+    border-top 1px solid var(--q-color-warning, $warning)
 
 qfield-vertical()
   .q-field-label + .q-field-content
diff --git a/src/components/field/field.mat.styl b/src/components/field/field.mat.styl
@@ -34,14 +34,18 @@
 .q-field-with-error
   .q-field-icon, .q-field-label, .q-field-bottom
     color $negative
+    color var(--q-color-negative, $negative)
   .q-field-no-input
     border-top 1px solid $negative
+    border-top 1px solid var(--q-color-negative, $negative)
 
 .q-field-with-warning
   .q-field-icon, .q-field-label, .q-field-bottom
     color $warning
+    color var(--q-color-warning, $warning)
   .q-field-no-input
     border-top 1px solid $warning
+    border-top 1px solid var(--q-color-warning, $warning)
 
 qfield-vertical()
   .q-field-label + .q-field-content
diff --git a/src/components/input-frame/input-frame.ios.styl b/src/components/input-frame/input-frame.ios.styl
@@ -18,6 +18,7 @@
   &:before
     height 1px
     color $light
+    color var(--q-color-light, $light)
     transform scaleY(1)
   &:after
     width 0
@@ -120,12 +121,14 @@ div.q-input-target
 .q-if-error
   &:before, &:after, &:not(.q-if-inverted) .q-if-label
     color $negative
+    color var(--q-color-negative, $negative)
   &:hover:before
     color lighten($negative, 46%)
 
 .q-if-warning
   &:before, &:after, &:not(.q-if-inverted) .q-if-label
     color $warning
+    color var(--q-color-warning, $warning)
   &:hover:before
     color lighten($warning, 46%)
 
diff --git a/src/components/input-frame/input-frame.mat.styl b/src/components/input-frame/input-frame.mat.styl
@@ -18,6 +18,7 @@
   &:before
     height 1px
     color $light
+    color var(--q-color-light, $light)
     transform scaleY(1)
   &:after
     width 0
@@ -120,12 +121,14 @@ div.q-input-target
 .q-if-error
   &:before, &:after, &:not(.q-if-inverted) .q-if-label
     color $negative
+    color var(--q-color-negative, $negative)
   &:hover:before
     color lighten($negative, 46%)
 
 .q-if-warning
   &:before, &:after, &:not(.q-if-inverted) .q-if-label
     color $warning
+    color var(--q-color-warning, $warning)
   &:hover:before
     color lighten($warning, 46%)
 
diff --git a/src/components/pagination/pagination.ios.styl b/src/components/pagination/pagination.ios.styl
@@ -5,3 +5,4 @@
     padding 0 5px !important
     &.disabled
       color $faded
+      color var(--q-color-faded, $faded)
diff --git a/src/components/pagination/pagination.mat.styl b/src/components/pagination/pagination.mat.styl
@@ -5,3 +5,4 @@
     padding 0 5px !important
     &.disabled
       color $faded
+      color var(--q-color-faded, $faded)
diff --git a/src/components/slider/slider.ios.styl b/src/components/slider/slider.ios.styl
@@ -104,5 +104,7 @@ $slider-label-transform     = translateX(-50%) translateY(-139%) scale(1)
 
   &.has-error
     color $negative
+    color var(--q-color-negative, $negative)
   &.has-warning
     color $warning
+    color var(--q-color-warning, $warning)
diff --git a/src/components/slider/slider.mat.styl b/src/components/slider/slider.mat.styl
@@ -115,5 +115,7 @@ $slider-label-transform     = translateX(-50%) translateY(-139%) scale(1)
 
   &.has-error
     color $negative
+    color var(--q-color-negative, $negative)
   &.has-warning
     color $warning
+    color var(--q-color-warning, $warning)
diff --git a/src/components/stepper/stepper.ios.styl b/src/components/stepper/stepper.ios.styl
@@ -41,10 +41,12 @@
     color $stepper-label-inactive-color
   &.step-error
     color $negative
+    color var(--q-color-negative, $negative)
     .q-stepper-dot
       background transparent
       span
         color $negative
+        color var(--q-color-negative, $negative)
         font-size 24px
 
 .q-stepper-header
diff --git a/src/components/stepper/stepper.mat.styl b/src/components/stepper/stepper.mat.styl
@@ -39,10 +39,12 @@
     color $stepper-label-inactive-color
   &.step-error
     color $negative
+    color var(--q-color-negative, $negative)
     .q-stepper-dot
       background transparent
       span
         color $negative
+        color var(--q-color-negative, $negative)
         font-size 24px
 
 .q-stepper-header
diff --git a/src/components/toggle/toggle.ios.styl b/src/components/toggle/toggle.ios.styl
@@ -11,12 +11,14 @@ $toggle-handle-size     = $toggle-height - 2 * $toggle-span
   background currentColor
   border-radius 16px
   border 2px solid $light
+  border 2px solid var(--q-color-light, $light)
 .q-toggle-base-dark
   color darken($light, 10%)
 
 .q-toggle-handle
   background white
   box-shadow 0 3px 3px rgba(0, 0, 0, .2), 0 0 0 2px $light // @stylint ignore
+  box-shadow 0 3px 3px rgba(0, 0, 0, .2), 0 0 0 2px var(--q-color-light, $light) // @stylint ignore
   transition all 450ms cubic-bezier(.23, 1, .32, 1)
   border-radius 50%
   position absolute
diff --git a/src/components/uploader/uploader.ios.styl b/src/components/uploader/uploader.ios.styl
@@ -47,3 +47,4 @@
     opacity .2
   .q-uploader-file:not(:last-child)
     border-bottom 1px solid $dark
+    border-bottom 1px solid var(--q-color-dark, $dark)
diff --git a/src/components/uploader/uploader.mat.styl b/src/components/uploader/uploader.mat.styl
@@ -47,3 +47,4 @@
     opacity .2
   .q-uploader-file:not(:last-child)
     border-bottom 1px solid $dark
+    border-bottom 1px solid var(--q-color-dark, $dark)
diff --git a/src/css/core/typography.styl b/src/css/core/typography.styl
@@ -99,6 +99,7 @@ blockquote
     display block
     line-height 1.4
     color $faded
+    color var(--q-color-faded, $faded)
     &:before
       content '\2014 \00A0'
 
@@ -140,6 +141,7 @@ dl
 ::-moz-selection,
 ::selection
   background $primary
+  background var(--q-color-primary, $primary)
   color alpha(opposite-non-color($primary), .87)
 
 textarea::-webkit-selection,
