@trilogy-ds/styles 0.0.7-beta-v4 → 0.0.7-esm-cjs

package/framework/src/_all.scss

@@ -2,7 +2,7 @@
 
 @import "utilities/all";
 @import "base/all";
-@import "elements/all";
-@import "components/all";
+@import "elements";
+@import "components";
 @import "grid/all";
 @import "layout/all";

package/framework/src/base/_all.scss

@@ -1,7 +1,7 @@
 @charset "utf-8";
 
-@import "reset";
 @import "color";
+@import "reset";
 @import "generic";
 @import "fonts";
 @import "helpers";

package/framework/src/base/_color.scss

@@ -1,28 +1,7 @@
 @use "sass:map";
 
-@function getColor( $name ) {
-  @return var(--color-#{nth(map-get($colors,$name),2)});
-}
-
-@function getColorValue( $name ) {
-  @return #{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,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/_elements.scss

@@ -6,7 +6,7 @@ body {
     @extend .main-wrap;
     @extend .body-wrap;
     @extend .reset-wrap;
-    font-family: $family-sans-serif;
+    font-family: $family-primary;
 }
 
 header {

package/framework/src/base/_generic.scss

@@ -69,3 +69,8 @@ $body-line-height: 1.5 !default;
 .header {
     z-index: zindex('large');
 }
+
+*::before,
+*::after {
+  box-sizing: inherit;
+}

package/framework/src/base/_helpers.scss

@@ -12,7 +12,11 @@
 
 // Float
 .is-clearfix {
-  @include clearfix;
+  &::after {
+    clear: both;
+    content: ' ';
+    display: table;
+  }
 }
 
 .is-pulled-left {
@@ -43,6 +47,7 @@ $alignments: (
   'justified': 'justify',
   'left': 'left',
   'right': 'right',
+  'stretch': 'stretch'
 );
 
 @each $alignment, $text-align in $alignments {
@@ -613,15 +618,25 @@ $radius-list: ['radius-large', 'radius-medium', 'radius-small', 'radius'];
   }
 }
 
-$positions: (
+$justify-values: (
   'center': 'center',
-  'start': 'flex-start',
   'end': 'flex-end',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  'space-evenly': 'space-evenly',
+  'start': 'flex-start'
+);
+
+$align-values: (
+  'center': 'center',
+  'end': 'flex-end',
+  'start': 'flex-start',
+  'stretch': 'stretch'
 );
 
-@each $justification, $justify-content in $positions {
+@each $justification, $justify-content in $justify-values {
 
-  .is-justified-self {
+  .is-justified-self-#{$justification} {
     justify-self: #{$justify-content} !important;
   }
 
@@ -770,7 +785,7 @@ $positions: (
   }
 }
 
-@each $alignment, $align-items in $positions {
+@each $alignment, $align-items in $align-values {
   .is-aligned-#{$alignment} {
     align-items: #{$align-items} !important;
   }

package/framework/src/base/_loading.scss

@@ -36,7 +36,7 @@ p.is-loading,
         visibility: hidden;
     }
   &::after {
-    @include spinner;
+    @include spinner();
     @include center(1em);
     position: absolute !important;
   }
@@ -81,7 +81,7 @@ p.is-loading,
 
     // we need the headings to have margins AND be inline
     @include heading-tags {
-        display: table; // FIXME: well... `@include clearfix;` didn't do the trick
+        display: table;
     }
 
     & & {

package/framework/src/base/_reset.scss

@@ -41,7 +41,12 @@
         margin-bottom: 10px;
     }
 
-  a {
+    a {
+        color: unset;
+        text-decoration: none;
+    }
+    
+  a.link {
     color: getColor('font');
     cursor: pointer;
     text-decoration: none;

package/framework/src/components/_accordion.scss

@@ -32,6 +32,7 @@
     .accordion-body {
       padding: $spacing-4;
       padding-top: 0 !important;
+      box-sizing: border-box;
     }
 
     &:has(summary:hover):not(.is-disabled)  {
@@ -44,8 +45,8 @@
     }
 
     .accordion-header:after {
-      max-width: 15px;
-      max-height: 15px;
+      max-width: $arrow-size;
+      max-height: $arrow-size;
       position: absolute;
       margin-top: 0;
       right: 20px;
@@ -92,7 +93,7 @@
       position: relative;
       height: auto;
       cursor: pointer;
-      padding: $spacing-4;
+      padding: $spacing-4 calc($spacing-4 * 2 + $arrow-size) $spacing-4 $spacing-4;
 
       &.is-grouped {
         > *:first-child {

package/framework/src/components/_autocomplete.scss

@@ -0,0 +1,38 @@
+@import "../utilities/spacing";
+
+.is-autocomplete-container {
+  position: relative;
+
+  .is-autocomplete {
+    .autocomplete-menu {
+      display: none;
+    }
+
+    &.is-active {
+      .autocomplete-menu {
+        display: block;
+        border: var(--border);
+        padding: calc($spacing-1 + 1px) calc($spacing-2 + 2px);
+        border-radius: 4px;
+        max-height: 220px;
+        overflow-y: auto;
+        background-color: getColor('background');
+        z-index: 10000;
+      }
+
+      .autocomplete-item {
+        cursor: pointer;
+        padding: calc($spacing-1 - 0.25px) calc($spacing-1 + 1px);
+
+        &.is-active, &[data-autocomplete-item-hover] {
+          @include hoverRules();
+          margin-left: calc(2px - $spacing-3);
+          margin-right: calc(2px - $spacing-3);
+          border-top: 1px solid getColor('neutral-fade');
+          border-bottom: 1px solid getColor('neutral-fade');
+          padding: calc($spacing-1 - 1.25px) calc($spacing-4 - 1px);
+        }
+      }
+    }
+  }
+}

package/framework/src/components/_autolayout.scss

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