Skip to content

Commit 571aa4a

Browse files
stephaniehobsonstephaniehobson
authored
Update button styles to match Mozilla brand refresh (#1046) (#1094)
* Added sizing to CTA link component (#1083) * Update button styles to match Mozilla brand refresh (#1046)
1 parent 81e6c70 commit 571aa4a

File tree

12 files changed

+280
-154
lines changed

12 files changed

+280
-154
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
## Features
44

5+
* **css:** Update button styles to match Mozilla brand refresh (#1046)
6+
* **component:** Added sizing and icon support to CTA link component (#1083)
57
* **component:** Added `mzp-u-rich-text` utility class to add back list and table styles (#1079)
68
* **docs:** Added a new utility class section to docs.
79
* **component:** Update breadcrumb styles (#1036)

‎assets/sass/protocol/base/elements/_links.scss‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,73 @@ a {
5454
@supports (--css: variables) {
5555
font-family: var(--button-font-family);
5656
}
57+
58+
&.mzp-t-xs {
59+
@include text-body-sm;
60+
}
61+
62+
&.mzp-t-sm {
63+
@include text-body-md;
64+
}
65+
66+
&.mzp-t-md {
67+
@include text-body-lg;
68+
}
69+
70+
&.mzp-t-lg {
71+
@include text-title-xs;
72+
font-family: $title-font-family;
73+
74+
@supports (--css: variables) {
75+
font-family: var(--title-font-family);
76+
}
77+
}
78+
79+
&.mzp-t-xl {
80+
@include text-title-sm;
81+
font-family: $title-font-family;
82+
83+
@supports (--css: variables) {
84+
font-family: var(--title-font-family);
85+
}
86+
}
87+
88+
&.mzp-t-2xl {
89+
@include text-title-lg;
90+
font-family: $title-font-family;
91+
92+
@supports (--css: variables) {
93+
font-family: var(--title-font-family);
94+
}
95+
}
96+
97+
// Icon support
98+
&-icon-start,
99+
&-icon-end {
100+
align-items: center;
101+
display: inline-flex;
102+
font-size: 1em;
103+
line-height: 1;
104+
height: 1em;
105+
justify-content: center;
106+
width: auto;
107+
vertical-align: text-top;
108+
border-top: 0.15em solid transparent;
109+
box-sizing: border-box;
110+
111+
img,
112+
svg {
113+
height: 100%;
114+
width: auto;
115+
}
116+
}
117+
118+
&-icon-start {
119+
@include bidi(((margin-right, 0.5ch, 0), (margin-left, 0, 0.5ch),));
120+
}
121+
122+
&-icon-end {
123+
@include bidi(((margin-left, 0.5ch, 0), (margin-right, 0, 0.5ch),));
124+
}
125+
57126
}

‎assets/sass/protocol/components/_button.scss‎

Lines changed: 77 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -5,85 +5,21 @@
55
@use '../includes/lib' as *;
66
@use '../includes/forms';
77

8-
@mixin default-states {
9-
&:focus {
10-
border-color: forms.$button-border-color-focus;
11-
box-shadow: forms.$field-focus-ring;
12-
outline-offset: 1px;
13-
}
14-
15-
&:hover {
16-
background-color: $color-marketing-gray-20;
17-
border-color: $color-black;
18-
box-shadow: none;
19-
color: $color-black;
20-
}
21-
22-
&:active {
23-
background-color: $color-marketing-gray-20;
24-
border-color: $color-marketing-gray-70;
25-
color: $color-black;
26-
}
27-
}
28-
29-
@mixin default-states-dark {
30-
&:focus {
31-
outline-offset: 1px;
32-
border-color: forms.$button-border-color-focus;
33-
box-shadow: forms.$field-focus-ring-dark;
34-
outline: forms.$field-focus-ring-outline;
35-
}
36-
37-
&:hover {
38-
background-color: $color-dark-gray-60;
39-
border-color: $color-white;
40-
box-shadow: none;
41-
color: $color-white;
42-
}
43-
44-
&:active {
45-
background-color: $color-dark-gray-60;
46-
border-color: $color-light-gray-50;
47-
color: $color-white;
48-
}
49-
}
50-
51-
@mixin product-states {
52-
&:focus {
53-
border-color: forms.$button-border-color-focus;
54-
box-shadow: forms.$field-focus-ring;
55-
outline-offset: 1px;
56-
}
57-
58-
&:hover {
59-
background-color: $color-blue-60;
60-
border-color: transparent;
61-
box-shadow: none;
62-
color: $color-white;
63-
}
64-
65-
&:active {
66-
background-color: $color-blue-80;
67-
border-color: transparent;
68-
color: $color-white;
69-
}
70-
}
718

729
// * -------------------------------------------------------------------------- */
7310
// Button shape and size
7411

7512
.mzp-c-button {
7613
@include border-box;
7714
@include font-size(16px);
78-
@include transition(background-color 100ms, box-shadow 100ms, color 100ms);
79-
border-radius: $border-radius-sm;
15+
@include transition(background-color 100ms, border-color 100ms, color 100ms);
8016
border: 2px solid transparent;
8117
cursor: pointer;
8218
display: inline-block;
8319
font-family: $button-font-family;
8420
font-weight: bold;
8521
line-height: $body-line-height;
86-
padding: 6px $spacing-lg;
22+
padding: $spacing-sm $spacing-md;
8723
text-align: center;
8824
text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
8925

@@ -95,6 +31,12 @@
9531
box-shadow: none;
9632
}
9733

34+
&:focus {
35+
border-color: forms.$button-border-color-focus;
36+
box-shadow: forms.$field-focus-ring;
37+
outline-offset: 1px;
38+
}
39+
9840
&:disabled {
9941
opacity: 0.6;
10042
pointer-events: none;
@@ -110,19 +52,18 @@
11052

11153
.mzp-c-button.mzp-t-sm {
11254
@include font-size(12px);
113-
border-radius: $border-radius-xs;
114-
padding: 1px $spacing-md;
55+
padding: 1px $spacing-sm;
11556
}
11657

11758
.mzp-c-button.mzp-t-small, // backwards compatability
11859
.mzp-c-button.mzp-t-md {
11960
@include font-size(14px);
120-
padding: $spacing-xs $spacing-lg;
61+
padding: $spacing-xs $spacing-sm;
12162
}
12263

12364
.mzp-c-button.mzp-t-lg {
12465
@include font-size(16px);
125-
padding: 6px $spacing-lg;
66+
padding: $spacing-sm $spacing-md;
12667
}
12768

12869
.mzp-c-button.mzp-t-xl {
@@ -136,23 +77,31 @@
13677
.mzp-c-button { /* stylelint-disable-line no-duplicate-selectors */
13778
// * ---------------------------------------------------------------------- */
13879
// Primary
139-
background-color: $color-black;
80+
background-color: $color-moz-black;
14081
border: 2px solid $color-black;
14182
color: $color-white;
14283

143-
@include default-states;
84+
&:hover,
85+
&:active {
86+
background-color: $color-white;
87+
border-color: $color-black;
88+
color: $color-black;
89+
}
14490

14591
// dark
14692
&.mzp-t-dark {
14793
background-color: $color-white;
14894
border-color: $color-white;
14995
color: $color-black;
15096

151-
@include default-states-dark;
97+
&:hover,
98+
&:active {
99+
background-color: $color-moz-black;
100+
border-color: $color-white;
101+
color: $color-white;
102+
}
152103
}
153104

154-
155-
156105
// * ---------------------------------------------------------------------- */
157106
// Secondary
158107

@@ -161,99 +110,94 @@
161110
border-color: $color-black;
162111
color: $color-black;
163112

164-
@include default-states;
113+
&:hover,
114+
&:active {
115+
background-color: $color-moz-black;
116+
border-color: $color-black;
117+
color: $color-white;
118+
}
165119

166120
// dark
167121
&.mzp-t-dark {
168122
background-color: transparent;
169123
border-color: $color-white;
170124
color: $color-white;
171125

172-
@include default-states-dark;
126+
&:hover,
127+
&:active {
128+
background-color: $color-white;
129+
border-color: $color-white;
130+
color: $color-black;
131+
}
173132
}
174133
}
175134

176135
// * ---------------------------------------------------------------------- */
177136
// Product
178137

179138
&.mzp-t-product {
180-
background-color: $color-blue-50;
181-
border-color: transparent;
182-
color: $color-white;
183-
184-
@include product-states;
139+
&,
140+
&.mzp-t-dark {
141+
background-color: $color-blue-50;
142+
border-color: $color-blue-50;
143+
color: $color-white;
185144

186-
// dark is the same as light
145+
&:hover,
146+
&:active {
147+
background-color: $color-white;
148+
border-color: $color-blue-50;
149+
color: $color-blue-50;
150+
}
151+
}
187152

188153
// secondary
189154
&.mzp-t-secondary {
190-
background-color: transparent;
191-
border-color: $color-blue-50;
192-
color: $color-blue-50;
193-
194-
@include product-states;
195-
196-
// dark
155+
&,
197156
&.mzp-t-dark {
198-
background-color: rgba($color-white, 0.3);
199-
border-color: transparent;
200-
color: $color-white;
157+
background-color: $color-white;
158+
border-color: $color-blue-50;
159+
color: $color-blue-50;
201160

202-
@include product-states;
161+
&:hover,
162+
&:active {
163+
background-color: $color-blue-50;
164+
color: $color-white;
165+
}
203166
}
204167
}
168+
}
205169

170+
// * -------------------------------------------------------------------------- */
171+
// Neutral Buttons
172+
&.mzp-t-neutral {
173+
background-color: transparent;
174+
border-color: $color-marketing-gray-30;
175+
color: $color-marketing-gray-70;
206176

207-
// * -------------------------------------------------------------------------- */
208-
// Neutral Buttons
209-
&.mzp-t-neutral {
210-
background-color: transparent;
211-
border-color: $color-marketing-gray-30;
177+
&:hover,
178+
&:active {
179+
background-color: $color-marketing-gray-20;
180+
border-color: $color-marketing-gray-40;
212181
color: $color-marketing-gray-70;
182+
}
213183

214-
&:focus {
215-
border-color: forms.$button-border-color-focus;
216-
}
217-
218-
&:hover {
219-
background-color: $color-marketing-gray-20;
220-
border-color: $color-marketing-gray-40;
221-
color: $color-marketing-gray-70;
222-
}
184+
// dark
185+
&.mzp-t-dark {
186+
background-color: rgba($color-white, 0.1);
187+
border-color: rgba($color-white, 0.6);
188+
color: $color-white;
223189

190+
&:hover,
224191
&:active {
225-
background-color: $color-marketing-gray-20;
226-
border-color: $color-marketing-gray-50;
227-
color: $color-marketing-gray-70;
228-
}
229-
230-
// dark
231-
&.mzp-t-dark {
232-
background-color: rgba($color-white, 0.1);
192+
background-color: rgba($color-white, 0.2);
233193
border-color: rgba($color-white, 0.6);
234194
color: $color-white;
235-
236-
&:focus {
237-
border-color: forms.$button-border-color-focus;
238-
}
239-
240-
&:hover {
241-
background-color: rgba($color-white, 0.2);
242-
border-color: rgba($color-white, 0.6);
243-
color: $color-white;
244-
}
245-
246-
&:active {
247-
background-color: rgba($color-white, 0.2);
248-
border-color: rgba($color-white, 0.4);
249-
color: $color-white;
250-
}
251195
}
252-
253196
}
254197
}
255198
}
256199

200+
257201
// * -------------------------------------------------------------------------- */
258202
// Download Button
259203

0 commit comments

Comments
 (0)