diff --git a/docs/_data/variables/base/generic.json b/docs/_data/variables/base/generic.json
index c05cce27..49c0681b 100644
--- a/docs/_data/variables/base/generic.json
+++ b/docs/_data/variables/base/generic.json
@@ -2,7 +2,7 @@
   "by_name": {
     "$body-background-color": {
       "name": "$body-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
diff --git a/docs/_data/variables/components/breadcrumb.json b/docs/_data/variables/components/breadcrumb.json
index b16393cc..c9d0bed3 100644
--- a/docs/_data/variables/components/breadcrumb.json
+++ b/docs/_data/variables/components/breadcrumb.json
@@ -33,7 +33,7 @@
     },
     "$breadcrumb-item-separator-color": {
       "name": "$breadcrumb-item-separator-color",
-      "value": "$grey-light",
+      "value": "$border-hover",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 71%)"
diff --git a/docs/_data/variables/components/card.json b/docs/_data/variables/components/card.json
index bbba3a37..a0759387 100644
--- a/docs/_data/variables/components/card.json
+++ b/docs/_data/variables/components/card.json
@@ -9,14 +9,14 @@
     },
     "$card-background-color": {
       "name": "$card-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
     },
     "$card-shadow": {
       "name": "$card-shadow",
-      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
+      "value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
       "type": "size"
     },
     "$card-header-background-color": {
@@ -33,12 +33,12 @@
     },
     "$card-header-padding": {
       "name": "$card-header-padding",
-      "value": "0.75rem",
+      "value": "0.75rem 1rem",
       "type": "size"
     },
     "$card-header-shadow": {
       "name": "$card-header-shadow",
-      "value": "0 1px 2px rgba($black, 0.1)",
+      "value": "0 0.125em 0.25em rgba($scheme-invert, 0.1)",
       "type": "size"
     },
     "$card-header-weight": {
@@ -65,7 +65,7 @@
     },
     "$card-footer-border-top": {
       "name": "$card-footer-border-top",
-      "value": "1px solid $border",
+      "value": "1px solid $border-light",
       "type": "size"
     },
     "$card-footer-padding": {
diff --git a/docs/_data/variables/components/dropdown.json b/docs/_data/variables/components/dropdown.json
index 455b4719..c35c60ae 100644
--- a/docs/_data/variables/components/dropdown.json
+++ b/docs/_data/variables/components/dropdown.json
@@ -7,7 +7,7 @@
     },
     "$dropdown-content-background-color": {
       "name": "$dropdown-content-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
@@ -43,7 +43,7 @@
     },
     "$dropdown-content-shadow": {
       "name": "$dropdown-content-shadow",
-      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
+      "value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
       "type": "size"
     },
     "$dropdown-content-z": {
@@ -53,14 +53,14 @@
     },
     "$dropdown-item-color": {
       "name": "$dropdown-item-color",
-      "value": "$grey-dark",
+      "value": "$text",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 29%)"
     },
     "$dropdown-item-hover-color": {
       "name": "$dropdown-item-hover-color",
-      "value": "$black",
+      "value": "$scheme-invert",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 4%)"
@@ -88,10 +88,10 @@
     },
     "$dropdown-divider-background-color": {
       "name": "$dropdown-divider-background-color",
-      "value": "$border",
+      "value": "$border-light",
       "type": "variable",
       "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+      "computed_value": "hsl(0, 0%, 93%)"
     }
   },
   "list": [
diff --git a/docs/_data/variables/components/media.json b/docs/_data/variables/components/media.json
new file mode 100644
index 00000000..b7ea1b53
--- /dev/null
+++ b/docs/_data/variables/components/media.json
@@ -0,0 +1,13 @@
+{
+  "by_name": {
+    "$media-border-color": {
+      "name": "$media-border-color",
+      "value": "rgba($border, 0.5)",
+      "type": "color"
+    }
+  },
+  "list": [
+    "$media-border-color"
+  ],
+  "file_path": "components/media.sass"
+}
\ No newline at end of file
diff --git a/docs/_data/variables/components/message.json b/docs/_data/variables/components/message.json
index 33bcf249..3343adc4 100644
--- a/docs/_data/variables/components/message.json
+++ b/docs/_data/variables/components/message.json
@@ -80,7 +80,7 @@
     },
     "$message-body-pre-background-color": {
       "name": "$message-body-pre-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
@@ -100,7 +100,7 @@
       "value": "$colors",
       "type": "variable",
       "computed_type": "function",
-      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert), \"link\": ($link, $link-invert), \"info\": ($info, $info-invert), \"success\": ($success, $success-invert), \"warning\": ($warning, $warning-invert), \"danger\": ($danger, $danger-invert)), $custom-colors)"
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
diff --git a/docs/_data/variables/components/modal.json b/docs/_data/variables/components/modal.json
index dfd0b336..a2123e68 100644
--- a/docs/_data/variables/components/modal.json
+++ b/docs/_data/variables/components/modal.json
@@ -7,7 +7,7 @@
     },
     "$modal-background-background-color": {
       "name": "$modal-background-background-color",
-      "value": "rgba($black, 0.86)",
+      "value": "rgba($scheme-invert, 0.86)",
       "type": "color"
     },
     "$modal-content-width": {
@@ -107,7 +107,7 @@
     },
     "$modal-card-body-background-color": {
       "name": "$modal-card-body-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
diff --git a/docs/_data/variables/components/navbar.json b/docs/_data/variables/components/navbar.json
index a997d180..61c9fa3e 100644
--- a/docs/_data/variables/components/navbar.json
+++ b/docs/_data/variables/components/navbar.json
@@ -2,7 +2,7 @@
   "by_name": {
     "$navbar-background-color": {
       "name": "$navbar-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
@@ -46,7 +46,7 @@
     },
     "$navbar-item-color": {
       "name": "$navbar-item-color",
-      "value": "$grey-dark",
+      "value": "$text",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 29%)"
@@ -60,14 +60,14 @@
     },
     "$navbar-item-hover-background-color": {
       "name": "$navbar-item-hover-background-color",
-      "value": "$white-bis",
+      "value": "$scheme-main-bis",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 98%)"
     },
     "$navbar-item-active-color": {
       "name": "$navbar-item-active-color",
-      "value": "$black",
+      "value": "$scheme-invert",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 4%)"
@@ -130,7 +130,7 @@
     },
     "$navbar-dropdown-background-color": {
       "name": "$navbar-dropdown-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
@@ -173,12 +173,12 @@
     },
     "$navbar-dropdown-boxed-shadow": {
       "name": "$navbar-dropdown-boxed-shadow",
-      "value": "0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
+      "value": "0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1)",
       "type": "size"
     },
     "$navbar-dropdown-item-hover-color": {
       "name": "$navbar-dropdown-item-hover-color",
-      "value": "$black",
+      "value": "$scheme-invert",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 4%)"
diff --git a/docs/_data/variables/components/pagination.json b/docs/_data/variables/components/pagination.json
index 95441863..3319568f 100644
--- a/docs/_data/variables/components/pagination.json
+++ b/docs/_data/variables/components/pagination.json
@@ -2,14 +2,14 @@
   "by_name": {
     "$pagination-color": {
       "name": "$pagination-color",
-      "value": "$grey-darker",
+      "value": "$text-strong",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$pagination-border-color": {
       "name": "$pagination-border-color",
-      "value": "$grey-lighter",
+      "value": "$border",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
@@ -88,21 +88,21 @@
     },
     "$pagination-disabled-color": {
       "name": "$pagination-disabled-color",
-      "value": "$grey",
+      "value": "$text-light",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 48%)"
     },
     "$pagination-disabled-background-color": {
       "name": "$pagination-disabled-background-color",
-      "value": "$grey-lighter",
+      "value": "$border",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
     },
     "$pagination-disabled-border-color": {
       "name": "$pagination-disabled-border-color",
-      "value": "$grey-lighter",
+      "value": "$border",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
diff --git a/docs/_data/variables/components/panel.json b/docs/_data/variables/components/panel.json
index bb7d830d..e11ce06e 100644
--- a/docs/_data/variables/components/panel.json
+++ b/docs/_data/variables/components/panel.json
@@ -9,7 +9,19 @@
     },
     "$panel-item-border": {
       "name": "$panel-item-border",
-      "value": "1px solid $border",
+      "value": "1px solid $border-light",
+      "type": "size"
+    },
+    "$panel-radius": {
+      "name": "$panel-radius",
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
+    },
+    "$panel-shadow": {
+      "name": "$panel-shadow",
+      "value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
       "type": "size"
     },
     "$panel-heading-background-color": {
@@ -33,7 +45,7 @@
     },
     "$panel-heading-padding": {
       "name": "$panel-heading-padding",
-      "value": "0.5em 0.75em",
+      "value": "0.75em 1em",
       "type": "size"
     },
     "$panel-heading-radius": {
@@ -50,10 +62,10 @@
     },
     "$panel-heading-weight": {
       "name": "$panel-heading-weight",
-      "value": "$weight-light",
+      "value": "$weight-bold",
       "type": "variable",
       "computed_type": "font-weight",
-      "computed_value": "300"
+      "computed_value": "700"
     },
     "$panel-tabs-font-size": {
       "name": "$panel-tabs-font-size",
@@ -139,6 +151,8 @@
   "list": [
     "$panel-margin",
     "$panel-item-border",
+    "$panel-radius",
+    "$panel-shadow",
     "$panel-heading-background-color",
     "$panel-heading-color",
     "$panel-heading-line-height",
diff --git a/docs/_data/variables/components/tabs.json b/docs/_data/variables/components/tabs.json
index 89c40992..4d731283 100644
--- a/docs/_data/variables/components/tabs.json
+++ b/docs/_data/variables/components/tabs.json
@@ -80,7 +80,7 @@
     },
     "$tabs-boxed-link-active-background-color": {
       "name": "$tabs-boxed-link-active-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
diff --git a/docs/_data/variables/elements/box.json b/docs/_data/variables/elements/box.json
index 72a617ba..534e4986 100644
--- a/docs/_data/variables/elements/box.json
+++ b/docs/_data/variables/elements/box.json
@@ -9,7 +9,7 @@
     },
     "$box-background-color": {
       "name": "$box-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
@@ -23,7 +23,7 @@
     },
     "$box-shadow": {
       "name": "$box-shadow",
-      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
+      "value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
       "type": "size"
     },
     "$box-padding": {
@@ -33,12 +33,12 @@
     },
     "$box-link-hover-shadow": {
       "name": "$box-link-hover-shadow",
-      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px $link",
+      "value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link",
       "type": "size"
     },
     "$box-link-active-shadow": {
       "name": "$box-link-active-shadow",
-      "value": "inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link",
+      "value": "inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link",
       "type": "size"
     }
   },
