@nappr/nappr-styles 0.3.2 → 0.3.5

package/docs/pages/helpers.md

@@ -1,12 +1,12 @@
 ## Font Size
 
-> Les tailles des fonts sont à définir par la variable sass `$FontSizes`
+> Les tailles des fonts sont à définir par la variable sass `$NAPPR_FONT_SIZES_MAP`
 
-```css
-$FontSizes: (6, 8, 9, 12, 26, 24);
+```scss
+$NAPPR_FONT_SIZES_MAP: (6, 8, 9, 12, 24, 26) !default;
 ```
 
-**Example en utilisant classe `.fs24`**
+**Exemple en utilisant la classe `.fs24`**
 
 ```html
 <span class="fs24">Font size: 24px</span>
@@ -14,10 +14,10 @@ $FontSizes: (6, 8, 9, 12, 26, 24);
 
 ## Margin / Padding
 
-> Les tailles des margin/padding sont à définir par la variable sass `$MarginPaddingSizes`
+> Les tailles des margin/padding sont à définir par la variable sass `$NAPPR_SPACINGS_MAP`
 
-```css
-$MarginPadding: (6, 8, 9, 12, 26, 24);
+```scss
+$NAPPR_SPACINGS_MAP: (3, 6, 9, 12, 18, 24, 48) !default;
 ```
 
 > Il est alors possible d'ajouter du margin/padding sur :
@@ -26,7 +26,7 @@ $MarginPadding: (6, 8, 9, 12, 26, 24);
 > - les 2 axes `.my(n) .mx(n)`
 > - les 4 directions `.mt(n), .mr(n), .mb(n), .ml(n)`
 
-**L'example ci-dessous ajoute un padding de 24px sur la position top d'un bloc**
+**L'exemple ci-dessous ajoute un padding de 24px sur la position top d'un bloc**
 
 ```html
 <div class="pt24">padding-top: 24px;</div>
@@ -34,12 +34,12 @@ $MarginPadding: (6, 8, 9, 12, 26, 24);
 
 ## Borders
 
-> Le type de bordure est à définir par la variable `$BorderStyle`
-> Les tailles des bordures sont à définir par la variable sass `$BorderSizes`
+> Le type de bordure est à définir par la variable `$NAPPR_BORDER_STYLE`
+> Les tailles des bordures sont à définir par la variable sass `$NAPPR_BORDER_SIZE_MAP`
 
-```css
-$BorderStyle: solid;
-$BorderSizes: (1, 2, 3);
+```scss
+$NAPPR_BORDER_STYLE: solid !default;
+$NAPPR_BORDER_SIZE_MAP: (1, 2, 3) !default;
 ```
 
 > Il est alors possible d'ajouter des bordures sur :
@@ -48,7 +48,7 @@ $BorderSizes: (1, 2, 3);
 > - les 2 axes `.bx(n) .by(n)`
 > - les 4 directions `.bt(n), .br(n), .bb(n), .bl(n)`
 
-**L'example ci-dessous ajoute une bordure de 2px sur les positions top et bottom d'un bloc**
+**L'exemple ci-dessous ajoute une bordure de 2px sur les positions top et bottom d'un bloc**
 
 ```html
 <div class="by2" style="border-color: #CCCCCCCC;">
@@ -58,10 +58,10 @@ $BorderSizes: (1, 2, 3);
 
 ## Border Radius
 
-> Les arrondis de bordures sont à définir par la variable sass `$BorderRadiusSizes`.
+> Les arrondis de bordures sont à définir par la variable sass `$NAPPR_BORDER_RADIUS_MAP`.
 
