From 1660c185dd33151d640d0f007c40e1383e9933e1 Mon Sep 17 00:00:00 2001
From: magdev <magdev3.0@gmail.com>
Date: Wed, 21 Jan 2026 22:36:18 +0100
Subject: [PATCH] Use WordPress Global Styles CSS custom properties

Frontend CSS now inherits theme design settings automatically:
- Colors: --wp--preset--color--base, --wp--preset--color--contrast, etc.
- Typography: --wp--preset--font-family--body, --wp--preset--font-size--*
- Spacing: --wp--preset--spacing--20/30/40

All values have sensible fallbacks for non-block themes.
Status badges use color-mix() to blend with theme colors.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 assets/css/frontend.css | 172 ++++++++++++++++++++++++----------------
 1 file changed, 102 insertions(+), 70 deletions(-)

diff --git a/assets/css/frontend.css b/assets/css/frontend.css
index 6a03c97..5c4dee3 100644
--- a/assets/css/frontend.css
+++ b/assets/css/frontend.css
@@ -1,29 +1,43 @@
 /**
  * WC Licensed Product - Frontend Styles
- * Designed to match Twenty Twenty-Five theme
+ * Uses WordPress Global Styles CSS Custom Properties
  *
  * @package Jeremias\WcLicensedProduct
  */
 
 /* ========================================
-   CSS Custom Properties (matching theme.json)
+   CSS Custom Properties
+   Uses WordPress theme.json global styles with fallbacks
    ======================================== */
 .woocommerce-licenses,
