feat(docs): updating component's colors (#238)

positive-js · Sep 27, 2019 · fb885b8 · fb885b8
1 parent 46c6298
commit fb885b8
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 25 deletions.
diff --git a/packages/docs/src/app/components/anchors/_anchors-theme.scss b/packages/docs/src/app/components/anchors/_anchors-theme.scss
@@ -0,0 +1,22 @@
+@mixin mc-anchors-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $text: mc-color($foreground, text);
+    $primary: map_get($theme, primary);
+    $primary_500: mc-color($primary, 500);
+    $shadow: mc-color($foreground, less-contrast-text);
+
+    .anchors-menu__list-element {
+        color: $text;
+
+        &:hover { @include box-shadow( inset 3px 0 0 rgba($shadow, 0.2) ); }
+
+        &_active, &_active:hover { @include box-shadow( inset 3px 0 0 $primary_500 ); }
+    }
+}
+
+@mixin box-shadow ($shadow) {
+    -webkit-box-shadow: $shadow;
+    -moz-box-shadow: $shadow;
+    -o-box-shadow: $shadow;
+    box-shadow: $shadow;
+}
diff --git a/packages/docs/src/app/components/anchors/anchors.scss b/packages/docs/src/app/components/anchors/anchors.scss
@@ -1,10 +1,3 @@
-@mixin box-shadow ($shadow) {
-    -webkit-box-shadow: $shadow;
-    -moz-box-shadow: $shadow;
-    -o-box-shadow: $shadow;
-    box-shadow: $shadow;
-}
-
 .anchors-menu {
     position: fixed;
     top: 64px;
@@ -23,11 +16,6 @@
         padding: 6px 16px;
         line-height: 20px;
         font-size: 15px;
-        color: #2f2f33;
-
-        &:hover { @include box-shadow( inset 3px 0 0 rgba(140,148,158,0.2) ); }
-
-        &_active, &_active:hover { @include box-shadow( inset 3px 0 0 #2f80ed ); }
     }
 }
 
diff --git a/packages/docs/src/app/components/sidenav/_sidenav-theme.scss b/packages/docs/src/app/components/sidenav/_sidenav-theme.scss
@@ -0,0 +1,29 @@
+@mixin mc-sidenav-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+    $white: 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;
+
+        &__trigger:hover { background: $hover-color; }
+
+        &__trigger-icon { color: $text; }
+
+        &__item {
+            color: $text;
+
+            &.docs-component-viewer-sidenav-item-selected,
+            &:hover { background: $hover-color; }
+
+            &:active, &:focus { background: $hover-color; }
+        }
+    }
+}
+
+@mixin mc-sidenav-typography($config) {
+    .nav { @include mc-typography-level-to-styles($config, body); }
+}
diff --git a/packages/docs/src/app/components/sidenav/sidenav.scss b/packages/docs/src/app/components/sidenav/sidenav.scss
@@ -1,6 +1,3 @@
-$hover-color: #90a3bd;
-$text-color: #2f2f33;
-
 @mixin transition ($transition) {
     -webkit-transition: $transition;
     -moz-transition: $transition;
@@ -19,8 +16,6 @@ $text-color: #2f2f33;
     max-height: 100%;
     width: 360px;
 
-    font-family: Roboto, -apple-system, Arial, sans-serif;
-    background-color: #f5f6f9;
     padding: {
         top: 10px;
         bottom: 10px;
@@ -48,28 +43,20 @@ $text-color: #2f2f33;
         padding: 14px 32px 6px 32px;
 
         .nav__trigger-icon {
-            color: $text-color;
             @include transition( transform 225ms cubic-bezier(0.4,0.0,0.2,1) );
 
             &_expanded { &_collapsed { transform: rotate(0); } }
 
             &_collapsed { transform: rotate(-180deg); }
         }
 
-        &:hover { background: fade-out($hover-color, 0.85); }
     }
 
     &__item {
         line-height: 20px;
         font-size: 15px;
-        color: $text-color;
         padding: 6px 32px;
 
-        &.docs-component-viewer-sidenav-item-selected,
-        &:hover { background: fade-out($hover-color, 0.85); }
-
-        &:active, &:focus { background: fade-out($hover-color, 0.8); }
-
         & > a {
             position: relative;
             text-decoration: none;

diff --git a/packages/docs/src/main.scss b/packages/docs/src/main.scss
@@ -7,8 +7,10 @@
 @import './styles/markdown';
 @import './styles/mosaic-fixed';
 @import "~@ptsecurity/mosaic-icons/dist/styles/mc-icons.css";
+@import 'app/components/anchors/anchors-theme';
 @import 'app/components/navbar/navbar-theme';
 @import 'app/components/footer/footer-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';
@@ -53,3 +55,9 @@ $config: mc-typography-config();
 
 @include example-viewer-theme($theme);
 
+@include mc-anchors-theme($theme);
+
+@include mc-sidenav-theme($theme);
+
+@include mc-sidenav-typography($config);
+