@trilogy-ds/styles 0.0.1-beta.9 → 0.0.3-beta-v4

package/framework/src/elements/_box.scss

@@ -1,15 +1,21 @@
 @use 'sass:math';
 @import "../utilities/spacing";
 
-$space-between-tiles: 5px;
-$padding-box: $spacing-5;
-$padding-box-mobile: $spacing-4;
+:root {
+  --padding-box: #{$spacing-5};
+  @include mobile {
+    --padding-box: #{$spacing-4};
+  }
+}
+
+$highlighted-border-width: 4px;
+
 
 a.box {
   cursor: pointer;
   transition: box-shadow $animation-duration;
 
-  &:hover,
+  #{$hoverSelector},
   &:active,
   &:focus {
     box-shadow: $focus-shadow;
@@ -17,99 +23,31 @@ 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);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   position: relative;
-  padding: 24px;
-
-  @include mobile {
-    padding: 16px;
-  }
+  padding: var(--padding-box);
 
   &:not(:last-child) {
     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;
-        }
-
-      }
+    outline: var(--border-active);
+  }
 
-      &:last-child {
-        border-radius: 0 0 ($radius - 2px) ($radius - 2px);
-        padding-bottom: 22px;
-        @include mobile {
-          padding-bottom: 14px;
-        }
-      }
+  &.is-offset-header {
+    @include tablet {
+      margin-top: 40px;
 
-      &:only-child {
-        border-radius: ($radius - 2px);
-        padding: 22px;
-        @include mobile {
-          padding: 14px;
-        }
+      &.is-fullheight {
+        height: calc(100% - 40px);
       }
     }
-
-    > .box-footer {
-      margin: 12.5px 5.5px 5.5px;
-    }
   }
 
   &.is-fullheight {
@@ -118,36 +56,33 @@ a.box {
     }
   }
 
-  &.is-highlighted {
-    .box-content {
-      padding-left: 23px;
-      border-left: 8px solid transparent;
+  &.is-flat {
+    box-shadow: none;
+    border: var(--border);
+
+    .box-header {
+      margin-top: calc(var(--padding-box) * -1 - 1px);
+      margin-left: calc(var(--padding-box) * -1 - 1px);
+      margin-right: calc(var(--padding-box) * -1 - 1px);
     }
+  }
 
-    @each $name, $pair in $colors-brand-funcionnal {
+  &.is-highlighted {
+    border-left: $highlighted-border-width solid transparent;
+    border-top-left-radius: calc(var(--radius) + $highlighted-border-width);
+    border-bottom-left-radius: calc(var(--radius) + $highlighted-border-width);
+    @each $name, $pair in $colors-brand-functionnal {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 
-      &.is-#{$brandName} .box-content {
+      &.is-#{$brandName} {
         border-left-color: $color;
-        border-left-width: 4px;
+        border-left-width: $highlighted-border-width;
       }
     }
-  }
-
-  &.is-flat {
-    box-shadow: none;
-    border: 1px solid getColor('grey-dark');
-
-    &.has-hat > .is-hat {
-      left: -1px;
-      right: -1px;
-    }
 
     .box-header {
-      margin-top: calc(-#{$padding-box} - 1px);
-      margin-left: calc(-#{$padding-box} - 1px);
-      margin-right: calc(-#{$padding-box} - 1px);
+      margin-left: calc(var(--padding-box) * -1 - $highlighted-border-width);
     }
   }
 
@@ -155,25 +90,21 @@ a.box {
     z-index: inherit;
     background-color: getColor('font');
     color: getColor('background');
-    margin-top: -$padding-box;
-    margin-left: -$padding-box;
-    margin-right: -$padding-box;
+    margin-top: calc(var(--padding-box) * -1);
+    margin-left: calc(var(--padding-box) * -1);
+    margin-right: calc(var(--padding-box) * -1);
     padding: 8px;
-    padding-left: 24px;
+    padding-left: var(--padding-box);
+    padding-right: var(--padding-box);
     box-shadow: none;
-    border-radius: $radius $radius 0 0;
     font-size: 15px;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
     font-weight: $weight-semibold;
-
-    @include mobile {
-      margin-top: -16px;
-      margin-left: -16px;
-      margin-right: -16px;
-    }
+    border-radius: var(--radius) var(--radius) 0 0;
+    height: 40px;
 
     @include tablet {
       flex-direction: row;
@@ -193,65 +124,33 @@ 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;
-
-    @include mobile {
-      margin: -$padding-box-mobile;
-      padding: $padding-box-mobile;
-    }
-
-    @include mobile {
-      text-align: left;
-    }
+    margin-left: calc(var(--padding-box) * -1);
+    margin-right: calc(var(--padding-box) * -1);
+    padding: var(--padding-box);
 
     &:first-child {
-      border-radius: $radius $radius 0 0;
+      margin-top: calc(var(--padding-box) * -1);
+      border-top-left-radius: var(--radius);
+      border-top-right-radius: var(--radius);
     }
 
     &:last-child {
-      border-radius: 0 0 $radius $radius;
+      margin-bottom: calc(var(--padding-box) * -1);
+      border-bottom-left-radius: var(--radius);
+      border-bottom-right-radius: var(--radius);
     }
 
-    &:only-child {
-      border-radius: $radius;
+    @include mobile {
+      text-align: left;
     }
 
     > .is-unboxed {
-      margin-left: -$padding-box;
-      margin-right: -$padding-box;
-      width: auto;
-
-      @include desktop {
-        margin-left: -$padding-box;
-        margin-right: -$padding-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;
-      }
+      margin-left: calc(var(--padding-box) * -1);
+      margin-right: calc(var(--padding-box) * -1);
     }
 
     &.is-transparent {
@@ -260,8 +159,12 @@ a.box {
   }
 
   .box-footer {
-    padding-top: $padding-box;
-    border-top: 1px solid getColor('grey-disabled');
-    margin: 12.5px 7.5px 7.5px;
+    margin-left: calc(var(--padding-box) * -1);
+    margin-right: calc(var(--padding-box) * -1);
+    margin-bottom: calc(var(--padding-box) * -1);
+    padding: var(--padding-box);
+    border-top: 1px solid getColor('neutral-fade');
+    border-bottom-left-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
   }
 }

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%;
@@ -25,168 +19,48 @@ $is-check-button-icon-pos-left: 5px;
   .has-text-centered & {
     justify-content: center;
   }
-
-  &.is-mobile {
-    flex-wrap: wrap;
-
-    .button {
-      margin-bottom: 16px;
-    }
-  }
 }
 
 .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');
-      }
+    &.is-#{$variantName} {
+      background-color: $colorBG;
+      color: $colorText;
     }
   }
 
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $invColor: nth($pair, 3);
-
-    &.is-#{$color} {
-      background-color: getColor($name);
-      color: invertColor($name);
-    }
+  &[disabled],
+  &[aria-disabled=true] {
+    background-color: getColorValue('main-fade') !important;
+    color: getColorValue('disabled-fade') !important
   }
 
-  %disabled {
-    background-color: getColor('bg-disabled');
-    color: getColor('disabled');
-    box-shadow: $button-disabled-shadow;
-    opacity: $button-disabled-opacity;
-
-    &:hover {
-      color: getColor('disabled');
-    }
-  }
-
-
-  &.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,41 @@
 
 .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 ~ 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;
-        }
+  }
+}
+
+.checkbox {
+  input:not(:disabled):not(:checked) ~ label.checkbox-label:hover {
+    &:before {
+      @include hoverRules()
     }
+  }
 }
+