Angular-UI

Angular-UI is a library of reusable Angular components, developed following Atomic Design principles and using style conventions specific to the Angular-UI library. The Storybook documentation of the library is hosted at Circutor Angular UI Storybook.

📘 About Circutor Angular UI

Circutor Angular UI is an Angular library created with the aim of making reusable UI components compliant with the Circutor Design System.

📦 Installation

To install the library in your Angular project, run:

npm install @circutor/angular-ui
npm install @circutor/ui

🚀 Getting Started

To start using the library, import the standalone component in your Angular application and use it in your template:

app.component.ts

import { Component, inject } from '@angular/core';
import { CdsAvatarComponent } from '@circutor/angular-ui';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CdsAvatarComponent],
  template: `
      <cds-avatar type="secondary" label="A"></cds-avatar>
    `
})
export class AppComponent {
  title = 'my-app';
}

styles.scss

@import './cds-config.scss';
@import '@circutor/ui/scss/common/cds-bundle';

cds-config.scss

/// Set the config variables to create the font-face
/// ======================================================
$config-typography-400-path: '@circutor/ui/font/NettoPro.otf';
$config-typography-400-format: 'opentype';
$config-typography-400-font-family: 'NettoPro' !default;
$config-typography-400-font-weight: 400;

$config-typography-700-path: '@circutor/ui/font/NettoProBold.otf';
$config-typography-700-format: 'opentype';
$config-typography-700-font-family: 'NettoProBold' !default;
$config-typography-700-font-weight: 400;

/// Set the path variables of Circutor Icons location
/// ======================================================
$config-icons-path-eot: '@circutor/ui/cdsicons/CDSIcons.eot';
$config-icons-path-ttf: '@circutor/ui/cdsicons/CDSIcons.ttf';
$config-icons-path-woff: '@circutor/ui/cdsicons/CDSIcons.woff';
$config-icons-path-svg: '@circutor/ui/cdsicons/CDSIcons.svg';

$_light-accents: (
        'primary': #e40040,
        'danger': #a9322c,
        'secondary': #42505c,
);
$_dark-accents: (
        'primary': #f60845,
        'danger': #a9322c,
        'secondary': #a1b4bf,
);

$cds-size-factor: 1;

$cds-global-border-radius: 999rem;