chore(global): DSFR v1.7.0

i18n/fr.yml

@@ -0,0 +1,51 @@
+title: Nom du composant
+description: description du composant
+doc: lien vers la documentation
+error:
+  short: erreur
+label:
+  default: libellé
+  short: libl
+  long: libellé de l'élément
+email:
+  label: Adresse électronique
+  hint:
+    default: 'Format attendu : nom@domaine.fr'
+    indication: Cette adresse est utilisée uniquement pour la connexion au service.
+  error: 'Le format de l’adresse electronique saisie n’est pas valide. Le format attendu est : nom@exemple.org'
+fieldset:
+  legend: Une légende
+hint:
+  default: Texte de description additionnel
+name-surname:
+  hint:
+    usage-name: Nom marital…
+  label:
+    name: Nom
+    surname: Prénom
+    usage-name: Nom d'usage
+    no-surname: Je n'ai pas de prénom
+site:
+  name: '[Nom du site]'
+social:
+  facebook:
+    default: Facebook
+    url: https://facebook.com/
+  twitter:
+    default: Twitter
+    url: https://twitter.com/
+  linkedin:
+    default: Linkedin
+    url: https://linkedin.com/
+marianne: Marianne
+readme:
+  dependencies:
+    title: Dépendances
+  use:
+    title: Utilisation
+    description: Afin d’utiliser le composant `${id}`, il est nécessaire d’ajouter les fichiers de styles et de scripts présents dans le dossier dist dans l'ordre suivant :\n
+  doc:
+    title: Documentation
+    item: Consulter [la documentation](${url}) sur le module ${title}
+subdir:
+  title: Autres exemples

module/color/_index.scss

@@ -0,0 +1,9 @@
+@forward 'sass:color';
+@forward 'variable/static';
+@forward 'mixin/element';
+@forward 'mixin/data-uri-svg';
+@forward 'mixin/define';
+@forward 'mixin/accent';
+@use 'variable/constant';
+
+$constant: constant.$value;

module/color/function/_box-shadow.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use 'module/string';
+@use 'module/spacing';
+@use '../variable/box-shadows';
+@use '../variable/constant';
+
+@function has($id) {
+  @return map.has-key(box-shadows.$values, $id);
+}
+
+@function get($id, $index: 1) {
+  @return string.replace(spacing.space(map.get(box-shadows.$values, $id)), constant.$value, '$color##{$index}');
+}

module/color/function/_colors.scss

