Merge pull request #2233 from Automattic/try/seedlet/color-annotations

Seedlet: Begin adding color annotations

seedlet/assets/css/ie.css

@@ -3732,43 +3732,43 @@ table th {
 }
 
 .has-primary-color[class] {
-	color: #000000 !important;
+	color: #000000;
 }
 
 .has-secondary-color[class] {
-	color: #3C8067 !important;
+	color: #3C8067;
 }
 
 .has-foreground-color[class] {
-	color: #333333 !important;
+	color: #333333;
 }
 
 .has-foreground-light-color[class] {
-	color: #444444 !important;
+	color: #444444;
 }
 
 .has-foreground-dark-color[class] {
-	color: #000000 !important;
+	color: #000000;
 }
 
 .has-tertiary-color[class] {
-	color: #FAFBF6 !important;
+	color: #FAFBF6;
 }
 
 .has-background-dark-color[class] {
-	color: #DDDDDD !important;
+	color: #DDDDDD;
 }
 
 .has-background-color[class] {
-	color: #FFFFFF !important;
+	color: #FFFFFF;
 }
 
 .has-white-color[class] {
-	color: white !important;
+	color: white;
 }
 
 .has-black-color[class] {
-	color: black !important;
+	color: black;
 }
 
 .has-background:not(.has-background-background-color) a,
@@ -3777,52 +3777,52 @@ table th {
 }
 
 .has-primary-background-color[class] {
-	background-color: #000000 !important;
+	background-color: #000000;
 	color: #FFFFFF;
 }
 
 .has-secondary-background-color[class] {
-	background-color: #3C8067 !important;
+	background-color: #3C8067;
 	color: #FFFFFF;
 }
 
 .has-foreground-background-color[class] {
-	background-color: #333333 !important;
+	background-color: #333333;
 	color: #FFFFFF;
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: #444444 !important;
+	background-color: #444444;
 	color: #FFFFFF;
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: #000000 !important;
+	background-color: #000000;
 	color: #FFFFFF;
 }
 
 .has-tertiary-background-color[class] {
-	background-color: #FAFBF6 !important;
+	background-color: #FAFBF6;
 	color: #333333;
 }
 
 .has-background-dark-background-color[class] {
-	background-color: #DDDDDD !important;
+	background-color: #DDDDDD;
 	color: #333333;
 }
 
 .has-background-background-color[class] {
-	background-color: #FFFFFF !important;
+	background-color: #FFFFFF;
 	color: #333333;
 }
 
 .has-white-background-color[class] {
-	background-color: white !important;
+	background-color: white;
 	color: #3C8067;
 }
 
 .has-black-background-color[class] {
-	background-color: black !important;
+	background-color: black;
 	color: #000000;
 }
 

seedlet/assets/css/style-editor.css

@@ -1,7 +1,203 @@
 /**
  * These styles should be loaded by the Block Editor only
  */
-body {
+:root, body {
+	/* Globals */
+	/* Font Family */
+	--global--font-primary: var(--font-headings, 'Playfair Display', Georgia, Times, serif);
+	--global--font-secondary: var(--font-base, 'Fira Sans', Helvetica, Arial, sans-serif);
+	--global--font-code: monospace, monospace;
+	--global--font-ui: var(--font-base, var(--global--font-secondary));
+	/* Font Size */
+	--global--font-size-root: 18px;
+	--global--font-size-ratio: 1.2;
+	--global--font-size-base: 1em;
+	--global--font-size-xs: 14px;
+	--global--font-size-sm: 16px;
+	--global--font-size-md: 18px;
+	--global--font-size-lg: 24px;
+	--global--font-size-xl: 28px;
+	--global--font-size-xxl: 32px;
+	--global--font-size-xxxl: 48px;
+	--global--letter-spacing: normal;
+	/* Line Height */
+	--global--line-height-base: 1;
+	--global--line-height-body: 1.7;
+	--global--line-height-heading: 1.3;
+	/* Colors */
+	--global--color-primary: #000000;
+	--global--color-secondary: #3C8067;
+	--global--color-primary-hover: var( --global--color-secondary );
+	--global--color-secondary-hover: #336D58;
+	--global--color-black: black;
+	--global--color-white: white;
+	--global--color-foreground: #333333;
+	--global--color-foreground-light: #444444;
+	--global--color-foreground-dark: #000000;
+	--global--color-background: #FFFFFF;
+	--global--color-tertiary: #FAFBF6;
+	--global--color-background-dark: #DDDDDD;
+	--global--color-border: #EFEFEF;
+	--global--color-text-selection: #EBF2F0;
+	--global--color-alert-success: yellowgreen;
+	--global--color-alert-info: skyblue;
+	--global--color-alert-warning: gold;
+	--global--color-alert-error: salmon;
+	/* Spacing */
+	--global--spacing-unit: 20px;
+	--global--spacing-measure: unset;
+	--global--spacing-horizontal: 25px;
+	--global--spacing-vertical: 30px;
+	/* Elevation */
+	--global--elevation: 1px 1px 3px 0px rgba( 0, 0, 0, 0.2 );
+	/* Other */
+	--global--border-radius-sm: 9px;
+	--global--border-radius-md: 13.5px;
+	--global--border-radius-lg: 18px;
+	--global--border-radius-pill: 180px;
+	--global--border-radius-none: 0;
+	/* Elements */
+	--form--font-family: var(--global--font-secondary);
+	--form--font-size: var(--global--font-size-md);
+	--form--line-height: var(--global--line-height-body);
+	--form--color-text: var(--global--color-foreground);
+	--form--border-color: var(--global--color-border);
+	--form--border-width: 2px;
+	--form--border-radius: 0;
+	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
+	/* Blocks */
+	--button--color-text: var(--global--color-background);
+	--button--color-text-hover: var(--button--color-text);
+	--button--color-text-active: var(--button--color-text);
+	--button--color-background: var(--global--color-secondary);
+	--button--color-background-hover: var(--global--color-secondary-hover);
+	--button--color-background-active: var(--global--color-primary);
+	--button--font-family: var(--global--font-ui);
+	--button--font-size: var(--global--font-size-base);
+	--button--font-weight: normal;
+	--button--line-height: 1;
+	--button--border-width: 2px;
+	--button--border-radius: 4px;
+	--button--padding-vertical: calc(var(--global--spacing-horizontal) - var(--button--border-width));
+	--button--padding-horizontal: var(--global--spacing-horizontal);
+	--cover--height: calc( 15 * var(--global--spacing-vertical) );
+	--cover--color-foreground: var(--global--color-foreground-dark);
+	--cover--color-background: var(--global--color-tertiary);
+	--heading--font-family: var(--global--font-primary);
+	--heading--line-height: 1.3;
+	--heading--font-size-h6: var(--global--font-size-base);
+	--heading--font-size-h5: var(--global--font-size-md);
+	--heading--font-size-h4: var(--global--font-size-lg);
+	--heading--font-size-h3: var(--global--font-size-xl);
+	--heading--font-size-h2: var(--global--font-size-xxl);
+	--heading--font-size-h1: var(--global--font-size-xxxl);
+	--heading--letter-spacing-h6: var(--global--letter-spacing);
+	--heading--letter-spacing-h5: var(--global--letter-spacing);
+	--heading--letter-spacing-h4: var(--global--letter-spacing);
+	--heading--letter-spacing-h3: var(--global--letter-spacing);
+	--heading--letter-spacing-h2: var(--global--letter-spacing);
+	--heading--letter-spacing-h1: var(--global--letter-spacing);
+	--heading--line-height-h6: 1.3;
+	--heading--line-height-h5: 1.3;
+	--heading--line-height-h4: 1.3;
+	--heading--line-height-h3: var(--heading--line-height);
+	--heading--line-height-h2: var(--heading--line-height);
+	--heading--line-height-h1: var(--heading--line-height);
+	--heading--font-weight: normal;
+	--heading--font-weight-strong: 600;
+	--latest-posts--title-font-family: var(--heading--font-family);
+	--latest-posts--title-font-size: var(--heading--font-size-h3);
+	--latest-posts--description-font-family: var(--global--font-secondary);
+	--latest-posts--description-font-size: var(--global--font-size-sm);
+	--layout-grid--gutter-none: 0px;
+	--layout-grid--gutter-small: calc( var(--global--spacing-unit) / 2);
+	--layout-grid--gutter-medium: var(--global--spacing-unit);
+	--layout-grid--gutter-large: calc( var(--global--spacing-unit) * 2);
+	--layout-grid--gutter-huge: calc( var(--global--spacing-unit) * 3);
+	--layout-grid--background-offset: calc( var(--global--spacing-unit));
+	--list--font-family: var(--global--font-secondary);
+	--definition-term--font-family: var(--global--font-primary);
+	--pullquote--font-family: var(--global--font-primary);
+	--pullquote--font-size: var(--heading--font-size-h2);
+	--pullquote--font-style: italic;
+	--pullquote--letter-spacing: var(--heading--letter-spacing-h4);
+	--pullquote--line-height: var(--global--line-height-heading);
+	--pullquote--border-width: 0;
+	--pullquote--border-color: transparent;
+	--pullquote--color-foreground: var(--global--color-foreground);
+	--pullquote--color-background: var(--global--color-background);
+	--quote--border-color: var(--global--color-secondary);
+	--quote--border-width: 1px;
+	--quote--font-family: var(--global--font-secondary);
+	--quote--font-size: var(--global--font-size-md);
+	--quote--font-size-large: var(--global--font-size-lg);
+	--quote--font-style: normal;
+	--quote--font-style-large: normal;
+	--quote--line-height: var(--global--line-height-body);
+	--quote--line-height-large: 1.5;
+	--separator--border-color: var(--global--color-border);
+	--separator--height: 2px;
+	--separator--width: calc(6 * var(--global--spacing-horizontal));
+	--utilities--font-size-xs: var(--global--font-size-xs);
+	--utilities--font-size-sm: var(--global--font-size-sm);
+	--utilities--font-size-md: var(--global--font-size-md);
+	--utilities--font-size-lg: var(--global--font-size-lg);
+	--utilities--font-size-xl: var(--global--font-size-xl);
+	--utilities--font-size-xxl: var(--global--font-size-xxl);
+	--utilities--font-size-xxxl: var(--global--font-size-xxxl);
+	/* Components */
+	--branding--color-text: var(--global--color-foreground);
+	--branding--color-link: var(--global--color-primary);
+	--branding--color-link-hover: var(--global--color-primary-hover);
+	--branding--title--font-family: var(--global--font-primary);
+	--branding--title--font-size: calc( 1.25 * var(--heading--font-size-h1) );
+	--branding--title--font-size-mobile: var(--heading--font-size-h1);
+	--branding--title--font-weight: 700;
+	--branding--description--font-family: var(--global--font-secondary);
+	--branding--description--font-size: var(--global--font-size-sm);
+	--branding--description--font-family: var(--global--font-secondary);
+	--branding--logo--max-width: 120px;
+	--branding--logo--max-height: 120px;
+	--branding--logo--max-width-mobile: 96px;
+	--branding--logo--max-height-mobile: 96px;
+	--primary-nav--font-family: var(--global--font-secondary);
+	--primary-nav--font-family-mobile: var(--global--font-primary);
+	--primary-nav--font-size: var(--global--font-size-sm);
+	--primary-nav--font-size-mobile: var(--global--font-size-xxl);
+	--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-lg);
+	--primary-nav--font-style: normal;
+	--primary-nav--font-style-sub-menu-mobile: italic;
+	--primary-nav--font-weight: normal;
+	--primary-nav--color-link: var(--global--color-primary);
+	--primary-nav--color-link-hover: var(--global--color-primary-hover);
+	--primary-nav--color-text: var(--global--color-foreground);
+	--primary-nav--padding: calc(0.66 * var(--global--spacing-unit) );
+	--primary-nav--justify-content: center;
+	--social-nav--color-link: var(--global--color-foreground);
+	--social-nav--color-link-hover: var(--global--color-primary-hover);
+	--social-nav--padding: calc( 0.5 * var(--primary-nav--padding) );
+	/* Vendors */
+	--wc--wrapper-width: default;
+	--wc--table--border-color: var(--global--color-border);
+	--wc--table--border-radius: 0;
+	--wc--table--border-width: 1px;
+	--wc--table--padding: var(--global--spacing-unit);
+	--wc--tabs--border-color: var(--global--color-border);
+	--wc--tabs--border-radius: 10px;
+	--wc--tabs--border-width: 1px;
+	--wc--tabs--padding: var(--global--spacing-horizontal);
+	--wc--mini-cart--color-background: var(--global--color-background);
+	--wc--mini-cart--color-text: var(--global--color-foreground);
+	--wc--mini-cart--color-subtotal: var(--global--color-foreground);
+	--wc--mini-cart--color-count: var(--global--color-foreground-light);
+	--wc--mini-cart--color-border: var(--global--color-border);
+	--wc--mini-cart--button-text-color: var(--button--color-text);
+	--wc--mini-cart--button-background-color: var(--button--color-background);
+	--wc--mini-cart--width: calc(25 * var(--global--spacing-unit));
+	--wc--star-rating--color: var(--global--color-alert-warning);
+}
+
+:root, body {
 	/* Globals */
 	/* Font Family */
 	--global--font-primary: var(--font-headings, 'Playfair Display', Georgia, Times, serif);
@@ -1062,35 +1258,35 @@ pre.wp-block-verse {
 }
 
 .has-primary-color[class] {
-	color: var(--global--color-primary) !important;
+	color: var(--global--color-primary);
 }
 
 .has-secondary-color[class] {
-	color: var(--global--color-secondary) !important;
+	color: var(--global--color-secondary);
 }
 
 .has-foreground-color[class] {
-	color: var(--global--color-foreground) !important;
+	color: var(--global--color-foreground);
 }
 
 .has-foreground-light-color[class] {
-	color: var(--global--color-foreground-light) !important;
+	color: var(--global--color-foreground-light);
 }
 
 .has-foreground-dark-color[class] {
-	color: var(--global--color-foreground-dark) !important;
+	color: var(--global--color-foreground-dark);
 }
 
 .has-tertiary-color[class] {
-	color: var(--global--color-tertiary) !important;
+	color: var(--global--color-tertiary);
 }
 
 .has-background-dark-color[class] {
-	color: var(--global--color-background-dark) !important;
+	color: var(--global--color-background-dark);
 }
 
 .has-background-color[class] {
-	color: var(--global--color-background) !important;
+	color: var(--global--color-background);
 }
 
 .has-background:not(.has-background-background-color) a,
@@ -1099,57 +1295,57 @@ pre.wp-block-verse {
 }
 
 .has-primary-background-color[class] {
-	background-color: var(--global--color-primary) !important;
+	background-color: var(--global--color-primary);
 	color: var(--global--color-background);
 }
 
 .has-primary-background-color[class] {
-	background-color: var(--global--color-primary) !important;
+	background-color: var(--global--color-primary);
 	color: var(--global--color-background);
 }
 
 .has-secondary-background-color[class] {
-	background-color: var(--global--color-secondary) !important;
+	background-color: var(--global--color-secondary);
 	color: var(--global--color-background);
 }
 
 .has-foreground-background-color[class] {
-	background-color: var(--global--color-foreground) !important;
+	background-color: var(--global--color-foreground);
 	color: var(--global--color-background);
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: var(--global--color-foreground-light) !important;
+	background-color: var(--global--color-foreground-light);
 	color: var(--global--color-background);
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: var(--global--color-foreground-dark) !important;
+	background-color: var(--global--color-foreground-dark);
 	color: var(--global--color-background);
 }
 
 .has-tertiary-background-color[class] {
-	background-color: var(--global--color-tertiary) !important;
+	background-color: var(--global--color-tertiary);
 	color: var(--global--color-foreground);
 }
 
 .has-background-dark-background-color[class] {
-	background-color: var(--global--color-background-dark) !important;
+	background-color: var(--global--color-background-dark);
 	color: var(--global--color-foreground);
 }
 
 .has-background-background-color[class] {
-	background-color: var(--global--color-background) !important;
+	background-color: var(--global--color-background);
 	color: var(--global--color-foreground);
 }
 
 .has-white-background-color[class] {
-	background-color: var(--global--color-white) !important;
+	background-color: var(--global--color-white);
 	color: var(--global--color-secondary);
 }
 
 .has-black-background-color[class] {
-	background-color: var(--global--color-black) !important;
+	background-color: var(--global--color-black);
 	color: var(--global--color-primary);
 }
 

seedlet/assets/sass/abstracts/_mixins.scss

@@ -8,7 +8,7 @@
 	}
 
 	@if editor == $view {
-		body {
+		:root, body {
 			@content;
 		}
 	}

seedlet/assets/sass/blocks/utilities/_editor.scss

@@ -23,35 +23,35 @@
 .has-text-color {}
 
 .has-primary-color[class] {
-	color: var(--global--color-primary) !important;
+	color: var(--global--color-primary);
 }
 
 .has-secondary-color[class] {
-	color: var(--global--color-secondary) !important;
+	color: var(--global--color-secondary);
 }
 
 .has-foreground-color[class] {
-	color: var(--global--color-foreground) !important;
+	color: var(--global--color-foreground);
 }
 
 .has-foreground-light-color[class] {
-	color: var(--global--color-foreground-light) !important;
+	color: var(--global--color-foreground-light);
 }
 
 .has-foreground-dark-color[class] {
-	color: var(--global--color-foreground-dark) !important;
+	color: var(--global--color-foreground-dark);
 }
 
 .has-tertiary-color[class] {
-	color: var(--global--color-tertiary) !important;
+	color: var(--global--color-tertiary);
 }
 
 .has-background-dark-color[class] {
-	color: var(--global--color-background-dark) !important;
+	color: var(--global--color-background-dark);
 }
 
 .has-background-color[class] {
-	color: var(--global--color-background) !important;
+	color: var(--global--color-background);
 }
 
 // Gutenberg background-color options
@@ -63,57 +63,57 @@
 }
 
 .has-primary-background-color[class] {
-	background-color: var(--global--color-primary) !important;
+	background-color: var(--global--color-primary);
 	color: var(--global--color-background);
 }
 
 .has-primary-background-color[class] {
-	background-color: var(--global--color-primary) !important;
+	background-color: var(--global--color-primary);
 	color: var(--global--color-background);
 }
 
 .has-secondary-background-color[class] {
-	background-color: var(--global--color-secondary) !important;
+	background-color: var(--global--color-secondary);
 	color: var(--global--color-background);
 }
 
 .has-foreground-background-color[class] {
-	background-color: var(--global--color-foreground) !important;
+	background-color: var(--global--color-foreground);
 	color: var(--global--color-background);
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: var(--global--color-foreground-light) !important;
+	background-color: var(--global--color-foreground-light);
 	color: var(--global--color-background);
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: var(--global--color-foreground-dark) !important;
+	background-color: var(--global--color-foreground-dark);
 	color: var(--global--color-background);
 }
 
 .has-tertiary-background-color[class] {
-	background-color: var(--global--color-tertiary) !important;
+	background-color: var(--global--color-tertiary);
 	color: var(--global--color-foreground);
 }
 
 .has-background-dark-background-color[class] {
-	background-color: var(--global--color-background-dark) !important;
+	background-color: var(--global--color-background-dark);
 	color: var(--global--color-foreground);
 }
 
 .has-background-background-color[class] {
-	background-color: var(--global--color-background) !important;
+	background-color: var(--global--color-background);
 	color: var(--global--color-foreground);
 }
 
 .has-white-background-color[class] {
-	background-color: var(--global--color-white) !important;
+	background-color: var(--global--color-white);
 	color: var(--global--color-secondary);
 }
 
 .has-black-background-color[class] {
-	background-color: var(--global--color-black) !important;
+	background-color: var(--global--color-black);
 	color: var(--global--color-primary);
 }
 

