Overleaf/services/web/frontend/stylesheets/abstracts/variable-overrides.scss

// Overrides for Bootstrap 5's default Sass variables

$prefix: bs-;

// Options
// Quickly modify global styling by enabling or disabling optional features.

$enable-validation-icons: false;
$component-active-color: $white;

// Fonts
$font-family-sans-serif: 'Noto Sans', sans-serif;
$font-family-serif: 'Merriweather', serif;
$font-family-monospace: 'DM Mono', monospace;
$font-size-base: 1rem;
$font-size-sm: var(--font-size-02);
$line-height-base: 1.5;

// Components
// Define common padding and border radius sizes and more.

$focus-ring-width: 2px;
$focus-ring-opacity: 1;
$focus-ring-color: $blue-30;
$focus-ring-blur: 0;

// Buttons
$btn-font-family: $font-family-sans-serif;
$btn-font-weight: 600;
$btn-padding-x: $spacing-06;
$btn-padding-y: $spacing-02;
$btn-border-radius: $border-radius-full;
$btn-border-radius-lg: $border-radius-full;
$btn-border-radius-sm: $border-radius-full;
$btn-white-space: nowrap;

// Tables
$table-cell-padding-y: $spacing-04;
$table-cell-padding-x: $spacing-04;
$table-cell-padding-y-sm: $spacing-02;
$table-cell-padding-x-sm: $spacing-02;
$table-color: var(--content-secondary);
$table-bg: var(--bg-light-primary);
$table-th-font-weight: 600;
$table-striped-color: $table-color;
$table-striped-bg: var(--bg-light-secondary);
$table-active-color: $table-color;
$table-active-bg: $bg-accent-03;
$table-hover-color: $table-color;
$table-hover-bg: var(--bg-light-secondary);
$table-border-color: $border-divider;
$table-striped-order: even;
$table-caption-color: var(--content-secondary);

// Forms

// form-text-variables
$form-text-margin-top: $spacing-04;
$form-text-font-size: var(--font-size-02);
$form-text-color: var(--content-secondary);

// form-label-variables
$form-label-margin-bottom: $spacing-02;
$form-label-font-size: var(--font-size-02);
$form-label-font-weight: 600;
$form-label-color: var(--content-secondary);

// form-input-variables
$input-padding-y: $spacing-03;
$input-padding-x: $spacing-04;
$input-font-size: var(--font-size-03);
$input-line-height: 1.5; // equivalent of var(--line-height-03) - BS expects a unitless value for further calculations

$input-padding-y-sm: $spacing-01;
$input-padding-x-sm: $spacing-03;
$input-font-size-sm: var(--font-size-02);
$input-line-height-sm: 1.25; // equivalent of var(--line-height-02) - BS expects a unitless value for further calculations

$input-padding-y-lg: $spacing-05;
$input-padding-x-lg: $spacing-05;
$input-font-size-lg: var(--font-size-03);
$input-bg: $bg-light-primary;
$input-disabled-color: var(--content-disabled);
$input-disabled-bg: $bg-light-disabled;
$input-disabled-border-color: var(--border-disabled);
$input-color: $content-primary;
$input-border-color: $neutral-60;
$input-border-width: var(--bs-border-width);
$input-border-radius: $border-radius-base;
$input-border-radius-sm: $border-radius-base;
$input-border-radius-lg: $border-radius-base;
$input-focus-border-color: var(--border-active);
$input-placeholder-color: var(--content-placeholder);
$input-plaintext-color: $content-primary;
$input-height-border: calc(
  #{$input-border-width} * 2
); // stylelint-disable-line function-disallowed-list

$input-height: add(
  $input-line-height * 1em,
  add($input-padding-y * 2, $input-height-border, false)
);
$input-height-sm: add(
  $input-line-height-sm * 1em,
  add($input-padding-y-sm * 2, $input-height-border, false)
);
$input-height-lg: add(
  $input-line-height * 1em,
  add($input-padding-y-lg * 2, $input-height-border, false)
);

// form-check-variables
$form-check-label-color: var(--content-primary);
$form-check-input-border: var(--bs-border-width) solid var(--border-primary);
$form-check-input-border-radius: $border-radius-base;
$form-check-input-focus-border: var(--border-primary);
$form-check-input-disabled-opacity: 1;

// form-switch-variables
$form-switch-width: 34px;
$form-switch-padding-start: $spacing-03;
$form-switch-color: $component-active-color;
$form-switch-width: 34px;
$form-switch-padding-start: $spacing-03;
$form-switch-focus-color: $component-active-color;
$form-switch-checked-color: $component-active-color;

// form-group
$form-group-margin-bottom: $spacing-06;

// Form validation

// form-feedback-variables
$form-feedback-invalid-color: $bg-danger-01;
$form-feedback-icon-invalid: null;
$form-feedback-margin-top: 0; // Our feedback component wraps Form.Text, which takes care of top margin

// form-validation-colors
$form-invalid-color: $form-feedback-invalid-color;
$form-invalid-border-color: $bg-danger-01;

