Bulma has two variable files divided into 4 sections:
+
-
Initial variables: where you define variables by literal value, like:
- - colors:
{{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}
- - font sizes:
{{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}
- - dimensions:
{{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}
- - other values:
{{ initial_vars.easing.name }}: {{ initial_vars.easing.value }} or {{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}
+ - colors:
{{ initial_vars['$blue'].name }}: {{ initial_vars['$blue'].value }}
+ - font sizes:
{{ initial_vars['$size-1'].name }}: {{ initial_vars['$size-1'].value }}
+ - dimensions:
{{ initial_vars['$gap'].name }}: {{ initial_vars['$gap'].value }}
+ - other values:
{{ initial_vars['$easing'].name }}: {{ initial_vars['$easing'].value }} or {{ initial_vars['$radius-large'].name }}: {{ initial_vars['$radius-large'].value }}
-
@@ -33,30 +34,31 @@ breadcrumb:
-
Primary colors derived from the initial variables:
- {{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}{{ derived_vars.link.name }}: {{ derived_vars.link.value }}{{ derived_vars.info.name }}: {{ derived_vars.info.value }}{{ derived_vars.success.name }}: {{ derived_vars.success.value }}{{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}{{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}{{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}{{ derived_vars.text.name }}: {{ derived_vars.text.value }}{{ derived_vars['$primary'].name }}: {{ derived_vars['$primary'].value }}{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}{{ derived_vars['$info'].name }}: {{ derived_vars['$info'].value }}{{ derived_vars['$success'].name }}: {{ derived_vars['$success'].value }}{{ derived_vars['$warning'].name }}: {{ derived_vars['$warning'].value }}{{ derived_vars['$danger'].name }}: {{ derived_vars['$danger'].value }}{{ derived_vars['$dark'].name }}: {{ derived_vars['$dark'].value }}{{ derived_vars['$text'].name }}: {{ derived_vars['$text'].value }}
- {{ derived_vars.background.name }}: {{ derived_vars.background.value }}: a general background color{{ derived_vars.link.name }}: {{ derived_vars.link.value }}: the links use the primary color{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}: the primary font family is the sans-serif one{{ derived_vars['$background'].name }}: {{ derived_vars['$background'].value }}: a general background color{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}: the links use the primary color{{ derived_vars['$family-primary'].name }}: {{ derived_vars['$family-primary'].value }}: the primary font family is the sans-serif one-
Lists and maps which are collections of already defined variables:
- {{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}{{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}{{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}{{ derived_vars['$colors'].name }}: {{ derived_vars['$colors'].value }}{{ derived_vars['$shades'].name }}: {{ derived_vars['$shades'].value }}{{ derived_vars['$sizes'].name }}: {{ derived_vars['$sizes'].value }}
+
To override any of these variables, just set them before importing Bulma.
@@ -66,49 +68,40 @@ breadcrumb:
- These are variables with a literal value.
+ These are initial variables with a literal value.
-
+
- {% for variable_hash in initial_vars %}
- {% assign variable = variable_hash[1] %}
- {% assign starts_with = variable.value | slice: 0, 3 %}
-
-
- {{ variable.name }}
- |
-
- {% if starts_with == 'hsl' %}
-
- {% endif %}
- {{ variable.value }}
- |
-
+ {% for variable_name in initial_variables.list %}
+ {% assign variable = initial_vars[variable_name] %}
+ {% include elements/variable-row.html variable=variable hide_computed =true%}
{% endfor %}
{% capture custom_message %}
- These are variables with a value that references another variable.
+ These are variables with a value that references another variable.
{% endcapture %}
+
{%
include elements/variables.html
anchor_name = 'Derived variables'
data = derived_variables
custom_message = custom_message
- table_class = 'is-bordered is-striped'
+ table_class = 'is-bordered'
%}
{% capture custom_message %}
You can use the following generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how.
{% endcapture %}
+
{%
include elements/variables.html
anchor_name = 'Generic variables'
tab = 'base'
subtab = 'generic'
custom_message = custom_message
- table_class = 'is-bordered is-striped'
+ table_class = 'is-bordered'
%}
diff --git a/docs/scripts/plugins/02-read-derived-variables.js b/docs/scripts/plugins/02-read-derived-variables.js
index 5c4e7b53..432ed6f0 100644
--- a/docs/scripts/plugins/02-read-derived-variables.js
+++ b/docs/scripts/plugins/02-read-derived-variables.js
@@ -4,6 +4,7 @@ const utils = require('./utils');
const fs = require('fs');
let initial_variables = JSON.parse(fs.readFileSync(utils.files.initial_variables));
+let derived_variables = JSON.parse(fs.readFileSync(utils.files.derived_variables));
function plugin() {
return (files, metalsmith, done) => {
@@ -21,7 +22,13 @@ function plugin() {
const variable = utils.parseLine(line);
if (variable != false) {
- variable.computed_value = utils.getInitialValue(variable.value, variable.type, initial_variables);
+ const computed_data = utils.getComputedData(variable.name, variable.value, variable.type, initial_variables, derived_variables);
+
+ if (Object.keys(computed_data).length > 0) {
+ variable.computed_type = computed_data.computed_type;
+ variable.computed_value = computed_data.computed_value;
+ }
+
variables.by_name[variable.name] = variable;
variables.list.push(variable.name);
}
diff --git a/docs/scripts/plugins/03-read-other-variables.js b/docs/scripts/plugins/03-read-other-variables.js
index 6f4efdc8..2dde9e2c 100644
--- a/docs/scripts/plugins/03-read-other-variables.js
+++ b/docs/scripts/plugins/03-read-other-variables.js
@@ -26,7 +26,7 @@ function plugin() {
const variable = utils.parseLine(line);
if (variable != false) {
- const computed_data = utils.getComputedData(variable.value, variable.type, initial_variables, derived_variables);
+ const computed_data = utils.getComputedData(variable.name, variable.value, variable.type, initial_variables, derived_variables);
if (Object.keys(computed_data).length > 0) {
variable.computed_type = computed_data.computed_type;
diff --git a/docs/scripts/plugins/utils.js b/docs/scripts/plugins/utils.js
index 12b12c5d..7a4c7e9f 100644
--- a/docs/scripts/plugins/utils.js
+++ b/docs/scripts/plugins/utils.js
@@ -2,31 +2,59 @@ const fs = require('fs');
const path = require('path');
const base_path = '../_data/variables/';
+const css_keywords = ['null', 'ease-out', 'optimizeLegibility'];
+const regex_unitless = /^([0-9]+\.[0-9]+)$/;
let utils = {
- getVariableType: (value) => {
+ getVariableType: (name, value) => {
if (!value) {
return 'string';
}
- if (value.startsWith('hsl')) {
+ if (name == '$sizes') {
+ return 'map';
+ }
+
+ if (value.startsWith('hsl') || value.startsWith('#') || value.startsWith('rgb')) {
return 'color';
+ } else if (css_keywords.includes(value)) {
+ return 'keyword';
+ } else if (
+ value.startsWith('findColorInvert')
+ || value.startsWith('mergeColorMaps')
+ ) {
+ return 'function';
} else if (value.startsWith('$')) {
return 'variable';
- } else if (value.startsWith('BlinkMacSystemFont') || value == 'monospace') {
+ } else if (
+ value.startsWith('BlinkMacSystemFont')
+ || value == 'monospace'
+ ) {
return 'font-family';
- } else if (value == 'true' || value == 'false') {
+ } else if (value == 'true'
+ || value == 'false'
+ ) {
return 'boolean';
+ } else if (value.endsWith('ms')) {
+ return 'duration';
} else if (value.includes('+')) {
return 'computed';
- } else if (value.endsWith('00')) {
+ } else if (
+ value.endsWith('00')
+ || value == 'normal'
+ ) {
return 'font-weight';
- } else if (value.endsWith('px') || value.endsWith('em')) {
+ } else if (
+ value.endsWith('px')
+ || value.endsWith('em')
+ || value.includes('px ')
+ || value.includes('em ')
+ ) {
return 'size';
} else if (value.includes('$')) {
return 'compound';
- } else if (value.startsWith('findColorInvert')) {
- return 'function';
+ } else if (value.match(regex_unitless)) {
+ return 'unitless';
}
return 'string';
@@ -43,7 +71,7 @@ let utils = {
return variable = {
name: variable_name,
value: variable_value,
- type: utils.getVariableType(variable_value),
+ type: utils.getVariableType(variable_name, variable_value),
};
}
@@ -83,7 +111,6 @@ let utils = {
if (second_value.startsWith('$') && second_value in initial_variables.by_name) {
const third_value = initial_variables.by_name[second_value].value;
- console.log('third_value', third_value);
return third_value;
}
@@ -94,7 +121,7 @@ let utils = {
return value;
},
- getComputedData: (value, type, initial_variables, derived_variables) => {
+ getComputedData: (name, value, type, initial_variables, derived_variables = {}) => {
let computed_value = '';
if (value.startsWith('$')) {
@@ -102,7 +129,7 @@ let utils = {
if (value in initial_variables.by_name) {
second_value = initial_variables.by_name[value].value;
- } else if (value in derived_variables.by_name) {
+ } else if (derived_variables.by_name && value in derived_variables.by_name) {
second_value = derived_variables.by_name[value].value;
}
@@ -111,7 +138,7 @@ let utils = {
if (second_value in initial_variables.by_name) {
third_value = initial_variables.by_name[second_value].value;
- } else if (second_value in derived_variables.by_name) {
+ } else if (derived_variables.by_name && second_value in derived_variables.by_name) {
third_value = derived_variables.by_name[second_value].value;
}
@@ -119,10 +146,26 @@ let utils = {
} else {
computed_value = second_value;
}
+ } else if (value.startsWith('findColorInvert')) {
+ // e.g. $turquoise-invert -> findColorInvert($turquoise)
+ if (value.endsWith('($yellow)')) {
+ computed_value = 'rgba(0, 0, 0, 0.7)';
+ } else {
+ computed_value = '#fff';
+ }
}
- if (computed_value != '') {
- const computed_type = utils.getVariableType(computed_value);
+ if (computed_value && computed_value != '') {
+ // e.g. $primary-invert -> $turquoise-invert -> findColorInvert($turquoise)
+ if (computed_value.startsWith('findColorInvert')) {
+ if (computed_value.endsWith('($yellow)')) {
+ computed_value = 'rgba(0, 0, 0, 0.7)';
+ } else {
+ computed_value = '#fff';
+ }
+ }
+
+ const computed_type = utils.getVariableType(name, computed_value);
return {
computed_type,