x4js 2.3.22 → 2.3.24

package/aicontext.md

@@ -285,6 +285,9 @@ static instance<P extends Application>(): P
 setEnv(name: string, value: any): void
 getEnv(name: string, def_value?: any): any
 static fireGlobal(msg: string, params?: any): void
+static setTheme(name: string): void         // the class x4theme-<name> on <html>: "" the light theme (default, no class),
+                                            // "dark" the dark theme of x4, another name a theme of the application
+static getTheme(): string                   // "" for the light theme, "dark", or the name given to setTheme
 focusNext(next: boolean): boolean
 addShortcut(keys: string | string[], callback: (ev: KeyboardEvent) => void, options?: ShortcutOptions): void   // see Shortcuts
 setupSocketMessaging(path?: string, looseCallback?: () => void): void
@@ -1030,6 +1033,8 @@ interface ButtonProps extends ComponentProps {
   tabindex?: number | boolean
   autorepeat?: number | boolean            // true=200ms; number=interval (first fire after 500ms)
   click?: EventCallback<EvClick>
+  menu?: MenuElement[] | (() => MenuElement[])   // a click opens this Menu under the button, in place of the click event;
+                                           // a function is called at each click; the button gets the class "with-menu"
 }
 class Button extends Component {
   click(): void                            // simulate a click
@@ -1508,6 +1513,24 @@ isLanguage(name: string): boolean
 
 ---
 
+## Theme (`themes.scss`)
+
+```css
+--color-primary-a0 … --color-primary-a100     /* the scale: a0 the background, a100 the text, the accent between */
+/* the globals the components use: --background-primary / -secondary / -ternary / -hover / -active / -input,
+   --text-primary / -secondary / -ternary, --border / -light / -hover / -focus, --accent-background / -hover /
+   -focus / -active / -light, --accent-color (the text on the accent), --disabled-*, --icon-color / -active,
+   --alert-*, --warning-*, --success-* */
+```
+// The greys are mixes of a0 and a100: a theme that reverses the scale gets them light on dark.
+// Each component reads its own variables (the @cssvar of its class), which point to these globals:
+//   a theme redefines the globals, or one variable of a component.
+// Themes: Application.setTheme(name) puts the class x4theme-<name> on <html>. "" is the light theme (by default),
+//   "dark" the dark theme of x4 (the colours of VS Code Dark Modern). An application adds its own theme in its css,
+//   html.x4theme-pink { --color-primary-a0: ...; ... }, then Application.setTheme("pink").
+
+---
+
 ## Utilities (`core_tools`)
 
 ```ts
@@ -1531,8 +1554,15 @@ class Timer { setTimeout; clearTimeout; setInterval; clearInterval; clearAllTime
 
 class Color {
   // new Color(value) | new Color(r,g,b,a?)   a: 0..1, default 1
+  // value: "#rgb", "#rrggbb", "#rrggbbaa", "rgb()", "rgba()", a name ("cyan", "transparent"), "var(--name)",
+  //   and any other colour the browser knows (hsl(), oklch(), color-mix()), read from the pixel it paints
   setValue(value): this; setRgb(r,g,b,a?): this; setHsv(h,s,v,a?): this; setAlpha(a): this
-  getAlpha(): number; lighten(percent): this
+  getAlpha(): number
+  lighten(percent): this; darken(percent): this   // toward white / black, 0-100, each component rounded
+  mix(other: Color, amount): this                  // amount 0-1: 0 keeps this color, 1 gives the other one; alpha too
+  luminance(): number                              // WCAG relative luminance, 0 (black) to 1 (white); alpha not used
+  contrast(other: Color): number                   // WCAG ratio, 1 to 21
+  textColor(light?: Color, dark?: Color): Color    // a copy of the one of the two that contrasts most with this color; white and black by default
   isInvalid(): boolean                     // the last setValue could not be read (the color is red); setRgb/setHsv make it valid
   toHexString(): string; toNumber(): number
   toRgbString(withAlpha = false): string   // "rgb(r,g,b)"; true: "rgba(r,g,b,0.500)" when not opaque, "rgb(...)" when opaque

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.3.22",
+  "version": "2.3.24",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/btngroup/btngroup.module.scss

@@ -15,7 +15,7 @@
  **/
 
  :root {
-	--btngroup-background: white;
+	--btngroup-background: var( --background-primary );
  }
 
 .x4btngroup {

package/src/components/btngroup/btngroup.ts

@@ -56,7 +56,12 @@ interface BtnGroupProps extends Omit<ComponentProps,"content"> {
 }
 
 /**
- * 
+ *
+ * @cssvar
+ * ```
+ * --btngroup-background
+ * ```
+ * a packed group draws its buttons with the --ol-button-* variables of Button
  */
 
 @class_ns( "x4" )

package/src/components/button/button.module.scss

@@ -32,15 +32,15 @@
 	--button-background-disabled: var( --disabled-background );
 	--button-color-disabled: var( --disabled-color );
 
-	--button-icon-color: rgb(255 255 255 / 64%);
+	--button-icon-color: var( --icon-color-active );
 
 	// outline
 	--ol-button-background: var( --background-primary );
-	--ol-button-background-active: #ccc;
+	--ol-button-background-active: var( --background-active );
 	--ol-button-color-active: var( --text-primary );
-	--ol-button-background-hover: #eee;
+	--ol-button-background-hover: var( --background-hover );
 	--ol-button-color-hover: var( --text-primary );
-	--ol-button-color-disabled: #ccc;
+	--ol-button-color-disabled: var( --disabled-color-light );
 
 	--ol-button-color: var( --text-primary );
 	--ol-button-border: var( --border );

package/src/components/button/button.ts

@@ -71,6 +71,14 @@ export interface ButtonProps extends ComponentProps {
 	 */
 	click?: EventCallback<EvClick>;
 
+	/**
+	 * A menu that a click opens under the button, in place of the click event.
+	 * A function is called at each click: it gives the items of that time.
+	 * The button gets the class "with-menu".
+	 *
+	 * @example
+	 * new Button( { label: "File", menu: [ { text: "Open", click: open }, "-", { text: "Quit", click: quit } ] } );
+	 */
 	menu?: MenuElement[] | (( ) => MenuElement[]);
 }
 
@@ -90,7 +98,19 @@ export interface ButtonProps extends ComponentProps {
  * 	--button-background-disabled
  * 	--button-color-disabled
  * 	--button-icon-color
+ * 	--ol-button-background
+ * 	--ol-button-color
+ * 	--ol-button-border
+ * 	--ol-button-icon-color
+ * 	--ol-button-background-hover
+ * 	--ol-button-color-hover
+ * 	--ol-button-background-active
+ * 	--ol-button-color-active
+ * 	--ol-button-color-disabled
+ * 	--ol-button-border-focus
+ * 	--ol-button-color-focus
  * ```
+ * the --ol-button-* variables are the ones of the outline buttons
  */
 
 @class_ns( "x4" )

package/src/components/calendar/calendar.module.scss

@@ -36,6 +36,7 @@
 
 	--calendar-header-color: var( --text-primary );
 	--calendar-out-color: var( --disabled-color-dark );
+	--calendar-day-color: var( --text-primary );
 }
 
 .x4calendar {
@@ -93,7 +94,7 @@
 			min-width: 28px;
 			min-height: 28px;
 			
-			color: var( --gray-900 );
+			color: var( --calendar-day-color );
 			text-align: center;
 			
 			.text {

package/src/components/calendar/calendar.ts

@@ -54,7 +54,7 @@ interface CalendarProps extends ComponentProps {
  * ```
  * --calendar-btn-background
  * --calendar-btn-color
- * --calendar-btn-color
+ * --calendar-btn-color-hover
  * --calendar-week-color
  * --calendar-week-color-hover
  * --calendard-day-background-hover
@@ -66,6 +66,7 @@ interface CalendarProps extends ComponentProps {
  * --calendar-today-border
  * --calendar-header-color
  * --calendar-out-color
+ * --calendar-day-color
  * ```
  */
 

package/src/components/chart/chart.module.scss

@@ -15,10 +15,10 @@
  **/
 
 :root {
-	--chart-background: white;
-	--chart-text: #52514e;
-	--chart-grid: #e6e5e0;
-	--chart-axis: #b5b4ae;
+	--chart-background: var( --background-primary );
+	--chart-text: var( --text-ternary );
+	--chart-grid: var( --border );
+	--chart-axis: var( --border-hover );
 
 	// series colors, used in this order
 	--chart-color-1: #2a78d6;

package/src/components/checkbox/checkbox.module.scss

@@ -24,6 +24,7 @@
 	--checkbox-color-disabled: var( --disabled-background );
 	--checkbox-check-border: var( --border );
 	--checkbox-check-border-hover: var( --border-hover );
+	--checkbox-check-color: var( --accent-color );
 }
 
 .x4checkbox {
@@ -41,7 +42,7 @@
 	.inner {
 		height: 1rem;
 		width: 1rem;
-		color: white;
+		color: var( --checkbox-check-color );
 		position: relative;
 		order: 1;
 		

package/src/components/checkbox/checkbox.ts

@@ -41,6 +41,7 @@ interface CheckboxProps extends ComponentProps {
  * --checkbox-color-disabled
  * --checkbox-check-border
  * --checkbox-check-border-hover
+ * --checkbox-check-color
  * ```
  */
 

package/src/components/colorpicker/colorpicker.module.scss

@@ -74,7 +74,6 @@
 			overflow: hidden;
 			
 			background-image: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 212), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0));
-			border: 1px solid var( --color-gray-3 );
 
 			.thumb {
 				@include overlay-shadow;

package/src/components/dialog/dialog.module.scss

@@ -17,8 +17,9 @@
 @use "../shared";
 
 :root {
-	--color-dialog-caption: var( --color-primary-a80 );
-	--color-dialog-caption-text: var( --color-primary-a0 );
+	--color-dialog-caption: var( --accent-background-active );
+	--color-dialog-caption-text: var( --accent-color );
+	--color-dialog-background: var( --background-primary );
 }
 
 .x4dialog {
@@ -26,8 +27,7 @@
 	@extend %vbox;
 
 	position: absolute !important;
-	background-color: white;
-	border: 1px solid var( --border-dark );
+	background-color: var( --color-dialog-background );
 	max-width: 99vw;
 	outline: none;
 	

package/src/components/dialog/dialog.ts

@@ -54,6 +54,7 @@ interface DialogEvents extends PopupEvents {
  * ```
  * --color-dialog-caption
  * --color-dialog-caption-text
+ * --color-dialog-background
  * ```
  */
 

package/src/components/dockingview/dockingview.module.scss

@@ -15,13 +15,14 @@
  **/
 
 .x4dockingview {
-	--dock-line: var( --border, #cfdae0 );						// between two panels, under a title
-	--dock-title-background: var( --background-secondary, #f3f7f9 );
-	--dock-title-background-hover: color-mix( in srgb, var( --dock-accent ) 25%, transparent );
-	--dock-title-color: var( --text-ternary, #607784 );
-	--dock-title-color-active: var( --text-primary, #002a40 );
-	--dock-accent: var( --accent-background, #126e9e );			// the tab in front, the sizer under the pointer, the preview
-	--dock-float-background: var( --background-primary, white );
+	--dock-line: var( --border );						// between two panels, under a title
+	--dock-title-background: var( --background-secondary );
+	--dock-title-background-hover: var( --accent-background-light );
+	--dock-title-color: var( --text-ternary );
+	--dock-title-color-active: var( --text-primary );
+	--dock-accent: var( --accent-background );			// the tab in front, the sizer under the pointer, the border of the preview
+	--dock-preview-background: var( --accent-background-light );	// where the panel that is dragged will go
+	--dock-float-background: var( --background-primary );
 	--dock-float-shadow: 0 6px 24px rgba( 0, 0, 0, 0.35 );
 
 	position: relative;
@@ -220,7 +221,6 @@
 		width: 16px;
 		height: 16px;
 		line-height: 16px;
-		border-radius: 3px;
 		text-align: center;
 		font-weight: 400;
 		cursor: pointer;
@@ -268,7 +268,6 @@
 
 		background: var( --dock-float-background );
 		border: 1px solid var( --dock-line );
-		border-radius: 4px;
 		box-shadow: var( --dock-float-shadow );
 	}
 
@@ -279,9 +278,8 @@
 		box-sizing: border-box;
 		pointer-events: none;
 
-		background: color-mix( in srgb, var( --dock-accent ) 30%, transparent );
+		background: var( --dock-preview-background );
 		border: 1px solid var( --dock-accent );
-		border-radius: 3px;
 	}
 
 	// It holds the pointer during a drag: its cursor is the one that shows.

package/src/components/dockingview/dockingview.ts

@@ -179,6 +179,7 @@ interface Drag {
  * --dock-title-background-hover
  * --dock-title-color
  * --dock-title-color-active
+ * --dock-preview-background
  * --dock-float-background
  * --dock-float-shadow
  * ```

package/src/components/form/form.module.scss

@@ -17,7 +17,7 @@
  @use "../shared.scss";
 
 :root {
-	--form--background: var( --background-primary );
+	--form-background: transparent;
 }
 
 .x4form {
@@ -25,7 +25,7 @@
 	@extend %flex;
     
     padding: 16px;
-	background-color: var( --color-form );
+	background-color: var( --form-background );
 	
     &.horizontal {
         flex-direction: row;

package/src/components/form/form.ts

@@ -31,7 +31,7 @@ type ValidationFn = ( values: FormValues, is_valid: boolean ) => boolean;
 /**
  * @cssvar
  * ```
- * --form--background
+ * --form-background
  * ```
  */
 

package/src/components/gauge/gauge.module.scss

@@ -16,8 +16,8 @@
 
 :root {
 	--gauge-base-color: var( --color-primary-a70 );
-	--gauge-needle-back: black;
-	--gauge-needle-dot: rgb(58, 58, 58);
+	--gauge-needle-back: var( --text-primary );
+	--gauge-needle-dot: var( --text-ternary );
 }
 
 .x4gauge {

package/src/components/gridview/gridview.module.scss

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

package/src/components/input/input.module.scss

@@ -15,8 +15,8 @@
  **/
 
 :root {
-    --input-background: rgba(255, 255, 255, 0.6);
-    --input-color: black;
+    --input-background: var( --background-input );
+    --input-color: var( --text-primary );
 
 	--input-sel-background: var( --accent-background );
 	--input-sel-color: var( --accent-color );

package/src/components/input/input.ts

@@ -203,6 +203,9 @@ interface InputEvents extends ComponentEvent {
  * 
  * @cssvar
  * ```
+ * --input-background
+ * --input-color
+ * --input-color-disabled
  * --input-sel-background
  * --input-sel-color
  * --input-placeholder

package/src/components/keyboard/keyboard.ts

@@ -284,7 +284,10 @@ export class Keyboard extends HBox<KeyboardProps>
 	keyboard: Box;
 	visible: boolean;
 	input: HTMLInputElement;
-		
+
+	// the pointerdown handled last (see handleKeyEvent)
+	private handled: UIEvent = null;
+
     constructor( props: KeyboardProps )  {
         super( { ...props, id: 'v-keyboard' } );
 
@@ -355,6 +358,13 @@ export class Keyboard extends HBox<KeyboardProps>
 	 */
 
     private handleKeyEvent( e: UIEvent ) {
+		// the key backspace listens to pointerdown too (its autorepeat): this handler is
+		// called for its node and for the keyboard, the same event twice; one key only
+		if( e===this.handled ) {
+			return;
+		}
+		this.handled = e;
+
         let target = e.target as HTMLElement;
         let key;
 

package/src/components/label/label.module.scss

@@ -19,7 +19,7 @@
 :root {
 	--label-background: transparent;
 	--label-color: var( --text-ternary );
-	--label-icon-color: rgb(0 0 0 / 44%);
+	--label-icon-color: var( --icon-color );
 	--label-color-disa: var( --disabled-color-dark );
 }
 
@@ -30,8 +30,8 @@
 	background-color: var( --label-background );
 	gap: 0.2em;
 
-	&.al-right
-	&.right  {
+	&.al-right,
+	&.right {
 		text-align: right;
 		justify-content: end;
 	}

package/src/components/listbox/listbox.module.scss

@@ -28,9 +28,12 @@
 	--listbox-item-color-hover: var( --text-primary );;
 	--listbox-item-background-hover: var( --background-secondary );
 
-	--listbox-background: white;
+	--listbox-background: var( --background-primary );
 	--listbox-border: var( --border );
 	--listbox-border-focus: var( --accent-background-focus );
+
+	--listbox-title-background: var( --background-primary );
+	--listbox-title-color: var( --text-primary );
 }
 
 .x4listbox {
@@ -48,10 +51,10 @@
 	}
 
 	&>.title {
-	    background: white;
+	    background: var( --listbox-title-background );
 		padding: 4px;
 		font-weight: bold;
-		color: black;
+		color: var( --listbox-title-color );
 		border-bottom: 1px solid var(--border);
 	}
 

package/src/components/listbox/listbox.ts

@@ -88,6 +88,8 @@ export interface ListboxProps extends Omit<ComponentProps,'content'> {
  * --listbox-background
  * --listbox-border
  * --listbox-border-focus
+ * --listbox-title-background
+ * --listbox-title-color
  * ```
  */
 

package/src/components/menu/menu.module.scss

@@ -17,7 +17,7 @@
 @use "../shared.scss";
 
 :root {
-	--menu-background: white;
+	--menu-background: var( --background-primary );
 	--menu-border: var( --border-hover );
 
 	--menuitem-color: var( --text-ternary );;
@@ -33,7 +33,6 @@
 	position: absolute;
 	overflow-y: auto;
 
-	border-radius: var(--bradius);
 	padding: 8px 0;
 	min-width: 150px;
 	

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;
 		}
 
@@ -126,21 +126,22 @@
 			line-height: 1.8em;
 		}
 
+		// on the right, the bar and the lines end where the button OK does: the bar of
+		// buttons has a padding of 20px and the button a margin of 2px, the form 16px
 		.x4progress {
-			margin: 0 16px;
+			margin: 0 6px 0 16px;
 		}
 
+		// the lines: a textarea read only, 10 lines high at least, a line is not wrapped
 		#sub-text {
 			flex-grow: 1;
+			min-height: calc( 10lh + 10px );	// its padding and its border too
 			max-height: 400px;
 			overflow: auto;
-			background-color: #f5f5f5;
+			white-space: pre;
+			background-color: var( --msgbox-log-background );
 			padding: 4px 8px;
-			margin: 0 16px;
-
-			.x4simpletext {
-				white-space: nowrap;
-			}
+			margin: 0 6px 0 16px;
 		}
 	}
 }