From 523e810f4e00c2c8bbfbf0e607a357d37d879629 Mon Sep 17 00:00:00 2001 From: madrilene Date: Mon, 3 Jun 2024 11:06:02 +0200 Subject: [PATCH] remove utitilites dir --- src/utilities/clamp-generator.js | 41 ----------------------------- src/utilities/tokens-to-tailwind.js | 22 ---------------- 2 files changed, 63 deletions(-) delete mode 100644 src/utilities/clamp-generator.js delete mode 100644 src/utilities/tokens-to-tailwind.js diff --git a/src/utilities/clamp-generator.js b/src/utilities/clamp-generator.js deleted file mode 100644 index 2752f17..0000000 --- a/src/utilities/clamp-generator.js +++ /dev/null @@ -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; diff --git a/src/utilities/tokens-to-tailwind.js b/src/utilities/tokens-to-tailwind.js deleted file mode 100644 index 3875918..0000000 --- a/src/utilities/tokens-to-tailwind.js +++ /dev/null @@ -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;