Update variables include template

docs/_data/variables/base/_all.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "base/_all.sass"
+}

docs/_data/variables/base/generic.json

@@ -1,90 +1,119 @@
 {
-  "dir_name": "base",
-  "file_name": "generic",
-  "file_relative_path": "base/generic.sass",
-  "file_line_from": 1,
-  "file_line_to": 19,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass#L1,L19",
-  "vars": {
-    "body-background-color": {
-      "id": "body-background-color",
+  "by_name": {
+    "$body-background-color": {
       "name": "$body-background-color",
-      "value": "#fff"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "body-size": {
-      "id": "body-size",
+    "$body-size": {
       "name": "$body-size",
-      "value": "16px"
+      "value": "16px",
+      "type": "size"
     },
-    "body-rendering": {
-      "id": "body-rendering",
+    "$body-rendering": {
       "name": "$body-rendering",
-      "value": "optimizeLegibility"
+      "value": "optimizeLegibility",
+      "type": "string"
     },
-    "body-family": {
-      "id": "body-family",
+    "$body-family": {
       "name": "$body-family",
-      "value": "$family-primary"
+      "value": "$family-primary",
+      "type": "variable",
+      "computed_type": "font-family",
+      "computed_value": "BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif"
     },
-    "body-color": {
-      "id": "body-color",
+    "$body-color": {
       "name": "$body-color",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "body-weight": {
-      "id": "body-weight",
+    "$body-weight": {
       "name": "$body-weight",
-      "value": "$weight-normal"
+      "value": "$weight-normal",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "400"
     },
-    "body-line-height": {
-      "id": "body-line-height",
+    "$body-line-height": {
       "name": "$body-line-height",
-      "value": "1.5"
+      "value": "1.5",
+      "type": "string"
     },
-    "code-family": {
-      "id": "code-family",
+    "$code-family": {
       "name": "$code-family",
-      "value": "$family-code"
+      "value": "$family-code",
+      "type": "variable",
+      "computed_type": "font-family",
+      "computed_value": "monospace"
     },
-    "code-padding": {
-      "id": "code-padding",
+    "$code-padding": {
       "name": "$code-padding",
-      "value": "0.25em 0.5em 0.25em"
+      "value": "0.25em 0.5em 0.25em",
+      "type": "size"
     },
-    "code-weight": {
-      "id": "code-weight",
+    "$code-weight": {
       "name": "$code-weight",
-      "value": "normal"
+      "value": "normal",
+      "type": "string"
     },
-    "code-size": {
-      "id": "code-size",
+    "$code-size": {
       "name": "$code-size",
-      "value": "0.875em"
+      "value": "0.875em",
+      "type": "size"
     },
-    "hr-background-color": {
-      "id": "hr-background-color",
+    "$hr-background-color": {
       "name": "$hr-background-color",
-      "value": "$border"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "hr-height": {
-      "id": "hr-height",
+    "$hr-height": {
       "name": "$hr-height",
-      "value": "1px"
+      "value": "2px",
+      "type": "size"
     },
-    "hr-margin": {
-      "id": "hr-margin",
+    "$hr-margin": {
       "name": "$hr-margin",
-      "value": "1.5rem 0"
+      "value": "1.5rem 0",
+      "type": "string"
     },
-    "strong-color": {
-      "id": "strong-color",
+    "$strong-color": {
       "name": "$strong-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "strong-weight": {
-      "id": "strong-weight",
+    "$strong-weight": {
       "name": "$strong-weight",
-      "value": "$weight-bold"
+      "value": "$weight-bold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "700"
     }
-  }
+  },
+  "list": [
+    "$body-background-color",
+    "$body-size",
+    "$body-rendering",
+    "$body-family",
+    "$body-color",
+    "$body-weight",
+    "$body-line-height",
+    "$code-family",
+    "$code-padding",
+    "$code-weight",
+    "$code-size",
+    "$hr-background-color",
+    "$hr-height",
+    "$hr-margin",
+    "$strong-color",
+    "$strong-weight"
+  ],
+  "file_path": "base/generic.sass"
 }

docs/_data/variables/base/helpers.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "base/helpers.sass"
+}

docs/_data/variables/base/minireset.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "base/minireset.sass"
+}

docs/_data/variables/components/_all.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "components/_all.sass"
+}

docs/_data/variables/components/breadcrumb.json

@@ -1,30 +1,51 @@
 {
-  "dir_name": "components",
-  "file_name": "breadcrumb",
-  "file_relative_path": "components/breadcrumb.sass",
-  "file_line_from": 1,
-  "file_line_to": 5,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/breadcrumb.sass#L1,L5",
-  "vars": {
-    "breadcrumb-item-color": {
-      "id": "breadcrumb-item-color",
+  "by_name": {
+    "$breadcrumb-item-color": {
       "name": "$breadcrumb-item-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "breadcrumb-item-hover-color": {
-      "id": "breadcrumb-item-hover-color",
+    "$breadcrumb-item-hover-color": {
       "name": "$breadcrumb-item-hover-color",
-      "value": "$link-hover"
+      "value": "$link-hover",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "breadcrumb-item-active-color": {
-      "id": "breadcrumb-item-active-color",
+    "$breadcrumb-item-active-color": {
       "name": "$breadcrumb-item-active-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "breadcrumb-item-separator-color": {
-      "id": "breadcrumb-item-separator-color",
+    "$breadcrumb-item-padding-vertical": {
+      "name": "$breadcrumb-item-padding-vertical",
+      "value": "0",
+      "type": "string"
+    },
+    "$breadcrumb-item-padding-horizontal": {
+      "name": "$breadcrumb-item-padding-horizontal",
+      "value": "0.75em",
+      "type": "size"
+    },
+    "$breadcrumb-item-separator-color": {
       "name": "$breadcrumb-item-separator-color",
-      "value": "$text"
+      "value": "$grey-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 71%)"
     }
-  }
+  },
+  "list": [
+    "$breadcrumb-item-color",
+    "$breadcrumb-item-hover-color",
+    "$breadcrumb-item-active-color",
+    "$breadcrumb-item-padding-vertical",
+    "$breadcrumb-item-padding-horizontal",
+    "$breadcrumb-item-separator-color"
+  ],
+  "file_path": "components/breadcrumb.sass"
 }

docs/_data/variables/components/card.json

@@ -1,60 +1,75 @@
 {
-  "dir_name": "components",
-  "file_name": "card",
-  "file_relative_path": "components/card.sass",
-  "file_line_from": 1,
-  "file_line_to": 9,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/card.sass#L1,L9",
-  "vars": {
-    "card-color": {
-      "id": "card-color",
+  "by_name": {
+    "$card-color": {
       "name": "$card-color",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "card-background-color": {
-      "id": "card-background-color",
+    "$card-background-color": {
       "name": "$card-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "card-shadow": {
-      "id": "card-shadow",
+    "$card-shadow": {
       "name": "$card-shadow",
-      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
+      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
+      "type": "compound"
     },
-    "card-header-color": {
-      "id": "card-header-color",
+    "$card-header-background-color": {
+      "name": "$card-header-background-color",
+      "value": "transparent",
+      "type": "string"
+    },
+    "$card-header-color": {
       "name": "$card-header-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "card-header-shadow": {
-      "id": "card-header-shadow",
+    "$card-header-shadow": {
       "name": "$card-header-shadow",
-      "value": "0 1px 2px rgba($black, 0.1)"
+      "value": "0 1px 2px rgba($black, 0.1)",
+      "type": "compound"
     },
-    "card-header-weight": {
-      "id": "card-header-weight",
+    "$card-header-weight": {
       "name": "$card-header-weight",
-      "value": "$weight-bold"
-    },
-    "card-header-background-color": {
-      "id": "card-header-background-color",
-      "name": "$card-header-background-color",
-      "value": "transparent"
+      "value": "$weight-bold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "700"
     },
-    "card-content-background-color": {
-      "id": "card-content-background-color",
+    "$card-content-background-color": {
       "name": "$card-content-background-color",
-      "value": "transparent"
+      "value": "transparent",
+      "type": "string"
     },
-    "card-footer-border-top": {
-      "id": "card-footer-border-top",
-      "name": "$card-footer-border-top",
-      "value": "1px solid $border"
-    },
-    "card-footer-background-color": {
-      "id": "card-footer-background-color",
+    "$card-footer-background-color": {
       "name": "$card-footer-background-color",
-      "value": "transparent"
+      "value": "transparent",
+      "type": "string"
+    },
+    "$card-footer-border-top": {
+      "name": "$card-footer-border-top",
+      "value": "1px solid $border",
+      "type": "compound"
     }
-  }
+  },
+  "list": [
+    "$card-color",
+    "$card-background-color",
+    "$card-shadow",
+    "$card-header-background-color",
+    "$card-header-color",
+    "$card-header-shadow",
+    "$card-header-weight",
+    "$card-content-background-color",
+    "$card-footer-background-color",
+    "$card-footer-border-top"
+  ],
+  "file_path": "components/card.sass"
 }

docs/_data/variables/components/dropdown.json

@@ -1,70 +1,97 @@
 {
-  "dir_name": "components",
-  "file_name": "dropdown",
-  "file_relative_path": "components/dropdown.sass",
-  "file_line_from": 1,
-  "file_line_to": 14,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/dropdown.sass#L1,L14",
-  "vars": {
-    "dropdown-content-background-color": {
-      "id": "dropdown-content-background-color",
+  "by_name": {
+    "$dropdown-content-background-color": {
       "name": "$dropdown-content-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "dropdown-content-arrow": {
-      "id": "dropdown-content-arrow",
+    "$dropdown-content-arrow": {
       "name": "$dropdown-content-arrow",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "dropdown-content-offset": {
-      "id": "dropdown-content-offset",
+    "$dropdown-content-offset": {
       "name": "$dropdown-content-offset",
-      "value": "4px"
+      "value": "4px",
+      "type": "size"
     },
-    "dropdown-content-radius": {
-      "id": "dropdown-content-radius",
+    "$dropdown-content-radius": {
       "name": "$dropdown-content-radius",
-      "value": "$radius"
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
     },
-    "dropdown-content-shadow": {
-      "id": "dropdown-content-shadow",
+    "$dropdown-content-shadow": {
       "name": "$dropdown-content-shadow",
-      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
+      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
+      "type": "compound"
     },
-    "dropdown-content-z": {
-      "id": "dropdown-content-z",
+    "$dropdown-content-z": {
       "name": "$dropdown-content-z",
-      "value": "20"
+      "value": "20",
+      "type": "string"
     },
-    "dropdown-item-color": {
-      "id": "dropdown-item-color",
+    "$dropdown-item-color": {
       "name": "$dropdown-item-color",
-      "value": "$grey-dark"
+      "value": "$grey-dark",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "dropdown-item-hover-color": {
-      "id": "dropdown-item-hover-color",
+    "$dropdown-item-hover-color": {
       "name": "$dropdown-item-hover-color",
-      "value": "$black"
+      "value": "$black",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 4%)"
     },
-    "dropdown-item-hover-background-color": {
-      "id": "dropdown-item-hover-background-color",
+    "$dropdown-item-hover-background-color": {
       "name": "$dropdown-item-hover-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "dropdown-item-active-color": {
-      "id": "dropdown-item-active-color",
+    "$dropdown-item-active-color": {
       "name": "$dropdown-item-active-color",
-      "value": "$link-invert"
+      "value": "$link-invert",
+      "type": "variable",
+      "computed_type": "compound",
+      "computed_value": "findColorInvert($blue)"
     },
-    "dropdown-item-active-background-color": {
-      "id": "dropdown-item-active-background-color",
+    "$dropdown-item-active-background-color": {
       "name": "$dropdown-item-active-background-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "dropdown-divider-background-color": {
-      "id": "dropdown-divider-background-color",
+    "$dropdown-divider-background-color": {
       "name": "$dropdown-divider-background-color",
-      "value": "$border"
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     }
-  }
+  },
+  "list": [
+    "$dropdown-content-background-color",
+    "$dropdown-content-arrow",
+    "$dropdown-content-offset",
+    "$dropdown-content-radius",
+    "$dropdown-content-shadow",
+    "$dropdown-content-z",
+    "$dropdown-item-color",
+    "$dropdown-item-hover-color",
+    "$dropdown-item-hover-background-color",
+    "$dropdown-item-active-color",
+    "$dropdown-item-active-background-color",
+    "$dropdown-divider-background-color"
+  ],
+  "file_path": "components/dropdown.sass"
 }

docs/_data/variables/components/level.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "components/level.sass"
+}

docs/_data/variables/components/media.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "components/media.sass"
+}

docs/_data/variables/components/menu.json

@@ -1,50 +1,69 @@
 {
-  "dir_name": "components",
-  "file_name": "menu",
-  "file_relative_path": "components/menu.sass",
-  "file_line_from": 1,
-  "file_line_to": 10,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/menu.sass#L1,L10",
-  "vars": {
-    "menu-item-color": {
-      "id": "menu-item-color",
+  "by_name": {
+    "$menu-item-color": {
       "name": "$menu-item-color",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "menu-item-radius": {
-      "id": "menu-item-radius",
+    "$menu-item-radius": {
       "name": "$menu-item-radius",
-      "value": "$radius-small"
+      "value": "$radius-small",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "2px"
     },
-    "menu-item-hover-color": {
-      "id": "menu-item-hover-color",
+    "$menu-item-hover-color": {
       "name": "$menu-item-hover-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "menu-item-hover-background-color": {
-      "id": "menu-item-hover-background-color",
+    "$menu-item-hover-background-color": {
       "name": "$menu-item-hover-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "menu-item-active-color": {
-      "id": "menu-item-active-color",
+    "$menu-item-active-color": {
       "name": "$menu-item-active-color",
-      "value": "$link-invert"
+      "value": "$link-invert",
+      "type": "variable",
+      "computed_type": "compound",
+      "computed_value": "findColorInvert($blue)"
     },
-    "menu-item-active-background-color": {
-      "id": "menu-item-active-background-color",
+    "$menu-item-active-background-color": {
       "name": "$menu-item-active-background-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "menu-list-border-left": {
-      "id": "menu-list-border-left",
+    "$menu-list-border-left": {
       "name": "$menu-list-border-left",
-      "value": "1px solid $border"
+      "value": "1px solid $border",
+      "type": "compound"
     },
-    "menu-label-color": {
-      "id": "menu-label-color",
+    "$menu-label-color": {
       "name": "$menu-label-color",
-      "value": "$text-light"
+      "value": "$text-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 48%)"
     }
-  }
+  },
+  "list": [
+    "$menu-item-color",
+    "$menu-item-radius",
+    "$menu-item-hover-color",
+    "$menu-item-hover-background-color",
+    "$menu-item-active-color",
+    "$menu-item-active-background-color",
+    "$menu-list-border-left",
+    "$menu-label-color"
+  ],
+  "file_path": "components/menu.sass"
 }

docs/_data/variables/components/message.json

@@ -1,70 +1,117 @@
 {
-  "dir_name": "components",
-  "file_name": "message",
-  "file_relative_path": "components/message.sass",
-  "file_line_from": 1,
-  "file_line_to": 15,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/message.sass#L1,L15",
-  "vars": {
-    "message-background-color": {
-      "id": "message-background-color",
+  "by_name": {
+    "$message-background-color": {
       "name": "$message-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "message-radius": {
-      "id": "message-radius",
+    "$message-radius": {
       "name": "$message-radius",
-      "value": "$radius"
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
     },
-    "message-header-background-color": {
-      "id": "message-header-background-color",
+    "$message-header-background-color": {
       "name": "$message-header-background-color",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "message-header-color": {
-      "id": "message-header-color",
+    "$message-header-color": {
       "name": "$message-header-color",
-      "value": "$text-invert"
+      "value": "$text-invert",
+      "type": "variable",
+      "computed_type": "compound",
+      "computed_value": "findColorInvert($text)"
     },
-    "message-header-padding": {
-      "id": "message-header-padding",
+    "$message-header-weight": {
+      "name": "$message-header-weight",
+      "value": "$weight-bold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "700"
+    },
+    "$message-header-padding": {
       "name": "$message-header-padding",
-      "value": "0.5em 0.75em"
+      "value": "0.75em 1em",
+      "type": "size"
     },
-    "message-header-radius": {
-      "id": "message-header-radius",
+    "$message-header-radius": {
       "name": "$message-header-radius",
-      "value": "$radius"
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
+    },
+    "$message-body-border-color": {
+      "name": "$message-body-border-color",
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "message-body-border": {
-      "id": "message-body-border",
-      "name": "$message-body-border",
-      "value": "1px solid $border"
+    "$message-body-border-width": {
+      "name": "$message-body-border-width",
+      "value": "0 0 0 4px",
+      "type": "size"
     },
-    "message-body-color": {
-      "id": "message-body-color",
+    "$message-body-color": {
       "name": "$message-body-color",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "message-body-padding": {
-      "id": "message-body-padding",
+    "$message-body-padding": {
       "name": "$message-body-padding",
-      "value": "1em 1.25em"
+      "value": "1.25em 1.5em",
+      "type": "size"
     },
-    "message-body-radius": {
-      "id": "message-body-radius",
+    "$message-body-radius": {
       "name": "$message-body-radius",
-      "value": "$radius"
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
     },
-    "message-body-pre-background-color": {
-      "id": "message-body-pre-background-color",
+    "$message-body-pre-background-color": {
       "name": "$message-body-pre-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "message-body-pre-code-background-color": {
-      "id": "message-body-pre-code-background-color",
+    "$message-body-pre-code-background-color": {
       "name": "$message-body-pre-code-background-color",
-      "value": "transparent"
+      "value": "transparent",
+      "type": "string"
+    },
+    "$message-header-body-border-width": {
+      "name": "$message-header-body-border-width",
+      "value": "0",
+      "type": "string"
     }
-  }
+  },
+  "list": [
+    "$message-background-color",
+    "$message-radius",
+    "$message-header-background-color",
+    "$message-header-color",
+    "$message-header-weight",
+    "$message-header-padding",
+    "$message-header-radius",
+    "$message-body-border-color",
+    "$message-body-border-width",
+    "$message-body-color",
+    "$message-body-padding",
+    "$message-body-radius",
+    "$message-body-pre-background-color",
+    "$message-body-pre-code-background-color",
+    "$message-header-body-border-width"
+  ],
+  "file_path": "components/message.sass"
 }

docs/_data/variables/components/modal.json

@@ -1,115 +1,145 @@
 {
-  "dir_name": "components",
-  "file_name": "modal",
-  "file_relative_path": "components/modal.sass",
-  "file_line_from": 1,
-  "file_line_to": 29,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/modal.sass#L1,L29",
-  "vars": {
-    "modal-z": {
-      "id": "modal-z",
+  "by_name": {
+    "$modal-z": {
       "name": "$modal-z",
-      "value": "20"
+      "value": "40",
+      "type": "string"
     },
-    "modal-background-background-color": {
-      "id": "modal-background-background-color",
+    "$modal-background-background-color": {
       "name": "$modal-background-background-color",
-      "value": "rgba($black, 0.86)"
+      "value": "rgba($black, 0.86)",
+      "type": "compound"
     },
-    "modal-content-width": {
-      "id": "modal-content-width",
+    "$modal-content-width": {
       "name": "$modal-content-width",
-      "value": "640px"
+      "value": "640px",
+      "type": "size"
     },
-    "modal-content-margin-mobile": {
-      "id": "modal-content-margin-mobile",
+    "$modal-content-margin-mobile": {
       "name": "$modal-content-margin-mobile",
-      "value": "20px"
+      "value": "20px",
+      "type": "size"
     },
-    "modal-content-spacing-mobile": {
-      "id": "modal-content-spacing-mobile",
+    "$modal-content-spacing-mobile": {
       "name": "$modal-content-spacing-mobile",
-      "value": "160px"
+      "value": "160px",
+      "type": "size"
     },
-    "modal-content-spacing-tablet": {
-      "id": "modal-content-spacing-tablet",
+    "$modal-content-spacing-tablet": {
       "name": "$modal-content-spacing-tablet",
-      "value": "40px"
+      "value": "40px",
+      "type": "size"
     },
-    "modal-close-dimensions": {
-      "id": "modal-close-dimensions",
+    "$modal-close-dimensions": {
       "name": "$modal-close-dimensions",
-      "value": "40px"
+      "value": "40px",
+      "type": "size"
     },
-    "modal-close-right": {
-      "id": "modal-close-right",
+    "$modal-close-right": {
       "name": "$modal-close-right",
-      "value": "20px"
+      "value": "20px",
+      "type": "size"
     },
-    "modal-close-top": {
-      "id": "modal-close-top",
+    "$modal-close-top": {
       "name": "$modal-close-top",
-      "value": "20px"
+      "value": "20px",
+      "type": "size"
     },
-    "modal-card-spacing": {
-      "id": "modal-card-spacing",
+    "$modal-card-spacing": {
       "name": "$modal-card-spacing",
-      "value": "40px"
+      "value": "40px",
+      "type": "size"
     },
-    "modal-card-head-background-color": {
-      "id": "modal-card-head-background-color",
+    "$modal-card-head-background-color": {
       "name": "$modal-card-head-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "modal-card-head-border-bottom": {
-      "id": "modal-card-head-border-bottom",
+    "$modal-card-head-border-bottom": {
       "name": "$modal-card-head-border-bottom",
-      "value": "1px solid $border"
+      "value": "1px solid $border",
+      "type": "compound"
     },
-    "modal-card-head-padding": {
-      "id": "modal-card-head-padding",
+    "$modal-card-head-padding": {
       "name": "$modal-card-head-padding",
-      "value": "20px"
+      "value": "20px",
+      "type": "size"
     },
-    "modal-card-head-radius": {
-      "id": "modal-card-head-radius",
+    "$modal-card-head-radius": {
       "name": "$modal-card-head-radius",
-      "value": "$radius-large"
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
     },
-    "modal-card-title-color": {
-      "id": "modal-card-title-color",
+    "$modal-card-title-color": {
       "name": "$modal-card-title-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "modal-card-title-line-height": {
-      "id": "modal-card-title-line-height",
+    "$modal-card-title-line-height": {
       "name": "$modal-card-title-line-height",
-      "value": "1"
+      "value": "1",
+      "type": "string"
     },
-    "modal-card-title-size": {
-      "id": "modal-card-title-size",
+    "$modal-card-title-size": {
       "name": "$modal-card-title-size",
-      "value": "$size-4"
+      "value": "$size-4",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "1.5rem"
     },
-    "modal-card-foot-radius": {
-      "id": "modal-card-foot-radius",
+    "$modal-card-foot-radius": {
       "name": "$modal-card-foot-radius",
-      "value": "$radius-large"
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
     },
-    "modal-card-foot-border-top": {
-      "id": "modal-card-foot-border-top",
+    "$modal-card-foot-border-top": {
       "name": "$modal-card-foot-border-top",
-      "value": "1px solid $border"
+      "value": "1px solid $border",
+      "type": "compound"
     },
-    "modal-card-body-background-color": {
-      "id": "modal-card-body-background-color",
+    "$modal-card-body-background-color": {
       "name": "$modal-card-body-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "modal-card-body-padding": {
-      "id": "modal-card-body-padding",
+    "$modal-card-body-padding": {
       "name": "$modal-card-body-padding",
-      "value": "20px"
+      "value": "20px",
+      "type": "size"
     }
-  }
+  },
+  "list": [
+    "$modal-z",
+    "$modal-background-background-color",
+    "$modal-content-width",
+    "$modal-content-margin-mobile",
+    "$modal-content-spacing-mobile",
+    "$modal-content-spacing-tablet",
+    "$modal-close-dimensions",
+    "$modal-close-right",
+    "$modal-close-top",
+    "$modal-card-spacing",
+    "$modal-card-head-background-color",
+    "$modal-card-head-border-bottom",
+    "$modal-card-head-padding",
+    "$modal-card-head-radius",
+    "$modal-card-title-color",
+    "$modal-card-title-line-height",
+    "$modal-card-title-size",
+    "$modal-card-foot-radius",
+    "$modal-card-foot-border-top",
+    "$modal-card-body-background-color",
+    "$modal-card-body-padding"
+  ],
+  "file_path": "components/modal.sass"
 }

docs/_data/variables/components/navbar.json

@@ -1,155 +1,266 @@
 {
-  "dir_name": "components",
-  "file_name": "navbar",
-  "file_relative_path": "components/navbar.sass",
-  "file_line_from": 1,
-  "file_line_to": 34,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/navbar.sass#L1,L34",
-  "vars": {
-    "navbar-background-color": {
-      "id": "navbar-background-color",
+  "by_name": {
+    "$navbar-background-color": {
       "name": "$navbar-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "navbar-height": {
-      "id": "navbar-height",
+    "$navbar-box-shadow-size": {
+      "name": "$navbar-box-shadow-size",
+      "value": "0 2px 0 0",
+      "type": "string"
+    },
+    "$navbar-box-shadow-color": {
+      "name": "$navbar-box-shadow-color",
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
+    },
+    "$navbar-height": {
       "name": "$navbar-height",
-      "value": "3.25rem"
+      "value": "3.25rem",
+      "type": "size"
+    },
+    "$navbar-padding-vertical": {
+      "name": "$navbar-padding-vertical",
+      "value": "1rem",
+      "type": "size"
+    },
+    "$navbar-padding-horizontal": {
+      "name": "$navbar-padding-horizontal",
+      "value": "2rem",
+      "type": "size"
     },
-    "navbar-item-color": {
-      "id": "navbar-item-color",
+    "$navbar-z": {
+      "name": "$navbar-z",
+      "value": "30",
+      "type": "string"
+    },
+    "$navbar-fixed-z": {
+      "name": "$navbar-fixed-z",
+      "value": "30",
+      "type": "string"
+    },
+    "$navbar-item-color": {
       "name": "$navbar-item-color",
-      "value": "$grey-dark"
+      "value": "$grey-dark",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "navbar-item-hover-color": {
-      "id": "navbar-item-hover-color",
+    "$navbar-item-hover-color": {
       "name": "$navbar-item-hover-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "navbar-item-hover-background-color": {
-      "id": "navbar-item-hover-background-color",
+    "$navbar-item-hover-background-color": {
       "name": "$navbar-item-hover-background-color",
-      "value": "$background"
+      "value": "$white-bis",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 98%)"
     },
-    "navbar-item-active-color": {
-      "id": "navbar-item-active-color",
+    "$navbar-item-active-color": {
       "name": "$navbar-item-active-color",
-      "value": "$black"
+      "value": "$black",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 4%)"
     },
-    "navbar-item-active-background-color": {
-      "id": "navbar-item-active-background-color",
+    "$navbar-item-active-background-color": {
       "name": "$navbar-item-active-background-color",
-      "value": "transparent"
+      "value": "transparent",
+      "type": "string"
     },
-    "navbar-item-img-max-height": {
-      "id": "navbar-item-img-max-height",
+    "$navbar-item-img-max-height": {
       "name": "$navbar-item-img-max-height",
-      "value": "1.75rem"
+      "value": "1.75rem",
+      "type": "size"
     },
-    "navbar-burger-color": {
-      "id": "navbar-burger-color",
+    "$navbar-burger-color": {
       "name": "$navbar-burger-color",
-      "value": "$navbar-item-color"
+      "value": "$navbar-item-color",
+      "type": "variable",
+      "computed_type": "string"
     },
-    "navbar-tab-hover-background-color": {
-      "id": "navbar-tab-hover-background-color",
+    "$navbar-tab-hover-background-color": {
       "name": "$navbar-tab-hover-background-color",
-      "value": "transparent"
+      "value": "transparent",
+      "type": "string"
     },
-    "navbar-tab-hover-border-bottom-color": {
-      "id": "navbar-tab-hover-border-bottom-color",
+    "$navbar-tab-hover-border-bottom-color": {
       "name": "$navbar-tab-hover-border-bottom-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "navbar-tab-active-color": {
-      "id": "navbar-tab-active-color",
+    "$navbar-tab-active-color": {
       "name": "$navbar-tab-active-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "navbar-tab-active-background-color": {
-      "id": "navbar-tab-active-background-color",
+    "$navbar-tab-active-background-color": {
       "name": "$navbar-tab-active-background-color",
-      "value": "transparent"
+      "value": "transparent",
+      "type": "string"
     },
-    "navbar-tab-active-border-bottom-color": {
-      "id": "navbar-tab-active-border-bottom-color",
+    "$navbar-tab-active-border-bottom-color": {
       "name": "$navbar-tab-active-border-bottom-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "navbar-tab-active-border-bottom-style": {
-      "id": "navbar-tab-active-border-bottom-style",
+    "$navbar-tab-active-border-bottom-style": {
       "name": "$navbar-tab-active-border-bottom-style",
-      "value": "solid"
+      "value": "solid",
+      "type": "string"
     },
-    "navbar-tab-active-border-bottom-width": {
-      "id": "navbar-tab-active-border-bottom-width",
+    "$navbar-tab-active-border-bottom-width": {
       "name": "$navbar-tab-active-border-bottom-width",
-      "value": "3px"
+      "value": "3px",
+      "type": "size"
     },
-    "navbar-dropdown-background-color": {
-      "id": "navbar-dropdown-background-color",
+    "$navbar-dropdown-background-color": {
       "name": "$navbar-dropdown-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "navbar-dropdown-border-top": {
-      "id": "navbar-dropdown-border-top",
+    "$navbar-dropdown-border-top": {
       "name": "$navbar-dropdown-border-top",
-      "value": "1px solid $border"
+      "value": "2px solid $border",
+      "type": "compound"
     },
-    "navbar-dropdown-offset": {
-      "id": "navbar-dropdown-offset",
+    "$navbar-dropdown-offset": {
       "name": "$navbar-dropdown-offset",
-      "value": "-4px"
+      "value": "-4px",
+      "type": "size"
     },
-    "navbar-dropdown-arrow": {
-      "id": "navbar-dropdown-arrow",
+    "$navbar-dropdown-arrow": {
       "name": "$navbar-dropdown-arrow",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "navbar-dropdown-radius": {
-      "id": "navbar-dropdown-radius",
+    "$navbar-dropdown-radius": {
       "name": "$navbar-dropdown-radius",
-      "value": "$radius-large"
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
     },
-    "navbar-dropdown-z": {
-      "id": "navbar-dropdown-z",
+    "$navbar-dropdown-z": {
       "name": "$navbar-dropdown-z",
-      "value": "20"
+      "value": "20",
+      "type": "string"
     },
-    "navbar-dropdown-boxed-radius": {
-      "id": "navbar-dropdown-boxed-radius",
+    "$navbar-dropdown-boxed-radius": {
       "name": "$navbar-dropdown-boxed-radius",
-      "value": "$radius-large"
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
     },
-    "navbar-dropdown-boxed-shadow": {
-      "id": "navbar-dropdown-boxed-shadow",
+    "$navbar-dropdown-boxed-shadow": {
       "name": "$navbar-dropdown-boxed-shadow",
-      "value": "0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
+      "value": "0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
+      "type": "compound"
     },
-    "navbar-dropdown-item-hover-color": {
-      "id": "navbar-dropdown-item-hover-color",
+    "$navbar-dropdown-item-hover-color": {
       "name": "$navbar-dropdown-item-hover-color",
-      "value": "$black"
+      "value": "$black",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 4%)"
     },
-    "navbar-dropdown-item-hover-background-color": {
-      "id": "navbar-dropdown-item-hover-background-color",
+    "$navbar-dropdown-item-hover-background-color": {
       "name": "$navbar-dropdown-item-hover-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "navbar-dropdown-item-active-color": {
-      "id": "navbar-dropdown-item-active-color",
+    "$navbar-dropdown-item-active-color": {
       "name": "$navbar-dropdown-item-active-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "navbar-dropdown-item-active-background-color": {
-      "id": "navbar-dropdown-item-active-background-color",
+    "$navbar-dropdown-item-active-background-color": {
       "name": "$navbar-dropdown-item-active-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "navbar-divider-background-color": {
-      "id": "navbar-divider-background-color",
+    "$navbar-divider-background-color": {
       "name": "$navbar-divider-background-color",
-      "value": "$border"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
+    },
+    "$navbar-divider-height": {
+      "name": "$navbar-divider-height",
+      "value": "2px",
+      "type": "size"
+    },
+    "$navbar-bottom-box-shadow-size": {
+      "name": "$navbar-bottom-box-shadow-size",
+      "value": "0 -2px 0 0",
+      "type": "string"
     }
-  }
-}
+  },
+  "list": [
+    "$navbar-background-color",
+    "$navbar-box-shadow-size",
+    "$navbar-box-shadow-color",
+    "$navbar-height",
+    "$navbar-padding-vertical",
+    "$navbar-padding-horizontal",
+    "$navbar-z",
+    "$navbar-fixed-z",
+    "$navbar-item-color",
+    "$navbar-item-hover-color",
+    "$navbar-item-hover-background-color",
+    "$navbar-item-active-color",
+    "$navbar-item-active-background-color",
+    "$navbar-item-img-max-height",
+    "$navbar-burger-color",
+    "$navbar-tab-hover-background-color",
+    "$navbar-tab-hover-border-bottom-color",
+    "$navbar-tab-active-color",
+    "$navbar-tab-active-background-color",
+    "$navbar-tab-active-border-bottom-color",
+    "$navbar-tab-active-border-bottom-style",
+    "$navbar-tab-active-border-bottom-width",
+    "$navbar-dropdown-background-color",
+    "$navbar-dropdown-border-top",
+    "$navbar-dropdown-offset",
+    "$navbar-dropdown-arrow",
+    "$navbar-dropdown-radius",
+    "$navbar-dropdown-z",
+    "$navbar-dropdown-boxed-radius",
+    "$navbar-dropdown-boxed-shadow",
+    "$navbar-dropdown-item-hover-color",
+    "$navbar-dropdown-item-hover-background-color",
+    "$navbar-dropdown-item-active-color",
+    "$navbar-dropdown-item-active-background-color",
+    "$navbar-divider-background-color",
+    "$navbar-divider-height",
+    "$navbar-bottom-box-shadow-size"
+  ],
+  "file_path": "components/navbar.sass"
+}

docs/_data/variables/components/pagination.json

@@ -1,90 +1,133 @@
 {
-  "dir_name": "components",
-  "file_name": "pagination",
-  "file_relative_path": "components/pagination.sass",
-  "file_line_from": 1,
-  "file_line_to": 22,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/pagination.sass#L1,L22",
-  "vars": {
-    "pagination-color": {
-      "id": "pagination-color",
+  "by_name": {
+    "$pagination-color": {
       "name": "$pagination-color",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "pagination-border-color": {
-      "id": "pagination-border-color",
+    "$pagination-border-color": {
       "name": "$pagination-border-color",
-      "value": "$grey-lighter"
+      "value": "$grey-lighter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "pagination-margin": {
-      "id": "pagination-margin",
+    "$pagination-margin": {
       "name": "$pagination-margin",
-      "value": "-0.25rem"
+      "value": "-0.25rem",
+      "type": "size"
     },
-    "pagination-hover-color": {
-      "id": "pagination-hover-color",
+    "$pagination-hover-color": {
       "name": "$pagination-hover-color",
-      "value": "$link-hover"
+      "value": "$link-hover",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "pagination-hover-border-color": {
-      "id": "pagination-hover-border-color",
+    "$pagination-hover-border-color": {
       "name": "$pagination-hover-border-color",
-      "value": "$link-hover-border"
+      "value": "$link-hover-border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 71%)"
     },
-    "pagination-focus-color": {
-      "id": "pagination-focus-color",
+    "$pagination-focus-color": {
       "name": "$pagination-focus-color",
-      "value": "$link-focus"
+      "value": "$link-focus",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "pagination-focus-border-color": {
-      "id": "pagination-focus-border-color",
+    "$pagination-focus-border-color": {
       "name": "$pagination-focus-border-color",
-      "value": "$link-focus-border"
+      "value": "$link-focus-border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "pagination-active-color": {
-      "id": "pagination-active-color",
+    "$pagination-active-color": {
       "name": "$pagination-active-color",
-      "value": "$link-active"
+      "value": "$link-active",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "pagination-active-border-color": {
-      "id": "pagination-active-border-color",
+    "$pagination-active-border-color": {
       "name": "$pagination-active-border-color",
-      "value": "$link-active-border"
+      "value": "$link-active-border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "pagination-disabled-color": {
-      "id": "pagination-disabled-color",
+    "$pagination-disabled-color": {
       "name": "$pagination-disabled-color",
-      "value": "$grey"
+      "value": "$grey",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 48%)"
     },
-    "pagination-disabled-background-color": {
-      "id": "pagination-disabled-background-color",
+    "$pagination-disabled-background-color": {
       "name": "$pagination-disabled-background-color",
-      "value": "$grey-lighter"
+      "value": "$grey-lighter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "pagination-disabled-border-color": {
-      "id": "pagination-disabled-border-color",
+    "$pagination-disabled-border-color": {
       "name": "$pagination-disabled-border-color",
-      "value": "$grey-lighter"
+      "value": "$grey-lighter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "pagination-current-color": {
-      "id": "pagination-current-color",
+    "$pagination-current-color": {
       "name": "$pagination-current-color",
-      "value": "$link-invert"
+      "value": "$link-invert",
+      "type": "variable",
+      "computed_type": "compound",
+      "computed_value": "findColorInvert($blue)"
     },
-    "pagination-current-background-color": {
-      "id": "pagination-current-background-color",
+    "$pagination-current-background-color": {
       "name": "$pagination-current-background-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "pagination-current-border-color": {
-      "id": "pagination-current-border-color",
+    "$pagination-current-border-color": {
       "name": "$pagination-current-border-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "pagination-ellipsis-color": {
-      "id": "pagination-ellipsis-color",
+    "$pagination-ellipsis-color": {
       "name": "$pagination-ellipsis-color",
-      "value": "$grey-light"
+      "value": "$grey-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 71%)"
     }
-  }
+  },
+  "list": [
+    "$pagination-color",
+    "$pagination-border-color",
+    "$pagination-margin",
+    "$pagination-hover-color",
+    "$pagination-hover-border-color",
+    "$pagination-focus-color",
+    "$pagination-focus-border-color",
+    "$pagination-active-color",
+    "$pagination-active-border-color",
+    "$pagination-disabled-color",
+    "$pagination-disabled-background-color",
+    "$pagination-disabled-border-color",
+    "$pagination-current-color",
+    "$pagination-current-background-color",
+    "$pagination-current-border-color",
+    "$pagination-ellipsis-color"
+  ],
+  "file_path": "components/pagination.sass"
 }

docs/_data/variables/components/panel.json

@@ -1,105 +1,149 @@
 {
-  "dir_name": "components",
-  "file_name": "panel",
-  "file_relative_path": "components/panel.sass",
-  "file_line_from": 1,
-  "file_line_to": 24,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/panel.sass#L1,L24",
-  "vars": {
-    "panel-item-border": {
-      "id": "panel-item-border",
+  "by_name": {
+    "$panel-item-border": {
       "name": "$panel-item-border",
-      "value": "1px solid $border"
+      "value": "1px solid $border",
+      "type": "compound"
     },
-    "panel-heading-background-color": {
-      "id": "panel-heading-background-color",
+    "$panel-heading-background-color": {
       "name": "$panel-heading-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "panel-heading-color": {
-      "id": "panel-heading-color",
+    "$panel-heading-color": {
       "name": "$panel-heading-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "panel-heading-line-height": {
-      "id": "panel-heading-line-height",
+    "$panel-heading-line-height": {
       "name": "$panel-heading-line-height",
-      "value": "1.25"
+      "value": "1.25",
+      "type": "string"
     },
-    "panel-heading-padding": {
-      "id": "panel-heading-padding",
+    "$panel-heading-padding": {
       "name": "$panel-heading-padding",
-      "value": "0.5em 0.75em"
+      "value": "0.5em 0.75em",
+      "type": "size"
     },
-    "panel-heading-radius": {
-      "id": "panel-heading-radius",
+    "$panel-heading-radius": {
       "name": "$panel-heading-radius",
-      "value": "$radius"
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
     },
-    "panel-heading-size": {
-      "id": "panel-heading-size",
+    "$panel-heading-size": {
       "name": "$panel-heading-size",
-      "value": "1.25em"
+      "value": "1.25em",
+      "type": "size"
     },
-    "panel-heading-weight": {
-      "id": "panel-heading-weight",
+    "$panel-heading-weight": {
       "name": "$panel-heading-weight",
-      "value": "$weight-light"
+      "value": "$weight-light",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "300"
     },
-    "panel-tab-border-bottom": {
-      "id": "panel-tab-border-bottom",
+    "$panel-tab-border-bottom": {
       "name": "$panel-tab-border-bottom",
-      "value": "1px solid $border"
+      "value": "1px solid $border",
+      "type": "compound"
     },
-    "panel-tab-active-border-bottom-color": {
-      "id": "panel-tab-active-border-bottom-color",
+    "$panel-tab-active-border-bottom-color": {
       "name": "$panel-tab-active-border-bottom-color",
-      "value": "$link-active-border"
+      "value": "$link-active-border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "panel-tab-active-color": {
-      "id": "panel-tab-active-color",
+    "$panel-tab-active-color": {
       "name": "$panel-tab-active-color",
-      "value": "$link-active"
+      "value": "$link-active",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "panel-list-item-color": {
-      "id": "panel-list-item-color",
+    "$panel-list-item-color": {
       "name": "$panel-list-item-color",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "panel-list-item-hover-color": {
-      "id": "panel-list-item-hover-color",
+    "$panel-list-item-hover-color": {
       "name": "$panel-list-item-hover-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "panel-block-color": {
-      "id": "panel-block-color",
+    "$panel-block-color": {
       "name": "$panel-block-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "panel-block-hover-background-color": {
-      "id": "panel-block-hover-background-color",
+    "$panel-block-hover-background-color": {
       "name": "$panel-block-hover-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "panel-block-active-border-left-color": {
-      "id": "panel-block-active-border-left-color",
+    "$panel-block-active-border-left-color": {
       "name": "$panel-block-active-border-left-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "panel-block-active-color": {
-      "id": "panel-block-active-color",
+    "$panel-block-active-color": {
       "name": "$panel-block-active-color",
-      "value": "$link-active"
+      "value": "$link-active",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "panel-block-active-icon-color": {
-      "id": "panel-block-active-icon-color",
+    "$panel-block-active-icon-color": {
       "name": "$panel-block-active-icon-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "panel-icon-color": {
-      "id": "panel-icon-color",
+    "$panel-icon-color": {
       "name": "$panel-icon-color",
-      "value": "$text-light"
+      "value": "$text-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 48%)"
     }
-  }
+  },
+  "list": [
+    "$panel-item-border",
+    "$panel-heading-background-color",
+    "$panel-heading-color",
+    "$panel-heading-line-height",
+    "$panel-heading-padding",
+    "$panel-heading-radius",
+    "$panel-heading-size",
+    "$panel-heading-weight",
+    "$panel-tab-border-bottom",
+    "$panel-tab-active-border-bottom-color",
+    "$panel-tab-active-color",
+    "$panel-list-item-color",
+    "$panel-list-item-hover-color",
+    "$panel-block-color",
+    "$panel-block-hover-background-color",
+    "$panel-block-active-border-left-color",
+    "$panel-block-active-color",
+    "$panel-block-active-icon-color",
+    "$panel-icon-color"
+  ],
+  "file_path": "components/panel.sass"
 }

docs/_data/variables/components/tabs.json

@@ -1,130 +1,187 @@
 {
-  "dir_name": "components",
-  "file_name": "tabs",
-  "file_relative_path": "components/tabs.sass",
-  "file_line_from": 1,
-  "file_line_to": 27,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/tabs.sass#L1,L27",
-  "vars": {
-    "tabs-border-bottom-color": {
-      "id": "tabs-border-bottom-color",
+  "by_name": {
+    "$tabs-border-bottom-color": {
       "name": "$tabs-border-bottom-color",
-      "value": "$border"
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "tabs-border-bottom-style": {
-      "id": "tabs-border-bottom-style",
+    "$tabs-border-bottom-style": {
       "name": "$tabs-border-bottom-style",
-      "value": "solid"
+      "value": "solid",
+      "type": "string"
     },
-    "tabs-border-bottom-width": {
-      "id": "tabs-border-bottom-width",
+    "$tabs-border-bottom-width": {
       "name": "$tabs-border-bottom-width",
-      "value": "1px"
+      "value": "1px",
+      "type": "size"
     },
-    "tabs-link-color": {
-      "id": "tabs-link-color",
+    "$tabs-link-color": {
       "name": "$tabs-link-color",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "tabs-link-hover-border-bottom-color": {
-      "id": "tabs-link-hover-border-bottom-color",
+    "$tabs-link-hover-border-bottom-color": {
       "name": "$tabs-link-hover-border-bottom-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "tabs-link-hover-color": {
-      "id": "tabs-link-hover-color",
+    "$tabs-link-hover-color": {
       "name": "$tabs-link-hover-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "tabs-link-active-border-bottom-color": {
-      "id": "tabs-link-active-border-bottom-color",
+    "$tabs-link-active-border-bottom-color": {
       "name": "$tabs-link-active-border-bottom-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "tabs-link-active-color": {
-      "id": "tabs-link-active-color",
+    "$tabs-link-active-color": {
       "name": "$tabs-link-active-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "tabs-link-padding": {
-      "id": "tabs-link-padding",
+    "$tabs-link-padding": {
       "name": "$tabs-link-padding",
-      "value": "0.5em 1em"
+      "value": "0.5em 1em",
+      "type": "size"
     },
-    "tabs-boxed-link-radius": {
-      "id": "tabs-boxed-link-radius",
+    "$tabs-boxed-link-radius": {
       "name": "$tabs-boxed-link-radius",
-      "value": "$radius"
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
     },
-    "tabs-boxed-link-hover-background-color": {
-      "id": "tabs-boxed-link-hover-background-color",
+    "$tabs-boxed-link-hover-background-color": {
       "name": "$tabs-boxed-link-hover-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "tabs-boxed-link-hover-border-bottom-color": {
-      "id": "tabs-boxed-link-hover-border-bottom-color",
+    "$tabs-boxed-link-hover-border-bottom-color": {
       "name": "$tabs-boxed-link-hover-border-bottom-color",
-      "value": "$border"
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "tabs-boxed-link-active-background-color": {
-      "id": "tabs-boxed-link-active-background-color",
+    "$tabs-boxed-link-active-background-color": {
       "name": "$tabs-boxed-link-active-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "tabs-boxed-link-active-border-color": {
-      "id": "tabs-boxed-link-active-border-color",
+    "$tabs-boxed-link-active-border-color": {
       "name": "$tabs-boxed-link-active-border-color",
-      "value": "$border"
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "tabs-boxed-link-active-border-bottom-color": {
-      "id": "tabs-boxed-link-active-border-bottom-color",
+    "$tabs-boxed-link-active-border-bottom-color": {
       "name": "$tabs-boxed-link-active-border-bottom-color",
-      "value": "transparent"
+      "value": "transparent",
+      "type": "string"
     },
-    "tabs-toggle-link-border-color": {
-      "id": "tabs-toggle-link-border-color",
+    "$tabs-toggle-link-border-color": {
       "name": "$tabs-toggle-link-border-color",
-      "value": "$border"
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "tabs-toggle-link-border-style": {
-      "id": "tabs-toggle-link-border-style",
+    "$tabs-toggle-link-border-style": {
       "name": "$tabs-toggle-link-border-style",
-      "value": "solid"
+      "value": "solid",
+      "type": "string"
     },
-    "tabs-toggle-link-border-width": {
-      "id": "tabs-toggle-link-border-width",
+    "$tabs-toggle-link-border-width": {
       "name": "$tabs-toggle-link-border-width",
-      "value": "1px"
+      "value": "1px",
+      "type": "size"
     },
-    "tabs-toggle-link-hover-background-color": {
-      "id": "tabs-toggle-link-hover-background-color",
+    "$tabs-toggle-link-hover-background-color": {
       "name": "$tabs-toggle-link-hover-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "tabs-toggle-link-hover-border-color": {
-      "id": "tabs-toggle-link-hover-border-color",
+    "$tabs-toggle-link-hover-border-color": {
       "name": "$tabs-toggle-link-hover-border-color",
-      "value": "$border-hover"
+      "value": "$border-hover",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 71%)"
     },
-    "tabs-toggle-link-radius": {
-      "id": "tabs-toggle-link-radius",
+    "$tabs-toggle-link-radius": {
       "name": "$tabs-toggle-link-radius",
-      "value": "$radius"
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
     },
-    "tabs-toggle-link-active-background-color": {
-      "id": "tabs-toggle-link-active-background-color",
+    "$tabs-toggle-link-active-background-color": {
       "name": "$tabs-toggle-link-active-background-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "tabs-toggle-link-active-border-color": {
-      "id": "tabs-toggle-link-active-border-color",
+    "$tabs-toggle-link-active-border-color": {
       "name": "$tabs-toggle-link-active-border-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "tabs-toggle-link-active-color": {
-      "id": "tabs-toggle-link-active-color",
+    "$tabs-toggle-link-active-color": {
       "name": "$tabs-toggle-link-active-color",
-      "value": "$link-invert"
+      "value": "$link-invert",
+      "type": "variable",
+      "computed_type": "compound",
+      "computed_value": "findColorInvert($blue)"
     }
-  }
+  },
+  "list": [
+    "$tabs-border-bottom-color",
+    "$tabs-border-bottom-style",
+    "$tabs-border-bottom-width",
+    "$tabs-link-color",
+    "$tabs-link-hover-border-bottom-color",
+    "$tabs-link-hover-color",
+    "$tabs-link-active-border-bottom-color",
+    "$tabs-link-active-color",
+    "$tabs-link-padding",
+    "$tabs-boxed-link-radius",
+    "$tabs-boxed-link-hover-background-color",
+    "$tabs-boxed-link-hover-border-bottom-color",
+    "$tabs-boxed-link-active-background-color",
+    "$tabs-boxed-link-active-border-color",
+    "$tabs-boxed-link-active-border-bottom-color",
+    "$tabs-toggle-link-border-color",
+    "$tabs-toggle-link-border-style",
+    "$tabs-toggle-link-border-width",
+    "$tabs-toggle-link-hover-background-color",
+    "$tabs-toggle-link-hover-border-color",
+    "$tabs-toggle-link-radius",
+    "$tabs-toggle-link-active-background-color",
+    "$tabs-toggle-link-active-border-color",
+    "$tabs-toggle-link-active-color"
+  ],
+  "file_path": "components/tabs.sass"
 }

docs/_data/variables/elements/_all.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "elements/_all.sass"
+}

docs/_data/variables/elements/box.json

@@ -1,45 +1,55 @@
 {
-  "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",
+  "by_name": {
+    "$box-color": {
       "name": "$box-color",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "box-background-color": {
-      "id": "box-background-color",
+    "$box-background-color": {
       "name": "$box-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "box-radius": {
-      "id": "box-radius",
+    "$box-radius": {
       "name": "$box-radius",
-      "value": "$radius-large"
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
     },
-    "box-shadow": {
-      "id": "box-shadow",
+    "$box-shadow": {
       "name": "$box-shadow",
-      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
+      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
+      "type": "compound"
     },
-    "box-padding": {
-      "id": "box-padding",
+    "$box-padding": {
       "name": "$box-padding",
-      "value": "1.25rem"
+      "value": "1.25rem",
+      "type": "size"
     },
-    "box-link-hover-shadow": {
-      "id": "box-link-hover-shadow",
+    "$box-link-hover-shadow": {
       "name": "$box-link-hover-shadow",
-      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px $link"
+      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px $link",
+      "type": "compound"
     },
-    "box-link-active-shadow": {
-      "id": "box-link-active-shadow",
+    "$box-link-active-shadow": {
       "name": "$box-link-active-shadow",
-      "value": "inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link"
+      "value": "inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link",
+      "type": "compound"
     }
-  }
+  },
+  "list": [
+    "$box-color",
+    "$box-background-color",
+    "$box-radius",
+    "$box-shadow",
+    "$box-padding",
+    "$box-link-hover-shadow",
+    "$box-link-active-shadow"
+  ],
+  "file_path": "elements/box.sass"
 }

docs/_data/variables/elements/button.json

@@ -1,115 +1,186 @@
 {
-  "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",
+  "by_name": {
+    "$button-color": {
       "name": "$button-color",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "button-background-color": {
-      "id": "button-background-color",
+    "$button-background-color": {
       "name": "$button-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "button-border-color": {
-      "id": "button-border-color",
+    "$button-border-color": {
       "name": "$button-border-color",
-      "value": "$grey-lighter"
-    },
-    "button-hover-color": {
-      "id": "button-hover-color",
+      "value": "$grey-lighter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
+    },
+    "$button-border-width": {
+      "name": "$button-border-width",
+      "value": "$control-border-width",
+      "type": "variable",
+      "computed_type": "string"
+    },
+    "$button-padding-vertical": {
+      "name": "$button-padding-vertical",
+      "value": "calc(0.375em - #{$button-border-width})",
+      "type": "compound"
+    },
+    "$button-padding-horizontal": {
+      "name": "$button-padding-horizontal",
+      "value": "0.75em",
+      "type": "size"
+    },
+    "$button-hover-color": {
       "name": "$button-hover-color",
-      "value": "$link-hover"
+      "value": "$link-hover",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "button-hover-border-color": {
-      "id": "button-hover-border-color",
+    "$button-hover-border-color": {
       "name": "$button-hover-border-color",
-      "value": "$link-hover-border"
+      "value": "$link-hover-border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 71%)"
     },
-    "button-focus-color": {
-      "id": "button-focus-color",
+    "$button-focus-color": {
       "name": "$button-focus-color",
-      "value": "$link-focus"
+      "value": "$link-focus",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "button-focus-border-color": {
-      "id": "button-focus-border-color",
+    "$button-focus-border-color": {
       "name": "$button-focus-border-color",
-      "value": "$link-focus-border"
+      "value": "$link-focus-border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "button-focus-box-shadow-size": {
-      "id": "button-focus-box-shadow-size",
+    "$button-focus-box-shadow-size": {
       "name": "$button-focus-box-shadow-size",
-      "value": "0 0 0 0.125em"
+      "value": "0 0 0 0.125em",
+      "type": "size"
     },
-    "button-focus-box-shadow-color": {
-      "id": "button-focus-box-shadow-color",
+    "$button-focus-box-shadow-color": {
       "name": "$button-focus-box-shadow-color",
-      "value": "rgba($link, 0.25)"
+      "value": "rgba($link, 0.25)",
+      "type": "compound"
     },
-    "button-active-color": {
-      "id": "button-active-color",
+    "$button-active-color": {
       "name": "$button-active-color",
-      "value": "$link-active"
+      "value": "$link-active",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "button-active-border-color": {
-      "id": "button-active-border-color",
+    "$button-active-border-color": {
       "name": "$button-active-border-color",
-      "value": "$link-active-border"
+      "value": "$link-active-border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "button-text-color": {
-      "id": "button-text-color",
+    "$button-text-color": {
       "name": "$button-text-color",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "button-text-hover-background-color": {
-      "id": "button-text-hover-background-color",
+    "$button-text-hover-background-color": {
       "name": "$button-text-hover-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "button-text-hover-color": {
-      "id": "button-text-hover-color",
+    "$button-text-hover-color": {
       "name": "$button-text-hover-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "button-disabled-background-color": {
-      "id": "button-disabled-background-color",
+    "$button-disabled-background-color": {
       "name": "$button-disabled-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "button-disabled-border-color": {
-      "id": "button-disabled-border-color",
+    "$button-disabled-border-color": {
       "name": "$button-disabled-border-color",
-      "value": "$grey-lighter"
+      "value": "$grey-lighter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "button-disabled-shadow": {
-      "id": "button-disabled-shadow",
+    "$button-disabled-shadow": {
       "name": "$button-disabled-shadow",
-      "value": "none"
+      "value": "none",
+      "type": "string"
     },
-    "button-disabled-opacity": {
-      "id": "button-disabled-opacity",
+    "$button-disabled-opacity": {
       "name": "$button-disabled-opacity",
-      "value": "0.5"
+      "value": "0.5",
+      "type": "string"
     },
-    "button-static-color": {
-      "id": "button-static-color",
+    "$button-static-color": {
       "name": "$button-static-color",
-      "value": "$grey"
+      "value": "$grey",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 48%)"
     },
-    "button-static-background-color": {
-      "id": "button-static-background-color",
+    "$button-static-background-color": {
       "name": "$button-static-background-color",
-      "value": "$white-ter"
+      "value": "$white-ter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "button-static-border-color": {
-      "id": "button-static-border-color",
+    "$button-static-border-color": {
       "name": "$button-static-border-color",
-      "value": "$grey-lighter"
+      "value": "$grey-lighter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     }
-  }
-}
+  },
+  "list": [
+    "$button-color",
+    "$button-background-color",
+    "$button-border-color",
+    "$button-border-width",
+    "$button-padding-vertical",
+    "$button-padding-horizontal",
+    "$button-hover-color",
+    "$button-hover-border-color",
+    "$button-focus-color",
+    "$button-focus-border-color",
+    "$button-focus-box-shadow-size",
+    "$button-focus-box-shadow-color",
+    "$button-active-color",
+    "$button-active-border-color",
+    "$button-text-color",
+    "$button-text-hover-background-color",
+    "$button-text-hover-color",
+    "$button-disabled-background-color",
+    "$button-disabled-border-color",
+    "$button-disabled-shadow",
+    "$button-disabled-opacity",
+    "$button-static-color",
+    "$button-static-background-color",
+    "$button-static-border-color"
+  ],
+  "file_path": "elements/button.sass"
+}

docs/_data/variables/elements/container.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "elements/container.sass"
+}

docs/_data/variables/elements/content.json

@@ -1,85 +1,109 @@
 {
-  "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",
+  "by_name": {
+    "$content-heading-color": {
       "name": "$content-heading-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "content-heading-weight": {
-      "id": "content-heading-weight",
+    "$content-heading-weight": {
       "name": "$content-heading-weight",
-      "value": "$weight-normal"
+      "value": "$weight-semibold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "600"
     },
-    "content-heading-line-height": {
-      "id": "content-heading-line-height",
+    "$content-heading-line-height": {
       "name": "$content-heading-line-height",
-      "value": "1.125"
+      "value": "1.125",
+      "type": "string"
     },
-    "content-blockquote-background-color": {
-      "id": "content-blockquote-background-color",
+    "$content-blockquote-background-color": {
       "name": "$content-blockquote-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "content-blockquote-border-left": {
-      "id": "content-blockquote-border-left",
+    "$content-blockquote-border-left": {
       "name": "$content-blockquote-border-left",
-      "value": "5px solid $border"
+      "value": "5px solid $border",
+      "type": "compound"
     },
-    "content-blockquote-padding": {
-      "id": "content-blockquote-padding",
+    "$content-blockquote-padding": {
       "name": "$content-blockquote-padding",
-      "value": "1.25em 1.5em"
+      "value": "1.25em 1.5em",
+      "type": "size"
     },
-    "content-pre-padding": {
-      "id": "content-pre-padding",
+    "$content-pre-padding": {
       "name": "$content-pre-padding",
-      "value": "1.25em 1.5em"
+      "value": "1.25em 1.5em",
+      "type": "size"
     },
-    "content-table-cell-border": {
-      "id": "content-table-cell-border",
+    "$content-table-cell-border": {
       "name": "$content-table-cell-border",
-      "value": "1px solid $border"
+      "value": "1px solid $border",
+      "type": "compound"
     },
-    "content-table-cell-border-width": {
-      "id": "content-table-cell-border-width",
+    "$content-table-cell-border-width": {
       "name": "$content-table-cell-border-width",
-      "value": "0 0 1px"
+      "value": "0 0 1px",
+      "type": "size"
     },
-    "content-table-cell-padding": {
-      "id": "content-table-cell-padding",
+    "$content-table-cell-padding": {
       "name": "$content-table-cell-padding",
-      "value": "0.5em 0.75em"
+      "value": "0.5em 0.75em",
+      "type": "size"
     },
-    "content-table-cell-heading-color": {
-      "id": "content-table-cell-heading-color",
+    "$content-table-cell-heading-color": {
       "name": "$content-table-cell-heading-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "content-table-head-cell-border-width": {
-      "id": "content-table-head-cell-border-width",
+    "$content-table-head-cell-border-width": {
       "name": "$content-table-head-cell-border-width",
-      "value": "0 0 2px"
+      "value": "0 0 2px",
+      "type": "size"
     },
-    "content-table-head-cell-color": {
-      "id": "content-table-head-cell-color",
+    "$content-table-head-cell-color": {
       "name": "$content-table-head-cell-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "content-table-foot-cell-border-width": {
-      "id": "content-table-foot-cell-border-width",
+    "$content-table-foot-cell-border-width": {
       "name": "$content-table-foot-cell-border-width",
-      "value": "2px 0 0"
+      "value": "2px 0 0",
+      "type": "string"
     },
-    "content-table-foot-cell-color": {
-      "id": "content-table-foot-cell-color",
+    "$content-table-foot-cell-color": {
       "name": "$content-table-foot-cell-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     }
-  }
-}
+  },
+  "list": [
+    "$content-heading-color",
+    "$content-heading-weight",
+    "$content-heading-line-height",
+    "$content-blockquote-background-color",
+    "$content-blockquote-border-left",
+    "$content-blockquote-padding",
+    "$content-pre-padding",
+    "$content-table-cell-border",
+    "$content-table-cell-border-width",
+    "$content-table-cell-padding",
+    "$content-table-cell-heading-color",
+    "$content-table-head-cell-border-width",
+    "$content-table-head-cell-color",
+    "$content-table-foot-cell-border-width",
+    "$content-table-foot-cell-color"
+  ],
+  "file_path": "elements/content.sass"
+}

docs/_data/variables/elements/form.json

@@ -1,160 +1,235 @@
 {
-  "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",
+  "by_name": {
+    "$input-color": {
       "name": "$input-color",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "input-background-color": {
-      "id": "input-background-color",
+    "$input-background-color": {
       "name": "$input-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "input-border-color": {
-      "id": "input-border-color",
+    "$input-border-color": {
       "name": "$input-border-color",
-      "value": "$grey-lighter"
+      "value": "$grey-lighter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "input-shadow": {
-      "id": "input-shadow",
+    "$input-shadow": {
       "name": "$input-shadow",
-      "value": "inset 0 1px 2px rgba($black, 0.1)"
+      "value": "inset 0 1px 2px rgba($black, 0.1)",
+      "type": "compound"
     },
-    "input-hover-color": {
-      "id": "input-hover-color",
+    "$input-hover-color": {
       "name": "$input-hover-color",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "input-hover-border-color": {
-      "id": "input-hover-border-color",
+    "$input-hover-border-color": {
       "name": "$input-hover-border-color",
-      "value": "$grey-light"
+      "value": "$grey-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 71%)"
     },
-    "input-focus-color": {
-      "id": "input-focus-color",
+    "$input-focus-color": {
       "name": "$input-focus-color",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "input-focus-border-color": {
-      "id": "input-focus-border-color",
+    "$input-focus-border-color": {
       "name": "$input-focus-border-color",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "input-focus-box-shadow-size": {
-      "id": "input-focus-box-shadow-size",
+    "$input-focus-box-shadow-size": {
       "name": "$input-focus-box-shadow-size",
-      "value": "0 0 0 0.125em"
+      "value": "0 0 0 0.125em",
+      "type": "size"
     },
-    "input-focus-box-shadow-color": {
-      "id": "input-focus-box-shadow-color",
+    "$input-focus-box-shadow-color": {
       "name": "$input-focus-box-shadow-color",
-      "value": "rgba($link, 0.25)"
+      "value": "rgba($link, 0.25)",
+      "type": "compound"
     },
-    "input-disabled-color": {
-      "id": "input-disabled-color",
+    "$input-disabled-color": {
       "name": "$input-disabled-color",
-      "value": "$text-light"
+      "value": "$text-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 48%)"
     },
-    "input-disabled-background-color": {
-      "id": "input-disabled-background-color",
+    "$input-disabled-background-color": {
       "name": "$input-disabled-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "input-disabled-border-color": {
-      "id": "input-disabled-border-color",
+    "$input-disabled-border-color": {
       "name": "$input-disabled-border-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "input-arrow": {
-      "id": "input-arrow",
+    "$input-arrow": {
       "name": "$input-arrow",
-      "value": "$link"
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "input-icon-color": {
-      "id": "input-icon-color",
+    "$input-icon-color": {
       "name": "$input-icon-color",
-      "value": "$grey-lighter"
+      "value": "$grey-lighter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "input-icon-active-color": {
-      "id": "input-icon-active-color",
+    "$input-icon-active-color": {
       "name": "$input-icon-active-color",
-      "value": "$grey"
+      "value": "$grey",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 48%)"
     },
-    "input-radius": {
-      "id": "input-radius",
+    "$input-radius": {
       "name": "$input-radius",
-      "value": "$radius"
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
     },
-    "file-border-color": {
-      "id": "file-border-color",
+    "$file-border-color": {
       "name": "$file-border-color",
-      "value": "$border"
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "file-radius": {
-      "id": "file-radius",
+    "$file-radius": {
       "name": "$file-radius",
-      "value": "$radius"
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
     },
-    "file-cta-background-color": {
-      "id": "file-cta-background-color",
+    "$file-cta-background-color": {
       "name": "$file-cta-background-color",
-      "value": "$white-ter"
+      "value": "$white-ter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "file-cta-color": {
-      "id": "file-cta-color",
+    "$file-cta-color": {
       "name": "$file-cta-color",
-      "value": "$grey-dark"
+      "value": "$grey-dark",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "file-cta-hover-color": {
-      "id": "file-cta-hover-color",
+    "$file-cta-hover-color": {
       "name": "$file-cta-hover-color",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "file-cta-active-color": {
-      "id": "file-cta-active-color",
+    "$file-cta-active-color": {
       "name": "$file-cta-active-color",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "file-name-border-color": {
-      "id": "file-name-border-color",
+    "$file-name-border-color": {
       "name": "$file-name-border-color",
-      "value": "$border"
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "file-name-border-style": {
-      "id": "file-name-border-style",
+    "$file-name-border-style": {
       "name": "$file-name-border-style",
-      "value": "solid"
+      "value": "solid",
+      "type": "string"
     },
-    "file-name-border-width": {
-      "id": "file-name-border-width",
+    "$file-name-border-width": {
       "name": "$file-name-border-width",
-      "value": "1px 1px 1px 0"
+      "value": "1px 1px 1px 0",
+      "type": "string"
     },
-    "file-name-max-width": {
-      "id": "file-name-max-width",
+    "$file-name-max-width": {
       "name": "$file-name-max-width",
-      "value": "16em"
+      "value": "16em",
+      "type": "size"
     },
-    "label-color": {
-      "id": "label-color",
+    "$label-color": {
       "name": "$label-color",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "label-weight": {
-      "id": "label-weight",
+    "$label-weight": {
       "name": "$label-weight",
-      "value": "$weight-bold"
+      "value": "$weight-bold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "700"
     },
-    "help-size": {
-      "id": "help-size",
+    "$help-size": {
       "name": "$help-size",
-      "value": "$size-small"
+      "value": "$size-small",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "0.75rem"
     }
-  }
+  },
+  "list": [
+    "$input-color",
+    "$input-background-color",
+    "$input-border-color",
+    "$input-shadow",
+    "$input-hover-color",
+    "$input-hover-border-color",
+    "$input-focus-color",
+    "$input-focus-border-color",
+    "$input-focus-box-shadow-size",
+    "$input-focus-box-shadow-color",
+    "$input-disabled-color",
+    "$input-disabled-background-color",
+    "$input-disabled-border-color",
+    "$input-arrow",
+    "$input-icon-color",
+    "$input-icon-active-color",
+    "$input-radius",
+    "$file-border-color",
+    "$file-radius",
+    "$file-cta-background-color",
+    "$file-cta-color",
+    "$file-cta-hover-color",
+    "$file-cta-active-color",
+    "$file-name-border-color",
+    "$file-name-border-style",
+    "$file-name-border-width",
+    "$file-name-max-width",
+    "$label-color",
+    "$label-weight",
+    "$help-size"
+  ],
+  "file_path": "elements/form.sass"
 }

docs/_data/variables/elements/icon.json

@@ -1,30 +1,31 @@
 {
-  "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",
+  "by_name": {
+    "$icon-dimensions": {
       "name": "$icon-dimensions",
-      "value": "1.5rem"
+      "value": "1.5rem",
+      "type": "size"
     },
-    "icon-dimensions-small": {
-      "id": "icon-dimensions-small",
+    "$icon-dimensions-small": {
       "name": "$icon-dimensions-small",
-      "value": "1rem"
+      "value": "1rem",
+      "type": "size"
     },
-    "icon-dimensions-medium": {
-      "id": "icon-dimensions-medium",
+    "$icon-dimensions-medium": {
       "name": "$icon-dimensions-medium",
-      "value": "2rem"
+      "value": "2rem",
+      "type": "size"
     },
-    "icon-dimensions-large": {
-      "id": "icon-dimensions-large",
+    "$icon-dimensions-large": {
       "name": "$icon-dimensions-large",
-      "value": "3rem"
+      "value": "3rem",
+      "type": "size"
     }
-  }
+  },
+  "list": [
+    "$icon-dimensions",
+    "$icon-dimensions-small",
+    "$icon-dimensions-medium",
+    "$icon-dimensions-large"
+  ],
+  "file_path": "elements/icon.sass"
 }

docs/_data/variables/elements/image.json

@@ -1,15 +1,13 @@
 {
-  "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",
+  "by_name": {
+    "$dimensions": {
       "name": "$dimensions",
-      "value": "16 24 32 48 64 96 128"
+      "value": "16 24 32 48 64 96 128",
+      "type": "string"
     }
-  }
+  },
+  "list": [
+    "$dimensions"
+  ],
+  "file_path": "elements/image.sass"
 }

docs/_data/variables/elements/notification.json

@@ -1,25 +1,29 @@
 {
-  "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",
+  "by_name": {
+    "$notification-background-color": {
       "name": "$notification-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "notification-radius": {
-      "id": "notification-radius",
+    "$notification-radius": {
       "name": "$notification-radius",
-      "value": "$radius"
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
     },
-    "notification-padding": {
-      "id": "notification-padding",
+    "$notification-padding": {
       "name": "$notification-padding",
-      "value": "1.25rem 2.5rem 1.25rem 1.5rem"
+      "value": "1.25rem 2.5rem 1.25rem 1.5rem",
+      "type": "size"
     }
-  }
+  },
+  "list": [
+    "$notification-background-color",
+    "$notification-radius",
+    "$notification-padding"
+  ],
+  "file_path": "elements/notification.sass"
 }

docs/_data/variables/elements/other.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "elements/other.sass"
+}

docs/_data/variables/elements/progress.json

@@ -1,20 +1,23 @@
 {
-  "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",
+  "by_name": {
+    "$progress-bar-background-color": {
       "name": "$progress-bar-background-color",
-      "value": "$border"
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "progress-value-background-color": {
-      "id": "progress-value-background-color",
+    "$progress-value-background-color": {
       "name": "$progress-value-background-color",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     }
-  }
+  },
+  "list": [
+    "$progress-bar-background-color",
+    "$progress-value-background-color"
+  ],
+  "file_path": "elements/progress.sass"
 }

docs/_data/variables/elements/table.json

@@ -1,85 +1,117 @@
 {
-  "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",
+  "by_name": {
+    "$table-color": {
       "name": "$table-color",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "table-background-color": {
-      "id": "table-background-color",
+    "$table-background-color": {
       "name": "$table-background-color",
-      "value": "$white"
+      "value": "$white",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
     },
-    "table-cell-border": {
-      "id": "table-cell-border",
+    "$table-cell-border": {
       "name": "$table-cell-border",
-      "value": "1px solid $grey-lighter"
+      "value": "1px solid $grey-lighter",
+      "type": "compound"
     },
-    "table-cell-border-width": {
-      "id": "table-cell-border-width",
+    "$table-cell-border-width": {
       "name": "$table-cell-border-width",
-      "value": "0 0 1px"
+      "value": "0 0 1px",
+      "type": "size"
     },
-    "table-cell-padding": {
-      "id": "table-cell-padding",
+    "$table-cell-padding": {
       "name": "$table-cell-padding",
-      "value": "0.5em 0.75em"
+      "value": "0.5em 0.75em",
+      "type": "size"
     },
-    "table-cell-heading-color": {
-      "id": "table-cell-heading-color",
+    "$table-cell-heading-color": {
       "name": "$table-cell-heading-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "table-head-cell-border-width": {
-      "id": "table-head-cell-border-width",
+    "$table-head-cell-border-width": {
       "name": "$table-head-cell-border-width",
-      "value": "0 0 2px"
+      "value": "0 0 2px",
+      "type": "size"
     },
-    "table-head-cell-color": {
-      "id": "table-head-cell-color",
+    "$table-head-cell-color": {
       "name": "$table-head-cell-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "table-foot-cell-border-width": {
-      "id": "table-foot-cell-border-width",
+    "$table-foot-cell-border-width": {
       "name": "$table-foot-cell-border-width",
-      "value": "2px 0 0"
+      "value": "2px 0 0",
+      "type": "string"
     },
-    "table-foot-cell-color": {
-      "id": "table-foot-cell-color",
+    "$table-foot-cell-color": {
       "name": "$table-foot-cell-color",
-      "value": "$text-strong"
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "table-row-hover-background-color": {
-      "id": "table-row-hover-background-color",
+    "$table-row-hover-background-color": {
       "name": "$table-row-hover-background-color",
-      "value": "$white-bis"
+      "value": "$white-bis",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 98%)"
     },
-    "table-row-active-background-color": {
-      "id": "table-row-active-background-color",
+    "$table-row-active-background-color": {
       "name": "$table-row-active-background-color",
-      "value": "$primary"
+      "value": "$primary",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(171, 100%, 41%)"
     },
-    "table-row-active-color": {
-      "id": "table-row-active-color",
+    "$table-row-active-color": {
       "name": "$table-row-active-color",
-      "value": "$primary-invert"
+      "value": "$primary-invert",
+      "type": "variable",
+      "computed_type": "compound",
+      "computed_value": "findColorInvert($turquoise)"
     },
-    "table-striped-row-even-background-color": {
-      "id": "table-striped-row-even-background-color",
+    "$table-striped-row-even-background-color": {
       "name": "$table-striped-row-even-background-color",
-      "value": "$white-bis"
+      "value": "$white-bis",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 98%)"
     },
-    "table-striped-row-even-hover-background-color": {
-      "id": "table-striped-row-even-hover-background-color",
+    "$table-striped-row-even-hover-background-color": {
       "name": "$table-striped-row-even-hover-background-color",
-      "value": "$white-ter"
+      "value": "$white-ter",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     }
-  }
+  },
+  "list": [
+    "$table-color",
+    "$table-background-color",
+    "$table-cell-border",
+    "$table-cell-border-width",
+    "$table-cell-padding",
+    "$table-cell-heading-color",
+    "$table-head-cell-border-width",
+    "$table-head-cell-color",
+    "$table-foot-cell-border-width",
+    "$table-foot-cell-color",
+    "$table-row-hover-background-color",
+    "$table-row-active-background-color",
+    "$table-row-active-color",
+    "$table-striped-row-even-background-color",
+    "$table-striped-row-even-hover-background-color"
+  ],
+  "file_path": "elements/table.sass"
 }

docs/_data/variables/elements/tag.json

@@ -1,30 +1,37 @@
 {
-  "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",
+  "by_name": {
+    "$tag-background-color": {
       "name": "$tag-background-color",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "tag-color": {
-      "id": "tag-color",
+    "$tag-color": {
       "name": "$tag-color",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "tag-radius": {
-      "id": "tag-radius",
+    "$tag-radius": {
       "name": "$tag-radius",
-      "value": "$radius"
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
     },
-    "tag-delete-margin": {
-      "id": "tag-delete-margin",
+    "$tag-delete-margin": {
       "name": "$tag-delete-margin",
-      "value": "1px"
+      "value": "1px",
+      "type": "size"
     }
-  }
+  },
+  "list": [
+    "$tag-background-color",
+    "$tag-color",
+    "$tag-radius",
+    "$tag-delete-margin"
+  ],
+  "file_path": "elements/tag.sass"
 }

docs/_data/variables/elements/title.json

@@ -1,75 +1,113 @@
 {
-  "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",
+  "by_name": {
+    "$title-color": {
       "name": "$title-color",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "title-size": {
-      "id": "title-size",
+    "$title-size": {
       "name": "$title-size",
-      "value": "$size-3"
+      "value": "$size-3",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "2rem"
     },
-    "title-weight": {
-      "id": "title-weight",
+    "$title-weight": {
       "name": "$title-weight",
-      "value": "$weight-semibold"
+      "value": "$weight-semibold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "600"
     },
-    "title-strong-color": {
-      "id": "title-strong-color",
+    "$title-line-height": {
+      "name": "$title-line-height",
+      "value": "1.125",
+      "type": "string"
+    },
+    "$title-strong-color": {
       "name": "$title-strong-color",
-      "value": "inherit"
+      "value": "inherit",
+      "type": "string"
     },
-    "title-strong-weight": {
-      "id": "title-strong-weight",
+    "$title-strong-weight": {
       "name": "$title-strong-weight",
-      "value": "inherit"
+      "value": "inherit",
+      "type": "string"
     },
-    "title-line-height": {
-      "id": "title-line-height",
-      "name": "$title-line-height",
-      "value": "1.125"
+    "$title-sub-size": {
+      "name": "$title-sub-size",
+      "value": "0.75em",
+      "type": "size"
+    },
+    "$title-sup-size": {
+      "name": "$title-sup-size",
+      "value": "0.75em",
+      "type": "size"
     },
-    "subtitle-color": {
-      "id": "subtitle-color",
+    "$subtitle-color": {
       "name": "$subtitle-color",
-      "value": "$grey-dark"
+      "value": "$grey-dark",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "subtitle-size": {
-      "id": "subtitle-size",
+    "$subtitle-size": {
       "name": "$subtitle-size",
-      "value": "$size-5"
+      "value": "$size-5",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "1.25rem"
     },
-    "subtitle-weight": {
-      "id": "subtitle-weight",
+    "$subtitle-weight": {
       "name": "$subtitle-weight",
-      "value": "$weight-normal"
+      "value": "$weight-normal",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "400"
     },
-    "subtitle-line-height": {
-      "id": "subtitle-line-height",
+    "$subtitle-line-height": {
       "name": "$subtitle-line-height",
-      "value": "1.25"
+      "value": "1.25",
+      "type": "string"
     },
-    "subtitle-strong-color": {
-      "id": "subtitle-strong-color",
+    "$subtitle-strong-color": {
       "name": "$subtitle-strong-color",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "subtitle-strong-weight": {
-      "id": "subtitle-strong-weight",
+    "$subtitle-strong-weight": {
       "name": "$subtitle-strong-weight",
-      "value": "$weight-semibold"
+      "value": "$weight-semibold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "600"
     },
-    "subtitle-negative-margin": {
-      "id": "subtitle-negative-margin",
+    "$subtitle-negative-margin": {
       "name": "$subtitle-negative-margin",
-      "value": "-1.25rem"
+      "value": "-1.25rem",
+      "type": "size"
     }
-  }
-}
+  },
+  "list": [
+    "$title-color",
+    "$title-size",
+    "$title-weight",
+    "$title-line-height",
+    "$title-strong-color",
+    "$title-strong-weight",
+    "$title-sub-size",
+    "$title-sup-size",
+    "$subtitle-color",
+    "$subtitle-size",
+    "$subtitle-weight",
+    "$subtitle-line-height",
+    "$subtitle-strong-color",
+    "$subtitle-strong-weight",
+    "$subtitle-negative-margin"
+  ],
+  "file_path": "elements/title.sass"
+}

docs/_data/variables/grid/_all.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "grid/_all.sass"
+}

docs/_data/variables/grid/columns.json

@@ -1,15 +1,13 @@
 {
-  "dir_name": "grid",
-  "file_name": "columns",
-  "file_relative_path": "grid/columns.sass",
-  "file_line_from": 1,
-  "file_line_to": 1,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/grid/columns.sass#L1,L1",
-  "vars": {
-    "column-gap": {
-      "id": "column-gap",
+  "by_name": {
+    "$column-gap": {
       "name": "$column-gap",
-      "value": "0.75rem"
+      "value": "0.75rem",
+      "type": "size"
     }
-  }
+  },
+  "list": [
+    "$column-gap"
+  ],
+  "file_path": "grid/columns.sass"
 }

docs/_data/variables/grid/tiles.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "grid/tiles.sass"
+}

docs/_data/variables/layout/_all.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "layout/_all.sass"
+}

docs/_data/variables/layout/footer.json

@@ -1,15 +1,15 @@
 {
-  "dir_name": "layout",
-  "file_name": "footer",
-  "file_relative_path": "layout/footer.sass",
-  "file_line_from": 1,
-  "file_line_to": 1,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/layout/footer.sass#L1,L1",
-  "vars": {
-    "footer-background-color": {
-      "id": "footer-background-color",
+  "by_name": {
+    "$footer-background-color": {
       "name": "$footer-background-color",
-      "value": "$background"
+      "value": "$white-bis",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 98%)"
     }
-  }
+  },
+  "list": [
+    "$footer-background-color"
+  ],
+  "file_path": "layout/footer.sass"
 }

docs/_data/variables/layout/hero.json

@@ -0,0 +1,5 @@
+{
+  "by_name": {},
+  "list": [],
+  "file_path": "layout/hero.sass"
+}

docs/_data/variables/layout/section.json

@@ -1,25 +1,25 @@
 {
-  "dir_name": "layout",
-  "file_name": "section",
-  "file_relative_path": "layout/section.sass",
-  "file_line_from": 1,
-  "file_line_to": 3,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/layout/section.sass#L1,L3",
-  "vars": {
-    "section-padding": {
-      "id": "section-padding",
+  "by_name": {
+    "$section-padding": {
       "name": "$section-padding",
-      "value": "3rem 1.5rem"
+      "value": "3rem 1.5rem",
+      "type": "size"
     },
-    "section-padding-medium": {
-      "id": "section-padding-medium",
+    "$section-padding-medium": {
       "name": "$section-padding-medium",
-      "value": "9rem 1.5rem"
+      "value": "9rem 1.5rem",
+      "type": "size"
     },
-    "section-padding-large": {
-      "id": "section-padding-large",
+    "$section-padding-large": {
       "name": "$section-padding-large",
-      "value": "18rem 1.5rem"
+      "value": "18rem 1.5rem",
+      "type": "size"
     }
-  }
+  },
+  "list": [
+    "$section-padding",
+    "$section-padding-medium",
+    "$section-padding-large"
+  ],
+  "file_path": "layout/section.sass"
 }

docs/_data/variables/utilities/controls.json

@@ -1,30 +0,0 @@
-{
-  "dir_name": "utilities",
-  "file_name": "controls",
-  "file_relative_path": "utilities/controls.sass",
-  "file_line_from": 1,
-  "file_line_to": 5,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/utilities/controls.sass#L1,L5",
-  "vars": {
-    "control-radius": {
-      "id": "control-radius",
-      "name": "$control-radius",
-      "value": "$radius"
-    },
-    "control-radius-small": {
-      "id": "control-radius-small",
-      "name": "$control-radius-small",
-      "value": "$radius-small"
-    },
-    "control-padding-vertical": {
-      "id": "control-padding-vertical",
-      "name": "$control-padding-vertical",
-      "value": "calc(0.375em - 1px)"
-    },
-    "control-padding-horizontal": {
-      "id": "control-padding-horizontal",
-      "name": "$control-padding-horizontal",
-      "value": "calc(0.625em - 1px)"
-    }
-  }
-}

docs/_data/variables/utilities/derived-variables.json

@@ -1,265 +1,378 @@
 {
-  "dir_name": "utilities",
-  "file_name": "derived-variables",
-  "file_relative_path": "utilities/derived-variables.sass",
-  "file_line_from": 1,
-  "file_line_to": 82,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/utilities/derived-variables.sass#L1,L82",
-  "vars": {
-    "primary": {
-      "id": "primary",
+  "by_name": {
+    "$primary": {
       "name": "$primary",
-      "value": "$turquoise"
+      "value": "$turquoise",
+      "type": "variable",
+      "computed_value": "hsl(171, 100%, 41%)"
     },
-    "info": {
-      "id": "info",
+    "$info": {
       "name": "$info",
-      "value": "$cyan"
+      "value": "$cyan",
+      "type": "variable",
+      "computed_value": "hsl(204, 86%,  53%)"
     },
-    "success": {
-      "id": "success",
+    "$success": {
       "name": "$success",
-      "value": "$green"
+      "value": "$green",
+      "type": "variable",
+      "computed_value": "hsl(141, 71%,  48%)"
     },
-    "warning": {
-      "id": "warning",
+    "$warning": {
       "name": "$warning",
-      "value": "$yellow"
+      "value": "$yellow",
+      "type": "variable",
+      "computed_value": "hsl(48,  100%, 67%)"
     },
-    "danger": {
-      "id": "danger",
+    "$danger": {
       "name": "$danger",
-      "value": "$red"
+      "value": "$red",
+      "type": "variable",
+      "computed_value": "hsl(348, 100%, 61%)"
     },
-    "light": {
-      "id": "light",
+    "$light": {
       "name": "$light",
-      "value": "$white-ter"
+      "value": "$white-ter",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "dark": {
-      "id": "dark",
+    "$dark": {
       "name": "$dark",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "orange-invert": {
-      "id": "orange-invert",
+    "$orange-invert": {
       "name": "$orange-invert",
-      "value": "findColorInvert($orange)"
+      "value": "findColorInvert($orange)",
+      "type": "function",
+      "computed_value": "findColorInvert($orange)"
     },
-    "yellow-invert": {
-      "id": "yellow-invert",
+    "$yellow-invert": {
       "name": "$yellow-invert",
-      "value": "findColorInvert($yellow)"
+      "value": "findColorInvert($yellow)",
+      "type": "function",
+      "computed_value": "findColorInvert($yellow)"
     },
-    "green-invert": {
-      "id": "green-invert",
+    "$green-invert": {
       "name": "$green-invert",
-      "value": "findColorInvert($green)"
+      "value": "findColorInvert($green)",
+      "type": "function",
+      "computed_value": "findColorInvert($green)"
     },
-    "turquoise-invert": {
-      "id": "turquoise-invert",
+    "$turquoise-invert": {
       "name": "$turquoise-invert",
-      "value": "findColorInvert($turquoise)"
+      "value": "findColorInvert($turquoise)",
+      "type": "function",
+      "computed_value": "findColorInvert($turquoise)"
     },
-    "cyan-invert": {
-      "id": "cyan-invert",
+    "$cyan-invert": {
       "name": "$cyan-invert",
-      "value": "findColorInvert($cyan)"
+      "value": "findColorInvert($cyan)",
+      "type": "function",
+      "computed_value": "findColorInvert($cyan)"
     },
-    "blue-invert": {
-      "id": "blue-invert",
+    "$blue-invert": {
       "name": "$blue-invert",
-      "value": "findColorInvert($blue)"
+      "value": "findColorInvert($blue)",
+      "type": "function",
+      "computed_value": "findColorInvert($blue)"
     },
-    "purple-invert": {
-      "id": "purple-invert",
+    "$purple-invert": {
       "name": "$purple-invert",
-      "value": "findColorInvert($purple)"
+      "value": "findColorInvert($purple)",
+      "type": "function",
+      "computed_value": "findColorInvert($purple)"
     },
-    "red-invert": {
-      "id": "red-invert",
+    "$red-invert": {
       "name": "$red-invert",
-      "value": "findColorInvert($red)"
+      "value": "findColorInvert($red)",
+      "type": "function",
+      "computed_value": "findColorInvert($red)"
     },
-    "primary-invert": {
-      "id": "primary-invert",
+    "$primary-invert": {
       "name": "$primary-invert",
-      "value": "$turquoise-invert"
+      "value": "$turquoise-invert",
+      "type": "variable",
+      "computed_value": "$turquoise-invert"
     },
-    "info-invert": {
-      "id": "info-invert",
+    "$info-invert": {
       "name": "$info-invert",
-      "value": "$cyan-invert"
+      "value": "$cyan-invert",
+      "type": "variable",
+      "computed_value": "$cyan-invert"
     },
-    "success-invert": {
-      "id": "success-invert",
+    "$success-invert": {
       "name": "$success-invert",
-      "value": "$green-invert"
+      "value": "$green-invert",
+      "type": "variable",
+      "computed_value": "$green-invert"
     },
-    "warning-invert": {
-      "id": "warning-invert",
+    "$warning-invert": {
       "name": "$warning-invert",
-      "value": "$yellow-invert"
+      "value": "$yellow-invert",
+      "type": "variable",
+      "computed_value": "$yellow-invert"
     },
-    "danger-invert": {
-      "id": "danger-invert",
+    "$danger-invert": {
       "name": "$danger-invert",
-      "value": "$red-invert"
+      "value": "$red-invert",
+      "type": "variable",
+      "computed_value": "$red-invert"
     },
-    "light-invert": {
-      "id": "light-invert",
+    "$light-invert": {
       "name": "$light-invert",
-      "value": "$dark"
+      "value": "$dark",
+      "type": "variable",
+      "computed_value": "$dark"
     },
-    "dark-invert": {
-      "id": "dark-invert",
+    "$dark-invert": {
       "name": "$dark-invert",
-      "value": "$light"
+      "value": "$light",
+      "type": "variable",
+      "computed_value": "$light"
     },
-    "background": {
-      "id": "background",
+    "$background": {
       "name": "$background",
-      "value": "$white-ter"
+      "value": "$white-ter",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
-    "border": {
-      "id": "border",
+    "$border": {
       "name": "$border",
-      "value": "$grey-lighter"
+      "value": "$grey-lighter",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 86%)"
     },
-    "border-hover": {
-      "id": "border-hover",
+    "$border-hover": {
       "name": "$border-hover",
-      "value": "$grey-light"
+      "value": "$grey-light",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 71%)"
     },
-    "text": {
-      "id": "text",
+    "$text": {
       "name": "$text",
-      "value": "$grey-dark"
+      "value": "$grey-dark",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "text-invert": {
-      "id": "text-invert",
+    "$text-invert": {
       "name": "$text-invert",
-      "value": "findColorInvert($text)"
+      "value": "findColorInvert($text)",
+      "type": "function",
+      "computed_value": "findColorInvert($text)"
     },
-    "text-light": {
-      "id": "text-light",
+    "$text-light": {
       "name": "$text-light",
-      "value": "$grey"
+      "value": "$grey",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 48%)"
     },
-    "text-strong": {
-      "id": "text-strong",
+    "$text-strong": {
       "name": "$text-strong",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "code": {
-      "id": "code",
+    "$code": {
       "name": "$code",
-      "value": "$red"
+      "value": "$red",
+      "type": "variable",
+      "computed_value": "hsl(348, 100%, 61%)"
     },
-    "code-background": {
-      "id": "code-background",
+    "$code-background": {
       "name": "$code-background",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_value": "$background"
     },
-    "pre": {
-      "id": "pre",
+    "$pre": {
       "name": "$pre",
-      "value": "$text"
+      "value": "$text",
+      "type": "variable",
+      "computed_value": "$text"
     },
-    "pre-background": {
-      "id": "pre-background",
+    "$pre-background": {
       "name": "$pre-background",
-      "value": "$background"
+      "value": "$background",
+      "type": "variable",
+      "computed_value": "$background"
     },
-    "link": {
-      "id": "link",
+    "$link": {
       "name": "$link",
-      "value": "$blue"
+      "value": "$blue",
+      "type": "variable",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "link-invert": {
-      "id": "link-invert",
+    "$link-invert": {
       "name": "$link-invert",
-      "value": "$blue-invert"
+      "value": "$blue-invert",
+      "type": "variable",
+      "computed_value": "$blue-invert"
     },
-    "link-visited": {
-      "id": "link-visited",
+    "$link-visited": {
       "name": "$link-visited",
-      "value": "$purple"
+      "value": "$purple",
+      "type": "variable",
+      "computed_value": "hsl(271, 100%, 71%)"
     },
-    "link-hover": {
-      "id": "link-hover",
+    "$link-hover": {
       "name": "$link-hover",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "link-hover-border": {
-      "id": "link-hover-border",
+    "$link-hover-border": {
       "name": "$link-hover-border",
-      "value": "$grey-light"
+      "value": "$grey-light",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 71%)"
     },
-    "link-focus": {
-      "id": "link-focus",
+    "$link-focus": {
       "name": "$link-focus",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "link-focus-border": {
-      "id": "link-focus-border",
+    "$link-focus-border": {
       "name": "$link-focus-border",
-      "value": "$blue"
+      "value": "$blue",
+      "type": "variable",
+      "computed_value": "hsl(217, 71%,  53%)"
     },
-    "link-active": {
-      "id": "link-active",
+    "$link-active": {
       "name": "$link-active",
-      "value": "$grey-darker"
+      "value": "$grey-darker",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
-    "link-active-border": {
-      "id": "link-active-border",
+    "$link-active-border": {
       "name": "$link-active-border",
-      "value": "$grey-dark"
+      "value": "$grey-dark",
+      "type": "variable",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
-    "family-primary": {
-      "id": "family-primary",
+    "$family-primary": {
       "name": "$family-primary",
-      "value": "$family-sans-serif"
+      "value": "$family-sans-serif",
+      "type": "variable",
+      "computed_value": "BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif"
     },
-    "family-code": {
-      "id": "family-code",
+    "$family-code": {
       "name": "$family-code",
-      "value": "$family-monospace"
+      "value": "$family-monospace",
+      "type": "variable",
+      "computed_value": "monospace"
     },
-    "size-small": {
-      "id": "size-small",
+    "$size-small": {
       "name": "$size-small",
-      "value": "$size-7"
+      "value": "$size-7",
+      "type": "variable",
+      "computed_value": "0.75rem"
     },
-    "size-normal": {
-      "id": "size-normal",
+    "$size-normal": {
       "name": "$size-normal",
-      "value": "$size-6"
+      "value": "$size-6",
+      "type": "variable",
+      "computed_value": "1rem"
     },
-    "size-medium": {
-      "id": "size-medium",
+    "$size-medium": {
       "name": "$size-medium",
-      "value": "$size-5"
+      "value": "$size-5",
+      "type": "variable",
+      "computed_value": "1.25rem"
     },
-    "size-large": {
-      "id": "size-large",
+    "$size-large": {
       "name": "$size-large",
-      "value": "$size-4"
-    },
-    "colors": {
-      "id": "colors",
+      "value": "$size-4",
+      "type": "variable",
+      "computed_value": "1.5rem"
+    },
+    "$custom-colors": {
+      "name": "$custom-colors",
+      "value": "null",
+      "type": "string",
+      "computed_value": "null"
+    },
+    "$custom-shades": {
+      "name": "$custom-shades",
+      "value": "null",
+      "type": "string",
+      "computed_value": "null"
+    },
+    "$colors": {
       "name": "$colors",
-      "value": "(\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert), \"link\": ($link, $link-invert), \"info\": ($info, $info-invert), \"success\": ($success, $success-invert), \"warning\": ($warning, $warning-invert), \"danger\": ($danger, $danger-invert))"
+      "value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert), \"link\": ($link, $link-invert), \"info\": ($info, $info-invert), \"success\": ($success, $success-invert), \"warning\": ($warning, $warning-invert), \"danger\": ($danger, $danger-invert)), $custom-colors)",
+      "type": "string",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert), \"link\": ($link, $link-invert), \"info\": ($info, $info-invert), \"success\": ($success, $success-invert), \"warning\": ($warning, $warning-invert), \"danger\": ($danger, $danger-invert)), $custom-colors)"
     },
-    "shades": {
-      "id": "shades",
+    "$shades": {
       "name": "$shades",
-      "value": "(\"black-bis\": $black-bis, \"black-ter\": $black-ter, \"grey-darker\": $grey-darker, \"grey-dark\": $grey-dark, \"grey\": $grey, \"grey-light\": $grey-light, \"grey-lighter\": $grey-lighter, \"white-ter\": $white-ter, \"white-bis\": $white-bis)"
+      "value": "mergeColorMaps((\"black-bis\": $black-bis, \"black-ter\": $black-ter, \"grey-darker\": $grey-darker, \"grey-dark\": $grey-dark, \"grey\": $grey, \"grey-light\": $grey-light, \"grey-lighter\": $grey-lighter, \"white-ter\": $white-ter, \"white-bis\": $white-bis), $custom-shades)",
+      "type": "string",
+      "computed_value": "mergeColorMaps((\"black-bis\": $black-bis, \"black-ter\": $black-ter, \"grey-darker\": $grey-darker, \"grey-dark\": $grey-dark, \"grey\": $grey, \"grey-light\": $grey-light, \"grey-lighter\": $grey-lighter, \"white-ter\": $white-ter, \"white-bis\": $white-bis), $custom-shades)"
     },
-    "sizes": {
-      "id": "sizes",
+    "$sizes": {
       "name": "$sizes",
-      "value": "$size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7"
+      "value": "$size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7",
+      "type": "variable",
+      "computed_value": "$size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7"
     }
-  }
+  },
+  "list": [
+    "$primary",
+    "$info",
+    "$success",
+    "$warning",
+    "$danger",
+    "$light",
+    "$dark",
+    "$orange-invert",
+    "$yellow-invert",
+    "$green-invert",
+    "$turquoise-invert",
+    "$cyan-invert",
+    "$blue-invert",
+    "$purple-invert",
+    "$red-invert",
+    "$primary-invert",
+    "$info-invert",
+    "$success-invert",
+    "$warning-invert",
+    "$danger-invert",
+    "$light-invert",
+    "$dark-invert",
+    "$background",
+    "$border",
+    "$border-hover",
+    "$text",
+    "$text-invert",
+    "$text-light",
+    "$text-strong",
+    "$code",
+    "$code-background",
+    "$pre",
+    "$pre-background",
+    "$link",
+    "$link-invert",
+    "$link-visited",
+    "$link-hover",
+    "$link-hover-border",
+    "$link-focus",
+    "$link-focus-border",
+    "$link-active",
+    "$link-active-border",
+    "$family-primary",
+    "$family-code",
+    "$size-small",
+    "$size-normal",
+    "$size-medium",
+    "$size-large",
+    "$custom-colors",
+    "$custom-shades",
+    "$colors",
+    "$shades",
+    "$sizes"
+  ],
+  "file_path": "utilities/derived-variables.sass"
 }

docs/_data/variables/utilities/initial-variables.json

@@ -1,250 +1,295 @@
 {
-  "dir_name": "utilities",
-  "file_name": "initial-variables",
-  "file_relative_path": "utilities/initial-variables.sass",
-  "file_line_from": 3,
-  "file_line_to": 65,
-  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/utilities/initial-variables.sass#L3,L65",
-  "vars": {
-    "black": {
-      "id": "black",
+  "by_name": {
+    "$black": {
       "name": "$black",
-      "value": "hsl(0, 0%, 4%)"
+      "value": "hsl(0, 0%, 4%)",
+      "type": "color"
     },
-    "black-bis": {
-      "id": "black-bis",
+    "$black-bis": {
       "name": "$black-bis",
-      "value": "hsl(0, 0%, 7%)"
+      "value": "hsl(0, 0%, 7%)",
+      "type": "color"
     },
-    "black-ter": {
-      "id": "black-ter",
+    "$black-ter": {
       "name": "$black-ter",
-      "value": "hsl(0, 0%, 14%)"
+      "value": "hsl(0, 0%, 14%)",
+      "type": "color"
     },
-    "grey-darker": {
-      "id": "grey-darker",
+    "$grey-darker": {
       "name": "$grey-darker",
-      "value": "hsl(0, 0%, 21%)"
+      "value": "hsl(0, 0%, 21%)",
+      "type": "color"
     },
-    "grey-dark": {
-      "id": "grey-dark",
+    "$grey-dark": {
       "name": "$grey-dark",
-      "value": "hsl(0, 0%, 29%)"
+      "value": "hsl(0, 0%, 29%)",
+      "type": "color"
     },
-    "grey": {
-      "id": "grey",
+    "$grey": {
       "name": "$grey",
-      "value": "hsl(0, 0%, 48%)"
+      "value": "hsl(0, 0%, 48%)",
+      "type": "color"
     },
-    "grey-light": {
-      "id": "grey-light",
+    "$grey-light": {
       "name": "$grey-light",
-      "value": "hsl(0, 0%, 71%)"
+      "value": "hsl(0, 0%, 71%)",
+      "type": "color"
     },
-    "grey-lighter": {
-      "id": "grey-lighter",
+    "$grey-lighter": {
       "name": "$grey-lighter",
-      "value": "hsl(0, 0%, 86%)"
+      "value": "hsl(0, 0%, 86%)",
+      "type": "color"
     },
-    "white-ter": {
-      "id": "white-ter",
+    "$white-ter": {
       "name": "$white-ter",
-      "value": "hsl(0, 0%, 96%)"
+      "value": "hsl(0, 0%, 96%)",
+      "type": "color"
     },
-    "white-bis": {
-      "id": "white-bis",
+    "$white-bis": {
       "name": "$white-bis",
-      "value": "hsl(0, 0%, 98%)"
+      "value": "hsl(0, 0%, 98%)",
+      "type": "color"
     },
-    "white": {
-      "id": "white",
+    "$white": {
       "name": "$white",
-      "value": "hsl(0, 0%, 100%)"
+      "value": "hsl(0, 0%, 100%)",
+      "type": "color"
     },
-    "orange": {
-      "id": "orange",
+    "$orange": {
       "name": "$orange",
-      "value": "hsl(14,  100%, 53%)"
+      "value": "hsl(14,  100%, 53%)",
+      "type": "color"
     },
-    "yellow": {
-      "id": "yellow",
+    "$yellow": {
       "name": "$yellow",
-      "value": "hsl(48,  100%, 67%)"
+      "value": "hsl(48,  100%, 67%)",
+      "type": "color"
     },
-    "green": {
-      "id": "green",
+    "$green": {
       "name": "$green",
-      "value": "hsl(141, 71%,  48%)"
+      "value": "hsl(141, 71%,  48%)",
+      "type": "color"
     },
-    "turquoise": {
-      "id": "turquoise",
+    "$turquoise": {
       "name": "$turquoise",
-      "value": "hsl(171, 100%, 41%)"
+      "value": "hsl(171, 100%, 41%)",
+      "type": "color"
     },
-    "cyan": {
-      "id": "cyan",
+    "$cyan": {
       "name": "$cyan",
-      "value": "hsl(204, 86%,  53%)"
+      "value": "hsl(204, 86%,  53%)",
+      "type": "color"
     },
-    "blue": {
-      "id": "blue",
+    "$blue": {
       "name": "$blue",
-      "value": "hsl(217, 71%,  53%)"
+      "value": "hsl(217, 71%,  53%)",
+      "type": "color"
     },
-    "purple": {
-      "id": "purple",
+    "$purple": {
       "name": "$purple",
-      "value": "hsl(271, 100%, 71%)"
+      "value": "hsl(271, 100%, 71%)",
+      "type": "color"
     },
-    "red": {
-      "id": "red",
+    "$red": {
       "name": "$red",
-      "value": "hsl(348, 100%, 61%)"
+      "value": "hsl(348, 100%, 61%)",
+      "type": "color"
     },
-    "family-sans-serif": {
-      "id": "family-sans-serif",
+    "$family-sans-serif": {
       "name": "$family-sans-serif",
-      "value": "BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif"
+      "value": "BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif",
+      "type": "font-family"
     },
-    "family-monospace": {
-      "id": "family-monospace",
+    "$family-monospace": {
       "name": "$family-monospace",
-      "value": "monospace"
+      "value": "monospace",
+      "type": "font-family"
     },
-    "render-mode": {
-      "id": "render-mode",
+    "$render-mode": {
       "name": "$render-mode",
-      "value": "optimizeLegibility"
+      "value": "optimizeLegibility",
+      "type": "string"
     },
-    "size-1": {
-      "id": "size-1",
+    "$size-1": {
       "name": "$size-1",
-      "value": "3rem"
+      "value": "3rem",
+      "type": "size"
     },
-    "size-2": {
-      "id": "size-2",
+    "$size-2": {
       "name": "$size-2",
-      "value": "2.5rem"
+      "value": "2.5rem",
+      "type": "size"
     },
-    "size-3": {
-      "id": "size-3",
+    "$size-3": {
       "name": "$size-3",
-      "value": "2rem"
+      "value": "2rem",
+      "type": "size"
     },
-    "size-4": {
-      "id": "size-4",
+    "$size-4": {
       "name": "$size-4",
-      "value": "1.5rem"
+      "value": "1.5rem",
+      "type": "size"
     },
-    "size-5": {
-      "id": "size-5",
+    "$size-5": {
       "name": "$size-5",
-      "value": "1.25rem"
+      "value": "1.25rem",
+      "type": "size"
     },
-    "size-6": {
-      "id": "size-6",
+    "$size-6": {
       "name": "$size-6",
-      "value": "1rem"
+      "value": "1rem",
+      "type": "size"
     },
-    "size-7": {
-      "id": "size-7",
+    "$size-7": {
       "name": "$size-7",
-      "value": "0.75rem"
+      "value": "0.75rem",
+      "type": "size"
     },
-    "weight-light": {
-      "id": "weight-light",
+    "$weight-light": {
       "name": "$weight-light",
-      "value": "300"
+      "value": "300",
+      "type": "font-weight"
     },
-    "weight-normal": {
-      "id": "weight-normal",
+    "$weight-normal": {
       "name": "$weight-normal",
-      "value": "400"
+      "value": "400",
+      "type": "font-weight"
     },
-    "weight-medium": {
-      "id": "weight-medium",
+    "$weight-medium": {
       "name": "$weight-medium",
-      "value": "500"
+      "value": "500",
+      "type": "font-weight"
     },
-    "weight-semibold": {
-      "id": "weight-semibold",
+    "$weight-semibold": {
       "name": "$weight-semibold",
-      "value": "600"
+      "value": "600",
+      "type": "font-weight"
     },
-    "weight-bold": {
-      "id": "weight-bold",
+    "$weight-bold": {
       "name": "$weight-bold",
-      "value": "700"
+      "value": "700",
+      "type": "font-weight"
     },
-    "gap": {
-      "id": "gap",
+    "$gap": {
       "name": "$gap",
-      "value": "32px"
+      "value": "64px",
+      "type": "size"
     },
-    "tablet": {
-      "id": "tablet",
+    "$tablet": {
       "name": "$tablet",
-      "value": "769px"
+      "value": "769px",
+      "type": "size"
     },
-    "desktop": {
-      "id": "desktop",
+    "$desktop": {
       "name": "$desktop",
-      "value": "960px + (2 * $gap)"
+      "value": "960px + (2 * $gap)",
+      "type": "computed"
     },
-    "widescreen": {
-      "id": "widescreen",
+    "$widescreen": {
       "name": "$widescreen",
-      "value": "1152px + (2 * $gap)"
+      "value": "1152px + (2 * $gap)",
+      "type": "computed"
     },
-    "widescreen-enabled": {
-      "id": "widescreen-enabled",
+    "$widescreen-enabled": {
       "name": "$widescreen-enabled",
-      "value": "true"
+      "value": "true",
+      "type": "boolean"
     },
-    "fullhd": {
-      "id": "fullhd",
+    "$fullhd": {
       "name": "$fullhd",
-      "value": "1344px + (2 * $gap)"
+      "value": "1344px + (2 * $gap)",
+      "type": "computed"
     },
-    "fullhd-enabled": {
-      "id": "fullhd-enabled",
+    "$fullhd-enabled": {
       "name": "$fullhd-enabled",
-      "value": "true"
+      "value": "true",
+      "type": "boolean"
     },
-    "easing": {
-      "id": "easing",
+    "$easing": {
       "name": "$easing",
-      "value": "ease-out"
+      "value": "ease-out",
+      "type": "string"
     },
-    "radius-small": {
-      "id": "radius-small",
+    "$radius-small": {
       "name": "$radius-small",
-      "value": "2px"
+      "value": "2px",
+      "type": "size"
     },
-    "radius": {
-      "id": "radius",
+    "$radius": {
       "name": "$radius",
-      "value": "3px"
+      "value": "4px",
+      "type": "size"
     },
-    "radius-large": {
-      "id": "radius-large",
+    "$radius-large": {
       "name": "$radius-large",
-      "value": "5px"
+      "value": "6px",
+      "type": "size"
     },
-    "radius-rounded": {
-      "id": "radius-rounded",
+    "$radius-rounded": {
       "name": "$radius-rounded",
-      "value": "290486px"
+      "value": "290486px",
+      "type": "size"
     },
-    "speed": {
-      "id": "speed",
+    "$speed": {
       "name": "$speed",
-      "value": "86ms"
+      "value": "86ms",
+      "type": "string"
     },
-    "variable-columns": {
-      "id": "variable-columns",
+    "$variable-columns": {
       "name": "$variable-columns",
-      "value": "true"
+      "value": "true",
+      "type": "boolean"
     }
-  }
-}
+  },
+  "list": [
+    "$black",
+    "$black-bis",
+    "$black-ter",
+    "$grey-darker",
+    "$grey-dark",
+    "$grey",
+    "$grey-light",
+    "$grey-lighter",
+    "$white-ter",
+    "$white-bis",
+    "$white",
+    "$orange",
+    "$yellow",
+    "$green",
+    "$turquoise",
+    "$cyan",
+    "$blue",
+    "$purple",
+    "$red",
+    "$family-sans-serif",
+    "$family-monospace",
+    "$render-mode",
+    "$size-1",
+    "$size-2",
+    "$size-3",
+    "$size-4",
+    "$size-5",
+    "$size-6",
+    "$size-7",
+    "$weight-light",
+    "$weight-normal",
+    "$weight-medium",
+    "$weight-semibold",
+    "$weight-bold",
+    "$gap",
+    "$tablet",
+    "$desktop",
+    "$widescreen",
+    "$widescreen-enabled",
+    "$fullhd",
+    "$fullhd-enabled",
+    "$easing",
+    "$radius-small",
+    "$radius",
+    "$radius-large",
+    "$radius-rounded",
+    "$speed",
+    "$variable-columns"
+  ],
+  "file_path": "utilities/initial-variables.sass"
+}

docs/_includes/elements/variables.html

@@ -5,20 +5,24 @@
   {% assign subtab      = include.subtab      | default: page.doc-subtab %}
   {% assign type        = include.type        | default: tab %}
   {% assign data        = include.data        | default: site.data.variables[tab][subtab] %}
-  {% assign variables   = include.variables   | default: data.vars %}
+  {% assign variables   = include.variables   | default: data.list %}
   {% assign table_class = include.table_class | default: 'is-bordered' %}
 
   {% if include.custom_message %}
     {{ include.custom_message }}
   {% else %}
     {% assign variables_link_text = "these variables" %}
+
     {% capture variables_link %}
-      {% if data.file_url %}
-        <a href="{{ data.file_url }}" target="_blank">{{ variables_link_text }}</a>
+      {% if data.file_path %}
+        <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ data.file_path }}" target="_blank">
+          {{ variables_link_text }}
+        </a>
       {% else %}
         {{ variables_link_text }}
       {% endif %}
     {% endcapture %}
+
     You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
   {% endif %}
 
@@ -35,25 +39,48 @@
     <thead>
       <tr>
         <th>Name</th>
+        <th>Type</th>
         <th>Default value</th>
+        <th>Computed value</th>
       </tr>
     </thead>
     <tfoot>
       <tr>
         <th>Name</th>
+        <th>Type</th>
         <th>Default value</th>
+        <th>Computed value</th>
       </tr>
     </tfoot>
     <tbody>
-      {% for variable_hash in variables %}
-        {% assign variable = variable_hash[1] %}
+      {% for variable_name in variables %}
+        {% assign variable = data.by_name[variable_name] %}
+
         <tr>
           <td >
             <code style="white-space: nowrap;">{{ variable.name }}</code>
           </td>
+          <td>
+            <small>
+              {% if variable.computed_type and variable.computed_type != variable.type %}
+                {{ variable.computed_type }}
+              {% else %}
+                {{ variable.type }}
+              {% endif %}
+            </small>
+          </td>
           <td>
             <code>{{ variable.value }}</code>
           </td>
+          <td>
+            {% if variable.computed_value != '' %}
+              {% if variable.computed_type == 'color' %}
+                {% include elements/color-square.html value=variable.computed_value %}
+              {% elsif variable.computed_value and variable.computed_value != variable.value %}
+                <code>{{ variable.computed_value }}</code>
+              {% endif %}
+            {% endif %}
+          </td>
         </tr>
       {% endfor %}
     </tbody>

docs/documentation/layout/footer.html

@@ -1,7 +1,6 @@
 ---
 title: Footer
 layout: documentation
-hide_categories: true
 doc-tab: layout
 doc-subtab: footer
 breadcrumb:
@@ -13,22 +12,16 @@ breadcrumb:
 
 {% capture footer_example %}
 <footer class="footer">
-  <div class="container">
-    <div class="content has-text-centered">
-      <p>
-        <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
-        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
-        is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
-      </p>
-    </div>
+  <div class="content has-text-centered">
+    <p>
+      <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
+      <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
+      is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
+    </p>
   </div>
 </footer>
 {% endcapture %}
 
-{% include layout/main-close.html show_categories=true %}
-
 {% include elements/snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
 
-{% include layout/main-open.html %}
-
 {% include elements/variables.html %}

docs/package.json

@@ -12,7 +12,6 @@
     "clean-css-cli": "^4.1.11",
     "metalsmith": "^2.3.0",
     "metalsmith-filter": "^1.0.2",
-    "metalsmith-writemetadata": "^0.4.5",
     "node-sass": "^4.8.3",
     "postcss-cli": "^5.0.0"
   },

docs/scripts/01-initial.js

@@ -6,8 +6,6 @@ const initial_plugin = require('./plugins/01-read-initial-variables');
 
 Metalsmith(__dirname)
   .source('../../sass')
-  .destination('./variables')
-  .clean(true)
   .use(filter(regex_initial))
   .use(initial_plugin())
   .build(function(err) {

docs/scripts/plugins/01-read-initial-variables.js

@@ -3,16 +3,17 @@ module.exports = plugin;
 const utils = require('./utils');
 
 function plugin() {
-  let variables = {
-    by_name: {},
-    list: [],
-  };
 
   return (files, metalsmith, done) => {
     setImmediate(done);
 
     Object.keys(files).forEach(file_path => {
       const {file_name, lines} = utils.getLines(files, file_path);
+      let variables = {
+        by_name: {},
+        list: [],
+        file_path,
+      };
 
       lines.forEach(line => {
         const variable = utils.parseLine(line);

docs/scripts/plugins/02-read-derived-variables.js

@@ -10,11 +10,12 @@ function plugin() {
     setImmediate(done);
 
     Object.keys(files).forEach(file_path => {
+      const {file_name, lines} = utils.getLines(files, file_path);
       let variables = {
         by_name: {},
         list: [],
+        file_path,
       };
-      const {file_name, lines} = utils.getLines(files, file_path);
 
       lines.forEach(line => {
         const variable = utils.parseLine(line);

docs/scripts/plugins/03-read-other-variables.js

@@ -15,17 +15,24 @@ function plugin() {
         return;
       }
 
+      const {file_name, lines} = utils.getLines(files, file_path);
       let variables = {
         by_name: {},
         list: [],
+        file_path,
       };
-      const {file_name, lines} = utils.getLines(files, file_path);
 
       lines.forEach(line => {
         const variable = utils.parseLine(line);
 
         if (variable != false) {
-          variable.computed_value = utils.getComputedValue(variable.value, variable.type, initial_variables, derived_variables);
+          const computed_data = utils.getComputedData(variable.value, variable.type, initial_variables, derived_variables);
+
+          if (Object.keys(computed_data).length > 0) {
+            variable.computed_type = computed_data.computed_type;
+            variable.computed_value = computed_data.computed_value;
+          }
+
           variables.by_name[variable.name] = variable;
           variables.list.push(variable.name);
         }

docs/scripts/plugins/utils.js

@@ -1,8 +1,14 @@
 const fs = require('fs');
 const path = require('path');
 
+const base_path = '../_data/variables/';
+
 let utils = {
   getVariableType: (value) => {
+    if (!value) {
+      return 'string';
+    }
+
     if (value.startsWith('hsl')) {
       return 'color';
     } else if (value.startsWith('$')) {
@@ -15,8 +21,12 @@ let utils = {
       return 'computed';
     } else if (value.endsWith('00')) {
       return 'font-weight';
-    } else if (value.endsWith('px') || value.endsWith('rem')) {
+    } else if (value.endsWith('px') || value.endsWith('em')) {
       return 'size';
+    } else if (value.includes('$')) {
+      return 'compound';
+    } else if (value.startsWith('findColorInvert')) {
+      return 'function';
     }
 
     return 'string';
@@ -54,7 +64,8 @@ let utils = {
 
   writeFile: (file_path, data) => {
     const json_data = JSON.stringify(data, null, '  ');
-    const json_file_path = 'variables/' + file_path.replace('.sass', '.json');
+    const json_file_path = base_path + file_path.replace('.sass', '.json');
+
     utils.ensureDirectoryExistence(json_file_path);
 
     fs.writeFile(json_file_path, json_data, err => {
@@ -83,7 +94,9 @@ let utils = {
     return value;
   },
 
-  getComputedValue: (value, type, initial_variables, derived_variables) => {
+  getComputedData: (value, type, initial_variables, derived_variables) => {
+    let computed_value = '';
+
     if (value.startsWith('$')) {
       let second_value;
 
@@ -102,13 +115,22 @@ let utils = {
           third_value = derived_variables.by_name[second_value].value;
         }
 
-        return third_value;
+        computed_value = third_value;
+      } else {
+        computed_value = second_value;
       }
+    }
 
-      return second_value;
+    if (computed_value != '') {
+      const computed_type = utils.getVariableType(computed_value);
+
+      return {
+        computed_type,
+        computed_value,
+      }
     }
 
-    return value;
+    return {};
   },
 
   ensureDirectoryExistence: (file_path) => {
@@ -124,7 +146,7 @@ let utils = {
 }
 
 utils.files = {};
-utils.files.initial_variables = `./variables/utilities/initial-variables.json`;
-utils.files.derived_variables = `./variables/utilities/derived-variables.json`;
+utils.files.initial_variables = `${base_path}utilities/initial-variables.json`;
+utils.files.derived_variables = `${base_path}utilities/derived-variables.json`;
 
 module.exports = utils;

docs/scripts/variables.js

@@ -1,27 +0,0 @@
-const Metalsmith = require('metalsmith');
-const filter = require('metalsmith-filter');
-const writemetadata = require('metalsmith-writemetadata');
-
-// const regex = '**/*-variables.sass';
-// const regex = '**/*.sass';
-const regex_initial = '**/initial-variables.sass';
-const regex_derived = '**/derived-variables.sass';
-const regex_sass = '**/*.sass';
-const initial_plugin = require('./01-read-initial-variables');
-const derived_plugin = require('./02-read-derived-variables');
-
-// Metalsmith(__dirname)
-//   .source('../../sass')
-//   .use(filter(regex_initial))
-//   .use(initial_plugin())
-//   .build(function(err) {
-//     if (err) throw err;
-//   });
-
-Metalsmith(__dirname)
-  .source('../../sass')
-  .use(filter(regex_sass))
-  .use(derived_plugin())
-  .build(function(err) {
-    if (err) throw err;
-  });

docs/yarn.lock

@@ -989,6 +989,10 @@ color-convert@^1.9.0:
   dependencies:
     color-name "^1.1.1"
 
+color-luminance@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/color-luminance/-/color-luminance-2.1.0.tgz#58ff2ebd32b52d07f5378eefe5a0e79d6b318ad7"
+
 color-name@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"