feat(experimental): Avatar shift sizes to match buttons and controls

projects/demo/src/modules/experimental/avatar/avatar.component.ts

@@ -2,7 +2,7 @@ import {Component, Inject} from '@angular/core';
 import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
-import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
+import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
 
 @Component({
     selector: 'example-avatar',
@@ -50,8 +50,7 @@ export class ExampleTuiAvatarComponent {
         LESS: import('./examples/6/index.less?raw'),
     };
 
-    readonly sizes: ReadonlyArray<TuiSizeXXL | TuiSizeXXS> = [
-        'xxs',
+    readonly sizes: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
         'xs',
         's',
         'm',

projects/demo/src/modules/experimental/avatar/examples/3/index.html

@@ -4,4 +4,3 @@
 <tui-avatar size="m">M</tui-avatar>
 <tui-avatar size="s">S</tui-avatar>
 <tui-avatar size="xs">XS</tui-avatar>
-<tui-avatar size="xxs">XXS</tui-avatar>

projects/demo/src/modules/experimental/avatar/examples/4/index.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
+import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-avatar-example-4',
@@ -11,13 +11,12 @@ import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
 })
 export class TuiAvatarExample4 {
     readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan'];
-    readonly sizes: ReadonlyArray<TuiSizeXXL | TuiSizeXXS> = [
+    readonly sizes: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
         'xxl',
         'xl',
         'l',
         'm',
         's',
         'xs',
-        'xxs',
     ];
 }

projects/demo/src/modules/experimental/button-vertical/examples/1/index.html

@@ -4,7 +4,7 @@
     tuiButtonVertical
 >
     <tui-avatar
-        size="xxs"
+        size="xs"
         src="https://avatars.githubusercontent.com/u/11832552"
     ></tui-avatar>
     Alex Inkin

projects/demo/src/modules/experimental/button/examples/3/index.html

@@ -3,7 +3,7 @@
     tuiButton
 >
     <tui-avatar
-        size="xxs"
+        size="xs"
         src="https://avatars.githubusercontent.com/u/11832552"
     ></tui-avatar>
     Alex Inkin

projects/experimental/components/avatar/avatar.component.ts

@@ -30,7 +30,7 @@ export class TuiAvatarComponent {
     src: SafeResourceUrl | string | null = null;
 
     @Input()
-    appearance = '';
+    appearance = this.options.appearance;
 
     constructor(
         @Inject(TUI_AVATAR_OPTIONS) private readonly options: TuiAvatarOptions,

projects/experimental/components/avatar/avatar.options.ts

@@ -1,15 +1,17 @@
 import {Provider} from '@angular/core';
 import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
-import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
+import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
 
 export interface TuiAvatarOptions {
+    readonly appearance: string;
     readonly round: boolean;
-    readonly size: TuiSizeXXL | TuiSizeXXS;
+    readonly size: TuiSizeXS | TuiSizeXXL;
 }
 
 export const TUI_AVATAR_DEFAULT_OPTIONS: TuiAvatarOptions = {
+    appearance: '',
     round: true,
-    size: 'm',
+    size: 'l',
 };
 
 export const TUI_AVATAR_OPTIONS = tuiCreateToken(TUI_AVATAR_DEFAULT_OPTIONS);

projects/experimental/components/avatar/avatar.style.less

@@ -26,8 +26,8 @@
         mask: var(--t-mask) no-repeat center/60%;
     }
 
-    &[data-size='xxs'] {
-        --t-size: 1.5rem;
+    &[data-size='xs'] {
+        --t-size: var(--tui-height-xs);
         --t-radius: 0.5rem;
         font: var(--tui-font-text-xs);
         font-weight: bold;
@@ -38,8 +38,8 @@
         }
     }
 
-    &[data-size='xs'] {
-        --t-size: 2rem;
+    &[data-size='s'] {
+        --t-size: var(--tui-height-s);
         --t-radius: 0.5rem;
         font: var(--tui-font-text-s);
         font-weight: bold;
@@ -50,8 +50,8 @@
         }
     }
 
-    &[data-size='s'] {
-        --t-size: 2.5rem;
+    &[data-size='m'] {
+        --t-size: calc(var(--tui-height-m) - 0.25rem);
         --t-radius: 0.75rem;
         font: var(--tui-font-text-l);
         font-weight: bold;
@@ -62,8 +62,8 @@
         }
     }
 
-    &[data-size='m'] {
-        --t-size: 3.5rem;
+    &[data-size='l'] {
+        --t-size: var(--tui-height-l);
         --t-radius: 0.75rem;
         font: var(--tui-font-heading-5);
 
@@ -73,7 +73,7 @@
         }
     }
 
-    &[data-size='l'] {
+    &[data-size='xl'] {
         --t-size: 5rem;
         --t-radius: 0.75rem;
         font: var(--tui-font-heading-3);
@@ -83,7 +83,7 @@
         }
     }
 
-    &[data-size='xl'] {
+    &[data-size='xxl'] {
         --t-size: 6rem;
         --t-radius: 1rem;
         font: var(--tui-font-heading-3);
@@ -93,7 +93,7 @@
         }
     }
 
-    &[data-size='xxl'] {
+    &[data-size='xxxl'] {
         --t-size: 8rem;
         --t-radius: 1.25rem;
         font: var(--tui-font-heading-2);

projects/experimental/components/chip/chip.directive.ts

@@ -13,7 +13,7 @@ import {TUI_CHIP_OPTIONS, TuiChipOptions} from './chip.options';
     providers: [
         tuiToggleOptionsProvider({size: 's'}),
         tuiCheckboxOptionsProvider({size: 's'}),
-        tuiAvatarOptionsProvider({size: 'xxs'}),
+        tuiAvatarOptionsProvider({size: 'xs'}),
         tuiButtonOptionsProvider({
             size: 'xs',
             appearance: 'icon',