seedlet/assets/sass/blocks/utilities/_style.scss

@@ -111,43 +111,43 @@
 .has-text-color {}
 
 .has-primary-color[class] {
-	color: var(--global--color-primary) !important;
+	color: var(--global--color-primary);
 }
 
 .has-secondary-color[class] {
-	color: var(--global--color-secondary) !important;
+	color: var(--global--color-secondary);
 }
 
 .has-foreground-color[class] {
-	color: var(--global--color-foreground) !important;
+	color: var(--global--color-foreground);
 }
 
 .has-foreground-light-color[class] {
-	color: var(--global--color-foreground-light) !important;
+	color: var(--global--color-foreground-light);
 }
 
 .has-foreground-dark-color[class] {
-	color: var(--global--color-foreground-dark) !important;
+	color: var(--global--color-foreground-dark);
 }
 
 .has-tertiary-color[class] {
-	color: var(--global--color-tertiary) !important;
+	color: var(--global--color-tertiary);
 }
 
 .has-background-dark-color[class] {
-	color: var(--global--color-background-dark) !important;
+	color: var(--global--color-background-dark);
 }
 
 .has-background-color[class] {
-	color: var(--global--color-background) !important;
+	color: var(--global--color-background);
 }
 
 .has-white-color[class] {
-	color: var(--global--color-white) !important;
+	color: var(--global--color-white);
 }
 
 .has-black-color[class] {
-	color: var(--global--color-black) !important;
+	color: var(--global--color-black);
 }
 
 // Gutenberg background-color options
@@ -159,52 +159,52 @@
 }
 
 .has-primary-background-color[class] {
-	background-color: var(--global--color-primary) !important;
+	background-color: var(--global--color-primary);
 	color: var(--global--color-background);
 }
 
 .has-secondary-background-color[class] {
-	background-color: var(--global--color-secondary) !important;
+	background-color: var(--global--color-secondary);
 	color: var(--global--color-background);
 }
 
 .has-foreground-background-color[class] {
-	background-color: var(--global--color-foreground) !important;
+	background-color: var(--global--color-foreground);
 	color: var(--global--color-background);
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: var(--global--color-foreground-light) !important;
+	background-color: var(--global--color-foreground-light);
 	color: var(--global--color-background);
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: var(--global--color-foreground-dark) !important;
+	background-color: var(--global--color-foreground-dark);
 	color: var(--global--color-background);
 }
 
 .has-tertiary-background-color[class] {
-	background-color: var(--global--color-tertiary) !important;
+	background-color: var(--global--color-tertiary);
 	color: var(--global--color-foreground);
 }
 
 .has-background-dark-background-color[class] {
-	background-color: var(--global--color-background-dark) !important;
+	background-color: var(--global--color-background-dark);
 	color: var(--global--color-foreground);
 }
 
 .has-background-background-color[class] {
-	background-color: var(--global--color-background) !important;
+	background-color: var(--global--color-background);
 	color: var(--global--color-foreground);
 }
 
 .has-white-background-color[class] {
-	background-color: var(--global--color-white) !important;
+	background-color: var(--global--color-white);
 	color: var(--global--color-secondary);
 }
 
 .has-black-background-color[class] {
-	background-color: var(--global--color-black) !important;
+	background-color: var(--global--color-black);
 	color: var(--global--color-primary);
 }
 

seedlet/assets/sass/style-editor.scss

@@ -1,6 +1,9 @@
 /**
  * These styles should be loaded by the Block Editor only
  */
+ 
+// Variables
+@import "variables-editor";
 
 // Variables
 @import "variables-editor";

seedlet/functions.php

@@ -16,6 +16,14 @@ if ( version_compare( $GLOBALS['wp_version'], '4.7', '<' ) ) {
 	return;
 }
 
