@trilogy-ds/styles 0.0.1-beta-77 → 0.0.1-beta-80

package/framework/src/elements/_chips.scss

@@ -55,20 +55,20 @@
         }
       }
       #{$hoverSelector} {
-        background-color: getFadeColor('neutral');
+        background-color: getColor('neutral-fade');
       }
     }
 
     &.is-inverted {
       background-color: white;
-      color: getColor('alternate');
+      color: getColor('accent');
 
       &:active,
       &:hover,
       &:focus,
       &:focus-visible,
       &.is-active {
-        background-color: getColor('alternate') !important;
+        background-color: getColor('accent') !important;
         color: getColor('background') !important;
       }
     }

package/framework/src/elements/_entry.scss

@@ -9,7 +9,7 @@
   width: 100%;
 
   // Colors
-  @each $name in $colors-brand-funcionnal {
+  @each $name in $colors-brand-functionnal {
     $color: getColor($name);
     $color-invert: invertColor($name);
     $brandName: getColorBrandName($name);

package/framework/src/elements/_form.scss

@@ -228,7 +228,7 @@ $label-weight: $weight-bold;
       @each $name, $pair in $colors-feedback {
         &.is-#{$name} {
           ~ .icon {
-            color: getFadeColor($name);
+            color: fadeColor($name);
           }
         }
       }
@@ -242,7 +242,7 @@ $label-weight: $weight-bold;
       @each $name, $pair in $colors-feedback {
         &.is-#{$name} {
           ~ .icon {
-            color: getFadeColor($name)
+            color: fadeColor($name);
           }
         }
       }
@@ -593,7 +593,7 @@ $label-weight: $weight-bold;
   font-size: $help-size;
   margin-top: 2.5px;
 
