Interaction Tokens

theme

Shared interaction-state tokens: surface-relative hover/active overlays (bg-hover, bg-active), the selected fill, the see-through secondary-button tint (--tint, --tint-hover), the destructive-light ground, the --overlay RGB triplet, the --focus-ring color, and the base-layer :focus-visible fallback ring.

pnpm dlx shadcn@latest add "https://www.fluidfunctionalism.com/r/tokens.json"

Sign In

Interaction Tokens

theme

Shared interaction-state tokens: surface-relative hover/active overlays (bg-hover, bg-active), the selected fill, the see-through secondary-button tint (--tint, --tint-hover), the destructive-light ground, the --overlay RGB triplet, the --focus-ring color, and the base-layer :focus-visible fallback ring.

pnpm dlx shadcn@latest add "https://www.fluidfunctionalism.com/r/tokens.json"

Light Mode

--hover:

rgb(0 0 0 / 0.04)

--active:

rgb(0 0 0 / 0.07)

--selected:

#D4D4D4

--destructive-light:

#FEF2F2

--overlay:

0 0 0

--focus-ring:

#6B97FF

--tint:

rgb(0 0 0 / 0.08)

--tint-hover:

rgb(0 0 0 / 0.065)

Dark Mode

--hover:

rgb(255 255 255 / 0.06)

--active:

rgb(255 255 255 / 0.1)

--selected:

#525252

--destructive-light:

#450A0A

--overlay:

255 255 255

--tint:

rgb(255 255 255 / 0.25)

--tint-hover:

rgb(255 255 255 / 0.2)

Theme

--color-hover:

var(--hover)

--color-active:

var(--active)

--color-selected:

var(--selected)

--color-destructive-light:

var(--destructive-light)

CSS

Light Mode

--hover:

rgb(0 0 0 / 0.04)

--active:

rgb(0 0 0 / 0.07)

--selected:

#D4D4D4

--destructive-light:

#FEF2F2

--overlay:

0 0 0

--focus-ring:

#6B97FF

--tint:

rgb(0 0 0 / 0.08)

--tint-hover:

rgb(0 0 0 / 0.065)

Dark Mode

--hover:

rgb(255 255 255 / 0.06)

--active:

rgb(255 255 255 / 0.1)

--selected:

#525252

--destructive-light:

#450A0A

--overlay:

255 255 255

--tint:

rgb(255 255 255 / 0.25)

--tint-hover:

rgb(255 255 255 / 0.2)

Theme

--color-hover:

var(--hover)

--color-active:

var(--active)

--color-selected:

var(--selected)

--color-destructive-light:

var(--destructive-light)

CSS