Update marketing buttons (including color mode support)

.changeset/nervous-keys-bow.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Update marketing buttons (including color mode support)

docs/content/components/marketing-buttons.md

@@ -6,41 +6,40 @@ source: 'https://github.com/primer/css/tree/main/src/marketing/buttons'
 bundle: marketing-buttons
 ---
 
-Marketing buttons come in different colors and sizes, and are also available in a blue outlined version.
+Marketing buttons come in a few different colors and sizes that can be produced by combining the base class `btn-mktg` with a set of modifier classes.
 
-## Colors, outlined and transparent
+## Button types
 
-Marketing buttons can be solid blue, outlined blue, solid green, or transparent.
-
-The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis.
+Marketing buttons can be solid (default), outlined (`muted`), borderless (`subtle`), or green (`signup`, only used for signing up).
 
 ```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>
-</div>
+<button class="btn-mktg mr-3" type="button">Get started</button>
+<button class="btn-mktg btn-muted-mktg mr-3" type="button">Learn more</button>
+<button class="btn-mktg btn-subtle-mktg mr-3" type="button">Contact us</button>
+<button class="btn-mktg btn-signup-mktg" type="button">Sign up</button>
 ```
 
 ## Sizes
 
-Available in three sizes, marketing buttons have a default size and a large size.
+Marketing buttons can be set to three different sizes:
+
+- Small: `btn-small-mktg`
+- Medium (default)
+- Large: `btn-large-mktg`
 
 ```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>
+<button class="btn-mktg btn-small-mktg mr-3" type="button">Get started</button>
+<button class="btn-mktg btn-muted-mktg btn-small-mktg mr-3" type="button">Learn more</button>
+<button class="btn-mktg btn-subtle-mktg btn-small-mktg mr-3" type="button">Contact us</button>
+<button class="btn-mktg btn-signup-mktg btn-small-mktg" type="button">Sign up</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>
+<button class="btn-mktg mr-3" type="button">Get started</button>
+<button class="btn-mktg btn-muted-mktg mr-3" type="button">Learn more</button>
+<button class="btn-mktg btn-subtle-mktg mr-3" type="button">Contact us</button>
+<button class="btn-mktg btn-signup-mktg" type="button">Sign up</button>
 <hr>
-<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>
+<button class="btn-mktg btn-large-mktg mr-3" type="button">Get started</button>
+<button class="btn-mktg btn-muted-mktg btn-large-mktg mr-3" type="button">Learn more</button>
+<button class="btn-mktg btn-subtle-mktg btn-large-mktg mr-3" type="button">Contact us</button>
+<button class="btn-mktg btn-signup-mktg btn-large-mktg" type="button">Sign up</button>
 ```

docs/yarn.lock

@@ -297,7 +297,7 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
-"@babel/helper-validator-identifier@^7.15.7":
+"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.15.7":
   version "7.15.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
   integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
@@ -1168,7 +1168,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.10.5", "@babel/types@^7.12.11", "@babel/types@^7.12.6", "@babel/types@^7.12.7", "@babel/types@^7.16.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.10.5", "@babel/types@^7.12.11", "@babel/types@^7.12.6", "@babel/types@^7.12.7", "@babel/types@^7.15.4", "@babel/types@^7.16.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
   integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==

package.json

@@ -35,7 +35,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^6.1.0"
+    "@primer/primitives": "^7.0.1"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.1",

src/deprecations.json

@@ -335,6 +335,10 @@
     "flex-lg-item-equal": "flex-lg-1",
     "flex-xl-item-equal": "flex-xl-1",
     "btn-purple": null,
+    "btn-primary-mktg": "btn-signup-mktg",
+    "btn-enterprise-mktg": "btn-mktg",
+    "btn-outline-mktg": "btn-muted-mktg",
+    "btn-transparent": "btn-subtle-mktg",
     "text-pending": "text-yellow",
     "bg-pending": "bg-yellow-dark",
     "container": null,

src/marketing/buttons/button.scss

@@ -1,4 +1,5 @@
 .btn-mktg {
+  color: var(--color-canvas-default);
   position: relative;
   z-index: 1;
   display: inline-block;
@@ -9,23 +10,18 @@
   font-size: 1rem;
   font-weight: $font-weight-bold;
   line-height: 1;
+  text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 0.375rem;
-
-  @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),
-  );
+  background: linear-gradient(180deg, rgba(255 255 255 / 0.15) 0%, rgba(255 255 255 / 0) 100%),
+    var(--color-mktg-btn-bg) !important;
+  transition: box-shadow 0.2s;
 
   &::before {
-    background-blend-mode: overlay, normal;
     position: absolute;
     top: 0;
     right: 0;
@@ -34,63 +30,103 @@
     z-index: -1;
     content: "";
     // stylelint-disable-next-line primer/borders
-    border-radius: 0.375rem;
+    border-radius: inherit;
+    opacity: 0;
+    background: linear-gradient(180deg, rgba(255 255 255 / 0.15) 0%, rgba(255 255 255 / 0) 100%) !important;
     opacity: 0;
-    transition: opacity 0.4s;
+    transition: opacity 0.2s;
+    background-blend-mode: normal;
   }
 
   &:hover {
-    text-decoration: none;
+    box-shadow: var(--color-mktg-btn-shadow-hover) !important;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: var(--color-mktg-btn-shadow-focus), var(--color-mktg-btn-shadow-hover) !important;
+    outline: 0;
+  }
 
+  &:hover,
+  &:focus,
+  &.focus {
     &::before {
       opacity: 1;
-      transition: opacity 0.4s;
+    }
+
+    &:disabled {
+      box-shadow: none !important;
     }
   }
-}
 
-.btn-primary-mktg {
-  @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),
-  );
+  &:active {
+    outline: none;
+    box-shadow: 0 0 0 transparent;
+
+    &::before {
+      opacity: 0.5 !important;
+    }
+  }
 }
 
-.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-muted-mktg {
+  color: var(--color-fg-default) !important;
+  background: none !important;
+  box-shadow: var(--color-mktg-btn-shadow-outline);
+
+  &::before {
+    display: none;
+  }
+
+  &:hover {
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
+  }
+
+  &:active {
+    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
+  }
+
+  &:disabled {
+    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
+  }
 }
 
-.btn-outline-mktg {
-  @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-subtle-mktg {
+  color: var(--color-fg-default) !important;
+  background: none !important;
+  box-shadow: none !important;
+
+  &::before {
+    background: none !important;
+  }
+
+  &:hover {
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+
+  &:focus,
+  .focus {
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
+  }
 }
 
-.btn-transparent {
-  @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;
+.btn-signup-mktg {
+  color: #fff;
+  background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
+
+  &::before {
+    background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
+  }
+
+  &:focus {
+    box-shadow: rgba(46, 164, 79, 0.45) 0 0 0 4px !important;
+  }
 }
 
 // Size modifiers

src/marketing/support/index.scss

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

yarn.lock

@@ -965,10 +965,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@primer/primitives@^6.1.0":
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-6.1.0.tgz#9fe385913b922b4e48cac19fe5e560e4ae9e284d"
-  integrity sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA==
+"@primer/primitives@^7.0.1":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.0.1.tgz#bb867672214a561a910f11eabf7babf72c5994ec"
+  integrity sha512-Ddmi5Fuck3nsHt1+uvZiVzLwtjNrBloWq8FfQz74Qd9TXKxvHxrGxQuEJ21T3PxJMMwwEsKo7fk18oy1rTmFiA==
 
 "@primer/[email protected]":
   version "12.1.0"