diff --git a/app.config.ts b/app.config.ts index de2ed3c4..6edba21c 100644 --- a/app.config.ts +++ b/app.config.ts @@ -1,100 +1,60 @@ export default defineAppConfig({ ui: { primary: 'yellow', - gray: 'zinc', - divider: { - border: { - base: 'flex border-zinc-200 dark:border-zinc-800', - }, - }, - badge: { + gray: 'cool', + button: { + base: 'transition ease-in', color: { gray: { - solid: 'ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 text-zinc-700 dark:text-zinc-200 bg-zinc-50 dark:bg-zinc-800', + solid: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50', }, }, }, - button: { + select: { base: 'transition ease-in', color: { - white: { - solid: 'shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 text-zinc-900 dark:text-white bg-white hover:bg-zinc-50 disabled:bg-white dark:bg-zinc-900 dark:hover:bg-zinc-800/50 dark:disabled:bg-zinc-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400', - }, - gray: { - solid: 'shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 text-zinc-700 dark:text-zinc-200 bg-zinc-50 hover:bg-zinc-100 disabled:bg-zinc-50 dark:bg-zinc-800 dark:hover:bg-zinc-700/50 dark:disabled:bg-zinc-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400', - ghost: 'text-zinc-700 dark:text-zinc-200 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-50 dark:hover:bg-zinc-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400', - }, + gray: { outline: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50' }, }, }, buttonGroup: { shadow: 'shadow-none', }, - tooltip: { - background: 'bg-white dark:bg-zinc-900', - color: 'text-zinc-900 dark:text-white', - ring: 'ring-1 ring-zinc-200 dark:ring-zinc-800', - }, - kbd: { - base: 'inline-flex items-center justify-center text-zinc-900 dark:text-white', - background: 'bg-zinc-100 dark:bg-zinc-800', - ring: 'ring-1 ring-zinc-300 dark:ring-zinc-700 ring-inset', - }, card: { base: 'transition ease-in duration-150', - background: 'bg-white dark:bg-zinc-900', - divide: 'divide-y divide-zinc-200 dark:divide-zinc-800', - ring: 'ring-1 ring-zinc-200 dark:ring-zinc-700', + }, input: { + base: 'transition ease-in', color: { - white: { - outline: 'shadow-none bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400', - }, - placeholder: 'placeholder-zinc-400 dark:placeholder-zinc-500', - }, - }, - select: { - placeholder: 'text-zinc-900 dark:text-white', - color: { - white: { - outline: 'shadow-none bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white ring-1 ring-inset ring-zinc-300 dark:ring-zinc-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400', + gray: { + outline: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50', }, }, }, selectMenu: { - background: 'bg-white dark:bg-zinc-800', - ring: 'ring-1 ring-zinc-200 dark:ring-zinc-700', option: { base: 'cursor-pointer', - color: 'text-zinc-900 dark:text-white', - active: 'bg-zinc-100 dark:bg-zinc-900', }, }, - avatar: { - background: 'bg-zinc-100 dark:bg-zinc-800', - rounded: 'rounded-full', - text: 'font-medium leading-none text-zinc-900 dark:text-white truncate', - placeholder: 'font-medium leading-none text-zinc-500 dark:text-zinc-400 truncate', - }, - popover: { - background: 'bg-white dark:bg-zinc-900', - ring: 'ring-1 ring-zinc-200 dark:ring-zinc-800', - }, }, website: { search: { groups: [ + /** + * End / is very important since we use startsWith + * Without, page /blog will be in the wrong group + */ { name: 'Articles', - path: '/resources', + path: '/resources/', }, { name: 'Blog', - path: '/blog', + path: '/blog/', }, { name: 'Packages', - path: '/packages', + path: '/packages/', }, ], }, @@ -181,7 +141,6 @@ export default defineAppConfig({ }, ], }, - {}, ], }, socials: { diff --git a/app.vue b/app.vue index fd3c0a4e..dcdde550 100644 --- a/app.vue +++ b/app.vue @@ -1,15 +1,38 @@ diff --git a/assets/app.css b/assets/app.css index 393d4b5b..57dd49f9 100644 --- a/assets/app.css +++ b/assets/app.css @@ -1,47 +1,26 @@ -@font-face { - font-family: "Nunito"; - font-weight: 100 900; - font-display: swap; - font-style: normal; - src: url("/assets/fonts/nunito.ttf") format("truetype"); -} - ::-webkit-scrollbar { width: 0.6em; height: 0.6em; - background: transparent; + @apply bg-transparent; } ::-webkit-scrollbar-track { - background-color: transparent -} - -:is(.gray-scrollbar, pre)::-webkit-scrollbar-track { - @apply bg-zinc-100 rounded-full + @apply bg-gray-100; } ::-webkit-scrollbar-thumb { - @apply rounded-md bg-white -} - -:is(.gray-scrollbar, pre)::-webkit-scrollbar-thumb { - @apply bg-zinc-400/20 + border-radius: 0.6em; + @apply bg-gray-300 hover:bg-gray-400; } -::-webkit-scrollbar-thumb:hover { - @apply bg-zinc-100 -} - -:is(.gray-scrollbar, pre)::-webkit-scrollbar-thumb:hover { - @apply bg-zinc-500/20 -} - -::-webkit-scrollbar-thumb:active { - @apply bg-zinc-200 -} +.dark { + & ::-webkit-scrollbar-track { + @apply bg-gray-800; + } -:is(.gray-scrollbar, pre)::-webkit-scrollbar-thumb:active { - @apply bg-zinc-600/20 + & ::-webkit-scrollbar-thumb { + @apply bg-gray-700 hover:bg-gray-600; + } } :is(h1, h2, h3, h4, h5, h6) { diff --git a/components/Main.vue b/components/Main.vue new file mode 100644 index 00000000..bf08ac01 --- /dev/null +++ b/components/Main.vue @@ -0,0 +1,9 @@ + diff --git a/components/app/AppColorModeImage.vue b/components/app/AppColorModeImage.vue new file mode 100644 index 00000000..9d0f8b48 --- /dev/null +++ b/components/app/AppColorModeImage.vue @@ -0,0 +1,15 @@ + + + diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue index 2b53af18..9bb81dc9 100644 --- a/components/app/AppFooter.vue +++ b/components/app/AppFooter.vue @@ -1,40 +1,57 @@ diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue index 0edd0baf..f087dbb6 100644 --- a/components/app/AppHeader.vue +++ b/components/app/AppHeader.vue @@ -33,7 +33,9 @@ defineShortcuts({ }) const { metaSymbol } = useShortcuts() -const uiButton = { font: 'font-semibold', color: { gray: { ghost: 'hover:bg-primary/30 dark:hover:bg-primary/90' } } } + +const uiButton = { font: 'font-semibold', color: { gray: { ghost: 'text-gray-950 hover:bg-primary/60 dark:text-gray-50 dark:hover:bg-primary/40' } } } +const activeClassButton = 'bg-primary bg-opacity-40 dark:bg-opacity-30' function toDesignKit() { navigateTo('/design-kit?utm_source=unjs.io&utm_medium=header-icon') @@ -41,63 +43,61 @@ function toDesignKit() { diff --git a/components/app/AppHero.vue b/components/app/AppHero.vue deleted file mode 100644 index 1d240222..00000000 --- a/components/app/AppHero.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - diff --git a/components/app/AppLogo.vue b/components/app/AppLogo.vue index 7eae9dd8..b5a5a821 100644 --- a/components/app/AppLogo.vue +++ b/components/app/AppLogo.vue @@ -7,6 +7,6 @@ defineProps<{ diff --git a/components/app/AppNavigationDialog.vue b/components/app/AppNavigationDialog.vue index 178f7687..b9f372bd 100644 --- a/components/app/AppNavigationDialog.vue +++ b/components/app/AppNavigationDialog.vue @@ -12,6 +12,10 @@ defineEmits<{ }>() const website = useWebsite() + +const uiButton = { font: 'font-semibold', color: { gray: { ghost: 'text-gray-950 hover:bg-primary/60 dark:text-gray-50 dark:hover:bg-primary/40' } } } +const activeClassButton = 'bg-primary bg-opacity-40 dark:bg-opacity-30' +const uiSocialButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-primary/40' } } }