Kaia Design System

The Kaia Design System provides a set of reusable, consistent UI components, built to follow the Kaia Foundation's design guidelines. It includes components such as buttons, inputs, labels, and more, to ensure a unified design across all Kaia applications.

Requirements

• Node.js (version 16 or higher)
• Yarn package manager

Installation

To install the Kaia Design System package, run the following command:

yarn add @kaiachain/kaia-design-system

Usage

Once installed, you can start using the components by importing them into your project:

import { useState } from 'react'
import {
  KaThemeProvider,
  KaButton,
  KaText,
  useKaTheme,
} from '@kaiachain/kaia-design-system'

type ThemeType = 'light' | 'dark'

const Home = ({
  theme,
  setTheme,
}: {
  theme: ThemeType
  setTheme: (theme: ThemeType) => void
}) => {
  const { getTheme } = useKaTheme()

  return (
    <div style={{ backgroundColor: getTheme('gray', '10') }}>
      <KaText fontType="title/lg_700">Welcome to Kaia Design System</KaText>
      <KaButton
        onClick={() => {
          setTheme(theme === 'light' ? 'dark' : 'light')
        }}
      >
        Click Me
      </KaButton>
    </div>
  )
}

function App() {
  const [theme, setTheme] = useState<ThemeType>('light')

  return (
    <KaThemeProvider theme={theme}>
      <Home theme={theme} setTheme={setTheme} />
    </KaThemeProvider>
  )
}

export default App

Key Features

The Kaia Design System provides the following key components and utilities:

• KaIcon: A set of scalable SVG icons that ensure consistency and flexibility across the UI.
• KaLogo: The official Kaia Foundation logo in SVG format, optimized for scalability and clarity.
• KaButton & KaButtonProps: A versatile button component with customizable size, type, icons, and state options.
• KaCheckBox & KaCheckBoxProps: A customizable checkbox component for user input, with support for various states.
• KaTextInput & KaTextInputProps: A text input component that handles various states like error, disabled, and sizes.
• KaLabel & KaLabelProps: A flexible label component with multiple styles, including solid, pale, line, and more.
• KaRadio & KaRadioProps: A radio button component designed for selecting between options, customizable in size and label.
• KaText & KaTextProps: A core text component that adheres to the system's typography standards, with multiple font styles and sizes.
• KaSelectBox & KaSelectBoxProps: A select box component for dropdowns, supporting customizable values and states.
• useKaTheme: A hook to access and control the current theme (light or dark).
• font: Standardized typography settings for consistent font sizes, weights, and line heights.
• darkTheme: A predefined dark theme for low-light environments, providing better readability.
• lightTheme: A predefined light theme for bright environments, ensuring clarity and usability.

Theming

The Kaia Design System includes a theming mechanism, allowing you to switch between light and dark themes. You can easily toggle themes using the useKaTheme hook:

import { useKaTheme, KaRadio, KaText } from '@kaiachain/kaia-design-system';

function ThemeToggle() {
  const { theme, setTheme } = useKaTheme();

  return (
    <div>
      <KaText fontType="title/sm_700">Toggle Theme</KaText>
      <KaRadio selected={theme} value="light" onClick={() => setTheme('light')} />
      <KaText fontType="body/md_600">Light Theme</KaText>
      <KaRadio selected={theme} value="dark" onClick={() => setTheme('dark')} />
      <KaText fontType="body/md_600">Dark Theme</KaText>
    </div>
  );
}

Example

You can find a working example that demonstrates how to use the components and theming system of kaia-design-system. The example project includes various components such as buttons, checkboxes, inputs, and more, along with a theme toggle feature.

Running the Example Project

1. Clone the repository and navigate to the example project directory:

   git clone https://github.com/kaiachain/kaia-design-system.git
   cd kaia-design-system/example

2. Install dependencies using yarn:

   yarn install

3. Start the development server:

   yarn dev

4. Explore the various components and features provided by kaia-design-system directly in your browser.

You can view the example source code in the example directory of the kaia-design-system/example repository.

Development

Local Development and Linking

While developing the Kaia Design System locally, you can link the package to an example project to see live updates:

1. In the root directory of kaia-design-system, create a symbolic link:

   yarn link

2. In the example project, link the design system:

   yarn link "@kaiachain/kaia-design-system"

3. Build the design system to apply changes:

   yarn build

Now, any changes made in the design system will reflect in the example project after building.

Contributing

Contributions are welcome! Please follow the code style and run yarn lint before submitting pull requests.

License

This project is licensed under the MIT License.