@trilogy-ds/styles 0.0.9-beta-v4 → 0.0.11-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);
+        }
+      }
+    }
+  }
+}