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

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: var(--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: var(--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/_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');
     }
 }

package/framework/src/components/_fab.scss

@@ -1,30 +1,29 @@
 .fab {
-  background-color: getColor('alternate');
-  border: 1px getColor('alternate');
+  background-color: getColor('font');
   border-radius: 16px;
   cursor: pointer;
   height: 56px;
-  color: white;
   padding: $spacing-4;
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
   transition: 0.4s;
-
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
-
+  color: transparent;
+  letter-spacing: -9px;
+  border: 0;
+  box-shadow: 0px 3px 6px 0px #00000033;
   font-style: normal;
   font-weight: 600;
-  font-size: 0;
+  font-size: medium;
   line-height: 20px;
 
   z-index: 9;
 
-  &:hover, &.is-extended {
-    background-color: getVariantColor('alternate',1);
-    border-color:getVariantColor('alternate',2);
-    transition: 0.5s;
-    font-size: initial;
+  #{$hoverSelector}, &.is-extended, &:focus, &:focus-visible, &:focus-within {
+    background-color: getColor('hovered');
+    transition-duration: 0.5s;
+    letter-spacing: initial;
+    color: white;
 
     .icon,
     .icon .is-small,
@@ -34,20 +33,8 @@
     }
   }
 
-  &:focus, &:focus-visible, &:focus-within {
-    background-color:getVariantColor('alternate', 4);
-    border-color: getVariantColor('alternate', 4);
-    outline: 1px auto getVariantColor('alternate', 4);
-  }
-
   &:active {
-    background-color: getVariantColor('alternate', 5);
-    border-color: getVariantColor('alternate', 5);
-  }
-
-  .disabled {
-    background-color: getColor('bg-disabled');
-    color: getColor('grey-disabled');
+    background-color: getColor('hovered');
   }
 
   .icon {
@@ -56,5 +43,4 @@
     margin-right: -6px;
     color: white;
   }
-
 }

package/framework/src/components/_level.scss

@@ -5,7 +5,7 @@
     justify-content: space-between;
 
     code {
-        border-radius: $radius;
+        border-radius: var(--radius);
     }
 
     img {

package/framework/src/components/_media.scss

@@ -8,7 +8,7 @@
     }
 
     .media {
-        border-top: 1px solid getColor('grey-lighter');
+        border-top: 1px solid getBGColor('neutral');
         display: flex;
         padding-top: 7.5px;
 
@@ -27,7 +27,7 @@
     }
 
     & + .media {
-        border-top: 1px solid getColor('grey-lighter');
+        border-top: 1px solid getBGColor('neutral');
         margin-top: 10px;
         padding-top: 10px;
     }

package/framework/src/components/_modal.scss

