@moontra/moonui-pro
Version:
Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components
455 lines (394 loc) • 13 kB
CSS
/* MoonUI Design Tokens */
/* Scoped to moonui-pro components only */
.moonui-pro {
/* === COLOR SYSTEM === */
/* Primary Colors */
--primary-50: 240 249 255;
--primary-100: 224 242 254;
--primary-200: 186 230 253;
--primary-300: 125 211 252;
--primary-400: 56 189 248;
--primary-500: 14 165 233;
--primary-600: 2 132 199;
--primary-700: 3 105 161;
--primary-800: 7 89 133;
--primary-900: 12 74 110;
--primary-950: 8 47 73;
/* Secondary Colors */
--secondary-50: 248 250 252;
--secondary-100: 241 245 249;
--secondary-200: 226 232 240;
--secondary-300: 203 213 225;
--secondary-400: 148 163 184;
--secondary-500: 100 116 139;
--secondary-600: 71 85 105;
--secondary-700: 51 65 85;
--secondary-800: 30 41 59;
--secondary-900: 15 23 42;
--secondary-950: 2 6 23;
/* Semantic Colors */
--success-50: 240 253 244;
--success-100: 220 252 231;
--success-200: 187 247 208;
--success-300: 134 239 172;
--success-400: 74 222 128;
--success-500: 34 197 94;
--success-600: 22 163 74;
--success-700: 21 128 61;
--success-800: 22 101 52;
--success-900: 20 83 45;
--success-950: 5 46 22;
--warning-50: 254 252 232;
--warning-100: 254 249 195;
--warning-200: 254 240 138;
--warning-300: 253 224 71;
--warning-400: 250 204 21;
--warning-500: 234 179 8;
--warning-600: 202 138 4;
--warning-700: 161 98 7;
--warning-800: 133 77 14;
--warning-900: 113 63 18;
--warning-950: 66 32 6;
--error-50: 254 242 242;
--error-100: 254 226 226;
--error-200: 254 202 202;
--error-300: 252 165 165;
--error-400: 248 113 113;
--error-500: 239 68 68;
--error-600: 220 38 38;
--error-700: 185 28 28;
--error-800: 153 27 27;
--error-900: 127 29 29;
--error-950: 69 10 10;
/* Theme Colors */
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 215 20.2% 65.1%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
/* === TYPOGRAPHY === */
/* Font Families */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-serif: 'Crimson Text', Georgia, 'Times New Roman', serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Font Sizes */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
--text-7xl: 4.5rem; /* 72px */
--text-8xl: 6rem; /* 96px */
--text-9xl: 8rem; /* 128px */
/* Line Heights */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* Font Weights */
--font-thin: 100;
--font-extralight: 200;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--font-black: 900;
/* === SPACING SYSTEM === */
--spacing-0: 0;
--spacing-px: 1px;
--spacing-0-5: 0.125rem; /* 2px */
--spacing-1: 0.25rem; /* 4px */
--spacing-1-5: 0.375rem; /* 6px */
--spacing-2: 0.5rem; /* 8px */
--spacing-2-5: 0.625rem; /* 10px */
--spacing-3: 0.75rem; /* 12px */
--spacing-3-5: 0.875rem; /* 14px */
--spacing-4: 1rem; /* 16px */
--spacing-5: 1.25rem; /* 20px */
--spacing-6: 1.5rem; /* 24px */
--spacing-7: 1.75rem; /* 28px */
--spacing-8: 2rem; /* 32px */
--spacing-9: 2.25rem; /* 36px */
--spacing-10: 2.5rem; /* 40px */
--spacing-11: 2.75rem; /* 44px */
--spacing-12: 3rem; /* 48px */
--spacing-14: 3.5rem; /* 56px */
--spacing-16: 4rem; /* 64px */
--spacing-20: 5rem; /* 80px */
--spacing-24: 6rem; /* 96px */
--spacing-28: 7rem; /* 112px */
--spacing-32: 8rem; /* 128px */
--spacing-36: 9rem; /* 144px */
--spacing-40: 10rem; /* 160px */
--spacing-44: 11rem; /* 176px */
--spacing-48: 12rem; /* 192px */
--spacing-52: 13rem; /* 208px */
--spacing-56: 14rem; /* 224px */
--spacing-60: 15rem; /* 240px */
--spacing-64: 16rem; /* 256px */
--spacing-72: 18rem; /* 288px */
--spacing-80: 20rem; /* 320px */
--spacing-96: 24rem; /* 384px */
/* === BORDER RADIUS === */
--radius-none: 0;
--radius-sm: 0.125rem; /* 2px */
--radius-base: 0.25rem; /* 4px */
--radius-md: 0.375rem; /* 6px */
--radius-lg: 0.5rem; /* 8px */
--radius-xl: 0.75rem; /* 12px */
--radius-2xl: 1rem; /* 16px */
--radius-3xl: 1.5rem; /* 24px */
--radius-full: 9999px;
/* === SHADOWS & ELEVATION === */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--shadow-none: 0 0 #0000;
/* Elevation System */
--elevation-0: var(--shadow-none);
--elevation-1: var(--shadow-sm);
--elevation-2: var(--shadow-base);
--elevation-3: var(--shadow-md);
--elevation-4: var(--shadow-lg);
--elevation-5: var(--shadow-xl);
--elevation-6: var(--shadow-2xl);
/* === ANIMATION SYSTEM === */
/* Duration Scale */
--duration-75: 75ms;
--duration-100: 100ms;
--duration-150: 150ms;
--duration-200: 200ms;
--duration-300: 300ms;
--duration-500: 500ms;
--duration-700: 700ms;
--duration-1000: 1000ms;
/* Easing Functions */
--ease-linear: linear;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* Animation Presets */
--animate-fade-in: fadeIn var(--duration-300) var(--ease-out);
--animate-fade-out: fadeOut var(--duration-300) var(--ease-in);
--animate-slide-in-up: slideInUp var(--duration-300) var(--ease-out);
--animate-slide-in-down: slideInDown var(--duration-300) var(--ease-out);
--animate-slide-in-left: slideInLeft var(--duration-300) var(--ease-out);
--animate-slide-in-right: slideInRight var(--duration-300) var(--ease-out);
--animate-scale-in: scaleIn var(--duration-200) var(--ease-out);
--animate-scale-out: scaleOut var(--duration-200) var(--ease-in);
--animate-bounce: bounce var(--duration-500) var(--ease-bounce);
--animate-pulse: pulse var(--duration-1000) var(--ease-in-out) infinite;
--animate-spin: spin var(--duration-1000) var(--ease-linear) infinite;
/* === BREAKPOINTS === */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
/* Container Sizes */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
/* === Z-INDEX SCALE === */
--z-0: 0;
--z-10: 10;
--z-20: 20;
--z-30: 30;
--z-40: 40;
--z-50: 50;
--z-auto: auto;
/* Semantic Z-Index */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
--z-toast: 1080;
/* === COMPONENT-SPECIFIC TOKENS === */
/* Button Tokens */
--button-height-sm: 2rem; /* 32px */
--button-height-md: 2.5rem; /* 40px */
--button-height-lg: 3rem; /* 48px */
--button-height-xl: 3.5rem; /* 56px */
--button-padding-sm: 0.5rem 0.75rem;
--button-padding-md: 0.625rem 1rem;
--button-padding-lg: 0.75rem 1.25rem;
--button-padding-xl: 1rem 1.5rem;
--button-font-size-sm: var(--text-sm);
--button-font-size-md: var(--text-base);
--button-font-size-lg: var(--text-lg);
--button-font-size-xl: var(--text-xl);
/* Input Tokens */
--input-height-sm: 2rem; /* 32px */
--input-height-md: 2.5rem; /* 40px */
--input-height-lg: 3rem; /* 48px */
--input-height-xl: 3.5rem; /* 56px */
--input-padding-sm: 0.5rem 0.75rem;
--input-padding-md: 0.625rem 1rem;
--input-padding-lg: 0.75rem 1.25rem;
--input-padding-xl: 1rem 1.5rem;
--input-border-width: 1px;
--input-border-radius: var(--radius-md);
--input-focus-ring-width: 2px;
--input-focus-ring-offset: 2px;
/* Card Tokens */
--card-padding-sm: 1rem;
--card-padding-md: 1.5rem;
--card-padding-lg: 2rem;
--card-padding-xl: 2.5rem;
--card-border-radius: var(--radius-lg);
--card-border-width: 1px;
--card-shadow: var(--elevation-1);
--card-hover-shadow: var(--elevation-2);
}
/* === DARK MODE === */
.moonui-pro.dark,
.dark .moonui-pro {
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--card: 224 71% 4%;
--card-foreground: 213 31% 91%;
--popover: 224 71% 4%;
--popover-foreground: 213 31% 91%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;
--secondary: 222.2 84% 4.9%;
--secondary-foreground: 210 40% 98%;
--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;
--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--border: 216 34% 17%;
--input: 216 34% 17%;
--ring: 216 34% 17%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
/* === KEYFRAMES === */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes slideInUp {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slideInDown {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slideInLeft {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes scaleIn {
from { transform: scale(0.95); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@keyframes scaleOut {
from { transform: scale(1); opacity: 1; }
to { transform: scale(0.95); opacity: 0; }
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translate3d(0, 0, 0);
}
40%, 43% {
transform: translate3d(0, -30px, 0);
}
70% {
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* === UTILITY CLASSES === */
.animate-fade-in { animation: var(--animate-fade-in); }
.animate-fade-out { animation: var(--animate-fade-out); }
.animate-slide-in-up { animation: var(--animate-slide-in-up); }
.animate-slide-in-down { animation: var(--animate-slide-in-down); }
.animate-slide-in-left { animation: var(--animate-slide-in-left); }
.animate-slide-in-right { animation: var(--animate-slide-in-right); }
.animate-scale-in { animation: var(--animate-scale-in); }
.animate-scale-out { animation: var(--animate-scale-out); }
.animate-bounce { animation: var(--animate-bounce); }
.animate-pulse { animation: var(--animate-pulse); }
.animate-spin { animation: var(--animate-spin); }
/* === RESPONSIVE UTILITIES === */
@media (max-width: 639px) {
.container { max-width: 100%; }
}
@media (min-width: 640px) {
.container { max-width: var(--container-sm); }
}
@media (min-width: 768px) {
.container { max-width: var(--container-md); }
}
@media (min-width: 1024px) {
.container { max-width: var(--container-lg); }
}
@media (min-width: 1280px) {
.container { max-width: var(--container-xl); }
}
@media (min-width: 1536px) {
.container { max-width: var(--container-2xl); }
}