Overleaf/services/web/frontend/stylesheets/components/form.scss

@function form-check-box-svg($color) {
  @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
}

@function form-check-radio-svg($color) {
  @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$color}'/></svg>");
}

@function form-check-indeterminate-svg($color) {
  @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
}

@mixin form-check-light {
  --checkbox-label-color: var(--content-primary);
  --checkbox-border-color: var(--border-primary);
  --checkbox-bg: var(--bg-light-primary);

  // Hover
  --checkbox-hover-border-color: var(--border-hover);

  // Checked
  --checkbox-checked-bg: var(--bg-accent-01);
  --checkbox-checked-border-color: var(--bg-accent-01);
  --checkbox-checked-background-image: #{escape-svg(
      form-check-box-svg($content-primary-dark)
    )};

  // Indeterminate
  --checkbox-indeterminate-background-image: #{escape-svg(
      form-check-indeterminate-svg($content-primary-dark)
    )};

  // Checked & hover
  --checkbox-hover-checked-bg: var(--bg-accent-02);
  --checkbox-hover-checked-border-color: var(--bg-accent-02);

  // Focus
  --checkbox-focus-border-color: var(--border-primary);

  // Disabled
  --checkbox-disabled-bg: var(--bg-light-disabled);
  --checkbox-disabled-border-color: var(--border-disabled);

  // Disabled & checked
  --checkbox-disabled-checked-background-image: #{escape-svg(
      form-check-box-svg($content-disabled-dark)
    )};

  // Disabled & indeterminate
  --checkbox-disabled-indeterminate-background-image: #{escape-svg(
      form-check-indeterminate-svg($content-disabled-dark)
    )};
}

@mixin form-check-dark {
  --checkbox-label-color: var(--content-primary-dark);
  --checkbox-border-color: var(--border-primary-dark);
  --checkbox-bg: var(--bg-dark-primary);

  // Hover
  --checkbox-hover-border-color: var(--border-hover-dark);

  // Checked
  --checkbox-checked-bg: var(--bg-accent-03);
  --checkbox-checked-border-color: var(--bg-accent-03);
  --checkbox-checked-background-image: #{escape-svg(
      form-check-box-svg($content-primary)
    )};

  // Indeterminate
  --checkbox-indeterminate-background-image: #{escape-svg(
      form-check-indeterminate-svg($content-primary)
    )};

  // Checked & hover
  --checkbox-hover-checked-bg: var(--bg-accent-03);
  --checkbox-hover-checked-border-color: var(--bg-accent-03);

  // Focus
  --checkbox-focus-border-color: var(--border-primary-dark);

  // Disabled
  --checkbox-disabled-bg: var(--bg-dark-disabled);
  --checkbox-disabled-border-color: var(--border-disabled-dark);

  // Disabled & checked
  --checkbox-disabled-checked-background-image: #{escape-svg(
      form-check-box-svg($content-disabled-dark)
    )};

  // Disabled & indeterminate
  --checkbox-disabled-indeterminate-background-image: #{escape-svg(
      form-check-indeterminate-svg($content-disabled-dark)
    )};
}

@mixin light-input {
  --input-field-color: var(--content-primary);
  --input-field-bg: var(--bg-light-primary);
  --input-field-border-color: var(--border-primary);
  --input-placeholder-content: var(--content-placeholder);
  --input-border-hover: var(--border-hover);
  --input-field-content-disabled: var(--content-disabled);
}

@mixin dark-input {
  --input-field-color: var(--content-primary-dark);
  --input-field-bg: var(--bg-dark-primary);
  --input-field-border-color: var(--border-primary-dark);
  --input-placeholder-content: var(--content-placeholder-dark);
  --input-border-hover: var(--border-hover-dark);
  --input-field-content-disabled: var(--content-disabled-dark);
}

:root {
  @include form-check-light;
  @include light-input;
}

