@hashicorp/design-system-components 5.2.0-rc-20260108162959 → 5.2.0

package/dist/styles/mixins/_button.scss

@@ -6,11 +6,60 @@
 @use "sass:map";
 
 $hds-button-sizes: ("small", "medium", "large");
+$hds-button-border-radius: var(--token-border-radius-small);
+$hds-button-border-width: 1px;
+$hds-button-focus-border-width: 3px;
+
+// these values later may come from the design tokens
+$hds-button-size-props: (
+  "small": (
+    // 13px = 0.8125rem
+    "font-size": 0.8125rem,
+    // 14px = 0.875rem; 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)
+    "line-height": 0.875rem,
+    // 28px = 1.75rem
+    "min-height": 1.75rem,
+    // 6px = 0.375rem; here we're taking into account the 1px border
+    "padding-vertical": 0.375rem,
+    // 11px = 0.6875rem; here we're taking into account the 1px border
+    "padding-horizontal": 0.6875rem,
+    // 12px = 0.75rem
+    "icon-size": 0.75rem,
+  ),
+  "medium": (
+    // 14px =  0.875rem
+    "font-size": 0.875rem,
+    // 16px = 1rem
+    "line-height": 1rem,
+    // 36px = 2.25rem
+    "min-height": 2.25rem,
+    // 9px = 0.5625rem; here we're taking into account the 1px border
+    "padding-vertical": 0.5625rem,
+    // 15px = 0.9375rem; here we're taking into account the 1px border
+    "padding-horizontal": 0.9375rem,
+    // 16px
+    "icon-size": 1rem,
+  ),
+  "large": (
+    // 16px = 1rem
+    "font-size": 1rem,
+    // 24px = 1.5rem
+    "line-height": 1.5rem,
+    // 48px = 3rem
+    "min-height": 3rem,
+    // 11px = 0.6875rem; here we're taking into account the 1px border
+    "padding-vertical": 0.6875rem,
+    // 19px = 1.1875rem; here we're taking into account the 1px border
+    "padding-horizontal": 1.1875rem,
+    // 24px = 1.5rem
+    "icon-size": 1.5rem,
+  ),
+);
 
 @mixin hds-button() {
   position: relative;
   display: flex;
-  gap: var(--token-button-gap);
+  gap: 0.375rem;
   align-items: center;
   justify-content: center;
   width: auto;
@@ -22,17 +71,17 @@ $hds-button-sizes: ("small", "medium", "large");
   font-weight: var(--token-typography-font-weight-regular);
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
-  border: var(--token-button-border-width) solid transparent; // We need this to be transparent for a11y
-  border-radius: var(--token-button-border-radius);
+  border: $hds-button-border-width solid transparent; // We need this to be transparent for a11y
+  border-radius: $hds-button-border-radius;
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent; // We need this to be transparent for a11y
   isolation: isolate;
 }
 
 @mixin hds-button-state-disabled() {
-  color: var(--token-button-foreground-color-disabled);
-  background-color: var(--token-button-surface-color-disabled);
-  border-color: var(--token-button-border-color-disabled);
+  color: var(--token-color-foreground-disabled);
+  background-color: var(--token-color-surface-faint);
+  border-color: var(--token-color-border-primary);
   box-shadow: none;
   cursor: not-allowed;
 }
