From 89a8b8f208f44bef1473180dc143faafb9c65168 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Tue, 6 Dec 2022 10:46:03 +0000
Subject: [PATCH] Add elements CSS variables

---
 docs/css/bulma.css              | 570 ++++++++++++++++++++------------
 docs/cyp/elements/progress.html |  41 ++-
 sass/elements/box.scss          |  40 ++-
 sass/elements/button.scss       | 227 ++++++++-----
 sass/elements/container.scss    |  36 +-
 sass/elements/content.scss      |  95 ++++--
 sass/elements/icon.scss         |  38 ++-
 sass/elements/image.scss        |   2 +-
 sass/elements/notification.scss |  30 +-
 sass/elements/other.scss        |   6 +-
 sass/elements/progress.scss     |  45 ++-
 sass/elements/table.scss        | 100 ++++--
 sass/elements/tag.scss          |  44 ++-
 sass/elements/title.scss        |  80 +++--
 sass/themes/default.scss        |   1 +
 15 files changed, 868 insertions(+), 487 deletions(-)

diff --git a/docs/css/bulma.css b/docs/css/bulma.css
index 132d65547..bab641e33 100644
--- a/docs/css/bulma.css
+++ b/docs/css/bulma.css
@@ -486,34 +486,79 @@ table th {
 }
 
 /* Bulma Elements */
+:root {
+  --bulma-box-color: var(--bulma-text);
+  --bulma-box-background-color: var(--bulma-scheme-main);
+  --bulma-box-radius: var(--bulma-radius-large);
+  --bulma-box-shadow: var(--bulma-shadow);
+  --bulma-box-padding: 1.25rem;
+  --bulma-box-link-hover-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px var(--bulma-link);
+  --bulma-box-link-active-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px var(--bulma-link);
+}
+
 .box {
-  background-color: white;
-  border-radius: 6px;
-  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
-  color: #4a4a4a;
+  background-color: var(--bulma-box-background-color);
+  border-radius: var(--bulma-box-radius);
+  box-shadow: var(--bulma-box-shadow);
+  color: var(--bulma-box-color);
   display: block;
-  padding: 1.25rem;
+  padding: var(--bulma-box-padding);
 }
 
 a.box:hover, a.box:focus {
-  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px #485fc7;
+  box-shadow: var(--bulma-box-link-hover-shadow);
 }
 
 a.box:active {
-  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #485fc7;
+  box-shadow: var(--bulma-box-link-active-shadow);
+}
+
+:root {
+  --bulma-button-color: var(--bulma-text-strong);
+  --bulma-button-background-color: var(--bulma-scheme-main);
+  --bulma-button-family: false;
+  --bulma-button-border-color: var(--bulma-border);
+  --bulma-button-border-width: 1px;
+  --bulma-button-padding-vertical: calc( 0.5em - var(--bulma-button-border-width));
+  --bulma-button-padding-horizontal: 1em;
+  --bulma-button-hover-color: var(--bulma-link-hover);
+  --bulma-button-hover-border-color: var(--bulma-link-hover-border);
+  --bulma-button-focus-color: var(--bulma-link-focus);
+  --bulma-button-focus-border-color: var(--bulma-link-focus-border);
+  --bulma-button-focus-box-shadow-size: 0 0 0 0.125em;
+  --bulma-button-focus-box-shadow-color: rgba(72, 95, 199, 0.25);
+  --bulma-button-active-color: var(--bulma-link-active);
+  --bulma-button-active-border-color: var(--bulma-link-active-border);
+  --bulma-button-text-color: var(--bulma-text);
+  --bulma-button-text-decoration: underline;
+  --bulma-button-text-hover-background-color: var(--bulma-background);
+  --bulma-button-text-hover-color: var(--bulma-text-strong);
+  --bulma-button-ghost-background: none;
+  --bulma-button-ghost-border-color: transparent;
+  --bulma-button-ghost-color: var(--bulma-link);
+  --bulma-button-ghost-decoration: none;
+  --bulma-button-ghost-hover-color: var(--bulma-link);
+  --bulma-button-ghost-hover-decoration: underline;
+  --bulma-button-disabled-background-color: var(--bulma-scheme-main);
+  --bulma-button-disabled-border-color: var(--bulma-border);
+  --bulma-button-disabled-shadow: none;
+  --bulma-button-disabled-opacity: 0.5;
+  --bulma-button-static-color: var(--bulma-text-light);
+  --bulma-button-static-background-color: var(--bulma-scheme-main-ter);
+  --bulma-button-static-border-color: var(--bulma-border);
 }
 
 .button {
-  background-color: white;
-  border-color: #dbdbdb;
-  border-width: 1px;
-  color: #363636;
+  background-color: var(--bulma-button-background-color);
+  border-color: var(--bulma-button-border-color);
+  border-width: var(--bulma-button-border-width);
+  color: var(--bulma-button-color);
   cursor: pointer;
   justify-content: center;
-  padding-bottom: calc(0.5em - 1px);
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: calc(0.5em - 1px);
+  padding-bottom: var(--bulma-button-padding-vertical);
+  padding-left: var(--bulma-button-padding-horizontal);
+  padding-right: var(--bulma-button-padding-horizontal);
+  padding-top: var(--bulma-button-padding-vertical);
   text-align: center;
   white-space: nowrap;
 }
@@ -528,54 +573,53 @@ a.box:active {
 }
 
 .button .icon:first-child:not(:last-child) {
-  margin-left: calc(-0.5em - 1px);
-  margin-right: 0.25em;
+  margin-left: calc( calc(-0.5 * var(--bulma-button-padding-horizontal)) - var(--bulma-button-border-width));
+  margin-right: calc(var(--bulma-button-padding-horizontal) * 0.25);
 }
 
 .button .icon:last-child:not(:first-child) {
-  margin-left: 0.25em;
-  margin-right: calc(-0.5em - 1px);
+  margin-left: calc(var(--bulma-button-padding-horizontal) * 0.25);
+  margin-right: calc( calc(-0.5 * var(--bulma-button-padding-horizontal)) - var(--bulma-button-border-width));
 }
 
 .button .icon:first-child:last-child {
-  margin-left: calc( -0.5em - 1px);
-  margin-right: calc( -0.5em - 1px);
+  margin-left: calc( calc(-0.5 * var(--bulma-button-padding-horizontal)) - var(--bulma-button-border-width));
+  margin-right: calc( calc(-0.5 * var(--bulma-button-padding-horizontal)) - var(--bulma-button-border-width));
 }
 
 .button:hover, .button.is-hovered {
-  border-color: #b5b5b5;
-  color: #363636;
+  border-color: var(--bulma-button-hover-border-color);
+  color: var(--bulma-button-hover-color);
 }
 
 .button:focus, .button.is-focused {
-  border-color: #485fc7;
-  color: #363636;
+  border-color: var(--bulma-button-focus-border-color);
+  color: var(--bulma-button-focus-color);
 }
 
 .button:focus:not(:active), .button.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
+  box-shadow: var(--bulma-button-focus-box-shadow-size) var(--bulma-button-focus-box-shadow-color);
 }
 
 .button:active, .button.is-active {
-  border-color: #4a4a4a;
-  color: #363636;
+  border-color: var(--bulma-button-active-border-color);
+  color: var(--bulma-button-active-color);
 }
 
 .button.is-text {
   background-color: transparent;
   border-color: transparent;
-  color: #4a4a4a;
-  text-decoration: underline;
+  color: var(--bulma-button-text-color);
+  text-decoration: var(--bulma-button-text-decoration);
 }
 
 .button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused {
-  background-color: whitesmoke;
-  color: #363636;
+  background-color: var(--bulma-button-text-hover-background-color);
+  color: var(--bulma-button-text-hover-color);
 }
 
 .button.is-text:active, .button.is-text.is-active {
-  background-color: #e8e8e8;
-  color: #363636;
+  color: var(--bulma-button-text-hover-color);
 }
 
 .button.is-text[disabled],
@@ -586,15 +630,15 @@ fieldset[disabled] .button.is-text {
 }
 
 .button.is-ghost {
-  background: none;
-  border-color: transparent;
-  color: #485fc7;
-  text-decoration: none;
+  background: var(--bulma-button-ghost-background);
+  border-color: var(--bulma-button-ghost-border-color);
+  color: var(--bulma-button-ghost-color);
+  text-decoration: var(--bulma-button-ghost-decoration);
 }
 
 .button.is-ghost:hover, .button.is-ghost.is-hovered {
-  color: #485fc7;
-  text-decoration: underline;
+  color: var(--bulma-button-ghost-hover-color);
+  text-decoration: var(--bulma-button-ghost-hover-decoration);
 }
 
 .button.is-white {
@@ -615,7 +659,7 @@ fieldset[disabled] .button.is-text {
 }
 
 .button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+  box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(255, 255, 255, 0.25);
 }
 
 .button.is-white:active, .button.is-white.is-active {
@@ -721,7 +765,7 @@ fieldset[disabled] .button.is-white.is-inverted.is-outlined {
 }
 
 .button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25);
+  box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(10, 10, 10, 0.25);
 }
 
 .button.is-black:active, .button.is-black.is-active {
@@ -827,7 +871,7 @@ fieldset[disabled] .button.is-black.is-inverted.is-outlined {
 }
 
 .button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
+  box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(245, 245, 245, 0.25);
 }
 
 .button.is-light:active, .button.is-light.is-active {
@@ -933,7 +977,7 @@ fieldset[disabled] .button.is-light.is-inverted.is-outlined {
 }
 
 .button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25);
+  box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(54, 54, 54, 0.25);
 }
 
 .button.is-dark:active, .button.is-dark.is-active {
@@ -1039,7 +1083,7 @@ fieldset[disabled] .button.is-dark.is-inverted.is-outlined {
 }
 
 .button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
+  box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(0, 209, 178, 0.25);
 }
 
 .button.is-primary:active, .button.is-primary.is-active {
@@ -1162,7 +1206,7 @@ fieldset[disabled] .button.is-primary.is-inverted.is-outlined {
 }
 
 .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
+  box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(72, 95, 199, 0.25);
 }
 
 .button.is-link:active, .button.is-link.is-active {
@@ -1285,7 +1329,7 @@ fieldset[disabled] .button.is-link.is-inverted.is-outlined {
 }
 
 .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25);
+  box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(62, 142, 208, 0.25);
 }
 
 .button.is-info:active, .button.is-info.is-active {
@@ -1408,7 +1452,7 @@ fieldset[disabled] .button.is-info.is-inverted.is-outlined {
 }
 
 .button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25);
+  box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(72, 199, 142, 0.25);
 }
 
 .button.is-success:active, .button.is-success.is-active {
@@ -1531,7 +1575,7 @@ fieldset[disabled] .button.is-success.is-inverted.is-outlined {
 }
 
 .button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(255, 224, 138, 0.25);
+  box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(255, 224, 138, 0.25);
 }
 
 .button.is-warning:active, .button.is-warning.is-active {
@@ -1654,7 +1698,7 @@ fieldset[disabled] .button.is-warning.is-inverted.is-outlined {
 }
 
 .button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25);
