refactor(website): substrate migration batch 5 — marketing components off inline styles

apps/website/src/components/blog/AuthorByline.tsx

@@ -2,28 +2,20 @@ import type { Author } from '../../lib/blog-authors';
 
 export function AuthorByline({ author }: { author: Author }) {
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 12,
-        fontSize: 14,
-        opacity: 0.8,
-      }}
-    >
+    <div className="author-byline">
       {author.avatar ? (
         <img
           src={author.avatar}
           alt={`${author.name} avatar`}
           width={32}
           height={32}
-          style={{ borderRadius: '50%' }}
+          className="author-byline-avatar"
         />
       ) : null}
       <div>
-        <span style={{ fontWeight: 600 }}>{author.name}</span>
+        <span className="author-byline-name">{author.name}</span>
         {author.role ? (
-          <span style={{ opacity: 0.7 }}> · {author.role}</span>
+          <span className="author-byline-role"> · {author.role}</span>
         ) : null}
       </div>
     </div>

apps/website/src/components/blog/BlogTagFilter.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 
 interface BlogTagFilterProps {
   /** Currently active tag from ?tag=. Undefined when on /blog. */
@@ -8,47 +7,17 @@ interface BlogTagFilterProps {
   tags: string[];
 }
 
-const PILL_BASE: React.CSSProperties = {
-  padding: '6px 12px',
-  borderRadius: 999,
-  fontSize: 13,
-  fontWeight: 500,
-  textDecoration: 'none',
-  lineHeight: 1.2,
-  cursor: 'pointer',
-  display: 'inline-block',
-};
-
-const ACTIVE: React.CSSProperties = {
-  ...PILL_BASE,
-  background: tokens.colors.accent,
-  color: '#ffffff',
-};
-
-const INACTIVE: React.CSSProperties = {
-  ...PILL_BASE,
-  background: tokens.colors.accentSurface,
-  color: tokens.colors.accent,
-};
-
 export function BlogTagFilter({ activeTag, tags }: BlogTagFilterProps) {
   const sorted = [...tags].sort((a, b) => a.localeCompare(b));
   return (
-    <div
-      style={{
-        display: 'flex',
-        gap: 8,
-        flexWrap: 'wrap',
-        marginBottom: 32,
-      }}
-    >
+    <div className="blog-tag-filter">
       {/* "All" pill */}
       {activeTag ? (
-        <Link href="/blog" style={INACTIVE}>
+        <Link href="/blog" className="blog-tag-pill">
           All
         </Link>
       ) : (
-        <span style={{ ...ACTIVE, cursor: 'default' }} aria-current="page">
+        <span className="blog-tag-pill" data-active data-static aria-current="page">
           All
         </span>
       )}
@@ -61,13 +30,14 @@ export function BlogTagFilter({ activeTag, tags }: BlogTagFilterProps) {
           <Link
             key={tag}
             href={href}
-            style={ACTIVE}
+            className="blog-tag-pill"
+            data-active
             aria-current="page"
           >
             {tag}
           </Link>
         ) : (
-          <Link key={tag} href={href} style={INACTIVE}>
+          <Link key={tag} href={href} className="blog-tag-pill">
             {tag}
           </Link>
         );

apps/website/src/components/blog/FeaturedPostCard.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import type { Post } from '../../lib/blog';
 import { formatCardDate, readingTimeMin } from '../../lib/blog';
 import { getAuthor } from '../../lib/blog-authors';
@@ -16,65 +15,18 @@ export function FeaturedPostCard({ post }: { post: Post }) {
       href={`/blog/${slug}`}
       data-ui="card"
       data-hoverable
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 16,
-        padding: 32,
-        borderRadius: 16,
-        background: tokens.surfaces.surface,
-        border: `1px solid ${tokens.colors.accent}`,
-        color: tokens.colors.textPrimary,
-        textDecoration: 'none',
-        cursor: 'pointer',
-        marginBottom: 32,
-      }}
+      className="featured-post-card"
     >
       <Eyebrow tone="accent">Featured</Eyebrow>
-      <h2
-        style={{
-          fontFamily: tokens.typography.h2.family,
-          fontSize: tokens.typography.h2.size,
-          lineHeight: tokens.typography.h2.line,
-          fontWeight: 700,
-          letterSpacing: '-0.02em',
-          margin: 0,
-        }}
-      >
+      <h2 className="featured-post-card-title">
         {frontmatter.title}
       </h2>
-      <p
-        style={{
-          fontFamily: tokens.typography.bodyLg.family,
-          fontSize: tokens.typography.bodyLg.size,
-          lineHeight: tokens.typography.bodyLg.line,
-          color: tokens.colors.textSecondary,
-          margin: 0,
-        }}
-      >
+      <p className="featured-post-card-description">
         {frontmatter.description}
       </p>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: 16,
-          marginTop: 8,
-          flexWrap: 'wrap',
-        }}
-      >
+      <div className="featured-post-card-footer">
         <AuthorByline author={author} />
-        <span
-          style={{
-            fontFamily: tokens.typography.eyebrow.family,
-            fontSize: tokens.typography.eyebrow.size,
-            fontWeight: tokens.typography.eyebrow.weight,
-            letterSpacing: tokens.typography.eyebrow.letterSpacing,
-            textTransform: tokens.typography.eyebrow.transform,
-            color: tokens.colors.textMuted,
-          }}
-        >
+        <span className="featured-post-card-meta">
           {formatCardDate(frontmatter.date)} · {minutes} min read
         </span>
       </div>

