Complete 2.4.2: Icon Size Variants Implementation

index.php

@@ -326,7 +326,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
                 </div>
                 <div class="video-player__header-controls">
                     <button class="stream-stats__refresh-btn" data-action="manual-refresh" title="Manual Stream Refresh" aria-label="Refresh stream">
-                        <span class="icon-refresh"></span> Refresh
+                        <span class="icon-refresh icon-sm"></span> Refresh
                     </button>
                     <select class="video-player__quality-selector" id="qualitySelector" style="display:none;" aria-label="Video quality">
                         <option value="auto">Auto Quality</option>
@@ -381,7 +381,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
             </div>
 
             <section class="chat__messages" id="chatMessages" aria-live="polite" aria-label="Chat messages" role="log" aria-atomic="false">
-                <div class="chat__empty-state">No messages yet. Be the first to say hello! <span class="icon-wave"></span></div>
+                <div class="chat__empty-state">No messages yet. Be the first to say hello! <span class="icon-wave icon-md"></span></div>
             </section>
 
             <div class="chat__typing-indicator" id="typingIndicator" aria-live="assertive">

static/css/icons.css

@@ -89,3 +89,87 @@
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 16l-4-4m0 0l4-4m-4 4h18'%3E%3C/svg%3E") no-repeat center center;
     background-size: contain;
 }
+
+/* =================================================================
+   ICON SIZE MODIFIERS
+   ================================================================= */
+
+/* Extra small icons (12px) */
+.icon-xs {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+}
+
+/* Small icons (16px) - Default fallback */
+.icon-sm {
+    width: var(--icon-size-sm);
+    height: var(--icon-size-sm);
+}
+
+/* Medium icons (20px) */
+.icon-md {
+    width: var(--icon-size-md);
+    height: var(--icon-size-md);
+}
+
+/* Large icons (24px) */
+.icon-lg {
+    width: var(--icon-size-lg);
+    height: var(--icon-size-lg);
+}
+
+/* Extra large icons (32px) */
+.icon-xl {
+    width: var(--icon-size-xl);
+    height: var(--icon-size-xl);
+}
+
+/* =================================================================
+   RESPONSIVE ICON SCALING
+   ================================================================= */
+
+/* Responsive size variants that scale with viewport */
+.icon-responsive {
+    --current-icon-size: var(--icon-size-sm);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+.icon-responsive-xs {
+    --current-icon-size: var(--icon-size-responsive-xs);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+.icon-responsive-sm {
+    --current-icon-size: var(--icon-size-responsive-sm);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+.icon-responsive-md {
+    --current-icon-size: var(--icon-size-responsive-md);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+.icon-responsive-lg {
+    --current-icon-size: var(--icon-size-responsive-lg);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+.icon-responsive-xl {
+    --current-icon-size: var(--icon-size-responsive-xl);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+/* Override defaults for specific icon types if needed */
+/* Add icon-specific overrides here as needed */

static/css/variables.css

@@ -277,6 +277,24 @@
     --z-tooltip: 1070;
     --z-toast: 1080;
 
+    /* =================================================================
+       ICON SIZE SCALE
+       ================================================================= */
+
+    /* Icon Size Scale - Consistent scaling for SVG icons */
+    --icon-size-xs: 0.75rem;    /* 12px - Small indicators */
+    --icon-size-sm: 1rem;       /* 16px - Default size */
+    --icon-size-md: 1.25rem;    /* 20px - Button icons */
+    --icon-size-lg: 1.5rem;     /* 24px - Navigation elements */
+    --icon-size-xl: 2rem;       /* 32px - Hero elements */
+
+    /* Responsive icon sizes based on viewport */
+    --icon-size-responsive-xs: clamp(0.625rem, 2vw, var(--icon-size-xs));
+    --icon-size-responsive-sm: clamp(0.875rem, 2.5vw, var(--icon-size-sm));
+    --icon-size-responsive-md: clamp(1rem, 3vw, var(--icon-size-md));
+    --icon-size-responsive-lg: clamp(1.25rem, 3.5vw, var(--icon-size-lg));
+    --icon-size-responsive-xl: clamp(1.5rem, 4vw, var(--icon-size-xl));
+
     /* =================================================================
        TRANSITIONS & ANIMATIONS
        ================================================================= */