Merge pull request #1405 from mozilla/dark-mode

Dark theme
This commit is contained in:
Danny Coates 2019-10-21 10:07:42 -07:00 committed by GitHub
commit 0a7c473965
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 363 additions and 215 deletions

View File

@ -1,4 +1,4 @@
# [![Firefox Send](./assets/logo.svg)](https://send.firefox.com/) # [![Firefox Send](./assets/icon.svg)](https://send.firefox.com/) Firefox Send
[![CircleCI](https://img.shields.io/circleci/project/github/mozilla/send.svg)](https://circleci.com/gh/mozilla/send) [![CircleCI](https://img.shields.io/circleci/project/github/mozilla/send.svg)](https://circleci.com/gh/mozilla/send)

View File

@ -60,9 +60,7 @@ function body(main) {
</a>`; </a>`;
*/ */
return html` return html`
<body <body class="flex flex-col items-center font-sans bg-grey-10 h-screen">
class="flex flex-col items-center font-sans bg-grey-lightest h-screen"
>
${state.cache(Header, 'header').render()} ${main(state, emit)} ${state.cache(Header, 'header').render()} ${main(state, emit)}
</body> </body>
`; `;

View File

@ -25,7 +25,7 @@ module.exports = function(state, emit) {
let content = ''; let content = '';
let button = html` let button = html`
<div <div
class="bg-blue rounded-full m-4 flex items-center justify-center shadow-lg" class="bg-blue-50 rounded-full m-4 flex items-center justify-center shadow-lg"
style="width: 56px; height: 56px" style="width: 56px; height: 56px"
onclick="${onclick}" onclick="${onclick}"
> >

View File

@ -39,7 +39,7 @@ body {
} }
.btn { .btn {
@apply bg-blue-dark; @apply bg-blue-60;
@apply text-white; @apply text-white;
@apply cursor-pointer; @apply cursor-pointer;
@apply py-4; @apply py-4;
@ -48,11 +48,11 @@ body {
} }
.btn:hover { .btn:hover {
@apply bg-blue-darker; @apply bg-blue-70;
} }
.btn:focus { .btn:focus {
@apply bg-blue-darker; @apply bg-blue-70;
} }
.checkbox { .checkbox {
@ -70,7 +70,7 @@ body {
} }
.checkbox > label::before { .checkbox > label::before {
/* @apply bg-grey-lightest; */ /* @apply bg-grey-10; */
@apply border; @apply border;
@apply rounded-sm; @apply rounded-sm;
@ -82,16 +82,16 @@ body {
} }
.checkbox > label:hover::before { .checkbox > label:hover::before {
@apply border-blue-dark; @apply border-blue-50;
} }
.checkbox > input:focus + label::before { .checkbox > input:focus + label::before {
@apply border-blue-dark; @apply border-blue-50;
} }
.checkbox > input:checked + label::before { .checkbox > input:checked + label::before {
@apply bg-blue-dark; @apply bg-blue-50;
@apply border-blue-dark; @apply border-blue-50;
background-image: url('../assets/lock.svg'); background-image: url('../assets/lock.svg');
background-position: center; background-position: center;
@ -104,8 +104,8 @@ body {
} }
.checkbox > input:disabled + label::before { .checkbox > input:disabled + label::before {
@apply bg-blue-dark; @apply bg-blue-50;
@apply border-blue-dark; @apply border-blue-50;
background-image: url('../assets/lock.svg'); background-image: url('../assets/lock.svg');
background-position: center; background-position: center;
@ -153,9 +153,21 @@ footer li:hover {
white-space: nowrap; white-space: nowrap;
} }
.link-blue {
@apply text-blue-60;
}
.link-blue:hover {
@apply text-blue-70;
}
.link-blue:focus {
@apply text-blue-70;
}
.main-header img { .main-header img {
height: 32px; height: 32px;
width: 170px; width: auto;
} }
.intro { .intro {
@ -193,14 +205,14 @@ footer li:hover {
} }
progress { progress {
@apply bg-grey-light; @apply bg-grey-30;
@apply rounded-sm; @apply rounded-sm;
@apply w-full; @apply w-full;
@apply h-1; @apply h-1;
} }
progress::-webkit-progress-bar { progress::-webkit-progress-bar {
@apply bg-grey-light; @apply bg-grey-30;
@apply rounded-sm; @apply rounded-sm;
@apply w-full; @apply w-full;
@apply h-1; @apply h-1;
@ -290,6 +302,55 @@ select {
} }
} }
@screen dark {
body {
@apply text-grey-10;
background-image: unset;
}
.btn {
@apply bg-blue-40;
@apply text-white;
}
.btn:hover {
@apply bg-blue-50;
}
.btn:focus {
@apply bg-blue-50;
}
.link-blue {
@apply text-blue-40;
}
.link-blue:hover {
@apply text-blue-50;
}
.link-blue:focus {
@apply text-blue-50;
}
.main > section {
@apply bg-grey-90;
}
.mozilla-logo {
background-color: white;
border: 1px solid white;
}
@screen md {
.main > section {
@apply border;
@apply border-grey-80;
}
}
}
@tailwind utilities; @tailwind utilities;
@responsive { @responsive {
@ -325,8 +386,6 @@ select {
.signin:hover, .signin:hover,
.signin:focus { .signin:focus {
@apply shadow-btn;
transform: scale(1.0625); transform: scale(1.0625);
} }
@ -337,19 +396,19 @@ select {
/* begin signin button color experiment */ /* begin signin button color experiment */
.white-blue { .white-blue {
@apply border-blue-dark; @apply border-blue-60;
@apply border-2; @apply border-2;
@apply text-blue-dark; @apply text-blue-60;
} }
.white-blue:hover, .white-blue:hover,
.white-blue:focus { .white-blue:focus {
@apply bg-blue-dark; @apply bg-blue-60;
@apply text-white; @apply text-white;
} }
.blue { .blue {
@apply bg-blue-dark; @apply bg-blue-60;
@apply text-white; @apply text-white;
} }

View File

@ -64,8 +64,7 @@ class Account extends Component {
return html` return html`
<send-account> <send-account>
<button <button
class="px-4 py-2 md:px-8 md:py-4 focus:outline signin ${this class="px-4 py-2 md:px-8 md:py-4 focus:outline signin border-2 link-blue border-blue-60 hover:border-blue-70 dark:border-blue-40 dark:hover:border-blue-50"
.buttonClass}"
onclick="${e => this.login(e)}" onclick="${e => this.login(e)}"
title="${translate('signInOnlyButton')}" title="${translate('signInOnlyButton')}"
> >
@ -79,19 +78,19 @@ class Account extends Component {
<input <input
type="image" type="image"
alt="${user.email}" alt="${user.email}"
class="w-8 h-8 rounded-full border text-blue md:text-white focus:outline" class="w-8 h-8 rounded-full border text-blue-50 md:text-white focus:outline"
src="${user.avatar}" src="${user.avatar}"
onclick="${e => this.avatarClick(e)}" onclick="${e => this.avatarClick(e)}"
/> />
<ul <ul
id="accountMenu" id="accountMenu"
class="invisible absolute top-0 right-0 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 dark:bg-grey-80"
onblur="${e => this.hideMenu(e)}" onblur="${e => this.hideMenu(e)}"
> >
<li class="p-2 text-grey-dark">${user.email}</li> <li class="p-2 text-grey-60 dark:text-grey-50">${user.email}</li>
<li> <li>
<button <button
class="block w-full text-left px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer focus:outline" class="block w-full text-left px-4 py-2 text-grey-80 dark:text-grey-30 hover:bg-blue-50 hover:text-white cursor-pointer focus:outline"
onclick="${e => this.logout(e)}" onclick="${e => this.logout(e)}"
title="${translate('signOut')}" title="${translate('signOut')}"
> >

View File

@ -46,7 +46,7 @@ function password(state) {
id="password-input" id="password-input"
class="${state.archive.password class="${state.archive.password
? '' ? ''
: 'invisible'} border rounded focus:border-blue-dark leading-normal my-1 py-1 px-2 h-8" : 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
autocomplete="off" autocomplete="off"
maxlength="${MAX_LENGTH}" maxlength="${MAX_LENGTH}"
type="password" type="password"
@ -58,7 +58,7 @@ function password(state) {
<label <label
id="password-msg" id="password-msg"
for="password-input" for="password-input"
class="block text-xs text-grey-darker" class="block text-xs text-grey-70"
></label> ></label>
</div> </div>
`; `;
@ -106,7 +106,9 @@ function password(state) {
function fileInfo(file, action) { function fileInfo(file, action) {
return html` return html`
<send-file class="flex flex-row items-center p-3 w-full"> <send-file class="flex flex-row items-center p-3 w-full">
<img class="h-8" src="${assets.get('blue_file.svg')}"/> <svg class="h-8 w-8 text-white dark:text-grey-90">
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>
</svg>
<p class="ml-4 w-full"> <p class="ml-4 w-full">
<h1 class="text-base font-medium word-break-all">${file.name}</h1> <h1 class="text-base font-medium word-break-all">${file.name}</h1>
<div class="text-sm font-normal opacity-75 pt-1">${bytes( <div class="text-sm font-normal opacity-75 pt-1">${bytes(
@ -120,7 +122,9 @@ function fileInfo(file, action) {
function archiveInfo(archive, action) { function archiveInfo(archive, action) {
return html` return html`
<p class="w-full flex items-center"> <p class="w-full flex items-center">
<img class="mr-3 flex-shrink-0" src="${assets.get('blue_file.svg')}"/> <svg class="h-8 w-6 mr-3 flex-shrink-0 text-white dark:text-grey-90">
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>
</svg>
<p class="flex-grow"> <p class="flex-grow">
<h1 class="text-base font-medium word-break-all">${archive.name}</h1> <h1 class="text-base font-medium word-break-all">${archive.name}</h1>
<div class="text-sm font-normal opacity-75 pt-1">${bytes( <div class="text-sm font-normal opacity-75 pt-1">${bytes(
@ -140,7 +144,7 @@ function archiveDetails(translate, archive) {
ontoggle="${toggled}" ontoggle="${toggled}"
> >
<summary <summary
class="flex items-center text-blue-dark text-sm cursor-pointer outline-none" class="flex items-center link-blue text-sm cursor-pointer outline-none"
> >
<svg <svg
class="fill-current w-4 h-4 mr-1" class="fill-current w-4 h-4 mr-1"
@ -170,20 +174,25 @@ module.exports = function(state, emit, archive) {
state.capabilities.share || platform() === 'android' state.capabilities.share || platform() === 'android'
? html` ? html`
<button <button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end flex items-end" class="link-blue self-end flex items-start"
onclick=${share} onclick=${share}
title="Share link" title="Share link"
> >
<img src="${assets.get('share-24.svg')}" class="mr-2" />Share link <svg class="h-4 w-4 mr-2">
<use xlink:href="${assets.get('share-24.svg')}#icon" />
</svg>
Share link
</button> </button>
` `
: html` : html`
<button <button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker focus:outline self-end flex items-center" class="link-blue focus:outline self-end flex items-center"
onclick=${copy} onclick=${copy}
title="${state.translate('copyLinkButton')}" title="${state.translate('copyLinkButton')}"
> >
<img src="${assets.get('copy-16.svg')}" class="mr-2" /> <svg class="h-4 w-4 mr-2">
<use xlink:href="${assets.get('copy-16.svg')}#icon" />
</svg>
${state.translate('copyLinkButton')} ${state.translate('copyLinkButton')}
</button> </button>
`; `;
@ -191,12 +200,14 @@ module.exports = function(state, emit, archive) {
platform() === 'web' platform() === 'web'
? html` ? html`
<a <a
class="flex items-baseline text-blue-dark hover:text-blue-darker focus:text-blue-darker" class="flex items-baseline link-blue"
href="${archive.url}" href="${archive.url}"
title="${state.translate('downloadButtonLabel')}" title="${state.translate('downloadButtonLabel')}"
tabindex="0" tabindex="0"
> >
<img src="${assets.get('dl.svg')}" class="mr-2" /> <svg class="h-4 w-3 mr-2">
<use xlink:href="${assets.get('dl.svg')}#icon" />
</svg>
${state.translate('downloadButtonLabel')} ${state.translate('downloadButtonLabel')}
</a> </a>
` `
@ -206,7 +217,7 @@ module.exports = function(state, emit, archive) {
return html` return html`
<send-archive <send-archive
id="archive-${archive.id}" id="archive-${archive.id}"
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full" class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90 dark:border dark:border-grey-70"
> >
${archiveInfo( ${archiveInfo(
archive, archive,
@ -225,7 +236,7 @@ module.exports = function(state, emit, archive) {
${expiryInfo(state.translate, archive)} ${expiryInfo(state.translate, archive)}
</div> </div>
${archiveDetails(state.translate, archive)} ${archiveDetails(state.translate, archive)}
<hr class="w-full border-t my-4" /> <hr class="w-full border-t my-4 dark:border-grey-70" />
<div class="flex justify-between w-full"> <div class="flex justify-between w-full">
${dl} ${copyOrShare} ${dl} ${copyOrShare}
</div> </div>
@ -269,18 +280,21 @@ module.exports = function(state, emit, archive) {
module.exports.wip = function(state, emit) { module.exports.wip = function(state, emit) {
return html` return html`
<send-upload-area class="flex flex-col bg-white h-full w-full" id="wip"> <send-upload-area
class="flex flex-col bg-white h-full w-full dark:bg-grey-90"
id="wip"
>
${list( ${list(
Array.from(state.archive.files) Array.from(state.archive.files)
.reverse() .reverse()
.map(f => .map(f =>
fileInfo(f, remove(f, state.translate('deleteButtonHover'))) fileInfo(f, remove(f, state.translate('deleteButtonHover')))
), ),
'flex-shrink bg-grey-lightest rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen', 'flex-shrink bg-grey-10 rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen dark:bg-black',
'bg-white px-2 my-2 shadow-light rounded' 'bg-white px-2 my-2 shadow-light rounded dark:bg-grey-90 dark:border dark:border-grey-80'
)} )}
<div <div
class="flex-shrink-0 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-10 rounded-b mb-1 font-medium dark:bg-grey-90"
> >
<input <input
id="file-upload" id="file-upload"
@ -300,10 +314,12 @@ module.exports.wip = function(state, emit) {
class="flex items-center cursor-pointer" class="flex items-center cursor-pointer"
title="${state.translate('addFilesButton')}" title="${state.translate('addFilesButton')}"
> >
<img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" /> <svg class="w-6 h-6 mr-2 link-blue">
<use xlink:href="${assets.get('addfiles.svg')}#plus" />
</svg>
${state.translate('addFilesButton')} ${state.translate('addFilesButton')}
</label> </label>
<div class="font-normal text-sm text-grey-darker"> <div class="font-normal text-sm text-grey-70 dark:text-grey-40">
${state.translate('totalSize', { ${state.translate('totalSize', {
size: bytes(state.archive.size) size: bytes(state.archive.size)
})} })}
@ -378,22 +394,22 @@ module.exports.uploading = function(state, emit) {
return html` return html`
<send-upload-area <send-upload-area
id="${archive.id}" id="${archive.id}"
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full" class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90"
> >
${archiveInfo(archive)} ${archiveInfo(archive)}
<div class="text-xs text-grey-dark w-full mt-2 mb-2"> <div class="text-xs opacity-75 w-full mt-2 mb-2">
${expiryInfo(state.translate, { ${expiryInfo(state.translate, {
dlimit: state.archive.dlimit, dlimit: state.archive.dlimit,
dtotal: 0, dtotal: 0,
expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000 expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
})} })}
</div> </div>
<div class="text-blue-dark text-sm font-medium mt-2"> <div class="link-blue text-sm font-medium mt-2">
${progressPercent} ${progressPercent}
</div> </div>
<progress class="my-3" value="${progress}">${progressPercent}</progress> <progress class="my-3" value="${progress}">${progressPercent}</progress>
<button <button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium" class="link-blue self-end font-medium"
onclick=${cancel} onclick=${cancel}
title="${state.translate('deletePopupCancel')}" title="${state.translate('deletePopupCancel')}"
> >
@ -415,7 +431,7 @@ module.exports.empty = function(state, emit) {
? '' ? ''
: html` : html`
<button <button
class="center font-medium text-sm text-blue-dark hover:text-blue-darker focus:text-blue-darker mt-4 mb-2" class="center font-medium text-sm link-blue mt-4 mb-2"
onclick="${event => { onclick="${event => {
event.stopPropagation(); event.stopPropagation();
emit('signup-cta', 'drop'); emit('signup-cta', 'drop');
@ -428,14 +444,16 @@ module.exports.empty = function(state, emit) {
`; `;
return html` return html`
<send-upload-area <send-upload-area
class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full" class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full dark:border-grey-60"
onclick="${e => { onclick="${e => {
if (e.target.tagName !== 'LABEL') { if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click(); document.getElementById('file-upload').click();
} }
}}" }}"
> >
<img src="${assets.get('addfiles.svg')}" width="48" height="48" /> <svg class="w-10 h-10 link-blue">
<use xlink:href="/${assets.get('addfiles.svg')}#plus" />
</svg>
<div class="pt-6 pb-2 text-center text-lg font-bold tracking-wide"> <div class="pt-6 pb-2 text-center text-lg font-bold tracking-wide">
${state.translate('dragAndDropFiles')} ${state.translate('dragAndDropFiles')}
</div> </div>
@ -469,14 +487,11 @@ module.exports.empty = function(state, emit) {
`; `;
function focus(event) { function focus(event) {
event.target.nextElementSibling.classList.add('bg-blue-darker', 'outline'); event.target.nextElementSibling.classList.add('bg-blue-70', 'outline');
} }
function blur(event) { function blur(event) {
event.target.nextElementSibling.classList.remove( event.target.nextElementSibling.classList.remove('bg-blue-70', 'outline');
'bg-blue-darker',
'outline'
);
} }
function add(event) { function add(event) {
@ -501,8 +516,10 @@ module.exports.preview = function(state, emit) {
</div> </div>
`; `;
return html` return html`
<send-archive class="flex flex-col max-h-full bg-white p-4 w-full md:w-128"> <send-archive
<div class="border rounded py-3 px-6"> class="flex flex-col max-h-full bg-white p-4 w-full md:w-128 dark:bg-grey-90"
>
<div class="border rounded py-3 px-6 dark:border-grey-70">
${archiveInfo(archive)} ${details} ${archiveInfo(archive)} ${details}
</div> </div>
<button <button
@ -529,10 +546,10 @@ module.exports.downloading = function(state) {
const progressPercent = percent(progress); const progressPercent = percent(progress);
return html` return html`
<send-archive <send-archive
class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128" class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128 dark:bg-grey-90"
> >
${archiveInfo(archive)} ${archiveInfo(archive)}
<div class="text-blue-dark text-sm font-medium mt-2"> <div class="link-blue text-sm font-medium mt-2">
${progressPercent} ${progressPercent}
</div> </div>
<progress class="my-3" value="${progress}">${progressPercent}</progress> <progress class="my-3" value="${progress}">${progressPercent}</progress>

View File

@ -18,7 +18,7 @@ module.exports = function body(main) {
return function(state, emit) { return function(state, emit) {
const b = html` const b = html`
<body <body
class="flex flex-col items-center font-sans md:h-screen md:bg-grey-lightest" class="flex flex-col items-center font-sans md:h-screen md:bg-grey-10 dark:bg-black"
> >
${banner(state, emit)} ${state.cache(Header, 'header').render()} ${banner(state, emit)} ${state.cache(Header, 'header').render()}
${main(state, emit)} ${state.cache(Footer, 'footer').render()} ${main(state, emit)} ${state.cache(Footer, 'footer').render()}

View File

@ -10,14 +10,16 @@ module.exports = function(name, url) {
<h1 class="text-3xl font-bold my-4"> <h1 class="text-3xl font-bold my-4">
${state.translate('notifyUploadEncryptDone')} ${state.translate('notifyUploadEncryptDone')}
</h1> </h1>
<p class="font-normal leading-normal text-grey-darkest word-break-all"> <p
class="font-normal leading-normal text-grey-80 word-break-all dark:text-grey-40"
>
${state.translate('copyLinkDescription')} <br /> ${state.translate('copyLinkDescription')} <br />
${name} ${name}
</p> </p>
<input <input
type="text" type="text"
id="share-url" id="share-url"
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1" class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
value="${url}" value="${url}"
readonly="true" readonly="true"
/> />
@ -29,7 +31,7 @@ module.exports = function(name, url) {
${state.translate('copyLinkButton')} ${state.translate('copyLinkButton')}
</button> </button>
<button <button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline" class="link-blue my-4 font-medium cursor-pointer focus:outline"
onclick="${close}" onclick="${close}"
title="${state.translate('okButton')}" title="${state.translate('okButton')}"
> >

View File

@ -41,7 +41,9 @@ function preview(state, emit) {
<h1 class="text-3xl font-bold mb-4"> <h1 class="text-3xl font-bold mb-4">
${state.translate('downloadTitle')} ${state.translate('downloadTitle')}
</h1> </h1>
<p class="w-full text-grey-darkest text-center leading-normal"> <p
class="w-full text-grey-80 text-center leading-normal dark:text-grey-40"
>
${state.translate('downloadDescription')} ${state.translate('downloadDescription')}
</p> </p>
${archiveTile.preview(state, emit)} ${archiveTile.preview(state, emit)}

View File

@ -5,13 +5,13 @@ module.exports = function(state) {
return html` return html`
<div <div
id="download-complete" id="download-complete"
class="flex flex-col items-center justify-center h-full w-full bg-white p-2" class="flex flex-col items-center justify-center h-full w-full bg-white p-2 dark:bg-grey-90"
> >
<h1 class="text-center text-3xl font-bold my-2"> <h1 class="text-center text-3xl font-bold my-2">
${state.translate('downloadFinish')} ${state.translate('downloadFinish')}
</h1> </h1>
<img src="${assets.get('completed.svg')}" class="my-12 h-48" /> <img src="${assets.get('completed.svg')}" class="my-12 h-48" />
<p class="text-grey-darkest leading-normal"> <p class="text-grey-80 leading-normal dark:text-grey-40">
${state.translate('trySendDescription')} ${state.translate('trySendDescription')}
</p> </p>
<p class="my-5"> <p class="my-5">

View File

@ -6,12 +6,14 @@ module.exports = function(state, emit) {
const div = html` const div = html`
<div <div
class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto" class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto dark:bg-grey-90"
> >
<h1 class="text-3xl font-bold mb-4"> <h1 class="text-3xl font-bold mb-4">
${state.translate('downloadTitle')} ${state.translate('downloadTitle')}
</h1> </h1>
<p class="w-full mb-4 text-center text-grey-darkest leading-normal"> <p
class="w-full mb-4 text-center text-grey-80 dark:text-grey-40 leading-normal"
>
${state.translate('downloadDescription')} ${state.translate('downloadDescription')}
</p> </p>
<form <form
@ -22,8 +24,8 @@ module.exports = function(state, emit) {
<input <input
id="password-input" id="password-input"
class="w-full border-l border-t border-b rounded-l-lg rounded-r-none ${invalid class="w-full border-l border-t border-b rounded-l-lg rounded-r-none ${invalid
? 'border-red' ? 'border-red dark:border-red-40'
: 'border-grey'} leading-loose px-2 py-1" : 'border-grey'} leading-loose px-2 py-1 dark:bg-grey-80"
maxlength="32" maxlength="32"
autocomplete="off" autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}" placeholder="${state.translate('unlockInputPlaceholder')}"
@ -34,7 +36,7 @@ module.exports = function(state, emit) {
type="submit" type="submit"
id="password-btn" id="password-btn"
class="btn rounded-r-lg rounded-l-none ${invalid class="btn rounded-r-lg rounded-l-none ${invalid
? 'bg-red hover:bg-red focus:bg-red' ? 'bg-red hover:bg-red focus:bg-red dark:bg-red-40'
: ''}" : ''}"
value="${state.translate('unlockButtonLabel')}" value="${state.translate('unlockButtonLabel')}"
title="${state.translate('unlockButtonLabel')}" title="${state.translate('unlockButtonLabel')}"
@ -42,7 +44,7 @@ module.exports = function(state, emit) {
</form> </form>
<label <label
id="password-error" id="password-error"
class="${invalid ? '' : 'invisible'} text-red my-4" class="${invalid ? '' : 'invisible'} text-red dark:text-red-40 my-4"
for="password-input" for="password-input"
> >
${state.translate('passwordTryAgain')} ${state.translate('passwordTryAgain')}

View File

@ -13,7 +13,7 @@ module.exports = function(state, emit) {
${state.translate('errorPageHeader')} ${state.translate('errorPageHeader')}
</h1> </h1>
<img class="my-12 h-48" src="${assets.get('error.svg')}" /> <img class="my-12 h-48" src="${assets.get('error.svg')}" />
<p class="max-w-md text-center text-grey-darkest leading-normal"> <p class="max-w-md text-center text-grey-80 leading-normal">
${state.translate('trySendDescription')} ${state.translate('trySendDescription')}
</p> </p>
<p class="my-5"> <p class="my-5">

View File

@ -19,12 +19,9 @@ class Footer extends Component {
const feedbackUrl = `https://qsurvey.mozilla.com/s3/Firefox-Send-Product-Feedback?ver=${version}&browser=${browser}`; const feedbackUrl = `https://qsurvey.mozilla.com/s3/Firefox-Send-Product-Feedback?ver=${version}&browser=${browser}`;
return html` return html`
<footer <footer
class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-dark md:items-center justify-between" class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-60 dark:text-grey-40 md:items-center justify-between"
> >
<a <a class="mozilla-logo m-2" href="https://www.mozilla.org/">
class="mozilla-logo pb-10 md:pb-0 m-2"
href="https://www.mozilla.org/"
>
Mozilla Mozilla
</a> </a>
<ul <ul

View File

@ -16,15 +16,27 @@ class Header extends Component {
this.account.render(); this.account.render();
return false; return false;
} }
createElement() { createElement() {
const title = const title =
platform() === 'android' platform() === 'android'
? html` ? html`
<a class=""><img src="${assets.get('logo.svg')}"/></a> <a class="flex flex-row items-center">
<img src="${assets.get('icon.svg')}" />
<svg class="w-48">
<use xlink:href="${assets.get('wordmark.svg')}#logo" />
</svg>
</a>
` `
: html` : html`
<a class="" href="/"><img src="${assets.get('logo.svg')}"/></a> <a class="flex flex-row items-center" href="/">
<img
alt="${this.state.translate('title')}"
src="${assets.get('icon.svg')}"
/>
<svg class="w-48 md:w-64">
<use xlink:href="${assets.get('wordmark.svg')}#logo" />
</svg>
</a>
`; `;
return html` return html`
<header <header

View File

@ -4,7 +4,7 @@ const assets = require('../../common/assets');
module.exports = function intro(state) { module.exports = function intro(state) {
return html` return html`
<send-intro <send-intro
class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full" class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full dark:bg-grey-90"
> >
<div class="mt-12 flex flex-col h-full"> <div class="mt-12 flex flex-col h-full">
<h1 class="text-3xl font-bold md:pb-2"> <h1 class="text-3xl font-bold md:pb-2">

View File

@ -6,7 +6,7 @@ module.exports = function(state, emit) {
<main class="main"> <main class="main">
${state.modal && modal(state, emit)} ${state.modal && modal(state, emit)}
<div <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" class="flex flex-col items-center bg-white m-4 px-6 py-8 border border-grey-30 md:border-none md:px-12 md:py-16 shadow w-full md:h-full dark:bg-grey-90"
> >
<h1 class="text-center text-3xl font-bold"> <h1 class="text-center text-3xl font-bold">
${state.translate('legalTitle')} ${state.translate('legalTitle')}
@ -19,7 +19,7 @@ module.exports = function(state, emit) {
href="https://www.mozilla.org/privacy/" href="https://www.mozilla.org/privacy/"
target="__blank" target="__blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="text-blue-dark hover:underline" class="link-blue hover:underline"
>Mozilla Privacy Policy</a >Mozilla Privacy Policy</a
> >
<span <span
@ -31,7 +31,7 @@ module.exports = function(state, emit) {
href="https://github.com/mozilla/send/blob/master/docs/metrics.md" href="https://github.com/mozilla/send/blob/master/docs/metrics.md"
target="__blank" target="__blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="text-blue-dark hover:underline" class="link-blue hover:underline"
>here</a >here</a
>. >.
</p> </p>

View File

@ -3,13 +3,12 @@ const html = require('choo/html');
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
<send-modal <send-modal
class="absolute inset-0 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 dark:bg-grey-90"
onclick="${close}"
> >
<div <div
class="h-full w-full max-h-screen absolute top-0 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()}"> <div class="w-full">
${state.modal(state, emit, close)} ${state.modal(state, emit, close)}
</div> </div>
</div> </div>

View File

@ -12,7 +12,7 @@ module.exports = function(state, emit) {
'downloadTitle' 'downloadTitle'
)}</h1> )}</h1>
<p <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" class="w-full p-2 border border-yellow-50 rounded md:w-4/5 text-orange-60 bg-yellow-40 text-center leading-normal"
> >
${state.translate('noStreamsWarning')} ${state.translate('noStreamsWarning')}
</p> </p>

View File

@ -13,7 +13,7 @@ module.exports = function(state, emit) {
${state.translate('expiredTitle')} ${state.translate('expiredTitle')}
</h1> </h1>
<img src="${assets.get('notFound.svg')}" class="my-12" /> <img src="${assets.get('notFound.svg')}" class="my-12" />
<p class="max-w-md text-center text-grey-darkest leading-normal"> <p class="max-w-md text-center text-grey-80 leading-normal">
${state.translate('trySendDescription')} ${state.translate('trySendDescription')}
</p> </p>
<p class="my-5"> <p class="my-5">

View File

@ -15,7 +15,7 @@ class Promo extends Component {
createElement() { createElement() {
return html` return html`
<send-promo <send-promo
class="w-full flex-row items-center content-center justify-center bg-white text-grey-darkest px-4 py-3 flex border-b border-grey-banner leading-normal" class="w-full flex-row items-center content-center justify-center bg-white text-grey-80 px-4 py-3 flex border-b border-grey-banner leading-normal dark:bg-grey-90 dark:text-grey-20 dark:border-grey-80"
> >
<div class="flex items-center mx-auto"> <div class="flex items-center mx-auto">
<img <img
@ -26,7 +26,7 @@ class Promo extends Component {
<span class="ml-2 sm:ml-4 text-xs sm:text-base"> <span class="ml-2 sm:ml-4 text-xs sm:text-base">
${this.state.translate('trailheadPromo')}${' '} ${this.state.translate('trailheadPromo')}${' '}
<a <a
class="underline text-blue-dark" class="underline link-blue"
href="http://www.mozilla.org/firefox/accounts/?utm_source=send.firefox.com&utm_medium=banner&utm_campaign=trailhead&utm_content=protect-your-privacy" href="http://www.mozilla.org/firefox/accounts/?utm_source=send.firefox.com&utm_medium=banner&utm_campaign=trailhead&utm_content=protect-your-privacy"
>${this.state.translate('learnMore')}</a >${this.state.translate('learnMore')}</a
> >

View File

@ -6,7 +6,7 @@ module.exports = function(selected, options, translate, changed, htmlId) {
return html` return html`
<select <select
id="${htmlId}" id="${htmlId}"
class="appearance-none cursor-pointer border rounded bg-grey-lightest hover:border-blue-dark focus:border-blue-dark pl-1 pr-8 py-1 my-1 h-8" class="appearance-none cursor-pointer border rounded bg-grey-10 hover:border-blue-50 focus:border-blue-50 pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
onchange="${choose}" onchange="${choose}"
> >
${options.map( ${options.map(

View File

@ -9,14 +9,16 @@ module.exports = function(name, url) {
<h1 class="text-3xl font-bold my-4"> <h1 class="text-3xl font-bold my-4">
${state.translate('notifyUploadEncryptDone')} ${state.translate('notifyUploadEncryptDone')}
</h1> </h1>
<p class="font-normal leading-normal text-grey-darkest word-break-all"> <p
class="font-normal leading-normal text-grey-80 word-break-all dark:text-grey-40"
>
${state.translate('shareLinkDescription')}<br /> ${state.translate('shareLinkDescription')}<br />
${name} ${name}
</p> </p>
<input <input
type="text" type="text"
id="share-url" id="share-url"
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1" class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
value="${url}" value="${url}"
readonly="true" readonly="true"
/> />
@ -28,7 +30,7 @@ module.exports = function(name, url) {
${state.translate('shareLinkButton')} ${state.translate('shareLinkButton')}
</button> </button>
<button <button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline" class="link-blue my-4 font-medium cursor-pointer focus:outline"
onclick="${close}" onclick="${close}"
title="${state.translate('okButton')}" title="${state.translate('okButton')}"
> >

View File

@ -20,7 +20,7 @@ module.exports = function(trigger) {
${state.translate('accountBenefitTitle')} ${state.translate('accountBenefitTitle')}
</h1> </h1>
<ul <ul
class="leading-normal text-grey-darkest my-2 mt-4 pl-4 md:self-center" class="leading-normal list-disc text-grey-80 my-2 mt-4 pl-4 md:self-center dark:text-grey-40"
> >
<li> <li>
${state.translate('accountBenefitLargeFiles', { ${state.translate('accountBenefitLargeFiles', {
@ -42,7 +42,7 @@ module.exports = function(trigger) {
<input <input
id="email-input" id="email-input"
type="email" type="email"
class="${hidden} border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-darker leading-loose" class="${hidden} border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-70 leading-loose dark:bg-grey-80 dark:text-white"
placeholder=${state.translate('emailPlaceholder')} placeholder=${state.translate('emailPlaceholder')}
/> />
<input <input
@ -54,7 +54,7 @@ module.exports = function(trigger) {
/> />
</form> </form>
<button <button
class="my-3 text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium" class="my-3 link-blue font-medium"
title="${state.translate('deletePopupCancel')}" title="${state.translate('deletePopupCancel')}"
onclick=${cancel} onclick=${cancel}
> >

View File

@ -16,7 +16,7 @@ module.exports = function() {
<h1 class="text-3xl font-bold my-4"> <h1 class="text-3xl font-bold my-4">
Tell us what you think. Tell us what you think.
</h1> </h1>
<p class="font-normal leading-normal text-grey-darkest px-4"> <p class="font-normal leading-normal text-grey-80 px-4">
Love Firefox Send? Take a quick survey to let us know how we can make Love Firefox Send? Take a quick survey to let us know how we can make
it better. it better.
</p> </p>
@ -30,7 +30,7 @@ module.exports = function() {
Give feedback Give feedback
</a> </a>
<button <button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium cursor-pointer focus:outline" class="link-blue font-medium cursor-pointer focus:outline"
onclick="${close}" onclick="${close}"
title="Skip" title="Skip"
> >

View File

@ -27,7 +27,7 @@ module.exports = function(state, emit) {
<main class="main"> <main class="main">
${state.modal && modal(state, emit)} ${state.modal && modal(state, emit)}
<section <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" class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border border-grey-30 md:border-none md:px-12 md:py-16 shadow w-full md:h-full dark:bg-grey-90"
> >
<h1 class="text-3xl font-bold">${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> <p class="mt-4 mb-8 max-w-md leading-normal">${strings.description}</p>

View File

@ -1,9 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs> <symbol id="plus" viewBox="0 0 24 24">
<polygon id="addfiles-a" points="11.143 6 11.143 11.143 6 11.143 6 12.857 11.143 12.857 11.143 18 12.857 18 12.857 12.857 18 12.857 18 11.143 12.857 11.143 12.857 6"/>
</defs>
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<path fill="#0060df" fill-rule="nonzero" d="M12,22.6666667 C17.8910373,22.6666667 22.6666667,17.8910373 22.6666667,12 C22.6666667,6.10896267 17.8910373,1.33333333 12,1.33333333 C6.10896267,1.33333333 1.33333333,6.10896267 1.33333333,12 C1.33333333,17.8910373 6.10896267,22.6666667 12,22.6666667 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z"/> <path fill="currentColor" fill-rule="nonzero" d="M12,22.6666667 C17.8910373,22.6666667 22.6666667,17.8910373 22.6666667,12 C22.6666667,6.10896267 17.8910373,1.33333333 12,1.33333333 C6.10896267,1.33333333 1.33333333,6.10896267 1.33333333,12 C1.33333333,17.8910373 6.10896267,22.6666667 12,22.6666667 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z"/>
<use fill="#0060df" xlink:href="#addfiles-a"/> <polygon fill="currentColor" points="11.143 6 11.143 11.143 6 11.143 6 12.857 11.143 12.857 11.143 18 12.857 18 12.857 12.857 18 12.857 18 11.143 12.857 11.143 12.857 6"/>
</g> </g>
</symbol>
<use xlink:href="#plus"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 856 B

After

Width:  |  Height:  |  Size: 831 B

View File

@ -1,8 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="26px" height="32px" viewBox="0 0 26 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 53 (72520) - https://sketchapp.com --> <symbol id="icon" viewBox="0 0 26 32">
<title>6AF7DAB4-6456-44F2-AABE-F001D910B641</title>
<desc>Created with sketchtool.</desc>
<defs> <defs>
<path d="M21.848475,31.6653183 L2.89005487,31.6653183 C1.32717435,31.6653183 0.104050469,30.3742431 0.104050469,28.8793139 L0.104050469,2.7860044 C0.104050469,1.22312388 1.39512568,0 2.89005487,0 L14.7135857,0 C15.4610503,0 16.2085149,0.271805307 16.6841742,0.815415921 L23.8190635,7.95030523 C24.3626741,8.49391584 24.6344794,9.17342911 24.6344794,9.9208937 L24.6344794,28.8793139 C24.6344794,30.3742431 23.4113555,31.6653183 21.848475,31.6653183 Z" id="path-1"></path> <path d="M21.848475,31.6653183 L2.89005487,31.6653183 C1.32717435,31.6653183 0.104050469,30.3742431 0.104050469,28.8793139 L0.104050469,2.7860044 C0.104050469,1.22312388 1.39512568,0 2.89005487,0 L14.7135857,0 C15.4610503,0 16.2085149,0.271805307 16.6841742,0.815415921 L23.8190635,7.95030523 C24.3626741,8.49391584 24.6344794,9.17342911 24.6344794,9.9208937 L24.6344794,28.8793139 C24.6344794,30.3742431 23.4113555,31.6653183 21.848475,31.6653183 Z" id="path-1"></path>
</defs> </defs>
@ -14,14 +12,15 @@
<mask id="mask-2" fill="white"> <mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use> <use xlink:href="#path-1"></use>
</mask> </mask>
<use id="Mask" fill="#45A1FF" opacity="0.6" xlink:href="#path-1"></use> <use id="Mask" fill="#45a1ff" xlink:href="#path-1"></use>
<path d="M24.3031318,10.6474633 L16.7826187,10.6474633 C15.2742552,10.6474633 14.051485,9.42469306 14.051485,7.91632957 L14.051485,0.395816478" id="Path" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path> <path d="M24.3031318,10.6474633 L16.7826187,10.6474633 C15.2742552,10.6474633 14.051485,9.42469306 14.051485,7.91632957 L14.051485,0.395816478" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
<path d="M7.2830232,8.93885547 L8.91906464,8.93885547" id="Path" stroke="#0060DF" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path> <path d="M7.2830232,8.93885547 L8.91906464,8.93885547" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
<path d="M7.2830232,15.7798836 L17.5412669,15.7798836" id="Path" stroke="#0060DF" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path> <path d="M7.2830232,15.7798836 L17.5412669,15.7798836" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
<path d="M7.2830232,22.6209117 L17.5412669,22.6209117" id="Path" stroke="#0060DF" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path> <path d="M7.2830232,22.6209117 L17.5412669,22.6209117" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
</g> </g>
</g> </g>
</g> </g>
</g> </g>
</g> </g>
</symbol>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16"><path fill="#4A4A4A" d="M9.414 8l5.293-5.293a1 1 0 0 0-1.414-1.414L8 6.586 2.707 1.293a1 1 0 0 0-1.414 1.414L6.586 8l-5.293 5.293a1 1 0 1 0 1.414 1.414L8 9.414l5.293 5.293a1 1 0 0 0 1.414-1.414z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16"><path fill="#737373" d="M9.414 8l5.293-5.293a1 1 0 0 0-1.414-1.414L8 6.586 2.707 1.293a1 1 0 0 0-1.414 1.414L6.586 8l-5.293 5.293a1 1 0 1 0 1.414 1.414L8 9.414l5.293 5.293a1 1 0 0 0 1.414-1.414z"/></svg>

Before

Width:  |  Height:  |  Size: 287 B

After

Width:  |  Height:  |  Size: 287 B

View File

@ -1 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#0060df" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg> <svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon" viewBox="0 0 16 16">
<path fill="currentColor" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/>
</symbol>
</svg>

Before

Width:  |  Height:  |  Size: 398 B

After

Width:  |  Height:  |  Size: 411 B

View File

@ -1,15 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="12px" height="16px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 53 (72520) - https://sketchapp.com --> <symbol id="icon" viewBox="0 0 12 16">
<title>728D143F-562C-4AE5-80DA-9DBBD9D647D8</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<desc>Created with sketchtool.</desc> <g transform="translate(-770.000000, -481.000000)" fill="currentColor">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(744.000000, 350.000000)">
<g id="Send_Sending" transform="translate(-770.000000, -481.000000)" fill="#0060DF"> <g transform="translate(26.000000, 131.000000)">
<g id="List-Item-3" transform="translate(744.000000, 350.000000)"> <path d="M5.293,12.707 C5.6835,13.097382 6.316501,13.097383 6.707001,12.707 L11.707,7.707 C12.08597,7.31462 12.08054,6.69092 11.69481,6.305189 C11.30908,5.91946 10.68538,5.91403 10.293,6.293 L7,9.586 L7,1 C7,0.44772 6.552285,0 6,0 C5.447715,0 5,0.44772 5,1 L5,9.586 L1.707,6.293 C1.314621,5.91403 0.690915,5.91945 0.305181,6.305182 C-0.080553,6.690915 -0.085973,7.314622 0.293,7.707001 L5.293,12.707 Z M11,14 L1,14 C0.447715,14 0,14.447715 0,15 C0,15.5522852 0.447715,16 1,16 L11,16 C11.55228,16 12,15.5522852 12,15 C12,14.447715 11.55229,14 11,14 Z"></path>
<g id="Download-Icon" transform="translate(26.000000, 131.000000)">
<path d="M5.293,12.707 C5.6835,13.097382 6.316501,13.097383 6.707001,12.707 L11.707,7.707 C12.08597,7.31462 12.08054,6.69092 11.69481,6.305189 C11.30908,5.91946 10.68538,5.91403 10.293,6.293 L7,9.586 L7,1 C7,0.44772 6.552285,0 6,0 C5.447715,0 5,0.44772 5,1 L5,9.586 L1.707,6.293 C1.314621,5.91403 0.690915,5.91945 0.305181,6.305182 C-0.080553,6.690915 -0.085973,7.314622 0.293,7.707001 L5.293,12.707 Z M11,14 L1,14 C0.447715,14 0,14.447715 0,15 C0,15.5522852 0.447715,16 1,16 L11,16 C11.55228,16 12,15.5522852 12,15 C12,14.447715 11.55229,14 11,14 Z" id="Fill-1"></path>
</g> </g>
</g> </g>
</g> </g>
</g> </g>
</symbol>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

41
assets/icon.svg Normal file
View File

@ -0,0 +1,41 @@
<svg viewBox="0 0 65 64" height="64" width="65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="linear-gradient" x1="46.37" y1="59.71" x2="15.42" y2="6.11" gradientTransform="matrix(1, 0, 0, -1, 0, 64)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ff980e"/>
<stop offset="0.21" stop-color="#ff7139"/>
<stop offset="0.36" stop-color="#ff5854"/>
<stop offset="0.46" stop-color="#ff4f5e"/>
<stop offset="0.69" stop-color="#ff3750"/>
<stop offset="0.86" stop-color="#f92261"/>
<stop offset="1" stop-color="#f5156c"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="46.37" y1="59.71" x2="15.42" y2="6.11" gradientTransform="matrix(1, 0, 0, -1, 0, 64)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff44f" stop-opacity="0.8"/>
<stop offset="0.09" stop-color="#fff44f" stop-opacity="0.7"/>
<stop offset="0.75" stop-color="#fff44f" stop-opacity="0"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="40.19" y1="26.08" x2="54.32" y2="50.55" gradientTransform="matrix(1, 0, 0, -1, 0, 64)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#3a8ee6"/>
<stop offset="0.24" stop-color="#5c79f0"/>
<stop offset="0.63" stop-color="#9059ff"/>
<stop offset="1" stop-color="#c139e6"/>
</linearGradient>
<linearGradient id="linear-gradient-4" x1="54.32" y1="50.58" x2="48.39" y2="40.31" gradientTransform="matrix(1, 0, 0, -1, 0, 64)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#6e008b" stop-opacity="0.5"/>
<stop offset="0.5" stop-color="#c846cb" stop-opacity="0"/>
</linearGradient>
<linearGradient id="linear-gradient-5" x1="56.96" y1="22.5" x2="41.98" y2="37.46" gradientTransform="matrix(1, 0, 0, -1, 0, 64)" gradientUnits="userSpaceOnUse">
<stop offset="0.14" stop-color="#6a2bea" stop-opacity="0"/>
<stop offset="0.34" stop-color="#642de4" stop-opacity="0.03"/>
<stop offset="0.55" stop-color="#5131d3" stop-opacity="0.12"/>
<stop offset="0.76" stop-color="#3139b7" stop-opacity="0.27"/>
<stop offset="0.98" stop-color="#054490" stop-opacity="0.48"/>
<stop offset="1" stop-color="#00458b" stop-opacity="0.5"/>
</linearGradient>
</defs>
<path d="M32.56,0C14.61,0,0,14.33,0,31.94a3.42,3.42,0,0,0,3.42,3.42H29.14V52.3l-8-8a3.42,3.42,0,1,0-4.84,4.84L30.14,63a2.73,2.73,0,0,0,.25.23l.23.17h.05l.24.14.27.13.28.1.29.07L32,64h1.27l.29-.07.29-.1.27-.13.24-.14.24-.17L35,63,48.8,49.18A3.43,3.43,0,0,0,44,44.34l-8,8v-17H61.7a3.42,3.42,0,0,0,3.42-3.42h0C65.12,14.33,50.51,0,32.56,0ZM7.09,28.51A25.54,25.54,0,0,1,32.56,6.85,25.55,25.55,0,0,1,58,28.51Z" fill="url(#linear-gradient)"/>
<path d="M32.56,0C14.61,0,0,14.33,0,31.94a3.42,3.42,0,0,0,3.42,3.42H29.14V52.3l-8-8a3.42,3.42,0,1,0-4.84,4.84L30.14,63a2.73,2.73,0,0,0,.25.23l.23.17h.05l.24.14.27.13.28.1.29.07L32,64h1.27l.29-.07.29-.1.27-.13.24-.14.24-.17L35,63,48.8,49.18A3.43,3.43,0,0,0,44,44.34l-8,8v-17H61.7a3.42,3.42,0,0,0,3.42-3.42h0C65.12,14.33,50.51,0,32.56,0ZM7.09,28.51A25.54,25.54,0,0,1,32.56,6.85,25.55,25.55,0,0,1,58,28.51Z" fill="url(#linear-gradient-2)"/>
<path d="M36,7.08A25.45,25.45,0,0,1,58,28.51H42.85A6.85,6.85,0,0,0,36,35.36H61.7a3.43,3.43,0,0,0,3.42-3.43c0-12.2-8.63-18.13-16-21.59A35.75,35.75,0,0,0,36,7.08Z" fill="url(#linear-gradient-3)"/>
<path d="M57.89,27.76c2.31,1.86,4.63,3.71,6.9,5.61a3.27,3.27,0,0,0,.33-1.44c0-12.2-8.63-18.13-16-21.59A35.75,35.75,0,0,0,36,7.08,25.47,25.47,0,0,1,57.89,27.76Z" fill="url(#linear-gradient-4)"/>
<path d="M57.5,28.51H42.85A6.85,6.85,0,0,0,36,35.36H61.7a3.36,3.36,0,0,0,2.64-1.28C62.09,32.19,59.79,30.36,57.5,28.51Z" opacity=".9" fill="url(#linear-gradient-5)"/>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 8.1 KiB

View File

@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="8px" height="6px" viewBox="0 0 8 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="8px" height="6px" viewBox="0 0 8 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
<title>37845F0A-2932-4C2D-98E1-89BE1B168092</title>
<desc>Created with sketchtool.</desc>
<defs> <defs>
<path d="M6,8.48771202 C5.73480519,8.48765538 5.48049273,8.3822614 5.293,8.19471202 L2.293,5.19471202 C1.91402779,4.80233313 1.91944763,4.17862724 2.30518142,3.79289345 C2.69091522,3.40715965 3.31462111,3.40173981 3.707,3.78071202 L6,6.07371202 L8.293,3.78071202 C8.68537889,3.40173981 9.30908478,3.40715965 9.69481858,3.79289345 C10.0805524,4.17862724 10.0859722,4.80233313 9.707,5.19471202 L6.707,8.19471202 C6.51950727,8.3822614 6.26519481,8.48765538 6,8.48771202 Z" id="path-1"></path> <path d="M6,8.48771202 C5.73480519,8.48765538 5.48049273,8.3822614 5.293,8.19471202 L2.293,5.19471202 C1.91402779,4.80233313 1.91944763,4.17862724 2.30518142,3.79289345 C2.69091522,3.40715965 3.31462111,3.40173981 3.707,3.78071202 L6,6.07371202 L8.293,3.78071202 C8.68537889,3.40173981 9.30908478,3.40715965 9.69481858,3.79289345 C10.0805524,4.17862724 10.0859722,4.80233313 9.707,5.19471202 L6.707,8.19471202 C6.51950727,8.3822614 6.26519481,8.48765538 6,8.48771202 Z" id="path-1"></path>
</defs> </defs>
@ -14,7 +11,7 @@
<mask id="mask-2" fill="white"> <mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use> <use xlink:href="#path-1"></use>
</mask> </mask>
<use id="Shape" fill="#0C0C0D" fill-rule="nonzero" opacity="0.599283854" xlink:href="#path-1"></use> <use id="Shape" fill="#b1b1b3" fill-rule="nonzero" opacity="0.599283854" xlink:href="#path-1"></use>
</g> </g>
</g> </g>
</g> </g>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -1,4 +1,5 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public <!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this - License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 9a3 3 0 1 0-2.977-2.63l-6.94 3.47a3 3 0 1 0 0 4.319l6.94 3.47a3 3 0 1 0 .895-1.789l-6.94-3.47a3.03 3.03 0 0 0 0-.74l6.94-3.47C16.456 8.68 17.19 9 18 9z" fill="#0060df" fill-opacity=".8"></path></svg> <svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 9a3 3 0 1 0-2.977-2.63l-6.94 3.47a3 3 0 1 0 0 4.319l6.94 3.47a3 3 0 1 0 .895-1.789l-6.94-3.47a3.03 3.03 0 0 0 0-.74l6.94-3.47C16.456 8.68 17.19 9 18 9z" fill="currentColor"></path></symbol></svg>

Before

Width:  |  Height:  |  Size: 559 B

After

Width:  |  Height:  |  Size: 539 B

6
assets/wordmark.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="logo" viewBox="66 0 340 64">
<path d="M84,48h5.83V35.87H103.3V30.45H89.83V23.51H103.3V18H84Zm23.57,0h5.79V25.81h-5.79Zm2.88-32.12a3.46,3.46,0,0,0-2.59,1,3.62,3.62,0,0,0-1,2.65,3.57,3.57,0,0,0,1,2.59,3.52,3.52,0,0,0,2.61,1,3.46,3.46,0,0,0,3.65-3.26c0-.12,0-.23,0-.35a3.71,3.71,0,0,0-1-2.65,3.5,3.5,0,0,0-2.67-1Zm19.14,9.53a7.22,7.22,0,0,0-3.72.93,5.82,5.82,0,0,0-2.4,2.89V25.81h-5.59V48h5.63V36.29a5.27,5.27,0,0,1,1.31-4,4.94,4.94,0,0,1,3.49-1.21,6.33,6.33,0,0,1,1.73.23,4,4,0,0,1,1.23.55l2-5.59a7.51,7.51,0,0,0-1.66-.61,8.11,8.11,0,0,0-2-.26Zm23.94,3.19a11.15,11.15,0,0,0-3.61-2.37,12.08,12.08,0,0,0-4.6-.86,11.62,11.62,0,0,0-8.3,3.37,11.17,11.17,0,0,0-2.44,3.67,11.59,11.59,0,0,0-.89,4.54,12.24,12.24,0,0,0,.83,4.52,10.52,10.52,0,0,0,2.36,3.66,10.93,10.93,0,0,0,3.71,2.44,12.75,12.75,0,0,0,4.85.88,12.15,12.15,0,0,0,6.12-1.39,13.25,13.25,0,0,0,4.11-3.74L151,40.6a6.23,6.23,0,0,1-2.18,2.15,6.36,6.36,0,0,1-3.33.8,6.7,6.7,0,0,1-4.13-1.25,6,6,0,0,1-2.23-3.43h17.62V36.74a11.71,11.71,0,0,0-.87-4.56,10.5,10.5,0,0,0-2.35-3.59Zm-14.21,5.85a6.38,6.38,0,0,1,2.26-3.12,6.11,6.11,0,0,1,3.74-1.15,6.26,6.26,0,0,1,3.73,1.08,5.56,5.56,0,0,1,2.1,3.19ZM167,16.08a6.05,6.05,0,0,0-2.91,1.54,6.15,6.15,0,0,0-1.56,2.89,18.1,18.1,0,0,0-.48,4.52v.78H158.4v5.1h3.65V48h5.63V30.91H173v-5.1h-5.3V24.75a13.34,13.34,0,0,1,.12-2,2,2,0,0,1,.6-1.19,2.45,2.45,0,0,1,1.33-.57,15.25,15.25,0,0,1,2.34-.15H173V15.63h-1.48A19.06,19.06,0,0,0,167,16.08Zm27.4,12.65a12,12,0,0,0-16.72,0,10.87,10.87,0,0,0-2.46,3.67,11.61,11.61,0,0,0-.89,4.5,11.46,11.46,0,0,0,7.07,10.64,11.73,11.73,0,0,0,4.64.9,12,12,0,0,0,4.66-.9,11.26,11.26,0,0,0,3.72-2.49,11.83,11.83,0,0,0,2.46-3.67,11.31,11.31,0,0,0,.9-4.48A11.43,11.43,0,0,0,194.4,28.73ZM191.7,39.3a5.88,5.88,0,0,1-1.29,2,6.53,6.53,0,0,1-1.93,1.31,6,6,0,0,1-4.76,0,6.34,6.34,0,0,1-1.93-1.31,6.06,6.06,0,0,1-1.3-2,6.48,6.48,0,0,1,0-4.86,5.76,5.76,0,0,1,1.3-2,6.08,6.08,0,0,1,1.93-1.32,6,6,0,0,1,4.76,0,6.37,6.37,0,0,1,1.93,1.32,5.73,5.73,0,0,1,1.29,2A6.39,6.39,0,0,1,191.7,39.3Zm29.47-13.49h-6.65l-4.68,6.57-4.64-6.57h-6.74l7.84,10.8L198,48h6.82l5-6.94L214.89,48h6.86l-8.46-11.34Zm34,7.46a12.88,12.88,0,0,0-3.37-1.44c-1.25-.34-2.46-.63-3.63-.88l-3.08-.7a10.64,10.64,0,0,1-2.51-.86A4.54,4.54,0,0,1,240.87,28a3.61,3.61,0,0,1-.62-2.19,4.8,4.8,0,0,1,1.58-3.7c1.06-1,2.73-1.44,5-1.44a9.84,9.84,0,0,1,5.07,1.17,10.47,10.47,0,0,1,3.39,3.23l2.79-2.18A15.22,15.22,0,0,0,253.45,19a13.8,13.8,0,0,0-6.59-1.44,12.13,12.13,0,0,0-4.14.66A10.33,10.33,0,0,0,239.53,20a7.53,7.53,0,0,0-2.05,2.63,7.41,7.41,0,0,0-.72,3.24,6.7,6.7,0,0,0,.84,3.53,7.06,7.06,0,0,0,2.2,2.22A11.11,11.11,0,0,0,242.86,33c1.13.32,2.29.6,3.47.84l3.26.74a12.63,12.63,0,0,1,2.8,1,5.86,5.86,0,0,1,2,1.56,3.88,3.88,0,0,1,.74,2.42,5.2,5.2,0,0,1-1.81,4.09A7.83,7.83,0,0,1,248,45.2a11,11,0,0,1-9.89-5.38l-3,2.34a15.86,15.86,0,0,0,5.23,4.54,16.06,16.06,0,0,0,7.7,1.7,12.58,12.58,0,0,0,4.38-.72,10.14,10.14,0,0,0,3.3-2,8.79,8.79,0,0,0,2.1-2.85,8.09,8.09,0,0,0,.74-3.39,6.94,6.94,0,0,0-1-3.8,7.71,7.71,0,0,0-2.42-2.37Zm27.51-4.72a10.53,10.53,0,0,0-3.58-2.34,11.89,11.89,0,0,0-4.49-.84,11.6,11.6,0,0,0-4.62.9,11.35,11.35,0,0,0-3.66,2.46A11.84,11.84,0,0,0,263,37a12.21,12.21,0,0,0,.82,4.51,10.53,10.53,0,0,0,2.36,3.64,11.24,11.24,0,0,0,3.7,2.42,12.41,12.41,0,0,0,4.82.88A11.68,11.68,0,0,0,280.82,47,12.84,12.84,0,0,0,285,42.82l-2.88-1.69a7.85,7.85,0,0,1-7.43,4.27,9,9,0,0,1-3.22-.53,8.21,8.21,0,0,1-2.55-1.5,8,8,0,0,1-1.78-2.28,7.79,7.79,0,0,1-.87-2.91h19.59V36.66a11.75,11.75,0,0,0-.86-4.54,10.92,10.92,0,0,0-2.35-3.57ZM266.4,35.22a8.88,8.88,0,0,1,1-2.73,8.55,8.55,0,0,1,1.79-2.18,8,8,0,0,1,2.44-1.43,8.31,8.31,0,0,1,3-.52,7.45,7.45,0,0,1,7.84,6.86ZM308.82,28a8.11,8.11,0,0,0-3-2,10.89,10.89,0,0,0-3.92-.67,9.06,9.06,0,0,0-4.58,1.14,8.76,8.76,0,0,0-3.14,3V25.82h-3.29V48h3.37V35.67a7.92,7.92,0,0,1,.53-2.93,7,7,0,0,1,1.48-2.3,6.46,6.46,0,0,1,2.22-1.5,7,7,0,0,1,2.75-.54,6.33,6.33,0,0,1,5,1.93A7.46,7.46,0,0,1,308,35.51V48h3.41V35.34a12.46,12.46,0,0,0-.66-4.19A8.68,8.68,0,0,0,308.82,28Zm27-12.42v14.1a8.14,8.14,0,0,0-1.58-1.83,10.08,10.08,0,0,0-2-1.36,10.39,10.39,0,0,0-2.3-.84,10.22,10.22,0,0,0-2.4-.28,11.63,11.63,0,0,0-4.4.84,11.09,11.09,0,0,0-3.59,2.38,11.3,11.3,0,0,0-2.42,3.65,12.81,12.81,0,0,0,0,9.32,11.56,11.56,0,0,0,2.4,3.66,10.58,10.58,0,0,0,3.59,2.38,11.77,11.77,0,0,0,4.42.84,9.69,9.69,0,0,0,2.4-.31,11,11,0,0,0,2.3-.86,9.72,9.72,0,0,0,2-1.37,8.75,8.75,0,0,0,1.58-1.85v4h3.33V15.59Zm-.37,24.58a8.3,8.3,0,0,1-10.85,4.47h0a7.68,7.68,0,0,1-2.6-1.76,7.88,7.88,0,0,1-1.73-2.67,8.93,8.93,0,0,1-.62-3.35,8.67,8.67,0,0,1,.62-3.3A8,8,0,0,1,322,30.89a8.17,8.17,0,0,1,2.6-1.79,8.27,8.27,0,0,1,6.51,0,8.64,8.64,0,0,1,2.63,1.81,7.85,7.85,0,0,1,1.72,2.67,8.67,8.67,0,0,1,.62,3.26,8.86,8.86,0,0,1-.65,3.33Z" fill="currentColor"/>
</symbol>
<use xlink:href="#logo"/>
</svg>

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@ -1,89 +1,103 @@
const colors = { const colors = {
transparent: 'transparent', transparent: 'transparent',
black: '#22292f', black: '#000000',
'grey-darkest': '#4a4a4f', 'grey-90': '#0c0c0d',
'grey-darker': '#606f7b', 'grey-80': '#2a2a2e',
'grey-dark': '#8795a1', 'grey-70': '#38383d',
grey: '#B1B1B3', 'grey-60': '#4a4a4f',
'grey-light': '#dae1e7', 'grey-50': '#737373',
grey: '#b1b1b3',
'grey-40': '#b1b1b3',
'grey-30': '#d7d7db',
'grey-banner': '#f0f0f4', 'grey-banner': '#f0f0f4',
'grey-transparent': 'hsla(250, 13%, 9%, .2)', 'grey-transparent': 'hsla(250, 13%, 9%, .2)',
'grey-lighter': '#f1f5f8', 'grey-20': '#ededf0',
'grey-lightest': '#F9F9FA', 'grey-10': '#f9f9fa',
white: '#ffffff', white: '#ffffff',
'red-darkest': '#3b0d0c', 'red-90': '#3e0200',
'red-darker': '#621b18', 'red-80': '#5a0002',
'red-dark': '#cc1f1a', 'red-70': '#a4000f',
red: '#e3342f', 'red-60': '#d70022',
'red-light': '#ef5753', red: '#d70022',
'red-lighter': '#f9acaa', 'red-50': '#ff0039',
'red-lightest': '#fcebea', // unspec
'red-40': '#ff3363',
'red-30': '#ff99aa',
'orange-darkest': '#462a16', 'orange-90': '#3e1300',
'orange-darker': '#613b1f', 'orange-80': '#712b00',
'orange-dark': '#de751f', 'orange-70': '#a44900',
orange: '#f6993f', 'orange-60': '#d76e00',
'orange-light': '#faad63', 'orange-50': '#ff9400',
'orange-lighter': '#fcd9b6', // unspec
'orange-lightest': '#fff5eb', 'orange-40': '#ffb24c',
'orange-30': '#ffd399',
'yellow-darkest': '#453411', 'yellow-90': '#3e2800',
'yellow-darker': '#684f1d', 'yellow-80': '#715100',
'yellow-dark': '#f2d024', 'yellow-70': '#a47f00',
yellow: '#ffed4a', 'yellow-60': '#d7b600',
'yellow-light': '#fff382', yellow: '#d7b600',
'yellow-lighter': '#fff9c2', 'yellow-50': '#ffe900',
'yellow-lightest': '#fcfbeb', 'yellow-40': '#ffed4c',
'yellow-30': '#fff599',
'green-darkest': '#003706', // 'green-darkest': '#003706',
'green-darker': '#006504', // 'green-darker': '#006504',
'green-dark': '#058b00', // 'green-dark': '#058b00',
green: '#12bc00', // green: '#12bc00',
'green-light': '#51d88a', // 'green-light': '#51d88a',
'green-lighter': '#a2f5bf', // 'green-lighter': '#a2f5bf',
'green-lightest': '#e3fcec', // 'green-lightest': '#e3fcec',
'teal-darkest': '#0d3331', // 'teal-darkest': '#0d3331',
'teal-darker': '#20504f', // 'teal-darker': '#20504f',
'teal-dark': '#38a89d', // 'teal-dark': '#38a89d',
teal: '#4dc0b5', // teal: '#4dc0b5',
'teal-light': '#64d5ca', // 'teal-light': '#64d5ca',
'teal-lighter': '#a0f0ed', // 'teal-lighter': '#a0f0ed',
'teal-lightest': '#e8fffe', // 'teal-lightest': '#e8fffe',
'blue-darkest': '#002275', 'blue-90': '#000f40',
'blue-darker': '#003eaa', 'blue-80': '#002275',
'blue-dark': '#0060df', 'blue-70': '#003eaa',
'blue-60': '#0060df',
'blue-50': '#0a84ff',
blue: '#0a84ff', blue: '#0a84ff',
'blue-light': '#6cb2eb', 'blue-40': '#45a1ff',
'blue-lighter': '#bcdefa', 'blue-30': '#99ccff',
'blue-lightest': '#eff8ff', 'blue-20': '#cce6ff',
'indigo-darkest': '#191e38', 'ink-90': '#0f1126',
'indigo-darker': '#2f365f', 'ink-80': '#202340',
'indigo-dark': '#5661b3', 'ink-70': '#363959',
indigo: '#6574cd',
'indigo-light': '#7886d7',
'indigo-lighter': '#b2b7ff',
'indigo-lightest': '#e6e8ff',
'purple-darkest': '#21183c', // 'indigo-darkest': '#191e38',
'purple-darker': '#382b5f', // 'indigo-darker': '#2f365f',
'purple-dark': '#794acf', // 'indigo-dark': '#5661b3',
purple: '#9561e2', // indigo: '#6574cd',
'purple-light': '#a779e9', // 'indigo-light': '#7886d7',
'purple-lighter': '#d6bbfc', // 'indigo-lighter': '#b2b7ff',
'purple-lightest': '#f3ebff', // 'indigo-lightest': '#e6e8ff',
'pink-darkest': '#451225', 'purple-90': '#25003e',
'pink-darker': '#6f213f', 'purple-80': '#440071',
'pink-dark': '#eb5286', 'purple-70': '#6200a4',
pink: '#f66d9b', 'purple-60': '#8000d7',
'pink-light': '#fa7ea8', 'purple-50': '#9400ff',
'pink-lighter': '#ffbbca', 'purple-40': '#ad3bff',
'pink-lightest': '#ffebef', 'purple-30': '#c069ff',
'purple-20': '#d7a3ff',
// '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)', cloud: 'rgba(255, 255, 255, 0.8)',
violet: 'hsl(258, 57%, 35%)' violet: 'hsl(258, 57%, 35%)'
}; };
@ -95,7 +109,8 @@ module.exports = {
sm: '576px', sm: '576px',
md: '768px', md: '768px',
lg: '992px', lg: '992px',
xl: '1200px' xl: '1200px',
dark: { raw: '(prefers-color-scheme: dark)' }
}, },
fontFamily: { fontFamily: {
sans: [ sans: [
@ -181,10 +196,7 @@ module.exports = {
'4': '4px', '4': '4px',
'8': '8px' '8': '8px'
}, },
borderColor: global.Object.assign( borderColor: global.Object.assign({ default: colors['grey-30'] }, colors),
{ default: colors['grey-light'] },
colors
),
borderRadius: { borderRadius: {
none: '0', none: '0',
sm: '.125rem', sm: '.125rem',

View File

@ -142,6 +142,7 @@ const web = {
loader: 'svgo-loader', loader: 'svgo-loader',
options: { options: {
plugins: [ plugins: [
{ cleanupIDs: false },
{ removeViewBox: false }, // true causes stretched images { removeViewBox: false }, // true causes stretched images
{ convertStyleToAttrs: true }, // for CSP, no unsafe-eval { convertStyleToAttrs: true }, // for CSP, no unsafe-eval
{ removeTitle: true } // for smallness { removeTitle: true } // for smallness