abt-universal-search/styles/themes/high-contrast.css

Enterprise-grade Universal Search System with cross-platform compatibility, performance optimization, and security hardening

/**
 * High Contrast Theme
 * WCAG AAA compliant high contrast theme for accessibility
 */

:root {
  /* Theme Metadata */
  --alon-theme-name: 'high-contrast';
  --alon-theme-version: '1.0.0';

  /* Primary Colors - High contrast blue */
  --alon-color-primary-50: #000000;
  --alon-color-primary-100: #001122;
  --alon-color-primary-200: #002244;
  --alon-color-primary-300: #003366;
  --alon-color-primary-400: #004488;
  --alon-color-primary-500: #0055aa;
  --alon-color-primary-600: #0066cc;
  --alon-color-primary-700: #0077ee;
  --alon-color-primary-800: #3399ff;
  --alon-color-primary-900: #66bbff;
  --alon-color-primary-950: #99ddff;

  /* Secondary Colors - High contrast grays */
  --alon-color-secondary-50: #000000;
  --alon-color-secondary-100: #111111;
  --alon-color-secondary-200: #222222;
  --alon-color-secondary-300: #333333;
  --alon-color-secondary-400: #444444;
  --alon-color-secondary-500: #666666;
  --alon-color-secondary-600: #888888;
  --alon-color-secondary-700: #aaaaaa;
  --alon-color-secondary-800: #cccccc;
  --alon-color-secondary-900: #eeeeee;
  --alon-color-secondary-950: #ffffff;

  /* Neutral Colors - Strict black and white */
  --alon-color-neutral-50: #000000;
  --alon-color-neutral-100: #000000;
  --alon-color-neutral-200: #222222;
  --alon-color-neutral-300: #444444;
  --alon-color-neutral-400: #666666;
  --alon-color-neutral-500: #888888;
  --alon-color-neutral-600: #aaaaaa;
  --alon-color-neutral-700: #cccccc;
  --alon-color-neutral-800: #eeeeee;
  --alon-color-neutral-900: #ffffff;
  --alon-color-neutral-950: #ffffff;

  /* Semantic Colors - High contrast for accessibility */
  --alon-color-success: #00aa00;
  --alon-color-warning: #ff8800;
  --alon-color-error: #cc0000;
  --alon-color-info: #0066cc;

  /* State Colors */
  --alon-color-hover: #333333;
  --alon-color-active: #555555;
  --alon-color-focus: #0066cc;
  --alon-color-disabled: #666666;

  /* Background Colors - Strict contrast */
  --alon-background-primary: #000000;
  --alon-background-secondary: #111111;
  --alon-background-tertiary: #222222;
  --alon-background-overlay: rgba(255, 255, 255, 0.9);

  /* Text Colors - Maximum contrast */
  --alon-text-primary: #ffffff;
  --alon-text-secondary: #eeeeee;
  --alon-text-tertiary: #cccccc;
  --alon-text-inverse: #000000;

  /* Border Colors - High visibility */
  --alon-border-primary: #ffffff;
  --alon-border-secondary: #cccccc;
  --alon-border-tertiary: #888888;
  --alon-border-focus: #0066cc;

  /* Spacing System - Same as other themes */
  --alon-spacing-unit: 4;
  --alon-spacing-xs: 0.25rem;
  --alon-spacing-sm: 0.5rem;
  --alon-spacing-md: 1rem;
  --alon-spacing-lg: 1.5rem;
  --alon-spacing-xl: 2rem;
  --alon-spacing-2xl: 2.5rem;
  --alon-spacing-3xl: 3rem;
  --alon-spacing-4xl: 4rem;
  --alon-spacing-5xl: 5rem;
  --alon-spacing-6xl: 6rem;

  /* Component Spacing - Slightly larger for accessibility */
  --alon-spacing-padding-xs: 0.75rem;
  --alon-spacing-padding-sm: 1rem;
  --alon-spacing-padding-md: 1.25rem;
  --alon-spacing-padding-lg: 1.5rem;
  --alon-spacing-padding-xl: 2rem;

  --alon-spacing-margin-xs: 0.5rem;
  --alon-spacing-margin-sm: 0.75rem;
  --alon-spacing-margin-md: 1.25rem;
  --alon-spacing-margin-lg: 2rem;
  --alon-spacing-margin-xl: 2.5rem;

  --alon-spacing-gap-xs: 0.75rem;
  --alon-spacing-gap-sm: 1rem;
  --alon-spacing-gap-md: 1.25rem;
  --alon-spacing-gap-lg: 1.5rem;
  --alon-spacing-gap-xl: 2rem;

  /* Typography System - High readability fonts */
  --alon-font-primary: 'Arial', 'Helvetica', sans-serif;
  --alon-font-secondary: 'Times New Roman', 'Times', serif;
  --alon-font-monospace: 'Courier New', 'Courier', monospace;
  --alon-font-display: 'Arial', 'Helvetica', sans-serif;

  /* Font Weights - Bolder for better visibility */
  --alon-font-weight-light: 400;
  --alon-font-weight-normal: 500;
  --alon-font-weight-medium: 600;
  --alon-font-weight-semibold: 700;
  --alon-font-weight-bold: 800;

  /* Font Sizes - Slightly larger for accessibility */
  --alon-font-size-xs: 0.875rem;  /* 14px - minimum for accessibility */
  --alon-font-size-sm: 1rem;      /* 16px */
  --alon-font-size-base: 1.125rem; /* 18px */
  --alon-font-size-lg: 1.25rem;   /* 20px */
  --alon-font-size-xl: 1.375rem;  /* 22px */
  --alon-font-size-2xl: 1.625rem; /* 26px */
  --alon-font-size-3xl: 2rem;     /* 32px */
  --alon-font-size-4xl: 2.5rem;   /* 40px */
  --alon-font-size-5xl: 3.25rem;  /* 52px */
  --alon-font-size-6xl: 4rem;     /* 64px */

  /* Line Heights - Increased for readability */
  --alon-line-height-tight: 1.3;
  --alon-line-height-normal: 1.6;
  --alon-line-height-relaxed: 1.8;
  --alon-line-height-loose: 2.2;

  /* Letter Spacing - Improved readability */
  --alon-letter-spacing-tight: 0;
  --alon-letter-spacing-normal: 0.025em;
  --alon-letter-spacing-wide: 0.05em;

  /* Shadows - High contrast, no subtle effects */
  --alon-shadow-xs: 0 2px 4px 0 rgba(255, 255, 255, 0.8);
  --alon-shadow-sm: 0 2px 6px 0 rgba(255, 255, 255, 0.8);
  --alon-shadow-md: 0 4px 8px 0 rgba(255, 255, 255, 0.8);
  --alon-shadow-lg: 0 6px 12px 0 rgba(255, 255, 255, 0.8);
  --alon-shadow-xl: 0 8px 16px 0 rgba(255, 255, 255, 0.8);
  --alon-shadow-2xl: 0 12px 24px 0 rgba(255, 255, 255, 0.9);

  /* Inner Shadows - Inverted for high contrast */
  --alon-shadow-inner-sm: inset 0 1px 2px 0 rgba(255, 255, 255, 0.8);
  --alon-shadow-inner-md: inset 0 2px 4px 0 rgba(255, 255, 255, 0.8);
  --alon-shadow-inner-lg: inset 0 4px 8px 0 rgba(255, 255, 255, 0.8);

  /* Focus Shadows - High visibility */
  --alon-shadow-focus-primary: 0 0 0 4px #0066cc;
  --alon-shadow-focus-secondary: 0 0 0 4px #ffffff;
  --alon-shadow-focus-error: 0 0 0 4px #cc0000;

  /* Borders - Thicker for visibility */
  --alon-border-width-none: 0;
  --alon-border-width-thin: 2px;
  --alon-border-width-medium: 3px;
  --alon-border-width-thick: 5px;

  --alon-border-radius-none: 0;
  --alon-border-radius-sm: 0.25rem;
  --alon-border-radius-md: 0.375rem;
  --alon-border-radius-lg: 0.5rem;
  --alon-border-radius-xl: 0.75rem;
  --alon-border-radius-full: 9999px;

  --alon-border-style-solid: solid;
  --alon-border-style-dashed: dashed;
  --alon-border-style-dotted: dotted;

  /* Animations - Reduced or disabled for accessibility */
  --alon-animation-duration-fast: 0ms;
  --alon-animation-duration-normal: 0ms;
  --alon-animation-duration-slow: 0ms;

  --alon-animation-timing-linear: linear;
  --alon-animation-timing-ease: linear;
  --alon-animation-timing-ease-in: linear;
  --alon-animation-timing-ease-out: linear;
  --alon-animation-timing-ease-in-out: linear;
  --alon-animation-timing-bounce: linear;

  --alon-animation-delay-none: 0ms;
  --alon-animation-delay-short: 0ms;
  --alon-animation-delay-medium: 0ms;
  --alon-animation-delay-long: 0ms;

  /* Transitions - Instant for high contrast */
  --alon-transition-all: none;
  --alon-transition-colors: none;
  --alon-transition-transform: none;
  --alon-transition-opacity: none;

  /* Breakpoints - Same as other themes */
  --alon-breakpoint-xs: 0px;
  --alon-breakpoint-sm: 576px;
  --alon-breakpoint-md: 768px;
  --alon-breakpoint-lg: 992px;
  --alon-breakpoint-xl: 1200px;
  --alon-breakpoint-2xl: 1400px;

  /* Container Breakpoints */
  --alon-container-xs: 0px;
  --alon-container-sm: 320px;
  --alon-container-md: 480px;
  --alon-container-lg: 640px;
  --alon-container-xl: 800px;

  /* Z-Index Scale */
  --alon-z-index-dropdown: 1000;
  --alon-z-index-sticky: 1020;
  --alon-z-index-fixed: 1030;
  --alon-z-index-modal-backdrop: 1040;
  --alon-z-index-modal: 1050;
  --alon-z-index-popover: 1060;
  --alon-z-index-tooltip: 1070;
  --alon-z-index-toast: 1080;
}

