diff --git a/src/Components/ProgressBar/ProgressBar.scss b/src/Components/ProgressBar/ProgressBar.scss index 70fbd3ad..7f7d9715 100644 --- a/src/Components/ProgressBar/ProgressBar.scss +++ b/src/Components/ProgressBar/ProgressBar.scss @@ -10,7 +10,7 @@ height: 12px; box-sizing: border-box; padding: $cf-space-3xs 0; - background-color: $cf-grey-5; + background-color: $cf-grey-1; display: inline-flex; position: relative; } @@ -25,7 +25,7 @@ .cf-progress-bar--text { margin-top: $cf-space-2xs; width: 100%; - color: $cf-grey-55; + color: #88889b; display: inline-flex; justify-content: space-between; font-size: $cf-text-base-0; diff --git a/src/Components/ProgressBar/ProgressBar.tsx b/src/Components/ProgressBar/ProgressBar.tsx index a49f0a85..3305abed 100644 --- a/src/Components/ProgressBar/ProgressBar.tsx +++ b/src/Components/ProgressBar/ProgressBar.tsx @@ -45,7 +45,7 @@ export const ProgressBar = forwardRef( max = 100, label, className, - color = InfluxColors.White, + color = InfluxColors.Lavender, barGradient, valueText, maxText, diff --git a/src/Constants/colors.ts b/src/Constants/colors.ts index 01f0797c..71216bb6 100644 --- a/src/Constants/colors.ts +++ b/src/Constants/colors.ts @@ -487,6 +487,22 @@ export const influxGradients = { start: InfluxColors.Pool, stop: InfluxColors.Pulsar, }, + + // New gradients + LightMode: { + start: '#D30971', + stop: '#9B2AFF', + }, + + DarkMode: { + start: '#F863B0', + stop: '#BC61E6', + }, + + TurquoiseChartreuse: { + start: '#5EE4E4', + stop: '#D6F622', + }, } export const dropdownScrollColors = { diff --git a/src/Types/index.tsx b/src/Types/index.tsx index 8207c2fb..48715f2a 100644 --- a/src/Types/index.tsx +++ b/src/Types/index.tsx @@ -140,6 +140,9 @@ export enum Gradients { DangerLight = 'DangerLight', Danger = 'Danger', DangerDark = 'DangerDark', + DarkMode = 'DarkMode', + LightMode = 'LightMode', + TurquoiseChartreuse = 'TurquoiseChartreuse', } export enum DropdownMenuTheme {