cards components, progress fixes, font fixes

pages/_components/progress.html

@@ -0,0 +1,9 @@
+---
+title: Progress bar
+columns: 1
+---
+
+{% include ui/progress-description.html percentage=45 %}
+{% include ui/progress-description.html percentage=32 color="red" %}
+{% include ui/progress-description.html percentage=90 color="yellow" %}
+{% include ui/progress-description.html percentage=51 color="green" %}

pages/_data/menu.yml

@@ -70,10 +70,3 @@ components:
   url: components.html
   title: Components
   icon: truck
-
-customize:
-  url: '#customize'
-  title: Customize
-  icon: sliders
-  toggle: modal
-

pages/_includes/cards/blog-single.html

@@ -24,7 +24,7 @@
       <div class="d-flex align-items-center pt-5 mt-auto">
          {% include ui/avatar.html person-id=avatar size="md" %}
          <div class="ml-3">
-            <a href="{{ site.base }}/profile.html" class="text-default">{{ author.first_name }} {{ author.last_name }}</a>
+            <a href="{{ site.base }}/profile.html" class="text-body">{{ author.first_name }} {{ author.last_name }}</a>
             <small class="d-block text-muted">3 days ago</small>
          </div>
          <div class="ml-auto">

pages/_includes/cards/company-employees.html

@@ -13,7 +13,7 @@
         {% for person in site.data.people limit: 5 offset: 20 %}
         <tr>
             <td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
-            <td><a href="javascript:void(0)" class="text-inherit">{{ person.full_name }}</a></td>
+            <td><a href="javascript:void(0)" class="text-reset">{{ person.full_name }}</a></td>
             <td>{{ person.department }}</td>
             <td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>
             <td>

pages/_includes/cards/invoices.html

@@ -21,7 +21,7 @@
          {% for invoice in site.data.invoices limit: 5 %}
          <tr>
             <td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
-            <td><a href="invoice.html" class="text-inherit">{{ invoice.name }}</a></td>
+            <td><a href="invoice.html" class="text-reset">{{ invoice.name }}</a></td>
             <td>
                {% include ui/flag.html name=invoice.country %}
                {{ invoice.client }}

pages/_includes/cards/recommended-users.html

@@ -5,7 +5,7 @@
     <div class="card-body">
 	    {% for person in site.data.people limit: 5 offset: 50 %}
         <div class="mb-3">
-            <a href="javascript:void(0)" class="d-flex align-items-center text-inherit">
+            <a href="javascript:void(0)" class="d-flex align-items-center text-reset">
                 {% include ui/avatar.html person=person size="sm" class="mr-2"%}
                 {{ person.full_name }}
             </a>

pages/_includes/cards/tasks.html

@@ -13,7 +13,7 @@
 				    </label>
 			    </td>
 			    <td class="w-100">
-				    <a href="javascript:void(0)" class="text-inherit">{{ task.name }}</a>
+				    <a href="javascript:void(0)" class="text-reset">{{ task.name }}</a>
 			    </td>
 			    <td class="text-nowrap text-muted">
 				    {% include ui/icon.html icon="calendar" %}

pages/_includes/cards/top-users.html

@@ -12,7 +12,7 @@
 					</a>
 				</div>
 				<div class="d-flex flex-column">
-					<a href="javascript:void(0)" class="text-default">{{ person.full_name }}</a>
+					<a href="javascript:void(0)" class="text-body">{{ person.full_name }}</a>
 					<a href="javascript:void(0)" class="text-muted leading-none">
 						{{ person.company }}
 					</a>

pages/_includes/layout/sidenav-content.html

@@ -1,6 +1,6 @@
 {% assign id = 0 | random_id %}
 <div class="pb-3">
-   <a href="{{ site.base }}" class="navbar-brand text-inherit">
+   <a href="{{ site.base }}" class="navbar-brand text-reset">
       <img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
       <img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
    </a>

pages/_includes/parts/navbar.html

@@ -7,7 +7,7 @@
       <span class="navbar-toggler-icon"></span>
    </a>
 
