Add documentation of all CSS variables available

docs/_data/variables/components/card.json

@@ -37,7 +37,7 @@
     },
     {
       "name": "card-header-shadow",
-      "value": "0 0.125em 0.25em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.1\n  )",
+      "value": "0 0.125em 0.25em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n)",
       "css-var": "card-header-shadow"
     },
     {

docs/_data/variables/components/modal.json

@@ -99,10 +99,6 @@
       "name": "modal-card-body-padding",
       "value": "2rem",
       "css-var": "modal-card-body-padding"
-    },
-    {
-      "name": "modal-breakpoint",
-      "value": "iv.$tablet"
     }
   ],
   "css-vars": [

docs/_data/variables/components/navbar.json

@@ -2,14 +2,17 @@
   "sass-vars": [
     {
       "name": "navbar-background-color",
+      "css-var": "navbar-background-color",
       "value": "var(--bulma-scheme-main)"
     },
     {
       "name": "navbar-box-shadow-size",
+      "css-var": "navbar-box-shadow-size",
       "value": "0 0.125em 0 0"
     },
     {
       "name": "navbar-box-shadow-color",
+      "css-var": "navbar-box-shadow-color",
       "value": "var(--bulma-background)"
     },
     {
@@ -19,124 +22,144 @@
     },
     {
       "name": "navbar-padding-vertical",
+      "css-var": "navbar-padding-vertical",
       "value": "1rem"
     },
     {
       "name": "navbar-padding-horizontal",
+      "css-var": "navbar-padding-horizontal",
       "value": "2rem"
     },
     {
       "name": "navbar-z",
+      "css-var": "navbar-z",
       "value": "30"
     },
     {
       "name": "navbar-fixed-z",
+      "css-var": "navbar-fixed-z",
       "value": "30"
     },
     {
       "name": "navbar-item-img-max-height",
+      "css-var": "navbar-item-img-max-height",
       "value": "1.75rem"
     },
     {
       "name": "navbar-burger-color",
+      "css-var": "navbar-burger-color",
       "value": "var(--bulma-navbar-item-color)"
     },
     {
       "name": "navbar-tab-hover-background-color",
+      "css-var": "navbar-tab-hover-background-color",
       "value": "transparent"
     },
     {
       "name": "navbar-tab-hover-border-bottom-color",
+      "css-var": "navbar-tab-hover-border-bottom-color",
       "value": "var(--bulma-link)"
     },
     {
       "name": "navbar-tab-active-color",
+      "css-var": "navbar-tab-active-color",
       "value": "var(--bulma-link)"
     },
     {
       "name": "navbar-tab-active-background-color",
+      "css-var": "navbar-tab-active-background-color",
       "value": "transparent"
     },
     {
       "name": "navbar-tab-active-border-bottom-color",
+      "css-var": "navbar-tab-active-border-bottom-color",
       "value": "var(--bulma-link)"
     },
     {
       "name": "navbar-tab-active-border-bottom-style",
+      "css-var": "navbar-tab-active-border-bottom-style",
       "value": "solid"
     },
     {
       "name": "navbar-tab-active-border-bottom-width",
+      "css-var": "navbar-tab-active-border-bottom-width",
       "value": "0.1875em"
     },
     {
       "name": "navbar-dropdown-background-color",
+      "css-var": "navbar-dropdown-background-color",
       "value": "var(--bulma-scheme-main)"
     },
     {
       "name": "navbar-dropdown-border-l",
+      "css-var": "navbar-dropdown-border-l",
       "value": "var(--bulma-border-l)"
     },
     {
       "name": "navbar-dropdown-border-color",
+      "css-var": "navbar-dropdown-border-color",
       "value": "hsl(\n  var(--bulma-navbar-h),\n  var(--bulma-navbar-s),\n  var(--bulma-navbar-dropdown-border-l)\n)"
     },
     {
       "name": "navbar-dropdown-border-style",
+      "css-var": "navbar-dropdown-border-style",
       "value": "solid"
     },
     {
       "name": "navbar-dropdown-border-width",
+      "css-var": "navbar-dropdown-border-width",
       "value": "0.125em"
     },
     {
       "name": "navbar-dropdown-offset",
+      "css-var": "navbar-dropdown-offset",
       "value": "-0.25em"
     },
     {
       "name": "navbar-dropdown-arrow",
+      "css-var": "navbar-dropdown-arrow",
       "value": "var(--bulma-link)"
     },
     {
       "name": "navbar-dropdown-radius",
+      "css-var": "navbar-dropdown-radius",
       "value": "var(--bulma-radius-large)"
     },
     {
       "name": "navbar-dropdown-z",
+      "css-var": "navbar-dropdown-z",
       "value": "20"
     },
     {
       "name": "navbar-dropdown-boxed-radius",
+      "css-var": "navbar-dropdown-boxed-radius",
       "value": "var(--bulma-radius-large)"
     },
     {
       "name": "navbar-dropdown-boxed-shadow",
-      "value": "0 0.5em 0.5em\n    hsla(\n      var(--bulma-scheme-h),\n      var(--bulma-scheme-s),\n      var(--bulma-scheme-invert-l),\n      0.1\n    ),\n  0 0 0 1px\n    hsla(\n      var(--bulma-scheme-h),\n      var(--bulma-scheme-s),\n      var(--bulma-scheme-invert-l),\n      0.1\n    )"
+      "css-var": "navbar-dropdown-boxed-shadow",
+      "value": "0 0.5em 0.5em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n),\n0 0 0 1px hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n)"
     },
     {
       "name": "navbar-divider-background-l",
+      "css-var": "navbar-divider-background-l",
       "value": "var(--bulma-background-l)"
     },
     {
       "name": "navbar-divider-height",
+      "css-var": "navbar-divider-height",
       "value": "0.125em"
     },
     {
       "name": "navbar-bottom-box-shadow-size",
+      "css-var": "navbar-bottom-box-shadow-size",
       "value": "0 -0.125em 0 0"
-    },
-    {
-      "name": "navbar-breakpoint",
-      "value": "iv.$desktop"
-    },
-    {
-      "name": "navbar-colors",
-      "value": "dv.$colors"
     }
   ],
   "css-vars": [
     {
       "name": "navbar-height",
+      "css-var": "navbar-height",
       "value": "3.25rem"
     }
   ]

docs/_data/variables/components/pagination.json

@@ -87,7 +87,7 @@
     },
     {
       "name": "pagination-shadow-inset",
-      "value": "inset 0 0.0625em 0.125em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.2\n  )",
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.2\n)",
       "css-var": "pagination-shadow-inset"
     }
   ],
