260 lines
7.9 KiB
TypeScript
260 lines
7.9 KiB
TypeScript
|
import { defineConfig, presetWind4, presetIcons, presetTypography } from 'unocss'
|
||
|
|
|
||
|
|
export default defineConfig({
|
||
|
|
presets: [
|
||
|
|
presetWind4(),
|
||
|
|
presetTypography({
|
||
|
|
cssExtend: {
|
||
|
|
':not(pre) > code': {
|
||
|
|
'font-family': '"SF Mono", "Fira Code", Consolas, monospace',
|
||
|
|
'font-size': '0.875em',
|
||
|
|
'background': '#fafafa',
|
||
|
|
'padding': '0.175rem 0.375rem',
|
||
|
|
'border-radius': '0.25rem',
|
||
|
|
},
|
||
|
|
'p': {
|
||
|
|
'margin': '1.25rem 0',
|
||
|
|
'line-height': '1.7',
|
||
|
|
},
|
||
|
|
'h1': {
|
||
|
|
'margin-top': '0',
|
||
|
|
'margin-bottom': '1.25rem',
|
||
|
|
'font-size': '2rem',
|
||
|
|
'font-weight': '700',
|
||
|
|
'letter-spacing': '-0.025em',
|
||
|
|
'line-height': '1.2',
|
||
|
|
},
|
||
|
|
'h2': {
|
||
|
|
'margin-top': '2.5rem',
|
||
|
|
'margin-bottom': '1.25rem',
|
||
|
|
'font-size': '1.5rem',
|
||
|
|
'font-weight': '650',
|
||
|
|
'letter-spacing': '-0.02em',
|
||
|
|
'line-height': '1.3',
|
||
|
|
},
|
||
|
|
'h3': {
|
||
|
|
'margin-top': '2rem',
|
||
|
|
'margin-bottom': '1rem',
|
||
|
|
'font-size': '1.25rem',
|
||
|
|
'font-weight': '600',
|
||
|
|
'letter-spacing': '-0.015em',
|
||
|
|
'line-height': '1.35',
|
||
|
|
},
|
||
|
|
'h4': {
|
||
|
|
'margin-top': '1.625rem',
|
||
|
|
'margin-bottom': '0.8rem',
|
||
|
|
'font-size': '1.0625rem',
|
||
|
|
'font-weight': '600',
|
||
|
|
'letter-spacing': '-0.01em',
|
||
|
|
},
|
||
|
|
'ul': {
|
||
|
|
'list-style-type': 'disc',
|
||
|
|
'margin': '1.25rem 0',
|
||
|
|
'padding-left': '1.375rem',
|
||
|
|
},
|
||
|
|
'ol': {
|
||
|
|
'list-style-type': 'decimal',
|
||
|
|
'margin': '1.25rem 0',
|
||
|
|
'padding-left': '1.375rem',
|
||
|
|
},
|
||
|
|
'li': {
|
||
|
|
'margin': '0.5rem 0',
|
||
|
|
'padding-left': '0.25rem',
|
||
|
|
},
|
||
|
|
'li::marker': {
|
||
|
|
'color': '#71717a',
|
||
|
|
},
|
||
|
|
'a': {
|
||
|
|
'color': '#2563eb',
|
||
|
|
'text-decoration': 'underline',
|
||
|
|
'text-underline-offset': '2px',
|
||
|
|
'text-decoration-color': 'rgba(37, 99, 235, 0.4)',
|
||
|
|
},
|
||
|
|
'a:hover': {
|
||
|
|
'text-decoration-color': '#2563eb',
|
||
|
|
},
|
||
|
|
'pre': {
|
||
|
|
'margin': '1.75rem 0',
|
||
|
|
'padding': '1.125rem 1.25rem',
|
||
|
|
'background': '#fafafa',
|
||
|
|
'border': '1px solid #e4e4e7',
|
||
|
|
'border-radius': '0.375rem',
|
||
|
|
'overflow-x': 'auto',
|
||
|
|
'font-family': '"SF Mono", "Fira Code", Consolas, monospace',
|
||
|
|
'font-size': '0.875rem',
|
||
|
|
'line-height': '1.6',
|
||
|
|
},
|
||
|
|
'pre code': {
|
||
|
|
'background': 'transparent',
|
||
|
|
'padding': '0',
|
||
|
|
'font-size': 'inherit',
|
||
|
|
},
|
||
|
|
'blockquote': {
|
||
|
|
'margin': '1.75rem 0',
|
||
|
|
'padding': '0 0 0 1.25rem',
|
||
|
|
'border-left': '2px solid #e4e4e7',
|
||
|
|
'color': '#71717a',
|
||
|
|
'font-style': 'normal',
|
||
|
|
},
|
||
|
|
'blockquote p': {
|
||
|
|
'margin': '0',
|
||
|
|
},
|
||
|
|
'hr': {
|
||
|
|
'border': 'none',
|
||
|
|
'border-top': '1px solid #e4e4e7',
|
||
|
|
'margin': '2.5rem 0',
|
||
|
|
},
|
||
|
|
'img': {
|
||
|
|
'max-width': '100%',
|
||
|
|
'height': 'auto',
|
||
|
|
'border-radius': '0.375rem',
|
||
|
|
'margin': '1.75rem 0',
|
||
|
|
},
|
||
|
|
'table': {
|
||
|
|
'width': '100%',
|
||
|
|
'margin': '1.75rem 0',
|
||
|
|
'border-collapse': 'collapse',
|
||
|
|
'font-size': '0.9375rem',
|
||
|
|
},
|
||
|
|
'th': {
|
||
|
|
'padding': '0.625rem 0.75rem',
|
||
|
|
'border': '1px solid #e4e4e7',
|
||
|
|
'text-align': 'left',
|
||
|
|
'background': '#fafafa',
|
||
|
|
'font-weight': '600',
|
||
|
|
},
|
||
|
|
'td': {
|
||
|
|
'padding': '0.625rem 0.75rem',
|
||
|
|
'border': '1px solid #e4e4e7',
|
||
|
|
'text-align': 'left',
|
||
|
|
},
|
||
|
|
'strong': {
|
||
|
|
'font-weight': '600',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
presetIcons({
|
||
|
|
scale: 1.2,
|
||
|
|
cdn: 'https://esm.sh/',
|
||
|
|
extraProperties: {
|
||
|
|
'display': 'inline-block',
|
||
|
|
'vertical-align': 'middle',
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
rules: [
|
||
|
|
['animate-shimmer', { animation: 'shimmer 1.5s ease-in-out infinite' }],
|
||
|
|
],
|
||
|
|
preflights: [
|
||
|
|
{
|
||
|
|
getCSS: () => `
|
||
|
|
@keyframes shimmer {
|
||
|
|
0% { opacity: 1; }
|
||
|
|
50% { opacity: 0.5; }
|
||
|
|
100% { opacity: 1; }
|
||
|
|
}
|
||
|
|
@keyframes fade-in {
|
||
|
|
from { opacity: 0; transform: translateY(4px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ProseMirror editor placeholder */
|
||
|
|
.ProseMirror p.is-editor-empty:first-child::before {
|
||
|
|
color: #a3a3a3;
|
||
|
|
content: attr(data-placeholder);
|
||
|
|
float: left;
|
||
|
|
height: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Task list styling */
|
||
|
|
.prose ul[data-type="taskList"] {
|
||
|
|
list-style: none;
|
||
|
|
padding-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose ul[data-type="taskList"] li {
|
||
|
|
display: flex;
|
||
|
|
align-items: baseline;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose ul[data-type="taskList"] li > label {
|
||
|
|
flex-shrink: 0;
|
||
|
|
user-select: none;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose ul[data-type="taskList"] li > label input[type="checkbox"] {
|
||
|
|
cursor: pointer;
|
||
|
|
accent-color: #10b981;
|
||
|
|
width: 1em;
|
||
|
|
height: 1em;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose ul[data-type="taskList"] li > div {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Code block syntax highlighting */
|
||
|
|
.prose pre .hljs {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
theme: {
|
||
|
|
colors: {
|
||
|
|
bg: '#fafafa',
|
||
|
|
surface: '#ffffff',
|
||
|
|
text: '#0a0a0a',
|
||
|
|
muted: '#737373',
|
||
|
|
border: '#e5e5e5',
|
||
|
|
accent: '#10b981',
|
||
|
|
success: '#10b981',
|
||
|
|
warning: '#f59e0b',
|
||
|
|
danger: '#ef4444',
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
||
|
|
mono: '"SF Mono", "JetBrains Mono", "Fira Code", Consolas, monospace',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
shortcuts: {
|
||
|
|
// Buttons - dark bg with light text for primary
|
||
|
|
'btn': 'inline-flex items-center justify-center gap-2 px-4 py-2 text-xs font-medium border border-border transition-all duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
|
||
|
|
'btn-primary': 'btn bg-text text-bg border-text hover:bg-[#1a1a1a]',
|
||
|
|
'btn-secondary': 'btn bg-bg text-text hover:border-muted',
|
||
|
|
'btn-danger': 'btn text-danger border-danger hover:bg-danger hover:text-white hover:border-danger',
|
||
|
|
'btn-ghost': 'btn border-transparent hover:bg-border',
|
||
|
|
|
||
|
|
// Inputs - clean borders, minimal styling
|
||
|
|
'input': 'w-full px-3 py-2 text-sm bg-bg border border-border font-sans focus:outline-none focus:border-muted transition-colors placeholder:text-muted/60',
|
||
|
|
'textarea': 'input resize-none',
|
||
|
|
|
||
|
|
// Labels - small, muted
|
||
|
|
'label': 'block text-xs text-muted font-medium mb-1',
|
||
|
|
|
||
|
|
// Cards - minimal borders, no shadows
|
||
|
|
'card': 'bg-surface border border-border p-6',
|
||
|
|
'section': 'card',
|
||
|
|
|
||
|
|
// Navigation - matching old dashboard
|
||
|
|
'nav-item': 'relative flex items-center gap-2.5 px-2.5 py-2 text-[13px] font-[450] text-muted transition-all duration-150 hover:text-text hover:bg-black/4',
|
||
|
|
'nav-item-active': 'relative flex items-center gap-2.5 px-2.5 py-2 text-[13px] font-[450] text-text bg-black/4 before:content-[""] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-[3px] before:h-4 before:bg-accent before:rounded-r-sm',
|
||
|
|
'nav-section': 'text-[10px] uppercase tracking-[0.06em] text-muted font-semibold px-2.5 pt-3 pb-1.5',
|
||
|
|
|
||
|
|
// Badges
|
||
|
|
'badge': 'inline-flex items-center text-xs px-2 py-0.5 border',
|
||
|
|
'badge-draft': 'badge text-warning border-warning/40 bg-warning/10',
|
||
|
|
'badge-published': 'badge text-success border-success/40 bg-success/10',
|
||
|
|
|
||
|
|
// Page structure
|
||
|
|
'page-header': 'flex items-center justify-between mb-6',
|
||
|
|
'page-title': 'text-base font-medium text-text',
|
||
|
|
},
|
||
|
|
})
|