Skip to content

Commit 2e8e35e

Browse files
yyassi-heartexricardoantoniocmbmartelrobot-ci-heartexAndrejOros
authored
feat: OPTIC-1217: Implement Color design tokens as CSS variables and Dark Mode (#6550)
Co-authored-by: Ricardo Cabral <[email protected]> Co-authored-by: Brandon Martel <[email protected]> Co-authored-by: robot-ci-heartex <[email protected]> Co-authored-by: yyassi-heartex <[email protected]> Co-authored-by: AndrejOros <[email protected]>
1 parent d30739e commit 2e8e35e

File tree

310 files changed

+4280
-2104
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

+4280
-2104
lines changed

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

+17-17
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
/* GUTTER */
2626

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

4949
/* CURSOR */
5050

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

136136
.cm-s-default .cm-header {
137-
color: #617ADA;
137+
color: var(--color-accent-grape-bold);
138138
}
139139
.cm-s-default .cm-quote {
140-
color: #34988D;
140+
color: var(--color-accent-kale-bold);
141141
}
142142
.cm-negative {
143-
color: #E6694E;
143+
color: var(--color-negative-content);
144144
}
145145
.cm-positive {
146-
color: #34988D;
146+
color: var(--color-positive-content);
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: #34988D;
184+
color: var(--color-accent-kale-bold);
185185
}
186186
.cm-s-default .cm-comment {
187-
color: #E69559;
187+
color: var(--color-accent-canteloupe-bold);
188188
}
189189
.cm-s-default .cm-string {
190-
color: #CC6FBE;
190+
color: var(--color-accent-plum-bold);
191191
}
192192
.cm-s-default .cm-string-2 {
193-
color: #E6694E;
193+
color: var(--color-accent-persimmon-bold);
194194
}
195195
.cm-s-default .cm-meta {
196196
color: #6B6860;
@@ -218,10 +218,10 @@
218218
}
219219

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

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

233233
div.CodeMirror span.CodeMirror-matchingbracket {
234-
color: #0b0;
234+
color: var(--color-positive-content);
235235
}
236236
div.CodeMirror span.CodeMirror-nonmatchingbracket {
237-
color: #a22;
237+
color: var(--color-negative-content);
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: white;
254+
background: var(--color-neutral-background);
255255
}
256256

257257
.CodeMirror-scroll {

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

+35-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,44 @@
1-
/* Compiled from App.styl */
21
.ls-global-error {
32
display: flex;
43
flex-direction: column;
54
align-items: center;
65
padding-top: 15vh;
76
}
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+
823
.ls-global-error__heidi {
924
width: 812px;
25+
position: absolute;
26+
top: -22px;
27+
left: -22px;
28+
height: 100%;
29+
user-select: none;
30+
-webkit-user-select: none;
1031
}
1132

1233
.ls-global-error h1 {
1334
font-size: 48px;
35+
color: var(--color-neutral-content);
1436
}
1537

1638
.ls-global-error h2 {
1739
font-size: 16px;
40+
color: var(--color-neutral-content);
41+
font-weight: 500;
1842
}
1943

2044
.ls-global-error__actions {
@@ -34,25 +58,28 @@ body > .ls-global-error .button {
3458
cursor: pointer;
3559
padding: 0 16px;
3660
display: inline-flex;
37-
background-color: #fff;
61+
background-color: var(--color-neutral-background);
3862
align-items: center;
3963
border-radius: 5px;
4064
text-align: center;
4165
text-decoration: none;
4266
justify-content: center;
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);
67+
color: var(--color-neutral-content);
68+
border: 1px solid var(--color-neutral-border);
4569
font-weight: 500;
70+
transition: all 150ms ease-out;
4671
}
4772

4873
body > .ls-global-error button:hover {
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;
74+
border-color: var(--color-neutral-border-bold);
5075
}
5176

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

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

+42-21
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ 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);
1012
}
1113

1214
.login_page_new_ui .left {
@@ -31,6 +33,18 @@ html, body {
3133
background-size: contain;
3234
}
3335

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+
3448
.login_page_new_ui .left h2 {
3549
font-size: 24px;
3650
font-weight: 500;
@@ -48,7 +62,7 @@ html, body {
4862
margin: 8px 0 0 0;
4963
}
5064

51-
.login_page_new_ui .left .logo_humansignal{
65+
.login_page_new_ui .left .by {
5266
position: absolute;
5367
bottom: 60px;
5468
left: 60px;
@@ -60,12 +74,16 @@ html, body {
6074
line-height: 28px;
6175
}
6276

77+
.login_page_new_ui .left img {
78+
color: var(--color-neutral-content);
79+
}
80+
6381
.login_page_new_ui .tips {
6482
max-width: 520px;
6583
border-radius: 8px;
66-
border: 1px solid var(--sand_300);
67-
background: var(--sand_0);
68-
box-shadow: 0 2px 6px 0 var(--sand_300);
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%);
6987
padding: 16px;
7088
margin:18vh 60px 0 60px;
7189
position: relative;
@@ -79,6 +97,7 @@ html, body {
7997
position: absolute;
8098
bottom: -72px;
8199
left: 16px;
100+
fill: var(--color-neutral-border);
82101
background: url('../images/heidi-tip.svg') no-repeat center center;
83102
}
84103

@@ -100,7 +119,7 @@ html, body {
100119
}
101120

102121
.login_page_new_ui .tips .description a {
103-
color: var(--primary_link);
122+
color: var(--color-primary-content);
104123
font-size: .875rem;
105124
font-style: normal;
106125
font-weight: 500;
@@ -134,22 +153,23 @@ html, body {
134153
text-align: center;
135154
padding: .75rem 0;
136155
font-size: 1rem;
137-
color: var(--sand_500);
156+
color: var(--color-neutral-border);
138157
border-top: 2px solid transparent;
158+
transition: all 150ms ease-out;
139159
}
140160
.login_page_new_ui .toggle > *.active {
141-
border-color: var(--primary_link);
142-
color: var(--primary_link);
161+
border-color: var(--color-primary-surface);
162+
color: var(--color-primary-content);
143163
}
144164
.login_page_new_ui .toggle > *:hover {
145-
color: var(--grape_700);
146-
border-color: var(--grape_700);
165+
color: var(--color-primary-surface-hover);
166+
border-color: var(--color-primary-surface-hover);
147167
}
148168
.form-wrapper{
149169
position: relative;
150-
background: #FDFDFC;
170+
background: var(--color-neutral-surface);
151171
margin-top: 1.5rem;
152-
border: 1px solid #E1DED5;
172+
border: 1px solid var(--color-neutral-border);
153173
padding: 2rem;
154174
border-radius: 1rem;
155175
box-shadow: 0px 0px 12px rgba(23, 20, 13, 0.16);
@@ -177,7 +197,7 @@ html, body {
177197
margin: 0;
178198
}
179199
.login_page_new_ui form .error {
180-
color: var(--red_7);
200+
color: var(--color-negative-content);
181201
font-size: .875rem;
182202
}
183203
.login_page_new_ui form input,
@@ -187,9 +207,10 @@ html, body {
187207
font-family: 'Hellix', sans-serif;
188208
}
189209

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

195216
.login_page_new_ui .field_errors {
@@ -199,7 +220,7 @@ html, body {
199220
text-align: left;
200221
font-size: .875rem;
201222
line-height: 16px;
202-
color: var(--red_7);
223+
color: var(--color-negative-content);
203224
}
204225
.login_page_new_ui .field_errors li {
205226
margin-top: .25rem;
@@ -214,10 +235,10 @@ html, body {
214235
.auto-generated form input {
215236
height: 40px;
216237
min-height: 40px;
217-
background: var(--sand_0);
238+
background: var(--color-neutral-surface);
218239
font-size: 1rem;
219240
line-height: 22px;
220-
border: 1px solid var(--sand_300);
241+
border: 1px solid var(--color-neutral-border);
221242
box-sizing: border-box;
222243
border-radius: 5px;
223244
padding: 0 16px;
@@ -298,11 +319,11 @@ label{
298319
content: '';
299320
display: block;
300321
position: absolute;
301-
top: 1px;
322+
top: 2px;
302323
left: 8px;
303324
width: 5px;
304-
height: 12px;
305-
border: solid var(--sand_0);
325+
height: 10px;
326+
border: solid var(--color-primary-surface-content);
306327
border-width: 0 2px 2px 0;
307328
transform: rotate(45deg);
308329
}

0 commit comments

Comments
 (0)