Skip to content

Commit aa7e008

Browse files
adamdotdevinadamdotdevin
committed
wip: desktop work
1 parent 7926640 commit aa7e008

File tree

3 files changed

+89
-34
lines changed

3 files changed

+89
-34
lines changed

‎packages/ui/src/components/diff.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
[data-slot="diff-hunk-separator-line-number"] {
33
position: sticky;
44
left: 0;
5-
background-color: hsla(209, 96%, 90%, 1);
5+
background-color: var(--surface-diff-hidden-strong);
66
z-index: 2;
77
display: flex;
88
align-items: center;
@@ -12,11 +12,12 @@
1212
aspect-ratio: 1;
1313
width: 24px;
1414
height: 24px;
15+
color: var(--icon-strong-base);
1516
}
1617
}
1718
[data-slot="diff-hunk-separator-content"] {
1819
position: sticky;
19-
background-color: hsla(210, 100%, 96%, 1);
20+
background-color: var(--surface-diff-hidden-base);
2021
width: var(--pjs-column-content-width);
2122
left: var(--pjs-column-number-width);
2223
padding-left: 8px;

‎packages/ui/src/styles/colors.css‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
--smoke-dark-alpha-9: #faf5f467;
3535
--smoke-dark-alpha-10: #fbf5f576;
3636
--smoke-dark-alpha-11: #fcf9f9b2;
37-
--smoke-light-alpha-1: #55000003;
3837
--smoke-dark-alpha-12: #fdfbfbf0;
38+
--smoke-light-alpha-1: #55000003;
3939
--smoke-light-alpha-2: #25000007;
4040
--smoke-light-alpha-3: #1100000f;
4141
--smoke-light-alpha-4: #0c000017;
@@ -125,8 +125,8 @@
125125
--cobalt-dark-alpha-9: #034cff;
126126
--cobalt-dark-alpha-10: #003bffed;
127127
--cobalt-dark-alpha-11: #89b5ff;
128-
--cobalt-light-8: #73a4ff;
129128
--cobalt-dark-alpha-12: #cde2ff;
129+
--cobalt-light-8: #73a4ff;
130130
--cobalt-light-9: #034cff;
131131
--cobalt-light-10: #0443de;
132132
--cobalt-light-11: #1251ec;
@@ -445,4 +445,52 @@
445445
--mint-light-alpha-10: #0cc7006c;
446446
--mint-light-alpha-11: #016800cf;
447447
--mint-light-alpha-12: #022e00e2;
448+
--blue-dark-1: #0e161f;
449+
--blue-dark-2: #0f1b2d;
450+
--blue-dark-3: #0f233c;
451+
--blue-dark-4: #10294b;
452+
--blue-dark-5: #0e2f57;
453+
--blue-dark-6: #0c3768;
454+
--blue-dark-7: #094280;
455+
--blue-dark-8: #0854a4;
456+
--blue-dark-9: #0091ff;
457+
--blue-dark-10: #389eff;
458+
--blue-dark-11: #51a8ff;
459+
--blue-dark-12: #eaf6ff;
460+
--blue-light-1: #f9fcff;
461+
--blue-light-2: #f5faff;
462+
--blue-light-3: #eaf4ff;
463+
--blue-light-4: #e0efff;
464+
--blue-light-5: #cde6fd;
465+
--blue-light-6: #b9d9f8;
466+
--blue-light-7: #96c7f2;
467+
--blue-light-8: #5cafee;
468+
--blue-light-9: #0091ff;
469+
--blue-light-10: #007fef;
470+
--blue-light-11: #0069db;
471+
--blue-light-12: #00254d;
472+
--blue-dark-alpha-1: #00000000;
473+
--blue-dark-alpha-2: #0c58fc0f;
474+
--blue-dark-alpha-3: #1576fd23;
475+
--blue-dark-alpha-4: #1576fd33;
476+
--blue-dark-alpha-5: #107bfd3f;
477+
--blue-dark-alpha-6: #0a7cff51;
478+
--blue-dark-alpha-7: #057dff70;
479+
--blue-dark-alpha-8: #057dff99;
480+
--blue-dark-alpha-9: #0094fff9;
481+
--blue-dark-alpha-10: #38a2fff9;
482+
--blue-dark-alpha-11: #51abfff9;
483+
--blue-dark-alpha-12: #effbfff9;
484+
--blue-light-alpha-1: #0582ff05;
485+
--blue-light-alpha-2: #0582ff0a;
486+
--blue-light-alpha-3: #007fff11;
487+
--blue-light-alpha-4: #007fff1e;
488+
--blue-light-alpha-5: #017fee30;
489+
--blue-light-alpha-6: #0176e447;
490+
--blue-light-alpha-7: #0077e068;
491+
--blue-light-alpha-8: #0082e5a0;
492+
--blue-light-alpha-9: #0090fff9;
493+
--blue-light-alpha-10: #007feff9;
494+
--blue-light-alpha-11: #0066dbf9;
495+
--blue-light-alpha-12: #002047f9;
448496
}

