@trilogy-ds/styles 0.0.1-beta.27 → 0.0.1-beta.28

package/framework/src/base/_helpers.scss

@@ -423,11 +423,11 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
 }
 
 .is-rounded {
-  border-radius: 50% !important;
+  border-radius: 9999px !important;
 }
 
 .is-bordered {
-  border: 1px solid getBGColor('neutral-dark');
+  border: var(--border);
 }
 
 .is-vertical-paddingless {
@@ -436,15 +436,11 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
 }
 
 // Radius
-$radius-list: (
-  'radius-small': $radius-small,
-  'radius': $radius,
-  'radius-large': $radius-large,
-);
+$radius-list: ['radius-small', 'radius'];
 
-@each $label, $radius-size in $radius-list {
+@each $label in $radius-list {
   .has-border-#{$label} {
-    border-radius: $radius-size;
+    border-radius: var(--#{$label});
   }
 }
 

package/framework/src/base/_loading.scss

@@ -65,7 +65,7 @@ p.is-loading,
     // make the text elements like subtle animated lines
     @include text-tags {
         display: inline;
-        border-radius: 99em;
+        border-radius: 9999px;
         background: currentColor !important;
         box-decoration-break: clone;
         font-size: 70%;

package/framework/src/components/_accordion.scss

@@ -15,8 +15,8 @@
     flex-direction: column;
     background-color: getColor('background');
     font-size: $size-normal;
-    border: 1px solid getBGColor('font');
-    border-radius: $radius;
+    border: var(--border);
+    border-radius: var(--radius);
     margin: 8px 0;
     min-height: 56px;
     max-height: max-content;
@@ -35,7 +35,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid getColor('main');
+      outline: var(--border-active);
       outline-offset: 2px;
     }
 
@@ -47,27 +47,23 @@
       right: 20px;
     }
 