diff --git a/docs/_data/variables/elements/button.json b/docs/_data/variables/elements/button.json
index 38af6ef9..4114538e 100644
--- a/docs/_data/variables/elements/button.json
+++ b/docs/_data/variables/elements/button.json
@@ -2,14 +2,14 @@
   "by_name": {
     "$button-color": {
       "name": "$button-color",
-      "value": "$grey-darker",
+      "value": "$text-strong",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$button-background-color": {
       "name": "$button-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
@@ -21,7 +21,7 @@
     },
     "$button-border-color": {
       "name": "$button-border-color",
-      "value": "$grey-lighter",
+      "value": "$border",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
@@ -33,12 +33,12 @@
     },
     "$button-padding-vertical": {
       "name": "$button-padding-vertical",
-      "value": "calc(0.375em - #{$button-border-width})",
+      "value": "calc(0.5em - #{$button-border-width})",
       "type": "size"
     },
     "$button-padding-horizontal": {
       "name": "$button-padding-horizontal",
-      "value": "0.75em",
+      "value": "1em",
       "type": "size"
     },
     "$button-hover-color": {
@@ -116,14 +116,14 @@
     },
     "$button-disabled-background-color": {
       "name": "$button-disabled-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
     },
     "$button-disabled-border-color": {
       "name": "$button-disabled-border-color",
-      "value": "$grey-lighter",
+      "value": "$border",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
@@ -140,21 +140,21 @@
     },
     "$button-static-color": {
       "name": "$button-static-color",
-      "value": "$grey",
+      "value": "$text-light",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 48%)"
     },
     "$button-static-background-color": {
       "name": "$button-static-background-color",
-      "value": "$white-ter",
+      "value": "$scheme-main-ter",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
     },
     "$button-static-border-color": {
       "name": "$button-static-border-color",
-      "value": "$grey-lighter",
+      "value": "$border",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
diff --git a/docs/_data/variables/elements/notification.json b/docs/_data/variables/elements/notification.json
index c58f09ab..0b439435 100644
--- a/docs/_data/variables/elements/notification.json
+++ b/docs/_data/variables/elements/notification.json
@@ -7,6 +7,13 @@
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
     },
