Add documentation of all CSS variables available

diff --git a/docs/_data/variables/components/card.json b/docs/_data/variables/components/card.json
index bf5ef116be0a2fc979e6082436d3b76fac9e1c04..cc66cb5e1e968ccff344ca34ed1b56092d56be68 100644 (file)
--- a/docs/_data/variables/components/card.json
+++ b/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"
     },
     {
@@ -138,4 +138,4 @@
       "value": "var(--bulma-block-spacing)"
     }
   ]
-}
\ No newline at end of file
+}

diff --git a/docs/_data/variables/components/modal.json b/docs/_data/variables/components/modal.json
index faac8ef9c22436c8e5896fbc43e115c2c4533fa4..5a93c24b5eccaaee2b0f22eca9ebf24e23cc8ac3 100644 (file)
--- a/docs/_data/variables/components/modal.json
+++ b/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": [
@@ -187,4 +183,4 @@
       "value": "2rem"
     }
   ]
-}
\ No newline at end of file
+}

diff --git a/docs/_data/variables/components/navbar.json b/docs/_data/variables/components/navbar.json
index 4be51be99dca390f278bc28f4359d4f2f1344363..051cc2eed528f1c0315cc63fb3c23d625c89e895 100644 (file)
--- a/docs/_data/variables/components/navbar.json
+++ b/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,125 +22,145 @@
     },
     {
       "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"
     }
   ]
-}
\ No newline at end of file
+}

diff --git a/docs/_data/variables/components/pagination.json b/docs/_data/variables/components/pagination.json
index 34b4f7672f84fb73bc4b421918c3a2369cf03ba6..b9179e7f0589032a8e9705e77576d32308da0c5d 100644 (file)
--- a/docs/_data/variables/components/pagination.json
+++ b/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",
@@ -253,4 +253,4 @@
       "value": "#{$pagination-selected-item-color-l},"
     }
   ]
-}
\ No newline at end of file
+}

diff --git a/docs/_data/variables/elements/block.json b/docs/_data/variables/elements/block.json
index 621e0c86631954674ec23bf124ac29df4730db48..dcd21df9db140f2057a99d6fa1ee2e3a700b617b 100644 (file)
--- a/docs/_data/variables/elements/block.json
+++ b/docs/_data/variables/elements/block.json
@@ -1,4 +1,9 @@
 {
   "sass-vars": [],
-  "css-vars": []
-}
\ No newline at end of file
+  "css-vars": [
+    {
+      "name": "block-spacing",
+      "value": "1.5rem"
+    }
+  ]
+}

diff --git a/docs/_data/variables/elements/box.json b/docs/_data/variables/elements/box.json
index ebc00d2b94b777cbeb839b96e227d6e01d782919..1b05969f0a87bd9de431a5f2f53ffe6ec6dabba7 100644 (file)
--- a/docs/_data/variables/elements/box.json
+++ b/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)"
     }
   ]
-}
\ No newline at end of file
+}

diff --git a/docs/_data/variables/elements/button.json b/docs/_data/variables/elements/button.json
index 1e8e8ed5b538b7f557c8ceaec2b2a685eb094a9b..f9647715c31f442118ced0e2e77cb5903d33cb50 100644 (file)
--- a/docs/_data/variables/elements/button.json
+++ b/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": [
@@ -272,4 +268,4 @@
       "value": "var(--bulma-border)"
     }
   ]
-}
\ No newline at end of file
+}

diff --git a/docs/_data/variables/elements/delete.json b/docs/_data/variables/elements/delete.json
index 621e0c86631954674ec23bf124ac29df4730db48..0b757624b11e1a664ebb2d3ba5f44aa4bb842174 100644 (file)
--- a/docs/_data/variables/elements/delete.json
+++ b/docs/_data/variables/elements/delete.json
@@ -1,4 +1,21 @@
 {
   "sass-vars": [],
-  "css-vars": []
-}
\ No newline at end of file
+  "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)"
+    }
+  ]
+}

diff --git a/docs/_data/variables/elements/table.json b/docs/_data/variables/elements/table.json
index 0a430e6c4c2cd6503d09e85c61a460f3cfb01b70..cc519b1f3365f5a910b457808004bd10802272b7 100644 (file)
--- a/docs/_data/variables/elements/table.json
+++ b/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"
     },
     {
@@ -187,4 +187,4 @@
       "value": "cv.getVar(\n  \"scheme-main-ter\"\n)"
     }
   ]
-}
\ No newline at end of file
+}

diff --git a/docs/_data/variables/form/file.json b/docs/_data/variables/form/file.json
index ff17d91f96a8ebe1f49915a190e1a1e4c9df9b1c..7af3ae181970921df24f6eb7904e923bc89e6d63 100644 (file)
--- a/docs/_data/variables/form/file.json
+++ b/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": [
@@ -124,4 +120,4 @@
       "value": "#{$file-active-color-l-delta},"
     }
   ]