@@ -226,7 +226,7 @@
     },
     {
       "name": "pagination-shadow-inset",
-      "value": "inset 0 0.0625em 0.125em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.2\n  )"
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.2\n)"
     },
     {
       "name": "pagination-selected-item-h",

docs/_data/variables/elements/block.json

@@ -1,4 +1,9 @@
 {
   "sass-vars": [],
-  "css-vars": []
+  "css-vars": [
+    {
+      "name": "block-spacing",
+      "value": "1.5rem"
+    }
+  ]
 }

docs/_data/variables/elements/box.json

@@ -27,12 +27,12 @@
     },
     {
       "name": "box-link-hover-shadow",
-      "value": "0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), #{cv.getVar(\n          \"scheme-invert-l\"\n        )}, 0.1),\n  0 0 0 1px var(--bulma-link)",
+      "value": "0 0.5em 1em -0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n),\n0 0 0 1px var(--bulma-link)",
       "css-var": "box-link-hover-shadow"
     },
     {
       "name": "box-link-active-shadow",
-      "value": "inset 0 1px 2px\n    hsla(\n      var(--bulma-scheme-h),\n      var(--bulma-scheme-s),\n      var(--bulma-scheme-invert-l),\n      0.2\n    ),\n  0 0 0 1px var(--bulma-link)",
+      "value": "inset 0 1px 2px hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.2\n),\n0 0 0 1px var(--bulma-link)",
       "css-var": "box-link-active-shadow"
     }
   ],
