@hermes-ui/angular 0.1.7 → 0.2.0

package/button/_properties.buttons.scss

@@ -9,6 +9,137 @@
 @use '../styles/variables/variables.density' as density;
 @use '../styles/core/tokens/variables.tokens' as tokens;
 
+
+// Sicoob button palette.
+//
+// Mirrors the `app-botao` of the Sicoob apps, which reads the ds-web (`@sicoob/ds-web`) semantic
+// tokens. The values are resolved per mode so Hermes does not need the ds-web stylesheet at
+// runtime, and are exposed as `--hermes-btn-palette-*` so a product can retarget the whole button
+// family from one place.
+//
+// The primary intent is the exception: it derives from the Hermes primary aliases
+// (`--hermes-alias-primary*`), so the theme builder and any product theme keep recoloring buttons.
+// Light and dark come from those aliases, which is why the dark map has no primary entries.
+//
+//   fill - solid background (`color-function-primary-default`, `color-denotative-*-default`)
+//   ink  - legible stroke/text on the page and on the tint (`--cor-*` of app-botao)
+//   tint - soft background of the medium emphasis (`*-lightest`)
+//   on   - text drawn over the fill (`--sobre-*` of app-botao; it inverts in dark mode)
+$palette-light: (
+  'primary-fill': var(--hermes-alias-primary),
+  'primary-ink': var(--hermes-alias-primary-dark),
+  'primary-tint': var(--hermes-alias-primary-tint),
+  'primary-on': var(--hermes-alias-typography-color-100),
+  'success-fill': #7db61c,
+  'success-ink': #415e16,
+  'success-tint': #f8fde8,
+  'success-on': #002a33,
+  'warning-fill': #ffaa2c,
+  'warning-ink': #461202,
+  'warning-tint': #fff9eb,
+  'warning-on': #002a33,
+  'danger-fill': #f7406c,
+  'danger-ink': #a11042,
+  'danger-tint': #fff1f3,
+  'danger-on': #002a33,
+  'disabled-bg': #f0f0f0,
+  'disabled-border': #a4a4a4,
+  'disabled-text': #818181,
+  'hover': #ebedf1,
+);
+
+$palette-dark: (
+  'success-fill': #7db61c,
+  'success-ink': #7db61c,
+  'success-tint': #00252e,
+  'success-on': #00191f,
+  'warning-fill': #ffaa2c,
+  'warning-ink': #ffaa2c,
+  'warning-tint': #00252e,
+  'warning-on': #00191f,
+  'danger-fill': #f7406c,
+  'danger-ink': #f7406c,
+  'danger-tint': #00252e,
+  'danger-on': #00191f,
+  'disabled-bg': #383838,
+  'disabled-border': #818181,
+  'disabled-text': #666666,
+  'hover': #00191f,
+);
+
+@mixin palette($map) {
+  @each $name, $value in $map {
+    --hermes-btn-palette-#{$name}: #{$value};
+  }
+}
+
+@function p($name) {
+  @return var(--hermes-btn-palette-#{$name});
+}
+
+// Strong emphasis: filled with the intent color (`alta`).
+@mixin solid-tokens($prefix, $intent) {
+  #{$prefix}-color: #{p('#{$intent}-on')};
+  #{$prefix}-bg-color: #{p('#{$intent}-fill')};
+  #{$prefix}-border-color: #{p('#{$intent}-fill')};
+  #{$prefix}-hover-bg-color: #{p('#{$intent}-fill')};
+  #{$prefix}-hover-color: #{p('#{$intent}-on')};
+  #{$prefix}-active-bg-color: #{p('#{$intent}-fill')};
+  #{$prefix}-active-color: #{p('#{$intent}-on')};
+  #{$prefix}-disabled-color: #{p('disabled-text')};
+  #{$prefix}-disabled-bg-color: #{p('disabled-bg')};
+  #{$prefix}-disabled-border-color: #{p('disabled-border')};
+  #{$prefix}-checked-bg-color: #{p('#{$intent}-fill')};
+  #{$prefix}-checked-color: #{p('#{$intent}-on')};
+  #{$prefix}-checked-hover-bg-color: #{p('#{$intent}-fill')};
+  #{$prefix}-checked-hover-color: #{p('#{$intent}-on')};
+  #{$prefix}-checked-active-bg-color: #{p('#{$intent}-fill')};
+  #{$prefix}-checked-active-color: #{p('#{$intent}-on')};
+  #{$prefix}-checked-disabled-bg-color: #{p('disabled-bg')};
+  #{$prefix}-checked-disabled-color: #{p('disabled-text')};
+}
+
+// Medium emphasis: tint plus a contour in the intent ink (`media`). Hover and active do not swap
+// colors: the darkening comes from `filter: brightness()` on the button, which keeps the measured
+// contrast ratio of the resting state.
+@mixin tonal-tokens($prefix, $intent) {
+  #{$prefix}-color: #{p('#{$intent}-ink')};
+  #{$prefix}-border-color: #{p('#{$intent}-ink')};
+  #{$prefix}-bg-color: #{p('#{$intent}-tint')};
+  #{$prefix}-hover-bg-color: #{p('#{$intent}-tint')};
+  #{$prefix}-hover-color: #{p('#{$intent}-ink')};
+  #{$prefix}-active-bg-color: #{p('#{$intent}-tint')};
+  #{$prefix}-active-color: #{p('#{$intent}-ink')};
+  #{$prefix}-disabled-color: #{p('disabled-text')};
+  #{$prefix}-disabled-bg-color: #{p('disabled-bg')};
+  #{$prefix}-disabled-border-color: #{p('disabled-border')};
+  #{$prefix}-checked-bg-color: #{p('#{$intent}-fill')};
+  #{$prefix}-checked-color: #{p('#{$intent}-on')};
+  #{$prefix}-checked-hover-bg-color: #{p('#{$intent}-fill')};
+  #{$prefix}-checked-hover-color: #{p('#{$intent}-on')};
+  #{$prefix}-checked-active-bg-color: #{p('#{$intent}-fill')};
+  #{$prefix}-checked-active-color: #{p('#{$intent}-on')};
+  #{$prefix}-checked-disabled-bg-color: #{p('disabled-bg')};
+  #{$prefix}-checked-disabled-color: #{p('disabled-text')};
+}
+
+// Minimal emphasis: no frame, no fill (`minima`). The underline that keeps it recognisable as an
+// action lives in `_buttons.clarity.scss`. Disabled falls back to the disabled box, as in app-botao.
+@mixin minimal-tokens($prefix, $intent) {
+  #{$prefix}-color: #{p('#{$intent}-ink')};
+  #{$prefix}-bg-color: var(--hermes-btn-transparent-bg-color);
+  #{$prefix}-border-color: var(--hermes-btn-transparent-bg-color);
+  #{$prefix}-hover-bg-color: #{p('hover')};
+  #{$prefix}-hover-color: #{p('#{$intent}-ink')};
+  #{$prefix}-active-bg-color: #{p('hover')};
+  #{$prefix}-active-color: #{p('#{$intent}-ink')};
+  #{$prefix}-disabled-color: #{p('disabled-text')};
+  #{$prefix}-disabled-bg-color: #{p('disabled-bg')};
+  #{$prefix}-disabled-border-color: #{p('disabled-border')};
+  #{$prefix}-checked-bg-color: var(--hermes-btn-transparent-bg-color);
+  #{$prefix}-checked-color: #{p('#{$intent}-ink')};
+}
+
 @include mixins.exports('button.properties') {
   @include mixins.root-or-host() {
     --hermes-btn-group-focus-outline: #{tokens.$hermes-alias-object-interaction-outline};
@@ -18,116 +149,75 @@
       // 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-horizontal-padding: #{mixins.baselinePx(16)};
+      --hermes-btn-vertical-padding: #{mixins.baselinePx(4)};
       --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
+      --hermes-btn-padding-sm: 0 #{mixins.baselinePx(8)};
+      --hermes-btn-padding-lg: #{mixins.baselinePx(8)} #{mixins.baselinePx(24)};
+      --hermes-btn-gap: #{mixins.baselinePx(8)};
+
+      // Sizing: the 24 / 32 / 40px ladder of `app-botao` (`pequeno` / `medio` / `grande`)
+      --hermes-btn-height: #{mixins.baselinePx(32)}; // this is standard height
+      --hermes-btn-height-sm: #{mixins.baselinePx(24)}; // this is btn-sm (small) height
+      --hermes-btn-height-lg: #{mixins.baselinePx(40)}; // this is btn-lg (large) height
+      --hermes-btn-min-width: #{mixins.baselinePx(56)};
+      --hermes-btn-min-width-sm: #{mixins.baselinePx(48)};
+      --hermes-btn-min-width-lg: #{mixins.baselinePx(64)};
 
       // 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};
+      // 12px bold in sentence case for the default and small steps, 14px for large, as in
+      // `app-botao`. This overrides the shared BUTTON-12 typography token, which is also used
+      // elsewhere and is left alone. Uppercase is dropped on purpose (DS sheet `button-11`).
+      --hermes-btn-font-size: #{mixins.baselinePx(12)};
+      --hermes-btn-font-size-sm: #{mixins.baselinePx(12)};
+      --hermes-btn-font-size-lg: #{mixins.baselinePx(14)};
+      --hermes-btn-font-weight: 700;
+      --hermes-btn-line-height: 1;
+
+      // Borders: hairline and a short 6px corner, the same as the fields next to it.
+      --hermes-btn-border-radius: #{mixins.baselinePx(6)};
+      --hermes-btn-border-width: #{mixins.baselinePx(1)};
+
+      // Icons
+      --hermes-btn-icon-size: #{mixins.baselinePx(16)};
+      --hermes-btn-icon-size-lg: #{mixins.baselinePx(20)};
+
+      // Interaction
+      --hermes-btn-transition:
+        background-color 240ms cubic-bezier(0.4, 0, 0.2, 1), border-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
+        color 240ms cubic-bezier(0.4, 0, 0.2, 1), filter 240ms cubic-bezier(0.4, 0, 0.2, 1);
+      --hermes-btn-hover-brightness: 0.9;
+      --hermes-btn-active-brightness: 0.85;
+      --hermes-btn-focus-width: #{mixins.baselinePx(2)};
+      --hermes-btn-focus-offset: #{mixins.baselinePx(4)};
 
       // 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};
+      --hermes-btn-appearance-standard-padding: var(--hermes-btn-padding-sm);
+      --hermes-btn-appearance-standard-icon-size: #{mixins.baselinePx(14)};
 
       // 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] {
+      @include palette($palette-light);
+
+      --hermes-btn-focus-color: #{p('primary-ink')};
+
       // 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);
+      // Default button (medium emphasis, primary intent)
+      @include tonal-tokens('--hermes-btn-default', 'primary');
+      @include tonal-tokens('--hermes-btn-default-outline', 'primary');
+
+      // Primary button
+      @include solid-tokens('--hermes-btn-primary', 'primary');
+      @include tonal-tokens('--hermes-btn-primary-outline', 'primary');
 
       // Info button colors
       --hermes-btn-info-color: #{tokens.$hermes-alias-typography-color-100};
@@ -157,89 +247,17 @@
       --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);
+      // Success button
+      @include solid-tokens('--hermes-btn-success', 'success');
+      @include tonal-tokens('--hermes-btn-success-outline', 'success');
+
+      // Danger button
+      @include solid-tokens('--hermes-btn-danger', 'danger');
+      @include tonal-tokens('--hermes-btn-danger-outline', 'danger');
+
+      // Warning button
+      @include solid-tokens('--hermes-btn-warning', 'warning');
+      @include tonal-tokens('--hermes-btn-warning-outline', 'warning');
 
       // Neutral button colors
       --hermes-btn-neutral-color: #{tokens.$hermes-alias-typography-color-100};
@@ -269,35 +287,11 @@
       --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);
+      // Link buttons (minimal emphasis)
+      @include minimal-tokens('--hermes-btn-link', 'primary');
+      --hermes-btn-link-visited-color: #{p('primary-ink')};
+      --hermes-btn-link-visited-hover-color: #{p('primary-ink')};
+      @include minimal-tokens('--hermes-btn-link-primary', 'primary');
 
       // Info Link button colors
       --hermes-btn-link-info-color: #{tokens.$hermes-alias-status-info};
@@ -313,49 +307,11 @@
       --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
+      @include minimal-tokens('--hermes-btn-link-success', 'success');
+      @include minimal-tokens('--hermes-btn-link-warning', 'warning');
+      @include minimal-tokens('--hermes-btn-link-danger', 'danger');
+
+      // Neutral 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);
@@ -384,4 +340,10 @@
       --hermes-btn-inverse-checked-color: var(--hermes-btn-inverse-color);
     }
   }
