147 lines
3.3 KiB
TypeScript
147 lines
3.3 KiB
TypeScript
import { colorToCSS } from '@open-pencil/core/color'
|
|
|
|
import type { DesignDocument } from '../src/index'
|
|
|
|
export const TEST_COLORS = {
|
|
white: colorToCSS({ r: 1, g: 1, b: 1, a: 1 }),
|
|
slate950: colorToCSS({ r: 2 / 255, g: 6 / 255, b: 23 / 255, a: 1 }),
|
|
slate900: colorToCSS({ r: 17 / 255, g: 24 / 255, b: 39 / 255, a: 1 }),
|
|
slate700: colorToCSS({ r: 31 / 255, g: 41 / 255, b: 55 / 255, a: 1 }),
|
|
slate200: colorToCSS({ r: 226 / 255, g: 232 / 255, b: 240 / 255, a: 1 }),
|
|
slateShadow: colorToCSS({ r: 15 / 255, g: 23 / 255, b: 42 / 255, a: 0.16 }),
|
|
sky100: colorToCSS({ r: 224 / 255, g: 242 / 255, b: 254 / 255, a: 1 }),
|
|
sky700: colorToCSS({ r: 3 / 255, g: 105 / 255, b: 161 / 255, a: 1 })
|
|
} as const
|
|
|
|
export const cardDocument: DesignDocument = {
|
|
type: 'document',
|
|
children: [
|
|
{
|
|
type: 'element',
|
|
tagName: 'article',
|
|
attrs: { class: 'card' },
|
|
children: [
|
|
{
|
|
type: 'element',
|
|
tagName: 'h1',
|
|
attrs: { class: 'title' },
|
|
children: [{ type: 'text', text: 'OpenPencil' }]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
|
|
export const cardHTML = `
|
|
<article class="card">
|
|
<h1 class="title">OpenPencil</h1>
|
|
<p class="description">Design with code-shaped CSS.</p>
|
|
</article>
|
|
`
|
|
|
|
export const cardCSS = `
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
width: 320px;
|
|
height: 180px;
|
|
padding: 24px;
|
|
border: 1px solid ${TEST_COLORS.slate200};
|
|
border-radius: 16px;
|
|
background: ${TEST_COLORS.white};
|
|
box-shadow: 0px 16px 40px 0px ${TEST_COLORS.slateShadow};
|
|
color: ${TEST_COLORS.slate900};
|
|
}
|
|
.title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
line-height: 32px;
|
|
}
|
|
.description {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: ${TEST_COLORS.slate700};
|
|
}
|
|
`
|
|
|
|
export const fixtureHTML = `
|
|
<section class="shell">
|
|
<nav class="navbar">
|
|
<span class="brand">OpenPencil</span>
|
|
<span class="badge">Beta</span>
|
|
</nav>
|
|
<input class="input" value="https://openpencil.dev" />
|
|
</section>
|
|
`
|
|
|
|
export const fixtureCSS = `
|
|
.shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
width: 480px;
|
|
padding: 32px;
|
|
background: ${TEST_COLORS.white};
|
|
}
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 416px;
|
|
height: 48px;
|
|
padding: 0 16px;
|
|
border: 1px solid ${TEST_COLORS.slate200};
|
|
border-radius: 12px;
|
|
}
|
|
.brand {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 24px;
|
|
padding: 0 10px;
|
|
border-radius: 9999px;
|
|
background: ${TEST_COLORS.sky100};
|
|
color: ${TEST_COLORS.sky700};
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.input {
|
|
width: 312px;
|
|
height: 40px;
|
|
padding: 0 12px;
|
|
border: 1px solid ${TEST_COLORS.slate200};
|
|
border-radius: 8px;
|
|
color: ${TEST_COLORS.slate950};
|
|
font-size: 14px;
|
|
}
|
|
`
|
|
|
|
export const tailwindCardClasses = [
|
|
'flex',
|
|
'flex-col',
|
|
'gap-3',
|
|
'w-80',
|
|
'h-44',
|
|
'p-6',
|
|
'rounded-xl',
|
|
'bg-white',
|
|
'text-slate-900'
|
|
] as const
|
|
|
|
export const tailwindInputClasses = [
|
|
'h-10',
|
|
'w-80',
|
|
'rounded-md',
|
|
'border',
|
|
'border-slate-300',
|
|
'bg-white',
|
|
'px-3',
|
|
'text-sm',
|
|
'text-slate-900'
|
|
] as const
|