diff --git a/src/components/button/button.scss b/src/components/button/button.scss index f4c3d385a..eee0cc24c 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -1,76 +1,7 @@ -@use "../../design-tokens/colors.yml"; -@use "../../design-tokens/font.yml"; -@use "../../design-tokens/motion.yml"; -@use "../../design-tokens/sizes.yml"; -@use "../../mixins/focus"; -@use "../../mixins/ms"; -@use "../../mixins/unit"; - -/** - * Button object - * - * 1. More overtly actionable cursor appearance. Recently this tweak has come - * with some contention, but our experience has been that the average user - * doesn't differentiate cursor styles between different styles of action. - * 2. Although we will be overtly setting some typographic properties, the - * shorthand is helpful for completely overriding all system font styles as - * a starting point. - * 3. We set a height to coordinate consistently with `c-input`. Unfortunately - * browsers don't consistently size inputs without setting `height`. - */ +@use "../../mixins/button"; .c-button { - background: colors.$primary-brand; - border-color: colors.$primary-brand-dark; - border-radius: sizes.$radius-medium; - border-style: solid; - border-width: sizes.$edge-medium; - color: colors.$text-light-emphasis; - cursor: pointer; /* 1 */ - display: inline-block; - font: inherit; /* 2 */ - font-style: normal; - font-weight: font.$weight-semibold; - height: sizes.$control-height; /* 3 */ - line-height: normal; - padding: sizes.$control-pad-vertical sizes.$control-pad-horizontal; - position: relative; - text-align: center; - text-decoration: none; - transition: filter motion.$speed-slow motion.$ease-out, - transform motion.$speed-quick motion.$ease-out; - user-select: none; - - /** - * Transform, opacity and filter changes are performant and will work across - * many more stylistic modifiers than specific color shifts. - */ - - &:hover { - filter: brightness(motion.$control-brighten); - transform: scale(motion.$control-grow); - } - - &:active { - filter: brightness(motion.$control-dim); - transform: scale(motion.$control-shrink); - } - - &:disabled { - cursor: not-allowed; - filter: grayscale(60%); - opacity: 0.85; - transform: none; - } - - @include focus.focus-visible { - box-shadow: 0 0 0 sizes.$edge-large colors.$primary-brand-lighter; - } - - .t-dark & { - background-color: colors.$primary-brand-dark; - border-color: colors.$primary-brand-darker; - } + @include button.default; } /** @@ -78,18 +9,7 @@ */ .c-button--secondary { - border-color: colors.$primary-brand-light; - color: colors.$primary-brand; - - &, - .t-dark & { - background-color: transparent; - } - - .t-dark & { - border-color: colors.$primary-brand-dark; - color: colors.$text-light-emphasis; - } + @include button.secondary; } /** @@ -97,15 +17,5 @@ */ .c-button--tertiary { - color: colors.$primary-brand; - - &, - .t-dark & { - background-color: transparent; - border-color: transparent; - } - - .t-dark & { - color: colors.$text-light-emphasis; - } + @include button.tertiary; } diff --git a/src/mixins/_button.scss b/src/mixins/_button.scss new file mode 100644 index 000000000..2620eea4a --- /dev/null +++ b/src/mixins/_button.scss @@ -0,0 +1,111 @@ +@use "../design-tokens/colors.yml"; +@use "../design-tokens/font.yml"; +@use "../design-tokens/motion.yml"; +@use "../design-tokens/sizes.yml"; +@use "./focus"; +@use "./ms"; +@use "./unit"; + +/** + * Button object + * + * 1. More overtly actionable cursor appearance. Recently this tweak has come + * with some contention, but our experience has been that the average user + * doesn't differentiate cursor styles between different styles of action. + * 2. Although we will be overtly setting some typographic properties, the + * shorthand is helpful for completely overriding all system font styles as + * a starting point. + * 3. We set a height to coordinate consistently with `c-input`. Unfortunately + * browsers don't consistently size inputs without setting `height`. + */ + +@mixin default { + background: colors.$primary-brand; + border-color: colors.$primary-brand-dark; + border-radius: sizes.$radius-medium; + border-style: solid; + border-width: sizes.$edge-medium; + color: colors.$text-light-emphasis; + cursor: pointer; /* 1 */ + display: inline-block; + font: inherit; /* 2 */ + font-style: normal; + font-weight: font.$weight-semibold; + height: sizes.$control-height; /* 3 */ + line-height: normal; + padding: sizes.$control-pad-vertical sizes.$control-pad-horizontal; + position: relative; + text-align: center; + text-decoration: none; + transition: filter motion.$speed-slow motion.$ease-out, + transform motion.$speed-quick motion.$ease-out; + user-select: none; + + /** + * Transform, opacity and filter changes are performant and will work across + * many more stylistic modifiers than specific color shifts. + */ + + &:hover { + filter: brightness(motion.$control-brighten); + transform: scale(motion.$control-grow); + } + + &:active { + filter: brightness(motion.$control-dim); + transform: scale(motion.$control-shrink); + } + + &:disabled { + cursor: not-allowed; + filter: grayscale(60%); + opacity: 0.85; + transform: none; + } + + @include focus.focus-visible { + box-shadow: 0 0 0 sizes.$edge-large colors.$primary-brand-lighter; + } + + .t-dark & { + background-color: colors.$primary-brand-dark; + border-color: colors.$primary-brand-darker; + } +} + +/** + * Modifier: Secondary + */ + +@mixin secondary { + border-color: colors.$primary-brand-light; + color: colors.$primary-brand; + + &, + .t-dark & { + background-color: transparent; + } + + .t-dark & { + border-color: colors.$primary-brand-dark; + color: colors.$text-light-emphasis; + } +} + +/** + * Modifier: Tertiary + */ + +@mixin tertiary { + color: colors.$primary-brand; + + &, + .t-dark & { + background-color: transparent; + border-color: transparent; + } + + .t-dark & { + color: colors.$text-light-emphasis; + } +} diff --git a/src/vendor/wordpress/_wordpress.scss b/src/vendor/wordpress/_wordpress.scss new file mode 100644 index 000000000..b79ed5553 --- /dev/null +++ b/src/vendor/wordpress/_wordpress.scss @@ -0,0 +1,54 @@ +@use "../../mixins/button"; +@use "../../design-tokens/sizes.yml"; + +/** + * Gutenberg block: Button + * Applies our pattern library styles to buttons generated via Gutenberg blocks. + */ + +$wp-button-gap: sizes.$list-inline-gap; + +/** + * 1. Align buttons with outer parent + * 2. Complete half-gaps left by buttons + */ + +.wp-block-buttons { + display: flex; + flex-wrap: wrap; + margin: $wp-button-gap * -1; + padding: $wp-button-gap / 2; + + /** + * If this has content before, assume it is prose content and add back + * some margin. + */ + &:not(:first-child) { + margin-top: sizes.$rhythm-space-generous - $wp-button-gap; + } + + /** + * If this has content after, assume it is prose content and add back + * some margin. + */ + &:not(:last-child) { + margin-bottom: sizes.$rhythm-space-generous - $wp-button-gap; + } +} + +/** + * 1. Prevent inherited display flex styling from crushing layout + * 2. Add half-gaps (will add up to full gutters) + */ +.wp-block-button { + flex: none; /* 1 */ + padding: $wp-button-gap / 2; /* 2 */ + + .wp-block-button__link { + @include button.default; + } + + &.is-style-outline .wp-block-button__link { + @include button.secondary; + } +} diff --git a/src/vendor/wordpress/gutenberg.stories.mdx b/src/vendor/wordpress/gutenberg.stories.mdx index ffb869ddd..9a3ea9a1a 100644 --- a/src/vendor/wordpress/gutenberg.stories.mdx +++ b/src/vendor/wordpress/gutenberg.stories.mdx @@ -53,8 +53,7 @@ container. ## Button -The button block adds call-to-action-style links to a post. Container elements provide -layout. +The button block adds call-to-action-style links to a post. When multiple buttons are added the `wp-block-buttons` container controls layout. If chosen, a button can have only an outline (no fill color), which adds the `is-style-outline` class on the `.wp-block-button` element. @@ -65,11 +64,16 @@ and border radius. {`
-
- +
+ Button
+
+ + Outlined button + +
`}