@trilogy-ds/styles 0.0.1-beta.5 → 0.0.1-beta.50

package/framework/src/elements/_all.scss

@@ -2,12 +2,12 @@
 @import '../utilities/spacing';
 
 @import 'alert';
+@import 'autocomplete';
 @import 'badge';
 @import 'box';
 @import 'button';
 @import 'chips';
 @import 'checkbox';
-@import 'checkradio';
 @import 'container';
 @import 'dot';
 @import 'entry';
@@ -17,9 +17,7 @@
 @import 'loader';
 @import 'link';
 @import 'list';
-@import 'notification';
 @import 'toaster';
-@import 'options';
 @import 'progress';
 @import 'paragraph';
 @import 'radio';

package/framework/src/elements/_autocomplete.scss

@@ -0,0 +1,32 @@
+.is-autocomplete {
+    .autocomplete-menu {
+        display: none;
+    }
+
+    &.is-active {
+        .autocomplete-menu {
+            display: block;
+            border: 1px solid rgba(0,38,60,.4);
+            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 var(--color-bg-hovered);
+                border-bottom: 1px solid var(--color-bg-hovered);
+                padding: calc($spacing-1 - 1.25px) calc($spacing-4 - 1px);
+            }
+        }
+    }
+}

package/framework/src/elements/_badge.scss

