@liveblocks/react-ui 2.24.0 → 2.25.0-aiprivatebeta0

package/src/styles/index.css

@@ -26,6 +26,7 @@
   --lb-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
   --lb-highlight-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
   --lb-elevation-shadow: $lb-elevation-shadow;
+  --lb-elevation-shadow-small: $lb-elevation-shadow-small;
   --lb-tooltip-shadow: $lb-tooltip-shadow;
   --lb-accent-contrast: 8%;
   --lb-destructive-contrast: 8%;
@@ -2048,6 +2049,493 @@
   }
 }
 
+/*************************************
+ *          Chat Composer            *
+ *************************************/
+.lb-ai-chat-composer-form:where(
+    :has(.lb-ai-chat-composer-editor:not(:focus-visible))
+  ) {
+  :where(.lb-button[data-variant="primary"]) {
+    --lb-button-background: var(--lb-foreground-subtle);
+
+    color: var(--lb-foreground-tertiary);
+
+    &:where(:enabled:hover, :enabled:focus-visible) {
+      --lb-button-background: var(--lb-accent);
+
+      color: var(--lb-accent-foreground);
+    }
+  }
+}
+
+.lb-ai-chat-composer-form {
+  position: relative;
+  background: var(--lb-dynamic-background);
+  color: var(--lb-foreground);
+  transition-property: background;
+}
+
+.lb-ai-chat-composer-editor {
+  max-block-size: 15rem;
+  padding: var(--lb-spacing) var(--lb-spacing) 0;
+  color: var(--lb-foreground-secondary);
+  outline: none;
+  resize: none;
+
+  /* overflow-block: auto; doesn't work as expected */
+  /* stylelint-disable-next-line plugin/use-logical-properties-and-values */
+  overflow-y: auto;
+
+  &,
+  * {
+    line-height: var(--lb-line-height);
+  }
+
+  :where(p) {
+    --lb-line-height-crop: calc(1lh - 1em) / -2;
+
+    margin-block-start: 0.25em;
+    margin-block-end: 0.25em;
+
+    /* Cancel out the impact of line-height on margins/paddings */
+    &:where(:first-of-type) {
+      margin-block-start: calc(0.125em + var(--lb-line-height-crop));
+    }
+
+    /* Cancel out the impact of line-height on margins/paddings */
+    &:where(:last-of-type) {
+      margin-block-end: calc(0.125em + var(--lb-line-height-crop));
+    }
+  }
+
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :where([data-placeholder]) {
+    color: var(--lb-foreground-moderate);
+  }
+}
+
+.lb-ai-chat-composer-footer {
+  display: flex;
+  gap: calc(0.75 * var(--lb-spacing));
+  align-items: center;
+  margin-block-start: calc(-0.125 * var(--lb-spacing));
+  padding: var(--lb-spacing);
+}
+
+.lb-ai-chat-composer-actions,
+.lb-ai-chat-composer-editor-actions {
+  display: flex;
+  gap: calc(0.125 * var(--lb-spacing));
+  align-items: center;
+}
+
+.lb-ai-chat-composer-editor-actions {
+  margin-inline-end: auto;
+}
+
+/*************************************
+ *     Chat composer attachments     *
+ *************************************/
+.lb-ai-chat-composer-attachments {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.75 * var(--lb-spacing));
+  padding-inline: var(--lb-spacing);
+  padding-block-start: calc(0.75 * var(--lb-spacing));
+}
+
+.lb-ai-chat-composer-editor-container:where([data-drop]) * {
+  pointer-events: none;
+}
+
+/*************************************
+ *           Chat message            *
+ *************************************/
+.lb-ai-chat-user-message {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.75 * var(--lb-spacing));
+
+  &,
+  * {
+    line-height: var(--lb-line-height);
+  }
+}
+
+.lb-ai-chat-user-message-content {
+  padding: calc(0.75 * var(--lb-spacing)) calc(1.375 * var(--lb-spacing));
+  border-radius: calc(3 * var(--lb-radius));
+  background: var(--lb-background-foreground-faint);
+  color: var(--lb-foreground);
+  white-space: break-spaces;
+}
+
+.lb-ai-chat-user-message-attachments {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.75 * var(--lb-spacing));
+}
+
+.lb-ai-chat-user-message-media-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(0.75 * var(--lb-spacing));
+  justify-content: flex-end;
+}
+
+.lb-ai-chat-user-message-attachment {
+  flex-shrink: 1;
+  flex-basis: 300px;
+}
+
+.lb-ai-chat-assistant-message {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.75 * var(--lb-spacing));
+
+  @media (hover: hover) {
+    &:where(.lb-ai-chat-assistant-message\:show-actions-hover) {
+      :where(.lb-ai-chat-assistant-message-actions) {
+        opacity: 0;
+        transition-property: opacity;
+      }
+
+      &:where(:is(:hover, :focus-within)) {
+        :where(.lb-ai-chat-assistant-message-actions) {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+.lb-ai-chat-assistant-message-content {
+  inline-size: 100%;
+}
+
+.lb-ai-chat-assistant-message-text-part {
+  display: flex;
+  flex-direction: column;
+
+  &,
+  * {
+    line-height: var(--lb-line-height);
+  }
+
+  :where(p) {
+    margin-block: 0.25em;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    margin-block: 0.5em;
+    font-weight: 600;
+  }
+
+  :where(h1) {
+    font-size: 1.75em;
+  }
+
+  :where(h2) {
+    font-size: 1.5em;
+  }
+
+  :where(h3) {
+    font-size: 1.25em;
+  }
+
+  :where(h4) {
+    font-size: 1.125em;
+  }
+
+  :where(h5) {
+    font-size: 1em;
+  }
+
+  :where(h6) {
+    font-size: 0.875em;
+  }
+
+  :where(hr) {
+    margin-block: calc(0.75 * var(--lb-spacing));
+    border-block-start: 1px solid var(--lb-foreground-subtle);
+  }
+
+  :where(blockquote) {
+    position: relative;
+    margin-block-start: calc(0.75 * var(--lb-spacing));
+    padding: calc(0.375 * var(--lb-spacing)) calc(1.5 * var(--lb-spacing));
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset-inline-start: 0;
+      inset-block-start: 0;
+      inline-size: 4px;
+      block-size: 100%;
+      border-radius: calc(0.5 * var(--lb-radius));
+      background: var(--lb-foreground-subtle);
+    }
+  }
+
+  :where(ol, ul) {
+    margin-block: calc(0.75 * var(--lb-spacing));
+    padding-inline-start: calc(1.5 * var(--lb-spacing));
+    list-style-position: outside;
+  }
+
+  :where(ul) {
+    list-style-type: disc;
+  }
+
+  :where(ol) {
+    list-style-type: decimal;
+  }
+
+  :where(li) {
+    margin-block: calc(0.25 * var(--lb-spacing));
+  }
+
+  /**
+   * Merge adjacent inline code elements
+   */
+  :where(span:has(code) + span code) {
+    padding-inline-start: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  :where(span:has(code):has(+ span code) code) {
+    padding-inline-end: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :where(a) {
+    color: var(--lb-foreground);
+    outline: none;
+    font-weight: 500;
+    transition-property: color, text-decoration-color;
+    text-decoration-line: underline;
+    text-decoration-color: var(--lb-foreground-moderate);
+    text-underline-offset: 2px;
+
+    &:where([href]):where(:hover, :focus-visible) {
+      color: var(--lb-accent);
+      text-decoration-color: var(--lb-accent-moderate);
+    }
+  }
+
+  :where(code) {
+    padding: 0.2em 0.4em;
+    border-radius: calc(0.75 * var(--lb-radius));
+    background: var(--lb-foreground-subtle);
+    box-decoration-break: clone;
+    font-size: 85%;
+    line-height: 1;
+  }
+
+  :where(pre) {
+    margin-block: 0.25em;
+    padding: var(--lb-spacing);
+    border-radius: var(--lb-radius);
+    box-decoration-break: clone;
+    box-shadow: var(--lb-foreground-subtle) 0 0 0 1px inset;
+
+    :where(code) {
+      padding: 0;
+      background: transparent;
+    }
+  }
+
+  :where(strong) {
+    font-weight: 600;
+  }
+}
+
+.lb-ai-chat-assistant-message-thinking {
+  @include truncate;
+
+  user-select: none;
+  animation: lb-animation-shimmer-small 8s linear infinite;
+}
+
+.lb-ai-chat-user-message-deleted,
+.lb-ai-chat-assistant-message-deleted {
+  position: relative;
+  align-items: center;
+  inline-size: 100%;
+  color: var(--lb-foreground-moderate);
+  font-size: 0.875em;
+  text-wrap: balance;
+}
+
+.lb-asssitant-chat-message-error {
+  --lb-dynamic-background: var(--lb-background-destructive-subtle);
+
+  position: relative;
+  display: flex;
+  gap: calc(0.5 * var(--lb-spacing));
+  align-items: center;
+  inline-size: 100%;
+  padding: calc(0.75 * var(--lb-spacing));
+  border-radius: var(--lb-radius);
+  background: var(--lb-dynamic-background);
+  color: var(--lb-destructive);
+  font-size: 0.875em;
+  text-wrap: balance;
+
+  :where(.lb-icon-container) {
+    color: var(--lb-destructive-secondary);
+  }
+}
+
+.lb-ai-chat-assistant-message-reasoning-part {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  color: var(--lb-foreground-secondary);
+  font-size: 0.875em;
+}
+
+.lb-ai-chat-assistant-message-reasoning-part-trigger {
+  @include truncate;
+
+  display: flex;
+  gap: calc(0.25 * var(--lb-spacing));
+  align-items: center;
+
+  &:where([data-reasoning]) {
+    animation: lb-animation-shimmer-small 8s linear infinite;
+  }
+}
+
+.lb-ai-chat-assistant-message-reasoning-part-content {
+  display: flex;
+  gap: calc(0.5 * var(--lb-spacing));
+  line-height: var(--lb-line-height);
+
+  &:where([data-state="open"]) {
+    margin-block-start: 0.25em;
+  }
+}
+
+.lb-ai-chat-assistant-message-actions {
+  display: flex;
+  gap: calc(0.125 * var(--lb-spacing));
+  align-items: center;
+}
+
+.lb-ai-chat {
+  --lb-ai-chat-container-width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  block-size: 100%;
+  background: var(--lb-background);
+
+  /* overflow-block: auto; doesn't work as expected */
+  /* stylelint-disable-next-line plugin/use-logical-properties-and-values */
+  overflow-y: auto;
+}
+
+.lb-ai-chat-messages {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.75 * var(--lb-spacing));
+  inline-size: 100%;
+  max-inline-size: min(
+    calc(var(--lb-ai-chat-container-width) - var(--lb-spacing)),
+    calc(100% - 3 * var(--lb-spacing))
+  );
+  margin-inline: auto;
+  padding-block-start: var(--lb-spacing);
+  padding-block-end: calc(3 * var(--lb-spacing));
+}
+
+.lb-ai-chat-loading,
+.lb-ai-chat-error {
+  position: relative;
+  flex: 1 1 auto;
+}
+
+.lb-ai-chat-messages-user-message {
+  max-inline-size: 80%;
+  margin-inline-start: auto;
+}
+
+.lb-ai-chat-footer {
+  position: sticky;
+  inset-block-end: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.75 * var(--lb-spacing));
+  inline-size: 100%;
+  margin-block-start: auto;
+  padding: var(--lb-spacing);
+  padding-block-start: 0;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    inset-block-start: calc(-3 * var(--lb-spacing));
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      var(--lb-background) calc(3 * var(--lb-spacing))
+    );
+    pointer-events: none;
+  }
+}
+
+.lb-ai-chat-footer-actions {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: calc(-3 * var(--lb-spacing));
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.lb-ai-chat-composer {
+  position: relative;
+  inline-size: 100%;
+  max-inline-size: var(--lb-ai-chat-container-width);
+  margin-inline: auto;
+  margin-block-start: auto;
+  border-radius: calc(2 * var(--lb-radius));
+  background: var(--lb-dynamic-background);
+  box-shadow: var(--lb-elevation-shadow-small);
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    box-shadow: var(--lb-inset-shadow);
+    pointer-events: none;
+  }
+}
+
+.lb-ai-chat-scroll-button {
+  border-radius: $lb-radius-full;
+  opacity: 0;
+  pointer-events: none;
+  transition-property: opacity;
+
+  &:where([data-visible]) {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
 /*************************************
  *            Animations             *
  *************************************/
@@ -2118,6 +2606,28 @@
   }
 }
 
+@keyframes lb-animation-shimmer-small {
+  from,
+  to {
+    mask-image: linear-gradient(
+      90deg,
+      #000 8%,
+      rgb(0 0 0 / 50%) 20%,
+      rgb(0 0 0 / 50%) 80%,
+      #000 92%
+    );
+    mask-size: 400% 100%;
+  }
+
+  from {
+    mask-position: 200% 0;
+  }
+
+  to {
+    mask-position: -200% 0;
+  }
+}
+
 @keyframes lb-animation-spin {
   from {
     transform: rotate(0deg);

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-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;color-scheme:dark}.lb-root.lb-elevation:where(:is(.dark,[data-theme=dark],[data-dark])),:is(.dark,[data-theme=dark],[data-dark]) .lb-elevation:where(.lb-root),.lb-root.lb-tooltip:where(:is(.dark,[data-theme=dark],[data-dark])),:is(.dark,[data-theme=dark],[data-dark]) .lb-tooltip:where(.lb-root){--lb-background:#333;--lb-foreground-contrast:10%}
+.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-small:0 0 0 1px #0000000a,0 2px 6px #0000000f,0 8px 26px #00000014;--lb-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.lb-root.lb-elevation:where(:is(.dark,[data-theme=dark],[data-dark])),:is(.dark,[data-theme=dark],[data-dark]) .lb-elevation:where(.lb-root),.lb-root.lb-tooltip:where(:is(.dark,[data-theme=dark],[data-dark])),:is(.dark,[data-theme=dark],[data-dark]) .lb-tooltip:where(.lb-root){--lb-background:#333;--lb-foreground-contrast:10%}

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,4DAAA,CAAA,iBAAA,CCoBE,sRAAA,oBAAA,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-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &.lb-elevation,\n  &.lb-tooltip {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\n}\n"]}
+{"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,wFAAA,CAAA,4DAAA,CAAA,sBAAA,CAAA,2BAAA,CAAA,iBAAA,CCqBE,sRAAA,oBAAA,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-small: $lb-elevation-shadow-small;\n  --lb-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &.lb-elevation,\n  &.lb-tooltip {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\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-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;color-scheme:dark}.lb-root.lb-elevation,.lb-root.lb-tooltip{--lb-background:#333;--lb-foreground-contrast:10%}}
+@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-small:0 0 0 1px #0000000a,0 2px 6px #0000000f,0 8px 26px #00000014;--lb-tooltip-shadow:0 2px 4px #00000014,0 4px 12px #0000001f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.lb-root.lb-elevation,.lb-root.lb-tooltip{--lb-background:#333;--lb-foreground-contrast:10%}}

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,4DAAA,CAAA,iBAAA,CCqBA,0CAAA,oBAAA,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-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &.lb-elevation,\n  &.lb-tooltip {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\n}\n"]}
+{"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,wFAAA,CAAA,4DAAA,CAAA,sBAAA,CAAA,2BAAA,CAAA,iBAAA,CCsBA,0CAAA,oBAAA,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-small: $lb-elevation-shadow-small;\n  --lb-tooltip-shadow: $lb-tooltip-shadow;\n\n  color-scheme: dark;\n\n  &.lb-elevation,\n  &.lb-tooltip {\n    --lb-background: #333;\n    --lb-foreground-contrast: 10%;\n  }\n}\n"]}