@uxf/ui 10.0.0-beta.7 → 10.0.0-beta.74

package/css/chip.css

@@ -1,590 +1,489 @@
 .uxf-chip {
-    @apply inline-flex items-center rounded-lg px-2 max-w-full;
+    --button-bg-color-hover: transparent;
+    --spacing-y: calc((var(--h) - var(--button-size)) / 2);
+    --spacing-x: theme("spacing.2");
+
+    align-items: center;
+    background-color: var(--bg-color);
+    border-radius: theme("borderRadius.lg");
+    color: var(--color);
+    display: inline-flex;
+    height: var(--h);
+    max-width: 100%;
+    padding: 0 var(--spacing-x);
 
     &.has-button {
-        @apply pr-1;
+        padding-right: var(--spacing-y);
     }
 
     &--size-default {
-        @apply text-sm h-6;
+        --button-border-radius: var(--spacing-y);
+        --button-size: 16px;
+        --h: 24px;
 
-        .uxf-chip__button {
-            @apply h-4 w-4;
-        }
+        @apply text-sm;
     }
 
     &--size-small {
-        @apply text-xs h-5;
+        --button-border-radius: 999px;
+        --button-size: 16px;
+        --h: 20px;
 
-        .uxf-chip__button {
-            @apply h-4 w-4;
-        }
+        @apply text-xs;
     }
 
     &--size-large {
-        @apply text-base h-7;
+        --button-border-radius: var(--spacing-y);
+        --button-size: 20px;
+        --h: 28px;
 
-        .uxf-chip__button {
-            @apply h-4 w-4;
-        }
+        @apply text-base;
     }
 
     &__text {
         @apply truncate;
+
+        letter-spacing: -0.02em;
     }
 
     &__button {
-        @apply ml-1 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded;
+        align-items: center;
+        border-radius: var(--button-border-radius);
+        display: inline-flex;
+        flex-shrink: 0;
+        height: var(--button-size);
+        justify-content: center;
+        margin-left: calc(var(--spacing-y) / 2);
+        text-align: center;
+        width: var(--button-size);
 
-        svg {
-            @apply h-2 w-2;
+        &-label {
+            @apply sr-only;
+        }
+
+        &-icon {
+            height: 8px;
+            width: 8px;
+        }
+
+        &:hover {
+            background-color: var(--button-bg-color-hover);
+            color: var(--button-color-hover);
         }
     }
 
     &--variant-default {
+        --button-color-hover: var(--color);
+
         &.uxf-chip--color-orange {
             :root .light & {
-                @apply text-white bg-orange-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-orange-200;
-                }
+                --bg-color: theme("colors.orange.500");
+                --button-bg-color-hover: theme("colors.orange.700");
+                --color: theme("colors.white");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-orange-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-orange-800;
-                }
+                --bg-color: theme("colors.orange.700");
+                --button-bg-color-hover: theme("colors.orange.900");
+                --color: theme("colors.orange.100");
             }
         }
 
         &.uxf-chip--color-red {
             :root .light & {
-                @apply text-white bg-red-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-red-200;
-                }
+                --bg-color: theme("colors.red.500");
+                --button-bg-color-hover: theme("colors.red.700");
+                --color: theme("colors.white");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-red-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-red-800;
-                }
+                --bg-color: theme("colors.red.700");
+                --button-bg-color-hover: theme("colors.red.900");
+                --color: theme("colors.red.100");
             }
         }
 
         &.uxf-chip--color-yellow {
             :root .light & {
-                @apply text-white bg-yellow-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-yellow-200;
-                }
+                --bg-color: theme("colors.yellow.500");
+                --button-bg-color-hover: theme("colors.yellow.700");
+                --color: theme("colors.white");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-yellow-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-yellow-800;
-                }
+                --bg-color: theme("colors.yellow.700");
+                --button-bg-color-hover: theme("colors.yellow.900");
+                --color: theme("colors.yellow.100");
             }
         }
 
         &.uxf-chip--color-pink {
             :root .light & {
-                @apply text-white bg-pink-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-pink-200;
-                }
+                --bg-color: theme("colors.pink.500");
+                --button-bg-color-hover: theme("colors.pink.700");
+                --color: theme("colors.white");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-pink-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-pink-800;
-                }
+                --bg-color: theme("colors.pink.700");
+                --button-bg-color-hover: theme("colors.pink.900");
+                --color: theme("colors.pink.100");
             }
         }
 
         &.uxf-chip--color-purple {
             :root .light & {
-                @apply text-white bg-purple-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-purple-200;
-                }
+                --bg-color: theme("colors.purple.500");
+                --button-bg-color-hover: theme("colors.purple.700");
+                --color: theme("colors.white");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-purple-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-purple-800;
-                }
+                --bg-color: theme("colors.purple.700");
+                --button-bg-color-hover: theme("colors.purple.900");
+                --color: theme("colors.purple.100");
             }
         }
 
         &.uxf-chip--color-indigo {
             :root .light & {
-                @apply text-white bg-indigo-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-indigo-200;
-                }
+                --bg-color: theme("colors.indigo.500");
+                --button-bg-color-hover: theme("colors.indigo.700");
+                --color: theme("colors.white");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-indigo-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-indigo-800;
-                }
+                --bg-color: theme("colors.indigo.700");
+                --button-bg-color-hover: theme("colors.indigo.900");
+                --color: theme("colors.indigo.100");
             }
         }
 
         &.uxf-chip--color-green {
             :root .light & {
-                @apply text-white bg-green-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-green-200;
-                }
+                --bg-color: theme("colors.green.500");
+                --button-bg-color-hover: theme("colors.green.700");
+                --color: theme("colors.white");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-green-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-green-800;
-                }
+                --bg-color: theme("colors.green.700");
+                --button-bg-color-hover: theme("colors.green.900");
+                --color: theme("colors.green.100");
             }
         }
 
         &.uxf-chip--color-blue {
             :root .light & {
-                @apply text-white bg-blue-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-blue-200;
-                }
+                --bg-color: theme("colors.blue.500");
+                --button-bg-color-hover: theme("colors.blue.700");
+                --color: theme("colors.white");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-blue-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-blue-800;
-                }
+                --bg-color: theme("colors.blue.700");
+                --button-bg-color-hover: theme("colors.blue.900");
+                --color: theme("colors.blue.100");
             }
         }
 
         &.uxf-chip--color-default {
             :root .light & {
-                @apply text-white bg-gray-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-gray-200;
-                }
+                --bg-color: theme("colors.gray.500");
+                --button-bg-color-hover: theme("colors.gray.700");
+                --color: theme("colors.white");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-gray-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-gray-800;
-                }
+                --bg-color: theme("colors.gray.700");
+                --button-bg-color-hover: theme("colors.gray.900");
+                --color: theme("colors.gray.100");
             }
         }
 
         &.uxf-chip--color-primary {
             :root .light & {
-                @apply text-white bg-primary-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-primary-200;
-                }
+                --bg-color: theme("colors.primary.500");
+                --button-bg-color-hover: theme("colors.primary.700");
+                --color: theme("colors.white");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-primary-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-primary-800;
-                }
+                --bg-color: theme("colors.primary.700");
+                --button-bg-color-hover: theme("colors.primary.900");
+                --color: theme("colors.primary.100");
             }
         }
     }
 
     &--variant-medium {
+        --button-color-hover: var(--color);
+
         &.uxf-chip--color-orange {
             :root .light & {
-                @apply text-orange-700 bg-orange-100;
-
-                .uxf-chip__button {
-                    @apply hover:bg-orange-200;
-                }
+                --bg-color: theme("colors.orange.100");
+                --button-bg-color-hover: theme("colors.orange.300");
+                --color: theme("colors.orange.700");
             }
 
             :root .dark & {
-                @apply text-orange-100 bg-orange-700;
-
-                .uxf-chip__button {
-                    @apply hover:bg-orange-800;
-                }
+                --bg-color: theme("colors.orange.400");
+                --button-bg-color-hover: theme("colors.orange.500");
+                --color: theme("colors.lightHigh");
             }
         }
 
         &.uxf-chip--color-red {
             :root .light & {
-                @apply text-red-700 bg-red-100;
-
-                .uxf-chip__button {
-                    @apply hover:bg-red-200;
-                }
+                --bg-color: theme("colors.red.100");
+                --button-bg-color-hover: theme("colors.red.300");
+                --color: theme("colors.red.700");
             }
 
             :root .dark & {
-                @apply text-red-100 bg-red-700;
-
-                .uxf-chip__button {
-                    @apply hover:bg-red-800;
-                }
+                --bg-color: theme("colors.red.400");
+                --button-bg-color-hover: theme("colors.red.500");
+                --color: theme("colors.lightHigh");
             }
         }
 
         &.uxf-chip--color-yellow {
             :root .light & {
-                @apply text-yellow-700 bg-yellow-100;
-
-                .uxf-chip__button {
-                    @apply hover:bg-yellow-200;
-                }
+                --bg-color: theme("colors.yellow.100");
+                --button-bg-color-hover: theme("colors.yellow.300");
+                --color: theme("colors.yellow.700");
             }
 
             :root .dark & {
-                @apply text-yellow-100 bg-yellow-700;
-
-                .uxf-chip__button {
-                    @apply hover:bg-yellow-800;
-                }
+                --bg-color: theme("colors.yellow.400");
+                --button-bg-color-hover: theme("colors.yellow.500");
+                --color: theme("colors.lightHigh");
             }
         }
 
         &.uxf-chip--color-pink {
             :root .light & {
-                @apply text-pink-700 bg-pink-100;
-
-                .uxf-chip__button {
-                    @apply hover:bg-pink-200;
-                }
+                --bg-color: theme("colors.pink.100");
+                --button-bg-color-hover: theme("colors.pink.300");
+                --color: theme("colors.pink.700");
             }
 
             :root .dark & {
-                @apply text-pink-100 bg-pink-700;
-
-                .uxf-chip__button {
-                    @apply hover:bg-pink-800;
-                }
+                --bg-color: theme("colors.pink.400");
+                --button-bg-color-hover: theme("colors.pink.500");
+                --color: theme("colors.lightHigh");
             }
         }
 
         &.uxf-chip--color-purple {
             :root .light & {
-                @apply text-purple-700 bg-purple-100;
-
-                .uxf-chip__button {
-                    @apply hover:bg-purple-200;
-                }
+                --bg-color: theme("colors.purple.100");
+                --button-bg-color-hover: theme("colors.purple.300");
+                --color: theme("colors.purple.700");
             }
 
             :root .dark & {
-                @apply text-purple-100 bg-purple-700;
-
-                .uxf-chip__button {
-                    @apply hover:bg-purple-800;
-                }
+                --bg-color: theme("colors.purple.400");
+                --button-bg-color-hover: theme("colors.purple.500");
+                --color: theme("colors.lightHigh");
             }
         }
 
         &.uxf-chip--color-indigo {
             :root .light & {
-                @apply text-indigo-700 bg-indigo-100;
-
-                .uxf-chip__button {
-                    @apply hover:bg-indigo-200;
-                }
+                --bg-color: theme("colors.indigo.100");
+                --button-bg-color-hover: theme("colors.indigo.300");
+                --color: theme("colors.indigo.700");
             }
 
             :root .dark & {
-                @apply text-indigo-100 bg-indigo-700;
-
-                .uxf-chip__button {
-                    @apply hover:bg-indigo-800;
-                }
+                --bg-color: theme("colors.indigo.400");
+                --button-bg-color-hover: theme("colors.indigo.500");
+                --color: theme("colors.lightHigh");
             }
         }
 
         &.uxf-chip--color-green {
             :root .light & {
-                @apply text-green-700 bg-green-100;
-
-                .uxf-chip__button {
-                    @apply hover:bg-green-200;
-                }
+                --bg-color: theme("colors.green.100");
+                --button-bg-color-hover: theme("colors.green.300");
+                --color: theme("colors.green.700");
             }
 
             :root .dark & {
-                @apply text-green-100 bg-green-700;
-
-                .uxf-chip__button {
-                    @apply hover:bg-green-800;
-                }
+                --bg-color: theme("colors.green.400");
+                --button-bg-color-hover: theme("colors.green.500");
+                --color: theme("colors.lightHigh");
             }
         }
 
         &.uxf-chip--color-blue {
             :root .light & {
-                @apply text-blue-700 bg-blue-100;
-
-                .uxf-chip__button {
-                    @apply hover:bg-blue-200;
-                }
+                --bg-color: theme("colors.blue.100");
+                --button-bg-color-hover: theme("colors.blue.300");
+                --color: theme("colors.blue.700");
             }
 
             :root .dark & {
-                @apply text-blue-100 bg-blue-700;
-
-                .uxf-chip__button {
-                    @apply hover:bg-blue-800;
-                }
+                --bg-color: theme("colors.blue.400");
+                --button-bg-color-hover: theme("colors.blue.500");
+                --color: theme("colors.lightHigh");
             }
         }
 
         &.uxf-chip--color-default {
             :root .light & {
-                @apply text-gray-700 bg-gray-100;
-
-                .uxf-chip__button {
-                    @apply hover:bg-gray-200;
-                }
+                --bg-color: theme("colors.gray.100");
+                --button-bg-color-hover: theme("colors.gray.300");
+                --color: theme("colors.gray.700");
             }
 
             :root .dark & {
-                @apply text-gray-100 bg-gray-700;
-
-                .uxf-chip__button {
-                    @apply hover:bg-gray-800;
-                }
+                --bg-color: theme("colors.gray.400");
+                --button-bg-color-hover: theme("colors.gray.500");
+                --color: theme("colors.lightHigh");
             }
         }
 
         &.uxf-chip--color-primary {
             :root .light & {
-                @apply text-primary-700 bg-primary-100;
-
-                .uxf-chip__button {
-                    @apply hover:bg-primary-200;
-                }
+                --bg-color: theme("colors.primary.100");
+                --button-bg-color-hover: theme("colors.primary.300");
+                --color: theme("colors.primary.700");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-primary-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-primary-800;
-                }
+                --bg-color: theme("colors.primary.400");
+                --button-bg-color-hover: theme("colors.primary.500");
+                --color: theme("colors.lightHigh");
             }
         }
     }
 
     &--variant-low {
-        @apply border;
+        --bg-color: transparent;
+        --button-color-hover: var(--color);
+        --spacing-x: calc(theme("spacing.2") - 1px);
+
+        border: 1px solid var(--color);
 
         &.uxf-chip--color-orange {
             :root .light & {
-                @apply text-orange-500 border-orange-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-orange-200;
-                }
+                --button-bg-color-hover: theme("colors.orange.200");
+                --color: theme("colors.orange.500");
             }
 
             :root .dark & {
-                @apply text-orange-400 border-orange-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-orange-800;
-                }
+                --button-bg-color-hover: theme("colors.orange.900");
+                --color: theme("colors.orange.400");
             }
         }
 
         &.uxf-chip--color-red {
             :root .light & {
-                @apply text-red-500 border-red-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-red-200;
-                }
+                --button-bg-color-hover: theme("colors.red.200");
+                --color: theme("colors.red.500");
             }
 
             :root .dark & {
-                @apply text-red-400 border-red-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-red-800;
-                }
+                --button-bg-color-hover: theme("colors.red.900");
+                --color: theme("colors.red.400");
             }
         }
 
         &.uxf-chip--color-yellow {
             :root .light & {
-                @apply text-yellow-500 border-yellow-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-yellow-200;
-                }
+                --button-bg-color-hover: theme("colors.yellow.200");
+                --color: theme("colors.yellow.500");
             }
 
             :root .dark & {
-                @apply text-yellow-400 outline-yellow-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-yellow-800;
-                }
+                --button-bg-color-hover: theme("colors.yellow.900");
+                --color: theme("colors.yellow.400");
             }
         }
 
         &.uxf-chip--color-pink {
             :root .light & {
-                @apply text-pink-500 border-pink-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-pink-200;
-                }
+                --button-bg-color-hover: theme("colors.pink.200");
+                --color: theme("colors.pink.500");
             }
 
             :root .dark & {
-                @apply text-pink-400 border-pink-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-pink-800;
-                }
+                --button-bg-color-hover: theme("colors.pink.900");
+                --color: theme("colors.pink.400");
             }
         }
 
         &.uxf-chip--color-purple {
             :root .light & {
-                @apply text-purple-500 border-purple-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-purple-200;
-                }
+                --button-bg-color-hover: theme("colors.purple.200");
+                --color: theme("colors.purple.500");
             }
 
             :root .dark & {
-                @apply text-purple-400 border-purple-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-purple-800;
-                }
+                --button-bg-color-hover: theme("colors.purple.900");
+                --color: theme("colors.purple.400");
             }
         }
 
         &.uxf-chip--color-indigo {
             :root .light & {
-                @apply text-indigo-500 border-indigo-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-indigo-200;
-                }
+                --button-bg-color-hover: theme("colors.indigo.200");
+                --color: theme("colors.indigo.500");
             }
 
             :root .dark & {
-                @apply text-indigo-400 border-indigo-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-indigo-800;
-                }
+                --button-bg-color-hover: theme("colors.indigo.900");
+                --color: theme("colors.indigo.400");
             }
         }
 
         &.uxf-chip--color-green {
             :root .light & {
-                @apply text-green-500 border-green-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-green-200;
-                }
+                --button-bg-color-hover: theme("colors.green.200");
+                --color: theme("colors.green.500");
             }
 
             :root .dark & {
-                @apply text-green-400 border-green-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-green-800;
-                }
+                --button-bg-color-hover: theme("colors.green.900");
+                --color: theme("colors.green.400");
             }
         }
 
         &.uxf-chip--color-blue {
             :root .light & {
-                @apply text-blue-500 border-blue-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-blue-200;
-                }
+                --button-bg-color-hover: theme("colors.blue.200");
+                --color: theme("colors.blue.500");
             }
 
             :root .dark & {
-                @apply text-blue-400 border-blue-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-blue-800;
-                }
+                --button-bg-color-hover: theme("colors.blue.900");
+                --color: theme("colors.blue.400");
             }
         }
 
         &.uxf-chip--color-default {
             :root .light & {
-                @apply text-gray-500 border-gray-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-gray-200;
-                }
+                --button-bg-color-hover: theme("colors.gray.200");
+                --color: theme("colors.gray.500");
             }
 
             :root .dark & {
-                @apply text-gray-400 border-gray-400;
-
-                .uxf-chip__button {
-                    @apply hover:bg-gray-800;
-                }
+                --button-bg-color-hover: theme("colors.gray.900");
+                --color: theme("colors.gray.400");
             }
         }
 
         &.uxf-chip--color-primary {
             :root .light & {
-                @apply text-primary-500 border-primary-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-primary-200;
-                }
+                --button-bg-color-hover: theme("colors.primary.200");
+                --color: theme("colors.primary.500");
             }
 
             :root .dark & {
-                @apply text-lightHigh bg-primary-500;
-
-                .uxf-chip__button {
-                    @apply hover:bg-primary-800;
-                }
+                --button-bg-color-hover: theme("colors.primary.900");
+                --color: theme("colors.primary.400");
             }
         }
     }