x4js 2.3.21 → 2.3.23

package/src/components/messages/messages.module.scss

@@ -20,12 +20,16 @@
 	--msgbox-caption-color: var( --alert-color );
 
 	--msgbox-icon-color:  var( --alert-background );
+	--msgbox-question-icon-color: var( --accent-background );		// a question, an InputBox, a PromptBox
+
+	--msgbox-log-background: var( --background-ternary );		// the lines of a ProgressionBox
 }
 
 .x4messagebox {
 	max-width: 60vw;
 
-	& > .caption {
+	// an error has its own title bar; a question has the one of a Dialog
+	&.error > .caption {
 		background-color: var( --msgbox-caption-background );
 
 		& > #title {
@@ -45,24 +49,20 @@
 			line-height: 1.8em;
 		}
 	}
+
+	&.question .x4form .x4icon {
+		color: var( --msgbox-question-icon-color );
+	}
 }
 
 .x4inputbox,
 .x4promptbox {
 	max-width: 60vw;
 
-	& > .caption {
-		background-color: var( --msgbox-caption-background );
-
-		& > #title {
-			color: var( --msgbox-caption-color );
-		}
-	}
-
 	& .x4form {
 		min-width: 400px;
 		.x4icon {
-			color: var( --msgbox-icon-color );
+			color: var( --msgbox-question-icon-color );
 			height: 64px;
 		}
 
@@ -134,7 +134,7 @@
 			flex-grow: 1;
 			max-height: 400px;
 			overflow: auto;
-			background-color: #f5f5f5;
+			background-color: var( --msgbox-log-background );
 			padding: 4px 8px;
 			margin: 0 16px;
 

package/src/components/messages/messages.ts

@@ -34,7 +34,11 @@ export interface MessageBoxProps extends DialogProps {
  * --msgbox-caption-background
  * --msgbox-caption-color
  * --msgbox-icon-color
+ * --msgbox-question-icon-color
+ * --msgbox-log-background
  * ```
+ * --msgbox-caption-* and --msgbox-icon-color are the ones of an error; a question, an InputBox
+ * and a PromptBox have the title bar of a Dialog and their icon in --msgbox-question-icon-color
  */
 
 @class_ns( "x4" )
@@ -58,7 +62,9 @@ export class MessageBox extends Dialog<DialogProps>
 			}
 		}
 
-		const box = new MessageBox({ 
+		// the kind as a class: an error has its own title bar
+		const box = new MessageBox({
+			cls: icon_type ?? "error",
 			modal: true,
 			title: title ?? _tr.global.error,
 			movable: true,

package/src/components/messages/pen-field.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M0 128l32 0 224 0 32 0 0 64-32 0L64 192l0 256 448 0 0-128 0-32 64 0 0 32 0 160 0 32-32 0L32 512 0 512l0-32L0 160l0-32z"/><path class="fa-primary" d="M288 352l16-112L468.7 75.3l96 96L400 336 288 352zM587.3 148.7l-96-96L544 0l96 96-52.7 52.7zM96 288l64 0 0 64-64 0 0-64zm160 0l0 64-64 0 0-64 64 0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M0 128l32 0 224 0 32 0 0 64-32 0L64 192l0 256 448 0 0-128 0-32 64 0 0 32 0 160 0 32-32 0L32 512 0 512l0-32L0 160l0-32z"/><path class="fa-primary" d="M288 352l16-112L468.7 75.3l96 96L400 336 288 352zM587.3 148.7l-96-96L544 0l96 96-52.7 52.7zM96 288l64 0 0 64-64 0 0-64zm160 0l0 64-64 0 0-64 64 0z"/></svg>

package/src/components/panel/panel.module.scss

@@ -18,7 +18,8 @@
 
 :root {
 	--panel-border: var( --border );
-	--panel-title-color: var( --border );
+	--panel-title-color: var( --text-primary );
+	--panel-title-background: var( --background-primary );
 }
 
 
@@ -34,9 +35,9 @@
 		position: absolute;
 		left: 4px;
 		top: -0.7em;
-		background-color: white;
+		background-color: var( --panel-title-background );
 		font-weight: bold;
-		color: var(--color-gray-9);
+		color: var( --panel-title-color );
 	}
 
 	& > .body {

package/src/components/panel/panel.ts

@@ -33,6 +33,7 @@ interface PanelProps extends ComponentProps {
  * ```
  * --panel-border
  * --panel-title-color
+ * --panel-title-background
  * ```
  */
 

package/src/components/popup/popup.module.scss

@@ -16,15 +16,14 @@
 
 :root {
 	--modal-mask-background: rgb(0 0 0 / 60% );
+	--popup-background: transparent;
 }
 
 .x4popup {
 	position: absolute !important;
-	background-color: var(--fill-color);
-	border: 1px solid var(--border-color);
+	background-color: var( --popup-background );
 	overflow: hidden;
 	z-index: 1000;
-	border-radius: var(--bradius);
 
 	&.popup-caption,
 	.popup-caption {

package/src/components/popup/popup.ts

@@ -66,6 +66,7 @@ function dismissLast( e: UIEvent ) {
  * @cssvar
  * ```
  * --modal-mask-background
+ * --popup-background
  * ```
  */
 

package/src/components/propgrid/progrid.module.scss

@@ -5,16 +5,16 @@
  **/
 
 :root {
-	--propertygrid-background: white;
-    --propertygrid-gadget-background: white;
-    --propertygrid-gadget-color: black;
+	--propertygrid-background: var( --background-primary );
+    --propertygrid-gadget-background: var( --background-primary );
+    --propertygrid-gadget-color: var( --text-primary );
 
 	--propertygrid-odd-background: var(--color-primary-a5);
 	--propertygrid-even-background: transparent;
 	--propertygrid-disabled-background: rgb(170 170 170 / 14%);
 	--propertygrid-hover-background: var(--color-primary-a10);
 	--propertygrid-focus-background: var(--color-primary-a20);
-	--propertygrid-input-background: rgba(255,255,255,0.6);
+	--propertygrid-input-background: var( --background-input );
 
     --propertygrid-group-background: var( --color-primary-a5 );
     --propertygrid-group-color: var( --color-primary-a50 );

package/src/components/radio/radio.module.scss

@@ -14,6 +14,12 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
+:root {
+	--radio-background: var( --background-primary );
+	--radio-check-color: var( --accent-color );
+	--radio-square-border-checked: var( --accent-color );
+}
+
 .x4radio {
 	display: flex;
 	flex-direction: row;
@@ -36,7 +42,7 @@
 		input {
 			appearance: none;
 			border-radius: 50%;
-			background-color: white;
+			background-color: var( --radio-background );
 			cursor: pointer;
 			display: block;
 			
@@ -67,7 +73,7 @@
 			}
 
 			.fa-secondary {
-				fill: white;
+				fill: var( --radio-check-color );
 			}
 		}
 
@@ -157,7 +163,7 @@
 
 	&:has(input:checked) {
 		background-color: var( --accent-background-active );
-		border-color: white;
+		border-color: var( --radio-square-border-checked );
 		font-weight: 700;
 	}
 }

package/src/components/radio/radio.ts

@@ -48,7 +48,13 @@ interface RadioProps extends ComponentProps {
 }
 
 /**
- * 
+ *
+ * @cssvar
+ * ```
+ * --radio-background
+ * --radio-check-color
+ * --radio-square-border-checked
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/select/select.module.scss

@@ -1,10 +1,11 @@
 
-/**
- * @cssvar
- * --select-border
- * --select-border-focus
- * --select-background
- */
+:root {
+	--select-border: var( --border );
+	--select-border-focus: var( --accent-background );
+	--select-background: var( --background-primary );
+	--select-color: var( --text-primary );
+	--select-arrow-color: var( --text-ternary );
+}
 
 .x4select,
 ::picker(select) {
@@ -14,22 +15,26 @@
 	outline: none;
 
 	border-radius: 0;
-	border: 1px solid var( --select-border, var( --border ) );
-	background-color: var( --select-background, white );
+	border: 1px solid var( --select-border );
+	background-color: var( --select-background );
+	color: var( --select-color );
 }
 
 .x4select {
 	appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
+	// the arrow: two halves of a square side by side, in the colour of the variable
+    background-image:
+		linear-gradient( 45deg, transparent 50%, var( --select-arrow-color ) 50% ),
+		linear-gradient( 135deg, var( --select-arrow-color ) 50%, transparent 50% );
     background-repeat: no-repeat;
-    background-position: right 6px center;
-    background-size: 12px 8px;
+    background-position: right 13px center, right 8px center;
+    background-size: 5px 5px, 5px 5px;
     padding-right: 23px;
 
 	&:focus-visible {
-		border-color: var( --select-border-focus, var( --accent-background ) );
+		border-color: var( --select-border-focus );
 	}
 
 	.select-option {

package/src/components/select/select.ts

@@ -46,6 +46,15 @@ interface SelectEvents extends ComponentEvents {
 /**
  * simple select
  * cf. Combobox
+ *
+ * @cssvar
+ * ```
+ * --select-border
+ * --select-border-focus
+ * --select-background
+ * --select-color
+ * --select-arrow-color
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/settingsview/settingsview.module.scss

@@ -0,0 +1,178 @@
+/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file settingsview.module.scss
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2026 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+:root {
+	--settingsview-toc-width: 210px;
+	--settingsview-section-background: var( --color-primary-a10 );
+	--settingsview-section-title-background: var( --color-primary-a20 );
+	--settingsview-hover-background: var( --color-primary-a20 );
+	--settingsview-marker: var( --accent-background );
+}
+
+.x4settingsview {
+	min-height: 0;
+
+	> .search {
+		flex-shrink: 0;
+		padding: 12px 32px 12px calc( var( --settingsview-toc-width ) + 32px );
+		border-bottom: 1px solid var( --border );
+
+		> .x4input {
+			flex: 1;
+			max-width: 900px;
+			margin: 0;
+			padding: 6px 10px;
+			border: 1px solid var( --border );
+			border-radius: 4px;
+
+			&:focus {
+				border-color: var( --settingsview-marker );
+			}
+		}
+	}
+
+	> .body {
+		min-height: 0;
+		align-items: stretch;
+	}
+
+	// the summary: the section at the top in the color of the text, marked on its left
+	.toc {
+		flex-shrink: 0;
+		width: var( --settingsview-toc-width );
+		margin: 0;
+		padding: 12px 0;
+		border: none;
+		border-right: 1px solid var( --border );
+		border-radius: 0;
+		background: transparent;
+
+		.x4item {
+			padding: 4px 4px 4px 16px;
+			border-left: 2px solid transparent;
+			border-radius: 0;
+			--label-color: var( --text-secondary );
+
+			&:hover {
+				background: transparent;
+				--label-color: var( --text-primary );
+			}
+
+			&.selected {
+				background: transparent;
+				border-left-color: var( --settingsview-marker );
+				--label-color: var( --text-primary );
+				font-weight: 600;
+			}
+		}
+	}
+
+	.sections {
+		align-items: flex-start;
+		gap: 24px;
+		min-height: 0;
+		overflow-y: auto;
+		padding: 20px 32px 32px;
+
+		> .nomatch {
+			padding: 8px;
+			--label-color: var( --text-secondary );
+		}
+	}
+
+	// a section: a panel, its title on a band
+	.section {
+		flex-shrink: 0;
+		width: 100%;
+		max-width: 900px;
+		padding: 0 8px 10px;
+		border: 1px solid var( --border );
+		border-radius: 8px;
+		background: var( --settingsview-section-background );
+		overflow: hidden;
+		scroll-margin-top: 20px;	// brought to the top: below the padding of the view
+
+		// the last one shown: as high as the view, a click in the summary brings it to the top too
+		&.last {
+			min-height: 100%;
+		}
+
+		> .title {
+			margin: 0 -8px 6px;
+			padding: 12px 16px;
+			border-bottom: 1px solid var( --border );
+			background: var( --settingsview-section-title-background );
+			font-size: 1.1rem;
+			font-weight: 600;
+			--label-color: var( --text-primary );
+		}
+
+		> .description {
+			padding: 10px 8px 4px;
+			white-space: normal;
+			--label-color: var( --text-secondary );
+		}
+
+		// a section is as high as its content: what it holds takes its own height,
+		// a flex child (a Form) would get none
+		> * {
+			flex: none;
+		}
+
+		// a form of settings: the settings set the spaces
+		> .x4form {
+			padding: 0;
+		}
+	}
+
+	// a setting: its name, what it does, its controls; marked on its left while one has the focus
+	.x4settingitem {
+		flex-shrink: 0;
+		gap: 4px;
+		padding: 10px 8px 12px;
+		border-left: 2px solid transparent;
+		border-radius: 4px;
+
+		&:hover {
+			background: var( --settingsview-hover-background );
+		}
+
+		&:focus-within {
+			border-left-color: var( --settingsview-marker );
+		}
+
+		> .name {
+			font-weight: 600;
+			--label-color: var( --text-primary );
+		}
+
+		> .description {
+			white-space: normal;
+			--label-color: var( --text-secondary );
+		}
+
+		> .controls {
+			align-items: center;
+			gap: 10px;
+			padding-top: 4px;
+			flex-wrap: wrap;
+
+			> * {
+				margin: 0;
+			}
+		}
+	}
+}