Skip to content

Commit 905a856

Browse files
langermanklangermank
authored
Merge branch 'main' into global-focus-styles
2 parents 55e0753 + 9b97dc8 commit 905a856

File tree

8 files changed

+124
-147
lines changed

8 files changed

+124
-147
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
```

‎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)