From adde57eda281474feb1ce3409923d938af45783a Mon Sep 17 00:00:00 2001 From: Madhu Dollu Date: Tue, 4 Oct 2022 21:06:54 +0530 Subject: [PATCH] Update block canvas styles (#6640) * update link styles * update typography * update spacing * add text underline offset and thickness --- block-canvas/parts/footer.html | 12 +-- block-canvas/parts/header.html | 29 +++--- block-canvas/parts/post-meta.html | 8 +- block-canvas/patterns/footer.php | 33 +++++++ block-canvas/readme.txt | 2 +- block-canvas/style.css | 12 ++- block-canvas/theme.json | 146 ++++++++++++++++++++++++------ 7 files changed, 177 insertions(+), 65 deletions(-) create mode 100644 block-canvas/patterns/footer.php diff --git a/block-canvas/parts/footer.html b/block-canvas/parts/footer.html index 6524af724..1bd6d079f 100644 --- a/block-canvas/parts/footer.html +++ b/block-canvas/parts/footer.html @@ -1,11 +1 @@ - -
- -
- -

Proudly Powered by WordPress

- -
- -
- \ No newline at end of file + \ No newline at end of file diff --git a/block-canvas/parts/header.html b/block-canvas/parts/header.html index 8563af82e..647cf5537 100644 --- a/block-canvas/parts/header.html +++ b/block-canvas/parts/header.html @@ -1,29 +1,22 @@
- -
+ +
+
- -
- + +
- -
- - -
- -
- +
+
+ - - -
+
- - + + diff --git a/block-canvas/parts/post-meta.html b/block-canvas/parts/post-meta.html index 7f578f2fa..cd9dd315a 100644 --- a/block-canvas/parts/post-meta.html +++ b/block-canvas/parts/post-meta.html @@ -2,10 +2,10 @@
- - - - + + + +
diff --git a/block-canvas/patterns/footer.php b/block-canvas/patterns/footer.php new file mode 100644 index 000000000..e5f806ae1 --- /dev/null +++ b/block-canvas/patterns/footer.php @@ -0,0 +1,33 @@ + + + + + + + +
+ +
+ +

+ WordPress'; + echo sprintf( + esc_html__( 'Proudly Powered by %1$s', 'block-canvas' ), + $wordpress_link + ); + ?> +

+ +
+ +
+ \ No newline at end of file diff --git a/block-canvas/readme.txt b/block-canvas/readme.txt index 3e1fb8e0a..c7674c895 100644 --- a/block-canvas/readme.txt +++ b/block-canvas/readme.txt @@ -1,6 +1,6 @@ === Block Canvas === Contributors: Automattic -Requires at least: 5.8 +Requires at least: 6.0 Tested up to: 6.0 Requires PHP: 5.7 License: GPLv2 or later diff --git a/block-canvas/style.css b/block-canvas/style.css index 41e723ea2..630d8c9e2 100644 --- a/block-canvas/style.css +++ b/block-canvas/style.css @@ -4,7 +4,7 @@ Theme URI: https://github.com/Automattic/themes/tree/trunk/block-canvas Author: Automattic Author URI: https://automattic.com/ Description: Block Canvas is a simple theme that supports full-site editing. It comes with a set of minimal templates and design settings that can be manipulated through Global Styles. Use it to build something beautiful. -Requires at least: 5.7 +Requires at least: 6.0 Tested up to: 6.0 Requires PHP: 5.7 Version: 0.0.17 @@ -80,4 +80,12 @@ GNU General Public License for more details. .wp-block-table figcaption { font-size: var(--wp--preset--font-size--small); text-align: center; -} \ No newline at end of file +} + +/* + * Link styles + */ +a { + text-decoration-thickness: .0625em !important; + text-underline-offset: .15em +} diff --git a/block-canvas/theme.json b/block-canvas/theme.json index 24088083f..0601b2900 100644 --- a/block-canvas/theme.json +++ b/block-canvas/theme.json @@ -17,7 +17,7 @@ "color": { "palette": [ { - "color": "#007cba", + "color": "#000000", "name": "Primary", "slug": "primary" }, @@ -68,8 +68,12 @@ ], "fontSizes": [ { + "fluid": { + "min": "0.825rem", + "max": "1.0625rem" + }, "name": "Small", - "size": "0.825rem", + "size": "1rem", "slug": "small" }, { @@ -82,14 +86,18 @@ "slug": "medium" }, { - "fluid": false, + "fluid": { + "min": "1.75rem", + "max": "2rem" + }, "name": "Large", "size": "1.75rem", "slug": "large" }, { "fluid": { - "max": "4rem" + "min": "2.5rem", + "max": "3rem" }, "name": "Extra Large", "size": "3rem", @@ -102,8 +110,8 @@ "blocks": { "core/code": { "border": { - "color": "#CCCCCC", - "radius": "0px", + "color": "var(--wp--preset--color--foreground)", + "radius": "0.25rem", "style": "solid", "width": "2px" }, @@ -136,13 +144,7 @@ }, "core/comment-reply-link": { "typography": { - "fontSize": "var(--wp--preset--font-size--small)", - "textDecoration": "underline" - } - }, - "core/comments-title": { - "typography": { - "fontSize": "var(--wp--preset--font-size--large)" + "fontSize": "var(--wp--preset--font-size--small)" } }, "core/gallery": { @@ -159,12 +161,52 @@ } } }, + "core/navigation": { + "elements": { + "link": { + "typography": { + "textDecoration": "none" + }, + ":hover": { + "typography": { + "textDecoration": "underline" + } + } + } + } + }, + "core/post-author-name": { + "elements": { + "link": { + "typography": { + "textDecoration": "none" + }, + ":hover": { + "typography": { + "textDecoration": "underline" + } + } + } + } + }, "core/post-date": { "color": { "text": "var(--wp--preset--color--foreground)" }, "typography": { "fontSize": "var(--wp--preset--font-size--small)" + }, + "elements": { + "link": { + "typography": { + "textDecoration": "none" + }, + ":hover": { + "typography": { + "textDecoration": "underline" + } + } + } } }, "core/post-title": { @@ -172,10 +214,23 @@ "margin": { "bottom": "0" } + }, + "elements": { + "link": { + "typography": { + "textDecoration": "none" + }, + ":hover": { + "typography": { + "textDecoration": "underline" + } + } + } } }, "core/pullquote": { "border": { + "color": "var(--wp--preset--color--foreground)", "style": "solid", "width": "1px 0" }, @@ -231,8 +286,19 @@ "core/site-title": { "typography": { "fontSize": "var(--wp--preset--font-size--medium)", - "fontWeight": "700", - "textDecoration": "none" + "fontWeight": "700" + }, + "elements": { + "link": { + "typography": { + "textDecoration": "none" + }, + ":hover": { + "typography": { + "textDecoration": "underline" + } + } + } } } }, @@ -242,51 +308,68 @@ }, "elements": { "button": { - ":hover": { + "border": { + "radius": "0.25rem" + }, + "color": { + "background": "var(--wp--preset--color--primary)", + "text": "var(--wp--preset--color--background)" + }, + ":hover": { "color": { "background": "var(--wp--preset--color--secondary)", "text": "var(--wp--preset--color--background)" } }, - "border": { - "radius": "0" - }, - "color": { - "background": "var(--wp--preset--color--primary)", - "text": "var(--wp--preset--color--background)" - } + ":active": { + "color": { + "background": "var(--wp--preset--color--primary)", + "text": "var(--wp--preset--color--background)" + } + }, + ":focus": { + "color": { + "background": "var(--wp--preset--color--primary)", + "text": "var(--wp--preset--color--background)" + }, + "outline": { + "color": "var(--wp--preset--color--primary)", + "offset": "2px", + "style": "dotted", + "width": "1px" + } + } }, "heading": { "typography": { "fontFamily": "var(--wp--preset--font-family--rubik)", - "textTransform": "uppercase", "fontWeight": "400", "lineHeight": "1.125" } }, "h1": { "typography": { - "fontSize": "3rem" + "fontSize": "var(--wp--preset--font-size--x-large)" } }, "h2": { "typography": { - "fontSize": "var(--wp--preset--font-size--x-large)" + "fontSize": "var(--wp--preset--font-size--large)" } }, "h3": { "typography": { - "fontSize": "var(--wp--preset--font-size--large)" + "fontSize": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 0.4808)), 1.75rem)" } }, "h4": { "typography": { - "fontSize": "var(--wp--preset--font-size--medium)" + "fontSize": "clamp(1.25rem, calc(1.25rem + ((1vw - 0.48rem) * 0.4808)), 1.5rem)" } }, "h5": { "typography": { - "fontSize": "1.125rem" + "fontSize": "var(--wp--preset--font-size--medium)" } }, "h6": { @@ -297,6 +380,11 @@ "link": { "color": { "text": "var(--wp--preset--color--primary)" + }, + ":hover": { + "typography": { + "textDecoration": "none" + } } } },