/** * CMUK CSS Variables * * Design tokens for the entire plugin. * Uses CM Core Theme Variables (--cmc-theme-*) as base with CMUK-specific extensions. * Load this file FIRST before all other CSS files. * * @package CMUK * @since 1.1.2 * @updated 1.3.0 - Migration to --cmc-theme-* variables * @requires CM Core Library (cm-core-library) >= 1.0.0 for theme style inheritance */ :root { /* ========================================================================== Color Palette - Inherits from CM Core Theme All brand colors now use --cmc-theme-* variables for consistency ========================================================================== */ /* Brand colors removed - use --cmc-theme-primary-color directly */ /* Gradient colors removed - use solid colors from theme instead */ /* ========================================================================== Semantic Colors - Status & Feedback Inherits from CM Core Theme Variables (--cmc-theme-*) Derived shades use color-mix for consistency ========================================================================== */ /* Success - inherits from theme */ --cmuk-success: var(--cmc-theme-success-color); --cmuk-success-dark: color-mix(in srgb, var(--cmc-theme-success-color) 100%, #000 20%); --cmuk-success-light: color-mix(in srgb, var(--cmc-theme-success-color) 15%, var(--cmc-theme-background-color)); --cmuk-success-border: color-mix(in srgb, var(--cmc-theme-success-color) 30%, var(--cmc-theme-background-color)); --cmuk-success-text: color-mix(in srgb, var(--cmc-theme-success-color) 100%, #000 40%); /* Error / Danger - inherits from theme */ --cmuk-error: var(--cmc-theme-error-color); --cmuk-error-dark: color-mix(in srgb, var(--cmc-theme-error-color) 100%, #000 20%); --cmuk-error-light: color-mix(in srgb, var(--cmc-theme-error-color) 15%, var(--cmc-theme-background-color)); --cmuk-error-border: color-mix(in srgb, var(--cmc-theme-error-color) 30%, var(--cmc-theme-background-color)); --cmuk-error-text: color-mix(in srgb, var(--cmc-theme-error-color) 100%, #000 40%); /* Warning - inherits from theme */ --cmuk-warning: var(--cmc-theme-warning-color); --cmuk-warning-dark: color-mix(in srgb, var(--cmc-theme-warning-color) 100%, #000 20%); --cmuk-warning-light: color-mix(in srgb, var(--cmc-theme-warning-color) 15%, var(--cmc-theme-background-color)); --cmuk-warning-border: color-mix(in srgb, var(--cmc-theme-warning-color) 30%, var(--cmc-theme-background-color)); --cmuk-warning-text: color-mix(in srgb, var(--cmc-theme-warning-color) 100%, #000 40%); /* Info - inherits from theme */ --cmuk-info: var(--cmc-theme-info-color); --cmuk-info-dark: color-mix(in srgb, var(--cmc-theme-info-color) 100%, #000 20%); --cmuk-info-light: color-mix(in srgb, var(--cmc-theme-info-color) 15%, var(--cmc-theme-background-color)); --cmuk-info-border: color-mix(in srgb, var(--cmc-theme-info-color) 30%, var(--cmc-theme-background-color)); --cmuk-info-text: color-mix(in srgb, var(--cmc-theme-info-color) 100%, #000 40%); /* Theme Primary — uses plugin-level override (set in Codemoy Dashboard > Appearance) */ --cmuk-wp-blue: var(--cmc-plugin-primary); --cmuk-wp-blue-dark: color-mix(in srgb, var(--cmc-plugin-primary) 82%, #000); /* ========================================================================== Neutral Colors - Gray Scale Using color-mix to derive shades from theme colors ========================================================================== */ --cmuk-white: var(--cmc-theme-background-color); --cmuk-black: #000; /* Gray scale derived from theme colors using color-mix */ --cmuk-gray-50: color-mix(in srgb, var(--cmc-theme-text-color) 3%, var(--cmc-theme-background-color)); --cmuk-gray-100: color-mix(in srgb, var(--cmc-theme-text-color) 6%, var(--cmc-theme-background-color)); --cmuk-gray-200: color-mix(in srgb, var(--cmc-theme-text-color) 10%, var(--cmc-theme-background-color)); --cmuk-gray-300: color-mix(in srgb, var(--cmc-theme-text-color) 15%, var(--cmc-theme-background-color)); --cmuk-gray-400: color-mix(in srgb, var(--cmc-theme-text-color) 25%, var(--cmc-theme-background-color)); --cmuk-gray-500: color-mix(in srgb, var(--cmc-theme-text-color) 40%, var(--cmc-theme-background-color)); --cmuk-gray-600: color-mix(in srgb, var(--cmc-theme-text-color) 55%, var(--cmc-theme-background-color)); --cmuk-gray-700: color-mix(in srgb, var(--cmc-theme-text-color) 70%, var(--cmc-theme-background-color)); --cmuk-gray-800: color-mix(in srgb, var(--cmc-theme-text-color) 85%, var(--cmc-theme-background-color)); --cmuk-gray-900: var(--cmc-theme-text-color); /* ========================================================================== Text Colors - inherits from theme ========================================================================== */ --cmuk-text-primary: var(--cmc-theme-text-color); --cmuk-text-secondary: color-mix(in srgb, var(--cmc-theme-text-color) 70%, var(--cmc-theme-background-color)); --cmuk-text-muted: color-mix(in srgb, var(--cmc-theme-text-color) 55%, var(--cmc-theme-background-color)); --cmuk-text-light: color-mix(in srgb, var(--cmc-theme-text-color) 45%, var(--cmc-theme-background-color)); --cmuk-text-on-primary: var(--cmc-theme-button-text-color, #fff); /* ========================================================================== Border Colors - inherits from theme ========================================================================== */ --cmuk-border: var(--cmc-input-border); --cmuk-border-light: var(--cmc-theme-border-color); --cmuk-border-medium: var(--cmc-theme-border-color); --cmuk-border-dark: color-mix(in srgb, var(--cmc-theme-border-color) 100%, var(--cmc-theme-text-color) 15%); /* ========================================================================== Background Colors - inherits from theme ========================================================================== */ --cmuk-bg-page: color-mix(in srgb, var(--cmc-theme-text-color) 3%, var(--cmc-theme-background-color)); --cmuk-bg-card: var(--cmc-theme-background-color); --cmuk-bg-hover: color-mix(in srgb, var(--cmc-theme-text-color) 6%, var(--cmc-theme-background-color)); --cmuk-bg-disabled: color-mix(in srgb, var(--cmc-theme-text-color) 10%, var(--cmc-theme-background-color)); /* ========================================================================== Spacing Scale - inherits from theme Uses larger spacing for better UX ========================================================================== */ --cmuk-space-xs: 4px; --cmuk-space-sm: 8px; --cmuk-space-md: 16px; --cmuk-space-lg: 24px; --cmuk-space-xl: 32px; --cmuk-space-2xl: 48px; --cmuk-space-3xl: 64px; /* ========================================================================== Border Radius - inherits from theme ========================================================================== */ --cmuk-radius-sm: 3px; --cmuk-radius-md: var(--cmc-theme-border-radius); --cmuk-radius-lg: 6px; --cmuk-radius-xl: 8px; --cmuk-radius-full: 9999px; /* ========================================================================== Box Shadows - inherits from theme ========================================================================== */ --cmuk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --cmuk-shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1); --cmuk-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15); --cmuk-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2); /* Focus Shadows - derived from plugin primary color */ --cmuk-shadow-focus-primary: 0 0 0 3px color-mix(in srgb, var(--cmc-plugin-primary) 10%, transparent); --cmuk-shadow-focus-wp: 0 0 0 3px color-mix(in srgb, var(--cmc-plugin-primary) 10%, transparent); --cmuk-shadow-focus-error: 0 0 0 3px color-mix(in srgb, var(--cmc-theme-error-color) 10%, transparent); --cmuk-shadow-focus-success: 0 0 0 3px color-mix(in srgb, var(--cmc-theme-success-color) 10%, transparent); /* ========================================================================== Typography - inherits from theme ========================================================================== */ /* Font Families */ --cmuk-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --cmuk-font-mono: 'Courier New', Courier, monospace; /* Font Sizes */ --cmuk-text-xs: 0.75rem; /* 12px */ --cmuk-text-sm: 0.875rem; /* 14px */ --cmuk-text-base: 1rem; /* 16px */ --cmuk-text-lg: 1.125rem; /* 18px */ --cmuk-text-xl: 1.25rem; /* 20px */ --cmuk-text-2xl: 1.5rem; /* 24px */ --cmuk-text-3xl: 1.875rem; /* 30px */ --cmuk-text-4xl: 2.25rem; /* 36px */ /* Font Weights */ --cmuk-weight-normal: 400; --cmuk-weight-medium: 500; --cmuk-weight-semibold: 600; --cmuk-weight-bold: 700; /* Line Heights */ --cmuk-leading-tight: 1.25; --cmuk-leading-normal: 1.5; --cmuk-leading-relaxed: 1.75; /* ========================================================================== Transitions - inherits from theme ========================================================================== */ --cmuk-transition-fast: 150ms ease; --cmuk-transition-base: 200ms ease; --cmuk-transition-slow: 300ms ease; /* ========================================================================== Z-Index Scale ========================================================================== */ --cmuk-z-dropdown: 1000; --cmuk-z-sticky: 1020; --cmuk-z-fixed: 1030; --cmuk-z-modal-backdrop: 1040; --cmuk-z-modal: 1050; --cmuk-z-popover: 1060; --cmuk-z-tooltip: 1070; /* ========================================================================== Container & Layout ========================================================================== */ --cmuk-container-sm: 540px; --cmuk-container-md: 720px; --cmuk-container-lg: 960px; --cmuk-container-xl: 1140px; /* Form Specific */ --cmuk-form-max-width: 400px; --cmuk-input-height: 42px; }