@liveblocks/react-ui 3.15.0-components1 → 3.15.0-thread2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "3.15.0-components1",
+  "version": "3.15.0-thread2",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
   "license": "Apache-2.0",
   "type": "module",
@@ -76,13 +76,17 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.0",
-    "@liveblocks/client": "3.15.0-components1",
-    "@liveblocks/core": "3.15.0-components1",
-    "@liveblocks/react": "3.15.0-components1",
+    "@floating-ui/react-dom": "^2.1.2",
+    "@liveblocks/client": "3.15.0-thread2",
+    "@liveblocks/core": "3.15.0-thread2",
+    "@liveblocks/react": "3.15.0-thread2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "frimousse": "^0.2.0",
     "marked": "^15.0.11",
-    "radix-ui": "^1.4.0",
     "slate": "^0.110.2",
     "slate-history": "^0.110.3",
     "slate-hyperscript": "^0.100.0",

package/src/styles/dark/index.css

@@ -23,7 +23,7 @@
 
   color-scheme: dark;
 
-  &:where(.lb-elevation, .lb-tooltip, .lb-comment-pin) {
+  &:where(.lb-elevation, .lb-tooltip) {
     --lb-background: #333;
     --lb-foreground-contrast: 10%;
   }

package/src/styles/index.css

@@ -1346,7 +1346,6 @@
   padding: var(--lb-spacing);
   background: var(--lb-dynamic-background);
   color: var(--lb-foreground);
-  outline: none;
   font-weight: 400;
   scroll-margin: var(--lb-spacing);
 
@@ -1372,7 +1371,7 @@
     --lb-dynamic-background: var(--lb-background-accent-faint);
   }
 
-  &:where([data-editing], :focus-visible) {
+  &:where([data-editing]) {
     --lb-dynamic-background: var(--lb-background-foreground-faint);
   }
 }
@@ -1652,239 +1651,6 @@
   }
 }
 
-/*************************************
- *          Floating Thread          *
- *************************************/
-
-.lb-floating-thread {
-  --lb-floating-thread-size: 350px;
-
-  inline-size: var(--lb-floating-thread-size);
-}
-
-/*************************************
- *       Floating Thread Composer    *
- *************************************/
-
-.lb-floating-thread-composer {
-  --lb-floating-thread-composer-size: 350px;
-
-  inline-size: var(--lb-floating-thread-composer-size);
-
-  :where(.lb-thread, .lb-composer) {
-    inline-size: 100%;
-  }
-}
-
-/*************************************
- *         Floating Composer         *
- *************************************/
-
-.lb-floating-composer {
-  --lb-floating-composer-size: 350px;
-
-  inline-size: var(--lb-floating-composer-size);
-}
-
-/*************************************
- *            Comment Pin            *
- *************************************/
-
-.lb-comment-pin {
-  --lb-comment-pin-size: 32px;
-  --lb-comment-pin-padding: 4px;
-
-  @include button;
-
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  inline-size: var(--lb-comment-pin-size);
-  block-size: var(--lb-comment-pin-size);
-  padding: var(--lb-comment-pin-padding);
-  border-radius: $lb-radius-full;
-  background: var(--lb-background);
-  box-shadow: var(--lb-elevation-shadow);
-  isolation: isolate;
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    border-radius: inherit;
-    box-shadow: var(--lb-inset-shadow);
-    pointer-events: none;
-  }
-
-  &:where([data-corner="top-left"]) {
-    border-start-start-radius: 2px;
-    transform: translate(0, 0);
-  }
-
-  &:where([data-corner="top-right"]) {
-    border-start-end-radius: 2px;
-    transform: translate(-100%, 0);
-  }
-
-  &:where([data-corner="bottom-right"]) {
-    border-end-end-radius: 2px;
-    transform: translate(-100%, -100%);
-  }
-
-  &:where([data-corner="bottom-left"]) {
-    border-end-start-radius: 2px;
-    transform: translate(0, -100%);
-  }
-}
-
-.lb-comment-pin-avatar {
-  inline-size: 100%;
-  block-size: 100%;
-}
-
-/*************************************
- *            Avatar Stack           *
- *************************************/
-
-.lb-avatar-stack {
-  --lb-avatar-stack-size: 24px;
-  --lb-avatar-stack-overlap: calc(0.25 * var(--lb-avatar-stack-size));
-  --lb-avatar-stack-gap: 2px;
-
-  display: flex;
-  flex-direction: row;
-  isolation: isolate;
-}
-
-.lb-avatar-stack-avatar {
-  position: relative;
-  z-index: calc(
-    var(--lb-avatar-stack-count) - var(--lb-avatar-stack-avatar-index)
-  );
-  inline-size: var(--lb-avatar-stack-size);
-  block-size: var(--lb-avatar-stack-size);
-  margin-inline-end: calc(-1 * var(--lb-avatar-stack-overlap));
-  border-radius: $lb-radius-full;
-
-  &:where(:not(:first-child)) {
-    --lb-avatar-stack-mask-size: calc(
-      var(--lb-avatar-stack-size) / 2 + var(--lb-avatar-stack-gap)
-    );
-
-    mask-image: radial-gradient(
-      circle at
-        calc(var(--lb-avatar-stack-overlap) - var(--lb-avatar-stack-size) / 2)
-        50%,
-      transparent var(--lb-avatar-stack-mask-size),
-      black calc(var(--lb-avatar-stack-mask-size) + 0.375px)
-    );
-  }
-}
-
-/*************************************
- *           Users Tooltip           *
- *************************************/
-
-.lb-users-tooltip-list {
-  --lb-users-tooltip-avatar-size: 1rem;
-
-  display: flex;
-  flex-direction: column;
-  gap: calc(0.625 * var(--lb-spacing));
-  margin: 0;
-  padding-inline: 0;
-  padding-block: calc(0.75 * var(--lb-spacing));
-  list-style: none;
-}
-
-.lb-users-tooltip-list-item {
-  display: flex;
-  gap: calc(0.625 * var(--lb-spacing));
-  align-items: center;
-
-  :where(.lb-avatar) {
-    inline-size: var(--lb-users-tooltip-avatar-size);
-    block-size: var(--lb-users-tooltip-avatar-size);
-  }
-}
-
-/*************************************
- *              Cursor               *
- *************************************/
-
-.lb-cursor {
-  --lb-cursor-color: var(--lb-accent);
-  --lb-cursor-pointer-size: 1rem;
-
-  position: relative;
-  inline-size: 0;
-  block-size: 0;
-  color: var(--lb-cursor-color);
-  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 5%))
-    drop-shadow(0 8px 26px rgb(0 0 0 / 6%));
-  pointer-events: none;
-  isolation: isolate;
-}
-
-.lb-cursor-pointer {
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  inline-size: var(--lb-cursor-pointer-size);
-  block-size: var(--lb-cursor-pointer-size);
-}
-
-.lb-cursor-bubble {
-  position: absolute;
-  inset-inline-start: calc(0.8125 * var(--lb-cursor-pointer-size));
-  inset-block-start: calc(0.8125 * var(--lb-cursor-pointer-size));
-  padding: calc(0.375 * var(--lb-spacing)) calc(0.6875 * var(--lb-spacing));
-  border-radius: calc(0.5 * (1lh + 2 * 0.3125 * var(--lb-spacing)));
-  background: currentcolor;
-  font-size: 0.8125rem;
-}
-
-.lb-cursor-bubble-label {
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-  will-change: transform;
-
-  /* Use relative color to derive a text color legible against the background. */
-  @supports (color: oklch(from black l c h)) {
-    color: oklch(
-      from var(--lb-cursor-color) clamp(0, (l / 0.623 - 1) * -infinity, 1) 0 h
-    );
-  }
-
-  /* Use a filter trick if relative color is not supported. */
-  @supports not (color: oklch(from black l c h)) {
-    opacity: 0.95;
-    filter: invert(1) grayscale(1) brightness(1.3) contrast(9000);
-    mix-blend-mode: luminosity;
-  }
-}
-
-/*************************************
- *              Cursors              *
- *************************************/
-
-.lb-cursors {
-  position: relative;
-  overflow: clip;
-  isolation: isolate;
-}
-
-.lb-cursors-container {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  pointer-events: none;
-  isolation: isolate;
-}
-
 /*************************************
  *            Attachments            *
  *************************************/
