chore: append prefix for css variables

Author: aizad-deriv

lib/components/Dropdown/Dropdown.scss

@@ -7,7 +7,7 @@
         pointer-events: none;
 
         & label {
-            color: var(--system-light-5-active-background, #999);
+            color: var(--du-system-light-5-active-background, #999);
         }
     }
 
@@ -24,7 +24,7 @@
     }
     &__content {
         width: 100%;
-        background: var(--system-light-8-primary-background, #fff);
+        background: var(--du-system-light-8-primary-background, #fff);
         display: flex;
         align-items: center;
 
@@ -44,7 +44,7 @@
         outline: 0;
         font-size: 14px;
         background-color: transparent;
-        color: var(--system-light-2-general-text, #333);
+        color: var(--du-system-light-2-general-text, #333);
         transition: border-color 0.2s;
         cursor: unset;
         user-select: none;
@@ -84,7 +84,7 @@
     }
 
     &__field:focus ~ &__label {
-        color: var(--brand-blue, #85acb0);
+        color: var(--du-brand-blue, #85acb0);
     }
 
     &__items {
@@ -95,13 +95,13 @@
         align-items: flex-start;
         z-index: 2;
         border-radius: 4px;
-        background: var(--system-light-8-primary-background, #fff);
+        background: var(--du-system-light-8-primary-background, #fff);
         box-shadow: 0 32px 64px 0 rgba(14, 14, 14, 0.14);
         overflow-y: auto;
         width: 328px;
 
         &--full {
-          width: 100%;
+            width: 100%;
         }
 
         & > :first-child {
@@ -141,11 +141,11 @@
 
         &:hover:not(&--active) {
             cursor: pointer;
-            background: var(--system-light-6-hover-background, #e6e9e9);
+            background: var(--du-system-light-6-hover-background, #e6e9e9);
         }
 
         &--active {
-            background: var(--system-light-5-active-background, #d6dadb);
+            background: var(--du-system-light-5-active-background, #d6dadb);
         }
     }
 }

lib/components/LinearProgressBar/LinearProgressBar.scss

@@ -1,27 +1,26 @@
-$inactive_color: var(--general-main-3, #999999);
-$success_color: var(--status-success, #4bb4b3 );
-$warning_color: var(--status-warning, #ffad3a);
-$error_color: var(--status-danger, #ec3f3f);
-$active_color:var(--state-active, #d6dadb);
-$border_section:var(--border-divider, #f2f3f4);
-$state_hover:var(--general-hover, #e6e9e9);
-$BORDER_RADIUS:4px;
+$inactive_color: var(--du-general-main-3, #999999);
+$success_color: var(--du-status-success, #4bb4b3);
+$warning_color: var(--du-status-warning, #ffad3a);
+$error_color: var(--du-status-danger, #ec3f3f);
+$active_color: var(--du-state-active, #d6dadb);
+$border_section: var(--du-border-divider, #f2f3f4);
+$state_hover: var(--du-general-hover, #e6e9e9);
 
 .deriv-linear-progress-bar {
     position: relative;
     width: 100%;
     padding: unset;
     box-sizing: border-box;
     margin: 8px 0;
-    border-bottom: 1px solid $border_section ;
+    border-bottom: 1px solid $border_section;
 
     &__track {
         background: $inactive_color;
         position: relative;
         margin: 2px 0 8px;
         height: 6px;
         width: 100%;
-        border-radius: #{$BORDER_RADIUS * 2};
+        border-radius: $border-radius-2;
     }
 
     &__line {
@@ -30,7 +29,7 @@ $BORDER_RADIUS:4px;
         top: 0;
         left: 0;
         height: 100%;
-        border-radius: #{$BORDER_RADIUS * 2};
+        border-radius: $border-radius-2;
         pointer-events: none;
         transition: width 0.3s;
 
@@ -60,7 +59,7 @@ $BORDER_RADIUS:4px;
 
             &:before,
             &:after {
-                content: '';
+                content: "";
                 position: absolute;
                 background-color: inherit;
                 top: 0;
@@ -69,10 +68,12 @@ $BORDER_RADIUS:4px;
                 will-change: left, right;
             }
             &:before {
-                animation: skelton-loader 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+                animation: skelton-loader 2.1s
+                    cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
             }
             &:after {
-                animation: skelton-loader-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+                animation: skelton-loader-short 2.1s
+                    cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
                 animation-delay: 1.15s;
             }
         }

lib/components/Tabs/Tabs.scss

@@ -4,21 +4,21 @@
     width: 100%;
     &__btn {
         display: inline-flex;
-        gap: 0.8rem;
+        gap: 8px;
         align-items: center;
         justify-content: center;
         width: 50%;
         border: none;
-        border-bottom: 0.2rem solid var(--light-7-secondary-background, #f2f3f4);
+        border-bottom: 2px solid var(--du-light-7-secondary-background, #f2f3f4);
         background: none;
-        padding: 1rem 0;
+        padding: 10px 0;
         cursor: pointer;
         &--active {
             width: 50%;
             border: none;
-            border-bottom: 0.2rem solid var(--brand-coral, #ff444f);
+            border-bottom: 2px solid var(--du-brand-coral, #ff444f);
             background: none;
-            padding: 1rem 0;
+            padding: 10px 0;
         }
     }
 }
@@ -33,14 +33,14 @@
 
     &__btn {
         display: inline-flex;
-        gap: 0.8rem;
+        gap: 8px;
         align-items: center;
         justify-content: center;
         width: 50%;
         border: none;
-        border-bottom: 0.2rem solid var(--light-7-secondary-background, #f2f3f4);
+        border-bottom: 2px solid var(--du-light-7-secondary-background, #f2f3f4);
         background: none;
-        padding: 0.5rem 0;
+        padding: 5px 0;
         cursor: pointer;
         span {
             color: #999;

lib/components/ToggleSwitch/ToggleSwitch.scss

@@ -17,7 +17,7 @@
         position: absolute;
         inset: 0;
         cursor: pointer;
-        background-color: var(--light-4-disabled-text, #d6d6d6);
+        background-color: var(--du-light-4-disabled-text, #d6d6d6);
         transition: 0.4s;
         border-radius: 1.6rem;
 
@@ -28,7 +28,7 @@
             width: 1.8rem;
             left: 0.3rem;
             bottom: 0.3rem;
-            background-color: var(--system-dark-1-prominent-text, #fff);
+            background-color: var(--du-system-dark-1-prominent-text, #fff);
             transition: 0.4s;
             border-radius: 50%;
 
@@ -40,7 +40,7 @@
 }
 
 .deriv-toggle-switch input:checked + .deriv-toggle-switch__slider {
-    background-color: var(--light-status-success, #4bb4b3);
+    background-color: var(--du-light-status-success, #4bb4b3);
 }
 
 .deriv-toggle-switch input:checked + .deriv-toggle-switch__slider:before {