twntyx-css 1.0.0

package/styles/chart-stacked.css

@@ -0,0 +1,91 @@
+/*----------------------------*/
+/* STACKED */
+/*----------------------------*/
+
+@utility chart-stacked {
+  @apply flex overflow-x-auto items-stretch w-full text-center min-h-60 child-animate-delay min-w-[420px];
+
+  > li {
+    @apply flex flex-col flex-1 max-w-20 animate-slide-in-right shrink-0;
+
+    &:nth-child(even) {
+      > span {
+        @apply text-transparent;
+      }
+      > div {
+        &::before {
+          @apply bg-transparent;
+        }
+      }
+    }
+
+    > span {
+      @apply order-2 p-1 text-sm border-t border-line-default text-text-tertiary;
+    }
+
+    > div {
+      @apply flex relative flex-col flex-1 order-1 gap-1 justify-end items-center p-1 shrink-0;
+
+      &::before {
+        @apply content-[''] absolute inset-y-0 bg-line-default/50 w-px left-1/2 -translate-x-1/2;
+      }
+
+      > * {
+        @apply relative z-10;
+      }
+      [class*="chart-result-"],
+      .avatar {
+        @apply w-full max-w-10 aspect-square shrink-0 min-w-8;
+        > * {
+          @apply w-full text-sm border aspect-square;
+          &[class*="surface"] {
+            @apply border-2 backdrop-blur-sm;
+            background-color: color-mix(in srgb, var(--tw-bg) 25%, transparent);
+          }
+          &:not([class*="surface"]):not(:has(img)) {
+            @apply border-line-default bg-line-subtle;
+          }
+        }
+      }
+    }
+  }
+
+  &.chart-stacked-result {
+    > li {
+      > div {
+        @apply -space-y-[30%];
+      }
+
+      &.chart-results-highlight {
+        > div {
+          @apply relative;
+          &::after {
+            @apply content-[''] absolute inset-0 z-0 bg-background-surface-elevated/50 border-x border-line-default;
+          }
+        }
+      }
+    }
+  }
+
+  [class*="chart-result-"] {
+    @apply border-2 backdrop-blur-sm;
+  }
+  .chart-result-success {
+    @apply rounded-full surface-success;
+  }
+  .chart-result-error {
+    @apply rounded-xl -rotate-45 surface-error;
+  }
+  .chart-result-warning {
+    @apply rounded-xl surface-warning;
+  }
+  .chart-result-info {
+    @apply rounded-full surface-info;
+  }
+  .chart-result-neutral {
+    @apply rounded-full surface-placeholder;
+  }
+  .chart-result-attention {
+    @apply rounded-xl surface-attention;
+  }
+}

package/styles/chat.css

