fix(avatar): add missing base color

telerik · Feb 6, 2025 · 4f82351 · 4f82351
1 parent 21ce498
commit 4f82351
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/packages/core/scss/components/avatar/_theme.scss b/packages/core/scss/components/avatar/_theme.scss
@@ -1,15 +1,18 @@
+@use "sass:map";
 @use "../../color-system/_functions.import.scss" as *;
 @use "../../functions/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-avatar--theme-base() {
 
     // Solid Avatars
-    @each $name, $color in $kendo-avatar-theme-colors {
+    @each $name,
+    $color in map.merge($kendo-avatar-theme-colors, ("base": if($kendo-enable-color-system, k-color(base), $kendo-base-bg))) {
         .k-avatar-solid-#{$name} {
             border-color: $color;
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
+            color: if($kendo-enable-color-system, k-color(on-#{$name}), k-contrast-legacy($color ));
             background-color: $color;
         }
     }
@@ -19,8 +22,10 @@
         border-color: currentColor;
     }
 
-    @each $name, $color in $kendo-avatar-theme-colors {
+    @each $name,
+    $color in map.merge($kendo-avatar-theme-colors, ("base": $kendo-base-text )) {
         .k-avatar-outline-#{$name} {
+            border-color: currentColor;
             color: $color;
         }
     }

diff --git a/packages/fluent/scss/avatar/_variables.scss b/packages/fluent/scss/avatar/_variables.scss
@@ -44,6 +44,15 @@ $_tc-avatar-matrix: (
     )
 ) !default;
 
+$_tc-avatar-base-matrix: (
+    solid: (
+        normal:  if($kendo-enable-color-system, (color, on-color, border), ($kendo-color-white, 160, 110)),
+    ),
+    outline: (
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
+    )
+) !default;
+
 $_tc-avatar-warning-matrix: (
     solid: (
         normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100))
@@ -84,6 +93,13 @@ $kendo-avatar-theme-colors: () !default;
     };
 }
 
+@each $fill-mode, $ui-states in $_tc-avatar-base-matrix {
+    $kendo-avatar-theme-colors: map.deep-merge(
+        $kendo-avatar-theme-colors,
+        k-generate-fill-mode-theme-variation( $fill-mode, base, if($kendo-enable-color-system, base, neutral), $ui-states )
+    );
+}
+
 @each $fill-mode, $ui-states in $_tc-avatar-warning-matrix {
     $kendo-avatar-theme-colors: map.deep-merge(
         $kendo-avatar-theme-colors,