pict-section-inlinedocumentation 0.0.7 → 1.0.1

package/docs/_brand.json

@@ -0,0 +1,18 @@
+{
+	"Hash": "pict-section-inlinedocumentation",
+	"Name": "Pict Section Inlinedocumentation",
+	"Tagline": "Pict embeddable inline documentation browser with topic support",
+	"Palette": "mix",
+	"Icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"frame-pict-section-inlinedocumentation-filled-light\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\" fill=\"#cb8e2a\"/>\n\t\t<g clip-path=\"url(#frame-pict-section-inlinedocumentation-filled-light)\"><defs><mask id=\"_cr_26467\"><rect x=\"0\" y=\"0\" width=\"96\" height=\"96\" fill=\"#fff\"/>\n\t\t\t\t\t\t<circle cx=\"65\" cy=\"48\" r=\"32\" fill=\"#000\"/></mask></defs>\n\t\t\t\t\t<circle cx=\"48\" cy=\"48\" r=\"32\" fill=\"rgba(255,255,255,0.18)\" mask=\"url(#_cr_26467)\"/>\n\t\t\t\t\t<circle cx=\"65\" cy=\"48\" r=\"26\" fill=\"#53baa9\" opacity=\"0.7\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"28\" font-weight=\"700\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">PSI</text>\n\t</svg>",
+	"IconType": "svg",
+	"Favicon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-inlinedocumentation-light\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\" fill=\"#cb8e2a\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-inlinedocumentation-light)\"><circle cx=\"48\" cy=\"48\" r=\"36\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"FaviconDark": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-inlinedocumentation-dark\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\" fill=\"#dcb574\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-inlinedocumentation-dark)\"><circle cx=\"48\" cy=\"48\" r=\"36\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#101418\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"Colors": {
+		"Primary": "#cb8e2a",
+		"Secondary": "#53baa9",
+		"PrimaryLight": "#cb8e2a",
+		"PrimaryDark": "#dcb574",
+		"SecondaryLight": "#53baa9",
+		"SecondaryDark": "#99d0c7"
+	}
+}

package/docs/index.html

@@ -8,8 +8,6 @@
 
 		<title>pict-section-inlinedocumentation v0.0.1 Documentation</title>
 
-		<!-- Application Stylesheet -->
-		<link href="css/docuserve.css" rel="stylesheet">
 		<!-- KaTeX stylesheet for LaTeX equation rendering -->
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css">
 		<!-- PICT Dynamic View CSS Container -->

package/example_applications/basic/docs/_brand.json

@@ -0,0 +1,18 @@
+{
+	"Hash": "pict-section-inlinedocumentation/basic",
+	"Name": "basic",
+	"Tagline": "",
+	"Palette": "carnival",
+	"Icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"frame-pict-section-inlinedocumentation_basic-filled-light\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\" fill=\"#e4a926\"/>\n\t\t<g clip-path=\"url(#frame-pict-section-inlinedocumentation_basic-filled-light)\"><circle cx=\"48\" cy=\"48\" r=\"36\" fill=\"none\" stroke=\"#66efae\" stroke-width=\"2\" opacity=\"0.45\"/>\n\t\t\t\t\t<circle cx=\"48\" cy=\"48\" r=\"22\" fill=\"rgba(255,255,255,0.18)\"/>\n\t\t\t\t\t<circle cx=\"13.69\" cy=\"37.09\" r=\"9\" fill=\"#66efae\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"28\" font-weight=\"600\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">PSI</text>\n\t</svg>",
+	"IconType": "svg",
+	"Favicon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-inlinedocumentation_basic-light\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\" fill=\"#e4a926\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-inlinedocumentation_basic-light)\"><circle cx=\"48\" cy=\"48\" r=\"28\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"FaviconDark": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-inlinedocumentation_basic-dark\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tA 46 46 0 1 0 94 48\n\t\t\tA 46 46 0 1 0 2 48 Z\" fill=\"#eac87c\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-inlinedocumentation_basic-dark)\"><circle cx=\"48\" cy=\"48\" r=\"28\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#101418\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"Colors": {
+		"Primary": "#e4a926",
+		"Secondary": "#66efae",
+		"PrimaryLight": "#e4a926",
+		"PrimaryDark": "#eac87c",
+		"SecondaryLight": "#66efae",
+		"SecondaryDark": "#a6f2ce"
+	}
+}

