Skip to content

Commit 33e8d91

Browse files
simuraisimurai
authored
Merge pull request #1352 from primer/tobiasahlin/update-marketing-buttons
Update marketing button styles
2 parents b2f1353 + 2cc4dbb commit 33e8d91

File tree

7 files changed

+183
-100
lines changed

7 files changed

+183
-100
lines changed

‎.changeset/tiny-eagles-repair.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 button styles

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ The solid blue and solid green buttons have more visual emphasis than the blue o
1717
```html live
1818
<button class="btn-mktg mr-3" type="button">Learn more</button>
1919
<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>
2021
<button class="btn-mktg btn-outline-mktg mr-3" type="button">Learn more</button>
2122
<div class="mt-3 p-3" style="background-color: var(--color-scale-gray-9);">
2223
<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
2526

2627
## Sizes
2728

28-
Available in two sizes, marketing buttons have a default size and a large size.
29+
Available in three sizes, marketing buttons have a default size and a large size.
2930

3031
```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>
36+
<hr>
3137
<button class="btn-mktg mr-2" type="button">Learn more</button>
3238
<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>
3340
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
3441
<hr>
35-
<button class="btn-mktg btn-large-mktg mr-2" type="button">Learn more</button>
36-
<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
37-
<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
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>
3846
```

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
},
3232
"dependencies": {
3333
"@primer/octicons": "13.0.0",
34-
"@primer/primitives": "4.2.2"
34+
"@primer/primitives": "4.3.0"
3535
},
3636
"devDependencies": {
3737
"@changesets/changelog-github": "0.4.0",

‎src/marketing/buttons/button.scss

Lines changed: 80 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,106 @@
11
.btn-mktg {
2+
position: relative;
3+
z-index: 1;
24
display: inline-block;
3-
padding: $spacer-3 $spacer-4;
4-
font-size: $h5-size;
5-
font-weight: $font-weight-semibold;
6-
color: var(--color-mktg-btn-text);
5+
appearance: none !important;
6+
// stylelint-disable-next-line primer/spacing
7+
padding: rem(($spacer-3) * 0.9) rem($spacer-4) rem(($spacer-3) * 1.1);
8+
// stylelint-disable-next-line primer/typography
9+
font-size: 1rem;
10+
font-weight: $font-weight-bold;
11+
line-height: 1;
712
white-space: nowrap;
813
vertical-align: middle;
9-
cursor: pointer;
1014
user-select: none;
11-
background-color: var(--color-mktg-btn-bg);
12-
border: $border-width $border-style var(--color-mktg-btn-border);
13-
border-radius: $border-radius;
14-
transition-duration: $transition-time / 2;
15-
transition-property: background-color, border-color, box-shadow;
16-
appearance: none; // Corrects inability to style clickable `input` types in iOS.
15+
border: 0;
16+
// stylelint-disable-next-line primer/borders
17+
border-radius: rem(6px);
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+
);
26+
27+
&::before {
28+
background-blend-mode: overlay, normal;
29+
position: absolute;
30+
top: 0;
31+
right: 0;
32+
bottom: 0;
33+
left: 0;
34+
z-index: -1;
35+
content: "";
36+
// stylelint-disable-next-line primer/borders
37+
border-radius: rem(6px);
38+
opacity: 0;
39+
transition: opacity 0.4s;
40+
}
1741

1842
&:hover {
1943
text-decoration: none;
20-
background-color: var(--color-mktg-btn-hover-bg);
21-
border-color: var(--color-mktg-btn-hover-border);
22-
}
2344

24-
&:focus {
25-
outline: 0;
26-
box-shadow: var(--color-mktg-btn-focus-shadow);
27-
}
28-
29-
&:disabled,
30-
&.disabled,
31-
&[aria-disabled=true] {
32-
color: var(--color-mktg-btn-disabled-text);
33-
pointer-events: none; // Disable hover styles
34-
cursor: default;
35-
background-color: var(--color-mktg-btn-disabled-bg);
36-
border-color: var(--color-mktg-btn-disabled-border);
45+
&::before {
46+
opacity: 1;
47+
transition: opacity 0.4s;
48+
}
3749
}
3850
}
3951

4052
.btn-primary-mktg {
41-
color: var(--color-mktg-btn-primary-text);
42-
background-color: var(--color-mktg-btn-primary-bg);
43-
border-color: var(--color-mktg-btn-primary-border);
44-
45-
&:hover {
46-
background-color: var(--color-mktg-btn-primary-hover-bg);
47-
border-color: var(--color-mktg-btn-primary-hover-border);
48-
}
49-
50-
&:focus {
51-
box-shadow: var(--color-mktg-btn-primary-focus-shadow);
52-
}
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+
);
60+
}
5361

54-
&:disabled,
55-
&.disabled,
56-
&[aria-disabled=true] {
57-
color: var(--color-mktg-btn-primary-disabled-text);
58-
background-color: var(--color-mktg-btn-primary-disabled-bg);
59-
border-color: var(--color-mktg-btn-primary-disabled-border);
60-
}
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+
);
6170
}
6271

6372
.btn-outline-mktg {
64-
color: var(--color-mktg-btn-outline-text);
65-
background-color: var(--color-mktg-btn-outline-bg);
66-
border-color: var(--color-mktg-btn-outline-border);
67-
68-
&:hover {
69-
color: var(--color-mktg-btn-outline-hover-text);
70-
background-color: var(--color-mktg-btn-outline-hover-bg);
71-
border-color: var(--color-mktg-btn-outline-hover-border);
72-
}
73-
74-
&:focus {
75-
box-shadow: var(--color-mktg-btn-outline-focus-shadow);
76-
}
77-
78-
&:disabled,
79-
&.disabled,
80-
&[aria-disabled=true] {
81-
color: var(--color-mktg-btn-outline-disabled-text);
82-
background-color: var(--color-mktg-btn-outline-disabled-bg);
83-
border-color: var(--color-mktg-btn-outline-disabled-border);
84-
}
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;
8582
}
8683

8784
.btn-transparent {
88-
color: var(--color-mktg-btn-dark-text);
89-
background-color: var(--color-mktg-btn-dark-bg);
90-
border-color: var(--color-mktg-btn-dark-border);
91-
92-
&:hover {
93-
color: var(--color-mktg-btn-dark-hover-text);
94-
background-color: var(--color-mktg-btn-dark-hover-bg);
95-
border-color: var(--color-mktg-btn-dark-hover-border);
96-
}
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;
94+
}
9795

98-
&:focus {
99-
box-shadow: var(--color-mktg-btn-dark-focus-shadow);
100-
}
96+
// Size modifiers
10197

102-
&:disabled,
103-
&.disabled,
104-
&[aria-disabled=true] {
105-
color: var(--color-mktg-btn-dark-disabled-text);
106-
background-color: var(--color-mktg-btn-dark-disabled-bg);
107-
border-color: var(--color-mktg-btn-dark-disabled-border);
108-
}
98+
.btn-sm-mktg {
99+
// stylelint-disable-next-line primer/spacing
100+
padding: rem(10px) rem($spacer-3) rem(13px);
109101
}
110102

111-
// Large
112-
113-
.btn-large-mktg {
103+
.btn-lg-mktg {
114104
// stylelint-disable-next-line primer/spacing
115-
padding: 20px $spacer-5;
116-
font-size: $h4-size;
105+
padding: 20px 30px 23px !important;
117106
}

‎src/marketing/support/index.scss

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

‎src/marketing/support/mixins.scss

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@mixin btn-solid-mktg($color, $bg, $bg2, $bg3, $bg4) {
2+
color: $color;
3+
background-color: $bg2;
4+
background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
5+
6+
&::before {
7+
background-image: linear-gradient(-180deg, $bg3 0%, $bg4 100%);
8+
}
9+
10+
&:hover,
11+
&.hover,
12+
&:active,
13+
&.selected,
14+
&[aria-selected="true"],
15+
[open] > & {
16+
background-color: $bg2;
17+
background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
18+
}
19+
20+
&:focus,
21+
&.focus {
22+
outline: 0;
23+
box-shadow: 0 0 0 0.2em rgba($bg2, 0.4);
24+
}
25+
26+
&:disabled,
27+
&.disabled,
28+
&[aria-disabled="true"] {
29+
pointer-events: none;
30+
cursor: default;
31+
opacity: 0.5;
32+
}
33+
}
34+
35+
@mixin btn-outline-mktg($color, $color2, $border, $borderHover, $borderFocus, $borderFocusInset) {
36+
color: $color;
37+
background: none;
38+
box-shadow: 0 0 0 1px $border inset;
39+
40+
&::before {
41+
display: none;
42+
}
43+
44+
&:hover,
45+
&.hover,
46+
&:active,
47+
&.selected,
48+
&[aria-selected="true"],
49+
[open] > & {
50+
color: $color2;
51+
background: none;
52+
box-shadow: 0 0 0 2px $borderHover inset;
53+
}
54+
55+
&:focus,
56+
&.focus {
57+
outline: 0;
58+
box-shadow: 0 0 0 2px $borderFocus inset, 0 0 0 4px $borderFocusInset;
59+
}
60+
61+
&:disabled,
62+
&.disabled,
63+
&[aria-disabled="true"] {
64+
opacity: 0.5;
65+
}
66+
}
67+
68+
$browser-context: 16 !default;
69+
70+
@function rem($pixels, $context: $browser-context) {
71+
@if (unitless($pixels)) {
72+
$pixels: $pixels * 1px;
73+
}
74+
75+
@if (unitless($context)) {
76+
$context: $context * 1px;
77+
}
78+
79+
@return $pixels / $context * 1rem;
80+
}

‎yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -767,10 +767,10 @@
767767
dependencies:
768768
object-assign "^4.1.1"
769769

770-
"@primer/primitives@4.2.2":
771-
version "4.2.2"
772-
resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.2.2.tgz#3d4400c125bad85e9a4de35832dbe2af98ba1c45"
773-
integrity sha512-PHuDnaaYI5+SjK5RaLGXxYxgDkSqx3DJJCOxwVvrcA8pPUdfJ4ifFrZxly+NA/5DyHNVTzkjnaRa9V35ff9Lgg==
770+
"@primer/primitives@4.3.0":
771+
version "4.3.0"
772+
resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-4.3.0.tgz#446e868cd1c48437cbc3340c52b159ec2e015b78"
773+
integrity sha512-djXxll2yVTufmhnHA1H9bMT8I3S0ID6GlSewAJvKHlv80I+5AoZASVBF+WedtH/SyloLM5wyk+Tqj1ZNmy2+RQ==
774774

775775
"@sinonjs/commons@^1.7.0":
776776
version "1.8.2"

0 commit comments

Comments
 (0)