diff --git a/lib/global-styles.php b/lib/global-styles.php index 71deabe3e2288..df8d4191b60b2 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -222,6 +222,14 @@ function gutenberg_experimental_global_styles_enqueue_assets() { wp_register_style( 'global-styles', false, array(), true, true ); wp_add_inline_style( 'global-styles', $inline_style ); wp_enqueue_style( 'global-styles' ); + + wp_register_style( + 'global-styles-block-library', + gutenberg_url( 'build/block-library/global.css' ), + array(), + filemtime( gutenberg_dir_path() . 'build/block-library/global.css' ) + ); + wp_enqueue_style( 'global-styles-block-library' ); } /** diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 7bbe8900b8dc2..0662e66b83371 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -1,7 +1,7 @@ $blocks-button__height: 56px; .wp-block-button { - color: $white; + color: var(--wp--color--white, $white); &.aligncenter { text-align: center; @@ -14,7 +14,7 @@ $blocks-button__height: 56px; } .wp-block-button__link { - background-color: $dark-gray-700; + background-color: var(--wp--color--background, $dark-gray-700); border: none; border-radius: $blocks-button__height / 2; box-shadow: none; @@ -36,10 +36,6 @@ $blocks-button__height: 56px; } } -.wp-gs .wp-block-button__link:not(.has-background) { - background-color: var(--wp--color--primary); -} - .is-style-squared .wp-block-button__link { border-radius: 0; } @@ -48,7 +44,7 @@ $blocks-button__height: 56px; } .is-style-outline { - color: $dark-gray-700; + color: var(--wp--color--background, $dark-gray-700); .wp-block-button__link { background-color: transparent; diff --git a/packages/block-library/src/global.scss b/packages/block-library/src/global.scss new file mode 100644 index 0000000000000..0c6581d76dae7 --- /dev/null +++ b/packages/block-library/src/global.scss @@ -0,0 +1,5 @@ +@import "./paragraph/global.scss"; +@import "./heading/global.scss"; +@import "./list/global.scss"; +@import "./quote/global.scss"; +@import "./pullquote/global.scss"; diff --git a/packages/block-library/src/heading/global.scss b/packages/block-library/src/heading/global.scss new file mode 100644 index 0000000000000..9d9ce6371f5ed --- /dev/null +++ b/packages/block-library/src/heading/global.scss @@ -0,0 +1,11 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--wp--color--foreground--headings); + font-size: var(--wp--type--size--headings); + font-weight: var(--wp--type--weight); + line-height: var(--wp--type--line-height--headings); +} diff --git a/packages/block-library/src/list/global.scss b/packages/block-library/src/list/global.scss new file mode 100644 index 0000000000000..2e8eb6cdd2830 --- /dev/null +++ b/packages/block-library/src/list/global.scss @@ -0,0 +1,6 @@ +ul, +ol { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--base); + line-height: var(--wp--type--line-height--base); +} diff --git a/packages/block-library/src/paragraph/global.scss b/packages/block-library/src/paragraph/global.scss new file mode 100644 index 0000000000000..05aa7cb68ebc8 --- /dev/null +++ b/packages/block-library/src/paragraph/global.scss @@ -0,0 +1,5 @@ +p { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--base); + line-height: var(--wp--type--line-height--base); +} diff --git a/packages/block-library/src/pullquote/global.scss b/packages/block-library/src/pullquote/global.scss new file mode 100644 index 0000000000000..a0a985013315e --- /dev/null +++ b/packages/block-library/src/pullquote/global.scss @@ -0,0 +1,11 @@ +.wp-block-pullquote p { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--base); + line-height: var(--wp--type--line-height--base); +} + +.wp-block-pullquote cite { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--smaller); + line-height: var(--wp--type--line-height--smaller); +} diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss index 46bb986758629..26ed65006d9f3 100644 --- a/packages/block-library/src/pullquote/theme.scss +++ b/packages/block-library/src/pullquote/theme.scss @@ -1,13 +1,13 @@ .wp-block-pullquote { - border-top: 4px solid $dark-gray-500; - border-bottom: 4px solid $dark-gray-500; + border-top: 4px solid var(--wp--color--foreground-500, $dark-gray-500); + border-bottom: 4px solid var(--wp--color--foreground-500, $dark-gray-500); margin-bottom: $default-block-margin; - color: $dark-gray-600; + color: var(--wp--color--foreground-600, $dark-gray-600); cite, footer, &__citation { - color: $dark-gray-600; + color: var(--wp--color--foreground-600, $dark-gray-600); text-transform: uppercase; font-size: $default-font-size; font-style: normal; diff --git a/packages/block-library/src/quote/global.scss b/packages/block-library/src/quote/global.scss new file mode 100644 index 0000000000000..bfbf792be617c --- /dev/null +++ b/packages/block-library/src/quote/global.scss @@ -0,0 +1,11 @@ +.wp-block-quote p { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--base); + line-height: var(--wp--type--line-height--base); +} + +.wp-block-quote cite { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--smaller); + line-height: var(--wp--type--line-height--smaller); +} diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss index fe3d90cd6a256..fdd4d1734d6c4 100644 --- a/packages/block-library/src/quote/theme.scss +++ b/packages/block-library/src/quote/theme.scss @@ -1,12 +1,12 @@ .wp-block-quote { - border-left: 4px solid $black; + border-left: 4px solid var(--wp--color--border, $black); margin: 0 0 $default-block-margin 0; padding-left: 1em; cite, footer, &__citation { - color: $dark-gray-300; + color: var(--wp--foreground-300, $dark-gray-300); font-size: $default-font-size; margin-top: 1em; position: relative; @@ -16,7 +16,7 @@ &.has-text-align-right, &.has-text-align-right { border-left: none; - border-right: 4px solid $black; + border-right: 4px solid var(--wp--color--border, $black); padding-left: 0; padding-right: 1em; } diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss index ba3c949bb7cb3..9dae54aa1238c 100644 --- a/packages/block-library/src/table/style.scss +++ b/packages/block-library/src/table/style.scss @@ -61,7 +61,7 @@ background-color: transparent; tbody tr:nth-child(odd) { - background-color: $light-gray-200; + background-color: var(--wp--color--foreground-200, $light-gray-200); } &.has-subtle-light-gray-background-color { @@ -93,6 +93,6 @@ border-color: transparent; } - border-bottom: 1px solid $light-gray-200; + border-bottom: 1px solid var(--wp--color--foreground-200, $light-gray-200); } } diff --git a/packages/block-library/src/verse/editor.scss b/packages/block-library/src/verse/editor.scss index e15ae165d37d1..75f0c6f5d9b7a 100644 --- a/packages/block-library/src/verse/editor.scss +++ b/packages/block-library/src/verse/editor.scss @@ -1,5 +1,5 @@ pre.wp-block-verse { - color: $dark-gray-900; + color: var(--wp--color--foreground-900, $dark-gray-900); white-space: nowrap; font-family: inherit; font-size: inherit;