@usecross/docs 0.4.2 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usecross/docs",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Documentation framework built on Cross-Inertia",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,8 +17,7 @@
       "development": "./src/ssr.tsx",
       "default": "./dist/ssr.js"
     },
-    "./styles.css": "./src/styles.css",
-    "./tailwind.preset": "./src/tailwind.preset.cjs"
+    "./styles.css": "./src/styles.css"
   },
   "files": [
     "dist",

package/src/styles.css

@@ -1,22 +1,49 @@
 /**
- * Cross-Docs default styles
+ * Cross-Docs default styles (Tailwind CSS v4)
  *
- * Import this file in your app's CSS entry point:
+ * Import this file in your app's CSS entry point after importing Tailwind:
+ *
+ * @import "tailwindcss";
+ * @plugin "@tailwindcss/typography";
+ * @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');
  * @import '@usecross/docs/styles.css';
+ * @source "../node_modules/@usecross/docs";
+ *
+ * Note: The @source directive ensures Tailwind scans the package for utility classes.
+ * Note: The Google Fonts import must come before other imports to avoid CSS ordering warnings.
  */
 
-@reference "tailwindcss";
-
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');
+/* Theme customizations for Tailwind v4 */
+@theme {
+  /* Max width */
+  --max-width-8xl: 88rem;
+
+  /* Font families */
+  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --font-heading: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'Fira Code', Consolas, Monaco, 'Andale Mono', monospace;
+
+  /* Default primary colors - sky blue (can be overridden via CSS variables) */
+  --color-primary-50: #f0f9ff;
+  --color-primary-100: #e0f2fe;
+  --color-primary-200: #bae6fd;
+  --color-primary-300: #7dd3fc;
+  --color-primary-400: #38bdf8;
+  --color-primary-500: #0ea5e9;
+  --color-primary-600: #0284c7;
+  --color-primary-700: #0369a1;
+  --color-primary-800: #075985;
+  --color-primary-900: #0c4a6e;
+  --color-primary-950: #082f49;
+
+  /* Dark colors for code blocks */
+  --color-dark-800: #1e293b;
+  --color-dark-900: #0f172a;
+}
 
 @layer base {
   :root {
-    /* Font stacks */
-    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
-      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    --font-heading: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-    --font-mono: 'Fira Code', Consolas, Monaco, 'Andale Mono', monospace;
-
     /* Code highlighting - matches Starlight/Expressive Code dark theme */
     --shiki-color-text: #e2e8f0;
     --shiki-color-background: #24292f;
@@ -41,11 +68,9 @@
   }
 
   body {
-    @apply antialiased;
+    @apply antialiased bg-white text-gray-800;
     font-family: var(--font-sans);
     font-weight: 400;
-    background: #ffffff;
-    color: #1f2937;
   }
 
   /* Headings use heading font */
@@ -63,10 +88,21 @@
 @layer components {
   /* Prose content styles */
   .prose {
+    max-width: none;
     font-size: 1rem;
     line-height: 1.75;
   }
 
+  /* Prose link styling */
+  .prose a {
+    @apply text-primary-600 hover:text-primary-700;
+  }
+
+  /* Dark mode prose link styling */
+  .prose-invert a {
+    @apply text-primary-400 hover:text-primary-300;
+  }
+
   /* Scroll margin for headings (so they don't hide under fixed header) */
   .prose h1,
   .prose h2,
@@ -99,6 +135,11 @@
   .prose :not(pre) > code::after {
     content: none;
   }
+
+  /* Dark mode inline code */
+  .prose-invert :not(pre) > code {
+    @apply bg-gray-800;
+  }
 }
 
 /* Syntax highlighting - rounded corners like Starlight */

package/src/tailwind.preset.cjs

@@ -1,118 +0,0 @@
-/**
- * Cross-Docs Tailwind CSS preset
- *
- * @example
- * ```js
- * // tailwind.config.js
- * const docsPreset = require('@usecross/docs/tailwind.preset')
- *
- * module.exports = {
- *   presets: [docsPreset],
- *   content: [
- *     './frontend/**\/*.{ts,tsx}',
- *     './node_modules/@usecross/docs/**\/*.{js,tsx}',
- *   ],
- *   theme: {
- *     extend: {
- *       colors: {
- *         primary: { // Override with your brand colors },
- *       },
- *     },
- *   },
- * }
- * ```
- */
-module.exports = {
-  darkMode: 'class',
-  theme: {
-    extend: {
-      maxWidth: {
-        '8xl': '88rem',
-      },
-      fontFamily: {
-        sans: [
-          'system-ui',
-          '-apple-system',
-          'Segoe UI',
-          'Roboto',
-          'Helvetica',
-          'Arial',
-          'sans-serif',
-          'Apple Color Emoji',
-          'Segoe UI Emoji',
-          'Segoe UI Symbol',
-        ],
-        heading: [
-          'system-ui',
-          '-apple-system',
-          'Segoe UI',
-          'Roboto',
-          'sans-serif',
-        ],
-        mono: ['Fira Code', 'Consolas', 'Monaco', 'Andale Mono', 'monospace'],
-      },
-      colors: {
-        // Default primary colors - sky blue (can be overridden)
-        primary: {
-          50: '#f0f9ff',
-          100: '#e0f2fe',
-          200: '#bae6fd',
-          300: '#7dd3fc',
-          400: '#38bdf8',
-          500: '#0ea5e9',
-          600: '#0284c7',
-          700: '#0369a1',
-          800: '#075985',
-          900: '#0c4a6e',
-          950: '#082f49',
-        },
-        // Dark colors for code blocks
-        dark: {
-          800: '#1e293b',
-          900: '#0f172a',
-        },
-      },
-      typography: (theme) => ({
-        DEFAULT: {
-          css: {
-            maxWidth: 'none',
-            color: theme('colors.gray.700'),
-            a: {
-              color: theme('colors.primary.600'),
-              '&:hover': {
-                color: theme('colors.primary.700'),
-              },
-            },
-            'code::before': {
-              content: '""',
-            },
-            'code::after': {
-              content: '""',
-            },
-            code: {
-              backgroundColor: theme('colors.gray.100'),
-              padding: '0.25rem 0.375rem',
-              borderRadius: '0.25rem',
-              fontWeight: '500',
-            },
-          },
-        },
-        invert: {
-          css: {
-            color: theme('colors.gray.300'),
-            a: {
-              color: theme('colors.primary.400'),
-              '&:hover': {
-                color: theme('colors.primary.300'),
-              },
-            },
-            code: {
-              backgroundColor: theme('colors.gray.800'),
-            },
-          },
-        },
-      }),
-    },
-  },
-  plugins: [require('@tailwindcss/typography')],
-}