@trilogy-ds/styles 0.0.1-beta.17 → 0.0.1-beta.18

package/framework/src/base/_generic.scss

@@ -64,6 +64,9 @@ $body-line-height: 1.5 !default;
     overflow-x: hidden;
     overflow-y: scroll;
     min-height: 100vh;
+  a {
+    @extend .link;
+  }
 }
 
 .header {

package/framework/src/components/_accordion.scss

@@ -4,7 +4,6 @@
   margin: $spacing-4 0;
 
   .accordion {
-    @include hover();
 
     box-sizing: border-box;
     display: flex;
@@ -23,6 +22,14 @@
       padding-top: 0 !important;
     }
 
+    &:hover:not(.is-disabled) {
+      @include hoverRules();
+    }
+
+    &:focus:not(.is-disabled), &:focus-visible:not(.is-disabled) {
+      border: 1px solid currentColor;
+    }
+
     &:focus-visible {
       outline: 2px solid getColor('main');
       outline-offset: 2px;

package/framework/src/components/_fab.scss

@@ -3,25 +3,27 @@
   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;
+  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;
 
   #{$hoverSelector}, &.is-extended, &:focus, &:focus-visible, &:focus-within {
     background-color: getColor('hovered');
-    transition: 0.5s;
-    font-size: initial;
+    transition-duration: 0.5s;
+    letter-spacing: initial;
+    color: white;
 
     .icon,
     .icon .is-small,
@@ -41,5 +43,4 @@
     margin-right: -6px;
     color: white;
   }
-
 }

package/framework/src/components/_range.scss

@@ -1,84 +1,85 @@
 .range-container {
-    @mixin appearence {
-        appearance: none;
-        height: 5px;
-    }
+  @mixin appearence {
+    appearance: none;
+    height: 5px;
+  }
 
-    @mixin slider-thumb {
-        appearance: none;
-        width: 20px;
-        height: 20px;
-        background-color: white;
-        pointer-events: auto;
-        border-radius: 50%;
-        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
-        outline: none;
-        border: none;
-    }
-    .range {
-        width: 100%;
-        position: relative;
-        margin-top: 18px;
-        margin-bottom: 20px;
+  @mixin slider-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background-color: white;
+    pointer-events: auto;
+    border-radius: 50%;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
+    outline: none;
+    border: none;
+  }
+
+  .range {
+    width: 100%;
+    position: relative;
+    margin-top: 18px;
+    margin-bottom: 20px;
 
-        .range-track {
-            width: 100%;
-            height: 8px;
-            border-radius: 8px;
-            position: absolute;
-            margin: auto;
-            top: 0;
-            bottom: 0;
-            color: getColor('alternate');
-            @include mobile {
-                height: 4px;
-                border-radius: 4px;
-            }
-        }
+    .range-track {
+      width: 100%;
+      height: 8px;
+      border-radius: 8px;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      bottom: 0;
+      @include mobile {
+        height: 4px;
+        border-radius: 4px;
+      }
+    }
 
-        .range-cursor {
-            appearance: none;
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            width: 100%;
-            outline: none;
-            position: absolute;
-            margin: auto;
-            top: 0;
-            bottom: 0;
-            background-color: transparent;
-            pointer-events: none;
+    .range-cursor {
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      width: 100%;
+      outline: none;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      bottom: 0;
+      background-color: transparent;
+      pointer-events: none;
 
-            &::-webkit-slider-runnable-track {
-                @include appearence;
-            }
+      &::-webkit-slider-runnable-track {
+        @include appearence;
+      }
 
-            &::-moz-range-track {
-                @include appearence;
-            }
+      &::-moz-range-track {
+        @include appearence;
+      }
 
-            &::-ms-track {
-                @include appearence;
-            }
+      &::-ms-track {
+        @include appearence;
+      }
 
-            &::-webkit-slider-thumb {
-                @include slider-thumb;
-                margin-top: -8px;
-            }
+      &::-webkit-slider-thumb {
+        @include slider-thumb;
+        margin-top: -8px;
+      }
 
-            &::-moz-range-thumb {
-                @include slider-thumb;
-            }
+      &::-moz-range-thumb {
+        @include slider-thumb;
+      }
 
-            &::-ms-thumb {
-                @include slider-thumb;
-            }
-        }
-    }
-    .range-values {
-        display: flex;
-        justify-content: space-between;
-        padding-top: 14px;
-        font-weight: bold;
+      &::-ms-thumb {
+        @include slider-thumb;
+      }
     }
+  }
+
+  .range-values {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 14px;
+    font-weight: bold;
+  }
 }

package/framework/src/components/_segmented-control.scss

@@ -34,7 +34,7 @@
       overflow: hidden;
     }
 
