Merge pull request #1205 from PR0M3TH3AN/codex/refactor-inline-styles-to-class-names

Replace inline styles with semantic classes

components/video-modal.html

@@ -269,9 +269,8 @@
                       <span class="video-modal__reaction-meter-label" data-reaction-meter-label>No reactions yet</span>
                       <div class="video-modal__reaction-meter-track" aria-hidden="true">
                         <div
-                          class="video-modal__reaction-meter-fill"
+                          class="video-modal__reaction-meter-fill video-modal__reaction-meter-fill--empty"
                           data-reaction-meter-fill
-                          style="width: 0%"
                         ></div>
                       </div>
                       <span class="sr-only" data-reaction-meter-sr>No reactions yet</span>

css/tailwind.source.css

@@ -2435,7 +2435,6 @@
     inset-inline-start: 0;
     inset-block-start: 0;
     block-size: 100%;
-    inline-size: 0%;
     max-inline-size: 100%;
     background-image: linear-gradient(
       90deg,
@@ -2445,6 +2444,11 @@
     transition: inline-size var(--motion-duration-base) var(--motion-ease-out);
   }
 
+  .video-modal__reaction-meter-fill--empty {
+    inline-size: 0%;
+    width: 0%;
+  }
+
   .video-modal__actions-group {
     @apply flex basis-full flex-wrap items-start justify-start gap-3 md:basis-auto md:justify-end;
   }
@@ -3321,6 +3325,29 @@
     padding: var(--space-md);
   }
 
+  .docs-popover-scenarios__scroll-spacer {
+    height: 45rem;
+  }
+
+  .qr-code__table {
+    border: 0;
+    border-collapse: collapse;
+  }
+
+  .qr-code__cell {
+    border: 0;
+    border-collapse: collapse;
+    padding: 0;
+    margin: 0;
+    width: var(--qr-code-cell-width);
+    height: var(--qr-code-cell-height);
+    background-color: var(--qr-code-color-light);
+  }
+
+  .qr-code__cell--dark {
+    background-color: var(--qr-code-color-dark);
+  }
+
   .fade-in {
     opacity: 0;
     animation: interface-fade-in 280ms ease-out forwards;

docs/popover-scenarios.html

@@ -129,7 +129,7 @@
           class="h-64 overflow-auto rounded-xl border border-border bg-surface-alt p-md"
           data-test-scroll-region
         >
-          <div class="space-y-lg" style="height: 720px">
+          <div class="space-y-lg docs-popover-scenarios__scroll-spacer">
             <p class="text-sm text-muted">
               Scroll to the bottom to find the trigger used in automated tests.
             </p>

js/utils/qrcode.js

@@ -254,13 +254,21 @@ if (hasDocument) {
 			var nCount = oQRCode.getModuleCount();
 			var nWidth = Math.floor(_htOption.width / nCount);
 			var nHeight = Math.floor(_htOption.height / nCount);
-			var aHTML = ['<table style="border:0;border-collapse:collapse;">'];
+			var aHTML = ['<table class="qr-code__table">'];
+
+			_el.style.setProperty("--qr-code-color-dark", _htOption.colorDark);
+			_el.style.setProperty("--qr-code-color-light", _htOption.colorLight);
+			_el.style.setProperty("--qr-code-cell-width", nWidth + "px");
+			_el.style.setProperty("--qr-code-cell-height", nHeight + "px");
 			
 			for (var row = 0; row < nCount; row++) {
 				aHTML.push('<tr>');
 				
 				for (var col = 0; col < nCount; col++) {
-					aHTML.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:' + nWidth + 'px;height:' + nHeight + 'px;background-color:' + (oQRCode.isDark(row, col) ? _htOption.colorDark : _htOption.colorLight) + ';"></td>');
+					var cellClass = oQRCode.isDark(row, col)
+						? "qr-code__cell qr-code__cell--dark"
+						: "qr-code__cell";
+					aHTML.push('<td class="' + cellClass + '"></td>');
 				}
 				
 				aHTML.push('</tr>');