@rossigee/clarity-ui 18.2.1-fixed

package/forms/datepicker/_datepicker.clarity.scss

@@ -0,0 +1,259 @@
+/*
+ * 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 'sass:map';
+@use '../../styles/mixins';
+@use '../../styles/variables/variables.global';
+@use 'variables.datepicker' as datepicker-variables;
+@use 'mixins.datepicker' as datepicker-mixins;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../button/variables.buttons' as button-variables;
+@use '../../styles/variables/variables.density' as density;
+
+@include meta.load-css('properties.datepicker');
+@include mixins.exports('datepicker.clarity') {
+  .datepicker {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+
+    //Dimensions
+    padding: datepicker-variables.$clr-calendar-vertical-padding datepicker-variables.$clr-calendar-horizontal-padding;
+    gap: density.$clr-base-gap-m;
+    height: datepicker-variables.$clr-calendar-height;
+
+    //Other Props
+    background: datepicker-variables.$clr-calendar-background-color;
+    border: tokens.$cds-alias-object-border-width-100 solid datepicker-variables.$clr-calendar-border-color;
+    border-radius: density.$clr-base-border-radius-s;
+    box-shadow: tokens.$cds-alias-object-shadow-100;
+    z-index: map.get(variables.$clr-layers, dropdown-menu);
+
+    .datepicker-view-manager {
+      display: flex;
+      flex-direction: column;
+      place-content: space-between;
+      min-width: datepicker-variables.$clr-calendar-width;
+    }
+
+    &.has-action-buttons {
+      height: calc(
+        datepicker-variables.$clr-calendar-height + datepicker-variables.$clr-calendar-action-buttons-height +
+          density.$clr-base-gap-s
+      );
+    }
+
+    .datepicker-actions {
+      height: datepicker-variables.$clr-calendar-action-buttons-height;
+      display: flex;
+      border-top: tokens.$cds-global-space-1 solid tokens.$cds-alias-object-container-border-color;
+      justify-content: end;
+      padding-top: density.$clr-base-vertical-offset-xl;
+      gap: density.$clr-base-horizontal-offset-m;
+
+      button {
+        margin: 0;
+      }
+    }
+  }
+
+  .clr-date-range-picker-nav {
+    width: datepicker-variables.$clr-calendar-options-width;
+    border-radius: density.$clr-base-border-radius-s;
+    height: 100%;
+  }
+
+  .calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .calendar-switchers,
+  .year-switchers {
+    display: flex;
+  }
+
+  .year-switchers {
+    flex: 0 0 auto;
+    align-self: center;
+
+    // this width is pointless in flex situation
+    width: datepicker-variables.$clr-switcher-width;
+  }
+
+  .calendar-table {
+    // clr-calendar have dispaly: inline, preventing flex from having an effect.
+    flex: 1 1 auto;
+    border-spacing: 0 datepicker-variables.$clr-calendar-button-gap;
+    //Dimensions
+    width: 100%;
+  }
+
+  td.calendar-cell,
+  td.calendar-table .calendar-cell {
+    //Dimensions
+
+    @include mixins.min-equilateral(datepicker-variables.$clr-calendar-btn-size);
+
+    padding: 0;
+
+    //Other Props
+    text-align: center;
+  }
+
+  .day {
+    display: inline;
+  }
+
+  .weekdays {
+    flex: 0 0 datepicker-variables.$clr-calendar-btn-size;
+  }
+
+  .weekday {
+    @include mixins.generate-typography-token(
+      'SECONDARY-13-SB-CPT',
+      (
+        font-size: datepicker-variables.$clr-calendar-weekday-font-size,
+      )
+    );
+
+    padding: 0 density.$clr-base-horizontal-offset-m;
+  }
+
+  .calendar-btn {
+    @include datepicker-mixins.generate-calendar-button();
+    @include datepicker-mixins.generate-calendar-focus-style();
+    @include mixins.generate-typography-token(
+      'SECTION-20-STD',
+      (
+        font-size: datepicker-variables.$clr-calendar-picker-btn-font-size,
+        font-weight: datepicker-variables.$clr-calendar-picker-btn-font-weight,
+      )
+    );
+  }
+
+  .day-btn {
+    @include datepicker-mixins.generate-calendar-button($padding: 0);
+    @include datepicker-mixins.generate-calendar-focus-style();
+    @include datepicker-mixins.generate-calendar-hover-active-color-style();
+    @include mixins.generate-typography-token('SECONDARY-13-RG-EXP');
+    @include datepicker-mixins.generate-current-date-style();
+    @include datepicker-mixins.generate-selected-date-style();
+
+    //Dimensions
+    width: 100%;
+
+    //Other Props
+    color: inherit;
+
+    &.is-excluded {
+      display: none;
+    }
+
+    &.is-disabled {
+      color: tokens.$cds-alias-object-interaction-color-disabled;
+      pointer-events: none;
+      background: none;
+    }
+  }
+
+  .calendar-pickers {
+    display: flex;
+  }
+
+  .switcher {
+    @include datepicker-mixins.generate-calendar-hover-active-color-style();
+
+    color: datepicker-variables.$clr-calendar-btn-color;
+
+    cds-icon,
+    clr-icon {
+      &:not([size]) {
+        @include mixins.equilateral(density.$clr-base-icon-size-s);
+      }
+    }
+  }
+
+  .monthpicker-trigger,
+  .yearpicker-trigger {
+    //Dimensions
+    min-width: datepicker-variables.$clr-calendar-btn-picker-trigger-width;
+    width: datepicker-variables.$clr-calendar-btn-picker-trigger-width;
+    padding: 0 density.$clr-base-horizontal-offset-s;
+
+    //Other Props
+    color: datepicker-variables.$clr-calendar-btn-picker-trigger-color;
+    text-align: center;
+
+    @include mixins.overflow-ellipsis();
+
+    &.year-range {
+      width: calc(datepicker-variables.$clr-calendar-btn-picker-trigger-width * 2);
+    }
+  }
+
+  .monthpicker,
+  .yearpicker {
+    min-height: datepicker-variables.$clr-monthpicker-min-height;
+  }
+
+  .monthpicker,
+  .yearpicker,
+  .daypicker {
+    display: flex;
+    flex-flow: column wrap;
+    row-gap: density.$clr-base-gap-s;
+  }
+
+  .years {
+    flex-direction: row;
+  }
+
+  .month,
+  .year {
+    @include datepicker-mixins.generate-calendar-button(
+      $padding: datepicker-variables.$clr-calendar-month-cell-horizontal-padding
+    );
+    @include datepicker-mixins.generate-calendar-hover-active-color-style();
+    @include mixins.generate-typography-token('SECONDARY-13-RG-CPT');
+    @include datepicker-mixins.generate-current-date-style();
+    @include datepicker-mixins.generate-selected-date-style();
+
+    height: datepicker-variables.$clr-calendar-header-btn-height;
+    width: datepicker-variables.$clr-month-year-btn-width;
+
+    &.is-disabled {
+      color: tokens.$cds-alias-object-interaction-color-disabled;
+      pointer-events: none;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+
+  .months,
+  .years {
+    row-gap: datepicker-variables.$clr-calendar-button-gap;
+    flex-wrap: wrap;
+    display: flex;
+    place-content: space-between;
+    width: datepicker-variables.$clr-calendar-width;
+  }
+
+  .month {
+    text-align: center;
+
+    @include mixins.overflow-ellipsis();
+  }
+
+  .year {
+    text-align: center;
+  }
+}

package/forms/datepicker/_mixins.datepicker.scss

@@ -0,0 +1,90 @@
+/*
+ * 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 'variables.datepicker' as datepicker-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@mixin generate-calendar-button(
+  $height: datepicker-variables.$clr-calendar-btn-size,
+  $padding: datepicker-variables.$clr-calendar-btn-horizontal-padding
+) {
+  //Dimensions
+
+  @include mixins.min-equilateral($height);
+
+  padding: 0 $padding;
+  margin: 0 !important; //Because stupid forms target buttons directly. We really need to refactor forms.
+
+  //Other Props
+  color: inherit;
+  border: none;
+  border-radius: density.$clr-base-border-radius-s;
+  background: none;
+  cursor: pointer;
+}
+@mixin generate-calendar-focus-style() {
+  &.in-range {
+    background: datepicker-variables.$clr-calendar-in-range-cell-background-color;
+    border-radius: 0;
+  }
+
+  &:hover {
+    background: datepicker-variables.$clr-calendar-btn-hover-focus-color;
+  }
+
+  &:focus {
+    //Only because we have defined a background color for focus above
+    // using cds-alias-object-interaction-outline token will be better when focus state get implemented
+    outline: tokens.$cds-global-color-blue-700 solid 2px;
+    outline-offset: calc(-1 * tokens.$cds-global-space-2);
+    background: tokens.$cds-alias-object-interaction-background-hover;
+  }
+
+  &:active {
+    background: datepicker-variables.$clr-calendar-btn-active-color-bg;
+  }
+}
+@mixin generate-current-date-style() {
+  &.is-today {
+    color: datepicker-variables.$clr-calendar-today-date-cell-color;
+    border: tokens.$cds-global-space-1 solid datepicker-variables.$clr-calendar-today-date-cell-border-color;
+    font-weight: datepicker-variables.$clr-calendar-today-date-cell-font-weight;
+  }
+}
+@mixin generate-selected-date-style() {
+  &.is-selected,
+  &.is-start-range,
+  &.is-end-range {
+    background: datepicker-variables.$clr-calendar-active-cell-background-color;
+    color: datepicker-variables.$clr-calendar-active-cell-color;
+  }
+
+  &.is-start-range:not(.is-end-range) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &.is-end-range:not(.is-start-range) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &.is-selected:focus {
+    background: datepicker-variables.$clr-calendar-active-focus-cell-background-color;
+  }
+}
+@mixin generate-calendar-hover-active-color-style() {
+  &:hover {
+    color: datepicker-variables.$clr-calendar-btn-hover-focus-color-text;
+  }
+
+  &:active {
+    color: datepicker-variables.$clr-calendar-btn-active-color;
+  }
+}

package/forms/datepicker/_properties.datepicker.scss

@@ -0,0 +1,46 @@
+/*
+ * 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;
+
+@include mixins.exports('datepicker.properties') {
+  @include mixins.root-or-host() {
+    // Typography
+    --clr-calendar-today-date-cell-font-weight: #{tokens.$cds-alias-typography-font-weight-semibold};
+    --clr-calendar-picker-btn-font-weight: #{tokens.$cds-alias-typography-font-weight-medium};
+
+    &,
+    & [clr-density] {
+      --clr-calendar-weekday-font-size: #{density.$clr-base-typography-font-size-inline};
+      --clr-calendar-picker-btn-font-size: #{density.$clr-base-typography-font-size-section};
+    }
+
+    &,
+    & [cds-theme] {
+      --clr-calendar-background-color: #{tokens.$cds-alias-object-container-background};
+      --clr-calendar-border-color: #{tokens.$cds-alias-object-border-color};
+      --clr-calendar-option-text-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-calendar-active-option-border-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-calendar-range-cell-background-color: #{tokens.$cds-alias-object-interaction-background-selected};
+      --clr-calendar-btn-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-calendar-today-date-cell-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-calendar-today-date-cell-border-color: #{tokens.$cds-alias-object-interaction-border-color};
+      --clr-calendar-active-cell-background-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-calendar-active-focus-cell-background-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-calendar-active-cell-color: #{tokens.$cds-alias-typography-color-100};
+      --clr-calendar-btn-picker-trigger-color: #{tokens.$cds-alias-typography-link-color};
+      --clr-calendar-btn-picker-trigger-hover-color: #{tokens.$cds-alias-typography-link-color-hover};
+      --clr-calendar-btn-picker-trigger-active-color: #{tokens.$cds-alias-typography-link-color};
+      --clr-calendar-btn-hover-focus-color: #{tokens.$cds-alias-object-interaction-background-hover};
+      --clr-calendar-btn-hover-focus-color-text: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-calendar-btn-active-color: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-calendar-btn-active-color-bg: #{tokens.$cds-alias-object-interaction-background-active};
+    }
+  }
+}

package/forms/datepicker/_variables.datepicker.scss

@@ -0,0 +1,74 @@
+/*
+ * 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/mixins';
+@use '../../button/variables.buttons' as button-variables;
+@use '../../styles/variables/variables.density' as density;
+
+$clr-calendar-background-color: var(--clr-calendar-background-color) !default;
+$clr-calendar-border-color: var(--clr-calendar-border-color) !default;
+$clr-calendar-vertical-padding: #{density.$clr-base-vertical-offset-xl};
+$clr-calendar-horizontal-padding: #{density.$clr-base-horizontal-offset-xl};
+$clr-calendar-button-gap: #{density.$clr-base-gap-xs};
+
+$clr-calendar-options-width: mixins.baselinePx(150);
+$clr-calendar-action-buttons-height: calc(
+  #{button-variables.$clr-btn-height} + #{density.$clr-base-vertical-offset-xl}
+); // Button Height + Padding set on .datepicker-actions class
+
+$clr-calendar-btn-size: #{density.$clr-base-row-height-m};
+$clr-calendar-btn-color: var(--clr-calendar-btn-color) !default;
+$clr-calendar-btn-hover-focus-color: var(--clr-calendar-btn-hover-focus-color) !default;
+$clr-calendar-btn-active-color-bg: var(--clr-calendar-btn-active-color-bg) !default;
+$clr-calendar-btn-hover-focus-color-text: var(--clr-calendar-btn-hover-focus-color-text) !default;
+$clr-calendar-btn-active-color: var(--clr-calendar-btn-active-color) !default;
+$clr-calendar-btn-picker-trigger-color: var(--clr-calendar-btn-picker-trigger-color) !default;
+$clr-calendar-btn-picker-trigger-width: calc(2 * #{density.$clr-base-layout-space-2xl}) !default;
+
+$clr-calendar-btn-horizontal-padding: #{density.$clr-base-horizontal-offset-s};
+
+$clr-calendar-header-btn-height: #{density.$clr-base-row-height-l};
+$clr-calendar-month-cell-horizontal-padding: #{density.$clr-base-horizontal-offset-l};
+
+$clr-calendar-picker-btn-font-size: var(--clr-calendar-picker-btn-font-size);
+$clr-calendar-picker-btn-font-weight: var(--clr-calendar-picker-btn-font-weight);
+
+$clr-calendar-today-date-cell-color: var(--clr-calendar-today-date-cell-color) !default;
+$clr-calendar-today-date-cell-font-weight: var(--clr-calendar-today-date-cell-font-weight);
+
+$clr-calendar-active-cell-background-color: var(--clr-calendar-active-cell-background-color) !default;
+$clr-calendar-active-focus-cell-background-color: var(--clr-calendar-active-focus-cell-background-color) !default;
+$clr-calendar-active-cell-color: var(--clr-calendar-active-cell-color) !default;
+
+$clr-calendar-weekday-font-size: var(--clr-calendar-weekday-font-size);
+$clr-calendar-weekday-height: density.$clr-base-typography-line-height-16;
+
+$clr-switcher-width: calc($clr-calendar-btn-size * 3);
+
+// (3 navigation buttons + 2 month / year trigger buttons)
+$clr-calendar-width: calc(3 * #{$clr-calendar-btn-size} + (2 * #{$clr-calendar-btn-picker-trigger-width}));
+
+//(7 = 6 date rows + 1 row for calendar switches and month/year pickers) + 1 row for day heading + 2 * 16px padding + 2px for border + 6 * 4px vertical gap for buttons
+$clr-calendar-height: calc(
+  (7 * #{$clr-calendar-header-btn-height}) + #{$clr-calendar-weekday-height} + (2 * #{$clr-calendar-vertical-padding}) +
+    (2 * #{tokens.$cds-alias-object-border-width-100}) + #{density.$clr-base-gap-s}
+);
+
+$clr-monthpicker-min-height: calc(6 * #{$clr-calendar-header-btn-height});
+$clr-month-year-btn-width: calc(
+  0.5 * #{$clr-calendar-width} - #{$clr-calendar-horizontal-padding} - #{tokens.$cds-alias-object-border-width-100}
+); // Calendar width - calendar padding - border
+$clr-calendar-today-date-cell-border-color: var(--clr-calendar-today-date-cell-border-color);
+
+$clr-calendar-option-text-color: var(--clr-calendar-option-text-color) !default;
+$clr-calendar-option-hover-background-color: var(--clr-calendar-btn-hover-color);
+$clr-calendar-options-background-color: var(--clr-vertical-nav-bg-color);
+$clr-calendar-active-option-border-color: var(--clr-calendar-active-option-border-color);
+$clr-calendar-in-range-cell-background-color: var(--clr-calendar-range-cell-background-color);
+$clr-calendar-options-active-text-color: var(--clr-vertical-nav-item-active-color);
+$clr-calendar-options-active-background-color: var(--clr-vertical-nav-selected-bg-color);

package/forms/styles/_checkbox.clarity.scss

@@ -0,0 +1,193 @@
+/*
+ * 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 '../../emphasis/alert/variables.alert' as alert-variables;
+@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.checkbox') {
+  $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();
+  }
+
+  // @TODO un-nest the checkbox from the wrapper, after old forms are removed
+  .clr-checkbox-wrapper {
+    @include forms-mixins.form-flatten-validate-text();
+
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+
+    @include forms-mixins.checkbox-radio-toggle-control-group-gap();
+
+    .clr-control-label {
+      @include forms-mixins.checkbox-radio-label-styles(
+        forms-variables.$clr-forms-checkbox-label-height,
+        forms-variables.$clr-forms-checkbox-label-color,
+        'SECONDARY-13-RG-CPT'
+      );
+    }
+
+    //Hide the default checkbox behind the pseudo elements
+    //Opacity is set to 0 so that the input remains accessible
+    input[type='checkbox'] {
+      @include forms-mixins.checkbox-radio-input-styles(forms-variables.$clr-forms-checkbox-size);
+
+      @extend %custom-checkbox;
+
+      padding: density.$clr-base-vertical-offset-xs 0;
+
+      &:not(:disabled) {
+        cursor: pointer;
+      }
+
+      //Checkbox base
+      &::before {
+        @include forms-mixins.checkbox-radio-shared-inactive(
+          forms-variables.$clr-forms-checkbox-height,
+          forms-variables.$clr-forms-border-color
+        );
+
+        border-radius: forms-variables.$clr-forms-checkbox-border-radius;
+      }
+
+      //Checkmark
+      &::after {
+        position: absolute;
+        content: '';
+        display: none;
+        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
+          forms-variables.$clr-forms-checkbox-mark-color;
+        border-bottom: forms-variables.$clr-forms-checkbox-mark-border-size solid
+          forms-variables.$clr-forms-checkbox-mark-color;
+        left: $mark-half-size;
+        transform: translate(0, $mark-half-size) rotate(-45deg);
+      }
+
+      &:focus {
+        outline: none;
+
+        &::before {
+          @include mixins.include-outline-style-form-fields(mixins.baselinePx(3));
+        }
+      }
+
+      &:checked {
+        &::before {
+          background: forms-variables.$clr-forms-checkbox-background-color;
+          border: none;
+        }
+
+        &::after {
+          display: inline-block;
+        }
+      }
+
+      &.clr-indeterminate,
+      &:indeterminate {
+        &::before {
+          border: #{tokens.$cds-alias-object-border-width-100} solid
+            forms-variables.$clr-forms-checkbox-indeterminate-border-color;
+        }
+
+        &::after {
+          border-left: none;
+          border-bottom-color: forms-variables.$clr-forms-checkbox-indeterminate-border-color;
+          display: inline-block;
+          transform: translate(0, $mark-half-size);
+        }
+      }
+
+      &:disabled {
+        + label {
+          cursor: not-allowed;
+          color: forms-variables.$clr-forms-label-disabled-color;
+        }
+
+        &::before {
+          background-color: forms-variables.$clr-forms-checkbox-disabled-background-color;
+          border-color: forms-variables.$clr-forms-checkbox-disabled-border-color;
+        }
+
+        &:checked {
+          &::before {
+            background-color: forms-variables.$clr-forms-checkbox-disabled-checked-background-color;
+            border: none;
+          }
+
+          &::after {
+            border-color: forms-variables.$clr-forms-checkbox-disabled-mark-color;
+          }
+        }
+
+        &.clr-indeterminate::after,
+        &:indeterminate::after {
+          border-color: forms-variables.$clr-forms-checkbox-disabled-indeterminate-color;
+          border-left: none;
+        }
+      }
+    }
+
+    &.clr-checkbox-inline {
+      @include forms-mixins.form-inline-input();
+    }
+  }
+
+  .clr-error .clr-checkbox-wrapper:not(.datagrid-select .clr-checkbox-wrapper) input[type='checkbox']::before {
+    border-color: forms-variables.$clr-forms-invalid-color;
+  }
+
+  .clr-form-control-disabled .clr-checkbox-wrapper,
+  .clr-checkbox-wrapper.clr-checkbox-wrapper-disabled {
+    .clr-control-label {
+      cursor: not-allowed;
+      color: forms-variables.$clr-forms-label-disabled-color;
+    }
+
+    input[type='checkbox']::before {
+      background-color: forms-variables.$clr-forms-checkbox-disabled-background-color;
+      border-color: forms-variables.$clr-forms-checkbox-disabled-border-color;
+    }
+
+    input[type='checkbox']:checked {
+      &::before {
+        background-color: forms-variables.$clr-forms-checkbox-disabled-checked-background-color;
+        border: none;
+      }
+
+      &::after {
+        border-color: forms-variables.$clr-forms-checkbox-disabled-mark-color;
+      }
+    }
+
+    input[type='checkbox'].clr-indeterminate::after,
+    input[type='checkbox']:indeterminate::after {
+      border-color: forms-variables.$clr-forms-checkbox-disabled-indeterminate-color;
+      border-left: none;
+    }
+  }
+
+  .clr-form-compact .clr-checkbox-wrapper {
+    padding-top: 0;
+
+    @include forms-mixins.form-flatten-compact-adjustments();
+    @include forms-mixins.form-inline-input();
+
+    .clr-control-label {
+      margin-top: 0;
+    }
+  }
+}