@trilogy-ds/styles 0.0.1-beta.5 → 0.0.1-beta.50

package/framework/src/elements/_chips.scss

@@ -1,100 +1,91 @@
-$chip-radius: 30px !default;
-
 .chips-list {
-    align-items: center;
-    display: inline-flex;
-    justify-content: flex-start;
-    margin-bottom: 16px;
-    flex-wrap: wrap;
-
-    // multi-chips : ajout d'une marge bottom, supprimable par facette
-    &:not(.is-gapless) {
-        &:not(:last-child) {
-            margin-right: 8px;
-        }
+  align-items: center;
+  display: inline-flex;
+  justify-content: flex-start;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
 
-        .chips {
-            margin-bottom: 10px;
-        }
+  // multi-chips : ajout d'une marge bottom, supprimable par facette
+  &:not(.is-gapless) {
+    &:not(:last-child) {
+      margin-right: 8px;
     }
 
-    // multi-chips : ajout d'une marge à droite de chaque chip
-    .chips:not(:last-child) {
-        margin-right: 8px;
+    .chips {
+      margin-bottom: 10px;
     }
+  }
 
-    // centrage des chips
-    &.is-centered {
-        justify-content: center;
-    }
+  // multi-chips : ajout d'une marge à droite de chaque chip
+  .chips:not(:last-child) {
+    margin-right: 8px;
+  }
 
-    &.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;
-        }
+  // centrage des chips
+  &.is-centered {
+    justify-content: center;
+  }
+
+  &.is-multiple {
+    .chips.is-active:before {
+      content: "";
+      mask-image: url('./assets/icons/all/check.svg');
+      background-color: currentColor;
+      margin-right: 4px;
+      margin-left: -8px;
+      width: 20px;
+      height: 20px;
+      mask-size: 20px;
     }
+  }
 
-    .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');
+  .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) {
-            &:hover {
-                background-color: getColor('grey-light');
-                border: 2px solid currentColor;
-                color: getColor('alternate');
-                padding: 5px 15px;
-            }
+    &:not(.is-disabled) {
 
-            &:focus,
-            &:focus-visible,
-            &.is-active {
-                background-color: getColor('alternate');
-                color: white;
-                font-weight: 600;
-                border: 2px solid getColor('alternate');
-                padding: 5px 15px;
-            }
-        }
+      &.is-active {
+        background-color: getColor('main');
+        color: white;
+        border: var(--border-active);
+        padding: 5px 15px;
 
-        &.is-disabled {
-            background-color: getColor('grey-disabled');
-            color: getColor('grey-darker');
-            cursor: no-drop;
-            border: 1px solid getColor('grey-disabled');
+        #{$hoverSelector} {
+          background-color: getColor('main');
+          color: white;
         }
+      }
 
-        &.is-inverted {
-            background-color: white;
-            color: getColor('alternate');
+      #{$hoverSelector} {
+        background-color: var(--color-bg-hovered);
 
-            &:active,
-            &:hover,
-            &:focus,
-            &:focus-visible,
-            &.is-active {
-                background-color: getColor('alternate') !important;
-                color: getColor('background') !important;
-            }
-        }
+      }
+    }
+
+    &.is-inverted {
+      background-color: white;
+      color: getColor('alternate');
+
+      &:active,
+      &:hover,
+      &:focus,
+      &:focus-visible,
+      &.is-active {
+        background-color: getColor('alternate') !important;
+        color: getColor('background') !important;
+      }
     }
+  }
 }

package/framework/src/elements/_dot.scss

@@ -2,5 +2,5 @@
     display: inline-block;
     width: 10px;
     height: 10px;
-    border-radius: 100%;
+    border-radius: 9999px;
 }

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-funcionnal {
+    $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

@@ -92,15 +92,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 {
@@ -195,7 +192,7 @@ $label-weight: $weight-bold;
     .select {
       &:focus {
         & ~ .icon {
-          color: getColor('grey');
+          color: getColor('font');
         }
       }
 
@@ -208,7 +205,7 @@ $label-weight: $weight-bold;
     }
 
     .icon {
-      color: getColor('grey-light');
+      color: getColor('font');
       position: absolute;
       top: 0;
       height: 100%;
@@ -220,10 +217,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: getBGColor($name);
           }
         }
       }
@@ -235,10 +231,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: getBGColor($name)
           }
         }
       }
