rizzo-css 0.0.80 → 0.0.82

package/scaffold/vue/variants/full/src/views/DocsIndex.vue

@@ -0,0 +1,69 @@
+<template>
+  <section class="docs-overview">
+    <h1 class="docs__title">Docs overview</h1>
+    <p class="docs-overview__intro">
+      Rizzo CSS is a design system built on semantic theming and 14 themes. One CSS codebase, 58 accessible BEM components — for <strong>Vanilla JS</strong>, <strong>Astro</strong>, <strong>Svelte</strong>, <strong>React</strong>, and <strong>Vue</strong>.
+    </p>
+
+    <h2 id="overview" class="docs-overview__h2">Overview</h2>
+    <ul class="docs-overview__list">
+      <li><router-link to="/docs/getting-started">Getting Started</router-link> — Installation, CLI, templates (CSS only | Landing | Docs | Dashboard | Full)</li>
+      <li><router-link to="/docs/components">Components</router-link> — Browse all components by category</li>
+      <li><router-link to="/blocks">Blocks</router-link> — Pre-built layouts and patterns</li>
+      <li><router-link to="/themes">Themes</router-link> — 14 themes, live preview</li>
+    </ul>
+
+    <h2 id="blocks" class="docs-overview__h2">Blocks</h2>
+    <ul class="docs-overview__list">
+      <li><router-link to="/blocks">Blocks overview</router-link></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/landing-hero" target="_blank" rel="noopener noreferrer">Landing hero</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/pricing" target="_blank" rel="noopener noreferrer">Pricing cards</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/dashboard-01" target="_blank" rel="noopener noreferrer">Dashboard with sidebar</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/docs-layout" target="_blank" rel="noopener noreferrer">Docs layout</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/login" target="_blank" rel="noopener noreferrer">Login</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/signup" target="_blank" rel="noopener noreferrer">Sign up</a></li>
+    </ul>
+
+    <p class="docs-overview__footer">
+      <router-link to="/docs/getting-started">Getting Started</router-link>
+      ·
+      <router-link to="/docs/components">Components</router-link>
+      ·
+      <router-link to="/themes">Themes</router-link>
+    </p>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.docs-overview__intro {
+  margin: 0 0 var(--spacing-6);
+  color: var(--text);
+  line-height: var(--line-height-relaxed);
+}
+.docs-overview__h2 {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  margin: var(--spacing-10) 0 var(--spacing-4);
+  color: var(--text);
+}
+.docs-overview__list {
+  margin: 0 0 var(--spacing-6);
+  padding-left: var(--spacing-8);
+}
+.docs-overview__list li {
+  margin-bottom: var(--spacing-2);
+}
+.docs-overview__footer {
+  margin-top: var(--spacing-10);
+  padding-top: var(--spacing-6);
+  border-top: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: var(--font-size-sm);
+}
+.docs-overview__footer a {
+  margin-right: var(--spacing-2);
+}
+</style>

package/scaffold/vue/variants/full/src/views/DocsOverview.vue

@@ -0,0 +1,66 @@
+<template>
+  <section class="docs-overview">
+    <h1 class="docs__title">Docs overview</h1>
+    <p class="docs-overview__intro">
+      Rizzo CSS is a design system built on semantic theming and 14 themes. One CSS codebase, 58 accessible BEM components — for <strong>Vanilla JS</strong>, <strong>Astro</strong>, <strong>Svelte</strong>, <strong>React</strong>, and <strong>Vue</strong>.
+    </p>
+
+    <h2 id="overview" class="docs-overview__h2">Overview</h2>
+    <ul class="docs-overview__list">
+      <li><router-link to="/docs/getting-started">Getting Started</router-link> — Installation, CLI, templates (CSS only | Landing | Docs | Dashboard | Full)</li>
+      <li><router-link to="/docs/components">Components</router-link> — Browse all components by category</li>
+      <li><router-link to="/blocks">Blocks</router-link> — Pre-built layouts and patterns</li>
+      <li><router-link to="/themes">Themes</router-link> — 14 themes, live preview</li>
+    </ul>
+
+    <h2 id="blocks" class="docs-overview__h2">Blocks</h2>
+    <ul class="docs-overview__list">
+      <li><router-link to="/blocks">Blocks overview</router-link></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/landing-hero" target="_blank" rel="noopener noreferrer">Landing hero</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/pricing" target="_blank" rel="noopener noreferrer">Pricing cards</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/dashboard-01" target="_blank" rel="noopener noreferrer">Dashboard with sidebar</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/docs-layout" target="_blank" rel="noopener noreferrer">Docs layout</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/login" target="_blank" rel="noopener noreferrer">Login</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/signup" target="_blank" rel="noopener noreferrer">Sign up</a></li>
+    </ul>
+
+    <p class="docs-overview__footer">
+      <router-link to="/docs/getting-started">Getting Started</router-link>
+      ·
+      <router-link to="/docs/components">Components</router-link>
+      ·
+      <router-link to="/themes">Themes</router-link>
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.docs-overview__intro {
+  margin: 0 0 var(--spacing-6);
+  color: var(--text);
+  line-height: var(--line-height-relaxed);
+}
+.docs-overview__h2 {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  margin: var(--spacing-10) 0 var(--spacing-4);
+  color: var(--text);
+}
+.docs-overview__list {
+  margin: 0 0 var(--spacing-6);
+  padding-left: var(--spacing-8);
+}
+.docs-overview__list li {
+  margin-bottom: var(--spacing-2);
+}
+.docs-overview__footer {
+  margin-top: var(--spacing-10);
+  padding-top: var(--spacing-6);
+  border-top: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: var(--font-size-sm);
+}
+.docs-overview__footer a {
+  margin-right: var(--spacing-2);
+}
+</style>

