diff --git a/examples/react-template/screens/Progress.tsx b/examples/react-template/screens/Progress.tsx
index 502e5329..026b10a8 100644
--- 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 => {
60
-
+
/ 100 Go
diff --git a/packages/react/components/progress/radial/ProgressRadial.tsx b/packages/react/components/progress/radial/ProgressRadial.tsx
index 75b10746..3f29639e 100644
--- 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
index 1a23ffe8..7865e1d6 100644
--- 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
index 45b57927..6e5ca634 100644
--- 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 {