@trilogy-ds/styles 0.0.4-beta-v4 → 0.0.7-beta-v4

package/framework/src/components/_autolayout.scss

@@ -2,13 +2,19 @@ body:not(.is-tight) {
   .accordions:not(:last-child) {
     margin-bottom: 24px;
   }
+  .buttons:not(:last-child) {
+    margin-bottom: 24px;
+  }
   .card:not(:last-child) {
     margin-bottom: 24px;
   }
+  .columns:not(:last-child) {
+    margin-bottom: 24px;
+  }
   .box:not(:last-child) {
     margin-bottom: 24px;
   }
-  *:has(+.divider):not(:last-child) {
+  *:has(+ .divider):not(:last-child) {
     margin-bottom: 24px;
   }
   .divider:not(:last-child) {
@@ -44,7 +50,7 @@ body:not(.is-tight) {
   .price-container:not(:last-child) {
     margin-bottom: 12px;
   }
-  .button:not(:last-child) {
+  :not(.buttons) > .button:not(:last-child) {
     margin-bottom: 24px;
   }
   .countdown:not(:last-child) {
@@ -153,13 +159,19 @@ body:not(.is-tight) {
     .accordions:not(:last-child) {
       margin-bottom: 16px;
     }
+  .buttons:not(:last-child) {
+      margin-bottom: 16px;
+    }
   .card:not(:last-child) {
       margin-bottom: 16px;
     }
+  .columns:not(:last-child) {
+      margin-bottom: 16px;
+    }
   .box:not(:last-child) {
       margin-bottom: 16px;
     }
-  *:has(+.divider):not(:last-child) {
+  *:has(+ .divider):not(:last-child) {
       margin-bottom: 16px;
     }
   .divider:not(:last-child) {
@@ -195,7 +207,7 @@ body:not(.is-tight) {
   .price-container:not(:last-child) {
       margin-bottom: 8px;
     }
-  .button:not(:last-child) {
+  :not(.buttons) > .button:not(:last-child) {
       margin-bottom: 16px;
     }
   .countdown:not(:last-child) {

package/framework/src/elements/_badge.scss

@@ -61,7 +61,7 @@
 
   &.is-inverted {
     color: getColor('main') !important;
-    background: getColor('background');
+    background: getColor('background') !important;
   }
 }
 

package/framework/src/elements/_button.scss

@@ -53,6 +53,11 @@ $button-border-width: 2px !default;
     }
   }
 
+  &.is-ghost:hover {
+    background-color: var(--color-main-fade);
+    filter: none !important;
+  }
+
   &[disabled],
   &[aria-disabled=true] {
     background-color: getColorValue('main-fade') !important;

package/framework/src/elements/_switch.scss

@@ -8,8 +8,13 @@
   }
 
   input {
-    display: none;
+    opacity: 0;
+    position: absolute;
+    outline: none;
 
+    &:focus-visible ~ label:before{
+      outline: 2px solid;
+    }
     &:disabled ~ label,
     &:disabled:checked ~ label {
       cursor: not-allowed;

package/framework/src/grid/_columns.scss

@@ -272,6 +272,18 @@ $gap: 4px,
     &.is-narrow-tablet {
       flex: none;
     }
+
+    &.is-aligned-start {
+      align-self: start !important;
+    }
+
+    &.is-aligned-center {
+      align-self: center !important;
+    }
+
+    &.is-aligned-end {
+      align-self: end !important;
+    }
   }
 
   @include touch {
@@ -382,8 +394,22 @@ $gap: 4px,
       }
     }
 
-    .column.is-narrow {
-      flex: none;
+    .column {
+      &.is-narrow {
+        flex: none;
+      }
+
+      &.is-aligned-start {
+        align-self: start !important;
+      }
+
+      &.is-aligned-center {
+        align-self: center !important;
+      }
+
+      &.is-aligned-end {
+        align-self: end !important;
+      }
     }
   }
 

package/framework/src/theming/buttons_partial.scss

@@ -10,7 +10,7 @@ $button-colors: (
   'accent':['conversion', 'accent', 'background'],
   'primary': ['primary', 'main', 'background'],
   'secondary': ['secondary', 'main-fade', 'main'],
-  'ghost': ['ghost', 'background', 'main'],
+  'ghost': ['ghost', 'transparent', 'main']
 ) !default;
 
 %buttons-states {

package/framework/src/utilities/_colors.scss

@@ -11,6 +11,7 @@ $suffix: '';
  */
 $colors: (
   'background': [#fff, 'white', 'main'],
+  'transparent': ['transparent', 'transparent', 'transparent'],
   'main':[ #3d5d7e, 'main', 'white'],
   'main-fade':[ #eff2f8, 'main-fade', 'white'],
   'accent':[ #da641b,'accent', 'white'],

package/framework/src/utilities/_mixins.scss

@@ -409,7 +409,9 @@
     }
 
     input {
-      display: none;
+      opacity: 0;
+      position: absolute;
+      outline: none;
 
       &:checked ~ label.#{$type}-label {
         border-color: getColor('main');
@@ -422,6 +424,9 @@
           background-color: getColor('main');
         }
       }
+      &:focus-visible ~ label.#{$type}-label:before {
+        outline: 1px solid;
+      }
 
       &:disabled,
       &:disabled:checked {
@@ -495,6 +500,9 @@
         @include disabledRules;
       }
     }
+    &:has(input:focus-visible) label.#{$type}-label{
+      outline:  1px solid;
+    }
 
     &:first-child {
       margin-left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.4-beta-v4",
+  "version": "0.0.7-beta-v4",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [