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.

Changes

2 changed files (+76/-85)

• web_src/less/_base.less
  • @@ -82,15 +82,18 @@
    --color-diff-moved-row-border: #d0e27f; --color-diff-added-row-border: #e6ffed; --color-diff-inactive: #f2f2f2; - --color-error-border: #c29393; - --color-error-bg: #fff5f5; - --color-error-text: #d64444; + --color-error-border: #e0b4b4; + --color-error-bg: #fff6f6; + --color-error-text: #9f3a38; --color-success-border: #a3c293; --color-success-bg: #fcfff5; - --color-success-text: #6cc644; - --color-warning-border: #c2c193; - --color-warning-bg: #fffff5; - --color-warning-text: #fbbd08; + --color-success-text: #2c662d; + --color-warning-border: #c9ba9b; + --color-warning-bg: #fffaf3; + --color-warning-text: #573a08; + --color-info-border: #a9d5de; + --color-info-bg: #f8ffff; + --color-info-text: #276f86; /* target-based colors */ --color-body: #ffffff; --color-text-dark: #080808;
  • @@ -423,13 +426,68 @@ a.muted:hover,
    .ui.message { background: var(--color-box-body); color: var(--color-text); - } - - .ui.bottom.attached.message { box-shadow: none !important; border: 1px solid var(--color-secondary); } + .ui.info.message, + .ui.attached.info.message, + .ui.blue.message, + .ui.attached.blue.message { + background: var(--color-info-bg); + color: var(--color-info-text); + border-color: var(--color-info-border); + } + + .ui.success.message, + .ui.attached.success.message, + .ui.positive.message, + .ui.attached.positive.message { + background: var(--color-success-bg); + color: var(--color-success-text); + border-color: var(--color-success-border); + } + + .ui.error.message, + .ui.attached.error.message, + .ui.red.message, + .ui.attached.red.message, + .ui.negative.message, + .ui.attached.negative.message { + background: var(--color-error-bg); + color: var(--color-error-text); + border-color: var(--color-error-border); + } + + .ui.warning.message, + .ui.attached.warning.message, + .ui.yellow.message, + .ui.attached.yellow.message { + background: var(--color-warning-bg); + color: var(--color-warning-text); + border-color: var(--color-warning-border); + } + + .ui.error.header { + background: var(--color-error-bg) !important; + color: var(--color-error-text) !important; + border-color: var(--color-error-border) !important; + } + + .ui.error.segment { + border-color: var(--color-error-border) !important; + } + + .ui.warning.header { + background: var(--color-warning-bg) !important; + color: var(--color-warning-text) !important; + border-color: var(--color-warning-border) !important; + } + + .ui.warning.segment { + border-color: var(--color-warning-border) !important; + } + .ui.selection.active.dropdown, .ui.selection.active.dropdown:hover, .ui.selection.active.dropdown .menu,
  • @@ -920,35 +978,9 @@ a.ui.card:hover,
    vertical-align: middle; } - .error { - &.header { - background-color: #ffe8e6 !important; - border-color: var(--color-red); - } - - &.segment { - border-color: var(--color-red); - } - } - - .warning { - &.header { - background-color: #f9edbe !important; - border-color: var(--color-yellow); - } - - &.segment { - border-color: var(--color-yellow); - } - } - .info { &.segment { - border: 1px solid #c5d5dd; - &.top { - background-color: #e6f1f6 !important; - h3, h4 { margin-top: 0;
• web_src/less/themes/theme-arc-green.less
  • @@ -79,14 +79,17 @@
    --color-diff-added-row-border: #314a37; --color-diff-inactive: #353846; --color-error-border: #a53a37; - --color-error-bg: #403440; - --color-error-text: #d64444; + --color-error-bg: #482c2c; + --color-error-text: #ff4433; --color-success-border: #458a57; - --color-success-bg: #304440; + --color-success-bg: #284034; --color-success-text: #6cc664; - --color-warning-border: #aaa050; - --color-warning-bg: #404440; + --color-warning-border: #bb9d00; + --color-warning-bg: #3a3a30; --color-warning-text: #fbbd08; + --color-info-border: #306090; + --color-info-bg: #26354c; + --color-info-text: #38a8e8; /* target-based colors */ --color-body: #383c4a; --color-box-header: #404652;
  • @@ -337,38 +340,6 @@ td.blob-hunk {
    color: #dbdbdb !important; } - .ui .warning.header, - .ui.warning.message { - background-color: #542 !important; - border-color: #ec8; - } - - .ui.warning.message { - color: #ec8; - box-shadow: 0 0 0 1px #ec8; - } - - .ui.warning.segment { - border-color: #ec8; - } - - .ui.red.message, - .ui.error.message { - background-color: #522; - color: #f9cbcb; - box-shadow: 0 0 0 1px #a04141 inset; - } - - .ui .error.header, - .ui.error.message { - background-color: #522 !important; - border-color: #a04141; - } - - .ui.error.segment { - border-color: #a04141; - } - .ui.red.button, .ui.red.buttons .button { background-color: #7d3434;
  • @@ -379,18 +350,6 @@ td.blob-hunk {
    background-color: #984646; } - .ui.positive.message { - background-color: #0d491b; - color: #87ab63; - box-shadow: 0 0 0 1px #2d693b inset, 0 0 0 0 transparent; - } - - .ui.negative.message { - background-color: rgba(80, 23, 17, .6); - color: #f9cbcb; - box-shadow: 0 0 0 1px rgba(121, 71, 66, .5) inset, 0 0 0 0 transparent; - } - .ui.list .list > .item .header, .ui.list > .item .header { color: #dedede;