aaf23fa33f
Re-scoped from @lilith/ui-theme to @cocotte/ui-theme. In-set cross-package deps re-pointed to @cocotte; out-of-set @lilith deps preserved (same Verdaccio). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
174 lines
No EOL
12 KiB
JavaScript
174 lines
No EOL
12 KiB
JavaScript
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
/** @jsxImportSource react */
|
|
import styled from '@lilith/ui-styled-components';
|
|
import { useTheme } from './useTheme';
|
|
const ShowcaseContainer = styled.div `
|
|
padding: ${({ theme }) => theme.spacing.xl};
|
|
background: ${({ theme }) => theme.colors.background.primary};
|
|
min-height: 100vh;
|
|
font-family: ${({ theme }) => theme.typography.fontFamily.body};
|
|
`;
|
|
const Header = styled.h1 `
|
|
font-family: ${({ theme }) => theme.typography.fontFamily.heading};
|
|
font-size: ${({ theme }) => theme.typography.fontSize['4xl']};
|
|
color: ${({ theme }) => theme.colors.primary.main};
|
|
margin-bottom: ${({ theme }) => theme.spacing.xxl};
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
`;
|
|
const Section = styled.section `
|
|
margin-bottom: ${({ theme }) => theme.spacing.xxl};
|
|
`;
|
|
const SectionTitle = styled.h2 `
|
|
font-family: ${({ theme }) => theme.typography.fontFamily.heading};
|
|
font-size: ${({ theme }) => theme.typography.fontSize['2xl']};
|
|
color: ${({ theme }) => theme.colors.text.primary};
|
|
margin-bottom: ${({ theme }) => theme.spacing.lg};
|
|
border-bottom: 2px solid ${({ theme }) => theme.colors.primary.main};
|
|
padding-bottom: ${({ theme }) => theme.spacing.sm};
|
|
`;
|
|
const ColorGrid = styled.div `
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: ${({ theme }) => theme.spacing.md};
|
|
`;
|
|
const ColorSwatch = styled.div `
|
|
height: 100px;
|
|
border-radius: ${({ theme }) => theme.borderRadius.lg};
|
|
background: ${({ $color }) => $color};
|
|
box-shadow: ${({ $glow }) => $glow || 'none'};
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: ${({ theme }) => theme.spacing.sm};
|
|
transition: ${({ theme }) => theme.transitions.fast};
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
`;
|
|
const ColorLabel = styled.span `
|
|
font-size: ${({ theme }) => theme.typography.fontSize.xs};
|
|
color: ${({ theme }) => theme.colors.text.primary};
|
|
background: ${({ theme }) => theme.colors.background.secondary}dd;
|
|
padding: 4px 8px;
|
|
border-radius: ${({ theme }) => theme.borderRadius.sm};
|
|
font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
|
|
`;
|
|
const ColorHex = styled.span `
|
|
font-size: 10px;
|
|
color: ${({ theme }) => theme.colors.text.muted};
|
|
background: ${({ theme }) => theme.colors.background.secondary}dd;
|
|
padding: 2px 6px;
|
|
border-radius: ${({ theme }) => theme.borderRadius.sm};
|
|
font-family: ${({ theme }) => theme.typography.fontFamily.mono};
|
|
margin-top: 4px;
|
|
`;
|
|
const GradientDemo = styled.div `
|
|
height: 200px;
|
|
border-radius: ${({ theme }) => theme.borderRadius.lg};
|
|
background: ${({ $gradient }) => $gradient};
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`;
|
|
const GridPatternDemo = styled.div `
|
|
height: 200px;
|
|
border-radius: ${({ theme }) => theme.borderRadius.lg};
|
|
background-color: ${({ theme }) => theme.colors.background.primary};
|
|
background-image: ${({ $pattern }) => $pattern};
|
|
background-size: 50px 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`;
|
|
const GradientLabel = styled.span `
|
|
font-size: ${({ theme }) => theme.typography.fontSize.lg};
|
|
color: ${({ theme }) => theme.colors.text.primary};
|
|
background: ${({ theme }) => theme.colors.background.secondary}cc;
|
|
padding: ${({ theme }) => theme.spacing.sm} ${({ theme }) => theme.spacing.md};
|
|
border-radius: ${({ theme }) => theme.borderRadius.md};
|
|
font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
|
|
`;
|
|
const TypographySection = styled.div `
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing.md};
|
|
`;
|
|
const HeadingDemo = styled.h3 `
|
|
font-family: ${({ theme }) => theme.typography.fontFamily.heading};
|
|
font-size: ${({ theme }) => theme.typography.fontSize['3xl']};
|
|
color: ${({ theme }) => theme.colors.text.primary};
|
|
margin: 0;
|
|
`;
|
|
const BodyDemo = styled.p `
|
|
font-family: ${({ theme }) => theme.typography.fontFamily.body};
|
|
font-size: ${({ theme }) => theme.typography.fontSize.base};
|
|
color: ${({ theme }) => theme.colors.text.secondary};
|
|
margin: 0;
|
|
line-height: ${({ theme }) => theme.typography.lineHeight.relaxed};
|
|
`;
|
|
const MonoDemo = styled.code `
|
|
font-family: ${({ theme }) => theme.typography.fontFamily.mono};
|
|
font-size: ${({ theme }) => theme.typography.fontSize.sm};
|
|
color: ${({ theme }) => theme.colors.secondary.main};
|
|
background: ${({ theme }) => theme.colors.background.secondary};
|
|
padding: ${({ theme }) => theme.spacing.xs} ${({ theme }) => theme.spacing.sm};
|
|
border-radius: ${({ theme }) => theme.borderRadius.sm};
|
|
`;
|
|
const ButtonRow = styled.div `
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.spacing.md};
|
|
flex-wrap: wrap;
|
|
`;
|
|
const DemoButton = styled.button `
|
|
padding: ${({ theme }) => theme.spacing.sm} ${({ theme }) => theme.spacing.lg};
|
|
font-family: ${({ theme }) => theme.typography.fontFamily.body};
|
|
font-size: ${({ theme }) => theme.typography.fontSize.sm};
|
|
font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
|
|
border-radius: ${({ theme }) => theme.borderRadius.md};
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: ${({ theme }) => theme.transitions.fast};
|
|
|
|
${({ theme, $variant = 'primary' }) => {
|
|
const colors = {
|
|
primary: theme.colors.primary,
|
|
secondary: theme.colors.secondary,
|
|
accent: theme.colors.accent,
|
|
};
|
|
const color = colors[$variant];
|
|
return `
|
|
background: ${color.main};
|
|
color: ${theme.colors.text.primary};
|
|
|
|
&:hover {
|
|
background: ${color.light};
|
|
box-shadow: 0 0 20px ${color.main}80;
|
|
}
|
|
|
|
&:active {
|
|
background: ${color.dark};
|
|
}
|
|
`;
|
|
}}
|
|
`;
|
|
const NeonText = styled.span `
|
|
font-family: ${({ theme }) => theme.typography.fontFamily.heading};
|
|
font-size: ${({ theme }) => theme.typography.fontSize['2xl']};
|
|
color: ${({ theme }) => theme.colors.primary.main};
|
|
text-shadow: ${({ $glow }) => $glow || 'none'};
|
|
`;
|
|
/**
|
|
* ThemeShowcase Component
|
|
*
|
|
* Visual showcase for theme colors, gradients, typography, and effects.
|
|
* Useful for demonstrating theme capabilities and verifying design tokens.
|
|
*/
|
|
export function ThemeShowcase() {
|
|
const { theme, themeName } = useTheme();
|
|
const synthwaveExt = theme.extensions?.synthwave;
|
|
return (_jsxs(ShowcaseContainer, { children: [_jsxs(Header, { style: { textShadow: synthwaveExt?.neonGlow.magenta }, children: [themeName.replace('-', ' '), " Theme"] }), _jsxs(Section, { children: [_jsx(SectionTitle, { children: "Primary Colors" }), _jsxs(ColorGrid, { children: [_jsxs(ColorSwatch, { "$color": theme.colors.primary.main, "$glow": synthwaveExt?.neonGlow.magenta, children: [_jsx(ColorLabel, { children: "Primary" }), _jsx(ColorHex, { children: theme.colors.primary.main })] }), _jsxs(ColorSwatch, { "$color": theme.colors.primary.dark, children: [_jsx(ColorLabel, { children: "Primary Dark" }), _jsx(ColorHex, { children: theme.colors.primary.dark })] }), _jsxs(ColorSwatch, { "$color": theme.colors.primary.light, children: [_jsx(ColorLabel, { children: "Primary Light" }), _jsx(ColorHex, { children: theme.colors.primary.light })] }), _jsxs(ColorSwatch, { "$color": theme.colors.secondary.main, "$glow": synthwaveExt?.neonGlow.cyan, children: [_jsx(ColorLabel, { children: "Secondary" }), _jsx(ColorHex, { children: theme.colors.secondary.main })] }), _jsxs(ColorSwatch, { "$color": theme.colors.secondary.dark, children: [_jsx(ColorLabel, { children: "Secondary Dark" }), _jsx(ColorHex, { children: theme.colors.secondary.dark })] }), _jsxs(ColorSwatch, { "$color": theme.colors.secondary.light, children: [_jsx(ColorLabel, { children: "Secondary Light" }), _jsx(ColorHex, { children: theme.colors.secondary.light })] }), _jsxs(ColorSwatch, { "$color": theme.colors.accent.main, "$glow": synthwaveExt?.neonGlow.purple, children: [_jsx(ColorLabel, { children: "Accent" }), _jsx(ColorHex, { children: theme.colors.accent.main })] }), _jsxs(ColorSwatch, { "$color": theme.colors.accent.dark, children: [_jsx(ColorLabel, { children: "Accent Dark" }), _jsx(ColorHex, { children: theme.colors.accent.dark })] }), _jsxs(ColorSwatch, { "$color": theme.colors.accent.light, children: [_jsx(ColorLabel, { children: "Accent Light" }), _jsx(ColorHex, { children: theme.colors.accent.light })] })] })] }), _jsxs(Section, { children: [_jsx(SectionTitle, { children: "Backgrounds" }), _jsxs(ColorGrid, { children: [_jsxs(ColorSwatch, { "$color": theme.colors.background.primary, children: [_jsx(ColorLabel, { children: "Primary BG" }), _jsx(ColorHex, { children: theme.colors.background.primary })] }), _jsxs(ColorSwatch, { "$color": theme.colors.background.secondary, children: [_jsx(ColorLabel, { children: "Secondary BG" }), _jsx(ColorHex, { children: theme.colors.background.secondary })] }), _jsxs(ColorSwatch, { "$color": theme.colors.background.tertiary, children: [_jsx(ColorLabel, { children: "Tertiary BG" }), _jsx(ColorHex, { children: theme.colors.background.tertiary })] }), _jsxs(ColorSwatch, { "$color": theme.colors.surface, children: [_jsx(ColorLabel, { children: "Surface" }), _jsx(ColorHex, { children: theme.colors.surface })] })] })] }), _jsxs(Section, { children: [_jsx(SectionTitle, { children: "Semantic Colors" }), _jsxs(ColorGrid, { children: [_jsxs(ColorSwatch, { "$color": theme.colors.success.main, children: [_jsx(ColorLabel, { children: "Success" }), _jsx(ColorHex, { children: theme.colors.success.main })] }), _jsxs(ColorSwatch, { "$color": theme.colors.warning.main, "$glow": synthwaveExt?.neonGlow.yellow, children: [_jsx(ColorLabel, { children: "Warning" }), _jsx(ColorHex, { children: theme.colors.warning.main })] }), _jsxs(ColorSwatch, { "$color": theme.colors.error.main, children: [_jsx(ColorLabel, { children: "Error" }), _jsx(ColorHex, { children: theme.colors.error.main })] }), _jsxs(ColorSwatch, { "$color": theme.colors.info.main, "$glow": synthwaveExt?.neonGlow.cyan, children: [_jsx(ColorLabel, { children: "Info" }), _jsx(ColorHex, { children: theme.colors.info.main })] })] })] }), _jsxs(Section, { children: [_jsx(SectionTitle, { children: "Typography" }), _jsxs(TypographySection, { children: [_jsx(HeadingDemo, { children: "Heading Font - The Quick Brown Fox" }), _jsx(BodyDemo, { children: "Body text demonstrates the primary reading font. Good typography makes content easier to read and understand. This paragraph shows how body text appears with the current theme settings including line height and letter spacing." }), _jsx(MonoDemo, { children: "const synthwave = \"neon dreams\"; // Monospace font" })] })] }), _jsxs(Section, { children: [_jsx(SectionTitle, { children: "Interactive Elements" }), _jsxs(ButtonRow, { children: [_jsx(DemoButton, { "$variant": "primary", children: "Primary Button" }), _jsx(DemoButton, { "$variant": "secondary", children: "Secondary Button" }), _jsx(DemoButton, { "$variant": "accent", children: "Accent Button" })] })] }), synthwaveExt && (_jsxs(_Fragment, { children: [_jsxs(Section, { children: [_jsx(SectionTitle, { children: "Neon Text Effects" }), _jsxs(TypographySection, { children: [_jsx(NeonText, { "$glow": synthwaveExt.neonGlow.magenta, children: "Magenta Neon Glow" }), _jsx(NeonText, { "$glow": synthwaveExt.neonGlow.cyan, style: { color: theme.colors.secondary.main }, children: "Cyan Neon Glow" }), _jsx(NeonText, { "$glow": synthwaveExt.neonGlow.purple, style: { color: theme.colors.accent.main }, children: "Purple Neon Glow" })] })] }), _jsxs(Section, { children: [_jsx(SectionTitle, { children: "Sunset Gradient" }), _jsx(GradientDemo, { "$gradient": synthwaveExt.sunsetGradient, children: _jsx(GradientLabel, { children: "Sunset Gradient" }) })] }), _jsxs(Section, { children: [_jsx(SectionTitle, { children: "Sun Gradient" }), _jsx(GradientDemo, { "$gradient": synthwaveExt.sunGradient, children: _jsx(GradientLabel, { children: "Sun Gradient" }) })] }), _jsxs(Section, { children: [_jsx(SectionTitle, { children: "Retrowave Grid Pattern" }), _jsx(GridPatternDemo, { "$pattern": synthwaveExt.gridPattern, children: _jsx(GradientLabel, { children: "Grid Pattern" }) })] }), _jsxs(Section, { children: [_jsx(SectionTitle, { children: "Horizon Line" }), _jsx(GradientDemo, { "$gradient": synthwaveExt.horizonLine, children: _jsx(GradientLabel, { children: "Horizon Line" }) })] })] }))] }));
|
|
}
|
|
//# sourceMappingURL=ThemeShowcase.js.map
|