Teddy VERHAEGHE
Repositories Projects Packages Public Activity Starred Repositories

@yllygrove/angular-themes (0.0.1)

Published 2025-12-16 22:55:09 +01:00 by verhaegheteddy

Installation

@yllygrove:registry=
npm install @yllygrove/angular-themes@0.0.1
"@yllygrove/angular-themes": "0.0.1"

About this package

@yllygrove/angular-themes

Système de thèmes minimal basé sur SCSS pour les composants YllyGrove. Alternative légère au système default-theme, optimisée pour les performances et la simplicité d'usage.

🎯 Philosophie

  • Performance optimale : CSS compilé à la build, pas de runtime JavaScript
  • Simplicité : API SCSS moderne avec @use et @forward
  • Personnalisation facile : Override des variables SCSS avec with
  • Compatibilité : Génère les custom properties CSS attendues par les composants

📦 Installation

npm install @yllygrove/angular-themes

🚀 Usage rapide

Import du thème minimal

@use '@yllygrove/angular-themes/minimal';

Import avec personnalisation

@use '@yllygrove/angular-themes/minimal' with (
  $primary: #e11d48,
  $primary-dark: #be185d,
  $radius-sm: 6px
);

Import d'un thème complet

// Thème clair
@use '@yllygrove/angular-themes' with ($theme: 'light');

// Thème sombre
@use '@yllygrove/angular-themes' with ($theme: 'dark');

// Thème minimal (défaut)
@use '@yllygrove/angular-themes' with ($theme: 'minimal');

Utilisation des mixins

@use '@yllygrove/angular-themes/mixins' as mixins;

.my-button {
  @include mixins.button-base;
  @include mixins.background-color('primary');
}

.my-card {
  @include mixins.card-base;
  @include mixins.padding('lg');
}

🎨 Thèmes disponibles

Minimal

Thème ultra-léger avec espacement réduit et couleurs essentielles.

@use '@yllygrove/angular-themes/themes/minimal';

Light

Thème clair complet avec couleurs vives et contrastes élevés.

@use '@yllygrove/angular-themes/themes/light';

Dark

Thème sombre avec couleurs douces adaptées au mode nuit.

@use '@yllygrove/angular-themes/themes/dark';

🔧 Tokens personnalisables

Couleurs

  • $primary, $primary-dark, $primary-light
  • $text-primary, $text-secondary, $text-muted, $text-disabled
  • $background, $surface, $border
  • $success, $warning, $error, $info

Espacement

  • $spacing-xs (minimal: 2px, autres: 4px)
  • $spacing-sm (minimal: 4px, autres: 8px)
  • $spacing-md (minimal: 8px, autres: 16px)
  • $spacing-lg, $spacing-xl, $spacing-xxl

Border radius

  • $radius-sm, $radius-md, $radius-lg, $radius-xl, $radius-full

Typographie

  • $font-family, $font-size-*, $font-weight-*, $line-height-*

Ombres

  • $shadow-sm, $shadow-md, $shadow-lg

📋 Variables CSS générées

Le système génère automatiquement les custom properties CSS compatibles avec les composants YllyGrove :

:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --text-primary: #1f2937;
  --text-muted: #9ca3af;
  --radius-sm: 4px;
  --spacing-md: 16px;
  /* ... et toutes les autres variables */
}

🔀 Utilisation avec les composants

Les composants YllyGrove utilisent automatiquement ces variables :

// Dans votre fichier SCSS principal
@use '@yllygrove/angular-themes/minimal' with (
  $primary: #your-brand-color
);

// Les composants utilisent automatiquement
.ylly-button {
  background: var(--primary);      // Votre couleur personnalisée
  border-radius: var(--radius-sm); // Radius du thème minimal
}

🛠️ Mixins utilitaires

Espacement

@include mixins.padding('lg');
@include mixins.margin('sm');

Couleurs

@include mixins.text-color('primary');
@include mixins.background-color('surface');

Layout

@include mixins.button-base;
@include mixins.card-base;

📚 Exemples

Configuration projet Angular

// src/styles.scss
@use '@yllygrove/angular-themes/minimal' with (
  $primary: #your-brand-color,
  $border-radius: 6px
);

Composant personnalisé

// my-component.scss
@use '@yllygrove/angular-themes/mixins' as mixins;

.my-component {
  @include mixins.card-base;
  
  .header {
    @include mixins.text-color('primary');
    @include mixins.font-size('lg');
  }
  
  .content {
    @include mixins.padding('md');
  }
}

🔗 Liens utiles

📄 License

MIT

Dependencies

Dependencies

ID Version
tslib ^2.3.0

Peer Dependencies

ID Version
@angular/common ^20.2.0
@angular/core ^20.2.0

Keywords

angular scss themes design-tokens css
Details
npm
2025-12-16 22:55:09 +01:00
0
Project Site
MIT
latest
3.5 KiB
Assets (1)
angular-themes-0.0.1.tgz 3.5 KiB
Versions (1) View all
0.0.1 2025-12-16