@empathyco/x-design-system 0.0.2-alpha.8 → 0.1.0-alpha.0

package/dist/components/suggestion.css

@@ -0,0 +1,53 @@
+/* Base */
+@utility suggestion {
+  @apply xds:text-start xds:font-family-main xds:font-regular xds:text-neutral-90;
+  @apply xds:grid xds:grid-flow-col xds:content-center xds:items-center xds:justify-start;
+  @apply xds:box-border xds:cursor-pointer;
+
+  /* `@apply xds:suggestion-md;` can not be use here because cause circular dependency. */
+  @apply xds:min-h-32 xds:gap-8 xds:text-sm;
+
+  &:hover {
+    @apply xds:underline;
+  }
+
+  & .xds\:icon {
+    @apply xds:icon-offset;
+  }
+}
+
+/* Sizes */
+@utility suggestion-sm {
+  @apply xds:min-h-24 xds:gap-8 xds:text-sm;
+}
+@utility suggestion-md {
+  @apply xds:min-h-32 xds:gap-8 xds:text-sm;
+}
+@utility suggestion-lg {
+  @apply xds:min-h-48 xds:gap-24 xds:text-md;
+}
+
+/* Outlined */
+@utility suggestion-outlined {
+  @apply xds:border-1 xds:border-current xds:bg-neutral-0;
+  @apply xds:ps-8 xds:pe-8;
+
+  &:hover {
+    @apply xds:bg-neutral-10 xds:no-underline;
+  }
+
+  &.xds\:suggestion-lg {
+    @apply xds:ps-12 xds:pe-12;
+  }
+}
+
+/* Ghost */
+@utility suggestion-ghost {
+  @apply xds:suggestion-outlined;
+  @apply xds:border-neutral-0;
+}
+
+/* Colors */
+@utility suggestion-* {
+  color: --value(--color-*-75);
+}

package/dist/components/tag.css

@@ -0,0 +1,193 @@
+/* Base */
+@utility tag {
+  @apply xds:flex xds:flex-row xds:flex-nowrap xds:content-center xds:items-center xds:justify-center xds:gap-8;
+  @apply xds:box-border xds:border-1 xds:border-solid;
+  @apply xds:border-neutral-25 xds:bg-neutral-0 xds:text-neutral-75;
+  @apply xds:font-family-main xds:leading-sm xds:font-regular xds:tracking-lg;
+  @apply xds:cursor-pointer;
+  @apply xds:py-0;
+
+  /* `@apply xds:tag-md;` can not be use here because cause circular dependency. */
+  @apply xds:min-h-32 xds:ps-12 xds:pe-12 xds:text-sm;
+
+  @variant selected {
+    @apply xds:border-neutral-90 xds:text-neutral-90;
+    @apply xds:border-2;
+  }
+
+  @variant hover-active-focus {
+    @apply xds:border-neutral-50 xds:text-neutral-90;
+  }
+
+  @variant disabled {
+    @apply xds:border-1 xds:border-neutral-25 xds:text-neutral-25;
+    @apply xds:cursor-not-allowed;
+  }
+}
+
+/* Sizes */
+@utility tag-sm {
+  @apply xds:min-h-24 xds:ps-8 xds:pe-8 xds:text-sm;
+}
+@utility tag-md {
+  @apply xds:min-h-32 xds:ps-12 xds:pe-12 xds:text-sm;
+}
+@utility tag-lg {
+  @apply xds:min-h-40 xds:ps-16 xds:pe-16 xds:text-md;
+}
+
+/* Outlined */
+@utility tag-outlined {
+  @apply xds:border-neutral-50 xds:bg-transparent xds:text-neutral-50;
+
+  @variant selected {
+    @apply xds:border-1 xds:border-neutral-90 xds:bg-neutral-25 xds:text-neutral-75;
+  }
+
+  @variant hover-active-focus {
+    @apply xds:border-neutral-75 xds:text-neutral-75;
+  }
+
+  @variant disabled {
+    @apply xds:border-1 xds:border-neutral-25 xds:bg-transparent xds:text-neutral-25;
+  }
+}
+
+/* Solid */
+@utility tag-solid {
+  @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-75;
+
+  @variant selected {
+    @apply xds:border-neutral-90 xds:bg-neutral-90 xds:text-neutral-0;
+
+    @variant hover-active-focus {
+      @apply xds:border-neutral-50 xds:bg-neutral-50 xds:text-neutral-0;
+    }
+  }
+
+  @variant hover-active-focus {
+    @apply xds:border-neutral-25 xds:bg-neutral-25 xds:text-neutral-75;
+  }
+
+  @variant disabled {
+    @apply xds:border-neutral-10! xds:bg-neutral-10! xds:text-neutral-25!;
+  }
+}
+
+/* Ghost */
+@utility tag-ghost {
+  @apply xds:border-transparent xds:bg-transparent xds:text-neutral-50;
+
+  @variant selected {
+    @apply xds:border-transparent xds:text-neutral-90;
+    @apply xds:font-bold;
+
+    @variant hover-active-focus {
+      @apply xds:border-neutral-10;
+    }
+  }
+
+  @variant hover-active-focus {
+    @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-90;
+  }
+
+  @variant disabled {
+    @apply xds:border-transparent! xds:bg-transparent xds:text-neutral-25;
+    @apply xds:font-regular;
+  }
+}
+
+/* Tight */
+@utility tag-tight {
+  @apply xds:border-transparent xds:text-neutral-90;
+  @apply xds:ps-0 xds:pe-0;
+
+  @variant selected {
+    @apply xds:border-transparent xds:text-neutral-90;
+    @apply xds:font-bold;
+  }
+
+  @variant hover-active-focus {
+    @apply xds:border-transparent xds:text-neutral-50;
+  }
+
+  @variant disabled {
+    @apply xds:border-transparent xds:text-neutral-25;
+    @apply xds:font-regular;
+  }
+}
+
+/* Colors */
+@utility tag-* {
+  @apply xds:border-neutral-25 xds:text-neutral-75;
+
+  @variant selected {
+    border-color: --value(--color-*-75);
+  }
+
+  @variant hover-active-focus {
+    @apply xds:text-neutral-90;
+    border-color: --value(--color-*-50);
+  }
+
+  &.xds\:tag-outlined {
+    @apply xds:text-neutral-75;
+    border-color: --value(--color-*-50);
+
+    @variant selected {
+      background-color: --value(--color-*-25);
+      border-color: --value(--color-*-75);
+    }
+
+    @variant hover-active-focus {
+      border-color: --value(--color-*-75);
+      color: --value(--color-*-75);
+    }
+  }
+
+  &.xds\:tag-solid {
+    background-color: --value(--color-*-25);
+    border-color: --value(--color-*-25);
+
+    @variant selected {
+      background-color: --value(--color-*-75);
+      border-color: --value(--color-*-75);
+
+      @variant hover-active-focus {
+        background-color: --value(--color-*-50);
+        border-color: --value(--color-*-50);
+      }
+    }
+
+    @variant hover-active-focus {
+      background-color: --value(--color-*-25);
+      border-color: --value(--color-*-25);
+      color: --value(--color-*-75);
+    }
+  }
+
+  &.xds\:tag-ghost {
+    @apply xds:border-transparent;
+    color: --value(--color-*-75);
+
+    @variant selected {
+      color: --value(--color-*-75);
+    }
+
+    @variant hover-active-focus {
+      color: --value(--color-*-75);
+    }
+  }
+
+  &.xds\:tag-tight {
+    color: --value(--color-*-75);
+
+    @variant selected {
+      color: --value(--color-*-75);
+    }
+
+    @variant hover-active-focus {
+      color: --value(--color-*-50);
+    }
+  }
+}

