@liveblocks/react-ui 1.12.0-initial1

package/src/styles/constants.css

@@ -0,0 +1,17 @@
+$lb-button-size: calc(2 * 0.25 * var(--lb-spacing) + var(--lb-icon-size));
+$lb-elevation-list-padding: 4px;
+$lb-emoji-picker-padding: 6px;
+$lb-tooltip-horizontal-padding: calc(0.75 * var(--lb-spacing));
+$lb-tooltip-vertical-padding: calc(0.625 * var(--lb-spacing));
+$lb-tooltip-line-height: 1.5;
+$lb-tooltip-additional-padding: 5px;
+$lb-tooltip-shortcut-height: calc(1em + 2 * 0.25 * var(--lb-spacing));
+$lb-elevation-shadow:
+  0 0 0 1px rgb(0 0 0 / 4%),
+  0 2px 6px rgb(0 0 0 / 8%),
+  0 8px 26px rgb(0 0 0 / 12%);
+$lb-tooltip-shadow:
+  0 2px 4px rgb(0 0 0 / 8%),
+  0 4px 12px rgb(0 0 0 / 12%);
+$lb-loading-opacity: 0.12;
+$lb-radius-full: 9999px;

package/src/styles/dark/attributes.css

@@ -0,0 +1,8 @@
+/* stylelint-disable selector-class-pattern */
+
+@import "./index";
+
+.lb-root:where(:is(.dark, [data-theme="dark"], [data-dark])),
+:is(.dark, [data-theme="dark"], [data-dark]) :where(.lb-root) {
+  @include dark-styles;
+}

package/src/styles/dark/index.css

@@ -0,0 +1,29 @@
+@import "../constants";
+
+@mixin dark-styles {
+  /**
+   * Colors
+   */
+  --lb-accent: #4af;
+  --lb-destructive: #f77;
+  --lb-background: #222;
+  --lb-foreground: #fff;
+  --lb-accent-contrast: 16%;
+  --lb-destructive-contrast: 16%;
+  --lb-foreground-contrast: 10%;
+
+  /**
+   * Shadows
+   */
+  --lb-inset-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
+  --lb-elevation-shadow: $lb-elevation-shadow;
+  --lb-tooltip-shadow: $lb-tooltip-shadow;
+
+  color-scheme: dark;
+
+  &.lb-elevation,
+  &.lb-tooltip {
+    --lb-background: #333;
+    --lb-foreground-contrast: 10%;
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "./index";
+
+@media (prefers-color-scheme: dark) {
+  .lb-root {
+    @include dark-styles;
+  }
+}