Revert most of 10Ups changes to modern/tweaks

README.md

@@ -1,49 +1,52 @@
-# Project "Maverick" Review
-
-### Issues must be logged by July 17
-
-Hey team, 
-
-It's time to kick off our formal review of the Maverick theme and report any bugs we discover. Let's make issues on this repository for each bug found. 
-
-[Click here to create an issue →](https://github.com/godaddy/wp-project-maverick/issues/new/choose) 
-
-### Initial Design Review
-Rich will focus on design styles and report any discrepancies from the Invision prototypes and all improper styling that needs to be resolved. There are also labels for each design style that we should use to help organize.   
-
-## Functionality Review
-Functionality wise, 10Up has created a couple accounts for us to use (I'll send the info in Slack) to test around. You may also download/clone the theme from the [10Up GitLab repo](https://gitlab.10up.com/godaddy/godaddy-theme). They've been using `develop` as the base branch (master) and the `staging` branch autodeploys to godaddy.10uplabs.com. After cloning, run `npm start` to install deps and build all the assets.  
-
-```
-$ git clone [email protected]:godaddy/godaddy-theme.git maverick
-$ cd maverick
-$ npm start
+# A WordPress theme for GoDaddy
+
+__Description:__ GoDaddy wanted the ability for a single WordPress theme to encompass several design styles (aka moods). This theme uses the Customizer to apply different design styles based on the user's selection.
+
+Also included within the theme:
+
+* [TGM Plugin Activation](http://tgmpluginactivation.com/) library - used to help onboard users to install necessary plugin dependencies. Including:
+    * [WooCommerce](https://wordpress.org/plugins/woocommerce/) plugin
+	* [CoBlocks](https://wordpress.org/plugins/coblocks/) plugin - Page Builder Gutenberg Blocks
+
+## Asset organization
+
+Since we're dealing with mini-themes (aka design styles) within a theme. Here is an overview of the asset organization:
+
+``` bash
+|—— assets/
+    |—— admin/         Customizer and WP admin assets
+        |—— css/
+        |—— images/
+        |—— js/
+    |-- design-styles/  Each Design Style assets
+        |—— creative-services/
+            |—— css/
+            |—— fonts/
+            |—— images/
+        |—— play/
+        |—— traditional/
+        |—— trendy-shop/
+        |—— welcoming/
+    |—— shared           Global and shared assets
+        |—— css/
+            |—— coblocks/
+            |—— components/
+            |—— config/
+            |—— core-blocks/
+            |—— editor/
+            |—— elements/  Generic HTML element coverage
+            |—— layout/    Layout specific
+            |—— templates/ WordPress template specific
+            |—— utilities/
+            |—— woocommerce/
+            |—— editor-style.css Gutenberg editor styles
+            |—— shared-style.css Imports all of the above
+        |—— images/
+        |—— js/
+            |—— frontend/
+                |—— components/
+                |—— utility/
+                |—— vendor/
+                |—— frontend.js Imports most of the above
+        |—— svg/
 ```
-
-The staging site is a multisite with each design style as its own site.
-
-## Staging sites
-Below you'll find the staging sites for testing the Maverick theme, plus corresponding Invision prototypes of each design style. 
-
-Traditional: 
-https://godaddy.10uplabs.com/traditional/
-https://10up.invisionapp.com/share/QRRHNIT68UV#/screens/357529448
-
-Modern/Creative Services:
-https://godaddy.10uplabs.com/creative-services/
-https://10up.invisionapp.com/share/QRRHNIT68UV#/screens/357529442
-
-Trendy:
-https://godaddy.10uplabs.com/trendy-shop/
-https://10up.invisionapp.com/share/QRRHNIT68UV#/screens/357529454
-
-Welcoming:
-https://godaddy.10uplabs.com/welcoming/
-https://10up.invisionapp.com/share/QRRHNIT68UV#/screens/357529463
-
-Playful:
-https://godaddy.10uplabs.com/play/
-https://10up.invisionapp.com/share/QRRHNIT68UV#/screens/360640620
-
-## 10Up QA Matrix: 
-https://docs.google.com/spreadsheets/d/1g2CspmSgOaIdmQ0vnV5wCGs4G23ntsFpIFAY7dm-HMc/edit#gid=791639588

assets/design-styles/creative-services/css/config/settings.css

@@ -7,61 +7,115 @@
 	--THEME-COLOR-PRIMARY: var(--USER-COLOR-PRIMARY, var(--THEME-COLOR-PRIMARY-DEFAULT));
 
 	/* Hex: #24252f */
-	--THEME-COLOR-SECONDARY-DEFAULT: 235, 13%, 16%;
+	--THEME-COLOR-SECONDARY-DEFAULT: 0, 0%, 41%;
 	--THEME-COLOR-SECONDARY: var(--USER-COLOR-SECONDARY, var(--THEME-COLOR-SECONDARY-DEFAULT));
 
+	--THEME-COLOR-BODY: 0, 0%, 41%;
+	--THEME-COLOR-HEADING: 0, 0%, 12%;
+	--THEME-COLOR-NAV: var(--THEME-COLOR-BODY);
+
+	/* Block spacing. */
+	--theme-block-spacing: 1.15rem;
+	--theme-block-spacing-larger: 1.75rem;
+	--theme-block-spacing-huge: 4rem;
+
+	@media (--large) {
+		--theme-block-spacing: 1.75rem;
+		--theme-block-spacing-larger: 2.3rem;
+		--theme-block-spacing-huge: 8.5rem;
+	}
+
+	--theme-block-padding-x: 1rem;
+
+	/* Widths. */
+	--theme-max-width-base: 680px;
+	--theme-max-width-wide: 1280px;
+	--theme-max-width-full: 1440px;
+
+	/* Page entry header spacing. */
+	--theme-entryheader-spacing-top: 4rem;
+	--theme-entryheader-spacing-bottom: 7rem;
+
+	@media (--large) {
+		--theme-entryheader-spacing-bottom: 8.5rem;
+	}
+
+	/* Foooter spacing. */
+	--theme-footer-spacing-top: 8.5rem;
 
 	/* Spacing units. */
 	--theme-spacing-unit: 0.5rem;
 	--theme-spacing-unit-2: 1rem;
+	--theme-spacing-unit-3: 1.5rem;
 	--theme-spacing-unit-4: 2rem;
 	--theme-spacing-unit-5: 2.5rem;
 	--theme-spacing-unit-6: 3rem;
 	--theme-spacing-unit-15: 7.5rem;
 
-	/* Max widths. */
-	--theme-max-width-base: 720px;
-	--theme-max-width-wide: 1276px;
-	--theme-max-width-full: 1440px;
-
 	/***************************************************************
 	* TYPOGRAPHY
 	***************************************************************/
 
 	/* <body> settings */
-	--theme-body-font-size: 1.0625rem;
-	--theme-body-line-height: 2.25em;
+	--theme-body-font-size: 1rem;
+	--theme-body-line-height: 1.9em;
 	--theme-body-font-family: "Arimo", sans-serif;
 
 	/* Headings */
 	--theme-heading-font-family: "Montserrat", sans-serif;
 	--theme-heading-line-height: var(--line-height-heading);
 
+	--theme-heading-content-space-above: 1rem;
+	--theme-heading-content-space-below: 0;
+
 	/* Heading font size */
 	--theme-h1-font-size: 2.5rem;
-	--theme-h2-font-size: 2.18rem;
+	--theme-h2-font-size: 2rem;
 	--theme-h3-font-size: 1.75rem;
-	--theme-h4-font-size: 1.75rem;
-	--theme-h5-font-size: 1.5rem;
-	--theme-h6-font-size: 1.25rem;
+	--theme-h4-font-size: 1.65rem;
+	--theme-h5-font-size: 1.35rem;
+	--theme-h6-font-size: 1.15rem;
 
 	@media (--large) {
-		--theme-h1-font-size: 3.5rem;
+		--theme-h1-font-size: 3.25rem;
 		--theme-h2-font-size: 2.5rem;
 		--theme-h3-font-size: 2rem;
+
+		--theme-heading-content-space-above: 1.5rem;
+		--theme-heading-content-space-below: -0.375rem;
+	}
+
+	/* Blockquote */
+	--theme-quote-font-size: 1.9rem;
+	--theme-quote-line-height: 1.36;
+	--theme-quote-font-weight: 700;
+
+	--theme-quote-large-font-size: 2.25rem;
+	--theme-quote-large-line-height: 1.3;
+	--theme-quote-large-font-style: italic;
+	--theme-quote-large-padding: 0.9rem 0 0 2rem;
+	--theme-quote-large-cite-margin-left: 1.25rem;
+
+	--theme-quote-large-border-width: 0.45rem;
+	--theme-quote-large-border-style: solid;
+	--theme-quote-large-border: var(--theme-quote-large-border-width) var(--theme-quote-large-border-style);
+
+	@media (--large) {
+		--theme-quote-font-size: 2.15rem;
+		--theme-quote-large-font-size: 2.75em;
 	}
 
 	/* Heading colors */
-	--theme-h1-color: var(--THEME-COLOR-SECONDARY);
-	--theme-h2-color: var(--THEME-COLOR-SECONDARY);
-	--theme-h3-color: var(--THEME-COLOR-SECONDARY);
-	--theme-h4-color: var(--THEME-COLOR-SECONDARY);
-	--theme-h5-color: var(--THEME-COLOR-SECONDARY);
-	--theme-h6-color: var(--THEME-COLOR-SECONDARY);
+	--theme-h1-color: var(--THEME-COLOR-HEADING);
+	--theme-h2-color: var(--THEME-COLOR-HEADING);
+	--theme-h3-color: var(--THEME-COLOR-HEADING);
+	--theme-h4-color: var(--THEME-COLOR-HEADING);
+	--theme-h5-color: var(--THEME-COLOR-HEADING);
+	--theme-h6-color: var(--THEME-COLOR-HEADING);
 
 	/* Body color */
-	--theme-body-color: var(--THEME-COLOR-SECONDARY);
-	--theme-body-font-color: var(--THEME-COLOR-SECONDARY);
+	--theme-body-color: var(--THEME-COLOR-BODY);
+	--theme-body-font-color: var(--THEME-COLOR-BODY);
 	--theme-body-background-color: var(--THEME-COLOR-PRIMARY);
 
 	/* Links */
@@ -104,18 +158,19 @@
 	--theme-site-search__toggle-color: var(--THEME-COLOR-SECONDARY);
 	--theme-site-search__toggle-color-interactive: var(--THEME-COLOR-SECONDARY);
 	--theme-site-search__toggle-color-active: var(--THEME-COLOR-SECONDARY);
-	--theme-site-search__toggle-height: 24px;
-	--theme-site-search__toggle-width: 24px;
+	--theme-site-search__toggle-height: 22px;
+	--theme-site-search__toggle-width: 22px;
 	--theme-site-search__toggle-transition-duration: var(--transition-duration);
 	--theme-site-search__toggle-easing-function: var(--transition-easing-function);
 	--theme-site-search__toggle-spacing-unit: var(--spacing-unit);
 
 	--theme-site-search-z-index: 2;
 
 	/* shared/css/components/header/primary-menu.css */
-	--theme-primary-menu-link-color: var(--THEME-COLOR-SECONDARY);
+	--theme-primary-menu-link-color: var(--THEME-COLOR-BODY);
 	--theme-primary-submenu-bg-color: var(--THEME-COLOR-SECONDARY);
 	--theme-primary-submenu-link-color: var(--THEME-COLOR-SECONDARY);
+	--theme-primary-menu-link-hover-active-color: 0, 0%, 12%;
 
 	@media (--large) {
 		--theme-primary-submenu-link-color: var(--THEME-COLOR-PRIMARY);
@@ -149,27 +204,27 @@
 	***************************************************************/
 
 	/* SHARED: Vertical button padding */
-	--theme-button-block-vertical-spacing-unit: 1.1rem;
+	--theme-button-block-vertical-spacing-unit: 1.5rem;
 
 	/* SHARED: Horizontal button padding */
 	--theme-button-block-horizontal-spacing-unit: 1.5rem;
 
 	/* SHARED: Line height */
-	--theme-button-block-line-height: 1.125;
+	--theme-button-block-line-height: 1;
 
 	/* PRIMARY BUTTON: Font color */
 	--theme-button-block-color: var(--THEME-COLOR-PRIMARY); /* #fff */
 	--theme-button-block-color-interactive: var(--THEME-COLOR-PRIMARY); /* #fff */
 
 	/* PRIMARY BUTTON: Font size */
-	--theme-button-block-font-size: 1.0625rem;
+	--theme-button-block-font-size: 0.85rem;
 
 	/* PRIMARY BUTTON: Font weight */
 	--theme-button-block-font-weight: 700;
 
 	/* PRIMARY BUTTON: Background color */
-	--theme-button-block-background-color: var(--THEME-COLOR-SECONDARY);
-	--theme-button-block-background-color-interactive: var(--THEME-COLOR-SECONDARY);
+	--theme-button-block-background-color: var(--THEME-COLOR-HEADING);
+	--theme-button-block-background-color-interactive: var(--THEME-COLOR-HEADING);
 
 	/* PRIMARY BUTTON: Border */
 	--theme-button-block-border: none;
@@ -180,10 +235,10 @@
 
 	/* PRIMARY BUTTON: Box shadow (use none to remove) */
 	--theme-button-block-shadow: none;
-	--theme-button-block-shadow-interactive: 0 0 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.12);
+	--theme-button-block-shadow-interactive: none;
 
 	/* PRIMARY BUTTON: Padding */
-	--theme-button-block-padding: var(--theme-button-block-vertical-spacing-unit) var(--theme-button-block-horizontal-spacing-unit);
+	--theme-button-block-padding: var(--theme-button-block-vertical-spacing-unit) var(--theme-button-block-horizontal-spacing-unit) calc(var(--theme-button-block-vertical-spacing-unit) - 1px);
 
 	/* PRIMARY BUTTON: Text decoration */
 	--theme-button-block-text-decoration: none;
@@ -275,13 +330,6 @@
 	--theme-image-caption-text-color: var(--THEME-COLOR-SECONDARY);
 	--theme-block-separator-color: var(--THEME-COLOR-SECONDARY);
 
-	--theme-quote-font-size: 1.9rem;
-
-	@media (--large) {
-		--theme-quote-font-size: 2.15rem;
-		--theme-quote-large-font-size: 2.75rem;
-	}
-
 	/***************************************************************
 	* CoBlocks blocks
 	***************************************************************/
@@ -344,9 +392,9 @@
 
 	/* Textarea */
 	--theme-textarea-color: var(--THEME-COLOR-SECONDARY);
-	--theme-textarea-stroke-color: 210, 6%, 63%; /* #9aa0a6 */
-	--theme-textarea-color-focus: 225, 6%, 13%; /* #202124 */
-	--theme-textarea-stroke-color-focus: 225, 6%, 13%; /* #202124 */
+	--theme-textarea-stroke-color: var(--THEME-COLOR-SECONDARY);
+	--theme-textarea-color-focus: var(--THEME-COLOR-SECONDARY);
+	--theme-textarea-stroke-color-focus: var(--THEME-COLOR-SECONDARY);
 	--theme-textarea-color-background: 0, 0%, 100%; /* #fff */
 
 	/* Check and Radio SVG trick */

assets/design-styles/creative-services/css/creative-services.css

@@ -17,7 +17,6 @@
 
 /* CoBlocks customizations */
 @import url("coblocks/carousel.css");
-@import url("coblocks/gallery.css");
 @import url("coblocks/hero.css");
 @import url("coblocks/media-card.css");
 @import url("coblocks/pricing-table.css");

assets/design-styles/creative-services/css/editor-style.css

@@ -16,7 +16,6 @@
 
 /* CoBlocks customizations */
 @import url("coblocks/carousel.css");
-@import url("coblocks/gallery.css");
 @import url("coblocks/hero.css");
 @import url("coblocks/media-card.css");
 @import url("coblocks/pricing-table.css");

assets/design-styles/creative-services/css/elements/headings.css

@@ -8,9 +8,7 @@ h2 {
 }
 
 h3 {
-	font-weight: 400;
-	letter-spacing: 1px;
-	line-height: 1.36;
+	letter-spacing: -0.01em;
 }
 
 h4 {