docs/docs/_sass/utils/_variables.scss
// Variables
// -----------------------------------------------
// -----------------------------------------------
// Colors
// -----------------------------------------------
$brand-primary: #263238;
$brand-secondary: #DCDEE0;
$brand-tertiary: #C5C8CB;
$gray-primary: #A9AAAB;
$white: rgb(255, 255, 255);
$link-color: darken(#263238, 10%);
$link-hover: darken(#263238, 15%);
$background-color: #F5F7F8;
$color-primary: #263238;
$background-color: #F5F7F8;
$box-text-color: #263238;
$dark-color-doc: #273244;
// meta
$meta-color: #CD151D;
$meta-background: #2E3B44;
$meta-hover: #424E56;
// Typography
// -----------------------------------------------
$base-font-family: 'Iosevka Web';
$header-font-family: $base-font-family;
$code-font-family: $base-font-family;
$doc-font-family: 'Open Sans', sans-serif;
$base-font-color: $brand-primary;
$header-font-color: $brand-primary;
$font-regular: 400;
$font-medium: 500;
$font-semibold: 600;
$font-bold: 700;
$base-font-size: 14px;
$base-line-height: 28px;
$base-docs-font-size: 16px;
$heading-font-family: 'Montserrat', sans-serif;
// Sizes
// -----------------------------------------------
$base-point-grid: 8px;
$sidebar-cat-button: 164px;
$sidebar-doc-version-button: 200px;
$height-home-code-block: 400px;
$width-home-code-block: 580px;
$github-modal-width: 178px;
$text-box-icon-size: 27px;
// Animation
// -----------------------------------------------
$short-duration: 150ms;
$base-duration: 350ms;
$doble-base-duration: 500ms;
$base-timing: ease-in-out;
$opacity-transition: opacity $base-duration $base-timing, transform $base-duration $base-timing;
$long-transition: opacity $doble-base-duration $base-timing;
$icons-transition: opacity 400ms ease;
// Breakpoint
// -----------------------------------------------
$bp-small: 480px;
$bp-medium: 768px;
$bp-large: 992px;
$bp-xlarge: 1140px;
// Grid
// -----------------------------------------------
$column-1: (1/12*100%);
$column-2: (2/12*100%);
$column-3: (3/12*100%);
$column-4: (4/12*100%);
$column-5: (5/12*100%);
$column-6: (6/12*100%);
$column-7: (7/12*100%);
$column-8: (8/12*100%);
$column-9: (9/12*100%);
$column-10: (10/12*100%);
$column-11: (11/12*100%);
$column-12: (12/12*100%);
$gutter-margin: ($base-point-grid * 4);
// Border
// -----------------------------------------------
$border-color: rgba($gray-primary, 0.1);
$doc-header-border: rgba($brand-secondary, 0.8);
$sidebar-cat-dropdow: rgba(0, 0, 0, 0.2) 0 2px 8px 0;
// Code
// -----------------------------------------------
$code-border-color: rgba($gray-primary, 0.2);
$code-padding: 16px;
$code-margin: 30px;
// Sidebar Sizes
// -----------------------------------------------
$sidebar-width: 325px;
// Box Shadow
$box-shadow-item: rgba($brand-primary, 0.10) 0 0 20px;
$box-shadow-button: rgba(0,0,0,0.3) 0 2px 8px 0;
$base-box-shadow: 0 4px 10px rgba($meta-background, 0.08);
// Docsearch dropdown
$dropdown-config: (
  main-color: $brand-tertiary,
  layout-type: normal,
  layout-width: full,
  background-color: #fff,
  border-radius: 2,
  border-width: 2,
  border-color: rgba(0, 0, 0, .1),
  box-shadow: none,
  branding-position: bottom,
  spacing: normal,
  include-desc: yes,
  background-category-header: #ffffff,
  font-size: normal,
  header-color: $brand-primary,
  title-color: $brand-primary,
  subtitle-color: $base-font-color,
  text-color: $brand-secondary,
  highlight-color: #ef8836,
  highlight-opacity: 0.3,
  highlight-type: underline
)
!default;