-.wclp-modal {
-    --wclp-color-base: #FFFFFF;
-    --wclp-color-contrast: #111111;
-    --wclp-color-accent-4: #686868;
-    --wclp-color-accent-5: #FBFAF3;
-    --wclp-color-accent-6: color-mix(in srgb, currentColor 20%, transparent);
-    --wclp-font-family: inherit;
-    --wclp-font-family-mono: "Fira Code", monospace;
-    --wclp-font-size-small: 0.875rem;
-    --wclp-font-size-medium: 1rem;
-    --wclp-spacing-20: 10px;
-    --wclp-spacing-30: 20px;
-    --wclp-spacing-40: 30px;
+.wclp-modal,
+#licensed-product-domain-field {
+    /* Colors - inherit from WordPress global styles */
+    --wclp-color-base: var(--wp--preset--color--base, #FFFFFF);
+    --wclp-color-contrast: var(--wp--preset--color--contrast, #111111);
+    --wclp-color-accent-4: var(--wp--preset--color--accent-4, #686868);
+    --wclp-color-accent-5: var(--wp--preset--color--accent-5, #f5f5f5);
+    --wclp-color-accent-6: var(--wp--preset--color--accent-6, rgba(0, 0, 0, 0.1));
+
+    /* Typography - inherit from WordPress global styles */
+    --wclp-font-family: var(--wp--preset--font-family--body, inherit);
+    --wclp-font-family-mono: var(--wp--preset--font-family--monospace, "Fira Code", Consolas, Monaco, monospace);
+    --wclp-font-size-small: var(--wp--preset--font-size--small, 0.875rem);
+    --wclp-font-size-medium: var(--wp--preset--font-size--medium, 1rem);
+
+    /* Spacing - inherit from WordPress global styles */
+    --wclp-spacing-20: var(--wp--preset--spacing--20, 10px);
+    --wclp-spacing-30: var(--wp--preset--spacing--30, 20px);
+    --wclp-spacing-40: var(--wp--preset--spacing--40, 30px);
+
+    /* Border radius */
     --wclp-border-radius: 0.25rem;
     --wclp-border-radius-pill: 3.125rem;
+
+    /* Derived colors using color-mix for transparency */
+    --wclp-border-color: color-mix(in srgb, var(--wclp-color-contrast) 15%, transparent);
+    --wclp-border-color-hover: color-mix(in srgb, var(--wclp-color-contrast) 30%, transparent);
+    --wclp-bg-subtle: color-mix(in srgb, var(--wclp-color-contrast) 3%, var(--wclp-color-base));
 }
 
 /* ========================================
@@ -43,22 +57,22 @@
 }
 
 .license-status-active {
-    background-color: #e8f5e9;
-    color: #2e7d32;
+    background-color: color-mix(in srgb, green 15%, var(--wclp-color-base));
+    color: color-mix(in srgb, green 70%, var(--wclp-color-contrast));
 }
 
 .license-status-inactive {
-    background-color: #fff8e1;
-    color: #f57f17;
+    background-color: color-mix(in srgb, orange 15%, var(--wclp-color-base));
+    color: color-mix(in srgb, orange 80%, var(--wclp-color-contrast));
 }
 
 .license-status-expired {
-    background-color: #ffebee;
-    color: #c62828;
+    background-color: color-mix(in srgb, red 15%, var(--wclp-color-base));
+    color: color-mix(in srgb, red 70%, var(--wclp-color-contrast));
 }
 
 .license-status-revoked {
-    background-color: var(--wclp-color-accent-5);
+    background-color: var(--wclp-bg-subtle);
     color: var(--wclp-color-accent-4);
 }
 
@@ -69,6 +83,8 @@
     display: flex;
     flex-direction: column;
     gap: var(--wclp-spacing-40);
+    font-family: var(--wclp-font-family);
+    color: var(--wclp-color-contrast);
 }
 
 .woocommerce-licenses > p:first-child:last-child {
@@ -80,7 +96,7 @@
    License Card
    ======================================== */
 .license-card {
-    border: 1px solid var(--wclp-color-accent-6);
+    border: 1px solid var(--wclp-border-color);
     border-radius: var(--wclp-border-radius);
     overflow: hidden;
     background: var(--wclp-color-base);
@@ -88,7 +104,7 @@
 }
 
 .license-card:hover {
-    border-color: color-mix(in srgb, currentColor 40%, transparent);
+    border-color: var(--wclp-border-color-hover);
 }
 
 /* License Header */
@@ -97,8 +113,8 @@
     justify-content: space-between;
     align-items: center;
     padding: var(--wclp-spacing-30);
-    background: var(--wclp-color-accent-5);
-    border-bottom: 1px solid var(--wclp-color-accent-6);
+    background: var(--wclp-bg-subtle);
+    border-bottom: 1px solid var(--wclp-border-color);
     gap: 1rem;
 }
 
@@ -107,6 +123,7 @@
     font-size: var(--wclp-font-size-medium);
     font-weight: 500;
     letter-spacing: -0.1px;
+    color: var(--wclp-color-contrast);
 }
 
 .license-header h3 a {
@@ -121,6 +138,7 @@
 /* License Details */
 .license-details {
     padding: var(--wclp-spacing-30);
+    background: var(--wclp-color-base);
 }
 
 /* License Key Row */
@@ -141,14 +159,14 @@
 .license-key-row code,
 .license-key {
     font-family: var(--wclp-font-family-mono);
-    background-color: var(--wclp-color-accent-5);
+    background-color: var(--wclp-bg-subtle);
     padding: 0.5em 1em;
     border-radius: var(--wclp-border-radius);
     font-size: var(--wclp-font-size-small);
     font-weight: 400;
     letter-spacing: 0.05em;
     color: var(--wclp-color-contrast);
-    border: 1px solid var(--wclp-color-accent-6);
+    border: 1px solid var(--wclp-border-color);
 }
 
 /* Copy Button */
@@ -160,7 +178,7 @@
     height: 36px;
     padding: 0;
     background: var(--wclp-color-base);
-    border: 1px solid var(--wclp-color-accent-6);
+    border: 1px solid var(--wclp-border-color);
     border-radius: var(--wclp-border-radius);
     cursor: pointer;
     transition: all 0.2s ease;
@@ -168,8 +186,8 @@
 }
 
 .copy-license-btn:hover {
-    background: var(--wclp-color-accent-5);
-    border-color: color-mix(in srgb, currentColor 40%, transparent);
+    background: var(--wclp-bg-subtle);
+    border-color: var(--wclp-border-color-hover);
     color: var(--wclp-color-contrast);
 }
 
@@ -185,22 +203,22 @@
     padding: 0.35em 0.75em;
     font-size: var(--wclp-font-size-small);
     border-radius: var(--wclp-border-radius-pill);
-    animation: fadeIn 0.2s ease;
+    animation: wclpFadeIn 0.2s ease;
 }
 
-@keyframes fadeIn {
+@keyframes wclpFadeIn {
     from { opacity: 0; transform: translateY(-5px); }
     to { opacity: 1; transform: translateY(0); }
 }
 
 .copy-feedback.success {
-    background: #e8f5e9;
-    color: #2e7d32;
+    background: color-mix(in srgb, green 15%, var(--wclp-color-base));
+    color: color-mix(in srgb, green 70%, var(--wclp-color-contrast));
 }
 
 .copy-feedback.error {
-    background: #ffebee;
-    color: #c62828;
+    background: color-mix(in srgb, red 15%, var(--wclp-color-base));
+    color: color-mix(in srgb, red 70%, var(--wclp-color-contrast));
 }
 
 /* License Info Row */
@@ -238,7 +256,7 @@
     gap: 0.35em;
     padding: 0.4em 0.8em;
     background: var(--wclp-color-base);
-    border: 1px solid var(--wclp-color-accent-6);
+    border: 1px solid var(--wclp-border-color);
     border-radius: var(--wclp-border-radius-pill);
     font-size: var(--wclp-font-size-small);
     font-weight: 500;
@@ -248,8 +266,8 @@
 }
 
 .wclp-transfer-btn:hover {
-    background: var(--wclp-color-accent-5);
-    border-color: color-mix(in srgb, currentColor 40%, transparent);
+    background: var(--wclp-bg-subtle);
+    border-color: var(--wclp-border-color-hover);
     color: var(--wclp-color-contrast);
 }
 
@@ -264,8 +282,8 @@
    ======================================== */
 .license-downloads {
     padding: var(--wclp-spacing-30);
-    background: var(--wclp-color-accent-5);
-    border-top: 1px solid var(--wclp-color-accent-6);
+    background: var(--wclp-bg-subtle);
+    border-top: 1px solid var(--wclp-border-color);
 }
 
 .license-downloads h4 {
@@ -288,7 +306,7 @@
     align-items: center;
     gap: 1rem;
     padding: 0.75rem 0;
-    border-bottom: 1px solid var(--wclp-color-accent-6);
+    border-bottom: 1px solid var(--wclp-border-color);
 }
 
 .download-list li:last-child {
@@ -308,7 +326,7 @@
     text-decoration: none;
     font-weight: 500;
     font-size: var(--wclp-font-size-medium);
-    transition: color 0.2s ease;
+    transition: opacity 0.2s ease;
 }
 
 .download-link:hover {
@@ -329,7 +347,7 @@
     font-size: var(--wclp-font-size-small);
     font-family: var(--wclp-font-family-mono);
     color: var(--wclp-color-accent-4);
-    border: 1px solid var(--wclp-color-accent-6);
+    border: 1px solid var(--wclp-border-color);
 }
 
 .download-date {
@@ -344,8 +362,8 @@
 #licensed-product-domain-field {
     margin-top: var(--wclp-spacing-40);
     padding: var(--wclp-spacing-30);
-    background-color: var(--wclp-color-accent-5);
-    border: 1px solid var(--wclp-color-accent-6);
+    background-color: var(--wclp-bg-subtle);
+    border: 1px solid var(--wclp-border-color);
     border-radius: var(--wclp-border-radius);
 }
 
@@ -354,6 +372,7 @@
     margin-bottom: var(--wclp-spacing-20);
     font-size: var(--wclp-font-size-medium);
     font-weight: 500;
+    color: var(--wclp-color-contrast);
 }
 
 #licensed-product-domain-field .description {