@@ -59,11 +59,11 @@
     },
     {
       "name": "box-link-hover-shadow",
-      "value": "0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), #{cv.getVar(\n          \"scheme-invert-l\"\n        )}, 0.1),\n  0 0 0 1px var(--bulma-link)"
+      "value": "0 0.5em 1em -0.125em hsla(\nvar(--bulma-scheme-h),\nvar(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1),\n0 0 0 1px var(--bulma-link)"
     },
     {
       "name": "box-link-active-shadow",
-      "value": "inset 0 1px 2px\n    hsla(\n      var(--bulma-scheme-h),\n      var(--bulma-scheme-s),\n      var(--bulma-scheme-invert-l),\n      0.2\n    ),\n  0 0 0 1px var(--bulma-link)"
+      "value": "inset 0 1px 2px hsla( var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.2),\n0 0 0 1px var(--bulma-link)"
     }
   ]
 }

docs/_data/variables/elements/button.json

@@ -148,10 +148,6 @@
     {
       "name": "button-colors",
       "value": "dv.$colors"
-    },
-    {
-      "name": "button-responsive-sizes",
-      "value": "(\n  \"mobile\": (\n    \"small\": calc(var(--bulma-size-small) * 0.75),\n    \"normal\": calc(var(--bulma-size-small) * 0.875),\n    \"medium\": var(--bulma-size-small),\n    \"large\": var(--bulma-size-normal),\n  ),\n  \"tablet-only\": (\n    \"small\": calc(var(--bulma-size-small) * 0.875),\n    \"normal\": var(--bulma-size-small),\n    \"medium\": var(--bulma-size-normal),\n    \"large\": var(--bulma-size-medium),\n  ),\n)"
     }
   ],
   "css-vars": [

docs/_data/variables/elements/delete.json

@@ -1,4 +1,21 @@
 {
   "sass-vars": [],
-  "css-vars": []
+  "css-vars": [
+    {
+      "name": "delete-dimensions",
+      "value": "1.25rem"
+    },
+    {
+      "name": "delete-background-l",
+      "value": "0%"
+    },
+    {
+      "name": "delete-background-alpha",
+      "value": "0.5"
+    },
+    {
+      "name": "delete-color",
+      "value": "var(--bulma-white)"
+    }
+  ]
 }

docs/_data/variables/elements/table.json

@@ -97,7 +97,7 @@
     },
     {
       "name": "table-striped-row-even-hover-background-color",
-      "value": "cv.getVar(\n  \"scheme-main-ter\"\n)",
+      "value": "var(--bulma-scheme-main-ter)",
       "css-var": "table-striped-row-even-hover-background-color"
     },
     {

docs/_data/variables/form/file.json

@@ -36,10 +36,6 @@
       "name": "file-name-max-width",
       "value": "16em",
       "css-var": "file-name-max-width"
-    },
-    {
-      "name": "file-colors",
-      "value": "shared.$form-colors"
     }
   ],
   "css-vars": [

docs/_data/variables/form/general.json

@@ -0,0 +1,174 @@
+{
+  "sass-vars": [
+    {
+      "name": "control-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "control-radius"
+    },
+    {
+      "name": "control-radius-small",
+      "value": "var(--bulma-radius-small)",
+      "css-var": "control-radius-small"
+    },
+    {
+      "name": "control-border-width",
+      "value": "1px",
+      "css-var": "control-border-width"
+    },
+    {
+      "name": "control-size",
+      "value": "var(--bulma-size-normal)",
+      "css-var": "control-size"
+    },
+    {
+      "name": "control-height",
+      "value": "2.5em",
+      "css-var": "control-height"
+    },
+    {
+      "name": "control-line-height",
+      "value": "1.5",
+      "css-var": "control-line-height"
+    },
+    {
+      "name": "control-padding-vertical",
+      "value": "calc(0.5em - 1px)",
+      "css-var": "control-padding-vertical"
+    },
+    {
+      "name": "control-padding-horizontal",
+      "value": "calc(0.75em - 1px)",
+      "css-var": "control-padding-horizontal"
+    },
+    {
+      "name": "control-focus-shadow-l",
+      "value": "50%",
+      "css-var": "control-focus-shadow-l"
+    },
+    {
+      "name": "label-color",
+      "css-var": "label-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "label-weight",
+      "css-var": "label-weight",
+      "value": "var(--bulma-weight-semibold)"
+    },
+    {
+      "name": "help-size",
+      "css-var": "help-size",
+      "value": "var(--bulma-size-small)"
+    }
+  ],
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "var(--bulma-scheme-h)"
+    },
+    {
+      "name": "input-s",
+      "value": "var(--bulma-scheme-s)"
+    },
+    {
+      "name": "input-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-border-l",
+      "value": "var(--bulma-border-l)"
+    },
+    {
+      "name": "input-border-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-hover-border-l-delta",
+      "value": "var(--bulma-hover-border-l-delta)"
+    },
+    {
+      "name": "input-active-border-l-delta",
+      "value": "var(--bulma-active-border-l-delta)"
+    },
+    {
+      "name": "input-focus-h",
+      "value": "var(--bulma-focus-h)"
+    },
+    {
+      "name": "input-focus-s",
+      "value": "var(--bulma-focus-s)"
+    },
+    {
+      "name": "input-focus-l",
+      "value": "var(--bulma-focus-l)"
+    },
+    {
+      "name": "input-focus-shadow-size",
+      "value": "var(--bulma-focus-shadow-size)"
+    },
+    {
+      "name": "input-focus-shadow-alpha",
+      "value": "var(--bulma-focus-shadow-alpha)"
+    },
+    {
+      "name": "input-color-l",
+      "value": "var(--bulma-text-strong-l)"
+    },
+    {
+      "name": "input-background-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-background-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-height",
+      "value": "var(--bulma-control-height)"
+    },
+    {
+      "name": "input-shadow",
+      "value": "inset 0 0.0625em 0.125em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.05\n  )"
+    },
+    {
+      "name": "input-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-strong-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-disabled-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-disabled-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-border-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-weak-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-arrow",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-icon-color",
+      "value": "var(--bulma-text-light)"
+    },
+    {
+      "name": "input-icon-hover-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-icon-focus-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-radius",
+      "value": "var(--bulma-radius)"
+    }
+  ]
+}

