x4js 2.3.22 → 2.3.24

package/src/components/messages/messages.ts

@@ -11,6 +11,8 @@ import { Dialog, DialogProps } from "../dialog/dialog"
 import { Form } from '../form/form';
 import { BtnGroupItem } from '../btngroup/btngroup';
 import { Input } from '../input/input';
+import { SimpleTextArea } from '../textarea/textarea';
+import { Button } from '../button/button';
 import { Component } from '../../core/component';
 import { Progress } from '../components.js';
 
@@ -34,7 +36,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 +64,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,
@@ -269,6 +277,13 @@ export class PromptBox extends Dialog<DialogProps>
 
 // :: PROGRESS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
+/**
+ * a modal box that follows a long task: a title, a bar, and the lines of what is done
+ * in a textarea read only (they are text: a markup is shown as it is written).
+ * done( ) shows its button OK: after an error it waits for it, else it closes the box
+ * after 5s, the seconds left in the button.
+ */
+
 @class_ns( "x4" )
 export class ProgressionBox  extends Dialog {
 
@@ -288,7 +303,7 @@ export class ProgressionBox  extends Dialog {
 							new VBox( { flex: 1, cls: "right", content: [
 								new SimpleText( { id: "title", text: title } ),
 								new Progress( { id:"prog", min: 0, max: 100, value: 0 } ),
-								new VBox( { id: "sub-text" } ),
+								new SimpleTextArea( { id: "sub-text", readonly: true, trim: false } ),
 							]})
 						]
 					}),
@@ -299,37 +314,80 @@ export class ProgressionBox  extends Dialog {
 
 		this.query("#btnbar").show( false );
 
-		this.on("btnclick", ( ) => this.show( false ) );
+		// OK: closed at once, the countdown stopped
+		this.on("btnclick", ( ) => {
+			this.clearInterval( "close" );
+			this.show( false );
+		} );
 	}
 
+	/** a line at the end */
+
 	addText( text: string | UnsafeHtml, perc: number ) {
-		this.query<Label>( "#sub-text").appendContent( new SimpleText( { text } ) );
+		this._addLine( text );
 		this.query<Progress>( "#prog").setValue( perc );
 	}
 
+	/** a line at the end: done( ) then waits for the button OK */
+
 	addError( text: string | UnsafeHtml, perc: number ) {
-		this.query<Label>( "#sub-text").appendContent( new SimpleText( { cls:"error", text } ) );
+		this._addLine( text );
 		this.query<Progress>( "#prog").setValue( perc );
 
 		this.#has_errors = true;
 	}
 
+	/** the text in place of all the lines */
+
 	setText( text: string | UnsafeHtml, perc: number ) {
-		this.query<Label>( "#sub-text").setContent( new SimpleText( { text } ) );
+		this.query<SimpleTextArea>( "#sub-text" ).setText( text.toString( ) );
 		this.query<Progress>( "#prog").setValue( perc );
 	}
 
+	/** as at the start: no line, no error, no button OK */
+
 	clear( ) {
-		this.#has_errors = true;
-		this.query<Label>( "#sub-text").clearContent( );
+		this.#has_errors = false;
+		this.clearInterval( "close" );
+		this.query( "#btnbar" ).show( false );
+		this.query<SimpleTextArea>( "#sub-text" ).setText( "" );
+	}
+
+	// the line after the others, the last one shown
+	private _addLine( text: string | UnsafeHtml ) {
+		const log = this.query<SimpleTextArea>( "#sub-text" );
+		const lines = log.getText( );
+
+		log.setText( lines ? lines + "\n" + text : text.toString( ) );
+		log.scrollToBottom( );
 	}
 
+	/**
+	 * the task is over: the button OK is shown. After an error it waits for a click;
+	 * without one it counts the seconds left, "OK (5s)", and closes the box at 0
+	 */
+
 	done( ) {
+		const ok = this.query<Button>( "#ok" );
+		this.query( "#btnbar" ).show( true );
+
 		if( this.#has_errors ) {
-			this.query("#btnbar").show( true );
-		}
-		else {
-			this.setTimeout( "close", 5000, ( ) => { this.show(false);} );
+			ok.setText( _tr.global.ok );
+			return;
 		}
+
+		let left = 5;
+		ok.setText( `${_tr.global.ok} (${left}s)` );
+
+		this.setInterval( "close", 1000, ( ) => {
+			left--;
+			if( left>0 ) {
+				ok.setText( `${_tr.global.ok} (${left}s)` );
+			}
+			else {
+				this.clearInterval( "close" );
+				this.show( false );
+			}
+		} );
 	}
 }

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

