@liveblocks/react-ui 3.3.4 → 3.4.0

package/src/styles/index.css

@@ -41,6 +41,12 @@
     var(--lb-foreground-contrast),
     50
   );
+  --lb-background-foreground-subtle: color-mix-scale(
+    var(--lb-background),
+    var(--lb-foreground),
+    var(--lb-foreground-contrast),
+    100
+  );
   --lb-background-accent-faint: color-mix-scale(
     var(--lb-background),
     var(--lb-accent),
@@ -496,7 +502,7 @@
   block-size: calc(0.8 * var(--lb-icon-size));
   margin-inline-start: -1px;
   margin-block-start: 1px;
-  color: var(--lb-foreground-moderate);
+  opacity: 0.65;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -1117,7 +1123,7 @@
  *************************************/
 
 :is(.lb-avatar, .lb-name):where([data-loading]) {
-  animation: lb-animation-shimmer 8s linear infinite;
+  animation: lb-animation-shimmer-skeleton 8s linear infinite;
 }
 
 /*************************************
@@ -1183,6 +1189,10 @@
   background: var(--lb-accent-subtle);
 }
 
+.lb-mention-symbol {
+  display: contents;
+}
+
 /*************************************
  *             Composer              *
  *************************************/
@@ -2400,9 +2410,11 @@
  *************************************/
 
 .lb-code-block {
+  position: relative;
   min-inline-size: 0;
   border: 1px solid var(--lb-foreground-subtle);
   border-radius: var(--lb-radius);
+  isolation: isolate;
 
   :where(.lb-code-block-header) {
     display: flex;
@@ -2535,17 +2547,51 @@
 
 .lb-ai-chat-user-message {
   :where(.lb-ai-chat-message-content) {
-    min-block-size: calc(1lh + var(--lb-spacing));
-    padding: calc(0.5 * var(--lb-spacing)) var(--lb-spacing);
+    --lb-dynamic-background: var(--lb-background-foreground-faint);
+    --lb-ai-chat-message-content-horizontal-padding: calc(
+      0.9375 * var(--lb-spacing)
+    );
+    --lb-ai-chat-message-content-vertical-padding: calc(
+      0.5625 * var(--lb-spacing)
+    );
+
+    min-block-size: calc(
+      1lh + 2 * var(--lb-ai-chat-message-content-vertical-padding)
+    );
+    padding: var(--lb-ai-chat-message-content-vertical-padding)
+      var(--lb-ai-chat-message-content-horizontal-padding);
 
     /**
      * Exactly half the height (line-height + padding) of a one line bubble,
      * so that it doesn't change when the text wraps and the bubble becomes taller.
      */
-    border-radius: calc((1lh + var(--lb-spacing)) / 2);
-    background: var(--lb-background-foreground-faint);
+    border-radius: calc(
+      (1lh + 2 * var(--lb-ai-chat-message-content-vertical-padding)) / 2
+    );
+    background: var(--lb-dynamic-background);
     color: var(--lb-foreground);
     line-height: var(--lb-line-height);
+
+    /**
+     * Rich messages get more padding than plain text ones.
+     */
+    &:where(
+        :has(h1, h2, h3, h4, h5, h6, ul, ol, blockquote, table, .lb-code-block)
+      ) {
+      --lb-ai-chat-message-content-horizontal-padding: calc(
+        1.375 * var(--lb-spacing)
+      );
+      --lb-ai-chat-message-content-vertical-padding: calc(
+        1.125 * var(--lb-spacing)
+      );
+    }
+
+    :where(.lb-code-block) {
+      --lb-dynamic-background: var(--lb-background-foreground-subtle);
+
+      border: none;
+      background: var(--lb-dynamic-background);
+    }
   }
 }
 
@@ -2762,35 +2808,52 @@
 
 .lb-ai-chat-pending {
   user-select: none;
-  animation: lb-animation-shimmer-small 5s linear infinite;
+  animation: lb-animation-shimmer-text 2s cubic-bezier(0.1, 0, 0.9, 1) infinite;
 }
 
-.lb-ai-chat-message-thinking,
-.lb-ai-chat-message-reasoning {
+.lb-ai-chat-message-thinking {
   inline-size: fit-content;
   max-inline-size: 100%;
   color: var(--lb-foreground-tertiary);
+  transition-property: color;
 
-  &:where(.lb-ai-chat-pending),
-  :where(.lb-ai-chat-pending) {
+  &:where(.lb-ai-chat-pending) {
     color: var(--lb-foreground);
   }
 }
 
 .lb-ai-chat-message-reasoning {
+  position: relative;
   margin-block-end: calc(0.75 * var(--lb-spacing));
 
+  &::after {
+    content: "";
+    position: absolute;
+    inset: calc(-0.375 * var(--lb-spacing));
+    border-radius: calc(0.75 * var(--lb-radius));
+    pointer-events: none;
+    transition-property: box-shadow;
+  }
+
+  &:where(:has(.lb-collapsible-trigger:focus-visible)) {
+    z-index: 1;
+
+    &::after {
+      box-shadow:
+        var(--lb-dynamic-background) 0 0 0 2px,
+        var(--lb-accent) 0 0 0 4px;
+    }
+  }
+
   :where(.lb-collapsible-trigger) {
     display: flex;
     gap: calc(0.25 * var(--lb-spacing));
     align-items: center;
+    color: var(--lb-foreground-tertiary);
+    transition-property: color;
 
-    &:where(:focus-visible) {
-      color: var(--lb-accent);
-
-      :where(.lb-collapsible-chevron) {
-        color: var(--lb-accent-moderate);
-      }
+    &:where(.lb-ai-chat-pending) {
+      color: var(--lb-foreground);
     }
   }
 
@@ -2814,8 +2877,6 @@
 
 .lb-ai-tool {
   position: relative;
-  border-radius: var(--lb-radius);
-  box-shadow: inset 0 0 0 1px var(--lb-foreground-subtle);
 
   &::after {
     content: "";
@@ -2839,11 +2900,9 @@
 
 .lb-ai-tool-header {
   display: flex;
-  gap: calc(0.3125 * var(--lb-spacing));
+  gap: calc(0.25 * var(--lb-spacing));
   align-items: center;
   inline-size: 100%;
-  block-size: calc($lb-button-size + var(--lb-spacing));
-  padding-inline: calc(0.5 * var(--lb-spacing));
 }
 
 .lb-ai-tool-header-icon-container,
@@ -2872,26 +2931,95 @@
 
 .lb-ai-tool-header-title {
   @include truncate;
-
-  margin-inline-end: calc(0.25 * var(--lb-spacing));
-  color: var(--lb-foreground-secondary);
-  font-size: 0.9375em;
-
-  &:where(:first-child) {
-    margin-inline-start: calc(0.3125 * var(--lb-spacing));
-  }
 }
 
 .lb-ai-tool-header-status {
   flex: none;
-  margin-inline-start: auto;
-  margin-inline-end: calc(0.1875 * var(--lb-spacing));
   color: var(--lb-foreground-moderate);
 }
 
-.lb-ai-tool:where([data-result="error"]) {
-  box-shadow: inset 0 0 0 1px var(--lb-destructive-moderate);
+.lb-ai-tool:where(.lb-ai-tool\:variant-block) {
+  border-radius: var(--lb-radius);
+  box-shadow: inset 0 0 0 1px var(--lb-foreground-subtle);
+
+  :where(.lb-ai-tool-header) {
+    block-size: calc($lb-button-size + var(--lb-spacing));
+    padding-inline: calc(0.5 * var(--lb-spacing));
+    color: var(--lb-foreground-secondary);
+  }
+
+  :where(.lb-ai-tool-header-title) {
+    font-size: 0.9375em;
+
+    &:where(:first-child) {
+      margin-inline-start: calc(0.3125 * var(--lb-spacing));
+    }
+  }
 
+  :where(.lb-ai-tool-header-status) {
+    margin-inline-start: auto;
+    margin-inline-end: calc(0.1875 * var(--lb-spacing));
+  }
+
+  :where(.lb-ai-tool-content:not(:empty)) {
+    padding: 0 calc(0.75 * var(--lb-spacing)) calc(0.75 * var(--lb-spacing));
+  }
+
+  &:where([data-result="error"]) {
+    box-shadow: inset 0 0 0 1px var(--lb-destructive-moderate);
+  }
+}
+
+.lb-ai-tool:where(.lb-ai-tool\:variant-minimal) {
+  &::after {
+    inset: calc(-0.375 * var(--lb-spacing));
+    border-radius: calc(0.75 * var(--lb-radius));
+  }
+
+  :where(.lb-ai-tool-header) {
+    position: relative;
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    block-size: $lb-button-size;
+    color: var(--lb-foreground-tertiary);
+    transition-property: color;
+
+    &:where(.lb-ai-chat-pending),
+    :where(.lb-ai-chat-pending) {
+      color: var(--lb-foreground);
+    }
+
+    /* Invisibly increase the header's hit target size */
+    &::before {
+      content: "";
+      position: absolute;
+      inset: calc(-0.375 * var(--lb-spacing));
+      z-index: -1;
+    }
+  }
+
+  :where(.lb-ai-tool-header-icon-container) {
+    margin-inline-start: calc(-0.125 * var(--lb-spacing));
+  }
+
+  :where(.lb-ai-tool-header-title) {
+    &:where(:not(:first-child)) {
+      margin-inline-start: calc(-0.0625 * var(--lb-spacing));
+    }
+  }
+
+  :where(.lb-ai-tool-content:not(:empty)) {
+    padding-block-start: calc(0.5 * var(--lb-spacing));
+  }
+
+  &:where([data-result="cancelled"]) {
+    :where(.lb-ai-tool-header) {
+      color: var(--lb-foreground-moderate);
+    }
+  }
+}
+
+.lb-ai-tool:where([data-result="error"]) {
   &:where(:has(.lb-ai-tool-header:focus-visible)) {
     &::after {
       box-shadow:
@@ -2900,13 +3028,18 @@
     }
   }
 
+  :where(.lb-ai-tool-header),
   :where(.lb-ai-tool-header-status) {
     color: var(--lb-destructive);
   }
-}
 
-.lb-ai-tool-content:where(:not(:empty)) {
-  padding: 0 calc(0.75 * var(--lb-spacing)) calc(0.75 * var(--lb-spacing));
+  :where(.lb-ai-tool-icon) {
+    background: var(--lb-destructive-subtle);
+  }
+
+  :where(.lb-ai-tool-header-icon-container) {
+    color: var(--lb-destructive-secondary);
+  }
 }
 
 .lb-ai-tool-inspector {
@@ -2977,7 +3110,7 @@
   }
 }
 
-@keyframes lb-animation-shimmer {
+@keyframes lb-animation-shimmer-skeleton {
   from,
   to {
     mask-image: linear-gradient(
@@ -2999,25 +3132,25 @@
   }
 }
 
-@keyframes lb-animation-shimmer-small {
+@keyframes lb-animation-shimmer-text {
   from,
   to {
     mask-image: linear-gradient(
       90deg,
-      #000 0%,
-      rgb(0 0 0 / 50%) 18%,
-      rgb(0 0 0 / 50%) 82%,
-      #000 100%
+      rgb(0 0 0 / 75%) 36%,
+      rgb(0 0 0 / 20%) 48%,
+      rgb(0 0 0 / 20%) 52%,
+      rgb(0 0 0 / 75%) 64%
     );
     mask-size: 300% 100%;
   }
 
   from {
-    mask-position: 200% 0;
+    mask-position: 100% 0;
   }
 
   to {
-    mask-position: -100% 0;
+    mask-position: 0% 0;
   }
 }
 

package/styles/dark/attributes.css

@@ -1 +1 @@
-.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root){--lb-accent:#4af;--lb-destructive:#f77;--lb-background:#222;--lb-foreground:#fff;--lb-accent-contrast:16%;--lb-destructive-contrast:16%;--lb-foreground-contrast:10%;--lb-inset-shadow:inset 0 0 0 1px #ffffff0f;--lb-highlight-shadow:inset 0 0 0 1px #ffffff1f;--lb-elevation-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f;--lb-elevation-shadow-moderate:0 0 0 1px #0000000a,0 2px 6px #0000000d,0 8px 26px #0000000f;--lb-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])):where(.lb-elevation,.lb-tooltip),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root):where(.lb-elevation,.lb-tooltip){--lb-background:#333;--lb-foreground-contrast:10%}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])):where(.lb-elevation-moderate),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root):where(.lb-elevation-moderate){--lb-background:#2a2a2a;--lb-foreground-contrast:10%}
+@keyframes lb-animation-shimmer-text-invert{0%,to{-webkit-mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);-webkit-mask-size:300% 100%;mask-size:300% 100%}0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root){--lb-accent:#4af;--lb-destructive:#f77;--lb-background:#222;--lb-foreground:#fff;--lb-accent-contrast:16%;--lb-destructive-contrast:16%;--lb-foreground-contrast:10%;--lb-inset-shadow:inset 0 0 0 1px #ffffff0f;--lb-highlight-shadow:inset 0 0 0 1px #ffffff1f;--lb-elevation-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f;--lb-elevation-shadow-moderate:0 0 0 1px #0000000a,0 2px 6px #0000000d,0 8px 26px #0000000f;--lb-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])):where(.lb-elevation,.lb-tooltip),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root):where(.lb-elevation,.lb-tooltip){--lb-background:#333;--lb-foreground-contrast:10%}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])):where(.lb-elevation-moderate),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root):where(.lb-elevation-moderate){--lb-background:#2a2a2a;--lb-foreground-contrast:10%}.lb-root:where(:is(.dark,[data-theme=dark],[data-dark])) .lb-ai-chat-pending,:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root) .lb-ai-chat-pending{animation-name:lb-animation-shimmer-text-invert}

package/styles/dark/attributes.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/dark/src/styles/dark/attributes.css","../../src/styles/dark/src/styles/dark/index.css"],"names":[],"mappings":"AAIA,mHAAA,gBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,4BAAA,CAAA,2CAAA,CAAA,+CAAA,CAAA,kFAAA,CAAA,2FAAA,CAAA,4DAAA,CAAA,sBAAA,CAAA,2BAAA,CAAA,iBAAA,CCqBE,qLAAA,oBAAA,CAAA,4BAAA,CAKA,+KAAA,uBAAA,CAAA,4BAAA","file":"attributes.css","sourcesContent":["/* stylelint-disable selector-class-pattern */\n\n@import \"./index\";\n\n.lb-root:where(:is(.dark, [data-theme=\"dark\"], [data-dark])),\n:is(.dark, [data-theme=\"dark\"], [data-dark]) :where(.lb-root) {\n  @include dark-styles;\n}\n","@import \"../constants\";\n\n@mixin dark-styles {\n  /**\n   * Colors\n   */\n  --lb-accent: #4af;\n  --lb-destructive: #f77;\n  --lb-background: #222;\n  --lb-foreground: #fff;\n  --lb-accent-contrast: 16%;\n  --lb-destructive-contrast: 16%;\n  --lb-foreground-contrast: 10%;\n\n  /**\n   * Shadows\n   */\n  --lb-inset-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);\n  --lb-highlight-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);\n  --lb-elevation-shadow: $lb-elevation-shadow;\n  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;\n  --lb-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &:where(.lb-elevation, .lb-tooltip) {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\n\n  &:where(.lb-elevation-moderate) {\n    --lb-background: #2a2a2a;\n    --lb-foreground-contrast: 10%;\n  }\n}\n"]}
+{"version":3,"sources":["../../src/styles/dark/src/styles/dark/index.css","../../src/styles/dark/src/styles/dark/attributes.css"],"names":[],"mappings":"AAwCA,4CAAA,MAAA,uFAAA,CAAA,+EAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,GAAA,4BAAA,CAAA,oBAAA,CAAA,GAAA,yBAAA,CAAA,iBAAA,CAAA,CCpCA,mHAAA,gBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,4BAAA,CAAA,2CAAA,CAAA,+CAAA,CAAA,kFAAA,CAAA,2FAAA,CAAA,4DAAA,CAAA,sBAAA,CAAA,2BAAA,CAAA,iBAAA,CDqBE,qLAAA,oBAAA,CAAA,4BAAA,CAKA,+KAAA,uBAAA,CAAA,4BAAA,CAKA,2JAAA,+CAAA","file":"attributes.css","sourcesContent":["@import \"../constants\";\n\n@mixin dark-styles {\n  /**\n   * Colors\n   */\n  --lb-accent: #4af;\n  --lb-destructive: #f77;\n  --lb-background: #222;\n  --lb-foreground: #fff;\n  --lb-accent-contrast: 16%;\n  --lb-destructive-contrast: 16%;\n  --lb-foreground-contrast: 10%;\n\n  /**\n   * Shadows\n   */\n  --lb-inset-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);\n  --lb-highlight-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);\n  --lb-elevation-shadow: $lb-elevation-shadow;\n  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;\n  --lb-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &:where(.lb-elevation, .lb-tooltip) {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\n\n  &:where(.lb-elevation-moderate) {\n    --lb-background: #2a2a2a;\n    --lb-foreground-contrast: 10%;\n  }\n\n  .lb-ai-chat-pending {\n    animation-name: lb-animation-shimmer-text-invert;\n  }\n}\n\n@keyframes lb-animation-shimmer-text-invert {\n  from,\n  to {\n    mask-image: linear-gradient(\n      90deg,\n      rgb(0 0 0 / 50%) 36%,\n      rgb(0 0 0 / 95%) 48%,\n      rgb(0 0 0 / 95%) 52%,\n      rgb(0 0 0 / 50%) 64%\n    );\n    mask-size: 300% 100%;\n  }\n\n  from {\n    mask-position: 100% 0;\n  }\n\n  to {\n    mask-position: 0% 0;\n  }\n}\n","/* stylelint-disable selector-class-pattern */\n\n@import \"./index\";\n\n.lb-root:where(:is(.dark, [data-theme=\"dark\"], [data-dark])),\n:is(.dark, [data-theme=\"dark\"], [data-dark]) :where(.lb-root) {\n  @include dark-styles;\n}\n"]}

package/styles/dark/media-query.css

@@ -1 +1 @@
-@media (prefers-color-scheme:dark){.lb-root{--lb-accent:#4af;--lb-destructive:#f77;--lb-background:#222;--lb-foreground:#fff;--lb-accent-contrast:16%;--lb-destructive-contrast:16%;--lb-foreground-contrast:10%;--lb-inset-shadow:inset 0 0 0 1px #ffffff0f;--lb-highlight-shadow:inset 0 0 0 1px #ffffff1f;--lb-elevation-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f;--lb-elevation-shadow-moderate:0 0 0 1px #0000000a,0 2px 6px #0000000d,0 8px 26px #0000000f;--lb-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.lb-root:where(.lb-elevation,.lb-tooltip){--lb-background:#333;--lb-foreground-contrast:10%}.lb-root:where(.lb-elevation-moderate){--lb-background:#2a2a2a;--lb-foreground-contrast:10%}}
+@keyframes lb-animation-shimmer-text-invert{0%,to{-webkit-mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);mask-image:linear-gradient(90deg,#00000080 36%,#000000f2 48% 52%,#00000080 64%);-webkit-mask-size:300% 100%;mask-size:300% 100%}0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}@media (prefers-color-scheme:dark){.lb-root{--lb-accent:#4af;--lb-destructive:#f77;--lb-background:#222;--lb-foreground:#fff;--lb-accent-contrast:16%;--lb-destructive-contrast:16%;--lb-foreground-contrast:10%;--lb-inset-shadow:inset 0 0 0 1px #ffffff0f;--lb-highlight-shadow:inset 0 0 0 1px #ffffff1f;--lb-elevation-shadow:0 0 0 1px #0000000a,0 2px 6px #00000014,0 8px 26px #0000001f;--lb-elevation-shadow-moderate:0 0 0 1px #0000000a,0 2px 6px #0000000d,0 8px 26px #0000000f;--lb-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.lb-root:where(.lb-elevation,.lb-tooltip){--lb-background:#333;--lb-foreground-contrast:10%}.lb-root:where(.lb-elevation-moderate){--lb-background:#2a2a2a;--lb-foreground-contrast:10%}.lb-root .lb-ai-chat-pending{animation-name:lb-animation-shimmer-text-invert}}

package/styles/dark/media-query.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/dark/src/styles/dark/media-query.css","../../src/styles/dark/src/styles/dark/index.css"],"names":[],"mappings":"AAEA,mCACE,SAAA,gBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,4BAAA,CAAA,2CAAA,CAAA,+CAAA,CAAA,kFAAA,CAAA,2FAAA,CAAA,4DAAA,CAAA,sBAAA,CAAA,2BAAA,CAAA,iBAAA,CCsBA,0CAAA,oBAAA,CAAA,4BAAA,CAKA,uCAAA,uBAAA,CAAA,4BAAA,CAAA","file":"media-query.css","sourcesContent":["@import \"./index\";\n\n@media (prefers-color-scheme: dark) {\n  .lb-root {\n    @include dark-styles;\n  }\n}\n","@import \"../constants\";\n\n@mixin dark-styles {\n  /**\n   * Colors\n   */\n  --lb-accent: #4af;\n  --lb-destructive: #f77;\n  --lb-background: #222;\n  --lb-foreground: #fff;\n  --lb-accent-contrast: 16%;\n  --lb-destructive-contrast: 16%;\n  --lb-foreground-contrast: 10%;\n\n  /**\n   * Shadows\n   */\n  --lb-inset-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);\n  --lb-highlight-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);\n  --lb-elevation-shadow: $lb-elevation-shadow;\n  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;\n  --lb-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &:where(.lb-elevation, .lb-tooltip) {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\n\n  &:where(.lb-elevation-moderate) {\n    --lb-background: #2a2a2a;\n    --lb-foreground-contrast: 10%;\n  }\n}\n"]}
+{"version":3,"sources":["../../src/styles/dark/src/styles/dark/index.css","../../src/styles/dark/src/styles/dark/media-query.css"],"names":[],"mappings":"AAwCA,4CAAA,MAAA,uFAAA,CAAA,+EAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,GAAA,4BAAA,CAAA,oBAAA,CAAA,GAAA,yBAAA,CAAA,iBAAA,CAAA,CCtCA,mCACE,SAAA,gBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,wBAAA,CAAA,6BAAA,CAAA,4BAAA,CAAA,2CAAA,CAAA,+CAAA,CAAA,kFAAA,CAAA,2FAAA,CAAA,4DAAA,CAAA,sBAAA,CAAA,2BAAA,CAAA,iBAAA,CDsBA,0CAAA,oBAAA,CAAA,4BAAA,CAKA,uCAAA,uBAAA,CAAA,4BAAA,CAKA,6BAAA,+CAAA,CAAA","file":"media-query.css","sourcesContent":["@import \"../constants\";\n\n@mixin dark-styles {\n  /**\n   * Colors\n   */\n  --lb-accent: #4af;\n  --lb-destructive: #f77;\n  --lb-background: #222;\n  --lb-foreground: #fff;\n  --lb-accent-contrast: 16%;\n  --lb-destructive-contrast: 16%;\n  --lb-foreground-contrast: 10%;\n\n  /**\n   * Shadows\n   */\n  --lb-inset-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);\n  --lb-highlight-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);\n  --lb-elevation-shadow: $lb-elevation-shadow;\n  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;\n  --lb-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &:where(.lb-elevation, .lb-tooltip) {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\n\n  &:where(.lb-elevation-moderate) {\n    --lb-background: #2a2a2a;\n    --lb-foreground-contrast: 10%;\n  }\n\n  .lb-ai-chat-pending {\n    animation-name: lb-animation-shimmer-text-invert;\n  }\n}\n\n@keyframes lb-animation-shimmer-text-invert {\n  from,\n  to {\n    mask-image: linear-gradient(\n      90deg,\n      rgb(0 0 0 / 50%) 36%,\n      rgb(0 0 0 / 95%) 48%,\n      rgb(0 0 0 / 95%) 52%,\n      rgb(0 0 0 / 50%) 64%\n    );\n    mask-size: 300% 100%;\n  }\n\n  from {\n    mask-position: 100% 0;\n  }\n\n  to {\n    mask-position: 0% 0;\n  }\n}\n","@import \"./index\";\n\n@media (prefers-color-scheme: dark) {\n  .lb-root {\n    @include dark-styles;\n  }\n}\n"]}