docs/_data/variables/form/input.json

@@ -0,0 +1,249 @@
+{
+  "sass-vars": [
+    {
+      "name": "input-h",
+      "value": "var(--bulma-scheme-h)",
+      "css-var": "input-h"
+    },
+    {
+      "name": "input-s",
+      "value": "var(--bulma-scheme-s)",
+      "css-var": "input-s"
+    },
+    {
+      "name": "input-l",
+      "value": "var(--bulma-scheme-main-l)",
+      "css-var": "input-l"
+    },
+    {
+      "name": "input-border-l",
+      "value": "var(--bulma-border-l)",
+      "css-var": "input-border-l"
+    },
+    {
+      "name": "input-border-l-delta",
+      "value": "0%",
+      "css-var": "input-border-l-delta"
+    },
+    {
+      "name": "input-hover-border-l-delta",
+      "value": "var(--bulma-hover-border-l-delta)",
+      "css-var": "input-hover-border-l-delta"
+    },
+    {
+      "name": "input-active-border-l-delta",
+      "value": "var(--bulma-active-border-l-delta)",
+      "css-var": "input-active-border-l-delta"
+    },
+    {
+      "name": "input-color-l",
+      "value": "var(--bulma-text-strong-l)",
+      "css-var": "input-color-l"
+    },
+    {
+      "name": "input-background-l",
+      "value": "var(--bulma-scheme-main-l)",
+      "css-var": "input-background-l"
+    },
+    {
+      "name": "input-background-l-delta",
+      "value": "0%",
+      "css-var": "input-background-l-delta"
+    },
+    {
+      "name": "input-height",
+      "value": "var(--bulma-control-height)",
+      "css-var": "input-height"
+    },
+    {
+      "name": "input-shadow",
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.05\n)",
+      "css-var": "input-shadow"
+    },
+    {
+      "name": "input-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-strong-l),\n  0.3\n)",
+      "css-var": "input-placeholder-color"
+    },
+    {
+      "name": "input-focus-h",
+      "value": "var(--bulma-focus-h)",
+      "css-var": "input-focus-h"
+    },
+    {
+      "name": "input-focus-s",
+      "value": "var(--bulma-focus-s)",
+      "css-var": "input-focus-s"
+    },
+    {
+      "name": "input-focus-l",
+      "value": "var(--bulma-focus-l)",
+      "css-var": "input-focus-l"
+    },
+    {
+      "name": "input-focus-shadow-size",
+      "value": "var(--bulma-focus-shadow-size)",
+      "css-var": "input-focus-shadow-size"
+    },
+    {
+      "name": "input-focus-shadow-alpha",
+      "value": "var(--bulma-focus-shadow-alpha)",
+      "css-var": "input-focus-shadow-alpha"
+    },
+    {
+      "name": "input-disabled-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "input-disabled-color"
+    },
+    {
+      "name": "input-disabled-background-color",
+      "value": "var(--bulma-background)",
+      "css-var": "input-disabled-background-color"
+    },
+    {
+      "name": "input-disabled-border-color",
+      "value": "var(--bulma-background)",
+      "css-var": "input-disabled-border-color"
+    },
+    {
+      "name": "input-disabled-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-weak-l),\n  0.3\n)",
+      "css-var": "input-disabled-placeholder-color"
+    },
+    {
+      "name": "input-arrow",
+      "value": "var(--bulma-link)",
+      "css-var": "input-arrow"
+    },
+    {
+      "name": "input-icon-color",
+      "value": "var(--bulma-text-light)",
+      "css-var": "input-icon-color"
+    },
+    {
+      "name": "input-icon-hover-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "input-icon-hover-color"
+    },
+    {
+      "name": "input-icon-focus-color",
+      "value": "var(--bulma-link)",
+      "css-var": "input-icon-focus-color"
+    },
+    {
+      "name": "input-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "input-radius"
+    }
+  ],
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "var(--bulma-scheme-h)"
+    },
+    {
+      "name": "input-s",
+      "value": "var(--bulma-scheme-s)"
+    },
+    {
+      "name": "input-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-border-l",
+      "value": "var(--bulma-border-l)"
+    },
+    {
+      "name": "input-border-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-hover-border-l-delta",
+      "value": "var(--bulma-hover-border-l-delta)"
+    },
+    {
+      "name": "input-active-border-l-delta",
+      "value": "var(--bulma-active-border-l-delta)"
+    },
+    {
+      "name": "input-focus-h",
+      "value": "var(--bulma-focus-h)"
+    },
+    {
+      "name": "input-focus-s",
+      "value": "var(--bulma-focus-s)"
+    },
+    {
+      "name": "input-focus-l",
+      "value": "var(--bulma-focus-l)"
+    },
+    {
+      "name": "input-focus-shadow-size",
+      "value": "var(--bulma-focus-shadow-size)"
+    },
+    {
+      "name": "input-focus-shadow-alpha",
+      "value": "var(--bulma-focus-shadow-alpha)"
+    },
+    {
+      "name": "input-color-l",
+      "value": "var(--bulma-text-strong-l)"
+    },
+    {
+      "name": "input-background-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-background-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-height",
+      "value": "var(--bulma-control-height)"
+    },
+    {
+      "name": "input-shadow",
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.05\n)"
+    },
+    {
+      "name": "input-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-strong-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-disabled-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-disabled-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-border-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-weak-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-arrow",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-icon-color",
+      "value": "var(--bulma-text-light)"
+    },
+    {
+      "name": "input-icon-hover-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-icon-focus-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-radius",
+      "value": "var(--bulma-radius)"
+    }
+  ]
+}

