Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/accera-tech/solar-components
Web Components Implementation of Solar Design System
https://github.com/accera-tech/solar-components
design-system stencil stenciljs ui webcomponents
Last synced: 2 months ago
JSON representation
Web Components Implementation of Solar Design System
- Host: GitHub
- URL: https://github.com/accera-tech/solar-components
- Owner: accera-tech
- License: mit
- Created: 2018-11-30T16:20:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-03T12:57:43.000Z (almost 4 years ago)
- Last Synced: 2024-07-20T04:15:50.162Z (3 months ago)
- Topics: design-system, stencil, stenciljs, ui, webcomponents
- Language: TypeScript
- Homepage:
- Size: 15.8 MB
- Stars: 18
- Watchers: 15
- Forks: 6
- Open Issues: 47
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Solar Components
[](https://www.npmjs.com/package/@accera/solar-components.core)
This is an implementation of [Accera's Design System](https://design.accera.com.br) in WebComponents.
## Packages 📦
| Project | Package | Doc |
| ------- | ------- |:-----:|
| **Core** | [`@accera/solar-components.core`](https://www.npmjs.com/package/@accera/solar-components.core) | [`README.md`](core/README.md)
| **Angular** | [`@accera/solar-components.angular`](https://www.npmjs.com/package/@accera/solar-components.angular) | [`README.md`](angular/README.md)
| **React** | [`@accera/solar-components.react`](https://www.npmjs.com/package/@accera/solar-components.react) | [`README.md`](react/README.md)
## Getting Started 🔌
### With JS
#### Pure JS & HTML
Put a script tag similar to this in the `head` of your `index.html`:
```html
```
#### With Bundlers and Transpilers
In your project, run `npm install @accera/solar-components.core --save`
```js
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:
```css
: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](/core/src/theme/_default.theme.scss) to discover all the theme variables that you can customize.
Note that you need to define the `--color---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`.
```html
```
Or import it in your CSS/SCSS using:
```scss
@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](https://getbootstrap.com.br/docs/4.1/layout/overview/)
- [Animations](/core/src/global/css/_animations.scss)
- [Skeletons](/core/src/global/css/_skeletons.scss)
You can also use the variables defined in this lib in your SCSS:
```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](/.github/CONTRIBUTING.md) to know how help us 😄.