feat: update progress bar default fill to horizontal gradient #515

cameronsimony · 2025-08-14T15:08:38Z

Description

This PR updates the default progress bar fill color from solid red (#FF3E14) to a horizontal gradient (#FDA4AF → #FF3E14) in the Pine design system, as specified in DSS-1497.

Changes Made

Added CSS variables for gradient colors (--progress-gradient-start and --progress-gradient-end) to enable future customization
Updated progress pseudo-elements (::-webkit-progress-value and ::-moz-progress-bar) to use background with gradient fallback instead of background-color
Preserved existing CSS variable system to ensure custom colors still override the default gradient

The implementation uses CSS variable fallback logic: var(--color-progress-fill, linear-gradient(to right, var(--progress-gradient-start), var(--progress-gradient-end))) to maintain backward compatibility.

Fixes DSS-1497

Type of change

New feature (non-breaking change which adds functionality)
This change requires a documentation update

How Has This Been Tested?

⚠️ Important: Visual verification is incomplete and requires human review.

Compiled successfully with no build errors
Pre-commit hooks passed (lint, validate-commit-msg)
Tested manually in Storybook at 50% progress
Visual gradient verification needed - Could not confirm gradient rendering in browser testing
Custom color override testing
Cross-browser compatibility testing
RTL layout behavior testing

Test Configuration:

Pine versions: Local development build
OS: Ubuntu Linux
Browsers: Chrome (Storybook testing)
Tested component: Progress component in Pine Storybook

Critical Review Areas

Please pay special attention to:

Visual appearance: Verify the gradient (#FDA4AF → #FF3E14) renders correctly
Custom color preservation: Test that setting --color-progress-fill still overrides the gradient
Cross-browser compatibility: Test in Chrome, Firefox, and Safari (webkit vs moz pseudo-elements)
RTL layout behavior: Gradient direction may need adjustment for right-to-left layouts
CSS fallback logic: Ensure var(--color-progress-fill, linear-gradient(...)) behaves as expected

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing tests pass locally with my changes
Design has QA'ed and approved this PR

Link to Devin run: https://app.devin.ai/sessions/f76dcde5eca0423a9fcdba1671311c27
Requested by: Cameron Simony (@cameronsimony)

Note: This PR is part of a coordinated update across both Pine and Sage design systems. A corresponding PR for Sage will be created separately.

- Replace solid red (#FF3E14) with gradient (#FDA4AF → #FF3E14) - Add gradient colors as CSS variables for future flexibility - Preserve existing CSS variable fallback system for custom colors - Only affects default variant, custom colors remain unchanged DSS-1497 Co-Authored-By: Cameron Simony <cameron.simony@kajabi.com> Co-Authored-By: cameron.simony@kajabi.com <cameron.simony@gmail.com>

devin-ai-integration · 2025-08-14T15:08:41Z

Original prompt from cameron.simony

Hey Devin,

I'd like you to update the default Progress Bar fill color from a solid red (#FF3E14) to a horizontal gradient (#FDA4AF → #FF3E14) in both the Sage and Pine design systems. This change should only affect the default variant of the progress bar while preserving all other functionality.

## Task Details
- Change the default progress bar fill from solid red (#FF3E14) to a linear gradient
- Gradient spec: #FDA4AF (left) → #FF3E14 (right)
- Gradient direction: horizontal (left to right)
- Only modify the default variant; custom color variants should remain unchanged
- Ensure percentage labels and tooltips remain unaffected

## Files to Modify

### Sage Design System:
- Path: `packages/sage-assets/lib/stylesheets/components/_progress_bar.scss`
- Current implementation: `.sage-progress-bar__value` element with `background-color: var(--progress-bar-value-color, var(--pine-color-brand))`
- You'll need to update this to conditionally apply the gradient when no custom color is set

### Pine Design System:
- Path: `libs/core/src/components/pds-progress/pds-progress.scss`
- Current implementation: Uses browser-specific pseudo-elements (`progress::-webkit-progress-value` and `progress::-moz-progress-bar`) with `background-color: var(--color-progress-fill, var(--pine-color-brand))`
- You'll need to update both pseudo-elements to ensure cross-browser compatibility

## Implementation Considerations
As you implement this, please consider these design decisions:
1. Should the gradient colors be implemented as CSS variables for future flexibility?
2. How should the gradient direction be handled in RTL layouts?
3. Is there a preferred fallback color for browsers that don't support gradients?
4. Should documentation be updated with examples of the new default style?
5. Should we consider this gradient as a design pattern to apply to other components?

When you create the PR, please include the Jira ticket ID (DSS-1497) in the PR description.

Looking forward to seeing your im... (13 chars truncated...)

devin-ai-integration · 2025-08-14T15:08:42Z

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

Disable automatic comment and CI monitoring

netlify · 2025-08-14T15:08:44Z

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	`9e430df`
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/689e5254a3adfe0008d5186f
😎 Deploy Preview	https://deploy-preview-515--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

…s value - Change :host([fill-color]) to :host([fill-color]:not([fill-color=""])) - This prevents empty fill-color attribute from overriding the gradient - Ensures default progress bar shows gradient while custom colors still work Co-Authored-By: cameron.simony@kajabi.com <cameron.simony@gmail.com>

pixelflips · 2025-08-14T15:43:39Z

libs/core/src/components/pds-progress/pds-progress.scss

+  --progress-gradient-start: #fda4af;
+  --progress-gradient-end: #ff3e14;


These color values should use tokens and not hex values.

pixelflips · 2025-08-14T16:22:18Z

aside

@cameronsimony, please ensure these adjustments are also made in Figma to keep our design system consistent.

Since progress bars are used throughout the application, it's probably a good idea to proactively communicate this change to all teams so they don't flood us with bug reports thinking something's broken. It's a minor code change, but it could be jarring in locations where other progress bars on the page do not use gradients.

- Use --pine-color-red-300 for gradient start (lighter color) - Use --pine-color-brand for gradient end (brand color) - Addresses GitHub comment about using design tokens instead of hex values Co-Authored-By: cameron.simony@kajabi.com <cameron.simony@gmail.com>

QuintonJason

aside

@cameronsimony Rejecting since a change is occurring that isn't represented in the corresponding mercury component design file: https://www.figma.com/design/CC1YmaGKHnsvB28yLY9mEH/%E2%9D%96-Mercury-components?m=auto&node-id=737-22323

cameronsimony · 2025-08-14T16:48:45Z

Updated the figma side here

I'll communicate to the teams before a merge 👍

pixelflips · 2025-08-14T20:39:28Z

libs/core/src/components/pds-progress/pds-progress.scss

+:host([fill-color]:not([fill-color=""])) progress::-webkit-progress-value {
+  background: var(--color-progress-fill);
+}
+
+:host([fill-color]:not([fill-color=""])) progress::-moz-progress-bar {
+  background: var(--color-progress-fill);
+}


Could these be comma-separated and combined into one?

- Consolidate custom color override selectors into comma-separated rule - Improves code maintainability while preserving functionality - Addresses GitHub comment from pixelflips about combining selectors Jira: DSS-1497 Co-Authored-By: cameron.simony@kajabi.com <cameron.simony@gmail.com>

- Change gradient end color from brand to mercury-500 - Addresses feedback about incorrect gradient color specification - Maintains existing functionality with correct design tokens Jira: DSS-1497 Co-Authored-By: cameron.simony@kajabi.com <cameron.simony@gmail.com>

pixelflips · 2025-08-14T21:14:58Z

libs/core/src/components/pds-progress/pds-progress.scss

 :host {
-  --color-progress-fill: var(--pine-color-brand);
+  --progress-gradient-start: var(--pine-color-red-300);
+  --progress-gradient-end: var(--pine-color-mercury-500);


Please use var(--pine-color-brand) here

- Address GitHub comment from pixelflips to use brand token - More semantically correct than direct mercury-500 reference - Maintains same visual appearance while using proper token Jira: DSS-1497 Co-Authored-By: cameron.simony@kajabi.com <cameron.simony@gmail.com>

pixelflips

LGTM! Please do not merge until @QuintonJason approves as well.

QuintonJason

@cameronsimony @pixelflips Requesting changes because this fix feels too narrowly scoped. Since this introduces a gradient token into the system, we should take a system-wide approach to defining and using gradient components. The progress bar should consume this shared token rather than introducing a one-off implementation.

We’ll also need to build out the gradient options in the design files so we can explore and align on all possible variations before locking in an implementation.

Additionally, the current code does not allow for a custom gradient, which is a limitation we should address to maintain flexibility.

pixelflips · 2025-08-15T18:29:42Z

aside

@QuintonJason i agree. any broader gradient implementation will need a comprehensive plan. for this specific change though, we could move forward with a quick follow-up to add a component-level token, but that depends on the scope of what we're trying to achieve.

@cameronsimony could you clarify the intended scope of these changes? if this is solely updating the default progress bar styling, we can proceed and follow up immediately with the component token. however, if the plan includes multiple variants or custom gradient support, that would require a more extensive project approach.

quinton raises some important considerations, so we'd appreciate clarification on the design goals before merging.

pixelflips · 2025-08-22T17:14:37Z

@cameronsimony have you had a chance to review the comments above?

github-actions bot added the package: core Changes have been made to the Core package label Aug 14, 2025

cameronsimony mentioned this pull request Aug 14, 2025

feat: update progress bar default fill to horizontal gradient Kajabi/sage-lib#2143

Draft

11 tasks

pixelflips requested changes Aug 14, 2025

View reviewed changes

pixelflips requested a review from QuintonJason August 14, 2025 16:22

QuintonJason requested changes Aug 14, 2025

View reviewed changes

This comment was marked as resolved.

Sign in to view

pixelflips reviewed Aug 14, 2025

View reviewed changes

devin-ai-integration bot and others added 2 commits August 14, 2025 20:40

pixelflips reviewed Aug 14, 2025

View reviewed changes

pixelflips approved these changes Aug 14, 2025

View reviewed changes

QuintonJason self-requested a review August 15, 2025 16:53

QuintonJason requested changes Aug 15, 2025

View reviewed changes

pixelflips marked this pull request as draft November 7, 2025 21:02

		--progress-gradient-start: #fda4af;
		--progress-gradient-end: #ff3e14;

feat: update progress bar default fill to horizontal gradient #515

Are you sure you want to change the base?

feat: update progress bar default fill to horizontal gradient #515

Uh oh!

Conversation

cameronsimony commented Aug 14, 2025

Description

Changes Made

Type of change

How Has This Been Tested?

Critical Review Areas

Checklist:

Uh oh!

devin-ai-integration bot commented Aug 14, 2025

Uh oh!

devin-ai-integration bot commented Aug 14, 2025

🤖 Devin AI Engineer

Uh oh!

netlify bot commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for pine-design-system ready!

Uh oh!

pixelflips Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

pixelflips commented Aug 14, 2025

Uh oh!

QuintonJason left a comment

Choose a reason for hiding this comment

Uh oh!

cameronsimony commented Aug 14, 2025

Uh oh!

This comment was marked as resolved.

Uh oh!

pixelflips Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

pixelflips Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

pixelflips left a comment

Choose a reason for hiding this comment

Uh oh!

QuintonJason left a comment

Choose a reason for hiding this comment

Uh oh!

pixelflips commented Aug 15, 2025

Uh oh!

pixelflips commented Aug 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify bot commented Aug 14, 2025 •

edited

Loading