Skip to content

Commit

Permalink
Merge pull request #24 from BlueScript-NPO/new-ui
Browse files Browse the repository at this point in the history 
New UI
  • Loading branch information
@SuhJae
SuhJae authored Oct 22, 2024
2 parents 4f6f849 + b54c319 commit 6a8068b
Show file tree
Hide file tree
Showing 9 changed files with 722 additions and 631 deletions.
2 changes: 2 additions & 0 deletions .nuxtrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
uiPro.license=B5BB8F9E-6065-4075-A894-015E5901668B
telemetry.enabled=false
307 changes: 273 additions & 34 deletions app.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,99 @@ export default defineAppConfig({

card: {
background: "bg-white dark:bg-zinc-950",
ring: "ring-1 ring-gray-200 dark:ring-gray-800",
rounded: "rounded-xl",
},

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: {
"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.5",
xs: "p-2",
sm: "p-2",
md: "p-2.5",
lg: "p-3",
xl: "p-3",
},
color: {
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-white-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 aria-disabled:bg-{color}-500 dark:bg-{color}-500 dark:hover:bg-{color}-600 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",
size: "sm",
variant: "solid",
color: "black",
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",
},
},

Expand All @@ -31,10 +117,6 @@ export default defineAppConfig({
ring: "ring-1 ring-slate-200 dark:ring-slate-800 ring-inset",
},

buttonGroup: {
rounded: "rounded-full",
},

table: {
tr: {
base: "",
Expand All @@ -58,37 +140,194 @@ export default defineAppConfig({
},

input: {
rounded: "rounded-full",
default: {
size: "md",
wrapper: "relative",
base: "relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0",
form: "form-input",
rounded: "rounded-md",
placeholder:
"placeholder:text-muted-foreground dark:placeholder-gray-500",
file: {
base: "file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:bg-transparent file:border-0 file:p-0 file:outline-none",
},
color: {
white: {
outline: "dark:bg-gray-950",
size: {
default: "h-10 px-3 py-2 text-sm",
"2xs": "text-xs",
xs: "text-xs",
sm: "text-sm",
md: "text-sm",
lg: "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",
},
leading: {
padding: {
"2xs": "ps-7",
xs: "ps-8",
sm: "ps-9",
md: "ps-10",
lg: "ps-11",
xl: "ps-12",
},
},
},

select: {
rounded: "rounded-full",
default: {
size: "md",
loadingIcon: "i-svg-spinners-180-ring-with-bg",
trailingIcon: "i-ph-caret-down",
trailing: {
padding: {
"2xs": "pe-7",
xs: "pe-8",
sm: "pe-9",
md: "pe-10",
lg: "pe-11",
xl: "pe-12",
},
},
color: {
white: {
outline: "dark:bg-gray-950",
outline:
"shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400",
},
gray: {
outline:
"shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400",
},
},
variant: {
outline:
"shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400",
none: "bg-transparent focus:ring-0 focus:shadow-none",
},
icon: {
base: "flex-shrink-0 text-gray-400 dark:text-gray-500",
color: "text-{color}-500 dark:text-{color}-400",
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",
},
leading: {
wrapper: "absolute inset-y-0 start-0 flex items-center",
pointer: "pointer-events-none",
padding: {
"2xs": "px-2",
xs: "px-2.5",
sm: "px-2.5",
md: "px-3",
lg: "px-3.5",
xl: "px-3.5",
},
},
trailing: {
wrapper: "absolute inset-y-0 end-0 flex items-center",
pointer: "pointer-events-none",
padding: {
"2xs": "px-2",
xs: "px-2.5",
sm: "px-2.5",
md: "px-3",
lg: "px-3.5",
xl: "px-3.5",
},
},
},
default: {
size: "sm",
color: "white",
variant: "outline",
loadingIcon: "i-heroicons-arrow-path-20-solid",
},
},

select: {
rounded: "rounded-md",
},

selectMenu: {
container: "z-20 group",
trigger: "flex items-center w-full",
width: "w-full",
height: "max-h-60",
base: "relative focus:outline-none overflow-y-auto scroll-py-1",
background: "bg-white dark:bg-gray-800",
shadow: "shadow-lg",
rounded: "rounded-md",
padding: "p-1",
ring: "ring-1 ring-gray-200 dark:ring-gray-700",
empty: "text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5",
option: {
base: "cursor-default select-none relative flex items-center justify-between gap-1",
rounded: "rounded-md",
padding: "px-1.5 py-1.5",
size: "text-sm",
color: "text-gray-900 dark:text-white",
container: "flex items-center gap-1.5 min-w-0",
active: "bg-gray-100 dark:bg-gray-900",
inactive: "",
selected: "pe-7",
disabled: "cursor-not-allowed opacity-50",
empty: "text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5",
icon: {
base: "flex-shrink-0 h-5 w-5",
active: "text-gray-900 dark:text-white",
inactive: "text-gray-400 dark:text-gray-500",
},
selectedIcon: {
wrapper: "absolute inset-y-0 end-0 flex items-center",
padding: "pe-2",
base: "h-5 w-5 text-gray-900 dark:text-white flex-shrink-0",
},
avatar: {
base: "flex-shrink-0",
size: "2xs",
},
chip: {
base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full",
},
create: "block truncate",
},
transition: {
leaveActiveClass: "transition ease-in duration-100",
leaveFromClass: "opacity-100",
leaveToClass: "opacity-0",
},
popper: {
placement: "bottom-end",
},
default: {
selectedIcon: "i-ph-check",
selectedIcon: "i-heroicons-check-20-solid",
clearSearchOnClose: false,
showCreateOptionWhen: "empty",
},
arrow: {
base: "invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2",
ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",
rounded: "before:rounded-sm",
background: "before:bg-white dark:before:bg-gray-700",
shadow: "before:shadow",
placement:
"group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1",
},
select: "inline-flex items-center text-left cursor-default",
input:
"block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none",
required: "absolute inset-0 w-px opacity-0 cursor-default",
label: "block truncate",
},

textarea: {
Expand All @@ -100,21 +339,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",
"text-gray-500 hover:text-gray-600 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: {
Expand Down Expand Up @@ -164,7 +403,7 @@ export default defineAppConfig({
list: {
base: "relative",
background: "bg-gray-100 dark:bg-gray-800",
rounded: "rounded-full",
rounded: "rounded-lg",
shadow: "",
padding: "p-1",
height: "h-10",
Expand All @@ -173,8 +412,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: {
Expand All @@ -186,7 +425,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",
},
Expand Down
2 changes: 1 addition & 1 deletion layouts/default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ provide("files", files);
<template>
<UHeader>
<template #logo>
<Logo class="h-8 hover:opacity-90" />
<Logo class="h-7 hover:opacity-90" />
</template>

<template #center>
Expand Down
Loading

0 comments on commit 6a8068b

Please sign in to comment.