-  @each $name, $pair in $colors-brand-funcionnal {
+  @each $name, $pair in $colors-brand-functionnal {
     $color: getColor($name);
     $brandName: getColorBrandName($name);
 

package/framework/src/elements/_icon.scss

@@ -71,7 +71,7 @@ $size: (
         max-width: 100%;
     }
 
-    @each $name, $pair in $colors-brand-funcionnal {
+    @each $name, $pair in $colors-brand-functionnal {
       $color: getColor($name);
       $brandName: getColorBrandName($name);
 

package/framework/src/elements/_loader.scss

@@ -21,7 +21,7 @@ $loader-items-bottom-offset: -40px;
 
     .loader-body {
         visibility: hidden;
-        background-color: getColor('alternate');
+        background-color: getColor('accent');
         animation: 2.5s linear 0s forwards infinite top_item;
     }
 

package/framework/src/elements/_progress.scss

@@ -18,10 +18,10 @@ $progressbar-small: 5px;
   -moz-appearance: none;
   -webkit-appearance: none;
 
-  background-color: getFadeColor('neutral');
+  background-color: getColor('neutral-fade');
 
   &::-webkit-progress-bar {
-    background-color: getFadeColor('font');
+    background-color: getColor('main-fade');
     border-radius: $progressbar-height;
   }
 
@@ -40,7 +40,7 @@ $progressbar-small: 5px;
   }
 
   // Colors
-  @each $name in $colors-brand-funcionnal {
+  @each $name in $colors-brand-functionnal {
     $brandName: getColorBrandName($name);
     $color: getColor($name);
 
@@ -81,7 +81,7 @@ $progressbar-small: 5px;
       border-radius: 0 $progressbar-height $progressbar-height 0;
     }
 
-    @each $name in $colors-brand-funcionnal {
+    @each $name in $colors-brand-functionnal {
       $color: getColor($name);
       $color-invert: invertColor($name);
       $brandName: getColorBrandName($name);
@@ -98,7 +98,7 @@ $progress-circle-slices: (
   secondary: getColor('info'),
   tertiary: getColor('font'),
   warning: getColor('warning'),
-  empty: getFadeColor('neutral')
+  empty: getColor('neutral-fade')
 );
 
 .progress-circle {

package/framework/src/elements/_sticker.scss

@@ -25,7 +25,7 @@ $sticker-height: 35px;
   }
 
   &.is-accent {
-    background-color: getColor('alternate');
+    background-color: getColor('accent');
     color: getColor('background') !important;
   }
 

package/framework/src/elements/_switch.scss

@@ -45,12 +45,12 @@
       border-radius: 9999px;
       width: 44px;
       height: 22px;
-      background-color: getFadeColor('font');
+      background-color: getColor('main-fade');
       margin-left: 16px;
     }
 
     &:after {
-      $colorSvg: encodecolor(getFadeColorValue('font'));
+      $colorSvg: encodecolor(getColorValue('main-fade'));
       content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
       position: absolute;
       top: 50%;

package/framework/src/elements/_table.scss

@@ -21,12 +21,12 @@
   * @deprecated "Use multiples <tr><th> instead"
   */
   tbody .is-body-header {
-    background-color: getFadeColor('neutral');
+    background-color: getColor('neutral-fade');
   }
 
   td,
   th {
-    border: 1px solid getFadeColor('neutral');
+    border: 1px solid getColor('neutral-fade');
     border-width: 0;
     padding: 20px;
     vertical-align: top;
@@ -56,7 +56,7 @@
   tr {
     @each $name in $colors-feedback {
       &.is-#{$name} {
-        background-color: getFadeColor($name);
+        background-color: fadeColor($name);
       }
     }
 
@@ -71,7 +71,7 @@
     }
 
     td {
-      border-bottom: 1px solid getFadeColor('neutral');
+      border-bottom: 1px solid getColor('neutral-fade');
 
       > p {
         margin: 0;
@@ -97,7 +97,7 @@
     &.is-expanded,
     &.is-expandable:hover {
       td {
-        color: getColor('alternate');
+        color: getColor('accent');
         cursor: pointer;
       }
     }
@@ -155,12 +155,12 @@
 
   &:not(.is-bordered).is-comparative {
     th {
-      border-right: 1px solid getFadeColor('neutral');
+      border-right: 1px solid getColor('neutral-fade');
     }
 
     td {
       &:not(:last-child) {
-        border-right: 1px solid getFadeColor('neutral');
+        border-right: 1px solid getColor('neutral-fade');
       }
     }
   }
@@ -196,14 +196,14 @@
     tbody {
       tr:not(.is-selected) {
         &:nth-child(even) {
-          background-color: getFadeColor('neutral');
+          background-color: getColor('neutral-fade');
         }
       }
     }
   }
 
   .subtable {
-    background-color: getFadeColor('neutral');
+    background-color: getColor('neutral-fade');
     border-radius: var(--radius);
     padding: $box-padding * 2;
 

package/framework/src/elements/_tag.scss

@@ -85,7 +85,7 @@ $tag-delete-margin: 1px !default;
 
     &.is-inverted {
       .tag {
-        background-color: getColor('fade-background');
+        background-color: getColor('background');
       }
     }
 
@@ -94,7 +94,7 @@ $tag-delete-margin: 1px !default;
 
 .tag {
   align-items: center;
-  background-color: getFadeColor('neutral');
+  background-color: getColor('neutral-fade');
   border-radius: 9999px;
   color: getColor('font');
   display: inline-flex;
@@ -120,7 +120,7 @@ $tag-delete-margin: 1px !default;
 
   @each $name in $colors-feedback {
     &.is-#{$name}:not(.is-inverted) {
-      background-color: getFadeColor($name);
+      background-color: fadeColor($name);
     }
     &.is-inverted.is-#{$name} {
       color: getColor($name);

package/framework/src/elements/_textarea.scss

@@ -96,7 +96,7 @@
   }
 
   // Colors
-  @each $name, $pair in $colors-brand-funcionnal {
+  @each $name, $pair in $colors-brand-functionnal {
     $color: getColor($name);
     $color-invert: invertColor($name);
     $brandName: getColorBrandName($name);

package/framework/src/elements/_toaster.scss

@@ -13,7 +13,7 @@ a.toaster {
     @include apply-shadow-box();
 
 
-  background-color: getColor('fade-info');
+  background-color: getColor('info-fade');
   border-radius: var(--radius);
   margin-bottom: 16px;
   position: relative;
@@ -64,7 +64,7 @@ a.toaster {
 
   @each $name in $colors-feedback {
     &.is-#{$name} {
-      background-color: getFadeColor($name);
+      background-color: fadeColor($name);
       border: 2px solid getColor($name);
 
       .icon {

package/framework/src/grid/_columns.scss

@@ -781,7 +781,7 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: getFadeColor('font');
+      background-color: getColor('main-fade');
       border-radius: var(--radius);
       margin: 0 8px;
     }

package/framework/src/layout/_section.scss

@@ -1,5 +1,5 @@
 .section {
-  padding: $spacing-6 $spacing-5;
+  padding: $spacing-6 $spacing-4;
 
   @include desktop {
     padding: $spacing-8 $spacing-5;

package/framework/src/theming/buttons_partial.scss

@@ -7,9 +7,9 @@ Colors for buttons
   @color-text The name of the color in the color map for the text
   */
 $button-colors: (
-  'accent':['conversion', 'alternate', 'background'],
+  'accent':['conversion', 'accent', 'background'],
   'primary': ['primary', 'main', 'background'],
-  'secondary': ['secondary', 'fade-main', 'main'],
+  'secondary': ['secondary', 'main-fade', 'main'],
   'ghost': ['ghost', 'background', 'main'],
 ) !default;
 

package/framework/src/theming/common_partials.scss

@@ -4,6 +4,6 @@
   --radius: 8px;
   --radius-small: 4px;
   --radius-large: 16px;
-  --border: 1px solid #{getFadeColor('font')};
+  --border: 1px solid #{getColor('main-fade')};
   --border-active: 2px solid #{getColor('main')};
 }

package/framework/src/utilities/_all.scss

@@ -7,6 +7,6 @@
 @import '../theming/buttons_partial';
 @import "mixins";
 @import "controls";
-//@import "background";
+@import "background";
 @import "animations";
 @import "spacing";

package/framework/src/utilities/_background.scss

@@ -1,9 +1,13 @@
 .is-inverted {
-  color: #{getColor('background')};
+  color: getColor('background');
 }
 
-.is-inverted .is-base {
-  color: getColor('font');
+.is-inverted {
+  .box, .section, .container, .view, .hero {
+    &:not(.is-inverted) {
+      color: getColor('font');
+    }
+  }
 }
 
 .has-background {

package/framework/src/utilities/_colors.scss

@@ -10,14 +10,31 @@ $suffix: '';
  @background A valid css color value (a variant color for background) -- optional
  */
 $colors: (
-  'background': [#fff, #E9E9E9, 'white', 'main'],
-  'main':[ #3d5d7e, #eff2f8, 'main', 'white'],
-  'alternate':[ #da641b, #bb5118,'accent', 'white'],
-  'font':[ #3d5d7e, #BBC6CD, 'main', 'white'],
-  'success':[ #007B52, #cae8ca,'success', 'white'],
-  'info':[ #1A688A, #c8dbec, 'info','white'],
-  'warning':[ #FFBB33, #ecdbc6,'warning', 'white'],
-  'error':[ #D42D02,#eecccc,'error', 'white'],
-  'disabled':[ #646464, #D1D1D1,'disabled', 'white'],
-  'neutral':[ #707070, #F4F4F4,'grey', 'white' ],
+  'background': [#fff, 'white', 'main'],
+  'main':[ #3d5d7e, 'main', 'white'],
+  'main-fade':[ #eff2f8, 'main-fade', 'white'],
+  'accent':[ #da641b,'accent', 'white'],
+  'font':[ #3d5d7e, 'font', 'white'],
+  'success':[ #007B52, 'success', 'white'],
+  'success-fade':[ #cae8ca,'success-fade', 'white'],
+  'info':[ #1A688A, 'info', 'white'],
+  'info-fade':[ #c8dbec, 'info-fade', 'white'],
+  'warning':[ #FFBB33, 'warning', 'white'],
+  'warning-fade':[ #ecdbc6, 'warning-fade', 'white'],
+  'error':[ #D42D02,'error', 'white'],
+  'error-fade':[ #eecccc, 'error-fade', 'white'],
+  'disabled':[ #646464, 'disabled', 'white'],
+  'disabled-fade':[ #D1D1D1,'disabled-fade', 'white'],
+  'neutral':[ #707070, 'grey', 'white' ],
+  'neutral-fade':[#F4F4F4, 'grey-fade', 'white' ],
+) !default;
+
+$fade-colors: (
+  'main': 'main-fade',
+  'success': 'success-fade',
+  'info':'info-fade',
+  'warning':'warning-fade',
+  'error':'error-fade',
+  'disabled': 'disabled-fade',
+  'neutral': 'neutral-fade',
 ) !default;

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

@@ -14,12 +14,12 @@ $size-large: $text-24 !default;
 
 // Brand Color
 $colors-brand: (
-  'background', 'main', 'alternate'
+  'background', 'main', 'accent'
 );
 
 // Brand Color Functionnal
-$colors-brand-funcionnal: (
-  'background', 'main', 'alternate', 'info', 'success', 'error', 'warning', 'neutral'
+$colors-brand-functionnal: (
+  'background', 'main', 'accent', 'info', 'success', 'error', 'warning', 'neutral'
 );
 
 $colors-feedback: (

package/framework/src/utilities/_mixins.scss

@@ -147,7 +147,7 @@
 
 @mixin spinner {
   animation: spinAround 500ms infinite linear;
-  border: 2px solid getFadeColor('neutral');
+  border: 2px solid getColor('neutral-fade');
   border-radius: 290486px;
   border-right-color: transparent;
   border-top-color: transparent;
@@ -340,7 +340,7 @@
 }
 
 @mixin apply-colors($property: 'color') {
-  @each $name, $pair in $colors-brand-funcionnal {
+  @each $name, $pair in $colors-brand-functionnal {
     $color: getColor($name);
     $brandName: getColorBrandName($name);
     &.is-#{$brandName} {
@@ -355,7 +355,7 @@
 }
 
 @mixin pattern-dark($size, $x-pos: top, $y-pos: center) {
-  background: linear-gradient(#1b3650, getColor('alternate'));
+  background: linear-gradient(#1b3650, getColor('accent'));
   background-size: auto, $size, auto;
   background-position: top left, $x-pos $y-pos, top left;
 }
@@ -365,7 +365,7 @@
   @include control;
   height: 56px;
   background-color: getColor('background');
-  border-color: getFadeColor('font');
+  border-color: getColor('main-fade');
   color: getColor('font');
 
   @include placeholder {
@@ -419,7 +419,7 @@
       &:disabled:checked {
         & ~ label.#{$type}-label {
           &:after {
-            background-color: getFadeColor('disabled');
+            background-color: getColor('disabled-fade');
           }
         }
       }
@@ -606,15 +606,7 @@
 }
 
 @mixin hoverRules {
-  background-color: getFadeColor('neutral');
-}
-
-@mixin hoverRulesOnOdd {
-  background: linear-gradient(
-      to top,
-      rgba(0, 0, 0, 0.25),
-      rgba(0, 0, 0, 0.25)
-  ) getFadeColor('neutral');
+  background-color: getColor('main-fade');
 }
 
 @mixin hover {
@@ -635,6 +627,6 @@
 }
 
 @mixin disabledRules {
-  background-color: getFadeColor('disabled') !important;
+  background-color: getColor('disabled-fade') !important;
   @include disabledRulesWithoutBG;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trilogy-ds/styles",
-  "version": "0.0.1-beta-77",
+  "version": "0.0.1-beta-80",
   "author": "Bouygues Telecom",
   "license": "UNLICENSED",
   "files": [
@@ -16,7 +16,7 @@
     "create:autolayout": "node scripts/dist/autolayout.cjs",
     "create:spacing": "node scripts/dist/spacing.cjs",
     "prebuild": "npm run copy:icons",
-    "build": "vite --config vite.config.js build",
+    "build": "npm run build:autolayout && npm run create:autolayout && vite --config vite.config.js build",
     "watch:css": "vite --config vite.config.js watch",
     "copy:icons": "mkdir -p ./dist/default/assets/icons && cp -R ../assets/lib/icons/all ./dist/default/assets/icons/."
   }

package/framework/src/components/_autolayout2.scss

@@ -1,38 +0,0 @@
-body:not(.is-tight) {
-  .box {
-    margin-top: 16px;
-  }
-  .box:not(:first-child) + * {
-    margin-top: 16px;
-  }
-  * + .box {
-    margin-top: 8px;
-  }
-  .text {
-    margin-top: 8px;
-  }
-  .card {
-    margin-top: 16px;
-  }
-  .button {
-    margin-top: 16px;
-  }
-  .accordions {
-    margin-top: 16px;
-  }
-  .alert {
-    margin-top: 16px;
-  }
-  .field {
-    margin-top: 8px;
-  }
-  .chips-list {
-    margin-top: 16px;
-  }
-  .tags {
-    margin-top: 16px;
-  }
-  .chips-list {
-    margin-top: 16px;
-  }
-}