diff --git a/twentytwenty-blocks/block-styles.css b/twentytwenty-blocks/block-styles.css index 8b38d0b9..325458f9 100644 --- a/twentytwenty-blocks/block-styles.css +++ b/twentytwenty-blocks/block-styles.css @@ -29,8 +29,8 @@ } .is-style-header-nav .wp-block-navigation-link > ul { - background: #000; - border-color: #000; + background: var(--wp--preset--color--foreground); + border-color: var(--wp--preset--color--foreground); border-radius: 0.4rem; font-size: 1.7rem; opacity: 0; diff --git a/twentytwenty-blocks/block-templates/index.html b/twentytwenty-blocks/block-templates/index.html index 1e45b0cf..469d5eae 100644 --- a/twentytwenty-blocks/block-templates/index.html +++ b/twentytwenty-blocks/block-templates/index.html @@ -3,7 +3,11 @@ -
+
+ + + +
diff --git a/twentytwenty-blocks/experimental-theme.json b/twentytwenty-blocks/experimental-theme.json new file mode 100644 index 00000000..f8f2c5e0 --- /dev/null +++ b/twentytwenty-blocks/experimental-theme.json @@ -0,0 +1,58 @@ +{ + "global": { + "presets": { + "color": [ + { + "slug": "background", + "value": "#f5efe0" + }, + { + "slug": "foreground", + "value": "#000" + }, + { + "slug": "primary", + "value": "#cd2653" + } + ], + "font-size": [ + { + "slug": "small", + "value": "20px" + }, + { + "slug": "normal", + "value": "22px" + }, + { + "slug": "large", + "value": "37px" + }, + { + "slug": "huge", + "value": "50px" + } + ], + "line-height": [ + { + "slug": "normal", + "value": "1.8" + }, + { + "slug": "heading", + "value": "1.4" + } + ], + "font-weight": [ + { + "slug": "normal", + "value": "normal" + }, + { + "slug": "heading", + "value": "700" + } + ] + } + } +} \ No newline at end of file diff --git a/twentytwenty-blocks/functions.php b/twentytwenty-blocks/functions.php index 79c184ce..b2a98652 100644 --- a/twentytwenty-blocks/functions.php +++ b/twentytwenty-blocks/functions.php @@ -52,29 +52,19 @@ function twentytwentyblocks_theme_support() { 'editor-color-palette', array( array( - 'name' => __( 'Primary', 'twentytwenty-blocks' ), - 'slug' => 'primary', - 'color' => '#0073AA', - ), - array( - 'name' => __( 'Secondary', 'twentytwenty-blocks' ), - 'slug' => 'secondary', - 'color' => '#005177', + 'name' => __( 'Background', 'twentytwenty-blocks' ), + 'slug' => 'background', + 'color' => '#f5efe0', ), array( - 'name' => __( 'Dark Gray', 'twentytwenty-blocks' ), - 'slug' => 'dark-gray', - 'color' => '#111', + 'name' => __( 'Text', 'twentytwenty-blocks' ), + 'slug' => 'foreground', + 'color' => '#000', ), array( - 'name' => __( 'Light Gray', 'twentytwenty-blocks' ), - 'slug' => 'light-gray', - 'color' => '#767676', - ), - array( - 'name' => __( 'White', 'twentytwenty-blocks' ), - 'slug' => 'white', - 'color' => '#FFF', + 'name' => __( 'Primary', 'twentytwenty-blocks' ), + 'slug' => 'primary', + 'color' => '#cd2653', ), ) ); @@ -308,6 +298,16 @@ function twentytwentyblocks_register_styles() { } add_action( 'wp_enqueue_scripts', 'twentytwentyblocks_register_styles' ); +/** + * Load styles into Edit Site + * (This shouldn't be necessary but it seems to be for now.) + */ +function twentytwentyblocks_register_FSE_styles() { + $theme_version = wp_get_theme()->get( 'Version' ); + wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/twentytwenty-styles/editor-style-block.css', false, $theme_version ); + wp_enqueue_style( 'custom_wp_admin_css' ); +} +add_action( 'admin_enqueue_scripts', 'twentytwentyblocks_register_FSE_styles' ); /** * Register Block Patterns. @@ -321,4 +321,4 @@ function twentytwentyblocks_register_styles() { 'content' => "\n
\n
\n
\"\"/
\n\n\n\n

Works and Days

\n\n\n\n

August 1 – December 1

\n\n\n\n\n
\n\n\n\n
\n
\"\"/
\n\n\n\n

The Life I Deserve

\n\n\n\n

August 1 – December 1

\n\n\n\n\n
\n
\n", ) ); -} \ No newline at end of file +} diff --git a/twentytwenty-blocks/style.css b/twentytwenty-blocks/style.css index 271a42d8..1ebc3c93 100644 --- a/twentytwenty-blocks/style.css +++ b/twentytwenty-blocks/style.css @@ -16,6 +16,13 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me */ @import url('twentytwenty-styles/style.css'); +/* + * Set the default link color. +*/ +:root { + --wp--style--color--link: var(--wp--preset--color--primary); +} + /* ** Header */ @@ -48,22 +55,13 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me background-color: #fff; } + /* -** Entry Header +** Site Content +** (Extra specificity here is necessary to override default theme styles for content within Group block inner containers.) */ - -.site-content > h1:first-child { - width: 100%; - padding: 4rem 2rem; - margin: 0 0 4rem; - text-align: center; - background: #FFF; -} - -@media screen and (min-width: 700px) { - .site-content > h1:first-child { - padding: 8rem 2rem; - } +.site-content > .wp-block-group__inner-container > .entry-content:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { + max-width: inherit; } /* diff --git a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css index 55d1446f..caeaa80f 100644 --- a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css +++ b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css @@ -3,9 +3,13 @@ /* Twenty Twenty Editor Styles — Block Editor /* ------------------------------------------- */ +body { + --wp--style--color--link: var(--wp--preset--color--primary); +} + .editor-styles-wrapper { - background: #f5efe0; - color: #000; + background: var(--wp--preset--color--background); + color: var(--wp--preset--color--foreground); letter-spacing: -0.015em; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; @@ -13,7 +17,8 @@ .editor-styles-wrapper > * { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; - font-size: 18px; + font-size: var(--wp--preset--font-size--normal); + font-weight: var(--wp--preset--font-weight--normal); } @supports ( font-variation-settings: normal ) { @@ -110,7 +115,7 @@ Inter variable font. Usage: .editor-styles-wrapper .editor-rich-text__tinymce, .editor-styles-wrapper .editor-rich-text__tinymce.mce-content-body { - line-height: 1.5; + line-height: var(--wp--preset--line-height--normal); } @@ -162,65 +167,50 @@ Inter variable font. Usage: /* CUSTOM COLORS */ -:root .has-accent-color { - color: #cd2653; -} - -:root .has-accent-background-color { - background-color: #cd2653; - color: #fff; -} - -:root .has-primary-color { - color: #000; -} - -:root .has-primary-background-color { - background-color: #000; - color: #f5efe0; -} - -:root .has-secondary-color { - color: #6d6d6d; +.editor-styles-wrapper .has-primary-color, +.editor-styles-wrapper .wp-block-button__link.has-primary-color { + color: var(--wp--preset--color--primary); } -:root .has-secondary-background-color { - background-color: #6d6d6d; - color: #fff; +.editor-styles-wrapper .has-primary-background-color, +.editor-styles-wrapper .wp-block-button__link.has-primary-background-color { + background-color: var(--wp--preset--color--primary); } -:root .has-subtle-background-color { - color: #dcd7ca; +.editor-styles-wrapper .has-foreground-color, +.editor-styles-wrapper .wp-block-button__link.has-foreground-color { + color: var(--wp--preset--color--foreground); } -:root .has-subtle-background-background-color { - background-color: #dcd7ca; - color: #000; +.editor-styles-wrapper .has-foreground-background-color, +.editor-styles-wrapper .wp-block-button__link.has-foreground-background-color { + background-color: var(--wp--preset--color--foreground); } -:root .has-background-color { - color: #f5efe0; +.editor-styles-wrapper .has-background-color, +.editor-styles-wrapper .wp-block-button__link.has-background-color { + color: var(--wp--preset--color--background); } -:root .has-background-background-color { - background-color: #f5efe0; - color: #000; +.editor-styles-wrapper .has-background-background-color, +.editor-styles-wrapper .wp-block-button__link.has-background-background-color { + background-color: var(--wp--preset--color--background); } /* GENERAL COLORS */ .has-black-background-color { - background-color: #000; + background-color: var(--wp--preset--color--foreground); color: #fff; } .has-white-background-color { background-color: #fff; - color: #000; + color: var(--wp--preset--color--foreground); } .has-black-color { - color: #000; + color: var(--wp--preset--color--foreground); } .has-white-color { @@ -231,7 +221,7 @@ Inter variable font. Usage: /* Typography -------------------------------- */ .editor-styles-wrapper .editor-block-list__layout a { - color: #cd2653; + color: var(--wp--preset--color--primary); text-decoration: underline; } @@ -249,37 +239,37 @@ Inter variable font. Usage: .editor-styles-wrapper .wp-block h6 { font-feature-settings: "lnum"; font-variant-numeric: lining-nums; - font-weight: 700; + font-weight: var(--wp--preset--font-weight--heading); letter-spacing: -0.0415625em; - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); margin: 40px 0 25px; } .editor-post-title__block .editor-post-title__input, -.editor-styles-wrapper .wp-block h1 { - font-size: 36px; - font-weight: 800; +.editor-styles-wrapper h1.wp-block { + font-size: 84px; + font-weight: bolder; line-height: 1.138888889; } -.editor-styles-wrapper .wp-block h2 { - font-size: 32px; +.editor-styles-wrapper h2.wp-block { + font-size: 48px; } -.editor-styles-wrapper .wp-block h3 { - font-size: 28px; +.editor-styles-wrapper h3.wp-block { + font-size: 40px; } -.editor-styles-wrapper .wp-block h4 { - font-size: 24px; +.editor-styles-wrapper h4.wp-block { + font-size: 32px; } -.editor-styles-wrapper .wp-block h5 { - font-size: 21px; +.editor-styles-wrapper h5.wp-block { + font-size: 24px; } -.editor-styles-wrapper .wp-block h6 { - font-size: 16px; +.editor-styles-wrapper h6.wp-block { + font-size: 18px; letter-spacing: 0.03125em; text-transform: uppercase; } @@ -304,9 +294,9 @@ Inter variable font. Usage: /* DROP CAP */ .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter { - color: #cd2653; + color: var(--wp--preset--color--primary); font-size: 5.1em; - font-weight: 800; + font-weight: var(--wp--preset--font-size--huge); margin: 0.05em 0.1em 0 0; } @@ -331,7 +321,7 @@ Inter variable font. Usage: .editor-styles-wrapper pre { border-color: #dcd7ca; border-radius: 0; - line-height: 1.5; + line-height: var(--wp--preset--line-height--normal); padding: 1em; } @@ -444,7 +434,7 @@ Inter variable font. Usage: .editor-styles-wrapper ul.wp-block-latest-posts li, .editor-styles-wrapper ul.wp-block-categories__list li { color: #6d6d6d; - line-height: 1.476; + line-height: var(--wp--preset--line-height--normal);; margin: 5px 0 0 0; } @@ -483,7 +473,7 @@ Inter variable font. Usage: font-size: 0.7em; font-weight: 600; letter-spacing: normal; - line-height: 1.476; + line-height: var(--wp--preset--line-height--normal);; margin-top: 0.15em; } @@ -494,7 +484,7 @@ Inter variable font. Usage: border-collapse: collapse; border-spacing: 0; empty-cells: show; - font-size: 18px; + font-size: var(--wp--preset--font-size--normal); margin-bottom: 1.1em; width: 100%; } @@ -621,7 +611,7 @@ hr.wp-block-separator.is-style-dots::before { } .editor-styles-wrapper .wp-block-quote { - border-color: #cd2653; + border-color: var(--wp--preset--color--primary); border-style: solid; border-width: 0 0 0 2px; margin: 20px 0; @@ -649,7 +639,7 @@ hr.wp-block-separator.is-style-dots::before { color: #6d6d6d; font-size: 14px; font-weight: 600; - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); } .editor-styles-wrapper .wp-block-quote p { @@ -769,7 +759,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-pullquote::before { background: #fff; border-radius: 50%; - color: #cd2653; + color: var(--wp--preset--color--primary); content: "”"; display: block; font-size: 62px; @@ -891,13 +881,13 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-button__link, .editor-styles-wrapper .wp-block-file__button { - background: #cd2653; + background: var(--wp--preset--color--primary); border-radius: 0; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.0333em; - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); padding: 1.1em 1.44em; text-transform: uppercase; } @@ -911,7 +901,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .is-style-outline .wp-block-button__link { background: none; border-color: currentColor; - color: #cd2653; + color: var(--wp--preset--color--primary); padding: calc(1.1em - 2px) calc(1.44em - 2px); } @@ -995,7 +985,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper ul.wp-block-latest-posts.is-grid li { border-style: solid; border-width: 2px 0 0; - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); margin: 20px 16px 16px 0; padding-top: 12px; } @@ -1038,7 +1028,7 @@ hr.wp-block-separator.is-style-dots::before { } .editor-styles-wrapper .wp-block-file .wp-block-file__textlink { - color: #cd2653; + color: var(--wp--preset--color--primary); font-weight: 700; text-decoration: none; } @@ -1207,35 +1197,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 21px; } - /* TYPOGRAPHY */ - - .editor-post-title__block .editor-post-title__input, - .editor-styles-wrapper .wp-block h1 { - font-size: 64px; - } - - .editor-styles-wrapper .wp-block h2 { - font-size: 48px; - } - - .editor-styles-wrapper .wp-block h3 { - font-size: 40px; - } - - .editor-styles-wrapper .wp-block h4 { - font-size: 32px; - } - - .editor-styles-wrapper .wp-block h5 { - font-size: 24px; - } - - .editor-styles-wrapper li, - .editor-styles-wrapper p, - .editor-styles-wrapper p.wp-block-paragraph { - line-height: 1.476; - } - /* FORMS */ .editor-styles-wrapper fieldset { @@ -1297,7 +1258,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color blockquote > .block-editor-rich-text p, .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .editor-rich-text p, .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .editor-rich-text p { - font-size: 32px; + font-size: 48px; } .editor-styles-wrapper .wp-block-pullquote__citation, @@ -1332,7 +1293,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] p, .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] p { - font-size: 32px; + font-size: 48px; line-height: 1.1875; } @@ -1344,7 +1305,7 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: TABLE */ .editor-styles-wrapper table.wp-block-table { - font-size: 18px; + font-size: var(--wp--preset--font-size--normal); } /* BLOCK: SEPARATOR */ @@ -1363,7 +1324,7 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: COLUMNS */ .wp-block-column { - font-size: 18px; + font-size: var(--wp--preset--font-size--normal); } /* BLOCK: SEPARATOR */ @@ -1384,18 +1345,6 @@ hr.wp-block-separator.is-style-dots::before { @media ( min-width: 1220px ) { - - /* TYPOGRAPHY */ - - .editor-post-title__block .editor-post-title__input, - .editor-styles-wrapper .wp-block h1 { - font-size: 84px; - } - - .editor-styles-wrapper .wp-block h6 { - font-size: 18px; - } - /* BLOCK: PULLQUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote.is-style-solid-color, @@ -1405,7 +1354,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] blockquote p, .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] blockquote p { - font-size: 64px; + font-size: var(--wp--preset--font-size--huge); } /* BLOCK: SEPARATOR */ diff --git a/twentytwenty-blocks/twentytwenty-styles/style.css b/twentytwenty-blocks/twentytwenty-styles/style.css index 008bc0ca..ea3fcfa1 100644 --- a/twentytwenty-blocks/twentytwenty-styles/style.css +++ b/twentytwenty-blocks/twentytwenty-styles/style.css @@ -125,11 +125,12 @@ html { } body { - background: #f5efe0; + background: var(--wp--preset--color--background); box-sizing: border-box; - color: #000; + color: var(--wp--preset--color--foreground); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; - font-size: 1.8rem; + font-size: var(--wp--preset--font-size--normal); + font-weight: var(--wp--preset--font-weight--normal); letter-spacing: -0.015em; text-align: left; } @@ -305,48 +306,47 @@ h6, .faux-heading { font-feature-settings: "lnum"; font-variant-numeric: lining-nums; - font-weight: 700; + font-weight: var(--wp--preset--font-weight--heading); letter-spacing: -0.0415625em; - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); margin: 3.5rem 0 2rem; } h1, .heading-size-1 { - font-size: 3.6rem; - font-weight: 800; - line-height: 1.138888889; + font-size: 6.4rem; + font-weight: bolder; } h2, .heading-size-2 { - font-size: 3.2rem; + font-size: 4.8rem; } h3, .heading-size-3 { - font-size: 2.8rem; + font-size: 4rem; } h4, .heading-size-4 { - font-size: 2.4rem; + font-size: 3.2rem; } h5, .heading-size-5 { - font-size: 2.1rem; + font-size: 2.4rem; } h6, .heading-size-6 { - font-size: 1.6rem; + font-size: 1.8rem; letter-spacing: 0.03125em; text-transform: uppercase; } p { - line-height: 1.5; + line-height: var(--wp--preset--line-height--normal); margin: 0 0 1em 0; } @@ -405,7 +405,7 @@ acronym { } address { - line-height: 1.5; + line-height: var(--wp--preset--line-height--normal); margin: 0 0 2rem 0; } @@ -456,7 +456,7 @@ hr.styled-separator::after { } a { - color: #cd2653; + color: var(--wp--preset--color--primary); text-decoration: underline; } @@ -498,7 +498,7 @@ ol ol ol { } li { - line-height: 1.5; + line-height: var(--wp--preset--line-height--normal); margin: 0.5rem 0 0 2rem; } @@ -520,7 +520,7 @@ li > ol { dt, dd { - line-height: 1.5; + line-height: var(--wp--preset--line-height--normal); } dt { @@ -539,7 +539,7 @@ dd + dt { /* Quotes ------------------------------------ */ blockquote { - border-color: #cd2653; + border-color: var(--wp--preset--color--primary); border-style: solid; /*rtl:ignore*/ @@ -557,7 +557,7 @@ cite { font-size: 1.4rem; font-style: normal; font-weight: 600; - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); } blockquote cite { @@ -590,7 +590,7 @@ samp { pre { border: 0.1rem solid #dcd7ca; - line-height: 1.5; + line-height: var(--wp--preset--line-height--normal); margin: 4rem 0; overflow: auto; padding: 3rem 2rem; @@ -754,7 +754,7 @@ button, input, textarea { border-color: #dcd7ca; - color: #000; + color: var(--wp--preset--color--foreground); } code, @@ -803,7 +803,7 @@ select { textarea { height: 12rem; - line-height: 1.5; + line-height: var(--wp--preset--line-height--normal); width: 100%; } @@ -836,7 +836,7 @@ input[type="reset"], input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; - background: #cd2653; + background: var(--wp--preset--color--primary); border: none; border-radius: 0; color: #fff; @@ -845,7 +845,7 @@ input[type="submit"] { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.0333em; - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); margin: 0; opacity: 1; padding: 1.1em 1.44em; @@ -1092,7 +1092,7 @@ button.toggle { .color-accent, .color-accent-hover:focus, .color-accent-hover:hover { - color: #cd2653; + color: var(--wp--preset--color--primary); } /* BACKGROUND COLOR */ @@ -1100,7 +1100,7 @@ button.toggle { .bg-accent, .bg-accent-hover:focus, .bg-accent-hover:hover { - background-color: #cd2653; + background-color: var(--wp--preset--color--primary); } /* BORDER COLOR */ @@ -1108,14 +1108,14 @@ button.toggle { .border-color-accent, .border-color-accent-hover:focus, .border-color-accent-hover:hover { - border-color: #cd2653; + border-color: var(--wp--preset--color--primary); } /* FILL COLOR */ .fill-children-accent, .fill-children-accent * { - fill: #cd2653; + fill: var(--wp--preset--color--primary); } .fill-children-current-color, @@ -1305,7 +1305,7 @@ ul.social-icons li { .social-icons a { align-items: center; - background: #cd2653; + background: var(--wp--preset--color--primary); border-radius: 50%; color: #fff; display: flex; @@ -1612,7 +1612,7 @@ ul.primary-menu { .primary-menu li { font-size: inherit; - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); position: relative; } @@ -1657,7 +1657,7 @@ ul.primary-menu { /* SUB MENU */ .primary-menu ul { - background: #000; + background: var(--wp--preset--color--foreground); border-radius: 0.4rem; color: #fff; font-size: 1.7rem; @@ -1697,7 +1697,7 @@ ul.primary-menu { .primary-menu ul::after { border: 0.8rem solid transparent; - border-bottom-color: #000; + border-bottom-color: var(--wp--preset--color--foreground); right: 1.8rem; } @@ -1746,7 +1746,7 @@ ul.primary-menu { border-bottom-color: transparent; /*rtl:ignore*/ - border-left-color: #000; + border-left-color: var(--wp--preset--color--foreground); bottom: auto; right: -1.6rem; top: 2rem; @@ -2406,7 +2406,7 @@ body:not(.singular) main > article:first-of-type { } .entry-categories { - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); margin-bottom: 2rem; } @@ -2736,21 +2736,21 @@ h2.entry-title { /* CUSTOM COLORS */ :root .has-accent-color { - color: #cd2653; + color: var(--wp--preset--color--primary); } :root .has-accent-background-color { - background-color: #cd2653; + background-color: var(--wp--preset--color--primary); color: #fff; } :root .has-primary-color { - color: #000; + color: var(--wp--preset--color--primary); } :root .has-primary-background-color { - background-color: #000; - color: #f5efe0; + background-color: var(--wp--preset--color--primary); + color: var(--wp--preset--color--background); } :root .has-secondary-color { @@ -2768,16 +2768,16 @@ h2.entry-title { :root .has-subtle-background-background-color { background-color: #dcd7ca; - color: #000; + color: var(--wp--preset--color--foreground); } :root .has-background-color { - color: #f5efe0; + color: var(--wp--preset--color--background); } :root .has-background-background-color { - background-color: #f5efe0; - color: #000; + background-color: var(--wp--preset--color--background); + color: var(--wp--preset--color--foreground); } @@ -2798,10 +2798,10 @@ h2.entry-title { } .has-drop-cap:not(:focus)::first-letter { - color: #cd2653; + color: var(--wp--preset--color--primary); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: 5.1em; - font-weight: 800; + font-weight: var(--wp--preset--font-weight--heading); margin: 0.05em 0.1em 0 0; } @@ -2981,7 +2981,7 @@ h2.entry-title { .wp-block-latest-comments__comment-meta { font-weight: 700; letter-spacing: -0.025em; - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); } .wp-block-latest-comments__comment-date, @@ -3017,7 +3017,7 @@ h2.entry-title { } .wp-block-button.is-style-outline { - color: #cd2653; + color: var(--wp--preset--color--primary); } .is-style-outline .wp-block-button__link:not(.has-text-color) { @@ -3203,7 +3203,7 @@ figure.wp-block-gallery.alignfull { .wp-block-pullquote::before { background: #fff; border-radius: 50%; - color: #cd2653; + color: var(--wp--preset--color--primary); content: "”"; display: block; font-size: 6.2rem; @@ -3467,7 +3467,7 @@ figure.wp-block-table.is-style-stripes { .entry-content { - line-height: 1.5; + line-height: var(--wp--preset--line-height--normal); } .entry-content > * { @@ -3804,7 +3804,7 @@ div.comment:first-of-type { } .comment-reply-link { - background-color: #cd2653; + background-color: var(--wp--preset--color--primary); color: #fff; display: block; padding: 0.7rem; @@ -3927,7 +3927,7 @@ div.comment:first-of-type { .comment-respond input[type="checkbox"] + label { font-size: 1.5rem; - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); } .comment-respond input[type="text"], @@ -4379,7 +4379,7 @@ div.comment:first-of-type { } .footer-menu li { - line-height: 1.25; + line-height: var(--wp--preset--line-height--heading); margin: 0.25em 0 0 0; } @@ -4423,7 +4423,7 @@ ul.footer-social li { } .footer-social a { - background-color: #cd2653; + background-color: var(--wp--preset--color--primary); height: 3.6rem; width: 3.6rem; } @@ -5281,7 +5281,7 @@ a.to-the-top > * { .entry-content p, .entry-content li { - line-height: 1.476; + line-height: var(--wp--preset--line-height--normal);; } .entry-content h1,