diff --git a/bun.lockb b/bun.lockb index 3ac3d0b..954119d 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 1936e90..5087cd5 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ }, "dependencies": { "pinia": "^2.3.0", + "primevue": "^4.2.5", "vue": "^3.5.13" }, "devDependencies": { @@ -23,10 +24,15 @@ "@vue/eslint-config-prettier": "^10.1.0", "@vue/eslint-config-typescript": "^14.1.3", "@vue/tsconfig": "^0.7.0", + "autoprefixer": "^10.4.20", "eslint": "^9.14.0", "eslint-plugin-vue": "^9.30.0", "npm-run-all2": "^7.0.2", + "postcss": "^8.4.49", + "postcss-import": "^16.1.0", "prettier": "^3.3.3", + "tailwindcss": "^3.4.17", + "tailwindcss-primeui": "^0.3.4", "typescript": "~5.6.3", "vite": "^6.0.5", "vite-plugin-vue-devtools": "^7.6.8", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..a8c52ee --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,7 @@ +export default { + plugins: { + 'postcss-import': {}, + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/App.vue b/src/App.vue index d05208d..2ff1090 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,47 +1,12 @@ - - diff --git a/src/assets/base.css b/src/assets/base.css deleted file mode 100644 index 8816868..0000000 --- a/src/assets/base.css +++ /dev/null @@ -1,86 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/assets/logo.svg b/src/assets/logo.svg deleted file mode 100644 index 7565660..0000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/main.css b/src/assets/main.css deleted file mode 100644 index 36fb845..0000000 --- a/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/src/assets/primevue/accordion.css b/src/assets/primevue/accordion.css new file mode 100644 index 0000000..24b195a --- /dev/null +++ b/src/assets/primevue/accordion.css @@ -0,0 +1,64 @@ +.p-accordionpanel { + @apply flex flex-col border-b border-surface-200 dark:border-surface-700; +} + +.p-accordionheader { + @apply cursor-pointer disabled:cursor-auto flex items-center justify-between p-[1.125rem] font-semibold + bg-surface-0 dark:bg-surface-900 + text-surface-500 dark:text-surface-400 + transition-colors duration-200; +} + +.p-accordionpanel:first-child > .p-accordionheader { + @apply rounded-ss-md rounded-se-md; +} + +.p-accordionpanel:last-child > .p-accordionheader { + @apply rounded-ee-md rounded-es-md; +} + +.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader { + @apply rounded-ee-md rounded-es-md; +} + +.p-accordionheader-toggle-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible { + @apply outline outline-1 outline-offset-[-1px] outline-primary; +} + +.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) + .p-accordionheader:hover + .p-accordionheader-toggle-icon { + @apply text-surface-700 dark:text-surface-0; +} + +.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-accordionpanel:not(.p-disabled).p-accordionpanel-active + > .p-accordionheader + .p-accordionheader-toggle-icon { + @apply text-surface-700 dark:text-surface-0; +} + +.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-accordionpanel:not(.p-disabled).p-accordionpanel-active + > .p-accordionheader:hover + .p-accordionheader-toggle-icon { + @apply text-surface-700 dark:text-surface-0; +} + +.p-accordioncontent-content { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]; +} diff --git a/src/assets/primevue/autocomplete.css b/src/assets/primevue/autocomplete.css new file mode 100644 index 0000000..f79f452 --- /dev/null +++ b/src/assets/primevue/autocomplete.css @@ -0,0 +1,143 @@ +@import './inputtext'; +@import './chip'; + +.p-autocomplete { + @apply inline-flex; +} + +.p-autocomplete.p-disabled { + @apply opacity-100; +} + +.p-autocomplete-loader { + @apply absolute top-1/2 -mt-2 end-3; +} + +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader { + @apply end-[3.25rem]; +} + +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input { + @apply flex-auto w-[1%]; +} + +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input, +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple { + @apply rounded-e-none; +} + +.p-autocomplete-dropdown { + @apply cursor-pointer inline-flex items-center justify-center select-none overflow-hidden relative w-10 rounded-e-md + bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300 + text-surface-600 enabled:hover:text-surface-700 enabled:hover:active:text-surface-800 + dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600 + dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-autocomplete .p-autocomplete-overlay { + @apply min-w-full; +} + +.p-autocomplete-overlay { + @apply absolute top-0 left-0 rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-autocomplete-list-container { + @apply overflow-auto; +} + +.p-autocomplete-list { + @apply m-0 p-1 list-none flex flex-col gap-[2px]; +} + +.p-autocomplete-option { + @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center px-3 py-2 rounded-sm + text-surface-700 dark:text-surface-0 bg-transparent border-none + transition-colors duration-200; +} + +.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus { + @apply bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0; +} + +.p-autocomplete-option-selected { + @apply bg-highlight; +} + +.p-autocomplete-option-selected.p-focus { + @apply bg-highlight-emphasis; +} + +.p-autocomplete-option-group { + @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent; +} + +.p-autocomplete-input-multiple { + @apply m-0 list-none cursor-text overflow-hidden flex items-center flex-wrap + px-3 py-1 gap-1 text-surface-700 dark:text-surface-0 bg-surface-0 dark:bg-surface-950 + border border-surface-300 dark:border-surface-700 rounded-md w-full + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200 outline-none; +} + +.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple { + @apply border-surface-400 dark:border-surface-600; +} + +.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple { + @apply border-primary; +} + +.p-autocomplete.p-invalid .p-autocomplete-input-multiple { + @apply border-red-400 dark:border-red-300; +} + +.p-variant-filled.p-autocomplete-input-multiple { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-autocomplete.p-disabled .p-autocomplete-input-multiple { + @apply opacity-100 cursor-default bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400; +} + +.p-autocomplete-chip.p-chip { + @apply py-1 rounded-sm; +} + +.p-autocomplete-input-multiple:has(.p-autocomplete-chip) { + @apply px-1; +} + +.p-autocomplete-chip-item.p-focus .p-autocomplete-chip { + @apply bg-surface-200 text-surface-800 dark:bg-surface-700 dark:text-surface-0; +} + +.p-autocomplete-input-chip { + @apply flex-auto inline-flex py-1; +} + +.p-autocomplete-input-chip input { + @apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full text-inherit; +} + +.p-autocomplete-input-chip input::placeholder { + @apply text-surface-500 dark:text-surface-400; +} + +.p-autocomplete-empty-message { + @apply px-3 py-2; +} + +.p-autocomplete-fluid { + @apply flex; +} + +.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input { + @apply w-[1%]; +} diff --git a/src/assets/primevue/avatar.css b/src/assets/primevue/avatar.css new file mode 100644 index 0000000..3cf87b0 --- /dev/null +++ b/src/assets/primevue/avatar.css @@ -0,0 +1,50 @@ +.p-avatar { + @apply inline-flex items-center justify-center + w-8 h-8 text-base rounded-md + bg-surface-200 dark:bg-surface-700; +} + +.p-avatar-image { + @apply bg-transparent; +} + +.p-avatar-circle, +.p-avatar-circle img { + @apply rounded-full; +} + +.p-avatar-icon { + @apply text-base; +} + +.p-avatar img { + @apply w-full h-full; +} + +.p-avatar-lg { + @apply w-12 h-12 text-2xl; +} + +.p-avatar-lg .p-avatar-icon { + @apply text-2xl; +} + +.p-avatar-xl { + @apply w-16 h-16 text-[2rem]; +} + +.p-avatar-xl .p-avatar-icon { + @apply text-[2rem]; +} + +.p-avatar-group { + @apply flex items-center; +} + +.p-avatar-group .p-avatar + .p-avatar { + @apply -ms-4; +} + +.p-avatar-group .p-avatar { + @apply border-2 border-surface-200 dark:border-surface-700; +} diff --git a/src/assets/primevue/badge.css b/src/assets/primevue/badge.css new file mode 100644 index 0000000..0f78c56 --- /dev/null +++ b/src/assets/primevue/badge.css @@ -0,0 +1,49 @@ +.p-badge { + @apply inline-flex items-center justify-center rounded-md + py-0 px-2 text-xs font-bold min-w-6 h-6 + bg-primary text-primary-contrast; +} + +.p-badge-dot { + @apply min-w-2 h-2 rounded-full p-0; +} + +.p-badge-circle { + @apply p-0 rounded-full; +} + +.p-badge-secondary { + @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300; +} + +.p-badge-success { + @apply bg-green-500 dark:bg-green-400 text-white dark:text-green-950; +} + +.p-badge-info { + @apply bg-sky-500 dark:bg-sky-400 text-white dark:text-sky-950; +} + +.p-badge-warn { + @apply bg-orange-500 dark:bg-orange-400 text-white dark:text-orange-950; +} + +.p-badge-danger { + @apply bg-red-500 dark:bg-red-400 text-white dark:text-red-950; +} + +.p-badge-contrast { + @apply bg-surface-950 dark:bg-white text-white dark:text-surface-950; +} + +.p-badge-sm { + @apply text-[0.625rem] min-w-5 h-5; +} + +.p-badge-lg { + @apply text-sm min-w-7 h-7; +} + +.p-badge-xl { + @apply text-base min-w-8 h-8; +} diff --git a/src/assets/primevue/blockui.css b/src/assets/primevue/blockui.css new file mode 100644 index 0000000..36adade --- /dev/null +++ b/src/assets/primevue/blockui.css @@ -0,0 +1,15 @@ +.p-blockui { + @apply relative; +} + +.p-blockui-mask { + @apply rounded-md; +} + +.p-blockui-mask.p-overlay-mask { + @apply absolute; +} + +.p-blockui-mask-document.p-overlay-mask { + @apply fixed; +} diff --git a/src/assets/primevue/breadcrumb.css b/src/assets/primevue/breadcrumb.css new file mode 100644 index 0000000..3c80fff --- /dev/null +++ b/src/assets/primevue/breadcrumb.css @@ -0,0 +1,41 @@ +.p-breadcrumb { + @apply bg-surface-0 dark:bg-surface-900 p-4 overflow-x-auto; +} + +.p-breadcrumb-list { + @apply m-0 p-0 list-none flex items-center flex-nowrap gap-2; +} + +.p-breadcrumb-separator { + @apply flex items-center text-surface-400 dark:text-surface-500; +} + +.p-breadcrumb-separator-icon:dir(rtl) { + @apply rotate-180; +} + +.p-breadcrumb::-webkit-scrollbar { + @apply hidden; +} + +.p-breadcrumb-item-link { + @apply no-underline flex items-center gap-2 transition-colors duration-200 rounded-md + text-surface-500 dark:text-surface-400 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-breadcrumb-item-link:hover .p-breadcrumb-item-label { + @apply text-surface-700 dark:text-surface-0; +} + +.p-breadcrumb-item-label { + @apply transition-colors duration-200; +} + +.p-breadcrumb-item-icon { + @apply text-surface-400 dark:text-surface-500 transition-colors duration-200; +} + +.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon { + @apply text-surface-500 dark:text-surface-400; +} diff --git a/src/assets/primevue/button.css b/src/assets/primevue/button.css new file mode 100644 index 0000000..e66647d --- /dev/null +++ b/src/assets/primevue/button.css @@ -0,0 +1,333 @@ +@import './badge'; + +.p-button { + @apply inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative + bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast + border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + px-3 py-2 transition-colors duration-200 gap-2 rounded-md + disabled:cursor-default; +} + +.p-button-icon-right { + @apply order-1; +} + +.p-button-icon-right:dir(rtl) { + @apply order-[-1]; +} + +.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl) { + @apply order-1; +} + +.p-button-icon-bottom { + @apply order-2; +} + +.p-button-icon-only { + @apply w-10 px-0 gap-0; +} + +.p-button-icon-only.p-button-rounded { + @apply rounded-full h-10; +} + +.p-button-icon-only .p-button-label { + @apply invisible w-0; +} + +.p-button-sm { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-button-sm .p-button-icon { + @apply text-sm; +} + +.p-button-lg { + @apply text-[1.125rem] px-[0.875rem] py-[0.625rem]; +} + +.p-button-lg .p-button-icon { + @apply text-[1.125rem]; +} + +.p-button-vertical { + @apply flex-col; +} + +.p-button-label { + @apply font-medium; +} + +.p-button-fluid { + @apply w-full; +} + +.p-button-fluid.p-button-icon-only { + @apply w-10; +} + +.p-button .p-badge { + @apply min-w-4 h-4 leading-4; +} + +.p-button-raised { + @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]; +} + +.p-button-rounded { + @apply rounded-[2rem]; +} + +.p-button-secondary { + @apply bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300 + border-surface-100 enabled:hover:border-surface-200 enabled:active:border-surface-300 + text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800 + dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600 + dark:border-surface-800 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-600 + dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300; +} + +.p-button-success { + @apply bg-green-500 enabled:hover:bg-green-600 enabled:active:bg-green-700 + border-green-500 enabled:hover:border-green-600 enabled:active:border-green-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-green-400 dark:enabled:hover:bg-green-300 dark:enabled:active:bg-green-200 + dark:border-green-400 dark:enabled:hover:border-green-300 dark:enabled:active:border-green-200 + dark:text-green-950 dark:enabled:hover:text-green-950 dark:enabled:active:text-green-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-green-500 dark:focus-visible:outline-green-400; +} + +.p-button-info { + @apply bg-sky-500 enabled:hover:bg-sky-600 enabled:active:bg-sky-700 + border-sky-500 enabled:hover:border-sky-600 enabled:active:border-sky-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-sky-400 dark:enabled:hover:bg-sky-300 dark:enabled:active:bg-sky-200 + dark:border-sky-400 dark:enabled:hover:border-sky-300 dark:enabled:active:border-sky-200 + dark:text-sky-950 dark:enabled:hover:text-sky-950 dark:enabled:active:text-sky-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400; +} + +.p-button-warn { + @apply bg-orange-500 enabled:hover:bg-orange-600 enabled:active:bg-orange-700 + border-orange-500 enabled:hover:border-orange-600 enabled:active:border-orange-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-orange-400 dark:enabled:hover:bg-orange-300 dark:enabled:active:bg-orange-200 + dark:border-orange-400 dark:enabled:hover:border-orange-300 dark:enabled:active:border-orange-200 + dark:text-orange-950 dark:enabled:hover:text-orange-950 dark:enabled:active:text-orange-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-orange-500 dark:focus-visible:outline-orange-400; +} + +.p-button-help { + @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700 + border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200 + dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200 + dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400; +} + +.p-button-help { + @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700 + border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200 + dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200 + dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400; +} + +.p-button-danger { + @apply bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700 + border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200 + dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200 + dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-red-500 dark:focus-visible:outline-red-400; +} + +.p-button-contrast { + @apply bg-surface-950 enabled:hover:bg-surface-900 enabled:active:bg-surface-800 + border-surface-950 enabled:hover:border-surface-900 enabled:active:border-surface-800 + text-white enabled:hover:text-white enabled:active:text-white + dark:bg-surface-0 dark:enabled:hover:bg-surface-100 dark:enabled:active:bg-surface-200 + dark:border-surface-100 dark:enabled:hover:border-surface-200 dark:enabled:active:border-surface-300 + dark:text-surface-950 dark:enabled:hover:text-surface-950 dark:enabled:active:text-surface-950 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 + focus-visible:outline-surface-950 dark:focus-visible:outline-surface-0; +} + +.p-button-outlined { + @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100 + border-primary-200 enabled:hover:border-primary-200 enabled:active:border-primary-200 + text-primary enabled:hover:text-primary enabled:active:text-primary + dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15 + dark:border-primary-700 dark:enabled:hover:border-primary-700 dark:enabled:active:border-primary-700 + dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary; +} + +.p-button-outlined.p-button-secondary { + @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100 + border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200 + text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500 + dark:bg-transparent dark:enabled:hover:bg-white/5 dark:enabled:active:bg-white/15 + dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700 + dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400; +} + +.p-button-outlined.p-button-success { + @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100 + border-green-200 enabled:hover:border-green-200 enabled:active:border-green-200 + text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500 + dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15 + dark:border-green-700 dark:enabled:hover:border-green-700 dark:enabled:active:border-green-700 + dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400; +} + +.p-button-outlined.p-button-info { + @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100 + border-sky-200 enabled:hover:border-sky-200 enabled:active:border-sky-200 + text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500 + dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15 + dark:border-sky-700 dark:enabled:hover:border-sky-700 dark:enabled:active:border-sky-700 + dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400; +} + +.p-button-outlined.p-button-warn { + @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100 + border-orange-200 enabled:hover:border-orange-200 enabled:active:border-orange-200 + text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500 + dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15 + dark:border-orange-700 dark:enabled:hover:border-orange-700 dark:enabled:active:border-orange-700 + dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400; +} + +.p-button-outlined.p-button-help { + @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100 + border-purple-200 enabled:hover:border-purple-200 enabled:active:border-purple-200 + text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500 + dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15 + dark:border-purple-700 dark:enabled:hover:border-purple-700 dark:enabled:active:border-purple-700 + dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400; +} + +.p-button-outlined.p-button-danger { + @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100 + border-red-200 enabled:hover:border-red-200 enabled:active:border-red-200 + text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500 + dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15 + dark:border-red-700 dark:enabled:hover:border-red-700 dark:enabled:active:border-red-700 + dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400; +} + +.p-button-outlined.p-button-contrast { + @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100 + border-surface-700 enabled:hover:border-surface-700 enabled:active:border-surface-700 + text-surface-950 enabled:hover:text-surface-950 enabled:active:text-surface-950 + dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700 + dark:border-surface-500 dark:enabled:hover:border-surface-500 dark:enabled:active:border-surface-500 + dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0; +} + +.p-button-outlined.p-button-plain { + @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100 + border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200 + text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700 + dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700 + dark:border-surface-600 dark:enabled:hover:border-surface-600 dark:enabled:active:border-surface-600 + dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0; +} + +.p-button-text { + @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-primary enabled:hover:text-primary enabled:active:text-primary + dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary; +} + +.p-button-text.p-button-secondary { + @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500 + dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400; +} + +.p-button-text.p-button-success { + @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500 + dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400; +} + +.p-button-text.p-button-info { + @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500 + dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400; +} + +.p-button-text.p-button-warn { + @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500 + dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400; +} + +.p-button-text.p-button-help { + @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500 + dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400; +} + +.p-button-text.p-button-danger { + @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500 + dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400; +} + +.p-button-text.p-button-plain { + @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100 + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700 + dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700 + dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent + dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0; +} + +.p-button-link { + @apply bg-transparent enabled:hover:bg-transparent enabled:active:bg-transparent + border-transparent enabled:hover:border-transparent enabled:active:border-transparent + text-primary enabled:hover:text-primary enabled:active:text-primary; +} + +.p-button-link:not(:disabled):hover .p-button-label { + @apply underline; +} diff --git a/src/assets/primevue/buttongroup.css b/src/assets/primevue/buttongroup.css new file mode 100644 index 0000000..a3404df --- /dev/null +++ b/src/assets/primevue/buttongroup.css @@ -0,0 +1,19 @@ +.p-buttongroup .p-button { + @apply m-0 focus-visible:relative focus-visible:z-10; +} + +.p-buttongroup .p-button:not(:last-child) { + @apply border-r-0; +} + +.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) { + @apply rounded-none; +} + +.p-buttongroup .p-button:first-of-type:not(:only-of-type) { + @apply rounded-e-none; +} + +.p-buttongroup .p-button:last-of-type:not(:only-of-type) { + @apply rounded-s-none; +} diff --git a/src/assets/primevue/card.css b/src/assets/primevue/card.css new file mode 100644 index 0000000..79dd181 --- /dev/null +++ b/src/assets/primevue/card.css @@ -0,0 +1,22 @@ +.p-card { + @apply flex flex-col rounded-xl + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + shadow-[0_1px_3px_0_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]; +} + +.p-card-caption { + @apply flex flex-col gap-2; +} + +.p-card-body { + @apply p-5 flex flex-col gap-2; +} + +.p-card-title { + @apply font-medium text-xl; +} + +.p-card-subtitle { + @apply text-surface-500 dark:text-surface-400; +} diff --git a/src/assets/primevue/carousel.css b/src/assets/primevue/carousel.css new file mode 100644 index 0000000..aabc15c --- /dev/null +++ b/src/assets/primevue/carousel.css @@ -0,0 +1,64 @@ +@import './button'; + +.p-carousel { + @apply flex flex-col; +} + +.p-carousel-content-container { + @apply flex flex-col overflow-auto; +} + +.p-carousel-content { + @apply flex flex-row gap-1; +} + +.p-carousel-content:dir(rtl) { + @apply flex-row-reverse; +} + +.p-carousel-viewport { + @apply overflow-hidden w-full; +} + +.p-carousel-item-list { + @apply flex flex-row; +} + +.p-carousel-prev-button, +.p-carousel-next-button { + @apply self-center flex-shrink-0; +} + +.p-carousel-indicator-list { + @apply flex flex-row justify-center flex-wrap p-4 gap-2 m-0 list-none; +} + +.p-carousel-indicator-list:dir(rtl) { + @apply rtl:flex-row-reverse; +} + +.p-carousel-indicator-button { + @apply flex items-center justify-center w-8 h-2 border-none rounded-md p-0 m-0 select-none cursor-pointer transition-colors duration-200 + bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-carousel-indicator-active .p-carousel-indicator-button { + @apply bg-primary; +} + +.p-carousel-vertical .p-carousel-content { + @apply flex-col; +} + +.p-carousel-vertical .p-carousel-item-list { + @apply flex-col h-full; +} + +.p-items-hidden .p-carousel-item { + @apply invisible; +} + +.p-items-hidden .p-carousel-item.p-carousel-item-active { + @apply visible; +} diff --git a/src/assets/primevue/cascadeselect.css b/src/assets/primevue/cascadeselect.css new file mode 100644 index 0000000..066e370 --- /dev/null +++ b/src/assets/primevue/cascadeselect.css @@ -0,0 +1,177 @@ +.p-cascadeselect { + @apply inline-flex cursor-pointer relative select-none rounded-md + bg-surface-0 dark:bg-surface-950 + border border-surface-300 dark:border-surface-700 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200; +} + +.p-cascadeselect:not(.p-disabled):hover { + @apply border-surface-400 dark:border-surface-600; +} + +.p-cascadeselect:not(.p-disabled).p-focus { + @apply border-primary; +} + +.p-cascadeselect.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-cascadeselect.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-cascadeselect.p-disabled { + @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default; +} + +.p-cascadeselect-dropdown { + @apply flex items-center justify-center shrink-0 bg-transparent + text-surface-500 dark:text-surface-400 w-10 rounded-e-md; +} + +.p-cascadeselect-clear-icon { + @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10; +} + +.p-cascadeselect-label { + @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%] + py-2 px-3 overflow-ellipsis + text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none; +} + +.p-cascadeselect-label.p-placeholder { + @apply text-surface-500 dark:text-surface-400; +} + +.p-cascadeselect.p-disabled .p-cascadeselect-label { + @apply text-surface-500 dark:text-surface-400; +} + +.p-cascadeselect-label-empty { + @apply overflow-hidden opacity-0; +} + +.p-cascadeselect-fluid { + @apply flex; +} + +.p-cascadeselect-fluid .p-cascadeselect-label { + @apply w-[1%]; +} + +.p-cascadeselect-overlay { + @apply absolute top-0 left-0 rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-cascadeselect .p-cascadeselect-overlay { + @apply min-w-full; +} + +.p-cascadeselect-option-list { + @apply hidden min-w-full absolute z-10; +} + +.p-cascadeselect-list { + @apply min-w-full m-0 list-none p-1 flex flex-col gap-[2px]; +} + +.p-cascadeselect-option { + @apply cursor-pointer font-normal whitespace-nowrap + text-surface-700 dark:text-surface-0 bg-transparent border-none + transition-colors duration-200 rounded-sm; +} + +.p-cascadeselect-option-active { + @apply overflow-visible; +} + +.p-cascadeselect-option-active > .p-cascadeselect-option-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus + > .p-cascadeselect-option-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus + .p-cascadeselect-group-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-cascadeselect-option-selected .p-cascadeselect-option-content { + @apply bg-highlight; +} + +.p-cascadeselect-option-selected.p-focus { + @apply bg-highlight-emphasis; +} + +.p-cascadeselect-option-active > .p-cascadeselect-option-list { + @apply block start-full top-0; +} + +.p-cascadeselect-option-content { + @apply flex items-center justify-between overflow-hidden relative px-3 py-2; +} + +.p-cascadeselect-group-icon { + @apply text-sm w-[0.875rem] h-[0.875rem] text-surface-400 dark:text-surface-500; +} + +.p-cascadeselect-group-icon:dir(rtl) { + @apply rotate-180; +} + +.p-cascadeselect-mobile-active .p-cascadeselect-option-content { + @apply rounded-sm; +} + +.p-cascadeselect-mobile-active-active .p-cascadeselect-list { + @apply flex flex-col top-full start-0 z-10; +} + +.p-cascadeselect-mobile-active + .p-cascadeselect-list + > .p-cascadeselect-option + > .p-cascadeselect-option-content + .p-cascadeselect-group-icon { + @apply ms-auto transition-transform duration-200; +} + +.p-cascadeselect-mobile-active .p-cascadeselect-list .p-cascadeselect-group-icon { + @apply transition-transform duration-200 rotate-90; +} + +.p-cascadeselect-mobile-active + .p-cascadeselect-option-active + > .p-cascadeselect-option-content + .p-cascadeselect-group-icon { + @apply -rotate-90; +} + +.p-cascadeselect-mobile-active .p-cascadeselect-option-list { + @apply static shadow-none border-none ps-4; +} + +.p-cascadeselect-sm .p-cascadeselect-label { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon { + @apply text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-cascadeselect-lg .p-cascadeselect-label { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} + +.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon { + @apply text-lg w-[1.125rem] h-[1.125rem]; +} diff --git a/src/assets/primevue/checkbox.css b/src/assets/primevue/checkbox.css new file mode 100644 index 0000000..07c300b --- /dev/null +++ b/src/assets/primevue/checkbox.css @@ -0,0 +1,84 @@ +.p-checkbox { + @apply relative inline-flex select-none w-5 h-5 align-bottom; +} + +.p-checkbox-input { + @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10 + border border-transparent rounded-sm; +} + +.p-checkbox-box { + @apply flex justify-center items-center rounded-sm w-5 h-5 + border border-surface-300 dark:border-surface-700 + bg-surface-0 dark:bg-surface-950 + transition-colors duration-200 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]; +} + +.p-checkbox-icon { + @apply text-surface-700 dark:text-surface-0 + text-sm w-[0.875rem] h-[0.875rem] + transition-colors duration-200; +} + +.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + @apply border-surface-400 dark:border-surface-600; +} + +.p-checkbox-checked .p-checkbox-box { + @apply border-primary bg-primary; +} + +.p-checkbox-checked .p-checkbox-icon { + @apply text-primary-contrast; +} + +.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + @apply bg-primary-emphasis border-primary-emphasis; +} + +.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon { + @apply text-primary-contrast; +} + +.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-checkbox.p-invalid > .p-checkbox-box { + @apply border-red-400 dark:border-red-300; +} + +.p-checkbox.p-variant-filled .p-checkbox-box { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-checkbox.p-disabled { + @apply opacity-100; +} + +.p-checkbox.p-disabled .p-checkbox-box { + @apply bg-surface-200 dark:bg-surface-400 border-surface-300 dark:border-surface-700; +} + +.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + @apply text-surface-700 dark:text-surface-900; +} + +.p-checkbox-sm, +.p-checkbox-sm .p-checkbox-box { + @apply w-4 h-4; +} + +.p-checkbox-sm .p-checkbox-icon { + @apply w-3 h-3; +} + +.p-checkbox-lg, +.p-checkbox-lg .p-checkbox-box { + @apply w-6 h-6; +} + +.p-checkbox-lg .p-checkbox-icon { + @apply w-4 h-4; +} diff --git a/src/assets/primevue/chip.css b/src/assets/primevue/chip.css new file mode 100644 index 0000000..233c422 --- /dev/null +++ b/src/assets/primevue/chip.css @@ -0,0 +1,27 @@ +.p-chip { + @apply inline-flex items-center rounded-2xl gap-2 px-3 py-2 + bg-surface-100 dark:bg-surface-800 + text-surface-800 dark:text-surface-0; +} + +.p-chip-icon { + @apply text-surface-800 dark:bg-surface-0 text-base w-4 h-4; +} + +.p-chip-image { + @apply rounded-full w-8 h-8 -ms-2; +} + +.p-chip:has(.p-chip-remove-icon) { + @apply pe-2; +} + +.p-chip:has(.p-chip-image) { + @apply pt-1 pb-1; +} + +.p-chip-remove-icon { + @apply cursor-pointer text-base w-4 h-4 rounded-full + text-surface-800 dark:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} diff --git a/src/assets/primevue/colorpicker.css b/src/assets/primevue/colorpicker.css new file mode 100644 index 0000000..60a1882 --- /dev/null +++ b/src/assets/primevue/colorpicker.css @@ -0,0 +1,47 @@ +.p-colorpicker { + @apply inline-block relative; +} + +.p-colorpicker-dragging { + @apply cursor-pointer; +} + +.p-colorpicker-preview { + @apply w-6 h-6 p-0 border-none rounded-md transition-colors duration-200 cursor-pointer disabled:cursor-auto + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-colorpicker-panel { + @apply bg-surface-800 dark:bg-surface-900 + border border-surface-900 dark:border-surface-700 + rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] + w-[193px] h-[166px] absolute top-0 start-0; +} + +.p-colorpicker-panel-inline { + @apply static shadow-none; +} + +.p-colorpicker-content { + @apply relative; +} + +.p-colorpicker-color-selector { + @apply w-[150px] h-[150px] top-[8px] start-[8px] absolute; +} + +.p-colorpicker-color-background { + @apply w-full h-full bg-[linear-gradient(to_top,#000_0%,rgba(0,0,0,0)_100%),linear-gradient(to_right,#fff_0%,rgba(255,255,255,0)_100%)]; +} + +.p-colorpicker-color-handle { + @apply absolute top-0 start-[150px] rounded-full w-[10px] h-[10px] border border-surface-0 -mt-[5px] me-0 mb-0 -ms-[5px] cursor-pointer opacity-85; +} + +.p-colorpicker-hue { + @apply w-[17px] h-[150px] top-[8px] start-[167px] absolute opacity-85 bg-[linear-gradient(0deg,red_0,#ff0_17%,#0f0_33%,#0ff_50%,#00f_67%,#f0f_83%,red)]; +} + +.p-colorpicker-hue-handle { + @apply absolute top-[150px] start-0 w-[21px] -ms-[2px] -mt-[5px] h-[10px] border-2 opacity-85 border-surface-0 cursor-pointer; +} diff --git a/src/assets/primevue/common.css b/src/assets/primevue/common.css new file mode 100644 index 0000000..0a325b6 --- /dev/null +++ b/src/assets/primevue/common.css @@ -0,0 +1,81 @@ +.p-connected-overlay-enter-from { + @apply opacity-0 scale-y-75; +} + +.p-connected-overlay-leave-to { + @apply opacity-0; +} + +.p-connected-overlay-enter-active { + @apply transition-[opacity,transform] duration-150 ease-[cubic-bezier(0,0,0.2,1)]; +} + +.p-connected-overlay-leave-active { + @apply transition-opacity duration-100 ease-linear; +} + +.p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + @apply max-h-0; +} + +.p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + @apply max-h-[1000px]; +} + +.p-toggleable-content-leave-active { + @apply overflow-hidden transition-[max-height] animate-duration-[450ms] ease-[cubic-bezier(0,1,0,1)]; +} + +.p-toggleable-content-enter-active { + @apply overflow-hidden transition-[max-height] duration-1000 ease-in-out; +} + +.p-disabled, +.p-disabled * { + @apply cursor-default pointer-events-none select-none; +} + +.p-disabled, +.p-component:disabled { + @apply opacity-60; +} + +.pi { + @apply text-base; +} + +.p-icon { + @apply w-4 h-4; +} + +.p-overlay-mask { + @apply bg-black/50 text-surface-200 transition-colors duration-150 fixed top-0 start-0 w-full h-full; +} + +.p-overlay-mask-enter { + animation: p-overlay-mask-enter-animation 150ms forwards; +} + +.p-overlay-mask-leave { + animation: p-overlay-mask-leave-animation 150ms forwards; +} + +@keyframes p-overlay-mask-enter-animation { + from { + background: transparent; + } + to { + background: rgba(0, 0, 0, 0.5); + } +} + +@keyframes p-overlay-mask-leave-animation { + from { + background: rgba(0, 0, 0, 0.5); + } + to { + background: transparent; + } +} diff --git a/src/assets/primevue/confirmdialog.css b/src/assets/primevue/confirmdialog.css new file mode 100644 index 0000000..3b9160c --- /dev/null +++ b/src/assets/primevue/confirmdialog.css @@ -0,0 +1,10 @@ +@import './dialog'; +@import './button'; + +.p-confirmdialog .p-dialog-content { + @apply flex items-center gap-4; +} + +.p-confirmdialog-icon { + @apply text-surface-700 dark:text-surface-0 text-[2rem] h-8 w-8; +} diff --git a/src/assets/primevue/confirmpopup.css b/src/assets/primevue/confirmpopup.css new file mode 100644 index 0000000..fd96600 --- /dev/null +++ b/src/assets/primevue/confirmpopup.css @@ -0,0 +1,66 @@ +@import './button'; + +.p-confirmpopup { + @apply absolute mt-[10px] top-0 left-0 + border border-surface-200 dark:border-surface-700 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] + before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none + before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700 + after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none + after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900; +} + +.p-confirmpopup-content { + @apply flex items-center p-3 gap-4; +} + +.p-confirmpopup-icon { + @apply text-2xl w-6 h-6 text-surface-700 dark:text-surface-0; +} + +.p-confirmpopup-footer { + @apply flex justify-end gap-2 pt-0 px-3 pb-3; +} + +.p-confirmpopup-footer button { + @apply w-auto; +} + +.p-confirmpopup-footer button:last-child { + @apply m-0; +} + +.p-confirmpopup-flipped { + @apply -mt-[10px] mb-[10px]; +} + +.p-confirmpopup-enter-from { + @apply opacity-0 scale-y-75; +} + +.p-confirmpopup-leave-to { + @apply opacity-0; +} + +.p-confirmpopup-enter-active { + @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]; +} + +.p-confirmpopup-leave-active { + @apply transition-opacity duration-100 ease-linear; +} + +.p-confirmpopup-flipped:after, +.p-confirmpopup-flipped:before { + @apply bottom-auto top-full; +} + +.p-confirmpopup-flipped:after { + @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900; +} + +.p-confirmpopup-flipped:before { + @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700; +} diff --git a/src/assets/primevue/contextmenu.css b/src/assets/primevue/contextmenu.css new file mode 100644 index 0000000..1e329de --- /dev/null +++ b/src/assets/primevue/contextmenu.css @@ -0,0 +1,106 @@ +.p-contextmenu { + @apply bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + rounded-md min-w-52 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-contextmenu-root-list, +.p-contextmenu-submenu { + @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]; +} + +.p-contextmenu-submenu { + @apply absolute min-w-full z-10 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-contextmenu-item { + @apply relative; +} + +.p-contextmenu-item-content { + @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0; +} + +.p-contextmenu-item-link { + @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit + px-3 py-2 gap-2 select-none outline-none; +} + +.p-contextmenu-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-contextmenu-submenu-icon { + @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-contextmenu-item.p-focus > .p-contextmenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-item:not(.p-disabled) + > .p-contextmenu-item-content:hover + .p-contextmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-item-active > .p-contextmenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-contextmenu-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-contextmenu-enter-from, +.p-contextmenu-leave-active { + @apply opacity-0; +} + +.p-contextmenu-enter-active { + @apply transition-opacity duration-[250ms]; +} + +.p-contextmenu-mobile .p-contextmenu-submenu { + @apply static shadow-none border-none ps-4 pe-0; +} + +.p-contextmenu-mobile .p-contextmenu-submenu-icon { + @apply transition-transform duration-200 rotate-90; +} + +.p-contextmenu-mobile + .p-contextmenu-item-active + > .p-contextmenu-item-content + .p-contextmenu-submenu-icon { + @apply -rotate-90; +} diff --git a/src/assets/primevue/datatable.css b/src/assets/primevue/datatable.css new file mode 100644 index 0000000..e61beb6 --- /dev/null +++ b/src/assets/primevue/datatable.css @@ -0,0 +1,427 @@ +@import './paginator'; + +.p-datatable { + @apply relative; +} + +.p-datatable-table { + @apply border-spacing-0 w-full; +} + +.p-datatable-scrollable > .p-datatable-table-container { + @apply relative; +} + +.p-datatable-scrollable-table > .p-datatable-thead { + @apply top-0 z-10; +} + +.p-datatable-scrollable-table > .p-datatable-frozen-tbody { + @apply sticky z-10; +} + +.p-datatable-scrollable-table > .p-datatable-tfoot { + @apply bottom-0 z-10; +} + +.p-datatable-scrollable .p-datatable-frozen-column { + @apply sticky bg-surface-0 dark:bg-surface-900; +} + +.p-datatable-scrollable th.p-datatable-frozen-column { + @apply z-10; +} + +.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead, +.p-datatable-scrollable + > .p-datatable-table-container + > .p-virtualscroller + > .p-datatable-table + > .p-datatable-thead { + @apply bg-surface-0 dark:bg-surface-900; +} + +.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot, +.p-datatable-scrollable + > .p-datatable-table-container + > .p-virtualscroller + > .p-datatable-table + > .p-datatable-tfoot { + @apply bg-surface-0 dark:bg-surface-900; +} + +.p-datatable-flex-scrollable { + @apply flex flex-col h-full; +} + +.p-datatable-flex-scrollable > .p-datatable-table-container { + @apply flex flex-col flex-1 h-full; +} + +.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header { + @apply sticky z-10; +} + +.p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + @apply overflow-hidden whitespace-nowrap; +} + +.p-datatable-resizable-table + > .p-datatable-thead + > tr + > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) { + @apply bg-clip-padding relative; +} + +.p-datatable-resizable-table-fit + > .p-datatable-thead + > tr + > th.p-datatable-resizable-column:last-child + .p-datatable-column-resizer { + @apply hidden; +} + +.p-datatable-column-resizer { + @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent; +} + +.p-datatable-column-header-content { + @apply flex items-center gap-2; +} + +.p-datatable-column-resize-indicator { + @apply w-px absolute z-10 hidden bg-primary; +} + +.p-datatable-row-reorder-indicator-up, +.p-datatable-row-reorder-indicator-down { + @apply absolute hidden; +} + +.p-datatable-reorderable-column, +.p-datatable-reorderable-row-handle { + @apply cursor-move; +} + +.p-datatable-mask { + @apply absolute flex items-center justify-center z-20; +} + +.p-datatable-inline-filter { + @apply flex items-center w-full gap-2; +} + +.p-datatable-inline-filter .p-datatable-filter-element-container { + @apply flex-auto w-[1%]; +} + +.p-datatable-filter-overlay { + @apply bg-surface-0 dark:bg-surface-900 rounded-md min-w-52 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-datatable-filter-constraint-list { + @apply m-0 list-none flex flex-col p-1 gap-[2px]; +} + +.p-datatable-filter-constraint { + @apply px-3 py-2 rounded-sm cursor-pointer transition-colors duration-200 text-surface-700 dark:text-surface-0; +} + +.p-datatable-filter-constraint-selected { + @apply bg-highlight; +} + +.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-datatable-filter-constraint:focus-visible { + @apply outline-none bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-datatable-filter-constraint-selected:focus-visible { + @apply bg-highlight-emphasis; +} + +.p-datatable-filter-constraint-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-datatable-popover-filter { + @apply inline-flex ms-auto; +} + +.p-datatable-filter-overlay-popover { + @apply flex flex-col gap-2 + bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 rounded-md p-3 min-w-52 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-datatable-filter-operator-dropdown { + @apply w-full; +} + +.p-datatable-filter-rule-list, +.p-datatable-filter-rule { + @apply flex flex-col gap-2; +} + +.p-datatable-filter-rule { + @apply border-b border-surface-200 dark:border-surface-700 last:border-b-0 pb-2 last:pb-0; +} + +.p-datatable-filter-add-rule-button { + @apply w-full; +} + +.p-datatable-filter-remove-rule-button { + @apply w-full; +} + +.p-datatable-filter-buttonbar { + @apply p-0 flex items-center justify-between; +} + +.p-datatable-virtualscroller-spacer { + @apply flex; +} + +.p-datatable .p-virtualscroller .p-virtualscroller-loading { + @apply !transform-none min-h-0 sticky top-0 start-0; +} + +.p-datatable-paginator-top { + @apply border-b border-surface-200 dark:border-surface-700; +} + +.p-datatable-paginator-bottom { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-datatable-header { + @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-datatable-footer { + @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-datatable-header-cell { + @apply py-3 px-4 font-normal text-start transition-colors duration-200 + border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-datatable-column-title { + @apply font-semibold; +} + +.p-datatable-tbody > tr { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200; +} + +.p-datatable-tbody > tr > td { + @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800; +} + +.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-datatable-tbody > tr.p-datatable-row-selected { + @apply bg-highlight; +} + +.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td { + @apply border-b-primary-100 dark:border-b-primary-900; +} + +.p-datatable-tbody > tr.p-datatable-row-selected > td { + @apply border-b-primary-100 dark:border-b-primary-900; +} + +.p-datatable-tbody > tr:focus-visible, +.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected { + @apply outline outline-1 -outline-offset-1 outline-primary; +} + +.p-datatable-tfoot > tr > td { + @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-datatable-column-footer { + @apply font-semibold; +} + +.p-datatable-sortable-column { + @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary; +} + +.p-datatable-column-title, +.p-datatable-sort-icon, +.p-datatable-sort-badge { + @apply align-middle; +} + +.p-datatable-sort-icon { + @apply text-surface-500 dark:text-surface-400 transition-colors duration-200; +} + +.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon { + @apply text-surface-600 dark:text-surface-300; +} + +.p-datatable-column-sorted { + @apply bg-highlight; +} + +.p-datatable-column-sorted .p-datatable-sort-icon { + @apply bg-highlight; +} + +.p-datatable-hoverable .p-datatable-selectable-row { + @apply cursor-pointer; +} + +.p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + @apply shadow-[inset_0_2px_0_0_theme(colors.primary)]; +} + +.p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { + @apply shadow-[inset_0_-2px_0_0_theme(colors.primary)]; +} + +.p-datatable-loading-icon { + @apply text-[2rem] w-8 h-8; +} + +.p-datatable-gridlines .p-datatable-header { + @apply border-t border-x; +} + +.p-datatable-gridlines .p-datatable-footer { + @apply border-b border-x; +} + +.p-datatable-gridlines .p-datatable-paginator-top { + @apply border-t border-x; +} + +.p-datatable-gridlines .p-datatable-paginator-bottom { + @apply border-b border-x; +} + +.p-datatable-gridlines .p-datatable-thead > tr > th { + @apply border-t border-x last:border; +} + +.p-datatable-gridlines .p-datatable-tbody > tr > td { + @apply border-t border-s last:border-r; +} + +.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td { + @apply border-y border-s last:border; +} + +.p-datatable-gridlines .p-datatable-tfoot > tr > td { + @apply border-y border-s last:border; +} + +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td { + @apply border-b border-s last:border-r; +} + +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) + .p-datatable-tbody + > tr + > td { + @apply border-b border-s last:border-r; +} + +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) + .p-datatable-tbody + > tr:last-child + > td { + @apply border-s last:border-r; +} + +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { + @apply bg-surface-50 dark:bg-surface-950; +} + +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-datatable-row-selected { + @apply bg-highlight; +} + +.p-datatable.p-datatable-sm .p-datatable-header { + @apply py-1 px-2; +} + +.p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + @apply py-1 px-2; +} + +.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + @apply py-1 px-2; +} + +.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + @apply py-1 px-2; +} + +.p-datatable.p-datatable-sm .p-datatable-footer { + @apply py-1 px-2; +} + +.p-datatable.p-datatable-lg .p-datatable-header { + @apply py-4 px-5; +} + +.p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + @apply py-4 px-5; +} + +.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { + @apply py-4 px-5; +} + +.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { + @apply py-4 px-5; +} + +.p-datatable.p-datatable-lg .p-datatable-footer { + @apply py-4 px-5; +} + +.p-datatable-row-toggle-button { + @apply inline-flex items-center justify-center overflow-hidden relative w-7 h-7 cursor-pointer select-none + transition-colors duration-200 rounded-full border-none bg-transparent + text-surface-500 enabled:hover:bg-surface-100 enabled:hover:text-surface-700 + dark:text-surface-400 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover { + @apply bg-surface-0 dark:bg-surface-900 text-primary; +} + +.p-datatable-row-toggle-icon:dir(rtl) { + @apply rotate-180; +} diff --git a/src/assets/primevue/dataview.css b/src/assets/primevue/dataview.css new file mode 100644 index 0000000..370b9dc --- /dev/null +++ b/src/assets/primevue/dataview.css @@ -0,0 +1,29 @@ +@import './paginator'; + +.p-dataview { + @apply border-none; +} + +.p-dataview-header { + @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-dataview-content { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-dataview-footer { + @apply py-3 px-4 border-t border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-dataview-paginator-top { + @apply border-b border-surface-200 dark:border-surface-700; +} + +.p-dataview-paginator-bottom { + @apply border-t border-surface-200 dark:border-surface-700; +} diff --git a/src/assets/primevue/datepicker.css b/src/assets/primevue/datepicker.css new file mode 100644 index 0000000..fe12910 --- /dev/null +++ b/src/assets/primevue/datepicker.css @@ -0,0 +1,211 @@ +@import './button'; +@import './inputtext'; + +.p-datepicker { + @apply inline-flex max-w-full; +} + +.p-datepicker-input { + @apply flex-auto w-[1%]; +} + +.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input { + @apply rounded-e-none; +} + +.p-datepicker-dropdown { + @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none + w-10 rounded-e-md border border-s-0 border-surface-300 dark:border-surface-700 + bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300 + text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800 + dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600 + dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-datepicker:has(.p-datepicker-input-icon-container) { + @apply relative; +} + +.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input { + @apply pe-10; +} + +.p-datepicker-input-icon-container { + @apply cursor-pointer absolute top-1/2 end-3 -mt-2 text-surface-400; +} + +.p-datepicker-fluid { + @apply flex; +} + +.p-datepicker-fluid .p-datepicker-input { + @apply w-[1%]; +} + +.p-datepicker .p-datepicker-panel { + @apply min-w-full; +} + +.p-datepicker-panel { + @apply w-auto p-3 rounded-md + border border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-datepicker-panel-inline { + @apply inline-block overflow-x-auto shadow-none; +} + +.p-datepicker-header { + @apply flex items-center justify-between pt-0 px-0 pb-2 font-medium gap-2 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border-b border-surface-200 dark:border-surface-700; +} + +.p-datepicker-next-button:dir(rtl) { + @apply order-[-1]; +} +.p-datepicker-prev-button:dir(rtl) { + @apply order-1; +} + +.p-datepicker-title { + @apply flex items-center justify-between gap-2 font-medium; +} + +.p-datepicker-select-year, +.p-datepicker-select-month { + @apply border-none bg-transparent m-0 cursor-pointer font-medium transition-colors duration-200 + py-1 px-2 rounded-md text-surface-700 dark:text-surface-0 + enabled:hover:bg-surface-100 enabled:hover:text-surface-800 + dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-datepicker-calendar-container { + @apply flex; +} + +.p-datepicker-calendar-container .p-datepicker-calendar { + @apply flex-auto border-s border-surface-200 dark:border-surface-700 gap-3 + first:ps-0 first:border-s-0 last:pe-0; +} + +.p-datepicker-day-view { + @apply w-full border-collapse text-base mt-2 mx-0 mb-0; +} + +.p-datepicker-weekday-cell { + @apply p-1; +} + +.p-datepicker-weekday { + @apply font-medium text-surface-700 dark:text-surface-0; +} + +.p-datepicker-day-cell { + @apply p-1; +} + +.p-datepicker-day { + @apply flex items-center justify-center cursor-pointer my-0 mx-auto overflow-hidden relative w-8 h-8 + rounded-full p-1 transition-colors duration-200 border border-transparent text-surface-700 dark:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-datepicker-day-selected { + @apply bg-primary text-primary-contrast; +} + +.p-datepicker-day-selected-range { + @apply bg-highlight; +} + +.p-datepicker-today > .p-datepicker-day { + @apply bg-surface-200 text-surface-900 dark:bg-surface-700 dark:text-surface-0; +} + +.p-datepicker-today > .p-datepicker-day-selected { + @apply bg-primary text-primary-contrast; +} + +.p-datepicker-today > .p-datepicker-day-selected-range { + @apply bg-highlight; +} + +.p-datepicker-weeknumber { + @apply text-center; +} + +.p-datepicker-month-view { + @apply mt-2 mb-0 mx-0; +} + +.p-datepicker-month { + @apply w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative + p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-datepicker-month-selected { + @apply bg-primary text-primary-contrast; +} + +.p-datepicker-year-view { + @apply mt-2 mb-0 mx-0; +} + +.p-datepicker-year { + @apply w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative + p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-datepicker-year-selected { + @apply bg-primary text-primary-contrast; +} + +.p-datepicker-buttonbar { + @apply flex justify-between items-center pt-2 pb-0 px-0 border-t border-surface-200 dark:border-surface-700; +} + +.p-datepicker-buttonbar .p-button { + @apply w-auto; +} + +.p-datepicker-time-picker { + @apply flex items-center justify-center border-t border-surface-200 dark:border-surface-700 p-0 gap-2; +} + +.p-datepicker-calendar-container + .p-datepicker-time-picker { + @apply pt-2 pb-0 px-0; +} + +.p-datepicker-time-picker > div { + @apply flex items-center flex-col gap-1; +} + +.p-datepicker-time-picker span { + @apply text-base; +} + +.p-datepicker-timeonly .p-datepicker-time-picker { + @apply border-t-0; +} diff --git a/src/assets/primevue/dialog.css b/src/assets/primevue/dialog.css new file mode 100644 index 0000000..21953ec --- /dev/null +++ b/src/assets/primevue/dialog.css @@ -0,0 +1,125 @@ +@import './button'; + +.p-dialog { + @apply max-h-[90%] scale-100 rounded-xl + border border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]; +} + +.p-dialog-content { + @apply overflow-y-auto pt-0 px-5 pb-5; +} + +.p-dialog-header { + @apply flex items-center justify-between shrink-0 p-5; +} + +.p-dialog-title { + @apply font-semibold text-xl; +} + +.p-dialog-footer { + @apply shrink-0 pt-0 px-5 pb-5 flex justify-end gap-2; +} + +.p-dialog-header-actions { + @apply flex items-center gap-2; +} + +.p-dialog-enter-active { + @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]; +} + +.p-dialog-leave-active { + @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]; +} + +.p-dialog-enter-from, +.p-dialog-leave-to { + @apply opacity-0 scale-75; +} + +.p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + @apply m-3 [transform:translate3d(0,0,0)]; +} + +.p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + @apply transition-all duration-300 ease-out; +} + +.p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + @apply [transform:translate3d(0,-100%,0)]; +} + +.p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + @apply [transform:translate3d(0,100%,0)]; +} + +.p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + @apply [transform:translate3d(-100%,0,0)]; +} + +.p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + @apply [transform:translate3d(100%,0,0)]; +} + +.p-dialog-left:dir(rtl) .p-dialog-enter-from, +.p-dialog-left:dir(rtl) .p-dialog-leave-to, +.p-dialog-topleft:dir(rtl) .p-dialog-enter-from, +.p-dialog-topleft:dir(rtl) .p-dialog-leave-to, +.p-dialog-bottomleft:dir(rtl) .p-dialog-enter-from, +.p-dialog-bottomleft:dir(rtl) .p-dialog-leave-to { + @apply [transform:translate3d(100%,0,0)]; +} +.p-dialog-right:dir(rtl) .p-dialog-enter-from, +.p-dialog-right:dir(rtl) .p-dialog-leave-to, +.p-dialog-topright:dir(rtl) .p-dialog-enter-from, +.p-dialog-topright:dir(rtl) .p-dialog-leave-to, +.p-dialog-bottomright:dir(rtl) .p-dialog-enter-from, +.p-dialog-bottomright:dir(rtl) .p-dialog-leave-to { + @apply [transform:translate3d(-100%,0,0)]; +} + +.p-dialog-maximized { + @apply !w-screen !h-screen top-0 start-0 max-h-full rounded-none; +} + +.p-dialog-maximized .p-dialog-content { + @apply flex-grow; +} diff --git a/src/assets/primevue/divider.css b/src/assets/primevue/divider.css new file mode 100644 index 0000000..7427068 --- /dev/null +++ b/src/assets/primevue/divider.css @@ -0,0 +1,52 @@ +.p-divider-horizontal { + @apply flex w-full relative items-center my-4 mx-0 py-0 px-4 + before:absolute before:block before:top-1/2 before:start-0 before:w-full + before:border-t before:border-surface-200 dark:before:border-surface-700; +} + +.p-divider-horizontal .p-divider-content { + @apply py-0 px-2; +} + +.p-divider-vertical { + @apply min-h-full flex relative justify-center my-0 mx-4 py-2 px-0 + before:absolute before:block before:top-0 before:start-1/2 before:h-full + before:border-s before:border-surface-200 before:dark:border-surface-700; +} + +.p-divider.p-divider-vertical .p-divider-content { + @apply py-2 px-0; +} + +.p-divider-content { + @apply z-10 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-divider-solid.p-divider-horizontal:before { + @apply border-solid; +} + +.p-divider-solid.p-divider-vertical:before { + @apply border-solid; +} + +.p-divider-dashed.p-divider-horizontal:before { + @apply border-dashed; +} + +.p-divider-dashed.p-divider-vertical:before { + @apply border-dashed; +} + +.p-divider-dotted.p-divider-horizontal:before { + @apply border-dotted; +} + +.p-divider-dotted.p-divider-vertical:before { + @apply border-dotted; +} + +.p-divider-left:dir(rtl), +.p-divider-right:dir(rtl) { + @apply flex-row-reverse; +} diff --git a/src/assets/primevue/dock.css b/src/assets/primevue/dock.css new file mode 100644 index 0000000..54f3f6f --- /dev/null +++ b/src/assets/primevue/dock.css @@ -0,0 +1,84 @@ +.p-dock { + @apply absolute z-10 flex justify-center items-center pointer-events-none; +} + +.p-dock-list-container { + @apply flex pointer-events-auto bg-white/10 border border-white/10 p-2 rounded-xl; +} + +.p-dock-list { + @apply m-0 p-0 list-none flex items-center justify-center outline-none; +} + +.p-dock-item { + @apply transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] will-change-transform p-2 rounded-md + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-dock-item-link { + @apply flex flex-col items-center justify-center relative cursor-default w-12 h-12; +} + +.p-dock-top { + @apply start-0 top-0 w-full; +} + +.p-dock-top .p-dock-item { + @apply origin-[center_top]; +} + +.p-dock-bottom { + @apply start-0 bottom-0 w-full; +} + +.p-dock-bottom .p-dock-item { + @apply origin-[center_bottom]; +} + +.p-dock-right { + @apply end-0 top-0 h-full; +} + +.p-dock-right .p-dock-item { + @apply origin-[center_right]; +} + +.p-dock-right .p-dock-list { + @apply flex-col; +} + +.p-dock-left { + @apply start-0 top-0 h-full; +} + +.p-dock-left .p-dock-item { + @apply origin-[center_left]; +} + +.p-dock-left .p-dock-list { + @apply flex-col; +} + +.p-dock-mobile.p-dock-top .p-dock-list-container, +.p-dock-mobile.p-dock-bottom .p-dock-list-container { + @apply overflow-x-auto w-full; +} + +.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, +.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list { + @apply mt-0 mx-auto; +} + +.p-dock-mobile.p-dock-left .p-dock-list-container, +.p-dock-mobile.p-dock-right .p-dock-list-container { + @apply overflow-y-auto h-full; +} + +.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, +.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list { + @apply mt-auto mx-0; +} + +.p-dock-mobile .p-dock-list .p-dock-item { + @apply transform-none m-0; +} diff --git a/src/assets/primevue/drawer.css b/src/assets/primevue/drawer.css new file mode 100644 index 0000000..1542919 --- /dev/null +++ b/src/assets/primevue/drawer.css @@ -0,0 +1,94 @@ +@import './button'; + +.p-drawer { + @apply flex flex-col pointer-events-auto relative transition-transform duration-300 + border border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]; +} + +.p-drawer { + @apply [transform:translate3d(0,0,0)]; +} + +.p-drawer-content { + @apply overflow-y-auto flex-grow pt-0 pb-5 px-5; +} + +.p-drawer-header { + @apply flex items-center justify-between flex-shrink-0 p-5; +} + +.p-drawer-footer { + @apply p-5; +} + +.p-drawer-title { + @apply font-semibold text-2xl; +} + +.p-drawer-full .p-drawer { + @apply transition-none transform-none w-screen h-screen max-h-full top-0 left-0; +} + +.p-drawer-left .p-drawer-enter-from, +.p-drawer-left .p-drawer-leave-to { + @apply -translate-x-full; +} + +.p-drawer-right .p-drawer-enter-from, +.p-drawer-right .p-drawer-leave-to { + @apply translate-x-full; +} + +.p-drawer-top .p-drawer-enter-from, +.p-drawer-top .p-drawer-leave-to { + @apply -translate-y-full; +} + +.p-drawer-bottom .p-drawer-enter-from, +.p-drawer-bottom .p-drawer-leave-to { + @apply translate-y-full; +} + +.p-drawer-full .p-drawer-enter-from, +.p-drawer-full .p-drawer-leave-to { + @apply opacity-0; +} + +.p-drawer-full .p-drawer-enter-active, +.p-drawer-full .p-drawer-leave-active { + @apply transition-opacity animate-duration-400 ease-[cubic-bezier(0.25,0.8,0.25,1)]; +} + +.p-drawer-left .p-drawer { + @apply w-80 h-full border-r; +} + +.p-drawer-right .p-drawer { + @apply w-80 h-full border-s; +} + +.p-drawer-top .p-drawer { + @apply h-40 w-full border-b; +} + +.p-drawer-bottom .p-drawer { + @apply h-40 w-full border-t; +} + +.p-drawer-left .p-drawer-content, +.p-drawer-right .p-drawer-content, +.p-drawer-top .p-drawer-content, +.p-drawer-bottom .p-drawer-content { + @apply w-full h-full; +} + +.p-drawer-open { + @apply flex; +} + +.p-overlay-mask:dir(rtl) { + @apply flex-row-reverse; +} diff --git a/src/assets/primevue/fieldset.css b/src/assets/primevue/fieldset.css new file mode 100644 index 0000000..464debf --- /dev/null +++ b/src/assets/primevue/fieldset.css @@ -0,0 +1,45 @@ +.p-fieldset { + @apply border border-surface-200 dark:border-surface-700 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + px-[1.125rem] pt-0 pb-[1.125rem]; +} + +.p-fieldset-legend { + @apply border border-transparent rounded-md px-3 py-2 + transition-colors duration-200; +} + +.p-fieldset-toggleable > .p-fieldset-legend { + @apply p-0; +} + +.p-fieldset-toggle-button { + @apply select-none overflow-hidden relative + flex items-center justify-center gap-2 + px-3 py-2 + border-none rounded-md + bg-surface-0 dark:bg-surface-900 + hover:bg-surface-100 dark:hover:bg-surface-800 + text-surface-700 dark:text-surface-0 + hover:text-surface-800 dark:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-fieldset-legend-label { + @apply font-semibold; +} + +.p-fieldset-toggle-icon { + @apply text-surface-500 dark:text-surface-400 + transition-colors duration-200; +} + +.p-fieldset-toggle-button:hover .p-fieldset-toggle-icon { + @apply text-surface-600 dark:text-surface-300; +} + +.p-fieldset .p-fieldset-content { + @apply p-0; +} diff --git a/src/assets/primevue/fileupload.css b/src/assets/primevue/fileupload.css new file mode 100644 index 0000000..a962a98 --- /dev/null +++ b/src/assets/primevue/fileupload.css @@ -0,0 +1,57 @@ +@import './button'; +@import './message'; +@import './progressbar'; + +.p-fileupload input[type='file'] { + @apply hidden; +} + +.p-fileupload-advanced { + @apply border border-surface-200 dark:border-surface-700 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-fileupload-header { + @apply flex items-center p-[1.125rem] gap-2 text-surface-700 dark:text-surface-0; +} + +.p-fileupload-content { + @apply border border-transparent relative transition-colors duration-200 pt-0 px-[1.125rem] pb-[1.125rem]; +} + +.p-fileupload-content .p-progressbar { + @apply w-full absolute top-0 start-0 h-1; +} + +.p-fileupload-file-list { + @apply flex flex-col gap-2 mt-[1.125rem]; +} + +.p-fileupload-file { + @apply flex flex-wrap items-center p-4 border-b border-surface-200 dark:border-surface-700 gap-2 last:border-b-0; +} + +.p-fileupload-file-info { + @apply flex flex-col gap-2; +} + +.p-fileupload-file-thumbnail { + @apply flex-shrink-0; +} + +.p-fileupload-file-actions { + @apply ms-auto; +} + +.p-fileupload-highlight { + @apply border border-dashed border-primary; +} + +.p-fileupload-advanced .p-message { + @apply mt-0; +} + +.p-fileupload-basic { + @apply flex flex-wrap items-center justify-center gap-2; +} diff --git a/src/assets/primevue/floatlabel.css b/src/assets/primevue/floatlabel.css new file mode 100644 index 0000000..889a483 --- /dev/null +++ b/src/assets/primevue/floatlabel.css @@ -0,0 +1,73 @@ +.p-floatlabel { + @apply block relative; +} + +.p-floatlabel label { + @apply absolute pointer-events-none top-1/2 -translate-y-1/2 transition-all duration-200 ease-out leading-none font-medium + start-3 text-surface-500 dark:text-surface-400; +} + +.p-floatlabel:has(.p-textarea) label { + @apply top-2 translate-y-0; +} + +.p-floatlabel:has(.p-inputicon:first-child) label { + @apply start-10; +} + +.p-floatlabel:has(.p-invalid) label { + @apply text-red-400 dark:text-red-300; +} + +.p-floatlabel:has(input:focus) label, +.p-floatlabel:has(input.p-filled) label, +.p-floatlabel:has(input:-webkit-autofill) label, +.p-floatlabel:has(textarea:focus) label, +.p-floatlabel:has(textarea.p-filled) label, +.p-floatlabel:has(.p-inputwrapper-focus) label, +.p-floatlabel:has(.p-inputwrapper-filled) label { + @apply -top-5 translate-y-0 text-xs font-normal; +} + +.p-floatlabel:has(input.p-filled) label, +.p-floatlabel:has(textarea.p-filled) label, +.p-floatlabel:has(.p-inputwrapper-filled) label { + @apply text-surface-500 dark:text-surface-400; +} + +.p-floatlabel:has(input:focus) label, +.p-floatlabel:has(input:-webkit-autofill) label, +.p-floatlabel:has(textarea:focus) label, +.p-floatlabel:has(.p-inputwrapper-focus) label { + @apply text-primary; +} + +.p-floatlabel-in .p-inputtext, +.p-floatlabel-in .p-textarea, +.p-floatlabel-in .p-select-label, +.p-floatlabel-in .p-multiselect-label, +.p-floatlabel-in .p-autocomplete-input-multiple, +.p-floatlabel-in .p-cascadeselect-label, +.p-floatlabel-in .p-treeselect-label { + @apply pt-6 pb-2; +} + +.p-floatlabel-in:has(input:focus) label, +.p-floatlabel-in:has(input.p-filled) label, +.p-floatlabel-in:has(input:-webkit-autofill) label, +.p-floatlabel-in:has(textarea:focus) label, +.p-floatlabel-in:has(textarea.p-filled) label, +.p-floatlabel-in:has(.p-inputwrapper-focus) label, +.p-floatlabel-in:has(.p-inputwrapper-filled) label { + @apply top-2; +} + +.p-floatlabel-on:has(input:focus) label, +.p-floatlabel-on:has(input.p-filled) label, +.p-floatlabel-on:has(input:-webkit-autofill) label, +.p-floatlabel-on:has(textarea:focus) label, +.p-floatlabel-on:has(textarea.p-filled) label, +.p-floatlabel-on:has(.p-inputwrapper-focus) label, +.p-floatlabel-on:has(.p-inputwrapper-filled) label { + @apply top-0 -translate-y-1/2 rounded-sm bg-surface-0 dark:bg-surface-950 py-0 px-[0.125rem]; +} diff --git a/src/assets/primevue/galleria.css b/src/assets/primevue/galleria.css new file mode 100644 index 0000000..b09140b --- /dev/null +++ b/src/assets/primevue/galleria.css @@ -0,0 +1,246 @@ +.p-galleria { + @apply overflow-hidden border border-surface-200 dark:border-surface-700 rounded-md; +} + +.p-galleria-content { + @apply flex flex-col; +} + +.p-galleria-items-container { + @apply flex flex-col relative; +} + +.p-galleria-items { + @apply relative flex h-full; +} + +.p-galleria-nav-button { + @apply absolute top-1/2 inline-flex justify-center items-center overflow-hidden select-none border-none cursor-pointer + w-12 h-12 transition-colors duration-200 p-0 -mt-12 mx-2 mb-0 rounded-full + bg-white/10 text-surface-100 enabled:hover:bg-white/20 enabled:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-galleria-next-icon, +.p-galleria-prev-icon { + @apply text-2xl w-6 h-6; +} + +.p-galleria-prev-button { + @apply start-0; +} + +.p-galleria-next-button { + @apply end-0; +} + +.p-galleria-prev-button:dir(rtl) { + @apply start-auto end-0; +} +.p-galleria-next-button:dir(rtl) { + @apply end-auto start-0; +} + +.p-galleria-item { + @apply flex justify-center items-center h-full w-full; +} + +.p-galleria-hover-navigators .p-galleria-nav-button { + @apply pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out; +} + +.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button { + @apply pointer-events-auto opacity-100; +} + +.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled { + @apply pointer-events-none; +} + +.p-galleria-caption { + @apply absolute bottom-0 left-0 w-full bg-black/5 text-surface-100 p-4; +} + +.p-galleria-thumbnails { + @apply flex flex-col overflow-auto flex-shrink-0; +} + +.p-galleria-thumbnail-nav-button { + @apply self-center flex-grow-0 flex-shrink-0 basis-auto justify-center items-center overflow-hidden relative + my-0 mx-2 p-0 border-none select-none cursor-pointer w-8 h-8 rounded-md transition-colors duration-200 bg-transparent + text-surface-600 hover:bg-surface-100 hover:text-surface-700 + dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon, +.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon { + @apply text-base w-4 h-4; +} + +.p-galleria-thumbnails-content { + @apply flex flex-row bg-surface-0 dark:bg-surface-900 py-4 px-1; +} + +.p-galleria-thumbnails-viewport { + @apply overflow-hidden w-full; +} + +.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) + .p-galleria-thumbnail-prev-button:dir(rtl), +.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) + .p-galleria-thumbnail-next-button:dir(rtl) { + @apply rotate-180; +} + +.p-galleria-thumbnail-items { + @apply flex; +} + +.p-galleria-thumbnail-item { + @apply overflow-auto flex items-center justify-center cursor-pointer opacity-50; +} + +.p-galleria-thumbnail { + @apply outline-transparent transition-opacity duration-300 hover:opacity-100; +} + +.p-galleria-thumbnail-item-current { + @apply opacity-100; +} + +.p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + @apply flex-row; +} + +.p-galleria-thumbnails-left .p-galleria-items-container, +.p-galleria-thumbnails-right .p-galleria-items-container { + @apply flex-row; +} + +.p-galleria-thumbnails-left .p-galleria-items-container, +.p-galleria-thumbnails-top .p-galleria-items-container { + @apply order-2; +} + +.p-galleria-thumbnails-left .p-galleria-thumbnails, +.p-galleria-thumbnails-top .p-galleria-thumbnails { + @apply order-1; +} + +.p-galleria-thumbnails-left .p-galleria-thumbnails-content, +.p-galleria-thumbnails-right .p-galleria-thumbnails-content { + @apply flex-col flex-grow; +} + +.p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + @apply flex-col h-full; +} + +.p-galleria-indicator-list { + @apply flex items-center justify-center p-4 gap-2 m-0 list-none; +} + +.p-galleria-indicator-button { + @apply inline-flex items-center w-4 h-4 rounded-full m-0 p-0 border-none select-none cursor-pointer transition-colors duration-200 + bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-galleria-indicator-active .p-galleria-indicator-button { + @apply bg-primary; +} + +.p-galleria-indicators-left .p-galleria-items-container, +.p-galleria-indicators-right .p-galleria-items-container { + @apply flex-row items-center; +} + +.p-galleria-indicators-left .p-galleria-items, +.p-galleria-indicators-top .p-galleria-items { + @apply order-2; +} + +.p-galleria-indicators-left .p-galleria-indicator-list, +.p-galleria-indicators-top .p-galleria-indicator-list { + @apply order-1; +} + +.p-galleria-indicators-left .p-galleria-indicator-list, +.p-galleria-indicators-right .p-galleria-indicator-list { + @apply flex-col; +} + +.p-galleria-inset-indicators .p-galleria-indicator-list { + @apply absolute flex z-10 bg-black/50; +} + +.p-galleria-inset-indicators .p-galleria-indicator-button { + @apply bg-white/40 hover:bg-white/60; +} + +.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button { + @apply bg-white/90; +} + +.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list { + @apply top-0 left-0 w-full items-start; +} + +.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list { + @apply right-0 top-0 h-full items-end; +} + +.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list { + @apply bottom-0 left-0 w-full items-end; +} + +.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list { + @apply left-0 top-0 h-full items-start; +} + +.p-galleria-mask { + @apply fixed top-0 left-0 w-full h-full flex items-center justify-center; +} + +.p-galleria-close-button { + @apply absolute top-0 right-0 flex items-center justify-center overflow-hidden m-2 rounded-full + transition-colors duration-200 select-none cursor-pointer w-12 h-12 p-0 border-none + bg-white/10 text-surface-50 hover:bg-white/20 hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-galleria-close-icon { + @apply text-2xl w-6 h-6; +} + +.p-galleria-mask .p-galleria-nav-button { + @apply fixed top-1/2; +} + +.p-galleria-enter-active { + @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]; +} + +.p-galleria-leave-active { + @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]; +} + +.p-galleria-enter-from, +.p-galleria-leave-to { + @apply opacity-0 scale-75; +} + +.p-galleria-enter-active .p-galleria-nav-button { + @apply opacity-0; +} + +.p-items-hidden .p-galleria-thumbnail-item { + @apply invisible; +} + +.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + @apply visible; +} diff --git a/src/assets/primevue/iconfield.css b/src/assets/primevue/iconfield.css new file mode 100644 index 0000000..e231111 --- /dev/null +++ b/src/assets/primevue/iconfield.css @@ -0,0 +1,23 @@ +.p-iconfield { + @apply relative; +} + +.p-inputicon { + @apply absolute top-1/2 -mt-2 text-surface-400 leading-none; +} + +.p-iconfield .p-inputicon:first-child { + @apply start-3; +} + +.p-iconfield .p-inputicon:last-child { + @apply end-3; +} + +.p-iconfield .p-inputtext:not(:first-child) { + @apply ps-10; +} + +.p-iconfield .p-inputtext:not(:last-child) { + @apply pe-10; +} diff --git a/src/assets/primevue/iftalabel.css b/src/assets/primevue/iftalabel.css new file mode 100644 index 0000000..993a271 --- /dev/null +++ b/src/assets/primevue/iftalabel.css @@ -0,0 +1,32 @@ +.p-iftalabel { + @apply block relative; +} + +.p-iftalabel label { + @apply absolute pointer-events-none top-2 transition-all ease-out duration-200 leading-none text-xs font-medium start-3 text-surface-500 dark:text-surface-400; +} + +.p-iftalabel .p-inputtext, +.p-iftalabel .p-textarea, +.p-iftalabel .p-select-label, +.p-iftalabel .p-multiselect-label, +.p-iftalabel .p-autocomplete-input-multiple, +.p-iftalabel .p-cascadeselect-label, +.p-iftalabel .p-treeselect-label { + @apply pt-6 pb-2; +} + +.p-iftalabel:has(.p-invalid) label { + @apply text-red-400 dark:text-red-300; +} + +.p-iftalabel:has(input:focus) label, +.p-iftalabel:has(input:-webkit-autofill) label, +.p-iftalabel:has(textarea:focus) label, +.p-iftalabel:has(.p-inputwrapper-focus) label { + @apply text-primary; +} + +.p-iftalabel .p-inputicon { + @apply top-6 translate-y-1/4 mt-0; +} diff --git a/src/assets/primevue/image.css b/src/assets/primevue/image.css new file mode 100644 index 0000000..03c98d4 --- /dev/null +++ b/src/assets/primevue/image.css @@ -0,0 +1,56 @@ +.p-image-mask { + @apply flex items-center justify-center; +} + +.p-image-preview { + @apply relative inline-flex leading-none; +} + +.p-image-preview-mask { + @apply absolute start-0 top-0 w-full h-full flex items-center justify-center opacity-0 + border-none p-0 cursor-pointer bg-transparent text-surface-200 transition-all duration-200; +} + +.p-image-preview:hover > .p-image-preview-mask { + @apply opacity-100 cursor-pointer bg-black/40 dark:bg-black/60; +} + +.p-image-preview-icon { + @apply text-2xl w-6 h-6; +} + +.p-image-toolbar { + @apply absolute top-4 end-4 start-auto bottom-auto flex z-10 p-2 bg-white/10 border border-white/20 rounded-3xl gap-2; +} + +.p-image-action { + @apply inline-flex justify-center items-center text-surface-50 bg-transparent w-12 h-12 m-0 p-0 + border-none cursor-pointer select-none rounded-full transition-colors duration-200 + hover:text-surface-0 hover:bg-white/10 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-image-action .p-icon { + @apply text-2xl h-6 w-6; +} + +.p-image-action.p-disabled { + @apply pointer-events-auto; +} + +.p-image-original { + @apply transition-transform duration-150 max-w-[100vw] max-h-[100vh]; +} + +.p-image-original-enter-active { + @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]; +} + +.p-image-original-leave-active { + @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]; +} + +.p-image-original-enter-from, +.p-image-original-leave-to { + @apply opacity-0 scale-75; +} diff --git a/src/assets/primevue/imagecompare.css b/src/assets/primevue/imagecompare.css new file mode 100644 index 0000000..6c92e0b --- /dev/null +++ b/src/assets/primevue/imagecompare.css @@ -0,0 +1,38 @@ +.p-imagecompare { + @apply relative overflow-hidden w-full aspect-video; +} + +.p-imagecompare img { + @apply w-full h-full absolute; +} + +.p-imagecompare img + img { + @apply [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]; +} + +.p-imagecompare:dir(rtl) img + img { + @apply [clip-path:polygon(50%_0,100%_0,100%_100%,50%_100%)]; +} + +.p-imagecompare-slider { + @apply relative appearance-none w-[calc(100%+1rem)] h-full -ms-2 bg-transparent outline-none transition-all duration-200 + hover:w-[calc(100%+2rem)] hover:-ms-4; +} + +.p-imagecompare-slider::-webkit-slider-thumb { + @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-imagecompare-slider::-moz-range-thumb { + @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-imagecompare-slider:hover::-webkit-slider-thumb { + @apply bg-white/40 h-8 w-8; +} + +.p-imagecompare-slider:hover::-moz-range-thumb { + @apply bg-white/40 h-8 w-8; +} diff --git a/src/assets/primevue/inplace.css b/src/assets/primevue/inplace.css new file mode 100644 index 0000000..fa77f5b --- /dev/null +++ b/src/assets/primevue/inplace.css @@ -0,0 +1,13 @@ +.p-inplace-display { + @apply inline cursor-pointer border border-transparent px-3 py-2 rounded-md + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-inplace-display:not(.p-disabled):hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-inplace-content { + @apply block; +} diff --git a/src/assets/primevue/inputgroup.css b/src/assets/primevue/inputgroup.css new file mode 100644 index 0000000..127514a --- /dev/null +++ b/src/assets/primevue/inputgroup.css @@ -0,0 +1,67 @@ +.p-inputgroup, +.p-inputgroup .p-floatlabel, +.p-inputgroup .p-iftalabel { + @apply flex items-stretch w-full; +} + +.p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper { + @apply flex-auto w-[1%]; +} + +.p-inputgroupaddon { + @apply flex items-center justify-center p-2 min-w-10 + border-y border-surface-300 dark:border-surface-700 + bg-surface-0 dark:bg-surface-950 text-surface-400; +} + +.p-inputgroupaddon:first-child, +.p-inputgroupaddon + .p-inputgroupaddon { + @apply border-s; +} + +.p-inputgroupaddon:last-child { + @apply border-e; +} + +.p-inputgroup > .p-component, +.p-inputgroup > .p-inputwrapper > .p-component, +.p-inputgroup > .p-floatlabel > .p-component, +.p-inputgroup > .p-floatlabel > .p-inputwrapper > .p-component, +.p-inputgroup > .p-iftalabel > .p-component, +.p-inputgroup > .p-iftalabel > .p-inputwrapper > .p-component { + @apply rounded-none m-0; +} + +.p-inputgroupaddon:first-child, +.p-inputgroup > .p-component:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-floatlabel:first-child > .p-component, +.p-inputgroup > .p-floatlabel:first-child > .p-inputwrapper > .p-component, +.p-inputgroup > .p-iftalabel:first-child > .p-component, +.p-inputgroup > .p-iftalabel:first-child > .p-inputwrapper > .p-component { + @apply rounded-s-md; +} + +.p-inputgroupaddon:last-child, +.p-inputgroup > .p-component:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-floatlabel:last-child > .p-component, +.p-inputgroup > .p-floatlabel:last-child > .p-inputwrapper > .p-component, +.p-inputgroup > .p-iftalabel:last-child > .p-component, +.p-inputgroup > .p-iftalabel:last-child > .p-inputwrapper > .p-component { + @apply rounded-e-md; +} + +.p-inputgroup .p-component:focus, +.p-inputgroup .p-component.p-focus, +.p-inputgroup .p-inputwrapper-focus, +.p-inputgroup .p-component:focus ~ label, +.p-inputgroup .p-component.p-focus ~ label, +.p-inputgroup .p-inputwrapper-focus ~ label { + @apply z-10; +} + +.p-inputgroup > .p-button:not(.p-button-icon-only) { + @apply w-auto; +} diff --git a/src/assets/primevue/inputnumber.css b/src/assets/primevue/inputnumber.css new file mode 100644 index 0000000..7d609e8 --- /dev/null +++ b/src/assets/primevue/inputnumber.css @@ -0,0 +1,84 @@ +@import './inputtext'; + +.p-inputnumber { + @apply inline-flex relative; +} + +.p-inputnumber-button { + @apply flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10 + bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200 + border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300 + text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600 + dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700 + dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700 + dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200 + transition-colors duration-200; +} + +.p-inputnumber-stacked .p-inputnumber-button { + @apply relative flex-auto border-none; +} + +.p-inputnumber-stacked .p-inputnumber-button-group { + @apply flex flex-col absolute top-px end-px h-[calc(100%-2px)] z-10; +} + +.p-inputnumber-stacked .p-inputnumber-increment-button { + @apply p-0 rounded-tr-[5px]; +} + +.p-inputnumber-stacked .p-inputnumber-decrement-button { + @apply p-0 rounded-br-[5px]; +} + +.p-inputnumber-horizontal .p-inputnumber-increment-button { + @apply order-3 rounded-e-md border-s-0; +} + +.p-inputnumber-horizontal .p-inputnumber-input { + @apply order-2 rounded-none; +} + +.p-inputnumber-horizontal .p-inputnumber-decrement-button { + @apply order-1 rounded-s-md border-r-0; +} + +.p-floatlabel:has(.p-inputnumber-horizontal) label { + @apply ms-10; +} + +.p-inputnumber-vertical { + @apply flex-col; +} + +.p-inputnumber-vertical .p-inputnumber-button { + @apply py-2; +} + +.p-inputnumber-vertical .p-inputnumber-increment-button { + @apply order-1 rounded-ss-md rounded-se-md w-full border-b-0; +} + +.p-inputnumber-vertical .p-inputnumber-input { + @apply order-2 rounded-none text-center; +} + +.p-inputnumber-vertical .p-inputnumber-decrement-button { + @apply order-3 rounded-ee-md rounded-es-md w-full border-t-0; +} + +.p-inputnumber-input { + @apply flex-auto; +} + +.p-inputnumber-fluid { + @apply w-full; +} + +.p-inputnumber-fluid .p-inputnumber-input { + @apply w-[1%]; +} + +.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input { + @apply w-full; +} diff --git a/src/assets/primevue/inputotp.css b/src/assets/primevue/inputotp.css new file mode 100644 index 0000000..8e24b9b --- /dev/null +++ b/src/assets/primevue/inputotp.css @@ -0,0 +1,9 @@ +@import './inputtext'; + +.p-inputotp { + @apply flex items-center gap-2; +} + +.p-inputotp-input { + @apply text-center w-10; +} diff --git a/src/assets/primevue/inputtext.css b/src/assets/primevue/inputtext.css new file mode 100644 index 0000000..81b0f6f --- /dev/null +++ b/src/assets/primevue/inputtext.css @@ -0,0 +1,34 @@ +.p-inputtext { + @apply appearance-none rounded-md + border border-surface-300 dark:border-surface-700 + enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600 + enabled:focus:border-primary dark:enabled:focus:border-primary + bg-surface-0 dark:bg-surface-950 + text-surface-700 dark:text-surface-0 + disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400 disabled:opacity-100 + placeholder:text-surface-500 dark:placeholder:text-surface-400 + px-3 py-2 + transition-colors duration-200 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + outline-none; +} + +.p-inputtext.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-inputtext.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-inputtext-sm { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-inputtext-lg { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} + +.p-inputtext-fluid { + @apply w-full; +} diff --git a/src/assets/primevue/knob.css b/src/assets/primevue/knob.css new file mode 100644 index 0000000..ccc76c8 --- /dev/null +++ b/src/assets/primevue/knob.css @@ -0,0 +1,37 @@ +.p-knob-range { + @apply fill-none transition-[stroke] duration-100 ease-in; +} + +.p-knob-text { + @apply text-xl text-center; +} + +.p-knob svg { + @apply rounded-full + transition-colors duration-200 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-knob svg path:first-child { + @apply stroke-surface-200 dark:stroke-surface-700; +} + +.p-knob svg path + path { + @apply stroke-primary; +} + +.p-knob svg text { + @apply fill-surface-500 dark:fill-surface-400; +} + +.p-knob-value { + animation-name: p-knob-dash-frame; + animation-fill-mode: forwards; + fill: none; +} + +@keyframes p-knob-dash-frame { + 100% { + stroke-dashoffset: 0; + } +} diff --git a/src/assets/primevue/listbox.css b/src/assets/primevue/listbox.css new file mode 100644 index 0000000..27cdf47 --- /dev/null +++ b/src/assets/primevue/listbox.css @@ -0,0 +1,81 @@ +@import './inputtext'; +@import './iconfield'; + +.p-listbox { + @apply bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0 + border border-surface-300 dark:border-surface-700 rounded-md + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200; +} + +.p-listbox.p-focus { + @apply border-primary; +} + +.p-listbox.p-disabled { + @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default; +} + +.p-listbox.p-disabled .p-listbox-option { + @apply text-surface-500 dark:text-surface-400 cursor-default; +} + +.p-listbox.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-listbox-header { + @apply pt-2 pb-1 px-4; +} + +.p-listbox-filter { + @apply w-full; +} + +.p-listbox-list-container { + @apply overflow-auto; +} + +.p-listbox-list { + @apply list-none m-0 p-1 outline-none flex flex-col gap-[2px]; +} + +.p-listbox-option { + @apply flex items-center cursor-pointer relative overflow-hidden px-3 py-2 border-none rounded-sm + text-surface-700 dark:text-surface-0 + transition-colors duration-200; +} + +.p-listbox-striped li:nth-child(even of .p-listbox-option) { + @apply bg-surface-50 dark:bg-surface-900; +} + +.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected { + @apply bg-highlight; +} + +.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus { + @apply bg-highlight-emphasis; +} + +.p-listbox:not(.p-disabled) + .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-listbox:not(.p-disabled) + .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-listbox-option-check-icon { + @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0; +} + +.p-listbox-option-group { + @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold; +} + +.p-listbox-empty-message { + @apply px-3 py-2; +} diff --git a/src/assets/primevue/megamenu.css b/src/assets/primevue/megamenu.css new file mode 100644 index 0000000..bc4c5e9 --- /dev/null +++ b/src/assets/primevue/megamenu.css @@ -0,0 +1,219 @@ +.p-megamenu { + @apply relative flex items-center rounded-md gap-2 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700; +} + +.p-megamenu-start, +.p-megamenu-end { + @apply flex items-center; +} + +.p-megamenu-root-list { + @apply m-0 p-0 list-none outline-none flex items-center flex-wrap gap-2; +} + +.p-megamenu-root-list > .p-megamenu-item > .p-menumegamenubar-item-content { + @apply rounded-md; +} + +.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link { + @apply px-3 py-2; +} + +.p-megamenu-item-content { + @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0; +} + +.p-megamenu-item-link { + @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit + px-3 py-2 gap-2 select-none outline-none; +} + +.p-megamenu-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-megamenu-submenu-icon { + @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-megamenu-item.p-focus > .p-megamenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-item-active > .p-megamenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-megamenu-overlay { + @apply hidden absolute w-auto z-10 start-0 min-w-full rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay { + @apply block; +} + +.p-megamenu-submenu { + @apply m-0 p-1 list-none min-w-52 flex flex-col gap-[2px]; +} + +.p-megamenu-submenu-label { + @apply px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent; +} + +.p-megamenu-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-megamenu-horizontal { + @apply items-center px-3 py-2; +} + +.p-megamenu-horizontal .p-megamenu-root-list { + @apply flex items-center flex-wrap gap-2; +} + +.p-megamenu-horizontal .p-megamenu-end { + @apply ms-auto self-center; +} + +.p-megamenu-vertical { + @apply inline-flex min-w-52 flex-col items-stretch p-1; +} + +.p-megamenu-vertical .p-megamenu-root-list { + @apply items-stretch flex-col gap-[2px]; +} + +.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay { + @apply start-full top-0; +} + +.p-megamenu-vertical + .p-megamenu-root-list + > .p-megamenu-item + > .p-megamenu-item-content + .p-megamenu-submenu-icon { + @apply ms-auto; +} + +.p-megamenu-grid { + @apply flex; +} + +.p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + @apply flex-grow-0 flex-shrink-0 basis-auto p-2; +} + +.p-megamenu-col-2 { + @apply w-1/6; +} + +.p-megamenu-col-3 { + @apply w-1/4; +} + +.p-megamenu-col-4 { + @apply w-1/3; +} + +.p-megamenu-col-6 { + @apply w-1/2; +} + +.p-megamenu-col-12 { + @apply w-full; +} + +.p-megamenu-button { + @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full + text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300 + bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-megamenu-mobile { + @apply flex; +} + +.p-megamenu-mobile .p-megamenu-button { + @apply flex; +} + +.p-megamenu-mobile .p-megamenu-root-list { + @apply absolute hidden flex-col top-full start-0 z-10 w-full p-1 gap-[2px] + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-megamenu-mobile-active .p-megamenu-root-list { + @apply flex; +} + +.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item { + @apply w-full static; +} + +.p-megamenu-mobile .p-megamenu-overlay { + @apply static border-none rounded-none shadow-none; +} + +.p-megamenu-mobile .p-megamenu-grid { + @apply flex-wrap overflow-auto max-h-[90%]; +} + +.p-megamenu-mobile + .p-megamenu-root-list + > .p-megamenu-item + > .p-megamenu-item-content + .p-megamenu-submenu-icon { + @apply ms-auto transition-transform duration-[200ms]; +} + +.p-megamenu-mobile + .p-megamenu-root-list + > .p-megamenu-item-active + > .p-megamenu-item-content + .p-megamenu-submenu-icon { + @apply -rotate-180; +} diff --git a/src/assets/primevue/menu.css b/src/assets/primevue/menu.css new file mode 100644 index 0000000..cfd2d4f --- /dev/null +++ b/src/assets/primevue/menu.css @@ -0,0 +1,51 @@ +.p-menu { + @apply bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + rounded-md min-w-52; +} + +.p-menu-list { + @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]; +} + +.p-menu-item-content { + @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0; +} + +.p-menu-item-link { + @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit + px-3 py-2 gap-2 select-none outline-none; +} + +.p-menu-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-menu-item.p-focus .p-menu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-menu-item.p-focus .p-menu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menu-item:not(.p-disabled) .p-menu-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menu-overlay { + @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-menu-submenu-label { + @apply bg-transparent px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold; +} + +.p-menu-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} diff --git a/src/assets/primevue/menubar.css b/src/assets/primevue/menubar.css new file mode 100644 index 0000000..af59a65 --- /dev/null +++ b/src/assets/primevue/menubar.css @@ -0,0 +1,181 @@ +.p-menubar { + @apply flex items-center rounded-md px-3 py-2 gap-2 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700; +} + +.p-menubar-start, +.p-megamenu-end { + @apply flex items-center; +} + +.p-menubar-root-list, +.p-menubar-submenu { + @apply flex m-0 p-0 list-none outline-none; +} + +.p-menubar-root-list { + @apply items-center flex-wrap gap-2; +} + +.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content { + @apply rounded-md; +} + +.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link { + @apply px-3 py-2; +} + +.p-menubar-item-content { + @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0; +} + +.p-menubar-item-link { + @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit + px-3 py-2 gap-2 select-none outline-none; +} + +.p-menubar-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-menubar-submenu-icon { + @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-menubar-submenu-icon:dir(rtl) { + @apply rotate-180; +} + +.p-menubar-item.p-focus > .p-menubar-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-item-active > .p-menubar-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-menubar-submenu { + @apply hidden absolute min-w-52 z-10 + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + flex-col p-1 gap-[2px] rounded-md + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-menubar-submenu .p-menubar-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-menubar-submenu .p-menubar-item { + @apply relative; +} + +.p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu { + @apply block start-full top-0; +} + +.p-menubar-end { + @apply ms-auto self-center; +} + +.p-menubar-button { + @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full + text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300 + bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-menubar-mobile { + @apply relative; +} + +.p-menubar-mobile .p-menubar-button { + @apply flex; +} + +.p-menubar-mobile .p-menubar-root-list { + @apply absolute hidden w-full flex-col top-full start-0 z-10 p-1 gap-[2px] rounded-md + border border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-menubar-mobile + .p-menubar-root-list + > .p-menubar-item + > .p-menubar-item-content + > .p-menubar-item-link { + @apply px-3 py-3; +} + +.p-menubar-mobile-active .p-menubar-root-list { + @apply flex; +} + +.p-menubar-mobile .p-menubar-root-list .p-menubar-item { + @apply w-full static; +} + +.p-menubar-mobile .p-menubar-root-list .p-menubar-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-menubar-mobile + .p-menubar-root-list + > .p-menubar-item + > .p-menubar-item-content + .p-menubar-submenu-icon { + @apply ms-auto transition-transform duration-[200ms]; +} + +.p-menubar-mobile + .p-menubar-root-list + > .p-menubar-item-active + > .p-menubar-item-content + .p-menubar-submenu-icon { + @apply -rotate-180; +} + +.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon { + @apply transition-transform duration-200 rotate-90; +} + +.p-menubar-mobile .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { + @apply -rotate-90; +} + +.p-menubar-mobile .p-menubar-submenu { + @apply w-full static shadow-none border-none ps-4 pe-0; +} diff --git a/src/assets/primevue/message.css b/src/assets/primevue/message.css new file mode 100644 index 0000000..90f2ceb --- /dev/null +++ b/src/assets/primevue/message.css @@ -0,0 +1,212 @@ +.p-message { + @apply rounded-md outline outline-1; +} + +.p-message-content { + @apply flex items-center px-3 py-2 gap-2 h-full; +} + +.p-message-icon { + @apply flex-shrink-0; +} + +.p-message-close-button { + @apply flex items-center justify-center flex-shrink-0 ms-auto overflow-hidden relative cursor-pointer select-none + w-7 h-7 rounded-full bg-transparent transition-colors duration-200 text-inherit p-0 border-none + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2; +} + +.p-message-info { + @apply bg-blue-50/95 outline-blue-200 text-blue-600 + dark:bg-blue-500/15 dark:outline-blue-700/35 dark:text-blue-500 + shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]; +} + +.p-message-info .p-message-close-button { + @apply hover:bg-blue-100 focus-visible:outline-blue-600 + dark:hover:bg-white/5 dark:focus-visible:outline-blue-500; +} + +.p-message-info.p-message-outlined { + @apply text-blue-500 outline-blue-500 dark:text-blue-600 dark:outline-blue-600; +} + +.p-message-info.p-message-simple { + @apply text-blue-500 dark:text-blue-600; +} + +.p-message-success { + @apply bg-green-50/95 outline-green-200 text-green-600 + dark:bg-green-500/15 dark:outline-green-700/35 dark:text-green-500 + shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]; +} + +.p-message-success .p-message-close-button { + @apply hover:bg-green-100 focus-visible:outline-green-600 + dark:hover:bg-white/5 dark:focus-visible:outline-green-500; +} + +.p-message-success.p-message-outlined { + @apply text-green-500 outline-green-500 dark:text-green-600 dark:outline-green-600; +} + +.p-message-success.p-message-simple { + @apply text-green-500 dark:text-green-600; +} + +.p-message-warn { + @apply bg-yellow-50/95 outline-yellow-200 text-yellow-600 + dark:bg-yellow-500/15 dark:outline-yellow-700/35 dark:text-yellow-500 + shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]; +} + +.p-message-warn .p-message-close-button { + @apply hover:bg-yellow-100 focus-visible:outline-yellow-600 + dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500; +} + +.p-message-warn.p-message-outlined { + @apply text-yellow-500 outline-yellow-500 dark:text-yellow-600 dark:outline-yellow-600; +} + +.p-message-warn.p-message-simple { + @apply text-yellow-500 dark:text-yellow-600; +} + +.p-message-error { + @apply bg-red-50/95 outline-red-200 text-red-600 + dark:bg-red-500/15 dark:outline-red-700/35 dark:text-red-500 + shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)]; +} + +.p-message-error .p-message-close-button { + @apply hover:bg-red-100 focus-visible:outline-red-600 + dark:hover:bg-white/5 dark:focus-visible:outline-red-500; +} + +.p-message-error.p-message-outlined { + @apply text-red-500 outline-red-500 dark:text-red-600 dark:outline-red-600; +} + +.p-message-error.p-message-simple { + @apply text-red-500 dark:text-red-600; +} + +.p-message-secondary { + @apply bg-surface-100 outline-surface-200 text-surface-600 + dark:bg-surface-800 dark:outline-surface-700 dark:text-surface-300 + shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]; +} + +.p-message-secondary .p-message-close-button { + @apply hover:bg-surface-200 focus-visible:outline-surface-600 + dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300; +} + +.p-message-secondary.p-message-outlined { + @apply text-surface-500 outline-surface-500 dark:text-surface-600 dark:outline-surface-600; +} + +.p-message-secondary.p-message-simple { + @apply text-surface-500 dark:text-surface-600; +} + +.p-message-contrast { + @apply bg-surface-900 outline-surface-950 text-surface-50 + dark:bg-surface-0 dark:outline-surface-100 dark:text-surface-950 + shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]; +} + +.p-message-contrast .p-message-close-button { + @apply hover:bg-surface-800 focus-visible:outline-surface-50 + dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950; +} + +.p-message-contrast.p-message-outlined { + @apply text-surface-950 outline-surface-950 dark:text-surface-0 dark:outline-surface-0; +} + +.p-message-contrast.p-message-simple { + @apply text-surface-950 dark:text-surface-0; +} + +.p-message-text { + @apply text-base font-medium; +} + +.p-message-icon { + @apply text-lg w-[1.125rem] h-[1.125rem]; +} + +.p-message-enter-from { + @apply opacity-0; +} + +.p-message-enter-active { + @apply transition-opacity duration-300; +} + +.p-message.p-message-leave-from { + @apply max-h-[1000px]; +} + +.p-message.p-message-leave-to { + @apply max-h-0 opacity-0 m-0; +} + +.p-message-leave-active { + @apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s]; +} + +.p-message-leave-active .p-message-close-button { + @apply opacity-0; +} + +.p-message-sm .p-message-content { + @apply px-2.5 py-[0.375rem]; +} + +.p-message-sm .p-message-text { + @apply text-sm; +} + +.p-message-sm .p-message-icon { + @apply w-4 h-4 text-sm; +} + +.p-message-sm .p-message-close-icon { + @apply w-3.5 h-3.5 text-sm; +} + +.p-message-lg .p-message-content { + @apply px-3.5 py-2.5; +} + +.p-message-lg .p-message-text { + @apply text-xl; +} + +.p-message-lg .p-message-icon { + @apply w-5 h-5 text-xl; +} + +.p-message-lg .p-message-close-icon { + @apply w-[1.125rem] h-[1.125rem] text-xl; +} + +.p-message-outlined { + @apply bg-transparent outline outline-1; +} + +.p-message-simple { + @apply bg-transparent outline-none shadow-none; +} + +.p-message-simple .p-message-content { + @apply p-0; +} + +.p-message-outlined .p-message-close-button:hover, +.p-message-simple .p-message-close-button:hover { + @apply bg-transparent; +} diff --git a/src/assets/primevue/metergroup.css b/src/assets/primevue/metergroup.css new file mode 100644 index 0000000..ba84d6e --- /dev/null +++ b/src/assets/primevue/metergroup.css @@ -0,0 +1,67 @@ +.p-metergroup { + @apply flex gap-4; +} + +.p-metergroup-meters { + @apply flex bg-surface-200 dark:bg-surface-700 rounded-md; +} + +.p-metergroup-label-list { + @apply flex flex-wrap m-0 p-0 list-none; +} + +.p-metergroup-label { + @apply inline-flex items-center gap-2; +} + +.p-metergroup-label-marker { + @apply inline-flex w-2 h-2 rounded-full; +} + +.p-metergroup-label-icon { + @apply text-base w-4 h-4; +} + +.p-metergroup-horizontal { + @apply flex-col; +} + +.p-metergroup-label-list-horizontal { + @apply gap-4; +} + +.p-metergroup-horizontal .p-metergroup-meters { + @apply h-2; +} + +.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + @apply rounded-s-md; +} + +.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + @apply rounded-e-md; +} + +.p-metergroup-vertical { + @apply flex-row; +} + +.p-metergroup-label-list-vertical { + @apply flex-col gap-2; +} + +.p-metergroup-vertical .p-metergroup-meters { + @apply flex-col w-2 h-full; +} + +.p-metergroup-vertical .p-metergroup-label-list { + @apply items-start; +} + +.p-metergroup-vertical .p-metergroup-meter:first-of-type { + @apply rounded-ss-md rounded-se-md; +} + +.p-metergroup-vertical .p-metergroup-meter:last-of-type { + @apply rounded-ee-md rounded-es-md; +} diff --git a/src/assets/primevue/multiselect.css b/src/assets/primevue/multiselect.css new file mode 100644 index 0000000..4412b02 --- /dev/null +++ b/src/assets/primevue/multiselect.css @@ -0,0 +1,143 @@ +@import './checkbox'; +@import './chip'; +@import './inputtext'; +@import './iconfield'; + +.p-multiselect { + @apply inline-flex cursor-pointer relative select-none rounded-md + bg-surface-0 dark:bg-surface-950 + border border-surface-300 dark:border-surface-700 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200; +} + +.p-multiselect:not(.p-disabled):hover { + @apply border-surface-400 dark:border-surface-600; +} + +.p-multiselect:not(.p-disabled).p-focus { + @apply border-primary; +} + +.p-multiselect.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-multiselect.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-multiselect.p-disabled { + @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default; +} + +.p-multiselect-dropdown { + @apply flex items-center justify-center shrink-0 bg-transparent + text-surface-500 dark:text-surface-400 w-10 rounded-e-md; +} + +.p-multiselect-clear-icon { + @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10; +} + +.p-multiselect-label-container { + @apply overflow-hidden flex-auto; +} + +.p-multiselect-label { + @apply flex items-center gap-1 whitespace-nowrap overflow-hidden text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0; +} + +.p-multiselect-label.p-placeholder { + @apply text-surface-500 dark:text-surface-400; +} + +.p-multiselect.p-disabled .p-multiselect-label { + @apply text-surface-500 dark:text-surface-400; +} + +.p-multiselect-label-empty { + @apply overflow-hidden opacity-0; +} + +.p-multiselect .p-multiselect-overlay { + @apply min-w-full; +} + +.p-multiselect-overlay { + @apply absolute top-0 left-0 rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-multiselect-header { + @apply flex items-center pt-2 pb-1 px-4; +} + +.p-multiselect-header .p-checkbox { + @apply me-2; +} + +.p-multiselect-filter-container { + @apply flex-auto; +} + +.p-multiselect-filter { + @apply w-full; +} + +.p-multiselect-list-container { + @apply overflow-auto; +} + +.p-multiselect-list { + @apply m-0 p-1 list-none gap-[2px] flex flex-col; +} + +.p-multiselect-option { + @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center gap-2 px-3 py-2 + rounded-sm text-surface-700 dark:text-surface-0 bg-transparent border-none + transition-colors duration-200; +} + +.p-multiselect-option:not(.p-disabled).p-focus { + @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-0; +} + +.p-multiselect-option-group { + @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold; +} + +.p-multiselect-empty-message { + @apply px-3 py-2; +} + +.p-multiselect-label .p-chip { + @apply py-1 rounded-sm; +} + +.p-multiselect-label:has(.p-chip) { + @apply py-1 px-[0.375rem]; +} + +.p-multiselect-fluid { + @apply flex; +} + +.p-multiselect-sm .p-multiselect-label { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-multiselect-sm .p-multiselect-dropdown .p-icon { + @apply text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-multiselect-lg .p-multiselect-label { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} + +.p-multiselect-lg .p-multiselect-dropdown .p-icon { + @apply text-lg w-[1.125rem] h-[1.125rem]; +} diff --git a/src/assets/primevue/orderlist.css b/src/assets/primevue/orderlist.css new file mode 100644 index 0000000..8f8c57d --- /dev/null +++ b/src/assets/primevue/orderlist.css @@ -0,0 +1,10 @@ +@import './button'; +@import './listbox'; + +.p-orderlist { + @apply flex gap-[1.125rem]; +} + +.p-orderlist-controls { + @apply flex flex-col justify-center gap-2; +} diff --git a/src/assets/primevue/organizationchart.css b/src/assets/primevue/organizationchart.css new file mode 100644 index 0000000..0d8c3be --- /dev/null +++ b/src/assets/primevue/organizationchart.css @@ -0,0 +1,73 @@ +.p-organizationchart-table { + @apply border-spacing-0 border-separate my-0 mx-auto; +} + +.p-organizationchart-table > tbody > tr > td { + @apply text-center align-top py-0 px-3; +} + +.p-organizationchart-node { + @apply inline-block relative py-3 px-4 rounded-md + border border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + transition-colors duration-200; +} + +.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) { + @apply pt-3 px-4 pb-5; +} + +.p-organizationchart-node.p-organizationchart-node-selectable:not( + .p-organizationchart-node-selected + ):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-organizationchart-node-selected { + @apply bg-highlight; +} + +.p-organizationchart-node-toggle-button { + @apply absolute -bottom-3 -ms-3 z-20 start-1/2 select-none cursor-pointer w-6 h-6 no-underline rounded-full + inline-flex items-center justify-center transition-colors duration-200 + border border-surface-200 dark:border-surface-700 + bg-surface-0 text-surface-500 hover:bg-surface-100 hover:text-surface-700 + dark:bg-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} +.p-organizationchart-node-toggle-button-icon { + @apply relative top-px; +} + +.p-organizationchart-connector-down { + @apply my-0 mx-auto h-6 w-px bg-surface-200 dark:bg-surface-700; +} + +.p-organizationchart-connector-right { + @apply rounded-none; +} + +.p-organizationchart-connector-left { + @apply rounded-none border-e border-surface-200 dark:border-surface-700; +} + +.p-organizationchart-connector-top { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-organizationchart-node-selectable { + @apply cursor-pointer; +} + +.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) { + @apply border-e-0; +} + +.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) { + @apply rounded-se-md; +} + +.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) { + @apply border-s border-surface-200 dark:border-surface-700 rounded-ss-md; +} diff --git a/src/assets/primevue/overlaybadge.css b/src/assets/primevue/overlaybadge.css new file mode 100644 index 0000000..87d5450 --- /dev/null +++ b/src/assets/primevue/overlaybadge.css @@ -0,0 +1,13 @@ +@import './badge'; + +.p-overlaybadge { + @apply relative; +} + +.p-overlaybadge .p-badge { + @apply absolute top-0 end-0 translate-x-[50%] translate-y-[-50%] origin-[100%_0] m-0 outline outline-2 outline-surface-0 dark:outline-surface-900; +} + +.p-overlaybadge .p-badge:dir(rtl) { + @apply -translate-x-1/2 -translate-y-1/2; +} diff --git a/src/assets/primevue/paginator.css b/src/assets/primevue/paginator.css new file mode 100644 index 0000000..e31e85e --- /dev/null +++ b/src/assets/primevue/paginator.css @@ -0,0 +1,58 @@ +.p-paginator { + @apply flex items-center justify-center flex-wrap py-2 px-4 rounded-md gap-1 + bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-paginator-content { + @apply flex items-center justify-center flex-wrap gap-1; +} + +.p-paginator-content-start { + @apply ms-auto; +} + +.p-paginator-content-end { + @apply me-auto; +} + +.p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev { + @apply cursor-pointer inline-flex items-center justify-center leading-none overflow-hidden relative + bg-transparent border-none min-w-10 h-10 transition-colors duration-200 rounded-full p-0 m-0 + text-surface-500 dark:text-surface-400 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover, +.p-paginator-first:not(.p-disabled):hover, +.p-paginator-prev:not(.p-disabled):hover, +.p-paginator-next:not(.p-disabled):hover, +.p-paginator-last:not(.p-disabled):hover { + @apply bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300; +} + +.p-paginator-page.p-paginator-page-selected { + @apply bg-highlight; +} + +.p-paginator-current { + @apply text-surface-500 dark:text-surface-400; +} + +.p-paginator-pages { + @apply flex items-center gap-1; +} + +.p-paginator-jtp-input .p-inputtext { + @apply max-w-10; +} + +.p-paginator-first:dir(rtl), +.p-paginator-prev:dir(rtl), +.p-paginator-next:dir(rtl), +.p-paginator-last:dir(rtl) { + @apply rotate-180; +} diff --git a/src/assets/primevue/panel.css b/src/assets/primevue/panel.css new file mode 100644 index 0000000..e661f5c --- /dev/null +++ b/src/assets/primevue/panel.css @@ -0,0 +1,27 @@ +@import './button'; + +.p-panel { + @apply border border-surface-200 dark:border-surface-700 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-panel-header { + @apply flex justify-between items-center p-[1.125rem]; +} + +.p-panel-toggleable .p-panel-header { + @apply py-[0.375rem] px-[1.125rem]; +} + +.p-panel-title { + @apply leading-none font-semibold; +} + +.p-panel-content { + @apply pt-0 pb-[1.125rem] px-[1.125rem]; +} + +.p-panel-footer { + @apply pt-0 pb-[1.125rem] px-[1.125rem]; +} diff --git a/src/assets/primevue/panelmenu.css b/src/assets/primevue/panelmenu.css new file mode 100644 index 0000000..8c47079 --- /dev/null +++ b/src/assets/primevue/panelmenu.css @@ -0,0 +1,98 @@ +.p-panelmenu { + @apply flex flex-col gap-2; +} + +.p-panelmenu-panel { + @apply bg-surface-0 dark:bg-surface-900 rounded-md p-1 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0; +} + +.p-panelmenu-header { + @apply outline-none; +} + +.p-panelmenu-header-content { + @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0; +} + +.p-panelmenu-header-link { + @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer relative no-underline text-inherit; +} + +.p-panelmenu-header-icon, +.p-panelmenu-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-panelmenu-submenu-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-panelmenu-header:not(.p-disabled):focus-visible + .p-panelmenu-header-content + .p-panelmenu-header-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-header:not(.p-disabled):focus-visible + .p-panelmenu-header-content + .p-panelmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-header:not(.p-panelmenu-header-active) .p-panelmenu-submenu-icon:dir(rtl) { + @apply rotate-180; +} + +.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-submenu { + @apply m-0 py-0 ps-4 outline-none list-none; +} + +.p-panelmenu-item-link { + @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer no-underline text-inherit relative overflow-hidden; +} + +.p-panelmenu-item-content { + @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0; +} + +.p-panelmenu-item.p-focus > .p-panelmenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} diff --git a/src/assets/primevue/password.css b/src/assets/primevue/password.css new file mode 100644 index 0000000..50d01b0 --- /dev/null +++ b/src/assets/primevue/password.css @@ -0,0 +1,61 @@ +@import './inputtext'; + +.p-password { + @apply inline-flex relative; +} + +.p-password .p-password-overlay { + @apply min-w-full; +} + +.p-password-meter { + @apply h-3 bg-surface-200 dark:bg-surface-700 rounded-md; +} + +.p-password-meter-label { + @apply h-full w-0 transition-[width] duration-1000 ease-in-out rounded-md; +} + +.p-password-meter-weak { + @apply bg-red-500 dark:bg-red-400; +} + +.p-password-meter-medium { + @apply bg-amber-500 dark:bg-amber-400; +} + +.p-password-meter-strong { + @apply bg-green-500 dark:bg-green-400; +} + +.p-password-fluid { + @apply flex; +} + +.p-password-fluid .p-password-input { + @apply w-full; +} + +.p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + @apply hidden; +} + +.p-password-overlay { + @apply p-3 rounded-md bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-password-content { + @apply flex flex-col gap-2; +} + +.p-password-toggle-mask-icon { + @apply end-3 text-surface-500 dark:text-surface-400 absolute top-1/2 -mt-2 w-4 h-4; +} + +.p-password:has(.p-password-toggle-mask-icon) .p-password-input { + @apply pe-10; +} diff --git a/src/assets/primevue/picklist.css b/src/assets/primevue/picklist.css new file mode 100644 index 0000000..2fded46 --- /dev/null +++ b/src/assets/primevue/picklist.css @@ -0,0 +1,18 @@ +@import './button'; +@import './listbox'; + +.p-picklist { + @apply flex gap-[1.125rem]; +} + +.p-picklist-controls { + @apply flex flex-col justify-center gap-2; +} + +.p-picklist-list-container { + @apply flex-grow flex-shrink basis-1/2; +} + +.p-picklist .p-listbox { + @apply h-full; +} diff --git a/src/assets/primevue/popover.css b/src/assets/primevue/popover.css new file mode 100644 index 0000000..76a4e97 --- /dev/null +++ b/src/assets/primevue/popover.css @@ -0,0 +1,46 @@ +.p-popover { + @apply mt-[10px] bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] + before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none + before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700 + after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none + after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900; +} + +.p-popover-content { + @apply p-3; +} + +.p-popover-flipped { + @apply -mt-[10px] mb-[10px]; +} + +.p-popover-enter-from { + @apply opacity-0 scale-y-75; +} + +.p-popover-leave-to { + @apply opacity-0; +} + +.p-popover-enter-active { + @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]; +} + +.p-popover-leave-active { + @apply transition-opacity duration-100 ease-linear; +} + +.p-popover-flipped:after, +.p-popover-flipped:before { + @apply bottom-auto top-full; +} + +.p-popover.p-popover-flipped:after { + @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900; +} + +.p-popover.p-popover-flipped:before { + @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700; +} diff --git a/src/assets/primevue/progressbar.css b/src/assets/primevue/progressbar.css new file mode 100644 index 0000000..ed70e0e --- /dev/null +++ b/src/assets/primevue/progressbar.css @@ -0,0 +1,66 @@ +.p-progressbar { + @apply relative overflow-hidden h-5 bg-surface-200 dark:bg-surface-700 rounded-md; +} + +.p-progressbar-value { + @apply m-0 bg-primary; +} + +.p-progressbar-label { + @apply text-primary-contrast text-xs font-semibold; +} + +.p-progressbar-determinate .p-progressbar-value { + @apply h-full w-0 absolute flex items-center justify-center overflow-hidden transition-[width] duration-1000 ease-in-out; +} + +.p-progressbar-determinate .p-progressbar-label { + @apply inline-flex; +} + +.p-progressbar-indeterminate .p-progressbar-value::before { + @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end]; +} + +.p-progressbar-indeterminate .p-progressbar-value::before { + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; +} + +.p-progressbar-indeterminate .p-progressbar-value::after { + @apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end]; +} + +.p-progressbar-indeterminate .p-progressbar-value::after { + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation-delay: 1.15s; +} + +@keyframes p-progressbar-indeterminate-anim { + 0% { + inset-inline-start: -35%; + inset-inline-end: 100%; + } + 60% { + inset-inline-start: 100%; + inset-inline-end: -90%; + } + 100% { + inset-inline-start: 100%; + inset-inline-end: -90%; + } +} + +@keyframes p-progressbar-indeterminate-anim-short { + 0% { + inset-inline-start: -200%; + inset-inline-end: 100%; + } + 60% { + inset-inline-start: 107%; + inset-inline-end: -8%; + } + 100% { + inset-inline-start: 107%; + inset-inline-end: -8%; + } +} diff --git a/src/assets/primevue/progressspinner.css b/src/assets/primevue/progressspinner.css new file mode 100644 index 0000000..2e8d713 --- /dev/null +++ b/src/assets/primevue/progressspinner.css @@ -0,0 +1,60 @@ +.p-progressspinner { + @apply relative my-0 mx-auto w-[100px] h-[100px] inline-block + before:block before:pt-[100%]; +} + +.p-progressspinner-spin { + @apply h-full origin-center w-full absolute top-0 bottom-0 start-0 end-0 m-auto; +} + +.p-progressspinner-spin { + animation: p-progressspinner-rotate 2s linear infinite; +} + +.p-progressspinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: theme(colors.red.500); + stroke-linecap: round; + animation: + p-progressspinner-dash 1.5s ease-in-out infinite, + p-progressspinner-color 6s ease-in-out infinite; +} + +@keyframes p-progressspinner-rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes p-progressspinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} + +@keyframes p-progressspinner-color { + 100%, + 0% { + stroke: theme(colors.red.500); + } + 40% { + stroke: theme(colors.blue.500); + } + 66% { + stroke: theme(colors.green.500); + } + 80%, + 90% { + stroke: theme(colors.yellow.500); + } +} diff --git a/src/assets/primevue/radiobutton.css b/src/assets/primevue/radiobutton.css new file mode 100644 index 0000000..3376bf9 --- /dev/null +++ b/src/assets/primevue/radiobutton.css @@ -0,0 +1,95 @@ +.p-radiobutton { + @apply relative inline-flex select-none w-5 h-5; +} + +.p-radiobutton-input { + @apply cursor-pointer disabled:cursor-default appearance-none absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10 + border border-transparent rounded-full; +} + +.p-radiobutton-box { + @apply flex justify-center items-center rounded-full + border border-surface-300 dark:border-surface-700 + bg-surface-0 dark:bg-surface-950 + w-5 h-5 + transition-colors duration-200 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]; +} + +.p-radiobutton-icon { + @apply bg-transparent text-xs w-3 h-3 rounded-full + transition-all duration-200 backface-hidden; +} + +.p-radiobutton-icon { + @apply scale-[0.1]; +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + @apply border-surface-400 dark:border-surface-600; +} + +.p-radiobutton-checked .p-radiobutton-box { + @apply border-primary bg-primary; +} + +.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon { + @apply bg-primary-contrast visible; +} + +.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon { + @apply scale-100; +} + +.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + @apply border-primary-emphasis bg-primary-emphasis; +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked + .p-radiobutton-box + .p-radiobutton-icon { + @apply bg-primary-contrast; +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-radiobutton.p-invalid > .p-radiobutton-box { + @apply border-red-400 dark:border-red-300; +} + +.p-radiobutton.p-variant-filled .p-radiobutton-box { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-radiobutton.p-disabled { + @apply opacity-100; +} + +.p-radiobutton.p-disabled .p-radiobutton-box { + @apply bg-surface-200 dark:bg-surface-400 + border-surface-300 dark:border-surface-700; +} + +.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon { + @apply bg-surface-700 dark:bg-surface-400; +} + +.p-radiobutton-sm, +.p-radiobutton-sm .p-radiobutton-box { + @apply w-4 h-4; +} + +.p-radiobutton-sm .p-radiobutton-icon { + @apply w-2 h-2; +} + +.p-radiobutton-lg, +.p-radiobutton-lg .p-radiobutton-box { + @apply w-6 h-6; +} + +.p-radiobutton-lg .p-radiobutton-icon { + @apply w-4 h-4; +} diff --git a/src/assets/primevue/rating.css b/src/assets/primevue/rating.css new file mode 100644 index 0000000..1323616 --- /dev/null +++ b/src/assets/primevue/rating.css @@ -0,0 +1,23 @@ +.p-rating { + @apply relative flex items-center gap-1; +} + +.p-rating-option { + @apply inline-flex items-center cursor-pointer rounded-full; +} + +.p-rating-option.p-focus-visible { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-rating-icon { + @apply text-surface-500 dark:text-surface-400 text-base w-4 h-4 transition-colors duration-200; +} + +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon { + @apply text-primary; +} + +.p-rating-option-active .p-rating-icon { + @apply text-primary; +} diff --git a/src/assets/primevue/ripple.css b/src/assets/primevue/ripple.css new file mode 100644 index 0000000..fedae31 --- /dev/null +++ b/src/assets/primevue/ripple.css @@ -0,0 +1,7 @@ +.p-ink { + @apply block absolute bg-black/10 dark:bg-white/30 scale-0 rounded-[100%] pointer-events-none; +} + +.p-ink-active { + @apply transition-[opacity,transform] duration-500 scale-[2.5] opacity-0 ease-linear; +} diff --git a/src/assets/primevue/scrollpanel.css b/src/assets/primevue/scrollpanel.css new file mode 100644 index 0000000..7b68f25 --- /dev/null +++ b/src/assets/primevue/scrollpanel.css @@ -0,0 +1,41 @@ +.p-scrollpanel-content-container { + @apply overflow-hidden w-full h-full relative z-10 float-left; +} + +.p-scrollpanel-content { + @apply relative overflow-auto + h-[calc(100%+18px)] w-[calc(100%+18px)] + pt-0 ps-0 pr-[18px] pb-[18px] [scrollbar-width:none]; +} + +.p-scrollpanel-content::-webkit-scrollbar { + @apply hidden; +} + +.p-scrollpanel-bar { + @apply relative rounded-sm z-20 cursor-pointer opacity-0 + bg-surface-100 dark:bg-surface-800 + transition-opacity duration-200 border-none + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-scrollpanel-bar-y { + @apply w-[9px] top-0; +} + +.p-scrollpanel-bar-x { + @apply h-[9px] bottom-0; +} + +.p-scrollpanel-hidden { + @apply invisible; +} + +.p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + @apply opacity-100; +} + +.p-scrollpanel-grabbed { + @apply select-none; +} diff --git a/src/assets/primevue/scrolltop.css b/src/assets/primevue/scrolltop.css new file mode 100644 index 0000000..188a709 --- /dev/null +++ b/src/assets/primevue/scrolltop.css @@ -0,0 +1,25 @@ +@import './button'; + +.p-scrolltop.p-button { + @apply fixed bottom-5 end-5; +} + +.p-scrolltop-sticky.p-button { + @apply sticky flex ms-auto; +} + +.p-scrolltop-enter-from { + @apply opacity-0; +} + +.p-scrolltop-enter-active { + @apply transition-opacity duration-150; +} + +.p-scrolltop.p-scrolltop-leave-to { + @apply opacity-0; +} + +.p-scrolltop-leave-active { + @apply transition-opacity duration-150; +} diff --git a/src/assets/primevue/select.css b/src/assets/primevue/select.css new file mode 100644 index 0000000..84486b8 --- /dev/null +++ b/src/assets/primevue/select.css @@ -0,0 +1,144 @@ +@import './button'; +@import './inputtext'; +@import './iconfield'; + +.p-select { + @apply inline-flex cursor-pointer relative select-none rounded-md + bg-surface-0 dark:bg-surface-950 + border border-surface-300 dark:border-surface-700 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200; +} + +.p-select:not(.p-disabled):hover { + @apply border-surface-400 dark:border-surface-600; +} + +.p-select:not(.p-disabled).p-focus { + @apply border-primary; +} + +.p-select.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-select.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-select.p-disabled { + @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default; +} + +.p-select-clear-icon { + @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10; +} + +.p-select-dropdown { + @apply flex items-center justify-center shrink-0 bg-transparent + text-surface-500 dark:text-surface-400 w-10 rounded-e-md; +} + +.p-select-label { + @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%] + py-2 px-3 overflow-ellipsis + text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none; +} + +.p-select-label.p-placeholder { + @apply text-surface-500 dark:text-surface-400; +} + +.p-select:has(.p-select-clear-icon) .p-select-label { + @apply pe-7; +} + +.p-select.p-disabled .p-select-label { + @apply text-surface-500 dark:text-surface-400; +} + +.p-select-label-empty { + @apply overflow-hidden opacity-0; +} + +input.p-select-label { + @apply cursor-default; +} + +.p-select .p-select-overlay { + @apply min-w-full; +} + +.p-select-overlay { + @apply absolute top-0 left-0 rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-select-header { + @apply pt-2 pb-1 px-4; +} + +.p-select-filter { + @apply w-full; +} + +.p-select-list-container { + @apply overflow-auto; +} + +.p-select-option-group { + @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold; +} + +.p-select-list { + @apply m-0 p-1 list-none gap-[2px] flex flex-col; +} + +.p-select-option { + @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center + px-3 py-2 border-none text-surface-700 dark:text-surface-0 bg-transparent rounded-sm + transition-colors duration-200; +} + +.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-select-option.p-select-option-selected { + @apply bg-highlight; +} + +.p-select-option.p-select-option-selected.p-focus { + @apply bg-highlight-emphasis; +} + +.p-select-option-check-icon { + @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0; +} + +.p-select-empty-message { + @apply px-3 py-2; +} + +.p-select-fluid { + @apply flex; +} + +.p-select-sm .p-select-label { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-select-sm .p-select-dropdown .p-icon { + @apply text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-select-lg .p-select-label { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} + +.p-select-lg .p-select-dropdown .p-icon { + @apply text-lg w-[1.125rem] h-[1.125rem]; +} diff --git a/src/assets/primevue/selectbutton.css b/src/assets/primevue/selectbutton.css new file mode 100644 index 0000000..4558857 --- /dev/null +++ b/src/assets/primevue/selectbutton.css @@ -0,0 +1,25 @@ +@import './togglebutton'; + +.p-selectbutton { + @apply inline-flex select-none rounded-md; +} + +.p-selectbutton .p-togglebutton { + @apply rounded-none border-y border-r border-s-0; +} + +.p-selectbutton .p-togglebutton:focus-visible { + @apply relative z-10; +} + +.p-selectbutton .p-togglebutton:first-child { + @apply border-s rounded-s-md; +} + +.p-selectbutton .p-togglebutton:last-child { + @apply rounded-e-md; +} + +.p-selectbutton.p-invalid { + @apply outline outline-offset-0 outline-red-400 dark:outline-red-300; +} diff --git a/src/assets/primevue/skeleton.css b/src/assets/primevue/skeleton.css new file mode 100644 index 0000000..6faa55f --- /dev/null +++ b/src/assets/primevue/skeleton.css @@ -0,0 +1,11 @@ +.p-skeleton { + @apply overflow-hidden bg-surface-200 dark:bg-surface-700 animate-pulse rounded-md; +} + +.p-skeleton-circle { + @apply rounded-full; +} + +.p-skeleton-animation-none::after { + @apply animate-none; +} diff --git a/src/assets/primevue/slider.css b/src/assets/primevue/slider.css new file mode 100644 index 0000000..ef63eb6 --- /dev/null +++ b/src/assets/primevue/slider.css @@ -0,0 +1,42 @@ +.p-slider { + @apply relative bg-surface-200 dark:bg-surface-700 rounded-sm; +} + +.p-slider-handle { + @apply cursor-grab touch-none flex items-center justify-center h-[20px] w-[20px] + bg-surface-200 dark:bg-surface-700 rounded-full + transition-colors duration-200 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + before:w-[16px] before:h-[16px] before:block before:rounded-full + before:bg-surface-0 dark:before:bg-surface-950 + before:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.08),0px_1px_1px_0px_rgba(0,0,0,0.14)] + before:transition-colors before:duration-200; +} + +.p-slider-range { + @apply block bg-primary rounded-sm; +} + +.p-slider.p-slider-horizontal { + @apply h-[3px]; +} + +.p-slider-horizontal .p-slider-range { + @apply top-0 start-0 h-full; +} + +.p-slider-horizontal .p-slider-handle { + @apply top-1/2 -mt-[10px] -ms-[10px]; +} + +.p-slider-vertical { + @apply min-h-[100px] w-[3px]; +} + +.p-slider-vertical .p-slider-handle { + @apply start-1/2 -mb-[10px] -ms-[10px]; +} + +.p-slider-vertical .p-slider-range { + @apply bottom-0 start-0 w-full; +} diff --git a/src/assets/primevue/speeddial.css b/src/assets/primevue/speeddial.css new file mode 100644 index 0000000..4810019 --- /dev/null +++ b/src/assets/primevue/speeddial.css @@ -0,0 +1,48 @@ +@import './button'; + +.p-speeddial { + @apply static flex gap-2; +} + +.p-speeddial-button { + @apply z-10; +} + +.p-speeddial-button.p-speeddial-rotate { + @apply [transition:transform_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,background_200ms,color_200ms,border-color_200ms] will-change-transform; +} + +.p-speeddial-list { + @apply m-0 p-0 list-none flex items-center justify-center pointer-events-none outline-none z-20 gap-2 + transition-[top] ease-linear duration-200; +} + +.p-speeddial-item { + @apply scale-0 opacity-0 [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1)_0ms,opacity_0.8s] will-change-transform; +} + +.p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + @apply absolute; +} + +.p-speeddial-mask { + @apply absolute start-0 top-0 w-full h-full opacity-0 bg-white/40 dark:bg-white/60 rounded-md transition-opacity duration-150; +} + +.p-speeddial-mask-visible { + @apply pointer-events-none opacity-100 transition-opacity duration-150; +} + +.p-speeddial-open .p-speeddial-list { + @apply pointer-events-auto; +} + +.p-speeddial-open .p-speeddial-item { + @apply scale-100 opacity-100; +} + +.p-speeddial-open .p-speeddial-rotate { + @apply rotate-45; +} diff --git a/src/assets/primevue/splitbutton.css b/src/assets/primevue/splitbutton.css new file mode 100644 index 0000000..5870ee9 --- /dev/null +++ b/src/assets/primevue/splitbutton.css @@ -0,0 +1,34 @@ +@import './button'; +@import './tieredmenu'; + +.p-splitbutton { + @apply inline-flex relative rounded-md; +} + +.p-splitbutton-button { + @apply rounded-e-none border-r-0 enabled:hover:border-r-0 enabled:active:border-r-0 focus-visible:z-10; +} + +.p-splitbutton-dropdown { + @apply rounded-s-none focus-visible:z-10; +} + +.p-splitbutton .p-menu { + @apply min-w-full; +} + +.p-splitbutton-fluid { + @apply w-full; +} + +.p-splitbutton-rounded .p-splitbutton-dropdown { + @apply rounded-e-[2rem]; +} + +.p-splitbutton-rounded .p-splitbutton-button { + @apply rounded-s-[2rem]; +} + +.p-splitbutton-raised { + @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]; +} diff --git a/src/assets/primevue/splitter.css b/src/assets/primevue/splitter.css new file mode 100644 index 0000000..26740d0 --- /dev/null +++ b/src/assets/primevue/splitter.css @@ -0,0 +1,56 @@ +.p-splitter { + @apply flex flex-wrap + border border-surface-200 dark:border-surface-700 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-splitter-vertical { + @apply flex-col; +} + +.p-splitter-gutter { + @apply flex-grow-0 flex-shrink-0 flex items-center justify-center z-10 bg-surface-200 dark:bg-surface-700; +} + +.p-splitter-gutter-handle { + @apply rounded-md bg-transparent + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + transition-colors duration-200; +} + +.p-splitter-horizontal.p-splitter-resizing { + @apply cursor-col-resize select-none; +} + +.p-splitter-vertical.p-splitter-resizing { + @apply cursor-row-resize select-none; +} + +.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + @apply h-[24px] w-full; +} + +.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + @apply w-[24px] h-full; +} + +.p-splitter-horizontal > .p-splitter-gutter { + @apply cursor-col-resize; +} + +.p-splitter-vertical > .p-splitter-gutter { + @apply cursor-row-resize; +} + +.p-splitterpanel { + @apply flex-grow overflow-hidden; +} + +.p-splitterpanel-nested { + @apply flex; +} + +.p-splitterpanel .p-splitter { + @apply flex-grow border-none; +} diff --git a/src/assets/primevue/stepper.css b/src/assets/primevue/stepper.css new file mode 100644 index 0000000..3df9cb1 --- /dev/null +++ b/src/assets/primevue/stepper.css @@ -0,0 +1,101 @@ +.p-steplist { + @apply relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto; +} + +.p-step { + @apply relative flex flex-auto items-center gap-4 p-2 last-of-type:flex-initial; +} + +.p-step-header { + @apply border-none inline-flex items-center no-underline cursor-pointer + transition-colors duration-200 rounded-md bg-transparent p-0 gap-2 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-step.p-disabled .p-step-header { + @apply cursor-default; +} + +.p-stepper.p-stepper-readonly .p-step { + @apply cursor-auto; +} + +.p-step-title { + @apply block whitespace-nowrap overflow-hidden text-ellipsis max-w-full + text-surface-500 dark:text-surface-400 font-medium transition-colors duration-200; +} + +.p-step-number { + @apply flex items-center justify-center text-surface-500 dark:text-surface-400 + bg-surface-0 dark:bg-surface-900 border-2 border-surface-200 dark:border-surface-700 + min-w-8 h-8 leading-8 text-lg font-medium rounded-full z-10 relative + after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]; +} + +.p-step-active .p-step-header { + @apply cursor-default; +} + +.p-step-active .p-step-number { + @apply bg-surface-0 dark:bg-surface-900 text-primary border-surface-200 dark:border-surface-700; +} + +.p-step-active .p-step-title { + @apply text-primary; +} + +.p-step:not(.p-disabled):focus-visible { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-step:has(~ .p-step-active) .p-stepper-separator { + @apply bg-primary; +} + +.p-stepper-separator { + @apply flex-1 bg-surface-200 dark:bg-surface-700 w-full h-[2px] transition-colors duration-200; +} + +.p-steppanels { + @apply pt-[0.875rem] pb-[1.125rem] px-2; +} + +.p-steppanel { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0; +} + +.p-stepper:has(.p-stepitem) { + @apply flex flex-col; +} + +.p-stepitem { + @apply flex flex-col flex-initial; +} + +.p-stepitem.p-stepitem-active { + @apply flex-auto; +} + +.p-stepitem .p-step { + @apply flex-initial; +} + +.p-stepitem .p-steppanel-content { + @apply w-full ps-4; +} + +.p-stepitem .p-steppanel { + @apply flex flex-auto; +} + +.p-stepitem .p-stepper-separator { + @apply flex-grow-0 flex-shrink-0 basis-auto w-[2px] h-auto ms-[1.625rem] relative start-[-2.5px]; +} + +.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator { + @apply bg-primary; +} + +.p-stepitem:last-of-type .p-steppanel { + @apply ps-8; +} diff --git a/src/assets/primevue/tabs.css b/src/assets/primevue/tabs.css new file mode 100644 index 0000000..dda4433 --- /dev/null +++ b/src/assets/primevue/tabs.css @@ -0,0 +1,84 @@ +.p-tabs { + @apply flex flex-col; +} + +.p-tablist { + @apply flex relative; +} + +.p-tabs-scrollable > .p-tablist { + @apply overflow-hidden; +} + +.p-tablist-viewport { + @apply overflow-x-auto overflow-y-hidden overscroll-y-contain overscroll-x-auto; +} + +.p-tablist-viewport::-webkit-scrollbar { + @apply hidden; +} + +.p-tablist-tab-list { + @apply relative flex bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700; +} + +.p-tablist-content { + @apply flex-grow; +} + +.p-tablist-nav-button { + @apply !absolute flex-shrink-0 top-0 z-20 h-full flex items-center justify-center cursor-pointer + bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 w-10 + shadow-[0px_0px_10px_50px_rgba(255,255,255,0.6)] dark:shadow-[0px_0px_10px_50px] dark:shadow-surface-900/50 + focus-visible:z-10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary + transition-colors duration-200; +} + +.p-tablist-prev-button { + @apply start-0; +} + +.p-tablist-next-button { + @apply end-0; +} + +.p-tablist-prev-button:dir(rtl), +.p-tablist-next-button:dir(rtl) { + @apply rotate-180; +} + +.p-tab { + @apply flex-shrink-0 cursor-pointer select-none relative whitespace-nowrap py-4 px-[1.125rem] + border-b border-surface-200 dark:border-surface-700 font-semibold + text-surface-500 dark:text-surface-400 + transition-colors duration-200 -mb-px; +} + +.p-tab.p-disabled { + @apply cursor-default; +} + +.p-tab:not(.p-disabled):focus-visible { + @apply z-10 outline outline-1 outline-offset-[-1px] outline-primary; +} + +.p-tab:not(.p-tab-active):not(.p-disabled):hover { + @apply text-surface-700 dark:text-surface-0; +} + +.p-tab-active { + @apply border-primary text-primary; +} + +.p-tabpanels { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 + pt-[0.875rem] pb-[1.125rem] px-[1.125rem] outline-none; +} + +.p-tablist-active-bar { + @apply z-10 block absolute -bottom-px h-px bg-primary transition-[left] duration-200 ease-[cubic-bezier(0.35,0,0.25,1)]; +} + +.p-tablist-viewport { + @apply [scrollbar-behavior:smooth] [scrollbar-width:none]; +} diff --git a/src/assets/primevue/tag.css b/src/assets/primevue/tag.css new file mode 100644 index 0000000..623a4d8 --- /dev/null +++ b/src/assets/primevue/tag.css @@ -0,0 +1,38 @@ +.p-tag { + @apply inline-flex items-center justify-center + bg-primary-100 dark:bg-primary-500/15 + text-primary-700 dark:text-primary-300 + text-sm font-bold py-1 px-2 rounded-md gap-1; +} + +.p-tag-icon { + @apply text-xs w-3 h-3; +} + +.p-tag-rounded { + @apply rounded-2xl; +} + +.p-tag-success { + @apply bg-green-100 dark:bg-green-500/15 text-green-700 dark:text-green-300; +} + +.p-tag-info { + @apply bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300; +} + +.p-tag-warn { + @apply bg-orange-100 dark:bg-orange-500/15 text-orange-700 dark:text-orange-300; +} + +.p-tag-danger { + @apply bg-red-100 dark:bg-red-500/15 text-red-700 dark:text-red-300; +} + +.p-tag-secondary { + @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300; +} + +.p-tag-contrast { + @apply bg-surface-950 dark:bg-surface-0 text-surface-0 dark:text-surface-950; +} diff --git a/src/assets/primevue/tailwind.css b/src/assets/primevue/tailwind.css new file mode 100644 index 0000000..7aec513 --- /dev/null +++ b/src/assets/primevue/tailwind.css @@ -0,0 +1,104 @@ +@import './common'; + +/* Form */ +@import './autocomplete'; +@import './cascadeselect'; +@import './checkbox'; +@import './colorpicker'; +@import './datepicker'; +@import './iconfield'; +@import './iftalabel'; +@import './inputgroup'; +@import './inputnumber'; +@import './inputotp'; +@import './inputtext'; +@import './floatlabel'; +@import './knob'; +@import './listbox'; +@import './multiselect'; +@import './password'; +@import './radiobutton'; +@import './rating'; +@import './select'; +@import './selectbutton'; +@import './slider'; +@import './textarea'; +@import './togglebutton'; +@import './toggleswitch'; +@import './treeselect'; + +/* Button */ +@import './button'; +@import './buttongroup'; +@import './speeddial'; +@import './splitbutton'; + +/* Data */ +@import './datatable'; +@import './dataview'; +@import './paginator'; +@import './picklist'; +@import './orderlist'; +@import './organizationchart'; +@import './timeline'; +@import './tree'; +@import './treetable'; + +/* Overlay */ +@import './confirmdialog'; +@import './confirmpopup'; +@import './dialog'; +@import './drawer'; +@import './popover'; +@import './tooltip'; + +/* Menu */ +@import './breadcrumb'; +@import './contextmenu'; +@import './dock'; +@import './menu'; +@import './menubar'; +@import './megamenu'; +@import './panelmenu'; +@import './tieredmenu'; + +/* Panel */ +@import './accordion'; +@import './card'; +@import './divider'; +@import './fieldset'; +@import './panel'; +@import './scrollpanel'; +@import './splitter'; +@import './stepper'; +@import './tabs'; +@import './toolbar'; + +/* File */ +@import './fileupload'; + +/* Message */ +@import './message'; +@import './toast'; + +/* Media */ +@import './carousel'; +@import './galleria'; +@import './image'; +@import './imagecompare'; + +/* Misc */ +@import './avatar'; +@import './badge'; +@import './blockui'; +@import './chip'; +@import './inplace'; +@import './metergroup'; +@import './overlaybadge'; +@import './progressbar'; +@import './progressspinner'; +@import './ripple'; +@import './scrolltop'; +@import './skeleton'; +@import './tag'; +@import './terminal'; diff --git a/src/assets/primevue/terminal.css b/src/assets/primevue/terminal.css new file mode 100644 index 0000000..81de176 --- /dev/null +++ b/src/assets/primevue/terminal.css @@ -0,0 +1,22 @@ +.p-terminal { + @apply h-72 overflow-auto px-3 py-2 rounded-md + border border-surface-300 dark:border-surface-700 + bg-surface-0 dark:bg-surface-950 + text-surface-700 dark:text-surface-0; +} + +.p-terminal-prompt { + @apply flex items-center; +} + +.p-terminal-prompt-value { + @apply flex-auto border-none bg-transparent text-inherit p-0 outline-none text-base; +} + +.p-terminal-prompt-label { + @apply me-1; +} + +.p-terminal-input::-ms-clear { + @apply hidden; +} diff --git a/src/assets/primevue/textarea.css b/src/assets/primevue/textarea.css new file mode 100644 index 0000000..06ff07d --- /dev/null +++ b/src/assets/primevue/textarea.css @@ -0,0 +1,38 @@ +.p-textarea { + @apply appearance-none rounded-md + border border-surface-300 dark:border-surface-700 + enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600 + enabled:focus:border-primary + bg-surface-0 dark:bg-surface-950 + text-surface-700 dark:text-surface-0 + disabled:bg-surface-200 disabled:text-surface-500 disabled:opacity-100 dark:disabled:bg-surface-700 dark:disabled:text-surface-400 + placeholder:text-surface-500 dark:placeholder:text-surface-400 + px-3 py-2 + transition-colors duration-200 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + outline-none; +} + +.p-textarea.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-textarea.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-textarea-fluid { + @apply w-full; +} + +.p-textarea-resizable { + @apply overflow-hidden resize-none; +} + +.p-textarea-sm { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-textarea-lg { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} diff --git a/src/assets/primevue/tieredmenu.css b/src/assets/primevue/tieredmenu.css new file mode 100644 index 0000000..79b27e1 --- /dev/null +++ b/src/assets/primevue/tieredmenu.css @@ -0,0 +1,108 @@ +.p-tieredmenu { + @apply bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + rounded-md min-w-52; +} + +.p-tieredmenu-root-list, +.p-tieredmenu-submenu { + @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]; +} + +.p-tieredmenu-submenu { + @apply absolute min-w-full z-10 rounded-md + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-tieredmenu-item { + @apply relative; +} + +.p-tieredmenu-item-content { + @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0; +} + +.p-tieredmenu-item-link { + @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit + px-3 py-2 gap-2 select-none outline-none; +} + +.p-tieredmenu-item-icon { + @apply text-surface-400 dark:text-surface-500; +} + +.p-tieredmenu-submenu-icon { + @apply text-surface-400 dark:text-surface-500 ms-auto text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-item-active > .p-tieredmenu-item-content { + @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0; +} + +.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-tieredmenu-separator { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-tieredmenu-overlay { + @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + @apply opacity-0; +} + +.p-tieredmenu-enter-active { + @apply transition-opacity duration-[250ms]; +} + +.p-tieredmenu-mobile .p-tieredmenu-submenu { + @apply static shadow-none border-none ps-4 pe-0; +} + +.p-tieredmenu-mobile .p-tieredmenu-submenu-icon { + @apply transition-transform duration-200 rotate-90; +} + +.p-tieredmenu-mobile + .p-tieredmenu-item-active + > .p-tieredmenu-item-content + .p-tieredmenu-submenu-icon { + @apply -rotate-90; +} diff --git a/src/assets/primevue/timeline.css b/src/assets/primevue/timeline.css new file mode 100644 index 0000000..d2c2263 --- /dev/null +++ b/src/assets/primevue/timeline.css @@ -0,0 +1,121 @@ +.p-timeline { + @apply flex flex-col flex-grow; +} + +.p-timeline-left .p-timeline-event-opposite { + @apply text-end; +} + +.p-timeline-left .p-timeline-event-content { + @apply text-start; +} + +.p-timeline-right .p-timeline-event { + @apply flex-row-reverse; +} + +.p-timeline-right .p-timeline-event-opposite { + @apply text-start; +} + +.p-timeline-right .p-timeline-event-content { + @apply text-end; +} + +.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) { + @apply flex-row-reverse; +} + +.p-timeline-vertical.p-timeline-alternate + .p-timeline-event:nth-child(odd) + .p-timeline-event-opposite { + @apply text-end; +} + +.p-timeline-vertical.p-timeline-alternate + .p-timeline-event:nth-child(odd) + .p-timeline-event-content { + @apply text-start; +} + +.p-timeline-vertical.p-timeline-alternate + .p-timeline-event:nth-child(even) + .p-timeline-event-opposite { + @apply text-start; +} + +.p-timeline-vertical.p-timeline-alternate + .p-timeline-event:nth-child(even) + .p-timeline-event-content { + @apply text-end; +} + +.p-timeline-vertical .p-timeline-event-opposite, +.p-timeline-vertical .p-timeline-event-content { + @apply py-0 px-4 leading-none; +} + +.p-timeline-vertical .p-timeline-event-connector { + @apply w-[2px]; +} + +.p-timeline-event { + @apply flex relative min-h-20 last:min-h-0; +} + +.p-timeline-event-opposite { + @apply flex-1; +} + +.p-timeline-event-content { + @apply flex-1; +} + +.p-timeline-event-separator { + @apply flex-none flex flex-col items-center; +} + +.p-timeline-event-marker { + @apply inline-flex items-center justify-center relative self-baseline + border-2 rounded-full border-surface-200 dark:border-surface-700 w-[1.125rem] h-[1.125rem] + bg-surface-0 dark:bg-surface-900 + before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary + after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]; +} + +.p-timeline-event-connector { + @apply flex-grow bg-surface-200 dark:bg-surface-700; +} + +.p-timeline-horizontal { + @apply flex-row; +} + +.p-timeline-horizontal .p-timeline-event { + @apply flex-col flex-1; +} + +.p-timeline-horizontal .p-timeline-event:last-child { + @apply flex-none; +} + +.p-timeline-horizontal .p-timeline-event-separator { + @apply flex-row; +} + +.p-timeline-horizontal .p-timeline-event-connector { + @apply w-full h-[2px]; +} + +.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline-horizontal .p-timeline-event-content { + @apply py-4 px-0; +} + +.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + @apply flex-col-reverse; +} + +.p-timeline-bottom .p-timeline-event { + @apply flex-col-reverse; +} diff --git a/src/assets/primevue/toast.css b/src/assets/primevue/toast.css new file mode 100644 index 0000000..ca13385 --- /dev/null +++ b/src/assets/primevue/toast.css @@ -0,0 +1,172 @@ +.p-toast { + @apply w-96 rounded-md whitespace-pre-line break-words; +} + +.p-toast-message { + @apply mb-4; +} + +.p-toast-message-icon { + @apply flex-shrink-0 text-lg w-[1.125rem] h-[1.125rem]; +} + +.p-toast-message-content { + @apply flex items-start p-3 gap-2; +} + +.p-toast-message-text { + @apply flex-auto flex flex-col gap-2; +} + +.p-toast-summary { + @apply font-medium text-base; +} + +.p-toast-detail { + @apply font-medium text-sm; +} + +.p-toast-close-button { + @apply flex items-center justify-center overflow-hidden relative cursor-pointer bg-transparent select-none + transition-colors duration-200 text-inherit w-7 h-7 rounded-full -mt-[25%] -end-1/4 p-0 border-none + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2; +} + +.p-toast-close-button:dir(rtl) { + @apply ms-auto end-auto; +} + +.p-toast-message-info, +.p-toast-message-success, +.p-toast-message-warn, +.p-toast-message-error, +.p-toast-message-secondary, +.p-toast-message-contrast { + @apply border backdrop-blur-sm dark:backdrop-blur-md rounded-md; +} + +.p-toast-close-icon { + @apply text-base w-4 h-4; +} + +.p-toast-message-info { + @apply bg-blue-50/95 border-blue-200 text-blue-600 + dark:bg-blue-500/15 dark:border-blue-700/35 dark:text-blue-500 + shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]; +} + +.p-toast-message-info .p-toast-detail { + @apply text-surface-700 dark:text-surface-0; +} + +.p-toast-message-info .p-toast-close-button { + @apply hover:bg-blue-100 focus-visible:outline-blue-600 + dark:hover:bg-white/5 dark:focus-visible:outline-blue-500; +} + +.p-toast-message-success { + @apply bg-green-50/95 border-green-200 text-green-600 + dark:bg-green-500/15 dark:border-green-700/35 dark:text-green-500 + shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]; +} + +.p-toast-message-success .p-toast-detail { + @apply text-surface-700 dark:text-surface-0; +} + +.p-toast-message-success .p-toast-close-button { + @apply hover:bg-green-100 focus-visible:outline-green-600 + dark:hover:bg-white/5 dark:focus-visible:outline-green-500; +} + +.p-toast-message-warn { + @apply bg-yellow-50/95 border-yellow-200 text-yellow-600 + dark:bg-yellow-500/15 dark:border-yellow-700/35 dark:text-yellow-500 + shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]; +} + +.p-toast-message-warn .p-toast-detail { + @apply text-surface-700 dark:text-surface-0; +} + +.p-toast-message-warn .p-toast-close-button { + @apply hover:bg-yellow-100 focus-visible:outline-yellow-600 + dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500; +} + +.p-toast-message-error { + @apply bg-red-50/95 border-red-200 text-red-600 + dark:bg-red-500/15 dark:border-red-700/35 dark:text-red-500 + shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]; +} + +.p-toast-message-error .p-toast-detail { + @apply text-surface-700 dark:text-surface-0; +} + +.p-toast-message-error .p-toast-close-button { + @apply hover:bg-red-100 focus-visible:outline-red-600 + dark:hover:bg-white/5 dark:focus-visible:outline-red-500; +} + +.p-toast-message-secondary { + @apply bg-surface-100 border-surface-200 text-surface-600 + dark:bg-surface-800 dark:border-surface-700 dark:text-surface-300 + shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]; +} + +.p-toast-message-secondary .p-toast-detail { + @apply text-surface-700 dark:text-surface-0; +} + +.p-toast-message-secondary .p-toast-close-button { + @apply hover:bg-surface-200 focus-visible:outline-surface-600 + dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300; +} + +.p-toast-message-contrast { + @apply bg-surface-900 border-surface-950 text-surface-50 + dark:bg-surface-0 dark:border-surface-100 dark:text-surface-950 + shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]; +} + +.p-toast-message-contrast .p-toast-detail { + @apply text-surface-0 dark:text-surface-950; +} + +.p-toast-message-contrast .p-toast-close-button { + @apply hover:bg-surface-800 focus-visible:outline-surface-50 + dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950; +} + +.p-toast-top-center { + @apply -translate-x-1/2; +} + +.p-toast-bottom-center { + @apply -translate-x-1/2; +} + +.p-toast-center { + @apply min-w-[20vw] -translate-x-1/2 -translate-y-1/2; +} + +.p-toast-message-enter-from { + @apply opacity-0 translate-y-1/2; +} + +.p-toast-message-leave-from { + @apply max-h-[1000px]; +} + +.p-toast .p-toast-message.p-toast-message-leave-to { + @apply max-h-0 opacity-0 mb-0 overflow-hidden; +} + +.p-toast-message-enter-active { + @apply [transition:transform_0.3s,opacity_0.3s]; +} + +.p-toast-message-leave-active { + @apply [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin-bottom_0.3s]; +} diff --git a/src/assets/primevue/togglebutton.css b/src/assets/primevue/togglebutton.css new file mode 100644 index 0000000..e517f38 --- /dev/null +++ b/src/assets/primevue/togglebutton.css @@ -0,0 +1,63 @@ +.p-togglebutton { + @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none + border border-surface-100 dark:border-surface-950 rounded-md + bg-surface-100 dark:bg-surface-950 + text-surface-500 dark:text-surface-400 text-base font-medium + px-4 py-2 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary + disabled:opacity-100 disabled:cursor-default + disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500 + disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400 + transition-colors duration-300 + before:bg-transparent before:absolute before:start-1 before:top-1 before:rounded-md before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] + before:transition-colors before:duration-200; +} + +.p-togglebutton-content { + @apply relative inline-flex items-center justify-center gap-2; +} + +.p-togglebutton-label, +.p-togglebutton-icon { + @apply relative transition-none; +} + +.p-togglebutton.p-togglebutton-checked::before { + @apply bg-surface-0 dark:bg-surface-800 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]; +} + +.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover { + @apply bg-surface-100 dark:bg-surface-950 text-surface-700 dark:text-surface-300; +} + +.p-togglebutton.p-togglebutton-checked { + @apply bg-surface-100 dark:bg-surface-950 border-surface-100 dark:border-surface-950 text-surface-900 dark:text-surface-0; +} + +.p-togglebutton.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-togglebutton-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon { + @apply text-surface-700 dark:text-surface-300; +} + +.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon { + @apply text-surface-900 dark:text-surface-0; +} + +.p-togglebutton:disabled .p-togglebutton-icon { + @apply text-surface-500 dark:text-surface-400; +} + +.p-togglebutton-sm { + @apply text-sm px-[0.75rem] py-[0.375rem]; +} + +.p-togglebutton-lg { + @apply text-lg px-[1.25rem] py-[0.625rem]; +} diff --git a/src/assets/primevue/toggleswitch.css b/src/assets/primevue/toggleswitch.css new file mode 100644 index 0000000..921d64e --- /dev/null +++ b/src/assets/primevue/toggleswitch.css @@ -0,0 +1,68 @@ +.p-toggleswitch { + @apply inline-block w-10 h-6; +} + +.p-toggleswitch-input { + @apply cursor-pointer disabled:cursor-default appearance-none absolute top-0 start-0 w-full h-full m-0 p-0 opacity-0 z-10 rounded-[30px]; +} + +.p-toggleswitch-slider { + @apply inline-block w-full h-full rounded-[30px] shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + bg-surface-300 dark:bg-surface-700 + border border-transparent + transition-colors duration-200; +} + +.p-toggleswitch-handle { + @apply absolute top-1/2 flex justify-center items-center + bg-surface-0 dark:bg-surface-400 + text-surface-500 dark:text-surface-900 + w-4 h-4 start-1 -mt-2 rounded-full + transition-[background,color,left] duration-200; +} + +.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider { + @apply bg-primary; +} + +.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle { + @apply bg-surface-0 dark:bg-surface-900 text-primary start-5; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider { + @apply bg-surface-400 dark:bg-surface-600; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle { + @apply bg-surface-0 dark:bg-surface-300 text-surface-700 dark:text-surface-800; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked + .p-toggleswitch-slider { + @apply bg-primary-emphasis; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked + .p-toggleswitch-handle { + @apply bg-surface-0 dark:bg-surface-900 text-primary-emphasis; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-toggleswitch.p-invalid > .p-toggleswitch-slider { + @apply border-red-400 dark:border-red-300; +} + +.p-toggleswitch.p-disabled { + @apply opacity-100; +} + +.p-toggleswitch.p-disabled .p-toggleswitch-slider { + @apply bg-surface-200 dark:bg-surface-600; +} + +.p-toggleswitch.p-disabled .p-toggleswitch-handle { + @apply bg-surface-700 dark:bg-surface-900; +} diff --git a/src/assets/primevue/toolbar.css b/src/assets/primevue/toolbar.css new file mode 100644 index 0000000..c11c387 --- /dev/null +++ b/src/assets/primevue/toolbar.css @@ -0,0 +1,12 @@ +.p-toolbar { + @apply flex items-center justify-between flex-wrap p-3 gap-2 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0 + border border-surface-200 dark:border-surface-700 rounded-md; +} + +.p-toolbar-start, +.p-toolbar-center, +.p-toolbar-end { + @apply flex items-center; +} diff --git a/src/assets/primevue/tooltip.css b/src/assets/primevue/tooltip.css new file mode 100644 index 0000000..2c9eeed --- /dev/null +++ b/src/assets/primevue/tooltip.css @@ -0,0 +1,38 @@ +.p-tooltip { + @apply absolute hidden max-w-48; +} + +.p-tooltip-right, +.p-tooltip-left { + @apply py-0 px-1; +} + +.p-tooltip-top, +.p-tooltip-bottom { + @apply py-1 px-0; +} + +.p-tooltip-text { + @apply whitespace-pre-line break-words bg-surface-700 text-surface-0 py-2 px-3 + rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-tooltip-arrow { + @apply absolute w-0 h-0 border-solid border-transparent; +} + +.p-tooltip-right .p-tooltip-arrow { + @apply -mt-1 border-[.25rem] border-s-0 border-e-surface-700 rtl:rotate-180; +} + +.p-tooltip-left .p-tooltip-arrow { + @apply -mt-1 border-[.25rem] border-e-0 border-s-surface-700 rtl:rotate-180; +} + +.p-tooltip-top .p-tooltip-arrow { + @apply -ms-1 border-[.25rem] border-b-0 border-t-surface-700; +} + +.p-tooltip-bottom .p-tooltip-arrow { + @apply -ms-1 border-[.25rem] border-t-0 border-b-surface-700; +} diff --git a/src/assets/primevue/tree.css b/src/assets/primevue/tree.css new file mode 100644 index 0000000..044aa06 --- /dev/null +++ b/src/assets/primevue/tree.css @@ -0,0 +1,103 @@ +.p-tree { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 p-4; +} + +.p-tree-root-children, +.p-tree-node-children { + @apply flex flex-col list-none m-0 gap-[2px]; +} + +.p-tree-root-children { + @apply pt-[2px] pb-0 px-0; +} + +.p-tree-node-children { + @apply pt-[2px] pe-0 pb-0 ps-4; +} + +.p-tree-node { + @apply p-0 outline-none; +} + +.p-tree-node-content { + @apply rounded-md px-2 py-1 flex items-center text-surface-700 dark:text-surface-0 gap-1 transition-colors duration-200; +} + +.p-tree-node:focus-visible > .p-tree-node-content { + @apply outline outline-1 outline-offset-2 outline-primary; +} + +.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover { + @apply bg-surface-100 text-surface-700 dark:bg-surface-800 dark:text-surface-0; +} + +.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon { + @apply text-surface-600 dark:text-surface-300; +} + +.p-tree-node-content.p-tree-node-selected { + @apply bg-highlight; +} + +.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button { + @apply text-inherit; +} + +.p-tree-node-toggle-button { + @apply cursor-pointer select-none inline-flex justify-center rounded-full items-center overflow-hidden relative flex-shrink-0 + w-7 h-7 p-0 transition-colors duration-200 border-none + bg-transparent enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-800 + text-surface-500 dark:text-surface-400 enabled:hover:text-surface-600 dark:enabled:hover:text-surface-300; +} + +.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover { + @apply bg-surface-0 dark:bg-surface-900 text-primary; +} + +.p-tree-root { + @apply overflow-auto; +} + +.p-tree-node-selectable { + @apply cursor-pointer select-none; +} + +.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button { + @apply invisible; +} + +.p-tree-node-icon { + @apply text-surface-500 dark:text-surface-400 transition-colors duration-200; +} + +.p-tree-node-content.p-tree-node-selected .p-tree-node-icon { + @apply text-primary; +} + +.p-tree-filter { + @apply mb-2; +} + +.p-tree-filter-input { + @apply w-full; +} + +.p-tree-loading { + @apply relative h-full; +} + +.p-tree-loading-icon { + @apply text-[2rem] h-8 w-8; +} + +.p-tree .p-tree-mask { + @apply absolute z-10 flex items-center justify-center; +} + +.p-tree-flex-scrollable { + @apply flex flex-1 h-full flex-col; +} + +.p-tree-flex-scrollable .p-tree-root { + @apply flex-1; +} diff --git a/src/assets/primevue/treeselect.css b/src/assets/primevue/treeselect.css new file mode 100644 index 0000000..9cec938 --- /dev/null +++ b/src/assets/primevue/treeselect.css @@ -0,0 +1,115 @@ +@import './chip'; +@import './tree'; + +.p-treeselect { + @apply inline-flex cursor-pointer relative select-none rounded-md + bg-surface-0 dark:bg-surface-950 + border border-surface-300 dark:border-surface-700 + shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] + transition-colors duration-200; +} + +.p-treeselect:not(.p-disabled):hover { + @apply border-surface-400 dark:border-surface-600; +} + +.p-treeselect:not(.p-disabled).p-focus { + @apply border-primary; +} + +.p-treeselect.p-variant-filled { + @apply bg-surface-50 dark:bg-surface-800; +} + +.p-treeselect.p-invalid { + @apply border-red-400 dark:border-red-300; +} + +.p-treeselect.p-disabled { + @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default; +} + +.p-treeselect-dropdown { + @apply flex items-center justify-center shrink-0 bg-transparent + text-surface-500 dark:text-surface-400 w-10 rounded-e-md; +} + +.p-treeselect-clear-icon { + @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10; +} + +.p-treeselect-label-container { + @apply overflow-hidden flex-auto; +} + +.p-treeselect-label { + @apply flex items-center gap-1 whitespace-nowrap text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0; +} + +.p-treeselect-label.p-placeholder { + @apply text-surface-500 dark:text-surface-400; +} + +.p-treeselect.p-disabled .p-treeselect-label { + @apply text-surface-500 dark:text-surface-400; +} + +.p-treeselect-label-empty { + @apply overflow-hidden invisible; +} + +.p-treeselect .p-treeselect-overlay { + @apply min-w-full; +} + +.p-treeselect-overlay { + @apply absolute top-0 left-0 rounded-md + bg-surface-0 dark:bg-surface-900 + border border-surface-200 dark:border-surface-700 + text-surface-700 dark:text-surface-0 + shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]; +} + +.p-treeselect-tree-container { + @apply overflow-auto; +} + +.p-treeselect-empty-message { + @apply px-3 py-2; +} + +.p-treeselect-fluid { + @apply flex; +} + +.p-treeselect-overlay .p-tree { + @apply p-1; +} + +.p-treeselect-overlay .p-tree-loading { + @apply min-h-12; +} + +.p-treeselect-label .p-chip { + @apply pt-1 pb-1 rounded-sm; +} + +.p-treeselect-label:has(.p-chip) { + @apply py-1 px-1; +} + +.p-treeselect-sm .p-treeselect-label { + @apply text-sm px-[0.625rem] py-[0.375rem]; +} + +.p-treeselect-sm .p-treeselect-dropdown .p-icon { + @apply text-sm w-[0.875rem] h-[0.875rem]; +} + +.p-treeselect-lg .p-treeselect-label { + @apply text-lg px-[0.875rem] py-[0.625rem]; +} + +.p-treeselect-lg .p-treeselect-dropdown .p-icon { + @apply text-lg w-[1.125rem] h-[1.125rem]; +} diff --git a/src/assets/primevue/treetable.css b/src/assets/primevue/treetable.css new file mode 100644 index 0000000..75cd009 --- /dev/null +++ b/src/assets/primevue/treetable.css @@ -0,0 +1,312 @@ +@import './paginator'; + +.p-treetable { + @apply relative; +} + +.p-treetable-table { + @apply border-spacing-0 w-full; +} + +.p-treetable-scrollable > .p-treetable-table-container { + @apply relative; +} + +.p-treetable-scrollable-table > .p-treetable-thead { + @apply top-0 z-10; +} + +.p-treetable-scrollable-table > .p-treetable-frozen-tbody { + @apply sticky z-10; +} + +.p-treetable-scrollable-table > .p-treetable-tfoot { + @apply bottom-0 z-10; +} + +.p-treetable-scrollable .p-treetable-frozen-column { + @apply sticky bg-surface-0 dark:bg-surface-900; +} + +.p-treetable-scrollable th.p-treetable-frozen-column { + @apply z-10; +} + +.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead { + @apply bg-surface-0 dark:bg-surface-900; +} + +.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot { + @apply bg-surface-0 dark:bg-surface-900; +} + +.p-treetable-flex-scrollable { + @apply flex flex-col h-full; +} + +.p-treetable-flex-scrollable > .p-treetable-table-container { + @apply flex flex-col flex-1 h-full; +} + +.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header { + @apply sticky z-10; +} + +.p-treetable-resizable-table > .p-treetable-thead > tr > th, +.p-treetable-resizable-table > .p-treetable-tfoot > tr > td, +.p-treetable-resizable-table > .p-treetable-tbody > tr > td { + @apply overflow-hidden whitespace-nowrap; +} + +.p-treetable-resizable-table + > .p-treetable-thead + > tr + > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) { + @apply bg-clip-padding relative; +} + +.p-treetable-resizable-table-fit + > .p-treetable-thead + > tr + > th.p-treetable-resizable-column:last-child + .p-treetable-column-resizer { + @apply hidden; +} + +.p-treetable-column-resizer { + @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent; +} + +.p-treetable-column-header-content { + @apply flex items-center gap-2; +} + +.p-treetable-column-resize-indicator { + @apply w-px absolute z-10 hidden bg-primary; +} + +.p-treetable-mask { + @apply absolute flex items-center justify-center z-20; +} + +.p-treetable-paginator-top { + @apply border-b border-surface-200 dark:border-surface-700; +} + +.p-treetable-paginator-bottom { + @apply border-t border-surface-200 dark:border-surface-700; +} + +.p-treetable-header { + @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-treetable-footer { + @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-treetable-header-cell { + @apply py-3 px-4 font-normal text-start transition-colors duration-200 + border-b border-surface-200 dark:border-surface-700 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-treetable-column-title { + @apply font-semibold; +} + +.p-treetable-tbody > tr { + @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200; +} + +.p-treetable-tbody > tr > td { + @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800; +} + +.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-treetable-tbody > tr.p-treetable-row-selected { + @apply bg-highlight; +} + +.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td { + @apply border-b-primary-100 dark:border-b-primary-900; +} + +.p-treetable-tbody > tr.p-treetable-row-selected > td { + @apply border-b-primary-100 dark:border-b-primary-900; +} + +.p-treetable-tbody > tr:focus-visible, +.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected { + @apply outline outline-1 -outline-offset-1 outline-primary; +} + +.p-treetable-tfoot > tr > td { + @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800 + bg-surface-0 dark:bg-surface-900 + text-surface-700 dark:text-surface-0; +} + +.p-treetable-column-footer { + @apply font-semibold; +} + +.p-treetable-sortable-column { + @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary; +} + +.p-treetable-column-title, +.p-treetable-sort-icon, +.p-treetable-sort-badge { + @apply align-middle; +} + +.p-treetable-sort-icon { + @apply text-surface-500 dark:text-surface-400 transition-colors duration-200; +} + +.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover { + @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0; +} + +.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon { + @apply text-surface-600 dark:text-surface-300; +} + +.p-treetable-column-sorted { + @apply bg-highlight; +} + +.p-treetable-column-sorted .p-treetable-sort-icon { + @apply bg-highlight; +} + +.p-treetable-hoverable .p-treetable-selectable-row { + @apply cursor-pointer; +} + +.p-treetable-loading-icon { + @apply text-[2rem] w-8 h-8; +} + +.p-treetable-gridlines .p-treetable-header { + @apply border-t border-x; +} + +.p-treetable-gridlines .p-treetable-footer { + @apply border-b border-x; +} + +.p-treetable-gridlines .p-treetable-paginator-top { + @apply border-t border-x; +} + +.p-treetable-gridlines .p-treetable-paginator-bottom { + @apply border-b border-x; +} + +.p-treetable-gridlines .p-treetable-thead > tr > th { + @apply border-t border-x last:border; +} + +.p-treetable-gridlines .p-treetable-tbody > tr > td { + @apply border-t border-s last:border-r; +} + +.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td { + @apply border-y border-s last:border; +} + +.p-treetable-gridlines .p-treetable-tfoot > tr > td { + @apply border-y border-s last:border; +} + +.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td { + @apply border-b border-s last:border-r; +} + +.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) + .p-treetable-tbody + > tr + > td { + @apply border-b border-s last:border-r; +} + +.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) + .p-treetable-tbody + > tr:last-child + > td { + @apply border-x; +} + +.p-treetable.p-treetable-sm .p-treetable-header { + @apply py-1 px-2; +} + +.p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + @apply py-1 px-2; +} + +.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + @apply py-1 px-2; +} + +.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + @apply py-1 px-2; +} + +.p-treetable.p-treetable-sm .p-treetable-footer { + @apply py-1 px-2; +} + +.p-treetable.p-treetable-lg .p-treetable-header { + @apply py-4 px-5; +} + +.p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + @apply py-4 px-5; +} + +.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td { + @apply py-4 px-5; +} + +.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td { + @apply py-4 px-5; +} + +.p-treetable.p-treetable-lg .p-treetable-footer { + @apply py-4 px-5; +} + +.p-treetable-body-cell-content { + @apply flex items-center gap-2; +} + +.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button { + @apply text-inherit; +} + +.p-treetable-node-toggle-button { + @apply inline-flex items-center justify-center overflow-hidden relative select-none + transition-colors duration-200 w-7 h-7 rounded-full border-none bg-transparent cursor-pointer + enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-900 + text-surface-500 dark:text-surface-400 enabled:hover:text-surface-700 dark:enabled:hover:text-surface-0 + focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary; +} + +.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover { + @apply bg-surface-0 dark:bg-surface-900 text-primary; +} + +.p-treetable-node-toggle-icon:dir(rtl) { + @apply rotate-180; +} diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css new file mode 100644 index 0000000..2e77632 --- /dev/null +++ b/src/assets/tailwind.css @@ -0,0 +1,4 @@ +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; +@import './primevue/tailwind.css'; +@import 'tailwindcss/utilities'; diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index a2eabd1..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index 674b490..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,94 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index 6d7086a..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b05..0000000 --- a/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791c..0000000 --- a/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f07..0000000 --- a/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834..0000000 --- a/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d..0000000 --- a/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/src/main.ts b/src/main.ts index 48dad43..7e48b96 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,11 +1,18 @@ -import './assets/main.css' +import PrimeVue from 'primevue/config' +import './style.css' +import './assets/tailwind.css' import { createApp } from 'vue' import { createPinia } from 'pinia' -import App from './App.vue' +import App from './App.vue' const app = createApp(App) app.use(createPinia()) +app.use(PrimeVue, { + theme: { + preset: 'none', + }, +}) app.mount('#app') diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..85d4106 --- /dev/null +++ b/src/style.css @@ -0,0 +1,74 @@ +/* Primary and Surface Palettes */ +:root { + --p-primary-50: #ecfdf5; + --p-primary-100: #d1fae5; + --p-primary-200: #a7f3d0; + --p-primary-300: #6ee7b7; + --p-primary-400: #34d399; + --p-primary-500: #10b981; + --p-primary-600: #059669; + --p-primary-700: #047857; + --p-primary-800: #065f46; + --p-primary-900: #064e3b; + --p-primary-950: #022c22; + --p-surface-0: #ffffff; + --p-surface-50: #fafafa; + --p-surface-100: #f4f4f5; + --p-surface-200: #e4e4e7; + --p-surface-300: #d4d4d8; + --p-surface-400: #a1a1aa; + --p-surface-500: #71717a; + --p-surface-600: #52525b; + --p-surface-700: #3f3f46; + --p-surface-800: #27272a; + --p-surface-900: #18181b; + --p-surface-950: #09090b; + --p-content-border-radius: 6px; +} + +/* Light */ +:root { + --p-primary-color: var(--p-primary-500); + --p-primary-contrast-color: var(--p-surface-0); + --p-primary-hover-color: var(--p-primary-600); + --p-primary-active-color: var(--p-primary-700); + --p-content-border-color: var(--p-surface-200); + --p-content-hover-background: var(--p-surface-100); + --p-content-hover-color: var(--p-surface-800); + --p-highlight-background: var(--p-primary-50); + --p-highlight-color: var(--p-primary-700); + --p-highlight-focus-background: var(--p-primary-100); + --p-highlight-focus-color: var(--p-primary-800); + --p-text-color: var(--p-surface-700); + --p-text-hover-color: var(--p-surface-800); + --p-text-muted-color: var(--p-surface-500); + --p-text-hover-muted-color: var(--p-surface-600); +} + +/* +* Dark Mode +* Defaults to system, change the selector to match the darkMode in tailwind.config. +* For example; +* darkMode: ['selector', '[class*="app-dark"]'] +* should be; +* :root[class="app-dark"] { +*/ +@media (prefers-color-scheme: dark) { + :root { + --p-primary-color: var(--p-primary-400); + --p-primary-contrast-color: var(--p-surface-900); + --p-primary-hover-color: var(--p-primary-300); + --p-primary-active-color: var(--p-primary-200); + --p-content-border-color: var(--p-surface-700); + --p-content-hover-background: var(--p-surface-800); + --p-content-hover-color: var(--p-surface-0); + --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%); + --p-highlight-color: rgba(255, 255, 255, 0.87); + --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%); + --p-highlight-focus-color: rgba(255, 255, 255, 0.87); + --p-text-color: var(--p-surface-0); + --p-text-hover-color: var(--p-surface-0); + --p-text-muted-color: var(--p-surface-400); + --p-text-hover-muted-color: var(--p-surface-300); + } +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..5f28182 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,9 @@ +/** @type {import('tailwindcss').Config} */ +import primeui from 'tailwindcss-primeui' +export default { + content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], + theme: { + extend: {}, + }, + plugins: [primeui], +}