@include theme('default') {
  .ide-redesign-main,
  .project-ds-nav-page {
    @include form-check-dark;
  }

  .project-ds-nav-page {
    .form-control,
    .form-control-wrapper {
      @include dark-input;
    }
  }
}

#storybook-root {
  @include theme('default') {
    @include form-check-dark;
  }
}

.form-check-input {
  &:hover {
    &:not(:disabled) {
      border-color: var(--border-hover);

      &:checked,
      &[type='checkbox']:indeterminate {
        background-color: var(--bg-accent-02);
        border-color: var(--bg-accent-02);
      }
    }
  }

  &:disabled {
    @include input-disabled-styles;

    &[type='checkbox']:indeterminate {
      @include input-disabled-styles;

      background-image: escape-svg(form-check-indeterminate-svg($neutral-40));
    }
  }

  // Use disabled attribute in addition of :disabled pseudo-class
  // See: https://github.com/twbs/bootstrap/issues/28247
  &[disabled],
  &:disabled {
    ~ .form-check-label {
      color: $input-disabled-color;
    }

    &:checked {
      &[type='checkbox'] {
        background-image: escape-svg(form-check-box-svg($neutral-40));
      }

      &[type='radio'] {
        background-image: escape-svg(form-check-radio-svg($neutral-40));
      }
    }
  }

  &:focus-visible {
    outline: 0;
    border-color: $input-focus-border-color;
    box-shadow: $input-focus-box-shadow;
  }
}

// TODO: compare to live storybook
// NOTE: Nesting inside .form-checkbox to avoid affecting other form checks
// such as input switches and radio buttons.
.form-checkbox {
  .form-check-input {
    background-color: var(--checkbox-bg);
    border-color: var(--checkbox-border-color);

    &:checked,
    &:indeterminate {
      background-color: var(--checkbox-checked-bg);
      border-color: var(--checkbox-checked-border-color);
    }

    &:checked {
      background-image: var(--checkbox-checked-background-image);
    }

    &:indeterminate {
      background-image: var(--checkbox-indeterminate-background-image);
    }

    &:hover {
      &:not(:disabled) {
        border-color: var(--checkbox-hover-border-color);

        &:checked,
        &:indeterminate {
          background-color: var(--checkbox-hover-checked-bg);
          border-color: var(--checkbox-hover-checked-border-color);
        }
      }
    }

    &:disabled {
      background-color: var(--checkbox-disabled-bg);
      border-color: var(--checkbox-disabled-border-color);

      &:indeterminate {
        background-color: var(--checkbox-disabled-bg);
        border-color: var(--checkbox-disabled-border-color);
        background-image: var(
          --checkbox-disabled-indeterminate-background-image
        );
      }
    }

    // Use disabled attribute in addition of :disabled pseudo-class
    // See: https://github.com/twbs/bootstrap/issues/28247
    &[disabled],
    &:disabled {
      ~ .form-check-label {
        color: $input-disabled-color;
      }

      &:checked {
        background-image: var(--checkbox-disabled-checked-background-image);
      }
    }

    &:focus-visible {
      border-color: var(--checkbox-focus-border-color);
    }
  }
}

.form-check-label {
  color: var(--checkbox-label-color);
}

// Fake disabled checkbox style
.readonly-disabled-checkbox input.form-check-input {
  @include input-disabled-styles;

  &:hover:not(:disabled):checked {
    @include input-disabled-styles;
  }
}

.form-switch {
  .form-check-input {
    --bs-form-check-bg: var(--bg-dark-tertiary);

    height: 20px;
    margin: 0;
    border: 0;

    &:hover {
      cursor: pointer;
    }

    &:disabled {
      opacity: 0.32;
      background-color: var(--bg-dark-tertiary);

      &:checked {
        background-color: var(--bg-accent-01);
        background-image: #{escape-svg(
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$component-active-color}'/></svg>")
          )};
      }
    }
  }
}

