From dd59374591368ffab5c8e372e65d1694650c6b6b Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 17 Jun 2018 01:05:48 +0100 Subject: [PATCH] Add unitless type --- docs/_data/variables/base/generic.json | 8 +- docs/_data/variables/components/card.json | 6 +- docs/_data/variables/components/dropdown.json | 6 +- docs/_data/variables/components/menu.json | 6 +- docs/_data/variables/components/message.json | 4 +- docs/_data/variables/components/modal.json | 6 +- docs/_data/variables/components/navbar.json | 11 +- .../variables/components/pagination.json | 4 +- docs/_data/variables/components/panel.json | 6 +- docs/_data/variables/components/tabs.json | 4 +- docs/_data/variables/elements/box.json | 6 +- docs/_data/variables/elements/button.json | 9 +- docs/_data/variables/elements/content.json | 8 +- docs/_data/variables/elements/form.json | 6 +- docs/_data/variables/elements/table.json | 8 +- docs/_data/variables/elements/title.json | 4 +- .../utilities/derived-variables.json | 103 +++++++++++++----- .../utilities/initial-variables.json | 6 +- docs/_includes/elements/variable-row.html | 29 +++-- docs/_includes/elements/variables.html | 2 +- .../modifiers/typography-helpers.html | 6 +- docs/documentation/overview/variables.html | 71 ++++++------ .../plugins/02-read-derived-variables.js | 9 +- .../plugins/03-read-other-variables.js | 2 +- docs/scripts/plugins/utils.js | 73 ++++++++++--- 25 files changed, 248 insertions(+), 155 deletions(-) diff --git a/docs/_data/variables/base/generic.json b/docs/_data/variables/base/generic.json index 67640f415..9b93ef838 100644 --- a/docs/_data/variables/base/generic.json +++ b/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", diff --git a/docs/_data/variables/components/card.json b/docs/_data/variables/components/card.json index ff5ce4e10..5cc996312 100644 --- a/docs/_data/variables/components/card.json +++ b/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": [ diff --git a/docs/_data/variables/components/dropdown.json b/docs/_data/variables/components/dropdown.json index 029f8aa0e..fff51559b 100644 --- a/docs/_data/variables/components/dropdown.json +++ b/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", diff --git a/docs/_data/variables/components/menu.json b/docs/_data/variables/components/menu.json index 17aec6f86..3b8913f60 100644 --- a/docs/_data/variables/components/menu.json +++ b/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", diff --git a/docs/_data/variables/components/message.json b/docs/_data/variables/components/message.json index 46581900b..59bc83193 100644 --- a/docs/_data/variables/components/message.json +++ b/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", diff --git a/docs/_data/variables/components/modal.json b/docs/_data/variables/components/modal.json index 8f2606a69..dfd0b3364 100644 --- a/docs/_data/variables/components/modal.json +++ b/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", diff --git a/docs/_data/variables/components/navbar.json b/docs/_data/variables/components/navbar.json index ce582d19e..a913eed43 100644 --- a/docs/_data/variables/components/navbar.json +++ b/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": [ diff --git a/docs/_data/variables/components/pagination.json b/docs/_data/variables/components/pagination.json index 15b779cad..879304b92 100644 --- a/docs/_data/variables/components/pagination.json +++ b/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", diff --git a/docs/_data/variables/components/panel.json b/docs/_data/variables/components/panel.json index 90f08eb4e..8807e48ab 100644 --- a/docs/_data/variables/components/panel.json +++ b/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", diff --git a/docs/_data/variables/components/tabs.json b/docs/_data/variables/components/tabs.json index 6aa50bdd1..89c409924 100644 --- a/docs/_data/variables/components/tabs.json +++ b/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": [ diff --git a/docs/_data/variables/elements/box.json b/docs/_data/variables/elements/box.json index f02714bfc..72a617bac 100644 --- a/docs/_data/variables/elements/box.json +++ b/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": [ diff --git a/docs/_data/variables/elements/button.json b/docs/_data/variables/elements/button.json index 9cc1d9295..8b98da107 100644 --- a/docs/_data/variables/elements/button.json +++ b/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", diff --git a/docs/_data/variables/elements/content.json b/docs/_data/variables/elements/content.json index f35df419a..72770aada 100644 --- a/docs/_data/variables/elements/content.json +++ b/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", diff --git a/docs/_data/variables/elements/form.json b/docs/_data/variables/elements/form.json index 36c312d6a..8ea22c9ad 100644 --- a/docs/_data/variables/elements/form.json +++ b/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", diff --git a/docs/_data/variables/elements/table.json b/docs/_data/variables/elements/table.json index 837653bb9..4f0f87069 100644 --- a/docs/_data/variables/elements/table.json +++ b/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", diff --git a/docs/_data/variables/elements/title.json b/docs/_data/variables/elements/title.json index 3d6399c16..7da51e7a6 100644 --- a/docs/_data/variables/elements/title.json +++ b/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", diff --git a/docs/_data/variables/utilities/derived-variables.json b/docs/_data/variables/utilities/derived-variables.json index 36beb7e2e..9ba38478b 100644 --- a/docs/_data/variables/utilities/derived-variables.json +++ b/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": [ diff --git a/docs/_data/variables/utilities/initial-variables.json b/docs/_data/variables/utilities/initial-variables.json index 1518a61f2..24b8dcffe 100644 --- a/docs/_data/variables/utilities/initial-variables.json +++ b/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", diff --git a/docs/_includes/elements/variable-row.html b/docs/_includes/elements/variable-row.html index c03b21cda..b73a7da25 100644 --- a/docs/_includes/elements/variable-row.html +++ b/docs/_includes/elements/variable-row.html @@ -2,8 +2,9 @@ {{ include.variable.name }} + - + {% if include.variable.computed_type and include.variable.computed_type != include.variable.type %} {{ include.variable.computed_type }} {% else %} @@ -11,16 +12,24 @@ {% endif %} + - {{ include.variable.value }} - - - {% 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 %} - {{ include.variable.computed_value }} - {% endif %} + {% if include.variable.type == 'color' %} + {% include elements/color-square.html value=variable.value %} + {% else %} + {{ include.variable.value }} {% endif %} + + {% unless include.hide_computed %} + + {% 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 %} + {{ include.variable.computed_value }} + {% endif %} + {% endif %} + + {% endunless %} diff --git a/docs/_includes/elements/variables.html b/docs/_includes/elements/variables.html index c098c31d8..b3448eefd 100644 --- a/docs/_includes/elements/variables.html +++ b/docs/_includes/elements/variables.html @@ -15,7 +15,7 @@ {% capture variables_link %} {% if data.file_path %} - + {{ variables_link_text }} {% else %} diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html index e008b31f9..e08cf28e1 100644 --- a/docs/documentation/modifiers/typography-helpers.html +++ b/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 %} @@ -39,7 +39,7 @@ breadcrumb: {% capture size1 %} -

{{ initial_vars.size-1.value }}

+

{{ initial_vars['$size-1'].value }}

{% endcapture %} diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index fb0f9ff1c..621265cdc 100644 --- a/docs/documentation/overview/variables.html +++ b/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 %}

