Next Version Bump (#2158)

* Remove CodeQL workflow - migrating to Aikido for SAST scanning

* 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(ci): updating rails gem version [ci skip]

* chore(release): publish [skip ci]

* Remove dependency-review workflow - migrating to Aikido

* chore: removed dev test version

* chore: update yarn lock

* chore: remove test version work

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

* fix: update brand token

* style: update divider color header and sidenav colors

* chore: resolve scss error

* fix: normalize base color comparisons in SCSS color palette

* style: adjust stylelint for color-named rule in SCSS color palette

* refactor: simplify color block generation in SCSS and enhance contrast logic

* refactor: update color handling in SCSS to use sd for hex values

---------

Co-authored-by: Djamshed Karimov <djamshed.karimov@kajabi.com>
Co-authored-by: Djamshed Karimov <81991459+djkajabi@users.noreply.github.com>
Co-authored-by: Phillip Lovelace <phillip.lovelace@kajabi.com>

Author: 3 people

.github/workflows/codeql.yml

@@ -9,7 +9,7 @@
   'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
   })(window,document,'script','dataLayer','GTM-T8W9NCJ');</script>
 <% end %>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pine-ds/core@latest/dist/pine-core/pine-core.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css">
 <%= stylesheet_pack_tag "docs" %>
 <link rel="canonical" href="<%= url_for(only_path: false) %>" />
 <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" type="image/png">

.github/workflows/dependency-review.yml

@@ -13,5 +13,18 @@
         name: "search"
       }
     } %>
+    <%= sage_component SageButton, {
+      value: "Toggle dark mode",
+      attributes: {
+        "data-js-dark-mode-toggle": true,
+        title: "Toggle dark mode",
+        "aria-label": "Toggle dark mode"
+      },
+      subtle: true,
+      icon: {
+        name: "flash",
+        style: "only"
+      }
+    } %>
   <% end %>
 <% end %>

docs/app/views/application/_app_head_content.html.erb

@@ -0,0 +1,74 @@
+/**
+ * Dark Mode Toggle
+ * Handles switching between light and dark themes
+ */
+
+const THEME_KEY = 'sage-theme';
+const THEME_DARK = 'dark';
+const THEME_LIGHT = 'light';
+
+class DarkModeToggle {
+  constructor() {
+    this.toggle = document.querySelector('[data-js-dark-mode-toggle]');
+    if (!this.toggle) return;
+
+    this.init();
+  }
+
+  init() {
+    // Set initial theme from localStorage or system preference
+    const savedTheme = localStorage.getItem(THEME_KEY);
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const initialTheme = savedTheme || (prefersDark ? THEME_DARK : THEME_LIGHT);
+
+    this.setTheme(initialTheme, false);
+
+    // Listen for toggle clicks
+    this.toggle.addEventListener('click', () => this.handleToggle());
+
+    // Listen for system theme changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      if (!localStorage.getItem(THEME_KEY)) {
+        this.setTheme(e.matches ? THEME_DARK : THEME_LIGHT, false);
+      }
+    });
+  }
+
+  handleToggle() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === THEME_DARK ? THEME_LIGHT : THEME_DARK;
+    this.setTheme(newTheme, true);
+  }
+
+  setTheme(theme, save = true) {
+    // Update data-theme attribute on <html>
+    document.documentElement.setAttribute('data-theme', theme);
+
+    // Update toggle button aria-label and icon
+    const isDark = theme === THEME_DARK;
+    this.toggle.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+    this.toggle.setAttribute('title', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+
+    // Update icon (pds-icon element)
+    const icon = this.toggle.querySelector('pds-icon');
+    if (icon) {
+      // When dark mode: use flash-filled, when light mode: use flash
+      icon.setAttribute('name', isDark ? 'flash-filled' : 'flash');
+    }
+
+    // Save to localStorage if requested
+    if (save) {
+      localStorage.setItem(THEME_KEY, theme);
+    }
+  }
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => new DarkModeToggle());
+} else {
+  new DarkModeToggle();
+}
+
+export default DarkModeToggle;
+

