feat(colors): refacto largeur de bordures

src/core/style/_module.scss

@@ -16,5 +16,4 @@
 @import 'selector/module';
 @import 'collapse/module';
 @import 'spacing/module';
-@import 'border/module';
 @import 'placement/module';

src/core/style/_setting.scss

@@ -8,7 +8,6 @@
 @import 'action/setting';
 @import 'selector/setting';
 @import 'spacing/setting';
-@import 'border/setting';
 @import 'typography/setting';
 @import 'motion/setting';
 @import 'icon/setting';

src/core/style/_tool.scss

@@ -9,7 +9,6 @@
 @import 'icon/tool';
 @import 'action/tool';
 @import 'spacing/tool';
-@import 'border/tool';
 @import 'media/tool';
 @import 'display/tool';
 @import 'grid/tool';

src/core/variables.scss

@@ -64,11 +64,5 @@ $variables: (
       through: 32,
       breakpoints: first md
     )
-  ),
-  border: (
-    width : (
-      from: 0,
-      through: 2
-    )
   )
 );

src/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/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/utility/colors/example/border/index.ejs

@@ -1,3 +1,14 @@
+<%
+  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'}, false); %>
+<%- sample(getText('subdir.border', 'colors'), '../sample/default', {context: 'border', borders: bordersWidth}, false); %>

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

@@ -6,7 +6,7 @@
      span {
        width: 40px;
        height: 40px;
-       border: 1px solid;
+       border-style: solid;
      }
 
      p {
@@ -19,39 +19,49 @@
 
 <%
   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) {
-
 %>
-    <h3 class="<%= prefix %>-mt-16v">Usage : <%= usage %></h3>
 
-    <% for (const family of families) { %>
-      <% const backgroundColors = items.filter(item => item.context === context && item.usage === usage && item.family === family); %>
+<% for (const usage of usages) { %>
+  <h4 class="<%= prefix %>-mt-16v">Usage : <%= usage %></h4>
 
-      <% if (backgroundColors.length) { %>
-        <h4 class="<%= prefix %>-mt-8v">Family : <%= family %></h4>
+  <% for (const family of families) { %>
+    <% const backgroundColors = items.filter(item => item.context === context && item.usage === usage && item.family === family); %>
 
-        <% for (const color of backgroundColors) { %>
-          <div class="sample-box <%= prefix %>-mb-2v">
+    <% if (backgroundColors.length) { %>
+      <h5 class="<%= prefix %>-mt-8v">Family : <%= family %></h5>
 
-            <% if (context === 'text') { %>
-              <% let wrapperAttributes = color.usage === 'inverted' ? {style: 'background-color: #7b7b7b'} : {}; %>
-              <div class="<%= prefix %>-p-2v" <%- includeAttrs(wrapperAttributes);%>>
-                <p class="<%= color.colorClass %> <%= prefix %>-mb-0">Aa</p>
-              </div>
-            <% } else { %>
-              <span class="<%= color.colorClass %>"></span>
-            <% } %>
+      <% for (const color of backgroundColors) { %>
+        <div class="sample-box <%= prefix %>-mb-2v">
 
-            <code class="<%= prefix %>-ml-4v"><%= color.colorClass %></code>
-          </div>
-        <% } %>
+          <% if (context === 'text') { %>
+            <% let wrapperAttributes = color.usage === 'inverted' ? {style: 'background-color: #7b7b7b'} : {}; %>
+            <div class="<%= prefix %>-p-2v" <%- includeAttrs(wrapperAttributes);%>>
+              <p class="<%= color.colorClass %> <%= prefix %>-mb-0">Aa</p>
+            </div>
+          <% } 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/utility/colors/mixin/_border.scss

@@ -0,0 +1,69 @@
+////
+/// Colors Mixin : border
+/// @group colors
+////
+
+@use 'module/spacing';
+@use 'module/string';
+@use '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);
+}