‎packages/ui/src/styles/theme.css‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,11 @@
5050
--radius-4xl: 2rem;
5151

5252
--shadow-xs:
53-
0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
53+
0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06),
54+
0 1px 3px 0 rgba(19, 16, 16, 0.08);
5455
--shadow-md:
55-
0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
56+
0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12),
57+
0 1px 2px -1px rgba(19, 16, 16, 0.12);
5658
--shadow-xs-border-selected:
5759
0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
5860
0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
@@ -66,8 +68,8 @@
6668
--background-weak: var(--smoke-light-3);
6769
--background-strong: var(--smoke-light-1);
6870
--background-stronger: #fcfcfc;
69-
--base: var(--smoke-light-alpha-2);
7071
--surface-base: var(--smoke-light-alpha-2);
72+
--base: var(--smoke-light-alpha-2);
7173
--surface-base-hover: #0500000f;
7274
--surface-base-active: var(--smoke-light-alpha-3);
7375
--surface-base-interactive-active: var(--cobalt-light-alpha-3);
@@ -81,6 +83,7 @@
8183
--surface-float-base: var(--smoke-dark-1);
8284
--surface-float-base-hover: var(--smoke-dark-2);
8385
--surface-raised-base-hover: var(--smoke-light-alpha-2);
86+
--surface-raised-base-active: var(--smoke-light-alpha-3);
8487
--surface-raised-strong: var(--smoke-light-1);
8588
--surface-raised-strong-hover: var(--white);
8689
--surface-raised-stronger: var(--white);
@@ -107,9 +110,9 @@
107110
--surface-info-base: var(--lilac-light-3);
108111
--surface-info-weak: var(--lilac-light-2);
109112
--surface-info-strong: var(--lilac-light-9);
110-
--surface-diff-hidden-base: var(--blue-light-3);
111-
--surface-diff-skip-base: var(--smoke-light-2);
112113
--surface-diff-unchanged-base: #ffffff00;
114+
--surface-diff-skip-base: var(--smoke-light-2);
115+
--surface-diff-hidden-base: var(--blue-light-3);
113116
--surface-diff-hidden-weak: var(--blue-light-2);
114117
--surface-diff-hidden-weaker: var(--blue-light-1);
115118
--surface-diff-hidden-strong: var(--blue-light-5);
@@ -142,7 +145,7 @@
142145
--text-on-warning-base: var(--smoke-dark-alpha-11);
143146
--text-on-info-base: var(--smoke-dark-alpha-11);
144147
--text-diff-add-base: var(--mint-light-11);
145-
--text-diff-delete-base: var(--ember-light-11);
148+
--text-diff-delete-base: var(--ember-light-10);
146149
--text-diff-delete-strong: var(--ember-light-12);
147150
--text-diff-add-strong: var(--mint-light-12);
148151
--text-on-info-weak: var(--smoke-dark-alpha-9);
@@ -198,19 +201,19 @@
198201
--icon-selected: var(--smoke-light-12);
199202
--icon-disabled: var(--smoke-light-8);
200203
--icon-focus: var(--smoke-light-12);
201-
--icon-weak-base: var(--smoke-light-7);
202204
--icon-invert-base: #ffffff;
205+
--icon-weak-base: var(--smoke-light-7);
203206
--icon-weak-hover: var(--smoke-light-8);
204207
--icon-weak-active: var(--smoke-light-9);
205208
--icon-weak-selected: var(--smoke-light-10);
206209
--icon-weak-disabled: var(--smoke-light-6);
207210
--icon-weak-focus: var(--smoke-light-9);
208211
--icon-strong-base: var(--smoke-light-12);
209-
--icon-strong-hover: var(--smoke-light-12);
210-
--icon-strong-active: var(--smoke-light-12);
211-
--icon-strong-selected: var(--smoke-light-12);
212+
--icon-strong-hover: #151313;
213+
--icon-strong-active: #020202;
214+
--icon-strong-selected: #020202;
212215
--icon-strong-disabled: var(--smoke-light-8);
213-
--icon-strong-focus: var(--smoke-light-12);
216+
--icon-strong-focus: #020202;
214217
--icon-brand-base: var(--smoke-light-12);
215218
--icon-interactive-base: var(--cobalt-light-9);
216219
--icon-success-base: var(--apple-light-7);
@@ -248,9 +251,8 @@
248251
--icon-diff-add-base: var(--mint-light-11);
249252
--icon-diff-add-hover: var(--mint-light-12);
250253
--icon-diff-add-active: var(--mint-light-12);
251-
--icon-diff-delete-base: var(--ember-light-9);
252-
--icon-diff-delete-hover: var(--ember-light-10);
253-
--icon-diff-delete-active: var(--ember-light-11);
254+
--icon-diff-delete-base: var(--ember-light-10);
255+
--icon-diff-delete-hover: var(--ember-light-11);
254256
--syntax-comment: #8a8a8a;
255257
--syntax-string: #d68c27;
256258
--syntax-keyword: #3b7dd8;
@@ -286,6 +288,8 @@
286288
--border-weaker-selected: var(--cobalt-light-alpha-4);
287289
--border-weaker-disabled: var(--smoke-light-alpha-2);
288290
--border-weaker-focus: var(--smoke-light-alpha-6);
291+
--button-ghost-hover: var(--smoke-light-alpha-2);
292+
--button-ghost-hover2: var(--smoke-light-alpha-3);
289293

