From a0d368f41c62a660bb483355cec351e4b8c0a253 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Fri, 24 Sep 2021 15:51:49 -0700 Subject: [PATCH 01/14] Add background styles --- src/vendor/wordpress/core-blocks.stories.mdx | 2 +- src/vendor/wordpress/styles/_core-blocks.scss | 73 +++++++++++++++---- 2 files changed, 61 insertions(+), 14 deletions(-) diff --git a/src/vendor/wordpress/core-blocks.stories.mdx b/src/vendor/wordpress/core-blocks.stories.mdx index 2b3f030ab..69c87c3a1 100644 --- a/src/vendor/wordpress/core-blocks.stories.mdx +++ b/src/vendor/wordpress/core-blocks.stories.mdx @@ -466,7 +466,7 @@ applied only if the solid color background is toggled on. - {`
+ {`

One of the hardest things to do in technology is disrupt yourself.

Matt Mullenweg diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 7f2436f0a..48815a14e 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -1,8 +1,10 @@ @use "sass:math"; @use "../../../compiled/tokens/scss/breakpoint"; +@use "../../../compiled/tokens/scss/color"; @use "../../../compiled/tokens/scss/line-height"; @use "../../../compiled/tokens/scss/size"; @use "../../../mixins/button"; +@use "../../../mixins/ms"; @use "../../../mixins/table"; /** @@ -174,6 +176,43 @@ $wp-button-gap: size.$spacing-gap-button-group-default; * Styles for quotes and pull-quotes */ +/** + * 1. Reset margin + * 2. Reset padding + * 3. Reset text alignment + */ + +.wp-block-pullquote { + border-radius: size.$border-radius-medium; + color: color.$base-gray-dark; + margin: 0; /* 1 */ + padding: 0; /* 2 */ + text-align: left; /* 3 */ +} + +.wp-block-pullquote.is-style-solid-color { + background-color: color.$base-gray-lighter; +} + +/** + * Our default styles for the blockquote element include `padding-left`. + * Pullquotes get padding on every side. + */ + +.wp-block-pullquote blockquote { + padding: ms.step(1); +} + +.wp-block-quote cite, +.wp-block-pullquote cite { + font-style: normal; +} + +.wp-block-pullquote p, +.wp-block-pullquote.is-style-solid-color blockquote p { + font-size: ms.step(1); +} + /** * Makes the line-height more consistent with existing typographic styles. */ @@ -184,10 +223,6 @@ $wp-button-gap: size.$spacing-gap-button-group-default; } } -.wp-block-pullquote { - padding: size.$padding-control-vertical 0; -} - /** * The quote itself defaults to being italic, this straightens out the quote */ @@ -200,21 +235,33 @@ $wp-button-gap: size.$spacing-gap-button-group-default; * The pull-quote isn't italic at all, so for consistency, the cite is * italicized. */ -.wp-block-pullquote.is-style-solid-color blockquote cite { - font-style: italic; -} +// .wp-block-pullquote.is-style-solid-color blockquote cite { +// font-style: italic; +// } /** * The quote is a little squished on small screens so the max width * is increased. */ +// .wp-block-pullquote.is-style-solid-color blockquote { +// @media (min-width: breakpoint.$xs) { +// max-width: 80%; +// } +// @media (min-width: breakpoint.$m) { +// max-width: 60%; +// } +// } + +/** + * Reset the max-width so the text spans the width of the container. + */ + .wp-block-pullquote.is-style-solid-color blockquote { - @media (min-width: breakpoint.$xs) { - max-width: 80%; - } - @media (min-width: breakpoint.$m) { - max-width: 60%; - } + max-width: 100%; +} + +.wp-block-pullquote.is-style-solid-color { + background-color: color.$base-gray-lighter; } /** From eeeff8eeec1ab8671c41935ba63c4a3ee4888f80 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Wed, 29 Sep 2021 16:08:20 -0700 Subject: [PATCH 02/14] Update block quote styles --- src/vendor/wordpress/core-blocks.stories.mdx | 8 +- src/vendor/wordpress/styles/_core-blocks.scss | 94 +++++++++++-------- 2 files changed, 59 insertions(+), 43 deletions(-) diff --git a/src/vendor/wordpress/core-blocks.stories.mdx b/src/vendor/wordpress/core-blocks.stories.mdx index 69c87c3a1..f6deae9e9 100644 --- a/src/vendor/wordpress/core-blocks.stories.mdx +++ b/src/vendor/wordpress/core-blocks.stories.mdx @@ -469,7 +469,9 @@ applied only if the solid color background is toggled on. {`

