Next Version Bump (#2169)

pixelflips · dependabot[bot] · QuintonJason · web-flow · commit 03f97352881a · 2026-02-25T10:41:09.000-06:00
* chore(deps): bump @pine-ds/icons from 9.16.0 to 9.17.0 (#2166) Bumps [@pine-ds/icons](https://github.com/Kajabi/pine-icons) from 9.16.0 to 9.17.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.16.0...v9.17.0) --- updated-dependencies: - dependency-name: "@pine-ds/icons" dependency-version: 9.17.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> * style: use semantic focus-ring token across components (#2168) * style: replace hardcoded purple-600 with focus-ring token * style(breadcrumbs): add focus ring to progressbar variant * feat(hero): add shadow prop (#2170) * feat(hero): add shadow prop to React component and SCSS * feat(hero): add shadow prop to Rails component * docs(hero): add shadow prop documentation and preview examples * fix(hero): quote 050 shadow key in SCSS map and fix alt text hyphenation * fix(avatar): use semantic token (#2171) --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Quinton Jason <quinton.jason@gmail.com>
diff --git a/docs/app/views/examples/components/hero/_preview.html.erb b/docs/app/views/examples/components/hero/_preview.html.erb
@@ -142,6 +142,28 @@
   <% end %>
 <% end %>
 
+<%= sage_component SageDivider, {} %>
+
+<h2>Shadow</h2>
+<p>When the Hero has a shadow, a box-shadow will be applied to the Hero container.</p>
+
+<%= sage_component SageHero, {
+  title: "Learn with Kajabi in our live workshops",
+  description: "Did you know we offer free workshops? Kajabi experts host live workshops every week on topics from marketing your products to building out your Kajabi account.",
+  image: "hero-workshop-placeholder.jpg",
+  alt_text: "Multi-layered illustration of UI elements and woman clasping her hands together in excitement",
+  size: "small",
+  borderless: true,
+  shadow: "100",
+} do %>
+  <% content_for :sage_hero_footer_actions do %>
+    <%= sage_component SageButton, {
+      value: "Learn more",
+      style: "primary",
+    } %>
+  <% end %>
+<% end %>
+
 <%# This is the modal triggered from various examples in this documentation %>
 <%= sage_component SageModal, { id: "cool-modal"} do %>
   <%= sage_component SageModalContent, {
diff --git a/docs/app/views/examples/components/hero/_props.html.erb b/docs/app/views/examples/components/hero/_props.html.erb
@@ -58,6 +58,12 @@
   <td><%= md('Boolean') %></td>
   <td><%= md('`false`') %></td>
 </tr>
+<tr>
+  <td><%= md('`shadow`') %></td>
+  <td><%= md('Sets the box-shadow on the Hero.') %></td>
+  <td><%= md('String: ["none", "050", "100", "150", "200", "300", "400", "500"]') %></td>
+  <td><%= md('`nil`') %></td>
+</tr>
 <tr>
   <td><%= md('`title`') %></td>
   <td><%= md('Sets the title for the component.') %></td>
diff --git a/docs/lib/sage_rails/app/sage_components/sage_hero.rb b/docs/lib/sage_rails/app/sage_components/sage_hero.rb
@@ -9,6 +9,7 @@ class SageHero < SageComponent
     description: [:optional, NilClass, String],
     image: [:optional, NilClass, String],
     image_start: [:optional, NilClass, TrueClass],
+    shadow: [:optional, NilClass, SageSchemas::HERO_SHADOW],
     size: [:optional, NilClass, SageSchemas::HERO_SIZE],
     title: [:optional, NilClass, String],
     title_tag: [:optional, NilClass, String],
diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb b/docs/lib/sage_rails/app/sage_tokens/sage_schemas.rb
@@ -20,6 +20,8 @@ module SageSchemas
 
   HERO_SIZE = Set.new(SageTokens::HERO_SIZES)
 
+  HERO_SHADOW = Set.new(SageTokens::HERO_SHADOWS)
+
   STATUSES = Set.new(SageTokens::STATUSES)
 
   SPACER = {
diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb b/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb
@@ -97,6 +97,8 @@ def SageTokens.grid_templates
 
   HERO_SIZES = ["small", "large"]
 
+  HERO_SHADOWS = ["none", "050", "100", "150", "200", "300", "400", "500"]
+
   ICONS = [
     "access-key",
     "add",
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_hero.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_hero.html.erb
@@ -22,6 +22,7 @@
     <%= "sage-hero--contained" if component.contained %>
     <%= "sage-hero--custom-background-color" if component.custom_background_color %>
     <%= "sage-hero--image-start" if component.image_start %>
+    <%= "sage-hero--shadow-#{component.shadow}" if component.shadow.present? %>
     <%= component.generated_css_classes %>
   "
   data-js-hero
diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss
@@ -196,7 +196,7 @@ $-alert-text-colors: (
     }
 
     &:focus-visible {
-      @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+      @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
     }
   }
 
@@ -224,7 +224,7 @@ $-alert-text-colors: (
     }
 
     &:focus-visible {
-      @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+      @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
     }
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
@@ -10,11 +10,11 @@ $-avatar-max-size: calc(2 * var(--pine-dimension-800));
 $-avatar-ring-colors: (
   charcoal: (
     main: var(--pine-color-primary-hover),
-    bg: var(--pine-color-grey-200)
+    bg: var(--pine-color-background-inset)
   ),
   grey: (
     main: var(--pine-color-primary-hover),
-    bg: var(--pine-color-grey-200)
+    bg: var(--pine-color-background-inset)
   ),
   purple: (
     main: var(--pine-color-accent-hover),
@@ -30,7 +30,7 @@ $-avatar-ring-colors: (
   ),
   orange: (
     main: var(--pine-color-brand),
-    bg: var(--pine-color-grey-150)
+    bg: var(--pine-color-background-muted)
   ),
   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-grey-050);
+  background-color: var(--pine-color-background-container-hover);
 
   // Documentation-specific styles
   .sage-avatar-wrapper > & {
diff --git a/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss b/packages/sage-assets/lib/stylesheets/components/_breadcrumbs.scss
@@ -6,7 +6,7 @@
 
 $-breadcrumb-current-color: var(--pine-color-text);
 $-breadcrumb-interactive-color: var(--pine-color-text);
-$-breadcrumb-outline-color: var(--pine-color-purple-600);
+$-breadcrumb-outline-color: var(--pine-color-focus-ring);
 
 .sage-breadcrumbs {
   display: flex;
@@ -77,6 +77,7 @@ $-breadcrumb-outline-color: var(--pine-color-purple-600);
   .sage-breadcrumbs--progressbar & {
     position: relative;
     padding-block-end: sage-spacing(2xs);
+    @include sage-focus-ring($-breadcrumb-outline-color);
 
     &:active {
       color: $-breadcrumb-interactive-color;
diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -51,7 +51,7 @@ $-btn-base-styles: (
       color: var(--pine-color-text-primary),
       background-color: var(--pine-color-primary),
       border-color: var(--pine-color-primary),
-      ring-color: var(--pine-color-purple-600),
+      ring-color: var(--pine-color-focus-ring),
     ),
     hover: (
       color: var(--pine-color-text-primary),
@@ -119,23 +119,23 @@ $-btn-subtle-styles: (
     hover: var(--pine-color-primary),
     hover-background: var(--pine-color-blue-150),
     focus: var(--pine-color-primary),
-    focus-outline: var(--pine-color-purple-600),
+    focus-outline: var(--pine-color-focus-ring),
     disabled: var(--pine-color-blue-300),
   ),
   primary: (
     default: var(--pine-color-text),
     hover: var(--pine-color-primary),
     hover-background: var(--pine-color-primary-disabled),
     focus: var(--pine-color-primary),
-    focus-outline: var(--pine-color-purple-600),
+    focus-outline: var(--pine-color-focus-ring),
     disabled: var(--pine-color-text-tertiary),
   ),
   secondary: (
     default: var(--pine-color-text),
     hover: var(--pine-color-primary),
     hover-background: var(--pine-color-primary-disabled),
     focus: var(--pine-color-primary),
-    focus-outline: var(--pine-color-purple-600),
+    focus-outline: var(--pine-color-focus-ring),
     disabled: var(--pine-color-text-tertiary),
   ),
   danger: (
diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -70,7 +70,7 @@ $-choice-radio-color-checked-inner: sage-radio-color(checked-inner);
   }
 
   &:focus-visible {
-    border-color: var(--pine-color-purple-600);
+    border-color: var(--pine-color-focus-ring);
     outline: none;
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -131,7 +131,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
   &:focus-within {
     outline: none;
 
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 }
 
@@ -149,7 +149,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
 .sage-dropdown__item--disabled {
   &:active {
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 }
 
@@ -166,7 +166,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 .sage-dropdown__item-control {
   @include sage-button-style-reset();
   @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px);
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
   @extend %t-sage-body-med;
 
@@ -197,7 +197,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
   &:focus-within {
     @include sage-focus-outline($outline-offset-inline: 4px, $outline-offset-block: -2px);
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
     &::after {
       opacity: 1;
diff --git a/packages/sage-assets/lib/stylesheets/components/_hero.scss b/packages/sage-assets/lib/stylesheets/components/_hero.scss
@@ -66,6 +66,25 @@ $-hero-play-icon-background-color: var(--pine-color-background-container);
   }
 }
 
+// Shadow options — aligned with Pine pds-box shadow values
+// Keep in sync with `packages/sage-react/lib/Hero/configs.js`
+$-sage-hero-shadows: (
+  none: 0,
+  "050": sage-shadow("050"),
+  100: sage-shadow(100),
+  150: sage-shadow(150),
+  200: sage-shadow(200),
+  300: sage-shadow(300),
+  400: sage-shadow(400),
+  500: sage-shadow(500),
+);
+
+@each $-key, $-val in $-sage-hero-shadows {
+  .sage-hero--shadow-#{$-key} {
+    box-shadow: #{$-val};
+  }
+}
+
 .sage-hero__title {
   @extend %t-sage-heading-3;
   grid-area: title;
@@ -142,7 +161,7 @@ $-hero-play-icon-background-color: var(--pine-color-background-container);
   @include sage-focus-ring;
 
   &:focus {
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss
@@ -77,7 +77,7 @@ $-link-base-styles: (
   &:focus-visible {
     color: var(--pine-color-primary);
 
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
   }
 
   .sage-card--interactive & {
@@ -224,7 +224,7 @@ $-link-base-styles: (
     $outline-offset-block: 4px,
     $outline-border-radius: sage-border(radius-round),
   );
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 }
 
 .sage-link--remove-underline {
diff --git a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
@@ -86,7 +86,7 @@ $-media-tile-breakpoints: (
 
     &::after {
       border-width: rem(2px);
-      border-color: var(--pine-color-purple-600);
+      border-color: var(--pine-color-focus-ring);
     }
   }
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss
@@ -36,7 +36,7 @@ $-nav-subitem-border-width: rem(2px);
     $outline-offset-block: -1,
     $outline-border-radius: sage-border(radius-medium),
   );
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
   display: flex;
   align-items: center;
@@ -63,7 +63,7 @@ $-nav-subitem-border-width: rem(2px);
   @extend %t-sage-body-small-med;
 
   &.sage-nav__link--active {
-    @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+    @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
     background: $-nav-color-background;
   }
@@ -88,7 +88,7 @@ $-nav-subitem-border-width: rem(2px);
 
   &:not(.sage-nav__list--sub) {
     .sage-nav__link--active {
-      @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+      @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
     }
 
     .sage-nav__link--active::after {
diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss
@@ -12,7 +12,7 @@ $-pagination-text-color: var(--pine-color-text);
 $-pagination-text-color-disabled: var(--pine-color-grey-600);
 $-pagination-bg-color-current: var(--pine-color-background-muted);
 $-pagination-bg-color-hover: var(--pine-color-border-disabled);
-$-pagination-focus-ring-color: var(--pine-color-purple-600);
+$-pagination-focus-ring-color: var(--pine-color-focus-ring);
 
 
 .sage-pagination {
diff --git a/packages/sage-assets/lib/stylesheets/components/_status_icon.scss b/packages/sage-assets/lib/stylesheets/components/_status_icon.scss
@@ -20,7 +20,7 @@
     $outline-offset-block: 4px,
     $outline-border-radius: sage-border(radius-round),
   );
-  @include sage-focus-outline--update-color(var(--pine-color-purple-600));
+  @include sage-focus-outline--update-color(var(--pine-color-focus-ring));
 
   &:hover:not(:focus):not(:active) {
     color: var(--pine-color-text);
diff --git a/packages/sage-react/lib/Hero/Hero.jsx b/packages/sage-react/lib/Hero/Hero.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Button } from '../Button';
-import { HERO_SIZES } from './configs';
+import { HERO_SHADOWS, HERO_SIZES } from './configs';
 import { SageClassnames } from '../configs';
 
 export const Hero = ({
@@ -17,6 +17,7 @@ export const Hero = ({
   image,
   imageStart,
   heroSize,
+  shadow,
   title,
   titleTag,
   ...rest
@@ -30,6 +31,7 @@ export const Hero = ({
       'sage-hero--contained': contained,
       'sage-hero--image-start': imageStart,
       'sage-hero--custom-background-color': customBackgroundColor,
+      [`sage-hero--shadow-${shadow}`]: shadow,
     },
   );
 
@@ -80,6 +82,7 @@ export const Hero = ({
   );
 };
 
+Hero.SHADOWS = HERO_SHADOWS;
 Hero.Sizes = HERO_SIZES;
 
 Hero.defaultProps = {
@@ -97,6 +100,7 @@ Hero.defaultProps = {
   },
   imageStart: false,
   heroSize: Hero.Sizes.LARGE,
+  shadow: null,
   title: null,
   titleTag: 'h2',
 };
@@ -151,6 +155,10 @@ Hero.propTypes = {
    * Sets the size of the Hero's width.
    */
   heroSize: PropTypes.oneOf(Hero.Sizes),
+  /**
+   * Sets the box-shadow on the Hero. Aligned with Pine pds-box shadow values.
+   */
+  shadow: PropTypes.oneOf(Object.values(Hero.SHADOWS)),
   /**
    * The title to be rendered within the Hero.
    */
diff --git a/packages/sage-react/lib/Hero/Hero.story.mdx b/packages/sage-react/lib/Hero/Hero.story.mdx
diff --git a/packages/sage-react/lib/Hero/configs.js b/packages/sage-react/lib/Hero/configs.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@`
`22`	`22`	`<%= "sage-hero--contained" if component.contained %>`
`23`	`23`	`<%= "sage-hero--custom-background-color" if component.custom_background_color %>`
`24`	`24`	`<%= "sage-hero--image-start" if component.image_start %>`
	`25`	`+ <%= "sage-hero--shadow-#{component.shadow}" if component.shadow.present? %>`
`25`	`26`	`<%= component.generated_css_classes %>`
`26`	`27`	`"`
`27`	`28`	`data-js-hero`
Original file line number	Diff line number	Diff line change
`@@ -196,7 +196,7 @@ $-alert-text-colors: (`
`196`	`196`	`}`
`197`	`197`
`198`	`198`	`&:focus-visible {`
`199`		`- @include sage-focus-outline--update-color(var(--pine-color-purple-600));`
	`199`	`+ @include sage-focus-outline--update-color(var(--pine-color-focus-ring));`
`200`	`200`	`}`
`201`	`201`	`}`
`202`	`202`
`@@ -224,7 +224,7 @@ $-alert-text-colors: (`
`224`	`224`	`}`
`225`	`225`
`226`	`226`	`&:focus-visible {`
`227`		`- @include sage-focus-outline--update-color(var(--pine-color-purple-600));`
	`227`	`+ @include sage-focus-outline--update-color(var(--pine-color-focus-ring));`
`228`	`228`	`}`
`229`	`229`	`}`
`230`	`230`