magdev/wc-licensed-product
1
Fork 0
Code Issues Pull Requests Actions Releases 4 Activity

Use WordPress Global Styles CSS custom properties

Browse Source 
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>
This commit is contained in:
Marco Grätsch
2026-01-21 22:36:18 +01:00
parent 1ad29120e9
commit 1660c185dd
1 changed files with 102 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
assets/css/frontend.css
View File

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