@trilogy-ds/styles 0.0.1-beta-112 → 0.0.1-beta-117

package/framework/src/elements/_chips.scss

@@ -55,20 +55,20 @@
         }
       }
       #{$hoverSelector} {
-        background-color: var(--color-bg-hovered);
+        background-color: getColor('neutral-fade');
       }
     }
 
     &.is-inverted {
       background-color: white;
-      color: getColor('alternate');
+      color: getColor('accent');
 
       &:active,
       &:hover,
       &:focus,
       &:focus-visible,
       &.is-active {
-        background-color: getColor('alternate') !important;
+        background-color: getColor('accent') !important;
         color: getColor('background') !important;
       }
     }

package/framework/src/elements/_entry.scss

@@ -9,7 +9,7 @@
   width: 100%;
 
   // Colors
-  @each $name in $colors-brand-funcionnal {
+  @each $name in $colors-brand-functionnal {
     $color: getColor($name);
     $color-invert: invertColor($name);
     $brandName: getColorBrandName($name);

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 {
@@ -219,7 +220,7 @@ $label-weight: $weight-bold;
       @each $name, $pair in $colors-feedback {
         &.is-#{$name} {
           ~ .icon {
-            color: getBGColor($name);
+            color: fadeColor($name);
           }
         }
       }
@@ -233,7 +234,7 @@ $label-weight: $weight-bold;
       @each $name, $pair in $colors-feedback {
         &.is-#{$name} {
           ~ .icon {
-            color: getBGColor($name)
+            color: fadeColor($name);
           }
         }
       }
@@ -328,7 +329,8 @@ $label-weight: $weight-bold;
       left: 16px;
       border-left: transparent 1px solid;
       font-size: $text-12;
-      color: getColor('neutral');
+      color: getColor('font');
+      filter: grayscale(1);
       transform: translateY(0);
       transition: all 0.2s ease-out;
       z-index: zindex('small');
@@ -396,14 +398,13 @@ $label-weight: $weight-bold;
 
         &:hover,
         &:focus {
-          color: getColor('neutral-dark');
+          color: getColor('neutral');
         }
       }
     }
   }
 
   + .help {
-    margin: 4px 0;
     font-size: $text-12;
     font-weight: $weight-medium;
   }
@@ -560,7 +561,7 @@ $label-weight: $weight-bold;
 }
 
 .label {
-  color: getColor('neutral-dark');
+  color: getColor('neutral');
   display: block;
   font-size: $size-normal;
   font-weight: $label-weight;
@@ -584,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);
 

package/framework/src/elements/_loader.scss

@@ -21,7 +21,7 @@ $loader-items-bottom-offset: -40px;
 
     .loader-body {
         visibility: hidden;
-        background-color: getColor('alternate');
+        background-color: getColor('accent');
         animation: 2.5s linear 0s forwards infinite top_item;
     }
 

package/framework/src/elements/_other.scss

@@ -5,40 +5,3 @@
 .delete {
     @include delete;
 }
-
-.heading {
-    display: block;
-    font-size: 11px;
-    letter-spacing: 1px;
-    margin-bottom: 5px;
-    text-transform: uppercase;
-}
-
-.highlight {
-    @include block;
-
-    font-weight: $weight-normal;
-    max-width: 100%;
-    overflow: hidden;
-    padding: 0;
-
-    pre {
-        overflow: auto;
-        max-width: 100%;
-    }
-}
-
-.number {
-    align-items: center;
-    background-color: getBGColor('neutral-dark');
-    border-radius: 9999px;
-    display: inline-flex;
-    font-size: $size-medium;
-    height: 2em;
-    justify-content: center;
-    margin-right: 15px;
-    min-width: 2.5em;
-    padding: 2.5px 5px;
-    text-align: center;
-    vertical-align: top;
-}

package/framework/src/elements/_progress.scss

@@ -18,10 +18,10 @@ $progressbar-small: 5px;
   -moz-appearance: none;
   -webkit-appearance: none;
 
-  background-color: getBGColor('hovered');
+  background-color: getColor('neutral-fade');
 
   &::-webkit-progress-bar {
-    background-color: getBGColor('font');
+    background-color: getColor('main-fade');
     border-radius: $progressbar-height;
   }
 
@@ -40,7 +40,7 @@ $progressbar-small: 5px;
   }
 
   // Colors
