@hermes-ui/angular 0.1.4

package/emphasis/alert/_properties.alert.scss

@@ -0,0 +1,183 @@
+/*
+ * 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;
+@use '../../styles/variables/variables.density' as density;
+
+@include mixins.exports('alert.properties') {
+  @include mixins.root-or-host() {
+    --hermes-app-alert-pager-width: #{mixins.baselinePx(144)};
+
+    &,
+    & [hermes-density] {
+      /* Dimensions & Layout */
+      --hermes-alert-borderradius: #{density.$hermes-base-border-radius-s};
+    }
+
+    &,
+    & [hermes-theme] {
+      /* Alert Color Properties */
+
+      // Usage: ./_alert.clarity.scss
+      // Used for 'toggle' button for dropdowns on the right side of an alert
+      --hermes-alert-action-color: #{tokens.$hermes-alias-typography-color-500};
+      --hermes-alert-action-active-color: #{tokens.$hermes-alias-object-interaction-color-active};
+
+      // standard alert close
+      --hermes-alert-close-icon-color: var(--hermes-alert-action-color);
+      --hermes-alert-close-icon-hover-color: var(--hermes-alert-action-active-color);
+
+      // Close icon colors for APP-LEVEL ALERTS
+      --hermes-app-level-alert-color: #{tokens.$hermes-global-color-white};
+      --hermes-app-alert-close-icon-color: var(--hermes-app-level-alert-color);
+
+      // Info type
+      // Usage: ./_alert.clarity.scss
+      --hermes-alert-info-bg-color: #{tokens.$hermes-alias-status-info-tint};
+      --hermes-alert-info-font-color: #{tokens.$hermes-alias-typography-color-500};
+      --hermes-alert-info-border-color: #{tokens.$hermes-alias-status-info};
+      --hermes-alert-info-icon-color: var(--hermes-alert-info-font-color);
+      --hermes-alert-info-close-icon-color: var(--hermes-alert-info-font-color);
+      --hermes-alert-info-action-color: var(--hermes-alert-info-font-color);
+      --hermes-alert-info-action-active-color: var(--hermes-alert-action-active-color);
+      --hermes-alert-info-close-icon-hover-color: var(--hermes-alert-close-icon-hover-color);
+
+      // Success type
+      // Usage: ./_alert.clarity.scss
+      --hermes-alert-success-bg-color: #{tokens.$hermes-alias-status-success-tint};
+      --hermes-alert-success-font-color: #{tokens.$hermes-alias-typography-color-500};
+      --hermes-alert-success-border-color: #{tokens.$hermes-alias-status-success};
+      --hermes-alert-success-icon-color: var(--hermes-alert-success-font-color);
+      --hermes-alert-success-close-icon-color: var(--hermes-alert-success-font-color);
+      --hermes-alert-success-action-color: var(--hermes-alert-success-font-color);
+      --hermes-alert-success-action-active-color: var(--hermes-alert-action-active-color);
+      --hermes-alert-success-close-icon-hover-color: var(--hermes-alert-close-icon-hover-color);
+
+      // Warning type
+      // Usage: ./_alert.clarity.scss
+      --hermes-alert-warning-bg-color: #{tokens.$hermes-alias-status-warning-tint};
+      --hermes-alert-warning-font-color: #{tokens.$hermes-alias-typography-color-500};
+      --hermes-alert-warning-border-color: #{tokens.$hermes-alias-status-warning};
+      --hermes-alert-warning-icon-color: var(--hermes-alert-warning-font-color);
+      --hermes-alert-warning-close-icon-color: var(--hermes-alert-warning-font-color);
+      --hermes-alert-warning-action-color: var(--hermes-alert-warning-font-color);
+      --hermes-alert-warning-action-active-color: var(--hermes-alert-action-active-color);
+      --hermes-alert-warning-close-icon-hover-color: var(--hermes-alert-warning-font-color);
+
+      // Danger type
+      // Usage: ./_alert.clarity.scss
+      --hermes-alert-danger-bg-color: #{tokens.$hermes-alias-status-danger-tint};
+      --hermes-alert-danger-font-color: #{tokens.$hermes-alias-typography-color-500};
+      --hermes-alert-danger-border-color: #{tokens.$hermes-alias-status-danger};
+      --hermes-alert-danger-icon-color: var(--hermes-alert-danger-font-color);
+      --hermes-alert-danger-close-icon-color: var(--hermes-alert-danger-font-color);
+      --hermes-alert-danger-action-color: var(--hermes-alert-danger-font-color);
+      --hermes-alert-danger-action-active-color: var(--hermes-alert-action-active-color);
+      --hermes-alert-danger-close-icon-hover-color: var(--hermes-alert-close-icon-hover-color);
+
+      // Neutral type
+      // Usage: ./_alert.clarity.scss
+      --hermes-alert-neutral-bg-color: #{tokens.$hermes-alias-status-neutral-tint};
+      --hermes-alert-neutral-font-color: #{tokens.$hermes-alias-typography-color-500};
+      --hermes-alert-neutral-border-color: #{tokens.$hermes-alias-status-neutral};
+      --hermes-alert-neutral-icon-color: var(--hermes-alert-neutral-font-color);
+      --hermes-alert-neutral-close-icon-color: var(--hermes-alert-neutral-font-color);
+      --hermes-alert-neutral-action-color: var(--hermes-alert-neutral-font-color);
+      --hermes-alert-neutral-action-active-color: var(--hermes-alert-action-active-color);
+      --hermes-alert-neutral-close-icon-hover-color: var(--hermes-alert-close-icon-hover-color);
+
+      // App Info type
+      // Usage: ./_alert.clarity.scss
+      --hermes-app-alert-info-bg-color: #{tokens.$hermes-alias-status-info};
+      --hermes-app-alert-info-font-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-app-alert-info-border-color: none;
+      --hermes-app-alert-info-icon-color: var(--hermes-app-alert-info-font-color);
+      --hermes-app-alert-info-action-color: var(--hermes-app-alert-info-font-color);
+      --hermes-app-alert-info-action-active-color: var(--hermes-app-alert-info-font-color);
+      --hermes-app-alert-info-close-icon-color: var(--hermes-app-alert-info-font-color);
+      --hermes-app-alert-info-close-icon-hover-color: var(--hermes-app-alert-info-font-color);
+
+      // App Warning type
+      // Usage: ./_alert.clarity.scss
+      --hermes-app-alert-warning-bg-color: #{tokens.$hermes-alias-status-warning};
+      --hermes-app-alert-warning-font-color: #{tokens.$hermes-alias-typography-color-black};
+      --hermes-app-alert-warning-border-color: none;
+      --hermes-app-alert-warning-icon-color: var(--hermes-app-alert-warning-font-color);
+      --hermes-app-alert-warning-close-icon-color: var(--hermes-app-alert-warning-font-color);
+      --hermes-app-alert-warning-action-color: var(--hermes-app-alert-warning-font-color);
+      --hermes-app-alert-warning-action-active-color: var(--hermes-app-alert-warning-font-color);
+      --hermes-app-alert-warning-close-icon-hover-color: var(--hermes-app-alert-warning-font-color);
+
+      // App Danger type
+      // Usage: ./_alert.clarity.scss
+      --hermes-app-alert-danger-bg-color: #{tokens.$hermes-alias-status-danger};
+      --hermes-app-alert-danger-font-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-app-alert-danger-border-color: none;
+      --hermes-app-alert-danger-icon-color: var(--hermes-app-alert-danger-font-color);
+      --hermes-app-alert-danger-close-icon-color: var(--hermes-app-alert-danger-font-color);
+      --hermes-app-alert-danger-action-color: var(--hermes-app-alert-danger-font-color);
+      --hermes-app-alert-danger-action-active-color: var(--hermes-app-alert-danger-font-color);
+      --hermes-app-alert-danger-close-icon-hover-color: var(--hermes-app-alert-danger-font-color);
+
+      // App Success type
+      // Usage: ./_alert.clarity.scss
+      --hermes-app-alert-success-bg-color: #{tokens.$hermes-alias-status-success};
+      --hermes-app-alert-success-font-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-app-alert-success-border-color: none;
+      --hermes-app-alert-success-icon-color: var(--hermes-app-alert-success-font-color);
+      --hermes-app-alert-success-close-icon-color: var(--hermes-app-alert-success-font-color);
+      --hermes-app-alert-success-action-color: var(--hermes-app-alert-success-font-color);
+      --hermes-app-alert-success-action-active-color: var(--hermes-app-alert-success-font-color);
+      --hermes-app-alert-success-close-icon-hover-color: var(--hermes-app-alert-success-font-color);
+
+      // App Neutral type
+      // Usage: ./_alert.clarity.scss
+      --hermes-app-alert-neutral-bg-color: #{tokens.$hermes-alias-status-neutral};
+      --hermes-app-alert-neutral-font-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-app-alert-neutral-border-color: none;
+      --hermes-app-alert-neutral-icon-color: var(--hermes-app-alert-neutral-font-color);
+      --hermes-app-alert-neutral-close-icon-color: var(--hermes-app-alert-neutral-font-color);
+      --hermes-app-alert-neutral-action-color: var(--hermes-app-alert-neutral-font-color);
+      --hermes-app-alert-neutral-action-active-color: var(--hermes-app-alert-neutral-font-color);
+      --hermes-app-alert-neutral-close-icon-hover-color: var(--hermes-app-alert-neutral-font-color);
+
+      // App Alerts Pager
+      --hermes-app-alert-pager-text-color: #{tokens.$hermes-alias-typography-color-500};
+      --hermes-app-alert-info-pager-bg-color: #{tokens.$hermes-alias-status-info-shade};
+      --hermes-app-alert-warning-pager-bg-color: #{tokens.$hermes-alias-status-warning-shade};
+      --hermes-app-alert-danger-pager-bg-color: #{tokens.$hermes-alias-status-danger-shade};
+      --hermes-app-alert-success-pager-bg-color: #{tokens.$hermes-alias-status-success-shade};
+      --hermes-app-alert-neutral-pager-bg-color: #{tokens.$hermes-alias-status-neutral-shade};
+      --hermes-app-alert-info-pager-font-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-app-alert-warning-pager-font-color: #{tokens.$hermes-alias-typography-color-black};
+      --hermes-app-alert-danger-pager-font-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-app-alert-success-pager-font-color: #{tokens.$hermes-alias-typography-color-100};
+      --hermes-app-alert-neutral-pager-font-color: #{tokens.$hermes-alias-typography-color-100};
+
+      // Lightweight Info type
+      --hermes-lightweight-alert-info-icon-color: #{tokens.$hermes-alias-status-info};
+      --hermes-lightweight-alert-info-font-color: #{tokens.$hermes-alias-typography-color-500};
+
+      // Lightweight Warning type
+      --hermes-lightweight-alert-warning-icon-color: #{tokens.$hermes-alias-status-warning-dark};
+      --hermes-lightweight-alert-warning-font-color: #{tokens.$hermes-alias-typography-color-500};
+
+      // Lightweight Danger type
+      --hermes-lightweight-alert-danger-icon-color: #{tokens.$hermes-alias-status-danger};
+      --hermes-lightweight-alert-danger-font-color: #{tokens.$hermes-alias-typography-color-500};
+
+      // Lightweight Success type
+      --hermes-lightweight-alert-success-icon-color: #{tokens.$hermes-alias-status-success};
+      --hermes-lightweight-alert-success-font-color: #{tokens.$hermes-alias-typography-color-500};
+
+      // Lightweight Neutral type
+      --hermes-lightweight-alert-neutral-icon-color: #{tokens.$hermes-alias-status-neutral-shade};
+      --hermes-lightweight-alert-neutral-font-color: #{tokens.$hermes-alias-typography-color-500};
+    }
+  }
+}

