From 98141714aebea6d4625d9362591863b2b6de882e Mon Sep 17 00:00:00 2001 From: suhjae Date: Tue, 22 Oct 2024 15:36:25 +0900 Subject: [PATCH 1/3] feat: restyled header --- app.config.ts | 160 ++++++++++++++++++++++++++++++++++++------ layouts/default.vue | 2 +- pages/index.vue | 4 +- pages/train/index.vue | 2 +- 4 files changed, 144 insertions(+), 24 deletions(-) diff --git a/app.config.ts b/app.config.ts index 23e8382..375fbfe 100644 --- a/app.config.ts +++ b/app.config.ts @@ -19,10 +19,101 @@ export default defineAppConfig({ }, button: { - rounded: "rounded-full", + base: "focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0", + font: "font-medium", + rounded: "rounded-md", + truncate: "text-left break-all line-clamp-1", + block: "w-full flex justify-center items-center", + inline: "inline-flex items-center", + size: { + default: "h-10 px-4 py-2", + "2xs": "text-xs", + xs: "text-xs", + sm: "h-9 rounded-md px-3 text-sm", + md: "text-sm", + lg: "h-11 rounded-md px-8 text-sm", + xl: "text-base", + }, + gap: { + "2xs": "gap-x-1", + xs: "gap-x-1.5", + sm: "gap-x-1.5", + md: "gap-x-2", + lg: "gap-x-2.5", + xl: "gap-x-2.5", + }, + padding: { + "2xs": "px-2 py-1", + xs: "px-2.5 py-1.5", + sm: "px-2.5 py-1.5", + md: "px-3 py-2", + lg: "px-3.5 py-2.5", + xl: "px-3.5 py-2.5", + }, + square: { + "2xs": "p-1", + xs: "p-1.5", + sm: "p-1.5", + md: "p-2", + lg: "p-2.5", + xl: "p-2.5", + }, + color: { + white: { + solid: + "shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white aria-disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 dark:aria-disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + ghost: + "text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + }, + gray: { + solid: + "shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 aria-disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 dark:aria-disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + ghost: + "text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + link: "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + }, + black: { + solid: + "shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 aria-disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white dark:aria-disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + link: "text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + }, + }, + variant: { + solid: + "shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 aria-disabled:bg-{color}-500 dark:bg-{color}-400 dark:hover:bg-{color}-500 dark:disabled:bg-{color}-400 dark:aria-disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400", + outline: + "ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400", + soft: "text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 aria-disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 dark:aria-disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400", + ghost: + "text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400", + link: "text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 aria-disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 dark:aria-disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400", + }, + icon: { + base: "flex-shrink-0", + loading: "animate-spin", + size: { + "2xs": "h-4 w-4", + xs: "h-4 w-4", + sm: "h-5 w-5", + md: "h-5 w-5", + lg: "h-5 w-5", + xl: "h-6 w-6", + }, + }, default: { - size: "md", - color: "black", + size: "sm", + variant: "solid", + color: "primary", + loadingIcon: "i-heroicons-arrow-path-20-solid", + }, + }, + + color: { + white: { + solid: + "shadow ring-1 ring-inset ring-gray-400 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white aria-disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 dark:aria-disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", + ghost: + "text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400", }, }, @@ -31,10 +122,6 @@ export default defineAppConfig({ ring: "ring-1 ring-slate-200 dark:ring-slate-800 ring-inset", }, - buttonGroup: { - rounded: "rounded-full", - }, - table: { tr: { base: "", @@ -58,10 +145,27 @@ export default defineAppConfig({ }, input: { - rounded: "rounded-full", + rounded: "rounded-md", default: { size: "md", }, + gap: { + "2xs": "gap-x-1 gap-y-1.5", + xs: "gap-x-1.5 gap-y-2", + sm: "gap-x-1.5 gap-y-2", + md: "gap-x-2 gap-y-2.5", + lg: "gap-x-2.5 gap-y-3", + xl: "gap-x-2.5 gap-y-3", + }, + padding: { + "2xs": "px-2 py-1.5", + xs: "px-2.5 py-2", + sm: "px-2.5 py-2", + md: "px-3 py-2.5", + lg: "px-3.5 py-3", + xl: "px-3.5 py-3", + }, + color: { white: { outline: "dark:bg-gray-950", @@ -70,12 +174,28 @@ export default defineAppConfig({ }, select: { - rounded: "rounded-full", + rounded: "rounded-md", default: { size: "md", loadingIcon: "i-svg-spinners-180-ring-with-bg", trailingIcon: "i-ph-caret-down", }, + gap: { + "2xs": "gap-x-1 gap-y-1.5", + xs: "gap-x-1.5 gap-y-2", + sm: "gap-x-1.5 gap-y-2", + md: "gap-x-2 gap-y-2.5", + lg: "gap-x-2.5 gap-y-3", + xl: "gap-x-2.5 gap-y-3", + }, + padding: { + "2xs": "px-2 py-1.5", + xs: "px-2.5 py-2", + sm: "px-2.5 py-2", + md: "px-3 py-2.5", + lg: "px-3.5 py-3", + xl: "px-3.5 py-3", + }, color: { white: { outline: "dark:bg-gray-950", @@ -100,21 +220,21 @@ export default defineAppConfig({ }, header: { - wrapper: "border-none backdrop-blur-lg", - + wrapper: "backdrop-blur-lg border-b dark:border-gray-800", + container: "h-14", links: { - wrapper: - "ring-1 ring-gray-300 dark:ring-gray-700 px-3 gap-x-0 rounded-full", - base: "py-2 px-4 font-medium transition-colors relative after:absolute after:-bottom-px after:inset-x-2 after:h-px after:rounded-full after:opacity-0 after:bg-gray-900 dark:after:bg-white after:transition-opacity", - active: "text-gray-900 dark:text-white after:opacity-100", + wrapper: "px-3 gap-x-0", + base: "font-medium py-2 px-4 transition-colors relative after:absolute", + active: "text-primary-500 dark:text-primary-400 after:opacity-100", inactive: "text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100", }, left: "sm:flex-1", right: "sm:flex-1", + panel: { - wrapper: "lg:hidden", + wrapper: "lg:hidden hover:block", }, button: { @@ -164,7 +284,7 @@ export default defineAppConfig({ list: { base: "relative", background: "bg-gray-100 dark:bg-gray-800", - rounded: "rounded-full", + rounded: "rounded-md", shadow: "", padding: "p-1", height: "h-10", @@ -173,8 +293,8 @@ export default defineAppConfig({ wrapper: "absolute top-[4px] left-[4px] duration-200 ease-out focus:outline-none", base: "w-full h-full", - background: "bg-white dark:bg-gray-900", - rounded: "rounded-full", + background: "bg-white dark:bg-gray-950", + rounded: "rounded-md", shadow: "shadow-sm", }, tab: { @@ -186,7 +306,7 @@ export default defineAppConfig({ padding: "px-3", size: "text-sm", font: "font-medium", - rounded: "rounded-full", + rounded: "rounded-md", shadow: "", icon: "w-4 h-4 flex-shrink-0 me-2", }, diff --git a/layouts/default.vue b/layouts/default.vue index d43c979..2311e07 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -38,7 +38,7 @@ provide("files", files);