Update marketing buttons (including color mode support) (#1716)

* Add new gloss buttons * Disable default outline * Add focus and hover states for subtle buttons * Remove redundant properties * Rename outline → muted to align with functional color naming * Update documentation to match new button setup * Clarify what's temporary * Create nervous-keys-bow.md * Remove unused mixins * Call background colors what they are (background colors) * yarn add @primer/primitives@^7.0.1 * Use primer/primitives variables * Deprecate mktg buttons * Replace btn-transparent with btn-subtle-mktg * Recommend replacing btn-enterprise-mktg with default btn-mktg Co-authored-by: simurai <simurai@github.com>
primer · Nov 10, 2021 · 9b97dc8 · 9b97dc8
1 parent e34e692
commit 9b97dc8
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 149 deletions.
diff --git a/.changeset/nervous-keys-bow.md b/.changeset/nervous-keys-bow.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Update marketing buttons (including color mode support)
diff --git a/docs/content/components/marketing-buttons.md b/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>
 ```
diff --git a/docs/yarn.lock b/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==

diff --git a/package.json b/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",

diff --git a/src/deprecations.json b/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,

diff --git a/src/marketing/buttons/button.scss b/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

diff --git a/src/marketing/support/index.scss b/src/marketing/support/index.scss
@@ -1,3 +1,2 @@
 @import "../../support/index.scss";
-@import "./mixins.scss";
 @import "./variables.scss";
diff --git a/src/marketing/support/mixins.scss b/src/marketing/support/mixins.scss
diff --git a/yarn.lock b/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/stylelint-config@12.1.0":
   version "12.1.0"