@uxf/data-grid 10.0.0-beta.8 → 10.0.0-beta.81

package/tailwindui/styles.css

@@ -1,86 +1,179 @@
+@import url("react-data-grid/lib/styles.css");
+
+@layer rdg.Root {
+    .uxf-data-grid__table {
+        --rdg-color-scheme: light;
+        --rdg-color: theme("colors.lightHigh");
+        --rdg-border-color: theme("colors.lightBorder");
+        --rdg-summary-border-color: theme("colors.lightBorder");
+        --rdg-background-color: theme("colors.white");
+        --rdg-header-background-color: theme("colors.gray.50");
+        --rdg-row-hover-background-color: theme("colors.gray.50");
+        --rdg-row-selected-background-color: theme("colors.gray.100/.75");
+        --rdg-row-selected-hover-background-color: theme("colors.gray.200/.75");
+        --rdg-selection-color: theme("colors.lightBorder");
+        --rdg-font-size: 14px;
+
+        :root .dark & {
+            --rdg-color-scheme: dark;
+            --rdg-color: theme("colors.darkHigh");
+            --rdg-border-color: theme("colors.darkBorder");
+            --rdg-summary-border-color: theme("colors.darkBorder");
+            --rdg-background-color: theme("colors.gray.950");
+            --rdg-header-background-color: theme("colors.gray.900");
+            --rdg-row-hover-background-color: theme("colors.gray.950");
+            --rdg-row-selected-background-color: theme("colors.gray.900/.75");
+            --rdg-row-selected-hover-background-color: theme("colors.gray.800/.75");
+            --rdg-selection-color: theme("colors.darkBorder");
+            --rdg-font-size: 14px;
+        }
+    }
+}
+
 .uxf-data-grid {
-    @apply border border-gray-300 dark:border-gray-700 rounded;
+    border: 1px solid var(--rdg-border-color);
+    border-radius: theme("borderRadius.DEFAULT");
 
     &.no-border {
-        @apply border-0;
+        border-style: none;
     }
 
     &__action-cell {
-        @apply sticky right-0;
-
-        border-inline-start: 1px solid theme("colors.gray.200");
-
-        :root .dark & {
-            border-inline-start: 1px solid theme("colors.gray.700");
-        }
+        background-color: var(--rdg-background-color);
+        border-inline-start: 1px solid var(--rdg-border-color);
+        position: sticky;
+        right: 0;
     }
 
     &__action-cell-wrapper {
-        @apply flex items-center justify-center text-center w-full h-full space-x-2;
+        @apply space-x-2;
+
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        text-align: center;
+        width: 100%;
 
         .uxf-icon {
-            @apply text-gray-400 dark:text-gray-500;
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
     &__body-cell {
         &--boolean {
-            @apply w-full h-full flex items-center;
+            align-items: center;
+            display: flex;
+            height: 100%;
+            width: 100%;
         }
     }
 
     &__drawer {
-        @apply fixed overflow-hidden z-10 bg-gray-900 bg-opacity-25 dark:bg-opacity-75 inset-0 transform ease-in-out;
+        @apply ease-in-out;
+
+        background-color: theme("colors.gray.900/.25");
+        inset: 0;
+        overflow: hidden;
+        position: fixed;
+        z-index: theme("zIndex.modal");
+
+        :root .dark & {
+            background-color: theme("colors.gray.900/.75");
+        }
 
         &--open {
-            @apply transition-opacity opacity-100 duration-500 translate-x-0;
+            @apply transition-opacity duration-500;
+
+            opacity: 100;
+            transform: translateX(0);
         }
 
         &--closed {
-            @apply transition-all delay-500 opacity-0 translate-x-full;
+            @apply transition-all delay-500;
+
+            opacity: 0;
+            transform: translateX(100%);
         }
 
         &-body-wrapper {
-            @apply w-11/12 max-w-sm right-0 absolute bg-white h-full shadow-xl duration-500 ease-in-out transition-all transform translate-x-full;
+            @apply transition-all duration-500 ease-in-out;
+
+            background-color: theme("colors.white");
+            box-shadow: theme("boxShadow.xl");
+            height: 100%;
+            max-width: theme("maxWidth.sm");
+            position: absolute;
+            right: 0;
+            transform: translateX(100%);
+            width: theme("width.11/12");
 
             &--open {
-                @apply translate-x-0;
+                transform: translateX(0);
             }
         }
 
         &-body {
-            @apply relative w-full max-w-sm pb-10 flex flex-col overflow-y-scroll h-full dark:bg-gray-950 dark:text-gray-100;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            max-width: theme("maxWidth.sm");
+            overflow-y: scroll;
+            padding-bottom: theme("spacing.10");
+            position: relative;
+            width: 100%;
+
+            :root .dark & {
+                background-color: theme("colors.gray.950");
+                color: theme("colors.gray.100");
+            }
         }
 
         &-close-button {
-            @apply ml-auto !mt-4 mr-4;
+            margin-left: auto;
+            margin-right: theme("spacing.4");
+            margin-top: theme("spacing.4") !important;
         }
 
         &-header {
-            @apply p-4 pt-8 font-bold text-lg;
+            font-weight: theme("fontWeight.bold");
+            padding: theme("spacing.8") theme("spacing.4") theme("spacing.4");
         }
 
         &-content {
-            @apply p-4;
+            padding: theme("spacing.4");
         }
 
         &-backdrop {
-            @apply w-screen h-full cursor-pointer;
+            cursor: pointer;
+            height: 100%;
+            width: 100vw;
         }
     }
 
     &__fallback {
+        align-items: center;
+        color: theme("colors.gray.600"); /* ?? */
+        display: flex;
         grid-column: 1/-1;
-
-        @apply flex items-center justify-center text-center text-gray-600; /* ?? */
+        justify-content: center;
+        text-align: center;
     }
 
     &__filter {
         &--interval {
-            @apply gap-4 grid grid-cols-[1fr_min-content_1fr];
+            display: grid;
+            gap: theme("spacing.4");
+            grid-template-columns: 1fr min-content 1fr;
 
             .uxf-data-grid__filter-gap {
-                @apply flex items-center pt-5;
+                align-items: center;
+                display: flex;
+                padding-top: theme("spacing.5");
             }
         }
     }
@@ -90,249 +183,396 @@
     }
 
     &__filter-list {
-        @apply p-2 space-x-2;
+        @apply space-x-2;
+
+        padding: theme("spacing.2");
     }
 
     &__footer {
-        @apply flex flex-wrap items-center justify-end p-2 gap-4;
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.4");
+        justify-content: flex-end;
+        padding: theme("spacing.2");
 
         &.no-border {
-            @apply px-0;
+            padding-inline: 0;
         }
     }
 
     &__linear-progress {
-        position: absolute;
-        z-index: 1;
+        border-radius: 20px;
+        height: 3px;
         left: 0;
-        right: 0;
         overflow: hidden;
-        height: 3px;
-        -webkit-border-radius: 20px;
-        -moz-border-radius: 20px;
-        border-radius: 20px;
+        position: absolute;
+        right: 0;
+        z-index: 1;
 
         &.is-loading::before {
-            content: '';
-            position: absolute;
-            left: -50%;
+            animation: datagridlineanim 1s linear infinite;
+            background-color: theme("colors.dataGridSecondary");
+            border-radius: inherit;
+            content: "";
             height: 3px;
+            left: -50%;
+            position: absolute;
             width: 40%;
-            background-color: theme("colors.dataGridSecondary");
-            -webkit-animation: datagridlineanim 1s linear infinite;
-            -moz-animation: datagridlineanim 1s linear infinite;
-            animation: datagridlineanim 1s linear infinite;
-            -webkit-border-radius: 20px;
-            -moz-border-radius: 20px;
-            border-radius: 20px;
         }
     }
 
     &__linear-progress-wrapper {
-        @apply relative;
+        position: relative;
     }
 
     &__pagination-counts {
-        @apply text-sm text-neutral-700 text-lightLow;
+        @apply text-sm;
+
+        color: theme("colors.lightLow");
     }
 
     &__plugin-fulltext {
-        @apply my-2 text-gray-400 w-full sm:w-auto;
+        color: theme("colors.gray.400");
+        margin: theme("spacing.2") 0;
+        width: 100%;
+
+        @screen sm {
+            width: auto;
+        }
 
         .uxf-icon {
-            @apply text-gray-400;
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
-    &__plugin-filter {
-        @apply my-2 shrink-0;
+    &__plugin-button {
+        flex-shrink: 0;
+        margin: theme("spacing.2") 0;
 
         .uxf-icon {
-            @apply text-gray-400;
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
     &__rows-per-page {
-        @apply flex flex-wrap gap-2 text-sm text-gray-700 items-center text-lightLow;
+        @apply text-sm;
+
+        align-items: center;
+        color: theme("colors.lightLow");
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.2");
 
         .uxf-select {
-            @apply w-28;
+            width: theme("width.28");
         }
     }
 
     &__select-row-checkbox-wrapper {
-        @apply flex items-center justify-center text-white w-full h-full;
+        align-items: center;
+        color: theme("colors.white");
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        width: 100%;
     }
 
     &__selected-rows-toolbar-wrapper {
-        @apply fixed bottom-8 left-0 right-0 flex flex-row justify-center items-center;
+        align-items: center;
+        bottom: theme("spacing.8");
+        display: flex;
+        justify-content: center;
+        left: 0;
+        position: fixed;
+        right: 0;
     }
 
     &__selected-rows-toolbar {
-        @apply text-white text-sm bg-dataGridPrimary rounded-full px-6 py-2 flex items-center justify-center drop-shadow-xl border border-gray-100 dark:border-gray-800;
+        @apply text-sm drop-shadow-xl;
+
+        align-items: center;
+        background-color: theme("colors.dataGridPrimary");
+        border: 1px solid theme("colors.lightBorder");
+        border-radius: 999px;
+        color: theme("colors.white");
+        display: flex;
+        justify-content: center;
+        padding: theme("spacing.2") theme("spacing.6");
+
+        :root .dark & {
+            border-color: theme("colors.darkBorder");
+        }
     }
 
     &__selected-rows-toolbar-actions {
-        @apply pl-4 space-x-2;
+        @apply space-x-2;
+
+        padding-left: theme("spacing.4");
     }
 
     &__table {
-        @apply rounded-none;
+        overflow-y: hidden;
+
+        &::-webkit-scrollbar {
+            height: 8px;
+            width: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb,
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: theme("colors.lightLow");
+            border-radius: 999px;
+
+            :root .dark & {
+                background-color: theme("colors.darkLow");
+            }
+        }
     }
 
     &__toolbar {
-        @apply flex flex-wrap gap-2 items-center justify-end border-b border-b-gray-300 dark:border-b-gray-700 px-2 md:pl-0 py-2 md:py-0;
+        align-items: center;
+        border-bottom: 1px solid theme("colors.lightBorder");
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.2");
+        justify-content: flex-end;
+        padding: theme("spacing.2");
+
+        :root .dark & {
+            border-bottom-color: theme("colors.darkBorder");
+        }
+
+        @screen md {
+            padding-block: 0;
+            padding-left: 0;
+        }
     }
 
     &__toolbar-tab {
-        @apply inline-flex items-center hover:text-gray-700 whitespace-nowrap p-4 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700;
+        @apply text-sm;
+
+        align-items: center;
+        border-bottom: 2px solid transparent;
+        color: theme("colors.lightMedium");
+        display: inline-flex;
+        font-weight: theme("fontWeight.medium");
+        padding: theme("spacing.4");
+        white-space: nowrap;
+
+        :root .dark & {
+            color: theme("colors.darkMedium");
+        }
+
+        &:hover {
+            color: theme("colors.lightHigh");
+
+            :root .dark & {
+                color: theme("colors.darkHigh");
+            }
+        }
 
         &.is-active {
-            @apply border-dataGridPrimary text-dataGridPrimary;
+            border-bottom-color: currentcolor;
+            color: theme("colors.dataGridPrimary");
         }
     }
 
     &__toolbar-tabs {
-        @apply flex flex-1 self-stretch;
+        align-self: stretch;
+        display: flex;
+        flex: 1;
 
         &-nav {
             &--desktop {
-                @apply -mb-px space-x-4 hidden;
+                @apply space-x-4;
 
-                @media screen(md) {
-                    @apply flex;
+                display: none;
+                margin-bottom: -1px;
+
+                @screen md {
+                    display: flex;
                 }
             }
 
             &--mobile {
-                @apply flex items-center z-10 w-max;
+                align-items: center;
+                display: flex;
+                width: max-content;
+                z-index: theme("zIndex.10");
 
-                @media screen(md) {
-                    @apply hidden;
+                @screen md {
+                    display: none;
                 }
 
                 .uxf-data-grid__toolbar-tabs-button {
-                    @apply m-0 flex items-center;
+                    align-items: center;
+                    display: flex;
+                    margin: 0;
 
                     &-icon {
-                        @apply ml-1 text-lightHigh dark:text-darkHigh;
+                        color: theme("colors.lightHigh");
+                        margin-left: theme("spacing.1");
+
+                        :root .dark & {
+                            color: theme("colors.darkHigh");
+                        }
                     }
                 }
             }
 
             &-text {
-                @apply text-lightHigh dark:text-darkHigh;
+                color: theme("colors.lightHigh");
+
+                :root .dark & {
+                    color: theme("colors.darkHigh");
+                }
             }
         }
 
         &-modal-content {
-            @apply flex flex-col items-start divide-y divide-lightBorder dark:divide-darkBorder pb-4 pt-1 text-left;
+            @apply divide-lightBorder dark:divide-darkBorder divide-y;
+
+            align-items: flex-start;
+            display: flex;
+            flex-direction: column;
+            padding-bottom: theme("spacing.4");
+            padding-top: theme("spacing.1");
+            text-align: left;
         }
 
         &-modal-button {
-            @apply justify-start w-full;
+            border-radius: 0;
+            justify-content: flex-start;
+            width: 100%;
         }
 
         &-modal-button-text {
-            @apply text-lightHigh dark:text-darkHigh;
+            color: theme("colors.lightHigh");
+
+            :root .dark & {
+                color: theme("colors.darkHigh");
+            }
         }
 
         &-modal-active-tab-icon {
-            @apply text-lightMedium dark:text-darkMedium mr-3;
+            color: theme("colors.lightMedium");
+            margin-right: theme("spacing.3");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
     &__toolbar-control {
-        @apply flex flex-row items-center justify-between gap-2 order-3 xs:order-2 w-full xs:w-auto;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: theme("spacing.2");
+        justify-content: space-between;
+        order: 3;
+        width: 100%;
+
+        @screen xs {
+            order: 2;
+            width: auto;
+        }
     }
 
     &__toolbar-customs {
-        @apply flex flex-row items-center gap-2 order-2 xs:order-3 md:my-2;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: theme("spacing.2");
+        order: 2;
+
+        @screen xs {
+            order: 2;
+        }
+
+        @screen md {
+            margin-block: theme("spacing.2");
+        }
 
         &-mobile {
-            @apply md:hidden;
+            display: flex;
+
+            @screen md {
+                display: none;
+            }
         }
 
         &-desktop {
-            @apply hidden md:block;
+            display: none;
+
+            @screen md {
+                display: flex;
+                gap: theme("spacing.2");
+            }
         }
     }
 }
 
-.rdg-cell.action {
-    text-align: right;
-    border-right: 0;
+/* TODO: tohle je imo k ničemu, že Vejvis? */
+
+/* .rdg-cell.action {
     align-items: center;
+    border-right: 0;
+    box-shadow: -3px 0 15px rgba(221 221 221 / 50%);
     display: flex;
     justify-content: center;
     position: sticky;
-    box-shadow: -3px 0 15px rgba(221 221 221 / 50%);
     right: 0;
-}
+    text-align: right;
+} */
 
 .rdg-header-row {
-    @apply bg-gray-200 dark:bg-gray-800 text-gray-400 dark:text-gray-600 font-medium;
+    color: theme("colors.lightLow");
+    font-weight: theme("fontWeight.normal");
+
+    :root .dark & {
+        color: theme("colors.darkLow");
+    }
 
     .rdg-cell {
-        @apply rounded-none bg-gray-50 dark:bg-gray-900 dark:text-darkMedium;
+        background-color: var(--rdg-header-background-color);
 
-        &:not(:first-child) {
-            border-inline-start: 1px solid theme("colors.gray.200");
+        :root .dark & {
+            color: theme("colors.darkMedium");
+        }
 
-            :root .dark & {
-                border-inline-start: 1px solid theme("colors.gray.700");
-            }
+        &:not(:first-child) {
+            border-inline-start: 1px solid var(--rdg-border-color);
         }
     }
 }
 
 .rdg-header-sort-name + span {
-    display: flex;
     align-items: center;
+    display: flex;
 }
 
 .rdg-cell {
+    border-block-end-width: 1px;
+    border-color: var(--rdg-border-color);
     border-inline-end: none;
 
     &.rdg-cell-frozen {
         box-shadow: none;
     }
-
-    &[aria-selected="true"] {
-        outline-color: theme("colors.gray.300");
-
-        :root .dark & {
-            outline-color: theme("colors.gray.700");
-        }
-    }
-}
-
-.rdg-row[aria-selected="true"] {
-    @apply bg-gray-100/75 dark:bg-gray-900/75;
-
-    .uxf-data-grid__action-cell {
-        background-color: white;
-
-        :root .dark & {
-            background-color: theme("colors.gray.900");
-        }
-    }
-}
-
-.rdg-row:hover {
-    @apply bg-gray-50 dark:bg-gray-950;
-
-    .uxf-data-grid__action-cell {
-        background-color: white;
-
-        :root .dark & {
-            background-color: theme("colors.gray.950");
-        }
-    }
-}
-
-.rdg-row[aria-selected="true"]:hover {
-    @apply bg-gray-200/75 dark:bg-gray-800/75;
 }
 
 @keyframes datagridlineanim {
@@ -349,4 +589,4 @@
         left: 100%;
         width: 100%;
     }
-}
+}