@empathyco/x-design-system 0.0.2-alpha.2 → 0.0.2-alpha.20

package/dist/components/attach.css

@@ -0,0 +1,55 @@
+@utility attach-container {
+  @apply xds:relative;
+}
+
+@utility attach-top-left {
+  @apply xds:absolute xds:top-0 xds:left-0;
+  transform: translate(calc(var(--xds-spacing-8, 50%) * -1), -50%);
+
+  &.xds\:badge-md {
+    transform: translate(calc(var(--xds-spacing-12, 50%) * -1), -50%);
+  }
+
+  &.xds\:badge-circle {
+    transform: translate(-50%, -50%);
+  }
+}
+
+@utility attach-top-right {
+  @apply xds:absolute xds:top-0 xds:right-0;
+  transform: translate(var(--xds-spacing-8, 50%), -50%);
+
+  &.xds\:badge-md {
+    transform: translate(var(--xds-spacing-12, 50%), -50%);
+  }
+
+  &.xds\:badge-circle {
+    transform: translate(50%, -50%);
+  }
+}
+
+@utility attach-bottom-right {
+  @apply xds:absolute xds:bottom-0 xds:right-0;
+  transform: translate(var(--xds-spacing-8, 50%), 50%);
+
+  &.xds\:badge-md {
+    transform: translate(var(--xds-spacing-12, 50%), 50%);
+  }
+
+  &.xds\:badge-circle {
+    transform: translate(50%, 50%);
+  }
+}
+
+@utility attach-bottom-left {
+  @apply xds:absolute xds:bottom-0 xds:left-0;
+  transform: translate(calc(var(--xds-spacing-8, 50%) * -1), 50%);
+
+  &.xds\:badge-md {
+    transform: translate(calc(var(--xds-spacing-12, 50%) * -1), 50%);
+  }
+
+  &.xds\:badge-circle {
+    transform: translate(-50%, 50%);
+  }
+}

package/dist/components/badge.css

@@ -4,22 +4,20 @@
   @apply xds:inline-flex xds:items-center xds:justify-center xds:rounded-full;
   @apply xds:text-neutral-0 xds:bg-neutral-90;
 
-  @apply xds:badge-md;
+  /* `@apply xds:badge-md;` can not be use here because cause circular dependency. */
+  @apply xds:h-24 xds:ps-8 xds:pe-8;
 }
 
 /* Sizes */
 @utility badge-sm {
-  --attach-horizontal-offset: var(--xds-spacing-8);
   @apply xds:h-20 xds:ps-8 xds:pe-8;
 }
 @utility badge-md {
-  --attach-horizontal-offset: var(--xds-spacing-12);
   @apply xds:h-24 xds:ps-12 xds:pe-12;
 }
 
 /* Circle */
 @utility badge-circle {
-  --attach-horizontal-offset: 50%;
   @apply xds:overflow-hidden xds:whitespace-nowrap xds:p-0 xds:w-24;
 
   &.xds\:badge-sm {
@@ -30,140 +28,38 @@
   }
 }
 
