fix: align input text colors (#837)

* fix(toggle): update label color * chore: test screenshots update --------- Co-authored-by: theJohnnyMe <nikola.johnny.mirkovic@scania.com>
scania-digital-design-system · Nov 12, 2024 · 64121e1 · 64121e1
1 parent c8fc3b4
commit 64121e1
Show file tree

Hide file tree

Showing 27 changed files with 41 additions and 45 deletions.
diff --git a/packages/core/src/components/dropdown/dropdown-filter.scss b/packages/core/src/components/dropdown/dropdown-filter.scss
@@ -24,6 +24,10 @@
       display: flex;
       width: 100%;
       height: 100%;
+
+      input {
+        color: var(--tds-dropdown-filter-input-color);
+      }
     }
 
     .label-inside-as-placeholder {

diff --git a/packages/core/src/components/dropdown/dropdown-option/dropdown-option-vars.scss b/packages/core/src/components/dropdown/dropdown-option/dropdown-option-vars.scss
@@ -9,7 +9,7 @@
   --tds-dropdown-option-border: var(--tds-grey-300);
   --tds-dropdown-label-color: var(--tds-grey-958);
   --tds-dropdown-helper-color: var(--tds-grey-700);
-  --tds-dropdown-placeholder-color: var(--tds-grey-700);
+  --tds-dropdown-placeholder-color: var(--tds-grey-500);
 
   .tds-mode-variant-primary {
     --tds-dropdown-option-background: var(--tds-grey-50);
@@ -28,9 +28,9 @@
   --tds-dropdown-option-background-hover: var(--tds-grey-800);
   --tds-dropdown-option-background-selected: var(--tds-grey-700);
   --tds-dropdown-option-border: var(--tds-grey-800);
-  --tds-dropdown-label-color: var(--tds-grey-400);
+  --tds-dropdown-label-color: var(--tds-grey-50);
   --tds-dropdown-helper-color: var(--tds-grey-500);
-  --tds-dropdown-placeholder-color: var(--tds-grey-400);
+  --tds-dropdown-placeholder-color: var(--tds-grey-600);
 
   .tds-mode-variant-primary {
     --tds-dropdown-option-background: var(--tds-grey-868);

diff --git a/packages/core/src/components/dropdown/dropdown-vars.scss b/packages/core/src/components/dropdown/dropdown-vars.scss
@@ -4,15 +4,18 @@
   --tds-dropdown-border-bottom: var(--tds-grey-600);
   --tds-dropdown-border-bottom-hover: var(--tds-grey-800);
   --tds-dropdown-border-bottom-open: var(--tds-blue-400);
-  --tds-dropdown-value-color: var(--tds-grey-868);
+  --tds-dropdown-value-color: var(--tds-grey-958);
   --tds-dropdown-label-color: var(--tds-grey-958);
-  --tds-dropdown-label-inside-color: var(--tds-grey-700);
+  --tds-dropdown-label-inside-color: var(--tds-grey-958);
   --tds-dropdown-helper-color: var(--tds-grey-700);
-  --tds-dropdown-placeholder-color: var(--tds-grey-700);
+  --tds-dropdown-placeholder-color: var(--tds-grey-500);
   --tds-dropdown-disabled-color: var(--tds-grey-400);
+  --tds-dropdown-filter-input-color: var(--tds-grey-958);
   --tds-dropdown-border-radius: var(--tds-spacing-element-4) var(--tds-spacing-element-4) 0 0;
-  --tds-dropdown-list-border-radius-down: 0 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);
-  --tds-dropdown-list-border-radius-up: var(--tds-spacing-element-4) var(--tds-spacing-element-4) 0 0;
+  --tds-dropdown-list-border-radius-down: 0 0 var(--tds-spacing-element-4)
+    var(--tds-spacing-element-4);
+  --tds-dropdown-list-border-radius-up: var(--tds-spacing-element-4) var(--tds-spacing-element-4) 0
+    0;
 
   .tds-mode-variant-primary {
     --tds-dropdown-bg: var(--tds-grey-50);
@@ -39,14 +42,17 @@
   --tds-dropdown-border-bottom: var(--tds-grey-600);
   --tds-dropdown-border-bottom-hover: var(--tds-grey-400);
   --tds-dropdown-border-bottom-open: var(--tds-blue-400);
-  --tds-dropdown-value-color: var(--tds-white);
-  --tds-dropdown-label-color: var(--tds-grey-400);
-  --tds-dropdown-label-inside-color: var(--tds-grey-400);
+  --tds-dropdown-value-color: var(--tds-grey-50);
+  --tds-dropdown-label-color: var(--tds-grey-50);
+  --tds-dropdown-label-inside-color: var(--tds-grey-50);
   --tds-dropdown-helper-color: var(--tds-grey-500);
-  --tds-dropdown-placeholder-color: var(--tds-grey-400);
+  --tds-dropdown-placeholder-color: var(--tds-grey-600);
   --tds-dropdown-disabled-color: var(--tds-grey-800);
-  --tds-dropdown-list-border-radius-down: 0 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);
-  --tds-dropdown-list-border-radius-up: var(--tds-spacing-element-4) var(--tds-spacing-element-4) 0 0;
+  --tds-dropdown-list-border-radius-down: 0 0 var(--tds-spacing-element-4)
+    var(--tds-spacing-element-4);
+  --tds-dropdown-list-border-radius-up: var(--tds-spacing-element-4) var(--tds-spacing-element-4) 0
+    0;
+  --tds-dropdown-filter-input-color: var(--tds-grey-50);
 
   .tds-mode-variant-primary {
     --tds-dropdown-bg: var(--tds-grey-868);

diff --git a/...dropdown-basic-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/...dropdown-basic-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
diff --git a/...2e.ts-snapshots/tds-dropdown-basic-renders-basic-dropdown-correctly-1-linux.png b/...2e.ts-snapshots/tds-dropdown-basic-renders-basic-dropdown-correctly-1-linux.png
diff --git a/...disabled-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png b/...disabled-clicking-the-dropdown-icon-does-not-open-the-dropdown-list-1-linux.png
diff --git a/...opdown-default-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/...opdown-default-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png
diff --git a/...t-clicking-the-dropdown-opens-the-dropdown-list-then-click-Option-1-1-linux.png b/...t-clicking-the-dropdown-opens-the-dropdown-list-then-click-Option-1-1-linux.png
diff --git a/...s-snapshots/tds-dropdown-default-renders-default-dropdown-correctly-1-linux.png b/...s-snapshots/tds-dropdown-default-renders-default-dropdown-correctly-1-linux.png
diff --git a/...ts/tds-dropdown-error-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png b/...ts/tds-dropdown-error-clicking-the-dropdown-opens-the-dropdown-list-1-linux.png
diff --git a/...2e.ts-snapshots/tds-dropdown-error-renders-error-dropdown-correctly-1-linux.png b/...2e.ts-snapshots/tds-dropdown-error-renders-error-dropdown-correctly-1-linux.png
diff --git a/...t-option-from-dropdown-list-and-check-if-the-input-value-is-updated-1-linux.png b/...t-option-from-dropdown-list-and-check-if-the-input-value-is-updated-1-linux.png
diff --git a/....ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png b/....ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png
diff --git a/...ds-dropdown-filter-toggle-dropdown-visibility-and-select-option-two-1-linux.png b/...ds-dropdown-filter-toggle-dropdown-visibility-and-select-option-two-1-linux.png
diff --git a/....ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png b/....ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png
diff --git a/...n-filter-typing-non-existing-value-does-not-show-No-results-message-1-linux.png b/...n-filter-typing-non-existing-value-does-not-show-No-results-message-1-linux.png
diff --git a/....ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png b/....ts-snapshots/tds-dropdown-filter-renders-filter-dropdown-correctly-1-linux.png
diff --git a/...ing-the-dropdown-a2125--dropdown-list-then-click-on-all-the-options-1-linux.png b/...ing-the-dropdown-a2125--dropdown-list-then-click-on-all-the-options-1-linux.png
diff --git a/...king-the-dropdown-de184-ist-then-click-Option-1-should-not-close-it-1-linux.png b/...king-the-dropdown-de184-ist-then-click-Option-1-should-not-close-it-1-linux.png
diff --git a/...ots/tds-dropdown-multiselect-renders-multiselect-dropdown-correctly-1-linux.png b/...ots/tds-dropdown-multiselect-renders-multiselect-dropdown-correctly-1-linux.png
diff --git a/...password-type-with-error-state-renders-default-text-field-correctly-1-linux.png b/...password-type-with-error-state-renders-default-text-field-correctly-1-linux.png
diff --git a/...-with-error-state-should-handle-hover-click-and-input-on-text-field-1-linux.png b/...-with-error-state-should-handle-hover-click-and-input-on-text-field-1-linux.png
diff --git a/packages/core/src/components/text-field/text-field-vars.scss b/packages/core/src/components/text-field/text-field-vars.scss
@@ -5,7 +5,7 @@
   --tds-text-field-background: var(--tds-text-field-background-primary);
   --tds-text-field-color: var(--tds-grey-600);
   --tds-text-field-placeholder: var(--tds-grey-500);
-  --tds-text-field-data-color: var(--tds-grey-868);
+  --tds-text-field-data-color: var(--tds-grey-958);
 
   //Disabled
   --tds-text-field-background-disabled-primary: var(--tds-grey-50);
@@ -17,9 +17,8 @@
   --tds-text-field-ps-color-disabled: var(--tds-grey-400);
 
   //Label
-  --tds-text-field-label-color: var(--tds-grey-700);
-  --tds-text-field-label-inside-color: var(--tds-grey-700);
-  --tds-text-field-placeholder-focus-color: var(--tds-grey-500);
+  --tds-text-field-label-color: var(--tds-grey-958);
+  --tds-text-field-label-inside-color: var(--tds-grey-958);
 
   //Highlight bar
   --tds-text-field-bar: var(--tds-blue-400);
@@ -70,7 +69,7 @@
   --tds-text-field-background-secondary: var(--tds-grey-868);
   --tds-text-field-color: var(--tds-grey-600);
   --tds-text-field-placeholder: var(--tds-grey-600);
-  --tds-text-field-data-color: var(--tds-grey-100);
+  --tds-text-field-data-color: var(--tds-grey-50);
 
   //Disabled
   --tds-text-field-ps-color-disabled: var(--tds-grey-700);
@@ -82,9 +81,8 @@
   --tds-text-field-label-disabled: var(--tds-grey-700);
 
   // Label
-  --tds-text-field-label-color: var(--tds-grey-100);
-  --tds-text-field-label-inside-color: var(--tds-grey-700);
-  --tds-text-field-placeholder-focus-color: var(--tds-grey-700);
+  --tds-text-field-label-color: var(--tds-grey-50);
+  --tds-text-field-label-inside-color: var(--tds-grey-50);
 
   //Highlight bar
   --tds-text-field-bar: var(--tds-blue-400);

diff --git a/packages/core/src/components/text-field/text-field.scss b/packages/core/src/components/text-field/text-field.scss
@@ -11,11 +11,7 @@
   background-color: var(--tds-text-field-background);
 
   &::placeholder {
-    color: var(--tds-text-field-color);
-  }
-
-  &:focus::placeholder {
-    color: var(--tds-text-field-placeholder-focus-color);
+    color: var(--tds-text-field-placeholder);
   }
 
   &:disabled {
@@ -123,7 +119,7 @@
   //Input field in focus
   &:focus::placeholder {
     transition: color 0.35s ease;
-    color: var(--tds-text-field-placeholder-focus-color);
+    color: var(--tds-text-field-placeholder);
   }
 }
 

diff --git a/packages/core/src/components/textarea/textarea-vars.scss b/packages/core/src/components/textarea/textarea-vars.scss
@@ -3,9 +3,7 @@
   --tds-textarea-background-primary: var(--tds-grey-50);
   --tds-textarea-background-secondary: var(--tds-white);
   --tds-textarea-background: var(--tds-textarea-background-primary);
-  --tds-textarea-color: var(--tds-grey-868);
-  --tds-textarea-placeholder: var(--tds-grey-500);
-  --tds-textarea-placeholder-focus-color: var(--tds-grey-500);
+  --tds-textarea-color: var(--tds-grey-958);
 
   // Disabled
   --tds-textarea-disabled-color: var(--tds-grey-400);
@@ -17,10 +15,10 @@
 
   // Label
   --tds-textarea-label-color: var(--tds-grey-958);
-  --tds-textarea-label-inside-color: var(--tds-grey-700);
+  --tds-textarea-label-inside-color: var(--tds-grey-958);
 
   // Placeholder
-  --tds-textarea-placeholder-focus-color: var(--tds-grey-500);
+  --tds-textarea-placeholder: var(--tds-grey-500);
 
   // Helper
   --tds-textarea-helper: var(--tds-grey-700);
@@ -62,9 +60,7 @@
   --tds-textarea-background-primary: var(--tds-grey-900);
   --tds-textarea-background-secondary: var(--tds-grey-868);
   --tds-textarea-background: var(--tds-textarea-background-primary);
-  --tds-textarea-color: var(--tds-grey-200);
-  --tds-textarea-placeholder: var(--tds-grey-600);
-  --tds-textarea-placeholder-focus-color: var(--tds-grey-700);
+  --tds-textarea-color: var(--tds-grey-50);
 
   // Disabled
   --tds-textarea-disabled-color: var(--tds-grey-800);
@@ -75,11 +71,11 @@
   --tds-textarea-disabled-label: var(--tds-grey-700);
 
   // Label
-  --tds-textarea-label-color: var(--tds-grey-100);
-  --tds-textarea-label-inside-color: var(--tds-grey-400);
+  --tds-textarea-label-color: var(--tds-grey-50);
+  --tds-textarea-label-inside-color: var(--tds-grey-50);
 
   // Placeholder
-  --tds-textarea-placeholder-focus-color: var(--tds-grey-700);
+  --tds-textarea-placeholder: var(--tds-grey-600);
 
   // Helper
   --tds-textarea-helper: var(--tds-grey-600);

diff --git a/packages/core/src/components/textarea/textarea.scss b/packages/core/src/components/textarea/textarea.scss
@@ -14,10 +14,6 @@
     color: var(--tds-textarea-placeholder);
   }
 
-  &:focus::placeholder {
-    color: var(--tds-textarea-placeholder-focus-color);
-  }
-
   &:disabled {
     background-color: var(--tds-textarea-disabled-background);
     color: var(--tds-textarea-disabled-color);
@@ -45,7 +41,7 @@
   //Input field in focus
   &:focus::placeholder {
     transition: color 0.35s ease;
-    color: var(--tds-textarea-placeholder-focus-color);
+    color: var(--tds-textarea-placeholder);
   }
 }
 

diff --git a/packages/core/src/components/toggle/toggle-vars.scss b/packages/core/src/components/toggle/toggle-vars.scss
@@ -32,7 +32,7 @@
   --tds-toggle-on-border-focus: var(--tds-positive);
   --tds-toggle-on-slider-disabled: var(--tds-grey-800);
   --tds-toggle-slider-disabled: var(--tds-grey-400);
-  --tds-toggle-label-color: var(--tds-white);
+  --tds-toggle-label-color: var(--tds-grey-50);
   --tds-toggle-label-color-disabled: var(--tds-grey-400);
   --tds-toggle-off-slider: var(--tds-grey-500);
   --tds-toggle-off-slider-hover: var(--tds-grey-600);