apps/website/src/components/blog/PostCard.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 import type { Post } from '../../lib/blog';
 import { formatCardDate, readingTimeMin } from '../../lib/blog';
 
@@ -12,66 +11,21 @@ export function PostCard({ post }: { post: Post }) {
       href={`/blog/${slug}`}
       data-ui="card"
       data-hoverable
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 12,
-        padding: 24,
-        borderRadius: 12,
-        background: tokens.surfaces.surfaceTinted,
-        border: `1px solid ${tokens.surfaces.border}`,
-        color: tokens.colors.textPrimary,
-        textDecoration: 'none',
-        cursor: 'pointer',
-      }}
+      className="post-card"
     >
-      <span
-        style={{
-          fontFamily: tokens.typography.eyebrow.family,
-          fontSize: tokens.typography.eyebrow.size,
-          fontWeight: tokens.typography.eyebrow.weight,
-          letterSpacing: tokens.typography.eyebrow.letterSpacing,
-          textTransform: tokens.typography.eyebrow.transform,
-          color: tokens.colors.textMuted,
-        }}
-      >
+      <span className="post-card-meta">
         {formatCardDate(frontmatter.date)} · {minutes} min read
       </span>
-      <h3
-        style={{
-          fontFamily: tokens.typography.h3.family,
-          fontSize: tokens.typography.h3.size,
-          lineHeight: tokens.typography.h3.line,
-          fontWeight: tokens.typography.h3.weight,
-          letterSpacing: '-0.01em',
-          margin: 0,
-        }}
-      >
+      <h3 className="post-card-title">
         {frontmatter.title}
       </h3>
-      <p
-        style={{
-          fontSize: 15,
-          lineHeight: 1.55,
-          color: tokens.colors.textSecondary,
-          margin: 0,
-        }}
-      >
+      <p className="post-card-description">
         {frontmatter.description}
       </p>
       {frontmatter.tags && frontmatter.tags.length > 0 ? (
-        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 4 }}>
+        <div className="post-card-tags">
           {frontmatter.tags.map((tag) => (
-            <span
-              key={tag}
-              style={{
-                fontSize: 12,
-                padding: '2px 8px',
-                borderRadius: 999,
-                background: tokens.colors.accentSurface,
-                color: tokens.colors.accent,
-              }}
-            >
+            <span key={tag} className="post-card-tag">
               {tag}
             </span>
           ))}

apps/website/src/components/blog/TagChips.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { tokens } from '@threadplane/design-tokens';
 
 /**
  * Tag pills on the article page. Each pill links to the blog landing page
@@ -9,30 +8,9 @@ import { tokens } from '@threadplane/design-tokens';
 export function TagChips({ tags }: { tags: string[] }) {
   if (tags.length === 0) return null;
   return (
-    <div
-      style={{
-        display: 'flex',
-        gap: 8,
-        flexWrap: 'wrap',
-        marginBottom: 24,
-      }}
-    >
+    <div className="tag-chips">
       {tags.map((tag) => (
-        <Link
-          key={tag}
-          href={`/blog?tag=${encodeURIComponent(tag)}`}
-          style={{
-            fontSize: 13,
-            padding: '4px 10px',
-            borderRadius: 999,
-            background: tokens.colors.accentSurface,
-            color: tokens.colors.accent,
-            textDecoration: 'none',
-            cursor: 'pointer',
-            display: 'inline-block',
-            lineHeight: 1.2,
-          }}
-        >
+        <Link key={tag} href={`/blog?tag=${encodeURIComponent(tag)}`} className="tag-chip">
           {tag}
         </Link>
       ))}

apps/website/src/components/contact/AltChannelRow.tsx

@@ -1,22 +1,14 @@
 // SPDX-License-Identifier: MIT
 import React from 'react';
-import { tokens } from '@threadplane/design-tokens';
-
-const linkStyle: React.CSSProperties = {
-  color: tokens.colors.accent,
-  textDecoration: 'none',
-  fontSize: tokens.typography.body.size,
-  fontFamily: tokens.typography.body.family,
-};
 
 export function AltChannelRow() {
   return (
-    <p style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap', margin: 0 }}>
-      <a href="/docs" style={linkStyle}>docs</a>
-      <span style={{ color: tokens.colors.textMuted }}>·</span>
-      <a href="https://github.com/cacheplane/angular-agent-framework/issues" style={linkStyle}>GitHub issues</a>
-      <span style={{ color: tokens.colors.textMuted }}>·</span>
-      <a href="https://discord.gg/cacheplane" style={linkStyle}>Discord</a>
+    <p className="contact-alt-row">
+      <a href="/docs" className="contact-alt-link">docs</a>
+      <span className="contact-alt-sep">·</span>
+      <a href="https://github.com/cacheplane/angular-agent-framework/issues" className="contact-alt-link">GitHub issues</a>
+      <span className="contact-alt-sep">·</span>
+      <a href="https://discord.gg/cacheplane" className="contact-alt-link">Discord</a>
     </p>
   );
 }