@rossigee/clarity-ui 18.2.1-fixed

package/forms/styles/_select.clarity.scss

@@ -0,0 +1,178 @@
+/*
+ * 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 '../../image/icons.clarity';
+@use '../../styles/mixins';
+@use '../../styles/variables/variables.global';
+@use '../../styles/variables/variables.density' as density;
+@use 'mixins.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('forms.select') {
+  .clr-select-wrapper,
+  .clr-multiselect-wrapper {
+    position: relative;
+    white-space: nowrap;
+
+    select {
+      @include forms-mixins.custom-inputs(forms-variables.$clr-forms-input-wrapper-height);
+      @include forms-mixins.form-fields-appearance();
+      @include mixins.generate-typography-token('SECONDARY-13-RG-EXP');
+
+      &:not([multiple]) {
+        @include forms-mixins.input-border-bottom-animation();
+      }
+
+      &[multiple]:focus {
+        @include mixins.include-slim-outline-style-form-fields();
+      }
+
+      position: relative;
+      padding: 0 density.$clr-base-icon-size-l 0 #{density.$clr-base-horizontal-offset-s};
+      cursor: pointer;
+
+      //Moves the :after pseudo element (arrow) to the back so that clicking over it activates
+      //the dropdown.
+      z-index: map.get(variables.$clr-layers, select-box);
+
+      &:hover,
+      &:active {
+        border-color: forms-variables.$clr-forms-select-hover-border-color;
+        background: forms-variables.$clr-forms-select-hover-background;
+
+        &:disabled {
+          cursor: not-allowed;
+          border-color: forms-variables.$clr-forms-select-disabled-border-color;
+        }
+      }
+
+      &:disabled option,
+      option:disabled {
+        color: forms-variables.$clr-forms-select-disabled-color;
+        cursor: not-allowed;
+      }
+
+      option {
+        color: forms-variables.$clr-forms-select-option-color;
+        background-color: forms-variables.$clr-forms-select-option-background-color;
+      }
+    }
+  }
+
+  .clr-select-wrapper {
+    max-height: forms-variables.$clr-forms-input-wrapper-height;
+    display: inline-block;
+
+    &::after {
+      position: absolute;
+      content: '';
+
+      @include mixins.equilateral(forms-variables.$clr-forms-select-caret-size);
+
+      top: calc((100% - forms-variables.$clr-forms-select-caret-size) / 2);
+      right: density.$clr-base-horizontal-offset-s;
+      // Using mask instead of background-image so we can use the CSS properties
+      // and support both light / dark themes.
+      mask: icons.generateCaretIcon();
+      mask-repeat: no-repeat;
+      background-color: forms-variables.$clr-forms-select-caret-color;
+    }
+
+    &:hover::after {
+      background-color: forms-variables.$clr-forms-select-caret-hover-color;
+    }
+  }
+
+  .clr-multiselect-wrapper {
+    display: flex;
+
+    .clr-validate-icon {
+      margin-left: 0;
+    }
+  }
+
+  //Multiple Select
+  select[multiple],
+  select[size] {
+    padding: 0;
+    border: tokens.$cds-alias-object-border-width-100 solid forms-variables.$clr-forms-select-multiple-border-color;
+    background: forms-variables.$clr-forms-select-multiple-background-color;
+    border-radius: density.$clr-base-border-radius-s;
+    height: auto;
+    min-width: mixins.baselinePx(120);
+
+    &:hover,
+    &:active {
+      background: forms-variables.$clr-forms-select-multiple-background-color;
+      border-color: forms-variables.$clr-forms-select-multiple-border-color;
+    }
+
+    option {
+      @include mixins.generate-typography-token('SECONDARY-13-RG-CPT');
+
+      padding: density.$clr-base-vertical-offset-xs density.$clr-base-horizontal-offset-2xl
+        density.$clr-base-vertical-offset-xs density.$clr-base-horizontal-offset-l;
+      color: forms-variables.$clr-forms-select-multiple-option-color;
+
+      &:checked {
+        background-color: forms-variables.$clr-forms-select-multiple-selected-option-background-color;
+      }
+    }
+  }
+
+  .clr-error select {
+    &:not([multiple]) {
+      border-bottom-color: forms-variables.$clr-forms-invalid-color;
+
+      @include forms-mixins.input-border-bottom-animation(forms-variables.$clr-forms-invalid-color);
+    }
+
+    &[multiple] {
+      border-color: forms-variables.$clr-forms-invalid-color;
+    }
+  }
+
+  .clr-success select {
+    &:not([multiple]) {
+      border-bottom-color: forms-variables.$clr-forms-valid-color;
+
+      @include forms-mixins.input-border-bottom-animation(forms-variables.$clr-forms-valid-color);
+    }
+
+    &[multiple] {
+      border-color: forms-variables.$clr-forms-valid-color;
+    }
+  }
+
+  .clr-form-control-disabled .clr-select {
+    &.disabled {
+      color: forms-variables.$clr-forms-select-disabled-color;
+      cursor: not-allowed;
+
+      &:hover::after {
+        color: forms-variables.$clr-forms-select-caret-color;
+      }
+    }
+
+    &.disabled > select,
+    select:disabled {
+      color: forms-variables.$clr-forms-select-disabled-color;
+      cursor: not-allowed;
+
+      &:hover {
+        background: none;
+        border-color: forms-variables.$clr-forms-border-color;
+      }
+    }
+  }
+
+  .clr-form-compact .clr-multiselect-wrapper {
+    margin-top: 0;
+  }
+}

package/forms/styles/_textarea.clarity.scss

@@ -0,0 +1,77 @@
+/*
+ * 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
+  .clr-textarea-wrapper {
+    white-space: nowrap;
+    display: flex;
+
+    .clr-validate-icon {
+      margin-left: 0;
+    }
+  }
+
+  .clr-textarea {
+    max-width: calc(100% - forms-variables.$clr-forms-baseline);
+    height: auto;
+    resize: vertical;
+    border: tokens.$cds-alias-object-border-width-100 solid forms-variables.$clr-forms-border-color;
+    background: forms-variables.$clr-forms-textarea-background-color;
+    color: forms-variables.$clr-forms-text-color;
+    border-radius: forms-variables.$clr-forms-textarea-border-radius;
+    padding: density.$clr-base-vertical-offset-xl density.$clr-base-horizontal-offset-xl;
+
+    @include mixins.generate-typography-token('SECONDARY-13-RG-STD');
+
+    &.clr-focus,
+    &:focus {
+      // TODO(CDE-863) - Remove outline mixin and convert this component to just use border-color to avoid the white
+      // outline in addition to the intended color on focus
+
+      @include mixins.include-slim-outline-style-form-fields();
+
+      outline-color: forms-variables.$clr-forms-focused-color;
+      border-color: forms-variables.$clr-forms-focused-color;
+    }
+
+    &:disabled {
+      @include forms-mixins.disabled-form-fields();
+
+      background-color: forms-variables.$clr-forms-textarea-disabled-background;
+      border-color: forms-variables.$clr-forms-border-disabled-color;
+    }
+  }
+
+  .clr-success .clr-textarea {
+    border-color: forms-variables.$clr-forms-valid-color;
+    outline-color: forms-variables.$clr-forms-valid-color;
+  }
+
+  .clr-error .clr-textarea {
+    border-color: forms-variables.$clr-forms-invalid-color;
+    outline-color: forms-variables.$clr-forms-invalid-color;
+  }
+
+  .clr-control-container textarea {
+    width: auto; // @TODO remove when removing old forms - forced 100% width by old forms
+  }
+
+  .clr-form-control.row .clr-textarea-wrapper {
+    max-width: calc(100% - forms-variables.$clr-forms-baseline);
+  }
+
+  .clr-form-compact .clr-textarea-wrapper .clr-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.$clr-forms-checkbox-mark-size} * 0.5);
+
+  //Remove the default checkbox appearance
+  %custom-checkbox {
+    @include mixins.clr-appearance-normal();
+  }
+
+  .clr-toggle-wrapper {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    margin-right: density.$clr-base-gap-m;
+    min-height: toggle-variables.$clr-toggle-height;
+    justify-content: start;
+    padding: density.$clr-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.$clr-toggle-switch-base-height;
+      width: toggle-variables.$clr-toggle-switch-base-width;
+      flex: 0 0 auto;
+      border-radius: density.$clr-base-border-radius-xl; // Style outline radius properly
+      background-color: toggle-variables.$clr-toggle-bg-color-off;
+
+      @include forms-mixins.clr-toggle-transition-styles;
+
+      transition-property: background-color;
+
+      &:not(:disabled) {
+        cursor: pointer;
+      }
+
+      // Toggle Switch dot
+      &::before {
+        position: absolute;
+        display: inline-block;
+        content: '';
+        border-radius: tokens.$cds-alias-object-border-radius-300;
+        border: tokens.$cds-alias-object-border-width-400 solid toggle-variables.$clr-toggle-handle-border-color;
+        background-color: toggle-variables.$clr-toggle-handle-bg-color;
+        left: 0;
+
+        @include mixins.equilateral(toggle-variables.$clr-toggle-dot-diameter);
+        @include forms-mixins.clr-toggle-transition-styles;
+
+        transition-property: left, border-width, border-color;
+      }
+
+      // Toggle Switch check
+      &::after {
+        position: absolute;
+        content: '';
+        visibility: hidden;
+
+        @include forms-mixins.clr-toggle-transition-styles;
+
+        left: #{tokens.$cds-global-space-3};
+        transition-property: visibility, left, border-color;
+        height: calc(#{$mark-half-size} + #{tokens.$cds-global-space-1});
+        width: forms-variables.$clr-forms-checkbox-mark-size;
+        border-left: forms-variables.$clr-forms-checkbox-mark-border-size solid
+          toggle-variables.$clr-toggle-bg-color-off;
+        border-bottom: forms-variables.$clr-forms-checkbox-mark-border-size solid
+          toggle-variables.$clr-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.$clr-toggle-bg-color-on;
+
+        &::before {
+          border-width: tokens.$cds-alias-object-border-width-200;
+          border-color: toggle-variables.$clr-toggle-handle-border-color-on;
+          left: calc(toggle-variables.$clr-toggle-switch-base-width - toggle-variables.$clr-toggle-dot-diameter);
+        }
+
+        &::after {
+          visibility: visible;
+          left: mixins.baselinePx(20);
+          border-color: toggle-variables.$clr-toggle-bg-color-on;
+        }
+      }
+
+      &:disabled {
+        // toggle disabled/off bg color
+        background-color: toggle-variables.$clr-toggle-disabled-off-border-color;
+        // toggle disabled/off border color (excluding the handle circle)
+        border-color: toggle-variables.$clr-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.$clr-toggle-disabled-off-bg-color;
+          border-color: toggle-variables.$clr-toggle-disabled-off-handle-border-color;
+        }
+
+        &::after {
+          border-color: toggle-variables.$clr-toggle-disabled-off-border-color;
+        }
+      }
+
+      &:checked:disabled {
+        // toggle disabled/on border color
+        border-color: toggle-variables.$clr-toggle-disabled-on-border-color;
+        // toggle disabled/on bg color
+        background-color: toggle-variables.$clr-toggle-disabled-on-bg-color;
+
+        &::before {
+          // toggle disabled on handle circle border color
+          border-color: toggle-variables.$clr-toggle-disabled-on-handle-border-color;
+        }
+
+        &::after {
+          // toggle disabled on handle circle border color
+          border-color: toggle-variables.$clr-toggle-disabled-on-border-color;
+        }
+      }
+    }
+
+    &.disabled {
+      label {
+        cursor: not-allowed;
+      }
+
+      input[type='checkbox']:checked::before {
+        border-color: toggle-variables.$clr-toggle-disabled-on-border-color;
+        background-color: toggle-variables.$clr-toggle-disabled-on-bg-color;
+      }
+    }
+
+    &.right-label {
+      flex-flow: row-reverse;
+    }
+
+    .clr-control-label {
+      display: block;
+
+      @include mixins.generate-typography-token('SECONDARY-13-RG-CPT');
+
+      padding: 0 0 0 density.$clr-base-horizontal-offset-m;
+      margin-top: 0;
+    }
+  }
+
+  // These are the inline styles overrides
+  .clr-control-inline .clr-toggle-wrapper .clr-control-label {
+    display: inline-block;
+    margin-right: 0;
+  }
+
+  .clr-form-compact .clr-toggle-wrapper {
+    margin-top: 0;
+  }
+
+  // This sets the option to move the toggles to the right of the label
+  .clr-toggle-right {
+    .clr-toggle-wrapper {
+      flex-flow: row-reverse;
+    }
+
+    label,
+    .clr-control-label {
+      display: inline-block;
+      padding-left: 0;
+      padding-right: density.$clr-base-horizontal-offset-m;
+    }
+  }
+}

package/forms/styles/_variables.forms.scss

@@ -0,0 +1,128 @@
+/*
+ * 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
+$clr-forms-baseline: var(--clr-forms-baseline);
+$clr-forms-icon-size: var(--clr-forms-icon-size);
+$clr-form-disabled-background-color: var(--clr-form-disabled-background-color) !default;
+
+// Generic
+$clr-forms-label-color: var(--clr-forms-label-color) !default;
+$clr-forms-text-color: var(--clr-forms-text-color) !default;
+$clr-forms-invalid-color: var(--clr-forms-invalid-color) !default;
+$clr-forms-invalid-text-color: var(--clr-forms-invalid-text-color) !default;
+$clr-forms-valid-color: var(--clr-forms-valid-color) !default;
+$clr-forms-valid-text-color: var(--clr-forms-valid-text-color) !default;
+$clr-forms-subtext-color: var(--clr-forms-subtext-color) !default;
+$clr-forms-placeholder-color: var(--clr-forms-placeholder-color) !default;
+// Accessibility fox for vpat-7719; this aligns with core
+$clr-forms-border-color: var(--clr-forms-border-color) !default;
+$clr-forms-focused-color: var(--clr-forms-focused-color) !default;
+$clr-forms-icon-color: #{tokens.$cds-alias-object-interaction-color} !default;
+
+$clr-forms-subtext-disabled-color: var(--clr-forms-subtext-disabled-color) !default;
+$clr-forms-border-disabled-color: var(--clr-forms-border-disabled-color) !default;
+$clr-forms-text-disabled-color: var(--clr-forms-text-disabled-color) !default;
+$clr-forms-label-disabled-color: var(--clr-forms-label-disabled-color) !default;
+$clr-forms-placeholder-disabled-color: var(--clr-forms-placeholder-disabled-color) !default;
+
+// Input
+$clr-forms-input-padding: var(--clr-forms-input-padding);
+$clr-forms-input-wrapper-height: var(--clr-forms-input-wrapper-height);
+
+// Input group
+$clr-forms-input-group-icon-action-size: var(--clr-forms-input-group-icon-action-size);
+$clr-forms-input-group-icon-disabled-color: var(--clr-forms-input-group-icon-disabled-color);
+
+// Typographic - obsolete should be removed ATM
+$clr-forms-label-font-weight: var(--clr-forms-label-font-weight) !default;
+
+// Textarea
+$clr-forms-textarea-background-color: var(--clr-forms-textarea-background-color) !default;
+$clr-forms-textarea-disabled-background: var(--clr-forms-textarea-disabled-background);
+$clr-forms-textarea-border-radius: var(--clr-forms-textarea-border-radius);
+
+// Select
+$clr-forms-select-hover-border-color: var(--clr-forms-select-hover-border-color) !default;
+$clr-forms-select-hover-background: var(--clr-forms-select-hover-background) !default;
+$clr-forms-select-disabled-color: var(--clr-forms-select-disabled-color) !default;
+$clr-forms-select-disabled-border-color: var(--clr-forms-select-disabled-border-color) !default;
+$clr-forms-select-option-color: var(--clr-forms-select-option-color) !default;
+$clr-forms-select-option-background-color: var(--clr-forms-select-option-background-color) !default;
+$clr-forms-select-multiple-background-color: var(--clr-forms-select-multiple-background-color) !default;
+$clr-forms-select-multiple-border-color: var(--clr-forms-select-multiple-border-color) !default;
+$clr-forms-select-multiple-option-color: var(--clr-forms-select-multiple-option-color) !default;
+$clr-forms-select-multiple-selected-option-background-color: var(
+  --clr-forms-select-multiple-selected-option-background-color
+) !default;
+$clr-forms-select-caret-color: var(--clr-forms-select-caret-color) !default;
+$clr-forms-select-caret-hover-color: var(--clr-forms-select-caret-hover-color) !default;
+$clr-forms-select-caret-size: var(--clr-forms-select-caret-size) !default;
+
+// Checkbox
+$clr-forms-checkbox-height: var(--clr-forms-checkbox-height) !default;
+$clr-forms-checkbox-border-radius: var(--clr-forms-checkbox-border-radius) !default;
+
+$clr-forms-checkbox-label-color: $clr-forms-label-color !default;
+$clr-forms-checkbox-background-color: var(--clr-forms-checkbox-background-color) !default;
+$clr-forms-checkbox-indeterminate-border-color: var(--clr-forms-checkbox-indeterminate-border-color) !default;
+$clr-forms-checkbox-mark-color: var(--clr-forms-checkbox-mark-color) !default;
+
+$clr-forms-checkbox-disabled-label-color: $clr-forms-label-disabled-color !default;
+$clr-forms-checkbox-disabled-background-color: $clr-form-disabled-background-color !default;
+$clr-forms-checkbox-disabled-checked-background-color: var(
+  --clr-forms-checkbox-disabled-checked-background-color
+) !default;
+$clr-forms-checkbox-disabled-border-color: var(--clr-forms-checkbox-disabled-border-color) !default;
+$clr-forms-checkbox-disabled-indeterminate-color: var(--clr-forms-checkbox-disabled-indeterminate-color) !default;
+$clr-forms-checkbox-disabled-mark-color: var(--clr-forms-checkbox-disabled-mark-color) !default;
+
+$clr-forms-checkbox-label-height: #{density.$clr-base-row-height-s};
+$clr-forms-checkbox-top: calc(calc(#{$clr-forms-checkbox-label-height} - #{$clr-forms-checkbox-height}) * 0.5) !default;
+
+$clr-forms-checkbox-size: #{density.$clr-base-icon-size-l};
+$clr-forms-checkbox-padding-left: calc(#{$clr-forms-checkbox-height} + #{tokens.$cds-global-space-5});
+$clr-forms-checkbox-mark-size: calc(#{$clr-forms-checkbox-height} * 0.5);
+$clr-forms-checkbox-mark-border-size: calc(#{$clr-forms-checkbox-height} * 0.125);
+
+// Password
+$clr-forms-password-eye-icon-color: var(--clr-forms-password-eye-icon-color) !default;
+$clr-forms-password-disabled-eye-icon-color: var(--clr-forms-password-disabled-eye-icon-color) !default;
+
+// Radio
+$clr-forms-radio-label-color: var(--clr-forms-radio-label-color) !default;
+$clr-forms-radio-label-disabled-color: var(--clr-forms-radio-label-disabled-color);
+$clr-forms-radio-disabled-background-color: var(--clr-forms-radio-disabled-background-color) !default;
+$clr-forms-radio-disabled-mark-color: var(--clr-forms-radio-disabled-mark-color) !default;
+$clr-forms-radio-selected-shadow: var(--clr-forms-radio-selected-shadow) !default;
+$clr-forms-radio-checked-disabled-shadow: var(--clr-forms-radio-checked-disabled-shadow) !default;
+$clr-forms-radio-size: $clr-forms-checkbox-size;
+$clr-forms-radio-label-height: $clr-forms-checkbox-label-height;
+$clr-forms-radio-height: $clr-forms-checkbox-height;
+$clr-forms-radio-padding-left: $clr-forms-checkbox-padding-left;
+$clr-forms-radio-top: $clr-forms-checkbox-top;
+
+// Range
+$clr-forms-range-progress-fill-color: var(--clr-forms-range-progress-fill-color) !default;
+$clr-forms-range-track-color: var(--clr-forms-range-track-color) !default;
+$clr-forms-range-border-color: var(--clr-forms-range-track-border-color) !default;
+$clr-forms-range-track-height: var(--clr-forms-range-track-height) !default;
+$clr-forms-range-thumb-height: var(--clr-forms-range-thumb-height) !default;
+$clr-forms-range-border-width: var(--clr-forms-range-track-border-width) !default;
+$clr-forms-range-border-radius: var(--clr-forms-range-track-border-radius) !default;
+
+$clr-forms-range-progress-fill-color-disabled: var(--clr-forms-range-progress-fill-color-disabled) !default;
+$clr-forms-range-track-color-disabled: var(--clr-forms-range-track-color-disabled) !default;
+$clr-forms-range-border-color-disabled: var(--clr-forms-range-track-border-color-disabled) !default;
+
+// Datalist
+$clr-forms-datalist-caret-color: var(--clr-forms-datalist-caret-color);
+$clr-forms-datalist-caret-disabled-color: var(--clr-forms-datalist-caret-disabled-color);
+$clr-forms-datalist-caret-icon-size: var(--clr-forms-datalist-caret-icon-size);