@nappr/nappr-styles 0.3.1 → 0.3.3

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,69 @@
 {
   "name": "@nappr/nappr-styles",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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",
+    "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,78 @@
+@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,
+  '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 @@
+@use './button/' 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);
+  }
+}

package/sass/components/_button.scss

@@ -0,0 +1,212 @@
+@use 'sass:color';
+
+// $COMPONENT_CONFIG: (
+//   'hover-lightness': -10%,
+//   'active-lightness': -15%,
+// ) !default;
+
+// ==========================================================
+// BUTTON PLACEHOLDERS
+// ==========================================================
+
+%button-base {
+  align-items: center;
+  border: 0;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 500;
+  gap: 0.5rem;
+  justify-content: center;
+  line-height: 1.2;
+  padding: 1rem 0.5rem;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+// Button disabled state
+%button-disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+  pointer-events: none;
+}
+
+// ==========================================================
+// BUTTON MIXINS
+// ==========================================================
+
+@mixin button-interactive {
+  &:not(:disabled, .disabled) {
+    @content;
+  }
+}
+
+@mixin button-transition {
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+
+  // Note: border-color is included for secondary variant which has a border
+}
+
+// ==========================================================
+// BUTTON COMPONENT
+// ==========================================================
+
+.btn {
+  @extend %button-base;
+  @include mixins.button-transition;
+
+  // Icon support
+  .icon {
+    align-items: center;
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+  }
+
+  // Icon only (no text)
+  &.btn--icon-only {
+    aspect-ratio: 1;
+    padding: config.$NAPPR_BUTTON_PADDING_Y;
+
+    .icon {
+      margin: 0;
+    }
+  }
+
+  // Icon on the left
+  &.btn--icon-left {
+    .icon {
+      order: -1;
+    }
+  }
+
+  // Icon on the right (default)
+  &.btn--icon-right {
+    .icon {
+      order: 1;
+    }
+  }
+
+  // Hover state
+  @include mixins.button-interactive {
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Disabled state
+  &:disabled,
+  &.disabled {
+    @extend %button-disabled;
+  }
+
+  // Focus state
+  &:focus-visible {
+    outline: 2px solid var(--nappr-theme-accent);
+    outline-offset: 2px;
+  }
+
+  // No outline modifier
+  &.btn--no-outline {
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}
+
+// ==========================================================
+// BUTTON VARIANTS (PRIORITIES)
+// ==========================================================
+
+// Primary (default)
+.btn--primary {
+  background-color: var(--nappr-theme-accent);
+  border: 0;
+  color: var(--nappr-theme-text-primary);
+
+  @include mixins.button-interactive {
+    &:hover {
+      // Use color-mix for hover state (darken by 10%)
+      background-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 90%,
+        black 10%
+      );
+    }
+
+    &:active {
+      // Use color-mix for active state (darken by 15%)
+      background-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 85%,
+        black 15%
+      );
+    }
+  }
+}
+
+// Secondary (variant of primary)
+.btn--secondary {
+  background-color: transparent;
+  border: 1px solid var(--nappr-theme-accent);
+  color: var(--nappr-theme-accent);
+
+  @include mixins.button-interactive {
+    &:hover {
+      background-color: var(--nappr-theme-accent);
+      color: var(--nappr-theme-text-primary);
+    }
+
+    &:active {
+      background-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 90%,
+        black 10%
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 90%,
+        black 10%
+      );
+      color: var(--nappr-theme-text-primary);
+    }
+  }
+}
+
+// Tertiary (border only, background on hover)
+.btn--tertiary {
+  background-color: transparent;
+  border: 1px solid var(--nappr-theme-accent);
+  color: var(--nappr-theme-accent);
+
+  @include mixins.button-interactive {
+    &:hover {
+      background-color: var(--nappr-theme-accent);
+      border-color: var(--nappr-theme-accent);
+      color: var(--nappr-theme-text-primary);
+    }
+
+    &:active {
+      background-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 90%,
+        black 10%
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--nappr-theme-accent) 90%,
+        black 10%
+      );
+      color: var(--nappr-theme-text-primary);
+    }
+  }
+}