@trilogy-ds/styles 0.0.1-beta-149 → 0.0.1-beta-151

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/_accordion.scss

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

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,13 @@ body:has(.modal.is-active) {
     color: getColor('font');
     overflow: auto;
     position: relative;
-    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,62 +102,73 @@ body:has(.modal.is-active) {
       }
     }
 
-    .modal-footer {
-      position: sticky;
-      width: 100%;
-      background: getColor('background');
-      bottom: 0;
-      padding: 16px;
-    }
-
     // If Close Icon Modal & Title Modal are sibling elements, override margin
     .modal-close ~ .modal-title {
       margin-top: -32px;
     }
-  }
 
-  .modal-close {
-    @include delete;
+    .modal-header {
+      padding: $spacing-5;
+      color: getColor('font');
+      font-family: $family-sans-serif;
+      font-size: $size-3;
+      font-weight: $weight-semibold;
+      line-height: 1.1;
+      background-color: getColor('background');
+      z-index: zindex('small');
+      position: sticky;
+      top: 0;
+      width: 100%;
+      word-wrap: break-word;
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
 
-    background-color: getColor('background');
-    position: sticky;
-    top: 20px;
-    left: 100%;
-    display: block;
-    height: $modal-close-dimensions;
-    width: $modal-close-dimensions;
-    z-index: zindex('medium');
-
-    #{$hoverSelector} {
-      background-color: getColor('neutral-fade');
-    }
+      &:has(.icon) {
+        text-align: center;
+      }
+
+      @include desktop {
+        font-size: $size-3-desktop;
+      }
+
+      .modal-close {
+        @include delete;
 
-    &::after,
-    &::before {
-      background-color: getColor('font');
+        background-color: getColor('background');
+        display: block;
+        height: $modal-close-dimensions;
+        width: $modal-close-dimensions;
+        z-index: zindex('medium');
+
+        #{$hoverSelector} {
+          background-color: getColor('neutral-fade');
+        }
+
+        &::after,
+        &::before {
+          background-color: getColor('font');
+        }
+      }
     }
-  }
 
-  .modal-title {
-    padding: 20px 0;
-  }
+    .modal-body {
+      padding: $spacing-5;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
 
-  .modal-title, 
-  .modal-header {
-    color: getColor('font');
-    font-family: $family-sans-serif;
-    font-size: $size-3;
-    font-weight: $weight-semibold;
-    line-height: 1.1;
-    background-color: getColor('background');
-    z-index: zindex('small');
-    position: sticky;
-    top: 0;
-    width: 100%;
-    word-wrap: break-word;
+    .modal-footer {
+      padding: $spacing-5;
+      position: sticky;
+      width: 100%;
+      background: getColor('background');
+      bottom: 0;
 
-    @include desktop {
-      font-size: $size-3-desktop;
+      @include tablet {
+        display: flex;
+        justify-content: flex-end;
+      }
     }
   }
 
@@ -203,4 +208,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,32 +43,21 @@
     }
   }
 
-  &.has-text-left {
-    .tabs > .tab:first-child {
-      margin-left: 24px;
-    }
+  &:has(.tab-list.is-aligned-start) {
+    text-align: left;
   }
 
-  .tabs {
+  &:has(.tab-list.is-aligned-end) {
+    text-align: right;
+  }
+
+  .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 {
         > * {
@@ -82,10 +71,6 @@
       box-shadow: none;
     }
 
-    &.is-icons {
-      height: 64px;
-    }
-
     @include mobile {
       justify-content: flex-start;
       > .tab:first-child {
@@ -93,10 +78,13 @@
       }
     }
 
+    &:has(.tab .icon) {
+      height: 64px;
+    }
+
     > .tab {
       height: calc(100% - 4px);
       background-color: transparent;
-      border: none;
       color: getColor('font');
       text-decoration: none;
       outline: none;

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;