x4js 2.3.22 → 2.3.24

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( --accent-color );
 
-	--tooltip-icon-background: white;
+	--tooltip-icon-background: var( --accent-color );
 	--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_application.ts

@@ -42,6 +42,9 @@ export interface ApplicationEvents extends EventMap {
 // singleton
 let main_app: Application = null;
 
+// the class of a theme on <html>: x4theme-<name> (see Application.setTheme)
+const THEME_PREFIX = "x4theme-";
+
 /**
  * Provides information about the user's device and browser capabilities.
  */
@@ -201,6 +204,50 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 		Application.instance().fire( "global", { msg, params } );
 	}
 
+	/**
+	 * Selects the theme of the page: the class `x4theme-<name>` on `<html>`, in place
+	 * of the one of the theme before.
+	 * - `""`: the light theme of x4, the one by default: no class.
+	 * - `"dark"`: the dark theme of x4, like the theme Dark Modern of VS Code
+	 *   (`html.x4theme-dark` in themes.scss).
+	 * - any other name: a theme of the application, defined in its own css under
+	 *   `html.x4theme-<name>`, with the variables of themes.scss it changes.
+	 * @param name - the name of the theme; "" for the light theme.
+	 * @example
+	 * Application.setTheme( "dark" );		// the dark theme of x4
+	 * Application.setTheme( "pink" );		// html.x4theme-pink { --color-primary-a0: ...; } in the css of the application
+	 * Application.setTheme( "" );			// back to the light theme
+	 */
+
+	static setTheme( name: string ) {
+		const classes = document.documentElement.classList;
+
+		const current = Application.getTheme( );
+		if( current ) {
+			classes.remove( THEME_PREFIX + current );
+		}
+
+		if( name ) {
+			classes.add( THEME_PREFIX + name );
+		}
+	}
+
+	/**
+	 * The name of the theme of the page, as setTheme got it: `""` for the light theme
+	 * of x4, `"dark"` for its dark theme, or the name of a theme of the application.
+	 */
+
+	static getTheme( ): string {
+		const classes = document.documentElement.classList;
+		for( let i = 0; i < classes.length; i++ ) {
+			if( classes[i].startsWith( THEME_PREFIX ) ) {
+				return classes[i].replace( THEME_PREFIX, "" );
+			}
+		}
+
+		return "";
+	}
+
 	/**
 	 * 
 	 */

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