@@ -2486,7 +2252,6 @@
   border-radius: var(--lb-radius);
   background: var(--lb-dynamic-background);
   box-shadow: var(--lb-elevation-shadow);
-  isolation: isolate;
 
   &::after {
     content: "";
@@ -2567,10 +2332,7 @@
 .lb-composer-suggestions,
 .lb-composer-floating-toolbar,
 .lb-tooltip,
-.lb-emoji-picker,
-.lb-floating-thread,
-.lb-floating-composer,
-.lb-floating-thread-composer {
+.lb-emoji-picker {
   animation-duration: var(--lb-transition-duration);
   animation-timing-function: var(--lb-transition-easing);
   will-change: transform, opacity;
@@ -2592,19 +2354,12 @@
   }
 }
 
-:is(.lb-floating-thread, .lb-floating-composer, .lb-floating-thread-composer) {
-  animation-name: lb-animation-appear;
-}
-
 :is(
   .lb-dropdown,
   .lb-emoji-picker,
   .lb-tooltip,
   .lb-composer-suggestions,
-  .lb-composer-floating-toolbar,
-  .lb-floating-thread,
-  .lb-floating-composer,
-  .lb-floating-thread-composer
+  .lb-composer-floating-toolbar
 ) {
   &:where([data-state="closed"]) {
     animation-name: lb-animation-disappear;
@@ -2615,10 +2370,7 @@
   .lb-dropdown:where(:not([data-state="closed"])),
   .lb-emoji-picker:where(:not([data-state="closed"])),
   .lb-tooltip:where([data-state="delayed-open"]:not([data-state="closed"])),
-  .lb-composer-suggestions:where(:not([data-state="closed"])),
-  .lb-floating-thread:where(:not([data-state="closed"])),
-  .lb-floating-composer:where(:not([data-state="closed"])),
-  .lb-floating-thread-composer:where(:not([data-state="closed"])) {
+  .lb-composer-suggestions:where(:not([data-state="closed"])) {
     animation-name: lb-animation-appear;
   }
 }

package/styles/dark/attributes.css

@@ -1 +1 @@
-@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,.lb-comment-pin),:is(.dark,[data-theme=dark],[data-dark]) :where(.lb-root):where(.lb-elevation,.lb-tooltip,.lb-comment-pin){--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}
+@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/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,qNAAA,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, .lb-comment-pin) {\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"]}
+{"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 @@
-@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-comment-pin){--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}}
+@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/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,0DAAA,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, .lb-comment-pin) {\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"]}
+{"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"]}