yashim/fix: input dark mode color (#8115)

* fix: input dark mode color * fix: disabled colours for dropdown and select-native * fix: date picker + autocomplete dark disabled styles * fix: update label color * fix: further color changes * fix: disabled calendr text
deriv-com · Apr 13, 2023 · d5c8434 · d5c8434 · vercel · Apr 13, 2023
1 parent 2c8be20
commit d5c8434
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 19 deletions.
diff --git a/packages/components/src/components/autocomplete/autocomplete.scss b/packages/components/src/components/autocomplete/autocomplete.scss
@@ -18,7 +18,7 @@
             transform: rotate(-180deg);
         }
         &--disabled {
-            --fill-color1: var(--text-disabled) !important;
+            --fill-color1: var(--text-less-prominent) !important;
         }
         .color1-fill {
             fill: var(--text-less-prominent);

diff --git a/packages/components/src/components/date-picker/date-picker.scss b/packages/components/src/components/date-picker/date-picker.scss
@@ -139,7 +139,7 @@
             margin-right: 1rem;
         }
         &__placeholder {
-            color: var(--text-less-prominent);
+            color: var(--text-general);
             transform: none;
             transition: transform 0.25s linear;
             position: absolute;
@@ -157,9 +157,6 @@
             &--is-focused {
                 color: var(--brand-secondary);
             }
-            .dc-input--disabled & {
-                color: var(--text-disabled);
-            }
         }
         &__error {
             display: flex;

diff --git a/packages/components/src/components/dropdown/dropdown.scss b/packages/components/src/components/dropdown/dropdown.scss
@@ -258,7 +258,7 @@
             border: 1px solid var(--general-disabled);
 
             &-text {
-                color: var(--text-disabled);
+                color: var(--text-less-prominent);
             }
         }
     }

diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss
@@ -30,8 +30,11 @@
         margin-bottom: calc(3.2rem - 12px);
     }
     &--disabled {
-        border-color: var(--general-disabled);
-        color: var(--text-disabled);
+        border-color: var(--border-normal);
+
+        .dc-datepicker__display-text {
+            color: var(--text-less-prominent);
+        }
     }
     &--error {
         border-color: var(--brand-red-coral) !important;
@@ -84,16 +87,16 @@
             }
         }
         &:disabled {
-            -webkit-text-fill-color: var(--text-disabled); // iOS
+            -webkit-text-fill-color: var(--text-less-prominent); // iOS
             opacity: 1; // iOS
-            color: var(--text-disabled);
+            color: var(--text-less-prominent);
 
             & ~ label {
-                color: var(--text-disabled) !important;
+                color: var(--text-general) !important;
             }
             & ~ svg {
                 .color1-fill {
-                    fill: var(--text-disabled);
+                    fill: var(--text-less-prominent);
                 }
             }
             // TODO: Ugly safari override hack, find better way to override shadow dom generated by Safari
@@ -208,7 +211,7 @@
         white-space: nowrap;
         color: var(--text-less-prominent);
         font-size: var(--text-size-xs);
-        background-color: var(--general-main-2);
+        background-color: var(--general-main-1);
         position: absolute;
         pointer-events: none;
         left: 1rem;

diff --git a/packages/components/src/components/select-native/select-native.scss b/packages/components/src/components/select-native/select-native.scss
@@ -73,9 +73,6 @@
             max-width: 100%;
             display: none;
         }
-        &--disabled {
-            color: var(--text-disabled);
-        }
     }
     &__picker {
         opacity: 0;
@@ -87,13 +84,13 @@
     }
     &--disabled {
         .dc-select-native__display-text {
-            color: var(--text-disabled);
+            color: var(--text-less-prominent);
         }
         .dc-select-native__placeholder:not(.dc-select-native__placeholder--has-value) {
-            color: var(--text-disabled);
+            color: var(--text-less-prominent);
         }
         .dc-icon {
-            --fill-color1: var(--text-disabled);
+            --fill-color1: var(--text-less-prominent);
         }
     }
     &--error {