@trilogy-ds/styles 0.0.1-beta-110 → 0.0.1-beta-112

package/framework/src/base/_color.scss

@@ -1,28 +1,36 @@
 @use "sass:map";
 
 @function getColor( $name ) {
-  @return var(--color-#{nth(map-get($colors,$name),2)});
+  @if str-slice($name, 0, 3) == 'bg-' {
+    $submane: str-slice($name, 4);
+  @return getBGColor( $submane );
+  }
+  @return var(--color-#{nth(map-get($colors,$name),1)})
 }
 
 @function getColorValue( $name ) {
-  @return #{nth(map-get($colors,$name),1)}
+  @return #{nth(map-get($colors,$name),2)}
+}
+
+@function getBGColorValue( $name ) {
+  @return #{nth(map-get($colors,$name),4)}
 }
 
 @function getColorBrandName( $name ) {
-  @return #{nth(map-get($colors,$name),2)}
+  @return #{nth(map-get($colors,$name),1)}
+}
+
+@function getBGColor( $name ) {
+  @return var(--color-bg-#{nth(map-get($colors,$name),1)})
 }
 
 :root {
   @each $name, $color in $colors {
-    --color-#{nth($color,2)}: #{nth($color,1)};
+    --color-#{nth($color,1)}: #{nth($color,2)};
+    --color-bg-#{nth($color,1)}: #{nth($color,4)};
   }
 }
 
 @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/_generic.scss

@@ -7,7 +7,7 @@ $body-line-height: 1.5 !default;
 .html-wrap {
     margin: 0;
     padding: 0;
-    background-color: getColor('background');
+    background-color: getBGColor('neutral');
     font-size: $body-size;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;

package/framework/src/base/_helpers.scss

@@ -197,8 +197,8 @@ $alignments: (
 
 @mixin typography-colors() {
   @each $name, $color in $colors {
-    $brandName: nth($color, 2);
-    $color: nth($color, 1);
+    $brandName: nth($color, 1);
+    $color: nth($color, 2);
     $color-invert: invertColor($name);
 
     .has-text-#{$brandName} {
@@ -210,6 +210,9 @@ $alignments: (
     .has-background-#{$brandName} {
       background-color: getColor($name) !important;
     }
+    .has-background-#{$brandName}-fade {
+      background-color: getBGColor($name) !important;
+    }
   }
 }
 

package/framework/src/components/_accordion.scss

@@ -1,18 +1,15 @@
 .accordions#{$suffix} {
   padding-left: 0;
   padding-right: 0;
+  margin: $spacing-4 0;
 
-  /* Chrome + Webkit */
   details.accordion ::-webkit-details-marker {
     display: none;
     content: "";
   }
 
-  details.accordion summary {
-    list-style-image: none;
-  }
-
   .accordion {
+
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -23,7 +20,7 @@
     margin: 8px 0;
     min-height: 56px;
     max-height: max-content;
-    transition: margin 0.3s;
+    transition: 0.3s;
 
     .accordion-header {
       font-weight: bold;
@@ -34,13 +31,13 @@
       padding-top: 0 !important;
     }
 
-    &:has(summary:hover):not(.is-disabled)  {
+    &:has(summary:hover):not(.is-disabled) {
       @include hoverRules();
     }
 
-    &:has(summary:focus-visible) {
+    &:focus-visible {
       outline: var(--border-active);
-      outline-offset: -2px;
+      outline-offset: 2px;
     }
 
     .accordion-header:after {
@@ -68,10 +65,6 @@
         border-radius: var(--radius);
       transition: margin 300ms ease-out;
 
-      &:focus-visible{
-        outline: none;
-      }
-
     }
 
     &[open] .accordion-header {

package/framework/src/components/_all.scss

@@ -1,10 +1,10 @@
 @charset "utf-8";
 @import '../utilities/spacing';
 
-@import 'autolayout';
 @import 'divider';
 @import 'breadcrumb';
 @import 'card';
+@import 'level';
 @import 'modal';
 @import 'pagination';
 @import 'popover';

package/framework/src/components/_autolayout2.scss

@@ -0,0 +1,38 @@
+body:not(.is-tight) {
+  .box {
+    margin-top: 16px;
+  }
+  .box:not(:first-child) + * {
+    margin-top: 16px;
+  }
+  * + .box {
+    margin-top: 8px;
+  }
+  .text {
+    margin-top: 8px;
+  }
+  .card {
+    margin-top: 16px;
+  }
+  .button {
+    margin-top: 16px;
+  }
+  .accordions {
+    margin-top: 16px;
+  }
+  .alert {
+    margin-top: 16px;
+  }
+  .field {
+    margin-top: 8px;
+  }
+  .chips-list {
+    margin-top: 16px;
+  }
+  .tags {
+    margin-top: 16px;
+  }
+  .chips-list {
+    margin-top: 16px;
+  }
+}

package/framework/src/components/_card.scss

@@ -6,7 +6,7 @@
   flex-direction: column;
   position: relative;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  background-color: getColor('background');
+  background-color: getColor("background");
 
   &:not(:last-child) {
     margin-bottom: 15px;

package/framework/src/components/_divider.scss

@@ -1,14 +1,18 @@
 .divider {
-  background-color: getColor('neutral');
-  height: 1px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    position: relative;
+    text-align: center;
+    background-color: getBGColor('hovered');
+    height: 1px;
+    width: 100%;
+    margin: 16px 0;
 
-  p.divider-content {
-    white-space: nowrap;
-    padding: 0 $spacing-4;
-    background-color: invertColor('neutral');
-  }
+    p.divider-content {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        white-space: nowrap;
+        padding: 0 $spacing-4;
+        background-color: invertColor('neutral');
+    }
 }

package/framework/src/components/_fab.scss

@@ -7,41 +7,40 @@
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
-  transition: max-width 500ms ease-out;
-  color: white;
+  transition: 0.4s;
+  color: transparent;
+  letter-spacing: -9px;
   border: 0;
   box-shadow: 0px 3px 6px 0px #00000033;
-  font-size: 16px;
+  font-style: normal;
   font-weight: 600;
+  font-size: medium;
   line-height: 20px;
+
   z-index: 9;
-  overflow: hidden;
-  max-width: 54px;
-  white-space: nowrap;
 
   #{$hoverSelector}, &.is-extended, &:focus, &:focus-visible, &:focus-within {
-    background: linear-gradient(
-        to top,
-        rgba(0, 0, 0, 0.25),
-        rgba(0, 0, 0, 0.25)
-    ) getColor('font');
-    max-width: 300px;
+    background-color: getColor('hovered');
+    transition-duration: 0.5s;
+    letter-spacing: initial;
+    color: white;
+
+    .icon,
+    .icon .is-small,
+    .icon .is-medium,
+    .icon .is-large {
+      margin-right: 16px;
+    }
   }
 
   &:active {
-    background: linear-gradient(
-        to top,
-        rgba(0, 0, 0, 0.25),
-        rgba(0, 0, 0, 0.25)
-    ) getColor('font');
+    background-color: getColor('hovered');
   }
 
   .icon {
-    flex: none;
     font-size: 24px !important;
     margin-left: -6px;
-    margin-right: 8px;
+    margin-right: -6px;
     color: white;
-
   }
 }

package/framework/src/components/_level.scss

@@ -0,0 +1,120 @@
+.level {
+    @include block;
+
+    align-items: center;
+    justify-content: space-between;
+
+    code {
+        border-radius: var(--radius);
+    }
+
+    img {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    // Modifiers
+    &.is-mobile {
+        display: flex;
+
+        .level-left,
+        .level-right {
+            display: flex;
+        }
+
+        .level-left + .level-right {
+            margin-top: 0;
+        }
+
+        .level-item {
+            margin-right: 7.4px;
+
+            &:not(:last-child) {
+                margin-bottom: 0;
+            }
+
+            &:not(.is-narrow) {
+                flex-grow: 1;
+            }
+        }
+    }
+
+    // Responsiveness
+    @include tablet {
+        display: flex;
+
+        & > .level-item {
+            &:not(.is-narrow) {
+                flex-grow: 1;
+            }
+        }
+    }
+}
+
+.level-item {
+    align-items: center;
+    display: flex;
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: center;
+
+    .title,
+    .subtitle {
+        margin-bottom: 0;
+    }
+
+    // Responsiveness
+    @include mobile {
+        &:not(:last-child) {
+            margin-bottom: 7.5px;
+        }
+    }
+}
+
+.level-left,
+.level-right {
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    .level-item {
+        // Modifiers
+        &.is-flexible {
+            flex-grow: 1;
+        }
+
+        // Responsiveness
+        @include tablet {
+            &:not(:last-child) {
+                margin-right: 7.5px;
+            }
+        }
+    }
+}
+
+.level-left {
+    align-items: center;
+    justify-content: flex-start;
+
+    // Responsiveness
+    @include mobile {
+        & + .level-right {
+            margin-top: 15px;
+        }
+    }
+
+    @include tablet {
+        display: flex;
+    }
+}
+
+.level-right {
+    align-items: center;
+    justify-content: flex-end;
+
+    // Responsiveness
+    @include tablet {
+        display: flex;
+    }
+}

package/framework/src/components/_media.scss

@@ -0,0 +1,64 @@
+.media {
+    align-items: flex-start;
+    display: flex;
+    text-align: left;
+
+    .content:not(:last-child) {
+        margin-bottom: 7.5px;
+    }
+
+    .media {
+        border-top: 1px solid getBGColor('neutral');
+        display: flex;
+        padding-top: 7.5px;
+
+        .content:not(:last-child),
+        .control:not(:last-child) {
+            margin-bottom: 5px;
+        }
+
+        .media {
+            padding-top: 5px;
+
+            & + .media {
+                margin-top: 5px;
+            }
+        }
+    }
+
+    & + .media {
+        border-top: 1px solid getBGColor('neutral');
+        margin-top: 10px;
+        padding-top: 10px;
+    }
+
+    // Sizes
+    &.is-large {
+        & + .media {
+            margin-top: 15px;
+            padding-top: 15px;
+        }
+    }
+}
+
+.media-left,
+.media-right {
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.media-left {
+    margin-right: 10px;
+}
+
+.media-right {
+    margin-left: 10px;
+}
+
+.media-content {
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    text-align: left;
+}

package/framework/src/components/_modal.scss

@@ -135,7 +135,7 @@ body:has(.modal.is-active) {
     z-index: zindex('medium');
 
     #{$hoverSelector} {
-      background-color: getColor('neutral-fade');
+      background-color: getBGColor('neutral');
     }
 
     &::after,
@@ -145,11 +145,6 @@ body:has(.modal.is-active) {
   }
 
   .modal-title {
-    padding: 20px 0;
-  }
-
-  .modal-title, 
-  .modal-header {
     color: getColor('font');
     font-family: $family-sans-serif;
     font-size: $size-3;
@@ -159,6 +154,7 @@ body:has(.modal.is-active) {
     z-index: zindex('small');
     position: sticky;
     top: 0;
+    padding: 20px 0;
     width: 100%;
     word-wrap: break-word;
 
@@ -203,4 +199,4 @@ body:has(.modal.is-active) {
       }
     }
   }
-}
+}

package/framework/src/components/_pagination.scss

@@ -1,55 +1,115 @@
 .pagination {
   font-size: $size-normal;
   margin: -2.5px;
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  text-align: center;
 
   .pagination-previous,
-  .pagination-next,
-  .pagination-link,
-  .pagination-ellipsis {
-    @include control;
-    @include unselectable;
-    font-size: 1em;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-    justify-content: center;
-    margin: 2.5px;
-    text-align: center;
+  .pagination-next {
+    padding-left: 1em;
+    padding-right: 1em;
+    height: 35px;
+    width: 35px;
+    border-radius: 9999px;
   }
 
-  .pagination-previous,
-  .pagination-next,
-  .pagination-link,
-  .pagination-ellipsis {
-    @include hover();
-    color: getColor('font');
-    min-width: 2.25em;
+  .pagination-link {
     height: 35px;
-    width: 35px;
     border-radius: 9999px;
-    padding-left: 0.75em;
-    padding-right: 0.75em;
-    white-space: nowrap;
   }
 
   .pagination-list {
     flex: 0 0 auto;
+  }
+
+}
+
+.pagination,
+.pagination-list {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-ellipsis {
+  @include control;
+  @include unselectable;
+
+  font-size: 1em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  justify-content: center;
+  margin: 2.5px;
+  text-align: center;
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link {
+  color: getColor('neutral-dark');
+  min-width: 2.25em;
+
+  @include hover();
+
+}
+
+.pagination-previous,
+.pagination-next {
+  padding-left: 0.75em;
+  padding-right: 0.75em;
+  white-space: nowrap;
+}
+
+.pagination-link {
+  &[aria-current] {
+    background-color: getColor('font');
+    color: getColor('background');
+
+    #{$hoverSelector}, &:focus, &:focus-within {
+      background-color: getColor('hovered');
+    }
+  }
+}
+
+.pagination-ellipsis {
+  color: getColor('background');
+  pointer-events: none;
+}
+
+.pagination-list {
+  flex-wrap: wrap;
+}
+
+@include mobile {
+  .pagination {
     flex-wrap: wrap;
+  }
+
+  .pagination-previous,
+  .pagination-next {
     flex-grow: 1;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    text-align: center;
+    flex-shrink: 1;
   }
 
-  .pagination-previous {
-    order: 1;
+  .pagination-list {
+    li {
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
   }
+}
 
+@include tablet {
   .pagination-list {
+    flex-grow: 1;
+    flex-shrink: 1;
+    justify-content: flex-start;
+    order: 1;
+  }
+
+  .pagination-previous {
     order: 2;
   }
 
@@ -57,24 +117,37 @@
     order: 3;
   }
 
-  .pagination-link {
-    &[aria-current] {
-      background-color: getColor('font');
-      color: getColor('background');
-      #{$hoverSelector}, &:focus, &:focus-within {
-        background: linear-gradient(
-            to top,
-            rgba(0, 0, 0, 0.25),
-            rgba(0, 0, 0, 0.25)
-        ) getColor('font') !important;
+  .pagination {
+    justify-content: space-between;
+
+    &.is-centered {
+      .pagination-previous {
+        order: 1;
       }
-    }
-  }
 
-  .pagination-ellipsis {
-    pointer-events: none;
-  }
+      .pagination-list {
+        justify-content: center;
+        order: 2;
+      }
 
-}
+      .pagination-next {
+        order: 3;
+      }
+    }
+
+    &.is-right {
+      .pagination-previous {
+        order: 1;
+      }
 
+      .pagination-next {
+        order: 2;
+      }
 
+      .pagination-list {
+        justify-content: flex-end;
+        order: 3;
+      }
+    }
+  }
+}