+/**
+ * Determine whether the site is being requested from IE.
+ */
+$is_ie = false;
+if ( preg_match( '~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false ) ) {
+	$is_ie = true;
+}
+
 if ( ! function_exists( 'seedlet_setup' ) ) :
 	/**
 	 * Sets up theme defaults and registers support for various WordPress features.
@@ -105,10 +113,16 @@ if ( ! function_exists( 'seedlet_setup' ) ) :
 		// Add support for editor styles.
 		add_theme_support( 'editor-styles' );
 
+		$editor_stylesheet_path = './assets/css/style-editor.css';
+		if ( $is_ie ) {
+			$editor_stylesheet_path = './assets/css/ie-editor.css';
+		}
+
 		// Enqueue editor styles.
-		add_editor_style( array(
+		add_editor_style(
-			seedlet_fonts_url(),
+			array(
-			'./assets/css/style-editor.css'
+				seedlet_fonts_url(),
+				$editor_stylesheet_path,
 		) );
 
 		// Add custom editor font sizes.
@@ -150,21 +164,11 @@ if ( ! function_exists( 'seedlet_setup' ) ) :
 
 		// Editor color palette.
 		$colors_theme_mod = get_theme_mod( 'custom_colors_active' );
-		$primary          = ( ! empty( $colors_theme_mod ) &&
+		$primary          = ( ! empty( $colors_theme_mod ) && 'default' === $colors_theme_mod || empty( get_theme_mod( 'seedlet_--global--color-primary' ) ) ) ? '#000000' : get_theme_mod( 'seedlet_--global--color-primary' );
-								'default' === $colors_theme_mod ||
+		$secondary        = ( ! empty( $colors_theme_mod ) && 'default' === $colors_theme_mod || empty( get_theme_mod( 'seedlet_--global--color-secondary' ) ) ) ? '#3C8067' : get_theme_mod( 'seedlet_--global--color-secondary' );
-								empty( get_theme_mod( 'seedlet_--global--color-primary' ) ) ) ? '#000000' : get_theme_mod( 'seedlet_--global--color-primary' );
+		$foreground       = ( ! empty( $colors_theme_mod ) && 'default' === $colors_theme_mod || empty( get_theme_mod( 'seedlet_--global--color-foreground' ) ) ) ? '#333333' : get_theme_mod( 'seedlet_--global--color-foreground' );
-		$secondary        = ( ! empty( $colors_theme_mod ) &&
+		$tertiary         = ( ! empty( $colors_theme_mod ) && 'default' === $colors_theme_mod || empty( get_theme_mod( 'seedlet_--global--color-tertiary' ) ) ) ? '#FAFBF6' : get_theme_mod( 'seedlet_--global--color-tertiary' );
-								'default' === $colors_theme_mod ||
+		$background       = ( ! empty( $colors_theme_mod ) && 'default' === $colors_theme_mod || empty( get_theme_mod( 'seedlet_--global--color-background' ) ) ) ? '#FFFFFF' : get_theme_mod( 'seedlet_--global--color-background' );
-								empty( get_theme_mod( 'seedlet_--global--color-secondary' ) ) ) ? '#3C8067' : get_theme_mod( 'seedlet_--global--color-secondary' );
-		$foreground       = ( ! empty( $colors_theme_mod ) &&
-								'default' === $colors_theme_mod ||
-								empty( get_theme_mod( 'seedlet_--global--color-foreground' ) ) ) ? '#333333' : get_theme_mod( 'seedlet_--global--color-foreground' );
-		$tertiary = ( ! empty( $colors_theme_mod ) &&
-								'default' === $colors_theme_mod ||
-								empty( get_theme_mod( 'seedlet_--global--color-tertiary' ) ) ) ? '#FAFBF6' : get_theme_mod( 'seedlet_--global--color-tertiary' );
-		$background       = ( ! empty( $colors_theme_mod ) &&
-								'default' === $colors_theme_mod ||
-								empty( get_theme_mod( 'seedlet_--global--color-background' ) ) ) ? '#FFFFFF' : get_theme_mod( 'seedlet_--global--color-background' );
 
 		add_theme_support(
 			'editor-color-palette',
@@ -362,7 +366,7 @@ function seedlet_scripts() {
 	wp_enqueue_style( 'seedlet-fonts', seedlet_fonts_url(), array(), null );
 
 	// Theme styles
-	if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
+	if ( $is_ie ) {
 		// If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables
 		wp_enqueue_style( 'seedlet-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
 	} else {
@@ -412,7 +416,9 @@ require get_template_directory() . '/classes/class-seedlet-svg-icons.php';
 /**
  * Custom colors class.
  */
-require get_template_directory() . '/classes/class-seedlet-custom-colors.php';
+if ( empty( get_theme_mod( 'colors_manager' ) ) ) { // If the theme is on wpcom, we bypass the theme's built in custom colors, because wpcom uses a different custom color implementation.
+	require get_template_directory() . '/classes/class-seedlet-custom-colors.php';
+}
 
 /**
  * Enhance the theme by hooking into WordPress.

seedlet/inc/wpcom-colors.php

@@ -0,0 +1,546 @@
+<?php 
+
+/*
+ * Custom Colors: Seedlet
+ */
+
+// Background Color 
+// --global--color-background
+add_color_rule( 'bg', '#FFFFFF', array(
+
+	// Background-color
+	array( '.primary-navigation > div,
+			.screen-reader-text:focus,
+			.woo-navigation > div,
+			.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container,
+			body,
+			.primary-navigation > div > ul > li > .sub-menu,
+			.woo-navigation > div > ul > li > .sub-menu', 'background-color' ),
+
+	// Text-color
+	array( '.a8c-posts-list-item__featured span,
+			.a8c-posts-list__view-all,
+			.a8c-posts-list__view-all:active,
+			.a8c-posts-list__view-all:focus,
+			.a8c-posts-list__view-all:hover,
+			.button,
+			.button:active,
+			.button:focus,
+			.button:hover,
+			.has-focus.a8c-posts-list__view-all,
+			.has-focus.button,
+			.has-focus.wp-block-button__link,
+			.reply a,
+			.reply a.has-focus,
+			.reply a:focus,
+			.reply a:hover,
+			.sticky-post,
+			.wp-block-button__link,
+			.wp-block-button__link:active,
+			.wp-block-button__link:focus,
+			.wp-block-button__link:hover,
+			.wp-block-file .has-focus.wp-block-file__button,
+			.wp-block-file .wp-block-file__button,
+			.wp-block-file .wp-block-file__button:active,
+			.wp-block-file .wp-block-file__button:focus,
+			.wp-block-file .wp-block-file__button:hover,
+			.wp-block-file a.wp-block-file__button:active,
+			.wp-block-file a.wp-block-file__button:focus,
+			.wp-block-file a.wp-block-file__button:hover,
+			.wp-block-file a.wp-block-file__button:visited,
+			.wp-block-pullquote.is-style-solid-color,
+			button,
+			button.has-focus,
+			button:active,
+			button:focus,
+			button:hover,
+			button[data-load-more-btn],
+			input.has-focus[type="submit"],
+			input:active[type="submit"],
+			input:focus[type="submit"],
+			input:hover[type="submit"],
+			input[type="submit"]', 'color' ),
+
+	// Text-shadow
+	array( '.site-title a', 'text-shadow' ),
+
+	/**
+	 * Utility Classes
+	 */
+
+	// Text-color
+	array( '.has-primary-background-color[class],
+			.has-secondary-background-color[class],
+			.has-foreground-background-color[class],
+			.has-foreground-dark-background-color[class],
+			.has-foreground-light-background-color[class],
+			.has-background-color[class]', 'color' ),
+
+	// Border-bottom-color
+	array( '.has-secondary-background-color[class] a', 'border-bottom-color' ),
+
+	// Background-color
+	array( '.has-background-background-color[class]', 'background-color' ),
+
+	// Text-color darkened
+	array( '.has-background-dark-color[class]', 'color', '-1'  ),
+
+	// Background-color darkened
+	array( '.has-background-dark-background-color[class]', 'background-color', '-1' ),
+
+), __( 'Background Color' ) );
+
+// Foreground Color
+// --global--color-background
+add_color_rule( 'txt', '#444444', array(
+
+	// Text-color
+	array( '.comment-meta .comment-metadata,
+			.entry-footer,
+			.entry-meta,
+			.has-background-background-color[class],
+			.has-background-dark-background-color[class],
+			.has-foreground-color[class],
+			.has-tertiary-background-color[class],
+			.navigation,
+			.pagination .nav-links > *,
+			.post-navigation .meta-nav,
+			.primary-navigation,
+			.screen-reader-text:focus,
+			.site-branding,
+			.site-footer > .footer-navigation .footer-menu,
+			.site-footer > .site-info,
+			.social-navigation a,
+			.social-navigation a:active,
+			.woo-navigation,
+			.wp-block-code,
+			.wp-block-code pre,
+			.wp-block-pullquote,
+			.wp-block-search .wp-block-search__input,
+			.wp-block-search .wp-block-search__input:focus,
+			body,
+			input[type="color"],
+			input[type="color"]:focus,
+			input[type="date"],
+			input[type="date"]:focus,
+			input[type="datetime"],
+			input[type="datetime"]:focus,
+			input[type="datetime-local"],
+			input[type="datetime-local"]:focus,
+			input[type="email"],
+			input[type="email"]:focus,
+			input[type="month"],
+			input[type="month"]:focus,
+			input[type="number"],
+			input[type="number"]:focus,
+			input[type="password"],
+			input[type="password"]:focus,
+			input[type="range"],
+			input[type="range"]:focus,
+			input[type="search"],
+			input[type="search"]:focus,
+			input[type="tel"],
+			input[type="tel"]:focus,
+			input[type="text"],
+			input[type="text"]:focus,
+			input[type="time"],
+			input[type="time"]:focus,
+			input[type="url"],
+			input[type="url"]:focus,
+			input[type="week"],
+			input[type="week"]:focus,
+			textarea,
+			textarea:focus', 'color' ),
+
+	// Background-color
+	array( '.wp-block-pullquote.is-style-solid-color,
+			.wp-block-cover-image.has-background-dim, 
+			.wp-block-cover.has-background-dim', 'background-color' ),
+
+	// Border-bottom-color
+	array( '.pagination .nav-links > *.current', 'border-bottom-color' ),
+
+	/**
+	 * Utility Classes
+	 */
+
+	// Foreground
+	array( '.has-foreground-color[class],
+			.has-background-background-color[class],
+			.has-background-dark-background-color[class],
+			.has-background-light-background-color[class]', 'color' ),
+
+	// Background
+	array( '.has-foreground-background-color[class]', 'background-color' ),
+
+	// Text-color darkened
+	array( '.has-foreground-dark-color[class]', 'color', '-1' ),
+
+	// Background-color darkened
+	array( '.has-foreground-dark-background-color[class]', 'background-color', '-1' ),
+
+	// Text-color brightened
+	array( '.has-foreground-light-color[class]', 'color', '+2' ),
+
+	// Background-color brightened
+	array( '.has-foreground-light-background-color[class]', 'background-color', '+2' ),
+
+), __( 'Foreground Color' ) );
+
+// Primary Color
+// --global--color-primary
+add_color_rule( 'link', '#000000', array(
+
+	// Text-color
+	array( '.entry-title,
+			.navigation a,
+			.navigation a:active,
+			.primary-navigation .menu-item > a,
+			.primary-navigation .menu-item > a:active,
+			.primary-navigation > .button,
+			.site-footer > .site-info a:focus,
+			.site-footer > .site-info a:hover,
+			.site-title,
+			.woo-navigation .menu-item > a,
+			.woo-navigation .menu-item > a:active,
+			.woo-navigation > .button,
+			.wp-block-a8c-blog-posts article .entry-title a,
+			.wp-block-a8c-blog-posts article .entry-title a:active,
+			.wp-block-newspack-blocks-homepage-articles article .entry-title a,
+			.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+			a,
+			a:active', 'color' ),
+
+	// Background-color
+	array( '.a8c-posts-list-item__featured span,
+			.a8c-posts-list__view-all:active,
+			.button:active,
+			.wp-block-button__link:active,
+			.wp-block-cover,
+			.wp-block-cover-image,
+			.wp-block-file .wp-block-file__button:active,
+			button:active,
+			input:active[type="submit"]', 'background-color' ),
+
+	/**
+	 * Utility Classes
+	 */
+
+	// Background-color
+	array( '.has-primary-background-color[class]', 'background-color' ),
+
+	// Text-color
+	array( '.has-black-background-color[class],
+			.has-primary-color[class]', 'color' ),
+
+), __( 'Primary Color' ) );
+
+// Secondary Color
+// --global--color-secondary
+add_color_rule( 'fg1', '#3C8067', array(
+
+	// Text-color
+	array( '.a8c-posts-list__item .a8c-posts-list-item__meta a:active,
+			.a8c-posts-list__item .a8c-posts-list-item__meta a:hover,
+			.comment-meta .comment-metadata a:focus,
+			.comment-meta .comment-metadata a:hover,
+			.entry-footer a:focus,
+			.entry-footer a:hover,
+			.entry-meta a:focus,
+			.entry-meta a:hover,
+			.entry-title a:focus,
+			.entry-title a:hover,
+			.navigation a:focus,
+			.navigation a:hover,
+			.pagination .nav-links > a:hover,
+			.site-footer > .footer-navigation .footer-menu a:focus,
+			.site-footer > .footer-navigation .footer-menu a:hover,
+			.site-title a:focus,
+			.site-title a:hover,
+			.social-navigation a:focus,
+			.social-navigation a:hover,
+			.woo-navigation .menu-item > a:focus,
+			.woo-navigation .menu-item > a:hover,
+			.woo-navigation .primary-menu > .menu-item:hover > a,
+			.woo-navigation > .button:hover,
+			.wp-block-a8c-blog-posts article .cat-links a:active,
+			.wp-block-a8c-blog-posts article .cat-links a:hover,
+			.wp-block-a8c-blog-posts article .entry-meta a:active,
+			.wp-block-a8c-blog-posts article .entry-meta a:hover,
+			.wp-block-a8c-blog-posts article .entry-title a:focus,
+			.wp-block-a8c-blog-posts article .entry-title a:hover,
+			.wp-block-button.is-style-outline .wp-block-button__link,
+			.wp-block-button.is-style-outline .wp-block-button__link:active,
+			.wp-block-button.is-style-outline.wp-block-button__link,
+			.wp-block-button.is-style-outline.wp-block-button__link:active,
+			.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus,
+			.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover,
+			.wp-block-newspack-blocks-homepage-articles article .cat-links a:active,
+			.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
+			.wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
+			.wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover,
+			.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+			.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
+			.primary-navigation .menu-item > a:focus,
+			.primary-navigation .menu-item > a:hover,
+			.primary-navigation .primary-menu > .menu-item:hover > a,
+			.primary-navigation > .button:hover,
+			a:focus,
+			a:hover', 'color' ),
+
+	// Background-color
+	array( '.a8c-posts-list__view-all,
+			.button,
+			.has-secondary-background-color[class],
+			.reply a,
+			.sticky-post,
+			.wp-block-button__link,
+			.wp-block-file .wp-block-file__button,
+			button,
+			button[data-load-more-btn],
+			input[type="submit"]', 'background-color' ),
+
+	// Border-bottom-color
+	array( 'a', 'border-bottom-color' ),
+
+	// Border-left-color
+	array( '.wp-block-pullquote.is-style-large,
+			.wp-block-quote', 'border-left-color' ),
+
+	// Border-right-color
+	array( '.wp-block-quote.has-text-align-right', 'border-right-color' ),
+
+	// Outline-color
+	array( '*:focus', 'outline-color' ),
+	
+	// Background-image
+	array( '.site-title a', 'Background-image' ),
+	
+	// Text-decoration-color
+	array( '.site-title > a', 'text-decoration-color' ),
+
+	/**
+	 * Utility Classes
+	 */
+
+	// Background-color
+	array( '.has-secondary-background-color[class]', 'background-color' ),
+
+	// Text-color
+	array( '.has-secondary-color[class],
+			.has-white-background-color[class],', 'color' ),
+
+	/**
+	 * Button Hover Colors
+	 */
+
+	// Background Color
+	array( '.a8c-posts-list__view-all:focus,
+			.a8c-posts-list__view-all:hover,
+			.button:focus,
+			.button:hover,
+			.has-focus.a8c-posts-list__view-all,
+			.has-focus.button,
+			.has-focus.wp-block-button__link,
+			.reply a.has-focus,
+			.reply a:focus,
+			.reply a:hover,
+			.wp-block-button__link:focus,
+			.wp-block-button__link:hover,
+			.wp-block-file .has-focus.wp-block-file__button,
+			.wp-block-file .wp-block-file__button:focus,
+			.wp-block-file .wp-block-file__button:hover,
+			button.has-focus,
+			button:focus,
+			button:hover,
+			input.has-focus[type="submit"],
+			input:focus[type="submit"],
+			input:hover[type="submit"]', 'background-color', '-1' ),
+
+	// Text Color
+	array( '.wp-block-button.is-style-outline .wp-block-button__link.has-focus,
+			.wp-block-button.is-style-outline .wp-block-button__link:focus,
+			.wp-block-button.is-style-outline .wp-block-button__link:hover,
+			.wp-block-button.is-style-outline.wp-block-button__link.has-focus,
+			.wp-block-button.is-style-outline.wp-block-button__link:focus,
+			.wp-block-button.is-style-outline.wp-block-button__link:hover', 'color', '-1' ),
+
+), __( 'Secondary Color' ) );
+
+// Tertiary Color
+// --global--color-tertiary
+add_color_rule( 'fg2', '#FAFBF6', array(
+
+	// Text-color
+	array( '.wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-image-text,
+			.wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-text,
+			.wp-block-cover-image:not([class*="background-color"]) .wp-block-cover__inner-container,
+			.wp-block-cover:not([class*="background-color"]) .wp-block-cover-image-text,
+			.wp-block-cover:not([class*="background-color"]) .wp-block-cover-text,
+			.wp-block-cover:not([class*="background-color"]) .wp-block-cover__inner-container', 'color' ),
+
+	/**
+	 * Utility Classes
+	 */
+
+	// Background-color
+	array( '.has-tertiary-background-color[class],
+			.has-background-light-background-color[class]', 'background-color' ),
+
+	// Text-color
+	array( '.has-tertiary-color[class],
+			.has-background-light-color[class]', 'color' ),
+
+	/**
+	 * Border Colors
+	 * --global--color-border
+	 */
+
+	// Border-color
+	array( '.comment-meta .comment-author .avatar,
+			.wp-block-code,
+			.wp-block-search .wp-block-search__input,
+			.wp-block-search .wp-block-search__input:focus,
+			input[type="color"],
+			input[type="color"]:focus,
+			input[type="date"],
+			input[type="date"]:focus,
+			input[type="datetime"],
+			input[type="datetime"]:focus,
+			input[type="datetime-local"],
+			input[type="datetime-local"]:focus,
+			input[type="email"],
+			input[type="email"]:focus,
+			input[type="month"],
+			input[type="month"]:focus,
+			input[type="number"],
+			input[type="number"]:focus,
+			input[type="password"],
+			input[type="password"]:focus,
+			input[type="range"],
+			input[type="range"]:focus,
+			input[type="search"],
+			input[type="search"]:focus,
+			input[type="tel"],
+			input[type="tel"]:focus,
+			input[type="text"],
+			input[type="text"]:focus,
+			input[type="time"],
+			input[type="time"]:focus,
+			input[type="url"],
+			input[type="url"]:focus,
+			input[type="week"],
+			input[type="week"]:focus,
+			select,
+			textarea,
+			textarea:focus', 'border-color' ),
+
+	// Border-bottom-color
+	array( '.comment-list > li:not(first-child),
+			hr,
+			hr.wp-block-separator', 'border-bottom-color' ),
+
+	// Border-top-color
+	array( '.comment-list .children > li,
+			.site-main > article > .entry-footer', 'border-top-color' ),
+
+	// Color
+	array( 'hr.wp-block-separator.is-style-dots:before', 'color' ),
+
+), __( 'Tertiary Color' ) );
+
+/**
+ * Custom CSS. 
+ * The plugin takes the body of this function and applies it in a style tag in the document head.
+ */
+function seedlet_custom_colors_extra_css() {
+	$colors_array = get_theme_mod( 'colors_manager' );
+	$color_bg = $colors_array['colors']['bg'];
+	$color_fg1 = $colors_array['colors']['fg1'];
+	$color_fg2 = $colors_array['colors']['fg2']; ?>
+
+	/* 
+	 * Site title text shadow. 
+	*/
+	.site-title a {
+		background-image: linear-gradient(to right, <?php echo $color_fg1; ?> 100%, transparent 100%);
+		text-shadow: 1px 0px <?php echo $color_bg; ?>, 
+					 -1px 0px <?php echo $color_bg; ?>, 
+					 -2px 0px <?php echo $color_bg; ?>, 
+					 2px 0px <?php echo $color_bg; ?>, 
+					 -3px 0px <?php echo $color_bg; ?>, 
+					 3px 0px <?php echo $color_bg; ?>, 
+					 -4px 0px <?php echo $color_bg; ?>, 
+					 4px 0px <?php echo $color_bg; ?>, 
+					 -5px 0px <?php echo $color_bg; ?>, 
+					 5px 0px <?php echo $color_bg; ?>;
+	}
+
+	/* 
+	 * Custom gradients.
+	*/
+	.has-hard-diagonal-gradient-background {
+		background: linear-gradient(to bottom right, <?php echo $color_fg1; ?> 49.9%, <?php echo $color_fg2; ?> 50%);
+	}
+
+	.has-hard-diagonal-inverted-gradient-background {
+		background: linear-gradient(to top left, <?php echo $color_fg1; ?> 49.9%, <?php echo $color_fg2; ?> 50%);
+	}
+
+	.has-diagonal-gradient-background {
+		background: linear-gradient(to bottom right, <?php echo $color_fg1; ?>, <?php echo $color_fg2; ?>);
+	}
+
+	.has-diagonal-inverted-gradient-background {
+		background: linear-gradient(to top left, <?php echo $color_fg1; ?>, <?php echo $color_fg2; ?>);
+	}
+
+	.has-hard-horizontal-gradient-background {
+		background: linear-gradient(to bottom, <?php echo $color_fg1; ?> 50%, <?php echo $color_fg2; ?> 50%);
+	}
+
+	.has-hard-horizontal-inverted-gradient-background {
+		background: linear-gradient(to top, <?php echo $color_fg1; ?> 50%, <?php echo $color_fg2; ?> 50%);
+	}
+
+	.has-horizontal-gradient-background {
+		background: linear-gradient(to bottom, <?php echo $color_fg1; ?>, <?php echo $color_fg2; ?>);
+	}
+
+	.has-horizontal-inverted-gradient-background {
+		background: linear-gradient(to top, <?php echo $color_fg1; ?>, <?php echo $color_fg2; ?>);
+	}
+
+	.has-stripe-gradient-background {
+		background: linear-gradient(to bottom, transparent 20%, <?php echo $color_fg1; ?> 20%, <?php echo $color_fg1; ?> 80%, transparent 80%);
+	}
+<?php }
+add_theme_support( 'custom_colors_extra_css', 'seedlet_custom_colors_extra_css' );
+
+/**
+ * Featured Varia/Seedlet Palettes
+ */
+// Light
+add_color_palette( array(
+	'#FFFFFF',
+	'#1D1E1E',
+	'#C8133E',
+	'#4E2F4B',
+	'#F9F9F9',
+), 'Light' );
+// Medium
+add_color_palette( array(
+	'#EEF4F7',
+	'#242527',
+	'#35845D',
+	'#233252',
+	'#F9F9F9',
+), 'Medium' );
+// Dark
+add_color_palette( array(
+	'#1F2527',
+	'#FFFFFF',
+	'#9FD3E8',
+	'#FBE6AA',
+	'#364043',
+), 'Dark' );

seedlet/inc/wpcom-customize-message.css

@@ -0,0 +1,21 @@
+/**
+ * File customize-preview-wpcom.js.
+ *
+ * Instantly live-update customizer settings in the preview for improved user experience,
+ * targeting the updates needed to hide the page title on the homepage on WordPress.com.
+ */
+
+#customize-control-color_a11y_warning {
+	background: #FFF;
+	border: 1px solid #ccd0d4;
+	border-left: 4px solid #00a0d2;
+	box-shadow: 0 1px 1px rgba( 0, 0, 0, .04 );
+	margin: 0 0 6px 0;
+	padding: 9px 14px;
+	overflow: hidden;
+	width: auto;
+}
+
+#customize-control-color_a11y_warning .customize-control-title {
+	display: none;
+}

seedlet/inc/wpcom-customize-preview.js

@@ -6,7 +6,6 @@
  */
 
 ( function( $ ) {
-
 	// Hide Front Page Title
 	wp.customize( 'hide_front_page_title', function( value ) {
 		value.bind( function( to ) {
@@ -18,4 +17,74 @@
 			}
 		} );
 	} );
+
+	// Since the plugin handles customizer preview updates via the postMessage transport,
+	// we need to manually override the "extra CSS" when a user selects a different color palette.
+	wp.customize( 'colors_manager[colors]', function( value ) {
+		value.bind( function( to ) {
+			const { bg, fg1, fg2 } = to;
+			const extraCSS = `/*
+				* Site title text shadow.
+				*/
+				.site-title a {
+					background-image: linear-gradient(to right, ${ fg1 } 100%, transparent 100%);
+					text-shadow: 1px 0px ${ bg },
+								-1px 0px ${ bg },
+								-2px 0px ${ bg },
+								2px 0px ${ bg },
+								-3px 0px ${ bg },
+								3px 0px ${ bg },
+								-4px 0px ${ bg },
+								4px 0px ${ bg },
+								-5px 0px ${ bg },
+								5px 0px ${ bg };
+				}
+
+				/*
+				* Custom gradients.
+				*/
+				.has-hard-diagonal-gradient-background {
+					background: linear-gradient(to bottom right, ${ fg1 } 49.9%, ${ fg2 } 50%);
+				}
+
+				.has-hard-diagonal-inverted-gradient-background {
+					background: linear-gradient(to top left, ${ fg1 } 49.9%, ${ fg2 } 50%);
+				}
+
+				.has-diagonal-gradient-background {
+					background: linear-gradient(to bottom right, ${ fg1 }, ${ fg2 });
+				}
+
+				.has-diagonal-inverted-gradient-background {
+					background: linear-gradient(to top left, ${ fg1 }, ${ fg2 });
+				}
+
+				.has-hard-horizontal-gradient-background {
+					background: linear-gradient(to bottom, ${ fg1 } 50%, ${ fg2 } 50%);
+				}
+
+				.has-hard-horizontal-inverted-gradient-background {
+					background: linear-gradient(to top, ${ fg1 } 50%, ${ fg2 } 50%);
+				}
+
+				.has-horizontal-gradient-background {
+					background: linear-gradient(to bottom, ${ fg1 }, ${ fg2 });
+				}
+
+				.has-horizontal-inverted-gradient-background {
+					background: linear-gradient(to top, ${ fg1 }, ${ fg2 });
+				}
+
+				.has-stripe-gradient-background {
+					background: linear-gradient(to bottom, transparent 20%, ${ fg1 } 20%, ${ fg1 } 80%, transparent 80%);
+				}`;
+
+			// Append an extra style element that overrides the previous extra CSS
+			if ( $('#custom-colors-extra-css').length ) {
+				$( '#custom-colors-extra-css' ).html( extraCSS );
+			} else {
+				$( 'head' ).append( `<style id="custom-colors-extra-css">${ extraCSS }</style>` );
+			}
+		} );
+	} );
 } )( jQuery );

seedlet/inc/wpcom-editor-colors.php

@@ -0,0 +1,271 @@
+<?php
+
+/*
+ * Custom Editor Colors: Seedlet
+ */
+
+// Background Color 
+// --global--color-background
+add_color_rule( 'bg', '#FFFFFF', array(
+
+	// Background-color
+	array( '#editor .editor-styles-wrapper .wp-block-navigation .wp-block-navigation__container,
+			#editor .editor-styles-wrapper', 'background-color' ),
+
+	// Text-color
+	array( '#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:active,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:focus,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:hover,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .has-focus.button,
+			#editor .editor-styles-wrapper .wp-block-button__link,
+			#editor .editor-styles-wrapper .wp-block-button__link.has-focus,
+			#editor .editor-styles-wrapper .wp-block-button__link:focus,
+			#editor .editor-styles-wrapper .wp-block-button__link:hover,
+			#editor .editor-styles-wrapper .wp-block-file .wp-block-file__button,
+			#editor .editor-styles-wrapper .wp-block-file .wp-block-file__button.has-focus,
+			#editor .editor-styles-wrapper .wp-block-file .wp-block-file__button:focus,
+			#editor .editor-styles-wrapper .wp-block-file .wp-block-file__button:hover,
+			#editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color,
+			#editor .editor-styles-wrapper .wp-block-search .has-focus.wp-block-search__button,
+			#editor .editor-styles-wrapper .wp-block-search .wp-block-search__button,
+			#editor .editor-styles-wrapper .wp-block-search .wp-block-search__button:active,
+			#editor .editor-styles-wrapper .wp-block-search .wp-block-search__button:focus,
+			#editor .editor-styles-wrapper .wp-block-search .wp-block-search__button:hover', 'color' ),
+
+	/**
+	 * Utility Classes
+	 */
+
+	// Text-color
+	array( '#editor .editor-styles-wrapper .has-primary-background-color,
+			#editor .editor-styles-wrapper .has-secondary-background-color,
+			#editor .editor-styles-wrapper .has-foreground-background-color,
+			#editor .editor-styles-wrapper .has-foreground-dark-background-color,
+			#editor .editor-styles-wrapper .has-foreground-light-background-color,
+			#editor .editor-styles-wrapper .has-background-color,
+			#editor .editor-styles-wrapper .has-background:not(.has-background-background-color) a', 'color' ),
+
+	// Border-bottom-color
+	array( '#editor .editor-styles-wrapper .has-secondary-background-color[class] a', 'border-bottom-color' ),
+
+	// Background-color
+	array( '#editor .editor-styles-wrapper .has-background-background-color[class]', 'background-color' ),
+
+	// Text-color darkened
+	array( '#editor .editor-styles-wrapper .has-background-dark-color[class]', 'color', '-1'  ),
+
+	// Background-color darkened
+	array( '#editor .editor-styles-wrapper .has-background-dark-background-color[class]', 'background-color', '-1' ),
+
+	// Text-color lightened
+	array( '#editor .editor-styles-wrapper .has-background-light-color[class]', 'color', '+1'  ),
+
+	// Background-color lightened
+	array( '#editor .editor-styles-wrapper .has-background-light-background-color[class]', 'background-color', '+1' ),
+
+), __( 'Background Color' ) );
+
+// Foreground Color
+// --global--color-background
+add_color_rule( 'txt', '#444444', array(
+
+	// Text-color
+	array( '#editor .editor-styles-wrapper,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .cat-links,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-meta,
+			#editor .editor-styles-wrapper .wp-block-latest-posts .wp-block-latest-posts__post-date,
+			#editor .editor-styles-wrapper .wp-block-pullquote .wp-block-pullquote__citation,
+			#editor .editor-styles-wrapper .wp-block-pullquote cite,
+			#editor .editor-styles-wrapper .wp-block-pullquote footer,
+			#editor .editor-styles-wrapper .wp-block-quote .wp-block-quote__citation,
+			#editor .editor-styles-wrapper .wp-caption,
+			#editor .editor-styles-wrapper .wp-caption-text,
+			#editor .editor-styles-wrapper blockquote cite,
+			#editor .editor-styles-wrapper blockquote footer,
+			#editor .editor-styles-wrapper figcaption,
+			#editor .editor-styles-wrapper .editor-post-title .editor-post-title__input,
+			#editor .editor-styles-wrapper .editor-post-title .editor-post-title__input::placeholder', 'color' ),
+
+	// Background-color
+	array( '#editor .editor-styles-wrapper .wp-block-cover,
+			#editor .editor-styles-wrapper .wp-block-cover-image', 'background-color' ),
+
+	/**
+	 * Utility Classes
+	 */
+
+	// Text-color
+	array( '#editor .editor-styles-wrapper .has-background-background-color[class],
+			#editor .editor-styles-wrapper .has-background-dark-background-color[class],
+			#editor .editor-styles-wrapper .has-background-light-background-color[class],
+			#editor .editor-styles-wrapper .has-foreground-color[class],
+			#editor .editor-styles-wrapper .has-background-background-color[class] a', 'color' ),
+
+	// Background-color
+	array( '#editor .editor-styles-wrapper .has-foreground-background-color[class]', 'background-color' ),
+
+	// Text-color darkened
+	array( '#editor .editor-styles-wrapper .has-foreground-dark-color[class]', 'color', '-1' ),
+
+	// Background-color darkened
+	array( '#editor .editor-styles-wrapper .has-foreground-dark-background-color[class]', 'background-color', '-1' ),
+
+	// Text-color brightened
+	array( '#editor .editor-styles-wrapper .has-foreground-light-color[class]', 'color', '+2' ),
+
+	// Background-color brightened
+	array( '#editor .editor-styles-wrapper .has-foreground-light-background-color[class]', 'background-color', '+2' ),
+
+), __( 'Text Color' ) );
+
+// Primary Color
+// --global--color-primary
+add_color_rule( 'link', '#000000', array(
+
+	// Background-color
+	array( '#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:active,
+			#editor .editor-styles-wrapper .wp-block-search .wp-block-search__button:active', 'background-color' ),
+
+	// Text-color
+	array( '#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a,
+			#editor .editor-styles-wrapper .wp-block-file .wp-block-file__textlink,
+			#editor .editor-styles-wrapper a,
+			#editor .editor-styles-wrapper a:active', 'color' ),
+
+	/**
+	 * Utility Classes
+	 */
+
+	// Background-color
+	array( '#editor .editor-styles-wrapper .has-primary-background-color[class]', 'background-color' ),
+
+	// Text-color
+	array( '#editor .editor-styles-wrapper .has-primary-color[class],
+			#editor .editor-styles-wrapper .has-black-background-color[class],
+			#editor .editor-styles-wrapper .has-foreground-dark-color[class]', 'color' ),
+
+), __( 'Primary Color' ) );
+
+// Secondary Color
+// --global--color-secondary
+add_color_rule( 'fg1', '#3C8067', array(
+
+	// Text-color
+	array( '#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .cat-links a:active,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .cat-links a:hover,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-meta a:active,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-meta a:hover,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a:hover,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .more-link:active,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .more-link:hover,
+			#editor .editor-styles-wrapper .wp-block-button__link.is-style-outline,
+			#editor .editor-styles-wrapper .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus,
+			#editor .editor-styles-wrapper .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover,
+			#editor .editor-styles-wrapper a:focus,
+			#editor .editor-styles-wrapper a:hover', 'color' ),
+
+	// Background-color
+	array( '#editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
+			#editor .editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link,
+			#editor .editor-styles-wrapper .wp-block-file .wp-block-file__button,
+			#editor .editor-styles-wrapper .wp-block-search .wp-block-search__button', 'background-color' ),
+
+	// border-bottom-color
+	array( '#editor .editor-styles-wrapper .wp-block-file .wp-block-file__textlink,
+			#editor .editor-styles-wrapper a', 'border-bottom-color' ),
+	
+	// border-left-color
+	array( '#editor .editor-styles-wrapper .wp-block-quote,
+			#editor .editor-styles-wrapper .wp-block-quote.is-large,
+			#editor .editor-styles-wrapper .wp-block-quote.is-style-large', 'border-left-color' ),
+
+	// border-right-color
+	array( '#editor .editor-styles-wrapper .wp-block-quote.has-text-align-right,
+			#editor .editor-styles-wrapper .wp-block-quote.is-large.has-text-align-right,
+			#editor .editor-styles-wrapper .wp-block-quote.is-style-large.has-text-align-right', 'border-right-color' ),
+
+	/**
+	 * Utility Classes
+	 */
+
+	// Background-color
+	array( '#editor .editor-styles-wrapper .has-secondary-background-color[class]', 'background-color' ),
+
+	// Text-color
+	array( '#editor .editor-styles-wrapper .has-secondary-color[class],
+			#editor .editor-styles-wrapper .has-white-background-color[class]', 'color' ),
+
+), __( 'Secondary Color' ) );
+
+// Tertiary Color
+// --global--color-tertiary
+add_color_rule( 'fg2', '#FAFBF6', array(
+
+	// Background-color
+	array( '#editor .editor-styles-wrapper .has-tertiary-background-color[class]', 'background-color' ),
+
+	// Text-color
+	array( '#editor .editor-styles-wrapper .has-tertiary-color[class],
+			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .block-editor-block-list__block,
+			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-image-text,
+			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-text,
+			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover__inner-container,
+			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .block-editor-block-list__block,
+			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-image-text,
+			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-text,
+			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover__inner-container', 'color' ),
+
+), __( 'Tertiary Color' ) );
+
+/**
+ * Custom CSS
+ * The plugin takes the body of this function and applies it in a style tag in the document head.
+ */
+function seedlet_custom_colors_extra_css() {
+	$colors_array = get_theme_mod( 'colors_manager' );
+	$color_bg = $colors_array['colors']['bg'];
+	$color_fg1 = $colors_array['colors']['fg1'];
+	$color_fg2 = $colors_array['colors']['fg2']; ?>
+
+	/* 
+	 * Custom gradients.
+	*/
+	#editor .editor-styles-wrapper .has-hard-diagonal-gradient-background {
+		background: linear-gradient(to bottom right, <?php echo $color_fg1; ?> 49.9%, <?php echo $color_fg2; ?> 50%);
+	}
+
+	#editor .editor-styles-wrapper .has-hard-diagonal-inverted-gradient-background {
+		background: linear-gradient(to top left, <?php echo $color_fg1; ?> 49.9%, <?php echo $color_fg2; ?> 50%);
+	}
+
+	#editor .editor-styles-wrapper .has-diagonal-gradient-background {
+		background: linear-gradient(to bottom right, <?php echo $color_fg1; ?>, <?php echo $color_fg2; ?>);
+	}
+
+	#editor .editor-styles-wrapper .has-diagonal-inverted-gradient-background {
+		background: linear-gradient(to top left, <?php echo $color_fg1; ?>, <?php echo $color_fg2; ?>);
+	}
+
+	#editor .editor-styles-wrapper .has-hard-horizontal-gradient-background {
+		background: linear-gradient(to bottom, <?php echo $color_fg1; ?> 50%, <?php echo $color_fg2; ?> 50%);
+	}
+
+	#editor .editor-styles-wrapper .has-hard-horizontal-inverted-gradient-background {
+		background: linear-gradient(to top, <?php echo $color_fg1; ?> 50%, <?php echo $color_fg2; ?> 50%);
+	}
+
+	#editor .editor-styles-wrapper .has-horizontal-gradient-background {
+		background: linear-gradient(to bottom, <?php echo $color_fg1; ?>, <?php echo $color_fg2; ?>);
+	}
+
+	#editor .editor-styles-wrapper .has-horizontal-inverted-gradient-background {
+		background: linear-gradient(to top, <?php echo $color_fg1; ?>, <?php echo $color_fg2; ?>);
+	}
+
+	#editor .editor-styles-wrapper .has-stripe-gradient-background {
+		background: linear-gradient(to bottom, transparent 20%, <?php echo $color_fg1; ?> 20%, <?php echo $color_fg1; ?> 80%, transparent 80%);
+	}
+<?php }
+add_theme_support( 'custom_colors_extra_css', 'seedlet_custom_colors_extra_css' );

seedlet/inc/wpcom.php

@@ -8,7 +8,134 @@
  */
 
 /**
- * Add setting for hiding page title on the homepage.
+ * Adds support for wp.com-specific theme functions.
+ *
+ * @global array $themecolors
+ */
+function seedlet_wpcom_setup() {
+	global $themecolors;
+
+	// Set theme colors for third party services.
+	if ( ! isset( $themecolors ) ) {
+		$themecolors = array(
+			'bg'     => 'FFFFFF',
+			'txt'    => '333333',
+			'link'   => '000000',
+			'fg1'    => '3C8067',
+			'fg2'    => 'FAFBF6',
+		);
+	}
+
+	// Disable automatically generated color palettes.
+	add_theme_support( 'wpcom-colors', array(
+		'only-featured-palettes' => true,
+	) );
+
+	/**
+	 * De-register original editor color palette in favor of the wpcom implementation
+	 */
+	remove_theme_support( 'editor-color-palette' );
+	remove_theme_support( 'editor-gradient-presets' );
+
+	$wpcom_colors_array = get_theme_mod( 'colors_manager' );
+	if ( ! empty( $wpcom_colors_array ) ) {
+		$primary    = $wpcom_colors_array['colors']['link'];
+		$secondary  = $wpcom_colors_array['colors']['fg1'];
+		$foreground = $wpcom_colors_array['colors']['txt'];
+		$tertiary   = $wpcom_colors_array['colors']['fg2'];
+		$background = $wpcom_colors_array['colors']['bg'];
+
+		add_theme_support(
+			'editor-color-palette',
+			array(
+				array(
+					'name'  => __( 'Primary', 'seedlet' ),
+					'slug'  => 'primary',
+					'color' => $primary
+				),
+				array(
+					'name'  => __( 'Secondary', 'seedlet' ),
+					'slug'  => 'secondary',
+					'color' => $secondary
+				),
+				array(
+					'name'  => __( 'Foreground', 'seedlet' ),
+					'slug'  => 'foreground',
+					'color' => $foreground
+				),
+				array(
+					'name'  => __( 'Tertiary', 'seedlet' ),
+					'slug'  => 'tertiary',
+					'color' => $tertiary
+				),
+				array(
+					'name'  => __( 'Background', 'seedlet' ),
+					'slug'  => 'background',
+					'color' => $background
+				),
+			)
+		);
+
+		$gradient_color_a = $secondary;
+		$gradient_color_b = $tertiary;
+
+		add_theme_support(
+			'editor-gradient-presets',
+			array(
+				array(
+					'name'     => __( 'Diagonal', 'seedlet' ),
+					'gradient' => 'linear-gradient(to bottom right, ' . $gradient_color_a . ' 49.9%, ' . $gradient_color_b  . ' 50%)',
+					'slug'     => 'hard-diagonal',
+				),
+				array(
+					'name'     => __( 'Diagonal inverted', 'seedlet' ),
+					'gradient' => 'linear-gradient(to top left, ' . $gradient_color_a . ' 49.9%, ' . $gradient_color_b . ' 50%)',
+					'slug'     => 'hard-diagonal-inverted',
+				),
+				array(
+					'name'     => __( 'Horizontal', 'seedlet' ),
+					'gradient' => 'linear-gradient(to bottom, ' . $gradient_color_a . ' 50%, ' . $gradient_color_b . ' 50%)',
+					'slug'     => 'hard-horizontal',
+				),
+				array(
+					'name'     => __( 'Horizontal inverted', 'seedlet' ),
+					'gradient' => 'linear-gradient(to top, ' . $gradient_color_a . ' 50%, ' . $gradient_color_b . ' 50%)',
+					'slug'     => 'hard-horizontal-inverted',
+				),
+				array(
+					'name'     => __( 'Diagonal gradient', 'seedlet' ),
+					'gradient' => 'linear-gradient(to bottom right, ' . $gradient_color_a . ', ' . $gradient_color_b . ')',
+					'slug'     => 'diagonal',
+				),
+				array(
+					'name'     => __( 'Diagonal inverted gradient', 'seedlet' ),
+					'gradient' => 'linear-gradient(to top left, ' . $gradient_color_a . ', ' . $gradient_color_b . ')',
+					'slug'     => 'diagonal-inverted',
+				),
+				array(
+					'name'     => __( 'Horizontal gradient', 'seedlet' ),
+					'gradient' => 'linear-gradient(to bottom, ' . $gradient_color_a . ', ' . $gradient_color_b . ')',
+					'slug'     => 'horizontal',
+				),
+				array(
+					'name'     => __( 'Horizontal inverted gradient', 'seedlet' ),
+					'gradient' => 'linear-gradient(to top, ' . $gradient_color_a . ', ' . $gradient_color_b . ')',
+					'slug'     => 'horizontal-inverted',
+				),
+				array(
+					'name'     => __( 'Stripe', 'seedlet' ),
+					'gradient' => 'linear-gradient(to bottom, transparent 20%, ' . $gradient_color_a . ' 20%, ' . $gradient_color_a . ' 80%, transparent 80%)',
+					'slug'     => 'stripe',
+				),
+			)
+		);
+	}
+}
+add_action( 'after_setup_theme', 'seedlet_wpcom_setup' );
+
+/**
+ * Add settings for hiding page title on the homepage 
+ * and a customizer message about contrast.
  */
 function seedlet_wpcom_customize_update( $wp_customize ) {
 	$wp_customize->add_setting( 'hide_front_page_title', array(
@@ -26,6 +153,19 @@ function seedlet_wpcom_customize_update( $wp_customize ) {
 		'type'		  => 'checkbox',
 		'settings'	  => 'hide_front_page_title',
 	) );
+
+	$wp_customize->add_setting( 'color_a11y_warning' );
+    $wp_customize->add_control( 'color_a11y_warning', array(
+        'id'          => 'id',
+        'label'       => esc_html__( 'Color Accessibility Warning', 'seedlet' ),
+		'description' => sprintf(
+							__( 'In order to ensure people can read your site, try to maintain a strong contrast ratio between the colors you choose here. <a href="%s" target="_blank">Learn more about color contrast</a>.', 'seedlet' ),
+							esc_url( 'https://a11yproject.com/posts/what-is-color-contrast/' )
+						 ),
+        'section'     => 'colors_manager_tool',
+		'priority'	  => 10,
+		'type'		  => 'hidden',
+	) );
 }
 add_action( 'customize_register', 'seedlet_wpcom_customize_update' );
 
@@ -112,3 +252,11 @@ function seedlet_wpcom_editor_scripts() {
 	wp_enqueue_style( 'seedlet-wpcom-editor-style', get_template_directory_uri() . '/inc/wpcom-style-editor.css', array(), '20200629' );
 }
 add_action( 'enqueue_block_editor_assets', 'seedlet_wpcom_editor_scripts' );
+
+/**
+ * Enqueue CSS for customizer pane.
+ */
+function seedlet_enqueue_message_scripts() {
+	wp_enqueue_style( 'seedlet-customize-message-wpcom-style', get_template_directory_uri() . '/inc/wpcom-customize-message.css', array(), wp_get_theme()->get( 'Version' ) );
+}
+add_action( 'customize_controls_enqueue_scripts', 'seedlet_enqueue_message_scripts' );

seedlet/package.json

@@ -47,6 +47,7 @@
     "build:print": "node-sass assets/sass/print.scss assets/css/print.css --output-style expanded --indent-type tab --indent-width 1",
     "build": "run-p \"build:*\" && npm run ie",
     "ie": "postcss style.css -o assets/css/ie.css",
+    "ie-editor": "postcss assets/css/style-editor.css -o assets/css/ie-editor.css",
     "watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
     "child-theme": "sh ../theme-dev-utils/build-child-theme.sh"
   }

seedlet/style-rtl.css

@@ -2432,43 +2432,43 @@ table th,
 }
 
 .has-primary-color[class] {
-	color: var(--global--color-primary) !important;
+	color: var(--global--color-primary);
 }
 
 .has-secondary-color[class] {
-	color: var(--global--color-secondary) !important;
+	color: var(--global--color-secondary);
 }
 
 .has-foreground-color[class] {
-	color: var(--global--color-foreground) !important;
+	color: var(--global--color-foreground);
 }
 
 .has-foreground-light-color[class] {
-	color: var(--global--color-foreground-light) !important;
+	color: var(--global--color-foreground-light);
 }
 
 .has-foreground-dark-color[class] {
-	color: var(--global--color-foreground-dark) !important;
+	color: var(--global--color-foreground-dark);
 }
 
 .has-tertiary-color[class] {
-	color: var(--global--color-tertiary) !important;
+	color: var(--global--color-tertiary);
 }
 
 .has-background-dark-color[class] {
-	color: var(--global--color-background-dark) !important;
+	color: var(--global--color-background-dark);
 }
 
 .has-background-color[class] {
-	color: var(--global--color-background) !important;
+	color: var(--global--color-background);
 }
 
 .has-white-color[class] {
-	color: var(--global--color-white) !important;
+	color: var(--global--color-white);
 }
 
 .has-black-color[class] {
-	color: var(--global--color-black) !important;
+	color: var(--global--color-black);
 }
 
 .has-background:not(.has-background-background-color) a,
@@ -2477,52 +2477,52 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: var(--global--color-primary) !important;
+	background-color: var(--global--color-primary);
 	color: var(--global--color-background);
 }
 
 .has-secondary-background-color[class] {
-	background-color: var(--global--color-secondary) !important;
+	background-color: var(--global--color-secondary);
 	color: var(--global--color-background);
 }
 
 .has-foreground-background-color[class] {
-	background-color: var(--global--color-foreground) !important;
+	background-color: var(--global--color-foreground);
 	color: var(--global--color-background);
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: var(--global--color-foreground-light) !important;
+	background-color: var(--global--color-foreground-light);
 	color: var(--global--color-background);
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: var(--global--color-foreground-dark) !important;
+	background-color: var(--global--color-foreground-dark);
 	color: var(--global--color-background);
 }
 
 .has-tertiary-background-color[class] {
-	background-color: var(--global--color-tertiary) !important;
+	background-color: var(--global--color-tertiary);
 	color: var(--global--color-foreground);
 }
 
 .has-background-dark-background-color[class] {
-	background-color: var(--global--color-background-dark) !important;
+	background-color: var(--global--color-background-dark);
 	color: var(--global--color-foreground);
 }
 
 .has-background-background-color[class] {
-	background-color: var(--global--color-background) !important;
+	background-color: var(--global--color-background);
 	color: var(--global--color-foreground);
 }
 
 .has-white-background-color[class] {
-	background-color: var(--global--color-white) !important;
+	background-color: var(--global--color-white);
 	color: var(--global--color-secondary);
 }
 
 .has-black-background-color[class] {
-	background-color: var(--global--color-black) !important;
+	background-color: var(--global--color-black);
 	color: var(--global--color-primary);
 }
 

seedlet/style.css

@@ -2445,43 +2445,43 @@ table th,
 }
 
 .has-primary-color[class] {
-	color: var(--global--color-primary) !important;
+	color: var(--global--color-primary);
 }
 
 .has-secondary-color[class] {
-	color: var(--global--color-secondary) !important;
+	color: var(--global--color-secondary);
 }
 
 .has-foreground-color[class] {
-	color: var(--global--color-foreground) !important;
+	color: var(--global--color-foreground);
 }
 
 .has-foreground-light-color[class] {
-	color: var(--global--color-foreground-light) !important;
+	color: var(--global--color-foreground-light);
 }
 
 .has-foreground-dark-color[class] {
-	color: var(--global--color-foreground-dark) !important;
+	color: var(--global--color-foreground-dark);
 }
 
 .has-tertiary-color[class] {
-	color: var(--global--color-tertiary) !important;
+	color: var(--global--color-tertiary);
 }
 
 .has-background-dark-color[class] {
-	color: var(--global--color-background-dark) !important;
+	color: var(--global--color-background-dark);
 }
 
 .has-background-color[class] {
-	color: var(--global--color-background) !important;
+	color: var(--global--color-background);
 }
 
 .has-white-color[class] {
-	color: var(--global--color-white) !important;
+	color: var(--global--color-white);
 }
 
 .has-black-color[class] {
-	color: var(--global--color-black) !important;
+	color: var(--global--color-black);
 }
 
 .has-background:not(.has-background-background-color) a,
@@ -2490,52 +2490,52 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: var(--global--color-primary) !important;
+	background-color: var(--global--color-primary);
 	color: var(--global--color-background);
 }
 
 .has-secondary-background-color[class] {
-	background-color: var(--global--color-secondary) !important;
+	background-color: var(--global--color-secondary);
 	color: var(--global--color-background);
 }
 
 .has-foreground-background-color[class] {
-	background-color: var(--global--color-foreground) !important;
+	background-color: var(--global--color-foreground);
 	color: var(--global--color-background);
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: var(--global--color-foreground-light) !important;
+	background-color: var(--global--color-foreground-light);
 	color: var(--global--color-background);
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: var(--global--color-foreground-dark) !important;
+	background-color: var(--global--color-foreground-dark);
 	color: var(--global--color-background);
 }
 
 .has-tertiary-background-color[class] {
-	background-color: var(--global--color-tertiary) !important;
+	background-color: var(--global--color-tertiary);
 	color: var(--global--color-foreground);
 }
 
 .has-background-dark-background-color[class] {
-	background-color: var(--global--color-background-dark) !important;
+	background-color: var(--global--color-background-dark);
 	color: var(--global--color-foreground);
 }
 
 .has-background-background-color[class] {
-	background-color: var(--global--color-background) !important;
+	background-color: var(--global--color-background);
 	color: var(--global--color-foreground);
 }
 
 .has-white-background-color[class] {
-	background-color: var(--global--color-white) !important;
+	background-color: var(--global--color-white);
 	color: var(--global--color-secondary);
 }
 
 .has-black-background-color[class] {
-	background-color: var(--global--color-black) !important;
+	background-color: var(--global--color-black);
 	color: var(--global--color-primary);
 }