chakra-ui / chakra-ui-vue

⚡️ Build scalable and accessible Vue.js applications with ease.

Home Page:https://vue.chakra-ui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Picking letterSpacing values from theme

definiteIymaybe opened this issue · comments

Describe the bug

Hi! I may be missing something, but I can't get letterSpacing prop values to be looked up from theme's letterSpacings section. Any string value of the letterSpacing prop seems to be pushed to CSS as letter-spacing verbatim.

To Reproduce

  1. Go to Vue Starter starter example from the docs (or my fork).
  2. Add letterSpacing="tight" to the CHeading element.
  3. Look up CSS props of the rendered h2 element.

Expected behavior

Expected tight to be transformed to -0.025em as per theme.letterSpacings.tight.

Screenshots

Chakra UI Vue starter bevahior:

image


Chakra UI example with letterSpacing="tight"on Textelement:

image