Merge pull request #2217 from Automattic/try/seedlet/jetpack-global-styles
Seedlet: Try implementing Jetpack's Global Styles
This commit is contained in:
Kjell Reigstad
GitHub
commit
8be9be78eb
11 changed files with 223 additions and 214 deletions
5
seedlet/assets/css/custom-color-overrides.css
Normal file
5
seedlet/assets/css/custom-color-overrides.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/**
|
||||
* Custom Color Overrides
|
||||
*
|
||||
* This file is automatically populated if the user chooses custom colors in the Customzier.
|
||||
*/
|
||||
|
|
@ -1,6 +1,202 @@
|
|||
/**
|
||||
* These styles should be loaded by the Block Editor only
|
||||
*/
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Repsonsive Styles
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,198 +0,0 @@
|
|||
/**
|
||||
* These styles should be loaded by the Block Editor only
|
||||
*/
|
||||
body {
|
||||
/* Globals */
|
||||
/* Font Family */
|
||||
--global--font-primary: 'Playfair Display', Georgia, Times, serif;
|
||||
--global--font-secondary: 'Fira Sans', Helvetica, Arial, sans-serif;
|
||||
--global--font-code: monospace, monospace;
|
||||
--global--font-ui: 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);
|
||||
}
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
/**
|
||||
* These styles should be loaded by the Block Editor only
|
||||
*/
|
||||
|
||||
@import "abstracts/mixins";
|
||||
@import "abstracts/config";
|
||||
@import "elements/config";
|
||||
|
|
@ -8,10 +8,10 @@ $typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-
|
|||
|
||||
@mixin global-variables() {
|
||||
/* Font Family */
|
||||
--global--font-primary: 'Playfair Display', Georgia, Times, serif;
|
||||
--global--font-secondary: 'Fira Sans', Helvetica, Arial, sans-serif;
|
||||
--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(--global--font-secondary);
|
||||
--global--font-ui: var(--font-base, var(--global--font-secondary));
|
||||
|
||||
/* Font Size */
|
||||
--global--font-size-root: #{$typescale-root};
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
* These styles should be loaded by the Block Editor only
|
||||
*/
|
||||
|
||||
// Variables
|
||||
@import "variables-editor";
|
||||
|
||||
// Abstracts
|
||||
// - Mixins, variables and functions
|
||||
@import "abstracts/functions";
|
||||
|
|
|
|||
|
|
@ -265,9 +265,9 @@ class Seedlet_Custom_Colors {
|
|||
* Editor custom color variables.
|
||||
*/
|
||||
function seedlet_editor_custom_color_variables() {
|
||||
wp_enqueue_style( 'seedlet-editor-variables', get_template_directory_uri() . '/assets/css/variables-editor.css', array(), wp_get_theme()->get( 'Version' ) );
|
||||
wp_enqueue_style( 'seedlet-custom-color-overrides', get_template_directory_uri() . '/assets/css/custom-color-overrides.css', array(), wp_get_theme()->get( 'Version' ) );
|
||||
if ( 'default' !== get_theme_mod( 'custom_colors_active' ) ) {
|
||||
wp_add_inline_style( 'seedlet-editor-variables', $this->seedlet_generate_custom_color_variables( 'editor' ) );
|
||||
wp_add_inline_style( 'seedlet-custom-color-overrides', $this->seedlet_generate_custom_color_variables( 'editor' ) );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -257,6 +257,14 @@ if ( ! function_exists( 'seedlet_setup' ) ) :
|
|||
|
||||
// Add support for experimental link color control.
|
||||
add_theme_support( 'experimental-link-color' );
|
||||
|
||||
// Add support for WordPress.com Global Styles.
|
||||
add_theme_support(
|
||||
'jetpack-global-styles',
|
||||
[
|
||||
'enable_theme_default' => true,
|
||||
]
|
||||
);
|
||||
}
|
||||
endif;
|
||||
add_action( 'after_setup_theme', 'seedlet_setup' );
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@
|
|||
],
|
||||
"scripts": {
|
||||
"start": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
|
||||
"build:variables-editor": "node-sass assets/sass/variables-editor.scss assets/css/variables-editor.css --output-style expanded --indent-type tab --indent-width 1",
|
||||
"build:style": "node-sass assets/sass/style.scss style.css --output-style expanded --indent-type tab --indent-width 1",
|
||||
"build:style-editor": "node-sass assets/sass/style-editor.scss assets/css/style-editor.css --output-style expanded --indent-type tab --indent-width 1",
|
||||
"build:woocommerce": "node-sass assets/sass/style-woocommerce.scss assets/css/style-woocommerce.css --output-style expanded --indent-type tab --indent-width 1",
|
||||
|
|
|
|||
|
|
@ -70,10 +70,10 @@ Included in theme screenshot.
|
|||
*/
|
||||
:root {
|
||||
/* Font Family */
|
||||
--global--font-primary: 'Playfair Display', Georgia, Times, serif;
|
||||
--global--font-secondary: 'Fira Sans', Helvetica, Arial, sans-serif;
|
||||
--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(--global--font-secondary);
|
||||
--global--font-ui: var(--font-base, var(--global--font-secondary));
|
||||
/* Font Size */
|
||||
--global--font-size-root: 18px;
|
||||
--global--font-size-ratio: 1.2;
|
||||
|
|
|
|||
|
|
@ -70,10 +70,10 @@ Included in theme screenshot.
|
|||
*/
|
||||
:root {
|
||||
/* Font Family */
|
||||
--global--font-primary: 'Playfair Display', Georgia, Times, serif;
|
||||
--global--font-secondary: 'Fira Sans', Helvetica, Arial, sans-serif;
|
||||
--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(--global--font-secondary);
|
||||
--global--font-ui: var(--font-base, var(--global--font-secondary));
|
||||
/* Font Size */
|
||||
--global--font-size-root: 18px;
|
||||
--global--font-size-ratio: 1.2;
|
||||
|
|
|
|||
Loading…
Reference in a new issue