Update color and typography variables

scss/typography.scss

@@ -18,19 +18,23 @@ sans-serif;
 // Font, line-height, and color for body text, headings, and more.
 $font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-$font-family-serif: Georgia,
-"Times New Roman",
-Times,
-serif !default;
-$font-family-base: $font-family-sans-serif;
+$font-size-root:              null;
 $font-size-base:              1rem; // Assumes the browser default, typically `16px`
-$font-size-lg: $font-size-base * 1.25;
 $font-size-sm:                $font-size-base * .875;
-$font-size-xs: $font-size-base * .75;
-$font-weight-normal: normal;
-$font-weight-bold: bold;
+$font-size-lg:                $font-size-base * 1.25;
+
+$font-weight-lighter:         lighter;
+$font-weight-light:           300;
+$font-weight-normal:          400;
+$font-weight-bold:            700;
+$font-weight-bolder:          bolder;
+
 $font-weight-base:            $font-weight-normal;
+
 $line-height-base:            1.5;
+$line-height-sm:              1.25;
+$line-height-lg:              2;
+
 $h1-font-size:                $font-size-base * 2.5;
 $h2-font-size:                $font-size-base * 2;
 $h3-font-size:                $font-size-base * 1.75;

scss/variables.scss

@@ -2,11 +2,11 @@
 
 // colors
 $primary-shade: rgb(255, 78, 46);
-$primary-light: lighten($primary-shade, 37%);
-$primary-dark: darken($primary-shade, 12%);
+$primary-light: tint-color($primary-shade, 37%);
+$primary-dark: shade-color($primary-shade, 12%);
 $accent-shade: #0079C0;
-$accent-light: lighten($accent-shade, 37%);
-$accent-dark: darken($accent-shade, 12%);
+$accent-light: tint-color($accent-shade, 37%);
+$accent-dark: shade-color($accent-shade, 12%);
 // Reassign color vars to semantic color scheme
 $red: #dc3545;
 $yellow: #ffc107;
@@ -15,8 +15,16 @@ $cyan: #17a2b8;
 $white: #fff;
 $gray-100: #f8f9fa;
 $gray-800: #343a40;
-$theme-colors: ( primary: $accent-shade, secondary: $primary-shade, success: $green, info: $cyan, warning: $yellow, danger: $red, light: $gray-100, dark: $gray-800);
+// scss-docs-start theme-color-variables
+$primary:       $accent-shade;
+$secondary:     $primary-shade;
+$success:       $green;
+$info:          $cyan;
+$warning:       $yellow;
+$danger:        $red;
 $brand-primary: $accent-shade;
+$light:         $gray-100;
+$dark:          $gray-800;
 //$brand-success: $green;
 //$brand-info: $teal;
 //$brand-warning: $orange;
@@ -32,10 +40,10 @@ $inverse-color: $white;
 // Links
 //
 // Style anchor elements.
-$link-color: $accent-shade;
+//$link-color: $accent-shade;
 $link-decoration: none;
-$link-hover-color: $accent-dark;
-$link-hover-decoration: underline;
+//$link-hover-color: $accent-dark;
+//$link-hover-decoration: underline;
 // Comments
 $comment-spacer-x: 1.25em;
 $comment-spacer-y: 1.25em;
@@ -45,3 +53,4 @@ $enable-shadows: false;
 $enable-gradients: false;
 // Breadcrumbs (Works only on Bootstrap 5+)
 // $breadcrumb-divider: quote(">");
+$enable-caret: true;
\ No newline at end of file