@trilogy-ds/styles 0.0.1-beta-103 → 0.0.1-beta-104

package/framework/src/base/_color.scss

@@ -1,36 +1,28 @@
 @use "sass:map";
 
 @function getColor( $name ) {
-  @if str-slice($name, 0, 3) == 'bg-' {
-    $submane: str-slice($name, 4);
-  @return getBGColor( $submane );
-  }
-  @return var(--color-#{nth(map-get($colors,$name),1)})
+  @return var(--color-#{nth(map-get($colors,$name),2)});
 }
 
 @function getColorValue( $name ) {
-  @return #{nth(map-get($colors,$name),2)}
-}
-
-@function getBGColorValue( $name ) {
-  @return #{nth(map-get($colors,$name),4)}
-}
-
-@function getColorBrandName( $name ) {
   @return #{nth(map-get($colors,$name),1)}
 }
 
-@function getBGColor( $name ) {
-  @return var(--color-bg-#{nth(map-get($colors,$name),1)})
+@function getColorBrandName( $name ) {
+  @return #{nth(map-get($colors,$name),2)}
 }
 
 :root {
   @each $name, $color in $colors {
-    --color-#{nth($color,1)}: #{nth($color,2)};
-    --color-bg-#{nth($color,1)}: #{nth($color,4)};
+    --color-#{nth($color,2)}: #{nth($color,1)};
   }
 }
 
 @function invertColor ($colorName) {
   @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/_generic.scss

@@ -7,7 +7,7 @@ $body-line-height: 1.5 !default;
 .html-wrap {
     margin: 0;
     padding: 0;
-    background-color: getBGColor('neutral');
+    background-color: getColor('background');
     font-size: $body-size;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;

package/framework/src/base/_helpers.scss

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

package/framework/src/components/_accordion.scss

@@ -1,15 +1,18 @@
 .accordions#{$suffix} {
   padding-left: 0;
   padding-right: 0;
-  margin: $spacing-4 0;
 
+  /* Chrome + Webkit */
   details.accordion ::-webkit-details-marker {
     display: none;
     content: "";
   }
 
-  .accordion {
+  details.accordion summary {
+    list-style-image: none;
+  }
 
+  .accordion {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -20,7 +23,7 @@
     margin: 8px 0;
     min-height: 56px;
     max-height: max-content;
-    transition: 0.3s;
+    transition: margin 0.3s;
 
     .accordion-header {
       font-weight: bold;
@@ -31,13 +34,13 @@
       padding-top: 0 !important;
     }
 
-    &:has(summary:hover):not(.is-disabled) {
+    &[open]:hover {
       @include hoverRules();
     }
 
-    &:focus-visible {
+    &:has(summary:focus-visible) {
       outline: var(--border-active);
-      outline-offset: 2px;
+      outline-offset: -2px;
     }
 
     .accordion-header:after {
@@ -65,6 +68,10 @@
         border-radius: var(--radius);
       transition: margin 300ms ease-out;
 
+      &:focus-visible{
+        outline: none;
+      }
+
     }
 
     &[open] .accordion-header {

package/framework/src/components/_all.scss

@@ -1,10 +1,10 @@
 @charset "utf-8";
 @import '../utilities/spacing';
 
+@import 'autolayout';
 @import 'divider';
 @import 'breadcrumb';
 @import 'card';
-@import 'level';
 @import 'modal';
 @import 'pagination';
 @import 'popover';

package/framework/src/components/_autolayout.scss

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

package/framework/src/components/_card.scss

@@ -6,7 +6,7 @@
   flex-direction: column;
   position: relative;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  background-color: getColor("background");
+  background-color: getColor('background');
 
   &:not(:last-child) {
     margin-bottom: 15px;

package/framework/src/components/_divider.scss

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

package/framework/src/components/_fab.scss

@@ -7,40 +7,41 @@
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
-  transition: 0.4s;
-  color: transparent;
-  letter-spacing: -9px;
+  transition: max-width 500ms ease-out;
+  color: white;
   border: 0;
   box-shadow: 0px 3px 6px 0px #00000033;
-  font-style: normal;
+  font-size: 16px;
   font-weight: 600;
-  font-size: medium;
   line-height: 20px;
-
   z-index: 9;
+  overflow: hidden;
+  max-width: 54px;
+  white-space: nowrap;
 
   #{$hoverSelector}, &.is-extended, &:focus, &:focus-visible, &:focus-within {
-    background-color: getColor('hovered');
-    transition-duration: 0.5s;
-    letter-spacing: initial;
-    color: white;
-
-    .icon,
-    .icon .is-small,
-    .icon .is-medium,
-    .icon .is-large {
-      margin-right: 16px;
-    }
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.25),
+        rgba(0, 0, 0, 0.25)
+    ) getColor('font');
+    max-width: 300px;
   }
 
   &:active {
-    background-color: getColor('hovered');
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.25),
+        rgba(0, 0, 0, 0.25)
+    ) getColor('font');
   }
 
   .icon {
+    flex: none;
     font-size: 24px !important;
     margin-left: -6px;
-    margin-right: -6px;
+    margin-right: 8px;
     color: white;
+
   }
 }

package/framework/src/components/_modal.scss

@@ -135,7 +135,7 @@ body:has(.modal.is-active) {
     z-index: zindex('medium');
 
     #{$hoverSelector} {
-      background-color: getBGColor('neutral');
+      background-color: getColor('neutral-fade');
     }
 
     &::after,
@@ -145,6 +145,11 @@ body:has(.modal.is-active) {
   }
 
   .modal-title {
+    padding: 20px 0;
+  }
+
+  .modal-title, 
+  .modal-header {
     color: getColor('font');
     font-family: $family-sans-serif;
     font-size: $size-3;
@@ -154,7 +159,6 @@ body:has(.modal.is-active) {
     z-index: zindex('small');
     position: sticky;
     top: 0;
-    padding: 20px 0;
     width: 100%;
     word-wrap: break-word;
 
@@ -199,4 +203,4 @@ body:has(.modal.is-active) {
       }
     }
   }
-}
+}

package/framework/src/components/_pagination.scss

@@ -48,7 +48,7 @@
 .pagination-previous,
 .pagination-next,
 .pagination-link {
-  color: getColor('neutral-dark');
+  color: getColor('neutral');
   min-width: 2.25em;
 
   @include hover();
@@ -66,9 +66,12 @@
   &[aria-current] {
     background-color: getColor('font');
     color: getColor('background');
-
     #{$hoverSelector}, &:focus, &:focus-within {
-      background-color: getColor('hovered');
+      background: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0.25),
+          rgba(0, 0, 0, 0.25)
+      ) getColor('font') !important;
     }
   }
 }

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

@@ -1,6 +1,6 @@
 $plus-symbol-size: 40px;
 
-@mixin plus-symbol($color: getBGColor('neutral-dark'), $text-color: getColor('neutral-dark')) {
+@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: getBGColor('font');
+    color: getColor('main-fade');
 
     &::before {
       position: absolute;
@@ -185,27 +198,18 @@ $price-levels: (
     }
 
     &.is-inverted {
-      color: getBGColor('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;