From f6e8838def942951c12b45a1b2f0301393bb0adf Mon Sep 17 00:00:00 2001
From: Angelina Gadzhieva <lunory@yandex-team.ru>
Date: Thu, 30 Nov 2023 14:51:06 +0300
Subject: [PATCH] feat(Progress): make contrast (#1129)

---
 src/components/Progress/Progress.scss         | 10 +++---
 src/components/Progress/README.md             | 36 +++++++++----------
 .../Progress/__stories__/Progress.stories.tsx | 12 +++----
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/src/components/Progress/Progress.scss b/src/components/Progress/Progress.scss
index 641a499743..639a940013 100644
--- a/src/components/Progress/Progress.scss
+++ b/src/components/Progress/Progress.scss
@@ -8,8 +8,10 @@ $progress-s-height: 10px;
 $progress-xs-height: 4px;
 
 @mixin progress-text {
-    font-size: 12px;
-    color: var(--g-color-text-light-primary);
+    font-size: var(--g-text-body-short-font-size);
+    font-weight: var(--g-text-body-font-weight);
+    font-family: var(--g-text-body-font-family);
+    color: var(--g-color-text-primary);
     padding: 0 10px;
     box-sizing: border-box;
 }
@@ -24,7 +26,6 @@ $progress-xs-height: 4px;
     background-color: var(--g-color-base-generic);
 
     text-align: center;
-    text-shadow: 0 0 1px var(--g-color-text-dark-primary);
 
     &__text {
         @include progress-text;
@@ -44,8 +45,6 @@ $progress-xs-height: 4px;
     }
 
     &__item {
-        font-size: 12px;
-
         position: relative;
 
         float: left;
@@ -54,7 +53,6 @@ $progress-xs-height: 4px;
         height: 100%;
         overflow: hidden;
 
-        color: var(--g-color-text-light-primary);
         transition: transform 0.6s ease, width 0.6s ease, background-color 0.6s ease;
 
         &_theme_default {
diff --git a/src/components/Progress/README.md b/src/components/Progress/README.md
index b66da9646a..4c986649f5 100644
--- a/src/components/Progress/README.md
+++ b/src/components/Progress/README.md
@@ -18,28 +18,28 @@ Use `theme` property to specify color of the whole progress or the composite par
 
 <ExampleBlock
   code={`
-<Progress text="default" value={80} />
-<Progress text="warning" theme="warning" value={70} />
-<Progress text="info" theme="info" value={90} />
-<Progress text="success" theme="success" value={90} />
-<Progress text="danger" theme="danger" value={80} />
-<Progress text="misc" theme="misc" value={60} />
+<Progress text="default" value={50} />
+<Progress text="warning" theme="warning" value={50} />
+<Progress text="info" theme="info" value={50} />
+<Progress text="success" theme="success" value={50} />
+<Progress text="danger" theme="danger" value={50} />
+<Progress text="misc" theme="misc" value={50} />
 `}
 >
   <div style={{width: '30%'}}>
-    <UIKit.Progress text="default" value={80} />
+    <UIKit.Progress text="default" value={50} />
     <div style={{height: '15px'}} />
-    <UIKit.Progress text="success" theme="success" value={90} />
+    <UIKit.Progress text="success" theme="success" value={50} />
   </div>
   <div style={{width: '30%'}}>
-    <UIKit.Progress text="warning" theme="warning" value={70} />
+    <UIKit.Progress text="warning" theme="warning" value={50} />
     <div style={{height: '15px'}} />
-    <UIKit.Progress text="danger" theme="danger" value={80} />
+    <UIKit.Progress text="danger" theme="danger" value={50} />
   </div>
   <div style={{width: '30%'}}>
-    <UIKit.Progress text="info" theme="info "value={90} />
+    <UIKit.Progress text="info" theme="info "value={50} />
     <div style={{height: '15px'}} />
-    <UIKit.Progress text="misc" theme="misc" value={60} />
+    <UIKit.Progress text="misc" theme="misc" value={50} />
   </div>
 </ExampleBlock>
 
@@ -48,12 +48,12 @@ LANDING_BLOCK-->
 <!--GITHUB_BLOCK-->
 
 ```tsx
-<Progress text="default" value={80} />
-<Progress text="warning" theme="warning" value={70} />
-<Progress text="info" theme="info" value={90} />
-<Progress text="success" theme="success" value={90} />
-<Progress text="danger" theme="danger" value={80} />
-<Progress text="misc" theme="misc" value={60} />
+<Progress text="default" value={50} />
+<Progress text="warning" theme="warning" value={50} />
+<Progress text="info" theme="info" value={50} />
+<Progress text="success" theme="success" value={50} />
+<Progress text="danger" theme="danger" value={50} />
+<Progress text="misc" theme="misc" value={50} />
 ```
 
 <!--/GITHUB_BLOCK-->
diff --git a/src/components/Progress/__stories__/Progress.stories.tsx b/src/components/Progress/__stories__/Progress.stories.tsx
index e201ba05f3..f0fbea88e5 100644
--- a/src/components/Progress/__stories__/Progress.stories.tsx
+++ b/src/components/Progress/__stories__/Progress.stories.tsx
@@ -17,17 +17,17 @@ export const Default = Template.bind({value: 50});
 const ThemeTemplate: StoryFn<typeof Progress> = (args) => {
     return (
         <React.Fragment>
-            <Progress {...args} value={80} theme="default" text="default" />
+            <Progress {...args} value={50} theme="default" text="default" />
             <br />
-            <Progress {...args} value={90} theme="success" text="success" />
+            <Progress {...args} value={50} theme="success" text="success" />
             <br />
-            <Progress {...args} value={70} theme="warning" text="warning" />
+            <Progress {...args} value={50} theme="warning" text="warning" />
             <br />
-            <Progress {...args} value={80} theme="danger" text="danger" />
+            <Progress {...args} value={50} theme="danger" text="danger" />
             <br />
-            <Progress {...args} value={90} theme="info" text="info" />
+            <Progress {...args} value={50} theme="info" text="info" />
             <br />
-            <Progress {...args} value={60} theme="misc" text="misc" />
+            <Progress {...args} value={50} theme="misc" text="misc" />
         </React.Fragment>
     );
 };