import { define, Styles } from '../../src'
export const theme = {
colors: {
bg: '#0a0a0a',
bgElevated: '#111',
bgHover: '#1a1a1a',
fg: '#00ff00',
fgMuted: '#888',
fgDim: '#444',
border: '#222',
borderActive: '#00ff00',
accent: '#00ff00',
accentDim: '#008800',
},
fonts: {
mono: "'Monaco', 'Menlo', 'Consolas', monospace",
sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
},
spacing: {
xs: 8,
sm: 12,
md: 16,
lg: 24,
xl: 32,
xxl: 48,
},
radius: {
sm: 4,
md: 8,
lg: 12,
}
}
export const Body = define('Body', {
base: 'body',
margin: 0,
padding: theme.spacing.xl,
fontFamily: theme.fonts.mono,
background: theme.colors.bg,
color: theme.colors.fg,
})
const Container = define('Container', {
maxWidth: 1200,
margin: '0 auto'
})
export const Header = define('Header', {
base: 'h1',
marginBottom: theme.spacing.xl,
color: theme.colors.fg,
fontSize: 28,
fontWeight: 400,
})
export const ExampleSection = define('ExampleSection', {
marginBottom: theme.spacing.xl,
parts: {
Header: {
base: 'h2',
marginBottom: theme.spacing.md,
color: theme.colors.fgMuted,
fontSize: 16,
fontWeight: 400,
}
},
render({ props, parts: { Root, Header } }) {
return (
{props.children}
)
}
})
const Nav = define('SSR_Nav', {
base: 'nav',
display: 'flex',
gap: theme.spacing.lg,
marginBottom: theme.spacing.xl,
padding: theme.spacing.lg,
background: theme.colors.bgElevated,
border: `1px solid ${theme.colors.border}`,
borderRadius: theme.radius.sm,
})
const NavLink = define('SSR_NavLink', {
base: 'a',
color: theme.colors.fgMuted,
textDecoration: 'none',
fontSize: 14,
states: {
hover: {
color: theme.colors.fg,
}
},
selectors: {
'&[aria-current]': {
color: theme.colors.fg,
textDecoration: 'underline',
}
}
})
export const Layout = define({
render({ props }) {
const path = props.path || ''
return (
{props.title}
{props.children}
)
}
})