@trilogy-ds/styles 0.0.1-beta.9 → 0.0.3-beta-v4

package/framework/src/elements/_tag.scss

@@ -1,131 +1,130 @@
-$tag-radius: $radius-rounded !default;
 $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;
-        }
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  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('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: getColor('neutral-fade');
+  border-radius: 9999px;
+  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: fadeColor($name);
     }
     &.is-inverted.is-#{$name} {
       color: getColor($name);
+      background-color: invertColor($name);
     }
   }
 }

package/framework/src/elements/_textarea.scss

@@ -1,125 +1,133 @@
 .textarea-wrapper {
-    position: relative;
-    margin: 16px 0;
+  position: relative;
+  margin: 16px 0;
+
+  .textarea-label {
+    display: inline-block;
+    margin-bottom: 6px;
+  }
+
+  .textarea-sample {
+    margin-bottom: 10px !important;
+  }
+
+  textarea.textarea {
+    padding: $spacing-4;
+    border-radius: var(--radius-small);
+    outline: none;
+
+    &:focus,
+    &:focus-visible {
+      padding: 15px;
+    }
 
-    textarea.textarea {
-        padding: $spacing-4;
-        border-radius: 4px;
-        outline: none;
+    &::placeholder {
+      font-size: 16px;
+    }
 
-        &::placeholder {
-            font-size: 16px;
-        }
+    &.has-dynamic-label {
+      &.has-icon ~ label {
+        left: $spacing-9;
+        margin-right: 2px;
+        width: calc(100% - 98px);
+      }
 
-        &.has-dynamic-label {
-            &.has-icon ~ label {
-                left: $spacing-9;
-                margin-right: 2px;
-                width: calc(100% - 96px - 2px);
-            }
-
-            ~ label {
-                visibility: visible;
-                position: absolute;
-                top: 2px;
-                left: $spacing-4;
-                padding-top: $spacing-2;
-                width: calc(100% - 28px - 2px);
-                font-size: 12px;
-                color: getColor('grey');
-                transition: top 0.2s ease-out;
-                background-color: getColor('background');
-            }
-
-            &:placeholder-shown {
-                ~ label {
-                    visibility: hidden;
-                    top: $spacing-4;
-                    background-color: getColor('background');
-                    transition: none;
-                }
-            }
-
-            &:not(:placeholder-shown) {
-                padding-top: $spacing-5;
-            }
+      ~ label {
+        visibility: visible;
+        position: absolute;
+        top: 2px;
+        left: $spacing-4;
+        padding-top: $spacing-2;
+        width: calc(100% - 28px - 2px);
+        font-size: 12px;
+        color: getColor('font');
+        filter: grayscale(100%);
+        transition: top 0.2s ease-out;
+      }
+
+      &:placeholder-shown {
+        ~ label {
+          visibility: hidden;
+          top: $spacing-4;
+          background-color: getColor('background');
+          transition: none;
         }
+      }
 
-        &:disabled {
-            background-color: getColor('grey-disabled');
-            border-color: getColor('grey-disabled');
-            color: getColor('grey-dark');
-
-            &::placeholder {
-                color: black;
-            }
-
-            & ~ span.icon {
-              color:  getColor('grey');
-            }
-        }
+      &:not(:placeholder-shown) {
+        padding-top: $spacing-5;
+      }
+    }
 
-        &.has-icon {
-            padding-left: $spacing-9;
-            padding-right: $spacing-9;
+    &.has-icon {
+      padding-left: $spacing-9;
+      padding-right: $spacing-9;
 
-            &:hover,
-            &:focus,
-            &:focus-visible {
-                padding-left: 55px;
-                padding-right: 55px;
-            }
-        }
+      &:focus,
+      &:focus-visible {
+        padding-left: 55px !important;
+        padding-right: 55px;
+      }
     }
+  }
 
-    label {
-        font-size: 16px;
-    }
+  label {
+    font-size: 16px;
+  }
 
-    span.icon {
-        position: absolute;
-        top: $spacing-4;
+   .textarea-label + .textarea-sample ~ span.icon {
+    top: 72px !important;
+  }
 
-        &:first-of-type {
-            left: $spacing-4;
-        }
+  .textarea-label ~ span.icon {
+    top: 45px !important;
+  }
 
-        &:nth-of-type(2) {
-            right: $spacing-4;
-        }
-    }
+  span.icon {
+    position: absolute;
+    top: $spacing-4;
 
-    // Colors
-    @each $name, $pair in $colors-brand-funcionnal {
-      $color: getColor($name);
-      $color-invert: invertColor($name);
-      $brandName: getColorBrandName($name);
-        &.is-#{$brandName} {
-            textarea.textarea {
-                border-color: $color;
-                &:active,
-                &:focus,
-                &:focus-visible {
-                    &:not(:placeholder-shown) {
-                        padding-top: 29px;
-                    }
-                }
-            }
-
-            span.icon:nth-of-type(2) {
-              color: $color;
-            }
-        }
+    &:first-of-type {
+      left: $spacing-4;
     }
 
-    .counter {
-        position: absolute;
-        bottom: $spacing-2;
-        right: $spacing-4;
-        font-size: 10px;
+    &:nth-of-type(2) {
+      right: $spacing-4;
     }
+  }
+
+  // Colors
+  @each $name, $pair in $colors-brand-functionnal {
+    $color: getColor($name);
+    $color-invert: invertColor($name);
+    $brandName: getColorBrandName($name);
+    &.is-#{$brandName} {
+      textarea.textarea {
+        border-color: $color;
+
+        &:active,
+        &:focus,
+        &:focus-visible {
+          &:not(:placeholder-shown) {
+            padding-top: 29px;
+          }
+        }
+      }
 
-    .help ~ .counter {
-        bottom: $spacing-6;
+      span.icon:nth-of-type(2) {
+        color: $color;
+      }
     }
+  }
+
+  .counter {
+    position: absolute;
+    bottom: $spacing-2;
+    right: $spacing-4;
+    font-size: 10px;
+  }
+
+  .help ~ .counter {
+    bottom: $spacing-6;
+  }
 }

package/framework/src/elements/_title.scss

@@ -7,13 +7,13 @@ $title-strong-weight: inherit;
 $title-sub-size: 0.5em;
 $title-sup-size: 0.5em;
 
-$subtitle-size: $text-15;
-$subtitle-weight: $weight-semibold;
+$subtitle-size: $text-16;
+$subtitle-weight: $weight-medium;
 $subtitle-size-tablet: $text-15;
 $subtitle-line-height: 1.2;
 $subtitle-strong-weight: $weight-semibold;
 
-$overline-size: $text-15;
+$overline-size: $text-14;
 $overline-weight: $weight-semibold;
 $overline-line-height: 1.2;
 $overline-size-tablet: $text-15;
@@ -38,102 +38,104 @@ $title-levels-mobile: (
 .title,
 .subtitle,
 .overline {
-    word-break: break-word;
+  word-break: break-word;
 
-    em,
-    span {
-        font-weight: inherit;
-    }
+  em,
+  span {
+    font-weight: inherit;
+  }
 
-    .tag {
-        vertical-align: middle;
-    }
+  .tag {
+    vertical-align: middle;
+  }
 }
 
 .title {
-    font-size: $text-32;
-    font-weight: $title-weight;
-    line-height: $title-line-height;
-
-    // new typography
-    @each $title-level in $title-levels {
-        $i: index($title-levels, $title-level);
-        $font-size: nth($title-level, 1);
-        $line-height: nth($title-level, 2);
-        $font-family: nth($title-level, 3);
-
-        &.is-level-#{$i} {
-            font-size: $font-size;
-            line-height: $line-height;
-            font-family: $font-family;
-        }
-
-        &.is-medium {
-            font-weight: $weight-medium;
-        }
-
-        &.is-inverted {
-            color: getColor('background');
-        }
-
-        .details {
-            font-size: 80%;
-            color: getColor('grey');
-            font-weight: $weight-normal;
-        }
-
-        &.is-section-title {
-            text-align: center;
-        }
-
-        @include tablet {
-            font-size: $text-40;
-        }
-
-        sup {
-            top: -0.5em;
-            font-size: $title-sup-size;
-        }
-
-        sub {
-            bottom: -0.5em;
-            font-size: $title-sub-size;
-        }
-
-        &.is-centered {
-            text-align: center;
-        }
+  font-size: $text-32;
+  font-weight: $title-weight;
+  line-height: $title-line-height;
+
+  // new typography
+  @each $title-level in $title-levels {
+    $i: index($title-levels, $title-level);
+    $font-size: nth($title-level, 1);
+    $line-height: nth($title-level, 2);
+    $font-family: nth($title-level, 3);
+
+    &.is-level-#{$i} {
+      font-size: $font-size;
+      line-height: $line-height;
+      font-family: $font-family;
     }
 
-    @include mobile {
-        @each $title-level-mobile in $title-levels-mobile {
-            $i: index($title-levels-mobile, $title-level-mobile);
-            $font-size-mobile: nth($title-level-mobile, 1);
-            $line-height-mobile: nth($title-level-mobile, 2);
-            &.is-level-#{$i} {
-                font-size: $font-size-mobile;
-                line-height: $line-height-mobile;
-            }
-        }
+    &.is-medium {
+      font-weight: $weight-medium;
     }
-}
 
-.subtitle {
-    color: getColor('alternate');
-    font-size: $subtitle-size;
-    font-weight: $subtitle-weight;
-    line-height: $subtitle-line-height;
     &.is-inverted {
-        color: getColor('background');
+      color: getColor('background');
+    }
+
+    .details {
+      font-size: 80%;
+      color: getColor('neutral');
+      font-weight: $weight-normal;
+    }
+
+    &.is-section-title {
+      text-align: center;
+    }
+
+    @include tablet {
+      font-size: $text-40;
+    }
+
+    sup {
+      top: -0.5em;
+      font-size: $title-sup-size;
+    }
+
+    sub {
+      bottom: -0.5em;
+      font-size: $title-sub-size;
+    }
+
+    &.is-centered {
+      text-align: center;
+    }
+  }
+
+  @include mobile {
+    @each $title-level-mobile in $title-levels-mobile {
+      $i: index($title-levels-mobile, $title-level-mobile);
+      $font-size-mobile: nth($title-level-mobile, 1);
+      $line-height-mobile: nth($title-level-mobile, 2);
+      &.is-level-#{$i} {
+        font-size: $font-size-mobile;
+        line-height: $line-height-mobile;
+      }
     }
+  }
+}
+
+.subtitle {
+  color: getColor('font');
+  font-size: $subtitle-size;
+  font-weight: $subtitle-weight;
+  line-height: $subtitle-line-height;
+
+  &.is-inverted {
+    color: getColor('background');
+  }
 }
 
 .overline {
-    color: getColor('alternate');
-    font-size: $overline-size;
-    font-weight: $overline-weight;
-    line-height: $overline-line-height;
-    &.is-inverted {
-        color: getColor('background');
-    }
+  color: getColor('font');
+  font-size: $overline-size;
+  font-weight: $overline-weight;
+  line-height: $overline-line-height;
+
+  &.is-inverted {
+    color: getColor('background');
+  }
 }

package/framework/src/elements/_toaster.scss

@@ -13,8 +13,8 @@ a.toaster {
     @include apply-shadow-box();
 
 
-  background-color: getColor('bg-info');
-  border-radius: $radius;
+  background-color: getColor('info-fade');
+  border-radius: var(--radius);
   margin-bottom: 16px;
   position: relative;
     margin-left: 24px;
@@ -62,10 +62,9 @@ a.toaster {
         background: transparent;
     }
 
-  @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: fadeColor($name);
       border: 2px solid getColor($name);
 
       .icon {