@provoly/dashboard 0.22.4 → 0.22.6

package/styles/layout/_o-manifest-layout.scss

@@ -31,6 +31,10 @@
         min-height: 10px;
       }
 
+      .search-icon {
+        display: inline;
+      }
+
       .a-icon {
         position: absolute;
         right: 0.6875rem;

package/styles/libs/_reset-lib-ol.scss

@@ -4,15 +4,19 @@
 
 .ol-control button,
 .ol-searchbar button {
-  width: 30px !important;
-  height: 30px !important;
+  width: 40px !important;
+  height: 40px !important;
   cursor: pointer;
 }
 
 .ol-zoom {
-  border-width: toRem(1);
-  border-style: solid;
-  border-radius: toRem(7);
+  .ol-zoom-in {
+    border-radius: toRem(8) toRem(8) 0 0 !important;
+  }
+
+  .ol-zoom-out {
+    border-radius: 0 0 toRem(8) toRem(8) !important;
+  }
 }
 
 .ol-searchbar {

package/styles/main.scss

@@ -7,19 +7,19 @@
 @use 'components/a-badge' as *;
 @use 'components/a-btn' as *;
 @use 'components/a-checkbox' as *;
+@use 'components/a-chip' as *;
+@use 'components/a-color-picker' as *;
 @use 'components/a-expandable-value' as *;
 @use 'components/a-form-field' as *;
 @use 'components/a-label' as *;
 @use 'components/a-link' as *;
 @use 'components/a-loader' as *;
+@use 'components/a-page-loader' as *;
 @use 'components/a-pastille' as *;
 @use 'components/a-range-slider' as *;
 @use 'components/a-table' as *;
 @use 'components/a-toggle' as *;
 @use 'components/a-tooltip' as *;
-@use 'components/a-chips' as *;
-@use 'components/a-color-picker' as *;
-@use 'components/a-page-loader' as *;
 
 /* Atoms lib */
 @use 'components/a-pry-select' as *;
@@ -29,6 +29,7 @@
 @use 'components/m-actions-list' as *;
 @use 'components/m-btn-group' as *;
 @use 'components/m-btn-sorttable' as *;
+@use 'components/m-color-scheme' as *;
 @use 'components/m-color-selector' as *;
 @use 'components/m-context-menu' as *;
 @use 'components/m-filter' as *;
@@ -41,20 +42,20 @@
 @use 'components/m-minus-plus' as *;
 @use 'components/m-nav-links' as *;
 @use 'components/m-presentation-title' as *;
+@use 'components/m-pry-overlay' as *;
 @use 'components/m-snackbar' as *;
 @use 'components/m-time-picker' as *;
 @use 'components/m-toolbox' as *;
 @use 'components/m-tooltip' as *;
-@use 'components/m-pry-overlay' as *;
-@use 'components/m-color-scheme' as *;
 
 /* Organisms */
+@use 'components/o-about' as *;
 @use 'components/o-accordion' as *;
 @use 'components/o-card' as *;
 @use 'components/o-cards-list' as *;
 @use 'components/o-dashboard' as *;
 @use 'components/o-date-picker' as *;
-@use 'components/o-datasources' as *;
+@use 'components/o-chips-selector' as *;
 @use 'components/o-draggable-menu' as *;
 @use 'components/o-form' as *;
 @use 'components/o-modal' as *;
@@ -73,7 +74,6 @@
 @use 'components/o-pry-expand-panel' as *;
 @use 'components/o-pry-stepper' as *;
 @use 'components/overlay' as *;
-@use 'components/o-about' as *;
 
 /* Layout */
 @use 'layout/o-base-layout' as *;

package/styles-theme/abstracts-theme/_abstracts-overlays.theme.scss

@@ -8,3 +8,9 @@
   background-color: white;
   box-shadow: themed($theme-map, 'decoration', 'shadow', 'default');
 }
+
+.backdrop {
+  &--with-color {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}

package/styles-theme/abstracts-theme/variables/_variables-colors.scss

@@ -2,24 +2,20 @@
 
 // Primary palette
 $theme-colors-primary: (
-  50: #ffffff,
-  100: #f9fafb,
-  200: #f5f7f9,
-  300: #dfe5ec,
-  400: #bccad8,
-  500: #7b96b2,
-  600: #3e546a,
-  700: #263340,
+  50: #FFFFFF,
+  100: #F9FAFB,
+  200: #F5F7F9,
+  300: #D8E7F7, // hover - card, button ("Bleu Clair" in figma)
+  400: #BCCAD8, //filter border
+  500: #7B96B2,
+  600: #113B6E, // new primary color
+  700: #3E546A, // figma 600, all typography
+  750: #263340, // figma 700, typography - titles, categories
   800: #131920,
+  850: #092B54, // hover - slider, active - button
+
   'contrast': (
-    50: #263340,
-    100: #263340,
-    200: #263340,
-    400: #263340,
-    500: #ffffff,
-    600: #ffffff,
-    700: #ffffff,
-    800: #ffffff
+    50: #FFFFFF,
   )
 );
 
@@ -32,14 +28,9 @@ $theme-colors-accent: (
   600: #40b688,
   700: #3caa7f,
   800: #328f6b,
+
   'contrast': (
-    50: #263340,
-    100: #ffffff,
-    400: #ffffff,
-    500: #ffffff,
-    600: #ffffff,
-    700: #ffffff,
-    800: #ffffff
+    50: #ffffff,
   )
 );
 
@@ -48,10 +39,13 @@ $theme-colors-grey: (
   50: #fafafa,
   100: #f5f5f5,
   200: #eeeeee,
+  300: #DFE5EC, // card inner border
   400: #bdbdbd,
   500: #9e9e9e,
   600: #757575,
+  800: #424B5A, // filter label ("Grey Primary" in Figma)
   1000: #000000,
+
   'contrast': (
     50: #263340,
     100: #263340,
@@ -65,7 +59,7 @@ $theme-colors-grey: (
 
 // Status palette
 $theme-colors-status: (
-  'ok': #35b99f,
+  'ok': #0AC865,
   'warning': #f8cd59,
   'error': #fc5640,
   'active': #242a47,

package/styles-theme/abstracts-theme/variables/_variables-decoration.scss

@@ -8,14 +8,14 @@
 $theme-focus-visible: (
   'border-color-light': white,
   'border-color-dark': #35b99f,
-  'border-radius': 22px
+  'border-radius': 5px
 );
 
 // Border-radius
 $theme-border-radius: (
   'scrollbar-thumb': 6px,
   'button': (
-    'default': 22px
+    'default': 5px
   ),
   'checkbox': 3px,
   'card': (

package/styles-theme/abstracts-theme/variables/_variables-typo.scss

@@ -59,8 +59,8 @@ $theme-typography: (
   'button': (
     'font-family': '',
     'font-variation': '',
-    'font-size': 16px,
-    'line-height': 18px,
+    'font-size': 14px,
+    'line-height': 16px,
     'letter-spacing': '',
     'font-weight': 400,
     'font-style': ''

package/styles-theme/base-theme/_typography.theme.scss

@@ -2,27 +2,30 @@
 @use '../abstracts-theme/variables.theme' as *;
 
 body {
-  color: themed($theme-map, 'color', 'graph', 01);
+  color: themed($theme-map, 'color', 'primary', 700);
   @include typography-level(themed($theme-map, 'typography', 'body'));
 }
 
 .a-h1,
 h1 {
-  color: themed($theme-map, 'color', 'graph', 02);
+  color: themed($theme-map, 'color', 'primary', 750);
   @include typography-level(themed($theme-map, 'typography', 'title-1'));
 }
 
 .a-h2,
 h2 {
+  color: themed($theme-map, 'color', 'primary', 750);
   @include typography-level(themed($theme-map, 'typography', 'title-2'));
 }
 
 .a-h3,
 h3 {
+  color: themed($theme-map, 'color', 'primary', 750);
   @include typography-level(themed($theme-map, 'typography', 'title-3'));
 }
 
 .a-h4,
 h4 {
+  color: themed($theme-map, 'color', 'primary', 750);
   @include typography-level(themed($theme-map, 'typography', 'title-4'));
 }

package/styles-theme/components-theme/_a-btn.theme.scss

@@ -1,4 +1,5 @@
 @use '../../styles/abstracts' as *;
+@use '../../styles/base/utils' as *;
 @use '../abstracts-theme/variables.theme' as *;
 
 /* Theme - Atom a-btn */
@@ -9,80 +10,62 @@
 
   // Default btn settings
   border-radius: $btn-radius-default;
-  color: themed($theme-map, 'color', 'graph', 01);
+  border-color: themed($theme-map, 'color', 'primary', 600);
+  color: themed($theme-map, 'color', 'primary', 600);
   @include typography-level(themed($theme-map, 'typography', 'button'));
 
   &--primary,
   &.a-btn--primary.-circle {
-    color: themed($theme-map, 'color', 'accent', 'contrast', 600);
-    background-color: themed($theme-map, 'color', 'accent', 600);
+    border-width: 1px;
+    color: themed($theme-map, 'color', 'primary', 'contrast', 50);
+    background-color: themed($theme-map, 'color', 'primary', 600);
 
     &:hover {
-      color: themed($theme-map, 'color', 'accent', 'contrast', 700);
-      background-color: themed($theme-map, 'color', 'accent', 700);
+      @include changeBgColor(
+        $targetBgColor: themed($theme-map, 'color', 'primary', 300),
+        $targetTextColor: themed($theme-map, 'color', 'primary', 600),
+        $targetBorderColor: themed($theme-map, 'color', 'primary', 600)
+      );
     }
 
     &:focus,
     &:active {
-      color: themed($theme-map, 'color', 'accent', 'contrast', 800);
-      background-color: themed($theme-map, 'color', 'accent', 800);
+      @include changeBgColor(
+          $targetBgColor: themed($theme-map, 'color', 'primary', 850),
+          $targetTextColor: themed($theme-map, 'color', 'primary', 'contrast', 50)
+      );
     }
 
     &.-disabled,
     &:disabled {
-      color: themed($theme-map, 'color', 'accent', 'contrast', 100);
-      background-color: themed($theme-map, 'color', 'accent', 100);
+      opacity: 0.5;
     }
   }
 
   &--secondary,
   &.a-btn--secondary.-circle {
-    border: 1px solid themed($theme-map, 'color', 'primary', 500);
-    color: themed($theme-map, 'color', 'graph', 01);
-    background-color: transparent;
+    border-width: 1px;
+    color: themed($theme-map, 'color', 'primary', 600);
+    background-color: themed($theme-map, 'color', 'primary', 'contrast', 50);
 
     &:hover {
-      border: 1px solid themed($theme-map, 'color', 'primary', 600);
-      color: themed($theme-map, 'color', 'graph', 01);
+      @include changeBgColor(
+        $targetBgColor: themed($theme-map, 'color', 'primary', 300)
+      );
     }
 
     &:focus,
     &:active {
-      border: 1px solid themed($theme-map, 'color', 'primary', 800);
-      color: themed($theme-map, 'color', 'primary', 800);
+      background-color: themed($theme-map, 'color', 'primary', 600);
     }
 
     &.-disabled,
     &:disabled {
-      border: 1px solid themed($theme-map, 'color', 'primary', 400);
-      color: themed($theme-map, 'color', 'primary', 400);
+      opacity: 0.5;
     }
 
     &.is-active {
-      background-color: themed($theme-map, 'color', 'primary', 300);
-    }
-  }
-
-  &--tertiary {
-    border: 2px themed($theme-map, 'color', 'primary', 400) solid;
-    color: themed($theme-map, 'color', 'primary', 'contrast', 600);
-    background-color: transparent;
-
-    &:hover,
-    &:active,
-    &.is-active {
-      border-color: themed($theme-map, 'color', 'primary', 400);
-      background-color: themed($theme-map, 'color', 'primary', 400);
-    }
-  }
-
-  &--ghost {
-    color: themed($theme-map, 'color', 'primary', 600);
-    background-color: transparent;
-
-    &:hover,
-    &:active {
-      text-decoration: underline;
+      background-color: themed($theme-map, 'color', 'primary', 600);
     }
   }
 
@@ -90,27 +73,6 @@
     @include outlineOnFocus($border-radius: 5px);
   }
 
-  &--real-ghost,
-  &--real-ghost.-circle,
-  &.a-btn--real-ghost.-circle {
-    color: themed($theme-map, 'color', 'accent', 'contrast', 400);
-    background-color: themed($theme-map, 'color', 'primary', 500);
-
-    &:hover {
-      background-color: themed($theme-map, 'color', 'accent', 600);
-    }
-
-    &:focus,
-    &:active {
-      background-color: themed($theme-map, 'color', 'accent', 700);
-    }
-
-    &.-disabled,
-    &:disabled {
-      background-color: themed($theme-map, 'color', 'accent', 100);
-    }
-  }
-
   &--action {
     @include outlineOnFocus($border-radius: 5px);
     border-radius: toRem(10);
@@ -120,7 +82,7 @@
     &:hover,
     &:active,
     &.is-active {
-      color: themed($theme-map, 'color', 'primary', 'contrast', 400);
+      color: themed($theme-map, 'color', 'primary', 'contrast', 50);
       background-color: themed($theme-map, 'color', 'primary', 400);
     }
 
@@ -132,7 +94,7 @@
   // Action button displayed close to an form input field, icon + circle background (ex: add/remove)
   &--input-action {
     .a-icon {
-      color: themed($theme-map, 'color', 'primary', 'contrast', 400);
+      color: themed($theme-map, 'color', 'primary', 'contrast', 50);
     }
 
     &:before {
@@ -148,7 +110,7 @@
 
   // Action add item, circled icon on left + text on right
   &--iconcircle-text {
-    color: themed($theme-map, 'color', 'graph', 01);
+    color: themed($theme-map, 'color', 'primary', 700);
     font-weight: 400;
     font-size: 14px;
 
@@ -159,28 +121,35 @@
     }
 
     .a-icon {
-      color: themed($theme-map, 'color', 'primary', 'contrast', 400);
+      color: themed($theme-map, 'color', 'primary', 'contrast', 50);
     }
   }
 
   &--select {
     border-radius: toRem(5);
     color: themed($theme-map, 'color', 'primary', 600);
-    background-color: themed($theme-map, 'color', 'primary', 'contrast', 600);
+    background-color: themed($theme-map, 'color', 'primary', 'contrast', 50);
     font-weight: 400;
   }
 
   // Button more dots ( ...)
   &--more {
+    background-color: themed($theme-map, 'color', 'primary', 50);
     color: themed($theme-map, 'color', 'primary', 500);
 
-    &:hover {
-      color: themed($theme-map, 'color', 'primary', 600);
-      background-color: themed($theme-map, 'color', 'primary', 200);
+    &:hover,
+    &:active {
+      @include changeBgColor(
+        $targetBgColor: themed($theme-map, 'color', 'primary', 600),
+        $targetTextColor: themed($theme-map, 'color', 'primary', 'contrast', 50),
+        $targetBorderColor: themed($theme-map, 'color', 'primary', 600)
+      );
     }
 
     &:active {
-      background-color: themed($theme-map, 'color', 'primary', 300);
+      background-color:themed($theme-map, 'color', 'primary', 600);
+      color: themed($theme-map, 'color', 'primary', 'contrast', 50),
+
     }
 
     &:disabled {
@@ -210,6 +179,6 @@
   /* MODIFIERS */
 
   &.-circle {
-    background: themed($theme-map, 'color', 'primary', 50);
+    background: themed($theme-map, 'color', 'primary', 'contrast', 50);
   }
 }

package/styles-theme/components-theme/_a-checkbox.theme.scss

@@ -10,12 +10,12 @@
     border-radius: themed($theme-map, 'decoration', 'border-radius', 'checkbox');
 
     &:checked {
-      border-color: themed($theme-map, 'color', 'accent', 600);
-      background-color: themed($theme-map, 'color', 'accent', 600);
+      border-color: themed($theme-map, 'color', 'primary', 600);
+      background-color: themed($theme-map, 'color', 'primary', 600);
 
       &:before,
       &:after {
-        background-color: themed($theme-map, 'color', 'accent', 'contrast', 600);
+        background-color: themed($theme-map, 'color', 'primary', 'contrast', 50);
       }
     }
   }
@@ -23,46 +23,4 @@
   &__text {
     @include typography-level(themed($theme-map, 'typography', 'form-field'));
   }
-
-  /*&__input {
-    // No focus-visible on button but on button__content
-    &:focus {
-      & ~ #{$this}__checkmark {
-        outline: 2px solid themed($theme-map, 'decoration', 'focus-visible', 'border-color-dark');
-      }
-    }
-    &:focus:not(:focus-visible) {
-      & ~ #{$this}__checkmark {
-        outline: 0;
-      }
-    }
-    &:focus-visible {
-      & ~ #{$this}--circle #{$this}__checkmark {
-        @include eltFocusVisible(
-          $color1: themed($theme-map, 'decoration', 'focus-visible', 'border-color-light'),
-          $color2: themed($theme-map, 'decoration', 'focus-visible', 'border-color-dark'),
-          $border-radius: 9px
-        );
-      }
-    }
-  }*/
-
-  /*&--circle {
-    #{$this}__checkmark {
-      border-color: themed($theme-map, 'color', 'primary', 400);
-      &:before {
-        border-color: themed($theme-map, 'color', 'accent', 'contrast', 400);
-        background-color: themed($theme-map, 'color', 'accent', 400);
-      }
-    }
-  }*/
-
-  /* &__text {
-
-   }*/
-
-  /*&__input:checked ~ #{$this}__checkmark {
-    border-color: themed($theme-map, 'color', 'accent', 600);
-    background-color: themed($theme-map, 'color', 'accent', 600);
-  }*/
 }

package/styles-theme/components-theme/_a-chip.theme.scss

@@ -0,0 +1,32 @@
+@use '../../styles/abstracts' as *;
+@use '../abstracts-theme/variables.theme' as *;
+
+/* Theme Atom - chip */
+
+.a-chip {
+  color: themed($theme-map, 'color', 'primary', 'contrast', 50);
+  background-color: themed($theme-map, 'color', 'primary', 600);
+
+  &:hover {
+    @include changeBgColor(
+      $targetBgColor: themed($theme-map, 'color', 'primary', 300),
+      $targetTextColor: themed($theme-map, 'color', 'primary', 600)
+    );
+  }
+
+  &.-not-found {
+    opacity: 0.4;
+  }
+
+  &--light {
+    background-color: themed($theme-map, 'color', 'primary', 50);
+    color: themed($theme-map, 'color', 'primary', 600);
+    box-shadow: 0px 4px 4px rgba(17, 59, 110, 0.12);
+
+    &:hover {
+      @include changeBgColor(
+        $targetBgColor: themed($theme-map, 'color', 'primary', 300)
+      );
+    }
+  }
+}

package/styles-theme/components-theme/_a-form-field.theme.scss

@@ -8,7 +8,7 @@
   border-color: themed($theme-map, 'color', 'primary', 400);
   border-radius: toRem(4);
   color: themed($theme-map, 'color', 'graph', 01);
-  background-color: themed($theme-map, 'color', 'primary', 'contrast', 700);
+  background-color: themed($theme-map, 'color', 'primary', 'contrast', 50);
 
   &[aria-invalid='true'] {
     border-color: themed($theme-map, 'color', 'status', 'error');

package/styles-theme/components-theme/_a-label.theme.scss

@@ -4,6 +4,7 @@
 /* Theme Atom - form label */
 .a-label {
   @include typography-level(themed($theme-map, 'typography', 'label'));
+  color: themed($theme-map, 'color', 'primary', 750);
 
   &--help {
     color: themed($theme-map, 'color', 'graph', 01);

package/styles-theme/components-theme/_a-pry-select.theme.scss

@@ -14,25 +14,27 @@
 
   &__value {
     &.-multiple {
-      background-color: themed($theme-map, 'color', 'accent', 100);
+      color: themed($theme-map, 'color', 'primary', 'contrast', 50);
+      background-color: themed($theme-map, 'color', 'primary', 600);
+
+      &.-warn {
+        background-color: themed($theme-map, 'color', 'status', warning);
+        color: themed($theme-map, 'color', 'grey', 1000);
+      }
     }
   }
 
   &__options {
     color: themed($theme-map, 'color', 'graph', 01);
-    background-color: themed($theme-map, 'color', 'primary', 'contrast', 700);
+    background-color: themed($theme-map, 'color', 'primary', 'contrast', 50);
     border: 1px solid themed($theme-map, 'color', 'primary', 400);
     box-shadow: 0 4px 4px #113b6e1f;
 
     &__option {
       background-color: #ffffff;
 
-      &[aria-selected="true"], &:hover {
-        background-color: themed($theme-map, 'color', 'accent', 50);
-      }
-
       &:hover {
-        color: themed($theme-map, 'color', 'primary', 'contrast', 100);
+        color: themed($theme-map, 'color', 'primary', 750);
       }
     }
   }
@@ -45,4 +47,8 @@
   &__clear {
     color: themed($theme-map, 'color', 'grey', 500);
   }
+
+  &__toggle {
+    color: themed($theme-map, 'color', 'primary', 600);
+  }
 }