@liveblocks/react-ui 2.5.2 → 2.7.0-beta2

package/src/styles/index.css

@@ -23,6 +23,7 @@
   --lb-button-radius: calc(0.75 * var(--lb-radius));
   --lb-transition-duration: 0.1s;
   --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-tooltip-shadow: $lb-tooltip-shadow;
   --lb-accent-contrast: 8%;
@@ -136,6 +137,11 @@
   }
 }
 
+.lb-icon-spinner {
+  transform-origin: center;
+  animation: lb-animation-spin 0.75s linear infinite;
+}
+
 /*************************************
  *              Button               *
  *************************************/
@@ -143,40 +149,15 @@
 .lb-button {
   --lb-button-background: var(--lb-dynamic-background);
 
-  all: unset;
-  position: relative;
+  @include button;
+
   display: flex;
   justify-content: center;
   align-items: center;
-  box-sizing: inherit;
   padding: calc(0.25 * var(--lb-spacing));
   border-radius: var(--lb-button-radius);
   background: var(--lb-button-background);
   color: var(--lb-foreground-moderate);
-  outline: none;
-  cursor: pointer;
-  user-select: none;
-  transition-property: background, color, opacity;
-  -webkit-tap-highlight-color: transparent;
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-    transition-property: box-shadow;
-  }
-
-  &:where(: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-button\:non-disableable:disabled) {
     cursor: default;
@@ -447,6 +428,7 @@
   position: relative;
   display: flex;
   align-items: center;
+  max-inline-size: 300px;
   min-block-size: calc(
     $lb-tooltip-shortcut-height + 2 * $lb-tooltip-additional-padding
   );
@@ -457,6 +439,7 @@
   box-shadow: var(--lb-tooltip-shadow);
   font-size: 0.75rem;
   line-height: 1;
+  overflow-wrap: anywhere;
   pointer-events: none;
 
   &::after {
@@ -632,6 +615,7 @@
  *************************************/
 
 .lb-composer {
+  position: relative;
   background: var(--lb-dynamic-background);
   color: var(--lb-foreground);
   transition-property: background;
@@ -641,37 +625,16 @@
   margin: 0;
 }
 
-/**
- * Progressive enhancement: Use :has instead of :focus-within to target the editor specifically
- */
-@supports selector(:has(*)) {
-  .lb-composer:where(:has(.lb-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);
-      }
-    }
-  }
-}
-
-@supports not selector(:has(*)) {
-  .lb-composer:where(:not(:focus-within)) {
-    :where(.lb-button[data-variant="primary"]) {
-      --lb-button-background: var(--lb-foreground-subtle);
+.lb-composer:where(:has(.lb-composer-editor:not(:focus-visible))) {
+  :where(.lb-button[data-variant="primary"]) {
+    --lb-button-background: var(--lb-foreground-subtle);
 
-      color: var(--lb-foreground-tertiary);
+    color: var(--lb-foreground-tertiary);
 
-      &:where(:enabled:hover, :enabled:focus-visible) {
-        --lb-button-background: var(--lb-accent);
+    &:where(:enabled:hover, :enabled:focus-visible) {
+      --lb-button-background: var(--lb-accent);
 
-        color: var(--lb-accent-foreground);
-      }
+      color: var(--lb-accent-foreground);
     }
   }
 }
@@ -680,6 +643,10 @@
   padding: var(--lb-spacing);
   outline: none;
 
+  :where(.lb-composer-editor-container:has(.lb-composer-attachments)) & {
+    padding-block-end: calc(0.25 * var(--lb-spacing));
+  }
+
   :where([data-placeholder]) {
     color: var(--lb-foreground-moderate);
   }
@@ -699,6 +666,7 @@
   gap: calc(0.75 * var(--lb-spacing));
   align-items: center;
   block-size: calc($lb-button-size + var(--lb-spacing));
+  margin-block-start: calc(-0.125 * var(--lb-spacing));
   padding: 0 var(--lb-spacing) var(--lb-spacing);
 }
 
@@ -727,12 +695,57 @@
   }
 }
 
