@trilogy-ds/styles 0.0.1-beta.13 → 0.0.1-beta.16

package/framework/src/base/_helpers.scss

@@ -207,6 +207,12 @@ $alignments: (
     .has-text-#{$brandName}-invert {
       color: $color-invert !important;
     }
+    .has-background-#{$brandName} {
+      background-color: getColor($name) !important;
+    }
+    .has-background-#{$brandName}-fade {
+      background-color: getBGColor($name) !important;
+    }
   }
 }
 

package/framework/src/components/_modal.scss

@@ -65,11 +65,6 @@ body:has(.modal.is-active) {
     position: static;
   }
 
-  // ancien overlay : n'a plus d'utilité mais conservée pour rétrocompatibilité
-  .modal-background {
-    display: none;
-  }
-
   .modal-content {
     background-color: getColor('background');
     border-radius: $radius $radius 0 0;
@@ -85,8 +80,8 @@ body:has(.modal.is-active) {
     transition: transform ease-in-out 250ms;
     transform: translateY(100%);
 
-    &.is-fullwidth {
-      width: 100% !important;
+    &:has(.modal-footer) {
+      padding-bottom: 0;
     }
 
     @include tablet {
@@ -115,10 +110,10 @@ body:has(.modal.is-active) {
 
     .modal-footer {
       position: sticky;
+      width: 100%;
       background: getColor('background');
-      bottom: -30px;
-      margin: 30px -30px -30px;
-      padding: 20px 30px;
+      bottom: 0;
+      padding: 16px;
     }
 
     // If Close Icon Modal & Title Modal are sibling elements, override margin

package/framework/src/elements/_box.scss

@@ -18,10 +18,9 @@ a.box {
 }
 
 .box {
-  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   background-color: getColor('background');
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   border-radius: $radius;
-  color: getColor('font');
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -36,29 +35,6 @@ 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('main');
 
@@ -199,8 +175,6 @@ a.box {
   }
 
   .box-content {
-    background-color: getColor('background');
-    color: getColor('font');
     margin: -$padding-box;
     padding: $padding-box;
 

package/framework/src/elements/_button.scss

@@ -53,11 +53,11 @@ $button-border-width: 2px !default;
   }
 
   #{$hoverSelector} {
-    filter: brightness(0.8)
+    filter: brightness(0.9)
   }
 
   &:active {
-    filter: brightness(0.7)
+    filter: brightness(0.8)
   }
 
   @each $name, $pair in $btn-colors {

package/framework/src/elements/_title.scss

@@ -7,13 +7,13 @@ $title-strong-weight: inherit;
 $title-sub-size: 0.5em;
 $title-sup-size: 0.5em;
 
-$subtitle-size: $text-15;
-$subtitle-weight: $weight-semibold;
+$subtitle-size: $text-16;
+$subtitle-weight: $weight-medium;
 $subtitle-size-tablet: $text-15;
 $subtitle-line-height: 1.2;
 $subtitle-strong-weight: $weight-semibold;
 
-$overline-size: $text-15;
+$overline-size: $text-14;
 $overline-weight: $weight-semibold;
 $overline-line-height: 1.2;
 $overline-size-tablet: $text-15;

package/framework/src/grid/_columns.scss

@@ -781,7 +781,7 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: getColor('disabled');
+      background-color: getBGColor('font');
       border-radius: $radius;
       margin: 0 8px;
     }

package/framework/src/layout/_hero.scss

@@ -169,18 +169,4 @@ $overlap-desktop: 30px;
   &.is-centered {
     text-align: center;
   }
-
-  &.is-main {
-    color: invertColor('main');
-    background-color: getColor('main');
-  }
-
-  &.is-info {
-    background: getColor('info');
-    color: invertColor('info');
-  }
-
-  .subtitle {
-    padding-left: 0.2em;
-  }
 }

package/framework/src/utilities/_all.scss

@@ -5,5 +5,6 @@
 @import "derived-variables";
 @import "mixins";
 @import "controls";
+@import "background";
 @import "animations";
 @import "spacing";

package/framework/src/utilities/_background.scss

@@ -0,0 +1,20 @@
+.is-inverted {
+  color: getColor('background');
+}
+
+.is-inverted .is-base {
+  color: getColor('font');
+}
+
+.has-background {
+  background-repeat: no-repeat;
+  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
+
+  &.is-inverted {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .box-content {
+    background-color: transparent;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.1-beta.13",
+  "version": "0.0.1-beta.16",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [