maie-ui-library/ui-library.css

Comprehensive UI component library with CSS variables for easy customization

/* ======= UI LIBRARY BASE STYLES ======= */
/* This file contains ONLY base styles and hardcoded values for the UI library */
/* All component-specific styles should be in their respective component CSS files */

:root {
  /* ======= CORE COLOR SYSTEM ======= */
  /* Primary Brand Colors */
  --ui-primary: #37ff00;
  --ui-primary-hover: #1d8200;
  --ui-primary-light: #f1fcf7;
  --ui-primary-dark: #0d4d00;

  /* Secondary Brand Colors */
  --ui-secondary: #ff6600;
  --ui-secondary-hover: #e55a00;
  --ui-secondary-light: #fff4f0;
  --ui-secondary-dark: #cc5200;

  /* Semantic Colors */
  --ui-success: #20c997;
  --ui-success-hover: #1aa179;
  --ui-success-light: #eafff6;
  --ui-success-dark: #0f5c3f;

  --ui-warning: #ffe066;
  --ui-warning-hover: #ffd633;
  --ui-warning-light: #fff8e1;
  --ui-warning-dark: #ccb300;

  --ui-danger: #e63946;
  --ui-danger-hover: #d62828;
  --ui-danger-light: #ffeaea;
  --ui-danger-dark: #b91c1c;

  --ui-info: #3b5bdb;
  --ui-info-hover: #2563eb;
  --ui-info-light: #f1f5f9;
  --ui-info-dark: #1e40af;

  --ui-neutral: #6b7280;
  --ui-neutral-hover: #4b5563;
  --ui-neutral-light: #f3f4f6;
  --ui-neutral-dark: #374151;

  /* Background Colors */
  --ui-bg-primary: #ffffff;
  --ui-bg-secondary: #f9fafc;
  --ui-bg-tertiary: #f3f4f6;
  --ui-bg-hover: #f4fff9;
  --ui-bg-disabled: #e9ecef;
  --ui-bg-overlay: rgba(0, 0, 0, 0.5);

  /* Text Colors */
  --ui-text-primary: #202520;
  --ui-text-secondary: #6b7280;
  --ui-text-tertiary: #9ca3af;
  --ui-text-disabled: #d1d5db;
  --ui-text-inverse: #ffffff;
  --ui-text-accent: #1d8200;

  /* Border Colors */
  --ui-border-primary: #000000;
  --ui-border-secondary: #d1d5db;
  --ui-border-accent: #37ff00;
  --ui-border-focus: #3b82f6;
  --ui-border-error: #ef4444;
  --ui-border-success: #10b981;

  /* Border Widths */
  --ui-border-width: 1px;
  --ui-border-width-thick: 2px;
  --ui-border-width-thin: 0.5px;

  /* Shadow System */
  --ui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --ui-shadow-brand: 0 4px 12px rgba(55, 255, 0, 0.07);
  --ui-shadow-brand-hover: 0 6px 16px rgba(55, 255, 0, 0.13);

  /* ======= TYPOGRAPHY SYSTEM ======= */
  /* Font Families */
  --ui-font-primary: -apple-system, sans-serif;
  --ui-font-heading: -apple-system, sans-serif;
  --ui-font-mono: -apple-system, monospace;

  /* Font Sizes */
  --ui-text-xs: 0.75rem; /* 12px */
  --ui-text-sm: 0.875rem; /* 14px */
  --ui-text-base: 1rem; /* 16px */
  --ui-text-lg: 1.125rem; /* 18px */
  --ui-text-xl: 1.25rem; /* 20px */
  --ui-text-2xl: 1.5rem; /* 24px */
  --ui-text-3xl: 1.875rem; /* 30px */
  --ui-text-4xl: 2.25rem; /* 36px */

  /* Font Weights */
  --ui-font-light: 300;
  --ui-font-normal: 400;
  --ui-font-medium: 500;
  --ui-font-semibold: 600;
  --ui-font-bold: 700;

  /* Line Heights */
  --ui-leading-tight: 1.25;
  --ui-leading-normal: 1.5;
  --ui-leading-relaxed: 1.625;

  /* ======= SPACING SYSTEM ======= */
  --ui-space-0: 0;
  --ui-space-1: 0.25rem; /* 4px */
  --ui-space-2: 0.5rem; /* 8px */
  --ui-space-3: 0.75rem; /* 12px */
  --ui-space-4: 1rem; /* 16px */
  --ui-space-5: 1.25rem; /* 20px */
  --ui-space-6: 1.5rem; /* 24px */
  --ui-space-8: 2rem; /* 32px */
  --ui-space-10: 2.5rem; /* 40px */
  --ui-space-12: 3rem; /* 48px */
  --ui-space-16: 4rem; /* 64px */
  --ui-space-20: 5rem; /* 80px */
  --ui-space-24: 6rem; /* 96px */
  --ui-space-125: 125rem; /* 1000px */

  /* ======= BORDER RADIUS SYSTEM ======= */
  --ui-radius-none: 0;
  --ui-radius-sm: 0.25rem; /* 4px */
  --ui-radius-md: 0.375rem; /* 6px */
  --ui-radius-lg: 0.5rem; /* 8px */
  --ui-radius-xl: 0.75rem; /* 12px */
  --ui-radius-2xl: 1rem; /* 16px */
  --ui-radius-3xl: 1.5rem; /* 24px */
  --ui-radius-full: 9999px;

  /* Component-specific radius */
  --ui-radius-button: var(--ui-radius-lg);
  --ui-radius-input: var(--ui-radius-lg);
  --ui-radius-card: var(--ui-radius-lg);
  --ui-radius-modal: var(--ui-radius-xl);
  --ui-radius-pill: var(--ui-radius-full);

  /* ======= Z-INDEX SYSTEM ======= */
  --ui-z-dropdown: 1000;
  --ui-z-sticky: 1020;
  --ui-z-fixed: 1030;
  --ui-z-modal-backdrop: 1040;
  --ui-z-modal: 1050;
  --ui-z-popover: 1060;
  --ui-z-tooltip: 1070;
  --ui-z-toast: 1080;

  /* ======= TRANSITION SYSTEM ======= */
  --ui-transition-fast: 150ms ease-in-out;
  --ui-transition-normal: 250ms ease-in-out;
  --ui-transition-slow: 350ms ease-in-out;
  --ui-transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ======= COMPONENT-SPECIFIC VARIABLES ======= */
  /* Button System */
  --ui-button-height-sm: 2rem; /* 32px */
  --ui-button-height-md: 2.5rem; /* 40px */
  --ui-button-height-lg: 3rem; /* 48px */
  --ui-button-padding-x: 1rem; /* 16px */
  --ui-button-padding-y: 0.5rem; /* 8px */

  /* Input System */
  --ui-input-height-sm: 2rem; /* 32px */
  --ui-input-height-md: 2.5rem; /* 40px */
  --ui-input-height-lg: 3rem; /* 48px */
  --ui-input-padding-x: 0.75rem; /* 12px */
  --ui-input-padding-y: 0.5rem; /* 8px */

  /* Card System */
  --ui-card-padding: var(--ui-space-6);
  --ui-card-padding-sm: var(--ui-space-4);
  --ui-card-padding-lg: var(--ui-space-8);

  /* Modal System */
  --ui-modal-max-width: 32rem; /* 512px */
  --ui-modal-max-width-lg: 48rem; /* 768px */
  --ui-modal-max-width-xl: 64rem; /* 1024px */

  /* Form System */
  --ui-form-gap: var(--ui-space-4);
  --ui-form-label-margin: var(--ui-space-2);

  /* Navigation System */
  --ui-nav-height: 4rem; /* 64px */
  --ui-sidebar-width: 16rem; /* 256px */
  --ui-sidebar-width-collapsed: 4rem; /* 64px */

  /* ======= LEGACY COMPATIBILITY ======= */
  /* These maintain backward compatibility with existing styles */
  --ui-primary-bg: var(--ui-primary-light);
  --ui-secondary-bg: var(--ui-secondary-light);
  --ui-success-bg: var(--ui-success-light);
  --ui-warning-bg: var(--ui-warning-light);
  --ui-danger-bg: var(--ui-danger-light);
  --ui-info-bg: var(--ui-info-light);
  --ui-neutral-bg: var(--ui-neutral-light);

  --ui-bg: var(--ui-bg-primary);
  --ui-bg-light: var(--ui-bg-secondary);
  --ui-bg-hover: var(--ui-bg-hover);
  --ui-bg-contrast: var(--ui-bg-tertiary);

  --ui-font-main: var(--ui-font-primary);
  --ui-font-size: var(--ui-text-base);
  --ui-font-title: var(--ui-text-3xl);
  --ui-font-label: var(--ui-text-base);
  --ui-font-small: var(--ui-text-sm);
  --ui-font-tiny: var(--ui-text-xs);

  --ui-font-color: var(--ui-text-primary);
  --ui-font-color-soft: var(--ui-text-secondary);
  --ui-font-color-strong: var(--ui-text-accent);
  --ui-font-contrast: var(--ui-text-inverse);

  --ui-border: var(--ui-border-accent);
  --ui-border-light: var(--ui-border-primary);
  --ui-border-strong: var(--ui-border-accent);

  --ui-shadow: var(--ui-shadow-brand);
  --ui-shadow-active: var(--ui-shadow-brand-hover);
  --ui-shadow-btn: var(--ui-shadow-brand);

  --ui-spacing-xs: var(--ui-space-1);
  --ui-spacing-sm: var(--ui-space-2);
  --ui-spacing-md: var(--ui-space-4);
  --ui-spacing-lg: var(--ui-space-6);
  --ui-spacing-xl: var(--ui-space-8);

  --ui-btn-radius: var(--ui-radius-button);
  --ui-input-radius: var(--ui-radius-input);
  --ui-card-radius: var(--ui-radius-card);
  --ui-card-radius-lg: var(--ui-radius-2xl);
  --ui-card-radius-sm: var(--ui-radius-md);
  --ui-modal-radius: var(--ui-radius-modal);
  --ui-panel-radius: var(--ui-radius-card);
  --ui-footer-radius: var(--ui-radius-card);
  --ui-pill-radius: var(--ui-radius-pill);
}

/* ======= BASE RESET & GLOBAL STYLES ======= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: var(--ui-leading-normal);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--ui-font-primary);
  font-size: var(--ui-text-base);
  font-weight: var(--ui-font-normal);
  line-height: var(--ui-leading-normal);
  color: var(--ui-text-primary);
  background-color: var(--ui-bg-secondary);
}

/* ======= UTILITY CLASSES ======= */
.ui-list-container {
  width: inherit;
  position: relative;
}

/* Focus management */
*:focus {
  outline: 2px solid var(--ui-border-focus);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}