-.lb-composer:where(:not([data-collapsed])) {
-  :where(.lb-composer-editor) {
-    padding-block-end: calc(0.875 * var(--lb-spacing));
+.lb-composer-attachments {
+  padding-inline: var(--lb-spacing);
+  padding-block-start: calc(0.75 * var(--lb-spacing));
+  padding-block-end: var(--lb-spacing);
+}
+
+.lb-composer-editor-container:where([data-drop]) * {
+  pointer-events: none;
+}
+
+.lb-composer-attachments-drop-area {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  place-content: center;
+  place-items: center;
+  color: var(--lb-accent);
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset: calc(0.5 * var(--lb-spacing));
+    z-index: 0;
+    border-radius: calc(0.75 * var(--lb-radius));
+  }
+
+  &::before {
+    background: currentcolor;
+    opacity: calc(1 * var(--lb-accent-contrast));
+  }
+
+  &::after {
+    border: 2px dashed currentcolor;
+    opacity: calc(2 * var(--lb-accent-contrast));
   }
 }
 
+.lb-composer-attachments-drop-area-label {
+  position: relative;
+  display: flex;
+  gap: calc(0.25 * var(--lb-spacing));
+  place-items: center;
+  padding: calc(0.375 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));
+  border-radius: calc(0.75 * var(--lb-radius));
+  background: var(--lb-accent);
+  color: var(--lb-accent-foreground);
+  font-weight: 500;
+  pointer-events: none;
+}
+
 /*************************************
  *              Comment              *
  *************************************/
@@ -841,6 +854,10 @@
   }
 }
 
+.lb-comment-attachments {
+  margin-block-start: calc(0.75 * var(--lb-spacing));
+}
+
 .lb-comment-reactions {
   display: flex;
   flex-wrap: wrap;
@@ -946,7 +963,7 @@
     min-block-size: calc(var(--lb-comment-avatar-size) + var(--lb-spacing));
   }
 