@@ -365,9 +384,12 @@
 
 #licensed-product-domain-field input[type="text"] {
     border-radius: var(--wclp-border-radius);
-    border-color: var(--wclp-color-accent-6);
+    border: 1px solid var(--wclp-border-color);
     padding: 0.75em 1em;
     font-size: var(--wclp-font-size-medium);
+    font-family: var(--wclp-font-family);
+    background: var(--wclp-color-base);
+    color: var(--wclp-color-contrast);
 }
 
 #licensed-product-domain-field input[type="text"]:focus {
@@ -384,18 +406,20 @@
     border-collapse: collapse;
     margin-bottom: 1em;
     font-size: var(--wclp-font-size-medium);
+    font-family: var(--wclp-font-family);
+    color: var(--wclp-color-contrast);
 }
 
 .woocommerce-licenses-table th,
 .woocommerce-licenses-table td {
     padding: 0.75em;
     text-align: left;
-    border-bottom: 1px solid var(--wclp-color-accent-6);
+    border-bottom: 1px solid var(--wclp-border-color);
 }
 
 .woocommerce-licenses-table th {
     font-weight: 500;
-    background-color: var(--wclp-color-accent-5);
+    background-color: var(--wclp-bg-subtle);
     font-size: var(--wclp-font-size-small);
     text-transform: uppercase;
     letter-spacing: 0.5px;
@@ -403,7 +427,7 @@
 
 .woocommerce-licenses-table code {
     font-family: var(--wclp-font-family-mono);
-    background-color: var(--wclp-color-accent-5);
+    background-color: var(--wclp-bg-subtle);
     padding: 0.3em 0.6em;
     border-radius: var(--wclp-border-radius);
     font-size: var(--wclp-font-size-small);
@@ -456,7 +480,7 @@
     }
 
     .woocommerce-licenses-table tr {
-        border: 1px solid var(--wclp-color-accent-6);
+        border: 1px solid var(--wclp-border-color);
         margin-bottom: 1em;
         border-radius: var(--wclp-border-radius);
         overflow: hidden;
@@ -466,7 +490,7 @@
         border: none;
         position: relative;
         padding-left: 50%;
-        border-bottom: 1px solid var(--wclp-color-accent-6);
+        border-bottom: 1px solid var(--wclp-border-color);
     }
 
     .woocommerce-licenses-table td:last-child {
@@ -505,6 +529,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    font-family: var(--wclp-font-family);
 }
 
 .wclp-modal-overlay {
@@ -513,7 +538,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.4);
+    background: color-mix(in srgb, var(--wclp-color-contrast) 40%, transparent);
     backdrop-filter: blur(2px);
 }
 
