@hashicorp/design-system-components 3.4.1 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @hashicorp/design-system-components
 
+## 3.5.0
+
+### Minor Changes
+
+`IconTile` - updated component adding support for `vault-radar` product
+
+<small class="doc-whats-new-changelog-metadata">[#1904](https://github.com/hashicorp/design-system/pull/1904)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+### Patch Changes
+
+`SideNav::List::Title`, `SideNav::List::BackLink`, `SideNav::List::Link`: fixed issue with long text strings without spaces not wrapping
+
+<small class="doc-whats-new-changelog-metadata">[#1899](https://github.com/hashicorp/design-system/pull/1899)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+Added `hds-` prefix to Sass variables for component styles (where missing).
+
+<small class="doc-whats-new-changelog-metadata">[#1903](https://github.com/hashicorp/design-system/pull/1903)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`Tabs` - removed `@cached` decorator and the associated `ember-cached-decorator-polyfill`
+
+<small class="doc-whats-new-changelog-metadata">[#1905](https://github.com/hashicorp/design-system/pull/1905)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`CodeBlock` - Fixed the default token color in the syntax highlighting theme.
+
+<small class="doc-whats-new-changelog-metadata">[#1893](https://github.com/hashicorp/design-system/pull/1893)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+**🔄 Updated dependencies:**
+
+- @hashicorp/design-system-tokens@1.10.0
+- @hashicorp/ember-flight-icons@4.0.6
+
 ## 3.4.1
 
 ### Patch Changes

package/addon/components/hds/icon-tile/index.js

@@ -19,6 +19,7 @@ export const PRODUCTS = [
   'vagrant',
   'vault',
   'vault-secrets',
+  'vault-radar',
   'waypoint',
 ];
 export const COLORS = ['neutral', ...PRODUCTS];

package/addon/components/hds/tabs/panel.js

@@ -4,7 +4,6 @@
  */
 
 import Component from '@glimmer/component';
-import { cached } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 
@@ -15,7 +14,6 @@ export default class HdsTabsPanelComponent extends Component {
    */
   panelId = 'panel-' + guidFor(this);
 
-  @cached
   get nodeIndex() {
     return this.args.panelIds
       ? this.args.panelIds.indexOf(this.panelId)

package/addon/components/hds/tabs/tab.js

@@ -4,7 +4,6 @@
  */
 
 import Component from '@glimmer/component';
-import { cached } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 
@@ -15,7 +14,6 @@ export default class HdsTabsTabComponent extends Component {
    */
   tabId = 'tab-' + guidFor(this);
 
-  @cached
   get nodeIndex() {
     return this.args.tabIds ? this.args.tabIds.indexOf(this.tabId) : undefined;
   }

package/app/styles/components/accordion.scss

@@ -10,8 +10,8 @@
 @use "../mixins/button" as *;
 @use "../mixins/focus-ring" as *;
 
-$accordion-item-padding: 16px;
-$accordion-item-border-radius: 6px;
+$hds-accordion-item-padding: 16px;
+$hds-accordion-item-border-radius: 6px;
 
 // ACCORDION COMPONENT (wrapper)
 
@@ -25,7 +25,7 @@ $accordion-item-border-radius: 6px;
 
 .hds-accordion-item {
   background: var(--token-color-surface-primary);
-  border-radius: $accordion-item-border-radius;
+  border-radius: $hds-accordion-item-border-radius;
 
   &.hds-accordion-item--does-not-contain-interactive {
     box-shadow: var(--token-surface-mid-box-shadow);
@@ -49,9 +49,9 @@ $accordion-item-border-radius: 6px;
   gap: 12px;
   align-items: center;
   padding:
-    $accordion-item-padding
-    $accordion-item-padding
-    $accordion-item-padding
+    $hds-accordion-item-padding
+    $hds-accordion-item-padding
+    $hds-accordion-item-padding
     12px; // by design
 }
 
@@ -73,7 +73,7 @@ $accordion-item-border-radius: 6px;
     &::after {
       position: absolute;
       display: block;
-      border-radius: $accordion-item-border-radius;
+      border-radius: $hds-accordion-item-border-radius;
       content: "";
       inset: 0;
     }
@@ -116,5 +116,5 @@ $accordion-item-border-radius: 6px;
 // CONTENT BLOCK
 
 .hds-accordion-item__content {
-  padding: 4px $accordion-item-padding $accordion-item-padding $accordion-item-padding;
+  padding: 4px $hds-accordion-item-padding $hds-accordion-item-padding $hds-accordion-item-padding;
 }

package/app/styles/components/app-footer.scss

@@ -7,13 +7,13 @@
 // app-footer
 //
 
-$app-footer-gap: 24px;
-$app-footer-icon-text-gap: 6px;
+$hds-app-footer-gap: 24px;
+$hds-app-footer-icon-text-gap: 6px;
 
 .hds-app-footer {
   display: flex;
   flex-wrap: wrap;
-  gap: $app-footer-gap;
+  gap: $hds-app-footer-gap;
   justify-content: center;
   padding: 24px;
   color: var(--app-footer-foreground-color);
@@ -29,7 +29,7 @@ $app-footer-icon-text-gap: 6px;
 .hds-app-footer__legal-links {
   display: flex;
   flex-wrap: wrap;
-  gap: $app-footer-gap;
+  gap: $hds-app-footer-gap;
   align-items: center;
   justify-content: center;
   width: fit-content;
@@ -42,7 +42,7 @@ $app-footer-icon-text-gap: 6px;
 .hds-app-footer__status-link {
   // custom spacing for the status link (internally is using the "AppFooter::Link")
   // Note: we increase specificity because otherwise is overwritten by the order of imports of components scss files
-  &.hds-link-inline--icon-leading > .hds-link-inline__icon { margin-right: $app-footer-icon-text-gap; }
+  &.hds-link-inline--icon-leading > .hds-link-inline__icon { margin-right: $hds-app-footer-icon-text-gap; }
 
   .flight-icon {
     fill: var(--hds-app-footer-status-icon-color, currentColor);
@@ -98,7 +98,7 @@ $app-footer-icon-text-gap: 6px;
 
 .hds-app-footer__copyright {
   display: flex;
-  gap: $app-footer-icon-text-gap;
+  gap: $hds-app-footer-icon-text-gap;
   align-items: center;
   color: var(--app-footer-copyright-text-color);
 

package/app/styles/components/badge-count.scss

@@ -26,7 +26,7 @@ $hds-badge-count-border-width: 1px;
 // SIZE
 
 // these values later may come from the design tokens
-$size-props: (
+$hds-badge-count-size-props: (
   "small": (
     "font-size": 0.8125rem, // 13px
     "height": 1.25rem,
@@ -52,11 +52,11 @@ $size-props: (
 
 @each $size in $hds-badge-count-sizes {
   .hds-badge-count--size-#{$size} {
-    min-height: map-get($size-props, $size, "height");
-    padding: calc(#{map-get($size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map-get($size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
-    font-size: map-get($size-props, $size, "font-size");
-    line-height: map-get($size-props, $size, "line-height");
-    border-radius: math.div(map-get($size-props, $size, "height"), 2);
+    min-height: map-get($hds-badge-count-size-props, $size, "height");
+    padding: calc(#{map-get($hds-badge-count-size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map-get($hds-badge-count-size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
+    font-size: map-get($hds-badge-count-size-props, $size, "font-size");
+    line-height: map-get($hds-badge-count-size-props, $size, "line-height");
+    border-radius: math.div(map-get($hds-badge-count-size-props, $size, "height"), 2);
   }
 }
 

package/app/styles/components/badge.scss

@@ -37,7 +37,7 @@ $hds-badge-border-width: 1px;
 // SIZE
 
 // these values later may come from the design tokens
-$size-props: (
+$hds-badge-size-props: (
   "small": (
     "font-size": 0.8125rem, // 13px
     "gap": 0.25rem,
@@ -69,18 +69,18 @@ $size-props: (
 
 @each $size in $hds-badge-sizes {
   .hds-badge--size-#{$size} {
-    gap: map-get($size-props, $size, "gap");
-    min-height: map-get($size-props, $size, "height");
-    padding: calc(#{map-get($size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map-get($size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
+    gap: map-get($hds-badge-size-props, $size, "gap");
+    min-height: map-get($hds-badge-size-props, $size, "height");
+    padding: calc(#{map-get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map-get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
 
     .hds-badge__icon {
-      width: map-get($size-props, $size, "icon-size");
-      height: map-get($size-props, $size, "icon-size");
+      width: map-get($hds-badge-size-props, $size, "icon-size");
+      height: map-get($hds-badge-size-props, $size, "icon-size");
     }
 
     .hds-badge__text {
-      font-size: map-get($size-props, $size, "font-size");
-      line-height: map-get($size-props, $size, "line-height");
+      font-size: map-get($hds-badge-size-props, $size, "font-size");
+      line-height: map-get($hds-badge-size-props, $size, "line-height");
     }
   }
 }

package/app/styles/components/code-block/index.scss

@@ -14,8 +14,8 @@
 @import "theme";
 
 // DIMENSIONS
-$code-block-line-numbers-width: 49px; // 3em ≈ 49px
-$code-block-code-padding: 16px;
+$hds-code-block-line-numbers-width: 49px; // 3em ≈ 49px
+$hds-code-block-code-padding: 16px;
 
 // CODE-BLOCK PARENT/WRAPPER
 
@@ -73,7 +73,7 @@ $code-block-code-padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 8px $code-block-code-padding;
+  padding: 8px $hds-code-block-code-padding;
   background-color: var(--hds-code-block-color-surface-faint);
   border-bottom: 1px solid var(--hds-code-block-color-border-primary);
   border-top-left-radius: inherit;
@@ -128,7 +128,7 @@ $code-block-code-padding: 16px;
   @include hds-focus-ring-basic();
   display: block;
   margin: 0;
-  padding: $code-block-code-padding;
+  padding: $hds-code-block-code-padding;
   overflow: auto;
   font-size: 0.8125rem;
   font-family: var(--token-typography-code-200-font-family);
@@ -191,16 +191,16 @@ $code-block-code-padding: 16px;
     .hds-code-block__code {
       position: relative;
       // reserve space for line numbers
-      padding-left: calc(#{$code-block-line-numbers-width} + #{$code-block-code-padding});
+      padding-left: calc(#{$hds-code-block-line-numbers-width} + #{$hds-code-block-code-padding});
     }
 
     .line-numbers-rows {
       position: absolute;
       top: 0;
       left: 0;
-      min-width: $code-block-line-numbers-width;
+      min-width: $hds-code-block-line-numbers-width;
       min-height: 100%;
-      padding: $code-block-code-padding 0;
+      padding: $hds-code-block-code-padding 0;
       border-right: 1px solid var(--hds-code-block-color-border-primary);
       user-select: none;
       pointer-events: none;
@@ -211,7 +211,7 @@ $code-block-code-padding: 16px;
 
         &::before {
           display: block;
-          padding-right: $code-block-code-padding;
+          padding-right: $hds-code-block-code-padding;
           text-align: right;
           content: counter(linenumber);
         }

package/app/styles/components/code-block/theme.scss

@@ -50,7 +50,7 @@
 
   // Syntax highlighting tokens:
   // general ----
-  --hds-code-block-color-token: var(--hds-code-block-color-green);
+  --hds-code-block-color-token: var(--hds-code-block-color-foreground-primary);
   // specific ----
   --hds-code-block-color-atrule: var(--hds-code-block-color-blue);
   --hds-code-block-color-code-block-attr-name: var(--hds-code-block-color-blue);

package/app/styles/components/form/toggle.scss

@@ -88,17 +88,17 @@
 
   &::before {
     // notice: to avoid too many nested calc() operation, we have decided to compute directly the values in Sass
-    $outline-width: 3px;
-    $outline-offset: 1px;
-    $shift: $outline-width + $outline-offset + 1px; // here 1px refers to "--token-form-radio-border-width"
+    $hds-outline-width: 3px;
+    $hds-outline-offset: 1px;
+    $hds-shift: $hds-outline-width + $hds-outline-offset + 1px; // here 1px refers to "--token-form-radio-border-width"
     position: absolute;
-    top: -$shift;
-    right: -$shift;
-    bottom: -$shift;
-    left: -$shift;
+    top: -$hds-shift;
+    right: -$hds-shift;
+    bottom: -$hds-shift;
+    left: -$hds-shift;
     margin: auto;
-    border-width: $outline-width;
-    border-radius: calc(var(--token-form-toggle-height) / 2 + $outline-width + $outline-offset);
+    border-width: $hds-outline-width;
+    border-radius: calc(var(--token-form-toggle-height) / 2 + $hds-outline-width + $hds-outline-offset);
     content: "";
   }
 
@@ -116,8 +116,8 @@
     background-color: var(--token-form-control-checked-surface-color-default);
 
     &::after {
-      $translation: calc(var(--token-form-toggle-width) - var(--token-form-toggle-thumb-size));
-      transform: translate3d($translation, 0, 0);
+      $hds-translation: calc(var(--token-form-toggle-width) - var(--token-form-toggle-thumb-size));
+      transform: translate3d($hds-translation, 0, 0);
     }
   }
 

package/app/styles/components/icon-tile.scss

@@ -9,7 +9,7 @@
 
 $hds-icon-tile-sizes: ( "small", "medium", "large" );
 $hds-icon-tile-types: ( "object","resource","logo" );
-$hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "vault-secrets", "waypoint" );
+$hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "vault-secrets", "vault-radar", "waypoint" );
 $hds-icon-tile-border-width: 1px;
 $hds-icon-tile-box-shadow: 0 1px 1px rgba(#656a76, 0.05);
 
@@ -48,7 +48,7 @@ $hds-icon-tile-box-shadow: 0 1px 1px rgba(#656a76, 0.05);
 // SIZE
 
 // these values later may come from the design tokens
-$size-props: (
+$hds-icon-tile-size-props: (
   "small": (
     "size": 1.75rem, // 28px
     "border-radius": 5px,
@@ -80,29 +80,29 @@ $size-props: (
 
 @each $size in $hds-icon-tile-sizes {
   .hds-icon-tile--size-#{$size} {
-    width: map-get($size-props, $size, "size");
-    height: map-get($size-props, $size, "size");
-    border-radius: map-get($size-props, $size, "border-radius");
+    width: map-get($hds-icon-tile-size-props, $size, "size");
+    height: map-get($hds-icon-tile-size-props, $size, "size");
+    border-radius: map-get($hds-icon-tile-size-props, $size, "border-radius");
 
     .hds-icon-tile__icon {
-      width: map-get($size-props, $size, "icon-size");
-      height: map-get($size-props, $size, "icon-size");
+      width: map-get($hds-icon-tile-size-props, $size, "icon-size");
+      height: map-get($hds-icon-tile-size-props, $size, "icon-size");
     }
 
     .hds-icon-tile__logo {
-      width: map-get($size-props, $size, "logo-size");
-      height: map-get($size-props, $size, "logo-size");
+      width: map-get($hds-icon-tile-size-props, $size, "logo-size");
+      height: map-get($hds-icon-tile-size-props, $size, "logo-size");
     }
 
     .hds-icon-tile__extra {
-      width: map-get($size-props, $size, "extra-size");
-      height: map-get($size-props, $size, "extra-size");
-      border-radius: map-get($size-props, $size, "extra-border-radius");
+      width: map-get($hds-icon-tile-size-props, $size, "extra-size");
+      height: map-get($hds-icon-tile-size-props, $size, "extra-size");
+      border-radius: map-get($hds-icon-tile-size-props, $size, "extra-border-radius");
     }
 
     .hds-icon-tile__extra-icon {
-      width: map-get($size-props, $size, "extra-icon-size");
-      height: map-get($size-props, $size, "extra-icon-size");
+      width: map-get($hds-icon-tile-size-props, $size, "extra-icon-size");
+      height: map-get($hds-icon-tile-size-props, $size, "extra-icon-size");
     }
   }
 }

package/app/styles/components/link/standalone.scss

@@ -46,7 +46,7 @@ $hds-link-standalone-border-width: 1px;
 // SIZE
 
 // these values later may come from the design tokens
-$size-props: (
+$hds-link-standalone-size-props: (
   "small": (
     "font-size": 0.8125rem, // 13px;
     "icon-size": 0.75rem, // 12px
@@ -67,13 +67,13 @@ $size-props: (
 @each $size in $hds-link-standalone-sizes {
   .hds-link-standalone--size-#{$size} {
     .hds-link-standalone__icon {
-      width: map-get($size-props, $size, "icon-size");
-      height: map-get($size-props, $size, "icon-size");
+      width: map-get($hds-link-standalone-size-props, $size, "icon-size");
+      height: map-get($hds-link-standalone-size-props, $size, "icon-size");
     }
 
     .hds-link-standalone__text {
-      font-size: map-get($size-props, $size, "font-size");
-      line-height: map-get($size-props, $size, "line-height");
+      font-size: map-get($hds-link-standalone-size-props, $size, "font-size");
+      line-height: map-get($hds-link-standalone-size-props, $size, "line-height");
     }
   }
 }
@@ -139,19 +139,19 @@ $hds-link-standalone-focus-shift: 4px;
 .hds-link-standalone {
   // the position absolute of an element is computed from the inside of the border of the container
   // so we have to take in account the border width of the pseudo-element container itself
-  $shift: $hds-link-standalone-focus-shift + $hds-link-standalone-border-width;
+  $hds-shift: $hds-link-standalone-focus-shift + $hds-link-standalone-border-width;
   // for visual/optical balance we add an extra 2px to the "shift" near the text (opposite the icon)
-  $shift-extra: $shift + 2px;
+  $hds-shift-extra: $hds-shift + 2px;
 
   // notice: this is used not only for the focus, but also to increase the clickable area
-  @include hds-focus-ring-with-pseudo-element($right: -$shift, $left: -$shift, $radius: $hds-link-standalone-focus-border-radius);
+  @include hds-focus-ring-with-pseudo-element($right: -$hds-shift, $left: -$hds-shift, $radius: $hds-link-standalone-focus-border-radius);
 
   // we need to override a couple of values for better visual alignment
   &.hds-link-standalone--icon-position-leading::before {
-    right: -$shift-extra;
+    right: -$hds-shift-extra;
   }
 
   &.hds-link-standalone--icon-position-trailing::before {
-    left: -$shift-extra;
+    left: -$hds-shift-extra;
   }
 }

package/app/styles/components/pagination.scss

@@ -12,7 +12,7 @@
 // custom breakpoint for the pagination, swapping between horizontal and stacked layout
 // notice: the value is based on where the component layout potentially breaks down
 
-$pagination-layout-breakpoint: 1000px;
+$hds-pagination-layout-breakpoint: 1000px;
 
 
 // * Pagination Parent (wrapper) component
@@ -26,7 +26,7 @@ $pagination-layout-breakpoint: 1000px;
   align-items: center;
   margin: 0 auto;
 
-  @media screen and (max-width: $pagination-layout-breakpoint) {
+  @media screen and (max-width: $hds-pagination-layout-breakpoint) {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -38,7 +38,7 @@ $pagination-layout-breakpoint: 1000px;
     justify-self: flex-start;
     margin-right: var(--token-pagination-child-spacing-horizontal);
 
-    @media screen and (max-width: $pagination-layout-breakpoint) {
+    @media screen and (max-width: $hds-pagination-layout-breakpoint) {
       margin-top: var(--token-pagination-child-spacing-vertical);
       margin-left: var(--token-pagination-child-spacing-horizontal);
     }
@@ -47,7 +47,7 @@ $pagination-layout-breakpoint: 1000px;
   .hds-pagination-nav {
     grid-area: nav;
 
-    @media screen and (max-width: $pagination-layout-breakpoint) {
+    @media screen and (max-width: $hds-pagination-layout-breakpoint) {
       justify-content: center;
       order: -1;
       // Force nav to occupy a full row so other components will wrap:
@@ -60,7 +60,7 @@ $pagination-layout-breakpoint: 1000px;
     justify-self: flex-end;
     margin-left: var(--token-pagination-child-spacing-horizontal);
 
-    @media screen and (max-width: $pagination-layout-breakpoint) {
+    @media screen and (max-width: $hds-pagination-layout-breakpoint) {
       margin-top: var(--token-pagination-child-spacing-vertical);
       margin-right: var(--token-pagination-child-spacing-horizontal);
     }

package/app/styles/components/side-nav/content.scss

@@ -40,12 +40,11 @@
 // (LIST) TITLE
 
 .hds-side-nav__list-title {
-  display: flex;
-  align-items: center;
   min-height: var(--token-side-nav-body-list-item-height);
   margin-top: var(--token-side-nav-body-list-margin-vertical);
   padding: 9px var(--token-side-nav-body-list-item-padding-horizontal); // 8px = (min-height - body-100-line-height) / 2
   color: var(--token-side-nav-color-foreground-faint);
+  overflow-wrap: break-word;
 
   // Remove margin from title at top of all list-items & lists
   .hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > & {
@@ -53,7 +52,6 @@
   }
 }
 
-
 // LIST (root elements)
 
 .hds-side-nav__list-wrapper, // <nav> element
@@ -147,8 +145,11 @@
 // LIST ITEM > INNER ELEMENTS
 
 .hds-side-nav__list-item-text {
+  min-width: 0;
+  max-width: 100%;
   color: var(--token-side-nav-color-foreground-primary);
   text-align: left;
+  overflow-wrap: break-word;
 }
 
 .hds-side-nav__list-item-icon-leading {

package/app/styles/components/stepper/step-indicator.scss

@@ -52,7 +52,7 @@ $hds-stepper-indicator-step-size: 24px;
 // Non-interactive (default)
 
 // Non-interactive props that correspond with status
-$non-interactive-props: (
+$hds-stepper-indicator-step-non-interactive-props: (
   "incomplete": (
     "text-color": var(--token-color-foreground-strong),
     "fill-color": var(--token-color-surface-faint),
@@ -79,12 +79,12 @@ $non-interactive-props: (
   // For each status of the non-interactive variant, set the text color, svg fill, and svg stroke colors based on $non-interactive-props
   .hds-stepper-indicator-step--status-#{$status} {
     .hds-stepper-indicator-step__status {
-      color: map-get($non-interactive-props, $status, "text-color");
+      color: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "text-color");
     }
 
     .hds-stepper-indicator-step__svg-hexagon path {
-      fill: map-get($non-interactive-props, $status, "fill-color");
-      stroke: map-get($non-interactive-props, $status, "stroke-color");
+      fill: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "fill-color");
+      stroke: map-get($hds-stepper-indicator-step-non-interactive-props, $status, "stroke-color");
     }
   }
 }
@@ -92,7 +92,7 @@ $non-interactive-props: (
 // Interactive
 
 // Determine states/status and corresponding styles
-$status-props: (
+$hds-stepper-indicator-step-status-props: (
   "incomplete": (
     "text-color-default": var(--token-color-foreground-primary),
     "fill-color-default": var(--token-color-surface-interactive),
@@ -135,27 +135,27 @@ $status-props: (
   cursor: pointer;
 
   @each $status in $hds-stepper-indicator-step-statuses {
-    // For each status set the text, svg fill, and svg stroke color based on $status-props
+    // For each status set the text, svg fill, and svg stroke color based on $hds-stepper-indicator-step-status-props
     &.hds-stepper-indicator-step--status-#{$status} {
       .hds-stepper-indicator-step__status {
-        color: map-get($status-props, $status, "text-color-default");
+        color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-default");
       }
 
       .hds-stepper-indicator-step__svg-hexagon path {
-        fill: map-get($status-props, $status, "fill-color-default");
-        stroke: map-get($status-props, $status, "stroke-color-default");
+        fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-default");
+        stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-default");
       }
 
       &:hover,
       &.mock-hover {
         .hds-stepper-indicator-step__status {
-          color: map-get($status-props, $status, "text-color-hover");
+          color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-hover");
         }
 
         .hds-stepper-indicator-step__svg-hexagon {
           path {
-            fill: map-get($status-props, $status, "fill-color-hover");
-            stroke: map-get($status-props, $status, "stroke-color-hover");
+            fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-hover");
+            stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-hover");
           }
         }
       }
@@ -163,13 +163,13 @@ $status-props: (
       &:active,
       &.mock-active {
         .hds-stepper-indicator-step__status {
-          color: map-get($status-props, $status, "text-color-active");
+          color: map-get($hds-stepper-indicator-step-status-props, $status, "text-color-active");
         }
 
         .hds-stepper-indicator-step__svg-hexagon {
           path {
-            fill: map-get($status-props, $status, "fill-color-active");
-            stroke: map-get($status-props, $status, "stroke-color-active");
+            fill: map-get($hds-stepper-indicator-step-status-props, $status, "fill-color-active");
+            stroke: map-get($hds-stepper-indicator-step-status-props, $status, "stroke-color-active");
           }
         }
       }

package/app/styles/components/stepper/task-indicator.scss

@@ -11,7 +11,7 @@ $hds-stepper-indicator-task-statuses: ( "incomplete", "progress", "processing",
 $hds-stepper-indicator-task-size: 16px;
 
 // Determine states and corresponding styles
-$status-props: (
+$hds-stepper-indicator-task-status-props: (
   "incomplete": (
     "color-default": var(--token-color-palette-neutral-300),
     "color-hover": var(--token-color-palette-blue-300),
@@ -54,18 +54,18 @@ $status-props: (
   cursor: pointer;
 
   @each $status in $hds-stepper-indicator-task-statuses {
-    // For each status set the icon color based on the $status-props
+    // For each status set the icon color based on the $hds-stepper-indicator-task-status-props
     &.hds-stepper-indicator-task--status-#{$status} {
-      color: map-get($status-props, $status, "color-default");
+      color: map-get($hds-stepper-indicator-task-status-props, $status, "color-default");
 
       &:hover,
       &.mock-hover {
-        color: map-get($status-props, $status, "color-hover");
+        color: map-get($hds-stepper-indicator-task-status-props, $status, "color-hover");
       }
 
       &:active,
       &.mock-active {
-        color: map-get($status-props, $status, "color-active");
+        color: map-get($hds-stepper-indicator-task-status-props, $status, "color-active");
       }
     }
   }

package/app/styles/mixins/_button.scss

@@ -9,7 +9,7 @@ $hds-button-border-width: 1px;
 $hds-button-focus-border-width: 3px;
 
 // these values later may come from the design tokens
-$size-props: (
+$hds-button-size-props: (
   "small": (
     "font-size": 0.8125rem, // 13px;
     "line-height": 0.875rem, // 14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)
@@ -273,24 +273,24 @@ $size-props: (
 @mixin hds-button-size-classes($blockName) {
   @each $size in $hds-button-sizes {
     .#{$blockName}--size-#{$size} {
-      min-height: map-get($size-props, $size, "min-height");
-      padding: map-get($size-props, $size, "padding-vertical") map-get($size-props, $size, "padding-horizontal");
+      min-height: map-get($hds-button-size-props, $size, "min-height");
+      padding: map-get($hds-button-size-props, $size, "padding-vertical") map-get($hds-button-size-props, $size, "padding-horizontal");
 
       .#{$blockName}__icon {
-        width: map-get($size-props, $size, "icon-size");
-        height: map-get($size-props, $size, "icon-size");
+        width: map-get($hds-button-size-props, $size, "icon-size");
+        height: map-get($hds-button-size-props, $size, "icon-size");
       }
 
       .#{$blockName}__text {
-        font-size: map-get($size-props, $size, "font-size");
-        line-height: map-get($size-props, $size, "line-height");
+        font-size: map-get($hds-button-size-props, $size, "font-size");
+        line-height: map-get($hds-button-size-props, $size, "line-height");
       }
 
       &.#{$blockName}--is-icon-only {
         // overrides to have the icon-only button squared
-        min-width: map-get($size-props, $size, "min-height");
-        padding-right: map-get($size-props, $size, "padding-vertical");
-        padding-left: map-get($size-props, $size, "padding-vertical");
+        min-width: map-get($hds-button-size-props, $size, "min-height");
+        padding-right: map-get($hds-button-size-props, $size, "padding-vertical");
+        padding-left: map-get($hds-button-size-props, $size, "padding-vertical");
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -43,12 +43,11 @@
     "@ember/render-modifiers": "^2.0.5",
     "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
-    "@hashicorp/design-system-tokens": "^1.9.0",
-    "@hashicorp/ember-flight-icons": "^4.0.5",
+    "@hashicorp/design-system-tokens": "^1.10.0",
+    "@hashicorp/ember-flight-icons": "^4.0.6",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",
-    "ember-cached-decorator-polyfill": "^1.0.2",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-sass": "^11.0.1",