-}
\ No newline at end of file
+}

diff --git a/docs/_data/variables/form/general.json b/docs/_data/variables/form/general.json
new file mode 100644 (file)
index 0000000..f8e6586
--- /dev/null
+++ b/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)"
+    }
+  ]
+}

diff --git a/docs/_data/variables/form/input.json b/docs/_data/variables/form/input.json
new file mode 100644 (file)
index 0000000..604cfc1
--- /dev/null
+++ b/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)"
+    }
+  ]
+}

diff --git a/docs/_data/variables/form/textarea.json b/docs/_data/variables/form/textarea.json
new file mode 100644 (file)
index 0000000..92ecb90
--- /dev/null
+++ b/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\")},"
+    }
+  ]
+}

diff --git a/docs/_data/variables/layout/container.json b/docs/_data/variables/layout/container.json
index a7c855e9ca1851ee5bf2e6a25f974d5084d0817a..2bb4d5d710057055319b6d46dbc2eb73c9ce4399 100644 (file)
--- a/docs/_data/variables/layout/container.json
+++ b/docs/_data/variables/layout/container.json
@@ -2,12 +2,14 @@
   "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": []
-}
\ No newline at end of file
+}

diff --git a/docs/_data/variables/layout/hero.json b/docs/_data/variables/layout/hero.json
index 03a28695d01112a658565585550149b8ed8311ec..67bda73ede425648e1b0a31b41831de7ebaed367 100644 (file)
--- a/docs/_data/variables/layout/hero.json
+++ b/docs/_data/variables/layout/hero.json
@@ -26,8 +26,19 @@
       "css-var": "hero-body-padding-large"
     },
     {
-      "name": "hero-colors",
-      "value": "dv.$colors"
+      "name": "hero-gradient-h-offset",
+      "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": [
@@ -52,4 +63,4 @@
       "value": "18rem 6rem"
     }
   ]
-}
\ No newline at end of file
+}

diff --git a/docs/_data/variables/layout/level.json b/docs/_data/variables/layout/level.json
index 40b5a160c7dc465af2e1dd9ae43466b895e581b7..a17e2d5bb33e73169bc8b3e8a3fb140a1fe89d7e 100644 (file)
--- a/docs/_data/variables/layout/level.json
+++ b/docs/_data/variables/layout/level.json
@@ -6,4 +6,4 @@
     }
   ],
   "css-vars": []
-}
\ No newline at end of file
+}

diff --git a/docs/_data/variables/layout/media.json b/docs/_data/variables/layout/media-object.json
similarity index 100%
rename from docs/_data/variables/layout/media.json
rename to docs/_data/variables/layout/media-object.json

diff --git a/docs/_includes/docs/components/variables.html b/docs/_includes/docs/components/variables.html
index 782962826e9961eea2a892098db2b179a025571f..0d107888b9a3c54706063c8feb04473d1f0f52f3 100644 (file)
--- a/docs/_includes/docs/components/variables.html
+++ b/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 %}

diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
index 6078b3c707d187e308ff202f79cab8a23d2c7e1a..e73813a7222c92163ae2b1d75ffb079492a4245e 100644 (file)
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@@ -39,10 +39,9 @@ route: documentation
         {{ content }}
       {% endif %}
 
-      {% if page.meta.variables %}
-        {% include docs/elements/anchor.html name="Sass and CSS variables" %}
-        {% include docs/components/variables.html %}
-      {% endif %}
+        {% if page.meta.variables %}
+          {% include docs/components/variables.html %}
+        {% endif %}
     </div>
 
     {% include docs/components/pagination.html %}

diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html
index 39d1ccc88d1b1eb2bebd3858f24ecdb36e970e5e..e18ee0fcbfb9d3dbdddc9a65fcc507ac8fe0ee6b 100644 (file)
--- a/docs/documentation/components/tabs.html
+++ b/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
-content=tabs_toggle_fullwidth_example horizontal=true more=true %} {% include
-docs/elements/snippet.html content=tabs_centered_boxed_medium_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' %}
+horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_centered_boxed_medium_example
+horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}

diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html
index acbabeca6ee78f7b70741f0667925dac555b6f70..f81e7e6eee8b330e073c349a63b00a0c82fd04cb 100644 (file)
--- a/docs/documentation/elements/delete.html
+++ b/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 %}

diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html
index 22522a65eecdec5c108ddbfd093ae8f5fbdd6f35..b066f4531701cf52e37c563d57b9e03795f9ecff 100644 (file)
--- a/docs/documentation/elements/image.html
+++ b/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">

diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html
index 67cbcb2a5fc79d1c35b384389bca3b18c6d3ecb5..828d53f83d19877ffae8f438a087c3890b29c318 100644 (file)
--- a/docs/documentation/elements/table.html
+++ b/docs/documentation/elements/table.html
@@ -862,7 +862,3 @@ meta:
 {{- scrollable_table -}}
 {%- endhighlight %}
 {{ simple_scrollable_table_example }}
-{%
-  include docs/components/variables.html
-  type='element'
-%}

diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html
index f50eba49a56edaa13b310f6a91ef7e01bac16d5b..58599a4ab5c0c2f56a1edadc21ad4b2ac005da61 100644 (file)
--- a/docs/documentation/form/file.html
+++ b/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'
-%}

diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html
index 009290aafb62766604f276ed065db5b521b3771a..229b88532093a792d7e824993d296ef9a97d4f30 100644 (file)
--- a/docs/documentation/form/general.html
+++ b/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
-%}

diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html
index c7be0376fad8a5f0947f506a4371e1646d2a0b34..df9f9f35da54579953b1c821a776177709417394 100644 (file)
--- a/docs/documentation/form/input.html
+++ b/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'
-%}

diff --git a/docs/documentation/form/textarea.html b/docs/documentation/form/textarea.html
index 5f423b2e52d3cddbe9624b3e103c92e99efb7b30..91c688aa2f82990497e1fa3fa4c87dcb748885ff 100644 (file)
--- a/docs/documentation/form/textarea.html
+++ b/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>

diff --git a/docs/documentation/layout/container.html b/docs/documentation/layout/container.html
index 8376314ba680efa48602168765db090d7281f982..ab6d9eb15dcc31888bd4aeb60ab8c2eb49038e2d 100644 (file)
--- a/docs/documentation/layout/container.html
+++ b/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 %} {%
-include docs/components/variables.html type='element'
-data=site.data.variables.elements.container %}
+{% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %}

diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html
index df74c4460f64e846c51cdc7186fc43beac8b9f3d..4b1aae0083368407fa76cd3efdc23535db554d39 100644 (file)
--- a/docs/documentation/layout/footer.html
+++ b/docs/documentation/layout/footer.html
@@ -9,6 +9,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-footer
+meta:
+  variables: true
 ---
 {% capture footer_example %}
 <footer class="footer">

diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html
index 4ebba75f4c655a98c19bf4426d8b8dcd39ca4873..ce2aa9febc430d169a98aa03c72815fe583dccde 100644 (file)
--- a/docs/documentation/layout/level.html
+++ b/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 -->

diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html
index fc864b97138823b6381835d3124b164ad2818573..3443e7be4d1be2dcd54ff80e89f1ec29a02725a5 100644 (file)
--- a/docs/documentation/layout/media-object.html
+++ b/docs/documentation/layout/media-object.html
@@ -9,6 +9,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-media
+meta:
+  variables: true
 ---
 {% capture media_example %}
 <article class="media">

diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html
index f4a859e242e400d3b76aa15767eebecbbedb6039..995aced2098160fbe63163227961d62dfef8afbc 100644 (file)
--- a/docs/documentation/layout/section.html
+++ b/docs/documentation/layout/section.html
@@ -10,6 +10,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-section
+meta:
+  variables: true
 ---
 {% capture section_example %}
 <section class="section">

diff --git a/package.json b/package.json
index 816e670f06a5d5bf73a65e9353af24ad9892c176..cdfc1c1a18ec533120bc21f78cc03cde60da659e 100644 (file)
--- a/package.json
+++ b/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": [

diff --git a/sass/form/shared.scss b/sass/form/shared.scss
index 8eb6c4297200c3b81bf1e257feec61abbb512189..f28d55c83b58f05b19070e20877367905e53cf46 100644 (file)
--- a/sass/form/shared.scss
+++ b/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(
-    cv.getVar("input-h"),
-    cv.getVar("input-s"),
-    calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
-  );
+  border-color: cv.getVar("input-border-color");
   border-radius: cv.getVar("input-radius");
   color: hsl(
     #{cv.getVar("input-h")},

diff --git a/sass/layout/hero.scss b/sass/layout/hero.scss
index 3cd1cfd8a43db1167d4c0fc1daa6d5d59c68c70b..8972aab556cff8e196be6ed3e795920f03117eb7 100644 (file)
--- a/sass/layout/hero.scss
+++ b/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-s-offset: 10%;
-$hero-gradient-l-offset: 5%;
+$hero-gradient-h-offset: 5deg !default;
+$hero-gradient-s-offset: 10% !default;
+$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},
     )
   );
 }