@udixio/theme 2.1.10 → 2.1.12

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 2.1.12 (2026-01-30)
+
+### 🚀 Features
+
+- **theme:** improve tone logic and adjust background calculations ([6eda481](https://github.com/Udixio/UI/commit/6eda481))
+- **theme:** add `createMinContrastToneAdjuster` util for dynamic tone adjustments ([d963806](https://github.com/Udixio/UI/commit/d963806))
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
+## 2.1.11 (2026-01-18)
+
+This was a version bump only for @udixio/theme to align it with other projects, there were no code changes.
+
 ## 2.1.10 (2026-01-18)
 
 This was a version bump only for @udixio/theme to align it with other projects, there were no code changes.

package/dist/bin.cjs

@@ -2,7 +2,7 @@
 const commander = require("commander");
 const chokidar = require("chokidar");
 const chalk = require("chalk");
-const loadFromPath = require("./load-from-path-BCkiZx6_.cjs");
+const loadFromPath = require("./load-from-path-DVvlFI1M.cjs");
 const program = new commander.Command();
 async function runOnce(configPath) {
   try {

package/dist/bin.js

@@ -1,7 +1,7 @@
 import { Command } from "commander";
 import chokidar from "chokidar";
 import chalk from "chalk";
-import { l as loadFromPath } from "./load-from-path-C4axFso4.js";
+import { l as loadFromPath } from "./load-from-path-CHmj8u_v.js";
 const program = new Command();
 async function runOnce(configPath) {
   try {

package/dist/browser.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const loader = require("./loader-1Pp2rd0P.cjs");
-const font_plugin = require("./font.plugin-B0SKfA9r.cjs");
+const loader = require("./loader-BZta4ulw.cjs");
+const font_plugin = require("./font.plugin-B6HEs4Om.cjs");
 exports.API = loader.API;
 exports.AppContainer = loader.AppContainer;
 exports.AppModule = loader.AppModule;

package/dist/browser.js

@@ -1,5 +1,5 @@
-import { A, a, b, h, i, C, j, k, e, f, o, n, q, D, P, r, s, v, u, V, z, c, d, m, F, g, w, x, l, p, G, B, t, y, E } from "./loader--tJzL1CC.js";
-import { F as F2, b as b2, P as P2, a as a2, d as d2 } from "./font.plugin-BReTQTWQ.js";
+import { A, a, b, h, i, C, j, k, e, f, o, n, q, D, P, r, s, v, u, V, z, c, d, m, F, g, w, x, l, p, G, B, t, y, E } from "./loader-DVtdg4Xh.js";
+import { F as F2, b as b2, P as P2, a as a2, d as d2 } from "./font.plugin-BorVbapj.js";
 export {
   A as API,
   a as AppContainer,

package/dist/{font.plugin-B0SKfA9r.cjs → font.plugin-B6HEs4Om.cjs}

@@ -2,7 +2,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-require("./loader-1Pp2rd0P.cjs");
+require("./loader-BZta4ulw.cjs");
 class PluginAbstract {
   constructor(options) {
     __publicField(this, "options");

package/dist/{font.plugin-BReTQTWQ.js → font.plugin-BorVbapj.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import "./loader--tJzL1CC.js";
+import "./loader-DVtdg4Xh.js";
 class PluginAbstract {
   constructor(options) {
     __publicField(this, "options");

package/dist/{load-from-path-C4axFso4.js → load-from-path-CHmj8u_v.js}

@@ -1,4 +1,4 @@
-import { p as loader } from "./loader--tJzL1CC.js";
+import { p as loader } from "./loader-DVtdg4Xh.js";
 import * as fs from "node:fs";
 async function resolveConfig(configPath = "./theme.config") {
   const { createJiti } = await import("jiti");

package/dist/{load-from-path-BCkiZx6_.cjs → load-from-path-DVvlFI1M.cjs}

@@ -21,7 +21,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
-const loader = require("./loader-1Pp2rd0P.cjs");
+const loader = require("./loader-BZta4ulw.cjs");
 const fs = require("node:fs");
 var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
 function _interopNamespaceDefault(e) {
@@ -44,7 +44,7 @@ const fs__namespace = /* @__PURE__ */ _interopNamespaceDefault(fs);
 async function resolveConfig(configPath = "./theme.config") {
   const { createJiti } = await import("jiti");
   const { resolve } = await import("pathe");
-  const jiti = createJiti(typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("load-from-path-BCkiZx6_.cjs", document.baseURI).href, {
+  const jiti = createJiti(typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("load-from-path-DVvlFI1M.cjs", document.baseURI).href, {
     debug: process.env.NODE_ENV === "development",
     fsCache: true,
     interopDefault: true

package/dist/{loader-1Pp2rd0P.cjs → loader-BZta4ulw.cjs}

@@ -3090,10 +3090,27 @@ const surfaceContainerTone = (layer, api) => {
 };
 const highestSurface = (context, colorService) => {
   if (colorService instanceof ColorApi) {
-    return colorService.get("surface");
+    return context.isDark ? colorService.get("surfaceBright") : colorService.get("surfaceDim");
   } else {
-    return colorService.get("surface");
+    return context.isDark ? colorService.get("surfaceBright") : colorService.get("surfaceDim");
+  }
+};
+const createMinContrastToneAdjuster = (ctx, colors, options) => {
+  const { selfKey, referenceKey, minContrast = 3 } = options;
+  const referenceTone = referenceKey ? colors.get(referenceKey).getTone() : highestSurface(ctx, colors).getTone();
+  const baseTone = colors.get(selfKey).options.tone;
+  let selfTone = baseTone;
+  console.log("contrast ratio2", referenceTone, selfTone);
+  if (materialColorUtilities.Contrast.ratioOfTones(referenceTone, selfTone) < minContrast) {
+    const ratio = calculateToneAdjustmentPercentage(
+      referenceTone,
+      selfTone,
+      minContrast
+    );
+    const inverseT = inverseTone(baseTone);
+    selfTone = selfTone + (inverseT - selfTone) * ratio;
   }
+  return selfTone;
 };
 const udixioVariant = variant({
   name: "udixio",
@@ -3153,19 +3170,20 @@ const udixioVariant = variant({
       [colorKey]: {
         palette: () => palettes.get(colorKey),
         tone: () => {
-          return ctx.isDark ? 80 : tMaxC(palettes.get(colorKey));
+          return colors2.get("primary").getTone();
         },
-        isBackground: true,
-        background: () => highestSurface(ctx, colors2),
-        contrastCurve: () => getCurve(4.5),
-        adjustTone: () => toneDeltaPair(
-          colors2.get(colorContainerKey),
-          colors2.get(colorKey),
-          5,
-          "relative_lighter",
-          true,
-          "farther"
-        )
+        isBackground: true
+        // background: () => highestSurface(ctx, colors),
+        // contrastCurve: () => getCurve(4.5),
+        // adjustTone: () =>
+        //   toneDeltaPair(
+        //     colors.get(colorContainerKey),
+        //     colors.get(colorKey),
+        //     5,
+        //     'relative_lighter',
+        //     true,
+        //     'farther',
+        //   ),
       },
       // [colorDimKey]: {
       //   palette: () => palettes.get(colorKey),
@@ -3207,7 +3225,14 @@ const udixioVariant = variant({
         },
         isBackground: true,
         background: () => highestSurface(ctx, colors2),
-        adjustTone: () => void 0,
+        adjustTone: () => toneDeltaPair(
+          colors2.get(colorKey),
+          colors2.get(colorContainerKey),
+          15,
+          "relative_darker",
+          true,
+          "farther"
+        ),
         contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
       },
       [onColorContainerKey]: {
@@ -3403,19 +3428,9 @@ const udixioVariant = variant({
         background: () => highestSurface(ctx, colors),
         contrastCurve: () => getCurve(4.5),
         adjustTone: () => () => {
-          const surfaceTone = colors.get("surface").getTone();
-          const primaryTone = colors.get("primary").options.tone;
-          let selfTone = primaryTone;
-          if (materialColorUtilities.Contrast.ratioOfTones(surfaceTone, selfTone) < 3) {
-            const ratio = calculateToneAdjustmentPercentage(
-              surfaceTone,
-              selfTone,
-              3
-            );
-            const inverseT = inverseTone(primaryTone);
-            selfTone = selfTone + (inverseT - selfTone) * ratio;
-          }
-          return selfTone;
+          return createMinContrastToneAdjuster(ctx, colors, {
+            selfKey: "primary"
+          });
         }
       },
       // primaryDim: {
@@ -3523,19 +3538,20 @@ const udixioVariant = variant({
       secondary: {
         palette: () => palettes.get("secondary"),
         tone: () => {
-          return ctx.isDark ? 80 : tMaxC(palettes.get("secondary"));
+          return colors.get("primary").getTone();
         },
-        isBackground: true,
-        background: () => highestSurface(ctx, colors),
-        contrastCurve: () => getCurve(4.5),
-        adjustTone: () => toneDeltaPair(
-          getColor("secondaryContainer"),
-          getColor("secondary"),
-          5,
-          "relative_lighter",
-          true,
-          "farther"
-        )
+        isBackground: true
+        // background: () => highestSurface(ctx, colors),
+        // contrastCurve: () => getCurve(4.5),
+        // adjustTone: () =>
+        //   toneDeltaPair(
+        //     getColor('secondaryContainer'),
+        //     getColor('secondary'),
+        //     5,
+        //     'relative_lighter',
+        //     true,
+        //     'farther',
+        //   ),
       },
       // secondaryDim: {
       //   palette: () => palettes.get('secondary'),
@@ -3571,7 +3587,14 @@ const udixioVariant = variant({
         },
         isBackground: true,
         background: () => highestSurface(ctx, colors),
-        adjustTone: () => void 0,
+        adjustTone: () => toneDeltaPair(
+          colors.get("secondary"),
+          colors.get("secondaryContainer"),
+          15,
+          "relative_darker",
+          true,
+          "farther"
+        ),
         contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
       },
       onSecondaryContainer: {
@@ -3627,19 +3650,21 @@ const udixioVariant = variant({
       tertiary: {
         palette: () => palettes.get("tertiary"),
         tone: () => {
-          return ctx.isDark ? tMaxC(palettes.get("tertiary"), 0, 98) : tMaxC(palettes.get("tertiary"));
+          const tone = colors.get("primary").getTone();
+          return Math.max(20, Math.min(80, tone));
         },
-        isBackground: true,
-        background: () => highestSurface(ctx, colors),
-        contrastCurve: () => getCurve(4.5),
-        adjustTone: () => toneDeltaPair(
-          getColor("tertiaryContainer"),
-          getColor("tertiary"),
-          5,
-          "relative_lighter",
-          true,
-          "farther"
-        )
+        isBackground: true
+        // background: () => highestSurface(ctx, colors),
+        // contrastCurve: () => getCurve(4.5),
+        // adjustTone: () =>
+        //   toneDeltaPair(
+        //     getColor('tertiaryContainer'),
+        //     getColor('tertiary'),
+        //     5,
+        //     'relative_lighter',
+        //     true,
+        //     'farther',
+        //   ),
       },
       // tertiaryDim: {
       //   palette: () => palettes.get('tertiary'),
@@ -3675,7 +3700,14 @@ const udixioVariant = variant({
         },
         isBackground: true,
         background: () => highestSurface(ctx, colors),
-        adjustTone: () => void 0,
+        adjustTone: () => toneDeltaPair(
+          colors.get("tertiary"),
+          colors.get("tertiaryContainer"),
+          15,
+          "relative_darker",
+          true,
+          "farther"
+        ),
         contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
       },
       onTertiaryContainer: {

package/dist/{loader--tJzL1CC.js → loader-DVtdg4Xh.js}

@@ -3089,10 +3089,27 @@ const surfaceContainerTone = (layer, api) => {
 };
 const highestSurface = (context, colorService) => {
   if (colorService instanceof ColorApi) {
-    return colorService.get("surface");
+    return context.isDark ? colorService.get("surfaceBright") : colorService.get("surfaceDim");
   } else {
-    return colorService.get("surface");
+    return context.isDark ? colorService.get("surfaceBright") : colorService.get("surfaceDim");
+  }
+};
+const createMinContrastToneAdjuster = (ctx, colors, options) => {
+  const { selfKey, referenceKey, minContrast = 3 } = options;
+  const referenceTone = referenceKey ? colors.get(referenceKey).getTone() : highestSurface(ctx, colors).getTone();
+  const baseTone = colors.get(selfKey).options.tone;
+  let selfTone = baseTone;
+  console.log("contrast ratio2", referenceTone, selfTone);
+  if (Contrast.ratioOfTones(referenceTone, selfTone) < minContrast) {
+    const ratio = calculateToneAdjustmentPercentage(
+      referenceTone,
+      selfTone,
+      minContrast
+    );
+    const inverseT = inverseTone(baseTone);
+    selfTone = selfTone + (inverseT - selfTone) * ratio;
   }
+  return selfTone;
 };
 const udixioVariant = variant({
   name: "udixio",
@@ -3152,19 +3169,20 @@ const udixioVariant = variant({
       [colorKey]: {
         palette: () => palettes.get(colorKey),
         tone: () => {
-          return ctx.isDark ? 80 : tMaxC(palettes.get(colorKey));
+          return colors2.get("primary").getTone();
         },
-        isBackground: true,
-        background: () => highestSurface(ctx, colors2),
-        contrastCurve: () => getCurve(4.5),
-        adjustTone: () => toneDeltaPair(
-          colors2.get(colorContainerKey),
-          colors2.get(colorKey),
-          5,
-          "relative_lighter",
-          true,
-          "farther"
-        )
+        isBackground: true
+        // background: () => highestSurface(ctx, colors),
+        // contrastCurve: () => getCurve(4.5),
+        // adjustTone: () =>
+        //   toneDeltaPair(
+        //     colors.get(colorContainerKey),
+        //     colors.get(colorKey),
+        //     5,
+        //     'relative_lighter',
+        //     true,
+        //     'farther',
+        //   ),
       },
       // [colorDimKey]: {
       //   palette: () => palettes.get(colorKey),
@@ -3206,7 +3224,14 @@ const udixioVariant = variant({
         },
         isBackground: true,
         background: () => highestSurface(ctx, colors2),
-        adjustTone: () => void 0,
+        adjustTone: () => toneDeltaPair(
+          colors2.get(colorKey),
+          colors2.get(colorContainerKey),
+          15,
+          "relative_darker",
+          true,
+          "farther"
+        ),
         contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
       },
       [onColorContainerKey]: {
@@ -3402,19 +3427,9 @@ const udixioVariant = variant({
         background: () => highestSurface(ctx, colors),
         contrastCurve: () => getCurve(4.5),
         adjustTone: () => () => {
-          const surfaceTone = colors.get("surface").getTone();
-          const primaryTone = colors.get("primary").options.tone;
-          let selfTone = primaryTone;
-          if (Contrast.ratioOfTones(surfaceTone, selfTone) < 3) {
-            const ratio = calculateToneAdjustmentPercentage(
-              surfaceTone,
-              selfTone,
-              3
-            );
-            const inverseT = inverseTone(primaryTone);
-            selfTone = selfTone + (inverseT - selfTone) * ratio;
-          }
-          return selfTone;
+          return createMinContrastToneAdjuster(ctx, colors, {
+            selfKey: "primary"
+          });
         }
       },
       // primaryDim: {
@@ -3522,19 +3537,20 @@ const udixioVariant = variant({
       secondary: {
         palette: () => palettes.get("secondary"),
         tone: () => {
-          return ctx.isDark ? 80 : tMaxC(palettes.get("secondary"));
+          return colors.get("primary").getTone();
         },
-        isBackground: true,
-        background: () => highestSurface(ctx, colors),
-        contrastCurve: () => getCurve(4.5),
-        adjustTone: () => toneDeltaPair(
-          getColor("secondaryContainer"),
-          getColor("secondary"),
-          5,
-          "relative_lighter",
-          true,
-          "farther"
-        )
+        isBackground: true
+        // background: () => highestSurface(ctx, colors),
+        // contrastCurve: () => getCurve(4.5),
+        // adjustTone: () =>
+        //   toneDeltaPair(
+        //     getColor('secondaryContainer'),
+        //     getColor('secondary'),
+        //     5,
+        //     'relative_lighter',
+        //     true,
+        //     'farther',
+        //   ),
       },
       // secondaryDim: {
       //   palette: () => palettes.get('secondary'),
@@ -3570,7 +3586,14 @@ const udixioVariant = variant({
         },
         isBackground: true,
         background: () => highestSurface(ctx, colors),
-        adjustTone: () => void 0,
+        adjustTone: () => toneDeltaPair(
+          colors.get("secondary"),
+          colors.get("secondaryContainer"),
+          15,
+          "relative_darker",
+          true,
+          "farther"
+        ),
         contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
       },
       onSecondaryContainer: {
@@ -3626,19 +3649,21 @@ const udixioVariant = variant({
       tertiary: {
         palette: () => palettes.get("tertiary"),
         tone: () => {
-          return ctx.isDark ? tMaxC(palettes.get("tertiary"), 0, 98) : tMaxC(palettes.get("tertiary"));
+          const tone = colors.get("primary").getTone();
+          return Math.max(20, Math.min(80, tone));
         },
-        isBackground: true,
-        background: () => highestSurface(ctx, colors),
-        contrastCurve: () => getCurve(4.5),
-        adjustTone: () => toneDeltaPair(
-          getColor("tertiaryContainer"),
-          getColor("tertiary"),
-          5,
-          "relative_lighter",
-          true,
-          "farther"
-        )
+        isBackground: true
+        // background: () => highestSurface(ctx, colors),
+        // contrastCurve: () => getCurve(4.5),
+        // adjustTone: () =>
+        //   toneDeltaPair(
+        //     getColor('tertiaryContainer'),
+        //     getColor('tertiary'),
+        //     5,
+        //     'relative_lighter',
+        //     true,
+        //     'farther',
+        //   ),
       },
       // tertiaryDim: {
       //   palette: () => palettes.get('tertiary'),
@@ -3674,7 +3699,14 @@ const udixioVariant = variant({
         },
         isBackground: true,
         background: () => highestSurface(ctx, colors),
-        adjustTone: () => void 0,
+        adjustTone: () => toneDeltaPair(
+          colors.get("tertiary"),
+          colors.get("tertiaryContainer"),
+          15,
+          "relative_darker",
+          true,
+          "farther"
+        ),
         contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
       },
       onTertiaryContainer: {

package/dist/node.cjs

@@ -22,9 +22,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const loader = require("./loader-1Pp2rd0P.cjs");
-const font_plugin = require("./font.plugin-B0SKfA9r.cjs");
-const loadFromPath = require("./load-from-path-BCkiZx6_.cjs");
+const loader = require("./loader-BZta4ulw.cjs");
+const font_plugin = require("./font.plugin-B6HEs4Om.cjs");
+const loadFromPath = require("./load-from-path-DVvlFI1M.cjs");
 let unpluginInstance = null;
 const createUnpluginTheme = async () => {
   if (unpluginInstance) {

package/dist/node.js

@@ -1,7 +1,7 @@
-import { A, a, b, h, i, C, j, k, e, f, o, n, q, D, P, r, s, v, u, V, z, c, d, m, F, g, w, x, l, p, G, B, t, y, E } from "./loader--tJzL1CC.js";
-import { F as F2, b as b2, P as P2, a as a2, d as d2 } from "./font.plugin-BReTQTWQ.js";
-import { l as loadFromPath } from "./load-from-path-C4axFso4.js";
-import { r as r2 } from "./load-from-path-C4axFso4.js";
+import { A, a, b, h, i, C, j, k, e, f, o, n, q, D, P, r, s, v, u, V, z, c, d, m, F, g, w, x, l, p, G, B, t, y, E } from "./loader-DVtdg4Xh.js";
+import { F as F2, b as b2, P as P2, a as a2, d as d2 } from "./font.plugin-BorVbapj.js";
+import { l as loadFromPath } from "./load-from-path-CHmj8u_v.js";
+import { r as r2 } from "./load-from-path-CHmj8u_v.js";
 let unpluginInstance = null;
 const createUnpluginTheme = async () => {
   if (unpluginInstance) {

package/dist/variant/variants/udixio.variant.d.ts

@@ -1,3 +1,11 @@
 import { Variant } from '../variant';
+import { DynamicColorKey } from '../../color/color.utils';
+import { ColorApi, ColorManager } from '../../color';
+import { Context } from '../../context';
+export declare const createMinContrastToneAdjuster: (ctx: Context, colors: ColorManager | ColorApi, options: {
+    selfKey: DynamicColorKey;
+    referenceKey?: DynamicColorKey;
+    minContrast?: number;
+}) => number;
 export declare const udixioVariant: Variant;
 //# sourceMappingURL=udixio.variant.d.ts.map

package/dist/variant/variants/udixio.variant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"udixio.variant.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/udixio.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,OAAO,EAAE,MAAM,YAAY,CAAC;AAuD9E,eAAO,MAAM,aAAa,EAAE,OAovB1B,CAAC"}
+{"version":3,"file":"udixio.variant.d.ts","sourceRoot":"","sources":["../../../src/variant/variants/udixio.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC9E,OAAO,EAEL,eAAe,EAIhB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAIL,QAAQ,EAER,YAAY,EAEb,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAyCxC,eAAO,MAAM,6BAA6B,GACxC,KAAK,OAAO,EACZ,QAAQ,YAAY,GAAG,QAAQ,EAC/B,SAAS;IACP,OAAO,EAAE,eAAe,CAAC;IACzB,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,WAwBF,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAiwB1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/theme",
-  "version": "2.1.10",
+  "version": "2.1.12",
   "type": "module",
   "main": "./dist/node.js",
   "module": "./dist/node.js",

package/src/variant/variants/udixio.variant.ts

@@ -47,12 +47,51 @@ const highestSurface = (
   colorService: ColorManager | ColorApi,
 ): Color => {
   if (colorService instanceof ColorApi) {
-    return colorService.get('surface');
+    return context.isDark
+      ? colorService.get('surfaceBright')
+      : colorService.get('surfaceDim');
   } else {
-    return colorService.get('surface');
+    return context.isDark
+      ? colorService.get('surfaceBright')
+      : colorService.get('surfaceDim');
   }
 };
 
+// Permet de réutiliser la logique "si contraste < minContrast, pousser le tone vers l'inverse"
+// pour n'importe quelle couleur (pas seulement `primary`), et avec une référence configurable.
+export const createMinContrastToneAdjuster = (
+  ctx: Context,
+  colors: ColorManager | ColorApi,
+  options: {
+    selfKey: DynamicColorKey;
+    referenceKey?: DynamicColorKey; // par défaut: la surface la plus "haute"
+    minContrast?: number; // par défaut: 3
+  },
+) => {
+  const { selfKey, referenceKey, minContrast = 3 } = options;
+
+  const referenceTone = referenceKey
+    ? colors.get(referenceKey).getTone()
+    : highestSurface(ctx, colors).getTone();
+
+  // On part du tone "source" défini dans les options (comme ton code `primary`).
+  const baseTone = (colors.get(selfKey) as ColorFromPalette).options.tone;
+
+  let selfTone = baseTone;
+  console.log('contrast ratio2', referenceTone, selfTone);
+  if (Contrast.ratioOfTones(referenceTone, selfTone) < minContrast) {
+    const ratio = calculateToneAdjustmentPercentage(
+      referenceTone,
+      selfTone,
+      minContrast,
+    );
+    const inverseT = inverseTone(baseTone);
+    selfTone = selfTone + (inverseT - selfTone) * ratio;
+  }
+
+  return selfTone;
+};
+
 export const udixioVariant: Variant = variant({
   name: 'udixio',
   palettes: {
@@ -124,20 +163,21 @@ export const udixioVariant: Variant = variant({
       [colorKey]: {
         palette: () => palettes.get(colorKey),
         tone: () => {
-          return ctx.isDark ? 80 : tMaxC(palettes.get(colorKey));
+          return colors.get('primary').getTone();
+          // return ctx.isDark ? 80 : tMaxC(palettes.get(colorKey));
         },
         isBackground: true,
-        background: () => highestSurface(ctx, colors),
-        contrastCurve: () => getCurve(4.5),
-        adjustTone: () =>
-          toneDeltaPair(
-            colors.get(colorContainerKey),
-            colors.get(colorKey),
-            5,
-            'relative_lighter',
-            true,
-            'farther',
-          ),
+        // background: () => highestSurface(ctx, colors),
+        // contrastCurve: () => getCurve(4.5),
+        // adjustTone: () =>
+        //   toneDeltaPair(
+        //     colors.get(colorContainerKey),
+        //     colors.get(colorKey),
+        //     5,
+        //     'relative_lighter',
+        //     true,
+        //     'farther',
+        //   ),
       },
       // [colorDimKey]: {
       //   palette: () => palettes.get(colorKey),
@@ -181,7 +221,15 @@ export const udixioVariant: Variant = variant({
         },
         isBackground: true,
         background: () => highestSurface(ctx, colors),
-        adjustTone: () => undefined,
+        adjustTone: () =>
+          toneDeltaPair(
+            colors.get(colorKey),
+            colors.get(colorContainerKey),
+            15,
+            'relative_darker',
+            true,
+            'farther',
+          ),
         contrastCurve: () =>
           ctx.contrastLevel > 0 ? getCurve(1.5) : undefined,
       },
@@ -380,20 +428,9 @@ export const udixioVariant: Variant = variant({
         background: () => highestSurface(ctx, colors),
         contrastCurve: () => getCurve(4.5),
         adjustTone: () => () => {
-          const surfaceTone = colors.get('surface').getTone();
-          const primaryTone = (colors.get('primary') as ColorFromPalette)
-            .options.tone;
-          let selfTone = primaryTone;
-          if (Contrast.ratioOfTones(surfaceTone, selfTone) < 3) {
-            const ratio = calculateToneAdjustmentPercentage(
-              surfaceTone,
-              selfTone,
-              3,
-            );
-            const inverseT = inverseTone(primaryTone);
-            selfTone = selfTone + (inverseT - selfTone) * ratio;
-          }
-          return selfTone;
+          return createMinContrastToneAdjuster(ctx, colors, {
+            selfKey: 'primary',
+          });
         },
       },
       // primaryDim: {
@@ -510,20 +547,20 @@ export const udixioVariant: Variant = variant({
       secondary: {
         palette: () => palettes.get('secondary'),
         tone: () => {
-          return ctx.isDark ? 80 : tMaxC(palettes.get('secondary'));
+          return colors.get('primary').getTone();
         },
         isBackground: true,
-        background: () => highestSurface(ctx, colors),
-        contrastCurve: () => getCurve(4.5),
-        adjustTone: () =>
-          toneDeltaPair(
-            getColor('secondaryContainer'),
-            getColor('secondary'),
-            5,
-            'relative_lighter',
-            true,
-            'farther',
-          ),
+        // background: () => highestSurface(ctx, colors),
+        // contrastCurve: () => getCurve(4.5),
+        // adjustTone: () =>
+        //   toneDeltaPair(
+        //     getColor('secondaryContainer'),
+        //     getColor('secondary'),
+        //     5,
+        //     'relative_lighter',
+        //     true,
+        //     'farther',
+        //   ),
       },
       // secondaryDim: {
       //   palette: () => palettes.get('secondary'),
@@ -559,7 +596,15 @@ export const udixioVariant: Variant = variant({
         },
         isBackground: true,
         background: () => highestSurface(ctx, colors),
-        adjustTone: () => undefined,
+        adjustTone: () =>
+          toneDeltaPair(
+            colors.get('secondary'),
+            colors.get('secondaryContainer'),
+            15,
+            'relative_darker',
+            true,
+            'farther',
+          ),
         contrastCurve: () =>
           ctx.contrastLevel > 0 ? getCurve(1.5) : undefined,
       },
@@ -621,22 +666,21 @@ export const udixioVariant: Variant = variant({
       tertiary: {
         palette: () => palettes.get('tertiary'),
         tone: () => {
-          return ctx.isDark
-            ? tMaxC(palettes.get('tertiary'), 0, 98)
-            : tMaxC(palettes.get('tertiary'));
+          const tone = colors.get('primary').getTone();
+          return Math.max(20, Math.min(80, tone));
         },
         isBackground: true,
-        background: () => highestSurface(ctx, colors),
-        contrastCurve: () => getCurve(4.5),
-        adjustTone: () =>
-          toneDeltaPair(
-            getColor('tertiaryContainer'),
-            getColor('tertiary'),
-            5,
-            'relative_lighter',
-            true,
-            'farther',
-          ),
+        // background: () => highestSurface(ctx, colors),
+        // contrastCurve: () => getCurve(4.5),
+        // adjustTone: () =>
+        //   toneDeltaPair(
+        //     getColor('tertiaryContainer'),
+        //     getColor('tertiary'),
+        //     5,
+        //     'relative_lighter',
+        //     true,
+        //     'farther',
+        //   ),
       },
       // tertiaryDim: {
       //   palette: () => palettes.get('tertiary'),
@@ -672,7 +716,15 @@ export const udixioVariant: Variant = variant({
         },
         isBackground: true,
         background: () => highestSurface(ctx, colors),
-        adjustTone: () => undefined,
+        adjustTone: () =>
+          toneDeltaPair(
+            colors.get('tertiary'),
+            colors.get('tertiaryContainer'),
+            15,
+            'relative_darker',
+            true,
+            'farther',
+          ),
         contrastCurve: () =>
           ctx.contrastLevel > 0 ? getCurve(1.5) : undefined,
       },