@dodlhuat/basix 1.2.0 → 1.2.2

package/css/chat-bubbles.scss

@@ -1,68 +1,134 @@
-@use "properties";
-@use "parameters" as *;
-
-.chat-container {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: $spacing;
-  gap: calc($spacing / 2);
-}
-
-.message {
-  max-width: 75%;
-  padding: $spacing calc($spacing * 1.5);
-  border-radius: $border-radius;
-  position: relative;
-  line-height: calc($spacing * 1.2);
-  color: var(--primary-text);
-  box-shadow: $shadow;
-  word-wrap: break-word;
-}
-
-/* Metadata (time) */
-.message-meta {
-  display: block;
-  font-size: calc($spacing * 0.8);
-  color: var(--primary-text);
-  text-align: right;
-  margin-top: 4px;
-}
-
-/* Incoming Message */
-.message-incoming {
-  align-self: flex-start;
-  background-color: var(--background);
-  border-top-left-radius: 0;
-}
-
-.message-incoming::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -8px;
-  width: 0;
-  height: 0;
-  border: 8px solid transparent;
-  border-top-color: var(--secondary-background);
-  border-right: 0;
-  margin-top: -0px;
-}
-
-.message-outgoing {
-  align-self: flex-end;
-  background-color: var(--accent-color-lighten);
-  border-top-right-radius: 0;
-}
-
-.message-outgoing::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: -8px;
-  width: 0;
-  height: 0;
-  border: 8px solid transparent;
-  border-top-color: var(--accent-color-lighten);
-  border-left: 0;
-}
+@use "properties";
+@use "parameters" as *;
+
+:root {
+  --bubble-radius: 18px;
+}
+
+// ── Container ─────────────────────────────────────────────────────────────────
+
+.chat {
+  display: flex;
+  flex-direction: column;
+  gap: calc($spacing * 0.4);
+  padding: $spacing;
+  width: 100%;
+}
+
+// Extra breathing room between direction changes
+.chat-message.incoming + .chat-message.outgoing,
+.chat-message.outgoing + .chat-message.incoming {
+  margin-top: calc($spacing * 0.5);
+}
+
+// ── Message row ───────────────────────────────────────────────────────────────
+
+.chat-message {
+  display: flex;
+  align-items: flex-end;
+  gap: calc($spacing * 0.6);
+
+  &.outgoing {
+    flex-direction: row-reverse;
+
+    .chat-bubble {
+      background: var(--accent-color);
+      color: #fff;
+      border-bottom-right-radius: 0;
+      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
+
+      // Tail: right-angle at bubble's bottom-right corner, extends right
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        right: -8px;
+        width: 8px;
+        height: 8px;
+        background: var(--accent-color);
+        clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
+      }
+
+      .chat-time { color: rgba(255, 255, 255, 0.65); }
+    }
+  }
+
+  &.incoming {
+    .chat-bubble {
+      background: var(--secondary-background);
+      color: var(--primary-text);
+      border-bottom-left-radius: 0;
+      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
+
+      // Tail: right-angle at bubble's bottom-left corner, extends left
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: -8px;
+        width: 8px;
+        height: 8px;
+        background: var(--secondary-background);
+        clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
+      }
+    }
+  }
+}
+
+// ── Avatar ────────────────────────────────────────────────────────────────────
+
+.chat-avatar {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background: var(--accent-color-tint);
+  color: var(--accent-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+// ── Bubble ────────────────────────────────────────────────────────────────────
+
+.chat-bubble {
+  position: relative;
+  max-width: 72%;
+  padding: calc($spacing * 0.55) calc($spacing * 0.85);
+  border-radius: var(--bubble-radius);
+  line-height: 1.45;
+  word-wrap: break-word;
+
+  p {
+    margin: 0;
+    font-size: 0.9rem;
+  }
+}
+
+// ── Timestamp ─────────────────────────────────────────────────────────────────
+
+.chat-time {
+  display: block;
+  font-size: 0.68rem;
+  letter-spacing: 0.01em;
+  text-align: right;
+  margin-top: 4px;
+  opacity: 0.5;
+  color: inherit;
+}
+
+// ── Dark mode shadow ──────────────────────────────────────────────────────────
+
+[data-theme="dark"] {
+  .chat-message.incoming .chat-bubble  { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }
+  .chat-message.outgoing .chat-bubble  { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); }
+}

package/css/chips.scss

@@ -2,51 +2,141 @@
 @use "parameters" as *;
 
 .chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc($spacing * 0.35);
+
   .chip {
-    margin: 0 calc($spacing / 4) calc($spacing / 5) 0;
-    display: inline-block;
-    background: var(--divider);
-    padding: calc($spacing * 0.3) calc($spacing * 0.8);
+    display: inline-flex;
+    align-items: center;
+    gap: calc($spacing * 0.35);
+    background: var(--secondary-background);
+    color: var(--primary-text);
+    padding: calc($spacing * 0.3) calc($spacing * 0.75);
     border-radius: calc($border-radius * 4);
     font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+    border: 1px solid transparent;
     position: relative;
+    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
 
     &.clickable {
       cursor: pointer;
 
       &:hover {
-        filter: brightness(105%);
+        background: var(--divider);
+      }
+
+      &:active {
+        transform: scale(0.96);
+      }
+
+      &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 35%, transparent);
       }
     }
 
     &.closeable {
-      padding-right: calc($spacing * 2);
+      padding-right: calc($spacing * 1.8);
 
       button {
+        position: absolute;
+        right: calc($spacing * 0.4);
+        top: 50%;
+        transform: translateY(-50%);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         padding: 0;
-        background: var(--divider);
+        background: transparent;
         color: var(--secondary-text);
-        display: inline-block;
         border: 0;
-        height: calc($spacing * 1.25);
-        width: calc($spacing * 1.25);
+        height: calc($spacing * 1.1);
+        width: calc($spacing * 1.1);
         border-radius: 50%;
-        margin: 0 calc($spacing * -0.25) 0 calc($spacing / 4);
         cursor: pointer;
-
-        position: absolute;
-        right: calc($spacing * 0.8);
+        transition: background 0.15s ease, color 0.15s ease;
 
         &:hover {
-          filter: brightness(105%);
+          background: color-mix(in srgb, var(--primary-text) 12%, transparent);
+          color: var(--primary-text);
+        }
+
+        &:active {
+          background: color-mix(in srgb, var(--primary-text) 18%, transparent);
         }
 
-        .icon {
-          font-size: 0.9rem;
-          top: 1px;
-          position: relative;
+        .icon,
+        .icon-svg {
+          font-size: 0.8rem;
+          width: 0.8rem;
+          height: 0.8rem;
         }
       }
     }
+
+    // Accent variant
+    &-accent {
+      background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+      color: var(--accent-color);
+      border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
+
+      &.closeable button:hover {
+        background: color-mix(in srgb, var(--accent-color) 15%, transparent);
+        color: var(--accent-color);
+      }
+    }
+
+    // Success variant
+    &-success {
+      background: color-mix(in srgb, var(--success) 12%, var(--background));
+      color: var(--success);
+      border-color: color-mix(in srgb, var(--success) 20%, transparent);
+
+      &.closeable button:hover {
+        background: color-mix(in srgb, var(--success) 15%, transparent);
+        color: var(--success);
+      }
+    }
+
+    // Warning variant
+    &-warning {
+      background: color-mix(in srgb, var(--warning) 12%, var(--background));
+      color: var(--warning);
+      border-color: color-mix(in srgb, var(--warning) 20%, transparent);
+
+      &.closeable button:hover {
+        background: color-mix(in srgb, var(--warning) 15%, transparent);
+        color: var(--warning);
+      }
+    }
+
+    // Error variant
+    &-error {
+      background: color-mix(in srgb, var(--error) 12%, var(--background));
+      color: var(--error);
+      border-color: color-mix(in srgb, var(--error) 20%, transparent);
+
+      &.closeable button:hover {
+        background: color-mix(in srgb, var(--error) 15%, transparent);
+        color: var(--error);
+      }
+    }
+
+    // Outline variant
+    &-outline {
+      background: transparent;
+      border-color: var(--divider);
+      color: var(--secondary-text);
+
+      &.clickable:hover {
+        background: var(--hover);
+        border-color: color-mix(in srgb, var(--divider) 80%, var(--primary-text));
+      }
+    }
   }
 }

package/css/colors.scss

@@ -1,33 +1,33 @@
-@use "properties";
-
-body {
-  background: var(--background);
-}
-
-.warning {
-  color: var(--warning);
-}
-
-.warning-bg {
-  background: var(--warning);
-}
-
-.error {
-  color: var(--error);
-}
-
-.error-bg {
-  background: var(--error);
-}
-
-.success {
-  color: var(--success);
-}
-
-.success-bg {
-  background: var(--success);
-}
-
-.default-bg {
-  background: var(--divider);
+@use "properties";
+
+body {
+  background: var(--background);
+}
+
+.warning {
+  color: var(--warning);
+}
+
+.warning-bg {
+  background: var(--warning);
+}
+
+.error {
+  color: var(--error);
+}
+
+.error-bg {
+  background: var(--error);
+}
+
+.success {
+  color: var(--success);
+}
+
+.success-bg {
+  background: var(--success);
+}
+
+.default-bg {
+  background: var(--divider);
 }