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 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 5ac9e8062..a8ff7e803 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'; @@ -25,6 +26,7 @@ /// those comments visually with their parent. .c-comment.is-replying::after, .c-comment--thread::after { + background-color: var(--theme-color-border-text-group); border-radius: size.$border-radius-full; content: ''; display: block; @@ -33,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. @@ -83,6 +77,23 @@ 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.$border-width-blockquote solid var(--theme-color-border-kbd); + color: var(--theme-color-text-muted); +} + +.c-comment__content blockquote cite { + font-style: normal; +} + +.c-comment__content blockquote cite::before { + @include emdash.content; +} + .c-comment__footer { grid-area: footer; } diff --git a/src/mixins/_emdash.scss b/src/mixins/_emdash.scss new file mode 100644 index 000000000..babc1ab91 --- /dev/null +++ b/src/mixins/_emdash.scss @@ -0,0 +1,7 @@ +/** + * Create an em dash. + */ + +@mixin content { + content: '—'; +} diff --git a/src/prototypes/quotes/example/example.scss b/src/prototypes/quotes/example/example.scss deleted file mode 100644 index 5625cab39..000000000 --- a/src/prototypes/quotes/example/example.scss +++ /dev/null @@ -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. -

- -
+
+
+

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

+ +
+

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/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', 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/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..ce0e9cd89 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -1,9 +1,13 @@ @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/emdash"; +@use "../../../mixins/ms"; @use "../../../mixins/table"; +@use "../../../mixins/theme"; /** * Gutenberg block: Button @@ -174,46 +178,106 @@ $wp-button-gap: size.$spacing-gap-button-group-default; * Styles for quotes and pull-quotes */ +.wp-block-pullquote, +.wp-block-quote { + color: var(--theme-color-text-muted); +} + /** - * Makes the line-height more consistent with existing typographic styles. + * 1. Reset bottom margin + * 2. Reset padding + * 3. Reset text alignment */ -.wp-block-quote.is-large, + .wp-block-pullquote { - p { - line-height: line-height.$tight; - } + background-color: var(--theme-color-background-secondary); + border-radius: size.$border-radius-medium; + margin-bottom: 0; /* 1 */ + padding: 0; /* 2 */ + text-align: left; /* 3 */ } -.wp-block-pullquote { - padding: size.$padding-control-vertical 0; +/** + * Our default styles for the blockquote element include `padding-left`. + * Pullquotes get padding on every side. + */ + +.wp-block-pullquote blockquote { + padding: ms.step(1); } /** - * The quote itself defaults to being italic, this straightens out the quote + * 1. Adjacent children of blockquotes have vertical spacing. Making `cite` + * a block level element so that it has the same spacing. */ -.wp-block-quote.is-style-large p, -.wp-block-quote.is-large p { + +.wp-block-pullquote cite, +.wp-block-quote cite { + display: block; /* 1 */ font-style: normal; } /** - * The pull-quote isn't italic at all, so for consistency, the cite is - * italicized. + * Add an em dash before the citation. */ -.wp-block-pullquote.is-style-solid-color blockquote cite { - font-style: italic; + +.wp-block-pullquote cite::before, +.wp-block-quote cite::before { + @include emdash.content; } /** - * The quote is a little squished on small screens so the max width - * is increased. + * Makes the line-height more consistent with existing typographic styles. */ + +.wp-block-pullquote, +.wp-block-quote.is-large, +.wp-block-quote.is-style-large { + p { + line-height: line-height.$tight; + } +} + +/** + * Reset the max-width so the text spans the width of the container. + */ + +.wp-block-pullquote.is-style-solid-color { + blockquote { + max-width: 100%; + } +} + +.wp-block-pullquote, .wp-block-pullquote.is-style-solid-color blockquote { - @media (min-width: breakpoint.$xs) { - max-width: 80%; + p { + font-size: ms.step(1); } - @media (min-width: breakpoint.$m) { - max-width: 60%; +} + +.wp-block-quote { + border-left: size.$border-width-blockquote solid + var(--theme-color-border-text-group); +} + +/** +* 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 */ + + p { + font-size: ms.step(0); + font-style: normal; /* 2 */ + } + + cite { + font-size: ms.step(0); + text-align: left; } }