Skip to content
This repository was archived by the owner on Mar 6, 2025. It is now read-only.

Commit fc0ad29

Browse files
matijsmatijs
committed
Use new colors for buttons states
Some of the colors used also touched the checkboxes and the Alice Carousel component. These have been converted to $um-* colors as well.
1 parent 5191929 commit fc0ad29

File tree

6 files changed

+45
-74
lines changed

6 files changed

+45
-74
lines changed

‎src/stylesheets/_buttons.scss‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -85,59 +85,60 @@ button {
8585
}
8686

8787
.btn--primary {
88-
color: $primary-btn-color-text;
88+
color: $um-white;
8989
background-color: $um-blue-5;
9090

9191
&:hover,
9292
&:focus {
93-
background-color: $primary-btn-color-hover;
93+
background-color: $um-blue-7;
9494
}
9595

9696
&:active,
9797
&.waiting,
9898
&.waiting:hover {
99-
background-color: $primary-btn-color-active;
99+
background-color: $um-blue-5;
100100
}
101101

102102
&.disabled,
103103
.disabled:hover,
104104
.disabled:active,
105105
.disabled:focus {
106-
background-color: $primary-btn-color-disabled;
107-
color: $primary-btn-color-disabled-text;
106+
background-color: $um-gray-5;
108107
}
109108

110109
.spinner .path {
111-
stroke: $primary-btn-color-text;
110+
stroke: $um-white;
112111
}
113112
}
114113

115114
.btn--secondary {
116-
border: 1px solid $secondary-btn-color-border;
115+
background-color: $um-white;
116+
border: 2px solid;
117117
padding: 0.8rem 3.5rem 1rem;
118-
color: $secondary-btn-color-text;
118+
color: $um-blue-5;
119119

120120
&:hover,
121121
&:focus {
122-
background-color: $secondary-btn-color-hover;
122+
background-color: $um-gray-3;
123123
}
124124

125125
&:active,
126126
&.waiting,
127127
&.waiting:hover {
128-
background-color: $secondary-btn-color-active;
128+
background-color: $um-white;
129129
}
130130

131131
&.disabled,
132132
&.disabled:hover,
133133
&.disabled:active,
134134
.disabled:focus {
135-
background-color: $secondary-btn-color-disabled;
136-
color: $secondary-btn-color-disabled-text;
135+
background-color: $um-white;
136+
border-color: $um-gray-5;
137+
color: $um-gray-5;
137138
}
138139

139140
.spinner .path {
140-
stroke: $secondary-btn-color-text;
141+
stroke: $um-blue-5;
141142
}
142143
}
143144

@@ -146,21 +147,21 @@ button {
146147

147148
&:hover,
148149
&:focus {
149-
background-color: $quiet-btn-color-hover;
150+
background-color: $um-gray-3;
150151
}
151152

152153
&:active,
153154
&.waiting,
154155
&.waiting:hover {
155-
background-color: $quiet-btn-color-active;
156+
background-color: transparent;
156157
}
157158

158159
&.disabled,
159160
&.disabled:hover,
160161
&.disabled:active,
161162
.disabled:focus {
162163
background-color: transparent;
163-
color: $quiet-btn-color-disabled-text;
164+
color: $um-gray-5;
164165
}
165166

166167
.spinner .path {
@@ -169,32 +170,32 @@ button {
169170
}
170171

171172
.btn--alert {
172-
border: 1px solid $alert-btn-color-border;
173+
border: 2px solid $um-red-5;
173174
padding: 0.8rem 3.5rem 1rem;
174-
color: $alert-btn-color-text;
175-
background-color: $alert-btn-color;
175+
color: $um-red-5;
176+
background-color: $um-white;
176177

177178
&:hover,
178179
&:focus {
179-
background-color: $alert-btn-color-hover;
180+
background-color: $um-gray-3;
180181
}
181182

182183
&:active,
183184
&.waiting,
184185
&.waiting:hover {
185-
background-color: $alert-btn-color-active;
186+
background-color: $um-white;
186187
}
187188

188189
&.disabled,
189190
.disabled:hover,
190191
.disabled:active,
191192
.disabled:focus {
192-
background-color: $alert-btn-color-disabled;
193-
color: $alert-btn-color-disabled-text;
193+
background-color: $um-gray-3;
194+
color: $um-white;
194195
}
195196

196197
.spinner .path {
197-
stroke: $alert-btn-color-text;
198+
stroke: $um-red-5;
198199
}
199200
}
200201

@@ -292,8 +293,8 @@ button {
292293
.btn--circle {
293294
width: 4.6rem;
294295
height: 4.6rem;
295-
background-color: $color-white;
296-
color: $color-black;
296+
background-color: $um-white;
297+
color: $um-black;
297298
}
298299
}
299300
}

‎src/stylesheets/_carousel.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
}
44

