Docs/variables data (#1314)

* Replace variables.json with colors.json and update related files accordingly

* Add variables data files

* Update variables include template and all related files to use new variables data

* Fix mobile breakpoint id typo in responsivness docs page

* Fix Liquid syntax error in made-with-bulma docs page

* Update bulma sass files count in modular docs page

* Use breakpoints data in responsiveness helpers docs page

* Use breakpoints and variables data in typography helpers docs page

* Add missing page titles in docs pages front matter

docs/_data/variables/elements/box.json

@@ -0,0 +1,45 @@
+{
+  "dir_name": "elements",
+  "file_name": "box",
+  "file_relative_path": "elements/box.sass",
+  "file_line_from": 1,
+  "file_line_to": 8,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/box.sass#L1,L8",
+  "vars": {
+    "box-color": {
+      "id": "box-color",
+      "name": "$box-color",
+      "value": "$text"
+    },
+    "box-background-color": {
+      "id": "box-background-color",
+      "name": "$box-background-color",
+      "value": "$white"
+    },
+    "box-radius": {
+      "id": "box-radius",
+      "name": "$box-radius",
+      "value": "$radius-large"
+    },
+    "box-shadow": {
+      "id": "box-shadow",
+      "name": "$box-shadow",
+      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
+    },
+    "box-padding": {
+      "id": "box-padding",
+      "name": "$box-padding",
+      "value": "1.25rem"
+    },
+    "box-link-hover-shadow": {
+      "id": "box-link-hover-shadow",
+      "name": "$box-link-hover-shadow",
+      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px $link"
+    },
+    "box-link-active-shadow": {
+      "id": "box-link-active-shadow",
+      "name": "$box-link-active-shadow",
+      "value": "inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link"
+    }
+  }
+}

docs/_data/variables/elements/button.json

@@ -0,0 +1,115 @@
+{
+  "dir_name": "elements",
+  "file_name": "button",
+  "file_relative_path": "elements/button.sass",
+  "file_line_from": 1,
+  "file_line_to": 27,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/button.sass#L1,L27",
+  "vars": {
+    "button-color": {
+      "id": "button-color",
+      "name": "$button-color",
+      "value": "$grey-darker"
+    },
+    "button-background-color": {
+      "id": "button-background-color",
+      "name": "$button-background-color",
+      "value": "$white"
+    },
+    "button-border-color": {
+      "id": "button-border-color",
+      "name": "$button-border-color",
+      "value": "$grey-lighter"
+    },
+    "button-hover-color": {
+      "id": "button-hover-color",
+      "name": "$button-hover-color",
+      "value": "$link-hover"
+    },
+    "button-hover-border-color": {
+      "id": "button-hover-border-color",
+      "name": "$button-hover-border-color",
+      "value": "$link-hover-border"
+    },
+    "button-focus-color": {
+      "id": "button-focus-color",
+      "name": "$button-focus-color",
+      "value": "$link-focus"
+    },
+    "button-focus-border-color": {
+      "id": "button-focus-border-color",
+      "name": "$button-focus-border-color",
+      "value": "$link-focus-border"
+    },
+    "button-focus-box-shadow-size": {
+      "id": "button-focus-box-shadow-size",
+      "name": "$button-focus-box-shadow-size",
+      "value": "0 0 0 0.125em"
+    },
+    "button-focus-box-shadow-color": {
+      "id": "button-focus-box-shadow-color",
+      "name": "$button-focus-box-shadow-color",
+      "value": "rgba($link, 0.25)"
+    },
+    "button-active-color": {
+      "id": "button-active-color",
+      "name": "$button-active-color",
+      "value": "$link-active"
+    },
+    "button-active-border-color": {
+      "id": "button-active-border-color",
+      "name": "$button-active-border-color",
+      "value": "$link-active-border"
+    },
+    "button-text-color": {
+      "id": "button-text-color",
+      "name": "$button-text-color",
+      "value": "$text"
+    },
+    "button-text-hover-background-color": {
+      "id": "button-text-hover-background-color",
+      "name": "$button-text-hover-background-color",
+      "value": "$background"
+    },
+    "button-text-hover-color": {
+      "id": "button-text-hover-color",
+      "name": "$button-text-hover-color",
+      "value": "$text-strong"
+    },
+    "button-disabled-background-color": {
+      "id": "button-disabled-background-color",
+      "name": "$button-disabled-background-color",
+      "value": "$white"
+    },
+    "button-disabled-border-color": {
+      "id": "button-disabled-border-color",
+      "name": "$button-disabled-border-color",
+      "value": "$grey-lighter"
+    },
+    "button-disabled-shadow": {
+      "id": "button-disabled-shadow",
+      "name": "$button-disabled-shadow",
+      "value": "none"
+    },
+    "button-disabled-opacity": {
+      "id": "button-disabled-opacity",
+      "name": "$button-disabled-opacity",
+      "value": "0.5"
+    },
+    "button-static-color": {
+      "id": "button-static-color",
+      "name": "$button-static-color",
+      "value": "$grey"
+    },
+    "button-static-background-color": {
+      "id": "button-static-background-color",
+      "name": "$button-static-background-color",
+      "value": "$white-ter"
+    },
+    "button-static-border-color": {
+      "id": "button-static-border-color",
+      "name": "$button-static-border-color",
+      "value": "$grey-lighter"
+    }
+  }
+}

docs/_data/variables/elements/content.json

@@ -0,0 +1,90 @@
+{
+  "dir_name": "elements",
+  "file_name": "content",
+  "file_relative_path": "elements/content.sass",
+  "file_line_from": 1,
+  "file_line_to": 19,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/content.sass#L1,L19",
+  "vars": {
+    "content-heading-color": {
+      "id": "content-heading-color",
+      "name": "$content-heading-color",
+      "value": "$text-strong"
+    },
+    "content-heading-weight": {
+      "id": "content-heading-weight",
+      "name": "$content-heading-weight",
+      "value": "$weight-normal"
+    },
+    "content-heading-line-height": {
+      "id": "content-heading-line-height",
+      "name": "$content-heading-line-height",
+      "value": "1.125"
+    },
+    "content-blockquote-background-color": {
+      "id": "content-blockquote-background-color",
+      "name": "$content-blockquote-background-color",
+      "value": "$background"
+    },
+    "content-blockquote-border-left": {
+      "id": "content-blockquote-border-left",
+      "name": "$content-blockquote-border-left",
+      "value": "5px solid $border"
+    },
+    "content-blockquote-padding": {
+      "id": "content-blockquote-padding",
+      "name": "$content-blockquote-padding",
+      "value": "1.25em 1.5em"
+    },
+    "content-pre-padding": {
+      "id": "content-pre-padding",
+      "name": "$content-pre-padding",
+      "value": "1.25em 1.5em"
+    },
+    "content-table-cell-border": {
+      "id": "content-table-cell-border",
+      "name": "$content-table-cell-border",
+      "value": "1px solid $border"
+    },
+    "content-table-cell-border-width": {
+      "id": "content-table-cell-border-width",
+      "name": "$content-table-cell-border-width",
+      "value": "0 0 1px"
+    },
+    "content-table-cell-padding": {
+      "id": "content-table-cell-padding",
+      "name": "$content-table-cell-padding",
+      "value": "0.5em 0.75em"
+    },
+    "content-table-cell-heading-color": {
+      "id": "content-table-cell-heading-color",
+      "name": "$content-table-cell-heading-color",
+      "value": "$text-strong"
+    },
+    "content-table-row-hover-background-color": {
+      "id": "content-table-row-hover-background-color",
+      "name": "$content-table-row-hover-background-color",
+      "value": "$background"
+    },
+    "content-table-head-cell-border-width": {
+      "id": "content-table-head-cell-border-width",
+      "name": "$content-table-head-cell-border-width",
+      "value": "0 0 2px"
+    },
+    "content-table-head-cell-color": {
+      "id": "content-table-head-cell-color",
+      "name": "$content-table-head-cell-color",
+      "value": "$text-strong"
+    },
+    "content-table-foot-cell-border-width": {
+      "id": "content-table-foot-cell-border-width",
+      "name": "$content-table-foot-cell-border-width",
+      "value": "2px 0 0"
+    },
+    "content-table-foot-cell-color": {
+      "id": "content-table-foot-cell-color",
+      "name": "$content-table-foot-cell-color",
+      "value": "$text-strong"
+    }
+  }
+}

docs/_data/variables/elements/form.json

@@ -0,0 +1,160 @@
+{
+  "dir_name": "elements",
+  "file_name": "form",
+  "file_relative_path": "elements/form.sass",
+  "file_line_from": 1,
+  "file_line_to": 41,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/form.sass#L1,L41",
+  "vars": {
+    "input-color": {
+      "id": "input-color",
+      "name": "$input-color",
+      "value": "$grey-darker"
+    },
+    "input-background-color": {
+      "id": "input-background-color",
+      "name": "$input-background-color",
+      "value": "$white"
+    },
+    "input-border-color": {
+      "id": "input-border-color",
+      "name": "$input-border-color",
+      "value": "$grey-lighter"
+    },
+    "input-shadow": {
+      "id": "input-shadow",
+      "name": "$input-shadow",
+      "value": "inset 0 1px 2px rgba($black, 0.1)"
+    },
+    "input-hover-color": {
+      "id": "input-hover-color",
+      "name": "$input-hover-color",
+      "value": "$grey-darker"
+    },
+    "input-hover-border-color": {
+      "id": "input-hover-border-color",
+      "name": "$input-hover-border-color",
+      "value": "$grey-light"
+    },
+    "input-focus-color": {
+      "id": "input-focus-color",
+      "name": "$input-focus-color",
+      "value": "$grey-darker"
+    },
+    "input-focus-border-color": {
+      "id": "input-focus-border-color",
+      "name": "$input-focus-border-color",
+      "value": "$link"
+    },
+    "input-focus-box-shadow-size": {
+      "id": "input-focus-box-shadow-size",
+      "name": "$input-focus-box-shadow-size",
+      "value": "0 0 0 0.125em"
+    },
+    "input-focus-box-shadow-color": {
+      "id": "input-focus-box-shadow-color",
+      "name": "$input-focus-box-shadow-color",
+      "value": "rgba($link, 0.25)"
+    },
+    "input-disabled-color": {
+      "id": "input-disabled-color",
+      "name": "$input-disabled-color",
+      "value": "$text-light"
+    },
+    "input-disabled-background-color": {
+      "id": "input-disabled-background-color",
+      "name": "$input-disabled-background-color",
+      "value": "$background"
+    },
+    "input-disabled-border-color": {
+      "id": "input-disabled-border-color",
+      "name": "$input-disabled-border-color",
+      "value": "$background"
+    },
+    "input-arrow": {
+      "id": "input-arrow",
+      "name": "$input-arrow",
+      "value": "$link"
+    },
+    "input-icon-color": {
+      "id": "input-icon-color",
+      "name": "$input-icon-color",
+      "value": "$grey-lighter"
+    },
+    "input-icon-active-color": {
+      "id": "input-icon-active-color",
+      "name": "$input-icon-active-color",
+      "value": "$grey"
+    },
+    "input-radius": {
+      "id": "input-radius",
+      "name": "$input-radius",
+      "value": "$radius"
+    },
+    "file-border-color": {
+      "id": "file-border-color",
+      "name": "$file-border-color",
+      "value": "$border"
+    },
+    "file-radius": {
+      "id": "file-radius",
+      "name": "$file-radius",
+      "value": "$radius"
+    },
+    "file-cta-background-color": {
+      "id": "file-cta-background-color",
+      "name": "$file-cta-background-color",
+      "value": "$white-ter"
+    },
+    "file-cta-color": {
+      "id": "file-cta-color",
+      "name": "$file-cta-color",
+      "value": "$grey-dark"
+    },
+    "file-cta-hover-color": {
+      "id": "file-cta-hover-color",
+      "name": "$file-cta-hover-color",
+      "value": "$grey-darker"
+    },
+    "file-cta-active-color": {
+      "id": "file-cta-active-color",
+      "name": "$file-cta-active-color",
+      "value": "$grey-darker"
+    },
+    "file-name-border-color": {
+      "id": "file-name-border-color",
+      "name": "$file-name-border-color",
+      "value": "$border"
+    },
+    "file-name-border-style": {
+      "id": "file-name-border-style",
+      "name": "$file-name-border-style",
+      "value": "solid"
+    },
+    "file-name-border-width": {
+      "id": "file-name-border-width",
+      "name": "$file-name-border-width",
+      "value": "1px 1px 1px 0"
+    },
+    "file-name-max-width": {
+      "id": "file-name-max-width",
+      "name": "$file-name-max-width",
+      "value": "16em"
+    },
+    "label-color": {
+      "id": "label-color",
+      "name": "$label-color",
+      "value": "$grey-darker"
+    },
+    "label-weight": {
+      "id": "label-weight",
+      "name": "$label-weight",
+      "value": "$weight-bold"
+    },
+    "help-size": {
+      "id": "help-size",
+      "name": "$help-size",
+      "value": "$size-small"
+    }
+  }
+}

docs/_data/variables/elements/icon.json

@@ -0,0 +1,30 @@
+{
+  "dir_name": "elements",
+  "file_name": "icon",
+  "file_relative_path": "elements/icon.sass",
+  "file_line_from": 1,
+  "file_line_to": 4,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/icon.sass#L1,L4",
+  "vars": {
+    "icon-dimensions": {
+      "id": "icon-dimensions",
+      "name": "$icon-dimensions",
+      "value": "1.5rem"
+    },
+    "icon-dimensions-small": {
+      "id": "icon-dimensions-small",
+      "name": "$icon-dimensions-small",
+      "value": "1rem"
+    },
+    "icon-dimensions-medium": {
+      "id": "icon-dimensions-medium",
+      "name": "$icon-dimensions-medium",
+      "value": "2rem"
+    },
+    "icon-dimensions-large": {
+      "id": "icon-dimensions-large",
+      "name": "$icon-dimensions-large",
+      "value": "3rem"
+    }
+  }
+}

docs/_data/variables/elements/image.json

@@ -0,0 +1,15 @@
+{
+  "dir_name": "elements",
+  "file_name": "image",
+  "file_relative_path": "elements/image.sass",
+  "file_line_from": 1,
+  "file_line_to": 1,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/image.sass#L1,L1",
+  "vars": {
+    "dimensions": {
+      "id": "dimensions",
+      "name": "$dimensions",
+      "value": "16 24 32 48 64 96 128"
+    }
+  }
+}

docs/_data/variables/elements/notification.json

@@ -0,0 +1,25 @@
+{
+  "dir_name": "elements",
+  "file_name": "notification",
+  "file_relative_path": "elements/notification.sass",
+  "file_line_from": 1,
+  "file_line_to": 3,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/notification.sass#L1,L3",
+  "vars": {
+    "notification-background-color": {
+      "id": "notification-background-color",
+      "name": "$notification-background-color",
+      "value": "$background"
+    },
+    "notification-radius": {
+      "id": "notification-radius",
+      "name": "$notification-radius",
+      "value": "$radius"
+    },
+    "notification-padding": {
+      "id": "notification-padding",
+      "name": "$notification-padding",
+      "value": "1.25rem 2.5rem 1.25rem 1.5rem"
+    }
+  }
+}

docs/_data/variables/elements/progress.json

@@ -0,0 +1,20 @@
+{
+  "dir_name": "elements",
+  "file_name": "progress",
+  "file_relative_path": "elements/progress.sass",
+  "file_line_from": 1,
+  "file_line_to": 2,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/progress.sass#L1,L2",
+  "vars": {
+    "progress-bar-background-color": {
+      "id": "progress-bar-background-color",
+      "name": "$progress-bar-background-color",
+      "value": "$border"
+    },
+    "progress-value-background-color": {
+      "id": "progress-value-background-color",
+      "name": "$progress-value-background-color",
+      "value": "$text"
+    }
+  }
+}

docs/_data/variables/elements/table.json

@@ -0,0 +1,85 @@
+{
+  "dir_name": "elements",
+  "file_name": "table",
+  "file_relative_path": "elements/table.sass",
+  "file_line_from": 1,
+  "file_line_to": 20,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/table.sass#L1,L20",
+  "vars": {
+    "table-color": {
+      "id": "table-color",
+      "name": "$table-color",
+      "value": "$grey-darker"
+    },
+    "table-background-color": {
+      "id": "table-background-color",
+      "name": "$table-background-color",
+      "value": "$white"
+    },
+    "table-cell-border": {
+      "id": "table-cell-border",
+      "name": "$table-cell-border",
+      "value": "1px solid $grey-lighter"
+    },
+    "table-cell-border-width": {
+      "id": "table-cell-border-width",
+      "name": "$table-cell-border-width",
+      "value": "0 0 1px"
+    },
+    "table-cell-padding": {
+      "id": "table-cell-padding",
+      "name": "$table-cell-padding",
+      "value": "0.5em 0.75em"
+    },
+    "table-cell-heading-color": {
+      "id": "table-cell-heading-color",
+      "name": "$table-cell-heading-color",
+      "value": "$text-strong"
+    },
+    "table-head-cell-border-width": {
+      "id": "table-head-cell-border-width",
+      "name": "$table-head-cell-border-width",
+      "value": "0 0 2px"
+    },
+    "table-head-cell-color": {
+      "id": "table-head-cell-color",
+      "name": "$table-head-cell-color",
+      "value": "$text-strong"
+    },
+    "table-foot-cell-border-width": {
+      "id": "table-foot-cell-border-width",
+      "name": "$table-foot-cell-border-width",
+      "value": "2px 0 0"
+    },
+    "table-foot-cell-color": {
+      "id": "table-foot-cell-color",
+      "name": "$table-foot-cell-color",
+      "value": "$text-strong"
+    },
+    "table-row-hover-background-color": {
+      "id": "table-row-hover-background-color",
+      "name": "$table-row-hover-background-color",
+      "value": "$white-bis"
+    },
+    "table-row-active-background-color": {
+      "id": "table-row-active-background-color",
+      "name": "$table-row-active-background-color",
+      "value": "$primary"
+    },
+    "table-row-active-color": {
+      "id": "table-row-active-color",
+      "name": "$table-row-active-color",
+      "value": "$primary-invert"
+    },
+    "table-striped-row-even-background-color": {
+      "id": "table-striped-row-even-background-color",
+      "name": "$table-striped-row-even-background-color",
+      "value": "$white-bis"
+    },
+    "table-striped-row-even-hover-background-color": {
+      "id": "table-striped-row-even-hover-background-color",
+      "name": "$table-striped-row-even-hover-background-color",
+      "value": "$white-ter"
+    }
+  }
+}

docs/_data/variables/elements/tag.json

@@ -0,0 +1,30 @@
+{
+  "dir_name": "elements",
+  "file_name": "tag",
+  "file_relative_path": "elements/tag.sass",
+  "file_line_from": 1,
+  "file_line_to": 4,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/tag.sass#L1,L4",
+  "vars": {
+    "tag-background-color": {
+      "id": "tag-background-color",
+      "name": "$tag-background-color",
+      "value": "$background"
+    },
+    "tag-color": {
+      "id": "tag-color",
+      "name": "$tag-color",
+      "value": "$text"
+    },
+    "tag-radius": {
+      "id": "tag-radius",
+      "name": "$tag-radius",
+      "value": "$radius"
+    },
+    "tag-delete-margin": {
+      "id": "tag-delete-margin",
+      "name": "$tag-delete-margin",
+      "value": "1px"
+    }
+  }
+}

docs/_data/variables/elements/title.json

@@ -0,0 +1,60 @@
+{
+  "dir_name": "elements",
+  "file_name": "title",
+  "file_relative_path": "elements/title.sass",
+  "file_line_from": 1,
+  "file_line_to": 11,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/title.sass#L1,L11",
+  "vars": {
+    "title-color": {
+      "id": "title-color",
+      "name": "$title-color",
+      "value": "$grey-darker"
+    },
+    "title-size": {
+      "id": "title-size",
+      "name": "$title-size",
+      "value": "$size-3"
+    },
+    "title-weight": {
+      "id": "title-weight",
+      "name": "$title-weight",
+      "value": "$weight-semibold"
+    },
+    "title-strong-color": {
+      "id": "title-strong-color",
+      "name": "$title-strong-color",
+      "value": "inherit"
+    },
+    "title-strong-weight": {
+      "id": "title-strong-weight",
+      "name": "$title-strong-weight",
+      "value": "inherit"
+    },
+    "subtitle-color": {
+      "id": "subtitle-color",
+      "name": "$subtitle-color",
+      "value": "$grey-dark"
+    },
+    "subtitle-size": {
+      "id": "subtitle-size",
+      "name": "$subtitle-size",
+      "value": "$size-5"
+    },
+    "subtitle-weight": {
+      "id": "subtitle-weight",
+      "name": "$subtitle-weight",
+      "value": "$weight-normal"
+    },
+    "subtitle-strong-color": {
+      "id": "subtitle-strong-color",
+      "name": "$subtitle-strong-color",
+      "value": "$grey-darker"
+    },
+    "subtitle-strong-weight": {
+      "id": "subtitle-strong-weight",
+      "name": "$subtitle-strong-weight",
+      "value": "$weight-semibold"
+    }
+  }
+}