One of the hardest things to do in technology is disrupt yourself.

- Matt Mullenweg +
+ Matt Mullenweg +
`} @@ -484,7 +486,9 @@ It has a control to add an optional `is-style-large` class. {`

In quoting others, we cite ourselves.

- Julio Cortázar +
+ Julio Cortázar +
`} diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 48815a14e..54bd5e88a 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -176,6 +176,11 @@ $wp-button-gap: size.$spacing-gap-button-group-default; * Styles for quotes and pull-quotes */ +.wp-block-pullquote, +.wp-block-quote { + color: color.$base-gray-dark; +} + /** * 1. Reset margin * 2. Reset padding @@ -183,17 +188,13 @@ $wp-button-gap: size.$spacing-gap-button-group-default; */ .wp-block-pullquote { + background-color: color.$base-gray-lighter; border-radius: size.$border-radius-medium; - color: color.$base-gray-dark; margin: 0; /* 1 */ padding: 0; /* 2 */ text-align: left; /* 3 */ } -.wp-block-pullquote.is-style-solid-color { - background-color: color.$base-gray-lighter; -} - /** * Our default styles for the blockquote element include `padding-left`. * Pullquotes get padding on every side. @@ -203,65 +204,76 @@ $wp-button-gap: size.$spacing-gap-button-group-default; padding: ms.step(1); } -.wp-block-quote cite, -.wp-block-pullquote cite { +.wp-block-pullquote cite, +.wp-block-quote cite { font-style: normal; } -.wp-block-pullquote p, -.wp-block-pullquote.is-style-solid-color blockquote p { - font-size: ms.step(1); +/** + * Add an em dash before the citation. + */ + +.wp-block-pullquote cite::before, +.wp-block-quote cite::before { + content: '\2014', } /** * Makes the line-height more consistent with existing typographic styles. */ + +.wp-block-pullquote, .wp-block-quote.is-large, -.wp-block-pullquote { +.wp-block-quote.is-style-large { p { line-height: line-height.$tight; } } /** - * The quote itself defaults to being italic, this straightens out the quote + * Reset the max-width so the text spans the width of the container. */ -.wp-block-quote.is-style-large p, -.wp-block-quote.is-large p { - font-style: normal; + + .wp-block-pullquote.is-style-solid-color { + blockquote { + max-width: 100%; + } } -/** - * The pull-quote isn't italic at all, so for consistency, the cite is - * italicized. - */ -// .wp-block-pullquote.is-style-solid-color blockquote cite { -// font-style: italic; -// } +.wp-block-pullquote, +.wp-block-pullquote.is-style-solid-color blockquote { + p { + font-size: ms.step(1); + } +} -/** - * The quote is a little squished on small screens so the max width - * is increased. - */ -// .wp-block-pullquote.is-style-solid-color blockquote { -// @media (min-width: breakpoint.$xs) { -// max-width: 80%; -// } -// @media (min-width: breakpoint.$m) { -// max-width: 60%; -// } -// } +.wp-block-quote { + border-left: size.$edge-medium solid color.$base-gray-light; +} /** - * Reset the max-width so the text spans the width of the container. - */ +* 1. Reset margins and padding +* 2. The quote itself defaults to being italic, this straightens out the quote +*/ +.wp-block-quote.is-style-large, +.wp-block-quote.is-large { + margin: 0; /* 1 */ + padding-left: ms.step(1); /* 1 */ + padding-right: 0; /* 1 */ -.wp-block-pullquote.is-style-solid-color blockquote { - max-width: 100%; -} + p { + font-size: ms.step(0); + font-style: normal; /* 2 */ + } -.wp-block-pullquote.is-style-solid-color { - background-color: color.$base-gray-lighter; + cite { + font-size: ms.step(0); + } + + footer { + font-size: ms.step(0); + text-align: left; + } } /** From adbb848c4c4b3307ffeb330798a741b0c0eea54f Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Thu, 30 Sep 2021 11:31:50 -0700 Subject: [PATCH 03/14] Add comment blockquote styles --- src/components/comment/comment.scss | 18 ++++++ src/prototypes/quotes/example/example.scss | 58 ------------------- src/prototypes/quotes/example/example.twig | 26 +++++---- src/vendor/wordpress/styles/_core-blocks.scss | 14 ++--- 4 files changed, 39 insertions(+), 77 deletions(-) diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index 5ac9e8062..5701ccdb3 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -83,6 +83,24 @@ margin-top: math.div(size.$rhythm-condensed, -4); } + + // We added default styles to the blockquote element using the `wp-block-quote` + // class. We're applying those same styles here, so comment blockquotes look + // the similar. + +.c-comment__content blockquote { + border-left: size.$edge-medium solid color.$base-gray-light; + color: color.$base-gray-dark; +} + +.c-comment__content blockquote cite { + font-style: normal; +} + +.c-comment__content blockquote cite::before { + content: '\2014'; +} + .c-comment__footer { grid-area: footer; } diff --git a/src/prototypes/quotes/example/example.scss b/src/prototypes/quotes/example/example.scss index 5625cab39..e69de29bb 100644 --- a/src/prototypes/quotes/example/example.scss +++ b/src/prototypes/quotes/example/example.scss @@ -1,58 +0,0 @@ -@use "../../../compiled/tokens/scss/color"; -@use '../../../compiled/tokens/scss/size'; -@use "../../../mixins/ms"; -@use '../../../mixins/theme'; - -#quotes { - blockquote { - color: color.$base-gray-dark; - - @include theme.styles(dark) { - color: color.$text-light; - } - } - - .pull-quote { - background: color.$base-gray-lighter; - border-radius: size.$border-radius-medium; - margin-left: calc(#{ms.step(1)} * -1); - margin-right: calc(#{ms.step(1)} * -1); - padding: ms.step(1); - - @include theme.styles(dark) { - background: color.$brand-primary-dark; - } - - p { - font-size: ms.step(1); - } - - cite { - font-style: normal; - } - } - - .blockquote { - border-left: size.$edge-medium solid color.$base-gray-light; - - @include theme.styles(dark) { - border-left: size.$edge-medium solid color.$base-blue-darker; - } - - cite { - font-style: normal; - } - } - - .c-comment blockquote { - border-left: size.$edge-medium solid color.$base-gray-light; - - @include theme.styles(dark) { - border-left: size.$edge-medium solid color.$base-blue-darker; - } - - cite { - font-style: normal; - } - } -} diff --git a/src/prototypes/quotes/example/example.twig b/src/prototypes/quotes/example/example.twig index 9d0e0eb52..6e0662b42 100644 --- a/src/prototypes/quotes/example/example.twig +++ b/src/prototypes/quotes/example/example.twig @@ -7,29 +7,31 @@

A pull quote is a brief, attention-catching quotation, typically in a distinctive typeface, taken from the main text of an article and used as a subheading or graphic feature.

-
-

- Thinking is easy, acting is difficult, and to put one’s thoughts into action is the most difficult thing in the world. -

-
- - — Johann Wolfgang von Goethe - -
-
+
+
+

+ Thinking is easy, acting is difficult, and to put one’s thoughts into action is the most difficult thing in the world. +

+
+ + Johann Wolfgang von Goethe + +
+
+

Block Quote

A block quotation is a quotation in a written document that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size font.

-
+

The way of fortune is like the milky way in the sky; which is a number of small stars, not seen asunder, but giving light together: so it is a number of little and scarce discerned virtues, or rather faculties and customs, that make men fortunate.

- — Francis Bacon + Francis Bacon
diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 54bd5e88a..7e24a815c 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -182,7 +182,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; } /** - * 1. Reset margin + * 1. Reset bottom margin * 2. Reset padding * 3. Reset text alignment */ @@ -190,7 +190,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; .wp-block-pullquote { background-color: color.$base-gray-lighter; border-radius: size.$border-radius-medium; - margin: 0; /* 1 */ + margin-bottom: 0; /* 1 */ padding: 0; /* 2 */ text-align: left; /* 3 */ } @@ -215,7 +215,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; .wp-block-pullquote cite::before, .wp-block-quote cite::before { - content: '\2014', + content: '\2014'; } /** @@ -234,7 +234,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; * Reset the max-width so the text spans the width of the container. */ - .wp-block-pullquote.is-style-solid-color { +.wp-block-pullquote.is-style-solid-color { blockquote { max-width: 100%; } @@ -257,9 +257,9 @@ $wp-button-gap: size.$spacing-gap-button-group-default; */ .wp-block-quote.is-style-large, .wp-block-quote.is-large { - margin: 0; /* 1 */ - padding-left: ms.step(1); /* 1 */ - padding-right: 0; /* 1 */ + margin: 0; /* 1 */ + padding-left: ms.step(1); /* 1 */ + padding-right: 0; /* 1 */ p { font-size: ms.step(0); From a34b836016040242aaf597e75a8269a8cf723341 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Thu, 30 Sep 2021 11:34:29 -0700 Subject: [PATCH 04/14] Fix linting --- src/components/comment/comment.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index 5701ccdb3..63c3c47b4 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -83,10 +83,9 @@ margin-top: math.div(size.$rhythm-condensed, -4); } - - // We added default styles to the blockquote element using the `wp-block-quote` - // class. We're applying those same styles here, so comment blockquotes look - // the similar. +// We added default styles to the blockquote element using the `wp-block-quote` +// class. We're applying those same styles here, so comment blockquotes look +// the similar. .c-comment__content blockquote { border-left: size.$edge-medium solid color.$base-gray-light; From c1b32a72d9a65fd3d1841d401a2a559db8966af2 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Thu, 30 Sep 2021 11:42:49 -0700 Subject: [PATCH 05/14] Add changeset --- .changeset/afraid-experts-approve.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/afraid-experts-approve.md diff --git a/.changeset/afraid-experts-approve.md b/.changeset/afraid-experts-approve.md new file mode 100644 index 000000000..32364b8d5 --- /dev/null +++ b/.changeset/afraid-experts-approve.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Update pull quote and block quote styles From 75dee1d3943bcd06e8fec1abcca4eccb4e6833be Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Thu, 30 Sep 2021 11:43:42 -0700 Subject: [PATCH 06/14] Remove quote prototype stylesheet --- src/prototypes/quotes/example/example.scss | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/prototypes/quotes/example/example.scss diff --git a/src/prototypes/quotes/example/example.scss b/src/prototypes/quotes/example/example.scss deleted file mode 100644 index e69de29bb..000000000 From d8daba9e762a1e63a9544a6da77cf24817a8989d Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Thu, 30 Sep 2021 11:45:02 -0700 Subject: [PATCH 07/14] Update quotes stories doc --- src/prototypes/quotes/quotes.stories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/prototypes/quotes/quotes.stories.js b/src/prototypes/quotes/quotes.stories.js index 8e12b9499..6fa795033 100644 --- a/src/prototypes/quotes/quotes.stories.js +++ b/src/prototypes/quotes/quotes.stories.js @@ -1,5 +1,4 @@ import examplePrototype from './example/example.twig'; -import './example/example.scss'; export default { title: 'Prototypes/Quotes', From 7e2efeb6dfb0ff461aed33a25e793f9c76c7b697 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Thu, 30 Sep 2021 13:42:58 -0700 Subject: [PATCH 08/14] Update cite styles --- src/vendor/wordpress/core-blocks.stories.mdx | 8 ++------ src/vendor/wordpress/styles/_core-blocks.scss | 10 ++++++---- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/vendor/wordpress/core-blocks.stories.mdx b/src/vendor/wordpress/core-blocks.stories.mdx index f6deae9e9..69c87c3a1 100644 --- a/src/vendor/wordpress/core-blocks.stories.mdx +++ b/src/vendor/wordpress/core-blocks.stories.mdx @@ -469,9 +469,7 @@ applied only if the solid color background is toggled on. {`

