library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update variable JSONs

Browse Source
This commit is contained in:
Jeremy Thomas 2019-10-13 16:31:23 +01:00
parent 817c676a79
commit d0c84b97c9
26 changed files with 299 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@
"by_name": { "by_name": {
"$body-background-color": { "$body-background-color": {
"name": "$body-background-color", "name": "$body-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"

2
docs/_data/variables/components/breadcrumb.json
View File

@ -33,7 +33,7 @@
}, },
"$breadcrumb-item-separator-color": { "$breadcrumb-item-separator-color": {
"name": "$breadcrumb-item-separator-color", "name": "$breadcrumb-item-separator-color",
"value": "$grey-light", "value": "$border-hover",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 71%)" "computed_value": "hsl(0, 0%, 71%)"

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

@ -9,14 +9,14 @@
}, },
"$card-background-color": { "$card-background-color": {
"name": "$card-background-color", "name": "$card-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"
}, },
"$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 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
"type": "size" "type": "size"
}, },
"$card-header-background-color": { "$card-header-background-color": {
@ -33,12 +33,12 @@
}, },
"$card-header-padding": { "$card-header-padding": {
"name": "$card-header-padding", "name": "$card-header-padding",
"value": "0.75rem", "value": "0.75rem 1rem",
"type": "size" "type": "size"
}, },
"$card-header-shadow": { "$card-header-shadow": {
"name": "$card-header-shadow", "name": "$card-header-shadow",
"value": "0 1px 2px rgba($black, 0.1)", "value": "0 0.125em 0.25em rgba($scheme-invert, 0.1)",
"type": "size" "type": "size"
}, },
"$card-header-weight": { "$card-header-weight": {
@ -65,7 +65,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-light",
"type": "size" "type": "size"
}, },
"$card-footer-padding": { "$card-footer-padding": {

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

@ -7,7 +7,7 @@
}, },
"$dropdown-content-background-color": { "$dropdown-content-background-color": {
"name": "$dropdown-content-background-color", "name": "$dropdown-content-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"
@ -43,7 +43,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 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
"type": "size" "type": "size"
}, },
"$dropdown-content-z": { "$dropdown-content-z": {
@ -53,14 +53,14 @@
}, },
"$dropdown-item-color": { "$dropdown-item-color": {
"name": "$dropdown-item-color", "name": "$dropdown-item-color",
"value": "$grey-dark", "value": "$text",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 29%)" "computed_value": "hsl(0, 0%, 29%)"
}, },
"$dropdown-item-hover-color": { "$dropdown-item-hover-color": {
"name": "$dropdown-item-hover-color", "name": "$dropdown-item-hover-color",
"value": "$black", "value": "$scheme-invert",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 4%)" "computed_value": "hsl(0, 0%, 4%)"
@ -88,10 +88,10 @@
}, },
"$dropdown-divider-background-color": { "$dropdown-divider-background-color": {
"name": "$dropdown-divider-background-color", "name": "$dropdown-divider-background-color",
"value": "$border", "value": "$border-light",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)" "computed_value": "hsl(0, 0%, 93%)"
} }
}, },
"list": [ "list": [

13
docs/_data/variables/components/media.json Normal file
View File

@ -0,0 +1,13 @@
{
"by_name": {
"$media-border-color": {
"name": "$media-border-color",
"value": "rgba($border, 0.5)",
"type": "color"
}
},
"list": [
"$media-border-color"
],
"file_path": "components/media.sass"
}

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

@ -80,7 +80,7 @@
}, },
"$message-body-pre-background-color": { "$message-body-pre-background-color": {
"name": "$message-body-pre-background-color", "name": "$message-body-pre-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"
@ -100,7 +100,7 @@
"value": "$colors", "value": "$colors",
"type": "variable", "type": "variable",
"computed_type": "function", "computed_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)" "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
} }
}, },
"list": [ "list": [

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

@ -7,7 +7,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($scheme-invert, 0.86)",
"type": "color" "type": "color"
}, },
"$modal-content-width": { "$modal-content-width": {
@ -107,7 +107,7 @@
}, },
"$modal-card-body-background-color": { "$modal-card-body-background-color": {
"name": "$modal-card-body-background-color", "name": "$modal-card-body-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"

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

@ -2,7 +2,7 @@
"by_name": { "by_name": {
"$navbar-background-color": { "$navbar-background-color": {
"name": "$navbar-background-color", "name": "$navbar-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"
@ -46,7 +46,7 @@
}, },
"$navbar-item-color": { "$navbar-item-color": {
"name": "$navbar-item-color", "name": "$navbar-item-color",
"value": "$grey-dark", "value": "$text",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 29%)" "computed_value": "hsl(0, 0%, 29%)"
@ -60,14 +60,14 @@
}, },
"$navbar-item-hover-background-color": { "$navbar-item-hover-background-color": {
"name": "$navbar-item-hover-background-color", "name": "$navbar-item-hover-background-color",
"value": "$white-bis", "value": "$scheme-main-bis",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 98%)" "computed_value": "hsl(0, 0%, 98%)"
}, },
"$navbar-item-active-color": { "$navbar-item-active-color": {
"name": "$navbar-item-active-color", "name": "$navbar-item-active-color",
"value": "$black", "value": "$scheme-invert",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 4%)" "computed_value": "hsl(0, 0%, 4%)"
@ -130,7 +130,7 @@
}, },
"$navbar-dropdown-background-color": { "$navbar-dropdown-background-color": {
"name": "$navbar-dropdown-background-color", "name": "$navbar-dropdown-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"
@ -173,12 +173,12 @@
}, },
"$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($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1)",
"type": "size" "type": "size"
}, },
"$navbar-dropdown-item-hover-color": { "$navbar-dropdown-item-hover-color": {
"name": "$navbar-dropdown-item-hover-color", "name": "$navbar-dropdown-item-hover-color",
"value": "$black", "value": "$scheme-invert",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 4%)" "computed_value": "hsl(0, 0%, 4%)"

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

@ -2,14 +2,14 @@
"by_name": { "by_name": {
"$pagination-color": { "$pagination-color": {
"name": "$pagination-color", "name": "$pagination-color",
"value": "$grey-darker", "value": "$text-strong",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "hsl(0, 0%, 21%)"
}, },
"$pagination-border-color": { "$pagination-border-color": {
"name": "$pagination-border-color", "name": "$pagination-border-color",
"value": "$grey-lighter", "value": "$border",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)" "computed_value": "hsl(0, 0%, 86%)"
@ -88,21 +88,21 @@
}, },
"$pagination-disabled-color": { "$pagination-disabled-color": {
"name": "$pagination-disabled-color", "name": "$pagination-disabled-color",
"value": "$grey", "value": "$text-light",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 48%)" "computed_value": "hsl(0, 0%, 48%)"
}, },
"$pagination-disabled-background-color": { "$pagination-disabled-background-color": {
"name": "$pagination-disabled-background-color", "name": "$pagination-disabled-background-color",
"value": "$grey-lighter", "value": "$border",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)" "computed_value": "hsl(0, 0%, 86%)"
}, },
"$pagination-disabled-border-color": { "$pagination-disabled-border-color": {
"name": "$pagination-disabled-border-color", "name": "$pagination-disabled-border-color",
"value": "$grey-lighter", "value": "$border",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)" "computed_value": "hsl(0, 0%, 86%)"

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

@ -9,7 +9,19 @@
}, },
"$panel-item-border": { "$panel-item-border": {
"name": "$panel-item-border", "name": "$panel-item-border",
"value": "1px solid $border", "value": "1px solid $border-light",
"type": "size"
},
"$panel-radius": {
"name": "$panel-radius",
"value": "$radius-large",
"type": "variable",
"computed_type": "size",
"computed_value": "6px"
},
"$panel-shadow": {
"name": "$panel-shadow",
"value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
"type": "size" "type": "size"
}, },
"$panel-heading-background-color": { "$panel-heading-background-color": {
@ -33,7 +45,7 @@
}, },
"$panel-heading-padding": { "$panel-heading-padding": {
"name": "$panel-heading-padding", "name": "$panel-heading-padding",
"value": "0.5em 0.75em", "value": "0.75em 1em",
"type": "size" "type": "size"
}, },
"$panel-heading-radius": { "$panel-heading-radius": {
@ -50,10 +62,10 @@
}, },
"$panel-heading-weight": { "$panel-heading-weight": {
"name": "$panel-heading-weight", "name": "$panel-heading-weight",
"value": "$weight-light", "value": "$weight-bold",
"type": "variable", "type": "variable",
"computed_type": "font-weight", "computed_type": "font-weight",
"computed_value": "300" "computed_value": "700"
}, },
"$panel-tabs-font-size": { "$panel-tabs-font-size": {
"name": "$panel-tabs-font-size", "name": "$panel-tabs-font-size",
@ -139,6 +151,8 @@
"list": [ "list": [
"$panel-margin", "$panel-margin",
"$panel-item-border", "$panel-item-border",
"$panel-radius",
"$panel-shadow",
"$panel-heading-background-color", "$panel-heading-background-color",
"$panel-heading-color", "$panel-heading-color",
"$panel-heading-line-height", "$panel-heading-line-height",

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

@ -80,7 +80,7 @@
}, },
"$tabs-boxed-link-active-background-color": { "$tabs-boxed-link-active-background-color": {
"name": "$tabs-boxed-link-active-background-color", "name": "$tabs-boxed-link-active-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"

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

@ -9,7 +9,7 @@
}, },
"$box-background-color": { "$box-background-color": {
"name": "$box-background-color", "name": "$box-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"
@ -23,7 +23,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 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
"type": "size" "type": "size"
}, },
"$box-padding": { "$box-padding": {
@ -33,12 +33,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 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link",
"type": "size" "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($scheme-invert, 0.2), 0 0 0 1px $link",
"type": "size" "type": "size"
} }
}, },

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

@ -2,14 +2,14 @@
"by_name": { "by_name": {
"$button-color": { "$button-color": {
"name": "$button-color", "name": "$button-color",
"value": "$grey-darker", "value": "$text-strong",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "hsl(0, 0%, 21%)"
}, },
"$button-background-color": { "$button-background-color": {
"name": "$button-background-color", "name": "$button-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"
@ -21,7 +21,7 @@
}, },
"$button-border-color": { "$button-border-color": {
"name": "$button-border-color", "name": "$button-border-color",
"value": "$grey-lighter", "value": "$border",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)" "computed_value": "hsl(0, 0%, 86%)"
@ -33,12 +33,12 @@
}, },
"$button-padding-vertical": { "$button-padding-vertical": {
"name": "$button-padding-vertical", "name": "$button-padding-vertical",
"value": "calc(0.375em - #{$button-border-width})", "value": "calc(0.5em - #{$button-border-width})",
"type": "size" "type": "size"
}, },
"$button-padding-horizontal": { "$button-padding-horizontal": {
"name": "$button-padding-horizontal", "name": "$button-padding-horizontal",
"value": "0.75em", "value": "1em",
"type": "size" "type": "size"
}, },
"$button-hover-color": { "$button-hover-color": {
@ -116,14 +116,14 @@
}, },
"$button-disabled-background-color": { "$button-disabled-background-color": {
"name": "$button-disabled-background-color", "name": "$button-disabled-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"
}, },
"$button-disabled-border-color": { "$button-disabled-border-color": {
"name": "$button-disabled-border-color", "name": "$button-disabled-border-color",
"value": "$grey-lighter", "value": "$border",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)" "computed_value": "hsl(0, 0%, 86%)"
@ -140,21 +140,21 @@
}, },
"$button-static-color": { "$button-static-color": {
"name": "$button-static-color", "name": "$button-static-color",
"value": "$grey", "value": "$text-light",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 48%)" "computed_value": "hsl(0, 0%, 48%)"
}, },
"$button-static-background-color": { "$button-static-background-color": {
"name": "$button-static-background-color", "name": "$button-static-background-color",
"value": "$white-ter", "value": "$scheme-main-ter",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 96%)" "computed_value": "hsl(0, 0%, 96%)"
}, },
"$button-static-border-color": { "$button-static-border-color": {
"name": "$button-static-border-color", "name": "$button-static-border-color",
"value": "$grey-lighter", "value": "$border",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)" "computed_value": "hsl(0, 0%, 86%)"

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

@ -7,6 +7,13 @@
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 96%)" "computed_value": "hsl(0, 0%, 96%)"
}, },
"$notification-code-background-color": {
"name": "$notification-code-background-color",
"value": "$scheme-main",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
},
"$notification-radius": { "$notification-radius": {
"name": "$notification-radius", "name": "$notification-radius",
"value": "$radius", "value": "$radius",
@ -22,6 +29,7 @@
}, },
"list": [ "list": [
"$notification-background-color", "$notification-background-color",
"$notification-code-background-color",
"$notification-radius", "$notification-radius",
"$notification-padding" "$notification-padding"
], ],

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

