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

package/dist/components/input-group.css

@@ -0,0 +1,201 @@
+/* Base */
+@utility input-group {
+  @apply xds:input;
+  @apply xds:flex xds:flex-row xds:flex-nowrap xds:content-center xds:items-center;
+  @apply xds:gap-8 xds:overflow-hidden xds:ps-0 xds:pe-0;
+
+  & > :first-child:not(.xds\:input-group-button-primary) {
+    @apply xds:ms-16;
+  }
+  & > :last-child:not(.xds\:input-group-button-primary) {
+    @apply xds:me-16;
+  }
+
+  & .xds\:input,
+  & input {
+    @apply xds:min-w-0 xds:flex-1 xds:border-0 xds:p-0;
+    @apply xds:bg-transparent xds:text-inherit xds:outline-none;
+  }
+}
+
+/* Sizes */
+@utility input-group-sm {
+  @apply xds:input-sm;
+
+  & > .xds\:input-group-button {
+    @apply xds:text-xs;
+  }
+
+  & > .xds\:input-group-button-primary {
+    @apply xds:text-sm;
+  }
+
+  & > .xds\:input-group-button-rectangle {
+    @apply xds:ps-12 xds:pe-12;
+  }
+}
+@utility input-group-md {
+  @apply xds:input-md;
+
+  & > .xds\:input-group-button {
+    @apply xds:text-sm;
+  }
+
+  & > .xds\:input-group-button-primary {
+    @apply xds:text-sm;
+  }
+
+  & > .xds\:input-group-button-rectangle {
+    @apply xds:ps-16 xds:pe-16;
+  }
+}
+@utility input-group-lg {
+  @apply xds:input-lg;
+
+  & > .xds\:input-group-button {
+    @apply xds:text-sm;
+  }
+
+  & > .xds\:input-group-button-primary {
+    @apply xds:text-md;
+  }
+
+  & > .xds\:input-group-button-rectangle {
+    @apply xds:ps-20 xds:pe-20;
+  }
+}
+
+/* Line */
+@utility input-group-line {
+  @apply xds:input-line;
+
+  @variant disabled {
+    @apply xds:bg-none;
+  }
+
+  & > .xds\:input-group-button {
+    @apply xds:h-32;
+  }
+
+  &.xds\:input-group-sm {
+    @apply xds:pb-4;
+
+    & > .xds\:input-group-button {
+      @apply xds:h-28;
+    }
+  }
+
+  & > .xds\:input-group-button-primary:first-child {
+    @apply xds:border-s;
+  }
+
+  & > .xds\:input-group-button-primary:first-child {
+    @apply xds:border-e;
+  }
+}
+
+/* Input Group Button */
+@utility input-group-button {
+  @apply xds:button;
+  @apply xds:aspect-square xds:h-full xds:p-0;
+  @apply xds:text-sm xds:font-regular;
+  @apply xds:border-transparent xds:bg-transparent xds:text-neutral-50;
+
+  @variant hover-active-focus {
+    @apply xds:border-transparent xds:bg-transparent xds:text-neutral-75;
+  }
+
+  @variant disabled {
+    @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-25;
+  }
+}
+
+/* Input Group Primary Button */
+@utility input-group-button-primary {
+  @apply xds:border-0 xds:border-l-1 xds:border-neutral-90 xds:bg-neutral-90 xds:text-neutral-0;
+
+  @variant hover-active-focus {
+    @apply xds:border-neutral-75 xds:bg-neutral-75;
+  }
+
+  &:first-child {
+    @apply xds:ms-0 xds:border-s-0;
+  }
+
+  &:last-child {
+    @apply xds:me-0 xds:border-e-0;
+  }
+}
+
+/* Input Group Rectangle Button */
+@utility input-group-button-rectangle {
+  @apply xds:aspect-auto xds:ps-16 xds:pe-16;
+}
+
+/* Input Group Outlined Button */
+@utility input-group-button-outlined {
+  @apply xds:border-neutral-90 xds:bg-neutral-0 xds:text-neutral-90;
+
+  @variant hover-active-focus {
+    @apply xds:border-neutral-90 xds:bg-neutral-90 xds:text-neutral-0;
+  }
+}
+
+/* Input Group Ghost Button */
+@utility input-group-button-ghost {
+  @apply xds:border-transparent xds:bg-transparent xds:text-neutral-90;
+
+  @variant hover-active-focus {
+    @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-90;
+  }
+}
+
+/* Input Group Colors */
+@utility input-group-* {
+  border-color: --value(--color-*-50);
+
+  @variant focus {
+    border-color: --value(--color-*-75);
+  }
+
+  &.xds\:input-group-line {
+    background-image: linear-gradient(--value(--color-*-50), --value(--color-*-50));
+
+    @variant focus {
+      box-shadow: 0 2px 0 -0.5px --value(--color-*-25);
+    }
+  }
+
+  & > .xds\:input-group-button-primary {
+    @apply xds:text-neutral-0;
+    background-color: --value(--color-*-50);
+    border-color: --value(--color-*-50);
+
+    @variant hover-active-focus {
+      background-color: --value(--color-*-75);
+      border-color: --value(--color-*-75);
+    }
+  }
+
+  & > .xds\:input-group-button-outlined {
+    @apply xds:border-y-0 xds:bg-neutral-0;
+    border-color: --value(--color-*-50);
+    color: --value(--color-*-50);
+
+    @variant hover-active-focus {
+      @apply xds:text-neutral-0;
+      background-color: --value(--color-*-50);
+      border-color: --value(--color-*-50);
+    }
+  }
+
+  & > .xds\:input-group-button-ghost {
+    @apply xds:border-transparent xds:bg-transparent;
+    color: --value(--color-*-50);
+
+    @variant hover-active-focus {
+      @apply xds:border-neutral-10 xds:bg-neutral-10;
+      color: --value(--color-*-75);
+    }
+  }
+}

