@der-reiskoch/khao-malet
v6.3.2
Published
The 'Khao Malet' Design System
Readme
Khao Malet Design System
About the Name
"Malet Khao" (เมล็ดข้าว) is Thai and means "grain(s) of rice". As this design system is the base of my component library Khao UI i used the thai name in reverse order.
System
Visually, the Khao Malet system follows the current design of Der Reiskoch.
The design system is based on Material 3.
Design tokens
Token naming is based on Material Web.
All tokens are prefixed with --khao- to prevent naming clashes.
Types of tokens
- Reference tokens
- prefixed with
--khao-ref- - only assigned to system tokens, never used in components directly
- prefixed with
- System tokens
- prefixed with
--khao-sys-
- prefixed with
- Component tokens
- prefixed with
--khao-<component-name>-, e.g.--khao-button-
- prefixed with
Read more about types of tokens.
Commands/Scripts
| Script | Description |
| --------------------------- | ----------------------------------------------------------- |
| npm run storybook | Runs Storybook in Dev Mode |
| npm run storybook:build | Builds the storybook |
| npm run changeset:add | Adds a new changeset for tracking changes in the monorepo. |
| npm run changeset:version | Creates a new version based on the current changesets. |
| npm run changeset:publish | Publishes the versioned changesets to the package registry. |