@@ -2,200 +2,201 @@ $modal-content-width: 640px !default;
 $modal-content-margin-mobile: 20px !default;
 $modal-close-dimensions: 40px !default;
 $modal-dimensions: (
-    'xsmall': 40vw,
-    'small': 50vw,
-    'medium': 60vw,
-    'large': 70vw,
-    'xlarge': 80vw
+  'xsmall': 40vw,
+  'small': 50vw,
+  'medium': 60vw,
+  'large': 70vw,
+  'xlarge': 80vw
 );
 
 body:has(.modal.is-active) {
-    height: 100%;
-    overflow: hidden
+  height: 100%;
+  overflow: hidden
 }
 
 .modal {
+  @include overlay;
+
+  position: fixed;
+  z-index: zindex('modal');
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 250ms ease-in-out,
+  visibility 0ms linear 250ms;
+
+  // overlay
+  &::after {
     @include overlay;
 
-    position: fixed;
-    z-index: zindex('modal');
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    visibility: hidden;
-    opacity: 0;
-    transition:
-        opacity 250ms ease-in-out,
-        visibility 0ms linear 250ms;
-
-    // overlay
-    &::after {
-        @include overlay;
+    content: '';
+    background-color: rgba(#000, 0.86);
+  }
+
+  &.is-active {
+    opacity: 1;
+    visibility: inherit;
+    transition: opacity 250ms ease-in-out,
+    visibility 0ms linear;
 
-        content: '';
-        background-color: rgba(#000, 0.86);
+    .modal-content {
+      transform: translateY(0);
     }
+  }
 
-    &.is-active {
-        opacity: 1;
-        visibility: inherit;
-        transition:
-            opacity 250ms ease-in-out,
-            visibility 0ms linear;
+  // gestion des tailles
+  @include tablet {
+    justify-content: center;
+    @each $dimension in $dimensions-extended {
+      &.is-#{$dimension} {
         .modal-content {
-            transform: translateY(0);
+          width: map-get($modal-dimensions, $dimension);
         }
+      }
+    }
+  }
+
+  // spécificité pour le bouton en position: relative par défaut
+  .button {
+    position: static;
+  }
+
+  .modal-content {
+    background-color: getColor('background');
+    border-radius: var(--radius) var(--radius) 0 0;
+    color: getColor('font');
+    overflow: auto;
+    position: relative;
+    padding: 0 30px 30px;
+    margin: 0 $modal-content-margin-mobile;
+    max-height: calc(100vh - 40px);
+    text-align: center;
+    width: 100%;
+    z-index: zindex('tiny');
+    transition: transform ease-in-out 250ms;
+    transform: translateY(100%);
+
+    &:has(.modal-footer) {
+      padding-bottom: 0;
     }
 
-    // gestion des tailles
     @include tablet {
-        justify-content: center;
-        @each $dimension in $dimensions-extended {
-            &.is-#{$dimension} {
-                .modal-content {
-                    width: map-get($modal-dimensions, $dimension);
-                }
-            }
-        }
+      max-height: calc(100vh - 120px);
+      width: $modal-content-width;
+      border-radius: $radius;
     }
 
-    // spécificité pour le bouton en position: relative par défaut
-    .button {
-        position: static;
+    // Annulation des propriétés du composant box, se trouvant dans une modal
+    > .box {
+      background-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+      padding: 0;
+      max-height: inherit;
+
+      .box-content {
+        background-color: transparent;
+        border-radius: 0;
+        padding: 0;
+        padding-bottom: 30px;
+        margin: 0;
+        text-align: inherit;
+      }
     }
 
-    // ancien overlay : n'a plus d'utilité mais conservée pour rétrocompatibilité
-    .modal-background {
-        display: none;
+    .modal-footer {
+      position: sticky;
+      width: 100%;
+      background: getColor('background');
+      bottom: 0;
+      padding: 16px;
     }
 
-    .modal-content {
-        background-color: getColor('background');
-        border-radius: $radius $radius 0 0;
-        color: getColor('font');
-        overflow: auto;
-        position: relative;
-        padding: 0 30px 30px;
-        margin: 0 $modal-content-margin-mobile;
-        max-height: calc(100vh - 40px);
-        text-align: center;
-        width: 100%;
-        z-index: zindex('tiny');
-        transition: transform ease-in-out 250ms;
-        transform: translateY(100%);
-
-        &.is-fullwidth {
-          width: 100% !important;
-        }
-
-        @include tablet {
-            max-height: calc(100vh - 120px);
-            width: $modal-content-width;
-            border-radius: $radius;
-        }
-
-        // Annulation des propriétés du composant box, se trouvant dans une modal
-        > .box {
-            background-color: transparent;
-            border-radius: 0;
-            box-shadow: none;
-            padding: 0;
-            max-height: inherit;
-
-            .box-content {
-                background-color: transparent;
-                border-radius: 0;
-                padding: 0;
-                padding-bottom: 30px;
-                margin: 0;
-                text-align: inherit;
-            }
-        }
-
-        .modal-footer {
-            position: sticky;
-            background: getColor('background');
-            bottom: -30px;
-            margin: 30px -30px -30px;
-            padding: 20px 30px;
-        }
-
-        // If Close Icon Modal & Title Modal are sibling elements, override margin
-        .modal-close ~ .modal-title   {
-          margin-top: -32px;
-        }
+    // If Close Icon Modal & Title Modal are sibling elements, override margin
+    .modal-close ~ .modal-title {
+      margin-top: -32px;
+    }
+  }
+
+  .modal-close {
+    @include delete;
+
+    background-color: getColor('background');
+    position: sticky;
+    top: 20px;
+    left: 100%;
+    display: block;
+    height: $modal-close-dimensions;
+    width: $modal-close-dimensions;
+    z-index: zindex('medium');
+
+    #{$hoverSelector} {
+      background-color: getBGColor('neutral');
     }
 
-    .modal-close {
-        @include delete;
-
-        background-color: getColor('background');
-        position: sticky;
-        top: 20px;
-        left: 100%;
-        display: block;
-        height: $modal-close-dimensions;
-        width: $modal-close-dimensions;
-        z-index: zindex('medium');
-
-        &:hover {
-            background-color: getColor('grey-light');
-        }
-
-        &::after,
-        &::before {
-            background-color: getColor('font');
-        }
+    &::after,
+    &::before {
+      background-color: getColor('font');
     }
+  }
+
+  .modal-title {
+    color: getColor('font');
+    font-family: $family-sans-serif;
+    font-size: $size-3;
+    font-weight: $weight-semibold;
+    line-height: 1.1;
+    background-color: getColor('background');
+    z-index: zindex('small');
+    position: sticky;
+    top: 0;
+    padding: 20px 0;
+    width: 100%;
+    word-wrap: break-word;
+
+    @include desktop {
+      font-size: $size-3-desktop;
+    }
+  }
 
-    .modal-title {
-        color: getColor('font');
-        font-family: $family-sans-serif;
-        font-size: $size-3;
-        font-weight: $weight-semibold;
-        line-height: 1.1;
-        background-color: getColor('background');
-        z-index: zindex('small');
-        position: sticky;
-        top: 0;
-        padding: 20px 0;
-        width: 100%;
-        word-wrap: break-word;
-
-        @include desktop {
-            font-size: $size-3-desktop;
-        }
+  // version "panel" de la modal
+  &.is-panel {
+    &::after {
+      position: fixed;
     }
 
-    // version "panel" de la modal
-    &.is-panel {
-        &::after {
-            position: fixed;
-        }
+    .modal-content {
+      border-radius: 0;
+      position: fixed;
+      right: 0;
+      top: 0;
+      min-height: 100%;
+      height: 100%;
+      max-height: none;
+      margin: 0;
+      text-align: left;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      transform: translateX(100%);
+
+      @include tablet {
+        max-width: 375px;
+      }
+
+      .modal-footer {
+        margin-top: auto;
+      }
+    }
 
-        .modal-content {
-            border-radius: 0;
-            position: fixed;
-            right: 0;
-            top: 0;
-            min-height: 100%;
-            height: 100%;
-            max-height: none;
-            margin: 0;
-            text-align: left;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-
-            @include tablet {
-                max-width: 375px;
-            }
-
-            .modal-footer {
-                margin-top: auto;
-            }
-        }
+    &.is-active {
+      .modal-content {
+        transform: translateX(0);
+      }
     }
+  }
 }

package/framework/src/components/_otp.scss

@@ -3,15 +3,17 @@
   flex-wrap: nowrap;
 
   .otp {
+    @include hover();
     outline: none;
     border: 1px solid currentColor;
-    border-radius: 4px;
+    border-radius: var(--radius-small);
     background: transparent;
     width: 33px;
     height: 40px;
     margin: 4px 4px 0 4px;
     text-align: center;
-    color: getColor('grey');
+    color: getColor('neutral');
+
     &:first-child {
       margin: 4px 4px 0 0;
     }
@@ -24,13 +26,7 @@
 
   &.is-danger {
     .otp {
-      border: 2px solid  getColor('error');
-    }
-  }
-
-  &.is-tertiary {
-    .otp {
-      border: 2px solid getColor('font');
+      border: 1px solid getColor('error');
     }
   }
 
@@ -42,7 +38,7 @@
 
   &.is-focus {
     .otp {
-      border: 2px solid getColor('alternate');;
+      border: 1px solid getColor('font');;
       color: getColor('font')
     }
   }
@@ -50,38 +46,23 @@
 
   &.is-error {
     .otp {
-      border: 2px solid getColor('error');
+      border: 1px solid getColor('error');
       color: getColor('font')
     }
   }
 
-  &.is-tertiary {
-    .otp {
-      border: 2px solid getColor('font');
-    }
-  }
-
-  &.is-disabled {
-    .otp {
-      border: none !important;
-      background: getColor('grey-disabled');
-      pointer-events: none;
-      color: getColor('grey');
-    }
-  }
-
 }
 
 .otp-list:focus-within {
   .otp {
-    border: 2px solid getColor('alternate');;
+    border: 1px solid getColor('font');;
     color: getColor('font');
   }
 }
 
 .otp-list.is-error:focus-within {
   .otp {
-    border: 2px solid getColor('error');
+    border: 1px solid getColor('error');
     color: getColor('font');
   }
 }