remove utitilites dir
This commit is contained in:
parent
4977f1dcd4
commit
523e810f4e
2 changed files with 0 additions and 63 deletions
|
|
@ -1,41 +0,0 @@
|
|||
/** © Andy Bell - https://buildexcellentwebsit.es/ */
|
||||
|
||||
const viewports = require('../_data/designTokens/viewports.json');
|
||||
|
||||
/**
|
||||
* Takes an array of tokens and sends back and array of name
|
||||
* and clamp pairs for CSS fluid values.
|
||||
*
|
||||
* @param {array} tokens array of {name: string, min: number, max: number}
|
||||
* @returns {array} {name: string, value: string}
|
||||
*/
|
||||
const clampGenerator = tokens => {
|
||||
const rootSize = 16;
|
||||
|
||||
return tokens.map(({name, min, max}) => {
|
||||
if (min === max) {
|
||||
return `${min / rootSize}rem`;
|
||||
}
|
||||
|
||||
// Convert the min and max sizes to rems
|
||||
const minSize = min / rootSize;
|
||||
const maxSize = max / rootSize;
|
||||
|
||||
// Convert the pixel viewport sizes into rems
|
||||
const minViewport = viewports.min / rootSize;
|
||||
const maxViewport = viewports.max / rootSize;
|
||||
|
||||
// Slope and intersection allow us to have a fluid value but also keep that sensible
|
||||
const slope = (maxSize - minSize) / (maxViewport - minViewport);
|
||||
const intersection = -1 * minViewport * slope + minSize;
|
||||
|
||||
return {
|
||||
name,
|
||||
value: `clamp(${minSize}rem, ${intersection.toFixed(2)}rem + ${(
|
||||
slope * 100
|
||||
).toFixed(2)}vw, ${maxSize}rem)`
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = clampGenerator;
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
/** © Andy Bell - https://buildexcellentwebsit.es/ */
|
||||
|
||||
const slugify = require('slugify');
|
||||
|
||||
/**
|
||||
* Converts human readable tokens into tailwind config friendly ones
|
||||
*
|
||||
* @param {array} tokens {name: string, value: any}
|
||||
* @return {object} {key, value}
|
||||
*/
|
||||
const tokensToTailwind = tokens => {
|
||||
const nameSlug = text => slugify(text, {lower: true});
|
||||
let response = {};
|
||||
|
||||
tokens.forEach(({name, value}) => {
|
||||
response[nameSlug(name)] = value;
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
module.exports = tokensToTailwind;
|
||||
Loading…
Reference in a new issue