@@ -1,81 +1,76 @@
 .title .badge {
-    margin-left: 0.6em;
-    margin-right: 0.6em;
+  margin-left: 0.6em;
+  margin-right: 0.6em;
 }
 
 @mixin badge {
-    display: inline-flex;
-    border-radius: 99em;
-    color: getColor('background');
-    background: getColor('alternate');;
-    font-size: $text-10;
-    min-height: $text-20;
-    min-width: $text-20;
-    justify-content: center;
-    align-items: center;
+  display: inline-flex;
+  border-radius: 9999px;
+  color: getColor('background');
+  background: getColor('main');
+  font-size: $text-10;
+  min-height: $text-20;
+  min-width: $text-20;
+  justify-content: center;
+  align-items: center;
 
-    &:empty {
-        min-width: $text-10;
-        min-height: $text-10;
-    }
+  &:empty {
+    min-width: $text-10;
+    min-height: $text-10;
+  }
 
-    &.is-up {
-        position: absolute;
-        left: 50%;
-        top: $text-10;
-        right: $text-24;
-    }
+  &.is-up {
+    position: absolute;
+    left: 50%;
+    top: $text-10;
+    right: $text-24;
+  }
 
-    &.is-inverted {
-        color: getColor('main');
-        background: getColor('background');
-    }
-
-    ul.menu-list li a & {
-        margin: 0 $text-15;
-        max-height: 17px;
-    }
+  &.is-inverted {
+    color: getColor('main');
+    background: getColor('background');
+  }
 }
 
 .badge {
-    @include badge;
+  @include badge;
 }
 
 .badge-and-text {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 
-    p {
-        margin-bottom: 0 !important;
+  p {
+    margin-bottom: 0 !important;
 
-        + .badge {
-            @include badge;
+    + .badge {
+      @include badge;
 
-            &.is-level {
-                position: relative;
-                margin-left: 60px;
-            }
-        }
+      &.is-level {
+        position: relative;
+        margin-left: 60px;
+      }
     }
+  }
 }
 
 [data-badge-number] {
-    position: relative;
+  position: relative;
 
-    &::after {
-        content: attr(data-badge-number);
-        position: absolute;
-        margin-left: -15px;
-        top: -7px;
-        color: getColor('background');
-        left: 100%;
-        background: getColor('main');
-        font-size: $text-10;
-        min-height: $text-20;
-        min-width: $text-20;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 100%;
-    }
+  &::after {
+    content: attr(data-badge-number);
+    position: absolute;
+    margin-left: -15px;
+    top: -7px;
+    color: getColor('background');
+    left: 100%;
+    background: getColor('main');
+    font-size: $text-10;
+    min-height: $text-20;
+    min-width: $text-20;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+  }
 }

package/framework/src/elements/_box.scss

@@ -5,11 +5,12 @@ $space-between-tiles: 5px;
 $padding-box: $spacing-5;
 $padding-box-mobile: $spacing-4;
 
+/* @toto : add to figma */
 a.box {
   cursor: pointer;
   transition: box-shadow $animation-duration;
 
-  &:hover,
+  #{$hoverSelector},
   &:active,
   &:focus {
     box-shadow: $focus-shadow;
@@ -17,10 +18,10 @@ a.box {
 }
 
 .box {
-  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   background-color: getColor('background');
-  border-radius: $radius;
-  color: getColor('font');
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  border-radius: var(--radius);
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -35,81 +36,8 @@ a.box {
     margin-bottom: 15px;
   }
 
-  &.has-background {
-    background-repeat: no-repeat;
-
-    &.is-inverted {
-      .box-content {
-        color: getColor('background');
-      }
-
-      .title,
-      .subtitle,
-      .text,
-      .paragraph,
-      p {
-        color: getColor('background');
-      }
-    }
-
-    .box-content {
-      background-color: transparent;
-    }
-  }
-
-
   &.is-active {
-    border: 2px solid getColor('alternate');
-
-    > .box-header {
-      border-radius: ($radius - 2px) ($radius - 2px) 0 0;
-      padding-top: 6px;
-      padding-left: 22px;
-      padding-right: 6px;
-    }
-
-    ~ .box-content {
-      border-radius: 0 0 ($radius - 2px) ($radius - 2px);
-
-    }
-
-    > .box-content {
-      padding-left: 22px;
-      padding-right: 22px;
-      @include mobile {
-        padding-left: 14px;
-        padding-right: 14px;
-      }
-
-      &:first-child {
-        border-radius: ($radius - 2px) ($radius - 2px) 0 0;
-        padding-top: 22px;
-        @include mobile {
-          padding-top: 14px;
-        }
-
-      }
-
-      &:last-child {
-        border-radius: 0 0 ($radius - 2px) ($radius - 2px);
-        padding-bottom: 22px;
-        @include mobile {
-          padding-bottom: 14px;
-        }
-      }
-
-      &:only-child {
-        border-radius: ($radius - 2px);
-        padding: 22px;
-        @include mobile {
-          padding: 14px;
-        }
-      }
-    }
-
-    > .box-footer {
-      margin: 12.5px 5.5px 5.5px;
-    }
+    outline: var(--border-active);
   }
 
   &.is-fullheight {
@@ -137,7 +65,7 @@ a.box {
 
   &.is-flat {
     box-shadow: none;
-    border: 1px solid getColor('grey-dark');
+    border: var(--border);
 
     &.has-hat > .is-hat {
       left: -1px;
@@ -161,7 +89,6 @@ a.box {
     padding: 8px;
     padding-left: 24px;
     box-shadow: none;
-    border-radius: $radius $radius 0 0;
     font-size: 15px;
     display: flex;
     justify-content: center;
@@ -193,13 +120,10 @@ a.box {
 
     ~ .box-content {
       margin-top: 0;
-      border-radius: 0 0 $radius $radius;
     }
   }
 
   .box-content {
-    background-color: getColor('background');
-    color: getColor('font');
     margin: -$padding-box;
     padding: $padding-box;
 
@@ -212,18 +136,6 @@ a.box {
       text-align: left;
     }
 
-    &:first-child {
-      border-radius: $radius $radius 0 0;
-    }
-
-    &:last-child {
-      border-radius: 0 0 $radius $radius;
-    }
-
-    &:only-child {
-      border-radius: $radius;
-    }
-
     > .is-unboxed {
       margin-left: -$padding-box;
       margin-right: -$padding-box;
@@ -235,25 +147,6 @@ a.box {
       }
     }
 
-    &.is-grey,
-    &.tiles-container {
-      padding: $padding-box;
-
-      .tile.is-parent,
-      .tile.is-child:not(.box) {
-        padding: $space-between-tiles;
-      }
-
-      .tile.is-vertical > .tile.is-child:not(:last-child) {
-        margin-bottom: ($space-between-tiles * 2) !important;
-      }
-
-      .box {
-        box-shadow: none;
-        padding: $padding-box;
-      }
-    }
-
     &.is-transparent {
       background-color: transparent;
     }
@@ -261,7 +154,7 @@ a.box {
 
   .box-footer {
     padding-top: $padding-box;
-    border-top: 1px solid getColor('grey-disabled');
+    border-top: var(--border);
     margin: 12.5px 7.5px 7.5px;
   }
 }

package/framework/src/elements/_button.scss

@@ -1,10 +1,4 @@
 $button-border-width: 2px !default;
-$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default;
-
-$button-disabled-shadow: none !default;
-$button-disabled-opacity: 1 !default;
-
-$is-check-button-icon-pos-left: 5px;
 
 .buttons {
   width: 100%;
@@ -38,155 +32,43 @@ $is-check-button-icon-pos-left: 5px;
 .button {
   @include control;
   @include unselectable;
+  @extend %buttons-states;
 
   background-color: white;
   border-width: $button-border-width;
-  border-radius: 4px;
+  border-radius: var(--radius-small);
   cursor: pointer;
   justify-content: center;
   text-align: center;
-  font-family: $body-family;
   white-space: nowrap;
-  height: 44px;
   padding: 0 $spacing-4;
-  font-size: $text-15;
   text-decoration: inherit;
   font-weight: $weight-semibold;
 
-  &:focus {
-    outline: 1px auto getVariantColor('font', 1);
-  }
-
   @include mobile {
     width: 100%;
     margin: 8px 0 !important;
   }
 
-  &.is-loading {
-    color: transparent !important;
-    pointer-events: none;
-
-    &::after {
-      @include spinner;
-      @include center(1em);
-
-      position: absolute !important;
-    }
-  }
-
-  &[class*='is-'] {
-    &[disabled] {
-      @extend %disabled;
+  @each $name, $pair in $button-colors {
+    $variantName: nth($pair, 1);
+    $colorBG: getColor(#{nth($pair, 2)});
+    $colorText: getColor(nth($pair, 3));
 
-      background-color: getColor('bg-disabled');
-      border-color: transparent;
-      box-shadow: none;
-      color: getColor('disabled');
-
-      &:hover {
-        color: getColor('disabled');
-        background-color: getColor('bg-disabled');
-        border-color: getColor('bg-disabled');
-      }
-    }
-  }
-
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $invColor: nth($pair, 3);
-
-    &.is-#{$color} {
-      background-color: getColor($name);
-      color: invertColor($name);
+    &.is-#{$variantName} {
+      background-color: $colorBG;
+      color: $colorText;
     }
   }
 
-  %disabled {
-    background-color: getColor('bg-disabled');
-    color: getColor('disabled');
-    box-shadow: $button-disabled-shadow;
-    opacity: $button-disabled-opacity;
-
-    &:hover {
-      color: getColor('disabled');
-    }
+  &[disabled],
+  &[aria-disabled=true] {
+    background-color: getBGColorValue('main') !important;
+    color: getBGColorValue('disabled') !important
   }
 
-
-  &.is-primary {
-    background-color: getColor('main');
-    border-color: getColor('main');
-    color: getColor('background');
-
-    &:hover,
-    &.is-hovered {
-      background-color: getVariantColor('main',2);
-      border-color: getVariantColor('main',2);
-      opacity: 1;
-    }
-
-    &:focus,
-    &.is-focused,
-    &:active,
-    &.is-active {
-      background-color: getVariantColor('main',1);
-      border-color: getVariantColor('main',1);
-    }
-  }
-
-  &.is-secondary {
-    background-color: getColor('alternate');
-    color: getColor('background');
-    border-color: getColor('alternate');
-
-    &:hover,
-    &.is-hovered {
-      color: getColor('background');
-      background-color: getVariantColor('alternate',1);
-    }
-
-    &:focus,
-    &.is-focused,
-    &:active,
-    &.is-active {
-      color: getColor('background');
-      background-color: getVariantColor('alternate',2);
-    }
+  &.is-loading {
+    background-color: getColorValue('neutral');
   }
 
-  &.is-tertiary {
-    background-color: getColor('background');
-    border: 2px solid getVariantColor('alternate',2);
-    color: getColor('alternate');
-
-    &:hover,
-    &.is-hovered{
-      color: getColor('alternate');
-      background-color: getVariantColor('alternate',3);
-      border-color: getVariantColor('alternate',2);
-
-    }
-
-    &:focus,
-    &.is-focused{
-      color: getColor('alternate');
-      background-color: getVariantColor('alternate',3);
-      border-color: getColor('alternate');
-    }
-
-    &:active,
-    &.is-active {
-      color: getVariantColor('alternate',1);
-      background-color: getVariantColor('alternate',3);
-      border: 2px solid currentColor;
-    }
-
-    &:disabled,
-    &[disabled],
-    &[disabled]:hover{
-      background-color: getColor('background');
-      border: 2px solid getColor('grey-light');
-      color: getColor('disabled');
-    }
-  }
 }

package/framework/src/elements/_checkbox.scss

@@ -2,38 +2,32 @@
 
 .checkbox,
 .checkbox-tile {
-    input:checked ~ label.checkbox-label {
-      &:before {
-        background-color: getColor('alternate');
-      }
-      &:after {
-        content: "";
-        mask-image: url('./assets/icons/all/check.svg');
-        background-color: getColor('background');
-        mask-size: 18px;
-      }
+  input:checked ~ label.checkbox-label {
+    &:before {
+      background-color: getColor('main');
     }
 
-    label.checkbox-label {
-        &:before,
-        &:after {
-            border-radius: 4px;
-        }
+    &:after {
+      content: "";
+      mask-image: url('./assets/icons/all/check.svg');
+      background-color: getColor('background');
+      mask-size: 18px;
     }
+  }
+
+  label.checkbox-label {
+    &:before,
+    &:after {
+      border-radius: var(--radius-small);
+    }
+  }
 }
 
 .checkbox-tile {
-    input:checked ~ label.checkbox-label {
-        &:after {
-            top: 15px;
-            right: 15px;
-        }
-    }
-    input:checked:disabled ~ label.checkbox-label {
-        &:after {
-            background-color: getColor('grey');
-            top: $spacing-4;
-            right: $spacing-4;
-        }
+  input:checked ~ label.checkbox-label {
+    &:after {
+      top: 15px;
+      right: 15px;
     }
+  }
 }