headings unify, borders unify (#1254)

src/pages/_includes/layout/header-actions/new-project.html

@@ -0,0 +1 @@
+{% include ui/button.html text="New project" icon="plus" color="primary" %}

src/pages/_includes/layout/page-header.html

@@ -9,35 +9,36 @@
 {% if page.page-header-file %}
 	{% include layout/headers/{{ page.page-header-file }}.html %}
 {% elsif page-header %}
-<!-- Page title -->
+<!-- Page header -->
 <div class="page-header{% if class %} {{ class }}{% endif %} d-print-none{% if page.layout-navbar-overlap and page.layout-navbar-dark %} text-white{% endif %}">
-
-	<div class="row g-2 align-items-center">
-		<div class="col">
-			{% if pretitle %}
-			<!-- Page pre-title -->
-			<div class="page-pretitle">
-				{{ pretitle }}
-			</div>
-			{% endif %}
-			<h2 class="page-title">
-				{% if icon %}
-					{% include ui/icon.html icon=icon %}
+	<div class="container-xl">
+		<div class="row g-2 align-items-center">
+			<div class="col">
+				{% if pretitle %}
+				<!-- Page pre-title -->
+				<div class="page-pretitle">
+					{{ pretitle }}
+				</div>
 				{% endif %}
-				{{ page-header }}
-			</h2>
+				<h2 class="page-title">
+					{% if icon %}
+						{% include ui/icon.html icon=icon %}
+					{% endif %}
+					{{ page-header }}
+				</h2>
 
-			{% if description %}
-				<div class="text-muted mt-1">{{ description }}</div>
+				{% if description %}
+					<div class="text-muted mt-1">{{ description }}</div>
+				{% endif %}
+			</div>
+
+			{% if actions %}
+				<!-- Page title actions -->
+				<div class="col-12 col-md-auto ms-auto d-print-none">
+					{% include layout/header-actions/{{ actions }}.html %}
+				</div>
 			{% endif %}
 		</div>
-
-		{% if actions %}
-			<!-- Page title actions -->
-			<div class="col-12 col-md-auto ms-auto d-print-none">
-				{% include layout/header-actions/{{ actions }}.html %}
-			</div>
-		{% endif %}
 	</div>
 </div>
 {% endif %}

src/pages/_layouts/default.html

@@ -6,18 +6,19 @@ layout: base
 
 <div class="page">
 	{% if page.layout-sidebar %}
+		<!-- Sidebar -->
 		{% include layout/sidebar.html dark=page.layout-sidebar-dark right=page.layout-sidebar-right transparent=page.layout-navbar-transparent breakpoint="lg" %}
 	{% endif %}
 
 	{% unless page.layout-hide-topbar %}
+		<!-- Navbar -->
 		{% include layout/navbar.html condensed=page.layout-navbar-condensed overlap=page.layout-navbar-overlap dark=page.layout-navbar-dark hide-brand=page.layout-navbar-hide-brand hide-menu=page.layout-navbar-hide-menu sticky=page.layout-navbar-sticky transparent=page.layout-topbar-transparent class=page.layout-navbar-class %}
 	{% endunless %}
 
 	<div class="page-wrapper{% if page.layout-wrapper-full %} page-wrapper-full{% endif %}">
-		<div class="container-xl">
-			{% include layout/page-header.html %}
-		</div>
+		{% include layout/page-header.html %}
 
+		<!-- Page body -->
 		<div class="page-body">
 			{% if page.layout-wrapper-full %}
 			{{ content }}

src/scss/_variables.scss

@@ -28,6 +28,27 @@ $icon-stroke-width: 1.5 !default;
 $icon-size: 1.25rem !default;
 
 //Fonts
+$font-size-75: .75rem !default;
+$font-size-100: .875rem !default;
+$font-size-200: 1rem !default;
+$font-size-300: 1.25rem !default;
+$font-size-400: 1.5rem !default;
+$font-size-500: 1.75rem !default;
+$font-size-600: 2rem !default;
+$font-size-700: 2.5rem !default;
+
+
+
+$line-height-100: 1rem !default;
+$line-height-200: 1.25rem !default;
+$line-height-300: 1.5rem !default;
+$line-height-400: 1.75rem !default;
+$line-height-500: 2rem !default;
+$line-height-600: 2.5rem !default;
+$line-height-700: 3rem !default;
+
+
+
 $font-size-base: .875rem !default;
 $body-letter-spacing: 0 !default;
 
@@ -36,6 +57,16 @@ $font-weight-normal: 400 !default;
 $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
 
+$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
+
+$font-weights: (
+  light: $font-weight-light,
+  normal: $font-weight-normal,
+  medium: $font-weight-medium,
+  bold: $font-weight-bold,
+  headings: $headings-font-weight,
+) !default;
+
 $line-height-base: divide(1.25rem, $font-size-base) !default;
 $line-height-sm: divide(1rem, $font-size-base) !default;
 $line-height-lg: divide(1.5rem, $font-size-base) !default;
@@ -60,6 +91,24 @@ $h6-line-height: divide(1rem, $h6-font-size) !default;
 
 $small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
 
+$font-sizes: (
+  h1: $h1-font-size,
+  h2: $h2-font-size,
+  h3: $h3-font-size,
+  h4: $h4-font-size,
+  h5: $h5-font-size,
+  h6: $h6-font-size,
+) !default;
+
+$line-heights: (
+  h1: $h1-line-height,
+  h2: $h2-line-height,
+  h3: $h3-line-height,
+  h4: $h4-line-height,
+  h5: $h5-line-height,
+  h6: $h6-line-height,
+) !default;
+
 $display-font-sizes: (
   1: 5rem,
   2: 4.5rem,
@@ -70,7 +119,7 @@ $display-font-sizes: (
 ) !default;
 
 $lead-font-size: $font-size-base !default;
-$lead-font-weight: $font-weight-normal !default;
+$lead-font-weight: var(--#{$prefix}font-weight-normal) !default;
 
 $blockquote-font-size: $font-size-base !default;
 
@@ -259,7 +308,6 @@ $link-decoration: none !default;
 $link-hover-decoration: underline !default;
 
 //Typography
-$headings-font-weight: $font-weight-bold !default;
 
 $hr-opacity: $border-opacity !default;
 $hr-margin-y: 2rem !default;
@@ -355,7 +403,7 @@ $accordion-button-focus-border-color: $accordion-border-color !default;
 //alerts
 $alert-padding-x: 1rem !default;
 $alert-padding-y: 1rem !default;
-$alert-link-font-weight: $font-weight-bold !default;
+$alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
 
 $alert-border-width: 1px !default;
 $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
@@ -374,7 +422,7 @@ $breadcrumb-variants: (
 //badges
 $badge-font-size: $code-font-size !default;
 $badge-line-height: $code-line-height !default;
-$badge-font-weight: $font-weight-medium !default;
+$badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $badge-padding-y: .25em !default;
 $badge-padding-x: .5em !default;
 $badge-empty-size: .5rem !default;
@@ -405,7 +453,7 @@ $input-focus-color: inherit !default;
 
 // buttons
 $btn-padding-x: 1rem !default;
-$btn-font-weight: $font-weight-medium !default;
+$btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-radius: var(--#{$prefix}border-radius) !default;
 
 //cards
@@ -553,7 +601,7 @@ $navbar-brand-padding-y: $nav-link-padding-y !default;
 $navbar-brand-image-height: 2rem !default;
 $navbar-brand-margin-right: 0 !default;
 $navbar-brand-font-size: $h3-font-size !default;
-$navbar-brand-font-weight: $font-weight-bold !default;
+$navbar-brand-font-weight: var(--#{$prefix}font-weight-bold) !default;
 
 $navbar-toggler-font-size: 1rem !default;
 $navbar-toggler-padding-x: 0 !default;
@@ -666,7 +714,7 @@ $form-check-margin-bottom: .5rem !default;
 $form-check-input-width: 1rem !default;
 $form-check-padding-start: $form-check-input-width + .5rem !default;
 $form-check-input-bg: $white !default;
-$form-check-input-border: 1px solid $input-border-color-translucent !default;
+$form-check-input-border: var(--#{$prefix}border-width) solid $input-border-color-translucent !default;
 $form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
 $form-check-input-checked-bg-size: 1rem !default;
 $form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;
@@ -700,7 +748,7 @@ $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http:
 $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;
 
 $form-label-font-size: $h4-font-size !default;
-$form-label-font-weight: $font-weight-medium !default;
+$form-label-font-weight: var(--#{$prefix}font-weight-medium) !default;
 
 $caret-width: .36em !default;
 

src/scss/demo.scss

@@ -85,8 +85,8 @@ $demo-icon-size: 4rem;
   aspect-ratio: 1;
   text-align: center;
   padding: .5rem;
-  border-right: 1px solid var(--#{$prefix}border-color);
-  border-bottom: 1px solid var(--#{$prefix}border-color);
+  border-right: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   color: inherit;
   cursor: pointer;
 
@@ -121,7 +121,7 @@ $demo-icon-size: 4rem;
   height: 3rem;
   width: 3rem;
   position: relative;
-  border: 1px solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   box-shadow: $shadow;
 
   &-light { background: linear-gradient(135deg, $white 50%, $light 50%); }

src/scss/demo/_examples.scss

@@ -1,7 +1,7 @@
 .example {
   padding: 2rem;
   margin: 1rem 0 2rem;
-  border: 1px solid $border-color;
+  border: var(--#{$prefix}border-width) solid $border-color;
   border-radius: 3px 3px 0 0;
   position: relative;
 
@@ -37,7 +37,7 @@
 
 .example-code {
   margin: 2rem 0;
-  border: 1px solid $border-color;
+  border: var(--#{$prefix}border-width) solid $border-color;
   border-top: none;
 
   pre {

src/scss/demo/_highlight.scss

@@ -58,7 +58,7 @@ pre.highlight,
 
   .gd {
     background-color: #fcc;
-    border: 1px solid #c00
+    border: var(--#{$prefix}border-width) solid #c00
   }
 
   .ge {
@@ -71,7 +71,7 @@ pre.highlight,
 
   .gi {
     background-color: #cfc;
-    border: 1px solid #0c0
+    border: var(--#{$prefix}border-width) solid #0c0
   }
 
   .gl {

src/scss/layout/_core.scss

@@ -1,27 +1,4 @@
 // stylelint-disable property-no-vendor-prefix
-
-:root {
-  font-size: 16px;
-  height: 100%;
-
-  @each $name, $color in $theme-colors {
-    --#{$prefix}#{$name}: #{$color};
-    --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
-    --#{$prefix}#{$name}-light: #{theme-color-lighter($color)};
-    //--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
-  }
-
-  --#{$prefix}card-bg: #{$card-bg};
-  --#{$prefix}card-bg-hover: #{$card-bg-hover};
-  --#{$prefix}card-color: #{$card-color};
-
-  --#{$prefix}border-color: #{$border-color};
-  --#{$prefix}border-color-light: #{$border-color-light};
-
-  --#{$prefix}icon-color: #{$icon-color};
-  --#{$prefix}disabled-bg: #{$disabled-bg};
-}
-
 body {
   overflow-y: scroll;
   letter-spacing: $body-letter-spacing;
@@ -73,7 +50,7 @@ body {
     color: $body-color;
 
     @include media-breakpoint-up(md) {
-      border: 1px solid var(--#{$prefix}border-color);
+      border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
       background: var(--#{$prefix}body-bg);
     }
 

src/scss/layout/_dark.scss

@@ -148,12 +148,12 @@ body:not(.theme-dark) .hide-theme-light {
 
   .apexcharts-tooltip {
     background: $dark !important;
-    border: 1px solid $dark-mode-border-color !important;
+    border: var(--#{$prefix}border-width) solid $dark-mode-border-color !important;
     box-shadow: 2px 2px 6px -4px $dark-mode-darken !important;
 
     .apexcharts-tooltip-title {
       background: $dark !important;
-      border-bottom: 1px solid $dark-mode-border-color !important;
+      border-bottom: var(--#{$prefix}border-width) solid $dark-mode-border-color !important;
     }
   }
 

src/scss/layout/_footer.scss

@@ -1,5 +1,5 @@
 .footer {
-  border-top: 1px solid $footer-border-color;
+  border-top: var(--#{$prefix}border-width) solid $footer-border-color;
   background-color: $footer-bg;
   padding: $footer-padding-y 0;
   color: $footer-color;

src/scss/layout/_page.scss

@@ -34,7 +34,7 @@
 
 .page-body-card {
   background: var(--#{$prefix}bg-surface);
-  border-top: 1px solid $card-border-color;
+  border-top: var(--#{$prefix}border-width) solid $card-border-color;
   padding: $content-padding-y 0;
   margin-bottom: 0;
   flex: 1;
@@ -85,8 +85,10 @@
 }
 
 .page-header-border {
-  border-bottom: 1px solid $border-color-translucent;
-  padding-bottom: $content-padding-y;
+  border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  padding: $content-padding-y 0;
+  margin: 0 !important;
+  background-color: var(--#{$prefix}bg-surface);
 }
 
 .page-pretitle {
@@ -97,7 +99,7 @@
   margin: 0;
   font-size: $h2-font-size;
   line-height: $h2-line-height;
-  font-weight: $font-weight-bold;
+  font-weight: var(--#{$prefix}font-weight-bold);
   color: inherit;
   display: flex;
   align-items: center;

src/scss/layout/_root.scss

@@ -18,6 +18,18 @@
   --#{$prefix}icon-color: #{$icon-color};
   --#{$prefix}disabled-bg: #{$disabled-bg};
 
+  @each $name, $value in $font-weights {
+    --#{$prefix}font-weight-#{$name}: #{$value};
+  }
+
+  @each $name, $value in $font-sizes {
+    --#{$prefix}font-size-#{$name}: #{$value};
+  }
+
+  @each $name, $value in $line-heights {
+    --#{$prefix}line-height-#{$name}: #{$value};
+  }
+
   @each $name, $value in $shadows {
     --#{$prefix}#{$name}: #{$value};
   }

src/scss/mixins/_mixins.scss

@@ -1,6 +1,6 @@
 @mixin subheader($include-color: true, $include-line-height: true) {
   font-size: $h6-font-size;
-  font-weight: $font-weight-bold;
+  font-weight: var(--#{$prefix}font-weight-bold);
   text-transform: uppercase;
   letter-spacing: .04em;
 

src/scss/ui/_accordion.scss

@@ -13,7 +13,7 @@
   }
 
   &:not(.collapsed) {
-    font-weight: $font-weight-bold;
+    font-weight: var(--#{$prefix}font-weight-bold);
     border-bottom-color: transparent;
     box-shadow: none;
 

src/scss/ui/_alerts.scss

@@ -48,7 +48,7 @@
 .alert-title {
   font-size: $h4-font-size;
   line-height: $h4-line-height;
-  font-weight: $font-weight-bold;
+  font-weight: var(--#{$prefix}font-weight-bold);
   margin-bottom: .25rem;
   color: var(--#{$prefix}alert-color);
 }

src/scss/ui/_avatars.scss

@@ -5,7 +5,7 @@
   width: var(--#{$prefix}avatar-size);
   height: var(--#{$prefix}avatar-size);
   font-size: calc(var(--#{$prefix}avatar-size) / #{$line-height-base * 2});
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
   display: inline-flex;
   align-items: center;
   justify-content: center;

src/scss/ui/_badges.scss

@@ -4,7 +4,7 @@
   background: $gray-500;
   overflow: hidden;
   user-select: none;
-  border: 1px solid transparent;
+  border: var(--#{$prefix}border-width) solid transparent;
   min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
   font-weight: $headings-font-weight;
   letter-spacing: .04em;
@@ -49,7 +49,7 @@
 // bordered
 .badge-outline {
   background-color: transparent;
-  border: 1px solid currentColor;
+  border: var(--#{$prefix}border-width) solid currentColor;
 }
 
 .badge-pill {

src/scss/ui/_calendars.scss

@@ -1,7 +1,7 @@
 .calendar {
   display: block;
   font-size: $font-size-sm;
-  border: 1px solid $border-color;
+  border: var(--#{$prefix}border-width) solid $border-color;
   border-radius: var(--#{$prefix}border-radius);
 }
 
@@ -52,7 +52,7 @@
     vertical-align: middle;
     cursor: pointer;
     background: 0 0;
-    border: 1px solid transparent;
+    border: var(--#{$prefix}border-width) solid transparent;
     border-radius: $border-radius-pill;
     outline: 0;
     @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);

src/scss/ui/_cards.scss

@@ -120,7 +120,7 @@
     bottom: -1px;
     left: -1px;
     content: "";
-    border: 1px solid var(--#{$prefix}primary);
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}primary);
     border-radius: inherit;
   }
 }
@@ -132,10 +132,10 @@
   padding: $card-spacer-y $card-spacer-x;
   text-align: center;
   @include transition(background $transition-time);
-  border-top: 1px solid var(--#{$prefix}border-color);
+  border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   flex: 1;
   color: inherit;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
 
   &:hover {
     text-decoration: none;
@@ -143,7 +143,7 @@
   }
 
   & + & {
-    border-left: 1px solid var(--#{$prefix}border-color);
+    border-left: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   }
 }
 
@@ -158,7 +158,7 @@
     height: 5px;
     content: "";
     background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-    border: 1px solid var(--#{$prefix}card-border-color);
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}card-border-color);
     border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
   }
 }
@@ -297,7 +297,7 @@
   display: block;
   margin: 0 0 1rem;
   font-size: $h3-font-size;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
   color: $headings-color;
   line-height: 1.5rem;
 
@@ -355,7 +355,7 @@
   }
 
   & + & {
-    border-top: 1px solid $border-color;
+    border-top: var(--#{$prefix}border-width) solid $border-color;
   }
 }
 
@@ -448,7 +448,7 @@ Card table
   }
 
   .card-body + & {
-    border-top: 1px solid var(--#{$prefix}table-border-color);
+    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}table-border-color);
   }
 }
 
@@ -493,7 +493,7 @@ Card list group
  */
 .card-list-group {
   .card-body + & {
-    border-top: 1px solid $border-color;
+    border-top: var(--#{$prefix}border-width) solid $border-color;
   }
 
   .list-group-item {

src/scss/ui/_empty.scss

@@ -38,7 +38,7 @@
 .empty-header {
   margin: 0 0 1rem;
   font-size: 4rem;
-  font-weight: $font-weight-light;
+  font-weight: var(--#{$prefix}font-weight-light);
   line-height: 1;
   color: $text-muted;
 }
@@ -60,6 +60,6 @@
 
 
 .empty-bordered {
-  border: 1px solid $border-color;
+  border: var(--#{$prefix}border-width) solid $border-color;
   border-radius: var(--#{$prefix}border-radius);
 }

src/scss/ui/_forms.scss

@@ -10,7 +10,7 @@ Form label
 .col-form-label,
 .form-label {
   display: block;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
 
   &.required {
     &:after {
@@ -23,7 +23,7 @@ Form label
 
 .form-label-description {
   float: right;
-  font-weight: $font-weight-normal;
+  font-weight: var(--#{$prefix}font-weight-normal);
   color: $text-muted;
 }
 
@@ -140,7 +140,7 @@ Form control
   padding: 1rem;
   margin-bottom: 1rem;
   background: var(--#{$prefix}body-bg);
-  border: 1px solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   border-radius: var(--#{$prefix}border-radius);
 }
 
@@ -149,7 +149,7 @@ Form help
  */
 .form-help {
   display: inline-flex;
-  font-weight: $font-weight-bold;
+  font-weight: var(--#{$prefix}font-weight-bold);
   align-items: center;
   justify-content: center;
   width: 1.125rem;

src/scss/ui/_grid.scss

@@ -3,7 +3,7 @@
 }
 
 .col-separator {
-  border-left: 1px solid $border-color;
+  border-left: var(--#{$prefix}border-width) solid $border-color;
 }
 
 %container-common {
@@ -90,7 +90,7 @@
 
   .divide-y#{$name-prefixed} {
     > :not(template) ~ :not(template) {
-      border-top: 1px solid $border-color-translucent !important;
+      border-top: var(--#{$prefix}border-width) solid $border-color-translucent !important;
     }
 
     > :not(template):not(:first-child) {
@@ -104,7 +104,7 @@
 
   .divide-x#{$name-prefixed} {
     > :not(template) ~ :not(template) {
-      border-left: 1px solid $border-color-translucent !important;
+      border-left: var(--#{$prefix}border-width) solid $border-color-translucent !important;
     }
 
     > :not(template):not(:first-child) {

src/scss/ui/_lists.scss

@@ -7,11 +7,11 @@
   background: $list-group-header-bg;
   padding: .5rem $list-group-item-padding-x;
   font-size: $h5-font-size;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1;
   text-transform: uppercase;
   color: $list-group-header-color;
-  border-bottom: 1px solid var(--#{$prefix}border-color);
+  border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
 
   .list-group-flush > & {
     &:last-child {
@@ -48,7 +48,7 @@
 
 .list-bordered {
   .list-item {
-    border-top: 1px solid $border-color;
+    border-top: var(--#{$prefix}border-width) solid $border-color;
     margin-top: -1px;
 
     &:first-child {
@@ -117,7 +117,7 @@ Timeline
 
 .list-timeline-title {
   margin: 0;
-  font-weight: $font-weight-bold;
+  font-weight: var(--#{$prefix}font-weight-bold);
 }
 
 .list-timeline-content {
@@ -179,7 +179,7 @@ Timeline
     }
 
     &.active {
-      font-weight: $font-weight-bold;
+      font-weight: var(--#{$prefix}font-weight-bold);
       color: inherit;
       background: $active-bg;
 
@@ -203,7 +203,7 @@ Timeline
   }
 
   & + & {
-    border-top: 1px solid $border-color;
+    border-top: var(--#{$prefix}border-width) solid $border-color;
   }
 }
 

src/scss/ui/_markdown.scss

@@ -23,7 +23,7 @@ Markdown
 
   > {
     h1, h2, h3, h4, h5, h6 {
-      font-weight: $font-weight-bold;
+      font-weight: var(--#{$prefix}font-weight-bold);
     }
   }
 

src/scss/ui/_modals.scss

@@ -19,7 +19,7 @@
   }
 
   & + & {
-    border-top: 1px solid var(--#{$prefix}border-color);
+    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   }
 }
 

src/scss/ui/_nav.scss

@@ -7,13 +7,13 @@
 
   .nav {
     margin-left: 1.25rem;
-    border-left: 1px solid var(--#{$prefix}border-color);
+    border-left: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
     padding-left: .5rem;
   }
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    font-weight: $font-weight-bold;
+    font-weight: var(--#{$prefix}font-weight-bold);
   }
 
   &.nav-pills {
@@ -53,7 +53,7 @@
 .nav-tabs-alt {
   .nav-link {
     font-size: 13px;
-    font-weight: $font-weight-bold;
+    font-weight: var(--#{$prefix}font-weight-bold);
     text-transform: uppercase;
   }
 }

src/scss/ui/_offcanvas.scss

@@ -3,7 +3,7 @@
 }
 
 .offcanvas-header {
-  border-bottom: 1px solid $border-color-translucent;
+  border-bottom: var(--#{$prefix}border-width) solid $border-color-translucent;
 }
 
 .offcanvas-footer {
@@ -12,7 +12,7 @@
 
 .offcanvas-title {
   font-size: $h3-font-size;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1.5rem;
 }
 

src/scss/ui/_pagination.scss

@@ -43,7 +43,7 @@
 
 .page-item-title {
   font-size: $h3-font-size;
-  font-weight: $font-weight-normal;
+  font-weight: var(--#{$prefix}font-weight-normal);
   color: $body-color;
 
   .page-link:hover & {

src/scss/ui/_progress.scss

@@ -101,7 +101,7 @@ Progressbg
 }
 
 .progressbg-value {
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
   margin-left: auto;
   padding-left: 2rem;
 }

src/scss/ui/_ribbons.scss

@@ -7,7 +7,7 @@
   z-index: 1;
   padding: .25rem .75rem;
   font-size: $h6-font-size;
-  font-weight: $font-weight-bold;
+  font-weight: var(--#{$prefix}font-weight-bold);
   line-height: 1.5rem;
   color: $white;
   text-align: center;

src/scss/ui/_status.scss

@@ -55,7 +55,7 @@
   text-transform: none;
   letter-spacing: normal;
   border-radius: $border-radius-pill;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1;
   margin: 0;
 
@@ -69,7 +69,7 @@
 }
 
 .status-lite {
-  border: 1px solid var(--#{$prefix}border-color) !important;
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
   background: transparent !important;
   color: var(--#{$prefix}body-text) !important;
 }

src/scss/ui/_steps.scss

@@ -87,7 +87,7 @@
   }
 
   &.active {
-    font-weight: $font-weight-bold;
+    font-weight: var(--#{$prefix}font-weight-bold);
 
     &:before {
       background: $white;

src/scss/ui/_tables.scss

@@ -103,7 +103,7 @@
         }
 
         tr {
-          border-bottom: 1px solid $table-border-color;
+          border-bottom: var(--#{$prefix}border-width) solid $table-border-color;
         }
 
         .btn {

src/scss/ui/_type.scss

@@ -43,23 +43,23 @@ h3 {
 
 h4 {
   line-height: $h4-line-height;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
 }
 
 h5 {
   line-height: $h5-line-height;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
 }
 
 h6 {
   line-height: $h6-line-height;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
 }
 
 strong,
 .strong,
 b {
-  font-weight: $font-weight-bold;
+  font-weight: var(--#{$prefix}font-weight-bold);
 }
 
 blockquote {
@@ -112,9 +112,9 @@ code {
 //code {
 //  padding: 2px 4px;
 //  background: rgba($code-color, .03);
-//  border: 1px solid rgba($code-color, .064);
+//  border: var(--#{$prefix}border-width) solid rgba($code-color, .064);
 //  border-radius: var(--#{$prefix}border-radius);
-//  font-weight: $font-weight-normal;
+//  font-weight: var(--#{$prefix}font-weight-normal);
 //}
 
 
@@ -128,7 +128,7 @@ code {
 //  border-radius: var(--#{$prefix}border-radius);
 //  white-space: pre-wrap;
 //  background: mix($light, #ffffff, 50%);
-//  border: 1px solid $border-color-translucent;
+//  border: var(--#{$prefix}border-width) solid $border-color-translucent;
 //  -webkit-font-smoothing: auto;
 //
 //  code {

src/scss/ui/forms/_form-colorinput.scss

@@ -20,7 +20,7 @@ Color Input
   width: 1.5rem;
   height: 1.5rem;
   color: $white;
-  border: 1px solid $input-border-color-translucent;
+  border: var(--#{$prefix}border-width) solid $input-border-color-translucent;
   border-radius: 3px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
 

src/scss/ui/forms/_form-imagecheck.scss

@@ -18,7 +18,7 @@ Image check
   display: block;
   margin: 0;
   user-select: none;
-  border: 1px solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   border-radius: 3px;
 
   .form-imagecheck-input:focus ~ & {
@@ -43,7 +43,7 @@ Image check
     content: "";
     user-select: none;
     background: $white;
-    border: 1px solid $border-color;
+    border: var(--#{$prefix}border-width) solid $border-color;
     border-radius: 3px;
     @include transition(opacity $transition-time);
 

src/scss/ui/forms/_form-selectgroup.scss

@@ -41,7 +41,7 @@ Select group
   text-align: center;
   cursor: pointer;
   user-select: none;
-  border: 1px solid $input-border-color;
+  border: var(--#{$prefix}border-width) solid $input-border-color;
   border-radius: 3px;
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 

src/scss/vendor/_jsvectormap.scss

@@ -9,12 +9,12 @@
 
 .jvm-series-container .jvm-legend  .jvm-legend-title {
   border-bottom: 0;
-  font-weight: $font-weight-medium;
+  font-weight: var(--#{$prefix}font-weight-medium);
 }
 
 .jvm-series-container .jvm-legend {
   background-color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-  border: 1px solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   min-width: 8rem;
 
   .jvm-legend-inner .jvm-legend-tick {
@@ -29,7 +29,7 @@
 }
 
 .jvm-zoom-btn {
-  border: 1px solid var(--#{$prefix}border-color);
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   color: var(--#{$prefix}body-color);
   padding: 0;

src/scss/vendor/_litepicker.scss

@@ -18,7 +18,7 @@
   }
 
   .container__main {
-    border: 1px solid var(--#{$prefix}border-color);
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
     border-radius: var(--#{$prefix}border-radius);
     box-shadow: $dropdown-box-shadow;
   }
@@ -26,7 +26,7 @@
   .container__months {
     .month-item-name,
     .month-item-year {
-      font-weight: $font-weight-medium !important;
+      font-weight: var(--#{$prefix}font-weight-medium) !important;
     }
 
     .button-next-month,

src/scss/vendor/_tinymce.scss

@@ -1,5 +1,5 @@
 .tox-tinymce {
-  border: 1px solid var(--#{$prefix}border-color) !important;
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
   border-radius: $border-radius !important;
   font-family: var(--#{$prefix}font-sans-serif) !important;
 }
@@ -10,7 +10,7 @@
 
 .tox:not(.tox-tinymce-inline) {
   .tox-editor-header {
-    border-bottom: 1px solid var(--#{$prefix}border-color) !important;
+    border-bottom: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
     box-shadow: none !important;
     padding: 0 !important;
   }
@@ -21,5 +21,5 @@
 }
 
 .tox-statusbar {
-  border-top: 1px solid var(--#{$prefix}border-color) !important;
+  border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
 }