Skip to content

Commit fdc6b2d

Browse files
webstackdevwebstackdev
committed
Clean up hard-coded color values in several places, fix unit test locators dependent on removed CSS classes
1 parent 5241082 commit fdc6b2d

31 files changed

Lines changed: 1563 additions & 845 deletions

File tree

‎public/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Forms/Contact/uppy-audio.css‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
.uppy-Audio-audioContainer {
1111
align-items: center;
12-
background-color: #cfcfcf;
12+
background-color: var(--color-gray-300);
1313
display: flex;
1414
height: 100%;
1515
justify-content: center;
@@ -49,11 +49,12 @@
4949
}
5050

5151
.uppy-Audio-audioSource-select {
52-
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23757575%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
52+
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
5353
background-position: right 0.4em top 50%, 0 0;
5454
background-repeat: no-repeat;
5555
background-size: 0.65em auto, 100%;
56-
border: 1px solid #757575;
56+
border: 1px solid var(--color-gray-offset);
57+
color: var(--color-content);
5758
display: block;
5859
font-size: 1rem;
5960
line-height: 1.2;
@@ -88,7 +89,7 @@
8889
}
8990

9091
.uppy-Audio-recordingLength {
91-
color: #757575;
92+
color: var(--color-gray-offset);
9293
flex-grow: 0;
9394
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
9495
text-align: right;
@@ -100,17 +101,17 @@
100101
}
101102

102103
.uppy-Audio-button {
103-
background-color: #e32437;
104+
background-color: var(--color-danger);
104105
border-radius: 50%;
105-
color: #fff;
106+
color: var(--color-white);
106107
cursor: pointer;
107108
height: 45px;
108109
transition: all 0.3s;
109110
width: 45px;
110111
}
111112

112113
.uppy-Audio-button:focus {
113-
box-shadow: 0 0 0 3px rgb(18 105 207 / 50%);
114+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 50%, transparent);
114115
outline: none;
115116
}
116117

@@ -119,7 +120,7 @@
119120
}
120121

121122
.uppy-Audio-button:hover {
122-
background-color: rgb(210.5769 26.9231 45.1923);
123+
background-color: var(--color-danger-offset);
123124
}
124125

125126
.uppy-size--md .uppy-Audio-button {
@@ -128,7 +129,7 @@
128129
}
129130

130131
[data-uppy-theme="dark"] .uppy-Audio-button:focus {
131-
box-shadow: 0 0 0 2px rgb(170 225 255 / 85%);
132+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 85%, transparent);
132133
outline: none;
133134
}
134135

@@ -137,12 +138,12 @@
137138
}
138139

139140
.uppy-Audio-button--submit {
140-
background-color: #1269cf;
141+
background-color: var(--color-secondary);
141142
margin: 0 12px;
142143
}
143144

144145
.uppy-Audio-button--submit:hover {
145-
background-color: rgb(15.96 93.1 183.54);
146+
background-color: var(--color-secondary-offset);
146147
}
147148

148149
.uppy-Audio-button svg {
@@ -167,7 +168,7 @@
167168
}
168169

169170
.uppy-Audio-permissons p {
170-
color: #939393;
171+
color: var(--color-gray-offset);
171172
line-height: 1.3;
172173
line-height: 1.45;
173174
margin: 0;
@@ -176,14 +177,14 @@
176177
}
177178

178179
.uppy-Audio-permissonsIcon svg {
179-
color: #bbb;
180+
color: var(--color-gray-offset);
180181
height: 75px;
181182
margin-bottom: 30px;
182183
width: 100px;
183184
}
184185

185186
.uppy-Audio-title {
186-
color: #333;
187+
color: var(--color-content);
187188
font-size: 1.375rem;
188189
font-weight: normal;
189190
line-height: 1.35;
@@ -195,5 +196,5 @@
195196
}
196197

197198
[data-uppy-theme="dark"] .uppy-Audio-title {
198-
color: #eaeaea;
199+
color: var(--color-content);
199200
}

‎src/components/Forms/Contact/uppy-core.css‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
.uppy-Root {
77
box-sizing: border-box;
8-
color: #333;
8+
color: var(--color-content);
99
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif;
1010
-webkit-font-smoothing: antialiased;
1111
-moz-osx-font-smoothing: grayscale;
@@ -48,9 +48,10 @@
4848
}
4949

