added themes legacy-2017 and pt-2022

positive-js · lskramarov · Apr 7, 2022 · Apr 8, 2022 · Apr 11, 2022 · Apr 11, 2022
commit b803549c6455e0af8f0a9de1abc7707d9a130eda
diff --git a/docs/guides/09-design-tokens-for-dev.md b/docs/guides/09-design-tokens-for-dev.md
@@ -102,7 +102,7 @@ $typography: mc-typography-config();
 }
 
 .theme-default {
-    &.active-blue {
+    &.color-blue {
 
         // Include all theme styles for the mosaic components.
         @include app-theme($default-light-theme);

diff --git a/packages/docs/scripts/build-tokens.js b/packages/docs/scripts/build-tokens.js
@@ -1,45 +1,28 @@
 const buildTokens = require('../../mosaic/design-tokens/style-dictionary/build');
 
-const themeName = 'pt-2022';
+const skinPt2022 = 'pt-2022';
+const skinLegacy2017 = 'legacy-2017';
 
-const mosaicTokensProps = `packages/mosaic/design-tokens/${themeName}/tokens/properties/**/*.json5`;
-const mosaicTokensComponents = `packages/mosaic/design-tokens/${themeName}/tokens/components/**/*.json5`;
+const themesConfig = [];
 
-buildTokens([
-    {
-        name: 'default-theme',
-        buildPath: [
-            mosaicTokensProps,
-            mosaicTokensComponents
-        ],
-        outputPath: 'packages/docs/src/styles/default-theme/'
-    },
-    {
-        name: 'green-theme',
-        buildPath: [
-            mosaicTokensProps,
-            `packages/docs/src/styles/green-theme/properties/**/*.json5`,
-            mosaicTokensComponents
-        ],
-        outputPath: 'packages/docs/src/styles/green-theme/'
-    },
-    {
-        name: 'red-theme',
-        buildPath: [
-            mosaicTokensProps,
-            `packages/docs/src/styles/red-theme/properties/**/*.json5`,
-            mosaicTokensComponents
-        ],
-        outputPath: 'packages/docs/src/styles/red-theme/'
-    },
-    {
-        name: 'yellow-theme',
-        buildPath: [
-            mosaicTokensProps,
-            `packages/docs/src/styles/yellow-theme/properties/**/*.json5`,
-            mosaicTokensComponents
-        ],
-        outputPath: 'packages/docs/src/styles/yellow-theme/'
+const themeColorNames = ['default-theme', 'green-theme', 'red-theme', 'yellow-theme']
+
+for (const skin of [skinLegacy2017, skinPt2022]) {
+    const mosaicTokensProps = `packages/mosaic/design-tokens/${skin}/tokens/properties/**/*.json5`;
+    const mosaicTokensComponents = `packages/mosaic/design-tokens/${skin}/tokens/components/**/*.json5`;
+
+    for (const theme of themeColorNames) {
+        themesConfig.push({
+            name: theme,
+            buildPath: [
+                mosaicTokensProps,
+                `packages/docs/src/styles/${skin}/${theme}/properties/**/*.json5`,
+                mosaicTokensComponents
+            ],
+            outputPath: `packages/docs/src/styles/${skin}/${theme}/`
+        });
     }
-]);
+}
+
+buildTokens(themesConfig);
 
diff --git a/packages/docs/src/app/components/main-layout/main-layout.component.html b/packages/docs/src/app/components/main-layout/main-layout.component.html
@@ -1,4 +1,4 @@
-<navbar></navbar>
+<navbar class="docs-navbar-header_fixed"></navbar>
 
 <main role="main" class="site__main main">
     <app-sidenav></app-sidenav>

diff --git a/packages/docs/src/app/components/navbar/navbar-property.ts b/packages/docs/src/app/components/navbar/navbar-property.ts
@@ -28,8 +28,14 @@ export class NavbarProperty {
     setValue(i: number) {
         this.currentValue = this.data[i];
         localStorage.setItem(this.property, `${i}`);
-        if (this.updateTemplate) { this.updateTemplate(); }
-        if (this.updateSelected) { this.updateSelected(i); }
+
+        if (this.updateTemplate) {
+            this.updateTemplate();
+        }
+
+        if (this.updateSelected) {
+            this.updateSelected(i);
+        }
     }
 
     init() {
@@ -43,20 +49,18 @@ export class NavbarProperty {
     }
 
     private updateTemplate() {
-        if (this.currentValue) {
-            for (const color of this.data) {
-                document.body.classList.remove(color.className);
-            }
+        if (!this.currentValue) { return; }
 
-            document.body.classList.add(this.currentValue.className);
+        for (const color of this.data) {
+            document.body.classList.remove(color.className);
         }
+
+        document.body.classList.add(this.currentValue.className);
     }
 
     private updateSelected(i: number) {
         if (this.data[i]) {
-            this.data.forEach((color) => {
-                color.selected = false;
-            });
+            this.data.forEach((color) => color.selected = false);
             this.data[i].selected = true;
         }
     }

diff --git a/packages/docs/src/app/components/navbar/navbar.component.ts b/packages/docs/src/app/components/navbar/navbar.component.ts
@@ -1,16 +1,17 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { mosaicVersion } from '../../shared/version/version';
 
 import { INavbarProperty, NavbarProperty } from './navbar-property';
-import { ThemeService } from './theme.service';
+import { Themes, ThemeService } from './theme.service';
 
 
 @Component({
     selector: 'navbar',
     templateUrl: './navbar.template.html',
-    styleUrls: ['./navbar.scss']
+    styleUrls: ['./navbar.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class NavbarComponent implements OnInit, OnDestroy {
     mosaicVersion = mosaicVersion;
@@ -20,14 +21,15 @@ export class NavbarComponent implements OnInit, OnDestroy {
     versionSwitch: NavbarProperty;
     colorSwitch: NavbarProperty;
     themeSwitch: NavbarProperty;
+    skinSwitch: NavbarProperty;
     languageSwitch: NavbarProperty;
 
     // To add new version to dropdown add new object to the end of data array,
     // number of current version is taken from package.json, rest should be specified
     // run npm show @ptsecurity/mosaic versions --json to see all mosaic versions
     versionData = [
         {
-            number: 'Версия 11',
+            number: 'Версия 13',
             date: '30 марта',
             selected: false,
             link: '//mosaic.ptsecurity.com'
@@ -62,23 +64,23 @@ export class NavbarComponent implements OnInit, OnDestroy {
         property: 'PT_color',
         data: [
             {
-                code: '#2f80ed',
-                className: 'active-blue',
+                code: '#2F80ED',
+                className: 'color-blue',
                 selected: true
             },
             {
                 code: '#832112',
-                className: 'active-red',
+                className: 'color-red',
                 selected: false
             },
             {
-                code: '#07804e',
-                className: 'active-green',
+                code: '#07804E',
+                className: 'color-green',
                 selected: false
             },
             {
-                code: '#eaaf00',
-                className: 'active-yellow',
+                code: '#EAAF00',
+                className: 'color-yellow',
                 selected: false
             }
         ],
@@ -89,8 +91,8 @@ export class NavbarComponent implements OnInit, OnDestroy {
     private languageProperty: INavbarProperty = {
         property: 'PT_language',
         data: [
-            'Русский язык',
-            'Английский язык'
+            'Русский',
+            'English'
         ],
         updateTemplate: false,
         updateSelected: false
@@ -101,51 +103,72 @@ export class NavbarComponent implements OnInit, OnDestroy {
         data: [
             {
                 theme: 'auto',
-                name: 'Автоматическое переключение',
-                className: this.colorAutomaticTheme.matches ? 'theme-default' : 'theme-dark',
+                name: 'Авто',
+                className: this.colorAutomaticTheme.matches ? Themes.Default : Themes.Dark,
                 selected: true
             },
             {
                 theme: 'default',
-                name: 'Светлая тема',
-                className: 'theme-default',
+                name: 'Светлая',
+                className: Themes.Default,
                 selected: false
             },
             {
                 theme: 'dark',
-                name: 'Темная тема',
-                className: 'theme-dark',
+                name: 'Тёмная',
+                className: Themes.Dark,
                 selected: false
             }
         ],
         updateTemplate: true,
         updateSelected: true
     };
 
+    private skinProperty: INavbarProperty = {
+        property: 'PT_skin',
+        data: [
+            {
+                theme: 'pt-2022',
+                name: 'Mosaic 2022',
+                className: 'pt-2022',
+                selected: false
+            },
+            {
+                theme: 'legacy-2017',
+                name: 'Mosaic 2017',
+                className: 'legacy-2017',
+                selected: true
+            }
+        ],
+        updateTemplate: true,
+        updateSelected: true
+    };
+
     constructor(private themeService: ThemeService) {
         this.setSelectedVersion();
 
         this.colorSwitch = new NavbarProperty(this.activeColorProperty);
         this.themeSwitch = new NavbarProperty(this.themeProperty);
+        this.skinSwitch = new NavbarProperty(this.skinProperty);
         this.languageSwitch = new NavbarProperty(this.languageProperty);
 
         try {
             // Chrome & Firefox
             this.colorAutomaticTheme.addEventListener('change', (e) => {
                 if (e.matches) {
-                    this.themeProperty.data[0].className = 'theme-default';
+                    this.themeProperty.data[0].className = Themes.Default;
                 } else {
-                    this.themeProperty.data[0].className = 'theme-dark';
+                    this.themeProperty.data[0].className = Themes.Dark;
                 }
             });
         } catch (err) {
             try {
                 // Safari
                 this.colorAutomaticTheme.addListener((e) => {
                     if (e.matches) {
-                        this.themeProperty.data[0].className = 'theme-default';
+                        this.themeProperty.data[0].className = Themes.Default;
                     } else {
-                        this.themeProperty.data[0].className = 'theme-dark';
+                        this.themeProperty.data[0].className = Themes.Dark;
                     }
                 });
             } catch (errSafari) {
@@ -156,12 +179,13 @@ export class NavbarComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
-        this.themingSubscription = this.themeService.currentTheme.subscribe((theme: string) => {
-            if (this.themeSwitch.data[0].selected) {
-            this.themeSwitch.data[0].className = theme;
-            this.themeSwitch.setValue(0);
-          }
-        });
+        this.themingSubscription = this.themeService.currentTheme
+            .subscribe((theme: string) => {
+                if (this.themeSwitch.data[0].selected) {
+                    this.themeSwitch.data[0].className = theme;
+                    this.themeSwitch.setValue(0);
+              }
+            });
     }
 
     ngOnDestroy() {
@@ -170,9 +194,11 @@ export class NavbarComponent implements OnInit, OnDestroy {
 
     goToVersion(i: number) {
         const link = this.versionData[i].link;
+
         if (!location.origin.match(link)) {
             location.href = `${link}${location.pathname}${location.search}${location.hash}`;
         }
+
         this.versionSwitch.setValue(i);
     }
 

diff --git a/packages/docs/src/app/components/navbar/navbar.module.ts b/packages/docs/src/app/components/navbar/navbar.module.ts
@@ -4,6 +4,7 @@ import { McButtonModule } from '@ptsecurity/mosaic/button';
 import { McDropdownModule } from '@ptsecurity/mosaic/dropdown';
 import { McIconModule } from '@ptsecurity/mosaic/icon';
 import { McLinkModule } from '@ptsecurity/mosaic/link';
+import { McNavbarModule } from '@ptsecurity/mosaic/navbar';
 import { McSelectModule } from '@ptsecurity/mosaic/select';
 
 import { NavbarComponent } from './navbar.component';
@@ -16,7 +17,8 @@ import { NavbarComponent } from './navbar.component';
         McDropdownModule,
         McLinkModule,
         McIconModule,
-        McSelectModule
+        McSelectModule,
+        McNavbarModule
     ],
     exports: [NavbarComponent],
     declarations: [NavbarComponent]

diff --git a/packages/docs/src/app/components/navbar/navbar.scss b/packages/docs/src/app/components/navbar/navbar.scss
@@ -1,4 +1,8 @@
-@import "navbar-theme";
+
+
+.docs-navbar__version-dropdown {
+    width: 220px;
+}
 
 $doc-navbar-height: 64px;
 $doc-navbar-icon-font-size: 22px;