.form-check-label-description {
  .form-text-inner {
    margin-top: var(--spacing-01) !important;
  }
}

.form-text {
  .form-control[disabled] ~ & {
    color: var(--content-disabled);
  }

  .form-text-inner {
    display: flex;
    gap: var(--spacing-02);
    line-height: var(--line-height-02);
    margin-top: var(--spacing-04);
  }

  &.marginless {
    &,
    .form-text-inner {
      margin: 0;
    }
  }
}

.form-label {
  &:has(+ .form-control[disabled], + .form-control-wrapper-disabled) {
    color: var(--content-disabled);
  }
}

.form-group {
  margin-bottom: $form-group-margin-bottom;
}

.form-control-wrapper {
  position: relative;

  &.form-control-wrapper-disabled {
    .form-control-start-icon,
    .form-control-end-icon {
      & > * {
        color: var(--content-disabled);
      }
    }
  }

  .form-control-start-icon,
  .form-control-end-icon {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;

    &:has(> i),
    &:has(> .material-symbols) {
      pointer-events: none;
    }
  }

  .form-control-start-icon {
    left: 0;
    padding-left: calc(var(--form-control-padding-x) + var(--bs-border-width));
  }

  .form-control-end-icon {
    right: 0;
    padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width));

    .form-control-search-clear-btn {
      @include reset-button;

      display: flex;
      justify-content: center;
      color: var(--input-field-color);
    }
  }

  --icon-width: 20px;
  --form-control-padding-x: var(--spacing-04);
  --form-control-icon-offset-y: var(--spacing-04);

  &.form-control-wrapper-sm {
    --form-control-padding-x: var(--spacing-03);
    --form-control-icon-offset-y: var(--spacing-02);
  }

  &.form-control-wrapper-lg {
    --form-control-padding-x: var(--spacing-05);
    --form-control-icon-offset-y: var(--spacing-05);
  }

  .form-control-offset-start {
    padding-left: calc(
      var(--form-control-padding-x) + var(--form-control-icon-offset-y) +
        var(--icon-width)
    );
  }

  .form-control-offset-end {
    padding-right: calc(
      var(--form-control-padding-x) + var(--form-control-icon-offset-y) +
        var(--icon-width)
    );
  }
}

.form-control,
.form-select {
  &:focus,
  &:invalid:focus,
  &.is-invalid:focus,
  &:focus-visible,
  &:invalid:focus-visible,
  &.is-invalid:focus-visible {
    color: $input-focus-color;
    background-color: $input-focus-bg;
    outline: 0;
    border-color: $input-focus-border-color;
    box-shadow: $input-focus-box-shadow;
  }
}

.website-redesign {
  label {
    color: $form-text-color;
    display: inline-block;
    margin-bottom: var(--spacing-02);
    font-weight: bold;

    @include body-sm;
  }

  .checkbox-label {
    margin-left: var(--spacing-04);
  }

  .form-check-label {
    color: var(--checkbox-label-color);
  }
}

%input-focus-style {
  border-color: $input-focus-border-color;
  box-shadow: $form-check-input-focus-box-shadow;
}

input[type='range'] {
  display: block;
  width: 100%;
}

// Feedback states
.has-success {
  @include form-control-validation($bg-accent-01);
}

.has-warning {
  @include form-control-validation($bg-warning-03);
}

.has-error {
  @include form-control-validation($bg-danger-01);
}

.form-control {
  &[disabled],
  &:disabled {
    &::placeholder {
      color: var(--input-field-content-disabled);
    }
  }
}

input.form-control[type='text'] {
  color: var(--input-field-color);
  background-color: var(--input-field-bg);
  border-color: var(--input-field-border-color);

  &::placeholder {
    color: var(--input-placeholder-content);
  }

  &:focus,
  &:focus-visible {
    color: var(--input-field-color);
    background-color: var(--input-field-bg);
    border-color: var(--input-border-hover);
  }
}