refactor(core)!: drop Mode directive (#7191)

Co-authored-by: Vladimir Potekhin <[email protected]>

projects/addon-charts/components/axes/axes.component.ts

@@ -1,24 +1,13 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    HostBinding,
-    inject,
-    Input,
-} from '@angular/core';
+import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';
 import {TUI_ALWAYS_DASHED, TUI_ALWAYS_SOLID} from '@taiga-ui/addon-charts/constants';
 import type {TuiLineHandler, TuiLineType} from '@taiga-ui/addon-charts/types';
 import {CHAR_NO_BREAK_SPACE} from '@taiga-ui/cdk';
-import {MODE_PROVIDER, TUI_MODE} from '@taiga-ui/core';
 
 @Component({
     selector: 'tui-axes',
     templateUrl: './axes.template.html',
     styleUrls: ['./axes.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [MODE_PROVIDER],
-    host: {
-        '($.data-mode.attr)': 'mode$',
-    },
 })
 export class TuiAxesComponent {
     @Input()
@@ -60,8 +49,6 @@ export class TuiAxesComponent {
     @Input()
     public verticalLinesHandler: TuiLineHandler = TUI_ALWAYS_DASHED;
 
-    protected readonly mode$ = inject(TUI_MODE);
-
     public get hasXLabels(): boolean {
         return !!this.axisXLabels.length;
     }

projects/addon-charts/components/axes/axes.style.less

@@ -20,14 +20,6 @@
     border-width: 1px;
     border-color: var(--tui-base-03);
     isolation: isolate;
-
-    :host[data-mode='onDark'] & {
-        border-color: rgba(255, 255, 255, 0.48);
-    }
-
-    :host[data-mode='onLight'] & {
-        border-color: rgba(0, 0, 0, 0.48);
-    }
 }
 
 .t-horizontal {
@@ -55,14 +47,6 @@
     border-width: 1px;
     border-color: var(--tui-base-03);
 
-    :host[data-mode='onDark'] & {
-        border-color: rgba(255, 255, 255, 0.48);
-    }
-
-    :host[data-mode='onLight'] & {
-        border-color: rgba(0, 0, 0, 0.48);
-    }
-
     &_vertical {
         :host._centered &:first-child {
             flex: 1 0 1px;
@@ -90,10 +74,6 @@
     &_primary {
         transform: rotate(180deg);
     }
-
-    :host[data-mode='onDark'] & {
-        color: var(--tui-text-02-night);
-    }
 }
 
 .t-labels-y {
@@ -103,10 +83,6 @@
     justify-content: space-between;
     color: var(--tui-text-02);
 
-    :host[data-mode='onDark'] & {
-        color: var(--tui-text-02-night);
-    }
-
     &_primary {
         text-align: right;
         padding-right: 0.75rem;
@@ -148,14 +124,6 @@
     flex: 1;
     margin-bottom: 1.5625rem;
 
-    :host[data-mode='onDark'] & {
-        border-color: rgba(255, 255, 255, 0.48);
-    }
-
-    :host[data-mode='onLight'] & {
-        border-color: rgba(0, 0, 0, 0.48);
-    }
-
     &:before {
         content: '';
         display: block;

projects/addon-charts/components/pie-chart/pie-chart.component.ts

@@ -34,9 +34,7 @@ const TRANSFORM = {
     templateUrl: './pie-chart.template.html',
     styleUrls: ['./pie-chart.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    viewProviders: [
-        tuiHintOptionsProvider({direction: 'top-right', appearance: 'onDark'}),
-    ],
+    viewProviders: [tuiHintOptionsProvider({direction: 'top-right', appearance: 'dark'})],
 })
 export class TuiPieChartComponent {
     private readonly hintOptions = inject(TuiHintOptionsDirective, {optional: true});

projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts

@@ -30,11 +30,9 @@ import {
 } from '@taiga-ui/cdk';
 import type {TuiDataListHost} from '@taiga-ui/core';
 import {
-    MODE_PROVIDER,
     TEXTFIELD_CONTROLLER_PROVIDER,
     TUI_COMMON_ICONS,
     TUI_DIGIT_REGEXP,
-    TUI_MODE,
     TUI_NON_DIGIT_REGEXP,
     TUI_TEXTFIELD_WATCHED_CONTROLLER,
     tuiAsDataListHost,
@@ -59,11 +57,9 @@ const EXPIRE_COMPLETE_LENGTH = 5; // MM/YY
         tuiAsFocusableItemAccessor(TuiInputCardGroupedComponent),
         tuiAsControl(TuiInputCardGroupedComponent),
         tuiAsDataListHost(TuiInputCardGroupedComponent),
-        MODE_PROVIDER,
         TEXTFIELD_CONTROLLER_PROVIDER,
     ],
     host: {
-        '($.data-mode.attr)': 'mode$',
         'data-size': 'l',
     },
 })
@@ -126,7 +122,6 @@ export class TuiInputCardGroupedComponent
         separator: '/',
     });
 
-    protected readonly mode$ = inject(TUI_MODE);
     protected readonly cardGroupedTexts$ = inject(TUI_INPUT_CARD_GROUPED_TEXTS);
     protected readonly controller = inject(TUI_TEXTFIELD_WATCHED_CONTROLLER);
     protected readonly icons = inject(TUI_COMMON_ICONS);

projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less

@@ -13,10 +13,6 @@
     width: @width-full;
     border-radius: var(--tui-radius-m);
 
-    &[data-mode='onDark'] {
-        --tui-autofill: var(--tui-autofill-night);
-    }
-
     :host-context(tui-root._mobile) {
         width: @width-mobile;
     }
@@ -119,12 +115,7 @@
         opacity: 1;
     }
 
-    :host[data-mode='onDark'] &::placeholder {
-        color: var(--tui-text-03-night);
-    }
-
-    &&&_card,
-    :host[data-mode='onDark'] &&&_card {
+    &&&_card {
         // @note: (&&&_) it's increasing css cascade priority
         &:not(.t-input_hidden),
         &:not(.t-input_hidden)::placeholder,

projects/addon-doc/components/demo/demo.component.ts

@@ -5,7 +5,6 @@ import {
     Component,
     ContentChild,
     ElementRef,
-    forwardRef,
     HostBinding,
     HostListener,
     inject,
@@ -18,21 +17,17 @@ import {FormGroup} from '@angular/forms';
 import type {Params, UrlTree} from '@angular/router';
 import {UrlSerializer} from '@angular/router';
 import type {TuiDemoParams} from '@taiga-ui/addon-doc/interfaces';
+import {TuiThemeDarkService} from '@taiga-ui/addon-doc/services';
 import {TUI_DOC_DEMO_TEXTS, TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
 import {tuiCoerceValueIsTrue} from '@taiga-ui/addon-doc/utils';
 import {
-    TUI_IS_MOBILE,
     tuiClamp,
     tuiCleanObject,
-    TuiDestroyService,
     tuiPure,
     tuiPx,
     TuiResizeableDirective,
     tuiToInteger,
 } from '@taiga-ui/cdk';
-import type {TuiBrightness} from '@taiga-ui/core';
-import {TuiModeDirective} from '@taiga-ui/core';
-import {Subject} from 'rxjs';
 
 const MIN_WIDTH = 160;
 
@@ -41,13 +36,6 @@ const MIN_WIDTH = 160;
     templateUrl: './demo.template.html',
     styleUrls: ['./demo.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [
-        TuiDestroyService,
-        {
-            provide: TuiModeDirective,
-            useExisting: forwardRef(() => TuiDocDemoComponent),
-        },
-    ],
 })
 export class TuiDocDemoComponent implements OnInit {
     @ViewChild(TuiResizeableDirective, {static: true})
@@ -71,12 +59,13 @@ export class TuiDocDemoComponent implements OnInit {
     @HostBinding('class._sticky')
     public sticky = true;
 
-    public mode: TuiBrightness | null = this.params.tuiMode || null;
-    public readonly change$ = new Subject<void>();
-
     @ContentChild(TemplateRef)
     protected readonly template: TemplateRef<Record<string, unknown>> | null = null;
 
+    protected dark = tuiCoerceValueIsTrue(
+        this.params.darkMode ?? inject(TuiThemeDarkService).value,
+    );
+
     protected testForm?: FormGroup;
 
     protected readonly updateOnVariants = ['change', 'blur', 'submit'] as const;
@@ -87,8 +76,6 @@ export class TuiDocDemoComponent implements OnInit {
     protected opaque = tuiCoerceValueIsTrue(this.params.sandboxOpaque ?? true);
     protected expanded = tuiCoerceValueIsTrue(this.params.sandboxExpanded ?? false);
     protected sandboxWidth = tuiToInteger(this.params.sandboxWidth);
-    protected readonly items: readonly TuiBrightness[] = ['onLight', 'onDark'];
-    protected readonly isMobile = inject(TUI_IS_MOBILE);
     protected readonly texts = inject(TUI_DOC_DEMO_TEXTS);
 
     public ngOnInit(): void {
@@ -107,10 +94,9 @@ export class TuiDocDemoComponent implements OnInit {
         this.updateUrl({sandboxWidth: this.sandboxWidth});
     }
 
-    protected onModeChange(mode: TuiBrightness | null): void {
-        this.mode = mode;
-        this.updateUrl({sandboxWidth: this.sandboxWidth});
-        this.change$.next();
+    protected onModeChange(dark: boolean): void {
+        this.dark = dark;
+        this.updateUrl({sandboxWidth: this.sandboxWidth, darkMode: this.dark});
     }
 
     protected toggleDetails(): void {
@@ -161,11 +147,10 @@ export class TuiDocDemoComponent implements OnInit {
         const {queryParams} = tree;
 
         delete queryParams.sandboxWidth;
-        delete queryParams.tuiMode;
 
         tree.queryParams = {
             ...queryParams,
-            ...tuiCleanObject({tuiMode: this.mode, ...params}),
+            ...tuiCleanObject({...params}),
         };
 
         this.locationRef.go(this.urlStateHandler(tree));

projects/addon-doc/components/demo/demo.module.ts

@@ -1,7 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
 import {TuiResizerModule} from '@taiga-ui/cdk';
 import {
     TuiButtonDirective,
@@ -10,7 +9,6 @@ import {
     TuiGroupDirective,
     TuiHintModule,
     TuiLinkDirective,
-    TuiModeModule,
     TuiSvgModule,
     TuiTextfieldControllerModule,
     TuiTooltipModule,
@@ -21,6 +19,7 @@ import {
     TuiChevronDirective,
     TuiDataListWrapperModule,
     TuiSelectModule,
+    TuiSwitchComponent,
 } from '@taiga-ui/kit';
 
 import {TuiDocDemoComponent} from './demo.component';
@@ -30,14 +29,12 @@ import {TuiDocDemoComponent} from './demo.component';
         CommonModule,
         ReactiveFormsModule,
         FormsModule,
-        RouterModule,
         TuiLinkDirective,
         TuiButtonDirective,
         TuiSelectModule,
         TuiExpandModule,
         TuiGroupDirective,
         TuiTooltipModule,
-        TuiModeModule,
         TuiCheckboxComponent,
         TuiSvgModule,
         TuiDataListWrapperModule,
@@ -47,6 +44,7 @@ import {TuiDocDemoComponent} from './demo.component';
         TuiResizerModule,
         TuiBlockDirective,
         TuiChevronDirective,
+        TuiSwitchComponent,
     ],
     declarations: [TuiDocDemoComponent],
     exports: [TuiDocDemoComponent],

projects/addon-doc/components/demo/demo.style.less

@@ -12,10 +12,11 @@
     pointer-events: none;
 }
 
-.t-bg-toggle {
+.t-settings {
     position: absolute;
     bottom: ~'calc(100% + 0.75rem)';
     display: flex;
+    gap: 2rem;
     align-items: center;
     justify-content: flex-end;
     pointer-events: none;
@@ -26,6 +27,12 @@
     }
 }
 
+.t-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
 .t-wrapper {
     box-shadow: var(--tui-shadow-dropdown);
     display: flex;
@@ -35,6 +42,7 @@
     min-height: 6rem;
     width: 100%;
     min-width: 10rem;
+    color: var(--tui-text-01);
     background-color: var(--tui-base-01);
     overflow: hidden;
     pointer-events: auto;
@@ -52,29 +60,6 @@
             -0.625rem 0;
     }
 
-    &.t-wrapper_dark {
-        background-color: @color-dark;
-        color: var(--tui-base-01);
-    }
-
-    &.t-wrapper_gray {
-        background-color: @color-gray;
-    }
-
-    &.t-wrapper_dark.t-wrapper_transparent {
-        background-image: linear-gradient(45deg, var(--tui-focus) 25%, transparent 25%),
-            linear-gradient(-45deg, var(--tui-focus) 25%, transparent 25%),
-            linear-gradient(45deg, transparent 75%, var(--tui-focus) 75%),
-            linear-gradient(-45deg, transparent 75%, var(--tui-focus) 75%);
-    }
-
-    &.t-wrapper_gray.t-wrapper_transparent {
-        background-image: linear-gradient(45deg, var(--tui-base-05) 25%, transparent 25%),
-            linear-gradient(-45deg, var(--tui-base-05) 25%, transparent 25%),
-            linear-gradient(45deg, transparent 75%, var(--tui-base-05) 75%),
-            linear-gradient(-45deg, transparent 75%, var(--tui-base-05) 75%);
-    }
-
     :host-context(tui-root._mobile) & {
         min-height: auto;
     }