From 1b5fa7fd246aa55b34da4a80f6398c43e3ffa8d3 Mon Sep 17 00:00:00 2001
From: heorhi-deriv <heorhi@binary.com>
Date: Tue, 10 Sep 2024 09:52:15 +0300
Subject: [PATCH] feat: :sparkles: add dark support for text message

---
 src/components/SectionMessage/SectionMessage.scss | 2 +-
 src/styles/abstracts/_variables.scss              | 1 +
 src/styles/base/_root.scss                        | 2 ++
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/SectionMessage/SectionMessage.scss b/src/components/SectionMessage/SectionMessage.scss
index 608e57f8..76729211 100644
--- 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
index 44cf7396..2c520976 100644
--- 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
index 64878164..f158dbe3 100644
--- 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};