Aura Design System

Menu

Getting started

Welcome to the developer documentation for Aura Design System. 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

Use

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="path/to/aura-desing/style.css" />
  </head>
  <body>
    
  </body>
</html>

style.css exposes css via style field in package.json, if you have another tool for CSS that identifies this field you can remove the import from index.html

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

*: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);
}