上篇完成 font family 的設定，今天使用 textStyles 來完成設計稿上的 Typography

設計稿

Text Styles

textStyles 可以很方便地去管理一系列的字級 Typography
我們可以在 text style 定義以下 CSS屬性

• Font family, weight, and size
• Line height
• Letter spacing
• Text decoration (strikethrough and underline)
• Text transform (uppercase, lowercase, and capitalization)

// 我習慣創建一支 textStyles.js 管理
const textStyles = {
  heading1: {
   //按造文件去規劃 響應式
    fontSize: { base: '24px', lg: '28px' },
    lineHeight: '1.6',
    fontWeight: 500,
    letterSpacing: '.05em',
  },
};

// 2. 一樣引入到 theme.js 裡頭
import textStyles from 'theme/textStyles';

const customTheme = {
  colors,
  textStyles,
}

// 3. 使用
function Example() {
  return <Text textStyle='heading1'>This is a box</Text>
}

依序按照設計稿上實作

比較特別的地方，這份系統上有同時規劃不同裝置大小時的字級
ex: heading1 size: 28px | 24px
Chakra UI 響應式的處理方式，讓我們很容易達

fontSize: { base: '24px', lg: '28px' }

總結:
目前已經完成顏色和文字主題設定，已經完成了客製主題的第一步。
已經可以開始從主題中去客製元件的樣式，或是繼續完善其他設計 Token 像是 Spacing、Shadow等

而下一篇將會先介紹 Semantic Token 的應用