From 7035a200f92d7755747db5e7904f076670a62a1e Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 14 Aug 2025 15:07:18 +0000 Subject: [PATCH 1/6] feat: update progress bar default fill to horizontal gradient MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 Co-Authored-By: cameron.simony@kajabi.com --- libs/core/src/components/pds-progress/pds-progress.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/libs/core/src/components/pds-progress/pds-progress.scss b/libs/core/src/components/pds-progress/pds-progress.scss index c47f01427..04375a95b 100644 --- a/libs/core/src/components/pds-progress/pds-progress.scss +++ b/libs/core/src/components/pds-progress/pds-progress.scss @@ -1,5 +1,7 @@ :host { --color-progress-fill: var(--pine-color-brand); + --progress-gradient-start: #FDA4AF; + --progress-gradient-end: #FF3E14; --sizing-progress-bar-width: 100%; @@ -44,12 +46,12 @@ progress::-webkit-progress-bar { } progress::-webkit-progress-value { - background-color: var(--color-progress-fill, var(--pine-color-brand)); + background: var(--color-progress-fill, linear-gradient(to right, var(--progress-gradient-start), var(--progress-gradient-end))); border-radius: var(--pine-dimension-2xs); } progress::-moz-progress-bar { - background-color: var(--color-progress-fill, var(--pine-color-brand)); + background: var(--color-progress-fill, linear-gradient(to right, var(--progress-gradient-start), var(--progress-gradient-end))); border-radius: var(--pine-dimension-2xs); } From e6c2239c9e20b87ae8f3d7cf64043b711392733f Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 14 Aug 2025 15:42:40 +0000 Subject: [PATCH 2/6] fix: update CSS selector to only override gradient when fill-color has 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 --- .../components/pds-progress/pds-progress.scss | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/libs/core/src/components/pds-progress/pds-progress.scss b/libs/core/src/components/pds-progress/pds-progress.scss index 04375a95b..c7a8e35df 100644 --- a/libs/core/src/components/pds-progress/pds-progress.scss +++ b/libs/core/src/components/pds-progress/pds-progress.scss @@ -1,7 +1,6 @@ :host { - --color-progress-fill: var(--pine-color-brand); - --progress-gradient-start: #FDA4AF; - --progress-gradient-end: #FF3E14; + --progress-gradient-start: #fda4af; + --progress-gradient-end: #ff3e14; --sizing-progress-bar-width: 100%; @@ -46,15 +45,23 @@ progress::-webkit-progress-bar { } progress::-webkit-progress-value { - background: var(--color-progress-fill, linear-gradient(to right, var(--progress-gradient-start), var(--progress-gradient-end))); + background: linear-gradient(to right, var(--progress-gradient-start), var(--progress-gradient-end)); border-radius: var(--pine-dimension-2xs); } progress::-moz-progress-bar { - background: var(--color-progress-fill, linear-gradient(to right, var(--progress-gradient-start), var(--progress-gradient-end))); + background: linear-gradient(to right, var(--progress-gradient-start), var(--progress-gradient-end)); border-radius: var(--pine-dimension-2xs); } +: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); +} + .pds-progress__label { border: 0; clip: rect(0 0 0 0); From 6511d09d29904d9aef246347dcb04bd1baa53577 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 14 Aug 2025 16:23:04 +0000 Subject: [PATCH 3/6] feat: replace hex values with Pine design tokens for gradient - 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 --- libs/core/src/components/pds-progress/pds-progress.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/core/src/components/pds-progress/pds-progress.scss b/libs/core/src/components/pds-progress/pds-progress.scss index c7a8e35df..6e497a593 100644 --- a/libs/core/src/components/pds-progress/pds-progress.scss +++ b/libs/core/src/components/pds-progress/pds-progress.scss @@ -1,6 +1,6 @@ :host { - --progress-gradient-start: #fda4af; - --progress-gradient-end: #ff3e14; + --progress-gradient-start: var(--pine-color-red-300); + --progress-gradient-end: var(--pine-color-brand); --sizing-progress-bar-width: 100%; From 0afdf1f4b71a2794a26c5c960717fb5e7889cbcd Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 14 Aug 2025 20:40:17 +0000 Subject: [PATCH 4/6] refactor: combine webkit and moz progress bar selectors - 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 --- libs/core/src/components/pds-progress/pds-progress.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/libs/core/src/components/pds-progress/pds-progress.scss b/libs/core/src/components/pds-progress/pds-progress.scss index 6e497a593..d9da83cc8 100644 --- a/libs/core/src/components/pds-progress/pds-progress.scss +++ b/libs/core/src/components/pds-progress/pds-progress.scss @@ -54,10 +54,7 @@ progress::-moz-progress-bar { border-radius: var(--pine-dimension-2xs); } -:host([fill-color]:not([fill-color=""])) progress::-webkit-progress-value { - background: var(--color-progress-fill); -} - +:host([fill-color]:not([fill-color=""])) progress::-webkit-progress-value, :host([fill-color]:not([fill-color=""])) progress::-moz-progress-bar { background: var(--color-progress-fill); } From a10c17c4ef2e8666bc7f55620b078c591cd5facb Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 14 Aug 2025 20:56:42 +0000 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20update=20gradient=20colors=20to=20re?= =?UTF-8?q?d-300=20=E2=86=92=20mercury-500?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- libs/core/src/components/pds-progress/pds-progress.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/core/src/components/pds-progress/pds-progress.scss b/libs/core/src/components/pds-progress/pds-progress.scss index d9da83cc8..fc65f5601 100644 --- a/libs/core/src/components/pds-progress/pds-progress.scss +++ b/libs/core/src/components/pds-progress/pds-progress.scss @@ -1,6 +1,6 @@ :host { --progress-gradient-start: var(--pine-color-red-300); - --progress-gradient-end: var(--pine-color-brand); + --progress-gradient-end: var(--pine-color-mercury-500); --sizing-progress-bar-width: 100%; From 9e430dfb28af9f136ce1f56840ee2a9ee4e86edb Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 14 Aug 2025 21:16:50 +0000 Subject: [PATCH 6/6] fix: use var(--pine-color-brand) for gradient end color - 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 --- libs/core/src/components/pds-progress/pds-progress.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/core/src/components/pds-progress/pds-progress.scss b/libs/core/src/components/pds-progress/pds-progress.scss index fc65f5601..d9da83cc8 100644 --- a/libs/core/src/components/pds-progress/pds-progress.scss +++ b/libs/core/src/components/pds-progress/pds-progress.scss @@ -1,6 +1,6 @@ :host { --progress-gradient-start: var(--pine-color-red-300); - --progress-gradient-end: var(--pine-color-mercury-500); + --progress-gradient-end: var(--pine-color-brand); --sizing-progress-bar-width: 100%;