Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-08 04:12:26 +04:00
Code Issues Projects Releases Wiki Activity

Fix ribbon and payment icons dark mode on All Elements preview (#2804)

Browse Source 
Co-authored-by: codecalm <codecalm@gmail.com>
This commit is contained in:
Bartosz-Do
2026-08-07 00:12:53 +02:00
committed by GitHub
parent 324b0fbf0e
commit f2004da7b2
3 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/fix-payment-icons-dark-mode.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/preview": patch
---
Fixed payment icons on the all-elements page by rendering light and dark variants with `hide-theme-dark` and `hide-theme-light` so the correct icon shows when the preview theme changes.
.changeset/fix-ribbon-example-background.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/preview": patch
---
Fixed ribbon examples background on the all-elements page by replacing hardcoded `#f8f9fa` with `var(--tblr-bg-surface-secondary)` so it adapts to dark mode.
preview/pages/all-elements.astro
+10 -18
View File
@@ -539,10 +539,10 @@ function greetUser(name) {
</div>
<h4>Ribbons</h4>
<div class="position-relative mb-4" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
<div class="position-relative mb-4" style="height: 100px; background-color: var(--tblr-bg-surface-secondary); border-radius: 8px;">
<Ribbon text="New" color="success" />
</div>
<div class="position-relative mb-3" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
<div class="position-relative mb-3" style="height: 100px; background: var(--tblr-bg-surface-secondary); border-radius: 8px;">
<Ribbon text="Sale" color="danger" top />
</div>
</CardBody>
@@ -573,22 +573,14 @@ function greetUser(name) {
<h4>Payment Icons</h4>
<div class="mb-3">
<div class="d-flex flex-wrap gap-2">
<Payment payment="visa" label={paymentNames.visa} />
<Payment payment="mastercard" label={paymentNames.mastercard} />
<Payment payment="paypal" label={paymentNames.paypal} />
<Payment payment="americanexpress" label={paymentNames.americanexpress} />
<Payment payment="applepay" label={paymentNames.applepay} />
<Payment payment="google-pay" label={paymentNames['google-pay']} />
<Payment payment="stripe" label={paymentNames.stripe} />
<Payment payment="discover" label={paymentNames.discover} />
<Payment payment="jcb" label={paymentNames.jcb} />
<Payment payment="maestro" label={paymentNames.maestro} />
<Payment payment="dinersclub" label={paymentNames.dinersclub} />
<Payment payment="bitcoin" label={paymentNames.bitcoin} />
<Payment payment="ethereum" label={paymentNames.ethereum} />
<Payment payment="klarna" label={paymentNames.klarna} />
<Payment payment="venmo" label={paymentNames.venmo} />
<Payment payment="square" label={paymentNames.square} />
{
(['visa', 'mastercard', 'paypal', 'americanexpress', 'applepay', 'google-pay', 'stripe', 'discover', 'jcb', 'maestro', 'dinersclub', 'bitcoin', 'ethereum', 'klarna', 'venmo', 'square'] as const).map((payment) => (
<>
<Payment payment={payment} label={paymentNames[payment]} class="hide-theme-dark" />
<Payment payment={payment} label={paymentNames[payment]} dark class="hide-theme-light" />
</>
))
}
</div>
</div>
</CardBody>