5050
.uppy-c-textInput {
51-
background-color: #fff;
52-
border: 1px solid #ddd;
51+
background-color: var(--color-content-inverse);
52+
border: 1px solid var(--color-gray-300);
5353
border-radius: 4px;
54+
color: var(--color-content);
5455
font-family: inherit;
5556
font-size: 14px;
5657
line-height: 1.5;
@@ -62,19 +63,19 @@
6263
}
6364

6465
.uppy-c-textInput:focus {
65-
border-color: rgb(18 105 207 / 60%);
66-
box-shadow: 0 0 0 3px rgb(18 105 207 / 15%);
66+
border-color: color-mix(in srgb, var(--color-secondary) 60%, transparent);
67+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 15%, transparent);
6768
outline: none;
6869
}
6970

7071
[data-uppy-theme="dark"] .uppy-c-textInput {
71-
background-color: #333;
72-
border-color: #333;
73-
color: #eaeaea;
72+
background-color: var(--color-content-inverse);
73+
border-color: var(--color-gray-300);
74+
color: var(--color-content);
7475
}
7576

7677
[data-uppy-theme="dark"] .uppy-c-textInput:focus {
77-
border-color: #525252;
78+
border-color: var(--color-gray-offset);
7879
box-shadow: none;
7980
}
8081

@@ -115,19 +116,19 @@
115116
}
116117

117118
.uppy-c-btn-primary {
118-
background-color: #1269cf;
119+
background-color: var(--color-secondary);
119120
border-radius: 4px;
120-
color: #fff;
121+
color: var(--color-white);
121122
font-size: 14px;
122123
padding: 10px 18px;
123124
}
124125

125126
.uppy-c-btn-primary:not(:disabled):hover {
126-
background-color: rgb(13.92 81.2 160.08);
127+
background-color: var(--color-secondary-offset);
127128
}
128129

129130
.uppy-c-btn-primary:focus {
130-
box-shadow: 0 0 0 3px rgb(18 105 207 / 40%);
131+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 40%, transparent);
131132
outline: none;
132133
}
133134

@@ -136,7 +137,7 @@
136137
}
137138

138139
[data-uppy-theme="dark"] .uppy-c-btn-primary {
139-
color: #eaeaea;
140+
color: var(--color-white);
140141
}
141142

142143
[data-uppy-theme="dark"] .uppy-c-btn-primary:focus {
@@ -148,28 +149,28 @@
148149
}
149150

150151
[data-uppy-theme="dark"] .uppy-c-btn-primary:focus {
151-
box-shadow: 0 0 0 2px rgb(170 225 255 / 85%);
152+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 85%, transparent);
152153
}
153154

154155
.uppy-c-btn-primary.uppy-c-btn--disabled {
155-
background-color: rgb(142 178 219);
156+
background-color: color-mix(in srgb, var(--color-secondary) 45%, var(--color-gray-300));
156157
}
157158

158159
.uppy-c-btn-link {
159160
background-color: transparent;
160161
border-radius: 4px;
161-
color: #525252;
162+
color: var(--color-content);
162163
font-size: 14px;
163164
line-height: 1;
164165
padding: 10px 15px;
165166
}
166167

167168
.uppy-c-btn-link:hover {
168-
color: #333;
169+
color: var(--color-content);
169170
}
170171

171172
.uppy-c-btn-link:focus {
172-
box-shadow: 0 0 0 3px rgb(18 105 207 / 25%);
173+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 25%, transparent);
173174
outline: none;
174175
}
175176

@@ -178,7 +179,7 @@
178179
}
179180

180181
[data-uppy-theme="dark"] .uppy-c-btn-link {
181-
color: #eaeaea;
182+
color: var(--color-content);
182183
}
183184

184185
[data-uppy-theme="dark"] .uppy-c-btn-link:focus {
@@ -190,11 +191,11 @@
190191
}
191192

192193
[data-uppy-theme="dark"] .uppy-c-btn-link:focus {
193-
box-shadow: 0 0 0 2px rgb(170 225 255 / 85%);
194+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 85%, transparent);
194195
}
195196

196197
[data-uppy-theme="dark"] .uppy-c-btn-link:hover {
197-
color: #939393;
198+
color: var(--color-content-active);
198199
}
199200

200201
/* stylelint-enable */

0 commit comments

Comments
 (0)