55
.alice-carousel__dots-item {
6-
background-color: $primary-btn-color-disabled;
6+
background-color: $um-gray-5;
77
transition: background-color 0.2s ease-out;
88

99
&:hover,

‎src/stylesheets/_checkbox.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
position: relative;
1616
display: block;
1717
border-radius: 2px;
18-
border: 1px solid $checkbox-color-border;
18+
border: 1px solid $um-black;
1919
transition: background 0.2s ease-out,
2020
border-color 0.2s ease-out;
2121

@@ -33,7 +33,7 @@
3333
position: absolute;
3434
top: 0.6rem;
3535
left: 0.6rem;
36-
border: 3px solid $checkbox-color-tick-hover;
36+
border: 3px solid $um-gray-5;
3737
border-top: none;
3838
border-right: none;
3939
background: transparent;
@@ -66,7 +66,7 @@
6666

6767
.checkbox__visual::after {
6868
opacity: 1;
69-
border-color: $checkbox-color-tick-active;
69+
border-color: $um-white;
7070
}
7171
}
7272

‎src/stylesheets/_icons.scss‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,42 +22,42 @@
2222
display: flex;
2323
justify-content: center;
2424
align-items: center;
25-
color: $primary-btn-color-text;
25+
color: $um-white;
2626
background-color: $um-blue-5;
2727
font-size: 1.6rem;
2828

2929
&.primary {
3030
svg {
31-
fill: $primary-btn-color-text;
31+
fill: $um-blue-5;
3232
}
3333

3434
&.disabled {
35-
background-color: $primary-btn-color-disabled;
36-
color: $primary-btn-color-disabled-text;
35+
background-color: $um-gray-5;
36+
color: $um-white;
3737

3838
svg {
39-
fill: $primary-btn-color-disabled-text;
39+
fill: $um-white;
4040
}
4141
}
4242
}
4343

4444
&.secondary {
45-
color: $secondary-btn-color-text;
46-
background-color: $secondary-btn-color;
47-
border: 2px solid $secondary-btn-color-border;
45+
color: $um-blue-5;
46+
background-color: $um-white;
47+
border: 2px solid;
4848

4949
svg {
50-
fill: $secondary-btn-color-text;
50+
fill: $um-blue-5;
5151
}
5252
}
5353

5454
&.alert {
55-
color: $alert-btn-color-text;
56-
background-color: $alert-btn-color;
57-
border: 2px solid $alert-btn-color-border;
55+
color: $um-red-5;
56+
background-color: $um-white;
57+
border: 2px solid;
5858

5959
svg {
60-
fill: $alert-btn-color-text;
60+
fill: $um-red-5;
6161
}
6262
}
6363

‎src/stylesheets/_input_fields.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@
264264
}
265265

266266
input[type='file']:focus + .btn {
267-
background-color: $primary-btn-color-hover;
267+
background-color: $um-blue-7;
268268
}
269269
}
270270

‎src/stylesheets/_variables.scss‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -100,32 +100,6 @@ $color-shadow-light: $color-transparent-grey-lighter !default;
100100
$color-shadow: $color-transparent-grey-dark !default;
101101
$color-shadow-dark: $color-transparent-grey-darker !default;
102102

103-
$primary-btn-color-text: $color-white !default;
104-
$primary-btn-color-hover: $color-blue-light !default;
105-
$primary-btn-color-active: $color-blue-lighter !default;
106-
$primary-btn-color-disabled: $color-background-darker !default;
107-
$primary-btn-color-disabled-text: $color-text-lighter !default;
108-
109-
$secondary-btn-color: $color-transparent !default;
110-
$secondary-btn-color-text: $color-text !default;
111-
$secondary-btn-color-border: $color-black !default;
112-
$secondary-btn-color-hover: $color-background-darker !default;
113-
$secondary-btn-color-active: $color-background-darkest !default;
114-
$secondary-btn-color-disabled: $color-background-darker !default;
115-
$secondary-btn-color-disabled-text: $color-text-lighter !default;
116-
117-
$quiet-btn-color-hover: $color-background-darker !default;
118-
$quiet-btn-color-active: $color-background-darkest !default;
119-
$quiet-btn-color-disabled-text: $color-text-lighter !default;
120-
121-
$alert-btn-color: $color-transparent !default;
122-
$alert-btn-color-text: $color-red !default;
123-
$alert-btn-color-border: $color-red !default;
124-
$alert-btn-color-hover: $color-background-darker !default;
125-
$alert-btn-color-active: $color-background-darkest !default;
126-
$alert-btn-color-disabled: $color-background-darker !default;
127-
$alert-btn-color-disabled-text: $color-text-lighter !default;
128-
129103
$progress-bar-color-paused: $color-grey-mid !default;
130104
$progress-bar-color-background: $color-grey-lightest !default;
131105

@@ -139,10 +113,6 @@ $context-menu-disabled-color-trigger: $color-grey-light !default;
139113
$context-menu-disabled-color-trigger-hover: $color-background-dark !default;
140114
$context-menu-disabled-color-hover: $color-transparent !default;
141115

142-
$checkbox-color-tick-active: $color-white !default;
143-
$checkbox-color-border: $secondary-btn-color-border !default;
144-
$checkbox-color-tick-hover: $color-border !default;
145-
146116
$tooltip-dark-color-background: $color-grey-darker !default;
147117
$tooltip-color-text: $color-white !default;
148118
$tooltip-arrow-size: 15px !default;

0 commit comments

Comments
 (0)