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

package/dist/components/suggestion-group.css

@@ -0,0 +1,121 @@
+/* Base */
+@utility suggestion-group {
+  @apply xds:font-family-main xds:font-regular xds:text-neutral-90;
+  @apply xds:grid xds:grid-flow-col xds:grid-cols-[auto_[last-col]] xds:auto-cols-[1fr];
+  @apply xds:items-center xds:content-center xds:justify-start;
+  @apply xds:box-border xds:cursor-pointer xds:overflow-hidden;
+  @apply xds:ps-0 xds:pe-0 xds:gap-16;
+
+  /* `@apply xds:suggestion-group-md;` can not be use here because cause circular dependency. */
+  @apply xds:min-h-32 xds:text-sm;
+
+  &:hover {
+    @apply xds:underline;
+  }
+
+  & .xds\:icon {
+    @apply xds:icon-offset;
+  }
+
+  & > .xds\:suggestion {
+    @apply xds:min-h-[inherit] xds:text-inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    text-decoration: inherit;
+  }
+}
+
+/* Sizes */
+@utility suggestion-group-sm {
+  @apply xds:min-h-24 xds:text-sm;
+}
+@utility suggestion-group-md {
+  @apply xds:min-h-32 xds:text-sm;
+}
+@utility suggestion-group-lg {
+  @apply xds:min-h-48 xds:gap-24 xds:text-md;
+}
+
+/* Outlined */
+@utility suggestion-group-outlined {
+  @apply xds:bg-neutral-0 xds:border-1 xds:border-neutral-90;
+  @apply xds:gap-4!;
+
+  &:hover,
+  &:hover * {
+    @apply xds:bg-neutral-10 xds:no-underline!;
+  }
+
+  & > *:first-child:not(.xds\:suggestion-group-button) {
+    @apply xds:ms-8;
+  }
+
+  & > *:last-child:not(.xds\:suggestion-group-button) {
+    @apply xds:me-8;
+  }
+
+  &.xds\:suggestion-group-lg > *:first-child:not(.xds\:suggestion-group-button) {
+    @apply xds:ms-12;
+  }
+
+  &.xds\:suggestion-group-lg > *:last-child:not(.xds\:suggestion-group-button) {
+    @apply xds:me-12;
+  }
+}
+
+/* Ghost */
+@utility suggestion-group-ghost {
+  @apply xds:suggestion-group-outlined;
+  @apply xds:bg-transparent xds:border-0;
+}
+
+/* Colors */
+@utility suggestion-group-* {
+  color: --value(--color- * -75);
+
+  &.xds\:suggestion-group-outlined {
+    border-color: --value(--color- * -75);
+  }
+}
+
+/* Button */
+@utility suggestion-group-button {
+  @apply xds:grid xds:grid-flow-col xds:items-baseline xds:content-center xds:justify-center;
+  @apply xds:box-border xds:cursor-pointer;
+  @apply xds:bg-transparent xds:text-current xds:min-h-[inherit] xds:aspect-square xds:max-h-full;
+  @apply xds:before:content-['|'] xds:before:w-0 xds:before:invisible;
+
+  &:hover {
+    @apply xds:scale-[1.2];
+  }
+
+  &:last-child {
+    @apply xds:justify-self-end;
+  }
+}
+
+/* Button Ghost */
+@utility suggestion-group-button-ghost {
+  &:hover {
+    @apply xds:bg-neutral-25 xds:scale-none;
+  }
+}
+
+/* Button Rectangle */
+@utility suggestion-group-button-rectangle {
+  @apply xds:ps-8 xds:pe-8 xds:aspect-auto;
+}
+
+/* Button Lighter */
+@utility suggestion-group-button-lighter {
+  &:hover {
+    @apply xds:scale-none;
+  }
+}
+
+/* Button Colors */
+@utility suggestion-group-button-* {
+  &.xds\:suggestion-group-button-lighter:hover {
+    color: --value(--color- * -50);
+  }
+}

package/dist/components/suggestion.css

@@ -0,0 +1,53 @@
+/* Base */
+@utility suggestion {
+  @apply xds:font-family-main xds:font-regular xds:text-start xds:text-neutral-90;
+  @apply xds:grid xds:grid-flow-col xds:items-center xds:content-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:bg-neutral-0 xds:border-1 xds:border-current;
+  @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,195 @@
+/* Base */
+@utility tag {
+  @apply xds:flex xds:justify-center xds:items-center xds:content-center xds:flex-row xds:flex-nowrap xds:gap-8;
+  @apply xds:border-1 xds:border-solid xds:box-border;
+  @apply xds:text-neutral-75 xds:bg-neutral-0 xds:border-neutral-25;
+  @apply xds:font-family-main xds:font-regular xds:tracking-lg xds:leading-sm;
+  @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:text-sm xds:ps-12 xds:pe-12;
+
+  @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-neutral-25 xds:border-1 xds:text-neutral-25;
+    @apply xds:cursor-not-allowed;
+  }
+}
+
+/* Sizes */
+@utility tag-sm {
+  @apply xds:min-h-24 xds:text-sm xds:ps-8 xds:pe-8;
+}
+
+@utility tag-md {
+  @apply xds:min-h-32 xds:text-sm xds:ps-12 xds:pe-12;
+}
+
+@utility tag-lg {
+  @apply xds:min-h-40 xds:text-md xds:ps-16 xds:pe-16;
+}
+
+/* Outlined */
+@utility tag-outlined {
+  @apply xds:bg-transparent xds:border-neutral-50 xds:text-neutral-50;
+
+  @variant selected {
+    @apply xds:bg-neutral-25 xds:border-neutral-90 xds:text-neutral-75 xds:border-1;
+  }
+
+  @variant hover-active-focus {
+    @apply xds:border-neutral-75 xds:text-neutral-75;
+  }
+
+  @variant disabled {
+    @apply xds:bg-transparent xds:border-neutral-25 xds:border-1 xds:text-neutral-25;
+  }
+}
+
+/* Solid */
+@utility tag-solid {
+  @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-75;
+
+  @variant selected {
+    @apply xds:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
+
+    @variant hover-active-focus {
+      @apply xds:bg-neutral-50 xds:border-neutral-50 xds:text-neutral-0;
+    }
+  }
+
+  @variant hover-active-focus {
+    @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-neutral-75;
+  }
+
+  @variant disabled {
+    @apply xds:bg-neutral-10! xds:border-neutral-10! xds:text-neutral-25!;
+  }
+}
+
+/* Ghost */
+@utility tag-ghost {
+  @apply xds:bg-transparent xds:border-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:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-90;
+  }
+
+  @variant disabled {
+    @apply xds:bg-transparent xds:border-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:text-neutral-75 xds:border-neutral-25;
+
+  @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;
+}