-```css
-$BorderRadiusSizes: (2, 3, 4, 8, 10, 12);
+```scss
+$NAPPR_BORDER_RADIUS_MAP: (2, 3, 4, 8, 10, 12) !default;
 ```
 
 > Il est alors possible d'ajouter des angles arrondis à un bloc sur :
@@ -69,10 +69,22 @@ $BorderRadiusSizes: (2, 3, 4, 8, 10, 12);
 > - la totalité d'un bloc `.brad(n)`
 > - les 4 directions `.bradt(n), .bradr(n), .bradb(n), .bradl(n)`
 
-**L'example ci-dessous ajoute un angle arrondi de 2px sur le haut d'un bloc**
+**L'exemple ci-dessous ajoute un angle arrondi de 2px sur le haut d'un bloc**
 
 ```html
 <div class="bradt2" style="border-color: #CCCCCC;">
   <span>Lorem ipsum</span>
 </div>
 ```
+
+## Deprecated
+
+> ⚠️ **Version 1.0.0** : Les variables suivantes ont été renommées.
+
+| Ancienne variable | Nouvelle variable |
+|-------------------|-------------------|
+| `$FontSizes` | `$NAPPR_FONT_SIZES_MAP` |
+| `$MarginPaddingSizes` | `$NAPPR_SPACINGS_MAP` |
+| `$BorderStyle` | `$NAPPR_BORDER_STYLE` |
+| `$BorderSizes` | `$NAPPR_BORDER_SIZE_MAP` |
+| `$BorderRadiusSizes` | `$NAPPR_BORDER_RADIUS_MAP` |

package/docs/pages/quick-start.md

@@ -1,26 +1,112 @@
-# Napper Styles (SASS/CSS)
+# Quick Start
 
-> A collection of CSS/SCSS helpers
+> Guide de démarrage rapide pour utiliser @nappr/nappr-styles
 
 ## Installation
 
 ```bash
-git clone git@github.com:sixertoy/napper-styles.git
+yarn add https://github.com/sixertoy/nappr-styles.git#latest
 ```
 
-## Variables
+## Configuration
 
-```sass
-$body-width: 100% !default;
-$body-font-size: 16px !default;
-$default-padding: 12px !default;
+Créez un fichier `variables.scss` pour personnaliser les variables :
 
-$BorderStyle: solid;
-$BorderSizes: () !default;
-$BorderRadiusSizes: () !default;
+```scss
+// Configuration principale
+$NAPPR_BODY_FONT_SIZE: 16px !default;
+$NAPPR_BODY_WIDTH: 100vw !default;
+$NAPPR_DEFAULT_SPACING: 12px !default;
 
-$FontSizes: () !default;
+// Tailles de police
+$NAPPR_FONT_SIZES_MAP: (11, 12, 14, 16) !default;
 
-$default-padding: 12px !default;
-$MarginPaddingSizes: (3, 6, 9, 12, 18, 24, 48) !default;
+// Espacements
+$NAPPR_SPACINGS_MAP: (3, 6, 9, 12, 18, 24, 48) !default;
+
+// Dimensions
+$NAPPR_DIMENSIONS_MAP: (25, 50, 75, 100) !default;
+
+// Bordures
+$NAPPR_BORDER_STYLE: solid !default;
+$NAPPR_BORDER_SIZE_MAP: (1, 2, 3) !default;
+$NAPPR_BORDER_RADIUS_MAP: (4, 8, 12) !default;
+```
+
+## Utilisation
+
+Importez les styles dans votre fichier principal :
+
+```scss
+@use './variables.scss' as *;
+@use '@nappr/nappr-styles/styles.scss' as *;
+```
+
+## Exemple complet
+
+```scss
+// variables.scss
+$NAPPR_BODY_FONT_SIZE: 16px !default;
+$NAPPR_FONT_SIZES_MAP: (12, 14, 16, 24) !default;
+$NAPPR_SPACINGS_MAP: (6, 12, 18, 24) !default;
+
+// main.scss
+@use './variables.scss' as *;
+@use '@nappr/nappr-styles/styles.scss' as *;
+
+.my-component {
+  @extend .fs16;
+  @extend .m12;
+  @extend .p6;
+}
 ```
+
+## Deprecated
+
+> ⚠️ **Version 1.0.0** : Les éléments suivants ont été supprimés.
+
+### Variables deprecated
+
+| Ancienne variable | Nouvelle variable |
+|-------------------|-------------------|
+| `$body-width` | `$NAPPR_BODY_WIDTH` |
+| `$body-font-size` | `$NAPPR_BODY_FONT_SIZE` |
+| `$default-spacing` | `$NAPPR_DEFAULT_SPACING` |
+| `$font-sizes-map` | `$NAPPR_FONT_SIZES_MAP` |
+| `$spacings-map` | `$NAPPR_SPACINGS_MAP` |
+| `$border-style` | `$NAPPR_BORDER_STYLE` |
+| `$border-size-map` | `$NAPPR_BORDER_SIZE_MAP` |
+| `$border-radius-map` | `$NAPPR_BORDER_RADIUS_MAP` |
+
+### Syntaxe deprecated
+
+```scss
+// ❌ Ancienne syntaxe (deprecated)
+@import './_variables.scss';
+@import '~@nappr/nappr-styles/styles.scss';
+
+// ✅ Nouvelle syntaxe
+@use './variables.scss' as *;
+@use '@nappr/nappr-styles/styles.scss' as *;
+```
+
+### Grille deprecated
+
+Les anciennes classes `.columns` et `.rows` (basées sur flexbox) ont été supprimées. Utilisez le nouveau système de grille CSS Grid :
+
+```scss
+// ❌ Deprecated
+.columns .col-50 { ... }
+
+// ✅ Nouvelle syntaxe
+.nappr-grid .nappr-grid-col-6 { ... }
+```
+
+## Migration
+
+Pour migrer votre code vers la version 1.0.0+ :
+
+1. **Remplacez toutes les variables** : Utilisez les variables en MAJUSCULES préfixées avec `NAPPR_`
+2. **Remplacez `@import` par `@use`** : Utilisez la syntaxe moderne des modules Sass
+3. **Configuration rem** : Si vous utilisiez `$rem-baseline`, `$rem-fallback` ou `$rem-px-only`, configurez directement `sass-rem` dans votre projet
+4. **Migrez vers la nouvelle grille** : Remplacez `.columns`/`.rows` par `.nappr-grid` et `.nappr-grid-col-*`

