Updated ProtonMail's base styles. ⬆️

30 files changed, 561 insertions, 187 deletions

diff --git a/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss b/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss
index b48e26c..f1556e5 100644
--- a/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss
+++ b/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss
@@ -9,7 +9,7 @@
   display: inline-block;
   width: 1.6rem;
   height: 1.6rem;
-  background: $pm-input-background url("#{$path-images}sprite-for-css-only.svg#css-greater") 0 0 no-repeat;
+  background: transparent url("#{$path-images}sprite-for-css-only.svg#css-greater") 0 0 no-repeat;
   background-size: 1.4rem;
   position: relative;
   top: 6px;
@@ -25,6 +25,7 @@
 .breadcrumb-button {
   padding: .4em;
   opacity: .3;
+  color: inherit;
 }
 [disabled][aria-current="step"].breadcrumb-button {
   font-weight: bold;
diff --git a/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss b/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss
new file mode 100644
index 0000000..b1e8d72
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss
@@ -0,0 +1,87 @@
+// these mixins are present to be called from pm-buttons and pm-darkmode
+@import "../reusable-components/design-system-config";
+
+
+@mixin button-disabled-state-dm {
+  opacity: .6;
+  background-color: $pm-global-grey;
+  color: rgba( $pm-global-muted, .6 );
+  border-color: rgba( $pm-global-muted, .6 );
+  pointer-events: none;
+}
+
+@mixin pm-button-dark {
+  color: $white;
+  background-color: $pm-global-grey;
+  border-color: var(--bordercolor-input, $pm-global-border);
+
+  &:focus,
+  &:hover,
+  &.is-hover {
+    color: $white;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  &[disabled],
+  &.is-disabled {
+    @include button-disabled-state-dm;
+  }
+  /* just to cancel examples  */
+  &.is-hover:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+}
+
+
+@mixin pm-button-blueborder-dark {
+  border-color: $pm-primary-light;
+  color: $pm-primary-light;
+  background-color: $pm-global-grey;
+
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &.is-hover,
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    background: rgba(0, 0, 0, 0.2);
+    border-color: $pm-primary-light;
+    color: $pm-primary-dark;
+  }
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  &[disabled],
+  &.is-disabled {
+    @include button-disabled-state-dm;
+  }
+}
+
+@mixin pv-button-greenborder-dark {
+  border-color: $pv-green-light;
+  color: $pv-green-light;
+  background-color: $pm-global-grey;
+
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &.is-hover,
+  &:active,
+  &.is-active {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-color: $pv-green-dark;
+    color: $pv-green-dark;
+  }
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  &[disabled],
+  &.is-disabled {
+    @include button-disabled-state-dm;
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-buttons.scss b/templates/@theme-base/pm-styles/_pm-buttons.scss
index bad40a6..d206cf9 100644
--- a/templates/@theme-base/pm-styles/_pm-buttons.scss
+++ b/templates/@theme-base/pm-styles/_pm-buttons.scss
@@ -2,6 +2,8 @@
 /*
  * Buttons
  */
+@import "pm-buttons-mixins";
+
 [class*="pm-button"],
 [class*="pv-button"] {
   border-radius: $global-border-radius;
@@ -20,7 +22,6 @@
   }
 }
 
-
 .pm-button {
   border-color: $pm-global-border;
   background: $white;
@@ -56,37 +57,16 @@
   &.p0 {
     padding: 0;
   }
-
 }
 
-.pm-button-dark {
-  color: $white;
-  background-color: $pm-global-grey;
-  border-color: $pm-global-border;
 
-  &:focus,
-  &:hover,
-  &.is-hover {
-    color: $white;
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    background: rgba(0, 0, 0, 0.5);
-  }
-  &[disabled],
-  &.is-disabled {
-    background-color: $pm-global-muted;
-    color: rgba( $pm-global-grey, .3 );
-    pointer-events: none;
-  }
-  /* just to cancel examples  */
-  &.is-hover:hover {
-    background-color: rgba(0, 0, 0, 0.2);
-  }
+.pm-button-dark {
+  @include pm-button-dark;
 }
 
-.pm-button-blue {
+
+.pm-button-blue,
+.pm-button.pm-button-blue {
   color: $white;
   background-color: $pm-primary;
   border: 1px solid $pm-primary;
@@ -147,35 +127,13 @@
   }
 }
 
-.pm-button-blueborder-dark {
-  border-color: $pm-primary-light;
-  color: $pm-primary-light;
-  background-color: $pm-global-grey;
 
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &.is-hover,
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    background-color: rgba(0, 0, 0, 0.2);
-    border-color: $pm-primary-light;
-    color: $pm-primary-dark;
-  }
-  &:active,
-  &.is-active {
-    background: rgba(0, 0, 0, 0.5);
-  }
-  &[disabled],
-  &.is-disabled {
-    background-color: $pm-global-muted;
-    color: rgba( $pm-global-grey, .3 );
-    border-color: $pm-global-border;
-    pointer-events: none;
-  }
+.pm-button-blueborder-dark {
+  @include pm-button-blueborder-dark;
 }
 
-.pv-button-green {
+.pv-button-green,
+.pm-button.pv-button-green {
   color: $white;
   background-color: $pv-green;
   border: 1px solid $pv-green;
@@ -236,32 +194,9 @@
   }
 }
 
-.pv-button-greenborder-dark {
-  border: 1px solid $pv-green-light;
-  color: $pv-green-light;
-  background-color: $pm-global-grey;
 
-  &:focus,
-  &:hover,
-  &:focus-within,
-  &.is-hover,
-  &:active,
-  &.is-active {
-    background-color: rgba(0, 0, 0, 0.2);
-    border-color: $pv-green-dark;
-    color: $pv-green-dark;
-  }
-  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
-  &.is-active {
-    background: rgba(0, 0, 0, 0.5);
-  }
-  &[disabled],
-  &.is-disabled {
-    background-color: $pm-global-muted;
-    color: rgba( $pm-global-grey, .3 );
-    border-color: $pm-global-border;
-    pointer-events: none;
-  }
+.pv-button-greenborder-dark {
+  @include pv-button-greenborder-dark;
 }
 
 
@@ -347,7 +282,8 @@
     @extend .pv-button-greenborder-dark;
   }
 }
-.pm-button--link {
+.pm-button--link,
+.pm-button.pm-button--link {
   color: $color-links;
   border-width: 0;
   box-shadow: none;
@@ -366,7 +302,7 @@
   }
   &[disabled],
   &.is-disabled {
-    color: rgba( $pm-global-grey, .5 );
+    color:  rgba( $pm-global-grey, .5 );
     pointer-events: none;
     text-decoration: none;
     background-color: transparent; // to avoid heriting from other classes
@@ -399,9 +335,9 @@
 }
 
 /* other aliases requested */
-.pm-button--redborder {
+.pm-button--redborder.pm-button--redborder { // for darkmode... again
   @extend .pm-button;
-  border: 1px solid $pm-global-warning;
+  border-color: $pm-global-warning;
   color: $pm-global-warning;
 }
 
diff --git a/templates/@theme-base/pm-styles/_pm-circlebar.scss b/templates/@theme-base/pm-styles/_pm-circlebar.scss
index 2bd7153..462ccd9 100644
--- a/templates/@theme-base/pm-styles/_pm-circlebar.scss
+++ b/templates/@theme-base/pm-styles/_pm-circlebar.scss
@@ -6,7 +6,7 @@ $stroke-width: 3px !default; // be careful to udpate SVG if you want to update t
   fill: transparent;
 }
 .circle-chart__background--bigger .circle-chart__background {
-  stroke: rgba($pm-global-grey, .2);
+  stroke: var(--bgcolor-input, rgba($pm-global-grey, .2));
   opacity: .4;
 }
 
diff --git a/templates/@theme-base/pm-styles/_pm-containers.scss b/templates/@theme-base/pm-styles/_pm-containers.scss
index 4723e94..e027ad7 100644
--- a/templates/@theme-base/pm-styles/_pm-containers.scss
+++ b/templates/@theme-base/pm-styles/_pm-containers.scss
@@ -3,7 +3,7 @@
  */
 .bordered,
 .bordered-container {
-  border: 1px solid $pm-global-border;
+  border: 1px solid var(--bordercolor-input, $pm-global-border);
 }
 .bordered-container {
   border-radius: $global-border-radius;
@@ -11,26 +11,33 @@
 
 .dashed,
 .dashed-container {
-  border: 1px dashed $pm-global-border;
+  border: 1px dashed var(--bordercolor-input, $pm-global-border);
 }
 .dashed-container {
   border-radius: $global-border-radius;
 }
 
 .border-bottom {
-  border-bottom: 1px solid $pm-global-border;
+  border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
 }
 .border-bottom--dashed {
   border-bottom-style: dashed;
 }
 .border-top {
-  border-top: 1px solid $pm-global-border;
+  border-top: 1px solid var(--bordercolor-input, $pm-global-border);
+}
+.border-top--dashed {
+  border-top-style: dashed;
 }
 .border-left {
-  border-left: 1px solid $pm-global-border;
+  border-left: 1px solid var(--bordercolor-input, $pm-global-border);
 }
 .border-right {
-  border-right: 1px solid $pm-global-border;
+  border-right: 1px solid var(--bordercolor-input, $pm-global-border);
+}
+
+.border-currentColor {
+  border: 1px solid currentColor;
 }
 
 .shadow-container {
@@ -46,8 +53,8 @@
 $block-info-border-width: 3px !default;
 [class*="block-info"] {
   padding: 0.5em 1.2em;
-  color: $pm-global-grey;
-  background-color: $pm-global-light;
+  color: var(--color-main-area, $pm-global-grey);
+  background-color: var(--bordercolor-input, $pm-global-light);
   border-left-width: $block-info-border-width;
   border-left-style: solid;
 }
diff --git a/templates/@theme-base/pm-styles/_pm-conversations.scss b/templates/@theme-base/pm-styles/_pm-conversations.scss
index c8ee796..2e7f3d1 100644
--- a/templates/@theme-base/pm-styles/_pm-conversations.scss
+++ b/templates/@theme-base/pm-styles/_pm-conversations.scss
@@ -4,7 +4,8 @@
 
 .items-column-list {
   width: calc( (100% + var(--width-sidebar, #{$width-sidebar}) ) * #{$conversations-column-width/1%/100} );
-  border-right: 1px solid $pm-global-border;
+  border-right: 1px solid var(--bordercolor-input, $pm-global-border);
+  background: var(--bgcolor-item-column-list, $white);
 }
 .items-column-list--mobile {
   width: 100%;
@@ -16,18 +17,32 @@
   height: calc(100vh - #{$header-height} - #{$toolbar-height} );
 }
 
+.view-column-detail {
+  background: var(--bgcolor-view-column-detail, $white);
+}
+
 .item-container,
 .item-container-row {
   padding: em(15) em(12);
-  border-bottom: 1px solid $pm-global-border;
+  border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
+  background-color: var(--bgcolor-item-column-list, $pm-global-light);
 }
 .item-container-row {
   padding: em(8) em(12);
 }
 
+.item-container,
+.item-container-row {
+  background: var(--bgcolor-item-column-list, $pm-global-light);
+}
+
 .item-is-selected,
 .item-container.active { // alias for Angular
-  background: $conversation-selected-bg;
+  background: var(--bgcolor-item-column-active, $conversation-selected-bg);
+}
+
+.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active) {
+  background: var(--bgcolor-toolbar, $white);
 }
 
 $conversation-icon-size: 4rem !default;
@@ -35,7 +50,8 @@ $conversation-icon-size: 4rem !default;
   width: $conversation-icon-size;
   height: $conversation-icon-size;
   font-size: 1.2rem;
-  border: 1px solid $pm-global-border;
+  border: 1px solid var(--bordercolor-input, $pm-global-border);
+  background-color: var(--bordercolor-input, $white);
 }
 
 .item-checkbox {
@@ -63,7 +79,7 @@ $conversation-icon-size: 4rem !default;
   // hover state of checkbox
   & + .item-icon:hover {
     background-color: $white;
-    border-color: $pm-global-border;
+    border-color: var(--bordercolor-input, $pm-global-border);
     & > .item-abbr {
       display: none;
     }
@@ -109,7 +125,7 @@ $conversation-icon-size: 4rem !default;
 }
 
 .starbutton {
-  fill: $pm-global-grey;
+  fill: var(--fillcolor-icons, $pm-global-grey);
   width: 1.6rem;
   height: 1.6rem;
   opacity: .5;
@@ -140,11 +156,11 @@ $conversation-icon-size: 4rem !default;
  * view messages
  */
 .message-container {
-  border: 1px solid $pm-global-border;
+  border: 1px solid var(--bordercolor-input, $pm-global-border);
   border-radius: $global-border-radius;
 }
 .message-header {
-  background-color: $pm-global-light;
+  background-color: var(--bgcolor-input, $pm-global-light);
   @extend .p1;
   @extend .relative;
 
@@ -158,9 +174,9 @@ $conversation-icon-size: 4rem !default;
     height: 17px;
     transform: skewX(50deg) translateX(-10px);
 
-    border-top: 1px solid $pm-global-border;
-    border-left: 1px solid $pm-global-border;
-    background-color: $pm-global-light;
+    border-top: 1px solid var(--bordercolor-input, $pm-global-border);
+    border-left: 1px solid var(--bordercolor-input, $pm-global-border);
+    background-color: var(--bgcolor-input, $pm-global-light);
   }
 
   &.is-outbound::before {
@@ -173,9 +189,9 @@ $conversation-icon-size: 4rem !default;
     height: 17px;
     transform: skewX(-50deg) translateX(10px);
 
-    border-top: 1px solid $pm-global-border;
-    border-right: 1px solid $pm-global-border;
-    background-color: $pm-global-light;
+    border-top: 1px solid var(--bordercolor-input, $pm-global-border);
+    border-right: 1px solid var(--bordercolor-input, $pm-global-border);
+    background-color: var(--bgcolor-input, $pm-global-light);
   }
 
 }
@@ -184,7 +200,7 @@ $conversation-icon-size: 4rem !default;
 .message-container.is-opened {
 
   > .message-header {
-      border-bottom: 1px solid $pm-global-border;
+      border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
   }
 
 }
@@ -196,13 +212,13 @@ $conversation-icon-size: 4rem !default;
 
 .message-expand {
   padding: 0 .5em .6em; // centers 
-  background-color: $pm-global-light;
+  background-color: var(--bgcolor-input, $pm-global-light);
   line-height: .75;
 }
 
 .message-attachments {
   @extend .p1;
-  border-top: 1px solid $pm-global-border;
+  border-top: 1px solid var(--bordercolor-input, $pm-global-border);
   font-size: 1.4rem;
 }
 
@@ -217,15 +233,23 @@ $conversation-icon-size: 4rem !default;
 }
 .message-attachmentIcon {
   width: 2.6em;
+  svg:not([class*="fill-"]) {
+    fill: var(--color-main-area, $black);
+  }
 }
+
+
 .message-attachmentInfo {
-  border-left: 1px solid $pm-global-border;
+  border-left: 1px solid var(--bordercolor-input, $pm-global-border);
   padding: .3em .7em;
 }
 .message-attachmentSize {
   font-size: 1.2rem;
   opacity: .5;
 }
+.message-infobox {
+  background: var(--bgcolor-main-area, $white);
+}
 
 .container-to {
   min-width: 3em;
@@ -249,6 +273,6 @@ $conversation-icon-size: 4rem !default;
 }
 
 .protonmail_quote {
-  border-left: 1px solid $pm-global-border;
+  border-left: 1px solid var(--bordercolor-input, $pm-global-border);
   padding-left: 1rem;
 }
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-dark-theme.scss b/templates/@theme-base/pm-styles/_pm-dark-theme.scss
new file mode 100644
index 0000000..02f2d80
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-dark-theme.scss
@@ -0,0 +1,139 @@
+/* dark-mode
+ * Come to the Dark Mode, we have wookies
+ */
+
+@import "./pm-buttons-mixins";
+
+// forms/buttons
+.pm-button {
+  @include pm-button-dark;
+}
+.pm-button-blueborder {
+  @include pm-button-blueborder-dark;
+}
+.pv-button-greenborder {
+  @include pv-button-greenborder-dark;
+}
+
+.pm-button-blue,
+.pm-button.pm-button-blue,
+.pv-button-green,
+.pm-button.pv-button-green {
+  &[disabled],
+  &.is-disabled {
+    @include button-disabled-state-dm;
+  }
+}
+
+.pm-button--link,
+a, .link,
+.pm-button.pm-button--link {
+  &:focus,
+  &:hover,
+  &:not(div):active,
+  &:active {
+    color: currentColor;
+  }
+  &[disabled],
+  &.is-disabled {
+    color:  rgba( $white, .5 );
+  }
+}
+
+
+.pm-field {
+  &[type="search"] {
+    background-image: url("#{$path-images}sprite-for-css-only.svg#css-search-white");
+  }
+}
+@if $rtl-option == true {
+  [dir="rtl"] {
+    [type="search"].pm-field {
+      background-image: url("#{$path-images}sprite-for-css-only.svg#css-search-rtl-white");
+    }
+  }
+}
+
+.pm-field[disabled] {
+  color:  rgba( $white, .5);
+  opacity: .6;
+}
+
+
+select.pm-field {
+  background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret-white");
+}
+.pm-checkbox {
+  &:indeterminate + .pm-checkbox-fakecheck {
+    background-image: url("#{$path-images}sprite-for-css-only.svg#css-dash-white");
+  }
+}
+.pm-toggle-checkbox {
+  &[aria-busy="true"] + .pm-toggle-label  {
+    &::before {
+      background-image: url(#{$path-images}loading-atom-smaller-dark.svg);
+    }
+  }
+  &[disabled] + .pm-toggle-label  {
+    background-color: transparent;
+    opacity: .6;
+  }
+}
+
+
+.searchbox-field[type="search"] {
+  background-image: none;
+}
+
+// loading
+[aria-busy="true"] {
+  background-image: url(#{$path-images}loading-atom-smaller-dark.svg);
+}
+
+button[aria-busy="true"] {
+  background-image: url(#{$path-images}loading-atom-smaller-disabled-dark.svg);
+}
+
+
+
+td[aria-busy="true"] {
+  position: relative;
+  background-image: none;
+  &::before {
+    background-image: url(#{$path-images}loading-atom-smaller-dark.svg);
+  }
+}
+
+// others
+details {
+  &[open] > summary {
+    background-image: url(#{$path-images}sprite-for-css-only.svg#css-caret-close-white);
+  }
+}
+summary {
+  background-image: url(#{$path-images}sprite-for-css-only.svg#css-caret-white);
+}
+
+
+
+// quick and dirty
+.fill-global-grey,
+.fill-black { fill: $white; } // dirty, I know
+
+
+// global
+:root {
+  --bgcolor-item-column-list: #{$pm-global-grey};
+  --bgcolor-view-column-detail: #{$pm-secondary-grey};
+  --bgcolor-main-area: #{$pm-secondary-grey};
+  --bgcolor-subnav: #{$pm-global-grey};
+  --bgcolor-toolbar: #{$pm-global-altgrey};
+  --color-subnav-link: #{$white};
+  --color-main-area: #{$white};
+  --fillcolor-icons: #{$white};
+  --bgcolor-disabled-checkboxes-radios: #{$pm-global-altgrey};
+  --bgcolor-item-column-active: #{$pm-blue-dark};
+  --bordercolor-input: #{$pm-tertiary-grey};
+  --bgcolor-input: #{$pm-global-altgrey};
+  --color-input: #{$white};
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss b/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss
index 28a7fbe..33b2b2f 100644
--- a/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss
+++ b/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss
@@ -19,6 +19,10 @@
     }
   }
 }
+
+.dropDown-logout-displayName {
+  max-width: 15em;
+}
 .dropDown-logout-email {
   font-size: 1rem;
 }
diff --git a/templates/@theme-base/pm-styles/_pm-dropdown.scss b/templates/@theme-base/pm-styles/_pm-dropdown.scss
index 7ab0fe7..77569d7 100644
--- a/templates/@theme-base/pm-styles/_pm-dropdown.scss
+++ b/templates/@theme-base/pm-styles/_pm-dropdown.scss
@@ -20,10 +20,10 @@ $dropDown-narrow-width: 8em !default;
   visibility: visible;
   transition-delay: 0s;
   width: $dropDown-width; 
-  background: $white;
+  background: var(--bgcolor-main-area, $white);
   border-radius: $global-border-radius;
   box-shadow: 0 0 16px 3px rgba(0, 0, 0, 0.16);
-  color: $pm-global-grey;
+  color: var(--color-main-area, $pm-global-grey);
 }
 
 .dropDown-content--narrow {
@@ -76,8 +76,8 @@ $dropDown-narrow-width: 8em !default;
   padding: 0; // no padding for the drop shadow :-\
   margin: 0 0 0 1em;
   
-  background: $white no-repeat;
-  background-image: radial-gradient(farthest-side at 50% 0,#acb0bf,transparent),radial-gradient(farthest-side at 50% 100%,#acb0bf,transparent);
+  background: var(--bgcolor-main-area, $white) no-repeat;
+  background-image: radial-gradient(farthest-side at 50% 0,var(--bordercolor-input, #acb0bf),transparent),radial-gradient(farthest-side at 50% 100%,var(--bordercolor-input, #acb0bf),transparent);
   background-position: 50% 0, 0 100%;
   background-size: calc(100% - 20px) 3px;
 
@@ -93,7 +93,7 @@ $dropDown-narrow-width: 8em !default;
     position: relative;
     display: block;
     z-index: 1;
-    background: $white;
+    background: var(--bgcolor-main-area, $white);
     height: 10px;
   }
 }
@@ -129,7 +129,7 @@ $dropDown-narrow-width: 8em !default;
   width: 1rem;
   height: 1rem;
   border: 1rem solid transparent;
-  border-bottom: 1rem solid $white;
+  border-bottom: 1rem solid var(--bgcolor-main-area, $white);
 }
 
 .dropDown--leftArrow .dropDown-content::before {
@@ -145,7 +145,7 @@ $dropDown-narrow-width: 8em !default;
   left: -2rem;
   bottom: 1rem;
   border: 1rem solid transparent;
-  border-right: 1rem solid $white;
+  border-right: 1rem solid var(--bgcolor-main-area, $white);
 }
 
 @if $rtl-option == true {
@@ -168,15 +168,19 @@ $dropDown-narrow-width: 8em !default;
       left: 100%;
       right: auto;
       border: 1rem solid transparent;
-      border-left: 1rem solid $white;
+      border-left: 1rem solid var(--bgcolor-main-area, $white);
     }
   }
 }
 
+.dropDown-link {
+  color: currentColor;
+}
+
 
 /* border on items */
 .dropDown-item + .dropDown-item {
-  border-top: 1px solid $pm-global-border;
+  border-top: 1px solid var(--bordercolor-input, $pm-global-border);
 }
 
 /* pagination caret */
diff --git a/templates/@theme-base/pm-styles/_pm-forms.scss b/templates/@theme-base/pm-styles/_pm-forms.scss
index 5b6fc67..c01ba51 100644
--- a/templates/@theme-base/pm-styles/_pm-forms.scss
+++ b/templates/@theme-base/pm-styles/_pm-forms.scss
@@ -1,12 +1,12 @@
 /* input design */
 ::placeholder {
-  color: rgba($pm-global-grey, .65);
+  color: var(--color-input, rgba($pm-global-grey, .65));
   font-style: italic;
 }
 
 // fix "autofill state"
 input:-webkit-autofill{
-  box-shadow: 200px 200px 100px $pm-input-background inset;
+  box-shadow: 200px 200px 100px var(--bgcolor-input, $pm-input-background) inset;
 }
 
 /* removes X in input when typing in IE/EDGE */
@@ -31,15 +31,16 @@ $field-container: 26rem !default;
 
 .pm-field {
   filter: none; // fixes Firefox autofill color
-  border: $input-defaut-border;
+  border: 1px solid var(--bordercolor-input, $input-defaut-border);
   padding: em(6) em(16); // design want 34px height (actually 35 to avoid .5px)
-  background-color: $pm-input-background;
+  background-color: var(--bgcolor-input, $pm-input-background);
   border-radius: $global-border-radius;
+  color: var(--color-input, $pm-global-grey);
   outline: 0;
   &:focus,
   &.focus,
   &:focus-within {
-    background-color: $white;
+    background-color: var(--bgcolor-main-area, $white);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
   }
   &[aria-invalid="true"]:not(:focus),
@@ -81,7 +82,7 @@ $field-container: 26rem !default;
 }
 
 select.pm-field {
-  background: $pm-input-background url("#{$path-images}sprite-for-css-only.svg#css-caret") calc(100% - 6px) 50% no-repeat;
+  background: var(--bgcolor-input, $pm-input-background) url("#{$path-images}sprite-for-css-only.svg#css-caret") calc(100% - 6px) 50% no-repeat;
   background-size: 1.5rem;
   padding-left: 1em;
   height: 3.5rem;
@@ -146,8 +147,9 @@ textarea[required].pm-field.field-pristine:invalid {
 /* checkboxes */
 .pm-checkbox-fakecheck {
   display: inline-flex;
-  border: 1px solid $pm-global-border;
+  border: 1px solid var(--bordercolor-input, $pm-global-border);
   border-radius: 2px;
+  min-width: 1.6rem;
   width: 1.6rem;
   height: 1.6rem;
   margin: auto .5rem auto 0;
@@ -170,7 +172,7 @@ textarea[required].pm-field.field-pristine:invalid {
   }
   &[disabled] + .pm-checkbox-fakecheck,
   &:indeterminate + .pm-checkbox-fakecheck {
-    background: $pm-global-muted;
+    background: var(--bgcolor-disabled-checkboxes-radios, $pm-global-muted);
   }
   &:indeterminate + .pm-checkbox-fakecheck {
       content: '';
@@ -184,7 +186,7 @@ textarea[required].pm-field.field-pristine:invalid {
 // exception for toolbar
 .pm-select-all {
   .pm-checkbox-fakecheck {
-    border: 1px solid var(--fillcolor-icons, #585C67);
+    border: 1px solid #585C67;
     background-color: var(--bgcolor-aside-link, #484E59);
   }
   .pm-checkbox-fakecheck-img {
@@ -218,7 +220,7 @@ textarea[required].pm-field.field-pristine:invalid {
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
   }
   &[disabled] + .pm-radio-fakeradio {
-    background: $pm-global-muted;
+    background: var(--bgcolor-disabled-checkboxes-radios, $pm-global-muted);
   }
 }
 
@@ -230,8 +232,8 @@ $width: 5.5em !default;
   // height: 2em;
   width: $width;
   display: inline-flex;
-  border: 1px solid $pm-global-border;
-  background: #fcfdff;
+  border: 1px solid var(--bordercolor-input, $pm-global-border);
+  background: var(--bgcolor-input, #fcfdff);
   border-radius: 2rem;
   padding: 2px;
   position: relative;
@@ -241,12 +243,12 @@ $width: 5.5em !default;
     width: calc( #{$width/2} - 2px);
     transition: transform .25s ease, background-color .25s ease, border-color .25s linear;
     border-radius: 2rem;
-    background: $pm-global-muted;
+    background: var(--bgcolor-input, $pm-global-muted);
     top: 2px;
     left: 0;
     bottom: 2px;
     transform: translateX(2px);
-    border: 1px solid $pm-global-border;
+    border: 1px solid var(--bordercolor-input, $pm-global-border);
   }
   & > .pm-toggle-label-text {
     align-self: center;
@@ -356,6 +358,12 @@ $pm-label-width: 18em !default;
   }
 }
 
+// case for forms labelled only with icons (calendar popover, etc.)
+$pm-label-icon-width: 2em !default;
+.pm-form--iconLabels .pm-label {
+  width: $pm-label-icon-width;
+}
+
 /* container address */
 .pm-field-container--address {
   margin-top: -1.6em;
diff --git a/templates/@theme-base/pm-styles/_pm-layout.scss b/templates/@theme-base/pm-styles/_pm-layout.scss
index 43ecc66..d459ad2 100644
--- a/templates/@theme-base/pm-styles/_pm-layout.scss
+++ b/templates/@theme-base/pm-styles/_pm-layout.scss
@@ -17,6 +17,6 @@ hr {
 
 kbd {
   @extend .rounded;
-  @extend .bg-global-light;
-  border: 1px solid $pm-global-border;
+  background-color: var(--bgcolor-main-area, $pm-global-light);
+  border: 1px solid var(--bordercolor-input, $pm-global-border);
 }
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-loader-animation.scss b/templates/@theme-base/pm-styles/_pm-loader-animation.scss
index 67fd7c0..be2e286 100644
--- a/templates/@theme-base/pm-styles/_pm-loader-animation.scss
+++ b/templates/@theme-base/pm-styles/_pm-loader-animation.scss
@@ -20,7 +20,7 @@ $stroke-width-big: 4 !default;
 
 .loadingAnimation-circle {
   fill: transparent;
-  stroke: $pm-global-grey;
+  stroke: var(--fillcolor-icons, $pm-global-grey);
   stroke-width: $stroke-width-big;
   transform-origin: 50%;
   will-change: transform;
diff --git a/templates/@theme-base/pm-styles/_pm-loadingcontent.scss b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss
index abffaaf..bafb0e6 100644
--- a/templates/@theme-base/pm-styles/_pm-loadingcontent.scss
+++ b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss
@@ -8,6 +8,7 @@ button[aria-busy="true"] {
     background-image: url(#{$path-images}loading-atom-smaller-disabled.svg);
     background-position: calc(100% - 4px) 50%;
     background-size: 10px 10px;
+    background-repeat: no-repeat;
 }
 
 tr[aria-busy="true"] {
diff --git a/templates/@theme-base/pm-styles/_pm-meterbar.scss b/templates/@theme-base/pm-styles/_pm-meterbar.scss
index 4798eb2..0e395ef 100644
--- a/templates/@theme-base/pm-styles/_pm-meterbar.scss
+++ b/templates/@theme-base/pm-styles/_pm-meterbar.scss
@@ -71,7 +71,7 @@ $meterbar-height: 6px !default;
   /* autoprefixer: ignore next */
   appearance: none;
   height: 1.5rem;
-  background: $pm-global-muted;
+  background: var(--bordercolor-input, $pm-global-muted);
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 
   &::-webkit-meter-bar {
diff --git a/templates/@theme-base/pm-styles/_pm-mini-calendar.scss b/templates/@theme-base/pm-styles/_pm-mini-calendar.scss
index f8bccfb..5ec5071 100644
--- a/templates/@theme-base/pm-styles/_pm-mini-calendar.scss
+++ b/templates/@theme-base/pm-styles/_pm-mini-calendar.scss
@@ -2,6 +2,7 @@ $minicalendar-day-color: $black !default;
 $minicalendar-day-color-on-dark-background: $white !default;
 $minicalendar-fontsize: 1.2rem !default;
 $minicalendar-cell-size: 2em !default;
+$minicalendar-bg-color-range-selection: #51555F !default;
 
 .minicalendar {
     font-size: $minicalendar-fontsize;
@@ -27,24 +28,16 @@ $minicalendar-cell-size: 2em !default;
 .minicalendar-days {
     display: grid;
     grid-template-columns: repeat( var(--minicalendar-days-numberOfDays, 7), 1fr);
-    grid-template-rows: repeat( var(----minicalendar-days-numberOfWeeks, 4), 1fr)
+    grid-template-rows: repeat( var(----minicalendar-days-numberOfWeeks, 4), 1fr);
+    grid-gap: 1px 0px;
 }
 
 .minicalendar-day {
-    color: $minicalendar-day-color;
+    color: var(--color-main-area, $minicalendar-day-color);
 }
 .minicalendar-icon {
     fill: $minicalendar-day-color;
 }
-.minicalendar--onDarkBackground {
-    .minicalendar-day {
-        color: $minicalendar-day-color-on-dark-background;
-    }
-    .minicalendar-icon {
-        fill: $minicalendar-day-color-on-dark-background;
-    }
-}
-
 .minicalendar-days {
     user-select: none;
 }
@@ -72,22 +65,57 @@ $minicalendar-cell-size: 2em !default;
     position: relative;
     min-width: #{$minicalendar-cell-size + 0.35em};
     min-height: #{$minicalendar-cell-size + 0.35em};
+    border-radius: 50%;
+    &:focus,
+    &:hover {
+        background: rgba($minicalendar-bg-color-range-selection, .25);
+    }
 }
 
 .minicalendar-grid--displayWeekNumber .minicalendar-day {
     min-width: $minicalendar-cell-size;
     min-height: $minicalendar-cell-size;
 }
-.minicalendar-day[aria-current="date"] {
+.minicalendar-day[aria-current="date"]::before {
+    content: attr(data-current-day);
+    speak: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    line-height: 2.3;  // check modifier below when no week displayed
+
     color: $white;
     font-weight: bold;
     background: $pm-primary-dark;
     border-radius: 50%;
 }
+
+.minicalendar-grid--displayWeekNumber .minicalendar-day {
+    &[aria-current="date"]::before {
+        line-height: 2;
+    }
+}
+
+.minicalendar--onDarkBackground {
+    .minicalendar-day {
+        color: $minicalendar-day-color-on-dark-background;
+        &:focus,
+        &:hover {
+            background: rgba($minicalendar-bg-color-range-selection, .8);
+        }
+    }
+    .minicalendar-icon {
+        fill: $minicalendar-day-color-on-dark-background;
+    }
+}
+
 .minicalendar-day[aria-pressed=true] {
-    color: $white;
-    font-weight: bold;
-    background: $pm-primary;
+     color: $white;
+     font-weight: bold;
+     background: $pm-primary;
+     border-radius: 50%;
 }
 
 $minicalendar-day-marker-size: 3px !default;
@@ -114,6 +142,30 @@ $minicalendar-day-marker-size: 3px !default;
 .minicalendar-day--range-bound {
     background: $pm-primary;
 }
-.minicalendar-day--range {
-    background: $pm-primary-light;
-}
\ No newline at end of file
+
+.minicalendar-day--range[aria-pressed=true],
+.minicalendar-day--range[aria-pressed=true]:hover,
+.minicalendar-day--range[aria-pressed=true]:focus {
+    background: $minicalendar-bg-color-range-selection;
+    border-radius: 0;
+}
+
+// ranges
+.minicalendar {
+    .minicalendar-day--range-bound-begin,
+    .minicalendar-day--range-bound-begin:hover,
+    .minicalendar-day--range-bound-begin:focus  {
+        border-top-left-radius: 40%;
+        border-bottom-left-radius: 40%;
+    }
+    .minicalendar-day--range-bound-end,
+    .minicalendar-day--range-bound-end:hover,
+    .minicalendar-day--range-bound-end:focus  {
+        border-top-right-radius: 40%;
+        border-bottom-right-radius: 40%;
+    }
+    .minicalendar-day--range-bound-begin.minicalendar-day--range-bound-end {
+        border-radius: 50%;
+    }
+}
+
diff --git a/templates/@theme-base/pm-styles/_pm-modal.scss b/templates/@theme-base/pm-styles/_pm-modal.scss
index e991ba0..f7414bc 100644
--- a/templates/@theme-base/pm-styles/_pm-modal.scss
+++ b/templates/@theme-base/pm-styles/_pm-modal.scss
@@ -3,15 +3,18 @@
  */
 /* overlay covers everything */
 $modal-width: 50% !default;
-$modal-max-width: 70rem;
+$modal-max-width: 70rem !default;
 
 $modal-breakpoint-width: 52em !default;
 $modal-breakpoint-height: 22em !default;
+$breakpoint-low-height-modal: em(500, 16) !default;
 
 $modal-max-height: 80% !default;
 
 $modal-wider-width: 70% !default;
-$modal-wider-max-width: 100rem;
+$modal-wider-max-width: 100rem !default;
+
+$modal-full-dimension: 98% !default;
 
 $modal-smaller-width: 28em !default;
 
@@ -23,7 +26,6 @@ $modal-smaller-width: 28em !default;
   left: 0;
   background: rgba( 0, 0, 0, .4 );
   z-index: 666;
-  cursor: pointer;
   animation: pm-modalOverlayIn ease .5s 1 normal ;
 }
 
@@ -33,7 +35,6 @@ $modal-smaller-width: 28em !default;
   display: flex;
   justify-content: center;
   flex-direction: column;
-  cursor: pointer;
   z-index: 666;
   -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
 }
@@ -68,11 +69,11 @@ $modal-smaller-width: 28em !default;
 
 .pm-modal {
   position: relative;
-  width: $modal-width;
+  width: $modal-max-width;
   max-height: $modal-max-height;
   max-width: $modal-max-width;
-  background: $white;
-  color: $pm-global-grey;
+  background: var(--bgcolor-main-area, $white);
+  color: var(--color-main-area, $pm-global-grey);
   padding: 0;
   overflow: hidden;
   border-radius: $global-border-radius;
@@ -120,14 +121,22 @@ $modal-smaller-width: 28em !default;
   width: $modal-wider-width;
   max-width: $modal-wider-max-width;
 }
+.pm-modal--full {
+  width: $modal-full-dimension;
+  max-width: $modal-full-dimension;
+  height: $modal-full-dimension;
+  max-height: $modal-full-dimension;
+  margin: 1%;
+}
 
 
 
 
 .pm-modalClose {
   position: absolute;
+  @extend .flex;
   right: .5rem;
-  top: .2rem;
+  top: 1rem;
   background: transparent;
   border-radius: 1em;
   color: $pm-global-grey;
@@ -137,6 +146,9 @@ $modal-smaller-width: 28em !default;
   line-height: 1;
   cursor: pointer;
 }
+.pm-modalClose-icon {
+  fill: $pm-global-grey;
+}
 // not defined, left this in case of
 // .pm-modalClose:focus,
 // .pm-modalClose:hover,
@@ -185,8 +197,8 @@ $modal-smaller-width: 28em !default;
   flex: 1 1 auto;
   padding: 0 rem(30);
 
-  background: $white no-repeat;
-  background-image: radial-gradient(farthest-side at 50% 0,#acb0bf,transparent),radial-gradient(farthest-side at 50% 100%,#acb0bf,transparent);
+  background: var(--bgcolor-main-area, $white) no-repeat;
+  background-image: radial-gradient(farthest-side at 50% 0,var(--bordercolor-input, #acb0bf),transparent),radial-gradient(farthest-side at 50% 100%,var(--bordercolor-input, #acb0bf),transparent); 
   background-position: 50% 0, 0 100%;
   background-size: calc(100% - 20px) 3px;
 }
@@ -197,7 +209,7 @@ $modal-smaller-width: 28em !default;
     position: relative;
     display: block;
     z-index: 1;
-    background: $white;
+    background: var(--bgcolor-main-area, $white);
     height: 10px;
   }
 }
@@ -216,6 +228,12 @@ $pm-label-shorter-width: 10em !default;
   width: var(--label-shorter-width, $pm-label-shorter-width);
 }
 
+@include respond-to($breakpoint-small) {
+  .pm-modal--shorterLabels .onmobile-flex-column .pm-label {
+    width: 100%;
+  }
+}
+
 // single button on right
 .pm-modalFooter [class*="pm-button"]:only-child {
   margin-left: auto;
@@ -229,6 +247,21 @@ $pm-label-shorter-width: 10em !default;
   }
 }
 
+
+@media (max-height: $breakpoint-low-height-modal) {
+  .pm-modal {
+    max-height: $modal-full-dimension;
+  }
+  .pm-modalFooter {
+    padding-bottom: 1rem;
+  }
+  .pm-modalHeader {
+    padding-top: 1rem;
+    padding-bottom: .5rem;
+  }
+}
+
+
 // small viewports
 @media (max-width: $modal-breakpoint-width) {
   .pm-modal {
@@ -241,3 +274,4 @@ $pm-label-shorter-width: 10em !default;
   }
 }
 
+
diff --git a/templates/@theme-base/pm-styles/_pm-panels.scss b/templates/@theme-base/pm-styles/_pm-panels.scss
index 89d52c0..4016245 100644
--- a/templates/@theme-base/pm-styles/_pm-panels.scss
+++ b/templates/@theme-base/pm-styles/_pm-panels.scss
@@ -7,9 +7,10 @@
   height: 36px;
   top: 19px;
   left: -12px;
-  border: 1px solid $pm-global-border;
+  border: 1px solid var(--bordercolor-input, $pm-global-border);
   border-radius: $global-border-radius;
   border-bottom-left-radius: 0;
+  background-color: var(--bgcolor-main-area, $pm-global-light);
 
   &::before {
     content: '';
@@ -20,8 +21,8 @@
     top: calc(100% + 1px);
     left: -1px;
     border: 6px solid transparent;
-    border-top: 6px solid $pm-global-border;
-    border-right: 6px solid $pm-global-border;
+    border-top: 6px solid var(--bordercolor-input, $pm-global-border);
+    border-right: 6px solid var(--bordercolor-input, $pm-global-border);
   }
 }
 
@@ -29,6 +30,10 @@
   margin: 1.6rem 2.3rem 1.6rem 5.1rem;
 }
 
+.information-panel-icon {
+  fill: var(--fillcolor-icons, $black);
+}
+
 @if $rtl-option == true {
   [dir="rtl"] {
     .information-panel-image {
@@ -38,8 +43,8 @@
         left: auto;
         right: -1px;
         border: 6px solid transparent;
-        border-top: 6px solid $pm-global-border;
-        border-left: 6px solid $pm-global-border;
+        border-top: 6px solid var(--bordercolor-input, $pm-global-border);
+        border-left: 6px solid var(--bordercolor-input, $pm-global-border);
       }
     }
     .information-panel-content {
diff --git a/templates/@theme-base/pm-styles/_pm-progress-contact.scss b/templates/@theme-base/pm-styles/_pm-progress-contact.scss
index 326c70c..eb4beff 100644
--- a/templates/@theme-base/pm-styles/_pm-progress-contact.scss
+++ b/templates/@theme-base/pm-styles/_pm-progress-contact.scss
@@ -7,7 +7,7 @@ $progress-contact-height: 6px !default;
   -ms-appearance: none;
   appearance: none;
     
-  background: $pm-global-border;
+  background: var(--bordercolor-input, $pm-global-border);
   // for Edge/IE
   color: $pm-primary;
 
@@ -15,7 +15,7 @@ $progress-contact-height: 6px !default;
   height: $progress-contact-height;
 
   &::-webkit-progress-bar {
-    background-color: $pm-global-border;
+    background-color: var(--bordercolor-input, $pm-global-border);
     border-radius: #{$progress-contact-height/2};
   }
 
diff --git a/templates/@theme-base/pm-styles/_pm-sticky-header.scss b/templates/@theme-base/pm-styles/_pm-sticky-header.scss
index c6e8fd2..c478872 100644
--- a/templates/@theme-base/pm-styles/_pm-sticky-header.scss
+++ b/templates/@theme-base/pm-styles/_pm-sticky-header.scss
@@ -10,7 +10,7 @@ $sticky-title-height: 10rem !default;
   box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
   padding: .5em .75em;
   background: inherit;
-  z-index: 9;
+  z-index: 11;
 }
 .sticky-title--onTop {
   box-shadow: none;
@@ -42,7 +42,7 @@ $sticky-title-height: 10rem !default;
 
 // not sticky on mobile
 @include respond-to($breakpoint-small) { 
-  .sticky-title {
+  .sticky-title:not(.onmobile-remain-sticky) {
     position: static;
     box-shadow: none;
   }
diff --git a/templates/@theme-base/pm-styles/_pm-subnav.scss b/templates/@theme-base/pm-styles/_pm-subnav.scss
index 6d6a1b9..7d78646 100644
--- a/templates/@theme-base/pm-styles/_pm-subnav.scss
+++ b/templates/@theme-base/pm-styles/_pm-subnav.scss
@@ -4,6 +4,7 @@
 
 .subnav {
   width: var(--width-subnav, $subnav-width);
+  background: var(--bgcolor-subnav, $pm-global-light);
 }
 .subnav-inner {
   position: -webkit-sticky;
@@ -13,7 +14,11 @@
 }
 .subnav-link {
   @extend .nodecoration;
-  @extend .color-global-grey;
+  color: var(--color-subnav-link, $pm-global-grey);
+  &:focus,
+  &:hover {
+    color: var(--color-subnav-link, $pm-global-grey);
+  }
 }
 [aria-current="true"].subnav-link {
   font-weight: bold;
diff --git a/templates/@theme-base/pm-styles/_pm-table-plans.scss b/templates/@theme-base/pm-styles/_pm-table-plans.scss
index cbe7f3e..1158f29 100644
--- a/templates/@theme-base/pm-styles/_pm-table-plans.scss
+++ b/templates/@theme-base/pm-styles/_pm-table-plans.scss
@@ -140,6 +140,10 @@ $nb-plans-max: 4 !default;
         border-radius: $global-border-radius $global-border-radius 0 0;
       }
     }
+    & tr td:nth-child(#{$i+2}),
+    & tr th:nth-child(#{$i+2}) {
+      border-left: 0;
+    }
   }
 
 }
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-table.scss b/templates/@theme-base/pm-styles/_pm-table.scss
index 3da4237..e17e38f 100644
--- a/templates/@theme-base/pm-styles/_pm-table.scss
+++ b/templates/@theme-base/pm-styles/_pm-table.scss
@@ -12,7 +12,7 @@
 .pm-simple-table td,
 .pm-simple-table th {
   padding: em(9);
-  border-bottom: 1px solid $pm-global-border;
+  border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
 }
 .pm-simple-table th:not(.pm-simple-table-row-th) {
   @extend .uppercase;
@@ -25,6 +25,14 @@
   }
 }
 
+.pm-plans-table-row--highlighted {
+  background-color: var(--bgcolor-input, $pm-global-light);
+}
+
+/* alternate bg for rows */
+.pm-simple-table--alternate-bg-row tbody tr:nth-child(odd){
+  background-color: var(--bgcolor-input, $pm-global-light);
+} 
 
 .pm-simple-table--has-actions {
   td:last-child,
diff --git a/templates/@theme-base/pm-styles/_pm-tabs.scss b/templates/@theme-base/pm-styles/_pm-tabs.scss
index f3da22d..8f60520 100644
--- a/templates/@theme-base/pm-styles/_pm-tabs.scss
+++ b/templates/@theme-base/pm-styles/_pm-tabs.scss
@@ -3,7 +3,7 @@
   padding: 0;
   @extend .unstyled;
   @extend .flex;
-  border-bottom: 1px solid $pm-global-border;
+  border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
 }
 
 .tabs-list-item {
@@ -12,14 +12,15 @@
 
 .tabs-list-link {
   @extend .flex;
-  color: $pm-global-grey;
-  border-bottom: 2px solid $pm-global-border; 
+  color: var(--color-main-area, $pm-global-grey);
+  border-bottom: 2px solid var(--bordercolor-input, $pm-global-border); 
   padding: .5em;
   @extend .nodecoration;
   @extend .relative;
   top: 1px;
   &:focus,
   &:hover {
+    color: var(--color-main-area, $pm-global-grey);
     font-weight: bold;
     @extend .nodecoration;
   }
diff --git a/templates/@theme-base/pm-styles/_pm-toolbar.scss b/templates/@theme-base/pm-styles/_pm-toolbar.scss
index 90e733b..ce06ffa 100644
--- a/templates/@theme-base/pm-styles/_pm-toolbar.scss
+++ b/templates/@theme-base/pm-styles/_pm-toolbar.scss
@@ -7,7 +7,8 @@
   border-radius: 4px 4px 0 0;
   box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2);
 }
-.toolbar-button {
+.toolbar-button,
+.pm-button.toolbar-button { // to avoid issues in darkmode
   // resets to avoid pm-button styles
   padding: unset;
   background: unset;
@@ -57,6 +58,9 @@
   color: var(--fillcolor-icons, $white);
   background: url("#{$path-images}sprite-for-css-only.svg#css-caret-white") calc(100% - 6px) 50% no-repeat;
 }
+.toolbar-select option {
+  color: $black; // for Chrome bug
+}
 
 
 @include respond-to($breakpoint-small) {
diff --git a/templates/@theme-base/pm-styles/_pm-wizard.scss b/templates/@theme-base/pm-styles/_pm-wizard.scss
index cb0b54a..85204dc 100644
--- a/templates/@theme-base/pm-styles/_pm-wizard.scss
+++ b/templates/@theme-base/pm-styles/_pm-wizard.scss
@@ -32,7 +32,7 @@ $size-current-pin: 16px !default;
 
 .wizard-item {
   
-  background: $pm-global-border;
+  background: var(--bordercolor-input, $pm-global-border);
 
   &:not(:last-child) {
     @extend .flex-item-fluid;
@@ -41,11 +41,11 @@ $size-current-pin: 16px !default;
   // positionned first element always with a aria-current/is-complete
   &:first-child {
     background: none;
-    background-image: linear-gradient(to left, $pm-global-border 0,  $pm-global-border calc(100% - #{$height-wizard/2}), transparent calc(100% - #{$height-wizard/2}) );
+    background-image: linear-gradient(to left, var(--bordercolor-input, $pm-global-border) 0,  var(--bordercolor-input, $pm-global-border) calc(100% - #{$height-wizard/2}), transparent calc(100% - #{$height-wizard/2}) );
   }
   &:last-child {
     background: none;
-    background-image: linear-gradient(to right, $pm-global-border 0,  $pm-global-border 50%, transparent 50%);
+    background-image: linear-gradient(to right, var(--bordercolor-input, $pm-global-border) 0,  var(--bordercolor-input, $pm-global-border) 50%, transparent 50%);
     &.is-complete::after {
       content: none;
     }
diff --git a/templates/@theme-base/reusable-components/_design-system-colors.scss b/templates/@theme-base/reusable-components/_design-system-colors.scss
index 0263daf..3dfeda4 100644
--- a/templates/@theme-base/reusable-components/_design-system-colors.scss
+++ b/templates/@theme-base/reusable-components/_design-system-colors.scss
@@ -36,6 +36,11 @@
   background-color: $pm-blue-light;
 }
 
+.bg-global-highlight {
+  background-color: var(--bgcolor-input, $pm-global-light);
+}
+
+
 .bg-pv-green {
   background-color: $pv-green;
 }
@@ -53,6 +58,10 @@
   background-color: $black;
 }
 
+.bg-white-dm {
+  background-color: var(--bgcolor-main-area, $white);
+}
+
 .bg-visionary {
   background-color: $visionary;
 }
@@ -71,6 +80,9 @@
 .bg-primary {
   background-color: $pm-primary;
 }
+.bg-inherit {
+  background: inherit;
+}
 
 .fill-global-grey {
   fill: $pm-global-grey;
diff --git a/templates/@theme-base/reusable-components/_design-system-config.scss b/templates/@theme-base/reusable-components/_design-system-config.scss
index 05a4265..6502e2f 100644
--- a/templates/@theme-base/reusable-components/_design-system-config.scss
+++ b/templates/@theme-base/reusable-components/_design-system-config.scss
@@ -60,6 +60,10 @@ $pm-input-background   : #fcfdff !default;
 $plan-logo-color       : #8ed60f !default;
 $conversation-selected-bg: #e3e7f6 !default;
 
+// needed for darkmode
+$pm-secondary-grey     : #2e323d !default;
+$pm-tertiary-grey      : #505560 !default; // border input 
+
 // colors
 $color-links           : $pm-primary !default;
 $color-hover           : $black !default;
@@ -72,13 +76,13 @@ $color-txt-button      : $black !default;
 $global-border-radius  : 3px !default;
 
 // inputs
-$input-defaut-border   : 1px solid $pm-global-border !default;
+$input-defaut-border   : $pm-global-border !default;
 
 // main breakpoints
 $breakpoint-large      : 1500 !default;
 $breakpoint-medium     : 910 !default;
 $breakpoint-small      : 680 !default;
-$breakpoint-tiny       : 320 !default;
+$breakpoint-tiny       : 450 !default;
 
 // RTL
 $rtl-option            : false !default;
diff --git a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss
index 2fbc591..ce68eb0 100644
--- a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss
+++ b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss
@@ -130,6 +130,9 @@ svg {
 .alignbaseline {
   vertical-align: baseline;
 }
+.alignsub {
+  vertical-align: sub;
+}
 
 /* block */
 .bl {
@@ -200,6 +203,10 @@ svg {
   }
 }
 
+.fixed {
+  position: fixed;
+}
+
 /* hardware-acceleration activation */
 .hardware-accelerated {
   @include vendor-prefix(transform, translateZ(0));
@@ -269,6 +276,9 @@ svg {
 .w90 {
   width: 90%;
 }
+.w95 {
+  width: 95%;
+}
 .w100 {
   width: 100%;
 }
@@ -534,6 +544,11 @@ $list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 2, 3 !default; // specify 2.
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
+.flex-justify-center {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
 .flex-nowrap {
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
diff --git a/templates/@theme-base/reusable-components/_design-system-responsive.scss b/templates/@theme-base/reusable-components/_design-system-responsive.scss
index a22d1f5..5acf8e5 100644
--- a/templates/@theme-base/reusable-components/_design-system-responsive.scss
+++ b/templates/@theme-base/reusable-components/_design-system-responsive.scss
@@ -43,6 +43,13 @@
   }
 
   .ontablet- {
+    &flex-column {
+      flex-direction: column;
+      & > * {
+        width: 100%;
+        flex-basis: auto;
+      }
+    }
     &w100        { width: 100%; }
     &mw100       { max-width: 100% }
   }
@@ -128,6 +135,12 @@
     &min-w100 {
       min-width: 100%;
     }
+    &w100 {
+      width: 100%;
+    }
+    &static {
+      position: static;
+    }
   }
   
 
diff --git a/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss
index 61a82f0..fe793a3 100644
--- a/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss
+++ b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss
@@ -171,6 +171,12 @@ abbr[title] {
   text-overflow: ellipsis; 
   white-space: nowrap;
 }
+.ellipsis-four-lines {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+}
 
 .uppercase {
   text-transform: uppercase;