Update Essence quite a bit.

.gitignore

@@ -0,0 +1 @@
+.idea

scss/_variables.scss

@@ -1,111 +1,7 @@
-// Color system
+// Customize "very light" schematic colors
-$white:    #fff !default;
+$primary-50:   hsl(265, 100%, 96%) !default; // #f1e8ff;
-$gray-100: #f8f9fa !default;
+$secondary-50: #e9eff2 !default;
-$gray-200: #e9ecef !default;
+$success-50:   hsl(134, 100%, 93%) !default;
-$gray-300: #dee2e6 !default;
+$info-50:      hsl(215, 100%, 97%) !default;
-$gray-400: #ced4da !default;
+$warning-50:   hsl(50, 100%, 96%) !default;
-$gray-500: #adb5bd !default;
+$danger-50:    hsl(350, 100%, 96%) !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black:    #000 !default;
-
-$blue:    #0d6efd !default;
-$indigo:  #6610f2 !default;
-$purple:  hsl(265, 60%, 50%) !default; // Chosen
-$pink:    #d63384 !default;
-$red:     #da0000 !default; // Chosen
-$orange:  hsl(30, 100%, 50%) !default; // Chosen, the Gold color from God
-$green:   hsl(134, 87%, 30%) !default; // Chosen
-$teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
-
-$primary: $purple !default;
-$info:    $blue !default;
-$warning: $orange !default;
-
-// Customize the light and dark text colors for use in our color contrast function.
-$primary-50: #f1e8ff;
-$secondary-50: #e9eff2;
-$success-50: #d9ffe1;
-$info-50: hsl(215, 100%, 97%);
-$warning-50: hsl(50, 100%, 96%);
-$danger-50: hsl(350, 100%, 96%);
-
-// Custom schematic colors
-// TODO: Remove this section
-$primary-lighter: #af83ff;
-$primary-lightest: #f1e8ff;
-$secondary-lighter: #e3e6e8;
-$secondary-lightest: #e9eff2;
-$success-lighter: #42ad5b;
-$success-lightest: #d9ffe1;
-$info-lighter: #67a3fb;
-$info-lightest: hsla(215, 100%, 97%, 1);
-$warning-lighter: #ffb972;
-$warning-lightest: hsla(50, 100%, 96%, 1);
-$danger-lighter: #ff7991;
-$danger-lightest: hsl(350, 100%, 96%);
-
-// Options
-$enable-shadows: true !default;
-
-// Components
-$focus-ring-width: .175rem !default;
-$focus-ring-opacity: .175 !default;
-
-// Body
-$body-background-color: hsl(260, 27%, 94%) !default; // Bootstrap doesn't have this variable
-
-// Links
-// $link-decoration: none !default;
-$link-hover-decoration: none !default;
-
-// Typography
-$font-family-sans-serif: "Roboto", sans-serif !default;
-$font-size-base: 0.9rem !default;
-$line-height-base: 1.6 !default;
-
-$h1-font-size: $font-size-base * 1.6 !default;
-$h2-font-size: $font-size-base * 1.4 !default;
-$h3-font-size: $font-size-base * 1.3 !default;
-$h4-font-size: $font-size-base * 1.2 !default;
-$h5-font-size: $font-size-base * 1.1 !default;
-$h6-font-size: $font-size-base !default;
-$headings-font-weight: bold !default; // Make headings bold
-
-// Tables
-$table-hover-bg-factor: .03 !default;
-
-// Code
-$code-font-size: 100% !default;
-$code-color: $purple !default;
-
-// Forms
-$input-bg: $white;
-$input-color: $black;
-$input-border-color: $gray-500;
-$input-transition: none;
-
-// Buttons
-$btn-box-shadow: null;
-$enable-gradients: true;
-$btn-transition: none;
-
-// Navs
-$nav-link-transition: none;
-
-// Navbar
-$navbar-dark-color: rgba($white, .8) !default;
-$navbar-dark-hover-color: $white !default;
-
-// Dropdown
-$dropdown-link-hover-bg: hsl(200 35% 95% / 1);
-
-// Breadcrumb
-$breadcrumb-divider: quote(">");
-
-// Cards
-$card-border-width: 0;
-$card-box-shadow: 0 .125rem .25rem rgba($black, .075);