-    #{$hoverSelector} {
+    &:hover:not([disabled], [aria-disabled=true], .is-active) {
       cursor: pointer;
       @include hoverRules()
     }

package/framework/src/components/_tabs.scss

@@ -105,7 +105,7 @@
       padding: 6px 14px;
       font-size: $text-14;
       border: 0px solid transparent;
-      border-bottom: 2px solid getBGColor('font');
+      border-bottom: 2px solid transparent;
 
       .tab-icon {
         margin-top: 2px;

package/framework/src/elements/_button.scss

@@ -1,3 +1,6 @@
+@import "../theming/buttons/mixins";
+@import "../theming/buttons/variables";
+
 $button-border-width: 2px !default;
 
 .buttons {
@@ -32,6 +35,8 @@ $button-border-width: 2px !default;
 .button {
   @include control;
   @include unselectable;
+  @include buttons-states;
+
 
   background-color: white;
   border-width: $button-border-width;
@@ -41,9 +46,7 @@ $button-border-width: 2px !default;
   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;
 
@@ -52,41 +55,15 @@ $button-border-width: 2px !default;
     margin: 8px 0 !important;
   }
 
-  #{$hoverSelector} {
-    filter: brightness(0.9)
-  }
-
-  &:active {
-    filter: brightness(0.8)
-  }
-
-  @each $name, $pair in $btn-colors {
+  @each $name, $pair in $button-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;
-        }
-      }
     }
   }
 
-  &:focus-visible {
-    outline: 2px solid getColor('main');
-    outline-offset: 2px;
-  }
-
 }

package/framework/src/elements/_form.scss

@@ -254,6 +254,7 @@ $label-weight: $weight-bold;
       left: 0;
       border-top-left-radius: $radius;
       border-bottom-left-radius: $radius;
+      padding: 0 24px;
     }
 
     .textarea {
@@ -296,6 +297,7 @@ $label-weight: $weight-bold;
       right: 0;
       border-top-right-radius: $radius;
       border-bottom-right-radius: $radius;
+      padding: 0 24px;
     }
   }
 

package/framework/src/elements/_link.scss

@@ -1,22 +1,22 @@
+@import '../theming/links/variables';
+@import '../theming/links/mixins';
+
+.link {
+  [disabled] {
+    @include disabledRulesWithoutBG;
+  }
+}
+
 .link:not([disabled]) {
+  @include link-states;
+
   position: relative;
   font-weight: $weight-normal;
-  color: getColor('font');
+  color: getColor($link-colors);
   box-decoration-break: clone;
   text-decoration: underline;
   cursor: pointer;
 
-  &:hover {
-    font-weight: $weight-semibold;
-  }
-
-  &:focus-visible,
-  &:focus:focus-visible {
-    outline: 2px solid getColor('font');
-    border-radius: $radius-small;
-    padding: 4px;
-  }
-
   &.has-icon {
     display: inline-flex;
     align-items: center;
@@ -44,21 +44,9 @@
   }
 }
 
-.text .link {
+.text .link:not([disabled]) {
   &:hover {
     font-weight: $weight-normal;
     filter: brightness(0.8);
   }
 }
-
-@keyframes sliding-link {
-  50% {
-    left: 100%;
-    right: 0;
-  }
-
-  50.01% {
-    left: 0;
-    right: 100%;
-  }
-}

package/framework/src/elements/_sticker.scss

@@ -23,10 +23,6 @@ $sticker-radius: $radius-large;
       height: auto;
       line-height: 15px;
 
-      &.is-flag {
-        border-radius: 0 $sticker-radius 0 0;
-      }
-
     }
   }
 
@@ -40,10 +36,6 @@ $sticker-radius: $radius-large;
     color: getColor('background') !important;
   }
 
-  &.is-flag {
-    border-radius: 0 16px 0 0;
-  }
-
   &.is-inverted {
     background-color: white !important;
     border-style: solid;
@@ -59,9 +51,6 @@ $sticker-radius: $radius-large;
     height: auto;
     line-height: 15px;
 
-    &.is-flag {
-      border-radius: 0 $sticker-radius 0 0;
-    }
   }
 
   // deprecated

package/framework/src/layout/_all.scss

@@ -3,4 +3,3 @@
 @import "main";
 @import "section";
 @import "hero";
-@import "toolbar";

package/framework/src/theming/buttons/_mixins.scss

@@ -0,0 +1,17 @@
+@mixin buttons-states {
+  #{$hoverSelector} {
+    filter: brightness(0.8);
+    &.is-primary {
+      filter: brightness(1.2);
+    }
+  }
+  &:active {
+    filter: brightness(0.7);
+  }
+
+  &:focus-visible,
+  &:focus:focus-visible {
+    outline: 2px solid getColor('main');
+    outline-offset: 2px;
+  }
+}

package/framework/src/theming/buttons/_variables.scss