docs/_data/variables/form/textarea.json

@@ -0,0 +1,41 @@
+{
+  "sass-vars": [
+    {
+      "name": "textarea-padding",
+      "css-var": "textarea-padding",
+      "value": "var(--bulma-control-padding-horizontal)"
+    },
+    {
+      "name": "textarea-max-height",
+      "css-var": "textarea-max-height",
+      "value": "40em"
+    },
+    {
+      "name": "textarea-min-height",
+      "css-var": "textarea-min-height",
+      "value": "8em"
+    }
+  ],
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "#{cv.getVar(\"scheme-h\")},"
+    },
+    {
+      "name": "input-s",
+      "value": "#{cv.getVar(\"scheme-s\")},"
+    },
+    {
+      "name": "input-border-style",
+      "value": "solid,"
+    },
+    {
+      "name": "input-border-width",
+      "value": "1px,"
+    },
+    {
+      "name": "input-border-l",
+      "value": "#{cv.getVar(\"border-l\")},"
+    }
+  ]
+}

docs/_data/variables/layout/container.json

@@ -2,11 +2,13 @@
   "sass-vars": [
     {
       "name": "container-offset",
-      "value": "2 * iv.$gap"
+      "css-var": "container-offset",
+      "value": "64px"
     },
     {
       "name": "container-max-width",
-      "value": "iv.$fullhd"
+      "css-var": "container-max-width",
+      "value": "1408px"
     }
   ],
   "css-vars": []