+    "$notification-code-background-color": {
+      "name": "$notification-code-background-color",
+      "value": "$scheme-main",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
+    },
     "$notification-radius": {
       "name": "$notification-radius",
       "value": "$radius",
@@ -22,6 +29,7 @@
   },
   "list": [
     "$notification-background-color",
+    "$notification-code-background-color",
     "$notification-radius",
     "$notification-padding"
   ],
diff --git a/docs/_data/variables/elements/progress.json b/docs/_data/variables/elements/progress.json
index 0b68206f..5a068982 100644
--- a/docs/_data/variables/elements/progress.json
+++ b/docs/_data/variables/elements/progress.json
@@ -2,10 +2,10 @@
   "by_name": {
     "$progress-bar-background-color": {
       "name": "$progress-bar-background-color",
-      "value": "$border",
+      "value": "$border-light",
       "type": "variable",
       "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+      "computed_value": "hsl(0, 0%, 93%)"
     },
     "$progress-value-background-color": {
       "name": "$progress-value-background-color",
diff --git a/docs/_data/variables/elements/table.json b/docs/_data/variables/elements/table.json
index ce1fa994..903beb16 100644
--- a/docs/_data/variables/elements/table.json
+++ b/docs/_data/variables/elements/table.json
@@ -2,21 +2,21 @@
   "by_name": {
     "$table-color": {
       "name": "$table-color",
-      "value": "$grey-darker",
+      "value": "$text-strong",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$table-background-color": {
       "name": "$table-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
     },
     "$table-cell-border": {
       "name": "$table-cell-border",
-      "value": "1px solid $grey-lighter",
+      "value": "1px solid $border",
       "type": "size"
     },
     "$table-cell-border-width": {
@@ -77,7 +77,7 @@
     },
     "$table-row-hover-background-color": {
       "name": "$table-row-hover-background-color",
-      "value": "$white-bis",
+      "value": "$scheme-main-bis",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 98%)"
@@ -98,14 +98,14 @@
     },
     "$table-striped-row-even-background-color": {
       "name": "$table-striped-row-even-background-color",
-      "value": "$white-bis",
+      "value": "$scheme-main-bis",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 98%)"
     },
     "$table-striped-row-even-hover-background-color": {
       "name": "$table-striped-row-even-hover-background-color",
-      "value": "$white-ter",
+      "value": "$scheme-main-ter",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
diff --git a/docs/_data/variables/elements/title.json b/docs/_data/variables/elements/title.json
index 18cba2b1..4fd08a58 100644
--- a/docs/_data/variables/elements/title.json
+++ b/docs/_data/variables/elements/title.json
@@ -2,7 +2,7 @@
   "by_name": {
     "$title-color": {
       "name": "$title-color",
-      "value": "$grey-darker",
+      "value": "$text-strong",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
@@ -53,7 +53,7 @@
     },
     "$subtitle-color": {
       "name": "$subtitle-color",
-      "value": "$grey-dark",
+      "value": "$text",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 29%)"
@@ -84,7 +84,7 @@
     },
     "$subtitle-strong-color": {
       "name": "$subtitle-strong-color",
-      "value": "$grey-darker",
+      "value": "$text-strong",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
diff --git a/docs/_data/variables/form/file.json b/docs/_data/variables/form/file.json
index 37afc197..84403972 100644
--- a/docs/_data/variables/form/file.json
+++ b/docs/_data/variables/form/file.json
@@ -16,28 +16,28 @@
     },
     "$file-cta-background-color": {
       "name": "$file-cta-background-color",
-      "value": "$white-ter",
+      "value": "$scheme-main-ter",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
     },
     "$file-cta-color": {
       "name": "$file-cta-color",
-      "value": "$grey-dark",
+      "value": "$text",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 29%)"
     },
     "$file-cta-hover-color": {
       "name": "$file-cta-hover-color",
-      "value": "$grey-darker",
+      "value": "$text-strong",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$file-cta-active-color": {
       "name": "$file-cta-active-color",
-      "value": "$grey-darker",
+      "value": "$text-strong",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
diff --git a/docs/_data/variables/form/input-textarea.json b/docs/_data/variables/form/input-textarea.json
new file mode 100644
index 00000000..c82afc3e
--- /dev/null
+++ b/docs/_data/variables/form/input-textarea.json
@@ -0,0 +1,25 @@
+{
+  "by_name": {
+    "$textarea-padding": {
+      "name": "$textarea-padding",
+      "value": "$control-padding-horizontal",
+      "type": "variable"
+    },
+    "$textarea-max-height": {
+      "name": "$textarea-max-height",
+      "value": "40em",
+      "type": "size"
+    },
+    "$textarea-min-height": {
+      "name": "$textarea-min-height",
+      "value": "8em",
+      "type": "size"
+    }
+  },
+  "list": [
+    "$textarea-padding",
+    "$textarea-max-height",
+    "$textarea-min-height"
+  ],
+  "file_path": "form/input-textarea.sass"
+}
\ No newline at end of file
diff --git a/docs/_data/variables/form/shared.json b/docs/_data/variables/form/shared.json
index 11acc6b9..a0f449fb 100644
--- a/docs/_data/variables/form/shared.json
+++ b/docs/_data/variables/form/shared.json
@@ -2,21 +2,21 @@
   "by_name": {
     "$input-color": {
       "name": "$input-color",
-      "value": "$grey-darker",
+      "value": "$text-strong",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$input-background-color": {
       "name": "$input-background-color",
-      "value": "$white",
+      "value": "$scheme-main",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 100%)"
     },
     "$input-border-color": {
       "name": "$input-border-color",
-      "value": "$grey-lighter",
+      "value": "$border",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
@@ -28,7 +28,7 @@
     },
     "$input-shadow": {
       "name": "$input-shadow",
-      "value": "inset 0 1px 2px rgba($black, 0.1)",
+      "value": "inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05)",
       "type": "size"
     },
     "$input-placeholder-color": {
@@ -38,21 +38,21 @@
     },
     "$input-hover-color": {
       "name": "$input-hover-color",
-      "value": "$grey-darker",
+      "value": "$text-strong",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$input-hover-border-color": {
       "name": "$input-hover-border-color",
-      "value": "$grey-light",
+      "value": "$border-hover",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 71%)"
     },
     "$input-focus-color": {
       "name": "$input-focus-color",
-      "value": "$grey-darker",
+      "value": "$text-strong",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
@@ -109,17 +109,17 @@
     },
     "$input-icon-color": {
       "name": "$input-icon-color",
-      "value": "$grey-lighter",
+      "value": "$border",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
     },
     "$input-icon-active-color": {
       "name": "$input-icon-active-color",
-      "value": "$grey",
+      "value": "$text",
       "type": "variable",
       "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 48%)"
+      "computed_value": "hsl(0, 0%, 29%)"
     },
     "$input-radius": {
       "name": "$input-radius",
diff --git a/docs/_data/variables/form/tools.json b/docs/_data/variables/form/tools.json
index 7a5f313c..08ee1651 100644
--- a/docs/_data/variables/form/tools.json
+++ b/docs/_data/variables/form/tools.json
@@ -2,7 +2,7 @@
   "by_name": {
     "$label-color": {
       "name": "$label-color",
-      "value": "$grey-darker",
+      "value": "$text-strong",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
diff --git a/docs/_data/variables/layout/footer.json b/docs/_data/variables/layout/footer.json
index 22beb7cb..27435a3a 100644
--- a/docs/_data/variables/layout/footer.json
+++ b/docs/_data/variables/layout/footer.json
@@ -2,7 +2,7 @@
   "by_name": {
     "$footer-background-color": {
       "name": "$footer-background-color",
-      "value": "$white-bis",
+      "value": "$scheme-main-bis",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 98%)"
diff --git a/docs/_data/variables/utilities/controls.json b/docs/_data/variables/utilities/controls.json
index 89b2f93c..4ac89804 100644
--- a/docs/_data/variables/utilities/controls.json
+++ b/docs/_data/variables/utilities/controls.json
@@ -21,7 +21,7 @@
     },
     "$control-height": {
       "name": "$control-height",
-      "value": "2.25em",
+      "value": "2.5em",
       "type": "size"
     },
     "$control-line-height": {
@@ -31,12 +31,12 @@
     },
     "$control-padding-vertical": {
       "name": "$control-padding-vertical",
-      "value": "calc(0.375em - #{$control-border-width})",
+      "value": "calc(0.5em - #{$control-border-width})",
       "type": "size"
     },
     "$control-padding-horizontal": {
       "name": "$control-padding-horizontal",
-      "value": "calc(0.625em - #{$control-border-width})",
+      "value": "calc(0.75em - #{$control-border-width})",
       "type": "size"
     }
   },
diff --git a/docs/_data/variables/utilities/derived-variables.json b/docs/_data/variables/utilities/derived-variables.json
index 668d32e6..f73f76e2 100644
--- a/docs/_data/variables/utilities/derived-variables.json
+++ b/docs/_data/variables/utilities/derived-variables.json
@@ -12,14 +12,14 @@
       "value": "$cyan",
       "type": "variable",
       "computed_type": "color",
-      "computed_value": "hsl(204, 86%,  53%)"
+      "computed_value": "hsl(204, 71%,  53%)"
     },
     "$success": {
       "name": "$success",
       "value": "$green",
       "type": "variable",
       "computed_type": "color",
-      "computed_value": "hsl(141, 71%,  48%)"
+      "computed_value": "hsl(141, 53%,  53%)"
     },
     "$warning": {
       "name": "$warning",
@@ -33,7 +33,7 @@
       "value": "$red",
       "type": "variable",
       "computed_type": "color",
-      "computed_value": "hsl(348, 100%, 61%)"
+      "computed_value": "hsl(348, 86%, 61%)"
     },
     "$light": {
       "name": "$light",
@@ -108,52 +108,144 @@
     "$primary-invert": {
       "name": "$primary-invert",
       "value": "findColorInvert($primary)",
-      "type": "variable",
+      "type": "function",
       "computed_type": "color",
       "computed_value": "#fff"
     },
+    "$primary-light": {
+      "name": "$primary-light",
+      "value": "findLightColor($primary)",
+      "type": "compound"
+    },
+    "$primary-dark": {
+      "name": "$primary-dark",
+      "value": "findDarkColor($primary)",
+      "type": "compound"
+    },
     "$info-invert": {
       "name": "$info-invert",
       "value": "findColorInvert($info)",
-      "type": "variable",
+      "type": "function",
       "computed_type": "color",
       "computed_value": "#fff"
     },
+    "$info-light": {
+      "name": "$info-light",
+      "value": "findLightColor($info)",
+      "type": "compound"
+    },
+    "$info-dark": {
+      "name": "$info-dark",
+      "value": "findDarkColor($info)",
+      "type": "compound"
+    },
     "$success-invert": {
       "name": "$success-invert",
       "value": "findColorInvert($success)",
-      "type": "variable",
+      "type": "function",
       "computed_type": "color",
       "computed_value": "#fff"
     },
+    "$success-light": {
+      "name": "$success-light",
+      "value": "findLightColor($success)",
+      "type": "compound"
+    },
+    "$success-dark": {
+      "name": "$success-dark",
+      "value": "findDarkColor($success)",
+      "type": "compound"
+    },
     "$warning-invert": {
       "name": "$warning-invert",
       "value": "findColorInvert($warning)",
-      "type": "variable",
+      "type": "function",
       "computed_type": "color",
-      "computed_value": "rgba(0, 0, 0, 0.7)"
+      "computed_value": "#fff"
+    },
+    "$warning-light": {
+      "name": "$warning-light",
+      "value": "findLightColor($warning)",
+      "type": "compound"
+    },
+    "$warning-dark": {
+      "name": "$warning-dark",
+      "value": "findDarkColor($warning)",
+      "type": "compound"
     },
     "$danger-invert": {
       "name": "$danger-invert",
       "value": "findColorInvert($danger)",
-      "type": "variable",
+      "type": "function",
       "computed_type": "color",
       "computed_value": "#fff"
     },
+    "$danger-light": {
+      "name": "$danger-light",
+      "value": "findLightColor($danger)",
+      "type": "compound"
+    },
+    "$danger-dark": {
+      "name": "$danger-dark",
+      "value": "findDarkColor($danger)",
+      "type": "compound"
+    },
     "$light-invert": {
       "name": "$light-invert",
       "value": "findColorInvert($light)",
-      "type": "variable",
+      "type": "function",
       "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+      "computed_value": "#fff"
     },
     "$dark-invert": {
       "name": "$dark-invert",
       "value": "findColorInvert($dark)",
+      "type": "function",
+      "computed_type": "color",
+      "computed_value": "#fff"
+    },
+    "$scheme-main": {
+      "name": "$scheme-main",
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
+    },
+    "$scheme-main-bis": {
+      "name": "$scheme-main-bis",
+      "value": "$white-bis",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 98%)"
+    },
+    "$scheme-main-ter": {
+      "name": "$scheme-main-ter",
+      "value": "$white-ter",
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
     },
+    "$scheme-invert": {
+      "name": "$scheme-invert",
+      "value": "$black",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 4%)"
+    },
+    "$scheme-invert-bis": {
+      "name": "$scheme-invert-bis",
+      "value": "$black-bis",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 7%)"
+    },
+    "$scheme-invert-ter": {
+      "name": "$scheme-invert-ter",
+      "value": "$black-ter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 14%)"
+    },
     "$background": {
       "name": "$background",
       "value": "$white-ter",
@@ -175,6 +267,20 @@
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 71%)"
     },
