Add unitless type

docs/_data/variables/base/generic.json

@@ -15,7 +15,7 @@
     "$body-rendering": {
       "name": "$body-rendering",
       "value": "optimizeLegibility",
-      "type": "string"
+      "type": "keyword"
     },
     "$body-family": {
       "name": "$body-family",
@@ -41,7 +41,7 @@
     "$body-line-height": {
       "name": "$body-line-height",
       "value": "1.5",
-      "type": "string"
+      "type": "unitless"
     },
     "$code-family": {
       "name": "$code-family",
@@ -58,7 +58,7 @@
     "$code-weight": {
       "name": "$code-weight",
       "value": "normal",
-      "type": "string"
+      "type": "font-weight"
     },
     "$code-size": {
       "name": "$code-size",
@@ -80,7 +80,7 @@
     "$hr-margin": {
       "name": "$hr-margin",
       "value": "1.5rem 0",
-      "type": "string"
+      "type": "size"
     },
     "$strong-color": {
       "name": "$strong-color",

docs/_data/variables/components/card.json

@@ -17,7 +17,7 @@
     "$card-shadow": {
       "name": "$card-shadow",
       "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
-      "type": "compound"
+      "type": "size"
     },
     "$card-header-background-color": {
       "name": "$card-header-background-color",
@@ -34,7 +34,7 @@
     "$card-header-shadow": {
       "name": "$card-header-shadow",
       "value": "0 1px 2px rgba($black, 0.1)",
-      "type": "compound"
+      "type": "size"
     },
     "$card-header-weight": {
       "name": "$card-header-weight",
@@ -56,7 +56,7 @@
     "$card-footer-border-top": {
       "name": "$card-footer-border-top",
       "value": "1px solid $border",
-      "type": "compound"
+      "type": "size"
     }
   },
   "list": [

docs/_data/variables/components/dropdown.json

@@ -29,7 +29,7 @@
     "$dropdown-content-shadow": {
       "name": "$dropdown-content-shadow",
       "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
-      "type": "compound"
+      "type": "size"
     },
     "$dropdown-content-z": {
       "name": "$dropdown-content-z",
@@ -61,8 +61,8 @@
       "name": "$dropdown-item-active-color",
       "value": "$link-invert",
       "type": "variable",
-      "computed_type": "compound",
-      "computed_value": "findColorInvert($blue)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$dropdown-item-active-background-color": {
       "name": "$dropdown-item-active-background-color",

docs/_data/variables/components/menu.json

@@ -32,8 +32,8 @@
       "name": "$menu-item-active-color",
       "value": "$link-invert",
       "type": "variable",
-      "computed_type": "compound",
-      "computed_value": "findColorInvert($blue)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$menu-item-active-background-color": {
       "name": "$menu-item-active-background-color",
@@ -45,7 +45,7 @@
     "$menu-list-border-left": {
       "name": "$menu-list-border-left",
       "value": "1px solid $border",
-      "type": "compound"
+      "type": "size"
     },
     "$menu-label-color": {
       "name": "$menu-label-color",

docs/_data/variables/components/message.json

@@ -25,8 +25,8 @@
       "name": "$message-header-color",
       "value": "$text-invert",
       "type": "variable",
-      "computed_type": "compound",
-      "computed_value": "findColorInvert($text)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$message-header-weight": {
       "name": "$message-header-weight",

docs/_data/variables/components/modal.json

@@ -8,7 +8,7 @@
     "$modal-background-background-color": {
       "name": "$modal-background-background-color",
       "value": "rgba($black, 0.86)",
-      "type": "compound"
+      "type": "color"
     },
     "$modal-content-width": {
       "name": "$modal-content-width",
@@ -60,7 +60,7 @@
     "$modal-card-head-border-bottom": {
       "name": "$modal-card-head-border-bottom",
       "value": "1px solid $border",
-      "type": "compound"
+      "type": "size"
     },
     "$modal-card-head-padding": {
       "name": "$modal-card-head-padding",
@@ -103,7 +103,7 @@
     "$modal-card-foot-border-top": {
       "name": "$modal-card-foot-border-top",
       "value": "1px solid $border",
-      "type": "compound"
+      "type": "size"
     },
     "$modal-card-body-background-color": {
       "name": "$modal-card-body-background-color",

docs/_data/variables/components/navbar.json

@@ -10,7 +10,7 @@
     "$navbar-box-shadow-size": {
       "name": "$navbar-box-shadow-size",
       "value": "0 2px 0 0",
-      "type": "string"
+      "type": "size"
     },
     "$navbar-box-shadow-color": {
       "name": "$navbar-box-shadow-color",
@@ -85,8 +85,7 @@
     "$navbar-burger-color": {
       "name": "$navbar-burger-color",
       "value": "$navbar-item-color",
-      "type": "variable",
-      "computed_type": "string"
+      "type": "variable"
     },
     "$navbar-tab-hover-background-color": {
       "name": "$navbar-tab-hover-background-color",
@@ -139,7 +138,7 @@
     "$navbar-dropdown-border-top": {
       "name": "$navbar-dropdown-border-top",
       "value": "2px solid $border",
-      "type": "compound"
+      "type": "size"
     },
     "$navbar-dropdown-offset": {
       "name": "$navbar-dropdown-offset",
@@ -175,7 +174,7 @@
     "$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)",
-      "type": "compound"
+      "type": "size"
     },
     "$navbar-dropdown-item-hover-color": {
       "name": "$navbar-dropdown-item-hover-color",
@@ -220,7 +219,7 @@
     "$navbar-bottom-box-shadow-size": {
       "name": "$navbar-bottom-box-shadow-size",
       "value": "0 -2px 0 0",
-      "type": "string"
+      "type": "size"
     }
   },
   "list": [

docs/_data/variables/components/pagination.json

@@ -86,8 +86,8 @@
       "name": "$pagination-current-color",
       "value": "$link-invert",
       "type": "variable",
-      "computed_type": "compound",
-      "computed_value": "findColorInvert($blue)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$pagination-current-background-color": {
       "name": "$pagination-current-background-color",

docs/_data/variables/components/panel.json

@@ -3,7 +3,7 @@
     "$panel-item-border": {
       "name": "$panel-item-border",
       "value": "1px solid $border",
-      "type": "compound"
+      "type": "size"
     },
     "$panel-heading-background-color": {
       "name": "$panel-heading-background-color",
@@ -22,7 +22,7 @@
     "$panel-heading-line-height": {
       "name": "$panel-heading-line-height",
       "value": "1.25",
-      "type": "string"
+      "type": "unitless"
     },
     "$panel-heading-padding": {
       "name": "$panel-heading-padding",
@@ -51,7 +51,7 @@
     "$panel-tab-border-bottom": {
       "name": "$panel-tab-border-bottom",
       "value": "1px solid $border",
-      "type": "compound"
+      "type": "size"
     },
     "$panel-tab-active-border-bottom-color": {
       "name": "$panel-tab-active-border-bottom-color",

docs/_data/variables/components/tabs.json

@@ -153,8 +153,8 @@
       "name": "$tabs-toggle-link-active-color",
       "value": "$link-invert",
       "type": "variable",
-      "computed_type": "compound",
-      "computed_value": "findColorInvert($blue)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     }
   },
   "list": [

docs/_data/variables/elements/box.json

@@ -24,7 +24,7 @@
     "$box-shadow": {
       "name": "$box-shadow",
       "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)",
-      "type": "compound"
+      "type": "size"
     },
     "$box-padding": {
       "name": "$box-padding",
@@ -34,12 +34,12 @@
     "$box-link-hover-shadow": {
       "name": "$box-link-hover-shadow",
       "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px $link",
-      "type": "compound"
+      "type": "size"
     },
     "$box-link-active-shadow": {
       "name": "$box-link-active-shadow",
       "value": "inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link",
-      "type": "compound"
+      "type": "size"
     }
   },
   "list": [

docs/_data/variables/elements/button.json

@@ -24,13 +24,12 @@
     "$button-border-width": {
       "name": "$button-border-width",
       "value": "$control-border-width",
-      "type": "variable",
-      "computed_type": "string"
+      "type": "variable"
     },
     "$button-padding-vertical": {
       "name": "$button-padding-vertical",
       "value": "calc(0.375em - #{$button-border-width})",
-      "type": "compound"
+      "type": "size"
     },
     "$button-padding-horizontal": {
       "name": "$button-padding-horizontal",
@@ -73,7 +72,7 @@
     "$button-focus-box-shadow-color": {
       "name": "$button-focus-box-shadow-color",
       "value": "rgba($link, 0.25)",
-      "type": "compound"
+      "type": "color"
     },
     "$button-active-color": {
       "name": "$button-active-color",
@@ -132,7 +131,7 @@
     "$button-disabled-opacity": {
       "name": "$button-disabled-opacity",
       "value": "0.5",
-      "type": "string"
+      "type": "unitless"
     },
     "$button-static-color": {
       "name": "$button-static-color",

docs/_data/variables/elements/content.json

@@ -17,7 +17,7 @@
     "$content-heading-line-height": {
       "name": "$content-heading-line-height",
       "value": "1.125",
-      "type": "string"
+      "type": "unitless"
     },
     "$content-blockquote-background-color": {
       "name": "$content-blockquote-background-color",
@@ -29,7 +29,7 @@
     "$content-blockquote-border-left": {
       "name": "$content-blockquote-border-left",
       "value": "5px solid $border",
-      "type": "compound"
+      "type": "size"
     },
     "$content-blockquote-padding": {
       "name": "$content-blockquote-padding",
@@ -44,7 +44,7 @@
     "$content-table-cell-border": {
       "name": "$content-table-cell-border",
       "value": "1px solid $border",
-      "type": "compound"
+      "type": "size"
     },
     "$content-table-cell-border-width": {
       "name": "$content-table-cell-border-width",
@@ -78,7 +78,7 @@
     "$content-table-foot-cell-border-width": {
       "name": "$content-table-foot-cell-border-width",
       "value": "2px 0 0",
-      "type": "string"
+      "type": "size"
     },
     "$content-table-foot-cell-color": {
       "name": "$content-table-foot-cell-color",

docs/_data/variables/elements/form.json

@@ -24,7 +24,7 @@
     "$input-shadow": {
       "name": "$input-shadow",
       "value": "inset 0 1px 2px rgba($black, 0.1)",
-      "type": "compound"
+      "type": "size"
     },
     "$input-hover-color": {
       "name": "$input-hover-color",
@@ -62,7 +62,7 @@
     "$input-focus-box-shadow-color": {
       "name": "$input-focus-box-shadow-color",
       "value": "rgba($link, 0.25)",
-      "type": "compound"
+      "type": "color"
     },
     "$input-disabled-color": {
       "name": "$input-disabled-color",
@@ -170,7 +170,7 @@
     "$file-name-border-width": {
       "name": "$file-name-border-width",
       "value": "1px 1px 1px 0",
-      "type": "string"
+      "type": "size"
     },
     "$file-name-max-width": {
       "name": "$file-name-max-width",

docs/_data/variables/elements/table.json

@@ -17,7 +17,7 @@
     "$table-cell-border": {
       "name": "$table-cell-border",
       "value": "1px solid $grey-lighter",
-      "type": "compound"
+      "type": "size"
     },
     "$table-cell-border-width": {
       "name": "$table-cell-border-width",
@@ -51,7 +51,7 @@
     "$table-foot-cell-border-width": {
       "name": "$table-foot-cell-border-width",
       "value": "2px 0 0",
-      "type": "string"
+      "type": "size"
     },
     "$table-foot-cell-color": {
       "name": "$table-foot-cell-color",
@@ -78,8 +78,8 @@
       "name": "$table-row-active-color",
       "value": "$primary-invert",
       "type": "variable",
-      "computed_type": "compound",
-      "computed_value": "findColorInvert($turquoise)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$table-striped-row-even-background-color": {
       "name": "$table-striped-row-even-background-color",

docs/_data/variables/elements/title.json

@@ -24,7 +24,7 @@
     "$title-line-height": {
       "name": "$title-line-height",
       "value": "1.125",
-      "type": "string"
+      "type": "unitless"
     },
     "$title-strong-color": {
       "name": "$title-strong-color",
@@ -70,7 +70,7 @@
     "$subtitle-line-height": {
       "name": "$subtitle-line-height",
       "value": "1.25",
-      "type": "string"
+      "type": "unitless"
     },
     "$subtitle-strong-color": {
       "name": "$subtitle-strong-color",

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

@@ -4,319 +4,362 @@
       "name": "$primary",
       "value": "$turquoise",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(171, 100%, 41%)"
     },
     "$info": {
       "name": "$info",
       "value": "$cyan",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(204, 86%,  53%)"
     },
     "$success": {
       "name": "$success",
       "value": "$green",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(141, 71%,  48%)"
     },
     "$warning": {
       "name": "$warning",
       "value": "$yellow",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(48,  100%, 67%)"
     },
     "$danger": {
       "name": "$danger",
       "value": "$red",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(348, 100%, 61%)"
     },
     "$light": {
       "name": "$light",
       "value": "$white-ter",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
     },
     "$dark": {
       "name": "$dark",
       "value": "$grey-darker",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$orange-invert": {
       "name": "$orange-invert",
       "value": "findColorInvert($orange)",
       "type": "function",
-      "computed_value": "findColorInvert($orange)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$yellow-invert": {
       "name": "$yellow-invert",
       "value": "findColorInvert($yellow)",
       "type": "function",
-      "computed_value": "findColorInvert($yellow)"
+      "computed_type": "color",
+      "computed_value": "rgba(0, 0, 0, 0.7)"
     },
     "$green-invert": {
       "name": "$green-invert",
       "value": "findColorInvert($green)",
       "type": "function",
-      "computed_value": "findColorInvert($green)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$turquoise-invert": {
       "name": "$turquoise-invert",
       "value": "findColorInvert($turquoise)",
       "type": "function",
-      "computed_value": "findColorInvert($turquoise)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$cyan-invert": {
       "name": "$cyan-invert",
       "value": "findColorInvert($cyan)",
       "type": "function",
-      "computed_value": "findColorInvert($cyan)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$blue-invert": {
       "name": "$blue-invert",
       "value": "findColorInvert($blue)",
       "type": "function",
-      "computed_value": "findColorInvert($blue)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$purple-invert": {
       "name": "$purple-invert",
       "value": "findColorInvert($purple)",
       "type": "function",
-      "computed_value": "findColorInvert($purple)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$red-invert": {
       "name": "$red-invert",
       "value": "findColorInvert($red)",
       "type": "function",
-      "computed_value": "findColorInvert($red)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$primary-invert": {
       "name": "$primary-invert",
       "value": "$turquoise-invert",
       "type": "variable",
-      "computed_value": "$turquoise-invert"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$info-invert": {
       "name": "$info-invert",
       "value": "$cyan-invert",
       "type": "variable",
-      "computed_value": "$cyan-invert"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$success-invert": {
       "name": "$success-invert",
       "value": "$green-invert",
       "type": "variable",
-      "computed_value": "$green-invert"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$warning-invert": {
       "name": "$warning-invert",
       "value": "$yellow-invert",
       "type": "variable",
-      "computed_value": "$yellow-invert"
+      "computed_type": "color",
+      "computed_value": "rgba(0, 0, 0, 0.7)"
     },
     "$danger-invert": {
       "name": "$danger-invert",
       "value": "$red-invert",
       "type": "variable",
-      "computed_value": "$red-invert"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$light-invert": {
       "name": "$light-invert",
       "value": "$dark",
       "type": "variable",
-      "computed_value": "$dark"
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
     },
     "$dark-invert": {
       "name": "$dark-invert",
       "value": "$light",
       "type": "variable",
-      "computed_value": "$light"
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
     "$background": {
       "name": "$background",
       "value": "$white-ter",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
     },
     "$border": {
       "name": "$border",
       "value": "$grey-lighter",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
     },
     "$border-hover": {
       "name": "$border-hover",
       "value": "$grey-light",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 71%)"
     },
     "$text": {
       "name": "$text",
       "value": "$grey-dark",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 29%)"
     },
     "$text-invert": {
       "name": "$text-invert",
       "value": "findColorInvert($text)",
       "type": "function",
-      "computed_value": "findColorInvert($text)"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$text-light": {
       "name": "$text-light",
       "value": "$grey",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 48%)"
     },
     "$text-strong": {
       "name": "$text-strong",
       "value": "$grey-darker",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$code": {
       "name": "$code",
       "value": "$red",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(348, 100%, 61%)"
     },
     "$code-background": {
       "name": "$code-background",
       "value": "$background",
       "type": "variable",
-      "computed_value": "$background"
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
     "$pre": {
       "name": "$pre",
       "value": "$text",
       "type": "variable",
-      "computed_value": "$text"
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
     },
     "$pre-background": {
       "name": "$pre-background",
       "value": "$background",
       "type": "variable",
-      "computed_value": "$background"
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
     },
     "$link": {
       "name": "$link",
       "value": "$blue",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(217, 71%,  53%)"
     },
     "$link-invert": {
       "name": "$link-invert",
       "value": "$blue-invert",
       "type": "variable",
-      "computed_value": "$blue-invert"
+      "computed_type": "color",
+      "computed_value": "#fff"
     },
     "$link-visited": {
       "name": "$link-visited",
       "value": "$purple",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(271, 100%, 71%)"
     },
     "$link-hover": {
       "name": "$link-hover",
       "value": "$grey-darker",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$link-hover-border": {
       "name": "$link-hover-border",
       "value": "$grey-light",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 71%)"
     },
     "$link-focus": {
       "name": "$link-focus",
       "value": "$grey-darker",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$link-focus-border": {
       "name": "$link-focus-border",
       "value": "$blue",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(217, 71%,  53%)"
     },
     "$link-active": {
       "name": "$link-active",
       "value": "$grey-darker",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 21%)"
     },
     "$link-active-border": {
       "name": "$link-active-border",
       "value": "$grey-dark",
       "type": "variable",
+      "computed_type": "color",
       "computed_value": "hsl(0, 0%, 29%)"
     },
     "$family-primary": {
       "name": "$family-primary",
       "value": "$family-sans-serif",
       "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"
     },
     "$family-code": {
       "name": "$family-code",
       "value": "$family-monospace",
       "type": "variable",
+      "computed_type": "font-family",
       "computed_value": "monospace"
     },
     "$size-small": {
       "name": "$size-small",
       "value": "$size-7",
       "type": "variable",
+      "computed_type": "size",
       "computed_value": "0.75rem"
     },
     "$size-normal": {
       "name": "$size-normal",
       "value": "$size-6",
       "type": "variable",
+      "computed_type": "size",
       "computed_value": "1rem"
     },
     "$size-medium": {
       "name": "$size-medium",
       "value": "$size-5",
       "type": "variable",
+      "computed_type": "size",
       "computed_value": "1.25rem"
     },
     "$size-large": {
       "name": "$size-large",
       "value": "$size-4",
       "type": "variable",
+      "computed_type": "size",
       "computed_value": "1.5rem"
     },
     "$custom-colors": {
       "name": "$custom-colors",
       "value": "null",
-      "type": "string",
-      "computed_value": "null"
+      "type": "keyword"
     },
     "$custom-shades": {
       "name": "$custom-shades",
       "value": "null",
-      "type": "string",
-      "computed_value": "null"
+      "type": "keyword"
     },
     "$colors": {
       "name": "$colors",
       "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)"
+      "type": "function"
     },
     "$shades": {
       "name": "$shades",
       "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)"
+      "type": "function"
     },
     "$sizes": {
       "name": "$sizes",
       "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"
+      "type": "map"
     }
   },
   "list": [

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

@@ -108,7 +108,7 @@
     "$render-mode": {
       "name": "$render-mode",
       "value": "optimizeLegibility",
-      "type": "string"
+      "type": "keyword"
     },
     "$size-1": {
       "name": "$size-1",
@@ -208,7 +208,7 @@
     "$easing": {
       "name": "$easing",
       "value": "ease-out",
-      "type": "string"
+      "type": "keyword"
     },
     "$radius-small": {
       "name": "$radius-small",
@@ -233,7 +233,7 @@
     "$speed": {
       "name": "$speed",
       "value": "86ms",
-      "type": "string"
+      "type": "duration"
     },
     "$variable-columns": {
       "name": "$variable-columns",

docs/_includes/elements/variable-row.html

@@ -2,8 +2,9 @@
   <td >
     <code style="white-space: nowrap;">{{ include.variable.name }}</code>
   </td>
+
   <td>
-    <small>
+    <small class="tag">
       {% if include.variable.computed_type and include.variable.computed_type != include.variable.type %}
         {{ include.variable.computed_type }}
       {% else %}
@@ -11,16 +12,24 @@
       {% endif %}
     </small>
   </td>
+
   <td>
-    <code>{{ include.variable.value }}</code>
-  </td>
-  <td>
-    {% if include.variable.computed_value != '' %}
-      {% if include.variable.computed_type == 'color' %}
-        {% include elements/color-square.html value=variable.computed_value %}
-      {% elsif include.variable.computed_value and include.variable.computed_value != include.variable.value %}
-        <code>{{ include.variable.computed_value }}</code>
-      {% endif %}
+    {% if include.variable.type == 'color' %}
+      {% include elements/color-square.html value=variable.value %}
+    {% else %}
+      <code>{{ include.variable.value }}</code>
     {% endif %}
   </td>
+
+  {% unless include.hide_computed %}
+    <td>
+      {% if include.variable.computed_value != '' %}
+        {% if include.variable.computed_type == 'color' %}
+          {% include elements/color-square.html value=variable.computed_value %}
+        {% elsif include.variable.computed_value and include.variable.computed_value != include.variable.value %}
+          <code>{{ include.variable.computed_value }}</code>
+        {% endif %}
+      {% endif %}
+    </td>
+  {% endunless %}
 </tr>

docs/_includes/elements/variables.html

@@ -15,7 +15,7 @@
 
     {% capture variables_link %}
       {% if data.file_path %}
-        <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ data.file_path }}" target="_blank">
+        <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ data.file_path }}" target="_blank" rel="nofollow">
           {{ variables_link_text }}
         </a>
       {% else %}

docs/documentation/modifiers/typography-helpers.html

@@ -11,8 +11,8 @@ breadcrumb:
 - modifiers-typography-helpers
 ---
 
-{% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
-{% assign sizes        = site.data.variables.utilities.derived-variables.vars.sizes.value | split: ' ' %}
+{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
+{% assign sizes        = site.data.variables.utilities.derived-variables.by_name.sizes.value | split: ' ' %}
 
 {% capture thead %}
 <thead>
@@ -39,7 +39,7 @@ breadcrumb:
 
 {% capture size1 %}
 <td class="is-narrow">
-  <p class="notification is-primary"><code>{{ initial_vars.size-1.value }}</code></p>
+  <p class="notification is-primary"><code>{{ initial_vars['$size-1'].value }}</code></p>
 </td>
 {% endcapture %}
 

docs/documentation/overview/variables.html

@@ -11,20 +11,21 @@ breadcrumb:
 ---
 
 {% assign initial_variables = site.data.variables.utilities.initial-variables %}
-{% assign initial_vars      = initial_variables.vars %}
+{% assign initial_vars      = initial_variables.by_name %}
 {% assign derived_variables = site.data.variables.utilities.derived-variables %}
-{% assign derived_vars      = derived_variables.vars %}
+{% assign derived_vars      = derived_variables.by_name %}
 
 <div class="content">
   <p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
+
   <ol>
     <li>
       <strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
       <ul>
-        <li><strong>colors</strong>: <code>{{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}</code></li>
-        <li><strong>font sizes</strong>: <code>{{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}</code></li>
-        <li><strong>dimensions</strong>: <code>{{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}</code></li>
-        <li><strong>other values</strong>: <code>{{ initial_vars.easing.name }}: {{ initial_vars.easing.value }}</code> or <code>{{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}</code></li>
+        <li><strong>colors</strong>: <code>{{ initial_vars['$blue'].name }}: {{ initial_vars['$blue'].value }}</code></li>
+        <li><strong>font sizes</strong>: <code>{{ initial_vars['$size-1'].name }}: {{ initial_vars['$size-1'].value }}</code></li>
+        <li><strong>dimensions</strong>: <code>{{ initial_vars['$gap'].name }}: {{ initial_vars['$gap'].value }}</code></li>
+        <li><strong>other values</strong>: <code>{{ initial_vars['$easing'].name }}: {{ initial_vars['$easing'].value }}</code> or <code>{{ initial_vars['$radius-large'].name }}: {{ initial_vars['$radius-large'].value }}</code></li>
       </ul>
     </li>
     <li>
@@ -33,30 +34,31 @@ breadcrumb:
         <li>
           <strong>Primary colors</strong> derived from the initial variables:
           <ul>
-            <li><code>{{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}</code></li>
-            <li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code></li>
-            <li><code>{{ derived_vars.info.name }}: {{ derived_vars.info.value }}</code></li>
-            <li><code>{{ derived_vars.success.name }}: {{ derived_vars.success.value }}</code></li>
-            <li><code>{{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}</code></li>
-            <li><code>{{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}</code></li>
-            <li><code>{{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}</code></li>
-            <li><code>{{ derived_vars.text.name }}: {{ derived_vars.text.value }}</code></li>
+            <li><code>{{ derived_vars['$primary'].name }}: {{ derived_vars['$primary'].value }}</code></li>
+            <li><code>{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}</code></li>
+            <li><code>{{ derived_vars['$info'].name }}: {{ derived_vars['$info'].value }}</code></li>
+            <li><code>{{ derived_vars['$success'].name }}: {{ derived_vars['$success'].value }}</code></li>
+            <li><code>{{ derived_vars['$warning'].name }}: {{ derived_vars['$warning'].value }}</code></li>
+            <li><code>{{ derived_vars['$danger'].name }}: {{ derived_vars['$danger'].value }}</code></li>
+            <li><code>{{ derived_vars['$dark'].name }}: {{ derived_vars['$dark'].value }}</code></li>
+            <li><code>{{ derived_vars['$text'].name }}: {{ derived_vars['$text'].value }}</code></li>
           </ul>
         </li>
-        <li><code>{{ derived_vars.background.name }}: {{ derived_vars.background.value }}</code>: a general background color</li>
-        <li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code>: the links use the primary color</li>
-        <li><code>{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}</code>: the primary font family is the sans-serif one</li>
+        <li><code>{{ derived_vars['$background'].name }}: {{ derived_vars['$background'].value }}</code>: a general background color</li>
+        <li><code>{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}</code>: the links use the primary color</li>
+        <li><code>{{ derived_vars['$family-primary'].name }}: {{ derived_vars['$family-primary'].value }}</code>: the primary font family is the sans-serif one</li>
         <li>
           <strong>Lists and maps</strong> which are collections of already defined variables:
           <ul>
-            <li><code>{{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}</code></li>
-            <li><code>{{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}</code></li>
-            <li><code>{{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}</code></li>
+            <li><code>{{ derived_vars['$colors'].name }}: {{ derived_vars['$colors'].value }}</code></li>
+            <li><code>{{ derived_vars['$shades'].name }}: {{ derived_vars['$shades'].value }}</code></li>
+            <li><code>{{ derived_vars['$sizes'].name }}: {{ derived_vars['$sizes'].value }}</code></li>
           </ul>
         </li>
       </ul>
     </li>
   </ol>
+
   <p>
     To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
   </p>
@@ -66,49 +68,40 @@ breadcrumb:
 
 <div class="content">
   <p>
-    These are <a href="{{ initial_variables.file_url }}" target="_blank">variables</a> with a <strong>literal</strong> value.
+    These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ initial_variables.file_path }}" target="_blank" rel="nofollow">initial variables</a> with a <strong>literal</strong> value.
   </p>
 </div>
 
-<table class="table is-bordered is-striped">
+<table class="table is-bordered">
   <tbody>
-  {% for variable_hash in initial_vars %}
-    {% assign variable    = variable_hash[1] %}
-    {% assign starts_with = variable.value | slice: 0, 3 %}
-    <tr>
-      <td>
-        <code style="white-space: nowrap;">{{ variable.name }}</code>
-      </td>
-      <td>
-        {% if starts_with == 'hsl' %}
-          <span class="bd-color" style="background: {{ variable.value }};"></span>
-        {% endif %}
-        <code>{{ variable.value }}</code>
-      </td>
-    </tr>
+  {% for variable_name in initial_variables.list %}
+    {% assign variable = initial_vars[variable_name] %}
+    {% include elements/variable-row.html variable=variable hide_computed =true%}
   {% endfor %}
   <tbody>
 </table>
 
 {% capture custom_message %}
-  These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
+  These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ derived_variables.file_path }}" target="_blank" rel="nofollow">variables</a> with a value that <strong>references</strong> another variable.
 {% endcapture %}
+
 {%
   include elements/variables.html
     anchor_name    = 'Derived variables'
     data           = derived_variables
     custom_message = custom_message
-    table_class    = 'is-bordered is-striped'
+    table_class    = 'is-bordered'
 %}
 
 {% capture custom_message %}
   You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
 {% endcapture %}
+
 {%
   include elements/variables.html
     anchor_name    = 'Generic variables'
     tab            = 'base'
     subtab         = 'generic'
     custom_message = custom_message
-    table_class    = 'is-bordered is-striped'
+    table_class    = 'is-bordered'
 %}

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

@@ -4,6 +4,7 @@ const utils = require('./utils');
 const fs = require('fs');
 
 let initial_variables = JSON.parse(fs.readFileSync(utils.files.initial_variables));
+let derived_variables = JSON.parse(fs.readFileSync(utils.files.derived_variables));
 
 function plugin() {
   return (files, metalsmith, done) => {
@@ -21,7 +22,13 @@ function plugin() {
         const variable = utils.parseLine(line);
 
         if (variable != false) {
-          variable.computed_value = utils.getInitialValue(variable.value, variable.type, initial_variables);
+          const computed_data = utils.getComputedData(variable.name, 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/03-read-other-variables.js

@@ -26,7 +26,7 @@ function plugin() {
         const variable = utils.parseLine(line);
 
         if (variable != false) {
-          const computed_data = utils.getComputedData(variable.value, variable.type, initial_variables, derived_variables);
+          const computed_data = utils.getComputedData(variable.name, variable.value, variable.type, initial_variables, derived_variables);
 
           if (Object.keys(computed_data).length > 0) {
             variable.computed_type = computed_data.computed_type;

docs/scripts/plugins/utils.js

@@ -2,31 +2,59 @@ const fs = require('fs');
 const path = require('path');
 
 const base_path = '../_data/variables/';
+const css_keywords = ['null', 'ease-out', 'optimizeLegibility'];
+const regex_unitless = /^([0-9]+\.[0-9]+)$/;
 
 let utils = {
-  getVariableType: (value) => {
+  getVariableType: (name, value) => {
     if (!value) {
       return 'string';
     }
 
-    if (value.startsWith('hsl')) {
+    if (name == '$sizes') {
+      return 'map';
+    }
+
+    if (value.startsWith('hsl') || value.startsWith('#') || value.startsWith('rgb')) {
       return 'color';
+    } else if (css_keywords.includes(value)) {
+      return 'keyword';
+    } else if (
+        value.startsWith('findColorInvert')
+        || value.startsWith('mergeColorMaps')
+      ) {
+      return 'function';
     } else if (value.startsWith('$')) {
       return 'variable';
-    } else if (value.startsWith('BlinkMacSystemFont') || value == 'monospace') {
+    } else if (
+        value.startsWith('BlinkMacSystemFont')
+        || value == 'monospace'
+      ) {
       return 'font-family';
-    } else if (value == 'true' || value == 'false') {
+    } else if (value == 'true'
+        || value == 'false'
+      ) {
       return 'boolean';
+    } else if (value.endsWith('ms')) {
+      return 'duration';
     } else if (value.includes('+')) {
       return 'computed';
-    } else if (value.endsWith('00')) {
+    } else if (
+        value.endsWith('00')
+        || value == 'normal'
+      ) {
       return 'font-weight';
-    } else if (value.endsWith('px') || value.endsWith('em')) {
+    } else if (
+        value.endsWith('px')
+        || value.endsWith('em')
+        || value.includes('px ')
+        || value.includes('em ')
+      ) {
       return 'size';
     } else if (value.includes('$')) {
       return 'compound';
-    } else if (value.startsWith('findColorInvert')) {
-      return 'function';
+    } else if (value.match(regex_unitless)) {
+      return 'unitless';
     }
 
     return 'string';
@@ -43,7 +71,7 @@ let utils = {
       return variable = {
         name: variable_name,
         value: variable_value,
-        type: utils.getVariableType(variable_value),
+        type: utils.getVariableType(variable_name, variable_value),
       };
     }
 
@@ -83,7 +111,6 @@ let utils = {
 
       if (second_value.startsWith('$') && second_value in initial_variables.by_name) {
         const third_value = initial_variables.by_name[second_value].value;
-        console.log('third_value', third_value);
 
         return third_value;
       }
@@ -94,7 +121,7 @@ let utils = {
     return value;
   },
 
-  getComputedData: (value, type, initial_variables, derived_variables) => {
+  getComputedData: (name, value, type, initial_variables, derived_variables = {}) => {
     let computed_value = '';
 
     if (value.startsWith('$')) {
@@ -102,7 +129,7 @@ let utils = {
 
       if (value in initial_variables.by_name) {
         second_value = initial_variables.by_name[value].value;
-      } else if (value in derived_variables.by_name) {
+      } else if (derived_variables.by_name && value in derived_variables.by_name) {
         second_value = derived_variables.by_name[value].value;
       }
 
@@ -111,7 +138,7 @@ let utils = {
 
         if (second_value in initial_variables.by_name) {
           third_value = initial_variables.by_name[second_value].value;
-        } else if (second_value in derived_variables.by_name) {
+        } else if (derived_variables.by_name && second_value in derived_variables.by_name) {
           third_value = derived_variables.by_name[second_value].value;
         }
 
@@ -119,10 +146,26 @@ let utils = {
       } else {
         computed_value = second_value;
       }
+    } else if (value.startsWith('findColorInvert')) {
+      // e.g. $turquoise-invert -> findColorInvert($turquoise)
+      if (value.endsWith('($yellow)')) {
+        computed_value = 'rgba(0, 0, 0, 0.7)';
+      } else {
+        computed_value = '#fff';
+      }
     }
 
-    if (computed_value != '') {
-      const computed_type = utils.getVariableType(computed_value);
+    if (computed_value && computed_value != '') {
+      // e.g. $primary-invert -> $turquoise-invert -> findColorInvert($turquoise)
+      if (computed_value.startsWith('findColorInvert')) {
+        if (computed_value.endsWith('($yellow)')) {
+          computed_value = 'rgba(0, 0, 0, 0.7)';
+        } else {
+          computed_value = '#fff';
+        }
+      }
+
+      const computed_type = utils.getVariableType(name, computed_value);
 
       return {
         computed_type,