Purple source buttons, add purple to design system

New .source-button class (#9B59B6, hover #7B2D8E) for PyPi and
Source Code buttons. Updated styleguide, CLAUDE.md color palette,
and button hierarchy docs.
This commit is contained in:
russell@unturf.com 2026-03-04 16:00:58 -05:00
parent 5131450014
commit 702ad49764
4 changed files with 36 additions and 2 deletions

View file

@ -30,6 +30,8 @@ Mobile-first static site. CSS Grid. Helvetica. Media queries at 800px (tablet/de
| Blue Secondary | `#98b6fa` | Secondary buttons (edit, preview, save, PyPi, blog), alert-info |
| Navy Brand | `#5871ad` | Ribbon gradient start, log-out/activate buttons, corner ribbon |
| Light Navy | `#82A8FF` | Ribbon gradient end |
| Purple | `#9B59B6` | Source/code buttons (PyPi, Source Code), corner ribbon |
| Purple Dark | `#7B2D8E` | Purple hover state, ribbon gradient |
| Danger Red | `#CC6958` | Delete button |
| Check Green | `#678731` | Checkmark list items |
| Cross Red | `#c77765` | Cross list items |
@ -47,6 +49,7 @@ Green = primary CTA (action the user should take). Blue = secondary (information
- `.shop-new-button.mps-button` — green CTA
- `.product-edit-button.mps-button` — blue secondary
- `.source-button.mps-button` — purple (source code, open source links)
- `.log-out-button.mps-button` — navy
- `.cart-delete-button.mps-button` — danger red
- `.shop-switch-button.mps-button` — outline (border only)

View file

@ -275,6 +275,14 @@ a.cart-save-button {
background-color: #98b6fa;
}
a.source-button {
background-color: #9B59B6;
}
a.source-button:hover {
background-color: #7B2D8E;
}
a.cart-activate-button {
background-color: #5871ad;
}

View file

@ -164,8 +164,8 @@ Sell digital downloads or physical products — commission free!
<br/>
<center>
<a href="https://pypi.org/project/make-post-sell/" target="_blank" class="product-edit-button mps-button">&#128366; PyPi</a>
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="shop-new-button mps-button">&#x2710; Source Code</a>
<a href="https://pypi.org/project/make-post-sell/" target="_blank" class="source-button mps-button">&#128366; PyPi</a>
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button">&#x2710; Source Code</a>
</center>
<br/>

View file

@ -155,6 +155,20 @@ Style Guide &#8212; Make Post Sell Design System
<div class="sg-swatch-hex">#82A8FF</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #9B59B6;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Purple</div>
<div class="sg-swatch-hex">#9B59B6</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #7B2D8E;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Purple Dark</div>
<div class="sg-swatch-hex">#7B2D8E</div>
</div>
</div>
</div>
</div>
@ -290,6 +304,15 @@ a (links) &#8212; color #a3c765, weight 600</div>
<div class="sg-code">&lt;a href="#" class="product-edit-button mps-button"&gt;&#128366; PyPi&lt;/a&gt;</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Purple (Source / Code)</div>
<div class="sg-demo">
<a href="#" class="source-button mps-button">&#128366; PyPi</a>
<a href="#" class="source-button mps-button">&#x2710; Source Code</a>
</div>
<div class="sg-code">&lt;a href="#" class="source-button mps-button"&gt;&#x2710; Source Code&lt;/a&gt;</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Navy (Log Out / Activate)</div>
<div class="sg-demo">