-  @each $name in $colors-brand-funcionnal {
+  @each $name in $colors-brand-functionnal {
     $brandName: getColorBrandName($name);
     $color: getColor($name);
 
@@ -81,7 +81,7 @@ $progressbar-small: 5px;
       border-radius: 0 $progressbar-height $progressbar-height 0;
     }
 
-    @each $name in $colors-brand-funcionnal {
+    @each $name in $colors-brand-functionnal {
       $color: getColor($name);
       $color-invert: invertColor($name);
       $brandName: getColorBrandName($name);
@@ -98,7 +98,7 @@ $progress-circle-slices: (
   secondary: getColor('info'),
   tertiary: getColor('font'),
   warning: getColor('warning'),
-  empty: getBGColor('neutral-dark')
+  empty: getColor('neutral-fade')
 );
 
 .progress-circle {

package/framework/src/elements/_sticker.scss

@@ -25,7 +25,7 @@ $sticker-height: 35px;
   }
 
   &.is-accent {
-    background-color: getColor('alternate');
+    background-color: getColor('accent');
     color: getColor('background') !important;
   }
 

package/framework/src/elements/_switch.scss

@@ -15,14 +15,14 @@
 
     &:disabled ~ label {
       &:after {
-        $colorSvg: encodecolor(getColorValue('neutral-dark'));
+        $colorSvg: encodecolor(getColorValue('disabled'));
         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('neutral-dark'));
+        $colorSvg: encodecolor(getColorValue('disabled'));
         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>');
       }
     }
@@ -45,12 +45,12 @@
       border-radius: 9999px;
       width: 44px;
       height: 22px;
-      background-color: getBGColor('font');
+      background-color: getColor('neutral');
       margin-left: 16px;
     }
 
     &:after {
-      $colorSvg: encodecolor(getBGColorValue('font'));
+      $colorSvg: encodecolor(getColorValue('neutral'));
       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%;

package/framework/src/elements/_table.scss

@@ -11,7 +11,7 @@
   @include block;
 
   background-color: transparent;
-  color: getColor('neutral-dark');
+  color: getColor('neutral');
 
   &:not(:last-child) {
     margin-bottom: 30px;
@@ -21,12 +21,12 @@
   * @deprecated "Use multiples <tr><th> instead"
   */
   tbody .is-body-header {
-    background-color: getBGColor('neutral-dark');
+    background-color: getColor('neutral-fade');
   }
 
   td,
   th {
-    border: 1px solid getBGColor('neutral-dark');
+    border: 1px solid getColor('neutral-fade');
     border-width: 0;
     padding: 20px;
     vertical-align: top;
@@ -56,7 +56,7 @@
   tr {
     @each $name in $colors-feedback {
       &.is-#{$name} {
-        background-color: getBGColor($name);
+        background-color: fadeColor($name);
       }
     }
 
@@ -71,7 +71,7 @@
     }
 
     td {
-      border-bottom: 1px solid getBGColor('neutral-dark');
+      border-bottom: 1px solid getColor('neutral-fade');
 
       > p {
         margin: 0;
@@ -97,7 +97,7 @@
     &.is-expanded,
     &.is-expandable:hover {
       td {
-        color: getColor('alternate');
+        color: getColor('accent');
         cursor: pointer;
       }
     }
@@ -155,12 +155,12 @@
 
   &:not(.is-bordered).is-comparative {
     th {
-      border-right: 1px solid getBGColor('neutral');
+      border-right: 1px solid getColor('neutral-fade');
     }
 
     td {
       &:not(:last-child) {
-        border-right: 1px solid getBGColor('neutral-dark');
+        border-right: 1px solid getColor('neutral-fade');
       }
     }
   }
@@ -196,14 +196,14 @@
     tbody {
       tr:not(.is-selected) {
         &:nth-child(even) {
-          background-color: getBGColor('neutral');
+          background-color: getColor('neutral-fade');
         }
       }
     }
   }
 
   .subtable {
-    background-color: getBGColor('neutral');
+    background-color: getColor('neutral-fade');
     border-radius: var(--radius);
     padding: $box-padding * 2;
 
@@ -216,7 +216,7 @@
 
       tr:not(:first-child) {
         td {
-          border-top: 1px solid getColor('neutral-dark');
+          border-top: 1px solid getColor('neutral');
         }
       }
 

package/framework/src/elements/_tag.scss

@@ -85,7 +85,7 @@ $tag-delete-margin: 1px !default;
 
     &.is-inverted {
       .tag {
-        background-color: getColor(getColor('background'));
+        background-color: getColor('background');
       }
     }
 
@@ -94,7 +94,7 @@ $tag-delete-margin: 1px !default;
 
 .tag {
   align-items: center;
-  background-color: getBGColor('neutral-dark');
+  background-color: getColor('neutral-fade');
   border-radius: 9999px;
   color: getColor('font');
   display: inline-flex;
@@ -120,7 +120,7 @@ $tag-delete-margin: 1px !default;
 
   @each $name in $colors-feedback {
     &.is-#{$name}:not(.is-inverted) {
-      background-color: getBGColor($name);
+      background-color: fadeColor($name);
     }
     &.is-inverted.is-#{$name} {
       color: getColor($name);

package/framework/src/elements/_textarea.scss

@@ -2,6 +2,15 @@
   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);
@@ -31,7 +40,8 @@
         padding-top: $spacing-2;
         width: calc(100% - 28px - 2px);
         font-size: 12px;
-        color: getColor('neutral');
+        color: getColor('font');
+        filter: grayscale(100%);
         transition: top 0.2s ease-out;
       }
 
@@ -65,6 +75,14 @@
     font-size: 16px;
   }
 
+   .textarea-label + .textarea-sample ~ span.icon {
+    top: 72px !important;
+  }
+
+  .textarea-label ~ span.icon {
+    top: 45px !important;
+  }
+
   span.icon {
     position: absolute;
     top: $spacing-4;
@@ -79,7 +97,7 @@
   }
 
   // Colors
-  @each $name, $pair in $colors-brand-funcionnal {
+  @each $name, $pair in $colors-brand-functionnal {
     $color: getColor($name);
     $color-invert: invertColor($name);
     $brandName: getColorBrandName($name);

package/framework/src/elements/_toaster.scss

@@ -13,7 +13,7 @@ a.toaster {
     @include apply-shadow-box();
 
 
-  background-color: getColor('bg-info');
+  background-color: getColor('info-fade');
   border-radius: var(--radius);
   margin-bottom: 16px;
   position: relative;
@@ -64,7 +64,7 @@ a.toaster {
 
   @each $name in $colors-feedback {
     &.is-#{$name} {
-      background-color: getBGColor($name);
+      background-color: fadeColor($name);
       border: 2px solid getColor($name);
 
       .icon {