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

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: 99em;
+  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: 100%;
+  }
 }

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;
@@ -59,7 +60,7 @@ a.box {
 
 
   &.is-active {
-    border: 2px solid getColor('alternate');
+    border: 2px solid getColor('main');
 
     > .box-header {
       border-radius: ($radius - 2px) ($radius - 2px) 0 0;
@@ -137,7 +138,7 @@ a.box {
 
   &.is-flat {
     box-shadow: none;
-    border: 1px solid getColor('grey-dark');
+    border: 1px solid getBGColor('font');
 
     &.has-hat > .is-hat {
       left: -1px;
@@ -235,25 +236,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 +243,7 @@ a.box {
 
   .box-footer {
     padding-top: $padding-box;
-    border-top: 1px solid getColor('grey-disabled');
+    border-top: 1px solid getBGColor('font');
     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%;
@@ -41,7 +35,7 @@ $is-check-button-icon-pos-left: 5px;
 
   background-color: white;
   border-width: $button-border-width;
-  border-radius: 4px;
+  border-radius: $radius-small;
   cursor: pointer;
   justify-content: center;
   text-align: center;
@@ -53,140 +47,46 @@ $is-check-button-icon-pos-left: 5px;
   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;
-
-      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);
-    }
+  #{$hoverSelector} {
+    filter: brightness(0.8)
   }
 
-  %disabled {
-    background-color: getColor('bg-disabled');
-    color: getColor('disabled');
-    box-shadow: $button-disabled-shadow;
-    opacity: $button-disabled-opacity;
-
-    &:hover {
-      color: getColor('disabled');
-    }
+  &:active {
+    filter: brightness(0.7)
   }
 
-
-  &.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);
+  @each $name, $pair in $btn-colors {
+    $variantName: nth($pair, 1);
+    $colorBG: getColor(#{nth($pair, 2)});
+    $colorText: getColor(nth($pair, 3));
+    $effectHover: nth($pair, 4);
+    $effectActive: nth($pair, 5);
+
+    &.is-#{$variantName} {
+      background-color: $colorBG;
+      color: $colorText;
+
+      @if $effectHover {
+        #{$hoverSelector} {
+          filter: $effectHover;
+        }
+      }
+      @if $effectActive {
+        &:active {
+          filter: $effectActive;
+        }
+      }
     }
   }
 
-  &.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);
-    }
+  &:focus-visible {
+    outline: 2px solid getColor('main');
+    outline-offset: 2px;
   }
 
-  &.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: $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;
     }
+  }
 }

package/framework/src/elements/_chips.scss

@@ -1,100 +1,95 @@
 $chip-radius: 30px !default;
 
 .chips-list {
-    align-items: center;
-    display: inline-flex;
-    justify-content: flex-start;
-    margin-bottom: 16px;
-    flex-wrap: wrap;
+  align-items: center;
+  display: inline-flex;
+  justify-content: flex-start;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
 
-    // multi-chips : ajout d'une marge bottom, supprimable par facette
-    &:not(.is-gapless) {
-        &:not(:last-child) {
-            margin-right: 8px;
-        }
-
-        .chips {
-            margin-bottom: 10px;
-        }
+  // multi-chips : ajout d'une marge bottom, supprimable par facette
+  &:not(.is-gapless) {
+    &:not(:last-child) {
+      margin-right: 8px;
     }
 
-    // multi-chips : ajout d'une marge à droite de chaque chip
-    .chips:not(:last-child) {
-        margin-right: 8px;
+    .chips {
+      margin-bottom: 10px;
     }
+  }
 
-    // centrage des chips
-    &.is-centered {
-        justify-content: center;
-    }
+  // multi-chips : ajout d'une marge à droite de chaque chip
+  .chips:not(:last-child) {
+    margin-right: 8px;
+  }
 
-    &.is-multiple {
-        .chips.is-active:before {
-            content: "";
-            mask-image: url('./assets/icons/all/check.svg');
-            background-color: getColor('background');
-            margin-right: 4px;
-            margin-left: -8px;
-            width: 20px;
-            height: 20px;
-            mask-size: 20px;
-        }
+  // centrage des chips
+  &.is-centered {
+    justify-content: center;
+  }
+
+  &.is-multiple {
+    .chips.is-active:before {
+      content: "";
+      mask-image: url('./assets/icons/all/check.svg');
+      background-color: currentColor;
+      margin-right: 4px;
+      margin-left: -8px;
+      width: 20px;
+      height: 20px;
+      mask-size: 20px;
     }
+  }
 
-    .chips {
-        align-items: center;
-        background-color: getColor('grey-lighter');
-        border-radius: $chip-radius;
-        color: getColor('font');
-        display: inline-flex;
-        font-weight: 400;
-        font-size: $size-normal;
-        height: 32px;
-        justify-content: center;
-        line-height: 2;
-        padding: 6px $spacing-4;
-        white-space: nowrap;
-        cursor: pointer;
-        border: 1px solid getColor('grey-light');
+  .chips {
+    align-items: center;
+    background-color: white;
+    border-radius: $chip-radius;
+    color: getColor('font');
+    display: inline-flex;
+    font-weight: 400;
+    font-size: $size-normal;
+    height: 32px;
+    justify-content: center;
+    line-height: 2;
+    padding: 6px $spacing-4;
+    white-space: nowrap;
+    cursor: pointer;
+    border: 1px solid getBGColor('font');
 
-        &:not(.is-disabled) {
-            &:hover {
-                background-color: getColor('grey-light');
-                border: 2px solid currentColor;
-                color: getColor('alternate');
-                padding: 5px 15px;
-            }
+    &:not(.is-disabled) {
 
-            &:focus,
-            &:focus-visible,
-            &.is-active {
-                background-color: getColor('alternate');
-                color: white;
-                font-weight: 600;
-                border: 2px solid getColor('alternate');
-                padding: 5px 15px;
-            }
-        }
+      &.is-active {
+        background-color: getColor('main');
+        color: white;
+        font-weight: 600;
+        border: 2px solid getColor('main');
+        padding: 5px 15px;
 
-        &.is-disabled {
-            background-color: getColor('grey-disabled');
-            color: getColor('grey-darker');
-            cursor: no-drop;
-            border: 1px solid getColor('grey-disabled');
+        #{$hoverSelector} {
+          background-color: getColor('main');
+          color: white;
         }
+      }
 
-        &.is-inverted {
-            background-color: white;
-            color: getColor('alternate');
+      #{$hoverSelector} {
+        background-color: var(--color-bg-hovered);
 
-            &:active,
-            &:hover,
-            &:focus,
-            &:focus-visible,
-            &.is-active {
-                background-color: getColor('alternate') !important;
-                color: getColor('background') !important;
-            }
-        }
+      }
+    }
+
+    &.is-inverted {
+      background-color: white;
+      color: getColor('alternate');
+
+      &:active,
+      &:hover,
+      &:focus,
+      &:focus-visible,
+      &.is-active {
+        background-color: getColor('alternate') !important;
+        color: getColor('background') !important;
+      }
     }
+  }
 }