Refactor badge styles, remove Bootstrap styles (#2169)

.changeset/twelve-garlics-battle.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+"preview": patch
+---
+
+Refactor badge styles, remove Bootstrap styles

core/scss/_bootstrap-components.scss

@@ -17,7 +17,6 @@
 @import "bootstrap/scss/accordion";
 @import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/pagination";
-@import "bootstrap/scss/badge";
 @import "bootstrap/scss/alert";
 @import "bootstrap/scss/progress";
 @import "bootstrap/scss/list-group";

core/scss/_variables.scss

@@ -97,7 +97,9 @@ $h5-line-height: 1rem !default;
 $h6-font-size: 0.625rem !default;
 $h6-line-height: 1rem !default;
 
-$small-font-size: 85.714285% !default;
+$font-size-reative-xs: .71428571em !default;
+$font-size-reative-sm: .85714285em !default;
+$font-size-reative-md: 1em !default;
 
 $font-sizes: (
   1: $h1-font-size,
@@ -309,7 +311,7 @@ $icon-color: var(--#{$prefix}gray-400) !default;
 
 // Code
 $code-color: var(--#{$prefix}gray-600) !default;
-$code-font-size: $small-font-size !default;
+$code-font-size: $font-size-reative-sm !default;
 $code-line-height: 1.25rem !default;
 $code-bg: var(--#{$prefix}bg-surface-secondary) !default;
 
@@ -553,13 +555,15 @@ $breadcrumb-variants: (
 ) !default;
 
 // Badges
-$badge-font-size: $code-font-size !default;
+$badge-font-size: $font-size-reative-sm !default;
+$badge-font-size-sm: $font-size-reative-xs !default;
+$badge-font-size-lg: $font-size-reative-md !default;
 $badge-line-height: $code-line-height !default;
 $badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $badge-padding-y: 0.25em !default;
 $badge-padding-x: 0.5em !default;
-$badge-empty-size: 0.5rem !default;
-$badge-color: var(--#{$prefix}gray-500) !default;
+$badge-empty-size: 10px !default;
+$badge-color: var(--#{$prefix}secondary) !default;
 $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
 
 // Buttons
@@ -605,8 +609,8 @@ $btn-box-shadow: var(--#{$prefix}box-shadow-input) !default;
 
 // Cards
 $card-title-spacer-y: 1.25rem !default;
-$card-box-shadow: var(--#{$prefix}shadow-card) !default;
-$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
+$card-box-shadow: var(--#{$prefix}box-shadow-card) !default;
+$card-hover-box-shadow: var(--#{$prefix}box-shadow-card-hover) !default;
 
 $card-bg: var(--#{$prefix}bg-surface) !default;
 $card-bg-hover: $white !default;

core/scss/ui/_badges.scss

@@ -1,36 +1,46 @@
 .badge {
+  --#{$prefix}badge-padding-x: #{$badge-padding-x};
+  --#{$prefix}badge-padding-y: #{$badge-padding-y};
+  --#{$prefix}badge-font-size: #{$badge-font-size};
+  --#{$prefix}badge-font-weight: #{$badge-font-weight};
+  --#{$prefix}badge-color: #{$badge-color};
+  --#{$prefix}badge-border-radius: #{$badge-border-radius};
+  --#{$prefix}badge-icon-size: 1em;
+  --#{$prefix}badge-line-height: 1;
+  display: inline-flex;
+  padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+  font-weight: var(--#{$prefix}badge-font-weight);
+  font-size: var(--#{$prefix}badge-font-size);
+  color: var(--#{$prefix}badge-color);
+  text-align: center;
+  white-space: nowrap;
   justify-content: center;
   align-items: center;
+  gap: .25rem;
   background: $badge-bg-color;
   overflow: hidden;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
-  min-width: 1.25rem;
-  font-weight: $headings-font-weight;
-  letter-spacing: .04em;
+  border-radius: var(--#{$prefix}badge-border-radius);
+  min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px);
+  letter-spacing: 0.04em;
   vertical-align: bottom;
+  line-height: var(--#{$prefix}badge-line-height);
 
   @at-root a#{&} {
     color: $card-bg;
   }
 
-  .avatar {
-    box-sizing: content-box;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin: 0 .5rem 0 -.5rem;
-  }
-
   .icon {
     width: 1em;
     height: 1em;
-    font-size: 1rem;
+    font-size: var(--#{$prefix}badge-icon-size);
     stroke-width: 2;
   }
 }
 
- .badge:empty,
- .badge-empty {
+.badge:empty,
+.badge-dot {
   display: inline-block;
   width: $badge-empty-size;
   height: $badge-empty-size;
@@ -76,4 +86,28 @@
 
 .badge-blink {
   animation: blink 2s infinite;
+}
+
+//
+// Badge sizes
+//
+.badge-sm {
+  --#{$prefix}badge-font-size: #{$badge-font-size-sm};
+  --#{$prefix}badge-icon-size: 1em;
+  --#{$prefix}badge-padding-y: 2px;
+  --#{$prefix}badge-padding-x: 0.25rem;
+}
+
+.badge-lg {
+  --#{$prefix}badge-font-size: #{$badge-font-size-lg};
+  --#{$prefix}badge-icon-size: 1em;
+  --#{$prefix}badge-padding-y: 0.25rem;
+  --#{$prefix}badge-padding-x: 0.5rem;
+}
+
+//
+// Badge with only icon
+//
+.badge-icononly {
+  --#{$prefix}badge-padding-x: 0;
 }

core/scss/ui/_buttons.scss

@@ -20,6 +20,7 @@
   justify-content: center;
   white-space: nowrap;
   box-shadow: var(--#{$prefix}btn-box-shadow);
+  position: relative;
 
   .icon {
     width: var(--#{$prefix}btn-icon-size);
@@ -224,6 +225,7 @@
 // Action button
 //
 .btn-action {
+  --#{$prefix}border-color: transparent;
   padding: 0;
   border: 0;
   color: var(--#{$prefix}secondary);
@@ -234,6 +236,7 @@
   justify-content: center;
   border-radius: var(--#{$prefix}border-radius);
   background: transparent;
+  box-shadow: none;
 
   &:after {
     content: none;
@@ -253,14 +256,6 @@
   &.show {
     color: var(--#{$prefix}primary);
   }
-
-  .icon {
-    margin: 0;
-    width: 1.25rem;
-    height: 1.25rem;
-    font-size: 1.25rem;
-    stroke-width: 1;
-  }
 }
 
 .btn-actions {

core/scss/ui/_dropdowns.scss

@@ -19,6 +19,7 @@
   align-items: center;
   margin: 0;
   line-height: $line-height-base;
+  gap: .5rem;
 }
 
 .dropdown-item-icon {

preview/eleventy.config.mjs

@@ -522,6 +522,10 @@ export default function (eleventyConfig) {
 		return string.split(' ').map(word => word.charAt(0)).join('');
 	})
 
+	eleventyConfig.addFilter("uc_first", function capitalizeFirstLetter(string) {
+		return string.charAt(0).toUpperCase() + string.slice(1);
+	})
+
 	eleventyConfig.addFilter("size", function (elem) {
 		if (elem instanceof Object) {
 			return Object.keys(elem).length;

preview/pages/_includes/ui/tag.html

@@ -10,7 +10,7 @@
 	{% elsif include.payment %}
 		{% include "ui/payment.html" provider=include.payment size="xxs" class="tag-payment" %}
 	{% elsif include.status %}
-		{% include "ui/badge.html" color=include.status class="tag-status badge-empty" text="" %}
+		{% include "ui/badge.html" color=include.status class="tag-status badge-dot" text="" %}
 	{% elsif include.legend %}
 		<span class="legend bg-{{ include.legend }}"></span>
 	{% elsif include.checkbox %}

preview/pages/badges.html

@@ -6,94 +6,177 @@ layout: default
 permalink: badges.html
 ---
 
+{% assign colors = "" | split: "," %} {% assign colors = colors | push: "default" %} {% for color in site.colors %} {% assign colors = colors | push: color[0]
+%} {% endfor %} {% assign colors = colors | push: "dark" | push: "light" %}
+
 <div class="row row-cards">
-	<div class="col-4">
-		<div class="card">
-			<div class="card-body">
-				<h1>Example heading <span class="badge">New</span></h1>
-				<h2>Example heading <span class="badge">New</span></h2>
-				<h3>Example heading <span class="badge">New</span></h3>
-				<h4>Example heading <span class="badge">New</span></h4>
-				<h5>Example heading <span class="badge">New</span></h5>
-				<h6>Example heading <span class="badge">New</span></h6>
-			</div>
-		</div>
-	</div>
-	<div class="col-8">
-		<div class="row row-cards">
-			<div class="col-12">
-				<div class="card">
-					<div class="card-body">
-						<div class="badges-list">
-							{% for color in site.colors %}
-							<span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg">{{ color[1].title }}</span>
-							{% endfor %}
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="col-12">
-				<div class="card">
-					<div class="card-body">
-						<div class="badges-list">
-							{% for color in site.colors %}
-							<span class="badge bg-{{ color[0] }}-lt">{{ color[1].title }}</span>
-							{% endfor %}
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="col-12">
-				<div class="card">
-					<div class="card-body">
-						<div class="badges-list">
-							{% for color in site.colors %}
-							<span class="badge badge-outline text-{{ color[0] }}">{{ color[1].title }}</span>
-							{% endfor %}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="col-sm-6 col-lg-3">
-		{% include "ui/dropdown-menu.html" show=true badge=true arrow=true %}
-	</div>
-	<div class="col-sm-6 col-lg-9">
-		<div class="row row-cards">
-			<div class="col-12">
-				<div class="card">
-					<div class="card-body">
-						<div class="btn-list">
-							{% for color in site.colors %}
-							<button class="btn">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg ms-2">{{ forloop.index }}</span></button>
-							{% endfor %}
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="col-12">
-				<div class="card">
-					<div class="card-body">
-						<div class="btn-list">
-							{% for color in site.colors %}
-							<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg badge-notification badge-pill">{{ forloop.index }}</span></button>
-							{% endfor %}
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="col-12">
-				<div class="card">
-					<div class="card-body">
-						<div class="btn-list">
-							{% for color in site.colors %}
-							<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} badge-notification badge-blink"></span></button>
-							{% endfor %}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
+  <div class="col-4">
+    <div class="row row-cards">
+      <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            <h1>Example heading <span class="badge">New</span></h1>
+            <h2>Example heading <span class="badge">New</span></h2>
+            <h3>Example heading <span class="badge">New</span></h3>
+            <h4>Example heading <span class="badge">New</span></h4>
+            <h5>Example heading <span class="badge">New</span></h5>
+            <h6>Example heading <span class="badge">New</span></h6>
+          </div>
+        </div>
+      </div>
+      <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            <h3 class="card-title">Badge sizes</h3>
+
+            <div class="space-y">
+              {% assign sizes = "sm,md,lg" | split: "," %} {% for size in sizes %}
+              <div class="badges-list">
+                <span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">Default</span>
+                <span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">{% include "ui/icon.html" icon="check" %} Left icon</span>
+                <span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">Right icon{% include "ui/icon.html" icon="arrow-right" %}</span>
+                <span class="badge badge-icononly{% if size != 'md' %} badge-{{ size }}{% endif %}"
+                  >{% include "ui/icon.html" icon="star" type="filled" %}</span
+                >
+              </div>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            <h3 class="card-title">Positioned badges</h3>
+
+            <div class="btn-list">
+              <button type="button" class="btn">Notifications <span class="badge text-bg-secondary ms-2">4</span></button>
+
+              <button type="button" class="btn">
+                Inbox
+                <span class="badge bg-red badge-notification text-red-fg">
+                  9+
+                  <span class="visually-hidden">unread messages</span>
+                </span>
+              </button>
+
+              <button type="button" class="btn">
+                Profile
+                <span class="badge badge-dot bg-red badge-notification"></span>
+              </button>
+
+				  <button type="button" class="btn">
+                Settings
+                <span class="badge badge-dot bg-red badge-notification badge-blink"></span>
+              </button>
+
+				  <button type="button" class="btn btn-icon">
+                {% include "ui/icon.html" icon="bell" %}
+                <span class="badge badge-dot bg-red badge-notification badge-blink"></span>
+              </button>
+
+				  <button type="button" class="btn btn-icon btn-action">
+                {% include "ui/icon.html" icon="bell" %}
+                <span class="badge badge-dot bg-red badge-notification"></span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-8">
+    <div class="row row-cards">
+      <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            <h3 class="card-title">Basic badges</h3>
+            <div class="badges-list">
+              {% for color in colors %}
+              <span class="badge bg-{{ color }} text-{{ color }}-fg">{{ color | uc_first }}</span>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            <h3 class="card-title">Light badges</h3>
+            <div class="badges-list">
+              {% for color in colors %}
+              <span class="badge bg-{{ color }}-lt">{{ color | uc_first }}</span>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            <h3 class="card-title">Outline badges</h3>
+            <div class="badges-list">
+              {% for color in colors %}
+              <span class="badge badge-outline text-{{ color }}">{{ color | uc_first }}</span>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            <h3 class="card-title">Badges with icons</h3>
+            <div class="badges-list">
+              {% for color in colors %}
+              <span class="badge bg-{{ color }} text-{{ color }}-fg"> {% include "ui/icon.html" icon="star" type="filled" %} {{ color | uc_first }} </span>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-6 col-lg-3">{% include "ui/dropdown-menu.html" show=true badge=true arrow=true %}</div>
+  <div class="col-sm-6 col-lg-9">
+    <div class="row row-cards">
+      <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            <div class="btn-list">
+              {% for color in colors %}
+              <button class="btn">{{ color | uc_first }} badge <span class="badge bg-{{ color }} text-{{ color }}-fg ms-2">{{ forloop.index }}</span></button>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            <div class="btn-list">
+              {% for color in colors %}
+              <button class="btn position-relative">
+                {{ color | uc_first }} badge <span class="badge bg-{{ color }} text-{{ color }}-fg badge-notification badge-pill">{{ forloop.index }}</span>
+              </button>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            <div class="btn-list">
+              {% for color in colors %}
+              <button class="btn position-relative">
+                {{ color | uc_first }} badge <span class="badge bg-{{ color }} badge-notification badge-blink"></span>
+              </button>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>