[mirotalk] - feat(ui): foundational a11y + design tokens

Author: miroslavpejic85

.env.template

@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.8.50 - Environment Configuration
+# MiroTalk P2P v.1.8.51 - Environment Configuration
 # ====================================================
 
 # App environment

app/src/config.template.js

@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.8.50 - Configuration File
+ * MiroTalk P2P v.1.8.51 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.

app/src/server.js

@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.50
+ * @version 1.8.51
  *
  */
 

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.8.50",
+    "version": "1.8.51",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
@@ -59,20 +59,20 @@
         "express-openid-connect": "^3.0.0",
         "express-rate-limit": "^8.5.2",
         "he": "^1.2.0",
-        "helmet": "^8.1.0",
+        "helmet": "^8.2.0",
         "httpolyglot": "0.1.2",
         "js-yaml": "^4.1.1",
         "jsdom": "^29.1.1",
         "jsonwebtoken": "^9.0.3",
         "nodemailer": "^8.0.7",
-        "openai": "^6.38.0",
+        "openai": "^6.39.0",
         "qs": "^6.15.2",
         "socket.io": "^4.8.3",
         "swagger-ui-express": "^5.0.1",
         "uuid": "14.0.0"
     },
     "devDependencies": {
-        "mocha": "^11.7.5",
+        "mocha": "^11.7.6",
         "node-fetch": "^3.3.2",
         "nodemon": "^3.1.14",
         "prettier": "3.8.3",

package.json

@@ -0,0 +1,103 @@
+/*
+ * MiroTalk P2P — Shared design tokens.
+ *
+ * Common values (colors, spacing, radius, shadows, motion, z-index)
+ * used across all pages. Tokens are prefixed with `--ds-` so they
+ * don't clash with existing CSS variables.
+ */
+
+:root {
+    /* Colors */
+    --ds-brand-50: #eef3ff;
+    --ds-brand-100: #d9e3ff;
+    --ds-brand-300: #8aa9ff;
+    --ds-brand-500: #4678f9;
+    --ds-brand-600: #376df9;
+    --ds-brand-700: #2a5ad6;
+
+    --ds-neutral-0: #ffffff;
+    --ds-neutral-50: #f9faff;
+    --ds-neutral-100: #e8ecf1;
+    --ds-neutral-300: #b0b6c2;
+    --ds-neutral-500: #6a6f82;
+    --ds-neutral-700: #292b32;
+    --ds-neutral-800: #1d2026;
+    --ds-neutral-900: #0f1117;
+
+    --ds-success: #22c55e;
+    --ds-warning: #ffc107;
+    --ds-danger: #e74c3c;
+    --ds-info: #5a8aff;
+
+    /* Spacing (4px base) */
+    --ds-space-1: 4px;
+    --ds-space-2: 8px;
+    --ds-space-3: 12px;
+    --ds-space-4: 16px;
+    --ds-space-5: 20px;
+    --ds-space-6: 24px;
+    --ds-space-7: 32px;
+    --ds-space-8: 40px;
+    --ds-space-9: 48px;
+    --ds-space-10: 64px;
+
+    /* Border radius */
+    --ds-radius-xs: 4px;
+    --ds-radius-sm: 6px;
+    --ds-radius-md: 10px;
+    --ds-radius-lg: 14px;
+    --ds-radius-xl: 20px;
+    --ds-radius-full: 999px;
+
+    /* Shadows */
+    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
+    --ds-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.22);
+    --ds-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.32);
+    --ds-shadow-focus: 0 0 0 2px var(--ds-brand-500), 0 0 0 4px rgba(70, 120, 249, 0.28);
+
+    /* Stacking order (use these instead of raw z-index values) */
+    --ds-z-base: 1;
+    --ds-z-grid: 5;
+    --ds-z-toolbar: 20;
+    --ds-z-popover: 40;
+    --ds-z-panel: 60;
+    --ds-z-overlay: 80;
+    --ds-z-modal: 100;
+    --ds-z-toast: 200;
+    --ds-z-tooltip: 300;
+
+    /* Motion */
+    --ds-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --ds-ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
+    --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --ds-duration-fast: 120ms;
+    --ds-duration-base: 180ms;
+    --ds-duration-slow: 240ms;
+
+    /* Minimum touch target size */
+    --ds-touch-min: 44px;
+
+    /* Typography */
+    --ds-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --ds-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+/* Visible focus ring when navigating with keyboard. */
+:where(button, [role='button'], a, input, select, textarea, summary, [tabindex]):focus-visible {
+    outline: 2px solid var(--ds-brand-500);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px rgba(70, 120, 249, 0.28);
+    border-radius: var(--ds-radius-sm);
+}
+
+/* Honor the user's "reduce motion" system preference. */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.001ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.001ms !important;
+        scroll-behavior: auto !important;
+    }
+}

public/css/_tokens.css

@@ -109,7 +109,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.8.50',
+        title: 'WebRTC P2P v1.8.51',
         html: `
             <button 
                 id="support-button"