@uxf/ui 11.19.0 → 11.21.0

package/css/avatar-file-input.css

@@ -18,9 +18,7 @@
         width: theme("width.20");
 
         &:hover .uxf-avatar-file-input__input-empty {
-            :root .light & {
-                --bg-color: theme("colors.lightBorder/.25");
-            }
+            --bg-color: theme("colors.lightBorder/.25");
 
             :root .dark & {
                 --bg-color: theme("colors.darkBorder/.25");
@@ -28,11 +26,9 @@
         }
 
         &.is-invalid .uxf-avatar-file-input__input-empty {
-            :root .light & {
-                --bg-color: theme("colors.error.DEFAULT/.05");
-                --border-color: var(--color);
-                --color: theme("colors.error.DEFAULT");
-            }
+            --bg-color: theme("colors.error.DEFAULT/.05");
+            --border-color: var(--color);
+            --color: theme("colors.error.DEFAULT");
 
             :root .dark & {
                 --bg-color: theme("colors.error.DEFAULT/.05");
@@ -45,10 +41,8 @@
             pointer-events: none;
 
             .uxf-avatar-file-input__input-empty {
-                :root .light & {
-                    --border-color: var(--color);
-                    --color: theme("colors.lightBorder");
-                }
+                --border-color: var(--color);
+                --color: theme("colors.lightBorder");
 
                 :root .dark & {
                     --border-color: var(--color);
@@ -68,17 +62,15 @@
         &:focus-visible + .uxf-avatar-file-input__input-empty {
             border-width: theme("borderWidth.4");
 
-            /* :root .light & {
-                --bg-color: theme("colors.primary.DEFAULT/.05");
-                --border-color: var(--color);
-                --color: theme("colors.primary.DEFAULT");
-            }
+            /* --bg-color: theme("colors.primary.DEFAULT/.05");
+            --border-color: var(--color);
+            --color: theme("colors.primary.DEFAULT");
 
             :root .dark & {
                 --bg-color: theme("colors.primary.DEFAULT/.05");
                 --border-color: var(--color);
                 --color: theme("colors.primary.DEFAULT");
-            */
+            } */
         }
     }
 
@@ -91,6 +83,8 @@
 
     &__input-empty {
         --bg-color: transparent;
+        --border-color: theme("colors.lightBorder");
+        --color: theme("colors.lightMedium");
 
         @apply transition-all duration-75;
 
@@ -103,14 +97,9 @@
         justify-content: center;
         width: 100%;
 
-        :root .light & {
-            --color: theme("colors.lightMedium");
-            --border-color: theme("colors.lightBorder");
-        }
-
         :root .dark & {
-            --color: theme("colors.darkMedium");
             --border-color: theme("colors.darkBorder");
+            --color: theme("colors.darkMedium");
         }
     }
 

package/css/avatar.css

@@ -1,14 +1,10 @@
 .uxf-avatar {
-    @apply relative inline-flex size-10 items-center justify-center rounded-full;
+    @apply relative inline-flex size-10 items-center justify-center rounded-full bg-gray-200 text-gray-700;
 
     &__image {
         @apply rounded-inherit absolute left-0 top-0 block size-full object-cover;
     }
 
-    :root .light & {
-        @apply bg-gray-200 text-gray-700;
-    }
-
     :root .dark & {
         @apply bg-gray-800 text-gray-200;
     }

package/css/badge.css

@@ -1,5 +1,5 @@
 .uxf-badge {
-    @apply inline-flex items-center justify-center font-bold;
+    @apply bg-primary inline-flex items-center justify-center font-bold text-white;
 
     &--size-small {
         @apply h-6 min-w-[24px] rounded-[12px] px-1.5 text-sm;
@@ -13,10 +13,6 @@
         @apply h-10 min-w-[40px] rounded-[20px] px-2 text-lg;
     }
 
-    :root .light & {
-        @apply bg-primary text-white;
-    }
-
     :root .dark & {
         @apply bg-white text-gray-900;
     }

package/css/button-list.css

@@ -8,11 +8,7 @@
     }
 
     &__menu-items {
-        @apply z-dropdown absolute right-0 mt-2 w-40 divide-y rounded-md shadow-lg ring-1 focus:outline-none;
-
-        :root .light & {
-            @apply divide-gray-100 bg-white ring-black/5;
-        }
+        @apply z-dropdown absolute right-0 mt-2 w-40 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none;
 
         :root .dark & {
             @apply divide-gray-700 bg-gray-900 ring-white/10;
@@ -28,22 +24,14 @@
     }
 
     &__menu-button {
-        @apply is-hoverable:hover:cursor-pointer flex space-x-3 px-3 py-2 text-sm;
-
-        :root .light & {
-            @apply text-black hover:text-gray-800;
-        }
+        @apply is-hoverable:hover:cursor-pointer flex space-x-3 px-3 py-2 text-sm text-black hover:text-gray-800;
 
         :root .dark & {
             @apply text-white hover:text-gray-200;
         }
 
         &-icon {
-            @apply w-3;
-
-            :root .light & {
-                @apply text-lightMedium;
-            }
+            @apply text-lightMedium w-3;
 
             :root .dark & {
                 @apply text-darkMedium;
@@ -51,9 +39,7 @@
         }
 
         &.is-disabled {
-            :root .light & {
-                @apply text-lightLow;
-            }
+            @apply text-lightLow;
 
             :root .dark & {
                 @apply text-darkLow;

package/css/button.css

@@ -132,22 +132,14 @@
     }
 
     &--variant-outlined {
-        @apply border;
-
-        :root .light & {
-            @apply bg-white;
-        }
+        @apply border bg-white;
 
         :root .dark & {
             @apply bg-lightHigh;
         }
 
         &.uxf-button--color-default {
-            @apply focus-visible:ring-primary;
-
-            :root .light & {
-                @apply border-primary text-primary is-hoverable:border-primary-700 is-hoverable:text-primary-700;
-            }
+            @apply focus-visible:ring-primary border-primary text-primary is-hoverable:border-primary-700 is-hoverable:text-primary-700;
 
             :root .dark & {
                 @apply border-primary text-primary is-hoverable:border-primary-300 is-hoverable:text-primary-300;
@@ -155,11 +147,7 @@
         }
 
         &.uxf-button--color-success {
-            @apply focus-visible:ring-success;
-
-            :root .light & {
-                @apply border-success text-success is-hoverable:border-success-700 is-hoverable:text-success-700;
-            }
+            @apply focus-visible:ring-success border-success text-success is-hoverable:border-success-700 is-hoverable:text-success-700;
 
             :root .dark & {
                 @apply border-success text-success is-hoverable:border-success-300 is-hoverable:text-success-300;
@@ -167,11 +155,7 @@
         }
 
         &.uxf-button--color-warning {
-            @apply focus-visible:ring-warning;
-
-            :root .light & {
-                @apply border-warning text-warning is-hoverable:border-warning-700 is-hoverable:text-warning-700;
-            }
+            @apply focus-visible:ring-warning border-warning text-warning is-hoverable:border-warning-700 is-hoverable:text-warning-700;
 
             :root .dark & {
                 @apply border-warning text-warning is-hoverable:border-warning-300 is-hoverable:text-warning-300;
@@ -179,11 +163,7 @@
         }
 
         &.uxf-button--color-error {
-            @apply focus-visible:ring-error;
-
-            :root .light & {
-                @apply border-error text-error is-hoverable:border-error-700 is-hoverable:text-error-700;
-            }
+            @apply focus-visible:ring-error  border-error text-error is-hoverable:border-error-700 is-hoverable:text-error-700;
 
             :root .dark & {
                 @apply border-error text-error is-hoverable:border-error-300 is-hoverable:text-error-300;
@@ -191,9 +171,7 @@
         }
 
         &.is-disabled {
-            :root .light & {
-                @apply text-lightLow border-gray-300 bg-gray-300;
-            }
+            @apply text-lightLow border-gray-300 bg-gray-300;
 
             :root .dark & {
                 @apply text-darkLow border-gray-700 bg-gray-700;
@@ -209,20 +187,14 @@
         }
 
         &.uxf-button--color-default {
-            @apply focus-visible:ring-primary;
-
-            :root .light & {
-                @apply bg-primary is-hoverable:bg-primary-700;
-            }
+            @apply focus-visible:ring-primary bg-primary is-hoverable:bg-primary-700;
 
             :root .dark & {
                 @apply bg-primary is-hoverable:bg-primary-400;
             }
 
             &.is-disabled {
-                :root .light & {
-                    @apply text-lightLow bg-gray-300;
-                }
+                @apply text-lightLow bg-gray-300;
 
                 :root .dark & {
                     @apply bg-gray-600 text-gray-400;
@@ -231,20 +203,14 @@
         }
 
         &.uxf-button--color-success {
-            @apply focus-visible:ring-success;
-
-            :root .light & {
-                @apply bg-success is-hoverable:bg-success-700;
-            }
+            @apply focus-visible:ring-success bg-success is-hoverable:bg-success-700;
 
             :root .dark & {
                 @apply bg-success is-hoverable:bg-success-400;
             }
 
             &.is-disabled {
-                :root .light & {
-                    @apply text-lightLow bg-gray-300;
-                }
+                @apply text-lightLow bg-gray-300;
 
                 :root .dark & {
                     @apply bg-gray-600 text-gray-400;
@@ -253,20 +219,14 @@
         }
 
         &.uxf-button--color-error {
-            @apply focus-visible:ring-error;
-
-            :root .light & {
-                @apply bg-error is-hoverable:bg-error-700;
-            }
+            @apply focus-visible:ring-error bg-error is-hoverable:bg-error-700;
 
             :root .dark & {
                 @apply bg-error is-hoverable:bg-error-400;
             }
 
             &.is-disabled {
-                :root .light & {
-                    @apply text-lightLow bg-gray-300;
-                }
+                @apply text-lightLow bg-gray-300;
 
                 :root .dark & {
                     @apply bg-gray-600 text-gray-400;
@@ -275,20 +235,14 @@
         }
 
         &.uxf-button--color-warning {
-            @apply focus-visible:ring-warning;
-
-            :root .light & {
-                @apply bg-warning is-hoverable:bg-warning-700;
-            }
+            @apply focus-visible:ring-warning bg-warning is-hoverable:bg-warning-700;
 
             :root .dark & {
                 @apply bg-warning is-hoverable:bg-warning-400;
             }
 
             &.is-disabled {
-                :root .light & {
-                    @apply text-lightLow bg-gray-300;
-                }
+                @apply text-lightLow bg-gray-300;
 
                 :root .dark & {
                     @apply bg-gray-600 text-gray-400;
@@ -298,20 +252,14 @@
     }
 
     &--variant-white {
-        @apply focus-visible:ring-primary border;
-
-        :root .light & {
-            @apply border-lightBorder text-lightMedium is-hoverable:bg-gray-100 bg-white;
-        }
+        @apply focus-visible:ring-primary border-lightBorder text-lightMedium is-hoverable:bg-gray-100 border bg-white;
 
         :root .dark & {
             @apply border-darkBorder bg-lightHigh text-darkMedium is-hoverable:bg-gray-800 is-hoverable:text-darkHigh;
         }
 
         &.is-disabled {
-            :root .light & {
-                @apply text-lightLow;
-            }
+            @apply text-lightLow;
 
             :root .dark & {
                 @apply border-darkBorder text-darkLow;
@@ -323,9 +271,7 @@
         @apply shadow-none;
 
         &.uxf-button--color-default {
-            :root .light & {
-                @apply text-lightMedium is-hoverable:text-lightHigh;
-            }
+            @apply text-lightMedium is-hoverable:text-lightHigh;
 
             :root .dark & {
                 @apply text-darkMedium is-hoverable:text-darkHigh;
@@ -333,11 +279,7 @@
         }
 
         &.uxf-button--color-success {
-            @apply text-success;
-
-            :root .light & {
-                @apply is-hoverable:text-success-700;
-            }
+            @apply text-success is-hoverable:text-success-700;
 
             :root .dark & {
                 @apply is-hoverable:text-success-300;
@@ -345,11 +287,7 @@
         }
 
         &.uxf-button--color-error {
-            @apply text-error;
-
-            :root .light & {
-                @apply is-hoverable:text-error-700;
-            }
+            @apply text-error is-hoverable:text-error-700;
 
             :root .dark & {
                 @apply is-hoverable:text-error-300;
@@ -357,11 +295,7 @@
         }
 
         &.uxf-button--color-warning {
-            @apply text-warning;
-
-            :root .light & {
-                @apply is-hoverable:text-warning-700;
-            }
+            @apply text-warning is-hoverable:text-warning-700;
 
             :root .dark & {
                 @apply is-hoverable:text-warning-300;
@@ -369,9 +303,7 @@
         }
 
         &.is-disabled {
-            :root .light & {
-                @apply text-lightLow;
-            }
+            @apply text-lightLow;
 
             :root .dark & {
                 @apply text-darkLow;

package/css/calendar.css

@@ -1,7 +1,7 @@
 .uxf-calendar {
     &__cell {
-        --bg-color: unset;
-        --color: unset;
+        --bg-color: theme("backgroundColor.white");
+        --color: theme("colors.lightMedium");
         --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
 
         align-items: center;
@@ -17,20 +17,13 @@
         position: relative;
         text-align: center;
 
-        :root .light & {
-            --bg-color: theme("backgroundColor.white");
-            --color: theme("colors.lightMedium");
-        }
-
         :root .dark & {
             --bg-color: theme("backgroundColor.gray.900");
             --color: theme("colors.darkMedium");
         }
 
         &:hover {
-            :root .light & {
-                --bg-color: theme("backgroundColor.gray.50");
-            }
+            --bg-color: theme("backgroundColor.gray.50");
 
             :root .dark & {
                 --bg-color: theme("backgroundColor.gray.950");
@@ -48,11 +41,9 @@
         }
 
         &.is-disabled {
-            cursor: auto;
+            --bg-color: theme("backgroundColor.gray.100");
 
-            :root .light & {
-                --bg-color: theme("backgroundColor.gray.100");
-            }
+            cursor: auto;
 
             :root .dark & {
                 --bg-color: theme("backgroundColor.gray.800");
@@ -68,14 +59,17 @@
         }
 
         &--selected {
-            :root .light &,
+            --bg-color: theme("backgroundColor.primary.500");
+            --color: theme("colors.white");
+
             :root .dark & {
                 --bg-color: theme("backgroundColor.primary.500");
                 --color: theme("colors.white");
             }
 
             &:hover {
-                :root .light &,
+                --bg-color: theme("backgroundColor.primary.500");
+
                 :root .dark & {
                     --bg-color: theme("backgroundColor.primary.500");
                 }
@@ -104,7 +98,11 @@
 
         &--today {
             .uxf-calendar__cell__inner {
+                --bg-color: theme("backgroundColor.lightHigh");
+                --color: theme("colors.white");
+
                 align-items: center;
+                border: 2px solid theme("colors.lightMedium");
                 border-radius: 999px;
                 display: inline-flex;
                 height: 32px;
@@ -112,13 +110,6 @@
                 position: relative;
                 width: 32px;
 
-                :root .light & {
-                    --bg-color: theme("backgroundColor.lightHigh");
-                    --color: theme("colors.white");
-
-                    border: 2px solid theme("colors.lightMedium");
-                }
-
                 :root .dark & {
                     --bg-color: theme("backgroundColor.transparent");
                     --color: theme("colors.white");
@@ -130,10 +121,11 @@
             &.uxf-calendar__cell--selected {
                 .uxf-calendar__cell__inner {
                     background-color: theme("backgroundColor.transparent");
+                    border-color: theme("colors.white");
                     color: theme("colors.white");
 
-                    :root .light & {
-                        border-color: theme("colors.white");
+                    :root .dark & {
+                        border-color: theme("colors.darkMedium");
                     }
                 }
             }
@@ -155,10 +147,8 @@
         }
 
         &--not-current-month {
-            :root .light & {
-                --bg-color: theme("backgroundColor.gray.100");
-                --color: theme("colors.lightLow");
-            }
+            --bg-color: theme("backgroundColor.gray.100");
+            --color: theme("colors.lightLow");
 
             :root .dark & {
                 --bg-color: theme("backgroundColor.gray.800");
@@ -200,6 +190,7 @@
     }
 
     &__weekdays {
+        color: theme("colors.lightLow");
         column-gap: 1px;
         display: grid;
         font-size: 10px;
@@ -210,10 +201,6 @@
         text-align: center;
         text-transform: uppercase;
 
-        :root .light & {
-            color: theme("colors.lightLow");
-        }
-
         :root .dark & {
             color: theme("colors.darkLow");
         }
@@ -232,16 +219,13 @@
     &__decade,
     &__hours,
     &__minutes {
+        background-color: theme("backgroundColor.lightBorder");
         border-radius: 6px;
         display: grid;
         gap: 1px;
         padding: 1px;
         text-align: center;
 
-        :root .light & {
-            background-color: theme("backgroundColor.lightBorder");
-        }
-
         :root .dark & {
             background-color: theme("backgroundColor.darkBorder");
         }
@@ -269,14 +253,12 @@
     margin-bottom: theme("spacing.4");
 
     &__title {
+        @apply text-lightMedium is-hoverable:text-lightHigh;
+
         font-size: 14px;
         font-weight: theme("fontWeight.medium");
         text-align: center;
 
-        :root .light & {
-            @apply text-lightMedium is-hoverable:text-lightHigh;
-        }
-
         :root .dark & {
             @apply text-darkMedium is-hoverable:text-darkHigh;
         }