diff --git a/.eslintrc.json b/.eslintrc.json index 229a5e3..29b5e6d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -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", diff --git a/package.json b/package.json index c577c68..9e76478 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/layout/ResponsiveContainer.jsx b/src/layout/ResponsiveContainer.jsx index 729a639..0195b33 100644 --- a/src/layout/ResponsiveContainer.jsx +++ b/src/layout/ResponsiveContainer.jsx @@ -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 }) => {
{/* Sidebar */} {userObj && userObj.nombre_usuario && - doLogout()} - setTitle={setTitle} + presets={presets} userObj={userObj} environment={environment} - presets={presets} + setTitle={setTitle} + onClickLogout={() => doLogout()} router={router} i18n={i18n} /> diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 509c865..f957ce3 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -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 > - + + + diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx deleted file mode 100644 index 4be525f..0000000 --- a/src/pages/_document.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Html, Head, Main, NextScript } from 'next/document' - -export default function Document () { - return ( - - - -
- - - - ) -} diff --git a/src/styles/component-styles/navbar.css b/src/styles/component-styles/navbar.css index bf4a71d..f30db22 100644 --- a/src/styles/component-styles/navbar.css +++ b/src/styles/component-styles/navbar.css @@ -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; } diff --git a/src/styles/component-styles/sidebar.css b/src/styles/component-styles/sidebar.css index 234af99..c9a7fc9 100644 --- a/src/styles/component-styles/sidebar.css +++ b/src/styles/component-styles/sidebar.css @@ -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; } \ No newline at end of file diff --git a/src/styles/globals.css b/src/styles/globals.css index 59b7397..14087a2 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -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'; \ No newline at end of file +/* 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'; \ No newline at end of file diff --git a/src/styles/page-styles/common.css b/src/styles/page-styles/common.css index a4e5eeb..f77604f 100644 --- a/src/styles/page-styles/common.css +++ b/src/styles/page-styles/common.css @@ -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; -} diff --git a/tailwind.config.ts b/tailwind.config.ts index f83b78e..906ddd8 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -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 diff --git a/tsconfig.json b/tsconfig.json index 057b904..afe721c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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"] }