@wippy-fe/theme 0.0.7

package/primevue/cascadeselect.css

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

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

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

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

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

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

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

package/primevue/contextmenu.css

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