From 21a5996ee3bd35cce21cb9927dd2d4f72981f048 Mon Sep 17 00:00:00 2001
From: Raphael Goetter <raphael@goetter.fr>
Date: Thu, 2 Nov 2017 16:07:27 +0100
Subject: [PATCH]  renommage des variables d'espacement (`$tiny-value` ->
 `$spacer-tiny`)

---
 changelog.md                  |  1 +
 sass/_config/_variables.scss  | 24 +++++++-------
 sass/_library/_layout.scss    |  6 ++--
 sass/_library/_utilities.scss | 60 +++++++++++++++++------------------
 sass/components/_alerts.scss  |  2 +-
 sass/components/_badges.scss  |  2 +-
 sass/components/_buttons.scss |  6 ++--
 sass/components/_forms.scss   |  6 ++--
 sass/components/_tables.scss  |  6 ++--
 sass/components/_tabs.scss    |  4 +--
 sass/components/_tags.scss    |  2 +-
 11 files changed, 60 insertions(+), 59 deletions(-)

diff --git a/changelog.md b/changelog.md
index 3da5da4..e5eaa42 100644
--- a/changelog.md
+++ b/changelog.md
@@ -7,6 +7,7 @@
   - regroupement des styles des tableaux
   - renommage des variables couleur de projets
   - renommage des variables de composants
+  - renommage des variables d'espacement (`$tiny-value` -> `$spacer-tiny`)
   - automatisation des classes utilitaires via Sass
   - suppression du namespace "kna-"
 - refonte :
diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss
index c9e1b95..f665d7a 100644
--- a/sass/_config/_variables.scss
+++ b/sass/_config/_variables.scss
@@ -84,18 +84,18 @@ $grid-gutters: (
 ) !default;
 
 // spacings
-$tiny-value             : .5rem  !default;
-$tiny-plus-value        : .7rem !default;
-$small-value            : 1rem !default;
-$small-plus-value       : 1.5rem !default;
-$medium-value           : 2rem !default;
-$medium-plus-value      : 3rem !default;
-$large-value            : 4rem !default;
-$large-plus-value       : 6rem !default;
-$extra-large-value      : 8rem !default;
-$extra-large-plus-value : 12rem !default;
-$ultra-large-value      : 16rem !default;
-$ultra-large-plus-value : 20rem !default;
+$spacer-tiny             : .5rem  !default;
+$spacer-tiny-plus        : .7rem !default;
+$spacer-small            : 1rem !default;
+$spacer-small-plus       : 1.5rem !default;
+$spacer-medium           : 2rem !default;
+$spacer-medium-plus      : 3rem !default;
+$spacer-large            : 4rem !default;
+$spacer-large-plus       : 6rem !default;
+$spacer-extra-large      : 8rem !default;
+$spacer-extra-large-plus : 12rem !default;
+$spacer-ultra-large      : 16rem !default;
+$spacer-ultra-large-plus : 20rem !default;
 
 // z-indexes
 $zindex-navigation:    1000 !default;
diff --git a/sass/_library/_layout.scss b/sass/_library/_layout.scss
index c3af31f..58ca18b 100644
--- a/sass/_library/_layout.scss
+++ b/sass/_library/_layout.scss
@@ -56,7 +56,7 @@
 }
 
 img.fl {
-  margin-right: $small-value;
+  margin-right: $spacer-small;
 }
 
 .fr {
@@ -64,12 +64,12 @@ img.fl {
 }
 
 img.fr {
-  margin-left: $small-value;
+  margin-left: $spacer-small;
 }
 
 img.fl,
 img.fr {
-  margin-bottom: $tiny-value;
+  margin-bottom: $spacer-tiny;
 }
 
 /* inline-block */
diff --git a/sass/_library/_utilities.scss b/sass/_library/_utilities.scss
index 50f18cf..50537f7 100644
--- a/sass/_library/_utilities.scss
+++ b/sass/_library/_utilities.scss
@@ -107,27 +107,27 @@ $i: 1000;
 }
 
 .mas {
-  margin: $small-value;
+  margin: $spacer-small;
 }
 
 .mam {
-  margin: $medium-value;
+  margin: $spacer-medium;
 }
 
 .mal {
-  margin: $large-value;
+  margin: $spacer-large;
 }
 
 .pas {
-  padding: $small-value;
+  padding: $spacer-small;
 }
 
 .pam {
-  padding: $medium-value;
+  padding: $spacer-medium;
 }
 
 .pal {
-  padding: $large-value;
+  padding: $spacer-large;
 }
 
 .mtn,