@@ -0,0 +1,506 @@
+/*----------------------------*/
+/* CHAT */
+/*----------------------------*/
+
+/* Base chat container */
+.chat {
+  @apply
+  flex
+  /* overflow-x-hidden */
+  relative
+  flex-col
+  w-full
+  h-full;
+
+  &,
+  * {
+    scroll-behavior: smooth;
+  }
+}
+
+/* Chat feed - messages container */
+@utility chat-feed {
+  @apply
+  flex-1
+  overflow-y-auto
+  overflow-x-hidden
+  mx-auto
+  bg-background-page
+  rounded-t-[inherit]
+  min-h-36
+  flex
+  flex-col
+  gap-6
+  p-4
+  w-full;
+}
+
+/* Message groups */
+@utility chat-group {
+  @apply
+  flex
+  relative
+  gap-4
+  items-start
+  pt-3
+  w-full;
+
+  /* Author section with avatar and timestamp */
+  .chat-author {
+    @apply
+    flex
+    relative
+    flex-col
+    gap-2
+    items-center
+    shrink-0;
+
+    &,
+    .avatar,
+    .avatar > * {
+      @apply size-12;
+    }
+
+    time {
+      @apply
+      text-xs
+      leading-none
+      whitespace-nowrap
+      text-text-tertiary
+      transition-colors
+      duration-200
+      ease-in-out;
+    }
+  }
+
+  /* Messages container */
+  .chat-messages {
+    @apply
+    flex
+    flex-col
+    flex-1
+    gap-2
+    min-w-0
+    max-w-[calc(100%-5rem)]
+    lg:max-w-[60%];
+
+    .chat-name {
+      @apply
+      text-sm
+      font-medium
+      text-text-secondary;
+    }
+
+    /* Individual message */
+    .chat-message {
+      @apply
+      relative
+      max-w-full
+      w-fit
+      flex
+      gap-2
+      items-center
+      outline-hidden
+      focus-visible:outline
+      focus-visible:outline-2
+      focus-visible:outline-line-strong;
+      &:hover {
+        @apply z-20;
+
+        .chat-actions {
+          @apply
+          opacity-100
+          scale-100
+          pointer-events-auto
+          ;
+        }
+      }
+
+      .chat-bubble {
+        @apply
+        px-4
+        py-3
+        rounded-2xl
+        break-words
+        whitespace-pre-wrap
+        text-sm
+        surface
+        text-text-default
+        min-w-fit
+        max-w-[calc(100vw-8rem)];
+
+        /* Basic HTML markup styling */
+        /* p {
+          @apply
+          mb-4
+          last:mb-0;
+        } */
+
+        b,
+        strong {
+          @apply
+          font-semibold;
+        }
+
+        i,
+        em {
+          @apply
+          italic;
+        }
+
+        ul,
+        ol {
+          @apply
+          pl-6
+          mb-4
+          last:mb-0;
+        }
+
+        ul {
+          @apply
+          list-disc;
+        }
+
+        ol {
+          @apply
+          list-decimal;
+        }
+
+        li {
+          @apply
+          mb-2 last:mb-0;
+        }
+
+        a {
+          @apply
+          underline
+          text-text-link
+          hover:text-text-link-hover;
+        }
+
+        code {
+          @apply
+          px-1.5
+          py-0.5
+          text-xs
+          rounded
+          bg-background-surface-elevated;
+        }
+
+        pre {
+          @apply
+          overflow-x-auto
+          p-4
+          mb-4
+          rounded
+          last:mb-0
+          bg-background-surface-elevated;
+
+          code {
+            @apply
+            p-0 bg-transparent;
+          }
+        }
+
+        blockquote {
+          @apply
+          pl-4
+          my-4
+          italic
+          border-l-2
+          border-line-default;
+        }
+
+        .chat-bubble-actions {
+          @apply
+          flex
+          flex-wrap
+          gap-2;
+
+          /* &:has(button.is-active) {
+            @apply
+            pointer-events-none;
+          } */
+/* 
+          > :where(button, .button) {
+            @apply
+            opacity-0
+            animate-[bubble-action-in_0.5s_cubic-bezier(0.645,0.045,0.355,1)_forwards];
+
+            @apply
+            transition-all
+            duration-200
+            ease-in-out;
+
+            &:hover {
+              @apply
+              scale-105
+              opacity-100;
+            }
+
+            &:active {
+              @apply
+              scale-100
+              opacity-100;
+            }
+
+            &.is-active {
+              @apply
+              bg-core-black
+              text-core-white
+              border-core-black!
+              hover:bg-core-black
+              active:bg-core-black
+              hover:text-core-white
+              active:text-core-white;
+            }
+
+            &:nth-child(1) {
+              animation-delay: calc(0.2s * 1);
+            }
+            &:nth-child(2) {
+              animation-delay: calc(0.2s * 2);
+            }
+            &:nth-child(3) {
+              animation-delay: calc(0.2s * 3);
+            }
+            &:nth-child(4) {
+              animation-delay: calc(0.2s * 4);
+            }
+          } */
+        }
+      }
+
+      /* Message actions */
+      .chat-actions {
+        @apply
+        flex
+        absolute
+        right-0
+        -top-7
+        z-10
+        gap-1
+        p-1
+        rounded-full
+        shadow-sm
+        opacity-0
+        transition
+        duration-75
+        scale-90
+        pointer-events-none
+        ease-out-cubic
+        surface;
+
+        button {
+          @apply
+          border
+          button
+          include-border-secondary
+          bg-background-surface
+          text-text-tertiary
+          border-line-default/0
+          shrink-0;
+
+          &:hover {
+            @apply
+            border-line-default
+            text-text-default;
+          }
+
+          svg {
+            @apply
+            w-4
+            h-4;
+          }
+        }
+      }
+    }
+  }
+
+  /* Owner messages styling */
+  &.is-owner {
+    @apply
+    flex-row-reverse
+    text-right;
+
+    .chat-messages {
+      @apply items-end pr-4;
+
+      .chat-message {
+        @apply ml-auto;
+
+        .chat-bubble {
+          @apply
+          border-none
+          bg-core-black
+          dark:bg-core-white
+          text-core-white
+          dark:text-core-black
+          ;
+        }
+
+        .chat-actions {
+          @apply
+          left-0
+          right-auto;
+        }
+      }
+    }
+  }
+
+  &:last-child {
+    @apply pb-4;
+  }
+
+  &.is-loading {
+    .chat-bubble {
+      * {
+        @apply opacity-0 pointer-events-none;
+      }
+      &::before {
+        @apply
+        content-[attr(data-loading)]
+        absolute
+        top-0
+        md:top-3.5
+        left-0
+        animate-loading-text-gradient;
+      }
+    }
+  }
+}
+
+/* Chat input area */
+@utility chat-footer {
+  @apply
+  sticky
+  right-0
+  bottom-0
+  left-0
+  z-10
+  p-4
+  border-t
+  border-line-default
+  bg-background-surface
+  rounded-b-[inherit];
+
+  .chat-input {
+    @apply
+    flex
+    gap-2
+    items-end
+    max-w-full;
+
+    .input-control {
+      @apply
+      overflow-y-auto
+      flex-1
+      min-w-0
+      max-h-32;
+
+      .input-textarea {
+        @apply
+        py-2
+        min-h-[40px]
+        max-h-full;
+      }
+    }
+
+    button {
+      @apply shrink-0;
+    }
+  }
+}
+
+/* AI Chat variant */
+@utility chat-secondary {
+
+  .chat-feed {
+    @apply
+    bg-background-surface-sunken;
+  }
+  .chat-group {
+    @apply
+    flex-col
+    items-stretch
+    md:flex-row
+    md:items-start;
+    .chat-messages {
+      @apply
+      px-0
+      w-full
+      lg:w-auto
+      lg:max-w-full;
+
+      .chat-message {
+        @apply
+        items-start
+        w-full;
+
+        .chat-bubble {
+          @apply
+          py-2
+          space-y-2
+          w-full
+          max-w-fit;
+        }
+        .chat-actions {
+          @apply
+          top-auto
+          -bottom-5
+          left-auto
+          right-0;
+        }
+      }
+    }
+
+    &:not(.is-owner) {
+      .chat-message {
+        .chat-bubble {
+          @apply
+          p-0
+          bg-transparent
+          border-none;
+        }
+      }
+    }
+
+    &.is-owner {
+      @apply
+      text-left;
+
+      .chat-messages {
+        @apply
+        items-start;
+
+        .chat-message {
+          @apply
+          flex-row;
+        }
+      }
+    }
+  }
+}
+
+/* Loading animation */
+@keyframes loading-gradient {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes bubble-action-in {
+  from {
+    opacity: 0;
+    filter: blur(4px);
+    transform: scale(1.1);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0px);
+    transform: scale(1);
+  }
+}

