positive-js · lskramarov · Apr 7, 2022 · Apr 8, 2022 · Apr 11, 2022 · Apr 11, 2022
diff --git a/.stylelintrc b/.stylelintrc
@@ -20,19 +20,19 @@
         }]
     },
     "ignoreFiles": [
-        "packages/mosaic/design-tokens/pt-2022/*.scss",
-        "packages/mosaic/design-tokens/pt-2022/*.css",
-        "packages/mosaic/design-tokens/legacy-2017/*.scss",
-        "packages/mosaic/design-tokens/legacy-2017/*.css",
+        "packages/mosaic/design-tokens/pt-2022/*.*",
+        "packages/mosaic/design-tokens/legacy-2017/*.*",
+
+        "packages/docs/src/styles/pt-2022/default-theme/*.*",
+        "packages/docs/src/styles/pt-2022/green-theme/*.*",
+        "packages/docs/src/styles/pt-2022/red-theme/*.*",
+        "packages/docs/src/styles/pt-2022/yellow-theme/*.*",
+
+        "packages/docs/src/styles/legacy-2017/default-theme/*.*",
+        "packages/docs/src/styles/legacy-2017/green-theme/*.*",
+        "packages/docs/src/styles/legacy-2017/red-theme/*.*",
+        "packages/docs/src/styles/legacy-2017/yellow-theme/*.*",
 
-        "packages/docs/src/styles/default-theme/*.scss",
-        "packages/docs/src/styles/default-theme/*.css",
-        "packages/docs/src/styles/green-theme/*.scss",
-        "packages/docs/src/styles/green-theme/*.css",
-        "packages/docs/src/styles/red-theme/*.scss",
-        "packages/docs/src/styles/red-theme/*.css",
-        "packages/docs/src/styles/yellow-theme/*.scss",
-        "packages/docs/src/styles/yellow-theme/*.css",
         "packages/mosaic-moment-adapter/coverage/**/*.css",
         "packages/mosaic-luxon-adapter/coverage/**/*.css",
         "packages/mosaic/coverage/**/*.css"

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/package.json b/package.json
@@ -22,7 +22,7 @@
         "@angular/core": "^13.1.0",
         "@angular/forms": "^13.1.0",
         "@angular/platform-browser": "^13.1.0",
-        "@ptsecurity/mosaic-icons": "6.2.0",
+        "@ptsecurity/mosaic-icons": "6.3.0",
         "core-js": "^3.6.5",
         "rxjs": "^6.6.7",
         "tslib": "^2.3.1",

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/anchors/_anchors-theme.scss b/packages/docs/src/app/components/anchors/_anchors-theme.scss
@@ -1,51 +1,33 @@
 @mixin mc-anchors-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
-    $background-color: mc-color($background, background);
-    $text: mc-color($foreground, text);
-    $primary: map_get($theme, primary);
-    $primary_500: mc-color($primary, 500);
+
     $shadow: mc-color($foreground, text-less-contrast);
 
     .anchors-menu {
-        background-color: $background-color;
+        background-color: mc-color($background, background);
     }
 
     .anchors-menu__list-element {
-        color: $text;
+        color: mc-color($foreground, text);
 
         &:first-child {
-            padding:  {
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 16px;
-            }
-            margin: {
-                top: 0;
-                right: 0;
-                bottom: 6px;
-                left: 0;
-            }
+            padding: 0 0 0 16px;
+            margin: 0 0 6px 0;
 
             & .anchors-menu__link {
                 border-bottom: 1px solid rgba($shadow, 0.2);
-                padding: {
-                    top: 6px;
-                    right: 16px;
-                    bottom: 6px;
-                    left: 0;
-                }
+                padding: 6px 16px 6px 0;
             }
         }
 
         &:hover {
-            @include box-shadow( inset 3px 0 0 rgba($shadow, 0.2) );
+            @include box-shadow(inset 3px 0 0 rgba($shadow, 0.2));
         }
 
-        &_active,
-        &_active:hover {
-            @include box-shadow( inset 3px 0 0 $primary_500 );
+        &.anchors-menu__list-element_active,
+        &.anchors-menu__list-element_active:hover {
+            @include box-shadow(inset 3px 0 0 mc-color(map_get($theme, primary)));
         }
     }
 }

diff --git a/packages/docs/src/app/components/anchors/anchors.scss b/packages/docs/src/app/components/anchors/anchors.scss
@@ -1,6 +1,9 @@
+@import '../../../styles/legacy-2017/default-theme/variables';
+
+
 .anchors-menu {
     position: fixed;
-    top: 64px;
+    top: $navbar-item-size-height;
     width: 300px;
     right: 0;
     bottom: 0;

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/main-layout/main-layout.component.scss b/packages/docs/src/app/components/main-layout/main-layout.component.scss
@@ -1,3 +1,5 @@
+@import '../../../styles/legacy-2017/default-theme/variables';
+
 .main {
     display: flex;
     height: 100%;
@@ -7,7 +9,7 @@
 .content {
     width: calc(100% - 600px); // for Edge
     margin: {
-        top: 64px;
+        top: $navbar-item-size-height;
         left: 300px;
         right: 300px;
         bottom: 62px;
@@ -23,7 +25,7 @@
 
     .content {
         width: 100%;
-        margin: 0px;
+        margin: 0;
         padding: 10px;
     }
 }
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;
         }
     }