diff --git a/.changeset/tiny-eagles-repair.md b/.changeset/tiny-eagles-repair.md new file mode 100644 index 0000000000..719d7797ba --- /dev/null +++ b/.changeset/tiny-eagles-repair.md @@ -0,0 +1,5 @@ +--- +"@primer/css": major +--- + +Update marketing button styles diff --git a/docs/content/components/marketing-buttons.md b/docs/content/components/marketing-buttons.md index ed8ab324a6..fe81dc64af 100644 --- a/docs/content/components/marketing-buttons.md +++ b/docs/content/components/marketing-buttons.md @@ -17,6 +17,7 @@ The solid blue and solid green buttons have more visual emphasis than the blue o ```html live +
@@ -25,14 +26,21 @@ The solid blue and solid green buttons have more visual emphasis than the blue o ## Sizes -Available in two sizes, marketing buttons have a default size and a large size. +Available in three sizes, marketing buttons have a default size and a large size. ```html live + + + + +
+
- - - + + + + ``` diff --git a/package.json b/package.json index 77a795b36c..2dcee1e770 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ }, "dependencies": { "@primer/octicons": "13.0.0", - "@primer/primitives": "4.2.2" + "@primer/primitives": "4.3.0" }, "devDependencies": { "@changesets/changelog-github": "0.4.0", diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index 19376bb73e..5635c85895 100644 --- a/src/marketing/buttons/button.scss +++ b/src/marketing/buttons/button.scss @@ -1,117 +1,106 @@ .btn-mktg { + position: relative; + z-index: 1; display: inline-block; - padding: $spacer-3 $spacer-4; - font-size: $h5-size; - font-weight: $font-weight-semibold; - color: var(--color-mktg-btn-text); + appearance: none !important; + // stylelint-disable-next-line primer/spacing + padding: rem(($spacer-3) * 0.9) rem($spacer-4) rem(($spacer-3) * 1.1); + // stylelint-disable-next-line primer/typography + font-size: 1rem; + font-weight: $font-weight-bold; + line-height: 1; white-space: nowrap; vertical-align: middle; - cursor: pointer; user-select: none; - background-color: var(--color-mktg-btn-bg); - border: $border-width $border-style var(--color-mktg-btn-border); - border-radius: $border-radius; - transition-duration: $transition-time / 2; - transition-property: background-color, border-color, box-shadow; - appearance: none; // Corrects inability to style clickable `input` types in iOS. + border: 0; + // stylelint-disable-next-line primer/borders + border-radius: rem(6px); + + @include btn-solid-mktg( + var(--color-mktg-btn-text), + var(--color-mktg-btn-bg-top), + var(--color-mktg-btn-bg-bottom), + var(--color-mktg-btn-bg-overlay-top), + var(--color-mktg-btn-bg-overlay-bottom), + ); + + &::before { + background-blend-mode: overlay, normal; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + content: ""; + // stylelint-disable-next-line primer/borders + border-radius: rem(6px); + opacity: 0; + transition: opacity 0.4s; + } &:hover { text-decoration: none; - background-color: var(--color-mktg-btn-hover-bg); - border-color: var(--color-mktg-btn-hover-border); - } - &:focus { - outline: 0; - box-shadow: var(--color-mktg-btn-focus-shadow); - } - - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: var(--color-mktg-btn-disabled-text); - pointer-events: none; // Disable hover styles - cursor: default; - background-color: var(--color-mktg-btn-disabled-bg); - border-color: var(--color-mktg-btn-disabled-border); + &::before { + opacity: 1; + transition: opacity 0.4s; + } } } .btn-primary-mktg { - color: var(--color-mktg-btn-primary-text); - background-color: var(--color-mktg-btn-primary-bg); - border-color: var(--color-mktg-btn-primary-border); - - &:hover { - background-color: var(--color-mktg-btn-primary-hover-bg); - border-color: var(--color-mktg-btn-primary-hover-border); - } - - &:focus { - box-shadow: var(--color-mktg-btn-primary-focus-shadow); - } + @include btn-solid-mktg( + var(--color-mktg-btn-primary-text), + var(--color-mktg-btn-primary-bg-top), + var(--color-mktg-btn-primary-bg-bottom), + var(--color-mktg-btn-primary-bg-overlay-top), + var(--color-mktg-btn-primary-bg-overlay-bottom), + ); +} - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: var(--color-mktg-btn-primary-disabled-text); - background-color: var(--color-mktg-btn-primary-disabled-bg); - border-color: var(--color-mktg-btn-primary-disabled-border); - } +.btn-enterprise-mktg { + @include btn-solid-mktg( + var(--color-mktg-btn-enterprise-text), + var(--color-mktg-btn-enterprise-bg-top), + var(--color-mktg-btn-enterprise-bg-bottom), + var(--color-mktg-btn-enterprise-bg-overlay-top), + var(--color-mktg-btn-enterprise-bg-overlay-bottom), + ); } .btn-outline-mktg { - color: var(--color-mktg-btn-outline-text); - background-color: var(--color-mktg-btn-outline-bg); - border-color: var(--color-mktg-btn-outline-border); - - &:hover { - color: var(--color-mktg-btn-outline-hover-text); - background-color: var(--color-mktg-btn-outline-hover-bg); - border-color: var(--color-mktg-btn-outline-hover-border); - } - - &:focus { - box-shadow: var(--color-mktg-btn-outline-focus-shadow); - } - - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: var(--color-mktg-btn-outline-disabled-text); - background-color: var(--color-mktg-btn-outline-disabled-bg); - border-color: var(--color-mktg-btn-outline-disabled-border); - } + @include btn-outline-mktg( + var(--color-mktg-btn-outline-text), + var(--color-mktg-btn-outline-hover-text), + var(--color-mktg-btn-outline-border), + var(--color-mktg-btn-outline-hover-border), + var(--color-mktg-btn-outline-focus-border), + var(--color-mktg-btn-outline-focus-border-inset) + ); + transition: box-shadow 0.4s, color 0.4s; } .btn-transparent { - color: var(--color-mktg-btn-dark-text); - background-color: var(--color-mktg-btn-dark-bg); - border-color: var(--color-mktg-btn-dark-border); - - &:hover { - color: var(--color-mktg-btn-dark-hover-text); - background-color: var(--color-mktg-btn-dark-hover-bg); - border-color: var(--color-mktg-btn-dark-hover-border); - } + @include btn-outline-mktg( + var(--color-mktg-btn-dark-text), + var(--color-mktg-btn-dark-hover-text), + var(--color-mktg-btn-dark-border), + var(--color-mktg-btn-dark-hover-border), + var(--color-mktg-btn-dark-focus-border), + var(--color-mktg-btn-dark-focus-border-inset) + ); + transition: box-shadow 0.4s, color 0.4s; +} - &:focus { - box-shadow: var(--color-mktg-btn-dark-focus-shadow); - } +// Size modifiers - &:disabled, - &.disabled, - &[aria-disabled=true] { - color: var(--color-mktg-btn-dark-disabled-text); - background-color: var(--color-mktg-btn-dark-disabled-bg); - border-color: var(--color-mktg-btn-dark-disabled-border); - } +.btn-sm-mktg { + // stylelint-disable-next-line primer/spacing + padding: rem(10px) rem($spacer-3) rem(13px); } -// Large - -.btn-large-mktg { +.btn-lg-mktg { // stylelint-disable-next-line primer/spacing - padding: 20px $spacer-5; - font-size: $h4-size; + padding: 20px 30px 23px !important; } diff --git a/src/marketing/support/index.scss b/src/marketing/support/index.scss index 8c8e4790ee..8edca2624a 100644 --- a/src/marketing/support/index.scss +++ b/src/marketing/support/index.scss @@ -1,2 +1,3 @@ @import "../../support/index.scss"; +@import "./mixins.scss"; @import "./variables.scss"; diff --git a/src/marketing/support/mixins.scss b/src/marketing/support/mixins.scss new file mode 100644 index 0000000000..89421a8f5e --- /dev/null +++ b/src/marketing/support/mixins.scss @@ -0,0 +1,80 @@ +@mixin btn-solid-mktg($color, $bg, $bg2, $bg3, $bg4) { + color: $color; + background-color: $bg2; + background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%); + + &::before { + background-image: linear-gradient(-180deg, $bg3 0%, $bg4 100%); + } + + &:hover, + &.hover, + &:active, + &.selected, + &[aria-selected="true"], + [open] > & { + background-color: $bg2; + background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%); + } + + &:focus, + &.focus { + outline: 0; + box-shadow: 0 0 0 0.2em rgba($bg2, 0.4); + } + + &:disabled, + &.disabled, + &[aria-disabled="true"] { + pointer-events: none; + cursor: default; + opacity: 0.5; + } +} + +@mixin btn-outline-mktg($color, $color2, $border, $borderHover, $borderFocus, $borderFocusInset) { + color: $color; + background: none; + box-shadow: 0 0 0 1px $border inset; + + &::before { + display: none; + } + + &:hover, + &.hover, + &:active, + &.selected, + &[aria-selected="true"], + [open] > & { + color: $color2; + background: none; + box-shadow: 0 0 0 2px $borderHover inset; + } + + &:focus, + &.focus { + outline: 0; + box-shadow: 0 0 0 2px $borderFocus inset, 0 0 0 4px $borderFocusInset; + } + + &:disabled, + &.disabled, + &[aria-disabled="true"] { + opacity: 0.5; + } +} + +$browser-context: 16 !default; + +@function rem($pixels, $context: $browser-context) { + @if (unitless($pixels)) { + $pixels: $pixels * 1px; + } + + @if (unitless($context)) { + $context: $context * 1px; + } + + @return $pixels / $context * 1rem; +} diff --git a/yarn.lock b/yarn.lock index 628fb5a45e..52fa9760f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -767,10 +767,10 @@ dependencies: object-assign "^4.1.1" -"@primer/primitives@4.2.2": - version "4.2.2" - resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.2.2.tgz#3d4400c125bad85e9a4de35832dbe2af98ba1c45" - integrity sha512-PHuDnaaYI5+SjK5RaLGXxYxgDkSqx3DJJCOxwVvrcA8pPUdfJ4ifFrZxly+NA/5DyHNVTzkjnaRa9V35ff9Lgg== +"@primer/primitives@4.3.0": + version "4.3.0" + resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.3.0.tgz#446e868cd1c48437cbc3340c52b159ec2e015b78" + integrity sha512-djXxll2yVTufmhnHA1H9bMT8I3S0ID6GlSewAJvKHlv80I+5AoZASVBF+WedtH/SyloLM5wyk+Tqj1ZNmy2+RQ== "@sinonjs/commons@^1.7.0": version "1.8.2"