kata-ai / Aksara Ui

aksara /ak·sa·ra/ noun
is a system of visual symbol, usually stamped on paper or other media (stone, wood, leaf, and fabric), to express thoughts and ideas.

Aksara is Kata.ai's design system. It contains foundations, voice and tone guidelines, component standards, and other guidelines that systematically improve quality, timeliness, and consistency to our product.

Aksara UI is an implementation of Aksara using the React framework. It is the true implementation of Aksara in raw code form, designed to communicate with users and bring delightful experiences. Aksara UI is the designation for Aksara React components.

Contributing

Aksara UI is developed by the help of developers like you! Please read our Contributing Guidelines to get started on developing Aksara UI.

This project is bound by a Code of Conduct.

Usage

Quickstart

Check out kata-ai/wicara-starter.

Prerequisites

Aksara UI requires styled-components v4+. First, install the core Aksara UI package, Aksara UI React icon library, and styled-components.

# yarn
$ yarn add styled-components @aksara-ui/core @aksara-ui/icons

# npm
$ npm install --save styled-components @aksara-ui/core @aksara-ui/icons

Then, you will need to apply the theme provider as well as the default global styles. Wrap your app inside the AksaraProvider to do so.

import { AksaraProvider } from '@aksara-ui/core';

export default function MyApp({ children }) {
  return <AksaraProvider>{children}</AksaraProvider>;
}

If you would like to use additional styles for AksaraProvider, add the disableInjection prop to AksaraProvider and add your custom styles as follows.

import { css } from 'styled-components';
import { AksaraProvider, injectGlobalStyles } from '@aksara-ui/core';

const styles = css`
  [data-reach-tooltip] {
    z-index: 1;
    pointer-events: none;
    position: absolute;
    padding: 0.25em 0.5em;
    box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
    white-space: nowrap;
    font-size: 85%;
    background: #f0f0f0;
    color: #444;
    border: solid 1px #ccc;
  }
`;

const { GlobalStyles } = injectGlobalStyles(styles);

export default function MyApp({ children }) {
  return (
    <AksaraProvider disableInjection>
      <GlobalStyles />
      {children}
    </AksaraProvider>
  );
}

Once you've applied the provider, you can use Aksara UI components in your app. See the example below.

Example

Aksara UI is built in React, with styling done in styled-components. To use these components, import them as follows:

// Example for `<Button />` component.

import * as React from 'react';
import { Button } from '@aksara-ui/core';

export default function Component() {
  return <Button>Push Me</Button>;
}

Read the Storybook for more examples.

Fonts

We use multiple fonts in Aksara UI:

• The system font stack, for all UI elements within the platform.
• The Inter font as our primary brand typeface.

Using brand fonts

First, you should install the brand fonts into your project.

# yarn
$ yarn add typeface-inter

# npm
$ npm install --save typeface-inter

Then, in any typography component (e.g. Text, Heading), you can use the brand token in fontFamily.

import * as React from 'react';
import { Heading } from '@aksara-ui/core';

export default function Component() {
  return (
    <Heading scale={700} fontFamily="brand">
      Heading Text
    </Heading>
  );
}

License

All packages in this repoare released under the Apache 2.0 license. Please note that some packages (like our fonts package) may contain third-party materials with different licences. Any third-party acknowledgements are outlined on the "Credits" section on each package's README.

Copyright (c) 2018 Kata.ai and/or contributors. All rights reserved.

Maintainers

• Resi Respati (@resir014) – Kata.ai