Skip to content

Commit 9b97dc8

Browse files
tobiasahlinsimurai
tobiasahlin
and
simurai
authored
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>
1 parent e34e692 commit 9b97dc8

File tree

9 files changed

+126
-149
lines changed

9 files changed

+126
-149
lines changed

‎.changeset/nervous-keys-bow.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": major
3+
---
4+
5+
Update marketing buttons (including color mode support)

‎docs/content/components/marketing-buttons.md‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,40 @@ source: 'https://github.com/primer/css/tree/main/src/marketing/buttons'
66
bundle: marketing-buttons
77
---
88

9-
Marketing buttons come in different colors and sizes, and are also available in a blue outlined version.
9+
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.
1010

11-
## Colors, outlined and transparent
11+
## Button types
1212

13-
Marketing buttons can be solid blue, outlined blue, solid green, or transparent.
14-
15-
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.
13+
Marketing buttons can be solid (default), outlined (`muted`), borderless (`subtle`), or green (`signup`, only used for signing up).
1614

1715
```html live
18-
<button class="btn-mktg mr-3" type="button">Learn more</button>
19-
<button class="btn-mktg btn-primary-mktg mr-3" type="button">Sign up</button>
20-
<button class="btn-mktg btn-enterprise-mktg mr-3" type="button">Contact sales</button>
21-
<button class="btn-mktg btn-outline-mktg mr-3" type="button">Learn more</button>
22-
<div class="mt-3 p-3" style="background-color: var(--color-scale-gray-9);">
23-
<button class="btn-mktg btn-transparent" type="button">Learn more</button>
24-
</div>
16+
<button class="btn-mktg mr-3" type="button">Get started</button>
17+
<button class="btn-mktg btn-muted-mktg mr-3" type="button">Learn more</button>
18+
<button class="btn-mktg btn-subtle-mktg mr-3" type="button">Contact us</button>
19+
<button class="btn-mktg btn-signup-mktg" type="button">Sign up</button>
2520
```
2621

2722
## Sizes
2823

29-
Available in three sizes, marketing buttons have a default size and a large size.
24+
Marketing buttons can be set to three different sizes:
25+
26+
- Small: `btn-small-mktg`
27+
- Medium (default)
28+
- Large: `btn-large-mktg`
3029

3130
```html live
32-
<button class="btn-mktg btn-sm-mktg mr-2" type="button">Learn more</button>
33-
<button class="btn-mktg btn-primary-mktg btn-sm-mktg mr-2" type="button">Sign up</button>
34-
<button class="btn-mktg btn-enterprise-mktg btn-sm-mktg mr-3" type="button">Contact sales</button>
35-
<button class="btn-mktg btn-outline-mktg btn-sm-mktg mr-2" type="button">Learn more</button>
31+
<button class="btn-mktg btn-small-mktg mr-3" type="button">Get started</button>
32+
<button class="btn-mktg btn-muted-mktg btn-small-mktg mr-3" type="button">Learn more</button>
33+
<button class="btn-mktg btn-subtle-mktg btn-small-mktg mr-3" type="button">Contact us</button>
34+
<button class="btn-mktg btn-signup-mktg btn-small-mktg" type="button">Sign up</button>
3635
<hr>
37-
<button class="btn-mktg mr-2" type="button">Learn more</button>
38-
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
39-
<button class="btn-mktg btn-enterprise-mktg mr-3" type="button">Contact sales</button>
40-
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
36+
<button class="btn-mktg mr-3" type="button">Get started</button>
37+
<button class="btn-mktg btn-muted-mktg mr-3" type="button">Learn more</button>
38+
<button class="btn-mktg btn-subtle-mktg mr-3" type="button">Contact us</button>
39+
<button class="btn-mktg btn-signup-mktg" type="button">Sign up</button>
4140
<hr>
42-
<button class="btn-mktg btn-lg-mktg mr-2" type="button">Learn more</button>
43-
<button class="btn-mktg btn-primary-mktg btn-lg-mktg mr-2" type="button">Sign up</button>
44-
<button class="btn-mktg btn-enterprise-mktg btn-lg-mktg mr-3" type="button">Contact sales</button>
45-
<button class="btn-mktg btn-outline-mktg btn-lg-mktg mr-2" type="button">Learn more</button>
41+
<button class="btn-mktg btn-large-mktg mr-3" type="button">Get started</button>
42+
<button class="btn-mktg btn-muted-mktg btn-large-mktg mr-3" type="button">Learn more</button>
43+
<button class="btn-mktg btn-subtle-mktg btn-large-mktg mr-3" type="button">Contact us</button>
44+
<button class="btn-mktg btn-signup-mktg btn-large-mktg" type="button">Sign up</button>
4645
```