/* Component-specific high contrast theme styles */
.alon-search-dropdown {
  background-color: var(--alon-background-primary);
  border: var(--alon-border-width-medium) var(--alon-border-style-solid) var(--alon-border-primary);
  color: var(--alon-text-primary);
  box-shadow: var(--alon-shadow-lg);
  outline: 2px solid var(--alon-border-primary);
  outline-offset: 2px;
}

.alon-search-input {
  background-color: var(--alon-background-secondary);
  border: var(--alon-border-width-medium) var(--alon-border-style-solid) var(--alon-border-primary);
  color: var(--alon-text-primary);
  font-weight: var(--alon-font-weight-medium);
  font-size: var(--alon-font-size-base);
}

.alon-search-input:focus {
  border-color: var(--alon-border-focus);
  box-shadow: var(--alon-shadow-focus-primary);
  outline: 3px solid var(--alon-border-focus);
  outline-offset: 2px;
}

.alon-search-input::placeholder {
  color: var(--alon-text-tertiary);
  font-weight: var(--alon-font-weight-normal);
}

.alon-search-result {
  color: var(--alon-text-primary);
  font-weight: var(--alon-font-weight-medium);
  border-bottom: 1px solid var(--alon-border-tertiary);
  padding: var(--alon-spacing-padding-sm);
}