+  box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(241, 70, 104, 0.25);
 }
 
 .button.is-danger:active, .button.is-danger.is-active {
@@ -1760,31 +1804,31 @@ fieldset[disabled] .button.is-danger.is-inverted.is-outlined {
 }
 
 .button.is-small {
-  font-size: 0.75rem;
+  font-size: var(--bulma-size-small);
 }
 
 .button.is-small:not(.is-rounded) {
-  border-radius: 2px;
+  border-radius: var(--bulma-radius-small);
 }
 
 .button.is-normal {
-  font-size: 1rem;
+  font-size: var(--bulma-size-normal);
 }
 
 .button.is-medium {
-  font-size: 1.25rem;
+  font-size: var(--bulma-size-medium);
 }
 
 .button.is-large {
-  font-size: 1.5rem;
+  font-size: var(--bulma-size-large);
 }
 
 .button[disabled],
 fieldset[disabled] .button {
-  background-color: white;
-  border-color: #dbdbdb;
-  box-shadow: none;
-  opacity: 0.5;
+  background-color: var(--bulma-button-disabled-background-color);
+  border-color: var(--bulma-button-disabled-border-color);
+  box-shadow: var(--bulma-button-disabled-shadow);
+  opacity: var(--bulma-button-disabled-opacity);
 }
 
 .button.is-fullwidth {
@@ -1805,17 +1849,17 @@ fieldset[disabled] .button {
 }
 
 .button.is-static {
-  background-color: whitesmoke;
-  border-color: #dbdbdb;
-  color: #7a7a7a;
+  background-color: var(--bulma-button-static-background-color);
+  border-color: var(--bulma-button-static-border-color);
+  color: var(--bulma-button-static-color);
   box-shadow: none;
   pointer-events: none;
 }
 
 .button.is-rounded {
-  border-radius: 9999px;
-  padding-left: calc(1em + 0.25em);
-  padding-right: calc(1em + 0.25em);
+  border-radius: var(--bulma-radius-rounded);
+  padding-left: calc(var(--bulma-button-padding-horizontal) + 0.25em);
+  padding-right: calc(var(--bulma-button-padding-horizontal) + 0.25em);
 }
 
 .buttons {
@@ -1842,19 +1886,19 @@ fieldset[disabled] .button {
 }
 
 .buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large) {
-  font-size: 0.75rem;
+  font-size: var(--bulma-size-small);
 }
 
 .buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large):not(.is-rounded) {
-  border-radius: 2px;
+  border-radius: var(--bulma-radius-small);
 }
 
 .buttons.are-medium .button:not(.is-small):not(.is-normal):not(.is-large) {
-  font-size: 1.25rem;
+  font-size: var(--bulma-size-medium);
 }
 
 .buttons.are-large .button:not(.is-small):not(.is-normal):not(.is-medium) {
-  font-size: 1.5rem;
+  font-size: var(--bulma-size-large);
 }
 
 .buttons.has-addons .button:not(:first-child) {
@@ -1909,36 +1953,40 @@ fieldset[disabled] .button {
 
 @media screen and (max-width: 768px) {
   .button.is-responsive.is-small {
-    font-size: 0.5625rem;
+    font-size: var(--bulma-value);
   }
   .button.is-responsive,
   .button.is-responsive.is-normal {
-    font-size: 0.65625rem;
+    font-size: var(--bulma-value);
   }
   .button.is-responsive.is-medium {
-    font-size: 0.75rem;
+    font-size: var(--bulma-value);
   }
   .button.is-responsive.is-large {
-    font-size: 1rem;
+    font-size: var(--bulma-value);
   }
 }
 
 @media screen and (min-width: 769px) and (max-width: 1023px) {
   .button.is-responsive.is-small {
-    font-size: 0.65625rem;
+    font-size: var(--bulma-value);
   }
   .button.is-responsive,
   .button.is-responsive.is-normal {
-    font-size: 0.75rem;
+    font-size: var(--bulma-value);
   }
   .button.is-responsive.is-medium {
-    font-size: 1rem;
+    font-size: var(--bulma-value);
   }
   .button.is-responsive.is-large {
-    font-size: 1.25rem;
+    font-size: var(--bulma-value);
   }
 }
 
+:root {
+  --bulma-container-offset: calc(2 * var(--bulma-gap));
+}
+
 .container {
   flex-grow: 1;
   margin: 0 auto;
@@ -1948,41 +1996,61 @@ fieldset[disabled] .button {
 
 .container.is-fluid {
   max-width: none !important;
-  padding-left: 32px;
-  padding-right: 32px;
+  padding-left: var(--bulma-gap);
+  padding-right: var(--bulma-gap);
   width: 100%;
 }
 
 @media screen and (min-width: 1024px) {
   .container {
-    max-width: 960px;
+    max-width: calc(1024px - var(--bulma-container-offset));
   }
 }
 
 @media screen and (max-width: 1215px) {
   .container.is-widescreen:not(.is-max-desktop) {
-    max-width: 1152px;
+    max-width: calc( 1216px - var(--bulma-container-offset));
   }
 }
 
 @media screen and (max-width: 1407px) {
   .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
-    max-width: 1344px;
+    max-width: calc( 1408px - var(--bulma-container-offset));
   }
 }
 
 @media screen and (min-width: 1216px) {
   .container:not(.is-max-desktop) {
-    max-width: 1152px;
+    max-width: calc( 1216px - var(--bulma-container-offset));
   }
 }
 
 @media screen and (min-width: 1408px) {
   .container:not(.is-max-desktop):not(.is-max-widescreen) {
-    max-width: 1344px;
+    max-width: calc( 1408px - var(--bulma-container-offset));
   }
 }
 
+:root {
+  --bulma-content-heading-color: var(--bulma-text-strong);
+  --bulma-content-heading-weight: var(--bulma-weight-semibold);
+  --bulma-content-heading-line-height: 1.125;
+  --bulma-content-block-margin-bottom: 1em;
+  --bulma-content-blockquote-background-color: var(--bulma-background);
+  --bulma-content-blockquote-border-left: 5px solid var(--bulma-border);
+  --bulma-content-blockquote-padding: 1.25em 1.5em;
+  --bulma-content-pre-padding: 1.25em 1.5em;
+  --bulma-content-table-cell-border: 1px solid var(--bulma-border);
+  --bulma-content-table-cell-border-width: 0 0 1px;
+  --bulma-content-table-cell-padding: 0.5em 0.75em;
+  --bulma-content-table-cell-heading-color: var(--bulma-text-strong);
+  --bulma-content-table-head-cell-border-width: 0 0 2px;
+  --bulma-content-table-head-cell-color: var(--bulma-text-strong);
+  --bulma-content-table-body-last-row-cell-border-bottom-width: 0;
+  --bulma-content-table-foot-cell-border-width: 2px 0 0;
+  --bulma-content-table-foot-cell-color: var(--bulma-text-strong);
+}
+
 .content li + li {
   margin-top: 0.25em;
 }
@@ -1994,7 +2062,7 @@ fieldset[disabled] .button {
 .content blockquote:not(:last-child),
 .content pre:not(:last-child),
 .content table:not(:last-child) {
-  margin-bottom: 1em;
+  margin-bottom: var(--bulma-content-block-margin-bottom);
 }
 
 .content h1,
@@ -2003,9 +2071,9 @@ fieldset[disabled] .button {
 .content h4,
 .content h5,
 .content h6 {
-  color: #363636;
-  font-weight: 600;
-  line-height: 1.125;
+  color: var(--bulma-content-heading-color);
+  font-weight: var(--bulma-content-heading-weight);
+  line-height: var(--bulma-content-heading-line-height);
 }
 
 .content h1 {
@@ -2051,9 +2119,9 @@ fieldset[disabled] .button {
 }
 
 .content blockquote {
-  background-color: whitesmoke;
-  border-left: 5px solid #dbdbdb;
-  padding: 1.25em 1.5em;
+  background-color: var(--bulma-content-blockquote-background-color);
+  border-left: var(--bulma-content-blockquote-border-left);
+  padding: var(--bulma-content-blockquote-padding);
 }
 
 .content ol {
@@ -2126,7 +2194,7 @@ fieldset[disabled] .button {
 .content pre {
   -webkit-overflow-scrolling: touch;
   overflow-x: auto;
-  padding: 1.25em 1.5em;
+  padding: var(--bulma-content-pre-padding);
   white-space: pre;
   word-wrap: normal;
 }
@@ -2142,14 +2210,14 @@ fieldset[disabled] .button {
 
 .content table td,
 .content table th {
-  border: 1px solid #dbdbdb;
-  border-width: 0 0 1px;
-  padding: 0.5em 0.75em;
+  border: var(--bulma-content-table-cell-border);
+  border-width: var(--bulma-content-table-cell-border-width);
+  padding: var(--bulma-content-table-cell-padding);
   vertical-align: top;
 }
 
 .content table th {
-  color: #363636;
+  color: var(--bulma-content-table-cell-heading-color);
 }
 
 .content table th:not([align]) {
@@ -2158,19 +2226,19 @@ fieldset[disabled] .button {
 
 .content table thead td,
 .content table thead th {
-  border-width: 0 0 2px;
-  color: #363636;
+  border-width: var(--bulma-content-table-head-cell-border-width);
+  color: var(--bulma-content-table-head-cell-color);
 }
 
 .content table tfoot td,
 .content table tfoot th {
-  border-width: 2px 0 0;
-  color: #363636;
+  border-width: var(--bulma-content-table-foot-cell-border-width);
+  color: var(--bulma-content-table-foot-cell-color);
 }
 
 .content table tbody tr:last-child td,
 .content table tbody tr:last-child th {
-  border-bottom-width: 0;
+  border-bottom-width: var(--bulma-content-table-body-last-row-cell-border-bottom-width);
 }
 
 .content .tabs li + li {
@@ -2178,42 +2246,50 @@ fieldset[disabled] .button {
 }
 
 .content.is-small {
-  font-size: 0.75rem;
+  font-size: var(--bulma-size-small);
 }
 
 .content.is-normal {
-  font-size: 1rem;
+  font-size: var(--bulma-size-normal);
 }
 
 .content.is-medium {
-  font-size: 1.25rem;
+  font-size: var(--bulma-size-medium);
 }
 
 .content.is-large {
-  font-size: 1.5rem;
+  font-size: var(--bulma-size-large);
+}
+
+:root {
+  --bulma-icon-dimensions: 1.5rem;
+  --bulma-icon-dimensions-small: 1rem;
+  --bulma-icon-dimensions-medium: 2rem;
+  --bulma-icon-dimensions-large: 3rem;
+  --bulma-icon-text-spacing: 0.25em;
 }
 
 .icon {
   align-items: center;
   display: inline-flex;
   justify-content: center;
-  height: 1.5rem;
-  width: 1.5rem;
+  height: var(--bulma-icon-dimensions);
+  width: var(--bulma-icon-dimensions);
 }
 
 .icon.is-small {
-  height: 1rem;
-  width: 1rem;
+  height: var(--bulma-icon-dimensions-small);
+  width: var(--bulma-icon-dimensions-small);
 }
 
 .icon.is-medium {
-  height: 2rem;
-  width: 2rem;
+  height: var(--bulma-icon-dimensions-medium);
+  width: var(--bulma-icon-dimensions-medium);
 }
 
 .icon.is-large {
-  height: 3rem;
-  width: 3rem;
+  height: var(--bulma-icon-dimensions-large);
+  width: var(--bulma-icon-dimensions-large);
 }
 
 .icon-text {
@@ -2221,7 +2297,7 @@ fieldset[disabled] .button {
   color: inherit;
   display: inline-flex;
   flex-wrap: wrap;
-  line-height: 1.5rem;
+  line-height: var(--bulma-icon-dimensions);
   vertical-align: top;
 }
 
@@ -2231,11 +2307,11 @@ fieldset[disabled] .button {
 }
 
 .icon-text .icon:not(:last-child) {
-  margin-right: 0.25em;
+  margin-right: var(--bulma-icon-text-spacing);
 }
 
 .icon-text .icon:not(:first-child) {
-  margin-left: 0.25em;
+  margin-left: var(--bulma-icon-text-spacing);
 }
 
 div.icon-text {
@@ -2254,7 +2330,7 @@ div.icon-text {
 }
 
 .image img.is-rounded {
-  border-radius: 9999px;
+  border-radius: var(--bulma-radius-rounded);
 }
 
 .image.is-fullwidth {
@@ -2377,11 +2453,20 @@ div.icon-text {
   width: 128px;
 }
 
+:root {
+  --bulma-notification-background-color: var(--bulma-background);
+  --bulma-notification-code-background-color: var(--bulma-scheme-main);
+  --bulma-notification-radius: var(--bulma-radius);
+  --bulma-notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem;
+  --bulma-notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem;
+  --bulma-notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem;
+}
+
 .notification {
-  background-color: whitesmoke;
-  border-radius: 4px;
+  background-color: var(--bulma-notification-background-color);
+  border-radius: var(--bulma-notification-radius);
   position: relative;
-  padding: 1.25rem 2.5rem 1.25rem 1.5rem;
+  padding: var(--bulma-notification-padding-ltr);
 }
 
 .notification a:not(.button):not(.dropdown-item) {
@@ -2395,7 +2480,7 @@ div.icon-text {
 
 .notification code,
 .notification pre {
-  background: white;
+  background: var(--bulma-notification-code-background-color);
 }
 
 .notification pre code {
@@ -2494,32 +2579,39 @@ div.icon-text {
   color: #cc0f35;
 }
 
+:root {
+  --bulma-progress-bar-background-color: var(--bulma-border-light);
+  --bulma-progress-value-background-color: var(--bulma-text);
+  --bulma-progress-border-radius: var(--bulma-radius-rounded);
+  --bulma-progress-indeterminate-duration: 1.5s;
+}
+
 .progress {
   -moz-appearance: none;
   -webkit-appearance: none;
   border: none;
-  border-radius: 9999px;
+  border-radius: var(--bulma-progress-border-radius);
   display: block;
-  height: 1rem;
+  height: var(--bulma-size-normal);
   overflow: hidden;
   padding: 0;
   width: 100%;
 }
 
 .progress::-webkit-progress-bar {
-  background-color: #ededed;
+  background-color: var(--bulma-progress-bar-background-color);
 }
 
 .progress::-webkit-progress-value {
-  background-color: #4a4a4a;
+  background-color: var(--bulma-progress-value-background-color);
 }
 
 .progress::-moz-progress-bar {
-  background-color: #4a4a4a;
+  background-color: var(--bulma-progress-value-background-color);
 }
 
 .progress::-ms-fill {
-  background-color: #4a4a4a;
+  background-color: var(--bulma-progress-value-background-color);
   border: none;
 }
 
@@ -2536,7 +2628,7 @@ div.icon-text {
 }
 
 .progress.is-white:indeterminate {
-  background-image: linear-gradient(to right, white 30%, #ededed 30%);
+  background-image: linear-gradient(to right, white 30%, var(--bulma-progress-bar-background-color) 30%);
 }
 
 .progress.is-black::-webkit-progress-value {
@@ -2552,7 +2644,7 @@ div.icon-text {
 }
 
 .progress.is-black:indeterminate {
-  background-image: linear-gradient(to right, #0a0a0a 30%, #ededed 30%);
+  background-image: linear-gradient(to right, #0a0a0a 30%, var(--bulma-progress-bar-background-color) 30%);
 }
 
 .progress.is-light::-webkit-progress-value {
@@ -2568,7 +2660,7 @@ div.icon-text {
 }
 
 .progress.is-light:indeterminate {
-  background-image: linear-gradient(to right, whitesmoke 30%, #ededed 30%);
+  background-image: linear-gradient(to right, whitesmoke 30%, var(--bulma-progress-bar-background-color) 30%);
 }
 
 .progress.is-dark::-webkit-progress-value {
@@ -2584,7 +2676,7 @@ div.icon-text {
 }
 
 .progress.is-dark:indeterminate {
-  background-image: linear-gradient(to right, #363636 30%, #ededed 30%);
+  background-image: linear-gradient(to right, #363636 30%, var(--bulma-progress-bar-background-color) 30%);
 }
 
 .progress.is-primary::-webkit-progress-value {
@@ -2600,7 +2692,7 @@ div.icon-text {
 }
 
 .progress.is-primary:indeterminate {
-  background-image: linear-gradient(to right, #00d1b2 30%, #ededed 30%);
+  background-image: linear-gradient(to right, #00d1b2 30%, var(--bulma-progress-bar-background-color) 30%);
 }
 
 .progress.is-link::-webkit-progress-value {
@@ -2616,7 +2708,7 @@ div.icon-text {
 }
 
 .progress.is-link:indeterminate {
-  background-image: linear-gradient(to right, #485fc7 30%, #ededed 30%);
+  background-image: linear-gradient(to right, #485fc7 30%, var(--bulma-progress-bar-background-color) 30%);
 }
 
 .progress.is-info::-webkit-progress-value {
@@ -2632,7 +2724,7 @@ div.icon-text {
 }
 
 .progress.is-info:indeterminate {
-  background-image: linear-gradient(to right, #3e8ed0 30%, #ededed 30%);
+  background-image: linear-gradient(to right, #3e8ed0 30%, var(--bulma-progress-bar-background-color) 30%);
 }
 
 .progress.is-success::-webkit-progress-value {
@@ -2648,7 +2740,7 @@ div.icon-text {
 }
 
 .progress.is-success:indeterminate {
-  background-image: linear-gradient(to right, #48c78e 30%, #ededed 30%);
+  background-image: linear-gradient(to right, #48c78e 30%, var(--bulma-progress-bar-background-color) 30%);
 }
 
 .progress.is-warning::-webkit-progress-value {
@@ -2664,7 +2756,7 @@ div.icon-text {
 }
 
 .progress.is-warning:indeterminate {
-  background-image: linear-gradient(to right, #ffe08a 30%, #ededed 30%);
+  background-image: linear-gradient(to right, #ffe08a 30%, var(--bulma-progress-bar-background-color) 30%);
 }
 
 .progress.is-danger::-webkit-progress-value {
@@ -2680,16 +2772,16 @@ div.icon-text {
 }
 
 .progress.is-danger:indeterminate {
-  background-image: linear-gradient(to right, #f14668 30%, #ededed 30%);
+  background-image: linear-gradient(to right, #f14668 30%, var(--bulma-progress-bar-background-color) 30%);
 }
 
 .progress:indeterminate {
-  animation-duration: 1.5s;
+  animation-duration: var(--bulma-progress-indeterminate-duration);
   animation-iteration-count: infinite;
   animation-name: moveIndeterminate;
   animation-timing-function: linear;
-  background-color: #ededed;
-  background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
+  background-color: var(--bulma-progress-bar-background-color);
+  background-image: linear-gradient(to right, var(--bulma-text) 30%, var(--bulma-progress-bar-background-color) 30%);
   background-position: top left;
   background-repeat: no-repeat;
   background-size: 150% 150%;
@@ -2708,15 +2800,15 @@ div.icon-text {
 }
 
 .progress.is-small {
-  height: 0.75rem;
+  height: var(--bulma-size-small);
 }
 
 .progress.is-medium {
-  height: 1.25rem;
+  height: var(--bulma-size-medium);
 }
 
 .progress.is-large {
-  height: 1.5rem;
+  height: var(--bulma-size-large);
 }
 
 @keyframes moveIndeterminate {
@@ -2728,16 +2820,38 @@ div.icon-text {
   }
 }
 
+:root {
+  --bulma-table-color: var(--bulma-text-strong);
+  --bulma-table-background-color: var(--bulma-scheme-main);
+  --bulma-table-cell-border: 1px solid var(--bulma-border);
+  --bulma-table-cell-border-width: 0 0 1px;
+  --bulma-table-cell-padding: 0.5em 0.75em;
+  --bulma-table-cell-heading-color: var(--bulma-text-strong);
+  --bulma-table-cell-text-align: left;
+  --bulma-table-head-cell-border-width: 0 0 2px;
+  --bulma-table-head-cell-color: var(--bulma-text-strong);
+  --bulma-table-foot-cell-border-width: 2px 0 0;
+  --bulma-table-foot-cell-color: var(--bulma-text-strong);
+  --bulma-table-head-background-color: transparent;
+  --bulma-table-body-background-color: transparent;
+  --bulma-table-foot-background-color: transparent;
+  --bulma-table-row-hover-background-color: var(--bulma-scheme-main-bis);
+  --bulma-table-row-active-background-color: var(--bulma-primary);
+  --bulma-table-row-active-color: var(--bulma-primary-invert);
+  --bulma-table-striped-row-even-background-color: var(--bulma-scheme-main-bis);
+  --bulma-table-striped-row-even-hover-background-color: var(--bulma-scheme-main-ter);
+}
+
 .table {
-  background-color: white;
-  color: #363636;
+  background-color: var(--bulma-table-background-color);
+  color: var(--bulma-table-color);
 }
 
 .table td,
 .table th {
-  border: 1px solid #dbdbdb;
-  border-width: 0 0 1px;
-  padding: 0.5em 0.75em;
+  border: var(--bulma-table-cell-border);
+  border-width: var(--bulma-table-cell-border-width);
+  padding: var(--bulma-table-cell-padding);
   vertical-align: top;
 }
 
@@ -2819,8 +2933,8 @@ div.icon-text {
 
 .table td.is-selected,
 .table th.is-selected {
-  background-color: #00d1b2;
-  color: #fff;
+  background-color: var(--bulma-table-row-active-background-color);
+  color: var(--bulma-table-row-active-color);
 }
 
 .table td.is-selected a,
@@ -2836,16 +2950,16 @@ div.icon-text {
 }
 
 .table th {
-  color: #363636;
+  color: var(--bulma-table-cell-heading-color);
 }
 
 .table th:not([align]) {
-  text-align: left;
+  text-align: var(--bulma-table-cell-text-align);
 }
 
 .table tr.is-selected {
-  background-color: #00d1b2;
-  color: #fff;
+  background-color: var(--bulma-table-row-active-background-color);
+  color: var(--bulma-table-row-active-color);
 }
 
 .table tr.is-selected a,
@@ -2855,32 +2969,32 @@ div.icon-text {
 
 .table tr.is-selected td,
 .table tr.is-selected th {
-  border-color: #fff;
+  border-color: var(--bulma-table-row-active-color);
   color: currentColor;
 }
 
 .table thead {
-  background-color: transparent;
+  background-color: var(--bulma-table-head-background-color);
 }
 
 .table thead td,
 .table thead th {
-  border-width: 0 0 2px;
-  color: #363636;
+  border-width: var(--bulma-table-head-cell-border-width);
+  color: var(--bulma-table-head-cell-color);
 }
 
 .table tfoot {
-  background-color: transparent;
+  background-color: var(--bulma-table-foot-background-color);
 }
 
 .table tfoot td,
 .table tfoot th {
-  border-width: 2px 0 0;
-  color: #363636;
+  border-width: var(--bulma-table-foot-cell-border-width);
+  color: var(--bulma-table-foot-cell-color);
 }
 
 .table tbody {
-  background-color: transparent;
+  background-color: var(--bulma-table-body-background-color);
 }
 
 .table tbody tr:last-child td,
@@ -2903,15 +3017,15 @@ div.icon-text {
 }
 
 .table.is-hoverable tbody tr:not(.is-selected):hover {
-  background-color: #fafafa;
+  background-color: var(--bulma-table-row-hover-background-color);
 }
 
 .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
-  background-color: #fafafa;
+  background-color: var(--bulma-table-row-hover-background-color);
 }
 
 .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
-  background-color: whitesmoke;
+  background-color: var(--bulma-table-striped-row-even-hover-background-color);
 }
 
 .table.is-narrow td,
@@ -2920,7 +3034,7 @@ div.icon-text {
 }
 
 .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
-  background-color: #fafafa;
+  background-color: var(--bulma-table-striped-row-even-background-color);
 }
 
 .table-container {
@@ -2930,6 +3044,13 @@ div.icon-text {
   max-width: 100%;
 }
 
+:root {
+  --bulma-tag-background-color: var(--bulma-background);
+  --bulma-tag-color: var(--bulma-text);
+  --bulma-tag-radius: var(--bulma-radius);
+  --bulma-tag-delete-margin: 1px;
+}
+
 .tags {
   align-items: center;
   display: flex;
@@ -2954,11 +3075,11 @@ div.icon-text {
 }
 
 .tags.are-medium .tag:not(.is-normal):not(.is-large) {
-  font-size: 1rem;
+  font-size: var(--bulma-size-normal);
 }
 
 .tags.are-large .tag:not(.is-normal):not(.is-medium) {
-  font-size: 1.25rem;
+  font-size: var(--bulma-size-medium);
 }
 
 .tags.is-centered {
@@ -2999,11 +3120,11 @@ div.icon-text {
 
 .tag:not(body) {
   align-items: center;
-  background-color: whitesmoke;
-  border-radius: 4px;
-  color: #4a4a4a;
+  background-color: var(--bulma-tag-background-color);
+  border-radius: var(--bulma-tag-radius);
+  color: var(--bulma-tag-color);
   display: inline-flex;
-  font-size: 0.75rem;
+  font-size: var(--bulma-size-small);
   height: 2em;
   justify-content: center;
   line-height: 1.5;
@@ -3098,15 +3219,15 @@ div.icon-text {
 }
 
 .tag:not(body).is-normal {
-  font-size: 0.75rem;
+  font-size: var(--bulma-size-small);
 }
 
 .tag:not(body).is-medium {
-  font-size: 1rem;
+  font-size: var(--bulma-size-normal);
 }
 
 .tag:not(body).is-large {
-  font-size: 1.25rem;
+  font-size: var(--bulma-size-medium);
 }
 
 .tag:not(body) .icon:first-child:not(:last-child) {
@@ -3125,7 +3246,7 @@ div.icon-text {
 }
 
 .tag:not(body).is-delete {
-  margin-left: 1px;
+  margin-left: var(--bulma-tag-delete-margin);
   padding: 0;
   position: relative;
   width: 2em;
@@ -3152,22 +3273,34 @@ div.icon-text {
   width: 1px;
 }
 
-.tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus {
-  background-color: #e8e8e8;
-}
-
-.tag:not(body).is-delete:active {
-  background-color: #dbdbdb;
-}
-
 .tag:not(body).is-rounded {
-  border-radius: 9999px;
+  border-radius: var(--bulma-radius-rounded);
 }
 
 a.tag:hover {
   text-decoration: underline;
 }
 
+:root {
+  --bulma-title-color: var(--bulma-text-strong);
+  --bulma-title-family: false;
+  --bulma-title-size: var(--bulma-size-3);
+  --bulma-title-weight: var(--bulma-weight-semibold);
+  --bulma-title-line-height: 1.125;
+  --bulma-title-strong-color: inherit;
+  --bulma-title-strong-weight: inherit;
+  --bulma-title-sub-size: 0.75em;
+  --bulma-title-sup-size: 0.75em;
+  --bulma-subtitle-color: var(--bulma-text);
+  --bulma-subtitle-family: false;
+  --bulma-subtitle-size: var(--bulma-size-5);
+  --bulma-subtitle-weight: var(--bulma-weight-normal);
+  --bulma-subtitle-line-height: 1.25;
+  --bulma-subtitle-strong-color: var(--bulma-text-strong);
+  --bulma-subtitle-strong-weight: var(--bulma-weight-semibold);
+  --bulma-subtitle-negative-margin: -1.25rem;
+}
+
 .title,
 .subtitle {
   word-break: break-word;
@@ -3182,12 +3315,12 @@ a.tag:hover {
 
 .title sub,
 .subtitle sub {
-  font-size: 0.75em;
+  font-size: var(--bulma-title-sub-size);
 }
 
 .title sup,
 .subtitle sup {
-  font-size: 0.75em;
+  font-size: var(--bulma-title-sup-size);
 }
 
 .title .tag,
@@ -3196,91 +3329,91 @@ a.tag:hover {
 }
 
 .title {
-  color: #363636;
-  font-size: 2rem;
-  font-weight: 600;
-  line-height: 1.125;
+  color: var(--bulma-title-color);
+  font-size: var(--bulma-title-size);
+  font-weight: var(--bulma-title-weight);
+  line-height: var(--bulma-title-line-height);
 }
 
 .title strong {
-  color: inherit;
-  font-weight: inherit;
+  color: var(--bulma-title-strong-color);
+  font-weight: var(--bulma-title-strong-weight);
 }
 
 .title:not(.is-spaced) + .subtitle {
-  margin-top: -1.25rem;
+  margin-top: var(--bulma-subtitle-negative-margin);
 }
 
 .title.is-1 {
-  font-size: 3rem;
+  font-size: var(--bulma-size-1);
 }
 
 .title.is-2 {
-  font-size: 2.5rem;
+  font-size: var(--bulma-size-2);
 }
 
 .title.is-3 {
-  font-size: 2rem;
+  font-size: var(--bulma-size-3);
 }
 
 .title.is-4 {
-  font-size: 1.5rem;
+  font-size: var(--bulma-size-4);
 }
 
 .title.is-5 {
-  font-size: 1.25rem;
+  font-size: var(--bulma-size-5);
 }
 
 .title.is-6 {
-  font-size: 1rem;
+  font-size: var(--bulma-size-6);
 }
 
 .title.is-7 {
-  font-size: 0.75rem;
+  font-size: var(--bulma-size-7);
 }
 
 .subtitle {
-  color: #4a4a4a;
-  font-size: 1.25rem;
-  font-weight: 400;
-  line-height: 1.25;
+  color: var(--bulma-subtitle-color);
+  font-size: var(--bulma-subtitle-size);
+  font-weight: var(--bulma-subtitle-weight);
+  line-height: var(--bulma-subtitle-line-height);
 }
 
 .subtitle strong {
-  color: #363636;
-  font-weight: 600;
+  color: var(--bulma-subtitle-strong-color);
+  font-weight: var(--bulma-subtitle-strong-weight);
 }
 
 .subtitle:not(.is-spaced) + .title {
-  margin-top: -1.25rem;
+  margin-top: var(--bulma-subtitle-negative-margin);
 }
 
 .subtitle.is-1 {
-  font-size: 3rem;
+  font-size: var(--bulma-size-1);
 }
 
 .subtitle.is-2 {
-  font-size: 2.5rem;
+  font-size: var(--bulma-size-2);
 }
 
 .subtitle.is-3 {
-  font-size: 2rem;
+  font-size: var(--bulma-size-3);
 }
 
 .subtitle.is-4 {
-  font-size: 1.5rem;
+  font-size: var(--bulma-size-4);
 }
 
 .subtitle.is-5 {
-  font-size: 1.25rem;
+  font-size: var(--bulma-size-5);
 }
 
 .subtitle.is-6 {
-  font-size: 1rem;
+  font-size: var(--bulma-size-6);
 }
 
 .subtitle.is-7 {
-  font-size: 0.75rem;
+  font-size: var(--bulma-size-7);
 }
 
 .heading {
@@ -3293,10 +3426,10 @@ a.tag:hover {
 
 .number {
   align-items: center;
-  background-color: whitesmoke;
-  border-radius: 9999px;
+  background-color: var(--bulma-background);
+  border-radius: var(--bulma-radius-rounded);
   display: inline-flex;
-  font-size: 1.25rem;
+  font-size: var(--bulma-size-medium);
   height: 2em;
   justify-content: center;
   margin-right: 1.5rem;
@@ -12106,6 +12239,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   --bulma-weight-semibold: 600;
   --bulma-weight-bold: 700;
   --bulma-block-spacing: 1.5rem;
+  --bulma-gap: 32px;
   --bulma-easing: ease-out;
   --bulma-radius-small: 2px;
   --bulma-radius: 4px;
diff --git a/docs/cyp/elements/progress.html b/docs/cyp/elements/progress.html
index 468f36de9..122442b21 100644
--- a/docs/cyp/elements/progress.html
+++ b/docs/cyp/elements/progress.html
@@ -8,8 +8,41 @@ title: Elements/Progress
 </div>
 
 <div class="block">
-  <progress id="progress-small" class="progress is-small" value="15" max="100">15%</progress>
-  <progress id="progress-normal" class="progress" value="15" max="100">30%</progress>
-  <progress id="progress-medium" class="progress is-medium" value="15" max="100">45%</progress>
-  <progress id="progress-large" class="progress is-large" value="15" max="100">60%</progress>
+  <progress id="progress-small" class="progress is-small" value="15" max="100">
+    15%
+  </progress>
+  <progress id="progress-normal" class="progress" value="15" max="100">
+    30%
+  </progress>
+  <progress
+    id="progress-medium"
+    class="progress is-medium"
+    value="15"
+    max="100"
+  >
+    45%
+  </progress>
+  <progress id="progress-large" class="progress is-large" value="15" max="100">
+    60%
+  </progress>
+</div>
+
+<div class="block">
+  {% for color in site.data.colors.justColors %}
+  <progress
+    id="progress-{{ color }}"
+    class="progress is-{{ color }}"
+    value="15"
+    max="100"
+  >
+    15%
+  </progress>
+  <progress
+    id="progress-{{ color }}-indeterminate"
+    class="progress is-{{ color }}"
+    max="100"
+  >
+    15%
+  </progress>
+  {% endfor %}
 </div>
diff --git a/sass/elements/box.scss b/sass/elements/box.scss
index ba2a738ce..8b922295a 100644
--- a/sass/elements/box.scss
+++ b/sass/elements/box.scss
@@ -1,34 +1,48 @@
 @import "../utilities/mixins";
 
-$box-color: $text !default;
-$box-background-color: $scheme-main !default;
-$box-radius: $radius-large !default;
-$box-shadow: $shadow !default;
+$box-color: getVar("text") !default;
+$box-background-color: getVar("scheme-main") !default;
+$box-radius: getVar("radius-large") !default;
+$box-shadow: getVar("shadow") !default;
 $box-padding: 1.25rem !default;
 
 $box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
-  0 0 0 1px $link !default;
+  0 0 0 1px getVar("link") !default;
 $box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2),
-  0 0 0 1px $link !default;
+  0 0 0 1px getVar("link") !default;
+
+:root {
+  @include register-vars(
+    (
+      box-color: #{$box-color},
+      box-background-color: #{$box-background-color},
+      box-radius: #{$box-radius},
+      box-shadow: #{$box-shadow},
+      box-padding: #{$box-padding},
+      box-link-hover-shadow: #{$box-link-hover-shadow},
+      box-link-active-shadow: #{$box-link-active-shadow},
+    )
+  );
+}
 
 .#{$class-prefix}box {
   @extend %block;
 
-  background-color: $box-background-color;
-  border-radius: $box-radius;
-  box-shadow: $box-shadow;
-  color: $box-color;
+  background-color: getVar("box-background-color");
+  border-radius: getVar("box-radius");
+  box-shadow: getVar("box-shadow");
+  color: getVar("box-color");
   display: block;
-  padding: $box-padding;
+  padding: getVar("box-padding");
 }
 
 a.#{$class-prefix}box {
   &:hover,
   &:focus {
-    box-shadow: $box-link-hover-shadow;
+    box-shadow: getVar("box-link-hover-shadow");
   }
 
   &:active {
-    box-shadow: $box-link-active-shadow;
+    box-shadow: getVar("box-link-active-shadow");
   }
 }
diff --git a/sass/elements/button.scss b/sass/elements/button.scss
index 8a8e3a653..2680e97ef 100644
--- a/sass/elements/button.scss
+++ b/sass/elements/button.scss
@@ -1,105 +1,145 @@
 @import "../utilities/controls";
 @import "../utilities/mixins";
 
-$button-color: $text-strong !default;
-$button-background-color: $scheme-main !default;
+$button-color: getVar("text-strong") !default;
+$button-background-color: getVar("scheme-main") !default;
 $button-family: false !default;
 
-$button-border-color: $border !default;
-$button-border-width: $control-border-width !default;
+$button-border-color: getVar("border") !default;
+$button-border-width: $control-border-width !default; // TODO
 
-$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default;
+$button-padding-vertical: calc(
+  0.5em - #{getVar("button-border-width")}
+) !default;
 $button-padding-horizontal: 1em !default;
 
-$button-hover-color: $link-hover !default;
-$button-hover-border-color: $link-hover-border !default;
+$button-hover-color: getVar("link-hover") !default;
+$button-hover-border-color: getVar("link-hover-border") !default;
 
-$button-focus-color: $link-focus !default;
-$button-focus-border-color: $link-focus-border !default;
+$button-focus-color: getVar("link-focus") !default;
+$button-focus-border-color: getVar("link-focus-border") !default;
 $button-focus-box-shadow-size: 0 0 0 0.125em !default;
 $button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default;
 
-$button-active-color: $link-active !default;
-$button-active-border-color: $link-active-border !default;
+$button-active-color: getVar("link-active") !default;
+$button-active-border-color: getVar("link-active-border") !default;
 
-$button-text-color: $text !default;
+$button-text-color: getVar("text") !default;
 $button-text-decoration: underline !default;
-$button-text-hover-background-color: $background !default;
-$button-text-hover-color: $text-strong !default;
+$button-text-hover-background-color: getVar("background") !default;
+$button-text-hover-color: getVar("text-strong") !default;
 
 $button-ghost-background: none !default;
 $button-ghost-border-color: transparent !default;
-$button-ghost-color: $link !default;
+$button-ghost-color: getVar("link") !default;
 $button-ghost-decoration: none !default;
-$button-ghost-hover-color: $link !default;
+$button-ghost-hover-color: getVar("link") !default;
 $button-ghost-hover-decoration: underline !default;
 
-$button-disabled-background-color: $scheme-main !default;
-$button-disabled-border-color: $border !default;
+$button-disabled-background-color: getVar("scheme-main") !default;
+$button-disabled-border-color: getVar("border") !default;
 $button-disabled-shadow: none !default;
 $button-disabled-opacity: 0.5 !default;
 
-$button-static-color: $text-light !default;
-$button-static-background-color: $scheme-main-ter !default;
-$button-static-border-color: $border !default;
+$button-static-color: getVar("text-light") !default;
+$button-static-background-color: getVar("scheme-main-ter") !default;
+$button-static-border-color: getVar("border") !default;
 
 $button-colors: $colors !default;
 $button-responsive-sizes: (
   "mobile": (
-    "small": $size-small * 0.75,
-    "normal": $size-small * 0.875,
-    "medium": $size-small,
-    "large": $size-normal,
+    "small": calc(#{getVar("size-small")} * 0.75),
+    "normal": calc(#{getVar("size-small")} * 0.875),
+    "medium": getVar("size-small"),
+    "large": getVar("size-normal"),
   ),
   "tablet-only": (
-    "small": $size-small * 0.875,
-    "normal": $size-small,
-    "medium": $size-normal,
-    "large": $size-medium,
+    "small": calc(#{getVar("size-small")} * 0.875),
+    "normal": getVar("size-small"),
+    "medium": getVar("size-normal"),
+    "large": getVar("size-medium"),
   ),
 ) !default;
 
 // The button sizes use mixins so they can be used at different breakpoints
 @mixin button-small {
   &:not(.is-rounded) {
-    border-radius: $radius-small;
+    border-radius: getVar("radius-small");
   }
 
-  font-size: $size-small;
+  font-size: getVar("size-small");
 }
 
 @mixin button-normal {
-  font-size: $size-normal;
+  font-size: getVar("size-normal");
 }
 
 @mixin button-medium {
-  font-size: $size-medium;
+  font-size: getVar("size-medium");
 }
 
 @mixin button-large {
-  font-size: $size-large;
+  font-size: getVar("size-large");
+}
+
+:root {
+  @include register-vars(
+    (
+      button-color: #{$button-color},
+      button-background-color: #{$button-background-color},
+      button-family: #{$button-family},
+      button-border-color: #{$button-border-color},
+      button-border-width: #{$button-border-width},
+      button-padding-vertical: #{$button-padding-vertical},
+      button-padding-horizontal: #{$button-padding-horizontal},
+      button-hover-color: #{$button-hover-color},
+      button-hover-border-color: #{$button-hover-border-color},
+      button-focus-color: #{$button-focus-color},
+      button-focus-border-color: #{$button-focus-border-color},
+      button-focus-box-shadow-size: #{$button-focus-box-shadow-size},
+      button-focus-box-shadow-color: #{$button-focus-box-shadow-color},
+      button-active-color: #{$button-active-color},
+      button-active-border-color: #{$button-active-border-color},
+      button-text-color: #{$button-text-color},
+      button-text-decoration: #{$button-text-decoration},
+      button-text-hover-background-color: #{$button-text-hover-background-color},
+      button-text-hover-color: #{$button-text-hover-color},
+      button-ghost-background: #{$button-ghost-background},
+      button-ghost-border-color: #{$button-ghost-border-color},
+      button-ghost-color: #{$button-ghost-color},
+      button-ghost-decoration: #{$button-ghost-decoration},
+      button-ghost-hover-color: #{$button-ghost-hover-color},
+      button-ghost-hover-decoration: #{$button-ghost-hover-decoration},
+      button-disabled-background-color: #{$button-disabled-background-color},
+      button-disabled-border-color: #{$button-disabled-border-color},
+      button-disabled-shadow: #{$button-disabled-shadow},
+      button-disabled-opacity: #{$button-disabled-opacity},
+      button-static-color: #{$button-static-color},
+      button-static-background-color: #{$button-static-background-color},
+      button-static-border-color: #{$button-static-border-color},
+    )
+  );
 }
 
 .#{$class-prefix}button {
   @extend %control;
-
   @extend %unselectable;
 
-  background-color: $button-background-color;
-  border-color: $button-border-color;
-  border-width: $button-border-width;
-  color: $button-color;
+  background-color: getVar("button-background-color");
+  border-color: getVar("button-border-color");
+  border-width: getVar("button-border-width");
+  color: getVar("button-color");
   cursor: pointer;
 
   @if $button-family {
-    font-family: $button-family;
+    font-family: getVar("button-family");
   }
 
   justify-content: center;
-  padding-bottom: $button-padding-vertical;
-  padding-left: $button-padding-horizontal;
-  padding-right: $button-padding-horizontal;
-  padding-top: $button-padding-vertical;
+  padding-bottom: getVar("button-padding-vertical");
+  padding-left: getVar("button-padding-horizontal");
+  padding-right: getVar("button-padding-horizontal");
+  padding-top: getVar("button-padding-vertical");
   text-align: center;
   white-space: nowrap;
 
@@ -119,26 +159,45 @@ $button-responsive-sizes: (
     &:first-child:not(:last-child) {
       @include ltr-property(
         "margin",
-        calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}),
+        calc(
+          calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
+              "button-border-width"
+            )}
+        ),
         false
       );
-      @include ltr-property("margin", $button-padding-horizontal * 0.25);
+      @include ltr-property(
+        "margin",
+        calc(#{getVar("button-padding-horizontal")} * 0.25)
+      );
     }
 
     &:last-child:not(:first-child) {
-      @include ltr-property("margin", $button-padding-horizontal * 0.25, false);
       @include ltr-property(
         "margin",
-        calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
+        calc(#{getVar("button-padding-horizontal")} * 0.25),
+        false
+      );
+      @include ltr-property(
+        "margin",
+        calc(
+          calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
+              "button-border-width"
+            )}
+        )
       );
     }
 
     &:first-child:last-child {
       margin-left: calc(
-        #{-0.5 * $button-padding-horizontal} - #{$button-border-width}
+        calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
+            "button-border-width"
+          )}
       );
       margin-right: calc(
-        #{-0.5 * $button-padding-horizontal} - #{$button-border-width}
+        calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
+            "button-border-width"
+          )}
       );
     }
   }
@@ -146,45 +205,46 @@ $button-responsive-sizes: (
   // States
   &:hover,
   &.is-hovered {
-    border-color: $button-hover-border-color;
-    color: $button-hover-color;
+    border-color: getVar("button-hover-border-color");
+    color: getVar("button-hover-color");
   }
 
   &:focus,
   &.is-focused {
-    border-color: $button-focus-border-color;
-    color: $button-focus-color;
+    border-color: getVar("button-focus-border-color");
+    color: getVar("button-focus-color");
 
     &:not(:active) {
-      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
+      box-shadow: getVar("button-focus-box-shadow-size")
+        getVar("button-focus-box-shadow-color");
     }
   }
 
   &:active,
   &.is-active {
-    border-color: $button-active-border-color;
-    color: $button-active-color;
+    border-color: getVar("button-active-border-color");
+    color: getVar("button-active-color");
   }
 
   // Colors
   &.is-text {
     background-color: transparent;
     border-color: transparent;
-    color: $button-text-color;
-    text-decoration: $button-text-decoration;
+    color: getVar("button-text-color");
+    text-decoration: getVar("button-text-decoration");
 
     &:hover,
     &.is-hovered,
     &:focus,
     &.is-focused {
-      background-color: $button-text-hover-background-color;
-      color: $button-text-hover-color;
+      background-color: getVar("button-text-hover-background-color");
+      color: getVar("button-text-hover-color");
     }
 
     &:active,
     &.is-active {
-      background-color: bulmaDarken($button-text-hover-background-color, 5%);
-      color: $button-text-hover-color;
+      // background-color: bulmaDarken($button-text-hover-background-color, 5%); // TODO
+      color: getVar("button-text-hover-color");
     }
 
     &[disabled],
@@ -196,15 +256,15 @@ $button-responsive-sizes: (
   }
 
   &.is-ghost {
-    background: $button-ghost-background;
-    border-color: $button-ghost-border-color;
-    color: $button-ghost-color;
-    text-decoration: $button-ghost-decoration;
+    background: getVar("button-ghost-background");
+    border-color: getVar("button-ghost-border-color");
+    color: getVar("button-ghost-color");
+    text-decoration: getVar("button-ghost-decoration");
 
     &:hover,
     &.is-hovered {
-      color: $button-ghost-hover-color;
-      text-decoration: $button-ghost-hover-decoration;
+      color: getVar("button-ghost-hover-color");
+      text-decoration: getVar("button-ghost-hover-decoration");
     }
   }
 
@@ -230,7 +290,8 @@ $button-responsive-sizes: (
         color: $color-invert;
 
         &:not(:active) {
-          box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25);
+          box-shadow: getVar("button-focus-box-shadow-size")
+            bulmaRgba($color, 0.25);
         }
       }
 
@@ -396,10 +457,10 @@ $button-responsive-sizes: (
   // Modifiers
   &[disabled],
   fieldset[disabled] & {
-    background-color: $button-disabled-background-color;
-    border-color: $button-disabled-border-color;
-    box-shadow: $button-disabled-shadow;
-    opacity: $button-disabled-opacity;
+    background-color: getVar("button-disabled-background-color");
+    border-color: getVar("button-disabled-border-color");
+    box-shadow: getVar("button-disabled-shadow");
+    opacity: getVar("button-disabled-opacity");
   }
 
   &.is-fullwidth {
@@ -413,25 +474,23 @@ $button-responsive-sizes: (
 
     &::after {
       @extend %loader;
-
       @include center(1em);
-
       position: absolute !important;
     }
   }
 
   &.is-static {
-    background-color: $button-static-background-color;
-    border-color: $button-static-border-color;
-    color: $button-static-color;
+    background-color: getVar("button-static-background-color");
+    border-color: getVar("button-static-border-color");
+    color: getVar("button-static-color");
     box-shadow: none;
     pointer-events: none;
   }
 
   &.is-rounded {
-    border-radius: $radius-rounded;
-    padding-left: calc(#{$button-padding-horizontal} + 0.25em);
-    padding-right: calc(#{$button-padding-horizontal} + 0.25em);
+    border-radius: getVar("radius-rounded");
+    padding-left: calc(#{getVar("button-padding-horizontal")} + 0.25em);
+    padding-right: calc(#{getVar("button-padding-horizontal")} + 0.25em);
   }
 }
 
@@ -546,12 +605,12 @@ $button-responsive-sizes: (
     @each $size, $value in $bp-sizes {
       @if $size != "normal" {
         .#{$class-prefix}button.is-responsive.is-#{$size} {
-          font-size: $value;
+          font-size: getVar("value");
         }
       } @else {
         .#{$class-prefix}button.is-responsive,
         .#{$class-prefix}button.is-responsive.is-normal {
-          font-size: $value;
+          font-size: getVar("value");
         }
       }
     }
diff --git a/sass/elements/container.scss b/sass/elements/container.scss
index 56692a180..48b155532 100644
--- a/sass/elements/container.scss
+++ b/sass/elements/container.scss
@@ -1,8 +1,16 @@
 @import "../utilities/mixins";
 
-$container-offset: 2 * $gap !default;
+$container-offset: calc(2 * #{getVar("gap")}) !default;
 $container-max-width: $fullhd !default;
 
+:root {
+  @include register-vars(
+    (
+      container-offset: #{$container-offset},
+    )
+  );
+}
+
 .#{$class-prefix}container {
   flex-grow: 1;
   margin: 0 auto;
@@ -11,36 +19,48 @@ $container-max-width: $fullhd !default;
 
   &.is-fluid {
     max-width: none !important;
-    padding-left: $gap;
-    padding-right: $gap;
+    padding-left: getVar("gap");
+    padding-right: getVar("gap");
     width: 100%;
   }
 
   @include desktop {
-    max-width: $desktop - $container-offset;
+    max-width: calc(#{$desktop} - #{getVar("container-offset")});
   }
 
   @include until-widescreen {
     &.is-widescreen:not(.is-max-desktop) {
-      max-width: min($widescreen, $container-max-width) - $container-offset;
+      max-width: calc(
+        #{min($widescreen, $container-max-width)} - #{getVar(
+            "container-offset"
+          )}
+      );
     }
   }
 
   @include until-fullhd {
     &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
-      max-width: min($fullhd, $container-max-width) - $container-offset;
+      max-width: calc(
+        #{min($fullhd, $container-max-width)} - #{getVar("container-offset")}
+      );
     }
   }
 
   @include widescreen {
     &:not(.is-max-desktop) {
-      max-width: min($widescreen, $container-max-width) - $container-offset;
+      max-width: calc(
+        #{min($widescreen, $container-max-width)} - #{getVar(
+            "container-offset"
+          )}
+      );
     }
   }
 
   @include fullhd {
     &:not(.is-max-desktop):not(.is-max-widescreen) {
-      max-width: min($fullhd, $container-max-width) - $container-offset;
+      max-width: calc(
+        #{min($fullhd, $container-max-width)} - #{getVar("container-offset")}
+      );
     }
   }
 }
diff --git a/sass/elements/content.scss b/sass/elements/content.scss
index d483b9177..eb11a7d23 100644
--- a/sass/elements/content.scss
+++ b/sass/elements/content.scss
@@ -1,26 +1,50 @@
 @import "../utilities/mixins";
 
-$content-heading-color: $text-strong !default;
-$content-heading-weight: $weight-semibold !default;
+$content-heading-color: getVar("text-strong") !default;
+$content-heading-weight: getVar("weight-semibold") !default;
 $content-heading-line-height: 1.125 !default;
 
 $content-block-margin-bottom: 1em !default;
 
-$content-blockquote-background-color: $background !default;
-$content-blockquote-border-left: 5px solid $border !default;
+$content-blockquote-background-color: getVar("background") !default;
+$content-blockquote-border-left: 5px solid getVar("border") !default;
 $content-blockquote-padding: 1.25em 1.5em !default;
 
 $content-pre-padding: 1.25em 1.5em !default;
 
-$content-table-cell-border: 1px solid $border !default;
+$content-table-cell-border: 1px solid getVar("border") !default;
 $content-table-cell-border-width: 0 0 1px !default;
 $content-table-cell-padding: 0.5em 0.75em !default;
-$content-table-cell-heading-color: $text-strong !default;
+$content-table-cell-heading-color: getVar("text-strong") !default;
 $content-table-head-cell-border-width: 0 0 2px !default;
-$content-table-head-cell-color: $text-strong !default;
+$content-table-head-cell-color: getVar("text-strong") !default;
 $content-table-body-last-row-cell-border-bottom-width: 0 !default;
 $content-table-foot-cell-border-width: 2px 0 0 !default;
-$content-table-foot-cell-color: $text-strong !default;
+$content-table-foot-cell-color: getVar("text-strong") !default;
+
+:root {
+  @include register-vars(
+    (
+      content-heading-color: #{$content-heading-color},
+      content-heading-weight: #{$content-heading-weight},
+      content-heading-line-height: #{$content-heading-line-height},
+      content-block-margin-bottom: #{$content-block-margin-bottom},
+      content-blockquote-background-color: #{$content-blockquote-background-color},
+      content-blockquote-border-left: #{$content-blockquote-border-left},
+      content-blockquote-padding: #{$content-blockquote-padding},
+      content-pre-padding: #{$content-pre-padding},
+      content-table-cell-border: #{$content-table-cell-border},
+      content-table-cell-border-width: #{$content-table-cell-border-width},
+      content-table-cell-padding: #{$content-table-cell-padding},
+      content-table-cell-heading-color: #{$content-table-cell-heading-color},
+      content-table-head-cell-border-width: #{$content-table-head-cell-border-width},
+      content-table-head-cell-color: #{$content-table-head-cell-color},
+      content-table-body-last-row-cell-border-bottom-width: #{$content-table-body-last-row-cell-border-bottom-width},
+      content-table-foot-cell-border-width: #{$content-table-foot-cell-border-width},
+      content-table-foot-cell-color: #{$content-table-foot-cell-color},
+    )
+  );
+}
 
 .#{$class-prefix}content {
   @extend %block;
@@ -39,7 +63,7 @@ $content-table-foot-cell-color: $text-strong !default;
   pre,
   table {
     &:not(:last-child) {
-      margin-bottom: $content-block-margin-bottom;
+      margin-bottom: getVar("content-block-margin-bottom");
     }
   }
 
@@ -49,9 +73,9 @@ $content-table-foot-cell-color: $text-strong !default;
   h4,
   h5,
   h6 {
-    color: $content-heading-color;
-    font-weight: $content-heading-weight;
-    line-height: $content-heading-line-height;
+    color: getVar("content-heading-color");
+    font-weight: getVar("content-heading-weight");
+    line-height: getVar("content-heading-line-height");
   }
 
   h1 {
@@ -97,18 +121,18 @@ $content-table-foot-cell-color: $text-strong !default;
   }
 
   blockquote {
-    background-color: $content-blockquote-background-color;
-
-    @include ltr-property("border", $content-blockquote-border-left, false);
-
-    padding: $content-blockquote-padding;
+    background-color: getVar("content-blockquote-background-color");
+    @include ltr-property(
+      "border",
+      getVar("content-blockquote-border-left"),
+      false
+    );
+    padding: getVar("content-blockquote-padding");
   }
 
   ol {
     list-style-position: outside;
-
     @include ltr-property("margin", 2em, false);
-
     margin-top: 1em;
 
     &:not([type]) {
@@ -134,9 +158,7 @@ $content-table-foot-cell-color: $text-strong !default;
 
   ul {
     list-style: disc outside;
-
     @include ltr-property("margin", 2em, false);
-
     margin-top: 1em;
 
     ul {
@@ -177,9 +199,8 @@ $content-table-foot-cell-color: $text-strong !default;
 
   pre {
     @include overflow-touch;
-
     overflow-x: auto;
-    padding: $content-pre-padding;
+    padding: getVar("content-pre-padding");
     white-space: pre;
     word-wrap: normal;
   }
@@ -194,14 +215,14 @@ $content-table-foot-cell-color: $text-strong !default;
 
     td,
     th {
-      border: $content-table-cell-border;
-      border-width: $content-table-cell-border-width;
-      padding: $content-table-cell-padding;
+      border: getVar("content-table-cell-border");
+      border-width: getVar("content-table-cell-border-width");
+      padding: getVar("content-table-cell-padding");
       vertical-align: top;
     }
 
     th {
-      color: $content-table-cell-heading-color;
+      color: getVar("content-table-cell-heading-color");
 
       &:not([align]) {
         text-align: inherit;
@@ -211,16 +232,16 @@ $content-table-foot-cell-color: $text-strong !default;
     thead {
       td,
       th {
-        border-width: $content-table-head-cell-border-width;
-        color: $content-table-head-cell-color;
+        border-width: getVar("content-table-head-cell-border-width");
+        color: getVar("content-table-head-cell-color");
       }
     }
 
     tfoot {
       td,
       th {
-        border-width: $content-table-foot-cell-border-width;
-        color: $content-table-foot-cell-color;
+        border-width: getVar("content-table-foot-cell-border-width");
+        color: getVar("content-table-foot-cell-color");
       }
     }
 
@@ -229,7 +250,9 @@ $content-table-foot-cell-color: $text-strong !default;
         &:last-child {
           td,
           th {
-            border-bottom-width: $content-table-body-last-row-cell-border-bottom-width;
+            border-bottom-width: getVar(
+              "content-table-body-last-row-cell-border-bottom-width"
+            );
           }
         }
       }
@@ -244,18 +267,18 @@ $content-table-foot-cell-color: $text-strong !default;
 
   // Sizes
   &.is-small {
-    font-size: $size-small;
+    font-size: getVar("size-small");
   }
 
   &.is-normal {
-    font-size: $size-normal;
+    font-size: getVar("size-normal");
   }
 
   &.is-medium {
-    font-size: $size-medium;
+    font-size: getVar("size-medium");
   }
 
   &.is-large {
-    font-size: $size-large;
+    font-size: getVar("size-large");
   }
 }
diff --git a/sass/elements/icon.scss b/sass/elements/icon.scss
index cf9c39faa..2e202384d 100644
--- a/sass/elements/icon.scss
+++ b/sass/elements/icon.scss
@@ -4,27 +4,39 @@ $icon-dimensions-medium: 2rem !default;
 $icon-dimensions-large: 3rem !default;
 $icon-text-spacing: 0.25em !default;
 
+:root {
+  @include register-vars(
+    (
+      icon-dimensions: #{$icon-dimensions},
+      icon-dimensions-small: #{$icon-dimensions-small},
+      icon-dimensions-medium: #{$icon-dimensions-medium},
+      icon-dimensions-large: #{$icon-dimensions-large},
+      icon-text-spacing: #{$icon-text-spacing},
+    )
+  );
+}
+
 .#{$class-prefix}icon {
   align-items: center;
   display: inline-flex;
   justify-content: center;
-  height: $icon-dimensions;
-  width: $icon-dimensions;
+  height: getVar("icon-dimensions");
+  width: getVar("icon-dimensions");
 
   // Sizes
   &.is-small {
-    height: $icon-dimensions-small;
-    width: $icon-dimensions-small;
+    height: getVar("icon-dimensions-small");
+    width: getVar("icon-dimensions-small");
   }
 
   &.is-medium {
-    height: $icon-dimensions-medium;
-    width: $icon-dimensions-medium;
+    height: getVar("icon-dimensions-medium");
+    width: getVar("icon-dimensions-medium");
   }
 
   &.is-large {
-    height: $icon-dimensions-large;
-    width: $icon-dimensions-large;
+    height: getVar("icon-dimensions-large");
+    width: getVar("icon-dimensions-large");
   }
 }
 
@@ -33,7 +45,7 @@ $icon-text-spacing: 0.25em !default;
   color: inherit;
   display: inline-flex;
   flex-wrap: wrap;
-  line-height: $icon-dimensions;
+  line-height: getVar("icon-dimensions");
   vertical-align: top;
 
   .#{$class-prefix}icon {
@@ -42,21 +54,21 @@ $icon-text-spacing: 0.25em !default;
 
     &:not(:last-child) {
       @include ltr {
-        margin-right: $icon-text-spacing;
+        margin-right: getVar("icon-text-spacing");
       }
 
       @include rtl {
-        margin-left: $icon-text-spacing;
+        margin-left: getVar("icon-text-spacing");
       }
     }
 
     &:not(:first-child) {
       @include ltr {
-        margin-left: $icon-text-spacing;
+        margin-left: getVar("icon-text-spacing");
       }
 
       @include rtl {
-        margin-right: $icon-text-spacing;
+        margin-right: getVar("icon-text-spacing");
       }
     }
   }
diff --git a/sass/elements/image.scss b/sass/elements/image.scss
index c9ad334ae..204a07150 100644
--- a/sass/elements/image.scss
+++ b/sass/elements/image.scss
@@ -12,7 +12,7 @@ $dimensions: 16 24 32 48 64 96 128 !default;
     width: 100%;
 
     &.is-rounded {
-      border-radius: $radius-rounded;
+      border-radius: getVar("radius-rounded");
     }
   }
 
diff --git a/sass/elements/notification.scss b/sass/elements/notification.scss
index f338a0989..b150d0a98 100644
--- a/sass/elements/notification.scss
+++ b/sass/elements/notification.scss
@@ -1,27 +1,40 @@
 @import "../utilities/mixins";
 
-$notification-background-color: $background !default;
-$notification-code-background-color: $scheme-main !default;
-$notification-radius: $radius !default;
+$notification-background-color: getVar("background") !default;
+$notification-code-background-color: getVar("scheme-main") !default;
+$notification-radius: getVar("radius") !default;
 $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default;
 $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default;
 $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default;
 
 $notification-colors: $colors !default;
 
+:root {
+  @include register-vars(
+    (
+      notification-background-color: #{$notification-background-color},
+      notification-code-background-color: #{$notification-code-background-color},
+      notification-radius: #{$notification-radius},
+      notification-padding: #{$notification-padding},
+      notification-padding-ltr: #{$notification-padding-ltr},
+      notification-padding-rtl: #{$notification-padding-rtl},
+    )
+  );
+}
+
 .#{$class-prefix}notification {
   @extend %block;
 
-  background-color: $notification-background-color;
-  border-radius: $notification-radius;
+  background-color: getVar("notification-background-color");
+  border-radius: getVar("notification-radius");
   position: relative;
 
   @include ltr {
-    padding: $notification-padding-ltr;
+    padding: getVar("notification-padding-ltr");
   }
 
   @include rtl {
-    padding: $notification-padding-rtl;
+    padding: getVar("notification-padding-rtl");
   }
 
   a:not(.#{$class-prefix}button):not(.#{$class-prefix}dropdown-item) {
@@ -35,7 +48,7 @@ $notification-colors: $colors !default;
 
   code,
   pre {
-    background: $notification-code-background-color;
+    background: getVar("notification-code-background-color");
   }
 
   pre code {
@@ -44,7 +57,6 @@ $notification-colors: $colors !default;
 
   & > .#{$class-prefix}delete {
     @include ltr-position(0.5rem);
-
     position: absolute;
     top: 0.5rem;
   }
diff --git a/sass/elements/other.scss b/sass/elements/other.scss
index 43b714b99..132d5ed11 100644
--- a/sass/elements/other.scss
+++ b/sass/elements/other.scss
@@ -22,10 +22,10 @@
 
 .#{$class-prefix}number {
   align-items: center;
-  background-color: $background;
-  border-radius: $radius-rounded;
+  background-color: getVar("background");
+  border-radius: getVar("radius-rounded");
   display: inline-flex;
-  font-size: $size-medium;
+  font-size: getVar("size-medium");
   height: 2em;
   justify-content: center;
   margin-right: 1.5rem;
diff --git a/sass/elements/progress.scss b/sass/elements/progress.scss
index 4f63c1fe3..03fc158c1 100644
--- a/sass/elements/progress.scss
+++ b/sass/elements/progress.scss
@@ -1,40 +1,51 @@
 @import "../utilities/mixins";
 
-$progress-bar-background-color: $border-light !default;
-$progress-value-background-color: $text !default;
-$progress-border-radius: $radius-rounded !default;
+$progress-bar-background-color: getVar("border-light") !default;
+$progress-value-background-color: getVar("text") !default;
+$progress-border-radius: getVar("radius-rounded") !default;
 
 $progress-indeterminate-duration: 1.5s !default;
 
 $progress-colors: $colors !default;
 
+:root {
+  @include register-vars(
+    (
+      progress-bar-background-color: #{$progress-bar-background-color},
+      progress-value-background-color: #{$progress-value-background-color},
+      progress-border-radius: #{$progress-border-radius},
+      progress-indeterminate-duration: #{$progress-indeterminate-duration},
+    )
+  );
+}
+
 .#{$class-prefix}progress {
   @extend %block;
 
   -moz-appearance: none;
   -webkit-appearance: none;
   border: none;
-  border-radius: $progress-border-radius;
+  border-radius: getVar("progress-border-radius");
   display: block;
-  height: $size-normal;
+  height: getVar("size-normal");
   overflow: hidden;
   padding: 0;
   width: 100%;
 
   &::-webkit-progress-bar {
-    background-color: $progress-bar-background-color;
+    background-color: getVar("progress-bar-background-color");
   }
 
   &::-webkit-progress-value {
-    background-color: $progress-value-background-color;
+    background-color: getVar("progress-value-background-color");
   }
 
   &::-moz-progress-bar {
-    background-color: $progress-value-background-color;
+    background-color: getVar("progress-value-background-color");
   }
 
   &::-ms-fill {
-    background-color: $progress-value-background-color;
+    background-color: getVar("progress-value-background-color");
     border: none;
   }
 
@@ -59,22 +70,22 @@ $progress-colors: $colors !default;
         background-image: linear-gradient(
           to right,
           $color 30%,
-          $progress-bar-background-color 30%
+          #{getVar("progress-bar-background-color")} 30%
         );
       }
     }
   }
 
   &:indeterminate {
-    animation-duration: $progress-indeterminate-duration;
+    animation-duration: getVar("progress-indeterminate-duration");
     animation-iteration-count: infinite;
     animation-name: moveIndeterminate;
     animation-timing-function: linear;
-    background-color: $progress-bar-background-color;
+    background-color: getVar("progress-bar-background-color");
     background-image: linear-gradient(
       to right,
-      $text 30%,
-      $progress-bar-background-color 30%
+      #{getVar("text")} 30%,
+      #{getVar("progress-bar-background-color")} 30%
     );
     background-position: top left;
     background-repeat: no-repeat;
@@ -95,15 +106,15 @@ $progress-colors: $colors !default;
 
   // Sizes
   &.is-small {
-    height: $size-small;
+    height: getVar("size-small");
   }
 
   &.is-medium {
-    height: $size-medium;
+    height: getVar("size-medium");
   }
 
   &.is-large {
-    height: $size-large;
+    height: getVar("size-large");
   }
 }
 
diff --git a/sass/elements/table.scss b/sass/elements/table.scss
index 7caea5954..fc193e413 100644
--- a/sass/elements/table.scss
+++ b/sass/elements/table.scss
@@ -1,44 +1,72 @@
 @import "../utilities/mixins";
 
-$table-color: $text-strong !default;
-$table-background-color: $scheme-main !default;
+$table-color: getVar("text-strong") !default;
+$table-background-color: getVar("scheme-main") !default;
 
-$table-cell-border: 1px solid $border !default;
+$table-cell-border: 1px solid getVar("border") !default;
 $table-cell-border-width: 0 0 1px !default;
 $table-cell-padding: 0.5em 0.75em !default;
-$table-cell-heading-color: $text-strong !default;
+$table-cell-heading-color: getVar("text-strong") !default;
 $table-cell-text-align: left !default;
 
 $table-head-cell-border-width: 0 0 2px !default;
-$table-head-cell-color: $text-strong !default;
+$table-head-cell-color: getVar("text-strong") !default;
 $table-foot-cell-border-width: 2px 0 0 !default;
-$table-foot-cell-color: $text-strong !default;
+$table-foot-cell-color: getVar("text-strong") !default;
 
 $table-head-background-color: transparent !default;
 $table-body-background-color: transparent !default;
 $table-foot-background-color: transparent !default;
 
-$table-row-hover-background-color: $scheme-main-bis !default;
+$table-row-hover-background-color: getVar("scheme-main-bis") !default;
 
-$table-row-active-background-color: $primary !default;
-$table-row-active-color: $primary-invert !default;
+$table-row-active-background-color: getVar("primary") !default;
+$table-row-active-color: getVar("primary-invert") !default;
 
-$table-striped-row-even-background-color: $scheme-main-bis !default;
-$table-striped-row-even-hover-background-color: $scheme-main-ter !default;
+$table-striped-row-even-background-color: getVar("scheme-main-bis") !default;
+$table-striped-row-even-hover-background-color: getVar(
+  "scheme-main-ter"
+) !default;
 
 $table-colors: $colors !default;
 
+:root {
+  @include register-vars(
+    (
+      table-color: #{$table-color},
+      table-background-color: #{$table-background-color},
+      table-cell-border: #{$table-cell-border},
+      table-cell-border-width: #{$table-cell-border-width},
+      table-cell-padding: #{$table-cell-padding},
+      table-cell-heading-color: #{$table-cell-heading-color},
+      table-cell-text-align: #{$table-cell-text-align},
+      table-head-cell-border-width: #{$table-head-cell-border-width},
+      table-head-cell-color: #{$table-head-cell-color},
+      table-foot-cell-border-width: #{$table-foot-cell-border-width},
+      table-foot-cell-color: #{$table-foot-cell-color},
+      table-head-background-color: #{$table-head-background-color},
+      table-body-background-color: #{$table-body-background-color},
+      table-foot-background-color: #{$table-foot-background-color},
+      table-row-hover-background-color: #{$table-row-hover-background-color},
+      table-row-active-background-color: #{$table-row-active-background-color},
+      table-row-active-color: #{$table-row-active-color},
+      table-striped-row-even-background-color: #{$table-striped-row-even-background-color},
+      table-striped-row-even-hover-background-color: #{$table-striped-row-even-hover-background-color},
+    )
+  );
+}
+
 .#{$class-prefix}table {
   @extend %block;
 
-  background-color: $table-background-color;
-  color: $table-color;
+  background-color: getVar("table-background-color");
+  color: getVar("table-color");
 
   td,
   th {
-    border: $table-cell-border;
-    border-width: $table-cell-border-width;
-    padding: $table-cell-padding;
+    border: getVar("table-cell-border");
+    border-width: getVar("table-cell-border-width");
+    padding: getVar("table-cell-padding");
     vertical-align: top;
 
     // Colors
@@ -60,8 +88,8 @@ $table-colors: $colors !default;
     }
 
     &.is-selected {
-      background-color: $table-row-active-background-color;
-      color: $table-row-active-color;
+      background-color: getVar("table-row-active-background-color");
+      color: getVar("table-row-active-color");
 
       a,
       strong {
@@ -75,17 +103,17 @@ $table-colors: $colors !default;
   }
 
   th {
-    color: $table-cell-heading-color;
+    color: getVar("table-cell-heading-color");
 
     &:not([align]) {
-      text-align: $table-cell-text-align;
+      text-align: getVar("table-cell-text-align");
     }
   }
 
   tr {
     &.is-selected {
-      background-color: $table-row-active-background-color;
-      color: $table-row-active-color;
+      background-color: getVar("table-row-active-background-color");
+      color: getVar("table-row-active-color");
 
       a,
       strong {
@@ -94,34 +122,34 @@ $table-colors: $colors !default;
 
       td,
       th {
-        border-color: $table-row-active-color;
+        border-color: getVar("table-row-active-color");
         color: currentColor;
       }
     }
   }
 
   thead {
-    background-color: $table-head-background-color;
+    background-color: getVar("table-head-background-color");
 
     td,
     th {
-      border-width: $table-head-cell-border-width;
-      color: $table-head-cell-color;
+      border-width: getVar("table-head-cell-border-width");
+      color: getVar("table-head-cell-color");
     }
   }
 
   tfoot {
-    background-color: $table-foot-background-color;
+    background-color: getVar("table-foot-background-color");
 
     td,
     th {
-      border-width: $table-foot-cell-border-width;
-      color: $table-foot-cell-color;
+      border-width: getVar("table-foot-cell-border-width");
+      color: getVar("table-foot-cell-color");
     }
   }
 
   tbody {
-    background-color: $table-body-background-color;
+    background-color: getVar("table-body-background-color");
 
     tr {
       &:last-child {
@@ -158,7 +186,7 @@ $table-colors: $colors !default;
     tbody {
       tr:not(.is-selected) {
         &:hover {
-          background-color: $table-row-hover-background-color;
+          background-color: getVar("table-row-hover-background-color");
         }
       }
     }
@@ -167,10 +195,12 @@ $table-colors: $colors !default;
       tbody {
         tr:not(.is-selected) {
           &:hover {
-            background-color: $table-row-hover-background-color;
+            background-color: getVar("table-row-hover-background-color");
 
             &:nth-child(even) {
-              background-color: $table-striped-row-even-hover-background-color;
+              background-color: getVar(
+                "table-striped-row-even-hover-background-color"
+              );
             }
           }
         }
@@ -189,7 +219,7 @@ $table-colors: $colors !default;
     tbody {
       tr:not(.is-selected) {
         &:nth-child(even) {
-          background-color: $table-striped-row-even-background-color;
+          background-color: getVar("table-striped-row-even-background-color");
         }
       }
     }
@@ -198,9 +228,7 @@ $table-colors: $colors !default;
 
 .#{$class-prefix}table-container {
   @extend %block;
-
   @include overflow-touch;
-
   overflow: auto;
   overflow-y: hidden;
   max-width: 100%;
diff --git a/sass/elements/tag.scss b/sass/elements/tag.scss
index a01900602..d6162ed91 100644
--- a/sass/elements/tag.scss
+++ b/sass/elements/tag.scss
@@ -1,12 +1,23 @@
 @import "../utilities/mixins";
 
-$tag-background-color: $background !default;
-$tag-color: $text !default;
-$tag-radius: $radius !default;
+$tag-background-color: getVar("background") !default;
+$tag-color: getVar("text") !default;
+$tag-radius: getVar("radius") !default;
 $tag-delete-margin: 1px !default;
 
 $tag-colors: $colors !default;
 
+:root {
+  @include register-vars(
+    (
+      tag-background-color: #{$tag-background-color},
+      tag-color: #{$tag-color},
+      tag-radius: #{$tag-radius},
+      tag-delete-margin: #{$tag-delete-margin},
+    )
+  );
+}
+
 .#{$class-prefix}tags {
   align-items: center;
   display: flex;
@@ -32,13 +43,13 @@ $tag-colors: $colors !default;
   // Sizes
   &.are-medium {
     .#{$class-prefix}tag:not(.is-normal):not(.is-large) {
-      font-size: $size-normal;
+      font-size: getVar("size-normal");
     }
   }
 
   &.are-large {
     .#{$class-prefix}tag:not(.is-normal):not(.is-medium) {
-      font-size: $size-medium;
+      font-size: getVar("size-medium");
     }
   }
 
@@ -99,11 +110,11 @@ $tag-colors: $colors !default;
 
 .#{$class-prefix}tag:not(body) {
   align-items: center;
-  background-color: $tag-background-color;
-  border-radius: $tag-radius;
-  color: $tag-color;
+  background-color: getVar("tag-background-color");
+  border-radius: getVar("tag-radius");
+  color: getVar("tag-color");
   display: inline-flex;
-  font-size: $size-small;
+  font-size: getVar("size-small");
   height: 2em;
   justify-content: center;
   line-height: 1.5;
@@ -140,15 +151,15 @@ $tag-colors: $colors !default;
 
   // Sizes
   &.is-normal {
-    font-size: $size-small;
+    font-size: getVar("size-small");
   }
 
   &.is-medium {
-    font-size: $size-normal;
+    font-size: getVar("size-normal");
   }
 
   &.is-large {
-    font-size: $size-medium;
+    font-size: getVar("size-medium");
   }
 
   .#{$class-prefix}icon {
@@ -170,8 +181,7 @@ $tag-colors: $colors !default;
 
   // Modifiers
   &.is-delete {
-    @include ltr-property("margin", $tag-delete-margin, false);
-
+    @include ltr-property("margin", getVar("tag-delete-margin"), false);
     padding: 0;
     position: relative;
     width: 2em;
@@ -200,16 +210,16 @@ $tag-colors: $colors !default;
 
     &:hover,
     &:focus {
-      background-color: darken($tag-background-color, 5%);
+      // background-color: darken($tag-background-color, 5%); // TODO
     }
 
     &:active {
-      background-color: darken($tag-background-color, 10%);
+      // background-color: darken($tag-background-color, 10%); // TODO
     }
   }
 
   &.is-rounded {
-    border-radius: $radius-rounded;
+    border-radius: getVar("radius-rounded");
   }
 }
 
diff --git a/sass/elements/title.scss b/sass/elements/title.scss
index e5bd97187..66e59cfa1 100644
--- a/sass/elements/title.scss
+++ b/sass/elements/title.scss
@@ -1,24 +1,48 @@
 @import "../utilities/mixins";
 
-$title-color: $text-strong !default;
+$title-color: getVar("text-strong") !default;
 $title-family: false !default;
-$title-size: $size-3 !default;
-$title-weight: $weight-semibold !default;
+$title-size: getVar("size-3") !default;
+$title-weight: getVar("weight-semibold") !default;
 $title-line-height: 1.125 !default;
 $title-strong-color: inherit !default;
 $title-strong-weight: inherit !default;
 $title-sub-size: 0.75em !default;
 $title-sup-size: 0.75em !default;
 
-$subtitle-color: $text !default;
+$subtitle-color: getVar("text") !default;
 $subtitle-family: false !default;
-$subtitle-size: $size-5 !default;
-$subtitle-weight: $weight-normal !default;
+$subtitle-size: getVar("size-5") !default;
+$subtitle-weight: getVar("weight-normal") !default;
 $subtitle-line-height: 1.25 !default;
-$subtitle-strong-color: $text-strong !default;
-$subtitle-strong-weight: $weight-semibold !default;
+$subtitle-strong-color: getVar("text-strong") !default;
+$subtitle-strong-weight: getVar("weight-semibold") !default;
 $subtitle-negative-margin: -1.25rem !default;
 
+:root {
+  @include register-vars(
+    (
+      title-color: #{$title-color},
+      title-family: #{$title-family},
+      title-size: #{$title-size},
+      title-weight: #{$title-weight},
+      title-line-height: #{$title-line-height},
+      title-strong-color: #{$title-strong-color},
+      title-strong-weight: #{$title-strong-weight},
+      title-sub-size: #{$title-sub-size},
+      title-sup-size: #{$title-sup-size},
+      subtitle-color: #{$subtitle-color},
+      subtitle-family: #{$subtitle-family},
+      subtitle-size: #{$subtitle-size},
+      subtitle-weight: #{$subtitle-weight},
+      subtitle-line-height: #{$subtitle-line-height},
+      subtitle-strong-color: #{$subtitle-strong-color},
+      subtitle-strong-weight: #{$subtitle-strong-weight},
+      subtitle-negative-margin: #{$subtitle-negative-margin},
+    )
+  );
+}
+
 .#{$class-prefix}title,
 .#{$class-prefix}subtitle {
   @extend %block;
@@ -31,11 +55,11 @@ $subtitle-negative-margin: -1.25rem !default;
   }
 
   sub {
-    font-size: $title-sub-size;
+    font-size: getVar("title-sub-size");
   }
 
   sup {
-    font-size: $title-sup-size;
+    font-size: getVar("title-sup-size");
   }
 
   .#{$class-prefix}tag {
@@ -44,23 +68,23 @@ $subtitle-negative-margin: -1.25rem !default;
 }
 
 .#{$class-prefix}title {
-  color: $title-color;
+  color: getVar("title-color");
 
   @if $title-family {
-    font-family: $title-family;
+    font-family: getVar("title-family");
   }
 
-  font-size: $title-size;
-  font-weight: $title-weight;
-  line-height: $title-line-height;
+  font-size: getVar("title-size");
+  font-weight: getVar("title-weight");
+  line-height: getVar("title-line-height");
 
   strong {
-    color: $title-strong-color;
-    font-weight: $title-strong-weight;
+    color: getVar("title-strong-color");
+    font-weight: getVar("title-strong-weight");
   }
 
   &:not(.is-spaced) + .#{$class-prefix}subtitle {
-    margin-top: $subtitle-negative-margin;
+    margin-top: getVar("subtitle-negative-margin");
   }
 
   // Sizes
@@ -68,29 +92,29 @@ $subtitle-negative-margin: -1.25rem !default;
     $i: index($sizes, $size);
 
     &.is-#{$i} {
-      font-size: $size;
+      font-size: getVar("size-", "", $i);
     }
   }
 }
 
 .#{$class-prefix}subtitle {
-  color: $subtitle-color;
+  color: getVar("subtitle-color");
 
   @if $subtitle-family {
-    font-family: $subtitle-family;
+    font-family: getVar("subtitle-family");
   }
 
-  font-size: $subtitle-size;
-  font-weight: $subtitle-weight;
-  line-height: $subtitle-line-height;
+  font-size: getVar("subtitle-size");
+  font-weight: getVar("subtitle-weight");
+  line-height: getVar("subtitle-line-height");
 
   strong {
-    color: $subtitle-strong-color;
-    font-weight: $subtitle-strong-weight;
+    color: getVar("subtitle-strong-color");
+    font-weight: getVar("subtitle-strong-weight");
   }
 
   &:not(.is-spaced) + .#{$class-prefix}title {
-    margin-top: $subtitle-negative-margin;
+    margin-top: getVar("subtitle-negative-margin");
   }
 
   // Sizes
@@ -98,7 +122,7 @@ $subtitle-negative-margin: -1.25rem !default;
     $i: index($sizes, $size);
 
     &.is-#{$i} {
-      font-size: $size;
+      font-size: getVar("size-", "", $i);
     }
   }
 }
diff --git a/sass/themes/default.scss b/sass/themes/default.scss
index 699c46356..225afc4b6 100644
--- a/sass/themes/default.scss
+++ b/sass/themes/default.scss
@@ -16,6 +16,7 @@
       weight-semibold: #{$weight-semibold},
       weight-bold: #{$weight-bold},
       block-spacing: #{$block-spacing},
+      gap: #{$gap},
       easing: #{$easing},
       radius-small: #{$radius-small},
       radius: #{$radius},
-- 
2.47.2