docs/_data/variables/layout/hero.json

@@ -26,8 +26,19 @@
       "css-var": "hero-body-padding-large"
     },
     {
-      "name": "hero-colors",
+      "name": "hero-gradient-h-offset",
-      "value": "dv.$colors"
+      "value": "5deg",
+      "css-var": "hero-gradient-h-offset"
+    },
+    {
+      "name": "hero-gradient-s-offset",
+      "value": "10%",
+      "css-var": "hero-gradient-s-offset"
+    },
+    {
+      "name": "hero-gradient-l-offset",
+      "value": "5%",
+      "css-var": "hero-gradient-l-offset:"
     }
   ],
   "css-vars": [

docs/_includes/docs/components/variables.html

@@ -2,8 +2,14 @@
 {% assign subtab = include.subtab | default: page.doc-subtab %}
 {% assign data = include.data | default: site.data.variables[tab][subtab] %}
 {% assign sass_vars = include.data | default: data["sass-vars"] %}
+{% assign sass_vars_size = sass_vars | size %}
 {% assign css_vars = include.data | default: data["css-vars"] %}
+{% assign css_vars_size = css_vars | size %}
 
+{% if sass_vars_size > 0 or css_vars_size > 0 %}
+{% include docs/elements/anchor.html name="Sass and CSS variables" %}
+
+{% if sass_vars_size > 0 %}
 <div class="bd-vars-table block table-container">
   <table>
     <thead>
@@ -14,7 +20,7 @@
             <span>Sass Variable</span>
           </div>
         </th>
-        {% unless include.hide_css_vars %}
+        {% unless include.hide_css_vars or page.meta.hide_css_vars %}
           <th>
             <div class="icon-text">
               <span class="icon has-text-link"><i class="fab fa-css3"></i></span>
@@ -36,7 +42,7 @@
         {% unless sass_var["value"] == "dv.$colors" %}
         <tr>
           <td class="bd-theme-sass">{% highlight sass %}${{ sass_var["name"] }}{% endhighlight %}</td>
-          {% unless include.hide_css_vars %}
+          {% unless include.hide_css_vars or page.meta.hide_css_vars %}
             <td class="bd-theme-code">{% highlight css %}var(--bulma-{{ sass_var["css-var"] }}){% endhighlight %}</td>
           {% endunless %}
           <td class="bd-theme-docs">{% highlight css %}{{ sass_var["value"] }}{% endhighlight %}</td>
@@ -46,3 +52,35 @@
     </tbody>
   </table>
 </div>
+{% elsif css_vars_size > 0 %}
+<div class="bd-vars-table block table-container">
+  <table>
+    <thead>
+      <tr>
+        <th>
+          <div class="icon-text">
+            <span class="icon has-text-link"><i class="fab fa-css3"></i></span>
+            <span>CSS Variable</span>
+          </div>
+        </th>
+        <th>
+          <div class="icon-text">
+            <span class="icon has-text-success"><i class="fas fa-code"></i></span>
+            <span>Value</span>
+          </div>
+        </th>
+      </tr>
+    </thead>
+
+    <tbody>
+      {% for css_var in css_vars %}
+        <tr>
+          <td class="bd-theme-sass">{% highlight sass %}var(--bulma-{{ css_var["name"] }}){% endhighlight %}</td>
+          <td class="bd-theme-docs">{% highlight css %}{{ css_var["value"] }}{% endhighlight %}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+{% endif %}
+{% endif %}

docs/_layouts/docs.html

@@ -40,7 +40,6 @@ route: documentation
       {% endif %}
 
         {% if page.meta.variables %}
-        {% include docs/elements/anchor.html name="Sass and CSS variables" %}
           {% include docs/components/variables.html %}
         {% endif %}
     </div>

docs/documentation/components/tabs.html

@@ -482,9 +482,8 @@ name="Combining" %}
 </div>
 
 {% include docs/elements/snippet.html content=tabs_centered_boxed_example
-horizontal=true more=true %} {% include docs/elements/snippet.html
+horizontal=true more=true %}
-content=tabs_toggle_fullwidth_example horizontal=true more=true %} {% include
+{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
-docs/elements/snippet.html content=tabs_centered_boxed_medium_example
+{% include docs/elements/snippet.html content=tabs_centered_boxed_medium_example
-horizontal=true more=true %} {% include docs/elements/snippet.html
+horizontal=true more=true %}
-content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} {%
+{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
-include docs/components/variables.html type='component' %}

docs/documentation/elements/delete.html

@@ -78,3 +78,5 @@ meta:
 </div>
 
 {% include docs/elements/snippet.html content=cross_elements_example %}
+
+{% include docs/components/variables.html %}

docs/documentation/elements/image.html

@@ -21,6 +21,7 @@ meta:
   colors: false
   sizes: false
   variables: true
+  hide_css_vars: true
 ---
 {% capture image %}
 <figure class="image is-128x128">

docs/documentation/elements/table.html

@@ -862,7 +862,3 @@ meta:
 {{- scrollable_table -}}
 {%- endhighlight %}
 {{ simple_scrollable_table_example }}
-{%
-  include docs/components/variables.html
-  type='element'
-%}

docs/documentation/form/file.html

@@ -450,7 +450,3 @@ meta:
 </div>
 
 {% include docs/elements/snippet.html horizontal=true content=file_javascript %}
-{%
-  include docs/components/variables.html type='element'
-  variables_keys=page.variables_keys folder='elements' file='form'
-%}

docs/documentation/form/general.html

@@ -1108,14 +1108,3 @@ variables_keys:
   folder='utilities'
   file='controls'
 %}
-
-{%
-  include docs/components/variables.html
-  anchor_name='Form variables'
-  type='element'
-  variables_keys=page.variables_keys
-  folder='elements'
-  file='form'
-  hide_anchor=true
-  hide_content=true
-%}

docs/documentation/form/input.html

@@ -442,8 +442,3 @@ meta:
     {%- endhighlight %}
   </div>
 </div>
-
-{%
-  include docs/components/variables.html type='element'
-  variables_keys=page.variables_keys folder='elements' file='form'
-%}

docs/documentation/form/textarea.html

@@ -12,7 +12,7 @@ breadcrumb:
 meta:
   colors: true
   sizes: true
-  variables: false
+  variables: true
 ---
 {% capture textarea_example %}
 <textarea class="textarea" placeholder="e.g. Hello world"></textarea>

docs/documentation/layout/container.html

@@ -15,6 +15,7 @@ meta:
   colors: false
   sizes: true
   variables: true
+  hide_css_vars: true
 ---
 
 {% capture container_example %}
@@ -310,6 +311,4 @@ maximum widths" %}
 
 <div class="bd-example is-fullwidth">{{ container_fluid_example }}</div>
 
-{% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %} {%
+{% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %}
-include docs/components/variables.html type='element'
-data=site.data.variables.elements.container %}

docs/documentation/layout/footer.html

@@ -9,6 +9,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-footer
+meta:
+  variables: true
 ---
 {% capture footer_example %}
 <footer class="footer">

docs/documentation/layout/level.html

@@ -9,6 +9,9 @@ breadcrumb:
   - documentation
   - layout
   - layout-level
+meta:
+  variables: true
+  hide_css_vars: true
 ---
 {% capture nav_example %}
 <!-- Main container -->

docs/documentation/layout/media-object.html

@@ -9,6 +9,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-media
+meta:
+  variables: true
 ---
 {% capture media_example %}
 <article class="media">

docs/documentation/layout/section.html

@@ -10,6 +10,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-section
+meta:
+  variables: true
 ---
 {% capture section_example %}
 <section class="section">

package.json

@@ -48,7 +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",
+    "test": "sass --style=expanded --source-map --watch test.scss test.css",
     "start": "npm run build-bulma -- --watch"
   },
   "files": [

sass/form/shared.scss

@@ -13,6 +13,11 @@ $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-border-color: hsl(
+  cv.getVar("input-h"),
+  cv.getVar("input-s"),
+  calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
+) !default;
 $input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
 $input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
 $input-color-l: cv.getVar("text-strong-l") !default;
@@ -70,6 +75,7 @@ $input-radius: cv.getVar("radius") !default;
       "input-border-width": #{$input-border-width},
       "input-border-l": #{$input-border-l},
       "input-border-l-delta": #{$input-border-l-delta},
+      "input-border-color": #{$input-border-color},
       "input-hover-border-l-delta": #{$input-hover-border-l-delta},
       "input-active-border-l-delta": #{$input-active-border-l-delta},
       "input-focus-h": #{$input-focus-h},
@@ -107,11 +113,7 @@ $input-radius: cv.getVar("radius") !default;
         )}
     )
   );
