x4js 2.3.22 → 2.3.23

package/aicontext.md

@@ -1030,6 +1030,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
@@ -1531,8 +1533,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.23",
   "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

@@ -19,6 +19,7 @@
 :root {
 	--color-dialog-caption: var( --color-primary-a80 );
 	--color-dialog-caption-text: var( --color-primary-a0 );
+	--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;
@@ -279,7 +280,7 @@
 		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;
 	}

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

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

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

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,20 @@ $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;
 }

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 {

package/src/components/tooltips/tooltips.scss

@@ -18,14 +18,15 @@
 
 :root {
 	--tooltip-caption-background: var( --color-primary-a70 );
-	--tooltip-caption-color: white;
+	--tooltip-caption-color: var( --color-primary-a0 );
 
-	--tooltip-icon-background: white;
+	--tooltip-icon-background: var( --color-primary-a0 );
 	--tooltip-icon-color: var( --color-primary-a70 );
 
 	--tooltip-background: var( --color-primary-a10 );	//white;
 	--tooltip-color: var( --color-primary-a90 );
 	--tooltip-border: var( --color-primary-a20 );
+	--tooltip-image-background: var( --background-primary );
 }
 
 .x4tooltip {
@@ -67,7 +68,7 @@
 	img {
 		max-width: 100px;
 		max-height: 50px;
-		background-color: white;
+		background-color: var( --tooltip-image-background );
 		margin: 4px;
 	}
 }

package/src/components/tooltips/tooltips.ts

@@ -104,6 +104,7 @@ function closeTT( ) {
  * --tooltip-background
  * --tooltip-color
  * --tooltip-border
+ * --tooltip-image-background
  * ```
  */
 

package/src/components/treeview/treeview.module.scss

@@ -17,10 +17,12 @@
 
 :root {
 
-	--treeview-background: white;
+	--treeview-background: var( --background-primary );
+
+	--treeitem-color: var( --text-primary );
 
 	--treeitem-backgound-hover: var( --background-secondary );
-	--treeitem-color-hover: var( );
+	--treeitem-color-hover: var( --text-primary );
 
 	--treeitem-background-sel: var( --accent-background );
 	--treeitem-color-sel: var( --accent-color );
@@ -97,6 +99,8 @@
 
 					&:hover {
 						background-color: var( --treeitem-backgound-hover );
+						--label-color: var( --treeitem-color-hover );
+						--label-icon-color: var( --treeitem-color-hover );
 					}
 
 					&.selected {

package/src/components/treeview/treeview.ts

@@ -72,6 +72,7 @@ export interface TreeviewEvents extends ComponentEvents {
  * @cssvar
  * ```
  * --treeview-background
+ * --treeitem-color
  * --treeitem-backgound-hover
  * --treeitem-color-hover
  * --treeitem-background-sel

package/src/core/core_colors.ts

@@ -26,6 +26,34 @@ function round(v: number) {
 	return Math.round(v);
 }
 
+let ctx2d: CanvasRenderingContext2D = null;
+
+/**
+ * a colour of css as the browser paints it: [red, green, blue, alpha 0-1];
+ * null when the browser does not know it
+ */
+
+function browserColor( value: string ) {
+	if( !ctx2d ) {
+		const canvas = document.createElement( "canvas" );
+		canvas.width = canvas.height = 1;
+		ctx2d = canvas.getContext( "2d", { willReadFrequently: true } );
+	}
+
+	// a value the canvas refuses leaves fillStyle as it was
+	ctx2d.fillStyle = "#010203";
+	ctx2d.fillStyle = value;
+	if( ctx2d.fillStyle=="#010203" ) {
+		return null;
+	}
+
+	// fillStyle keeps the colour as it was written (oklch, color(srgb ...)): the pixel is in rgb
+	ctx2d.clearRect( 0, 0, 1, 1 );
+	ctx2d.fillRect( 0, 0, 1, 1 );
+	const px = ctx2d.getImageData( 0, 0, 1, 1 ).data;
+	return [ px[0], px[1], px[2], px[3] / 255 ];
+}
+
 
 export interface Rgb {
 	red: number;
@@ -79,6 +107,7 @@ export class Color {
 	 *  var( --color-5 )
 	 *  cyan
 	 *  transparent
+	 *  any other colour of css the browser knows: hsl( ), oklch( ), color-mix( )...
 	 */
 
 	setValue(value: string): this {
@@ -137,6 +166,12 @@ export class Color {
 			}
 		}
 
+		// another colour the browser knows (color-mix, hsl, oklch...)
+		const known = browserColor( value );
+		if( known ) {
+			return this.setRgb( known[0], known[1], known[2], known[3] );
+		}
+
 		// red, to be seen, and marked as invalid
 		this.setRgb(255, 0, 0, 1);
 		this.invalid = true;
@@ -343,32 +378,92 @@ export class Color {
 	 * @param percent - The percentage to lighten (0-100).
 	 * @returns The current Color instance.
 	 */
-	lighten(percent: number) : this {
+	lighten(percent: number): this {
+		const factor = clamp(percent, 0, 100) / 100;
 
-		if (percent < 0) {
-			percent = 0;
-		}
-		else if (percent > 100) {
-			percent = 100;
-		}
+		const [r, g, b, a] = this.rgb;
+		this.rgb = [round(r + (255 - r) * factor), round(g + (255 - g) * factor), round(b + (255 - b) * factor), a];
 
-		const factor = percent / 100;
+		return this;
+	}
 
-		const adj = (value: number): number => {
-			value = (value + (255 - value) * factor) | 0;
-			if (value > 255) {
-				value = 255;
-			}
-			return value;
-		};
+	/**
+	 * Darkens the color by a given percentage.
+	 *
+	 * @param percent - The percentage to darken (0-100).
+	 * @returns The current Color instance.
+	 */
+	darken(percent: number): this {
+		const factor = 1 - clamp(percent, 0, 100) / 100;
 
-		const _ = this.rgb;
-		this.rgb = [adj(_[0]), adj(_[1]), adj(_[2]), _[3]];
+		const [r, g, b, a] = this.rgb;
+		this.rgb = [round(r * factor), round(g * factor), round(b * factor), a];
 
 		return this;
 	}
+
+	/**
+	 * Mixes the color with another one, alpha included.
+	 *
+	 * @param other - The other color.
+	 * @param amount - The part of the other color (0-1): 0 keeps this color, 1 gives the other one.
+	 * @returns The current Color instance.
+	 */
+	mix(other: Color, amount: number): this {
+		const t = clamp(amount, 0, 1);
+
+		const [r, g, b, a] = this.rgb;
+		const [r2, g2, b2, a2] = other.rgb;
+		this.rgb = [round(r + (r2 - r) * t), round(g + (g2 - g) * t), round(b + (b2 - b) * t), a + (a2 - a) * t];
+
+		return this;
+	}
+
+	/**
+	 * Gets the relative luminance of the color, as WCAG defines it. The alpha is not used.
+	 *
+	 * @returns The luminance (0 for black, 1 for white).
+	 */
+	luminance(): number {
+		// the components in linear light
+		const lin = (v: number) => {
+			v /= 255;
+			return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+		};
+
+		const [r, g, b] = this.rgb;
+		return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+	}
+
+	/**
+	 * Gets the contrast ratio between the color and another one, as WCAG defines it.
+	 *
+	 * @param other - The other color.
+	 * @returns The ratio (1 for the same luminance, 21 for black and white).
+	 */
+	contrast(other: Color): number {
+		const l1 = this.luminance();
+		const l2 = other.luminance();
+		return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+	}
+
+	/**
+	 * Gets, of two colors of text, the one that contrasts most with the color.
+	 *
+	 * @param light - The light text color (white by default).
+	 * @param dark - The dark text color (black by default).
+	 * @returns A copy of light or dark.
+	 */
+	textColor(light = WHITE, dark = BLACK): Color {
+		const best = this.contrast(light) >= this.contrast(dark) ? light : dark;
+
+		const [r, g, b, a] = best.rgb;
+		return new Color(r, g, b, a);
+	}
 }
 
+const WHITE = new Color(255, 255, 255);
+const BLACK = new Color(0, 0, 0);