package/styles/checkmark.css

@@ -0,0 +1,105 @@
+/*----------------------------*/
+/* CHECKMARK */
+/*----------------------------*/
+
+@utility checkmark {
+  --checkmark-size: 3rem;
+  --checkmark-inset: 0.25rem;
+  --checkmark-icon-size: 1.25rem;
+
+  @apply relative
+  inline-flex
+  shrink-0
+  h-(--checkmark-size)
+  w-(--checkmark-size)
+  rounded-full
+  overflow-hidden
+  border
+  border-line-default
+  bg-background-surface-elevated
+  transition-[border-color,box-shadow,background-color]
+  duration-300
+  ease-in-out-quart
+  text-shadow-2xs
+  text-shadow-brand-strong/50
+  ;
+
+  &::before {
+    @apply content-['']
+    absolute
+    z-0
+    inset-(--checkmark-inset)
+    rounded-full
+    bg-linear-to-b
+    from-brand-default
+    to-brand-moderate
+    dark:from-brand-moderate
+    dark:to-brand-default
+    transition-transform
+    duration-700
+    ease-in-out-quart
+    border
+    border-line-brand;
+
+    transform: translateY(calc(100% + var(--checkmark-inset)));
+  }
+
+  &::after {
+    @apply content-['']
+    absolute
+    z-10
+    mask
+    mask-check
+    bg-text-inverted
+    transition-transform
+    duration-1000
+    ease-in-out-quart
+    ;
+
+    height: var(--checkmark-icon-size);
+    width: var(--checkmark-icon-size);
+    left: calc(50% - var(--checkmark-icon-size) / 2);
+    top: calc(50% - var(--checkmark-icon-size) / 2);
+    transform: translateY(calc(100% + var(--checkmark-icon-size)));
+  }
+
+  &.is-active {
+    @apply border-line-brand;
+
+
+    &::before,
+    &::after {
+      transform: translateY(0);
+    }
+  }
+
+  &[class*="text-"] {
+    &.is-active {
+      @apply border-current;
+
+
+      &::before {
+        @apply bg-current border-current;
+        background-image: none;
+      }
+    }
+  }
+
+  &.checkmark-sm {
+    --checkmark-size: 2.25rem;
+    --checkmark-inset: 0.1875rem;
+    --checkmark-icon-size: 0.875rem;
+  }
+
+  &.checkmark-xs {
+    --checkmark-size: 1.5rem;
+    --checkmark-inset: 0.125rem;
+    --checkmark-icon-size: 0.625rem;
+    --checkmark-ring-width: 1px;
+  }
+
+  &.checkmark-invisible:not(.is-active) {
+    @apply bg-background-surface/0 border-line-default/0;
+
+  }
+}