@@ -0,0 +1,12 @@
+/*
+Colors for buttons
+  @string slug name used in classname (You can use your brand name)
+  @color-background The name of the color in the color map for the background
+  @color-text The name of the color in the color map for the text
+  */
+$button-colors: (
+  'accent':['conversion', 'alternate', 'background'],
+  'primary': ['primary', 'main', 'background'],
+  'secondary': ['secondary', 'bg-main', 'main'],
+  'ghost': ['ghost', 'background', 'main'],
+) !default;

package/framework/src/theming/links/_mixins.scss

@@ -0,0 +1,14 @@
+@mixin link-states {
+  &:hover {
+    filter: brightness(0.8);
+  }
+  &:active {
+    filter: brightness(0.9);
+  }
+  &:focus-visible,
+  &:focus:focus-visible {
+    outline: 2px solid currentColor;
+    border-radius: $radius-small;
+    padding: 0 4px;
+  }
+}

package/framework/src/theming/links/_variables.scss

@@ -0,0 +1 @@
+$link-colors: 'info';

package/framework/src/utilities/_background.scss

@@ -8,12 +8,7 @@
 
 .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/framework/src/utilities/_controls.scss

@@ -6,7 +6,7 @@ $control-border-width: 1px !default;
 $control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
 $control-padding-horizontal: 20px;
 
-%control {
+@mixin control {
   -moz-appearance: none;
   -webkit-appearance: none;
   align-items: center;
@@ -14,9 +14,9 @@ $control-padding-horizontal: 20px;
   border-radius: $control-radius-small;
   display: inline-flex;
   font-size: $size-normal;
-  height: 2.25em;
+  height: 46px;
   justify-content: flex-start;
-  line-height: 1.5;
+  line-height: 1.4;
   padding-bottom: $control-padding-vertical;
   padding-left: $control-padding-horizontal;
   padding-right: $control-padding-horizontal;
@@ -42,13 +42,7 @@ $control-padding-horizontal: 20px;
   &[disabled] {
     cursor: not-allowed;
   }
-}
 
-@mixin control {
-  @extend %control;
-
-  height: 46px;
-  line-height: 1.4;
 }
 
 @mixin control-small {

package/framework/src/utilities/_initial-variables.scss

@@ -29,24 +29,7 @@ $colors: (
   'neutral-dark':['grey-dark', #646464, 'white', #E9E9E9 ]
 ) !default;
 
-/*
-Colors for buttons
-  @string slug name used in classname (You can use your brand name)
-  @color-background The name of the color in the color map for the background
-  @color-text The name of the color in the color map for the text
-  @effect-hover A valid css filter value or null (brightness(0.8) by default)
-  @effect-active A valid css filter value or null (brightness(0.7) by default)
-  */
-$btn-colors: (
-  'accent':['accent', 'alternate', 'background', null, null],
-  'primary': ['primary', 'main', 'background', brightness(0.8), brightness(0.7)],
-  'secondary': ['secondary', 'bg-main', 'main', brightness(0.8), brightness(0.7)],
-  'ghost': ['ghost', 'background', 'main', brightness(0.8), brightness(0.7)],
-) !default;
-
-
-$hoverSelector: "&:hover:not([disabled]),&:hover:not([aria-disabled=true])";
-
+$hoverSelector: "&:hover:not([disabled]):not([aria-disabled=true])";
 
 // Typography OS-regular
 $family-sans-serif: 'Poppins Read', BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
@@ -96,7 +79,7 @@ $text-64: 64px !default;
 $text-80: 80px !default;
 
 
-$size-1: $text-32;
+$size-1: 32px;
 $size-2: $text-28;
 $size-3: $text-24;
 $size-4: $text-20;

package/framework/src/utilities/_mixins.scss

@@ -489,6 +489,7 @@
     display: flex;
     align-items: center;
     margin: 6px 8px;
+    width: fit-content;
 
     input:disabled,
     input:disabled:checked {
@@ -666,8 +667,7 @@
     @include hoverRules();
   }
   &:focus:not(.is-disabled), &:focus-visible:not(.is-disabled) {
-    @include hoverRules();
-    border: 1px solid currentColor;
+    border: 2px solid currentColor;
   }
 }
 

package/framework/src/utilities/_post.scss

@@ -2,5 +2,7 @@
 // Mixins can not be redefined
 
 @import 'mixins';
+@import '../theming/links/mixins';
+@import '../theming/buttons/mixins';
 @import 'animations';
 @import 'controls';

package/framework/src/utilities/_pre.scss

@@ -2,4 +2,6 @@
 /* Variables can be redefined*/
 
 @import 'initial-variables';
+@import '../theming/links/variables';
+@import '../theming/buttons/variables';
 @import 'derived-variables';

package/package.json

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