Add Lightspark design tokens

[patcapulong]

Summary

Add Lightspark design tokens for consistent branding across the docs site.

• Create tokens.css with colors, grays, alphas, and radius values from Figma
• Prefix tokens with ls- to avoid collision with Mintlify's built-in CSS variables
• Update homepage custom styles to use token variables instead of hardcoded hex values
• Add .gitignore entry for local Figma reference files

Visual verification

No visual changes expected - tokens produce the same colors as the hardcoded values they replace. Verified on localhost in light and dark mode.

Test plan

• Verify homepage looks unchanged (tokens produce same colors)
• Check light and dark mode
• Confirm no visual regressions

[greptile-apps]

Greptile Summary

Introduced Lightspark design tokens to centralize brand colors and improve maintainability across the documentation site.

• Created tokens.css with comprehensive design system including colors, grays, alpha values, and border radius
• Replaced hardcoded hex values in styles.css with CSS variables (e.g., #00B3E0 → var(--ls-sky-500))
• Used ls- prefix to avoid conflicts with Mintlify's built-in CSS variables
• Added .gitignore entry for local Figma reference files
• Maintained visual consistency - tokens produce identical colors to the hardcoded values they replaced

Confidence Score: 5/5

• Safe to merge with no risk - purely cosmetic refactoring with no functional changes
• This is a well-executed refactoring that extracts hardcoded colors into reusable design tokens. The changes are non-breaking (tokens map to identical hex values), properly scoped with ls- prefix to avoid conflicts, well-documented with clear comments, and follow CSS best practices. The PR maintains visual consistency while improving long-term maintainability.
• No files require special attention

Important Files Changed

Filename	Overview
.gitignore	Added mintlify/tokens/ to ignore Figma reference files - clean addition with clear comment
mintlify/styles/tokens.css	New design tokens file with comprehensive color system, gray scale, alpha values, and border radius - well documented with clear naming convention
mintlify/styles/styles.css	Replaced hardcoded hex values with design token variables - maintains visual consistency while improving maintainability

Sequence Diagram

sequenceDiagram
    participant Browser
    participant DocsJSON as docs.json
    participant TokensCSS as tokens.css
    participant StylesCSS as styles.css
    participant IndexMDX as index.mdx

    Browser->>DocsJSON: Load Mintlify config
    DocsJSON-->>Browser: Apply base theme colors<br/>(#1A1A1A, #F8F8F7, #00B3E0)
    
    Browser->>StylesCSS: Load styles.css via head.links
    StylesCSS->>TokensCSS: @import "./tokens.css"
    TokensCSS-->>StylesCSS: Define CSS variables<br/>(--ls-gray-950, --ls-sky-500, etc.)
    StylesCSS-->>Browser: Apply styles using var(--ls-*) tokens
    
    Browser->>IndexMDX: Render homepage
    IndexMDX-->>Browser: Apply CSS classes<br/>(.hero, .title, .call-to-action)
    
    Note over Browser,IndexMDX: Tokens provide consistent colors<br/>across light and dark modes

Loading