✨ feat(colors) : page d'exemple utilitaires de couleurs [DS-2763]

src/component/radio/style/module/_rich.scss

@@ -0,0 +1,113 @@
+////
+/// Radio Module : radio rich
+/// @group radio
+////
+
+@use 'src/module/spacing';
+@use 'src/module/selector';
+@use 'src/module/preference';
+@use 'src/module/disabled';
+
+#{selector.ns(radio-rich)} {
+  @include relative;
+  @include display-flex(row, center);
+  @include max-width(100%);
+
+  input[type="radio"] {
+    @include size(4v, 4v);
+    left: #{space(7v)};
+    top: calc(50% - #{space(2v)});
+
+    @include disabled.selector {
+      + label {
+        @include preference.forced-colors {
+          outline: 1px solid;
+
+          @include before {
+            background-color: transparent;
+          }
+        }
+      }
+
+      ~ #{selector.ns(radio-rich__pictogram)} {
+        @include preference.forced-colors {
+          outline: 1px solid graytext;
+        }
+      }
+    }
+
+    + label {
+      @include padding-left(14v);
+      @include margin-left(0);
+      align-self: stretch;
+      min-height: spacing.space(20v);
+      @include size(100%);
+      @include padding-top(2v);
+      @include padding-bottom(2v);
+      @include padding-right(6v);
+      @include display-flex(column, stretch, center);
+      background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%, #{space(4.5v)} #{space(4.5v)}, #{space(4.5v)} #{space(4.5v)};
+      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
+      background-position: 0 0, 100% 0, 0 100%, 0 0, #{space(7v)} 50%, #{space(7v) 50%};
+
+      @include preference.forced-colors {
+        outline: 1px solid;
+      }
+
+      @include before('', block) {
+        @include absolute(0, 0, 0, 0, 100%, 100%);
+        @include margin-left(0);
+        border-radius: 0;
+      }
+
+      #{selector.ns(hint-text)} {
+        @include margin-left(0);
+      }
+    }
+
+    &:not(:disabled) ~ label {
+      @include hover-tint;
+      @include enable-tint;
+
+      &:hover {
+        + #{ns(radio-rich__pictogram)} {
+          background-color: var(--hover);
+        }
+      }
+
+      &:active {
+        + #{ns(radio-rich__pictogram)} {
+          background-color: var(--active);
+        }
+      }
+    }
+  }
+
+  &__pictogram {
+    @include display-flex(row, center, center);
+    @include margin-left(-1px);
+    @include padding(1v);
+    @include size(22v);
+    @include min-width(22v);
+    align-self: stretch;
+    pointer-events: none;
+    background-size: 100% 1px, 100% 1px, 1px 100%, 1px calc(100% - 0.5rem);
+    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
+    background-position: 0 0, 0 100%, 100% 0, 0 0.25rem;
+
+    @include preference.forced-colors {
+      outline: 1px solid;
+    }
+
+    img,
+    svg {
+      @include max-size(14v, 14v);
+    }
+  }
+}
+
+#{selector.ns(control)} {
+  > #{selector.ns(radio-rich)}#{selector.ns-group(radio)} {
+    @include margin-y(0);
+  }
+}

src/component/radio/style/module/_sm.scss

@@ -0,0 +1,27 @@
+////
+/// Radio Module : radio sm
+/// @group radio
+////
+
+@use 'src/module/spacing';
+@use 'src/module/selector';
+
+#{selector.ns-group(radio)}--sm {
+  input[type="radio"] {
+    @include size(4v, 4v);
+    top: #{spacing.space(1v)};
+
+    & + label {
+      @include padding-left(6v);
+      background-position: calc(#{spacing.space(-0.5v)} + 1px) calc(#{spacing.space(1v)} - 1px), calc(#{spacing.space(-0.5v)} + 1px) calc(#{spacing.space(1v)} - 1px);
+      background-size: #{spacing.space(4.5v)} #{spacing.space(4.5v)}, #{spacing.space(4.5v)} #{spacing.space(4.5v)};
+
+      @include before {
+        top: #{spacing.space(1v)};
+        @include size(4v, 4v);
+        border-radius: #{spacing.space(4v)};
+        @include margin-left(-6v);
+      }
+    }
+  }
+}

