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

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,

module/color/variable/_sets.scss

@@ -21,8 +21,8 @@ $values: (
       alt-raised: grey-975 grey-100,
       alt-overlap: grey-975 grey-125,
       contrast-raised: grey-950 grey-125,
-      contrast-overlap: grey-950 grey-150,
-    ),
+      contrast-overlap: grey-950 grey-150
+    )
   ),
   primary: (
     blue-france: (
@@ -32,7 +32,7 @@ $values: (
       lighter: blue-france-950 blue-france-100,
       lightest: blue-france-975 blue-france-75,
       main: blue-france-main-525 blue-france-main-525,
-      inverted: blue-france-975 blue-france-sun-113,
+      inverted: blue-france-975 blue-france-sun-113
     ),
     red-marianne: (
       strong: red-marianne-425 red-marianne-625,
@@ -41,8 +41,8 @@ $values: (
       lighter: red-marianne-950 red-marianne-100,
       lightest: red-marianne-975 red-marianne-75,
       main: red-marianne-main-472 red-marianne-main-472,
-      inverted: red-marianne-975 red-marianne-75,
-    ),
+      inverted: red-marianne-975 red-marianne-75
+    )
   ),
   system: (
     info: (
@@ -51,32 +51,32 @@ $values: (
       light: info-925 info-125,
       lighter: info-950 info-100,
       lightest: info-975 info-75,
-      main: info-main-525 info-main-525,
+      main: info-main-525 info-main-525
     ),
     success: (
       strong: success-425 success-625,
       softest: success-850 success-200,
       light: success-925 success-125,
       lighter: success-950 success-100,
       lightest: success-975 success-75,
-      main: success-main-525 success-main-525,
+      main: success-main-525 success-main-525
     ),
     warning: (
       strong: warning-425 warning-625,
       softest: warning-850 warning-200,
       light: warning-925 warning-125,
       lighter: warning-950 warning-100,
       lightest: warning-975 warning-75,
-      main: warning-main-525 warning-main-525,
+      main: warning-main-525 warning-main-525
     ),
     error: (
       strong: error-425 error-625,
       softest: error-850 error-200,
       light: error-925 error-125,
       lighter: error-950 error-100,
       lightest: error-975 error-75,
-      main: error-main-525 error-main-525,
-    ),
+      main: error-main-525 error-main-525
+    )
   ),
   accent: (
     green-tilleul-verveine: (
@@ -85,135 +85,135 @@ $values: (
       light: green-tilleul-verveine-925 green-tilleul-verveine-125,
       lighter: green-tilleul-verveine-950 green-tilleul-verveine-100,
       lightest: green-tilleul-verveine-975 green-tilleul-verveine-75,
-      main: green-tilleul-verveine-main-707 green-tilleul-verveine-main-707,
+      main: green-tilleul-verveine-main-707 green-tilleul-verveine-main-707
     ),
     green-bourgeon: (
       strong: green-bourgeon-sun-425 green-bourgeon-moon-759,
       softest: green-bourgeon-850 green-bourgeon-200,
       light: green-bourgeon-925 green-bourgeon-125,
       lighter: green-bourgeon-950 green-bourgeon-100,
       lightest: green-bourgeon-975 green-bourgeon-75,
-      main: green-bourgeon-main-640 green-bourgeon-main-640,
+      main: green-bourgeon-main-640 green-bourgeon-main-640
     ),
     green-emeraude: (
       strong: green-emeraude-sun-425 green-emeraude-moon-753,
       softest: green-emeraude-850 green-emeraude-200,
       light: green-emeraude-925 green-emeraude-125,
       lighter: green-emeraude-950 green-emeraude-100,
       lightest: green-emeraude-975 green-emeraude-75,
-      main: green-emeraude-main-632 green-emeraude-main-632,
+      main: green-emeraude-main-632 green-emeraude-main-632
     ),
     green-menthe: (
       strong: green-menthe-sun-373 green-menthe-moon-652,
       softest: green-menthe-850 green-menthe-200,
       light: green-menthe-925 green-menthe-125,
       lighter: green-menthe-950 green-menthe-100,
       lightest: green-menthe-975 green-menthe-75,
-      main: green-menthe-main-548 green-menthe-main-548,
+      main: green-menthe-main-548 green-menthe-main-548
     ),
     green-archipel: (
       strong: green-archipel-sun-391 green-archipel-moon-716,
       softest: green-archipel-850 green-archipel-200,
       light: green-archipel-925 green-archipel-125,
       lighter: green-archipel-950 green-archipel-100,
       lightest: green-archipel-975 green-archipel-75,
-      main: green-archipel-main-557 green-archipel-main-557,
+      main: green-archipel-main-557 green-archipel-main-557
     ),
     blue-ecume: (
       strong: blue-ecume-sun-247 blue-ecume-moon-675,
       softest: blue-ecume-850 blue-ecume-200,
       light: blue-ecume-925 blue-ecume-125,
       lighter: blue-ecume-950 blue-ecume-100,
       lightest: blue-ecume-975 blue-ecume-75,
-      main: blue-ecume-main-400 blue-ecume-main-400,
+      main: blue-ecume-main-400 blue-ecume-main-400
     ),
     blue-cumulus: (
       strong: blue-cumulus-sun-368 blue-cumulus-moon-732,
       softest: blue-cumulus-850 blue-cumulus-200,
       light: blue-cumulus-925 blue-cumulus-125,
       lighter: blue-cumulus-950 blue-cumulus-100,
       lightest: blue-cumulus-975 blue-cumulus-75,
-      main: blue-cumulus-main-526 blue-cumulus-main-526,
+      main: blue-cumulus-main-526 blue-cumulus-main-526
     ),
     purple-glycine: (
       strong: purple-glycine-sun-319 purple-glycine-moon-630,
       softest: purple-glycine-850 purple-glycine-200,
       light: purple-glycine-925 purple-glycine-125,
       lighter: purple-glycine-950 purple-glycine-100,
       lightest: purple-glycine-975 purple-glycine-75,
-      main: purple-glycine-main-494 purple-glycine-main-494,
+      main: purple-glycine-main-494 purple-glycine-main-494
     ),
     pink-macaron: (
       strong: pink-macaron-sun-406 pink-macaron-moon-833,
       softest: pink-macaron-850 pink-macaron-200,
       light: pink-macaron-925 pink-macaron-125,
       lighter: pink-macaron-950 pink-macaron-100,
       lightest: pink-macaron-975 pink-macaron-75,
-      main: pink-macaron-main-689 pink-macaron-main-689,
+      main: pink-macaron-main-689 pink-macaron-main-689
     ),
     pink-tuile: (
       strong: pink-tuile-sun-425 pink-tuile-moon-750,
       softest: pink-tuile-850 pink-tuile-200,
       light: pink-tuile-925 pink-tuile-125,
       lighter: pink-tuile-950 pink-tuile-100,
       lightest: pink-tuile-975 pink-tuile-75,
-      main: pink-tuile-main-556 pink-tuile-main-556,
+      main: pink-tuile-main-556 pink-tuile-main-556
     ),
     yellow-tournesol: (
       strong: yellow-tournesol-sun-407 yellow-tournesol-moon-922,
       softest: yellow-tournesol-850 yellow-tournesol-200,
       light: yellow-tournesol-925 yellow-tournesol-125,
       lighter: yellow-tournesol-950 yellow-tournesol-100,
       lightest: yellow-tournesol-975 yellow-tournesol-75,
-      main: yellow-tournesol-main-731 yellow-tournesol-main-731,
+      main: yellow-tournesol-main-731 yellow-tournesol-main-731
     ),
     yellow-moutarde: (
       strong: yellow-moutarde-sun-348 yellow-moutarde-moon-860,
       softest: yellow-moutarde-850 yellow-moutarde-200,
       light: yellow-moutarde-925 yellow-moutarde-125,
       lighter: yellow-moutarde-950 yellow-moutarde-100,
       lightest: yellow-moutarde-975 yellow-moutarde-75,
-      main: yellow-moutarde-main-679 yellow-moutarde-main-679,
+      main: yellow-moutarde-main-679 yellow-moutarde-main-679
     ),
     orange-terre-battue: (
       strong: orange-terre-battue-sun-370 orange-terre-battue-moon-672,
       softest: orange-terre-battue-850 orange-terre-battue-200,
       light: orange-terre-battue-925 orange-terre-battue-125,
       lighter: orange-terre-battue-950 orange-terre-battue-100,
       lightest: orange-terre-battue-975 orange-terre-battue-75,
-      main: orange-terre-battue-main-645 orange-terre-battue-main-645,
+      main: orange-terre-battue-main-645 orange-terre-battue-main-645
     ),
     brown-cafe-creme: (
       strong: brown-cafe-creme-sun-383 brown-cafe-creme-moon-885,
       softest: brown-cafe-creme-850 brown-cafe-creme-200,
       light: brown-cafe-creme-925 brown-cafe-creme-125,
       lighter: brown-cafe-creme-950 brown-cafe-creme-100,
       lightest: brown-cafe-creme-975 brown-cafe-creme-75,
-      main: brown-cafe-creme-main-782 brown-cafe-creme-main-782,
+      main: brown-cafe-creme-main-782 brown-cafe-creme-main-782
     ),
     brown-caramel: (
       strong: brown-caramel-sun-425 brown-caramel-moon-901,
       softest: brown-caramel-850 brown-caramel-200,
       light: brown-caramel-925 brown-caramel-125,
       lighter: brown-caramel-950 brown-caramel-100,
       lightest: brown-caramel-975 brown-caramel-75,
-      main: brown-caramel-main-648 brown-caramel-main-648,
+      main: brown-caramel-main-648 brown-caramel-main-648
     ),
     brown-opera: (
       strong: brown-opera-sun-395 brown-opera-moon-820,
       softest: brown-opera-850 brown-opera-200,
       light: brown-opera-925 brown-opera-125,
       lighter: brown-opera-950 brown-opera-100,
       lightest: brown-opera-975 brown-opera-75,
-      main: brown-opera-main-680 brown-opera-main-680,
+      main: brown-opera-main-680 brown-opera-main-680
     ),
     beige-gris-galet: (
       strong: beige-gris-galet-sun-407 beige-gris-galet-moon-821,
       softest: beige-gris-galet-850 beige-gris-galet-200,
       light: beige-gris-galet-925 beige-gris-galet-125,
       lighter: beige-gris-galet-950 beige-gris-galet-100,
       lightest: beige-gris-galet-975 beige-gris-galet-75,
-      main: beige-gris-galet-main-702 beige-gris-galet-main-702,
-    ),
-  ),
+      main: beige-gris-galet-main-702 beige-gris-galet-main-702
+    )
+  )
 );

src/utility/colors/.package.yml

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

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/background/index.ejs

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

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

@@ -0,0 +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', borders: bordersWidth}, false); %>

src/utility/colors/example/index.ejs

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

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

@@ -0,0 +1,66 @@
+<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>
+  <% } %>
+<% } %>