writekit/frontends/studio/uno.config.ts

import { defineConfig, presetWind4, presetIcons, presetTypography } from 'unocss'
import { theme, shortcuts } from '@writekit/ui/uno.config'

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,
  shortcuts,
})