@hermes-ui/angular 0.1.4

package/forms/styles/_select.clarity.scss

@@ -0,0 +1,158 @@
+/*
+ * 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 'mixins.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+
+@include mixins.exports('forms.select') {
+  // Trigger - deliberately reuses the same box model tokens as hermes-input/hermes-native-select
+  // (height, padding, font, border radius) so a select trigger and a text input line up exactly.
+  .hermes-select-trigger-button {
+    @include forms-mixins.form-fields-appearance();
+
+    display: inline-flex;
+    width: fit-content;
+    align-items: center;
+    justify-content: space-between;
+    gap: forms-variables.$hermes-forms-input-group-icon-action-size;
+    padding: forms-variables.$hermes-forms-input-padding;
+    max-height: forms-variables.$hermes-forms-input-wrapper-height;
+    height: forms-variables.$hermes-forms-input-wrapper-height;
+    font-size: forms-variables.$hermes-forms-input-font-size;
+    line-height: forms-variables.$hermes-forms-input-line-height;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:not([disabled]) {
+      @include forms-mixins.field-focus-ring();
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+
+      @include forms-mixins.disabled-form-fields();
+    }
+  }
+
+  .hermes-select-trigger-icon {
+    flex: 0 0 auto;
+    opacity: 0.5;
+  }
+
+  .hermes-select-value {
+    overflow: hidden;
+    flex: 1 1 auto;
+    text-align: left;
+    text-overflow: ellipsis;
+  }
+
+  .hermes-select-placeholder {
+    color: forms-variables.$hermes-forms-placeholder-color;
+  }
+
+  // Content (popup)
+  .hermes-select-content {
+    display: flex;
+    flex-direction: column;
+    min-width: forms-variables.$hermes-select-content-min-width;
+    max-height: forms-variables.$hermes-select-content-max-height;
+    overflow: hidden;
+    border: tokens.$hermes-alias-object-border-width-100 solid forms-variables.$hermes-select-content-border-color;
+    border-radius: forms-variables.$hermes-forms-border-radius;
+    background-color: forms-variables.$hermes-select-content-background-color;
+    box-shadow: forms-variables.$hermes-select-content-shadow;
+  }
+
+  .hermes-select-viewport {
+    overflow-y: auto;
+    padding: forms-variables.$hermes-select-content-padding;
+  }
+
+  .hermes-select-scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: forms-variables.$hermes-select-content-padding;
+    border: none;
+    background: none;
+    color: forms-variables.$hermes-select-scroll-button-color;
+    cursor: default;
+  }
+
+  // Items
+  .hermes-select-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: forms-variables.$hermes-select-item-gap;
+    padding-block: forms-variables.$hermes-select-item-padding-block;
+    padding-inline-start: forms-variables.$hermes-select-item-padding-inline-start;
+    padding-inline-end: forms-variables.$hermes-select-item-padding-inline-end;
+    border-radius: forms-variables.$hermes-select-item-border-radius;
+    color: forms-variables.$hermes-select-item-color;
+    font-size: forms-variables.$hermes-forms-input-font-size;
+    line-height: forms-variables.$hermes-forms-input-line-height;
+    cursor: default;
+    user-select: none;
+    outline: none;
+
+    &:hover:not(.disabled),
+    &:focus:not(.disabled) {
+      background-color: forms-variables.$hermes-select-item-hover-background-color;
+      color: forms-variables.$hermes-select-item-hover-color;
+    }
+
+    &.selected {
+      background-color: forms-variables.$hermes-select-item-selected-background-color;
+    }
+
+    &.disabled {
+      color: forms-variables.$hermes-select-item-disabled-color;
+      cursor: not-allowed;
+    }
+  }
+
+  .hermes-select-item-text {
+    overflow: hidden;
+    flex: 1 1 auto;
+    text-overflow: ellipsis;
+  }
+
+  .hermes-select-item-indicator {
+    position: absolute;
+    right: forms-variables.$hermes-select-item-indicator-offset;
+    display: flex;
+
+    @include mixins.equilateral(forms-variables.$hermes-select-item-indicator-size);
+
+    align-items: center;
+    justify-content: center;
+  }
+
+  // Group / label / separator
+  .hermes-select-group {
+    display: block;
+  }
+
+  .hermes-select-label {
+    display: block;
+    padding-block: forms-variables.$hermes-select-item-padding-block;
+    padding-inline: forms-variables.$hermes-select-item-padding-inline-start;
+    color: forms-variables.$hermes-select-label-color;
+
+    @include mixins.generate-typography-token('CAPTION-LG-11-CPT');
+  }
+
+  .hermes-select-separator {
+    display: block;
+    margin: forms-variables.$hermes-select-content-padding calc(-1 * #{forms-variables.$hermes-select-content-padding});
+    height: tokens.$hermes-alias-object-border-width-100;
+    background-color: forms-variables.$hermes-select-separator-color;
+  }
+}

package/forms/styles/_textarea.clarity.scss

@@ -0,0 +1,71 @@
+/*
+ * 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 'mixins.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('forms.textarea') {
+  // @TODO Fix selectors when old forms are removed to allow better defaults
+  .hermes-textarea-wrapper {
+    white-space: nowrap;
+    display: flex;
+
+    .hermes-validate-icon {
+      margin-left: 0;
+    }
+  }
+
+  .hermes-textarea {
+    max-width: calc(100% - forms-variables.$hermes-forms-baseline);
+    height: auto;
+    resize: vertical;
+    border: tokens.$hermes-alias-object-border-width-100 solid forms-variables.$hermes-forms-border-color;
+    background: forms-variables.$hermes-forms-textarea-background-color;
+    color: forms-variables.$hermes-forms-text-color;
+    border-radius: forms-variables.$hermes-forms-textarea-border-radius;
+    box-shadow: forms-variables.$hermes-forms-shadow;
+    padding: density.$hermes-base-vertical-offset-xl density.$hermes-base-horizontal-offset-xl;
+
+    @include mixins.generate-typography-token('SECONDARY-13-RG-STD');
+
+    @include forms-mixins.field-focus-ring();
+
+    &:disabled {
+      @include forms-mixins.disabled-form-fields();
+
+      background-color: forms-variables.$hermes-forms-textarea-disabled-background;
+      border-color: forms-variables.$hermes-forms-border-disabled-color;
+    }
+  }
+
+  .hermes-success .hermes-textarea {
+    border-color: forms-variables.$hermes-forms-valid-color;
+
+    @include forms-mixins.field-focus-ring(forms-variables.$hermes-forms-valid-color);
+  }
+
+  .hermes-error .hermes-textarea {
+    border-color: forms-variables.$hermes-forms-invalid-color;
+
+    @include forms-mixins.field-focus-ring(forms-variables.$hermes-forms-invalid-color);
+  }
+
+  .hermes-control-container textarea {
+    width: auto; // @TODO remove when removing old forms - forced 100% width by old forms
+  }
+
+  .hermes-form-control.row .hermes-textarea-wrapper {
+    max-width: calc(100% - forms-variables.$hermes-forms-baseline);
+  }
+
+  .hermes-form-compact .hermes-textarea-wrapper .hermes-textarea {
+    @include forms-mixins.form-flatten-compact-adjustments();
+  }
+}

package/forms/styles/_toggles.clarity.scss

@@ -0,0 +1,209 @@
+/*
+ * 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:meta';
+@use '../../button/variables.toggles' as toggle-variables;
+@use '../../styles/variables/variables.density' as density;
+@use 'variables.forms' as forms-variables;
+@use '../../styles/mixins';
+@use 'mixins.forms' as forms-mixins;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include meta.load-css('../../button/properties.toggles');
+@include mixins.exports('toggles.clarity') {
+  $mark-half-size: calc(#{forms-variables.$hermes-forms-checkbox-mark-size} * 0.5);
+
+  //Remove the default checkbox appearance
+  %custom-checkbox {
+    @include mixins.hermes-appearance-normal();
+  }
+
+  .hermes-toggle-wrapper {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    margin-right: density.$hermes-base-gap-m;
+    min-height: toggle-variables.$hermes-toggle-height;
+    justify-content: start;
+    padding: density.$hermes-base-vertical-offset-multi-row-inline-s 0;
+
+    @include forms-mixins.checkbox-radio-toggle-control-group-gap();
+
+    label {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      flex: 1 1 auto;
+    }
+
+    // Toggle Switch background
+    input[type='checkbox'] {
+      position: relative;
+
+      @extend %custom-checkbox;
+
+      height: toggle-variables.$hermes-toggle-switch-base-height;
+      width: toggle-variables.$hermes-toggle-switch-base-width;
+      flex: 0 0 auto;
+      border-radius: density.$hermes-base-border-radius-xl; // Style outline radius properly
+      background-color: toggle-variables.$hermes-toggle-bg-color-off;
+
+      @include forms-mixins.hermes-toggle-transition-styles;
+
+      transition-property: background-color;
+
+      &:not(:disabled) {
+        cursor: pointer;
+      }
+
+      // Toggle Switch dot
+      &::before {
+        position: absolute;
+        display: inline-block;
+        content: '';
+        border-radius: tokens.$hermes-alias-object-border-radius-300;
+        border: tokens.$hermes-alias-object-border-width-400 solid toggle-variables.$hermes-toggle-handle-border-color;
+        background-color: toggle-variables.$hermes-toggle-handle-bg-color;
+        left: 0;
+
+        @include mixins.equilateral(toggle-variables.$hermes-toggle-dot-diameter);
+        @include forms-mixins.hermes-toggle-transition-styles;
+
+        transition-property: left, border-width, border-color;
+      }
+
+      // Toggle Switch check
+      &::after {
+        position: absolute;
+        content: '';
+        visibility: hidden;
+
+        @include forms-mixins.hermes-toggle-transition-styles;
+
+        left: #{tokens.$hermes-global-space-3};
+        transition-property: visibility, left, border-color;
+        height: calc(#{$mark-half-size} + #{tokens.$hermes-global-space-1});
+        width: forms-variables.$hermes-forms-checkbox-mark-size;
+        border-left: forms-variables.$hermes-forms-checkbox-mark-border-size solid
+          toggle-variables.$hermes-toggle-bg-color-off;
+        border-bottom: forms-variables.$hermes-forms-checkbox-mark-border-size solid
+          toggle-variables.$hermes-toggle-bg-color-off;
+        transform: translate(0, $mark-half-size) rotate(-45deg);
+      }
+
+      &:focus {
+        @include mixins.include-outline-style-form-fields(mixins.baselinePx(3));
+      }
+
+      &:checked {
+        background-color: toggle-variables.$hermes-toggle-bg-color-on;
+
+        &::before {
+          border-width: tokens.$hermes-alias-object-border-width-200;
+          border-color: toggle-variables.$hermes-toggle-handle-border-color-on;
+          left: calc(toggle-variables.$hermes-toggle-switch-base-width - toggle-variables.$hermes-toggle-dot-diameter);
+        }
+
+        &::after {
+          visibility: visible;
+          left: mixins.baselinePx(20);
+          border-color: toggle-variables.$hermes-toggle-bg-color-on;
+        }
+      }
+
+      &:disabled {
+        // toggle disabled/off bg color
+        background-color: toggle-variables.$hermes-toggle-disabled-off-border-color;
+        // toggle disabled/off border color (excluding the handle circle)
+        border-color: toggle-variables.$hermes-toggle-disabled-off-border-color;
+
+        + label {
+          cursor: not-allowed;
+        }
+
+        &:not(:checked) {
+          left: 0;
+        }
+
+        &::before {
+          // toggle handle color for disabled/off and inner part of handle disabled/on
+          background-color: toggle-variables.$hermes-toggle-disabled-off-bg-color;
+          border-color: toggle-variables.$hermes-toggle-disabled-off-handle-border-color;
+        }
+
+        &::after {
+          border-color: toggle-variables.$hermes-toggle-disabled-off-border-color;
+        }
+      }
+
+      &:checked:disabled {
+        // toggle disabled/on border color
+        border-color: toggle-variables.$hermes-toggle-disabled-on-border-color;
+        // toggle disabled/on bg color
+        background-color: toggle-variables.$hermes-toggle-disabled-on-bg-color;
+
+        &::before {
+          // toggle disabled on handle circle border color
+          border-color: toggle-variables.$hermes-toggle-disabled-on-handle-border-color;
+        }
+
+        &::after {
+          // toggle disabled on handle circle border color
+          border-color: toggle-variables.$hermes-toggle-disabled-on-border-color;
+        }
+      }
+    }
+
+    &.disabled {
+      label {
+        cursor: not-allowed;
+      }
+
+      input[type='checkbox']:checked::before {
+        border-color: toggle-variables.$hermes-toggle-disabled-on-border-color;
+        background-color: toggle-variables.$hermes-toggle-disabled-on-bg-color;
+      }
+    }
+
+    &.right-label {
+      flex-flow: row-reverse;
+    }
+
+    .hermes-control-label {
+      display: block;
+
+      @include mixins.generate-typography-token('SECONDARY-13-RG-CPT');
+
+      padding: 0 0 0 density.$hermes-base-horizontal-offset-m;
+      margin-top: 0;
+    }
+  }
+
+  // These are the inline styles overrides
+  .hermes-control-inline .hermes-toggle-wrapper .hermes-control-label {
+    display: inline-block;
+    margin-right: 0;
+  }
+
+  .hermes-form-compact .hermes-toggle-wrapper {
+    margin-top: 0;
+  }
+
+  // This sets the option to move the toggles to the right of the label
+  .hermes-toggle-right {
+    .hermes-toggle-wrapper {
+      flex-flow: row-reverse;
+    }
+
+    label,
+    .hermes-control-label {
+      display: inline-block;
+      padding-left: 0;
+      padding-right: density.$hermes-base-horizontal-offset-m;
+    }
+  }
+}

package/forms/styles/_variables.forms.scss

@@ -0,0 +1,156 @@
+/*
+ * 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 '../../styles/variables/variables.density' as density;
+
+// Structure
+$hermes-forms-baseline: var(--hermes-forms-baseline);
+$hermes-forms-icon-size: var(--hermes-forms-icon-size);
+$hermes-form-disabled-background-color: var(--hermes-form-disabled-background-color) !default;
+
+// Generic
+$hermes-forms-label-color: var(--hermes-forms-label-color) !default;
+$hermes-forms-text-color: var(--hermes-forms-text-color) !default;
+$hermes-forms-invalid-color: var(--hermes-forms-invalid-color) !default;
+$hermes-forms-invalid-text-color: var(--hermes-forms-invalid-text-color) !default;
+$hermes-forms-valid-color: var(--hermes-forms-valid-color) !default;
+$hermes-forms-valid-text-color: var(--hermes-forms-valid-text-color) !default;
+$hermes-forms-subtext-color: var(--hermes-forms-subtext-color) !default;
+$hermes-forms-placeholder-color: var(--hermes-forms-placeholder-color) !default;
+// Accessibility fox for vpat-7719; this aligns with core
+$hermes-forms-border-color: var(--hermes-forms-border-color) !default;
+$hermes-forms-focused-color: var(--hermes-forms-focused-color) !default;
+$hermes-forms-icon-color: #{tokens.$hermes-alias-object-interaction-color} !default;
+$hermes-forms-border-radius: var(--hermes-forms-border-radius) !default;
+$hermes-forms-background-color: var(--hermes-forms-background-color) !default;
+$hermes-forms-shadow: var(--hermes-forms-shadow) !default;
+
+$hermes-forms-subtext-disabled-color: var(--hermes-forms-subtext-disabled-color) !default;
+$hermes-forms-border-disabled-color: var(--hermes-forms-border-disabled-color) !default;
+$hermes-forms-text-disabled-color: var(--hermes-forms-text-disabled-color) !default;
+$hermes-forms-label-disabled-color: var(--hermes-forms-label-disabled-color) !default;
+$hermes-forms-placeholder-disabled-color: var(--hermes-forms-placeholder-disabled-color) !default;
+
+// Input
+$hermes-forms-input-padding: var(--hermes-forms-input-padding);
+$hermes-forms-input-wrapper-height: var(--hermes-forms-input-wrapper-height);
+$hermes-forms-input-font-size: var(--hermes-forms-input-font-size);
+$hermes-forms-input-line-height: var(--hermes-forms-input-line-height);
+
+// Input group
+$hermes-forms-input-group-icon-action-size: var(--hermes-forms-input-group-icon-action-size);
+$hermes-forms-input-group-icon-disabled-color: var(--hermes-forms-input-group-icon-disabled-color);
+
+// Typographic - obsolete should be removed ATM
+$hermes-forms-label-font-weight: var(--hermes-forms-label-font-weight) !default;
+
+// Textarea
+$hermes-forms-textarea-background-color: var(--hermes-forms-textarea-background-color) !default;
+$hermes-forms-textarea-disabled-background: var(--hermes-forms-textarea-disabled-background);
+$hermes-forms-textarea-border-radius: var(--hermes-forms-textarea-border-radius);
+
+// Select
+$hermes-forms-native-select-hover-border-color: var(--hermes-forms-native-select-hover-border-color) !default;
+$hermes-forms-native-select-hover-background: var(--hermes-forms-native-select-hover-background) !default;
+$hermes-forms-native-select-disabled-color: var(--hermes-forms-native-select-disabled-color) !default;
+$hermes-forms-native-select-disabled-border-color: var(--hermes-forms-native-select-disabled-border-color) !default;
+$hermes-forms-native-select-option-color: var(--hermes-forms-native-select-option-color) !default;
+$hermes-forms-native-select-option-background-color: var(--hermes-forms-native-select-option-background-color) !default;
+$hermes-forms-native-select-multiple-background-color: var(--hermes-forms-native-select-multiple-background-color) !default;
+$hermes-forms-native-select-multiple-border-color: var(--hermes-forms-native-select-multiple-border-color) !default;
+$hermes-forms-native-select-multiple-option-color: var(--hermes-forms-native-select-multiple-option-color) !default;
+$hermes-forms-native-select-multiple-selected-option-background-color: var(
+  --hermes-forms-native-select-multiple-selected-option-background-color
+) !default;
+$hermes-forms-native-select-caret-color: var(--hermes-forms-native-select-caret-color) !default;
+$hermes-forms-native-select-caret-hover-color: var(--hermes-forms-native-select-caret-hover-color) !default;
+$hermes-forms-native-select-caret-size: var(--hermes-forms-native-select-caret-size) !default;
+
+// Select (rich, popup-based)
+$hermes-select-content-min-width: var(--hermes-select-content-min-width) !default;
+$hermes-select-content-max-height: var(--hermes-select-content-max-height) !default;
+$hermes-select-content-padding: var(--hermes-select-content-padding) !default;
+$hermes-select-content-background-color: var(--hermes-select-content-background-color) !default;
+$hermes-select-content-border-color: var(--hermes-select-content-border-color) !default;
+$hermes-select-content-shadow: var(--hermes-select-content-shadow) !default;
+$hermes-select-item-border-radius: var(--hermes-select-item-border-radius) !default;
+$hermes-select-item-padding-block: var(--hermes-select-item-padding-block) !default;
+$hermes-select-item-padding-inline-start: var(--hermes-select-item-padding-inline-start) !default;
+$hermes-select-item-padding-inline-end: var(--hermes-select-item-padding-inline-end) !default;
+$hermes-select-item-gap: var(--hermes-select-item-gap) !default;
+$hermes-select-item-indicator-offset: var(--hermes-select-item-indicator-offset) !default;
+$hermes-select-item-indicator-size: var(--hermes-select-item-indicator-size) !default;
+$hermes-select-item-color: var(--hermes-select-item-color) !default;
+$hermes-select-item-hover-color: var(--hermes-select-item-hover-color) !default;
+$hermes-select-item-hover-background-color: var(--hermes-select-item-hover-background-color) !default;
+$hermes-select-item-selected-background-color: var(--hermes-select-item-selected-background-color) !default;
+$hermes-select-item-disabled-color: var(--hermes-select-item-disabled-color) !default;
+$hermes-select-label-color: var(--hermes-select-label-color) !default;
+$hermes-select-separator-color: var(--hermes-select-separator-color) !default;
+$hermes-select-scroll-button-color: var(--hermes-select-scroll-button-color) !default;
+
+// Checkbox
+$hermes-forms-checkbox-height: var(--hermes-forms-checkbox-height) !default;
+$hermes-forms-checkbox-border-radius: var(--hermes-forms-checkbox-border-radius) !default;
+
+$hermes-forms-checkbox-label-color: $hermes-forms-label-color !default;
+$hermes-forms-checkbox-background-color: var(--hermes-forms-checkbox-background-color) !default;
+$hermes-forms-checkbox-indeterminate-border-color: var(--hermes-forms-checkbox-indeterminate-border-color) !default;
+$hermes-forms-checkbox-mark-color: var(--hermes-forms-checkbox-mark-color) !default;
+
+$hermes-forms-checkbox-disabled-label-color: $hermes-forms-label-disabled-color !default;
+$hermes-forms-checkbox-disabled-background-color: $hermes-form-disabled-background-color !default;
+$hermes-forms-checkbox-disabled-checked-background-color: var(
+  --hermes-forms-checkbox-disabled-checked-background-color
+) !default;
+$hermes-forms-checkbox-disabled-border-color: var(--hermes-forms-checkbox-disabled-border-color) !default;
+$hermes-forms-checkbox-disabled-indeterminate-color: var(--hermes-forms-checkbox-disabled-indeterminate-color) !default;
+$hermes-forms-checkbox-disabled-mark-color: var(--hermes-forms-checkbox-disabled-mark-color) !default;
+
+$hermes-forms-checkbox-label-height: #{density.$hermes-base-row-height-s};
+$hermes-forms-checkbox-top: calc(calc(#{$hermes-forms-checkbox-label-height} - #{$hermes-forms-checkbox-height}) * 0.5) !default;
+
+$hermes-forms-checkbox-size: #{density.$hermes-base-icon-size-l};
+$hermes-forms-checkbox-padding-left: calc(#{$hermes-forms-checkbox-height} + #{tokens.$hermes-global-space-5});
+$hermes-forms-checkbox-mark-size: calc(#{$hermes-forms-checkbox-height} * 0.5);
+$hermes-forms-checkbox-mark-border-size: calc(#{$hermes-forms-checkbox-height} * 0.125);
+
+// Password
+$hermes-forms-password-eye-icon-color: var(--hermes-forms-password-eye-icon-color) !default;
+$hermes-forms-password-disabled-eye-icon-color: var(--hermes-forms-password-disabled-eye-icon-color) !default;
+
+// Radio
+$hermes-forms-radio-label-color: var(--hermes-forms-radio-label-color) !default;
+$hermes-forms-radio-label-disabled-color: var(--hermes-forms-radio-label-disabled-color);
+$hermes-forms-radio-disabled-background-color: var(--hermes-forms-radio-disabled-background-color) !default;
+$hermes-forms-radio-disabled-mark-color: var(--hermes-forms-radio-disabled-mark-color) !default;
+$hermes-forms-radio-selected-shadow: var(--hermes-forms-radio-selected-shadow) !default;
+$hermes-forms-radio-checked-disabled-shadow: var(--hermes-forms-radio-checked-disabled-shadow) !default;
+$hermes-forms-radio-size: $hermes-forms-checkbox-size;
+$hermes-forms-radio-label-height: $hermes-forms-checkbox-label-height;
+$hermes-forms-radio-height: $hermes-forms-checkbox-height;
+$hermes-forms-radio-padding-left: $hermes-forms-checkbox-padding-left;
+$hermes-forms-radio-top: $hermes-forms-checkbox-top;
+
+// Range
+$hermes-forms-range-progress-fill-color: var(--hermes-forms-range-progress-fill-color) !default;
+$hermes-forms-range-track-color: var(--hermes-forms-range-track-color) !default;
+$hermes-forms-range-border-color: var(--hermes-forms-range-track-border-color) !default;
+$hermes-forms-range-track-height: var(--hermes-forms-range-track-height) !default;
+$hermes-forms-range-thumb-height: var(--hermes-forms-range-thumb-height) !default;
+$hermes-forms-range-border-width: var(--hermes-forms-range-track-border-width) !default;
+$hermes-forms-range-border-radius: var(--hermes-forms-range-track-border-radius) !default;
+
+$hermes-forms-range-progress-fill-color-disabled: var(--hermes-forms-range-progress-fill-color-disabled) !default;
+$hermes-forms-range-track-color-disabled: var(--hermes-forms-range-track-color-disabled) !default;
+$hermes-forms-range-border-color-disabled: var(--hermes-forms-range-track-border-color-disabled) !default;
+
+// Datalist
+$hermes-forms-datalist-caret-color: var(--hermes-forms-datalist-caret-color);
+$hermes-forms-datalist-caret-disabled-color: var(--hermes-forms-datalist-caret-disabled-color);
+$hermes-forms-datalist-caret-icon-size: var(--hermes-forms-datalist-caret-icon-size);

package/hermes-ui.scss

@@ -0,0 +1,7 @@
+/*
+ * 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 './main';