Merge pull request #1582 from PR0M3TH3AN/unify-styling-tokens-15997766081724410140

Refactor hardcoded styles to use token constants

css/tailwind.source.css

@@ -5829,7 +5829,7 @@
     min-height: var(--space-md);
   }
 
-  @media (max-width: 767.98px) {
+  @media (max-width: calc(theme("screens.md") - 0.02px)) {
     .dm-app-shell[data-dm-view="list"] .dm-app-shell__main {
       display: none !important;
     }

js/designSystem.js

@@ -6,6 +6,8 @@ const FALLBACK_CONTEXT = Object.freeze({
   isNew: () => true,
 });
 
+export const BREAKPOINT_LG = 1024;
+
 export function getDesignSystemMode() {
   return NEW_MODE;
 }

js/ui/components/VideoCard.js

@@ -1,4 +1,7 @@
-import { normalizeDesignSystemContext } from "../../designSystem.js";
+import {
+  normalizeDesignSystemContext,
+  BREAKPOINT_LG,
+} from "../../designSystem.js";
 import { updateVideoCardSourceVisibility } from "../../utils/cardSourceVisibility.js";
 import { sanitizeProfileMediaUrl } from "../../utils/profileMedia.js";
 import { userLogger } from "../../utils/logger.js";
@@ -3046,7 +3049,7 @@ export class VideoCard {
           // Prevent active state on desktop to avoid conflicting with hover
           const isDesktop =
             typeof window !== "undefined" &&
-            window.matchMedia("(min-width: 1024px)").matches;
+            window.matchMedia(`(min-width: ${BREAKPOINT_LG}px)`).matches;
 
           for (const entry of entries) {
             if (isDesktop) {

scripts/check-design-tokens.mjs

@@ -35,15 +35,8 @@ const VALUE_ALLOWLIST = new Map([
       // Ignore matches inside var() declarations that happen to contain units in the name
       (value, snippet) =>
         snippet.includes(`var(--`) && snippet.includes(value),
-      // Mobile breakpoint used in media query
-      (value) => value === "767.98px",
-    ],
-  ],
-  [
-    "js/ui/components/VideoCard.js",
-    [
-      // Desktop breakpoint used in media query match
-      (value) => value === "1024px",
+      // Safe literal for media query calculation where vars are not supported
+      (value) => value === "0.02px",
     ],
   ],
 ]);
@@ -263,11 +256,7 @@ function collectViolations(filePath, content) {
   return violations;
 }
 
-const LEGACY_BRACKET_ALLOWLIST = new Set([
-  "min-h-[80px]",
-  "min-h-[96px]",
-  "w-[calc(100%-3rem)]",
-]);
+const LEGACY_BRACKET_ALLOWLIST = new Set([]);
 
 function isAllowedBracketUtility(bracketValue) {
   const inner = bracketValue.slice(1, -1).trim().toLowerCase();
@@ -283,10 +272,6 @@ function isAllowedBracketUtility(bracketValue) {
     return true;
   }
 
-  if (inner === "80px" || inner === "96px" || inner === "calc(100%-3rem)") {
-      return true;
-  }
-
   return false;
 }