From aa7838983c699f28f3ba27368ae87ed2d6723847 Mon Sep 17 00:00:00 2001
From: Lo Etheridge <lo.etheridge@contentstack.com>
Date: Tue, 21 Jul 2026 09:35:47 -0400
Subject: [PATCH] update canonical CSS classes to match new design system

---
 .claude/settings.json                         | 10 +++++++
 src/components/cms/modular-block-renderer.tsx | 12 ++++----
 src/components/layout/footer.tsx              | 28 +++++++++----------
 src/components/streaming/hero.tsx             | 14 +++++-----
 src/components/streaming/title-card.tsx       | 22 +++++++--------
 5 files changed, 48 insertions(+), 38 deletions(-)
 create mode 100644 .claude/settings.json

diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..8068bb1
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(mkdir -p /Users/locontentstack/.claude/projects/-Users-locontentstack-projects-streaming-flixstack/memory)",
+      "Bash(mv /Users/locontentstack/projects/streaming/flixstack/memory/*.md /Users/locontentstack/.claude/projects/-Users-locontentstack-projects-streaming-flixstack/memory/)",
+      "Bash(git checkout *)",
+      "Bash(git add *)"
+    ]
+  }
+}
diff --git a/src/components/cms/modular-block-renderer.tsx b/src/components/cms/modular-block-renderer.tsx
index 12bcefb..ceff90d 100644
--- a/src/components/cms/modular-block-renderer.tsx
+++ b/src/components/cms/modular-block-renderer.tsx
@@ -40,18 +40,18 @@ export function ModularBlockRenderer({ blocks }: ModularBlockRendererProps) {
                 key={`promo-${i}`}
                 data-cs-entry={promo.uid}
                 data-cs-content-type="promo_block"
-                className={`flex flex-col md:flex-row ${isReversed ? "md:flex-row-reverse" : ""} gap-8 items-center px-4 sm:px-6 lg:px-8 py-8 rounded-2xl bg-[var(--color-bg-surface)] border border-[var(--color-border)] mx-4 sm:mx-6 lg:mx-8`}
+                className={`flex flex-col md:flex-row ${isReversed ? "md:flex-row-reverse" : ""} gap-8 items-center px-4 sm:px-6 lg:px-8 py-8 rounded-2xl bg-surface border border-border mx-4 sm:mx-6 lg:mx-8`}
               >
                 <div className="flex-1 max-w-xl">
-                  <h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-3">
+                  <h2 className="text-2xl font-bold text-(--color-text-primary) mb-3">
                     {promo.headline}
                   </h2>
-                  <p className="text-[var(--color-text-secondary)] leading-relaxed mb-5">
+                  <p className="text-text-secondary leading-relaxed mb-5">
                     {promo.body}
                   </p>
                   <Link
                     href={promo.cta_url}
-                    className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-[var(--color-accent)] text-[var(--color-accent-foreground)] font-semibold text-sm hover:bg-[var(--color-accent-hover)] transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)]"
+                    className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-accent text-accent-foreground font-semibold text-sm hover:bg-accent-hover transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring)"
                   >
                     {promo.cta_label}
                   </Link>
@@ -85,12 +85,12 @@ export function ModularBlockRenderer({ blocks }: ModularBlockRendererProps) {
                     style={{ backgroundColor: spotlight.genre.color_accent }}
                     aria-hidden="true"
                   />
-                  <h2 className="text-xl font-bold text-[var(--color-text-primary)]">
+                  <h2 className="text-xl font-bold text-(--color-text-primary)">
                     {spotlight.genre.title}
                   </h2>
                   <Link
                     href={`/genre/${spotlight.genre.slug}`}
-                    className="text-sm text-[var(--color-accent)] hover:underline ml-auto focus-visible:outline-2 focus-visible:outline-[var(--color-focus-ring)] rounded-sm"
+                    className="text-sm text-accent hover:underline ml-auto focus-visible:outline-2 focus-visible:outline-(--color-focus-ring) rounded-sm"
                   >
                     View all →
                   </Link>
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 2cde74a..4e8cfc5 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -52,7 +52,7 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
   const FOOTER_COLUMNS = footer?.columns && footer.columns.length > 0 ? footer.columns : FALLBACK_FOOTER_COLUMNS;
   return (
     <footer
-      className="border-t border-[var(--color-border)] bg-[var(--color-bg-surface)] mt-auto"
+      className="border-t border-border bg-surface mt-auto"
       role="contentinfo"
       aria-label="Site footer"
     >
@@ -62,16 +62,16 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
           <div className="col-span-2 md:col-span-1">
             <Link
               href="/"
-              className="flex items-center gap-2 mb-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)] rounded-md w-fit"
+              className="flex items-center gap-2 mb-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring) rounded-md w-fit"
               aria-label={`${siteName} home`}
             >
-              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--color-accent)]">
-                <Play className="h-4 w-4 fill-[var(--color-accent-foreground)] text-[var(--color-accent-foreground)]" aria-hidden="true" />
+              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent">
+                <Play className="h-4 w-4 fill-accent-foreground text-accent-foreground" aria-hidden="true" />
               </span>
               <span className="text-lg font-bold">{siteName}</span>
             </Link>
-            <p className="text-sm text-[var(--color-text-secondary)] max-w-xs leading-relaxed">
-              A ContentStack starter template. Learn to build composable digital
+            <p className="text-sm text-text-secondary max-w-xs leading-relaxed">
+              A Contentstack starter template. Learn to build composable digital
               experiences with real-world patterns.
             </p>
             <div className="flex items-center gap-3 mt-4">
@@ -79,7 +79,7 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
                 href="https://contentstack.com"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)] rounded-md p-1"
+                className="text-text-secondary hover:text-(--color-text-primary) transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring) rounded-md p-1"
                 aria-label="ContentStack (opens in new tab)"
               >
                 <GitBranch className="h-5 w-5" aria-hidden="true" />
@@ -88,7 +88,7 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
                 href="https://twitter.com/contentstack"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)] rounded-md p-1"
+                className="text-text-secondary hover:text-(--color-text-primary) transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring) rounded-md p-1"
                 aria-label="ContentStack on Twitter (opens in new tab)"
               >
                 <XIcon className="h-5 w-5" aria-hidden="true" />
@@ -99,7 +99,7 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
           {/* Link columns */}
           {FOOTER_COLUMNS.map((col) => (
             <div key={col.heading}>
-              <h2 className="text-sm font-semibold text-[var(--color-text-primary)] mb-3" {...col.$?.heading}>
+              <h2 className="text-sm font-semibold text-(--color-text-primary) mb-3" {...col.$?.heading}>
                 {col.heading}
               </h2>
               <ul className="space-y-2" role="list">
@@ -109,7 +109,7 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
                       href={link.href}
                       target={link.open_in_new_tab ? "_blank" : undefined}
                       rel={link.open_in_new_tab ? "noopener noreferrer" : undefined}
-                      className="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-focus-ring)] rounded-sm"
+                      className="text-sm text-text-secondary hover:text-(--color-text-primary) transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-focus-ring) rounded-sm"
                       {...link.$?.label}
                     >
                       {link.label}
@@ -121,17 +121,17 @@ export function Footer({ footer, siteName = "Flixstack" }: FooterProps) {
           ))}
         </div>
 
-        <div className="mt-10 pt-6 border-t border-[var(--color-border)] flex flex-col sm:flex-row items-center justify-between gap-4">
-          <p className="text-xs text-[var(--color-text-disabled)]" {...footer?.$?.legal_text}>
+        <div className="mt-10 pt-6 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="text-xs text-text-disabled" {...footer?.$?.legal_text}>
             {footer?.legal_text || `© ${new Date().getFullYear()} ${siteName}. All rights reserved.`}
           </p>
-          <p className="text-xs text-[var(--color-text-disabled)]">
+          <p className="text-xs text-text-disabled">
             Built with{" "}
             <a
               href="https://contentstack.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-[var(--color-accent)] hover:underline focus-visible:outline-2 focus-visible:outline-[var(--color-focus-ring)] rounded-sm"
+              className="text-accent hover:underline focus-visible:outline-2 focus-visible:outline-(--color-focus-ring) rounded-sm"
             >
               Contentstack
             </a>{" "}
diff --git a/src/components/streaming/hero.tsx b/src/components/streaming/hero.tsx
index 93913d6..2081488 100644
--- a/src/components/streaming/hero.tsx
+++ b/src/components/streaming/hero.tsx
@@ -43,7 +43,7 @@ export function Hero({ banners }: HeroProps) {
       aria-label="Featured content"
       aria-live="polite"
       aria-atomic="true"
-      className="relative w-full h-[60vh] min-h-[400px] max-h-[700px] overflow-hidden bg-[var(--color-bg-elevated)]"
+      className="relative w-full h-[60vh] min-h-100 max-h-175 overflow-hidden bg-elevated"
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
     >
@@ -61,11 +61,11 @@ export function Hero({ banners }: HeroProps) {
 
       {/* Gradient overlay */}
       <div
-        className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-transparent"
+        className="absolute inset-0 bg-linear-to-r from-black/80 via-black/40 to-transparent"
         aria-hidden="true"
       />
       <div
-        className="absolute inset-0 bg-gradient-to-t from-[var(--color-bg-base)] via-transparent to-transparent"
+        className="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent"
         aria-hidden="true"
       />
 
@@ -126,7 +126,7 @@ export function Hero({ banners }: HeroProps) {
               "absolute left-4 top-1/2 -translate-y-1/2",
               "flex h-10 w-10 items-center justify-center rounded-full",
               "bg-black/40 text-white hover:bg-black/60 transition-colors",
-              "focus-visible:outline-2 focus-visible:outline-[var(--color-focus-ring)]"
+              "focus-visible:outline-2 focus-visible:outline-(--color-focus-ring)"
             )}
             aria-label="Previous featured title"
           >
@@ -138,7 +138,7 @@ export function Hero({ banners }: HeroProps) {
               "absolute right-4 top-1/2 -translate-y-1/2",
               "flex h-10 w-10 items-center justify-center rounded-full",
               "bg-black/40 text-white hover:bg-black/60 transition-colors",
-              "focus-visible:outline-2 focus-visible:outline-[var(--color-focus-ring)]"
+              "focus-visible:outline-2 focus-visible:outline-(--color-focus-ring)"
             )}
             aria-label="Next featured title"
           >
@@ -159,9 +159,9 @@ export function Hero({ banners }: HeroProps) {
                 aria-label={`Slide ${i + 1}: ${b.title}`}
                 onClick={() => setCurrent(i)}
                 className={cn(
-                  "h-2 rounded-full transition-all duration-300 focus-visible:outline-2 focus-visible:outline-[var(--color-focus-ring)]",
+                  "h-2 rounded-full transition-all duration-300 focus-visible:outline-2 focus-visible:outline-(--color-focus-ring)",
                   i === current
-                    ? "w-6 bg-[var(--color-accent)]"
+                    ? "w-6 bg-accent"
                     : "w-2 bg-white/40 hover:bg-white/60"
                 )}
               />
diff --git a/src/components/streaming/title-card.tsx b/src/components/streaming/title-card.tsx
index 78d95c8..043ccd5 100644
--- a/src/components/streaming/title-card.tsx
+++ b/src/components/streaming/title-card.tsx
@@ -33,7 +33,7 @@ export function TitleCard({
 
   return (
     <article
-      className="group relative flex-shrink-0 rounded-lg overflow-hidden bg-[var(--color-bg-elevated)] transition-transform duration-200 hover:scale-105 hover:z-10 focus-within:scale-105 focus-within:z-10"
+      className="group relative shrink-0 rounded-lg overflow-hidden bg-elevated transition-transform duration-200 hover:scale-105 hover:z-10 focus-within:scale-105 focus-within:z-10"
       style={{ width: fullWidth ? "100%" : layout === "portrait" ? "160px" : "280px" }}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
@@ -43,8 +43,8 @@ export function TitleCard({
       {/* Thumbnail */}
       <div
         className={cn(
-          "relative overflow-hidden bg-[var(--color-bg-elevated)]",
-          layout === "portrait" ? "aspect-[2/3]" : "aspect-video"
+          "relative overflow-hidden bg-elevated",
+          layout === "portrait" ? "aspect-2/3" : "aspect-video"
         )}
       >
         {!imgError && title.thumbnail ? (
@@ -58,8 +58,8 @@ export function TitleCard({
             {...title.$?.thumbnail}
           />
         ) : (
-          <div className="absolute inset-0 flex items-center justify-center bg-[var(--color-bg-elevated)]">
-            <Play className="h-8 w-8 text-[var(--color-text-disabled)]" aria-hidden="true" />
+          <div className="absolute inset-0 flex items-center justify-center bg-elevated">
+            <Play className="h-8 w-8 text-text-disabled" aria-hidden="true" />
           </div>
         )}
 
@@ -75,7 +75,7 @@ export function TitleCard({
             <Link
               href={href}
               tabIndex={-1}
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--color-accent)] text-[var(--color-accent-foreground)] hover:bg-[var(--color-accent-hover)] transition-colors"
+              className="flex h-10 w-10 items-center justify-center rounded-full bg-accent text-accent-foreground hover:bg-accent-hover transition-colors"
               aria-label={`Play ${title.title}`}
             >
               <Play className="h-4 w-4 fill-current" aria-hidden="true" />
@@ -104,21 +104,21 @@ export function TitleCard({
       <div className="p-3">
         <Link
           href={href}
-          className="block font-semibold text-sm text-[var(--color-text-primary)] hover:text-[var(--color-accent)] transition-colors line-clamp-1 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--color-focus-ring)] rounded-sm"
+          className="block font-semibold text-sm text-(--color-text-primary) hover:text-accent transition-colors line-clamp-1 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--color-focus-ring) rounded-sm"
           {...title.$?.title}
         >
           {title.title}
         </Link>
         <div className="flex items-center gap-2 mt-1">
-          <span className="text-xs text-[var(--color-text-secondary)]">
+          <span className="text-xs text-text-secondary">
             {new Date(title.release_date).getFullYear()}
           </span>
           {runtime && (
-            <span className="text-xs text-[var(--color-text-secondary)]">
+            <span className="text-xs text-text-secondary">
               · {formatRuntime(runtime)}
             </span>
           )}
-          <span className="flex items-center gap-0.5 text-xs text-[var(--color-accent)] ml-auto">
+          <span className="flex items-center gap-0.5 text-xs text-accent ml-auto">
             <Star className="h-3 w-3 fill-current" aria-hidden="true" />
             <span aria-label={`Score: ${title.score} out of 100`}>{title.score}</span>
           </span>
@@ -127,7 +127,7 @@ export function TitleCard({
           {title.genres.slice(0, 2).map((g) => (
             <span
               key={g.uid}
-              className="text-xs text-[var(--color-text-disabled)] leading-none"
+              className="text-xs text-text-disabled leading-none"
             >
               {g.title}
             </span>