From 40652fb5c731ff5d9ab093bfd274f713ad9eeb24 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 13 Oct 2022 15:14:08 -0400 Subject: [PATCH 1/6] remove link styles, handle color with theme.json --- src/styles/base/elements/_links.scss | 20 -------------------- theme.json | 9 +++++++++ 2 files changed, 9 insertions(+), 20 deletions(-) diff --git a/src/styles/base/elements/_links.scss b/src/styles/base/elements/_links.scss index 0da8f49..3d3b580 100644 --- a/src/styles/base/elements/_links.scss +++ b/src/styles/base/elements/_links.scss @@ -3,24 +3,4 @@ // a { - color: blue; - - &:visited { - color: blue; - } - - &:hover, - &:focus, - &:active { - color: blue; - } - - &:focus { - outline: thin dotted; - } - - &:hover, - &:active { - outline: 0; - } } diff --git a/theme.json b/theme.json index bd94d92..b6dcf44 100644 --- a/theme.json +++ b/theme.json @@ -295,5 +295,14 @@ } } } + }, + "styles": { + "elements": { + "link": { + "color": { + "text": "var(--wp--custom--theme-colors--link)" + } + } + } } } From 077f5cedfae8f86ce24c2e2adc3a858041284cbe Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 13 Oct 2022 15:15:04 -0400 Subject: [PATCH 2/6] add buttons utility for button style mixins/placeholders --- src/styles/utilities/_buttons.scss | 257 +++++++++++++++++++++++++++++ 1 file changed, 257 insertions(+) create mode 100644 src/styles/utilities/_buttons.scss diff --git a/src/styles/utilities/_buttons.scss b/src/styles/utilities/_buttons.scss new file mode 100644 index 0000000..4257284 --- /dev/null +++ b/src/styles/utilities/_buttons.scss @@ -0,0 +1,257 @@ +// +// Utility: buttons. +// +// Handles button styles that can be extended or used via mixin. +// + +@use "../settings/theme"; +@use "../tools/convert" as *; + +// Minimal base button styles that standardize layout and transitions. +@mixin button-base { + display: flex; + align-items: center; + gap: 0.25em; + transition: all 0.2s; + cursor: pointer; + text-decoration: none; + font-family: theme.get-var("font-families", "sans-serif"); + font-weight: normal; + + &:hover, + &:focus { + text-decoration: none; + } + + // Shorten transition when pressing button. + &:active { + transition: all 0.05s; + + &::after { + transition: all 0.05s; + } + + svg { + transition: all 0.05s; + } + } + + &::after { + transition: all 0.2s; + } + + svg { + transition: all 0.2s; + size: px2em(24); + fill: currentColor; + } +} + +// Add an arrow to any button. +@mixin has-arrow { + text-decoration: none !important; + + &::after { + content: "❯"; + display: block; + size: 1em; + } + + &:hover, + &:focus { + &::after { + transform: translateX(0.1em); + } + } + + &:active { + &::after { + transform: translateX(0); + } + } +} + +// Button with filled background. +@mixin button-filled { + --has-background-color: #{theme.get-var("theme-colors", "primary")}; + --has-color: #{theme.get-var("theme-colors", "background")}; + @include button-base; + border: 2px solid var(--has-background-color); + border-radius: 0.25em; + background: var(--has-background-color); + color: var(--has-color); + line-height: 1; + padding: 0.5em 1em 0.4em; + font-weight: normal; + + &:hover, + &:focus { + box-shadow: 0 0 0 0.15rem var(--has-background-color); + background: var(--has-background-color); + color: var(--has-color); + text-decoration: none; + } + + &:active { + box-shadow: none; + background: var(--has-background-color); + color: var(--has-color); + text-decoration: none; + } +} +%button-filled { + @include button-filled; +} + +// Button with outline. +@mixin button-outline { + --has-background-color: #{theme.get-var("theme-colors", "primary")}; + --has-color: #{theme.get-var("theme-colors", "primary")}; + @include button-base; + border: 2px solid var(--has-background-color); + border-radius: 0.25em; + background: transparent; + color: var(--has-color); + line-height: 1; + padding: 0.5em 1em 0.4em; + font-weight: normal; + + &:hover, + &:focus { + box-shadow: 0 0 0 0.15rem var(--has-background-color); + background: transparent; + color: var(--has-color); + text-decoration: none; + } + + &:active { + box-shadow: none; + background-color: var(--has-background-color); + color: theme.get-var("theme-colors", "background"); + text-decoration: none; + } +} +%button-outline { + @include button-outline; +} + +// Link-style "button". +@mixin button-link { + --has-background-color: #{theme.get-var("theme-colors", "accent")}; // arrow + --has-color: #{theme.get-var("theme-colors", "primary")}; + @include button-base; + border: none; + background: transparent !important; + color: var(--has-color); + line-height: 1; + padding: 0; + text-decoration: underline; + + // You may want to default to a different color when the background is dark. + /* + .has-background:not(.has-background-background-color) & { + --has-color: #{theme.get-var('theme-colors', 'background')}; + } + */ + + &:hover, + &:focus { + color: var(--has-color); + background: transparent; + box-shadow: none; + text-decoration: underline; + } + + &:active { + color: var(--has-color); + background: transparent; + box-shadow: none; + text-decoration: underline; + } +} +%button-link { + @include button-link; +} + +// Link button with arrow. +@mixin button-link-arrow { + @include button-link; + text-decoration: none; + + // Arrow uses background color. + @include has-arrow; + &::after { + color: var(--has-background-color); + } +} +%button-link-arrow { + @include button-link-arrow; +} + +// Icon-only button. +@mixin button-icon { + @include button-base; + border: none; + background: transparent; + border-radius: 0; + color: inherit; + line-height: 1; + padding: 0.5em; + + &:hover, + &:focus { + background: transparent; + box-shadow: none; + + svg { + transform: scale(1.05); + } + } + + &:active { + background: transparent; + box-shadow: none; + + svg { + transform: scale(0.98); + } + } +} +%button-icon { + @include button-icon; +} + +// Icon button with filled background. +@mixin button-icon-filled { + --has-background-color: #{theme.get-var("theme-colors", "secondary")}; + --has-color: #{theme.get-var("theme-colors", "background")}; + @include button-icon; + background: var(--has-background-color); + border-radius: theme.get-var("sizes", "border-radius-small"); + color: var(--has-color); + padding: 0.5em; + + &:hover, + &:focus { + background: var(--has-background-color); + box-shadow: 0 0 0 0.15rem var(--has-background-color); + color: var(--has-color); + + svg { + transform: scale(1); + } + } + + &:active { + background: var(--has-background-color); + box-shadow: none; + color: var(--has-color); + + svg { + transform: scale(1); + } + } +} +%button-icon-filled { + @include button-icon-filled; +} From 5c828c9db747a595ce42c11cba40e0e865808791 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 13 Oct 2022 15:15:49 -0400 Subject: [PATCH 3/6] apply button utility to button elements --- src/styles/base/elements/_buttons.scss | 26 ++++++-------------------- 1 file changed, 6 insertions(+), 20 deletions(-) diff --git a/src/styles/base/elements/_buttons.scss b/src/styles/base/elements/_buttons.scss index 563d7ee..f9eeb03 100644 --- a/src/styles/base/elements/_buttons.scss +++ b/src/styles/base/elements/_buttons.scss @@ -2,29 +2,15 @@ // Element: buttons. // -@use '../../tools/context'; +@use "../../tools/context"; +@use "../../utilities/buttons"; // Only include base button styles on front so we don't interfere with UI buttons in the editor. @include context.is-front { button, - input[type='button'], - input[type='reset'], - input[type='submit'] { - border: 1px solid; - border-color: red; - border-radius: 3px; - background: transparent; - color: red; - line-height: 1; - padding: 0.6em 1em 0.4em; - - &:hover { - border-color: black; - } - - &:active, - &:focus { - border-color: black; - } + input[type="button"], + input[type="reset"], + input[type="submit"] { + @extend %button-filled; } } From db66694f51e5c4834edd772e64d504295031e041 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 13 Oct 2022 15:16:29 -0400 Subject: [PATCH 4/6] add css vars to global color utility classes --- src/styles/base/global/_colors.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/styles/base/global/_colors.scss diff --git a/src/styles/base/global/_colors.scss b/src/styles/base/global/_colors.scss new file mode 100644 index 0000000..4ca2eef --- /dev/null +++ b/src/styles/base/global/_colors.scss @@ -0,0 +1,21 @@ +/** + * Utility: colors + */ + +@use "../../settings/theme"; + +// Color CSS vars. +$theme-colors: theme.get-map("theme-colors"); +@each $color, $value in $theme-colors { + .has-#{$color}-color.has-#{$color}-color.has-#{$color}-color { + color: #{theme.get-var("theme-colors", $color)}; + --has-color: #{theme.get-var("theme-colors", $color)} !important; + } + .has-#{$color}-background-color.has-#{$color}-background-color.has-#{$color}-background-color { + background-color: #{theme.get-var("theme-colors", $color)}; + --has-background-color: #{theme.get-var( + "theme-colors", + $color + )} !important; + } +} From 50def6c86a74acef1c83653962039f4da3ab2f4a Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 13 Oct 2022 15:17:59 -0400 Subject: [PATCH 5/6] add accent color, remove restricted button color palette --- theme.json | 40 +++++++++------------------------------- 1 file changed, 9 insertions(+), 31 deletions(-) diff --git a/theme.json b/theme.json index b6dcf44..c894fa3 100644 --- a/theme.json +++ b/theme.json @@ -21,14 +21,15 @@ "themeColors": { "primary": "var(--wp--custom--colors--purple)", "secondary": "var(--wp--custom--colors--blue)", - "tertiary": "var(--wp--custom--colors--grey3)", + "tertiary": "var(--wp--custom--colors--cyan)", + "accent": "var(--wp--custom--colors--orange)", "error": "var(--wp--custom--colors--red)", "warning": "var(--wp--custom--colors--orange)", "success": "var(--wp--custom--colors--green)", "info": "var(--wp--custom--colors--cyan)", "background": "var(--wp--custom--colors--white)", "foreground": "var(--wp--custom--colors--black)", - "muted": "var(--wp--custom--colors--grey2)", + "muted": "var(--wp--custom--colors--grey-2)", "link": "var(--wp--custom--colors--blue)" }, "layout": { @@ -101,6 +102,11 @@ "slug": "tertiary", "color": "var(--wp--custom--theme-colors--tertiary)" }, + { + "name": "Accent", + "slug": "accent", + "color": "var(--wp--custom--theme-colors--accent)" + }, { "name": "Background", "slug": "background", @@ -125,11 +131,7 @@ "spacing": { "margin": true, "padding": true, - "units": [ - "rem", - "vh", - "vw" - ] + "units": [ "rem", "vh", "vw" ] }, "typography": { "customFontSize": false, @@ -268,30 +270,6 @@ "core/button": { "border": { "customRadius": false - }, - "color": { - "palette": [ - { - "name": "Primary", - "slug": "primary", - "color": "var(--wp--custom--theme-colors--primary)" - }, - { - "name": "Secondary", - "slug": "secondary", - "color": "var(--wp--custom--theme-colors--secondary)" - }, - { - "name": "Tertiary", - "slug": "tertiary", - "color": "var(--wp--custom--theme-colors--tertiary)" - }, - { - "name": "Background", - "slug": "background", - "color": "var(--wp--custom--theme-colors--background)" - } - ] } } } From 3406d8a5ffc0978f082547c190d5e746ab4aa874 Mon Sep 17 00:00:00 2001 From: Cory Hughart Date: Thu, 13 Oct 2022 15:18:58 -0400 Subject: [PATCH 6/6] handle core block styles, add "link" style by default with arrow --- inc/block-styles.php | 8 +++++--- src/scripts/editor.js | 8 ++++---- src/styles/blocks/core/_button.scss | 23 +++++++++++++++++++++++ src/styles/editor.scss | 2 +- 4 files changed, 33 insertions(+), 8 deletions(-) create mode 100644 src/styles/blocks/core/_button.scss diff --git a/inc/block-styles.php b/inc/block-styles.php index 3b1195c..d61c955 100644 --- a/inc/block-styles.php +++ b/inc/block-styles.php @@ -11,6 +11,7 @@ * Register block styles. */ function register() { + /* // Lead Paragraph: paragraph with large, bold text. register_block_style( 'core/paragraph', @@ -20,13 +21,14 @@ function register() { 'style' => 'theme-scaffold-style', ) ); + */ - // Plain Button: button with only text, no background. + // Link Button: button with only text, no background. register_block_style( 'core/button', array( - 'name' => 'plain', - 'label' => 'Plain', + 'name' => 'link', + 'label' => 'Link', 'style' => 'theme-scaffold-style', ) ); diff --git a/src/scripts/editor.js b/src/scripts/editor.js index 33e28fe..87b6536 100644 --- a/src/scripts/editor.js +++ b/src/scripts/editor.js @@ -32,11 +32,11 @@ registerBlockCollection( 'acf', { * Client-side block style registrations */ ( () => { - // Button "plain" + // Button "link" /* registerBlockStyle( 'core/button', { - name: 'plain', - label: 'Plain', + name: 'link', + label: 'Link', style: 'theme-style', } ); */ @@ -46,5 +46,5 @@ registerBlockCollection( 'acf', { * Client-side block style unregistrations must happen on domReady */ domReady( () => { - //unregisterBlockStyle( 'core/button', 'fill' ); + //unregisterBlockStyle( 'core/button', 'outline' ); } ); diff --git a/src/styles/blocks/core/_button.scss b/src/styles/blocks/core/_button.scss new file mode 100644 index 0000000..53e0c04 --- /dev/null +++ b/src/styles/blocks/core/_button.scss @@ -0,0 +1,23 @@ +// +// Block: core/button. +// + +.wp-block-button { + $self: &; + + &__link { + @extend %button-filled; + } + + &.is-style-outline { + #{$self}__link { + @extend %button-outline; + } + } + + &.is-style-link { + #{$self}__link { + @extend %button-link-arrow; + } + } +} diff --git a/src/styles/editor.scss b/src/styles/editor.scss index 567e8dd..f568306 100644 --- a/src/styles/editor.scss +++ b/src/styles/editor.scss @@ -22,4 +22,4 @@ cursor: not-allowed; pointer-events: none; } -} \ No newline at end of file +}