remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat/migrate to daisy (#10)

Browse Source 
* feat: init daisyui!

* feat: change theme and colors

* change dark theme and add colors
This commit is contained in:
Julien Calixte
2024-12-21 20:05:37 +01:00
committed by GitHub
parent c8e066e6f6
commit 9571752f26
23 changed files with 801 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="autumn">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />

4
package.json
View File

@@ -47,6 +47,7 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.26.0", "@babel/core": "^7.26.0",
"@rushstack/eslint-patch": "^1.10.4", "@rushstack/eslint-patch": "^1.10.4",
"@tailwindcss/typography": "^0.5.15",
"@types/fontfaceobserver": "^2.1.3", "@types/fontfaceobserver": "^2.1.3",
"@types/markdown-it": "^13.0.9", "@types/markdown-it": "^13.0.9",
"@types/node": "^20.17.8", "@types/node": "^20.17.8",
@@ -58,6 +59,8 @@
"@vue/compiler-sfc": "^3.5.13", "@vue/compiler-sfc": "^3.5.13",
"@vue/eslint-config-prettier": "^8.0.0", "@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0", "@vue/eslint-config-typescript": "^12.0.0",
"autoprefixer": "^10.4.20",
"daisyui": "^4.12.22",
"eslint": "^8.57.1", "eslint": "^8.57.1",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier-vue": "^5.0.0", "eslint-plugin-prettier-vue": "^5.0.0",
@@ -66,6 +69,7 @@
"eslint-plugin-vue": "^9.31.0", "eslint-plugin-vue": "^9.31.0",
"prettier": "^3.4.1", "prettier": "^3.4.1",
"sass": "^1.81.0", "sass": "^1.81.0",
"tailwindcss": "^3.4.17",
"typescript": "~5.7.2", "typescript": "~5.7.2",
"vite": "^6.0.0", "vite": "^6.0.0",
"vite-plugin-pwa": "^0.21.0", "vite-plugin-pwa": "^0.21.0",

590
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

3
postcss.config.js Normal file
View File

@@ -0,0 +1,3 @@
module.exports = {
plugins: [require('tailwindcss'), require('autoprefixer')]
}

2
public/assets/saved.svg
View File

@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-floppy" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-floppy fill-current" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" /> <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
<circle cx="12" cy="14" r="2" /> <circle cx="12" cy="14" r="2" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 456 B

After

Width:  |  Height:  |  Size: 469 B

5
src/App.vue
View File

@@ -6,15 +6,14 @@ const { isReady } = useGitHubLogin()
</script> </script>
<template> <template>
<div id="main-app"> <div id="main-app" class="prose">
<router-view v-if="isReady" /> <router-view v-if="isReady" />
<new-version /> <new-version />
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
@import 'styles/app';
#main-app { #main-app {
height: 100vh; height: 100vh;
display: flex; display: flex;

25
src/components/FluxNote.vue
View File

@@ -100,16 +100,14 @@ const focusREADME = () => scrollToTop()
</div> </div>
<div class="repo-title"> <div class="repo-title">
<div class="repo-header"> <div class="repo-header">
<h1 class="title is-1"> <h1 class="heading-1">
<router-link :to="{ name: 'FluxNoteView', params: { user, repo } }"> <router-link :to="{ name: 'FluxNoteView', params: { user, repo } }">
{{ repo }} {{ repo }}
</router-link> </router-link>
| <em class="user">{{ user }}</em>
</h1> </h1>
<cache-all-notes /> <cache-all-notes />
</div> </div>
<h2 class="subtitle is-5">
<em>{{ user }}</em>
</h2>
</div> </div>
<slot /> <slot />
<lite-loading v-if="isLoading" /> <lite-loading v-if="isLoading" />
@@ -149,22 +147,23 @@ $header-height: 40px;
h5, h5,
h6, h6,
strong { strong {
color: var(--font-color); color: var(--fallback-bc, oklch(var(--bc) / 1));
} }
table { table {
color: var(--font-color); color: var(--fallback-bc, oklch(var(--bc) / 1));
background-color: var(--background-color); background-color: var(--fallback-b1, oklch(var(--b1) / 1));
thead { thead {
th { th {
color: var(--font-color); color: var(--fallback-bc, oklch(var(--bc) / 1));
} }
} }
} }
blockquote { blockquote {
background-color: var(--background-color); background-color: var(--fallback-b1, oklch(var(--b1) / 1));
color: var(--fallback-bc, oklch(var(--bc) / 1));
} }
} }
@@ -176,7 +175,7 @@ $header-height: 40px;
position: sticky; position: sticky;
left: 0; left: 0;
top: 0; top: 0;
padding: 0 2rem 1rem; padding: 0 2rem;
.repo-title { .repo-title {
margin-top: 1rem; margin-top: 1rem;
@@ -186,6 +185,10 @@ $header-height: 40px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
.user {
font-size: 1.5rem;
}
} }
.title { .title {
@@ -231,7 +234,7 @@ $header-height: 40px;
font-size: 0.8em; font-size: 0.8em;
a { a {
color: var(--font-color); color: var(--fallback-bc, oklch(var(--bc) / 1));
display: block; display: block;
text-align: center; text-align: center;
} }

13
src/components/HeaderNote.vue
View File

@@ -1,5 +1,6 @@
<template> <template>
<header class="header-note"> <header class="header-note">
<ThemeSwap />
<router-link <router-link
:to="{ name: 'Home' }" :to="{ name: 'Home' }"
class="button is-small is-white back-button" class="button is-small is-white back-button"
@@ -27,16 +28,10 @@
</header> </header>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue' import ThemeSwap from '@/components/ThemeSwap.vue'
export default defineComponent({ defineProps<{ user: string; repo: string }>()
name: 'HeaderNote',
props: {
user: { type: String, required: true },
repo: { type: String, required: true }
}
})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

3
src/components/LinkedNotes.vue
View File

@@ -35,7 +35,8 @@ const emitNote = (sha: string) => {
<style scoped lang="scss"> <style scoped lang="scss">
.linked-notes { .linked-notes {
padding: 1rem; padding: 1rem;
background-color: var(--light-link); background-color: var(--fallback-b1, oklch(var(--b1) / 1));
color: var(--fallback-bc, oklch(var(--bc) / 1));
.subtitle { .subtitle {
font-style: italic; font-style: italic;

25
src/components/LiteLoading.vue
View File

@@ -1,25 +1,6 @@
<script setup lang="ts">
import { withDefaults } from 'vue'
withDefaults(
defineProps<{
light?: boolean
}>(),
{
light: false
}
)
</script>
<template> <template>
<div class="lite-loading"> <div class="lite-loading">
<img <span class="loading loading-spinner"></span>
v-if="light"
class="is-loading"
src="/assets/loading-white.svg"
alt="loading..."
/>
<img v-else class="is-loading" src="/assets/loading.svg" alt="loading..." />
</div> </div>
</template> </template>
@@ -29,9 +10,5 @@ withDefaults(
flex: 1; flex: 1;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.is-loading {
animation: spinAround 0.8s infinite linear;
}
} }
</style> </style>

7
src/components/LoginGithub.vue
View File

@@ -1,7 +1,12 @@
<template> <template>
<div class="login-github"> <div class="login-github">
<br /> <br />
<a :href="url.toString()" target="_blank" rel="noopener noreferrer"> <a
class="btn btn-primary"
:href="url.toString()"
target="_blank"
rel="noopener noreferrer"
>
login to login to
<img src="/assets/github.svg" alt="GitHub icon" /> <img src="/assets/github.svg" alt="GitHub icon" />
</a> </a>

5
src/components/NewVersion.vue
View File

@@ -34,7 +34,7 @@ const reload = () => {
</div> </div>
<div class="buttons"> <div class="buttons">
<button v-if="needRefresh" class="button is-primary" @click="reload"> <button v-if="needRefresh" class="button is-primary" @click="reload">
<LiteLoading v-if="isLoading" light /> <LiteLoading v-if="isLoading" />
<span v-else>Reload</span> <span v-else>Reload</span>
</button> </button>
<button class="button" @click="close">Close</button> <button class="button" @click="close">Close</button>
@@ -53,7 +53,8 @@ const reload = () => {
color: var(--primary-color); color: var(--primary-color);
border: var(--primary-color) 2px solid; border: var(--primary-color) 2px solid;
border-radius: 4px; border-radius: 4px;
background-color: var(--background-color); background-color: var(--fallback-b1, oklch(var(--b1) / 1));
color: var(--fallback-bc, oklch(var(--bc) / 1));
} }
button { button {

2
src/components/RepoList.vue
View File

@@ -26,7 +26,7 @@ const getStyle = (repo: string) => {
repo: favoriteRepo.name repo: favoriteRepo.name
} }
}" }"
class="button" class="btn"
:style="getStyle(`${favoriteRepo.name}-${username}`)" :style="getStyle(`${favoriteRepo.name}-${username}`)"
> >
{{ favoriteRepo.name }} {{ favoriteRepo.name }}

18
src/components/SignInGithub.vue
View File

@@ -14,20 +14,8 @@ const href = url.toString()
</script> </script>
<template> <template>
<a :href="href" class="sign-in-github button is-primary"> <a :href="href" class="sign-in-github btn btn-primary">
<span> Sign in with
Sign in with <img src="/assets/github.svg" alt="GitHub" />
<img src="/assets/github.svg" alt="GitHub" />
</span>
</a> </a>
</template> </template>
<style scoped lang="scss">
.sign-in-github {
span {
display: flex;
align-items: flex-end;
gap: 0.5rem;
}
}
</style>

8
src/components/StackedNote.vue
View File

@@ -174,7 +174,8 @@ $border-color: rgba(18, 19, 58, 0.2);
.stacked-note { .stacked-note {
padding: 0 1.5rem 1rem; padding: 0 1.5rem 1rem;
background-color: var(--background-color); background-color: var(--fallback-b1, oklch(var(--b1) / 1));
color: var(--fallback-bc, oklch(var(--bc) / 1));
transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s; transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
@@ -194,14 +195,15 @@ $border-color: rgba(18, 19, 58, 0.2);
} }
.title-stacked-note { .title-stacked-note {
background-color: var(--background-color); background-color: var(--fallback-b1, oklch(var(--b1) / 1));
color: var(--fallback-bc, oklch(var(--bc) / 1));
position: sticky; position: sticky;
top: 0; top: 0;
font-size: 0.8em; font-size: 0.8em;
a { a {
color: var(--font-color); color: var(--fallback-bc, oklch(var(--bc) / 1));
display: block; display: block;
} }
} }

62
src/components/ThemeSwap.vue Normal file
View File

@@ -0,0 +1,62 @@
<script setup lang="ts">
import { ref } from 'vue'
const isDark = ref(JSON.parse(localStorage.getItem('is-dark') ?? 'false'))
const toggle = (isChecked: boolean) => {
localStorage.setItem('is-dark', isChecked ? 'true' : 'false')
}
</script>
<template>
<div class="theme-swap">
<label class="grid cursor-pointer place-items-center">
<input
type="checkbox"
value="forest"
class="toggle theme-controller bg-base-content col-span-2 col-start-1 row-start-1"
:checked="isDark"
@click="
(e) => {
toggle((e.target as any)?.checked ?? false)
}
"
/>
<svg
class="stroke-base-100 fill-base-100 col-start-1 row-start-1"
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="5" />
<path
d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
/>
</svg>
<svg
class="stroke-base-100 fill-base-100 col-start-2 row-start-1"
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</label>
</div>
</template>
<style scoped lang="scss">
.theme-swap {
}
</style>

112
src/components/WelcomeWorld.vue
View File

@@ -7,58 +7,36 @@
<last-visited /> <last-visited />
<div class="get-started"> <div class="get-started">
<div class="buttons is-centered"> <sign-in-github />
<sign-in-github /> <router-link
<router-link :to="{
:to="{ name: 'FluxNoteView',
name: 'FluxNoteView', params: { user: 'lite-note', repo: 'getting-started' }
params: { user: 'lite-note', repo: 'getting-started' } }"
}" class="btn"
class="button" >Get started</router-link
>Get started</router-link >
> <router-link v-if="isLogged" :to="{ name: 'RepoList' }" class="btn"
<router-link v-if="isLogged" :to="{ name: 'RepoList' }" class="button" >Manage your repos</router-link
>Manage your repos</router-link >
>
</div>
</div> </div>
<form @submit.prevent> <form class="github-form" @submit.prevent>
<div class="columns is-centered is-vcentered to-user-repo"> <div>github.com/</div>
<div class="column">https://github.com/</div> <input
<div class="columns column is-mobile is-centered is-vcentered"> v-model="userInput"
<div class="column"> class="input input-ghost"
<div class="field"> type="text"
<div class="control"> placeholder="user"
<input />
v-model="userInput" /
class="input" <input
type="text" v-model="repoInput"
placeholder="user" class="input input-ghost"
/> type="text"
</div> placeholder="repo"
</div> />
</div> <button type="submit" class="btn btn-primary" @click="submit">go</button>
/
<div class="column">
<div class="field">
<div class="control">
<input
v-model="repoInput"
class="input"
type="text"
placeholder="repo"
/>
</div>
</div>
</div>
<div class="column is-2">
<button type="submit" class="button is-primary" @click="submit">
go
</button>
</div>
</div>
</div>
</form> </form>
<footer> <footer>
@@ -69,28 +47,21 @@
rel="noopener noreferrer" rel="noopener noreferrer"
>Julien</a >Julien</a
> >
<theme-swap />
</footer> </footer>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'
import RepoList from '@/components/RepoList.vue' import RepoList from '@/components/RepoList.vue'
import SignInGithub from '@/components/SignInGithub.vue' import SignInGithub from '@/components/SignInGithub.vue'
import ThemeSwap from '@/components/ThemeSwap.vue'
import { useForm } from '@/hooks/useForm.hook' import { useForm } from '@/hooks/useForm.hook'
import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook' import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
import LastVisited from '@/modules/history/components/LastVisited.vue' import LastVisited from '@/modules/history/components/LastVisited.vue'
export default defineComponent({ const { isLogged } = useGitHubLogin()
name: 'WelcomeWorld', const { userInput, repoInput, submit } = useForm()
components: { SignInGithub, LastVisited, RepoList },
setup() {
const { isLogged, username } = useGitHubLogin()
return { ...useForm(), isLogged, username }
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -105,16 +76,31 @@ export default defineComponent({
.get-started { .get-started {
margin: center; margin: center;
text-align: center; text-align: center;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
} }
.title { .title {
text-align: center; text-align: center;
} }
} }
.github-form {
display: flex;
align-items: center;
gap: 0.5rem;
input {
max-width: 140px;
}
}
footer { footer {
display: flex;
gap: 1rem;
img { img {
vertical-align: middle; vertical-align: middle;
margin-top: 0;
} }
} }

1
src/main.ts
View File

@@ -1,3 +1,4 @@
import './styles/app.css'
import 'markdown-it-latex/dist/index.css' import 'markdown-it-latex/dist/index.css'
import 'notyf/notyf.min.css' import 'notyf/notyf.min.css'

4
src/modules/card/components/FlipCard.vue
View File

@@ -61,7 +61,7 @@ $border-radius: 0.5rem;
.flip-card-inner { .flip-card-inner {
flex: 1; flex: 1;
position: relative; position: relative;
transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.4s; transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
transform-style: preserve-3d; transform-style: preserve-3d;
border-radius: $border-radius; border-radius: $border-radius;
} }
@@ -79,7 +79,7 @@ $border-radius: 0.5rem;
.flip-card-content { .flip-card-content {
width: 100%; width: 100%;
background-color: #ede4e0; background-color: #ede4e0;
color: var(--font-color); color: var(--fallback-bc, oklch(var(--bc) / 1));
padding: 1rem; padding: 1rem;
border-radius: $border-radius; border-radius: $border-radius;
} }

41
src/styles/app.scss → src/styles/app.css
View File

@@ -1,23 +1,20 @@
@charset "utf-8"; @charset "utf-8";
@import url("https://fonts.googleapis.com/css2?display=swap&family=Courier+Prime"); @import url("https://fonts.googleapis.com/css2?display=swap&family=Courier+Prime");
$primary: #2c3a47; @tailwind base;
$link: #445fb9; @tailwind components;
$light-link: lighten($link, 45%); @tailwind utilities;
$family-primary: "Courier Prime", monospace;
$background: #ffffff;
:root { :root {
--primary-color: #{$primary}; --primary-color: #2c3a47;
--font-family: #{$family-primary}; --font-family: "Courier Prime", monospace;
--font-color: #4a4a4a; --font-color: #4a4a4a;
--light-link: #{$light-link}; --link: #445fb9;
--background-color: #{$background}; --light-link: lighten(#445fb9, 45%);
--background-color: #ffffff;
--note-width: 620px; --note-width: 620px;
} }
@import "../../node_modules/bulma/bulma.sass";
html { html {
overflow-y: auto; overflow-y: auto;
overflow-x: auto; overflow-x: auto;
@@ -27,7 +24,6 @@ body {
height: 100vh; height: 100vh;
scroll-behavior: smooth; scroll-behavior: smooth;
overflow-y: auto; overflow-y: auto;
font-size: 1.2em;
} }
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
@@ -54,37 +50,34 @@ body {
} }
a { a {
&:hover {
color: darken($link, 20);
}
&.external-link { &.external-link {
text-decoration: underline; text-decoration: underline;
&::after { &::after {
margin-left: 0.2rem; margin-left: 0.4rem;
vertical-align: text-top;
content: url("/assets/external-link.svg"); content: url("/assets/external-link.svg");
} }
} }
} }
.notif-success { .notif-success {
background-color: $link; background-color: var(--link);
} }
.repo-note { .repo-note {
font-family: var(--font-family); font-family: var(--font-family);
color: var(--font-color);
background-color: var(--background-color);
transition-property: color, background-color; transition-property: color, background-color;
transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
} }
.table-wrapper { .table-wrapper {
overflow-x: auto; overflow-x: auto;
} }
.btn {
font-size: 1rem;
}
@media print { @media print {
html, html,
@@ -104,10 +97,6 @@ pre {
} }
} }
code {
font-family: var(--font-family);
}
.markdown-alert { .markdown-alert {
padding: 1rem; padding: 1rem;
background-color: #ecf0f1; background-color: #ecf0f1;

12
src/views/FleetingNotes.vue
View File

@@ -69,18 +69,18 @@ watch(mode, async (newMode) => {
:content="content" :content="content"
> >
<h3 class="subtitle is-3">Inbox</h3> <h3 class="subtitle is-3">Inbox</h3>
<div v-if="!hasTodayNote" class="columns is-centered"> <div v-if="!hasTodayNote" class="columns">
<div class="column is-half is-centered"> <div class="column">
<button class="button is-primary is-light" @click="toggleMode"> <button class="btn btn-primary" @click="toggleMode">
new fleeting note new fleeting note
</button> </button>
</div> </div>
</div> </div>
<div v-if="mode === 'edit'"> <div v-if="mode === 'edit'">
<edit-note v-model="newContent" /> <edit-note v-model="newContent" />
<div class="columns is-centered"> <div class="columns">
<div class="column is-half is-centered"> <div class="column is-half">
<button class="button is-light" @click="toggleMode"> <button class="btn btn-outline" @click="toggleMode">
<img src="/assets/saved.svg" alt="save" /> <img src="/assets/saved.svg" alt="save" />
</button> </button>
</div> </div>

1
src/views/ShareNotes.vue
View File

@@ -32,7 +32,6 @@ const { content } = useFile(note)
<style scoped lang="scss"> <style scoped lang="scss">
.share-notes { .share-notes {
background-color: var(--background-color);
min-width: 100vw; min-width: 100vw;
margin: auto; margin: auto;
display: flex; display: flex;

50
tailwind.config.js Normal file
View File

@@ -0,0 +1,50 @@
/** @type {import('tailwindcss').Config} */
import typography from '@tailwindcss/typography'
import daisyui from 'daisyui'
const defaultTitleStyles = Array.from(
{ length: 6 },
(_, k) => `h${k + 1}`
).reduce(
(acc, heading) => ({
...acc,
[heading]: {
'margin-top': '0',
'margin-bottom': '0.5em'
}
}),
{}
)
module.exports = {
content: ['./src/**/*.{vue,js,ts}'],
theme: {
extend: {
typography: () => ({
DEFAULT: {
css: {
'font-size': '1.2em',
'font-family': '"Courier Prime", monospace',
...defaultTitleStyles,
p: {
'margin-top': '0.8em',
'margin-bottom': '0.8em'
},
img: {
'margin-top': 0,
'margin-bottom': 0
}
}
}
})
}
},
plugins: [typography, daisyui],
daisyui: {
themes: ['autumn', 'forest'],
base: true,
styled: true,
utils: true
}
}