Merge pull request #26 from woocommerce/brand-update

Update look & feel based on new brand and other docs sites

Author: jorgeatorres

data/templates/woocommerce/components/back-to-top.css.twig

@@ -2,12 +2,13 @@
     position: fixed;
     bottom: 2rem;
     font-size: 2.5rem;
-    opacity: .25;
+    opacity: 1.0;
     transition: all .3s ease-in-out;
     right: 2rem;
+    color: var(--primary-color-lighten);
 }
 
 .phpdocumentor .phpdocumentor-back-to-top:hover {
-    color: var(--link-color-primary);
-    opacity: 1;
+    color: var(--primary-color-darken);
+    opacity: 1.0;
 }

data/templates/woocommerce/components/header.html.twig

@@ -1,22 +1,21 @@
 <header class="phpdocumentor-top-header">
     <section class="phpdocumentor-section">
         <div class="site-branding">
-            <a class="site-logo" href="{{ path("/index.html") }}"><img width="180" src="{{ path('images/logo.svg') }}" alt="WooCommerce" /></a>
+            <a class="site-logo" href="{{ path("/index.html") }}"><img src="{{ path('images/logo.png') }}" alt="WooCommerce" /></a>
         </div>
         <nav class="main-navigation">
             <ul>
                 <li><a href="{{ path('hooks/hooks.html') }}">Hooks Reference</a></li>
-                <li><a href="https://docs.woocommerce.com/">Documentation</a></li>
+                <li><a href="https://developer.woocommerce.com/docs/">Documentation</a></li>
                 <li><a href="https://woocommerce.github.io/woocommerce-rest-api-docs/">REST API Docs</a></li>
-                <li><a href="https://woocommerce.com/careers/?utm_source=woocommerce+core+code+reference&utm_medium=devdocs&utm_campaign=woo+careers" target="_blank">We're hiring!</a></li>
             </ul>
         </nav>
     </section>
 </header>
 
 <div class="phpdocumentor-header">
     <section class="phpdocumentor-section">
-        <h1 class="phpdocumentor-title">{{ project.name }}</h1>
+        <h1 class="phpdocumentor-title"><a href="{{ path("/index.html") }}">{{ project.name }}</a></h1>
         {{ include('components/search.html.twig') }}
     </section>
 </div>

data/templates/woocommerce/components/sidebar.css.twig

@@ -26,7 +26,6 @@
 }
 
 .phpdocumentor .phpdocumentor-sidebar a:hover {
-    padding-left: 5px;
     font-weight: 600;
 }
 
@@ -42,8 +41,9 @@
     font-size: var(--text-md);
     margin-bottom: var(--spacing-xs);
     color: var(--link-color-primary);
-    font-weight: 600;
+    font-weight: 700;
     border-left: 0;
+    text-transform: uppercase;
 }
 
 .phpdocumentor .phpdocumentor-sidebar__root-package,

data/templates/woocommerce/css/custom.css.twig

@@ -46,20 +46,12 @@ abbr[title] {
 
 /* Logo */
 .site-branding {
-    margin: 1.5em 0 1em;
+    margin: 29px 0 0 0;
     text-align: left;
 }
 
-.site-branding a::after {
-    content: 'DOCS';
-    font-family: var(--font-secondary);
-    color: #000;
-    font-size: 20px;
-    font-weight: 700;
-    line-height: 32.5px;
-    vertical-align: top;
-    letter-spacing: -2px;
-    margin-left: 8px;
+.site-branding .site-logo img {
+    width: 204px;
 }
 
 /* Navigation */
@@ -95,12 +87,20 @@ abbr[title] {
 .phpdocumentor-title {
     font-family: var(--font-secondary);
     color: var(--title-text-color);
-    letter-spacing: -1px;
+    letter-spacing: 1px;
     line-height: 1.2;
     text-align: center;
-    padding: 0.67em 0;
-    margin-top: 0;
+    padding: 0;
+    margin: 1.0em 0;
+    font-size: var(--text-xl);
+    font-weight: normal;
+}
+
+.phpdocumentor-title a {
+    text-decoration: none;
+    color: var(--title-text-color);
 }
+
 .phpdocumentor-title small {
     text-shadow: none;
     font-size: var(--text-xxs);
@@ -204,20 +204,21 @@ abbr[title] {
 }
 
 .phpdocumentor-search__field {
-    background-color: #fff;
-    border: 0;
-    border-radius: 50px;
+    background: #f2efec;
+    border: 1px solid var(--primary-color);
+    border-radius: 3px;
     color: #333;
     font-size: 18px;
     line-height: 50px;
-    padding-left: 45px;
-    width: 80%;
-    height: 50px;
+    padding-left: 1.3em;
+    padding-right: 1.3em;
+    width: 50%;
+    height: 40px;
     margin-bottom: 0;
 }
 
 .phpdocumentor-search__field:focus {
-    border: none;
+    border: 1px solid var(--primary-color-darken);
 }
 
 .autoComplete_highlighted {
@@ -336,7 +337,4 @@ main.phpdocumentor::after {
         border-bottom: 1px solid var(--table-separator-color);
     }
 
-    .phpdocumentor-title {
-        font-size: var(--text-xxxxl);
-    }
 }

data/templates/woocommerce/css/variables.css.twig

@@ -1,6 +1,6 @@
 :root {
     /* Typography */
-    --font-primary: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+    --font-primary: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Roboto, Helvetica Neue, Arial, sans-serif;
     --font-secondary: "proxima-nova", sans-serif;
     --line-height--primary: 1.6;
     --letter-spacing--primary: .05rem;
@@ -19,11 +19,11 @@
     --text-xxxxxl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
 
     /* Colors */
-    --primary-color: hsl(267, 38%, 52%);
-    --primary-color-darken: hsl(267, 38%, 52%);
-    --primary-color-darker: hsl(267, 57%, 20%);
-    --primary-color-lighten: hsl(267, 57%, 80%);
-    --primary-color-lighter: hsl(267, 57%, 97%);
+    --primary-color: #720eec;
+    --primary-color-darken: #3c087e;
+    --primary-color-darker:rgb(48, 7, 101);
+    --primary-color-lighten: #b884f8;
+    --primary-color-lighter: #e3cefc;
     --dark-gray: #d1d1d1;
     --light-gray: #f0f0f0;
 
@@ -40,9 +40,9 @@
     --button-color-primary: var(--primary-color);
     --button-text-color: hsl(0, 0%, 33%);
     --button-text-color-primary: white;
-    --popover-background-color: hsla(285, 29%, 97%, 0.9);
-    --link-color-primary: var(--primary-color-darken);
-    --link-hover-color-primary: var(--primary-color-darker);
+    --popover-background-color: #f9f5fe;
+    --link-color-primary: var(--primary-color);
+    --link-hover-color-primary: var(--primary-color-darken);
     --form-field-border-color: var(--dark-gray);
     --form-field-color: #fff;
     --admonition-success-color: var(--primary-color);