package/emphasis/alert/_variables.alert.scss

@@ -0,0 +1,502 @@
+/*
+ * 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:map';
+@use '../../styles/variables/variables';
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/mixins';
+
+// Dimensions & Layout
+// Usage: ./_alert.clarity.scss
+$hermes-icon-margin-right: #{density.$hermes-base-horizontal-offset-s} !default;
+$hermes-icon-dimension-sm: #{density.$hermes-base-icon-size-s} !default;
+$hermes-alert-icon-dimension-sm: #{density.$hermes-base-icon-size-l} !default;
+$hermes-alert-top-margin: #{density.$hermes-base-vertical-offset-s} !default;
+$hermes-alert-min-height: #{density.$hermes-base-row-height-l} !default;
+$hermes-alert-item-min-height: #{density.$hermes-base-row-height-s} !default;
+$hermes-alert-borderwidth: #{tokens.$hermes-alias-object-border-width-100} !default;
+$hermes-alert-borderradius: var(--hermes-alert-borderradius) !default;
+
+// App Level font colors
+// Usage: ./_alert.clarity.scss
+// Used for 'toggle' button for dropdowns on the right side of an alert
+$hermes-alert-action-color: var(--hermes-alert-action-color) !default;
+$hermes-alert-action-active-color: var(--hermes-alert-action-active-color) !default;
+
+$hermes-alert-close-icon-color: var(--hermes-alert-close-icon-color) !default;
+$hermes-alert-close-icon-hover-color: var(--hermes-alert-close-icon-hover-color) !default;
+
+// Close icon colors for APP-LEVEL ALERTS
+$hermes-app-level-alert-color: var(--hermes-app-level-alert-color) !default;
+$hermes-app-alert-close-icon-color: var(--hermes-app-alert-close-icon-color) !default;
+
+// Info type
+// Usage: ./_alert.clarity.scss
+$hermes-alert-info-bg-color: var(--hermes-alert-info-bg-color) !default;
+$hermes-alert-info-font-color: var(--hermes-alert-info-font-color) !default;
+$hermes-alert-info-border-color: var(--hermes-alert-info-border-color) !default;
+$hermes-alert-info-icon-color: var(--hermes-alert-info-icon-color) !default;
+$hermes-alert-info-action-color: var(--hermes-alert-info-action-color) !default;
+$hermes-alert-info-action-active-color: var(--hermes-alert-info-action-active-color) !default;
+$hermes-alert-info-close-icon-color: var(--hermes-alert-info-close-icon-color) !default;
+$hermes-alert-info-close-icon-hover-color: var(--hermes-alert-info-close-icon-hover-color) !default;
+
+// Success type
+// Usage: ./_alert.clarity.scss
+$hermes-alert-success-bg-color: var(--hermes-alert-success-bg-color) !default;
+$hermes-alert-success-font-color: var(--hermes-alert-success-font-color) !default;
+$hermes-alert-success-border-color: var(--hermes-alert-success-border-color) !default;
+$hermes-alert-success-icon-color: var(--hermes-alert-success-icon-color) !default;
+$hermes-alert-success-action-color: var(--hermes-alert-success-action-color) !default;
+$hermes-alert-success-action-active-color: var(--hermes-alert-success-action-active-color) !default;
+$hermes-alert-success-close-icon-color: var(--hermes-alert-success-close-icon-color) !default;
+$hermes-alert-success-close-icon-hover-color: var(--hermes-alert-success-close-icon-hover-color) !default;
+
+// Warning type
+// Usage: ./_alert.clarity.scss
+$hermes-alert-warning-bg-color: var(--hermes-alert-warning-bg-color) !default;
+$hermes-alert-warning-font-color: var(--hermes-alert-warning-font-color) !default;
+$hermes-alert-warning-border-color: var(--hermes-alert-warning-border-color) !default;
+$hermes-alert-warning-icon-color: var(--hermes-alert-warning-icon-color) !default;
+$hermes-alert-warning-action-color: var(--hermes-alert-warning-action-color) !default;
+$hermes-alert-warning-action-active-color: var(--hermes-alert-warning-action-active-color) !default;
+$hermes-alert-warning-close-icon-color: var(--hermes-alert-warning-close-icon-color) !default;
+$hermes-alert-warning-close-icon-hover-color: var(--hermes-alert-warning-close-icon-hover-color) !default;
+
+// Danger type
+// Usage: ./_alert.clarity.scss
+$hermes-alert-danger-bg-color: var(--hermes-alert-danger-bg-color) !default;
+$hermes-alert-danger-font-color: var(--hermes-alert-danger-font-color) !default;
+$hermes-alert-danger-border-color: var(--hermes-alert-danger-border-color) !default;
+$hermes-alert-danger-icon-color: var(--hermes-alert-danger-icon-color) !default;
+$hermes-alert-danger-action-color: var(--hermes-alert-danger-action-color) !default;
+$hermes-alert-danger-action-active-color: var(--hermes-alert-danger-action-active-color) !default;
+$hermes-alert-danger-close-icon-color: var(--hermes-alert-danger-close-icon-color) !default;
+$hermes-alert-danger-close-icon-hover-color: var(--hermes-alert-danger-close-icon-hover-color) !default;
+
+// App Info type
+// Usage: ./_alert.clarity.scss
+$hermes-app-alert-info-bg-color: var(--hermes-app-alert-info-bg-color) !default;
+$hermes-app-alert-info-font-color: var(--hermes-app-alert-info-font-color) !default;
+$hermes-app-alert-info-border-color: var(--hermes-app-alert-info-border-color) !default;
+$hermes-app-alert-info-icon-color: var(--hermes-app-alert-info-icon-color) !default;
+$hermes-app-alert-info-action-color: var(--hermes-app-alert-info-action-color) !default;
+$hermes-app-alert-info-action-active-color: var(--hermes-app-alert-info-action-active-color) !default;
+$hermes-app-alert-info-close-icon-color: var(--hermes-app-alert-info-close-icon-color) !default;
+$hermes-app-alert-info-close-icon-hover-color: var(--hermes-app-alert-info-close-icon-hover-color) !default;
+
+// App Warning type
+// Usage: ./_alert.clarity.scss
+$hermes-app-alert-warning-bg-color: var(--hermes-app-alert-warning-bg-color) !default;
+$hermes-app-alert-warning-icon-color: var(--hermes-app-alert-warning-icon-color) !default;
+$hermes-app-alert-warning-border-color: var(--hermes-app-alert-warning-border-color) !default;
+$hermes-app-alert-warning-font-color: var(--hermes-app-alert-warning-font-color) !default;
+$hermes-app-alert-warning-close-icon-color: var(--hermes-app-alert-warning-close-icon-color) !default;
+$hermes-app-alert-warning-action-color: var(--hermes-app-alert-warning-action-color) !default;
+$hermes-app-alert-warning-action-active-color: var(--hermes-app-alert-warning-action-active-color) !default;
+$hermes-app-alert-warning-close-icon-hover-color: var(--hermes-app-alert-warning-close-icon-hover-color) !default;
+
+// App Danger type
+// Usage: ./_alert.clarity.scss
+$hermes-app-alert-danger-bg-color: var(--hermes-app-alert-danger-bg-color) !default;
+$hermes-app-alert-danger-icon-color: var(--hermes-app-alert-danger-icon-color) !default;
+$hermes-app-alert-danger-font-color: var(--hermes-app-alert-danger-font-color) !default;
+$hermes-app-alert-danger-border-color: var(--hermes-app-alert-danger-border-color) !default;
+$hermes-app-alert-danger-close-icon-color: var(--hermes-app-alert-danger-close-icon-color) !default;
+$hermes-app-alert-danger-action-color: var(--hermes-app-alert-danger-action-color) !default;
+$hermes-app-alert-danger-action-active-color: var(--hermes-app-alert-danger-action-active-color) !default;
+$hermes-app-alert-danger-close-icon-hover-color: var(--hermes-app-alert-danger-close-icon-hover-color) !default;
+
+// App Success type
+// Usage: ./_alert.clarity.scss
+// Deprecated in 3.0 for removal in 4.0
+$hermes-app-alert-success-bg-color: var(--hermes-app-alert-success-bg-color) !default;
+$hermes-app-alert-success-icon-color: var(--hermes-app-alert-success-icon-color) !default;
+$hermes-app-alert-success-font-color: var(--hermes-app-alert-success-font-color) !default;
+$hermes-app-alert-success-border-color: var(--hermes-app-alert-success-border-color) !default;
+$hermes-app-alert-success-close-icon-color: var(--hermes-app-alert-success-close-icon-color) !default;
+$hermes-app-alert-success-action-color: var(--hermes-app-alert-success-action-color) !default;
+$hermes-app-alert-success-action-active-color: var(--hermes-app-alert-success-action-active-color) !default;
+$hermes-app-alert-success-close-icon-hover-color: var(--hermes-app-alert-success-close-icon-hover-color) !default;
+
+// Lightweight Info type
+$hermes-lightweight-alert-info-icon-color: var(--hermes-lightweight-alert-info-icon-color) !default;
+$hermes-lightweight-alert-info-font-color: var(--hermes-lightweight-alert-info-font-color) !default;
+
+// Lightweight Warning type
+$hermes-lightweight-alert-warning-icon-color: var(--hermes-lightweight-alert-warning-icon-color) !default;
+$hermes-lightweight-alert-warning-font-color: var(--hermes-lightweight-alert-warning-font-color) !default;
+
+// Lightweight Danger type
+$hermes-lightweight-alert-danger-icon-color: var(--hermes-lightweight-alert-danger-icon-color) !default;
+$hermes-lightweight-alert-danger-font-color: var(--hermes-lightweight-alert-danger-font-color) !default;
+
+// Lightweight Success type
+$hermes-lightweight-alert-success-icon-color: var(--hermes-lightweight-alert-success-icon-color) !default;
+$hermes-lightweight-alert-success-font-color: var(--hermes-lightweight-alert-success-font-color) !default;
+
+@function getAlertColor($type: info, $property: color) {
+  @if $type == info {
+    @return lookupInfoAlertColor($property);
+  }
+  @if $type == success {
+    @return lookupSuccessAlertColor($property);
+  }
+  @if $type == warning {
+    @return lookupWarningAlertColor($property);
+  }
+  @if $type == danger {
+    @return lookupDangerAlertColor($property);
+  }
+  @if $type == neutral {
+    @return lookupNeutralAlertColor($property);
+  }
+  @if $type == app-info {
+    @return lookupAppInfoAlertColor($property);
+  }
+  @if $type == app-warning {
+    @return lookupAppWarningAlertColor($property);
+  }
+  @if $type == app-danger {
+    @return lookupAppDangerAlertColor($property);
+  }
+  @if $type == app-success {
+    @return lookupAppSuccessAlertColor($property);
+  }
+  @if $type == app-neutral {
+    @return lookupAppNeutralAlertColor($property);
+  }
+  @if $type == lightweight-info {
+    @return lookupLightweightInfoAlertColor($property);
+  }
+  @if $type == lightweight-warning {
+    @return lookupLightweightWarningAlertColor($property);
+  }
+  @if $type == lightweight-danger {
+    @return lookupLightweightDangerAlertColor($property);
+  }
+  @if $type == lightweight-success {
+    @return lookupLightweightSuccessAlertColor($property);
+  }
+  @if $type == lightweight-neutral {
+    @return lookupLightweightNeutralAlertColor($property);
+  }
+
+  @return null;
+}
+@function lookupInfoAlertColor($property: color) {
+  @if $property == color {
+    @return $hermes-alert-info-font-color;
+  }
+  @if $property == bg-color {
+    @return $hermes-alert-info-bg-color;
+  }
+  @if $property == icon {
+    @return $hermes-alert-info-icon-color;
+  }
+  @if $property == border-color {
+    @return $hermes-alert-info-border-color;
+  }
+  @if $property == close-icon {
+    @return $hermes-alert-info-close-icon-color;
+  }
+  @if $property == close-icon-hover {
+    @return $hermes-alert-info-close-icon-hover-color;
+  }
+  @if $property == action {
+    @return $hermes-alert-info-action-color;
+  }
+  @if $property == action-active {
+    @return $hermes-alert-info-action-active-color;
+  }
+
+  @return null;
+}
+@function lookupSuccessAlertColor($property: color) {
+  @if $property == color {
+    @return $hermes-alert-success-font-color;
+  }
+  @if $property == bg-color {
+    @return $hermes-alert-success-bg-color;
+  }
+  @if $property == icon {
+    @return $hermes-alert-success-icon-color;
+  }
+  @if $property == border-color {
+    @return $hermes-alert-success-border-color;
+  }
+  @if $property == close-icon {
+    @return $hermes-alert-success-close-icon-color;
+  }
+  @if $property == close-icon-hover {
+    @return $hermes-alert-success-close-icon-hover-color;
+  }
+  @if $property == action {
+    @return $hermes-alert-success-action-color;
+  }
+  @if $property == action-active {
+    @return $hermes-alert-success-action-active-color;
+  }
+
+  @return null;
+}
+@function lookupWarningAlertColor($property: color) {
+  @if $property == color {
+    @return $hermes-alert-warning-font-color;
+  }
+  @if $property == bg-color {
+    @return $hermes-alert-warning-bg-color;
+  }
+  @if $property == icon {
+    @return $hermes-alert-warning-icon-color;
+  }
+  @if $property == border-color {
+    @return $hermes-alert-warning-border-color;
+  }
+  @if $property == close-icon {
+    @return $hermes-alert-warning-close-icon-color;
+  }
+  @if $property == close-icon-hover {
+    @return $hermes-alert-warning-close-icon-hover-color;
+  }
+  @if $property == action {
+    @return $hermes-alert-warning-action-color;
+  }
+  @if $property == action-active {
+    @return $hermes-alert-warning-action-active-color;
+  }
+
+  @return null;
+}
+@function lookupDangerAlertColor($property: color) {
+  @if $property == color {
+    @return $hermes-alert-danger-font-color;
+  }
+  @if $property == bg-color {
+    @return $hermes-alert-danger-bg-color;
+  }
+  @if $property == icon {
+    @return $hermes-alert-danger-icon-color;
+  }
+  @if $property == border-color {
+    @return $hermes-alert-danger-border-color;
+  }
+  @if $property == close-icon {
+    @return $hermes-alert-danger-close-icon-color;
+  }
+  @if $property == close-icon-hover {
+    @return $hermes-alert-danger-close-icon-hover-color;
+  }
+  @if $property == action {
+    @return $hermes-alert-danger-action-color;
+  }
+  @if $property == action-active {
+    @return $hermes-alert-danger-action-active-color;
+  }
+
+  @return null;
+}
+
+// App Neutral type
+// Usage: ./_alert.clarity.scss
+$hermes-alert-neutral: (
+  bg-color: var(--hermes-alert-neutral-bg-color),
+  color: var(--hermes-alert-neutral-font-color),
+  border-color: var(--hermes-alert-neutral-border-color),
+  icon-color: var(--hermes-alert-neutral-icon-color),
+  action-color: var(--hermes-alert-neutral-action-color),
+  action-active-color: var(--hermes-alert-neutral-action-active-color),
+  close-icon-color: var(--hermes-alert-neutral-close-icon-color),
+  close-icon-hover-color: var(--hermes-alert-neutral-close-icon-hover-color),
+) !default;
+
+@function lookupNeutralAlertColor($property: color) {
+  @return map.get($hermes-alert-neutral, $property);
+}
+@function lookupAppDangerAlertColor($property: color) {
+  @if $property == color {
+    @return $hermes-app-alert-danger-font-color;
+  }
+  @if $property == bg-color {
+    @return $hermes-app-alert-danger-bg-color;
+  }
+  @if $property == icon {
+    @return $hermes-app-alert-danger-icon-color;
+  }
+  @if $property == border-color {
+    @return $hermes-app-alert-danger-border-color;
+  }
+  @if $property == close-icon {
+    @return $hermes-app-alert-danger-close-icon-color;
+  }
+  @if $property == close-icon-hover {
+    @return $hermes-app-alert-danger-close-icon-hover-color;
+  }
+  @if $property == action {
+    @return $hermes-app-alert-danger-action-color;
+  }
+  @if $property == action-active {
+    @return $hermes-app-alert-danger-action-active-color;
+  }
+
+  @return null;
+}
+
+// Deprecated in 3.0 for removal in 4.0
+
+@function lookupAppSuccessAlertColor($property: color) {
+  @if $property == color {
+    @return $hermes-app-alert-success-font-color;
+  }
+  @if $property == bg-color {
+    @return $hermes-app-alert-success-bg-color;
+  }
+  @if $property == icon {
+    @return $hermes-app-alert-success-icon-color;
+  }
+  @if $property == border-color {
+    @return $hermes-app-alert-success-border-color;
+  }
+  @if $property == close-icon {
+    @return $hermes-app-alert-success-close-icon-color;
+  }
+  @if $property == close-icon-hover {
+    @return $hermes-app-alert-success-close-icon-hover-color;
+  }
+  @if $property == action {
+    @return $hermes-app-alert-success-action-color;
+  }
+  @if $property == action-active {
+    @return $hermes-app-alert-success-action-active-color;
+  }
+
+  @return null;
+}
+@function lookupAppInfoAlertColor($property: color) {
+  @if $property == color {
+    @return $hermes-app-alert-info-font-color;
+  }
+  @if $property == bg-color {
+    @return $hermes-app-alert-info-bg-color;
+  }
+  @if $property == icon {
+    @return $hermes-app-alert-info-icon-color;
+  }
+  @if $property == border-color {
+    @return $hermes-app-alert-info-border-color;
+  }
+  @if $property == close-icon {
+    @return $hermes-app-alert-info-close-icon-color;
+  }
+  @if $property == close-icon-hover {
+    @return $hermes-app-alert-info-close-icon-hover-color;
+  }
+  @if $property == action {
+    @return $hermes-app-alert-info-action-color;
+  }
+  @if $property == action-active {
+    @return $hermes-app-alert-info-action-active-color;
+  }
+
+  @return null;
+}
+@function lookupAppWarningAlertColor($property: color) {
+  @if $property == color {
+    @return $hermes-app-alert-warning-font-color;
+  }
+  @if $property == bg-color {
+    @return $hermes-app-alert-warning-bg-color;
+  }
+  @if $property == icon {
+    @return $hermes-app-alert-warning-icon-color;
+  }
+  @if $property == border-color {
+    @return $hermes-app-alert-warning-border-color;
+  }
+  @if $property == close-icon {
+    @return $hermes-app-alert-warning-close-icon-color;
+  }
+  @if $property == close-icon-hover {
+    @return $hermes-app-alert-warning-close-icon-hover-color;
+  }
+  @if $property == action {
+    @return $hermes-app-alert-warning-action-color;
+  }
+  @if $property == action-active {
+    @return $hermes-app-alert-warning-action-active-color;
+  }
+
+  @return null;
+}
+
+// App Neutral type
+// Usage: ./_alert.clarity.scss
+$hermes-app-alert-neutral: (
+  bg-color: var(--hermes-app-alert-neutral-bg-color),
+  icon-color: var(--hermes-app-alert-neutral-icon-color),
+  color: var(--hermes-app-alert-neutral-font-color),
+  border-color: var(--hermes-app-alert-neutral-border-color),
+  close-icon: var(--hermes-app-alert-neutral-close-icon-color),
+  action: var(--hermes-app-alert-neutral-action-color),
+  action-active: var(--hermes-app-alert-neutral-action-active-color),
+  close-icon-hover: var(--hermes-app-alert-neutral-close-icon-hover-color),
+) !default;
+
+@function lookupAppNeutralAlertColor($property: color) {
+  @return map.get($hermes-app-alert-neutral, $property);
+}
+@function lookupLightweightInfoAlertColor($property: color) {
+  @if $property == icon {
+    @return $hermes-lightweight-alert-info-icon-color;
+  }
+  @if $property == color {
+    @return $hermes-lightweight-alert-info-font-color;
+  }
+
+  @return null;
+}
+@function lookupLightweightDangerAlertColor($property: color) {
+  @if $property == icon {
+    @return $hermes-lightweight-alert-danger-icon-color;
+  }
+  @if $property == color {
+    @return $hermes-lightweight-alert-danger-font-color;
+  }
+
+  @return null;
+}
+@function lookupLightweightSuccessAlertColor($property: color) {
+  @if $property == icon {
+    @return $hermes-lightweight-alert-success-icon-color;
+  }
+  @if $property == color {
+    @return $hermes-lightweight-alert-success-font-color;
+  }
+
+  @return null;
+}
+@function lookupLightweightWarningAlertColor($property: color) {
+  @if $property == icon {
+    @return $hermes-lightweight-alert-warning-icon-color;
+  }
+  @if $property == color {
+    @return $hermes-lightweight-alert-warning-font-color;
+  }
+
+  @return null;
+}
+
+// Lightweight Neutral type
+$hermes-lightweight-alert-neutral: (
+  icon: var(--hermes-lightweight-alert-neutral-icon-color),
+  color: var(--hermes-lightweight-alert-neutral-font-color),
+) !default;
+
+@function lookupLightweightNeutralAlertColor($property: color) {
+  @return map.get($hermes-lightweight-alert-neutral, $property);
+}