/** * Stylesheet Generation * * Generates complete CSS stylesheets for consent pages. * * @module @kya-os/consent/styles/stylesheet */ import type { ConsentBranding } from "../types/branding.types.js"; /** * Custom checkbox styles that work with Tailwind's appearance-none * * Creates a checkmark using CSS that appears when checked. */ export declare const CHECKBOX_STYLES = "\n/* Custom checkbox checkmark */\ninput[type=\"checkbox\"]:checked::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n width: 5px;\n height: 9px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: translate(-50%, -60%) rotate(45deg);\n}\n\n/* Focus ring for accessibility */\ninput[type=\"checkbox\"]:focus-visible {\n outline: 2px solid var(--consent-primary);\n outline-offset: 2px;\n}\n"; /** * Form input focus styles */ export declare const INPUT_STYLES = "\n/* Input focus states */\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n ring: 2px;\n ring-color: var(--consent-primary);\n border-color: transparent;\n}\n\n/* Password visibility toggle button */\n.password-toggle {\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: #6B7280;\n}\n\n.password-toggle:hover {\n color: #374151;\n}\n"; /** * Loading spinner animation */ export declare const SPINNER_STYLES = "\n/* Loading spinner */\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n"; /** * Smooth transitions */ export declare const TRANSITION_STYLES = "\n/* Smooth transitions */\n.transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n"; /** * Generate a complete stylesheet for consent pages * * @param branding - Branding configuration * @returns Complete CSS stylesheet string */ export declare function generateStylesheet(branding?: ConsentBranding): string; /** * Generate minimal inline styles (for embedding in HTML) * * @param branding - Branding configuration * @returns Minimal CSS for inline