markopress 0.0.1

package/src/theme/default/design-systems/default.ts

@@ -0,0 +1,331 @@
+/**
+ * Default Design System Preset
+ * Plain, clean style matching the original MarkoPress theme
+ * Based on the existing styles.css
+ */
+
+import type { DesignSystem } from './types.js';
+
+export const defaultPreset: DesignSystem = {
+  name: 'default',
+  version: '2.0.0',
+  description: 'MarkoPress default theme (VitePress-inspired with Indigo brand color)',
+
+  colors: {
+    // Primary brand color (Indigo)
+    primary: {
+      '1': '#3451b2',  // Dark indigo for dark mode text / active states
+      '2': '#3a5ccc',  // Primary indigo (brand color)
+      '3': '#5672cd',  // Light indigo
+      soft: 'rgba(100, 108, 255, 0.14)',
+    },
+
+    // Success (Green)
+    success: {
+      '1': '#059669',
+      '2': '#10b981',
+      '3': '#34d399',
+      soft: 'rgba(16, 185, 129, 0.1)',
+    },
+
+    // Warning (Yellow/Orange)
+    warning: {
+      '1': '#d97706',
+      '2': '#f59e0b',
+      '3': '#fbbf24',
+      soft: 'rgba(245, 158, 11, 0.1)',
+    },
+
+    // Danger (Red)
+    danger: {
+      '1': '#dc2626',
+      '2': '#ef4444',
+      '3': '#f87171',
+      soft: 'rgba(239, 68, 68, 0.1)',
+    },
+
+    // Info (Cyan)
+    info: {
+      '1': '#0891b2',
+      '2': '#06b6d4',
+      '3': '#22d3ee',
+      soft: 'rgba(6, 182, 212, 0.1)',
+    },
+
+    // Gray scale (Light mode)
+    gray: {
+      '1': '#e5e7eb',
+      '2': '#f3f4f6',
+      '3': '#f9fafb',
+      soft: 'rgba(107, 114, 128, 0.1)',
+    },
+
+    // Background colors (Light mode)
+    bg: {
+      default: '#ffffff',
+      alt: '#f9fafb',
+      elevated: '#ffffff',
+      soft: '#f3f4f6',
+    },
+
+    // Text colors (Light mode)
+    text: {
+      '1': '#111827',
+      '2': '#4b5563',
+      '3': '#6b7280',
+    },
+
+    // Border colors (Light mode)
+    border: {
+      default: '#e5e7eb',
+      divider: '#e5e7eb',
+      gutter: '#e5e7eb',
+    },
+
+    // Divider
+    divider: '#e5e7eb',
+
+    // Soft backgrounds
+    soft: {
+      brand: 'rgba(59, 130, 246, 0.1)',
+      gray: 'rgba(107, 114, 128, 0.1)',
+    },
+  },
+
+  typography: {
+    fontFamily: {
+      sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      mono: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+    },
+
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+    },
+
+    fontWeight: {
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+
+    lineHeight: {
+      tight: 1.25,
+      normal: 1.5,
+      relaxed: 1.75,
+    },
+  },
+
+  spacing: {
+    scale: {
+      xs: '0.25rem',
+      sm: '0.5rem',
+      md: '1rem',
+      lg: '1.5rem',
+      xl: '2rem',
+      '2xl': '3rem',
+      '3xl': '4rem',
+      '4xl': '6rem',
+    },
+  },
+
+  effects: {
+    shadows: {
+      '1': '0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06)',
+      '2': '0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07)',
+      '3': '0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08)',
+      '4': '0 20px 50px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08)',
+      '5': '0 25px 70px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1)',
+    },
+
+    borderRadius: {
+      sm: '4px',
+      md: '8px',
+      lg: '12px',
+      full: '9999px',
+    },
+
+    transitions: {
+      base: '250ms ease-in-out',
+      fast: '150ms ease-in-out',
+      slow: '350ms ease-in-out',
+    },
+  },
+
+  layout: {
+    maxWidth: '1440px',
+    navbarHeight: '64px',
+    sidebarWidth: '280px',
+    tocWidth: '240px',
+
+    zIndex: {
+      footer: 10,
+      localNav: 20,
+      nav: 30,
+      layoutTop: 40,
+      backdrop: 50,
+      sidebar: 60,
+    },
+  },
+
+  components: {
+    navbar: {
+      height: '64px',
+      padding: '0 1.5rem',
+      background: '#ffffff',
+      border: '#e5e7eb',
+      borderWidth: '1px',
+      shadow: 'none',
+      logoHeight: '32px',
+    },
+
+    sidebar: {
+      width: '280px',
+      padding: '1.5rem',
+      background: '#f9fafb',
+      border: '#e5e7eb',
+      activeBorder: '2px solid #3451b2',     // NEW: Active state indicator
+      activeBackground: 'rgba(100, 108, 255, 0.1)',  // Updated to Indigo
+    },
+
+    content: {
+      maxWidth: '720px',     // VitePress-proven optimal reading width
+      padding: '32px 24px',
+      fontSize: '16px',
+      lineHeight: 1.7,       // Improved readability
+    },
+
+    code: {
+      fontSize: '0.875em',
+      lineHeight: 1.7,       // Improved readability
+      background: '#f3f4f6',
+      color: '#3a5ccc',     // Updated to Indigo
+      borderRadius: '4px',
+      padding: '0.25rem 0.5rem',
+      blockPadding: '20px 24px',
+      blockBorderRadius: '8px',
+    },
+
+    heading: {
+      h1FontSize: '2.25rem',
+      h2FontSize: '1.5rem',
+      h3FontSize: '1.25rem',
+      h4FontSize: '1.125rem',
+      h1FontWeight: 700,
+      h2FontWeight: 600,
+      h3FontWeight: 600,
+      h1LineHeight: 1.2,
+      h2LineHeight: 1.3,
+      h3LineHeight: 1.4,
+      marginTop: '1.5rem',
+      marginBottom: '1rem',
+    },
+  },
+};
+
+/**
+ * Dark mode override for default preset
+ */
+export const defaultDark: Partial<DesignSystem> = {
+  colors: {
+    // Primary brand color (Indigo - dark mode)
+    primary: {
+      '1': '#a8b1ff',  // Light indigo for dark mode text
+      '2': '#3a5ccc',  // Primary indigo
+      '3': '#3451b2',  // Dark indigo
+      soft: 'rgba(100, 108, 255, 0.16)',  // Increased opacity
+    },
+
+    success: {
+      '1': '#34d399',
+      '2': '#10b981',
+      '3': '#059669',
+      soft: 'rgba(52, 211, 153, 0.15)',
+    },
+
+    warning: {
+      '1': '#fbbf24',
+      '2': '#f59e0b',
+      '3': '#d97706',
+      soft: 'rgba(251, 191, 36, 0.15)',
+    },
+
+    danger: {
+      '1': '#f87171',
+      '2': '#ef4444',
+      '3': '#dc2626',
+      soft: 'rgba(248, 113, 113, 0.15)',
+    },
+
+    info: {
+      '1': '#22d3ee',
+      '2': '#06b6d4',
+      '3': '#0891b2',
+      soft: 'rgba(34, 211, 238, 0.15)',
+    },
+
+    // Gray scale (Dark mode)
+    gray: {
+      '1': '#374151',
+      '2': '#1f2937',
+      '3': '#111827',
+      soft: 'rgba(107, 114, 128, 0.15)',
+    },
+
+    // Background colors (Dark mode - VitePress-inspired)
+    bg: {
+      default: '#1b1b1f',  // VitePress default dark
+      alt: '#1f2937',
+      elevated: '#2d2d30',
+      soft: '#252529',
+    },
+
+    // Text colors (Dark mode)
+    text: {
+      '1': '#f9fafb',
+      '2': '#d1d5db',
+      '3': '#9ca3af',
+    },
+
+    // Border colors (Dark mode)
+    border: {
+      default: '#374151',
+      divider: '#1f2937',
+      gutter: '#1f2937',
+    },
+
+    // Divider (Dark mode)
+    divider: '#1f2937',
+
+    // Soft backgrounds (Dark mode)
+    soft: {
+      brand: 'rgba(96, 165, 250, 0.15)',
+      gray: 'rgba(156, 162, 173, 0.15)',
+    },
+  },
+
+  components: {
+    navbar: {
+      background: '#1b1b1f',
+      border: '#2d2d30',
+    },
+
+    sidebar: {
+      background: '#1b1b1f',
+      activeBorder: '2px solid #a8b1ff',
+      activeBackground: 'rgba(100, 108, 255, 0.16)',
+    },
+
+    code: {
+      background: '#1f2937',
+      color: '#a8b1ff',  // Light indigo for dark mode
+    },
+  },
+};

package/src/theme/default/design-systems/docusaurus.ts

@@ -0,0 +1,341 @@
+/**
+ * Docusaurus Design System Preset
+ * Based on Infima CSS framework
+ * Reference: https://docusaurus.io/docs/styling-layout
+ */
+
+import type { DesignSystem } from './types.js';
+
+export const docusaurus: DesignSystem = {
+  name: 'docusaurus',
+  version: '1.0.0',
+  description: 'Docusaurus design system (Infima framework - Blue-based)',
+
+  colors: {
+    // Primary brand color (Blue)
+    primary: {
+      '1': '#1e80c4',  // Primary text/link color
+      '2': '#2970c9',  // Hover state
+      '3': '#3e6cd4',  // Background color
+      soft: 'rgba(30, 128, 196, 0.1)',
+    },
+
+    // Success (Green)
+    success: {
+      '1': '#00bfa5',
+      '2': '#00d4a4',
+      '3': '#00e4a5',
+      soft: 'rgba(0, 191, 165, 0.1)',
+    },
+
+    // Warning (Orange/Yellow)
+    warning: {
+      '1': '#e66c00',
+      '2': '#ff7b00',
+      '3': '#ff8d00',
+      soft: 'rgba(230, 108, 0, 0.1)',
+    },
+
+    // Danger (Red)
+    danger: {
+      '1': '#c41818',
+      '2': '#dc1e1e',
+      '3': '#e62525',
+      soft: 'rgba(196, 24, 24, 0.1)',
+    },
+
+    // Info (Blue)
+    info: {
+      '1': '#1877f2',
+      '2': '#2d88ff',
+      '3': '#4c8dff',
+      soft: 'rgba(24, 119, 242, 0.1)',
+    },
+
+    // Gray scale (Light mode)
+    gray: {
+      '1': '#d8d8d8',
+      '2': '#e8e8e8',
+      '3': '#f0f0f0',
+      soft: 'rgba(168, 168, 168, 0.15)',
+    },
+
+    // Background colors (Light mode)
+    bg: {
+      default: '#ffffff',
+      alt: '#fafafa',
+      elevated: '#ffffff',
+      soft: '#f5f5f5',
+    },
+
+    // Text colors (Light mode)
+    text: {
+      '1': '#1b1b1b',  // Primary text
+      '2': '#5a5a5a',  // Muted text
+      '3': '#8a8a8a',  // Subtle text
+    },
+
+    // Border colors (Light mode)
+    border: {
+      default: '#dcdcdc',
+      divider: '#eaeaea',
+      gutter: '#eaeaea',
+    },
+
+    // Divider
+    divider: '#eaeaea',
+
+    // Soft backgrounds
+    soft: {
+      brand: 'rgba(30, 128, 196, 0.1)',
+      gray: 'rgba(168, 168, 168, 0.15)',
+    },
+  },
+
+  typography: {
+    fontFamily: {
+      sans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      mono: "'Roboto Mono', 'Courier New', 'Courier', monospace",
+    },
+
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+    },
+
+    fontWeight: {
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+
+    lineHeight: {
+      tight: 1.25,
+      normal: 1.6,
+      relaxed: 1.75,
+    },
+  },
+
+  spacing: {
+    scale: {
+      xs: '0.5rem',   // 8px
+      sm: '0.75rem',  // 12px
+      md: '1rem',     // 16px
+      lg: '1.5rem',   // 24px
+      xl: '2rem',     // 32px
+      '2xl': '3rem',  // 48px
+      '3xl': '4rem',  // 64px
+      '4xl': '5rem',  // 80px
+    },
+  },
+
+  effects: {
+    shadows: {
+      '1': '0 2px 4px rgba(0, 0, 0, 0.04)',
+      '2': '0 4px 8px rgba(0, 0, 0, 0.08)',
+      '3': '0 8px 16px rgba(0, 0, 0, 0.12)',
+      '4': '0 12px 24px rgba(0, 0, 0, 0.16)',
+      '5': '0 16px 32px rgba(0, 0, 0, 0.2)',
+    },
+
+    borderRadius: {
+      sm: '4px',
+      md: '8px',
+      lg: '12px',
+    },
+
+    transitions: {
+      base: '0.2s ease',
+      fast: '0.1s ease',
+      slow: '0.3s ease',
+    },
+  },
+
+  layout: {
+    maxWidth: '1400px',
+    navbarHeight: '68px',        // Taller navbar
+    sidebarWidth: '300px',       // Wider sidebar
+    tocWidth: '260px',           // Wider TOC
+
+    zIndex: {
+      footer: 10,
+      localNav: 20,
+      nav: 30,
+      layoutTop: 40,
+      backdrop: 50,
+      sidebar: 60,
+    },
+  },
+
+  components: {
+    navbar: {
+      height: '68px',
+      padding: '0 32px',
+      background: '#ffffff',
+      border: '#dcdcdc',
+      borderWidth: '1px',
+      shadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
+      logoHeight: '32px',
+      itemPadding: '10px 16px',
+      itemGap: '8px',
+    },
+
+    sidebar: {
+      width: '300px',
+      padding: '24px 16px',
+      background: '#ffffff',
+      border: '#eaeaea',
+      itemHeight: '36px',         // Spacious items
+      itemPadding: '8px 16px',
+      itemGap: '4px',
+      itemBorderRadius: '8px',    // Rounded corners
+      itemFontSize: '15px',
+      itemFontWeight: 400,
+      activeBackground: 'rgba(30, 128, 196, 0.12)',
+      activeBorder: 'none',
+      hoverBackground: 'rgba(168, 168, 168, 0.1',
+      categoryPadding: '16px 16px 8px',
+      categoryFontSize: '13px',
+      categoryFontWeight: 700,
+      categoryTextTransform: 'none',
+    },
+
+    content: {
+      maxWidth: '800px',
+      padding: '40px 32px',
+      fontSize: '17px',
+      lineHeight: 1.8,
+    },
+
+    code: {
+      fontSize: '0.9em',
+      lineHeight: 1.6,
+      background: 'rgba(168, 168, 168, 0.15)',
+      color: '#1e80c4',
+      borderRadius: '6px',
+      padding: '3px 8px',
+      blockPadding: '24px 28px',
+      blockBorderRadius: '12px',
+    },
+
+    heading: {
+      h1FontSize: '2.25rem',
+      h2FontSize: '1.75rem',
+      h3FontSize: '1.375rem',
+      h4FontSize: '1.125rem',
+      h1FontWeight: 700,
+      h2FontWeight: 700,
+      h3FontWeight: 600,
+      h1LineHeight: 1.25,
+      h2LineHeight: 1.35,
+      h3LineHeight: 1.45,
+      marginTop: '32px',
+      marginBottom: '20px',
+    },
+  },
+};
+
+/**
+ * Dark mode override for Docusaurus
+ */
+export const docusaurusDark: Partial<DesignSystem> = {
+  colors: {
+    // Primary brand color (Blue - dark mode)
+    primary: {
+      '1': '#4facfe',
+      '2': '#00f2fe',
+      '3': '#1e80c4',
+      soft: 'rgba(79, 172, 254, 0.15)',
+    },
+
+    success: {
+      '1': '#00ffdb',
+      '2': '#00e4a5',
+      '3': '#00c294',
+      soft: 'rgba(0, 255, 219, 0.15)',
+    },
+
+    warning: {
+      '1': '#ffb347',
+      '2': '#ff9500',
+      '3': '#cc7700',
+      soft: 'rgba(255, 179, 71, 0.15)',
+    },
+
+    danger: {
+      '1': '#ff6b6b',
+      '2': '#ee5a5a',
+      '3': '#c41818',
+      soft: 'rgba(255, 107, 107, 0.15)',
+    },
+
+    info: {
+      '1': '#74b9ff',
+      '2': '#4facfe',
+      '3': '#1877f2',
+      soft: 'rgba(116, 185, 255, 0.15)',
+    },
+
+    // Gray scale (Dark mode)
+    gray: {
+      '1': '#5a5a5a',
+      '2': '#4a4a4a',
+      '3': '#3a3a3a',
+      soft: 'rgba(138, 138, 138, 0.15)',
+    },
+
+    // Background colors (Dark mode)
+    bg: {
+      default: '#1b1b1d',
+      alt: '#242526',
+      elevated: '#2b2b2d',
+      soft: '#242526',
+    },
+
+    // Text colors (Dark mode)
+    text: {
+      '1': '#f5f5f5',
+      '2': '#c9c9c9',
+      '3': '#8a8a8a',
+    },
+
+    // Border colors (Dark mode)
+    border: {
+      default: '#4a4a4a',
+      divider: '#303030',
+      gutter: '#303030',
+    },
+
+    // Divider (Dark mode)
+    divider: '#303030',
+
+    // Soft backgrounds (Dark mode)
+    soft: {
+      brand: 'rgba(79, 172, 254, 0.15)',
+      gray: 'rgba(138, 138, 138, 0.15)',
+    },
+  },
+
+  components: {
+    navbar: {
+      background: '#242526',
+      border: '#4a4a4a',
+    },
+
+    sidebar: {
+      background: '#1b1b1d',
+    },
+
+    code: {
+      background: 'rgba(138, 138, 138, 0.15)',
+      color: '#4facfe',
+    },
+  },
+};