@hermes-ui/angular 0.1.6 → 0.1.7

package/button/_properties.buttons.scss

@@ -1,387 +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);
-    }
-  }
-}
+/*
+ * 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);
+    }
+  }
+}