Merge pull request #224 from BouyguesTelecom/fix/progress-color

change color progress
BouyguesTelecom · Dec 16, 2024 · fa78424 · fa78424
2 parents 0e28699 + a8b8a32
commit fa78424
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 16 deletions.
diff --git a/examples/react-template/screens/Progress.tsx b/examples/react-template/screens/Progress.tsx
@@ -1,15 +1,5 @@
 import * as React from 'react'
-import {
-  Divider,
-  Progress,
-  ProgressRadial,
-  Section,
-  Text,
-  TextLevels,
-  Title,
-  TitleLevels,
-  View
-} from '@trilogy-ds/react/components'
+import { Divider, Progress, ProgressRadial, Section, Text, TextLevels, Title, TitleLevels, View } from '@trilogy-ds/react/components'
 import { StatusState, TypographyAlign, TypographyBold } from '@trilogy-ds/react'
 
 export const ProgressScreen = (): JSX.Element => {
@@ -23,7 +13,7 @@ export const ProgressScreen = (): JSX.Element => {
             <Title typo={TypographyAlign.TEXT_CENTERED} level={TitleLevels.THREE} marginless>
               60
             </Title>
-            <Text level={TextLevels.ONE} marginless>
+            <Text level={TextLevels.ONE} marginless typo={TypographyAlign.TEXT_CENTERED}>
               / 100 Go
             </Text>
           </View>

diff --git a/packages/react/components/progress/radial/ProgressRadial.tsx b/packages/react/components/progress/radial/ProgressRadial.tsx
@@ -58,7 +58,7 @@ const ProgressRadial = ({
     styleBackground = `radial-gradient(circle at center, white 58%, transparent 58.1%),`
     styleBackground += `conic-gradient(#0C7B91 0 ${firstProgressDegree}deg, ${getColorStyle(
       'MAIN',
-    )} ${secondProgressStartDegree}deg ${secondProgressStartDegree + secondProgressDegree}deg, gainsboro ${
+    )} ${secondProgressStartDegree}deg ${secondProgressStartDegree + secondProgressDegree}deg, ${getColorStyle('MAIN_FADE',)} ${
       secondProgressStartDegree + secondProgressDegree
     }deg 360deg)`
     progressRadial.style.background = styleBackground

diff --git a/packages/styles/framework/src/components/_progress-radial.scss b/packages/styles/framework/src/components/_progress-radial.scss
@@ -1,6 +1,6 @@
 .progress-radial {
   background: radial-gradient(white 58%, transparent 51%),
-  conic-gradient(gainsboro 0deg 360deg, gainsboro 0deg 360deg);
+  conic-gradient(getColor('main-fade') 0deg 360deg, getColor('main-fade') 0deg 360deg);
   border-radius: 50%;
   width: 124px;
   height: 124px;

diff --git a/packages/styles/framework/src/elements/_progress.scss b/packages/styles/framework/src/elements/_progress.scss
@@ -18,7 +18,7 @@ $progressbar-small: 5px;
   -moz-appearance: none;
   -webkit-appearance: none;
 
-  background-color: getColor('neutral-fade');
+  background-color: getColor('main-fade');
 
   &::-webkit-progress-bar {
     background-color: getColor('main-fade');
@@ -98,7 +98,7 @@ $progress-circle-slices: (
   secondary: getColor('info'),
   tertiary: getColor('font'),
   warning: getColor('warning'),
-  empty: getColor('neutral-fade')
+  empty: getColor('main-fade')
 );
 
 .progress-circle {