border radius refactor

_config.yml

@@ -131,7 +131,7 @@ variants:
   - name: danger
     icon: alert-circle
 
-button-variants:
+theme-colors:
   primary:
     class: primary
     title: Primary

src/pages/_data/docs.yml

@@ -105,6 +105,10 @@ utils:
   title: Utilities
   icon: flame
   children:
+    borders:
+      title: Borders
+      url: docs/borders.html
+
     cursors:
       title: Cursors
       url: docs/cursors.html

src/pages/_docs/borders.md

@@ -0,0 +1,70 @@
+---
+title: Borders
+---
+
+## Border direction
+
+The following border utilities classes will add border to any side of an element.
+
+{% capture code %}
+<div class="w-5 h-5 bg-light border"></div>
+<div class="w-5 h-5 bg-light border-top"></div>
+<div class="w-5 h-5 bg-light border-end"></div>
+<div class="w-5 h-5 bg-light border-bottom"></div>
+<div class="w-5 h-5 bg-light border-start"></div>
+<div class="w-5 h-5 bg-light border-x"></div>
+<div class="w-5 h-5 bg-light border-y"></div>
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}
+
+## Border size
+
+Below are the available border size utilities classes.
+
+{% capture code %}
+<div class="w-5 h-5 bg-light border-0"></div>
+<div class="w-5 h-5 bg-light border"></div>
+<div class="w-5 h-5 bg-light border-wide"></div>
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}
+
+
+## Remove border
+
+You can remove a border on a single side of an element by using the following border utilities classes.
+
+{% capture code %}
+<div class="w-5 h-5 bg-light border border-top-0"></div>
+<div class="w-5 h-5 bg-light border border-end-0"></div>
+<div class="w-5 h-5 bg-light border border-bottom-0"></div>
+<div class="w-5 h-5 bg-light border border-start-0"></div>
+<div class="w-5 h-5 bg-light border border-x-0"></div>
+<div class="w-5 h-5 bg-light border border-y-0"></div>
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}
+
+## Border color
+
+You can set a border color of any side of an element by adding the following utilities classes below.
+
+{% capture code %}
+{% for color in site.theme-colors %}
+<div class="w-5 h-5 bg-light border border-{{ color[1].class }}"></div>
+{% endfor %}
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
+
+
+## Border radius
+
+You can set a border to any element by using the following utilities classes below.
+
+{% capture code %}
+<div class="w-5 h-5 bg-light border rounded-0"></div>
+<div class="w-5 h-5 bg-light border rounded"></div>
+<div class="w-5 h-5 bg-light border rounded-1"></div>
+<div class="w-5 h-5 bg-light border rounded-2"></div>
+<div class="w-5 h-5 bg-light border rounded-3"></div>
+<div class="w-5 h-5 bg-light border rounded-circle"></div>
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="d-flex space-x-3" %}

src/pages/_docs/buttons.md

@@ -34,7 +34,7 @@ The standard button creates a white background and subtle hover animation. It's
 Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot.
 
 {% capture code %}
-{% for button in site.button-variants %}
+{% for button in site.theme-colors %}
 {% assign btn-color = button[1].class %}
 {% assign btn-title = button[1].title %}
 {% include ui/button.html color=btn-color text=btn-title %}
@@ -48,7 +48,7 @@ Use the button classes that correspond to the function of your button. The big r
 Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form. 
 
 {% capture code %}
-{% for button in site.button-variants %}
+{% for button in site.theme-colors %}
 {% assign btn-color = button[1].class %}
 {% assign btn-title = button[1].title %}
 {% include ui/button.html color=btn-color text=btn-title disabled=true %}
@@ -74,7 +74,7 @@ Choose the right color for your button to make it go well with your design and d
 Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, at the same time encouraging them to take action. 
 
 {% capture code %}
-{% for button in site.button-variants %}
+{% for button in site.theme-colors %}
 <a href="#" class="btn btn-ghost-{{ button[0] }}">{{ button[1].title }}</a>
 {% endfor %}
 {% endcapture %}

src/pages/_includes/layout/debug.html

@@ -59,7 +59,7 @@
 		height: 6px;
 		display: inline-block;
 		background: rgba(255, 255, 255, .3);
-		border-radius: $border-radius-full;
+		border-radius: $border-radius-pill;
 	}
 
 	body.show-debug-code .card-debug {

src/pages/_includes/parts/buttons-table.html

@@ -2,7 +2,7 @@
 {% assign show-link = include.show-link | default: false %}
 {% assign show-states = include.show-states | default: false %}
 {% assign hide-labels = include.hide-labels | default: false %}
-{% assign variants = include.variants | default: site.button-variants %}
+{% assign variants = include.variants | default: site.theme-colors %}
 
 {% for state in site.button-states %}
    {% if show-states or (state.class != 'active' and state.class != 'disabled') %}

src/scss/_utilities.scss

@@ -1,4 +1,9 @@
 $margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));
