@udixio/theme 0.3.2 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs.js +51 -394
- package/index.esm.js +51 -372
- package/package.json +1 -1
- package/src/lib/index.d.ts +0 -1
- package/src/lib/theme/variants/index.d.ts +6 -0
- package/src/lib/plugins/tailwind/file.d.ts +0 -4
- package/src/lib/plugins/tailwind/index.d.ts +0 -3
- package/src/lib/plugins/tailwind/main.d.ts +0 -2
- package/src/lib/plugins/tailwind/plugins-tailwind/font.d.ts +0 -3
- package/src/lib/plugins/tailwind/plugins-tailwind/index.d.ts +0 -2
- package/src/lib/plugins/tailwind/plugins-tailwind/state.d.ts +0 -2
- package/src/lib/plugins/tailwind/tailwind.plugin.d.ts +0 -18
package/index.cjs.js
CHANGED
|
@@ -2,30 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var awilix = require('awilix');
|
|
4
4
|
var materialColorUtilities = require('@material/material-color-utilities');
|
|
5
|
-
var plugin = require('tailwindcss/plugin');
|
|
6
|
-
var fs = require('fs');
|
|
7
|
-
var path = require('path');
|
|
8
|
-
var replaceInFile = require('replace-in-file');
|
|
9
|
-
|
|
10
|
-
function _interopNamespaceDefault(e) {
|
|
11
|
-
var n = Object.create(null);
|
|
12
|
-
if (e) {
|
|
13
|
-
Object.keys(e).forEach(function (k) {
|
|
14
|
-
if (k !== 'default') {
|
|
15
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
16
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
17
|
-
enumerable: true,
|
|
18
|
-
get: function () { return e[k]; }
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
n.default = e;
|
|
24
|
-
return Object.freeze(n);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
var fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
|
|
28
|
-
var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
|
|
29
5
|
|
|
30
6
|
class ColorApi {
|
|
31
7
|
constructor({ colorManager }) {
|
|
@@ -1684,49 +1660,6 @@ class Variant {
|
|
|
1684
1660
|
}
|
|
1685
1661
|
}
|
|
1686
1662
|
|
|
1687
|
-
const tonalSpotVariant = {
|
|
1688
|
-
name: 'tonalSpot',
|
|
1689
|
-
palettes: {
|
|
1690
|
-
primary: ({ sourceColorHct, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
|
|
1691
|
-
secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
|
|
1692
|
-
tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
|
|
1693
|
-
neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
|
|
1694
|
-
neutralVariant: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
|
|
1695
|
-
error: ({ sourceColorHct }) => {
|
|
1696
|
-
const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
|
|
1697
|
-
return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 60);
|
|
1698
|
-
},
|
|
1699
|
-
},
|
|
1700
|
-
customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, 16),
|
|
1701
|
-
};
|
|
1702
|
-
|
|
1703
|
-
const getVibrantNeutralHue = (sourceColorHct) => {
|
|
1704
|
-
return getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]);
|
|
1705
|
-
};
|
|
1706
|
-
const getVibrantNeutralChroma = (sourceColorHct) => {
|
|
1707
|
-
getVibrantNeutralHue(sourceColorHct);
|
|
1708
|
-
return 28;
|
|
1709
|
-
};
|
|
1710
|
-
const vibrantVariant = {
|
|
1711
|
-
name: 'vibrant',
|
|
1712
|
-
palettes: {
|
|
1713
|
-
primary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
|
|
1714
|
-
secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
|
|
1715
|
-
tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 71, 105, 140, 161, 253, 333, 360], [-72, 35, 24, -24, 62, 50, 62, -72]), 56),
|
|
1716
|
-
neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getVibrantNeutralHue(sourceColorHct), getVibrantNeutralChroma(sourceColorHct)),
|
|
1717
|
-
neutralVariant: ({ sourceColorHct }) => {
|
|
1718
|
-
const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
|
|
1719
|
-
const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
|
|
1720
|
-
return materialColorUtilities.TonalPalette.fromHueAndChroma(vibrantNeutralHue, vibrantNeutralChroma * 1.29);
|
|
1721
|
-
},
|
|
1722
|
-
error: ({ sourceColorHct }) => {
|
|
1723
|
-
const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
|
|
1724
|
-
return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 80);
|
|
1725
|
-
},
|
|
1726
|
-
},
|
|
1727
|
-
customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
|
|
1728
|
-
};
|
|
1729
|
-
|
|
1730
1663
|
const getExpressiveNeutralHue = (sourceColorHct) => {
|
|
1731
1664
|
const hue = getRotatedHue(sourceColorHct, [0, 71, 124, 253, 278, 300, 360], [10, 0, 10, 0, 10, 0]);
|
|
1732
1665
|
return hue;
|
|
@@ -1774,6 +1707,56 @@ const neutralVariant = {
|
|
|
1774
1707
|
customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, Hct.isBlue(colorHct.hue) ? 6 : 4),
|
|
1775
1708
|
};
|
|
1776
1709
|
|
|
1710
|
+
const tonalSpotVariant = {
|
|
1711
|
+
name: 'tonalSpot',
|
|
1712
|
+
palettes: {
|
|
1713
|
+
primary: ({ sourceColorHct, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
|
|
1714
|
+
secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
|
|
1715
|
+
tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
|
|
1716
|
+
neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
|
|
1717
|
+
neutralVariant: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
|
|
1718
|
+
error: ({ sourceColorHct }) => {
|
|
1719
|
+
const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
|
|
1720
|
+
return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 60);
|
|
1721
|
+
},
|
|
1722
|
+
},
|
|
1723
|
+
customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, 16),
|
|
1724
|
+
};
|
|
1725
|
+
|
|
1726
|
+
const getVibrantNeutralHue = (sourceColorHct) => {
|
|
1727
|
+
return getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]);
|
|
1728
|
+
};
|
|
1729
|
+
const getVibrantNeutralChroma = (sourceColorHct) => {
|
|
1730
|
+
getVibrantNeutralHue(sourceColorHct);
|
|
1731
|
+
return 28;
|
|
1732
|
+
};
|
|
1733
|
+
const vibrantVariant = {
|
|
1734
|
+
name: 'vibrant',
|
|
1735
|
+
palettes: {
|
|
1736
|
+
primary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
|
|
1737
|
+
secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
|
|
1738
|
+
tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 71, 105, 140, 161, 253, 333, 360], [-72, 35, 24, -24, 62, 50, 62, -72]), 56),
|
|
1739
|
+
neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getVibrantNeutralHue(sourceColorHct), getVibrantNeutralChroma(sourceColorHct)),
|
|
1740
|
+
neutralVariant: ({ sourceColorHct }) => {
|
|
1741
|
+
const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
|
|
1742
|
+
const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
|
|
1743
|
+
return materialColorUtilities.TonalPalette.fromHueAndChroma(vibrantNeutralHue, vibrantNeutralChroma * 1.29);
|
|
1744
|
+
},
|
|
1745
|
+
error: ({ sourceColorHct }) => {
|
|
1746
|
+
const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
|
|
1747
|
+
return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 80);
|
|
1748
|
+
},
|
|
1749
|
+
},
|
|
1750
|
+
customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
|
|
1751
|
+
};
|
|
1752
|
+
|
|
1753
|
+
const Variants = {
|
|
1754
|
+
Expressive: expressiveVariant,
|
|
1755
|
+
Neutral: neutralVariant,
|
|
1756
|
+
TonalSpot: tonalSpotVariant,
|
|
1757
|
+
Vibrant: vibrantVariant,
|
|
1758
|
+
};
|
|
1759
|
+
|
|
1777
1760
|
const defaultColors = (colorService) => {
|
|
1778
1761
|
const getColor = (key) => {
|
|
1779
1762
|
return colorService.getColor(key).getMaterialColor();
|
|
@@ -2858,329 +2841,6 @@ class FontPluginImpl extends PluginImplAbstract {
|
|
|
2858
2841
|
}
|
|
2859
2842
|
}
|
|
2860
2843
|
|
|
2861
|
-
/******************************************************************************
|
|
2862
|
-
Copyright (c) Microsoft Corporation.
|
|
2863
|
-
|
|
2864
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
2865
|
-
purpose with or without fee is hereby granted.
|
|
2866
|
-
|
|
2867
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
2868
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
2869
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
2870
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
2871
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
2872
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
2873
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
2874
|
-
***************************************************************************** */
|
|
2875
|
-
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
function __awaiter(thisArg, _arguments, P, generator) {
|
|
2879
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
2880
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
2881
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
2882
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
2883
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
2884
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
2885
|
-
});
|
|
2886
|
-
}
|
|
2887
|
-
|
|
2888
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
2889
|
-
var e = new Error(message);
|
|
2890
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
2891
|
-
};
|
|
2892
|
-
|
|
2893
|
-
const createOrUpdateFile = (filePath, content) => {
|
|
2894
|
-
try {
|
|
2895
|
-
if (!fs__namespace.existsSync(filePath)) {
|
|
2896
|
-
// Create the folder if necessary.
|
|
2897
|
-
const dirPath = path__namespace.dirname(filePath);
|
|
2898
|
-
if (!fs__namespace.existsSync(dirPath)) {
|
|
2899
|
-
fs__namespace.mkdirSync(dirPath, { recursive: true });
|
|
2900
|
-
}
|
|
2901
|
-
// Create the file with the provided content.
|
|
2902
|
-
fs__namespace.writeFileSync(filePath, content);
|
|
2903
|
-
console.log(`✅ File successfully created: ${filePath}`);
|
|
2904
|
-
}
|
|
2905
|
-
else {
|
|
2906
|
-
console.log(`⚠️ File already exists: ${filePath}`);
|
|
2907
|
-
replaceFileContent(filePath, /[\s\S]*/, content);
|
|
2908
|
-
}
|
|
2909
|
-
}
|
|
2910
|
-
catch (error) {
|
|
2911
|
-
console.error('❌ Error while creating the file:', error);
|
|
2912
|
-
}
|
|
2913
|
-
};
|
|
2914
|
-
const getFileContent = (filePath, searchPattern) => {
|
|
2915
|
-
try {
|
|
2916
|
-
// Vérifier si le fichier existe
|
|
2917
|
-
if (!fs__namespace.existsSync(filePath)) {
|
|
2918
|
-
console.error(`❌ The specified file does not exist: ${filePath}`);
|
|
2919
|
-
return null;
|
|
2920
|
-
}
|
|
2921
|
-
// Lire le contenu du fichier entier
|
|
2922
|
-
const fileContent = fs__namespace.readFileSync(filePath, 'utf8');
|
|
2923
|
-
// Si un motif est fourni, chercher le texte correspondant
|
|
2924
|
-
if (searchPattern) {
|
|
2925
|
-
if (typeof searchPattern === 'string') {
|
|
2926
|
-
const found = fileContent.includes(searchPattern)
|
|
2927
|
-
? searchPattern
|
|
2928
|
-
: false;
|
|
2929
|
-
console.log(found
|
|
2930
|
-
? `✅ The file contains the specified string: "${searchPattern}"`
|
|
2931
|
-
: `⚠️ The file does NOT contain the specified string: "${searchPattern}"`);
|
|
2932
|
-
return found;
|
|
2933
|
-
}
|
|
2934
|
-
else {
|
|
2935
|
-
const match = fileContent.match(searchPattern);
|
|
2936
|
-
if (match) {
|
|
2937
|
-
console.log(`✅ Found match: "${match[0]}"`);
|
|
2938
|
-
return match[0]; // Retourner le texte trouvé
|
|
2939
|
-
}
|
|
2940
|
-
else {
|
|
2941
|
-
console.log(`⚠️ No match found for the pattern: "${searchPattern.toString()}"`);
|
|
2942
|
-
return false; // Aucune correspondance trouvée
|
|
2943
|
-
}
|
|
2944
|
-
}
|
|
2945
|
-
}
|
|
2946
|
-
// Si aucun motif n'est fourni, retourner tout le contenu
|
|
2947
|
-
console.log(`✅ File content successfully retrieved.`);
|
|
2948
|
-
return fileContent;
|
|
2949
|
-
}
|
|
2950
|
-
catch (error) {
|
|
2951
|
-
console.error('❌ An error occurred while processing the file:', error);
|
|
2952
|
-
return null;
|
|
2953
|
-
}
|
|
2954
|
-
};
|
|
2955
|
-
const replaceFileContent = (filePath, searchPattern, replacement) => {
|
|
2956
|
-
try {
|
|
2957
|
-
const results = replaceInFile.replaceInFileSync({
|
|
2958
|
-
files: filePath,
|
|
2959
|
-
from: searchPattern,
|
|
2960
|
-
to: replacement,
|
|
2961
|
-
});
|
|
2962
|
-
if (results.length > 0 && results[0].hasChanged) {
|
|
2963
|
-
console.log(`✅ Content successfully replaced in the file: ${filePath}`);
|
|
2964
|
-
}
|
|
2965
|
-
else {
|
|
2966
|
-
console.log(`⚠️ No replacement made. Here are some possible reasons:\n- The pattern ${searchPattern} was not found.\n- The file might already contain the expected content.`);
|
|
2967
|
-
}
|
|
2968
|
-
}
|
|
2969
|
-
catch (error) {
|
|
2970
|
-
console.error('❌ Error while replacing the file content:', error);
|
|
2971
|
-
}
|
|
2972
|
-
};
|
|
2973
|
-
const findTailwindCssFile = (startDir, searchPattern) => {
|
|
2974
|
-
const files = fs__namespace.readdirSync(startDir);
|
|
2975
|
-
for (const file of files) {
|
|
2976
|
-
const filePath = path__namespace.join(startDir, file);
|
|
2977
|
-
const stats = fs__namespace.statSync(filePath);
|
|
2978
|
-
if (stats.isDirectory()) {
|
|
2979
|
-
// Appeler récursivement si c'est un dossier
|
|
2980
|
-
const result = findTailwindCssFile(filePath, searchPattern);
|
|
2981
|
-
if (result)
|
|
2982
|
-
return result;
|
|
2983
|
-
}
|
|
2984
|
-
else if (file.endsWith('.css')) {
|
|
2985
|
-
// Lire chaque fichier .css
|
|
2986
|
-
const content = fs__namespace.readFileSync(filePath, 'utf8');
|
|
2987
|
-
if (content.includes(searchPattern)) {
|
|
2988
|
-
console.log('Fichier trouvé :', filePath);
|
|
2989
|
-
return filePath;
|
|
2990
|
-
}
|
|
2991
|
-
}
|
|
2992
|
-
}
|
|
2993
|
-
return null;
|
|
2994
|
-
};
|
|
2995
|
-
|
|
2996
|
-
const font = (fontStyles, responsiveBreakPoints) => {
|
|
2997
|
-
const createUtilities = ({ theme }) => {
|
|
2998
|
-
const pixelUnit = 'rem';
|
|
2999
|
-
const newUtilities = {};
|
|
3000
|
-
const baseTextStyle = (sizeValue) => ({
|
|
3001
|
-
fontSize: sizeValue.fontSize + pixelUnit,
|
|
3002
|
-
fontWeight: sizeValue.fontWeight,
|
|
3003
|
-
lineHeight: sizeValue.lineHeight + pixelUnit,
|
|
3004
|
-
letterSpacing: sizeValue.letterSpacing
|
|
3005
|
-
? sizeValue.letterSpacing + pixelUnit
|
|
3006
|
-
: null,
|
|
3007
|
-
fontFamily: theme('fontFamily.' + sizeValue.fontFamily),
|
|
3008
|
-
});
|
|
3009
|
-
const responsiveTextStyle = (sizeValue, breakPointName, breakPointRatio) => ({
|
|
3010
|
-
[`@media (min-width: ${theme('screens.' + breakPointName, {})})`]: {
|
|
3011
|
-
fontSize: sizeValue.fontSize * breakPointRatio + pixelUnit,
|
|
3012
|
-
lineHeight: sizeValue.lineHeight * breakPointRatio + pixelUnit,
|
|
3013
|
-
},
|
|
3014
|
-
});
|
|
3015
|
-
for (const [roleName, roleValue] of Object.entries(fontStyles)) {
|
|
3016
|
-
for (const [sizeName, sizeValue] of Object.entries(roleValue)) {
|
|
3017
|
-
newUtilities['.text-' + roleName + '-' + sizeName] = Object.assign(Object.assign({}, baseTextStyle(sizeValue)), Object.entries(responsiveBreakPoints).reduce((acc, [breakPointName, breakPointRatio]) => {
|
|
3018
|
-
acc = Object.assign(Object.assign({}, acc), responsiveTextStyle(sizeValue, breakPointName, breakPointRatio));
|
|
3019
|
-
return acc;
|
|
3020
|
-
}, {}));
|
|
3021
|
-
}
|
|
3022
|
-
}
|
|
3023
|
-
return newUtilities;
|
|
3024
|
-
};
|
|
3025
|
-
return plugin(({ addUtilities, theme, }) => {
|
|
3026
|
-
const newUtilities = createUtilities({ theme });
|
|
3027
|
-
addUtilities(newUtilities);
|
|
3028
|
-
});
|
|
3029
|
-
};
|
|
3030
|
-
|
|
3031
|
-
// from tailwindcss src/util/flattenColors
|
|
3032
|
-
const state = (colorKeys) => plugin((pluginArgs) => {
|
|
3033
|
-
addAllNewComponents(pluginArgs, {
|
|
3034
|
-
statePrefix: 'state',
|
|
3035
|
-
disabledStyles: {
|
|
3036
|
-
textOpacity: 0.38,
|
|
3037
|
-
backgroundOpacity: 0.12,
|
|
3038
|
-
},
|
|
3039
|
-
transition: {
|
|
3040
|
-
duration: 150,
|
|
3041
|
-
},
|
|
3042
|
-
}, colorKeys);
|
|
3043
|
-
}, {});
|
|
3044
|
-
const addAllNewComponents = ({ addComponents }, { statePrefix, disabledStyles, transition }, colorKeys) => {
|
|
3045
|
-
const newComponents = {};
|
|
3046
|
-
for (const isGroup of [false, true]) {
|
|
3047
|
-
const group = isGroup ? 'group-' : '';
|
|
3048
|
-
for (const colorName of colorKeys) {
|
|
3049
|
-
const className = `.${group}${statePrefix}-${colorName}`;
|
|
3050
|
-
newComponents[className] = {
|
|
3051
|
-
[`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
|
|
3052
|
-
[`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
|
|
3053
|
-
[`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
|
|
3054
|
-
};
|
|
3055
|
-
if (transition) {
|
|
3056
|
-
newComponents[className][`@apply transition-colors`] = {};
|
|
3057
|
-
newComponents[className][`@apply duration-${transition.duration}`] = {};
|
|
3058
|
-
}
|
|
3059
|
-
if (disabledStyles) {
|
|
3060
|
-
newComponents[className][`@apply ${group}disabled:text-on-surface/[${disabledStyles.textOpacity}]`] = {};
|
|
3061
|
-
newComponents[className][`@apply ${group}disabled:bg-on-surface/[${disabledStyles.backgroundOpacity}]`] = {};
|
|
3062
|
-
}
|
|
3063
|
-
}
|
|
3064
|
-
}
|
|
3065
|
-
for (const colorName of colorKeys) {
|
|
3066
|
-
for (const stateName of ['hover', 'active', 'focus', 'disabled']) {
|
|
3067
|
-
const className = `.${stateName}-${statePrefix}-${colorName}`;
|
|
3068
|
-
if (stateName === 'active' || stateName === 'focus') {
|
|
3069
|
-
newComponents[className] = {
|
|
3070
|
-
[`@apply bg-${colorName}/[0.12]`]: {},
|
|
3071
|
-
};
|
|
3072
|
-
}
|
|
3073
|
-
else if (stateName === 'hover') {
|
|
3074
|
-
newComponents[className] = {
|
|
3075
|
-
[`@apply bg-${colorName}/[0.08]`]: {},
|
|
3076
|
-
};
|
|
3077
|
-
}
|
|
3078
|
-
else if (stateName === 'disabled') {
|
|
3079
|
-
newComponents[className] = {
|
|
3080
|
-
[`@apply text-on-surface/[${disabledStyles.textOpacity}]`]: {},
|
|
3081
|
-
};
|
|
3082
|
-
newComponents[className] = {
|
|
3083
|
-
[`@apply bg-on-surface/[${disabledStyles.backgroundOpacity}]`]: {},
|
|
3084
|
-
};
|
|
3085
|
-
}
|
|
3086
|
-
}
|
|
3087
|
-
}
|
|
3088
|
-
addComponents(newComponents);
|
|
3089
|
-
};
|
|
3090
|
-
|
|
3091
|
-
class TailwindPlugin extends PluginAbstract {
|
|
3092
|
-
constructor() {
|
|
3093
|
-
super(...arguments);
|
|
3094
|
-
this.dependencies = [FontPlugin];
|
|
3095
|
-
this.name = 'tailwind';
|
|
3096
|
-
this.pluginClass = TailwindImplPlugin;
|
|
3097
|
-
}
|
|
3098
|
-
}
|
|
3099
|
-
class TailwindImplPlugin extends PluginImplAbstract {
|
|
3100
|
-
onInit() {
|
|
3101
|
-
var _a, _b;
|
|
3102
|
-
var _c, _d;
|
|
3103
|
-
(_a = (_c = this.options).darkMode) !== null && _a !== void 0 ? _a : (_c.darkMode = 'class');
|
|
3104
|
-
(_b = (_d = this.options).responsiveBreakPoints) !== null && _b !== void 0 ? _b : (_d.responsiveBreakPoints = {
|
|
3105
|
-
lg: 1.125,
|
|
3106
|
-
});
|
|
3107
|
-
}
|
|
3108
|
-
load() {
|
|
3109
|
-
var _a;
|
|
3110
|
-
const searchKeyword = '@plugin "@udixio/tailwind"';
|
|
3111
|
-
const tailwindCssPath = findTailwindCssFile(process.cwd(), searchKeyword);
|
|
3112
|
-
if (!tailwindCssPath) {
|
|
3113
|
-
throw new Error('Tailwind plugin not found. Please use it first. (@plugin "@udixio/tailwind")');
|
|
3114
|
-
}
|
|
3115
|
-
const searchPattern = /@import ["']tailwindcss["'];/;
|
|
3116
|
-
const replacement = `@import 'tailwindcss';\n@import "./udixio.css";`;
|
|
3117
|
-
if (!getFileContent(tailwindCssPath, /@import\s+"\.\/udixio\.css";/)) {
|
|
3118
|
-
replaceFileContent(tailwindCssPath, searchPattern, replacement);
|
|
3119
|
-
}
|
|
3120
|
-
const cssFilePath = path.dirname(tailwindCssPath);
|
|
3121
|
-
const colors = {};
|
|
3122
|
-
for (const isDark of [false, true]) {
|
|
3123
|
-
this.api.themes.update({ isDark: isDark });
|
|
3124
|
-
for (const [key, value] of this.api.colors.getColors().entries()) {
|
|
3125
|
-
const newKey = key
|
|
3126
|
-
.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
|
|
3127
|
-
.toLowerCase();
|
|
3128
|
-
(_a = colors[newKey]) !== null && _a !== void 0 ? _a : (colors[newKey] = { light: '', dark: '' });
|
|
3129
|
-
colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
|
|
3130
|
-
}
|
|
3131
|
-
}
|
|
3132
|
-
const { fontStyles, fontFamily } = this.api.plugins
|
|
3133
|
-
.getPlugin(FontPlugin)
|
|
3134
|
-
.getInstance()
|
|
3135
|
-
.getFonts();
|
|
3136
|
-
createOrUpdateFile(path.join(cssFilePath, 'udixio.css'), `
|
|
3137
|
-
@custom-variant dark (&:where(.dark, .dark *));
|
|
3138
|
-
@theme {
|
|
3139
|
-
--color-*: initial;
|
|
3140
|
-
${Object.entries(colors)
|
|
3141
|
-
.map(([key, value]) => `--color-${key}: ${value.light};`)
|
|
3142
|
-
.join('\n ')}
|
|
3143
|
-
}
|
|
3144
|
-
@layer theme {
|
|
3145
|
-
.dark {
|
|
3146
|
-
${Object.entries(colors)
|
|
3147
|
-
.map(([key, value]) => `--color-${key}: ${value.dark};`)
|
|
3148
|
-
.join('\n ')}
|
|
3149
|
-
}
|
|
3150
|
-
}
|
|
3151
|
-
`);
|
|
3152
|
-
const plugins = [
|
|
3153
|
-
state(Object.keys(colors)),
|
|
3154
|
-
font(fontStyles, this.options.responsiveBreakPoints),
|
|
3155
|
-
];
|
|
3156
|
-
return plugin.withOptions(
|
|
3157
|
-
// 1) factory(options) → la fonction “handler” du plugin
|
|
3158
|
-
(options = {}) => {
|
|
3159
|
-
return function (api) {
|
|
3160
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
3161
|
-
plugins.forEach((plugin) => {
|
|
3162
|
-
plugin.handler(api);
|
|
3163
|
-
});
|
|
3164
|
-
});
|
|
3165
|
-
};
|
|
3166
|
-
},
|
|
3167
|
-
// 2) config(options) → objet à merger dans tailwind.config
|
|
3168
|
-
(options = {}) => {
|
|
3169
|
-
return {
|
|
3170
|
-
theme: {
|
|
3171
|
-
fontFamily,
|
|
3172
|
-
},
|
|
3173
|
-
};
|
|
3174
|
-
});
|
|
3175
|
-
}
|
|
3176
|
-
}
|
|
3177
|
-
|
|
3178
|
-
const createTheme = () => {
|
|
3179
|
-
const app = bootstrapFromConfig();
|
|
3180
|
-
const plugin = app.plugins.getPlugin(TailwindPlugin).getInstance();
|
|
3181
|
-
return plugin.load();
|
|
3182
|
-
};
|
|
3183
|
-
|
|
3184
2844
|
exports.API = API;
|
|
3185
2845
|
exports.AppContainer = AppContainer;
|
|
3186
2846
|
exports.AppModule = AppModule;
|
|
@@ -3199,25 +2859,22 @@ exports.PluginImplAbstract = PluginImplAbstract;
|
|
|
3199
2859
|
exports.PluginModule = PluginModule;
|
|
3200
2860
|
exports.Scheme = Scheme;
|
|
3201
2861
|
exports.SchemeManager = SchemeManager;
|
|
3202
|
-
exports.TailwindPlugin = TailwindPlugin;
|
|
3203
2862
|
exports.ThemeApi = ThemeApi;
|
|
3204
2863
|
exports.ThemeModule = ThemeModule;
|
|
3205
2864
|
exports.ToneDeltaPair = ToneDeltaPair;
|
|
3206
2865
|
exports.Variant = Variant;
|
|
3207
2866
|
exports.VariantManager = VariantManager;
|
|
2867
|
+
exports.Variants = Variants;
|
|
3208
2868
|
exports.bootstrap = bootstrap;
|
|
3209
2869
|
exports.bootstrapFromConfig = bootstrapFromConfig;
|
|
3210
|
-
exports.createTheme = createTheme;
|
|
3211
2870
|
exports.defaultColors = defaultColors;
|
|
3212
2871
|
exports.defineConfig = defineConfig;
|
|
3213
2872
|
exports.expressiveVariant = expressiveVariant;
|
|
3214
2873
|
exports.extendSpecVersion = extendSpecVersion;
|
|
3215
|
-
exports.font = font;
|
|
3216
2874
|
exports.getPiecewiseHue = getPiecewiseHue;
|
|
3217
2875
|
exports.getRotatedHue = getRotatedHue;
|
|
3218
2876
|
exports.highestSurface = highestSurface;
|
|
3219
2877
|
exports.importContainer = importContainer;
|
|
3220
2878
|
exports.neutralVariant = neutralVariant;
|
|
3221
|
-
exports.state = state;
|
|
3222
2879
|
exports.tonalSpotVariant = tonalSpotVariant;
|
|
3223
2880
|
exports.vibrantVariant = vibrantVariant;
|
package/index.esm.js
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
import { asClass, createContainer, InjectionMode } from 'awilix';
|
|
2
2
|
import { lerp, argbFromLstar, sanitizeDegreesDouble, yFromLstar, argbFromLinrgb, Cam16, signum, matrixMultiply, ViewingConditions, lstarFromArgb, lstarFromY, Contrast, clampDouble, hexFromArgb, argbFromHex, DynamicColor as DynamicColor$1, TonalPalette } from '@material/material-color-utilities';
|
|
3
|
-
import plugin from 'tailwindcss/plugin';
|
|
4
|
-
import * as fs from 'fs';
|
|
5
|
-
import * as path from 'path';
|
|
6
|
-
import path__default from 'path';
|
|
7
|
-
import { replaceInFileSync } from 'replace-in-file';
|
|
8
3
|
|
|
9
4
|
class ColorApi {
|
|
10
5
|
constructor({ colorManager }) {
|
|
@@ -1663,49 +1658,6 @@ class Variant {
|
|
|
1663
1658
|
}
|
|
1664
1659
|
}
|
|
1665
1660
|
|
|
1666
|
-
const tonalSpotVariant = {
|
|
1667
|
-
name: 'tonalSpot',
|
|
1668
|
-
palettes: {
|
|
1669
|
-
primary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
|
|
1670
|
-
secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
|
|
1671
|
-
tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
|
|
1672
|
-
neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
|
|
1673
|
-
neutralVariant: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
|
|
1674
|
-
error: ({ sourceColorHct }) => {
|
|
1675
|
-
const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
|
|
1676
|
-
return TonalPalette.fromHueAndChroma(errorHue, 60);
|
|
1677
|
-
},
|
|
1678
|
-
},
|
|
1679
|
-
customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(colorHct.hue, 16),
|
|
1680
|
-
};
|
|
1681
|
-
|
|
1682
|
-
const getVibrantNeutralHue = (sourceColorHct) => {
|
|
1683
|
-
return getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]);
|
|
1684
|
-
};
|
|
1685
|
-
const getVibrantNeutralChroma = (sourceColorHct) => {
|
|
1686
|
-
getVibrantNeutralHue(sourceColorHct);
|
|
1687
|
-
return 28;
|
|
1688
|
-
};
|
|
1689
|
-
const vibrantVariant = {
|
|
1690
|
-
name: 'vibrant',
|
|
1691
|
-
palettes: {
|
|
1692
|
-
primary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
|
|
1693
|
-
secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
|
|
1694
|
-
tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 71, 105, 140, 161, 253, 333, 360], [-72, 35, 24, -24, 62, 50, 62, -72]), 56),
|
|
1695
|
-
neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getVibrantNeutralHue(sourceColorHct), getVibrantNeutralChroma(sourceColorHct)),
|
|
1696
|
-
neutralVariant: ({ sourceColorHct }) => {
|
|
1697
|
-
const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
|
|
1698
|
-
const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
|
|
1699
|
-
return TonalPalette.fromHueAndChroma(vibrantNeutralHue, vibrantNeutralChroma * 1.29);
|
|
1700
|
-
},
|
|
1701
|
-
error: ({ sourceColorHct }) => {
|
|
1702
|
-
const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
|
|
1703
|
-
return TonalPalette.fromHueAndChroma(errorHue, 80);
|
|
1704
|
-
},
|
|
1705
|
-
},
|
|
1706
|
-
customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
|
|
1707
|
-
};
|
|
1708
|
-
|
|
1709
1661
|
const getExpressiveNeutralHue = (sourceColorHct) => {
|
|
1710
1662
|
const hue = getRotatedHue(sourceColorHct, [0, 71, 124, 253, 278, 300, 360], [10, 0, 10, 0, 10, 0]);
|
|
1711
1663
|
return hue;
|
|
@@ -1753,6 +1705,56 @@ const neutralVariant = {
|
|
|
1753
1705
|
customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(colorHct.hue, Hct.isBlue(colorHct.hue) ? 6 : 4),
|
|
1754
1706
|
};
|
|
1755
1707
|
|
|
1708
|
+
const tonalSpotVariant = {
|
|
1709
|
+
name: 'tonalSpot',
|
|
1710
|
+
palettes: {
|
|
1711
|
+
primary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
|
|
1712
|
+
secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
|
|
1713
|
+
tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
|
|
1714
|
+
neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
|
|
1715
|
+
neutralVariant: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
|
|
1716
|
+
error: ({ sourceColorHct }) => {
|
|
1717
|
+
const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
|
|
1718
|
+
return TonalPalette.fromHueAndChroma(errorHue, 60);
|
|
1719
|
+
},
|
|
1720
|
+
},
|
|
1721
|
+
customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(colorHct.hue, 16),
|
|
1722
|
+
};
|
|
1723
|
+
|
|
1724
|
+
const getVibrantNeutralHue = (sourceColorHct) => {
|
|
1725
|
+
return getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]);
|
|
1726
|
+
};
|
|
1727
|
+
const getVibrantNeutralChroma = (sourceColorHct) => {
|
|
1728
|
+
getVibrantNeutralHue(sourceColorHct);
|
|
1729
|
+
return 28;
|
|
1730
|
+
};
|
|
1731
|
+
const vibrantVariant = {
|
|
1732
|
+
name: 'vibrant',
|
|
1733
|
+
palettes: {
|
|
1734
|
+
primary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
|
|
1735
|
+
secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
|
|
1736
|
+
tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 71, 105, 140, 161, 253, 333, 360], [-72, 35, 24, -24, 62, 50, 62, -72]), 56),
|
|
1737
|
+
neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getVibrantNeutralHue(sourceColorHct), getVibrantNeutralChroma(sourceColorHct)),
|
|
1738
|
+
neutralVariant: ({ sourceColorHct }) => {
|
|
1739
|
+
const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
|
|
1740
|
+
const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
|
|
1741
|
+
return TonalPalette.fromHueAndChroma(vibrantNeutralHue, vibrantNeutralChroma * 1.29);
|
|
1742
|
+
},
|
|
1743
|
+
error: ({ sourceColorHct }) => {
|
|
1744
|
+
const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
|
|
1745
|
+
return TonalPalette.fromHueAndChroma(errorHue, 80);
|
|
1746
|
+
},
|
|
1747
|
+
},
|
|
1748
|
+
customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
|
|
1749
|
+
};
|
|
1750
|
+
|
|
1751
|
+
const Variants = {
|
|
1752
|
+
Expressive: expressiveVariant,
|
|
1753
|
+
Neutral: neutralVariant,
|
|
1754
|
+
TonalSpot: tonalSpotVariant,
|
|
1755
|
+
Vibrant: vibrantVariant,
|
|
1756
|
+
};
|
|
1757
|
+
|
|
1756
1758
|
const defaultColors = (colorService) => {
|
|
1757
1759
|
const getColor = (key) => {
|
|
1758
1760
|
return colorService.getColor(key).getMaterialColor();
|
|
@@ -2837,327 +2839,4 @@ class FontPluginImpl extends PluginImplAbstract {
|
|
|
2837
2839
|
}
|
|
2838
2840
|
}
|
|
2839
2841
|
|
|
2840
|
-
|
|
2841
|
-
Copyright (c) Microsoft Corporation.
|
|
2842
|
-
|
|
2843
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
2844
|
-
purpose with or without fee is hereby granted.
|
|
2845
|
-
|
|
2846
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
2847
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
2848
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
2849
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
2850
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
2851
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
2852
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
2853
|
-
***************************************************************************** */
|
|
2854
|
-
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
function __awaiter(thisArg, _arguments, P, generator) {
|
|
2858
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
2859
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
2860
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
2861
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
2862
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
2863
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
2864
|
-
});
|
|
2865
|
-
}
|
|
2866
|
-
|
|
2867
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
2868
|
-
var e = new Error(message);
|
|
2869
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
2870
|
-
};
|
|
2871
|
-
|
|
2872
|
-
const createOrUpdateFile = (filePath, content) => {
|
|
2873
|
-
try {
|
|
2874
|
-
if (!fs.existsSync(filePath)) {
|
|
2875
|
-
// Create the folder if necessary.
|
|
2876
|
-
const dirPath = path.dirname(filePath);
|
|
2877
|
-
if (!fs.existsSync(dirPath)) {
|
|
2878
|
-
fs.mkdirSync(dirPath, { recursive: true });
|
|
2879
|
-
}
|
|
2880
|
-
// Create the file with the provided content.
|
|
2881
|
-
fs.writeFileSync(filePath, content);
|
|
2882
|
-
console.log(`✅ File successfully created: ${filePath}`);
|
|
2883
|
-
}
|
|
2884
|
-
else {
|
|
2885
|
-
console.log(`⚠️ File already exists: ${filePath}`);
|
|
2886
|
-
replaceFileContent(filePath, /[\s\S]*/, content);
|
|
2887
|
-
}
|
|
2888
|
-
}
|
|
2889
|
-
catch (error) {
|
|
2890
|
-
console.error('❌ Error while creating the file:', error);
|
|
2891
|
-
}
|
|
2892
|
-
};
|
|
2893
|
-
const getFileContent = (filePath, searchPattern) => {
|
|
2894
|
-
try {
|
|
2895
|
-
// Vérifier si le fichier existe
|
|
2896
|
-
if (!fs.existsSync(filePath)) {
|
|
2897
|
-
console.error(`❌ The specified file does not exist: ${filePath}`);
|
|
2898
|
-
return null;
|
|
2899
|
-
}
|
|
2900
|
-
// Lire le contenu du fichier entier
|
|
2901
|
-
const fileContent = fs.readFileSync(filePath, 'utf8');
|
|
2902
|
-
// Si un motif est fourni, chercher le texte correspondant
|
|
2903
|
-
if (searchPattern) {
|
|
2904
|
-
if (typeof searchPattern === 'string') {
|
|
2905
|
-
const found = fileContent.includes(searchPattern)
|
|
2906
|
-
? searchPattern
|
|
2907
|
-
: false;
|
|
2908
|
-
console.log(found
|
|
2909
|
-
? `✅ The file contains the specified string: "${searchPattern}"`
|
|
2910
|
-
: `⚠️ The file does NOT contain the specified string: "${searchPattern}"`);
|
|
2911
|
-
return found;
|
|
2912
|
-
}
|
|
2913
|
-
else {
|
|
2914
|
-
const match = fileContent.match(searchPattern);
|
|
2915
|
-
if (match) {
|
|
2916
|
-
console.log(`✅ Found match: "${match[0]}"`);
|
|
2917
|
-
return match[0]; // Retourner le texte trouvé
|
|
2918
|
-
}
|
|
2919
|
-
else {
|
|
2920
|
-
console.log(`⚠️ No match found for the pattern: "${searchPattern.toString()}"`);
|
|
2921
|
-
return false; // Aucune correspondance trouvée
|
|
2922
|
-
}
|
|
2923
|
-
}
|
|
2924
|
-
}
|
|
2925
|
-
// Si aucun motif n'est fourni, retourner tout le contenu
|
|
2926
|
-
console.log(`✅ File content successfully retrieved.`);
|
|
2927
|
-
return fileContent;
|
|
2928
|
-
}
|
|
2929
|
-
catch (error) {
|
|
2930
|
-
console.error('❌ An error occurred while processing the file:', error);
|
|
2931
|
-
return null;
|
|
2932
|
-
}
|
|
2933
|
-
};
|
|
2934
|
-
const replaceFileContent = (filePath, searchPattern, replacement) => {
|
|
2935
|
-
try {
|
|
2936
|
-
const results = replaceInFileSync({
|
|
2937
|
-
files: filePath,
|
|
2938
|
-
from: searchPattern,
|
|
2939
|
-
to: replacement,
|
|
2940
|
-
});
|
|
2941
|
-
if (results.length > 0 && results[0].hasChanged) {
|
|
2942
|
-
console.log(`✅ Content successfully replaced in the file: ${filePath}`);
|
|
2943
|
-
}
|
|
2944
|
-
else {
|
|
2945
|
-
console.log(`⚠️ No replacement made. Here are some possible reasons:\n- The pattern ${searchPattern} was not found.\n- The file might already contain the expected content.`);
|
|
2946
|
-
}
|
|
2947
|
-
}
|
|
2948
|
-
catch (error) {
|
|
2949
|
-
console.error('❌ Error while replacing the file content:', error);
|
|
2950
|
-
}
|
|
2951
|
-
};
|
|
2952
|
-
const findTailwindCssFile = (startDir, searchPattern) => {
|
|
2953
|
-
const files = fs.readdirSync(startDir);
|
|
2954
|
-
for (const file of files) {
|
|
2955
|
-
const filePath = path.join(startDir, file);
|
|
2956
|
-
const stats = fs.statSync(filePath);
|
|
2957
|
-
if (stats.isDirectory()) {
|
|
2958
|
-
// Appeler récursivement si c'est un dossier
|
|
2959
|
-
const result = findTailwindCssFile(filePath, searchPattern);
|
|
2960
|
-
if (result)
|
|
2961
|
-
return result;
|
|
2962
|
-
}
|
|
2963
|
-
else if (file.endsWith('.css')) {
|
|
2964
|
-
// Lire chaque fichier .css
|
|
2965
|
-
const content = fs.readFileSync(filePath, 'utf8');
|
|
2966
|
-
if (content.includes(searchPattern)) {
|
|
2967
|
-
console.log('Fichier trouvé :', filePath);
|
|
2968
|
-
return filePath;
|
|
2969
|
-
}
|
|
2970
|
-
}
|
|
2971
|
-
}
|
|
2972
|
-
return null;
|
|
2973
|
-
};
|
|
2974
|
-
|
|
2975
|
-
const font = (fontStyles, responsiveBreakPoints) => {
|
|
2976
|
-
const createUtilities = ({ theme }) => {
|
|
2977
|
-
const pixelUnit = 'rem';
|
|
2978
|
-
const newUtilities = {};
|
|
2979
|
-
const baseTextStyle = (sizeValue) => ({
|
|
2980
|
-
fontSize: sizeValue.fontSize + pixelUnit,
|
|
2981
|
-
fontWeight: sizeValue.fontWeight,
|
|
2982
|
-
lineHeight: sizeValue.lineHeight + pixelUnit,
|
|
2983
|
-
letterSpacing: sizeValue.letterSpacing
|
|
2984
|
-
? sizeValue.letterSpacing + pixelUnit
|
|
2985
|
-
: null,
|
|
2986
|
-
fontFamily: theme('fontFamily.' + sizeValue.fontFamily),
|
|
2987
|
-
});
|
|
2988
|
-
const responsiveTextStyle = (sizeValue, breakPointName, breakPointRatio) => ({
|
|
2989
|
-
[`@media (min-width: ${theme('screens.' + breakPointName, {})})`]: {
|
|
2990
|
-
fontSize: sizeValue.fontSize * breakPointRatio + pixelUnit,
|
|
2991
|
-
lineHeight: sizeValue.lineHeight * breakPointRatio + pixelUnit,
|
|
2992
|
-
},
|
|
2993
|
-
});
|
|
2994
|
-
for (const [roleName, roleValue] of Object.entries(fontStyles)) {
|
|
2995
|
-
for (const [sizeName, sizeValue] of Object.entries(roleValue)) {
|
|
2996
|
-
newUtilities['.text-' + roleName + '-' + sizeName] = Object.assign(Object.assign({}, baseTextStyle(sizeValue)), Object.entries(responsiveBreakPoints).reduce((acc, [breakPointName, breakPointRatio]) => {
|
|
2997
|
-
acc = Object.assign(Object.assign({}, acc), responsiveTextStyle(sizeValue, breakPointName, breakPointRatio));
|
|
2998
|
-
return acc;
|
|
2999
|
-
}, {}));
|
|
3000
|
-
}
|
|
3001
|
-
}
|
|
3002
|
-
return newUtilities;
|
|
3003
|
-
};
|
|
3004
|
-
return plugin(({ addUtilities, theme, }) => {
|
|
3005
|
-
const newUtilities = createUtilities({ theme });
|
|
3006
|
-
addUtilities(newUtilities);
|
|
3007
|
-
});
|
|
3008
|
-
};
|
|
3009
|
-
|
|
3010
|
-
// from tailwindcss src/util/flattenColors
|
|
3011
|
-
const state = (colorKeys) => plugin((pluginArgs) => {
|
|
3012
|
-
addAllNewComponents(pluginArgs, {
|
|
3013
|
-
statePrefix: 'state',
|
|
3014
|
-
disabledStyles: {
|
|
3015
|
-
textOpacity: 0.38,
|
|
3016
|
-
backgroundOpacity: 0.12,
|
|
3017
|
-
},
|
|
3018
|
-
transition: {
|
|
3019
|
-
duration: 150,
|
|
3020
|
-
},
|
|
3021
|
-
}, colorKeys);
|
|
3022
|
-
}, {});
|
|
3023
|
-
const addAllNewComponents = ({ addComponents }, { statePrefix, disabledStyles, transition }, colorKeys) => {
|
|
3024
|
-
const newComponents = {};
|
|
3025
|
-
for (const isGroup of [false, true]) {
|
|
3026
|
-
const group = isGroup ? 'group-' : '';
|
|
3027
|
-
for (const colorName of colorKeys) {
|
|
3028
|
-
const className = `.${group}${statePrefix}-${colorName}`;
|
|
3029
|
-
newComponents[className] = {
|
|
3030
|
-
[`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
|
|
3031
|
-
[`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
|
|
3032
|
-
[`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
|
|
3033
|
-
};
|
|
3034
|
-
if (transition) {
|
|
3035
|
-
newComponents[className][`@apply transition-colors`] = {};
|
|
3036
|
-
newComponents[className][`@apply duration-${transition.duration}`] = {};
|
|
3037
|
-
}
|
|
3038
|
-
if (disabledStyles) {
|
|
3039
|
-
newComponents[className][`@apply ${group}disabled:text-on-surface/[${disabledStyles.textOpacity}]`] = {};
|
|
3040
|
-
newComponents[className][`@apply ${group}disabled:bg-on-surface/[${disabledStyles.backgroundOpacity}]`] = {};
|
|
3041
|
-
}
|
|
3042
|
-
}
|
|
3043
|
-
}
|
|
3044
|
-
for (const colorName of colorKeys) {
|
|
3045
|
-
for (const stateName of ['hover', 'active', 'focus', 'disabled']) {
|
|
3046
|
-
const className = `.${stateName}-${statePrefix}-${colorName}`;
|
|
3047
|
-
if (stateName === 'active' || stateName === 'focus') {
|
|
3048
|
-
newComponents[className] = {
|
|
3049
|
-
[`@apply bg-${colorName}/[0.12]`]: {},
|
|
3050
|
-
};
|
|
3051
|
-
}
|
|
3052
|
-
else if (stateName === 'hover') {
|
|
3053
|
-
newComponents[className] = {
|
|
3054
|
-
[`@apply bg-${colorName}/[0.08]`]: {},
|
|
3055
|
-
};
|
|
3056
|
-
}
|
|
3057
|
-
else if (stateName === 'disabled') {
|
|
3058
|
-
newComponents[className] = {
|
|
3059
|
-
[`@apply text-on-surface/[${disabledStyles.textOpacity}]`]: {},
|
|
3060
|
-
};
|
|
3061
|
-
newComponents[className] = {
|
|
3062
|
-
[`@apply bg-on-surface/[${disabledStyles.backgroundOpacity}]`]: {},
|
|
3063
|
-
};
|
|
3064
|
-
}
|
|
3065
|
-
}
|
|
3066
|
-
}
|
|
3067
|
-
addComponents(newComponents);
|
|
3068
|
-
};
|
|
3069
|
-
|
|
3070
|
-
class TailwindPlugin extends PluginAbstract {
|
|
3071
|
-
constructor() {
|
|
3072
|
-
super(...arguments);
|
|
3073
|
-
this.dependencies = [FontPlugin];
|
|
3074
|
-
this.name = 'tailwind';
|
|
3075
|
-
this.pluginClass = TailwindImplPlugin;
|
|
3076
|
-
}
|
|
3077
|
-
}
|
|
3078
|
-
class TailwindImplPlugin extends PluginImplAbstract {
|
|
3079
|
-
onInit() {
|
|
3080
|
-
var _a, _b;
|
|
3081
|
-
var _c, _d;
|
|
3082
|
-
(_a = (_c = this.options).darkMode) !== null && _a !== void 0 ? _a : (_c.darkMode = 'class');
|
|
3083
|
-
(_b = (_d = this.options).responsiveBreakPoints) !== null && _b !== void 0 ? _b : (_d.responsiveBreakPoints = {
|
|
3084
|
-
lg: 1.125,
|
|
3085
|
-
});
|
|
3086
|
-
}
|
|
3087
|
-
load() {
|
|
3088
|
-
var _a;
|
|
3089
|
-
const searchKeyword = '@plugin "@udixio/tailwind"';
|
|
3090
|
-
const tailwindCssPath = findTailwindCssFile(process.cwd(), searchKeyword);
|
|
3091
|
-
if (!tailwindCssPath) {
|
|
3092
|
-
throw new Error('Tailwind plugin not found. Please use it first. (@plugin "@udixio/tailwind")');
|
|
3093
|
-
}
|
|
3094
|
-
const searchPattern = /@import ["']tailwindcss["'];/;
|
|
3095
|
-
const replacement = `@import 'tailwindcss';\n@import "./udixio.css";`;
|
|
3096
|
-
if (!getFileContent(tailwindCssPath, /@import\s+"\.\/udixio\.css";/)) {
|
|
3097
|
-
replaceFileContent(tailwindCssPath, searchPattern, replacement);
|
|
3098
|
-
}
|
|
3099
|
-
const cssFilePath = path__default.dirname(tailwindCssPath);
|
|
3100
|
-
const colors = {};
|
|
3101
|
-
for (const isDark of [false, true]) {
|
|
3102
|
-
this.api.themes.update({ isDark: isDark });
|
|
3103
|
-
for (const [key, value] of this.api.colors.getColors().entries()) {
|
|
3104
|
-
const newKey = key
|
|
3105
|
-
.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
|
|
3106
|
-
.toLowerCase();
|
|
3107
|
-
(_a = colors[newKey]) !== null && _a !== void 0 ? _a : (colors[newKey] = { light: '', dark: '' });
|
|
3108
|
-
colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
|
|
3109
|
-
}
|
|
3110
|
-
}
|
|
3111
|
-
const { fontStyles, fontFamily } = this.api.plugins
|
|
3112
|
-
.getPlugin(FontPlugin)
|
|
3113
|
-
.getInstance()
|
|
3114
|
-
.getFonts();
|
|
3115
|
-
createOrUpdateFile(path__default.join(cssFilePath, 'udixio.css'), `
|
|
3116
|
-
@custom-variant dark (&:where(.dark, .dark *));
|
|
3117
|
-
@theme {
|
|
3118
|
-
--color-*: initial;
|
|
3119
|
-
${Object.entries(colors)
|
|
3120
|
-
.map(([key, value]) => `--color-${key}: ${value.light};`)
|
|
3121
|
-
.join('\n ')}
|
|
3122
|
-
}
|
|
3123
|
-
@layer theme {
|
|
3124
|
-
.dark {
|
|
3125
|
-
${Object.entries(colors)
|
|
3126
|
-
.map(([key, value]) => `--color-${key}: ${value.dark};`)
|
|
3127
|
-
.join('\n ')}
|
|
3128
|
-
}
|
|
3129
|
-
}
|
|
3130
|
-
`);
|
|
3131
|
-
const plugins = [
|
|
3132
|
-
state(Object.keys(colors)),
|
|
3133
|
-
font(fontStyles, this.options.responsiveBreakPoints),
|
|
3134
|
-
];
|
|
3135
|
-
return plugin.withOptions(
|
|
3136
|
-
// 1) factory(options) → la fonction “handler” du plugin
|
|
3137
|
-
(options = {}) => {
|
|
3138
|
-
return function (api) {
|
|
3139
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
3140
|
-
plugins.forEach((plugin) => {
|
|
3141
|
-
plugin.handler(api);
|
|
3142
|
-
});
|
|
3143
|
-
});
|
|
3144
|
-
};
|
|
3145
|
-
},
|
|
3146
|
-
// 2) config(options) → objet à merger dans tailwind.config
|
|
3147
|
-
(options = {}) => {
|
|
3148
|
-
return {
|
|
3149
|
-
theme: {
|
|
3150
|
-
fontFamily,
|
|
3151
|
-
},
|
|
3152
|
-
};
|
|
3153
|
-
});
|
|
3154
|
-
}
|
|
3155
|
-
}
|
|
3156
|
-
|
|
3157
|
-
const createTheme = () => {
|
|
3158
|
-
const app = bootstrapFromConfig();
|
|
3159
|
-
const plugin = app.plugins.getPlugin(TailwindPlugin).getInstance();
|
|
3160
|
-
return plugin.load();
|
|
3161
|
-
};
|
|
3162
|
-
|
|
3163
|
-
export { API, AppContainer, AppModule, ColorApi, ColorManager, ColorModule, ConfigModule, ConfigService, ConfigurableColor, ContrastCurve, DynamicColor, FontFamily, FontPlugin, PluginAbstract, PluginApi, PluginImplAbstract, PluginModule, Scheme, SchemeManager, TailwindPlugin, ThemeApi, ThemeModule, ToneDeltaPair, Variant, VariantManager, bootstrap, bootstrapFromConfig, createTheme, defaultColors, defineConfig, expressiveVariant, extendSpecVersion, font, getPiecewiseHue, getRotatedHue, highestSurface, importContainer, neutralVariant, state, tonalSpotVariant, vibrantVariant };
|
|
2842
|
+
export { API, AppContainer, AppModule, ColorApi, ColorManager, ColorModule, ConfigModule, ConfigService, ConfigurableColor, ContrastCurve, DynamicColor, FontFamily, FontPlugin, PluginAbstract, PluginApi, PluginImplAbstract, PluginModule, Scheme, SchemeManager, ThemeApi, ThemeModule, ToneDeltaPair, Variant, VariantManager, Variants, bootstrap, bootstrapFromConfig, defaultColors, defineConfig, expressiveVariant, extendSpecVersion, getPiecewiseHue, getRotatedHue, highestSurface, importContainer, neutralVariant, tonalSpotVariant, vibrantVariant };
|
package/package.json
CHANGED
package/src/lib/index.d.ts
CHANGED
|
@@ -2,3 +2,9 @@ export * from './tonal-spot.variant';
|
|
|
2
2
|
export * from './vibrant.variant';
|
|
3
3
|
export * from './expressive.variant';
|
|
4
4
|
export * from './neutral.variant';
|
|
5
|
+
export declare const Variants: {
|
|
6
|
+
Expressive: import("..").Variant;
|
|
7
|
+
Neutral: import("..").Variant;
|
|
8
|
+
TonalSpot: import("..").Variant;
|
|
9
|
+
Vibrant: import("..").Variant;
|
|
10
|
+
};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
export declare const createOrUpdateFile: (filePath: string, content: string) => void;
|
|
2
|
-
export declare const getFileContent: (filePath: string, searchPattern?: RegExp | string) => string | false | null;
|
|
3
|
-
export declare const replaceFileContent: (filePath: string, searchPattern: RegExp | string, replacement: string) => void;
|
|
4
|
-
export declare const findTailwindCssFile: (startDir: string, searchPattern: string) => string | null;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { PluginAbstract, PluginImplAbstract } from '../../plugin';
|
|
2
|
-
import { FontPlugin } from '../font';
|
|
3
|
-
import plugin from 'tailwindcss/plugin';
|
|
4
|
-
interface TailwindPluginOptions {
|
|
5
|
-
darkMode?: 'class' | 'media';
|
|
6
|
-
responsiveBreakPoints?: Record<string, number>;
|
|
7
|
-
subThemes?: Record<string, string>;
|
|
8
|
-
}
|
|
9
|
-
export declare class TailwindPlugin extends PluginAbstract<TailwindImplPlugin, TailwindPluginOptions> {
|
|
10
|
-
dependencies: (typeof FontPlugin)[];
|
|
11
|
-
name: string;
|
|
12
|
-
pluginClass: typeof TailwindImplPlugin;
|
|
13
|
-
}
|
|
14
|
-
declare class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
|
|
15
|
-
onInit(): void;
|
|
16
|
-
load(): ReturnType<typeof plugin.withOptions>;
|
|
17
|
-
}
|
|
18
|
-
export {};
|