scss/bootstrap/_code.scss

@@ -1,5 +1,5 @@
 code {
   padding: 0.2rem 0.3rem;
-  background-color: $primary-lightest;
+  background-color: $primary-50;
   @include border-radius($border-radius-sm);
 }

scss/bootstrap/_reboots.scss

@@ -1,7 +1,3 @@
-body {
-  background-color: $body-background-color; // Off white
-}
-
 a.link-invert {
   text-decoration: none;
 

scss/bootstrap/_variables.scss

@@ -0,0 +1,81 @@
+// Color system (recopied from Bootstrap)
+$white:    #fff !default;
+$gray-500: #adb5bd !default;
+$black:    #000 !default;
+
+$blue:    #0d6efd !default; // From Bootstrap
+$indigo:  #6610f2 !default; // From Bootstrap
+$purple:  hsl(265, 60%, 50%) !default; // Chosen
+$pink:    #d63384 !default; // From Bootstrap
+$red:     hsl(0, 100%, 43%) !default; // Chosen
+$orange:  hsl(30, 100%, 50%) !default; // Chosen, the Gold color from God
+$green:   hsl(134, 87%, 30%) !default; // Chosen
+$teal:    #20c997 !default; // From Bootstrap
+$cyan:    #0dcaf0 !default; // From Bootstrap
+
+$primary: $purple !default;
+$info:    $blue !default;
+$warning: $orange !default;
+
+// Options
+$enable-shadows: true !default;
+
+// Links
+$link-hover-decoration: none !default;
+
+// Components
+$focus-ring-width: .175rem !default;
+$focus-ring-opacity: .175 !default;
+
+// Typography
+$font-family-sans-serif: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+$font-size-base: 0.9rem !default;
+
+$line-height-base: 1.6 !default;
+
+$h1-font-size: $font-size-base * 1.6 !default;
+$h2-font-size: $font-size-base * 1.4 !default;
+$h3-font-size: $font-size-base * 1.3 !default;
+$h4-font-size: $font-size-base * 1.2 !default;
+$h5-font-size: $font-size-base * 1.1 !default;
+$h6-font-size: $font-size-base !default;
+
+$headings-font-weight: bold !default; // Make headings bold
+
+// Tables
+$table-hover-bg-factor: .03 !default;
+
+// Buttons + Forms
+
+// Buttons
+$btn-box-shadow: null;
+$enable-gradients: true;
+$btn-transition: none;
+
+// Forms
+$input-bg: $white;
+$input-color: $black;
+$input-border-color: $gray-500;
+$input-transition: none;
+
+// Navs
+$nav-link-transition: none;
+
+// Navbar
+$navbar-dark-color: rgba($white, .8) !default;
+$navbar-dark-hover-color: $white !default;
+
+// Dropdown
+$dropdown-link-hover-bg: hsl(200, 36%, 95%);
+
+// Cards
+$card-border-width: 0;
+$card-box-shadow: 0 .125rem .25rem rgba($black, .075);
+
+// Breadcrumb
+$breadcrumb-divider: quote(">");
+
+// Code
+$code-font-size: 100% !default;
+$code-color: $purple !default;

scss/elements/_radio.scss

@@ -11,10 +11,15 @@
     padding: 0.5rem 1rem;
     border: 1px solid $gray-300;
     border-radius: 0.25rem;
+    cursor: pointer;
+
+    &:hover {
+      border-color: $gray-500;
+    }
   }
 
   .form-check-input[type=radio]:checked + label {
     background-color: $primary-50;
-    border: 1px solid $primary;
+    border-color: $primary;
   }
 }

scss/elements/_sidebar.scss

@@ -39,7 +39,7 @@
 
     &:hover {
       color: $primary;
-      background-color: $primary-lightest;
+      background-color: $primary-50;
       text-decoration: none;
     }
   }

scss/essence.scss

@@ -1,9 +1,12 @@
-// Load variables
+// Load Bootstrap variables
-@import 'variables';
+@import 'bootstrap/variables';
 
 // Import Bootstrap package
 @import 'bootstrap';
 
+// Load Essence variables
+@import 'variables';
+
 // Bootstrap components
 @import 'bootstrap/reboots';
 @import 'bootstrap/buttons';