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

Co-authored-by: codecalm <codecalm@gmail.com>

.changeset/fix-payment-icons-dark-mode.md

@@ -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

@@ -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

@@ -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} />
+                (['visa', 'mastercard', 'paypal', 'americanexpress', 'applepay', 'google-pay', 'stripe', 'discover', 'jcb', 'maestro', 'dinersclub', 'bitcoin', 'ethereum', 'klarna', 'venmo', 'square'] as const).map((payment) => (
-              <Payment payment="paypal" label={paymentNames.paypal} />
+                  <>
-              <Payment payment="americanexpress" label={paymentNames.americanexpress} />
+                    <Payment payment={payment} label={paymentNames[payment]} class="hide-theme-dark" />
-              <Payment payment="applepay" label={paymentNames.applepay} />
+                    <Payment payment={payment} label={paymentNames[payment]} dark class="hide-theme-light" />
-              <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} />
             </div>
           </div>
         </CardBody>