assets/scss/_variables.scss

//  Licensed under the Apache License, Version 2.0 (the "License"); you may not
//  use this file except in compliance with the License. You may obtain a copy of
//  the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
//  Unless required by applicable law or agreed to in writing, software
//  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
//  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
//  License for the specific language governing permissions and limitations under
//  the License.

// Import bootstrap functions here so the color utilities can be used below
@import '~bootstrap/scss/functions';
// _variable_overrides.scss is auto-generated by the 'gen_initialize' Grunt task when starting the dev server or creating a release.
@import 'variable_overrides';

// =============================================================================================
// Note: Fauxton colors/styling must be defined first so they can be referrenced when overriding
// the Bootstrap settings at the end of this file.
// =============================================================================================

// =============================================================================================
// Fauxton's base colors and styles.
// All color literals should only be defined here, so it's easy to reference the complete array
// of colors used in Fauxton. This helps in keeping Fauxton's color scheme consistent and
// short.
// =============================================================================================

// base
$cf-background01: #f2f2f2 !default; // main page background color. former $background
$cf-background02: #333333 !default; // background for overlay panels, trays
$cf-background03: #564e4c !default; // background for items in dropdowns, main nav bar
$cf-background-01-alt: #f7f7f7 !default; // sidebar subitems, stripped table
$cf-brand-highlight: #af2d24 !default; // former $brandHighlight
$cf-brand-hightlight-hover: #e73d34 !default; // former $hoverHighlight
$cf-border-color01: #cccccc !default;
$cf-border-color02: #999999 !default;
$cf-primary: #208019 !default;
$cf-secondary: #0076ad !default;
$cf-danger: #e00025 !default;
$cf-success: #448c11 !default;
$cf-info: #329898 !default;
$cf-error: #d9534f !default;
$cf-warning: #d9c74f !default;
$cf-white: #ffffff !default;
$cf-black: #000000 !default;
$cf-transparent: transparent !default;

// typography
$cf-text01: #333333 !default; // default text color for pages
$cf-text02: #ffffff !default; // text color for overlay panels, trays
$cf-text03: #d9d9d9 !default; // text color for items in dropdowns, main nav bar
$cf-text04: #767f89 !default; // sidebar subitems
$cf-text05: #666666 !default; // font-icon, top header icons/text
$cf-text01-muted: #999999 !default;
$cf-text02-muted: #bbbbbb !default;
$cf-sans-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;

// padding and margins
$cf-main-content-padding: 1rem !default;
$cf-border-radius: 0.375rem !default;

// shadows
$cf-box-shadow: 2px 2px rgba(0, 0, 0, 0.2) !default;

// =============================================================================================
// Fauxton's component-specific styles
// The variables below must NOT use color literals. Instead refering one of the base colors above.
// The only is the code editor since it has its own color scheme for syntax highlighting.
// =============================================================================================

// buttons
$cf-disable-mix-amount: 15% !default;
$cf-btn-active-bg-shade-amount: 20% !default;

$cf-btn-primary-bg: $cf-primary !default;
$cf-btn-primary-color: $cf-white !default;
$cf-btn-primary-border: $cf-btn-primary-bg !default;
$cf-btn-primary-bg-disabled: tint-color(
  $cf-btn-primary-bg,
  $cf-disable-mix-amount
) !default;
$cf-btn-primary-color-disabled: tint-color(
  $cf-btn-primary-color,
  $cf-disable-mix-amount
) !default;
$cf-btn-primary-bg-hover: $cf-brand-hightlight-hover !default;
$cf-btn-primary-color-hover: $cf-btn-primary-color !default;

$cf-btn-secondary-bg: $cf-white !default;
$cf-btn-secondary-color: $cf-text01 !default;
$cf-btn-secondary-border: $cf-border-color02 !default;
$cf-btn-secondary-bg-disabled: tint-color(
  $cf-btn-secondary-bg,
  $cf-disable-mix-amount
) !default;
$cf-btn-secondary-color-disabled: tint-color(
  $cf-btn-secondary-color,
  $cf-disable-mix-amount
) !default;
$cf-btn-secondary-bg-hover: $cf-brand-hightlight-hover !default;
$cf-btn-secondary-color-hover: $cf-white !default;

$cf-btn-danger-bg: $cf-danger !default;
$cf-btn-danger-color: $cf-white !default;
$cf-btn-danger-border: $cf-btn-danger-bg !default;
$cf-btn-danger-bg-disabled: tint-color(
  $cf-btn-danger-bg,
  $cf-disable-mix-amount
) !default;
$cf-btn-danger-color-disabled: tint-color(
  $cf-btn-danger-color,
  $cf-disable-mix-amount
) !default;
$cf-btn-danger-bg-hover: $cf-brand-hightlight-hover !default;
$cf-btn-danger-color-hover: $cf-btn-danger-color !default;

$cf-btn-cancel-bg: transparent !default;
$cf-btn-cancel-color: $cf-text05 !default;
$cf-btn-cancel-border: $cf-btn-cancel-bg !default;
$cf-btn-cancel-bg-disabled: transparent !default;
$cf-btn-cancel-color-disabled: tint-color(
  $cf-btn-cancel-color,
  $cf-disable-mix-amount
) !default;
$cf-btn-cancel-bg-hover: transparent !default;
$cf-btn-cancel-color-hover: $cf-brand-hightlight-hover !default;

$cf-text-fonticon01: $cf-text05 !default;

// code editor or viewer
$cf-code-bg: #4d4d4d !default;
$cf-code-gutter-bg: #3a3a3a !default;
$cf-code-cursor-color: $cf-white !default;
$cf-code-btn-string-edit-color: $cf-white !default;
$cf-code-btn-string-edit-color-hover: $cf-brand-hightlight-hover !default;
$cf-code-active-bg: $cf-black !default;
$cf-code-selection-bg: rgba(29, 151, 215, 0.5) !default;
$cf-code-token-variable-color: $cf-white !default;
$cf-code-token-constant-color: #88d5f6 !default;
$cf-code-token-boolean-color: #f8c072 !default;
$cf-code-token-string-color: #18e2b6 !default;
$cf-code-token-muted: $cf-text02-muted !default;

// documents list (JSON view)
$cf-jsondocs-header-bg: $cf-code-gutter-bg !default;
$cf-jsondocs-header-label: $cf-text03 !default;
$cf-jsondocs-header-docid: $cf-text03 !default;
$cf-jsondocs-header-border: $cf-black !default;
$cf-jsondocs-data-border: $cf-black !default;
$cf-jsondocs-check-bg: $cf-background01 !default;
$cf-jsondocs-check-border: 2px solid $cf-border-color02 !default;
$cf-jsondocs-check-border-hover: 2px solid $cf-border-color01 !default;
$cf-jsondocs-check-checked-bg: $cf-background01 !default;
$cf-jsondocs-check-checked-border: 2px solid $cf-border-color02 !default;

// dropdown menus
$cf-dropdown-bg: $cf-background02 !default;
$cf-dropdown-color: $cf-text02 !default;
$cf-dropdown-heading-bg: $cf-background02 !default;
$cf-dropdown-heading-color: $cf-text02 !default;
$cf-dropdown-item-bg: $cf-background03 !default;
$cf-dropdown-item-color: $cf-text03 !default;
$cf-dropdown-item-bg-hover: $cf-brand-hightlight-hover !default;
$cf-dropdown-item-color-hover: $cf-white !default;

// forms
$cf-input-bg: $cf-white !default;
$cf-check-radio-bg: $cf-secondary !default;

// links
$cf-link-color: $cf-brand-highlight !default;
$cf-link-color-hover: $cf-brand-hightlight-hover !default;
$cf-link-decoration: none !default;
$cf-link-decoration-hover: none !default;

// main nav bar
$cf-navbar-width: 220px !default;
$cf-navbar-width-collapsed: 64px !default;

$cf-navbar-color: $cf-text03 !default;
$cf-navbar-bg: $cf-background02 !default;
$cf-navbar-item-bg: $cf-background03 !default;
$cf-navbar-item-color: $cf-text03 !default;
$cf-navbar-item-bg-hover: $cf-brand-hightlight-hover !default;
$cf-navbar-item-color-hover: $cf-white !default;
$cf-navbar-item-bg-active: $cf-brand-highlight !default;
$cf-navbar-item-color-active: $cf-white !default;
$cf-navbar-item-badge-bg: $cf-link-color-hover !default;
$cf-navbar-item-badge-bg-hover: $cf-navbar-item-color-hover !default;
$cf-navbar-item-badge-bg-active: $cf-navbar-item-color-active !default;

// notifications
$cf-alert-bg: $cf-white !default;
$cf-alert-color: $cf-text01 !default;
$cf-alert-info-color: $cf-info !default;
$cf-alert-success-color: $cf-success !default;
$cf-alert-error-color: $cf-error !default;

// pagination
$cf-pagination-bg: $cf-white !default;
$cf-pagination-color: $cf-link-color !default;
$cf-pagination-color-disabled: $cf-text01-muted !default;
$cf-pagination-border: $cf-border-color01 !default;
$cf-pagination-bg-hover: $cf-background01 !default;
$cf-pagination-color-hover: $cf-link-color !default;
$cf-pagination-active-bg: $cf-brand-highlight !default;
$cf-pagination-active-color: $cf-text02 !default;

// partition selector
$cf-partition-selector-bg: transparent !default;
$cf-partition-selector-color: $cf-text-fonticon01 !default;
$cf-partition-selector-color-hover: $cf-brand-hightlight-hover !default;
$cf-partition-selector-color-active: $cf-brand-highlight !default;

