ibnezzoubayr/Atay-Makhzan
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix color regressions, add priority color (#37417) (#37421)

Browse Source 
Backport #37417 by @silverwind

- 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

<img width="722" height="637" alt="Screenshot 2026-04-25 at 17 02 49"
src="https://github.com/user-attachments/assets/e8316fd8-3889-4f67-bdc5-39429b5a7eef"
/>
<img width="885" height="123" alt="image"
src="https://github.com/user-attachments/assets/4a761834-e69a-4f5e-a39d-8e49b75fc39d"
/>

<img width="608" height="554" alt="Screenshot 2026-04-25 at 17 03 16"
src="https://github.com/user-attachments/assets/86694726-817a-42b9-91dc-005bc03720cd"
/>

<img width="319" height="279" alt="image"
src="https://github.com/user-attachments/assets/db2801e9-8963-448c-b1b8-3029a69d5cf3"
/>

<img width="396" height="345" alt="image"
src="https://github.com/user-attachments/assets/8195c20d-e034-442c-b0db-4a8455792d0c"
/>


Fixes: #37416

---
This PR was written with the help of Claude Opus 4.7

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>
This commit is contained in:
Giteabot
2026-04-26 03:26:25 +08:00
committed by GitHub
parent afdbd9b7c5
commit 11f77efea5
11 changed files with 78 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/devtest/severity-colors.tmpl
+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>