@trilogy-ds/styles 0.0.1-beta-4 → 0.0.1-beta.11

package/framework/src/base/_color.scss

@@ -1,6 +1,10 @@
 @use "sass:map";
 
 @function getColor( $name ) {
+  @if str-slice($name, 0, 3) == 'bg-' {
+    $submane: str-slice($name, 4);
+  @return getBGColor( $submane );
+  }
   @return var(--color-#{nth(map-get($colors,$name),1)})
 }
 
@@ -8,51 +12,25 @@
   @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),1)}
 }
 
-@function getVariantColor($name, $n:1)  {
-  @return #{nth(map-get($colors,$name),$n+3)}
-};
+@function getBGColor( $name ) {
+  @return var(--color-bg-#{nth(map-get($colors,$name),1)})
+}
 
 :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});
-    }
+    --color-bg-#{nth($color,1)}: #{nth($color,4)};
   }
 }
 
-.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
-  }
-  @return $defaultInvert
+@function invertColor ($colorName) {
+  @return var(--color-#{nth(map-get($colors,$colorName),3)})
 }

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: getBGColor('neutral');
     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 {

package/framework/src/base/_helpers.scss

@@ -195,16 +195,16 @@ $alignments: (
   font-weight: $weight-semibold !important;
 }
 
-@mixin typography-colors($target: '') {
+@mixin typography-colors() {
   @each $name, $color in $colors {
-    $brandName:nth($color, 1);
+    $brandName: nth($color, 1);
     $color: nth($color, 2);
     $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;
     }
   }
@@ -212,30 +212,6 @@ $alignments: (
 
 @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';
 
@@ -445,7 +421,7 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex';
 }
 
 .is-bordered {
-  border: 1px solid getColor('grey-light');
+  border: 1px solid getBGColor('neutral-dark');
 }
 
 .is-vertical-paddingless {
@@ -645,6 +621,11 @@ $positions: (
 );
 
 @each $justification, $justify-content in $positions {
+
+  .is-justified-self {
+    justify-self: #{$justify-content} !important;
+  }
+
   .is-justified-#{$justification} {
     justify-content: #{$justify-content} !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,6 +59,8 @@ 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 {

package/framework/src/components/_accordion.scss

@@ -4,13 +4,15 @@
   margin: $spacing-4 0;
 
   .accordion {
+    @include hover();
+
     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: 1px solid getBGColor('font');
+    border-radius: $radius;
     margin: 8px 0;
     min-height: 56px;
     max-height: max-content;
@@ -21,11 +23,17 @@
       padding-top: 0 !important;
     }
 
+    &:focus-visible {
+      outline: 2px solid getColor('main');
+      outline-offset: 2px;
+    }
+
     &.is-active > .accordion-header:first-child, [data-accordion-toggle]:checked ~ .accordion-header {
       font-weight: bold;
+
       & .toggle {
         &::before {
-          @include arrow(getColor('font'), 'up');
+          @include arrow('up');
         }
       }
     }
@@ -34,23 +42,9 @@
       display: block;
     }
 
-    &:hover:not(.is-disabled) {
-      border: 2px solid getColor('alternate');
-
-      .accordion-header {
-        color: getColor('alternate');
-        padding: 15px;
-      }
-
-      .accordion-body {
-        padding: 15px;
-        padding-top: 1px !important;
-      }
-    }
-
     &:not(:first-child) {
       .accordion-header {
-        border-radius: 0;
+        border-radius: $radius;
       }
     }
 
@@ -68,22 +62,6 @@
       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;
@@ -139,7 +117,7 @@
         }
 
         &::before {
-          @include arrow(getColor('grey-dark'));
+          @include arrow();
           top: -0.25em;
           left: 0;
           right: 0;
@@ -156,6 +134,7 @@
 
       & + .accordion-body {
         overflow-y: hidden;
+
         .accordion-content {
           border-radius: $radius;
           margin-bottom: 10px;

package/framework/src/components/_all.scss

@@ -4,11 +4,9 @@
 @import 'disclaimer';
 @import 'divider';
 @import 'breadcrumb';
-@import 'switch';
 @import 'card';
 @import 'dropdown';
 @import 'level';
-@import 'menu';
 @import 'modal';
 @import 'pagination';
 @import 'popover';
@@ -18,7 +16,6 @@
 @import 'accordion';
 @import 'countdown';
 @import 'timeline';
-@import 'slices';
 @import 'stepper';
 @import 'slider';
 @import 'plus-symbol';

package/framework/src/components/_breadcrumb.scss

@@ -1,45 +1,50 @@
 .breadcrumb {
-    @include block;
-    @include unselectable;
+  @include block;
+  @include unselectable;
 
-    ul,
-    ol {
-        @include desktop {
-            display: flex;
-            flex-wrap: wrap;
-        }
+  ul,
+  ol {
+    @include desktop {
+      display: flex;
+      flex-wrap: wrap;
     }
+  }
 
-    li {
-        display: inline;
-        position: relative;
+  li {
+    display: inline;
+    position: relative;
 
-        @include desktop {
-            display: flex;
-            align-items: center;
-        }
-
-        &:first-child a {
-            margin-left: 0;
-        }
+    @include desktop {
+      display: flex;
+      align-items: center;
+    }
 
-        &.is-active {
-            a {
-                color: getColor('font');
-                cursor: default;
-                pointer-events: none;
-            }
-        }
+    &:first-child a {
+      margin-left: 0;
+    }
 
-        + li a::before {
-            content: ">";
-            text-align: center;
-            padding-right: 0.5em;
-        }
+    &.is-active {
+      a {
+        color: getColor('font');
+        cursor: default;
+        pointer-events: none;
+        text-decoration: none;
+      }
     }
 
-    a {
-        color: getColor('alternate');
-        margin: 0 0.5em;
+    + li a::before {
+      content: ">";
+      text-align: center;
+      padding-right: 0.5em;
+      text-decoration: none;
+      display: inline-block;
     }
+  }
+
+  a {
+    color: getColor('main');
+    margin: 0 0.5em;
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
 }

package/framework/src/components/_card.scss

@@ -16,7 +16,7 @@
     position: relative;
     flex-shrink: 0;
     overflow: hidden;
-    border-radius: 8px 8px 0px 0px;
+    border-radius: $radius $radius 0px 0px;
   }
 
   .card-content {
@@ -24,6 +24,7 @@
     border-bottom-right-radius: $radius;
     padding: $spacing-5;
     flex-grow: 1;
+    border-radius: $radius;
 
     @include mobile {
       padding: $spacing-4;
@@ -31,7 +32,7 @@
   }
 
   .card-footer {
-    border-top: 1px solid getColor('grey');
+    border-top: 1px solid getColor('neutral');
   }
 
   .mention {
@@ -62,7 +63,7 @@
     }
 
     .card-content {
-      border: 1px solid getColor('grey');
+      border: 1px solid getBGColor('font');
       padding-left: 20px;
       padding-right: 20px;
 
@@ -74,7 +75,7 @@
   }
 
   &.is-active {
-    border: 2px solid getColor('alternate');
+    border: 2px solid getColor('main');
 
     .card-image {
       border-radius: 6px 6px 0px 0px;
@@ -113,7 +114,7 @@
 
     .card-image {
       max-width: 100%;
-      border-radius: 8px 0px 0px 8px;
+      border-radius: $radius 0px 0px $radius;
 
       @include tablet {
         img {

package/framework/src/components/_countdown.scss

@@ -1,55 +1,57 @@
 .countdown {
-    border: 1px solid currentcolor;
-    border-radius: 8px;
-    display: inline-flex;
-    padding: $spacing-2;
-    color: getColor('font');
+  border: 1px solid currentcolor;
+  border-radius: $radius;
+  display: inline-flex;
+  padding: $spacing-2;
+  color: getColor('font');
 
-    .count {
-        font-family: $family-sans-serif;
-        font-size: $text-14;
-        font-weight: 400;
-        list-style-type: none;
-        text-align: center;
-        padding: 0 $spacing-2;
-        position: relative;
-
-        &:not(:last-child)::before {
-            content: ' ';
-            border-left: 1px solid currentcolor;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 0;
-        }
-
-        .value {
-            font-size: $text-24;
-            font-weight: 600;
-        }
+  .count {
+    font-family: $family-sans-serif;
+    font-size: $text-14;
+    font-weight: 400;
+    list-style-type: none;
+    text-align: center;
+    padding: 0 $spacing-2;
+    position: relative;
+
+    &:not(:last-child)::before {
+      content: ' ';
+      border-left: 1px solid currentcolor;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
     }
 
-    &.is-small {
-        padding: $spacing-2 0;
-        border-radius: 4px;
-        .count {
-            font-size: $text-12;
-            padding: 0 $spacing-2;
-            font-weight: 500;
-
-            .value {
-                font-size: $text-16;
-                font-weight: 600;
-            }
-        }
+    .value {
+      font-size: $text-24;
+      font-weight: 600;
     }
+  }
+
+  &.is-small {
+    padding: $spacing-2 0;
+    border-radius: $radius-small;
+
+    .count {
+      font-size: $text-12;
+      padding: 0 $spacing-2;
+      font-weight: 500;
 
-    &.is-inverted {
-        color: invertColor('font');
-        .count {
-              &:not(:last-child)::before {
-            }
-        }
+      .value {
+        font-size: $text-16;
+        font-weight: 600;
+      }
+    }
+  }
+
+  &.is-inverted {
+    color: invertColor('font');
+
+    .count {
+      &:not(:last-child)::before {
+      }
     }
+  }
 }

package/framework/src/components/_disclaimer.scss

@@ -66,17 +66,18 @@
       }
     }
 
-    &:hover:not(.is-disabled) {
-      border-color: getColor('alternate');
+    #{$hoverSelector} {
+      border-color: getColor('main');
     }
 
     &.is-active {
-      color: getColor('alternate');
+      color: getColor('main');
     }
-/* @todo : deprecated ? remove ? add doc ? */
+
+    /* @todo : deprecated ? remove ? add doc ? */
     .heading {
       font-size: $text-13;
-      color: getColor('grey');
+      color: getColor('neutral');
       margin-bottom: 0.75em;
       text-transform: inherit;
     }

package/framework/src/components/_divider.scss

@@ -1,7 +1,7 @@
 .divider {
     position: relative;
     text-align: center;
-    background-color: getColor('grey');
+    background-color: getBGColor('hovered');
     height: 1px;
     width: 100%;
     margin: 16px 0;
@@ -13,6 +13,6 @@
         transform: translate(-50%, -50%);
         white-space: nowrap;
         padding: 0 $spacing-4;
-        background-color: invertColor('grey');
+        background-color: invertColor('neutral');
     }
 }