@wippy-fe/theme 0.0.7

package/primevue/timeline.css

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

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

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

package/primevue/toggleswitch.css

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

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

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

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

package/primevue/treeselect.css

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