diff --git a/projects/experimental/directives/cell/cell.styles.less b/projects/experimental/directives/cell/cell.styles.less index 45bc8af27a4f..1996b4f633f7 100644 --- a/projects/experimental/directives/cell/cell.styles.less +++ b/projects/experimental/directives/cell/cell.styles.less @@ -80,7 +80,7 @@ } [tuiSubtitle] { - font: var(--tui-font-text-xs-s); + font: var(--tui-font-text-xs-2); } & > *:not(:first-child), @@ -93,6 +93,9 @@ & > [tuiAccessories] tui-avatar, & > [tuiAccessories] tui-avatar-stack tui-avatar { --t-size: 1.5rem; + + font: var(--tui-font-text-m); + font-size: 0.5625rem; } } @@ -136,6 +139,9 @@ & > [tuiAccessories] tui-avatar, & > [tuiAccessories] tui-avatar-stack tui-avatar { --t-size: 2.5rem; + + font: var(--tui-font-text-m); + font-weight: bold; } } diff --git a/projects/kit/components/progress/index.ts b/projects/kit/components/progress/index.ts index df50ada3d6f3..9fb67015f4a3 100644 --- a/projects/kit/components/progress/index.ts +++ b/projects/kit/components/progress/index.ts @@ -1,4 +1,5 @@ export * from './progress.module'; +export * from './progress.options'; export * from './progress-bar/progress-bar.component'; export * from './progress-bar/progress-color-segments.directive'; export * from './progress-circle/progress-circle.component'; diff --git a/projects/kit/components/progress/progress-bar/progress-bar.component.less b/projects/kit/components/progress/progress-bar/progress-bar.component.less index 33f8544e2f82..b88fd8e2e2a5 100644 --- a/projects/kit/components/progress/progress-bar/progress-bar.component.less +++ b/projects/kit/components/progress/progress-bar/progress-bar.component.less @@ -54,6 +54,10 @@ --tui-clear: var(--tui-clear-inverse); } + &[data-size='xxs'] { + --t-height: 0.125rem; + } + &[data-size='m'] { --t-height: 1.5rem; } diff --git a/projects/kit/components/progress/progress-bar/progress-bar.component.ts b/projects/kit/components/progress/progress-bar/progress-bar.component.ts index 0ebd0f05bee6..0ad8de7c08b8 100644 --- a/projects/kit/components/progress/progress-bar/progress-bar.component.ts +++ b/projects/kit/components/progress/progress-bar/progress-bar.component.ts @@ -9,11 +9,13 @@ import { MODE_PROVIDER, TUI_MODE, TuiBrightness, - TuiSizeXS, TuiSizeXXL, + TuiSizeXXS, } from '@taiga-ui/core'; import {Observable} from 'rxjs'; +import {TUI_PROGRESS_OPTIONS, TuiProgressOptions} from '../progress.options'; + @Component({ selector: 'progress[tuiProgressBar]', template: '', @@ -27,11 +29,15 @@ import {Observable} from 'rxjs'; export class TuiProgressBarComponent { @Input() @HostBinding('style.--tui-progress-color') - color?: string; + color: string | null = this.options.color; @Input() @HostBinding('attr.data-size') - size: TuiSizeXS | TuiSizeXXL = 'm'; + size: TuiSizeXXL | TuiSizeXXS = this.options.size; - constructor(@Inject(TUI_MODE) readonly mode$: Observable) {} + constructor( + @Inject(TUI_MODE) readonly mode$: Observable, + @Inject(TUI_PROGRESS_OPTIONS) + private readonly options: TuiProgressOptions, + ) {} } diff --git a/projects/kit/components/progress/progress-circle/progress-circle.component.ts b/projects/kit/components/progress/progress-circle/progress-circle.component.ts index 0d5ba54df58b..eda1ca23feaa 100644 --- a/projects/kit/components/progress/progress-circle/progress-circle.component.ts +++ b/projects/kit/components/progress/progress-circle/progress-circle.component.ts @@ -19,6 +19,8 @@ import { import {Observable, of} from 'rxjs'; import {delay} from 'rxjs/operators'; +import {TUI_PROGRESS_OPTIONS, TuiProgressOptions} from '../progress.options'; + @Component({ selector: 'tui-progress-circle', templateUrl: './progress-circle.template.html', @@ -41,11 +43,11 @@ export class TuiProgressCircleComponent { @Input() @HostBinding('style.--tui-progress-color') - color: string | null = null; + color: string | null = this.options.color; @Input() @HostBinding('attr.data-size') - size: TuiSizeXXL | TuiSizeXXS = 'm'; + size: TuiSizeXXL | TuiSizeXXS = this.options.size; readonly animationDelay$ = of(true).pipe(delay(0)); @@ -54,6 +56,8 @@ export class TuiProgressCircleComponent { @Inject(WINDOW) private readonly win: Window, @Inject(ElementRef) private readonly el: ElementRef, @Inject(TUI_MODE) readonly mode$: Observable, + @Inject(TUI_PROGRESS_OPTIONS) + private readonly options: TuiProgressOptions, ) {} @HostBinding('style.--progress-ratio') diff --git a/projects/kit/components/progress/progress.options.ts b/projects/kit/components/progress/progress.options.ts new file mode 100644 index 000000000000..a02b8a5272a0 --- /dev/null +++ b/projects/kit/components/progress/progress.options.ts @@ -0,0 +1,21 @@ +import type {Provider} from '@angular/core'; +import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk'; +import type {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core'; + +export interface TuiProgressOptions { + readonly color: string | null; + readonly size: TuiSizeXXL | TuiSizeXXS; +} + +export const TUI_PROGRESS_DEFAULT_OPTIONS: TuiProgressOptions = { + color: null, + size: 'm', +}; + +export const TUI_PROGRESS_OPTIONS = tuiCreateToken(TUI_PROGRESS_DEFAULT_OPTIONS); + +export function tuiProgressOptionsProvider( + options: Partial, +): Provider { + return tuiProvideOptions(TUI_PROGRESS_OPTIONS, options, TUI_PROGRESS_DEFAULT_OPTIONS); +}