@@ -0,0 +1,181 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:color';
+@use 'module/string';
+@use '../variable/options';
+@use '../variable/sets';
+@use '../variable/decisions';
+
+@function from-list($tokens, $type, $parameters: ()) {
+  $colors: ();
+  $length: list.length($tokens);
+  @for $i from 1 through $length {
+    $colors: list.append($colors, from(list.nth($tokens, $i), $type, $parameters));
+  }
+  @return $colors;
+}
+
+@function from($token, $type, $parameters: ()) {
+  @if $type == hex {
+    @return _hex($token, $parameters);
+  }
+  @else if $type == decision {
+    @return _decision($token, $parameters);
+  }
+  @else if $type == set {
+    @return _set($token, $parameters);
+  }
+}
+
+@function _hex($token, $parameters) {
+  $theme: map.get($parameters, theme);
+  $settings: _settings($token);
+  $index: 1;
+  @if $theme == dark {
+    $index: 2;
+  }
+  $name: list.nth($settings, $index);
+
+  @if not map.has-key(options.$values, $name) {
+    @error ('color ' + $name + ' doesn\'t exists');
+  }
+
+  $option: map.get(options.$values, $name);
+
+  $hex: list.nth($option, 1);
+
+  @if map.get($parameters, hover) {
+    $hex: list.nth($option, 2);
+  }
+
+  @if map.get($parameters, active) {
+    $hex: list.nth($option, 3);
+  }
+
+  @if list.length($settings) > 2 {
+    $setting: list.nth($settings, 3);
+    @if map.has-key($setting, alpha) {
+      @return rgba($hex, map.get($setting, alpha));
+    }
+  }
+
+  @return $hex;
+}
+
+@function _decision($token, $parameters) {
+  $var: map.get($parameters, var);
+  $prop: --#{list.nth($token, 1)}-#{list.nth($token, 2)}-#{list.nth($token, 3)};
+
+  @if map.get($parameters, hover) == true {
+    $prop: #{$prop}-hover;
+  }
+
+  @if map.get($parameters, active) == true {
+    $prop: #{$prop}-active;
+  }
+
+  @if map.get($parameters, var) == true {
+    @return var($prop);
+  }
+  @return $prop;
+}
+
+@function _set($token, $parameters) {
+  $settings: _settings($token);
+  $light: list.nth($settings, 1);
+  $light-split: string.split($light, '-');
+  $light-length: list.length($light-split);
+  $dark: list.nth($settings, 2);
+  $dark-split: string.split($dark, '-');
+  $dark-length: list.length($dark-split);
+  $name: $light;
+  $identical: true;
+  @for $i from 1 through $dark-length {
+    $chunk: list.nth($dark-split, $i);
+    @if list.index($light-split, $chunk) == null {
+      $name: #{$name}-#{$chunk};
+    }
+  }
+
+  $prop: --#{$name};
+  @if list.length($settings) > 2 {
+    $params: list.nth($settings, 3);
+    @if map.has-key($params, alpha) {
+      $prop: _alpha($prop, map.get($params, alpha));
+    }
+  }
+
+  @if map.get($parameters, hover) == true {
+    $prop: #{$prop}-hover;
+  }
+
+  @if map.get($parameters, active) == true {
+    $prop: #{$prop}-active;
+  }
+
+  @if map.get($parameters, var) == true {
+    @return var($prop);
+  }
+  @return $prop;
+}
+
+/// Retourne l'option correspondante
+/// @access private
+/// @param {String} $token
+/// @param {String} $theme
+/// @return {String} Retourne la liste correspondant à l'option
+@function _settings($token, $theme: light) {
+  $context: list.nth($token, 1);
+  $use: list.nth($token, 2);
+  $tint: list.nth($token, 3);
+
+  $family: null;
+  @if map.has-key(sets.$values, $tint) {
+    $family: $tint;
+  }
+  @else {
+    @each $set-family, $tints in sets.$values {
+      @if map.has-key($tints, $tint) {
+        $family: $set-family;
+      }
+    }
+  }
+  @if $family == null {
+    @error ('no family corresponding to tint #{$tint}');
+  }
+
+  @if not map.has-key(decisions.$values, $context) {
+    @error ('no $context #{$context} in $scheme-decisions');
+  }
+  $uses: map.get(decisions.$values, $context);
+
+  @if not map.has-key($uses, $use) {
+    @error ('no $use #{$use} in $scheme-decisions #{$context}');
+  }
+  $families: map.get($uses, $use);
+
+  @if not map.has-key($families, $family) {
+    @error ('no $family #{$family} in $scheme-decisions #{$context} #{$use}');
+  }
+  $decision: map.get($families, $family);
+  $shade: list.nth($decision, 1);
+
+  $set-families: map.get(sets.$values, $family);
+  $set-shades: map.get($set-families, $tint);
+  $settings: map.get($set-shades, $shade);
+
+  @if list.length($decision) > 1 {
+    $settings: list.append($settings, list.nth($decision, 2));
+  }
+
+  @return $settings;
+}
+
+@function _alpha($prop, $alpha: 1) {
+  @if $alpha == null or $alpha == 1 {
+    @return $prop;
+  }
+
+  $a: list.nth(string.split('#{$alpha}', '.'), 2);
+  @return #{$prop}-a#{$a};
+}

module/color/function/_constant.scss

@@ -0,0 +1,12 @@
+@use 'module/string';
+@use 'module/color/variable/constant';
+
+$value: constant.$value;
+
+@function indexed($haystack, $index: 1) {
+  @return string.replace($haystack, $value, get($index));
+}
+
+@function get($id: 1) {
+  @return '$color##{$id}';
+}

src/core/style/color/function/_get-result.scss → module/color/function/_result.scss

