origam 2.18.15 → 2.18.17

package/dist/src/components/DataTable/OrigamDataTableHeaderCell.vue

@@ -209,7 +209,7 @@ defineExpose({
 		}
 
 		&#{$this}--sortable {
-			cursor: var(--origam-data-table-sortable---cursor, var(--origam-data-table__sortable---cursor, pointer));
+			cursor: var(--origam-data-table-header-cell--sortable---cursor, pointer);
 
 			&:hover {
 				#{$this}__sort-icon {

package/dist/src/components/DataTable/OrigamDataTableRow.vue

@@ -262,7 +262,12 @@ defineExpose({
 				column-gap: 4px;
 				display: grid;
 				grid-template-columns: repeat(2, 1fr);
-				min-height: var(--origam-data-table-row--mobile__column-min-height, var(--origam-data-table-row--mobile__column, var(--origam-data-table__row---mobile-column-min-height, 52px)));
+				// C2 (#597) — l'echelon intermediaire
+				// `var(--origam-data-table-row--mobile__column, …)` a ete RETIRE :
+				// le premier echelon est declare dans les feuilles (52px), donc il
+				// resout toujours et l'intermediaire etait inatteignable. Mesure
+				// avant/apres : `min-height` = 52px de part et d'autre.
+				min-height: var(--origam-data-table-row--mobile__column-min-height, var(--origam-data-table__row---mobile-column-min-height, 52px));
 
 				&:not(:last-child) {
 					border-bottom: 0;

package/dist/src/components/DataTable/OrigamDataTableRows.vue

@@ -280,12 +280,12 @@ defineExpose({
 <style lang="scss" scoped>
 	.origam-data-table-rows {
 		&--no-data {
-			text-align: var(--origam-data-table-empty---text-align, var(--origam-data-table__empty---text-align, center));
-			color: var(--origam-data-table-rows--no-data---color, var(--origam-data-table__empty---color, var(--origam-color__text---secondary)));
+			text-align: var(--origam-data-table-rows--no-data---text-align, center);
+			color: var(--origam-data-table-rows--no-data---color, var(--origam-color__text---secondary));
 		}
 
 		&--loading {
-			color: var(--origam-data-table-rows--loading---color, var(--origam-data-table---loading-row-color, var(--origam-color__text---secondary)));
+			color: var(--origam-data-table-rows--loading---color, var(--origam-color__text---secondary));
 		}
 
 		&--skeleton {

package/dist/src/components/Grid/OrigamGrid.vue

@@ -216,6 +216,25 @@ defineExpose({
 		grid-auto-columns: var(--origam-grid---auto-columns, auto);
 		grid-auto-rows: var(--origam-grid---auto-rows, auto);
 		gap: var(--origam-grid---gap, var(--origam-grid---gap-md));
+		// ⛔ C2 (#597) — `--origam-grid---column-gap` et `---row-gap` restent NON
+		// DECLARES, a dessein, et ils sont les SEULS de ce bloc dans ce cas
+		// (mesure : les 8 autres sont declares dans light.css, ces deux-la a 0).
+		//
+		// La difference n'est pas la forme du repli, c'est QUI le repli designe :
+		//
+		//  - les 8 autres lisent LEUR PROPRE token, que `gridStyles` ci-dessus
+		//    ecrit en style INLINE sur l'element. La declaration de l'element bat
+		//    celle de `:root`, donc la prop continue d'agir et la declaration de
+		//    feuille est inoffensive.
+		//  - ces deux-ci lisent le token DU VOISIN en repli
+		//    (`var(--origam-grid---column-gap, var(--origam-grid---gap))`), et
+		//    c'est `--origam-grid---gap` — lui aussi ecrit inline par la prop
+		//    `gap` — qui porte la valeur utile. Les declarer a `:root` ferait
+		//    resoudre le premier echelon et la chaine NE CONSULTERAIT JAMAIS
+		//    `---gap` : la prop `gap` cesserait d'agir sur les deux gouttieres.
+		//
+		// Faux positif de la garde, qui compare des noms et non des chaines de
+		// repli.
 		column-gap: var(--origam-grid---column-gap, var(--origam-grid---gap));
 		row-gap: var(--origam-grid---row-gap, var(--origam-grid---gap));
 		align-items: var(--origam-grid---align-items, stretch);

package/dist/src/components/List/OrigamListItem.vue

@@ -685,6 +685,13 @@ defineExpose({
 		}
 
 		&__overlay {
+			// ⛔ C2 (#597, deja tranche en PR #586) — `--origam-list-item__overlay
+			// ---background-color` et `---transition-timing-function` restent NON
+			// DECLARES, a dessein : leur second echelon
+			// (`--origam-list__item---overlay-*`) est, lui, declare et type
+			// (`TTokenName`). Declarer le premier echelon a `:root` le figerait et
+			// MASQUERAIT DEFINITIVEMENT ce crochet de theming public. La garde
+			// compare des noms, pas des chaines de repli : faux positif, pas dette.
 			background-color: var(--origam-list-item__overlay---background-color, var(--origam-list__item---overlay-background-color, currentColor));
 			border-radius: var(--origam-list-item__overlay---border-radius, inherit);
 			opacity: var(--origam-list-item__overlay---opacity, var(--origam-list__item---overlay-opacity, 0));

package/dist/src/components/List/OrigamListSubheader.vue

@@ -133,6 +133,11 @@ defineExpose({
 		background: inherit;
 		color: var(--origam-list-subheader---color, var(--origam-color__text---secondary));
 		display: flex;
+		// ⛔ C2 (#597, deja tranche en PR #586) — `--origam-list-subheader
+		// ---font-size` reste NON DECLARE, a dessein : il est ECRIT PAR LE PARENT
+		// (`OrigamList.vue`, variante `nav`) et son second echelon
+		// `--origam-list__subheader---font-size` est declare et type. Le declarer a
+		// `:root` masquerait definitivement ce second crochet.
 		font-size: var(--origam-list-subheader---font-size, var(--origam-list__subheader---font-size, 0.875rem));
 		font-weight: var(--origam-list-subheader---font-weight, 400);
 		line-height: var(--origam-list-subheader---line-height, 1.375rem);

package/dist/src/composables/Commons/defaults.composable.d.ts

@@ -1,5 +1,56 @@
 import { type MaybeRefOrGetter, type Ref } from 'vue';
 import type { IDefault } from '../../interfaces/DefaultsProvider/defaults-provider.interface';
+/*********************************************************
+ * POURQUOI `useDefaults` RESTE, sans aucun appelant interne (#544)
+ *
+ * @description
+ * ⛔ TRANCHE PAR LA MESURE, 2026-09-29 — NE PAS ROUVRIR. #544 le classait
+ * « doublon du resolveur ADR-005, plus aucun appelant, a retirer ». Zero
+ * appelant est exact : les 40 derniers sont partis sous #363, et un grep dans
+ * `packages/ds/src` ne remonte que des mentions en commentaire. La conclusion,
+ * elle, est FAUSSE — ce n'est pas un doublon.
+ *
+ * @description
+ * `installThemePropsResolver` a une limitation STRUCTURELLE, documentee dans
+ * `theme-props-resolver.composable.ts` (section « Known limitation »). Ce n'est
+ * pas un oubli mais le sequencement de Vue : le hook ecrit dans `beforeCreate`,
+ * qui s'execute APRES le retour de `setup()`. Un prop lu UNE FOIS,
+ * SYNCHRONEMENT, au top level de `setup()` — hors `computed()`,
+ * `watchEffect()` ou fonction de rendu — capture donc la valeur d'AVANT le
+ * patch : le theme ne l'atteint jamais, et rien n'avertit.
+ *
+ * @description
+ * `useDefaults` n'a PAS cette lacune : le getter de son `computed` s'evalue a
+ * l'acces `.value`, a n'importe quel instant, la ref de defauts etant deja
+ * injectee au moment ou `setup()` tourne. C'est donc le SEUL echappatoire pour
+ * un prop qui doit etre lu tot — precisement le piege qui avait casse les props
+ * thematises de 16 composants a travers `useLink` et `useVModel`, jusqu'a ce
+ * que les deux soient rendus paresseux.
+ *
+ * @description
+ * S'y ajoute une surface publique reelle : `useDefaults` a une page de doc
+ * dediee (`packages/docs/composables/useDefaults.md`) et est cite par
+ * `docs/guide/composables.md` et `docs/composables/Commons.md`. C'est
+ * exactement le controle que #544 reclamait, et qui avait deja evite une
+ * suppression fautive sur `useCountdown` et `provideLocale`.
+ *
+ * @description
+ * ⚠️ La lacune est EPINGLEE PAR UNE PAIRE APPARIEE de tests, qui est la preuve
+ * executable que ce composable n'est pas redondant —
+ * `packages/tests/TU/origam/setup-level-prop-reads.spec.ts` :
+ *   it('WITHOUT useDefaults, a value read eagerly in setup() misses the theme')
+ *   it('WITH useDefaults, the same eager read sees the theme')
+ * La spec cite meme un cas reel du catalogue :
+ * `useClipboard({ feedbackDuration: props.feedbackDuration })` dans
+ * `OrigamClipboard`. `probe/preexisting-eager-reads.spec.ts` couvre le meme axe.
+ * Retirer `useDefaults` retire le temoin, donc la preuve.
+ *
+ * @description
+ * ⛔ Et le rayon d'action est large : 35 fichiers sous `packages/tests/TU`
+ * referencent `useDefaults` (mesure, 2026-09-29). Une note anterieure de session
+ * avancait « 3 specs, 23 tests » — chiffre de memoire, FAUX, et c'est exactement
+ * le genre d'affirmation non remesuree qui a fait ouvrir #544.
+ ********************************************************/
 /**
  * Component-side hook: resolve `props` against the closest DefaultsProvider.
  *

package/dist/src/composables/DataTable/headers.composable.d.ts

@@ -39,10 +39,10 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         sort?: TDataTableCompareFunction | undefined;
         filter?: import("../../types").TFilterFunction | undefined;
         align?: (import("../../enums").ALIGN.START | import("../../enums").ALIGN.END | import("../../enums").ALIGN.CENTER) | undefined;
-        mobile?: boolean | undefined;
         headerProps?: any;
         cellProps?: import("../../types").TDataTableHeaderCell | undefined;
         sortRaw?: TDataTableCompareFunction | undefined;
+        mobile?: boolean | undefined;
     }[][], IInternalDataTableHeader[][] | {
         key: string | null;
         value: import("../../types").TSelectItemKey | null;
@@ -62,10 +62,10 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         sort?: TDataTableCompareFunction | undefined;
         filter?: import("../../types").TFilterFunction | undefined;
         align?: (import("../../enums").ALIGN.START | import("../../enums").ALIGN.END | import("../../enums").ALIGN.CENTER) | undefined;
-        mobile?: boolean | undefined;
         headerProps?: any;
         cellProps?: import("../../types").TDataTableHeaderCell | undefined;
         sortRaw?: TDataTableCompareFunction | undefined;
+        mobile?: boolean | undefined;
     }[][]>;
     columns: Ref<{
         key: string | null;
@@ -86,10 +86,10 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         sort?: TDataTableCompareFunction | undefined;
         filter?: import("../../types").TFilterFunction | undefined;
         align?: (import("../../enums").ALIGN.START | import("../../enums").ALIGN.END | import("../../enums").ALIGN.CENTER) | undefined;
-        mobile?: boolean | undefined;
         headerProps?: any;
         cellProps?: import("../../types").TDataTableHeaderCell | undefined;
         sortRaw?: TDataTableCompareFunction | undefined;
+        mobile?: boolean | undefined;
     }[], IInternalDataTableHeader[] | {
         key: string | null;
         value: import("../../types").TSelectItemKey | null;
@@ -109,10 +109,10 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         sort?: TDataTableCompareFunction | undefined;
         filter?: import("../../types").TFilterFunction | undefined;
         align?: (import("../../enums").ALIGN.START | import("../../enums").ALIGN.END | import("../../enums").ALIGN.CENTER) | undefined;
-        mobile?: boolean | undefined;
         headerProps?: any;
         cellProps?: import("../../types").TDataTableHeaderCell | undefined;
         sortRaw?: TDataTableCompareFunction | undefined;
+        mobile?: boolean | undefined;
     }[]>;
     sortFunctions: Ref<Record<string, TDataTableCompareFunction>, Record<string, TDataTableCompareFunction>>;
     sortRawFunctions: Ref<Record<string, TDataTableCompareFunction>, Record<string, TDataTableCompareFunction>>;

package/dist/src/consts/EmptyState/empty-state.const.d.ts

@@ -1,6 +1,5 @@
-import type { TIntent } from '../../types/Commons/intent.type';
-import type { TEmptyStateAlign, TEmptyStatePreset, TEmptyStateSize } from '../../types/EmptyState/empty-state.type';
-import type { TIcon } from '../../types/Icon/icon.type';
+import type { IEmptyStatePresetConfig } from "../../interfaces";
+import type { TEmptyStateAlign, TEmptyStatePreset, TEmptyStateSize } from '../../types';
 /**
  * Closed list of valid `preset` values for `<OrigamEmptyState>`.
  * Exposed so stories / consumers can iterate the matrix without
@@ -15,17 +14,4 @@ export declare const EMPTY_STATE_SIZES: ReadonlyArray<TEmptyStateSize>;
  * Closed list of valid `align` values.
  */
 export declare const EMPTY_STATE_ALIGNS: ReadonlyArray<TEmptyStateAlign>;
-/**
- * Per-preset bundle: default icon + semantic intent.
- *
- * Consumers can override either side at the prop level (`icon` and
- * `iconColor`) without leaving the preset — the preset is the
- * "starting point", not a lock. The map is intentionally a plain
- * object so brand consumers can extend it through a defaults provider
- * in the future without touching the type.
- */
-export interface IEmptyStatePresetConfig {
-    icon: TIcon;
-    intent: TIntent;
-}
 export declare const EMPTY_STATE_PRESET_CONFIG: Record<TEmptyStatePreset, IEmptyStatePresetConfig>;

package/dist/src/interfaces/Commons/installed-theme.interface.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/src/interfaces/Commons/installed-theme.interface.d.ts

@@ -0,0 +1,26 @@
+import type { TModeResolved } from "../../types";
+/**
+ * Summary of one installed brand theme, derived from the `IOrigamTheme[]`
+ * objects passed to `createOrigam({ themes })`. Several `IOrigamTheme` objects
+ * may share the same `name` (one per mode); they are collapsed into a single
+ * entry whose `modes` lists every concrete mode that brand was installed for.
+ *
+ * Consumers (e.g. a theme switcher) map over this list instead of hard-coding
+ * the available brands — the list is the single source of truth for "what was
+ * installed".
+ */
+export interface IInstalledTheme {
+    /** Brand name, applied as `data-theme="<name>"`. */
+    name: string;
+    /** Concrete modes this brand ships (`'light'` / `'dark'`). */
+    modes: TModeResolved[];
+    /**
+     * Human-readable label for UI. Defaults to `name` when no installed object
+     * for this brand provided a `label`.
+     */
+    label: string;
+    /** Short description for UI, when an installed object provided one. */
+    description?: string;
+    /** CSS background for a brand swatch preview, when provided. */
+    swatch?: string;
+}

package/dist/src/interfaces/Commons/semantic-tree.interface.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/src/interfaces/Commons/semantic-tree.interface.d.ts

@@ -0,0 +1,30 @@
+import type { TSemanticLeaf } from "../../types";
+export interface ISemanticTree {
+    [key: string]: TSemanticLeaf | ISemanticTree;
+}
+/**
+ * Structured token-configuration bucket — THE way to author a theme's global
+ * design tokens (the JSON that generates every global `--origam-*` variable).
+ *
+ * Each key is a friendly token GROUP whose nested tree resolves to the matching
+ * `--origam-*` namespace through the shared naming grammar:
+ *   - `color`   → `--origam-color-*`   (`color.surface.default`, `color.text.primary`, `color.action.primary.bg`, …)
+ *   - `rounded` → `--origam-radius-*`  (`rounded.sm`, `rounded.md`, `rounded.lg`, …)
+ *   - `border`  → `--origam-border-*`  (`border.width.thin`, …)
+ *   - `typo`    → `--origam-font-*`    (`typo.family.sans`, `typo.size.md`, `typo.weight.bold`, …)
+ *   - `shadow`  → `--origam-shadow-*`  (`shadow.sm`, `shadow.md`, …)
+ *   - `spacing` → `--origam-space-*`   (`spacing.4`, `spacing.12`, …)
+ *   - `motion`  → `--origam-motion-*`  (`motion.duration.fast`, `motion.easing.standard`, …)
+ *
+ * A leaf value is free-form CSS for its slot (a color slot also accepts a
+ * gradient). Plain JSON — fully serialisable for Theme-Builder round-trips.
+ */
+export interface IThemeVars {
+    color?: ISemanticTree;
+    rounded?: ISemanticTree;
+    border?: ISemanticTree;
+    typo?: ISemanticTree;
+    shadow?: ISemanticTree;
+    spacing?: ISemanticTree;
+    motion?: ISemanticTree;
+}

package/dist/src/interfaces/Commons/theme.interface.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import type { IThemeVars } from '../../types/Commons/semantic-tree.type';
+import type { IThemeVars } from './semantic-tree.interface';
 import type { TThemeVars } from '../../types/Commons/token-tree.type';
 import type { TMode, TTheme } from '../../types/Commons/theme.type';
 import type { IDefault } from '../DefaultsProvider/defaults-provider.interface';

package/dist/src/interfaces/EmptyState/empty-state.interface.d.ts

@@ -3,6 +3,19 @@ import type { ITypographyProps } from '../Commons/typography.interface';
 import type { TEmptyStateAlign, TEmptyStatePreset, TEmptyStateSize } from '../../types/EmptyState/empty-state.type';
 import type { TIcon } from '../../types/Icon/icon.type';
 import type { TIntent } from '../../types/Commons/intent.type';
+/**
+ * Per-preset bundle: default icon + semantic intent.
+ *
+ * Consumers can override either side at the prop level (`icon` and
+ * `iconColor`) without leaving the preset — the preset is the
+ * "starting point", not a lock. The map is intentionally a plain
+ * object so brand consumers can extend it through a defaults provider
+ * in the future without touching the type.
+ */
+export interface IEmptyStatePresetConfig {
+    icon: TIcon;
+    intent: TIntent;
+}
 /**
  * Props for `<OrigamEmptyState>` — placeholder shown when a list, table
  * or collection has nothing to render.

package/dist/src/interfaces/index.cjs

@@ -784,6 +784,17 @@ Object.keys(_intersect).forEach(function (key) {
     }
   });
 });
+var _installedTheme = require("./Commons/installed-theme.interface.cjs");
+Object.keys(_installedTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _installedTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _installedTheme[key];
+    }
+  });
+});
 var _item = require("./Commons/item.interface.cjs");
 Object.keys(_item).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -993,6 +1004,17 @@ Object.keys(_scroll).forEach(function (key) {
     }
   });
 });
+var _semanticTree = require("./Commons/semantic-tree.interface.cjs");
+Object.keys(_semanticTree).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _semanticTree[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _semanticTree[key];
+    }
+  });
+});
 var _size = require("./Commons/size.interface.cjs");
 Object.keys(_size).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/src/interfaces/index.d.ts

@@ -69,6 +69,7 @@ export * from './Commons/group.interface';
 export * from './Commons/hotkey.interface';
 export * from './Commons/hover.interface';
 export * from './Commons/intersect.interface';
+export * from './Commons/installed-theme.interface';
 export * from './Commons/item.interface';
 export * from './Commons/justify.interface';
 export * from './Commons/layout.interface';
@@ -88,6 +89,7 @@ export * from './Commons/ripple.interface';
 export * from './Commons/rounded.interface';
 export * from './Commons/router.interface';
 export * from './Commons/scroll.interface';
+export * from './Commons/semantic-tree.interface';
 export * from './Commons/size.interface';
 export * from './Commons/stack.interface';
 export * from './Commons/state-effect.interface';

package/dist/src/interfaces/index.js

@@ -69,6 +69,7 @@ export * from "./Commons/group.interface.js";
 export * from "./Commons/hotkey.interface.js";
 export * from "./Commons/hover.interface.js";
 export * from "./Commons/intersect.interface.js";
+export * from "./Commons/installed-theme.interface.js";
 export * from "./Commons/item.interface.js";
 export * from "./Commons/justify.interface.js";
 export * from "./Commons/layout.interface.js";
@@ -88,6 +89,7 @@ export * from "./Commons/ripple.interface.js";
 export * from "./Commons/rounded.interface.js";
 export * from "./Commons/router.interface.js";
 export * from "./Commons/scroll.interface.js";
+export * from "./Commons/semantic-tree.interface.js";
 export * from "./Commons/size.interface.js";
 export * from "./Commons/stack.interface.js";
 export * from "./Commons/state-effect.interface.js";

package/dist/src/types/Commons/installed-theme.type.d.ts

@@ -1,31 +1,6 @@
-import type { TModeResolved } from './theme.type';
-/**
- * Summary of one installed brand theme, derived from the `IOrigamTheme[]`
- * objects passed to `createOrigam({ themes })`. Several `IOrigamTheme` objects
- * may share the same `name` (one per mode); they are collapsed into a single
- * entry whose `modes` lists every concrete mode that brand was installed for.
- *
- * Consumers (e.g. a theme switcher) map over this list instead of hard-coding
- * the available brands — the list is the single source of truth for "what was
- * installed".
- */
-export interface TInstalledTheme {
-    /** Brand name, applied as `data-theme="<name>"`. */
-    name: string;
-    /** Concrete modes this brand ships (`'light'` / `'dark'`). */
-    modes: TModeResolved[];
-    /**
-     * Human-readable label for UI. Defaults to `name` when no installed object
-     * for this brand provided a `label`.
-     */
-    label: string;
-    /** Short description for UI, when an installed object provided one. */
-    description?: string;
-    /** CSS background for a brand swatch preview, when provided. */
-    swatch?: string;
-}
+import type { IInstalledTheme } from "../../interfaces/Commons/installed-theme.interface";
 /**
  * The full installed-themes list provided by `createOrigam` and read back via
  * `useInstalledThemes()`.
  */
-export type TInstalledThemes = TInstalledTheme[];
+export type TInstalledThemes = IInstalledTheme[];

package/dist/src/types/Commons/semantic-tree.type.d.ts

@@ -17,32 +17,3 @@
  * round-trip it without losing fidelity.
  */
 export type TSemanticLeaf = string | number;
-export interface ISemanticTree {
-    [key: string]: TSemanticLeaf | ISemanticTree;
-}
-/**
- * Structured token-configuration bucket — THE way to author a theme's global
- * design tokens (the JSON that generates every global `--origam-*` variable).
- *
- * Each key is a friendly token GROUP whose nested tree resolves to the matching
- * `--origam-*` namespace through the shared naming grammar:
- *   - `color`   → `--origam-color-*`   (`color.surface.default`, `color.text.primary`, `color.action.primary.bg`, …)
- *   - `rounded` → `--origam-radius-*`  (`rounded.sm`, `rounded.md`, `rounded.lg`, …)
- *   - `border`  → `--origam-border-*`  (`border.width.thin`, …)
- *   - `typo`    → `--origam-font-*`    (`typo.family.sans`, `typo.size.md`, `typo.weight.bold`, …)
- *   - `shadow`  → `--origam-shadow-*`  (`shadow.sm`, `shadow.md`, …)
- *   - `spacing` → `--origam-space-*`   (`spacing.4`, `spacing.12`, …)
- *   - `motion`  → `--origam-motion-*`  (`motion.duration.fast`, `motion.easing.standard`, …)
- *
- * A leaf value is free-form CSS for its slot (a color slot also accepts a
- * gradient). Plain JSON — fully serialisable for Theme-Builder round-trips.
- */
-export interface IThemeVars {
-    color?: ISemanticTree;
-    rounded?: ISemanticTree;
-    border?: ISemanticTree;
-    typo?: ISemanticTree;
-    shadow?: ISemanticTree;
-    spacing?: ISemanticTree;
-    motion?: ISemanticTree;
-}