@hermes-ui/angular 0.1.4

package/layout/nav/_mixins.header.scss

@@ -0,0 +1,332 @@
+/*
+ * 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 '../../image/icons.clarity';
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../main-container/variables.header' as header-variables;
+
+@mixin header-nav-link($horizontal-padding: density.$hermes-base-horizontal-offset-xl) {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  gap: density.$hermes-base-gap-s;
+  height: 100%;
+  padding: density.$hermes-base-vertical-offset-m $horizontal-padding;
+
+  &:focus {
+    outline-offset: header-variables.$hermes-header-outline-offset; // So that the outline styles aren't hidden because of the browser
+  }
+}
+@mixin header-section-divider() {
+  display: inline-block;
+  content: '';
+  background-color: header-variables.$hermes-header-divider-color;
+  height: density.$hermes-base-icon-size-3xl;
+  width: tokens.$hermes-alias-object-border-width-100;
+  position: absolute;
+  left: 0;
+  top: calc((header-variables.$hermes-header-height - density.$hermes-base-icon-size-3xl) / 2);
+}
+@mixin header-nav-appearance() {
+  color: header-variables.$hermes-header-font-color;
+
+  &:hover {
+    color: header-variables.$hermes-header-font-color-hover;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+@mixin header-backgrounds() {
+  &.header-1 {
+    background-color: header-variables.$hermes-header-bg-color;
+  }
+
+  &.header-2 {
+    background-color: header-variables.$hermes-header-2-bg-color;
+  }
+
+  &.header-3 {
+    background-color: header-variables.$hermes-header-3-bg-color;
+  }
+}
+@mixin header-branding() {
+  .branding {
+    display: flex;
+    flex: 0 0 auto;
+    height: header-variables.$hermes-header-height;
+    min-width: mixins.baselinePx(204);
+    padding: 0 density.$hermes-base-horizontal-offset-xl;
+
+    & > a,
+    & > .nav-link {
+      @include header-nav-link(density.$hermes-base-horizontal-offset-m);
+    }
+
+    .hermes-icon,
+    hermes-icon,
+    hermes-icon {
+      flex-grow: 0;
+      flex-shrink: 0;
+
+      &:not([size]) {
+        @include mixins.equilateral(tokens.$hermes-global-space-11);
+      }
+    }
+
+    .title {
+      color: header-variables.$hermes-header-title-color;
+      font-family: header-variables.$hermes-header-title-font-family;
+
+      @include mixins.generate-typography-token(
+        'SUBSECTION-16-EXP',
+        (
+          font-weight: header-variables.$hermes-header-title-font-weight,
+        )
+      );
+
+      text-decoration: none;
+    }
+  }
+}
+@mixin header-links {
+  .settings, /* TODO: deprecated. Remove when the clarity css naming convention is implemented.*/
+  .header-nav,
+  .header-actions {
+    .nav-text {
+      @include mixins.generate-typography-token('BODY-14-RG-EXP');
+    }
+
+    hermes-icon,
+    hermes-icon {
+      color: header-variables.$hermes-header-font-color;
+    }
+
+    .nav-link {
+      @include header-nav-link();
+      @include header-nav-appearance();
+
+      position: relative;
+      text-align: center;
+
+      hermes-icon:not([size]),
+      hermes-icon:not([size]) {
+        @include mixins.equilateral(header-variables.$hermes-header-clarity-icons-size);
+      }
+
+      &.nav-icon-text {
+        gap: density.$hermes-base-gap-s;
+
+        hermes-icon,
+        hermes-icon {
+          transform: none;
+        }
+      }
+
+      // .nav-text acts like the alt attribute for screens where responsiveness kicks in.
+      // on smaller screens icons are hidden and only nav-text is shown
+      .nav-icon + .nav-text {
+        display: none;
+      }
+
+      &.active {
+        .nav-text {
+          @include mixins.generate-typography-token('BODY-14-SB-EXP');
+        }
+      }
+
+      &:focus {
+        // So that the outline styles aren't hidden because of the browser
+        outline-offset: header-variables.$hermes-header-outline-offset;
+      }
+    }
+  }
+}
+@mixin header-nav {
+  .header-nav {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    position: relative;
+
+    &::before {
+      @include header-section-divider();
+    }
+
+    .nav-link {
+      &:first-of-type,
+      &:last-of-type {
+        position: relative;
+      }
+    }
+  }
+}
+@mixin header-actions {
+  .settings,
+  .header-actions {
+    flex: 1 0 auto;
+    display: flex;
+    justify-content: flex-end;
+
+    & > *:not(.dropdown)::before,
+    & > .dropdown::before {
+      @include header-section-divider();
+    }
+
+    // Reduce nesting from 5 to 3 at the most
+    & > .dropdown {
+      padding: density.$hermes-base-vertical-offset-m density.$hermes-base-horizontal-offset-m;
+
+      & > .dropdown-toggle {
+        position: relative;
+
+        @include header-nav-appearance();
+        @include header-nav-link();
+
+        padding: 0 density.$hermes-base-horizontal-offset-m;
+
+        &:focus {
+          outline-offset: initial;
+        }
+      }
+
+      .dropdown-toggle.nav-icon {
+        hermes-icon,
+        hermes-icon {
+          &:not([size], [shape^='angle']) {
+            @include mixins.equilateral(header-variables.$hermes-header-clarity-icons-size);
+          }
+        }
+      }
+
+      // Pull the dropdown menus of all dropdowns up to compensate for the height of the header.
+      .dropdown-menu {
+        margin-top: calc(-1 * tokens.$hermes-global-space-5);
+        margin-right: tokens.$hermes-global-space-5;
+        // TODO: As of 0.10.0 the dropdown-menu inside header without hermesIfOpen directive (legacy)
+        // will create empty space beyond the .main-container if the right isn't set to zero.
+        // Re-evaluate later if we can come up with a better solution.
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}
+@mixin header-search() {
+  .search-box,
+  .search {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    max-width: mixins.baselinePx(288);
+    padding: 0;
+    position: relative;
+
+    @include header-nav-appearance();
+
+    &::before {
+      @include header-section-divider();
+    }
+
+    & > .nav-icon {
+      margin: 0 tokens.$hermes-global-space-4 mixins.baselinePx(3) tokens.$hermes-global-space-9;
+    }
+
+    label {
+      display: inline-block;
+      padding-left: header-variables.$hermes-header-search-gap;
+      margin-left: header-variables.$hermes-header-search-margin-left;
+      margin-right: header-variables.$hermes-header-search-margin-right;
+      text-align: center;
+
+      &::before {
+        display: inline-block;
+        content: '';
+        background-image: icons.generateSearchIcon();
+        background-repeat: no-repeat;
+        background-size: contain;
+        cursor: pointer;
+
+        @include mixins.min-equilateral(header-variables.$hermes-header-search-icon-size);
+
+        vertical-align: middle;
+        margin: 0;
+        margin-right: calc(
+          -1 * (header-variables.$hermes-header-search-icon-size + header-variables.$hermes-header-search-gap)
+        );
+      }
+
+      input {
+        line-height: tokens.$hermes-global-space-9;
+        margin: auto;
+      }
+    }
+
+    input[type='text'] {
+      border: none;
+      background: none;
+      color: header-variables.$hermes-header-search-input-font-color;
+      border-radius: density.$hermes-base-border-radius-s;
+      height: tokens.$hermes-global-space-11;
+      padding: 0 0 0 calc(header-variables.$hermes-header-search-icon-size + 2 * header-variables.$hermes-header-search-gap);
+      vertical-align: middle;
+
+      // Typography
+
+      @include mixins.generate-typography-token('BODY-14-SB-EXP');
+
+      // hacky fix for chrome autofill wrong colors. Better solution not found.
+      // set transition between current correct to inner wrong immutable colors to very long time.
+      &:-webkit-autofill,
+      &:-webkit-autofill:focus {
+        transition:
+          background-color 0s 600000s,
+          color 0s 600000s;
+      }
+
+      &::placeholder {
+        color: header-variables.$hermes-header-search-placeholder-text-color;
+
+        @include mixins.generate-typography-token('BODY-14-RG-EXP');
+      }
+
+      &:hover {
+        border: header-variables.$hermes-header-search-border-hover;
+      }
+
+      &:focus-visible {
+        outline: none;
+        border: header-variables.$hermes-header-search-border-active;
+      }
+
+      &:focus,
+      &:active {
+        background: none;
+      }
+    }
+  }
+
+  .branding + .search,
+  .branding + .search-box {
+    position: relative;
+  }
+}
+@mixin header-search-md {
+  .search-box,
+  .search {
+    flex: 1 0 auto;
+    max-width: none;
+    display: none; // TODO: Waiting for UX to finish the search designs. CDE-1626
+
+    label {
+      padding: 0;
+    }
+  }
+}

package/layout/nav/_mixins.responsive-nav.scss

@@ -0,0 +1,75 @@
+/*
+ * 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/core/tokens/variables.tokens' as tokens;
+@use 'variables.responsive-nav' as responsive-nav-variables;
+@use '../../layout/vertical-nav/variables.vertical-nav' as vertical-nav-variables;
+
+@mixin sliding-nav-positioning($top: 0, $right: auto, $bottom: 0, $left: 0) {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  inset: $top $right $bottom $left;
+  background: vertical-nav-variables.$hermes-vertical-nav-bg-color;
+  z-index: responsive-nav-variables.$hermes-sliding-panel-z-index;
+  height: 100vh;
+}
+@mixin menu-trigger($right: auto, $left: 0, $transformX: responsive-nav-variables.$hermes-trigger-position) {
+  position: fixed;
+  top: 0;
+  right: $right;
+  left: $left;
+  z-index: responsive-nav-variables.$hermes-sliding-panel-z-index;
+  transform: translateX($transformX);
+  transition: responsive-nav-variables.$hermes-trigger-animation;
+
+  &::after {
+    content: none;
+  }
+}
+@mixin hamburger-menu-trigger-animation() {
+  & > span {
+    background: transparent;
+
+    &::before,
+    &::after {
+      left: tokens.$hermes-global-space-3;
+      transform-origin: 9%;
+      transition: responsive-nav-variables.$hermes-trigger-animation;
+    }
+
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+}
+@mixin overflow-menu-trigger-animation() {
+  & > span {
+    background: transparent;
+
+    &::before,
+    &::after {
+      height: tokens.$hermes-global-space-2;
+      width: tokens.$hermes-global-space-9;
+      left: calc(-1 * tokens.$hermes-global-space-4);
+      transform-origin: -3%;
+      transition: responsive-nav-variables.$hermes-trigger-animation;
+    }
+
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+}

package/layout/nav/_nav.clarity.scss

@@ -0,0 +1,100 @@
+/*
+ * 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 '../tabs/variables.tabs' as tabs-variables;
+@use 'variables.subnav' as subnav-variables;
+@use '../tabs/mixins.tabs' as tabs-mixins;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@include mixins.exports('nav.clarity') {
+  .nav {
+    display: flex; //For the elements inside the nav
+    height: subnav-variables.$hermes-subnav-height;
+    list-style-type: none;
+    align-items: center;
+    margin: 0;
+    width: 100%;
+    white-space: nowrap;
+    box-shadow: subnav-variables.$hermes-nav-shadow;
+    gap: density.$hermes-base-gap-l;
+
+    .nav-item {
+      display: inline-block;
+
+      &.active > .nav-link {
+        color: tabs-variables.$hermes-nav-link-active-color;
+        box-shadow: subnav-variables.$hermes-nav-shadow;
+      }
+    }
+
+    .nav-link {
+      color: tabs-variables.$hermes-nav-link-color;
+
+      @include mixins.generate-typography-token('BODY-14-RG-STD');
+
+      @include tabs-mixins.nav-link-border-appearance('bottom');
+
+      padding: density.$hermes-base-vertical-offset-m density.$hermes-base-horizontal-offset-m;
+      display: flex;
+
+      //Clarity Buttons as .nav-links in .nav
+      &.btn {
+        text-transform: none;
+        //-1px to account for the border of the button
+        margin: 0 0 calc(-1 * #{tokens.$hermes-global-space-1});
+        border-radius: 0;
+      }
+
+      &.dropdown-toggle {
+        padding: 0 density.$hermes-base-horizontal-offset-m;
+
+        hermes-icon,
+        hermes-icon {
+          color: tabs-variables.$hermes-nav-link-color;
+        }
+      }
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: inherit;
+      }
+
+      // TODO - separate :active and .active, currently .active is being used for selected state.
+      &:active {
+        background-color: tabs-variables.$hermes-nav-active-bg-color;
+      }
+
+      &.active {
+        &::before {
+          border-color: tokens.$hermes-alias-object-interaction-background-highlight;
+        }
+      }
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.active {
+        text-decoration: none;
+      }
+
+      &.active {
+        &:hover {
+          background-color: tabs-variables.$hermes-nav-selected-hover-background-color;
+        }
+
+        &:active {
+          background-color: tabs-variables.$hermes-nav-selected-active-background-color;
+        }
+
+        color: tabs-variables.$hermes-nav-link-active-color;
+      }
+    }
+  }
+}

package/layout/nav/_properties.nav.scss

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('nav.properties') {
+  @include mixins.root-or-host() {
+    &,
+    & [hermes-theme] {
+      // Usage: ../styles/_reboot.scss
+      // Usage: ./_links.scss
+      // Link colors
+
+      // @TODO update to SASS token once core is updated.
+      --hermes-link-active-color: var(--hermes-alias-typography-link-color-active);
+      --hermes-link-color: #{tokens.$hermes-alias-typography-link-color};
+      --hermes-link-hover-color: #{tokens.$hermes-alias-typography-link-color-hover};
+      --hermes-link-visited-color: #{tokens.$hermes-alias-typography-link-color-visited};
+      --hermes-link-visited-color-hover: #{tokens.$hermes-alias-typography-link-color-visited-hover};
+    }
+  }
+}

package/layout/nav/_properties.responsive-nav.scss

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('responsive-nav.properties') {
+  @include mixins.root-or-host() {
+    --hermes-responsive-nav-trigger-border-radius: #{tokens.$hermes-alias-object-border-radius-100};
+    --hermes-responsive-nav-overflow-border-radius: #{tokens.$hermes-alias-object-border-radius-100};
+    --hermes-responsive-nav-hamburger-border-radius: #{tokens.$hermes-alias-object-border-radius-100};
+
+    &,
+    & [hermes-theme] {
+      --hermes-sliding-panel-text-color: #{tokens.$hermes-global-color-gray-700};
+      --hermes-responsive-nav-trigger-bg-color: #{tokens.$hermes-global-color-gray-0};
+    }
+  }
+}

package/layout/nav/_properties.subnav.scss

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('subnav.properties') {
+  @include mixins.root-or-host() {
+    &,
+    & [hermes-theme] {
+      // Usage: ../layout/nav/_subnav.clarity.scss
+      --hermes-subnav-bg-color: #{tokens.$hermes-alias-object-container-background};
+    }
+  }
+}