Solar Components

This is an implementation of Accera's Design System in WebComponents.

Packages 📦

Getting Started 🔌

With JS

Pure JS & HTML

Put a script tag similar to this in the head of your index.html:

<script src='https://unpkg.com/@accera/solar-components.core/dist/solar.js'></script>

With Bundlers and Transpilers

In your project, run npm install @accera/solar-components.core --save

import { applyPolyfills, defineCustomElements } from '@accera/solar-components.core/dist/loader';
applyPolyfills().then(() => {
  defineCustomElements(window);
});

With Angular

Coming Soon

With React

Coming Soon

Theming 💅

We use CSS variables to work with themes. You can customize colors declaring it in a :root block in your main CSS file:

:root {
  --color-primary-normal: #FF5E00;
  --color-primary-normal-rgb: 255, 94, 0;
  --color-primary-dark: #cc4b00;
  --color-primary-dark-rgb: 204, 75.2, 0;
  --color-primary-light: #ff7e33;
  --color-primary-light-rgb: 255, 126.2, 51;
  --color-secondary-normal: #0080FF;
  --color-secondary-normal-rgb: 0, 128, 255;
  --color-secondary-dark: #0066cc;
  --color-secondary-dark-rgb: 0, 102.4, 204;
  --color-secondary-light: #3399ff;
  --color-secondary-light-rgb: 51, 153.4, 255;
}

Check out the _default.theme.scss to discover all the theme variables that you can customize.

Note that you need to define the --color-<color-name>-<brightness>-rgb for each color that you customize.

Extending your Style 👌

Optionally, you can apply the global style of Solar in your application putting this code in the head of your index.html.

<link rel="stylesheet" href="/node_modules/@accera/solar-components.core/dist/solar.css">

Or import it in your CSS/SCSS using:

@import "node_modules/@accera/solar-components.core/dist/solar.css";

This will add some features like:

• CSS Reset
• Webkit scrollbar styles
• Bootstrap 4's Layout tools
• Animations
• Skeletons

You can also use the variables defined in this lib in your SCSS:

@import "node_modules/@accera/solar-components.core/collection/scss/variables";

Contributing 👋

Thanks for your interest in contributing ✨! Read up on our guidelines for contributing to know how help us 😄.