-/* Colors */
-/* TODO - Look for a way to avoid hardcoded colors. Something like:
- @utility badge-* {
-  background-color: --value(--xds-color-*-75);
-}*/
-@utility badge-neutral {
-  @apply xds:bg-neutral-75;
-}
-@utility badge-lead {
-  @apply xds:bg-lead-75;
-}
-@utility badge-auxiliary {
-  @apply xds:bg-auxiliary-75;
-}
-@utility badge-accent {
-  @apply xds:bg-accent-75;
-}
-@utility badge-highlight {
-  @apply xds:bg-highlight-75;
-}
-@utility badge-success {
-  @apply xds:bg-success-75;
-}
-@utility badge-warning {
-  @apply xds:bg-warning-75;
-}
-@utility badge-error {
-  @apply xds:bg-error-75;
+/* Light */
+@utility badge-light {
+  @apply xds:text-neutral-90 xds:bg-neutral-0;
 }
 
 /* Outlined */
 @utility badge-outlined {
   @apply xds:text-neutral-90 xds:bg-transparent;
   @apply xds:border-1 xds:border-neutral-90;
-
-  &.xds\:badge-neutral {
-    @apply xds:bg-transparent;
-    @apply xds:border-neutral-50;
-  }
-  &.xds\:badge-lead {
-    @apply xds:bg-transparent;
-    @apply xds:border-lead-50;
-  }
-  &.xds\:badge-auxiliary {
-    @apply xds:bg-transparent;
-    @apply xds:border-auxiliary-50;
-  }
-  &.xds\:badge-accent {
-    @apply xds:bg-transparent;
-    @apply xds:border-accent-50;
-  }
-  &.xds\:badge-highlight {
-    @apply xds:bg-transparent;
-    @apply xds:border-highlight-50;
-  }
-  &.xds\:badge-success {
-    @apply xds:bg-transparent;
-    @apply xds:border-success-50;
-  }
-  &.xds\:badge-warning {
-    @apply xds:bg-transparent;
-    @apply xds:border-warning-50;
-  }
-  &.xds\:badge-error {
-    @apply xds:bg-transparent;
-    @apply xds:border-error-50;
-  }
-}
-
-/* Light */
-@utility badge-light {
-  @apply xds:text-neutral-90 xds:bg-neutral-0;
-
-  &.xds\:badge-neutral {
-    @apply xds:bg-neutral-25;
-  }
-  &.xds\:badge-lead {
-    @apply xds:bg-lead-25;
-  }
-  &.xds\:badge-auxiliary {
-    @apply xds:bg-auxiliary-25;
-  }
-  &.xds\:badge-accent {
-    @apply xds:bg-accent-25;
-  }
-  &.xds\:badge-highlight {
-    @apply xds:bg-highlight-25;
-  }
-  &.xds\:badge-success {
-    @apply xds:bg-success-25;
-  }
-  &.xds\:badge-warning {
-    @apply xds:bg-warning-25;
-  }
-  &.xds\:badge-error {
-    @apply xds:bg-error-25;
-  }
 }
 
 /* Bright */
 @utility badge-bright {
   @apply xds:text-neutral-90 xds:bg-transparent;
   @apply xds:border-1 xds:border-neutral-0;
+}
 
-  &.xds\:badge-neutral {
-    @apply xds:bg-transparent;
-    @apply xds:border-neutral-25;
-  }
-  &.xds\:badge-lead {
-    @apply xds:bg-transparent;
-    @apply xds:border-lead-25;
-  }
-  &.xds\:badge-auxiliary {
-    @apply xds:bg-transparent;
-    @apply xds:border-auxiliary-25;
-  }
-  &.xds\:badge-accent {
-    @apply xds:bg-transparent;
-    @apply xds:border-accent-25;
-  }
-  &.xds\:badge-highlight {
-    @apply xds:bg-transparent;
-    @apply xds:border-highlight-25;
-  }
-  &.xds\:badge-success {
-    @apply xds:bg-transparent;
-    @apply xds:border-success-25;
+/* Colors */
+@utility badge-* {
+  background-color: --value(--color- * -75);
+
+  &.xds\:badge-light {
+    background-color: --value(--color- * -25);
   }
-  &.xds\:badge-warning {
+
+  &.xds\:badge-outlined {
     @apply xds:bg-transparent;
-    @apply xds:border-warning-25;
+    border-color: --value(--color- * -50);
   }
-  &.xds\:badge-error {
+
+  &.xds\:badge-bright {
     @apply xds:bg-transparent;
-    @apply xds:border-error-25;
+    border-color: --value(--color- * -25);
   }
 }

package/dist/components/button-group.css

@@ -0,0 +1,25 @@
+/* Base */
+@utility button-group {
+  @apply xds:inline-flex;
+  @apply xds:text-neutral-50;
+
+  /* We should only remove the left border if the button group doesn't have gap */
+  &:not([class*='gap']) > .xds\:button + .xds\:button {
+    @apply xds:border-l-0;
+  }
+
+  & > :not(.xds\:button-circle):first-child {
+    @apply xds:rounded-tl-[inherit] xds:rounded-bl-[inherit];
+  }
+
+  & > :not(.xds\:button-circle):last-child {
+    @apply xds:rounded-tr-[inherit] xds:rounded-br-[inherit];
+  }
+}
+
+/* Divider */
+@utility button-group-divider {
+  @apply xds:border-l-1 xds:border-l-current;
+  @apply xds:my-8;
+  @apply xds:self-stretch;
+}

package/dist/components/button.css

@@ -0,0 +1,277 @@
+/* Base */
+@utility button {
+  @apply xds:flex xds:justify-center xds:items-center xds:content-center xds:flex-row xds:flex-nowrap;
+  @apply xds:border-1 xds:border-solid xds:box-border;
+  @apply xds:text-neutral-0 xds:bg-neutral-90 xds:border-neutral-90;
+  @apply xds:font-family-main xds:font-bold xds:tracking-md;
+  @apply xds:cursor-pointer;
+
+  /* `@apply xds:button-md;` can not be use here because cause circular dependency. */
+  @apply xds:min-h-40 xds:gap-8 xds:ps-16 xds:pe-16 xds:text-sm;
+
+  @variant hover-active {
+    @apply xds:bg-neutral-100 xds:border-neutral-100;
+  }
+
+  @variant selected {
+    @apply xds:bg-neutral-100 xds:border-neutral-100;
+
+    @variant hover-active {
+      @apply xds:bg-neutral-90 xds:border-neutral-90;
+    }
+  }
+
+  @variant disabled {
+    @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-25;
+    @apply xds:cursor-not-allowed;
+
+    @variant hover-active {
+      @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-25;
+    }
+  }
+}
+
+/* Sizes */
+@utility button-sm {
+  @apply xds:min-h-32 xds:gap-8 xds:ps-12 xds:pe-12 xds:text-sm;
+}
+@utility button-md {
+  @apply xds:min-h-40 xds:gap-8 xds:ps-16 xds:pe-16 xds:text-sm;
+}
+@utility button-lg {
+  @apply xds:min-h-48 xds:gap-8 xds:ps-20 xds:pe-20 xds:text-md;
+}
+@utility button-xl {
+  @apply xds:min-h-56 xds:gap-8 xds:ps-24 xds:pe-24 xds:text-lg;
+}
+
+/* Layouts */
+@utility button-circle {
+  @apply xds:aspect-square xds:ps-0 xds:pe-0 xds:rounded-full;
+}
+@utility button-square {
+  @apply xds:aspect-square xds:ps-0 xds:pe-0;
+}
+
+/* Outlined */
+@utility button-outlined {
+  @apply xds:text-neutral-90 xds:bg-transparent;
+  @apply xds:border-1 xds:border-neutral-90;
+
+  @variant hover-active {
+    @apply xds:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
+  }
+
+  @variant selected {
+    @apply xds:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
+
+    @variant hover-active {
+      @apply xds:bg-transparent xds:border-neutral-90 xds:text-neutral-90;
+    }
+  }
+
+  @variant disabled {
+    @apply xds:border-neutral-25 xds:bg-neutral-10 xds:text-neutral-25;
+    @apply xds:cursor-not-allowed;
+
+    @variant hover-active {
+      @apply xds:border-neutral-25 xds:bg-neutral-10 xds:text-neutral-25;
+    }
+  }
+}
+
+/* Ghost */
+@utility button-ghost {
+  @apply xds:text-neutral-90 xds:bg-transparent;
+  @apply xds:border-0;
+
+  @variant hover-active {
+    @apply xds:border-transparent xds:bg-transparent xds:text-neutral-100;
+  }
+
+  &:hover {
+    @apply xds:bg-neutral-10 xds:border-neutral-10;
+  }
+
+  @variant selected {
+    @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-90;
+
+    @variant hover-active {
+      @apply xds:bg-neutral-25 xds:border-neutral-25;
+    }
+  }
+
+  @variant disabled {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-25 xds:cursor-not-allowed;
+
+    @variant hover-active {
+      @apply xds:border-0 xds:bg-transparent xds:text-neutral-25;
+    }
+  }
+}
+
+/* Tight */
+@utility button-tight {
+  @apply xds:bg-transparent xds:border-0 xds:text-neutral-90;
+  @apply xds:pe-0 xds:ps-0;
+
+  @variant hover-active {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-100;
+  }
+
+  @variant selected {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-100;
+
+    @variant hover-active {
+      @apply xds:bg-transparent xds:border-0 xds:text-neutral-90;
+    }
+  }
+
+  @variant disabled {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-25;
+    @apply xds:cursor-not-allowed;
+
+    @variant hover-active {
+      @apply xds:border-0 xds:bg-transparent xds:text-neutral-25;
+    }
+  }
+}
+
+/* Link */
+@utility button-link {
+  @apply xds:inline-flex xds:min-h-0 xds:ps-0 xds:pe-0;
+  @apply xds:border-0 xds:text-neutral-90 xds:bg-transparent;
+  @apply xds:font-[inherit] xds:tracking-[inherit] xds:leading-[inherit] xds:underline;
+  font-size: inherit;
+  font-weight: inherit;
+
+  @variant hover-active {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-100;
+  }
+
+  @variant selected {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-100 xds:font-bold;
+
+    @variant hover-active {
+      @apply xds:bg-transparent xds:border-0 xds:text-neutral-90;
+    }
+  }
+
+  @variant disabled {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-25;
+    @apply xds:cursor-not-allowed;
+    font-weight: inherit;
+
+    @variant hover-active {
+      @apply xds:border-0 xds:bg-transparent xds:text-neutral-25;
+    }
+  }
+}
+
+/* Colors */
+@utility button-* {
+  background-color: --value(--color- * -50);
+  border-color: --value(--color- * -50);
+
+  @variant hover-active {
+    background-color: --value(--color- * -75);
+    border-color: --value(--color- * -75);
+  }
+
+  @variant selected {
+    background-color: --value(--color- * -75);
+    border-color: --value(--color- * -75);
+
+    @variant hover-active {
+      background-color: --value(--color- * -50);
+      border-color: --value(--color- * -50);
+    }
+  }
+
+  &.xds\:button-outlined {
+    @apply xds:bg-transparent;
+    border-color: --value(--color- * -50);
+    color: --value(--color- * -50);
+
+    @variant hover-active {
+      @apply xds:text-neutral-0;
+      background-color: --value(--color- * -50);
+      border-color: --value(--color- * -50);
+    }
+
+    @variant selected {
+      @apply xds:text-neutral-0;
+      background-color: --value(--color- * -50);
+      border-color: --value(--color- * -50);
+
+      @variant hover-active {
+        @apply xds:bg-transparent;
+        color: --value(--color- * -50);
+      }
+    }
+  }
+
+  &.xds\:button-ghost {
+    @apply xds:border-0 xds:bg-transparent;
+    color: --value(--color- * -50);
+
+    @variant hover-active {
+      @apply xds:border-transparent xds:bg-transparent xds:text-neutral-100;
+    }
+
+    &:hover {
+      @apply xds:bg-neutral-10 xds:border-neutral-10;
+      color: --value(--color- * -75);
+    }
+
+    @variant selected {
+      @apply xds:bg-neutral-10 xds:border-neutral-10;
+      color: --value(--color- * -75);
+
+      @variant hover-active {
+        @apply xds:bg-neutral-25 xds:border-neutral-25;
+        color: --value(--color- * -75);
+      }
+    }
+  }
+
+  &.xds\:button-tight {
+    @apply xds:border-0 xds:bg-transparent;
+    color: --value(--color- * -50);
+
+    @variant hover-active {
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
+    }
+
+    @variant selected {
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
+
+      @variant hover-active {
+        @apply xds:bg-transparent xds:border-0;
+        color: --value(--color- * -50);
+      }
+    }
+  }
+
+  &.xds\:button-link {
+    @apply xds:border-0 xds:bg-transparent;
+    color: --value(--color- * -50);
+
+    @variant hover-active {
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
+    }
+
+    @variant selected {
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
+
+      @variant hover-active {
+        @apply xds:bg-transparent xds:border-0;
+        color: --value(--color- * -50);
+      }
+    }
+  }
+}

package/dist/components/filter-facet.css

@@ -0,0 +1,129 @@
+/* Base */
+@utility filter-facet {
+  @apply xds:grid xds:grid-flow-col xds:box-border;
+  @apply xds:items-baseline-last xds:content-center xds:justify-start;
+  @apply xds:cursor-pointer;
+  @apply xds:font-family-main xds:font-regular xds:text-start xds:text-neutral-90;
+  @apply xds:border-b-1 xds:border-transparent;
+
+  /* `@apply xds:filter-facet-md;` can not be use here because cause circular dependency. */
+  @apply xds:min-h-32 xds:gap-4 xds:text-sm;
+
+  & > .xds\:icon {
+    @apply xds:icon-offset;
+  }
+
+  &:hover {
+    @apply xds:text-neutral-50;
+  }
+
+  @variant selected {
+    @apply xds:font-bold xds:tracking-xs xds:text-neutral-90;
+  }
+
+  @variant disabled {
+    @apply xds:text-neutral-25;
+    @apply xds:cursor-not-allowed;
+  }
+}
+
+/* Sizes */
+@utility filter-facet-sm {
+  @apply xds:min-h-24 xds:gap-2 xds:text-sm;
+}
+@utility filter-facet-md {
+  @apply xds:min-h-32 xds:gap-4 xds:text-sm;
+}
+@utility filter-facet-lg {
+  @apply xds:min-h-48 xds:gap-12 xds:text-md;
+}
+
+/* Underline */
+@utility filter-facet-underline {
+  &:hover {
+    @apply xds:border-current;
+
+    @variant disabled {
+      @apply xds:border-transparent;
+    }
+  }
+
+  @variant selected {
+    @apply xds:font-regular xds:tracking-md;
+  }
+}
+
+/* Ghost */
+@utility filter-facet-ghost {
+  @apply xds:px-8;
+
+  &.xds\:filter-facet-sm {
+    @apply xds:px-4;
+  }
+  &.xds\:filter-facet-md {
+    @apply xds:px-8;
+  }
+  &.xds\:filter-facet-lg {
+    @apply xds:px-12;
+  }
+
+  &:hover {
+    @apply xds:bg-neutral-10 xds:text-neutral-90;
+  }
+
+  @variant selected {
+    @apply xds:font-regular xds:tracking-md xds:text-neutral-75;
+  }
+
+  @variant disabled {
+    @apply xds:border-transparent xds:text-neutral-25 xds:bg-transparent;
+  }
+}
+
+/* Simple */
+@utility filter-facet-simple {
+  @apply xds:px-8;
+
+  &:hover {
+    @apply xds:text-neutral-90 xds:opacity-60;
+  }
+
+  @variant selected {
+    @apply xds:font-regular xds:tracking-md;
+
+    &:hover {
+      @apply xds:text-neutral-50;
+    }
+
+    @variant disabled {
+      @apply xds:text-neutral-25;
+    }
+  }
+
+  @variant disabled {
+    @apply xds:opacity-100 xds:text-neutral-25;
+  }
+}
+
+/* Colors */
+@utility filter-facet-* {
+  &:hover:not(.xds\:filter-facet-ghost) {
+    color: --value(--color- * -50);
+  }
+
+  @variant selected {
+    color: --value(--color- * -50);
+  }
+
+  &.xds\:filter-facet-simple.xds\:selected {
+    &:hover {
+      color: --value(--color- * -50);
+    }
+  }
+
+  &.xds\:filter-facet-ghost {
+    @variant selected {
+      color: --value(--color- * -75);
+    }
+  }
+}

package/dist/components/highlight.css

@@ -0,0 +1,9 @@
+/* Base */
+@utility highlight-text {
+  @apply xds:font-bold;
+}
+
+/* Match */
+@utility highlight-text-match {
+  @apply xds:font-regular;
+}