Fix color regressions, add priority color (#37417)

- fix markup attention block regressions on 2 colors
- added new color "priority" color for important severity in markup
- all message-box style, and error form elements use monochrome text
- tweaked and improved action logs colors

Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>
This commit is contained in:
silverwind
2026-04-25 19:08:10 +02:00
committed by GitHub
parent 683f8c0014
commit 24b60f8ff9
11 changed files with 78 additions and 25 deletions
+35
View File
@@ -20,6 +20,25 @@
<p>This is an info message using --color-info-* variables.</p>
</div>
<h2>Markdown Attention Blocks</h2>
<div class="markup render-content">
<blockquote class="attention-header attention-note"><p>{{svg "octicon-info" 16 "attention-icon attention-note"}}<strong class="attention-note">Note</strong></p>
<p>Useful information that users should know, even when skimming content.</p>
</blockquote>
<blockquote class="attention-header attention-tip"><p>{{svg "octicon-light-bulb" 16 "attention-icon attention-tip"}}<strong class="attention-tip">Tip</strong></p>
<p>Helpful advice for doing things better or more easily.</p>
</blockquote>
<blockquote class="attention-header attention-important"><p>{{svg "octicon-report" 16 "attention-icon attention-important"}}<strong class="attention-important">Important</strong></p>
<p>Key information users need to know to achieve their goal.</p>
</blockquote>
<blockquote class="attention-header attention-warning"><p>{{svg "octicon-alert" 16 "attention-icon attention-warning"}}<strong class="attention-warning">Warning</strong></p>
<p>Urgent info that needs immediate user attention to avoid problems.</p>
</blockquote>
<blockquote class="attention-header attention-caution"><p>{{svg "octicon-stop" 16 "attention-icon attention-caution"}}<strong class="attention-caution">Caution</strong></p>
<p>Advises about risks or negative outcomes of certain actions.</p>
</blockquote>
</div>
<h2>Form Fields</h2>
<div class="ui form">
<div class="field error">
@@ -28,6 +47,22 @@
</div>
</div>
<h2>Error Input</h2>
<div class="ui input error">
<input type="text" value="Invalid input" readonly>
</div>
<h2>Attached Section Boxes</h2>
<h3 class="ui top attached error header">Error Header</h3>
<div class="ui attached error segment">Error section body content.</div>
<h3 class="ui top attached warning header tw-mt-3">Warning Header</h3>
<div class="ui attached warning segment">Warning section body content.</div>
<h2>Banner Preview (info-tinted)</h2>
<div class="web-banner-content-editor">
<div class="render-content render-preview">Banner preview content</div>
</div>
<h2>Labels</h2>
<div class="flex-text-block tw-gap-2">
<div class="ui red label">Red</div>