@guruhotel/aura-color-scale

🎨 Library to generate color scales for Aura UI

Usage no npm install needed!

<script type="module">
  import guruhotelAuraColorScale from 'https://cdn.skypack.dev/@guruhotel/aura-color-scale';
</script>

README

Aura Color Scale

Library to generate color scales for Aura UI

Quick Start

  1. Installation: Inside your project directory, install Aura Color Scale by running either of the following:
yarn add @guruhotel/aura-color-scale
# or
npm i @guruhotel/aura-color-scale
  1. Create a custom color scale based on the Aura color scale for Aura UI
import { newColorScale } from "@guruhotel/aura-color-scale";

//The first parameter refers to the default value needed for the scale (Aura UI handles it in scale 9) and the second parameter refers to the key by which it will be accessed in the Aura UI components.
const primaryColor = newColorScale("#343434", "primary");
  1. For projects using Aura UI (Frontend), simply propagate the color inside the Aura UI createTheme function. This way, you will have a new color scale available in Aura UI from $primary1 to $primary12.
import { AuraUIProvider, createTheme } from "@guruhotel/aura-ui";
import { newColorScale } from "@guruhotel/aura-color-scale";

function App({ Component }) {
  const primaryColor = newColorScale("#343434", "primary");

  const theme = createTheme({
    type: "light",
    theme: {
      colors: {
        ...primaryColor.colorScale,
      },
    },
  });

  return (
    <AuraUIProvider theme={theme}>
      <Component />
    </AuraUIProvider>
  );
}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT