Aleo UI

This is the UI kit for all of Aleo's products and acts as a central source of truth for the design language.

Installation

Simply run npm i @aleohq/ui to install the package via NPM.

Usage

This package styles Ant Design components and as such you only need to import the theme you're using. You do not need to import antd's styles.

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import '@aleohq/ui/dist/blue.css'; // <-- Import here. You can import the blue, red, or green theme. More coming soon.
import './index.css';

// Rest of your file

You can also use Aleo UI's palette to color your app.

// Example.tsx
import React from 'react';
import styled from 'styled-components';
import { palette, gradients } from '@aleohq/ui/dist/palette';

export const ColoredCard = styled.div`
    background: ${gradients.lightBlueGradient};
    color: ${palette.gray8};
`;

Themes

Currently, this is a list of supported themes:

Contributing

The sourcecode is found in ./src and the demo React app is found in ./demo.

• The color variables are found in ./src/style/variables/palette.less.
• The theme files are found in ./src. If you add a new theme file, make sure to add it to the webpack.config.js.
• If you need to override Ant Design styles, put them in ./src/style/components. Make sure you add your new file to ./src/style/components/index.less.
• We use Storybook to preview the design. To preview a new component, create a new Story in ./demo/src/stories. Follow the Storybook documentation.

Q&A

Q: Why didn't you use [example tooling]?

A: If you know something better than webpack for compiling less into css AND supports multiple input files AND extracts the css instead of shoving it all into a js file, shoot it my way.

Q: Why didn't you use SCSS?

A: Would if I could, buddy. Unfortunately, Ant Design is written in Less and to customize their variables you either need to use Less or customize React's webpack config. Good luck with either.

Q: I found a bug!

A: That isn't a question. But you can report bugs directly to me (Jackson) on Slack. That's the quickest way to get my attention.

Q: I'm still confused why you're using webpack for Less compilation and tsc for that one palette.ts file?

A: Dude, if you can do it better, PLEASE make a pull request. I've spent a lot of time struggling with getting it to work.

Q: Why are the palette colors written twice in two different files?

A: I could have done it the "right" way and have a script that generates a CSS and TS file based on a single list of colors, but in reality, the palette isn't going to change, and if it does, it takes like 3 minutes to update the TS file. Again, if you think it's a big deal, please make a pull request.

Q: The included themes aren't what I need. How do I make a new one?

A: Writing a new theme is pretty simple. Follow the Contributing section of this README if you want to do it yourself. Alternatively, shoot me (Jackson) a message on Slack with your desired Primary color and any other customizations.