Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add unitless type

Browse Source
This commit is contained in:
Jeremy Thomas
2018-06-17 01:05:48 +01:00
parent e8f3fc0d66
commit dd59374591
25 changed files with 248 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/_data/variables/base/generic.json
View File

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

6
docs/_data/variables/components/card.json
View File

@@ -17,7 +17,7 @@
"$card-shadow": { "$card-shadow": {
"name": "$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" "type": "size"
}, },
"$card-header-background-color": { "$card-header-background-color": {
"name": "$card-header-background-color", "name": "$card-header-background-color",
@@ -34,7 +34,7 @@
"$card-header-shadow": { "$card-header-shadow": {
"name": "$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" "type": "size"
}, },
"$card-header-weight": { "$card-header-weight": {
"name": "$card-header-weight", "name": "$card-header-weight",
@@ -56,7 +56,7 @@
"$card-footer-border-top": { "$card-footer-border-top": {
"name": "$card-footer-border-top", "name": "$card-footer-border-top",
"value": "1px solid $border", "value": "1px solid $border",
"type": "compound" "type": "size"
} }
}, },
"list": [ "list": [

6
docs/_data/variables/components/dropdown.json
View File

@@ -29,7 +29,7 @@
"$dropdown-content-shadow": { "$dropdown-content-shadow": {
"name": "$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" "type": "size"
}, },
"$dropdown-content-z": { "$dropdown-content-z": {
"name": "$dropdown-content-z", "name": "$dropdown-content-z",
@@ -61,8 +61,8 @@
"name": "$dropdown-item-active-color", "name": "$dropdown-item-active-color",
"value": "$link-invert", "value": "$link-invert",
"type": "variable", "type": "variable",
"computed_type": "compound", "computed_type": "color",
"computed_value": "findColorInvert($blue)" "computed_value": "#fff"
}, },
"$dropdown-item-active-background-color": { "$dropdown-item-active-background-color": {
"name": "$dropdown-item-active-background-color", "name": "$dropdown-item-active-background-color",

6
docs/_data/variables/components/menu.json
View File

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

4
docs/_data/variables/components/message.json
View File

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

6
docs/_data/variables/components/modal.json
View File

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

11
docs/_data/variables/components/navbar.json
View File

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

4
docs/_data/variables/components/pagination.json
View File

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

6
docs/_data/variables/components/panel.json
View File

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

4
docs/_data/variables/components/tabs.json
View File

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

6
docs/_data/variables/elements/box.json
View File

@@ -24,7 +24,7 @@
"$box-shadow": { "$box-shadow": {
"name": "$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" "type": "size"
}, },
"$box-padding": { "$box-padding": {
"name": "$box-padding", "name": "$box-padding",
@@ -34,12 +34,12 @@
"$box-link-hover-shadow": { "$box-link-hover-shadow": {
"name": "$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" "type": "size"
}, },
"$box-link-active-shadow": { "$box-link-active-shadow": {
"name": "$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" "type": "size"
} }
}, },
"list": [ "list": [

9
docs/_data/variables/elements/button.json
View File

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

8
docs/_data/variables/elements/content.json
View File

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

6
docs/_data/variables/elements/form.json
View File

@@ -24,7 +24,7 @@
"$input-shadow": { "$input-shadow": {
"name": "$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" "type": "size"
}, },
"$input-hover-color": { "$input-hover-color": {
"name": "$input-hover-color", "name": "$input-hover-color",
@@ -62,7 +62,7 @@
"$input-focus-box-shadow-color": { "$input-focus-box-shadow-color": {
"name": "$input-focus-box-shadow-color", "name": "$input-focus-box-shadow-color",
"value": "rgba($link, 0.25)", "value": "rgba($link, 0.25)",
"type": "compound" "type": "color"
}, },
"$input-disabled-color": { "$input-disabled-color": {
"name": "$input-disabled-color", "name": "$input-disabled-color",
@@ -170,7 +170,7 @@
"$file-name-border-width": { "$file-name-border-width": {
"name": "$file-name-border-width", "name": "$file-name-border-width",
"value": "1px 1px 1px 0", "value": "1px 1px 1px 0",
"type": "string" "type": "size"
}, },
"$file-name-max-width": { "$file-name-max-width": {
"name": "$file-name-max-width", "name": "$file-name-max-width",

8
docs/_data/variables/elements/table.json
View File

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

4
docs/_data/variables/elements/title.json
View File

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

103
docs/_data/variables/utilities/derived-variables.json
View File

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

6
docs/_data/variables/utilities/initial-variables.json
View File

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

29
docs/_includes/elements/variable-row.html
View File

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

2
docs/_includes/elements/variables.html
View File

@@ -15,7 +15,7 @@
{% capture variables_link %} {% capture variables_link %}
{% if data.file_path %} {% 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 }} {{ variables_link_text }}
</a> </a>
{% else %} {% else %}

6
docs/documentation/modifiers/typography-helpers.html
View File

@@ -11,8 +11,8 @@ breadcrumb:
- modifiers-typography-helpers - modifiers-typography-helpers
--- ---
{% assign initial_vars = site.data.variables.utilities.initial-variables.vars %} {% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
{% assign sizes = site.data.variables.utilities.derived-variables.vars.sizes.value | split: ' ' %} {% assign sizes = site.data.variables.utilities.derived-variables.by_name.sizes.value | split: ' ' %}
{% capture thead %} {% capture thead %}
<thead> <thead>
@@ -39,7 +39,7 @@ breadcrumb:
{% capture size1 %} {% capture size1 %}
<td class="is-narrow"> <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> </td>
{% endcapture %} {% endcapture %}

71
docs/documentation/overview/variables.html
View File

@@ -11,20 +11,21 @@ breadcrumb:
--- ---
{% assign initial_variables = site.data.variables.utilities.initial-variables %} {% 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_variables = site.data.variables.utilities.derived-variables %}
{% assign derived_vars = derived_variables.vars %} {% assign derived_vars = derived_variables.by_name %}
<div class="content"> <div class="content">
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p> <p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
<ol> <ol>
<li> <li>
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like: <strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
<ul> <ul>
<li><strong>colors</strong>: <code>{{ initial_vars.blue.name }}: {{ initial_vars.blue.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>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>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>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> </ul>
</li> </li>
<li> <li>
@@ -33,30 +34,31 @@ breadcrumb:
<li> <li>
<strong>Primary colors</strong> derived from the initial variables: <strong>Primary colors</strong> derived from the initial variables:
<ul> <ul>
<li><code>{{ derived_vars.primary.name }}: {{ derived_vars.primary.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['$link'].name }}: {{ derived_vars['$link'].value }}</code></li>
<li><code>{{ derived_vars.info.name }}: {{ derived_vars.info.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['$success'].name }}: {{ derived_vars['$success'].value }}</code></li>
<li><code>{{ derived_vars.warning.name }}: {{ derived_vars.warning.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['$danger'].name }}: {{ derived_vars['$danger'].value }}</code></li>
<li><code>{{ derived_vars.dark.name }}: {{ derived_vars.dark.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['$text'].name }}: {{ derived_vars['$text'].value }}</code></li>
</ul> </ul>
</li> </li>
<li><code>{{ derived_vars.background.name }}: {{ derived_vars.background.value }}</code>: a general background color</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['$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['$family-primary'].name }}: {{ derived_vars['$family-primary'].value }}</code>: the primary font family is the sans-serif one</li>
<li> <li>
<strong>Lists and maps</strong> which are collections of already defined variables: <strong>Lists and maps</strong> which are collections of already defined variables:
<ul> <ul>
<li><code>{{ derived_vars.colors.name }}: {{ derived_vars.colors.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['$shades'].name }}: {{ derived_vars['$shades'].value }}</code></li>
<li><code>{{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}</code></li> <li><code>{{ derived_vars['$sizes'].name }}: {{ derived_vars['$sizes'].value }}</code></li>
</ul> </ul>
</li> </li>
</ul> </ul>
</li> </li>
</ol> </ol>
<p> <p>
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma. To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
</p> </p>
@@ -66,49 +68,40 @@ breadcrumb:
<div class="content"> <div class="content">
<p> <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> </p>
</div> </div>
<table class="table is-bordered is-striped"> <table class="table is-bordered">
<tbody> <tbody>
{% for variable_hash in initial_vars %} {% for variable_name in initial_variables.list %}
{% assign variable = variable_hash[1] %} {% assign variable = initial_vars[variable_name] %}
{% assign starts_with = variable.value | slice: 0, 3 %} {% include elements/variable-row.html variable=variable hide_computed =true%}
<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>
{% endfor %} {% endfor %}
<tbody> <tbody>
</table> </table>
{% capture custom_message %} {% 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 %} {% endcapture %}
{% {%
include elements/variables.html include elements/variables.html
anchor_name = 'Derived variables' anchor_name = 'Derived variables'
data = derived_variables data = derived_variables
custom_message = custom_message custom_message = custom_message
table_class = 'is-bordered is-striped' table_class = 'is-bordered'
%} %}
{% capture custom_message %} {% 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>. 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 %} {% endcapture %}
{% {%
include elements/variables.html include elements/variables.html
anchor_name = 'Generic variables' anchor_name = 'Generic variables'
tab = 'base' tab = 'base'
subtab = 'generic' subtab = 'generic'
custom_message = custom_message custom_message = custom_message
table_class = 'is-bordered is-striped' table_class = 'is-bordered'
%} %}

9
docs/scripts/plugins/02-read-derived-variables.js
View File

@@ -4,6 +4,7 @@ const utils = require('./utils');
const fs = require('fs'); const fs = require('fs');
let initial_variables = JSON.parse(fs.readFileSync(utils.files.initial_variables)); let initial_variables = JSON.parse(fs.readFileSync(utils.files.initial_variables));
let derived_variables = JSON.parse(fs.readFileSync(utils.files.derived_variables));
function plugin() { function plugin() {
return (files, metalsmith, done) => { return (files, metalsmith, done) => {
@@ -21,7 +22,13 @@ function plugin() {
const variable = utils.parseLine(line); const variable = utils.parseLine(line);
if (variable != false) { 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.by_name[variable.name] = variable;
variables.list.push(variable.name); variables.list.push(variable.name);
} }

2
docs/scripts/plugins/03-read-other-variables.js
View File

@@ -26,7 +26,7 @@ function plugin() {
const variable = utils.parseLine(line); const variable = utils.parseLine(line);
if (variable != false) { 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) { if (Object.keys(computed_data).length > 0) {
variable.computed_type = computed_data.computed_type; variable.computed_type = computed_data.computed_type;

73
docs/scripts/plugins/utils.js
View File

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