-    &[open] .accordion-header:after {
+    &[open]:not([aria-disabled="true"]) .accordion-header:after {
       @include arrow('up');
     }
-    &:not([open]) .accordion-header:after{
+    &:not([open]) .accordion-header:after, &[aria-disabled="true"] .accordion-header:after {
       @include arrow();
     }
 
-    &[open] > .accordion-header:first-child {
+    &[open]:not([aria-disabled="true"]) > .accordion-header:first-child {
       font-weight: bold;
     }
 
-    &:not(:first-child) {
-      .accordion-header {
-        border-radius: $radius;
-      }
+    &[aria-disabled="true"] .accordion-body {
+      display: none !important;
     }
 
-    &:not(:last-child) {
-      .accordion-content {
-        border-radius: 0;
-      }
+    .accordion-header {
+        border-radius: var(--radius);
     }
 
     &:first-child {
@@ -114,7 +110,7 @@
         overflow-y: hidden;
 
         .accordion-content {
-          border-radius: $radius;
+          border-radius: var(--radius);
           margin-bottom: 10px;
 
           @include mobile() {

package/framework/src/components/_card.scss

@@ -1,7 +1,8 @@
 .card {
   max-width: 100%;
   display: flex;
-  border-radius: $radius;
+  border-radius: var(--radius);
+  overflow: hidden;
   flex-direction: column;
   position: relative;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
@@ -16,15 +17,11 @@
     position: relative;
     flex-shrink: 0;
     overflow: hidden;
-    border-radius: $radius $radius 0px 0px;
   }
 
   .card-content {
-    border-bottom-left-radius: $radius;
-    border-bottom-right-radius: $radius;
     padding: $spacing-5;
     flex-grow: 1;
-    border-radius: $radius;
 
     @include mobile {
       padding: $spacing-4;
@@ -57,7 +54,7 @@
 
   &.is-flat {
     box-shadow: none;
-    border: 1px solid getBGColor('font');
+    border: var(--border);
 
     .card-content {
       padding-left: 20px;
@@ -71,26 +68,15 @@
   }
 
   &.is-active {
-    border: 2px solid getColor('main');
-
-    .card-image {
-      border-radius: 6px 6px 0px 0px;
-    }
+    outline: var(--border-active);
 
     .card-content {
-      border-bottom-left-radius: ($radius - 2px);
-      border-bottom-right-radius: ($radius - 2px);
+
       padding: 22px;
       @include mobile {
         padding: 14px;
       }
     }
-
-    &.is-horizontal {
-      .card-image {
-        border-radius: ($radius - 2px) 0px 0px ($radius - 2px);
-      }
-    }
   }
 
   &.is-horizontal {
@@ -110,7 +96,6 @@
 
     .card-image {
       max-width: 100%;
-      border-radius: $radius 0px 0px $radius;
 
       @include tablet {
         img {
@@ -176,31 +161,11 @@
             top: 50%;
             transform: translateY(-50%);
           }
-          &.is-polyfilled {
-            border-top-left-radius: $radius;
-            border-top-right-radius: 0;
-            border-bottom-left-radius: $radius;
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-            background-size: cover;
-            background-repeat: no-repeat;
-            background-position: 50% 50%;
-
-            img {
-              visibility: hidden;
-            }
-          }
         }
       }
     }
 
     .card-content {
-      border-top-right-radius: $radius;
-      border-bottom-right-radius: $radius;
-      border-bottom-left-radius: 0;
       padding-left: 20px;
       padding-right: 20px;
 
@@ -220,10 +185,8 @@
     box-shadow: none;
     background: transparent;
 
-    &.is-inverted .card-image .image img,
-    &.is-reversed .card-image .image img,
     .card-image .image img {
-      border-radius: $radius;
+      border-radius: var(--radius);
     }
 
     .card-content {
@@ -253,42 +216,11 @@
   &.is-reversed {
     .card-image {
       order: 1;
-      border-radius: 0;
-
-      .image {
-        img {
-          border-bottom-left-radius: $radius;
-          border-bottom-right-radius: $radius;
-        }
-      }
-    }
-
-    .card-content {
-      border-top-left-radius: $radius;
-      border-top-right-radius: $radius;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
     }
 
     &.is-horizontal {
       .card-image {
         order: 1;
-
-        .image {
-          img {
-            border-top-left-radius: 0;
-            border-top-right-radius: $radius;
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: $radius;
-          }
-        }
-      }
-
-      .card-content {
-        border-top-left-radius: $radius;
-        border-top-right-radius: 0;
-        border-bottom-left-radius: $radius;
-        border-bottom-right-radius: 0;
       }
     }
   }

package/framework/src/components/_countdown.scss

@@ -1,6 +1,6 @@
 .countdown {
   border: 1px solid currentcolor;
-  border-radius: $radius;
+  border-radius: var(--radius);
   display: inline-flex;
   padding: $spacing-2;
   color: getColor('font');
@@ -32,7 +32,7 @@
 
   &.is-small {
     padding: $spacing-2 0;
-    border-radius: $radius-small;
+    border-radius: var(--radius-small);
 
     .count {
       font-size: $text-12;

package/framework/src/components/_dropdown.scss

@@ -78,7 +78,7 @@
     z-index: 20;
 
     .dropdown-content {
-      border-radius: $radius;
+      border-radius: var(--radius);
       box-shadow: 0 2px 3px rgba(#000, 0.1),
       0 0 0 1px rgba(#000, 0.1);
       font-size: inherit;

package/framework/src/components/_level.scss

@@ -5,7 +5,7 @@
     justify-content: space-between;
 
     code {
-        border-radius: $radius;
+        border-radius: var(--radius);
     }
 
     img {

package/framework/src/components/_modal.scss

@@ -67,7 +67,7 @@ body:has(.modal.is-active) {
 
   .modal-content {
     background-color: getColor('background');
-    border-radius: $radius $radius 0 0;
+    border-radius: var(--radius) var(--radius) 0 0;
     color: getColor('font');
     overflow: auto;
     position: relative;

package/framework/src/components/_otp.scss

@@ -6,7 +6,7 @@
     @include hover();
     outline: none;
     border: 1px solid currentColor;
-    border-radius: $radius-small;
+    border-radius: var(--radius-small);
     background: transparent;
     width: 33px;
     height: 40px;

package/framework/src/components/_pagination.scss

@@ -2,25 +2,24 @@
   font-size: $size-normal;
   margin: -2.5px;
 
-  &.is-rounded {
-    .pagination-previous,
-    .pagination-next {
-      padding-left: 1em;
-      padding-right: 1em;
-      height: 35px;
-      width: 35px;
-      border-radius: $radius-rounded;
-    }
+  .pagination-previous,
+  .pagination-next {
+    padding-left: 1em;
+    padding-right: 1em;
+    height: 35px;
+    width: 35px;
+    border-radius: 9999px;
+  }
 
-    .pagination-link {
-      height: 35px;
-      border-radius: $radius-rounded;
-    }
+  .pagination-link {
+    height: 35px;
+    border-radius: 9999px;
+  }
 
-    .pagination-list {
-      flex: 0 0 auto;
-    }
+  .pagination-list {
+    flex: 0 0 auto;
   }
+
 }
 
 .pagination,
@@ -53,7 +52,7 @@
   min-width: 2.25em;
 
   @include hover();
-  
+
 }
 
 .pagination-previous,
@@ -64,7 +63,7 @@
 }
 
 .pagination-link {
-  &.is-current {
+  &[aria-current] {
     background-color: getColor('font');
     color: getColor('background');
 
@@ -75,7 +74,7 @@
 }
 
 .pagination-ellipsis {
-  color: getBGColor('neutral-dark');
+  color: getColor('background');
   pointer-events: none;
 }
 
@@ -152,9 +151,3 @@
     }
   }
 }
-
-@include desktop {
-  .pagination {
-    justify-content: center;
-  }
-}

package/framework/src/components/_popover.scss

@@ -74,7 +74,7 @@
         @include position-top();
 
         background-color: getColor('font');
-        border-radius: $radius-small;
+        border-radius: var(--radius-small);
         box-shadow: $shadow;
         color: getColor('background');
         display: inline-block;

package/framework/src/components/_product-tour.scss

@@ -92,7 +92,7 @@
             top: 0;
             left: 0;
             background: white;
-            border-radius: 100%;
+            border-radius: 9999px;
             box-shadow: $shadow;
             transform: translate(-50%, -50%);
 

package/framework/src/components/_range.scss

@@ -25,14 +25,14 @@
     .range-track {
       width: 100%;
       height: 8px;
-      border-radius: 8px;
+      border-radius: var(--radius);
       position: absolute;
       margin: auto;
       top: 0;
       bottom: 0;
       @include mobile {
         height: 4px;
-        border-radius: 4px;
+        border-radius: var(--radius-small);
       }
     }
 

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

@@ -13,7 +13,7 @@
 
   .segmented-control-item {
     padding: 0 $spacing-5;
-    border-radius: $radius-small;
+    border-radius: var(--radius-small);
     font-size: 16px;
     text-align: center;
     border: 2px solid transparent;

package/framework/src/components/_stepper.scss

@@ -25,7 +25,7 @@
     display: block;
     height: 4px;
     background: getBGColor('font');
-    border-radius: 4px;
+    border-radius: var(--radius-small);
   }
 
   &.is-error {
@@ -147,7 +147,7 @@
 .step-bars {
   height: 4px;
   background: getColor('disabled');
-  border-radius: 4px;
+  border-radius: var(--radius-small);
   display: none;
 }
 

package/framework/src/components/_timeline.scss

@@ -137,7 +137,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     .timeline-marker {
       position: absolute;
       background: $timeline-marker-color;
-      border-radius: 100%;
+      border-radius: 9999px;
       content: '';
       display: block;
       height: $timeline-marker-size;
@@ -157,7 +157,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
         }
 
         background: $timeline-marker-color;
-        border-radius: 100%;
+        border-radius: 9999px;
         display: block;
         overflow: hidden;
       }
@@ -173,7 +173,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
         line-height: size(0.75rem);
         padding: math.div($timeline-icon-size, 3);
         background: $timeline-marker-color;
-        border-radius: 100%;
+        border-radius: 9999px;
 
         > i {
           color: getColor('background');

package/framework/src/elements/_alert.scss

@@ -12,7 +12,7 @@ a.alert {
 
 .alert {
 
-  border-radius: $radius;
+  border-radius: var(--radius);
   margin-bottom: 16px;
   position: relative;
   display: flex;

package/framework/src/elements/_badge.scss

@@ -5,7 +5,7 @@
 
 @mixin badge {
   display: inline-flex;
-  border-radius: 99em;
+  border-radius: 9999px;
   color: getColor('background');
   background: getColor('main');
   font-size: $text-10;
@@ -71,6 +71,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 100%;
+    border-radius: 9999px;
   }
 }

package/framework/src/elements/_box.scss

@@ -20,7 +20,8 @@ a.box {
 .box {
   background-color: getColor('background');
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  border-radius: $radius;
+  border-radius: var(--radius);
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -36,57 +37,7 @@ a.box {
   }
 
   &.is-active {
-    border: 2px solid getColor('main');
-
-    > .box-header {
-      border-radius: ($radius - 2px) ($radius - 2px) 0 0;
-      padding-top: 6px;
-      padding-left: 22px;
-      padding-right: 6px;
-    }
-
-    ~ .box-content {
-      border-radius: 0 0 ($radius - 2px) ($radius - 2px);
-
-    }
-
-    > .box-content {
-      padding-left: 22px;
-      padding-right: 22px;
-      @include mobile {
-        padding-left: 14px;
-        padding-right: 14px;
-      }
-
-      &:first-child {
-        border-radius: ($radius - 2px) ($radius - 2px) 0 0;
-        padding-top: 22px;
-        @include mobile {
-          padding-top: 14px;
-        }
-
-      }
-
-      &:last-child {
-        border-radius: 0 0 ($radius - 2px) ($radius - 2px);
-        padding-bottom: 22px;
-        @include mobile {
-          padding-bottom: 14px;
-        }
-      }
-
-      &:only-child {
-        border-radius: ($radius - 2px);
-        padding: 22px;
-        @include mobile {
-          padding: 14px;
-        }
-      }
-    }
-
-    > .box-footer {
-      margin: 12.5px 5.5px 5.5px;
-    }
+    outline: var(--border-active);
   }
 
   &.is-fullheight {
@@ -114,7 +65,7 @@ a.box {
 
   &.is-flat {
     box-shadow: none;
-    border: 1px solid getBGColor('font');
+    border: var(--border);
 
     &.has-hat > .is-hat {
       left: -1px;
@@ -138,7 +89,6 @@ a.box {
     padding: 8px;
     padding-left: 24px;
     box-shadow: none;
-    border-radius: $radius $radius 0 0;
     font-size: 15px;
     display: flex;
     justify-content: center;
@@ -170,7 +120,6 @@ a.box {
 
     ~ .box-content {
       margin-top: 0;
-      border-radius: 0 0 $radius $radius;
     }
   }
 
@@ -187,18 +136,6 @@ a.box {
       text-align: left;
     }
 
-    &:first-child {
-      border-radius: $radius $radius 0 0;
-    }
-
-    &:last-child {
-      border-radius: 0 0 $radius $radius;
-    }
-
-    &:only-child {
-      border-radius: $radius;
-    }
-
     > .is-unboxed {
       margin-left: -$padding-box;
       margin-right: -$padding-box;
@@ -217,7 +154,7 @@ a.box {
 
   .box-footer {
     padding-top: $padding-box;
-    border-top: 1px solid getBGColor('font');
+    border-top: var(--border);
     margin: 12.5px 7.5px 7.5px;
   }
 }

package/framework/src/elements/_button.scss

@@ -36,7 +36,7 @@ $button-border-width: 2px !default;
 
   background-color: white;
   border-width: $button-border-width;
-  border-radius: $radius-small;
+  border-radius: var(--radius-small);
   cursor: pointer;
   justify-content: center;
   text-align: center;

package/framework/src/elements/_checkbox.scss

@@ -18,7 +18,7 @@
   label.checkbox-label {
     &:before,
     &:after {
-      border-radius: $radius-small;
+      border-radius: var(--radius-small);
     }
   }
 }

package/framework/src/elements/_chips.scss

@@ -1,5 +1,3 @@
-$chip-radius: 30px !default;
-
 .chips-list {
   align-items: center;
   display: inline-flex;
@@ -44,7 +42,7 @@ $chip-radius: 30px !default;
   .chips {
     align-items: center;
     background-color: white;
-    border-radius: $chip-radius;
+    border-radius: 9999px;
     color: getColor('font');
     display: inline-flex;
     font-weight: 400;
@@ -55,7 +53,7 @@ $chip-radius: 30px !default;
     padding: 6px $spacing-4;
     white-space: nowrap;
     cursor: pointer;
-    border: 1px solid getBGColor('font');
+    border: var(--border);
 
     &:not(.is-disabled) {
 
@@ -63,7 +61,7 @@ $chip-radius: 30px !default;
         background-color: getColor('main');
         color: white;
         font-weight: 600;
-        border: 2px solid getColor('main');
+        border: var(--border-active);
         padding: 5px 15px;
 
         #{$hoverSelector} {