docs: refresh DocC navigation and theming

Author: alexey1312

.claude/rules/troubleshooting.md

@@ -54,3 +54,7 @@ Common problems and solutions when working with ExFig.
 | PKL `swiftuiColorSwift` casing      | PKL codegen lowercases: `swiftuiColorSwift`, not `swiftUIColorSwift` -- check with `pkl eval` if unsure                                                                                                                                               |
 | Penpot `svgAttrs` decoding          | `svgAttrs` contains mixed types (strings + nested dicts) -- use `SVGAttributes` wrapper that extracts string values only, not `[String: String]`                                                                                                      |
 | iOS icons PKL: `xcassetsPath`       | `xcassetsPath` and `target` are required in iOS PKL config even for Penpot; `assetsFolder` is folder name inside xcassets, not absolute path                                                                                                         |
+| DocC preview white screen           | Don't overwrite `docs/index.html` — it's a full SPA. Rebuild with `./bin/mise run docs`                                                                                                                                                              |
+| DocC `+=` infinite redirect         | `--hosting-base-path` adds prefix — omit for local preview, use only for GitHub Pages                                                                                                                                                                 |
+| DocC preview port 8080              | `widget-simulator-service` occupies 8080 on macOS — use port 9090 or kill it                                                                                                                                                                          |
+| DocC icon invisible dark mode       | `currentColor` in SVG doesn't work in `<img>` — use `~dark.svg` with `#ffffff` stroke                                                                                                                                                                 |

CLAUDE.md

@@ -371,6 +371,13 @@ When changing fields on `ColorsSourceInput` / `IconsSourceInput` / `ImagesSource
 `docs/` is DocC OUTPUT (gitignored, for GitHub Pages) — never put source docs there.
 When adding new features, mention briefly in README Quick Start AND update relevant DocC articles.
 
+**DocC visual directives:** Articles use `@Metadata` with `@PageImage`, `@PageColor`, `@TitleHeading`.
+SVG icons from Lucide (MIT) in `ExFig.docc/Resources/`. Dark variants use `~dark.svg` suffix
+with `#ffffff` stroke (light uses `#1d1d1f`). `currentColor` does NOT work in DocC icon SVGs
+(`<img>` tag context). `@Links(visualStyle: compactGrid|detailedGrid)` for card-grid navigation.
+`theme-settings.json` in docc root for global color/font customization.
+Color scheme: Getting Started → blue, iOS → blue, Android → green, Flutter → blue, Advanced → purple, Contributing → orange.
+
 **JSONCodec usage:**
 
 ```swift

Sources/ExFigCLI/ExFig.docc/Android/Android.md

@@ -2,6 +2,12 @@
 
 Export Figma resources to Android projects with XML resources and Jetpack Compose code.
 
+@Metadata {
+    @PageImage(purpose: icon, source: "android-icon", alt: "Android platform")
+    @PageColor(green)
+    @TitleHeading("Platform Guide")
+}
+
 ## Overview
 
 ExFig exports design resources from Figma to Android projects:
@@ -224,10 +230,12 @@ fun MyScreen() {
 
 ### Resources
 
-- <doc:AndroidColors>
-- <doc:AndroidIcons>
-- <doc:AndroidImages>
-- <doc:AndroidTypography>
+@Links(visualStyle: compactGrid) {
+    - <doc:AndroidColors>
+    - <doc:AndroidIcons>
+    - <doc:AndroidImages>
+    - <doc:AndroidTypography>
+}
 
 ## See Also
 

Sources/ExFigCLI/ExFig.docc/Android/AndroidColors.md

@@ -2,6 +2,12 @@
 
 Export color palettes from Figma to Android XML resources and Jetpack Compose code.
 
+@Metadata {
+    @PageImage(purpose: icon, source: "colors-icon", alt: "Android colors export")
+    @PageColor(green)
+    @TitleHeading("Platform Guide")
+}
+
 ## Overview
 
 ExFig exports colors as:

Sources/ExFigCLI/ExFig.docc/Android/AndroidIcons.md

@@ -2,6 +2,12 @@
 
 Export vector icons from Figma to Android VectorDrawable XML resources.
 
+@Metadata {
+    @PageImage(purpose: icon, source: "icons-icon", alt: "Android icons export")
+    @PageColor(green)
+    @TitleHeading("Platform Guide")
+}
+
 ## Overview
 
 ExFig exports icons as:

Sources/ExFigCLI/ExFig.docc/Android/AndroidImages.md

@@ -2,6 +2,12 @@
 
 Export raster images from Figma to Android drawable resources in PNG or WebP format.
 
+@Metadata {
+    @PageImage(purpose: icon, source: "images-icon", alt: "Android images export")
+    @PageColor(green)
+    @TitleHeading("Platform Guide")
+}
+
 ## Overview
 
 ExFig exports images as:

Sources/ExFigCLI/ExFig.docc/Android/AndroidTypography.md

@@ -2,6 +2,12 @@
 
 Export text styles from Figma to Android XML resources and Jetpack Compose code.
 
+@Metadata {
+    @PageImage(purpose: icon, source: "typography-icon", alt: "Android typography export")
+    @PageColor(green)
+    @TitleHeading("Platform Guide")
+}
+
 ## Overview
 
 ExFig exports typography as:

Sources/ExFigCLI/ExFig.docc/Architecture.md

@@ -2,6 +2,12 @@
 
 ExFig v2.0 uses a plugin-based architecture with twelve modules. This document explains the system design and how to extend it.
 
+@Metadata {
+    @PageImage(purpose: icon, source: "architecture-icon", alt: "Architecture overview")
+    @PageColor(orange)
+    @TitleHeading("Contributing")
+}
+
 ## Overview
 
 ```

Sources/ExFigCLI/ExFig.docc/BatchProcessing.md

@@ -2,6 +2,12 @@
 
 Export all resource types from one or more configs in a single run.
 
+@Metadata {
+    @PageImage(purpose: icon, source: "batch-icon", alt: "Batch processing")
+    @PageColor(purple)
+    @TitleHeading("Advanced")
+}
+
 ## Overview
 
 The `batch` command is the primary way to use ExFig in production. It exports colors, icons, images,

Sources/ExFigCLI/ExFig.docc/CICDIntegration.md

@@ -2,6 +2,12 @@
 
 Automate design exports in your continuous integration pipeline.
 
+@Metadata {
+    @PageImage(purpose: icon, source: "cicd-icon", alt: "CI/CD integration")
+    @PageColor(purple)
+    @TitleHeading("Advanced")
+}
+
 ## Overview
 
 ExFig is designed for headless environments. It provides quiet mode, structured JSON reports,