Skip to content

update canonical CSS classes to match new design system #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
lowisren wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

update canonical CSS classes to match new design system #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .claude/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 *)"
]
}
}
12 changes: 6 additions & 6 deletions src/components/cms/modular-block-renderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
28 changes: 14 additions & 14 deletions src/components/layout/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -62,24 +62,24 @@ 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">
<a
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" />
Expand All @@ -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" />
Expand All @@ -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">
Expand All @@ -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}
Expand All @@ -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>{" "}
Expand Down
14 changes: 7 additions & 7 deletions src/components/streaming/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
>
Expand All @@ -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"
/>

Expand Down Expand Up @@ -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"
>
Expand All @@ -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"
>
Expand All @@ -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"
)}
/>
Expand Down
22 changes: 11 additions & 11 deletions src/components/streaming/title-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand All @@ -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 ? (
Expand All @@ -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>
)}

Expand All @@ -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" />
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down