diff --git a/android/android.js b/android/android.js index d5c10fe5..a99a047b 100644 --- a/android/android.js +++ b/android/android.js @@ -53,7 +53,7 @@ function body(main) { const menu = html`<a id="hamburger" - class="absolute pin-t pin-r z-50" + class="absolute top-0 right-0 z-50" href="#" onclick="${clickPreferences}" > diff --git a/android/pages/home.js b/android/pages/home.js index 84f227ab..f1259dfb 100644 --- a/android/pages/home.js +++ b/android/pages/home.js @@ -42,11 +42,7 @@ module.exports = function(state, emit) { content = archives.length < 1 ? intro(state) - : list( - archives, - 'list-reset h-full overflow-y-auto w-full', - 'mb-3 w-full' - ); + : list(archives, 'h-full overflow-y-auto w-full', 'mb-3 w-full'); } return html` @@ -57,7 +53,7 @@ module.exports = function(state, emit) { > ${content} </section> - <div class="fixed pin-r pin-b z-20"> + <div class="fixed right-0 bottom-0 z-20"> ${button} <input id="file-upload" diff --git a/app/main.css b/app/main.css index abdc23a2..71161f6a 100644 --- a/app/main.css +++ b/app/main.css @@ -1,4 +1,9 @@ -@tailwind preflight; +@tailwind base; + +html { + line-height: 1.15; +} + @tailwind components; :not(input) { diff --git a/app/ui/account.js b/app/ui/account.js index cc7d4456..a870d92b 100644 --- a/app/ui/account.js +++ b/app/ui/account.js @@ -85,7 +85,7 @@ class Account extends Component { /> <ul id="accountMenu" - class="invisible list-reset absolute pin-t pin-r mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50" + class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50" onblur="${e => this.hideMenu(e)}" > <li class="p-2 text-grey-dark">${user.email}</li> diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js index 31df9e17..39b98165 100644 --- a/app/ui/archiveTile.js +++ b/app/ui/archiveTile.js @@ -120,7 +120,7 @@ function fileInfo(file, action) { function archiveInfo(archive, action) { return html` <p class="w-full flex items-center"> - <img class="mr-3 flex-no-shrink" src="${assets.get('blue_file.svg')}"/> + <img class="mr-3 flex-shrink-0" src="${assets.get('blue_file.svg')}"/> <p class="flex-grow"> <h1 class="text-base font-medium word-break-all">${archive.name}</h1> <div class="text-sm font-normal opacity-75 pt-1">${bytes( @@ -155,7 +155,7 @@ function archiveDetails(translate, archive) { num: archive.manifest.files.length })} </summary> - ${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset')} + ${list(archive.manifest.files.map(f => fileInfo(f)))} </details> `; } @@ -213,7 +213,7 @@ module.exports = function(state, emit, archive) { html` <input type="image" - class="self-start flex-no-shrink text-white hover:opacity-75 focus:outline" + class="self-start flex-shrink-0 text-white hover:opacity-75 focus:outline" alt="${state.translate('deleteButtonHover')}" title="${state.translate('deleteButtonHover')}" src="${assets.get('close-16.svg')}" @@ -256,9 +256,7 @@ module.exports = function(state, emit, archive) { try { await navigator.share({ title: state.translate('-send-brand'), - text: `Download "${ - archive.name - }" with Firefox Send: simple, safe file sharing`, + text: `Download "${archive.name}" with Firefox Send: simple, safe file sharing`, //state.translate('shareMessage', { name }), url: archive.url }); @@ -278,11 +276,11 @@ module.exports.wip = function(state, emit) { .map(f => fileInfo(f, remove(f, state.translate('deleteButtonHover'))) ), - 'flex-shrink bg-grey-lightest rounded-t list-reset overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen', + 'flex-shrink bg-grey-lightest rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen', 'bg-white px-2 my-2 shadow-light rounded' )} <div - class="flex-no-shrink flex-grow flex items-end p-4 bg-grey-lightest rounded-b mb-1 font-medium" + class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-lightest rounded-b mb-1 font-medium" > <input id="file-upload" @@ -315,7 +313,7 @@ module.exports.wip = function(state, emit) { ${expiryOptions(state, emit)} ${password(state, emit)} <button id="upload-btn" - class="btn rounded-lg flex-no-shrink focus:outline" + class="btn rounded-lg flex-shrink-0 focus:outline" title="${state.translate('uploadButton')}" onclick="${upload}" > @@ -509,7 +507,7 @@ module.exports.preview = function(state, emit) { </div> <button id="download-btn" - class="btn rounded-lg mt-4 w-full flex-no-shrink focus:outline" + class="btn rounded-lg mt-4 w-full flex-shrink-0 focus:outline" title="${state.translate('downloadButtonLabel')}" onclick=${download} > diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js index 58c3cff9..79b4421e 100644 --- a/app/ui/copyDialog.js +++ b/app/ui/copyDialog.js @@ -7,7 +7,7 @@ module.exports = function(name, url) { <send-copy-dialog class="flex flex-col items-center text-center p-4 max-w-sm m-auto" > - <h1 class="font-bold my-4"> + <h1 class="text-3xl font-bold my-4"> ${state.translate('notifyUploadEncryptDone')} </h1> <p class="font-normal leading-normal text-grey-darkest word-break-all"> @@ -22,7 +22,7 @@ module.exports = function(name, url) { readonly="true" /> <button - class="btn rounded-lg w-full flex-no-shrink focus:outline" + class="btn rounded-lg w-full flex-shrink-0 focus:outline" onclick="${copy}" title="${state.translate('copyLinkButton')}" > diff --git a/app/ui/download.js b/app/ui/download.js index 15c3c208..dbf9243c 100644 --- a/app/ui/download.js +++ b/app/ui/download.js @@ -22,7 +22,9 @@ function downloading(state, emit) { <div class="flex flex-col w-full h-full items-center md:justify-center md:-mt-8" > - <h1 class="mb-4">${state.translate('downloadingTitle')}</h1> + <h1 class="text-3xl font-bold mb-4"> + ${state.translate('downloadingTitle')} + </h1> ${archiveTile.downloading(state, emit)} </div> `; @@ -36,7 +38,9 @@ function preview(state, emit) { <div class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center" > - <h1 class="mb-4">${state.translate('downloadTitle')}</h1> + <h1 class="text-3xl font-bold mb-4"> + ${state.translate('downloadTitle')} + </h1> <p class="w-full text-grey-darkest text-center leading-normal"> ${state.translate('downloadDescription')} </p> diff --git a/app/ui/downloadCompleted.js b/app/ui/downloadCompleted.js index 7cc7a997..1cb02a0b 100644 --- a/app/ui/downloadCompleted.js +++ b/app/ui/downloadCompleted.js @@ -7,7 +7,7 @@ module.exports = function(state) { id="download-complete" class="flex flex-col items-center justify-center h-full w-full bg-white p-2" > - <h1 class="text-center font-bold my-2"> + <h1 class="text-center text-3xl font-bold my-2"> ${state.translate('downloadFinish')} </h1> <img src="${assets.get('completed.svg')}" class="my-12 h-48" /> diff --git a/app/ui/downloadPassword.js b/app/ui/downloadPassword.js index e339f6df..1b505618 100644 --- a/app/ui/downloadPassword.js +++ b/app/ui/downloadPassword.js @@ -8,7 +8,9 @@ module.exports = function(state, emit) { <div class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto" > - <h1 class="mb-4">${state.translate('downloadTitle')}</h1> + <h1 class="text-3xl font-bold mb-4"> + ${state.translate('downloadTitle')} + </h1> <p class="w-full mb-4 text-center text-grey-darkest leading-normal"> ${state.translate('downloadDescription')} </p> diff --git a/app/ui/error.js b/app/ui/error.js index 5f2ed59f..2476e359 100644 --- a/app/ui/error.js +++ b/app/ui/error.js @@ -9,7 +9,7 @@ module.exports = function(state, emit) { <section class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big" > - <h1 class="text-center font-bold my-2"> + <h1 class="text-center text-3xl font-bold my-2"> ${state.translate('errorPageHeader')} </h1> <img class="my-12 h-48" src="${assets.get('error.svg')}" /> diff --git a/app/ui/footer.js b/app/ui/footer.js index 8a5fba21..fab82a0c 100644 --- a/app/ui/footer.js +++ b/app/ui/footer.js @@ -28,7 +28,7 @@ class Footer extends Component { Mozilla </a> <ul - class="list-reset flex flex-col md:flex-row items-start md:items-center md:justify-end" + class="flex flex-col md:flex-row items-start md:items-center md:justify-end" > <li class="m-2"> <a href="https://www.mozilla.org/about/legal/terms/services/#send"> diff --git a/app/ui/home.js b/app/ui/home.js index 38012fac..cfa38564 100644 --- a/app/ui/home.js +++ b/app/ui/home.js @@ -20,11 +20,7 @@ module.exports = function(state, emit) { const right = archives.length === 0 ? intro(state) - : list( - archives, - 'list-reset p-2 h-full overflow-y-auto w-full', - 'mb-4 w-full' - ); + : list(archives, 'p-2 h-full overflow-y-auto w-full', 'mb-4 w-full'); return html` <main class="main"> diff --git a/app/ui/intro.js b/app/ui/intro.js index 106b00db..12ba3110 100644 --- a/app/ui/intro.js +++ b/app/ui/intro.js @@ -7,7 +7,7 @@ module.exports = function intro(state) { class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full" > <div class="mt-12 flex flex-col h-full"> - <h1 class="font-bold md:pb-2"> + <h1 class="text-3xl font-bold md:pb-2"> ${state.translate('introTitle')} </h1> <p class="max-w-sm leading-loose mt-6 md:mt-2 md:pr-14"> diff --git a/app/ui/legal.js b/app/ui/legal.js index 7c1ec0a3..88fd3338 100644 --- a/app/ui/legal.js +++ b/app/ui/legal.js @@ -8,7 +8,9 @@ module.exports = function(state, emit) { <div class="flex flex-col items-center bg-white m-4 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full" > - <h1 class="text-center">${state.translate('legalTitle')}</h1> + <h1 class="text-center text-3xl font-bold"> + ${state.translate('legalTitle')} + </h1> <p class="mt-2">${state.translate('legalDateStamp')}</p> <div class="overflow-y-scroll py-8 px-12"> <p class="leading-normal"> diff --git a/app/ui/modal.js b/app/ui/modal.js index 65843fe9..365935b8 100644 --- a/app/ui/modal.js +++ b/app/ui/modal.js @@ -3,11 +3,11 @@ const html = require('choo/html'); module.exports = function(state, emit) { return html` <send-modal - class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8" + class="absolute inset-0 flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8" onclick="${close}" > <div - class="h-full w-full max-h-screen absolute pin-t flex items-center justify-center" + class="h-full w-full max-h-screen absolute top-0 flex items-center justify-center" > <div class="w-full" onclick="${e => e.stopPropagation()}"> ${state.modal(state, emit, close)} diff --git a/app/ui/noStreams.js b/app/ui/noStreams.js index 8949c42c..4ec77e7b 100644 --- a/app/ui/noStreams.js +++ b/app/ui/noStreams.js @@ -8,7 +8,9 @@ module.exports = function(state, emit) { <div class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center" > - <h1 class="mb-4">${state.translate('downloadTitle')}</h1> + <h1 class="mb-4 text-3xl font-bold">${state.translate( + 'downloadTitle' + )}</h1> <p class="w-full p-2 border border-yellow-light rounded md:w-4/5 text-orange-dark bg-yellow-lighter text-center leading-normal" > @@ -17,7 +19,7 @@ module.exports = function(state, emit) { <form class="md:w-128" onsubmit=${submit}> <fieldset class="border rounded p-4 my-4" onchange=${optionChanged}> <div class="flex items-center mb-2"> - <img class="mr-3 flex-no-shrink" src="${assets.get( + <img class="mr-3 flex-shrink-0" src="${assets.get( 'blue_file.svg' )}"/> <p class="flex-grow"> @@ -49,7 +51,7 @@ module.exports = function(state, emit) { </div> </fieldset> <input - class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center" + class="btn rounded-lg w-full flex flex-shrink-0 items-center justify-center" value="${state.translate('copyLinkButton')}" title="${state.translate('copyLinkButton')}" type="submit" /> diff --git a/app/ui/notFound.js b/app/ui/notFound.js index a560057a..7d3b8444 100644 --- a/app/ui/notFound.js +++ b/app/ui/notFound.js @@ -9,7 +9,7 @@ module.exports = function(state, emit) { <section class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big" > - <h1 class="text-center font-bold my-2"> + <h1 class="text-center text-3xl font-bold my-2"> ${state.translate('expiredTitle')} </h1> <img src="${assets.get('notFound.svg')}" class="my-12" /> diff --git a/app/ui/okDialog.js b/app/ui/okDialog.js index 27ab1bb3..cb8c3c6a 100644 --- a/app/ui/okDialog.js +++ b/app/ui/okDialog.js @@ -4,9 +4,11 @@ module.exports = function(message) { return function(state, emit, close) { return html` <send-ok-dialog class="flex flex-col max-w-sm p-4 m-auto"> - <h2 class="text-center m-8 leading-normal">${message}</h2> + <h2 class="text-center text-xl font-bold m-8 leading-normal"> + ${message} + </h2> <button - class="btn rounded-lg w-full flex-no-shrink" + class="btn rounded-lg w-full flex-shrink-0" onclick="${close}" title="${state.translate('okButton')}" > diff --git a/app/ui/shareDialog.js b/app/ui/shareDialog.js index 0e83fe93..940dc118 100644 --- a/app/ui/shareDialog.js +++ b/app/ui/shareDialog.js @@ -6,7 +6,7 @@ module.exports = function(name, url) { <send-share-dialog class="flex flex-col items-center text-center p-4 max-w-sm m-auto" > - <h1 class="font-bold my-4"> + <h1 class="text-3xl font-bold my-4"> ${state.translate('notifyUploadEncryptDone')} </h1> <p class="font-normal leading-normal text-grey-darkest word-break-all"> @@ -21,7 +21,7 @@ module.exports = function(name, url) { readonly="true" /> <button - class="btn rounded-lg w-full flex-no-shrink focus:outline" + class="btn rounded-lg w-full flex-shrink-0 focus:outline" onclick="${share}" title="${state.translate('shareLinkButton')}" > diff --git a/app/ui/signupDialog.js b/app/ui/signupDialog.js index 2c188fa3..908f5faa 100644 --- a/app/ui/signupDialog.js +++ b/app/ui/signupDialog.js @@ -14,9 +14,9 @@ module.exports = function(trigger) { > <img src="${assets.get('master-logo.svg')}" class="h-16 mt-1 mb-4" /> <section - class="flex flex-col flex-no-shrink self-center lg:mx-6 lg:max-w-xs" + class="flex flex-col flex-shrink-0 self-center lg:mx-6 lg:max-w-xs" > - <h1 class="font-bold text-center lg:text-left"> + <h1 class="text-3xl font-bold text-center lg:text-left"> ${state.translate('accountBenefitTitle')} </h1> <ul @@ -46,7 +46,7 @@ module.exports = function(trigger) { placeholder=${state.translate('emailPlaceholder')} /> <input - class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center" + class="btn rounded-lg w-full flex flex-shrink-0 items-center justify-center" value="${state.translate('signInOnlyButton')}" title="${state.translate('signInOnlyButton')}" id="email-submit" diff --git a/app/ui/surveyDialog.js b/app/ui/surveyDialog.js index b2dd3541..d3e7bb62 100644 --- a/app/ui/surveyDialog.js +++ b/app/ui/surveyDialog.js @@ -13,7 +13,7 @@ module.exports = function() { <send-survey-dialog class="flex flex-col items-center text-center p-4 max-w-sm m-auto" > - <h1 class="font-bold my-4"> + <h1 class="text-3xl font-bold my-4"> Tell us what you think. </h1> <p class="font-normal leading-normal text-grey-darkest px-4"> @@ -21,7 +21,7 @@ module.exports = function() { it better. </p> <a - class="btn rounded-lg w-full flex-no-shrink focus:outline my-5" + class="btn rounded-lg w-full flex-shrink-0 focus:outline my-5" onclick="${() => emit('closeModal')}" title="Give feedback" href="${surveyUrl}" diff --git a/app/ui/unsupported.js b/app/ui/unsupported.js index 012126ff..b449e673 100644 --- a/app/ui/unsupported.js +++ b/app/ui/unsupported.js @@ -29,7 +29,7 @@ module.exports = function(state, emit) { <section class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full" > - <h1 class="">${strings.header}</h1> + <h1 class="text-3xl font-bold">${strings.header}</h1> <p class="mt-4 mb-8 max-w-md leading-normal">${strings.description}</p> ${why} <a href="${url}" class="btn rounded-lg mt-8 px-8"> diff --git a/package-lock.json b/package-lock.json index 4f174dff..0c4cced6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1862,17 +1862,109 @@ "dev": true }, "autoprefixer": { - "version": "9.4.6", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.6.tgz", - "integrity": "sha512-Yp51mevbOEdxDUy5WjiKtpQaecqYq9OqZSL04rSoCiry7Tc5I9FEyo3bfxiTJc1DfHeKwSFCUYbBAiOQ2VGfiw==", + "version": "9.6.0", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.0.tgz", + "integrity": "sha512-kuip9YilBqhirhHEGHaBTZKXL//xxGnzvsD0FtBQa6z+A69qZD6s/BAX9VzDF1i9VKDquTJDQaPLSEhOnL6FvQ==", "dev": true, "requires": { - "browserslist": "^4.4.1", - "caniuse-lite": "^1.0.30000929", + "browserslist": "^4.6.1", + "caniuse-lite": "^1.0.30000971", + "chalk": "^2.4.2", "normalize-range": "^0.1.2", "num2fraction": "^1.2.2", - "postcss": "^7.0.13", + "postcss": "^7.0.16", "postcss-value-parser": "^3.3.1" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "browserslist": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.1.tgz", + "integrity": "sha512-1MC18ooMPRG2UuVFJTHFIAkk6mpByJfxCrnUyvSlu/hyQSFHMrlhM02SzNuCV+quTP4CKmqtOMAIjrifrpBJXQ==", + "dev": true, + "requires": { + "caniuse-lite": "^1.0.30000971", + "electron-to-chromium": "^1.3.137", + "node-releases": "^1.1.21" + } + }, + "caniuse-lite": { + "version": "1.0.30000974", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000974.tgz", + "integrity": "sha512-xc3rkNS/Zc3CmpMKuczWEdY2sZgx09BkAxfvkxlAEBTqcMHeL8QnPqhKse+5sRTi3nrw2pJwToD2WvKn1Uhvww==", + "dev": true + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "electron-to-chromium": { + "version": "1.3.150", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.150.tgz", + "integrity": "sha512-5wuYlaXhXbBvavSTij5ZyidICB6sAK/1BwgZZoPCgsniid1oDgzVvDOV/Dw6J25lKV9QZ9ZdQCp8MEfF0/OIKA==", + "dev": true + }, + "node-releases": { + "version": "1.1.23", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.23.tgz", + "integrity": "sha512-uq1iL79YjfYC0WXoHbC/z28q/9pOl8kSHaXdWmAAc8No+bDwqkZbzIJz55g/MUsPgSGm9LZ7QSUbzTcH5tz47w==", + "dev": true, + "requires": { + "semver": "^5.3.0" + } + }, + "postcss": { + "version": "7.0.17", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.17.tgz", + "integrity": "sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + }, + "dependencies": { + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } } }, "aws-sdk": { @@ -1901,15 +1993,6 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, - "babel-extract-comments": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz", - "integrity": "sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==", - "dev": true, - "requires": { - "babylon": "^6.18.0" - } - }, "babel-loader": { "version": "8.0.6", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz", @@ -1978,22 +2061,6 @@ } } }, - "babel-plugin-syntax-object-rest-spread": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", - "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=", - "dev": true - }, - "babel-plugin-transform-object-rest-spread": { - "version": "6.26.0", - "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz", - "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=", - "dev": true, - "requires": { - "babel-plugin-syntax-object-rest-spread": "^6.8.0", - "babel-runtime": "^6.26.0" - } - }, "babel-runtime": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", @@ -2012,12 +2079,6 @@ } } }, - "babylon": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", - "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==", - "dev": true - }, "bail": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.3.tgz", @@ -3046,12 +3107,6 @@ "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==", "dev": true }, - "comment-regex": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/comment-regex/-/comment-regex-1.0.1.tgz", - "integrity": "sha512-IWlN//Yfby92tOIje7J18HkNmWRR7JESA/BK8W7wqY/akITpU5B0JQWnbTjCfdChSrDNb0DrdA9jfAxiiBXyiQ==", - "dev": true - }, "commondir": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", @@ -3210,16 +3265,30 @@ } }, "convict": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/convict/-/convict-4.4.1.tgz", - "integrity": "sha512-celpR4hOWWwb/S8azhzgQwDon6muAJlNe2LTLeOGyoSgH390TsaqoieAe9BLbAv7+9wNfG7DTA2q3IfFp2viKw==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/convict/-/convict-5.0.0.tgz", + "integrity": "sha512-bMaU2aeQcK8ynDiCU9GFzBngfGMEPlslNmd0PkXakGgNd85U4K4bygYfWXk0OxiSAH2eVolItLYxDuWPHlXwsg==", "requires": { - "depd": "1.1.2", - "json5": "1.0.1", + "json5": "2.1.0", "lodash.clonedeep": "4.5.0", - "moment": "2.22.2", - "validator": "10.8.0", - "yargs-parser": "11.0.0" + "moment": "2.24.0", + "validator": "10.11.0", + "yargs-parser": "13.0.0" + }, + "dependencies": { + "json5": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.0.tgz", + "integrity": "sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==", + "requires": { + "minimist": "^1.2.0" + } + }, + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + } } }, "cookie": { @@ -3920,12 +3989,6 @@ "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==", "dev": true }, - "css.escape": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", - "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=", - "dev": true - }, "cssdb": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.3.0.tgz", @@ -4213,12 +4276,6 @@ } } }, - "defined": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz", - "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=", - "dev": true - }, "del": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/del/-/del-3.0.0.tgz", @@ -5144,23 +5201,38 @@ } }, "eslint-plugin-node": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-8.0.1.tgz", - "integrity": "sha512-ZjOjbjEi6jd82rIpFSgagv4CHWzG9xsQAVp1ZPlhRnnYxcTgENUVBvhYmkQ7GvT1QFijUSo69RaiOJKhMu6i8w==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-9.1.0.tgz", + "integrity": "sha512-ZwQYGm6EoV2cfLpE1wxJWsfnKUIXfM/KM09/TlorkukgCAwmkgajEJnPCmyzoFPQQkmvo5DrW/nyKutNIw36Mw==", "dev": true, "requires": { - "eslint-plugin-es": "^1.3.1", + "eslint-plugin-es": "^1.4.0", "eslint-utils": "^1.3.1", - "ignore": "^5.0.2", + "ignore": "^5.1.1", "minimatch": "^3.0.4", - "resolve": "^1.8.1", - "semver": "^5.5.0" + "resolve": "^1.10.1", + "semver": "^6.1.0" }, "dependencies": { "ignore": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.0.4.tgz", - "integrity": "sha512-WLsTMEhsQuXpCiG173+f3aymI43SXa+fB1rSfbzyP4GkPP+ZFVuO0/3sFUGNBtifisPeDcl/uD/Y2NxZ7xFq4g==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.2.tgz", + "integrity": "sha512-vdqWBp7MyzdmHkkRWV5nY+PfGRbYbahfuvsBCh277tq+w9zyNi7h5CYJCK0kmzti9kU+O/cB7sE8HvKv6aXAKQ==", + "dev": true + }, + "resolve": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz", + "integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==", + "dev": true, + "requires": { + "path-parse": "^1.0.6" + } + }, + "semver": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.1.1.tgz", + "integrity": "sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ==", "dev": true } } @@ -5746,12 +5818,12 @@ } }, "file-loader": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-3.0.1.tgz", - "integrity": "sha512-4sNIOXgtH/9WZq4NvlfU3Opn5ynUsqBwSLyM+I7UOwdGigTBYfVVQEwe/msZNX/j4pCJTIM14Fsw66Svo1oVrw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.0.0.tgz", + "integrity": "sha512-roAbL6IdSGczwfXxhMi6Zq+jD4IfUpL0jWHD7fvmjdOVb7xBfdRUHe4LpBgO23VtVK5AW1OlWZo0p34Jvx3iWg==", "dev": true, "requires": { - "loader-utils": "^1.0.2", + "loader-utils": "^1.2.2", "schema-utils": "^1.0.0" } }, @@ -6116,9 +6188,9 @@ "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==" }, "fs-extra": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz", - "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==", + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz", + "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==", "dev": true, "requires": { "graceful-fs": "^4.1.2", @@ -6735,12 +6807,6 @@ "simple-git": "^1.85.0" } }, - "gather-stream": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/gather-stream/-/gather-stream-1.0.0.tgz", - "integrity": "sha1-szmUr0V6gRVwDUEPMXczy+egkEs=", - "dev": true - }, "gaxios": { "version": "1.8.3", "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-1.8.3.tgz", @@ -8442,12 +8508,6 @@ "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.15.0.tgz", "integrity": "sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=" }, - "js-base64": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz", - "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==", - "dev": true - }, "js-levenshtein": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz", @@ -8526,6 +8586,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "dev": true, "requires": { "minimist": "^1.2.0" } @@ -10003,9 +10064,9 @@ "integrity": "sha512-0L9FvHG3nfnnmaEQPjT9xhfN4ISk0A8/2j4M37Np4mcDesJjHgEUfgPhdCyZuFI954tjokaIj/A3NdpFNdEh4Q==" }, "node-emoji": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.8.1.tgz", - "integrity": "sha512-+ktMAh1Jwas+TnGodfCfjUbJKoANqPaJFN0z0iqh41eqD8dvguNzcitVSBSVK1pidz0AqGbLKcoVuVLRVZ/aVg==", + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz", + "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==", "dev": true, "requires": { "lodash.toarray": "^4.4.0" @@ -10161,6 +10222,12 @@ "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==", "dev": true }, + "normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==", + "dev": true + }, "npm-install-package": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/npm-install-package/-/npm-install-package-2.1.0.tgz", @@ -10921,62 +10988,6 @@ "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=" }, - "perfectionist": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/perfectionist/-/perfectionist-2.4.0.tgz", - "integrity": "sha1-wUetNxThJkZ/F2QSnuct+GHUfqA=", - "dev": true, - "requires": { - "comment-regex": "^1.0.0", - "defined": "^1.0.0", - "minimist": "^1.2.0", - "postcss": "^5.0.8", - "postcss-scss": "^0.3.0", - "postcss-value-parser": "^3.3.0", - "read-file-stdin": "^0.2.0", - "string.prototype.repeat": "^0.2.0", - "vendors": "^1.0.0", - "write-file-stdout": "0.0.2" - }, - "dependencies": { - "has-flag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", - "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", - "dev": true - }, - "postcss": { - "version": "5.2.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz", - "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==", - "dev": true, - "requires": { - "chalk": "^1.1.3", - "js-base64": "^2.1.9", - "source-map": "^0.5.6", - "supports-color": "^3.2.3" - } - }, - "postcss-scss": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-0.3.1.tgz", - "integrity": "sha1-ZcYQ2OKn7g5isYNbcbiHBzSBbks=", - "dev": true, - "requires": { - "postcss": "^5.2.4" - } - }, - "supports-color": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", - "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", - "dev": true, - "requires": { - "has-flag": "^1.0.0" - } - } - } - }, "performance-now": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", @@ -11493,13 +11504,13 @@ } }, "postcss-js": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.0.tgz", - "integrity": "sha512-9kAApW9G5kN8FkQ0ZdvSmbgbHIRrKmXtde2ZWYbwrW51gfEWfGsLlUu57mTpioPrmQlQFOgEvaeGYp+poqlX0A==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.1.tgz", + "integrity": "sha512-8XQGohCbj6+kq8e3w6WlexkGaSjb5S8zoXnH49eB8JC6+qN2kQW+ib6fTjRgCpRRN9eeFOhMlD0NDjThW1DCBg==", "dev": true, "requires": { - "camelcase-css": "^2.0.0", - "postcss": "^7.0.0" + "camelcase-css": "^2.0.1", + "postcss": "^7.0.14" } }, "postcss-jsx": { @@ -11790,13 +11801,13 @@ } }, "postcss-nested": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.1.1.tgz", - "integrity": "sha512-3+V8+g+i9zUQ/AADNtBj3DVVvSOhRCV7W8Kzn9n4ViWJtSQrSdtIJnxZaupfdTrnhCkY86sAsuKVxBCuyfJDeA==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.1.2.tgz", + "integrity": "sha512-9bQFr2TezohU3KRSu9f6sfecXmf/x6RXDedl8CHF6fyuyVW7UqgNMRdWMHZQWuFY6Xqs2NYk+Fj4Z4vSOf7PQg==", "dev": true, "requires": { - "postcss": "^7.0.6", - "postcss-selector-parser": "^5.0.0-rc.4" + "postcss": "^7.0.14", + "postcss-selector-parser": "^5.0.0" } }, "postcss-nesting": { @@ -12573,24 +12584,15 @@ } }, "raw-loader": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-2.0.0.tgz", - "integrity": "sha512-kZnO5MoIyrojfrPWqrhFNLZemIAX8edMOCp++yC5RKxzFB3m92DqKNhKlU6+FvpOhWtvyh3jOaD7J6/9tpdIKg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-3.0.0.tgz", + "integrity": "sha512-FsELYliOpX5HdPdxa7PzTmEc5OTchmLUs/r4f8oLDGCYE+xC2FjVbDXzdyLcBrdlDnvkx1x5wzphixcWpxJG5w==", "dev": true, "requires": { "loader-utils": "^1.1.0", "schema-utils": "^1.0.0" } }, - "read-file-stdin": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/read-file-stdin/-/read-file-stdin-0.2.1.tgz", - "integrity": "sha1-JezP86FTtoCa+ssj7hU4fbng7mE=", - "dev": true, - "requires": { - "gather-stream": "^1.0.0" - } - }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -12727,9 +12729,9 @@ "integrity": "sha512-cu8EF+MtkwI4DLIT0x9P8qNTLFhQD4jLfxLR0cCNkeGzs87FN6879JOJwNQR/1zD7aSYNbU0hgsV9zGY71Itvw==" }, "redis-mock": { - "version": "0.43.0", - "resolved": "https://registry.npmjs.org/redis-mock/-/redis-mock-0.43.0.tgz", - "integrity": "sha512-ayNlCxbeaVp16U5HU220C24lFk7TEzW8hL4RE5SXv/GeKq+P4ek1QqKKbu0K2QkGRdO2bvHE2ymJ/pbBLqyUww==", + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/redis-mock/-/redis-mock-0.44.0.tgz", + "integrity": "sha512-n28zlPa8BWX34XnaIfNDZc/SJn2H6xlnP5c01+s/86rBm+8VGuOltcFFZXaI9IKwIPA4kJD2cdf1dP3P+eNjPA==", "dev": true }, "redis-parser": { @@ -14293,12 +14295,6 @@ "function-bind": "^1.0.2" } }, - "string.prototype.repeat": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz", - "integrity": "sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8=", - "dev": true - }, "string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -14344,16 +14340,6 @@ "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", "dev": true }, - "strip-comments": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-1.0.2.tgz", - "integrity": "sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==", - "dev": true, - "requires": { - "babel-extract-comments": "^1.0.0", - "babel-plugin-transform-object-rest-spread": "^6.26.0" - } - }, "strip-eof": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", @@ -15036,26 +15022,24 @@ } }, "tailwindcss": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-0.7.4.tgz", - "integrity": "sha512-+GeQjHRJ2VmeLkrNwMCbPDfm2cc5P8eoc7n+DtZfI8oQdlo5eSHqsIlPEuZOtoqQlIALsd2jAggWrUUBFGP2ow==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.0.3.tgz", + "integrity": "sha512-myjuB0hqqLiXQCea0hEeZfrQVxzmkhtgi7HsuwJgXaVPgBp+7r/wywOvkDTUS8sQ1LraF43OLatip0yhfo/FtA==", "dev": true, "requires": { "autoprefixer": "^9.4.5", "bytes": "^3.0.0", "chalk": "^2.4.1", - "css.escape": "^1.5.1", - "fs-extra": "^4.0.2", - "lodash": "^4.17.5", + "fs-extra": "^8.0.0", + "lodash": "^4.17.11", "node-emoji": "^1.8.1", - "perfectionist": "^2.4.0", + "normalize.css": "^8.0.1", "postcss": "^7.0.11", "postcss-functions": "^3.0.0", "postcss-js": "^2.0.0", "postcss-nested": "^4.1.1", - "postcss-selector-parser": "^5.0.0", - "pretty-hrtime": "^1.0.3", - "strip-comments": "^1.0.2" + "postcss-selector-parser": "^6.0.0", + "pretty-hrtime": "^1.0.3" }, "dependencies": { "ansi-styles": { @@ -15078,6 +15062,23 @@ "supports-color": "^5.3.0" } }, + "cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true + }, + "postcss-selector-parser": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz", + "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -15887,9 +15888,9 @@ } }, "validator": { - "version": "10.8.0", - "resolved": "https://registry.npmjs.org/validator/-/validator-10.8.0.tgz", - "integrity": "sha512-mXqMxfCh5NLsVgYVKl9WvnHNDPCcbNppHSPPowu0VjtSsGWVY+z8hJF44edLR1nbLNzi3jYoYsIl8KZpioIk6g==" + "version": "10.11.0", + "resolved": "https://registry.npmjs.org/validator/-/validator-10.11.0.tgz", + "integrity": "sha512-X/p3UZerAIsbBfN/IwahhYaBbY68EN/UQBWHtsbXGT5bfrH/p4NQzUCG1kF/rtKaNpnJ7jAu6NGTdSNtyNIXMw==" }, "vary": { "version": "1.1.2", @@ -17005,12 +17006,6 @@ "signal-exit": "^3.0.2" } }, - "write-file-stdout": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/write-file-stdout/-/write-file-stdout-0.0.2.tgz", - "integrity": "sha1-wlLXx8WxtAKJdjDjRTx7/mkNnKE=", - "dev": true - }, "ws": { "version": "github:dannycoates/ws#c83cbb3bce478122cedcb8c475d9e86e1112824a", "from": "github:dannycoates/ws", @@ -17279,9 +17274,9 @@ } }, "yargs-parser": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.0.0.tgz", - "integrity": "sha512-dvsafRjM45h79WOTvS/dP35Sb31SlGAKz6tFjI97kGC4MJFBuzTZY6TTYHrz0QSMQdkyd8Y+RsOMLr+JY0nPFQ==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.0.0.tgz", + "integrity": "sha512-w2LXjoL8oRdRQN+hOyppuXs+V/fVAYtpcrRxZuF7Kt/Oc+Jr2uAcVntaUTNT6w5ihoWfFDpNY8CPx1QskxZ/pw==", "requires": { "camelcase": "^5.0.0", "decamelize": "^1.2.0" diff --git a/package.json b/package.json index 20a62db8..1f3f4127 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,7 @@ "stylelint-no-unsupported-browser-features": "^3.0.2", "svgo": "^1.2.2", "svgo-loader": "^2.2.0", - "tailwindcss": "^0.7.4", + "tailwindcss": "^1.0.3", "val-loader": "^1.1.1", "wdio-docker-service": "^1.4.2", "wdio-dot-reporter": "0.0.10", diff --git a/postcss.config.js b/postcss.config.js index 2cd81fe6..bef8b68f 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -6,7 +6,7 @@ class TailwindExtractor { const options = { plugins: [ - require('tailwindcss')('./tailwind.js'), + require('tailwindcss')('./tailwind.config.js'), require('postcss-preset-env') ] }; diff --git a/server/routes/index.js b/server/routes/index.js index f9688bfc..44572348 100644 --- a/server/routes/index.js +++ b/server/routes/index.js @@ -104,6 +104,7 @@ module.exports = function(app) { app.post(`/api/info/:id${ID_REGEX}`, auth.owner, require('./info')); app.post('/api/metrics', require('./metrics')); app.get('/__version__', function(req, res) { + // eslint-disable-next-line node/no-missing-require res.sendFile(require.resolve('../../dist/version.json')); }); diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 00000000..b64a4def --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,429 @@ +const colors = { + transparent: 'transparent', + + black: '#22292f', + 'grey-darkest': '#4a4a4f', + 'grey-darker': '#606f7b', + 'grey-dark': '#8795a1', + grey: '#B1B1B3', + 'grey-light': '#dae1e7', + 'grey-banner': '#f0f0f4', + 'grey-transparent': 'hsla(250, 13%, 9%, .2)', + 'grey-lighter': '#f1f5f8', + 'grey-lightest': '#F9F9FA', + white: '#ffffff', + + 'red-darkest': '#3b0d0c', + 'red-darker': '#621b18', + 'red-dark': '#cc1f1a', + red: '#e3342f', + 'red-light': '#ef5753', + 'red-lighter': '#f9acaa', + 'red-lightest': '#fcebea', + + 'orange-darkest': '#462a16', + 'orange-darker': '#613b1f', + 'orange-dark': '#de751f', + orange: '#f6993f', + 'orange-light': '#faad63', + 'orange-lighter': '#fcd9b6', + 'orange-lightest': '#fff5eb', + + 'yellow-darkest': '#453411', + 'yellow-darker': '#684f1d', + 'yellow-dark': '#f2d024', + yellow: '#ffed4a', + 'yellow-light': '#fff382', + 'yellow-lighter': '#fff9c2', + 'yellow-lightest': '#fcfbeb', + + 'green-darkest': '#003706', + 'green-darker': '#006504', + 'green-dark': '#058b00', + green: '#12bc00', + 'green-light': '#51d88a', + 'green-lighter': '#a2f5bf', + 'green-lightest': '#e3fcec', + + 'teal-darkest': '#0d3331', + 'teal-darker': '#20504f', + 'teal-dark': '#38a89d', + teal: '#4dc0b5', + 'teal-light': '#64d5ca', + 'teal-lighter': '#a0f0ed', + 'teal-lightest': '#e8fffe', + + 'blue-darkest': '#002275', + 'blue-darker': '#003eaa', + 'blue-dark': '#0060df', + blue: '#0a84ff', + 'blue-light': '#6cb2eb', + 'blue-lighter': '#bcdefa', + 'blue-lightest': '#eff8ff', + + 'indigo-darkest': '#191e38', + 'indigo-darker': '#2f365f', + 'indigo-dark': '#5661b3', + indigo: '#6574cd', + 'indigo-light': '#7886d7', + 'indigo-lighter': '#b2b7ff', + 'indigo-lightest': '#e6e8ff', + + 'purple-darkest': '#21183c', + 'purple-darker': '#382b5f', + 'purple-dark': '#794acf', + purple: '#9561e2', + 'purple-light': '#a779e9', + 'purple-lighter': '#d6bbfc', + 'purple-lightest': '#f3ebff', + + 'pink-darkest': '#451225', + 'pink-darker': '#6f213f', + 'pink-dark': '#eb5286', + pink: '#f66d9b', + 'pink-light': '#fa7ea8', + 'pink-lighter': '#ffbbca', + 'pink-lightest': '#ffebef', + cloud: 'rgba(255, 255, 255, 0.8)', + violet: 'hsl(258, 57%, 35%)' +}; + +module.exports = { + theme: { + colors: colors, + screens: { + sm: '576px', + md: '768px', + lg: '992px', + xl: '1200px' + }, + fontFamily: { + sans: [ + 'Inter', + 'system-ui', + 'BlinkMacSystemFont', + '-apple-system', + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + 'sans-serif' + ], + serif: [ + 'Constantia', + 'Lucida Bright', + 'Lucidabright', + 'Lucida Serif', + 'Lucida', + 'DejaVu Serif', + 'Bitstream Vera Serif', + 'Liberation Serif', + 'Georgia', + 'serif' + ], + mono: [ + 'Menlo', + 'Monaco', + 'Consolas', + 'Liberation Mono', + 'Courier New', + 'monospace' + ] + }, + fontSize: { + xs: '.75rem', // 12px + sm: '.875rem', // 14px + base: '1rem', // 16px + lg: '1.125rem', // 18px + xl: '1.25rem', // 20px + '2xl': '1.5rem', // 24px + '3xl': '2rem', // 32px + '4xl': '2.25rem', // 36px + '5xl': '3rem' // 48px + }, + fontWeight: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900 + }, + lineHeight: { + none: 1, + tight: 1.25, + normal: 1.5, + loose: 1.75 + }, + letterSpacing: { + tight: '-0.05em', + normal: '0', + wide: '0.05em' + }, + textColor: colors, + backgroundColor: colors, + backgroundSize: { + auto: 'auto', + cover: 'cover', + contain: 'contain' + }, + borderWidth: { + default: '1px', + '0': '0', + '2': '2px', + '4': '4px', + '8': '8px' + }, + borderColor: global.Object.assign( + { default: colors['grey-light'] }, + colors + ), + borderRadius: { + none: '0', + sm: '.125rem', + default: '.25rem', + lg: '.5rem', + xl: '1rem', + full: '9999px' + }, + width: { + auto: 'auto', + px: '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + '128': '32rem', + '1/2': '50%', + '1/3': '33.33333%', + '2/3': '66.66667%', + '1/4': '25%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.66667%', + '5/6': '83.33333%', + full: '100%', + screen: '100vw' + }, + height: { + auto: 'auto', + px: '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + full: '100%', + screen: '100vh' + }, + minWidth: { + '0': '0', + full: '100%' + }, + minHeight: { + '0': '0', + full: '100%', + screen: '100vh' + }, + maxWidth: { + xs: '20rem', + sm: '30rem', + md: '40rem', + lg: '50rem', + xl: '60rem', + '2xl': '70rem', + '3xl': '80rem', + '4xl': '90rem', + '5xl': '100rem', + full: '100%' + }, + maxHeight: { + full: '100%', + 'half-screen': '50vh', + screen: '100vh' + }, + padding: { + px: '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '20': '5rem', + '24': '6rem', + '32': '8rem' + }, + margin: { + auto: 'auto', + px: '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '20': '5rem', + '24': '6rem', + '32': '8rem', + '-px': '-1px', + '-1': '-0.25rem', + '-2': '-0.5rem', + '-3': '-0.75rem', + '-4': '-1rem', + '-5': '-1.25rem', + '-6': '-1.5rem', + '-8': '-2rem', + '-10': '-2.5rem', + '-12': '-3rem', + '-16': '-4rem', + '-20': '-5rem', + '-24': '-6rem', + '-32': '-8rem' + }, + boxShadow: { + default: '0 2px 4px 0 rgba(0,0,0,0.10)', + md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', + lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', + inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', + outline: '0 0 0 3px rgba(52,144,220,0.5)', + none: 'none', + cloud: '0 0 5rem 5rem white', + btn: + 'inset 0 -6px 12px 0 rgba(0,70,144,0.25), 0 4px 6px 0 rgba(34,0,51,0.04), 0 1px 10px 0 rgba(7,48,114,0.12), 0 2px 8px -1px rgba(14,13,26,0.08)' + }, + opacity: { + '0': '0', + '25': '.25', + '50': '.5', + '75': '.75', + '100': '1' + }, + fill: { + current: 'currentColor' + }, + stroke: { + current: 'currentColor' + }, + + zIndex: { + auto: 'auto', + '0': 0, + '10': 10, + '20': 20, + '30': 30, + '40': 40, + '50': 50 + } + }, + + variants: { + appearance: ['responsive'], + backgroundAttachment: ['responsive'], + backgroundColor: ['responsive', 'hover', 'focus'], + backgroundPosition: ['responsive'], + backgroundRepeat: ['responsive'], + backgroundSize: ['responsive'], + borderCollapse: [], + borderColor: ['responsive', 'hover', 'focus'], + borderRadius: ['responsive'], + borderStyle: ['responsive'], + borderWidth: ['responsive'], + cursor: ['responsive'], + display: ['responsive'], + flexDirection: ['responsive'], + flexWrap: ['responsive'], + alignItems: ['responsive'], + alignSelf: ['responsive'], + alignContent: ['responsive'], + justifyContent: ['responsive'], + flex: ['responsive'], + flexGrow: ['responsive'], + flexShrink: ['responsive'], + float: ['responsive'], + fontFamily: ['responsive'], + fontWeight: ['responsive', 'hover', 'focus'], + height: ['responsive'], + lineHeight: ['responsive'], + listStylePosition: ['responsive'], + listStyleType: ['responsive'], + margin: ['responsive'], + maxHeight: ['responsive'], + maxWidth: ['responsive'], + minHeight: ['responsive'], + minWidth: ['responsive'], + negativeMargin: ['responsive'], + opacity: ['responsive', 'hover'], + outline: ['focus'], + overflow: ['responsive'], + padding: ['responsive'], + pointerEvents: ['responsive'], + position: ['responsive'], + inset: ['responsive'], + resize: ['responsive'], + boxShadow: ['responsive', 'hover', 'focus'], + fill: [], + stroke: [], + tableLayout: ['responsive'], + textAlign: ['responsive'], + textColor: ['responsive', 'hover', 'focus'], + fontSize: ['responsive'], + fontStyle: ['responsive', 'hover', 'focus'], + fontSmoothing: ['responsive', 'hover', 'focus'], + textDecoration: ['responsive', 'hover', 'focus'], + textTransform: ['responsive', 'hover', 'focus'], + letterSpacing: ['responsive'], + userSelect: ['responsive'], + verticalAlign: ['responsive'], + visibility: ['responsive'], + whitespace: ['responsive'], + wordBreak: ['responsive'], + width: ['responsive'], + zIndex: ['responsive'] + }, + corePlugins: { + container: false + }, + plugins: [] +}; diff --git a/tailwind.js b/tailwind.js deleted file mode 100644 index 5a24b05b..00000000 --- a/tailwind.js +++ /dev/null @@ -1,933 +0,0 @@ -/* - -Tailwind - The Utility-First CSS Framework - -A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), -David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). - -Welcome to the Tailwind config file. This is where you can customize -Tailwind specifically for your project. Don't be intimidated by the -length of this file. It's really just a big JavaScript object and -we've done our very best to explain each section. - -View the full documentation at https://tailwindcss.com. - - -|------------------------------------------------------------------------------- -| The default config -|------------------------------------------------------------------------------- -| -| This variable contains the default Tailwind config. You don't have -| to use it, but it can sometimes be helpful to have available. For -| example, you may choose to merge your custom configuration -| values with some of the Tailwind defaults. -| -*/ - -// let defaultConfig = require('tailwindcss/defaultConfig')() - -/* -|------------------------------------------------------------------------------- -| Colors https://tailwindcss.com/docs/colors -|------------------------------------------------------------------------------- -| -| Here you can specify the colors used in your project. To get you started, -| we've provided a generous palette of great looking colors that are perfect -| for prototyping, but don't hesitate to change them for your project. You -| own these colors, nothing will break if you change everything about them. -| -| We've used literal color names ("red", "blue", etc.) for the default -| palette, but if you'd rather use functional names like "primary" and -| "secondary", or even a numeric scale like "100" and "200", go for it. -| -*/ - -const colors = { - transparent: 'transparent', - - black: '#22292f', - 'grey-darkest': '#4a4a4f', - 'grey-darker': '#606f7b', - 'grey-dark': '#8795a1', - grey: '#B1B1B3', - 'grey-light': '#dae1e7', - 'grey-banner': '#f0f0f4', - 'grey-transparent': 'hsla(250, 13%, 9%, .2)', - 'grey-lighter': '#f1f5f8', - 'grey-lightest': '#F9F9FA', - white: '#ffffff', - - 'red-darkest': '#3b0d0c', - 'red-darker': '#621b18', - 'red-dark': '#cc1f1a', - red: '#e3342f', - 'red-light': '#ef5753', - 'red-lighter': '#f9acaa', - 'red-lightest': '#fcebea', - - 'orange-darkest': '#462a16', - 'orange-darker': '#613b1f', - 'orange-dark': '#de751f', - orange: '#f6993f', - 'orange-light': '#faad63', - 'orange-lighter': '#fcd9b6', - 'orange-lightest': '#fff5eb', - - 'yellow-darkest': '#453411', - 'yellow-darker': '#684f1d', - 'yellow-dark': '#f2d024', - yellow: '#ffed4a', - 'yellow-light': '#fff382', - 'yellow-lighter': '#fff9c2', - 'yellow-lightest': '#fcfbeb', - - 'green-darkest': '#003706', - 'green-darker': '#006504', - 'green-dark': '#058b00', - green: '#12bc00', - 'green-light': '#51d88a', - 'green-lighter': '#a2f5bf', - 'green-lightest': '#e3fcec', - - 'teal-darkest': '#0d3331', - 'teal-darker': '#20504f', - 'teal-dark': '#38a89d', - teal: '#4dc0b5', - 'teal-light': '#64d5ca', - 'teal-lighter': '#a0f0ed', - 'teal-lightest': '#e8fffe', - - 'blue-darkest': '#002275', - 'blue-darker': '#003eaa', - 'blue-dark': '#0060df', - blue: '#0a84ff', - 'blue-light': '#6cb2eb', - 'blue-lighter': '#bcdefa', - 'blue-lightest': '#eff8ff', - - 'indigo-darkest': '#191e38', - 'indigo-darker': '#2f365f', - 'indigo-dark': '#5661b3', - indigo: '#6574cd', - 'indigo-light': '#7886d7', - 'indigo-lighter': '#b2b7ff', - 'indigo-lightest': '#e6e8ff', - - 'purple-darkest': '#21183c', - 'purple-darker': '#382b5f', - 'purple-dark': '#794acf', - purple: '#9561e2', - 'purple-light': '#a779e9', - 'purple-lighter': '#d6bbfc', - 'purple-lightest': '#f3ebff', - - 'pink-darkest': '#451225', - 'pink-darker': '#6f213f', - 'pink-dark': '#eb5286', - pink: '#f66d9b', - 'pink-light': '#fa7ea8', - 'pink-lighter': '#ffbbca', - 'pink-lightest': '#ffebef', - cloud: 'rgba(255, 255, 255, 0.8)', - violet: 'hsl(258, 57%, 35%)' -}; - -module.exports = { - /* - |----------------------------------------------------------------------------- - | Colors https://tailwindcss.com/docs/colors - |----------------------------------------------------------------------------- - | - | The color palette defined above is also assigned to the "colors" key of - | your Tailwind config. This makes it easy to access them in your CSS - | using Tailwind's config helper. For example: - | - | .error { color: config('colors.red') } - | - */ - - colors: colors, - - /* - |----------------------------------------------------------------------------- - | Screens https://tailwindcss.com/docs/responsive-design - |----------------------------------------------------------------------------- - | - | Screens in Tailwind are translated to CSS media queries. They define the - | responsive breakpoints for your project. By default Tailwind takes a - | "mobile first" approach, where each screen size represents a minimum - | viewport width. Feel free to have as few or as many screens as you - | want, naming them in whatever way you'd prefer for your project. - | - | Tailwind also allows for more complex screen definitions, which can be - | useful in certain situations. Be sure to see the full responsive - | documentation for a complete list of options. - | - | Class name: .{screen}:{utility} - | - */ - - screens: { - sm: '576px', - md: '768px', - lg: '992px', - xl: '1200px' - }, - - /* - |----------------------------------------------------------------------------- - | Fonts https://tailwindcss.com/docs/fonts - |----------------------------------------------------------------------------- - | - | Here is where you define your project's font stack, or font families. - | Keep in mind that Tailwind doesn't actually load any fonts for you. - | If you're using custom fonts you'll need to import them prior to - | defining them here. - | - | By default we provide a native font stack that works remarkably well on - | any device or OS you're using, since it just uses the default fonts - | provided by the platform. - | - | Class name: .font-{name} - | - */ - - fonts: { - sans: [ - 'Inter', - 'system-ui', - 'BlinkMacSystemFont', - '-apple-system', - 'Segoe UI', - 'Roboto', - 'Oxygen', - 'Ubuntu', - 'Cantarell', - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - 'sans-serif' - ], - serif: [ - 'Constantia', - 'Lucida Bright', - 'Lucidabright', - 'Lucida Serif', - 'Lucida', - 'DejaVu Serif', - 'Bitstream Vera Serif', - 'Liberation Serif', - 'Georgia', - 'serif' - ], - mono: [ - 'Menlo', - 'Monaco', - 'Consolas', - 'Liberation Mono', - 'Courier New', - 'monospace' - ] - }, - - /* - |----------------------------------------------------------------------------- - | Text sizes https://tailwindcss.com/docs/text-sizing - |----------------------------------------------------------------------------- - | - | Here is where you define your text sizes. Name these in whatever way - | makes the most sense to you. We use size names by default, but - | you're welcome to use a numeric scale or even something else - | entirely. - | - | By default Tailwind uses the "rem" unit type for most measurements. - | This allows you to set a root font size which all other sizes are - | then based on. That said, you are free to use whatever units you - | prefer, be it rems, ems, pixels or other. - | - | Class name: .text-{size} - | - */ - - textSizes: { - xs: '.75rem', // 12px - sm: '.875rem', // 14px - base: '1rem', // 16px - lg: '1.125rem', // 18px - xl: '1.25rem', // 20px - '2xl': '1.5rem', // 24px - '3xl': '1.875rem', // 30px - '4xl': '2.25rem', // 36px - '5xl': '3rem' // 48px - }, - - /* - |----------------------------------------------------------------------------- - | Font weights https://tailwindcss.com/docs/font-weight - |----------------------------------------------------------------------------- - | - | Here is where you define your font weights. We've provided a list of - | common font weight names with their respective numeric scale values - | to get you started. It's unlikely that your project will require - | all of these, so we recommend removing those you don't need. - | - | Class name: .font-{weight} - | - */ - - fontWeights: { - hairline: 100, - thin: 200, - light: 300, - normal: 400, - medium: 500, - semibold: 600, - bold: 700, - extrabold: 800, - black: 900 - }, - - /* - |----------------------------------------------------------------------------- - | Leading (line height) https://tailwindcss.com/docs/line-height - |----------------------------------------------------------------------------- - | - | Here is where you define your line height values, or as we call - | them in Tailwind, leadings. - | - | Class name: .leading-{size} - | - */ - - leading: { - none: 1, - tight: 1.25, - normal: 1.5, - loose: 1.75 - }, - - /* - |----------------------------------------------------------------------------- - | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing - |----------------------------------------------------------------------------- - | - | Here is where you define your letter spacing values, or as we call - | them in Tailwind, tracking. - | - | Class name: .tracking-{size} - | - */ - - tracking: { - tight: '-0.05em', - normal: '0', - wide: '0.05em' - }, - - /* - |----------------------------------------------------------------------------- - | Text colors https://tailwindcss.com/docs/text-color - |----------------------------------------------------------------------------- - | - | Here is where you define your text colors. By default these use the - | color palette we defined above, however you're welcome to set these - | independently if that makes sense for your project. - | - | Class name: .text-{color} - | - */ - - textColors: colors, - - /* - |----------------------------------------------------------------------------- - | Background colors https://tailwindcss.com/docs/background-color - |----------------------------------------------------------------------------- - | - | Here is where you define your background colors. By default these use - | the color palette we defined above, however you're welcome to set - | these independently if that makes sense for your project. - | - | Class name: .bg-{color} - | - */ - - backgroundColors: colors, - - /* - |----------------------------------------------------------------------------- - | Background sizes https://tailwindcss.com/docs/background-size - |----------------------------------------------------------------------------- - | - | Here is where you define your background sizes. We provide some common - | values that are useful in most projects, but feel free to add other sizes - | that are specific to your project here as well. - | - | Class name: .bg-{size} - | - */ - - backgroundSize: { - auto: 'auto', - cover: 'cover', - contain: 'contain' - }, - - /* - |----------------------------------------------------------------------------- - | Border widths https://tailwindcss.com/docs/border-width - |----------------------------------------------------------------------------- - | - | Here is where you define your border widths. Take note that border - | widths require a special "default" value set as well. This is the - | width that will be used when you do not specify a border width. - | - | Class name: .border{-side?}{-width?} - | - */ - - borderWidths: { - default: '1px', - '0': '0', - '2': '2px', - '4': '4px', - '8': '8px' - }, - - /* - |----------------------------------------------------------------------------- - | Border colors https://tailwindcss.com/docs/border-color - |----------------------------------------------------------------------------- - | - | Here is where you define your border colors. By default these use the - | color palette we defined above, however you're welcome to set these - | independently if that makes sense for your project. - | - | Take note that border colors require a special "default" value set - | as well. This is the color that will be used when you do not - | specify a border color. - | - | Class name: .border-{color} - | - */ - - borderColors: global.Object.assign({ default: colors['grey-light'] }, colors), - - /* - |----------------------------------------------------------------------------- - | Border radius https://tailwindcss.com/docs/border-radius - |----------------------------------------------------------------------------- - | - | Here is where you define your border radius values. If a `default` radius - | is provided, it will be made available as the non-suffixed `.rounded` - | utility. - | - | If your scale includes a `0` value to reset already rounded corners, it's - | a good idea to put it first so other values are able to override it. - | - | Class name: .rounded{-side?}{-size?} - | - */ - - borderRadius: { - none: '0', - sm: '.125rem', - default: '.25rem', - lg: '.5rem', - xl: '1rem', - full: '9999px' - }, - - /* - |----------------------------------------------------------------------------- - | Width https://tailwindcss.com/docs/width - |----------------------------------------------------------------------------- - | - | Here is where you define your width utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based numeric scale, a percentage - | based fraction scale, plus some other common use-cases. You - | can, of course, modify these values as needed. - | - | - | It's also worth mentioning that Tailwind automatically escapes - | invalid CSS class name characters, which allows you to have - | awesome classes like .w-2/3. - | - | Class name: .w-{size} - | - */ - - width: { - auto: 'auto', - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - '128': '32rem', - '1/2': '50%', - '1/3': '33.33333%', - '2/3': '66.66667%', - '1/4': '25%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.66667%', - '5/6': '83.33333%', - full: '100%', - screen: '100vw' - }, - - /* - |----------------------------------------------------------------------------- - | Height https://tailwindcss.com/docs/height - |----------------------------------------------------------------------------- - | - | Here is where you define your height utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based numeric scale plus some other - | common use-cases. You can, of course, modify these values as - | needed. - | - | Class name: .h-{size} - | - */ - - height: { - auto: 'auto', - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - full: '100%', - screen: '100vh' - }, - - /* - |----------------------------------------------------------------------------- - | Minimum width https://tailwindcss.com/docs/min-width - |----------------------------------------------------------------------------- - | - | Here is where you define your minimum width utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | couple common use-cases by default. You can, of course, modify - | these values as needed. - | - | Class name: .min-w-{size} - | - */ - - minWidth: { - '0': '0', - full: '100%' - }, - - /* - |----------------------------------------------------------------------------- - | Minimum height https://tailwindcss.com/docs/min-height - |----------------------------------------------------------------------------- - | - | Here is where you define your minimum height utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | few common use-cases by default. You can, of course, modify these - | values as needed. - | - | Class name: .min-h-{size} - | - */ - - minHeight: { - '0': '0', - full: '100%', - screen: '100vh' - }, - - /* - |----------------------------------------------------------------------------- - | Maximum width https://tailwindcss.com/docs/max-width - |----------------------------------------------------------------------------- - | - | Here is where you define your maximum width utility sizes. These can - | be percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based scale and a "full width" size, - | which is basically a reset utility. You can, of course, - | modify these values as needed. - | - | Class name: .max-w-{size} - | - */ - - maxWidth: { - xs: '20rem', - sm: '30rem', - md: '40rem', - lg: '50rem', - xl: '60rem', - '2xl': '70rem', - '3xl': '80rem', - '4xl': '90rem', - '5xl': '100rem', - full: '100%' - }, - - /* - |----------------------------------------------------------------------------- - | Maximum height https://tailwindcss.com/docs/max-height - |----------------------------------------------------------------------------- - | - | Here is where you define your maximum height utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | couple common use-cases by default. You can, of course, modify - | these values as needed. - | - | Class name: .max-h-{size} - | - */ - - maxHeight: { - full: '100%', - 'half-screen': '50vh', - screen: '100vh' - }, - - /* - |----------------------------------------------------------------------------- - | Padding https://tailwindcss.com/docs/padding - |----------------------------------------------------------------------------- - | - | Here is where you define your padding utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default we - | provide a sensible rem based numeric scale plus a couple other - | common use-cases like "1px". You can, of course, modify these - | values as needed. - | - | Class name: .p{side?}-{size} - | - */ - - padding: { - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem' - }, - - /* - |----------------------------------------------------------------------------- - | Margin https://tailwindcss.com/docs/margin - |----------------------------------------------------------------------------- - | - | Here is where you define your margin utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default we - | provide a sensible rem based numeric scale plus a couple other - | common use-cases like "1px". You can, of course, modify these - | values as needed. - | - | Class name: .m{side?}-{size} - | - */ - - margin: { - auto: 'auto', - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem' - }, - - /* - |----------------------------------------------------------------------------- - | Negative margin https://tailwindcss.com/docs/negative-margin - |----------------------------------------------------------------------------- - | - | Here is where you define your negative margin utility sizes. These can - | be percentage based, pixels, rems, or any other units. By default we - | provide matching values to the padding scale since these utilities - | generally get used together. You can, of course, modify these - | values as needed. - | - | Class name: .-m{side?}-{size} - | - */ - - negativeMargin: { - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem' - }, - - /* - |----------------------------------------------------------------------------- - | Shadows https://tailwindcss.com/docs/shadows - |----------------------------------------------------------------------------- - | - | Here is where you define your shadow utilities. As you can see from - | the defaults we provide, it's possible to apply multiple shadows - | per utility using comma separation. - | - | If a `default` shadow is provided, it will be made available as the non- - | suffixed `.shadow` utility. - | - | Class name: .shadow-{size?} - | - */ - - shadows: { - default: '0 2px 4px 0 rgba(0,0,0,0.10)', - md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', - lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', - inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', - outline: '0 0 0 3px rgba(52,144,220,0.5)', - none: 'none', - cloud: '0 0 5rem 5rem white', - btn: - 'inset 0 -6px 12px 0 rgba(0,70,144,0.25), 0 4px 6px 0 rgba(34,0,51,0.04), 0 1px 10px 0 rgba(7,48,114,0.12), 0 2px 8px -1px rgba(14,13,26,0.08)' - }, - - /* - |----------------------------------------------------------------------------- - | Z-index https://tailwindcss.com/docs/z-index - |----------------------------------------------------------------------------- - | - | Here is where you define your z-index utility values. By default we - | provide a sensible numeric scale. You can, of course, modify these - | values as needed. - | - | Class name: .z-{index} - | - */ - - zIndex: { - auto: 'auto', - '0': 0, - '10': 10, - '20': 20, - '30': 30, - '40': 40, - '50': 50 - }, - - /* - |----------------------------------------------------------------------------- - | Opacity https://tailwindcss.com/docs/opacity - |----------------------------------------------------------------------------- - | - | Here is where you define your opacity utility values. By default we - | provide a sensible numeric scale. You can, of course, modify these - | values as needed. - | - | Class name: .opacity-{name} - | - */ - - opacity: { - '0': '0', - '25': '.25', - '50': '.5', - '75': '.75', - '100': '1' - }, - - /* - |----------------------------------------------------------------------------- - | SVG fill https://tailwindcss.com/docs/svg - |----------------------------------------------------------------------------- - | - | Here is where you define your SVG fill colors. By default we just provide - | `fill-current` which sets the fill to the current text color. This lets you - | specify a fill color using existing text color utilities and helps keep the - | generated CSS file size down. - | - | Class name: .fill-{name} - | - */ - - svgFill: { - current: 'currentColor' - }, - - /* - |----------------------------------------------------------------------------- - | SVG stroke https://tailwindcss.com/docs/svg - |----------------------------------------------------------------------------- - | - | Here is where you define your SVG stroke colors. By default we just provide - | `stroke-current` which sets the stroke to the current text color. This lets - | you specify a stroke color using existing text color utilities and helps - | keep the generated CSS file size down. - | - | Class name: .stroke-{name} - | - */ - - svgStroke: { - current: 'currentColor' - }, - - /* - |----------------------------------------------------------------------------- - | Modules https://tailwindcss.com/docs/configuration#modules - |----------------------------------------------------------------------------- - | - | Here is where you control which modules are generated and what variants are - | generated for each of those modules. - | - | Currently supported variants: - | - responsive - | - hover - | - focus - | - active - | - group-hover - | - | To disable a module completely, use `false` instead of an array. - | - */ - - modules: { - appearance: ['responsive'], - backgroundAttachment: ['responsive'], - backgroundColors: ['responsive', 'hover', 'focus'], - backgroundPosition: ['responsive'], - backgroundRepeat: ['responsive'], - backgroundSize: ['responsive'], - borderCollapse: [], - borderColors: ['responsive', 'hover', 'focus'], - borderRadius: ['responsive'], - borderStyle: ['responsive'], - borderWidths: ['responsive'], - cursor: ['responsive'], - display: ['responsive'], - flexbox: ['responsive'], - float: ['responsive'], - fonts: ['responsive'], - fontWeights: ['responsive', 'hover', 'focus'], - height: ['responsive'], - leading: ['responsive'], - lists: ['responsive'], - margin: ['responsive'], - maxHeight: ['responsive'], - maxWidth: ['responsive'], - minHeight: ['responsive'], - minWidth: ['responsive'], - negativeMargin: ['responsive'], - opacity: ['responsive', 'hover'], - outline: ['focus'], - overflow: ['responsive'], - padding: ['responsive'], - pointerEvents: ['responsive'], - position: ['responsive'], - resize: ['responsive'], - shadows: ['responsive', 'hover', 'focus'], - svgFill: [], - svgStroke: [], - tableLayout: ['responsive'], - textAlign: ['responsive'], - textColors: ['responsive', 'hover', 'focus'], - textSizes: ['responsive'], - textStyle: ['responsive', 'hover', 'focus'], - tracking: ['responsive'], - userSelect: ['responsive'], - verticalAlign: ['responsive'], - visibility: ['responsive'], - whitespace: ['responsive'], - width: ['responsive'], - zIndex: ['responsive'] - }, - - /* - |----------------------------------------------------------------------------- - | Plugins https://tailwindcss.com/docs/plugins - |----------------------------------------------------------------------------- - | - | Here is where you can register any plugins you'd like to use in your - | project. Tailwind's built-in `container` plugin is enabled by default to - | give you a Bootstrap-style responsive container component out of the box. - | - | Be sure to view the complete plugin documentation to learn more about how - | the plugin system works. - | - */ - - plugins: [ - require('tailwindcss/plugins/container')({ - // center: true, - // padding: '1rem', - }) - ], - - /* - |----------------------------------------------------------------------------- - | Advanced Options https://tailwindcss.com/docs/configuration#options - |----------------------------------------------------------------------------- - | - | Here is where you can tweak advanced configuration options. We recommend - | leaving these options alone unless you absolutely need to change them. - | - */ - - options: { - prefix: '', - important: false, - separator: ':' - } -};