@clanwolf/ui-kit

v2.1.1

Published

12 days ago

Angular UI Kit library for ASCard

0High
0Medium
0Low

ascard_passy

angular ui kit components library theme design-system

UiKit

Angular UI Kit library for ASCard (@clanwolf/ui-kit).

Theme / Shared Styles

A shared SCSS theme (colors, mixins, utility classes, scrollbar, loading screen, fly-in/out animations and custom fonts) is shipped under styles/. Import it once in your app's global stylesheet:

// styles.scss
@use "@clanwolf/ui-kit/styles" as theme;

This provides, among others:

Color variables/mixins: theme.$accent, theme.$bg-primary, theme.$text-primary, theme.theme-bg, ...
Typography variables: theme.$font-family-base (default "Quantico", sans-serif), theme.$font-family-heading (default "Anta", sans-serif)
Utility classes: .theme-panel, .text-glow, .btn-theme-primary, .btn-theme-secondary, .theme-grid, .border-highlight, .overlay, .overlay-focus, .overlay-highlight, .scanner-effect, .distortion-enter, .crt-distortion-enter, .list-btn-primary, .theme-font-base, .theme-font-heading
Scrollbar styling: .theme-scrollbar
Dialog animations: .fly-in-dialog-right, .fly-out-dialog-right, .fly-in-dialog-left, .fly-out-dialog-left
Custom fonts Anta and Quantico (registered via @font-face)

Using the shipped typography (Anta / Quantico)

@use-ing the theme automatically registers the @font-face rules for the shipped fonts Quantico (body text) and Anta (headings). The library itself does not apply any font to body/html — you decide where to apply it in your app:

// styles.scss
@use "@clanwolf/ui-kit/styles" as theme;

html,
body {
  font-family: theme.$font-family-base; // "Quantico", sans-serif
}

h1, h2, h3, h4 {
  font-family: theme.$font-family-heading; // "Anta", sans-serif
}

Or, without touching Sass variables at all, just use the utility classes on any element:

<body class="theme-font-base">
  <h1 class="theme-font-heading">Title</h1>
</body>

Overriding the font with your own

Only needed if you want to replace Anta/Quantico with a different font. Override $font-family-base / $font-family-heading via Sass module configuration when you @use the theme (this also affects ui-kit-internal usages like uikit-loading-bar):

// styles.scss
@use "@clanwolf/ui-kit/styles" as theme with (
  $font-family-base: "'Roboto', sans-serif",
  $font-family-heading: "'Roboto', sans-serif"
);

with (...) is plain Sass module configuration syntax (not Angular-specific): every variable declared with !default in the used module can be overridden this way from the outside, without forking the partial. Make sure Roboto (or whichever font you use) is actually loaded in your app (e.g. via your own @font-face/Google Fonts), since the library won't provide it.

Alternatively, just set your own rule after the @use — no module configuration needed:

@use "@clanwolf/ui-kit/styles" as theme;

html,
body {
  font-family: "Roboto", sans-serif;
}

Components

uikit-button – basic button component
uikit-asset-image – unified image component with predefined AssetSizes (XXS…XL)
uikit-loading-bar – fullscreen loading indicator (customizable via [text] input)

`uikit-asset-image`

The library does not ship any images — provide your own asset path (or a full URL) via [src]. Sizing is controlled via the AssetSize enum (min-height/max-height); you can also pass a plain CSS length string instead.

import { Component } from '@angular/core';
import { AssetImageComponent, AssetSize } from '@clanwolf/ui-kit';

@Component({
  selector: 'app-pilot-card',
  standalone: true,
  imports: [AssetImageComponent],
  templateUrl: './pilot-card.component.html',
})
export class PilotCardComponent {
  protected readonly AssetSize = AssetSize;
  pilotImage = 'assets/images/pilots/pilot-01.png';
}

<uikit-asset-image
  [src]="pilotImage"
  [size]="AssetSize.MD"
  [alt]="'Pilot Portrait'"
></uikit-asset-image>

| AssetSize | Value | |---|---| | XXS | 2rem | | XS | 3rem | | SM | 5rem | | MD | 8rem | | LG | 10rem | | XL | 12rem |

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the library, run:

ng build ui-kit

This command will compile your project, and the build artifacts will be placed in the dist/ directory.

Publishing the Library

Once the project is built, you can publish your library by following these steps:

Navigate to the dist directory:
```
cd dist/ui-kit
```
Run the npm publish command to publish your library to the npm registry:
```
npm publish
```

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme