Aura Design System

Getting started

Welcome to the developer documentation for Aura Design System & Next Js. Tailored for building Garima's apps. Using the Aura like a space unit. Each object has a halo of light that surrounds it, it's Aura.

Before you start - Disclaimer

This library is CSS centric with Object-Oriented CSS (OOCSS) and Atomic Desing metodology.

Instalation

Inside your React project directory, install Aura Desing System:

npm i aura-design
Terminal
Copy

Use

import "aura-design/style.css";

function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}

export default MyApp;

style.css exposes css via style field in package.json, will apply to all pages and components in your application.

If you want to change any aura token of Aura design to create your own theme, you can create a public/style.css and replace the aura tokens for whatever you want.

/* ./public/style.css */

*:root {
--aura-font-stack: "Inter",-apple-system,BlinkMacSystemFont,
"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans",
"Droid Sans","Helvetica Neue",sans-serif;
--aura-font-quotes: serif;
--aura-snow: #fafafa;
--aura-purple: #e8ebfe;
--aura-white: #fff;
--aura-black: #000;
--aura-orange: #feefe8;
--aura-orange-rose: #fee8ef;
--aura-pink: #fee8fc;
--aura-pink-purple: #f3e8fe;
--aura-blue: #e8f7fe;
--aura-teal-green: #e8fef7;
--aura-green: #e8feea;
--aura-lemon-green: #f3fee8;
--aura-yellow: #fefbe8;
--aura-cold-grey: #e8e7ed;
--aura-grey: #f6f7f9;
--aura-bg: var(--aura-white);
--aura-accents-10: #030303;
--aura-accents-9: #191919;
--aura-accents-8: #323232;
--aura-accents-7: #4b4b4b;
--aura-accents-6: #646464;
--aura-accents-5: #7d7d7d;
--aura-accents-4: #969696;
--aura-accents-3: #afafaf;
--aura-accents-2: #c8c8c8;
--aura-accents-1: #f7f7f7;
--aura-accents-0: #fafafa;
--aura-module: var(--aura-accents-0);
--aura-dark: var(--aura-white);
--aura-accents-primary: var(--aura-black);
--aura-accents-secondary: #0882ba;
--aura-accents-success: #08ba82;
--aura-accents-success-bg: var(--aura-teal-green);
--aura-accents-info: #8b9afa;
--aura-accents-info-bg: var(--aura-purple);
--aura-accents-warning: #baa208;
--aura-accents-warning-bg: var(--aura-yellow);
--aura-accents-danger: #ba4108;
--aura-accents-danger-bg: var(--aura-orange);
--aura-accents-radius: var(--aura-radius);
--aura-input-radius: var(--aura-radius);
--aura-button-radius: var(--aura-radius);
--aura-input-bg: var(--aura-grey);
--aura-input-placeholder-color: rgba(0,0,0,0.2);
--aura-radius: 13px;
--aura-link-color: var(--aura-fg);
--aura-opacity: .5;
--aura-selector: #d1fdef;
--aura-loader: #d1fdef;
--aura-sprite: url(/sprite_glyphs.png);
}

Then you should import your custom style in _app.js

import "aura-design/style.css";
import "public/style.css";

function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}

export default MyApp;