refactor: Update SCSS variables for alerts and avatars, enhance card and progress background styles

core/scss/_variables.scss

@@ -996,7 +996,7 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
 $box-shadow-transparent: 0 0 0 0 transparent !default;
 $box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default;
 $box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
-$box-shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
+$box-shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.08) !default;
 $box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
 $box-shadow-dropdown:
   0 16px 24px 2px rgba(0, 0, 0, 0.07),

core/scss/ui/_alerts.scss

@@ -1,10 +1,11 @@
 .alert {
-  --#{$prefix}alert-color: var(--#{$prefix}body-color);
+  --#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
-  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1, var(--#{$prefix}bg-surface))};
+  --#{$prefix}alert-color: color-mix(in srgb, var(--#{$prefix}alert-variant-color) 50%, var(--#{$prefix}body-color));
+  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.16, 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-variant-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);
@@ -17,6 +18,8 @@
   background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
   border-radius: var(--#{$prefix}alert-border-radius);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
+  box-shadow: var(--#{$prefix}box-shadow);
+  color: var(--#{$prefix}alert-color);
   display: flex;
   flex-direction: row;
   gap: 1rem;
@@ -94,6 +97,6 @@
 
 @each $name, $color in $theme-colors {
   .alert-#{$name} {
-    --#{$prefix}alert-color: var(--#{$prefix}#{$name});
+    --#{$prefix}alert-variant-color: var(--#{$prefix}#{$name});
   }
 }

core/scss/ui/_avatars.scss

@@ -59,6 +59,10 @@
   border-radius: $border-radius-pill;
 }
 
+.avatar-square {
+  border-radius: var(--#{$prefix}border-radius);
+}
+
 @each $avatar-size, $size in $avatar-sizes {
   .avatar-#{$avatar-size} {
     --#{$prefix}avatar-size: #{map.get($size, size)};
@@ -67,14 +71,14 @@
     --#{$prefix}avatar-icon-size: #{map.get($size, icon-size)};
     --#{$prefix}avatar-brand-size: #{map.get($size, brand-size)};
 
-    @if map.has-key($size, border-radius) {
-      border-radius: map.get($size, border-radius);
-    }
-
     .badge:empty {
       width: map.get($size, status-size);
       height: map.get($size, status-size);
     }
+
+    &.avatar-square {
+      --#{$prefix}avatar-border-radius: #{map.get($size, border-radius)};
+    }
   }
 }
 

core/scss/ui/_cards.scss

@@ -57,6 +57,7 @@
 .card-transparent {
   background: transparent;
   border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
+  box-shadow: none;
 }
 
 // Card stamp

core/scss/ui/_progress.scss

@@ -93,6 +93,8 @@ Progressbg
 .progressbg-text {
   position: relative;
   z-index: 1;
+  display: flex;
+  align-items: center;
   @include text-truncate;
 }
 

shared/e11ty/filters.mjs

@@ -160,31 +160,36 @@ export function appFilters(eleventyConfig) {
 
 	// time ago from today
 	eleventyConfig.addFilter("timeago", function (date) {
-		const seconds = Math.floor((new Date() - date) / 1000);
+		let seconds;
+		if (typeof date === 'number') {
+			seconds = date;
+		} else {
+			seconds = Math.floor((new Date() - date) / 1000);
+		}
 
 		let interval = Math.floor(seconds / 31536000);
 
-		if (interval > 1) {
+		if (interval >= 1) {
-			return interval + " years ago";
+			return `${interval} year${interval > 1 ? 's' : ''} ago`;
 		}
 		interval = Math.floor(seconds / 2592000);
-		if (interval > 1) {
+		if (interval >= 1) {
-			return interval + " months ago";
+			return `${interval} month${interval > 1 ? 's' : ''} ago`;
 		}
 		interval = Math.floor(seconds / 86400);
-		if (interval > 1) {
+		if (interval >= 1) {
-			return interval + " days ago";
+			return `${interval} day${interval > 1 ? 's' : ''} ago`;
 		}
 		interval = Math.floor(seconds / 3600);
-		if (interval > 1) {
+		if (interval >= 1) {
-			return interval + " hours ago";
+			return `${interval} hour${interval > 1 ? 's' : ''} ago`;
 		}
 		interval = Math.floor(seconds / 60);
-		if (interval > 1) {
+		if (interval >= 1) {
-			return interval + " minutes ago";
+			return `${interval} minute${interval > 1 ? 's' : ''} ago`;
 		}
 		if (seconds > 0) {
-			return Math.floor(seconds) + " seconds ago";
+			return `${Math.floor(seconds)} second${Math.floor(seconds) > 1 ? 's' : ''} ago`;
 		}
 
 		return "now";

shared/includes/cards/card.html

@@ -2,7 +2,7 @@
 <{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 
 	{% if include['empty'] %}
-		{% include "ui/empty.html" illustration=true %}
+		{% include "ui/empty.html" illustration="not-found" height=160 %}
 
 	{% else %}
 

shared/includes/cards/charts/revenue.html

@@ -13,5 +13,5 @@
 			</div>
 		</div>
 	</div>
-	{% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom" %}
+	{% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom-3" %}
 </div>

shared/includes/cards/small-stats.html

@@ -1,11 +1,12 @@
 {% assign chart-type = include.chart-type | default: 'line' %}
 {% assign chart-position = include.chart-position | default: 'right' %}
+{% assign chart-color = include.color | default: 'primary' %}
 <div class="card card-sm{% if include.class %} {{ include.class }}{% endif %}">
 	<div class="card-body">
 		<div class="row align-items-center">
 			{% if include.icon %}
 				<div class="col-auto">
-					<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar">{% include "ui/icon.html" icon=include.icon %}</span>
+					<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar avatar-square">{% include "ui/icon.html" icon=include.icon %}</span>
 				</div>
 			{% elsif include.person-id %}
 				<div class="col-auto">
@@ -30,13 +31,24 @@
 				</div>
 				<div class="text-secondary">
 					{{ include.description | default: "Users" }}
-
 				</div>
 			</div>
 
 			{% if include.chart-data and chart-position=="right" %}
 			<div class="col-auto">
-				{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
+				{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=chart-color label=include.chart-label label-icon=include.chart-label-icon %}
+			</div>
+			{% endif %}
+
+			{% if include.trending %}
+			<div class="col-auto">
+				{% include "ui/trending.html" value=include.trending %}
+			</div>
+			{% endif %}
+
+			{% if include.button %}
+			<div class="col-auto">
+				{% include "ui/button.html" text=include.button size="sm" %}
 			</div>
 			{% endif %}
 		</div>

shared/includes/cards/tables/progressbg.html

@@ -10,12 +10,12 @@
 			</tr>
 			</thead>
 			<tbody>
-			{% for url in urls %}
+			{% for url in urls limit: 8 %}
 			<tr>
 				<td>
 					{% include "ui/progressbg.html" value=url.bounce text=url.uri %}
 				</td>
-				<td class="w-1 fw-bold text-end">{{ url.visitors }}</td>
+				<td class="w-1 fw-medium text-end">{{ url.visitors }}</td>
 			</tr>
 			{% endfor %}
 			</tbody>

shared/includes/ui/alert.html

@@ -12,7 +12,7 @@
 		{%- assign icon = 'info-circle' -%}
 	{%- endif -%}
 {%- endunless -%}
-<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
+<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="alert">
 	<div class="alert-icon">
 		{%- include "ui/icon.html" icon=icon class="alert-icon" -%}
 	</div>

shared/includes/ui/avatar.html

@@ -20,7 +20,7 @@
 {%- endif -%}
 {%- assign el = 'span' -%}
 {%- if link -%}{%- assign el = 'a' -%}{%- endif -%}
-<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
+<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} avatar-{{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
 {%- if include.status -%}
 <span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
 {%- endif -%}

shared/includes/ui/button.html

@@ -18,7 +18,7 @@
 {% endif %}
 
 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
+<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.action %} btn-action{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
 {% if include.spinner %}
 {% include "ui/spinner.html" color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}

shared/includes/ui/card-title.html

@@ -0,0 +1,10 @@
+<div class="d-flex">
+   <h3 class="card-title{% if include.class %} {{ include.class }}{% endif %}">
+      {{ include.text | default: include.title | default: 'Card title' }}
+   </h3>
+   {% if include.more %}
+   <div class="ms-auto">
+      {% include "ui/button.html" icon="dots" size="sm" icon-only action %}
+   </div>
+   {% endif %}
+</div>

shared/includes/ui/empty.html

@@ -1,9 +1,10 @@
 {% assign icon = include.icon | default: "mood-sad" %}
+{% assign height = include.height | default: 256 %}
 <div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 
 	{% if include.illustration %}
 		{% assign illustration = include.illustration | default: 'boy-girl.svg' %}
-		<div class="empty-img">{% include "ui/illustration.html" image=illustration height="256" %}</div>
+		<div class="empty-img">{% include "ui/illustration.html" image=illustration height=height %}</div>
 	{% elsif include.icon-text %}
 		<div class="empty-header">{{ include.icon-text }}</div>
 	{% else %}

shared/includes/ui/progressbg.html

@@ -2,6 +2,6 @@
 {% assign color = include.color | default: 'primary-lt' %}
 <div class="progressbg{% if include.class %} {{ include.class }}{% endif %}">
 	{% include "ui/progress.html" value=percentage class="progressbg-progress" color=color %}
-	{% if include.text %}<div class="progressbg-text">{{ include.text }}</div>{% endif %}
+	{% if include.text %}<div class="progressbg-text">{% if include.flag %}{% include "ui/flag.html" flag=include.flag class="me-2" size="xs" %}{% endif %}{{ include.text }}</div>{% endif %}
 	{% if include.show-value %}<div class="progressbg-value">{{ percentage }}%</div>{% endif %}
 </div>