package/docs/temp.scss

@@ -0,0 +1,122 @@
+// ==============================================
+// 1. Variables : Polices et Couleurs (Basé sur le DSFR)
+// ==============================================
+
+// Polices
+$font-marianne: 'Marianne', arial, sans-serif;
+$font-spectral: 'Spectral', georgia, serif; // Utilisée pour les Displays selon la charte
+
+// Couleurs (Tokens DSFR - à ajuster si besoin)
+$color-text-default: #161616; // Couleur G800 sur fond clair
+$color-text-inverted: #ffffff; // Couleur White sur fond foncé
+$margin-bottom-heading: 1.5rem; // 24px/16 = 1.5rem (pour h1-h6)
+$margin-bottom-display: 2rem; // 32px/16 = 2rem (pour les displays)
+
+// Variables de taille de police (À REMPLACER PAR LES VALEURS EXACTES DU DSFR)
+// Ces valeurs sont indicatives et doivent être vérifiées dans la documentation DSFR
+$h1-font-size: 2.5rem; // Ex: 40px
+$h2-font-size: 2rem; // Ex: 32px
+$h3-font-size: 1.75rem; // Ex: 28px
+$h4-font-size: 1.5rem; // Ex: 24px
+$h5-font-size: 1.25rem; // Ex: 20px
+$h6-font-size: 1rem; // Ex: 16px
+
+$display-xl-font-size: 4rem; // Très grand display
+$display-lg-font-size: 3rem; // Grand display
+$display-md-font-size: 2.5rem; // Display moyen
+
+// ==============================================
+// 2. Mixin pour styliser un titre
+// ==============================================
+
+@mixin heading-style(
+  $font-size,
+  $font-weight: 700,
+  $font-family: $font-marianne,
+  $margin-bottom: $margin-bottom-heading
+) {
+  color: $color-text-default;
+  font-family: $font-family;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: 1.2; // Ligne de hauteur à vérifier dans le DSFR
+  margin-bottom: $margin-bottom;
+  margin-top: 0; // Réinitialise la marge supérieure
+
+  // Style pour le mode sombre ou fond coloré
+  .fr-scheme-dark &,
+  .fr-background-alt & {
+    color: $color-text-inverted;
+  }
+}
+
+// ==============================================
+// 3. Application des styles aux balises HTML (H1 à H6)
+// ==============================================
+
+h1 {
+  @include heading-style($h1-font-size, 700); // Généralement Bold
+}
+
+h2 {
+  @include heading-style($h2-font-size, 700);
+}
+
+h3 {
+  @include heading-style($h3-font-size, 700);
+}
+
+h4 {
+  @include heading-style($h4-font-size, 700);
+}
+
+h5 {
+  @include heading-style($h5-font-size, 700);
+}
+
+h6 {
+  @include heading-style($h6-font-size, 700);
+}
+
+// ==============================================
+// 4. Titres Alternatifs (Display)
+// ==============================================
+
+// Les displays utilisent souvent la police Spectral et un poids plus lourd
+.fr-display--xl {
+  @include heading-style(
+    $display-xl-font-size,
+    800,
+    $font-spectral,
+    $margin-bottom-display
+  );
+}
+
+.fr-display--lg {
+  @include heading-style(
+    $display-lg-font-size,
+    800,
+    $font-spectral,
+    $margin-bottom-display
+  );
+}
+
+.fr-display--md {
+  @include heading-style(
+    $display-md-font-size,
+    800,
+    $font-spectral,
+    $margin-bottom-display
+  );
+}
+
+// Classe pour réinitialiser le style de titre (si besoin)
+.fr-text--lead {
+  font-family: $font-marianne;
+
+  // Style spécifique pour un texte d'introduction
+  font-size: 1.25rem;
+  font-weight: 400;
+
+  // Autres styles...
+}