‎docs/yarn.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@
297297
dependencies:
298298
"@babel/types" "^7.16.0"
299299

300-
"@babel/helper-validator-identifier@^7.15.7":
300+
"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.15.7":
301301
version "7.15.7"
302302
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
303303
integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
@@ -1168,7 +1168,7 @@
11681168
debug "^4.1.0"
11691169
globals "^11.1.0"
11701170

1171-
"@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":
1171+
"@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":
11721172
version "7.16.0"
11731173
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
11741174
integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"storybook": "cd docs && yarn && yarn storybook"
3636
},
3737
"dependencies": {
38-
"@primer/primitives": "^6.1.0"
38+
"@primer/primitives": "^7.0.1"
3939
},
4040
"devDependencies": {
4141
"@changesets/changelog-github": "0.4.1",

‎src/deprecations.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,10 @@
335335
"flex-lg-item-equal": "flex-lg-1",
336336
"flex-xl-item-equal": "flex-xl-1",
337337
"btn-purple": null,
338+
"btn-primary-mktg": "btn-signup-mktg",
339+
"btn-enterprise-mktg": "btn-mktg",
340+
"btn-outline-mktg": "btn-muted-mktg",
341+
"btn-transparent": "btn-subtle-mktg",
338342
"text-pending": "text-yellow",
339343
"bg-pending": "bg-yellow-dark",
340344
"container": null,

‎src/marketing/buttons/button.scss‎

Lines changed: 86 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.btn-mktg {
2+
color: var(--color-canvas-default);
23
position: relative;
34
z-index: 1;
45
display: inline-block;
@@ -9,23 +10,18 @@
910
font-size: 1rem;
1011
font-weight: $font-weight-bold;
1112
line-height: 1;
13+
text-align: center;
1214
white-space: nowrap;
1315
vertical-align: middle;
1416
user-select: none;
1517
border: 0;
1618
// stylelint-disable-next-line primer/borders
1719
border-radius: 0.375rem;
18-
19-
@include btn-solid-mktg(
20-
var(--color-mktg-btn-text),
21-
var(--color-mktg-btn-bg-top),
22-
var(--color-mktg-btn-bg-bottom),
23-
var(--color-mktg-btn-bg-overlay-top),
24-
var(--color-mktg-btn-bg-overlay-bottom),
25-
);
20+
background: linear-gradient(180deg, rgba(255 255 255 / 0.15) 0%, rgba(255 255 255 / 0) 100%),
21+
var(--color-mktg-btn-bg) !important;
22+
transition: box-shadow 0.2s;
2623

2724
&::before {
28-
background-blend-mode: overlay, normal;
2925
position: absolute;
3026
top: 0;
3127
right: 0;
@@ -34,63 +30,103 @@
3430
z-index: -1;
3531
content: "";
3632
// stylelint-disable-next-line primer/borders
37-
border-radius: 0.375rem;
33+
border-radius: inherit;
34+
opacity: 0;
35+
background: linear-gradient(180deg, rgba(255 255 255 / 0.15) 0%, rgba(255 255 255 / 0) 100%) !important;
3836
opacity: 0;
39-
transition: opacity 0.4s;
37+
transition: opacity 0.2s;
38+
background-blend-mode: normal;
4039
}
4140

4241
&:hover {
43-
text-decoration: none;
42+
box-shadow: var(--color-mktg-btn-shadow-hover) !important;
43+
}
44+
45+
&:focus,
46+
&.focus {
47+
box-shadow: var(--color-mktg-btn-shadow-focus), var(--color-mktg-btn-shadow-hover) !important;
48+
outline: 0;
49+
}
4450

51+
&:hover,
52+
&:focus,
53+
&.focus {
4554
&::before {
4655
opacity: 1;
47-
transition: opacity 0.4s;
56+
}
57+
58+
&:disabled {
59+
box-shadow: none !important;
4860
}
4961
}
50-
}
5162

52-
.btn-primary-mktg {
53-
@include btn-solid-mktg(
54-
var(--color-mktg-btn-primary-text),
55-
var(--color-mktg-btn-primary-bg-top),
56-
var(--color-mktg-btn-primary-bg-bottom),
57-
var(--color-mktg-btn-primary-bg-overlay-top),
58-
var(--color-mktg-btn-primary-bg-overlay-bottom),
59-
);
63+
&:active {
64+
outline: none;
65+
box-shadow: 0 0 0 transparent;
66+
67+
&::before {
68+
opacity: 0.5 !important;
69+
}
70+
}
6071
}
6172

62-
.btn-enterprise-mktg {
63-
@include btn-solid-mktg(
64-
var(--color-mktg-btn-enterprise-text),
65-
var(--color-mktg-btn-enterprise-bg-top),
66-
var(--color-mktg-btn-enterprise-bg-bottom),
67-
var(--color-mktg-btn-enterprise-bg-overlay-top),
68-
var(--color-mktg-btn-enterprise-bg-overlay-bottom),
69-
);
73+
.btn-muted-mktg {
74+
color: var(--color-fg-default) !important;
75+
background: none !important;
76+
box-shadow: var(--color-mktg-btn-shadow-outline);
77+
78+
&::before {
79+
display: none;
80+
}
81+
82+
&:hover {
83+
box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
84+
}
85+
86+
&:focus,
87+
&.focus {
88+
box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
89+
}
90+
91+
&:active {
92+
box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
93+
}
94+
95+
&:disabled {
96+
box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
97+
}
7098
}
7199

72-
.btn-outline-mktg {
73-
@include btn-outline-mktg(
74-
var(--color-mktg-btn-outline-text),
75-
var(--color-mktg-btn-outline-hover-text),
76-
var(--color-mktg-btn-outline-border),
77-
var(--color-mktg-btn-outline-hover-border),
78-
var(--color-mktg-btn-outline-focus-border),
79-
var(--color-mktg-btn-outline-focus-border-inset)
80-
);
81-
transition: box-shadow 0.4s, color 0.4s;
100+
.btn-subtle-mktg {
101+
color: var(--color-fg-default) !important;
102+
background: none !important;
103+
box-shadow: none !important;
104+
105+
&::before {
106+
background: none !important;
107+
}
108+
109+
&:hover {
110+
box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
111+
}
112+
113+
&:focus,
114+
.focus {
115+
box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
116+
}
82117
}
83118

84-
.btn-transparent {
85-
@include btn-outline-mktg(
86-
var(--color-mktg-btn-dark-text),
87-
var(--color-mktg-btn-dark-hover-text),
88-
var(--color-mktg-btn-dark-border),
89-
var(--color-mktg-btn-dark-hover-border),
90-
var(--color-mktg-btn-dark-focus-border),
91-
var(--color-mktg-btn-dark-focus-border-inset)
92-
);
93-
transition: box-shadow 0.4s, color 0.4s;
119+
.btn-signup-mktg {
120+
color: #fff;
121+
background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
122+
123+
&::before {
124+
background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
125+
}
126+
127+
&:focus {
128+
box-shadow: rgba(46, 164, 79, 0.45) 0 0 0 4px !important;
129+
}
94130
}
95131

96132
// Size modifiers

‎src/marketing/support/index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11
@import "../../support/index.scss";
2-
@import "./mixins.scss";
32
@import "./variables.scss";

‎src/marketing/support/mixins.scss‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -965,10 +965,10 @@
965965
"@nodelib/fs.scandir" "2.1.5"
966966
fastq "^1.6.0"
967967

968-
"@primer/primitives@^6.1.0":
969-
version "6.1.0"
970-
resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-6.1.0.tgz#9fe385913b922b4e48cac19fe5e560e4ae9e284d"
971-
integrity sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA==
968+
"@primer/primitives@^7.0.1":
969+
version "7.0.1"
970+
resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.0.1.tgz#bb867672214a561a910f11eabf7babf72c5994ec"
971+
integrity sha512-Ddmi5Fuck3nsHt1+uvZiVzLwtjNrBloWq8FfQz74Qd9TXKxvHxrGxQuEJ21T3PxJMMwwEsKo7fk18oy1rTmFiA==
972972

973973
"@primer/stylelint-config@12.1.0":
974974
version "12.1.0"

0 commit comments

Comments
 (0)