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

package/framework/src/elements/_textarea.scss

@@ -1,125 +1,115 @@
 .textarea-wrapper {
-    position: relative;
-    margin: 16px 0;
+  position: relative;
+  margin: 16px 0;
 
-    textarea.textarea {
-        padding: $spacing-4;
-        border-radius: 4px;
-        outline: none;
+  textarea.textarea {
+    padding: $spacing-4;
+    border-radius: var(--radius-small);
+    outline: none;
 
-        &::placeholder {
-            font-size: 16px;
-        }
-
-        &.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;
-            }
-        }
+    &:focus,
+    &:focus-visible {
+      padding: 15px;
+    }
 
-        &:disabled {
-            background-color: getColor('grey-disabled');
-            border-color: getColor('grey-disabled');
-            color: getColor('grey-dark');
+    &::placeholder {
+      font-size: 16px;
+    }
 
-            &::placeholder {
-                color: black;
-            }
+    &.has-dynamic-label {
+      &.has-icon ~ label {
+        left: $spacing-9;
+        margin-right: 2px;
+        width: calc(100% - 98px);
+      }
 
-            & ~ span.icon {
-              color:  getColor('grey');
-            }
+      ~ label {
+        visibility: visible;
+        position: absolute;
+        top: 2px;
+        left: $spacing-4;
+        padding-top: $spacing-2;
+        width: calc(100% - 28px - 2px);
+        font-size: 12px;
+        color: getColor('neutral');
+        transition: top 0.2s ease-out;
+      }
+
+      &:placeholder-shown {
+        ~ label {
+          visibility: hidden;
+          top: $spacing-4;
+          background-color: getColor('background');
+          transition: none;
         }
+      }
 
-        &.has-icon {
-            padding-left: $spacing-9;
-            padding-right: $spacing-9;
-
-            &:hover,
-            &:focus,
-            &:focus-visible {
-                padding-left: 55px;
-                padding-right: 55px;
-            }
-        }
+      &:not(:placeholder-shown) {
+        padding-top: $spacing-5;
+      }
     }
 
-    label {
-        font-size: 16px;
-    }
+    &.has-icon {
+      padding-left: $spacing-9;
+      padding-right: $spacing-9;
 
-    span.icon {
-        position: absolute;
-        top: $spacing-4;
+      &:focus,
+      &:focus-visible {
+        padding-left: 55px;
+        padding-right: 55px;
+      }
+    }
+  }
 
-        &:first-of-type {
-            left: $spacing-4;
-        }
+  label {
+    font-size: 16px;
+  }
 
-        &: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-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;
+          }
+        }
+      }
 
-    .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

@@ -14,7 +14,7 @@ a.toaster {
 
 
   background-color: getColor('bg-info');
-  border-radius: $radius;
+  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: getBGColor($name);
       border: 2px solid getColor($name);
 
       .icon {

package/framework/src/grid/_columns.scss

@@ -772,7 +772,7 @@
     scroll-behavior: smooth;
     scroll-snap-type: x mandatory;
 
-    >.column {
+    > .column {
       scroll-snap-align: start;
     }
 
@@ -781,14 +781,14 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: getColor('grey-disabled');
-      border-radius: 8px;
+      background-color: getBGColor('font');
+      border-radius: var(--radius);
       margin: 0 8px;
     }
 
     &::-webkit-scrollbar-thumb {
-      background: getColor('alternate');
-      border-radius: 8px;
+      background: getColor('main');
+      border-radius: var(--radius);
     }
   }
 

package/framework/src/layout/_all.scss

@@ -3,4 +3,3 @@
 @import "main";
 @import "section";
 @import "hero";
-@import "toolbar";