290294
@media (prefers-color-scheme: dark) {
291295
/* OC-1-Dark */
@@ -294,8 +298,8 @@
294298
--background-weak: #201d1d;
295299
--background-strong: #151313;
296300
--background-stronger: #201c1c;
297-
--base: var(--smoke-dark-alpha-2);
298301
--surface-base: var(--smoke-dark-alpha-2);
302+
--base: var(--smoke-dark-alpha-2);
299303
--surface-base-hover: #e0b7b716;
300304
--surface-base-active: var(--smoke-dark-alpha-3);
301305
--surface-base-interactive-active: var(--cobalt-dark-alpha-2);
@@ -309,6 +313,7 @@
309313
--surface-float-base: var(--smoke-dark-1);
310314
--surface-float-base-hover: var(--smoke-dark-2);
311315
--surface-raised-base-hover: var(--smoke-dark-alpha-4);
316+
--surface-raised-base-active: var(--smoke-dark-alpha-5);
312317
--surface-raised-strong: var(--smoke-dark-alpha-4);
313318
--surface-raised-strong-hover: var(--smoke-dark-alpha-6);
314319
--surface-raised-stronger: var(--smoke-dark-alpha-6);
@@ -329,15 +334,15 @@
329334
--surface-warning-base: var(--solaris-light-3);
330335
--surface-warning-weak: var(--solaris-light-2);
331336
--surface-warning-strong: var(--solaris-light-9);
332-
--surface-critical-base: var(--ember-light-3);
333-
--surface-critical-weak: var(--ember-light-2);
334-
--surface-critical-strong: var(--ember-light-9);
337+
--surface-critical-base: var(--ember-dark-3);
338+
--surface-critical-weak: var(--ember-dark-2);
339+
--surface-critical-strong: var(--ember-dark-9);
335340
--surface-info-base: var(--lilac-light-3);
336341
--surface-info-weak: var(--lilac-light-2);
337342
--surface-info-strong: var(--lilac-light-9);
338-
--surface-diff-hidden-base: var(--blue-dark-2);
339-
--surface-diff-skip-base: var(--smoke-dark-alpha-1);
340343
--surface-diff-unchanged-base: var(--smoke-dark-1);
344+
--surface-diff-skip-base: var(--smoke-dark-alpha-1);
345+
--surface-diff-hidden-base: var(--blue-dark-2);
341346
--surface-diff-hidden-weak: var(--blue-dark-1);
342347
--surface-diff-hidden-weaker: var(--blue-dark-3);
343348
--surface-diff-hidden-strong: var(--blue-dark-5);
@@ -414,9 +419,9 @@
414419
--border-warning-base: var(--solaris-light-6);
415420
--border-warning-hover: var(--solaris-light-7);
416421
--border-warning-selected: var(--solaris-light-9);
417-
--border-critical-base: var(--ember-light-6);
418-
--border-critical-hover: var(--ember-light-7);
419-
--border-critical-selected: var(--ember-light-9);
422+
--border-critical-base: var(--ember-dark-5);
423+
--border-critical-hover: var(--ember-dark-7);
424+
--border-critical-selected: var(--ember-dark-9);
420425
--border-info-base: var(--lilac-light-6);
421426
--border-info-hover: var(--lilac-light-7);
422427
--border-info-selected: var(--lilac-light-9);
@@ -426,19 +431,19 @@
426431
--icon-selected: var(--smoke-dark-12);
427432
--icon-disabled: var(--smoke-dark-7);
428433
--icon-focus: var(--smoke-dark-12);
429-
--icon-weak-base: var(--smoke-dark-6);
430434
--icon-invert-base: var(--smoke-dark-1);
435+
--icon-weak-base: var(--smoke-dark-6);
431436
--icon-weak-hover: var(--smoke-light-7);
432437
--icon-weak-active: var(--smoke-light-8);
433438
--icon-weak-selected: var(--smoke-light-9);
434439
--icon-weak-disabled: var(--smoke-light-4);
435440
--icon-weak-focus: var(--smoke-light-9);
436441
--icon-strong-base: var(--smoke-dark-12);
437-
--icon-strong-hover: var(--smoke-light-12);
438-
--icon-strong-active: var(--smoke-light-12);
439-
--icon-strong-selected: var(--smoke-light-12);
440-
--icon-strong-disabled: var(--smoke-light-8);
441-
--icon-strong-focus: var(--smoke-light-12);
442+
--icon-strong-hover: #f6f3f3;
443+
--icon-strong-active: #fcfcfc;
444+
--icon-strong-selected: #fdfcfc;
445+
--icon-strong-disabled: var(--smoke-dark-8);
446+
--icon-strong-focus: #fdfcfc;
442447
--icon-brand-base: var(--white);
443448
--icon-interactive-base: var(--cobalt-dark-9);
444449
--icon-success-base: var(--apple-dark-7);
@@ -478,7 +483,6 @@
478483
--icon-diff-add-active: var(--mint-dark-11);
479484
--icon-diff-delete-base: var(--ember-dark-9);
480485
--icon-diff-delete-hover: var(--ember-dark-10);
481-
--icon-diff-delete-active: var(--ember-dark-11);
482486
--syntax-comment: #808080;
483487
--syntax-string: #9d7cd8;
484488
--syntax-keyword: #fab283;
@@ -514,5 +518,7 @@
514518
--border-weaker-selected: var(--cobalt-dark-alpha-3);
515519
--border-weaker-disabled: var(--smoke-dark-alpha-2);
516520
--border-weaker-focus: var(--smoke-dark-alpha-6);
521+
--button-ghost-hover: var(--smoke-dark-alpha-2);
522+
--button-ghost-hover2: var(--smoke-dark-alpha-3);
517523
}
518524
}

0 commit comments

Comments
 (0)