import { define } from '../../src'
import { theme } from './themes'
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({
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({
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',
}
}
})
const ThemePicker = define('ThemePicker', {
marginLeft: 'auto',
parts: {
Select: {
base: 'select',
padding: `${theme('spacing-xs')} ${theme('spacing-md')}`,
background: theme('colors-bgElevated'),
border: `1px solid ${theme('colors-border')}`,
borderRadius: theme('radius-sm'),
color: theme('colors-fg'),
fontSize: 14,
cursor: 'pointer',
transition: 'all 0.2s ease',
states: {
':hover': {
borderColor: theme('colors-borderActive'),
},
':focus': {
outline: 'none',
borderColor: theme('colors-borderActive'),
}
}
}
},
render({ parts: { Root, Select } }) {
return (
)
}
})
export const Layout = define({
render({ props }) {
const path = props.path || ''
const themeScript = `
function switchTheme(themeName) {
document.body.setAttribute('data-theme', themeName)
localStorage.setItem('theme', themeName)
}
window.switchTheme = switchTheme
// Load saved theme or default to dark
const savedTheme = localStorage.getItem('theme') || 'dark'
document.body.setAttribute('data-theme', savedTheme)
// Set initial select value
const select = document.getElementById('theme-select')
if (select) select.value = savedTheme
`
return (
{props.title}
{props.children}
)
}
})