diff --git a/package-lock.json b/package-lock.json
index 44c2dab1e..e9f42673a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulaval/modul-components",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.18",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index de4aba574..c593a4f43 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulaval/modul-components",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.18",
   "description": "Component library",
   "author": "Martin Simard <martin.simard@dti.ulaval.ca>",
   "private": false,
diff --git a/src/assets/icons/.DS_Store b/src/assets/icons/.DS_Store
new file mode 100644
index 000000000..557ef6883
Binary files /dev/null and b/src/assets/icons/.DS_Store differ
diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
index 5a91d74db..3a52aae29 100644
--- a/src/components/accordion/accordion.scss
+++ b/src/components/accordion/accordion.scss
@@ -3,8 +3,8 @@ $m-accordion--icon-l-width: 12px;
 $m-accordion--icon-width: 10px;
 $m-accordion--icon-l-height: 2px;
 $m-accordion--icon-height: 1px;
-$m-accordion--border-size: 2px;
-$m-accordion--border-color: $m-color--grey-light;
+$m-accordion--border-size: $m-border-width;
+$m-accordion--border-color: $m-color--border;
 $m-accordion--color: $m-color--accent;
 
 .m-accordion {
diff --git a/src/components/datepicker/datepicker.scss b/src/components/datepicker/datepicker.scss
index 8843ab062..7682dbaad 100644
--- a/src/components/datepicker/datepicker.scss
+++ b/src/components/datepicker/datepicker.scss
@@ -62,7 +62,7 @@ $m-datepicker--item-dimension: $m-touch-size !default;
 
         &:hover,
         &:focus {
-            color: $m-color--black-grey-lighter;
+            color: $m-color--grey-darker;
         }
     }
 
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 1664eedec..18a048b91 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -146,7 +146,7 @@ $m-dialog--max-width--s: 420px !default;
 
     &__header {
         position: relative;
-        background: $m-color--black-grey;
+        background-color: var(--m-color--header-dark);
         color: $m-color--white;
         display: flex;
         align-items: center;
diff --git a/src/components/dropdown-group/dropdown-group.scss b/src/components/dropdown-group/dropdown-group.scss
index f40088be5..a254a05f2 100644
--- a/src/components/dropdown-group/dropdown-group.scss
+++ b/src/components/dropdown-group/dropdown-group.scss
@@ -1,9 +1,4 @@
 @import 'abstracts/variables';
-$m-dropdown--color-hover: $m-color--grey-lightest !default;
-$m-dropdown--color-select: $m-color--grey-lighter !default;
-$m-dropdown--color-focus: $m-color--interactive-lightest !default;
-$m-dropdown--color-active: $m-color--interactive-lightest !default;
-$m-dropdown--margin: $m-padding--xs !default;
 
 .m-dropdown-group {
     .m-dropdown-group__header {
diff --git a/src/components/dropdown/dropdown.html b/src/components/dropdown/dropdown.html
index 2796ed35d..d81c89fab 100644
--- a/src/components/dropdown/dropdown.html
+++ b/src/components/dropdown/dropdown.html
@@ -1,6 +1,6 @@
 <div class="m-dropdown"
      :class="{ 'm--is-open': open, 'm--is-disabled': disabled, 'm--is-waiting': waiting, 'm--is-filterable': filterable }"
-     :style="{ width: width, 'max-width': maxWidth }"
+     :style="{ width: inputWidth, maxWidth: inputMaxWidth }"
      ref="mDropdown">
     <m-input-style ref="mInputStyle"
                    :label="label"
@@ -10,7 +10,7 @@
                    :empty="isEmpty"
                    :error="hasError"
                    :valid="isValid"
-                   :width="width"
+                   width="100%"
                    :icon-name="iconName"
                    @mousedown="inputOnMousedown"
                    @mouseup="inputOnMouseup"
@@ -55,6 +55,7 @@
              :leave="transitionLeave"
              :padding-header="false"
              :padding-body="false"
+             :padding="false"
              :focus-management="isMqMaxS"
              :close-on-backdrop="true">
         <template slot="header" v-if="isMqMaxS && (hasLabel || filterable)">
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 0d4f8b840..24b434442 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -9,6 +9,7 @@ import DropdownItemPlugin, { MDropdownInterface, MDropdownItem, BaseDropdown, Ba
 import { MDropdownGroup } from '../dropdown-group/dropdown-group';
 import { InputState, InputStateMixin } from '../../mixins/input-state/input-state';
 import { InputPopup } from '../../mixins/input-popup/input-popup';
+import { InputWidth, InputMaxWidth } from '../../mixins/input-width/input-width';
 import { MediaQueries, MediaQueriesMixin } from '../../mixins/media-queries/media-queries';
 import MediaQueriesPlugin from '../../utils/media-queries/media-queries';
 import i18nPlugin from '../../utils/i18n/i18n';
@@ -26,7 +27,8 @@ const DROPDOWN_STYLE_TRANSITION: string = 'max-height 0.3s ease';
     mixins: [
         InputState,
         InputPopup,
-        MediaQueries
+        MediaQueries,
+        InputWidth
     ]
 })
 export class MDropdown extends BaseDropdown implements MDropdownInterface {
@@ -41,8 +43,6 @@ export class MDropdown extends BaseDropdown implements MDropdownInterface {
     public iconName: string;
     @Prop()
     public filterable: boolean;
-    @Prop({ default: DROPDOWN_MAX_WIDTH })
-    public width: string;
     @Prop()
     public textNoData: string;
     @Prop()
diff --git a/src/components/edit-window/edit-window.scss b/src/components/edit-window/edit-window.scss
index fdf492c2d..7cab7027b 100644
--- a/src/components/edit-window/edit-window.scss
+++ b/src/components/edit-window/edit-window.scss
@@ -87,7 +87,7 @@
         justify-content: space-between;
         width: 100%;
         color: $m-color--white;
-        background: $m-color--black-grey;
+        background-color: var(--m-color--header-dark);
 
         h1,
         h2,
diff --git a/src/components/icon-button/icon-button.scss b/src/components/icon-button/icon-button.scss
index bbf13fa8b..ccb39d1e8 100644
--- a/src/components/icon-button/icon-button.scss
+++ b/src/components/icon-button/icon-button.scss
@@ -53,7 +53,7 @@
             }
 
             &::before {
-                background: $m-color--black-grey-light;
+                background: $m-color--grey-dark;
             }
         }
 
diff --git a/src/components/input-style/input-style.scss b/src/components/input-style/input-style.scss
index 84aa14844..65d0f1510 100644
--- a/src/components/input-style/input-style.scss
+++ b/src/components/input-style/input-style.scss
@@ -209,7 +209,7 @@ $m-input-style--padding: 6px !default;
         margin-bottom: 4px; // Magic number
         font-size: $m-font-size;
         font-weight: $m-font-weight;
-        color: $m-color--black-grey-lighter;
+        color: $m-color--grey-darker;
         cursor: pointer;
 
         .m-icon {
diff --git a/src/components/limit-text/limit-text.ts b/src/components/limit-text/limit-text.ts
index 3951e7f38..6fd7330f8 100644
--- a/src/components/limit-text/limit-text.ts
+++ b/src/components/limit-text/limit-text.ts
@@ -30,23 +30,23 @@ export class MLimitText extends ModulVue {
     private maxHeight: number = 0;
     private overflow: boolean = false;
 
-    protected mounted() {
+    protected mounted(): void {
         Vue.nextTick(() => {
             this.computeHeight();
         });
     }
 
-    protected updated() {
+    protected updated(): void {
         this.computeHeight();
     }
 
-    private computeHeight() {
+    private computeHeight(): void {
         this.contentHeight = (this.$refs.container as HTMLElement).scrollHeight;
         this.maxHeight = (this.$refs.test as HTMLElement).clientHeight * this.lines;
         this.overflow = this.contentHeight > this.maxHeight;
     }
 
-    private get maxHeightStyle() {
+    private get maxHeightStyle(): string | undefined {
         if (this.overflow) {
             return this.propOpen ? this.contentHeight + 'px' : this.maxHeight + 'px';
         }
diff --git a/src/components/link/link.html b/src/components/link/link.html
index bc2fa7119..46ddf4587 100644
--- a/src/components/link/link.html
+++ b/src/components/link/link.html
@@ -3,6 +3,7 @@
                  :class="{ 'm--is-unvisited': isUnvisited,
                            'm--is-disabled': disabled,
                            'm--no-underline': !underline,
+                           'm--is-skin-light': isSkinLight,
                            'm--has-right-icon' : isIconPositionRight,
                            'm--has-left-icon' : !isIconPositionRight }"
                  :to="routerLinkUrl"
@@ -19,6 +20,8 @@
                  'm--is-disabled': disabled,
                  'm--no-underline': !underline,
                  'm--is-button': isButton,
+                 'm--is-text-link': isTextLink,
+                 'm--is-skin-light': isSkinLight,
                  'm--has-right-icon' : isIconPositionRight,
                  'm--has-left-icon' : !isIconPositionRight }"
        :href="propUrl"
diff --git a/src/components/link/link.scss b/src/components/link/link.scss
index 79d9b3a70..a8dede4fe 100644
--- a/src/components/link/link.scss
+++ b/src/components/link/link.scss
@@ -23,51 +23,51 @@
         }
     }
 
-    &:not(.m--is-disabled) {
+    &:not(.m--is-disabled):not(.m--is-text-link) {
         &:not(.m--no-underline) {
             .m-link__text {
                 transition: box-shadow $m-transition-duration--s ease;
-                box-shadow: 0 0 rgba($m-color--interactive, 0);
+                box-shadow: 0 0 rgba($m-color--interactive, 0); // rgba doesn't seem to work with css variables in hex value... but in this case it doesn't matter though.
             }
 
             &:not(.m--is-unvisited):visited {
-                color: $m-color--interactive-darker;
+                color: var(--m-color--interactive-darker);
             }
 
             &:hover,
             &:focus {
                 .m-link__text {
-                    box-shadow: 0 1px $m-color--interactive-light;
+                    box-shadow: 0 1px var(--m-color--interactive-light);
                 }
             }
 
             &:active {
                 .m-link__text {
-                    box-shadow: 0 1px $m-color--interactive-dark;
+                    box-shadow: 0 1px var(--m-color--interactive-dark);
                 }
             }
         }
 
         &:not(.m--is-unvisited):visited {
-            color: $m-color--interactive-darker;
+            color: var(--m-color--interactive-darker);
 
             &:hover,
             &:focus {
-                color: $m-color--interactive-light;
+                color: var(--m-color--interactive-light);
             }
 
             &:active {
-                color: $m-color--interactive-dark;
+                color: var(--m-color--interactive-dark);
             }
         }
 
         &:hover,
         &:focus {
-            color: $m-color--interactive-light;
+            color: var(--m-color--interactive-light);
         }
 
         &:active {
-            color: $m-color--interactive-dark;
+            color: var(--m-color--interactive-dark);
         }
     }
 
@@ -76,6 +76,21 @@
         cursor: default;
     }
 
+    &.m--is-text-link {
+        color: $m-color--text;
+    }
+
+    &.m--is-skin-light {
+        --m-color--interactive-darker: $m-color--white;
+        --m-color--interactive-dark: $m-color--white;
+        --m-color--interactive: $m-color--white;
+        --m-color--interactive-light: $m-color--white;
+        --m-color--interactive-lighter: $m-color--white;
+        --m-color--interactive-lightest: $m-color--white;
+
+        color: $m-color--white;
+    }
+
     &:focus {
         outline: none;
     }
diff --git a/src/components/link/link.ts b/src/components/link/link.ts
index 0ce64590e..6a9253d4d 100644
--- a/src/components/link/link.ts
+++ b/src/components/link/link.ts
@@ -10,6 +10,7 @@ import I18nPlugin from '../i18n/i18n';
 export enum MLinkMode {
     RouterLink = 'router-link',
     Link = 'link',
+    Text = 'text',
     Button = 'button'
 }
 
@@ -18,6 +19,10 @@ export enum MLinkIconPosition {
     Right = 'right'
 }
 
+export enum MLinkSkin {
+    light = 'light'
+}
+
 const ICON_NAME_DEFAULT: string = 'chevron';
 
 @WithRender
@@ -31,6 +36,7 @@ export class MLink extends ModulVue {
         validator: value =>
             value == MLinkMode.RouterLink ||
             value == MLinkMode.Link ||
+            value == MLinkMode.Text ||
             value == MLinkMode.Button
     })
     public mode: MLinkMode;
@@ -43,6 +49,11 @@ export class MLink extends ModulVue {
 
     @Prop({ default: true })
     public underline: boolean;
+    @Prop({
+        validator: value =>
+            value == MLinkSkin.light
+    })
+    public skin: MLinkSkin;
 
     @Prop()
     public target: string;
@@ -82,6 +93,14 @@ export class MLink extends ModulVue {
         return this.mode == MLinkMode.Button;
     }
 
+    private get isTextLink(): boolean {
+        return this.mode == MLinkMode.Text;
+    }
+
+    private get isSkinLight(): boolean {
+        return this.skin == MLinkSkin.light;
+    }
+
     private get isUnvisited(): boolean {
         return this.isButton ? true : this.unvisited;
     }
diff --git a/src/components/list-item/list-item.html b/src/components/list-item/list-item.html
index 7e9798ad6..adf079261 100644
--- a/src/components/list-item/list-item.html
+++ b/src/components/list-item/list-item.html
@@ -6,7 +6,8 @@
               'm--has-border-top': borderTop,
               'm--has-border-bottom': borderBottom,
               'm--has-menu': $slots['menu'],
-              'm--is-full-width': fullWidth }">
+              'm--is-full-width': fullWidth,
+              'm--is-full-height': fullHeight }">
     <div class="m-list-item__content">
         <slot></slot>
     </div>
diff --git a/src/components/list-item/list-item.scss b/src/components/list-item/list-item.scss
index 181b5a469..ede49d2d4 100644
--- a/src/components/list-item/list-item.scss
+++ b/src/components/list-item/list-item.scss
@@ -7,7 +7,7 @@
     padding-right: 0;
     padding-left: 0;
 
-    @media (min-width: $m-mq--min--s) {
+    @media (min-width: $m-mq--min--s + 1) {
         padding-right: $m-spacing;
         padding-left: $m-spacing;
     }
@@ -46,6 +46,11 @@
         padding-right: 0;
     }
 
+    &.m--is-full-height {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
     &.m--has-icon,
     &.m--has-menu,
     &.m--is-waiting {
diff --git a/src/components/list-item/list-item.ts b/src/components/list-item/list-item.ts
index a609c5da9..2a1583787 100644
--- a/src/components/list-item/list-item.ts
+++ b/src/components/list-item/list-item.ts
@@ -19,9 +19,11 @@ export class MListItem extends Vue {
     public disabled: boolean;
     @Prop()
     public waiting: boolean;
-    @Prop()
+    @Prop({ default: false })
     public fullWidth: boolean;
     @Prop({ default: false })
+    public fullHeight: boolean;
+    @Prop({ default: false })
     public borderTop: boolean;
     @Prop({ default: false })
     public borderBottom: boolean;
diff --git a/src/components/menu-item/menu-item.scss b/src/components/menu-item/menu-item.scss
index f44e26180..32a845bd0 100644
--- a/src/components/menu-item/menu-item.scss
+++ b/src/components/menu-item/menu-item.scss
@@ -48,7 +48,7 @@ $m-menu-item--color-active: $m-color--grey-lightest !default;
 
             .m-menu-item {
                 &__icon {
-                    color: $m-color--black-grey;
+                    color: $m-color--grey-darker;
                 }
             }
         }
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 1dd61e686..d7c1048bd 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -20,7 +20,7 @@ export enum MOptionsMenuSkin {
 export class MMenu extends BaseMenu implements MMenuInterface {
 
     @Prop({
-        default: MPopperPlacement.BottomStart,
+        default: MPopperPlacement.Bottom,
         validator: value =>
             value == MPopperPlacement.Bottom ||
             value == MPopperPlacement.BottomEnd ||
diff --git a/src/components/navbar-item/navbar-item.scss b/src/components/navbar-item/navbar-item.scss
index 7c0e71fb2..9d44682e5 100644
--- a/src/components/navbar-item/navbar-item.scss
+++ b/src/components/navbar-item/navbar-item.scss
@@ -90,7 +90,7 @@ a {
             a,
             button {
                 color: $m-color--white;
-                background: $m-color--black-grey-light;
+                background: $m-color--grey-dark;
             }
         }
     }
diff --git a/src/components/panel/panel.scss b/src/components/panel/panel.scss
index bf7c2a174..4425deb4f 100644
--- a/src/components/panel/panel.scss
+++ b/src/components/panel/panel.scss
@@ -20,7 +20,7 @@ $m-panel--screen--min: 640px;
     }
 
     &.m--is-skin-darker {
-        background: $m-color--black-grey;
+        background: $m-color--grey-darker;
         color: $m-color--white;
     }
 
diff --git a/src/components/radio-group/radio-group.scss b/src/components/radio-group/radio-group.scss
index ce1e7496b..935994f38 100644
--- a/src/components/radio-group/radio-group.scss
+++ b/src/components/radio-group/radio-group.scss
@@ -6,6 +6,8 @@
         margin-bottom: $m-margin--s;
         font-size: $m-font-size;
         font-weight: $m-font-weight--bold;
+        display: flex;
+        align-items: center;
     }
 
     &__body {
diff --git a/src/components/scroll-top/scroll-top.scss b/src/components/scroll-top/scroll-top.scss
index 80abf6a84..3de9eb188 100644
--- a/src/components/scroll-top/scroll-top.scss
+++ b/src/components/scroll-top/scroll-top.scss
@@ -19,7 +19,7 @@
         width: 28px;
         height: 28px;
         padding: 0;
-        background-color: $m-color--black-grey-dark;
+        background-color: $m-color--grey-darker;
         border: none;
         border-radius: $m-border-radius--s;
         opacity: 0.3;
diff --git a/src/components/textarea/textarea.html b/src/components/textarea/textarea.html
index 4ddb28b60..c43c8e680 100644
--- a/src/components/textarea/textarea.html
+++ b/src/components/textarea/textarea.html
@@ -6,7 +6,7 @@
                   'm--has-icon' : hasIcon,
                   'm--has-label': hasLabel }"
      @click="onClick"
-     :style="{ width: width, maxWidth: maxWidth }">
+     :style="{ width: inputWidth, maxWidth: inputMaxWidth }">
     <m-input-style :disabled="isDisabled"
                    :waiting="isWaiting"
                    :error="textareaError"
@@ -23,7 +23,6 @@
                   @focus="onFocus"
                   @blur="onBlur"
                   @change="onChange"
-                  @input="onInput"
                   ref="input"
                   v-model="model"
                   :style="{ maxWidth: maxWidth }"></textarea>
@@ -41,5 +40,4 @@
             {{ valueLenght }}<strong>/{{ maxlength }}</strong>
         </div>
     </div>
-
 </div>
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 06dfb3ef2..48c7a1534 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -1,7 +1,7 @@
 import { ModulVue } from '../../utils/vue/vue';
 import { PluginObject } from 'vue';
 import Component from 'vue-class-component';
-import { Prop } from 'vue-property-decorator';
+import { Prop, Watch } from 'vue-property-decorator';
 import WithRender from './textarea.html?style=./textarea.scss';
 import { TEXTAREA_NAME } from '../component-names';
 import { InputState } from '../../mixins/input-state/input-state';
@@ -9,25 +9,32 @@ import { InputManagement } from '../../mixins/input-management/input-management'
 import { KeyCode } from '../../utils/keycode/keycode';
 import InputStyle from '../input-style/input-style';
 import ValidationMesagePlugin from '../validation-message/validation-message';
+import { InputWidth, InputMaxWidth } from '../../mixins/input-width/input-width';
 
 @WithRender
 @Component({
     mixins: [
         InputState,
-        InputManagement
+        InputManagement,
+        InputWidth
     ]
 })
 export class MTextarea extends ModulVue {
     @Prop()
     public maxlength: number;
-    @Prop({ default: '100%' })
-    public width: string;
-    @Prop({ default: '420px' })
-    public maxWidth: string;
 
     private internalTextareaError: boolean = false;
     private textareaHeight: string;
 
+    protected mounted(): void {
+        this.adjustHeight();
+    }
+
+    @Watch('value')
+    private valueChanged() {
+        this.adjustHeight();
+    }
+
     private get valueLenght(): number {
         let lenght: number = this.as<InputManagement>().internalValue.length;
         if (lenght > this.maxlength) {
@@ -50,12 +57,10 @@ export class MTextarea extends ModulVue {
         return !this.textareaError && this.as<InputState>().isValid;
     }
 
-    private onInput(event): void {
+    private adjustHeight(): void {
         let el: HTMLElement = (this.$refs.input as HTMLElement);
-        setTimeout(() => {
-            el.style.height = 'auto';
-            el.style.height = el.scrollHeight + 'px';
-        });
+        el.style.height = 'auto';
+        el.style.height = el.scrollHeight + 'px';
     }
 }
 
diff --git a/src/components/textfield/textfield.html b/src/components/textfield/textfield.html
index a71280a83..34993d1a5 100644
--- a/src/components/textfield/textfield.html
+++ b/src/components/textfield/textfield.html
@@ -6,7 +6,8 @@
                 'm--has-icon' : hasIcon,
                 'm--has-label': hasLabel },
                 'm--is-type-' + inputType ]"
-     @click="onClick">
+     @click="onClick"
+     :style="{ width: inputWidth, maxWidth: inputMaxWidth }">
     <m-input-style :disabled="isDisabled"
                    :waiting="isWaiting"
                    :error="hasError"
diff --git a/src/components/textfield/textfield.ts b/src/components/textfield/textfield.ts
index 83147417e..21d560b13 100644
--- a/src/components/textfield/textfield.ts
+++ b/src/components/textfield/textfield.ts
@@ -10,6 +10,7 @@ import { InputManagement } from '../../mixins/input-management/input-management'
 import { KeyCode } from '../../utils/keycode/keycode';
 import InputStyle from '../input-style/input-style';
 import ValidationMesagePlugin from '../validation-message/validation-message';
+import { InputWidth, InputMaxWidth } from '../../mixins/input-width/input-width';
 import ButtonPlugin from '../button/button';
 
 export enum MTextfieldType {
@@ -27,7 +28,8 @@ const ICON_NAME_PASSWORD_HIDDEN: string = 'default';
 @Component({
     mixins: [
         InputState,
-        InputManagement
+        InputManagement,
+        InputWidth
     ]
 })
 export class MTextfield extends ModulVue {
@@ -44,8 +46,6 @@ export class MTextfield extends ModulVue {
     public type: MTextfieldType;
     @Prop({ default: true })
     public passwordIcon: boolean;
-    @Prop()
-    public asterisk: boolean;
 
     private passwordAsText: boolean = false;
 
diff --git a/src/mixins/input-management/input-management.ts b/src/mixins/input-management/input-management.ts
index a1a4c8002..8b6ec46db 100644
--- a/src/mixins/input-management/input-management.ts
+++ b/src/mixins/input-management/input-management.ts
@@ -18,6 +18,8 @@ export class InputManagement extends ModulVue {
     public placeholder: string;
     @Prop()
     public readonly: boolean;
+    @Prop()
+    public asterisk: boolean;
 
     public internalValue: string = '';
     private internalIsFocus: boolean = false;
diff --git a/src/mixins/input-width/input-width.ts b/src/mixins/input-width/input-width.ts
new file mode 100644
index 000000000..21a48befb
--- /dev/null
+++ b/src/mixins/input-width/input-width.ts
@@ -0,0 +1,54 @@
+import { ModulVue } from '../../utils/vue/vue';
+import { PluginObject } from 'vue';
+import Component from 'vue-class-component';
+import { Prop } from 'vue-property-decorator';
+import { KeyCode } from '../../utils/keycode/keycode';
+
+export enum InputMaxWidth {
+    None = 'none',
+    XSmall = 'x-small',
+    Small = 'small',
+    Regular = 'regular',
+    Medium = 'medium',
+    Large = 'large'
+}
+
+@Component
+export class InputWidth extends ModulVue {
+    @Prop({ default: '100%' })
+    public width: string;
+
+    @Prop({ default: InputMaxWidth.Regular })
+    public maxWidth: string;
+
+    private get inputMaxWidth(): string | undefined {
+        let maxWidth: string | undefined;
+        switch (this.maxWidth) {
+            case InputMaxWidth.None:
+                maxWidth = undefined;
+                break;
+            case InputMaxWidth.XSmall:
+                maxWidth = '72px';
+                break;
+            case InputMaxWidth.Small:
+                maxWidth = '144px';
+                break;
+            case InputMaxWidth.Regular:
+                maxWidth = '288px';
+                break;
+            case InputMaxWidth.Medium:
+                maxWidth = '608px';
+                break;
+            case InputMaxWidth.Large:
+                maxWidth = '800px';
+                break;
+            default:
+                maxWidth = this.maxWidth;
+        }
+        return maxWidth;
+    }
+
+    private get inputWidth(): string | undefined {
+        return this.width == 'none' ? undefined : this.width;
+    }
+}
diff --git a/src/styles/abstracts/_cp-color.scss b/src/styles/abstracts/_cp-color.scss
new file mode 100644
index 000000000..433a55ac1
--- /dev/null
+++ b/src/styles/abstracts/_cp-color.scss
@@ -0,0 +1,93 @@
+// ======================================================================
+//  css customs properties
+// ======================================================================
+:root {
+
+    // ======================================================================
+    //  Official color of Université Laval
+    // ======================================================================
+    --m-color--ul-blue: #09f;
+    --m-color--ul-yellow: #ffc103;
+    --m-color--ul-red: #e00413;
+
+    // ======================================================================
+    //  Seven Shades of Grey to rules them all!
+    // ======================================================================
+    --m-color--grey-darkest: #1f1f1f;
+    --m-color--grey-darker: #3d3d3d;
+    --m-color--grey-dark: #696969;
+    --m-color--grey: #929292;
+    --m-color--grey-light: #d7d7d7;
+    --m-color--grey-lighter: #f4f4f4;
+    --m-color--grey-lightest: #f9f9f9;
+
+    // ======================================================================
+    //  General color
+    // ======================================================================
+    --m-color--black: #000;
+    --m-color--text: var(--m-color--grey-darker);
+    --m-color--white: #fff;
+
+    // ======================================================================
+    //  Success colors
+    // ======================================================================
+    --m-color--success-dark: #009962;
+    --m-color--success: #00c77f;
+    --m-color--success-light: #cdf3e3;
+    --m-color--success-lightest: #eaf9f1;
+
+    // ======================================================================
+    //  Warning colors
+    // ======================================================================
+    --m-color--warning: var(--m-color--ul-yellow);
+    --m-color--warning-lightest: #fff8e6;
+
+    // ======================================================================
+    //  Error colors
+    // ======================================================================
+    --m-color--error-dark: #b3040f;
+    --m-color--error: var(--m-color--ul-red);
+    --m-color--error-lightest: #fcf2f3;
+
+    // ======================================================================
+    //  Interactive colors
+    // ======================================================================
+    --m-color--interactive-darker: #0075c3;
+    --m-color--interactive-dark: #0587e1;
+    --m-color--interactive: var(--m-color--ul-blue);
+    --m-color--interactive-light: #36adff;
+    --m-color--interactive-lighter: #6ed2ff;
+    --m-color--interactive-lightest: #dffaff;
+
+    // ======================================================================
+    //  Accent colors
+    // ======================================================================
+    --m-color--accent-dark: #ed8514;
+    --m-color--accent: #f39612;
+    --m-color--accent-light: #ffaa26;
+    --m-color--accent-lightest: #ffeecf;
+
+    // ======================================================================
+    //  Active colors
+    // ======================================================================
+    --m-color--active: var(--m-color--ul-yellow);
+
+    // ======================================================================
+    //  disabled colors
+    // ======================================================================
+    --m-color--disabled: var(--m-color--grey-lighter);
+    --m-color--disabled-light: var(--m-color--grey-lighter);
+
+    // ======================================================================
+    //  Scrollbar colors
+    // ======================================================================
+    --m-color--scrollbar: var(--m-color--grey);
+    --m-color--scrollbar-light: var(--m-color--grey-lighter);
+
+    // ======================================================================
+    //  UI colors
+    // ======================================================================
+    --m-color--border-dark: var(--m-color--grey-dark);
+    --m-color--border: var(--m-color--grey-light);
+    --m-color--header-dark: var(--m-color--grey-darkest);
+}
diff --git a/src/styles/abstracts/_cp-layout.scss b/src/styles/abstracts/_cp-layout.scss
new file mode 100644
index 000000000..a7dcbc89e
--- /dev/null
+++ b/src/styles/abstracts/_cp-layout.scss
@@ -0,0 +1,7 @@
+// ======================================================================
+//  css customs layout properties
+// ======================================================================
+:root {
+    --m-min-height-header: 88px;
+}
+
diff --git a/src/styles/abstracts/_custom-properties.scss b/src/styles/abstracts/_custom-properties.scss
new file mode 100644
index 000000000..f7734d941
--- /dev/null
+++ b/src/styles/abstracts/_custom-properties.scss
@@ -0,0 +1,3 @@
+@import
+    'cp-color',
+    'cp-layout'
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
index 3d3fdb795..397bbf42b 100644
--- a/src/styles/abstracts/_mixins.scss
+++ b/src/styles/abstracts/_mixins.scss
@@ -145,17 +145,17 @@
         > ul > li::before,
         &::before {
             border-radius: 50%;
-            border: 1px solid $m-color--black-grey-light;
+            border: 1px solid $m-color--grey-dark;
         }
 
         &::before,
         > ul > li > ul > li::before {
-            background: $m-color--black-grey-light;
+            background: $m-color--grey-dark;
         }
 
         > ul > li > ul > li::before,
         > ul > li > ul > li > ul > li::before {
-            border: 1px solid $m-color--black-grey-light;
+            border: 1px solid $m-color--grey-dark;
         }
 
         > ul > li > ul > li > ul > li > ul > li::before {
@@ -163,7 +163,7 @@
             height: 0;
             border-style: solid;
             border-width: 3px 0 3px 4px;
-            border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) $m-color--black-grey-light;
+            border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) $m-color--grey-dark;
         }
     }
 }
diff --git a/src/styles/abstracts/_var-color.scss b/src/styles/abstracts/_var-color.scss
index 74ef310a5..2415433f1 100644
--- a/src/styles/abstracts/_var-color.scss
+++ b/src/styles/abstracts/_var-color.scss
@@ -6,54 +6,43 @@ $m-color--ul-yellow: #ffc103;
 $m-color--ul-red: #e30513;
 
 // ======================================================================
-//  Black grey
-// ======================================================================
-$m-color--black-grey-darker: #232323 !default;
-$m-color--black-grey-dark: #2e2e2e !default;
-$m-color--black-grey: #3d3d3d !default;
-$m-color--black-grey-light: #4f4f4f !default;
-$m-color--black-grey-lighter: #666 !default;
-
-// ======================================================================
-//  Grey
-// ======================================================================
-$m-color--grey-darker: #999 !default;
-$m-color--grey-dark: #b0b0b0 !default;
-$m-color--grey: #dadada !default;
-$m-color--grey-light: #e8e8e8 !default;
-$m-color--grey-lighter: #f1f1f1 !default;
-$m-color--grey-lightest: #f7f7f7 !default;
+//  Seven Shades of Grey
+// ======================================================================
+$m-color--grey-darkest: #1f1f1f !default;
+$m-color--grey-darker: #3d3d3d !default;
+$m-color--grey-dark: #696969 !default;
+$m-color--grey: #929292 !default;
+$m-color--grey-light: #d7d7d7 !default;
+$m-color--grey-lighter: #f4f4f4 !default;
+$m-color--grey-lightest: #f9f9f9 !default;
 
 // ======================================================================
 //  General color
 // ======================================================================
 $m-color--black: #000;
-$m-color--text: $m-color--black-grey;
+$m-color--text: $m-color--grey-darker;
 $m-color--white: #fff;
 
 // ======================================================================
 //  Success colors
 // ======================================================================
-$m-color--success-dark: #008964 !default;
+$m-color--success-dark: #009962 !default;
 $m-color--success: #00c77f !default;
-$m-color--success-light: #abe5c3 !default;
+$m-color--success-light: #cdf3e3 !default;
 $m-color--success-lightest: #eaf9f1 !default;
 
 // ======================================================================
 //  Warning colors
 // ======================================================================
-$m-color--warning-dark: #edaf00 !default;
 $m-color--warning: $m-color--ul-yellow !default;
-$m-color--warning-light: #ffec5d !default;
-$m-color--warning-lightest: #fffdcf !default;
+$m-color--warning-lightest: #fff8e6 !default;
 
 // ======================================================================
 //  Error colors
 // ======================================================================
-$m-color--error-dark: #c00 !default;
+$m-color--error-dark: #b3040f !default;
 $m-color--error: $m-color--ul-red !default;
-$m-color--error-light: #f7081f !default;
-$m-color--error-lightest: #ffdcdc !default;
+$m-color--error-lightest: #fcf2f3 !default;
 
 // ======================================================================
 //  Interactive colors
@@ -77,15 +66,12 @@ $m-color--accent-lightest: #ffeecf !default;
 // ======================================================================
 //  Active colors
 // ======================================================================
-$m-color--active-dark: $m-color--warning-dark !default;
 $m-color--active: $m-color--ul-yellow !default;
-$m-color--active-light: $m-color--warning-light !default;
-$m-color--active-lightest: $m-color--warning-lightest !default;
 
 // ======================================================================
 //  disabled colors
 // ======================================================================
-$m-color--disabled: $m-color--grey-light !default;
+$m-color--disabled: $m-color--grey-lighter !default;
 $m-color--disabled-light: $m-color--grey-lighter !default;
 
 // ======================================================================
diff --git a/src/styles/abstracts/_var-font.scss b/src/styles/abstracts/_var-font.scss
index 8ac296461..dac07e079 100644
--- a/src/styles/abstracts/_var-font.scss
+++ b/src/styles/abstracts/_var-font.scss
@@ -34,4 +34,4 @@ $m-font-weight--light: 200 !default;
 // ======================================================================
 //  Line height
 // ======================================================================
-$m-line-height: 1.4 !default;
+$m-line-height: 1.3 !default;
diff --git a/src/styles/abstracts/_var-layout.scss b/src/styles/abstracts/_var-layout.scss
index 596125704..83cfaebb1 100644
--- a/src/styles/abstracts/_var-layout.scss
+++ b/src/styles/abstracts/_var-layout.scss
@@ -43,7 +43,3 @@ $m-spacing--m: 24px !default;
 $m-spacing: 16px !default;
 $m-spacing--s: 8px !default;
 $m-spacing--xs: 4px !default;
-
-:root {
-    --m-min-height-header: 88px;
-}
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 4d30319fd..fb828110d 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -15,7 +15,7 @@ h6,
 .m-u--h5,
 .m-u--h6 {
     font-family: $m-font-family;
-    font-weight: $m-font-weight--black;
+    font-weight: $m-font-weight--bold;
     line-height: 1.1;
 }
 
@@ -183,7 +183,7 @@ a {
         font-family: $m-font-family;
         font-size: $m-font-size--s;
         font-weight: $m-font-weight--bold;
-        background: $m-color--warning-light;
-        box-shadow: 0 0 0 2px $m-color--warning-light;
+        background: $m-color--warning-lightest;
+        box-shadow: 0 0 0 2px $m-color--warning-lightest;
     }
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 79e3a0724..5c0763aa2 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -5,6 +5,7 @@
 // ======================================================================
 @import
     'abstracts/variables',
+    'abstracts/custom-properties',
     'abstracts/var-color-calendar';
 
 // ======================================================================