chore: update css variables based on latest changes

aizad-deriv · aizad-deriv · commit b7bdbdeafbec · 2024-03-07T17:08:26.000+08:00
diff --git a/lib/components/Input/HelperMessage.scss b/lib/components/Input/HelperMessage.scss
@@ -1,21 +1,21 @@
 // TODO: Remove fallback values when the design system is ready
 
 .deriv-helper-message {
-    font-size: var(--text-size-sm, 12px);
-    line-height: var(--text-lh-2xs, 8px);
+    font-size: var(--du-text-size-sm, 12px);
+    line-height: var(--du-text-lh-2xs, 8px);
     font-style: normal;
-    font-weight: var(--text-weight-normal, 400);
-    color: var(--text-primary, #999999);
+    font-weight: var(--du-text-weight-normal, 400);
+    color: var(--du-text-primary, #999999);
     &--general {
-        color: var(--text-less-prominent, #999999);
+        color: var(--du-text-less-prominent, #999999);
     }
     &--success {
-        color: var(--text-profit-success, #4bb4b3);
+        color: var(--du-text-profit-success, #4bb4b3);
     }
     &--warning {
-        color: var(--text-warning, #ffad3a);
+        color: var(--du-text-warning, #ffad3a);
     }
     &--error {
-        color: var(--text-red, #ff444f);
+        color: var(--du-text-red, #ff444f);
     }
 }
diff --git a/lib/components/Input/Input.scss b/lib/components/Input/Input.scss
@@ -24,29 +24,29 @@ $input-placement: 16px;
     text-align: left;
     padding: 10px 16px;
     border: $border;
-    font-size: var(--text-size-default, 14px);
-    color: var(--text-prominent, #333333);
+    font-size: var(--du-text-size-default, 14px);
+    color: var(--du-text-prominent, #333333);
 
     &--general {
-        border-color: var(--state-active, #d6dadb);
+        border-color: var(--du-state-active, #d6dadb);
         &:hover:not(:disabled):not(:focus-within) {
-            border-color: var(--border-hover, #999999);
+            border-color: var(--du-border-hover, #999999);
         }
         &:focus-within {
-            border-color: var(--brand-secondary, #85acb0);
+            border-color: var(--du-brand-secondary, #85acb0);
         }
     }
     &--error {
-        border-color: var(--status-danger, #ec3f3f);
+        border-color: var(--du-status-danger, #ec3f3f);
     }
     &--success {
-        border-color: var(--status-success, #4bb4b3);
+        border-color: var(--du-status-success, #4bb4b3);
     }
     &--active {
-        border-color: var(--brand-secondary, #85acb0);
+        border-color: var(--du-brand-secondary, #85acb0);
     }
     &--disabled {
-        border-color: var(--state-active, #d6dadb);
+        border-color: var(--du-state-active, #d6dadb);
         cursor: not-allowed;
     }
 
@@ -59,9 +59,9 @@ $input-placement: 16px;
         &:focus,
         &:not(:placeholder-shown) {
             & ~ label {
-                font-size: var(--text-size-xs, 10px);
+                font-size: var(--du-text-size-xs, 10px);
                 transform: translate(0, -50%);
-                background-color: var(--general-main-1, #ffffff);
+                background-color: var(--du-general-main-1, #ffffff);
                 padding: 0 4px;
                 height: fit-content;
             }
@@ -79,22 +79,22 @@ $input-placement: 16px;
         align-items: center;
         pointer-events: none;
         transition: all 0.15s ease-out;
-        font-size: var(--text-size-default, 14px);
+        font-size: var(--du-text-size-default, 14px);
         &--general {
-            color: var(--border-hover, #999999);
+            color: var(--du-border-hover, #999999);
         }
         &--error {
-            color: var(--status-danger, #ec3f3f);
+            color: var(--du-status-danger, #ec3f3f);
         }
         &--success {
-            color: var(--status-success, #4bb4b3);
+            color: var(--du-status-success, #4bb4b3);
         }
         &--active {
-            color: var(--brand-secondary, #85acb0);
+            color: var(--du-brand-secondary, #85acb0);
         }
 
         &--disabled {
-            color: var(--state-active, #d6dadb);
+            color: var(--du-state-active, #d6dadb);
         }
     }
 
@@ -106,19 +106,19 @@ $input-placement: 16px;
 .deriv-input--general .deriv-input__field:disabled + .deriv-input__label,
 .deriv-input--error .deriv-input__field:disabled + .deriv-input__label,
 .deriv-input--success .deriv-input__field:disabled + .deriv-input__label {
-    color: var(--state-active, #d6dadb);
+    color: var(--du-state-active, #d6dadb);
 }
 
 .deriv-input--general .deriv-input__field:focus + .deriv-input__label {
-    color: var(--brand-secondary, #85acb0);
+    color: var(--du-brand-secondary, #85acb0);
 }
 
 .deriv-input--error .deriv-input__field:focus + .deriv-input__label {
-    color: var(--status-danger, #ec3f3f);
+    color: var(--du-status-danger, #ec3f3f);
 }
 
 .deriv-input--success .deriv-input__field:focus + .deriv-input__label {
-    color: var(--status-success, #4bb4b3);
+    color: var(--du-status-success, #4bb4b3);
 }
 
 .deriv-input__helper-message {
diff --git a/lib/components/PasswordInput/PasswordMeter.scss b/lib/components/PasswordInput/PasswordMeter.scss
@@ -6,37 +6,37 @@
     transition: width 0.25s ease-in-out;
 
     &__initial {
-        background-color: var(--status-default, #e6e9e9);
+        background-color: var(--du-status-default, #e6e9e9);
         width: 0%;
         border-radius: 0 0 0 $border-radius;
     }
 
     &--error {
-        background-color: var(--status-danger, #ec3f3f);
+        background-color: var(--du-status-danger, #ec3f3f);
         width: 0%;
         border-radius: 0 0 0 $border-radius;
     }
 
     &--weak {
-        background-color: var(--status-danger, #ec3f3f);
+        background-color: var(--du-status-danger, #ec3f3f);
         width: 25%;
         border-radius: 0 0 0 $border-radius;
     }
 
     &--moderate {
-        background-color: var(--status-danger, #ec3f3f);
+        background-color: var(--du-status-danger, #ec3f3f);
         width: 50%;
         border-radius: 0 0 0 $border-radius;
     }
 
     &--strong {
-        background-color: var(--status-success, #4bb4b3);
+        background-color: var(--du-status-success, #4bb4b3);
         width: 75%;
         border-radius: 0 0 0 $border-radius;
     }
 
     &--complete {
-        background-color: var(--status-success, #4bb4b3);
+        background-color: var(--du-status-success, #4bb4b3);
         width: 100%;
         border-radius: 0 0 $border-radius $border-radius;
     }

Original file line number	Diff line number	Diff line change
`@@ -1,21 +1,21 @@`
`1`	`1`	`// TODO: Remove fallback values when the design system is ready`
`2`	`2`
`3`	`3`	`.deriv-helper-message {`
`4`		`- font-size: var(--text-size-sm, 12px);`
`5`		`- line-height: var(--text-lh-2xs, 8px);`
	`4`	`+ font-size: var(--du-text-size-sm, 12px);`
	`5`	`+ line-height: var(--du-text-lh-2xs, 8px);`
`6`	`6`	`font-style: normal;`
`7`		`- font-weight: var(--text-weight-normal, 400);`
`8`		`- color: var(--text-primary, #999999);`
	`7`	`+ font-weight: var(--du-text-weight-normal, 400);`
	`8`	`+ color: var(--du-text-primary, #999999);`
`9`	`9`	`&--general {`
`10`		`- color: var(--text-less-prominent, #999999);`
	`10`	`+ color: var(--du-text-less-prominent, #999999);`
`11`	`11`	`}`
`12`	`12`	`&--success {`
`13`		`- color: var(--text-profit-success, #4bb4b3);`
	`13`	`+ color: var(--du-text-profit-success, #4bb4b3);`
`14`	`14`	`}`
`15`	`15`	`&--warning {`
`16`		`- color: var(--text-warning, #ffad3a);`
	`16`	`+ color: var(--du-text-warning, #ffad3a);`
`17`	`17`	`}`
`18`	`18`	`&--error {`
`19`		`- color: var(--text-red, #ff444f);`
	`19`	`+ color: var(--du-text-red, #ff444f);`
`20`	`20`	`}`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,29 +24,29 @@ $input-placement: 16px;`
`24`	`24`	`text-align: left;`
`25`	`25`	`padding: 10px 16px;`
`26`	`26`	`border: $border;`
`27`		`- font-size: var(--text-size-default, 14px);`
`28`		`- color: var(--text-prominent, #333333);`
	`27`	`+ font-size: var(--du-text-size-default, 14px);`
	`28`	`+ color: var(--du-text-prominent, #333333);`
`29`	`29`
`30`	`30`	`&--general {`
`31`		`- border-color: var(--state-active, #d6dadb);`
	`31`	`+ border-color: var(--du-state-active, #d6dadb);`
`32`	`32`	`&:hover:not(:disabled):not(:focus-within) {`
`33`		`- border-color: var(--border-hover, #999999);`
	`33`	`+ border-color: var(--du-border-hover, #999999);`
`34`	`34`	`}`
`35`	`35`	`&:focus-within {`
`36`		`- border-color: var(--brand-secondary, #85acb0);`
	`36`	`+ border-color: var(--du-brand-secondary, #85acb0);`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`	`&--error {`
`40`		`- border-color: var(--status-danger, #ec3f3f);`
	`40`	`+ border-color: var(--du-status-danger, #ec3f3f);`
`41`	`41`	`}`
`42`	`42`	`&--success {`
`43`		`- border-color: var(--status-success, #4bb4b3);`
	`43`	`+ border-color: var(--du-status-success, #4bb4b3);`
`44`	`44`	`}`
`45`	`45`	`&--active {`
`46`		`- border-color: var(--brand-secondary, #85acb0);`
	`46`	`+ border-color: var(--du-brand-secondary, #85acb0);`
`47`	`47`	`}`
`48`	`48`	`&--disabled {`
`49`		`- border-color: var(--state-active, #d6dadb);`
	`49`	`+ border-color: var(--du-state-active, #d6dadb);`
`50`	`50`	`cursor: not-allowed;`
`51`	`51`	`}`
`52`	`52`
`@@ -59,9 +59,9 @@ $input-placement: 16px;`
`59`	`59`	`&:focus,`
`60`	`60`	`&:not(:placeholder-shown) {`
`61`	`61`	`& ~ label {`
`62`		`- font-size: var(--text-size-xs, 10px);`
	`62`	`+ font-size: var(--du-text-size-xs, 10px);`
`63`	`63`	`transform: translate(0, -50%);`
`64`		`- background-color: var(--general-main-1, #ffffff);`
	`64`	`+ background-color: var(--du-general-main-1, #ffffff);`
`65`	`65`	`padding: 0 4px;`
`66`	`66`	`height: fit-content;`
`67`	`67`	`}`
`@@ -79,22 +79,22 @@ $input-placement: 16px;`
`79`	`79`	`align-items: center;`
`80`	`80`	`pointer-events: none;`
`81`	`81`	`transition: all 0.15s ease-out;`
`82`		`- font-size: var(--text-size-default, 14px);`
	`82`	`+ font-size: var(--du-text-size-default, 14px);`
`83`	`83`	`&--general {`
`84`		`- color: var(--border-hover, #999999);`
	`84`	`+ color: var(--du-border-hover, #999999);`
`85`	`85`	`}`
`86`	`86`	`&--error {`
`87`		`- color: var(--status-danger, #ec3f3f);`
	`87`	`+ color: var(--du-status-danger, #ec3f3f);`
`88`	`88`	`}`
`89`	`89`	`&--success {`
`90`		`- color: var(--status-success, #4bb4b3);`
	`90`	`+ color: var(--du-status-success, #4bb4b3);`
`91`	`91`	`}`
`92`	`92`	`&--active {`
`93`		`- color: var(--brand-secondary, #85acb0);`
	`93`	`+ color: var(--du-brand-secondary, #85acb0);`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`&--disabled {`
`97`		`- color: var(--state-active, #d6dadb);`
	`97`	`+ color: var(--du-state-active, #d6dadb);`
`98`	`98`	`}`
`99`	`99`	`}`
`100`	`100`
`@@ -106,19 +106,19 @@ $input-placement: 16px;`
`106`	`106`	`.deriv-input--general .deriv-input__field:disabled + .deriv-input__label,`
`107`	`107`	`.deriv-input--error .deriv-input__field:disabled + .deriv-input__label,`
`108`	`108`	`.deriv-input--success .deriv-input__field:disabled + .deriv-input__label {`
`109`		`- color: var(--state-active, #d6dadb);`
	`109`	`+ color: var(--du-state-active, #d6dadb);`
`110`	`110`	`}`
`111`	`111`
`112`	`112`	`.deriv-input--general .deriv-input__field:focus + .deriv-input__label {`
`113`		`- color: var(--brand-secondary, #85acb0);`
	`113`	`+ color: var(--du-brand-secondary, #85acb0);`
`114`	`114`	`}`
`115`	`115`
`116`	`116`	`.deriv-input--error .deriv-input__field:focus + .deriv-input__label {`
`117`		`- color: var(--status-danger, #ec3f3f);`
	`117`	`+ color: var(--du-status-danger, #ec3f3f);`
`118`	`118`	`}`
`119`	`119`
`120`	`120`	`.deriv-input--success .deriv-input__field:focus + .deriv-input__label {`
`121`		`- color: var(--status-success, #4bb4b3);`
	`121`	`+ color: var(--du-status-success, #4bb4b3);`
`122`	`122`	`}`
`123`	`123`
`124`	`124`	`.deriv-input__helper-message {`