mycsslab/src/utilities/colors.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS Color Utilities
 * Comprehensive color system with semantic naming
 */

/* Text Colors */
.my-text-transparent { color: transparent; }
.my-text-current { color: currentColor; }
.my-text-black { color: #000000; }
.my-text-white { color: #ffffff; }

/* Primary Colors */
.my-text-primary-50 { color: #eff6ff; }
.my-text-primary-100 { color: #dbeafe; }
.my-text-primary-200 { color: #bfdbfe; }
.my-text-primary-300 { color: #93c5fd; }
.my-text-primary-400 { color: #60a5fa; }
.my-text-primary-500 { color: #3b82f6; }
.my-text-primary-600 { color: #2563eb; }
.my-text-primary-700 { color: #1d4ed8; }
.my-text-primary-800 { color: #1e40af; }
.my-text-primary-900 { color: #1e3a8a; }
.my-text-primary-950 { color: #172554; }

/* Gray Colors */
.my-text-gray-50 { color: #f9fafb; }
.my-text-gray-100 { color: #f3f4f6; }
.my-text-gray-200 { color: #e5e7eb; }
.my-text-gray-300 { color: #d1d5db; }
.my-text-gray-400 { color: #9ca3af; }
.my-text-gray-500 { color: #6b7280; }
.my-text-gray-600 { color: #4b5563; }
.my-text-gray-700 { color: #374151; }
.my-text-gray-800 { color: #1f2937; }
.my-text-gray-900 { color: #111827; }
.my-text-gray-950 { color: #030712; }

/* Success Colors */
.my-text-success-50 { color: #f0fdf4; }
.my-text-success-100 { color: #dcfce7; }
.my-text-success-200 { color: #bbf7d0; }
.my-text-success-300 { color: #86efac; }
.my-text-success-400 { color: #4ade80; }
.my-text-success-500 { color: #22c55e; }
.my-text-success-600 { color: #16a34a; }
.my-text-success-700 { color: #15803d; }
.my-text-success-800 { color: #166534; }
.my-text-success-900 { color: #14532d; }
.my-text-success-950 { color: #052e16; }

/* Warning Colors */
.my-text-warning-50 { color: #fffbeb; }
.my-text-warning-100 { color: #fef3c7; }
.my-text-warning-200 { color: #fde68a; }
.my-text-warning-300 { color: #fcd34d; }
.my-text-warning-400 { color: #fbbf24; }
.my-text-warning-500 { color: #f59e0b; }
.my-text-warning-600 { color: #d97706; }
.my-text-warning-700 { color: #b45309; }
.my-text-warning-800 { color: #92400e; }
.my-text-warning-900 { color: #78350f; }
.my-text-warning-950 { color: #451a03; }

/* Error Colors */
.my-text-error-50 { color: #fef2f2; }
.my-text-error-100 { color: #fee2e2; }
.my-text-error-200 { color: #fecaca; }
.my-text-error-300 { color: #fca5a5; }
.my-text-error-400 { color: #f87171; }
.my-text-error-500 { color: #ef4444; }
.my-text-error-600 { color: #dc2626; }
.my-text-error-700 { color: #b91c1c; }
.my-text-error-800 { color: #991b1b; }
.my-text-error-900 { color: #7f1d1d; }
.my-text-error-950 { color: #450a0a; }

/* Background Colors */
.my-bg-transparent { background-color: transparent; }
.my-bg-current { background-color: currentColor; }
.my-bg-black { background-color: #000000; }
.my-bg-white { background-color: #ffffff; }

/* Primary Background Colors */
.my-bg-primary-50 { background-color: #eff6ff; }
.my-bg-primary-100 { background-color: #dbeafe; }
.my-bg-primary-200 { background-color: #bfdbfe; }
.my-bg-primary-300 { background-color: #93c5fd; }
.my-bg-primary-400 { background-color: #60a5fa; }
.my-bg-primary-500 { background-color: #3b82f6; }
.my-bg-primary-600 { background-color: #2563eb; }
.my-bg-primary-700 { background-color: #1d4ed8; }
.my-bg-primary-800 { background-color: #1e40af; }
.my-bg-primary-900 { background-color: #1e3a8a; }
.my-bg-primary-950 { background-color: #172554; }

/* Gray Background Colors */
.my-bg-gray-50 { background-color: #f9fafb; }
.my-bg-gray-100 { background-color: #f3f4f6; }
.my-bg-gray-200 { background-color: #e5e7eb; }
.my-bg-gray-300 { background-color: #d1d5db; }
.my-bg-gray-400 { background-color: #9ca3af; }
.my-bg-gray-500 { background-color: #6b7280; }
.my-bg-gray-600 { background-color: #4b5563; }
.my-bg-gray-700 { background-color: #374151; }
.my-bg-gray-800 { background-color: #1f2937; }
.my-bg-gray-900 { background-color: #111827; }
.my-bg-gray-950 { background-color: #030712; }

/* Success Background Colors */
.my-bg-success-50 { background-color: #f0fdf4; }
.my-bg-success-100 { background-color: #dcfce7; }
.my-bg-success-200 { background-color: #bbf7d0; }
.my-bg-success-300 { background-color: #86efac; }
.my-bg-success-400 { background-color: #4ade80; }
.my-bg-success-500 { background-color: #22c55e; }
.my-bg-success-600 { background-color: #16a34a; }
.my-bg-success-700 { background-color: #15803d; }
.my-bg-success-800 { background-color: #166534; }
.my-bg-success-900 { background-color: #14532d; }
.my-bg-success-950 { background-color: #052e16; }

/* Warning Background Colors */
.my-bg-warning-50 { background-color: #fffbeb; }
.my-bg-warning-100 { background-color: #fef3c7; }
.my-bg-warning-200 { background-color: #fde68a; }
.my-bg-warning-300 { background-color: #fcd34d; }
.my-bg-warning-400 { background-color: #fbbf24; }
.my-bg-warning-500 { background-color: #f59e0b; }
.my-bg-warning-600 { background-color: #d97706; }
.my-bg-warning-700 { background-color: #b45309; }
.my-bg-warning-800 { background-color: #92400e; }
.my-bg-warning-900 { background-color: #78350f; }
.my-bg-warning-950 { background-color: #451a03; }

/* Error Background Colors */
.my-bg-error-50 { background-color: #fef2f2; }
.my-bg-error-100 { background-color: #fee2e2; }
.my-bg-error-200 { background-color: #fecaca; }
.my-bg-error-300 { background-color: #fca5a5; }
.my-bg-error-400 { background-color: #f87171; }
.my-bg-error-500 { background-color: #ef4444; }
.my-bg-error-600 { background-color: #dc2626; }
.my-bg-error-700 { background-color: #b91c1c; }
.my-bg-error-800 { background-color: #991b1b; }
.my-bg-error-900 { background-color: #7f1d1d; }
.my-bg-error-950 { background-color: #450a0a; }

/* Hover States */
.my-hover-text-primary-600:hover { color: #2563eb; }
.my-hover-text-primary-700:hover { color: #1d4ed8; }
.my-hover-text-gray-600:hover { color: #4b5563; }
.my-hover-text-gray-700:hover { color: #374151; }

.my-hover-bg-primary-600:hover { background-color: #2563eb; }
.my-hover-bg-primary-700:hover { background-color: #1d4ed8; }
.my-hover-bg-gray-100:hover { background-color: #f3f4f6; }
.my-hover-bg-gray-200:hover { background-color: #e5e7eb; }

/* Focus States */
.my-focus-text-primary-600:focus { color: #2563eb; }
.my-focus-bg-primary-50:focus { background-color: #eff6ff; }

/* Active States */
.my-active-text-primary-700:active { color: #1d4ed8; }
.my-active-bg-primary-100:active { background-color: #dbeafe; }