Skip to content

Commit 2b45189

Browse files
sandymcfaddensandymcfadden
authored
Update Dark mode colors to use to css variables (#2936)
This is a continuation of previous work to update the CSS to use variables for colors. This moves all colors for dark mode to use CSS variables instead. There should be no user impact or any noticeable changes. It's an intermediate step to simplifying the CSS used throughout the app.
1 parent f23b62f commit 2b45189

File tree

31 files changed

+207
-177
lines changed

31 files changed

+207
-177
lines changed

‎lib/alternate-login-prompt/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,6 @@
7373

7474
body[data-theme='dark'] {
7575
.alternate-login__button-row .button-borderless {
76-
color: $studio-simplenote-blue-20;
76+
color: var(--accent-color);
7777
}
7878
}

‎lib/auth/style.scss

+24-33
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@
3838
max-width: 347px;
3939
text-align: center;
4040
width: 90%;
41-
.is-error {
41+
42+
&.is-error {
4243
color: var(--tertiary-highlight-color);
4344
}
4445
}
@@ -64,14 +65,10 @@
6465
font-weight: 400;
6566
}
6667

68+
input:read-only,
6769
input:disabled {
68-
border-color: var(--secondary-color);
69-
color: var(--tertiary-color);
70-
}
71-
72-
input:read-only {
73-
border-color: var(--secondary-accent-color);
74-
background-color: rgba(0, 0, 0, 0.05);
70+
border-color: var(--readonly-input-highlight-color);
71+
background-color: var(--readonly-input-color);
7572
}
7673

7774
input:focus {
@@ -85,16 +82,16 @@
8582
}
8683

8784
button[type='submit'] {
88-
background-color: var(--accent-color);
85+
background-color: var(--primary-button-bg-color);
8986
border: none;
90-
color: var(--background-color);
87+
color: var(--primary-button-fg-color);
9188
font-weight: 500;
9289
margin: 16px auto 8px;
9390
padding: 0 15px 2px;
9491
}
9592

9693
a.login__forgot {
97-
color: var(--foreground-color);
94+
color: var(--accent-color);
9895
text-decoration: none;
9996
}
10097

@@ -146,7 +143,7 @@
146143
background-color: var(--wordpress-color);
147144
border-radius: 4px;
148145
box-sizing: border-box;
149-
color: var(--background-color);
146+
color: var(--primary-button-fg-color);
150147
display: block;
151148
font-size: 16px;
152149
font-weight: 500;
@@ -179,55 +176,49 @@
179176

180177
body[data-theme='dark'] .login {
181178
h1 {
182-
color: $studio-white;
183-
}
184-
a.login__forgot {
185-
color: $studio-gray-20;
179+
color: var(--primary-color);
186180
}
187181

188182
.login__forgot,
189183
.login__signup,
190184
.terms {
191-
color: $studio-gray-20;
185+
color: var(--foreground-color);
192186
}
193187

194188
.login__signup a,
195189
.login__auth-message a,
196-
.terms a {
197-
color: $studio-simplenote-blue-20;
190+
.terms a,
191+
.login__forgot {
192+
color: var(--accent-color);
198193
}
199194

200195
.login__auth-message.is-error {
201-
color: $studio-red-20;
196+
color: var(--tertiary-highlight-color);
202197
}
203198

204199
.or {
205-
background: $studio-gray-90;
206-
color: $studio-gray-20;
200+
background: var(--background-color);
201+
color: var(--foreground-color);
207202
}
208203
.or-line {
209204
border-color: var(--primary-color);
210205
}
211206

212207
svg.icon-mail {
213-
color: $studio-gray-30;
208+
color: var(--foreground-color);
214209
}
215210
input {
216-
border-color: var(--foreground-color);
211+
border-color: var(--secondary-accent-color);
217212

213+
&:read-only,
218214
&:disabled {
219-
color: var(--foreground-color);
220-
border-color: $studio-gray-70;
221-
}
222-
223-
&:read-only {
224-
border-color: var(--foreground-color);
225-
background-color: rgba(255, 255, 255, 0.07);
215+
border-color: var(--readonly-input-highlight-color);
216+
background-color: var(--readonly-input-color);
226217
}
227218

228219
&:focus {
229-
border-color: $studio-simplenote-blue-20;
230-
box-shadow: 0 0 0 1px $studio-simplenote-blue-20;
220+
border-color: var(--accent-color);
221+
box-shadow: 0 0 0 1px var(--accent-color);
231222
}
232223
}
233224
}

‎lib/components/progress-bar/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
background-color: var(--secondary-color);
44
}
55
@at-root body[data-theme='dark'] & {
6-
background-color: $studio-gray-80;
6+
background-color: var(--secondary-color);
77
}
88
}
99

