Unify size of avatar, flag and payment components (#1623)

.changeset/itchy-bottles-cheat.md

+---
+"@tabler/core": patch
+---
+
+Unify size of avatar, flag and payment components

src/pages/_includes/cards/invoices.html

@@ -45,8 +45,7 @@
 				<td><span class="text-secondary">00{{ forloop.index | plus: 1400 }}</span></td>
 				<td><a href="invoice.html" class="text-reset" tabindex="-1">{{ invoice.name }}</a></td>
 				<td>
-					{% include ui/flag.html flag=invoice.country %}
-					{{ invoice.client }}
+					{% include ui/flag.html flag=invoice.country size="xs" class="me-2" %}{{ invoice.client }}
 				</td>
 				<td>
 					{{ invoice.vat-no }}

src/pages/_includes/ui/tag.html

 <span class="tag">
 	{% if include.flag %}
-		{% include ui/flag.html flag=include.flag size="xs" class="tag-flag" %}
+		{% include ui/flag.html flag=include.flag size="xxs" class="tag-flag" %}
 	{% elsif include.icon %}
-		{% include ui/icon.html icon=include.icon size="xs" class="tag-icon" %}
+		{% include ui/icon.html icon=include.icon size="xxs" class="tag-icon" %}
 	{% elsif include.person %}
-		{% include ui/avatar.html person=include.person size="xs" class="tag-avatar" %}
+		{% include ui/avatar.html person=include.person size="xxs" class="tag-avatar" %}
+	{% elsif include.person-id %}
+		{% include ui/avatar.html person-id=include.person-id size="xxs" class="tag-avatar" %}
+	{% 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="" %}
 	{% elsif include.legend %}

src/scss/_variables.scss

@@ -202,15 +202,8 @@ $border-color-translucent: rgba(4, 32, 69, 0.14);
 $border-dark-color: $gray-400 !default;
 $border-dark-color-translucent: rgba(4, 32, 69, 0.27);
 
-$border-active-color: mix(
-  $text-secondary,
-  #ffffff,
-  percentage($border-active-opacity)
-) !default;
-$border-active-color-translucent: rgba(
-  $text-secondary,
-  $border-active-opacity
-) !default;
+$border-active-color: mix($text-secondary, #ffffff, percentage($border-active-opacity)) !default;
+$border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
 
 $active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
 $active-color: var(--#{$prefix}primary) !default;
@@ -288,10 +281,7 @@ $gray-colors: (
   gray-900: $gray-900,
 ) !default;
 
-$theme-colors: map-merge(
-  $theme-colors,
-  map-merge($extra-colors, $social-colors)
-);
+$theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));
 
 // Borders
 $border-width: 1px !default;
@@ -319,27 +309,65 @@ $kbd-padding-x: 0.5rem !default;
 $kbd-padding-y: 0.25rem !default;
 $kbd-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $kbd-font-size: var(--#{$prefix}font-size-h5) !default;
-$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
-  var(--#{$prefix}border-color) !default;
+$kbd-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !default;
 $kbd-color: var(--#{$prefix}text-secondary-dark) !default;
 $kbd-bg: var(--#{$prefix}code-bg) !default;
 $kbd-border-radius: var(--#{$prefix}border-radius) !default;
 
 // Avatars
-$avatar-size: 2rem !default;
+$avatar-size: 2.5rem !default;
+$avatar-status-size: .75rem !default;
+$avatar-font-size: 1rem !default;
+$avatar-icon-size: 1.5rem !default;
 $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $avatar-sizes: (
-  "xs": 1rem,
-  "sm": 2rem,
-  "md": 4rem,
-  "lg": 5.5rem,
-  "xl": 7rem,
-  "2xl": 11rem,
+  "xxs": (
+    size: 1rem,
+    font-size: .5rem,
+    icon-size: .75rem,
+    status-size: .25rem
+  ),
+  "xs": (
+    size: 1.25rem,
+    font-size: $h6-font-size,
+    icon-size: 1rem,
+    status-size: .375rem
+  ),
+  "sm": (
+    size: 2rem,
+    font-size: $h5-font-size,
+    icon-size: 1.25rem,
+    status-size: .5rem
+  ),
+  "md": (
+    size: 2.5rem,
+    font-size: $h4-font-size,
+    icon-size: 1.5rem,
+    status-size: .75rem
+  ),
+  "lg": (
+    size: 3rem,
+    font-size: $h2-font-size,
+    icon-size: 2rem,
+    status-size: .75rem
+  ),
+  "xl": (
+    size: 5rem,
+    font-size: 2rem,
+    icon-size: 3rem,
+    status-size: 1rem
+  ),
+  "2xl": (
+    size: 7rem,
+    font-size: 3rem,
+    icon-size: 5rem,
+    status-size: 1rem
+  ),
 ) !default;
 $avatar-border-radius: var(--#{$prefix}border-radius) !default;
 $avatar-font-size: $h4-font-size !default;
 $avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
-$avatar-list-spacing: -.5;
+$avatar-list-spacing: -0.5;
 
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
@@ -395,11 +423,7 @@ $spacers: (
   8: $spacer-8,
 ) !default;
 
-$negative-spacers: if(
-  $enable-negative-margins,
-  negativify-map($spacers),
-  null
-) !default;
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 
 // Sizes
 $size-spacers: (
@@ -469,11 +493,7 @@ $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color
 $transition-time: 0.3s !default;
 
 // Overlay
-$overlay-gradient: linear-gradient(
-  180deg,
-  rgba(0, 0, 0, 0) 0%,
-  rgba(0, 0, 0, 0.6) 100%
-) !default;
+$overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !default;
 
 // Accordion
 $accordion-bg: transparent !default;
@@ -488,7 +508,7 @@ $accordion-button-focus-border-color: $accordion-border-color !default;
 
 // Alerts
 $alert-padding-x: 1rem !default;
-$alert-padding-y: .75rem !default;
+$alert-padding-y: 0.75rem !default;
 $alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
 
 $alert-border-width: var(--#{$prefix}border-width) !default;
@@ -601,7 +621,6 @@ $btn-close-width: 1em !default;
 $btn-close-opacity: 0.4 !default;
 $btn-close-color: $body-color !default;
 
-
 // Datagrid
 $datagrid-padding: 1.5rem !default;
 $datagrid-item-width: 15rem !default;
@@ -654,10 +673,7 @@ $modal-fade-transform: translate(0, -1rem) !default;
 $modal-content-border-color: transparent !default;
 $modal-content-bg: var(--#{$prefix}bg-surface) !default;
 $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
-$modal-content-inner-border-radius: subtract(
-  var(--#{$prefix}modal-border-radius),
-  1px
-) !default;
+$modal-content-inner-border-radius: subtract(var(--#{$prefix}modal-border-radius), 1px) !default;
 
 $modal-header-padding: 1.5rem !default;
 $modal-header-height: 3.5rem !default;
@@ -697,8 +713,7 @@ $nav-bordered-margin-x: 1.25rem !default;
 
 $nav-tabs-border-color: var(--#{$prefix}border-color) !default;
 $nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
-$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
-  $nav-tabs-border-color !default;
+$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color !default;
 $nav-tabs-link-active-border-color: $nav-tabs-link-hover-border-color !default;
 $nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
 $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
@@ -803,9 +818,7 @@ $table-th-color: var(--#{$prefix}secondary) !default;
 $table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-striped-order: even !default;
 $table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
-$table-group-separator-color: var(
-  --#{$prefix}border-color-translucent
-) !default;
+$table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
 
 $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
 $table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
@@ -838,9 +851,7 @@ $list-group-active-color: inherit !default;
 $input-bg: var(--#{$prefix}bg-forms) !default;
 $input-disabled-bg: $disabled-bg !default;
 $input-border-color: var(--#{$prefix}border-color) !default;
-$input-border-color-translucent: var(
-  --#{$prefix}border-color-translucent
-) !default;
+$input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
 $input-placeholder-color: $text-secondary-light !default;
 
 $input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
@@ -849,13 +860,12 @@ $input-group-addon-color: var(--#{$prefix}secondary) !default;
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 
 // Forms
-$form-check-margin-bottom: .75rem !default;
+$form-check-margin-bottom: 0.75rem !default;
 $form-check-padding-start: 2rem !default;
 
 $form-check-input-width: 1.25rem !default;
 $form-check-input-bg: var(--#{$prefix}bg-forms) !default;
-$form-check-input-border: var(--#{$prefix}border-width)
-  var(--#{$prefix}border-style) $input-border-color-translucent !default;
+$form-check-input-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent !default;
 $form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
 $form-check-input-box-shadow: $input-box-shadow !default;
 

src/scss/ui/_avatars.scss

 .avatar {
   --#{$prefix}avatar-size: #{$avatar-size};
+  --#{$prefix}avatar-status-size: #{$avatar-status-size};
   --#{$prefix}avatar-bg: #{$avatar-bg};
   --#{$prefix}avatar-box-shadow: #{$avatar-box-shadow};
+  --#{$prefix}avatar-font-size: #{$avatar-font-size};
+  --#{$prefix}avatar-icon-size: #{$avatar-icon-size};
   position: relative;
   width: var(--#{$prefix}avatar-size);
   height: var(--#{$prefix}avatar-size);
-  font-size: calc(var(--#{$prefix}avatar-size) / #{$line-height-base * 2});
+  font-size: var(--#{$prefix}avatar-font-size);
   font-weight: var(--#{$prefix}font-weight-medium);
+  line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -19,9 +23,9 @@
   border-radius: $avatar-border-radius;
   box-shadow: var(--#{$prefix}avatar-box-shadow);
 
-  svg {
-    width: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
-    height: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
+  .icon {
+    width: var(--#{$prefix}avatar-icon-size);
+    height: var(--#{$prefix}avatar-icon-size);
   }
 
   .badge {
@@ -29,7 +33,7 @@
     right: 0;
     bottom: 0;
     border-radius: $border-radius-pill;
-    box-shadow: 0 0 0 2px $card-bg;
+    box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
   }
 
   @at-root a#{&} {
@@ -43,12 +47,15 @@
 
 @each $avatar-size, $size in $avatar-sizes {
   .avatar-#{$avatar-size} {
-    --#{$prefix}avatar-size: #{$size};
+    --#{$prefix}avatar-size: #{map-get($size, size)};
+    --#{$prefix}avatar-status-size: #{map-get($size, status-size)};
+    --#{$prefix}avatar-font-size: #{map-get($size, font-size)};
+    --#{$prefix}avatar-icon-size: #{map-get($size, icon-size)};
   }
 
   .avatar-#{$avatar-size} .badge:empty {
-    width: $size * .25;
-    height: $size * .25;
+    width: map-get($size, status-size);
+    height: map-get($size, status-size);
   }
 }
 

src/scss/ui/_flags.scss

@@ -5,7 +5,7 @@ $countries: (
 .flag {
   position: relative;
   display: inline-block;
-  height: 1.5rem;
+  height: $avatar-size;
   aspect-ratio: 1.33333;
   background: no-repeat center/cover;
   box-shadow: $flag-box-shadow;
@@ -26,6 +26,6 @@ $countries: (
 
 @each $flag-size, $size in $flag-sizes {
   .flag-#{$flag-size} {
-    height: $size;
+    height: map-get($size, size);
   }
 }

src/scss/ui/_payments.scss

 $payment-icons: ('2checkout', 'alipay', 'amazon', 'americanexpress', 'applepay', 'bancontact', 'bitcoin', 'bitpay', 'blik', 'cirrus', 'clickandbuy', 'coinkite', 'dinersclub', 'directdebit', 'discover', 'dotpay', 'dwolla', 'ebay', 'epayco', 'eway', 'giropay', 'googlewallet', 'ingenico', 'jcb', 'klarna', 'laser', 'maestro', 'mastercard', 'mir', 'monero', 'neteller', 'ogone', 'okpay', 'paybox', 'paymill', 'payone', 'payoneer', 'paypal', 'paysafecard', 'payu', 'payza', 'przelewy24', 'ripple', 'sage', 'sepa', 'shopify', 'skrill', 'solo', 'square', 'stripe', 'switch', 'tpay', 'ukash', 'unionpay', 'verifone', 'verisign', 'visa', 'webmoney', 'westernunion', 'worldpay');
 
 .payment {
-  width: 2rem * 1.66666;
-  height: 2rem;
+  height: $avatar-size;
+  aspect-ratio: 1.66666;
   display: inline-block;
   background: no-repeat center/100% 100%;
   vertical-align: bottom;
@@ -23,7 +23,6 @@ $payment-icons: ('2checkout', 'alipay', 'amazon', 'americanexpress', 'applepay',
 
 @each $payment-size, $size in $payment-sizes {
   .payment-#{$payment-size} {
-    width: $size * 1.66666;
-    height: $size;
+    height: map-get($size, size);
   }
 }

src/scss/ui/_tags.scss

 .tag {
   --#{$prefix}tag-height: 1.5rem;
   border: $border-width solid var(--#{$prefix}border-color);
-  display: flex;
+  display: inline-flex;
   align-items: center;
   height: var(--#{$prefix}tag-height);
   border-radius: var(--#{$prefix}border-radius);
@@ -29,6 +29,7 @@
 
 .tag-avatar,
 .tag-flag,
+.tag-payment,
 .tag-icon,
 .tag-check {
   margin-left: -.25rem;