// form-validation-states
$form-validation-states: (
  'invalid': (
    'color': $bg-danger-01,
    'icon': $form-feedback-icon-invalid,
    'tooltip-color': #fff,
    'tooltip-bg-color': var(--bs-danger),
    'focus-box-shadow': 0 0 $focus-ring-blur $focus-ring-width
      rgba($red-30, $focus-ring-opacity),
    'border-color': var(--#{$prefix}form-invalid-border-color),
  ),
);

// Close buttons
$btn-close-color: $content-primary;
$btn-close-opacity: 1;
$btn-close-width: 10px;

// Colors
$primary: $bg-accent-01;
$secondary: $bg-light-primary;
$success: $bg-accent-01;
$info: $bg-info-01;
$warning: $content-warning;
$danger: $bg-danger-01;
$light: $bg-light-tertiary;
$dark: $neutral-90;
$warning-light-gb: $bg-warning-03;

// Theme colors
$theme-colors: (
  'primary': $primary,
  'secondary': $secondary,
  'success': $success,
  'info': $info,
  'warning': $warning,
  'warning-light-bg': $warning-light-gb,
  'danger': $danger,
  'light': $light,
  'dark': $dark,
);

// Body colors
$body-color: $content-primary;
$body-bg: $bg-light-primary;
$body-secondary-color: $content-secondary;
$body-secondary-bg: $bg-light-secondary;
$body-tertiary-color: $content-disabled;
$body-tertiary-bg: $bg-light-tertiary;

// Badges
$badge-font-size: var(--font-size-01);
$badge-font-weight: var(--bs-body-font-weight);
$badge-padding-y: $spacing-01;
$badge-padding-x: $spacing-02;
$badge-border-radius: $border-radius-base;

// Tooltips
$tooltip-max-width: 320px;
$tooltip-border-radius: $border-radius-base;
$tooltip-padding-y: $spacing-04;
$tooltip-padding-x: $spacing-06;

// Popovers
$popover-font-size: var(--font-size-02);
$popover-bg: var(--bg-dark-primary);
$popover-max-width: 320px;
$popover-border-width: 0px; /* stylelint-disable-line length-zero-no-unit */
$popover-border-radius: var(--border-radius-base);
$popover-header-font-size: var(--font-size-02);
$popover-header-bg: var(--bg-dark-primary);
$popover-header-color: var(--content-primary-dark);
$popover-header-padding-y: var(--spacing-04);
$popover-header-padding-x: var(--spacing-06);
$popover-body-color: var(--content-primary-dark);
$popover-body-padding-y: var(--spacing-04);
$popover-body-padding-x: var(--spacing-06);
$popover-arrow-width: var(--spacing-04);
$popover-arrow-height: var(--spacing-02);
$popover-arrow-color: var(--bg-dark-primary);

// Links. Ideally we'd point these to CSS variables but Bootstrap performs
// calculations on link color during compilation.
$link-color: $link-ui;
$link-hover-color: $link-ui-hover;
$link-hover-decoration: none;

// Headings
$headings-font-family: $font-family-sans-serif;
$headings-margin-bottom: $spacing-05;

// Horizontal rules
$hr-margin-y: $spacing-08;
$hr-border-color: $border-divider;

// Modals
$modal-backdrop-bg: $bg-dark-primary;
$modal-backdrop-opacity: 0.72;
$modal-content-color: $content-secondary;
$modal-content-border-color: $border-divider;
$modal-header-padding: $spacing-05 $spacing-06;
$modal-header-padding-x: $spacing-08;
$modal-header-padding-y: $spacing-08;

// Nav toggler
$navbar-toggler-font-size: 30px;
$navbar-toggler-padding-x: var(--spacing-05);
$navbar-toggler-padding-y: var(--spacing-02);
$navbar-toggler-border-radius: var(--border-radius-base);

// Nav links
$navbar-nav-link-padding-x: var(--navbar-btn-padding-h);

// Spacing scale used by Bootstrap utilities
$spacer: $spacing-06;
$spacers: (
  0: 0,
  1: $spacing-02,
  2: $spacing-04,
  3: $spacing-06,
  4: $spacing-08,
  5: $spacing-11,
);

// Dropdowns
$dropdown-link-disabled-color: var(--content-disabled);
$dropdown-spacer: var(--spacing-01);
$dropdown-border-width: 0;
$dropdown-border-radius: var(--border-radius-base);
$dropdown-padding-x: var(--spacing-02);
$dropdown-padding-y: var(--spacing-02);
$dropdown-item-padding-x: var(--spacing-04);
$dropdown-item-padding-y: var(--spacing-04);
$dropdown-header-color: var(--content-secondary);

// Offcanvas
$offcanvas-horizontal-width: 320px;
$offcanvas-padding-x: 12.5px;
$offcanvas-padding-y: 12.5px;
$offcanvas-border-width: 0;

// Code
$code-color: $content-secondary;