diff --git a/twentytwenty-blocks/experimental-theme.json b/twentytwenty-blocks/experimental-theme.json index f9887d45..522cebe1 100644 --- a/twentytwenty-blocks/experimental-theme.json +++ b/twentytwenty-blocks/experimental-theme.json @@ -32,6 +32,26 @@ "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" + } ] } } diff --git a/twentytwenty-blocks/twentytwenty-styles/style.css b/twentytwenty-blocks/twentytwenty-styles/style.css index 38ece270..9553202a 100644 --- a/twentytwenty-blocks/twentytwenty-styles/style.css +++ b/twentytwenty-blocks/twentytwenty-styles/style.css @@ -129,8 +129,8 @@ body { box-sizing: border-box; color: var(--wp--preset--color--text); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; - font-size: var(--wp--typography--font-size); - font-weight: var(--wp--typography--font-weight); + font-size: var(--wp--preset--font-size--normal); + font-weight: var(--wp--preset--font-weight--normal); letter-spacing: -0.015em; text-align: left; } @@ -306,47 +306,47 @@ h6, .faux-heading { font-feature-settings: "lnum"; font-variant-numeric: lining-nums; - font-weight: var(--wp--typography--font-weight-heading); + font-weight: var(--wp--preset--font-weight--heading); letter-spacing: -0.0415625em; - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); margin: 3.5rem 0 2rem; } h1, .heading-size-1 { - font-size: var(--wp--typography--font-size-heading-1); + font-size: var(--wp--preset--font-size--normal-heading-1); font-weight: bolder; } h2, .heading-size-2 { - font-size: var(--wp--typography--font-size-heading-2); + font-size: var(--wp--preset--font-size--normal-heading-2); } h3, .heading-size-3 { - font-size: var(--wp--typography--font-size-heading-3); + font-size: var(--wp--preset--font-size--normal-heading-3); } h4, .heading-size-4 { - font-size: var(--wp--typography--font-size-heading-4); + font-size: var(--wp--preset--font-size--normal-heading-4); } h5, .heading-size-5 { - font-size: var(--wp--typography--font-size-heading-5); + font-size: var(--wp--preset--font-size--normal-heading-5); } h6, .heading-size-6 { - font-size: var(--wp--typography--font-size-heading-6); + font-size: var(--wp--preset--font-size--normal-heading-6); letter-spacing: 0.03125em; text-transform: uppercase; } p { - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); margin: 0 0 1em 0; } @@ -405,7 +405,7 @@ acronym { } address { - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); margin: 0 0 2rem 0; } @@ -498,7 +498,7 @@ ol ol ol { } li { - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); margin: 0.5rem 0 0 2rem; } @@ -520,7 +520,7 @@ li > ol { dt, dd { - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); } dt { @@ -557,7 +557,7 @@ cite { font-size: 1.4rem; font-style: normal; font-weight: 600; - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); } blockquote cite { @@ -590,7 +590,7 @@ samp { pre { border: 0.1rem solid #dcd7ca; - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); margin: 4rem 0; overflow: auto; padding: 3rem 2rem; @@ -803,7 +803,7 @@ select { textarea { height: 12rem; - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); width: 100%; } @@ -845,7 +845,7 @@ input[type="submit"] { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.0333em; - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); margin: 0; opacity: 1; padding: 1.1em 1.44em; @@ -1612,7 +1612,7 @@ ul.primary-menu { .primary-menu li { font-size: inherit; - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); position: relative; } @@ -2406,7 +2406,7 @@ body:not(.singular) main > article:first-of-type { } .entry-categories { - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); margin-bottom: 2rem; } @@ -2801,7 +2801,7 @@ h2.entry-title { color: var(--wp--preset--color--primary); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: 5.1em; - font-weight: var(--wp--typography--font-weight-heading); + 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: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); } .wp-block-latest-comments__comment-date, @@ -3467,7 +3467,7 @@ figure.wp-block-table.is-style-stripes { .entry-content { - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); } .entry-content > * { @@ -3927,7 +3927,7 @@ div.comment:first-of-type { .comment-respond input[type="checkbox"] + label { font-size: 1.5rem; - line-height: var(--wp--typography--line-height-heading); + 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: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); margin: 0.25em 0 0 0; } @@ -5281,7 +5281,7 @@ a.to-the-top > * { .entry-content p, .entry-content li { - line-height: var(--wp--typography--line-height);; + line-height: var(--wp--preset--line-height--normal);; } .entry-content h1,