@hermes-ui/angular 0.1.4

package/modal/_modal.clarity.scss

@@ -0,0 +1,379 @@
+/*
+ * 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 'sass:meta';
+@use '../styles/mixins';
+@use '../styles/variables/variables';
+@use 'variables.modal' as modal-variables;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+@use '../styles/variables/variables.density' as density;
+
+@include meta.load-css('properties.modal');
+@include mixins.exports('modal.clarity') {
+  .hermes-side-panel-pinned-right-sm {
+    padding-right: modal-variables.$hermes-modal-sm-width !important;
+  }
+
+  .hermes-side-panel-pinned-right-md {
+    padding-right: modal-variables.$hermes-modal-md-width !important;
+  }
+
+  .hermes-side-panel-pinned-right-lg {
+    padding-right: modal-variables.$hermes-modal-lg-width !important;
+  }
+
+  .hermes-side-panel-pinned-right-xl {
+    padding-right: modal-variables.$hermes-modal-xl-width !important;
+  }
+
+  $modal-height-width-ratio: 0.5;
+  // We need to be able to show at least title and buttons
+  $min-bottom-side-panel-height: calc(modal-variables.$hermes-modal-sm-width * 0.6);
+
+  .hermes-side-panel-pinned-bottom-sm {
+    padding-bottom: calc(modal-variables.$hermes-modal-sm-width * $modal-height-width-ratio) !important;
+  }
+
+  .hermes-side-panel-pinned-bottom-md {
+    padding-bottom: calc(modal-variables.$hermes-modal-md-width * $modal-height-width-ratio) !important;
+  }
+
+  .hermes-side-panel-pinned-bottom-lg {
+    padding-bottom: calc(modal-variables.$hermes-modal-lg-width * $modal-height-width-ratio) !important;
+  }
+
+  .hermes-side-panel-pinned-bottom-xl {
+    padding-bottom: calc(modal-variables.$hermes-modal-xl-width * $modal-height-width-ratio) !important;
+  }
+
+  .hermes-modal-host {
+    overflow: hidden;
+    position: relative;
+
+    .modal,
+    .modal-backdrop {
+      position: absolute;
+    }
+
+    .hermes-modal-host-scrollable {
+      height: 100%;
+      overflow-y: auto;
+    }
+  }
+
+  .modal {
+    position: fixed;
+    inset: 0;
+    z-index: map.get(variables.$hermes-layers, modal);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: calc(modal-variables.$hermes-modal-vertical-space * 2) calc(modal-variables.$hermes-modal-horizontal-space * 2);
+    max-width: 100%;
+
+    @media screen and (max-width: map.get(variables.$hermes-grid-breakpoints, sm)) {
+      padding: calc(modal-variables.$hermes-modal-vertical-space / 2) calc(modal-variables.$hermes-modal-horizontal-space / 2);
+    }
+
+    .modal-body {
+      padding: modal-variables.$hermes-modal-title-gap modal-variables.$hermes-modal-horizontal-space
+        modal-variables.$hermes-modal-content-gap;
+    }
+  }
+
+  .side-panel {
+    .modal {
+      left: initial;
+      padding: 0;
+
+      .modal-content-wrapper {
+        height: 100%;
+
+        .modal-content {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+        }
+      }
+
+      .modal-dialog {
+        border: none;
+        border-radius: 0;
+        height: 100%;
+      }
+
+      &.modal-full-screen {
+        inset: 0;
+        padding: 0;
+      }
+
+      .modal-body-wrapper {
+        flex: 1 1;
+        max-height: 100%;
+      }
+    }
+
+    &.side-panel-bottom {
+      .modal:not(.modal-full-screen) {
+        top: initial;
+        width: 100%;
+        justify-content: end;
+        max-height: 100%;
+        min-height: $min-bottom-side-panel-height;
+        height: calc(modal-variables.$hermes-modal-md-width * $modal-height-width-ratio);
+
+        &:has(.modal-sm) {
+          height: calc(modal-variables.$hermes-modal-sm-width * $modal-height-width-ratio);
+        }
+
+        &:has(.modal-lg) {
+          height: calc(modal-variables.$hermes-modal-lg-width * $modal-height-width-ratio);
+        }
+
+        &:has(.modal-xl) {
+          height: calc(modal-variables.$hermes-modal-xl-width * $modal-height-width-ratio);
+        }
+      }
+
+      .modal-dialog {
+        max-height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  .modal-dialog {
+    position: relative;
+    z-index: map.get(variables.$hermes-layers, modal);
+    width: modal-variables.$hermes-modal-md-width;
+    border-radius: modal-variables.$hermes-modal-border-radius;
+    box-shadow: modal-variables.$hermes-modal-content-box-shadow;
+    border: tokens.$hermes-alias-object-border-width-100 solid tokens.$hermes-alias-object-container-border-color;
+    background-color: modal-variables.$hermes-modal-bg-color;
+    max-width: 100%;
+
+    &.modal-sm {
+      width: modal-variables.$hermes-modal-sm-width;
+    }
+
+    &.modal-lg {
+      width: modal-variables.$hermes-modal-lg-width;
+    }
+
+    &.modal-xl {
+      width: modal-variables.$hermes-modal-xl-width;
+    }
+  }
+
+  .modal-header {
+    border-bottom: none;
+    padding: modal-variables.$hermes-modal-vertical-space modal-variables.$hermes-modal-horizontal-space 0;
+
+    & + .modal-footer {
+      padding-top: modal-variables.$hermes-modal-content-gap;
+    }
+
+    // TODO: This class is used only in the hermes-modal template.
+    // It should be merged this with `.modal-header` in a major version
+    // because this would be breaking for the static modals.
+    &--accessible {
+      @extend .modal-header;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    .modal-title,
+    .side-panel-title {
+      color: modal-variables.$hermes-modal-title-color;
+      margin: 0;
+
+      &:not([hermes-text]) {
+        //hermes-text do not have color, margin
+        font-family: modal-variables.$hermes-modal-title-font-family; //TODO remove line and PI tokens in GA 17+
+        //TODO remove API tokens overrides in GA 17+
+
+        @include mixins.generate-typography-token(
+          'SECTION-20-STD',
+          (
+            font-size: modal-variables.$hermes-modal-title-font-size,
+            font-weight: modal-variables.$hermes-modal-title-font-weight,
+            line-height: modal-variables.$hermes-modal-title-line-height,
+            letter-spacing: modal-variables.$hermes-modal-title-letter-spacing,
+          )
+        );
+      }
+    }
+
+    .close,
+    .pinnable {
+      font-size: initial;
+      line-height: initial;
+
+      hermes-icon,
+      hermes-icon {
+        fill: modal-variables.$hermes-modal-close-color;
+
+        &:not([size]) {
+          // per measurement, this results in an icon that is 24x24...
+
+          @include mixins.equilateral(modal-variables.$hermes-modal-icon-size);
+        }
+      }
+
+      &:hover {
+        hermes-icon,
+        hermes-icon {
+          fill: variables.$hermes-close-color-hover;
+        }
+
+        &:active {
+          hermes-icon,
+          hermes-icon {
+            fill: variables.$hermes-close-color-active;
+          }
+        }
+      }
+    }
+
+    .pinnable {
+      padding: 0;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+      margin-right: modal-variables.$hermes-modal-horizontal-gap;
+      appearance: none;
+    }
+  }
+
+  .modal-title-wrapper {
+    flex: 1;
+    // this wrapper only receives focus programmatically (cdkFocusInitial, for screen
+    // readers), never via keyboard tabbing, so it doesn't need its own visible focus ring
+    outline: none;
+
+    .modal-title,
+    .side-panel-title {
+      h3 {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .modal-body-wrapper {
+    // This doesn't do much, but at least with several paragraphs in the content
+    // it doesn't mess up the modal's proportions.
+    max-height: 70vh;
+    overflow: hidden auto;
+
+    .modal-body,
+    .side-panel-body {
+      color: tokens.$hermes-alias-typography-color-400;
+
+      @include mixins.generate-typography-token('BODY-14-RG-STD');
+
+      // a <p> (or any block element) written inside the body carries its own default
+      // margin, which stacks on top of the padding below and inflates the title/footer
+      // gaps beyond what --hermes-modal-title-gap/--hermes-modal-content-gap set
+      & > :first-child {
+        margin-top: 0;
+      }
+
+      & > :last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    & > :first-child {
+      margin-top: 0;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .modal-footer {
+    padding: 0 modal-variables.$hermes-modal-horizontal-space modal-variables.$hermes-modal-vertical-space;
+  }
+
+  .modal-footer,
+  .side-panel-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: modal-variables.$hermes-modal-horizontal-gap;
+
+    .btn {
+      //switched right margin to left because footer is right aligned
+      margin: 0;
+    }
+  }
+
+  @media screen and (max-width: map.get(variables.$hermes-grid-breakpoints, md)) and (orientation: landscape) {
+    .modal-body-wrapper {
+      max-height: 55vh;
+    }
+  }
+  @media screen and (max-width: map.get(variables.$hermes-grid-breakpoints, sm)) {
+    .modal-body-wrapper {
+      max-height: 55vh;
+    }
+  }
+
+  .modal-backdrop {
+    position: fixed;
+    inset: -100vh 0 0 -100vw;
+    background-color: modal-variables.$hermes-modal-backdrop-color;
+    backdrop-filter: blur(modal-variables.$hermes-modal-backdrop-blur);
+    -webkit-backdrop-filter: blur(modal-variables.$hermes-modal-backdrop-blur);
+    z-index: map.get(variables.$hermes-layers, modal-bg);
+
+    &.static {
+      pointer-events: none;
+    }
+  }
+
+  // modal-nav is only used in wizards
+  .modal .modal-nav {
+    display: none;
+  }
+
+  // full-screen modals
+  .modal.modal-full-screen {
+    padding: modal-variables.$hermes-modal-vertical-space modal-variables.$hermes-modal-horizontal-space;
+    height: 100%;
+
+    .modal-dialog {
+      display: flex;
+      width: 100%;
+      height: 100%;
+
+      .modal-content-wrapper {
+        display: flex;
+        flex-grow: 1;
+      }
+
+      // This cannot be nested inside `.modal-content-wrapper` because that class is not documented for static css-only modals.
+      .modal-content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+      }
+
+      .modal-body-wrapper,
+      // This is needed because the `.modal-body-wrapper` class is not documented for static css-only modals.
+      .modal-body {
+        // Fill space to push footer to bottom.
+        flex-grow: 1;
+        max-height: 100%;
+      }
+    }
+  }
+}

package/modal/_properties.modal.scss

@@ -0,0 +1,57 @@
+/*
+ * 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:color';
+@use '../styles/mixins';
+@use '../styles/variables/variables';
+@use './variables.modal' as modal-variables;
+@use '../styles/variables/variables.density' as density;
+@use '../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('modal.properties') {
+  @include mixins.root-or-host() {
+    // sizes
+    --hermes-modal-sm-width: #{mixins.baselinePx(288)};
+    --hermes-modal-md-width: #{mixins.baselinePx(576)};
+    --hermes-modal-lg-width: #{mixins.baselinePx(864)};
+    --hermes-modal-xl-width: #{mixins.baselinePx(1152)};
+    --hermes-modal-title-font-family: #{variables.$hermes-font};
+    // shadcn dialog titles read as font-semibold (600), bolder than the shared section
+    // heading weight (500), for more contrast against the body text below it
+    --hermes-modal-title-font-weight: #{tokens.$hermes-alias-typography-font-weight-semibold};
+    // matches shadcn's AlertDialogHeader gap-1.5 (title-to-description) and the
+    // AlertDialogContent grid's gap-4 (content-to-footer). Kept as raw px, not the
+    // density/rem scale, so the gap stays exactly 6px/16px regardless of root font size.
+    --hermes-modal-title-gap: 6px;
+    --hermes-modal-content-gap: 16px;
+    --hermes-modal-title-letter-spacing: #{mixins.baselinePx(-0.2)};
+
+    &,
+    & [hermes-density] {
+      // shadcn-style rounding, one step rounder than the card (0.875rem) since the modal
+      // is the most elevated surface
+      --hermes-modal-border-radius: 1rem;
+      --hermes-modal-title-font-size: #{density.$hermes-base-typography-font-size-section};
+      --hermes-modal-title-line-height: #{density.$hermes-base-typography-line-height-24};
+      --hermes-modal-backdrop-blur: 4px;
+    }
+
+    &,
+    & [hermes-theme] {
+      // color
+      --hermes-modal-close-color: var(--hermes-close-color);
+      --hermes-modal-bg-color: #{tokens.$hermes-alias-object-container-background};
+      --hermes-modal-content-box-shadow: #{tokens.$hermes-alias-object-shadow-300};
+      // shadcn dialogs use a lighter, blurred backdrop (~30% black) instead of the
+      // heavier flat 60% black scrim shared with e.g. the mobile nav overlay
+      --hermes-modal-backdrop-color: hsl(0deg 0% 0% / 30%);
+
+      // title
+      --hermes-modal-title-color: #{tokens.$hermes-alias-typography-color-400};
+    }
+  }
+}

package/modal/_variables.modal.scss

@@ -0,0 +1,41 @@
+/*
+ * 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:color';
+@use '../styles/core/tokens/variables.tokens' as tokens;
+@use '../styles/variables/variables.density' as density;
+
+// Usage: ../modal/_modal.clarity.scss
+$hermes-modal-horizontal-space: density.$hermes-base-horizontal-offset-2xl !default;
+$hermes-modal-vertical-space: density.$hermes-base-vertical-offset-2xl !default;
+$hermes-modal-vertical-gap: density.$hermes-base-gap-xl !default;
+$hermes-modal-horizontal-gap: density.$hermes-base-gap-s !default;
+$hermes-modal-title-gap: var(--hermes-modal-title-gap) !default;
+$hermes-modal-content-gap: var(--hermes-modal-content-gap) !default;
+$hermes-modal-border-radius: var(--hermes-modal-border-radius) !default;
+$hermes-modal-icon-size: density.$hermes-base-icon-size-l !default;
+
+$hermes-modal-close-color: var(--hermes-modal-close-color) !default;
+$hermes-modal-bg-color: var(--hermes-modal-bg-color) !default;
+$hermes-modal-content-box-shadow: var(--hermes-modal-content-box-shadow) !default;
+$hermes-modal-backdrop-color: var(--hermes-modal-backdrop-color) !default;
+$hermes-modal-backdrop-blur: var(--hermes-modal-backdrop-blur) !default;
+
+// Usage: ../modal/_modal.clarity.scss
+// Usage: ../wizard/_wizard.clarity.scss
+$hermes-modal-sm-width: var(--hermes-modal-sm-width) !default;
+$hermes-modal-md-width: var(--hermes-modal-md-width) !default;
+$hermes-modal-lg-width: var(--hermes-modal-lg-width) !default;
+$hermes-modal-xl-width: var(--hermes-modal-xl-width) !default;
+
+// Usage: ../modal/_modal.clarity.scss
+$hermes-modal-title-color: var(--hermes-modal-title-color) !default;
+$hermes-modal-title-font-size: var(--hermes-modal-title-font-size) !default;
+$hermes-modal-title-font-family: var(--hermes-modal-title-font-family) !default;
+$hermes-modal-title-font-weight: var(--hermes-modal-title-font-weight) !default;
+$hermes-modal-title-line-height: var(--hermes-modal-title-line-height) !default;
+$hermes-modal-title-letter-spacing: var(--hermes-modal-title-letter-spacing) !default;