@@ -136,15 +136,15 @@ $i: 1000;
 }
 
 .mts {
-  margin-top: $small-value;
+  margin-top: $spacer-small;
 }
 
 .mtm {
-  margin-top: $medium-value;
+  margin-top: $spacer-medium;
 }
 
 .mtl {
-  margin-top: $large-value;
+  margin-top: $spacer-large;
 }
 
 .mrn,
@@ -153,15 +153,15 @@ $i: 1000;
 }
 
 .mrs {
-  margin-right: $small-value;
+  margin-right: $spacer-small;
 }
 
 .mrm {
-  margin-right: $medium-value;
+  margin-right: $spacer-medium;
 }
 
 .mrl {
-  margin-right: $large-value;
+  margin-right: $spacer-large;
 }
 
 .mbn,
@@ -170,15 +170,15 @@ $i: 1000;
 }
 
 .mbs {
-  margin-bottom: $small-value;
+  margin-bottom: $spacer-small;
 }
 
 .mbm {
-  margin-bottom: $medium-value;
+  margin-bottom: $spacer-medium;
 }
 
 .mbl {
-  margin-bottom: $large-value;
+  margin-bottom: $spacer-large;
 }
 
 .mln,
@@ -187,15 +187,15 @@ $i: 1000;
 }
 
 .mls {
-  margin-left: $small-value;
+  margin-left: $spacer-small;
 }
 
 .mlm {
-  margin-left: $medium-value;
+  margin-left: $spacer-medium;
 }
 
 .mll {
-  margin-left: $large-value;
+  margin-left: $spacer-large;
 }
 
 .mauto {
@@ -224,15 +224,15 @@ $i: 1000;
 }
 
 .pts {
-  padding-top: $small-value;
+  padding-top: $spacer-small;
 }
 
 .ptm {
-  padding-top: $medium-value;
+  padding-top: $spacer-medium;
 }
 
 .ptl {
-  padding-top: $large-value;
+  padding-top: $spacer-large;
 }
 
 .prn,
@@ -241,15 +241,15 @@ $i: 1000;
 }
 
 .prs {
-  padding-right: $small-value;
+  padding-right: $spacer-small;
 }
 
 .prm {
-  padding-right: $medium-value;
+  padding-right: $spacer-medium;
 }
 
 .prl {
-  padding-right: $large-value;
+  padding-right: $spacer-large;
 }
 
 .pbn,
@@ -258,15 +258,15 @@ $i: 1000;
 }
 
 .pbs {
-  padding-bottom: $small-value;
+  padding-bottom: $spacer-small;
 }
 
 .pbm {
-  padding-bottom: $medium-value;
+  padding-bottom: $spacer-medium;
 }
 
 .pbl {
-  padding-bottom: $large-value;
+  padding-bottom: $spacer-large;
 }
 
 .pln,
@@ -275,13 +275,13 @@ $i: 1000;
 }
 
 .pls {
-  padding-left: $small-value;
+  padding-left: $spacer-small;
 }
 
 .plm {
-  padding-left: $medium-value;
+  padding-left: $spacer-medium;
 }
 
 .pll {
-  padding-left: $large-value;
+  padding-left: $spacer-large;
 }
