From 3cd05329726b50f11fcbd5688bd781f1c5a57f03 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 23 Jan 2026 15:16:28 +0000
Subject: [PATCH] Refactor hardcoded styles to use token constants

Replaces hardcoded breakpoint values in `VideoCard.js` and `tailwind.source.css` with token constants and valid CSS calculations. Updates the token linting script to enforce these rules by removing the previous allowlists for these files. This ensures that all UI elements are defined by the central styling system.
---
 css/tailwind.source.css         |  2 +-
 js/designSystem.js              |  2 ++
 js/ui/components/VideoCard.js   |  7 +++++--
 scripts/check-design-tokens.mjs | 21 +++------------------
 4 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index ac570e85..71cdb27c 100644
--- a/css/tailwind.source.css
+++ b/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;
     }
diff --git a/js/designSystem.js b/js/designSystem.js
index ab171cc5..3e194b71 100644
--- a/js/designSystem.js
+++ b/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;
 }
diff --git a/js/ui/components/VideoCard.js b/js/ui/components/VideoCard.js
index bec9b9e3..b241cefb 100644
--- a/js/ui/components/VideoCard.js
+++ b/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) {
diff --git a/scripts/check-design-tokens.mjs b/scripts/check-design-tokens.mjs
index 912eeedd..85d6d865 100755
--- a/scripts/check-design-tokens.mjs
+++ b/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;
 }