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:
parent
5131450014
commit
702ad49764
4 changed files with 36 additions and 2 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">🕮 PyPi</a>
|
||||
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="shop-new-button mps-button">✐ Source Code</a>
|
||||
<a href="https://pypi.org/project/make-post-sell/" target="_blank" class="source-button mps-button">🕮 PyPi</a>
|
||||
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button">✐ Source Code</a>
|
||||
</center>
|
||||
|
||||
<br/>
|
||||
|
|
|
|||
|
|
@ -155,6 +155,20 @@ Style Guide — 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) — color #a3c765, weight 600</div>
|
|||
<div class="sg-code"><a href="#" class="product-edit-button mps-button">🕮 PyPi</a></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">🕮 PyPi</a>
|
||||
<a href="#" class="source-button mps-button">✐ Source Code</a>
|
||||
</div>
|
||||
<div class="sg-code"><a href="#" class="source-button mps-button">✐ Source Code</a></div>
|
||||
</div>
|
||||
|
||||
<div class="sg-subsection">
|
||||
<div class="sg-label">Navy (Log Out / Activate)</div>
|
||||
<div class="sg-demo">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue