0ct0pu5/bulma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Show stats 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": {
"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",

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

@ -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": [

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

@ -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",

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

@ -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",

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

@ -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",

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

@ -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",

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

@ -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": [

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

@ -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",

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

@ -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",

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

@ -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": [

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

@ -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": [

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

@ -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",

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

@ -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",

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

@ -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",

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

@ -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",

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

@ -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",

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

@ -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": [

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

@ -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",

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

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

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

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

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

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

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

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

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

@ -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);
}

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

@ -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;

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

@ -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,