You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is an extension and a kind of "sass-pre-post-processor" that tries to be as least intrusive as possible to Bulma, while making arbitrary color changes in the bulma color schemes automated, as easy as possible.
11
10
12
11
There is quite some setup and configuration to be done, but once it is setup, it works like a charm. Read the section [What is the difficulty](#what-is-the-difficulty-why-this-setup), to learn why this setup is required.
13
12
14
13
## Usage
14
+
15
15
```bash
16
16
npm i -S bulma bulma-css-vars
17
17
npm i -D sass
@@ -22,7 +22,7 @@ To use this package, you have to use the dart implementation of sass, the `sass`
22
22
23
23
```js
24
24
// bulma-css-vars.config.js
25
-
const { hsl, rgb } =require('bulma-css-vars')
25
+
import { hsl, rgb } from'bulma-css-vars'
26
26
27
27
// color names have to match bulma's $variable-name, without '$'
28
28
// values will be used for initial colors and fallback
You need to configure `bulma-css-vars` to tell it about your sass setup, especially your sass entry file, the variables you want to modify and where the generated bulma files should be placed.
|`sassEntryFile`| Sass Entry File of you Application - relative path form config file |
55
+
|`jsOutputFile`| full name of generated js file, can also be `<a-typescript-file>.ts`|
56
+
|`sassOutputFile`| full name of generated sass file, should be included in your app styles |
57
+
|`cssFallbackOutputFile`| full name of generated css file, should be included in your sass app styles (optional) |
58
+
|`colorDefs`| color definitions, names have to match bulma color names (see examples above) |
59
+
|`globalWebVar`| if you import js files directly in the browser, you need `true`, see [Direct Web Setup](#direct-web-setup), defaults to `false`|
59
60
|`transition`| will create the [CSS transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) shorthand for all colored CSS variables, should consist of `[ <duration> [ <timing-function> [ <time-delay> ] ] ]`|
60
61
61
62
Some more files have to be setup, which can be achieved using `node ./node_modules/.bin/bulma-css-vars --init`.
@@ -66,6 +67,7 @@ Some more files have to be setup, which can be achieved using `node ./node_modul
Instead of using `bulma-cv-lib.sass`, you can also just use the bulma packages you like. Look inside the `bulma-cv-lib.sass` to understand more, and especially import `functions.sass` right after the original `functions.sass` is loaded.
70
72
71
73
```json
@@ -74,46 +76,50 @@ Instead of using `bulma-cv-lib.sass`, you can also just use the bulma packages y
74
76
"update-bulma-colors": "bulma-css-vars",
75
77
}
76
78
```
79
+
77
80
The script `./node_modules/.bin/bulma-css-vars` has to be run whenever you modify the colors in `bulma-css-vars.config.js` and it will update the three output files as well.
Annoyingly, the color updater needs knowledge of the current variables, so `bulmaCssVariablesDefs` from the generated js file has to be included in your app. `colorName` has to match the name in the `bulma-css-vars.config.js`.
107
110
108
111
### Caveats
112
+
109
113
* Requires Node.js and Dart Sass
110
114
* The complexity of the setup
111
115
112
116
## What is the difficulty? Why this setup?
117
+
113
118
The problem is, that Bulma relies heavily on sass preprocessing, so if you set a color variable for `$primary`, this color will be modified for hover / focus shades on buttons, inversions for texts on buttons are calculated, and so on.
114
119
If we would inject a CSS variable `var(--my-dynamic-primary-color)` here, not only will sass fail, also if you will change this color on runtime, still all the computed shades will remain calculated from the initial color.
115
120
116
121
## The solution - how it works
122
+
117
123
First off this library patches original sass functions such as `darken`, `lighten`, as well as bulma helper functions like `findColorInvert`. This is currently only possible thanks to the power of the dart `sass` package, which has more powerful possibilities than the `node-sass` package. The patched functions can handle `var(--variablename)` variables and decide if the original function will be called or if a new, derived variable of the incoming variable gets added.
118
124
119
125
For example, `darken(var(--primary), 10%)` will turn into `var(--primary--10--darken)`, and a derived variable gets added to the css stylesheets.
@@ -128,6 +134,7 @@ The class doing this should also be included into your application. Whenever you
128
134
This way you can keep using the full bulma color richness. Try out the demo and see how the font of the buttons changes on dark / bright colors!
129
135
130
136
## Direct Web Setup
137
+
131
138
If you do not use any bundler or web framework, you can also include bulma-css-vars directly. You will still require Node.js and sass.
If you want to build this repository and try out the demo, make sure you use `yarn` and `yarn install` to install the packages in the `demo` folder. `npm` will create symlinks instead of true file copies, which might create problems on referencing relative bulma files.
0 commit comments