package/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Type definitions for @nappr/nappr-styles
+ *
+ * Provides TypeScript support for importing CSS and SCSS files.
+ */
+
+declare module '*.css' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/package.json

@@ -1,35 +1,70 @@
 {
   "name": "@nappr/nappr-styles",
-  "version": "0.3.2",
+  "version": "0.3.5",
   "description": "A collection of SCSS helpers",
-  "main": "./styles.scss",
-  "browser": "./dist/styles.css",
+  "main": "./dist/styles.min.css",
+  "browser": "./dist/styles.min.css",
+  "style": "./dist/styles.min.css",
+  "types": "./index.d.ts",
+  "sass": "./styles.scss",
   "homepage": "https://sixertoy.github.io/nappr-styles",
-  "repository": "https://github.com/sixertoy/nappr-styles",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sixertoy/nappr-styles.git"
+  },
   "author": "sixertoy <sixertoy.github@gmail.com>",
   "license": "ISC",
+  "keywords": [
+    "scss",
+    "sass",
+    "css",
+    "styles",
+    "helpers",
+    "utilities",
+    "nappr"
+  ],
+  "engines": {
+    "node": ">=14.0.0"
+  },
   "files": [
-    "lib",
+    "sass",
     "dist",
     "docs",
     "styles.scss",
-    "variables.module.scss"
+    "styles.module.scss",
+    "*.d.ts"
   ],
   "devDependencies": {
+    "cssnano": "^7.1.2",
+    "cssnano-preset-advanced": "^7.0.10",
     "docsify": "^4.13.1",
     "docsify-cli": "^4.4.4",
-    "prettier": "^3.3.2",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-scss": "^4.0.9",
+    "postcss-sort-media-queries": "^5.2.0",
+    "prettier": "^3.6.2",
     "prettier-stylelint": "0.4.2",
-    "sass": "^1.77.6",
-    "stylelint": "^16.6.1",
-    "stylelint-config-standard": "^38.0.0",
+    "stylelint": "^16.25.0",
+    "stylelint-config-standard": "^39.0.1",
+    "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-order": "^7.0.0",
-    "stylelint-scss": "^6.3.2"
+    "stylelint-scss": "^6.12.1"
+  },
+  "dependencies": {
+    "sass": "^1.93.3",
+    "sass-rem": "^4.0.0"
   },
   "scripts": {
-    "cleanup": "rm -rf node_modules",
+    "cleanup": "rm -rf node_modules dist",
     "docs": "docsify serve docs --port=2999",
-    "dev": "sass --load-path=node_modules styles.scss",
-    "build": "./.scripts/build.sh"
+    "build": "./.scripts/build.sh",
+    "lint": "./.scripts/lint.sh",
+    "lint:fix": "./.scripts/lint.sh --fix",
+    "format": "./.scripts/format.sh",
+    "format:check": "./.scripts/format.sh --check",
+    "prepare": "yarn build",
+    "prepublishOnly": "yarn validate && yarn build",
+    "validate": "yarn lint && yarn format:check"
   }
 }

package/sass/_globals.module.scss

@@ -0,0 +1,43 @@
+@use './configs/' as configs;
+@use './core/funcs/string' as string;
+
+// ==========================================================
+// Mixins
+// ==========================================================
+
+/**
+ * Export module variables
+ * @param {Map} $map - Map containing the variables to export
+ * @return {Void}
+ */
+@mixin export-moudles-variables($map) {
+  @each $token, $vars in $map {
+    $prefix: string.capitalize(string.camelize($token));
+
+    @each $key, $value in $vars {
+      $var: string.capitalize(string.camelize($key));
+
+      nappr#{$prefix}#{$var}: #{$value};
+    }
+  }
+}
+
+// ==========================================================
+// Root variables
+// ==========================================================
+$ROOT_EXPORTS: (
+  '': configs.$NAPPR_DEFAULTS,
+  'palette': configs.$NAPPR_PALETTES,
+  'breakpoint': configs.$NAPPR_BREAKPOINTS,
+  'theme': map.get(
+      configs.$NAPPR_THEMES,
+      map.get(configs.$NAPPR_DEFAULTS, 'default-theme')
+    ),
+);
+
+// ==========================================================
+// Export module variables
+// ==========================================================
+:export {
+  @include export-moudles-variables(globals.$ROOT_EXPORTS);
+}

