@trilogy-ds/styles 0.0.1-beta-148 → 0.0.1-beta-sc-2

package/framework/src/base/_helpers.scss

@@ -433,7 +433,7 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
 }
 
 // Radius
-$radius-list: ['radius-large', 'radius-medium', 'radius-small', 'radius'];
+$radius-list: ['radius-small', 'radius'];
 
 @each $label in $radius-list {
   .has-border-#{$label} {

package/framework/src/components/_accordion.scss

@@ -1,18 +1,18 @@
-.accordion#{$suffix} {
+.accordions#{$suffix} {
   padding-left: 0;
   padding-right: 0;
 
   /* Chrome + Webkit */
-  details.accordion-item ::-webkit-details-marker {
+  details.accordion ::-webkit-details-marker {
     display: none;
     content: "";
   }
 
-  details.accordion-item summary {
+  details.accordion summary {
     list-style-image: none;
   }
 
-  .accordion-item {
+  .accordion {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;

package/framework/src/components/_divider.scss

@@ -1,6 +1,7 @@
 .divider {
   background-color: getColor('neutral');
   height: 1px;
+  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;

package/framework/src/components/_modal.scss

@@ -71,14 +71,19 @@ body:has(.modal.is-active) {
     color: getColor('font');
     overflow: auto;
     position: relative;
-    padding: $spacing-5;
+    padding: 0 30px 30px;
     margin: 0 $modal-content-margin-mobile;
     max-height: calc(100vh - 40px);
+    text-align: center;
     width: 100%;
     z-index: zindex('tiny');
     transition: transform ease-in-out 250ms;
     transform: translateY(100%);
 
+    &:has(.modal-footer) {
+      padding-bottom: 0;
+    }
+
     @include tablet {
       max-height: calc(100vh - 120px);
       width: $modal-content-width;
@@ -108,11 +113,7 @@ body:has(.modal.is-active) {
       width: 100%;
       background: getColor('background');
       bottom: 0;
-
-      @include tablet {
-        display: flex;
-        justify-content: flex-end;
-      }
+      padding: 16px;
     }
 
     // If Close Icon Modal & Title Modal are sibling elements, override margin
@@ -125,9 +126,9 @@ body:has(.modal.is-active) {
     @include delete;
 
     background-color: getColor('background');
-    position: absolute;
-    top: $spacing-5;
-    right: $spacing-5;
+    position: sticky;
+    top: 20px;
+    left: 100%;
     display: block;
     height: $modal-close-dimensions;
     width: $modal-close-dimensions;
@@ -143,6 +144,11 @@ body:has(.modal.is-active) {
     }
   }
 
+  .modal-title {
+    padding: 20px 0;
+  }
+
+  .modal-title, 
   .modal-header {
     color: getColor('font');
     font-family: $family-sans-serif;
@@ -156,10 +162,6 @@ body:has(.modal.is-active) {
     width: 100%;
     word-wrap: break-word;
 
-    &:has(.icon) {
-      text-align: center;
-    }
-
     @include desktop {
       font-size: $size-3-desktop;
     }
@@ -201,4 +203,4 @@ body:has(.modal.is-active) {
       }
     }
   }
-}
+}

package/framework/src/components/_otp.scss

@@ -67,7 +67,7 @@
   }
 }
 
-.help {
+.otp-error-message {
   font-size: $text-12;
   margin-top: 4px;
 }

package/framework/src/components/_price.scss

@@ -14,21 +14,36 @@ $price-levels: (
   column-gap: 12px;
   flex-wrap: wrap;
   --font-size: #{$text-64};
+  --tag-period-size:#{$text-16};
 
   @each $price-level in $price-levels {
     $i: index($price-levels, $price-level);
     $font-size: nth($price-level, 1);
-    $strike-font-size: nth($price-level, 2);
+    $striked-font-size: nth($price-level, 2);
+    $tag-size: nth($price-level, 3);
+    $tag-period-size: nth($price-level, 4);
 
     &.is-level-#{$i} {
       --font-size: #{$font-size};
-      --strike-font-size: #{$strike-font-size};
+      --striked-font-size: #{$striked-font-size};
+      --tag-amount-size: #{$tag-size};
+      --tag-period-size: #{$tag-period-size};
 
       @if $i > 4 {
         .price-details {
           padding-left: 2px;
         }
       }
+      @if $i > 3 {
+        + .price-tag {
+          &::before {
+            border-width: 3px;
+            margin-left: -6px;
+            border-radius: 1px;
+          }
+          padding: 4px !important;
+        }
+      }
     }
   }
 
@@ -41,9 +56,22 @@ $price-levels: (
 
   .price {
     font-size: var(--font-size);
+    &.is-striked {
+      font-size: var(--striked-font-size);
+    }
+  }
+
+  .price-tag {
+    padding: calc(var(--tag-period-size)/2);
+    font-size: var(--tag-amount-size);
+
+    &:before {
+      margin-left:calc(4px - var(--tag-period-size));
+    }
 
-    &.strike {
-      font-size: var(--strike-font-size);
+    .tag-period {
+      font-size: var(--tag-period-size);
+      margin-bottom: calc( calc( var(--tag-period-size) - 10px) / 2);
     }
   }
 
@@ -124,14 +152,14 @@ $price-levels: (
       }
     }
 
-    &.strike {
+    &.is-striked {
       &::before {
         transform: rotate(-12deg);
       }
     }
   }
 
-  &.strike {
+  &.is-striked {
     position: relative;
     color: getColor('neutral');
 
@@ -156,3 +184,40 @@ $price-levels: (
     }
   }
 }
+
+.price-tag {
+  line-height: 1em;
+  align-self: center;
+  background-color: getColor('accent');
+  border-radius: 6px;
+  display: inline-flex;
+  color: getColor('background');
+  height: fit-content;
+  font-size: 28px;
+  align-items: baseline;
+  position: relative;
+  margin-left: -4px;
+  &::before {
+    content: '';
+    border-color: transparent;
+    border-bottom-color: getColor('accent');
+    border-left-color: getColor('accent');
+    transform: rotate(45deg);
+    border-style: solid;
+    border-width: 6px;
+    border-radius: 2px;
+    pointer-events: none;
+    position: absolute;
+    margin-left: -12px;
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+    transform-origin: center;
+    height: 0;
+    width: 0;
+  }
+  .tag-period {
+    place-self: flex-end;
+  }
+}

package/framework/src/components/_progress-radial.scss

@@ -1,28 +1,28 @@
 .progress-radial {
-  background: radial-gradient(white 58%, transparent 51%),
-  conic-gradient(gainsboro 0deg 360deg, gainsboro 0deg 360deg);
-  border-radius: 50%;
-  width: 124px;
-  height: 124px;
-  position: relative;
-
-  .progress-radial-content {
-    border: 1px solid white;
+    background: radial-gradient(white 58%, transparent 51%),
+        conic-gradient(gainsboro 0deg 360deg, gainsboro 0deg 360deg);
     border-radius: 50%;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
+    width: 124px;
+    height: 124px;
+    position: relative;
+
+    .progress-radial-content {
+        border: 1px solid white;
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
 
-  &.is-small {
-    width: 75px;
-    height: 75px;
-  }
+    &.is-small {
+        width: 75px;
+        height: 75px;
+    }
 }

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

@@ -2,20 +2,8 @@
   border-radius: 6px;
   padding: $spacing-1;
   background-color: getColor('neutral-fade');
-  display: flex;
-  margin-left: auto;
-  margin-right: auto;
-  width: fit-content;
-
-  &.justified-start {
-    margin-left: 0;
-    margin-right: auto;
-  }
-
-  &.justified-end {
-    margin-right: 0;
-    margin-left: auto;
-  }
+  display: inline-block;
+  margin: 16px 0;
 
   @include mobile {
     display: flex;

package/framework/src/components/_tabs.scss

@@ -1,4 +1,4 @@
-.tabs {
+.tab-context {
   @include overflow-touch;
   @include unselectable;
 
@@ -24,7 +24,7 @@
   &.is-inverted {
     background-color: getColor('font');
 
-    .tab-list > .tab {
+    .tabs > .tab {
       color: getColor('background') !important;
 
       &.is-active {
@@ -43,21 +43,31 @@
     }
   }
 
-  &:has(.tab-list.is-aligned-start) {
-    text-align: left;
-  }
-
-  &:has(.tab-list.is-aligned-end) {
-    text-align: right;
+  &.has-text-left {
+    .tabs > .tab:first-child {
+      margin-left: 24px;
+    }
   }
 
-  .tab-list {
+  .tabs {
     background-color: transparent;
-    height: 48px;
     overflow-x: auto;
     white-space: nowrap;
     display: inline-flex;
 
+    &.is-centered {
+      justify-content: center;
+    }
+
+    &.is-right {
+      justify-content: flex-end;
+    }
+
+    &.is-left {
+      justify-content: flex-start;
+    }
+
+
     &.is-fullwidth {
       @include desktop {
         > * {
@@ -71,6 +81,7 @@
       box-shadow: none;
     }
 
+
     @include mobile {
       justify-content: flex-start;
       > .tab:first-child {
@@ -78,17 +89,13 @@
       }
     }
 
-    &:has(.tab .icon) {
-      height: 64px;
-    }
-
     > .tab {
-      height: calc(100% - 4px);
       background-color: transparent;
+      border: none;
       color: getColor('font');
       text-decoration: none;
       outline: none;
-      padding: 6px 14px;
+      padding: 8px 14px;
       font-size: $text-14;
       @include desktop {
         font-size: $text-16;
@@ -175,3 +182,4 @@
     }
   }
 }
+

package/framework/src/elements/_badge.scss

@@ -3,46 +3,6 @@
   margin-right: 0.6em;
 }
 
-.badge-container {
-  position: relative;
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-  min-width: 40px;
-  min-height: 40px;
-
-  .badge,
-  .badge-icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    &.is-bottom-left {
-      bottom: 0;
-      left: 0;
-      right: auto;
-      top: auto;
-    }
-
-    &.is-bottom-right {
-      bottom: 0;
-      right: 0;
-      top: auto;
-    }
-
-    &.is-top-left {
-      top: 0;
-      left: 0;
-      right: auto;
-    }
-  }
-
-  .badge-icon {
-    width: $text-20;
-    height: $text-20;
-  }
-}
-
 .badge {
   display: inline-flex;
   border-radius: 9999px;
@@ -59,12 +19,30 @@
     min-height: $text-10;
   }
 
+  &.is-up {
+    position: absolute;
+    left: 50%;
+    top: $text-10;
+    right: $text-24;
+  }
+
   &.is-inverted {
     color: getColor('main') !important;
     background: getColor('background');
   }
 }
 
+.badge-and-text {
+  display: flex;
+  align-items: center;
+  gap: $text-40;
+
+  p {
+    margin-bottom: 0 !important;
+  }
+
+}
+
 [data-badge-number] {
   position: relative;
 

package/framework/src/elements/_box.scss

@@ -1,16 +1,20 @@
 @use 'sass:math';
 @import "../utilities/spacing";
 
+$font-size-header: 15;
+$font-line-height-header: 1.5;
+$padding-top-bottom-header: 8;
+
+
 :root {
-  --padding-box: #{$spacing-5};
+  --padding-box : #{$spacing-5};
   @include mobile {
-    --padding-box: #{$spacing-4};
+    --padding-box : #{$spacing-4};
   }
 }
 
 $highlighted-border-width: 4px;
 
-
 a.box {
   cursor: pointer;
   transition: box-shadow $animation-duration;
@@ -40,16 +44,6 @@ a.box {
     outline: var(--border-active);
   }
 
-  &.is-offset-header {
-    @include tablet {
-      margin-top: 40px;
-
-      &.is-fullheight {
-        height: calc(100% - 40px);
-      }
-    }
-  }
-
   &.is-fullheight {
     .box-content {
       flex-grow: 1;
@@ -60,13 +54,22 @@ a.box {
     box-shadow: none;
     border: var(--border);
 
+    &.has-hat > .is-hat {
+      left: -1px;
+      right: -1px;
+    }
+
     .box-header {
-      margin-top: calc(var(--padding-box) * -1 - 1px);
-      margin-left: calc(var(--padding-box) * -1 - 1px);
-      margin-right: calc(var(--padding-box) * -1 - 1px);
+      margin-top: calc(var(--padding-box)*-1 - 1px);
+      margin-left: calc(var(--padding-box)*-1 - 1px);
+      margin-right: calc(var(--padding-box)*-1 - 1px);
     }
   }
 
+  &.is-header-offset {
+    margin-top: #{$font-size-header * $font-line-height-header + 2 * $padding-top-bottom-header}px;
+  }
+
   &.is-highlighted {
     border-left: $highlighted-border-width solid transparent;
     border-top-left-radius: calc(var(--radius) + $highlighted-border-width);
@@ -75,14 +78,14 @@ a.box {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 
-      &.is-#{$brandName} {
+      &.is-#{$brandName}{
         border-left-color: $color;
         border-left-width: $highlighted-border-width;
       }
     }
 
-    .box-header {
-      margin-left: calc(var(--padding-box) * -1 - $highlighted-border-width);
+    .box-header{
+      margin-left: calc(var(--padding-box)*-1 - $highlighted-border-width);
     }
   }
 
@@ -90,9 +93,9 @@ a.box {
     z-index: inherit;
     background-color: getColor('font');
     color: getColor('background');
-    margin-top: calc(var(--padding-box) * -1);
-    margin-left: calc(var(--padding-box) * -1);
-    margin-right: calc(var(--padding-box) * -1);
+    margin-top: calc(var(--padding-box)*-1);
+    margin-left: calc(var(--padding-box)*-1);
+    margin-right: calc(var(--padding-box)*-1);
     padding: 8px;
     padding-left: var(--padding-box);
     padding-right: var(--padding-box);
@@ -104,12 +107,9 @@ a.box {
     align-items: center;
     font-weight: $weight-semibold;
     border-radius: var(--radius) var(--radius) 0 0;
-    height: 40px;
-
+    text-align: center;
     @include tablet {
-      flex-direction: row;
       align-items: center;
-      justify-content: space-between;
     }
 
     > p:not(:last-child),
@@ -128,18 +128,16 @@ a.box {
   }
 
   .box-content {
-    margin-left: calc(var(--padding-box) * -1);
-    margin-right: calc(var(--padding-box) * -1);
+    margin-left: calc(var(--padding-box)*-1);
+    margin-right: calc(var(--padding-box)*-1);
     padding: var(--padding-box);
-
-    &:first-child {
-      margin-top: calc(var(--padding-box) * -1);
+    &:first-child{
+      margin-top: calc(var(--padding-box)*-1);
       border-top-left-radius: var(--radius);
       border-top-right-radius: var(--radius);
     }
-
-    &:last-child {
-      margin-bottom: calc(var(--padding-box) * -1);
+    &:last-child{
+      margin-bottom: calc(var(--padding-box)*-1);
       border-bottom-left-radius: var(--radius);
       border-bottom-right-radius: var(--radius);
     }
@@ -149,8 +147,8 @@ a.box {
     }
 
     > .is-unboxed {
-      margin-left: calc(var(--padding-box) * -1);
-      margin-right: calc(var(--padding-box) * -1);
+      margin-left: calc(var(--padding-box)*-1);
+      margin-right: calc(var(--padding-box)*-1);
     }
 
     &.is-transparent {
@@ -159,9 +157,9 @@ a.box {
   }
 
   .box-footer {
-    margin-left: calc(var(--padding-box) * -1);
-    margin-right: calc(var(--padding-box) * -1);
-    margin-bottom: calc(var(--padding-box) * -1);
+    margin-left: calc(var(--padding-box)*-1);
+    margin-right: calc(var(--padding-box)*-1);
+    margin-bottom: calc(var(--padding-box)*-1);
     padding: var(--padding-box);
     border-top: 1px solid getColor('neutral-fade');
     border-bottom-left-radius: var(--radius);