package/scaffold/vue/variants/full/src/views/Home.vue

@@ -0,0 +1,240 @@
+<template>
+  <main id="main-content" class="home">
+    <div class="home__container">
+      <header class="home__hero">
+        <h1 class="home__title">Rizzo CSS</h1>
+        <p class="home__subtitle">
+          A modern CSS design system with semantic theming, accessibility-first components, and one CLI for Vanilla, Astro, Svelte, React, and Vue. Start here then make it your own.
+        </p>
+        <div class="home__hero-ctas">
+          <router-link to="/docs/getting-started" class="btn btn-primary home__hero-cta">Get Started</router-link>
+          <router-link to="/docs/components" class="btn btn-outline home__hero-cta">View Components</router-link>
+        </div>
+      </header>
+
+      <section class="home__features" aria-labelledby="home-features-heading">
+        <h2 id="home-features-heading" class="home__section-title">Features</h2>
+        <p class="home__features-intro">A complete design system that works across Vanilla, Astro, Svelte, React, and Vue — same CSS, same components, zero lock-in.</p>
+        <div class="home__features-featured">
+          <div class="home__card home__card--featured">
+            <span class="home__card-icon" aria-hidden="true">Themes</span>
+            <h3>14 beautiful themes</h3>
+            <p>7 dark and 7 light with OKLCH for perceptual uniformity. System preference, persistence, and a unique icon per theme.</p>
+          </div>
+          <div class="home__card home__card--featured">
+            <span class="home__card-icon" aria-hidden="true">A11y</span>
+            <h3>Accessibility first</h3>
+            <p>WCAG AA compliant with full keyboard navigation, ARIA, focus management, and screen reader support.</p>
+          </div>
+          <div class="home__card home__card--featured">
+            <span class="home__card-icon" aria-hidden="true">Components</span>
+            <h3>All components</h3>
+            <p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
+          </div>
+        </div>
+        <h3 class="home__features-supporting-label">And more</h3>
+        <div class="home__grid home__grid--supporting">
+          <div class="home__card home__card--supporting">
+            <h3>Semantic variables</h3>
+            <p>CSS variables that adapt to themes. No hardcoded colors; override once, update everywhere.</p>
+          </div>
+          <div class="home__card home__card--supporting">
+            <h3>PostCSS powered</h3>
+            <p>Imports, autoprefixing, and production minification. Fits into any build pipeline.</p>
+          </div>
+          <div class="home__card home__card--supporting">
+            <h3>Typography & spacing</h3>
+            <p>Scaling font sizes, weights, line heights, and a consistent spacing scale (0–24).</p>
+          </div>
+          <div class="home__card home__card--supporting">
+            <h3>Responsive & utilities</h3>
+            <p>Mobile-first breakpoints and utility classes for layout, display, and flexbox.</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="home__add-command" aria-labelledby="home-add-command-heading">
+        <h2 id="home-add-command-heading" class="home__section-title">Add a component</h2>
+        <p class="home__features-intro" style="margin-bottom: var(--spacing-4);">Add any component from the CLI:</p>
+        <div class="home__add-command-block">
+          <pre><code>npx rizzo-css add &lt;ComponentName&gt;</code></pre>
+          <CopyToClipboard
+            :value="ADD_COMMAND"
+            icon-only
+            button-label="Copy"
+            format="command"
+            label="Copy command"
+            class="home__add-command-copy"
+          />
+        </div>
+      </section>
+
+      <section class="home__docs">
+        <h2 class="home__section-title">Documentation</h2>
+        <div class="home__docs-grid">
+          <router-link to="/docs/getting-started" class="home__doc-card">
+            <h3>Getting Started</h3>
+            <p>Installation, project structure, and quick start guide</p>
+          </router-link>
+          <router-link to="/docs/components" class="home__doc-card">
+            <h3>Components</h3>
+            <p>Component library with usage examples and live demos</p>
+          </router-link>
+          <router-link to="/themes" class="home__doc-card">
+            <h3>Themes</h3>
+            <p>Theme system, 14 themes, and live preview</p>
+          </router-link>
+          <router-link to="/blocks" class="home__doc-card">
+            <h3>Blocks</h3>
+            <p>Pre-built layouts: landing, pricing, dashboard, docs, login, signup</p>
+          </router-link>
+          <router-link to="/docs" class="home__doc-card">
+            <h3>Docs Overview</h3>
+            <p>Condensed index of documentation and links</p>
+          </router-link>
+          <a href="https://rizzo-css.vercel.app/docs/theming" class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Theming (full docs)</h3>
+            <p>Custom themes, persistence, color format — on main site</p>
+            <span class="sr-only"> (opens in new tab)</span>
+          </a>
+        </div>
+      </section>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import CopyToClipboard from '@/components/rizzo/CopyToClipboard.vue';
+
+const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
+</script>
+
+<style scoped>
+.home__container {
+  width: 100%;
+  max-width: var(--container-default);
+  margin: 0 auto;
+  padding: 0 var(--content-padding-x);
+}
+.home__hero {
+  text-align: center;
+  padding: var(--spacing-10) 0;
+}
+.home__title {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text);
+  margin: 0 0 var(--spacing-4);
+  line-height: var(--line-height-tight);
+}
+.home__subtitle {
+  font-size: var(--font-size-lg);
+  color: var(--text-dim);
+  margin: 0 auto var(--spacing-6);
+  max-width: 42ch;
+  line-height: var(--line-height-relaxed);
+}
+.home__hero-ctas {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-4);
+  justify-content: center;
+}
+.home__hero-cta {
+  text-decoration: none;
+}
+.home__section-title {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  margin: var(--spacing-10) 0 var(--spacing-4);
+  color: var(--text);
+}
+.home__features-intro {
+  margin: 0 0 var(--spacing-6);
+  color: var(--text-dim);
+  line-height: var(--line-height-relaxed);
+}
+.home__features-featured,
+.home__grid--supporting {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  gap: var(--spacing-6);
+  margin: var(--spacing-6) 0;
+}
+.home__card {
+  padding: var(--spacing-6);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: var(--background-alt);
+}
+.home__card h3 {
+  margin: 0 0 var(--spacing-2);
+  font-size: var(--font-size-lg);
+  color: var(--text);
+}
+.home__card p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-dim);
+  line-height: var(--line-height-relaxed);
+}
+.home__card-icon {
+  display: block;
+  font-size: var(--font-size-xs);
+  color: var(--accent-fg);
+  margin-bottom: var(--spacing-2);
+}
+.home__features-supporting-label {
+  font-size: var(--font-size-lg);
+  margin: var(--spacing-8) 0 var(--spacing-4);
+  color: var(--text);
+}
+.home__add-command-block {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+}
+.home__add-command-block pre {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  background: var(--background-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-4);
+  overflow-x: auto;
+  font-size: var(--font-size-sm);
+}
+.home__docs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
+  gap: var(--spacing-4);
+  margin-top: var(--spacing-6);
+}
+.home__doc-card {
+  display: block;
+  padding: var(--spacing-6);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: var(--background-alt);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s, transform 0.15s;
+}
+.home__doc-card:hover {
+  border-color: var(--accent-fg);
+  transform: translateY(-2px);
+}
+.home__doc-card h3 {
+  margin: 0 0 var(--spacing-2);
+  font-size: var(--font-size-lg);
+  color: var(--text);
+}
+.home__doc-card p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-dim);
+  line-height: var(--line-height-relaxed);
+}
+</style>

package/scaffold/vue/variants/full/src/views/Themes.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="themes-page">
+    <div class="themes-page__container">
+      <header class="themes-page__hero">
+        <h1 id="available-themes" class="themes-page__title">Available Themes</h1>
+        <p class="themes-page__subtitle">
+          Rizzo CSS includes 14 themes. Switch instantly via the Settings panel (gear icon in the navbar) or try the Theme Switcher below. Each theme uses semantic OKLCH variables.
+        </p>
+        <div class="themes-page__hero-demo example">
+          <div class="example-title">Try Themes</div>
+          <ThemeSwitcher id-prefix="page" />
+        </div>
+        <div class="themes-page__hero-ctas">
+          <a href="https://rizzo-css.vercel.app/docs/theming" class="btn btn-primary themes-page__hero-cta" target="_blank" rel="noopener noreferrer">Theming docs</a>
+          <router-link to="/docs/components" class="btn btn-outline themes-page__hero-cta">Components</router-link>
+        </div>
+      </header>
+
+      <div class="themes-page__main">
+        <section class="themes-page__section" aria-labelledby="dark-themes">
+          <h2 id="dark-themes" class="themes-page__section-title">Dark Themes</h2>
+          <div class="themes-page__grid">
+            <Card v-for="theme in THEMES_DARK" :key="theme.value" variant="elevated">
+              <div class="card__body">
+                <div class="themes-page__card-header">
+                  <ThemeIcon :theme-id="theme.value" :size="24" class="themes-page__card-icon" />
+                  <h3 class="themes-page__card-title">
+                    <button
+                      type="button"
+                      class="themes-page__card-title-btn"
+                      @click="applyTheme(theme.value)"
+                    >
+                      {{ theme.label }}
+                    </button>
+                  </h3>
+                </div>
+                <template v-if="themeCardContent[theme.value]">
+                  <p class="themes-page__card-desc">{{ themeCardContent[theme.value].description }}</p>
+                  <p class="themes-page__card-meta"><strong>Author:</strong> {{ themeCardContent[theme.value].author }}</p>
+                </template>
+                <p class="themes-page__card-meta"><code>{{ theme.value }}</code></p>
+              </div>
+            </Card>
+          </div>
+        </section>
+
+        <section class="themes-page__section" aria-labelledby="light-themes">
+          <h2 id="light-themes" class="themes-page__section-title">Light Themes</h2>
+          <div class="themes-page__grid">
+            <Card v-for="theme in THEMES_LIGHT" :key="theme.value" variant="elevated">
+              <div class="card__body">
+                <div class="themes-page__card-header">
+                  <ThemeIcon :theme-id="theme.value" :size="24" class="themes-page__card-icon" />
+                  <h3 class="themes-page__card-title">
+                    <button
+                      type="button"
+                      class="themes-page__card-title-btn"
+                      @click="applyTheme(theme.value)"
+                    >
+                      {{ theme.label }}
+                    </button>
+                  </h3>
+                </div>
+                <template v-if="themeCardContent[theme.value]">
+                  <p class="themes-page__card-desc">{{ themeCardContent[theme.value].description }}</p>
+                  <p class="themes-page__card-meta"><strong>Author:</strong> {{ themeCardContent[theme.value].author }}</p>
+                </template>
+                <p class="themes-page__card-meta"><code>{{ theme.value }}</code></p>
+              </div>
+            </Card>
+          </div>
+        </section>
+
+        <section id="using-themes" class="themes-page__copy-section" aria-labelledby="copy-heading">
+          <h2 id="copy-heading" class="themes-page__section-title">Use a theme in your app</h2>
+          <p class="themes-page__copy-desc">Set the theme on your HTML root. For persistence and custom themes, see the <a href="https://rizzo-css.vercel.app/docs/theming" target="_blank" rel="noopener noreferrer">theming docs</a>.</p>
+          <div class="themes-page__code-block">
+            <pre><code>{{ snippet }}</code></pre>
+            <CopyToClipboard :value="snippet" button-label="Copy" format="code" label="Copy snippet" />
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ThemeIcon from '@/components/rizzo/ThemeIcon.vue';
+import ThemeSwitcher from '@/components/rizzo/ThemeSwitcher.vue';
+import Card from '@/components/rizzo/Card.vue';
+import CopyToClipboard from '@/components/rizzo/CopyToClipboard.vue';
+import { THEMES_DARK, THEMES_LIGHT } from '@/components/rizzo/themes';
+
+const defaultTheme = 'github-dark-classic';
+const snippet = `<html lang="en" data-theme="${defaultTheme}">`;
+
+const themeCardContent: Record<string, { description: string; author: string }> = {
+  'github-dark-classic': { description: 'Official GitHub dark theme for VS Code', author: 'Primer (GitHub)' },
+  'shades-of-purple': { description: 'Professional theme with bold purple shades', author: 'Ahmad Awais' },
+  'sandstorm-classic': { description: 'Dark, red-based theme for late-night coding', author: 'Devan Sisson' },
+  'rocky-blood-orange': { description: 'Dark theme with blood-orange accent', author: 'Luca Heyworth' },
+  'minimal-dark-neon-yellow': { description: 'Minimal dark theme with neon yellow accent', author: 'Gabriel D Sanchez' },
+  'hack-the-box': { description: 'Dark blue with lime green accent, built for hackers', author: 'silofy' },
+  'pink-cat-boo': { description: 'Sweet and cute dark theme with rose pink accents', author: 'Fiona Fan' },
+  'github-light': { description: 'Official GitHub light theme for VS Code', author: 'Primer (GitHub)' },
+  'red-velvet-cupcake': { description: 'Velvet-cupcake light theme with red accent', author: 'Fahad Ashraf Chaudhry' },
+  'orangy-one-light': { description: 'Light theme with orange accent', author: 'maher-cshub' },
+  sunflower: { description: 'Yellow light theme', author: 'Hashirama Naiff' },
+  'green-breeze-light': { description: 'Green and blue focused light theme with good contrast', author: 'icy9ptcl' },
+  'cute-pink': { description: 'Cute pink light theme for VSCode', author: 'WebFreak' },
+  'semi-light-purple': { description: 'Light aesthetic theme with soft purple tones', author: 'Kapil Yadav' },
+};
+
+function applyTheme(value: string) {
+  if (typeof document !== 'undefined') {
+    document.documentElement.setAttribute('data-theme', value);
+  }
+}
+</script>
+
+<style scoped>
+.themes-page {
+  padding: var(--spacing-8) 0 var(--spacing-12);
+}
+.themes-page__container {
+  width: 100%;
+  max-width: var(--container-default);
+  margin: 0 auto;
+  padding: 0 var(--content-padding-x);
+}
+.themes-page__hero {
+  text-align: center;
+  margin-bottom: var(--spacing-10);
+}
+.themes-page__title {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text);
+  margin: 0 0 var(--spacing-4);
+  line-height: var(--line-height-tight);
+}
+.themes-page__subtitle {
+  font-size: var(--font-size-lg);
+  color: var(--text-dim);
+  margin: 0;
+  max-width: 42ch;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: var(--line-height-relaxed);
+}
+.themes-page__subtitle code {
+  background: var(--background-alt);
+  color: var(--accent-fg);
+  padding: var(--spacing-0-125) var(--spacing-0-375);
+  border-radius: var(--radius);
+  font-size: var(--font-size-sm);
+}
+.themes-page__hero-demo {
+  margin-top: var(--spacing-6);
+  text-align: left;
+}
+.themes-page__hero-ctas {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-4);
+  justify-content: center;
+  margin-top: var(--spacing-6);
+}
+.themes-page__hero-cta {
+  text-decoration: none;
+}
+.themes-page__section {
+  margin-bottom: var(--spacing-10);
+}
+.themes-page__section-title {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text);
+  margin: 0 0 var(--spacing-4);
+}
+.themes-page__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  gap: var(--spacing-4);
+}
+.themes-page__card-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  margin-bottom: var(--spacing-2);
+}
+:deep(.themes-page__card-icon) {
+  flex-shrink: 0;
+  color: var(--text-dim);
+}
+.themes-page__card-title {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+}
+.themes-page__card-title-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: var(--accent-fg);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  cursor: pointer;
+}
+.themes-page__card-title-btn:hover {
+  color: var(--accent-fg-hover);
+}
+.themes-page__card-desc {
+  font-size: var(--font-size-sm);
+  color: var(--text-dim);
+  margin: 0 0 var(--spacing-2);
+  line-height: var(--line-height-relaxed);
+}
+.themes-page__card-meta {
+  font-size: var(--font-size-sm);
+  color: var(--text-dim);
+  margin: 0 0 var(--spacing-1);
+}
+.themes-page__card-meta code {
+  background: var(--background-alt);
+  color: var(--accent-fg);
+  padding: var(--spacing-0-125) var(--spacing-0-375);
+  border-radius: var(--radius);
+  font-size: var(--font-size-xs);
+}
+.themes-page__copy-section {
+  margin-top: var(--spacing-10);
+}
+.themes-page__copy-desc {
+  color: var(--text-dim);
+  font-size: var(--font-size-sm);
+  margin: 0 0 var(--spacing-3);
+}
+.themes-page__code-block {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+}
+.themes-page__code-block pre {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  background: var(--background-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-4);
+  overflow-x: auto;
+  font-size: var(--font-size-sm);
+}
+</style>