@udixio/tailwind 1.7.2 → 1.7.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.7.3 (2025-09-04)
+
+### 🩹 Fixes
+
+- the external colors must be coherent ([08cd685](https://github.com/Udixio/UI/commit/08cd685))
+
+### 🧱 Updated Dependencies
+
+- Updated @udixio/theme to 1.3.1
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
 ## 1.7.2 (2025-09-04)
 
 ### 🧱 Updated Dependencies

package/dist/browser/tailwind.plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.plugin.d.ts","sourceRoot":"","sources":["../../src/browser/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE/E,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAgFD,qBAAa,cAAe,SAAQ,cAAc,CAChD,yBAAyB,EACzB,qBAAqB,CACtB;IACQ,YAAY,wBAAgB;IAC5B,IAAI,SAAc;IACzB,WAAW,mCAA6B;CACzC;AAED,qBAAa,yBAA0B,SAAQ,kBAAkB,CAAC,qBAAqB,CAAC;IAC/E,SAAS,SAAM;IAEtB,MAAM;IAeN,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE;IAsE/C,SAAS;eAII,MAAM;cACP,MAAM;;IAiBZ,MAAM;CAUb"}
+{"version":3,"file":"tailwind.plugin.d.ts","sourceRoot":"","sources":["../../src/browser/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAG/E,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAgFD,qBAAa,cAAe,SAAQ,cAAc,CAChD,yBAAyB,EACzB,qBAAqB,CACtB;IACQ,YAAY,wBAAgB;IAC5B,IAAI,SAAc;IACzB,WAAW,mCAA6B;CACzC;AAED,qBAAa,yBAA0B,SAAQ,kBAAkB,CAAC,qBAAqB,CAAC;IAC/E,SAAS,SAAM;IAEtB,MAAM;IAeN,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE;IA0E/C,SAAS;eAII,MAAM;cACP,MAAM;;IAiBZ,MAAM;CAUb"}

package/dist/browser.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const tailwind_plugin = require("./tailwind.plugin-CUI_jxzw.cjs");
+const tailwind_plugin = require("./tailwind.plugin-sDnlHrTp.cjs");
 exports.TailwindImplPluginBrowser = tailwind_plugin.TailwindImplPluginBrowser;
 exports.TailwindPlugin = tailwind_plugin.TailwindPlugin;
 exports.default = tailwind_plugin.main;

package/dist/browser.js

@@ -1,5 +1,5 @@
-import { m as main } from "./tailwind.plugin-q0sIRBpo.js";
-import { T, a, f, s } from "./tailwind.plugin-q0sIRBpo.js";
+import { m as main } from "./tailwind.plugin-BWGo32wO.js";
+import { T, a, f, s } from "./tailwind.plugin-BWGo32wO.js";
 export {
   T as TailwindImplPluginBrowser,
   a as TailwindPlugin,

package/dist/node.cjs

@@ -24,7 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const tailwind_plugin = require("./tailwind.plugin-CUI_jxzw.cjs");
+const tailwind_plugin = require("./tailwind.plugin-sDnlHrTp.cjs");
 const theme = require("@udixio/theme");
 const fs = require("fs");
 const console = require("node:console");

package/dist/node.js

@@ -1,8 +1,8 @@
 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 { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-q0sIRBpo.js";
-import { f, s } from "./tailwind.plugin-q0sIRBpo.js";
+import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-BWGo32wO.js";
+import { f, s } from "./tailwind.plugin-BWGo32wO.js";
 import { PluginAbstract, FontPlugin } from "@udixio/theme";
 import * as fs from "fs";
 import * as console from "node:console";

package/dist/{tailwind.plugin-q0sIRBpo.js → tailwind.plugin-BWGo32wO.js}

@@ -3,6 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import plugin from "tailwindcss/plugin";
 import { PluginAbstract, FontPlugin, PluginImplAbstract } from "@udixio/theme";
+import { Hct, argbFromHex, hexFromArgb } from "@material/material-color-utilities";
 const defaultConfig = {
   statePrefix: "state",
   disabledStyles: {
@@ -279,13 +280,16 @@ class TailwindImplPluginBrowser extends PluginImplAbstract {
       styles: Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n    ")
     })} 
 }`;
+    const sourceColor = this.api.themes.sourceColorHex;
     for (const [key, value] of Object.entries(this.options.subThemes ?? {})) {
-      this.api.themes.update({ sourceColorHex: value });
+      const newHue = Hct.fromInt(argbFromHex(value)).hue;
+      const newColor = Hct.from(newHue, sourceColor.chroma, sourceColor.tone);
+      this.api.themes.update({ sourceColorHex: hexFromArgb(newColor.toInt()) });
       const colors2 = this.getColors();
       this.outputCss += `
 @layer theme {
   ${createFlexibleSelector(dynamicSelector, ".theme-" + key)} {
-    ${Object.entries(colors2).map(([key2, value2]) => `--color-${key2}: ${value2.dark};`).join("\n    ")}
+    ${Object.entries(colors2).map(([key2, value2]) => `--color-${key2}: ${value2.light};`).join("\n    ")}
     }
 }
 `;

package/dist/{tailwind.plugin-CUI_jxzw.cjs → tailwind.plugin-sDnlHrTp.cjs}

@@ -4,6 +4,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 const plugin = require("tailwindcss/plugin");
 const theme = require("@udixio/theme");
+const materialColorUtilities = require("@material/material-color-utilities");
 const defaultConfig = {
   statePrefix: "state",
   disabledStyles: {
@@ -280,13 +281,16 @@ class TailwindImplPluginBrowser extends theme.PluginImplAbstract {
       styles: Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n    ")
     })} 
 }`;
+    const sourceColor = this.api.themes.sourceColorHex;
     for (const [key, value] of Object.entries(this.options.subThemes ?? {})) {
-      this.api.themes.update({ sourceColorHex: value });
+      const newHue = materialColorUtilities.Hct.fromInt(materialColorUtilities.argbFromHex(value)).hue;
+      const newColor = materialColorUtilities.Hct.from(newHue, sourceColor.chroma, sourceColor.tone);
+      this.api.themes.update({ sourceColorHex: materialColorUtilities.hexFromArgb(newColor.toInt()) });
       const colors2 = this.getColors();
       this.outputCss += `
 @layer theme {
   ${createFlexibleSelector(dynamicSelector, ".theme-" + key)} {
-    ${Object.entries(colors2).map(([key2, value2]) => `--color-${key2}: ${value2.dark};`).join("\n    ")}
+    ${Object.entries(colors2).map(([key2, value2]) => `--color-${key2}: ${value2.light};`).join("\n    ")}
     }
 }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/tailwind",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "type": "module",
   "main": "./dist/node.js",
   "module": "./dist/node.js",
@@ -30,7 +30,7 @@
     "chalk": "^5.6.0",
     "pathe": "^2.0.3",
     "tslib": "^2.3.0",
-    "@udixio/theme": "1.3.0"
+    "@udixio/theme": "1.3.1"
   },
   "repository": {
     "type": "git",

package/src/browser/tailwind.plugin.ts

@@ -1,4 +1,5 @@
 import { FontPlugin, PluginAbstract, PluginImplAbstract } from '@udixio/theme';
+import { argbFromHex, Hct, hexFromArgb } from '@material/material-color-utilities';
 
 export interface TailwindPluginOptions {
   darkMode?: 'class' | 'media';
@@ -157,14 +158,18 @@ export class TailwindImplPluginBrowser extends PluginImplAbstract<TailwindPlugin
   })} 
 }`;
 
+    const sourceColor = this.api.themes.sourceColorHex;
     for (const [key, value] of Object.entries(this.options.subThemes ?? {})) {
-      this.api.themes.update({ sourceColorHex: value });
+      const newHue = Hct.fromInt(argbFromHex(value)).hue;
+      const newColor = Hct.from(newHue, sourceColor.chroma, sourceColor.tone);
+
+      this.api.themes.update({ sourceColorHex: hexFromArgb(newColor.toInt()) });
       const colors = this.getColors();
       this.outputCss += `
 @layer theme {
   ${createFlexibleSelector(dynamicSelector, '.theme-' + key)} {
     ${Object.entries(colors)
-      .map(([key, value]) => `--color-${key}: ${value.dark};`)
+      .map(([key, value]) => `--color-${key}: ${value.light};`)
       .join('\n    ')}
     }
 }