purgetss 6.0.14 → 6.1.0

package/bin/purgetss

@@ -64,6 +64,20 @@ program
 		purgetss.buildLegacy();
 	});
 
+program
+	.command('shades')
+	.alias('s')
+	.argument('[hexcode]', 'The base hexcode value')
+	.argument('[name]', 'Name of the color shades')
+	.option('-q, --quotes', 'Keep double quotes in config.js')
+	.option('-r, --random', 'Generates shades from a random color')
+	.option('-l, --log', `Log the generated shades instead of saving them`)
+	.description(`Color shades generator from a given hexcolor`)
+	.help(`Generates color shades from a given hexcolor to use in your project`)
+	.action((args, options, logger) => {
+		purgetss.shades(args, options);
+	});
+
 program
 	.command('watch')
 	.alias('w')

package/dist/glossary/compoundClasses/gridFlow.md

@@ -2,7 +2,7 @@
 // Property(ies): layout
 // Description: Grid Flow - layout
 // Component(s): Ti.UI.View
-'.grid': { layout: 'horizontal' }
-'.grid-flow-col': { layout: 'horizontal' }
-'.grid-flow-row': { layout: 'vertical' }
+'.grid': { layout: 'horizontal', width: '100%' }
+'.grid-flow-col': { layout: 'horizontal', width: '100%' }
+'.grid-flow-row': { layout: 'vertical', height: '100%' }
 ```

package/dist/glossary/compoundClasses/widthHeight.md

@@ -0,0 +1,68 @@
+```scss
+// Property(ies): width and height
+// Component(s): Ti.UI.View, Ti.Blob, Ti.Media.VideoPlayer, MovieSize, Ti.UI.ActivityIndicator, Ti.UI.Android.CardView, Ti.UI.Android.DrawerLayout, Ti.UI.Android.SearchView, Ti.UI.Animation, Ti.UI.Button, Ti.UI.ButtonBar, Ti.UI.DashboardView, Dimension, DimensionWithAbsolutes, Ti.UI.ImageView, Ti.UI.Label, Ti.UI.ListView, Ti.UI.MaskedImage, Ti.UI.NavigationWindow, Ti.UI.OptionBar, Ti.UI.Picker, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.ScrollView, Ti.UI.ScrollableView, Ti.UI.SearchBar, Size, Ti.UI.Slider, Ti.UI.Switch, Ti.UI.TabbedBar, Ti.UI.TableView, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField, Ti.UI.Toolbar, Ti.UI.WebView, Ti.UI.Window, openWindowParams, Ti.UI.iOS.BlurView, Ti.UI.iOS.CoverFlowView, CoverFlowImageType, Ti.UI.iOS.LivePhotoView, Ti.UI.iOS.SplitWindow, Ti.UI.iOS.Stepper, BarItemType, Ti.UI.iPad.Popover
+'.wh-0': { width: 0, height: 0 }
+'.wh-1': { width: 4, height: 4 }
+'.wh-2': { width: 8, height: 8 }
+'.wh-3': { width: 12, height: 12 }
+'.wh-4': { width: 16, height: 16 }
+'.wh-5': { width: 20, height: 20 }
+'.wh-6': { width: 24, height: 24 }
+'.wh-7': { width: 28, height: 28 }
+'.wh-8': { width: 32, height: 32 }
+'.wh-9': { width: 36, height: 36 }
+'.wh-10': { width: 40, height: 40 }
+'.wh-11': { width: 44, height: 44 }
+'.wh-12': { width: 48, height: 48 }
+'.wh-14': { width: 56, height: 56 }
+'.wh-16': { width: 64, height: 64 }
+'.wh-20': { width: 80, height: 80 }
+'.wh-24': { width: 96, height: 96 }
+'.wh-28': { width: 112, height: 112 }
+'.wh-32': { width: 128, height: 128 }
+'.wh-36': { width: 144, height: 144 }
+'.wh-40': { width: 160, height: 160 }
+'.wh-44': { width: 176, height: 176 }
+'.wh-48': { width: 192, height: 192 }
+'.wh-52': { width: 208, height: 208 }
+'.wh-56': { width: 224, height: 224 }
+'.wh-60': { width: 240, height: 240 }
+'.wh-64': { width: 256, height: 256 }
+'.wh-72': { width: 288, height: 288 }
+'.wh-80': { width: 320, height: 320 }
+'.wh-96': { width: 384, height: 384 }
+'.wh-auto': { width: Ti.UI.SIZE, height: Ti.UI.SIZE }
+'.wh-px': { width: '1px', height: '1px' }
+'.wh-0.5': { width: 2, height: 2 }
+'.wh-1.5': { width: 6, height: 6 }
+'.wh-2.5': { width: 10, height: 10 }
+'.wh-3.5': { width: 14, height: 14 }
+'.wh-1/2': { width: '50%', height: '50%' }
+'.wh-1/3': { width: '33.333333%', height: '33.333333%' }
+'.wh-2/3': { width: '66.666667%', height: '66.666667%' }
+'.wh-1/4': { width: '25%', height: '25%' }
+'.wh-2/4': { width: '50%', height: '50%' }
+'.wh-3/4': { width: '75%', height: '75%' }
+'.wh-1/5': { width: '20%', height: '20%' }
+'.wh-2/5': { width: '40%', height: '40%' }
+'.wh-3/5': { width: '60%', height: '60%' }
+'.wh-4/5': { width: '80%', height: '80%' }
+'.wh-1/6': { width: '16.666667%', height: '16.666667%' }
+'.wh-2/6': { width: '33.333333%', height: '33.333333%' }
+'.wh-3/6': { width: '50%', height: '50%' }
+'.wh-4/6': { width: '66.666667%', height: '66.666667%' }
+'.wh-5/6': { width: '83.333333%', height: '83.333333%' }
+'.wh-1/12': { width: '8.333333%', height: '8.333333%' }
+'.wh-2/12': { width: '16.666667%', height: '16.666667%' }
+'.wh-3/12': { width: '25%', height: '25%' }
+'.wh-4/12': { width: '33.333333%', height: '33.333333%' }
+'.wh-5/12': { width: '41.666667%', height: '41.666667%' }
+'.wh-6/12': { width: '50%', height: '50%' }
+'.wh-7/12': { width: '58.333333%', height: '58.333333%' }
+'.wh-8/12': { width: '66.666667%', height: '66.666667%' }
+'.wh-9/12': { width: '75%', height: '75%' }
+'.wh-10/12': { width: '83.333333%', height: '83.333333%' }
+'.wh-11/12': { width: '91.666667%', height: '91.666667%' }
+'.wh-full': { width: '100%', height: '100%' }
+'.wh-screen': { width: Ti.UI.FILL, height: Ti.UI.FILL }
+```

package/dist/tailwind.tss

@@ -1,4 +1,4 @@
-// Based on Tailwind CSS v3.1.8: A utility-first CSS framework for rapidly building custom designs. ( https://tailwindcss.com )
+// Based on Tailwind CSS v3.2.0: A utility-first CSS framework for rapidly building custom designs. ( https://tailwindcss.com )
 // Created by Adam Wathan ( https://twitter.com/adamwathan ).
 
 // Tailwind-like styles
@@ -1524,9 +1524,9 @@
 // Property(ies): layout
 // Description: Grid Flow - layout
 // Component(s): Ti.UI.View
-'.grid': { layout: 'horizontal' }
-'.grid-flow-col': { layout: 'horizontal' }
-'.grid-flow-row': { layout: 'vertical' }
+'.grid': { layout: 'horizontal', width: '100%' }
+'.grid-flow-col': { layout: 'horizontal', width: '100%' }
+'.grid-flow-row': { layout: 'vertical', height: '100%' }
 
 // Property(ies): width - For Grid Template Columns
 // Component(s): Ti.UI.ActivityIndicator, Ti.UI.Animation, Ti.UI.iPad.Popover, Ti.UI.View, Ti.UI.Window
@@ -2781,6 +2781,73 @@
 '.zoom-out-125': { animationProperties: { close: { scale: 1.25 }, complete: { scale: 1 } } }
 '.zoom-out-150': { animationProperties: { close: { scale: 1.5 }, complete: { scale: 1 } } }
 
+// Property(ies): width and height
+// Component(s): Ti.UI.View, Ti.Blob, Ti.Media.VideoPlayer, MovieSize, Ti.UI.ActivityIndicator, Ti.UI.Android.CardView, Ti.UI.Android.DrawerLayout, Ti.UI.Android.SearchView, Ti.UI.Animation, Ti.UI.Button, Ti.UI.ButtonBar, Ti.UI.DashboardView, Dimension, DimensionWithAbsolutes, Ti.UI.ImageView, Ti.UI.Label, Ti.UI.ListView, Ti.UI.MaskedImage, Ti.UI.NavigationWindow, Ti.UI.OptionBar, Ti.UI.Picker, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.ScrollView, Ti.UI.ScrollableView, Ti.UI.SearchBar, Size, Ti.UI.Slider, Ti.UI.Switch, Ti.UI.TabbedBar, Ti.UI.TableView, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField, Ti.UI.Toolbar, Ti.UI.WebView, Ti.UI.Window, openWindowParams, Ti.UI.iOS.BlurView, Ti.UI.iOS.CoverFlowView, CoverFlowImageType, Ti.UI.iOS.LivePhotoView, Ti.UI.iOS.SplitWindow, Ti.UI.iOS.Stepper, BarItemType, Ti.UI.iPad.Popover
+'.wh-0': { width: 0, height: 0 }
+'.wh-1': { width: 4, height: 4 }
+'.wh-2': { width: 8, height: 8 }
+'.wh-3': { width: 12, height: 12 }
+'.wh-4': { width: 16, height: 16 }
+'.wh-5': { width: 20, height: 20 }
+'.wh-6': { width: 24, height: 24 }
+'.wh-7': { width: 28, height: 28 }
+'.wh-8': { width: 32, height: 32 }
+'.wh-9': { width: 36, height: 36 }
+'.wh-10': { width: 40, height: 40 }
+'.wh-11': { width: 44, height: 44 }
+'.wh-12': { width: 48, height: 48 }
+'.wh-14': { width: 56, height: 56 }
+'.wh-16': { width: 64, height: 64 }
+'.wh-20': { width: 80, height: 80 }
+'.wh-24': { width: 96, height: 96 }
+'.wh-28': { width: 112, height: 112 }
+'.wh-32': { width: 128, height: 128 }
+'.wh-36': { width: 144, height: 144 }
+'.wh-40': { width: 160, height: 160 }
+'.wh-44': { width: 176, height: 176 }
+'.wh-48': { width: 192, height: 192 }
+'.wh-52': { width: 208, height: 208 }
+'.wh-56': { width: 224, height: 224 }
+'.wh-60': { width: 240, height: 240 }
+'.wh-64': { width: 256, height: 256 }
+'.wh-72': { width: 288, height: 288 }
+'.wh-80': { width: 320, height: 320 }
+'.wh-96': { width: 384, height: 384 }
+'.wh-auto': { width: Ti.UI.SIZE, height: Ti.UI.SIZE }
+'.wh-px': { width: '1px', height: '1px' }
+'.wh-0.5': { width: 2, height: 2 }
+'.wh-1.5': { width: 6, height: 6 }
+'.wh-2.5': { width: 10, height: 10 }
+'.wh-3.5': { width: 14, height: 14 }
+'.wh-1/2': { width: '50%', height: '50%' }
+'.wh-1/3': { width: '33.333333%', height: '33.333333%' }
+'.wh-2/3': { width: '66.666667%', height: '66.666667%' }
+'.wh-1/4': { width: '25%', height: '25%' }
+'.wh-2/4': { width: '50%', height: '50%' }
+'.wh-3/4': { width: '75%', height: '75%' }
+'.wh-1/5': { width: '20%', height: '20%' }
+'.wh-2/5': { width: '40%', height: '40%' }
+'.wh-3/5': { width: '60%', height: '60%' }
+'.wh-4/5': { width: '80%', height: '80%' }
+'.wh-1/6': { width: '16.666667%', height: '16.666667%' }
+'.wh-2/6': { width: '33.333333%', height: '33.333333%' }
+'.wh-3/6': { width: '50%', height: '50%' }
+'.wh-4/6': { width: '66.666667%', height: '66.666667%' }
+'.wh-5/6': { width: '83.333333%', height: '83.333333%' }
+'.wh-1/12': { width: '8.333333%', height: '8.333333%' }
+'.wh-2/12': { width: '16.666667%', height: '16.666667%' }
+'.wh-3/12': { width: '25%', height: '25%' }
+'.wh-4/12': { width: '33.333333%', height: '33.333333%' }
+'.wh-5/12': { width: '41.666667%', height: '41.666667%' }
+'.wh-6/12': { width: '50%', height: '50%' }
+'.wh-7/12': { width: '58.333333%', height: '58.333333%' }
+'.wh-8/12': { width: '66.666667%', height: '66.666667%' }
+'.wh-9/12': { width: '75%', height: '75%' }
+'.wh-10/12': { width: '83.333333%', height: '83.333333%' }
+'.wh-11/12': { width: '91.666667%', height: '91.666667%' }
+'.wh-full': { width: '100%', height: '100%' }
+'.wh-screen': { width: Ti.UI.FILL, height: Ti.UI.FILL }
+
 // Property(ies): backgroundGradient: colors - From Color
 // Component(s): Ti.UI.ListItem, Ti.UI.View
 '.from-transparent': { backgroundGradient: { colors: [ 'transparent', 'transparent' ] } }

package/index.js

@@ -99,7 +99,7 @@ const srcMaterialSymbolsTSSFile = path.resolve(__dirname, './dist/materialsymbol
 const srcConfigFile = path.resolve(__dirname, './lib/templates/purgetss.config.js');
 
 const configFile = (fs.existsSync(projectsConfigJS)) ? require(projectsConfigJS) : require(srcConfigFile);
-configFile.corePlugins = configFile.corePlugins ?? {};
+configFile.plugins = configFile.plugins ?? {};
 configFile.purge = configFile.purge ?? { mode: 'all' };
 configFile.theme.extend = configFile.theme.extend ?? {};
 configFile.fonts = configFile.fonts ?? { mode: 'fileName' };
@@ -153,6 +153,7 @@ function purgeClasses(options) {
 }
 module.exports.purgeClasses = purgeClasses;
 
+//! Command: init
 function init(options) {
 	// config file
 	if (!fs.existsSync(projectsConfigJS)) {
@@ -287,7 +288,6 @@ function cleanClasses(uniqueClasses) {
 	return cleanClassNames;
 }
 
-//! Command: init
 function createConfigFile() {
 	if (alloyProject()) {
 		makeSureFolderExists(projectsPurgeTSSFolder);
@@ -360,6 +360,57 @@ function create(args, options) {
 }
 exports.create = create;
 
+//! Command: shades
+function shades(args, options) {
+	delete configFile.fonts;
+
+	let chroma = require('chroma-js');
+	let generateColorShades = require('./lib/color-shades/generateColorShades');
+	let referenceColorFamilies = require('./lib/color-shades/tailwind').filter((item) => {
+		return item.name !== 'warmGray' &&
+			item.name !== 'trueGray' &&
+			item.name !== 'gray' &&
+			item.name !== 'coolGray' &&
+			item.name !== 'blueGray'
+	});
+
+	let colorFamily = (options.random || !args.hexcode) ? generateColorShades(chroma.random(), referenceColorFamilies) : generateColorShades(args.hexcode, referenceColorFamilies);
+	if (args.name) colorFamily.name = args.name;
+	colorFamily.name = colorFamily.name.replace(/'/g, '');
+
+	let colorObject = createColorObject(colorFamily, colorFamily.hexcode);
+
+	if (!configFile['theme']['extend']['colors']) configFile['theme']['extend']['colors'] = {};
+	configFile['theme']['extend']['colors'][colorObject.name] = colorObject.shades;
+
+	if (alloyProject() && !options.log) {
+		fs.writeFileSync(projectsConfigJS, 'module.exports = ' + cleanDoubleQuotes(configFile, options.quotes), 'utf8', err => { throw err; });
+		logger.info(`${chalk.bgHex(colorFamily.hexcode).bold(`“${colorFamily.name}”`)} ${chalk.hex(colorFamily.hexcode)(`(${colorFamily.hexcode}) saved in`)}`, chalk.yellow('config.js'));
+	} else {
+		logger.info(`${chalk.bgHex(colorFamily.hexcode).bold(`“${colorFamily.name}”`)} ${chalk.hex(colorFamily.hexcode)(`(${colorFamily.hexcode})`)}\n${cleanDoubleQuotes({ colors: { [colorObject.name]: colorObject.shades } }, options.quotes)}`);
+	}
+}
+exports.shades = shades;
+
+function cleanDoubleQuotes(configFile, quotes = false) {
+	let json = JSON.stringify(configFile, null, 2);
+
+	if (quotes) return json;
+
+	json = json.replace(/"([^"]+)":/g, (match, p1) => (p1.match(/[._-]/)) ? `'${p1}':` : `${p1}:`);
+
+	return json.replaceAll("\"", "'");
+}
+
+function createColorObject(family, hexcode) {
+	let colors = {};
+	let shades = { default: hexcode };
+	family.shades.forEach((shade) => shades[shade.number] = shade.hexcode);
+	colors.name = family.name.toLowerCase().split(" ").join("-");
+	colors.shades = shades;
+	return colors;
+}
+
 function createProject(workspace, argsName, projectID, options) {
 	let projectName = `"${argsName}"`;
 	const { exec } = require("child_process");
@@ -367,35 +418,35 @@ function createProject(workspace, argsName, projectID, options) {
 
 	logger.info('Creating a new Titanium project');
 
-	let tiCreateCommand = `ti create -t app -p all -n ${projectName} --no-prompt --id ${projectID}`;
+	let tiCreateCommand = `ti create - t app - p all - n ${projectName} --no - prompt--id ${projectID}`;
 	exec(tiCreateCommand, (error) => {
 		if (error) return logger.error(error);
 
-		let fonts = (options.vendor) ? `&& purgetss f -m -v=${options.vendor}` : '';
+		let fonts = (options.vendor) ? `&& purgetss f - m - v=${options.vendor}` : '';
 
 		if (options.vendor) {
 			logger.info('Installing requested fonts');
 		}
 
-		let cdToProject = `cd ${workspace}/${projectName} && alloy new && purgetss w && purgetss b ${fonts}`;
+		let cdToProject = `cd ${workspace} / ${projectName} && alloy new && purgetss w && purgetss b ${fonts}`;
 		exec(cdToProject, (error) => {
 			if (error) return logger.error(error);
 
 			let theOpenCommand;
 			if (commandExistsSync('code')) {
-				theOpenCommand = `cd ${workspace}/${projectName} && code .`;
+				theOpenCommand = `cd ${workspace} / ${projectName} && code.`;
 			} else if (commandExistsSync('subl')) {
-				theOpenCommand = `cd ${workspace}/${projectName} && subl .`;
+				theOpenCommand = `cd ${workspace} / ${projectName} && subl.`;
 			} else {
-				theOpenCommand = `cd ${workspace}/${projectName} && open .`;
+				theOpenCommand = `cd ${workspace} / ${projectName} && open.`;
 			}
 
 			if (options.tailwind) {
 				logger.info('Installing Tailwind CSS');
 
-				fs.writeFileSync(`${workspace}/${argsName}/package.json`, JSON.stringify({ "name": `${argsName.replace(/ /g, '-').toLowerCase()}`, "private": true }));
+				fs.writeFileSync(`${workspace} / ${argsName} / package.json`, JSON.stringify({ "name": `${argsName.replace(/ /g, '-').toLowerCase()}`, "private": true }));
 
-				let installTailwind = `cd ${workspace}/${projectName} && npm init -y && npm i tailwindcss -D && npx tailwindcss init`;
+				let installTailwind = `cd ${workspace} / ${projectName} && npm init - y && npm i tailwindcss - D && npx tailwindcss init`;
 				exec(installTailwind, (error) => {
 					if (error) return logger.error(error);
 
@@ -465,7 +516,7 @@ function buildFonts(options) {
 				let fontFamilyName = fontMeta.postScriptName.replace(/\//g, '');
 				//! Maybe this is deprecated
 				if (configFile.fonts.mode.toLowerCase() === 'postscriptname' || configFile.fonts.mode.toLowerCase() === 'postscript' || configFile.fonts.mode.toLowerCase() === 'ps') {
-					tssClasses += `\n'.${fontFamilyName}': { font: { fontFamily: '${fontFamilyName}' } }\n`;
+					tssClasses += `\n'.${fontFamilyName.toLowerCase()}': { font: { fontFamily: '${fontFamilyName}' } }\n`;
 				} else {
 					tssClasses += `\n'.${getFileName(file)}': { font: { fontFamily: '${fontFamilyName}' } }\n`;
 				}
@@ -1528,9 +1579,9 @@ function combineAllValues(base, defaultTheme) {
 		delete configFile.theme.fontFamily;
 	}
 
-	// !Delete corePlugins specified in the config file
-	let corePlugins = Array.isArray(configFile.corePlugins) ? configFile.corePlugins : Object.keys(configFile.corePlugins).map(key => key);
-	_.each(corePlugins, value => {
+	// !Delete plugins specified in the config file
+	let plugins = Array.isArray(configFile.plugins) ? configFile.plugins : Object.keys(configFile.plugins).map(key => key);
+	_.each(plugins, value => {
 		delete allValues[value];
 		delete configFile.theme[value];
 	});

package/lib/color-shades/defaultHexcodes.js

@@ -0,0 +1,14 @@
+module.exports = [
+	"#0fa968",
+	"#e63f66",
+	"#ea546c",
+	"#5a03d5",
+	"#6374ae",
+	"#bc560a",
+	"#438e96",
+	"#ba7264",
+	"#e91f64",
+	"#82bd69",
+	"#ea9daa",
+	"#c4544a",
+];

package/lib/color-shades/findClosestColor.js

@@ -0,0 +1,29 @@
+let chroma = require('chroma-js');
+
+const findClosestColor = (hexcode, referenceColors) => {
+
+	// Add DELTA key / value to array of objects
+	referenceColors.forEach((color) => {
+		color.shades = color.shades.map((shade) => ({ ...shade, delta: chroma.deltaE(hexcode, shade.hexcode) }))
+	});
+
+	// Calculate the lowest DELTA per color
+	referenceColors.forEach((color) => {
+		color.closestShade = color.shades.reduce((previous, current) => previous.delta < current.delta ? previous : current)
+	});
+
+	// Calculate the color family with the lowest DELTA
+	let closestColorFamily = referenceColors.reduce((previous, current) => previous.closestShade.delta < current.closestShade.delta ? previous : current)
+
+	// Add lightness difference key / value to array of objects
+	closestColorFamily.shades = closestColorFamily.shades.map((shade) => ({
+		...shade,
+		lightnessDiff: Math.abs(chroma(shade.hexcode).get('hsl.l') - chroma(hexcode).get('hsl.l'))
+	}))
+
+	closestColorFamily.closestShadeLightness = closestColorFamily.shades.reduce((previous, current) => previous.lightnessDiff < current.lightnessDiff ? previous : current);
+
+	return closestColorFamily
+}
+
+module.exports = findClosestColor;

package/lib/color-shades/generateColorShades.js

@@ -0,0 +1,55 @@
+const ntc = require('ntcjs');
+
+let uuidv4 = require('uuid').v4;
+let chroma = require('chroma-js');
+let findClosestColor = require('./findClosestColor');
+
+const generateColorShades = (hexcode, referenceColors) => {
+	const closestColorFamily = findClosestColor(hexcode, referenceColors)
+
+	let inputHue = chroma(hexcode).get('hsl.h');
+	let matchHue = chroma(closestColorFamily.closestShadeLightness.hexcode).get('hsl.h');
+
+	let hueDifference = (inputHue - (matchHue || 0));
+
+	let saturationRatio = chroma(hexcode).get('hsl.s') / chroma(closestColorFamily.closestShadeLightness.hexcode).get('hsl.s');
+
+	if (hueDifference == 0) {
+		hueDifference = matchHue.toString();
+	} else if (hueDifference > 0) {
+		hueDifference = '+' + hueDifference;
+	} else {
+		hueDifference = hueDifference.toString();
+	}
+
+	let generatedColorFamily = {}
+
+	generatedColorFamily.id = uuidv4()
+	generatedColorFamily.hexcode = chroma(hexcode).hex()
+	generatedColorFamily.name = ntc.name(`${hexcode}`)[1]
+
+	generatedColorFamily.shades = closestColorFamily.shades.map((color) => {
+		let newColor = color.hexcode
+		let newSaturation = chroma(newColor).get('hsl.s') * saturationRatio
+
+		newColor = chroma(newColor).set('hsl.s', newSaturation).hex()
+		newColor = chroma(newColor).set('hsl.h', hueDifference).hex()
+
+		if (closestColorFamily.closestShadeLightness.number == color.number) {
+			newColor = chroma(hexcode).hex()
+		}
+
+		return {
+			number: color.number,
+			hexcode: newColor,
+			hue: Math.round(chroma(newColor).get('hsl.h')),
+			saturation: Math.round(chroma(newColor).get('hsl.s') * 100),
+			lightness: Math.round(chroma(newColor).get('hsl.l') * 100),
+			luminance: Math.round(chroma(newColor).luminance() * 100),
+		}
+	})
+
+	return generatedColorFamily
+}
+
+module.exports = generateColorShades;

package/lib/color-shades/tailwind.js

@@ -0,0 +1,332 @@
+module.exports = [
+	{
+		name: 'rose',
+		shades: [
+			{ number: 50, hexcode: '#fff1f2' },
+			{ number: 100, hexcode: '#ffe4e6' },
+			{ number: 200, hexcode: '#fecdd3' },
+			{ number: 300, hexcode: '#fda4af' },
+			{ number: 400, hexcode: '#fb7185' },
+			{ number: 500, hexcode: '#f43f5e' },
+			{ number: 600, hexcode: '#e11d48' },
+			{ number: 700, hexcode: '#be123c' },
+			{ number: 800, hexcode: '#9f1239' },
+			{ number: 900, hexcode: '#881337' },
+		]
+	},
+	{
+		name: 'pink',
+		shades: [
+			{ number: 50, hexcode: '#fdf2f8' },
+			{ number: 100, hexcode: '#fce7f3' },
+			{ number: 200, hexcode: '#fbcfe8' },
+			{ number: 300, hexcode: '#f9a8d4' },
+			{ number: 400, hexcode: '#f472b6' },
+			{ number: 500, hexcode: '#ec4899' },
+			{ number: 600, hexcode: '#db2777' },
+			{ number: 700, hexcode: '#be185d' },
+			{ number: 800, hexcode: '#9d174d' },
+			{ number: 900, hexcode: '#831843' },
+		]
+	},
+	{
+		name: 'fuchsia',
+		shades: [
+			{ number: 50, hexcode: '#fdf4ff' },
+			{ number: 100, hexcode: '#fae8ff' },
+			{ number: 200, hexcode: '#f5d0fe' },
+			{ number: 300, hexcode: '#f0abfc' },
+			{ number: 400, hexcode: '#e879f9' },
+			{ number: 500, hexcode: '#d946ef' },
+			{ number: 600, hexcode: '#c026d3' },
+			{ number: 700, hexcode: '#a21caf' },
+			{ number: 800, hexcode: '#86198f' },
+			{ number: 900, hexcode: '#701a75' },
+		]
+	},
+	{
+		name: 'purple',
+		shades: [
+			{ number: 50, hexcode: '#faf5ff' },
+			{ number: 100, hexcode: '#f3e8ff' },
+			{ number: 200, hexcode: '#e9d5ff' },
+			{ number: 300, hexcode: '#d8b4fe' },
+			{ number: 400, hexcode: '#c084fc' },
+			{ number: 500, hexcode: '#a855f7' },
+			{ number: 600, hexcode: '#9333ea' },
+			{ number: 700, hexcode: '#7e22ce' },
+			{ number: 800, hexcode: '#6b21a8' },
+			{ number: 900, hexcode: '#581c87' },
+		]
+	},
+	{
+		name: 'violet',
+		shades: [
+			{ number: 50, hexcode: '#f5f3ff' },
+			{ number: 100, hexcode: '#ede9fe' },
+			{ number: 200, hexcode: '#ddd6fe' },
+			{ number: 300, hexcode: '#c4b5fd' },
+			{ number: 400, hexcode: '#a78bfa' },
+			{ number: 500, hexcode: '#8b5cf6' },
+			{ number: 600, hexcode: '#7c3aed' },
+			{ number: 700, hexcode: '#6d28d9' },
+			{ number: 800, hexcode: '#5b21b6' },
+			{ number: 900, hexcode: '#4c1d95' },
+		]
+	},
+	{
+		name: 'indigo',
+		shades: [
+			{ number: 50, hexcode: '#eef2ff' },
+			{ number: 100, hexcode: '#e0e7ff' },
+			{ number: 200, hexcode: '#c7d2fe' },
+			{ number: 300, hexcode: '#a5b4fc' },
+			{ number: 400, hexcode: '#818cf8' },
+			{ number: 500, hexcode: '#6366f1' },
+			{ number: 600, hexcode: '#4f46e5' },
+			{ number: 700, hexcode: '#4338ca' },
+			{ number: 800, hexcode: '#3730a3' },
+			{ number: 900, hexcode: '#312e81' },
+		]
+	},
+	{
+		name: 'blue',
+		shades: [
+			{ number: 50, hexcode: '#eff6ff' },
+			{ number: 100, hexcode: '#dbeafe' },
+			{ number: 200, hexcode: '#bfdbfe' },
+			{ number: 300, hexcode: '#93c5fd' },
+			{ number: 400, hexcode: '#60a5fa' },
+			{ number: 500, hexcode: '#3b82f6' },
+			{ number: 600, hexcode: '#2563eb' },
+			{ number: 700, hexcode: '#1d4ed8' },
+			{ number: 800, hexcode: '#1e40af' },
+			{ number: 900, hexcode: '#1e3a8a' },
+		]
+	},
+	{
+		name: 'sky',
+		shades: [
+			{ number: 50, hexcode: '#f0f9ff' },
+			{ number: 100, hexcode: '#e0f2fe' },
+			{ number: 200, hexcode: '#bae6fd' },
+			{ number: 300, hexcode: '#7dd3fc' },
+			{ number: 400, hexcode: '#38bdf8' },
+			{ number: 500, hexcode: '#0ea5e9' },
+			{ number: 600, hexcode: '#0284c7' },
+			{ number: 700, hexcode: '#0369a1' },
+			{ number: 800, hexcode: '#075985' },
+			{ number: 900, hexcode: '#0c4a6e' },
+		]
+	},
+	{
+		name: 'cyan',
+		shades: [
+			{ number: 50, hexcode: '#ecfeff' },
+			{ number: 100, hexcode: '#cffafe' },
+			{ number: 200, hexcode: '#a5f3fc' },
+			{ number: 300, hexcode: '#67e8f9' },
+			{ number: 400, hexcode: '#22d3ee' },
+			{ number: 500, hexcode: '#06b6d4' },
+			{ number: 600, hexcode: '#0891b2' },
+			{ number: 700, hexcode: '#0e7490' },
+			{ number: 800, hexcode: '#155e75' },
+			{ number: 900, hexcode: '#164e63' },
+		]
+	},
+	{
+		name: 'teal',
+		shades: [
+			{ number: 50, hexcode: '#f0fdfa' },
+			{ number: 100, hexcode: '#ccfbf1' },
+			{ number: 200, hexcode: '#99f6e4' },
+			{ number: 300, hexcode: '#5eead4' },
+			{ number: 400, hexcode: '#2dd4bf' },
+			{ number: 500, hexcode: '#14b8a6' },
+			{ number: 600, hexcode: '#0d9488' },
+			{ number: 700, hexcode: '#0f766e' },
+			{ number: 800, hexcode: '#115e59' },
+			{ number: 900, hexcode: '#134e4a' },
+		]
+	},
+	{
+		name: 'emerald',
+		shades: [
+			{ number: 50, hexcode: '#ecfdf5' },
+			{ number: 100, hexcode: '#d1fae5' },
+			{ number: 200, hexcode: '#a7f3d0' },
+			{ number: 300, hexcode: '#6ee7b7' },
+			{ number: 400, hexcode: '#34d399' },
+			{ number: 500, hexcode: '#10b981' },
+			{ number: 600, hexcode: '#059669' },
+			{ number: 700, hexcode: '#047857' },
+			{ number: 800, hexcode: '#065f46' },
+			{ number: 900, hexcode: '#064e3b' },
+		]
+	},
+	{
+		name: 'green',
+		shades: [
+			{ number: 50, hexcode: '#f0fdf4' },
+			{ number: 100, hexcode: '#dcfce7' },
+			{ number: 200, hexcode: '#bbf7d0' },
+			{ number: 300, hexcode: '#86efac' },
+			{ number: 400, hexcode: '#4ade80' },
+			{ number: 500, hexcode: '#22c55e' },
+			{ number: 600, hexcode: '#16a34a' },
+			{ number: 700, hexcode: '#15803d' },
+			{ number: 800, hexcode: '#166534' },
+			{ number: 900, hexcode: '#14532d' },
+		]
+	},
+	{
+		name: 'lime',
+		shades: [
+			{ number: 50, hexcode: '#f7fee7' },
+			{ number: 100, hexcode: '#ecfccb' },
+			{ number: 200, hexcode: '#d9f99d' },
+			{ number: 300, hexcode: '#bef264' },
+			{ number: 400, hexcode: '#a3e635' },
+			{ number: 500, hexcode: '#84cc16' },
+			{ number: 600, hexcode: '#65a30d' },
+			{ number: 700, hexcode: '#4d7c0f' },
+			{ number: 800, hexcode: '#3f6212' },
+			{ number: 900, hexcode: '#365314' },
+		]
+	},
+	{
+		name: 'yellow',
+		shades: [
+			{ number: 50, hexcode: '#fefce8' },
+			{ number: 100, hexcode: '#fef9c3' },
+			{ number: 200, hexcode: '#fef08a' },
+			{ number: 300, hexcode: '#fde047' },
+			{ number: 400, hexcode: '#facc15' },
+			{ number: 500, hexcode: '#eab308' },
+			{ number: 600, hexcode: '#ca8a04' },
+			{ number: 700, hexcode: '#a16207' },
+			{ number: 800, hexcode: '#854d0e' },
+			{ number: 900, hexcode: '#713f12' },
+		]
+	},
+	{
+		name: 'amber',
+		shades: [
+			{ number: 50, hexcode: '#fffbeb' },
+			{ number: 100, hexcode: '#fef3c7' },
+			{ number: 200, hexcode: '#fde68a' },
+			{ number: 300, hexcode: '#fcd34d' },
+			{ number: 400, hexcode: '#fbbf24' },
+			{ number: 500, hexcode: '#f59e0b' },
+			{ number: 600, hexcode: '#d97706' },
+			{ number: 700, hexcode: '#b45309' },
+			{ number: 800, hexcode: '#92400e' },
+			{ number: 900, hexcode: '#78350f' },
+		]
+	},
+	{
+		name: 'orange',
+		shades: [
+			{ number: 50, hexcode: '#fff7ed' },
+			{ number: 100, hexcode: '#ffedd5' },
+			{ number: 200, hexcode: '#fed7aa' },
+			{ number: 300, hexcode: '#fdba74' },
+			{ number: 400, hexcode: '#fb923c' },
+			{ number: 500, hexcode: '#f97316' },
+			{ number: 600, hexcode: '#ea580c' },
+			{ number: 700, hexcode: '#c2410c' },
+			{ number: 800, hexcode: '#9a3412' },
+			{ number: 900, hexcode: '#7c2d12' },
+		]
+	},
+	{
+		name: 'red',
+		shades: [
+			{ number: 50, hexcode: '#fef2f2' },
+			{ number: 100, hexcode: '#fee2e2' },
+			{ number: 200, hexcode: '#fecaca' },
+			{ number: 300, hexcode: '#fca5a5' },
+			{ number: 400, hexcode: '#f87171' },
+			{ number: 500, hexcode: '#ef4444' },
+			{ number: 600, hexcode: '#dc2626' },
+			{ number: 700, hexcode: '#b91c1c' },
+			{ number: 800, hexcode: '#991b1b' },
+			{ number: 900, hexcode: '#7f1d1d' },
+		]
+	},
+	{
+		name: 'warmGray',
+		shades: [
+			{ number: 50, hexcode: '#fafaf9' },
+			{ number: 100, hexcode: '#f5f5f4' },
+			{ number: 200, hexcode: '#e7e5e4' },
+			{ number: 300, hexcode: '#d6d3d1' },
+			{ number: 400, hexcode: '#a8a29e' },
+			{ number: 500, hexcode: '#78716c' },
+			{ number: 600, hexcode: '#57534e' },
+			{ number: 700, hexcode: '#44403c' },
+			{ number: 800, hexcode: '#292524' },
+			{ number: 900, hexcode: '#1c1917' },
+		]
+	},
+	{
+		name: 'trueGray',
+		shades: [
+			{ number: 50, hexcode: '#fafafa' },
+			{ number: 100, hexcode: '#f5f5f5' },
+			{ number: 200, hexcode: '#e5e5e5' },
+			{ number: 300, hexcode: '#d4d4d4' },
+			{ number: 400, hexcode: '#a3a3a3' },
+			{ number: 500, hexcode: '#737373' },
+			{ number: 600, hexcode: '#525252' },
+			{ number: 700, hexcode: '#404040' },
+			{ number: 800, hexcode: '#262626' },
+			{ number: 900, hexcode: '#171717' },
+		]
+	},
+	{
+		name: 'gray',
+		shades: [
+			{ number: 50, hexcode: '#fafafa' },
+			{ number: 100, hexcode: '#f4f4f5' },
+			{ number: 200, hexcode: '#e4e4e7' },
+			{ number: 300, hexcode: '#d4d4d8' },
+			{ number: 400, hexcode: '#a1a1aa' },
+			{ number: 500, hexcode: '#71717a' },
+			{ number: 600, hexcode: '#52525b' },
+			{ number: 700, hexcode: '#3f3f46' },
+			{ number: 800, hexcode: '#27272a' },
+			{ number: 900, hexcode: '#18181b' },
+		]
+	},
+	{
+		name: 'coolGray',
+		shades: [
+			{ number: 50, hexcode: '#f9fafb' },
+			{ number: 100, hexcode: '#f3f4f6' },
+			{ number: 200, hexcode: '#e5e7eb' },
+			{ number: 300, hexcode: '#d1d5db' },
+			{ number: 400, hexcode: '#9ca3af' },
+			{ number: 500, hexcode: '#6b7280' },
+			{ number: 600, hexcode: '#4b5563' },
+			{ number: 700, hexcode: '#374151' },
+			{ number: 800, hexcode: '#1f2937' },
+			{ number: 900, hexcode: '#111827' },
+		]
+	},
+	{
+		name: 'blueGray',
+		shades: [
+			{ number: 50, hexcode: '#f8fafc' },
+			{ number: 100, hexcode: '#f1f5f9' },
+			{ number: 200, hexcode: '#e2e8f0' },
+			{ number: 300, hexcode: '#cbd5e1' },
+			{ number: 400, hexcode: '#94a3b8' },
+			{ number: 500, hexcode: '#64748b' },
+			{ number: 600, hexcode: '#475569' },
+			{ number: 700, hexcode: '#334155' },
+			{ number: 800, hexcode: '#1e293b' },
+			{ number: 900, hexcode: '#0f172a' },
+		]
+	},
+];

package/lib/helpers.js

@@ -1953,9 +1953,9 @@ function gridFlow() {
 		'grid': '{ layout: {value} }'
 	}, {
 		'default': {
-			'default': 'horizontal',
-			'flow-col': 'horizontal',
-			'flow-row': 'vertical',
+			'default': 'horizontal\', width: \'100%',
+			'flow-col': 'horizontal\', width: \'100%',
+			'flow-row': 'vertical\', height: \'100%',
 		}
 	});
 }

package/lib/templates/tailwind/template.tss

@@ -1,2 +1,2 @@
-// Based on Tailwind CSS v3.1.8: A utility-first CSS framework for rapidly building custom designs. ( https://tailwindcss.com )
+// Based on Tailwind CSS v3.2.0: A utility-first CSS framework for rapidly building custom designs. ( https://tailwindcss.com )
 // Created by Adam Wathan ( https://twitter.com/adamwathan ).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "purgetss",
-	"version": "6.0.14",
+	"version": "6.1.0",
 	"description": "An extension for Titanium SDK that contains a set of Tailwind-like classes to easily and quickly create beautifully designed mobile apps.",
 	"main": "index.js",
 	"bin": {
@@ -46,6 +46,7 @@
 		"@fortawesome/fontawesome-free": "^6.2.0",
 		"caporal": "^1.4.0",
 		"chalk": "^4.1.2",
+		"chroma-js": "^2.4.2",
 		"command-exists": "^1.2.9",
 		"fontname": "^1.0.0",
 		"framework7-icons": "^5.0.5",
@@ -53,12 +54,14 @@
 		"inquirer": "^8.2.4",
 		"junk": "3.1.0",
 		"lodash": "^4.17.21",
+		"ntcjs": "^1.1.2",
 		"path": "^0.12.7",
 		"prompts": "^2.4.2",
 		"read-css": "^0.3.0",
-		"tailwindcss": "^3.1.8",
-		"traverse": "^0.6.6",
+		"tailwindcss": "^3.2.0",
+		"traverse": "^0.6.7",
 		"update-notifier": "^5.1.0",
+		"uuid": "^9.0.0",
 		"xml-js": "^1.6.11"
 	}
 }