Color and typography edits (digital-asset#12609)

CHANGELOG_BEGIN CHANGELOG_END
kgeonw · Jan 26, 2022 · 7305a8c · 7305a8c
1 parent 4a6729e
commit 7305a8c
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 46 deletions.
diff --git a/docs/theme/sass/_theme_highlighter.sass b/docs/theme/sass/_theme_highlighter.sass
@@ -1,6 +1,6 @@
 .rst-content
   pre.literal-block, div[class^="highlight"]
-    background-color: #171B26
+    background-color: $da-dark-blue
     overflow-x: auto
     margin: 35px 0 35px -47px
 
@@ -106,7 +106,7 @@
 
 
   .highlight, .highlight:last-child
-    background-color: #171B26
+    background-color: $da-dark-blue
     color: #eeeeee
     margin-top: 35px
     margin-bottom: 35px

diff --git a/docs/theme/sass/_theme_layout.sass b/docs/theme/sass/_theme_layout.sass
@@ -41,7 +41,7 @@ html
 
 .rst-content code
   color: $text-dark
-  background-color: $blue-lighter
+  background-color: $turqoise
   font-family: $code-font-family
   font-size: 14px
   position: relative
@@ -302,7 +302,6 @@ html
 .wy-nav-top
   display: none
   background: $link-color
-  color: $white
   padding: $gutter / 4 $gutter / 2
   position: relative
   text-align: center
@@ -356,6 +355,7 @@ footer
   color: $footer-color
 
   p
+    font-size: 12px
     margin-bottom: $base-line-height / 2
 
   span.commit code
@@ -507,7 +507,6 @@ body
 
     p
       margin-bottom: 18px
-      line-height: inherit
       font-weight: $weight-body
 
       &:last-child
@@ -712,8 +711,6 @@ body
     top: 0
     position: absolute
     right: 30px
-    font-size: 20pt
-    font-weight: $weight-body
     display: flex
     align-items: center
     color: $text-dark
@@ -736,22 +733,17 @@ body
         padding-left: 45px
         align-items: baseline
         border-top: none
-        color: $text-dark
         position: relative
         top: initial
         left: initial
         right: initial
-        font-size: 20pt
         margin-top: 0
 
         +media($desktop-wide)
-          font-size: 20pt
 
         .nice-select
-          font-size: 20pt
 
           +media($desktop-wide)
-            font-size: 20pt
 
           &:after
             background-size: 20px
@@ -764,9 +756,7 @@ body
       border: none
       outline: none
       box-shadow: none
-      color: $text-dark
       text-transform: uppercase
-      font-weight: $weight-title
       padding: 0
 
       &:after
@@ -793,8 +783,7 @@ body
 
 
 .wy-nav-side
-  background-color: $menu-background-color
-
+  background-color: $nav-background-color
   padding-top: 30px
 
   +media($mobile)
@@ -886,7 +875,7 @@ body
         a.reference
           color: $nav-caption
           height: 44px
-          font-size: 18px
+          font-size: 16px
           padding-left: 0.7 * $gutter / 18 * 16
 
           display: block
@@ -1248,7 +1237,7 @@ body
           margin-top: 8px
 
           .highlighted
-            color: $blue-lighter
+            color: $turqoise
             background: $serach-highlighted
             display: inline-block
             font-weight: $weight-body
@@ -1315,7 +1304,6 @@ body
     z-index: 200
     width: 100%
     height: 100%
-    background-color: $white
 
     +media($tablet)
       -webkit-box-shadow: -2px 2px 3px 0px $gray-lighter
@@ -1438,7 +1426,6 @@ body
       padding-top: 24px
       padding-bottom: 19px
       display: block
-      background: $white
       width: 100%
       z-index: 300
 
@@ -1462,7 +1449,6 @@ body
       padding-right: 30px
       padding-top: 60px
       width: 380px
-      background-color: $white
 
 
 +media($tablet)
@@ -1890,7 +1876,7 @@ body
 
         li
           margin-top: $base-line-height / 4
-          color: #4E5F8B
+          color: $gray
           position: relative
 
           p
@@ -1966,7 +1952,7 @@ body
           transform: translate(-2em, -50%)
           width: 100%
           height: 100%
-          background-color: $blue-lighter !important
+          background-color: $turqoise !important
           color: $text-dark
           z-index: -1
           border-radius: 3em

diff --git a/docs/theme/sass/_theme_nice_select.sass b/docs/theme/sass/_theme_nice_select.sass
@@ -25,8 +25,6 @@ $arrow_color: $gray !default
   display: block
   float: left
   font-family: inherit
-  font-size: $font_size
-  font-weight: $weight-body
   height: $input_height
   line-height: $input_height + 1
   outline: none

diff --git a/docs/theme/sass/_theme_variables.sass b/docs/theme/sass/_theme_variables.sass
@@ -53,7 +53,7 @@ $nav-link-color:                      $text-dark
 $nav-link-color-visited:              $purple
 $nav-link-color-hover:                $text-medium
 $nav-link-color-alt:                  hsl(33, 100%, 51%)
-$nav-caption:                         $gray-dark
+$nav-caption:                         $gray
 $nav-shadow:                          $gray-lighter
 
 // Sidebar colors
@@ -71,7 +71,7 @@ $code-font-family:                    "Source Code Pro", "Courier New", Courier,
 $btn-font-family:                     "Roboto Mono", "Lato", Helvetica,Arial,sans-serif
 
 $weight-title:                        400
-$weight-body:                         300
-$weight-bold:                         400
+$weight-body:                         400
+$weight-bold:                         500
 $weight-code:                         400
 $weight-btn:                          400
diff --git a/docs/theme/sass/_wy_variables_overwrite.sass b/docs/theme/sass/_wy_variables_overwrite.sass
@@ -1,26 +1,27 @@
 // Colors
-$blue:                            #6292f7
+$blue:                            #4161E1
 $purple:                          #22175b
-$blue-lighter:                    #d1fbfc
+$turqoise:                        #A7F6FF
+$da-dark-blue:                    #232F40
 $red:                             #ffcccc
 $green:                           #00e0a4
 $yellow:                          #fff795
-$gray-dark:                       #232f40
-$gray:                            #7b95a0
-$gray-lighter:                    #f7f8fb
+$gray:                            #22252A
+$gray-lighter:                    #F7F9FC
+$white:                           #FDFDFD
 
 
 // Colors
 $nav-background-color:            $gray-lighter
 
 $admonition-attention:            $yellow
 $admonition-danger-error:         $red
-$admonition-hint:                 $blue-lighter
-$admonition-note:                 $blue-lighter
+$admonition-hint:                 $turqoise
+$admonition-note:                 $turqoise
 
 // Menu
-$menu-background-color:           $white
-$menu-background-hover-color:     $blue-lighter
+$menu-background-color:           $gray-lighter
+$menu-background-hover-color:     $turqoise
 $section-background-color:        $white
 $nav-desktop-width:               380px
 $menu-logo-color:                 $blue
@@ -29,14 +30,14 @@ $content-menu-shadow:             $gray
 $table-shadow:                    $gray
 
 // Typography
-$text-basic:                      $gray-dark
-$search-basic:                    $gray-dark
-$text-dark:                       $gray-dark
+$text-basic:                      $gray
+$search-basic:                    $gray
+$text-dark:                       $gray
 $text-medium:                     $blue
-$text-light:                      $blue-lighter
-$search-header:                   $gray-dark
-$search-results:                  $gray-dark
-$serach-highlighted:              $blue-lighter
+$text-light:                      $turqoise
+$search-header:                   $gray
+$search-results:                  $gray
+$serach-highlighted:              $turqoise
 $header-line:                     $blue
 $version-switch-hover:            $blue
 $link-color:                      $blue

diff --git a/navigator/frontend/src/ui-core/src/Guide/index.tsx b/navigator/frontend/src/ui-core/src/Guide/index.tsx
@@ -32,12 +32,12 @@ const Logo = styled.div`
 `;
 
 const Title = styled.h1`
-  font-weight: 200;
+  font-weight: 400;
   font-size: 3rem;
 `;
 
 const GuideDescription = styled(ReactMarkdown)`
-  font-weight: 300;
+  font-weight: 400;
 `;
 
 const SectionWrapper = styled.section`