One of the hardest things to do in technology is disrupt yourself.

-
- Matt Mullenweg -
+ Matt Mullenweg
`} @@ -486,9 +484,7 @@ It has a control to add an optional `is-style-large` class. {`

In quoting others, we cite ourselves.

-
- Julio Cortázar -
+ Julio Cortázar
`} diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 7e24a815c..6f06c813b 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -204,8 +204,14 @@ $wp-button-gap: size.$spacing-gap-button-group-default; padding: ms.step(1); } +/** + * 1. Adjacent children of blockquotes have vertical spacing. Making `cite` + * a block level element so that it has the same spacing. + */ + .wp-block-pullquote cite, .wp-block-quote cite { + display: block; /* 1 */ font-style: normal; } @@ -268,10 +274,6 @@ $wp-button-gap: size.$spacing-gap-button-group-default; cite { font-size: ms.step(0); - } - - footer { - font-size: ms.step(0); text-align: left; } } From dec00dc4816bfd6122aa45077c382af75d2e0b2f Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Fri, 1 Oct 2021 09:35:38 -0700 Subject: [PATCH 09/14] Add tokenss --- src/components/comment/comment.scss | 8 +++++--- src/mixins/_emdash.scss | 7 +++++++ src/tokens/color/border.json | 7 +++++++ src/tokens/color/text.json | 3 +++ src/tokens/font/style.json | 8 ++++++++ src/tokens/size/border.json | 3 +++ src/vendor/wordpress/styles/_core-blocks.scss | 7 ++++--- 7 files changed, 37 insertions(+), 6 deletions(-) create mode 100644 src/mixins/_emdash.scss create mode 100644 src/tokens/color/border.json create mode 100644 src/tokens/font/style.json diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index 63c3c47b4..202549a37 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -2,6 +2,7 @@ @use '../../compiled/tokens/scss/color'; @use '../../compiled/tokens/scss/font-weight'; @use '../../compiled/tokens/scss/size'; +@use '../../mixins/emdash'; @use '../../mixins/headings'; @use '../../mixins/theme'; @@ -88,16 +89,17 @@ // the similar. .c-comment__content blockquote { - border-left: size.$edge-medium solid color.$base-gray-light; - color: color.$base-gray-dark; + border-left: size.$border-width-blockquote solid color.$border-blockquote; + color: color.$text-blockquote; } .c-comment__content blockquote cite { font-style: normal; + } .c-comment__content blockquote cite::before { - content: '\2014'; + @include emdash.content; } .c-comment__footer { diff --git a/src/mixins/_emdash.scss b/src/mixins/_emdash.scss new file mode 100644 index 000000000..1f104fbfe --- /dev/null +++ b/src/mixins/_emdash.scss @@ -0,0 +1,7 @@ +/** + * Create an em dash. + */ + +@mixin content { + content: '\2014'; +} diff --git a/src/tokens/color/border.json b/src/tokens/color/border.json new file mode 100644 index 000000000..874d49365 --- /dev/null +++ b/src/tokens/color/border.json @@ -0,0 +1,7 @@ +{ + "color": { + "border": { + "blockquote": { "value": "{color.base.gray_light.value}" } + } + } +} diff --git a/src/tokens/color/text.json b/src/tokens/color/text.json index 40ec09941..a04f16a35 100644 --- a/src/tokens/color/text.json +++ b/src/tokens/color/text.json @@ -20,6 +20,9 @@ "action": { "value": "{color.base.blue.value}", "comment": "Accessible on white and lighter-gray." + }, + "blockquote": { + "value": "{color.base.gray_dark.value}" } } } diff --git a/src/tokens/font/style.json b/src/tokens/font/style.json new file mode 100644 index 000000000..c9716f0ba --- /dev/null +++ b/src/tokens/font/style.json @@ -0,0 +1,8 @@ +{ + "font": { + "style": { + "normal": { "value": "normal" }, + "blockquote": { "value": "{font.style.normal.value}" } + } + } +} diff --git a/src/tokens/size/border.json b/src/tokens/size/border.json index 6e0aea5d7..57afd8a22 100644 --- a/src/tokens/size/border.json +++ b/src/tokens/size/border.json @@ -10,6 +10,9 @@ "value": "9999px", "comment": "A value of 50% would be more intuitive, but results in unexpectedly oblong rounding for non-square shapes. We use `px` to save the browser the trouble of recalculating the stupidly large value." } + }, + "width": { + "blockquote": { "value": "{size.edge.medium.value}" } } } } diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 6f06c813b..31afddb44 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -4,6 +4,7 @@ @use "../../../compiled/tokens/scss/line-height"; @use "../../../compiled/tokens/scss/size"; @use "../../../mixins/button"; +@use "../../../mixins/emdash"; @use "../../../mixins/ms"; @use "../../../mixins/table"; @@ -178,7 +179,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; .wp-block-pullquote, .wp-block-quote { - color: color.$base-gray-dark; + color: color.$text-blockquote; } /** @@ -221,7 +222,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; .wp-block-pullquote cite::before, .wp-block-quote cite::before { - content: '\2014'; + @include emdash.content; } /** @@ -254,7 +255,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; } .wp-block-quote { - border-left: size.$edge-medium solid color.$base-gray-light; + border-left: size.$border-width-blockquote solid color.$border-blockquote; } /** From 2ee499987e59d6c5e4232623eb31417aa0344513 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Fri, 1 Oct 2021 09:59:31 -0700 Subject: [PATCH 10/14] Add themed styles for blockquote --- src/components/comment/comment.scss | 19 ++++++++++-- src/tokens/color/border.json | 9 +++++- src/tokens/color/text.json | 8 ++++- src/vendor/wordpress/styles/_core-blocks.scss | 31 +++++++++++++++++-- 4 files changed, 60 insertions(+), 7 deletions(-) diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index 202549a37..2c2ff9e53 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -6,6 +6,21 @@ @use '../../mixins/headings'; @use '../../mixins/theme'; +/** + * Themed properties + */ + +@include theme.props() { + --theme-color-border-blockquote: #{color.$border-blockquote-light}; + --theme-color-text-blockquote: #{color.$text-blockquote-light}; +} + +@include theme.props(dark) { + --theme-color-border-blockquote: #{color.$border-blockquote-dark}; + --theme-color-text-blockquote: #{color.$text-blockquote-dark}; + +} + .c-comment { display: grid; grid-column-gap: size.$spacing-gap-inline-medium; @@ -89,8 +104,8 @@ // the similar. .c-comment__content blockquote { - border-left: size.$border-width-blockquote solid color.$border-blockquote; - color: color.$text-blockquote; + border-left: size.$border-width-blockquote solid var(--theme-color-border-blockquote); + color: var(--theme-color-text-blockquote); } .c-comment__content blockquote cite { diff --git a/src/tokens/color/border.json b/src/tokens/color/border.json index 874d49365..db87c85a8 100644 --- a/src/tokens/color/border.json +++ b/src/tokens/color/border.json @@ -1,7 +1,14 @@ { "color": { "border": { - "blockquote": { "value": "{color.base.gray_light.value}" } + "blockquote": { + "dark": { + "value": "{color.base.blue_darker.value}" + }, + "light": { + "value": "{color.base.gray_light.value}" + } + } } } } diff --git a/src/tokens/color/text.json b/src/tokens/color/text.json index a04f16a35..b34b9dd9e 100644 --- a/src/tokens/color/text.json +++ b/src/tokens/color/text.json @@ -22,7 +22,13 @@ "comment": "Accessible on white and lighter-gray." }, "blockquote": { - "value": "{color.base.gray_dark.value}" + "dark": { + "value": "{color.text.light.value}" + }, + "light": { + "value": "{color.base.gray_dark.value}" + } + } } } diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 31afddb44..78fe3f1e7 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -7,6 +7,22 @@ @use "../../../mixins/emdash"; @use "../../../mixins/ms"; @use "../../../mixins/table"; +@use "../../../mixins/theme"; + +/** + * Themed properties + */ + +@include theme.props() { + --theme-color-border-blockquote: #{color.$border-blockquote-light}; + --theme-color-text-blockquote: #{color.$text-blockquote-light}; + +} + +@include theme.props(dark) { + --theme-color-border-blockquote: #{color.$border-blockquote-dark}; + --theme-color-text-blockquote: #{color.$text-blockquote-dark}; +} /** * Gutenberg block: Button @@ -179,7 +195,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; .wp-block-pullquote, .wp-block-quote { - color: color.$text-blockquote; + color: var(--theme-color-text-blockquote); } /** @@ -189,11 +205,18 @@ $wp-button-gap: size.$spacing-gap-button-group-default; */ .wp-block-pullquote { - background-color: color.$base-gray-lighter; border-radius: size.$border-radius-medium; margin-bottom: 0; /* 1 */ padding: 0; /* 2 */ text-align: left; /* 3 */ + + @include theme.styles() { + background-color: color.$base-gray-lighter; + } + + @include theme.styles(dark) { + background-color: color.$brand-primary-dark; + } } /** @@ -255,7 +278,9 @@ $wp-button-gap: size.$spacing-gap-button-group-default; } .wp-block-quote { - border-left: size.$border-width-blockquote solid color.$border-blockquote; + border-left: size.$border-width-blockquote solid var(--theme-color-border-blockquote); + + } /** From 124f64ef8ec2c95fb009f148c38f324c853a2aa6 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Fri, 1 Oct 2021 10:07:54 -0700 Subject: [PATCH 11/14] Fix linting --- src/components/comment/comment.scss | 5 ++--- src/tokens/color/text.json | 1 - src/vendor/wordpress/styles/_core-blocks.scss | 6 ++---- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index 2c2ff9e53..05d5a84d5 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -18,7 +18,6 @@ @include theme.props(dark) { --theme-color-border-blockquote: #{color.$border-blockquote-dark}; --theme-color-text-blockquote: #{color.$text-blockquote-dark}; - } .c-comment { @@ -104,13 +103,13 @@ // the similar. .c-comment__content blockquote { - border-left: size.$border-width-blockquote solid var(--theme-color-border-blockquote); + border-left: size.$border-width-blockquote solid + var(--theme-color-border-blockquote); color: var(--theme-color-text-blockquote); } .c-comment__content blockquote cite { font-style: normal; - } .c-comment__content blockquote cite::before { diff --git a/src/tokens/color/text.json b/src/tokens/color/text.json index b34b9dd9e..05d8811fe 100644 --- a/src/tokens/color/text.json +++ b/src/tokens/color/text.json @@ -28,7 +28,6 @@ "light": { "value": "{color.base.gray_dark.value}" } - } } } diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 78fe3f1e7..177228800 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -16,7 +16,6 @@ @include theme.props() { --theme-color-border-blockquote: #{color.$border-blockquote-light}; --theme-color-text-blockquote: #{color.$text-blockquote-light}; - } @include theme.props(dark) { @@ -278,9 +277,8 @@ $wp-button-gap: size.$spacing-gap-button-group-default; } .wp-block-quote { - border-left: size.$border-width-blockquote solid var(--theme-color-border-blockquote); - - + border-left: size.$border-width-blockquote solid + var(--theme-color-border-blockquote); } /** From 5e8465dae98b5f117360ec29b48d8114dbd0db3c Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Fri, 1 Oct 2021 13:24:04 -0700 Subject: [PATCH 12/14] Use existing theme tokens for color properties --- src/components/comment/comment.scss | 28 ++----------------- src/mixins/_emdash.scss | 2 +- src/tokens/color/border.json | 14 ---------- src/tokens/color/text.json | 8 ------ src/tokens/font/style.json | 8 ------ src/vendor/wordpress/styles/_core-blocks.scss | 28 ++----------------- 6 files changed, 7 insertions(+), 81 deletions(-) delete mode 100644 src/tokens/color/border.json delete mode 100644 src/tokens/font/style.json diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index 05d5a84d5..c2f8eb87c 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -6,20 +6,6 @@ @use '../../mixins/headings'; @use '../../mixins/theme'; -/** - * Themed properties - */ - -@include theme.props() { - --theme-color-border-blockquote: #{color.$border-blockquote-light}; - --theme-color-text-blockquote: #{color.$text-blockquote-light}; -} - -@include theme.props(dark) { - --theme-color-border-blockquote: #{color.$border-blockquote-dark}; - --theme-color-text-blockquote: #{color.$text-blockquote-dark}; -} - .c-comment { display: grid; grid-column-gap: size.$spacing-gap-inline-medium; @@ -40,6 +26,7 @@ /// those comments visually with their parent. .c-comment.is-replying::after, .c-comment--thread::after { + background-color: var(--theme-color-border-kbd); border-radius: size.$border-radius-full; content: ''; display: block; @@ -48,14 +35,6 @@ margin-left: auto; margin-right: auto; width: size.$edge-medium; - - @include theme.styles() { - background-color: color.$base-gray-light; - } - - @include theme.styles(dark) { - background-color: color.$base-blue-darker; - } } /// Comment reply forms are hidden until someone starts a reply. @@ -103,9 +82,8 @@ // the similar. .c-comment__content blockquote { - border-left: size.$border-width-blockquote solid - var(--theme-color-border-blockquote); - color: var(--theme-color-text-blockquote); + border-left: size.$border-width-blockquote solid var(--theme-color-border-kbd); + color: var(--theme-color-text-muted); } .c-comment__content blockquote cite { diff --git a/src/mixins/_emdash.scss b/src/mixins/_emdash.scss index 1f104fbfe..babc1ab91 100644 --- a/src/mixins/_emdash.scss +++ b/src/mixins/_emdash.scss @@ -3,5 +3,5 @@ */ @mixin content { - content: '\2014'; + content: '—'; } diff --git a/src/tokens/color/border.json b/src/tokens/color/border.json deleted file mode 100644 index db87c85a8..000000000 --- a/src/tokens/color/border.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "color": { - "border": { - "blockquote": { - "dark": { - "value": "{color.base.blue_darker.value}" - }, - "light": { - "value": "{color.base.gray_light.value}" - } - } - } - } -} diff --git a/src/tokens/color/text.json b/src/tokens/color/text.json index 05d8811fe..40ec09941 100644 --- a/src/tokens/color/text.json +++ b/src/tokens/color/text.json @@ -20,14 +20,6 @@ "action": { "value": "{color.base.blue.value}", "comment": "Accessible on white and lighter-gray." - }, - "blockquote": { - "dark": { - "value": "{color.text.light.value}" - }, - "light": { - "value": "{color.base.gray_dark.value}" - } } } } diff --git a/src/tokens/font/style.json b/src/tokens/font/style.json deleted file mode 100644 index c9716f0ba..000000000 --- a/src/tokens/font/style.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "font": { - "style": { - "normal": { "value": "normal" }, - "blockquote": { "value": "{font.style.normal.value}" } - } - } -} diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 177228800..9ff266ea8 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -9,20 +9,6 @@ @use "../../../mixins/table"; @use "../../../mixins/theme"; -/** - * Themed properties - */ - -@include theme.props() { - --theme-color-border-blockquote: #{color.$border-blockquote-light}; - --theme-color-text-blockquote: #{color.$text-blockquote-light}; -} - -@include theme.props(dark) { - --theme-color-border-blockquote: #{color.$border-blockquote-dark}; - --theme-color-text-blockquote: #{color.$text-blockquote-dark}; -} - /** * Gutenberg block: Button * Applies our pattern library styles to buttons generated via Gutenberg blocks. @@ -194,7 +180,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; .wp-block-pullquote, .wp-block-quote { - color: var(--theme-color-text-blockquote); + color: var(--theme-color-text-muted); } /** @@ -204,18 +190,11 @@ $wp-button-gap: size.$spacing-gap-button-group-default; */ .wp-block-pullquote { + background-color: var(--theme-color-background-secondary); border-radius: size.$border-radius-medium; margin-bottom: 0; /* 1 */ padding: 0; /* 2 */ text-align: left; /* 3 */ - - @include theme.styles() { - background-color: color.$base-gray-lighter; - } - - @include theme.styles(dark) { - background-color: color.$brand-primary-dark; - } } /** @@ -277,8 +256,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; } .wp-block-quote { - border-left: size.$border-width-blockquote solid - var(--theme-color-border-blockquote); + border-left: size.$border-width-blockquote solid var(--theme-color-border-kbd); } /** From d05d5ec05b0daac609beb0dcc6146acba283efee Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Fri, 1 Oct 2021 13:51:15 -0700 Subject: [PATCH 13/14] Rename border color token --- src/base/_themes.scss | 2 ++ src/components/comment/comment.scss | 2 +- src/vendor/wordpress/styles/_core-blocks.scss | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/base/_themes.scss b/src/base/_themes.scss index 835781170..7f7e719ba 100644 --- a/src/base/_themes.scss +++ b/src/base/_themes.scss @@ -17,6 +17,7 @@ --theme-color-background-kbd: transparent; --theme-color-background-secondary: #{color.$base-gray-lighter}; --theme-color-border-kbd: #{color.$base-gray-light}; + --theme-color-border-text-group: #{color.$base-gray-light}; --theme-color-text-action: #{color.$text-action}; --theme-color-text-base: #{color.$text-dark}; --theme-color-text-code: #{color.$base-fuchsia}; @@ -34,6 +35,7 @@ --theme-color-background-kbd: #{color.$brand-primary-dark}; --theme-color-background-secondary: #{color.$brand-primary-dark}; --theme-color-border-kbd: #{color.$brand-primary-darker}; + --theme-color-border-text-group: #{color.$brand-primary-darker}; --theme-color-text-action: var(--theme-color-text-emphasis); --theme-color-text-base: #{color.$text-light}; --theme-color-text-code: var(--theme-color-text-emphasis); diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index c2f8eb87c..a8ff7e803 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -26,7 +26,7 @@ /// those comments visually with their parent. .c-comment.is-replying::after, .c-comment--thread::after { - background-color: var(--theme-color-border-kbd); + background-color: var(--theme-color-border-text-group); border-radius: size.$border-radius-full; content: ''; display: block; diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 9ff266ea8..147017594 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -256,7 +256,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; } .wp-block-quote { - border-left: size.$border-width-blockquote solid var(--theme-color-border-kbd); + border-left: size.$border-width-blockquote solid var(--theme-color-border-text-group); } /** From 7bf283405cb228fdc7e2d2d3032d428ccd546a2f Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Fri, 1 Oct 2021 13:54:20 -0700 Subject: [PATCH 14/14] Fix linting --- src/vendor/wordpress/styles/_core-blocks.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 147017594..ce0e9cd89 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -256,7 +256,8 @@ $wp-button-gap: size.$spacing-gap-button-group-default; } .wp-block-quote { - border-left: size.$border-width-blockquote solid var(--theme-color-border-text-group); + border-left: size.$border-width-blockquote solid + var(--theme-color-border-text-group); } /**