@trilogy-ds/styles 0.0.1-beta.9 → 0.0.2-alpha-prompt

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,58 +1,7 @@
 @use "sass:map";
 
-@function getColor( $name ) {
-  @return var(--color-#{nth(map-get($colors,$name),1)})
-}
-
-@function getColorValue( $name ) {
-  @return #{nth(map-get($colors,$name),2)}
-}
-
-@function getColorBrandName( $name ) {
-  @return #{nth(map-get($colors,$name),1)}
-}
-
-@function getVariantColor($name, $n:1)  {
-  @return #{nth(map-get($colors,$name),$n+3)}
-};
-
 :root {
   @each $name, $color in $colors {
-    --color-#{nth($color,1)}: #{nth($color,2)};
-  }
-
-  // Colors
-  @each $name, $color in $colors {
-    $colorname: nth($color, 1);
-    $bgcolorval: nth($color, 2);
-    $colorval: nth($color, 3);
-    .has-background-#{$colorname} {
-      background-color: var(--color-#{$colorname}) !important;
-      color: var(--color-#{$colorval});
-    }
-  }
-}
-
-.is-hovered {
-  background-color: var(--color-hovered);
-}
-
-@function invertColor ($colorName, $context:'') {
-  $invertcolormap: ('tertiary': 'grey-dark', 'grey-dark': 'grey-light', 'grey-light': 'grey-dark');
-  $defaultInvert: white;
-
-  @if ($context == 'dark') {
-    $invertcolormap: ('tertiary':'var(--color-success)');
-    $defaultInvert: black;
-  }
-
-  @if ($context == 'accordion') {
-    $defaultInvert: 'grey-lighter'
-  }
-
-  $result: map.get($invertcolormap, $colorName);
-  @if ($result) {
-    @return $result
+    --color-#{nth($color,2)}: #{nth($color,1)};
   }
-  @return $defaultInvert
 }

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

@@ -7,7 +7,7 @@ $body-line-height: 1.5 !default;
 .html-wrap {
     margin: 0;
     padding: 0;
-    background-color: getColor('grey-lighter');
+    background-color: getColor('background');
     font-size: $body-size;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
@@ -55,6 +55,9 @@ $body-line-height: 1.5 !default;
             z-index: zindex('small');
         }
     }
+  [disabled], [aria-disabled="true"] {
+    @include disabledRules;
+  }
 }
 
 .body-wrap {
@@ -66,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 {
@@ -195,47 +200,26 @@ $alignments: (
   font-weight: $weight-semibold !important;
 }
 
-@mixin typography-colors($target: '') {
+@mixin typography-colors() {
   @each $name, $color in $colors {
-    $brandName:nth($color, 1);
-    $color: nth($color, 2);
+    $brandName: nth($color, 2);
+    $color: nth($color, 1);
     $color-invert: invertColor($name);
 
-    .has-text-#{$brandName}#{if($target == '', '', '-' + $target)} {
+    .has-text-#{$brandName} {
       color: $color !important;
     }
-    .has-text-#{$brandName}-invert#{if($target == '', '', '-' + $target)} {
+    .has-text-#{$brandName}-invert {
       color: $color-invert !important;
     }
+    .has-background-#{$brandName} {
+      background-color: getColor($name) !important;
+    }
   }
 }
 
 @include typography-colors;
 
-@include mobile {
-  @include typography-colors('mobile');
-}
-
-@include tablet {
-  @include typography-colors('tablet');
-}
-
-@include touch {
-  @include typography-colors('touch');
-}
-
-@include desktop {
-  @include typography-colors('desktop');
-}
-
-@include widescreen {
-  @include typography-colors('widescreen');
-}
-
-@include fullhd {
-  @include typography-colors('fullhd');
-}
-
 // Visibility
 $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
 
@@ -441,11 +425,11 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
 }
 
 .is-rounded {
-  border-radius: 50% !important;
+  border-radius: 9999px !important;
 }
 
 .is-bordered {
-  border: 1px solid getColor('grey-light');
+  border: var(--border);
 }
 
 .is-vertical-paddingless {
@@ -454,15 +438,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-large', 'radius-medium', '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});
   }
 }
 
@@ -638,15 +618,25 @@ $radius-list: (
   }
 }
 
