@trilogy-ds/styles 0.0.1-beta-78 → 0.0.1-beta-82

package/framework/src/base/_color.scss

@@ -1,36 +1,28 @@
 @use "sass:map";
 
 @function getColor( $name ) {
-  @if str-slice($name, 0, 5) == 'fade-' {
-    $submane: str-slice($name, 6);
-  @return getFadeColor( $submane );
-  }
-  @return var(--color-#{nth(map-get($colors,$name),3)});
+  @return var(--color-#{nth(map-get($colors,$name),2)});
 }
 
 @function getColorValue( $name ) {
   @return #{nth(map-get($colors,$name),1)}
 }
 
-@function getFadeColorValue( $name ) {
-  @return #{nth(map-get($colors,$name),2)}
-}
-
 @function getColorBrandName( $name ) {
-  @return #{nth(map-get($colors,$name),3)}
-}
-
-@function getFadeColor( $name ) {
-  @return var(--color-fade-#{nth(map-get($colors,$name),3)})
+  @return #{nth(map-get($colors,$name),2)}
 }
 
 :root {
   @each $name, $color in $colors {
-    --color-#{nth($color,3)}: #{nth($color,1)};
-    --color-fade-#{nth($color,3)}: #{nth($color,2)};
+    --color-#{nth($color,2)}: #{nth($color,1)};
   }
 }
 
 @function invertColor ($colorName) {
-  @return var(--color-#{nth(map-get($colors,$colorName),4)})
+  @return var(--color-#{nth(map-get($colors,$colorName),3)})
+}
+
+@function fadeColor ($colorName) {
+  $name: map-get($fade-colors,$colorName);
+  @return getColor($name);
 }

package/framework/src/base/_helpers.scss

@@ -197,7 +197,7 @@ $alignments: (
 
 @mixin typography-colors() {
   @each $name, $color in $colors {
-    $brandName: nth($color, 3);
+    $brandName: nth($color, 2);
     $color: nth($color, 1);
     $color-invert: invertColor($name);
 
@@ -210,9 +210,6 @@ $alignments: (
     .has-background-#{$brandName} {
       background-color: getColor($name) !important;
     }
-    .has-background-#{$brandName}-fade {
-      background-color: getFadeColor($name) !important;
-    }
   }
 }
 

package/framework/src/components/_accordion.scss

@@ -1,7 +1,6 @@
 .accordions#{$suffix} {
   padding-left: 0;
   padding-right: 0;
-  margin: $spacing-4 0;
 
   details.accordion ::-webkit-details-marker {
     display: none;

package/framework/src/components/_all.scss

@@ -1,6 +1,7 @@
 @charset "utf-8";
 @import '../utilities/spacing';
 
+@import 'autolayout';
 @import 'divider';
 @import 'breadcrumb';
 @import 'card';

package/framework/src/components/_autolayout.scss

@@ -0,0 +1,272 @@
+body:not(.is-tight) {
+  * + .accordions {
+    margin-bottom: 24px;
+  }
+  * + .card {
+    margin-bottom: 24px;
+  }
+  * + .alert {
+    margin-bottom: 24px;
+  }
+  * + .box {
+    margin-bottom: 24px;
+  }
+  * + .table {
+    margin-bottom: 24px;
+  }
+  * + .list {
+    margin-bottom: 24px;
+  }
+  * + .timeline {
+    margin-bottom: 24px;
+  }
+  * + .stepper {
+    margin-bottom: 24px;
+  }
+  * + .pagination {
+    margin-bottom: 24px;
+  }
+  * + .segmented-control {
+    margin-bottom: 24px;
+  }
+  * + .tabs {
+    margin-bottom: 24px;
+  }
+  * + .range {
+    margin-bottom: 24px;
+  }
+  * + .divider {
+    margin-bottom: 16px;
+  }
+  * + .stepper {
+    margin-bottom: 24px;
+  }
+  * + .price {
+    margin-bottom: 12px;
+  }
+  * + .button {
+    margin-bottom: 24px;
+  }
+  * + .countdown {
+    margin-bottom: 16px;
+  }
+  * + .countdown.is-small {
+    margin-bottom: 12px;
+  }
+  * + .chips {
+    margin-bottom: 12px;
+  }
+  * + .text {
+    margin-bottom: 12px;
+  }
+  * + .progress {
+    margin-bottom: 8px;
+  }
+  * + .progress-radial {
+    margin-bottom: 8px;
+  }
+  * + .radio {
+    margin-bottom: 12px;
+  }
+  * + .checkbox {
+    margin-bottom: 12px;
+  }
+  * + .switch {
+    margin-bottom: 12px;
+  }
+  * + .radio-tile {
+    margin-bottom: 24px;
+  }
+  * + .checkbox-tile {
+    margin-bottom: 24px;
+  }
+  * + .input {
+    margin-bottom: 16px;
+  }
+  * + .textarea {
+    margin-bottom: 16px;
+  }
+  * + .select {
+    margin-bottom: 16px;
+  }
+  * + .link {
+    margin-bottom: 12px;
+  }
+  * + .sticker {
+    margin-bottom: 8px;
+  }
+  * + .tag {
+    margin-bottom: 8px;
+  }
+  * + .title.is-level-1 {
+    margin-bottom: 40px;
+  }
+  * + .title.is-level-2 {
+    margin-bottom: 32px;
+  }
+  * + .title.is-level-3 {
+    margin-bottom: 16px;
+  }
+  * + .title.is-level-4 {
+    margin-bottom: 12px;
+  }
+  * + .title.is-level-5 {
+    margin-bottom: 12px;
+  }
+  * + .title.is-level-6 {
+    margin-bottom: 12px;
+  }
+  * + .overline {
+    margin-bottom: 0px;
+  }
+  .subtitle + .title.is-level-1 {
+    margin-bottom: 8px;
+  }
+  .subtitle + .title.is-level-2 {
+    margin-bottom: 8px;
+  }
+  .title.is-level-1 + .subtitle {
+    margin-bottom: 32px;
+  }
+  .title.is-level-2 + .subtitle {
+    margin-bottom: 24px;
+  }
+}
+
+@include mobile() {
+  body:not(.is-tight) {
+    * + .accordions {
+      margin-bottom: 16px;
+    }
+  * + .card {
+      margin-bottom: 16px;
+    }
+  * + .alert {
+      margin-bottom: 16px;
+    }
+  * + .box {
+      margin-bottom: 16px;
+    }
+  * + .table {
+      margin-bottom: 16px;
+    }
+  * + .list {
+      margin-bottom: 16px;
+    }
+  * + .timeline {
+      margin-bottom: 16px;
+    }
+  * + .stepper {
+      margin-bottom: 16px;
+    }
+  * + .pagination {
+      margin-bottom: 16px;
+    }
+  * + .segmented-control {
+      margin-bottom: 16px;
+    }
+  * + .tabs {
+      margin-bottom: 16px;
+    }
+  * + .range {
+      margin-bottom: 16px;
+    }
+  * + .divider {
+      margin-bottom: 16px;
+    }
+  * + .stepper {
+      margin-bottom: 16px;
+    }
+  * + .price {
+      margin-bottom: 8px;
+    }
+  * + .button {
+      margin-bottom: 16px;
+    }
+  * + .countdown {
+      margin-bottom: 12px;
+    }
+  * + .countdown.is-small {
+      margin-bottom: 12px;
+    }
+  * + .chips {
+      margin-bottom: 12px;
+    }
+  * + .text {
+      margin-bottom: 8px;
+    }
+  * + .progress {
+      margin-bottom: 8px;
+    }
+  * + .progress-radial {
+      margin-bottom: 8px;
+    }
+  * + .radio {
+      margin-bottom: 12px;
+    }
+  * + .checkbox {
+      margin-bottom: 12px;
+    }
+  * + .switch {
+      margin-bottom: 12px;
+    }
+  * + .radio-tile {
+      margin-bottom: 16px;
+    }
+  * + .checkbox-tile {
+      margin-bottom: 16px;
+    }
+  * + .input {
+      margin-bottom: 16px;
+    }
+  * + .textarea {
+      margin-bottom: 16px;
+    }
+  * + .select {
+      margin-bottom: 16px;
+    }
+  * + .link {
+      margin-bottom: 8px;
+    }
+  * + .sticker {
+      margin-bottom: 8px;
+    }
+  * + .tag {
+      margin-bottom: 8px;
+    }
+  * + .title.is-level-1 {
+      margin-bottom: 32px;
+    }
+  * + .title.is-level-2 {
+      margin-bottom: 24px;
+    }
+  * + .title.is-level-3 {
+      margin-bottom: 12px;
+    }
+  * + .title.is-level-4 {
+      margin-bottom: 8px;
+    }
+  * + .title.is-level-5 {
+      margin-bottom: 8px;
+    }
+  * + .title.is-level-6 {
+      margin-bottom: 8px;
+    }
+  * + .overline {
+      margin-bottom: 0px;
+    }
+  .subtitle + .title.is-level-1 {
+      margin-bottom: 8px;
+    }
+  .subtitle + .title.is-level-2 {
+      margin-bottom: 8px;
+    }
+  .title.is-level-1 + .subtitle {
+      margin-bottom: 40px;
+    }
+  .title.is-level-2 + .subtitle {
+      margin-bottom: 32px;
+    }
+
+  }
+}

package/framework/src/components/_divider.scss

@@ -1,10 +1,9 @@
 .divider {
     position: relative;
     text-align: center;
-    background-color: getFadeColor('neutral');
+    background-color: getColor('neutral-fade');
     height: 1px;
     width: 100%;
-    margin: 16px 0;
 
     p.divider-content {
         position: absolute;

package/framework/src/components/_modal.scss

@@ -135,7 +135,7 @@ body:has(.modal.is-active) {
     z-index: zindex('medium');
 
     #{$hoverSelector} {
-      background-color: getFadeColor('neutral');
+      background-color: getColor('neutral-fade');
     }
 
     &::after,

package/framework/src/components/_plus-symbol.scss

@@ -1,6 +1,6 @@
 $plus-symbol-size: 40px;
 
-@mixin plus-symbol($color: getFadeColor('neutral'), $text-color: getColor('neutral')) {
+@mixin plus-symbol($color: getColor('neutral-fade'), $text-color: getColor('neutral')) {
     &::after {
         content: "+";
         display: inline-block;

package/framework/src/components/_price.scss

@@ -8,6 +8,30 @@ $price-levels: (
     ($text-20),
 );
 
+.price-container {
+  display: flex;
+  align-items: baseline;
+  column-gap: 12px;
+  flex-wrap: wrap;
+
+  .overline {
+    width: 100%;
+    flex: none;
+    margin: 0;
+    --font-size: #{$text-64};
+    font-size: calc(var(--font-size) * 0.4);
+
+    @each $price-level in $price-levels {
+      $i: index($price-levels, $price-level);
+      $font-size: nth($price-level, 1);
+
+      &:has(~ .price.is-level-#{$i}:not(.is-striked)) {
+        --font-size: #{$font-size};
+      }
+    }
+  }
+}
+
 .price {
   display: inline-flex;
   font-weight: $weight-semibold;
@@ -70,7 +94,6 @@ $price-levels: (
           &::before {
             border-width: 3px;
             margin-left: -6px;
-            margin-top: 4px;
             border-radius: 1px;
           }
           font-size: $text-10;
@@ -122,16 +145,6 @@ $price-levels: (
     color: getColor('background');
   }
 
-  &.has-suptitle {
-    display: flex;
-    flex-wrap: wrap;
-
-    .price-suptitle {
-      flex-basis: 100%;
-      font-size: 0.375em;
-    }
-  }
-
   &.has-description {
     .cents,
     .centimes {
@@ -170,7 +183,7 @@ $price-levels: (
 
   &.is-striked {
     position: relative;
-    color: getFadeColor('font');
+    color: getColor('main-fade');
 
     &::before {
       position: absolute;
@@ -185,27 +198,18 @@ $price-levels: (
     }
 
     &.is-inverted {
-      color: getFadeColor('font');
+      color: getColor('main-fade');
 
       &::before {
         border-color: getColor('background');
       }
     }
-
-    &.has-suptitle {
-      display: inline-flex;
-      margin-top: 0.55em;
-
-      .price-suptitle {
-        position: absolute;
-        top: -1.4em;
-      }
-    }
   }
 }
 
 .price-tag {
-  background-color: getColor('alternate');
+  align-self: center;
+  background-color: getColor('accent');
   margin-left: 10px;
   border-radius: 6px;
   display: inline-flex;
@@ -216,11 +220,12 @@ $price-levels: (
   line-height: 1em;
   align-items: baseline;
   position: relative;
+  margin-left: -4px;
   &::before {
     content: '';
     border-color: transparent;
-    border-bottom-color: getColor('alternate');
-    border-left-color: getColor('alternate');
+    border-bottom-color: getColor('accent');
+    border-left-color: getColor('accent');
     transform: rotate(45deg);
     border-style: solid;
     border-width: 5px;

package/framework/src/components/_segmented-control.scss

@@ -1,7 +1,7 @@
 .segmented-control {
   border-radius: 6px;
   padding: $spacing-1;
-  background-color: getFadeColor('neutral');
+  background-color: getColor('neutral-fade');
   display: inline-block;
   margin: 16px 0;
 
@@ -19,7 +19,7 @@
     border: 2px solid transparent;
     height: 42px;
     color: getColor('font');
-    background-color: getFadeColor('neutral');
+    background-color: getColor('neutral-fade');
 
     &:not(:last-child) {
       margin-right: 4px;

package/framework/src/components/_stepper.scss

@@ -23,7 +23,7 @@
     height: 4px;
     border-radius: var(--radius-small);
     background-size: 200% !important;
-    background-color: getFadeColor('neutral');
+    background-color: getColor('neutral-fade');
   }
 
   &.is-error {
@@ -204,7 +204,7 @@
 
 @keyframes progress {
   0%, 100% {
-    background-image: linear-gradient(to right, transparent 0, transparent 50%, getFadeColor('neutral') 50%, getFadeColor('neutral') 100%);
+    background-image: linear-gradient(to right, transparent 0, transparent 50%, getColor('neutral-fade') 50%, getColor('neutral-fade') 100%);
   }
   0% {
     background-position: 100% 0;

package/framework/src/components/_timeline.scss

@@ -1,9 +1,9 @@
 @use 'sass:math';
 @import "../utilities/spacing";
 
-$timeline-marker-color: getFadeColor('neutral') !default;
+$timeline-marker-color: getColor('neutral-fade') !default;
 $timeline-marker-icon-size: 2.85em !default;
-$timeline-line-color: getFadeColor('neutral') !default;
+$timeline-line-color: getColor('neutral-fade') !default;
 $timeline-marker-size: 0.8em !default;
 $timeline-marker-border-size: 0.1em !default;
 $timeline-marker-border: $timeline-marker-border-size solid $timeline-marker-color !default;
@@ -53,7 +53,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     padding-bottom: $spacing-2;
 
     &::before {
-      background-color: getFadeColor('neutral');
+      background-color: getColor('neutral-fade');
     }
 
     .timeline-marker.is-icon {
@@ -117,12 +117,12 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     &.cancel {
       .timeline-marker.is-icon {
         background-color: getColor('neutral');
-        color: getFadeColor('neutral');
+        color: getColor('neutral-fade');
       }
 
       &::before {
         content: '';
-        background-color: getFadeColor('neutral');
+        background-color: getColor('neutral-fade');
         display: block;
         width: $timeline-line-width;
         position: absolute;
@@ -215,7 +215,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
       }
     }
 
-    @each $name in $colors-brand-funcionnal {
+    @each $name in $colors-brand-functionnal {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 
@@ -295,7 +295,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
         }
       }
 
-      @each $name, $pair in $colors-brand-funcionnal {
+      @each $name, $pair in $colors-brand-functionnal {
         $color: getColor($name);
         $brandName: getColorBrandName($name);
 
@@ -339,7 +339,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
         }
 
         &.undone::before {
-          background-color: getFadeColor('neutral');
+          background-color: getColor('neutral-fade');
         }
 
         &.done::before {
@@ -347,7 +347,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
         }
 
         &.cancel::before {
-          background-color: getFadeColor('neutral');
+          background-color: getColor('neutral-fade');
         }
 
         .timeline-marker {

package/framework/src/elements/_alert.scss

@@ -11,9 +11,7 @@ a.alert {
 }
 
 .alert {
-
   border-radius: var(--radius);
-  margin-bottom: 16px;
   position: relative;
   display: flex;
   align-self: flex-start;
@@ -49,7 +47,7 @@ a.alert {
 
   @each $name in $colors-feedback {
     &.is-#{$name} {
-      background-color: getFadeColor($name);
+      background-color: fadeColor($name);
       border: 1px solid getColor($name);
 
       .icon {

package/framework/src/elements/_autocomplete.scss

@@ -23,8 +23,8 @@
                 @include hoverRules();
                 margin-left: calc(2px - $spacing-3 );
                 margin-right: calc(2px - $spacing-3 );
-                border-top: 1px solid getColor('fade-neutral');
-                border-bottom: 1px solid getColor('fade-neutral');
+                border-top: 1px solid getColor('neutral-fade');
+                border-bottom: 1px solid getColor('neutral-fade');
                 padding: calc($spacing-1 - 1.25px) calc($spacing-4 - 1px);
             }
         }

package/framework/src/elements/_box.scss

@@ -69,7 +69,7 @@ a.box {
     border-left: $highlighted-border-width solid transparent;
     border-top-left-radius: calc(var(--radius) + $highlighted-border-width);
     border-bottom-left-radius: calc(var(--radius) + $highlighted-border-width);
-    @each $name, $pair in $colors-brand-funcionnal {
+    @each $name, $pair in $colors-brand-functionnal {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 
@@ -158,7 +158,7 @@ a.box {
     margin-right: calc(var(--padding-box)*-1);
     margin-bottom: calc(var(--padding-box)*-1);
     padding: var(--padding-box);
-    border-top: 1px solid getFadeColor('neutral');
+    border-top: 1px solid getColor('neutral-fade');
     border-bottom-left-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
   }

package/framework/src/elements/_button.scss

@@ -63,8 +63,8 @@ $button-border-width: 2px !default;
 
   &[disabled],
   &[aria-disabled=true] {
-    background-color: getFadeColorValue('main') !important;
-    color: getFadeColorValue('disabled') !important
+    background-color: getColorValue('main-fade') !important;
+    color: getColorValue('disabled-fade') !important
   }
 
   &.is-loading {

package/framework/src/elements/_chips.scss

@@ -55,20 +55,20 @@
         }
       }
       #{$hoverSelector} {
-        background-color: getFadeColor('neutral');
+        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);