85b5b790ec
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
/**
|
|
* Example 03: Theme Extensions
|
|
*
|
|
* Demonstrates using optional theme-specific effects
|
|
* that enhance components when available.
|
|
*/
|
|
|
|
import React from 'react'
|
|
import styled, { css } from 'styled-components'
|
|
|
|
const Card = styled.div`
|
|
/* Base styling with semantic tokens - works for all themes */
|
|
background: ${props => props.theme.colors.surface};
|
|
padding: ${props => props.theme.spacing.lg};
|
|
border-radius: ${props => props.theme.borderRadius.lg};
|
|
border: 1px solid ${props => props.theme.colors.border};
|
|
color: ${props => props.theme.colors.text.primary};
|
|
|
|
/* Optional: Add cyberpunk-specific neon glow effect */
|
|
${props => props.theme.extensions?.cyberpunk && css`
|
|
box-shadow: ${props.theme.extensions.cyberpunk.neonGlow.magenta};
|
|
|
|
/* Add scanlines effect */
|
|
background-image: ${props.theme.extensions.cyberpunk.scanlines};
|
|
`}
|
|
|
|
/* Optional: Add luxe-specific elegant shadow */
|
|
${props => props.theme.extensions?.luxe && css`
|
|
box-shadow: ${props.theme.extensions.luxe.elegantShadow};
|
|
`}
|
|
`
|
|
|
|
const Heading = styled.h2`
|
|
font-family: ${props => props.theme.typography.fontFamily.heading};
|
|
font-size: ${props => props.theme.typography.fontSize.xl};
|
|
font-weight: ${props => props.theme.typography.fontWeight.bold};
|
|
color: ${props => props.theme.colors.primary};
|
|
margin-bottom: ${props => props.theme.spacing.md};
|
|
|
|
/* Optional: Add cyberpunk glitch effect */
|
|
${props => props.theme.extensions?.cyberpunk && css`
|
|
filter: ${props.theme.extensions.cyberpunk.glitchEffect};
|
|
`}
|
|
`
|
|
|
|
const Badge = styled.span`
|
|
display: inline-block;
|
|
padding: ${props => props.theme.spacing.xs} ${props => props.theme.spacing.sm};
|
|
background: ${props => props.theme.colors.secondary};
|
|
color: ${props => props.theme.colors.text.primary};
|
|
border-radius: ${props => props.theme.borderRadius.full};
|
|
font-size: ${props => props.theme.typography.fontSize.xs};
|
|
font-weight: ${props => props.theme.typography.fontWeight.bold};
|
|
|
|
/* Optional: Add luxe gold shimmer effect */
|
|
${props => props.theme.extensions?.luxe && css`
|
|
background: ${props.theme.extensions.luxe.goldShimmer};
|
|
`}
|
|
|
|
/* Optional: Add cyberpunk cyan glow */
|
|
${props => props.theme.extensions?.cyberpunk && css`
|
|
box-shadow: ${props.theme.extensions.cyberpunk.neonGlow.cyan};
|
|
`}
|
|
`
|
|
|
|
export function ExtensionExample() {
|
|
return (
|
|
<Card>
|
|
<Heading>Theme Extensions Example</Heading>
|
|
<p>
|
|
This card demonstrates optional theme-specific enhancements.
|
|
<Badge>NEW</Badge>
|
|
</p>
|
|
<p>
|
|
Base styling uses semantic tokens (works everywhere).
|
|
Enhanced effects are added when theme supports them.
|
|
</p>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Result:
|
|
* - Cyberpunk theme: Card with neon glow, scanlines, and glitch effect
|
|
* - Luxe theme: Card with elegant shadow and gold shimmer
|
|
* - Component works in both themes
|
|
* - Extensions are OPTIONAL - won't break if theme doesn't support them
|
|
*/
|