Next Version Bump (#2161)

* 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

* chore: update yarn lock

* fix: update token values remove commented file and update token version

* fix: remove instance of mercury color (#2160)

* fix: remove instance of mercury color

* fix: remove already called rules

* 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](Kajabi/pine-icons@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] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Quinton Jason <quinton.jason@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: 3 people

docs/lib/sage-frontend/stylesheets/docs/_colors.scss

@@ -53,6 +53,7 @@
     // Determine class name for $value == 50
     $classname: ".color-#{"" + $name}-#{$value}";
 
+    /* stylelint-disable 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 block-closing-brace-newline-after */
   }
 }
 /* stylelint-enable max-nesting-depth */

docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb

@@ -52,7 +52,7 @@ end
   <% end %>
 
   <% if !component.initials && !component.image %>
-    <pds-icon name="user-filled" color="var(--pine-color-mercury-500)" class="sage-avatar__graphic"></pds-icon>
+    <pds-icon name="user-filled" color="var(--pine-color-brand)" class="sage-avatar__graphic"></pds-icon>
   <% end %>
 
   <% if component.image %>

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)"
 %>
 
 <div class="

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_500]
+color = component.color || "var(--pine-color-brand)"
 %>
 
 <div

packages/sage-assets/lib/stylesheets/components/_avatar.scss

@@ -30,7 +30,7 @@ $-avatar-ring-colors: (
   ),
   orange: (
     main: var(--pine-color-brand),
-    bg: var(--pine-color-mercury-150)
+    bg: var(--pine-color-grey-150)
   ),
   red: (
     main: var(--pine-color-danger),
@@ -64,7 +64,7 @@ $-avatar-group-item-sizes: (
   width: $-avatar-min-size;
   height: $-avatar-min-size;
   border-radius: var(--pine-border-radius-full);
-  background-color: var(--pine-color-mercury-050);
+  background-color: var(--pine-color-grey-050);
 
   // Documentation-specific styles
   .sage-avatar-wrapper > & {

packages/sage-react/lib/Avatar/Avatar.jsx

@@ -82,7 +82,7 @@ export const Avatar = ({
         <img alt={image.alt || ''} className="sage-avatar__image" src={image.src} id={image.id} />
       )}
       {(!image.src || useFallbackGraphic) && (
-        <pds-icon name="user-filled" color="var(--pine-color-mercury-500)" class="sage-avatar__graphic" />
+        <pds-icon name="user-filled" color="var(--pine-color-brand)" class="sage-avatar__graphic" />
       )}
     </div>
   );

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,

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",

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"