‎lib/components/slider/style.scss

+25-25
Original file line numberDiff line numberDiff line change
@@ -70,36 +70,36 @@ body[data-theme='dark'] {
7070
.slider {
7171
// Track
7272
&::-webkit-slider-runnable-track {
73-
background: $studio-gray-50;
73+
background: var(--primary-slider-color);
7474
}
7575
&::-moz-range-track {
76-
background: $studio-gray-50;
76+
background: var(--primary-slider-color);
7777
}
7878
&::-ms-track {
79-
border-color: $studio-gray-50;
79+
border-color: var(--primary-slider-color);
8080
}
8181
&::-ms-fill-lower {
82-
background: $studio-white;
82+
background: var(--secondary-slider-color);
8383
}
8484
&::-ms-fill-upper {
85-
background: $studio-white;
85+
background: var(--secondary-slider-color);
8686
}
8787

8888
// Thumb
8989
&::-webkit-slider-thumb {
90-
border-color: $studio-gray-5;
91-
background: $studio-white;
92-
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
90+
border-color: var(--primary-slider-color);
91+
background: var(--secondary-slider-color);
92+
box-shadow: 0 1px 3px 0 var(--overlay-color);
9393
}
9494
&::-moz-range-thumb {
95-
background: $studio-white;
96-
border-color: $studio-gray-5;
97-
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
95+
background: var(--secondary-slider-color);
96+
border-color: var(--primary-slider-color);
97+
box-shadow: 0 1px 3px 0 var(--overlay-color);
9898
}
9999
&::-ms-thumb {
100-
border-color: $studio-gray-5;
101-
background: $studio-white;
102-
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
100+
border-color: var(--primary-slider-color);
101+
background: var(--secondary-slider-color);
102+
box-shadow: 0 1px 3px 0 var(--overlay-color);
103103
}
104104
}
105105
}
@@ -108,35 +108,35 @@ body[data-theme='light'] {
108108
.slider {
109109
// Track
110110
&::-webkit-slider-runnable-track {
111-
background: var(--secondary-color);
111+
background: var(--primary-slider-color);
112112
}
113113
&::-moz-range-track {
114-
background: var(--secondary-color);
114+
background: var(--primary-slider-color);
115115
}
116116
&::-ms-track {
117-
border-color: var(--secondary-color);
117+
border-color: var(--primary-slider-color);
118118
}
119119
&::-ms-fill-lower {
120-
background: var(--background-color);
120+
background: var(--secondary-slider-color);
121121
}
122122
&::-ms-fill-upper {
123-
background: var(--background-color);
123+
background: var(--secondary-slider-color);
124124
}
125125

126126
// Thumb
127127
&::-webkit-slider-thumb {
128-
border-color: var(--secondary-color);
129-
background: var(--background-color);
128+
border-color: var(--primary-slider-color);
129+
background: var(--secondary-slider-color);
130130
box-shadow: 0 1px 3px 0 var(--overlay-color);
131131
}
132132
&::-moz-range-thumb {
133-
background: var(--background-color);
134-
border-color: var(--secondary-color);
133+
background: var(--secondary-slider-color);
134+
border-color: var(--primary-slider-color);
135135
box-shadow: 0 1px 3px 0 var(--overlay-color);
136136
}
137137
&::-ms-thumb {
138-
border-color: var(--secondary-color);
139-
background: var(--background-color);
138+
border-color: var(--primary-slider-color);
139+
background: var(--secondary-slider-color);
140140
box-shadow: 0 1px 3px 0 var(--overlay-color);
141141
}
142142
}

‎lib/components/spinner/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
color: var(--secondary-color);
44
}
55
@at-root body[data-theme='dark'] & {
6-
color: $studio-gray-80;
6+
color: var(--secondary-color);
77
}
88