diff --git a/sass/components/_alerts.scss b/sass/components/_alerts.scss
index ef70305..1628a65 100644
--- a/sass/components/_alerts.scss
+++ b/sass/components/_alerts.scss
@@ -4,7 +4,7 @@
 /* use .alert-- classes for variants */
 
 .alert {
-  padding: $small-value $small-value;
+  padding: $spacer-small $spacer-small;
   margin-top: 0.75em;
   margin-bottom: 0;
   color: $color-base;
diff --git a/sass/components/_badges.scss b/sass/components/_badges.scss
index bb1a5b4..3562d89 100644
--- a/sass/components/_badges.scss
+++ b/sass/components/_badges.scss
@@ -5,7 +5,7 @@
 
 .badge {
   display: inline-block;
-  padding: $tiny-value;
+  padding: $spacer-tiny;
   border-radius: 50%;
   color: $color-base;
   background-color: $color-muted;
diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
index 6cba8f5..e79ba3d 100644
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@@ -6,7 +6,7 @@
 
 %btn {
   display: inline-block;
-  padding: $small-value $small-plus-value;
+  padding: $spacer-small $spacer-small-plus;
   cursor: pointer;
   user-select: none;
   transition: 0.25s;
@@ -57,12 +57,12 @@ button {
 .btn,
 .button {
   &--small {
-    padding: $tiny-plus-value $small-value;
+    padding: $spacer-tiny-plus $spacer-small;
     font-size: .8em;
   }
 
   &--big {
-    padding: $small-plus-value $medium-value;
+    padding: $spacer-small-plus $spacer-medium;
     font-size: 1.4em;
   }
 
diff --git a/sass/components/_forms.scss b/sass/components/_forms.scss
index 007d74f..90721b5 100644
--- a/sass/components/_forms.scss
+++ b/sass/components/_forms.scss
@@ -10,10 +10,10 @@ fieldset {
 }
 
 fieldset {
-  padding: $medium-value;
+  padding: $spacer-medium;
 
   & legend {
-    padding: 0 $tiny-value;
+    padding: 0 $spacer-tiny;
     border: 0;
     white-space: normal;
   }
@@ -47,7 +47,7 @@ textarea {
   box-shadow: 0 0 0 1px $forms-color inset;
   color: $color-base;
   vertical-align: middle;
-  padding: $tiny-value $small-value;
+  padding: $spacer-tiny $spacer-small;
   margin: 0;
   transition: 0.25s;
   transition-property: box-shadow, background-color, color, border;
diff --git a/sass/components/_tables.scss b/sass/components/_tables.scss
index 815eb89..62f174f 100644
--- a/sass/components/_tables.scss
+++ b/sass/components/_tables.scss
@@ -9,7 +9,7 @@ table,
   table-layout: fixed;
   border-collapse: collapse;
   vertical-align: top;
-  margin-bottom: $medium-value;
+  margin-bottom: $spacer-medium;
 }
 
 .table {
@@ -25,7 +25,7 @@ table,
 
   & caption {
     caption-side: bottom;
-    padding: $small-value;
+    padding: $spacer-small;
     color: $table-caption-color;
     font-style: italic;
     text-align: right;
@@ -34,7 +34,7 @@ table,
   & td,
   & th {
     padding: 0.3rem 0.6rem;
-    min-width: $medium-value;
+    min-width: $spacer-medium;
     vertical-align: top;
     border: 1px $table-border dotted;
     text-align: left;
diff --git a/sass/components/_tabs.scss b/sass/components/_tabs.scss
index 25d6325..cd7a1a0 100644
--- a/sass/components/_tabs.scss
+++ b/sass/components/_tabs.scss
@@ -11,7 +11,7 @@
   &-link {
     display: block;
     margin-bottom: -2px;
-    padding: $tiny-value $medium-plus-value;
+    padding: $spacer-tiny $spacer-medium-plus;
     border-bottom: 4px solid transparent;
     color: $tabs-color;
     background: $tabs-background;
@@ -40,7 +40,7 @@
 }
 
 .tabs-content-item {
-  padding-top: $small-value;
+  padding-top: $spacer-small;
 
   &[aria-hidden="true"] {
     visibility: hidden;
diff --git a/sass/components/_tags.scss b/sass/components/_tags.scss
index 6bfc65f..18c5574 100644
--- a/sass/components/_tags.scss
+++ b/sass/components/_tags.scss
@@ -5,7 +5,7 @@
 
 .tag {
   display: inline-block;
-  padding: 3px $tiny-value;
+  padding: 3px $spacer-tiny;
   vertical-align: baseline;
   white-space: nowrap;
   color: $color-base;