+    "$border-light": {
+      "name": "$border-light",
+      "value": "$grey-lightest",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 93%)"
+    },
+    "$border-light-hover": {
+      "name": "$border-light-hover",
+      "value": "$grey-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 71%)"
+    },
     "$text": {
       "name": "$text",
       "value": "$grey-dark",
@@ -208,7 +314,7 @@
       "value": "$red",
       "type": "variable",
       "computed_type": "color",
-      "computed_value": "hsl(348, 100%, 61%)"
+      "computed_value": "hsl(348, 86%, 61%)"
     },
     "$code-background": {
       "name": "$code-background",
@@ -241,10 +347,20 @@
     "$link-invert": {
       "name": "$link-invert",
       "value": "findColorInvert($link)",
-      "type": "variable",
+      "type": "function",
       "computed_type": "color",
       "computed_value": "#fff"
     },
+    "$link-light": {
+      "name": "$link-light",
+      "value": "findLightColor($link)",
+      "type": "compound"
+    },
+    "$link-dark": {
+      "name": "$link-dark",
+      "value": "findDarkColor($link)",
+      "type": "compound"
+    },
     "$link-visited": {
       "name": "$link-visited",
       "value": "$purple",
@@ -355,7 +471,7 @@
     },
     "$colors": {
       "name": "$colors",
-      "value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert), \"link\": ($link, $link-invert), \"info\": ($info, $info-invert), \"success\": ($success, $success-invert), \"warning\": ($warning, $warning-invert), \"danger\": ($danger, $danger-invert)), $custom-colors)",
+      "value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)",
       "type": "function"
     },
     "$shades": {
@@ -386,15 +502,33 @@
     "$purple-invert",
     "$red-invert",
     "$primary-invert",
+    "$primary-light",
+    "$primary-dark",
     "$info-invert",
+    "$info-light",
+    "$info-dark",
     "$success-invert",
+    "$success-light",
+    "$success-dark",
     "$warning-invert",
+    "$warning-light",
+    "$warning-dark",
     "$danger-invert",
+    "$danger-light",
+    "$danger-dark",
     "$light-invert",
     "$dark-invert",
+    "$scheme-main",
+    "$scheme-main-bis",
+    "$scheme-main-ter",
+    "$scheme-invert",
+    "$scheme-invert-bis",
+    "$scheme-invert-ter",
     "$background",
     "$border",
     "$border-hover",
+    "$border-light",
+    "$border-light-hover",
     "$text",
     "$text-invert",
     "$text-light",
@@ -405,6 +539,8 @@
     "$pre-background",
     "$link",
     "$link-invert",
+    "$link-light",
+    "$link-dark",
     "$link-visited",
     "$link-hover",
     "$link-hover-border",
diff --git a/docs/_data/variables/utilities/initial-variables.json b/docs/_data/variables/utilities/initial-variables.json
index c602f5eb..c1c0b9c9 100644
--- a/docs/_data/variables/utilities/initial-variables.json
+++ b/docs/_data/variables/utilities/initial-variables.json
@@ -40,6 +40,11 @@
       "value": "hsl(0, 0%, 86%)",
       "type": "color"
     },
+    "$grey-lightest": {
+      "name": "$grey-lightest",
+      "value": "hsl(0, 0%, 93%)",
+      "type": "color"
+    },
     "$white-ter": {
       "name": "$white-ter",
       "value": "hsl(0, 0%, 96%)",
@@ -67,7 +72,7 @@
     },
     "$green": {
       "name": "$green",
-      "value": "hsl(141, 71%,  48%)",
+      "value": "hsl(141, 53%,  53%)",
       "type": "color"
     },
     "$turquoise": {
@@ -77,7 +82,7 @@
     },
     "$cyan": {
       "name": "$cyan",
-      "value": "hsl(204, 86%,  53%)",
+      "value": "hsl(204, 71%,  53%)",
       "type": "color"
     },
     "$blue": {
@@ -92,7 +97,7 @@
     },
     "$red": {
       "name": "$red",
-      "value": "hsl(348, 100%, 61%)",
+      "value": "hsl(348, 86%, 61%)",
       "type": "color"
     },
     "$family-sans-serif": {
@@ -255,6 +260,7 @@
     "$grey",
     "$grey-light",
     "$grey-lighter",
+    "$grey-lightest",
     "$white-ter",
     "$white-bis",
     "$white",
diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass
index c46a0298..481ab953 100644
--- a/sass/utilities/functions.sass
+++ b/sass/utilities/functions.sass
@@ -29,12 +29,12 @@
             $color-invert: nth($components, 2)
             $color-light: nth($components, 3)
             $color-dark: nth($components, 4)
-          // If only Invert and Light are provided
+            // If only Invert and Light are provided
           @else if length($components) > 2
             $color-invert: nth($components, 2)
             $color-light: nth($components, 3)
             $color-dark: findDarkColor($color-base)
-          // If only Invert is provided
+            // If only Invert is provided
           @else
             $color-invert: nth($components, 2)
             $color-light: findLightColor($color-base)