@hermes-ui/angular 0.1.4

package/styles/variables/_properties.density.scss

@@ -0,0 +1,225 @@
+/*
+ * 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 '../core/tokens/variables.tokens' as tokens;
+@use '../mixins';
+
+@include mixins.exports('density.properties') {
+  @include mixins.root-or-host() {
+    // Typography
+    --hermes-base-typography-font-size-caption-small: #{mixins.baselinePx(10)};
+    --hermes-base-typography-font-size-caption: #{mixins.baselinePx(11)};
+    --hermes-base-typography-font-size-button: #{tokens.$hermes-global-space-6};
+    --hermes-base-typography-font-size-inline: #{mixins.baselinePx(13)};
+    --hermes-base-typography-font-size-default: #{mixins.baselinePx(14)};
+    --hermes-base-typography-font-size-sub-section: #{tokens.$hermes-global-space-7};
+    --hermes-base-typography-font-size-section: #{mixins.baselinePx(20)};
+    --hermes-base-typography-font-size-title: #{tokens.$hermes-global-space-9};
+    --hermes-base-typography-font-size-heading: #{tokens.$hermes-global-space-9}; // deprecated. TO be removed in v18.0
+    --hermes-base-typography-font-size-headline: #{tokens.$hermes-global-space-10};
+    --hermes-base-typography-font-size-display: #{mixins.baselinePx(40)};
+    --hermes-base-typography-line-height-12: #{tokens.$hermes-global-space-6};
+    --hermes-base-typography-line-height-16: #{tokens.$hermes-global-space-7};
+    --hermes-base-typography-line-height-20: #{mixins.baselinePx(20)};
+    --hermes-base-typography-line-height-24: #{tokens.$hermes-global-space-9};
+    --hermes-base-typography-line-height-32: #{tokens.$hermes-global-space-10};
+    --hermes-base-typography-line-height-36: #{tokens.$hermes-global-space-11};
+    --hermes-base-typography-line-height-44: #{mixins.baselinePx(44)};
+
+    // Borders
+    --hermes-base-border-stroke: #{tokens.$hermes-global-space-2};
+    --hermes-base-border-radius-xs: #{tokens.$hermes-global-space-2};
+    --hermes-base-border-radius-s: #{tokens.$hermes-global-space-3};
+    --hermes-base-border-radius-m: #{tokens.$hermes-global-space-5};
+    --hermes-base-border-radius-l: #{tokens.$hermes-global-space-6};
+    --hermes-base-border-radius-xl: #{tokens.$hermes-global-space-7};
+
+    // Offsets & Spacing
+    --hermes-base-offset-0: #{tokens.$hermes-global-space-0};
+    --hermes-base-vertical-offset-2xs: #{tokens.$hermes-global-space-2};
+    --hermes-base-vertical-offset-xs: #{tokens.$hermes-global-space-3};
+    --hermes-base-vertical-offset-s: #{tokens.$hermes-global-space-3};
+    --hermes-base-vertical-offset-m: #{tokens.$hermes-global-space-4};
+    --hermes-base-vertical-offset-l: #{tokens.$hermes-global-space-6};
+    --hermes-base-vertical-offset-xl: #{tokens.$hermes-global-space-7};
+    --hermes-base-vertical-offset-2xl: #{tokens.$hermes-global-space-9};
+    --hermes-base-vertical-offset-3xl: #{tokens.$hermes-global-space-12};
+    --hermes-base-vertical-offset-multi-row-s: #{tokens.$hermes-global-space-3};
+    --hermes-base-vertical-offset-multi-row-m: #{tokens.$hermes-global-space-5};
+    --hermes-base-vertical-offset-multi-row-inline-s: #{tokens.$hermes-global-space-3};
+    --hermes-base-vertical-offset-multi-row-inline-m: #{tokens.$hermes-global-space-5};
+    --hermes-base-vertical-offset-multi-row-outline-s: #{tokens.$hermes-global-space-4};
+    --hermes-base-vertical-offset-multi-row-outline-m: #{mixins.baselinePx(10)};
+    --hermes-base-horizontal-offset-2xs: #{tokens.$hermes-global-space-2};
+    --hermes-base-horizontal-offset-xs: #{tokens.$hermes-global-space-3};
+    --hermes-base-horizontal-offset-s: #{tokens.$hermes-global-space-3};
+    --hermes-base-horizontal-offset-m: #{tokens.$hermes-global-space-5};
+    --hermes-base-horizontal-offset-l: #{tokens.$hermes-global-space-6};
+    --hermes-base-horizontal-offset-xl: #{tokens.$hermes-global-space-7};
+    --hermes-base-horizontal-offset-2xl: #{tokens.$hermes-global-space-9};
+    --hermes-base-horizontal-offset-3xl: #{tokens.$hermes-global-space-12};
+
+    // Row Heights
+    --hermes-base-row-height-xs: #{tokens.$hermes-global-space-7};
+    --hermes-base-row-height-s: #{tokens.$hermes-global-space-9};
+    --hermes-base-row-height-m: #{tokens.$hermes-global-space-10};
+    --hermes-base-row-height-l: #{tokens.$hermes-global-space-11};
+    --hermes-base-row-height-20: #{mixins.baselinePx(20)};
+    --hermes-base-dg-row-height: #{tokens.$hermes-global-space-10};
+    --hermes-base-dg-compact-row-height: #{tokens.$hermes-global-space-9};
+
+    // Gaps
+    --hermes-base-gap-xs: #{tokens.$hermes-global-space-3};
+    --hermes-base-gap-s: #{tokens.$hermes-global-space-5};
+    --hermes-base-gap-m: #{tokens.$hermes-global-space-6};
+    --hermes-base-gap-l: #{tokens.$hermes-global-space-7};
+    --hermes-base-gap-xl: #{tokens.$hermes-global-space-9};
+    --hermes-base-gap-2xl: #{tokens.$hermes-global-space-10};
+
+    // Icons
+    --hermes-base-icon-size-xs: #{tokens.$hermes-global-space-6};
+    --hermes-base-icon-size-s: #{tokens.$hermes-global-space-7};
+    --hermes-base-icon-size-m: #{mixins.baselinePx(20)};
+    --hermes-base-icon-size-l: #{tokens.$hermes-global-space-9};
+    --hermes-base-icon-size-xl: #{mixins.baselinePx(28)};
+    --hermes-base-icon-size-2xl: #{tokens.$hermes-global-space-10};
+    --hermes-base-icon-size-3xl: #{tokens.$hermes-global-space-10};
+    --hermes-base-icon-size-4xl: #{tokens.$hermes-global-space-13};
+    --hermes-base-icon-tooltip: var(--hermes-base-icon-size-s);
+
+    // Layout Spaces
+    --hermes-base-layout-space-0: #{tokens.$hermes-global-space-0};
+    --hermes-base-layout-space-4xs: #{tokens.$hermes-global-space-1};
+    --hermes-base-layout-space-3xs: #{tokens.$hermes-global-space-2};
+    --hermes-base-layout-space-2xs: #{tokens.$hermes-global-space-3};
+    --hermes-base-layout-space-xs: #{tokens.$hermes-global-space-5};
+    --hermes-base-layout-space-s: #{tokens.$hermes-global-space-6};
+    --hermes-base-layout-space-m: #{tokens.$hermes-global-space-7};
+    --hermes-base-layout-space-l: #{tokens.$hermes-global-space-9};
+    --hermes-base-layout-space-xl: #{tokens.$hermes-global-space-10};
+    --hermes-base-layout-space-2xl: #{mixins.baselinePx(40)};
+    --hermes-base-layout-space-3xl: #{tokens.$hermes-global-space-12};
+    --hermes-base-layout-space-4xl: #{tokens.$hermes-global-space-13};
+    --hermes-base-layout-space-5xl: #{tokens.$hermes-global-space-15};
+
+    // Spinners
+    --hermes-base-spinner-s: var(--hermes-base-icon-size-s);
+    --hermes-base-spinner-m: #{tokens.$hermes-global-space-10};
+    --hermes-base-spinner-l: var(--hermes-base-layout-space-4xl);
+    // density spinner strokes are only available in code since they are impossible to be applied in figma
+    --hermes-base-spinner-stroke-s: #{tokens.$hermes-alias-object-border-width-200};
+    --hermes-base-spinner-stroke-m: #{tokens.$hermes-alias-object-border-width-400};
+    --hermes-base-spinner-stroke-l: #{tokens.$hermes-global-space-4};
+
+    // Components
+    --hermes-base-header-height: #{mixins.baselinePx(56)};
+    --hermes-base-tree-node-height: #{tokens.$hermes-global-space-10};
+    --hermes-base-progress-bar-height: #{tokens.$hermes-global-space-6};
+    --hermes-base-control-group-gap: #{tokens.$hermes-global-space-0};
+  }
+
+  [hermes-density='compact'] {
+    --hermes-base-typography-font-size-caption-small: #{mixins.baselinePx(10)};
+    --hermes-base-typography-font-size-caption: #{mixins.baselinePx(11)};
+    --hermes-base-typography-font-size-button: #{tokens.$hermes-global-space-6};
+    --hermes-base-typography-font-size-inline: #{tokens.$hermes-global-space-6};
+    --hermes-base-typography-font-size-default: #{mixins.baselinePx(13)};
+    --hermes-base-typography-font-size-sub-section: #{mixins.baselinePx(14)};
+    --hermes-base-typography-font-size-section: #{tokens.$hermes-global-space-7};
+    --hermes-base-typography-font-size-title: #{tokens.$hermes-global-space-9};
+    --hermes-base-typography-font-size-heading: #{tokens.$hermes-global-space-9}; // deprecated. TO be removed in v18.0
+    --hermes-base-typography-font-size-headline: #{mixins.baselinePx(28)};
+    --hermes-base-typography-font-size-display: #{tokens.$hermes-global-space-11};
+    --hermes-base-typography-line-height-12: #{tokens.$hermes-global-space-6};
+    --hermes-base-typography-line-height-16: #{tokens.$hermes-global-space-7};
+    --hermes-base-typography-line-height-20: #{tokens.$hermes-global-space-8};
+    --hermes-base-typography-line-height-24: #{mixins.baselinePx(20)};
+    --hermes-base-typography-line-height-32: #{mixins.baselinePx(28)};
+    --hermes-base-typography-line-height-36: #{tokens.$hermes-global-space-10};
+    --hermes-base-typography-line-height-44: #{tokens.$hermes-global-space-10};
+    --hermes-base-border-stroke: #{tokens.$hermes-global-space-1};
+    --hermes-base-border-radius-xs: #{tokens.$hermes-global-space-2};
+    --hermes-base-border-radius-s: #{tokens.$hermes-global-space-2};
+    --hermes-base-border-radius-m: #{tokens.$hermes-global-space-3};
+    --hermes-base-border-radius-l: #{tokens.$hermes-global-space-5};
+    --hermes-base-border-radius-xl: #{mixins.baselinePx(10)};
+    --hermes-base-offset-0: #{tokens.$hermes-global-space-0};
+    --hermes-base-vertical-offset-2xs: #{tokens.$hermes-global-space-1};
+    --hermes-base-vertical-offset-xs: #{tokens.$hermes-global-space-2};
+    --hermes-base-vertical-offset-s: #{tokens.$hermes-global-space-2};
+    --hermes-base-vertical-offset-m: #{mixins.baselinePx(3)};
+    --hermes-base-vertical-offset-l: #{tokens.$hermes-global-space-5};
+    --hermes-base-vertical-offset-xl: #{tokens.$hermes-global-space-6};
+    --hermes-base-vertical-offset-2xl: #{mixins.baselinePx(20)};
+    --hermes-base-vertical-offset-3xl: #{tokens.$hermes-global-space-11};
+    --hermes-base-vertical-offset-multi-row-s: #{tokens.$hermes-global-space-2};
+    --hermes-base-vertical-offset-multi-row-m: #{tokens.$hermes-global-space-3};
+    --hermes-base-vertical-offset-multi-row-inline-s: #{tokens.$hermes-global-space-2};
+    --hermes-base-vertical-offset-multi-row-inline-m: #{tokens.$hermes-global-space-3};
+    --hermes-base-vertical-offset-multi-row-outline-s: #{tokens.$hermes-global-space-3};
+    --hermes-base-vertical-offset-multi-row-outline-m: #{tokens.$hermes-global-space-4};
+    --hermes-base-horizontal-offset-2xs: #{tokens.$hermes-global-space-1};
+    --hermes-base-horizontal-offset-xs: #{tokens.$hermes-global-space-2};
+    --hermes-base-horizontal-offset-s: #{tokens.$hermes-global-space-2};
+    --hermes-base-horizontal-offset-m: #{tokens.$hermes-global-space-4};
+    --hermes-base-horizontal-offset-l: #{tokens.$hermes-global-space-5};
+    --hermes-base-horizontal-offset-xl: #{tokens.$hermes-global-space-6};
+    --hermes-base-horizontal-offset-2xl: #{mixins.baselinePx(20)};
+    --hermes-base-horizontal-offset-3xl: #{tokens.$hermes-global-space-11};
+    --hermes-base-row-height-xs: #{tokens.$hermes-global-space-7};
+    --hermes-base-row-height-s: #{mixins.baselinePx(20)};
+    --hermes-base-row-height-m: #{tokens.$hermes-global-space-9};
+    --hermes-base-row-height-l: #{mixins.baselinePx(28)};
+    --hermes-base-row-height-20: #{tokens.$hermes-global-space-7};
+    --hermes-base-dg-row-height: #{tokens.$hermes-global-space-9};
+    --hermes-base-dg-compact-row-height: #{mixins.baselinePx(20)};
+    --hermes-base-gap-xs: #{tokens.$hermes-global-space-2};
+    --hermes-base-gap-s: #{tokens.$hermes-global-space-4};
+    --hermes-base-gap-m: #{mixins.baselinePx(10)};
+    --hermes-base-gap-l: #{tokens.$hermes-global-space-6};
+    --hermes-base-gap-xl: #{mixins.baselinePx(20)};
+    --hermes-base-gap-2xl: #{tokens.$hermes-global-space-9};
+    --hermes-base-icon-size-xs: #{tokens.$hermes-global-space-6};
+    --hermes-base-icon-size-s: #{tokens.$hermes-global-space-7};
+    --hermes-base-icon-size-m: #{tokens.$hermes-global-space-8};
+    --hermes-base-icon-size-l: #{mixins.baselinePx(20)};
+    --hermes-base-icon-size-xl: #{tokens.$hermes-global-space-9};
+    --hermes-base-icon-size-2xl: #{mixins.baselinePx(28)};
+    --hermes-base-icon-size-3xl: #{mixins.baselinePx(28)};
+    --hermes-base-icon-size-4xl: #{mixins.baselinePx(60)};
+    --hermes-base-layout-space-0: #{tokens.$hermes-global-space-0};
+    --hermes-base-layout-space-4xs: #{tokens.$hermes-global-space-1};
+    --hermes-base-layout-space-3xs: #{tokens.$hermes-global-space-2};
+    --hermes-base-layout-space-2xs: #{tokens.$hermes-global-space-3};
+    --hermes-base-layout-space-xs: #{tokens.$hermes-global-space-4};
+    --hermes-base-layout-space-s: #{tokens.$hermes-global-space-6};
+    --hermes-base-layout-space-m: #{tokens.$hermes-global-space-7};
+    --hermes-base-layout-space-l: #{mixins.baselinePx(20)};
+    --hermes-base-layout-space-xl: #{tokens.$hermes-global-space-9};
+    --hermes-base-layout-space-2xl: #{tokens.$hermes-global-space-10};
+    --hermes-base-layout-space-3xl: #{mixins.baselinePx(40)};
+    --hermes-base-layout-space-4xl: #{mixins.baselinePx(56)};
+    --hermes-base-layout-space-5xl: #{mixins.baselinePx(80)};
+    --hermes-base-icon-tooltip: var(--hermes-base-icon-size-s);
+    --hermes-base-spinner-s: var(--hermes-base-icon-size-s);
+    --hermes-base-spinner-m: #{mixins.baselinePx(28)};
+    --hermes-base-spinner-l: var(--hermes-base-layout-space-4xl); // default
+
+    // density spinner strokes are only available in code since they are impossible to be applied in figma
+    --hermes-base-spinner-stroke-s: #{tokens.$hermes-alias-object-border-width-200};
+    --hermes-base-spinner-stroke-m: #{tokens.$hermes-alias-object-border-width-300};
+    --hermes-base-spinner-stroke-l: #{tokens.$hermes-alias-object-border-width-400}; // default
+    --hermes-base-header-height: #{tokens.$hermes-global-space-12};
+    --hermes-base-tree-node-height: #{tokens.$hermes-global-space-9};
+    --hermes-base-progress-bar-height: #{mixins.baselinePx(10)};
+    --hermes-base-control-group-gap: #{tokens.$hermes-global-space-2};
+
+    .datagrid .datagrid-cell:not(.datagrid-detail-caret, .datagrid-expandable-caret, .datagrid-row-actions) {
+      @include mixins.cell-children-aligment();
+    }
+  }
+}

package/styles/variables/_properties.global.scss

@@ -0,0 +1,51 @@
+/*
+ * 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 '../mixins';
+@use 'variables.global';
+@use '../core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('global.properties') {
+  @include mixins.root-or-host() {
+    --hermes-basefont-size: #{variables.$hermes-basefont-size};
+
+    // app borders
+    --hermes-global-borderradius: #{tokens.$hermes-alias-object-border-radius-100};
+    --hermes-global-borderwidth: #{tokens.$hermes-alias-object-border-width-100};
+
+    &,
+    & [hermes-theme] {
+      // component close icon colors
+      --hermes-close-color: #{tokens.$hermes-alias-object-interaction-color};
+      --hermes-close-color-hover: #{tokens.$hermes-alias-object-interaction-color-hover};
+      --hermes-close-color-active: #{tokens.$hermes-alias-object-interaction-color-active};
+
+      // app background
+      --hermes-global-app-background: #{tokens.$hermes-alias-object-app-background};
+
+      // app selection colors
+      --hermes-global-selection-color: #{tokens.$hermes-alias-object-interaction-background-selected};
+      --hermes-global-on-selection-color: #{tokens.$hermes-alias-object-interaction-color-selected};
+
+      // app hover colors
+      --hermes-global-hover-color: #{tokens.$hermes-alias-typography-link-color-hover};
+
+      // app font colors
+      --hermes-global-content-header-font-color: #{tokens.$hermes-alias-typography-color-400};
+      --hermes-global-font-color: #{tokens.$hermes-alias-typography-color-500};
+
+      // app success/error colors
+      --hermes-global-success-color: #{tokens.$hermes-alias-status-success};
+      --hermes-global-error-color: #{tokens.$hermes-alias-status-danger};
+    }
+  }
+
+  @include mixins.root-or-host() {
+    // global box-shadows
+    --hermes-popover-box-shadow-color: #{variables.$hermes-popover-box-shadow-color};
+  }
+}

package/styles/variables/_properties.layout.scss

@@ -0,0 +1,21 @@
+/*
+ * 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 '../mixins';
+@use 'variables.density' as density;
+
+@include mixins.exports('layout.properties') {
+  @include mixins.root-or-host() {
+    &,
+    & [hermes-density] {
+      --hermes-grid-gutter-width: #{density.$hermes-base-horizontal-offset-2xl};
+      --hermes-grid-container-padding: calc(var(--hermes-grid-gutter-width) * 0.5);
+      --hermes-grid-column-padding: calc(var(--hermes-grid-gutter-width) * 0.5);
+      --hermes-grid-row-margin: calc(var(--hermes-grid-gutter-width) * -0.5);
+    }
+  }
+}

package/styles/variables/_properties.scss

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+@forward 'properties.layout';
+@forward 'properties.global';
+@forward 'properties.typography';
+@forward 'properties.density';

package/styles/variables/_properties.typography.scss

@@ -0,0 +1,164 @@
+/*
+ * 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 '../mixins';
+@use 'variables.density' as density;
+@use '../core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('typography.properties') {
+  @include mixins.root-or-host() {
+    // Temporal internal use only. Should be removed once HERMES token based family is available.
+    --hermes-metropolis-font-family: Geist, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
+    --hermes-body-font: var(--hermes-metropolis-font-family); // #{tokens.$hermes-alias-typography-font-family};
+    --hermes-font: var(--hermes-body-font);
+    --hermes-display-font: var(--hermes-metropolis-font-family); //#{tokens.$hermes-alias-typography-header-font-family};
+    --hermes-font-weight-light: #{tokens.$hermes-alias-typography-font-weight-light};
+    --hermes-font-weight-regular: #{tokens.$hermes-alias-typography-font-weight-regular};
+    --hermes-font-weight-semibold: #{tokens.$hermes-alias-typography-font-weight-semibold};
+    --hermes-font-weight-bold: #{tokens.$hermes-alias-typography-font-weight-bold};
+    --hermes-font-weight-extrabold: #{tokens.$hermes-alias-typography-font-weight-extrabold};
+
+    // Header styles
+    //H1 - login_productName
+    //'DISPLAY-40'
+    --hermes-h1-font-weight: #{tokens.$hermes-alias-typography-display-font-weight};
+    --hermes-h1-font-family: var(--hermes-display-font);
+    --hermes-h1-letter-spacing: #{mixins.baselinePx(-0.5)};
+
+    //H2 - login_trademark, page_mainHeading
+    //'HEADLINE-32'
+    --hermes-h2-font-family: var(--hermes-display-font);
+    --hermes-h2-font-weight: #{tokens.$hermes-alias-typography-headline-font-weight};
+    --hermes-h2-letter-spacing: #{mixins.baselinePx(-0.4)};
+
+    //H3 - login_subtitle, modal_header, page_secondaryHeading
+    //'TITLE-24-EXP'
+    --hermes-h3-font-family: var(--hermes-display-font);
+    --hermes-h3-font-weight: #{tokens.$hermes-alias-typography-title-font-weight};
+    --hermes-h3-letter-spacing: #{mixins.baselinePx(-0.2)};
+
+    //H4 - card titles, page_tertiaryHeading
+    //'SECTION-20-STD'
+    --hermes-h4-font-family: var(--hermes-display-font);
+    --hermes-h4-font-weight: #{tokens.$hermes-alias-typography-section-font-weight};
+    --hermes-h4-letter-spacing: #{mixins.baselinePx(-0.2)};
+
+    //H5 - dgrid placeholder, datagrid_column_toggle_title, form_block_label, nav_title, page_introParagraph, page_sectionHeader
+    //'SUBSECTION-16-EXP'
+    --hermes-h5-font-family: var(--hermes-display-font);
+    --hermes-h5-font-weight: #{tokens.$hermes-alias-typography-subsection-font-weight};
+    --hermes-h5-letter-spacing: #{mixins.baselinePx(-0.2)};
+
+    //H6 - Heading
+    //'MESSAGE-16-EXP'
+    --hermes-h6-font-family: var(--hermes-display-font);
+    --hermes-h6-font-weight: #{tokens.$hermes-alias-typography-message-font-weight};
+    --hermes-h6-letter-spacing: #{mixins.baselinePx(-0.2)};
+
+    // Non-header text styles
+    //P0 - Intro text
+    //'BODY-14-RG-STD'
+    --hermes-p0-font-weight: #{tokens.$hermes-alias-typography-body-font-weight};
+    --hermes-p0-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P1 - card text, dropdown_text, page_bodyText, tab_text, toc_text
+    //'BODY-14-RG-STD'
+    --hermes-p1-font-weight: #{tokens.$hermes-alias-typography-body-font-weight};
+    --hermes-p1-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P2 - form_label, stackview_header
+    //'SECONDARY-13-MD-EXP'
+    --hermes-p2-font-weight: #{tokens.$hermes-alias-typography-font-weight-medium};
+    --hermes-p2-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P3 - alerts, form_group_fields, stackview_text, table_text, tooltip_text
+    //'SECONDARY-13-RG-EXP'
+    --hermes-p3-font-weight: #{tokens.$hermes-alias-typography-secondary-font-weight};
+    --hermes-p3-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P4 - small alerts, dropdown_header, vertical_nav_header
+    //'SECONDARY-13-SB-STD'
+    --hermes-p4-font-weight: #{tokens.$hermes-alias-typography-font-weight-semibold};
+    --hermes-p4-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P5
+    //'SECONDARY-13-RG-EXP'
+    --hermes-p5-font-weight: #{tokens.$hermes-alias-typography-secondary-font-weight};
+    --hermes-p5-letter-spacing: #{mixins.baselinePx(-0.1)};
+
+    //P6 - card link btns, form_subtext, table_header
+    //'CAPTION-LG-11-STD'
+    --hermes-p6-font-weight: #{tokens.$hermes-alias-typography-caption-font-weight};
+    --hermes-p6-letter-spacing: #{mixins.baselinePx(0.2)};
+
+    //P7 - label_text
+    //'CAPTION-SM-10'
+    --hermes-p7-font-weight: #{tokens.$hermes-alias-typography-smallcaption-font-weight};
+    --hermes-p7-letter-spacing: #{mixins.baselinePx(0.5)};
+
+    //P8
+    //'CAPTION-SM-10'
+    --hermes-p8-font-weight: #{tokens.$hermes-alias-typography-smallcaption-font-weight};
+    --hermes-p8-letter-spacing: #{mixins.baselinePx(0.5)};
+
+    &,
+    & [hermes-density] {
+      --hermes-h1-font-size: #{density.$hermes-base-typography-font-size-display};
+      --hermes-h1-line-height: #{density.$hermes-base-typography-line-height-44};
+      --hermes-h2-font-size: #{density.$hermes-base-typography-font-size-headline};
+      --hermes-h2-line-height: #{density.$hermes-base-typography-line-height-36};
+      --hermes-h3-font-size: #{density.$hermes-base-typography-font-size-title};
+      --hermes-h3-line-height: #{density.$hermes-base-typography-line-height-32};
+      --hermes-h4-font-size: #{density.$hermes-base-typography-font-size-section};
+      --hermes-h4-line-height: #{density.$hermes-base-typography-line-height-24};
+      --hermes-h5-font-size: #{density.$hermes-base-typography-font-size-sub-section};
+      --hermes-h5-line-height: #{density.$hermes-base-typography-line-height-24};
+      --hermes-h6-font-size: #{density.$hermes-base-typography-font-size-sub-section};
+      --hermes-h6-line-height: #{density.$hermes-base-typography-line-height-24};
+      --hermes-p0-font-size: #{density.$hermes-base-typography-font-size-default};
+      --hermes-p0-line-height: #{density.$hermes-base-typography-line-height-20};
+      --hermes-p1-font-size: #{density.$hermes-base-typography-font-size-default};
+      --hermes-p1-line-height: #{density.$hermes-base-typography-line-height-20};
+      --hermes-p2-font-size: #{density.$hermes-base-typography-font-size-inline};
+      --hermes-p2-line-height: #{density.$hermes-base-typography-line-height-24};
+      --hermes-p3-font-size: #{density.$hermes-base-typography-font-size-inline};
+      --hermes-p3-line-height: #{density.$hermes-base-typography-line-height-24};
+      --hermes-p4-font-size: #{density.$hermes-base-typography-font-size-inline};
+      --hermes-p4-line-height: #{density.$hermes-base-typography-line-height-20};
+      --hermes-p5-font-size: #{density.$hermes-base-typography-font-size-inline};
+      --hermes-p5-line-height: #{density.$hermes-base-typography-line-height-24};
+      --hermes-p6-font-size: #{density.$hermes-base-typography-font-size-caption};
+      --hermes-p6-line-height: #{density.$hermes-base-typography-line-height-16};
+      --hermes-p7-font-size: #{density.$hermes-base-typography-font-size-caption-small};
+      --hermes-p7-line-height: #{density.$hermes-base-typography-line-height-12};
+      --hermes-p8-font-size: #{density.$hermes-base-typography-font-size-caption-small};
+      --hermes-p8-line-height: #{density.$hermes-base-typography-line-height-12};
+    }
+
+    &,
+    & [hermes-theme] {
+      --hermes-h1-color: #{tokens.$hermes-alias-typography-color-300};
+      --hermes-h2-color: #{tokens.$hermes-alias-typography-color-300};
+      --hermes-h3-color: #{tokens.$hermes-alias-typography-color-300};
+      --hermes-h4-color: #{tokens.$hermes-alias-typography-color-300};
+      --hermes-h5-color: #{tokens.$hermes-alias-typography-color-300};
+      --hermes-h6-color: #{tokens.$hermes-alias-typography-color-300};
+      --hermes-p0-color: #{tokens.$hermes-alias-typography-color-450};
+      --hermes-p1-color: #{tokens.$hermes-alias-typography-color-450};
+      --hermes-p2-color: #{tokens.$hermes-alias-typography-color-450};
+      --hermes-p3-color: #{tokens.$hermes-alias-typography-color-450};
+      --hermes-p4-color: #{tokens.$hermes-alias-typography-color-450};
+      --hermes-p5-color: #{tokens.$hermes-alias-typography-color-450};
+      --hermes-p6-color: #{tokens.$hermes-alias-typography-color-450};
+      --hermes-p7-color: #{tokens.$hermes-alias-typography-color-450};
+      --hermes-p8-color: #{tokens.$hermes-alias-typography-color-450};
+
+      // List item li
+      --hermes-list-item-color: #{tokens.$hermes-alias-typography-color-400};
+    }
+  }
+}

package/styles/variables/_variables.density.scss

@@ -0,0 +1,116 @@
+/*
+ * 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.
+ */
+$hermes-base-typography-font-size-caption-small: var(--hermes-base-typography-font-size-caption-small);
+$hermes-base-typography-font-size-caption: var(--hermes-base-typography-font-size-caption);
+$hermes-base-typography-font-size-button: var(--hermes-base-typography-font-size-button);
+$hermes-base-typography-font-size-inline: var(--hermes-base-typography-font-size-inline);
+$hermes-base-typography-font-size-default: var(--hermes-base-typography-font-size-default);
+$hermes-base-typography-font-size-sub-section: var(--hermes-base-typography-font-size-sub-section);
+$hermes-base-typography-font-size-section: var(--hermes-base-typography-font-size-section);
+$hermes-base-typography-font-size-title: var(--hermes-base-typography-font-size-title);
+// hermes-base-typography-font-size-heading is deprecated. TO be removed in v18.0
+$hermes-base-typography-font-size-heading: var(--hermes-base-typography-font-size-heading);
+$hermes-base-typography-font-size-headline: var(--hermes-base-typography-font-size-headline);
+$hermes-base-typography-font-size-display: var(--hermes-base-typography-font-size-display);
+
+$hermes-base-typography-line-height-12: var(--hermes-base-typography-line-height-12);
+$hermes-base-typography-line-height-16: var(--hermes-base-typography-line-height-16);
+$hermes-base-typography-line-height-20: var(--hermes-base-typography-line-height-20);
+$hermes-base-typography-line-height-24: var(--hermes-base-typography-line-height-24);
+$hermes-base-typography-line-height-32: var(--hermes-base-typography-line-height-32);
+$hermes-base-typography-line-height-36: var(--hermes-base-typography-line-height-36);
+$hermes-base-typography-line-height-44: var(--hermes-base-typography-line-height-44);
+
+$hermes-base-border-stroke: var(--hermes-base-border-stroke);
+
+$hermes-base-border-radius-xs: var(--hermes-base-border-radius-xs);
+$hermes-base-border-radius-s: var(--hermes-base-border-radius-s);
+$hermes-base-border-radius-m: var(--hermes-base-border-radius-m);
+$hermes-base-border-radius-l: var(--hermes-base-border-radius-l);
+$hermes-base-border-radius-xl: var(--hermes-base-border-radius-xl);
+
+$hermes-base-offset-0: var(--hermes-base-offset-0);
+
+$hermes-base-vertical-offset-2xs: var(--hermes-base-vertical-offset-2xs);
+$hermes-base-vertical-offset-xs: var(--hermes-base-vertical-offset-xs);
+$hermes-base-vertical-offset-s: var(--hermes-base-vertical-offset-s);
+$hermes-base-vertical-offset-m: var(--hermes-base-vertical-offset-m);
+$hermes-base-vertical-offset-l: var(--hermes-base-vertical-offset-l);
+$hermes-base-vertical-offset-xl: var(--hermes-base-vertical-offset-xl);
+$hermes-base-vertical-offset-2xl: var(--hermes-base-vertical-offset-2xl);
+$hermes-base-vertical-offset-3xl: var(--hermes-base-vertical-offset-3xl);
+
+$hermes-base-vertical-offset-multi-row-s: var(--hermes-base-vertical-offset-multi-row-s);
+$hermes-base-vertical-offset-multi-row-m: var(--hermes-base-vertical-offset-multi-row-m);
+$hermes-base-vertical-offset-multi-row-inline-s: var(--hermes-base-vertical-offset-multi-row-inline-s);
+$hermes-base-vertical-offset-multi-row-inline-m: var(--hermes-base-vertical-offset-multi-row-inline-m);
+$hermes-base-vertical-offset-multi-row-outline-s: var(--hermes-base-vertical-offset-multi-row-outline-s);
+$hermes-base-vertical-offset-multi-row-outline-m: var(--hermes-base-vertical-offset-multi-row-outline-m);
+
+$hermes-base-horizontal-offset-2xs: var(--hermes-base-horizontal-offset-2xs);
+$hermes-base-horizontal-offset-xs: var(--hermes-base-horizontal-offset-xs);
+$hermes-base-horizontal-offset-s: var(--hermes-base-horizontal-offset-s);
+$hermes-base-horizontal-offset-m: var(--hermes-base-horizontal-offset-m);
+$hermes-base-horizontal-offset-l: var(--hermes-base-horizontal-offset-l);
+$hermes-base-horizontal-offset-xl: var(--hermes-base-horizontal-offset-xl);
+$hermes-base-horizontal-offset-2xl: var(--hermes-base-horizontal-offset-2xl);
+$hermes-base-horizontal-offset-3xl: var(--hermes-base-horizontal-offset-3xl);
+
+$hermes-base-row-height-xs: var(--hermes-base-row-height-xs);
+$hermes-base-row-height-s: var(--hermes-base-row-height-s);
+$hermes-base-row-height-m: var(--hermes-base-row-height-m);
+$hermes-base-row-height-l: var(--hermes-base-row-height-l);
+$hermes-base-row-height-20: var(--hermes-base-row-height-20);
+$hermes-base-dg-row-height: var(--hermes-base-dg-row-height);
+$hermes-base-dg-compact-row-height: var(--hermes-base-dg-compact-row-height);
+
+$hermes-base-gap-xs: var(--hermes-base-gap-xs);
+$hermes-base-gap-s: var(--hermes-base-gap-s);
+$hermes-base-gap-m: var(--hermes-base-gap-m);
+$hermes-base-gap-l: var(--hermes-base-gap-l);
+$hermes-base-gap-xl: var(--hermes-base-gap-xl);
+$hermes-base-gap-2xl: var(--hermes-base-gap-2xl);
+
+$hermes-base-icon-size-xs: var(--hermes-base-icon-size-xs);
+$hermes-base-icon-size-s: var(--hermes-base-icon-size-s);
+$hermes-base-icon-size-m: var(--hermes-base-icon-size-m);
+$hermes-base-icon-size-l: var(--hermes-base-icon-size-l);
+$hermes-base-icon-size-xl: var(--hermes-base-icon-size-xl);
+$hermes-base-icon-size-2xl: var(--hermes-base-icon-size-2xl);
+$hermes-base-icon-size-3xl: var(--hermes-base-icon-size-3xl);
+$hermes-base-icon-size-4xl: var(--hermes-base-icon-size-4xl);
+
+$hermes-base-layout-space-0: var(--hermes-base-layout-space-0);
+$hermes-base-layout-space-4xs: var(--hermes-base-layout-space-4xs);
+$hermes-base-layout-space-3xs: var(--hermes-base-layout-space-3xs);
+$hermes-base-layout-space-2xs: var(--hermes-base-layout-space-2xs);
+$hermes-base-layout-space-xs: var(--hermes-base-layout-space-xs);
+$hermes-base-layout-space-s: var(--hermes-base-layout-space-s);
+$hermes-base-layout-space-m: var(--hermes-base-layout-space-m);
+$hermes-base-layout-space-l: var(--hermes-base-layout-space-l);
+$hermes-base-layout-space-xl: var(--hermes-base-layout-space-xl);
+$hermes-base-layout-space-2xl: var(--hermes-base-layout-space-2xl);
+$hermes-base-layout-space-3xl: var(--hermes-base-layout-space-3xl);
+$hermes-base-layout-space-4xl: var(--hermes-base-layout-space-4xl);
+$hermes-base-layout-space-5xl: var(--hermes-base-layout-space-5xl);
+
+$hermes-base-icon-tooltip: var(--hermes-base-icon-tooltip);
+
+$hermes-base-spinner-s: var(--hermes-base-spinner-s);
+$hermes-base-spinner-m: var(--hermes-base-spinner-m);
+$hermes-base-spinner-l: var(--hermes-base-spinner-l);
+
+$hermes-base-spinner-stroke-s: var(--hermes-base-spinner-stroke-s);
+$hermes-base-spinner-stroke-m: var(--hermes-base-spinner-stroke-m);
+$hermes-base-spinner-stroke-l: var(--hermes-base-spinner-stroke-l);
+
+$hermes-base-header-height: var(--hermes-base-header-height);
+$hermes-base-tree-node-height: var(--hermes-base-tree-node-height);
+
+$hermes-base-progress-bar-height: var(--hermes-base-progress-bar-height);
+
+$hermes-base-control-group-gap: var(--hermes-base-control-group-gap);