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 {