docs/app/views/application/_assistant.html.erb

@@ -6,6 +6,7 @@ require('./meter')
 require('./button-group')
 require('./example')
 require('./scroll-to-active-nav-item')
+require('./dark-mode-toggle')
 
 import SageDocsTabs from './tabs';
 

docs/lib/sage-frontend/javascript/docs/dark-mode-toggle.js

@@ -30,6 +30,6 @@
   margin-block-end: 0;
 
   .sage-switch__label {
-    color: sage-color(white);
+    color: var(--pine-color-white);
   }
 }

docs/lib/sage-frontend/javascript/docs/index.js

@@ -43,9 +43,12 @@
 }
 
 // build individual color blocks
+// Use sd-sage-color() directly for hex values (works with published npm version)
+/* stylelint-disable max-nesting-depth */
 @each $name, $color in $sage-colors {
   @each $value, $map in $color {
-    $hex: sage-color($name, $value);
+    // Get hex value directly from Style Dictionary
+    $hex: sd-sage-color($name, $value, hex);
 
     // Determine class name for $value == 50
     $classname: ".color-#{"" + $name}-#{$value}";
@@ -60,41 +63,12 @@
       font-size: sage-font-size(body);
       background: $hex;
 
-      @if ($name == grey and $value > 400) {
-        color: sage-color(white);
-      }
-      @else if ($name == white or $name == grey) {
-        color: sage-color(grey, 950);
-      }
-      @else if ($name == black or $name == charcoal) {
-        color: sage-color(white);
-      }
-      @else if ($name == blue and $value > 400) {
-        color: sage-color(blue, 200);
-      }
-      @else if ($name == blue) {
-        color: sage-color(blue, 950);
-      }
-      @else if ($name == mercury and $value > 200) {
-        color: sage-color(white);
-      }
-      @else if ($name == mercury) {
-        color: sage-color(mercury, 500);
-      }
-      @else if ($name == green and $value > 200) {
-        color: sage-color(white);
-      }
-      @else if ($name == green) {
-        color: sage-color(green, 600);
-      }
-      @else if ($name == yellow and $value > 300) {
-        color: sage-color(white);
-      }
-      @else if (lightness($hex) < 65) {
-        color: sage-color($name, 100);
+      // Simple lightness-based contrast: white text on dark, black text on light
+      @if (lightness($hex) < 55%) {
+        color: #fff;
       }
       @else {
-        color: sage-color($name, 400);
+        color: sd-sage-color(grey, 950, hex);
       }
 
       &::after {
@@ -106,17 +80,18 @@
     }
   }
 }
+/* stylelint-enable max-nesting-depth */
 
 [class*="color-"]:only-child {
   border-radius: sage-border(radius);
 }
 
 .color-white-100 {
   border-radius: sage-border(radius);
-  border: 1px solid sage-color(grey, 800);
-  box-shadow: inset 0 0 0.0625rem sage-color(grey, 800);
+  border: 1px solid sd-sage-color(grey, 300, hex);
+  box-shadow: inset 0 0 0.0625rem sd-sage-color(grey, 300, hex);
 }
 
 .color-black-100 {
-  color: sage-color(white);
+  color: #fff;
 }

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

@@ -4,7 +4,7 @@
   For Sage documentation use
 ================================================== */
 
-$-quick-links-color-text: sage-color(grey, 900);
+$-quick-links-color-text: var(--pine-color-text-active);
 $-quick-links-color-focus: sage-color(primary, 300);
 $-quick-links-color-background: sage-color(primary, 200);
 
@@ -13,7 +13,7 @@ $-quick-links-color-background: sage-color(primary, 200);
   inset-block-start: 0;
   overflow: hidden;
   padding: sage-spacing(2xs) sage-spacing();
-  background-color: #fff;
+  background-color: var(--pine-color-background-container);
   border-radius: sage-border(radius);
 }