@uxf/ui 11.105.0 → 11.106.0

package/css/flash-messages.css

@@ -1,6 +1,4 @@
 .uxf-flash-messages {
-    @apply space-y-4;
-
     bottom: 0;
     display: flex;
     flex-direction: column;
@@ -14,6 +12,8 @@
     right: 0;
     z-index: theme("zIndex.flashMessage");
 
+    @apply space-y-4;
+
     &__permanent,
     &__dismissable {
         display: flex;

package/css/form-component.css

@@ -1,7 +1,10 @@
 .uxf-helper-text {
-    @apply mt-1 text-xs text-gray-500;
+    color: theme("colors.gray.500");
+    margin-top: theme("spacing.1");
+
+    @apply text-xs;
 
     &.is-invalid {
-        @apply text-error;
+        color: theme("colors.error.DEFAULT");
     }
 }

package/css/image-gallery.css

@@ -1,51 +1,93 @@
 .uxf-image-gallery {
-    @apply z-imageGallery fixed inset-0 flex flex-col;
+    display: flex;
+    flex-direction: column;
+    inset: 0;
+    position: fixed;
+    z-index: theme("zIndex.imageGallery");
 
     &__content {
-        @apply mx-auto max-h-[calc(100%-128px)] grow;
+        flex-grow: 1;
+        margin-inline: auto;
+        max-height: calc(100% - 128px);
     }
 
     &__inner {
-        @apply container flex h-full items-center justify-center;
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+
+        @apply container;
     }
 
     &__image {
-        @apply z-1 w-full object-contain;
+        object-fit: contain;
+        width: 100%;
+        z-index: 1;
     }
 
     &__buttons {
-        @apply container pointer-events-none absolute inset-0 z-10 flex items-center justify-between p-2;
+        align-items: center;
+        display: flex;
+        inset: 0;
+        justify-content: space-between;
+        padding: theme("spacing.2");
+        pointer-events: none;
+        position: absolute;
+        z-index: 10;
+
+        @apply container;
     }
 
     &__button {
-        @apply pointer-events-auto rounded-full bg-black bg-opacity-50 p-3;
+        background-color: rgb(0 0 0 / 50%);
+        border-radius: 9999px;
+        padding: theme("spacing.3");
+        pointer-events: auto;
 
         &-icon {
-            @apply h-8 w-8 text-white;
+            color: theme("colors.white");
+            height: theme("spacing.8");
+            width: theme("spacing.8");
         }
     }
 
     &__dots {
-        @apply z-1 mx-auto flex h-[64px] items-center space-x-2 p-4;
+        @apply space-x-2;
+
+        align-items: center;
+        display: flex;
+        height: 64px;
+        margin-inline: auto;
+        padding: theme("spacing.4");
+        z-index: 1;
     }
 
     &__dot {
-        @apply h-2 w-2 rounded-full bg-gray-500;
+        background-color: theme("colors.gray.500");
+        border-radius: 9999px;
+        height: theme("spacing.2");
+        width: theme("spacing.2");
 
         &--active {
-            @apply bg-white;
+            background-color: theme("colors.white");
         }
     }
 
     &__close-button-wrapper {
-        @apply z-1 ml-auto w-auto;
+        margin-left: auto;
+        width: auto;
+        z-index: 1;
     }
 
     &__close-button {
-        @apply bg-black bg-opacity-50 p-5;
+        background-color: rgb(0 0 0 / 50%);
+        padding: theme("spacing.5");
 
         &-icon {
-            @apply size-6 text-white;
+            color: theme("colors.white");
+            height: theme("spacing.6");
+            width: theme("spacing.6");
         }
 
         &-text {
@@ -54,10 +96,18 @@
     }
 
     &__custom-content {
-        @apply absolute bottom-0 right-0 bg-gray-600 text-white;
+        background-color: theme("colors.gray.600");
+        bottom: 0;
+        color: theme("colors.white");
+        position: absolute;
+        right: 0;
     }
 
     &__backdrop {
-        @apply absolute inset-0 bg-black bg-opacity-75 transition-opacity;
+        background-color: rgb(0 0 0 / 75%);
+        inset: 0;
+        position: absolute;
+
+        @apply transition-opacity;
     }
 }

package/css/input-basic.css

@@ -1,18 +1,24 @@
 .uxf-input {
-    @apply flex flex-row;
+    display: flex;
+    flex-direction: row;
 }
 
 .uxf-input__wrapper {
-    @apply flex w-full flex-row;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
 }
 
 .uxf-input__element {
-    @apply w-full;
+    width: 100%;
 }
 
 .uxf-input__left-element,
 .uxf-input__right-element,
 .uxf-input__left-addon,
 .uxf-input__right-addon {
-    @apply flex flex-row items-center whitespace-nowrap;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    white-space: nowrap;
 }

package/css/input-with-popover.css

@@ -1,31 +1,40 @@
 .uxf-input-with-popover {
     &__panel {
-        @apply z-dropdown max-w-md rounded-md bg-white p-3 text-gray-800 shadow-lg ring-1 ring-black ring-opacity-5;
+        @apply ring-1 ring-black ring-opacity-5;
 
+        background-color: theme("colors.white");
+        border-radius: theme("borderRadius.md");
+        box-shadow: theme("boxShadow.lg");
+        color: theme("colors.gray.800");
+        max-width: theme("maxWidth.md");
         overflow-y: auto;
+        padding: theme("spacing.3");
+        z-index: theme("zIndex.dropdown");
 
         &:focus {
             outline: none;
         }
 
         :root .dark & {
-            @apply bg-gray-800 text-white;
+            background-color: theme("colors.gray.800");
+            color: theme("colors.white");
         }
 
         &--bottom {
-            @apply mt-1;
+            margin-top: theme("spacing.1");
         }
 
         &--top {
-            @apply -mt-1;
+            margin-top: calc(-1 * theme("spacing.1"));
         }
     }
 
     &__trigger-element {
-        @apply h-5 w-5 rounded-sm;
-
         align-items: center;
+        border-radius: theme("borderRadius.sm");
         display: inline-flex;
+        height: theme("spacing.5");
         justify-content: center;
+        width: theme("spacing.5");
     }
 }

package/css/input.css

@@ -1,8 +1,12 @@
 .uxf-input {
-    @apply rounded-md bg-white text-gray-900 shadow-sm;
+    background-color: theme("colors.white");
+    border-radius: theme("borderRadius.md");
+    box-shadow: theme("boxShadow.sm");
+    color: theme("colors.gray.900");
 
     :root .dark & {
-        @apply bg-gray-900 text-gray-300;
+        background-color: theme("colors.gray.900");
+        color: theme("colors.gray.300");
     }
 
     &__arrow-icon {
@@ -16,17 +20,22 @@
     }
 
     &__element {
-        @apply placeholder:text-lightLow bg-transparent;
-
         appearance: none;
+        background-color: transparent;
         outline: none;
 
+        &::placeholder {
+            color: theme("colors.lightLow");
+        }
+
         &.is-empty {
             color: theme("colors.lightLow");
         }
 
         :root .dark & {
-            @apply placeholder:text-darkLow;
+            &::placeholder {
+                color: theme("colors.darkLow");
+            }
 
             &.is-empty {
                 color: theme("colors.darkLow");
@@ -40,75 +49,86 @@
 
     &__left-element,
     &__right-element {
-        @apply text-lightLow;
+        color: theme("colors.lightLow");
 
         :root .dark & {
-            @apply text-darkLow;
+            color: theme("colors.darkLow");
         }
     }
 
     &__left-element {
-        @apply mr-2;
+        margin-right: theme("spacing.2");
     }
 
     &__right-element {
-        @apply ml-2 space-x-2;
+        @apply space-x-2;
+
+        margin-left: theme("spacing.2");
     }
 
     &__left-addon,
     &__right-addon {
-        @apply border border-gray-200 bg-gray-100;
+        background-color: theme("colors.gray.100");
+        border: 1px solid theme("colors.gray.200");
 
         :root .dark & {
-            @apply border-gray-700 bg-gray-800;
+            background-color: theme("colors.gray.800");
+            border-color: theme("colors.gray.700");
         }
 
         &--text {
-            @apply px-2;
+            padding-inline: theme("spacing.2");
         }
     }
 
     &__left-addon {
-        @apply rounded-l-md border-r-0;
+        border-radius: theme("borderRadius.md") 0 0 theme("borderRadius.md");
+        border-right-width: 0;
     }
 
     &__right-addon {
-        @apply rounded-r-md border-l-0;
+        border-left-width: 0;
+        border-radius: 0 theme("borderRadius.md") theme("borderRadius.md") 0;
     }
 
     &__wrapper {
-        @apply rounded-md border border-gray-200 px-3;
+        border: 1px solid theme("colors.gray.200");
+        border-radius: theme("borderRadius.md");
+        padding-inline: theme("spacing.3");
 
         :root .dark & {
-            @apply border-gray-700;
+            border-color: theme("colors.gray.700");
         }
     }
 
     &__remove-button {
-        @apply rounded-sm;
-
         align-items: center;
+        border-radius: theme("borderRadius.sm");
         display: inline-flex;
         flex-shrink: 0;
         justify-content: center;
 
         &-inner {
-            @apply size-3.5 rounded-full bg-gray-300;
-
             align-items: center;
+            background-color: theme("colors.gray.300");
+            border-radius: 9999px;
             display: flex;
+            height: theme("spacing[3.5]");
             justify-content: center;
+            width: theme("spacing[3.5]");
 
             :root .dark & {
-                @apply bg-gray-600;
+                background-color: theme("colors.gray.600");
             }
         }
 
         &-icon {
-            @apply size-2 text-white;
+            color: theme("colors.white");
+            height: theme("spacing.2");
+            width: theme("spacing.2");
 
             :root .dark & {
-                @apply text-darkMedium;
+                color: theme("colors.darkMedium");
             }
         }
     }
@@ -139,33 +159,38 @@
 
     &--has-right-addon {
         .uxf-input__wrapper {
-            @apply rounded-r-none;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
         }
     }
 
     &--has-left-addon {
         .uxf-input__wrapper {
-            @apply rounded-l-none;
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
         }
     }
 
     &.is-focused {
         .uxf-input__wrapper {
-            @apply border-primary ring-primary ring-1 ring-inset ring-offset-0;
+            @apply ring-primary ring-1 ring-inset ring-offset-0;
+
+            border-color: theme("colors.primary.DEFAULT");
 
             :root .dark & {
-                @apply border-primary ring-primary;
+                @apply ring-primary;
+
+                border-color: theme("colors.primary.DEFAULT");
             }
         }
     }
 
     &.is-disabled {
-        @apply bg-gray-100;
-
+        background-color: theme("colors.gray.100");
         cursor: not-allowed;
 
         :root .dark & {
-            @apply bg-gray-800;
+            background-color: theme("colors.gray.800");
         }
 
         .uxf-input__element {
@@ -187,10 +212,10 @@
         .uxf-input__wrapper,
         .uxf-input__left-addon,
         .uxf-input__right-addon {
-            @apply border-gray-200;
+            border-color: theme("colors.gray.200");
 
             :root .dark & {
-                @apply border-gray-700;
+                border-color: theme("colors.gray.700");
             }
         }
     }
@@ -198,33 +223,37 @@
     &.is-invalid {
         &.is-focused {
             .uxf-input__wrapper {
-                @apply border-error ring-error;
+                @apply ring-error;
+
+                border-color: theme("colors.error.DEFAULT");
 
                 :root .dark & {
-                    @apply border-error ring-error;
+                    @apply ring-error;
+
+                    border-color: theme("colors.error.DEFAULT");
                 }
             }
         }
 
         .uxf-input__wrapper {
-            @apply border-error placeholder:text-error-300;
+            border-color: theme("colors.error.DEFAULT");
 
             .uxf-input__left-element,
             .uxf-input__right-element {
-                @apply text-error;
+                color: theme("colors.error.DEFAULT");
             }
 
             .uxf-input__element {
-                @apply text-error placeholder:text-error border-gray-200;
+                border-color: theme("colors.gray.200");
 
-                &.is-empty {
+                &:not(.is-empty) {
                     color: theme("colors.error.DEFAULT");
                 }
 
                 :root .dark & {
-                    @apply text-error placeholder:text-error border-gray-700;
+                    border-color: theme("colors.gray.700");
 
-                    &.is-empty {
+                    &:not(.is-empty) {
                         color: theme("colors.error.DEFAULT");
                     }
                 }

package/css/label.css

@@ -1,8 +1,13 @@
 .uxf-label {
-    @apply mb-0.5 block text-sm font-medium text-gray-900;
+    color: theme("colors.gray.900");
+    display: block;
+    font-weight: 500;
+    margin-bottom: 2px;
+
+    @apply text-sm;
 
     :root .dark & {
-        @apply text-white;
+        color: theme("colors.white");
     }
 
     &--hidden {

package/css/list-item.css

@@ -1,24 +1,33 @@
 .uxf-list-item {
-    @apply is-hoverable:opacity-75 focus-visible:before:border-primary relative flex min-h-[64px] grow justify-between space-x-3 px-5 py-4 outline-none transition-opacity before:absolute before:inset-0 before:rounded-lg focus-visible:before:border-2;
+    @apply is-hoverable:opacity-75 focus-visible:before:border-primary space-x-3 transition-opacity before:absolute before:inset-0 before:rounded-lg focus-visible:before:border-2;
+
+    display: flex;
+    flex-grow: 1;
+    justify-content: space-between;
+    min-height: 64px;
+    outline: none;
+    padding-block: theme("spacing.4");
+    padding-inline: theme("spacing.5");
+    position: relative;
 
     :root .dark & {
         @apply focus-visible:before:border-primary;
     }
 
     &__inner {
-        @apply w-full;
+        width: 100%;
     }
 
     &__end-elements-wrapper,
     &__end-icon-wrapper {
-        @apply shrink-0;
+        flex-shrink: 0;
     }
 
     .uxf-list-item__end-icon-wrapper {
-        @apply text-gray-300;
+        color: theme("colors.gray.300");
 
         :root .dark & {
-            @apply text-gray-600;
+            color: theme("colors.gray.600");
         }
     }
 }

package/css/loader.css

@@ -5,23 +5,34 @@
 }
 
 .uxf-loader {
-    @apply inline-block rounded-full border-r-transparent border-t-current;
-
     animation: spinner 1.2s linear infinite;
+    border-radius: 9999px;
+    border-right-color: transparent;
+    border-top-color: currentcolor;
+    display: inline-block;
 
     :root .dark & {
-        @apply text-white;
+        color: theme("colors.white");
     }
 
     &--size-default {
-        @apply size-12 border-r-4 border-t-4;
+        border-right-width: 4px;
+        border-top-width: 4px;
+        height: theme("spacing.12");
+        width: theme("spacing.12");
     }
 
     &--size-lg {
-        @apply size-24 border-r-8 border-t-8;
+        border-right-width: 8px;
+        border-top-width: 8px;
+        height: theme("spacing.24");
+        width: theme("spacing.24");
     }
 
     &--size-sm {
-        @apply size-6 border-r-2 border-t-2;
+        border-right-width: 2px;
+        border-top-width: 2px;
+        height: theme("spacing.6");
+        width: theme("spacing.6");
     }
 }

package/css/lozenge.css

@@ -8,13 +8,13 @@
     padding: 0 4px;
 
     &__text {
+        @apply truncate;
+
         color: var(--color);
         font-size: 0.625em;
         font-weight: theme("fontWeight.semibold");
         letter-spacing: -0.02em;
         text-transform: uppercase;
-
-        @apply truncate;
     }
 
     &--variant-default {

package/css/menu.css

@@ -56,10 +56,10 @@
 }
 
 .uxf-menu-item__label {
+    @apply truncate;
+
     flex-grow: 1;
     text-align: left;
-
-    @apply truncate;
 }
 
 .uxf-menu-item__open-icon {

package/css/multi-combobox.css

@@ -76,16 +76,8 @@
             .uxf-multi-combobox__input {
                 color: theme("colors.error.DEFAULT");
 
-                &::placeholder {
-                    color: currentcolor;
-                }
-
                 :root .dark & {
                     color: theme("colors.error.DEFAULT");
-
-                    &::placeholder {
-                        color: currentcolor;
-                    }
                 }
             }
         }

package/css/multi-select.css

@@ -100,16 +100,6 @@
         margin-top: 7px;
     }
 
-    &.is-invalid {
-        .uxf-multi-select__input--is-empty {
-            color: theme("colors.error.DEFAULT");
-
-            :root .dark & {
-                color: theme("colors.error.DEFAULT");
-            }
-        }
-    }
-
     &__dropdown-item {
         .uxf-checkbox {
             margin-top: theme("spacing.1");