@rtsee/ngx 0.0.103 → 0.0.104

package/dist/ngx/src/lib/theme/messenger/payment-product-snippet.scss

@@ -1,97 +1,92 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Payment Product Snippet (Glass Card)
+// ═══════════════════════════════════════════════════════════════════
 @import "./variables";
-@import "../common-variables";
 
-/* ═══════════════════════════════════════════════════════════════
-   PAYMENT PRODUCT SNIPPET — Glass Card Design
-   Uses CSS custom properties set by parent .rtsee-payment-page
-   ═══════════════════════════════════════════════════════════════ */
-
-.rtsee-payment-product-snippet {
+.rts-payment-product-snippet {
 
   /* ── PRODUCT CARD ─────────────────────────────────────────── */
 
-  .rtsee-payment-product-card {
+  .rts-payment-product-card {
     background: linear-gradient(
       135deg,
-      var(--pay-card-bg-start) 0%,
-      var(--pay-card-bg-end) 100%
+      var(--rts-card-bg-start) 0%,
+      var(--rts-card-bg-end) 100%
     );
-    border: 1px solid var(--pay-border-dim);
-    border-radius: 16px;
-    backdrop-filter: blur(12px);
-    padding: $rts-offset-md + $rts-offset-sm;
-    transition:
-      transform 0.3s ease,
-      border-color 0.3s ease,
-      box-shadow 0.3s ease;
+    border: 1px solid var(--rts-border-dim);
+    border-radius: $rtsu-radius-lg;
+    backdrop-filter: $rtsu-glass-blur;
+    padding: $rtsu-space-md + $rtsu-space-sm;
+    transition: transform $rtsu-transition-base,
+                border-color $rtsu-transition-base,
+                box-shadow $rtsu-transition-base;
 
     &:hover {
-      border-color: rgba($rts-rates-accent-purple, 0.2);
-      box-shadow: 0 6px 24px var(--pay-shadow-accent);
+      border-color: rgba(108, 92, 231, 0.2);
+      box-shadow: $rtsu-shadow-accent-md;
     }
   }
 
   /* ── PRODUCT INFO ─────────────────────────────────────────── */
 
-  .rtsee-payment-product-header {
+  .rts-payment-product-header {
     font-size: 1.3rem;
-    font-weight: 700;
-    color: var(--pay-text-primary);
-    margin: 0 0 $rts-offset-sm;
+    font-weight: $rtsu-font-weight-bold;
+    color: var(--rts-text-primary);
+    margin: 0 0 $rtsu-space-sm;
     letter-spacing: -0.01em;
   }
 
-  .rtsee-payment-product-description {
+  .rts-payment-product-description {
     font-size: 0.9rem;
-    line-height: 1.6;
-    color: var(--pay-text-secondary);
-    margin: 0 0 $rts-offset-md;
+    line-height: $rtsu-line-height-relaxed;
+    color: var(--rts-text-secondary);
+    margin: 0 0 $rtsu-space-md;
   }
 
   /* ── PRICES GRID ──────────────────────────────────────────── */
 
-  .rtsee-payment-product-prices {
+  .rts-payment-product-prices {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: $rts-offset-sm;
+    gap: $rtsu-space-sm;
   }
 
   /* ── PRICE CARD ───────────────────────────────────────────── */
 
-  .rtsee-payment-price-card {
+  .rts-payment-price-card {
     background: linear-gradient(
       145deg,
-      var(--pay-card-bg-start) 0%,
-      var(--pay-card-bg-end) 100%
+      var(--rts-card-bg-start) 0%,
+      var(--rts-card-bg-end) 100%
     );
-    border: 1px solid var(--pay-border-med);
-    border-radius: 12px;
-    padding: $rts-offset-sm + $rts-offset-xsm;
+    border: 1px solid var(--rts-border-med);
+    border-radius: $rtsu-radius-md;
+    padding: $rtsu-space-sm + $rtsu-space-xs;
     display: flex;
     flex-direction: column;
-    gap: $rts-offset-sm;
-    transition:
-      transform 0.25s ease,
-      border-color 0.25s ease,
-      box-shadow 0.25s ease;
+    gap: $rtsu-space-sm;
+    transition: transform $rtsu-transition-base,
+                border-color $rtsu-transition-base,
+                box-shadow $rtsu-transition-base;
 
     &:hover {
       transform: translateY(-2px);
-      border-color: rgba($rts-rates-accent-purple, 0.35);
-      box-shadow: 0 4px 16px var(--pay-shadow-accent);
+      border-color: rgba(108, 92, 231, 0.35);
+      box-shadow: $rtsu-shadow-accent-md;
     }
 
-    .rtsee-payment-price-label {
+    .rts-payment-price-label {
       font-size: 0.95rem;
-      font-weight: 600;
-      color: var(--pay-text-primary);
+      font-weight: $rtsu-font-weight-semibold;
+      color: var(--rts-text-primary);
       margin: 0;
     }
 
-    .rtsee-payment-price-description {
+    .rts-payment-price-description {
       font-size: 0.8rem;
-      line-height: 1.5;
-      color: var(--pay-text-muted);
+      line-height: $rtsu-line-height-normal;
+      color: var(--rts-text-muted);
       margin: 0;
       flex: 1;
     }
@@ -99,26 +94,25 @@
 
   /* ── SELECT PLAN BUTTON ───────────────────────────────────── */
 
-  .rtsee-payment-select-plan-btn {
+  .rts-payment-select-plan-btn {
     width: 100%;
     padding: 10px 16px;
     border: none;
-    border-radius: 10px;
-    font-family: "Work Sans", "Inter", sans-serif;
+    border-radius: $rtsu-radius-sm + 2px;
+    font-family: $rtsu-font-family;
     font-size: 0.82rem;
-    font-weight: 700;
-    letter-spacing: 0.02em;
+    font-weight: $rtsu-font-weight-bold;
+    letter-spacing: $rtsu-tracking-wide;
     cursor: pointer;
     color: #fff;
     background: linear-gradient(
       135deg,
-      $rts-rates-accent-purple 0%,
-      $rts-rates-accent-purple-light 100%
+      $rtsu-accent-purple 0%,
+      $rtsu-accent-purple-light 100%
     );
-    box-shadow: 0 3px 14px var(--pay-shadow-accent);
-    transition:
-      transform 0.25s ease,
-      box-shadow 0.25s ease;
+    box-shadow: $rtsu-shadow-accent-md;
+    transition: transform $rtsu-transition-base,
+                box-shadow $rtsu-transition-base;
     position: relative;
     overflow: hidden;
 
@@ -132,26 +126,17 @@
         rgba(255, 255, 255, 0.15) 50%,
         transparent 60%
       );
-      animation: rtseePayBtnShimmer 3s ease-in-out infinite;
+      animation: rts-shimmer 3s ease-in-out infinite;
     }
 
     &:hover {
       transform: translateY(-2px);
-      box-shadow: 0 6px 20px var(--pay-shadow-hover);
+      box-shadow: $rtsu-shadow-accent-lg;
     }
 
     &:active {
       transform: translateY(0);
-      box-shadow: 0 3px 12px var(--pay-shadow-accent);
-    }
-  }
-
-  @keyframes rtseePayBtnShimmer {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(100%);
+      box-shadow: $rtsu-shadow-accent-sm;
     }
   }
 }

package/dist/ngx/src/lib/theme/messenger/payments.scss

@@ -1,146 +1,72 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Payments Page
+// ═══════════════════════════════════════════════════════════════════
 @import "./variables";
-@import "../common-variables";
 
-/* ═══════════════════════════════════════════════════════════════
-   PAYMENT PAGE — Dual-Theme Design System
-   ═══════════════════════════════════════════════════════════════ */
-
-.rtsee-payment-page {
-  padding: $rts-offset-md;
-  font-family: "Work Sans", "Inter", sans-serif;
+.rts-payment-page {
+  padding: $rtsu-space-md;
+  font-family: $rtsu-font-family;
   min-height: 100%;
-
-  /* ── THEME: DARK ──────────────────────────────────────────── */
-
-  &.rtsee-payment-theme-dark {
-    --pay-bg: #{$rts-rates-bg-main};
-    --pay-text-primary: #{$rts-rates-text-primary};
-    --pay-text-secondary: #{$rts-rates-text-secondary};
-    --pay-text-muted: #{$rts-rates-text-muted};
-    --pay-card-bg-start: #{$rts-rates-bg-card-start};
-    --pay-card-bg-end: #{$rts-rates-bg-card-end};
-    --pay-border-dim: #{$rts-rates-border-dim};
-    --pay-border-med: #{$rts-rates-border-med};
-    --pay-border-bright: #{$rts-rates-border-bright};
-    --pay-accent: #{$rts-rates-accent-purple};
-    --pay-accent-light: #{$rts-rates-accent-purple-light};
-    --pay-hover-bg: rgba(255, 255, 255, 0.05);
-    --pay-shadow-accent: #{rgba($rts-rates-accent-purple, 0.3)};
-    --pay-shadow-hover: #{rgba($rts-rates-accent-purple, 0.45)};
-    --pay-cancel-bg: #{$rts-rates-danger-bg};
-    --pay-cancel-border: #{$rts-rates-danger-border};
-    --pay-cancel-color: #{$rts-rates-danger};
-    --pay-cancel-hover-bg: #{$rts-rates-danger-hover-bg};
-    --pay-cancel-hover-border: #{$rts-rates-danger-hover-border};
-    --pay-spinner-track: rgba(255, 255, 255, 0.08);
-
-    background-color: var(--pay-bg);
-    color: var(--pay-text-primary);
-  }
-
-  /* ── THEME: LIGHT ─────────────────────────────────────────── */
-
-  &.rtsee-payment-theme-light {
-    --pay-bg: #f8f9fa;
-    --pay-text-primary: #1a1a2e;
-    --pay-text-secondary: #555570;
-    --pay-text-muted: #8888a0;
-    --pay-card-bg-start: rgba(255, 255, 255, 0.95);
-    --pay-card-bg-end: rgba(248, 248, 255, 0.98);
-    --pay-border-dim: rgba(0, 0, 0, 0.06);
-    --pay-border-med: rgba(0, 0, 0, 0.1);
-    --pay-border-bright: rgba(0, 0, 0, 0.15);
-    --pay-accent: #{$rts-rates-accent-purple};
-    --pay-accent-light: #{$rts-rates-accent-purple-light};
-    --pay-hover-bg: rgba(0, 0, 0, 0.03);
-    --pay-shadow-accent: #{rgba($rts-rates-accent-purple, 0.2)};
-    --pay-shadow-hover: #{rgba($rts-rates-accent-purple, 0.3)};
-    --pay-cancel-bg: rgba(0, 0, 0, 0.04);
-    --pay-cancel-border: rgba(0, 0, 0, 0.12);
-    --pay-cancel-color: #666;
-    --pay-cancel-hover-bg: rgba(0, 0, 0, 0.08);
-    --pay-cancel-hover-border: rgba(0, 0, 0, 0.2);
-    --pay-spinner-track: rgba(0, 0, 0, 0.06);
-
-    background-color: var(--pay-bg);
-    color: var(--pay-text-primary);
-  }
+  background-color: var(--rts-bg-primary);
+  color: var(--rts-text-primary);
 
   /* ── PRODUCTS GRID ────────────────────────────────────────── */
 
-  .rtsee-payment-page-products {
+  .rts-payment-page-products {
     display: flex;
     flex-direction: column;
-    gap: $rts-offset-md;
-    animation: rtseePayFadeUp 0.6s ease-out both;
-  }
-
-  @keyframes rtseePayFadeUp {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+    gap: $rtsu-space-md;
+    animation: rts-fade-up 0.6s ease-out both;
   }
 
   /* ── CUSTOM SPINNER ───────────────────────────────────────── */
 
-  .rtsee-payment-spinner {
+  .rts-payment-spinner {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: $rts-offset-xl 0;
+    padding: $rtsu-space-xl 0;
 
-    .rtsee-payment-spinner-ring {
+    .rts-payment-spinner-ring {
       width: 40px;
       height: 40px;
       border-radius: 50%;
-      border: 3px solid var(--pay-spinner-track);
-      border-top-color: var(--pay-accent);
-      animation: rtseePaySpin 0.8s linear infinite;
-    }
-  }
-
-  @keyframes rtseePaySpin {
-    to {
-      transform: rotate(360deg);
+      border: 3px solid var(--rts-border-med);
+      border-top-color: var(--rts-accent, #6c5ce7);
+      animation: rts-spin 0.8s linear infinite;
     }
   }
 
   /* ── STRIPE CHECKOUT CONTAINER ────────────────────────────── */
 
   .stripe-checkout-container {
-    border-radius: 12px;
+    border-radius: $rtsu-radius-md;
     overflow: hidden;
   }
 
   /* ── FOOTER ───────────────────────────────────────────────── */
 
-  .rtsee-payment-page-footer {
-    padding: $rts-offset-md 0 $rts-offset-sm;
+  .rts-payment-page-footer {
+    padding: $rtsu-space-md 0 $rtsu-space-sm;
 
-    .rtsee-payment-cancel-btn {
+    .rts-payment-cancel-btn {
       width: 100%;
       padding: 10px 20px;
-      border-radius: 10px;
+      border-radius: $rtsu-radius-sm + 2px;
       font-family: inherit;
       font-size: 0.88rem;
-      font-weight: 600;
+      font-weight: $rtsu-font-weight-semibold;
       cursor: pointer;
-      background: var(--pay-cancel-bg);
-      border: 1px solid var(--pay-cancel-border);
-      color: var(--pay-cancel-color);
-      transition:
-        background 0.2s ease,
-        border-color 0.2s ease,
-        transform 0.2s ease;
+      background: var(--rts-danger-bg);
+      border: 1px solid var(--rts-danger-border);
+      color: var(--rts-text-secondary);
+      transition: background $rtsu-transition-fast,
+                  border-color $rtsu-transition-fast,
+                  transform $rtsu-transition-fast;
 
       &:hover {
-        background: var(--pay-cancel-hover-bg);
-        border-color: var(--pay-cancel-hover-border);
+        background: rgba(0, 0, 0, 0.08);
+        border-color: var(--rts-border-bright);
         transform: translateY(-1px);
       }