Style

style

Base style for Pane. Installs the shared dependencies and the --pane-* design tokens — blur, saturation, tint, border, highlight and shadow — for light and dark.

pnpm dlx shadcn@latest add "https://pane.theui.company/r/pane-style.json"

Sign In

Style

style

Base style for Pane. Installs the shared dependencies and the --pane-* design tokens — blur, saturation, tint, border, highlight and shadow — for light and dark.

pnpm dlx shadcn@latest add "https://pane.theui.company/r/pane-style.json"

Light Mode

--pane-fg:

var(--foreground)

--pane-blur-regular:

12px

--pane-blur-clear:

5px

--pane-saturation:

1.7

--pane-tint-regular:

rgba(255, 255, 255, 0.26)

--pane-tint-clear:

rgba(255, 255, 255, 0.08)

--pane-nested-regular:

rgba(255, 255, 255, 0.4)

--pane-nested-clear:

rgba(255, 255, 255, 0.2)

Light Mode

--pane-fg:

var(--foreground)

--pane-blur-regular:

12px

--pane-blur-clear:

5px

--pane-saturation:

1.7

--pane-tint-regular:

rgba(255, 255, 255, 0.26)

--pane-tint-clear:

rgba(255, 255, 255, 0.08)

--pane-nested-regular:

rgba(255, 255, 255, 0.4)

--pane-nested-clear:

rgba(255, 255, 255, 0.2)

--pane-border-width:

0.5px

--pane-border-regular:

rgba(255, 255, 255, 0.85)

--pane-border-clear:

rgba(255, 255, 255, 0.6)

--pane-tint-accent:

rgba(52, 199, 89, 0.82)

--pane-border-accent:

rgba(255, 255, 255, 0.7)

--pane-knob:

rgba(255, 255, 255, 0.92)

--pane-highlight:

rgba(255, 255, 255, 0.85)

--pane-shadow:

rgba(0, 0, 0, 0.1)

Dark Mode

--pane-tint-regular:

rgba(28, 28, 32, 0.3)

--pane-tint-clear:

rgba(18, 18, 22, 0.12)

--pane-nested-regular:

rgba(255, 255, 255, 0.12)

--pane-nested-clear:

rgba(255, 255, 255, 0.07)

--pane-border-regular:

rgba(255, 255, 255, 0.14)

--pane-border-clear:

rgba(255, 255, 255, 0.1)

--pane-tint-accent:

rgba(48, 209, 88, 0.75)

--pane-border-accent:

rgba(255, 255, 255, 0.24)

--pane-knob:

rgba(255, 255, 255, 0.95)

--pane-highlight:

rgba(255, 255, 255, 0.22)

--pane-shadow:

rgba(0, 0, 0, 0.5)