@Onega-UI / UI Kit for Angular
It is a modern and stylish UI kit that offers a wide range of UI components and elements to create professional and attractive websites.
Get started with @Onega-UI
Links
Installation
yarn add @onega-ui/{core,icons,styles,kit}
Import to styles.scss
@import "@onega-ui/icons";
@import "@onega-ui/styles";
@import "@onega-ui/styles";
Import to app.module.ts
import { CoreModule } from '@onega-ui/core';
@NgModule({
...
imports: [
...
CoreModule,
],
...
})
Themes
| Import | Attribute |
|---|---|
| @import "@onega-ui/styles"; | data-ong-theme="default" |
| @import "@onega-ui/styles/themes/rainbow"; | data-ong-theme="rainbow" |
| @import "@onega-ui/styles/themes/rainbow-soft"; | data-ong-theme="rainbow-soft" |
| @import "@onega-ui/styles/themes/tenderness"; | data-ong-theme="tenderness" |
| @import "@onega-ui/styles/themes/summer"; | data-ong-theme="summer" |
| @import "@onega-ui/styles/themes/twilight"; | data-ong-theme="twilight" |
| @import "@onega-ui/styles/themes/colorful"; | data-ong-theme="colorful" |
Customization CSS variables
:root {
--ong-color-light-bg: #FFFFFF;
--ong-color-light-text: #000000;
--ong-color-secondary-bg: #e2e2e2;
--ong-color-secondary-text: #000000;
--ong-color-warning-bg: #F2C46D;
--ong-color-warning-text: #000000;
--ong-color-danger-bg: #BF8275;
--ong-color-danger-text: #FFFFFF;
--ong-color-success-bg: #46592A;
--ong-color-success-text: #FFFFFF;
--ong-color-info-bg: #6997BF;
--ong-color-info-text: #FFFFFF;
--ong-color-primary-bg: #0367A6;
--ong-color-primary-text: #FFFFFF;
--ong-color-dark-bg: #000000;
--ong-color-dark-text: #FFFFFF;
--ong-base-size: 1rem;
--ong-radius-size: .75rem;
--ong-line-size: 1px;
--ong-opacity: .55;
--ong-margin-x-size: calc(var(--ong-base-size) * .75);
--ong-margin-y-size: calc(var(--ong-base-size) * .5);
--ong-padding-x-size: calc(var(--ong-base-size) * .75);
--ong-padding-y-size: calc(var(--ong-base-size) * .5);
--ong-font-family-sans-serif: -apple-system, Ubuntu, Roboto, Arial, sans-serif;
--ong-font-family-monospace: "Ubuntu Mono", Consolas, "Courier New", monospace;
--ong-font-weight: bolder;
--ong-line-height: 1.2;
--ong-font-size: var(--ong-base-size);
}