-   <a href="{{ site.base }}" class="navbar-brand text-inherit mr-md-3">
+   <a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
       {% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
       {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
       {% if include.logo %}
@@ -101,7 +101,7 @@
                </span>
             {% elsif include.user-menu == 2 %}
             <span class="mx-2 d-none leading-none d-lg-block text-right">
-                    <span class="text-default">{{ person.full_name }}</span>
+                    <span class="text-body">{{ person.full_name }}</span>
                 </span>
             {% include ui/avatar.html src=person.photo %}
             {% elsif include.user-menu == 3 %}

pages/_includes/ui/button.html

@@ -2,13 +2,13 @@
 {% assign spinner-class = false %}
 {% assign provider = include.provider | default: 'fe' %}
 {% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
-{% assign element = include.element | default: 'button' %}
+{% assign e = include.element | default: 'button' %}
-<{{ element }}{% if element == 'a' %} href="{{ include.href | default: '#' }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">
+<{{ e }}{% if e == 'a' %} href="{{ include.href | default: '#' }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">
 {% if include.spinner %}
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true %}{% endif %}
-{{ include.text }}
+{{ include.text | default: "Button" }}
 {% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %}
 
-</{{ element }}>
+</{{ e }}>
 {% endremoveemptylines %}

pages/_includes/ui/icon.html

@@ -1,25 +1,24 @@
 {% removeemptylines %}
-   {% if include.use-svg %}
+{% assign svg-file="svg/" | append: include.icon | append: ".svg" %}
-   {% assign svg-file="svg/" | append: include.icon | append: ".svg" %}
+{% capture svg-icon %}
-   {% capture svg-icon %}
+{% include_cached {{ svg-file }} %}
-   {% include_cached {{ svg-file }} %}
+{% endcapture %}
-   {% endcapture %}
 
-   {% assign replace-to = "icon" %}
+{% assign replace-to = "icon" %}
 
-   {% if include.right %}
+{% if include.right %}
-   {% assign replace-to = replace-to | append: " icon-right" %}
+{% assign replace-to = replace-to | append: " icon-right" %}
-   {% endif %}
-
-   {% if include.class %}
-   {% assign replace-to = replace-to | append: ' ' | append: include.class %}
-   {% endif %}
-
-   {% assign replace-to = 'class="' | append: replace-to | append: '"' %}
-
-   {{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
-{% else %}
-   {% assign provider = include.provider | default: "fe" %}
-   <i class="icon {{ provider }} {{ provider }}-{{ include.icon }}{% if include.class %} {{ include.class }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}"></i>
 {% endif %}
+
+{% if include.class %}
+{% assign replace-to = replace-to | append: ' ' | append: include.class %}
+{% endif %}
+
+{% if include.color %}
+{% assign replace-to = replace-to | append: ' text-' | append: include.color %}
+{% endif %}
+
+{% assign replace-to = 'class="' | append: replace-to | append: '"' %}
+
+{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
 {% endremoveemptylines %}

pages/_includes/ui/progress-description.html

@@ -0,0 +1,11 @@
+{% assign size = include['size'] | default: 'sm' %}
+{% assign color = include.color | default: 'blue' %}
+
+<div class="{% if include.class %}{{ include.class }}{% else %}mb-3{% endif %}">
+   <div class="d-flex mb-1 align-items-center">
+      <div class="text-h5 font-weight-bolder m-0 mr-2">Label</div>
+      <div class="text-h5 text-muted">Description</div>
+      <span class="ml-auto text-h6 text-{{ color }}">{{ include.percentage }}%</span>
+   </div>
+   {% include ui/progress.html size=size percentage=include.percentage color=color %}
+</div>

pages/_layouts/component.html

@@ -7,6 +7,25 @@ og-component: true
 
 {% assign columns = page.columns | default: 0 %}
 
+{% capture demo-html %}
+<div class="tabler-demo">
+  {{ content }}
+</div>
+{% endcapture %}
+
+{% capture demo-css %}
+.tabler-demo {
+   padding: 3rem;
+   -webkit-font-smoothing: antialiased;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   min-height: 100vh;
+   width: 100%;
+}
+{% endcapture %}
+
 <div class="row">
    <div class="col-lg-3">
       <div class="list-group list-group-transparent mb-0">
@@ -37,7 +56,12 @@ og-component: true
 
             <div class="row">
                <div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="secondary" block=true class="mt-4" %}</div>
-               <div class="col">{% include ui/button.html icon="codesandbox" text="Open in sandbox" color="primary" block=true class="mt-4" %}</div>
+               <div class="col">
+                  <form action="https://codepen.io/pen/define" method="post" target="_blank">
+                     <input type="hidden" name="data" value='{"title":"{{ page.title | escape }}","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"{{ demo-html | tidy: 'html' | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' | replace_regex: "'", "\'" }}","css":"{{ demo-css | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' }}", "editors":"100"}'>
+                     {% include ui/button.html icon="codesandbox" text="Edit in CodePen" color="primary" block=true class="mt-4" element="button" type="submit" %}
+                  </form>
+               </div>
             </div>
          </div>
       </div>

pages/_layouts/docs.html

@@ -23,10 +23,10 @@ page-title: Documentation
    </div>
 	<div class="col-lg-9">
 		<div class="card">
-			<div class="card-body p-lg-8">
+			<div class="card-body p-lg-7">
 
 				<div class="markdown">
-					<h2 class="mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>
+					<h2 class="h1 mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>
 
                {% if page.plugin %}
                   <div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code> plugin.</div>

pages/repo.html

@@ -32,12 +32,12 @@ done: true
 		<div class="d-flex align-items-center w-100">
 			{% include ui/avatar.html person=person size="xs" class="mr-2" %}
 			<div>
-				<a href="javascript:void(0)" class="text-default">{{ person.full_name }}</a>
+				<a href="javascript:void(0)" class="text-body">{{ person.full_name }}</a>
 				merge pull request
-				<a href="javascript:void(0)" class="text-default">#176</a>
+				<a href="javascript:void(0)" class="text-body">#176</a>
 				from codecalm/dev
 			</div>
-			<div class="ml-auto">Latest commit <a href="javascript:void(0)" class="text-inherit font-semibold">54e9403</a> 4 days ago</div>
+			<div class="ml-auto">Latest commit <a href="javascript:void(0)" class="text-reset font-semibold">54e9403</a> 4 days ago</div>
 		</div>
 	</div>
 	<div class="table-responsive">
@@ -50,13 +50,13 @@ done: true
 						{% else %}
 							{% include ui/icon.html icon="file" class="mr-1" %}
 						{% endif %}
-						<a href="javascript:void(0)" class="text-default">{{ file.name }}</a>
+						<a href="javascript:void(0)" class="text-body">{{ file.name }}</a>
 					</td>
 					<td class="text-muted text-nowrap">
-						<a href="javascript:void(0)" class="text-inherit">{{ file.comment }}</a>
+						<a href="javascript:void(0)" class="text-reset">{{ file.comment }}</a>
 					</td>
 					<td class="text-right text-muted text-nowrap">
-						<a href="javascript:void(0)" class="text-inherit">{{ file.date }}</a>
+						<a href="javascript:void(0)" class="text-reset">{{ file.date }}</a>
 					</td>
 				</tr>
 			{% endfor %}

pages/text.html

@@ -0,0 +1,44 @@
+---
+---
+
+
+<div class="card">
+   <div class="card-body">
+      <div class="mb-3">
+         <h1>Lorem ipsum dolor sit amet</h1>
+         <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.
+            {% include ui/button.html color="blue" size="sm" %}
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.
+         </p>
+
+         <h2>Lorem ipsum dolor sit amet</h2>
+         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
+
+         <h3>Lorem ipsum dolor sit amet</h3>
+         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
+
+         <h4>Lorem ipsum dolor sit amet</h4>
+         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
+
+         <h5>Lorem ipsum dolor sit amet</h5>
+         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
+      </div>
+      <div class="mb-3">
+         {% include ui/button.html color="blue" %}
+         {% include ui/button.html color="danger" %}
+         {% include ui/button.html color="green" %}
+      </div>
+      <div class="mb-3">
+         <input type="text" class="form-control d-inline-block w-auto" size="10">
+         {% include ui/button.html color="blue"  %}
+
+         <input type="text" class="form-control form-control-sm d-inline-block w-auto" size="10">
+         {% include ui/button.html color="blue" size="sm" %}
+
+         <input type="text" class="form-control form-control-lg d-inline-block w-auto" size="10">
+         {% include ui/button.html color="blue" size="lg" %}
+      </div>
+
+   </div>
+</div>

scss/_config.scss

@@ -1,4 +1,5 @@
 @import "../node_modules/bootstrap/scss/functions";
 
 @import "variables";
+@import "utilities";
 @import "mixins";

scss/_dark.scss

@@ -27,7 +27,7 @@
     color: inherit;
   }
 
-  .text-default {
+  .text-body {
     color: #afbdd1 !important;
   }
 

scss/_utilities.scss

@@ -0,0 +1,70 @@
+//Utilities
+$utilities: (
+  "object": (
+    property: object-fit,
+    class: object,
+    values: (
+      contain: contain,
+      cover: cover,
+      fill: fill,
+      scale-down: scale-down,
+      none: none,
+    )
+  ),
+  "spacing": (
+    property: letter-spacing,
+    class: tracking,
+    values: (
+      tight: -.05em,
+      normal: 0,
+      wide: .05em,
+    )
+  ),
+  "leading": (
+    property: line-height,
+    class: leading,
+    values: (
+      none: 1,
+      tight: 1.25,
+      normal: $line-height-base,
+      loose: 2 !important,
+    )
+  ),
+  "cursor": (
+    property: cursor,
+    class: cursor,
+    values: (
+      auto: auto,
+      pointer: pointer,
+      move: move,
+      not-allowed: not-allowed,
+      zoom-in: zoom-in,
+      zoom-out: zoom-out
+    )
+  ),
+  "font-size": (
+    property: font-size,
+    class: text,
+    values: (
+      h1: $h1-font-size,
+      h2: $h2-font-size,
+      h3: $h3-font-size,
+      h4: $h4-font-size,
+      h5: $h5-font-size,
+      h6: $h6-font-size,
+    )
+  ),
+  "font-weight": (
+    property: font-weight,
+    values: (
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800,
+      black: 900,
+    )
+  ),
+
+) !default;

scss/_variables.scss

@@ -1,5 +1,5 @@
 // FONTS
-$google-font: 'Nunito Sans' !default;
+$google-font: 'Source Sans Pro' !default;
 
 $font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
@@ -42,7 +42,7 @@ $black: #000000 !default;
 $white: #ffffff !default;
 
 $light: #f5f7fb !default;
-$dark: #505061 !default;
+$dark: #495057 !default;
 
 $body-bg: $light !default;
 $body-color: $dark !default;
@@ -107,24 +107,22 @@ $avatar-sizes: (
 //Fonts
 $font-size-base: 1rem !default;
 $font-weight-base: 400 !default;
-$line-height-base: 1.5 !default;
+$line-height-base: 1.6 !default;
-$body-letter-spacing: -.01em !default;
+$body-letter-spacing: null !default;
 
 $border-radius: 3px !default;
 
 //Typography
-$headings-color: #021f34 !default;
 $headings-font-weight: 600 !default;
 
 $small-font-size: 87.5% !default;
 
-$h1-font-size: (23em/15) !default;
+$h1-font-size: (26em/16) !default;
-$h2-font-size: (21em/15) !default;
+$h2-font-size: (21em/16) !default;
-$h3-font-size: (19em/15) !default;
+$h3-font-size: (18em/16) !default;
-$h4-font-size: (17em/15) !default;
+$h4-font-size: (16em/16) !default;
-$h5-font-size: (15em/15) !default;
+$h5-font-size: (14em/16) !default;
-$h6-font-size: (13em/15) !default;
+$h6-font-size: (12em/16) !default;
-$h7-font-size: (11em/15) !default;
 
 $blockquote-font-size: $h4-font-size !default;
 
@@ -205,10 +203,23 @@ $breadcrumb-variants: (
 $badge-font-weight: 500 !default;
 
 //buttons
+$input-btn-line-height: 1.5 !default;
 $input-btn-font-size: 15px !default;
-$btn-padding-x: 1rem !default;
 
-$btn-font-weight: 500 !default;
+$input-btn-font-size-sm: 12px !default;
+$input-btn-padding-x-sm: 6px !default;
+$input-btn-padding-y-sm: 1px !default;
+
+$input-btn-font-size-lg: 20px !default;
+$input-btn-padding-x-lg: 20px !default;
+$input-btn-padding-y-lg: 8px !default;
+
+$input-height: null !default;
+$input-height-sm: null !default;
+$input-height-lg: null !default;
+
+$btn-padding-x: 1rem !default;
+$btn-font-weight: 600 !default;
 $btn-border-radius: 3px !default;
 
 //cards
@@ -272,7 +283,7 @@ $toast-header-color: $text-muted !default;
 $yiq-contrasted-threshold: 200 !default;
 
 //progress
-$progress-bg: $gray-100 !default;
+$progress-bg: $gray-200 !default;
 $progress-height: .75rem !default;
 
 //ribbons
@@ -314,48 +325,3 @@ $flag-sizes: (
   "xl": 4rem
 ) !default;
 
-//Utilities
-$utilities: (
-  "object": (
-    property: object-fit,
-    class: object,
-    values: (
-      contain: contain,
-      cover: cover,
-      fill: fill,
-      scale-down: scale-down,
-      none: none,
-    )
-  ),
-  "spacing": (
-    property: letter-spacing,
-    class: tracking,
-    values: (
-      tight: -.05em,
-      normal: 0,
-      wide: .05em,
-    )
-  ),
-  "leading": (
-    property: line-height,
-    class: leading,
-    values: (
-      none: 1,
-      tight: 1.25,
-      normal: $line-height-base,
-      loose: 2 !important,
-    )
-  ),
-  "cursor": (
-    property: cursor,
-    class: cursor,
-    values: (
-      auto: auto,
-      pointer: pointer,
-      move: move,
-      not-allowed: not-allowed,
-      zoom-in: zoom-in,
-      zoom-out: zoom-out
-    )
-  )
-) !default;

scss/layout/_navbar.scss

@@ -155,7 +155,7 @@ Sidebar
       &:after {
         display: block;
         font-family: $font-icons !important;
-        content: $icon-fe-chevron-down;
+        content: '';
         margin-left: auto;
         transition: transform .3s;
       }

scss/layout/_page.scss

@@ -7,7 +7,7 @@
 
 .page-title {
   margin: 0;
-  font-size: $h3-font-size;
+  font-size: $h2-font-size;
   font-weight: 400;
   line-height: 2.5rem;
   color: $body-color;

scss/tabler.scss

@@ -8,7 +8,6 @@
 @import "config";
 @import "../node_modules/bootstrap/scss/bootstrap";
 
-@import "fonts/tabler-webfont";
 @import "fonts/webfonts";
 
 @import "layout/core";

scss/ui/_buttons.scss

@@ -3,13 +3,14 @@
   align-items: center;
   justify-content: center;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
+  letter-spacing: 0.01em;
 
   &:not([class^='btn-outline']):not([class*=' btn-outline']):not(.btn-secondary) {
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
-    text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, .05);
 
     svg.icon {
-      filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .1));
+      filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .05));
     }
   }
 

scss/ui/_cards.scss

@@ -150,7 +150,7 @@
 
 .card-title {
   display: block;
-  font-size: $h4-font-size;
+  font-size: $h3-font-size;
   font-weight: $headings-font-weight;
   margin: 0 0 1rem;
   color: $headings-color;
@@ -160,7 +160,7 @@
   }
 
   .card-header & {
-    margin: 0;
+    margin: .125rem 0;
   }
 }
 

scss/ui/_inputs.scss

@@ -5,11 +5,9 @@ textarea {
 }
 
 .form-label {
+  @extend .h5;
   display: block;
   margin-bottom: .5rem;
-  font-size: $h6-font-size;
-  font-weight: $headings-font-weight;
-  color: $headings-color
 }
 
 .mb-2 {
@@ -21,6 +19,8 @@ textarea {
 }
 
 .form-control {
+  vertical-align: middle;
+
   &:-webkit-autofill {
     -webkit-box-shadow: 0 0 0 1000px #fff inset;
   }

scss/utils/_text.scss

@@ -1,15 +1,5 @@
 // stylelint-disable declaration-no-important
 
-.text-inherit { color: inherit !important; }
-.text-default { color: $body-color !important; }
-
-.text-h6	{ font-size: $h6-font-size !important; }
-.text-h5	{ font-size: $h5-font-size !important; }
-.text-h4	{ font-size: $h4-font-size !important; }
-.text-h3	{ font-size: $h3-font-size !important; }
-.text-h2	{ font-size: $h2-font-size !important; }
-.text-h1	{ font-size: $h1-font-size !important; }
-
 .text-subheader {
   font-size: $h6-font-size;
   font-weight: 600;
@@ -18,18 +8,6 @@
   letter-spacing: .04em;
 }
 
-.text-label {
-  font-size: $h6-font-size;
-  color: $text-muted;
-  text-transform: uppercase;
-}
-
-.leading-none	{ line-height: 1 !important; }
-.leading-tight	{ line-height: 1.25 !important; }
-.leading-normal	{ line-height: $line-height-base !important; }
-.leading-loose	{ line-height: 2 !important; }
-
-
 /**
 Antialiasing
  */