Skip to content

Commit 3fd8289

Browse files
yyassi-heartexyyassi-heartex
committed
Revert "feat: OPTIC-1217: Implement Color design tokens as CSS variables and Dark Mode (#6550)"
This reverts commit 2e8e35e.
1 parent 2e8e35e commit 3fd8289

File tree

310 files changed

+2104
-4280
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

310 files changed

+2104
-4280
lines changed

‎docs/themes/v2/source/css/codemirror.css

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
/* GUTTER */
2626

2727
.CodeMirror-gutters {
28-
border-right: 1px solid var(--color-neutral-border);
29-
background-color: var(--color-neutral-surface);
28+
border-right: 1px solid #ddd;
29+
background-color: #f7f7f7;
3030
white-space: nowrap;
3131
}
3232
.CodeMirror-linenumbers {
@@ -43,13 +43,13 @@
4343
color: black;
4444
}
4545
.CodeMirror-guttermarker-subtle {
46-
color: var(--color-neutral-content-subtlest);
46+
color: #999;
4747
}
4848

4949
/* CURSOR */
5050

5151
.CodeMirror-cursor {
52-
border-left: 1px solid var(--color-neutral-inverted-content);
52+
border-left: 1px solid black;
5353
border-right: none;
5454
width: 0;
5555
}
@@ -134,16 +134,16 @@
134134
/* DEFAULT THEME */
135135

136136
.cm-s-default .cm-header {
137-
color: var(--color-accent-grape-bold);
137+
color: #617ADA;
138138
}
139139
.cm-s-default .cm-quote {
140-
color: var(--color-accent-kale-bold);
140+
color: #34988D;
141141
}
142142
.cm-negative {
143-
color: var(--color-negative-content);
143+
color: #E6694E;
144144
}
145145
.cm-positive {
146-
color: var(--color-positive-content);
146+
color: #34988D;
147147
}
148148
.cm-header,
149149
.cm-strong {
@@ -181,16 +181,16 @@
181181
}
182182
.cm-s-default .cm-variable-3,
183183
.cm-s-default .cm-type {
184-
color: var(--color-accent-kale-bold);
184+
color: #34988D;
185185
}
186186
.cm-s-default .cm-comment {
187-
color: var(--color-accent-canteloupe-bold);
187+
color: #E69559;
188188
}
189189
.cm-s-default .cm-string {
190-
color: var(--color-accent-plum-bold);
190+
color: #CC6FBE;
191191
}
192192
.cm-s-default .cm-string-2 {
193-
color: var(--color-accent-persimmon-bold);
193+
color: #E6694E;
194194
}
195195
.cm-s-default .cm-meta {
196196
color: #6B6860;
@@ -218,10 +218,10 @@
218218
}
219219

220220
.cm-s-default .cm-error {
221-
color: var(--color-negative-content);
221+
color: #E6694E;
222222
}
223223
.cm-invalidchar {
224-
color: var(--color-negative-content);
224+
color: #E6694E;
225225
}
226226

