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

package/framework/src/elements/_chips.scss

@@ -1,100 +1,84 @@
-$chip-radius: 30px !default;
+@import "../utilities/spacing";
 
 .chips-list {
-    align-items: center;
-    display: inline-flex;
-    justify-content: flex-start;
-    margin-bottom: 16px;
-    flex-wrap: wrap;
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: $spacing-2;
 
-    // multi-chips : ajout d'une marge bottom, supprimable par facette
-    &:not(.is-gapless) {
-        &:not(:last-child) {
-            margin-right: 8px;
-        }
+  // centrage des chips
+  &.is-centered {
+    justify-content: center;
+  }
 
-        .chips {
-            margin-bottom: 10px;
-        }
+  &.is-scrollable {
+    flex-wrap: nowrap;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      display: none;
     }
+  }
 
-    // multi-chips : ajout d'une marge à droite de chaque chip
-    .chips:not(:last-child) {
-        margin-right: 8px;
+  &.is-multiple {
+    .chips:before {
+      content: "";
+      mask-image: url('./assets/icons/all/check.svg');
+      background-color: currentColor;
+      margin-right: 4px;
+      margin-left: -8px;
+      width: 0;
+      height: 20px;
+      mask-size: 20px;
+      transition: width 250ms;
     }
-
-    // centrage des chips
-    &.is-centered {
-        justify-content: center;
+    .chips.is-active:before{
+      width: 20px;
     }
+  }
 
-    &.is-multiple {
-        .chips.is-active:before {
-            content: "";
-            mask-image: url('./assets/icons/all/check.svg');
-            background-color: getColor('background');
-            margin-right: 4px;
-            margin-left: -8px;
-            width: 20px;
-            height: 20px;
-            mask-size: 20px;
+  .chips {
+    align-items: center;
+    background-color: white;
+    border-radius: 9999px;
+    color: getColor('font');
+    display: inline-flex;
+    font-size: $size-normal;
+    height: 32px;
+    justify-content: center;
+    line-height: 2;
+    padding: 6px $spacing-4;
+    white-space: nowrap;
+    cursor: pointer;
+    border: var(--border);
+    &:not(.is-disabled) {
+      &.is-active {
+        background-color: getColor('main');
+        color: white;
+        border: var(--border-active);
+        padding: 5px ($spacing-4 - 1px);
+        #{$hoverSelector} {
+          background-color: getColor('main');
+          color: white;
         }
+      }
+      #{$hoverSelector} {
+        background-color: getColor('neutral-fade');
+      }
     }
 
-    .chips {
-        align-items: center;
-        background-color: getColor('grey-lighter');
-        border-radius: $chip-radius;
-        color: getColor('font');
-        display: inline-flex;
-        font-weight: 400;
-        font-size: $size-normal;
-        height: 32px;
-        justify-content: center;
-        line-height: 2;
-        padding: 6px $spacing-4;
-        white-space: nowrap;
-        cursor: pointer;
-        border: 1px solid getColor('grey-light');
+    &.is-inverted {
+      background-color: white;
+      color: getColor('accent');
 
-        &:not(.is-disabled) {
-            &:hover {
-                background-color: getColor('grey-light');
-                border: 2px solid currentColor;
-                color: getColor('alternate');
-                padding: 5px 15px;
-            }
-
-            &:focus,
-            &:focus-visible,
-            &.is-active {
-                background-color: getColor('alternate');
-                color: white;
-                font-weight: 600;
-                border: 2px solid getColor('alternate');
-                padding: 5px 15px;
-            }
-        }
-
-        &.is-disabled {
-            background-color: getColor('grey-disabled');
-            color: getColor('grey-darker');
-            cursor: no-drop;
-            border: 1px solid getColor('grey-disabled');
-        }
-
-        &.is-inverted {
-            background-color: white;
-            color: getColor('alternate');
-
-            &:active,
-            &:hover,
-            &:focus,
-            &:focus-visible,
-            &.is-active {
-                background-color: getColor('alternate') !important;
-                color: getColor('background') !important;
-            }
-        }
+      &:active,
+      &:hover,
+      &:focus,
+      &:focus-visible,
+      &.is-active {
+        background-color: getColor('accent') !important;
+        color: getColor('background') !important;
+      }
     }
+  }
 }

package/framework/src/elements/_container.scss

@@ -21,14 +21,7 @@
 
   @include desktop {
     max-width: $desktop - 2 * $gap;
-    width: $desktop - 2 * $gap;
-
-    &.is-fluid {
-      margin-left: $gap;
-      margin-right: $gap;
-      max-width: none;
-      width: auto;
-    }
+    width: auto;
   }
 
   @include until-widescreen {
@@ -51,34 +44,11 @@
   }
 
   @include fullhd {
+    margin: 0 auto;
     max-width: $fullhd - 2 * $gap;
     width: $fullhd - 2 * $gap;
   }
 
-  &:not(.is-fluid) {
-    @include desktop {
-      width: 904px;
-      max-width: 904px;
-    }
-
-    @include widescreen {
-      width: 1160px;
-      max-width: 1160px;
-    }
-
-    @include fullhd {
-      width: 1308px;
-      max-width: 1308px;
-    }
-  }
-
-  &.is-fluid {
-    @include fullhd {
-      margin: 0 auto;
-      max-width: $fullhd - 2 * $gap;
-    }
-  }
-
   &.is-medium {
     max-width: 960px;
     margin: auto;
@@ -95,14 +65,12 @@ header .navbar,
 header,
 footer {
   > .container {
-    &.is-fluid {
-      @include desktop {
-        margin: 0 auto;
-      }
+    @include desktop {
+      margin: 0 auto;
+    }
 
-      @include fullhd {
-        max-width: 100%;
-      }
+    @include fullhd {
+      max-width: 100%;
     }
   }
 }

package/framework/src/elements/_entry.scss

@@ -1,109 +1,97 @@
 .input,
 .textarea {
-    @include input;
-
-    padding-left: $spacing-4;
-    padding-right: $spacing-4;
-    font-family: $body-family;
-    font-size: $size-medium;
-    max-width: 100%;
-    width: 100%;
-
-    &:focus-visible,
-    :focus {
-      outline: 1px auto getColor('alternate');
+  @include input;
+
+  padding-left: $spacing-4;
+  padding-right: $spacing-4;
+  font-size: $size-medium;
+  max-width: 100%;
+  width: 100%;
+
+  // Colors
+  @each $name in $colors-brand-functionnal {
+    $color: getColor($name);
+    $color-invert: invertColor($name);
+    $brandName: getColorBrandName($name);
+
+    &.is-#{$brandName} {
+      border: 1px solid $color;
     }
+  }
 
-    // Colors
-    @each $name in $colors-brand-funcionnal {
-      $color: getColor($name);
-      $color-invert: invertColor($name);
-      $brandName: getColorBrandName($name);
-
-        &.is-#{$brandName} {
-          border: 2px solid $color;
-          &:focus-visible,
-          &:hover,
-          &.is-hovered,
-          &:focus,
-          &.is-focused {
-            outline: 1px auto $color !important;
-          }
-        }
-    }
+  &:active,
+  &:focus,
+  &:focus-visible:not(.icon) {
+    padding-left: 15px !important;
+  }
 
-    // Sizes
-    &.is-small {
-        @include control-small;
-    }
+  // Sizes
+  &.is-small {
+    @include control-small;
+  }
 
-    &.is-large {
-        @include control-large;
-    }
+  &.is-large {
+    @include control-large;
+  }
 
-    &.is-fullwidth {
-        display: block;
-        width: 100%;
-    }
+  &.is-fullwidth {
+    display: block;
+    width: 100%;
+  }
 
-    &.is-inline {
-        display: inline;
-    }
+  &.is-inline {
+    display: inline;
+  }
 
-    .icon-status {
-        color: aqua !important;
-    }
+  .icon-status {
+    color: aqua !important;
+  }
 
-    & label {
-      margin-top: 10px;
-    }
+  & label {
+    margin-top: 10px;
+  }
 }
 
 .input {
-    &::-ms-clear {
-        display: none;
-    }
-
-    &.is-small {
-        height: 24px;
-    }
-
-    &.is-rounded {
-        border-radius: $radius-rounded;
-        padding-left: 1em;
-        padding-right: 1em;
-    }
-
-    &.is-static {
-        background-color: transparent;
-        border-color: transparent;
-        padding-left: 0;
-        padding-right: 0;
-    }
+  &::-ms-clear {
+    display: none;
+  }
+
+  &.is-small {
+    height: 24px;
+  }
+
+  &.is-rounded {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  &.is-static {
+    background-color: transparent;
+    border-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 .textarea {
-    display: block;
-    max-width: 100%;
-    min-width: 100%;
-    resize: vertical;
-    padding-top: 15px;
-
+  display: block;
+  max-width: 100%;
+  min-width: 100%;
+  resize: vertical;
+  padding-top: 15px;
 
-    &:not([rows]) {
-        max-height: 600px;
-        min-height: 120px;
-    }
 
-    &[rows] {
-        height: initial;
-    }
+  &:not([rows]) {
+    max-height: 600px;
+    min-height: 120px;
+  }
 
-    &.has-fixed-size {
-        resize: none;
-    }
-}
+  &[rows] {
+    height: initial;
+  }
 
-.textarea[disabled]:hover {
-  outline: 1px auto getColor('grey-disabled') !important;
+  &.has-fixed-size {
+    resize: none;
+  }
 }

package/framework/src/elements/_form.scss

@@ -5,20 +5,21 @@ $help-size: $size-small;
 $label-weight: $weight-bold;
 
 .field {
-  &:not(:first-child) {
-    margin-top: $field-margin;
-  }
-
-  &:not(:last-child) {
-    margin-bottom: 7.5px;
-  }
-
   &.is-fullwidth {
     div.control {
       flex: 1;
     }
   }
 
+  .input-label {
+    display: inline-block;
+    margin-bottom: 6px;
+  }
+
+  .input-sample {
+    margin-bottom: 10px !important;
+  }
+
   @include mobile {
     &.is-very-short,
     &.is-short {
@@ -92,15 +93,12 @@ $label-weight: $weight-bold;
       .input,
       .textarea,
       .select select {
-        &:hover,
-        &.is-hovered {
+        &:hover {
           z-index: zindex('tiny');
         }
 
         &:focus,
-        &.is-focused,
-        &:active,
-        &.is-active {
+        &:active {
           z-index: zindex('small');
 
           &:hover {
@@ -220,10 +218,9 @@ $label-weight: $weight-bold;
 
     .input {
       @each $name, $pair in $colors-feedback {
-        $bg-color: nth($pair, 1);
         &.is-#{$name} {
           ~ .icon {
-            color: getColor($bg-color);
+            color: fadeColor($name);
           }
         }
       }
@@ -235,10 +232,9 @@ $label-weight: $weight-bold;
 
     .textarea {
       @each $name, $pair in $colors-feedback {
-        $bg-color: nth($pair, 1);
         &.is-#{$name} {
           ~ .icon {
-            color: getColor($bg-color)
+            color: fadeColor($name);
           }
         }
       }
@@ -259,6 +255,7 @@ $label-weight: $weight-bold;
       left: 0;
       border-top-left-radius: $radius;
       border-bottom-left-radius: $radius;
+      padding: 0 24px;
     }
 
     .textarea {
@@ -301,6 +298,7 @@ $label-weight: $weight-bold;
       right: 0;
       border-top-right-radius: $radius;
       border-bottom-right-radius: $radius;
+      padding: 0 24px;
     }
   }
 
@@ -331,7 +329,8 @@ $label-weight: $weight-bold;
       left: 16px;
       border-left: transparent 1px solid;
       font-size: $text-12;
-      color: getColor('grey');
+      color: getColor('font');
+      filter: grayscale(1);
       transform: translateY(0);
       transition: all 0.2s ease-out;
       z-index: zindex('small');
@@ -392,20 +391,20 @@ $label-weight: $weight-bold;
   &.has-password-discover {
     .input {
       ~ .icon:not(:last-child) {
-        color: getColor('grey');
+        color: getColor('neutral');
         background-color: transparent;
         right: 45px;
         cursor: pointer;
+
         &:hover,
         &:focus {
-          color: getColor('grey-darker');
+          color: getColor('neutral');
         }
       }
     }
   }
 
   + .help {
-    margin: 4px 0;
     font-size: $text-12;
     font-weight: $weight-medium;
   }
@@ -444,6 +443,10 @@ $label-weight: $weight-bold;
       font-size: $size-large;
     }
   }
+
+  &:has(input[disabled]) {
+    @include disabledRulesWithoutBG;
+  }
 }
 
 .field-label {
@@ -558,7 +561,7 @@ $label-weight: $weight-bold;
 }
 
 .label {
-  color: getColor('grey-dark');
+  color: getColor('neutral');
   display: block;
   font-size: $size-normal;
   font-weight: $label-weight;
@@ -582,7 +585,7 @@ $label-weight: $weight-bold;
   font-size: $help-size;
   margin-top: 2.5px;
 
-  @each $name, $pair in $colors-brand-funcionnal {
+  @each $name, $pair in $colors-brand-functionnal {
     $color: getColor($name);
     $brandName: getColorBrandName($name);
 

package/framework/src/elements/_icon.scss

@@ -71,7 +71,7 @@ $size: (
         max-width: 100%;
     }
 
-    @each $name, $pair in $colors-brand-funcionnal {
+    @each $name, $pair in $colors-brand-functionnal {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 
@@ -85,13 +85,13 @@ $size: (
     }
 
     &.is-circled {
-        border-radius: 100%;
+        border-radius: 9999px;
         text-align: center;
     }
 
     &.is-stretched {
         transform: skewX(-#{$icon-stretching-level});
-        border-top-right-radius: $radius-large;
+        border-top-right-radius: 9px;
         background-color: getColor('font');
 
       [class^="tri-"],
@@ -240,7 +240,7 @@ $size: (
             right: 0;
             width: $icon-dimensions-default;
             height: $icon-dimensions-default;
-            border-radius: 100%;
+            border-radius: 9999px;
             background-color: getColor('main');
         }