-$positions: (
+$justify-values: (
+  'center': 'center',
+  'end': 'flex-end',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  'space-evenly': 'space-evenly',
+  'start': 'flex-start'
+);
+
+$align-values: (
   'center': 'center',
-  'start': 'flex-start',
   '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;
   }
 
@@ -795,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

@@ -35,6 +35,11 @@ p.is-loading,
     .is-checkradio[type="checkbox"] + label::after {
         visibility: hidden;
     }
+  &::after {
+    @include spinner();
+    @include center(1em);
+    position: absolute !important;
+  }
 
     &.field,
     .field {
@@ -54,11 +59,13 @@ p.is-loading,
 
     filter: grayscale(1);
     cursor: default !important;
+    color: transparent !important;
+    pointer-events: none;
 
     // 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%;
@@ -74,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

@@ -42,9 +42,19 @@
     }
 
     a {
-        cursor: pointer;
+        color: unset;
         text-decoration: none;
     }
+    
+  a.link {
+    color: getColor('font');
+    cursor: pointer;
+    text-decoration: none;
+
+    strong {
+      color: currentColor;
+    }
+  }
 
     // List
     ul {

package/framework/src/components/_accordion.scss

@@ -1,63 +1,82 @@
-.accordions#{$suffix} {
+.accordion#{$suffix} {
   padding-left: 0;
   padding-right: 0;
-  margin: $spacing-4 0;
 
-  .accordion {
+  /* Chrome + Webkit */
+  details.accordion-item ::-webkit-details-marker {
+    display: none;
+    content: "";
+  }
+
+  details.accordion-item summary {
+    list-style-image: none;
+  }
+
+  .accordion-item {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    background-color: invertColor(currentColor, 'accordion');
+    background-color: getColor('background');
     font-size: $size-normal;
-    border: 1px solid getColor('grey-disabled');
-    border-radius: 8px;
+    border: var(--border);
+    border-radius: var(--radius);
     margin: 8px 0;
     min-height: 56px;
     max-height: max-content;
+    transition: margin 0.3s;
+
+    .accordion-header {
+      font-weight: bold;
+    }
 
     .accordion-body {
-      display: none;
       padding: $spacing-4;
       padding-top: 0 !important;
+      box-sizing: border-box;
     }
 
-    &.is-active > .accordion-header:first-child, [data-accordion-toggle]:checked ~ .accordion-header {
-      font-weight: bold;
-      & .toggle {
-        &::before {
-          @include arrow(getColor('font'), 'up');
-        }
-      }
+    &:has(summary:hover):not(.is-disabled)  {
+      @include hoverRules();
     }
 
-    &.is-active > .accordion-header:first-child ~ .accordion-body, [data-accordion-toggle]:checked ~ .accordion-body {
-      display: block;
+    &:has(summary:focus-visible) {
+      outline: var(--border-active);
+      outline-offset: -2px;
     }
 
-    &:hover:not(.is-disabled) {
-      border: 2px solid getColor('alternate');
+    .accordion-header:after {
+      max-width: $arrow-size;
+      max-height: $arrow-size;
+      position: absolute;
+      margin-top: 0;
+      right: 20px;
+    }
 
-      .accordion-header {
-        color: getColor('alternate');
-        padding: 15px;
-      }
+    &[open]:not([aria-disabled="true"]) .accordion-header:after {
+      transform: rotate(180deg);
+    }
 
-      .accordion-body {
-        padding: 15px;
-        padding-top: 1px !important;
-      }
+    .accordion-header:after, &[aria-disabled="true"] .accordion-header:after {
+      @include arrow();
+      transition: transform 0.3s;
     }
 
-    &:not(:first-child) {
-      .accordion-header {
-        border-radius: 0;
-      }
+    &[aria-disabled="true"] .accordion-body {
+      display: none !important;
     }
 
-    &:not(:last-child) {
-      .accordion-content {
-        border-radius: 0;
+    .accordion-header {
+        border-radius: var(--radius);
+      transition: margin 300ms ease-out;
+
+      &:focus-visible{
+        outline: none;
       }
+
+    }
+
+    &[open] .accordion-header {
+      margin-bottom: 4px;
     }
 
     &:first-child {
@@ -68,29 +87,13 @@
       margin-bottom: 0;
     }
 
-    &.is-disabled {
-      background-color: getColor('bg-disabled');
-      cursor: no-drop;
-      .accordion-header,
-      .accordion-header .toggle::before {
-        color: getColor('disabled');
-        cursor: no-drop;
-      }
-
-      &.is-active {
-        .accordion-header:not(input) + .accordion-body {
-          color: getColor('grey');
-        }
-      }
-    }
-
     .accordion-header {
       align-items: center;
       display: flex;
       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 {
@@ -112,52 +115,15 @@
         }
       }
 
-      .toggle {
-        -moz-appearance: none;
-        -webkit-appearance: none;
-        user-select: none;
-        border: none;
-        background-color: transparent;
-        cursor: pointer;
-        display: inline-block;
-        flex-grow: 0;
-        flex-shrink: 0;
-        height: 20px;
-        width: 20px;
-        max-height: 20px;
-        max-width: 20px;
-        min-height: 20px;
-        min-width: 20px;
-        outline-offset: 8px;
-        position: relative;
-        vertical-align: top;
-        margin-left: auto;
-        padding: 0 0 0 10px;
-
-        &::after {
-          display: none;
-        }
-
-        &::before {
-          @include arrow(getColor('grey-dark'));
-          top: -0.25em;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          width: 15px;
-          height: 5px;
-          margin: auto;
-        }
-      }
-
       p {
         margin-bottom: 0;
       }
 
       & + .accordion-body {
         overflow-y: hidden;
+
         .accordion-content {
-          border-radius: $radius;
+          border-radius: var(--radius);
           margin-bottom: 10px;
 
           @include mobile() {

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);
+        }
+      }
+    }
+  }
+}