Merge branch 'feat/DS-2835' of github.com:koobiq/angular-components into feat/DS-2835

* 'feat/DS-2835' of github.com:koobiq/angular-components:
  fix(form-field): kbq-password-hint error (#DS-2868) (#277)
  feat(tooltip): components theming with CSS-vars (#DS-2840)  (#279)
  feat(file-upload): components theming with CSS-vars (#DS-2812)  (#273)
  feat(description-list): components theming with CSS-vars (#DS-2846)  (#274)
  feat(tree-select): components theming with CSS-vars (#DS-2841)  (#278)
  feat(empty-state): components theming with CSS-vars (#DS-2811)  (#272)
  feat(code-block): components theming with CSS-vars (#DS-2806)  (#271)
  feat(table): components theming with CSS-vars (#DS-2843)  (#275)
  feat(toggle): components theming with CSS-vars (#DS-2839)  (#280)
  feat(toast): components theming with CSS-vars (#DS-2837)  (#281)
  feat(docs): theme switch refactoring (#DS-2796) (#266)

Author: sk8knut

apps/docs/src/app/components/navbar/navbar.component.ts

@@ -1,14 +1,9 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { KbqTheme, ThemeService } from '@koobiq/components/core';
+import { Component, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { KbqTheme, KbqThemeSelector, ThemeService } from '@koobiq/components/core';
 import { koobiqVersion } from '../../version';
 import { DocStates, DocsNavbarState } from '../doс-states';
 import { NavbarProperty, NavbarPropertyParameters } from './navbar-property';
 
-export enum Themes {
-    Default = 'theme-light',
-    Dark = 'theme-dark'
-}
-
 @Component({
     selector: 'docs-navbar',
     templateUrl: 'navbar.template.html',
@@ -18,7 +13,7 @@ export enum Themes {
     },
     encapsulation: ViewEncapsulation.None
 })
-export class NavbarComponent {
+export class NavbarComponent implements OnDestroy {
     version = koobiqVersion;
 
     themeSwitch: NavbarProperty;
@@ -29,17 +24,17 @@ export class NavbarComponent {
     kbqThemes: KbqTheme[] = [
         {
             name: 'Как в системе',
-            className: this.colorAutomaticTheme.matches ? Themes.Default : Themes.Dark,
+            className: this.colorAutomaticTheme.matches ? KbqThemeSelector.Default : KbqThemeSelector.Dark,
             selected: false
         },
         {
             name: 'Светлая',
-            className: Themes.Default,
+            className: KbqThemeSelector.Default,
             selected: false
         },
         {
             name: 'Тёмная',
-            className: Themes.Dark,
+            className: KbqThemeSelector.Dark,
             selected: false
         }
     ];
@@ -80,6 +75,15 @@ export class NavbarComponent {
         this.docStates.navbarMenu.subscribe((state) => (this.opened = state === DocsNavbarState.opened));
     }
 
+    ngOnDestroy() {
+        this.themeService.ngOnDestroy();
+        try {
+            this.colorAutomaticTheme.removeEventListener('change', this.setAutoTheme);
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
     toggleMenu() {
         this.docStates.toggleNavbarMenu();
     }
@@ -93,7 +97,7 @@ export class NavbarComponent {
     private setAutoTheme = (e) => {
         this.themeService.themes[0] = {
             ...this.themeService.themes[0],
-            className: e.matches ? Themes.Default : Themes.Dark
+            className: e.matches ? KbqThemeSelector.Default : KbqThemeSelector.Dark
         };
 
         if (this.themeService.themes[0].selected) {

apps/docs/src/app/components/welcome/welcome.component.ts

@@ -33,7 +33,7 @@ export class WelcomeComponent implements OnInit, OnDestroy {
     ngOnInit(): void {
         this.docCategories = this.docItems.getCategories().filter((category) => category.isPreviewed);
         this.currentTheme$ = this.themeService.current.pipe(
-            map((currentTheme) => currentTheme.className.replace('theme-', ''))
+            map((currentTheme) => currentTheme.className.replace('kbq-theme-', ''))
         );
         this.docStates.registerHeaderScrollContainer(this.elementRef.nativeElement);
     }

apps/docs/src/index.html

@@ -106,7 +106,7 @@
         <!-- /Yandex.Metrika counter -->
     </head>
 
-    <body class="docs-app-background theme-light docs">
+    <body class="docs-app-background kbq-theme-light docs">
         <docs-app />
     </body>
 </html>

apps/docs/src/main.scss

@@ -12,13 +12,13 @@
 .docs {
     @include theme-kbq.docs-typography(tokens.$tokens, tokens.$typography-config, tokens.$markdown-typography-config);
 
-    &.theme-light {
+    &.kbq-theme-light {
         @include hljs-light-theme();
 
         @include theme-kbq.kbq-docs-theme(tokens.$default-theme-light);
     }
 
-    &.theme-dark {
+    &.kbq-theme-dark {
         @include hljs-dark-theme();
 
         @include theme-kbq.kbq-docs-theme(tokens.$default-theme-dark);

apps/docs/src/styles/_docsearch.scss

@@ -263,7 +263,7 @@
     --docsearch-footer-shadow: none;
 }
 
-body.theme-dark {
+body.kbq-theme-dark {
     --docsearch-highlight-color: inherit;
     --docsearch-icon-color: #{$dark-icon-contrast-fade};
     --docsearch-text-color: #{$dark-foreground-contrast};

docs/guides/theming-2.0.md

@@ -60,17 +60,26 @@
 -   [button](/packages/components/button/button-tokens.scss)
 -   [button-toggle](/packages/components/button-toggle/button-toggle-tokens.scss)
 -   [checkbox,pseudo-checkbox](/packages/components/checkbox/checkbox-tokens.scss)
+-   [code-block](/packages/components/code-block/code-block-tokens.scss)
 -   [datepicker](/packages/components/datepicker/datepicker-tokens.scss)
+-   [description-list](/packages/components/dl/dl-tokens.scss)
 -   [divider](/packages/components/divider/divider-tokens.scss)
 -   [dropdown](/packages/components/dropdown/dropdown-tokens.scss)
+-   [empty-state](/packages/components/empty-state/empty-state-tokens.scss)
+-   [file-upload](/packages/components/file-upload/file-upload-tokens.scss)
 -   [form-field](/packages/components/form-field/form-field-tokens.scss)
 -   [hint](/packages/components/form-field/hint-tokens.scss)
 -   [icon](/packages/components/icon/icon-tokens.scss)
 -   [icon-button](/packages/components/icon/icon-button-tokens.scss)
 -   [icon-item](/packages/components/icon/icon-item-tokens.scss)
 -   [input](/packages/components/input/input-tokens.scss)
 -   [link](/packages/components/link/link-tokens.scss)
+-   [table](/packages/components/table/table-tokens.scss)
 -   [textarea](/packages/components/textarea/textarea-tokens.scss)
+-   [toast](/packages/components/toast/toast-tokens.scss)
+-   [toggle](/packages/components/toggle/toggle-tokens.scss)
+-   [tooltip](/packages/components/tooltip/tooltip-tokens.scss)
+-   [tree-select](/packages/components/tree-select/tree-select-tokens.scss)
 
 ### Откуда теперь брать значения дизайн-токенов для компонентов?
 

docs/guides/theming.md

@@ -164,11 +164,11 @@ $dark: theming.kbq-dark-theme($tokens);
     @include theme-kbq.app-typography(tokens.$tokens, tokens.$typography-config, tokens.$markdown-typography-config);
 
     /* selectors the same as in theme.service.ts */
-    &.theme-light {
+    &.kbq-theme-light {
         @include theme-kbq.app-theme(tokens.$light);
     }
 
-    &.theme-dark {
+    &.kbq-theme-dark {
         @include theme-kbq.app-theme(tokens.$dark);
     }
 }
@@ -205,7 +205,7 @@ $dark: theming.kbq-dark-theme($tokens);
             href="favicon.ico"
         />
     </head>
-    <body class="theme-light kbq">
+    <body class="kbq-theme-light kbq">
         <app-root></app-root>
     </body>
 </html>

packages/components-dev/input/template.html

@@ -32,7 +32,9 @@
             От 8 до 15 символов
         </kbq-password-hint>
 
-        <kbq-password-hint [rule]="passwordRules.UpperLatin">Заглавная латинская буква</kbq-password-hint>
+        @if (true) {
+            <kbq-password-hint [rule]="passwordRules.UpperLatin">Заглавная латинская буква</kbq-password-hint>
+        }
 
         <kbq-password-hint [rule]="passwordRules.LowerLatin">Строчная латинская буква</kbq-password-hint>
 

packages/components/badge/badge-tokens.scss

@@ -100,7 +100,7 @@
     --kbq-badge-outline-fade-on-theme-icon: hsla(216, 100%, 50%, 100%);
     --kbq-badge-outline-fade-on-contrast-background: transparent;
     --kbq-badge-outline-fade-on-contrast-color: hsla(229, 15%, 15%, 100%);
-    --kbq-badge-outline-fade-on-contrast-border: hsla(229, 15%, 80%, 100%);
+    --kbq-badge-outline-fade-on-contrast-border: hsla(229, 15%, 70%, 100%);
     --kbq-badge-outline-fade-on-contrast-caption: hsla(229, 15%, 15%, 100%);
     --kbq-badge-outline-fade-on-contrast-icon: hsla(229, 15%, 60%, 100%);
     --kbq-badge-outline-fade-on-success-background: transparent;