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-blur:

12px

--pane-blur-default:

5px

--pane-blur-transparent:

0px

--pane-saturation:

1.7

--pane-tint-blur:

rgba(255, 255, 255, 0.26)

--pane-tint-default:

rgba(255, 255, 255, 0.08)

--pane-tint-transparent:

rgba(255, 255, 255, 0)

--pane-blur-overlay:

Light Mode

--pane-fg:

var(--foreground)

--pane-blur-blur:

12px

--pane-blur-default:

5px

--pane-blur-transparent:

0px

--pane-saturation:

1.7

--pane-tint-blur:

rgba(255, 255, 255, 0.26)

--pane-tint-default:

rgba(255, 255, 255, 0.08)

--pane-tint-transparent:

rgba(255, 255, 255, 0)

--pane-blur-overlay:

24px

--pane-tint-overlay:

rgba(255, 255, 255, 0.76)

--pane-nested-blur:

rgba(255, 255, 255, 0.4)

--pane-nested-default:

rgba(255, 255, 255, 0.2)

--pane-nested-transparent:

rgba(255, 255, 255, 0)

--pane-border-width:

0.5px

--pane-border-blur:

rgba(255, 255, 255, 0.85)

--pane-border-default:

rgba(255, 255, 255, 0.6)

--pane-border-transparent:

rgba(255, 255, 255, 0.6)

--pane-accent:

#34c759

--pane-accent-foreground:

#ffffff

--pane-accent-opacity:

82%

--pane-accent-text:

#248a3d

--pane-border-accent:

rgba(255, 255, 255, 0.7)

--pane-destructive:

#ff3b30

--pane-destructive-text:

#d70015

--pane-tinted-opacity:

16%

--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-blur:

rgba(28, 28, 32, 0.3)

--pane-tint-default:

rgba(18, 18, 22, 0.12)

--pane-tint-transparent:

rgba(18, 18, 22, 0)

--pane-tint-overlay:

rgba(28, 28, 32, 0.76)

--pane-nested-blur:

rgba(255, 255, 255, 0.12)

--pane-nested-default:

rgba(255, 255, 255, 0.07)

--pane-nested-transparent:

rgba(255, 255, 255, 0)

--pane-border-blur:

rgba(255, 255, 255, 0.14)

--pane-border-default:

rgba(255, 255, 255, 0.1)

--pane-border-transparent:

rgba(255, 255, 255, 0.1)

--pane-accent:

#30d158

--pane-accent-foreground:

#ffffff

--pane-accent-opacity:

75%

--pane-accent-text:

#30db5b

--pane-border-accent:

rgba(255, 255, 255, 0.24)

--pane-destructive:

#ff453a

--pane-destructive-text:

#ff6961

--pane-tinted-opacity:

22%

--pane-knob:

rgba(255, 255, 255, 0.95)

--pane-highlight:

rgba(255, 255, 255, 0.22)

--pane-shadow:

rgba(0, 0, 0, 0.5)

CSS