Merge pull request #3860 from jgthms/1.0.2

1.0.2

CHANGELOG.md

@@ -2,6 +2,28 @@
 
 ## 1.0.2
 
+### Improvements
+
+- Smart Grid `is-col-min` now goes up to `32` (Fixes #3829)
+- Remove need for `is-variable` modifier for Column gaps
+- You can have a list of radio buttons or checkboxes with the `radios` and `checkboxes` classes respectively
+- Add `is-max-tablet` modifier to the Container element
+- Add `currentColor` and `inherit` as possible values for the color and background helpers
+- The Section can now have a minimum height of `100vh` with the `is-fullheight` modifier
+- Add more SCSS variables:
+  - `$input-border-style`
+  - `$input-border-width`
+  - `$label-spacing`
+  - `$field-block-spacing`
+- Add more CSS variables:
+  - `--bulma-input-border-style`
+  - `--bulma-input-border-width`
+  - `--bulma-label-color`
+  - `--bulma-label-spacing`
+  - `--bulma-label-weight` 
+  - `--bulma-help-size`
+  - `--bulma-field-block-spacing`
+
 ### Bug fixes
 
 - Fix #3824: ability to override `$scheme-h`, `$scheme-s`, `$dark-l` and `$light-l` Sass variables
@@ -9,6 +31,9 @@
 - Fix #3743: make sure 12 columns system take up whole width
 - Fix #3799: restore variable columns
 - Fix #3846: restore `--bulma-column-gap` CSS variable
+- Fix #3775: `has-background` helpers should only affect element it's applied to
+- Fix #3856: Sass nested rule deprecation warning
+- Fix #3757: restore use of `$navbar-burger-color`
 
 ## 1.0.1
 

css/versions/bulma-no-helpers-prefixed.css

@@ -1222,6 +1222,8 @@ a.bulma-box:active {
 .bulma-content ol {
   list-style-position: outside;
   margin-inline-start: 2em;
+}
+.bulma-content ol:not(:first-child) {
   margin-top: 1em;
 }
 .bulma-content ol:not([type]) {
@@ -1242,6 +1244,8 @@ a.bulma-box:active {
 .bulma-content ul {
   list-style: disc outside;
   margin-inline-start: 2em;
+}
+.bulma-content ul:not(:first-child) {
   margin-top: 1em;
 }
 .bulma-content ul ul {
@@ -2630,6 +2634,8 @@ button.bulma-tag:active,
   --bulma-input-h: var(--bulma-scheme-h);
   --bulma-input-s: var(--bulma-scheme-s);
   --bulma-input-l: var(--bulma-scheme-main-l);
+  --bulma-input-border-style: solid;
+  --bulma-input-border-width: var(--bulma-control-border-width);
   --bulma-input-border-l: var(--bulma-border-l);
   --bulma-input-border-l-delta: 0%;
   --bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
@@ -2705,11 +2711,6 @@ button.bulma-tag:active,
 
 /* Bulma Form */
 .bulma-textarea, .bulma-input {
-  --bulma-input-h: var(--bulma-scheme-h);
-  --bulma-input-s: var(--bulma-scheme-s);
-  --bulma-input-border-style: solid;
-  --bulma-input-border-width: 1px;
-  --bulma-input-border-l: var(--bulma-border-l);
   box-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05);
   max-width: 100%;
   width: 100%;
@@ -2886,8 +2887,12 @@ button.bulma-tag:active,
   cursor: not-allowed;
 }
 
-.bulma-radio + .bulma-radio {
-  margin-inline-start: 0.5em;
+.bulma-checkboxes,
+.bulma-radios {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+  row-gap: 0.5em;
 }
 
 /* Bulma Form */
@@ -3361,14 +3366,22 @@ button.bulma-tag:active,
 }
 
 /* Bulma Form */
+:root {
+  --bulma-label-color: var(--bulma-text-strong);
+  --bulma-label-spacing: 0.5em;
+  --bulma-label-weight: var(--bulma-weight-semibold);
+  --bulma-help-size: var(--bulma-size-small);
+  --bulma-field-block-spacing: 0.75rem;
+}
+
 .bulma-label {
-  color: var(--bulma-text-strong);
+  color: var(--bulma-label-color);
   display: block;
   font-size: var(--bulma-size-normal);
   font-weight: var(--bulma-weight-semibold);
 }
 .bulma-label:not(:last-child) {
-  margin-bottom: 0.5em;
+  margin-bottom: var(--bulma-label-spacing);
 }
 .bulma-label.bulma-is-small {
   font-size: var(--bulma-size-small);
@@ -3382,7 +3395,7 @@ button.bulma-tag:active,
 
 .bulma-help {
   display: block;
-  font-size: var(--bulma-size-small);
+  font-size: var(--bulma-help-size);
   margin-top: 0.25rem;
 }
 .bulma-help.bulma-is-white {
@@ -3420,7 +3433,7 @@ button.bulma-tag:active,
 }
 
 .bulma-field {
-  --bulma-block-spacing: 0.75rem;
+  --bulma-block-spacing: var(--bulma-field-block-spacing);
 }
 .bulma-field.bulma-has-addons {
   display: flex;
@@ -4348,13 +4361,14 @@ button.bulma-dropdown-item.bulma-is-selected {
   --bulma-navbar-item-hover-background-l-delta: var(--bulma-hover-background-l-delta);
   --bulma-navbar-item-active-background-l-delta: var(--bulma-active-background-l-delta);
   --bulma-navbar-item-color-l: var(--bulma-text-l);
+  --bulma-navbar-item-color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
   --bulma-navbar-item-selected-h: var(--bulma-link-h);
   --bulma-navbar-item-selected-s: var(--bulma-link-s);
   --bulma-navbar-item-selected-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-background-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-color-l: var(--bulma-link-invert-l);
   --bulma-navbar-item-img-max-height: 1.75rem;
-  --bulma-navbar-burger-color: var(--bulma-navbar-item-color);
+  --bulma-navbar-burger-color: var(--bulma-link);
   --bulma-navbar-tab-hover-background-color: transparent;
   --bulma-navbar-tab-hover-border-bottom-color: var(--bulma-link);
   --bulma-navbar-tab-active-color: var(--bulma-link);
@@ -4674,9 +4688,6 @@ body.bulma-has-navbar-fixed-bottom {
   position: relative;
   vertical-align: top;
   width: 2.5rem;
-  align-self: center;
-  margin-inline-start: auto;
-  margin-inline-end: 0.375rem;
 }
 .bulma-navbar-burger span {
   background-color: currentColor;
@@ -4714,6 +4725,12 @@ body.bulma-has-navbar-fixed-bottom {
 .bulma-navbar-burger.bulma-is-active span:nth-child(3), .bulma-navbar-burger.bulma-is-active span:nth-child(4) {
   opacity: 0;
 }
+.bulma-navbar-burger {
+  align-self: center;
+  color: var(--bulma-navbar-burger-color);
+  margin-inline-start: auto;
+  margin-inline-end: 0.375rem;
+}
 
 .bulma-navbar-menu {
   display: none;
@@ -4721,8 +4738,9 @@ body.bulma-has-navbar-fixed-bottom {
 
 .bulma-navbar-item,
 .bulma-navbar-link {
-  color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
+  color: var(--bulma-navbar-item-color);
   display: block;
+  gap: 0.75rem;
   line-height: 1.5;
   padding: 0.5rem 0.75rem;
   position: relative;
@@ -6850,435 +6868,435 @@ label.bulma-panel-block:hover {
     display: flex;
   }
 }
-.bulma-columns.bulma-is-variable.bulma-is-0 {
+.bulma-columns.bulma-is-0 {
   --bulma-column-gap: 0rem;
 }
 @media screen and (max-width: 768px) {
-  .bulma-columns.bulma-is-variable.bulma-is-0-mobile {
+  .bulma-columns.bulma-is-0-mobile {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .bulma-columns.bulma-is-variable.bulma-is-0-tablet {
+  .bulma-columns.bulma-is-0-tablet {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-0-tablet-only {
+  .bulma-columns.bulma-is-0-tablet-only {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-0-touch {
+  .bulma-columns.bulma-is-0-touch {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .bulma-columns.bulma-is-variable.bulma-is-0-desktop {
+  .bulma-columns.bulma-is-0-desktop {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .bulma-columns.bulma-is-variable.bulma-is-0-desktop-only {
+  .bulma-columns.bulma-is-0-desktop-only {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-columns.bulma-is-variable.bulma-is-0-widescreen {
+  .bulma-columns.bulma-is-0-widescreen {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .bulma-columns.bulma-is-variable.bulma-is-0-widescreen-only {
+  .bulma-columns.bulma-is-0-widescreen-only {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-columns.bulma-is-variable.bulma-is-0-fullhd {
+  .bulma-columns.bulma-is-0-fullhd {
     --bulma-column-gap: 0rem;
   }
 }
-.bulma-columns.bulma-is-variable.bulma-is-1 {
+.bulma-columns.bulma-is-1 {
   --bulma-column-gap: 0.25rem;
 }
 @media screen and (max-width: 768px) {
-  .bulma-columns.bulma-is-variable.bulma-is-1-mobile {
+  .bulma-columns.bulma-is-1-mobile {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .bulma-columns.bulma-is-variable.bulma-is-1-tablet {
+  .bulma-columns.bulma-is-1-tablet {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-1-tablet-only {
+  .bulma-columns.bulma-is-1-tablet-only {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-1-touch {
+  .bulma-columns.bulma-is-1-touch {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .bulma-columns.bulma-is-variable.bulma-is-1-desktop {
+  .bulma-columns.bulma-is-1-desktop {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .bulma-columns.bulma-is-variable.bulma-is-1-desktop-only {
+  .bulma-columns.bulma-is-1-desktop-only {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-columns.bulma-is-variable.bulma-is-1-widescreen {
+  .bulma-columns.bulma-is-1-widescreen {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .bulma-columns.bulma-is-variable.bulma-is-1-widescreen-only {
+  .bulma-columns.bulma-is-1-widescreen-only {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-columns.bulma-is-variable.bulma-is-1-fullhd {
+  .bulma-columns.bulma-is-1-fullhd {
     --bulma-column-gap: 0.25rem;
   }
 }
-.bulma-columns.bulma-is-variable.bulma-is-2 {
+.bulma-columns.bulma-is-2 {
   --bulma-column-gap: 0.5rem;
 }
 @media screen and (max-width: 768px) {
-  .bulma-columns.bulma-is-variable.bulma-is-2-mobile {
+  .bulma-columns.bulma-is-2-mobile {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .bulma-columns.bulma-is-variable.bulma-is-2-tablet {
+  .bulma-columns.bulma-is-2-tablet {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-2-tablet-only {
+  .bulma-columns.bulma-is-2-tablet-only {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-2-touch {
+  .bulma-columns.bulma-is-2-touch {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .bulma-columns.bulma-is-variable.bulma-is-2-desktop {
+  .bulma-columns.bulma-is-2-desktop {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .bulma-columns.bulma-is-variable.bulma-is-2-desktop-only {
+  .bulma-columns.bulma-is-2-desktop-only {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-columns.bulma-is-variable.bulma-is-2-widescreen {
+  .bulma-columns.bulma-is-2-widescreen {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .bulma-columns.bulma-is-variable.bulma-is-2-widescreen-only {
+  .bulma-columns.bulma-is-2-widescreen-only {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-columns.bulma-is-variable.bulma-is-2-fullhd {
+  .bulma-columns.bulma-is-2-fullhd {
     --bulma-column-gap: 0.5rem;
   }
 }
-.bulma-columns.bulma-is-variable.bulma-is-3 {
+.bulma-columns.bulma-is-3 {
   --bulma-column-gap: 0.75rem;
 }
 @media screen and (max-width: 768px) {
-  .bulma-columns.bulma-is-variable.bulma-is-3-mobile {
+  .bulma-columns.bulma-is-3-mobile {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .bulma-columns.bulma-is-variable.bulma-is-3-tablet {
+  .bulma-columns.bulma-is-3-tablet {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-3-tablet-only {
+  .bulma-columns.bulma-is-3-tablet-only {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-3-touch {
+  .bulma-columns.bulma-is-3-touch {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .bulma-columns.bulma-is-variable.bulma-is-3-desktop {
+  .bulma-columns.bulma-is-3-desktop {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .bulma-columns.bulma-is-variable.bulma-is-3-desktop-only {
+  .bulma-columns.bulma-is-3-desktop-only {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-columns.bulma-is-variable.bulma-is-3-widescreen {
+  .bulma-columns.bulma-is-3-widescreen {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .bulma-columns.bulma-is-variable.bulma-is-3-widescreen-only {
+  .bulma-columns.bulma-is-3-widescreen-only {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-columns.bulma-is-variable.bulma-is-3-fullhd {
+  .bulma-columns.bulma-is-3-fullhd {
     --bulma-column-gap: 0.75rem;
   }
 }
-.bulma-columns.bulma-is-variable.bulma-is-4 {
+.bulma-columns.bulma-is-4 {
   --bulma-column-gap: 1rem;
 }
 @media screen and (max-width: 768px) {
-  .bulma-columns.bulma-is-variable.bulma-is-4-mobile {
+  .bulma-columns.bulma-is-4-mobile {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .bulma-columns.bulma-is-variable.bulma-is-4-tablet {
+  .bulma-columns.bulma-is-4-tablet {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-4-tablet-only {
+  .bulma-columns.bulma-is-4-tablet-only {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-4-touch {
+  .bulma-columns.bulma-is-4-touch {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .bulma-columns.bulma-is-variable.bulma-is-4-desktop {
+  .bulma-columns.bulma-is-4-desktop {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .bulma-columns.bulma-is-variable.bulma-is-4-desktop-only {
+  .bulma-columns.bulma-is-4-desktop-only {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-columns.bulma-is-variable.bulma-is-4-widescreen {
+  .bulma-columns.bulma-is-4-widescreen {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .bulma-columns.bulma-is-variable.bulma-is-4-widescreen-only {
+  .bulma-columns.bulma-is-4-widescreen-only {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-columns.bulma-is-variable.bulma-is-4-fullhd {
+  .bulma-columns.bulma-is-4-fullhd {
     --bulma-column-gap: 1rem;
   }
 }
-.bulma-columns.bulma-is-variable.bulma-is-5 {
+.bulma-columns.bulma-is-5 {
   --bulma-column-gap: 1.25rem;
 }
 @media screen and (max-width: 768px) {
-  .bulma-columns.bulma-is-variable.bulma-is-5-mobile {
+  .bulma-columns.bulma-is-5-mobile {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .bulma-columns.bulma-is-variable.bulma-is-5-tablet {
+  .bulma-columns.bulma-is-5-tablet {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-5-tablet-only {
+  .bulma-columns.bulma-is-5-tablet-only {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-5-touch {
+  .bulma-columns.bulma-is-5-touch {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .bulma-columns.bulma-is-variable.bulma-is-5-desktop {
+  .bulma-columns.bulma-is-5-desktop {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .bulma-columns.bulma-is-variable.bulma-is-5-desktop-only {
+  .bulma-columns.bulma-is-5-desktop-only {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-columns.bulma-is-variable.bulma-is-5-widescreen {
+  .bulma-columns.bulma-is-5-widescreen {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .bulma-columns.bulma-is-variable.bulma-is-5-widescreen-only {
+  .bulma-columns.bulma-is-5-widescreen-only {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-columns.bulma-is-variable.bulma-is-5-fullhd {
+  .bulma-columns.bulma-is-5-fullhd {
     --bulma-column-gap: 1.25rem;
   }
 }
-.bulma-columns.bulma-is-variable.bulma-is-6 {
+.bulma-columns.bulma-is-6 {
   --bulma-column-gap: 1.5rem;
 }
 @media screen and (max-width: 768px) {
-  .bulma-columns.bulma-is-variable.bulma-is-6-mobile {
+  .bulma-columns.bulma-is-6-mobile {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .bulma-columns.bulma-is-variable.bulma-is-6-tablet {
+  .bulma-columns.bulma-is-6-tablet {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-6-tablet-only {
+  .bulma-columns.bulma-is-6-tablet-only {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-6-touch {
+  .bulma-columns.bulma-is-6-touch {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .bulma-columns.bulma-is-variable.bulma-is-6-desktop {
+  .bulma-columns.bulma-is-6-desktop {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .bulma-columns.bulma-is-variable.bulma-is-6-desktop-only {
+  .bulma-columns.bulma-is-6-desktop-only {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-columns.bulma-is-variable.bulma-is-6-widescreen {
+  .bulma-columns.bulma-is-6-widescreen {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .bulma-columns.bulma-is-variable.bulma-is-6-widescreen-only {
+  .bulma-columns.bulma-is-6-widescreen-only {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-columns.bulma-is-variable.bulma-is-6-fullhd {
+  .bulma-columns.bulma-is-6-fullhd {
     --bulma-column-gap: 1.5rem;
   }
 }
-.bulma-columns.bulma-is-variable.bulma-is-7 {
+.bulma-columns.bulma-is-7 {
   --bulma-column-gap: 1.75rem;
 }
 @media screen and (max-width: 768px) {
-  .bulma-columns.bulma-is-variable.bulma-is-7-mobile {
+  .bulma-columns.bulma-is-7-mobile {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .bulma-columns.bulma-is-variable.bulma-is-7-tablet {
+  .bulma-columns.bulma-is-7-tablet {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-7-tablet-only {
+  .bulma-columns.bulma-is-7-tablet-only {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-7-touch {
+  .bulma-columns.bulma-is-7-touch {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .bulma-columns.bulma-is-variable.bulma-is-7-desktop {
+  .bulma-columns.bulma-is-7-desktop {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .bulma-columns.bulma-is-variable.bulma-is-7-desktop-only {
+  .bulma-columns.bulma-is-7-desktop-only {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-columns.bulma-is-variable.bulma-is-7-widescreen {
+  .bulma-columns.bulma-is-7-widescreen {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .bulma-columns.bulma-is-variable.bulma-is-7-widescreen-only {
+  .bulma-columns.bulma-is-7-widescreen-only {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-columns.bulma-is-variable.bulma-is-7-fullhd {
+  .bulma-columns.bulma-is-7-fullhd {
     --bulma-column-gap: 1.75rem;
   }
 }
-.bulma-columns.bulma-is-variable.bulma-is-8 {
+.bulma-columns.bulma-is-8 {
   --bulma-column-gap: 2rem;
 }
 @media screen and (max-width: 768px) {
-  .bulma-columns.bulma-is-variable.bulma-is-8-mobile {
+  .bulma-columns.bulma-is-8-mobile {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .bulma-columns.bulma-is-variable.bulma-is-8-tablet {
+  .bulma-columns.bulma-is-8-tablet {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-8-tablet-only {
+  .bulma-columns.bulma-is-8-tablet-only {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .bulma-columns.bulma-is-variable.bulma-is-8-touch {
+  .bulma-columns.bulma-is-8-touch {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .bulma-columns.bulma-is-variable.bulma-is-8-desktop {
+  .bulma-columns.bulma-is-8-desktop {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .bulma-columns.bulma-is-variable.bulma-is-8-desktop-only {
+  .bulma-columns.bulma-is-8-desktop-only {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-columns.bulma-is-variable.bulma-is-8-widescreen {
+  .bulma-columns.bulma-is-8-widescreen {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .bulma-columns.bulma-is-variable.bulma-is-8-widescreen-only {
+  .bulma-columns.bulma-is-8-widescreen-only {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-columns.bulma-is-variable.bulma-is-8-fullhd {
+  .bulma-columns.bulma-is-8-fullhd {
     --bulma-column-gap: 2rem;
   }
 }
@@ -7595,6 +7613,66 @@ label.bulma-panel-block:hover {
 .bulma-grid.bulma-is-col-min-12 {
   --bulma-grid-column-min: 18rem;
 }
+.bulma-grid.bulma-is-col-min-13 {
+  --bulma-grid-column-min: 19.5rem;
+}
+.bulma-grid.bulma-is-col-min-14 {
+  --bulma-grid-column-min: 21rem;
+}
+.bulma-grid.bulma-is-col-min-15 {
+  --bulma-grid-column-min: 22.5rem;
+}
+.bulma-grid.bulma-is-col-min-16 {
+  --bulma-grid-column-min: 24rem;
+}
+.bulma-grid.bulma-is-col-min-17 {
+  --bulma-grid-column-min: 25.5rem;
+}
+.bulma-grid.bulma-is-col-min-18 {
+  --bulma-grid-column-min: 27rem;
+}
+.bulma-grid.bulma-is-col-min-19 {
+  --bulma-grid-column-min: 28.5rem;
+}
+.bulma-grid.bulma-is-col-min-20 {
+  --bulma-grid-column-min: 30rem;
+}
+.bulma-grid.bulma-is-col-min-21 {
+  --bulma-grid-column-min: 31.5rem;
+}
+.bulma-grid.bulma-is-col-min-22 {
+  --bulma-grid-column-min: 33rem;
+}
+.bulma-grid.bulma-is-col-min-23 {
+  --bulma-grid-column-min: 34.5rem;
+}
+.bulma-grid.bulma-is-col-min-24 {
+  --bulma-grid-column-min: 36rem;
+}
+.bulma-grid.bulma-is-col-min-25 {
+  --bulma-grid-column-min: 37.5rem;
+}
+.bulma-grid.bulma-is-col-min-26 {
+  --bulma-grid-column-min: 39rem;
+}
+.bulma-grid.bulma-is-col-min-27 {
+  --bulma-grid-column-min: 40.5rem;
+}
+.bulma-grid.bulma-is-col-min-28 {
+  --bulma-grid-column-min: 42rem;
+}
+.bulma-grid.bulma-is-col-min-29 {
+  --bulma-grid-column-min: 43.5rem;
+}
+.bulma-grid.bulma-is-col-min-30 {
+  --bulma-grid-column-min: 45rem;
+}
+.bulma-grid.bulma-is-col-min-31 {
+  --bulma-grid-column-min: 46.5rem;
+}
+.bulma-grid.bulma-is-col-min-32 {
+  --bulma-grid-column-min: 48rem;
+}
 
 .bulma-cell {
   grid-column-end: span var(--bulma-grid-cell-column-span);
@@ -10230,28 +10308,31 @@ label.bulma-panel-block:hover {
   padding-right: 32px;
   width: 100%;
 }
+.bulma-container.bulma-is-max-tablet {
+  max-width: 705px;
+}
 @media screen and (min-width: 1024px) {
   .bulma-container {
     max-width: 960px;
   }
 }
 @media screen and (max-width: 1215px) {
-  .bulma-container.bulma-is-widescreen:not(.bulma-is-max-desktop) {
+  .bulma-container.bulma-is-widescreen:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (max-width: 1407px) {
-  .bulma-container.bulma-is-fullhd:not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
+  .bulma-container.bulma-is-fullhd:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
     max-width: 1344px;
   }
 }
 @media screen and (min-width: 1216px) {
-  .bulma-container:not(.bulma-is-max-desktop) {
+  .bulma-container:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (min-width: 1408px) {
-  .bulma-container:not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
+  .bulma-container:not(.bulma-is-max-tablet):not(.bulma-is-max-desktop):not(.bulma-is-max-widescreen) {
     max-width: 1344px;
   }
 }
@@ -10952,6 +11033,9 @@ label.bulma-panel-block:hover {
     padding: var(--bulma-section-padding-large);
   }
 }
+.bulma-section.bulma-is-fullheight {
+  min-height: 100vh;
+}
 
 :root {
   --bulma-skeleton-background: var(--bulma-border);

css/versions/bulma-no-helpers.css

@@ -1222,6 +1222,8 @@ a.box:active {
 .content ol {
   list-style-position: outside;
   margin-inline-start: 2em;
+}
+.content ol:not(:first-child) {
   margin-top: 1em;
 }
 .content ol:not([type]) {
@@ -1242,6 +1244,8 @@ a.box:active {
 .content ul {
   list-style: disc outside;
   margin-inline-start: 2em;
+}
+.content ul:not(:first-child) {
   margin-top: 1em;
 }
 .content ul ul {
@@ -2630,6 +2634,8 @@ button.tag:active,
   --bulma-input-h: var(--bulma-scheme-h);
   --bulma-input-s: var(--bulma-scheme-s);
   --bulma-input-l: var(--bulma-scheme-main-l);
+  --bulma-input-border-style: solid;
+  --bulma-input-border-width: var(--bulma-control-border-width);
   --bulma-input-border-l: var(--bulma-border-l);
   --bulma-input-border-l-delta: 0%;
   --bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
@@ -2705,11 +2711,6 @@ button.tag:active,
 
 /* Bulma Form */
 .textarea, .input {
-  --bulma-input-h: var(--bulma-scheme-h);
-  --bulma-input-s: var(--bulma-scheme-s);
-  --bulma-input-border-style: solid;
-  --bulma-input-border-width: 1px;
-  --bulma-input-border-l: var(--bulma-border-l);
   box-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05);
   max-width: 100%;
   width: 100%;
@@ -2886,8 +2887,12 @@ button.tag:active,
   cursor: not-allowed;
 }
 
-.radio + .radio {
-  margin-inline-start: 0.5em;
+.checkboxes,
+.radios {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+  row-gap: 0.5em;
 }
 
 /* Bulma Form */
@@ -3361,14 +3366,22 @@ button.tag:active,
 }
 
 /* Bulma Form */
+:root {
+  --bulma-label-color: var(--bulma-text-strong);
+  --bulma-label-spacing: 0.5em;
+  --bulma-label-weight: var(--bulma-weight-semibold);
+  --bulma-help-size: var(--bulma-size-small);
+  --bulma-field-block-spacing: 0.75rem;
+}
+
 .label {
-  color: var(--bulma-text-strong);
+  color: var(--bulma-label-color);
   display: block;
   font-size: var(--bulma-size-normal);
   font-weight: var(--bulma-weight-semibold);
 }
 .label:not(:last-child) {
-  margin-bottom: 0.5em;
+  margin-bottom: var(--bulma-label-spacing);
 }
 .label.is-small {
   font-size: var(--bulma-size-small);
@@ -3382,7 +3395,7 @@ button.tag:active,
 
 .help {
   display: block;
-  font-size: var(--bulma-size-small);
+  font-size: var(--bulma-help-size);
   margin-top: 0.25rem;
 }
 .help.is-white {
@@ -3420,7 +3433,7 @@ button.tag:active,
 }
 
 .field {
-  --bulma-block-spacing: 0.75rem;
+  --bulma-block-spacing: var(--bulma-field-block-spacing);
 }
 .field.has-addons {
   display: flex;
@@ -4348,13 +4361,14 @@ button.dropdown-item.is-selected {
   --bulma-navbar-item-hover-background-l-delta: var(--bulma-hover-background-l-delta);
   --bulma-navbar-item-active-background-l-delta: var(--bulma-active-background-l-delta);
   --bulma-navbar-item-color-l: var(--bulma-text-l);
+  --bulma-navbar-item-color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
   --bulma-navbar-item-selected-h: var(--bulma-link-h);
   --bulma-navbar-item-selected-s: var(--bulma-link-s);
   --bulma-navbar-item-selected-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-background-l: var(--bulma-link-l);
   --bulma-navbar-item-selected-color-l: var(--bulma-link-invert-l);
   --bulma-navbar-item-img-max-height: 1.75rem;
-  --bulma-navbar-burger-color: var(--bulma-navbar-item-color);
+  --bulma-navbar-burger-color: var(--bulma-link);
   --bulma-navbar-tab-hover-background-color: transparent;
   --bulma-navbar-tab-hover-border-bottom-color: var(--bulma-link);
   --bulma-navbar-tab-active-color: var(--bulma-link);
@@ -4674,9 +4688,6 @@ body.has-navbar-fixed-bottom {
   position: relative;
   vertical-align: top;
   width: 2.5rem;
-  align-self: center;
-  margin-inline-start: auto;
-  margin-inline-end: 0.375rem;
 }
 .navbar-burger span {
   background-color: currentColor;
@@ -4714,6 +4725,12 @@ body.has-navbar-fixed-bottom {
 .navbar-burger.is-active span:nth-child(3), .navbar-burger.is-active span:nth-child(4) {
   opacity: 0;
 }
+.navbar-burger {
+  align-self: center;
+  color: var(--bulma-navbar-burger-color);
+  margin-inline-start: auto;
+  margin-inline-end: 0.375rem;
+}
 
 .navbar-menu {
   display: none;
@@ -4721,8 +4738,9 @@ body.has-navbar-fixed-bottom {
 
 .navbar-item,
 .navbar-link {
-  color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
+  color: var(--bulma-navbar-item-color);
   display: block;
+  gap: 0.75rem;
   line-height: 1.5;
   padding: 0.5rem 0.75rem;
   position: relative;
@@ -6850,435 +6868,435 @@ label.panel-block:hover {
     display: flex;
   }
 }
-.columns.is-variable.is-0 {
+.columns.is-0 {
   --bulma-column-gap: 0rem;
 }
 @media screen and (max-width: 768px) {
-  .columns.is-variable.is-0-mobile {
+  .columns.is-0-mobile {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .columns.is-variable.is-0-tablet {
+  .columns.is-0-tablet {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .columns.is-variable.is-0-tablet-only {
+  .columns.is-0-tablet-only {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .columns.is-variable.is-0-touch {
+  .columns.is-0-touch {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .columns.is-variable.is-0-desktop {
+  .columns.is-0-desktop {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .columns.is-variable.is-0-desktop-only {
+  .columns.is-0-desktop-only {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .columns.is-variable.is-0-widescreen {
+  .columns.is-0-widescreen {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .columns.is-variable.is-0-widescreen-only {
+  .columns.is-0-widescreen-only {
     --bulma-column-gap: 0rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .columns.is-variable.is-0-fullhd {
+  .columns.is-0-fullhd {
     --bulma-column-gap: 0rem;
   }
 }
-.columns.is-variable.is-1 {
+.columns.is-1 {
   --bulma-column-gap: 0.25rem;
 }
 @media screen and (max-width: 768px) {
-  .columns.is-variable.is-1-mobile {
+  .columns.is-1-mobile {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .columns.is-variable.is-1-tablet {
+  .columns.is-1-tablet {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .columns.is-variable.is-1-tablet-only {
+  .columns.is-1-tablet-only {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .columns.is-variable.is-1-touch {
+  .columns.is-1-touch {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .columns.is-variable.is-1-desktop {
+  .columns.is-1-desktop {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .columns.is-variable.is-1-desktop-only {
+  .columns.is-1-desktop-only {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .columns.is-variable.is-1-widescreen {
+  .columns.is-1-widescreen {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .columns.is-variable.is-1-widescreen-only {
+  .columns.is-1-widescreen-only {
     --bulma-column-gap: 0.25rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .columns.is-variable.is-1-fullhd {
+  .columns.is-1-fullhd {
     --bulma-column-gap: 0.25rem;
   }
 }
-.columns.is-variable.is-2 {
+.columns.is-2 {
   --bulma-column-gap: 0.5rem;
 }
 @media screen and (max-width: 768px) {
-  .columns.is-variable.is-2-mobile {
+  .columns.is-2-mobile {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .columns.is-variable.is-2-tablet {
+  .columns.is-2-tablet {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .columns.is-variable.is-2-tablet-only {
+  .columns.is-2-tablet-only {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .columns.is-variable.is-2-touch {
+  .columns.is-2-touch {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .columns.is-variable.is-2-desktop {
+  .columns.is-2-desktop {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .columns.is-variable.is-2-desktop-only {
+  .columns.is-2-desktop-only {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .columns.is-variable.is-2-widescreen {
+  .columns.is-2-widescreen {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .columns.is-variable.is-2-widescreen-only {
+  .columns.is-2-widescreen-only {
     --bulma-column-gap: 0.5rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .columns.is-variable.is-2-fullhd {
+  .columns.is-2-fullhd {
     --bulma-column-gap: 0.5rem;
   }
 }
-.columns.is-variable.is-3 {
+.columns.is-3 {
   --bulma-column-gap: 0.75rem;
 }
 @media screen and (max-width: 768px) {
-  .columns.is-variable.is-3-mobile {
+  .columns.is-3-mobile {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .columns.is-variable.is-3-tablet {
+  .columns.is-3-tablet {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .columns.is-variable.is-3-tablet-only {
+  .columns.is-3-tablet-only {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .columns.is-variable.is-3-touch {
+  .columns.is-3-touch {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .columns.is-variable.is-3-desktop {
+  .columns.is-3-desktop {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .columns.is-variable.is-3-desktop-only {
+  .columns.is-3-desktop-only {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .columns.is-variable.is-3-widescreen {
+  .columns.is-3-widescreen {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .columns.is-variable.is-3-widescreen-only {
+  .columns.is-3-widescreen-only {
     --bulma-column-gap: 0.75rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .columns.is-variable.is-3-fullhd {
+  .columns.is-3-fullhd {
     --bulma-column-gap: 0.75rem;
   }
 }
-.columns.is-variable.is-4 {
+.columns.is-4 {
   --bulma-column-gap: 1rem;
 }
 @media screen and (max-width: 768px) {
-  .columns.is-variable.is-4-mobile {
+  .columns.is-4-mobile {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .columns.is-variable.is-4-tablet {
+  .columns.is-4-tablet {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .columns.is-variable.is-4-tablet-only {
+  .columns.is-4-tablet-only {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .columns.is-variable.is-4-touch {
+  .columns.is-4-touch {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .columns.is-variable.is-4-desktop {
+  .columns.is-4-desktop {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .columns.is-variable.is-4-desktop-only {
+  .columns.is-4-desktop-only {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .columns.is-variable.is-4-widescreen {
+  .columns.is-4-widescreen {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .columns.is-variable.is-4-widescreen-only {
+  .columns.is-4-widescreen-only {
     --bulma-column-gap: 1rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .columns.is-variable.is-4-fullhd {
+  .columns.is-4-fullhd {
     --bulma-column-gap: 1rem;
   }
 }
-.columns.is-variable.is-5 {
+.columns.is-5 {
   --bulma-column-gap: 1.25rem;
 }
 @media screen and (max-width: 768px) {
-  .columns.is-variable.is-5-mobile {
+  .columns.is-5-mobile {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .columns.is-variable.is-5-tablet {
+  .columns.is-5-tablet {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .columns.is-variable.is-5-tablet-only {
+  .columns.is-5-tablet-only {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .columns.is-variable.is-5-touch {
+  .columns.is-5-touch {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .columns.is-variable.is-5-desktop {
+  .columns.is-5-desktop {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .columns.is-variable.is-5-desktop-only {
+  .columns.is-5-desktop-only {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .columns.is-variable.is-5-widescreen {
+  .columns.is-5-widescreen {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .columns.is-variable.is-5-widescreen-only {
+  .columns.is-5-widescreen-only {
     --bulma-column-gap: 1.25rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .columns.is-variable.is-5-fullhd {
+  .columns.is-5-fullhd {
     --bulma-column-gap: 1.25rem;
   }
 }
-.columns.is-variable.is-6 {
+.columns.is-6 {
   --bulma-column-gap: 1.5rem;
 }
 @media screen and (max-width: 768px) {
-  .columns.is-variable.is-6-mobile {
+  .columns.is-6-mobile {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .columns.is-variable.is-6-tablet {
+  .columns.is-6-tablet {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .columns.is-variable.is-6-tablet-only {
+  .columns.is-6-tablet-only {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .columns.is-variable.is-6-touch {
+  .columns.is-6-touch {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .columns.is-variable.is-6-desktop {
+  .columns.is-6-desktop {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .columns.is-variable.is-6-desktop-only {
+  .columns.is-6-desktop-only {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .columns.is-variable.is-6-widescreen {
+  .columns.is-6-widescreen {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .columns.is-variable.is-6-widescreen-only {
+  .columns.is-6-widescreen-only {
     --bulma-column-gap: 1.5rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .columns.is-variable.is-6-fullhd {
+  .columns.is-6-fullhd {
     --bulma-column-gap: 1.5rem;
   }
 }
-.columns.is-variable.is-7 {
+.columns.is-7 {
   --bulma-column-gap: 1.75rem;
 }
 @media screen and (max-width: 768px) {
-  .columns.is-variable.is-7-mobile {
+  .columns.is-7-mobile {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .columns.is-variable.is-7-tablet {
+  .columns.is-7-tablet {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .columns.is-variable.is-7-tablet-only {
+  .columns.is-7-tablet-only {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .columns.is-variable.is-7-touch {
+  .columns.is-7-touch {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .columns.is-variable.is-7-desktop {
+  .columns.is-7-desktop {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .columns.is-variable.is-7-desktop-only {
+  .columns.is-7-desktop-only {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .columns.is-variable.is-7-widescreen {
+  .columns.is-7-widescreen {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .columns.is-variable.is-7-widescreen-only {
+  .columns.is-7-widescreen-only {
     --bulma-column-gap: 1.75rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .columns.is-variable.is-7-fullhd {
+  .columns.is-7-fullhd {
     --bulma-column-gap: 1.75rem;
   }
 }
-.columns.is-variable.is-8 {
+.columns.is-8 {
   --bulma-column-gap: 2rem;
 }
 @media screen and (max-width: 768px) {
-  .columns.is-variable.is-8-mobile {
+  .columns.is-8-mobile {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 769px), print {
-  .columns.is-variable.is-8-tablet {
+  .columns.is-8-tablet {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 769px) and (max-width: 1023px) {
-  .columns.is-variable.is-8-tablet-only {
+  .columns.is-8-tablet-only {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (max-width: 1023px) {
-  .columns.is-variable.is-8-touch {
+  .columns.is-8-touch {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  .columns.is-variable.is-8-desktop {
+  .columns.is-8-desktop {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
-  .columns.is-variable.is-8-desktop-only {
+  .columns.is-8-desktop-only {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 1216px) {
-  .columns.is-variable.is-8-widescreen {
+  .columns.is-8-widescreen {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 1216px) and (max-width: 1407px) {
-  .columns.is-variable.is-8-widescreen-only {
+  .columns.is-8-widescreen-only {
     --bulma-column-gap: 2rem;
   }
 }
 @media screen and (min-width: 1408px) {
-  .columns.is-variable.is-8-fullhd {
+  .columns.is-8-fullhd {
     --bulma-column-gap: 2rem;
   }
 }
@@ -7595,6 +7613,66 @@ label.panel-block:hover {
 .grid.is-col-min-12 {
   --bulma-grid-column-min: 18rem;
 }
+.grid.is-col-min-13 {
+  --bulma-grid-column-min: 19.5rem;
+}
+.grid.is-col-min-14 {
+  --bulma-grid-column-min: 21rem;
+}
+.grid.is-col-min-15 {
+  --bulma-grid-column-min: 22.5rem;
+}
+.grid.is-col-min-16 {
+  --bulma-grid-column-min: 24rem;
+}
+.grid.is-col-min-17 {
+  --bulma-grid-column-min: 25.5rem;
+}
+.grid.is-col-min-18 {
+  --bulma-grid-column-min: 27rem;
+}
+.grid.is-col-min-19 {
+  --bulma-grid-column-min: 28.5rem;
+}
+.grid.is-col-min-20 {
+  --bulma-grid-column-min: 30rem;
+}
+.grid.is-col-min-21 {
+  --bulma-grid-column-min: 31.5rem;
+}
+.grid.is-col-min-22 {
+  --bulma-grid-column-min: 33rem;
+}
+.grid.is-col-min-23 {
+  --bulma-grid-column-min: 34.5rem;
+}
+.grid.is-col-min-24 {
+  --bulma-grid-column-min: 36rem;
+}
+.grid.is-col-min-25 {
+  --bulma-grid-column-min: 37.5rem;
+}
+.grid.is-col-min-26 {
+  --bulma-grid-column-min: 39rem;
+}
+.grid.is-col-min-27 {
+  --bulma-grid-column-min: 40.5rem;
+}
+.grid.is-col-min-28 {
+  --bulma-grid-column-min: 42rem;
+}
+.grid.is-col-min-29 {
+  --bulma-grid-column-min: 43.5rem;
+}
+.grid.is-col-min-30 {
+  --bulma-grid-column-min: 45rem;
+}
+.grid.is-col-min-31 {
+  --bulma-grid-column-min: 46.5rem;
+}
+.grid.is-col-min-32 {
+  --bulma-grid-column-min: 48rem;
+}
 
 .cell {
   grid-column-end: span var(--bulma-grid-cell-column-span);
@@ -10230,28 +10308,31 @@ label.panel-block:hover {
   padding-right: 32px;
   width: 100%;
 }
+.container.is-max-tablet {
+  max-width: 705px;
+}
 @media screen and (min-width: 1024px) {
   .container {
     max-width: 960px;
   }
 }
 @media screen and (max-width: 1215px) {
-  .container.is-widescreen:not(.is-max-desktop) {
+  .container.is-widescreen:not(.is-max-tablet):not(.is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (max-width: 1407px) {
-  .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
+  .container.is-fullhd:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
     max-width: 1344px;
   }
 }
 @media screen and (min-width: 1216px) {
-  .container:not(.is-max-desktop) {
+  .container:not(.is-max-tablet):not(.is-max-desktop) {
     max-width: 1152px;
   }
 }
 @media screen and (min-width: 1408px) {
-  .container:not(.is-max-desktop):not(.is-max-widescreen) {
+  .container:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) {
     max-width: 1344px;
   }
 }
@@ -10952,6 +11033,9 @@ label.panel-block:hover {
     padding: var(--bulma-section-padding-large);
   }
 }
+.section.is-fullheight {
+  min-height: 100vh;
+}
 
 :root {
   --bulma-skeleton-background: var(--bulma-border);

docs/_includes/docs/color/current.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: currentColor"></span>
+<code>currentColor</code>

docs/_includes/docs/color/inherit.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: inherit"></span>
+<code>inherit</code>

docs/_sass/docs/docs.scss

@@ -38,7 +38,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--p);
-  overflow: hidden;
 }
 
 .bd-docs-button {

docs/documentation/columns/gap.html

@@ -35,6 +35,14 @@ breadcrumb:
   <div class="column">No gap</div>
 </div>
 {% endcapture %}
+{% capture columns_variable_gap %}
+<div class="columns is-8">
+  <div class="column">Column</div>
+  <div class="column">Column</div>
+  <div class="column">Column</div>
+  <div class="column">Column</div>
+</div>
+{% endcapture %}
 {% capture columns_gapless_multiline %}
 <div class="columns is-gapless is-multiline is-mobile">
   <div class="column is-one-quarter">is-one-quarter</div>
@@ -49,9 +57,7 @@ breadcrumb:
 </div>
 {% endcapture %}
 {% capture columns_variable_responsive_gaps %}
-<div
-  class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
->
+<div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
   <div class="column">Column</div>
   <div class="column">Column</div>
   <div class="column">Column</div>
@@ -155,28 +161,20 @@ breadcrumb:
     <li><code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value</li>
     <li><code>is-8</code> is the maximum gap of <code>2rem</code></li>
   </ul>
-  <p>Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.</p>
+</div>
+
+<div class="bd-highlight-full">
+  {% highlight html -%}
+  {{- columns_variable_gap -}}
+  {%- endhighlight %}
 </div>
 
 {% include docs/content/klmn.html %}
 
-<div class="message is-warning">
-  <div class="message-body">
-    <p>
-      This feature is only available in browsers that support
-      <a
-        href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables"
-        >CSS Variables</a
-      >.
-    </p>
-  </div>
-</div>
-
 {% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
 {% if vernum >= 72 %}
   {%
-    include docs/elements/anchor.html name="Breakpoint
-    based column gaps"
+    include docs/elements/anchor.html name="Breakpoint based column gaps"
   %}
 
   <div class="content">
@@ -184,19 +182,17 @@ breadcrumb:
 
     <p>
       For example, here's how it looks with the following modifiers:
-      <code>is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
+      <code>is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
     </p>
   </div>
 
   <div class="bd-highlight-full">
-    {% highlight html -%}
+    {%- highlight html -%}
     {{- columns_variable_responsive_gaps -}}
-    {%- endhighlight %}
+    {%- endhighlight -%}
   </div>
 
-  <div
-    class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
-  >
+  <div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
     <div class="column">
       <p class="bd-notification is-primary">Column</p>
     </div>

docs/documentation/form/checkbox.html

@@ -14,59 +14,106 @@ meta:
   sizes: false
   variables: false
 ---
+
 {% capture checkbox_example %}
 <label class="checkbox">
   <input type="checkbox" />
   Remember me
 </label>
-{% endcapture %}
-{% capture checkbox_link_example %}
+{% endcapture %} {% capture checkbox_link_example %}
 <label class="checkbox">
   <input type="checkbox" />
   I agree to the <a href="#">terms and conditions</a>
 </label>
-{% endcapture %}
-{% capture checkbox_disabled_example %}
+{% endcapture %} {% capture checkbox_disabled_example %}
 <label class="checkbox" disabled>
   <input type="checkbox" disabled />
   Save my preferences
 </label>
+{% endcapture %} {% capture list_of_checkboxes %}
+<div class="checkboxes">
+  <label class="checkbox">
+    <input type="checkbox" />
+    Monday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" />
+    Tuesday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" />
+    Wednesday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" />
+    Thursday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" />
+    Friday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" checked />
+    Saturday
+  </label>
+
+  <label class="checkbox">
+    <input type="checkbox" checked />
+    Sunday
+  </label>
+</div>
 {% endcapture %}
 
 <div class="content">
   <p>
-    The <code>checkbox</code> class is a simple wrapper around the <code>&lt;input type="checkbox"&gt;</code> HTML
-    element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
+    The <code>checkbox</code> class is a simple wrapper around the
+    <code>&lt;input type="checkbox"&gt;</code> HTML element. It is intentionally
+    not styled, to preserve cross-browser compatibility and the user experience.
   </p>
 </div>
 
 <div class="columns">
   <div class="column is-half">{{ checkbox_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
-    {{- checkbox_example -}}
-    {%- endhighlight %}
+    {% highlight html -%} {{- checkbox_example -}} {%- endhighlight %}
   </div>
 </div>
 
 <div class="content">
-  <p>You can add <strong>links</strong> to your checkbox, or even <strong>disable</strong> it.</p>
+  <p>
+    You can add <strong>links</strong> to your checkbox, or even
+    <strong>disable</strong> it.
+  </p>
 </div>
 
 <div class="columns">
   <div class="column is-half">{{ checkbox_link_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
-    {{- checkbox_link_example -}}
-    {%- endhighlight %}
+    {% highlight html -%} {{- checkbox_link_example -}} {%- endhighlight %}
   </div>
 </div>
 
 <div class="columns">
   <div class="column is-half">{{ checkbox_disabled_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
-    {{- checkbox_disabled_example -}}
-    {%- endhighlight %}
+    {% highlight html -%} {{- checkbox_disabled_example -}} {%- endhighlight %}
   </div>
 </div>
+
+{% include docs/elements/anchor.html name="List of Checkboxes" %}
+
+<div class="content">
+  <p>
+    If you want to list several checkbox elements, wrap them in a
+    <code>&lt;div class="checkboxes"&gt;</code> element:
+  </p>
+</div>
+
+<div class="block">{{- list_of_checkboxes -}}</div>
+
+{% highlight html -%} {{- list_of_checkboxes -}} {%- endhighlight %}

docs/documentation/form/radio.html

@@ -14,6 +14,7 @@ meta:
   sizes: false
   variables: false
 ---
+
 {% capture radio_example %}
 <div class="control">
   <label class="radio">
@@ -25,8 +26,7 @@ meta:
     No
   </label>
 </div>
-{% endcapture %}
-{% capture radio_default_example %}
+{% endcapture %} {% capture radio_default_example %}
 <div class="control">
   <label class="radio">
     <input type="radio" name="foobar" />
@@ -37,8 +37,7 @@ meta:
     Bar
   </label>
 </div>
-{% endcapture %}
-{% capture radio_disabled_example %}
+{% endcapture %} {% capture radio_disabled_example %}
 <div class="control">
   <label class="radio">
     <input type="radio" name="rsvp" />
@@ -53,30 +52,46 @@ meta:
     Maybe
   </label>
 </div>
+{% endcapture %} {% capture list_of_radios %}
+<div class="radios">
+  <label class="radio">
+    <input type="radio" name="rsvp" />
+    Going
+  </label>
+  <label class="radio">
+    <input type="radio" name="rsvp" />
+    Not going
+  </label>
+  <label class="radio" disabled>
+    <input type="radio" name="rsvp" disabled />
+    Maybe
+  </label>
+</div>
 {% endcapture %}
 
 <div class="content">
   <p>
-    The <code>radio</code> class is a simple wrapper around the <code>&lt;input type="radio"&gt;</code> HTML elements.
-    It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
+    The <code>radio</code> class is a simple wrapper around the
+    <code>&lt;input type="radio"&gt;</code> HTML elements. It is intentionally
+    not styled, to preserve cross-browser compatibility and the user experience.
   </p>
   <p>
-    Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
+    Make sure the linked radio buttons have the <strong>same value</strong> for
+    their <code>name</code> HTML attribute.
   </p>
 </div>
 
 <div class="columns">
   <div class="column is-half">{{ radio_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
-    {{- radio_example -}}
-    {%- endhighlight %}
+    {% highlight html -%} {{- radio_example -}} {%- endhighlight %}
   </div>
 </div>
 
 <div class="content">
   <p>
-    You can check a radio button by <strong>default</strong> by adding the <code>checked</code> HTML attribute to the
+    You can check a radio button by <strong>default</strong> by adding the
+    <code>checked</code> HTML attribute to the
     <code>&lt;input&gt;</code> element.
   </p>
 </div>
@@ -84,15 +99,14 @@ meta:
 <div class="columns">
   <div class="column is-half">{{ radio_default_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
-    {{- radio_default_example -}}
-    {%- endhighlight %}
+    {% highlight html -%} {{- radio_default_example -}} {%- endhighlight %}
   </div>
 </div>
 
 <div class="content">
   <p>
-    You can <strong>disable</strong> a radio button by adding the <code>disabled</code> HTML attribute to both the
+    You can <strong>disable</strong> a radio button by adding the
+    <code>disabled</code> HTML attribute to both the
     <code>&lt;label&gt;</code> and the <code>&lt;input&gt;</code>.
   </p>
 </div>
@@ -100,8 +114,19 @@ meta:
 <div class="columns">
   <div class="column is-half">{{ radio_disabled_example }}</div>
   <div class="column is-half bd-highlight-full">
-    {% highlight html -%}
-    {{- radio_disabled_example -}}
-    {%- endhighlight %}
+    {% highlight html -%} {{- radio_disabled_example -}} {%- endhighlight %}
   </div>
 </div>
+
+{% include docs/elements/anchor.html name="List of Radio Buttons" %}
+
+<div class="content">
+  <p>
+    If you want to list several radio buttons, wrap them in a
+    <code>&lt;div class="radios"&gt;</code> element:
+  </p>
+</div>
+
+<div class="block">{{- list_of_radios -}}</div>
+
+{% highlight html -%} {{- list_of_radios -}} {%- endhighlight %}

docs/documentation/grid/grid-cells.html

@@ -90,7 +90,7 @@ Each Bulma grid is comprised of several **cells**. You can adjust the width and
 {% endcapture %}
 
 {% capture markdown %}
-Change which column a cell ends at, counting from the end.
+Change which column a cell starts at.
 {% endcapture %}
 
 {% include markdown.html content=markdown %}
@@ -130,7 +130,7 @@ Change which column a cell ends at, counting from the end.
 {% endcapture %}
 
 {% capture markdown %}
-Change which column a cell starts at.
+Change which column a cell ends at, counting from the end.
 {% endcapture %}
 
 {% include markdown.html content=markdown %}
@@ -212,7 +212,7 @@ Change how many columns a cell spans.
 {% endcapture %}
 
 {% capture markdown %}
-Change which row a cell ends at, counting from the end.
+Change which row a cell starts at.
 {% endcapture %}
 
 {% include markdown.html content=markdown %}
@@ -252,7 +252,7 @@ Change which row a cell ends at, counting from the end.
 {% endcapture %}
 
 {% capture markdown %}
-Change which row a cell starts at.
+Change which row a cell ends at, counting from the end.
 {% endcapture %}
 
 {% include markdown.html content=markdown %}

docs/documentation/grid/playground.html

@@ -22,7 +22,7 @@ breadcrumb:
     </span>
     <button class="js-modifier-property dn" data-property="is-col-min"></button>
     <button class="button js-modifier-value is-link">Default</button>
-    {% for i in (1..12) %}
+    {% for i in (1..32) %}
       <button class="button js-modifier-value" data-value="{{ i }}">{{ i }}</button>
     {% endfor %}
   </div>
@@ -110,4 +110,4 @@ breadcrumb:
 
 {{ fixed_grid_playground }}
 
-<div style="padding-top: 50vh;"><em>Space intentionally left blank to prevent layout jumps</em></div>
+<div style="padding-top: 50vh;"><em>Space intentionally left blank to prevent layout jumps</em></div>

docs/documentation/grid/smart-grid.html

@@ -43,7 +43,7 @@ By default, the Smart Grid has:
 {% include docs/elements/anchor.html name="Smart Grid modifiers" %}
 
 {% capture markdown %}
-You can change the minimum column width by increments of `1.5rem`, by adding the `is-col-min` modifier class with a value ranging from `0` to `12`:
+You can change the minimum column width by increments of `1.5rem`, by adding the `is-col-min` modifier class with a value ranging from `0` to `32`:
 {% endcapture %}
 
 {% include markdown.html content=markdown %}
@@ -56,7 +56,7 @@ You can change the minimum column width by increments of `1.5rem`, by adding the
     </tr>
   </thead>
   <tbody>
-    {% for i in (1..12) %}
+    {% for i in (1..32) %}
       <tr>
         <td><code>is-col-min-{{ i }}</code></td>
         <td><code>{{ i | times: 1.5 }}rem</code></td>
@@ -83,9 +83,9 @@ You can also change the `gap`, `column-gap` and/or `row-gap` by increments of `0
   <tbody>
     {% for i in (0..8) %}
       <tr>
-        <td><code>gap-{{ i }}</code></td>
-        <td><code>column-gap-{{ i }}</code></td>
-        <td><code>row-gap-{{ i }}</code></td>
+        <td><code>is-gap-{{ i }}</code></td>
+        <td><code>is-column-gap-{{ i }}</code></td>
+        <td><code>is-row-gap-{{ i }}</code></td>
         <td><code>{{ i | times: 0.5 }}rem</code></td>
       </tr>
     {% endfor %}

docs/documentation/helpers/color-helpers.html

@@ -217,6 +217,33 @@ breadcrumb:
   </tbody>
 </table>
 
+<p class="block">
+  You can also <strong>inherit</strong> the color, or use the
+  <strong>current</strong> one:
+</p>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Value</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>has-text-current</code></td>
+      <td>{% include docs/color/current.html %}</td>
+      <td class="has-text-current">Hello Bulma</td>
+    </tr>
+    <tr>
+      <td><code>has-text-inherit</code></td>
+      <td>{% include docs/color/inherit.html %}</td>
+      <td class="has-text-inherit">Hello Bulma</td>
+    </tr>
+  </tbody>
+</table>
+
 {% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
 {% include docs/elements/anchor.html name="Background color" %}
 
@@ -231,49 +258,59 @@ breadcrumb:
   <thead>
     <tr>
       <th>Class</th>
-      <th>Background color</th>
+      <th colspan="2">Background color</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td><code>has-background-white</code></td>
       <td>{% include docs/color/white.html %}</td>
+      <td class="has-background-white" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-black</code></td>
       <td>{% include docs/color/black.html %}</td>
+      <td class="has-background-black" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-light</code></td>
       <td>{% include docs/color/white-ter.html %}</td>
+      <td class="has-background-light" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-dark</code></td>
       <td>{% include docs/color/grey-darker.html %}</td>
+      <td class="has-background-dark" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-primary</code></td>
       <td>{% include docs/color/turquoise.html %}</td>
+      <td class="has-background-primary" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-link</code></td>
       <td>{% include docs/color/blue.html %}</td>
+      <td class="has-background-link" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-info</code></td>
       <td>{% include docs/color/cyan.html %}</td>
+      <td class="has-background-info" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-success</code></td>
       <td>{% include docs/color/green.html %}</td>
+      <td class="has-background-success" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-warning</code></td>
       <td>{% include docs/color/yellow.html %}</td>
+      <td class="has-background-warning" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-danger</code></td>
       <td>{% include docs/color/red.html %}</td>
+      <td class="has-background-danger" style="width: 3rem"></td>
     </tr>
   </tbody>
 </table>
@@ -282,45 +319,54 @@ breadcrumb:
   <thead>
     <tr>
       <th>Class</th>
-      <th>Background shade</th>
+      <th colspan="2">Background shade</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td><code>has-background-black-bis</code></td>
       <td>{% include docs/color/black-bis.html %}</td>
+      <td class="has-background-black-bis" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-black-ter</code></td>
       <td>{% include docs/color/black-ter.html %}</td>
+      <td class="has-background-black-ter" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-grey-darker</code></td>
       <td>{% include docs/color/grey-darker.html %}</td>
+      <td class="has-background-grey-darker" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-grey-dark</code></td>
       <td>{% include docs/color/grey-dark.html %}</td>
+      <td class="has-background-grey-dark" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-grey</code></td>
       <td>{% include docs/color/grey.html %}</td>
+      <td class="has-background-grey" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-grey-light</code></td>
       <td>{% include docs/color/grey-light.html %}</td>
+      <td class="has-background-grey-light" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-grey-lighter</code></td>
       <td>{% include docs/color/grey-lighter.html %}</td>
+      <td class="has-background-grey-lighter" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-white-ter</code></td>
       <td>{% include docs/color/white-ter.html %}</td>
+      <td class="has-background-white-ter" style="width: 3rem"></td>
     </tr>
     <tr>
       <td><code>has-background-white-bis</code></td>
       <td>{% include docs/color/white-bis.html %}</td>
+      <td class="has-background-white-bis" style="width: 3rem"></td>
     </tr>
   </tbody>
 </table>
@@ -402,3 +448,30 @@ breadcrumb:
     </tr>
   </tbody>
 </table>
+
+<p class="block">
+  You can also <strong>inherit</strong> the background color, or use the
+  <strong>current color</strong> as background one:
+</p>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Value</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>has-background-current</code></td>
+      <td>{% include docs/color/current.html %}</td>
+      <td class="has-background-current">Hello Bulma</td>
+    </tr>
+    <tr>
+      <td><code>has-background-inherit</code></td>
+      <td>{% include docs/color/inherit.html %}</td>
+      <td class="has-background-inherit">Hello Bulma</td>
+    </tr>
+  </tbody>
+</table>

docs/documentation/helpers/palette-helpers.html

@@ -36,10 +36,8 @@ breadcrumb:
     <tr>
       <th>Class</th>
       <th>Code</th>
-      <th>Example</th>
-      <th>Swatch</th>
-      <th>Invert</th>
-      <th>Swatch</th>
+      <th colspan="2">Example</th>
+      <th colspan="2">Invert</th>
     </tr>
   </thead>
   <tbody>
@@ -86,4 +84,4 @@ Hello Bulma
       </tr>
     {% endfor %}
   </tbody>
-</table>
+</table>

docs/documentation/layout/container.html

@@ -16,59 +16,60 @@ meta:
   sizes: true
   variables: true
 ---
+
 {% capture container_example %}
 <div class="container">
   <div class="notification is-primary">
     This container is <strong>centered</strong> on desktop and larger viewports.
   </div>
 </div>
-{% endcapture %}
-{% capture container_fluid_example %}
+{% endcapture %} {% capture container_fluid_example %}
 <div class="container is-fluid">
   <div class="notification is-primary">
     This container is <strong>fluid</strong>: it will have a 32px gap on either
     side, on any viewport size.
   </div>
 </div>
-{% endcapture %}
-{% capture container_widescreen_example %}
+{% endcapture %} {% capture container_widescreen_example %}
 <div class="container is-widescreen">
   <div class="notification is-primary">
     This container is <strong>fullwidth</strong> <em>until</em> the
     <code>$widescreen</code> breakpoint.
   </div>
 </div>
-{% endcapture %}
-{% capture container_fullhd_example %}
+{% endcapture %} {% capture container_fullhd_example %}
 <div class="container is-fullhd">
   <div class="notification is-primary">
     This container is <strong>fullwidth</strong> <em>until</em> the
     <code>$fullhd</code> breakpoint.
   </div>
 </div>
-{% endcapture %}
-{% capture container_max_desktop_example %}
+{% endcapture %} {% capture container_max_tablet_example %}
+<div class="container is-max-tablet">
+  <div class="notification is-primary">
+    This container has a <code>max-width</code> of
+    <code>$tablet - $container-offset</code>.
+  </div>
+</div>
+{% endcapture %} {% capture container_max_desktop_example %}
 <div class="container is-max-desktop">
   <div class="notification is-primary">
     This container has a <code>max-width</code> of
     <code>$desktop - $container-offset</code> on widescreen and fullhd.
   </div>
 </div>
-{% endcapture %}
-{% capture container_max_widescreen_example %}
+{% endcapture %} {% capture container_max_widescreen_example %}
 <div class="container is-max-widescreen">
   <div class="notification is-primary">
     This container has a <code>max-width</code> of
     <code>$widescreen - $container-offset</code> on fullhd.
   </div>
 </div>
-{% endcapture %}
-{% assign bp_tablet = site.data.breakpoints.tablet %}
-{% assign bp_desktop = site.data.breakpoints.desktop %}
-{% assign bp_widescreen = site.data.breakpoints.widescreen %}
-{% assign bp_fullhd = site.data.breakpoints.fullhd %}
-{% assign container_offset = 64 %}
-{% capture thead %}
+{% endcapture %} {% assign bp_tablet = site.data.breakpoints.tablet %} {% assign
+bp_desktop = site.data.breakpoints.desktop %} {% assign bp_widescreen =
+site.data.breakpoints.widescreen %} {% assign bp_fullhd =
+site.data.breakpoints.fullhd %} {% assign container_offset = 64 %} {% capture
+thead %}
 <thead>
   <tr>
     <th class="bd-is-empty"></th>
@@ -96,8 +97,10 @@ meta:
 
 <div class="content">
   <p>
-    The <code>container</code> is a simple utility element that allows you to <strong>center</strong> content on larger
-    viewports. It can be used in any context, but mostly as a <strong>direct child</strong> of one of the following:
+    The <code>container</code> is a simple utility element that allows you to
+    <strong>center</strong> content on larger viewports. It can be used in any
+    context, but mostly as a <strong>direct child</strong> of one of the
+    following:
   </p>
   <ul>
     <li><code>navbar</code></li>
@@ -137,7 +140,9 @@ meta:
       </tr>
       <tr>
         <td><code>.container.is-widescreen</code></td>
-        <td colspan="2" class="has-text-grey-light has-background-white-ter">Full width</td>
+        <td colspan="2" class="has-text-grey-light has-background-white-ter">
+          Full width
+        </td>
         <td>
           <code>{{ bp_widescreen.from | minus: container_offset }}px</code>
         </td>
@@ -147,7 +152,9 @@ meta:
       </tr>
       <tr>
         <td><code>.container.is-fullhd</code></td>
-        <td colspan="3" class="has-text-grey-light has-background-white-ter">Full width</td>
+        <td colspan="3" class="has-text-grey-light has-background-white-ter">
+          Full width
+        </td>
         <td>
           <code>{{ bp_fullhd.from | minus: container_offset }}px</code>
         </td>
@@ -178,97 +185,114 @@ meta:
 
 <div class="content">
   <p>
-    By default, the <code>container</code> will only be activated from the <code>$desktop</code> breakpoint. It will
-    increase its <code>max-width</code> after reaching the <code>$widescreen</code> and
+    By default, the <code>container</code> will only be activated from the
+    <code>$desktop</code> breakpoint. It will increase its
+    <code>max-width</code> after reaching the <code>$widescreen</code> and
     <code>$fullhd</code> breakpoints.
   </p>
   <p>
-    The container's <strong>width</strong> for each <strong>breakpoint</strong> is the result of:
-    <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code> 32px</code> but can
-    be modified.
+    The container's <strong>width</strong> for each
+    <strong>breakpoint</strong> is the result of:
+    <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a
+    default value of <code> 32px</code> but can be modified.
   </p>
   <p>This is how the container will behave:</p>
   <ul>
-    <li>on <code>$desktop</code> it will have a maximum width of <strong>960px</strong>.</li>
-    <li>on <code>$widescreen</code> it will have a maximum width of <strong>1152px</strong>.</li>
-    <li>on <code>$fullhd</code> it will have a maximum width of <strong>1344px</strong>.</li>
+    <li>
+      on <code>$desktop</code> it will have a maximum width of
+      <strong>960px</strong>.
+    </li>
+    <li>
+      on <code>$widescreen</code> it will have a maximum width of
+      <strong>1152px</strong>.
+    </li>
+    <li>
+      on <code>$fullhd</code> it will have a maximum width of
+      <strong>1344px</strong>.
+    </li>
   </ul>
   <p>
-    The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are
-    divisible by both <strong>12</strong> and <strong>16</strong>.
+    The values <strong>960</strong>, <strong>1152</strong> and
+    <strong>1344</strong> have been chosen because they are divisible by both
+    <strong>12</strong> and <strong>16</strong>.
   </p>
 </div>
 
 <div class="bd-example is-fullwidth">{{ container_example }}</div>
 
-{% highlight html -%}
-{{- container_example -}}
-{%- endhighlight %}
+{% highlight html -%} {{- container_example -}} {%- endhighlight %}
 
 <!--  -->
 {% include docs/elements/anchor.html name="Widescreen or FullHD only" %}
 
 <div class="content">
   <p>
-    With the two modifiers <code>is-widescreen</code> and <code>is-fullhd</code>, you can have a
-    <em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
+    With the two modifiers <code>is-widescreen</code> and
+    <code>is-fullhd</code>, you can have a <em>fullwidth</em> container
+    <strong>until</strong> those specific breakpoints.
   </p>
 </div>
 
 <div class="bd-example is-fullwidth">{{ container_widescreen_example }}</div>
 
-{% highlight html -%}
-{{- container_widescreen_example -}}
-{%- endhighlight %}
+{% highlight html -%} {{- container_widescreen_example -}} {%- endhighlight %}
 
 <div class="bd-example is-fullwidth">{{ container_fullhd_example }}</div>
 
-{% highlight html -%}
-{{- container_fullhd_example -}}
-{%- endhighlight %}
+{% highlight html -%} {{- container_fullhd_example -}} {%- endhighlight %}
 
 <!--  -->
-{%
-  include docs/elements/anchor.html name="Desktop and Widescreen maximum
-  widths"
-%}
+{% include docs/elements/anchor.html name="Tablet, Desktop and Widescreen
+maximum widths" %}
 
 <div class="content">
   <p>
-    Sometimes, you might want a <strong>narrow</strong> container on larger viewports. That's why Bulma provides 2
-    modifiers:
+    Sometimes, you might want a <strong>narrow</strong> container on larger
+    viewports. That's why Bulma provides 3 modifier classes:
   </p>
   <ul>
-    <li><code>.container.is-max-desktop</code> will behave like a desktop container</li>
-    <li><code>.container.is-max-widescreen</code> will behave like a widescreen container</li>
+    <li>
+      <code>.container.is-max-tablet</code> will behave like a tablet container
+    </li>
+    <li>
+      <code>.container.is-max-desktop</code> will behave like a desktop
+      container
+    </li>
+    <li>
+      <code>.container.is-max-widescreen</code> will behave like a widescreen
+      container
+    </li>
   </ul>
 </div>
 
+<div class="bd-example is-fullwidth">{{ container_max_tablet_example }}</div>
+
+{% highlight html -%} {{- container_max_tablet_example -}} {%- endhighlight %}
+
 <div class="bd-example is-fullwidth">{{ container_max_desktop_example }}</div>
 
-{% highlight html -%}
-{{- container_max_desktop_example -}}
-{%- endhighlight %}
+{% highlight html -%} {{- container_max_desktop_example -}} {%- endhighlight %}
 
 <div class="bd-example is-fullwidth">
   {{ container_max_widescreen_example }}
 </div>
 
-{% highlight html -%}
-{{- container_max_widescreen_example -}}
-{%- endhighlight %}
+{% highlight html -%} {{- container_max_widescreen_example -}} {%- endhighlight
+%}
 
 <!--  -->
 {% include docs/elements/anchor.html name="Absolute maximum width" %}
 
 <div class="content">
   <p>
-    If you want to change the maximum width of <strong>all</strong> containers, you can do so by updating the values of
-    the <code>$container-max-width</code> Sass variable.
+    If you want to change the maximum width of <strong>all</strong> containers,
+    you can do so by updating the values of the
+    <code>$container-max-width</code> Sass variable.
   </p>
   <p>
-    By default, the <code>$fullhd</code> breakpoint value is used to calculate the <strong>absolute</strong> maximum
-    width of the <code>container</code>. Simply change it to a smaller value like <code>$widescreen</code>,
+    By default, the <code>$fullhd</code> breakpoint value is used to calculate
+    the <strong>absolute</strong> maximum width of the <code>container</code>.
+    Simply change it to a smaller value like <code>$widescreen</code>,
     <code>$desktop</code>, or any value in <strong>pixels</strong>.
   </p>
 </div>
@@ -278,17 +302,14 @@ meta:
 
 <div class="content">
   <p>
-    If you don't want to have a maximum width but want to keep the 32px margin on the left and right sides, add the
+    If you don't want to have a maximum width but want to keep the 32px margin
+    on the left and right sides, add the
     <code>is-fluid</code> modifier:
   </p>
 </div>
 
 <div class="bd-example is-fullwidth">{{ container_fluid_example }}</div>
 
-{% highlight html -%}
-{{- container_fluid_example -}}
-{%- endhighlight %}
-{%
-  include docs/components/variables.html type='element'
-  data=site.data.variables.elements.container
-%}
+{% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %} {%
+include docs/components/variables.html type='element'
+data=site.data.variables.elements.container %}

package.json

@@ -29,11 +29,11 @@
     "url": "https://github.com/jgthms/bulma/issues"
   },
   "devDependencies": {
-    "cssnano": "^6.1.0",
+    "cssnano": "^7.0.4",
     "postcss-cli": "^11.0.0",
-    "prettier": "^3.2.5",
-    "rimraf": "^5.0.5",
-    "sass": "^1.71.1"
+    "prettier": "^3.3.3",
+    "rimraf": "^6.0.1",
+    "sass": "^1.77.8"
   },
   "scripts": {
     "build-bulma": "sass --style=expanded --source-map bulma.scss css/bulma.css",
@@ -48,6 +48,7 @@
     "minify-all": "npm run minify-bulma && npm run minify-versions",
     "clean": "rimraf css",
     "deploy": "npm run clean && npm run build-all && npm run minify-all",
+    "test": "sass --style=expanded --source-map --watch test.scss css/test.css",
     "start": "npm run build-bulma -- --watch"
   },
   "files": [

sass/components/navbar.scss

@@ -4,9 +4,9 @@
 @use "../utilities/extends";
 @use "../utilities/mixins" as mx;
 
-$navbar-h: cv.getVar("scheme-h");
-$navbar-s: cv.getVar("scheme-s");
-$navbar-l: cv.getVar("scheme-main-l");
+$navbar-h: cv.getVar("scheme-h") !default;
+$navbar-s: cv.getVar("scheme-s") !default;
+$navbar-l: cv.getVar("scheme-main-l") !default;
 $navbar-background-color: cv.getVar("scheme-main") !default;
 $navbar-box-shadow-size: 0 0.125em 0 0 !default;
 $navbar-box-shadow-color: cv.getVar("background") !default;
@@ -16,26 +16,35 @@ $navbar-padding-horizontal: 2rem !default;
 $navbar-z: 30 !default;
 $navbar-fixed-z: 30 !default;
 
-$navbar-item-background-a: 0;
-$navbar-item-background-l: cv.getVar("scheme-main-l");
-$navbar-item-background-l-delta: 0%;
-$navbar-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
-$navbar-item-active-background-l-delta: cv.getVar("active-background-l-delta");
-$navbar-item-color-l: cv.getVar("text-l");
-$navbar-item-selected-h: cv.getVar("link-h");
-$navbar-item-selected-s: cv.getVar("link-s");
-$navbar-item-selected-l: cv.getVar("link-l");
-$navbar-item-selected-background-l: cv.getVar("link-l");
-$navbar-item-selected-color-l: cv.getVar("link-invert-l");
+$navbar-item-background-a: 0 !default;
+$navbar-item-background-l: cv.getVar("scheme-main-l") !default;
+$navbar-item-background-l-delta: 0% !default;
+$navbar-item-hover-background-l-delta: cv.getVar(
+  "hover-background-l-delta"
+) !default;
+$navbar-item-active-background-l-delta: cv.getVar(
+  "active-background-l-delta"
+) !default;
+$navbar-item-color-l: cv.getVar("text-l") !default;
+$navbar-item-color: hsl(
+  #{cv.getVar("navbar-h")},
+  #{cv.getVar("navbar-s")},
+  #{cv.getVar("navbar-item-color-l")}
+) !default;
+$navbar-item-selected-h: cv.getVar("link-h") !default;
+$navbar-item-selected-s: cv.getVar("link-s") !default;
+$navbar-item-selected-l: cv.getVar("link-l") !default;
+$navbar-item-selected-background-l: cv.getVar("link-l") !default;
+$navbar-item-selected-color-l: cv.getVar("link-invert-l") !default;
 $navbar-item-img-max-height: 1.75rem !default;
 
-$navbar-dropdown-item-h: cv.getVar("scheme-h");
-$navbar-dropdown-item-s: cv.getVar("scheme-s");
-$navbar-dropdown-item-l: cv.getVar("scheme-main-l");
-$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l");
-$navbar-dropdown-item-color-l: cv.getVar("text-l");
+$navbar-dropdown-item-h: cv.getVar("scheme-h") !default;
+$navbar-dropdown-item-s: cv.getVar("scheme-s") !default;
+$navbar-dropdown-item-l: cv.getVar("scheme-main-l") !default;
+$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l") !default;
+$navbar-dropdown-item-color-l: cv.getVar("text-l") !default;
 
-$navbar-burger-color: cv.getVar("navbar-item-color") !default;
+$navbar-burger-color: cv.getVar("link") !default;
 
 $navbar-tab-hover-background-color: transparent !default;
 $navbar-tab-hover-border-bottom-color: cv.getVar("link") !default;
@@ -119,6 +128,7 @@ $navbar-colors: dv.$colors !default;
       "navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta},
       "navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta},
       "navbar-item-color-l": #{$navbar-item-color-l},
+      "navbar-item-color": #{$navbar-item-color},
       "navbar-item-selected-h": #{$navbar-item-selected-h},
       "navbar-item-selected-s": #{$navbar-item-selected-s},
       "navbar-item-selected-l": #{$navbar-item-selected-l},
@@ -254,9 +264,13 @@ body {
 .#{iv.$class-prefix}navbar-burger {
   @extend %reset;
   @include mx.burger(2.5rem);
-  align-self: center;
-  margin-inline-start: auto;
-  margin-inline-end: 0.375rem;
+
+  & {
+    align-self: center;
+    color: cv.getVar("navbar-burger-color");
+    margin-inline-start: auto;
+    margin-inline-end: 0.375rem;
+  }
 }
 
 .#{iv.$class-prefix}navbar-menu {
@@ -265,12 +279,9 @@ body {
 
 .#{iv.$class-prefix}navbar-item,
 .#{iv.$class-prefix}navbar-link {
-  color: hsl(
-    #{cv.getVar("navbar-h")},
-    #{cv.getVar("navbar-s")},
-    #{cv.getVar("navbar-item-color-l")}
-  );
+  color: cv.getVar("navbar-item-color");
   display: block;
+  gap: 0.75rem;
   line-height: 1.5;
   padding: 0.5rem 0.75rem;
   position: relative;

sass/elements/content.scss

@@ -133,7 +133,10 @@ $content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
   ol {
     list-style-position: outside;
     margin-inline-start: 2em;
-    margin-top: 1em;
+
+    &:not(:first-child) {
+      margin-top: 1em;
+    }
 
     &:not([type]) {
       list-style-type: decimal;
@@ -159,7 +162,10 @@ $content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
   ul {
     list-style: disc outside;
     margin-inline-start: 2em;
-    margin-top: 1em;
+
+    &:not(:first-child) {
+      margin-top: 1em;
+    }
 
     ul {
       list-style-type: circle;

sass/form/checkbox-radio.scss

@@ -25,8 +25,12 @@
 
 .#{iv.$class-prefix}radio {
   @extend %checkbox-radio;
-
-  & + .#{iv.$class-prefix}radio {
-    margin-inline-start: 0.5em;
-  }
+}
+
+.#{iv.$class-prefix}checkboxes,
+.#{iv.$class-prefix}radios {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1em;
+  row-gap: 0.5em;
 }

sass/form/input-textarea.scss

@@ -12,16 +12,6 @@ $textarea-colors: shared.$form-colors !default;
 %input-textarea {
   @extend %input;
 
-  @include cv.register-vars(
-    (
-      "input-h": #{cv.getVar("scheme-h")},
-      "input-s": #{cv.getVar("scheme-s")},
-      "input-border-style": solid,
-      "input-border-width": 1px,
-      "input-border-l": #{cv.getVar("border-l")},
-    )
-  );
-
   box-shadow: shared.$input-shadow;
   max-width: 100%;
   width: 100%;

sass/form/shared.scss

@@ -9,6 +9,8 @@ $form-colors: dv.$colors !default;
 $input-h: #{cv.getVar("scheme-h")} !default;
 $input-s: #{cv.getVar("scheme-s")} !default;
 $input-l: #{cv.getVar("scheme-main-l")} !default;
+$input-border-style: solid !default;
+$input-border-width: cv.getVar("control-border-width") !default;
 $input-border-l: cv.getVar("border-l") !default;
 $input-border-l-delta: 0% !default;
 $input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
@@ -64,6 +66,8 @@ $input-radius: cv.getVar("radius") !default;
       "input-h": #{$input-h},
       "input-s": #{$input-s},
       "input-l": #{$input-l},
+      "input-border-style": #{$input-border-style},
+      "input-border-width": #{$input-border-width},
       "input-border-l": #{$input-border-l},
       "input-border-l-delta": #{$input-border-l-delta},
       "input-hover-border-l-delta": #{$input-hover-border-l-delta},

sass/form/tools.scss

@@ -6,20 +6,35 @@
 @use "../utilities/mixins" as mx;
 
 $label-color: cv.getVar("text-strong") !default;
+$label-spacing: 0.5em !default;
 $label-weight: cv.getVar("weight-semibold") !default;
 
 $help-size: cv.getVar("size-small") !default;
 
 $label-colors: shared.$form-colors !default;
 
+$field-block-spacing: 0.75rem !default;
+
+:root {
+  @include cv.register-vars(
+    (
+      "label-color": #{$label-color},
+      "label-spacing": #{$label-spacing},
+      "label-weight": #{$label-weight},
+      "help-size": #{$help-size},
+      "field-block-spacing": #{$field-block-spacing},
+    )
+  );
+}
+
 .#{iv.$class-prefix}label {
-  color: $label-color;
+  color: cv.getVar("label-color");
   display: block;
   font-size: cv.getVar("size-normal");
   font-weight: $label-weight;
 
   &:not(:last-child) {
-    margin-bottom: 0.5em;
+    margin-bottom: cv.getVar("label-spacing");
   }
 
   // Sizes
@@ -38,7 +53,7 @@ $label-colors: shared.$form-colors !default;
 
 .#{iv.$class-prefix}help {
   display: block;
-  font-size: $help-size;
+  font-size: cv.getVar("help-size");
   margin-top: 0.25rem;
 
   @each $name, $pair in $label-colors {
@@ -57,7 +72,7 @@ $label-colors: shared.$form-colors !default;
 .#{iv.$class-prefix}field {
   @include cv.register-vars(
     (
-      "block-spacing": 0.75rem,
+      "block-spacing": #{cv.getVar("field-block-spacing")},
     )
   );
 

sass/grid/columns.scss

@@ -859,104 +859,102 @@ $column-gap: 0.75rem !default;
     }
   }
 
-  &.#{iv.$class-prefix}is-variable {
-    @for $i from 0 through 8 {
-      &.#{iv.$class-prefix}is-#{$i} {
+  @for $i from 0 through 8 {
+    &.#{iv.$class-prefix}is-#{$i} {
+      @include cv.register-vars(
+        (
+          "column-gap": #{$i * 0.25rem},
+        )
+      );
+    }
+
+    @include mx.mobile {
+      &.#{iv.$class-prefix}is-#{$i}-mobile {
         @include cv.register-vars(
           (
             "column-gap": #{$i * 0.25rem},
           )
         );
       }
+    }
 
-      @include mx.mobile {
-        &.#{iv.$class-prefix}is-#{$i}-mobile {
-          @include cv.register-vars(
-            (
-              "column-gap": #{$i * 0.25rem},
-            )
-          );
-        }
+    @include mx.tablet {
+      &.#{iv.$class-prefix}is-#{$i}-tablet {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
       }
+    }
 
-      @include mx.tablet {
-        &.#{iv.$class-prefix}is-#{$i}-tablet {
-          @include cv.register-vars(
-            (
-              "column-gap": #{$i * 0.25rem},
-            )
-          );
-        }
+    @include mx.tablet-only {
+      &.#{iv.$class-prefix}is-#{$i}-tablet-only {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
       }
+    }
 
-      @include mx.tablet-only {
-        &.#{iv.$class-prefix}is-#{$i}-tablet-only {
-          @include cv.register-vars(
-            (
-              "column-gap": #{$i * 0.25rem},
-            )
-          );
-        }
+    @include mx.touch {
+      &.#{iv.$class-prefix}is-#{$i}-touch {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
       }
+    }
 
-      @include mx.touch {
-        &.#{iv.$class-prefix}is-#{$i}-touch {
-          @include cv.register-vars(
-            (
-              "column-gap": #{$i * 0.25rem},
-            )
-          );
-        }
+    @include mx.desktop {
+      &.#{iv.$class-prefix}is-#{$i}-desktop {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
       }
+    }
 
-      @include mx.desktop {
-        &.#{iv.$class-prefix}is-#{$i}-desktop {
-          @include cv.register-vars(
-            (
-              "column-gap": #{$i * 0.25rem},
-            )
-          );
-        }
+    @include mx.desktop-only {
+      &.#{iv.$class-prefix}is-#{$i}-desktop-only {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
       }
+    }
 
-      @include mx.desktop-only {
-        &.#{iv.$class-prefix}is-#{$i}-desktop-only {
-          @include cv.register-vars(
-            (
-              "column-gap": #{$i * 0.25rem},
-            )
-          );
-        }
+    @include mx.widescreen {
+      &.#{iv.$class-prefix}is-#{$i}-widescreen {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
       }
+    }
 
-      @include mx.widescreen {
-        &.#{iv.$class-prefix}is-#{$i}-widescreen {
-          @include cv.register-vars(
-            (
-              "column-gap": #{$i * 0.25rem},
-            )
-          );
-        }
+    @include mx.widescreen-only {
+      &.#{iv.$class-prefix}is-#{$i}-widescreen-only {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
       }
+    }
 
-      @include mx.widescreen-only {
-        &.#{iv.$class-prefix}is-#{$i}-widescreen-only {
-          @include cv.register-vars(
-            (
-              "column-gap": #{$i * 0.25rem},
-            )
-          );
-        }
-      }
-
-      @include mx.fullhd {
-        &.#{iv.$class-prefix}is-#{$i}-fullhd {
-          @include cv.register-vars(
-            (
-              "column-gap": #{$i * 0.25rem},
-            )
-          );
-        }
+    @include mx.fullhd {
+      &.#{iv.$class-prefix}is-#{$i}-fullhd {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
       }
     }
   }

sass/grid/grid.scss

@@ -110,7 +110,7 @@ $grid-container-name: bulma-fixed-grid;
     );
   }
 
-  @for $i from 1 through 12 {
+  @for $i from 1 through 32 {
     &.#{iv.$class-prefix}is-col-min-#{$i} {
       @include cv.register-vars(
         (

sass/helpers/color.scss

@@ -34,306 +34,272 @@ $digits: (
   $background: hsl(
     #{cv.getVar($name, "", "-h")},
     #{cv.getVar($name, "", "-s")},
-    calc(#{cv.getVar("background-l")} + #{cv.getVar("background-l-delta")})
+    #{cv.getVar($name, "", "-l")}
   );
 
   $color: hsl(
     #{cv.getVar($name, "", "-h")},
     #{cv.getVar($name, "", "-s")},
-    calc(#{cv.getVar("color-l")} + #{cv.getVar("color-l-delta")})
+    #{cv.getVar($name, "", "-l")}
   );
 
-  [class*="#{iv.$helpers-prefix}color-#{$name}"],
-  [class*="#{iv.$helpers-has-prefix}text-#{$name}"] {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-l")},
-        "color-l-delta": 0%,
-      )
-    );
+  .#{iv.$helpers-has-prefix}text-#{$name} {
     color: $color !important;
   }
 
-  [class*="#{iv.$helpers-prefix}background-#{$name}"],
-  [class*="#{iv.$helpers-has-prefix}background-#{$name}"] {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-l")},
-        "background-l-delta": 0%,
-      )
-    );
+  .#{iv.$helpers-has-prefix}background-#{$name} {
     background-color: $background !important;
   }
 
   // Invert
-  .#{iv.$helpers-prefix}color-#{$name}-invert,
   .#{iv.$helpers-has-prefix}text-#{$name}-invert {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-invert-l")},
-      )
-    );
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-invert,
   .#{iv.$helpers-has-prefix}background-#{$name}-invert {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-invert-l")},
-      )
-    );
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-invert-l")}
+    ) !important;
   }
 
   // On Scheme
-  .#{iv.$helpers-prefix}color-#{$name}-on-scheme,
   .#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-on-scheme-l")},
-      )
-    );
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-on-scheme-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-on-scheme,
   .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-on-scheme-l")},
-      )
-    );
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-on-scheme-l")}
+    ) !important;
   }
 
   // Light
-  .#{iv.$helpers-prefix}color-#{$name}-light,
   .#{iv.$helpers-has-prefix}text-#{$name}-light {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-light-l")},
-      )
-    );
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-light-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-light,
   .#{iv.$helpers-has-prefix}background-#{$name}-light {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-light-l")},
-      )
-    );
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-light-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}color-#{$name}-light-invert,
   .#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-light-invert-l")},
-      )
-    );
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-light-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-light-invert,
   .#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-light-invert-l")},
-      )
-    );
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-light-invert-l")}
+    ) !important;
   }
 
   // Dark
-  .#{iv.$helpers-prefix}color-#{$name}-dark,
   .#{iv.$helpers-has-prefix}text-#{$name}-dark {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-dark-l")},
-      )
-    );
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-dark-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-dark,
   .#{iv.$helpers-has-prefix}background-#{$name}-dark {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-dark-l")},
-      )
-    );
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-dark-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}color-#{$name}-dark-invert,
   .#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar($name, "", "-dark-invert-l")},
-      )
-    );
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-dark-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-dark-invert,
   .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar($name, "", "-dark-invert-l")},
-      )
-    );
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar($name, "", "-dark-invert-l")}
+    ) !important;
   }
 
   // Soft/Bold
-  .#{iv.$helpers-prefix}color-#{$name}-soft,
   .#{iv.$helpers-has-prefix}text-#{$name}-soft {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar("soft-l")},
-      )
-    );
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("soft-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-soft,
   .#{iv.$helpers-has-prefix}background-#{$name}-soft {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar("soft-l")},
-      )
-    );
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("soft-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}color-#{$name}-bold,
   .#{iv.$helpers-has-prefix}text-#{$name}-bold {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar("bold-l")},
-      )
-    );
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("bold-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-bold,
   .#{iv.$helpers-has-prefix}background-#{$name}-bold {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar("bold-l")},
-      )
-    );
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("bold-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}color-#{$name}-soft-invert,
   .#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar("soft-invert-l")},
-      )
-    );
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("soft-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-soft-invert,
   .#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar("soft-invert-l")},
-      )
-    );
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("soft-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}color-#{$name}-bold-invert,
   .#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
-    @include cv.register-vars(
-      (
-        "color-l": #{cv.getVar("bold-invert-l")},
-      )
-    );
+    color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("bold-invert-l")}
+    ) !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name}-bold-invert,
   .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
-    @include cv.register-vars(
-      (
-        "background-l": #{cv.getVar("bold-invert-l")},
-      )
-    );
+    background-color: hsl(
+      #{cv.getVar($name, "", "-h")},
+      #{cv.getVar($name, "", "-s")},
+      #{cv.getVar("bold-invert-l")}
+    ) !important;
   }
 
   @each $digit in $digits {
-    .#{iv.$helpers-prefix}color-#{$name}-#{$digit},
     .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
-      @include cv.register-vars(
-        (
-          "color-l": #{cv.getVar($name, "", "-#{$digit}-l")},
-        )
-      );
+      color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        #{cv.getVar($name, "", "-#{$digit}-l")}
+      ) !important;
     }
 
-    .#{iv.$helpers-prefix}background-#{$name}-#{$digit},
     .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
-      @include cv.register-vars(
-        (
-          "background-l": #{cv.getVar($name, "", "-#{$digit}-l")},
-        )
-      );
+      background-color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        #{cv.getVar($name, "", "-#{$digit}-l")}
+      ) !important;
     }
 
-    .#{iv.$helpers-prefix}color-#{$name}-#{$digit}-invert,
     .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
-      @include cv.register-vars(
-        (
-          "color-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
-        )
-      );
+      color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        #{cv.getVar($name, "", "-#{$digit}-invert-l")}
+      ) !important;
     }
 
-    .#{iv.$helpers-prefix}background-#{$name}-#{$digit}-invert,
     .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
-      @include cv.register-vars(
-        (
-          "background-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
-        )
-      );
+      background-color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        #{cv.getVar($name, "", "-#{$digit}-invert-l")}
+      ) !important;
     }
   }
 
   // Hover
-  a.#{iv.$helpers-prefix}color-#{$name},
-  button.#{iv.$helpers-prefix}color-#{$name},
-  #{iv.$helpers-prefix}color-#{$name}.is-hoverable,
   a.#{iv.$helpers-has-prefix}text-#{$name},
   button.#{iv.$helpers-has-prefix}text-#{$name},
   #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
     &:hover,
     &:focus-visible {
-      @include cv.register-vars(
-        (
-          "color-l-delta": #{cv.getVar("hover-color-l-delta")},
+      color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        calc(
+          #{cv.getVar($name, "", "-l")} + #{cv.getVar("hover-color-l-delta")}
         )
-      );
+      ) !important;
     }
 
     &:active {
-      @include cv.register-vars(
-        (
-          "color-l-delta": #{cv.getVar("active-color-l-delta")},
+      color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        calc(
+          #{cv.getVar($name, "", "-l")} + #{cv.getVar("active-color-l-delta")}
         )
-      );
+      ) !important;
     }
   }
 
-  a.#{iv.$helpers-prefix}background-#{$name},
-  button.#{iv.$helpers-prefix}background-#{$name},
-  #{iv.$helpers-prefix}background-#{$name}.is-hoverable,
   a.#{iv.$helpers-has-prefix}background-#{$name},
   button.#{iv.$helpers-has-prefix}background-#{$name},
   #{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
     &:hover,
     &:focus-visible {
-      @include cv.register-vars(
-        (
-          "background-l-delta": #{cv.getVar("hover-background-l-delta")},
+      background-color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        calc(
+          #{cv.getVar($name, "", "-l")} +
+            #{cv.getVar("hover-background-l-delta")}
         )
-      );
+      ) !important;
     }
 
     &:active {
-      @include cv.register-vars(
-        (
-          "background-l-delta": #{cv.getVar("active-background-l-delta")},
+      background-color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        calc(
+          #{cv.getVar($name, "", "-l")} +
+            #{cv.getVar("active-background-l-delta")}
         )
-      );
+      ) !important;
     }
   }
 
@@ -352,13 +318,27 @@ $digits: (
 }
 
 @each $name, $shade in dv.$shades {
-  .#{iv.$helpers-prefix}color-#{$name},
   .#{iv.$helpers-has-prefix}text-#{$name} {
     color: $shade !important;
   }
 
-  .#{iv.$helpers-prefix}background-#{$name},
   .#{iv.$helpers-has-prefix}background-#{$name} {
     background-color: $shade !important;
   }
 }
+
+.#{iv.$helpers-has-prefix}text-current {
+  color: currentColor !important;
+}
+
+.#{iv.$helpers-has-prefix}text-inherit {
+  color: inherit !important;
+}
+
+.#{iv.$helpers-has-prefix}background-current {
+  background-color: currentColor !important;
+}
+
+.#{iv.$helpers-has-prefix}background-inherit {
+  background-color: inherit !important;
+}

sass/layout/container.scss

@@ -17,34 +17,42 @@ $container-max-width: iv.$fullhd !default;
     width: 100%;
   }
 
+  &.#{iv.$class-prefix}is-max-tablet {
+    max-width: iv.$tablet - $container-offset;
+  }
+
   @include mx.desktop {
     max-width: iv.$desktop - $container-offset;
   }
 
   @include mx.until-widescreen {
-    &.#{iv.$class-prefix}is-widescreen:not(.#{iv.$class-prefix}is-max-desktop) {
+    &.#{iv.$class-prefix}is-widescreen:not(
+        .#{iv.$class-prefix}is-max-tablet
+      ):not(.#{iv.$class-prefix}is-max-desktop) {
       max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
     }
   }
 
   @include mx.until-fullhd {
-    &.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-desktop):not(
-        .#{iv.$class-prefix}is-max-widescreen
-      ) {
+    &.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-tablet):not(
+        .#{iv.$class-prefix}is-max-desktop
+      ):not(.#{iv.$class-prefix}is-max-widescreen) {
       max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
     }
   }
 
   @include mx.widescreen {
-    &:not(.#{iv.$class-prefix}is-max-desktop) {
+    &:not(.#{iv.$class-prefix}is-max-tablet):not(
+        .#{iv.$class-prefix}is-max-desktop
+      ) {
       max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
     }
   }
 
   @include mx.fullhd {
-    &:not(.#{iv.$class-prefix}is-max-desktop):not(
-        .#{iv.$class-prefix}is-max-widescreen
-      ) {
+    &:not(.#{iv.$class-prefix}is-max-tablet):not(
+        .#{iv.$class-prefix}is-max-desktop
+      ):not(.#{iv.$class-prefix}is-max-widescreen) {
       max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
     }
   }

sass/layout/section.scss

@@ -31,4 +31,8 @@ $section-padding-large: 18rem 6rem !default;
       padding: cv.getVar("section-padding-large");
     }
   }
+
+  &.#{iv.$class-prefix}is-fullheight {
+    min-height: 100vh;
+  }
 }

sass/utilities/css-variables.scss

@@ -211,8 +211,9 @@
     }
   }
 
-  $shades: map.set($shades, "100", 100%);
-  @include register-var($name, 100%, "", "-100-l");
+  $l-100: math.min($l-0 + 100%, 100%);
+  $shades: map.set($shades, "100", $l-100);
+  @include register-var($name, $l-100, "", "-100-l");
 
   // === STEP 3 ===
   // Find accessible color combinations