fix: remove legacy avatar naming conventions for clarity

Author: chrisfalaska

src/styles/auro-tail-group.scss

@@ -9,14 +9,14 @@ $group-sizes: tokens.$tail-group-sizes;
  */
 @each $size in $group-sizes {
   :host([layout="horizontal"][size="#{$size}"]) {
-    /* Account for avatar widths, border on each tail, and overlap */
+    /* Account for container widths, border on each tail, and overlap */
     width: calc(
-      2 * var(--avatar-width-#{$size}) +
+      2 * var(--container-width-#{$size}) +
       2 * var(--group-horizontal-border-width-#{$size}) +
       var(--group-horizontal-overlap-#{$size})
     );
-    height: calc(var(--avatar-width-#{$size}) + 2 * var(--group-horizontal-border-width-#{$size}));
-    min-height: calc(var(--avatar-width-#{$size}) + 2 * var(--group-horizontal-border-width-#{$size}));
+    height: calc(var(--container-width-#{$size}) + 2 * var(--group-horizontal-border-width-#{$size}));
+    min-height: calc(var(--container-width-#{$size}) + 2 * var(--group-horizontal-border-width-#{$size}));
   }
 }
 
@@ -45,8 +45,8 @@ $group-sizes: tokens.$tail-group-sizes;
   :host([layout="horizontal"][size="#{$size}"]) .group.horizontal ::slotted(auro-tail) {
     --border-width: var(--group-horizontal-border-width-#{$size});
     /* Expand host width to include borders on both sides */
-    width: calc(var(--avatar-width-#{$size}) + 2 * var(--group-horizontal-border-width-#{$size}));
-    min-width: calc(var(--avatar-width-#{$size}) + 2 * var(--group-horizontal-border-width-#{$size}));
+    width: calc(var(--container-width-#{$size}) + 2 * var(--group-horizontal-border-width-#{$size}));
+    min-width: calc(var(--container-width-#{$size}) + 2 * var(--group-horizontal-border-width-#{$size}));
   }
 
   :host([layout="horizontal"][size="#{$size}"]) .group.horizontal ::slotted(auro-tail:first-child) {

src/styles/auro-tail.scss

@@ -6,8 +6,8 @@
   flex-direction: column;
   align-items: center;
   vertical-align: middle;
-  min-width: var(--avatar-width);
-  min-height: var(--avatar-width);
+  min-width: var(--container-width);
+  min-height: var(--container-width);
 }
 
 /* hyperlink styling */
@@ -16,24 +16,24 @@
   flex-direction: column;
   align-items: center;
   text-decoration: none;
-  min-width: var(--avatar-width);
-  min-height: var(--avatar-width);
+  min-width: var(--container-width);
+  min-height: var(--container-width);
 }
 
 .tail > .tail-hyperlink .label {
   display: block;
   margin-top: var(--href-label-gap);
   text-align: center;
-  min-width: var(--avatar-width);
+  min-width: var(--container-width);
   white-space: nowrap;
   overflow: visible;
   text-overflow: clip;
 }
 
 .border {
   position: relative;
-  width: var(--avatar-width);
-  height: var(--avatar-width);
+  width: var(--container-width);
+  height: var(--container-width);
   border-radius: var(--border-radius-full);
   display: grid;
   place-items: center;
@@ -49,18 +49,18 @@
 
 /* Expand host dimensions to include border */
 :host {
-  width: calc(var(--avatar-width) + 2 * var(--border-width, 0px));
-  height: calc(var(--avatar-width) + 2 * var(--border-width, 0px));
-  min-width: calc(var(--avatar-width) + 2 * var(--border-width, 0px));
-  min-height: calc(var(--avatar-width) + 2 * var(--border-width, 0px));
+  width: calc(var(--container-width) + 2 * var(--border-width, 0px));
+  height: calc(var(--container-width) + 2 * var(--border-width, 0px));
+  min-width: calc(var(--container-width) + 2 * var(--border-width, 0px));
+  min-height: calc(var(--container-width) + 2 * var(--border-width, 0px));
 }
 
 .container {
   position: relative;
   width: 100%;
   height: 100%;
   border-radius: var(--border-radius-full);
-  background: var(--avatar-gradient);
+  background: var(--container-gradient);
   display: grid;
   place-items: center;
   overflow: hidden;

src/styles/tokens.scss

@@ -9,8 +9,13 @@ $tail-sizes-with-href: (md, lg, xl, 2xl);
 $tail-group-sizes: (xs, sm, md, lg);
 $tail-variants: (as, ha, oa);
 
+/* Naming Convention:
+ * - "container": The circular container/background that holds the tail icon
+ * - "tail": The actual airline livery SVG icon displayed within the container
+ */
+
 /* Size Maps */
-$avatar-width: (
+$container-width: (
   'xs': 24px,
   'sm': 32px,
   'md': 48px,
@@ -28,7 +33,7 @@ $tail-width: (
   '2xl': 107px
 );
 
-/* Adjust vertical offset to visually center tail icon within circular avatar
+/* Adjust vertical offset to visually center tail icon within circular container
  * Based on optical centering from design spec, not mathematical centering */
 $tail-offset-y: (
   'xs': 3px,
@@ -77,14 +82,14 @@ $group-horizontal: (
 :host {
   display: inline-block;
   /* Host dimensions to match container */
-  width: var(--avatar-width);
-  height: var(--avatar-width);
-  min-width: var(--avatar-width);
-  min-height: var(--avatar-width);
-  
+  width: var(--container-width);
+  height: var(--container-width);
+  min-width: var(--container-width);
+  min-height: var(--container-width);
+
   /* Default Values */
-  --avatar-width: var(--avatar-width-lg);
-  --avatar-gradient: var(--gradient-oa);
+  --container-width: var(--container-width-lg);
+  --container-gradient: var(--gradient-oa);
   --tail-width: var(--tail-width-lg);
   --tail-offset-y: var(--tail-offset-y-lg);
   --href-label-gap: var(--href-label-gap-lg);
@@ -102,7 +107,7 @@ $group-horizontal: (
   --tail-outline-color: var(--border-color-default);
   --tail-outline-width: 1px;
 
-  /* Avatar Gradients */
+  /* Container Gradients */
   --gradient-as: linear-gradient(180deg, #6899C6 0%, #CFE0EF 100%);
   --gradient-ha: linear-gradient(181deg, #CCB7ED -6.38%, #F9C2E7 99.46%);
   --gradient-oa: linear-gradient(181deg, #C5D0D9 -6.38%, #E8F1F8 99.46%);
@@ -124,7 +129,7 @@ $group-horizontal: (
 
   /* Generate Tail size-based tokens */
   @each $property, $map in (
-    'avatar-width': $avatar-width,
+    'container-width': $container-width,
     'tail-width': $tail-width,
     'tail-offset-y': $tail-offset-y,
     'href-label-gap': $href-label-gap,
@@ -156,7 +161,7 @@ $group-horizontal: (
 /* Apply tokens to tail sizes */
 @each $size in $tail-sizes {
   :host([size="#{$size}"]) {
-    --avatar-width: var(--avatar-width-#{$size});
+    --container-width: var(--container-width-#{$size});
     --tail-width: var(--tail-width-#{$size});
     --tail-offset-y: var(--tail-offset-y-#{$size});
 
@@ -177,6 +182,6 @@ $group-horizontal: (
 @each $variant in $tail-variants {
   :host([tail="#{$variant}"]),
   :host([tail="#{string.to-upper-case($variant)}"]) {
-    --avatar-gradient: var(--gradient-#{$variant});
+    --container-gradient: var(--gradient-#{$variant});
   }
 }