-  &:where(:first-of-type) {
+  &:where(:first-of-type, [data-editing]) {
     padding-block-start: var(--lb-spacing);
 
     &:where(.lb-comment\:indent-content) {
@@ -956,7 +973,7 @@
     }
   }
 
-  &:where(:last-of-type) {
+  &:where(:last-of-type, [data-editing]) {
     padding-block-end: var(--lb-spacing);
 
     &:where(.lb-comment\:indent-content) {
@@ -1019,6 +1036,212 @@
   }
 }
 
+/*************************************
+ *            Attachments            *
+ *************************************/
+
+.lb-comment-attachments,
+.lb-composer-attachments {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
+  gap: calc(0.75 * var(--lb-spacing));
+}
+
+.lb-attachment,
+.lb-attachment-delete {
+  @include button;
+}
+
+.lb-attachment {
+  position: relative;
+  inline-size: 100%;
+  min-inline-size: 0;
+  border-radius: var(--lb-radius);
+  background: var(--lb-dynamic-background);
+  box-shadow: inset 0 0 0 1px var(--lb-foreground-subtle);
+
+  &:where([tabindex="-1"]) {
+    cursor: default;
+  }
+
+  &:where(:not([tabindex="-1"])) {
+    &:where(:hover, :focus-visible) {
+      background: var(--lb-foreground-subtle);
+    }
+  }
+}
+
+.lb-attachment-delete {
+  position: absolute;
+  inset-inline-end: -0.35rem;
+  inset-block-start: -0.35rem;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  inline-size: 1.1rem;
+  block-size: 1.1rem;
+  border-radius: 50%;
+  background: var(--lb-foreground-subtle);
+  color: var(--lb-foreground-secondary);
+  box-shadow: 0 0 0 2px var(--lb-dynamic-background);
+  opacity: 0;
+
+  /* Invisibly increase the button's hit target size */
+  &::before {
+    content: "";
+    position: absolute;
+    inset: -4px;
+    z-index: -1;
+    border-radius: inherit;
+  }
+
+  &:where(:hover, :focus-visible) {
+    background: var(--lb-foreground-secondary);
+    color: var(--lb-dynamic-background);
+  }
+
+  :where(.lb-attachment:focus-within, .lb-attachment:hover) & {
+    opacity: 1;
+  }
+
+  :where(.lb-icon) {
+    inline-size: 0.75rem;
+  }
+}
+
+.lb-attachment-name {
+  display: flex;
+}
+
+.lb-attachment-name-base,
+.lb-attachment-description {
+  @include truncate;
+}
+
+.lb-attachment-preview {
+  position: relative;
+}
+
+.lb-attachment-preview-image {
+  border-radius: inherit;
+  transition-property: opacity;
+
+  &,
+  &::after,
+  img {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  &::after {
+    content: "";
+    border-radius: inherit;
+    box-shadow: var(--lb-highlight-shadow);
+    pointer-events: none;
+  }
+
+  &:where([data-hidden]) {
+    opacity: 0;
+  }
+}
+
+.lb-attachment-icon {
+  flex: none;
+  overflow: visible;
+  color: var(--lb-foreground);
+}
+
+.lb-attachment-icon-glyph {
+  fill: var(--lb-foreground-moderate);
+}
+
+.lb-attachment-icon-background {
+  fill: var(--lb-background);
+}
+
+.lb-attachment-icon-fold {
+  fill-opacity: calc(0.75 * var(--lb-foreground-contrast));
+}
+
+.lb-attachment-icon-shadow {
+  filter: blur(6px);
+  fill-opacity: var(--lb-foreground-contrast);
+}
+
+.lb-file-attachment {
+  display: flex;
+  gap: calc(0.5 * var(--lb-spacing));
+  padding: calc(0.5 * var(--lb-spacing));
+  padding-inline-end: calc(0.65 * var(--lb-spacing));
+
+  :where(.lb-attachment-preview) {
+    display: flex;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    aspect-ratio: 1;
+    inline-size: 2.5rem;
+    border-radius: calc(0.5 * var(--lb-radius));
+    background: color-mix(
+      in srgb,
+      transparent,
+      var(--lb-foreground) var(--lb-foreground-contrast)
+    );
+    color: var(--lb-foreground-tertiary);
+    transition-property: background, color;
+  }
+
+  &:where([data-error]) {
+    :where(.lb-attachment-preview) {
+      background: var(--lb-destructive);
+      color: var(--lb-destructive-foreground);
+    }
+  }
+
+  :where(.lb-attachment-details) {
+    display: flex;
+    flex-direction: column;
+    gap: calc(0.25 * var(--lb-spacing));
+    justify-content: center;
+    min-inline-size: 0;
+    font-size: 0.875em;
+  }
+
+  :where(.lb-attachment-name),
+  :where(.lb-attachment-description) {
+    transition-property: color;
+  }
+
+  :where(.lb-attachment-name) {
+    color: var(--lb-foreground-secondary);
+    font-weight: 500;
+  }
+
+  :where(.lb-attachment-description) {
+    color: var(--lb-foreground-tertiary);
+  }
+
+  :where(:not([tabindex="-1"])) {
+    &:where(:hover, :focus-visible) {
+      :where(.lb-attachment-name) {
+        color: var(--lb-foreground);
+      }
+
+      :where(.lb-attachment-description) {
+        color: var(--lb-foreground-secondary);
+      }
+    }
+  }
+}
+
 /*************************************
  *        Inbox Notification         *
  *************************************/
@@ -1185,7 +1408,8 @@
     font-size: 0.875rem;
   }
 
-  :where(.lb-comment-reaction) {
+  :where(.lb-comment-reaction),
+  :where(.lb-comment-attachment) {
     pointer-events: none;
   }
 }
@@ -1235,7 +1459,7 @@
   }
 
   /**
-   * Progressive enhancement: Merge adjacent inline code elements
+   * Merge adjacent inline code elements
    */
   :where(span:has(code) + span code) {
     padding-inline-start: 0;
@@ -1434,3 +1658,13 @@
     mask-position: -200% 0;
   }
 }
+
+@keyframes lb-animation-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/styles/utils.css

@@ -1,3 +1,36 @@
+/* Because of `all: unset`, we have to re-define some these values. */
+@mixin button {
+  all: unset;
+  position: relative;
+  box-sizing: inherit;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  transition-timing-function: var(--lb-transition-easing);
+  transition-duration: var(--lb-transition-duration);
+  transition-property: background, color, opacity;
+  -webkit-tap-highlight-color: transparent;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition-property: box-shadow;
+  }
+
+  &:where(:focus-visible) {
+    z-index: 1;
+
+    &::after {
+      box-shadow:
+        var(--lb-dynamic-background) 0 0 0 2px,
+        var(--lb-accent) 0 0 0 4px;
+    }
+  }
+}
+
 @mixin truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -11,6 +44,17 @@
   }
 }
 
+@mixin invisible-scrollbar {
+  & {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 @mixin firefox-only {
   @supports (-moz-appearance: none) {
     @content;

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-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-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%}

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,kFAAA,CAAA,4DAAA,CAAA,iBAAA,CCmBE,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-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,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"]}

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-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-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%}}

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,kFAAA,CAAA,4DAAA,CAAA,iBAAA,CCoBA,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-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,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"]}