@trilogy-ds/styles 0.0.1-beta.20 → 0.0.1-beta.21

package/framework/src/base/_generic.scss

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

package/framework/src/base/_reset.scss

@@ -41,10 +41,15 @@
         margin-bottom: 10px;
     }
 
-    a {
-        cursor: pointer;
-        text-decoration: none;
+  a {
+    color: getColor('font');
+    cursor: pointer;
+    text-decoration: none;
+
+    strong {
+      color: currentColor;
     }
+  }
 
     // List
     ul {

package/framework/src/elements/_button.scss

@@ -1,6 +1,3 @@
-@import "../theming/buttons/mixins";
-@import "../theming/buttons/variables";
-
 $button-border-width: 2px !default;
 
 .buttons {
@@ -35,8 +32,7 @@ $button-border-width: 2px !default;
 .button {
   @include control;
   @include unselectable;
-  @include buttons-states;
-
+  @extend %buttons-states;
 
   background-color: white;
   border-width: $button-border-width;

package/framework/src/elements/_link.scss

@@ -1,6 +1,3 @@
-@import '../theming/links/variables';
-@import '../theming/links/mixins';
-
 .link {
   [disabled] {
     @include disabledRulesWithoutBG;
@@ -8,13 +5,14 @@
 }
 
 .link:not([disabled]) {
-  @include link-states;
+  @extend %link-states;
 
   position: relative;
   font-weight: $weight-normal;
   color: getColor($link-colors);
   box-decoration-break: clone;
-  text-decoration: underline;
+  text-decoration: underline 1px solid;
+  text-underline-offset: 4px;
   cursor: pointer;
 
   &.has-icon {

package/framework/src/theming/_all.scss

@@ -0,0 +1,2 @@
+@import "links_partial";
+@import "buttons_partial";

package/framework/src/theming/{buttons/_variables.scss → buttons_partial.scss}

@@ -10,3 +10,21 @@ $button-colors: (
   'secondary': ['secondary', 'bg-main', 'main'],
   'ghost': ['ghost', 'background', 'main'],
 ) !default;
+
+%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/{links/_mixins.scss → links_partial.scss}

@@ -1,7 +1,13 @@
-@mixin link-states {
+$link-colors: 'info' !default;
+
+%link-over {
   &:hover {
     filter: brightness(0.8);
   }
+}
+
+%link-states {
+  @extend %link-over;
   &:active {
     filter: brightness(0.9);
   }

package/framework/src/utilities/_all.scss

@@ -3,6 +3,8 @@
 @import "initial-variables";
 @import "functions";
 @import "derived-variables";
+@import '../theming/links_partial';
+@import '../theming/buttons_partial';
 @import "mixins";
 @import "controls";
 @import "background";

package/framework/src/utilities/_mixins.scss

@@ -293,64 +293,6 @@
   }
 }
 
-@mixin hamburger($hamburger-dimensions) {
-  cursor: pointer;
-  display: block;
-  height: $hamburger-dimensions;
-  position: relative;
-  width: $hamburger-dimensions;
-
-  span {
-    background-color: currentColor;
-    display: block;
-    height: 1px;
-    left: 50%;
-    margin-left: -7px;
-    position: absolute;
-    top: 50%;
-    transition: none $speed $easing;
-    transition-property: background, left, opacity, transform;
-    width: 15px;
-
-    &:nth-child(1) {
-      margin-top: -6px;
-    }
-
-    &:nth-child(2) {
-      margin-top: -1px;
-    }
-
-    &:nth-child(3) {
-      margin-top: 4px;
-    }
-  }
-
-  &:hover {
-    background-color: rgba(black, 0.05);
-  }
-
-  // Modifers
-  &.is-active {
-    span {
-      &:nth-child(1) {
-        margin-left: -5px;
-        transform: rotate(45deg);
-        transform-origin: left top;
-      }
-
-      &:nth-child(2) {
-        opacity: 0;
-      }
-
-      &:nth-child(3) {
-        margin-left: -5px;
-        transform: rotate(-45deg);
-        transform-origin: left bottom;
-      }
-    }
-  }
-}
-
 @mixin ellipsis() {
   white-space: nowrap;
   overflow-x: hidden;

package/framework/src/utilities/_post.scss

@@ -2,7 +2,5 @@
 // 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,6 +2,5 @@
 /* Variables can be redefined*/
 
 @import 'initial-variables';
-@import '../theming/links/variables';
-@import '../theming/buttons/variables';
+@import '../theming/_all';
 @import 'derived-variables';

package/package.json

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

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

@@ -1,17 +0,0 @@
-@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/links/_variables.scss

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