@rossigee/clarity-ui 18.2.1-fixed

package/forms/styles/_containers.clarity.scss

@@ -0,0 +1,228 @@
+/*
+ * 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 '../../styles/core/tokens/variables.tokens' as tokens;
+@use 'variables.forms' as forms-variables;
+@use '../../styles/variables/variables.density' as density;
+
+@include mixins.exports('forms.containers') {
+  .clr-form-control {
+    margin-top: density.$clr-base-vertical-offset-2xl;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .clr-form-control-disabled {
+    color: forms-variables.$clr-forms-text-disabled-color;
+
+    label,
+    .clr-control-label {
+      color: forms-variables.$clr-forms-label-disabled-color;
+    }
+
+    .clr-input,
+    .clr-textarea,
+    .clr-select,
+    .clr-number-input {
+      color: forms-variables.$clr-forms-text-disabled-color;
+      border-bottom-color: forms-variables.$clr-forms-border-disabled-color;
+    }
+
+    input[type='range']::-webkit-slider-thumb,
+    input[type='range']::-moz-range-thumb {
+      background-color: var(
+        --clr-forms-range-progress-fill-color-disabled,
+        forms-variables.$clr-forms-range-progress-fill-color-disabled
+      );
+    }
+
+    .clr-subtext {
+      color: forms-variables.$clr-forms-subtext-disabled-color;
+    }
+  }
+
+  .clr-form-control-multi {
+    flex-flow: row wrap;
+
+    .clr-control-label {
+      width: 100%;
+    }
+  }
+
+  .clr-control-label {
+    display: block;
+    color: forms-variables.$clr-forms-label-color;
+    padding-top: density.$clr-base-vertical-offset-xs;
+    padding-bottom: density.$clr-base-vertical-offset-xs;
+
+    @include mixins.generate-typography-token(
+      'SECONDARY-13-SB-CPT',
+      (
+        font-weight: forms-variables.$clr-forms-label-font-weight,
+      )
+    );
+  }
+
+  .clr-control-container {
+    @include mixins.generate-typography-token('SECONDARY-13-RG-EXP');
+  }
+
+  .clr-control-inline {
+    @include forms-mixins.form-inline-input(true);
+
+    .clr-checkbox-wrapper,
+    .clr-radio-wrapper {
+      padding-top: 0;
+    }
+
+    .clr-toggle-wrapper {
+      margin-top: 0;
+    }
+  }
+
+  .clr-subtext {
+    display: block;
+
+    @include mixins.generate-typography-token('CAPTION-LG-11-STD');
+
+    color: forms-variables.$clr-forms-subtext-color;
+    margin-top: density.$clr-base-gap-xs;
+
+    &.error {
+      color: forms-variables.$clr-forms-invalid-text-color;
+
+      .clr-validate-icon {
+        display: inline-block;
+        color: forms-variables.$clr-forms-invalid-color;
+        fill: forms-variables.$clr-forms-invalid-color;
+      }
+    }
+
+    &.success {
+      color: forms-variables.$clr-forms-valid-text-color;
+
+      .clr-validate-icon {
+        display: inline-block;
+        color: forms-variables.$clr-forms-valid-color;
+        fill: forms-variables.$clr-forms-valid-color;
+      }
+    }
+  }
+
+  .clr-subtext-wrapper {
+    flex-basis: 100%;
+    display: none;
+    align-items: flex-start;
+    gap: density.$clr-base-gap-xs;
+    margin-top: density.$clr-base-gap-xs;
+
+    &:not(.success, .error) {
+      display: flex;
+    }
+
+    .clr-subtext {
+      margin: 0;
+    }
+  }
+
+  .clr-validate-icon {
+    @include mixins.min-equilateral(forms-variables.$clr-forms-icon-size);
+
+    display: none;
+  }
+
+  .clr-success .clr-subtext-wrapper.success {
+    display: flex;
+
+    &,
+    .clr-subtext {
+      color: forms-variables.$clr-forms-valid-text-color;
+    }
+
+    .clr-validate-icon {
+      display: inline-block;
+      color: forms-variables.$clr-forms-valid-color;
+      fill: forms-variables.$clr-forms-valid-color;
+    }
+  }
+
+  .clr-error .clr-subtext-wrapper.error {
+    display: flex;
+
+    &,
+    .clr-subtext {
+      color: forms-variables.$clr-forms-invalid-text-color;
+    }
+
+    .clr-validate-icon {
+      display: inline-block;
+      color: forms-variables.$clr-forms-invalid-color;
+      fill: forms-variables.$clr-forms-invalid-color;
+    }
+  }
+
+  .clr-form-horizontal {
+    .clr-form-control > .clr-control-label,
+    .clr-form-control > .clr-form-control.clr-form-control-multi .clr-control-label {
+      width: calc(32 * #{forms-variables.$clr-forms-baseline});
+      flex-shrink: 0;
+    }
+
+    &.clr-row .clr-control-label {
+      width: auto;
+    }
+
+    .clr-form-control {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+
+  .clr-form-compact {
+    .clr-form-control > .clr-control-label {
+      width: calc(32 * #{forms-variables.$clr-forms-baseline});
+      min-width: calc(32 * #{forms-variables.$clr-forms-baseline});
+    }
+
+    .clr-form-control.clr-row > .clr-control-label {
+      width: auto;
+      min-width: auto;
+    }
+
+    .clr-form-control {
+      display: flex;
+      flex-direction: row;
+      margin-top: density.$clr-base-vertical-offset-l;
+    }
+
+    .clr-control-container {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+    }
+
+    .clr-subtext {
+      display: inline-block;
+      align-self: flex-start;
+      margin-left: density.$clr-base-gap-s;
+    }
+
+    .clr-subtext-wrapper {
+      flex-basis: auto;
+      flex-direction: row;
+      align-self: flex-start;
+      margin-left: density.$clr-base-gap-s;
+
+      .clr-subtext {
+        margin: 0;
+      }
+    }
+  }
+}

package/forms/styles/_datalist.clarity.scss

@@ -0,0 +1,47 @@
+/*
+ * 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 '../../styles/mixins';
+@use '../../styles/variables/variables';
+@use 'variables.forms' as forms-variables;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+input[clrDatalistInput] {
+  position: relative;
+
+  &::-webkit-calendar-picker-indicator {
+    opacity: 0;
+    cursor: text;
+  }
+}
+
+.clr-input-group {
+  input[clrDatalistInput] {
+    //Moves the .clr-datalist-caret (arrow) to the back so that clicking over it activates
+    //the dropdown.
+    z-index: map.get(variables.$clr-layers, datalist-box);
+  }
+
+  .clr-datalist-caret {
+    color: forms-variables.$clr-forms-datalist-caret-color;
+    cursor: pointer;
+    margin: density.$clr-base-vertical-offset-xs density.$clr-base-horizontal-offset-xs;
+
+    @include mixins.equilateral(forms-variables.$clr-forms-datalist-caret-icon-size);
+  }
+}
+
+.clr-form-control-disabled .clr-datalist-caret {
+  color: forms-variables.$clr-forms-datalist-caret-disabled-color;
+}
+
+// Keeps the browser added datalist toggle on the right side of the input underline
+clr-datalist-container .clr-input-group {
+  padding-right: 0;
+}

package/forms/styles/_file-input.clarity.scss

@@ -0,0 +1,134 @@
+/*
+ * 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 '../../styles/mixins';
+@use '../../styles/variables/variables';
+@use '../../styles/variables/variables.density' as density;
+@use 'variables.forms' as forms-variables;
+
+@include mixins.exports('forms.file-input') {
+  .clr-file-input-wrapper {
+    display: flex;
+    position: relative;
+    gap: density.$clr-base-gap-xs;
+
+    .clr-control-label {
+      padding: 0;
+    }
+
+    .clr-file-input {
+      @include mixins.equilateral(0);
+
+      opacity: 0;
+      overflow: hidden;
+      position: absolute;
+      z-index: -1;
+    }
+
+    .clr-file-input-browse-button,
+    .clr-file-input-clear-button {
+      margin: 0;
+    }
+
+    .clr-file-input-clear-button {
+      padding: 0;
+      min-width: unset;
+      border: 0;
+
+      cds-icon:not([size]),
+      clr-icon:not([size]) {
+        @include mixins.equilateral(density.$clr-base-icon-size-l);
+      }
+    }
+
+    .clr-file-input-browse-button-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .clr-form-compact .clr-file-input-wrapper {
+    margin-top: 0;
+  }
+
+  .clr-form-horizontal .clr-file-input-wrapper {
+    @media screen and (min-width: map.get(variables.$clr-grid-breakpoints, md)) {
+      margin-top: 0;
+    }
+  }
+
+  .clr-file-list {
+    display: flex;
+    flex-direction: column;
+    gap: density.$clr-base-gap-s;
+
+    .clr-file-list-item {
+      max-width: mixins.baselinePx(500);
+
+      &:first-of-type {
+        margin-top: density.$clr-base-gap-s;
+      }
+
+      &.clr-success .clr-validate-icon {
+        color: forms-variables.$clr-forms-valid-color;
+        fill: forms-variables.$clr-forms-valid-color;
+      }
+
+      &.clr-error .clr-validate-icon {
+        color: forms-variables.$clr-forms-invalid-color;
+        fill: forms-variables.$clr-forms-invalid-color;
+      }
+    }
+
+    .clr-file-label-and-status-icon {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .clr-file-label {
+      white-space: wrap;
+      padding-right: density.$clr-base-horizontal-offset-xs;
+      margin-bottom: 0;
+      margin-right: density.$clr-base-gap-xs;
+      border-radius: density.$clr-base-border-radius-l;
+    }
+
+    .clr-file-clear-button {
+      margin: 0;
+      padding: 0;
+
+      @include mixins.min-equilateral(density.$clr-base-icon-size-s);
+
+      cds-icon,
+      clr-icon {
+        margin: 0;
+      }
+    }
+  }
+
+  .clr-form-compact {
+    .clr-file-list-item {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: density.$clr-base-gap-xs;
+      max-width: unset;
+
+      .clr-subtext {
+        margin: 0;
+        align-self: unset;
+        padding: 0;
+      }
+    }
+
+    .clr-file-list-break {
+      flex-basis: 100%;
+      height: 0;
+    }
+  }
+}

package/forms/styles/_file.clarity.scss

@@ -0,0 +1,52 @@
+/*
+ * 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.
+ */
+
+/*
+ * These styles are not documented and are deprecated in favor in of _file-input.clarity.scss.
+ * The file input component uses .clr-file-input-wrapper instead due to differences from these styles.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/variables/variables.global';
+@use 'mixins.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+
+@include mixins.exports('forms.file') {
+  .clr-file-wrapper {
+    @include forms-mixins.form-flatten-validate-text();
+
+    position: relative;
+
+    .clr-control-label {
+      padding: 0;
+    }
+
+    .btn {
+      margin: 0;
+    }
+  }
+
+  .clr-file {
+    @include mixins.equilateral(0);
+
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+
+  .clr-form-compact .clr-file-wrapper {
+    @include forms-mixins.form-flatten-compact-adjustments();
+
+    margin-top: 0;
+
+    & ~ .clr-subtext,
+    .clr-control-label {
+      margin-top: 0;
+    }
+  }
+}

package/forms/styles/_form.clarity.scss

@@ -0,0 +1,87 @@
+/*
+ * 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 '../../styles/variables/variables.density' as density;
+@use 'variables.forms' as forms-variables;
+
+@include mixins.exports('forms.wrappers') {
+  .clr-form {
+    $widthSize: calc(100% - #{forms-variables.$clr-forms-icon-size});
+
+    padding: density.$clr-base-vertical-offset-s density.$clr-base-horizontal-offset-s;
+
+    &-full-width {
+      .clr-form-control {
+        .clr-control-container,
+        .clr-select-wrapper,
+        .clr-input-wrapper,
+        .clr-number-input-wrapper,
+        .clr-combobox {
+          width: $widthSize;
+        }
+
+        .clr-combobox-wrapper,
+        .clr-textarea-wrapper,
+        .clr-input-group,
+        input,
+        textarea,
+        select {
+          width: 100%;
+        }
+
+        .clr-combobox {
+          display: inline-flex;
+        }
+      }
+
+      &.clr-form-compact {
+        .clr-form-control {
+          .clr-input-wrapper,
+          .clr-number-input-wrapper,
+          .clr-select-wrapper,
+          .clr-multiselect-wrapper {
+            display: inline-flex;
+          }
+        }
+
+        .clr-control-container {
+          flex-wrap: nowrap;
+        }
+
+        .clr-subtext {
+          flex: 0 0 auto;
+        }
+      }
+
+      &:not(.clr-form-compact) .clr-form-control {
+        .clr-error .clr-select-wrapper::after,
+        .clr-success .clr-select-wrapper::after {
+          right: forms-variables.$clr-forms-baseline;
+        }
+
+        .clr-control-container:not(.clr-error, .clr-success) textarea {
+          width: $widthSize;
+        }
+      }
+    }
+  }
+
+  .clr-form-group {
+    padding: density.$clr-base-vertical-offset-s density.$clr-base-horizontal-offset-s;
+  }
+
+  .clr-required-mark::after {
+    content: '*';
+    color: forms-variables.$clr-forms-invalid-color;
+    fill: forms-variables.$clr-forms-invalid-color;
+
+    // using margin as gap
+    margin-left: density.$clr-base-gap-xs;
+  }
+}

package/forms/styles/_input-group.clarity.scss

@@ -0,0 +1,118 @@
+/*
+ * 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.input-group') {
+  .clr-input-group {
+    @include forms-mixins.form-fields-appearance();
+    @include forms-mixins.input-border-bottom-animation();
+
+    position: relative;
+    max-width: 100%;
+    max-height: forms-variables.$clr-forms-input-wrapper-height;
+    padding-right: density.$clr-base-horizontal-offset-xs;
+
+    &.clr-focus {
+      width: auto;
+    }
+
+    .clr-input {
+      background: none;
+      border: none;
+      margin-right: 0;
+      max-width: 100%;
+
+      &:not([readonly]):focus {
+        background-size: 0;
+        border: 0;
+      }
+    }
+
+    /* handle case when select is used without clr-select-wrapper */
+    select {
+      border: none;
+    }
+
+    .clr-select-wrapper select,
+    .clr-multiselect-wrapper select {
+      border: none;
+    }
+
+    .clr-input-group-addon {
+      color: forms-variables.$clr-forms-subtext-color;
+    }
+
+    .clr-input-group-actions {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .clr-input-group-icon-action {
+      @include mixins.clr-no-styles-button();
+
+      padding: 0 density.$clr-base-horizontal-offset-s;
+      cursor: pointer;
+
+      cds-icon,
+      clr-icon {
+        fill: forms-variables.$clr-forms-icon-color;
+
+        &:not([size]) {
+          @include mixins.equilateral(var(--clr-forms-input-group-icon-action-size));
+        }
+      }
+    }
+  }
+
+  .clr-error .clr-input-group {
+    border-bottom-color: forms-variables.$clr-forms-invalid-color;
+
+    @include forms-mixins.input-border-bottom-animation(forms-variables.$clr-forms-invalid-color);
+  }
+
+  .clr-success .clr-input-group {
+    border-bottom-color: forms-variables.$clr-forms-valid-color;
+
+    @include forms-mixins.input-border-bottom-animation(forms-variables.$clr-forms-valid-color);
+  }
+
+  .clr-form-control-disabled {
+    .clr-input-group {
+      border-bottom-color: forms-variables.$clr-forms-border-disabled-color;
+    }
+
+    .clr-input-group-icon-action {
+      color: forms-variables.$clr-forms-text-disabled-color;
+      cursor: not-allowed;
+
+      cds-icon,
+      clr-icon {
+        fill: forms-variables.$clr-forms-input-group-icon-disabled-color;
+      }
+    }
+  }
+
+  .clr-input-group:has(input[readonly]),
+  .clr-form-control-readonly .clr-input-group {
+    border: none;
+    background: transparent;
+
+    .clr-input-group-actions {
+      display: none;
+    }
+  }
+
+  .clr-form-horizontal .clr-input-group {
+    max-width: 100%;
+    padding-right: 0;
+  }
+}