-  border-color: hsl(
+  border-color: cv.getVar("input-border-color");
-    cv.getVar("input-h"),
-    cv.getVar("input-s"),
-    calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
-  );
   border-radius: cv.getVar("input-radius");
   color: hsl(
     #{cv.getVar("input-h")},

sass/layout/hero.scss

@@ -10,9 +10,9 @@ $hero-body-padding-small: 1.5rem !default;
 $hero-body-padding-medium: 9rem 4.5rem !default;
 $hero-body-padding-large: 18rem 6rem !default;
 
-$hero-gradient-h-offset: 5deg;
+$hero-gradient-h-offset: 5deg !default;
-$hero-gradient-s-offset: 10%;
+$hero-gradient-s-offset: 10% !default;
-$hero-gradient-l-offset: 5%;
+$hero-gradient-l-offset: 5% !default;
 
 $hero-colors: dv.$colors !default;
 
@@ -25,6 +25,9 @@ $hero-colors: dv.$colors !default;
       "hero-body-padding-small": #{$hero-body-padding-small},
       "hero-body-padding-medium": #{$hero-body-padding-medium},
       "hero-body-padding-large": #{$hero-body-padding-large},
+      "hero-gradient-h-offset": #{$hero-gradient-h-offset},
+      "hero-gradient-s-offset": #{$hero-gradient-s-offset},
+      "hero-gradient-l-offset": #{$hero-gradient-l-offset},
     )
   );
 }