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

package/dist/components/icon.css

@@ -0,0 +1,72 @@
+/* Base */
+@utility icon {
+  @apply xds:flex xds:items-center xds:justify-center xds:flex-none;
+  @apply xds:font-family-icon xds:w-auto xds:aspect-square;
+  vector-effect: non-scaling-stroke;
+
+  /* `@apply xds:icon-md;` can not be use here because cause circular dependency. */
+  @apply xds:h-16 xds:text-[14px];
+}
+
+/* Offset */
+/* This utility can be used like:
+ * @utility suggestion {
+ *  & .xds\:icon {
+ *    @apply xds:icon-offset;
+ *  }
+ * }
+ */
+@utility icon-offset {
+  --iconVerticalOffset: calc(50% - 0.5ex - 1px);
+  font-size: initial;
+  transform: translateY(var(--iconVerticalOffset, 0));
+  margin-top: calc(var(--iconVerticalOffset) * -1);
+}
+
+/* Sizes */
+@utility icon-sm {
+  @apply xds:h-8;
+  @apply xds:text-[7px];
+}
+@utility icon-md {
+  @apply xds:h-16;
+  @apply xds:text-[14px];
+}
+@utility icon-lg {
+  @apply xds:h-24;
+  @apply xds:text-[20px];
+}
+@utility icon-xl {
+  @apply xds:h-32;
+  @apply xds:text-[28px];
+}
+
+/* Sharp */
+@utility icon-sharp {
+  & > * {
+    stroke-linecap: square;
+    stroke-linejoin: miter;
+  }
+}
+
+/* Stroke width */
+@utility icon-stroke-width-* {
+  & > * {
+    stroke-width: --value(--stroke-width- *);
+  }
+}
+
+/* Colors */
+@utility icon-* {
+  color: --value(--color- *);
+}
+
+/* Background colors */
+@utility icon-bg-* {
+  & > [stroke='#fff'] {
+    stroke: --value(--color- *);
+  }
+  & > [fill='#fff'] {
+    fill: --value(--color- *);
+  }
+}

package/dist/components/index.css

@@ -1 +1,17 @@
+@import './attach.css';
 @import './badge.css';
+@import './button.css';
+@import './button-group.css';
+@import './filter-facet.css';
+@import './highlight.css';
+@import './icon.css';
+@import './input.css';
+@import './input-group.css';
+@import './picture.css';
+@import './progress-bar.css';
+@import './scroll.css';
+@import './sliding-panel.css';
+@import './suggestion.css';
+@import './suggestion-group.css';
+@import './tag.css';
+@import './typography.css';

package/dist/components/input-group.css

@@ -0,0 +1,202 @@
+/* Base */
+@utility input-group {
+  @apply xds:input;
+  @apply xds:flex xds:flex-row xds:flex-nowrap xds:items-center xds:content-center;
+  @apply xds:ps-0 xds:pe-0 xds:gap-8 xds:overflow-hidden;
+  @apply xds:border-neutral-25 xds:bg-neutral-10 xds:text-neutral-50;
+
+  & > :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:flex-1 xds:min-w-0 xds:p-0 xds:border-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:h-full xds:p-0 xds:aspect-square;
+  @apply xds:font-regular xds:text-sm;
+  @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:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
+
+  @variant hover-active-focus {
+    @apply xds:bg-neutral-75 xds:border-neutral-75;
+  }
+
+  &:first-child {
+    @apply xds:border-s-0 xds:ms-0;
+  }
+
+  &:last-child {
+    @apply xds:border-e-0 xds:me-0;
+  }
+}
+
+/* Input Group Rectangle Button */
+@utility input-group-button-rectangle {
+  @apply xds:ps-16 xds:pe-16 xds:aspect-auto;
+}
+
+/* Input Group Outlined Button */
+@utility input-group-button-outlined {
+  @apply xds:bg-neutral-0 xds:border-neutral-90 xds:text-neutral-90;
+
+  @variant hover-active-focus {
+    @apply xds:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
+  }
+}
+
+/* Input Group Ghost Button */
+@utility input-group-button-ghost {
+  @apply xds:bg-transparent xds:border-transparent xds:text-neutral-90;
+
+  @variant hover-active-focus {
+    @apply xds:bg-neutral-10 xds:border-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:bg-neutral-0 xds:border-y-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:bg-transparent xds:border-transparent;
+    color: --value(--color- * -50);
+
+    @variant hover-active-focus {
+      @apply xds:bg-neutral-10 xds:border-neutral-10;
+      color: --value(--color- * -75);
+    }
+  }
+}

package/dist/components/input.css

@@ -0,0 +1,82 @@
+/* Base */
+@utility input {
+  @apply xds:ps-16 xds:pe-16 xds:font-regular xds:cursor-text xds:text-ellipsis;
+  @apply xds:border-1 xds:border-neutral-90;
+  @apply xds:bg-neutral-0 xds:text-neutral-90;
+
+  /* `@apply xds:input-md;` can not be use here because cause circular dependency. */
+  @apply xds:h-40 xds:text-md;
+
+  &:hover {
+    @apply xds:border-neutral-50;
+  }
+
+  @variant focus {
+    @apply xds:border-neutral-50 xds:outline-2 xds:outline-neutral-25;
+  }
+
+  @variant disabled {
+    @apply xds:border-neutral-25 xds:bg-neutral-10 xds:text-neutral-50;
+    @apply xds:cursor-not-allowed;
+  }
+
+  &::placeholder {
+    @apply xds:text-neutral-50 xds:font-family-main xds:font-regular;
+  }
+}
+
+/* Sizes */
+@utility input-sm {
+  @apply xds:h-32 xds:text-sm;
+}
+
+@utility input-md {
+  @apply xds:h-40 xds:text-base;
+}
+
+@utility input-lg {
+  @apply xds:h-48 xds:text-base;
+}
+
+/* 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;
+  background-image: linear-gradient(var(--xds-color-neutral-90), var(--xds-color-neutral-90));
+
+  &:hover {
+    @apply xds:bg-size-[100%_2px];
+  }
+
+  @variant focus {
+    @apply xds:bg-size-[100%_2px] xds:text-neutral-90 xds:outline-none;
+    @apply xds:shadow-[0_2px_0_-0.5px] xds:shadow-neutral-25;
+  }
+
+  @variant disabled {
+    @apply xds:bg-neutral-10;
+    background-image: linear-gradient(var(--xds-color-neutral-25), var(--xds-color-neutral-25));
+  }
+}
+
+/* Colors */
+@utility input-* {
+  border-color: --value(--color- * -50);
+
+  &.xds\:input-line {
+    background-image: linear-gradient(--value(--color- * -50), --value(--color- * -50));
+
+    @variant focus {
+      box-shadow: 0 2px 0 -0.5px --value(--color- * -25);
+    }
+  }
+
+  &:hover {
+    border-color: --value(--color- * -75);
+  }
+
+  @variant focus {
+    border-color: --value(--color- * -75);
+    outline-color: --value(--color- * -25);
+  }
+}

package/dist/components/picture.css

@@ -0,0 +1,27 @@
+@utility picture {
+  @apply xds:block xds:aspect-ratio-default xds:overflow-hidden;
+}
+
+@utility picture-image {
+  @apply xds:aspect-ratio-default xds:object-contain xds:w-full xds:h-full;
+}
+
+@utility picture-zoom {
+  & > .xds\:picture-image {
+    @apply xds:transition-transform xds:duration-300 xds:ease-out;
+
+    &:hover {
+      @apply xds:scale-110;
+    }
+  }
+}
+
+@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,27 @@
+@utility scroll {
+  @apply xds:overflow-y-scroll xds:min-h-0;
+
+  @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-clip-content xds:bg-(--xds-color-thumb-scroll-bar);
+      @apply xds:border-4 xds:border-transparent xds:rounded-3xl;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply xds:bg-(--xds-color-background-scroll-bar);
+    }
+  }
+}

package/dist/components/sliding-panel.css

@@ -0,0 +1,141 @@
+/* Base */
+@utility sliding-panel {
+  @apply xds:flex xds:flex-row xds:flex-nowrap xds:items-center xds:relative;
+}
+
+/* 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:transition-all xds:ease-out xds:duration-200 xds:translate-x-0;
+}
+
+@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:opacity-100 xds:pointer-events-auto;
+    }
+  }
+}
+
+/* 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:opacity-0 xds:pointer-events-none;
+  }
+
+  & > .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:opacity-0 xds:pointer-events-none;
+  }
+
+  & > .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;
+  }
+}