@hermes-ui/angular 0.1.7 → 0.2.0

package/layout/nav/_mixins.header.scss

@@ -11,16 +11,32 @@
 @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) {
+// A control in the header band: a box of --hermes-header-control-size (32px) centered in the bar,
+// not a cell that fills its whole height. Hover is a translucent white veil, the focus ring sits
+// outside the box (there is room: the bar is taller than the control).
+@mixin header-nav-link($horizontal-padding: tokens.$hermes-global-space-5) {
   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;
+  height: header-variables.$hermes-header-control-size;
+  min-height: 0;
+  margin: 0;
+  padding: 0 $horizontal-padding;
+  border-radius: header-variables.$hermes-header-control-radius;
+  transition: background-color header-variables.$hermes-header-transition;
+
+  &:hover:not(:disabled) {
+    background-color: header-variables.$hermes-header-highlight-color;
+  }
 
   &:focus {
-    outline-offset: header-variables.$hermes-header-outline-offset; // So that the outline styles aren't hidden because of the browser
+    outline-offset: header-variables.$hermes-header-outline-offset;
+  }
+
+  &:focus-visible {
+    outline: tokens.$hermes-alias-object-border-width-200 solid header-variables.$hermes-header-focus-color;
+    outline-offset: tokens.$hermes-global-space-3;
   }
 }
 @mixin header-section-divider() {
@@ -58,16 +74,27 @@
   }
 }
 @mixin header-branding() {
+  // Brand and context in one block, not two loose children of the bar: the bar's `gap` is the
+  // distance between its blocks, and anything that belongs to the brand (version, module name)
+  // must sit closer to it than that.
   .branding {
     display: flex;
     flex: 0 0 auto;
+    align-items: center;
+    gap: tokens.$hermes-global-space-7;
     height: header-variables.$hermes-header-height;
-    min-width: mixins.baselinePx(204);
-    padding: 0 density.$hermes-base-horizontal-offset-xl;
+    padding: 0;
 
     & > a,
     & > .nav-link {
-      @include header-nav-link(density.$hermes-base-horizontal-offset-m);
+      @include header-nav-link(0);
+
+      gap: tokens.$hermes-global-space-5;
+
+      // The brand is not a control: no veil on hover.
+      &:hover {
+        background-color: transparent;
+      }
     }
 
     .hermes-icon,
@@ -141,11 +168,6 @@
           @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;
-      }
     }
   }
 }
@@ -154,12 +176,11 @@
     display: flex;
     flex: 0 0 auto;
     align-items: center;
+    // Neighbouring links are boxes with a hover veil; the gap is what tells one from the next,
+    // so the section dividers of the old header are gone.
+    gap: tokens.$hermes-global-space-3;
     position: relative;
 
