refactor(avatar,icon): update default sizes (#133)

Revert some of the sizes to not introduce visual breaking changes in Ignite UI for Angular.
IgniteUI · Nov 22, 2023 · 784a1a5 · 784a1a5
1 parent c56cdf7
commit 784a1a5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 17 deletions.
diff --git a/sass/themes/schemas/components/light/_avatar.scss b/sass/themes/schemas/components/light/_avatar.scss
@@ -13,7 +13,7 @@
 /// @prop {Map} color [color: ('gray', 800, .96)] - The text/icon color of the avatar.
 /// @prop {Number} border-radius [rem(8px)] - The border radius for rounded avatar.
 /// @prop {List} size [(rem(40px), rem(64px), rem(88px))] - The size used for the avatar width and height.
-/// @prop {Number} default-size [2] - The default size used for the avatar component.
+/// @prop {Number} default-size [1] - The default size used for the avatar component.
 $light-avatar: (
     background: (
         color: (
@@ -37,19 +37,14 @@ $light-avatar: (
             rem(88px),
         ),
     ),
-    default-size: 2,
+    default-size: 1,
 );
 
 /// Generates a fluent avatar schema.
 /// @type {Map}
 /// @prop {Number} default-size [1] - The default size used for the avatar component.
 /// @requires {Map} $light-avatar
-$fluent-avatar: extend(
-    $light-avatar,
-    (
-        default-size: 1,
-    )
-);
+$fluent-avatar: $light-avatar;
 
 /// Generates a bootstrap avatar schema.
 /// @type {Map}
@@ -74,17 +69,11 @@ $bootstrap-avatar: extend(
             ),
         ),
         border-radius: rem(4px),
-        default-size: 1,
     )
 );
 
 /// Generates an indigo avatar schema.
 /// @type {Map}
 /// @prop {Number} default-size [1] - The default size used for the avatar component.
 /// @requires {Map} $light-avatar
-$indigo-avatar: extend(
-    $light-avatar,
-    (
-        default-size: 1,
-    )
-);
+$indigo-avatar: $light-avatar;
diff --git a/sass/themes/schemas/components/light/_icon.scss b/sass/themes/schemas/components/light/_icon.scss
@@ -12,7 +12,7 @@
 /// @prop {Color} color ["'currentColor'"] - The icon color.
 /// @prop {Color} disabled-color ["'currentColor'"] - The disabled icon color.
 /// @prop {List} size [(rem(18px), rem(20px), rem(24px))] - The size used for the icon.
-/// @prop {Number} default-size [2] - The default size used for the icon component.
+/// @prop {Number} default-size [3] - The default size used for the icon component.
 $light-icon: (
     color: "'currentColor'",
     disabled-color: "'currentColor'",
@@ -23,7 +23,7 @@ $light-icon: (
             rem(24px),
         ),
     ),
-    default-size: 2,
+    default-size: 3,
 );
 
 /// Generates a fluent icon schema.