biz-a-cli 2.3.80-15339 → 2.3.80-15359

package/bin/app.js

@@ -20,6 +20,10 @@ import {
 import { prepareScript, encryptScript } from "./script.js";
 import { spawn } from "node:child_process";
 import { newMigration, runMigrations } from "./migrate.js";
+import {
+	validateThemeSource,
+	APPLICATION_THEME_NAME,
+} from "../engine/domain/themeConfig.js";
 import {
 	APP_CONFIG_NAME,
 	buildEnsureConfigTableSql,
@@ -367,6 +371,9 @@ const getFileList = ({ workingDir = process.cwd(), files = null } = {}) => {
    ============================================================================ */
 
 const APPLICATION_CONFIG_FILE = "application.js";
+/* Doc 6 §8.1 — the application theme source. JSON, because it is DATA that reaches the browser
+   via sys$config and must never be evaluated (AC 26). */
+const THEME_CONFIG_FILE = "theme.json";
 /* Parity with the admin editor (appConfig.component.ts executeBlockBodyLimit): the DataSnap
    `block` call body must stay under 64KB, so an oversized config is upserted in chunks. */
 const EXECUTE_BLOCK_BODY_LIMIT = 2 ** 16;
@@ -548,6 +555,41 @@ const collectConfigUploads = ({ workingDir, fileNames = [], include = [] }) => {
 		application = { name: APP_CONFIG_NAME, version, content };
 	}
 
+	/*
+	 * Doc 6 §8.1 — the application's theme, published beside its config.
+	 *
+	 * ⚠️ A SEPARATE FILE, AND JSON, for the reason §8.1 points 1-2 give: this ends up in
+	 * `sys$config` and is read by every user's browser, so if it were executable anyone who can
+	 * write `sys$config` could run code in all of them. It is parsed, never evaluated (AC 26).
+	 *
+	 * ⚠️ Validated at PUBLISH, not at runtime. A mistyped token name is silent at runtime — the
+	 * token is simply never applied — and the author is left believing the theme works. Refusing the
+	 * publish puts the error where somebody can act on it (§8.1 point 4).
+	 */
+	let theme = null;
+	const themeFile = fileNames.find(
+		(f) => path.basename(String(f)).toLowerCase() === THEME_CONFIG_FILE,
+	);
+	if (themeFile) {
+		const { theme: parsedTheme, problems: themeProblems } = validateThemeSource(
+			readConfig(themeFile),
+		);
+		if (themeProblems.length) {
+			problems.push(
+				...themeProblems.map((m) => `${path.basename(String(themeFile))}: ${m}`),
+			);
+		} else {
+			/* Versioned with the application: the theme belongs to that release of the app, and a
+			   rollback of one without the other would pair a config with a theme it never shipped
+			   with. */
+			theme = {
+				name: APPLICATION_THEME_NAME,
+				version: application?.version ?? "1.0.0",
+				content: JSON.stringify(parsedTheme),
+			};
+		}
+	}
+
 	const domains = [];
 	/* ⚠️ Kept because the tenancy rule is CROSS-FILE: a scoped entity in one domain may be given its
 	   foreign key by a relationship in another, and `buildTenancyMap` folds them all together at
@@ -610,7 +652,7 @@ const collectConfigUploads = ({ workingDir, fileNames = [], include = [] }) => {
 		);
 	}
 
-	return { application, domains };
+	return { application, domains, theme };
 };
 
 /* Upsert the configs, then optionally run the same publish the admin button does. Publish order
@@ -693,7 +735,7 @@ async function uploadConfigs({
 		serverLink: resolveServerLink(serverMode),
 	});
 
-	const { application, domains } = collectConfigUploads({
+	const { application, domains, theme } = collectConfigUploads({
 		workingDir,
 		fileNames,
 		include,
@@ -752,6 +794,12 @@ async function uploadConfigs({
 			content: application.content,
 		});
 	}
+
+	/* Doc 6 §8.1 — level 2. ⚠️ A DIFFERENT KEY from the company's own theme (level 3): sharing one
+	   would mean publishing an app silently overwrote a company's branding. */
+	if (theme) {
+		await saveOne(theme);
+	}
 	for (const domain of domains) {
 		await saveOne(domain);
 	}

package/bin/hubEvent.js

@@ -24,6 +24,19 @@ import { createSessionStore } from "../engine/orm/sessionStore.js";
 import { resolveUserTenancy } from "../engine/orm/tenantResolution.js";
 import { buildUserTenantSql } from "../engine/orm/finaAuth.js";
 import { authorizeRequest, principalForCliScript } from "../security/internalPrincipal.js";
+import {
+	readUserPreferences,
+	writeUserPreferences,
+} from "../engine/orm/userPreferences.js";
+import {
+	readCompanyTheme,
+	writeCompanyTheme,
+} from "../engine/orm/companyTheme.js";
+import {
+	readCompanyLogo,
+	writeCompanyLogo,
+	clearCompanyLogo,
+} from "../engine/orm/companyLogo.js";
 import {
 	execPostgres,
 	execPostgresStatements,
@@ -508,6 +521,130 @@ const handleCliCommand = async (data, cb, argv) => {
 					),
 				);
 				break;
+			/*
+			 * Doc 6 §4.2 / AC 19 — read or merge the SIGNED-IN USER'S preferences.
+			 *
+			 * ⚠️ A DEDICATED COMMAND, NOT `engine`. The `engine` case below runs `runTrusted` with no
+			 * principal at all — by design, because those are administrator operations. Routing user
+			 * preferences through it would take the user id from `data.payload`, i.e. from the
+			 * browser, and a user could then write somebody else's.
+			 *
+			 * ⚠️ AND NOT `runcliscript` EITHER. That resolves an app-authored script by name; a
+			 * platform operation would have to be seeded into SYS$CLI_SCRIPT per tenant and re-seeded
+			 * to change.
+			 *
+			 * ⚠️ REQUIRED, not observe-shaped. `runcliscript` deliberately lets a null principal
+			 * through so an un-rebuilt client still works — the script decides. Here there is nothing
+			 * to decide: without an identity there is no row to read or write, so userPreferences.js
+			 * throws and the client falls back to its localStorage mirror (§4.2 point 2b).
+			 */
+			case "userpreferences": {
+				const prefPrincipal = principalForCliScript(data.headers, {
+					mode: argv["principalMode"] || "observe",
+				});
+				const prefExec = (sql) => execPostgres(sql, argv["dbindex"]);
+				const prefs =
+					data.action === "write"
+						? await writeUserPreferences({
+								exec: prefExec,
+								principal: prefPrincipal,
+								patch: data.patch,
+							})
+						: await readUserPreferences({
+								exec: prefExec,
+								principal: prefPrincipal,
+							});
+				cb(null, { success: true, data: prefs });
+				break;
+			}
+			/*
+			 * Doc 6 §7.1.1 step 7 + §13 point 3 — save the COMPANY theme, with its audit trail.
+			 *
+			 * ⚠️ THIS EXISTS SO THE AUDIT TRAIL CAN NAME SOMEBODY. The client could write SYS$CONFIG
+			 * directly through executeBlock, as the App Config screen does — but then the audit row
+			 * would be authored by the thing being audited, with the user id read out of
+			 * localStorage. principalForCliScript is what makes "siapa" mean anything.
+			 *
+			 * ⚠️ Validation (token names, ranges, WCAG AA) happens inside writeCompanyTheme via the
+			 * SAME validateThemeSource that gates an application theme at publish — §7.1's one rule
+			 * for Jalur A and Jalur B.
+			 */
+			case "companytheme": {
+				const themePrincipal = principalForCliScript(data.headers, {
+					mode: argv["principalMode"] || "observe",
+				});
+				const themeExec = (sql) => execPostgres(sql, argv["dbindex"]);
+				if (data.action === "write") {
+					const saved = await writeCompanyTheme({
+						exec: themeExec,
+						execStatements: (statements) =>
+							execPostgresStatements(statements, argv["dbindex"]),
+						principal: themePrincipal,
+						theme: data.theme,
+					});
+					/*
+					 * ⚠️ A REFUSAL IS NOT AN ERROR. `problems` is what the settings screen shows the
+					 * admin so they can fix the colour — reporting it as a failed call would lose
+					 * the explanation and leave them with "save failed".
+					 */
+					cb(null, {
+						success: saved.ok,
+						problems: saved.problems,
+						data: saved.theme,
+					});
+				} else {
+					cb(null, {
+						success: true,
+						data: await readCompanyTheme({ exec: themeExec }),
+					});
+				}
+				break;
+			}
+			/*
+			 * Doc 6 §8.2 — the company logo, under its OWN sys$config key.
+			 *
+			 * ⚠️ A SEPARATE COMMAND FROM THE THEME, deliberately. §8.2 point 3 keeps the image out
+			 * of the theme JSON because the theme is read on every application start and a logo is
+			 * megabytes; folding it into `companytheme` would undo that at the transport layer even
+			 * if the storage stayed split.
+			 */
+			case "companylogo": {
+				const logoPrincipal = principalForCliScript(data.headers, {
+					mode: argv["principalMode"] || "observe",
+				});
+				const logoExec = (sql) => execPostgres(sql, argv["dbindex"]);
+				const logoStatements = (statements) =>
+					execPostgresStatements(statements, argv["dbindex"]);
+
+				if (data.action === "write") {
+					const saved = await writeCompanyLogo({
+						exec: logoExec,
+						execStatements: logoStatements,
+						principal: logoPrincipal,
+						dataUrl: data.dataUrl,
+					});
+					/* ⚠️ A refusal is NOT an error: `problems` is what the settings screen shows the
+					   admin so they can pick a different file. */
+					cb(null, {
+						success: saved.ok,
+						problems: saved.problems,
+						data: saved.logo ?? null,
+					});
+				} else if (data.action === "clear") {
+					const cleared = await clearCompanyLogo({
+						exec: logoExec,
+						execStatements: logoStatements,
+						principal: logoPrincipal,
+					});
+					cb(null, { success: cleared.ok, problems: cleared.problems, data: null });
+				} else {
+					cb(null, {
+						success: true,
+						data: await readCompanyLogo({ exec: logoExec }),
+					});
+				}
+				break;
+			}
 			case "runextcliscript": {
 				// External-access op invoker — enforces the capability boundary (dispatch.js),
 				// unlike raw `runcliscript`. Safe to expose: no valid token -> UNAUTHENTICATED.

package/engine/domain/contrast.js

@@ -0,0 +1,224 @@
+/*
+ * Doc 6 §7 point 3 / §8.1 point 4 / AC 3 / AC 28 — WCAG AA contrast, checked at PUBLISH.
+ *
+ * ⚠️ AN ACCESSIBILITY FLOOR, NOT A PREFERENCE. Without it an application can publish a brand colour
+ * that renders its users' screens unreadable, into `sys$config`, for every browser of that company.
+ * §7 point 3 therefore BLOCKS the publish rather than warning.
+ *
+ * ⚠️⚠️ THIS IS THE SECOND IMPLEMENTATION OF ONE RULE. The client enforces the same check on save
+ * (`client/src/app/theme/contrast.ts`); the CLI cannot import TypeScript, so the maths is written
+ * twice. What is NOT written twice is the thing that would actually drift — the preset colour
+ * tables — which both sides read from one JSON file. The maths is fixed by WCAG and pinned on both
+ * sides by the same exact vectors (black on white is 21:1; #767676 on white passes, #777777 does
+ * not), so a divergence fails a test rather than shipping.
+ */
+
+/* WCAG 2.1: 4.5:1 for normal text, 3:1 for large text and component boundaries. */
+export const AA_NORMAL = 4.5;
+export const AA_LARGE = 3;
+
+const parseHex = (hex) => {
+	const s = String(hex ?? "").trim().replace(/^#/, "");
+	const full =
+		s.length === 3
+			? s
+					.split("")
+					.map((c) => c + c)
+					.join("")
+			: s;
+	if (!/^[0-9a-fA-F]{6}$/.test(full)) return null;
+	const n = parseInt(full, 16);
+	return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+};
+
+const toHex = (r, g, b) =>
+	"#" +
+	[r, g, b]
+		.map((c) => Math.max(0, Math.min(255, Math.round(c))).toString(16).padStart(2, "0"))
+		.join("")
+		.toUpperCase();
+
+/* WCAG relative luminance: channels linearised, then weighted for human sensitivity to green. */
+const luminance = (rgb) => {
+	const [r, g, b] = rgb.map((c) => {
+		const s = c / 255;
+		return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+	});
+	return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+
+/**
+ * WCAG contrast ratio, 1 to 21.
+ *
+ * ⚠️ An unparseable colour scores 0, i.e. FAILING. Treating it as passing would let a typo, or a
+ * format the renderer cannot emit, straight through the one check that was meant to stop it.
+ */
+export const contrastRatio = (a, b) => {
+	const ca = parseHex(a);
+	const cb = parseHex(b);
+	if (!ca || !cb) return 0;
+	const la = luminance(ca);
+	const lb = luminance(cb);
+	const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+	return (hi + 0.05) / (lo + 0.05);
+};
+
+export const meetsAA = (foreground, background, { large = false } = {}) =>
+	contrastRatio(foreground, background) >= (large ? AA_LARGE : AA_NORMAL);
+
+/* --- HSL, used only to move lightness while holding the hue ------------- */
+
+const toHsl = (rgb) => {
+	const [r, g, b] = rgb.map((c) => c / 255);
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const l = (max + min) / 2;
+	if (max === min) return [0, 0, l];
+	const d = max - min;
+	const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+	const h =
+		max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+	return [h / 6, s, l];
+};
+
+const hslToRgb = (h, s, l) => {
+	if (s === 0) return [l * 255, l * 255, l * 255];
+	const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+	const p = 2 * l - q;
+	const channel = (t) => {
+		let x = t;
+		if (x < 0) x += 1;
+		if (x > 1) x -= 1;
+		if (x < 1 / 6) return p + (q - p) * 6 * x;
+		if (x < 1 / 2) return q;
+		if (x < 2 / 3) return p + (q - p) * (2 / 3 - x) * 6;
+		return p;
+	};
+	return [channel(h + 1 / 3) * 255, channel(h) * 255, channel(h - 1 / 3) * 255];
+};
+
+/**
+ * AC 28 / §7.1.1 point 6 — the nearest colour of the SAME HUE that passes.
+ *
+ * ⚠️ HUE IS HELD FIXED. A suggestion that changes the brand colour is not one anybody will accept,
+ * so only lightness moves, and by the smallest step that passes.
+ *
+ * ⚠️ Returns null rather than a near-miss. A suggestion that still fails would quietly defeat the
+ * check it is attached to.
+ */
+export const nearestPassing = (foreground, background, { large = false, maxSteps = 100 } = {}) => {
+	const rgb = parseHex(foreground);
+	if (!rgb) return null;
+	if (meetsAA(foreground, background, { large })) return String(foreground);
+
+	const [h, s, l] = toHsl(rgb);
+	const step = 1 / maxSteps;
+
+	/* Walk outwards from the original lightness, darker and lighter alternately, so the FIRST hit is
+	   the smallest visual change in either direction. */
+	for (let i = 1; i <= maxSteps; i++) {
+		for (const candidateL of [l - i * step, l + i * step]) {
+			if (candidateL < 0 || candidateL > 1) continue;
+			const [r, g, b] = hslToRgb(h, s, candidateL);
+			const hex = toHex(r, g, b);
+			if (meetsAA(hex, background, { large })) return hex;
+		}
+	}
+	return null;
+};
+
+/* --- whole-theme checking ---------------------------------------------- */
+
+/*
+ * The pairs the app ACTUALLY RENDERS — text on its surface, a label on its brand colour.
+ *
+ * ⚠️ Checking every combination of twelve tokens would report failures for pairs nothing puts
+ * together, and a check that cries wolf is one people learn to skip.
+ *
+ * ⚠️ `outlineColor` IS DELIBERATELY ABSENT, and the reason is a gap in Doc 6's vocabulary. WCAG
+ * 1.4.11 wants 3:1 for a boundary that IDENTIFIES a control, but Material has two roles here —
+ * `outline` (meaningful) and `outline-variant` (decorative divider) — with very different bars, and
+ * §5 collapses both into one token. All three presets chose a pale value for it (~1.6:1 on white),
+ * i.e. they mean the decorative role; enforcing 3:1 would refuse every shipped preset. The cost is
+ * that a boundary which really does identify a control goes unchecked; the fix is a second
+ * `outlineVariantColor` token, which is a Doc 6 change, not a code one.
+ *
+ * ⚠️ Kept identical to the client's `CHECKED_PAIRS` on purpose — one rule for Jalur A and Jalur B
+ * (§7.1) means a theme accepted on save must not be refused at publish, or vice versa.
+ */
+export const CHECKED_PAIRS = [
+	["onSurfaceColor", "surfaceColor", false],
+	["onSurfaceColor", "surfaceContainerColor", false],
+	["onPrimaryColor", "primaryColor", false],
+	["primaryColor", "surfaceColor", false],
+	["errorColor", "surfaceColor", false],
+	["warningColor", "surfaceColor", false],
+	["successColor", "surfaceColor", false],
+	["infoColor", "surfaceColor", false],
+];
+
+const forScheme = (value, scheme) => {
+	if (value == null) return null;
+	if (typeof value === "string") return value;
+	return value[scheme] ?? null;
+};
+
+/**
+ * Check a theme's rendered colour pairs in BOTH schemes.
+ *
+ * ⚠️ BOTH, ALWAYS. A theme readable in light and unreadable in dark still makes somebody's screen
+ * unusable — and dark is exactly where a hand-picked brand colour tends to fail, because it was
+ * chosen against white.
+ *
+ * @param {{tokens?: object}} theme  a theme whose tokens are already RESOLVED against its preset.
+ */
+export const checkThemeContrast = (theme) => {
+	const tokens = theme?.tokens;
+	const failures = [];
+	if (!tokens) return { failures };
+
+	for (const scheme of ["light", "dark"]) {
+		for (const [fgKey, bgKey, large] of CHECKED_PAIRS) {
+			const fg = forScheme(tokens[fgKey], scheme);
+			const bg = forScheme(tokens[bgKey], scheme);
+			if (!fg || !bg) continue;
+
+			const required = large ? AA_LARGE : AA_NORMAL;
+			const ratio = contrastRatio(fg, bg);
+			if (ratio < required) {
+				failures.push({
+					pair: fgKey + " on " + bgKey,
+					scheme,
+					ratio,
+					required,
+					suggestion: nearestPassing(fg, bg, { large }),
+				});
+			}
+		}
+	}
+	return { failures };
+};
+
+/**
+ * Render a failure as a line an author can act on.
+ *
+ * ⚠️ NAMES THE PAIR, THE SCHEME, THE MEASURED RATIO AND A WAY FORWARD. "Contrast too low" tells
+ * somebody their publish failed without telling them which of twelve colours to change, in which
+ * scheme, or what to change it to — which is how a blocking check becomes a thing people work
+ * around instead of fixing.
+ */
+export const describeFailure = (failure) => {
+	const head =
+		"theme contrast: " +
+		failure.pair +
+		" in " +
+		failure.scheme +
+		" scheme is " +
+		failure.ratio.toFixed(2) +
+		":1, below WCAG AA's " +
+		failure.required +
+		":1.";
+	return failure.suggestion
+		? head + " Try " + failure.suggestion + " (same hue, adjusted lightness)."
+		: head + " No colour of that hue passes here — pick a different tone.";
+};

package/engine/domain/syncThemePresets.js

@@ -0,0 +1,33 @@
+/*
+ * Regenerate `engine/domain/theme-presets.json` from the canonical shared table.
+ *
+ *     node engine/domain/syncThemePresets.js
+ *
+ * ⚠️ WHY A MIRROR AT ALL. `shared/domain/theme-presets.json` is the one table both codebases read —
+ * the client imports it directly, and Doc 6 §7.1 asks for exactly that single registry. But
+ * `biz-a-cli` is a PUBLISHED npm package, and npm's `files[]` cannot reach a parent directory, so a
+ * published install has no `../shared`. The mirror is what ships.
+ *
+ * ⚠️ NEVER HAND-EDIT THE MIRROR. `tests/theme-contrast.test.js` compares the two byte for byte and
+ * fails the moment they differ — a silently stale mirror would mean the publish-time contrast check
+ * (§8.1 point 4) judged themes against colours the app no longer uses.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const shared = path.join(here, "..", "..", "..", "shared", "domain", "theme-presets.json");
+const mirror = path.join(here, "theme-presets.json");
+
+if (!fs.existsSync(shared)) {
+	console.error(
+		"cannot sync: the canonical table is missing at " +
+			shared +
+			"\nRun this from a full checkout, not a published install.",
+	);
+	process.exit(1);
+}
+
+fs.copyFileSync(shared, mirror);
+console.log("theme presets synced: " + shared + " -> " + mirror);

package/engine/domain/theme-presets.json

@@ -0,0 +1,190 @@
+{
+	"presets": [
+		{
+			"preset": "klasik",
+			"version": 1,
+			"name": "Klasik",
+			"colorScheme": "light",
+			"density": 0,
+			"tokens": {
+				"primaryColor": {
+					"light": "#1B5FCB",
+					"dark": "#A9C7FF"
+				},
+				"onPrimaryColor": {
+					"light": "#FFFFFF",
+					"dark": "#08306B"
+				},
+				"secondaryColor": {
+					"light": "#4A6180",
+					"dark": "#B9C6DC"
+				},
+				"tertiaryColor": {
+					"light": "#0E7C86",
+					"dark": "#6FD3DC"
+				},
+				"surfaceColor": {
+					"light": "#FFFFFF",
+					"dark": "#111419"
+				},
+				"surfaceContainerColor": {
+					"light": "#F1F4F9",
+					"dark": "#1A1F27"
+				},
+				"onSurfaceColor": {
+					"light": "#1A1D23",
+					"dark": "#E4E8EF"
+				},
+				"outlineColor": {
+					"light": "#C5CBD6",
+					"dark": "#454C59"
+				},
+				"errorColor": {
+					"light": "#C0283B",
+					"dark": "#FF9AA4"
+				},
+				"warningColor": {
+					"light": "#B25E00",
+					"dark": "#F5B067"
+				},
+				"successColor": {
+					"light": "#16794A",
+					"dark": "#7CD8A6"
+				},
+				"infoColor": {
+					"light": "#0E6FBF",
+					"dark": "#8FC6F5"
+				},
+				"fontFamily": "Inter, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+				"fontScale": "normal",
+				"borderRadius": "8px",
+				"spacingScale": "1",
+				"elevation": "raised"
+			}
+		},
+		{
+			"preset": "teduh",
+			"version": 1,
+			"name": "Teduh",
+			"colorScheme": "light",
+			"density": 0,
+			"tokens": {
+				"primaryColor": {
+					"light": "#1F6F55",
+					"dark": "#86D6B4"
+				},
+				"onPrimaryColor": {
+					"light": "#FFFFFF",
+					"dark": "#00382A"
+				},
+				"secondaryColor": {
+					"light": "#5B6B62",
+					"dark": "#BCCCC2"
+				},
+				"tertiaryColor": {
+					"light": "#9C5F33",
+					"dark": "#F0B489"
+				},
+				"surfaceColor": {
+					"light": "#FCFBF8",
+					"dark": "#131512"
+				},
+				"surfaceContainerColor": {
+					"light": "#F1EFE9",
+					"dark": "#1C1F1C"
+				},
+				"onSurfaceColor": {
+					"light": "#1D211E",
+					"dark": "#E3E6E0"
+				},
+				"outlineColor": {
+					"light": "#C9C7BD",
+					"dark": "#474B47"
+				},
+				"errorColor": {
+					"light": "#B3261E",
+					"dark": "#FFA39B"
+				},
+				"warningColor": {
+					"light": "#A16700",
+					"dark": "#EDB759"
+				},
+				"successColor": {
+					"light": "#2E7D4F",
+					"dark": "#8AD3A5"
+				},
+				"infoColor": {
+					"light": "#2C6E9B",
+					"dark": "#96C6E8"
+				},
+				"fontFamily": "'Plus Jakarta Sans', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+				"fontScale": "normal",
+				"borderRadius": "12px",
+				"spacingScale": "1",
+				"elevation": "flat"
+			}
+		},
+		{
+			"preset": "tegas",
+			"version": 1,
+			"name": "Tegas",
+			"colorScheme": "light",
+			"density": -1,
+			"tokens": {
+				"primaryColor": {
+					"light": "#B45309",
+					"dark": "#FFB454"
+				},
+				"onPrimaryColor": {
+					"light": "#FFFFFF",
+					"dark": "#452300"
+				},
+				"secondaryColor": {
+					"light": "#3F4550",
+					"dark": "#C3CAD6"
+				},
+				"tertiaryColor": {
+					"light": "#2F6F8F",
+					"dark": "#8FC9E5"
+				},
+				"surfaceColor": {
+					"light": "#FFFFFF",
+					"dark": "#0F1114"
+				},
+				"surfaceContainerColor": {
+					"light": "#F2F3F5",
+					"dark": "#181B20"
+				},
+				"onSurfaceColor": {
+					"light": "#14171C",
+					"dark": "#E8EAEE"
+				},
+				"outlineColor": {
+					"light": "#B9BEC7",
+					"dark": "#3C424B"
+				},
+				"errorColor": {
+					"light": "#C0283B",
+					"dark": "#FF9AA4"
+				},
+				"warningColor": {
+					"light": "#B25E00",
+					"dark": "#F5B067"
+				},
+				"successColor": {
+					"light": "#16794A",
+					"dark": "#7CD8A6"
+				},
+				"infoColor": {
+					"light": "#0E6FBF",
+					"dark": "#8FC6F5"
+				},
+				"fontFamily": "Inter, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+				"fontScale": "normal",
+				"borderRadius": "6px",
+				"spacingScale": "1",
+				"elevation": "flat"
+			}
+		}
+	]
+}