227227
.CodeMirror-composing {
@@ -231,10 +231,10 @@
231231
/* Default styles for common addons */
232232

233233
div.CodeMirror span.CodeMirror-matchingbracket {
234-
color: var(--color-positive-content);
234+
color: #0b0;
235235
}
236236
div.CodeMirror span.CodeMirror-nonmatchingbracket {
237-
color: var(--color-negative-content);
237+
color: #a22;
238238
}
239239
.CodeMirror-matchingtag {
240240
background: rgba(255, 150, 0, 0.3);
@@ -251,7 +251,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
251251
.CodeMirror {
252252
position: relative;
253253
overflow: hidden;
254-
background: var(--color-neutral-background);
254+
background: white;
255255
}
256256

257257
.CodeMirror-scroll {

‎label_studio/core/static/css/error.css

Lines changed: 8 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,20 @@
1+
/* Compiled from App.styl */
12
.ls-global-error {
23
display: flex;
34
flex-direction: column;
45
align-items: center;
56
padding-top: 15vh;
67
}
7-
8-
.ls-global-error__header {
9-
position: relative;
10-
width: 812px;
11-
}
12-
13-
.ls-global-error__code {
14-
font-size: 380px;
15-
font-weight: 700;
16-
color: var(--color-neutral-content);
17-
user-select: none;
18-
-webkit-user-select: none;
19-
line-height: 1em;
20-
text-align: center;
21-
}
22-
238
.ls-global-error__heidi {
249
width: 812px;
25-
position: absolute;
26-
top: -22px;
27-
left: -22px;
28-
height: 100%;
29-
user-select: none;
30-
-webkit-user-select: none;
3110
}
3211

3312
.ls-global-error h1 {
3413
font-size: 48px;
35-
color: var(--color-neutral-content);
3614
}
3715

3816
.ls-global-error h2 {
3917
font-size: 16px;
40-
color: var(--color-neutral-content);
41-
font-weight: 500;
4218
}
4319

4420
.ls-global-error__actions {
@@ -58,28 +34,25 @@ body > .ls-global-error .button {
5834
cursor: pointer;
5935
padding: 0 16px;
6036
display: inline-flex;
61-
background-color: var(--color-neutral-background);
37+
background-color: #fff;
6238
align-items: center;
6339
border-radius: 5px;
6440
text-align: center;
6541
text-decoration: none;
6642
justify-content: center;
67-
color: var(--color-neutral-content);
68-
border: 1px solid var(--color-neutral-border);
43+
color: #333;
44+
box-shadow: inset 0px -1px 0px rgba(0,0,0,0.1), inset 0px 0px 0px 1px rgba(0,0,0,0.15);
6945
font-weight: 500;
70-
transition: all 150ms ease-out;
7146
}
7247

7348
body > .ls-global-error button:hover {
74-
border-color: var(--color-neutral-border-bold);
49+
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px inset;
7550
}
7651

7752
body > .ls-global-error button.ls-global-error__primary_button {
78-
background-color: var(--color-primary-surface);
79-
color: var(--color-primary-surface-content);
80-
transition: all 150ms ease-out;
53+
background-color: #566fcf;
54+
color: #fff;
8155
}
82-
8356
body > .ls-global-error button.ls-global-error__primary_button:hover {
84-
background-color: var(--color-primary-surface-hover);
57+
background-color: #4C5FA9;
8558
}

‎label_studio/core/static/css/login.css

Lines changed: 21 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ html, body {
77
font-weight: 400;
88
height: 100%;
99
font-family: 'Hellix', sans-serif;
10-
background-color: var(--color-neutral-background-bold);
11-
color: var(--color-neutral-content);
1210
}
1311

1412
.login_page_new_ui .left {
@@ -33,18 +31,6 @@ html, body {
3331
background-size: contain;
3432
}
3533

36-
.login_page_new_ui .ls-logo {
37-
width: 414px;
38-
height: 64px;
39-
color: var(--color-neutral-content);
40-
}
41-
42-
.login_page_new_ui .hs-logo {
43-
width: 152px;
44-
height: 22px;
45-
color: var(--color-neutral-content);
46-
}
47-
4834
.login_page_new_ui .left h2 {
4935
font-size: 24px;
5036
font-weight: 500;
@@ -62,7 +48,7 @@ html, body {
6248
margin: 8px 0 0 0;
6349
}
6450

65-
.login_page_new_ui .left .by {
51+
.login_page_new_ui .left .logo_humansignal{
6652
position: absolute;
6753
bottom: 60px;
6854
left: 60px;
@@ -74,16 +60,12 @@ html, body {
7460
line-height: 28px;
7561
}
7662

77-
.login_page_new_ui .left img {
78-
color: var(--color-neutral-content);
79-
}
80-
8163
.login_page_new_ui .tips {
8264
max-width: 520px;
8365
border-radius: 8px;
84-
border: 1px solid var(--color-neutral-border);
85-
background: var(--color-neutral-surface);
86-
box-shadow: 0 2px 6px 0 rgb(var(--color-neutral-shadow) / 20%);
66+
border: 1px solid var(--sand_300);
67+
background: var(--sand_0);
68+
box-shadow: 0 2px 6px 0 var(--sand_300);
8769
padding: 16px;
8870
margin:18vh 60px 0 60px;
8971
position: relative;
@@ -97,7 +79,6 @@ html, body {
9779
position: absolute;
9880
bottom: -72px;
9981
left: 16px;
100-
fill: var(--color-neutral-border);
10182
background: url('../images/heidi-tip.svg') no-repeat center center;
10283
}
10384

@@ -119,7 +100,7 @@ html, body {
119100
}
120101

121102
.login_page_new_ui .tips .description a {
122-
color: var(--color-primary-content);
103+
color: var(--primary_link);
123104
font-size: .875rem;
124105
font-style: normal;
125106
font-weight: 500;
@@ -153,23 +134,22 @@ html, body {
153134
text-align: center;
154135
padding: .75rem 0;
155136
font-size: 1rem;
156-
color: var(--color-neutral-border);
137+
color: var(--sand_500);
157138
border-top: 2px solid transparent;
158-
transition: all 150ms ease-out;
159139
}
160140
.login_page_new_ui .toggle > *.active {
161-
border-color: var(--color-primary-surface);
162-
color: var(--color-primary-content);
141+
border-color: var(--primary_link);
142+
color: var(--primary_link);
163143
}
164144
.login_page_new_ui .toggle > *:hover {
165-
color: var(--color-primary-surface-hover);
166-
border-color: var(--color-primary-surface-hover);
145+
color: var(--grape_700);
146+
border-color: var(--grape_700);
167147
}
168148
.form-wrapper{
169149
position: relative;
170-
background: var(--color-neutral-surface);
150+
background: #FDFDFC;
171151
margin-top: 1.5rem;
172-
border: 1px solid var(--color-neutral-border);
152+
border: 1px solid #E1DED5;
173153
padding: 2rem;
174154
border-radius: 1rem;
175155
box-shadow: 0px 0px 12px rgba(23, 20, 13, 0.16);
@@ -197,7 +177,7 @@ html, body {
197177
margin: 0;
198178
}
199179
.login_page_new_ui form .error {
200-
color: var(--color-negative-content);
180+
color: var(--red_7);
201181
font-size: .875rem;
202182
}
203183
.login_page_new_ui form input,
@@ -207,10 +187,9 @@ html, body {
207187
font-family: 'Hellix', sans-serif;
208188
}
209189

210-
.login_page_new_ui form .lsf-button-ls.lsf-button-ls_look_primary {
211-
--button-color: var(--color-neutral-inverted-content);
190+
.login_page_new_ui form button {
212191
border-radius: 4rem;
213-
background: var(--color-neutral-inverted-surface);
192+
background: var(--sand_900);
214193
}
215194

216195
.login_page_new_ui .field_errors {
@@ -220,7 +199,7 @@ html, body {
220199
text-align: left;
221200
font-size: .875rem;
222201
line-height: 16px;
223-
color: var(--color-negative-content);
202+
color: var(--red_7);
224203
}
225204
.login_page_new_ui .field_errors li {
226205
margin-top: .25rem;
@@ -235,10 +214,10 @@ html, body {
235214
.auto-generated form input {
236215
height: 40px;
237216
min-height: 40px;
238-
background: var(--color-neutral-surface);
217+
background: var(--sand_0);
239218
font-size: 1rem;
240219
line-height: 22px;
241-
border: 1px solid var(--color-neutral-border);
220+
border: 1px solid var(--sand_300);
242221
box-sizing: border-box;
243222
border-radius: 5px;
244223
padding: 0 16px;
@@ -319,11 +298,11 @@ label{
319298
content: '';
320299
display: block;
321300
position: absolute;
322-
top: 2px;
301+
top: 1px;
323302
left: 8px;
324303
width: 5px;
325-
height: 10px;
326-
border: solid var(--color-primary-surface-content);
304+
height: 12px;
305+
border: solid var(--sand_0);
327306
border-width: 0 2px 2px 0;
328307
transform: rotate(45deg);
329308
}

0 commit comments

Comments
 (0)