# 牙技

## [UI kit](https://www.figma.com/file/xeA3LjI4Uq6G7KZFC63TUE/UI-Kit?node-id=122%3A14712&t=H7zCTki6lDIhD7DH-0)

:::warning
工程師
* W00 許瀚升 #3315
:::

*

---

### 檔案命名方式
* kit+樣式名稱設定
* 例如：kitTab、kitCard、kitNav

### 字型引入

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

:::info
備註：
* [google-fonts-的加速方式 ➡](https://blog.gslin.org/archives/2020/02/23/9432/google-fonts-%E7%9A%84%E5%8A%A0%E9%80%9F%E6%96%B9%E5%BC%8F/)
:::

### css 變數

:root {
  --primaryColor: #2b90dc;
  --secondaryColor: #096dd9;
  --primaryColor_15: rgba(43, 144, 220, 0.15);
  --backgroundColor: #f8fafc;
  --successColor: #52c41a;
  --successColor2: #b7eb8f;
  --successColor3: #f6ffed;
  --errorColor: #ff4d4f;
  --warningColor: #fab97d;
  --informationColor: #fffbe6;
  --neutralColor: #fff;
  --neutralColor2: #d9d9d9;
  --neutralColor3: #959595;
  --neutralColor4: #2a3042;
  --textColor_15: rgba(0, 0, 0, 0.85);
  /*font size*/
  --fontSize18: 1.125rem;
  --fontSize20: 1.25rem;
  --fontSize24: 1.5rem;
}

使用方式

color: var(--primaryColor)

---

### UIkit工作分野
* 寶弟
1. 框架
2. color
3. Button
4. typography
5. Nav
6. page
7. table
* 玟諭
1. cards
2. step
* Lize
1. Form
2. Form 下拉輸入資料，找工程師餐雄
3. pop up
4. messsage bar
* 麥莉
1. icon
2. [icon figma](https://www.figma.com/file/iWdnXAZaBzlweNOnSek47P/UI-Kit-(Copy-3%2F7--U10)?node-id=1110%3A20143&t=4XcWOguXukG2TNt9-0)
* 尚未分發
2. image

### UIkit工作分野
* Veela:紅框內都是我的～

### sample
1. [step sample ](https://codepen.io/u00hyui/pen/poVogYP)
2. [table + 展開/收合資料](https://hywebu00.github.io/2018_K00_librarysearch/cp01_%E8%A9%B3%E7%9B%AE%E9%A0%81.html)