Merge pull request #2233 from Automattic/try/seedlet/color-annotations
Seedlet: Begin adding color annotations
This commit is contained in:
Kjell Reigstad
GitHub
commit
bacbe42355
16 changed files with 3706 additions and 142 deletions
2303
seedlet/assets/css/ie-editor.css
Normal file
2303
seedlet/assets/css/ie-editor.css
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
@if editor == $view {
|
||||
body {
|
||||
:root, body {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
/**
|
||||
* These styles should be loaded by the Block Editor only
|
||||
*/
|
||||
|
||||
// Variables
|
||||
@import "variables-editor";
|
||||
|
||||
// Variables
|
||||
@import "variables-editor";
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
seedlet_fonts_url(),
|
||||
'./assets/css/style-editor.css'
|
||||
add_editor_style(
|
||||
array(
|
||||
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 ) &&
|
||||
'default' === $colors_theme_mod ||
|
||||
empty( get_theme_mod( 'seedlet_--global--color-primary' ) ) ) ? '#000000' : get_theme_mod( 'seedlet_--global--color-primary' );
|
||||
$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' );
|
||||
$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' );
|
||||
$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' );
|
||||
$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' );
|
||||
$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.
|
||||
|
|
|
|||
546
seedlet/inc/wpcom-colors.php
Normal file
546
seedlet/inc/wpcom-colors.php
Normal file
|
|
@ -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' );
|
||||
21
seedlet/inc/wpcom-customize-message.css
Normal file
21
seedlet/inc/wpcom-customize-message.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 );
|
||||
|
|
|
|||
271
seedlet/inc/wpcom-editor-colors.php
Normal file
271
seedlet/inc/wpcom-editor-colors.php
Normal file
|
|
@ -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' );
|
||||
|
|
@ -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' );
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue