Merge pull request #55 from woocommerce/25-01/update-theme

Updated theme for branding changes

Author: zhongruige

docusaurus.config.js

@@ -4,11 +4,11 @@
 // There are various equivalent ways to declare your Docusaurus config.
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
-import {duotoneDark, jettwaveDark, nightOwl, oneDark, themes as prismThemes, vsDark} from 'prism-react-renderer';
+import { duotoneDark, jettwaveDark, nightOwl, oneDark, themes as prismThemes, vsDark } from 'prism-react-renderer';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'Easy automated tests for WordPress plugins and themes - QIT',
+  title: 'Easy automated tests for WooCommerce plugins and themes - QIT',
   favicon: 'img/favicon.ico',
 
   // Set the production url of your site here
@@ -43,7 +43,7 @@ const config = {
           routeBasePath: '/docs/',
           sidebarPath: './sidebars.js',
           editUrl:
-          'https://github.com/woocommerce/qit-documentation/tree/trunk',
+            'https://github.com/woocommerce/qit-documentation/tree/trunk',
         },
         theme: {
           customCss: './src/css/custom.css',

src/css/custom.css

@@ -6,26 +6,26 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #7f54b3;
-  --ifm-color-primary-dark: #7249a4;
-  --ifm-color-primary-darker: #6c459b;
-  --ifm-color-primary-darkest: #59397f;
-  --ifm-color-primary-light: #8d66bb;
-  --ifm-color-primary-lighter: #936fbf;
-  --ifm-color-primary-lightest: #a88bcb;
+  --ifm-color-primary: #6108ce;
+  --ifm-color-primary-dark: #5507b6;
+  --ifm-color-primary-darker: #4b06a3;
+  --ifm-color-primary-darkest: #3d0584;
+  --ifm-color-primary-light: #7220d6;
+  --ifm-color-primary-lighter: #8338de;
+  --ifm-color-primary-lightest: #a066e6;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+/* Dark mode */
 [data-theme='dark'] {
-  --ifm-color-primary: #b99dd5;
-  --ifm-color-primary-dark: #a783ca;
-  --ifm-color-primary-darker: #9d76c4;
-  --ifm-color-primary-darkest: #824fb4;
-  --ifm-color-primary-light: #cbb7e0;
-  --ifm-color-primary-lighter: #d5c4e6;
-  --ifm-color-primary-lightest: #f1ebf6;
+  --ifm-color-primary: #aa7ce2;
+  --ifm-color-primary-dark: #9a64d7;
+  --ifm-color-primary-darker: #8c56cd;
+  --ifm-color-primary-darkest: #7233b6;
+  --ifm-color-primary-light: #bc96e8;
+  --ifm-color-primary-lighter: #c8aae9;
+  --ifm-color-primary-lightest: #e5d3f6;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
@@ -34,16 +34,42 @@
 }
 
 
-[data-theme='light'] .token.qit_command.keyword { color: #e67e22; }
-[data-theme='light'] .token.qit_subcommand { color: #d31bc8; }
-[data-theme='light'] .token.qit_option.option-name { color: #8e44ad; }
-[data-theme='light'] .token.qit_option.option-value { color: #c0392b; }
-[data-theme='light'] .token.qit_argument.variable { color: #1737b0 !important; }
+[data-theme='light'] .token.qit_command.keyword {
+  color: #e67e22;
+}
+
+[data-theme='light'] .token.qit_subcommand {
+  color: #d31bc8;
+}
+
+[data-theme='light'] .token.qit_option.option-name {
+  color: #8e44ad;
+}
+
+[data-theme='light'] .token.qit_option.option-value {
+  color: #c0392b;
+}
 
-[data-theme='dark'] .token.qit_command.keyword { color: #FFB088 !important; }
-[data-theme='dark'] .token.qit_subcommand { color: #FFF; }
-[data-theme='dark'] .token.qit_option.option-name { color: #FFF1D6; }
-[data-theme='dark'] .token.qit_option.option-value { color: #FFA6B8; }
-[data-theme='dark'] .token.qit_argument.variable { color: #89E2FF !important;}
+[data-theme='light'] .token.qit_argument.variable {
+  color: #1737b0 !important;
+}
 
+[data-theme='dark'] .token.qit_command.keyword {
+  color: #FFB088 !important;
+}
+
+[data-theme='dark'] .token.qit_subcommand {
+  color: #FFF;
+}
+
+[data-theme='dark'] .token.qit_option.option-name {
+  color: #FFF1D6;
+}
+
+[data-theme='dark'] .token.qit_option.option-value {
+  color: #FFA6B8;
+}
 
+[data-theme='dark'] .token.qit_argument.variable {
+  color: #89E2FF !important;
+}

src/pages/index.js

@@ -17,7 +17,7 @@ function HomepageHeader() {
                 <Heading as="h1" className="hero__title">
                     <span>Quality Insights Toolkit, or just QIT.</span>
                 </Heading>
-                <p className="hero__subtitle">A testing platform for WordPress plugins and themes.</p>
+                <p className="hero__subtitle">A testing platform for WooCommerce plugins and themes.</p>
                 <div className={styles.buttons}>
                     <Link
                         className="button button--secondary button--lg"

src/pages/index.module.css

@@ -8,7 +8,7 @@
     text-align: center;
     position: relative;
     overflow: hidden;
-    background-color: #7f54b3;
+    background-color: #6108ce;
     color: white;
 }
 
@@ -22,4 +22,4 @@
     display: flex;
     align-items: center;
     justify-content: center;
-}
+}