@@ -526,7 +551,8 @@
     width: 90%;
     max-height: 90vh;
     overflow-y: auto;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 10px 40px color-mix(in srgb, var(--wclp-color-contrast) 20%, transparent);
+    color: var(--wclp-color-contrast);
 }
 
 .wclp-modal-close {
@@ -546,7 +572,7 @@
 
 .wclp-modal-close:hover {
     color: var(--wclp-color-contrast);
-    background: var(--wclp-color-accent-5);
+    background: var(--wclp-bg-subtle);
 }
 
 .wclp-modal-content h3 {
@@ -554,6 +580,7 @@
     font-size: 1.25rem;
     font-weight: 500;
     letter-spacing: -0.1px;
+    color: var(--wclp-color-contrast);
 }
 
 /* Form Styles */
@@ -572,10 +599,12 @@
 .wclp-form-row input[type="text"] {
     width: 100%;
     padding: 0.875em 1em;
-    border: 1px solid var(--wclp-color-accent-6);
+    border: 1px solid var(--wclp-border-color);
     border-radius: var(--wclp-border-radius);
     font-size: var(--wclp-font-size-medium);
-    font-family: inherit;
+    font-family: var(--wclp-font-family);
+    background: var(--wclp-color-base);
+    color: var(--wclp-color-contrast);
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
@@ -591,12 +620,13 @@
 
 .wclp-current-domain code {
     font-family: var(--wclp-font-family-mono);
-    background: var(--wclp-color-accent-5);
+    background: var(--wclp-bg-subtle);
     padding: 0.5em 1em;
     border-radius: var(--wclp-border-radius);
     font-size: var(--wclp-font-size-medium);
-    border: 1px solid var(--wclp-color-accent-6);
+    border: 1px solid var(--wclp-border-color);
     display: inline-block;
+    color: var(--wclp-color-contrast);
 }
 
 .wclp-field-description {
@@ -612,7 +642,7 @@
     margin-top: var(--wclp-spacing-40);
 }
 
-/* Primary Button - matches theme button style */
+/* Primary Button - uses theme contrast color */
 .wclp-btn-primary {
     background: var(--wclp-color-contrast) !important;
     border: none !important;
@@ -621,12 +651,13 @@
     border-radius: var(--wclp-border-radius) !important;
     font-size: var(--wclp-font-size-medium) !important;
     font-weight: 500 !important;
+    font-family: var(--wclp-font-family) !important;
     cursor: pointer;
-    transition: background 0.2s ease;
+    transition: opacity 0.2s ease;
 }
 
 .wclp-btn-primary:hover {
-    background: color-mix(in srgb, var(--wclp-color-contrast) 85%, transparent) !important;
+    opacity: 0.85;
 }
 
 .wclp-btn-primary:disabled {
@@ -637,18 +668,19 @@
 /* Secondary/Cancel Button - outline style */
 .wclp-modal-cancel {
     background: transparent !important;
-    border: 1px solid currentColor !important;
+    border: 1px solid var(--wclp-border-color-hover) !important;
     color: var(--wclp-color-contrast) !important;
     padding: calc(1rem - 1px) calc(2.25rem - 1px) !important;
     border-radius: var(--wclp-border-radius) !important;
     font-size: var(--wclp-font-size-medium) !important;
     font-weight: 500 !important;
+    font-family: var(--wclp-font-family) !important;
     cursor: pointer;
     transition: background 0.2s ease;
 }
 
 .wclp-modal-cancel:hover {
-    background: var(--wclp-color-accent-5) !important;
+    background: var(--wclp-bg-subtle) !important;
 }
 
 /* Message Styles */
@@ -657,15 +689,15 @@
     padding: 1em 1.25em;
     border-radius: var(--wclp-border-radius);
     font-size: var(--wclp-font-size-small);
-    animation: fadeIn 0.3s ease;
+    animation: wclpFadeIn 0.3s ease;
 }
 
 .wclp-message.success {
-    background: #e8f5e9;
-    color: #2e7d32;
+    background: color-mix(in srgb, green 15%, var(--wclp-color-base));
+    color: color-mix(in srgb, green 70%, var(--wclp-color-contrast));
 }
 
 .wclp-message.error {
-    background: #ffebee;
-    color: #c62828;
+    background: color-mix(in srgb, red 15%, var(--wclp-color-base));
+    color: color-mix(in srgb, red 70%, var(--wclp-color-contrast));
 }