@hermes-ui/angular 0.1.4

package/button/_mixins.buttons.scss

@@ -0,0 +1,241 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use 'sass:meta';
+@use '../styles/mixins';
+@use 'variables.buttons' as buttons-variables;
+@use '../styles/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+@function getSassButtonColor($type: default, $property: null) {
+  @if not $property {
+    @return null;
+  }
+  @if $type == default {
+    @return buttons-variables.lookupFromDefaultButtonColors($property);
+  }
+  @if $type == default-outline {
+    @return buttons-variables.lookupFromDefaultOutlineButtonColors($property);
+  }
+  @if $type == info {
+    @return buttons-variables.lookupFromInfoButtonColors($property);
+  }
+  @if $type == info-outline {
+    @return buttons-variables.lookupFromInfoOutlineButtonColors($property);
+  }
+  @if $type == primary {
+    @return buttons-variables.lookupFromPrimaryButtonColors($property);
+  }
+  @if $type == primary-outline {
+    @return buttons-variables.lookupFromPrimaryOutlineButtonColors($property);
+  }
+  @if $type == success {
+    @return buttons-variables.lookupFromSuccessButtonColors($property);
+  }
+  @if $type == success-outline {
+    @return buttons-variables.lookupFromSuccessOutlineButtonColors($property);
+  }
+  @if $type == danger {
+    @return buttons-variables.lookupFromDangerButtonColors($property);
+  }
+  @if $type == danger-outline {
+    @return buttons-variables.lookupFromDangerOutlineButtonColors($property);
+  }
+  @if $type == neutral {
+    @return buttons-variables.lookupFromNeutralButtonColors($property);
+  }
+  @if $type == neutral-outline {
+    @return buttons-variables.lookupFromNeutralOutlineButtonColors($property);
+  }
+  @if $type == warning {
+    @return buttons-variables.lookupFromWarningButtonColors($property);
+  }
+  @if $type == warning-outline {
+    @return buttons-variables.lookupFromWarningOutlineButtonColors($property);
+  }
+  @if $type == link {
+    @return buttons-variables.lookupFromLinkButtonColors($property);
+  }
+  @if $type == link-primary {
+    @return buttons-variables.lookupFromLinkPrimaryButtonColors($property);
+  }
+  @if $type == link-info {
+    @return buttons-variables.lookupFromLinkInfoButtonColors($property);
+  }
+  @if $type == link-success {
+    @return buttons-variables.lookupFromLinkSuccessButtonColors($property);
+  }
+  @if $type == link-warning {
+    @return buttons-variables.lookupFromLinkWarningButtonColors($property);
+  }
+  @if $type == link-danger {
+    @return buttons-variables.lookupFromLinkDangerButtonColors($property);
+  }
+  @if $type == link-neutral {
+    @return buttons-variables.lookupFromLinkNeutralButtonColors($property);
+  }
+  @if $type == inverse {
+    @return buttons-variables.lookupFromInverseButtonColors($property);
+  }
+  @if $type == icon {
+    @return buttons-variables.lookupFromIconButtonColors($property);
+  }
+
+  @return null;
+}
+
+@mixin button-css-var($button-type: default, $style: null, $styleNickname: $style) {
+  @if $style {
+    #{$style}: getSassButtonColor($button-type, $styleNickname);
+  }
+}
+@mixin populateButtonProperties($button-type: default) {
+  @include button-css-var($button-type, border-color);
+  @include button-css-var($button-type, background-color, bg-color);
+  @include button-css-var($button-type, color);
+
+  hermes-icon,
+  hermes-icon {
+    @include button-css-var($button-type, color);
+
+    &:not([size]) {
+      @include mixins.min-equilateral(density.$hermes-base-icon-size-s);
+    }
+  }
+
+  &:hover {
+    @include button-css-var($button-type, background-color, hover-bg-color);
+    @include button-css-var($button-type, color, hover-color);
+
+    hermes-icon,
+    hermes-icon {
+      @include button-css-var($button-type, color, hover-color);
+    }
+  }
+
+  &:active {
+    @include button-css-var($button-type, background-color, active-bg-color);
+    @include button-css-var($button-type, color, active-color);
+
+    hermes-icon,
+    hermes-icon {
+      @include button-css-var($button-type, color, active-color);
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    @include button-css-var($button-type, color, disabled-color);
+
+    cursor: not-allowed;
+
+    @include button-css-var($button-type, background-color, disabled-bg-color);
+    @include button-css-var($button-type, border-color, disabled-border-color);
+
+    hermes-icon,
+    hermes-icon {
+      @include button-css-var($button-type, color, disabled-color);
+    }
+  }
+}
+@mixin btn-checked-styles($button-type: default, $type: checkbox) {
+  // add semantic prop: group-checked-font-color
+  input[type='#{$type}']:checked + label {
+    @include button-css-var($button-type, background-color, checked-bg-color);
+    @include button-css-var($button-type, color, checked-color);
+
+    // override icon colors on inverted backgrounds
+    & > hermes-icon,
+    & > hermes-icon {
+      @include button-css-var($button-type, color, checked-color);
+    }
+  }
+
+  input[type='#{$type}']:checked:hover + label {
+    @include button-css-var($button-type, background-color, checked-hover-bg-color);
+    @include button-css-var($button-type, color, checked-hover-color);
+
+    // override icon colors on inverted backgrounds
+    & > hermes-icon,
+    & > hermes-icon {
+      @include button-css-var($button-type, color, checked-hover-color);
+    }
+  }
+
+  input[type='#{$type}']:checked:active + label {
+    @include button-css-var($button-type, background-color, checked-active-bg-color);
+    @include button-css-var($button-type, color, checked-active-color);
+
+    // override icon colors on inverted backgrounds
+    & > hermes-icon,
+    & > hermes-icon {
+      @include button-css-var($button-type, color, checked-active-color);
+    }
+  }
+
+  &.disabled input[type='#{$type}']:checked + label,
+  &:disabled input[type='#{$type}']:checked + label {
+    @include button-css-var($button-type, color, checked-disabled-color);
+    @include button-css-var($button-type, background-color, checked-disabled-bg-color);
+    // override icon colors on inverted backgrounds
+    & > hermes-icon,
+    & > hermes-icon {
+      @include button-css-var($button-type, color, checked-disabled-color);
+    }
+  }
+}
+@mixin btn-nowrap() {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+@mixin btn-min-max-widths() {
+  min-width: tokens.$hermes-global-space-14;
+  max-width: mixins.baselinePx(360);
+}
+@mixin btn-text-properties() {
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+@mixin btn-default-border-styles() {
+  border: buttons-variables.$hermes-btn-border-width solid;
+  border-radius: buttons-variables.$hermes-btn-border-radius;
+}
+@mixin btn-appearance() {
+  cursor: pointer;
+  display: inline-flex;
+  gap: buttons-variables.$hermes-btn-gap;
+  align-items: center;
+  place-content: center;
+
+  // Overrides a Fix for IOS in BS4 _normalize.scss (~ln 330)
+  // `!important` is to override specificity in this instance
+  // But we wanted to preserve the normalize fix in non-Clarity buttons for iOS
+  appearance: none !important;
+}
+@mixin btn-sm-appearance() {
+  @include mixins.generate-typography-token('BUTTON-11-SMALL');
+
+  height: buttons-variables.$hermes-btn-appearance-standard-height;
+  padding: buttons-variables.$hermes-btn-appearance-standard-padding;
+}
+@mixin generateButton() {
+  @include btn-appearance();
+  @include btn-default-border-styles();
+  @include btn-min-max-widths();
+  @include btn-nowrap();
+  @include btn-text-properties();
+}
+@mixin square-off-btngroup-btns($dir: left) {
+  border-top-#{$dir}-radius: 0;
+  border-bottom-#{$dir}-radius: 0;
+}

package/button/_properties.buttons.scss

@@ -0,0 +1,387 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../styles/mixins';
+@use '../styles/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('button.properties') {
+  @include mixins.root-or-host() {
+    --hermes-btn-group-focus-outline: #{tokens.$hermes-alias-object-interaction-outline};
+
+    &,
+    [hermes-density] {
+      // Spacing
+      --hermes-btn-vertical-margin: #{density.$hermes-base-vertical-offset-s};
+      --hermes-btn-horizontal-margin: #{density.$hermes-base-gap-m};
+      --hermes-btn-horizontal-padding: #{density.$hermes-base-horizontal-offset-l};
+      --hermes-btn-vertical-padding: 0;
+      --hermes-btn-padding: var(--hermes-btn-vertical-padding) var(--hermes-btn-horizontal-padding);
+      --hermes-btn-gap: #{density.$hermes-base-gap-s};
+
+      // Sizing
+      --hermes-btn-height: #{density.$hermes-base-row-height-m}; // this is standard height
+      --hermes-btn-height-sm: #{density.$hermes-base-row-height-s}; // this is btn-sm (small) height
+
+      // Typography
+      // shadcn text-sm (14px) for the default button text, overriding the shared BUTTON-12
+      // typography token (font-size-button, 12px) that .btn otherwise pulls in - that token
+      // is also used elsewhere in this file, so it's left alone and only font-size is
+      // overridden here. Compact keeps the original 12px via the density-invariant raw
+      // token (not density.$hermes-base-typography-font-size-button: that's a var(...)
+      // passthrough that would just resolve to compact's own value again).
+      --hermes-btn-font-size: #{mixins.baselinePx(14)};
+
+      // Borders
+      // shadcn-style rounding (rounded-md, 8px) instead of Clarity's sharp 4px corners.
+      // Uses mixins.baselinePx(8), not a bare `0.5rem`: this codebase's rem scale is
+      // calibrated to a 20px root font-size (--hermes-global-base: 20), so a literal
+      // 0.5rem renders as 10px, not 8px.
+      --hermes-btn-border-radius: #{mixins.baselinePx(8)};
+      --hermes-btn-border-width: #{tokens.$hermes-global-space-1};
+
+      // Standard button appearance - overrideable but not advertised!
+      --hermes-btn-appearance-standard-height: var(--hermes-btn-height-sm);
+      --hermes-btn-appearance-standard-padding: var(--hermes-btn-padding);
+      --hermes-btn-appearance-standard-icon-size: #{density.$hermes-base-icon-size-s};
+
+      // form-style button appearance styles - overrideable but not advertised!
+      --hermes-btn-appearance-form-height: var(--hermes-btn-height);
+      --hermes-btn-appearance-form-padding: var(--hermes-btn-padding);
+    }
+
+    [hermes-density='compact'] {
+      --hermes-btn-font-size: #{tokens.$hermes-global-space-6};
+      // Compact buttons are shorter (~20-24px), so the default 8px radius reads as a
+      // pill/circle instead of a rounded rectangle. Scale it down to match.
+      --hermes-btn-border-radius: #{mixins.baselinePx(4)};
+    }
+
+    &,
+    [hermes-theme] {
+      // Shared colors
+      --hermes-btn-transparent-bg-color: #{tokens.$hermes-alias-object-opacity-0};
+      --hermes-btn-outline-bg-color: var(--hermes-btn-transparent-bg-color);
+
+      // Default button colors
+      --hermes-btn-default-color: #{tokens.$hermes-alias-primary};
+      --hermes-btn-default-border-color: var(--hermes-btn-default-color);
+      --hermes-btn-default-bg-color: var(--hermes-btn-outline-bg-color);
+      --hermes-btn-default-hover-bg-color: #{tokens.$hermes-alias-object-interaction-primary-secondary-hover};
+      --hermes-btn-default-hover-color: #{tokens.$hermes-alias-typography-primary-hover};
+      --hermes-btn-default-active-color: var(--hermes-btn-default-color);
+      --hermes-btn-default-active-bg-color: var(--hermes-btn-outline-bg-color);
+      --hermes-btn-default-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-default-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
+      --hermes-btn-default-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-default-checked-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-default-checked-bg-color: var(--hermes-btn-default-color);
+      --hermes-btn-default-checked-hover-color: var(--hermes-btn-default-checked-color);
+      --hermes-btn-default-checked-hover-bg-color: #{tokens.$hermes-alias-object-interaction-info-hover};
+      --hermes-btn-default-checked-active-color: var(--hermes-btn-default-checked-color);
+      --hermes-btn-default-checked-active-bg-color: var(--hermes-btn-default-color);
+      --hermes-btn-default-checked-disabled-color: #{tokens.$hermes-alias-typography-disabled-button};
+      --hermes-btn-default-checked-disabled-bg-color: #{tokens.$hermes-alias-status-disabled};
+
+      // Default outline button
+      --hermes-btn-default-outline-color: #{tokens.$hermes-alias-primary};
+      --hermes-btn-default-outline-border-color: var(--hermes-btn-primary-outline-color);
+      --hermes-btn-default-outline-bg-color: var(--hermes-btn-outline-bg-color);
+      --hermes-btn-default-outline-hover-bg-color: #{tokens.$hermes-alias-object-interaction-primary-secondary-hover};
+      --hermes-btn-default-outline-hover-color: #{tokens.$hermes-alias-typography-primary-hover};
+      --hermes-btn-default-outline-active-color: var(--hermes-btn-default-outline-color);
+      --hermes-btn-default-outline-active-bg-color: var(--hermes-btn-outline-bg-color);
+      --hermes-btn-default-outline-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-default-outline-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
+      --hermes-btn-default-outline-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-default-outline-checked-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-default-outline-checked-bg-color: var(--hermes-btn-default-outline-bg-color);
+
+      // Primary button colors
+      --hermes-btn-primary-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-primary-bg-color: #{tokens.$hermes-alias-primary};
+      --hermes-btn-primary-border-color: #{tokens.$hermes-alias-primary};
+      --hermes-btn-primary-hover-bg-color: #{tokens.$hermes-alias-object-interaction-primary-hover};
+      --hermes-btn-primary-hover-color: var(--hermes-btn-primary-color);
+      --hermes-btn-primary-active-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-primary-active-bg-color: #{tokens.$hermes-alias-object-interaction-primary-active};
+      --hermes-btn-primary-disabled-color: #{tokens.$hermes-alias-typography-disabled-button};
+      --hermes-btn-primary-disabled-bg-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-primary-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-primary-checked-bg-color: #{tokens.$hermes-alias-primary};
+      --hermes-btn-primary-checked-color: #{tokens.$hermes-alias-typography-color-100};
+
+      // Primary outline button
+      --hermes-btn-primary-outline-color: #{tokens.$hermes-alias-primary};
+      --hermes-btn-primary-outline-border-color: var(--hermes-btn-primary-outline-color);
+      --hermes-btn-primary-outline-bg-color: var(--hermes-btn-outline-bg-color);
+      --hermes-btn-primary-outline-hover-bg-color: #{tokens.$hermes-alias-object-interaction-primary-secondary-hover};
+      --hermes-btn-primary-outline-hover-color: #{tokens.$hermes-alias-typography-primary-hover};
+      --hermes-btn-primary-outline-active-bg-color: var(--hermes-btn-outline-bg-color);
+      --hermes-btn-primary-outline-active-color: var(--hermes-btn-primary-outline-color);
+      --hermes-btn-primary-outline-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-primary-outline-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
+      --hermes-btn-primary-outline-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-primary-outline-checked-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-primary-outline-checked-bg-color: var(--hermes-btn-default-outline-bg-color);
+
+      // Info button colors
+      --hermes-btn-info-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-info-bg-color: #{tokens.$hermes-alias-status-info};
+      --hermes-btn-info-border-color: #{tokens.$hermes-alias-status-info};
+      --hermes-btn-info-hover-bg-color: #{tokens.$hermes-alias-object-interaction-info-hover};
+      --hermes-btn-info-hover-color: var(--hermes-btn-info-color);
+      --hermes-btn-info-active-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-info-active-bg-color: #{tokens.$hermes-alias-object-interaction-info-active};
+      --hermes-btn-info-disabled-color: #{tokens.$hermes-alias-typography-disabled-button};
+      --hermes-btn-info-disabled-bg-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-info-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-info-checked-bg-color: #{tokens.$hermes-alias-status-info};
+      --hermes-btn-info-checked-color: #{tokens.$hermes-alias-typography-color-100};
+
+      // Info outline button
+      --hermes-btn-info-outline-color: #{tokens.$hermes-alias-status-info};
+      --hermes-btn-info-outline-border-color: var(--hermes-btn-info-outline-color);
+      --hermes-btn-info-outline-bg-color: var(--hermes-btn-outline-bg-color);
+      --hermes-btn-info-outline-hover-bg-color: #{tokens.$hermes-alias-object-interaction-info-secondary-hover};
+      --hermes-btn-info-outline-hover-color: #{tokens.$hermes-alias-typography-info-hover};
+      --hermes-btn-info-outline-active-bg-color: var(--hermes-btn-outline-bg-color);
+      --hermes-btn-info-outline-active-color: var(--hermes-btn-info-outline-color);
+      --hermes-btn-info-outline-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-info-outline-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
+      --hermes-btn-info-outline-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-info-outline-checked-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-info-outline-checked-bg-color: var(--hermes-btn-default-outline-bg-color);
+
+      // Success button colors
+      --hermes-btn-success-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-success-bg-color: #{tokens.$hermes-alias-status-success};
+      --hermes-btn-success-border-color: var(--hermes-btn-success-bg-color);
+      --hermes-btn-success-hover-bg-color: #{tokens.$hermes-alias-object-interaction-success-hover};
+      --hermes-btn-success-hover-color: var(--hermes-btn-success-color);
+      --hermes-btn-success-active-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-success-active-bg-color: var(--hermes-alias-object-interaction-success-active);
+      --hermes-btn-success-disabled-color: #{tokens.$hermes-alias-typography-disabled-button};
+      --hermes-btn-success-disabled-bg-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-success-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-success-checked-bg-color: var(--hermes-btn-success-color);
+      --hermes-btn-success-checked-color: var(--hermes-btn-success-bg-color);
+
+      // Success outline button colors
+      --hermes-btn-success-outline-color: #{tokens.$hermes-alias-status-success};
+      --hermes-btn-success-outline-bg-color: var(--hermes-btn-outline-bg-color);
+      --hermes-btn-success-outline-border-color: #{tokens.$hermes-alias-status-success};
+      --hermes-btn-success-outline-hover-bg-color: #{tokens.$hermes-alias-object-interaction-success-secondary-hover};
+      --hermes-btn-success-outline-hover-color: #{tokens.$hermes-alias-typography-success-hover};
+      --hermes-btn-success-outline-active-bg-color: var(--hermes-btn-success-outline-bg-color);
+      --hermes-btn-success-outline-active-color: var(--hermes-btn-success-outline-color);
+      --hermes-btn-success-outline-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-success-outline-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
+      --hermes-btn-success-outline-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-success-outline-checked-bg-color: var(--hermes-btn-success-outline-bg-color);
+      --hermes-btn-success-outline-checked-color: var(--hermes-btn-success-outline-color);
+
+      // Danger button colors
+      --hermes-btn-danger-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-danger-bg-color: #{tokens.$hermes-alias-status-danger};
+      --hermes-btn-danger-border-color: var(--hermes-btn-danger-bg-color);
+      --hermes-btn-danger-hover-bg-color: #{tokens.$hermes-alias-object-interaction-danger-hover};
+      --hermes-btn-danger-hover-color: var(--hermes-btn-danger-color);
+      --hermes-btn-danger-active-bg-color: var(--hermes-alias-object-interaction-danger-active);
+      --hermes-btn-danger-active-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-danger-disabled-color: #{tokens.$hermes-alias-typography-disabled-button};
+      --hermes-btn-danger-disabled-bg-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-danger-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-danger-checked-bg-color: var(--hermes-btn-danger-bg-color);
+      --hermes-btn-danger-checked-color: var(--hermes-btn-danger-color);
+
+      // Danger outline button colors
+      --hermes-btn-danger-outline-color: #{tokens.$hermes-alias-status-danger};
+      --hermes-btn-danger-outline-bg-color: var(--hermes-btn-outline-bg-color);
+      --hermes-btn-danger-outline-border-color: #{tokens.$hermes-alias-status-danger};
+      --hermes-btn-danger-outline-hover-bg-color: #{tokens.$hermes-alias-object-interaction-danger-secondary-hover};
+      --hermes-btn-danger-outline-hover-color: #{tokens.$hermes-alias-typography-danger-hover};
+      --hermes-btn-danger-outline-active-bg-color: var(--hermes-btn-danger-outline-bg-color);
+      --hermes-btn-danger-outline-active-color: var(--hermes-btn-danger-outline-color);
+      --hermes-btn-danger-outline-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-danger-outline-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
+      --hermes-btn-danger-outline-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-danger-outline-checked-bg-color: var(--hermes-btn-danger-outline-bg-color);
+      --hermes-btn-danger-outline-checked-color: var(--hermes-btn-danger-outline-color);
+
+      // Warning button colors
+      --hermes-btn-warning-color: #{tokens.$hermes-alias-typography-color-black};
+      --hermes-btn-warning-bg-color: #{tokens.$hermes-alias-status-warning};
+      --hermes-btn-warning-border-color: var(--hermes-btn-warning-bg-color);
+      --hermes-btn-warning-hover-bg-color: #{tokens.$hermes-alias-object-interaction-warning-hover};
+      --hermes-btn-warning-hover-color: var(--hermes-btn-warning-color);
+      --hermes-btn-warning-active-bg-color: var(--hermes-alias-object-interaction-warning-active);
+      --hermes-btn-warning-active-color: var(--hermes-btn-warning-color);
+      --hermes-btn-warning-disabled-color: #{tokens.$hermes-alias-typography-disabled-button};
+      --hermes-btn-warning-disabled-bg-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-warning-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-warning-checked-bg-color: var(--hermes-btn-warning-bg-color);
+      --hermes-btn-warning-checked-color: var(--hermes-btn-warning-color);
+
+      // Warning outline button colors
+      --hermes-btn-warning-outline-color: #{tokens.$hermes-alias-status-warning-dark};
+      --hermes-btn-warning-outline-bg-color: var(--hermes-btn-outline-bg-color);
+      --hermes-btn-warning-outline-border-color: #{tokens.$hermes-alias-status-warning-dark};
+      --hermes-btn-warning-outline-hover-bg-color: #{tokens.$hermes-alias-object-interaction-warning-secondary-hover};
+      --hermes-btn-warning-outline-hover-color: #{tokens.$hermes-alias-typography-warning-hover};
+      --hermes-btn-warning-outline-active-bg-color: var(--hermes-btn-warning-outline-bg-color);
+      --hermes-btn-warning-outline-active-color: var(--hermes-btn-warning-outline-color);
+      --hermes-btn-warning-outline-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-warning-outline-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
+      --hermes-btn-warning-outline-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-warning-outline-checked-bg-color: var(--hermes-btn-warning-outline-bg-color);
+      --hermes-btn-warning-outline-checked-color: var(--hermes-btn-warning-outline-color);
+
+      // Neutral button colors
+      --hermes-btn-neutral-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-btn-neutral-bg-color: #{tokens.$hermes-alias-status-neutral};
+      --hermes-btn-neutral-border-color: var(--hermes-btn-neutral-bg-color);
+      --hermes-btn-neutral-hover-bg-color: #{tokens.$hermes-alias-object-interaction-neutral-hover};
+      --hermes-btn-neutral-hover-color: var(--hermes-btn-neutral-color);
+      --hermes-btn-neutral-active-bg-color: var(--hermes-alias-object-interaction-neutral-active);
+      --hermes-btn-neutral-active-color: var(--hermes-btn-neutral-color);
+      --hermes-btn-neutral-disabled-color: #{tokens.$hermes-alias-typography-disabled-button};
+      --hermes-btn-neutral-disabled-bg-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-neutral-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-neutral-checked-bg-color: var(--hermes-btn-neutral-bg-color);
+      --hermes-btn-neutral-checked-color: var(--hermes-btn-neutral-color);
+
+      // Neutral outline button colors
+      --hermes-btn-neutral-outline-color: #{tokens.$hermes-alias-status-neutral};
+      --hermes-btn-neutral-outline-bg-color: #{tokens.$hermes-alias-object-opacity-0};
+      --hermes-btn-neutral-outline-border-color: var(--hermes-btn-neutral-outline-color);
+      --hermes-btn-neutral-outline-hover-color: #{tokens.$hermes-alias-typography-neutral-hover};
+      --hermes-btn-neutral-outline-hover-bg-color: #{tokens.$hermes-alias-object-interaction-neutral-secondary-hover};
+      --hermes-btn-neutral-outline-active-color: #{tokens.$hermes-alias-status-neutral};
+      --hermes-btn-neutral-outline-active-bg-color: #{tokens.$hermes-alias-object-opacity-0};
+      --hermes-btn-neutral-outline-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-neutral-outline-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
+      --hermes-btn-neutral-outline-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-neutral-outline-checked-bg-color: var(--hermes-btn-neutral-outline-bg-color);
+      --hermes-btn-neutral-outline-checked-color: var(--hermes-btn-neutral-outline-color);
+
+      // Link button colors
+      --hermes-btn-link-color: #{tokens.$hermes-alias-primary};
+      --hermes-btn-link-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-active-color: var(--hermes-btn-link-color);
+      --hermes-btn-link-active-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-hover-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-hover-color: #{tokens.$hermes-alias-typography-primary-hover};
+      --hermes-btn-link-visited-color: #{tokens.$hermes-alias-typography-link-color-visited};
+      --hermes-btn-link-visited-hover-color: #{tokens.$hermes-alias-typography-link-color-visited-hover};
+      --hermes-btn-link-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-link-disabled-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-disabled-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-checked-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-checked-color: var(--hermes-btn-link-color);
+
+      // Primary Link button colors
+      --hermes-btn-link-primary-color: #{tokens.$hermes-alias-primary};
+      --hermes-btn-link-primary-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-primary-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-primary-hover-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-primary-hover-color: #{tokens.$hermes-alias-typography-primary-hover};
+      --hermes-btn-link-primary-active-color: var(--hermes-btn-link-primary-color);
+      --hermes-btn-link-primary-active-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-primary-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-link-primary-disabled-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-primary-disabled-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-primary-checked-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-primary-checked-color: var(--hermes-btn-link-primary-color);
+
+      // Info Link button colors
+      --hermes-btn-link-info-color: #{tokens.$hermes-alias-status-info};
+      --hermes-btn-link-info-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-info-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-info-hover-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-info-hover-color: #{tokens.$hermes-alias-typography-info-hover};
+      --hermes-btn-link-info-active-color: var(--hermes-btn-link-info-color);
+      --hermes-btn-link-info-active-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-info-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-link-info-disabled-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-info-disabled-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-info-checked-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-info-checked-color: var(--hermes-btn-link-info-color);
+
+      // Success Link button colors
+      --hermes-btn-link-success-color: #{tokens.$hermes-alias-status-success};
+      --hermes-btn-link-success-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-success-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-success-hover-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-success-hover-color: #{tokens.$hermes-alias-typography-success-hover};
+      --hermes-btn-link-success-active-color: var(--hermes-btn-link-success-color);
+      --hermes-btn-link-success-active-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-success-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-link-success-disabled-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-success-disabled-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-success-checked-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-success-checked-color: var(--hermes-btn-link-success-color);
+
+      // Warning Link button colors
+      --hermes-btn-link-warning-color: #{tokens.$hermes-alias-status-warning-dark};
+      --hermes-btn-link-warning-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-warning-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-warning-hover-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-warning-hover-color: #{tokens.$hermes-alias-typography-warning-hover};
+      --hermes-btn-link-warning-active-color: var(--hermes-btn-link-warning-color);
+      --hermes-btn-link-warning-active-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-warning-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-link-warning-disabled-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-warning-disabled-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-warning-checked-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-warning-checked-color: var(--hermes-btn-link-warning-color);
+
+      // Danger Link button colors
+      --hermes-btn-link-danger-color: #{tokens.$hermes-alias-status-danger};
+      --hermes-btn-link-danger-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-danger-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-danger-hover-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-danger-hover-color: #{tokens.$hermes-alias-typography-danger-hover};
+      --hermes-btn-link-danger-active-color: var(--hermes-btn-link-danger-color);
+      --hermes-btn-link-danger-active-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-danger-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-link-danger-disabled-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-danger-disabled-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-danger-checked-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-danger-checked-color: var(--hermes-btn-link-danger-color);
+
+      // Danger Link button colors
+      --hermes-btn-link-neutral-color: #{tokens.$hermes-alias-status-neutral};
+      --hermes-btn-link-neutral-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-neutral-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-neutral-hover-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-neutral-hover-color: #{tokens.$hermes-alias-typography-neutral-hover};
+      --hermes-btn-link-neutral-active-color: var(--hermes-btn-link-neutral-color);
+      --hermes-btn-link-neutral-active-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-neutral-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-link-neutral-disabled-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-neutral-disabled-border-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-neutral-checked-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-link-neutral-checked-color: var(--hermes-btn-link-neutral-color);
+
+      // Inverse button colors
+      --hermes-btn-inverse-color: #{tokens.$hermes-global-color-white};
+      --hermes-btn-inverse-border-color: #{tokens.$hermes-global-color-white};
+      --hermes-btn-inverse-bg-color: var(--hermes-btn-transparent-bg-color);
+      --hermes-btn-inverse-hover-bg-color: #{tokens.$hermes-alias-object-interaction-inverse-hover};
+      --hermes-btn-inverse-hover-color: var(--hermes-btn-inverse-color); // var(--hermes-color-neutral-0);
+      --hermes-btn-inverse-active-bg-color: var(--hermes-alias-object-interaction-inverse-active);
+      --hermes-btn-inverse-active-color: #{tokens.$hermes-global-color-white};
+      --hermes-btn-inverse-disabled-color: #{tokens.$hermes-alias-typography-disabled};
+      --hermes-btn-inverse-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
+      --hermes-btn-inverse-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
+      --hermes-btn-inverse-checked-bg-color: var(--hermes-btn-inverse-bg-color);
+      --hermes-btn-inverse-checked-color: var(--hermes-btn-inverse-color);
+    }
+  }
+}

package/button/_properties.toggles.scss

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../styles/mixins';
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('toggle.properties') {
+  @include mixins.root-or-host() {
+    &,
+    [hermes-theme] {
+      // colors
+      --hermes-toggle-bg-color-off: #{tokens.$hermes-alias-status-neutral};
+      --hermes-toggle-bg-color-on: #{tokens.$hermes-alias-status-success};
+      --hermes-toggle-handle-bg-color: #{tokens.$hermes-alias-object-interaction-background};
+      --hermes-toggle-handle-border-color: var(--hermes-toggle-bg-color-off);
+      --hermes-toggle-handle-border-color-on: var(--hermes-toggle-bg-color-on);
+
+      // disabled colors
+      --hermes-toggle-disabled-default-border-color: #{tokens.$hermes-alias-object-interaction-color-disabled};
+      --hermes-toggle-disabled-default-handle-color: #{tokens.$hermes-alias-object-interaction-background};
+      --hermes-toggle-disabled-off-border-color: var(--hermes-toggle-disabled-default-border-color);
+      --hermes-toggle-disabled-off-bg-color: var(--hermes-toggle-disabled-default-handle-color);
+
+      // Also sets disabled/on inner part of handle circle.
+      --hermes-toggle-disabled-off-handle-border-color: var(--hermes-toggle-disabled-default-border-color);
+      --hermes-toggle-disabled-on-border-color: var(--hermes-toggle-disabled-default-border-color);
+      --hermes-toggle-disabled-on-bg-color: var(--hermes-toggle-disabled-default-border-color);
+      --hermes-toggle-disabled-on-handle-border-color: var(--hermes-toggle-disabled-default-border-color);
+    }
+  }
+}