From a9fa331b9d95be2edfe538a7753aec55d499fdb3 Mon Sep 17 00:00:00 2001
From: mufazalov <mufazalov@yandex-team.ru>
Date: Mon, 12 Feb 2024 16:56:21 +0300
Subject: [PATCH 1/2] refactor(ProgressViewer): rename bg to status

---
 src/components/ProgressViewer/ProgressViewer.scss | 10 +++++-----
 src/components/ProgressViewer/ProgressViewer.tsx  |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ProgressViewer/ProgressViewer.scss b/src/components/ProgressViewer/ProgressViewer.scss
index 0c6fff5f33..affb705b82 100644
--- a/src/components/ProgressViewer/ProgressViewer.scss
+++ b/src/components/ProgressViewer/ProgressViewer.scss
@@ -27,15 +27,15 @@
 
         height: 100%;
 
-        &_bg_scarlet {
-            background: var(--ydb-color-status-red);
-        }
-        &_bg_apple {
+        &_status_good {
             background: var(--ydb-color-status-green);
         }
-        &_bg_saffron {
+        &_status_warning {
             background: var(--ydb-color-status-yellow);
         }
+        &_status_danger {
+            background: var(--ydb-color-status-red);
+        }
     }
 
     &__text {
diff --git a/src/components/ProgressViewer/ProgressViewer.tsx b/src/components/ProgressViewer/ProgressViewer.tsx
index f35ebf519b..4d2845c842 100644
--- a/src/components/ProgressViewer/ProgressViewer.tsx
+++ b/src/components/ProgressViewer/ProgressViewer.tsx
@@ -80,12 +80,12 @@ export function ProgressViewer({
         [valueText, capacityText] = formatValues(Number(value), Number(capacity));
     }
 
-    let bg = inverseColorize ? 'scarlet' : 'apple';
+    let status = inverseColorize ? 'danger' : 'good';
     if (colorizeProgress) {
         if (fillWidth > warningThreshold && fillWidth <= dangerThreshold) {
-            bg = 'saffron';
+            status = 'warning';
         } else if (fillWidth > dangerThreshold) {
-            bg = inverseColorize ? 'apple' : 'scarlet';
+            status = inverseColorize ? 'good' : 'danger';
         }
     }
 
@@ -106,7 +106,7 @@ export function ProgressViewer({
     if (isNumeric(value)) {
         return (
             <div className={b({size}, className)}>
-                <div className={b('line', {bg})} style={lineStyle}></div>
+                <div className={b('line', {status})} style={lineStyle}></div>
                 <span className={b('text', {text})}>{renderContent()}</span>
             </div>
         );

From a231e2a32e9259bc8a4f9016f97b2a1c65eba761 Mon Sep 17 00:00:00 2001
From: mufazalov <mufazalov@yandex-team.ru>
Date: Mon, 12 Feb 2024 17:45:48 +0300
Subject: [PATCH 2/2] fix(ProgressViewer): make text more contrast

---
 .../ProgressViewer/ProgressViewer.scss        | 50 ++++++++++++-------
 .../ProgressViewer/ProgressViewer.tsx         | 11 ++--
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/components/ProgressViewer/ProgressViewer.scss b/src/components/ProgressViewer/ProgressViewer.scss
index affb705b82..4ca04704a4 100644
--- a/src/components/ProgressViewer/ProgressViewer.scss
+++ b/src/components/ProgressViewer/ProgressViewer.scss
@@ -1,6 +1,8 @@
 @import '../../styles/mixins.scss';
 
 .progress-viewer {
+    $block: &;
+
     position: relative;
     z-index: 0;
 
@@ -16,37 +18,51 @@
     font-size: var(--g-text-body-2-font-size);
     white-space: nowrap;
 
-    color: var(--g-color-text-light-primary);
+    color: var(--g-color-text-complementary);
     border-radius: 2px;
     background: var(--g-color-base-generic);
 
+    &_theme_dark {
+        color: var(--g-color-text-light-primary);
+
+        // Ensure better contrast with text
+        #{$block}__line {
+            opacity: 0.75;
+        }
+    }
+
+    &_status {
+        &_good {
+            background-color: var(--g-color-base-positive-light);
+            #{$block}__line {
+                background-color: var(--ydb-color-status-green);
+            }
+        }
+        &_warning {
+            background-color: var(--g-color-base-yellow-light);
+            #{$block}__line {
+                background-color: var(--ydb-color-status-yellow);
+            }
+        }
+        &_danger {
+            background-color: var(--g-color-base-danger-light);
+            #{$block}__line {
+                background-color: var(--ydb-color-status-red);
+            }
+        }
+    }
+
     &__line {
         position: absolute;
         top: 0;
         left: 0;
 
         height: 100%;
-
-        &_status_good {
-            background: var(--ydb-color-status-green);
-        }
-        &_status_warning {
-            background: var(--ydb-color-status-yellow);
-        }
-        &_status_danger {
-            background: var(--ydb-color-status-red);
-        }
     }
 
     &__text {
         position: relative;
         z-index: 1;
-        &_text_contrast0 {
-            color: var(--g-color-text-light-primary);
-        }
-        &_text_contrast70 {
-            color: var(--g-color-text-complementary);
-        }
     }
 
     &_size_xs {
diff --git a/src/components/ProgressViewer/ProgressViewer.tsx b/src/components/ProgressViewer/ProgressViewer.tsx
index 4d2845c842..4ae44bd81a 100644
--- a/src/components/ProgressViewer/ProgressViewer.tsx
+++ b/src/components/ProgressViewer/ProgressViewer.tsx
@@ -1,4 +1,5 @@
 import cn from 'bem-cn-lite';
+import {useTheme} from '@gravity-ui/uikit';
 
 import type {ValueOf} from '../../types/common';
 import {isNumeric} from '../../utils/utils';
@@ -66,6 +67,8 @@ export function ProgressViewer({
     warningThreshold = 60,
     dangerThreshold = 80,
 }: ProgressViewerProps) {
+    const theme = useTheme();
+
     let fillWidth =
         Math.round((parseFloat(String(value)) / parseFloat(String(capacity))) * 100) || 0;
     fillWidth = fillWidth > 100 ? 100 : fillWidth;
@@ -93,8 +96,6 @@ export function ProgressViewer({
         width: fillWidth + '%',
     };
 
-    const text = fillWidth > 60 ? 'contrast0' : 'contrast70';
-
     const renderContent = () => {
         if (isNumeric(capacity)) {
             return `${valueText} ${divider} ${capacityText}`;
@@ -105,9 +106,9 @@ export function ProgressViewer({
 
     if (isNumeric(value)) {
         return (
-            <div className={b({size}, className)}>
-                <div className={b('line', {status})} style={lineStyle}></div>
-                <span className={b('text', {text})}>{renderContent()}</span>
+            <div className={b({size, theme, status}, className)}>
+                <div className={b('line')} style={lineStyle}></div>
+                <span className={b('text')}>{renderContent()}</span>
             </div>
         );
     }