overleaf/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss

231 lines
6.8 KiB
SCSS
Raw Normal View History

// 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;
// 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 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: $bg-warning-01;
$danger: $bg-danger-01;
$light: $bg-light-tertiary;
$dark: $neutral-90;
// 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;
// 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-05);
$dropdown-header-color: var(--content-secondary);