@@ -18,7 +18,7 @@
 	--settingsview-toc-width: 210px;
 	--settingsview-section-background: var( --color-primary-a10 );
 	--settingsview-section-title-background: var( --color-primary-a20 );
-	--settingsview-hover-background: color-mix( in srgb, var( --color-primary-a20 ) 60%, transparent );
+	--settingsview-hover-background: var( --color-primary-a20 );
 	--settingsview-marker: var( --accent-background );
 }
 
@@ -36,7 +36,6 @@
 			margin: 0;
 			padding: 6px 10px;
 			border: 1px solid var( --border );
-			border-radius: 4px;
 
 			&:focus {
 				border-color: var( --settingsview-marker );
@@ -100,7 +99,6 @@
 		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
@@ -144,7 +142,6 @@
 		gap: 4px;
 		padding: 10px 8px 12px;
 		border-left: 2px solid transparent;
-		border-radius: 4px;
 
 		&:hover {
 			background: var( --settingsview-hover-background );

package/src/components/spreadsheet/spreadsheet.module.scss

@@ -333,7 +333,6 @@
 
 		.cell-out {
 			position: absolute;
-			background-color: var( --color-gray-0 );
 			width: 100%;
 			height: var( --row-height );
 		}

package/src/components/switch/switch.module.scss

@@ -18,9 +18,10 @@
 
 :root {
 	--switch-border: var( --border );
-	--switch-background: #eee;
+	--switch-background: var( --background-hover );
 	--switch-background-disabled: var( --disabled-background );
 	--switch-checked: var( --accent-background );
+	--switch-thumb: var( --background-primary );
 }
 
 .x4switch {
@@ -88,7 +89,7 @@
 			height: 1rem;
 
 			border-radius: 8px;
-			background-color: white;
+			background-color: var( --switch-thumb );
 			box-shadow: 0 0 2px rgba(0,0,0,0.5);
 
 			transition: left ease 0.2s;

package/src/components/switch/switch.ts

@@ -39,6 +39,7 @@ interface SwitchProps extends ComponentProps {
  * --switch-background
  * --switch-background-disabled
  * --switch-checked
+ * --switch-thumb
  * ```
  */
 

package/src/components/tabs/tabs.module.scss

@@ -3,6 +3,9 @@
 :root {
 	--tab-border-selected: var( --accent-background );
 	--tab-border-hover: var( --accent-background-hover );
+	--tab-color-hover: var( --text-primary );
+	--tab-color: var( --text-primary );
+	--tab-color-selected: var( --text-primary );
 }
 
 .x4tabs {
@@ -20,7 +23,7 @@
 		.x4button {
 			border: none;
 			border-bottom: 2px solid transparent;
-			color: var( --color-gray-7 );
+			color: var( --tab-color );
 			margin: 0;
 			outline: none;
 			transition: border-color 0.2s ease;
@@ -28,12 +31,12 @@
 			&.selected {
 				border-bottom-color: var( --tab-border-selected );
 				font-weight: bold;
-				color: var( --color-gray-9 );
+				color: var( --tab-color-selected );
 			}
 
 			&:hover {
 				background-color: unset;;
-				color: black;
+				color: var( --tab-color-hover );
 				border-bottom-color: var( --tab-border-hover );	
 			}
 

package/src/components/tabs/tabs.ts

@@ -146,6 +146,9 @@ interface TabsProps extends Omit<ComponentProps,"content"> {
  * ```
  * --tab-border-selected
  * --tab-border-hover
+ * --tab-color-hover
+ * --tab-color
+ * --tab-color-selected
  * ```
  */
 

package/src/components/tag/tag.module.scss

@@ -19,7 +19,7 @@
 	--tag-border: var( --border );
 	--tag-border-focus: var( --border-focus );
 	--tag-background: var( --accent-background );
-	--tag-color: black;
+	--tag-color: var( --text-primary );
 	--tag-icon-color: var( --tag-color );
 }
 

package/src/components/textarea/textarea.module.scss

@@ -20,6 +20,9 @@
 	--textarea-border: var( --border );
 	--textarea-border-focus: var( --border-focus );
 	--textarea-selection: var( --accent-background );
+	--textarea-selection-color: var( --accent-color );
+	--textarea-background: var( --background-input );
+	--textarea-color: var( --text-primary );
 }
 
 .x4simpletextarea {
@@ -36,6 +39,10 @@
 		outline: none;
 		font: inherit;
 
+		// as the ones of an input
+		background-color: var( --textarea-background );
+		color: var( --textarea-color );
+
 		border: 1px solid var( --textarea-border );
 
 		&:focus {
@@ -44,7 +51,7 @@
 
 		&::selection {
 			background-color: var( --textarea-selection );
-			color: white;
+			color: var( --textarea-selection-color );
 		}
 
 		// as the one of an input

package/src/components/textarea/textarea.ts

@@ -136,6 +136,9 @@ export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents
  * --textarea-border
  * --textarea-border-focus
  * --textarea-selection
+ * --textarea-selection-color
+ * --textarea-background
+ * --textarea-color
  * ```
  */
 

package/src/components/themes.scss

@@ -44,27 +44,39 @@ $color--interval: 8.4%;
 	--color-success-a60: #{color.adjust(#10c01f, $lightness: -10%)};
 }
 
+// the greys are mixes of the two ends of the scale: #999 with a0 white and a100 black,
+// light on dark when a theme reverses the scale
+
 :root {
 	// Backgrounds
 	--background-primary: var(--color-primary-a0);
 	--background-secondary: var(--color-primary-a10);
-	--background-ternary: #f4f4f4;
+	--background-ternary: color-mix(in srgb, var(--color-primary-a100) 4.3%, var(--color-primary-a0));		// #f4f4f4
+	--background-hover: color-mix(in srgb, var(--color-primary-a100) 6.7%, var(--color-primary-a0));		// #eee
+	--background-active: color-mix(in srgb, var(--color-primary-a100) 20%, var(--color-primary-a0));		// #ccc
+	--background-input: color-mix(in srgb, var(--color-primary-a0) 60%, transparent);					// white at 60%
 
 	// Texts
 	--text-primary: var(--color-primary-a100);
-	--text-secondary: #999;
-	--text-ternary: #666;
+	--text-secondary: color-mix(in srgb, var(--color-primary-a100) 40%, var(--color-primary-a0));		// #999
+	--text-ternary: color-mix(in srgb, var(--color-primary-a100) 60%, var(--color-primary-a0));		// #666
 
 	// Disabled
-	--disabled-background: #ccc;
-	--disabled-color: white;
-	--disabled-color-dark: #aaa;
+	--disabled-background: color-mix(in srgb, var(--color-primary-a100) 20%, var(--color-primary-a0));	// #ccc
+	--disabled-color: var(--color-primary-a0);
+	--disabled-color-dark: color-mix(in srgb, var(--color-primary-a100) 33.3%, var(--color-primary-a0));	// #aaa
+	--disabled-color-light: color-mix(in srgb, var(--color-primary-a100) 20%, var(--color-primary-a0));	// #ccc
+
+	// Icons
+	--icon-color: color-mix(in srgb, var(--color-primary-a100) 44%, transparent);			// black at 44%
+	--icon-color-active: color-mix(in srgb, var(--accent-color) 64%, transparent);			// white at 64%
 
 	// Accents
 	--accent-background: var(--color-primary-a60);
 	--accent-background-hover: var(--color-primary-a55);
 	--accent-background-focus: var(--color-primary-a70);
 	--accent-background-active: var(--color-primary-a80);
+	--accent-background-light: color-mix(in srgb, var(--accent-background) 25%, transparent);		// the accent at 25%
 
 	--accent-color: var(--color-primary-a0);
 	--accent-color-hover: var(--color-primary-a0);
@@ -72,19 +84,74 @@ $color--interval: 8.4%;
 	--accent-color-active: var(--color-primary-a0);
 
 	// Borders
-	--border: #e1e1e1;
-	--border-light: #eaeaea;
-	--border-hover: #c2c2c2;
+	--border: color-mix(in srgb, var(--color-primary-a100) 11.8%, var(--color-primary-a0));			// #e1e1e1
+	--border-light: color-mix(in srgb, var(--color-primary-a100) 8.2%, var(--color-primary-a0));		// #eaeaea
+	--border-hover: color-mix(in srgb, var(--color-primary-a100) 23.9%, var(--color-primary-a0));		// #c2c2c2
 	--border-focus: var(--accent-background);
 
+	// the red, orange and green do not follow the scale: their text stays white
 	--alert-background: var(--color-danger-a50);
 	--alert-background-active: var(--color-danger-a60);
-	--alert-color: var(--color-primary-a0);
+	--alert-color: #ffffff;
 
 	--warning-background: var(--color-warning-a50);
-	--warning-color: var(--color-primary-a0);
+	--warning-color: #ffffff;
 
 	--success-background: var(--color-success-a50);
 	--success-background-active: var(--color-success-a60);
-	--success-color: var(--color-primary-a0);
+	--success-color: #ffffff;
+}
+
+// :: dark theme :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+// Application.setTheme( "dark" ): the class x4theme-dark on <html>, like the theme Dark
+// Modern of VS Code. Its colours are taken in the sources of VS Code:
+// extensions/theme-defaults/themes/dark_modern.json, and for the lists the defaults of
+// src/vs/platform/theme/common/colors/listColors.ts; the values marked "chosen" are not
+// in VS Code. A theme of an application is written the same way, under html.x4theme-<name>.
+
+html.x4theme-dark {
+	// the scale: a0 the background, a100 the text, the surfaces between them, then the blues
+	--color-primary-a0: #1f1f1f;		// editor.background
+	--color-primary-a5: #252526;		// chosen
+	--color-primary-a10: #2a2d2e;		// list.hoverBackground
+	--color-primary-a20: #37373d;		// list.inactiveSelectionBackground
+	--color-primary-a30: #3c3c3c;		// input.border
+	--color-primary-a40: #04395e;		// list.activeSelectionBackground
+	--color-primary-a50: #0078d4;		// button.background, focusBorder
+	--color-primary-a55: #026ec1;		// button.hoverBackground
+	--color-primary-a60: #0078d4;
+	--color-primary-a70: #026ec1;
+	--color-primary-a80: #04395e;
+	--color-primary-a90: #cccccc;
+	--color-primary-a100: #cccccc;		// foreground
+
+	// what the scale does not give
+	--background-ternary: #181818;		// sideBar.background
+	--background-hover: #2b2b2b;		// button.secondaryHoverBackground
+	--background-active: #37373d;		// list.inactiveSelectionBackground
+	--background-input: #313131;		// input.background
+
+	--text-secondary: #9d9d9d;			// descriptionForeground
+	--text-ternary: #bbbbbb;			// chosen: between the description and the text
+
+	--border: #3c3c3c;					// input.border
+	--border-light: #2b2b2b;			// panel.border
+	--border-hover: #616161;			// chosen (badge.background)
+
+	--disabled-background: #313131;		// chosen
+	--disabled-color: #6e6e6e;			// chosen
+	--disabled-color-dark: #6e6e6e;		// chosen
+	--disabled-color-light: #4f4f4f;	// chosen
+
+	--accent-color: #ffffff;			// button.foreground: the text on the accent
+	--accent-color-hover: #ffffff;
+	--accent-color-focus: #ffffff;
+	--accent-color-active: #ffffff;
+
+	// the title bar of a Dialog: the one of the window of VS Code
+	--color-dialog-caption: #181818;			// titleBar.activeBackground
+	--color-dialog-caption-text: #cccccc;		// titleBar.activeForeground
+	--color-dialog-background: #202020;			// editorWidget.background
+
+	color-scheme: dark;		// the native parts: select, scroll bars, number spinners
 }

package/src/components/tickline/tickline.module.scss

@@ -18,7 +18,7 @@
 	--tickline-axis-color: var( --border );
 	--tickline-color: var( --accent-color );
     --tickline-width: 1px;
-	--tickline-background: white;
+	--tickline-background: var( --background-primary );
 }
 
 .x4tickline {