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

package/framework/src/elements/_entry.scss

@@ -1,109 +1,93 @@
 .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-family: $body-family;
+  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;
-          }
-        }
-    }
+  // 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 {
+    border-radius: $radius-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)
           }
         }
       }
@@ -331,7 +326,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 +387,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 +440,10 @@ $label-weight: $weight-bold;
       font-size: $size-large;
     }
   }
+
+  &:has(input[disabled]) {
+    @include disabledRulesWithoutBG;
+  }
 }
 
 .field-label {
@@ -558,7 +558,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/_input-gauge.scss

@@ -1,37 +1,41 @@
 
-    .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 {
+    height: 4px;
+    background: getColor('disabled');
+    border-radius: $radius-small;
+    margin: 8px 0;
+
+    .gauge {
+      height: 100%;
+      border-radius: $radius-small;
+    }
+  }
+
+  .security-gauge-verifies {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .security {
+      display: flex;
+      align-items: center;
+      margin-bottom: 4px;
 
-        .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;
+      .icon {
+        position: relative;
+        color: getColor('neutral');
+        width: 16px;
+        margin-right: 8px;
+        font-size: 16px;
+        margin-bottom: -1px;
 
-                    .is-success {
-                        background-color: getColor('success')
-                    }
-                }
-            }
+        .is-success {
+          background-color: getColor('success')
         }
+      }
     }
+  }
+}

package/framework/src/elements/_link.scss

