@trilogy-ds/styles 0.0.1-beta-3 → 0.0.1-beta.10

package/framework/src/elements/_switch.scss

@@ -1,108 +1,105 @@
 .switch {
-    position: relative;
-    margin: 8px;
+  position: relative;
+  margin: 8px;
 
-    input {
-        display: none;
+  input {
+    display: none;
 
-        &:disabled ~ label,
-        &:disabled:checked ~ label {
-          &:hover {
-            cursor: no-drop;
-          }
-
-          &:before {
-            background-color: getColor('grey-disabled');
-          }
-        }
+    &:disabled ~ label,
+    &:disabled:checked ~ label {
+      cursor: not-allowed;
+      &:before {
+        background-color: getColor('disabled');
+      }
+    }
 
-        &:disabled ~ label {
-          &:after {
-            $colorSvg: encodecolor(getColorValue('grey-dark'));
-            content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
-          }
-        }
+    &:disabled ~ label {
+      &:after {
+        $colorSvg: encodecolor(getColorValue('neutral-dark'));
+        content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
+      }
+    }
 
-        &:disabled:checked ~ label {
-            &:after {
-              $colorSvg: encodecolor(getColorValue('grey-dark'));
-              content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
-            }
-        }
+    &:disabled:checked ~ label {
+      &:after {
+        $colorSvg: encodecolor(getColorValue('neutral-dark'));
+        content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
+      }
     }
+  }
 
-    label {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        padding: $spacing-1;
-        padding-right: 60px;
+  label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: $spacing-1;
+    padding-right: 60px;
 
-        &:before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: 0;
-            border-radius: 24px;
-            width: 44px;
-            height: 22px;
-            background-color: getColorValue('grey');
-            margin-left: 16px;
-        }
+    &:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 0;
+      border-radius: 24px;
+      width: 44px;
+      height: 22px;
+      background-color: getBGColor('font');
+      margin-left: 16px;
+    }
 
-        &:after {
-            $colorSvg: encodecolor(getColorValue('grey'));
-            content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: calc(44px - 18px - 2px);
-            border-radius: 50%;
-            width: 18px;
-            height: 18px;
-            background-color: getColorValue('background');
-            transition: 0.3s;
-        }
+    &:after {
+      $colorSvg: encodecolor(getBGColorValue('font'));
+      content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: calc(44px - 18px - 2px);
+      border-radius: 50%;
+      width: 18px;
+      height: 18px;
+      background-color: getColorValue('background');
+      transition: 0.3s;
     }
+  }
 
