@liveblocks/react-ui/src/styles/dark/index.css

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.

@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-highlight-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
  --lb-elevation-shadow: $lb-elevation-shadow;
  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;
  --lb-tooltip-shadow: $lb-tooltip-shadow;

  color-scheme: dark;

  &:where(.lb-elevation, .lb-tooltip) {
    --lb-background: #333;
    --lb-foreground-contrast: 10%;
  }

  &:where(.lb-elevation-moderate) {
    --lb-background: #2a2a2a;
    --lb-foreground-contrast: 10%;
  }

  .lb-ai-chat-pending {
    animation-name: lb-animation-shimmer-text-invert;
  }
}

@keyframes lb-animation-shimmer-text-invert {
  from,
  to {
    mask-image: linear-gradient(
      90deg,
      rgb(0 0 0 / 50%) 36%,
      rgb(0 0 0 / 95%) 48%,
      rgb(0 0 0 / 95%) 52%,
      rgb(0 0 0 / 50%) 64%
    );
    mask-size: 300% 100%;
  }

  from {
    mask-position: 100% 0;
  }

  to {
    mask-position: 0% 0;
  }
}