Add more Sass and CSS variables

CHANGELOG.md

@@ -10,6 +10,19 @@
 - 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
 

css/bulma.css

@@ -4025,6 +4025,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]) {
@@ -4045,6 +4047,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 {
@@ -5433,6 +5437,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);
@@ -5508,11 +5514,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%;
@@ -6168,14 +6169,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);
@@ -6189,7 +6198,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 {
@@ -6227,7 +6236,7 @@ button.tag:active,
 }
 
 .field {
-  --bulma-block-spacing: 0.75rem;
+  --bulma-block-spacing: var(--bulma-field-block-spacing);
 }
 .field.has-addons {
   display: flex;

css/versions/bulma-no-dark-mode.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%;
@@ -3365,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);
@@ -3386,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 {
@@ -3424,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;

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%;
@@ -3365,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);
@@ -3386,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 {
@@ -3424,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;

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%;
@@ -3365,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);
@@ -3386,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 {
@@ -3424,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;

css/versions/bulma-prefixed.min.css

@@ -4025,6 +4025,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]) {
@@ -4045,6 +4047,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 {
@@ -5433,6 +5437,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);
@@ -5508,11 +5514,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%;
@@ -6168,14 +6169,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);
@@ -6189,7 +6198,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 {
@@ -6227,7 +6236,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;

docs/assets/css/website.css

@@ -7464,6 +7464,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]) {
@@ -7484,6 +7486,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 {
@@ -9272,6 +9276,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);
@@ -9347,11 +9353,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%;
@@ -10277,14 +10278,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);
@@ -10298,7 +10307,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 {
@@ -10366,7 +10375,7 @@ button.tag:active,
 }
 
 .field {
-  --bulma-block-spacing: 0.75rem;
+  --bulma-block-spacing: var(--bulma-field-block-spacing);
 }
 .field.has-addons {
   display: flex;

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/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")},
     )
   );