@@ -1,79 +1,64 @@
 .link:not([disabled]) {
-    position: relative;
-    font-size: 14px;
-    font-weight: $weight-medium;
-    color: getColor('alternate');
-    box-decoration-break: clone;
-    padding: $spacing-2;
-    margin: -8px;
-    text-decoration: underline;
-    cursor: pointer;
+  position: relative;
+  font-weight: $weight-normal;
+  color: getColor('font');
+  box-decoration-break: clone;
+  text-decoration: underline;
+  cursor: pointer;
 
-    &:not(p .link) {
-        text-decoration-line: underline;
-        text-decoration-style: solid;
-        text-decoration-thickness: 2px;
-        text-underline-offset: 4px;
-    }
+  &:hover {
+    font-weight: $weight-semibold;
+  }
 
-    &:hover {
-        filter: brightness(70%);
-    }
+  &:focus-visible,
+  &:focus:focus-visible {
+    outline: 2px solid getColor('font');
+    border-radius: $radius-small;
+    padding: 4px;
+  }
 
-      &:focus,
-      &:focus-visible,
-      &.is-focused,
-      &:active,
-      &.is-active {
-        filter: brightness(50%);
-      }
+  &.has-icon {
+    display: inline-flex;
+    align-items: center;
 
-    @include desktop {
-        &:not(.is-static) {
-            display: inline-flex;
-            border-bottom-width: 0;
-        }
+    &::after {
+      width: calc(100% - 48px);
+      bottom: 5.5px;
     }
+  }
 
-    &.has-icon {
-        display: inline-flex;
-        align-items: center;
-
-        &::after {
-            width: calc(100% - 48px);
-            bottom: 5.5px;
-        }
-    }
-
-    &.is-static::after {
-        margin-bottom: 4px;
-    }
+  &.is-inverted {
+    color: getColor('background');
 
-    &.is-inverted {
+    &.has-icon {
+      > .icon {
         color: getColor('background');
-
-      &.has-icon {
-        > .icon {
-          color: getColor('background');
-        }
       }
     }
+  }
 
-    @include touch {
-        white-space: normal !important;
-        box-decoration-break: clone;
-        display: inline;
-    }
+  @include touch {
+    white-space: normal !important;
+    box-decoration-break: clone;
+    display: inline;
+  }
+}
+
+.text .link {
+  &:hover {
+    font-weight: $weight-normal;
+    filter: brightness(0.8);
+  }
 }
 
 @keyframes sliding-link {
-    50% {
-        left: 100%;
-        right: 0;
-    }
+  50% {
+    left: 100%;
+    right: 0;
+  }
 
-    50.01% {
-        left: 0;
-        right: 100%;
-    }
+  50.01% {
+    left: 0;
+    right: 100%;
+  }
 }

package/framework/src/elements/_list.scss

@@ -19,43 +19,7 @@ ul.icon-list > li {
     display: flex;
     align-items: center;
 
-    span[disabled] {
-        opacity: 0.5;
-    }
-
     .icon {
         flex: none;
     }
 }
-
-dl.dl {
-    dt {
-        font-weight: $weight-semibold;
-        margin-bottom: 5px;
-
-        &:not(:first-child) {
-            margin-top: 20px;
-        }
-    }
-
-    dd {
-        color: getColor('font');
-        font-size: $size-7;
-    }
-
-    &:not(:first-child) {
-        margin-top: 20px;
-    }
-
-    &.is-alternate {
-        dt {
-            color: getColor('font');
-            font-size: $size-7;
-        }
-
-        dd {
-            color: getColor('font');
-            font-size: $size-6;
-        }
-    }
-}

package/framework/src/elements/_notification.scss

@@ -2,7 +2,7 @@
   cursor: pointer;
   transition: box-shadow $animation-duration;
 
-  &:hover,
+  #{$hoverSelector},
   &:active,
   &:focus {
     box-shadow: $shadow;
@@ -141,9 +141,8 @@
     color: getColor('font');
 
     @each $name, $pair in $colors-feedback {
-      $bg-color: nth($pair, 1);
       &.is-#{$name} {
-        background-color: getColor($bg-color);
+        background-color: getBGColor($name);
       }
     }
 

package/framework/src/elements/_other.scss

@@ -30,7 +30,7 @@
 
 .number {
     align-items: center;
-    background-color: getColor('grey-light');
+    background-color: getBGColor('neutral-dark');
     border-radius: $radius-rounded;
     display: inline-flex;
     font-size: $size-medium;

package/framework/src/elements/_paragraph.scss

@@ -12,8 +12,7 @@ $text-levels-mobile: (
 );
 
 
-.paragraph {
-    &.text {
+.text {
         @each $text-level in $text-levels {
             $i: index($text-levels, $text-level);
             $font-size: nth($text-level, 1);
@@ -26,10 +25,10 @@ $text-levels-mobile: (
                 font-family: $family-primary;
                 margin-bottom: $margin-bottom;
             }
+        }
 
-            &.is-inverted {
-                color: getColor('background');
-            }
+        &.is-inverted {
+          color: getColor('background');
         }
 
         @include mobile {
@@ -51,28 +50,7 @@ $text-levels-mobile: (
             font-weight: $weight-bold;
         }
     }
-}
-
-
-.paragraph,
-.text {
-    & a.link:not([disabled]),
-    a {
-        padding: $spacing-1;
-        margin: -4px;
-        text-decoration: underline;
-        font-size: unset;
-        font-weight: $weight-medium;
-
-        &::after {
-            content: none;
-        }
 
-        &.is-static::after {
-            margin-bottom: 0;
-        }
-    }
-}
 
 .paragraph:not(:last-child) {
     margin-bottom: 10px;

package/framework/src/elements/_progress.scss

@@ -18,8 +18,10 @@ $progressbar-small: 5px;
   -moz-appearance: none;
   -webkit-appearance: none;
 
+  background-color: getBGColor('font');
+
   &::-webkit-progress-bar {
-    background-color: getColor('grey-light');
+    background-color: getBGColor('font');
     border-radius: $progressbar-height;
   }
 
@@ -33,12 +35,6 @@ $progressbar-small: 5px;
     border-radius: $progressbar-height;
   }
 
-  &::-ms-fill {
-    background-color: getColor('font');
-    border: none;
-    border-radius: $progressbar-height;
-  }
-
   &:not(:last-child) {
     margin-bottom: 7.5px;
   }
@@ -71,12 +67,11 @@ $progressbar-small: 5px;
 
 .progress.is-stacked {
   display: flex;
-  background-color: getColor('grey-light');
   border-radius: $progressbar-height;
 
   .progress-bar {
     height: $progressbar-height;
-    background-color: getVariantColor('alternate',2);
+    background-color: getColor('font');
 
     &:first-child {
       border-radius: $progressbar-height 0 0 $progressbar-height;
@@ -100,10 +95,10 @@ $progressbar-small: 5px;
 
 // Progress Bar circle
 $progress-circle-slices: (
-  secondary: getColor('alternate'),
+  secondary: getColor('info'),
   tertiary: getColor('font'),
   warning: getColor('warning'),
-  empty: getColor('grey-light')
+  empty: getBGColor('neutral-dark')
 );
 
 .progress-circle {
@@ -151,7 +146,7 @@ $progress-circle-slices: (
 
 .progress-circle-slice::before,
 .progress-circle-slice::after {
-  border: var(--progress-circle-border-width) solid rgba(0,0,0,0);
+  border: var(--progress-circle-border-width) solid rgba(0, 0, 0, 0);
   border-radius: 50%;
   content: '';
   height: 100%;
@@ -181,9 +176,7 @@ $slides-concat: '';
 
       clip-path: inset(0 calc(50% * (var(--#{$name}-check) / var(--#{$name}-check))) 0 0);
     }
-  }
-
-  @else {
+  } @else {
     .progress-circle-background-#{$name} {
       --#{$name}-start: 0;
     }
@@ -204,9 +197,7 @@ $slides-concat: '';
 
   @if $i == 1 {
     $slides-concat: var(--#{$name});
-  }
-
-  @else {
+  } @else {
     $slides-concat: $slides-concat + ' + ' + var(--#{$name});
   }
 }