已經完成 Button 基本樣式 ，還要設定不同狀態的樣式

補充一下 Chakra UI 原本預設的 UI 元件大部分都有選中狀態(focus)的醒目提示，Button 也是，為了清除這個效果，在 baseStyle _focus 中 ring 設為 0

const Button = {
  baseStyle: {
    // css selecotr focus ring 設為 0
    _focus: {
      ring: '0px',
    },
  },
 }

除了 _focus 外還有 _hover _active 互動效果可以添加
也由於 override 一大部分原本 Button 的樣式後，colorScheme 魔法會失效(暫時還找不到解決方法)
我們就得把 _hover _active 樣式也一併在各個 variant 完成

我推薦再直接寫入 _hover _active 樣式前，先把他們的顏色寫入 semanticTokens 裡

const semanticTokens = {
  colors: {
    'btn-primary-bg': {
      default: tokens.colors.light['btn-primary-bg'],
      _dark: tokens.colors.dark['btn-primary-bg'],
    },
    'btn-primary-hover-bg': {
      default: tokens.colors.light['btn-primary-hover-bg'],
      _dark: tokens.colors.dark['btn-primary-hover-bg'],
    },
     'btn-primary-active-bg': {
      default: tokens.colors.light['btn-primary-active-bg'],
      _dark: tokens.colors.dark['btn-primary-active-bg'],
    },
  },
};

在 Primary 中做使用，這樣無論是深淺主題，我們都設定好了它三個狀態的樣式變化

variants: {
    primary: {
      bgColor: 'btn-primary-bg',
      color: 'fg-default',
      _hover: {
        bgColor: 'btn-primary-hover-bg',
      },
      _active: {
        bgColor: 'btn-primary-active-bg',
      },
    },
}

補充下 Chakra UI 上常用的 Pseudo