Refactor badge styles, remove Bootstrap styles (#2169)

codecalm · web-flow · commit 378fba89f58d · 2025-02-19T02:20:25.000+01:00
diff --git a/.changeset/twelve-garlics-battle.md b/.changeset/twelve-garlics-battle.md
@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+"preview": patch
+---
+
+Refactor badge styles, remove Bootstrap styles
diff --git a/core/scss/_bootstrap-components.scss b/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";
diff --git a/core/scss/_variables.scss b/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;
diff --git a/core/scss/ui/_badges.scss b/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;
 }
diff --git a/core/scss/ui/_buttons.scss b/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 {
diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss
@@ -19,6 +19,7 @@
   align-items: center;
   margin: 0;
   line-height: $line-height-base;
+  gap: .5rem;
 }
 
 .dropdown-item-icon {
diff --git a/preview/eleventy.config.mjs b/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;
diff --git a/preview/pages/_includes/ui/tag.html b/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 %}
diff --git a/preview/pages/badges.html b/preview/pages/badges.html

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@`
`19`	`19`	`align-items: center;`
`20`	`20`	`margin: 0;`
`21`	`21`	`line-height: $line-height-base;`
	`22`	`+ gap: .5rem;`
`22`	`23`	`}`
`23`	`24`
`24`	`25`	`.dropdown-item-icon {`