src/dsfr/utility/colors/.package.yml

@@ -2,7 +2,6 @@ id: colors
 title: Utilitaires de couleur
 description:
 doc:
-draft: true
 wrapper: col-8
 style:
   - core

src/dsfr/utility/colors/_index.scss

@@ -1,10 +1,12 @@
 @use 'sass:map';
 @use 'setting';
 $setting: setting.$setting !default;
-@use 'style/mixin/scheme' with ($decisions: map.get($setting, decisions));
+@use 'mixin/scheme' with ($decisions: map.get($setting, color, decisions));
+@use 'mixin/border' with ($border-width: map.get($setting, border, width));
 
 @mixin base() {
   @include scheme.scheme();
+  @include border.generate();
 }
 
 @mixin legacy() {

src/dsfr/utility/colors/_setting.scss

@@ -1,8 +1,16 @@
 $setting: (
-  decisions: (
-    background: default alt contrast flat action-high action-low,
-    text: default title label mention inverted action-high,
-    border: default plain,
-    artwork: major minor decorative background motif
+  color: (
+    decisions: (
+      background: default alt contrast flat action-high action-low,
+      text: default title label mention inverted action-high,
+      border: default plain,
+      artwork: major minor decorative background motif
+    )
+  ),
+  border: (
+    width: (
+      from: 0,
+      through: 2
+    )
   )
 );

src/dsfr/utility/colors/example/background/index.ejs

@@ -0,0 +1,3 @@
+<% const sample = getSample(include); %>
+
+<%- sample(getText('subdir.background', 'colors'), '../sample/default', {context: 'background'}, false); %>

src/dsfr/utility/colors/example/border/index.ejs

@@ -0,0 +1,12 @@
+<%
+  const widths = [0.5, 1, 2];
+  const bordersWidth = [];
+  widths.forEach(width => {
+    const borderWidthClass = `${prefix}-border-width-${width.toString().replace('.', '-')}v`;
+    bordersWidth.push({ borderClass: borderWidthClass });
+  });
+%>
+
+<% const sample = getSample(include); %>
+
+<%- sample(getText('subdir.border', 'colors'), '../sample/default', {context: 'border', borders: bordersWidth}, false); %>

src/dsfr/utility/colors/example/index.ejs

@@ -1,5 +0,0 @@
-<%
-const sample = getSample(include);
-%>
-<h4>Page en construction</h4>
-

src/dsfr/utility/colors/example/sample/default.ejs

@@ -0,0 +1,59 @@
+<style>
+  .sample-box {
+    display: flex;
+    align-items: center;
+    span,
+    p {
+      font-size: 40px;
+      font-weight: 900;
+      line-height: 64px;
+      width: 64px;
+      height: 64px;
+      border: 1px solid var(--border-plain-grey);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</style>
+
+<%
+  const context = locals.context;
+  const borders = locals.borders;
+  const colors = JSON.parse(include('../../../../../../.config/colors.json'));
+  const items = colors.items;
+  const families = colors.families;
+  const decisions = colors.decisions;
+  const usages = decisions[context];
+%>
+
+<% for (const usage of usages) { %>
+  <h4 class="<%= prefix %>-mt-16v">Usage : <%= usage %></h4>
+  <% for (const family of families) { %>
+    <% const backgroundColors = items.filter(item => item.context === context && item.usage === usage && item.family === family); %>
+    <% if (backgroundColors.length) { %>
+      <h5 class="<%= prefix %>-mt-8v">Family : <%= family %></h5>
+      <% for (const color of backgroundColors) { %>
+        <div class="sample-box <%= prefix %>-mb-2v">
+          <% if (context === 'text') { %>
+            <% let backgroundAttributes = color.usage === 'inverted' ? {style: 'background-color: #7b7b7b'} : {}; %>
+            <p class="<%= color.colorClass %> <%= prefix %>-mb-0" <%- includeAttrs(backgroundAttributes);%>>Aa</p>
+          <% } else { %>
+            <span class="<%= color.colorClass %>"></span>
+          <% } %>
+          <code class="<%= prefix %>-ml-4v"><%= color.colorClass %></code>
+        </div>
+      <% } %>
+    <% } %>
+  <% } %>
+<% } %>
+
+<% if (context === 'border') { %>
+  <h3 class="<%= prefix %>-mt-16v">Classes utilitaires de largeur de bordures</h3>
+  <% for (const border of borders) { %>
+    <div class="sample-box <%= prefix %>-mb-2v">
+      <span class="<%= border.borderClass %>"></span>
+      <code class="<%= prefix %>-ml-4v"><%= border.borderClass %></code>
+    </div>
+  <% } %>
+<% } %>

src/dsfr/utility/colors/example/text/index.ejs

@@ -0,0 +1,3 @@
+<% const sample = getSample(include); %>
+
+<%- sample(getText('subdir.text', 'colors'), '../sample/default', {context: 'text'}, false); %>

src/dsfr/utility/colors/i18n/fr.yml

@@ -0,0 +1,8 @@
+title: Utilitaires de couleur
+description:
+doc:
+subdir:
+  title: Mises en situation
+  background: Classes utilitaires de couleur de fond
+  text: Classes utilitaires de couleur de texte
+  border: Classes utilitaires de couleur de bordures

src/dsfr/utility/colors/mixin/_border.scss

@@ -0,0 +1,69 @@
+////
+/// Colors Mixin : border
+/// @group colors
+////
+
+@use 'src/module/spacing';
+@use 'src/module/string';
+@use 'src/module/selector';
+
+$border-width: () !default;
+
+@function _border-name($value: 0, $unit: null) {
+  $start: 'border-width';
+
+  $middle: '';
+
+  $end: "#{string.replace($value, '.', '-')}";
+
+  @if $value != 0 and $unit != null {
+    $end: '#{$end}#{$unit}';
+  }
+
+  $selector: '#{$start}-#{$middle}#{$end}';
+
+  @return $selector;
+}
+
+@function _border-selectors($value) {
+  @if type-of($value) != 'number' {
+    @return '#{selector.ns(_border-name($value, null))}';
+  }
+
+  $selectors:'#{selector.ns(_border-name($value, v))}';
+
+  @return $selectors;
+}
+
+@mixin _border-property-variations($value: 0) {
+  $v: $value;
+
+  @if type-of($value) == 'number' {
+    $v: spacing.space('#{$value}v') !important;
+  }
+
+  #{_border-selectors($value)} {
+    border-width: $v;
+  }
+}
+
+@mixin _border-properties($border-width) {
+
+  $from: map-get($border-width, from);
+  $through: map-get($border-width, through);
+
+  @for $i from $from through $through {
+    // ajoute 0.5v
+    @if $i == 0 {
+      @include _border-property-variations($i + 0.5);
+    }
+
+    @if $i > 0 {
+      @include _border-property-variations($i);
+    }
+  }
+}
+
+@mixin generate() {
+  @include _border-properties($border-width);
+}

src/dsfr/utility/colors/style/mixin/_scheme.scss → src/dsfr/utility/colors/mixin/_scheme.scss

@@ -41,6 +41,9 @@ $decisions: () !default;
                 }
                 @include color.background($use $tint, (legacy: $legacy, important: true, hover: $hover));
               }
+              @else if $context == border {
+                @include color.border($use $tint, (legacy: $legacy, important: true));
+              }
               @else if $context == text {
                 @include color.text($use $tint, (legacy: $legacy, important: true));
               }

src/module/color/variable/_decisions.scss

@@ -21,7 +21,7 @@ $values: (
       neutral: strongest,
       primary: strong,
       accent: strong,
-      system: strong,
+      system: strong
     ),
     action-high: (
       neutral: strongest (hover: true),
@@ -101,7 +101,7 @@ $values: (
     ),
     black-white: (
       neutral: absolute-black
-    ),
+    )
   ),
   border: (
     default: (
@@ -131,7 +131,7 @@ $values: (
       neutral: strongest,
       primary: strong,
       system: strong,
-      accent: strong,
+      accent: strong
     ),
     disabled: (
       neutral: light
@@ -140,7 +140,7 @@ $values: (
   artwork: (
     major: (
       primary: strong (hover: true),
-      accent: strong (hover: true),
+      accent: strong (hover: true)
     ),
     minor: (
       primary: main,