| 1 | import type { CSSProperties } from "react"; |
| 2 | |
| 3 | /** Shadow-root overrides that make a Pierre file tree read as part of the app chrome. */ |
| 4 | export const PIERRE_TREE_UNSAFE_CSS = ` |
| 5 | :host { |
| 6 | --trees-bg-override: transparent; |
| 7 | --trees-selected-bg-override: color-mix(in srgb, currentColor 12%, transparent); |
| 8 | --trees-hover-bg-override: color-mix(in srgb, currentColor 7%, transparent); |
| 9 | --trees-border-color-override: color-mix(in srgb, currentColor 14%, transparent); |
| 10 | --trees-font-family-override: var(--font-sans); |
| 11 | --trees-font-size-override: 0.75rem; |
| 12 | } |
| 13 | button[data-type='item'], button[data-type='item']::before { border-radius: var(--radius-md); } |
| 14 | svg[data-icon-name='t3-tree-icon-loading'] { opacity: 0.6; } |
| 15 | @media (prefers-reduced-motion: no-preference) { |
| 16 | svg[data-icon-name='t3-tree-icon-loading'] { animation: t3-tree-spin 1s linear infinite; } |
| 17 | } |
| 18 | @keyframes t3-tree-spin { to { transform: rotate(360deg); } } |
| 19 | `; |
| 20 | |
| 21 | /** Host styles that keep a Pierre tree on the active color scheme and foreground. */ |
| 22 | export function pierreTreeStyle(colorScheme: "light" | "dark"): CSSProperties { |
| 23 | return { |
| 24 | colorScheme, |
| 25 | ["--trees-fg-override" as string]: "var(--contrast-foreground)", |
| 26 | }; |
| 27 | } |