@one-payments/web-components 1.1.32 → 1.2.0

package/dist/one-payment.js

@@ -80,6 +80,39 @@ let OnePayment = class OnePayment extends LitElement {
         this.expiryCleave = null;
         this.leaveEventsCounter = 0;
         this.previousState = null;
+        // ═══════════════════════════════════════════════════════════════
+        // Appearance/Theming Methods
+        // ═══════════════════════════════════════════════════════════════
+        /**
+         * Map of appearance variable names to CSS custom property names
+         */
+        this.cssVariableMap = {
+            colorPrimary: '--op-color-primary',
+            colorPrimaryHover: '--op-color-primary-hover',
+            colorPrimaryText: '--op-color-primary-text',
+            colorBackground: '--op-color-background',
+            colorSurface: '--op-color-surface',
+            colorText: '--op-color-text',
+            colorTextSecondary: '--op-color-text-secondary',
+            colorDanger: '--op-color-danger',
+            colorSuccess: '--op-color-success',
+            colorWarning: '--op-color-warning',
+            colorBorder: '--op-color-border',
+            colorBorderFocus: '--op-color-border-focus',
+            fontFamily: '--op-font-family',
+            fontSize: '--op-font-size',
+            fontSizeSmall: '--op-font-size-sm',
+            borderRadius: '--op-border-radius',
+            borderRadiusLarge: '--op-border-radius-lg',
+            spacingUnit: '--op-spacing-unit',
+            boxShadow: '--op-box-shadow',
+            boxShadowLarge: '--op-box-shadow-lg',
+        };
+        /**
+         * Media query listener for auto theme
+         */
+        this.themeMediaQuery = null;
+        this.themeMediaQueryHandler = null;
         this.handle3DSPostMessage = (event) => {
             if (event.data === 'ON_AWX_3DS_START_PAGE_LEAVE') {
                 this.leaveEventsCounter++;
@@ -114,6 +147,79 @@ let OnePayment = class OnePayment extends LitElement {
         }
         return true;
     }
+    /**
+     * Apply appearance settings to the component
+     *
+     * This method:
+     * 1. Sets the data-theme attribute based on theme option
+     * 2. Applies CSS custom properties from variables
+     *
+     * @private
+     */
+    applyAppearance() {
+        if (!this.appearance) {
+            // Reset to default if appearance is removed
+            this.removeAttribute('data-theme');
+            return;
+        }
+        const { theme, variables } = this.appearance;
+        // Apply theme
+        if (theme) {
+            if (theme === 'auto') {
+                // Check system preference
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                this.dataset['theme'] = prefersDark ? 'dark' : 'light';
+                // Listen for system theme changes
+                this.setupThemeMediaQueryListener();
+            }
+            else {
+                this.dataset['theme'] = theme;
+            }
+        }
+        // Apply CSS variable overrides
+        if (variables) {
+            this.applyCssVariables(variables);
+        }
+    }
+    /**
+     * Apply CSS custom properties from variables object
+     */
+    applyCssVariables(variables) {
+        for (const [key, cssVar] of Object.entries(this.cssVariableMap)) {
+            const value = variables[key];
+            if (value !== undefined && value !== null) {
+                this.style.setProperty(cssVar, value);
+            }
+            else {
+                // Remove custom property to use default
+                this.style.removeProperty(cssVar);
+            }
+        }
+    }
+    /**
+     * Setup listener for system theme changes (for theme: 'auto')
+     */
+    setupThemeMediaQueryListener() {
+        // Clean up existing listener
+        this.cleanupThemeMediaQueryListener();
+        this.themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        this.themeMediaQueryHandler = (e) => {
+            if (this.appearance?.theme === 'auto') {
+                this.dataset['theme'] = e.matches ? 'dark' : 'light';
+            }
+        };
+        this.themeMediaQuery.addEventListener('change', this.themeMediaQueryHandler);
+    }
+    /**
+     * Clean up theme media query listener
+     */
+    cleanupThemeMediaQueryListener() {
+        if (this.themeMediaQuery && this.themeMediaQueryHandler) {
+            this.themeMediaQuery.removeEventListener('change', this.themeMediaQueryHandler);
+            this.themeMediaQuery = null;
+            this.themeMediaQueryHandler = null;
+        }
+    }
     // --- Lifecycle ---
     connectedCallback() {
         super.connectedCallback();
@@ -130,6 +236,8 @@ let OnePayment = class OnePayment extends LitElement {
         });
     }
     firstUpdated() {
+        // Apply appearance settings
+        this.applyAppearance();
         // Initialize SDK after properties are set
         // This runs AFTER the first render and property updates
         this.initializeSDK();
@@ -146,6 +254,10 @@ let OnePayment = class OnePayment extends LitElement {
      */
     updated(changedProperties) {
         super.updated(changedProperties);
+        // Apply appearance when it changes
+        if (changedProperties.has('appearance')) {
+            this.applyAppearance();
+        }
         // If not yet initialized and all required props are now present, initialize
         if (!this.isInitialized && this.hasAllRequiredProps()) {
             console.info('[OnePayment] All required props now available. Initializing SDK...');
@@ -154,6 +266,8 @@ let OnePayment = class OnePayment extends LitElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        // Clean up theme media query listener
+        this.cleanupThemeMediaQueryListener();
         this.sdk?.destroy();
         this.isInitialized = false;
         this.destroyCleave();
@@ -1127,11 +1241,64 @@ let OnePayment = class OnePayment extends LitElement {
 };
 // --- Styles (EXACT original design from PaymentElement.module.scss) ---
 OnePayment.styles = css `
+    /* ═══════════════════════════════════════════════════════════════
+       CSS CUSTOM PROPERTIES (Theming)
+       ═══════════════════════════════════════════════════════════════ */
+
     :host {
+      /* ─── Color Tokens (Light Theme Default) ─── */
+      --op-color-primary: #2a2327;
+      --op-color-primary-hover: #1a1517;
+      --op-color-primary-text: #ffbe32;
+      --op-color-background: #ffffff;
+      --op-color-surface: #f9fafb;
+      --op-color-text: #1f2937;
+      --op-color-text-secondary: #6b7280;
+      --op-color-danger: #ef4444;
+      --op-color-success: #10b981;
+      --op-color-warning: #f59e0b;
+      --op-color-border: #e5e7eb;
+      --op-color-border-focus: #2a2327;
+
+      /* ─── Typography Tokens ─── */
+      --op-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        'Helvetica Neue', Arial, sans-serif;
+      --op-font-size: 16px;
+      --op-font-size-sm: 14px;
+      --op-font-size-xs: 12px;
+
+      /* ─── Layout Tokens ─── */
+      --op-border-radius: 8px;
+      --op-border-radius-lg: 40px;
+      --op-spacing-unit: 4px;
+      --op-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      --op-box-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
+      --op-transition: 0.2s ease;
+
+      /* ─── Base Styles ─── */
       display: block;
-      font-family:
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      font-family: var(--op-font-family);
       box-sizing: border-box;
+      background-color: var(--op-color-background);
+      color: var(--op-color-text);
+    }
+
+    /* ─── Dark Theme ─── */
+    :host([data-theme="dark"]) {
+      --op-color-primary: #ffbe32;
+      --op-color-primary-hover: #ffd666;
+      --op-color-primary-text: #1a1517;
+      --op-color-background: #1a1517;
+      --op-color-surface: #2a2327;
+      --op-color-text: #f9fafb;
+      --op-color-text-secondary: #9ca3af;
+      --op-color-danger: #f87171;
+      --op-color-success: #34d399;
+      --op-color-warning: #fbbf24;
+      --op-color-border: #4b5563;
+      --op-color-border-focus: #ffbe32;
+      --op-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+      --op-box-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.4);
     }
 
     * {
@@ -1148,10 +1315,10 @@ OnePayment.styles = css `
     .header {
       text-align: left;
       padding: 1rem 0;
-      color: #6b7280;
-      font-size: 0.875rem;
+      color: var(--op-color-text-secondary);
+      font-size: var(--op-font-size-sm);
       font-weight: 400;
-      border-bottom: 1px solid #e5e7eb;
+      border-bottom: 1px solid var(--op-color-border);
       margin-bottom: 1rem;
     }
 
@@ -1164,10 +1331,10 @@ OnePayment.styles = css `
     }
 
     .payment-method-item {
-      border: 1px solid #e5e7eb;
-      border-radius: 0.5rem;
+      border: 1px solid var(--op-color-border);
+      border-radius: var(--op-border-radius);
       overflow: visible;
-      background: #ffffff;
+      background: var(--op-color-background);
       width: 100%;
     }
 
@@ -1175,20 +1342,20 @@ OnePayment.styles = css `
       display: flex;
       align-items: center;
       padding: 1rem 1.25rem;
-      background: #ffffff;
+      background: var(--op-color-background);
       cursor: pointer;
-      transition: background-color 150ms ease;
+      transition: background-color var(--op-transition);
       user-select: none;
       width: 100%;
-      border-radius: 0.5rem 0.5rem 0 0;
+      border-radius: var(--op-border-radius) var(--op-border-radius) 0 0;
     }
 
     .method-header:hover {
-      background-color: #f9fafb;
+      background-color: var(--op-color-surface);
     }
 
     .method-header.selected {
-      background-color: #f3f4f6;
+      background-color: var(--op-color-surface);
     }
 
     .radio {
@@ -1199,20 +1366,20 @@ OnePayment.styles = css `
       margin-right: 10px;
       flex-shrink: 0;
       cursor: pointer;
-      accent-color: #ffbe32;
+      accent-color: var(--op-color-primary);
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
-      border: 2px solid #d1d5db;
+      border: 2px solid var(--op-color-border);
       border-radius: 50%;
-      background-color: #ffffff;
+      background-color: var(--op-color-background);
       position: relative;
-      transition: border-color 150ms ease;
+      transition: border-color var(--op-transition);
     }
 
     .radio:checked {
-      border-color: #ffbe32;
-      background-color: #ffffff;
+      border-color: var(--op-color-primary);
+      background-color: var(--op-color-background);
     }
 
     .radio:checked::after {
@@ -1224,11 +1391,11 @@ OnePayment.styles = css `
       width: 0.625rem;
       height: 0.625rem;
       border-radius: 50%;
-      background-color: #ffbe32;
+      background-color: var(--op-color-primary);
     }
 
     .radio:hover:not(:disabled) {
-      border-color: #9ca3af;
+      border-color: var(--op-color-text-secondary);
     }
 
     .method-icon {
@@ -1240,7 +1407,7 @@ OnePayment.styles = css `
       justify-content: center;
       font-size: 1.25rem;
       flex-shrink: 0;
-      color: #6b7280;
+      color: var(--op-color-text-secondary);
       margin-right: 0.625rem;
     }
 
@@ -1252,7 +1419,7 @@ OnePayment.styles = css `
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      color: #6b7280;
+      color: var(--op-color-text-secondary);
     }
 
     .method-icon-right svg {
@@ -1267,9 +1434,9 @@ OnePayment.styles = css `
     }
 
     .method-name {
-      font-size: 1rem;
+      font-size: var(--op-font-size);
       font-weight: 500;
-      color: #111827;
+      color: var(--op-color-text);
       flex-shrink: 0;
       text-align: left;
       margin-right: 10px;
@@ -1278,8 +1445,8 @@ OnePayment.styles = css `
     /* Accordion Content */
     .method-content {
       padding: 1.5rem;
-      background-color: #ffffff;
-      border-top: 1px solid #e5e7eb;
+      background-color: var(--op-color-background);
+      border-top: 1px solid var(--op-color-border);
       width: 100%;
       overflow: visible;
     }
@@ -1291,9 +1458,9 @@ OnePayment.styles = css `
     }
 
     .form-title {
-      font-size: 1rem;
+      font-size: var(--op-font-size);
       font-weight: 500;
-      color: #111827;
+      color: var(--op-color-text);
       margin: 0 0 1rem 0;
       text-align: left;
     }
@@ -1312,22 +1479,23 @@ OnePayment.styles = css `
     .form-label {
       display: block;
       margin-bottom: 0.5rem;
-      font-size: 0.875rem;
+      font-size: var(--op-font-size-sm);
       font-weight: 500;
-      color: #374151;
+      color: var(--op-color-text);
       text-align: left;
     }
 
     .input {
       width: 100%;
       padding: 0.75rem;
-      border: 1px solid #d1d5db;
-      border-radius: 0.375rem;
-      font-size: 0.9375rem;
+      border: 1px solid var(--op-color-border);
+      border-radius: calc(var(--op-border-radius) / 2);
+      font-size: var(--op-font-size);
+      font-family: var(--op-font-family);
       line-height: 1.25rem;
-      background: white;
-      color: black;
-      transition: all 150ms ease;
+      background: var(--op-color-background);
+      color: var(--op-color-text);
+      transition: all var(--op-transition);
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
@@ -1335,24 +1503,24 @@ OnePayment.styles = css `
 
     .input:focus {
       outline: none;
-      border-color: #7c3aed;
+      border-color: var(--op-color-border-focus);
       box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
     }
 
     .input::placeholder {
-      color: #9ca3af;
+      color: var(--op-color-text-secondary);
     }
 
     .input:hover:not(:focus) {
-      border-color: #9ca3af;
+      border-color: var(--op-color-text-secondary);
     }
 
     .input.input-error {
-      border-color: #dc2626;
+      border-color: var(--op-color-danger);
     }
 
     .input.input-error:focus {
-      border-color: #dc2626;
+      border-color: var(--op-color-danger);
       box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
     }
 
@@ -1365,8 +1533,8 @@ OnePayment.styles = css `
 
     .error-message {
       margin-top: 0.25rem;
-      color: #dc2626;
-      font-size: 0.75rem;
+      color: var(--op-color-danger);
+      font-size: var(--op-font-size-xs);
       line-height: 1.25;
     }
 
@@ -1384,21 +1552,21 @@ OnePayment.styles = css `
       padding: 10px 24px;
       font-size: 18px;
       font-weight: 650;
-      color: #ffbe32;
+      color: var(--op-color-primary-text);
       line-height: normal;
       border: 0;
-      border-radius: 40px;
+      border-radius: var(--op-border-radius-lg);
       text-decoration: none;
       transition:
-        background-color 0.2s ease,
-        border-color 0.2s ease,
-        color 0.2s ease,
-        opacity 0.2s ease;
+        background-color var(--op-transition),
+        border-color var(--op-transition),
+        color var(--op-transition),
+        opacity var(--op-transition);
       overflow: hidden;
       user-select: none;
       position: relative;
       cursor: pointer;
-      background-color: #2a2327;
+      background-color: var(--op-color-primary);
       white-space: nowrap;
       letter-spacing: 0;
       -webkit-appearance: none;
@@ -1408,13 +1576,12 @@ OnePayment.styles = css `
 
     .pay-button:disabled {
       cursor: not-allowed;
-      color: rgba(255, 190, 50, 0.8);
-      background-color: rgba(42, 35, 39, 0.8);
+      opacity: 0.7;
     }
 
     .pay-button:not(:disabled):hover,
     .pay-button:not(:disabled):focus-visible {
-      background-color: #000;
+      background-color: var(--op-color-primary-hover);
     }
 
     .pay-button:not(:disabled):active {
@@ -1440,7 +1607,7 @@ OnePayment.styles = css `
       margin-left: -10px;
       margin-top: -10px;
       border: 2px solid transparent;
-      border-top-color: #ffbe32;
+      border-top-color: var(--op-color-primary-text);
       border-radius: 50%;
       animation: button-spinner 0.8s linear infinite;
     }
@@ -1480,7 +1647,7 @@ OnePayment.styles = css `
     }
 
     .processing-text {
-      color: #6b7280;
+      color: var(--op-color-text-secondary);
       margin: 0;
     }
 
@@ -1499,32 +1666,31 @@ OnePayment.styles = css `
       padding: 10px 24px;
       font-size: 18px;
       font-weight: 650;
-      color: #ffbe32;
+      color: var(--op-color-primary-text);
       line-height: normal;
       border: 0;
-      border-radius: 40px;
+      border-radius: var(--op-border-radius-lg);
       text-decoration: none;
       transition:
-        background-color 0.2s ease,
+        background-color var(--op-transition),
         transform 0.05s ease;
       overflow: hidden;
       user-select: none;
       position: relative;
       cursor: pointer;
-      background-color: #2a2327;
+      background-color: var(--op-color-primary);
       white-space: nowrap;
       letter-spacing: 0;
     }
 
     .paynow-container .scanned-button:disabled {
       cursor: not-allowed;
-      color: rgba(255, 190, 50, 0.8);
-      background-color: rgba(42, 35, 39, 0.8);
+      opacity: 0.7;
     }
 
     .paynow-container .scanned-button:not(:disabled):hover,
     .paynow-container .scanned-button:not(:disabled):focus-visible {
-      background-color: #000;
+      background-color: var(--op-color-primary-hover);
     }
 
     .paynow-container .scanned-button:not(:disabled):active {
@@ -1538,9 +1704,9 @@ OnePayment.styles = css `
     }
 
     .instructions-title {
-      font-size: 1rem;
+      font-size: var(--op-font-size);
       font-weight: 600;
-      color: #111827;
+      color: var(--op-color-text);
       margin: 0 0 1.5rem 0;
       text-align: left;
     }
@@ -1567,9 +1733,9 @@ OnePayment.styles = css `
       height: 1.75rem;
       min-width: 1.75rem;
       border-radius: 50%;
-      background-color: #ffbe32;
-      color: #ffffff;
-      font-size: 0.875rem;
+      background-color: var(--op-color-primary);
+      color: var(--op-color-background);
+      font-size: var(--op-font-size-sm);
       font-weight: 600;
       flex-shrink: 0;
     }
@@ -1578,7 +1744,7 @@ OnePayment.styles = css `
       flex: 1;
       margin: 0;
       padding-top: 0.125rem;
-      color: #374151;
+      color: var(--op-color-text);
       font-size: 0.9375rem;
       line-height: 1.5;
     }
@@ -1589,8 +1755,8 @@ OnePayment.styles = css `
     }
 
     .qr-instruction {
-      color: #6b7280;
-      font-size: 14px;
+      color: var(--op-color-text-secondary);
+      font-size: var(--op-font-size-sm);
       margin-bottom: 1.5rem;
       line-height: 1.5;
     }
@@ -1602,33 +1768,33 @@ OnePayment.styles = css `
     }
 
     .qr-canvas {
-      border: 4px solid #f3f4f6;
-      border-radius: 12px;
+      border: 4px solid var(--op-color-surface);
+      border-radius: var(--op-border-radius);
       padding: 16px;
-      background: white;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
+      background: var(--op-color-background);
+      box-shadow: var(--op-box-shadow-lg);
       width: 200px;
       height: 200px;
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #9ca3af;
+      color: var(--op-color-text-secondary);
     }
 
     .scanned-button {
       padding: 12px 24px;
-      background: #10b981;
-      color: white;
+      background: var(--op-color-success);
+      color: var(--op-color-background);
       border: none;
-      border-radius: 8px;
-      font-size: 16px;
+      border-radius: var(--op-border-radius);
+      font-size: var(--op-font-size);
       font-weight: 600;
       cursor: pointer;
-      transition: all 0.2s ease;
+      transition: all var(--op-transition);
     }
 
     .scanned-button:hover:not(:disabled) {
-      background: #059669;
+      filter: brightness(0.9);
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
     }
@@ -1646,25 +1812,25 @@ OnePayment.styles = css `
 
     /* Result Status Block - Replaces payment methods when succeeded/failed */
     .result-card {
-      background: white;
-      border-radius: 12px;
+      background: var(--op-color-background);
+      border-radius: var(--op-border-radius);
       padding: 40px;
       width: 100%;
       text-align: center;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
+      box-shadow: var(--op-box-shadow-lg);
       border: 2px solid transparent;
-      transition: all 0.3s ease;
+      transition: all var(--op-transition);
       margin-top: 0;
     }
 
     .result-card.success {
-      border-color: #10b981;
-      background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
+      border-color: var(--op-color-success);
+      background: var(--op-color-background);
     }
 
     .result-card.error {
-      border-color: #ef4444;
-      background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+      border-color: var(--op-color-danger);
+      background: var(--op-color-background);
     }
 
     .result-icon-wrapper {
@@ -1679,11 +1845,11 @@ OnePayment.styles = css `
     }
 
     .result-card.success .result-icon-wrapper {
-      background: #10b981;
+      background: var(--op-color-success);
     }
 
     .result-card.error .result-icon-wrapper {
-      background: #ef4444;
+      background: var(--op-color-danger);
     }
 
     @keyframes scaleIn {
@@ -1707,13 +1873,13 @@ OnePayment.styles = css `
       margin: 0 0 12px 0;
       font-size: 28px;
       font-weight: 700;
-      color: #111827;
+      color: var(--op-color-text);
     }
 
     .result-message {
       margin: 0 0 32px 0;
-      font-size: 16px;
-      color: #6b7280;
+      font-size: var(--op-font-size);
+      color: var(--op-color-text-secondary);
       line-height: 1.5;
     }
 
@@ -1825,16 +1991,16 @@ OnePayment.styles = css `
     /* Transaction Details */
     .transaction-details {
       padding: 1.25rem;
-      background: #f9fafb;
-      border: 1px solid #e5e7eb;
-      border-radius: 0.5rem;
+      background: var(--op-color-surface);
+      border: 1px solid var(--op-color-border);
+      border-radius: var(--op-border-radius);
       margin-bottom: 1rem;
     }
 
     .transaction-title {
       font-size: 1.125rem;
       font-weight: 600;
-      color: #111827;
+      color: var(--op-color-text);
       margin: 0 0 1rem 0;
       line-height: 1.2;
     }
@@ -1852,15 +2018,15 @@ OnePayment.styles = css `
     }
 
     .details-label {
-      font-size: 0.875rem;
+      font-size: var(--op-font-size-sm);
       font-weight: 500;
-      color: #6b7280;
+      color: var(--op-color-text-secondary);
     }
 
     .details-value {
-      font-size: 0.875rem;
+      font-size: var(--op-font-size-sm);
       font-weight: 600;
-      color: #111827;
+      color: var(--op-color-text);
       text-align: right;
     }
 
@@ -1896,7 +2062,7 @@ OnePayment.styles = css `
       left: 0.9375rem;
       top: 0.625rem;
       bottom: 0.625rem;
-      border-left: 2px solid #d1d5db;
+      border-left: 2px solid var(--op-color-border);
     }
 
     .fee-breakdown-inner {
@@ -1926,7 +2092,7 @@ OnePayment.styles = css `
       width: 10px;
       height: 10px;
       border-radius: 50%;
-      background: #d1d5db;
+      background: var(--op-color-border);
     }
 
     .breakdown-row:first-child::after {
@@ -1937,7 +2103,7 @@ OnePayment.styles = css `
       transform: translateY(-50%);
       width: 1rem;
       height: 2px;
-      background: #d1d5db;
+      background: var(--op-color-border);
     }
 
     .breakdown-row:nth-child(2) {
@@ -1953,7 +2119,7 @@ OnePayment.styles = css `
       transform: translateY(-60%);
       width: 1.5rem;
       height: 2px;
-      background: #d1d5db;
+      background: var(--op-color-border);
     }
 
     .breakdown-row:nth-child(2)::after {
@@ -1963,25 +2129,25 @@ OnePayment.styles = css `
       top: calc(60% - 0.25rem);
       border-top: 4px solid transparent;
       border-bottom: 4px solid transparent;
-      border-left: 6px solid #d1d5db;
+      border-left: 6px solid var(--op-color-border);
     }
 
     .breakdown-label {
-      font-size: 0.875rem;
+      font-size: var(--op-font-size-sm);
       font-weight: 400;
-      color: #6b7280;
+      color: var(--op-color-text-secondary);
     }
 
     .breakdown-value {
-      font-size: 0.875rem;
+      font-size: var(--op-font-size-sm);
       font-weight: 500;
-      color: #111827;
+      color: var(--op-color-text);
       text-align: right;
     }
 
     .transaction-divider {
       height: 1px;
-      background: #d1d5db;
+      background: var(--op-color-border);
       margin: 1rem 0;
     }
 
@@ -1992,21 +2158,21 @@ OnePayment.styles = css `
     }
 
     .net-label {
-      font-size: 1rem;
+      font-size: var(--op-font-size);
       font-weight: 600;
-      color: #111827;
+      color: var(--op-color-text);
     }
 
     .net-value {
       font-size: 1.25rem;
       font-weight: 700;
-      color: #111827;
+      color: var(--op-color-text);
       text-align: right;
     }
 
     /* Skeleton Loading */
     .skeleton {
-      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+      background: linear-gradient(90deg, var(--op-color-surface) 25%, var(--op-color-border) 50%, var(--op-color-surface) 75%);
       background-size: 200% 100%;
       animation: shimmer 1.5s infinite;
       border-radius: 0.25rem;
@@ -2023,9 +2189,9 @@ OnePayment.styles = css `
 
     .skeleton-transaction {
       padding: 1.25rem;
-      background: #f9fafb;
-      border: 1px solid #e5e7eb;
-      border-radius: 0.5rem;
+      background: var(--op-color-surface);
+      border: 1px solid var(--op-color-border);
+      border-radius: var(--op-border-radius);
       margin-bottom: 1rem;
     }
 
@@ -2053,7 +2219,7 @@ OnePayment.styles = css `
 
     .skeleton-divider {
       height: 1px;
-      background: #d1d5db;
+      background: var(--op-color-border);
       margin: 1rem 0;
     }
 
@@ -2074,10 +2240,10 @@ OnePayment.styles = css `
     }
 
     .skeleton-method {
-      border: 1px solid #e5e7eb;
-      border-radius: 0.5rem;
+      border: 1px solid var(--op-color-border);
+      border-radius: var(--op-border-radius);
       padding: 1rem 1.25rem;
-      background: #ffffff;
+      background: var(--op-color-background);
       margin-bottom: 1rem;
       display: flex;
       align-items: center;
@@ -2123,8 +2289,8 @@ OnePayment.styles = css `
       width: 100%;
       max-width: 500px;
       max-height: 90vh;
-      background: white;
-      border-radius: 8px;
+      background: var(--op-color-background);
+      border-radius: var(--op-border-radius);
       overflow-y: auto;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     }
@@ -2160,10 +2326,10 @@ OnePayment.styles = css `
     .modal-content .qr-code-section .scanned-button {
       width: 100%;
       padding: 16px 24px;
-      background: #10b981;
-      color: white;
+      background: var(--op-color-success);
+      color: var(--op-color-background);
       border: none;
-      border-radius: 8px;
+      border-radius: var(--op-border-radius);
       font-size: 18px;
       font-weight: 700;
       cursor: pointer;
@@ -2180,14 +2346,14 @@ OnePayment.styles = css `
       max-height: 85vh;
       padding: 0;
       overflow: hidden;
-      background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
+      background: linear-gradient(to bottom, var(--op-color-background) 0%, var(--op-color-surface) 100%);
     }
 
     .qr-iframe-container {
       flex: 1;
       width: 100%;
       overflow: hidden;
-      background: white;
+      background: var(--op-color-background);
       position: relative;
     }
 
@@ -2195,13 +2361,13 @@ OnePayment.styles = css `
       width: 100%;
       height: 100%;
       border: none;
-      background: white;
+      background: var(--op-color-background);
     }
 
     .qr-button-container {
       padding: 2rem 2.5rem;
-      background: linear-gradient(to top, #ffffff 0%, #fafbfc 100%);
-      border-top: 1px solid rgba(0, 0, 0, 0.08);
+      background: linear-gradient(to top, var(--op-color-background) 0%, var(--op-color-surface) 100%);
+      border-top: 1px solid var(--op-color-border);
       display: flex;
       flex-direction: column;
       gap: 1rem;
@@ -2227,7 +2393,7 @@ OnePayment.styles = css `
     }
 
     .qr-button-hint {
-      color: #6b7280;
+      color: var(--op-color-text-secondary);
       font-size: 14px;
       font-weight: 500;
       text-align: center;
@@ -2240,8 +2406,8 @@ OnePayment.styles = css `
       width: 100%;
       max-width: 420px;
       padding: 20px 40px;
-      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-      color: white;
+      background: var(--op-color-success);
+      color: #ffffff;
       border: none;
       border-radius: 16px;
       font-size: 17px;
@@ -2274,7 +2440,8 @@ OnePayment.styles = css `
     }
 
     .qr-button-container .scanned-button:hover {
-      background: linear-gradient(135deg, #059669 0%, #047857 100%);
+      background: var(--op-color-success);
+      filter: brightness(0.9);
       transform: translateY(-3px);
       box-shadow:
         0 12px 32px rgba(16, 185, 129, 0.45),
@@ -2309,15 +2476,15 @@ OnePayment.styles = css `
       height: 450px;
       border-radius: 8px;
       overflow: hidden;
-      background: white;
-      border: 1px solid #e5e7eb;
+      background: var(--op-color-background);
+      border: 1px solid var(--op-color-border);
     }
 
     .qr-iframe-inline {
       width: 100%;
       height: 100%;
       border: none;
-      background: white;
+      background: var(--op-color-background);
     }
 
     .radio:disabled {
@@ -2331,7 +2498,7 @@ OnePayment.styles = css `
     }
 
     .method-header.disabled:hover {
-      background-color: #ffffff;
+      background-color: var(--op-color-background);
     }
 
     /* Tooltip for disabled payment methods */
@@ -2347,8 +2514,8 @@ OnePayment.styles = css `
       transform: translateX(-50%);
       margin-top: 0.5rem;
       padding: 0.5rem 0.75rem;
-      background: #1f2937;
-      color: white;
+      background: var(--op-color-text);
+      color: var(--op-color-background);
       font-size: 0.875rem;
       line-height: 1.25rem;
       border-radius: 0.375rem;
@@ -2366,7 +2533,7 @@ OnePayment.styles = css `
       transform: translateX(-50%);
       margin-top: 0.25rem;
       border: 5px solid transparent;
-      border-bottom-color: #1f2937;
+      border-bottom-color: var(--op-color-text);
       z-index: 1001;
     }
 
@@ -2414,6 +2581,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OnePayment.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: Object })
+], OnePayment.prototype, "appearance", void 0);
 __decorate([
     state()
 ], OnePayment.prototype, "currentState", void 0);