1import type { CSSProperties } from "react";
2
3export const PIERRE_TREE_UNSAFE_CSS = `
4 :host {
5 --trees-bg-override: transparent;
6 --trees-selected-bg-override: color-mix(in srgb, currentColor 12%, transparent);
7 --trees-hover-bg-override: color-mix(in srgb, currentColor 7%, transparent);
8 --trees-border-color-override: color-mix(in srgb, currentColor 14%, transparent);
9 --trees-font-family-override: var(--font-sans);
10 --trees-font-size-override: 0.75rem;
11 }
12 [data-truncate-content='visible'] { overflow: hidden; text-overflow: ellipsis; }
13 [data-truncate-marker] { display: none; }
14 button[data-type='item'], button[data-type='item']::before { border-radius: var(--radius-md); }
15 svg[data-icon-name='t3-tree-icon-loading'] { opacity: 0.6; }
16 @media (prefers-reduced-motion: no-preference) {
17 svg[data-icon-name='t3-tree-icon-loading'] { animation: t3-tree-spin 1s linear infinite; }
18 }
19 @keyframes t3-tree-spin { to { transform: rotate(360deg); } }
20`;
21
22export function pierreTreeStyle(colorScheme: "light" | "dark"): CSSProperties {
23 return {
24 colorScheme,
25 ["--trees-fg-override" as string]: "var(--contrast-foreground)",
26 };
27}