pict-section-inlinedocumentation 1.0.0 → 1.0.2

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;
-	}
-}