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
* 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));
}