@@ -43,60 +92,58 @@ $hds-button-sizes: ("small", "medium", "large");
   &::before {
     // 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: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
-    $radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
+    $shift: $hds-button-border-width + $hds-button-focus-border-width;
     position: absolute;
-    top: $shift;
-    right: $shift;
-    bottom: $shift;
-    left: $shift;
+    top: -$shift;
+    right: -$shift;
+    bottom: -$shift;
+    left: -$shift;
     z-index: -1;
-    border: var(--token-button-focus-border-width) solid transparent;
-    border-radius: $radius;
+    border: $hds-button-focus-border-width solid transparent;
+    border-radius: calc(#{$hds-button-border-radius} + #{$hds-button-focus-border-width});
     content: "";
   }
 }
 
 @mixin hds-button-color-primary() {
-  color: var(--token-button-foreground-color-primary-default);
-  background-color: var(--token-button-surface-color-primary-default);
-  border-color: var(--token-button-border-color-primary-default);
+  color: var(--token-color-foreground-high-contrast);
+  background-color: var(--token-color-palette-blue-200);
+  border-color: var(--token-color-palette-blue-300);
   box-shadow: var(--token-elevation-low-box-shadow);
 
   &:hover,
   &.mock-hover {
-    color: var(--token-button-foreground-color-primary-hover);
-    background-color: var(--token-button-surface-color-primary-hover);
-    border-color: var(--token-button-border-color-primary-hover);
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-blue-300);
+    border-color: var(--token-color-palette-blue-400);
     cursor: pointer;
   }
 
   &:focus,
   &.mock-focus {
-    color: var(--token-button-foreground-color-primary-focus);
-    background-color: var(--token-button-surface-color-primary-focus);
-    border-color: var(--token-button-border-color-primary-focus-internal);
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-blue-200);
+    border-color: var(--token-color-focus-action-internal);
 
     &::before {
       // 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
       // plus for the primary button we want to have a 2px gap between the button and the focus
-      $shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
-      $radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
-      top: $shift;
-      right: $shift;
-      bottom: $shift;
-      left: $shift;
-      border-color: var(--token-button-border-color-primary-focus-external);
-      border-radius: $radius;
+      $shift: $hds-button-border-width + $hds-button-focus-border-width + 2px;
+      top: -$shift;
+      right: -$shift;
+      bottom: -$shift;
+      left: -$shift;
+      border-color: var(--token-color-focus-action-external);
+      border-radius: calc(#{$hds-button-border-radius} + #{$hds-button-focus-border-width} + 2px);
     }
   }
 
   &:active,
   &.mock-active {
-    color: var(--token-button-foreground-color-primary-active);
-    background-color: var(--token-button-surface-color-primary-active);
-    border-color: var(--token-button-border-color-primary-active);
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-blue-400);
+    border-color: var(--token-color-palette-blue-400);
     box-shadow: none;
 
     &::before {
@@ -106,35 +153,35 @@ $hds-button-sizes: ("small", "medium", "large");
 }
 
 @mixin hds-button-color-secondary() {
-  color: var(--token-button-foreground-color-secondary-default);
-  background-color: var(--token-button-surface-color-secondary-default);
-  border-color: var(--token-button-border-color-secondary-default);
+  color: var(--token-color-foreground-primary);
+  background-color: var(--token-color-surface-faint);
+  border-color: var(--token-color-border-strong);
   box-shadow: var(--token-elevation-low-box-shadow);
 
   &:hover,
   &.mock-hover {
-    color: var(--token-button-foreground-color-secondary-hover);
-    background-color: var(--token-button-surface-color-secondary-hover);
-    border-color: var(--token-button-border-color-secondary-hover);
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-border-strong);
     cursor: pointer;
   }
 
   &:focus,
   &.mock-focus {
-    color: var(--token-button-foreground-color-secondary-focus);
-    background-color: var(--token-button-surface-color-secondary-focus);
-    border-color: var(--token-button-border-color-secondary-focus-internal);
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-faint);
+    border-color: var(--token-color-focus-action-internal);
 
     &::before {
-      border-color: var(--token-button-border-color-secondary-focus-external);
+      border-color: var(--token-color-focus-action-external);
     }
   }
 
   &:active,
   &.mock-active {
-    color: var(--token-button-foreground-color-secondary-active);
-    background-color: var(--token-button-surface-color-secondary-active);
-    border-color: var(--token-button-border-color-secondary-active);
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
     box-shadow: none;
 
     &::before {
@@ -144,34 +191,33 @@ $hds-button-sizes: ("small", "medium", "large");
 }
 
 @mixin hds-button-color-tertiary() {
-  color: var(--token-button-foreground-color-tertiary-default);
-  background-color: var(--token-button-surface-color-tertiary-default);
-  border-color: var(--token-button-border-color-tertiary-default);
+  color: var(--token-color-foreground-action);
+  background-color: transparent;
+  border-color: transparent;
 
   &:hover,
   &.mock-hover {
-    color: var(--token-button-foreground-color-tertiary-hover);
-    background-color: var(--token-button-surface-color-tertiary-hover);
-    border-color: var(--token-button-border-color-tertiary-hover);
+    color: var(--token-color-foreground-action-hover);
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-border-strong);
     cursor: pointer;
   }
 
   &:focus,
   &.mock-focus {
-    color: var(--token-button-foreground-color-tertiary-focus);
-    background-color: var(--token-button-surface-color-tertiary-focus);
-    border-color: var(--token-button-border-color-tertiary-focus-internal);
+    color: var(--token-color-foreground-action);
+    border-color: var(--token-color-focus-action-internal);
 
     &::before {
-      border-color: var(--token-button-border-color-tertiary-focus-external);
+      border-color: var(--token-color-focus-action-external);
     }
   }
 
   &:active,
   &.mock-active {
-    color: var(--token-button-foreground-color-tertiary-active);
-    background-color: var(--token-button-surface-color-tertiary-active);
-    border-color: var(--token-button-border-color-tertiary-active);
+    color: var(--token-color-foreground-action-active);
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
     box-shadow: none;
 
     &::before {
@@ -203,35 +249,35 @@ $hds-button-sizes: ("small", "medium", "large");
 }
 
 @mixin hds-button-color-critical() {
-  color: var(--token-button-foreground-color-critical-default);
-  background-color: var(--token-button-surface-color-critical-default);
-  border-color: var(--token-button-border-color-critical-default);
+  color: var(--token-color-foreground-critical-on-surface);
+  background-color: var(--token-color-surface-critical);
+  border-color: var(--token-color-foreground-critical-on-surface);
   box-shadow: var(--token-elevation-low-box-shadow);
 
   &:hover,
   &.mock-hover {
-    color: var(--token-button-foreground-color-critical-hover);
-    background-color: var(--token-button-surface-color-critical-hover);
-    border-color: var(--token-button-border-color-critical-hover);
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-red-300);
+    border-color: var(--token-color-palette-red-400);
     cursor: pointer;
   }
 
   &:focus,
   &.mock-focus {
-    color: var(--token-button-foreground-color-critical-focus);
-    background-color: var(--token-button-surface-color-critical-focus);
-    border-color: var(--token-button-border-color-critical-focus-internal);
+    color: var(--token-color-foreground-critical-on-surface);
+    background-color: var(--token-color-surface-critical);
+    border-color: var(--token-color-focus-critical-internal);
 
     &::before {
-      border-color: var(--token-button-border-color-critical-focus-external);
+      border-color: var(--token-color-focus-critical-external);
     }
   }
 
   &:active,
   &.mock-active {
-    color: var(--token-button-foreground-color-critical-active);
-    background-color: var(--token-button-surface-color-critical-active);
-    border-color: var(--token-button-border-color-critical-active);
+    color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-palette-red-400);
+    border-color: var(--token-color-palette-red-400);
     box-shadow: none;
 
     &::before {
@@ -243,24 +289,25 @@ $hds-button-sizes: ("small", "medium", "large");
 @mixin hds-button-size-classes($blockName) {
   @each $size in $hds-button-sizes {
     .#{$blockName}--size-#{$size} {
-      min-height: var(--token-button-height-#{$size});
-      padding: var(--token-button-padding-vertical-#{$size}) var(--token-button-padding-horizontal-#{$size});
+      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: var(--token-button-icon-size-#{$size});
-        height: var(--token-button-icon-size-#{$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: var(--token-button-typography-font-size-#{$size});
-        line-height: var(--token-button-typography-line-height-#{$size});
+        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: var(--token-button-height-#{$size});
-        padding-right: var(--token-button-padding-vertical-#{$size});
-        padding-left: var(--token-button-padding-vertical-#{$size});
+        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/dist/styles/mixins/_interactive-dark-theme.scss

@@ -35,7 +35,7 @@ $hds-interactive-dark-theme-focus-ring-action-box-shadow:
     // general dark theme tokens
     color: var(--token-color-foreground-high-contrast);
     background-color: var(--token-color-palette-neutral-700);
-    border-radius: var(--token-button-border-radius);
+    border-radius: $hds-button-border-radius; // We don't have a button border-radius token so we use the button mixin sass variable
   }
 
   // Hover:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "5.2.0-rc-20260108162959",
+  "version": "5.2.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -35,8 +35,8 @@
     "@embroider/macros": "^1.18.1",
     "@embroider/util": "^1.13.4",
     "@floating-ui/dom": "^1.6.12",
-    "@hashicorp/design-system-tokens": "4.0.0-rc-20260108162959",
-    "@hashicorp/flight-icons": "4.1.1-rc-20260108162959",
+    "@hashicorp/design-system-tokens": "^3.0.0",
+    "@hashicorp/flight-icons": "^4.1.1",
     "@lezer/highlight": "^1.2.1",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",
     "clipboard-polyfill": "^4.1.1",
@@ -341,8 +341,6 @@
       "./components/hds/text/code.js": "./dist/_app_/components/hds/text/code.js",
       "./components/hds/text/display.js": "./dist/_app_/components/hds/text/display.js",
       "./components/hds/text.js": "./dist/_app_/components/hds/text.js",
-      "./components/hds/theme-context.js": "./dist/_app_/components/hds/theme-context.js",
-      "./components/hds/theme-switcher.js": "./dist/_app_/components/hds/theme-switcher.js",
       "./components/hds/time.js": "./dist/_app_/components/hds/time.js",
       "./components/hds/time/range.js": "./dist/_app_/components/hds/time/range.js",
       "./components/hds/time/single.js": "./dist/_app_/components/hds/time/single.js",
@@ -371,7 +369,6 @@
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",
       "./services/hds-intl.js": "./dist/_app_/services/hds-intl.js",
-      "./services/hds-theming.js": "./dist/_app_/services/hds-theming.js",
       "./services/hds-time.js": "./dist/_app_/services/hds-time.js"
     }
   },
@@ -419,7 +416,6 @@
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "lint:types": "glint",
-    "start": "rollup --config --watch --environment development",
-    "test:dist-files": "node scripts/check-dist-files.js"
+    "start": "rollup --config --watch --environment development"
   }
 }

package/declarations/components/hds/theme-context/index.d.ts

@@ -1,24 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-import Component from '@glimmer/component';
-import type Owner from '@ember/owner';
-import type { HdsThemeContexts } from './types.ts';
-import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts';
-export interface HdsThemeContextSignature {
-    Args: {
-        context: HdsThemeContexts;
-    };
-    Blocks: {
-        default: [];
-    };
-    Element: HTMLElement;
-}
-export declare const CONTEXTUAL_THEMES: HdsThemes[];
-export declare const CONTEXTUAL_MODES: HdsModes[];
-export declare const CONTEXTUAL_VALUES: HdsThemeContexts[];
-export default class HdsThemeContext extends Component<HdsThemeContextSignature> {
-    constructor(owner: Owner, args: HdsThemeContextSignature['Args']);
-    get classNames(): string;
-}

package/declarations/components/hds/theme-context/types.d.ts

@@ -1,19 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-import { HdsThemeValues, HdsModesLightValues, HdsModesDarkValues } from '../../../services/hds-theming.ts';
-import type { HdsThemes, HdsModes } from '../../../services/hds-theming.ts';
-export declare const HdsThemeContextThemesValues: {
-    readonly Default: HdsThemeValues.Default;
-    readonly System: HdsThemeValues.System;
-    readonly Light: HdsThemeValues.Light;
-    readonly Dark: HdsThemeValues.Dark;
-};
-export declare const HdsThemeContextModesValues: {
-    readonly CdsG0: HdsModesLightValues.CdsG0;
-    readonly CdsG10: HdsModesLightValues.CdsG10;
-    readonly CdsG90: HdsModesDarkValues.CdsG90;
-    readonly CdsG100: HdsModesDarkValues.CdsG100;
-};
-export type HdsThemeContexts = HdsThemes | Exclude<HdsModes, 'default'>;

package/declarations/components/hds/theme-switcher/index.d.ts

@@ -1,43 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-import Component from '@glimmer/component';
-import type { HdsDropdownSignature } from '../dropdown/index.ts';
-import type { HdsDropdownToggleButtonSignature } from '../dropdown/toggle/button.ts';
-import type { HdsIconSignature } from '../icon/index.ts';
-import type HdsThemingService from '../../../services/hds-theming.ts';
-import type { HdsThemes, HdsOnSetThemeCallback } from '../../../services/hds-theming.ts';
-interface ThemeOption {
-    theme: HdsThemes | undefined;
-    icon: HdsIconSignature['Args']['name'];
-    label: string;
-}
-export interface HdsThemeSwitcherSignature {
-    Args: {
-        toggleSize?: HdsDropdownToggleButtonSignature['Args']['size'];
-        toggleIsFullWidth?: HdsDropdownToggleButtonSignature['Args']['isFullWidth'];
-        hasDefaultOption?: boolean;
-        hasSystemOption?: boolean;
-        onSetTheme?: HdsOnSetThemeCallback;
-    };
-    Element: HdsDropdownSignature['Element'];
-}
-export default class HdsThemeSwitcher extends Component<HdsThemeSwitcherSignature> {
-    readonly hdsTheming: HdsThemingService;
-    get toggleSize(): "small" | "medium";
-    get toggleIsFullWidth(): boolean;
-    get toggleContent(): {
-        label: string;
-        icon: "type" | "map" | "filter" | "code" | "link" | "menu" | "search" | "video" | "circle" | "image" | "path" | "tag" | "repeat" | "hash" | "queue" | "shuffle" | "chevron-up" | "chevron-down" | "unfold-open" | "unfold-close" | "arrow-down" | "arrow-up" | "swap-vertical" | "top" | "key" | "move" | "change" | "pause" | "play" | "move-horizontal" | "loading" | "loading-static" | "running" | "running-static" | "apple" | "apple-color" | "alibaba" | "alibaba-color" | "amazon-ecs" | "amazon-ecs-color" | "amazon-eks" | "amazon-eks-color" | "ansible-community" | "ansible-community-color" | "ansible-automation-platform" | "ansible-automation-platform-color" | "auth0" | "auth0-color" | "aws" | "aws-color" | "aws-cdk" | "aws-cdk-color" | "aws-cloudwatch" | "aws-cloudwatch-color" | "aws-ec2" | "aws-ec2-color" | "aws-lambda" | "aws-lambda-color" | "aws-s3" | "aws-s3-color" | "azure" | "azure-color" | "azure-aks" | "azure-aks-color" | "azure-blob-storage" | "azure-blob-storage-color" | "azure-devops" | "azure-devops-color" | "azure-vms" | "azure-vms-color" | "bitbucket" | "bitbucket-color" | "bridgecrew" | "bridgecrew-color" | "cisco" | "cisco-color" | "codepen" | "codepen-color" | "confluence" | "confluence-color" | "confluent" | "confluent-color" | "datadog" | "datadog-color" | "digital-ocean" | "digital-ocean-color" | "docker" | "docker-color" | "duo" | "duo-color" | "elastic-observability" | "elastic-observability-color" | "f5" | "f5-color" | "facebook" | "facebook-color" | "figma" | "figma-color" | "gcp" | "gcp-color" | "git" | "git-color" | "gitlab" | "gitlab-color" | "github" | "github-color" | "google" | "google-color" | "google-docs" | "google-docs-color" | "google-drive" | "google-drive-color" | "google-forms" | "google-forms-color" | "google-sheets" | "google-sheets-color" | "google-slides" | "google-slides-color" | "grafana" | "grafana-color" | "helm" | "helm-color" | "infracost" | "infracost-color" | "jenkins" | "jenkins-color" | "jfrog" | "jfrog-color" | "jira" | "jira-color" | "jwt" | "jwt-color" | "kubernetes" | "kubernetes-color" | "lightlytics" | "lightlytics-color" | "linkedin" | "linkedin-color" | "linode" | "linode-color" | "linux" | "linux-color" | "loom" | "loom-color" | "meetup" | "meetup-color" | "microsoft" | "microsoft-color" | "microsoft-teams" | "microsoft-teams-color" | "minio" | "minio-color" | "mongodb" | "mongodb-color" | "new-relic" | "new-relic-color" | "okta" | "okta-color" | "oracle" | "oracle-color" | "opa" | "opa-color" | "openid" | "openid-color" | "openstack" | "openstack-color" | "pack" | "pack-color" | "pager-duty" | "pager-duty-color" | "ping-identity " | "ping-identity-color" | "postgres" | "postgres-color" | "rabbitmq" | "rabbitmq-color" | "saml" | "saml-color" | "service-now" | "service-now-color" | "slack" | "slack-color" | "snyk" | "snyk-color" | "splunk" | "splunk-color" | "twilio" | "twilio-color" | "twitch" | "twitch-color" | "twitter" | "twitter-color" | "twitter-x" | "twitter-x-color" | "vantage" | "vantage-color" | "venafi" | "venafi-color" | "vercel" | "vercel-color" | "vmware" | "vmware-color" | "youtube" | "youtube-color" | "boundary" | "boundary-color" | "boundary-fill" | "boundary-fill-color" | "boundary-square" | "boundary-square-color" | "consul" | "consul-color" | "consul-fill" | "consul-fill-color" | "consul-square" | "consul-square-color" | "nomad" | "nomad-color" | "nomad-fill" | "nomad-fill-color" | "nomad-square" | "nomad-square-color" | "packer" | "packer-color" | "packer-fill" | "packer-fill-color" | "packer-square" | "packer-square-color" | "terraform" | "terraform-color" | "terraform-fill" | "terraform-fill-color" | "terraform-square" | "terraform-square-color" | "vagrant" | "vagrant-color" | "vagrant-fill" | "vagrant-fill-color" | "vagrant-square" | "vagrant-square-color" | "vault" | "vault-color" | "vault-fill" | "vault-fill-color" | "vault-square" | "vault-square-color" | "vault-radar" | "vault-radar-color" | "vault-radar-fill" | "vault-radar-fill-color" | "vault-radar-square" | "vault-radar-square-color" | "vault-secrets" | "vault-secrets-color" | "vault-secrets-fill" | "vault-secrets-fill-color" | "vault-secrets-square" | "vault-secrets-square-color" | "waypoint" | "waypoint-color" | "waypoint-fill" | "waypoint-fill-color" | "waypoint-square" | "waypoint-square-color" | "hashicorp" | "hashicorp-color" | "hashicorp-fill" | "hashicorp-fill-color" | "hashicorp-square" | "hashicorp-square-color" | "hcp" | "hcp-color" | "hcp-fill" | "hcp-fill-color" | "hcp-square" | "hcp-square-color" | "accessibility" | "folder-users" | "frown" | "identity-service" | "identity-user" | "meh" | "robot" | "smile" | "user" | "user-check" | "user-circle" | "user-circle-fill" | "user-minus" | "user-plus" | "user-x" | "users" | "ampersand" | "beaker" | "bucket" | "bulb" | "circle-dot" | "circle-fill" | "circle-half" | "diamond" | "diamond-fill" | "disc" | "dot" | "dot-half" | "droplet" | "flag" | "gift" | "government" | "handshake" | "hexagon" | "hexagon-fill" | "labyrinth" | "layers" | "moon" | "octagon" | "outline" | "random" | "rocket" | "sparkle" | "square" | "square-fill" | "sun" | "triangle" | "triangle-fill" | "truck" | "wand" | "zap" | "zap-off" | "docs" | "docs-download" | "docs-link" | "guide" | "guide-link" | "help" | "info" | "info-fill" | "learn" | "learn-link" | "support" | "alert-circle" | "alert-circle-fill" | "alert-diamond" | "alert-diamond-fill" | "alert-octagon" | "alert-octagon-fill" | "alert-triangle" | "alert-triangle-fill" | "check" | "check-circle" | "check-circle-fill" | "check-diamond" | "check-diamond-fill" | "check-hexagon" | "check-hexagon-fill" | "check-square" | "check-square-fill" | "skip" | "x" | "x-circle" | "x-circle-fill" | "x-diamond" | "x-diamond-fill" | "x-hexagon" | "x-hexagon-fill" | "x-square" | "x-square-fill" | "bug" | "certificate" | "eye" | "eye-off" | "fingerprint" | "keychain" | "lock" | "lock-fill" | "lock-off" | "shield" | "shield-alert" | "shield-check" | "shield-off" | "shield-x" | "token" | "unlock" | "verified" | "wall" | "minus" | "minus-circle" | "minus-circle-fill" | "minus-plus" | "minus-plus-circle" | "minus-plus-square" | "minus-square" | "minus-square-fill" | "plus" | "plus-circle" | "plus-circle-fill" | "plus-square" | "camera" | "camera-off" | "cast" | "closed-caption" | "fast-forward" | "film" | "headphones" | "music" | "pause-circle" | "play-circle" | "radio" | "rewind" | "rss" | "skip-back" | "skip-forward" | "speaker" | "stop-circle" | "volume" | "volume-down" | "volume-up" | "volume-x" | "wifi" | "wifi-off" | "compass" | "crosshair" | "map-pin" | "navigation" | "navigation-alt" | "redirect" | "target" | "align-center" | "align-justify" | "align-left" | "align-right" | "battery" | "battery-charging" | "bookmark" | "bookmark-add" | "bookmark-add-fill" | "bookmark-fill" | "bookmark-remove" | "bookmark-remove-fill" | "bottom" | "command" | "crop" | "dashboard" | "delete" | "download" | "edit" | "end" | "entry-point" | "exit-point" | "external-link" | "filter-circle" | "filter-fill" | "grid" | "grid-alt" | "home" | "jump-link" | "layout" | "list" | "maximize" | "maximize-alt" | "minimize" | "minimize-alt" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "paperclip" | "pen-tool" | "pencil-tool" | "pin" | "pin-off" | "power" | "printer" | "reload" | "resize-column" | "rotate-cw" | "rotate-ccw" | "share" | "sidebar" | "sidebar-hide" | "sidebar-show" | "sign-in" | "sign-out" | "slash" | "slash-square" | "sort-asc" | "sort-desc" | "start" | "switcher" | "sync" | "sync-alert" | "sync-reverse" | "text-wrap" | "toggle-left" | "toggle-right" | "trash" | "upload" | "zoom-in" | "zoom-out" | "archive" | "clipboard" | "clipboard-checked" | "clipboard-copy" | "clipboard-x" | "file" | "file-change" | "file-check" | "file-diff" | "file-minus" | "file-plus" | "file-source" | "file-text" | "file-x" | "files" | "folder" | "folder-fill" | "folder-minus" | "folder-minus-fill" | "folder-plus" | "folder-plus-fill" | "folder-star" | "inbox" | "api" | "auto-apply" | "build" | "change-circle" | "change-square" | "channel" | "cloud" | "cloud-check" | "cloud-download" | "cloud-lightning" | "cloud-lock" | "cloud-off" | "cloud-upload" | "cloud-x" | "connection" | "connection-gateway" | "cpu" | "duplicate" | "gateway" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "git-repo" | "hammer" | "key-values" | "mainframe" | "mesh" | "module" | "monitor" | "network" | "network-alt" | "node" | "pipeline" | "plug" | "replication-direct" | "replication-perf" | "scissors" | "server" | "server-cluster" | "serverless" | "service" | "settings" | "sliders" | "smartphone" | "socket" | "step" | "tablet" | "terminal" | "terminal-screen" | "test" | "tools" | "transform-data" | "tv" | "webhook" | "wrench" | "calendar" | "clock" | "clock-filled" | "delay" | "event" | "history" | "hourglass" | "watch" | "bar-chart" | "bar-chart-alt" | "box" | "collections" | "database" | "hard-drive" | "line-chart" | "line-chart-up" | "logs" | "package" | "pie-chart" | "save" | "trend-down" | "trend-up" | "activity" | "at-sign" | "award" | "bell" | "bell-active" | "bell-active-fill" | "bell-off" | "discussion-circle" | "discussion-square" | "heart" | "heart-fill" | "heart-off" | "mail" | "mail-open" | "message-circle" | "message-circle-fill" | "message-square" | "message-square-fill" | "mic" | "mic-off" | "newspaper" | "phone" | "phone-call" | "phone-off" | "send" | "star" | "star-circle" | "star-fill" | "star-off" | "thumbs-down" | "thumbs-up" | "video-off" | "bank-vault" | "briefcase" | "credit-card" | "dollar-sign" | "enterprise" | "globe" | "globe-private" | "org" | "provider" | "shopping-bag" | "shopping-cart" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "caret" | "chevron-left" | "chevron-right" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "load-balancer" | "migrate" | "swap-horizontal";
-    } | {
-        label: string;
-        icon: undefined;
-    };
-    get hasDefaultOption(): boolean;
-    get hasSystemOption(): boolean;
-    get _options(): Partial<Record<"default" | "light" | "dark" | "system", ThemeOption>>;
-    get currentTheme(): "default" | "light" | "dark" | "system" | undefined;
-    onSelectTheme(theme: HdsThemes | undefined): void;
-}
-export {};

package/declarations/services/hds-theming.d.ts

@@ -1,57 +0,0 @@
-import Service from '@ember/service';
-export declare enum HdsThemeValues {
-    Default = "default",
-    System = "system",
-    Light = "light",
-    Dark = "dark"
-}
-export declare enum HdsModesBaseValues {
-    Default = "default"
-}
-export declare enum HdsModesLightValues {
-    CdsG0 = "cds-g0",
-    CdsG10 = "cds-g10"
-}
-export declare enum HdsModesDarkValues {
-    CdsG90 = "cds-g90",
-    CdsG100 = "cds-g100"
-}
-export type HdsThemes = `${HdsThemeValues}`;
-export type HdsModes = `${HdsModesBaseValues}` | `${HdsModesLightValues}` | `${HdsModesDarkValues}`;
-export type HdsModesLight = `${HdsModesLightValues}`;
-export type HdsModesDark = `${HdsModesDarkValues}`;
-type HdsThemingOptions = {
-    lightTheme: HdsModesLight;
-    darkTheme: HdsModesDark;
-};
-type SetThemeArgs = {
-    theme: HdsThemes | undefined;
-    options?: HdsThemingOptions;
-    onSetTheme?: HdsOnSetThemeCallback;
-};
-export type HdsOnSetThemeCallbackArgs = {
-    currentTheme: HdsThemes | undefined;
-    currentMode: HdsModes | undefined;
-};
-export type HdsOnSetThemeCallback = (args: HdsOnSetThemeCallbackArgs) => void;
-export declare const THEMES: HdsThemes[];
-export declare const MODES_LIGHT: HdsModesLight[];
-export declare const MODES_DARK: HdsModesDark[];
-export declare const MODES: HdsModes[];
-export declare const HDS_THEMING_LOCALSTORAGE_DATA = "hds-theming-data";
-export declare const DEFAULT_THEMING_OPTION_LIGHT_THEME = HdsModesLightValues.CdsG0;
-export declare const DEFAULT_THEMING_OPTION_DARK_THEME = HdsModesDarkValues.CdsG100;
-export default class HdsThemingService extends Service {
-    _currentTheme: HdsThemes | undefined;
-    _currentMode: HdsModes | undefined;
-    _currentLightTheme: HdsModesLight;
-    _currentDarkTheme: HdsModesDark;
-    globalOnSetTheme: HdsOnSetThemeCallback | undefined;
-    initializeTheme(): void;
-    setTheme({ theme, options, onSetTheme }: SetThemeArgs): void;
-    get currentTheme(): HdsThemes | undefined;
-    get currentMode(): HdsModes | undefined;
-    get currentLightTheme(): HdsModesLight;
-    get currentDarkTheme(): HdsModesDark;
-}
-export {};

package/dist/_app_/components/hds/theme-context.js

@@ -1 +0,0 @@
-export { default } from "@hashicorp/design-system-components/components/hds/theme-context/index";

package/dist/_app_/components/hds/theme-switcher.js

@@ -1 +0,0 @@
-export { default } from "@hashicorp/design-system-components/components/hds/theme-switcher/index";

package/dist/_app_/services/hds-theming.js

@@ -1 +0,0 @@
-export { default } from "@hashicorp/design-system-components/services/hds-theming";

package/dist/components/hds/theme-context/index.js

@@ -1,45 +0,0 @@
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-import { HdsThemeContextThemesValues, HdsThemeContextModesValues } from './types.js';
-import { precompileTemplate } from '@ember/template-compilation';
-import { setComponentTemplate } from '@ember/component';
-
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<div class={{this.classNames}} ...attributes>{{yield}}</div>");
-
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-const CONTEXTUAL_THEMES = Object.values(HdsThemeContextThemesValues);
-const CONTEXTUAL_MODES = Object.values(HdsThemeContextModesValues);
-const CONTEXTUAL_VALUES = [...CONTEXTUAL_THEMES, ...CONTEXTUAL_MODES];
-class HdsThemeContext extends Component {
-  constructor(owner, args) {
-    super(owner, args);
-    const {
-      context
-    } = args;
-    assert(`@context for "Hds::ThemeContext" must be one of the following: ${CONTEXTUAL_VALUES.join(', ')}; received: ${context}`, CONTEXTUAL_VALUES.includes(context));
-  }
-
-  // Get the class names to apply to the component.
-  get classNames() {
-    const classes = ['hds-theme-context'];
-    const {
-      context
-    } = this.args;
-
-    // add "theme" or "mode" classes based on the @context arguments
-    if (CONTEXTUAL_THEMES.includes(context)) {
-      classes.push(`hds-theme-${context}`);
-    } else if (CONTEXTUAL_MODES.includes(context)) {
-      classes.push(`hds-mode-${context}`);
-    }
-    return classes.join(' ');
-  }
-}
-setComponentTemplate(TEMPLATE, HdsThemeContext);
-
-export { CONTEXTUAL_MODES, CONTEXTUAL_THEMES, CONTEXTUAL_VALUES, HdsThemeContext as default };
-//# sourceMappingURL=index.js.map