@trilogy-ds/styles 0.0.1-beta-sc-1 → 0.0.1-beta-145

package/framework/src/base/_helpers.scss

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

package/framework/src/components/_divider.scss

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

package/framework/src/components/_modal.scss

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

package/framework/src/components/_otp.scss

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

package/framework/src/components/_price.scss

@@ -14,36 +14,21 @@ $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);
-    $striked-font-size: nth($price-level, 2);
-    $tag-size: nth($price-level, 3);
-    $tag-period-size: nth($price-level, 4);
+    $strike-font-size: nth($price-level, 2);
 
     &.is-level-#{$i} {
       --font-size: #{$font-size};
-      --striked-font-size: #{$striked-font-size};
-      --tag-amount-size: #{$tag-size};
-      --tag-period-size: #{$tag-period-size};
+      --strike-font-size: #{$strike-font-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;
-        }
-      }
     }
   }
 
@@ -56,22 +41,9 @@ $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));
-    }
 
-    .tag-period {
-      font-size: var(--tag-period-size);
-      margin-bottom: calc( calc( var(--tag-period-size) - 10px) / 2);
+    &.strike {
+      font-size: var(--strike-font-size);
     }
   }
 
@@ -152,14 +124,14 @@ $price-levels: (
       }
     }
 
-    &.is-striked {
+    &.strike {
       &::before {
         transform: rotate(-12deg);
       }
     }
   }
 
-  &.is-striked {
+  &.strike {
     position: relative;
     color: getColor('neutral');
 
@@ -184,40 +156,3 @@ $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;
+  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;
-        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;
-    }
+  .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,8 +2,20 @@
   border-radius: 6px;
   padding: $spacing-1;
   background-color: getColor('neutral-fade');
-  display: inline-block;
-  margin: 16px 0;
+  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;
+  }
 
   @include mobile {
     display: flex;

package/framework/src/components/_tabs.scss

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

package/framework/src/elements/_badge.scss

@@ -3,6 +3,46 @@
   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;
@@ -19,30 +59,12 @@
     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,20 +1,16 @@
 @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;
@@ -44,6 +40,16 @@ 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;
@@ -54,22 +60,13 @@ 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);
@@ -78,14 +75,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);
     }
   }
 
@@ -93,9 +90,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);
@@ -107,9 +104,12 @@ a.box {
     align-items: center;
     font-weight: $weight-semibold;
     border-radius: var(--radius) var(--radius) 0 0;
-    text-align: center;
+    height: 40px;
+
     @include tablet {
+      flex-direction: row;
       align-items: center;
+      justify-content: space-between;
     }
 
     > p:not(:last-child),
@@ -128,16 +128,18 @@ 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);
     }
@@ -147,8 +149,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 {
@@ -157,9 +159,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);