n/a = we’ll use Chakra default theme settings

Foundations

Style KDS (Github) KDS (Figma)
Colors ✅ https://github.com/trykarat/kfc/blob/7c72e9c01db57eb09ecc1b56b4d12ebd7a7a09bc/packages/kds/src/theme/foundations/colors.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2?node-id=0%3A1
Typography ✅ https://github.com/trykarat/kfc/blob/develop/packages/kds/src/theme/foundations/textStyles.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2?node-id=2%3A2
Breakpoints ✅ https://github.com/trykarat/kfc/blob/7c72e9c01db57eb09ecc1b56b4d12ebd7a7a09bc/packages/kds/src/theme/foundations/breakpoints.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=56%3A1732
Spacing n/a ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=56%3A1733
Sizes n/a ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=57%3A1734
Border radius n/a ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=57%3A1735
Shadows ✅ https://github.com/trykarat/kfc/blob/develop/packages/kds/src/theme/foundations/shadows.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=69%3A2449

Forms

Component KDS (Github) KDS (Figma)
Button ✅ https://github.com/trykarat/kfc/blob/7c72e9c01db57eb09ecc1b56b4d12ebd7a7a09bc/packages/kds/src/theme/components/Button.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=48%3A305
Checkbox ✅ https://github.com/trykarat/kfc/blob/7c72e9c01db57eb09ecc1b56b4d12ebd7a7a09bc/packages/kds/src/theme/components/Checkbox.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=48%3A306
Input ✅ https://github.com/trykarat/kfc/blob/7c72e9c01db57eb09ecc1b56b4d12ebd7a7a09bc/packages/kds/src/theme/components/Input.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=48%3A307
Radio ✅ https://github.com/trykarat/kfc/blob/7c72e9c01db57eb09ecc1b56b4d12ebd7a7a09bc/packages/kds/src/theme/components/Radio.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=48%3A308
Select ✅ https://github.com/trykarat/kfc/blob/7c72e9c01db57eb09ecc1b56b4d12ebd7a7a09bc/packages/kds/src/theme/components/Select.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=48%3A309
Switch ✅ https://github.com/trykarat/kfc/blob/7c72e9c01db57eb09ecc1b56b4d12ebd7a7a09bc/packages/kds/src/theme/components/Switch.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=48%3A310
Textarea ✅ https://github.com/trykarat/kfc/blob/7c72e9c01db57eb09ecc1b56b4d12ebd7a7a09bc/packages/kds/src/theme/components/Textarea.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=48%3A311
...

Data Display

Component KDS (Github) KDS (Figma)
Badge ✅ https://github.com/trykarat/kfc/blob/7c72e9c01db57eb09ecc1b56b4d12ebd7a7a09bc/packages/kds/src/theme/components/Tag.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=48%3A318
List ⏳ ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=155%3A4791
Stat ✅ https://github.com/trykarat/kfc/blob/develop/packages/kds/src/theme/components/Stat.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=57%3A1737
Table ✅ https://github.com/trykarat/kfc/blob/develop/packages/kds/src/theme/components/Table.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=48%3A317
...

Feedback

Component KDS (Github) KDS (Figma)
Alert ✅ https://github.com/trykarat/kfc/blob/develop/packages/kds/src/theme/components/Alert.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=57%3A1739
Progress ⏳ ⏳
Spinner ⏳ ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=57%3A1742
Toast ✅ https://github.com/trykarat/kfc/tree/develop/packages/kds/src/components/Toast ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=57%3A1743

Overlay

Component KDS (Github) KDS (Figma)
Alert Dialog ✅ https://github.com/trykarat/kfc/blob/develop/packages/kds/src/theme/components/Modal.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=57%3A1745
Menu ⏳ ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=57%3A1746
Modal ✅ https://github.com/trykarat/kfc/blob/develop/packages/kds/src/theme/components/Modal.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=264%3A4448
Popover ✅ https://github.com/trykarat/kfc/blob/develop/packages/kds/src/theme/components/Popover.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=57%3A1748
...

Disclosure

Component KDS (Github) KDS (Figma)
Stat Accordion ✅ https://github.com/trykarat/kfc/tree/develop/packages/kds/src/components/StatAccordion ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=57%3A1750
Tabs ✅ https://github.com/trykarat/kfc/blob/develop/packages/kds/src/theme/components/Tabs.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=57%3A1751

Navigation

Component KDS (Github) KDS (Figma)
Breadcrumb ✅ https://github.com/trykarat/kfc/blob/develop/packages/kds/src/theme/components/Breadcrumb.ts ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=57%3A1753
Link ⏳ ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=57%3A1754

Media and Icons

Component KDS (Github) KDS (Figma)
Avatar ⏳ ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=57%3A1756
Icon ✅ https://github.com/trykarat/kfc/tree/develop/packages/kds/src/icons ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=57%3A1757

Custom

Component KDS (Github) KDS (Figma)
Date picker ✅ https://github.com/trykarat/kfc/tree/develop/packages/kds/src/components/DatePickerSingle, https://github.com/trykarat/kfc/tree/develop/packages/kds/src/components/DatePickerRange ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=264%3A4571
Card ✅ https://github.com/trykarat/kfc/tree/develop/packages/kds/src/components/Card ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=108%3A6265
MediaCard ✅ https://github.com/trykarat/kfc/tree/develop/packages/kds/src/components/MediaCard ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=737%3A6830
App Header ✅ https://github.com/trykarat/kfc/tree/develop/packages/kds/src/components/AppHeader ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=112%3A4455
Pagination ⏳ ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=132%3A4434
Page Header ✅ https://github.com/trykarat/kfc/tree/develop/packages/kds/src/components/PageHeader ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=1031%3A7668
Stepper ✅ https://github.com/trykarat/kfc/tree/develop/packages/kds/src/components/Stepper ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2-Universal?node-id=172%3A3477
Timeline ⏳ ✅ https://www.figma.com/file/Ffixwb48GsVvHZE0FUYDAm/DS2.0?node-id=162%3A5109
...