Styling & Configuration
Relevant source files
The following files were used as context for generating this wiki page:
The SuperClaude Website utilizes a modern CSS-in-JS and utility-first approach to styling, primarily driven by Tailwind CSS and PostCSS. The configuration system is designed to support a unified design language that includes a robust dark mode implementation, custom typography, and advanced visual effects such as glowing gradients and motion-based animations.
The styling architecture is centralized through global CSS variables and a Tailwind configuration that extends the default theme to include project-specific colors, animations, and font families. This ensures consistency across components like the Navbar and specialized UI elements like GlowingEffect.
Theme Configuration
The project implements a theme system based on CSS variables defined in the :root and .dark selectors. This allows for dynamic theme switching by toggling a dark class on a parent element, typically the html or body tag.
Color Palette and Variables
The design system defines several semantic color categories. These variables are mapped to Tailwind utilities in the configuration file.
| Variable | Light Mode (Default) | Dark Mode | Description |
|---|---|---|---|
--background | #ffffff | #020617 | Main page background |
--foreground | #1f2937 | #f8fafc | Primary text color |
--primary | #ffffff | #0f172a | Primary component background |
--secondary | #f0f0f0 | #1e293b | Secondary background/hover states |
--accent | #3b82f6 | #60a5fa | Highlight and interactive elements |
--border | #e5e7eb | #1e293b | Component borders |
--gradient-start | #3b82f6 | #1e3a8a | Start color for neon/gradient effects |
Sources: src/index.css:10-50, tailwind.config.js:8-23
Design Flow: Theme Application
The following diagram illustrates how theme configuration flows from global definitions to individual React components.
The application uses a ThemeContext to manage the active state, which in turn updates the DOM to reflect the chosen variables.
Sources: src/components/Navbar.js:14, src/index.css:26-42
Typography and Assets
The website uses a mix of sans-serif and monospace fonts to distinguish between prose and technical content.
- Standard Text: Uses the 'Inter' font family.
- Code Content: Uses 'JetBrains Mono' for improved readability of code snippets and terminal commands.
Sources: public/index.html:26-28, tailwind.config.js:24-27, src/index.css:1-5
Advanced Visual Effects
A core part of the SuperClaude visual identity is the use of dynamic, interactive gradients and "neon" effects.
Glowing Effect Component
The GlowingEffect component uses the motion library to track pointer movement and update CSS variables (--start, --active) in real-time. It applies a conic-gradient mask to create a localized glow that follows the user's cursor within a specific container.
Component Styles
The project defines custom utility layers for complex components like neon buttons.
.btn-neon {
@apply relative border-2 border-transparent;
background-clip: padding-box;
}
.btn-neon::before {
content: '';
@apply absolute inset-0 -z-10 rounded-full;
background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
transition: all 0.3s ease;
}
Sources: src/index.css:102-115
Markdown Styling
Documentation rendering is handled via react-markdown and styled using github-markdown-css. The project extends this with custom theme-aware overrides to ensure documentation matches the site's dark/light modes.
- Integration: The
.markdown-bodyclass is used as a wrapper. - Customization: Variables like
--fgColor-defaultand--bgColor-defaultare mapped directly to the project's internal CSS variables withinindex.css.
Sources: src/index.css:120-138, src/pages/DocViewerPage.js:81-85
Configuration Summary
The build pipeline is managed by PostCSS, which processes Tailwind's directives into standard CSS.
| File | Purpose |
|---|---|
tailwind.config.js | Defines content paths, theme extensions (colors, fonts, keyframes), and dark mode strategy ('class'). |
postcss.config.js | Configures the CSS processor to use tailwindcss and autoprefixer. |
src/index.css | Entry point for Tailwind directives and global variable definitions. |
Sources: tailwind.config.js:1-35, postcss.config.js:1-6, src/index.css:7-9