primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-29 14:14:26 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Tobias Ahlin 2021-11-10 05:55:33 +01:00 committed by GitHub
parent e34e69274d
commit 9b97dc8fec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 126 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/nervous-keys-bow.md Normal file
View File

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

49
docs/content/components/marketing-buttons.md
View File

@ -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>
```

4
docs/yarn.lock
View File

@ -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==

2
package.json
View File

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

4
src/deprecations.json
View File

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

136
src/marketing/buttons/button.scss
View File

@ -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;
transition: opacity 0.4s;
background: linear-gradient(180deg, rgba(255 255 255 / 0.15) 0%, rgba(255 255 255 / 0) 100%) !important;
opacity: 0;
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;
}
}
&:active {
outline: none;
box-shadow: 0 0 0 transparent;
&::before {
opacity: 0.5 !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),
);
.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-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-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-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-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;
.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;
&::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

1
src/marketing/support/index.scss
View File

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

66
src/marketing/support/mixins.scss
View File

@ -1,66 +0,0 @@
@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;
}
}

8
yarn.lock
View File

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