[BSv5] Docsy variables cleanup and BS version test (#1462)

assets/scss/_variables.scss

@@ -5,28 +5,17 @@ $enable-shadows: true !default;
 
 // Theme colors
 
+// TODO: consider moving all of these theme-color definitions into the User
+// Guide SCSS, or declare theme here, but namespaced:
+
 $primary: #30638e !default;
 $secondary: #ffa630 !default;
 $success: #3772ff !default;
 $info: #c0e0de !default;
 $warning: #ed6a5a !default;
 $danger: #ed6a5a !default;
-$white: #fff !default;
-$light: #d3f3ee !default;
-
-$dark: #403f4c !default;
-$blue: #72a1e5 !default;
-$orange: #ba5a31 !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #eee !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ccc !default;
-$gray-500: #adb5bd !default;
-$gray-600: #797676 !default;
-$gray-700: #495057 !default;
-$gray-800: #333 !default;
-$gray-900: #222 !default;
-$black: #000 !default;
+$light: #d3f3ee !default; // TODO: consider using BS value
+$dark: #403f4c !default;  // TODO: consider using BS value
 
 $code-color: shade-color($secondary, 40%) !default;
 
@@ -37,16 +26,17 @@ $td-sidebar-tree-root-color: $primary !default;
 $td-sidebar-bg-color: rgba($primary, 0.03) !default;
 $td-sidebar-border-color: $border-color !default;
 
-// Background colors for the sections on home page etc. It is a paint by number system, starting at 0, where the number is taken from the shortcode's ordinal
-// if not provided by the user.
-// These colors are all part of the theme palette, but the mix is fairly random to create variation. This can be overridden by the project if needed.
+// Background colors for the sections on home page etc. It is a paint by number
+// system, starting at 0, where the number is taken from the shortcode's ordinal
+// if not provided by the user. These colors are all part of the theme palette,
+// but the mix is fairly random to create variation. This can be overridden by
+// the project if needed.
 $td-box-colors: $dark, $primary, $secondary, $info, $white, $gray-600, $success,
   $warning, $dark, $danger, $primary, $secondary, $info !default;
 
-$link-color: adjust-color($blue, $lightness: -15%) !default;
+$link-color: $blue-500;
 $link-decoration: none !default;
-$link-hover-color: shade-color($link-color, 30%) !default;
-$link-hover-decoration: none !default;
+$link-shade-percentage: 30% !default;
 
 // Fonts
 
@@ -65,51 +55,35 @@ $td-fonts-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
   $td-fonts-serif: prepend($td-fonts-serif, "#{$google_font_name}");
 }
 
-$font-family-sans-serif: $td-fonts-serif !default;
+$font-family-sans-serif: $td-fonts-serif !default; // TODO: consider moving into UG SCSS or namespace the var (td-)
 
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
-  "Liberation Mono", "Courier New", monospace !default;
-$font-family-base: $font-family-sans-serif !default;
-$font-size-base: 1rem !default;
+  "Liberation Mono", "Courier New", monospace !default; // TODO: consider moving into UG SCSS or namespace the var (td-)
+$font-family-base: $font-family-sans-serif !default; // TODO: consider moving into UG SCSS or namespace the var (td-)
 
 // Font weights
 
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-medium: 500 !default;
-$font-weight-bold: 700 !default;
+$font-weight-medium: 500 !default; // TODO: move into var forward file after upgrading BS to v5.3+
 
 $font-weight-body-text: $font-weight-normal !default;
-$headings-font-weight: $font-weight-medium !default;
 
 // Heading sizes
 
-$h1-font-size: $font-size-base * 2.25 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.5 !default;
-$h4-font-size: $font-size-base * 1.35 !default;
-$h5-font-size: $font-size-base * 1.15 !default;
-$h6-font-size: $font-size-base !default;
+$h3-font-size: $font-size-base * 1.5 !default;  // TODO: consider using BS default (* 1.75), or moving into UG SCSS
+$h4-font-size: $font-size-base * 1.35 !default; // TODO: consider using BS default (* 1.5), or moving into UG SCSS
+$h5-font-size: $font-size-base * 1.15 !default; // TODO: consider using BS default (* 1.25), or moving into UG SCSS
 
 // Space
 
-$spacer: 1rem;
 $td-block-space-top-base: 4 * $spacer !default;
 $td-block-space-bottom-base: 4 * $spacer !default;
 
 // Pagination
 
-$pagination-color: $gray-600 !default;
-$pagination-border-color: rgba($black, 0.1) !default;
-$pagination-active-border-color: adjust-color(
-  $primary,
-  $lightness: -5%
-) !default;
-$pagination-disabled-color: $gray-300 !default;
+$pagination-color: $gray-600 !default; // TODO: consider using BS default
+$pagination-disabled-color: $gray-300 !default; // TODO: consider using BS default
 
 // Navbar
 
-$navbar-dark-color: rgba($white, 0.75) !default;
-$navbar-dark-hover-color: rgba($white, 0.5) !default;
-$navbar-dark-active-color: $white !default;
-$navbar-dark-disabled-color: rgba($white, 0.25) !default;
+$navbar-dark-color: rgba($white, 0.75) !default;      // TODO: consider moving into UG SCSS
+$navbar-dark-hover-color: rgba($white, 0.5) !default; // TODO: consider moving into UG SCSS

assets/scss/_variables_forward.scss

@@ -0,0 +1,21 @@
+// Forward declarations of variables used by _variables.scss and
+// _variables_project.scss.
+//
+// TODO(@chalin): autogenerate the content of this file
+
+// Bootstrap SASS variables:
+
+$white:    #fff !default;
+$gray-300: #dee2e6 !default;
+$gray-600: #6c757d !default;
+$black:    #000 !default;
+
+$blue:    #0d6efd !default;
+
+$blue-500: $blue !default;
+
+$font-size-base: 1rem !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 700 !default;
+
+$spacer: 1rem !default;

assets/scss/main.scss

@@ -1,12 +1,18 @@
 @import "../vendor/bootstrap/scss/functions";
 
 @import "support/functions";
+@import "_variables_forward";
 @import "variables_project";
 @import "variables";
 @import "support/mixins";
 
 @import "../vendor/bootstrap/scss/bootstrap";
 
+$display1-size: null !default;
+@if $display1-size {
+  @error "Docsy requires Bootstrap v5, but v4 was detected. Did you forget to update Docsy dependencies?";
+}
+
 @import "../vendor/Font-Awesome/scss/fontawesome.scss";
 @import "../vendor/Font-Awesome/scss/solid.scss";
 @import "../vendor/Font-Awesome/scss/brands.scss";