@datatechsolutions/tympan-tokens 0.4.1 → 0.4.2

package/dist/index.js

@@ -929,19 +929,24 @@ function resolveTheme(config, mode, contrastOverride) {
 		}],
 		"sheet-inset": [inset]
 	};
+	const shadowPins = config.shadowPins?.[mode] ?? {};
+	for (const [name, layers] of Object.entries(shadowPins)) shadows[name] = layers.map((l) => ({
+		...l,
+		color: parseColor(l.color)
+	}));
 	const R = config.radius;
 	const dimensions = {
 		radius: R,
 		"radius-control": R,
-		"radius-card": Math.round(R * 1.6),
-		"radius-sheet": Math.round(R * 2.4),
+		"radius-card": config.radii?.card ?? Math.round(R * 1.6),
+		"radius-sheet": config.radii?.sheet ?? Math.round(R * 2.4),
 		"radius-pill": 999,
 		"radius-agent": Math.max(2, Math.round(R * .6)),
 		"focus-width": contrast === "high" ? 3 : 2,
 		"glass-blur-sheet": config.glass ? 20 : 0,
 		"glass-blur-floating": config.glass ? 24 : 0
 	};
-	const numbers = { "glass-saturate": config.glass ? 1.15 : 1 };
+	const numbers = { "glass-saturate": config.glass ? config.glassSaturate?.[mode] ?? 1.15 : 1 };
 	const fonts = {};
 	for (const role of [
 		"display",
@@ -965,7 +970,10 @@ function resolveTheme(config, mode, contrastOverride) {
 		dimensions,
 		numbers,
 		fonts,
-		strings: config.strings ?? {},
+		strings: {
+			...config.strings,
+			...contrast === config.contrast ? config.modeStrings?.[mode] : void 0
+		},
 		report
 	};
 }
@@ -1169,8 +1177,10 @@ const fakhirPreset = {
 /**
 * The Astrlabe workflow engine's look (`data-ty-theme="astrlabe"`): slate
 * neutrals, an indigo brand (indigo 500 as the accent family, one step darker
-* where text needs 4.5:1 on light grounds), translucent glass surfaces and the
-* rounder corners of that app (12 px controls, about 20 px cards). The call to
+* where text needs 4.5:1 on light grounds), liquid-glass surfaces (gradient
+* fills, specular edges, a strong saturation boost at night), the rounder
+* corners of that app (12 px controls, 20 px cards, 24 px sheets), its
+* compact type scale and the sky, indigo and violet mark. The call to
 * action is the indigo to purple gradient its primary buttons fill with, and
 * text (headings included) uses the platform's own system fonts. The state
 * contract holds on every ground: running is a cyan clearly off the indigo
@@ -1225,20 +1235,23 @@ const astrlabePreset = {
 			"on-brand": "#ffffff",
 			bg: "#f8fafc",
 			surface: "rgb(255 255 255 / 0.72)",
-			"surface-raised": "rgb(255 255 255 / 0.9)",
+			"surface-raised": "rgb(255 255 255 / 0.86)",
 			"surface-solid": "#ffffff",
 			"surface-raised-solid": "#ffffff",
-			"surface-sunken": "#f1f5f9",
-			line: "rgb(148 163 184 / 0.3)",
+			"surface-sunken": "#f2f3fa",
+			line: "rgb(148 163 184 / 0.26)",
 			"line-strong": "rgb(100 116 139 / 0.45)",
 			ink: "#0f172a",
-			"ink-2": "#334155",
-			"ink-3": "#4d5a6b",
+			"ink-2": "#475569",
+			"ink-3": "#5b6779",
 			success: "#15803d",
 			info: "#0e7490",
 			warning: "#a16207",
 			danger: "#be123c",
-			neutral: "#4d5a6b"
+			neutral: "#5b6779",
+			backdrop: "rgb(15 23 42 / 0.4)",
+			"ambient-1": "rgb(167 139 250 / 0.05)",
+			"ambient-2": "rgb(56 189 248 / 0.03)"
 		},
 		dark: {
 			brand: "#818cf8",
@@ -1246,22 +1259,25 @@ const astrlabePreset = {
 			"brand-strong": "#a5b4fc",
 			"brand-soft": "rgb(99 102 241 / 0.2)",
 			"on-brand": "#1e1b4b",
-			bg: "#0b1220",
-			surface: "rgb(30 41 59 / 0.72)",
-			"surface-raised": "rgb(30 41 59 / 0.92)",
+			bg: "#020617",
+			surface: "rgb(30 41 59 / 0.7)",
+			"surface-raised": "rgb(30 41 59 / 0.78)",
 			"surface-solid": "#131c2f",
 			"surface-raised-solid": "#1b2539",
 			"surface-sunken": "#0b1222",
-			line: "rgb(148 163 184 / 0.22)",
+			line: "rgb(148 163 184 / 0.24)",
 			"line-strong": "rgb(148 163 184 / 0.36)",
-			ink: "#f8fafc",
+			ink: "#ffffff",
 			"ink-2": "#cbd5e1",
-			"ink-3": "#a3b0c0",
+			"ink-3": "#94a3b8",
 			success: "#4ade80",
 			info: "#22d3ee",
 			warning: "#fbbf24",
 			danger: "#fb7185",
-			neutral: "#a3b0c0"
+			neutral: "#94a3b8",
+			backdrop: "rgb(0 0 0 / 0.5)",
+			"ambient-1": "rgb(124 58 237 / 0.1)",
+			"ambient-2": "rgb(2 132 199 / 0.08)"
 		}
 	},
 	ctaPins: {
@@ -1276,6 +1292,174 @@ const astrlabePreset = {
 			"#9333ea"
 		]
 	},
+	radii: {
+		card: 20,
+		sheet: 24
+	},
+	glassSaturate: {
+		light: 1.15,
+		dark: 1.5
+	},
+	shadowPins: {
+		light: {
+			sheet: [{
+				x: 0,
+				y: 4,
+				blur: 16,
+				spread: -2,
+				color: "rgb(0 0 0 / 0.1)"
+			}, {
+				x: 0,
+				y: 12,
+				blur: 40,
+				spread: -8,
+				color: "rgb(0 0 0 / 0.06)"
+			}],
+			"sheet-inset": [{
+				x: 0,
+				y: 1,
+				blur: 2,
+				spread: 0,
+				color: "rgb(255 255 255 / 0.7)",
+				inset: true
+			}, {
+				x: 0,
+				y: -1,
+				blur: 2,
+				spread: 0,
+				color: "rgb(0 0 0 / 0.04)",
+				inset: true
+			}],
+			raised: [{
+				x: 0,
+				y: 4,
+				blur: 12,
+				spread: -2,
+				color: "rgb(15 23 42 / 0.08)"
+			}, {
+				x: 0,
+				y: 2,
+				blur: 4,
+				spread: -2,
+				color: "rgb(15 23 42 / 0.04)"
+			}],
+			floating: [{
+				x: 0,
+				y: 12,
+				blur: 24,
+				spread: -8,
+				color: "rgb(15 23 42 / 0.12)"
+			}, {
+				x: 0,
+				y: 4,
+				blur: 8,
+				spread: -4,
+				color: "rgb(15 23 42 / 0.06)"
+			}],
+			modal: [{
+				x: 0,
+				y: 40,
+				blur: 100,
+				spread: -30,
+				color: "rgb(0 0 0 / 0.45)"
+			}, {
+				x: 0,
+				y: 16,
+				blur: 40,
+				spread: -12,
+				color: "rgb(0 0 0 / 0.18)"
+			}]
+		},
+		dark: {
+			sheet: [{
+				x: 0,
+				y: 12,
+				blur: 40,
+				spread: -12,
+				color: "rgb(0 0 0 / 0.5)"
+			}],
+			"sheet-inset": [{
+				x: 0,
+				y: 1,
+				blur: 1,
+				spread: 0,
+				color: "rgb(255 255 255 / 0.12)",
+				inset: true
+			}],
+			raised: [{
+				x: 0,
+				y: 4,
+				blur: 12,
+				spread: -2,
+				color: "rgb(0 0 0 / 0.5)"
+			}, {
+				x: 0,
+				y: 2,
+				blur: 4,
+				spread: -2,
+				color: "rgb(0 0 0 / 0.3)"
+			}],
+			floating: [{
+				x: 0,
+				y: 12,
+				blur: 24,
+				spread: -8,
+				color: "rgb(0 0 0 / 0.6)"
+			}, {
+				x: 0,
+				y: 4,
+				blur: 8,
+				spread: -4,
+				color: "rgb(0 0 0 / 0.4)"
+			}],
+			modal: [{
+				x: 0,
+				y: 40,
+				blur: 100,
+				spread: -30,
+				color: "rgb(0 0 0 / 0.7)"
+			}, {
+				x: 0,
+				y: 16,
+				blur: 40,
+				spread: -12,
+				color: "rgb(0 0 0 / 0.5)"
+			}]
+		}
+	},
+	modeStrings: {
+		light: {
+			"glass-edge": "rgb(255 255 255 / 0.9) rgb(200 200 210 / 0.3) rgb(200 200 210 / 0.25) rgb(255 255 255 / 0.7)",
+			"glass-edge-width": "1.5px",
+			"glass-highlight": "inset 0 1px 2px 0 rgb(255 255 255 / 0.8), inset 0 -1px 2px 0 rgb(0 0 0 / 0.05)",
+			"glass-fill": "linear-gradient(135deg, rgb(255 255 255 / 0.8) 0%, rgb(220 225 240 / 0.62) 40%, rgb(240 245 255 / 0.68) 70%, rgb(255 255 255 / 0.8) 100%)",
+			"glass-fill-raised": "linear-gradient(135deg, rgb(255 255 255 / 0.86) 0%, rgb(215 220 238 / 0.7) 40%, rgb(235 240 255 / 0.76) 70%, rgb(255 255 255 / 0.86) 100%)",
+			"mark-gradient": "linear-gradient(135deg, #38bdf8 0%, #6366f1 40%, #a855f7 100%)",
+			"wordmark-gradient": "linear-gradient(90deg, #0369a1, #4338ca, #7e22ce)"
+		},
+		dark: {
+			"glass-edge": "rgb(255 255 255 / 0.2) rgb(255 255 255 / 0.06) rgb(255 255 255 / 0.04) rgb(255 255 255 / 0.12)",
+			"glass-edge-width": "1.5px",
+			"glass-highlight": "inset 0 1px 1px 0 rgb(255 255 255 / 0.15)",
+			"glass-fill": "linear-gradient(140deg, rgb(30 41 59 / 0.7) 0%, rgb(15 23 42 / 0.6) 45%, rgb(20 30 50 / 0.55) 100%)",
+			"glass-fill-raised": "linear-gradient(140deg, rgb(30 41 59 / 0.78) 0%, rgb(15 23 42 / 0.68) 45%, rgb(20 30 50 / 0.62) 100%)",
+			"mark-gradient": "linear-gradient(135deg, #38bdf8 0%, #6366f1 40%, #a855f7 100%)",
+			"wordmark-gradient": "linear-gradient(90deg, #38bdf8, #818cf8, #a855f7)"
+		}
+	},
+	strings: {
+		"font-size-display": "30px",
+		"font-line-height-display": "36px",
+		"font-size-h1": "24px",
+		"font-line-height-h1": "32px",
+		"font-size-h2": "18px",
+		"font-line-height-h2": "28px",
+		"font-size-h3": "16px",
+		"font-line-height-h3": "24px",
+		"font-size-label": "14px",
+		"font-line-height-label": "20px",
+		"font-tracking-h1": "-0.025em"
+	},
 	fonts: {
 		display: [
 			"-apple-system",
@@ -4915,7 +5099,10 @@ const FORCED_COLORS_VARS = [
 	["--ty-shadow-floating", "none"],
 	["--ty-shadow-modal", "none"],
 	["--ty-glass-blur-sheet", "0px"],
-	["--ty-glass-blur-floating", "0px"]
+	["--ty-glass-blur-floating", "0px"],
+	["--ty-glass-edge", "CanvasText"],
+	["--ty-glass-fill", "Canvas"],
+	["--ty-glass-fill-raised", "Canvas"]
 ];
 /** Reduced transparency (and no backdrop-filter support): opaque surfaces, no blur, no ambient. */
 const OPAQUE_VARS = [
@@ -4925,6 +5112,8 @@ const OPAQUE_VARS = [
 	["--ty-glass-blur-sheet", "0px !important"],
 	["--ty-glass-blur-floating", "0px !important"],
 	["--ty-glass-saturate", "1 !important"],
+	["--ty-glass-fill", "var(--ty-surface-solid) !important"],
+	["--ty-glass-fill-raised", "var(--ty-surface-raised-solid) !important"],
 	["--ty-ambient-1", "transparent !important"],
 	["--ty-ambient-2", "transparent !important"]
 ];