diff --git a/club/style.css b/club/style.css index 471d093a37..fcd666925b 100644 --- a/club/style.css +++ b/club/style.css @@ -43,10 +43,66 @@ GNU General Public License for more details. * https://github.com/WordPress/gutenberg/issues/27075 */ -.wp-block-search__button:hover, -.wp-block-file .wp-block-file__button:hover, -.wp-block-button__link:hover { - background-color: var(--wp--preset--color--secondary); +:is( + .wp-block-search__button, + .wp-block-file .wp-block-file__button, + .wp-block-button__link, + .wp-elements-button, +):where(:hover, :focus, :active) { + background-color: var(--wp--preset--color--background); + color: var(--wp--preset--color--foreground); + border: 1.5px solid var(--wp--preset--color--foreground); +} + +:is( + .wp-block-search__button, + .wp-block-file .wp-block-file__button, + .wp-block-button__link, + .wp-elements-button, +):where(:active) { + border-style: dotted; +} + +:is( + .wp-block-search__button, + .wp-block-file .wp-block-file__button, + .wp-block-button__link, + .wp-elements-button, +):where(:active) { + border-style: dotted; +} + +:is( + .is-style-outline .wp-block-button__link, + .is-style-outline .wp-element-button, + .wp-block-post-comments-form input[type=submit], +):is( + :hover, + :focus +) { + background: var(--wp--preset--color--foreground); + color: var(--wp--preset--color--background); +} + +:is( + .is-style-outline .wp-block-button__link, + .is-style-outline .wp-element-button, + .wp-block-post-comments-form input[type=submit], +):is( + :active +) { + background: var(--wp--preset--color--background); + color: var(--wp--preset--color--foreground); + border-style: dotted; +} + +/* This is necesary to fix the outline style for the button in the editor */ +:where(.is-style-outline) +:is( + .wp-block-button__link, + .wp-element-button +) { + border: 1px solid var(--wp--preset--color--foreground); } /* diff --git a/club/theme.json b/club/theme.json index 310357136c..29ee398e54 100644 --- a/club/theme.json +++ b/club/theme.json @@ -147,8 +147,18 @@ "blocks": { "core/button": { "border": { - "radius": "4px" - } + "radius": "999px", + "width": "1.5px", + "style": "solid" + }, + "spacing": { + "padding": { + "top": "calc(0.05em + 2px)", + "bottom": "calc(0.05em + 2px)", + "left": "calc(1.333em + 2px)", + "right": "calc(1.333em + 2px)" + } + } }, "core/code": { "border": { @@ -204,6 +214,19 @@ "lineHeight": "1.6" } }, + "core/post-comments-form": { + "elements": { + "button": { + "color":{ + "background": "var(--wp--preset--color--background)", + "text": "var(--wp--preset--color--foreground)" + }, + "border": { + "color": "var(--wp--preset--color--foreground)" + } + } + } + }, "core/gallery": { "spacing": { "margin": { @@ -351,8 +374,13 @@ "radius": "999px" }, "spacing": { - "padding": "0.5em" - } + "padding": { + "top": "calc(0.05em + 2px)", + "bottom": "calc(0.05em + 2px)", + "left": "calc(1.333em + 2px)", + "right": "calc(1.333em + 2px)" + } + } } }, "color": { @@ -362,10 +390,13 @@ "elements": { "button": { "border": { - "radius": "0" + "radius": "999px", + "width": "1.5px", + "color": "transparent", + "style": "solid" }, "color": { - "background": "var(--wp--preset--color--primary)", + "background": "var(--wp--preset--color--foreground)", "text": "var(--wp--preset--color--background)" }, "typography": { @@ -373,12 +404,13 @@ "fontSize": "var(--wp--preset--font-size--medium)", "fontWeight": "normal", "lineHeight": "2", - "textDecoration": "none" + "textDecoration": "none", + "textTransform": "uppercase" }, "spacing": { "padding": { - "top": "calc(0.667em + 2px)", - "bottom": "calc(0.667em + 2px)", + "top": "calc(0.05em + 2px)", + "bottom": "calc(0.05em + 2px)", "left": "calc(1.333em + 2px)", "right": "calc(1.333em + 2px)" }