Merge pull request #249 from heorhi-deriv/FEQ-2645-Add-dark-support-f…

…or-message-text [FEQ] george / FEQ-2645 / Add dark support for text message
deriv-com · Sep 10, 2024 · d587161 · d587161
2 parents 05dd3fb + 1b5fa7f
commit d587161
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/src/components/SectionMessage/SectionMessage.scss b/src/components/SectionMessage/SectionMessage.scss
@@ -6,7 +6,7 @@ $success-bgColor: $color-status-success;
 $success-icColor: $color-green-9;
 $info-bgColor: $color-status-information-1;
 $info-icColor: $color-blue-11;
-$description-color: $alpha-color-black-8;
+$description-color: var(--du-text-black-transparent, $alpha-color-black-8);
 $general-color: $color-gray-2;
 
 .deriv-section-message {

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
@@ -147,6 +147,7 @@ $alpha-color-white-1: transparentize($color-white, 0.04);
 $alpha-color-white-2: transparentize($color-white, 0.84);
 $alpha-color-white-3: transparentize($color-white, 0.92);
 $alpha-color-white-4: transparentize($color-white, 0.3);
+$alpha-color-white-5: transparentize($color-white, 0.72);
 $alpha-color-red-1: transparentize($color-red, 0.92);
 $alpha-color-red-2: transparentize($color-red, 0.84);
 $alpha-color-red-3: transparentize($color-red, 0.76);

diff --git a/src/styles/base/_root.scss b/src/styles/base/_root.scss
@@ -105,6 +105,7 @@
         --du-text-status-info-blue: #{$color-blue};
         --du-text-hint: #{$color-black-1};
         --du-text-white: #{$color-white};
+        --du-text-black-transparent: #{$alpha-color-black-8};
         // Purchase
         --du-purchase-main-1: #{$color-green-1};
         --du-purchase-section-1: #{$color-green-2};
@@ -262,6 +263,7 @@
         --du-icon-dark-background: #{$color-white};
         --du-icon-gray-background: #{$color-black-1};
         --du-icon-black-plus: #{$color-white};
+        --du-text-black-transparent: #{$alpha-color-white-5};
         // Purchase
         --du-purchase-main-1: #{$color-green-3};
         --du-purchase-section-1: #{$color-green-4};