diff --git a/preview/pages/all-elements.astro b/preview/pages/all-elements.astro
index 557feb60d..f00eb7c58 100644
--- a/preview/pages/all-elements.astro
+++ b/preview/pages/all-elements.astro
@@ -365,9 +365,9 @@ function greetUser(name) {
               <Avatar placeholder="AB" size="xl" />
             </div>
             <div>
-              <Avatar placeholder="RD" shape="avatar-rounded" />
-              <Avatar placeholder="PR" color="primary" shape="avatar-rounded" />
-              <Avatar placeholder="SC" color="success" shape="avatar-rounded" />
+              <Avatar placeholder="RD" shape="rounded" />
+              <Avatar placeholder="PR" color="primary" shape="rounded" />
+              <Avatar placeholder="SC" color="success" shape="rounded" />
             </div>
             <div>
               <Avatar icon="user" />
diff --git a/preview/pages/card-gradients.astro b/preview/pages/card-gradients.astro
index 1079c6dbe..0d9edc4b3 100644
--- a/preview/pages/card-gradients.astro
+++ b/preview/pages/card-gradients.astro
@@ -65,7 +65,7 @@ import people from '@data/people.json'
     <div class="col-3">
       <div class="row row-cards">
         <div class="col-12">
-          <Weather city="Warsaw, PL" temperature={3} color="rain" icon="cloud-rain" description="Cloudy morning" />
+          <Weather city="Warsaw, PL" temperature={3} color="ocean" icon="cloud-rain" description="Cloudy morning" />
         </div>
         <div class="col-12">
           <Weather city="Oslo, NO" temperature="-5" color="snow" icon="cloud" description="Snowy day" />
diff --git a/preview/pages/logs.astro b/preview/pages/logs.astro
index 1897728c3..2bc59aaf4 100644
--- a/preview/pages/logs.astro
+++ b/preview/pages/logs.astro
@@ -52,8 +52,8 @@ import { site } from '@shared/lib/site'
             <div class="mb-2">
               <Badge text="INFO" color="success" />
               <Badge text="WARNING" color="warning" />
-              <Badge text="ERROR" color="disabled" />
-              <Badge text="DEBUG" color="disabled" />
+              <Badge text="ERROR" color="danger" />
+              <Badge text="DEBUG" color="secondary" />
             </div>
           </div>
         </CardBody>
diff --git a/shared/components/cards/RecentActivity.astro b/shared/components/cards/RecentActivity.astro
index c6d1b1f82..2e293c2a3 100644
--- a/shared/components/cards/RecentActivity.astro
+++ b/shared/components/cards/RecentActivity.astro
@@ -1,5 +1,4 @@
 ---
-// Icon class is a literal template string (color token is not interpolated).
 import CardActions from '@ui/CardActions.astro'
 import Icon from '@ui/Icon.astro'
 import CardTitle from '@ui/CardTitle.astro'
@@ -23,7 +22,7 @@ const activity = crmDashboard.recent_activity
             <div class="row align-items-center">
               <div class="col-auto">
                 <span class={`avatar bg-${item.icon_color}-lt`}>
-                  <Icon name={item.icon} class={'icon text-{{ item.icon_color }}'} />
+                  <Icon name={item.icon} color={item.icon_color} />
                 </span>
               </div>
               <div class="col">
diff --git a/shared/ui/Icon.astro b/shared/ui/Icon.astro
index e84196c8f..ea52ffe02 100644
--- a/shared/ui/Icon.astro
+++ b/shared/ui/Icon.astro
@@ -17,7 +17,7 @@ const icon = (icons as unknown as Record<string, { svg: Record<string, string> }
 const classes = ['icon', className, color && `text-${color}`, inline && 'icon-inline', size && `icon-${size}`].filter(Boolean).join(' ')
 
 let svg = icon?.svg?.[type] ?? ''
-svg = svg.replace('<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '')
+svg = svg.replace(/<path stroke="none" d="M0 0h24v24H0z" fill="none"\s*\/>/, '')
 svg = svg.replace(/class="[^"]+"/, `aria-hidden="true" focusable="false" class="${classes}"`)
 ---
 
diff --git a/shared/ui/MapVector.astro b/shared/ui/MapVector.astro
index 264a2cb65..a7cc3aba3 100644
--- a/shared/ui/MapVector.astro
+++ b/shared/ui/MapVector.astro
@@ -71,7 +71,7 @@ const mapOptions = data
 								stroke: '#fff',
 								opacity: 1,
 								strokeWidth: 3,
-								stokeOpacity: 0.5,
+								strokeOpacity: 0.5,
 								fill: `var(--tblr-${color})`,
 							},
 							hover: { fill: `var(--tblr-${color})`, stroke: `var(--tblr-${color})` },
diff --git a/shared/ui/Rating.astro b/shared/ui/Rating.astro
index bc5ce5f22..a389b3765 100644
--- a/shared/ui/Rating.astro
+++ b/shared/ui/Rating.astro
@@ -18,7 +18,7 @@ const starClasses = ['icon', 'gl-star-full', color && `text-${color}`, size && `
 
 const iconData = (icons as Record<string, { svg: Record<string, string | null> }>)[icon]
 let star = iconData?.svg?.filled ?? ''
-star = star.replace('<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '')
+star = star.replace(/<path stroke="none" d="M0 0h24v24H0z" fill="none"\s*\/>/, '')
 star = star.replace(/class="[^"]+"/, `aria-hidden="true" focusable="false" class="${starClasses}"`)
 
 const ratingSelector = `#rating-${id}`