refactor: Update SCSS variables for avatars and alerts, enhance card layout and tab functionality

core/scss/_variables.scss

@@ -882,7 +882,7 @@ $avatar-sizes: (
     brand-size: 2rem,
   ),
 ) !default;
-$avatar-border-radius: var(--#{$prefix}border-radius) !default;
+$avatar-border-radius: var(--#{$prefix}border-radius-pill) !default;
 $avatar-font-size: $h4-font-size !default;
 $avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
 $avatar-list-spacing: -0.5;

core/scss/ui/_alerts.scss

@@ -1,10 +1,11 @@
 .alert {
   --#{$prefix}alert-color: var(--#{$prefix}body-color);
-  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1)};
+  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1, var(--#{$prefix}bg-surface))};
   --#{$prefix}alert-padding-x: #{$alert-padding-x};
   --#{$prefix}alert-padding-y: #{$alert-padding-y};
   --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), 0.2)};
+  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), 0.2,
+  var(--#{$prefix}bg-surface))};
   --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
   --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
   --#{$prefix}alert-link-color: inherit;

core/scss/ui/_avatars.scss

@@ -9,6 +9,7 @@
   --#{$prefix}avatar-font-size: #{$avatar-font-size};
   --#{$prefix}avatar-icon-size: #{$avatar-icon-size};
   --#{$prefix}avatar-brand-size: #{$avatar-brand-size};
+  --#{$prefix}avatar-border-radius: #{$avatar-border-radius};
   position: relative;
   width: var(--#{$prefix}avatar-size);
   height: var(--#{$prefix}avatar-size);
@@ -24,7 +25,7 @@
   vertical-align: bottom;
   user-select: none;
   background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
-  border-radius: $avatar-border-radius;
+  border-radius: var(--#{$prefix}avatar-border-radius);
   box-shadow: var(--#{$prefix}avatar-box-shadow);
   transition:
     color $transition-time,
@@ -38,7 +39,7 @@
 
   .badge {
     position: absolute;
-  inset-inline-end: 0;
+    inset-inline-end: 0;
     bottom: 0;
     border-radius: $border-radius-pill;
     box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
@@ -96,10 +97,12 @@
   --#{$prefix}list-gap: 0;
 
   .avatar {
-    margin-inline-end: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
+    box-shadow: var(--#{$prefix}avatar-box-shadow),
-    box-shadow:
+    0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-      var(--#{$prefix}avatar-box-shadow),
+
-      0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+    &:not(:first-child) {
+      margin-inline-start: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
+    }
   }
 }
 

core/scss/ui/_cards.scss

@@ -48,6 +48,17 @@
   }
 }
 
+// Card dashed
+.card-dashed {
+  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
+}
+
+// Card transparent
+.card-transparent {
+  background: transparent;
+  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
+}
+
 // Card stamp
 .card-stamp {
   --#{$prefix}stamp-size: 7rem;

preview/pages/cards.html

@@ -108,17 +108,7 @@ permalink: cards.html
 		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
-		<div class="card bg-primary text-primary-fg">
+		{% include "cards/card-background-icon.html" %}
-			<div class="card-stamp">
-				<div class="card-stamp-icon bg-white text-primary">
-					{% include "ui/icon.html" icon="star" %}
-				</div>
-			</div>
-			<div class="card-body">
-				<h3 class="card-title">Card with background and icon</h3>
-				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
-			</div>
-		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
 		{% include "cards/card.html" status-top="danger" title="Card with top status" %}
@@ -131,22 +121,10 @@ permalink: cards.html
 	</div>
 
 	<div class="col-md-6 col-lg-3">
-		<div class="card">
+		{% include "cards/card-ribbon-top.html" %}
-			<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
-			<div class="card-body">
-				<h3 class="card-title">Card with top ribbon</h3>
-				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
-			</div>
-		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
-		<div class="card">
+		{% include "cards/card-ribbon-text.html" %}
-			<div class="ribbon bg-red">NEW</div>
-			<div class="card-body">
-				<h3 class="card-title">Card with text ribbon</h3>
-				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
-			</div>
-		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
 		{% include "cards/card.html" progress=true title="Card with progress bar" %}
@@ -199,8 +177,8 @@ permalink: cards.html
 
 	<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div>
 	<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div>
-	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 %}</div>
+	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" %}</div>
-	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 bottom=true id="bottom" %}</div>
+	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" bottom=true id="bottom" %}</div>
 
 
 	<div class="col-12">
@@ -278,5 +256,6 @@ permalink: cards.html
 	</div>
 
 	<div class="col-lg-4">{% include "cards/card.html" empty=true %}</div>
+	<div class="col-lg-4">{% include "cards/empty-team.html" %}</div>
 	<div class="col-lg-4">{% include "cards/credit-card.html" %}</div>
 </div>

preview/pages/form-layout.html

@@ -7,7 +7,7 @@ permalink: form-layout.html
 page-libs: [litepicker]
 ---
 
-<div class="row row-cards row-cols-1 row-cols-md-2">
+<div class="row row-cards row-cols-1 row-cols-md-3">
 	<div class="col">
 		<div class="row row-cards">
 			<div class="col-12">
@@ -360,4 +360,8 @@ page-libs: [litepicker]
 			</div>
 		</div>
 	</div>
+
+	<div class="col">
+		{% include "cards/form/payment.html" %}
+	</div>
 </div>

shared/includes/cards/card-background-icon.html

@@ -0,0 +1,12 @@
+<div class="card bg-primary text-primary-fg">
+	<div class="card-stamp">
+		<div class="card-stamp-icon bg-white text-primary">
+			{% include "ui/icon.html" icon="star" %}
+		</div>
+	</div>
+	<div class="card-body">
+		<h3 class="card-title">Card with background and icon</h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+	</div>
+</div>
+

shared/includes/cards/card-ribbon-text.html

@@ -0,0 +1,8 @@
+<div class="card">
+	<div class="ribbon bg-red">NEW</div>
+	<div class="card-body">
+		<h3 class="card-title">Card with text ribbon</h3>
+		<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+	</div>
+</div>
+

shared/includes/cards/card-ribbon-top.html

@@ -0,0 +1,8 @@
+<div class="card">
+	<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
+	<div class="card-body">
+		<h3 class="card-title">Card with top ribbon</h3>
+		<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+	</div>
+</div>
+

shared/includes/cards/card-tabs.html

@@ -1,12 +1,12 @@
 {% assign tabs-count = include.count | default: 3 %}
 {% assign id = include.id | default: 'top' %}
-{% assign tabs = (1..tabs-count) %}
+{% assign tabs = 'Activity,Profile,Settings' | split: "," %}
 
 {% capture tabs-html %}
 <!-- Cards navigation -->
 <ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
    {% for tab in tabs %}
-   <li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">Tab {{ tab }}</a></li>
+   <li class="nav-item"><a href="#tab-{{ id }}-{{ forloop.index }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">{{ tab }}</a></li>
    {% endfor %}
 </ul>
 {%- endcapture %}
@@ -15,9 +15,9 @@
 <div class="tab-content">
    {% for tab in tabs %}
    <!-- Content of card #{{ tab }} -->
-   <div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
+   <div id="tab-{{ id }}-{{ forloop.index }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
       <div class="card-body">
-         <div class="card-title">Content of tab #{{ tab }}</div>
+         <div class="card-title">{{ tab }}</div>
          <p class="text-secondary">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
          </p>

shared/includes/cards/card.html

@@ -78,7 +78,7 @@
 							{% when "check" %}
 								{% include "ui/form/check.html" empty=true checked=true class="m-0" %}
 							{% when "avatars" %}
-								{% include "ui/avatar-list.html" stacked=true text="+3" %}
+								{% include "ui/avatar-list.html" stacked=true text="+3" size="sm" %}
 							{% when "more" %}
 								<a href="#">More information</a>
 						{% endcase %}

shared/includes/cards/empty-team.html

@@ -0,0 +1,12 @@
+<div class="card card-lg card-dashed card-transparent">
+	<div class="card-body text-center">
+		<div class="mb-3">
+         {% include "ui/avatar-list.html" stacked %}
+		</div>
+		<h3 class="card-title">No Team Members</h3>
+		<p class="text-secondary">Invite your team to<br>collaborate on this project.</p>
+		<div class="mt-4">
+			{% include "ui/button.html" text="Invite Members" color="primary" icon="plus" %}
+		</div>
+	</div>
+</div>

shared/includes/cards/form/payment.html

@@ -0,0 +1,91 @@
+<form class="card">
+	<div class="card-body">
+		<h3 class="card-title">Payment Method</h3>
+		<p class="card-subtitle mb-4">All transactions are secure and encrypted</p>
+
+		<div class="mb-3">
+			<label class="form-label">Name on Card</label>
+			<input type="text" class="form-control" placeholder="John Doe">
+		</div>
+
+		<div class="row">
+			<div class="col-8">
+				<div class="mb-3">
+					<label class="form-label">Card Number</label>
+					<input type="text" class="form-control" placeholder="1234 5678 9012 3456">
+					<small class="form-hint">Enter your 16-digit number.</small>
+				</div>
+			</div>
+			<div class="col-4">
+				<div class="mb-3">
+					<label class="form-label">CVV</label>
+					<input type="text" class="form-control" placeholder="123">
+				</div>
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="col-6">
+				<div class="mb-3">
+					<label class="form-label">Month</label>
+					<select class="form-select">
+						<option value="">MM</option>
+						<option value="1">January</option>
+						<option value="2">February</option>
+						<option value="3">March</option>
+						<option value="4">April</option>
+						<option value="5">May</option>
+						<option value="6">June</option>
+						<option value="7">July</option>
+						<option value="8">August</option>
+						<option value="9">September</option>
+						<option value="10">October</option>
+						<option value="11">November</option>
+						<option value="12">December</option>
+					</select>
+				</div>
+			</div>
+			<div class="col-6">
+				<div class="mb-3">
+					<label class="form-label">Year</label>
+					<select class="form-select">
+						<option value="">YYYY</option>
+						<option value="2025">2025</option>
+						<option value="2026">2026</option>
+						<option value="2027">2027</option>
+						<option value="2028">2028</option>
+						<option value="2029">2029</option>
+						<option value="2030">2030</option>
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<hr class="my-4" />
+
+		<h3 class="card-title">Billing Address</h3>
+		<p class="card-subtitle mb-4">The billing address associated with your payment method</p>
+
+		<div class="mb-3">
+			<label class="form-check">
+				<input class="form-check-input" type="checkbox" checked>
+				<span class="form-check-label">Same as shipping address</span>
+			</label>
+		</div>
+
+		<hr class="my-4" />
+
+		<div class="mb-3">
+			<label class="form-label">Comments</label>
+			<textarea class="form-control" rows="3" placeholder="Add any additional comments"></textarea>
+		</div>
+
+		<div class="mt-4">
+         <div class="btn-list">
+            {% include "ui/button.html" text="Submit" color="primary" %}
+            {% include "ui/button.html" text="Cancel" %}
+         </div>
+		</div>
+	</div>
+</form>
+