-    &::before {
-      @include header-section-divider();
-    }
-
     .nav-link {
       &:first-of-type,
       &:last-of-type {
@@ -173,28 +194,21 @@
   .header-actions {
     flex: 1 0 auto;
     display: flex;
+    align-items: center;
     justify-content: flex-end;
-
-    & > *:not(.dropdown)::before,
-    & > .dropdown::before {
-      @include header-section-divider();
-    }
+    // 16px, not the 8px of the rest of the UI: the neighbours are loose glyphs with no box or
+    // label to delimit them, and at 8px they read as a single block.
+    gap: tokens.$hermes-global-space-7;
 
     // Reduce nesting from 5 to 3 at the most
     & > .dropdown {
-      padding: density.$hermes-base-vertical-offset-m density.$hermes-base-horizontal-offset-m;
+      padding: 0;
 
       & > .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 {
@@ -206,9 +220,10 @@
         }
       }
 
-      // Pull the dropdown menus of all dropdowns up to compensate for the height of the header.
+      // The toggle is centered in the bar, so the menu hangs from the bar's bottom edge, not from
+      // the toggle's: push it down by the room above and below the control.
       .dropdown-menu {
-        margin-top: calc(-1 * tokens.$hermes-global-space-5);
+        margin-top: calc((#{header-variables.$hermes-header-height} - #{header-variables.$hermes-header-control-size}) / 2);
         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.
@@ -231,10 +246,6 @@
 
     @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;
     }
@@ -269,12 +280,15 @@
       }
     }
 
+    // The field lives inside the band and uses its colors: a white input in the middle of a dark
+    // bar is a hole. The outline is what delimits it, as a translucent veil.
     input[type='text'] {
-      border: none;
-      background: none;
+      border: tokens.$hermes-alias-object-border-width-100 solid header-variables.$hermes-header-search-border-color;
+      background: header-variables.$hermes-header-search-bg-color;
       color: header-variables.$hermes-header-search-input-font-color;
-      border-radius: density.$hermes-base-border-radius-s;
-      height: tokens.$hermes-global-space-11;
+      border-radius: header-variables.$hermes-header-control-radius;
+      height: header-variables.$hermes-header-control-size;
+      transition: border-color header-variables.$hermes-header-transition;
       padding: 0 0 0 calc(header-variables.$hermes-header-search-icon-size + 2 * header-variables.$hermes-header-search-gap);
       vertical-align: middle;
 
@@ -302,13 +316,14 @@
       }
 
       &:focus-visible {
-        outline: none;
+        outline: tokens.$hermes-alias-object-border-width-200 solid header-variables.$hermes-header-focus-color;
+        outline-offset: tokens.$hermes-global-space-3;
         border: header-variables.$hermes-header-search-border-active;
       }
 
       &:focus,
       &:active {
-        background: none;
+        background: header-variables.$hermes-header-search-bg-color;
       }
     }
   }

package/layout/nav/_responsive-nav.clarity.scss

@@ -129,7 +129,13 @@
         background: none;
         cursor: pointer;
 
-        @include mixins.equilateral(header-variables.$hermes-header-height);
+        // A control box centered in the bar (not a header-tall cell), like the other header
+        // controls: veil on hover, ring outside on focus.
+        @include mixins.equilateral(header-variables.$hermes-header-control-size);
+
+        flex: none;
+        border-radius: header-variables.$hermes-header-control-radius;
+        transition: background-color header-variables.$hermes-header-transition;
 
         // TODO: replace `hamburger` and `dots` to use HERMES-ICON `bars` and `ellipsis-vertical` respectively.
         // 2px to vertically align the trigger lines. display flex was not working on all browsers.
@@ -137,9 +143,13 @@
         text-align: center;
         white-space: nowrap;
 
-        &:focus {
-          // So that the outline styles aren't hidden because of the browser
-          outline-offset: calc(-1 * tokens.$hermes-global-space-4);
+        &:hover {
+          background-color: header-variables.$hermes-header-highlight-color;
+        }
+
+        &:focus-visible {
+          outline: tokens.$hermes-alias-object-border-width-200 solid header-variables.$hermes-header-focus-color;
+          outline-offset: tokens.$hermes-global-space-3;
         }
 
         @include header-mixins.header-nav-appearance();
@@ -224,10 +234,6 @@
     .main-container {
       .header-overflow-trigger {
         position: relative;
-
-        &::after {
-          @include header-mixins.header-section-divider();
-        }
       }
 
       .header {
@@ -235,11 +241,15 @@
           max-width: mixins.baselinePx(240);
           min-width: 0;
           overflow: hidden;
+
+          // The block clips its content, so the ring goes inside the link instead of outside.
+          & > a:focus-visible,
+          & > .nav-link:focus-visible {
+            outline-offset: calc(-1 * #{tokens.$hermes-global-space-3});
+          }
         }
 
         .header-hamburger-trigger + .branding {
-          padding-left: 0;
-          margin-left: calc(-1 * density.$hermes-base-horizontal-offset-m);
 
           //TODO: deprecate .hermes-icon, .logo
           .hermes-icon,
@@ -263,6 +273,7 @@
       &.open-overflow-menu {
         .header {
           .header-backdrop {
+            display: block;
             position: fixed;
             inset: 0;
             background: tokens.$hermes-alias-object-overlay-backdrop-background;

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

@@ -14,33 +14,50 @@
 @include mixins.exports('vertical-nav.properties') {
   @include mixins.root-or-host() {
     --hermes-vertical-nav-item-active-font-weight: #{tokens.$hermes-alias-typography-font-weight-semibold};
-    --hermes-vertical-nav-item-top-level-font-weight: #{tokens.$hermes-alias-typography-font-weight-semibold};
+    --hermes-vertical-nav-item-top-level-font-weight: #{tokens.$hermes-alias-typography-font-weight-medium};
     --hermes-vertical-nav-header-font-weight: #{tokens.$hermes-alias-typography-font-weight-semibold};
-    --hermes-vertical-nav-trigger-divider-border-width: #{tokens.$hermes-global-space-1};
-    // shadcn sidebar: item ativo/hover vira um pill arredondado (rounded-md),
-    // e a lista de itens ganha um respiro (inset) da borda do container em
-    // vez de ir de ponta a ponta.
+    --hermes-vertical-nav-trigger-divider-border-width: #{tokens.$hermes-alias-object-border-width-100};
+
+    // Item de lista de navegação: raio pequeno ("mora dentro de algo") e respiro de 8px entre a
+    // borda da coluna e os itens, em vez de itens de ponta a ponta.
     --hermes-vertical-nav-item-border-radius: #{mixins.baselinePx(6)};
     --hermes-vertical-nav-content-inset: #{mixins.baselinePx(8)};
 
+    // Trilho de largura. Expandida mostra ícone + texto; compacta é só a coluna de ícones. O piso
+    // e o teto valem para a coluna aberta: a largura medida (--hermes-vertical-nav-measured-width,
+    // escrita pelo componente) cresce entre eles conforme o rótulo mais comprido à vista.
+    --hermes-vertical-nav-width: #{mixins.baselinePx(240)};
+    --hermes-vertical-nav-max-width: #{mixins.baselinePx(360)};
+    // Respiro da coluna (8) + do item (8) + glifo + os mesmos 16 de volta. É o que deixa o ícone no
+    // MESMO x nos dois estados: a transição não o arrasta pela coluna.
+    --hermes-vertical-nav-rail-width: calc(var(--hermes-vertical-nav-icon-size) + #{mixins.baselinePx(32)});
+    --hermes-vertical-nav-transition-duration: 0.2s;
+
+    // Mesma escala que a coluna sempre teve (corpo de 14px, glifo `icon-size-s`): a referência usa
+    // 16/24, que no Hermes fica acima do resto da interface.
+    --hermes-vertical-nav-item-font-size: #{density.$hermes-base-typography-font-size-default};
+    --hermes-vertical-nav-child-font-size: #{density.$hermes-base-typography-font-size-default};
+    --hermes-vertical-nav-child-icon-size: var(--hermes-vertical-nav-icon-size);
+    --hermes-vertical-nav-item-gap: #{mixins.baselinePx(12)};
+    --hermes-vertical-nav-child-gap: #{mixins.baselinePx(4)};
+    // Recuo do submenu: o menor que ainda se lê. Cada pixel é cobrado da largura da coluna, porque
+    // o rótulo mais fundo tem que caber.
+    --hermes-vertical-nav-child-indent: #{mixins.baselinePx(4)};
+    --hermes-vertical-nav-child-padding-start: #{mixins.baselinePx(8)};
+
     &,
     & [hermes-density] {
       // Vertical Nav - Icons
       --hermes-vertical-nav-icon-size: #{density.$hermes-base-icon-size-s};
       --hermes-vertical-nav-icon-right-margin: #{density.$hermes-base-horizontal-offset-s};
       --hermes-vertical-nav-collapsed-caret-size: #{density.$hermes-base-icon-size-2xl};
+      --hermes-vertical-nav-caret-size: #{density.$hermes-base-icon-size-s};
 
-      // Vertical Nav - Align
-      --hermes-vertical-nav-item-padding: #{density.$hermes-base-vertical-offset-m} #{density.$hermes-base-horizontal-offset-m}
-        #{density.$hermes-base-vertical-offset-m} #{density.$hermes-base-horizontal-offset-xl};
-      // Antes compensava a ausência de ícone com um padding-left gigante
-      // (calc com o tamanho do ícone) pra alinhar o texto. Agora quem faz
-      // esse trabalho é o indent + linha vertical de .nav-group-children
-      // (ver _vertical-nav.clarity.scss) — aqui só o padding normal do item.
-      --hermes-vertical-nav-item-child-padding: #{density.$hermes-base-vertical-offset-m}
-        #{density.$hermes-base-horizontal-offset-m};
-      --hermes-vertical-nav-item-height: #{density.$hermes-base-row-height-m};
-      --hermes-vertical-nav-min-width: #{density.$hermes-base-layout-space-3xl};
+      // Vertical Nav - Align. Linha densa (32px): é lista de navegação, não um controle isolado.
+      --hermes-vertical-nav-item-padding: #{mixins.baselinePx(8)};
+      --hermes-vertical-nav-item-child-padding: #{mixins.baselinePx(8)};
+      --hermes-vertical-nav-item-height: #{mixins.baselinePx(32)};
+      --hermes-vertical-nav-min-width: var(--hermes-vertical-nav-rail-width);
       --hermes-vertical-nav-toggle-button-size: #{density.$hermes-base-row-height-m};
 
       // Vertical Nav - Header
@@ -52,20 +69,49 @@
     & [hermes-theme] {
       /* Vertical Nav */
       --hermes-vertical-nav-divider-color: #{tokens.$hermes-alias-object-border-color};
-      --hermes-vertical-nav-icon-active-color: #{tokens.$hermes-alias-object-interaction-color};
-      --hermes-vertical-nav-item-color: #{tokens.$hermes-alias-object-interaction-color};
-      --hermes-vertical-nav-item-active-color: #{tokens.$hermes-alias-object-interaction-color-active};
 
-      // Selected background colors
-      --hermes-vertical-nav-selected-bg-color: var(--hermes-alias-object-interaction-background-shade-selected);
-      --hermes-vertical-nav-selected-hover-bg-color: var(--hermes-alias-object-interaction-background-shade-selected-hover);
-      --hermes-vertical-nav-selected-active-bg-color: var(--hermes-alias-object-interaction-background-shade-selected-active);
+      // Texto neutro de alto contraste; quem carrega a cor da marca é o glifo. Segue só claro/escuro
+      // — a família escolhida (ver o eixo `primary` do preset, no addon `theme-builder`) nunca muda
+      // o fundo nem o texto da coluna, só o acento (glifo, link, seleção). Já existiu aqui um
+      // segundo eixo (`tertiary`) tingindo o fundo por família, lido errado de um comentário do
+      // app de referência: aquele token é cor categórica de gráfico lá, não fundo de navegação —
+      // a navegação de lá usa a mesma superfície do app, do jeito que está feito abaixo.
+      --hermes-vertical-nav-item-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-vertical-nav-item-active-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-vertical-nav-active-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-vertical-nav-child-icon-color: #{tokens.$hermes-alias-typography-color-300};
+
+      // Glifo na cor da marca em todos os itens: é ele que dá à coluna a leitura de navegação.
+      --hermes-vertical-nav-icon-color: #{tokens.$hermes-alias-object-interaction-color};
+      --hermes-vertical-nav-icon-active-color: #{tokens.$hermes-alias-object-interaction-color-active};
+
+      // Véu da cor da marca, e não um degrau neutro: o degrau neutro vizinho vale, em vários temas,
+      // a própria cor da barra, e o item em hover pintava o que já estava lá.
+      --hermes-vertical-nav-hover-bg-color: color-mix(
+        in srgb,
+        #{tokens.$hermes-alias-object-interaction-color} 14%,
+        transparent
+      );
+      --hermes-vertical-nav-active-bg-color: color-mix(
+        in srgb,
+        #{tokens.$hermes-alias-object-interaction-color} 26%,
+        transparent
+      );
+      // O selecionado é só a tinta, sem faixa lateral. O que o distingue do hover é o peso do texto
+      // e a cor do glifo; sob o ponteiro ele sobe para o véu forte.
+      --hermes-vertical-nav-selected-bg-color: var(--hermes-vertical-nav-hover-bg-color);
+      --hermes-vertical-nav-selected-hover-bg-color: var(--hermes-vertical-nav-active-bg-color);
+      --hermes-vertical-nav-selected-active-bg-color: var(--hermes-vertical-nav-active-bg-color);
 
-      // NOT selected background colors
       --hermes-vertical-nav-bg-color: var(--hermes-alias-object-interaction-background-shade);
-      --hermes-vertical-nav-hover-bg-color: var(--hermes-alias-object-interaction-background-shade-hover);
-      --hermes-vertical-nav-active-bg-color: var(--hermes-alias-object-interaction-background-shade-active);
-      --hermes-vertical-nav-active-color: #{tokens.$hermes-alias-object-interaction-color-active};
+
+      // Sombra só quando a coluna está POR CIMA do conteúdo e aberta: é a informação de que há duas
+      // camadas. Em repouso, com a largura da trilha, não há.
+      --hermes-vertical-nav-overlay-shadow: #{mixins.baselinePx(4)} 0 #{mixins.baselinePx(12)} 0
+        color-mix(in srgb, #{tokens.$hermes-alias-typography-color-400} 20%, transparent);
+      // Acima do conteúdo da página (datagrids sticky chegam a 502) e abaixo da gaveta responsiva
+      // (1038) e dos menus suspensos (1050).
+      --hermes-vertical-nav-overlay-z-index: 1000;
 
       // Vertical Nav - Trigger
       --hermes-vertical-nav-toggle-icon-color: #{tokens.$hermes-alias-object-interaction-color};
@@ -73,6 +119,10 @@
       --hermes-vertical-nav-toggle-icon-active-color: #{tokens.$hermes-alias-object-interaction-color-active};
       --hermes-vertical-nav-toggle-icon-disabled-color: #{tokens.$hermes-alias-object-interaction-color-disabled};
       --hermes-vertical-nav-trigger-divider-border-color: #{tokens.$hermes-alias-object-border-color};
+
+      // Vertical Nav - Footer
+      --hermes-vertical-nav-footer-text-color: #{tokens.$hermes-alias-typography-color-300};
+      --hermes-vertical-nav-menu-bg-color: #{tokens.$hermes-alias-object-container-background};
     }
   }
 }

package/layout/vertical-nav/_variables.vertical-nav.scss

@@ -52,3 +52,26 @@ $hermes-vertical-nav-trigger-divider-border-width: var(--hermes-vertical-nav-tri
 // Vertical Nav - Header
 $hermes-vertical-nav-header-font-weight: var(--hermes-vertical-nav-header-font-weight) !default;
 $hermes-vertical-nav-header-padding: var(--hermes-vertical-nav-header-padding) !default;
+
+// Vertical Nav - Layout
+$hermes-vertical-nav-width: var(--hermes-vertical-nav-width) !default;
+$hermes-vertical-nav-max-width: var(--hermes-vertical-nav-max-width) !default;
+$hermes-vertical-nav-rail-width: var(--hermes-vertical-nav-rail-width) !default;
+$hermes-vertical-nav-transition-duration: var(--hermes-vertical-nav-transition-duration) !default;
+$hermes-vertical-nav-overlay-shadow: var(--hermes-vertical-nav-overlay-shadow) !default;
+
+// Vertical Nav - Items
+$hermes-vertical-nav-icon-color: var(--hermes-vertical-nav-icon-color) !default;
+$hermes-vertical-nav-child-icon-color: var(--hermes-vertical-nav-child-icon-color) !default;
+$hermes-vertical-nav-child-icon-size: var(--hermes-vertical-nav-child-icon-size) !default;
+$hermes-vertical-nav-caret-size: var(--hermes-vertical-nav-caret-size) !default;
+$hermes-vertical-nav-item-font-size: var(--hermes-vertical-nav-item-font-size) !default;
+$hermes-vertical-nav-child-font-size: var(--hermes-vertical-nav-child-font-size) !default;
+$hermes-vertical-nav-item-gap: var(--hermes-vertical-nav-item-gap) !default;
+$hermes-vertical-nav-child-gap: var(--hermes-vertical-nav-child-gap) !default;
+$hermes-vertical-nav-child-indent: var(--hermes-vertical-nav-child-indent) !default;
+$hermes-vertical-nav-child-padding-start: var(--hermes-vertical-nav-child-padding-start) !default;
+
+// Vertical Nav - Footer
+$hermes-vertical-nav-footer-text-color: var(--hermes-vertical-nav-footer-text-color) !default;
+$hermes-vertical-nav-menu-bg-color: var(--hermes-vertical-nav-menu-bg-color) !default;