@@ -259,6 +254,7 @@ $label-weight: $weight-bold;
       left: 0;
       border-top-left-radius: $radius;
       border-bottom-left-radius: $radius;
+      padding: 0 24px;
     }
 
     .textarea {
@@ -301,6 +297,7 @@ $label-weight: $weight-bold;
       right: 0;
       border-top-right-radius: $radius;
       border-bottom-right-radius: $radius;
+      padding: 0 24px;
     }
   }
 
@@ -331,7 +328,7 @@ $label-weight: $weight-bold;
       left: 16px;
       border-left: transparent 1px solid;
       font-size: $text-12;
-      color: getColor('grey');
+      color: getColor('neutral');
       transform: translateY(0);
       transition: all 0.2s ease-out;
       z-index: zindex('small');
@@ -392,13 +389,14 @@ $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-dark');
         }
       }
     }
@@ -444,6 +442,10 @@ $label-weight: $weight-bold;
       font-size: $size-large;
     }
   }
+
+  &:has(input[disabled]) {
+    @include disabledRulesWithoutBG;
+  }
 }
 
 .field-label {
@@ -558,7 +560,7 @@ $label-weight: $weight-bold;
 }
 
 .label {
-  color: getColor('grey-dark');
+  color: getColor('neutral-dark');
   display: block;
   font-size: $size-normal;
   font-weight: $label-weight;

package/framework/src/elements/_icon.scss

@@ -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');
         }
 

package/framework/src/elements/_input-gauge.scss

@@ -1,37 +1,36 @@
 
-    .field .security-gauge-container {
-        width: 100%;
-        .security-gauge {
-            height: 4px;
-            background: getColor('grey-disabled');
-            border-radius: 4px;
-            margin: 8px 0;
-            .gauge {
-                height: 100%;
-                border-radius: 4px;
-            }
-        }
+.field .security-gauge-container {
+  width: 100%;
 
-        .security-gauge-verifies {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .security {
-                display: flex;
-                align-items: center;
-                margin-bottom: 4px;
-                .icon {
-                    position: relative;
-                    color: getColor('grey');
-                    width: 16px;
-                    margin-right: 8px;
-                    font-size: 16px;
-                    margin-bottom:  -1px;
+  .security-gauge {
+    height: 4px;
+    background: getColor('disabled');
+    border-radius: var(--radius-small);
+    margin: 8px 0;
 
-                    .is-success {
-                        background-color: getColor('success')
-                    }
-                }
-            }
-        }
+    .gauge {
+      height: 100%;
+      border-radius: var(--radius-small);
     }
+  }
+
+  .security-gauge-verifies {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .security {
+      display: flex;
+      align-items: center;
+      margin-bottom: 4px;
+
+      .icon {
+        position: relative;
+        width: 16px;
+        margin-right: 8px;
+        font-size: 16px;
+        margin-bottom: -1px;
+      }
+    }
+  }
+}

package/framework/src/elements/_input-icons.scss

@@ -1,41 +1,43 @@
 .field {
 
-    .has-icons-left {
-        input {
-            padding-left: 45px;
-        }
-        label {
-            left: 45px;
-        }
-        .icon-left
-         {
-            position: absolute;
-            height: 100%;
-            width: 45px;
-            left: 0;
+  .has-icons-left {
+    input {
+      padding-left: 45px;
+
+      &:active,
+      &:focus,
+      &:focus-visible:not(.has-icons-left):not(disabled) {
+        padding-left: 44px !important;
+      }
 
-            i {
-                font-size: 20px;
-            }
+      label {
+        left: 45px;
+      }
+      .icon-left {
+        position: absolute;
+        height: 100%;
+        width: 45px;
+        left: 0;
+        i {
+          font-size: 20px;
         }
+      }
 
 
     }
+  }
+  .has-icons-right {
+    .icon-right {
+      position: absolute;
+      height: 100%;
+      width: 45px;
+      z-index: 10;
+      right: 0;
+      left: auto;
 
-    .has-icons-right {
-        .icon-right
-         {
-            position: absolute;
-            height: 100%;
-            width: 45px;
-            z-index: 10;
-            right: 0;
-            left: auto;
-            i {
-                font-size: 20px;
-            }
-        }
+      i {
+        font-size: 20px;
+      }
     }
-
-
+  }
 }