logseq/resources/css/shui.css

html * {
  border-color: hsl(var(--border));
}

html {
  .ui__dropdown-menu-content,
  .ui__context-menu-content,
  .ui__select-content {
    --accent: var(--rx-gray-04-hsl);
    --accent-foreground: var(--rx-gray-12-hsl);

    --muted: var(--rx-gray-05-hsl);
  }

  .ui__dropdown-menu-item,
  div[data-radix-popper-content-wrapper] div[role=menuitem] {
    &:focus, &:hover {
      background-color: var(--lx-gray-04, hsl(var(--accent)));
    }
  }

  div[data-radix-popper-content-wrapper] div[role=menu] {
    background-color: var(--lx-gray-03, hsl(var(--popover)));
  }

  &:not([data-color=logseq]) {
  }

  &[data-color=logseq] {
    .references-blocks-item {
      --lx-bg-override: var(--rx-gray-03-alpha);
    }

    .block-children-left-border:hover {
      --ls-block-left-color: var(--rx-logseq-11);
    }
  }

  .ui__calendar {
    --accent: var(--rx-gray-04-hsl);
    --accent-foreground: var(--rx-gray-12-hsl);
  }
}

html[data-theme=light] {
  --accent: var(--rx-gray-04-hsl);
  --accent-foreground: var(--rx-gray-12-hsl);
  --input: var(--rx-gray-03-hsl);

  &[data-color=logseq] {
    --primary: 200 97% 37%;
    --primary-foreground: 255 92% 100%;
    --accent: 200 97% 37%;
    --accent-foreground: 255 92% 100%;
    --ring: 200 97% 37%;

    .references-blocks-item {
      --lx-bg-override: var(--rx-gray-03-alpha);
    }
  }

  .extensions__pdf-container {
    --lx-pdf-container-dark-bg: var(--lx-gray-11, #042f3c);
  }
}

html[data-theme=dark] {
  --primary-foreground: 255 92% 100%;
  --background: 0 0% 11%;
  --foreground: 0 0% 95%;
  --card: 0 0% 11%;
  --card-foreground: 0 0% 95%;
  --secondary: 0 0% 20%;
  --secondary-foreground: 0 0% 98%;
  --border: 0 0% 16%;
  --muted: 0 0% 15%;
  --popover: 0 0% 7%;
  --popover-foreground: 0 0 95%;
  --input: 0 0% 25%;

  &[data-color=logseq] {
    --background: 192 100% 11%;
    --foreground: 0 0% 95%;
    --accent: 192 80% 10%;
    --accent-foreground: 255 92% 100%;
    --primary: 200 97% 37%;
    --primary-foreground: 255 92% 100%;
    --ring: 200 97% 37%;
    --secondary: 203 50% 20%;
    --secondary-foreground: 0 0% 98%;
    --muted: 192 100% 13%;
    --border: 192 100% 14%;
    --card: 192 100% 10%;
    --card-foreground: 0 0% 95%;
    --popover: 192 100% 11%;
    --input: 203 35% 25%;

    .ui__button {
      &.as-outline {
        --accent: 192 100% 12%;
      }
    }

    .ui__dropdown-menu-content,
    .ui__context-menu-content,
    .ui__select-content {
      --accent: 190 100% 15%;
      --muted: 192 100% 13%;
    }

    .menu-separator {
      @apply opacity-20;
    }

    .ui__calendar {
      --accent: 196 100% 15%;
    }

    .rc-datepicker {
      --accent: 200 97% 37%;
    }
  }
}

.ui__button-shortcut-key {
  @apply text-xs font-normal h-5 w-5 flex items-center justify-center rounded bg-gray-06-alpha;

  &:first-of-type {
    @apply ml-2;
  }
}

.ui__list-item-highlighted-span {
  background-color: or(--lx-accent-06, --color-level-4);
}

.dark .ui__list-item-highlighted-span {
  background-color: or(--lx-accent-08-alpha, --color-level-4);
}