fix: correct progress color tokens (#1998)

* fix: correct color tokens * docs: update value in react story
Kajabi · Oct 8, 2024 · b6a56b5 · b6a56b5
1 parent dbb02c1
commit b6a56b5
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_progress_bar.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_progress_bar.html.erb
@@ -2,7 +2,7 @@
 animate = component.animate.nil? ? true : component.animate
 content = component.label ? "#{component.label}: " : ""
 content << "#{component.percent}%&nbsp;progress"
-color = component.color || SageTokens::COLOR_PALETTE[:MERCURY_50]
+color = component.color || SageTokens::COLOR_PALETTE[:MERCURY_500]
 %>
 
 <div

diff --git a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss
@@ -44,7 +44,7 @@ $-progress-bar-height: sage-spacing(xs);
 .sage-progress-bar__value {
   transform-origin: center left;
   height: 100%;
-  background-color: var(--progress-bar-value-color, sage-color(sage, 300));
+  background-color: var(--progress-bar-value-color, sage-color(mercury, 500));
   border-radius: sage-border(radius-small);
 
   .sage-modal__header & {

diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
@@ -81,7 +81,7 @@ ProgressBar.defaultProps = {
   animate: true,
   backgroundColor: null,
   className: null,
-  color: ProgressBar.COLORS.MERCURY_50,
+  color: ProgressBar.COLORS.MERCURY_500,
   disableTooltip: false,
   displayPercent: false,
   label: null,

diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.story.jsx
@@ -29,7 +29,7 @@ const Template = (args) => <ProgressBar {...args} />;
 export const Default = Template.bind({});
 export const CustomColor = Template.bind({});
 CustomColor.args = {
-  color: ProgressBar.COLORS.PURPLE_50,
+  color: ProgressBar.COLORS.PURPLE_300,
   backgroundColor: ProgressBar.COLORS.ORANGE_100,
   label: 'Cloning product',
   percent: '44',