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.
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.
Check out kata-ai/wicara-starter.
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.
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.
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.
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>
);
}
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.