Skip to content

Commit 12a42ba

Browse files
authored
Apply CSS Variables to all message elements (#17920)
Fixes #17918. Applies color variables to all ui message on both themes. The colorization on .segment is a customization not present in fomantic ui, only used on user/repo/org delete pages.
1 parent dcdb487 commit 12a42ba

File tree

2 files changed

+76
-85
lines changed

2 files changed

+76
-85
lines changed

web_src/less/_base.less

+68-36
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,18 @@
8282
--color-diff-moved-row-border: #d0e27f;
8383
--color-diff-added-row-border: #e6ffed;
8484
--color-diff-inactive: #f2f2f2;
85-
--color-error-border: #c29393;
86-
--color-error-bg: #fff5f5;
87-
--color-error-text: #d64444;
85+
--color-error-border: #e0b4b4;
86+
--color-error-bg: #fff6f6;
87+
--color-error-text: #9f3a38;
8888
--color-success-border: #a3c293;
8989
--color-success-bg: #fcfff5;
90-
--color-success-text: #6cc644;
91-
--color-warning-border: #c2c193;
92-
--color-warning-bg: #fffff5;
93-
--color-warning-text: #fbbd08;
90+
--color-success-text: #2c662d;
91+
--color-warning-border: #c9ba9b;
92+
--color-warning-bg: #fffaf3;
93+
--color-warning-text: #573a08;
94+
--color-info-border: #a9d5de;
95+
--color-info-bg: #f8ffff;
96+
--color-info-text: #276f86;
9497
/* target-based colors */
9598
--color-body: #ffffff;
9699
--color-text-dark: #080808;
@@ -423,13 +426,68 @@ a.muted:hover,
423426
.ui.message {
424427
background: var(--color-box-body);
425428
color: var(--color-text);
426-
}
427-
428-
.ui.bottom.attached.message {
429429
box-shadow: none !important;
430430
border: 1px solid var(--color-secondary);
431431
}
432432

433+
.ui.info.message,
434+
.ui.attached.info.message,
435+
.ui.blue.message,
436+
.ui.attached.blue.message {
437+
background: var(--color-info-bg);
438+
color: var(--color-info-text);
439+
border-color: var(--color-info-border);
440+
}
441+
442+
.ui.success.message,
443+
.ui.attached.success.message,
444+
.ui.positive.message,
445+
.ui.attached.positive.message {
446+
background: var(--color-success-bg);
447+
color: var(--color-success-text);
448+
border-color: var(--color-success-border);
449+
}
450+
451+
.ui.error.message,
452+
.ui.attached.error.message,
453+
.ui.red.message,
454+
.ui.attached.red.message,
455+
.ui.negative.message,
456+
.ui.attached.negative.message {
457+
background: var(--color-error-bg);
458+
color: var(--color-error-text);
459+
border-color: var(--color-error-border);
460+
}
461+
462+
.ui.warning.message,
463+
.ui.attached.warning.message,
464+
.ui.yellow.message,
465+
.ui.attached.yellow.message {
466+
background: var(--color-warning-bg);
467+
color: var(--color-warning-text);
468+
border-color: var(--color-warning-border);
469+
}
470+
471+
.ui.error.header {
472+
background: var(--color-error-bg) !important;
473+
color: var(--color-error-text) !important;
474+
border-color: var(--color-error-border) !important;
475+
}
476+
477+
.ui.error.segment {
478+
border-color: var(--color-error-border) !important;
479+
}
480+
481+
.ui.warning.header {
482+
background: var(--color-warning-bg) !important;
483+
color: var(--color-warning-text) !important;
484+
border-color: var(--color-warning-border) !important;
485+
}
486+
487+
.ui.warning.segment {
488+
border-color: var(--color-warning-border) !important;
489+
}
490+
433491
.ui.selection.active.dropdown,
434492
.ui.selection.active.dropdown:hover,
435493
.ui.selection.active.dropdown .menu,
@@ -920,35 +978,9 @@ a.ui.card:hover,
920978
vertical-align: middle;
921979
}
922980

923-
.error {
924-
&.header {
925-
background-color: #ffe8e6 !important;
926-
border-color: var(--color-red);
927-
}
928-
929-
&.segment {
930-
border-color: var(--color-red);
931-
}
932-
}
933-
934-
.warning {
935-
&.header {
936-
background-color: #f9edbe !important;
937-
border-color: var(--color-yellow);
938-
}
939-
940-
&.segment {
941-
border-color: var(--color-yellow);
942-
}
943-
}
944-
945981
.info {
946982
&.segment {
947-
border: 1px solid #c5d5dd;
948-
949983
&.top {
950-
background-color: #e6f1f6 !important;
951-
952984
h3,
953985
h4 {
954986
margin-top: 0;

web_src/less/themes/theme-arc-green.less

+8-49
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,17 @@
7979
--color-diff-added-row-border: #314a37;
8080
--color-diff-inactive: #353846;
8181
--color-error-border: #a53a37;
82-
--color-error-bg: #403440;
83-
--color-error-text: #d64444;
82+
--color-error-bg: #482c2c;
83+
--color-error-text: #ff4433;
8484
--color-success-border: #458a57;
85-
--color-success-bg: #304440;
85+
--color-success-bg: #284034;
8686
--color-success-text: #6cc664;
87-
--color-warning-border: #aaa050;
88-
--color-warning-bg: #404440;
87+
--color-warning-border: #bb9d00;
88+
--color-warning-bg: #3a3a30;
8989
--color-warning-text: #fbbd08;
90+
--color-info-border: #306090;
91+
--color-info-bg: #26354c;
92+
--color-info-text: #38a8e8;
9093
/* target-based colors */
9194
--color-body: #383c4a;
9295
--color-box-header: #404652;
@@ -337,38 +340,6 @@ td.blob-hunk {
337340
color: #dbdbdb !important;
338341
}
339342

340-
.ui .warning.header,
341-
.ui.warning.message {
342-
background-color: #542 !important;
343-
border-color: #ec8;
344-
}
345-
346-
.ui.warning.message {
347-
color: #ec8;
348-
box-shadow: 0 0 0 1px #ec8;
349-
}
350-
351-
.ui.warning.segment {
352-
border-color: #ec8;
353-
}
354-
355-
.ui.red.message,
356-
.ui.error.message {
357-
background-color: #522;
358-
color: #f9cbcb;
359-
box-shadow: 0 0 0 1px #a04141 inset;
360-
}
361-
362-
.ui .error.header,
363-
.ui.error.message {
364-
background-color: #522 !important;
365-
border-color: #a04141;
366-
}
367-
368-
.ui.error.segment {
369-
border-color: #a04141;
370-
}
371-
372343
.ui.red.button,
373344
.ui.red.buttons .button {
374345
background-color: #7d3434;
@@ -379,18 +350,6 @@ td.blob-hunk {
379350
background-color: #984646;
380351
}
381352

382-
.ui.positive.message {
383-
background-color: #0d491b;
384-
color: #87ab63;
385-
box-shadow: 0 0 0 1px #2d693b inset, 0 0 0 0 transparent;
386-
}
387-
388-
.ui.negative.message {
389-
background-color: rgba(80, 23, 17, .6);
390-
color: #f9cbcb;
391-
box-shadow: 0 0 0 1px rgba(121, 71, 66, .5) inset, 0 0 0 0 transparent;
392-
}
393-
394353
.ui.list .list > .item .header,
395354
.ui.list > .item .header {
396355
color: #dedede;

0 commit comments

Comments
 (0)