@@ -1,23 +1,19 @@
-////
-/// Core Function : Color get result
-/// @group core
-////
+@use 'sass:list';
+@use 'module/string';
+@use 'constant';
 
 /// Remplace les variables par les couleurs dans la valeur à traiter
 /// @access public
 /// @param {list} $colors - list d'éléments de couleur sous diverses formes comme renvoyées par get-colors.
 /// @param {} $value - définition de la valeur à traiter
 /// @return {String} Retourne la valeur avec les couleurs remplacées
-@function get-result($colors, $value: $COLOR) {
-  $length: length($colors);
-  $result: str-replace($value, '$COLOR', '$color#1');
+@function get($colors, $value: constant.$value) {
+  $length: list.length($colors);
+  $result: constant.indexed($value);
   @for $i from 1 through $length {
-    $color: nth($colors, $i);
-    $needle: '$color#1';
-    @if $length > 1 {
-      $needle: '$color##{$i}';
-    }
-    $result: str-replace($result, $needle, $color);
+    $color: list.nth($colors, $i);
+    $needle: constant.get($i);
+    $result: string.replace($result, $needle, $color);
   }
   @return $result;
 }

src/core/style/color/function/_token.scss → module/color/function/_token.scss

@@ -1,22 +1,21 @@
-////
-/// Core Function : Color tokenize
-/// @group core
-////
+@use 'sass:meta';
+@use 'sass:list';
+@use '../variable/accent';
 
 /// Mise en forme des tokens de décision
 /// @access public
 /// @param {list} $tokens - liste de token de décision
 /// @param {String} $context - contexte global provenant de l'usage de scheme-element
 /// @return {list} Retourne une liste contenant les tokens de décision normalisés
-@function normalise-tokens($tokens, $context: text) {
+@function normalise($tokens, $context: text) {
   $length: length($tokens);
-  @if type-of(nth($tokens, 1)) != list {
+  @if meta.type-of(list.nth($tokens, 1)) != list {
     $length: 1;
-    $tokens: append((), $tokens);
+    $tokens: list.append((), $tokens);
   }
   $normalised: ();
   @for $i from 1 through $length {
-    $normalised: append($normalised, (normalise-token(nth($tokens, $i), $context)));
+    $normalised: list.append($normalised, (_normalise(list.nth($tokens, $i), $context)));
   }
   @return $normalised;
 }
@@ -26,14 +25,14 @@
 /// @param {list} $token - token de décision (contexte, usage, teinte ou famille (accent))
 /// @param {String} $context - contexte global provenant de l'usage de scheme-element
 /// @return {list} Retourne le token de décision normalisé
-@function normalise-token($token, $context: text) {
-  @if length($token) == 3 {
-    $context: nth($token, 1);
+@function _normalise($token, $context: text) {
+  @if list.length($token) == 3 {
+    $context: list.nth($token, 1);
   }
-  $use: nth($token, length($token) - 1);
-  $tint: nth($token, length($token));
+  $use: list.nth($token, list.length($token) - 1);
+  $tint: list.nth($token, list.length($token));
   @if $tint == accent {
-    $tint: $ACCENT;
+    $tint: accent.$value;
   }
 
   @return $context $use $tint;
@@ -43,9 +42,9 @@
 /// @access public
 /// @param {list} $tokens - $tokens - liste de token de décision
 /// @return {int} Retourne le nombre de tokens de décision
-@function get-tokens-length($tokens) {
-  @if type-of(nth($tokens, 1)) != list {
+@function length($tokens) {
+  @if meta.type-of(list.nth($tokens, 1)) != list {
     @return 1;
   }
-  @return length($tokens);
+  @return list.length($tokens);
 }

module/color/mixin/_accent.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../variable/accent';
+@use '../variable/sets';
+
+@mixin accentuate () {
+  $accents: map.get(sets.$values, accent);
+  @at-root {
+    @each $tint, $value in $accents {
+      @include accent.set($tint);
+      &--#{$tint} {
+        @content;
+      }
+    }
+  }
+  @include accent.end();
+}