/** * _Theme Colors * * @package SmartCycleDiscounts * @subpackage SmartCycleDiscounts/resources/assets/css/shared/_theme-colors.css * @author Webstepper.io * @copyright 2025 Webstepper.io * @license GPL-3.0-or-later https://www.gnu.org/licenses/gpl-3.0.html * @link https://webstepper.io/wordpress/plugins/smart-cycle-discounts/ * @since 1.0.0 */ /* Global theme color properties. -- IMPORTANT: any custom property whose value contains `var(--wp-admin-theme-color)` must be declared on `body`, NOT `:root`. Custom-property `var()` substitution happens at the DECLARING element. WordPress and WooCommerce both set `--wp-admin-theme-color` at `:root` with their own values (WC sets it to `#007cba`). The plugin sets it correctly per scheme via `body.admin-color-X` selectors — but that body-level value is only seen by substitutions that happen at body or its descendants. Declaring scheme-derived tokens at `body` makes them resolve against the per-scheme body value rather than WC's `:root` override. */ /* All scheme-derived tokens declared on body. --wsscd-color-primary is set per-scheme in admin/wordpress-color-schemes.css to match WP's classic .button-primary color. Everything else color-mixes from there. */ body { --wsscd-color-primary-light: color-mix(in srgb, var(--wsscd-color-primary) 60%, #fff); --wsscd-color-primary-dark: color-mix(in srgb, var(--wsscd-color-primary), #000 12%); --wsscd-color-primary-alpha-3: color-mix(in srgb, var(--wsscd-color-primary) 3%, transparent); --wsscd-color-primary-alpha-5: color-mix(in srgb, var(--wsscd-color-primary) 5%, transparent); --wsscd-color-primary-alpha-8: color-mix(in srgb, var(--wsscd-color-primary) 8%, transparent); --wsscd-color-primary-alpha-10: color-mix(in srgb, var(--wsscd-color-primary) 10%, transparent); --wsscd-color-primary-alpha-15: color-mix(in srgb, var(--wsscd-color-primary) 15%, transparent); --wsscd-color-primary-alpha-20: color-mix(in srgb, var(--wsscd-color-primary) 20%, transparent); --wsscd-color-primary-alpha-25: color-mix(in srgb, var(--wsscd-color-primary) 25%, transparent); --wsscd-color-primary-alpha-30: color-mix(in srgb, var(--wsscd-color-primary) 30%, transparent); --wsscd-form-focus: var(--wsscd-color-primary); --wsscd-form-focus-shadow: var(--wsscd-color-primary-alpha-25); --wsscd-form-checked-bg: var(--wsscd-color-primary); --wsscd-form-checked-border: var(--wsscd-color-primary); --wsscd-form-toggle-on: var(--wsscd-color-primary); --wsscd-table-hover: var(--wsscd-color-primary-alpha-5); --wsscd-table-selected: var(--wsscd-color-primary-alpha-10); --wsscd-color-primary-bg: var(--wsscd-color-primary-alpha-5); --wsscd-color-primary-light-bg: var(--wsscd-color-primary-alpha-8); --wsscd-color-primary-light-border: var(--wsscd-color-primary-alpha-20); } :root { --wsscd-color-secondary: #72aee6; --wsscd-color-success: #00a32a; --wsscd-color-warning: #dba617; --wsscd-color-danger: #d63638; --wsscd-color-accent: #3858e9; --wsscd-color-info: #72aee6; --wsscd-color-blue: #3B82F6; --wsscd-color-blue-light: #DBEAFE; /* NOTE: --wsscd-color-primary-alpha-* tokens live in the `body` block above (line ~33). They reference --wp-admin-theme-color-alpha-* which are also declared on body, so they only resolve correctly at body. Don't redeclare them here — duplication would mask scheme issues. */ --wsscd-color-success-alpha-5: rgba(0, 163, 42, 0.05); --wsscd-color-success-alpha-15: rgba(0, 163, 42, 0.15); --wsscd-color-success-alpha-25: rgba(0, 163, 42, 0.25); --wsscd-color-warning-alpha-15: rgba(219, 166, 23, 0.15); --wsscd-color-warning-alpha-25: rgba(219, 166, 23, 0.25); --wsscd-color-danger-alpha-15: rgba(214, 54, 56, 0.15); --wsscd-color-danger-alpha-25: rgba(214, 54, 56, 0.25); --wsscd-color-danger-alpha-30: rgba(214, 54, 56, 0.3); --wsscd-color-info-alpha-15: rgba(114, 174, 230, 0.15); --wsscd-color-info-alpha-25: rgba(114, 174, 230, 0.25); --wsscd-color-info-alpha-30: rgba(114, 174, 230, 0.3); --wsscd-color-accent-alpha-30: rgba(56, 88, 233, 0.3); --wsscd-color-gold-alpha-20: rgba(228, 196, 65, 0.2); --wsscd-color-gold-alpha-30: rgba(228, 196, 65, 0.3); --wsscd-color-text-alpha-15: rgba(100, 105, 112, 0.15); --wsscd-color-text-alpha-25: rgba(100, 105, 112, 0.25); --wsscd-color-blue-alpha-15: rgba(59, 130, 246, 0.15); /* Overlay colors (for backgrounds, borders, shadows) */ --wsscd-overlay-faint: rgba(0, 0, 0, 0.02); --wsscd-overlay-subtle: rgba(0, 0, 0, 0.05); --wsscd-overlay-border: rgba(0, 0, 0, 0.06); --wsscd-overlay-light: rgba(0, 0, 0, 0.1); --wsscd-overlay-medium: rgba(0, 0, 0, 0.3); --wsscd-overlay-heavy: rgba(0, 0, 0, 0.5); --wsscd-overlay-dark: rgba(0, 0, 0, 0.85); --wsscd-overlay-white-light: rgba(255, 255, 255, 0.4); --wsscd-overlay-white-medium: rgba(255, 255, 255, 0.6); --wsscd-overlay-white-heavy: rgba(255, 255, 255, 0.95); /* Neutral colors - WordPress defaults */ --wsscd-color-white: #fff; --wsscd-color-text: #1d2327; --wsscd-color-text-dark: #1d2327; --wsscd-color-text-light: #50575e; --wsscd-color-text-muted: #646970; --wsscd-color-text-lighter: #999; --wsscd-color-text-disabled: #8c8f94; --wsscd-color-bg-disabled: #f0f0f1; --wsscd-color-border-disabled: #c3c4c7; --wsscd-color-surface: #f6f7f7; --wsscd-color-surface-dark: #f0f0f1; --wsscd-color-surface-alt: #f0f0f1; /* Alternate surface for nested backgrounds */ --wsscd-color-border: #c3c4c7; --wsscd-color-border-dark: #b4b9be; --wsscd-color-border-light: #d0d0d0; /* Skeleton palette - three tiers: container surface < shimmer base < shimmer highlight. Light mode: placeholder blocks appear darker than their container. */ --wsscd-skeleton-surface: #eceef1; --wsscd-skeleton-base: #e0e3e7; --wsscd-skeleton-highlight: #f8f9fb; /* Semantic aliases */ --wsscd-color-dark: var(--wsscd-color-text); --wsscd-color-light: var(--wsscd-color-surface-dark); --wsscd-color-muted: var(--wsscd-color-text-muted); --wsscd-color-text-secondary: #50575e; --wsscd-color-accent-bg: rgba(56, 88, 233, 0.08); --wsscd-color-info-dark: #4a90c2; /* Color variations NOTE: --wsscd-color-primary-light / -dark live in the `body` block above. Don't redeclare here. */ --wsscd-color-secondary-light: #8ebced; --wsscd-color-secondary-dark: #5991c5; --wsscd-color-success-light: #46b450; --wsscd-color-success-dark: #008a20; --wsscd-color-warning-light: #e4c441; --wsscd-color-warning-dark: #b19313; --wsscd-color-warning-darker: #8a7210; --wsscd-color-danger-light: #dc5858; --wsscd-color-danger-dark: #a02222; --wsscd-color-danger-darker: #8b1a1a; --wsscd-color-accent-light: #5b7dff; --wsscd-color-accent-dark: #2148c0; /* Pro / Premium tier — purple family (distinct from all functional states) */ --wsscd-color-pro: #7c3aed; --wsscd-color-pro-light: #a78bfa; --wsscd-color-pro-dark: #5b21b6; --wsscd-color-pro-darker: #4c1d95; --wsscd-color-pro-alpha-8: rgba(124, 58, 237, 0.08); --wsscd-color-pro-alpha-15: rgba(124, 58, 237, 0.15); --wsscd-color-pro-alpha-25: rgba(124, 58, 237, 0.25); /* Lighter background variations (semantic aliases for alpha-15) */ --wsscd-color-success-lighter: var(--wsscd-color-success-alpha-15); --wsscd-color-warning-lighter: var(--wsscd-color-warning-alpha-15); --wsscd-color-danger-lighter: var(--wsscd-color-danger-alpha-15); --wsscd-color-info-lighter: var(--wsscd-color-info-alpha-15); /* Color-specific text and border aliases */ --wsscd-color-success-text: var(--wsscd-color-success-dark); --wsscd-color-success-border: var(--wsscd-color-success); --wsscd-color-warning-text: var(--wsscd-color-warning-dark); --wsscd-color-warning-border: var(--wsscd-color-warning); --wsscd-color-danger-text: var(--wsscd-color-danger-dark); --wsscd-color-danger-border: var(--wsscd-color-danger); /* Gray scale (WordPress standard gray values) */ --wsscd-color-gray-50: #f6f7f7; /* Lightest */ --wsscd-color-gray-100: #f0f0f1; --wsscd-color-gray-200: #dcdcde; --wsscd-color-gray-300: #c3c4c7; --wsscd-color-gray-400: #a7aaad; /* Mid-gray */ --wsscd-color-gray-500: #8c8f94; --wsscd-color-gray-600: #646970; --wsscd-color-gray-700: #50575e; --wsscd-color-gray-800: #3c434a; --wsscd-color-gray-900: #1d2327; /* Darkest */ /* Component-specific mappings */ /* Forms — semantic-only (scheme-derived form tokens live in `body` block) */ --wsscd-form-error: var(--wsscd-color-danger); --wsscd-form-success: var(--wsscd-color-success); /* Alerts/Notifications */ --wsscd-alert-info-bg: rgba(114, 174, 230, 0.1); --wsscd-alert-info-border: var(--wsscd-color-info); --wsscd-alert-info-text: var(--wsscd-color-dark); --wsscd-alert-success-bg: rgba(0, 163, 42, 0.1); --wsscd-alert-success-border: var(--wsscd-color-success); --wsscd-alert-success-text: var(--wsscd-color-dark); --wsscd-alert-warning-bg: rgba(219, 166, 23, 0.1); --wsscd-alert-warning-border: var(--wsscd-color-warning); --wsscd-alert-warning-text: var(--wsscd-color-dark); --wsscd-alert-danger-bg: rgba(214, 54, 56, 0.1); --wsscd-alert-danger-border: var(--wsscd-color-danger); --wsscd-alert-danger-text: var(--wsscd-color-dark); /* Charts */ --wsscd-chart-primary: var(--wsscd-color-primary); --wsscd-chart-secondary: var(--wsscd-color-secondary); --wsscd-chart-success: var(--wsscd-color-success); --wsscd-chart-warning: var(--wsscd-color-warning); --wsscd-chart-danger: var(--wsscd-color-danger); --wsscd-chart-series-1: var(--wsscd-color-primary); --wsscd-chart-series-2: var(--wsscd-color-accent); --wsscd-chart-series-3: var(--wsscd-color-secondary); --wsscd-chart-series-4: var(--wsscd-color-success); --wsscd-chart-series-5: var(--wsscd-color-warning); /* Badges/Status */ --wsscd-badge-active: var(--wsscd-color-success); --wsscd-badge-inactive: var(--wsscd-color-muted); --wsscd-badge-scheduled: var(--wsscd-color-info); --wsscd-badge-expired: var(--wsscd-color-danger); --wsscd-badge-draft: var(--wsscd-color-warning); /* Tables — scheme-derived hover/selected live in `body` block above */ --wsscd-table-border: var(--wsscd-color-border-lighter); /* Loading states */ --wsscd-loader-primary: var(--wsscd-color-primary); --wsscd-loader-track: var(--wsscd-color-light); /* Progress bars */ --wsscd-progress-bg: var(--wsscd-color-light); --wsscd-progress-fill: var(--wsscd-color-primary); --wsscd-progress-success: var(--wsscd-color-success); --wsscd-progress-warning: var(--wsscd-color-warning); --wsscd-progress-danger: var(--wsscd-color-danger); /* Additional colors needed by components (--wsscd-color-primary-bg lives in `body` block above) */ --wsscd-color-background-overlay: var(--wsscd-overlay-white-heavy); --wsscd-color-success-bg: rgba(0, 163, 42, 0.05); --wsscd-color-warning-bg: rgba(219, 166, 23, 0.05); --wsscd-color-error-bg: rgba(214, 54, 56, 0.05); /* WordPress standard notice backgrounds (exact WordPress colors) */ --wsscd-color-danger-bg-light: #fcf0f1; --wsscd-color-warning-bg-light: #fcf9e8; /* Additional shadow definitions */ --wsscd-shadow-success: rgba(0, 163, 42, 0.15); --wsscd-shadow-gradient-light: rgba(0, 0, 0, 0.02); /* Overlay colors */ --wsscd-color-overlay-light: rgba(255, 255, 255, 0.5); --wsscd-color-background-solid: rgba(255, 255, 255, 0.98); --wsscd-color-overlay-light-text: rgba(255, 255, 255, 0.8); /* Extended color variations (--wsscd-color-primary-light-bg / -border live in `body` block above) */ --wsscd-color-danger-light-border: rgba(214, 54, 56, 0.2); --wsscd-color-warning-light-border: rgba(219, 166, 23, 0.2); --wsscd-color-surface-light: #fafafa; --wsscd-color-info-bg: #e8f5f9; --wsscd-color-danger-dark-bg: #3d1f1f; /* Shadow definitions moved to _variables.css for centralization */ /* Gradients */ --wsscd-gradient-background: linear-gradient(135deg, var(--wsscd-color-surface) 0%, var(--wsscd-color-background) 100%); } /* ========================================================================== Dark Mode Theme ========================================================================== */ :root[data-wsscd-theme="dark"] { /* Primary colors - adjusted for dark mode */ --wsscd-color-primary: #4a9eff; --wsscd-color-secondary: #8ec5ff; --wsscd-color-success: #46d369; --wsscd-color-warning: #f4c542; --wsscd-color-danger: #ff6b6b; --wsscd-color-accent: #6b8aff; --wsscd-color-info: #8ec5ff; /* Neutral colors - inverted for dark mode */ --wsscd-color-white: #1a1d23; --wsscd-color-text: #e4e6eb; --wsscd-color-text-dark: #f0f2f5; --wsscd-color-text-light: #c8ccd4; --wsscd-color-text-muted: #a8adb8; --wsscd-color-text-lighter: #8a8f9a; --wsscd-color-text-secondary: #c8ccd4; --wsscd-color-text-disabled: #6b7280; --wsscd-color-bg-disabled: #374151; --wsscd-color-border-disabled: #4b5563; --wsscd-color-accent-bg: rgba(107, 138, 255, 0.15); --wsscd-color-info-dark: #6faee6; --wsscd-color-surface: #252832; --wsscd-color-surface-dark: #2d3139; --wsscd-color-surface-alt: #2d3139; /* Alternate surface for nested backgrounds */ --wsscd-color-border: #3e4147; --wsscd-color-border-dark: #4a4f57; --wsscd-color-border-light: #363940; /* Skeleton palette (dark mode): convention inverts - placeholder blocks appear lighter than their container (bright loading glow on dark surface). */ --wsscd-skeleton-surface: #2d3139; --wsscd-skeleton-base: #3d4149; --wsscd-skeleton-highlight: #4a5162; /* Color variations (dark mode adjusted) */ --wsscd-color-primary-light: #6bb3ff; --wsscd-color-primary-dark: #2a7fd9; --wsscd-color-secondary-light: #a3d4ff; --wsscd-color-secondary-dark: #6faee6; --wsscd-color-success-light: #6ddf88; --wsscd-color-success-dark: #2bb74a; --wsscd-color-warning-light: #f7d46f; --wsscd-color-warning-dark: #d9a825; --wsscd-color-danger-light: #ff8a8a; --wsscd-color-danger-dark: #e04e4e; --wsscd-color-accent-light: #8aa5ff; --wsscd-color-accent-dark: #4a6ed9; /* Pro / Premium tier (dark mode) */ --wsscd-color-pro: #a78bfa; --wsscd-color-pro-light: #c4b5fd; --wsscd-color-pro-dark: #7c3aed; --wsscd-color-pro-darker: #6d28d9; --wsscd-color-pro-alpha-8: rgba(167, 139, 250, 0.08); --wsscd-color-pro-alpha-15: rgba(167, 139, 250, 0.15); --wsscd-color-pro-alpha-25: rgba(167, 139, 250, 0.25); /* Alpha variations (dark mode) */ --wsscd-color-primary-alpha-3: rgba(74, 158, 255, 0.03); --wsscd-color-primary-alpha-10: rgba(74, 158, 255, 0.1); --wsscd-color-primary-alpha-15: rgba(74, 158, 255, 0.15); --wsscd-color-primary-alpha-20: rgba(74, 158, 255, 0.2); --wsscd-color-primary-alpha-25: rgba(74, 158, 255, 0.25); --wsscd-color-primary-alpha-30: rgba(74, 158, 255, 0.3); --wsscd-color-success-alpha-5: rgba(70, 211, 105, 0.05); --wsscd-color-success-alpha-15: rgba(70, 211, 105, 0.15); --wsscd-color-warning-alpha-15: rgba(244, 197, 66, 0.15); --wsscd-color-warning-alpha-25: rgba(244, 197, 66, 0.25); --wsscd-color-danger-alpha-15: rgba(255, 107, 107, 0.15); --wsscd-color-danger-alpha-25: rgba(255, 107, 107, 0.25); --wsscd-color-danger-alpha-30: rgba(255, 107, 107, 0.3); /* Overlay colors (dark mode) */ --wsscd-overlay-faint: rgba(255, 255, 255, 0.02); --wsscd-overlay-subtle: rgba(255, 255, 255, 0.05); --wsscd-overlay-border: rgba(255, 255, 255, 0.08); --wsscd-overlay-light: rgba(255, 255, 255, 0.1); --wsscd-overlay-medium: rgba(0, 0, 0, 0.4); --wsscd-overlay-heavy: rgba(0, 0, 0, 0.7); --wsscd-overlay-dark: rgba(0, 0, 0, 0.9); /* Background variations */ --wsscd-color-background: var(--wsscd-color-white); --wsscd-color-surface-light: #2a2d35; --wsscd-color-primary-bg: rgba(74, 158, 255, 0.1); --wsscd-color-success-bg: rgba(70, 211, 105, 0.1); --wsscd-color-warning-bg: rgba(244, 197, 66, 0.1); --wsscd-color-error-bg: rgba(255, 107, 107, 0.1); --wsscd-color-danger-bg-light: rgba(255, 107, 107, 0.15); --wsscd-color-warning-bg-light: rgba(244, 197, 66, 0.15); /* Lighter background variations */ --wsscd-color-success-lighter: rgba(70, 211, 105, 0.15); --wsscd-color-warning-lighter: rgba(244, 197, 66, 0.15); --wsscd-color-danger-lighter: rgba(255, 107, 107, 0.15); --wsscd-color-info-lighter: rgba(142, 197, 255, 0.15); /* Gradients (dark mode) */ --wsscd-gradient-primary: linear-gradient(135deg, #4a9eff 0%, #2a7fd9 100%); --wsscd-gradient-success: linear-gradient(135deg, #46d369 0%, #2bb74a 100%); --wsscd-gradient-danger: linear-gradient(135deg, #ff6b6b 0%, #e04e4e 100%); --wsscd-gradient-warning: linear-gradient(135deg, #f4c542 0%, #d9a825 100%); --wsscd-gradient-surface: linear-gradient(to bottom, #1a1d23 0%, #252832 100%); --wsscd-gradient-background: linear-gradient(135deg, var(--wsscd-color-surface) 0%, var(--wsscd-color-background) 100%); }