+$border-values: (
+  null: $border-width solid $border-color-transparent,
+  wide: $border-width-wide solid $border-color-transparent,
+  0: 0,
+);
 
 //Utilities
 $utilities: (
@@ -57,43 +62,35 @@ $utilities: (
   ),
   "border": (
     property: border,
-    values: (
-      null: $border-width solid $border-color-transparent,
-      wide: $border-width-wide solid $border-color-transparent,
-      0: 0,
-    )
+    values: $border-values
   ),
   "border-top": (
     property: border-top,
-    values: (
-      null: $border-width solid $border-color-transparent,
-      wide: $border-width-wide solid $border-color-transparent,
-      0: 0,
-    )
+    values: $border-values
   ),
   "border-end": (
+    class: border-end,
     property: border-right,
-    values: (
-      null: $border-width solid $border-color-transparent,
-      wide: $border-width-wide solid $border-color-transparent,
-      0: 0,
-    )
+    values: $border-values
   ),
   "border-bottom": (
     property: border-bottom,
-    values: (
-      null: $border-width solid $border-color-transparent,
-      wide: $border-width-wide solid $border-color-transparent,
-      0: 0,
-    )
+    values: $border-values
   ),
   "border-start": (
+    class: border-start,
     property: border-left,
-    values: (
-      null: $border-width solid $border-color-transparent,
-      wide: $border-width-wide solid $border-color-transparent,
-      0: 0,
-    )
+    values: $border-values
+  ),
+  "border-x": (
+    class: border-x,
+    property: border-left border-right,
+    values: $border-values
+  ),
+  "border-y": (
+    class: border-y,
+    property: border-top border-bottom,
+    values: $border-values
   ),
   "width": (
     property: width,

src/scss/_variables.scss

@@ -189,8 +189,11 @@ $dark-mode-text: $light;
 // Borders
 $border-width: 1px !default;
 $border-width-wide: 2px !default;
-$border-radius: 3px !default;
-$border-radius-full: 50% !default;
+
+$border-radius-sm: 2px !default;
+$border-radius: 4px !default;
+$border-radius-lg: 8px !default;
+$border-radius-pill: 50% !default;
 
 // Avatars
 $avatar-size: 2.5rem !default;
@@ -238,14 +241,13 @@ $size-spacers: (
 ) !default;
 
 
-$size-values: (
-  1: 1%,
+$size-values: map-merge($spacers, (
   25: 25%,
   50: 50%,
   75: 75%,
   100: 100%,
   auto: auto
-) !default;
+)) !default;
 
 
 $container-variations: (

src/scss/ui/_avatars.scss

@@ -25,7 +25,7 @@
     position: absolute;
     right: 0;
     bottom: 0;
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
     box-shadow: 0 0 0 2px $white;
   }
 
@@ -35,7 +35,7 @@
 }
 
 .avatar-rounded {
-  border-radius: $border-radius-full;
+  border-radius: $border-radius-pill;
 }
 
 @each $avatar-size, $size in $avatar-sizes {

src/scss/ui/_badges.scss

@@ -21,7 +21,7 @@
     min-width: 0;
     min-height: auto;
     padding: 0;
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
   }
 
   .avatar {

src/scss/ui/_buttons.scss

@@ -157,7 +157,7 @@
   z-index: $zindex-fixed;
   bottom: 1.5rem;
   right: 1.5rem;
-  border-radius: $border-radius-full;
+  border-radius: $border-radius-pill;
 }
 
 .btn-loading {
@@ -172,7 +172,7 @@
     vertical-align: text-bottom;
     border: $spinner-border-width-sm solid currentColor;
     border-right-color: transparent;
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
     color: $white;
     position: absolute;
     width: 1rem;

src/scss/ui/_calendars.scss

@@ -53,7 +53,7 @@
     cursor: pointer;
     background: 0 0;
     border: 1px solid transparent;
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
     outline: 0;
     transition: background .3s, border .3s, box-shadow .32s, color .3s;
 

src/scss/ui/_forms.scss

@@ -152,7 +152,7 @@ Form help
   cursor: pointer;
   user-select: none;
   background: $min-white;
-  border-radius: $border-radius-full;
+  border-radius: $border-radius-pill;
   transition: .3s background-color, .3s color;
 
   &:hover,

src/scss/ui/_lists.scss

@@ -77,7 +77,7 @@
   color: $white;
   text-align: center;
   background: $text-muted;
-  border-radius: $border-radius-full;
+  border-radius: $border-radius-pill;
 
   .icon {
     width: 1rem;

src/scss/ui/_loaders.scss

@@ -28,7 +28,7 @@
     border-top-color: currentColor;
     border-left-color: currentColor;
 
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
     animation: loader .6s linear;
     animation-iteration-count: infinite;
   }

src/scss/ui/_skeleton.scss

@@ -20,7 +20,7 @@
   vertical-align: bottom;
   width: $avatar-size;
   height: $avatar-size;
-  border-radius: $border-radius-full;
+  border-radius: $border-radius-pill;
 
   @each $name, $size in $avatar-sizes {
     &-#{$name} {

src/scss/ui/_steps.scss

@@ -82,7 +82,7 @@
     display: block;
     content: "";
     border: 2px solid $white;
-    border-radius: $border-radius-full;
+    border-radius: $border-radius-pill;
     transform: translateX(-50%);
   }