// pills
$cf-pill-bg: $cf-background03 !default;
$cf-pill-color: $cf-text03 !default;
$cf-pill-color-hover: $cf-brand-hightlight-hover !default;

// sidebar
$cf-sidebar-width: 330px !default;
$cf-sidebar-bg: $cf-white !default;
$cf-sidebar-color: $cf-text01 !default;
$cf-sidebar-icon-color: $cf-text-fonticon01 !default;
$cf-sidebar-icon-color-hover: $cf-brand-hightlight-hover !default;
$cf-sidebar-bg-hover: $cf-brand-hightlight-hover !default;
$cf-sidebar-color-hover: $cf-white !default;
$cf-sidebar-bg-active: $cf-background01 !default;
$cf-sidebar-color-active: $cf-brand-highlight !default;
$cf-sidebar-subitem-bg: $cf-background-01-alt !default;
$cf-sidebar-subitem-color: $cf-text04 !default;
$cf-sidebar-subitem-bg-hover: $cf-brand-hightlight-hover !default;
$cf-sidebar-subitem-color-hover: $cf-white !default;

// slider
$cf-slider-bg: $cf-background01 !default;
$cf-slider-bg-highlight: $cf-brand-highlight !default;
$cf-slider-border-color: $cf-border-color02 !default;

// page header
$cf-page-header-border: $cf-border-color01 !default;

// tabs
$cf-tab-wrapper-bg: $cf-transparent !default;
$cf-tab-element-bg: $cf-background01 !default;
$cf-tab-element-color: $cf-text01 !default;
$cf-tab-element-bg-active: $cf-transparent !default;
$cf-tab-element-color-active: $cf-tab-element-color !default;
$cf-tab-element-indicator-active: $cf-link-color-hover !default;
$cf-tab-element-bg-hover: $cf-transparent !default;
$cf-tab-element-color-hover: $cf-link-color-hover !default;
$cf-tab-element-indicator-hover: $cf-tab-element-indicator-active !default;
$cf-tab-element-badge: $cf-link-color-hover !default;

// tables
$cf-table-stripped-bg: $cf-background-01-alt !default;

// top header
$cf-topheader-bg: $cf-background01 !default;
$cf-topheader-color: $cf-text-fonticon01 !default;
$cf-topheader-title-color: $cf-text01 !default;
$cf-topheader-bg-hover: $cf-background01 !default;
$cf-topheader-color-hover: $cf-brand-hightlight-hover !default;
$cf-topheader-height: 64px !default;

// tray
$cf-tray-body-bg: $cf-background02 !default;
$cf-tray-body-color: $cf-text02 !default;

// logo paths can be set via settings.json
$largeLogoPath: '../../../../../assets/img/CouchDB-negative-logo.png' !default;
$smallLogoPath: '../../../../../assets/img/couchdb-logo.png' !default;

// =============================================================================================
// Bootstrap V5 variable overrides
// =============================================================================================

// globals
$body-bg: $cf-background01 !default;
$body-color: $cf-text01 !default;
$text-muted: $cf-text01-muted !default;
$font-family-base: $cf-sans-font-family !default;
$link-color: $cf-link-color !default;
$link-hover-color: $cf-link-color-hover !default;
$link-decoration: $cf-link-decoration !default;
$link-hover-decoration: $cf-link-decoration-hover !default;
$primary: $cf-primary !default;
$secondary: $cf-secondary !default;
$danger: $cf-danger !default;
$success: $cf-success !default;
$info: $cf-info !default;
$warning: $cf-warning !default;

// dropdowns
$dropdown-bg: $cf-dropdown-bg !default;
$dropdown-color: $cf-dropdown-color !default;

// forms
$input-btn-focus-color: rgba($cf-brand-highlight, 0.25) !default;
$input-focus-border-color: tint-color($cf-brand-highlight, 50%) !default;
$input-bg: $cf-input-bg !default;
$form-check-input-checked-bg-color: $cf-check-radio-bg !default;
$form-check-input-checked-border-color: $cf-check-radio-bg !default;

// modals
$modal-backdrop-opacity: 0.5 !default;

// pagination
$pagination-bg: $cf-pagination-bg !default;
$pagination-color: $cf-pagination-color !default;
$pagination-disabled-color: $cf-pagination-color-disabled !default;
$pagination-border-color: $cf-pagination-border !default;
// disabling border radius because paginatio buttons should always be square to match the footer.
$pagination-border-radius: 0 !default;
$pagination-active-bg: $cf-pagination-active-bg !default;
$pagination-active-color: $cf-pagination-active-color !default;
$pagination-hover-color: $cf-pagination-color-hover !default;
$pagination-hover-bg: $cf-pagination-bg-hover !default;

// popover
$popover-bg: $cf-background02 !default;
$popover-body-color: $cf-text02 !default;

// tables
$table-striped-bg: $cf-table-stripped-bg !default;

// other
$enable-rounded: true !default;