Bulma has two variable files divided into 4 sections:

+
  1. Initial variables: where you define variables by literal value, like:
      -
    • colors: {{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}
      • -
    • font sizes: {{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}
      • -
    • dimensions: {{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}
      • -
    • other values: {{ initial_vars.easing.name }}: {{ initial_vars.easing.value }} or {{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}
      • +
    • colors: {{ initial_vars['$blue'].name }}: {{ initial_vars['$blue'].value }}
      • +
    • font sizes: {{ initial_vars['$size-1'].name }}: {{ initial_vars['$size-1'].value }}
      • +
    • dimensions: {{ initial_vars['$gap'].name }}: {{ initial_vars['$gap'].value }}
      • +
    • other values: {{ initial_vars['$easing'].name }}: {{ initial_vars['$easing'].value }} or {{ initial_vars['$radius-large'].name }}: {{ initial_vars['$radius-large'].value }}
  2. @@ -33,30 +34,31 @@ breadcrumb:
  3. Primary colors derived from the initial variables:
      -
    • {{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}
      • -
    • {{ derived_vars.link.name }}: {{ derived_vars.link.value }}
      • -
    • {{ derived_vars.info.name }}: {{ derived_vars.info.value }}
      • -
    • {{ derived_vars.success.name }}: {{ derived_vars.success.value }}
      • -
    • {{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}
      • -
    • {{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}
      • -
    • {{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}
      • -
    • {{ derived_vars.text.name }}: {{ derived_vars.text.value }}
      • +
    • {{ derived_vars['$primary'].name }}: {{ derived_vars['$primary'].value }}
      • +
    • {{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}
      • +
    • {{ derived_vars['$info'].name }}: {{ derived_vars['$info'].value }}
      • +
    • {{ derived_vars['$success'].name }}: {{ derived_vars['$success'].value }}
      • +
    • {{ derived_vars['$warning'].name }}: {{ derived_vars['$warning'].value }}
      • +
    • {{ derived_vars['$danger'].name }}: {{ derived_vars['$danger'].value }}
      • +
    • {{ derived_vars['$dark'].name }}: {{ derived_vars['$dark'].value }}
      • +
    • {{ derived_vars['$text'].name }}: {{ derived_vars['$text'].value }}
    4. -
  4. {{ derived_vars.background.name }}: {{ derived_vars.background.value }}: a general background color
    5. -
  5. {{ derived_vars.link.name }}: {{ derived_vars.link.value }}: the links use the primary color
    6. -
  6. {{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}: the primary font family is the sans-serif one
    7. +
  7. {{ derived_vars['$background'].name }}: {{ derived_vars['$background'].value }}: a general background color
    8. +
  8. {{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}: the links use the primary color
    9. +
  9. {{ derived_vars['$family-primary'].name }}: {{ derived_vars['$family-primary'].value }}: the primary font family is the sans-serif one
  10. Lists and maps which are collections of already defined variables:
      -
    • {{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}
      • -
    • {{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}
      • -
    • {{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}
      • +
    • {{ derived_vars['$colors'].name }}: {{ derived_vars['$colors'].value }}
      • +
    • {{ derived_vars['$shades'].name }}: {{ derived_vars['$shades'].value }}
      • +
    • {{ derived_vars['$sizes'].name }}: {{ derived_vars['$sizes'].value }}
+

To override any of these variables, just set them before importing Bulma.

@@ -66,49 +68,40 @@ breadcrumb:

- These are variables with a literal value. + These are initial variables with a literal value.

- +
- {% for variable_hash in initial_vars %} - {% assign variable = variable_hash[1] %} - {% assign starts_with = variable.value | slice: 0, 3 %} - - - - + {% for variable_name in initial_variables.list %} + {% assign variable = initial_vars[variable_name] %} + {% include elements/variable-row.html variable=variable hide_computed =true%} {% endfor %}
- {{ variable.name }} - - {% if starts_with == 'hsl' %} - - {% endif %} - {{ variable.value }} -
{% capture custom_message %} - These are variables with a value that references another variable. + These are variables with a value that references 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 generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how. {% 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' %} diff --git a/docs/scripts/plugins/02-read-derived-variables.js b/docs/scripts/plugins/02-read-derived-variables.js index 5c4e7b532..432ed6f03 100644 --- a/docs/scripts/plugins/02-read-derived-variables.js +++ b/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); } diff --git a/docs/scripts/plugins/03-read-other-variables.js b/docs/scripts/plugins/03-read-other-variables.js index 6f4efdc83..2dde9e2c9 100644 --- a/docs/scripts/plugins/03-read-other-variables.js +++ b/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; diff --git a/docs/scripts/plugins/utils.js b/docs/scripts/plugins/utils.js index 12b12c5d2..7a4c7e9f0 100644 --- a/docs/scripts/plugins/utils.js +++ b/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, -- 2.47.3