From 7f7c9cecc177ec2169f1e0888fcdc4eb9f797814 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Thu, 11 Dec 2025 12:14:31 -0600 Subject: [PATCH 1/5] fix: add semantic tokens and dark mode support (#2156) * feat: add ds-tokens and semantic tokens * fix: resolve build error * feat: update core to semantic tokens * feat: validate tokens * feat: add dark mode toggle * fix: color update * fix: update maps to preserve token values * fix: update heading values * fix: update tokens and dark mode values * fix: update token values * fix: update semantic token mapping from loop * fix: token cleanup * fix: remove dark mode temp files * fix: update color token pairings * fix: update ds tokens dark mode dev version * fix(sage-alert): update colors to match pine alert * fix(sage-alert): update alert close button color * fix: update subtle button dark mode colors * fix: add latest ds tokens * fix: remove console warnings * fix: update buttons hover colors * fix: remove problematic @import from _ds_tokens.scss - Reverted automatic Pine tokens import that broke Vite builds - The ~@ prefix is webpack-specific and incompatible with Vite - Tokens are now documented as requiring app-level loading (CDN or import) - Added Pine tokens import to sage-lib docs specifically (webpack env) - Bumped version to 6.2.25-dev.9 * fix(button): move dark theme override to end of file for CSS cascade - Move [data-theme="dark"] block to Theme Overrides section at EOF - Ensures dark theme styles properly override generated button styles - Add comment to prevent future regressions Bump sage-assets to 6.2.25-dev.11 * fix: update to latest packs and dropdown semantic border * style: update to use semantic tokens grey black white * fix: update semantic tokens names * fix: update to semantic values * fix: add lock file * fix: update to ds tokens 1.0.1 * fix: remove hard coded dark mode attr * fix: resolve linter errors * style: oop fix * style: oop fix * style: oop fix * fix: oop fix * fix: oop fix * fix: remove ds tokens dependancy * fix: align alert switch and tooltip to pine styles * fix: align badge input popover property and form element error message * fix: update disabled border * fix: added border's to modal like things * fix: lint error fix * fix: update tokens * fix: remove yarn dependancy * fix: update hero custom bg example * fix: updated pagination * style: updated alerts and banner to core tokens * fix: update dark mode error state * fix: remove border and update lang * fix: update alert icon and text colors * fix: update alert and button color * fix: update disabled select icon color --- .../stylesheets/docs/_colors.scss | 2 + .../tokens/_ds_tokens_dark_mode.scss | 126 ++++++++++++++++++ packages/sage-react/package.json | 2 + yarn.lock | 12 ++ 4 files changed, 142 insertions(+) create mode 100644 packages/sage-assets/lib/stylesheets/tokens/_ds_tokens_dark_mode.scss diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index bcb7192705..d077f4c4c4 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -53,6 +53,7 @@ // Determine class name for $value == 50 $classname: ".color-#{"" + $name}-#{$value}"; + /* stylelint-disable max-nesting-depth, block-closing-brace-newline-after */ // This should be numeric, not string @if ($value == 50) { $classname: ".color-#{"" + $name}-0#{$value}"; @@ -78,6 +79,7 @@ text-transform: uppercase; } } + /* stylelint-enable max-nesting-depth, block-closing-brace-newline-after */ } } /* stylelint-enable max-nesting-depth */ diff --git a/packages/sage-assets/lib/stylesheets/tokens/_ds_tokens_dark_mode.scss b/packages/sage-assets/lib/stylesheets/tokens/_ds_tokens_dark_mode.scss new file mode 100644 index 0000000000..24895ce982 --- /dev/null +++ b/packages/sage-assets/lib/stylesheets/tokens/_ds_tokens_dark_mode.scss @@ -0,0 +1,126 @@ +// Dark Mode Color Tokens (Temporary Implementation) +// +// This file provides dark mode color token overrides using +// @media (prefers-color-scheme: dark) and [data-theme="dark"]. +// +// NOTE: This is a temporary implementation until ds-tokens +// generates official dark mode tokens. Once ds-tokens provides +// dark mode tokens, this file can be removed. + +// @media (prefers-color-scheme: dark) { +// :root { +// // Background Colors +// --pine-color-background-container: var(--pine-color-grey-950); +// --pine-color-background-app: var(--pine-color-grey-900); +// --pine-color-background-container-hover: var(--pine-color-grey-900); +// --pine-color-background-container-disabled: var(--pine-color-grey-800); + +// // Text Colors +// --pine-color-text: var(--pine-color-grey-100); +// --pine-color-text-hover: var(--pine-color-white); +// --pine-color-text-active: var(--pine-color-white); +// --pine-color-text-primary: var(--pine-color-white); +// --pine-color-text-secondary: var(--pine-color-grey-300); +// --pine-color-text-label: var(--pine-color-white); +// --pine-color-text-placeholder: var(--pine-color-grey-500); +// --pine-color-text-disabled: var(--pine-color-grey-600); +// --pine-color-text-readonly: var(--pine-color-grey-500); +// --pine-color-text-message: var(--pine-color-grey-400); +// --pine-color-text-danger-disabled: var(--pine-color-red-300); + +// // Border Colors +// --pine-color-border: var(--pine-color-grey-700); +// --pine-color-border-hover: var(--pine-color-grey-100); +// --pine-color-border-active: var(--pine-color-grey-100); +// --pine-color-border-disabled: var(--pine-color-grey-600); +// --pine-color-border-danger: var(--pine-color-red-500); + +// // Primary Colors (semantic) +// --pine-color-primary: var(--pine-color-grey-900); +// --pine-color-primary-hover: var(--pine-color-grey-950); +// --pine-color-primary-disabled: var(--pine-color-grey-500); + +// // Secondary Colors +// --pine-color-secondary: var(--pine-color-grey-950); +// --pine-color-secondary-hover: var(--pine-color-grey-900); +// --pine-color-secondary-disabled: var(--pine-color-grey-600); +// --pine-color-text-secondary-hover: var(--pine-color-grey-100); + +// // Neutral Colors +// --pine-color-neutral: var(--pine-color-grey-400); +// --pine-color-neutral-hover: var(--pine-color-grey-300); +// --pine-color-neutral-disabled: var(--pine-color-grey-700); +// --pine-color-text-neutral: var(--pine-color-grey-300); + +// // Focus Ring +// --pine-color-focus-ring: var(--pine-color-purple-300); +// --pine-color-focus-ring-danger: var(--pine-color-red-300); + +// // Text Primary/Secondary (for buttons on colored backgrounds) +// --pine-color-text-primary: var(--pine-color-white); +// --pine-color-text-secondary: var(--pine-color-grey-300); +// } +// } + +// // Also support [data-theme="dark"] attribute selector +// // This allows programmatic theme switching beyond system preference +// [data-theme="dark"] { +// // Background Colors +// --pine-color-background-container: var(--pine-color-grey-950); +// --pine-color-background-app: var(--pine-color-grey-900); +// --pine-color-background-container-hover: var(--pine-color-grey-900); +// --pine-color-background-container-disabled: var(--pine-color-grey-800); + +// // Text Colors +// --pine-color-text: var(--pine-color-grey-100); +// --pine-color-text-hover: var(--pine-color-white); +// --pine-color-text-active: var(--pine-color-white); +// --pine-color-text-primary: var(--pine-color-white); +// --pine-color-text-secondary: var(--pine-color-grey-300); +// --pine-color-text-label: var(--pine-color-white); +// --pine-color-text-placeholder: var(--pine-color-grey-500); +// --pine-color-text-disabled: var(--pine-color-grey-600); +// --pine-color-text-readonly: var(--pine-color-grey-500); +// --pine-color-text-message: var(--pine-color-grey-400); + + +// // Border Colors +// --pine-color-border: var(--pine-color-grey-700); +// --pine-color-border-hover: var(--pine-color-grey-100); +// --pine-color-border-active: var(--pine-color-grey-100); +// --pine-color-border-disabled: var(--pine-color-grey-600); +// --pine-color-border-danger: var(--pine-color-red-500); + +// // Primary Colors +// --pine-color-primary: var(--pine-color-grey-900); +// --pine-color-primary-hover: var(--pine-color-grey-950); +// --pine-color-primary-disabled: var(--pine-color-grey-500); + +// // Secondary Colors +// --pine-color-secondary: var(--pine-color-grey-950); +// --pine-color-secondary-hover: var(--pine-color-grey-950); +// --pine-color-secondary-disabled: var(--pine-color-grey-600); +// --pine-color-text-secondary-hover: var(--pine-color-grey-100); + +// // Neutral Colors +// --pine-color-neutral: var(--pine-color-grey-400); +// --pine-color-neutral-hover: var(--pine-color-grey-300); +// --pine-color-neutral-disabled: var(--pine-color-grey-700); +// --pine-color-text-neutral: var(--pine-color-grey-300); + +// // Accent Colors +// --pine-color-accent-disabled: var(--pine-color-purple-800); +// --pine-color-text-accent-disabled: var(--pine-color-purple-300); + +// // Danger Colors +// --pine-color-danger-disabled: var(--pine-color-red-800); +// --pine-color-text-danger-disabled: var(--pine-color-red-300); + +// // Focus Ring +// --pine-color-focus-ring: var(--pine-color-purple-300); +// --pine-color-focus-ring-danger: var(--pine-color-red-300); + +// // Text Primary/Secondary +// --pine-color-text-primary: var(--pine-color-white); +// --pine-color-text-secondary: var(--pine-color-grey-300); +// } diff --git a/packages/sage-react/package.json b/packages/sage-react/package.json index 18482d2b72..9123fa62f3 100644 --- a/packages/sage-react/package.json +++ b/packages/sage-react/package.json @@ -76,6 +76,7 @@ "npm-run-all": "^4.1.5", "react-is": "16.13.1", "react-test-renderer": "16.13.1", + "resize-observer-polyfill": "^1.5.1", "sass-loader": "^10.0.2", "typescript": "4.0.3", "url-loader": "^4.1.0", @@ -91,6 +92,7 @@ "html-react-parser": "^0.14.2", "pluralize": "^8.0.0", "prop-types": "^15.7.2", + "raf": "^3.4.1", "react-docgen": "^5.4.3", "react-sortablejs": "6.0.0", "react-uuid": "^1.0.2", diff --git a/yarn.lock b/yarn.lock index 7f9896e610..59e5149ba4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16420,6 +16420,13 @@ quick-lru@^4.0.1: resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz" integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== +raf@^3.4.1: + version "3.4.1" + resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" + integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== + dependencies: + performance-now "^2.1.0" + ramda@^0.28.0: version "0.28.0" resolved "https://registry.npmjs.org/ramda/-/ramda-0.28.0.tgz" @@ -17228,6 +17235,11 @@ requires-port@^1.0.0: resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz" integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ== +resize-observer-polyfill@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz" From eb4a25f55004ade05df10291e62c6c89fb5c377f Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Tue, 16 Dec 2025 15:49:43 -0600 Subject: [PATCH 2/5] chore: update yarn lock --- yarn.lock | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/yarn.lock b/yarn.lock index 59e5149ba4..7f9896e610 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16420,13 +16420,6 @@ quick-lru@^4.0.1: resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz" integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== -raf@^3.4.1: - version "3.4.1" - resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" - integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== - dependencies: - performance-now "^2.1.0" - ramda@^0.28.0: version "0.28.0" resolved "https://registry.npmjs.org/ramda/-/ramda-0.28.0.tgz" @@ -17235,11 +17228,6 @@ requires-port@^1.0.0: resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz" integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ== -resize-observer-polyfill@^1.5.1: - version "1.5.1" - resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" - integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== - resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz" From 2b6f4a045ff1acfc9319a3376a20b758f150af53 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Wed, 17 Dec 2025 09:55:03 -0600 Subject: [PATCH 3/5] fix: update token values remove commented file and update token version --- .../tokens/_ds_tokens_dark_mode.scss | 126 ------------------ 1 file changed, 126 deletions(-) delete mode 100644 packages/sage-assets/lib/stylesheets/tokens/_ds_tokens_dark_mode.scss diff --git a/packages/sage-assets/lib/stylesheets/tokens/_ds_tokens_dark_mode.scss b/packages/sage-assets/lib/stylesheets/tokens/_ds_tokens_dark_mode.scss deleted file mode 100644 index 24895ce982..0000000000 --- a/packages/sage-assets/lib/stylesheets/tokens/_ds_tokens_dark_mode.scss +++ /dev/null @@ -1,126 +0,0 @@ -// Dark Mode Color Tokens (Temporary Implementation) -// -// This file provides dark mode color token overrides using -// @media (prefers-color-scheme: dark) and [data-theme="dark"]. -// -// NOTE: This is a temporary implementation until ds-tokens -// generates official dark mode tokens. Once ds-tokens provides -// dark mode tokens, this file can be removed. - -// @media (prefers-color-scheme: dark) { -// :root { -// // Background Colors -// --pine-color-background-container: var(--pine-color-grey-950); -// --pine-color-background-app: var(--pine-color-grey-900); -// --pine-color-background-container-hover: var(--pine-color-grey-900); -// --pine-color-background-container-disabled: var(--pine-color-grey-800); - -// // Text Colors -// --pine-color-text: var(--pine-color-grey-100); -// --pine-color-text-hover: var(--pine-color-white); -// --pine-color-text-active: var(--pine-color-white); -// --pine-color-text-primary: var(--pine-color-white); -// --pine-color-text-secondary: var(--pine-color-grey-300); -// --pine-color-text-label: var(--pine-color-white); -// --pine-color-text-placeholder: var(--pine-color-grey-500); -// --pine-color-text-disabled: var(--pine-color-grey-600); -// --pine-color-text-readonly: var(--pine-color-grey-500); -// --pine-color-text-message: var(--pine-color-grey-400); -// --pine-color-text-danger-disabled: var(--pine-color-red-300); - -// // Border Colors -// --pine-color-border: var(--pine-color-grey-700); -// --pine-color-border-hover: var(--pine-color-grey-100); -// --pine-color-border-active: var(--pine-color-grey-100); -// --pine-color-border-disabled: var(--pine-color-grey-600); -// --pine-color-border-danger: var(--pine-color-red-500); - -// // Primary Colors (semantic) -// --pine-color-primary: var(--pine-color-grey-900); -// --pine-color-primary-hover: var(--pine-color-grey-950); -// --pine-color-primary-disabled: var(--pine-color-grey-500); - -// // Secondary Colors -// --pine-color-secondary: var(--pine-color-grey-950); -// --pine-color-secondary-hover: var(--pine-color-grey-900); -// --pine-color-secondary-disabled: var(--pine-color-grey-600); -// --pine-color-text-secondary-hover: var(--pine-color-grey-100); - -// // Neutral Colors -// --pine-color-neutral: var(--pine-color-grey-400); -// --pine-color-neutral-hover: var(--pine-color-grey-300); -// --pine-color-neutral-disabled: var(--pine-color-grey-700); -// --pine-color-text-neutral: var(--pine-color-grey-300); - -// // Focus Ring -// --pine-color-focus-ring: var(--pine-color-purple-300); -// --pine-color-focus-ring-danger: var(--pine-color-red-300); - -// // Text Primary/Secondary (for buttons on colored backgrounds) -// --pine-color-text-primary: var(--pine-color-white); -// --pine-color-text-secondary: var(--pine-color-grey-300); -// } -// } - -// // Also support [data-theme="dark"] attribute selector -// // This allows programmatic theme switching beyond system preference -// [data-theme="dark"] { -// // Background Colors -// --pine-color-background-container: var(--pine-color-grey-950); -// --pine-color-background-app: var(--pine-color-grey-900); -// --pine-color-background-container-hover: var(--pine-color-grey-900); -// --pine-color-background-container-disabled: var(--pine-color-grey-800); - -// // Text Colors -// --pine-color-text: var(--pine-color-grey-100); -// --pine-color-text-hover: var(--pine-color-white); -// --pine-color-text-active: var(--pine-color-white); -// --pine-color-text-primary: var(--pine-color-white); -// --pine-color-text-secondary: var(--pine-color-grey-300); -// --pine-color-text-label: var(--pine-color-white); -// --pine-color-text-placeholder: var(--pine-color-grey-500); -// --pine-color-text-disabled: var(--pine-color-grey-600); -// --pine-color-text-readonly: var(--pine-color-grey-500); -// --pine-color-text-message: var(--pine-color-grey-400); - - -// // Border Colors -// --pine-color-border: var(--pine-color-grey-700); -// --pine-color-border-hover: var(--pine-color-grey-100); -// --pine-color-border-active: var(--pine-color-grey-100); -// --pine-color-border-disabled: var(--pine-color-grey-600); -// --pine-color-border-danger: var(--pine-color-red-500); - -// // Primary Colors -// --pine-color-primary: var(--pine-color-grey-900); -// --pine-color-primary-hover: var(--pine-color-grey-950); -// --pine-color-primary-disabled: var(--pine-color-grey-500); - -// // Secondary Colors -// --pine-color-secondary: var(--pine-color-grey-950); -// --pine-color-secondary-hover: var(--pine-color-grey-950); -// --pine-color-secondary-disabled: var(--pine-color-grey-600); -// --pine-color-text-secondary-hover: var(--pine-color-grey-100); - -// // Neutral Colors -// --pine-color-neutral: var(--pine-color-grey-400); -// --pine-color-neutral-hover: var(--pine-color-grey-300); -// --pine-color-neutral-disabled: var(--pine-color-grey-700); -// --pine-color-text-neutral: var(--pine-color-grey-300); - -// // Accent Colors -// --pine-color-accent-disabled: var(--pine-color-purple-800); -// --pine-color-text-accent-disabled: var(--pine-color-purple-300); - -// // Danger Colors -// --pine-color-danger-disabled: var(--pine-color-red-800); -// --pine-color-text-danger-disabled: var(--pine-color-red-300); - -// // Focus Ring -// --pine-color-focus-ring: var(--pine-color-purple-300); -// --pine-color-focus-ring-danger: var(--pine-color-red-300); - -// // Text Primary/Secondary -// --pine-color-text-primary: var(--pine-color-white); -// --pine-color-text-secondary: var(--pine-color-grey-300); -// } From 53deee0836ef448470b3228e21c34cede50154eb Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Mon, 5 Jan 2026 15:21:37 -0600 Subject: [PATCH 4/5] fix: remove instance of mercury color (#2160) * fix: remove instance of mercury color * fix: remove already called rules --- docs/lib/sage-frontend/stylesheets/docs/_colors.scss | 4 ++-- .../app/views/sage_components/_sage_avatar.html.erb | 2 +- .../app/views/sage_components/_sage_loader.html.erb | 2 +- .../app/views/sage_components/_sage_progress_bar.html.erb | 2 +- packages/sage-assets/lib/stylesheets/components/_avatar.scss | 4 ++-- packages/sage-react/lib/Avatar/Avatar.jsx | 2 +- packages/sage-react/lib/ProgressBar/ProgressBar.jsx | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss index d077f4c4c4..62da96fb92 100644 --- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss +++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss @@ -53,7 +53,7 @@ // Determine class name for $value == 50 $classname: ".color-#{"" + $name}-#{$value}"; - /* stylelint-disable max-nesting-depth, block-closing-brace-newline-after */ + /* stylelint-disable block-closing-brace-newline-after */ // This should be numeric, not string @if ($value == 50) { $classname: ".color-#{"" + $name}-0#{$value}"; @@ -79,7 +79,7 @@ text-transform: uppercase; } } - /* stylelint-enable max-nesting-depth, block-closing-brace-newline-after */ + /* stylelint-enable block-closing-brace-newline-after */ } } /* stylelint-enable max-nesting-depth */ diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb index 56c8be2359..5486a18a3d 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb @@ -52,7 +52,7 @@ end <% end %> <% if !component.initials && !component.image %> - + <% end %> <% if component.image %> diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb index 9be345e96d..916059c35d 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb @@ -1,6 +1,6 @@ <% component_description = component.type === "success" ? "Success" : "Loading..." - stroke_color = SageTokens::COLOR_PALETTE[:MERCURY_400] + stroke_color = "var(--pine-color-brand)" %>
& { diff --git a/packages/sage-react/lib/Avatar/Avatar.jsx b/packages/sage-react/lib/Avatar/Avatar.jsx index aca94f170b..cce98299c2 100644 --- a/packages/sage-react/lib/Avatar/Avatar.jsx +++ b/packages/sage-react/lib/Avatar/Avatar.jsx @@ -82,7 +82,7 @@ export const Avatar = ({ {image.alt )} {(!image.src || useFallbackGraphic) && ( - + )}
); diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx index 2fce8af65e..5a75680cd3 100644 --- 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_500, + color: ProgressBar.COLORS.GREY_500, disableTooltip: false, displayPercent: false, label: null, From 45c8ae8df207bed8e4f4cd7c17bf28175788c634 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 5 Jan 2026 13:40:51 -0800 Subject: [PATCH 5/5] chore(deps): bump @pine-ds/icons from 9.12.0 to 9.13.0 (#2159) Bumps [@pine-ds/icons](https://github.com/Kajabi/pine-icons) from 9.12.0 to 9.13.0. - [Release notes](https://github.com/Kajabi/pine-icons/releases) - [Changelog](https://github.com/Kajabi/pine-icons/blob/main/CHANGELOG.md) - [Commits](https://github.com/Kajabi/pine-icons/compare/v9.12.0...v9.13.0) --- updated-dependencies: - dependency-name: "@pine-ds/icons" dependency-version: 9.13.0 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 7f9896e610..b217f448de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2849,9 +2849,9 @@ "@octokit/openapi-types" "^12.11.0" "@pine-ds/icons@^9.12.0": - version "9.12.0" - resolved "https://registry.yarnpkg.com/@pine-ds/icons/-/icons-9.12.0.tgz#0fd44b1f24492784f03d50a2897469e643a74634" - integrity sha512-m0xQYFrxFQ+ycffZvwyv2L0goSULkGInqI8+xhZgSQTPC7J1zROrTfNJC/gAdx07HMqn1h4QUVlPu7dyqr9cGg== + version "9.13.0" + resolved "https://registry.yarnpkg.com/@pine-ds/icons/-/icons-9.13.0.tgz#f6e1849641f1dbe77023179343d84924865dadf7" + integrity sha512-c2S96Kf36zeU4tD72tNmLyfmnT6+RQRXfmGWYi/DpmczbF5Dy6vVh84TFXz7o7QPhlETWVdnVwZP0xMyH8pkQA== dependencies: "@stencil/core" "4.38.3" @@ -16420,6 +16420,13 @@ quick-lru@^4.0.1: resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz" integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== +raf@^3.4.1: + version "3.4.1" + resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" + integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== + dependencies: + performance-now "^2.1.0" + ramda@^0.28.0: version "0.28.0" resolved "https://registry.npmjs.org/ramda/-/ramda-0.28.0.tgz" @@ -17228,6 +17235,11 @@ requires-port@^1.0.0: resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz" integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ== +resize-observer-polyfill@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz"