@wippy-fe/theme 0.0.7

package/primevue/listbox.css

@@ -0,0 +1,79 @@
+@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
+}

package/primevue/megamenu.css

@@ -0,0 +1,207 @@
+.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
+}

package/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
+}

package/primevue/menubar.css

@@ -0,0 +1,169 @@
+.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
+}