@ -2,10 +2,10 @@
"by_name": { "by_name": {
"$progress-bar-background-color": { "$progress-bar-background-color": {
"name": "$progress-bar-background-color", "name": "$progress-bar-background-color",
"value": "$border", "value": "$border-light",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)" "computed_value": "hsl(0, 0%, 93%)"
}, },
"$progress-value-background-color": { "$progress-value-background-color": {
"name": "$progress-value-background-color", "name": "$progress-value-background-color",

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

@ -2,21 +2,21 @@
"by_name": { "by_name": {
"$table-color": { "$table-color": {
"name": "$table-color", "name": "$table-color",
"value": "$grey-darker", "value": "$text-strong",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "hsl(0, 0%, 21%)"
}, },
"$table-background-color": { "$table-background-color": {
"name": "$table-background-color", "name": "$table-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"
}, },
"$table-cell-border": { "$table-cell-border": {
"name": "$table-cell-border", "name": "$table-cell-border",
"value": "1px solid $grey-lighter", "value": "1px solid $border",
"type": "size" "type": "size"
}, },
"$table-cell-border-width": { "$table-cell-border-width": {
@ -77,7 +77,7 @@
}, },
"$table-row-hover-background-color": { "$table-row-hover-background-color": {
"name": "$table-row-hover-background-color", "name": "$table-row-hover-background-color",
"value": "$white-bis", "value": "$scheme-main-bis",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 98%)" "computed_value": "hsl(0, 0%, 98%)"
@ -98,14 +98,14 @@
}, },
"$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",
"value": "$white-bis", "value": "$scheme-main-bis",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 98%)" "computed_value": "hsl(0, 0%, 98%)"
}, },
"$table-striped-row-even-hover-background-color": { "$table-striped-row-even-hover-background-color": {
"name": "$table-striped-row-even-hover-background-color", "name": "$table-striped-row-even-hover-background-color",
"value": "$white-ter", "value": "$scheme-main-ter",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 96%)" "computed_value": "hsl(0, 0%, 96%)"

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

@ -2,7 +2,7 @@
"by_name": { "by_name": {
"$title-color": { "$title-color": {
"name": "$title-color", "name": "$title-color",
"value": "$grey-darker", "value": "$text-strong",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "hsl(0, 0%, 21%)"
@ -53,7 +53,7 @@
}, },
"$subtitle-color": { "$subtitle-color": {
"name": "$subtitle-color", "name": "$subtitle-color",
"value": "$grey-dark", "value": "$text",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 29%)" "computed_value": "hsl(0, 0%, 29%)"
@ -84,7 +84,7 @@
}, },
"$subtitle-strong-color": { "$subtitle-strong-color": {
"name": "$subtitle-strong-color", "name": "$subtitle-strong-color",
"value": "$grey-darker", "value": "$text-strong",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "hsl(0, 0%, 21%)"

8
docs/_data/variables/form/file.json
View File

@ -16,28 +16,28 @@
}, },
"$file-cta-background-color": { "$file-cta-background-color": {
"name": "$file-cta-background-color", "name": "$file-cta-background-color",
"value": "$white-ter", "value": "$scheme-main-ter",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 96%)" "computed_value": "hsl(0, 0%, 96%)"
}, },
"$file-cta-color": { "$file-cta-color": {
"name": "$file-cta-color", "name": "$file-cta-color",
"value": "$grey-dark", "value": "$text",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 29%)" "computed_value": "hsl(0, 0%, 29%)"
}, },
"$file-cta-hover-color": { "$file-cta-hover-color": {
"name": "$file-cta-hover-color", "name": "$file-cta-hover-color",
"value": "$grey-darker", "value": "$text-strong",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "hsl(0, 0%, 21%)"
}, },
"$file-cta-active-color": { "$file-cta-active-color": {
"name": "$file-cta-active-color", "name": "$file-cta-active-color",
"value": "$grey-darker", "value": "$text-strong",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "hsl(0, 0%, 21%)"

25
docs/_data/variables/form/input-textarea.json Normal file
View File

@ -0,0 +1,25 @@
{
"by_name": {
"$textarea-padding": {
"name": "$textarea-padding",
"value": "$control-padding-horizontal",
"type": "variable"
},
"$textarea-max-height": {
"name": "$textarea-max-height",
"value": "40em",
"type": "size"
},
"$textarea-min-height": {
"name": "$textarea-min-height",
"value": "8em",
"type": "size"
}
},
"list": [
"$textarea-padding",
"$textarea-max-height",
"$textarea-min-height"
],
"file_path": "form/input-textarea.sass"
}

20
docs/_data/variables/form/shared.json
View File

@ -2,21 +2,21 @@
"by_name": { "by_name": {
"$input-color": { "$input-color": {
"name": "$input-color", "name": "$input-color",
"value": "$grey-darker", "value": "$text-strong",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "hsl(0, 0%, 21%)"
}, },
"$input-background-color": { "$input-background-color": {
"name": "$input-background-color", "name": "$input-background-color",
"value": "$white", "value": "$scheme-main",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)" "computed_value": "hsl(0, 0%, 100%)"
}, },
"$input-border-color": { "$input-border-color": {
"name": "$input-border-color", "name": "$input-border-color",
"value": "$grey-lighter", "value": "$border",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)" "computed_value": "hsl(0, 0%, 86%)"
@ -28,7 +28,7 @@
}, },
"$input-shadow": { "$input-shadow": {
"name": "$input-shadow", "name": "$input-shadow",
"value": "inset 0 1px 2px rgba($black, 0.1)", "value": "inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05)",
"type": "size" "type": "size"
}, },
"$input-placeholder-color": { "$input-placeholder-color": {
@ -38,21 +38,21 @@
}, },
"$input-hover-color": { "$input-hover-color": {
"name": "$input-hover-color", "name": "$input-hover-color",
"value": "$grey-darker", "value": "$text-strong",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "hsl(0, 0%, 21%)"
}, },
"$input-hover-border-color": { "$input-hover-border-color": {
"name": "$input-hover-border-color", "name": "$input-hover-border-color",
"value": "$grey-light", "value": "$border-hover",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 71%)" "computed_value": "hsl(0, 0%, 71%)"
}, },
"$input-focus-color": { "$input-focus-color": {
"name": "$input-focus-color", "name": "$input-focus-color",
"value": "$grey-darker", "value": "$text-strong",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "hsl(0, 0%, 21%)"
@ -109,17 +109,17 @@
}, },
"$input-icon-color": { "$input-icon-color": {
"name": "$input-icon-color", "name": "$input-icon-color",
"value": "$grey-lighter", "value": "$border",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 86%)" "computed_value": "hsl(0, 0%, 86%)"
}, },
"$input-icon-active-color": { "$input-icon-active-color": {
"name": "$input-icon-active-color", "name": "$input-icon-active-color",
"value": "$grey", "value": "$text",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 48%)" "computed_value": "hsl(0, 0%, 29%)"
}, },
"$input-radius": { "$input-radius": {
"name": "$input-radius", "name": "$input-radius",

2
docs/_data/variables/form/tools.json
View File

@ -2,7 +2,7 @@
"by_name": { "by_name": {
"$label-color": { "$label-color": {
"name": "$label-color", "name": "$label-color",
"value": "$grey-darker", "value": "$text-strong",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "hsl(0, 0%, 21%)"

2
docs/_data/variables/layout/footer.json
View File

@ -2,7 +2,7 @@
"by_name": { "by_name": {
"$footer-background-color": { "$footer-background-color": {
"name": "$footer-background-color", "name": "$footer-background-color",
"value": "$white-bis", "value": "$scheme-main-bis",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 98%)" "computed_value": "hsl(0, 0%, 98%)"

6
docs/_data/variables/utilities/controls.json
View File

@ -21,7 +21,7 @@
}, },
"$control-height": { "$control-height": {
"name": "$control-height", "name": "$control-height",
"value": "2.25em", "value": "2.5em",
"type": "size" "type": "size"
}, },
"$control-line-height": { "$control-line-height": {
@ -31,12 +31,12 @@
}, },
"$control-padding-vertical": { "$control-padding-vertical": {
"name": "$control-padding-vertical", "name": "$control-padding-vertical",
"value": "calc(0.375em - #{$control-border-width})", "value": "calc(0.5em - #{$control-border-width})",
"type": "size" "type": "size"
}, },
"$control-padding-horizontal": { "$control-padding-horizontal": {
"name": "$control-padding-horizontal", "name": "$control-padding-horizontal",
"value": "calc(0.625em - #{$control-border-width})", "value": "calc(0.75em - #{$control-border-width})",
"type": "size" "type": "size"
} }
}, },

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

@ -12,14 +12,14 @@
"value": "$cyan", "value": "$cyan",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(204, 86%, 53%)" "computed_value": "hsl(204, 71%, 53%)"
}, },
"$success": { "$success": {
"name": "$success", "name": "$success",
"value": "$green", "value": "$green",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(141, 71%, 48%)" "computed_value": "hsl(141, 53%, 53%)"
}, },
"$warning": { "$warning": {
"name": "$warning", "name": "$warning",
@ -33,7 +33,7 @@
"value": "$red", "value": "$red",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(348, 100%, 61%)" "computed_value": "hsl(348, 86%, 61%)"
}, },
"$light": { "$light": {
"name": "$light", "name": "$light",
@ -108,52 +108,144 @@
"$primary-invert": { "$primary-invert": {
"name": "$primary-invert", "name": "$primary-invert",
"value": "findColorInvert($primary)", "value": "findColorInvert($primary)",
"type": "variable", "type": "function",
"computed_type": "color", "computed_type": "color",
"computed_value": "#fff" "computed_value": "#fff"
}, },
"$primary-light": {
"name": "$primary-light",
"value": "findLightColor($primary)",
"type": "compound"
},
"$primary-dark": {
"name": "$primary-dark",
"value": "findDarkColor($primary)",
"type": "compound"
},
"$info-invert": { "$info-invert": {
"name": "$info-invert", "name": "$info-invert",
"value": "findColorInvert($info)", "value": "findColorInvert($info)",
"type": "variable", "type": "function",
"computed_type": "color", "computed_type": "color",
"computed_value": "#fff" "computed_value": "#fff"
}, },
"$info-light": {
"name": "$info-light",
"value": "findLightColor($info)",
"type": "compound"
},
"$info-dark": {
"name": "$info-dark",
"value": "findDarkColor($info)",
"type": "compound"
},
"$success-invert": { "$success-invert": {
"name": "$success-invert", "name": "$success-invert",
"value": "findColorInvert($success)", "value": "findColorInvert($success)",
"type": "variable", "type": "function",
"computed_type": "color", "computed_type": "color",
"computed_value": "#fff" "computed_value": "#fff"
}, },
"$success-light": {
"name": "$success-light",
"value": "findLightColor($success)",
"type": "compound"
},
"$success-dark": {
"name": "$success-dark",
"value": "findDarkColor($success)",
"type": "compound"
},
"$warning-invert": { "$warning-invert": {
"name": "$warning-invert", "name": "$warning-invert",
"value": "findColorInvert($warning)", "value": "findColorInvert($warning)",
"type": "variable", "type": "function",
"computed_type": "color", "computed_type": "color",
"computed_value": "rgba(0, 0, 0, 0.7)" "computed_value": "#fff"
},
"$warning-light": {
"name": "$warning-light",
"value": "findLightColor($warning)",
"type": "compound"
},
"$warning-dark": {
"name": "$warning-dark",
"value": "findDarkColor($warning)",
"type": "compound"
}, },
"$danger-invert": { "$danger-invert": {
"name": "$danger-invert", "name": "$danger-invert",
"value": "findColorInvert($danger)", "value": "findColorInvert($danger)",
"type": "variable", "type": "function",
"computed_type": "color", "computed_type": "color",
"computed_value": "#fff" "computed_value": "#fff"
}, },
"$danger-light": {
"name": "$danger-light",
"value": "findLightColor($danger)",
"type": "compound"
},
"$danger-dark": {
"name": "$danger-dark",
"value": "findDarkColor($danger)",
"type": "compound"
},
"$light-invert": { "$light-invert": {
"name": "$light-invert", "name": "$light-invert",
"value": "findColorInvert($light)", "value": "findColorInvert($light)",
"type": "variable", "type": "function",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 21%)" "computed_value": "#fff"
}, },
"$dark-invert": { "$dark-invert": {
"name": "$dark-invert", "name": "$dark-invert",
"value": "findColorInvert($dark)", "value": "findColorInvert($dark)",
"type": "function",
"computed_type": "color",
"computed_value": "#fff"
},
"$scheme-main": {
"name": "$scheme-main",
"value": "$white",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 100%)"
},
"$scheme-main-bis": {
"name": "$scheme-main-bis",
"value": "$white-bis",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 98%)"
},
"$scheme-main-ter": {
"name": "$scheme-main-ter",
"value": "$white-ter",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 96%)" "computed_value": "hsl(0, 0%, 96%)"
}, },
"$scheme-invert": {
"name": "$scheme-invert",
"value": "$black",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 4%)"
},
"$scheme-invert-bis": {
"name": "$scheme-invert-bis",
"value": "$black-bis",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 7%)"
},
"$scheme-invert-ter": {
"name": "$scheme-invert-ter",
"value": "$black-ter",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 14%)"
},
"$background": { "$background": {
"name": "$background", "name": "$background",
"value": "$white-ter", "value": "$white-ter",
@ -175,6 +267,20 @@
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(0, 0%, 71%)" "computed_value": "hsl(0, 0%, 71%)"
}, },
"$border-light": {
"name": "$border-light",
"value": "$grey-lightest",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 93%)"
},
"$border-light-hover": {
"name": "$border-light-hover",
"value": "$grey-light",
"type": "variable",
"computed_type": "color",
"computed_value": "hsl(0, 0%, 71%)"
},
"$text": { "$text": {
"name": "$text", "name": "$text",
"value": "$grey-dark", "value": "$grey-dark",
@ -208,7 +314,7 @@
"value": "$red", "value": "$red",
"type": "variable", "type": "variable",
"computed_type": "color", "computed_type": "color",
"computed_value": "hsl(348, 100%, 61%)" "computed_value": "hsl(348, 86%, 61%)"
}, },
"$code-background": { "$code-background": {
"name": "$code-background", "name": "$code-background",
@ -241,10 +347,20 @@
"$link-invert": { "$link-invert": {
"name": "$link-invert", "name": "$link-invert",
"value": "findColorInvert($link)", "value": "findColorInvert($link)",
"type": "variable", "type": "function",
"computed_type": "color", "computed_type": "color",
"computed_value": "#fff" "computed_value": "#fff"
}, },
"$link-light": {
"name": "$link-light",
"value": "findLightColor($link)",
"type": "compound"
},
"$link-dark": {
"name": "$link-dark",
"value": "findDarkColor($link)",
"type": "compound"
},
"$link-visited": { "$link-visited": {
"name": "$link-visited", "name": "$link-visited",
"value": "$purple", "value": "$purple",
@ -355,7 +471,7 @@
}, },
"$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, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)",
"type": "function" "type": "function"
}, },
"$shades": { "$shades": {
@ -386,15 +502,33 @@
"$purple-invert", "$purple-invert",
"$red-invert", "$red-invert",
"$primary-invert", "$primary-invert",
"$primary-light",
"$primary-dark",
"$info-invert", "$info-invert",
"$info-light",
"$info-dark",
"$success-invert", "$success-invert",
"$success-light",
"$success-dark",
"$warning-invert", "$warning-invert",
"$warning-light",
"$warning-dark",
"$danger-invert", "$danger-invert",
"$danger-light",
"$danger-dark",
"$light-invert", "$light-invert",
"$dark-invert", "$dark-invert",
"$scheme-main",
"$scheme-main-bis",
"$scheme-main-ter",
"$scheme-invert",
"$scheme-invert-bis",
"$scheme-invert-ter",
"$background", "$background",
"$border", "$border",
"$border-hover", "$border-hover",
"$border-light",
"$border-light-hover",
"$text", "$text",
"$text-invert", "$text-invert",
"$text-light", "$text-light",
@ -405,6 +539,8 @@
"$pre-background", "$pre-background",
"$link", "$link",
"$link-invert", "$link-invert",
"$link-light",
"$link-dark",
"$link-visited", "$link-visited",
"$link-hover", "$link-hover",
"$link-hover-border", "$link-hover-border",

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

@ -40,6 +40,11 @@
"value": "hsl(0, 0%, 86%)", "value": "hsl(0, 0%, 86%)",
"type": "color" "type": "color"
}, },
"$grey-lightest": {
"name": "$grey-lightest",
"value": "hsl(0, 0%, 93%)",
"type": "color"
},
"$white-ter": { "$white-ter": {
"name": "$white-ter", "name": "$white-ter",
"value": "hsl(0, 0%, 96%)", "value": "hsl(0, 0%, 96%)",
@ -67,7 +72,7 @@
}, },
"$green": { "$green": {
"name": "$green", "name": "$green",
"value": "hsl(141, 71%, 48%)", "value": "hsl(141, 53%, 53%)",
"type": "color" "type": "color"
}, },
"$turquoise": { "$turquoise": {
@ -77,7 +82,7 @@
}, },
"$cyan": { "$cyan": {
"name": "$cyan", "name": "$cyan",
"value": "hsl(204, 86%, 53%)", "value": "hsl(204, 71%, 53%)",
"type": "color" "type": "color"
}, },
"$blue": { "$blue": {
@ -92,7 +97,7 @@
}, },
"$red": { "$red": {
"name": "$red", "name": "$red",
"value": "hsl(348, 100%, 61%)", "value": "hsl(348, 86%, 61%)",
"type": "color" "type": "color"
}, },
"$family-sans-serif": { "$family-sans-serif": {
@ -255,6 +260,7 @@
"$grey", "$grey",
"$grey-light", "$grey-light",
"$grey-lighter", "$grey-lighter",
"$grey-lightest",
"$white-ter", "$white-ter",
"$white-bis", "$white-bis",
"$white", "$white",

4
sass/utilities/functions.sass
View File

@ -29,12 +29,12 @@
$color-invert: nth($components, 2) $color-invert: nth($components, 2)
$color-light: nth($components, 3) $color-light: nth($components, 3)
$color-dark: nth($components, 4) $color-dark: nth($components, 4)
// If only Invert and Light are provided // If only Invert and Light are provided
@else if length($components) > 2 @else if length($components) > 2
$color-invert: nth($components, 2) $color-invert: nth($components, 2)
$color-light: nth($components, 3) $color-light: nth($components, 3)
$color-dark: findDarkColor($color-base) $color-dark: findDarkColor($color-base)
// If only Invert is provided // If only Invert is provided
@else @else
$color-invert: nth($components, 2) $color-invert: nth($components, 2)
$color-light: findLightColor($color-base) $color-light: findLightColor($color-base)