gpui-component/docs/.vitepress/theme/style.css

/**
 * Customize default theme styling by overriding CSS variables:
 * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 */

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

:root {
  --radius: 0.875rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  --vp-c-bg: var(--background);
  --vp-c-bg-alt: var(--secondary);
  --vp-c-bg-elv: var(--popover);
  --vp-c-bg-soft: var(--secondary);

  --vp-c-text-1: var(--foreground);
  --vp-c-brand-1: var(--primary);
  --vp-c-default-1: var(--secondary);
  --vp-c-default-2: var(--muted);

  --vp-nav-bg-color: var(--background);
  --vp-custom-block-tip-border: var(--vp-c-default-3);
  --vp-custom-block-tip-text: var(--vp-c-text-1);
  --vp-custom-block-tip-bg: transparent;
  --vp-custom-block-tip-code-bg: var(--vp-c-default-soft);
  --vp-input-switch-bg-color: var(--secondary);
  --vp-input-border-color: var(--input);
  --vp-c-divider: var(--border);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
}

#app {
  .VPMenu {
    @apply p-1 rounded-md bg-(--popover);

    .link {
      @apply text-sm py-1;
    }
  }

  .DocSearch-Button {
    @apply rounded-full py-0 px-2 h-8 lg:w-56 xl:w-64;

    .DocSearch-Button-Keys {
      @apply rounded-full p-1;
    }
  }

  .VPNav {
    @apply bg-(--background) border-b border-(--border);

    .divider {
      @apply hidden;
    }
  }

  .VPSwitch {
    @apply border-(--secondary) bg-(--secondary) hover:border-(--border);
  }

  .VPFooter {
    @apply border-dashed;
  }

  .VPSidebar {
    @apply border-r border-(--border) bg-(--background);
  }

  .VPNavBarTitle {
    a.title {
      border-bottom: 0 !important;
    }
  }

  .prev-next {
    @apply border-0 pt-0;

    .pager-link {
      @apply border-dashed;
    }
  }
}

.VPContent.has-sidebar {
  .VPDoc {
    @apply pt-32;
    background: url("/components.svg") no-repeat;
    background-position: top -45px right 320px;
  }
}

.vp-doc {
  h2 {
    @apply border-t-0 mt-10 pt-0 pb-3 border-b border-dashed border-(--border);

    .header-anchor {
      @apply top-0;
    }
  }
  [class*="language-"] pre {
    @apply rounded-md py-5 text-base font-mono;
  }

  [class*="language-"] pre code {
    @apply px-5;
  }

  [class*="language-"] > button.copy {
    /*rtl:ignore*/
    direction: ltr;
    position: absolute;
    top: 12px;
    /*rtl:ignore*/
    z-index: 3;
    border: 1px solid var(--vp-code-copy-code-border-color);
    border-radius: 4px;
    background-color: var(--vp-code-copy-code-bg);
    opacity: 0;
    cursor: pointer;
    background-image: var(--vp-icon-copy);
    background-position: 50%;
    background-repeat: no-repeat;
    transition:
      border-color 0.25s,
      background-color 0.25s,
      opacity 0.25s;

    width: 24px;
    height: 24px;
    background-size: 14px;

    &:hover,
    &.copy.copied {
      border-color: var(--vp-code-copy-code-hover-border-color);
      background-color: var(--vp-code-copy-code-hover-bg);
    }

    &:hover.copied::before,
    &.copied::before {
      height: 24px;
      line-height: 24px;
      padding: 0 8px;
    }
  }

  [class*="language-"] > button.copy {
    right: 12px;
  }
}