jmaritar/next-template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(via-ui): ✨ Implementacion via-ui

Browse Source
This commit is contained in:
Jorge Mario Arita Ramírez 2024-02-20 10:11:54 -06:00
parent 303857b1fd
commit 21735be347
11 changed files with 234 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc.json
View File

@ -10,7 +10,7 @@
// command yarn install
// yarn add -D eslint eslint-plugin-react eslint-config-next eslint-config-standard eslint-plugin-tailwindcss eslint-plugin-n eslint-plugin-promise @typescript-eslint/parser
// yarn add -D eslint eslint-plugin-react eslint-config-next eslint-config-standard eslint-plugin-tailwindcss eslint-plugin-node eslint-plugin-promise
{
"env": {
@ -25,17 +25,11 @@
"plugin:tailwindcss/recommended"
],
"overrides": [],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"settings": {
"react": {
"version": "detect"
}
},
"plugins": ["react", "tailwindcss"],
"rules": {
"react-hooks/exhaustive-deps": "off",

6
package.json
View File

@ -43,7 +43,8 @@
"react-simple-hook-store": "^0.0.6",
"react-toastify": "^9.1.3",
"rosetta": "^1.1.0",
"vComponents": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/v-components.git"
"vComponents": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/v-components.git",
"via-ui": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/via-ui.git"
},
"devDependencies": {
"@types/node": "20.11.10",
@ -60,6 +61,7 @@
"eslint-plugin-tailwindcss": "^3.14.1",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"typescript": "^5.3.3"
"typescript": "^5.3.3",
"via-tailwind": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/via-tailwind.git"
}
}

16
src/layout/ResponsiveContainer.jsx
View File

@ -16,7 +16,7 @@ import { useTheme } from 'next-themes'
export const LayoutContext = createContext()
const Footer = dynamic(() => { return import('vComponents/Footer') }, { ssr: false })
const Sidebar = dynamic(() => { return import('vComponents/Sidebar') }, { ssr: false })
const Sidebar = dynamic(() => { return import('via-ui/sidebar') }, { ssr: false })
const Navbar = dynamic(() => { return import('vComponents/Navbar') }, { ssr: false })
const ResponsiveContainer = ({ children }) => {
@ -194,23 +194,15 @@ const ResponsiveContainer = ({ children }) => {
<div className={'flex h-screen overflow-hidden text-theme-text-principal'}>
{/* Sidebar */}
{userObj && userObj.nombre_usuario &&
<Sidebar
sidebarOpen={sidebarOpen}
setSidebarOpen={setSidebarOpen}
menu={menu}
sidebarStyles={'via-bg-sidebar'}
appTitleStyles='via-app-title-sidebar'
userInfoStyles='via-user-info-sidebar'
optionStyles={'via-options-sidebar'}
iconOptionStyles={'via-icons-sidebar'}
suboptionStyles={'via-sub-options-sidebar'}
iconSuboptionStyles={'via-icons-sub-sidebar'}
onClickLogout={() => doLogout()}
setTitle={setTitle}
presets={presets}
userObj={userObj}
environment={environment}
presets={presets}
setTitle={setTitle}
onClickLogout={() => doLogout()}
router={router}
i18n={i18n}
/>

11
src/pages/_app.jsx
View File

@ -9,7 +9,9 @@ import Head from 'next/head'
import '@/styles/globals.css'
import 'vComponents/styles/generated/output.css'
import { Portal } from '@headlessui/react'
import { ToastContainer } from 'react-toastify'
import presets from '@/utils/globalPresets'
export default function App ({ Component, pageProps }) {
return (
@ -23,11 +25,16 @@ export default function App ({ Component, pageProps }) {
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<I18nProvider locale={'es'} dict={''}>
<LoadingProvider>
<ToastContainer />
<Portal>
<ToastContainer
{...presets.toaster}
toastClassName={'rounded-lg bg-white text-black shadow-md dark:!bg-black dark:text-white'}
style={{ zIndex: 99999 }}
/>
</Portal>
<ResponsiveContainer>
<RouteProvider>
<Component {...pageProps} />

13
src/pages/_document.jsx
View File

@ -1,13 +0,0 @@
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document () {
return (
<Html lang="es">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}

10
src/styles/component-styles/navbar.css
View File

@ -1,19 +1,19 @@
.via-navbar {
@apply bg-white dark:bg-[#222222] border-slate-200 text-theme-app-500 dark:text-theme-app-50 font-semibold transition-colors duration-350 ease-in-out !important;
@apply bg-white dark:bg-[#222222] border-slate-200 text-theme-app-500 dark:text-theme-app-50 font-semibold transition-colors duration-300 ease-in-out !important;
}
.via-menu-btn-navbar {
@apply text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200 transition-colors duration-350 ease-in-out !important;
@apply text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200 transition-colors duration-300 ease-in-out !important;
}
.via-user-menu-btn-navbar {
@apply bg-slate-700 text-white transition-colors duration-350 ease-in-out !important;
@apply bg-slate-700 text-white transition-colors duration-300 ease-in-out !important;
}
.via-user-options-navbar {
@apply text-gray-900 bg-transparent transition-colors duration-350 ease-in-out !important;
@apply text-gray-900 bg-transparent transition-colors duration-300 ease-in-out !important;
}
.via-user-options-selected-navbar {
@apply bg-slate-700 dark:bg-slate-800 text-white transition-colors duration-350 ease-in-out !important;
@apply bg-slate-700 dark:bg-slate-800 text-white transition-colors duration-300 ease-in-out !important;
}

162
src/styles/component-styles/sidebar.css
View File

@ -1,39 +1,167 @@
.via-bg-sidebar {
@apply bg-theme-app-500 border border-theme-app-300 rounded-t-lg md:rounded-t-none md:rounded-b-lg md:rounded-none dark:border-theme-app-800 dark:from-theme-app-700 dark:to-theme-app-800 transition-colors duration-350 ease-in-out !important;
/* Base */
@apply bg-theme-app-500 dark:bg-theme-app-900
/* Desktop */
md:rounded-none
/* Mobile */
rounded-t-lg !important;
}
.via-bg-popover-sidebar {
/* Base */
@apply bg-gray-100 dark:bg-gray-800
space-y-2 rounded-lg border p-1 !important;
}
/* options-sidebar */
.via-options-sidebar {
@apply text-theme-app-50 bg-transparent transition-colors duration-150 font-semibold hover:bg-theme-app-50 hover:text-gray-800 dark:text-theme-app-50 dark:hover:bg-theme-app-200 first-letter:uppercase !important;
/* Base */
@apply rounded-lg transition-colors duration-500 font-thin text-md shadow-md px-2 py-1.5 border text-left truncate
/* Light */
bg-white/10 hover:bg-white/30 text-white/85 hover:text-white border-white/30
/* Dark */
dark:bg-white/15 dark:hover:bg-white/20 dark:text-white/85 dark:hover:text-white
!important;
}
.via-sub-options-sidebar {
@apply text-white hover:bg-theme-app-100 transition-colors duration-150 font-semibold gap-x-1 hover:text-gray-800 dark:text-theme-app-50 dark:hover:bg-theme-app-300 !important;
.via-options-sidebar-active {
/* Base */
@apply rounded-lg transition-colors duration-500 font-thin text-md shadow-md px-2 py-1.5 border-l-4
/* Light */
bg-white/50 hover:bg-white/30 text-theme-app-800 hover:text-theme-app-900
/* Dark */
dark:bg-white/30 dark:hover:bg-white/40 dark:text-white/85 dark:hover:text-white
!important;
}
.via-drawer-count {
@apply inline-flex items-center w-8 justify-center mr-1 px-2 py-2 text-sm font-semibold leading-none bg-teal-800 text-white rounded-full
.via-options-sidebar-collapse {
/* Base */
@apply rounded-none transition-colors duration-500 font-thin text-md justify-center pb-0.5 pt-2 px-0.5 line-clamp-2 text-balance
/* Light */
hover:bg-white/30 text-white/85 hover:text-white
/* Dark */
dark:bg-white/15 dark:hover:bg-white/20 dark:text-white/85 dark:hover:text-white
!important;
}
.via-app-title-sidebar {
@apply !text-theme-app-50 dark:text-theme-app-50 hover:bg-theme-app-800 dark:hover:bg-theme-app-950 !rounded-lg px-1 cursor-default !important;
}
.via-user-info-sidebar {
@apply !text-white bg-theme-app-700 dark:bg-theme-app-900 hover:bg-theme-app-800 dark:hover:bg-theme-app-950 !rounded-t-lg py-1 cursor-default;
.via-options-sidebar-collapse-active {
/* Base */
@apply rounded-none transition-colors duration-500 font-thin text-md justify-center py-0.5 pt-2 px-0.5 border-l-4
/* Light */
bg-white/50 hover:bg-white/30 text-theme-app-800 hover:text-theme-app-900
/* Dark */
dark:bg-white/30 dark:hover:bg-white/40 dark:text-white/85 dark:hover:text-white
!important;
}
.via-icons-sidebar {
@apply !text-theme-app-950 bg-blue-100 rounded-md border p-[1px] drop-shadow-md !important;
@apply !text-theme-app-950 bg-blue-100 rounded-md border drop-shadow-md h-6 w-6 min-h-6 min-w-6 !important;
}
.via-icons-sidebar-collapse {
@apply !text-theme-app-950 bg-blue-100 rounded-md border drop-shadow-md h-7 w-7 !important;
}
.via-collapse-options-sidebar {
@apply relative duration-300 ease-in-out overflow-hidden rounded-bl-md border-l-2 border-b-2 space-y-2 !important;
}
/* sub-options-sidebar */
.via-sub-options-sidebar {
/* Base */
@apply rounded-lg transition-colors duration-500 font-thin shadow-md justify-start items-center text-md px-1.5 py-1
/* Light */
bg-white/20 hover:bg-white/30 text-white/85 hover:text-white
/* Dark */
dark:bg-white/15 dark:hover:bg-white/20 dark:text-white/85 dark:hover:text-white
!important;
}
.via-sub-options-sidebar-active {
/* Base */
@apply rounded-lg transition-colors duration-500 font-thin shadow-md justify-start items-center text-md px-1.5 py-1 border-l-4
/* Light */
bg-white/50 hover:bg-white/30 text-theme-app-800 hover:text-theme-app-900
/* Dark */
dark:bg-white/30 dark:hover:bg-white/40 dark:text-white/85 dark:hover:text-white
!important;
}
.via-sub-options-sidebar-collapse {
/* Base */
@apply rounded-lg transition-colors duration-500 font-thin shadow-md justify-start items-center text-md py-0.5 px-1.5
/* Light */
bg-white hover:bg-gray-300 text-gray-700 hover:text-gray-800 border border-gray-300
/* Dark */
dark:bg-gray-800 dark:hover:bg-gray-900 dark:text-gray-200 dark:hover:text-gray-300
!important;
}
.via-sub-options-sidebar-collapse-active {
/* Base */
@apply rounded-lg transition-colors duration-500 font-thin shadow-md justify-start items-center text-md py-0.5 px-1.5 border-l-4
/* Light */
bg-white/50 hover:bg-white/30 text-theme-app-800 hover:text-theme-app-900
/* Dark */
dark:bg-gray-900 dark:hover:bg-gray-950 dark:text-gray-300 dark:hover:text-gray-400 dark:border-gray-200
!important;
}
/* Icons for sub-options-sidebar */
.via-icons-sub-sidebar {
@apply !text-theme-app-950 bg-cyan-50 rounded-md h-6 w-6 p-[1px] drop-shadow-md !important;
@apply !text-theme-app-950 bg-cyan-50 rounded-md h-6 w-6 min-h-6 min-w-6 drop-shadow-md !important;
}
.via-icons-sub-sidebar-collapse {
@apply !text-theme-app-950 bg-cyan-50 rounded-md h-8 w-8 min-h-6 min-w-6 drop-shadow-md !important;
}
/* sidebar */
.via-footer-options-sidebar {
/* Base */
@apply bg-white/10 hover:bg-white/30 text-white/85 hover:text-white border-white/30 border rounded-lg text-md space-x-2 px-2 py-1.5 dark:text-theme-app-50 !important;
}
.via-separator-sidebar {
@apply h-[1.5px] bg-white/75 my-2 !important;
}
.via-drawer-count {
@apply inline-flex items-center w-8 justify-center mr-1 px-2 py-2 text-sm font-thin leading-none bg-teal-800 text-white rounded-full
}
.via-app-title-sidebar {
/* Base */
@apply text-theme-app-50 dark:text-theme-app-50 hover:bg-theme-app-800 dark:hover:bg-theme-app-950 rounded-lg !important;
}
.via-user-info-sidebar {
@apply text-white text-base bg-theme-app-700 dark:bg-theme-app-900 hover:bg-theme-app-800 dark:hover:bg-theme-app-950 cursor-default !important;
}
.via-input-search-sidebar {
@apply w-full rounded-l-lg shadow-lg !border-l-2 !border-y-2 border-r-0 border-[#7b1fa2] focus:border-blue-500 !important;
@apply rounded-lg h-8 !important;
}
.via-button-search-sidebar {
@apply bg-theme-app-500 hover:bg-theme-app-600 text-white flex justify-center items-center p-2 rounded-r-lg cursor-pointer dark:!border-l-0 !important;
.via-badge-sidebar {
@apply bg-red-500 text-white rounded-full text-[10px] px-2 py-1 !important;
}
.via-badge-sidebar-collapse {
@apply absolute top-0 right-0 bg-red-500 text-white rounded-full text-[10px] px-1 py-0.5 border-2 border-white !important;
}
.via-count-sidebar {
@apply bg-green-500 text-white rounded-full text-[10px] px-2 py-1 !important;
}
.via-count-sidebar-collapse {
@apply absolute top-0 right-3 bg-green-500 text-white rounded-full text-[10px] px-1.5 py-0.5 border-2 border-white !important;
}
.via-drawer-button {
@apply bg-theme-app-600 hover:bg-theme-app-700 flex items-center justify-between rounded-lg border border-transparent p-2 font-thin leading-5 text-white transition-colors duration-150 focus:outline-none active:bg-purple-600 !important;
}

67
src/styles/globals.css
View File

@ -1,47 +1,28 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback'); /* Inter */
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Round'); /* Material Icons */
@import url('https://fonts.googleapis.com/css2?family=Inter'); /* Inter */
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Round'); /* Material Icons */
@import url('https://fonts.googleapis.com/css?family=Roboto'); /* Roboto */
@import url('https://www.via-asesores.com/fonts/din-webfont.css'); /* DIN Web */
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ===== Scrollbar CSS ===== */
@layer utilities {
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #1F92BF #e1e1e1;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
@apply w-2 h-2 bg-gray-200 dark:bg-gray-800 rounded-lg;
}
*::-webkit-scrollbar-thumb {
@apply bg-theme-app-600 rounded-lg border-theme-app-400 dark:bg-theme-app-600 dark:border-theme-app-600;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-theme-app-700 border-theme-app-700 dark:bg-theme-app-900 dark:border-theme-app-900;
transition: 0s;
}
/* Transition Classes for Theme Switching */
.transition-theme {
@apply transition-colors duration-[350ms] ease-in-out !important;
}
/* ===== Scrollbar CSS ===== */
@layer utilities {
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: theme('colors.theme-app.600') rgba(0, 0, 0, 0.2);
}
}
/* Additional Styles */
@import 'additional-styles/toastify.css';
@import 'additional-styles/404.css';
@import 'component-styles/loading.css';
@import 'component-styles/sidebar.css';
@import 'component-styles/navbar.css';
@import 'component-styles/datatable.css';
@import 'page-styles/common.css';
@import 'page-styles/login.css';
@import 'ui-styles/via-ui.css';
/* Additional Styles */
@import 'additional-styles/toastify.css';
@import 'additional-styles/404.css';
@import 'component-styles/loading.css';
@import 'component-styles/sidebar.css';
@import 'component-styles/navbar.css';
@import 'component-styles/datatable.css';
@import 'page-styles/common.css';
@import 'page-styles/login.css';
@import 'ui-styles/via-ui.css';

104
src/styles/page-styles/common.css
View File

@ -7,7 +7,19 @@
}
.via-input {
@apply w-full text-sm text-gray-900 dark:text-neutral-900 rounded-lg border border-gray-300 focus:ring-stone-500 focus:border-stone-500 dark:border-stone-600 dark:placeholder-gray-400 dark:focus:border-stone-500 !important;
@apply w-full text-sm text-gray-900 dark:text-neutral-900 rounded-lg border-l-gray-100 border border-gray-300 focus:ring-stone-500 focus:border-stone-500 dark:border-stone-600 dark:placeholder-gray-400 dark:focus:border-stone-500 !important;
}
.via-input:not(textarea) {
@apply h-7 !important;
}
select.via-input {
@apply py-0 !important;
}
.invalid-feedback {
@apply h-2;
}
.via-input-prepend {
@ -15,11 +27,18 @@
}
.via-append-input {
@apply absolute top-0 -right-1 h-full p-1 text-sm font-medium text-white bg-theme-app-500 dark:bg-theme-app-900 rounded-r-lg border border-theme-app-900 hover:bg-theme-app-600 focus:ring-4 focus:outline-none focus:ring-theme-app-300 dark:hover:bg-theme-app-900 dark:focus:ring-theme-app-800;
}
@apply w-8 absolute top-0 -right-1 h-full text-sm font-medium text-white bg-theme-app-500 dark:bg-theme-app-900 rounded-r-lg border border-theme-app-900 hover:bg-theme-app-600 focus:ring-4 focus:outline-none focus:ring-theme-app-300 dark:hover:bg-theme-app-900 dark:focus:ring-theme-app-800;
}
.via-append-input svg, .via-append-input-extra svg {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.via-append-input-extra {
@apply absolute top-0 right-0 h-full p-1 mr-6 text-sm font-medium text-white bg-theme-app-500 dark:bg-theme-app-900 border border-theme-app-900 hover:bg-theme-app-800 focus:ring-4 focus:outline-none focus:ring-theme-app-300 dark:hover:bg-theme-app-900 dark:focus:ring-theme-app-800;
@apply w-8 absolute top-0 -right-1 h-full mr-7 text-sm font-medium text-white bg-theme-app-700 rounded-r-lg border border-theme-app-700 hover:bg-theme-app-600 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
}
.via-button {
@ -37,66 +56,6 @@
@apply text-green-700 dark:text-green-600;
}
.via-default {
@apply text-theme-app-700 dark:text-theme-app-300;
}
.via-default-bg {
@apply bg-theme-app-700 dark:bg-theme-app-300;
}
.via-default-active {
@apply text-theme-app-500 dark:text-theme-app-500;
}
.via-yellow {
@apply text-amber-400 dark:text-amber-300 ;
}
.via-yellow-bg {
@apply bg-amber-500 dark:bg-amber-600 ;
}
.via-yellow-active {
@apply text-amber-500 dark:text-amber-600 ;
}
.via-green {
@apply text-green-400 dark:text-green-300;
}
.via-green-bg {
@apply bg-green-500 dark:bg-green-600;
}
.via-green-active {
@apply text-green-600 dark:text-green-600;
}
.via-red {
@apply text-red-400 dark:text-red-300;
}
.via-red-bg {
@apply bg-red-500 dark:bg-red-600;
}
.via-red-active {
@apply text-red-600 dark:text-red-600;
}
.via-blue {
@apply text-blue-400 dark:text-blue-300;
}
.via-blue-bg {
@apply bg-blue-500 dark:bg-blue-600;
}
.via-blue-active {
@apply text-blue-600 dark:text-blue-600;
}
.via-translate {
@apply -translate-x-1/2;
}
@ -110,7 +69,7 @@
}
.responsive-container {
@apply w-full h-auto min-h-[calc(100vh-60px)] mx-auto bg-[#ECEFF8] dark:bg-[#0f0f0f] items-center pb-10 p-2 transition-colors duration-350 ease-in-out !important;
@apply w-full h-auto min-h-[calc(100vh-60px)] mx-auto bg-[#ECEFF8] dark:bg-[#0f0f0f] items-center pb-10 p-2 transition-colors duration-300 ease-in-out !important;
}
.via-title {
@ -124,18 +83,3 @@
.via-text {
@apply text-[#131313] dark:text-[#FFFFFF]
}
/* Clase para el color warning (azul) */
.via-warning {
@apply bg-blue-500 hover:bg-blue-600 dark:bg-warning-dark dark:hover:bg-warning-hover-dark text-white !important;
}
/* Clase para el color danger (rojo) */
.via-danger {
@apply bg-danger hover:bg-danger-hover dark:bg-danger-dark dark:hover:bg-danger-hover-dark text-white !important;
}
/* Clase para el color success (verde) */
.via-success {
@apply bg-success hover:bg-success-hover dark:bg-success-dark dark:hover:bg-success-hover-dark text-white !important;
}

79
tailwind.config.ts
View File

@ -1,69 +1,16 @@
import type { Config } from 'tailwindcss'
const defaultTheme = require('tailwindcss/defaultTheme')
import standard from 'via-tailwind'
const config: Config = {
mode: 'jit',
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}'
],
darkMode: 'class',
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}'
],
theme: {
extend: {
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
inter: ['Inter', 'sans-serif', ...defaultTheme.fontFamily.sans]
},
fontSize: {
xs: ['0.75rem', { lineHeight: '1.25' }],
sm: ['0.875rem', { lineHeight: '1.25' }],
base: ['1rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
lg: ['1.125rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
xl: ['1.25rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
'2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
'3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
'4xl': ['2.25rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
'5xl': ['3rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
'6xl': ['3.75rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }]
},
screens: {
xs: '480px'
},
borderWidth: {
3: '3px'
},
minWidth: {
36: '9rem',
44: '11rem',
56: '14rem',
60: '15rem',
72: '18rem',
80: '20rem'
},
maxWidth: {
'8xl': '88rem',
'9xl': '96rem'
},
zIndex: {
60: '60'
},
boxShadow: {
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.02)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.01)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.01)'
},
outline: {
blue: '2px solid rgba(0, 112, 244, 0.5)'
},
transitionDuration: {
350: '350ms'
},
colors: {
'theme-text': {
principal: '#323338',
principal: '#334155',
disabled: '#cbd5e1'
},
'theme-app': {
@ -78,22 +25,10 @@ const config: Config = {
800: '#153758',
900: '#112F4D',
950: '#0E2741'
},
warning: '#3B82F6',
'warning-dark': '#1E40AF',
'warning-hover': '#60A5FA',
'warning-hover-dark': '#2563EB',
danger: '#EF4444',
'danger-dark': '#991B1B',
'danger-hover': '#F87171',
'danger-hover-dark': '#DC2626',
success: '#22C55E',
'success-dark': '#15803D',
'success-hover': '#34D399',
'success-hover-dark': '#22C55E'
}
}
}
},
plugins: []
plugins: [standard]
}
export default config

40
tsconfig.json
View File

@ -1,6 +1,12 @@
{
"compilerOptions": {
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"vComponents/*": ["./node_modules/vComponents/dist/components/*"],
"via-ui/*": ["./node_modules/via-ui/dist/components/*"]
},
"allowJs": true,
"skipLibCheck": true,
"strict": false,
@ -8,37 +14,13 @@
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"target": "esnext",
"module": "esnext",
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
],
"vComponents/*": [
"./node_modules/vComponents/dist/components/*"
],
"via-ui/*": [
"./node_modules/via-ui/dist/components/*"
]
},
"lib": [
"dom",
"dom.iterable",
"esnext"
]
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"]
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"**/*.js",
"**/*.jsx"
],
"exclude": [
"node_modules"
]
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
"exclude": ["node_modules"]
}