+
+  // Declared after the light block on purpose: on a nested `[hermes-theme]` element both rules
+  // have the same specificity, so source order decides.
+  [hermes-theme~='dark'] {
+    @include palette($palette-dark);
+  }
 }

package/button/_variables.buttons.scss

@@ -27,6 +27,28 @@ $hermes-btn-height: var(--hermes-btn-height) !default;
 $hermes-btn-height-sm: var(--hermes-btn-height-sm) !default;
 
 $hermes-btn-font-size: var(--hermes-btn-font-size) !default;
+$hermes-btn-font-size-sm: var(--hermes-btn-font-size-sm) !default;
+$hermes-btn-font-size-lg: var(--hermes-btn-font-size-lg) !default;
+$hermes-btn-font-weight: var(--hermes-btn-font-weight) !default;
+$hermes-btn-line-height: var(--hermes-btn-line-height) !default;
+
+// Size ladder: sm / default / lg (24px / 32px / 40px)
+$hermes-btn-height-lg: var(--hermes-btn-height-lg) !default;
+$hermes-btn-padding-sm: var(--hermes-btn-padding-sm) !default;
+$hermes-btn-padding-lg: var(--hermes-btn-padding-lg) !default;
+$hermes-btn-min-width: var(--hermes-btn-min-width) !default;
+$hermes-btn-min-width-sm: var(--hermes-btn-min-width-sm) !default;
+$hermes-btn-min-width-lg: var(--hermes-btn-min-width-lg) !default;
+$hermes-btn-icon-size: var(--hermes-btn-icon-size) !default;
+$hermes-btn-icon-size-lg: var(--hermes-btn-icon-size-lg) !default;
+
+// Interaction
+$hermes-btn-transition: var(--hermes-btn-transition) !default;
+$hermes-btn-hover-brightness: var(--hermes-btn-hover-brightness) !default;
+$hermes-btn-active-brightness: var(--hermes-btn-active-brightness) !default;
+$hermes-btn-focus-width: var(--hermes-btn-focus-width) !default;
+$hermes-btn-focus-offset: var(--hermes-btn-focus-offset) !default;
+$hermes-btn-focus-color: var(--hermes-btn-focus-color) !default;
 
 $hermes-btn-border-radius: var(--hermes-btn-border-radius) !default;
 $hermes-btn-border-width: var(--hermes-btn-border-width) !default;

package/fesm2022/hermes-ui-angular-accordion.mjs

@@ -7,7 +7,7 @@ import { IfExpandService, WillyWonka, OompaLoompa } from '@hermes-ui/angular/uti
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@hermes-ui/angular/icon';
-import { ClarityIcons, angleIcon, HermesIcon } from '@hermes-ui/angular/icon';
+import { HermesIcons, angleIcon, HermesIcon } from '@hermes-ui/angular/icon';
 
 /*
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
@@ -313,7 +313,7 @@ const declarations = [
 ];
 class HermesAccordionModule {
     constructor() {
-        ClarityIcons.addIcons(angleIcon);
+        HermesIcons.addIcons(angleIcon);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: HermesAccordionModule, declarations: [HermesAccordion,