package/example_applications/bookshop/docs/_brand.json

@@ -0,0 +1,18 @@
+{
+	"Hash": "pict-section-inlinedocumentation/bookshop",
+	"Name": "bookshop",
+	"Tagline": "Bookshop example demonstrating inline contextual documentation with pict-section-inlinedocumentation",
+	"Palette": "carnival",
+	"Icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"frame-pict-section-inlinedocumentation_bookshop-filled-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#f3a513\"/>\n\t\t<g clip-path=\"url(#frame-pict-section-inlinedocumentation_bookshop-filled-light)\"><circle cx=\"48\" cy=\"48\" r=\"38\" fill=\"rgba(255,255,255,0.18)\"/>\n\t\t\t\t\t<circle cx=\"48\" cy=\"48\" r=\"21\" fill=\"#38ec8f\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"28\" font-weight=\"700\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">PSI</text>\n\t</svg>",
+	"IconType": "svg",
+	"Favicon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-inlinedocumentation_bookshop-light\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#f3a513\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-inlinedocumentation_bookshop-light)\"><circle cx=\"48\" cy=\"48\" r=\"42\" fill=\"rgba(255,255,255,0.22)\"/>\n\t\t\t\t\t<circle cx=\"48\" cy=\"48\" r=\"21\" fill=\"#38ec8f\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"FaviconDark": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-inlinedocumentation_bookshop-dark\">\n\t\t\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 24 2\n\t\tH 72\n\t\tQ 94 2 94 24\n\t\tV 72\n\t\tQ 94 94 72 94\n\t\tH 24\n\t\tQ 2 94 2 72\n\t\tV 24\n\t\tQ 2 2 24 2 Z\" fill=\"#f3c56f\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-inlinedocumentation_bookshop-dark)\"><circle cx=\"48\" cy=\"48\" r=\"42\" fill=\"rgba(255,255,255,0.22)\"/>\n\t\t\t\t\t<circle cx=\"48\" cy=\"48\" r=\"21\" fill=\"#8ff0be\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#101418\" letter-spacing=\"-1\">P</text>\n\t</svg>",
+	"Colors": {
+		"Primary": "#f3a513",
+		"Secondary": "#38ec8f",
+		"PrimaryLight": "#f3a513",
+		"PrimaryDark": "#f3c56f",
+		"SecondaryLight": "#38ec8f",
+		"SecondaryDark": "#8ff0be"
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pict-section-inlinedocumentation",
-	"version": "0.0.7",
+	"version": "1.0.1",
 	"description": "Pict embeddable inline documentation browser with topic support",
 	"main": "source/Pict-Section-InlineDocumentation.js",
 	"scripts": {

package/source/views/Pict-View-InlineDocumentation-Content.js

@@ -60,9 +60,13 @@ const _ViewConfiguration =
 		.pict-inline-doc-content a:hover {
 			text-decoration: underline;
 		}
+		/* Code blocks: bg + text both flow from background/text tokens
+		   so they re-skin coherently across themes. (Previous version
+		   paired background-tertiary with text-on-brand — both light
+		   in most palettes, producing invisible text.) */
 		.pict-inline-doc-content pre {
-			background: var(--theme-color-text-primary, #3D3229);
-			color: var(--theme-color-text-on-brand, #E8E0D4);
+			background: var(--theme-color-background-tertiary, #F0ECE4);
+			color:      var(--theme-color-text-primary,        #3D3229);
 			padding: 1em;
 			border-radius: 5px;
 			overflow-x: auto;
@@ -84,7 +88,7 @@ const _ViewConfiguration =
 			font-size: inherit;
 		}
 		.pict-inline-doc-content blockquote {
-			border-left: 3px solid #2E7D74;
+			border-left: 3px solid var(--theme-color-brand-primary, #2E7D74);
 			margin: 0.8em 0;
 			padding: 0.4em 0.8em;
 			background: var(--theme-color-background-secondary, #F7F5F0);
@@ -197,13 +201,13 @@ const _ViewConfiguration =
 			stroke-linejoin: round;
 		}
 		.pict-content-code-action-btn:hover {
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #FFFFFF);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #FFFFFF);
 			border-color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-content-code-action-btn.is-copied {
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #FFFFFF);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #FFFFFF);
 			border-color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-edit-toolbar {
@@ -229,7 +233,7 @@ const _ViewConfiguration =
 			align-items: center;
 			justify-content: center;
 			padding: 0.25em 0.6em;
-			border: 1px solid #D4A373;
+			border: 1px solid var(--theme-color-border-default, #D4A373);
 			border-radius: 3px;
 			background: var(--theme-color-background-panel,    #fff);
 			color: var(--theme-color-text-secondary, #5E5549);
@@ -241,12 +245,12 @@ const _ViewConfiguration =
 			background: var(--theme-color-background-tertiary, #F0ECE4);
 		}
 		.pict-inline-doc-edit-btn.primary {
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #fff);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #fff);
 			border-color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-edit-btn.primary:hover {
-			background: #266D65;
+			background: var(--theme-color-brand-primary-hover, #266D65);
 		}
 		.pict-inline-doc-edit-btn .btn-icon {
 			margin-right: 0.3em;
@@ -256,7 +260,7 @@ const _ViewConfiguration =
 		}
 		/* Tooltip placeholder: edit mode indicators */
 		[data-d-tooltip].pict-inline-doc-tooltip-edit-target {
-			outline: 1px dashed #2E7D74;
+			outline: 1px dashed var(--theme-color-brand-primary, #2E7D74);
 			outline-offset: 2px;
 			cursor: pointer;
 			position: relative;
@@ -268,8 +272,8 @@ const _ViewConfiguration =
 			right: -6px;
 			width: 14px;
 			height: 14px;
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #fff);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #fff);
 			border-radius: 50%;
 			font-size: 9px;
 			line-height: 14px;
@@ -292,7 +296,7 @@ const _ViewConfiguration =
 		/* Empty icon tooltip in edit mode */
 		.pict-inline-doc-tooltip-empty .pict-inline-doc-tooltip-icon {
 			opacity: 0.4;
-			outline: 1px dashed #8A7F72;
+			outline: 1px dashed var(--theme-color-text-muted, #8A7F72);
 			outline-offset: 1px;
 			border-radius: 50%;
 		}

package/source/views/Pict-View-InlineDocumentation-Nav.js

@@ -124,7 +124,7 @@ const _ViewConfiguration =
 			background: var(--theme-color-background-tertiary, #EDE8DF);
 		}
 		.pict-inline-doc-nav-item.active {
-			background: #E8E3D8;
+			background: var(--theme-color-background-hover, #E8E3D8);
 			color: var(--theme-color-brand-primary, #2E7D74);
 			border-left-color: var(--theme-color-brand-primary, #2E7D74);
 			font-weight: 500;
@@ -214,8 +214,8 @@ const _ViewConfiguration =
 			display: inline-block;
 			margin: 0.5em 1em;
 			padding: 0.3em 0.7em;
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #fff);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #fff);
 			border-radius: 4px;
 			font-size: 0.8em;
 			font-weight: 500;
@@ -258,15 +258,15 @@ const _ViewConfiguration =
 			color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-nav-toolbar-btn.accent:hover {
-			background: #F0F9F7;
+			background: var(--theme-color-background-hover, #F0F9F7);
 		}
 		.pict-inline-doc-nav-toolbar-btn.active {
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #fff);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #fff);
 			border-color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-nav-toolbar-btn.active:hover {
-			background: #266D65;
+			background: var(--theme-color-brand-primary-hover, #266D65);
 		}
 		.pict-inline-doc-nav-toolbar-spacer {
 			flex: 1;

package/source/views/Pict-View-InlineDocumentation-TopicManager.js

@@ -65,8 +65,8 @@ const _ViewConfiguration =
 		}
 		.pict-inline-doc-tm-action-btn.danger:hover {
 			background: var(--theme-color-background-tertiary, #FDE8E8);
-			border-color: #E57373;
-			color: #C62828;
+			border-color: var(--theme-color-status-error, #E57373);
+			color: var(--theme-color-status-error, #C62828);
 		}
 		.pict-inline-doc-tm-new-topic {
 			display: flex;
@@ -74,7 +74,7 @@ const _ViewConfiguration =
 			justify-content: center;
 			padding: 0.7em;
 			margin-top: 0.5em;
-			border: 1px dashed #DDD6CA;
+			border: 1px dashed var(--theme-color-border-default, #DDD6CA);
 			border-radius: 4px;
 			color: var(--theme-color-brand-primary, #2E7D74);
 			font-size: 0.9em;
@@ -83,7 +83,7 @@ const _ViewConfiguration =
 			transition: background 0.1s, border-color 0.1s;
 		}
 		.pict-inline-doc-tm-new-topic:hover {
-			background: #F0F9F7;
+			background: var(--theme-color-background-hover, #F0F9F7);
 			border-color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-tm-empty {
@@ -141,7 +141,7 @@ const _ViewConfiguration =
 			display: inline-flex;
 			align-items: center;
 			padding: 0.2em 0.5em;
-			background: #E8E3D8;
+			background: var(--theme-color-background-hover, #E8E3D8);
 			border-radius: 12px;
 			font-size: 0.82em;
 			color: var(--theme-color-text-primary, #3D3229);
@@ -155,7 +155,7 @@ const _ViewConfiguration =
 			line-height: 1;
 		}
 		.pict-inline-doc-tm-route-chip-remove:hover {
-			color: #C62828;
+			color: var(--theme-color-status-error, #C62828);
 		}
 		.pict-inline-doc-tm-route-actions {
 			display: flex;
@@ -182,7 +182,7 @@ const _ViewConfiguration =
 			color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-tm-route-action-btn.accent:hover {
-			background: #F0F9F7;
+			background: var(--theme-color-background-hover, #F0F9F7);
 		}
 		.pict-inline-doc-tm-route-input-row {
 			display: none;
@@ -244,11 +244,11 @@ const _ViewConfiguration =
 		}
 		.pict-inline-doc-tm-wc-segment:hover {
 			border-color: var(--theme-color-brand-primary, #2E7D74);
-			background: #F0F9F7;
+			background: var(--theme-color-background-hover, #F0F9F7);
 		}
 		.pict-inline-doc-tm-wc-segment.selected {
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #fff);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #fff);
 			border-color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-tm-wc-segment.after-wildcard {
@@ -257,7 +257,7 @@ const _ViewConfiguration =
 			cursor: default;
 		}
 		.pict-inline-doc-tm-wc-segment.after-wildcard:hover {
-			border-color: #DDD6CA;
+			border-color: var(--theme-color-border-default, #DDD6CA);
 			background: var(--theme-color-background-panel,    #fff);
 		}
 		.pict-inline-doc-tm-wc-wildcard-star {
@@ -312,12 +312,12 @@ const _ViewConfiguration =
 			background: var(--theme-color-background-secondary, #F5F0E8);
 		}
 		.pict-inline-doc-tm-bind-topic-option.selected {
-			background: #F0F9F7;
+			background: var(--theme-color-background-hover, #F0F9F7);
 		}
 		.pict-inline-doc-tm-bind-radio {
 			width: 16px;
 			height: 16px;
-			border: 2px solid #DDD6CA;
+			border: 2px solid var(--theme-color-border-default, #DDD6CA);
 			border-radius: 50%;
 			margin-right: 0.6em;
 			flex-shrink: 0;
@@ -333,7 +333,7 @@ const _ViewConfiguration =
 			left: 3px;
 			width: 6px;
 			height: 6px;
-			background: #2E7D74;
+			background: var(--theme-color-brand-primary, #2E7D74);
 			border-radius: 50%;
 		}
 		.pict-inline-doc-tm-bind-route-type {
@@ -357,8 +357,8 @@ const _ViewConfiguration =
 			background: var(--theme-color-background-tertiary, #F0ECE4);
 		}
 		.pict-inline-doc-tm-bind-route-type-btn.selected {
-			background: #2E7D74;
-			color: var(--theme-color-background-panel, #fff);
+			background: var(--theme-color-brand-primary, #2E7D74);
+			color: var(--theme-color-text-on-brand, #fff);
 			border-color: var(--theme-color-brand-primary, #2E7D74);
 		}
 		.pict-inline-doc-tm-sidebar-list {
@@ -383,7 +383,7 @@ const _ViewConfiguration =
 			margin-left: 0.5em;
 		}
 		.pict-inline-doc-tm-validation-error {
-			color: #C62828;
+			color: var(--theme-color-status-error, #C62828);
 			font-size: 0.8em;
 			margin-top: 0.3em;
 		}
@@ -1440,7 +1440,7 @@ class InlineDocumentationTopicManagerView extends libPictView
 		tmpHTML += '<div class="pict-inline-doc-tm-bind-topic-option" data-topic-code="__NEW__">';
 		tmpHTML += '<div class="pict-inline-doc-tm-bind-radio"></div>';
 		tmpHTML += '<div class="pict-inline-doc-tm-topic-info">';
-		tmpHTML += '<div class="pict-inline-doc-tm-topic-title" style="color:#2E7D74;">+ Create New Topic</div>';
+		tmpHTML += '<div class="pict-inline-doc-tm-topic-title" style="color:var(--theme-color-brand-primary, #2E7D74);">+ Create New Topic</div>';
 		tmpHTML += '</div>';
 		tmpHTML += '</div>';
 

package/docs/css/docuserve.css

@@ -1,327 +0,0 @@
-/* ============================================================================
-   Pict Docuserve - Base Styles & Theme Variables
-   ============================================================================ */
-
-/* ----------------------------------------------------------------------------
-   Theme variables — light defaults on :root.
-   Dark mode applies when either:
-     (a) the user explicitly selected dark via <html data-theme="dark">
-     (b) the user hasn't chosen anything AND the system prefers dark
-   An explicit <html data-theme="light"> pins the light palette regardless.
-   ---------------------------------------------------------------------------- */
-
-:root
-{
-	/* Surfaces */
-	--docuserve-bg: #FDFBF7;
-	--docuserve-bg-elevated: #FFFFFF;
-	--docuserve-border: #DDD6CA;
-	--docuserve-border-soft: #EAE3D8;
-
-	/* Text */
-	--docuserve-text: #2A241E;
-	--docuserve-text-strong: #3D3229;
-	--docuserve-text-muted: #5E5549;
-	--docuserve-text-dim: #8A7F72;
-
-	/* Accent / links */
-	--docuserve-accent: #2E7D74;
-	--docuserve-accent-hover: #236660;
-
-	/* Top bar */
-	--docuserve-topbar-bg: #3D3229;
-	--docuserve-topbar-text: #E8E0D4;
-	--docuserve-topbar-text-muted: #B5AA9A;
-	--docuserve-topbar-text-dim: #8A7F72;
-	--docuserve-topbar-hover-bg: #524438;
-	--docuserve-topbar-version-bg: rgba(255, 255, 255, 0.06);
-	--docuserve-topbar-version-border: rgba(255, 255, 255, 0.08);
-	--docuserve-topbar-version-text: #B5AA9A;
-
-	/* Sidebar */
-	--docuserve-sidebar-bg: #FAF7F1;
-	--docuserve-sidebar-border: #DDD6CA;
-	--docuserve-sidebar-border-soft: #E5DED1;
-	--docuserve-sidebar-text: #423D37;
-	--docuserve-sidebar-group-title: #3D3229;
-	--docuserve-sidebar-module-text: #5E5549;
-	--docuserve-sidebar-hover-bg: #EAE3D8;
-	--docuserve-sidebar-hover-text: #2E7D74;
-	--docuserve-sidebar-active-bg: #E5DED1;
-	--docuserve-sidebar-active-text: #2E7D74;
-	--docuserve-sidebar-search-bg: #FFFFFF;
-	--docuserve-sidebar-search-border: #DDD6CA;
-
-	/* Inline code */
-	--docuserve-inline-code-bg: #F0ECE4;
-	--docuserve-inline-code-text: #9E3A50;
-
-	/* Code block panel */
-	--docuserve-code-bg: #F6F3EE;
-	--docuserve-code-border: #E5DED1;
-	--docuserve-code-gutter-bg: #EFEAE0;
-	--docuserve-code-gutter-border: #DDD6CA;
-	--docuserve-code-gutter-text: #A59986;
-	--docuserve-code-text: #2A241E;
-
-	/* Syntax tokens — low-chroma dark-on-light palette */
-	--docuserve-tok-keyword: #A03472;
-	--docuserve-tok-string: #1A6640;
-	--docuserve-tok-number: #B25A00;
-	--docuserve-tok-comment: #8A7F72;
-	--docuserve-tok-operator: #2E7D74;
-	--docuserve-tok-punctuation: #2A241E;
-	--docuserve-tok-function: #2A5DB0;
-	--docuserve-tok-property: #9E3A50;
-	--docuserve-tok-tag: #9E3A50;
-	--docuserve-tok-attr-name: #B25A00;
-	--docuserve-tok-attr-value: #1A6640;
-
-	/* Tables, blockquotes, mermaid */
-	--docuserve-table-header-bg: #F5F0E8;
-	--docuserve-table-row-alt-bg: #F9F6F0;
-	--docuserve-blockquote-bg: #F7F5F0;
-	--docuserve-blockquote-border: #2E7D74;
-	--docuserve-blockquote-text: #5E5549;
-	--docuserve-mermaid-bg: #FFFFFF;
-
-	/* Scrollbars */
-	--docuserve-scrollbar-track: #F5F0E8;
-	--docuserve-scrollbar-thumb: #D4CCBE;
-	--docuserve-scrollbar-thumb-hover: #B5AA9A;
-}
-
-@media (prefers-color-scheme: dark)
-{
-	:root:not([data-theme="light"])
-	{
-		--docuserve-bg: #15120F;
-		--docuserve-bg-elevated: #1B1814;
-		--docuserve-border: #2F2823;
-		--docuserve-border-soft: #26211C;
-
-		--docuserve-text: #E8E0D4;
-		--docuserve-text-strong: #F2ECE0;
-		--docuserve-text-muted: #B5AA9A;
-		--docuserve-text-dim: #7A6F62;
-
-		--docuserve-accent: #5DB8A8;
-		--docuserve-accent-hover: #7FCCB8;
-
-		--docuserve-topbar-bg: #1A1612;
-		--docuserve-topbar-text: #E8E0D4;
-		--docuserve-topbar-text-muted: #B5AA9A;
-		--docuserve-topbar-text-dim: #7A6F62;
-		--docuserve-topbar-hover-bg: #2A241E;
-		--docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
-		--docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
-		--docuserve-topbar-version-text: #B5AA9A;
-
-		--docuserve-sidebar-bg: #1B1814;
-		--docuserve-sidebar-border: #2F2823;
-		--docuserve-sidebar-border-soft: #26211C;
-		--docuserve-sidebar-text: #C9C0B3;
-		--docuserve-sidebar-group-title: #F2ECE0;
-		--docuserve-sidebar-module-text: #B5AA9A;
-		--docuserve-sidebar-hover-bg: #2A241E;
-		--docuserve-sidebar-hover-text: #7FCCB8;
-		--docuserve-sidebar-active-bg: #2F2823;
-		--docuserve-sidebar-active-text: #7FCCB8;
-		--docuserve-sidebar-search-bg: #26211C;
-		--docuserve-sidebar-search-border: #2F2823;
-
-		--docuserve-inline-code-bg: #2A241E;
-		--docuserve-inline-code-text: #E8B07A;
-
-		--docuserve-code-bg: #1E1A17;
-		--docuserve-code-border: #2F2823;
-		--docuserve-code-gutter-bg: #17130F;
-		--docuserve-code-gutter-border: #2F2823;
-		--docuserve-code-gutter-text: #6A6052;
-		--docuserve-code-text: #E8E0D4;
-
-		--docuserve-tok-keyword: #C678DD;
-		--docuserve-tok-string: #98C379;
-		--docuserve-tok-number: #D19A66;
-		--docuserve-tok-comment: #7F848E;
-		--docuserve-tok-operator: #56B6C2;
-		--docuserve-tok-punctuation: #E8E0D4;
-		--docuserve-tok-function: #61AFEF;
-		--docuserve-tok-property: #E06C75;
-		--docuserve-tok-tag: #E06C75;
-		--docuserve-tok-attr-name: #D19A66;
-		--docuserve-tok-attr-value: #98C379;
-
-		--docuserve-table-header-bg: #26211C;
-		--docuserve-table-row-alt-bg: #1F1B17;
-		--docuserve-blockquote-bg: #1F1B17;
-		--docuserve-blockquote-border: #5DB8A8;
-		--docuserve-blockquote-text: #C9C0B3;
-		--docuserve-mermaid-bg: #E8E0D4;
-
-		--docuserve-scrollbar-track: #1B1814;
-		--docuserve-scrollbar-thumb: #3A322B;
-		--docuserve-scrollbar-thumb-hover: #524438;
-	}
-}
-
-:root[data-theme="dark"]
-{
-	--docuserve-bg: #15120F;
-	--docuserve-bg-elevated: #1B1814;
-	--docuserve-border: #2F2823;
-	--docuserve-border-soft: #26211C;
-
-	--docuserve-text: #E8E0D4;
-	--docuserve-text-strong: #F2ECE0;
-	--docuserve-text-muted: #B5AA9A;
-	--docuserve-text-dim: #7A6F62;
-
-	--docuserve-accent: #5DB8A8;
-	--docuserve-accent-hover: #7FCCB8;
-
-	--docuserve-topbar-bg: #1A1612;
-	--docuserve-topbar-text: #E8E0D4;
-	--docuserve-topbar-text-muted: #B5AA9A;
-	--docuserve-topbar-text-dim: #7A6F62;
-	--docuserve-topbar-hover-bg: #2A241E;
-	--docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
-	--docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
-	--docuserve-topbar-version-text: #B5AA9A;
-
-	--docuserve-sidebar-bg: #1B1814;
-	--docuserve-sidebar-border: #2F2823;
-	--docuserve-sidebar-border-soft: #26211C;
-	--docuserve-sidebar-text: #C9C0B3;
-	--docuserve-sidebar-group-title: #F2ECE0;
-	--docuserve-sidebar-module-text: #B5AA9A;
-	--docuserve-sidebar-hover-bg: #2A241E;
-	--docuserve-sidebar-hover-text: #7FCCB8;
-	--docuserve-sidebar-active-bg: #2F2823;
-	--docuserve-sidebar-active-text: #7FCCB8;
-	--docuserve-sidebar-search-bg: #26211C;
-	--docuserve-sidebar-search-border: #2F2823;
-
-	--docuserve-inline-code-bg: #2A241E;
-	--docuserve-inline-code-text: #E8B07A;
-
-	--docuserve-code-bg: #1E1A17;
-	--docuserve-code-border: #2F2823;
-	--docuserve-code-gutter-bg: #17130F;
-	--docuserve-code-gutter-border: #2F2823;
-	--docuserve-code-gutter-text: #6A6052;
-	--docuserve-code-text: #E8E0D4;
-
-	--docuserve-tok-keyword: #C678DD;
-	--docuserve-tok-string: #98C379;
-	--docuserve-tok-number: #D19A66;
-	--docuserve-tok-comment: #7F848E;
-	--docuserve-tok-operator: #56B6C2;
-	--docuserve-tok-punctuation: #E8E0D4;
-	--docuserve-tok-function: #61AFEF;
-	--docuserve-tok-property: #E06C75;
-	--docuserve-tok-tag: #E06C75;
-	--docuserve-tok-attr-name: #D19A66;
-	--docuserve-tok-attr-value: #98C379;
-
-	--docuserve-table-header-bg: #26211C;
-	--docuserve-table-row-alt-bg: #1F1B17;
-	--docuserve-blockquote-bg: #1F1B17;
-	--docuserve-blockquote-border: #5DB8A8;
-	--docuserve-blockquote-text: #C9C0B3;
-	--docuserve-mermaid-bg: #E8E0D4;
-
-	--docuserve-scrollbar-track: #1B1814;
-	--docuserve-scrollbar-thumb: #3A322B;
-	--docuserve-scrollbar-thumb-hover: #524438;
-}
-
-/* ----------------------------------------------------------------------------
-   Reset and base
-   ---------------------------------------------------------------------------- */
-
-*, *::before, *::after
-{
-	box-sizing: border-box;
-}
-
-html, body
-{
-	margin: 0;
-	padding: 0;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-	font-size: 16px;
-	line-height: 1.5;
-	color: var(--docuserve-text);
-	background-color: var(--docuserve-bg);
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-/* Typography */
-h1, h2, h3, h4, h5, h6
-{
-	margin-top: 0;
-	line-height: 1.3;
-	color: var(--docuserve-text-strong);
-}
-
-a
-{
-	color: var(--docuserve-accent);
-	text-decoration: none;
-}
-
-a:hover
-{
-	color: var(--docuserve-accent-hover);
-}
-
-/* Application container */
-#Docuserve-Application-Container
-{
-	min-height: 100vh;
-}
-
-/* Utility: scrollbar styling */
-::-webkit-scrollbar
-{
-	width: 8px;
-	height: 8px;
-}
-
-::-webkit-scrollbar-track
-{
-	background: var(--docuserve-scrollbar-track);
-}
-
-::-webkit-scrollbar-thumb
-{
-	background: var(--docuserve-scrollbar-thumb);
-	border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover
-{
-	background: var(--docuserve-scrollbar-thumb-hover);
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px)
-{
-	html
-	{
-		font-size: 14px;
-	}
-
-	#Docuserve-Sidebar-Container
-	{
-		display: none;
-	}
-
-	.docuserve-body
-	{
-		flex-direction: column;
-	}
-}