yirmea-ui

v0.1.0

Published

a month ago

Yirmea UI — design system Angular (thème professionnel chaleureux) : jetons clair/sombre, styles et composants standalone.

Downloads

0High
0Medium
0Low

yirmea

angular design-system ui-kit components theme dark-mode scss

Yirmea UI

Design system Angular extrait de Yirmea SFE — registre « professionnel chaleureux » : vert émeraude, surfaces légèrement verdies, micro-animations, thèmes clair et sombre. Aucune dépendance à une bibliothèque de composants.

Contenu

| Dossier | Rôle | |---|---| | styles/yirmea-ui.scss | Le design system complet : jetons (variables CSS clair/sombre) + classes (boutons, badges, cards, tables, formulaires, callouts, KPI, modales, toasts, navigation…) | | src/lib/ | Composants Angular standalone : IconComponent (56 icônes SVG), ModalComponent, EmptyStateComponent, ToastStackComponent, NotificationService, ThemeService | | tokens/yirmea-tokens.json | Jetons au format Tokens Studio, importables dans Figma |

Construire et publier

cd ui-kit
npm install
npm run build        # produit dist/ (ng-packagr, Ivy partial)
cd dist && npm publish   # ou npm pack pour un .tgz local

Pour un usage local sans registre npm :

npm run build
# puis dans votre projet :
npm install ../aimp/ui-kit/dist

Utiliser dans un projet Angular (≥ 21)

1. Les styles — dans src/styles.scss :

@use 'yirmea-ui/styles/yirmea-ui.scss';

2. Le thème — injectez ThemeService (le simple fait de l'injecter pose data-theme sur <html>) :

import { ThemeService } from 'yirmea-ui';

export class AppComponent {
  theme = inject(ThemeService);
  // theme.setTheme('dark' | 'light' | 'system')
}

3. Les composants :

import { IconComponent, ModalComponent, EmptyStateComponent, ToastStackComponent, NotificationService } from 'yirmea-ui';

<app-icon name="shield" [size]="16" />

<app-modal size="lg" title="Titre" subtitle="Sous-titre" (close)="open = false">
  contenu…
  <ng-container footer>
    <button class="btn btn-primary">Valider</button>
  </ng-container>
</app-modal>

<app-empty-state art="search" title="Aucun résultat" message="Essayez un autre terme." />

<!-- Une fois, à la racine de l'application : -->
<app-toast-stack />

inject(NotificationService).notify('Enregistré !');

4. Les classes CSS — quelques exemples du vocabulaire :

<button class="btn btn-primary btn-sm is-loading">…</button>
<span class="badge badge-success">Transmise</span>
<div class="callout callout-warning">…</div>
<div class="card kpi"><p class="kpi-label">CA</p><p class="kpi-value">12 M</p></div>
<div class="segmented"><button class="active">Toutes</button><button>Payées</button></div>

Importer les jetons dans Figma

Dans Figma, installez le plugin gratuit Tokens Studio for Figma.
Ouvrez le plugin → Settings → Import → chargez tokens/yirmea-tokens.json.
Trois sets apparaissent : global (typo, espacements, rayons), light et dark (couleurs, ombres). Activez global + un thème, puis « Styles & Variables → Export » pour générer les variables et styles Figma.

La police du kit est Inter (texte) et JetBrains Mono (code, montants).

Notes

Les sélecteurs restent app-* pour une compatibilité directe avec Yirmea SFE.
Le composant graphique (Highcharts) n'est pas inclus pour ne pas imposer la dépendance ; copiez frontend/src/app/shared/chart.component.ts si besoin.
ThemeService persiste le choix dans localStorage sous la clé yirmea.theme.

Published

Vulnerabilities

Links

Maintainers

Keywords