-    input:checked {
-        & ~ label {
-            font-weight: bold;
+  input:checked {
+    & ~ label {
+      font-weight: bold;
 
-            &:before {
-                background-color: getColorValue('alternate');
-            }
+      &:before {
+        background-color: getColorValue('main');
+      }
 
-            &:after {
-                right: 2px;
-                $colorSvg: encodecolor(getColorValue('alternate'));
-                content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
-                background-color: getColorValue('background');
-            }
-        }
+      &:after {
+        right: 2px;
+        $colorSvg: encodecolor(getColorValue('main'));
+        content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
+        background-color: getColorValue('background');
+      }
     }
+  }
 
-    &.is-reversed {
-        label {
-            flex-direction: row-reverse;
-            padding-right: 0;
-            padding-left: 60px;
+  &.is-reversed {
+    label {
+      flex-direction: row-reverse;
+      padding-right: 0;
+      padding-left: 60px;
 
-            &:before {
-                left: 0;
-                margin-left: 0;
-                margin-right: 16px;
-            }
+      &:before {
+        left: 0;
+        margin-left: 0;
+        margin-right: 16px;
+      }
 
-            &:after {
-                left: 2px;
-            }
-        }
+      &:after {
+        left: 2px;
+      }
+    }
 
-        input:checked ~ label:after {
-            left: calc(44px - 18px - 2px);
-        }
+    input:checked ~ label:after {
+      left: calc(44px - 18px - 2px);
     }
+  }
 }

package/framework/src/elements/_table.scss

@@ -11,7 +11,7 @@
     @include block;
 
     background-color: transparent;
-    color: getColor('grey-dark');
+    color: getColor('neutral-dark');
 
     &:not(:last-child) {
         margin-bottom: 30px;
@@ -21,12 +21,12 @@
     * @deprecated "Use multiples <tr><th> instead"
     */
     tbody .is-body-header {
-        background-color: getColor('grey-light');
+        background-color: getBGColor('neutral-dark');
     }
 
     td,
     th {
-        border: 1px solid getColor('grey-light');
+        border: 1px solid getBGColor('neutral-dark');
         border-width: 0;
         padding: 20px;
         vertical-align: top;
@@ -53,10 +53,9 @@
     }
 
     tr {
-        @each $name, $pair in $colors-feedback {
-          $bg-color: nth($pair, 1);
+        @each $name in $colors-feedback {
           &.is-#{$name} {
-                background-color:getColor($bg-color);
+                background-color:getBGColor($name);
             }
         }
 
@@ -71,7 +70,7 @@
         }
 
         td {
-            border-bottom: 1px solid getColor('grey-light');
+            border-bottom: 1px solid getBGColor('neutral-dark');
 
             > p {
                 margin: 0;
@@ -155,45 +154,12 @@
 
     &:not(.is-bordered).is-comparative {
         th {
-            border-right: 1px solid getColor('grey-lighter');
+            border-right: 1px solid getBGColor('neutral');
         }
 
         td {
             &:not(:last-child) {
-                border-right: 1px solid getColor('grey-light');
-            }
-        }
-    }
-
-    &.is-compact {
-        td,
-        th {
-            padding: math.div(20px, 3) math.div(20px, 3);
-        }
-    }
-
-    &.is-large {
-        thead {
-            height: 50px;
-
-            th {
-                color: getVariantColor('alternate',2);
-                font-weight: 600;
-                text-transform: uppercase;
-            }
-        }
-
-        tbody {
-            border-top: 1px solid #d8d8d8;
-
-            tr {
-                td {
-                    height: 40px;
-                }
-
-                &:not(.is-body-header) td {
-                    height: 96px;
-                }
+                border-right: 1px solid getBGColor('neutral-dark');
             }
         }
     }
@@ -218,45 +184,18 @@
         width: 100%;
     }
 
-    &.is-hoverable {
-        tbody {
-            tr:not(.is-selected) {
-                &:hover {
-                    background-color: getColor('grey-lighter');
-                }
-            }
-        }
-
-        &.is-striped {
-            tbody {
-                tr:not(.is-selected) {
-                    &:hover {
-                        background-color: getColor('grey-light');
-                    }
-                }
-            }
-        }
-    }
-
-    &.is-narrow {
-        td,
-        th {
-            padding: 0.25em 0.5em;
-        }
-    }
-
     &.is-striped {
         tbody {
             tr:not(.is-selected) {
                 &:nth-child(even) {
-                    background-color: getColor('grey-lighter');
+                    background-color: getBGColor('neutral');
                 }
             }
         }
     }
 
     .subtable {
-        background-color: getColor('grey-lighter');
+        background-color: getBGColor('neutral');
         border-radius: $radius;
         padding: $box-padding * 2;
 
@@ -269,7 +208,7 @@
 
             tr:not(:first-child) {
                 td {
-                    border-top: 1px solid getColor('grey-dark');
+                    border-top: 1px solid getColor('neutral-dark');
                 }
             }
 

package/framework/src/elements/_tag.scss

@@ -3,129 +3,129 @@ $tag-delete-margin: 1px !default;
 
 // container pour multi-tags ou tags avec actions
 .tags {
-    align-items: center;
-    display: inline-flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin-bottom: 16px;
-
-    // multi-tags : ajout d'une marge bottom, supprimable par facette
-    &:not(.is-gapless) {
-        &:not(:last-child) {
-            margin-right: 8px;
-        }
-
-        .tag {
-            margin-bottom: 10px;
-        }
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 16px;
+
+  // multi-tags : ajout d'une marge bottom, supprimable par facette
+  &:not(.is-gapless) {
+    &:not(:last-child) {
+      margin-right: 8px;
     }
 
-    // multi-tags : ajout d'une marge à droite de chaque tag
-    .tag:not(:last-child) {
-        margin-right: 8px;
+    .tag {
+      margin-bottom: 10px;
     }
+  }
 
-    // centrage des tags
-    &.is-centered {
-        justify-content: center;
-    }
+  // multi-tags : ajout d'une marge à droite de chaque tag
+  .tag:not(:last-child) {
+    margin-right: 8px;
+  }
 
-    // tags avec actions
-    &.has-addons {
-        cursor: pointer;
-
-        .tag {
-            margin-right: 0;
-
-            &:not(:first-child) {
-                border-bottom-left-radius: 0;
-                border-top-left-radius: 0;
-            }
-
-            &:not(:last-child) {
-                border-bottom-right-radius: 0;
-                border-top-right-radius: 0;
-            }
-
-            &:first-child {
-                padding-right: 5px;
-            }
-
-            + .tag {
-                padding: 0;
-                position: relative;
-                width: 25px;
-                border-width: 0;
-
-                // fixme : cette règle ne devrait-elle pas s'appliquer à TOUS les buttons ?
-                cursor: inherit;
-
-                // affichage d'une fausse croix avec 2 traits penchés
-                &:empty {
-                    &::before,
-                    &::after {
-                        position: absolute;
-                        content: '';
-                        height: 10px;
-                        width: 2px;
-                        background-color: currentColor;
-                        top: 50%;
-                        left: 30%;
-                    }
-
-                    &::before {
-                        transform: translate(50%, -50%) rotate(45deg);
-                    }
-
-                    &::after {
-                        transform: translate(50%, -50%) rotate(-45deg);
-                    }
-                }
-            }
-        }
+  // centrage des tags
+  &.is-centered {
+    justify-content: center;
+  }
 
-        &.is-inverted {
-            .tag {
-                background-color: getColor(getColor('background'));
-            }
+  // tags avec actions
+  &.has-addons {
+    cursor: pointer;
+
+    .tag {
+      margin-right: 0;
+
+      &:not(:first-child) {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      &:first-child {
+        padding-right: 5px;
+      }
+
+      + .tag {
+        padding: 0;
+        position: relative;
+        width: 25px;
+        border-width: 0;
+
+        // fixme : cette règle ne devrait-elle pas s'appliquer à TOUS les buttons ?
+        cursor: inherit;
+
+        // affichage d'une fausse croix avec 2 traits penchés
+        &:empty {
+          &::before,
+          &::after {
+            position: absolute;
+            content: '';
+            height: 10px;
+            width: 2px;
+            background-color: currentColor;
+            top: 50%;
+            left: 30%;
+          }
+
+          &::before {
+            transform: translate(50%, -50%) rotate(45deg);
+          }
+
+          &::after {
+            transform: translate(50%, -50%) rotate(-45deg);
+          }
         }
+      }
+    }
 
+    &.is-inverted {
+      .tag {
+        background-color: getColor(getColor('background'));
+      }
     }
+
+  }
 }
 
 .tag {
-    align-items: center;
-    background-color: getColor('background');
-    border-radius: $tag-radius;
-    color: getColor('font');
-    display: inline-flex;
-    font-size: $size-medium;
-    font-weight: $weight-medium;
-    height: 28px;
-    justify-content: center;
-    line-height: 20px;
-    padding: $spacing-1 $spacing-2;
-    white-space: nowrap;
-
-    &.is-small {
-        font-size: $text-12;
-        line-height: 15px;
-        height: 23px;
-    }
+  align-items: center;
+  background-color: getBGColor('font');
+  border-radius: $tag-radius;
+  color: getColor('font');
+  display: inline-flex;
+  font-size: $size-medium;
+  font-weight: $weight-medium;
+  height: 28px;
+  justify-content: center;
+  line-height: 20px;
+  padding: $spacing-1 $spacing-2;
+  white-space: nowrap;
+
+  &.is-small {
+    font-size: $text-12;
+    line-height: 15px;
+    height: 23px;
+  }
 
 
-    @include mobile {
-        font-size: 12px;
-        line-height: 15px;
-    }
+  @include mobile {
+    font-size: 12px;
+    line-height: 15px;
+  }
 
-  @each $name, $pair in $colors-feedback {
-    $bg-color: nth($pair, 1);
+  @each $name in $colors-feedback {
     &.is-#{$name}:not(.is-inverted) {
-      background-color: getColor($bg-color);
+      background-color: getBGColor($name);
     }
     &.is-inverted.is-#{$name} {
       color: getColor($name);
+      background-color: invertColor($name);
     }
   }
 }