package/sass/_globals.scss

@@ -0,0 +1,79 @@
+@use 'sass:meta';
+@use './configs/' as configs;
+@use './core/funcs/map' as map;
+
+// ==========================================================
+// Mixins
+// ==========================================================
+
+// Génère les variables CSS personnalisées pour :root
+// @param {Map} $map - Map contenant les configurations à exporter
+// @param {String} $prefix - Préfixe pour les variables
+@mixin generate-root-vars($map, $prefix: '') {
+  @each $key, $value in $map {
+    $is-map: meta.type-of($value) == 'map';
+
+    @if $is-map {
+      @include generate-root-vars($value, '#{$prefix}#{$key}');
+    } @else {
+      $name-prefix: if($prefix != '', '#{$prefix}-', '');
+      $var-name: '#{$name-prefix}#{$key}';
+
+      --nappr-#{$var-name}: #{$value};
+    }
+  }
+}
+
+@mixin generate-palette-variables($map) {
+  @each $key, $value in $map {
+    [data-color='#{$key}'] {
+      --nappr-data-color: #{$value};
+    }
+  }
+}
+
+// Génère les variables CSS personnalisées pour chaque thème
+// @param {Map} $map - Map contenant les configurations de thèmes
+@mixin generate-theme-variables($themes) {
+  @each $token, $map in $themes {
+    [data-theme='#{$token}'] {
+      @each $key, $value in $map {
+        --nappr-data-color: var(--nappr-palette-#{$token});
+      }
+    }
+  }
+}
+
+// ==========================================================
+// Root variables
+// ==========================================================
+$ROOT_EXPORTS: (
+  '': configs.$NAPPR_DEFAULTS,
+  'text': configs.$NAPPR_TEXT,
+  'palette': configs.$NAPPR_PALETTES,
+  'breakpoint': configs.$NAPPR_BREAKPOINTS,
+  'grid': configs.$NAPPR_GRID,
+  'spacing': configs.$NAPPR_SPACING,
+  'theme': map.get(
+      configs.$NAPPR_THEMES,
+      map.get(configs.$NAPPR_DEFAULTS, 'default-theme')
+    ),
+);
+$ROOT_THEMES_EXPORTS: (
+  'dark-theme': map.get(configs.$NAPPR_THEMES, 'dark-theme'),
+  'light-theme': map.get(configs.$NAPPR_THEMES, 'light-theme'),
+);
+
+// ==========================================================
+// Export root variables
+// ==========================================================
+:root {
+  // --- ROOT VARIABLES ---
+  @include generate-root-vars($ROOT_EXPORTS);
+}
+
+// --- THEME VARIABLES ---
+@include generate-palette-variables(configs.$NAPPR_PALETTES);
+
+// --- THEME VARIABLES ---
+@include generate-theme-variables($ROOT_THEMES_EXPORTS);

package/sass/components/_.scss

@@ -0,0 +1,2 @@
+@use './button' as *;
+@use './nav' as *;

package/sass/components/_badge.scss

@@ -0,0 +1,58 @@
+// ==========================================================
+// BADGE COMPONENT
+// ==========================================================
+
+.badge {
+  align-items: center;
+  border-radius: 0.25rem;
+  display: inline-flex;
+  font-family: inherit;
+  font-weight: 500;
+  gap: 0.5rem;
+  line-height: var(--nappr-text-line-height);
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  .icon {
+    align-items: center;
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+  }
+
+  &.badge--icon-left {
+    .icon {
+      order: -1;
+    }
+  }
+}
+
+// ==========================================================
+// BADGE SIZES
+// ==========================================================
+
+// // Medium size (default)
+.badge,
+.badge--md {
+  font-size: 0.875rem;
+  padding: 0.5rem 0.25rem;
+}
+
+// Small size
+.badge--sm {
+  font-size: 0.75rem;
+  padding: 0.375rem 0.125rem;
+}
+
+// ==========================================================
+// BADGE VARIANTS (STATUS COLORS)
+// ==========================================================
+// Uses theme variables for dynamic theming support
+
+@each $key in ('info', 'error', 'debug', 'success', 'warning') {
+  .badge--#{$key} {
+    background-color: var(--nappr-theme-state-#{$key});
+    color: var(--nappr-theme-text-primary);
+  }
+}