package/dist/components/typography.css

@@ -0,0 +1,74 @@
+/* text1 */
+@utility text1 {
+  @apply xds:font-family-main xds:font-regular;
+  @apply xds:text1-md;
+}
+@utility text1-sm {
+  @apply xds:text-xs xds:leading-lg;
+}
+@utility text1-md {
+  @apply xds:text-sm xds:leading-md;
+}
+@utility text1-lg {
+  @apply xds:text-md;
+}
+
+/* title1 */
+@utility title1 {
+  @apply xds:font-family-main xds:font-bold;
+  @apply xds:title1-md;
+}
+@utility title1-sm {
+  @apply xds:text-xl xds:leading-md;
+}
+@utility title1-md {
+  @apply xds:text-2xl xds:leading-sm;
+}
+@utility title1-lg {
+  @apply xds:text-4xl;
+}
+
+/* title2 */
+@utility title2 {
+  @apply xds:font-family-main xds:font-bold;
+  @apply xds:title2-md;
+}
+@utility title2-sm {
+  @apply xds:text-lg;
+}
+@utility title2-md {
+  @apply xds:text-xl xds:leading-md;
+}
+@utility title2-lg {
+  @apply xds:text-3xl xds:leading-sm;
+}
+
+/* title3 */
+@utility title3 {
+  @apply xds:font-family-main xds:font-bold;
+  @apply xds:title3-md;
+}
+@utility title3-sm {
+  @apply xds:text-sm;
+}
+@utility title3-md {
+  @apply xds:text-md xds:leading-md;
+}
+@utility title3-lg {
+  @apply xds:text-xl;
+}
+
+/* title4 */
+@utility title4 {
+  @apply xds:font-family-main xds:font-bold;
+  @apply xds:title4-md;
+}
+@utility title4-sm {
+  @apply xds:text-xs;
+}
+@utility title4-md {
+  @apply xds:text-sm xds:leading-md;
+}
+@utility title4-lg {
+  @apply xds:text-lg;
+}