.alon-search-result:hover {
  background-color: var(--alon-color-hover);
  outline: 2px solid var(--alon-border-primary);
  outline-offset: -2px;
}

.alon-search-result.selected {
  background-color: var(--alon-color-primary-500);
  color: var(--alon-text-inverse);
  font-weight: var(--alon-font-weight-semibold);
  outline: 3px solid var(--alon-border-primary);
  outline-offset: -3px;
}

.alon-loading-spinner {
  color: var(--alon-color-primary-800);
  border-width: 4px;
}

.alon-error-message {
  color: var(--alon-text-primary);
  background-color: var(--alon-color-error);
  border: var(--alon-border-width-thick) var(--alon-border-style-solid) var(--alon-text-primary);
  font-weight: var(--alon-font-weight-semibold);
  padding: var(--alon-spacing-padding-md);
}

/* High contrast specific accessibility enhancements */
* {
  /* Remove all animations and transitions */
  animation: none !important;
  transition: none !important;
}

/* High contrast focus indicators */
*:focus {
  outline: 3px solid var(--alon-border-focus) !important;
  outline-offset: 2px !important;
}

/* High contrast link styling */
a {
  color: var(--alon-color-primary-800) !important;
  text-decoration: underline !important;
  font-weight: var(--alon-font-weight-semibold) !important;
}

a:hover,
a:focus {
  color: var(--alon-text-primary) !important;
  background-color: var(--alon-color-primary-800) !important;
  outline: 3px solid var(--alon-text-primary) !important;
}

/* High contrast button styling */
button,
[role="button"] {
  background-color: var(--alon-background-secondary) !important;
  color: var(--alon-text-primary) !important;
  border: var(--alon-border-width-medium) var(--alon-border-style-solid) var(--alon-border-primary) !important;
  font-weight: var(--alon-font-weight-semibold) !important;
  padding: var(--alon-spacing-padding-sm) var(--alon-spacing-padding-md) !important;
}

button:hover,
[role="button"]:hover {
  background-color: var(--alon-text-primary) !important;
  color: var(--alon-background-primary) !important;
  outline: 3px solid var(--alon-text-primary) !important;
  outline-offset: 2px !important;
}

button:focus,
[role="button"]:focus {
  box-shadow: var(--alon-shadow-focus-primary) !important;
  outline: 3px solid var(--alon-border-focus) !important;
  outline-offset: 2px !important;
}

/* High contrast form elements */
input,
select,
textarea {
  background-color: var(--alon-background-secondary) !important;
  color: var(--alon-text-primary) !important;
  border: var(--alon-border-width-medium) var(--alon-border-style-solid) var(--alon-border-primary) !important;
  font-weight: var(--alon-font-weight-medium) !important;
}

/* High contrast scrollbar styling */
.alon-search-dropdown::-webkit-scrollbar {
  width: 16px;
}

.alon-search-dropdown::-webkit-scrollbar-track {
  background: var(--alon-background-tertiary);
  border: 2px solid var(--alon-border-primary);
}

.alon-search-dropdown::-webkit-scrollbar-thumb {
  background: var(--alon-text-primary);
  border: 2px solid var(--alon-background-primary);
  border-radius: 0;
}

.alon-search-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--alon-color-primary-800);
  outline: 2px solid var(--alon-text-primary);
}

/* Windows High Contrast Mode support */
@media (prefers-contrast: high) {
  * {
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border-color: ButtonText !important;
  }
  
  *:focus {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }
  
  a {
    color: LinkText !important;
  }
  
  a:hover,
  a:focus {
    color: HighlightText !important;
    background-color: Highlight !important;
  }
}