Update marketing button styles

.changeset/tiny-eagles-repair.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Update marketing button styles

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
 <button class="btn-mktg mr-3" type="button">Learn more</button>
 <button class="btn-mktg btn-primary-mktg mr-3" type="button">Sign up</button>
+<button class="btn-mktg btn-enterprise-mktg mr-3" type="button">Contact sales</button>
 <button class="btn-mktg btn-outline-mktg mr-3" type="button">Learn more</button>
 <div class="mt-3 p-3" style="background-color: var(--color-scale-gray-9);">
   <button class="btn-mktg btn-transparent" type="button">Learn more</button>
@@ -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
+<button class="btn-mktg btn-sm-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg btn-sm-mktg mr-2" type="button">Sign up</button>
+<button class="btn-mktg btn-enterprise-mktg btn-sm-mktg mr-3" type="button">Contact sales</button>
+<button class="btn-mktg btn-outline-mktg btn-sm-mktg mr-2" type="button">Learn more</button>
+<hr>
 <button class="btn-mktg mr-2" type="button">Learn more</button>
 <button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
+<button class="btn-mktg btn-enterprise-mktg mr-3" type="button">Contact sales</button>
 <button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
 <hr>
-<button class="btn-mktg btn-large-mktg mr-2" type="button">Learn more</button>
-<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
-<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-lg-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg btn-lg-mktg mr-2" type="button">Sign up</button>
+<button class="btn-mktg btn-enterprise-mktg btn-lg-mktg mr-3" type="button">Contact sales</button>
+<button class="btn-mktg btn-outline-mktg btn-lg-mktg mr-2" type="button">Learn more</button>
 ```

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",

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;
 }

src/marketing/support/index.scss

@@ -1,2 +1,3 @@
 @import "../../support/index.scss";
+@import "./mixins.scss";
 @import "./variables.scss";

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;
+}

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"