typography elements, dark mode fixes

scss/_dark.scss

@@ -20,6 +20,8 @@
   .topnav,
   .navbar,
   .form-control,
+  .form-select,
+  .form-switch .form-check-input,
   .selectgroup-button {
     background: rgba(0, 0, 0, .1);
     color: inherit;

scss/_variables.scss

@@ -43,9 +43,9 @@ $dark: #1c2c41 !default;
 $black: #000 !default;
 $white: #fff !default;
 
-$body-bg: #f7fafc !default;
+$body-bg: #f5f7fb !default;
+$body-color: #343a40 !default;
 
-$text-color: #495057 !default;
 $text-muted: #888e9a !default;
 $text-muted-light: #adb5bd !default;
 
@@ -125,6 +125,9 @@ $h6-font-size: $font-size-base * .875 !default;
 $blockquote-font-size: $h4-font-size !default;
 $lead-font-size: $h3-font-size !default;
 
+$hr-opacity: .1 !default;
+$hr-margin-y: 1rem !default;
+
 //Sizing
 $spacer: 1rem !default;
 $spacers: (
@@ -270,8 +273,6 @@ $card-border-color: $border-color !default;
 $list-group-border-color: $border-color !default;
 $list-group-action-color: inherit !default;
 
-$body-color: $dark !default;
-
 $input-disabled-bg: $gray-100 !default;
 $input-border-color: $border-color !default;
 $input-placeholder-color: $text-muted-light !default;

scss/layout/_page.scss

@@ -2,8 +2,7 @@
   display: flex;
   align-items: center;
   min-height: 2.5rem;
-  margin: 1rem 0;
-  color: $text-muted;
+  margin: .5rem 0 1.5rem;
 }
 
 .page-title {

scss/ui/_buttons.scss

@@ -1,6 +1,5 @@
 .btn {
   letter-spacing: .03em;
-  text-transform: uppercase;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
 
   .flag {

scss/ui/_examples.scss

@@ -1,5 +1,5 @@
 .example {
-  padding: 1.5rem;
+  padding: 2rem;
   margin: 1rem 0 0;
   border: 1px solid $border-color;
   border-radius: 3px 3px 0 0;

scss/ui/_pagination.scss

@@ -40,7 +40,7 @@
 .page-item-title {
   font-size: $h3-font-size;
   font-weight: 400;
-  color: $text-color;
+  color: $body-color;
 
   .page-link:hover & {
     color: $link-color;

scss/ui/_typo.scss

@@ -1,3 +1,5 @@
+@import 'typo/hr';
+
 .lead {
   line-height: 1.4;
 }
@@ -62,19 +64,7 @@ code {
   }
 }
 
-hr,
-.hr {
-  margin: 2rem auto;
-  border-top-color: $border-color;
-}
 
-.hr-dash {
-  border-top-style: dashed;
-}
-
-.hr-dot {
-  border-top-style: dotted;
-}
 
 pre {
   padding: 1rem;

scss/ui/typo/_hr.scss

@@ -0,0 +1,61 @@
+
+/**
+Horizontal rules
+ */
+.hr {
+  @extend hr;
+}
+
+/**
+Hr text
+ */
+.hr-text {
+  margin: $hr-margin-y 0;
+  display: flex;
+  align-items: center;
+  font-size: $h6-font-size;
+
+  &:after,
+  &:before {
+    height: $hr-height;
+    background-color: currentColor;
+    opacity: $hr-opacity;
+    flex: 1 1 auto;
+  }
+
+  &:after {
+    content: '';
+  }
+
+  > *:first-child {
+    padding-left: 0;
+    padding-right: .5rem;
+    color: $text-muted;
+  }
+
+  &.hr-text-center {
+    &:before {
+      content: '';
+    }
+
+    & > *:first-child {
+      padding-left: .5rem;
+      padding-right: .5rem;
+    }
+  }
+
+  &.hr-text-right {
+    &:before {
+      content: '';
+    }
+
+    &:after {
+      content: none;
+    }
+
+    & > *:first-child {
+      padding-left: .5rem;
+      padding-right: 0;
+    }
+  }
+}