package/dist/components/input.css

@@ -1,6 +1,6 @@
 /* Base */
 @utility input {
-  @apply xds:ps-16 xds:pe-16 xds:font-regular xds:cursor-text xds:text-ellipsis;
+  @apply xds:cursor-text xds:ps-16 xds:pe-16 xds:font-regular xds:text-ellipsis;
   @apply xds:border-1 xds:border-neutral-90;
   @apply xds:bg-neutral-0 xds:text-neutral-90;
 
@@ -21,7 +21,7 @@
   }
 
   &::placeholder {
-    @apply xds:text-neutral-50 xds:font-family-main xds:font-regular;
+    @apply xds:font-family-main xds:font-regular xds:text-neutral-50;
   }
 }
 
@@ -41,7 +41,7 @@
 /* Line */
 @utility input-line {
   @apply xds:border-0 xds:border-b-neutral-90;
-  @apply xds:bg-bottom xds:bg-size-[100%_1px] xds:bg-no-repeat;
+  @apply xds:bg-size-[100%_1px] xds:bg-bottom xds:bg-no-repeat;
   background-image: linear-gradient(var(--xds-color-neutral-90), var(--xds-color-neutral-90));
 
   &:hover {
@@ -61,22 +61,22 @@
 
 /* Colors */
 @utility input-* {
-  border-color: --value(--color- * -50);
+  border-color: --value(--color-*-50);
 
   &.xds\:input-line {
-    background-image: linear-gradient(--value(--color- * -50), --value(--color- * -50));
+    background-image: linear-gradient(--value(--color-*-50), --value(--color-*-50));
 
     @variant focus {
-      box-shadow: 0 2px 0 -0.5px --value(--color- * -25);
+      box-shadow: 0 2px 0 -0.5px --value(--color-*-25);
     }
   }
 
   &:hover {
-    border-color: --value(--color- * -75);
+    border-color: --value(--color-*-75);
   }
 
   @variant focus {
-    border-color: --value(--color- * -75);
-    outline-color: --value(--color- * -25);
+    border-color: --value(--color-*-75);
+    outline-color: --value(--color-*-25);
   }
 }

package/dist/components/layout.css

@@ -0,0 +1,106 @@
+/* Base */
+@utility layout {
+  @media (hover: hover) and (pointer: fine) {
+    .xds\:scroll > .xds\:layout-item:not(.xds\:layout-no-margin-right) {
+      --xds-layout-scroll-width: 17px;
+    }
+  }
+}
+
+/* Container */
+@utility layout-container {
+  @apply xds:flex xds:flex-col xds:flex-nowrap xds:items-stretch xds:justify-start;
+  @apply xds:h-full xds:max-h-full;
+
+  & > .xds\:scroll {
+    @apply xds:h-full xds:min-h-0 xds:flex-1;
+  }
+}
+
+/* Container Margin */
+@utility layout-container-mx-* {
+  & > .xds\:layout-item {
+    --xds-margin-left: --value(--spacing-*, [length]);
+    --xds-margin-right: --value(--spacing-*, [length]);
+  }
+}
+@utility layout-container-ml-* {
+  & > .xds\:layout-item {
+    --xds-margin-left: --value(--spacing-*, [length]);
+  }
+}
+@utility layout-container-mr-* {
+  & > .xds\:layout-item {
+    --xds-margin-right: --value(--spacing-*, [length]);
+  }
+}
+
+/* Max Width */
+@utility layout-max-width-* {
+  --xds-layout-max-width: --value(--layout-max-width-*);
+}
+
+/* Min Margin */
+@utility layout-min-margin-* {
+  --xds-layout-min-margin: --value(--spacing-*);
+}
+
+/* Item */
+@utility layout-item {
+  --xds-max-width-margin: calc((100vw - var(--xds-layout-max-width, 100vw)) / 2);
+  --xds-margin: max(var(--xds-layout-min-margin, 0px), var(--xds-max-width-margin));
+  --xds-margin-left: var(--xds-margin);
+  --xds-margin-right: var(--xds-margin);
+
+  @apply xds:grid xds:items-stretch xds:justify-items-stretch;
+  grid-template-columns:
+    var(--xds-margin-left) 1fr
+    calc(var(--xds-margin-right) - var(--xds-layout-scroll-width, 0px));
+
+  & > * {
+    @apply xds:col-[2/-2] xds:min-w-0;
+  }
+
+  &:not(.xds\:layout-overlap):not(.xds\:layout-overlap-from-top) > * {
+    @apply xds:min-w-0;
+  }
+}
+
+/* Utilities */
+/* No Margin utility */
+@utility layout-no-margin-left {
+  --xds-margin-left: 0px;
+}
+@utility layout-no-margin-right {
+  --xds-margin-right: 0px;
+}
+@utility layout-no-margin {
+  @apply xds:layout-no-margin-left xds:layout-no-margin-right;
+}
+/* On Margin utility */
+@utility layout-on-margin-left {
+  @apply xds:col-[1/2];
+}
+@utility layout-on-margin-right {
+  @apply xds:col-[-2/-1];
+}
+/* Overlap utility */
+@utility layout-overlap {
+  @apply xds:z-1 xds:h-0 xds:content-end xds:overflow-visible;
+}
+@utility layout-overlap-from-top {
+  @apply xds:layout-overlap;
+  @apply xds:content-start;
+}
+/* Expand utility */
+@utility layout-expand {
+  @apply xds:h-full xds:min-h-0 xds:flex-1;
+}
+/* Stack utility */
+@utility layout-stack {
+  @apply xds:grid xds:grid-cols-[1fr] xds:grid-rows-[1fr] xds:items-stretch xds:justify-items-stretch;
+
+  & > * {
+    @apply xds:col-span-full xds:row-span-full xds:max-h-full xds:min-h-0 xds:max-w-full xds:min-w-0;
+  }
+}

package/dist/components/picture.css

@@ -0,0 +1,31 @@
+/* Base */
+@utility picture {
+  @apply xds:block xds:aspect-ratio-default xds:overflow-hidden;
+}
+
+/* Image */
+@utility picture-image {
+  @apply xds:aspect-ratio-default xds:h-full xds:w-full xds:object-contain;
+}
+
+/* Zoom */
+@utility picture-zoom {
+  & > .xds\:picture-image {
+    @apply xds:transition-transform xds:duration-300 xds:ease-out;
+
+    &:hover {
+      @apply xds:scale-110;
+    }
+  }
+}
+
+/* Overlay */
+@utility picture-overlay {
+  &:hover {
+    @apply xds:mix-blend-multiply;
+  }
+
+  & > .xds\:picture-image:hover {
+    mask-image: linear-gradient(to top, transparent 20%, var(--xds-color-neutral-100));
+  }
+}

package/dist/components/progress-bar.css

@@ -0,0 +1,30 @@
+/* Base */
+@utility progress-bar {
+  @apply xds:rounded-sm;
+  @apply xds:inline-block;
+  @apply xds:bg-neutral-25;
+  @apply xds:overflow-hidden;
+
+  /* `@apply xds:progress-bar-md;` can not be use here because cause circular dependency. */
+  @apply xds:h-4;
+
+  & > .xds\:progress-bar-fill {
+    @apply xds:h-full;
+    @apply xds:bg-neutral-50;
+  }
+}
+
+/* Sizes */
+@utility progress-bar-md {
+  @apply xds:h-4;
+}
+@utility progress-bar-lg {
+  @apply xds:h-8;
+}
+
+/* Colors */
+@utility progress-bar-* {
+  & > .xds\:progress-bar-fill {
+    background-color: --value(--color-*-50);
+  }
+}

package/dist/components/scroll.css

@@ -0,0 +1,28 @@
+/* Base */
+@utility scroll {
+  @apply xds:min-h-0 xds:overflow-y-scroll;
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      --xds-color-thumb-scroll-bar: var(--xds-color-thumb-scroll-bar-hover);
+    }
+
+    /* Firefox */
+    scrollbar-width: auto;
+    scrollbar-color: var(--xds-color-thumb-scroll-bar) var(--xds-color-background-scroll-bar);
+
+    /* WebKit */
+    &::-webkit-scrollbar {
+      @apply xds:w-4.25;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @apply xds:bg-thumb-scroll-bar xds:bg-clip-content;
+      @apply xds:rounded-3xl xds:border-4 xds:border-transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply xds:bg-background-scroll-bar;
+    }
+  }
+}

