feat(docs): theme change functionality added (#239)

positive-js · Sep 27, 2019 · 433d5fe · 433d5fe
1 parent 074e97a
commit 433d5fe
Show file tree

Hide file tree

Showing 14 changed files with 122 additions and 119 deletions.
diff --git a/packages/docs/src/app/components/component-viewer/_component-overview-theme.scss b/packages/docs/src/app/components/component-viewer/_component-overview-theme.scss
@@ -1,7 +1,8 @@
 @mixin mc-component-viewer-theme($theme) {
-    $second: map-get($theme, second);
+    $foreground: map-get($theme, foreground);
+    $text: mc-color($foreground, text);
 
     .title{
-        color: map-get($second, 700);
+        color: $text;
     }
 }
diff --git a/packages/docs/src/app/components/footer/_footer-theme.scss b/packages/docs/src/app/components/footer/_footer-theme.scss
@@ -5,14 +5,14 @@
 
     $is-dark: map-get($theme, is-dark);
 
-    $white: mc-color($background, background);
+    $background-color: mc-color($background, background);
     $hint-text: mc-color($foreground, hint-text);
     $color: mc-color($primary);
     $color_hover: mc-color($primary, if($is-dark, lighter, darker));
     $border-color: mc-color($second, 300);
 
     .docs-footer {
-        background-color: $white;
+        background-color: $background-color;
 
         &__wrapper {
             border-top: 1px solid $border-color;

diff --git a/packages/docs/src/app/components/main-layout/main-layout-theme.scss b/packages/docs/src/app/components/main-layout/main-layout-theme.scss
@@ -0,0 +1,6 @@
+@mixin mc-main-layout-theme($theme) {
+    $background: map-get($theme, background);
+    $background-color: mc-color($background, background);
+
+    .main { background-color: $background-color; }
+}
diff --git a/packages/docs/src/app/components/navbar/_navbar-theme.scss b/packages/docs/src/app/components/navbar/_navbar-theme.scss
@@ -1,18 +1,22 @@
 @mixin mc-navbar-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
-    $white: mc-color($background, background);
+    $background-color: mc-color($background, background);
     $text: mc-color($foreground, text);
     $divider: mc-color($foreground, divider);
     $hint-text: mc-color($foreground, hint-text);
 
     .docs-navbar-header {
         box-shadow: 0 1px $divider;
-        background: $white;
+        background: $background-color;
 
         .docs-navbar-dropdown__trigger { color: $text; }
     }
 
+    .docs-navbar-logo {
+        color: $text;
+    }
+
     .docs-navbar-version {
         color: $hint-text;
 

diff --git a/packages/docs/src/app/components/navbar/navbar.component.ts b/packages/docs/src/app/components/navbar/navbar.component.ts
@@ -1,12 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2 } from '@angular/core';
 
 
 @Component({
     selector: 'navbar',
     templateUrl: './navbar.template.html',
     styleUrls: ['./navbar.scss']
 })
-
 export class NavbarComponent {
     // TODO fetch real data instead
     versions = [{number: '5.1', date: '15 октября', bold: true},
@@ -22,14 +21,27 @@ export class NavbarComponent {
     curVerIndex = this.versions[0].number;
     languages = ['Русский язык', 'Английский язык'];
     curLanguage = this.languages[0];
-    themes = ['Светлая тема', 'Темная тема'];
+    themes = [
+        {
+            theme: 'default',
+            name: 'Светлая тема',
+            className: 'theme-default'
+        },
+        {
+            theme: 'dark',
+            name: 'Темная тема',
+            className: 'theme-dark'
+        }
+    ];
     curTheme = this.themes[0];
     // TODO Эти значения временные, надо определиться с постоянными и заменить ими текущие значения.
     colors = ['#2f80ed', '#333491', '#07804e', '#eaaf00'];
     activeColor = '#2f80ed';
 
     iconFont = '20px';
 
+    constructor(private renderer: Renderer2) {}
+
     setVersion(version) {
         this.curVerIndex = version;
     }
@@ -40,10 +52,22 @@ export class NavbarComponent {
 
     setTheme(i) {
         this.curTheme = this.themes[i];
+        this.changeThemeOnBody();
     }
 
     setColor(i) {
         this.activeColor = this.colors[i];
     }
 
+    private changeThemeOnBody() {
+
+        if (this.curTheme) {
+            for (const theme of this.themes) {
+                this.renderer.removeClass(document.body, theme.className);
+            }
+
+            this.renderer.addClass(document.body, this.curTheme.className);
+        }
+    }
+
 }
diff --git a/packages/docs/src/app/components/navbar/navbar.template.html b/packages/docs/src/app/components/navbar/navbar.template.html
@@ -45,13 +45,13 @@
 
     <div class="docs-navbar-dropdown">
         <a class="docs-navbar-dropdown__trigger" [mcDropdownTriggerFor]="themeDropdown">
-            <span>{{curTheme}}</span>
+            <span>{{curTheme.name}}</span>
             <i mc-icon="mc-angle-down-M_16" class="docs-navbar-dropdown__icon"></i>
         </a>
 
         <mc-dropdown #themeDropdown="mcDropdown">
             <button mc-dropdown-item *ngFor="let theme of themes; let i = index" (click)="setTheme(i)">
-                {{theme}}
+                {{theme.name}}
             </button>
         </mc-dropdown>
     </div>

diff --git a/packages/docs/src/app/components/sidenav/_sidenav-theme.scss b/packages/docs/src/app/components/sidenav/_sidenav-theme.scss
@@ -1,20 +1,24 @@
 @mixin mc-sidenav-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
-    $white: mc-color($background, background);
+    $background-color: mc-color($background, background);
     $text: mc-color($foreground, text);
     $is-dark-theme: map-get($theme, is-dark);
     $hover-color: mc-color($background, hover);
 
     .nav {
-        background-color: $white;
+        background-color: $background-color;
+        color: $text;
 
-        &__trigger:hover { background: $hover-color; }
+        &__trigger {
+            color: $text;
+
+            &:hover { background: $hover-color; }
+        }
 
         &__trigger-icon { color: $text; }
 
         &__item {
-            color: $text;
 
             &.docs-component-viewer-sidenav-item-selected,
             &:hover { background: $hover-color; }

diff --git a/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss b/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss
@@ -1,59 +1,19 @@
 @mixin example-viewer-theme($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
-    $is-dark: map-get($theme, is-dark);
-    $color: mc-color($primary);
-    $color_hover: mc-color($primary, if($is-dark, lighter, darker));
+    $divider: mc-color($foreground, divider);
+    $hint-text: mc-color($foreground, hint-text);
 
-    example-viewer {
-        .docs-example-viewer-wrapper {
-            border: 1px solid rgba(mc-color($foreground, secondary-text), 0.03);
-            box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
-            margin: 4px;
-        }
-
-        .docs-example-viewer-title {
-            color: mc-color($foreground, secondary-text);
-            background: rgba(mc-color($foreground, secondary-text), 0.03);
-        }
-
-        .docs-example-source-copy {
-            color: mc-color($foreground, hint-text);
-            right: 8px;
-
-            [dir='rtl'] & {
-                right: auto;
-                left: 8px;
-            }
-        }
-
-        .docs-example-source {
-            border-bottom: 1px solid mc-color($foreground, divider);
-            overflow: auto;
-        }
-
-        .docs-example-viewer-body {
-            border: 1px solid mc-color($foreground, divider);
-        }
-
-        .docs-example-source_copy {
-            color: $color;
-
-            &:focus {
-                outline: none;
-            }
+    .docs-example-source-shadow {
+        background: linear-gradient(0deg, rgba($divider,1) 0%, rgba($divider,0.5) 50%, rgba($divider,0) 100%);
+    }
 
-            &:visited {
-                color: $color;
-            }
+    .docs-example-numbers {
+        background-color: fade_out($divider, 0.5);
+        color: $hint-text;
+    }
 
-            &:hover {
-                color: $color_hover;
-            }
+    .docs-example-source {
+        background-color: $divider;
 
-        }
     }
 }
diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.scss b/packages/docs/src/app/shared/example-viewer/example-viewer.scss
@@ -3,12 +3,6 @@
     padding: 20px 0 0;
 }
 
-.docs-example-viewer-wrapper {
-    h3 {
-        margin-top: 10px;
-    }
-}
-
 .docs-example-source-shadow {
     position: absolute;
     bottom: 0;
@@ -17,7 +11,6 @@
     height: 44px;
     width: 100%;
     opacity: 1;
-    background: linear-gradient(0deg, rgba(234,236,241,1) 0%, rgba(234,236,241,0.5) 50%, rgba(234,236,241,0) 100%);
 
     &_hidden {
         opacity: 0;
@@ -79,9 +72,6 @@
 }
 
 .docs-example-numbers {
-    $color: #eaedf1;
-    background-color: fade_out($color, 0.5);
-    color: #8c949e;
     text-align: right;
     width: 44px;
     padding: 12px 8px;
@@ -90,7 +80,6 @@
 
 .docs-example-source {
     position: relative;
-    background-color: #eaedf1;
     overflow-y: hidden;
     display: flex;
     margin: 0;

diff --git a/packages/docs/src/index.html b/packages/docs/src/index.html
@@ -14,7 +14,7 @@
           rel="stylesheet">
 </head>
 
-<body class="docs-app-background">
+<body class="docs-app-background theme-default">
     <docs-app></docs-app>
 </body>
 </html>
diff --git a/packages/docs/src/main.scss b/packages/docs/src/main.scss
@@ -10,54 +10,46 @@
 @import 'app/components/anchors/anchors-theme';
 @import 'app/components/navbar/navbar-theme';
 @import 'app/components/footer/footer-theme';
+@import 'app/components/main-layout/main-layout-theme';
 @import 'app/components/sidenav/sidenav-theme';
 @import 'app/components/component-viewer/component-overview-theme';
 @import 'app/shared/stackblitz/stackblitz-button-theme';
 @import 'app/shared/example-viewer/example-viewer-theme';
 
-$primary: mc-palette($mc-blue, 400, 500, 600);
-$second: mc-palette($mc-grey, 100, 300, 400);
-$error: mc-palette($mc-red, 60, 400, 500);
-
-$info: mc-palette($mc-blue, 60, 200, 400);
-$success: mc-palette($mc-green, 60, 200, 400);
-$warning: mc-palette($mc-yellow, 60, 200, 400);
-
-$theme: mc-light-theme($primary, $second, $error, $info, $success, $warning);
-
-$config: mc-typography-config();
-
 // Include all typography for the components.
 @include mc-core();
 
-// Include all theme styles for the components.
-@include mosaic-theme($theme);
-
-@include mosaic-docs-app-theme($theme);
-
-@include layout-padding-margin();
-
-@include mc-navbar-theme($theme);
+$typography: mc-typography-config();
+
+@include mc-footer-typography($typography);
+@include docs-markdown-typography($typography);
+@include docs-stackblitz-typography($typography);
+
+@mixin docs-component-theme($theme) {
+    @include mosaic-theme($theme);
+    @include mosaic-docs-app-theme($theme);
+    @include layout-padding-margin();
+    @include mc-anchors-theme($theme);
+    @include mc-navbar-theme($theme);
+    @include mc-footer-theme($theme);
+    @include mc-main-layout-theme($theme);
+    @include mc-sidenav-theme($theme);
+    @include mc-component-viewer-theme($theme);
+    @include docs-markdown-theme($theme);
+    @include docs-stackblitz-theme($theme);
+    @include example-viewer-theme($theme);
+}
 
-@include mc-footer-theme($theme);
-
-@include mc-footer-typography($config);
-
-@include mc-component-viewer-theme($theme);
-
-@include docs-markdown-theme($theme);
-
-@include docs-markdown-typography($config);
-
-@include docs-stackblitz-theme($theme);
-
-@include docs-stackblitz-typography($config);
-
-@include example-viewer-theme($theme);
+// Include all theme styles for the components.
 
-@include mc-anchors-theme($theme);
+@import './styles/theme-default';
+@import './styles/theme-dark';
 
-@include mc-sidenav-theme($theme);
+.theme-default {
+    @include docs-component-theme($theme);
+}
 
-@include mc-sidenav-typography($config);
+.theme-dark {
+    @include docs-component-theme($dark-theme);
+}
 
diff --git a/packages/docs/src/styles/_markdown.scss b/packages/docs/src/styles/_markdown.scss
@@ -64,18 +64,17 @@
 
 @mixin docs-markdown-theme($theme) {
     $primary: map-get($theme, primary);
-    $second: map-get($theme, second);
     $foreground: map-get($theme, foreground);
-
     $is-dark: map-get($theme, is-dark);
 
+    $text: mc-color($foreground, text);
     $color: mc-color($primary);
     $color_hover: mc-color($primary, if($is-dark, lighter, darker));
     $color_disabled: mc-color($foreground, disabled-text);
     $fg-default: mc-color($foreground, text);
 
     .docs-header-link {
-        color: map-get($second, 700);
+        color: $text;
     }
 
     .docs-markdown {