@wippy-fe/theme 0.0.7

package/primevue/datatable.css

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

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

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