package/dist/components/sliding-panel.css

@@ -0,0 +1,140 @@
+/* Base */
+@utility sliding-panel {
+  @apply xds:relative xds:flex xds:flex-row xds:flex-nowrap xds:items-center;
+}
+
+/* Fade */
+@utility sliding-panel-fade {
+  --xds-sliding-panel-fade-spacing: var(--xds-spacing-80);
+  mask: linear-gradient(
+    to right,
+    transparent calc(0.43 * var(--xds-sliding-panel-fade-spacing)),
+    rgba(0, 0, 0, 0.8) calc(0.67 * var(--xds-sliding-panel-fade-spacing)),
+    black var(--xds-sliding-panel-fade-spacing),
+    rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--xds-sliding-panel-fade-spacing)),
+    transparent calc(100% - 0.43 * var(--xds-sliding-panel-fade-spacing))
+  );
+}
+
+/* Fade Sizes */
+@utility sliding-panel-fade-sm {
+  @apply xds:sliding-panel-fade;
+  --xds-sliding-panel-fade-spacing: var(--xds-spacing-40);
+}
+@utility sliding-panel-fade-md {
+  @apply xds:sliding-panel-fade;
+  --xds-sliding-panel-fade-spacing: var(--xds-spacing-80);
+}
+@utility sliding-panel-fade-lg {
+  @apply xds:sliding-panel-fade;
+  --xds-sliding-panel-fade-spacing: var(--xds-spacing-160);
+}
+
+/* Buttons */
+@utility sliding-panel-button {
+  @apply xds:button;
+  @apply xds:absolute xds:z-1;
+  @apply xds:translate-x-0 xds:transition-all xds:duration-200 xds:ease-out;
+}
+
+@utility sliding-panel-button-left {
+  @apply xds:left-0;
+}
+
+@utility sliding-panel-button-right {
+  @apply xds:right-0;
+}
+
+/* Buttons on hover */
+@utility sliding-panel-show-buttons-on-hover {
+  & > .xds\:sliding-panel-button-left {
+    @apply xds:opacity-0;
+  }
+
+  & > .xds\:sliding-panel-button-right {
+    @apply xds:opacity-0;
+  }
+
+  &:hover {
+    &:not(.xds\:sliding-panel-at-start) > .xds\:sliding-panel-button-left,
+    &:not(.xds\:sliding-panel-at-end) > .xds\:sliding-panel-button-right {
+      @apply xds:pointer-events-auto xds:opacity-100;
+    }
+  }
+}
+
+/* Button positions */
+@utility sliding-panel-buttons-center {
+  & > .xds\:sliding-panel-button-left {
+    @apply xds:-translate-x-1/2;
+  }
+
+  & > .xds\:sliding-panel-button-right {
+    @apply xds:translate-x-1/2;
+  }
+}
+
+@utility sliding-panel-buttons-outside {
+  & > .xds\:sliding-panel-button-left {
+    @apply xds:-translate-x-full;
+  }
+
+  & > .xds\:sliding-panel-button-right {
+    @apply xds:translate-x-full;
+  }
+}
+
+/* Fade positions */
+@utility sliding-panel-fade-position {
+  --xds-sliding-panel-fade-spacing: var(--xds-spacing-80);
+  --xds-sliding-panel-fade-direction: to left;
+  mask: linear-gradient(
+    var(--xds-sliding-panel-fade-direction),
+    transparent calc(0.43 * var(--xds-sliding-panel-fade-spacing)),
+    rgba(0, 0, 0, 0.8) calc(0.67 * var(--xds-sliding-panel-fade-spacing)),
+    black var(--xds-sliding-panel-fade-spacing)
+  );
+}
+@utility sliding-panel-at-start {
+  & > .xds\:sliding-panel-button-left {
+    @apply xds:pointer-events-none xds:opacity-0;
+  }
+
+  & > .xds\:sliding-panel-fade-sm {
+    @apply xds:sliding-panel-fade-position;
+    --xds-spacing-sliding-fade: var(--xds-spacing-40);
+  }
+  & > .xds\:sliding-panel-fade,
+  & > .xds\:sliding-panel-fade-md {
+    @apply xds:sliding-panel-fade-position;
+  }
+  & > .xds\:sliding-panel-fade-lg {
+    @apply xds:sliding-panel-fade-position;
+    --xds-spacing-sliding-fade: var(--xds-spacing-160);
+  }
+
+  &.xds\:sliding-panel-at-end > .xds\:sliding-panel-fade {
+    mask: none;
+  }
+}
+@utility sliding-panel-at-end {
+  & > .xds\:sliding-panel-button-right {
+    @apply xds:pointer-events-none xds:opacity-0;
+  }
+
+  & > .xds\:sliding-panel-fade-sm {
+    @apply xds:sliding-panel-fade-position;
+    --xds-spacing-sliding-fade: var(--xds-spacing-40);
+    --xds-sliding-panel-fade-direction: to right;
+  }
+  & > .xds\:sliding-panel-fade,
+  & > .xds\:sliding-panel-fade-md {
+    @apply xds:sliding-panel-fade-position;
+    --xds-sliding-panel-fade-direction: to right;
+  }
+  & > .xds\:sliding-panel-fade-lg {
+    @apply xds:sliding-panel-fade-position;
+    --xds-spacing-sliding-fade: var(--xds-spacing-160);
+    --xds-sliding-panel-fade-direction: to right;
+  }
+}

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:auto-cols-[1fr] xds:grid-flow-col xds:grid-cols-[auto_[last-col]];
+  @apply xds:content-center xds:items-center xds:justify-start;
+  @apply xds:box-border xds:cursor-pointer xds:overflow-hidden;
+  @apply xds:gap-16 xds:ps-0 xds:pe-0;
+
+  /* `@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:border-1 xds:border-neutral-90 xds:bg-neutral-0;
+  @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:border-0 xds:bg-transparent;
+}
+
+/* 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:content-center xds:items-baseline xds:justify-center;
+  @apply xds:box-border xds:cursor-pointer;
+  @apply xds:aspect-square xds:max-h-full xds:min-h-[inherit] xds:bg-transparent xds:text-current;
+  @apply xds:before:invisible xds:before:w-0 xds:before:content-['|'];
+
+  &:hover {
+    @apply xds:scale-[1.2];
+  }
+
+  &:last-child {
+    @apply xds:justify-self-end;
+  }
+}
+
+/* Button Ghost */
+@utility suggestion-group-button-ghost {
+  &:hover {
+    @apply xds:scale-none xds:bg-neutral-25;
+  }
+}
+
+/* Button Rectangle */
+@utility suggestion-group-button-rectangle {
+  @apply xds:aspect-auto xds:ps-8 xds:pe-8;
+}
+
+/* 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);
+  }
+}