99
&.is-white {

‎lib/components/tab-panels/style.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ body[data-theme='light'] .tab-panels__tab-list li.is-active {
3535
}
3636

3737
body[data-theme='dark'] .tab-panels__tab-list li.is-active {
38-
color: $studio-simplenote-blue-20;
39-
border-bottom-color: $studio-simplenote-blue-20;
38+
color: var(--accent-color);
39+
border-bottom-color: var(--accent-color);
4040
}
4141

4242
.tab-panels__panel {

‎lib/components/tag-chip/style.scss

+7-7
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
border-radius: 16px;
66
line-height: 1.25em;
77
white-space: nowrap;
8-
background: var(--secondary-color);
8+
background: var(--primary-tag-chip-color);
99
text-decoration: none;
1010
font-size: 14px;
1111
position: relative;
@@ -23,7 +23,7 @@
2323
}
2424

2525
&.deleted {
26-
background: $studio-red-5;
26+
background: var(--secondary-tag-chip-color);
2727
}
2828

2929
.remove-tag-icon {
@@ -51,16 +51,16 @@
5151

5252
body[data-theme='dark'] {
5353
.tag-chip {
54-
background: $studio-gray-70;
55-
color: $studio-white;
54+
background: var(--primary-tag-chip-color);
55+
color: var(--primary-color);
5656

5757
&.deleted {
58-
background: $studio-red-70;
58+
background: var(--secondary-tag-chip-color);
5959
}
6060
}
6161

6262
.remove-tag-icon {
63-
background-color: $studio-gray-30;
64-
color: $studio-black;
63+
background-color: var(--foreground-color);
64+
color: var(--background-color);
6565
}
6666
}

‎lib/controls/toggle/style.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ $toggle-control-knob-size: $toggle-control-height - $toggle-control-knob-margin
5151
}
5252

5353
.toggle-control-unchecked-color {
54-
background: var(--secondary-accent-color);
54+
background: var(--inactive-controls-color);
5555
}
5656

5757
.toggle-control-checked-color {
@@ -64,7 +64,7 @@ $toggle-control-knob-size: $toggle-control-height - $toggle-control-knob-margin
6464
display: block;
6565
width: $toggle-control-knob-size;
6666
height: $toggle-control-knob-size;
67-
background: var(--background-color);
67+
background: var(--primary-button-fg-color);
6868
border-radius: $toggle-control-height * 0.5;
6969
transform: translate(
7070
$toggle-control-knob-margin,

‎lib/dialogs/about/style.scss

+4-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@
55
max-height: calc(100vh - 2rem);
66

77
// For overriding theme settings.
8-
// TODO: Improve theme management so this isn't necessary
8+
// TODO: Improve theme management so this isn't neccessary
9+
10+
--accent-color: #3361cc; // $studio-simplenote-blue-50
11+
--background-color: #fff; // $studio-white
912

1013
background: var(--accent-color) !important;
1114
color: var(--background-color) !important;

‎lib/dialogs/import/dropzone/style.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
margin-top: 8px;
8383

8484
span {
85-
color: $studio-simplenote-blue;
85+
color: var(--primary-branding-color);
8686
}
8787
}
8888
}
@@ -95,31 +95,31 @@
9595

9696
body[data-theme='dark'] {
9797
.importer-dropzone.theme-color-border {
98-
border-color: $studio-gray-50;
99-
color: $studio-gray-30;
98+
border-color: var(--tertiary-color);
99+
color: var(--foreground-color);
100100
}
101101
.importer-dropzone {
102102
.drop-instructions {
103103
span {
104-
color: $studio-simplenote-blue-20;
104+
color: var(--accent-color);
105105
}
106106
}
107107
&.is-accepted {
108108
ul {
109-
border-color: $studio-gray-80;
109+
border-color: var(--secondary-color);
110110
}
111111

112112
li {
113-
color: $studio-white;
113+
color: var(--primary-color);
114114
}
115115

116116
svg {
117-
fill: $studio-gray-30;
117+
fill: var(--foreground-color);
118118
}
119119

120120
.error-message {
121121
li {
122-
color: $studio-gray-30;
122+
color: var(--foreground-color);
123123
}
124124
}
125125
}

‎lib/dialogs/import/source-importer/executor/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ body[data-theme='dark'] {
7474
.source-importer-executor {
7575
.source-importer-executor__options {
7676
label {
77-
border-color: $studio-gray-80;
77+
border-color: var(--secondary-color);
7878
}
7979
}
8080
}

0 commit comments

Comments
 (0)