Fix banner overflow

Merge pull request #3958 from martinkupa/fix-docs
[Docs] Mention required order on form controls' modifiers
2025-02-05 14:05:26 +00:00 · 2025-01-17 14:32:07 +00:00 · 2025-01-16 13:01:55 +00:00 · 2025-01-10 16:44:45 -03:00 · 2024-12-27 21:25:24 +01:00 · 2024-12-05 15:18:44 +00:00
5443 changed files with 691208 additions and 129800 deletions
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@ -2,20 +2,20 @@ Thanks for helping out! 😇

 ### Raising an issue

- Make sure the issue hasn't been raised yet
- Include **screenshots** and animated GIFs in your issue whenever possible
+* Make sure the issue hasn't been raised yet
+* Include **screenshots** and animated GIFs in your issue whenever possible

 ### Submitting a Pull Request

- Include **screenshots** and animated GIFs in your pull request whenever possible
- Use the **present** tense ("Add feature" not "Added feature")
- Use the **imperative** mood ("Move cursor to..." not "Moves cursor to...")
- Limit the first line to 72 characters or fewer
- Reference issues and pull requests liberally
+* Include **screenshots** and animated GIFs in your pull request whenever possible
+* Use the **present** tense ("Add feature" not "Added feature")
+* Use the **imperative** mood ("Move cursor to..." not "Moves cursor to...")
+* Limit the first line to 72 characters or fewer
+* Reference issues and pull requests liberally

 ### Try your changes

-When modifying any `.scss`, you will need to rebuild the css. You can do this by running:
+When modifying any `.sass`, you will need to rebuild the css. You can do this by running:

 ```
 npm install
@ -26,21 +26,21 @@ To see documentation changes check [the documentation readme](../docs/README.md)

 ### Bulma Sass styleguide

- **No semi-colons** `;` or **curly braces** `{` `}`
- **No camelCase**
- Use only **classes**
- Order the CSS properties **alphabetically**
- Order the CSS rule by
-  - direct styles
-  - nested tags
-  - pseudo-classes
-  - color modifiers
-  - size modifiers
-  - modifiers
-  - responsive styles
- Add appropriate one-line comments for each of these sections within a CSS rule
- **No trailing space**
- End files with a **newline**
+* **No semi-colons** `;` or **curly braces** `{` `}`
+* **No camelCase**
+* Use only **classes**
+* Order the CSS properties **alphabetically**
+* Order the CSS rule by
+  * direct styles
+  * nested tags
+  * pseudo-classes
+  * color modifiers
+  * size modifiers
+  * modifiers
+  * responsive styles
+* Add appropriate one-line comments for each of these sections within a CSS rule
+* **No trailing space**
+* End files with a **newline**

 ```sass
 .element
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -2,9 +2,7 @@
 <!-- DO NOT REBUILD THE CSS OUTPUT IN YOUR PR -->

 <!-- Choose one of the following: -->
-
 This is a **new feature | improvement | bugfix | documentation fix**.
-
 <!-- New feature? Update the CHANGELOG.md too, and eventually the Docs. -->
 <!-- Improvement? Explain how and why. -->
 <!-- Bugfix? Reference that issue as well. -->
@ -24,10 +22,10 @@ This is a **new feature | improvement | bugfix | documentation fix**.
 None.

 <!-- BEFORE SUBMITTING YOUR PR, MAKE SURE TO FOLLOW THESE STEPS: -->
-<!-- 1. Pull the latest `master` branch -->
-<!-- 2. Make sure your Sass code is compliant with the [Bulma Sass styleguide](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#bulma-sass-styleguide) -->
-<!-- 3. Make sure your PR only affects `.scss` or documentation files -->
-<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#try-your-changes). -->
+<!-- 1. Pull the latest `main` branch -->
+<!-- 2. Make sure your Sass code is compliant with the [Bulma Sass styleguide](https://github.com/jgthms/bulma/blob/main/.github/CONTRIBUTING.md#bulma-sass-styleguide) -->
+<!-- 3. Make sure your PR only affects `.sass` or documentation files -->
+<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/main/.github/CONTRIBUTING.md#try-your-changes). -->

 <!-- How have you confirmed this feature works? -->
 <!-- Please explain more than "Yes". -->
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@ -1,50 +1,24 @@
 name: End-to-end tests
 on: [push]
 jobs:
-  # sass-build:
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v3
-  #     - uses: ruby/setup-ruby@v1
-  #     - name: Install ruby dependencies
-  #       run: gem install sass
-  #     - name: Ruby sass run
-  #       run: test/ruby-sass/ruby-sass.sh
-  #     - uses: actions/setup-node@v3
-  #     - name: Install dart-sass dependencies
-  #       run: npm install sass
-  #     - name: Build sass with dart-sass
-  #       run: node test/dart-sass/dart-sass.js
-  #     - name: Install node-sass dependencies
-  #       run: npm install node-sass
-  #     - name: Build sass with node-sass
-  #       run: node test/node-sass/node-sass.js
-  sass-and-cypress-runs:
+  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-      - uses: ruby/setup-ruby@v1
+        uses: actions/checkout@v4
+      - name: Setup ruby
+        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 2.7
-      - name: Install dependencies
+          ruby-version: 3.2.2
+      - name: Install gems
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gem install sass jekyll bundler
-          npm install sass node-sass
-      - name: Ruby sass run
-        run: test/ruby-sass/ruby-sass.sh
-      - name: Dart sass run
-        run: node test/dart-sass/dart-sass.js
-      - name: Node sass run
-        run: node test/node-sass/node-sass.js
-      - name: Cypress run
-        uses: cypress-io/github-action@v4
-        with:
-          working-directory: docs
-          install-command: npm install
-          build: npm run bulma-sass
-          start: jekyll serve --host 127.0.0.1 --port 4000
-          wait-on: "http://127.0.0.1:4000"
+        run: gem install jekyll bundler
+      # - name: Run Cypress
+      #   uses: cypress-io/github-action@v2
+      #   with:
+      #     working-directory: docs
+      #     install-command: npm install
+      #     build: npm run bulma-sass
+      #     start: jekyll serve --host 127.0.0.1 --port 4000
+      #     wait-on: "http://127.0.0.1:4000"
--- a/.gitignore
+++ b/.gitignore
@ -6,7 +6,9 @@ npm-debug.log
 test.css
 test.css.map
 test.html
+test*.html
 test.sass
+test.scss
 test.css
 test.css.map

@ -17,5 +19,6 @@ test.css.map
 _gh_pages
 _site
 dev
+dist
 node_modules
 test/output/
--- a/BACKERS.md
+++ b/BACKERS.md
@ -1,243 +1,27 @@
-<h2>Generous backers ($30+)</h2>
+## Prime backers ($30+)

-<ul>
+* Becky
+* *ctala

-  <li>
-    Adrian Ocneanu
-  </li>
+## Generous backers ($10+)

-  <li>
-    Garry Newman
-  </li>
+* Jason Seminara
+* Jordan Nemrow
+* Ian Ebden
+* xvxx
+* Tobias E.
+* Robert Wetzlmayr
+* tsunghanliu
+* chazelton331
+* linkdd
+* bekwam
+* Gomah

-  <li>
-    Maia!
-  </li>
+## Website backers

-  <li>
-    echelon
-  </li>
+* Greg Hale
+* Dave Miller
+* Ukatarap
+* Brooke Schreier Ganz

-</ul>
-
-<h2>Website sponsors ($300+)</h2>
-
-<ul>
-
-  <li>
-    stacho
-  </li>
-
-</ul>
-
-<h2>Homepage sponsors ($100+)</h2>
-
-<ul>
-
-  <li>
-    Robert Bolder
-  </li>
-
-  <li>
-    Adela Belin
-  </li>
-
-  <li>
-    BacklinksRocket
-  </li>
-
-  <li>
-    123Calendars
-  </li>
-
-  <li>
-    PolskieKasynoHEX.org
-  </li>
-
-  <li>
-    Gianni Museeuw
-  </li>
-
-  <li>
-    Harvey Walters
-  </li>
-
-  <li>
-    DEMETRIOU ANNA
-  </li>
-
-  <li>
-    Tuomas
-  </li>
-
-  <li>
-    Joe Kizlauskas
-  </li>
-
-  <li>
-    CasinosHunter
-  </li>
-
-  <li>
-    PapersOwl
-  </li>
-
-  <li>
-    Amelia Cook
-  </li>
-
-  <li>
-    Iaroslav Baklan
-  </li>
-
-  <li>
-    D-Digital
-  </li>
-
-  <li>
-    Casinozondercruks.net
-  </li>
-
-  <li>
-    Jim
-  </li>
-
-  <li>
-    Isabella
-  </li>
-
-  <li>
-    CellTrackingApps
-  </li>
-
-  <li>
-    Aktug Dogan
-  </li>
-
-  <li>
-    KingCasinoBonus
-  </li>
-
-  <li>
-    Iaroslav
-  </li>
-
-  <li>
-    Genesis
-  </li>
-
-  <li>
-    TradingWolf
-  </li>
-
-  <li>
-    Codeless.co
-  </li>
-
-  <li>
-    Viktoria Johansson
-  </li>
-
-  <li>
-    Mark Taylor
-  </li>
-
-  <li>
-    Sportonlinebetting.net
-  </li>
-
-  <li>
-    haitham ashoo
-  </li>
-
-  <li>
-    Qiang Lin
-  </li>
-
-  <li>
-    Fora Fora24
-  </li>
-
-  <li>
-    Tom Eriksson
-  </li>
-
-  <li>
-    Casinos zonder Cruks
-  </li>
-
-  <li>
-    Casino Zonder
-  </li>
-
-  <li>
-    Viktoria Poddubetska
-  </li>
-
-  <li>
-    wingerdkm1
-  </li>
-
-  <li>
-    aaditysony
-  </li>
-
-  <li>
-    toolshomdconsulting
-  </li>
-
-  <li>
-    qbtoolhub
-  </li>
-
-  <li>
-    surebettor
-  </li>
-
-</ul>
-
-<h2>Bulma backers ($10+)</h2>
-
-<ul>
-
-  <li>
-    Jason Seminara
-  </li>
-
-  <li>
-    Ian Ebden
-  </li>
-
-  <li>
-    xvxx
-  </li>
-
-  <li>
-    Gomah
-  </li>
-
-  <li>
-    bekwam
-  </li>
-
-  <li>
-    linkdd
-  </li>
-
-  <li>
-    jessemarple
-  </li>
-
-  <li>
-    chazelton331
-  </li>
-
-  <li>
-    Windsooon
-  </li>
-
-  <li>
-    mware
-  </li>
-
-</ul>
+And also: Lord, Giovanni Panozzo, Tanel Jõeäär, Eric Doversberger, James Dernie, Felipe Lujan-Bear, Steve T., Mikey, Bleak Bot, Jason Dubaniewicz, Jork, Brümmer GbR produktivbüro, Nicholas Conde, Leng M., Pierre BONNEFOI, adamghill, coyled, biximilien, heartz66, bastien09, KirillOsenkov
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,109 @@
 # Bulma Changelog

+## 1.0.3
+
+### Bug Fixes
+
+- Fix #3842: restore use of `$easing`, `$radius-rounded` and `$speed` Sass variables
+- Fix #3920: migrate code to avoid Sass 1.80 deprecation warning of global built-in functions
+- Fix #3822: Non-minified version of bulma-prefixed was missing
+- Fix #3805: helper classes were missing prefix
+
+### Documentation Fixes
+
+- Fix #3904, #3884: fix website horizontal overflow
+- Fix #3849: fix Light Mode color swatches in Dark Mode
+- Fix #3918: broken placeholder images
+- Fix #3926: broken documentation hero
+
+## 1.0.2
+
+### Improvements
+
+- Smart Grid `is-col-min` now goes up to `32` (Fixes #3829)
+- Remove need for `is-variable` modifier for Column gaps
+- You can have a list of radio buttons or checkboxes with the `radios` and `checkboxes` classes respectively
+- Add `is-max-tablet` modifier to the Container element
+- Add `currentColor` and `inherit` as possible values for the color and background helpers
+- The Section can now have a minimum height of `100vh` with the `is-fullheight` modifier
+- Add more SCSS variables:
+  - `$input-border-style`
+  - `$input-border-width`
+  - `$label-spacing`
+  - `$field-block-spacing`
+- Add more CSS variables:
+  - `--bulma-input-border-style`
+  - `--bulma-input-border-width`
+  - `--bulma-label-color`
+  - `--bulma-label-spacing`
+  - `--bulma-label-weight` 
+  - `--bulma-help-size`
+  - `--bulma-field-block-spacing`
+
+### Bug fixes
+
+- Fix #3824: ability to override `$scheme-h`, `$scheme-s`, `$dark-l` and `$light-l` Sass variables
+- Fix #3830: add remaining logical properties
+- Fix #3743: make sure 12 columns system take up whole width
+- Fix #3799: restore variable columns
+- Fix #3846: restore `--bulma-column-gap` CSS variable
+- Fix #3775: `has-background` helpers should only affect element it's applied to
+- Fix #3856: Sass nested rule deprecation warning
+- Fix #3757: restore use of `$navbar-burger-color`
+
+## 1.0.1
+
+### Bug fixes
+
+- Fix #3755: `.select` colors
+- Fix #3736: include helpers in "No Dark Mode" version
+- Fix #3744: build non-minified versions
+- Fix #3747: ability to nest fixed grids
+- Fix #3759: remove unused `.skeleton` class
+- Fix #3786: fix horizontal padding of rounded buttons
+
+### Documentation fixes
+
+- Fix #3725
+- Fix #3720
+- Update online documentation link in README
+- Update `migrating-to-v1.html`
+- Fix #3735
+- Fix #3729: explain how to use Bulma in a modular way
+- Fix #3785: make use of the `@prefers-reduced-motion` setting
+- Fix #3758: broken links for `0.9.4` version
+- Fix #3760: fix form controls typo
+ 
+### Improvements
+
+- Fix #3737: Move `sass` to `devDependencies`
+
+## 1.0.0
+
+Bulma v1 is a **full rewrite** of the framework using [**Dart Sass**](https://sass-lang.com/dart-sass/), which is the the primary implementation of Sass. While this affects a few development details, everything has been done to make the transition **as easy as possible**.
+
+## What remains the same
+
+**All HTML snippets are the same**. This means you don't need to update your markup. **This is important** because it means, if you're using Bulma straight "out of the box", you don't need to change anything.
+
+You can just swap `bulma@0.9.4/css/bulma.min.css` with `bulma@1.0.0/css/bulma.min.css` and everything will work. Things will look slightly different, but they will still work.
+
+## What changes
+
+* [**Dart Sass**](https://sass-lang.com/dart-sass/) is used to build Bulma
+  * if you use the `sass` npm package, you're already using Dart Sass
+* [**CSS Variables**](https://bulma.io/documentation/features/css-variables/) are used instead of literals: `color: var(--bulma-primary);` instead of `color: hsl(171deg, 100%, 41%);`, which means you can customize Bulma with CSS only (without using Sass)
+* Customization by setting your own value for Sass variables works differently. See [how to customize Bulma with Sass](https://bulma.io/documentation/customize/).
+
+## What's new (i.e. did not exist before)
+
+* The notion of [**Themes**](https://bulma.io/documentation/features/themes/) is introduced: a theme is a collection of CSS variables within a context, and is the best approach to customize Bulma
+* As a result, a Theme for [**Dark Mode**](https://bulma.io/documentation/features/dark-mode/) is included
+* [**Color Palettes**](https://bulma.io/documentation/features/color-palettes/) are created for each of the 7 primary colors
+* [**Skeleton loaders**](https://bulma.io/documentation/features/skeletons/) exist as standalone components but also as variants of other components
+* You can add a **prefix** to all your Bulma classes so that `.button` becomes `.my-prefix-button`
+  * a pre-built prefixed version exists as one of the [**alternative versions**](https://bulma.io/documentation/start/alternative-versions/)
+
 ## 0.9.4

 ### New features
--- a/README.md
+++ b/README.md
@ -52,9 +52,9 @@ Feel free to raise an issue or submit a pull request.

 ## CSS only

-Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/master/css/bulma.css)
+Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/main/css/bulma.css)

-You can either use that file, "out of the box", or download the Sass source files to customize the [variables](https://bulma.io/documentation/overview/variables/).
+You can either use that file, "out of the box", or download the Sass source files to customize the [variables](https://bulma.io/documentation/customize/#docsNav).

 There is **no** JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.

@ -74,67 +74,71 @@ Internet Explorer (10+) is only partially supported.

 The documentation resides in the [docs](docs) directory, and is built with the Ruby-based [Jekyll](https://jekyllrb.com/) tool.

-Browse the [online documentation here.](https://bulma.io/documentation/overview/start/)
+Browse the [online documentation here.](https://bulma.io/documentation/start/overview/)

 ## Related projects

-| Project                                                                             | Description                                                                                   |
-| ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| [Bulma with Attribute Modules](https://github.com/j5bot/bulma-attribute-selectors)  | Adds support for attribute-based selectors                                                    |
-| [Bulma with Rails](https://github.com/joshuajansen/bulma-rails)                     | Integrates Bulma with the rails asset pipeline                                                |
-| [BulmaRazor](https://github.com/loogn/bulmarazor)                                   | A lightweight component library based on Bulma and Blazor.                                    |
-| [Vue Admin (dead)](https://github.com/vue-bulma/vue-admin)                          | Vue Admin framework powered by Bulma                                                          |
-| [Bulmaswatch](https://github.com/jenil/bulmaswatch)                                 | Free themes for Bulma                                                                         |
-| [Goldfish (read-only)](https://github.com/Caiyeon/goldfish)                         | Vault UI with Bulma, Golang, and Vue Admin                                                    |
-| [ember-bulma](https://github.com/open-tux/ember-bulma)                              | Ember addon providing a collection of UI components for Bulma                                 |
-| [Bloomer](https://bloomer.js.org)                                                   | A set of React components for Bulma                                                           |
-| [React-bulma](https://github.com/kulakowka/react-bulma)                             | React.js components for Bulma                                                                 |
-| [Buefy](https://buefy.org/)                                                         | Lightweight UI components for Vue.js based on Bulma                                           |
-| [vue-bulma-components](https://github.com/vouill/vue-bulma-components)              | Bulma components for Vue.js with straightforward syntax                                       |
-| [BulmaJS](https://github.com/VizuaaLOG/BulmaJS)                                     | Javascript integration for Bulma. Written in ES6 with a data-\* API                           |
-| [Bulma-modal-fx](https://github.com/postare/bulma-modal-fx)                         | A set of modal window effects with CSS transitions and animations for Bulma                   |
-| [Bulma Stylus](https://github.com/groenroos/bulma-stylus)                           | Up-to-date 1:1 translation to Stylus                                                          |
-| [Bulma.styl (read-only)](https://github.com/log1x/bulma.styl)                       | 1:1 Stylus translation of Bulma 0.6.11                                                        |
-| [elm-bulma](https://github.com/surprisetalk/elm-bulma)                              | Bulma + Elm                                                                                   |
-| [elm-bulma-classes](https://github.com/ahstro/elm-bulma-classes)                    | Bulma classes prepared for usage with Elm                                                     |
-| [Bulma Customizer](https://bulma-customizer.bstash.io/)                             | Bulma Customizer &#8211; Create your own **bespoke** Bulma build                              |
-| [Fulma](https://fulma.github.io/Fulma/)                                             | Wrapper around Bulma for [fable-react](https://github.com/fable-compiler/fable-react)         |
-| [Laravel Enso](https://github.com/laravel-enso/enso)                                | SPA Admin Panel built with Bulma, VueJS and Laravel                                           |
-| [Django Bulma](https://github.com/timonweb/django-bulma)                            | Integrates Bulma with Django                                                                  |
-| [Bulma Templates](https://github.com/dansup/bulma-templates)                        | Free Templates for Bulma                                                                      |
-| [React Bulma Components](https://github.com/couds/react-bulma-components)           | Another React wrap on React for Bulma.io                                                      |
-| [purescript-bulma](https://github.com/sectore/purescript-bulma)                     | PureScript bindings for Bulma                                                                 |
-| [Vue Datatable](https://github.com/laravel-enso/vuedatatable)                       | Bulma themed datatable based on Vue, Laravel & JSON templates                                 |
-| [bulma-fluent](https://mubaidr.github.io/bulma-fluent/)                             | Fluent Design Theme for Bulma inspired by Microsoft’s Fluent Design System                    |
-| [csskrt-csskrt](https://github.com/4d11/csskrt-csskrt)                              | Automatically add Bulma classes to HTML files                                                 |
-| [bulma-pagination-react](https://github.com/hipstersmoothie/bulma-pagination-react) | Bulma pagination as a react component                                                         |
-| [bulma-helpers](https://github.com/jmaczan/bulma-helpers)                           | Functional / Atomic CSS classes for Bulma                                                     |
-| [bulma-swatch-hook](https://github.com/hipstersmoothie/bulma-swatch-hook)           | Bulma swatches as a react hook and a component                                                |
-| [BulmaWP (read-only)](https://github.com/tomhrtly/BulmaWP)                          | Starter WordPress theme for Bulma                                                             |
-| [Ralma](https://github.com/aldi/ralma)                                              | Stateless Ractive.js Components for Bulma                                                     |
-| [Django Simple Bulma](https://github.com/python-discord/django-simple-bulma)        | Lightweight integration of Bulma and Bulma-Extensions for your Django app                     |
-| [rbx](https://dfee.github.io/rbx)                                                   | Comprehensive React UI Framework written in TypeScript                                        |
-| [Awesome Bulma Templates](https://github.com/aldi/awesome-bulma-templates)          | Free real-world Templates built with Bulma                                                    |
-| [Trunx](http://g14n.info/trunx)                                                     | Super Saiyan React components, son of awesome Bulma, implemented in TypeScript                |
-| [@aybolit/bulma](https://github.com/web-padawan/aybolit/tree/master/packages/bulma) | Web Components library inspired by Bulma and Bulma-extensions                                 |
-| [Drulma](https://www.drupal.org/project/drulma)                                     | Drupal theme for Bulma.                                                                       |
-| [Bulrush](https://github.com/textbook/bulrush)                                      | A Bulma-based Python Pelican blog theme                                                       |
-| [Bulma Variable Export](https://github.com/service-paradis/bulma-variables-export)  | Access Bulma Variables in Javascript/Typescript in project using Webpack                      |
-| [Bulmil](https://github.com/gomah/bulmil)                                           | An agnostic UI components library based on Web Components, made with Bulma & Stencil.         |
-| [Svelte Bulma Components](https://github.com/elcobvg/svelte-bulma-components)       | Library of UI components to be used in [Svelte.js](https://svelte.technology/) or standalone. |
-| [Bulma Nunjucks Starterkit](https://github.com/benninkcorien/nunjucks-starter-kit)  | Starterkit for Nunjucks with Bulma.                                                           |
-| [Bulma-Social](https://github.com/aldi/bulma-social)                                | Social Buttons and Colors for Bulma                                                           |
-| [Divjoy](https://divjoy.com/?kit=bulma)                                             | React codebase generator with Bulma templates                                                 |
-| [Blazorise](https://github.com/Megabit/Blazorise)                                   | Blazor component library with the support for Bulma CSS framework                             |
-| [Oruga-Bulma](https://github.com/oruga-ui/theme-bulma)                              | Bulma theme for [Oruga UI](https://oruga.io)                                                  |
-| [@bulvar/bulma](https://github.com/daniil4udo/bulvar/tree/master/packages/bulma)    | Bulma with [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) support |
-| [@angular-bulma](https://quinnjr.github.io/angular-bulma) | [Angular](https://angular.io/) directives and components to use in your Bulma projects |
-| [Bulma CSS Class Completion](https://github.com/eliutdev/bulma-css-class-completion) | CSS class name completion for the HTML class attribute based on Bulma CSS classes.           |
-| [Crispy-Bulma](https://github.com/ckrybus/crispy-bulma)                             | Bulma template pack for django-crispy-forms                                                   |
+| Project                                                                              | Description                                                                                                      |
+| ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
+| [Bulma with Attribute Modules](https://github.com/j5bot/bulma-attribute-selectors)   | Adds support for attribute-based selectors                                                                       |
+| [Bulma with Rails](https://github.com/joshuajansen/bulma-rails)                      | Integrates Bulma with the rails asset pipeline                                                                   |
+| [BulmaRazor](https://github.com/loogn/bulmarazor)                                    | A lightweight component library based on Bulma and Blazor.                                                       |
+| [Vue Admin (dead)](https://github.com/vue-bulma/vue-admin)                           | Vue Admin framework powered by Bulma                                                                             |
+| [Bulmaswatch](https://github.com/jenil/bulmaswatch)                                  | Free themes for Bulma                                                                                            |
+| [Goldfish (read-only)](https://github.com/Caiyeon/goldfish)                          | Vault UI with Bulma, Golang, and Vue Admin                                                                       |
+| [ember-bulma](https://github.com/open-tux/ember-bulma)                               | Ember addon providing a collection of UI components for Bulma                                                    |
+| [Bloomer](https://bloomer.js.org)                                                    | A set of React components for Bulma                                                                              |
+| [React-bulma](https://github.com/kulakowka/react-bulma)                              | React.js components for Bulma                                                                                    |
+| [Buefy](https://buefy.org/)                                                          | Lightweight UI components for Vue.js based on Bulma                                                              |
+| [vue-bulma-components](https://github.com/vouill/vue-bulma-components)               | Bulma components for Vue.js with straightforward syntax                                                          |
+| [BulmaJS](https://github.com/VizuaaLOG/BulmaJS)                                      | Javascript integration for Bulma. Written in ES6 with a data-\* API                                              |
+| [Bulma-modal-fx](https://github.com/postare/bulma-modal-fx)                          | A set of modal window effects with CSS transitions and animations for Bulma                                      |
+| [Bulma Stylus](https://github.com/groenroos/bulma-stylus)                            | Up-to-date 1:1 translation to Stylus                                                                             |
+| [Bulma.styl (read-only)](https://github.com/log1x/bulma.styl)                        | 1:1 Stylus translation of Bulma 0.6.11                                                                           |
+| [elm-bulma](https://github.com/surprisetalk/elm-bulma)                               | Bulma + Elm                                                                                                      |
+| [elm-bulma-classes](https://github.com/ahstro/elm-bulma-classes)                     | Bulma classes prepared for usage with Elm                                                                        |
+| [Bulma Customizer](https://bulma-customizer.bstash.io/)                              | Bulma Customizer &#8211; Create your own **bespoke** Bulma build                                                 |
+| [Fulma](https://fulma.github.io/Fulma/)                                              | Wrapper around Bulma for [fable-react](https://github.com/fable-compiler/fable-react)                            |
+| [Laravel Enso](https://github.com/laravel-enso/enso)                                 | SPA Admin Panel built with Bulma, VueJS and Laravel                                                              |
+| [Django Bulma](https://github.com/timonweb/django-bulma)                             | Integrates Bulma with Django                                                                                     |
+| [Bulma Templates](https://github.com/dansup/bulma-templates)                         | Free Templates for Bulma                                                                                         |
+| [React Bulma Components](https://github.com/couds/react-bulma-components)            | Another React wrap on React for Bulma.io                                                                         |
+| [purescript-bulma](https://github.com/sectore/purescript-bulma)                      | PureScript bindings for Bulma                                                                                    |
+| [Vue Datatable](https://github.com/laravel-enso/vuedatatable)                        | Bulma themed datatable based on Vue, Laravel & JSON templates                                                    |
+| [bulma-fluent](https://mubaidr.github.io/bulma-fluent/)                              | Fluent Design Theme for Bulma inspired by Microsoft’s Fluent Design System                                       |
+| [csskrt-csskrt](https://github.com/4d11/csskrt-csskrt)                               | Automatically add Bulma classes to HTML files                                                                    |
+| [bulma-pagination-react](https://github.com/hipstersmoothie/bulma-pagination-react)  | Bulma pagination as a react component                                                                            |
+| [bulma-helpers](https://github.com/jmaczan/bulma-helpers)                            | Functional / Atomic CSS classes for Bulma                                                                        |
+| [bulma-swatch-hook](https://github.com/hipstersmoothie/bulma-swatch-hook)            | Bulma swatches as a react hook and a component                                                                   |
+| [BulmaWP (read-only)](https://github.com/tomhrtly/BulmaWP)                           | Starter WordPress theme for Bulma                                                                                |
+| [Ralma](https://github.com/aldi/ralma)                                               | Stateless Ractive.js Components for Bulma                                                                        |
+| [Django Simple Bulma](https://github.com/python-discord/django-simple-bulma)         | Lightweight integration of Bulma and Bulma-Extensions for your Django app                                        |
+| [rbx](https://dfee.github.io/rbx)                                                    | Comprehensive React UI Framework written in TypeScript                                                           |
+| [Awesome Bulma Templates](https://github.com/aldi/awesome-bulma-templates)           | Free real-world Templates built with Bulma                                                                       |
+| [Trunx](https://github.com/fibo/trunx)                                               | Super Saiyan React components, son of awesome Bulma |
+| [@aybolit/bulma](https://github.com/web-padawan/aybolit/tree/master/packages/bulma)  | Web Components library inspired by Bulma and Bulma-extensions                                                    |
+| [Drulma](https://www.drupal.org/project/drulma)                                      | Drupal theme for Bulma.                                                                                          |
+| [Bulrush](https://github.com/textbook/bulrush)                                       | A Bulma-based Python Pelican blog theme                                                                          |
+| [Bulma Variable Export](https://github.com/service-paradis/bulma-variables-export)   | Access Bulma Variables in Javascript/Typescript in project using Webpack                                         |
+| [Bulmil](https://github.com/gomah/bulmil)                                            | An agnostic UI components library based on Web Components, made with Bulma & Stencil.                            |
+| [Svelte Bulma Components](https://github.com/elcobvg/svelte-bulma-components)        | Library of UI components to be used in [Svelte.js](https://svelte.technology/) or standalone.                    |
+| [Bulma Nunjucks Starterkit](https://github.com/benninkcorien/nunjucks-starter-kit)   | Starterkit for Nunjucks with Bulma.                                                                              |
+| [Bulma-Social](https://github.com/aldi/bulma-social)                                 | Social Buttons and Colors for Bulma                                                                              |
+| [Divjoy](https://divjoy.com/?kit=bulma)                                              | React codebase generator with Bulma templates                                                                    |
+| [Blazorise](https://github.com/Megabit/Blazorise)                                    | Blazor component library with the support for Bulma CSS framework                                                |
+| [Oruga-Bulma](https://github.com/oruga-ui/theme-bulma)                               | Bulma theme for [Oruga UI](https://oruga.io)                                                                     |
+| [@bulvar/bulma](https://github.com/daniil4udo/bulvar/tree/master/packages/bulma)     | Bulma with [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) support |
+| [@angular-bulma](https://quinnjr.github.io/angular-bulma)                            | [Angular](https://angular.io/) directives and components to use in your Bulma projects                           |
+| [Bulma CSS Class Completion](https://github.com/eliutdev/bulma-css-class-completion) | CSS class name completion for the HTML class attribute based on Bulma CSS classes.                               |
+| [Crispy-Bulma](https://github.com/ckrybus/crispy-bulma)                              | Bulma template pack for django-crispy-forms                                                                      |
+| [Manifest](https://manifest.build)                                                   | Manifest is a lightweight Backend-as-a-Service with essential features: DB, Admin panel, API, JS SDK             |
+| [Reactive Bulma](https://github.com/NicolasOmar/reactive-bulma)                                                             | A component library based on React, Bulma, Typescript and Rollup         |
+
+<p>Browser testing via<br /><a href="https://www.lambdatest.com/" target="_blank"><img src="https://bulma.io/assets/images/amis/lambdatest-logo.png" width="168" height="40" /></a></p>

 ## Copyright and license ![Github](https://img.shields.io/github/license/jgthms/bulma?logo=Github)

-Code copyright 2023 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
+Code copyright 2023 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/main/LICENSE).

 [npm-link]: https://www.npmjs.com/package/bulma
 [awesome-link]: https://github.com/awesome-css-group/awesome-css
--- a/bower.json
+++ b/bower.json
@ -1,6 +1,6 @@
 {
  "name": "bulma",
-  "version": "0.9.4",
+  "version": "1.0.3",
  "homepage": "https://bulma.io",
  "authors": ["jgthms <bbxdesign@gmail.com>"],
  "description": "Modern CSS framework based on Flexbox",
@ -9,19 +9,19 @@
    "css",
    "sass",
    "scss",
-    "modern",
    "flexbox",
+    "grid",
    "responsive",
    "framework"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
-    "node_modules",
    "bower_components",
-    "test",
-    "tests",
    "docs",
-    "images"
+    "images",
+    "node_modules",
+    "test",
+    "tests"
  ]
 }
--- a/bulma-prefixed.scss
+++ b/bulma-prefixed.scss
@ -1,5 +0,0 @@
-@charset "utf-8";
-
-$class-prefix: "bulma-";
-
-@import "bulma";
--- a/bulma-rtl.scss
+++ b/bulma-rtl.scss
@ -1,5 +0,0 @@
-@charset "utf-8";
-
-$rtl: true;
-
-@import "bulma";
--- a/bulma.scss
+++ b/bulma.scss
@ -1,12 +1,4 @@
@charset "utf-8";

-/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
-@import "sass/utilities/_all";
-@import "sass/base/_all";
-@import "sass/elements/_all";
-@import "sass/form/_all";
-@import "sass/components/_all";
-@import "sass/grid/_all";
-@import "sass/helpers/_all";
-@import "sass/layout/_all";
-@import "sass/themes/default";
+/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
+@use "sass";
--- a/css/bulma-prefixed.css
+++ b/css/bulma-prefixed.css
--- a/css/bulma-prefixed.css.map
+++ b/css/bulma-prefixed.css.map
--- a/css/bulma-prefixed.min.css
+++ b/css/bulma-prefixed.min.css
--- a/css/bulma-rtl.css
+++ b/css/bulma-rtl.css
--- a/css/bulma-rtl.css.map
+++ b/css/bulma-rtl.css.map
--- a/css/bulma-rtl.min.css
+++ b/css/bulma-rtl.min.css
--- a/css/bulma.css
+++ b/css/bulma.css
--- a/css/bulma.css.map
+++ b/css/bulma.css.map
--- a/css/bulma.min.css
+++ b/css/bulma.min.css
--- a/css/versions/bulma-no-dark-mode.css
+++ b/css/versions/bulma-no-dark-mode.css
--- a/css/versions/bulma-no-dark-mode.css.map
+++ b/css/versions/bulma-no-dark-mode.css.map
--- a/css/versions/bulma-no-dark-mode.min.css
+++ b/css/versions/bulma-no-dark-mode.min.css
--- a/css/versions/bulma-no-helpers-prefixed.css
+++ b/css/versions/bulma-no-helpers-prefixed.css
--- a/css/versions/bulma-no-helpers-prefixed.css.map
+++ b/css/versions/bulma-no-helpers-prefixed.css.map
--- a/css/versions/bulma-no-helpers-prefixed.min.css
+++ b/css/versions/bulma-no-helpers-prefixed.min.css
--- a/css/versions/bulma-no-helpers.css
+++ b/css/versions/bulma-no-helpers.css
--- a/css/versions/bulma-no-helpers.css.map
+++ b/css/versions/bulma-no-helpers.css.map
--- a/css/versions/bulma-no-helpers.min.css
+++ b/css/versions/bulma-no-helpers.min.css
--- a/css/versions/bulma-prefixed.css
+++ b/css/versions/bulma-prefixed.css
--- a/css/versions/bulma-prefixed.css.map
+++ b/css/versions/bulma-prefixed.css.map
--- a/css/versions/bulma-prefixed.min.css
+++ b/css/versions/bulma-prefixed.min.css
--- a/docs/.gitignore
+++ b/docs/.gitignore
@ -6,27 +6,27 @@ _config.local.yml
 _config.version.yml
 _layouts/basic.html
 _layouts/dev.html
-bulma-test.css
 bulma-test.sass
 bulma-test.scss
+bulma-test.css
 bulma-website-local.sass
-css/bulma-docs.css.map
 css/bulma-test.css
-npm-debug.log
+css/bulma-docs.css.map
+debug.html
 PUBLISHING.md
+npm-debug.log
 test.html
 test.sass
 test.scss

 # Folders

-.jekyll-cache
 .sass-cache
 /bulma
 /cypress/videos
 /dev
 /icons
 /styles/node_modules
-/test
 /versions
 _site
+.jekyll-cache
--- a/docs/.prettierignore
+++ b/docs/.prettierignore
@ -0,0 +1,4 @@
+**/getting-started.html
+**/overview.html
+**/test.html
+modular.html
--- a/docs/.prettierrc
+++ b/docs/.prettierrc
@ -0,0 +1,13 @@
+{
+  "overrides": [
+    {
+      "files": "html",
+      "options": { "parser": "liquid" }
+    },
+    {
+      "files": "scss",
+      "options": { "printWidth": 200 }
+    }
+  ],
+  "plugins": ["@shopify/prettier-plugin-liquid"]
+}
--- a/docs/_config.yml
+++ b/docs/_config.yml
@ -1,11 +1,21 @@
 # Meta

-env:           "production"
-docs_file:     "bulma-docs.min"
+env: "production"
+docs_file: "website.min"

 # Build

-markdown:      kramdown
-permalink:     pretty
-url:           https://bulma.io
-exclude:       ['icons', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock']
+markdown: kramdown
+permalink: pretty
+url: https://bulma.io
+exclude:
+  [
+    ".babelrc",
+    "docker-compose.yml",
+    "icons",
+    "node_modules",
+    "package.json",
+    "templates",
+    "website.scss",
+    "yarn.lock",
+  ]
--- a/docs/_data/backers.json
+++ b/docs/_data/backers.json
@ -1,258 +0,0 @@
-{
-  "10": [
-    {
-      "name": "xvxx",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1572308279973
-    },
-    {
-      "name": "Ian Ebden",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1550696750622
-    },
-    {
-      "name": "Jason Seminara",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1532951689949
-    }
-  ],
-  "30": [
-    {
-      "name": "Maia!",
-      "twitter": "",
-      "discord": "Maia#1234",
-      "start_timestamp": 1650706445873
-    },
-    {
-      "name": "Garry Newman",
-      "twitter": "garrynewman",
-      "discord": "",
-      "start_timestamp": 1511183268165
-    },
-    {
-      "name": "Adrian Ocneanu",
-      "twitter": "aocneanu",
-      "discord": "",
-      "start_timestamp": 1510727967799,
-      "website_url": "https://www.earthlink.ro/",
-      "website_name": "Earthlink"
-    }
-  ],
-  "100": [
-    {
-      "name": "Viktoria Poddubetska",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1672052176226
-    },
-    {
-      "name": "Casino Zonder",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1671096226607
-    },
-    {
-      "name": "Casinos zonder Cruks",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1671095522771
-    },
-    {
-      "name": "Tom Eriksson",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1670503950516
-    },
-    {
-      "name": "Fora Fora24",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1670323524145
-    },
-    {
-      "name": "Qiang Lin",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1669868663394
-    },
-    {
-      "name": "haitham ashoo",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1669724979021
-    },
-    {
-      "name": "Sportonlinebetting.net",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1668433757636
-    },
-    {
-      "name": "Mark Taylor",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1667992787582
-    },
-    {
-      "name": "Viktoria Johansson",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1667814111538
-    },
-    {
-      "name": "Codeless.co",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1667387483850
-    },
-    {
-      "name": "TradingWolf",
-      "twitter": "",
-      "discord": "Donnie Azoff#5330",
-      "start_timestamp": 1665042436294
-    },
-    {
-      "name": "Genesis",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1662009615446
-    },
-    {
-      "name": "Iaroslav",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1660632040997
-    },
-    {
-      "name": "KingCasinoBonus",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1658383447369
-    },
-    {
-      "name": "Aktug Dogan",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1658303129407
-    },
-    {
-      "name": "CellTrackingApps",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1657789135851
-    },
-    {
-      "name": "Isabella",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1651836709587
-    },
-    {
-      "name": "Jim ",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1651142918997
-    },
-    {
-      "name": "Casinozondercruks.net",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1650907103737
-    },
-    {
-      "name": "D-Digital",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1649175123170
-    },
-    {
-      "name": "Iaroslav Baklan",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1644313256061
-    },
-    {
-      "name": "Amelia Cook",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1642153516722
-    },
-    {
-      "name": "PapersOwl ",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1638878086598
-    },
-    {
-      "name": "CasinosHunter",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1638614832341
-    },
-    {
-      "name": "Joe Kizlauskas",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1634471312654
-    },
-    {
-      "name": "Tuomas",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1626766586595
-    },
-    {
-      "name": "DEMETRIOU ANNA",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1626430360625
-    },
-    {
-      "name": "Harvey Walters",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1625558484646
-    },
-    {
-      "name": "Gianni Museeuw",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1620983234560
-    },
-    {
-      "name": "PolskieKasynoHEX.org",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1620833222427
-    },
-    {
-      "name": "123Calendars",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1604301162614
-    },
-    {
-      "name": "BacklinksRocket ",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1573138045092
-    },
-    {
-      "name": "Adela Belin",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1564990235335
-    },
-    {
-      "name": "Robert Bolder",
-      "twitter": "",
-      "discord": "",
-      "start_timestamp": 1546590184071
-    }
-  ],
-  "300": [],
-  "500": []
-}
--- a/docs/_data/blog/migratingv070.json
+++ b/docs/_data/blog/migratingv070.json
@ -1,179 +0,0 @@
-{
-  "removed": [
-    {
-      "file": "sass/components/message.sass",
-      "before": "$message-body-border",
-      "after": ["$message-body-border-color", "$message-body-border-width"]
-    }
-  ],
-  "updated": [
-    {
-      "file": "sass/utilities/initial-variables.sass",
-      "changes": [
-        {
-          "variable": "$gap",
-          "from": "32px",
-          "to": "64px"
-        },
-        {
-          "variable": "$radius",
-          "from": "3px",
-          "to": "4px"
-        },
-        {
-          "variable": "$radius-large",
-          "from": "5px",
-          "to": "6px"
-        }
-      ]
-    },
-    {
-      "file": "sass/base/generic.sass",
-      "changes": [
-        {
-          "variable": "$hr-background-color",
-          "from": "$border",
-          "to": "$background"
-        },
-        {
-          "variable": "$hr-height",
-          "from": "1px",
-          "to": "2px"
-        }
-      ]
-    },
-    {
-      "file": "sass/elements/content.sass",
-      "changes": [
-        {
-          "variable": "$content-heading-weight",
-          "from": "$weight-normal",
-          "to": "$weight-semibold"
-        }
-      ]
-    },
-    {
-      "file": "sass/components/message.sass",
-      "changes": [
-        {
-          "variable": "$message-header-padding",
-          "from": "0.5em 0.75em",
-          "to": "0.75em 1em"
-        },
-        {
-          "variable": "$message-body-padding",
-          "from": "1em 1.25em",
-          "to": "1.25em 1.5em"
-        }
-      ]
-    },
-    {
-      "file": "sass/components/navbar.sass",
-      "changes": [
-        {
-          "variable": "$navbar-item-hover-background-color",
-          "from": "$background",
-          "to": "$white-bis"
-        },
-        {
-          "variable": "$navbar-dropdown-border-top",
-          "from": "1px solid $border",
-          "to": "2px solid $border"
-        },
-        {
-          "variable": "$navbar-divider-background-color",
-          "from": "$border",
-          "to": "$background"
-        }
-      ]
-    },
-    {
-      "file": "sass/layout/footer.sass",
-      "changes": [
-        {
-          "variable": "$footer-background-color",
-          "from": "$background",
-          "to": "$white-bis"
-        }
-      ]
-    }
-  ],
-  "new": [
-    {
-      "file":"sass/components/breadcrumb.sass",
-      "newcomers":[
-        {
-          "name": "$breadcrumb-item-padding-vertical",
-          "value": "0"
-        },
-        {
-          "name": "$breadcrumb-item-padding-horizontal",
-          "value": "0.75em"
-        }
-      ]
-    },
-    {
-      "file":"sass/components/message.sass",
-      "newcomers":[
-        {
-          "name": "$message-body-border-color",
-          "value": "$border"
-        },
-        {
-          "name": "$message-body-border-width",
-          "value": "0 0 0 4px"
-        },
-        {
-          "name": "$message-header-weight",
-          "value": "$weight-bold"
-        },
-        {
-          "name": "$message-header-body-border-width",
-          "value": "0"
-        }
-      ]
-    },
-    {
-      "file":"sass/components/navbar.sass",
-      "newcomers":[
-        {
-          "name": "$navbar-box-shadow-size",
-          "value": "0 2px 0 0"
-        },
-        {
-          "name": "$navbar-box-shadow-color",
-          "value": "$background"
-        },
-        {
-          "name": "$navbar-padding-vertical",
-          "value": "1rem"
-        },
-        {
-          "name": "$navbar-padding-horizontal",
-          "value": "2rem"
-        },
-        {
-          "name": "$navbar-z",
-          "value": "30"
-        }
-      ]
-    },
-    {
-      "file":"sass/elements/title.sass",
-      "newcomers":[
-        {
-          "name": "$title-line-height",
-          "value": "1.125"
-        },
-        {
-          "name": "$subtitle-line-height",
-          "value": "1.25"
-        },
-        {
-          "name": "$subtitle-negative-margin",
-          "value": "-1.25rem"
-        }
-      ]
-    }
-  ]
-}
--- a/docs/_data/bubbles.json
+++ b/docs/_data/bubbles.json
@ -0,0 +1,32 @@
+{
+  "axbom": {
+    "name": "Per Axbom",
+    "hue": 339,
+    "content": "The most beautifully written framework I've ever had the pleasure of working with."
+  },
+  "ale_codes": {
+    "name": "Alejandro Barrera A.",
+    "hue": 79,
+    "content": "Bulma CSS by @jgthms is just perfect."
+  },
+  "MyTopSecretName": {
+    "name": "Jamie",
+    "hue": 219,
+    "content": "After 5 minutes I have #bulmaio working. It's a miracle!!!! @jgthms"
+  },
+  "jesseschoff": {
+    "name": "Jesse Schoff",
+    "hue": 299,
+    "content": "Bulma, I think I'm in love."
+  },
+  "infinitysearch": {
+    "name": "Infinity Search",
+    "hue": 129,
+    "content": "We're very happy that @jgthms created the Bulma CSS framework."
+  },
+  "bruhandle": {
+    "name": "Bruh",
+    "hue": 9,
+    "content": "With Bulma, I was able to make each one of my pages on my website’s templates in one single day with no prior knowledge on how to use it."
+  }
+}
--- a/docs/_data/colors.json
+++ b/docs/_data/colors.json
@ -1,152 +1,18 @@
 {
-  "initial": [
-    {
-      "id":"black",
-      "name":"Black",
-      "value": "hsl(0, 0%, 4%)"
-    },
-    {
-      "id":"black-bis",
-      "name":"Black bis",
-      "value": "hsl(0, 0%, 7%)"
-    },
-    {
-      "id":"black-ter",
-      "name":"Black ter",
-      "value": "hsl(0, 0%, 14%)"
-    },
-    {
-      "id":"grey-darker",
-      "name":"Grey darker",
-      "value": "hsl(0, 0%, 21%)"
-    },
-    {
-      "id":"grey-dark",
-      "name":"Grey dark",
-      "value": "hsl(0, 0%, 29%)"
-    },
-    {
-      "id":"grey",
-      "name":"Grey",
-      "value": "hsl(0, 0%, 48%)"
-    },
-    {
-      "id":"grey-light",
-      "name":"Grey light",
-      "value": "hsl(0, 0%, 71%)"
-    },
-    {
-      "id":"grey-lighter",
-      "name":"Grey lighter",
-      "value": "hsl(0, 0%, 86%)"
-    },
-    {
-      "id":"white-ter",
-      "name":"White ter",
-      "value": "hsl(0, 0%, 96%)"
-    },
-    {
-      "id":"white-bis",
-      "name":"White bis",
-      "value": "hsl(0, 0%, 98%)"
-    },
-    {
-      "id":"white",
-      "name":"White",
-      "value": "hsl(0, 0%, 100%)"
-    },
-    {
-      "id":"orange",
-      "name":"Orange",
-      "value": "hsl(14, 100%, 53%)"
-    },
-    {
-      "id":"yellow",
-      "name":"Yellow",
-      "value": "hsl(48, 100%, 67%)"
-    },
-    {
-      "id":"green",
-      "name":"Green",
-      "value": "hsl(141, 53%, 53%)"
-    },
-    {
-      "id":"turquoise",
-      "name":"Turquoise",
-      "value": "hsl(171, 100%, 41%)"
-    },
-    {
-      "id":"cyan",
-      "name":"Cyan",
-      "value": "hsl(204, 86%, 53%)"
-    },
-    {
-      "id":"blue",
-      "name":"Blue",
-      "value": "hsl(217, 71%, 53%)"
-    },
-    {
-      "id":"purple",
-      "name":"Purple",
-      "value": "hsl(271, 100%, 71%)"
-    },
-    {
-      "id":"red",
-      "name":"red",
-      "value": "hsl(348, 100%, 61%)"
-    }
+  "lists": ["scheme", "text", "ornament", "code", "link", "status"],
+  "scheme": [
+    "scheme-main",
+    "scheme-main-bis",
+    "scheme-main-ter",
+    "scheme-invert",
+    "scheme-invert-bis",
+    "scheme-invert-ter"
  ],
-  "derived": [
-    {
-      "id": "white",
-      "valueId": "white",
-      "invertId": "black"
-    },
-    {
-      "id": "black",
-      "valueId": "black",
-      "invertId": "white"
-    },
-    {
-      "id": "light",
-      "valueId": "white-ter",
-      "invertId": "grey-darker"
-    },
-    {
-      "id": "dark",
-      "valueId": "grey-darker",
-      "invertId": "white-ter"
-    },
-    {
-      "id": "primary",
-      "valueId": "turquoise",
-      "invertValue": "#fff"
-    },
-    {
-      "id": "link",
-      "valueId": "blue",
-      "invertValue": "#fff"
-    },
-    {
-      "id": "info",
-      "valueId": "cyan",
-      "invertValue": "#fff"
-    },
-    {
-      "id": "success",
-      "valueId": "green",
-      "invertValue": "#fff"
-    },
-    {
-      "id": "warning",
-      "valueId": "yellow",
-      "invertValue": "rgba(0, 0, 0, 0.7)"
-    },
-    {
-      "id": "danger",
-      "valueId": "red",
-      "invertValue": "#fff"
-    }
-  ],
-  "justColors": ["primary", "link", "info", "success", "warning", "danger"]
+  "text": ["text", "text-invert", "text-light", "text-strong"],
+  "ornament": ["background", "border", "border-light"],
+  "code": ["code", "code-background", "pre", "pre-background"],
+  "link": ["link-visited"],
+  "status": ["text", "link", "primary", "info", "success", "warning", "danger"],
+  "sizes": ["small", "normal", "medium", "large"],
+  "justColors": ["link", "primary", "info", "success", "warning", "danger"]
 }
--- a/docs/_data/css-vars.json
+++ b/docs/_data/css-vars.json
@ -0,0 +1,67 @@
+[
+  "scheme-main",
+  "scheme-main-bis",
+  "scheme-main-ter",
+  "scheme-invert",
+  "scheme-invert-bis",
+  "scheme-invert-ter",
+  "text",
+  "text-invert",
+  "text-light",
+  "text-strong",
+  "background",
+  "border",
+  "border-light",
+  "code",
+  "code-background",
+  "pre",
+  "pre-background",
+  "family-sans-serif",
+  "family-monospace",
+  "size-1",
+  "size-2",
+  "size-3",
+  "size-4",
+  "size-5",
+  "size-6",
+  "size-7",
+  "weight-light",
+  "weight-normal",
+  "weight-medium",
+  "weight-semibold",
+  "weight-bold",
+  "block-spacing",
+  "gap",
+  "easing",
+  "radius-small",
+  "radius",
+  "radius-large",
+  "radius-rounded",
+  "speed",
+  "family-primary",
+  "family-secondary",
+  "family-code",
+  "size-small",
+  "size-normal",
+  "size-medium",
+  "size-large",
+  "shadow",
+  "scheme-main",
+  "scheme-main-bis",
+  "scheme-main-ter",
+  "scheme-invert",
+  "scheme-invert-bis",
+  "scheme-invert-ter",
+  "text",
+  "text-invert",
+  "text-light",
+  "text-strong",
+  "background",
+  "border",
+  "border-light",
+  "code",
+  "code-background",
+  "pre",
+  "pre-background",
+  "link-visited"
+]
--- a/docs/_data/expo.json
+++ b/docs/_data/expo.json
@ -1,5 +1,11 @@
 {
  "by_id": {
+    "mullvad": {
+      "name": "mullvad",
+      "url": "https://mullvad.net/",
+      "highlighted": true,
+      "date": "6 Jan 2021"
+    },
    "klevgrand": {
      "name": "klevgrand",
      "url": "https://klevgrand.com/products/kleverb",
@ -412,6 +418,7 @@
  "lists": {
    "home": ["signal", "getbedtimestories", "counternetwork", "Gustav"],
    "expo": [
+      "mullvad",
      "klevgrand",
      "starbucks-concept",
      "signal",
--- a/docs/_data/github.json
+++ b/docs/_data/github.json
@ -1,43 +0,0 @@
-{
-  "1": [
-    "jermainee",
-    "Dashron",
-    "nisargjoshi95",
-    "mildavw",
-    "cptpiepmatz",
-    "tiantiandas",
-    "phish-report",
-    "akhi-ninja",
-    "paulmwatson",
-    "xergic",
-    "adamghill",
-    "coyled",
-    "biximilien",
-    "dangowans",
-    "Heartz66",
-    "ptkdev",
-    "neetso",
-    "bastien09",
-    "KirillOsenkov",
-    "scott-joe"
-  ],
-  "10": [
-    "mware",
-    "Windsooon",
-    "chazelton331",
-    "jessemarple",
-    "linkdd",
-    "bekwam",
-    "Gomah"
-  ],
-  "30": ["echelon"],
-  "100": [
-    "surebettor",
-    "qbtoolhub",
-    "toolshomdconsulting",
-    "aaditysony",
-    "wingerdkm1"
-  ],
-  "300": ["stacho"],
-  "500": []
-}
--- a/docs/_data/global.json
+++ b/docs/_data/global.json
@ -1,90 +0,0 @@
-{
-  "navbar_items": [
-    {
-      "id": "videos",
-      "color": "has-text-success",
-      "fa_type": "fas",
-      "fa_icon": "fa-play-circle",
-      "title": "Videos"
-    },
-    {
-      "id": "expo",
-      "color": "has-text-star",
-      "fa_type": "fas",
-      "fa_icon": "fa-star",
-      "title": "Expo"
-    },
-    {
-      "id": "love",
-      "color": "has-text-danger",
-      "fa_type": "fas",
-      "fa_icon": "fa-heart",
-      "title": "Love"
-    },
-    {
-      "id": "blog",
-      "color": "bd-has-text-rss",
-      "fa_type": "fas",
-      "fa_icon": "fa-rss",
-      "title": "Blog"
-    }
-  ],
-  "other_items": [
-    {
-      "id": "templates",
-      "color": "has-text-info",
-      "fa_type": "fas",
-      "fa_icon": "fa-code",
-      "title": "Templates"
-    },
-    {
-      "id": "recipes",
-      "color": "has-text-purple",
-      "fa_type": "fas",
-      "fa_icon": "fa-utensils",
-      "title": "Recipes"
-    },
-  ],
-  "more_items": [
-    {
-      "id": "bulma-start",
-      "color": "success",
-      "fa_type": "fas",
-      "fa_icon": "fa-rocket",
-      "title": "Bulma start",
-      "description": "A tiny npm package to get started"
-    },
-    {
-      "id": "made-with-bulma",
-      "color": "primary",
-      "fa_type": "fas",
-      "fa_icon": "fa-certificate",
-      "title": "Made with Bulma",
-      "description": "The official community badge"
-    },
-    {
-      "id": "alternative-to-bootstrap",
-      "color": "bootstrap",
-      "fa_type": "fas",
-      "fa_icon": "fa-exchange-alt",
-      "title": "Coming from Bootstrap",
-      "description": "See how Bulma is an alternative to Bootstrap"
-    },
-    {
-      "id": "backers",
-      "color": "patreon",
-      "fa_type": "fab",
-      "fa_icon": "fa-patreon",
-      "title": "Patreon and GitHub backers",
-      "description": "Everyone who is supporting Bulma"
-    },
-    {
-      "id": "extensions",
-      "color": "danger",
-      "fa_type": "fas",
-      "fa_icon": "fa-plug",
-      "title": "Extensions",
-      "description": "Side projects to enhance Bulma",
-    }
-  ]
-}
--- a/docs/_data/links.json
+++ b/docs/_data/links.json
--- a/docs/_data/love.json
+++ b/docs/_data/love.json
--- a/docs/_data/meta.json
+++ b/docs/_data/meta.json
@ -2,11 +2,11 @@
  "title": "Bulma: Free, open source, and modern CSS framework based on Flexbox",
  "description": "Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.",
  "documentation": "/documentation",
-  "download": "https://github.com/jgthms/bulma/releases/download/0.9.4/bulma-0.9.4.zip",
-  "release_notes": "https://github.com/jgthms/bulma/releases/tag/0.9.4",
+  "download": "https://github.com/jgthms/bulma/releases/download/1.0.2/bulma-1.0.2.zip",
+  "release_notes": "https://github.com/jgthms/bulma/releases/tag/1.0.2",
  "github": "https://github.com/jgthms/bulma",
  "twitter": "https://twitter.com/jgthms",
-  "version": "0.9.4",
+  "version": "1.0.2",
  "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
  "book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
  "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf",
--- a/docs/_data/palette.json
+++ b/docs/_data/palette.json
@ -0,0 +1,29 @@
+[
+  "",
+  "-00",
+  "-05",
+  "-10",
+  "-15",
+  "-20",
+  "-25",
+  "-30",
+  "-35",
+  "-40",
+  "-45",
+  "-50",
+  "-55",
+  "-60",
+  "-65",
+  "-70",
+  "-75",
+  "-80",
+  "-85",
+  "-90",
+  "-95",
+  "-100",
+  "-light",
+  "-dark",
+  "-soft",
+  "-bold",
+  "-on-scheme"
+]
--- a/docs/_data/sizes-list.json
+++ b/docs/_data/sizes-list.json
@ -0,0 +1,30 @@
+[
+  {
+    "name": "size-1",
+    "value": "3rem"
+  },
+  {
+    "name": "size-2",
+    "value": "2.5rem"
+  },
+  {
+    "name": "size-3",
+    "value": "2rem"
+  },
+  {
+    "name": "size-4",
+    "value": "1.5rem"
+  },
+  {
+    "name": "size-5",
+    "value": "1.25rem"
+  },
+  {
+    "name": "size-6",
+    "value": "1rem"
+  },
+  {
+    "name": "size-7",
+    "value": "0.75rem"
+  }
+]
--- a/docs/_data/sponsors.json
+++ b/docs/_data/sponsors.json
@ -1,907 +1,12 @@
 {
  "by_id": {
-    "monovm": {
-      "name": "monovm",
-      "url": "https://monovm.com/",
-      "textOnly": "VPS Hosting",
-      "width": "108",
-      "height": "40"
-    },
-    "tutlance": {
-      "name": "tutlance",
-      "url": "https://tutlance.com/",
-      "width": "135",
-      "height": "42",
-      "follow": true
-    },
-    "themeisle": {
-      "name": "themeisle",
-      "url": "https://themeisle.com/",
-      "width": "160",
-      "height": "40"
-    },
-    "tooltwist": {
-      "name": "tooltwist",
-      "url": "http://tooltwist.com/",
-      "width": "160",
-      "height": "51"
-    },
-    "dontpayfull": {
-      "name": "DontPayFull",
-      "url": "https://www.dontpayfull.com/",
-      "blend": true,
-      "width": "120",
-      "height": "60"
-    },
-    "devsquad": {
-      "name": "DevSquad",
-      "url": "https://devsquad.com/",
-      "width": "140",
-      "height": "31"
-    },
-    "hebergeurweb": {
-      "name": "HebergeurWeb.ca",
-      "url": "https://www.hebergeurweb.ca/",
-      "width": "41",
-      "height": "40"
-    },
-    "vpsserver": {
-      "name": "VPS Server",
-      "url": "https://www.vpsserver.com/",
-      "width": "125",
-      "height": "31"
-    },
-    "yakaz": {
-      "name": "Yakaz",
-      "url": "https://yakaz.com/",
-      "width": "100",
-      "height": "50",
-      "follow": true
-    },
-    "usave": {
-      "name": "usave",
-      "url": "https://usave.co.uk/utilities/broadband/",
-      "title": "Compare broadband deals with usave.co.uk",
-      "width": "106",
-      "height": "25.5"
-    },
-    "craft": {
-      "name": "Craft Resumes",
-      "url": "https://craftresumes.com/",
-      "title": "Craft Resume writing services",
-      "width": "76",
-      "height": "55",
-      "follow": true
-    },
-    "paperleaf": {
-      "name": "Paper Leaf",
-      "url": "https://paperleaf.ca/",
-      "title": "Canadian paper writers",
-      "width": "135",
-      "height": "38",
-      "follow": true
-    },
-    "buildthis": {
-      "name": "BuildThis",
-      "url": "https://www.buildthis.io/",
-      "title": "BuildThis",
-      "width": "125",
-      "height": "40",
-      "follow": true
-    },
-    "papersowl": {
-      "name": "PapersOwl",
-      "url": "https://papersowl.com/write-my-research-paper",
-      "title": "write my essay please",
-      "width": "192",
-      "height": "48",
-      "follow": true
-    },
-    "sparheld": {
-      "name": "Sparheld",
-      "url": "https://www.sparheld.de/",
-      "title": "Sparheld",
-      "width": "157",
-      "height": "41"
-    },
-    "bid4papers": {
-      "name": "Bid4Papers",
-      "url": "https://bid4papers.com/write-my-essay.html",
-      "title": "Bid4Papers",
-      "width": "136",
-      "height": "24"
-    },
-    "writersperhour": {
-      "name": "Writers Per Hour",
-      "url": "https://writersperhour.com/write-my-paper",
-      "title": "Writers Per Hour",
-      "width": "105",
-      "height": "45"
-    },
-    "promocodewatch": {
-      "name": "PromoCodeWatch",
-      "url": "https://www.promocodewatch.com/",
-      "title": "PromoCodeWatch",
-      "width": "125",
-      "height": "35"
-    },
-    "searchpromocodes": {
-      "name": "SearchPromoCodes",
-      "url": "https://searchpromocodes.com/",
-      "title": "SearchPromoCodes",
-      "width": "150",
-      "height": "62"
-    },
-    "clothingric": {
-      "name": "ClothingRIC",
-      "url": "https://www.clothingric.com/",
-      "title": "ClothingRIC",
-      "width": "160",
-      "height": "40",
-      "follow": true
-    },
-    "edubirdie": {
-      "name": "edubirdie",
-      "url": "https://edubirdie.com/",
-      "title": "Edubirdie offers writing services",
-      "width": "161",
-      "height": "27",
-      "follow": true
-    },
-    "edusson": {
-      "name": "edusson",
-      "url": "https://edusson.com/write-my-research-paper",
-      "title": "write my research paper",
-      "width": "104",
-      "height": "20",
-      "follow": true
-    },
-    "emucoupon": {
-      "name": "emucoupon",
-      "url": "https://www.emucoupon.com/",
-      "title": "Leading Coupon Website for Aussies",
-      "width": "120",
-      "height": "30",
-      "follow": true
-    },
-    "namobot": {
-      "name": "namobot",
-      "url": "https://www.namobot.com/coupon/",
-      "title": "Free Coupons for Domains, Hosting & VPN",
-      "width": "120",
-      "height": "30",
-      "follow": true
-    },
-    "firesticktricks": {
-      "name": "firesticktricks",
-      "url": "https://www.firesticktricks.com/",
-      "title": "firesticktricks",
-      "width": "120",
-      "height": "30"
-    },
-    "airtract": {
-      "name": "AirTract",
-      "url": "https://www.airtract.com/",
-      "title": "AirTract",
-      "width": "150",
-      "height": "42",
-      "follow": true
-    },
-    "realtimecommunications": {
-      "name": "Real Time Communications",
-      "url": "https://www.realtimecommunicationsworld.com/",
-      "title": "Real Time Communications World",
-      "width": "120",
-      "height": "57",
-      "follow": true
-    },
-    "polygon": {
-      "name": "Polygon.io",
-      "url": "https://polygon.io/",
-      "title": "Stock APIs",
-      "width": "150",
-      "height": "50",
-      "follow": true
-    },
-    "cooltechzone": {
-      "name": "cooltechzone",
-      "url": "https://cooltechzone.com/vpn-for-torrenting",
-      "title": "VPNs for Torrenting",
-      "width": "160",
-      "height": "52"
-    },
-    "bonusfinder": {
-      "name": "bonusfinder",
-      "url": "https://www.bonus.ca/",
-      "title": "Bonusfinder",
-      "width": "160",
-      "height": "34"
-    },
-    "sanyodigital": {
-      "name": "sanyodigital",
-      "url": "https://sanyodigital.com/",
-      "title": "Sanyo Digital",
-      "width": "160",
-      "height": "33"
-    },
-    "coupons4printing": {
-      "name": "coupons4printing",
-      "url": "https://www.coupons4printing.com/",
-      "title": "Coupons For Printing",
-      "width": "60",
-      "height": "60",
-      "follow": true
-    },
-    "inkoop": {
-      "name": "inkoop",
-      "url": "https://www.inkoop.io/",
-      "title": "Inkoop - Website/App development company",
-      "width": "150",
-      "height": "43",
-      "noopener": true
-    },
-    "vpnreview": {
-      "name": "vpnreview",
-      "url": "https://vpn-review.com/netflix-vpn",
-      "title": "vpn for netflix",
-      "width": "137",
-      "height": "85"
-    },
-    "dfds": {
-      "name": "dfds",
-      "url": "https://www.dietfooddeliveryservice.com/",
-      "title": "Diet Food Delivery Service",
-      "width": "60",
-      "height": "60",
-      "follow": true
-    },
-    "rajbet": {
-      "name": "rajbet",
-      "url": "https://raj.bet/",
-      "title": "Online Casino",
-      "width": "128",
-      "height": "50",
-      "follow": true
-    },
-    "gamblizard": {
-      "name": "gamblizard",
-      "url": "https://gamblizard.com/",
-      "title": "Gamblizard",
-      "width": "182",
-      "height": "30",
-      "follow": true
-    },
-    "casinofiables": {
-      "name": "Casino Fiables",
-      "url": "https://casinofiables.com/",
-      "title": "Casino Fiables",
-      "width": "150",
-      "height": "24",
-      "follow": true
-    },
-    "123calendars": {
-      "name": "123Calendars",
-      "url": "https://www.123calendars.com/2023-calendar.html",
-      "title": "2023 Calendar",
-      "width": "125",
-      "height": "28",
-      "follow": true
-    },
-    "quickbookstoolhub": {
-      "name": "quickbookstoolhub",
-      "url": "https://quickbookstoolhub.com/",
-      "title": "Quickbooks Tool Hub",
-      "width": "64",
-      "height": "64"
-    },
-    "pondr": {
-      "name": "pondr",
-      "url": "https://runpondr.com/",
-      "title": "Pondr Idea Management",
-      "width": "126",
-      "height": "38",
-      "follow": true
-    },
-    "aussiecasinohex": {
-      "name": "aussiecasinohex",
-      "url": "https://aussiecasinohex.com/",
-      "title": "AussieCasinoHEX.com",
-      "width": "170",
-      "height": "60",
-      "follow": true
-    },
-    "poprey": {
-      "name": "poprey",
-      "url": "https://poprey.com/",
-      "title": "",
-      "width": "69",
-      "height": "69"
-    },
-    "leoboost": {
-      "name": "leoboost",
-      "url": "https://www.leoboost.com/buy-instagram-followers",
-      "title": "Buy Instagram followers",
-      "width": "150",
-      "height": "50"
-    },
-    "slotbar888": {
-      "name": "slotbar888",
-      "url": "https://www.slotbar888.com/",
-      "title": "slotbar888",
-      "width": "76",
-      "height": "60"
-    },
-    "slot-xo888": {
-      "name": "slot-xo888",
-      "url": "https://slot-xo888.com/",
-      "title": "slot-xo888",
-      "width": "61",
-      "height": "33"
-    },
-    "ufa96": {
-      "name": "ufa96",
-      "url": "https://ufa96bet.com/",
-      "title": "ufa96",
-      "width": "107",
-      "height": "32"
-    },
-    "kasynohex": {
-      "name": "kasynohex",
-      "url": "https://polskiekasynohex.org/",
-      "title": "KasynoHEX Polska",
-      "width": "128",
-      "height": "45",
-      "follow": true
-    },
-    "betrouwbaar-casino": {
-      "name": "betrouwbaar-casino",
-      "url": "https://betrouwbaar-casino.be/",
-      "title": "online casino belgie",
-      "width": "150",
-      "height": "50"
-    },
-    "onlinecasinohex": {
-      "name": "onlinecasinohex",
-      "url": "https://onlinecasinohex.ca/",
-      "title": "OnlineCasinoHEX Canada",
-      "width": "150",
-      "height": "50",
-      "follow": true
-    },
-    "anbefalt": {
-      "name": "anbefalt",
-      "url": "https://anbefaltcasino.com/",
-      "title": "anbefalt",
-      "width": "192",
-      "height": "32"
-    },
-    "cryptocasinos": {
-      "name": "cryptocasinos",
-      "url": "https://cryptocasinos.com/",
-      "title": "cryptocasinos",
-      "width": "150",
-      "height": "48",
-      "follow": true
-    },
-    "gambledex": {
-      "name": "gambledex",
-      "url": "https://www.gambledex.com/",
-      "title": "gambledex",
-      "width": "150",
-      "height": "26"
-    },
-    "wagerdex": {
-      "name": "wagerdex",
-      "url": "https://www.wagerdex.com/",
-      "title": "wagerdex",
-      "width": "150",
-      "height": "30"
-    },
-    "writepaperfor": {
-      "name": "writepaperfor",
-      "url": "http://writepaperfor.me/",
-      "title": "Write my paper for me",
-      "width": "150",
-      "height": "30",
-      "follow": true
-    },
-    "reddogcasino": {
-      "name": "reddogcasino",
-      "url": "https://reddogcasino.com/en/games/blackjack",
-      "title": "Red Dog Blackjack for US players",
-      "width": "150",
-      "height": "60",
-      "follow": true
-    },
-    "rapidessay": {
-      "name": "rapidessay",
-      "url": "https://rapidessay.com/",
-      "title": "Rapid Essay",
-      "width": "92",
-      "height": "62"
-    },
-    "nettikasinot": {
-      "name": "nettikasinot",
-      "url": "https://www.nettikasinot.org/",
-      "title": "Nettikasinot",
-      "width": "175",
-      "height": "33"
-    },
-    "gamblescope": {
-      "name": "gamblescope",
-      "url": "https://gamblescope.com/",
-      "title": "Gamblescope",
-      "width": "100",
-      "height": "54"
-    },
-    "quickbooksfiledoctor": {
-      "name": "Quickbooks File Doctor",
-      "url": "https://quickbooksfiledoctor.co/",
-      "title": "Quickbooks File Doctor",
-      "width": "157",
-      "height": "56"
-    },
-    "speedypaper": {
-      "name": "speedypaper",
-      "url": "https://speedypaper.com/",
-      "title": "essay writer online",
-      "width": "125",
-      "height": "41"
-    },
-    "idealecasinos": {
-      "name": "idealecasinos",
-      "url": "https://idealecasinos.nl/",
-      "title": "idealecasinos",
-      "width": "150",
-      "height": "60"
-    },
-    "casinotopitaly": {
-      "name": "casinotopitaly",
-      "url": "https://casinotopitaly.com/casino-microgaming/",
-      "title": "https://casinotopitaly.com/casino-microgaming/",
-      "width": "167",
-      "height": "42",
-      "follow": true
-    },
-    "inkedin": {
-      "name": "inkedin",
-      "url": "https://inkedin.com/no-deposit-casino-sites/",
-      "title": "https://inkedin.com/no-deposit-casino-sites/",
-      "width": "125",
-      "height": "38",
-      "follow": true
-    },
-    "ozzytyres": {
-      "name": "ozzytyres",
-      "url": "https://www.ozzytyres.com.au/news/ford-falcon-au-mag-wheels",
-      "title": "falcon wheels",
-      "width": "64",
-      "height": "64",
-      "follow": true
-    },
-    "nongamstopwager": {
-      "name": "nongamstopwager",
-      "url": "https://www.nongamstopwager.com",
-      "title": "NonGamStopWager.com",
-      "width": "139",
-      "height": "51",
-      "follow": true
-    },
-    "pmibet": {
-      "name": "pmibet",
-      "url": "https://parimatch.in/en/cricket/live",
-      "title": "check the highest cricket live rates",
-      "width": "180",
-      "height": "80",
-      "follow": true
-    },
-    "qberror": {
-      "name": "qberror",
-      "url": "https://qberror.com/",
-      "title": "qberror",
-      "width": "187",
-      "height": "69",
-      "follow": true
-    },
-    "cfiblog": {
-      "name": "cfiblog",
-      "url": "https://cfi-blog.org/",
-      "title": "cfi",
-      "width": "48",
-      "height": "48",
-      "follow": true
-    },
-    "casinoshunter": {
-      "name": "casinoshunter",
-      "url": "https://casinoshunter.com/online-casinos/",
-      "title": "Best Online Casinos Canada",
-      "width": "150",
-      "height": "50",
-      "follow": true
-    },
-    "listcasino": {
-      "name": "list.casino",
-      "url": "https://list.casino/pay-n-play/",
-      "title": "Best Online Casinos Canada",
-      "width": "165",
-      "height": "45"
-    },
-    "flyclipart": {
-      "name": "flyclipart",
-      "url": "https://flyclipart.com/",
-      "title": "flyclipart",
-      "width": "150",
-      "height": "43",
-      "follow": true
-    },
-    "slotsempire": {
-      "name": "slotsempire",
-      "url": "https://slotsempire.com/",
-      "title": "empire of slots online",
-      "width": "120",
-      "height": "39"
-    },
-    "nycjackets": {
-      "name": "nycjackets",
-      "url": "https://www.nycjackets.com/",
-      "title": "nycjackets",
-      "width": "120",
-      "height": "54"
-    },
-    "theleathercity": {
-      "name": "theleathercity",
-      "url": "https://www.theleathercity.com/",
-      "title": "theleathercity",
-      "width": "178",
-      "height": "30"
-    },
-    "realcasinoscanada": {
-      "name": "realcasinoscanada",
-      "url": "https://realcasinoscanada.com/",
-      "title": "realcasinoscanada",
-      "width": "210",
-      "height": "64"
-    },
-    "jrop": {
-      "name": "jrop",
-      "url": "https://www.jrop.com/services/towing/",
-      "title": "jrop",
-      "width": "120",
-      "height": "65"
-    },
-    "cusl": {
-      "name": "cusl",
-      "url": "https://www.casino-utan-svensk-licens.net/",
-      "title": "cusl",
-      "width": "160",
-      "height": "70"
-    },
-    "boostlikes": {
-      "name": "boostlikes",
-      "url": "https://boostlikes.co/buy-tiktok-followers-likes/",
-      "title": "Buy tiktok followers UK",
-      "width": "226",
-      "height": "52"
-    },
-    "casinozondercruks": {
-      "name": "casinozondercruks",
-      "url": "https://casinozondercruks.net/",
-      "title": "casinozondercruks",
-      "width": "145",
-      "height": "48"
-    },
-    "xoo": {
-      "name": "xoo",
-      "url": "https://xoo.nl/",
-      "title": "Xoo Sieraden Kopen",
-      "width": "75",
-      "height": "32"
-    },
-    "old-newbitcoincasinos": {
-      "name": "newbitcoincasinos",
-      "url": "https://newbitcoincasinos.com/",
-      "title": "newbitcoincasinos",
-      "width": "60",
-      "height": "64"
-    },
-    "casinoutansvensklicens": {
-      "name": "casinoutansvensklicens",
-      "url": "https://casinoutansvensklicens.co/",
-      "title": "casinoutansvensklicens",
-      "width": "98",
-      "height": "56"
-    },
-    "newbitcoincasinos": {
-      "name": "newbitcoincasinos",
-      "url": "https://newbitcoincasinos.com/",
-      "title": "newbitcoincasinos",
-      "width": "98",
-      "height": "56"
-    },
-    "casinoenlineahex": {
-      "name": "casinoenlineahex",
-      "url": "https://casinoenlineahex.com/casinos-online/peru-pe/",
-      "title": "casinoenlineahex",
-      "width": "158",
-      "height": "53"
-    },
-    "newcasinobonuses": {
-      "name": "newcasinobonuses",
-      "url": "https://newcasinobonuses.co.uk/",
-      "title": "newcasinobonuses",
-      "width": "190",
-      "height": "63"
-    },
-    "everycasinobonus": {
-      "name": "everycasinobonus",
-      "url": "https://everycasinobonus.com/",
-      "title": "everycasinobonus",
-      "width": "290",
-      "height": "46"
-    },
-    "kasinohai": {
-      "name": "kasinohai",
-      "url": "https://www.kasinohai.com/",
-      "title": "kasinohai",
-      "width": "125",
-      "height": "50"
-    },
-    "limeup": {
-      "name": "limeup",
-      "url": "https://limeup.io/",
-      "title": "limeup",
-      "width": "140",
-      "height": "61"
-    },
-    "y-106": {
-      "name": "y-106",
-      "url": "https://www.y-106.com/",
-      "title": "Y-106.com",
-      "width": "150",
-      "height": "73"
-    },
-    "surebet": {
-      "name": "surebet",
-      "url": "https://www.sure.bet/casinos-not-on-gamstop/",
-      "title": "surebet",
-      "width": "48",
-      "height": "47"
-    },
-    "casinoutanlicens": {
-      "name": "casinoutanlicens",
-      "url": "https://www.casinoutanlicens.io/",
-      "title": "casinoutanlicens",
-      "width": "190",
-      "height": "60"
-    },
-    "celltrackingapps": {
-      "name": "celltrackingapps",
-      "url": "https://celltrackingapps.com/",
-      "title": "Phone Trackers",
-      "width": "125",
-      "height": "51"
-    },
-    "refermate": {
-      "name": "refermate",
-      "url": "https://refermate.com/",
-      "title": "refermate",
-      "width": "138",
-      "height": "45"
-    },
-    "kingcasinobonus": {
-      "name": "kingcasinobonus",
-      "url": "https://kingcasinobonus.uk/",
-      "title": "KingCasinoBonus",
-      "width": "100",
-      "height": "60"
-    },
-    "gamblecritic": {
-      "name": "gamblecritic",
-      "url": "https://gamblecritic.com/",
-      "title": "gamblecritic",
-      "width": "192",
-      "height": "43"
-    },
-    "uudetkasinot": {
-      "name": "uudetkasinot",
-      "url": "https://www.uudetkasinot.com/",
-      "title": "uudet nettikasinot",
-      "width": "160",
-      "height": "70"
-    },
-    "casinoburst": {
-      "name": "casinoburst",
-      "url": "https://casinoburst.com/casino-utan-licens/",
-      "title": "casino utan svensk licens",
-      "width": "160",
-      "height": "70"
-    },
-    "playcasinoscanada": {
-      "name": "playcasinoscanada",
-      "url": "https://playcasinoscanada.com/casino-bonuses/birthday-bonuses/",
-      "title": "playcasinoscanada",
-      "width": "190",
-      "height": "62"
-    },
-    "noneedtostudy": {
-      "name": "noneedtostudy",
-      "url": "https://www.noneedtostudy.com/",
-      "title": "NoNeedToStudy.com - get help from expert tutors.",
-      "width": "206",
-      "height": "32"
-    },
-    "stayatcasinos": {
-      "name": "stayatcasinos",
-      "url": "https://stayatcasinos.com/",
-      "title": "Best Sports Betting Sites UK",
-      "width": "280",
-      "height": "68"
-    },
-    "bluechip": {
-      "name": "bluechip",
-      "url": "https://bluechip.io/",
-      "title": "Indian online casino",
-      "width": "160",
-      "height": "80"
-    },
-    "backlinksrocket": {
-      "name": "backlinksrocket",
-      "url": "https://www.backlinksrocket.com/",
-      "title": "backlinksrocket",
-      "width": "160",
-      "height": "80"
-    },
-    "tradingwolf": {
-      "name": "tradingwolf",
-      "url": "https://www.tradingwolf.com/",
-      "title": "Trading Wolf",
-      "width": "150",
-      "height": "29"
-    },
-    "1xbet": {
-      "name": "1xbet",
-      "url": "https://in.1xbet.com/line/cricket",
-      "title": "online cricket betting",
-      "width": "200",
-      "height": "60"
-    },
-    "nodepositpokies": {
-      "name": "nodepositpokies",
-      "url": "https://nodepositpokies.com/",
-      "title": "nodepositpokies",
-      "width": "200",
-      "height": "40"
-    },
-    "codeless": {
-      "name": "codeless",
-      "url": "https://codeless.co/",
-      "title": "codeless",
-      "width": "156",
-      "height": "48"
-    },
-    "utansvensklicens": {
-      "name": "utansvensklicens",
-      "url": "https://utansvensklicens.casino/",
-      "title": "casino utan svensk licens",
-      "width": "89",
-      "height": "48"
-    },
-    "testarna": {
-      "name": "testarna",
-      "url": "https://www.testarna.se/casino/utan-svensk-licens/utlandska/",
-      "title": "Testarna",
-      "width": "196",
-      "height": "45"
-    },
-    "sportonlinebetting": {
-      "name": "sportonlinebetting",
-      "url": "https://sportonlinebetting.net/review/agent-no-wager-casino-review/",
-      "title": "Agent No Wager Casino",
-      "width": "89",
-      "height": "48"
-    },
-    "pillarwm": {
-      "name": "pillarwm",
-      "url": "https://pillarwm.com/financial-advisor/top-financial-advisors-near-me/",
-      "title": "Pillar Wealth",
-      "width": "150",
-      "height": "53"
-    },
-    "istartips": {
-      "name": "istartips",
-      "url": "https://istar.tips/",
-      "title": "istartips",
-      "width": "173",
-      "height": "48"
-    },
-    "4rabet": {
-      "name": "4rabet",
-      "url": "https://4rabet.com/live/cricket",
-      "title": "online cricket betting",
-      "width": "196",
-      "height": "33"
-    },
-    "new-onlinecasinos": {
-      "name": "new-onlinecasinos",
-      "url": "https://new-onlinecasinos.com/",
-      "title": "New Online Casinos",
-      "width": "196",
-      "height": "39"
-    },
-    "casinoszondercruks": {
-      "name": "casinoszondercruks",
-      "url": "https://casinoszondercruks.com/",
-      "title": "casinoszondercruks",
-      "width": "48",
-      "height": "48"
-    },
-    "casinozonderregistratie": {
-      "name": "casinozonderregistratie",
-      "url": "https://casinozonderregistratie.net/",
-      "title": "No Account Casino",
-      "width": "196",
-      "height": "42"
-    },
-    "nongamstopcasinos": {
-      "name": "nongamstopcasinos",
-      "url": "https://nongamstopcasinos.net/",
-      "title": "nongamstopcasinos",
-      "width": "150",
+    "slotsandluck": {
+      "name": "slotsandluck",
+      "url": "https://www.slotsandluck.com/",
+      "title": "SLots&Luck",
+      "width": "112",
      "height": "48"
    }
  },
-  "home": [
-    "themeisle",
-    "vpsserver",
-    "writersperhour",
-    "clothingric",
-    "emucoupon",
-    "namobot",
-    "realtimecommunications",
-    "polygon",
-    "backlinksrocket",
-    "123calendars",
-    "quickbookstoolhub",
-    "kasynohex",
-    "betrouwbaar-casino",
-    "reddogcasino",
-    "rapidessay",
-    "casinotopitaly",
-    "nettikasinot",
-    "inkedin",
-    "cfiblog",
-    "casinoshunter",
-    "papersowl",
-    "listcasino",
-    "slotsempire",
-    "realcasinoscanada",
-    "cusl",
-    "casinoutansvensklicens",
-    "casinozondercruks",
-    "nodepositpokies",
-    "casinoenlineahex",
-    "kasinohai",
-    "surebet",
-    "celltrackingapps",
-    "refermate",
-    "kingcasinobonus",
-    "uudetkasinot",
-    "casinoburst",
-    "playcasinoscanada",
-    "noneedtostudy",
-    "bluechip",
-    "tradingwolf",
-    "codeless",
-    "utansvensklicens",
-    "testarna",
-    "sportonlinebetting",
-    "pillarwm",
-    "istartips",
-    "4rabet",
-    "new-onlinecasinos",
-    "casinoszondercruks",
-    "casinozonderregistratie",
-    "nongamstopcasinos"
-  ],
-  "footer": ["polygon"]
+  "footer": ["slotsandluck"]
 }
--- a/docs/_data/variables/base/animations.json
+++ b/docs/_data/variables/base/animations.json
@ -0,0 +1,4 @@
+{
+  "sass-vars": [],
+  "css-vars": []
+}
--- a/docs/_data/variables/base/generic.json
+++ b/docs/_data/variables/base/generic.json
@ -1,167 +1,222 @@
 {
-  "by_name": {
-    "$body-background-color": {
-      "name": "$body-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+  "sass-vars": [
+    {
+      "name": "body-background-color",
+      "value": "var(--bulma-scheme-main)",
+      "css-var": "body-background-color"
    },
-    "$body-size": {
-      "name": "$body-size",
-      "value": "16px",
-      "type": "size"
+    {
+      "name": "body-size",
+      "value": "1em",
+      "css-var": "body-size"
    },
-    "$body-min-width": {
-      "name": "$body-min-width",
+    {
+      "name": "body-min-width",
      "value": "300px",
-      "type": "size"
+      "css-var": "body-min-width"
    },
-    "$body-rendering": {
-      "name": "$body-rendering",
+    {
+      "name": "body-rendering",
      "value": "optimizeLegibility",
-      "type": "keyword"
+      "css-var": "body-rendering"
    },
-    "$body-family": {
-      "name": "$body-family",
-      "value": "$family-primary",
-      "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"
+    {
+      "name": "body-family",
+      "value": "var(--bulma-family-primary)",
+      "css-var": "body-family"
    },
-    "$body-overflow-x": {
-      "name": "$body-overflow-x",
+    {
+      "name": "body-overflow-x",
      "value": "hidden",
-      "type": "string"
+      "css-var": "body-overflow-x"
    },
-    "$body-overflow-y": {
-      "name": "$body-overflow-y",
+    {
+      "name": "body-overflow-y",
      "value": "scroll",
-      "type": "string"
+      "css-var": "body-overflow-y"
    },
-    "$body-color": {
-      "name": "$body-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "body-color",
+      "value": "var(--bulma-text)",
+      "css-var": "body-color"
    },
-    "$body-font-size": {
-      "name": "$body-font-size",
+    {
+      "name": "body-font-size",
      "value": "1em",
-      "type": "size"
+      "css-var": "body-font-size"
    },
-    "$body-weight": {
-      "name": "$body-weight",
-      "value": "$weight-normal",
-      "type": "variable",
-      "computed_type": "font-weight",
-      "computed_value": "400"
+    {
+      "name": "body-weight",
+      "value": "var(--bulma-weight-normal)",
+      "css-var": "body-weight"
    },
-    "$body-line-height": {
-      "name": "$body-line-height",
+    {
+      "name": "body-line-height",
      "value": "1.5",
-      "type": "unitless"
+      "css-var": "body-line-height"
    },
-    "$code-family": {
-      "name": "$code-family",
-      "value": "$family-code",
-      "type": "variable",
-      "computed_type": "font-family",
-      "computed_value": "monospace"
+    {
+      "name": "code-family",
+      "value": "var(--bulma-family-code)",
+      "css-var": "code-family"
    },
-    "$code-padding": {
-      "name": "$code-padding",
+    {
+      "name": "code-padding",
      "value": "0.25em 0.5em 0.25em",
-      "type": "size"
+      "css-var": "code-padding"
    },
-    "$code-weight": {
-      "name": "$code-weight",
+    {
+      "name": "code-weight",
      "value": "normal",
-      "type": "font-weight"
+      "css-var": "code-weight"
    },
-    "$code-size": {
-      "name": "$code-size",
+    {
+      "name": "code-size",
      "value": "0.875em",
-      "type": "size"
+      "css-var": "code-size"
    },
-    "$small-font-size": {
-      "name": "$small-font-size",
+    {
+      "name": "small-font-size",
      "value": "0.875em",
-      "type": "size"
+      "css-var": "small-font-size"
    },
-    "$hr-background-color": {
-      "name": "$hr-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "hr-background-color",
+      "value": "var(--bulma-background)",
+      "css-var": "hr-background-color"
    },
-    "$hr-height": {
-      "name": "$hr-height",
+    {
+      "name": "hr-height",
      "value": "2px",
-      "type": "size"
+      "css-var": "hr-height"
    },
-    "$hr-margin": {
-      "name": "$hr-margin",
+    {
+      "name": "hr-margin",
      "value": "1.5rem 0",
-      "type": "size"
+      "css-var": "hr-margin"
    },
-    "$strong-color": {
-      "name": "$strong-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "strong-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "strong-color"
    },
-    "$strong-weight": {
-      "name": "$strong-weight",
-      "value": "$weight-bold",
-      "type": "variable",
-      "computed_type": "font-weight",
-      "computed_value": "700"
+    {
+      "name": "strong-weight",
+      "value": "var(--bulma-weight-semibold)",
+      "css-var": "strong-weight"
    },
-    "$pre-font-size": {
-      "name": "$pre-font-size",
+    {
+      "name": "pre-font-size",
      "value": "0.875em",
-      "type": "size"
+      "css-var": "pre-font-size"
    },
-    "$pre-padding": {
-      "name": "$pre-padding",
+    {
+      "name": "pre-padding",
      "value": "1.25rem 1.5rem",
-      "type": "size"
+      "css-var": "pre-padding"
    },
-    "$pre-code-font-size": {
-      "name": "$pre-code-font-size",
+    {
+      "name": "pre-code-font-size",
      "value": "1em",
-      "type": "size"
+      "css-var": "pre-code-font-size"
    }
-  },
-  "list": [
-    "$body-background-color",
-    "$body-size",
-    "$body-min-width",
-    "$body-rendering",
-    "$body-family",
-    "$body-overflow-x",
-    "$body-overflow-y",
-    "$body-color",
-    "$body-font-size",
-    "$body-weight",
-    "$body-line-height",
-    "$code-family",
-    "$code-padding",
-    "$code-weight",
-    "$code-size",
-    "$small-font-size",
-    "$hr-background-color",
-    "$hr-height",
-    "$hr-margin",
-    "$strong-color",
-    "$strong-weight",
-    "$pre-font-size",
-    "$pre-padding",
-    "$pre-code-font-size"
  ],
-  "file_path": "base/generic.sass"
+  "css-vars": [
+    {
+      "name": "body-background-color",
+      "value": "var(--bulma-scheme-main)"
+    },
+    {
+      "name": "body-size",
+      "value": "1em"
+    },
+    {
+      "name": "body-min-width",
+      "value": "300px"
+    },
+    {
+      "name": "body-rendering",
+      "value": "optimizeLegibility"
+    },
+    {
+      "name": "body-family",
+      "value": "var(--bulma-family-primary)"
+    },
+    {
+      "name": "body-overflow-x",
+      "value": "hidden"
+    },
+    {
+      "name": "body-overflow-y",
+      "value": "scroll"
+    },
+    {
+      "name": "body-color",
+      "value": "var(--bulma-text)"
+    },
+    {
+      "name": "body-font-size",
+      "value": "1em"
+    },
+    {
+      "name": "body-weight",
+      "value": "var(--bulma-weight-normal)"
+    },
+    {
+      "name": "body-line-height",
+      "value": "1.5"
+    },
+    {
+      "name": "code-family",
+      "value": "var(--bulma-family-code)"
+    },
+    {
+      "name": "code-padding",
+      "value": "0.25em 0.5em 0.25em"
+    },
+    {
+      "name": "code-weight",
+      "value": "normal"
+    },
+    {
+      "name": "code-size",
+      "value": "0.875em"
+    },
+    {
+      "name": "small-font-size",
+      "value": "0.875em"
+    },
+    {
+      "name": "hr-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "hr-height",
+      "value": "2px"
+    },
+    {
+      "name": "hr-margin",
+      "value": "1.5rem 0"
+    },
+    {
+      "name": "strong-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "strong-weight",
+      "value": "var(--bulma-weight-semibold)"
+    },
+    {
+      "name": "pre-font-size",
+      "value": "0.875em"
+    },
+    {
+      "name": "pre-padding",
+      "value": "1.25rem 1.5rem"
+    },
+    {
+      "name": "pre-code-font-size",
+      "value": "1em"
+    }
+  ]
 }
--- a/docs/_data/variables/base/minireset.json
+++ b/docs/_data/variables/base/minireset.json
@ -0,0 +1,4 @@
+{
+  "sass-vars": [],
+  "css-vars": []
+}
--- a/docs/_data/variables/base/skeleton.json
+++ b/docs/_data/variables/base/skeleton.json
@ -0,0 +1,51 @@
+{
+  "sass-vars": [
+    {
+      "name": "skeleton-background",
+      "value": "var(--bulma-border)",
+      "css-var": "skeleton-background"
+    },
+    {
+      "name": "skeleton-radius",
+      "value": "var(--bulma-radius-small)",
+      "css-var": "skeleton-radius"
+    },
+    {
+      "name": "skeleton-block-min-height",
+      "value": "4.5em",
+      "css-var": "skeleton-block-min-height"
+    },
+    {
+      "name": "skeleton-lines-gap",
+      "value": "0.75em",
+      "css-var": "skeleton-lines-gap"
+    },
+    {
+      "name": "skeleton-line-height",
+      "value": "0.75em",
+      "css-var": "skeleton-line-height"
+    }
+  ],
+  "css-vars": [
+    {
+      "name": "skeleton-background",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "skeleton-radius",
+      "value": "var(--bulma-radius-small)"
+    },
+    {
+      "name": "skeleton-block-min-height",
+      "value": "4.5em"
+    },
+    {
+      "name": "skeleton-lines-gap",
+      "value": "0.75em"
+    },
+    {
+      "name": "skeleton-line-height",
+      "value": "0.75em"
+    }
+  ]
+}
--- a/docs/_data/variables/components/breadcrumb.json
+++ b/docs/_data/variables/components/breadcrumb.json
@ -1,51 +1,60 @@
 {
-  "by_name": {
-    "$breadcrumb-item-color": {
-      "name": "$breadcrumb-item-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+  "sass-vars": [
+    {
+      "name": "breadcrumb-item-color",
+      "value": "var(--bulma-link-text)",
+      "css-var": "breadcrumb-item-color"
    },
-    "$breadcrumb-item-hover-color": {
-      "name": "$breadcrumb-item-hover-color",
-      "value": "$link-hover",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "breadcrumb-item-hover-color",
+      "value": "var(--bulma-link-text-hover)",
+      "css-var": "breadcrumb-item-hover-color"
    },
-    "$breadcrumb-item-active-color": {
-      "name": "$breadcrumb-item-active-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "breadcrumb-item-active-color",
+      "value": "var(--bulma-link-text-active)",
+      "css-var": "breadcrumb-item-active-color"
    },
-    "$breadcrumb-item-padding-vertical": {
-      "name": "$breadcrumb-item-padding-vertical",
+    {
+      "name": "breadcrumb-item-padding-vertical",
      "value": "0",
-      "type": "string"
+      "css-var": "breadcrumb-item-padding-vertical"
    },
-    "$breadcrumb-item-padding-horizontal": {
-      "name": "$breadcrumb-item-padding-horizontal",
+    {
+      "name": "breadcrumb-item-padding-horizontal",
      "value": "0.75em",
-      "type": "size"
+      "css-var": "breadcrumb-item-padding-horizontal"
    },
-    "$breadcrumb-item-separator-color": {
-      "name": "$breadcrumb-item-separator-color",
-      "value": "$border-hover",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 71%)"
+    {
+      "name": "breadcrumb-item-separator-color",
+      "value": "var(--bulma-border)",
+      "css-var": "breadcrumb-item-separator-color"
    }
-  },
-  "list": [
-    "$breadcrumb-item-color",
-    "$breadcrumb-item-hover-color",
-    "$breadcrumb-item-active-color",
-    "$breadcrumb-item-padding-vertical",
-    "$breadcrumb-item-padding-horizontal",
-    "$breadcrumb-item-separator-color"
  ],
-  "file_path": "components/breadcrumb.sass"
+  "css-vars": [
+    {
+      "name": "breadcrumb-item-color",
+      "value": "var(--bulma-link-text)"
+    },
+    {
+      "name": "breadcrumb-item-hover-color",
+      "value": "var(--bulma-link-text-hover)"
+    },
+    {
+      "name": "breadcrumb-item-active-color",
+      "value": "var(--bulma-link-text-active)"
+    },
+    {
+      "name": "breadcrumb-item-padding-vertical",
+      "value": "0"
+    },
+    {
+      "name": "breadcrumb-item-padding-horizontal",
+      "value": "0.75em"
+    },
+    {
+      "name": "breadcrumb-item-separator-color",
+      "value": "var(--bulma-border)"
+    }
+  ]
 }
--- a/docs/_data/variables/components/card.json
+++ b/docs/_data/variables/components/card.json
@ -1,109 +1,141 @@
 {
-  "by_name": {
-    "$card-color": {
-      "name": "$card-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+  "sass-vars": [
+    {
+      "name": "card-color",
+      "value": "var(--bulma-text)",
+      "css-var": "card-color"
    },
-    "$card-background-color": {
-      "name": "$card-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+    {
+      "name": "card-background-color",
+      "value": "var(--bulma-scheme-main)",
+      "css-var": "card-background-color"
    },
-    "$card-shadow": {
-      "name": "$card-shadow",
-      "value": "$shadow",
-      "type": "variable",
-      "computed_type": "shadow",
-      "computed_value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)"
+    {
+      "name": "card-shadow",
+      "value": "var(--bulma-shadow)",
+      "css-var": "card-shadow"
    },
-    "$card-radius": {
-      "name": "$card-radius",
-      "value": "0.25rem",
-      "type": "size"
-    },
-    "$card-header-background-color": {
-      "name": "$card-header-background-color",
-      "value": "transparent",
-      "type": "string"
-    },
-    "$card-header-color": {
-      "name": "$card-header-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$card-header-padding": {
-      "name": "$card-header-padding",
-      "value": "0.75rem 1rem",
-      "type": "size"
-    },
-    "$card-header-shadow": {
-      "name": "$card-header-shadow",
-      "value": "0 0.125em 0.25em rgba($scheme-invert, 0.1)",
-      "type": "shadow"
-    },
-    "$card-header-weight": {
-      "name": "$card-header-weight",
-      "value": "$weight-bold",
-      "type": "variable",
-      "computed_type": "font-weight",
-      "computed_value": "700"
-    },
-    "$card-content-background-color": {
-      "name": "$card-content-background-color",
-      "value": "transparent",
-      "type": "string"
-    },
-    "$card-content-padding": {
-      "name": "$card-content-padding",
-      "value": "1.5rem",
-      "type": "size"
-    },
-    "$card-footer-background-color": {
-      "name": "$card-footer-background-color",
-      "value": "transparent",
-      "type": "string"
-    },
-    "$card-footer-border-top": {
-      "name": "$card-footer-border-top",
-      "value": "1px solid $border-light",
-      "type": "size"
-    },
-    "$card-footer-padding": {
-      "name": "$card-footer-padding",
+    {
+      "name": "card-radius",
      "value": "0.75rem",
-      "type": "size"
+      "css-var": "card-radius"
    },
-    "$card-media-margin": {
-      "name": "$card-media-margin",
-      "value": "$block-spacing",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "1.5rem"
+    {
+      "name": "card-header-background-color",
+      "value": "transparent",
+      "css-var": "card-header-background-color"
+    },
+    {
+      "name": "card-header-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "card-header-color"
+    },
+    {
+      "name": "card-header-padding",
+      "value": "0.75rem 1rem",
+      "css-var": "card-header-padding"
+    },
+    {
+      "name": "card-header-shadow",
+      "value": "0 0.125em 0.25em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n)",
+      "css-var": "card-header-shadow"
+    },
+    {
+      "name": "card-header-weight",
+      "value": "var(--bulma-weight-bold)",
+      "css-var": "card-header-weight"
+    },
+    {
+      "name": "card-content-background-color",
+      "value": "transparent",
+      "css-var": "card-content-background-color"
+    },
+    {
+      "name": "card-content-padding",
+      "value": "1.5rem",
+      "css-var": "card-content-padding"
+    },
+    {
+      "name": "card-footer-background-color",
+      "value": "transparent",
+      "css-var": "card-footer-background-color"
+    },
+    {
+      "name": "card-footer-border-top",
+      "value": "1px solid var(--bulma-border-weak)",
+      "css-var": "card-footer-border-top"
+    },
+    {
+      "name": "card-footer-padding",
+      "value": "0.75rem",
+      "css-var": "card-footer-padding"
+    },
+    {
+      "name": "card-media-margin",
+      "value": "var(--bulma-block-spacing)",
+      "css-var": "card-media-margin"
    }
-  },
-  "list": [
-    "$card-color",
-    "$card-background-color",
-    "$card-shadow",
-    "$card-radius",
-    "$card-header-background-color",
-    "$card-header-color",
-    "$card-header-padding",
-    "$card-header-shadow",
-    "$card-header-weight",
-    "$card-content-background-color",
-    "$card-content-padding",
-    "$card-footer-background-color",
-    "$card-footer-border-top",
-    "$card-footer-padding",
-    "$card-media-margin"
  ],
-  "file_path": "components/card.sass"
-}
+  "css-vars": [
+    {
+      "name": "card-color",
+      "value": "var(--bulma-text)"
+    },
+    {
+      "name": "card-background-color",
+      "value": "var(--bulma-scheme-main)"
+    },
+    {
+      "name": "card-shadow",
+      "value": "var(--bulma-shadow)"
+    },
+    {
+      "name": "card-radius",
+      "value": "0.75rem"
+    },
+    {
+      "name": "card-header-background-color",
+      "value": "transparent"
+    },
+    {
+      "name": "card-header-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "card-header-padding",
+      "value": "0.75rem 1rem"
+    },
+    {
+      "name": "card-header-shadow",
+      "value": "0 0.125em 0.25em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.1\n  )"
+    },
+    {
+      "name": "card-header-weight",
+      "value": "var(--bulma-weight-bold)"
+    },
+    {
+      "name": "card-content-background-color",
+      "value": "transparent"
+    },
+    {
+      "name": "card-content-padding",
+      "value": "1.5rem"
+    },
+    {
+      "name": "card-footer-background-color",
+      "value": "transparent"
+    },
+    {
+      "name": "card-footer-border-top",
+      "value": "1px solid var(--bulma-border-weak)"
+    },
+    {
+      "name": "card-footer-padding",
+      "value": "0.75rem"
+    },
+    {
+      "name": "card-media-margin",
+      "value": "var(--bulma-block-spacing)"
+    }
+  ]
+}
--- a/docs/_data/variables/components/dropdown.json
+++ b/docs/_data/variables/components/dropdown.json
@ -1,117 +1,139 @@
 {
-  "by_name": {
-    "$dropdown-menu-min-width": {
-      "name": "$dropdown-menu-min-width",
+  "sass-vars": [
+    {
+      "name": "dropdown-menu-min-width",
      "value": "12rem",
-      "type": "size"
+      "css-var": "dropdown-menu-min-width"
    },
-    "$dropdown-content-background-color": {
-      "name": "$dropdown-content-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+    {
+      "name": "dropdown-content-background-color",
+      "value": "var(--bulma-scheme-main)",
+      "css-var": "dropdown-content-background-color"
    },
-    "$dropdown-content-arrow": {
-      "name": "$dropdown-content-arrow",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "dropdown-content-offset",
+      "value": "0.25rem",
+      "css-var": "dropdown-content-offset"
    },
-    "$dropdown-content-offset": {
-      "name": "$dropdown-content-offset",
-      "value": "4px",
-      "type": "size"
-    },
-    "$dropdown-content-padding-bottom": {
-      "name": "$dropdown-content-padding-bottom",
+    {
+      "name": "dropdown-content-padding-bottom",
      "value": "0.5rem",
-      "type": "size"
+      "css-var": "dropdown-content-padding-bottom"
    },
-    "$dropdown-content-padding-top": {
-      "name": "$dropdown-content-padding-top",
+    {
+      "name": "dropdown-content-padding-top",
      "value": "0.5rem",
-      "type": "size"
+      "css-var": "dropdown-content-padding-top"
    },
-    "$dropdown-content-radius": {
-      "name": "$dropdown-content-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
+    {
+      "name": "dropdown-content-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "dropdown-content-radius"
    },
-    "$dropdown-content-shadow": {
-      "name": "$dropdown-content-shadow",
-      "value": "$shadow",
-      "type": "variable",
-      "computed_type": "shadow",
-      "computed_value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)"
+    {
+      "name": "dropdown-content-shadow",
+      "value": "var(--bulma-shadow)",
+      "css-var": "dropdown-content-shadow"
    },
-    "$dropdown-content-z": {
-      "name": "$dropdown-content-z",
+    {
+      "name": "dropdown-content-z",
      "value": "20",
-      "type": "string"
+      "css-var": "dropdown-content-z"
    },
-    "$dropdown-item-color": {
-      "name": "$dropdown-item-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
-    },
-    "$dropdown-item-hover-color": {
-      "name": "$dropdown-item-hover-color",
-      "value": "$scheme-invert",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 4%)"
-    },
-    "$dropdown-item-hover-background-color": {
-      "name": "$dropdown-item-hover-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
-    },
-    "$dropdown-item-active-color": {
-      "name": "$dropdown-item-active-color",
-      "value": "$link-invert",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "#fff"
-    },
-    "$dropdown-item-active-background-color": {
-      "name": "$dropdown-item-active-background-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
-    },
-    "$dropdown-divider-background-color": {
-      "name": "$dropdown-divider-background-color",
-      "value": "$border-light",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 93%)"
+    {
+      "name": "dropdown-divider-background-color",
+      "value": "var(--bulma-border-weak)",
+      "css-var": "dropdown-divider-background-color"
    }
-  },
-  "list": [
-    "$dropdown-menu-min-width",
-    "$dropdown-content-background-color",
-    "$dropdown-content-arrow",
-    "$dropdown-content-offset",
-    "$dropdown-content-padding-bottom",
-    "$dropdown-content-padding-top",
-    "$dropdown-content-radius",
-    "$dropdown-content-shadow",
-    "$dropdown-content-z",
-    "$dropdown-item-color",
-    "$dropdown-item-hover-color",
-    "$dropdown-item-hover-background-color",
-    "$dropdown-item-active-color",
-    "$dropdown-item-active-background-color",
-    "$dropdown-divider-background-color"
  ],
-  "file_path": "components/dropdown.sass"
+  "css-vars": [
+    {
+      "name": "dropdown-menu-min-width",
+      "value": "12rem"
+    },
+    {
+      "name": "dropdown-content-background-color",
+      "value": "var(--bulma-scheme-main)"
+    },
+    {
+      "name": "dropdown-content-offset",
+      "value": "0.25rem"
+    },
+    {
+      "name": "dropdown-content-padding-bottom",
+      "value": "0.5rem"
+    },
+    {
+      "name": "dropdown-content-padding-top",
+      "value": "0.5rem"
+    },
+    {
+      "name": "dropdown-content-radius",
+      "value": "var(--bulma-radius)"
+    },
+    {
+      "name": "dropdown-content-shadow",
+      "value": "var(--bulma-shadow)"
+    },
+    {
+      "name": "dropdown-content-z",
+      "value": "20"
+    },
+    {
+      "name": "dropdown-item-h",
+      "value": "#{$dropdown-item-h},"
+    },
+    {
+      "name": "dropdown-item-s",
+      "value": "#{$dropdown-item-s},"
+    },
+    {
+      "name": "dropdown-item-l",
+      "value": "#{$dropdown-item-l},"
+    },
+    {
+      "name": "dropdown-item-background-l",
+      "value": "#{$dropdown-item-background-l},"
+    },
+    {
+      "name": "dropdown-item-background-l-delta",
+      "value": "#{$dropdown-item-background-l-delta},"
+    },
+    {
+      "name": "dropdown-item-hover-background-l-delta",
+      "value": "#{$dropdown-item-hover-background-l-delta},"
+    },
+    {
+      "name": "dropdown-item-active-background-l-delta",
+      "value": "#{$dropdown-item-active-background-l-delta},"
+    },
+    {
+      "name": "dropdown-item-color-l",
+      "value": "#{$dropdown-item-color-l},"
+    },
+    {
+      "name": "dropdown-item-selected-h",
+      "value": "#{$dropdown-item-selected-h},"
+    },
+    {
+      "name": "dropdown-item-selected-s",
+      "value": "#{$dropdown-item-selected-s},"
+    },
+    {
+      "name": "dropdown-item-selected-l",
+      "value": "#{$dropdown-item-selected-l},"
+    },
+    {
+      "name": "dropdown-item-selected-background-l",
+      "value": "#{$dropdown-item-selected-background-l},"
+    },
+    {
+      "name": "dropdown-item-selected-color-l",
+      "value": "#{$dropdown-item-selected-color-l},"
+    },
+    {
+      "name": "dropdown-divider-background-color",
+      "value": "var(--bulma-border-weak)"
+    }
+  ]
 }
--- a/docs/_data/variables/components/level.json
+++ b/docs/_data/variables/components/level.json
@ -1,13 +0,0 @@
-{
-  "by_name": {
-    "$level-item-spacing": {
-      "name": "$level-item-spacing",
-      "value": "($block-spacing * 0.5)",
-      "type": "compound"
-    }
-  },
-  "list": [
-    "$level-item-spacing"
-  ],
-  "file_path": "components/level.sass"
-}
--- a/docs/_data/variables/components/media.json
+++ b/docs/_data/variables/components/media.json
@ -1,55 +0,0 @@
-{
-  "by_name": {
-    "$media-border-color": {
-      "name": "$media-border-color",
-      "value": "bulmaRgba($border, 0.5)",
-      "type": "compound"
-    },
-    "$media-border-size": {
-      "name": "$media-border-size",
-      "value": "1px",
-      "type": "size"
-    },
-    "$media-spacing": {
-      "name": "$media-spacing",
-      "value": "1rem",
-      "type": "size"
-    },
-    "$media-spacing-large": {
-      "name": "$media-spacing-large",
-      "value": "1.5rem",
-      "type": "size"
-    },
-    "$media-content-spacing": {
-      "name": "$media-content-spacing",
-      "value": "0.75rem",
-      "type": "size"
-    },
-    "$media-level-1-spacing": {
-      "name": "$media-level-1-spacing",
-      "value": "0.75rem",
-      "type": "size"
-    },
-    "$media-level-1-content-spacing": {
-      "name": "$media-level-1-content-spacing",
-      "value": "0.5rem",
-      "type": "size"
-    },
-    "$media-level-2-spacing": {
-      "name": "$media-level-2-spacing",
-      "value": "0.5rem",
-      "type": "size"
-    }
-  },
-  "list": [
-    "$media-border-color",
-    "$media-border-size",
-    "$media-spacing",
-    "$media-spacing-large",
-    "$media-content-spacing",
-    "$media-level-1-spacing",
-    "$media-level-1-content-spacing",
-    "$media-level-2-spacing"
-  ],
-  "file_path": "components/media.sass"
-}
--- a/docs/_data/variables/components/menu.json
+++ b/docs/_data/variables/components/menu.json
@ -1,111 +1,148 @@
 {
-  "by_name": {
-    "$menu-item-color": {
-      "name": "$menu-item-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+  "sass-vars": [
+    {
+      "name": "menu-item-radius",
+      "value": "var(--bulma-radius-small)",
+      "css-var": "menu-item-radius"
    },
-    "$menu-item-radius": {
-      "name": "$menu-item-radius",
-      "value": "$radius-small",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "2px"
+    {
+      "name": "menu-list-border-left",
+      "value": "1px solid var(--bulma-border)",
+      "css-var": "menu-list-border-left"
    },
-    "$menu-item-hover-color": {
-      "name": "$menu-item-hover-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$menu-item-hover-background-color": {
-      "name": "$menu-item-hover-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
-    },
-    "$menu-item-active-color": {
-      "name": "$menu-item-active-color",
-      "value": "$link-invert",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "#fff"
-    },
-    "$menu-item-active-background-color": {
-      "name": "$menu-item-active-background-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
-    },
-    "$menu-list-border-left": {
-      "name": "$menu-list-border-left",
-      "value": "1px solid $border",
-      "type": "size"
-    },
-    "$menu-list-line-height": {
-      "name": "$menu-list-line-height",
+    {
+      "name": "menu-list-line-height",
      "value": "1.25",
-      "type": "unitless"
+      "css-var": "menu-list-line-height"
    },
-    "$menu-list-link-padding": {
-      "name": "$menu-list-link-padding",
+    {
+      "name": "menu-list-link-padding",
      "value": "0.5em 0.75em",
-      "type": "size"
+      "css-var": "menu-list-link-padding"
    },
-    "$menu-nested-list-margin": {
-      "name": "$menu-nested-list-margin",
+    {
+      "name": "menu-nested-list-margin",
      "value": "0.75em",
-      "type": "size"
+      "css-var": "menu-nested-list-margin"
    },
-    "$menu-nested-list-padding-left": {
-      "name": "$menu-nested-list-padding-left",
+    {
+      "name": "menu-nested-list-padding-left",
      "value": "0.75em",
-      "type": "size"
+      "css-var": "menu-nested-list-padding-left"
    },
-    "$menu-label-color": {
-      "name": "$menu-label-color",
-      "value": "$text-light",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 48%)"
+    {
+      "name": "menu-label-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "menu-label-color"
    },
-    "$menu-label-font-size": {
-      "name": "$menu-label-font-size",
+    {
+      "name": "menu-label-font-size",
      "value": "0.75em",
-      "type": "size"
+      "css-var": "menu-label-font-size"
    },
-    "$menu-label-letter-spacing": {
-      "name": "$menu-label-letter-spacing",
+    {
+      "name": "menu-label-letter-spacing",
      "value": "0.1em",
-      "type": "size"
+      "css-var": "menu-label-letter-spacing"
    },
-    "$menu-label-spacing": {
-      "name": "$menu-label-spacing",
+    {
+      "name": "menu-label-spacing",
      "value": "1em",
-      "type": "size"
+      "css-var": "menu-label-spacing"
    }
-  },
-  "list": [
-    "$menu-item-color",
-    "$menu-item-radius",
-    "$menu-item-hover-color",
-    "$menu-item-hover-background-color",
-    "$menu-item-active-color",
-    "$menu-item-active-background-color",
-    "$menu-list-border-left",
-    "$menu-list-line-height",
-    "$menu-list-link-padding",
-    "$menu-nested-list-margin",
-    "$menu-nested-list-padding-left",
-    "$menu-label-color",
-    "$menu-label-font-size",
-    "$menu-label-letter-spacing",
-    "$menu-label-spacing"
  ],
-  "file_path": "components/menu.sass"
+  "css-vars": [
+    {
+      "name": "menu-item-h",
+      "value": "#{$menu-item-h},"
+    },
+    {
+      "name": "menu-item-s",
+      "value": "#{$menu-item-s},"
+    },
+    {
+      "name": "menu-item-l",
+      "value": "#{$menu-item-l},"
+    },
+    {
+      "name": "menu-item-background-l",
+      "value": "#{$menu-item-background-l},"
+    },
+    {
+      "name": "menu-item-background-l-delta",
+      "value": "#{$menu-item-background-l-delta},"
+    },
+    {
+      "name": "menu-item-hover-background-l-delta",
+      "value": "#{$menu-item-hover-background-l-delta},"
+    },
+    {
+      "name": "menu-item-active-background-l-delta",
+      "value": "#{$menu-item-active-background-l-delta},"
+    },
+    {
+      "name": "menu-item-color-l",
+      "value": "#{$menu-item-color-l},"
+    },
+    {
+      "name": "menu-item-radius",
+      "value": "var(--bulma-radius-small)"
+    },
+    {
+      "name": "menu-item-selected-h",
+      "value": "#{$menu-item-selected-h},"
+    },
+    {
+      "name": "menu-item-selected-s",
+      "value": "#{$menu-item-selected-s},"
+    },
+    {
+      "name": "menu-item-selected-l",
+      "value": "#{$menu-item-selected-l},"
+    },
+    {
+      "name": "menu-item-selected-background-l",
+      "value": "#{$menu-item-selected-background-l},"
+    },
+    {
+      "name": "menu-item-selected-color-l",
+      "value": "#{$menu-item-selected-color-l},"
+    },
+    {
+      "name": "menu-list-border-left",
+      "value": "1px solid var(--bulma-border)"
+    },
+    {
+      "name": "menu-list-line-height",
+      "value": "1.25"
+    },
+    {
+      "name": "menu-list-link-padding",
+      "value": "0.5em 0.75em"
+    },
+    {
+      "name": "menu-nested-list-margin",
+      "value": "0.75em"
+    },
+    {
+      "name": "menu-nested-list-padding-left",
+      "value": "0.75em"
+    },
+    {
+      "name": "menu-label-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "menu-label-font-size",
+      "value": "0.75em"
+    },
+    {
+      "name": "menu-label-letter-spacing",
+      "value": "0.1em"
+    },
+    {
+      "name": "menu-label-spacing",
+      "value": "1em"
+    }
+  ]
 }
--- a/docs/_data/variables/components/message.json
+++ b/docs/_data/variables/components/message.json
@ -1,125 +1,145 @@
 {
-  "by_name": {
-    "$message-background-color": {
-      "name": "$message-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+  "sass-vars": [
+    {
+      "name": "message-border-l-delta",
+      "value": "-20%",
+      "css-var": "message-border-l-delta"
    },
-    "$message-radius": {
-      "name": "$message-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
+    {
+      "name": "message-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "message-radius"
    },
-    "$message-header-background-color": {
-      "name": "$message-header-background-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "message-header-weight",
+      "value": "var(--bulma-weight-semibold)",
+      "css-var": "message-header-weight"
    },
-    "$message-header-color": {
-      "name": "$message-header-color",
-      "value": "$text-invert",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "#fff"
+    {
+      "name": "message-header-padding",
+      "value": "1em 1.25em",
+      "css-var": "message-header-padding"
    },
-    "$message-header-weight": {
-      "name": "$message-header-weight",
-      "value": "$weight-bold",
-      "type": "variable",
-      "computed_type": "font-weight",
-      "computed_value": "700"
+    {
+      "name": "message-header-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "message-header-radius"
    },
-    "$message-header-padding": {
-      "name": "$message-header-padding",
-      "value": "0.75em 1em",
-      "type": "size"
-    },
-    "$message-header-radius": {
-      "name": "$message-header-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
-    },
-    "$message-body-border-color": {
-      "name": "$message-body-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
-    },
-    "$message-body-border-width": {
-      "name": "$message-body-border-width",
+    {
+      "name": "message-body-border-width",
      "value": "0 0 0 4px",
-      "type": "size"
+      "css-var": "message-body-border-width"
    },
-    "$message-body-color": {
-      "name": "$message-body-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "message-body-color",
+      "value": "var(--bulma-text)",
+      "css-var": "message-body-color"
    },
-    "$message-body-padding": {
-      "name": "$message-body-padding",
+    {
+      "name": "message-body-padding",
      "value": "1.25em 1.5em",
-      "type": "size"
+      "css-var": "message-body-padding"
    },
-    "$message-body-radius": {
-      "name": "$message-body-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
+    {
+      "name": "message-body-radius",
+      "value": "var(--bulma-radius-small)",
+      "css-var": "message-body-radius"
    },
-    "$message-body-pre-background-color": {
-      "name": "$message-body-pre-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
-    },
-    "$message-body-pre-code-background-color": {
-      "name": "$message-body-pre-code-background-color",
+    {
+      "name": "message-body-pre-code-background-color",
      "value": "transparent",
-      "type": "string"
+      "css-var": "message-body-pre-code-background-color"
    },
-    "$message-header-body-border-width": {
-      "name": "$message-header-body-border-width",
+    {
+      "name": "message-header-body-border-width",
      "value": "0",
-      "type": "string"
+      "css-var": "message-header-body-border-width"
    },
-    "$message-colors": {
-      "name": "$message-colors",
-      "value": "$colors",
-      "type": "variable",
-      "computed_type": "map",
-      "computed_value": "Bulma colors"
+    {
+      "name": "message-colors",
+      "value": "dv.$colors"
    }
-  },
-  "list": [
-    "$message-background-color",
-    "$message-radius",
-    "$message-header-background-color",
-    "$message-header-color",
-    "$message-header-weight",
-    "$message-header-padding",
-    "$message-header-radius",
-    "$message-body-border-color",
-    "$message-body-border-width",
-    "$message-body-color",
-    "$message-body-padding",
-    "$message-body-radius",
-    "$message-body-pre-background-color",
-    "$message-body-pre-code-background-color",
-    "$message-header-body-border-width",
-    "$message-colors"
  ],
-  "file_path": "components/message.sass"
+  "css-vars": [
+    {
+      "name": "message-border-l-delta",
+      "value": "-20%"
+    },
+    {
+      "name": "message-radius",
+      "value": "var(--bulma-radius)"
+    },
+    {
+      "name": "message-header-weight",
+      "value": "var(--bulma-weight-semibold)"
+    },
+    {
+      "name": "message-header-padding",
+      "value": "1em 1.25em"
+    },
+    {
+      "name": "message-header-radius",
+      "value": "var(--bulma-radius)"
+    },
+    {
+      "name": "message-body-border-width",
+      "value": "0 0 0 4px"
+    },
+    {
+      "name": "message-body-color",
+      "value": "var(--bulma-text)"
+    },
+    {
+      "name": "message-body-padding",
+      "value": "1.25em 1.5em"
+    },
+    {
+      "name": "message-body-radius",
+      "value": "var(--bulma-radius-small)"
+    },
+    {
+      "name": "message-body-pre-code-background-color",
+      "value": "transparent"
+    },
+    {
+      "name": "message-header-body-border-width",
+      "value": "0"
+    },
+    {
+      "name": "message-h",
+      "value": "#{$message-h},"
+    },
+    {
+      "name": "message-s",
+      "value": "#{$message-s},"
+    },
+    {
+      "name": "message-background-l",
+      "value": "#{$message-background-l},"
+    },
+    {
+      "name": "message-border-l",
+      "value": "#{$message-border-l},"
+    },
+    {
+      "name": "message-border-style",
+      "value": "#{$message-border-style},"
+    },
+    {
+      "name": "message-border-width",
+      "value": "#{$message-border-width},"
+    },
+    {
+      "name": "message-color-l",
+      "value": "#{$message-color-l},"
+    },
+    {
+      "name": "message-header-background-l",
+      "value": "#{$message-header-background-l},"
+    },
+    {
+      "name": "message-header-color-l",
+      "value": "#{$message-header-color-l},"
+    }
+  ]
 }
--- a/docs/_data/variables/components/modal.json
+++ b/docs/_data/variables/components/modal.json
@ -1,153 +1,186 @@
 {
-  "by_name": {
-    "$modal-z": {
-      "name": "$modal-z",
+  "sass-vars": [
+    {
+      "name": "modal-z",
      "value": "40",
-      "type": "string"
+      "css-var": "modal-z"
    },
-    "$modal-background-background-color": {
-      "name": "$modal-background-background-color",
-      "value": "bulmaRgba($scheme-invert, 0.86)",
-      "type": "compound"
+    {
+      "name": "modal-background-background-color",
+      "value": "hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.86\n)",
+      "css-var": "modal-background-background-color"
    },
-    "$modal-content-width": {
-      "name": "$modal-content-width",
-      "value": "640px",
-      "type": "size"
+    {
+      "name": "modal-content-width",
+      "value": "40rem",
+      "css-var": "modal-content-width"
    },
-    "$modal-content-margin-mobile": {
-      "name": "$modal-content-margin-mobile",
-      "value": "20px",
-      "type": "size"
+    {
+      "name": "modal-content-margin-mobile",
+      "value": "1.25rem",
+      "css-var": "modal-content-margin-mobile"
    },
-    "$modal-content-spacing-mobile": {
-      "name": "$modal-content-spacing-mobile",
-      "value": "160px",
-      "type": "size"
+    {
+      "name": "modal-content-spacing-mobile",
+      "value": "10rem",
+      "css-var": "modal-content-spacing-mobile"
    },
-    "$modal-content-spacing-tablet": {
-      "name": "$modal-content-spacing-tablet",
-      "value": "40px",
-      "type": "size"
+    {
+      "name": "modal-content-spacing-tablet",
+      "value": "2.5rem",
+      "css-var": "modal-content-spacing-tablet"
    },
-    "$modal-close-dimensions": {
-      "name": "$modal-close-dimensions",
-      "value": "40px",
-      "type": "size"
+    {
+      "name": "modal-close-dimensions",
+      "value": "2.5rem",
+      "css-var": "modal-close-dimensions"
    },
-    "$modal-close-right": {
-      "name": "$modal-close-right",
-      "value": "20px",
-      "type": "size"
+    {
+      "name": "modal-close-right",
+      "value": "1.25rem",
+      "css-var": "modal-close-right"
    },
-    "$modal-close-top": {
-      "name": "$modal-close-top",
-      "value": "20px",
-      "type": "size"
+    {
+      "name": "modal-close-top",
+      "value": "1.25rem",
+      "css-var": "modal-close-top"
    },
-    "$modal-card-spacing": {
-      "name": "$modal-card-spacing",
-      "value": "40px",
-      "type": "size"
+    {
+      "name": "modal-card-spacing",
+      "value": "2.5rem",
+      "css-var": "modal-card-spacing"
    },
-    "$modal-card-head-background-color": {
-      "name": "$modal-card-head-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "modal-card-head-background-color",
+      "value": "var(--bulma-scheme-main)",
+      "css-var": "modal-card-head-background-color"
    },
-    "$modal-card-head-border-bottom": {
-      "name": "$modal-card-head-border-bottom",
-      "value": "1px solid $border",
-      "type": "size"
+    {
+      "name": "modal-card-head-padding",
+      "value": "2rem",
+      "css-var": "modal-card-head-padding"
    },
-    "$modal-card-head-padding": {
-      "name": "$modal-card-head-padding",
-      "value": "20px",
-      "type": "size"
+    {
+      "name": "modal-card-head-radius",
+      "value": "var(--bulma-radius-large)",
+      "css-var": "modal-card-head-radius"
    },
-    "$modal-card-head-radius": {
-      "name": "$modal-card-head-radius",
-      "value": "$radius-large",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "6px"
+    {
+      "name": "modal-card-title-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "modal-card-title-color"
    },
-    "$modal-card-title-color": {
-      "name": "$modal-card-title-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$modal-card-title-line-height": {
-      "name": "$modal-card-title-line-height",
+    {
+      "name": "modal-card-title-line-height",
      "value": "1",
-      "type": "string"
+      "css-var": "modal-card-title-line-height"
    },
-    "$modal-card-title-size": {
-      "name": "$modal-card-title-size",
-      "value": "$size-4",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "1.5rem"
+    {
+      "name": "modal-card-title-size",
+      "value": "var(--bulma-size-4)",
+      "css-var": "modal-card-title-size"
    },
-    "$modal-card-foot-radius": {
-      "name": "$modal-card-foot-radius",
-      "value": "$radius-large",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "6px"
+    {
+      "name": "modal-card-foot-background-color",
+      "value": "var(--bulma-scheme-main-bis)",
+      "css-var": "modal-card-foot-background-color"
    },
-    "$modal-card-foot-border-top": {
-      "name": "$modal-card-foot-border-top",
-      "value": "1px solid $border",
-      "type": "size"
+    {
+      "name": "modal-card-foot-radius",
+      "value": "var(--bulma-radius-large)",
+      "css-var": "modal-card-foot-radius"
    },
-    "$modal-card-body-background-color": {
-      "name": "$modal-card-body-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+    {
+      "name": "modal-card-body-background-color",
+      "value": "var(--bulma-scheme-main)",
+      "css-var": "modal-card-body-background-color"
    },
-    "$modal-card-body-padding": {
-      "name": "$modal-card-body-padding",
-      "value": "20px",
-      "type": "size"
-    },
-    "$modal-breakpoint": {
-      "name": "$modal-breakpoint",
-      "value": "$tablet",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "769px"
+    {
+      "name": "modal-card-body-padding",
+      "value": "2rem",
+      "css-var": "modal-card-body-padding"
    }
-  },
-  "list": [
-    "$modal-z",
-    "$modal-background-background-color",
-    "$modal-content-width",
-    "$modal-content-margin-mobile",
-    "$modal-content-spacing-mobile",
-    "$modal-content-spacing-tablet",
-    "$modal-close-dimensions",
-    "$modal-close-right",
-    "$modal-close-top",
-    "$modal-card-spacing",
-    "$modal-card-head-background-color",
-    "$modal-card-head-border-bottom",
-    "$modal-card-head-padding",
-    "$modal-card-head-radius",
-    "$modal-card-title-color",
-    "$modal-card-title-line-height",
-    "$modal-card-title-size",
-    "$modal-card-foot-radius",
-    "$modal-card-foot-border-top",
-    "$modal-card-body-background-color",
-    "$modal-card-body-padding",
-    "$modal-breakpoint"
  ],
-  "file_path": "components/modal.sass"
-}
+  "css-vars": [
+    {
+      "name": "modal-z",
+      "value": "40"
+    },
+    {
+      "name": "modal-background-background-color",
+      "value": "hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.86\n)"
+    },
+    {
+      "name": "modal-content-width",
+      "value": "40rem"
+    },
+    {
+      "name": "modal-content-margin-mobile",
+      "value": "1.25rem"
+    },
+    {
+      "name": "modal-content-spacing-mobile",
+      "value": "10rem"
+    },
+    {
+      "name": "modal-content-spacing-tablet",
+      "value": "2.5rem"
+    },
+    {
+      "name": "modal-close-dimensions",
+      "value": "2.5rem"
+    },
+    {
+      "name": "modal-close-right",
+      "value": "1.25rem"
+    },
+    {
+      "name": "modal-close-top",
+      "value": "1.25rem"
+    },
+    {
+      "name": "modal-card-spacing",
+      "value": "2.5rem"
+    },
+    {
+      "name": "modal-card-head-background-color",
+      "value": "var(--bulma-scheme-main)"
+    },
+    {
+      "name": "modal-card-head-padding",
+      "value": "2rem"
+    },
+    {
+      "name": "modal-card-head-radius",
+      "value": "var(--bulma-radius-large)"
+    },
+    {
+      "name": "modal-card-title-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "modal-card-title-line-height",
+      "value": "1"
+    },
+    {
+      "name": "modal-card-title-size",
+      "value": "var(--bulma-size-4)"
+    },
+    {
+      "name": "modal-card-foot-background-color",
+      "value": "var(--bulma-scheme-main-bis)"
+    },
+    {
+      "name": "modal-card-foot-radius",
+      "value": "var(--bulma-radius-large)"
+    },
+    {
+      "name": "modal-card-body-background-color",
+      "value": "var(--bulma-scheme-main)"
+    },
+    {
+      "name": "modal-card-body-padding",
+      "value": "2rem"
+    }
+  ]
+}
--- a/docs/_data/variables/components/navbar.json
+++ b/docs/_data/variables/components/navbar.json
@ -1,281 +1,166 @@
 {
-  "by_name": {
-    "$navbar-background-color": {
-      "name": "$navbar-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+  "sass-vars": [
+    {
+      "name": "navbar-background-color",
+      "css-var": "navbar-background-color",
+      "value": "var(--bulma-scheme-main)"
    },
-    "$navbar-box-shadow-size": {
-      "name": "$navbar-box-shadow-size",
-      "value": "0 2px 0 0",
-      "type": "size"
+    {
+      "name": "navbar-box-shadow-size",
+      "css-var": "navbar-box-shadow-size",
+      "value": "0 0.125em 0 0"
    },
-    "$navbar-box-shadow-color": {
-      "name": "$navbar-box-shadow-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "navbar-box-shadow-color",
+      "css-var": "navbar-box-shadow-color",
+      "value": "var(--bulma-background)"
    },
-    "$navbar-height": {
-      "name": "$navbar-height",
+    {
+      "name": "navbar-height",
      "value": "3.25rem",
-      "type": "size"
+      "css-var": "navbar-height"
    },
-    "$navbar-padding-vertical": {
-      "name": "$navbar-padding-vertical",
-      "value": "1rem",
-      "type": "size"
+    {
+      "name": "navbar-padding-vertical",
+      "css-var": "navbar-padding-vertical",
+      "value": "1rem"
    },
-    "$navbar-padding-horizontal": {
-      "name": "$navbar-padding-horizontal",
-      "value": "2rem",
-      "type": "size"
+    {
+      "name": "navbar-padding-horizontal",
+      "css-var": "navbar-padding-horizontal",
+      "value": "2rem"
    },
-    "$navbar-z": {
-      "name": "$navbar-z",
-      "value": "30",
-      "type": "string"
+    {
+      "name": "navbar-z",
+      "css-var": "navbar-z",
+      "value": "30"
    },
-    "$navbar-fixed-z": {
-      "name": "$navbar-fixed-z",
-      "value": "30",
-      "type": "string"
+    {
+      "name": "navbar-fixed-z",
+      "css-var": "navbar-fixed-z",
+      "value": "30"
    },
-    "$navbar-item-color": {
-      "name": "$navbar-item-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "navbar-item-img-max-height",
+      "css-var": "navbar-item-img-max-height",
+      "value": "1.75rem"
    },
-    "$navbar-item-hover-color": {
-      "name": "$navbar-item-hover-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "navbar-burger-color",
+      "css-var": "navbar-burger-color",
+      "value": "var(--bulma-navbar-item-color)"
    },
-    "$navbar-item-hover-background-color": {
-      "name": "$navbar-item-hover-background-color",
-      "value": "$scheme-main-bis",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 98%)"
+    {
+      "name": "navbar-tab-hover-background-color",
+      "css-var": "navbar-tab-hover-background-color",
+      "value": "transparent"
    },
-    "$navbar-item-active-color": {
-      "name": "$navbar-item-active-color",
-      "value": "$scheme-invert",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 4%)"
+    {
+      "name": "navbar-tab-hover-border-bottom-color",
+      "css-var": "navbar-tab-hover-border-bottom-color",
+      "value": "var(--bulma-link)"
    },
-    "$navbar-item-active-background-color": {
-      "name": "$navbar-item-active-background-color",
-      "value": "transparent",
-      "type": "string"
+    {
+      "name": "navbar-tab-active-color",
+      "css-var": "navbar-tab-active-color",
+      "value": "var(--bulma-link)"
    },
-    "$navbar-item-img-max-height": {
-      "name": "$navbar-item-img-max-height",
-      "value": "1.75rem",
-      "type": "size"
+    {
+      "name": "navbar-tab-active-background-color",
+      "css-var": "navbar-tab-active-background-color",
+      "value": "transparent"
    },
-    "$navbar-burger-color": {
-      "name": "$navbar-burger-color",
-      "value": "$navbar-item-color",
-      "type": "variable"
+    {
+      "name": "navbar-tab-active-border-bottom-color",
+      "css-var": "navbar-tab-active-border-bottom-color",
+      "value": "var(--bulma-link)"
    },
-    "$navbar-tab-hover-background-color": {
-      "name": "$navbar-tab-hover-background-color",
-      "value": "transparent",
-      "type": "string"
+    {
+      "name": "navbar-tab-active-border-bottom-style",
+      "css-var": "navbar-tab-active-border-bottom-style",
+      "value": "solid"
    },
-    "$navbar-tab-hover-border-bottom-color": {
-      "name": "$navbar-tab-hover-border-bottom-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "navbar-tab-active-border-bottom-width",
+      "css-var": "navbar-tab-active-border-bottom-width",
+      "value": "0.1875em"
    },
-    "$navbar-tab-active-color": {
-      "name": "$navbar-tab-active-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "navbar-dropdown-background-color",
+      "css-var": "navbar-dropdown-background-color",
+      "value": "var(--bulma-scheme-main)"
    },
-    "$navbar-tab-active-background-color": {
-      "name": "$navbar-tab-active-background-color",
-      "value": "transparent",
-      "type": "string"
+    {
+      "name": "navbar-dropdown-border-l",
+      "css-var": "navbar-dropdown-border-l",
+      "value": "var(--bulma-border-l)"
    },
-    "$navbar-tab-active-border-bottom-color": {
-      "name": "$navbar-tab-active-border-bottom-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "navbar-dropdown-border-color",
+      "css-var": "navbar-dropdown-border-color",
+      "value": "hsl(\n  var(--bulma-navbar-h),\n  var(--bulma-navbar-s),\n  var(--bulma-navbar-dropdown-border-l)\n)"
    },
-    "$navbar-tab-active-border-bottom-style": {
-      "name": "$navbar-tab-active-border-bottom-style",
-      "value": "solid",
-      "type": "string"
+    {
+      "name": "navbar-dropdown-border-style",
+      "css-var": "navbar-dropdown-border-style",
+      "value": "solid"
    },
-    "$navbar-tab-active-border-bottom-width": {
-      "name": "$navbar-tab-active-border-bottom-width",
-      "value": "3px",
-      "type": "size"
+    {
+      "name": "navbar-dropdown-border-width",
+      "css-var": "navbar-dropdown-border-width",
+      "value": "0.125em"
    },
-    "$navbar-dropdown-background-color": {
-      "name": "$navbar-dropdown-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+    {
+      "name": "navbar-dropdown-offset",
+      "css-var": "navbar-dropdown-offset",
+      "value": "-0.25em"
    },
-    "$navbar-dropdown-border-top": {
-      "name": "$navbar-dropdown-border-top",
-      "value": "2px solid $border",
-      "type": "size"
+    {
+      "name": "navbar-dropdown-arrow",
+      "css-var": "navbar-dropdown-arrow",
+      "value": "var(--bulma-link)"
    },
-    "$navbar-dropdown-offset": {
-      "name": "$navbar-dropdown-offset",
-      "value": "-4px",
-      "type": "size"
+    {
+      "name": "navbar-dropdown-radius",
+      "css-var": "navbar-dropdown-radius",
+      "value": "var(--bulma-radius-large)"
    },
-    "$navbar-dropdown-arrow": {
-      "name": "$navbar-dropdown-arrow",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "navbar-dropdown-z",
+      "css-var": "navbar-dropdown-z",
+      "value": "20"
    },
-    "$navbar-dropdown-radius": {
-      "name": "$navbar-dropdown-radius",
-      "value": "$radius-large",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "6px"
+    {
+      "name": "navbar-dropdown-boxed-radius",
+      "css-var": "navbar-dropdown-boxed-radius",
+      "value": "var(--bulma-radius-large)"
    },
-    "$navbar-dropdown-z": {
-      "name": "$navbar-dropdown-z",
-      "value": "20",
-      "type": "string"
+    {
+      "name": "navbar-dropdown-boxed-shadow",
+      "css-var": "navbar-dropdown-boxed-shadow",
+      "value": "0 0.5em 0.5em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n),\n0 0 0 1px hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n)"
    },
-    "$navbar-dropdown-boxed-radius": {
-      "name": "$navbar-dropdown-boxed-radius",
-      "value": "$radius-large",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "6px"
+    {
+      "name": "navbar-divider-background-l",
+      "css-var": "navbar-divider-background-l",
+      "value": "var(--bulma-background-l)"
    },
-    "$navbar-dropdown-boxed-shadow": {
-      "name": "$navbar-dropdown-boxed-shadow",
-      "value": "0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1)",
-      "type": "shadow"
+    {
+      "name": "navbar-divider-height",
+      "css-var": "navbar-divider-height",
+      "value": "0.125em"
    },
-    "$navbar-dropdown-item-hover-color": {
-      "name": "$navbar-dropdown-item-hover-color",
-      "value": "$scheme-invert",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 4%)"
-    },
-    "$navbar-dropdown-item-hover-background-color": {
-      "name": "$navbar-dropdown-item-hover-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
-    },
-    "$navbar-dropdown-item-active-color": {
-      "name": "$navbar-dropdown-item-active-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
-    },
-    "$navbar-dropdown-item-active-background-color": {
-      "name": "$navbar-dropdown-item-active-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
-    },
-    "$navbar-divider-background-color": {
-      "name": "$navbar-divider-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
-    },
-    "$navbar-divider-height": {
-      "name": "$navbar-divider-height",
-      "value": "2px",
-      "type": "size"
-    },
-    "$navbar-bottom-box-shadow-size": {
-      "name": "$navbar-bottom-box-shadow-size",
-      "value": "0 -2px 0 0",
-      "type": "size"
-    },
-    "$navbar-breakpoint": {
-      "name": "$navbar-breakpoint",
-      "value": "$desktop",
-      "type": "variable",
-      "computed_type": "computed",
-      "computed_value": "960px + (2 * $gap)"
-    },
-    "$navbar-colors": {
-      "name": "$navbar-colors",
-      "value": "$colors",
-      "type": "variable",
-      "computed_type": "map",
-      "computed_value": "Bulma colors"
+    {
+      "name": "navbar-bottom-box-shadow-size",
+      "css-var": "navbar-bottom-box-shadow-size",
+      "value": "0 -0.125em 0 0"
    }
-  },
-  "list": [
-    "$navbar-background-color",
-    "$navbar-box-shadow-size",
-    "$navbar-box-shadow-color",
-    "$navbar-height",
-    "$navbar-padding-vertical",
-    "$navbar-padding-horizontal",
-    "$navbar-z",
-    "$navbar-fixed-z",
-    "$navbar-item-color",
-    "$navbar-item-hover-color",
-    "$navbar-item-hover-background-color",
-    "$navbar-item-active-color",
-    "$navbar-item-active-background-color",
-    "$navbar-item-img-max-height",
-    "$navbar-burger-color",
-    "$navbar-tab-hover-background-color",
-    "$navbar-tab-hover-border-bottom-color",
-    "$navbar-tab-active-color",
-    "$navbar-tab-active-background-color",
-    "$navbar-tab-active-border-bottom-color",
-    "$navbar-tab-active-border-bottom-style",
-    "$navbar-tab-active-border-bottom-width",
-    "$navbar-dropdown-background-color",
-    "$navbar-dropdown-border-top",
-    "$navbar-dropdown-offset",
-    "$navbar-dropdown-arrow",
-    "$navbar-dropdown-radius",
-    "$navbar-dropdown-z",
-    "$navbar-dropdown-boxed-radius",
-    "$navbar-dropdown-boxed-shadow",
-    "$navbar-dropdown-item-hover-color",
-    "$navbar-dropdown-item-hover-background-color",
-    "$navbar-dropdown-item-active-color",
-    "$navbar-dropdown-item-active-background-color",
-    "$navbar-divider-background-color",
-    "$navbar-divider-height",
-    "$navbar-bottom-box-shadow-size",
-    "$navbar-breakpoint",
-    "$navbar-colors"
  ],
-  "file_path": "components/navbar.sass"
-}
+  "css-vars": [
+    {
+      "name": "navbar-height",
+      "css-var": "navbar-height",
+      "value": "3.25rem"
+    }
+  ]
+}
--- a/docs/_data/variables/components/pagination.json
+++ b/docs/_data/variables/components/pagination.json
@ -1,181 +1,256 @@
 {
-  "by_name": {
-    "$pagination-color": {
-      "name": "$pagination-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$pagination-border-color": {
-      "name": "$pagination-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
-    },
-    "$pagination-margin": {
-      "name": "$pagination-margin",
+  "sass-vars": [
+    {
+      "name": "pagination-margin",
      "value": "-0.25rem",
-      "type": "size"
+      "css-var": "pagination-margin"
    },
-    "$pagination-min-width": {
-      "name": "$pagination-min-width",
-      "value": "$control-height",
-      "type": "variable"
+    {
+      "name": "pagination-min-width",
+      "value": "var(--bulma-control-height)",
+      "css-var": "pagination-min-width"
    },
-    "$pagination-item-font-size": {
-      "name": "$pagination-item-font-size",
+    {
+      "name": "pagination-item-border-style",
+      "value": "solid",
+      "css-var": "pagination-item-border-style"
+    },
+    {
+      "name": "pagination-item-border-width",
+      "value": "var(--bulma-control-border-width)",
+      "css-var": "pagination-item-border-width"
+    },
+    {
+      "name": "pagination-item-font-size",
      "value": "1em",
-      "type": "size"
+      "css-var": "pagination-item-font-size"
    },
-    "$pagination-item-margin": {
-      "name": "$pagination-item-margin",
+    {
+      "name": "pagination-item-margin",
      "value": "0.25rem",
-      "type": "size"
+      "css-var": "pagination-item-margin"
    },
-    "$pagination-item-padding-left": {
-      "name": "$pagination-item-padding-left",
+    {
+      "name": "pagination-item-padding-left",
      "value": "0.5em",
-      "type": "size"
+      "css-var": "pagination-item-padding-left"
    },
-    "$pagination-item-padding-right": {
-      "name": "$pagination-item-padding-right",
+    {
+      "name": "pagination-item-padding-right",
      "value": "0.5em",
-      "type": "size"
+      "css-var": "pagination-item-padding-right"
    },
-    "$pagination-nav-padding-left": {
-      "name": "$pagination-nav-padding-left",
+    {
+      "name": "pagination-nav-padding-left",
      "value": "0.75em",
-      "type": "size"
+      "css-var": "pagination-nav-padding-left"
    },
-    "$pagination-nav-padding-right": {
-      "name": "$pagination-nav-padding-right",
+    {
+      "name": "pagination-nav-padding-right",
      "value": "0.75em",
-      "type": "size"
+      "css-var": "pagination-nav-padding-right"
    },
-    "$pagination-hover-color": {
-      "name": "$pagination-hover-color",
-      "value": "$link-hover",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "pagination-disabled-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "pagination-disabled-color"
    },
-    "$pagination-hover-border-color": {
-      "name": "$pagination-hover-border-color",
-      "value": "$link-hover-border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 71%)"
+    {
+      "name": "pagination-disabled-background-color",
+      "value": "var(--bulma-border)",
+      "css-var": "pagination-disabled-background-color"
    },
-    "$pagination-focus-color": {
-      "name": "$pagination-focus-color",
-      "value": "$link-focus",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "pagination-disabled-border-color",
+      "value": "var(--bulma-border)",
+      "css-var": "pagination-disabled-border-color"
    },
-    "$pagination-focus-border-color": {
-      "name": "$pagination-focus-border-color",
-      "value": "$link-focus-border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "pagination-current-color",
+      "value": "var(--bulma-link-invert)",
+      "css-var": "pagination-current-color"
    },
-    "$pagination-active-color": {
-      "name": "$pagination-active-color",
-      "value": "$link-active",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "pagination-current-background-color",
+      "value": "var(--bulma-link)",
+      "css-var": "pagination-current-background-color"
    },
-    "$pagination-active-border-color": {
-      "name": "$pagination-active-border-color",
-      "value": "$link-active-border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "pagination-current-border-color",
+      "value": "var(--bulma-link)",
+      "css-var": "pagination-current-border-color"
    },
-    "$pagination-disabled-color": {
-      "name": "$pagination-disabled-color",
-      "value": "$text-light",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 48%)"
+    {
+      "name": "pagination-ellipsis-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "pagination-ellipsis-color"
    },
-    "$pagination-disabled-background-color": {
-      "name": "$pagination-disabled-background-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
-    },
-    "$pagination-disabled-border-color": {
-      "name": "$pagination-disabled-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
-    },
-    "$pagination-current-color": {
-      "name": "$pagination-current-color",
-      "value": "$link-invert",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "#fff"
-    },
-    "$pagination-current-background-color": {
-      "name": "$pagination-current-background-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
-    },
-    "$pagination-current-border-color": {
-      "name": "$pagination-current-border-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
-    },
-    "$pagination-ellipsis-color": {
-      "name": "$pagination-ellipsis-color",
-      "value": "$grey-light",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 71%)"
-    },
-    "$pagination-shadow-inset": {
-      "name": "$pagination-shadow-inset",
-      "value": "inset 0 1px 2px rgba($scheme-invert, 0.2)",
-      "type": "size"
+    {
+      "name": "pagination-shadow-inset",
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.2\n)",
+      "css-var": "pagination-shadow-inset"
    }
-  },
-  "list": [
-    "$pagination-color",
-    "$pagination-border-color",
-    "$pagination-margin",
-    "$pagination-min-width",
-    "$pagination-item-font-size",
-    "$pagination-item-margin",
-    "$pagination-item-padding-left",
-    "$pagination-item-padding-right",
-    "$pagination-nav-padding-left",
-    "$pagination-nav-padding-right",
-    "$pagination-hover-color",
-    "$pagination-hover-border-color",
-    "$pagination-focus-color",
-    "$pagination-focus-border-color",
-    "$pagination-active-color",
-    "$pagination-active-border-color",
-    "$pagination-disabled-color",
-    "$pagination-disabled-background-color",
-    "$pagination-disabled-border-color",
-    "$pagination-current-color",
-    "$pagination-current-background-color",
-    "$pagination-current-border-color",
-    "$pagination-ellipsis-color",
-    "$pagination-shadow-inset"
  ],
-  "file_path": "components/pagination.sass"
-}
+  "css-vars": [
+    {
+      "name": "pagination-margin",
+      "value": "-0.25rem"
+    },
+    {
+      "name": "pagination-min-width",
+      "value": "var(--bulma-control-height)"
+    },
+    {
+      "name": "pagination-item-h",
+      "value": "#{$pagination-item-h},"
+    },
+    {
+      "name": "pagination-item-s",
+      "value": "#{$pagination-item-s},"
+    },
+    {
+      "name": "pagination-item-l",
+      "value": "#{$pagination-item-l},"
+    },
+    {
+      "name": "pagination-item-background-l-delta",
+      "value": "#{$pagination-item-background-l-delta},"
+    },
+    {
+      "name": "pagination-item-hover-background-l-delta",
+      "value": "#{$pagination-item-hover-background-l-delta},"
+    },
+    {
+      "name": "pagination-item-active-background-l-delta",
+      "value": "#{$pagination-item-active-background-l-delta},"
+    },
+    {
+      "name": "pagination-item-border-style",
+      "value": "solid"
+    },
+    {
+      "name": "pagination-item-border-width",
+      "value": "var(--bulma-control-border-width)"
+    },
+    {
+      "name": "pagination-item-border-l",
+      "value": "#{$pagination-item-border-l},"
+    },
+    {
+      "name": "pagination-item-border-l-delta",
+      "value": "#{$pagination-item-border-l-delta},"
+    },
+    {
+      "name": "pagination-item-hover-border-l-delta",
+      "value": "#{$pagination-item-hover-border-l-delta},"
+    },
+    {
+      "name": "pagination-item-active-border-l-delta",
+      "value": "#{$pagination-item-active-border-l-delta},"
+    },
+    {
+      "name": "pagination-item-focus-border-l-delta",
+      "value": "#{$pagination-item-focus-border-l-delta},"
+    },
+    {
+      "name": "pagination-item-color-l",
+      "value": "#{$pagination-item-color-l},"
+    },
+    {
+      "name": "pagination-item-font-size",
+      "value": "1em"
+    },
+    {
+      "name": "pagination-item-margin",
+      "value": "0.25rem"
+    },
+    {
+      "name": "pagination-item-padding-left",
+      "value": "0.5em"
+    },
+    {
+      "name": "pagination-item-padding-right",
+      "value": "0.5em"
+    },
+    {
+      "name": "pagination-item-outer-shadow-h",
+      "value": "#{$pagination-item-outer-shadow-h},"
+    },
+    {
+      "name": "pagination-item-outer-shadow-s",
+      "value": "#{$pagination-item-outer-shadow-s},"
+    },
+    {
+      "name": "pagination-item-outer-shadow-l",
+      "value": "#{$pagination-item-outer-shadow-l},"
+    },
+    {
+      "name": "pagination-item-outer-shadow-a",
+      "value": "#{$pagination-item-outer-shadow-a},"
+    },
+    {
+      "name": "pagination-nav-padding-left",
+      "value": "0.75em"
+    },
+    {
+      "name": "pagination-nav-padding-right",
+      "value": "0.75em"
+    },
+    {
+      "name": "pagination-disabled-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "pagination-disabled-background-color",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "pagination-disabled-border-color",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "pagination-current-color",
+      "value": "var(--bulma-link-invert)"
+    },
+    {
+      "name": "pagination-current-background-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "pagination-current-border-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "pagination-ellipsis-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "pagination-shadow-inset",
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.2\n)"
+    },
+    {
+      "name": "pagination-selected-item-h",
+      "value": "#{$pagination-selected-item-h},"
+    },
+    {
+      "name": "pagination-selected-item-s",
+      "value": "#{$pagination-selected-item-s},"
+    },
+    {
+      "name": "pagination-selected-item-l",
+      "value": "#{$pagination-selected-item-l},"
+    },
+    {
+      "name": "pagination-selected-item-background-l",
+      "value": "#{$pagination-selected-item-background-l},"
+    },
+    {
+      "name": "pagination-selected-item-border-l",
+      "value": "#{$pagination-selected-item-border-l},"
+    },
+    {
+      "name": "pagination-selected-item-color-l",
+      "value": "#{$pagination-selected-item-color-l},"
+    }
+  ]
+}
--- a/docs/_data/variables/components/panel.json
+++ b/docs/_data/variables/components/panel.json
@ -1,187 +1,208 @@
 {
-  "by_name": {
-    "$panel-margin": {
-      "name": "$panel-margin",
-      "value": "$block-spacing",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "1.5rem"
+  "sass-vars": [
+    {
+      "name": "panel-margin",
+      "value": "var(--bulma-block-spacing)",
+      "css-var": "panel-margin"
    },
-    "$panel-item-border": {
-      "name": "$panel-item-border",
-      "value": "1px solid $border-light",
-      "type": "size"
+    {
+      "name": "panel-item-border",
+      "value": "1px solid var(--bulma-border-weak)",
+      "css-var": "panel-item-border"
    },
-    "$panel-radius": {
-      "name": "$panel-radius",
-      "value": "$radius-large",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "6px"
+    {
+      "name": "panel-radius",
+      "value": "var(--bulma-radius-large)",
+      "css-var": "panel-radius"
    },
-    "$panel-shadow": {
-      "name": "$panel-shadow",
-      "value": "$shadow",
-      "type": "variable",
-      "computed_type": "shadow",
-      "computed_value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)"
+    {
+      "name": "panel-shadow",
+      "value": "var(--bulma-shadow)",
+      "css-var": "panel-shadow"
    },
-    "$panel-heading-background-color": {
-      "name": "$panel-heading-background-color",
-      "value": "$border-light",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 93%)"
-    },
-    "$panel-heading-color": {
-      "name": "$panel-heading-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$panel-heading-line-height": {
-      "name": "$panel-heading-line-height",
+    {
+      "name": "panel-heading-line-height",
      "value": "1.25",
-      "type": "unitless"
+      "css-var": "panel-heading-line-height"
    },
-    "$panel-heading-padding": {
-      "name": "$panel-heading-padding",
-      "value": "0.75em 1em",
-      "type": "size"
+    {
+      "name": "panel-heading-padding",
+      "value": "1em 1.25em",
+      "css-var": "panel-heading-padding"
    },
-    "$panel-heading-radius": {
-      "name": "$panel-heading-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
+    {
+      "name": "panel-heading-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "panel-heading-radius"
    },
-    "$panel-heading-size": {
-      "name": "$panel-heading-size",
+    {
+      "name": "panel-heading-size",
      "value": "1.25em",
-      "type": "size"
+      "css-var": "panel-heading-size"
    },
-    "$panel-heading-weight": {
-      "name": "$panel-heading-weight",
-      "value": "$weight-bold",
-      "type": "variable",
-      "computed_type": "font-weight",
-      "computed_value": "700"
+    {
+      "name": "panel-heading-weight",
+      "value": "var(--bulma-weight-bold)",
+      "css-var": "panel-heading-weight"
    },
-    "$panel-tabs-font-size": {
-      "name": "$panel-tabs-font-size",
-      "value": "0.875em",
-      "type": "size"
+    {
+      "name": "panel-tabs-font-size",
+      "value": "1em",
+      "css-var": "panel-tabs-font-size"
    },
-    "$panel-tab-border-bottom": {
-      "name": "$panel-tab-border-bottom",
-      "value": "1px solid $border",
-      "type": "size"
+    {
+      "name": "panel-tab-border-bottom-color",
+      "value": "var(--bulma-border)",
+      "css-var": "panel-tab-border-bottom-color"
    },
-    "$panel-tab-active-border-bottom-color": {
-      "name": "$panel-tab-active-border-bottom-color",
-      "value": "$link-active-border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "panel-tab-border-bottom-style",
+      "value": "solid",
+      "css-var": "panel-tab-border-bottom-style"
    },
-    "$panel-tab-active-color": {
-      "name": "$panel-tab-active-color",
-      "value": "$link-active",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "panel-tab-border-bottom-width",
+      "value": "1px",
+      "css-var": "panel-tab-border-bottom-width"
    },
-    "$panel-list-item-color": {
-      "name": "$panel-list-item-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "panel-tab-active-color",
+      "value": "var(--bulma-link-active)",
+      "css-var": "panel-tab-active-color"
    },
-    "$panel-list-item-hover-color": {
-      "name": "$panel-list-item-hover-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "panel-list-item-color",
+      "value": "var(--bulma-text)",
+      "css-var": "panel-list-item-color"
    },
-    "$panel-block-color": {
-      "name": "$panel-block-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "panel-list-item-hover-color",
+      "value": "var(--bulma-link)",
+      "css-var": "panel-list-item-hover-color"
    },
-    "$panel-block-hover-background-color": {
-      "name": "$panel-block-hover-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "panel-block-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "panel-block-color"
    },
-    "$panel-block-active-border-left-color": {
-      "name": "$panel-block-active-border-left-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "panel-block-hover-background-color",
+      "value": "var(--bulma-background)",
+      "css-var": "panel-block-hover-background-color"
    },
-    "$panel-block-active-color": {
-      "name": "$panel-block-active-color",
-      "value": "$link-active",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "panel-block-active-border-left-color",
+      "value": "var(--bulma-link)",
+      "css-var": "panel-block-active-border-left-color"
    },
-    "$panel-block-active-icon-color": {
-      "name": "$panel-block-active-icon-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "panel-block-active-color",
+      "value": "var(--bulma-link-active)",
+      "css-var": "panel-block-active-color"
    },
-    "$panel-icon-color": {
-      "name": "$panel-icon-color",
-      "value": "$text-light",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 48%)"
+    {
+      "name": "panel-block-active-icon-color",
+      "value": "var(--bulma-link)",
+      "css-var": "panel-block-active-icon-color"
    },
-    "$panel-colors": {
-      "name": "$panel-colors",
-      "value": "$colors",
-      "type": "variable",
-      "computed_type": "map",
-      "computed_value": "Bulma colors"
+    {
+      "name": "panel-icon-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "panel-icon-color"
+    },
+    {
+      "name": "panel-colors",
+      "value": "dv.$colors"
    }
-  },
-  "list": [
-    "$panel-margin",
-    "$panel-item-border",
-    "$panel-radius",
-    "$panel-shadow",
-    "$panel-heading-background-color",
-    "$panel-heading-color",
-    "$panel-heading-line-height",
-    "$panel-heading-padding",
-    "$panel-heading-radius",
-    "$panel-heading-size",
-    "$panel-heading-weight",
-    "$panel-tabs-font-size",
-    "$panel-tab-border-bottom",
-    "$panel-tab-active-border-bottom-color",
-    "$panel-tab-active-color",
-    "$panel-list-item-color",
-    "$panel-list-item-hover-color",
-    "$panel-block-color",
-    "$panel-block-hover-background-color",
-    "$panel-block-active-border-left-color",
-    "$panel-block-active-color",
-    "$panel-block-active-icon-color",
-    "$panel-icon-color",
-    "$panel-colors"
  ],
-  "file_path": "components/panel.sass"
+  "css-vars": [
+    {
+      "name": "panel-margin",
+      "value": "var(--bulma-block-spacing)"
+    },
+    {
+      "name": "panel-item-border",
+      "value": "1px solid var(--bulma-border-weak)"
+    },
+    {
+      "name": "panel-radius",
+      "value": "var(--bulma-radius-large)"
+    },
+    {
+      "name": "panel-shadow",
+      "value": "var(--bulma-shadow)"
+    },
+    {
+      "name": "panel-heading-line-height",
+      "value": "1.25"
+    },
+    {
+      "name": "panel-heading-padding",
+      "value": "1em 1.25em"
+    },
+    {
+      "name": "panel-heading-radius",
+      "value": "var(--bulma-radius)"
+    },
+    {
+      "name": "panel-heading-size",
+      "value": "1.25em"
+    },
+    {
+      "name": "panel-heading-weight",
+      "value": "var(--bulma-weight-bold)"
+    },
+    {
+      "name": "panel-tabs-font-size",
+      "value": "1em"
+    },
+    {
+      "name": "panel-tab-border-bottom-color",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "panel-tab-border-bottom-style",
+      "value": "solid"
+    },
+    {
+      "name": "panel-tab-border-bottom-width",
+      "value": "1px"
+    },
+    {
+      "name": "panel-tab-active-color",
+      "value": "var(--bulma-link-active)"
+    },
+    {
+      "name": "panel-list-item-color",
+      "value": "var(--bulma-text)"
+    },
+    {
+      "name": "panel-list-item-hover-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "panel-block-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "panel-block-hover-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "panel-block-active-border-left-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "panel-block-active-color",
+      "value": "var(--bulma-link-active)"
+    },
+    {
+      "name": "panel-block-active-icon-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "panel-icon-color",
+      "value": "var(--bulma-text-weak)"
+    }
+  ]
 }
--- a/docs/_data/variables/components/tabs.json
+++ b/docs/_data/variables/components/tabs.json
@ -1,187 +1,222 @@
 {
-  "by_name": {
-    "$tabs-border-bottom-color": {
-      "name": "$tabs-border-bottom-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+  "sass-vars": [
+    {
+      "name": "tabs-border-bottom-color",
+      "value": "var(--bulma-border)",
+      "css-var": "tabs-border-bottom-color"
    },
-    "$tabs-border-bottom-style": {
-      "name": "$tabs-border-bottom-style",
+    {
+      "name": "tabs-border-bottom-style",
      "value": "solid",
-      "type": "string"
+      "css-var": "tabs-border-bottom-style"
    },
-    "$tabs-border-bottom-width": {
-      "name": "$tabs-border-bottom-width",
+    {
+      "name": "tabs-border-bottom-width",
      "value": "1px",
-      "type": "size"
+      "css-var": "tabs-border-bottom-width"
    },
-    "$tabs-link-color": {
-      "name": "$tabs-link-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "tabs-link-color",
+      "value": "var(--bulma-text)",
+      "css-var": "tabs-link-color"
    },
-    "$tabs-link-hover-border-bottom-color": {
-      "name": "$tabs-link-hover-border-bottom-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "tabs-link-hover-border-bottom-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "tabs-link-hover-border-bottom-color"
    },
-    "$tabs-link-hover-color": {
-      "name": "$tabs-link-hover-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "tabs-link-hover-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "tabs-link-hover-color"
    },
-    "$tabs-link-active-border-bottom-color": {
-      "name": "$tabs-link-active-border-bottom-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "tabs-link-active-border-bottom-color",
+      "value": "var(--bulma-link-text)",
+      "css-var": "tabs-link-active-border-bottom-color"
    },
-    "$tabs-link-active-color": {
-      "name": "$tabs-link-active-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "tabs-link-active-color",
+      "value": "var(--bulma-link-text)",
+      "css-var": "tabs-link-active-color"
    },
-    "$tabs-link-padding": {
-      "name": "$tabs-link-padding",
+    {
+      "name": "tabs-link-padding",
      "value": "0.5em 1em",
-      "type": "size"
+      "css-var": "tabs-link-padding"
    },
-    "$tabs-boxed-link-radius": {
-      "name": "$tabs-boxed-link-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
+    {
+      "name": "tabs-boxed-link-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "tabs-boxed-link-radius"
    },
-    "$tabs-boxed-link-hover-background-color": {
-      "name": "$tabs-boxed-link-hover-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "tabs-boxed-link-hover-background-color",
+      "value": "var(--bulma-background)",
+      "css-var": "tabs-boxed-link-hover-background-color"
    },
-    "$tabs-boxed-link-hover-border-bottom-color": {
-      "name": "$tabs-boxed-link-hover-border-bottom-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+    {
+      "name": "tabs-boxed-link-hover-border-bottom-color",
+      "value": "var(--bulma-border)",
+      "css-var": "tabs-boxed-link-hover-border-bottom-color"
    },
-    "$tabs-boxed-link-active-background-color": {
-      "name": "$tabs-boxed-link-active-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+    {
+      "name": "tabs-boxed-link-active-background-color",
+      "value": "var(--bulma-scheme-main)",
+      "css-var": "tabs-boxed-link-active-background-color"
    },
-    "$tabs-boxed-link-active-border-color": {
-      "name": "$tabs-boxed-link-active-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+    {
+      "name": "tabs-boxed-link-active-border-color",
+      "value": "var(--bulma-border)",
+      "css-var": "tabs-boxed-link-active-border-color"
    },
-    "$tabs-boxed-link-active-border-bottom-color": {
-      "name": "$tabs-boxed-link-active-border-bottom-color",
+    {
+      "name": "tabs-boxed-link-active-border-bottom-color",
      "value": "transparent",
-      "type": "string"
+      "css-var": "tabs-boxed-link-active-border-bottom-color"
    },
-    "$tabs-toggle-link-border-color": {
-      "name": "$tabs-toggle-link-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+    {
+      "name": "tabs-toggle-link-border-color",
+      "value": "var(--bulma-border)",
+      "css-var": "tabs-toggle-link-border-color"
    },
-    "$tabs-toggle-link-border-style": {
-      "name": "$tabs-toggle-link-border-style",
+    {
+      "name": "tabs-toggle-link-border-style",
      "value": "solid",
-      "type": "string"
+      "css-var": "tabs-toggle-link-border-style"
    },
-    "$tabs-toggle-link-border-width": {
-      "name": "$tabs-toggle-link-border-width",
+    {
+      "name": "tabs-toggle-link-border-width",
      "value": "1px",
-      "type": "size"
+      "css-var": "tabs-toggle-link-border-width"
    },
-    "$tabs-toggle-link-hover-background-color": {
-      "name": "$tabs-toggle-link-hover-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "tabs-toggle-link-hover-background-color",
+      "value": "var(--bulma-background)",
+      "css-var": "tabs-toggle-link-hover-background-color"
    },
-    "$tabs-toggle-link-hover-border-color": {
-      "name": "$tabs-toggle-link-hover-border-color",
-      "value": "$border-hover",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 71%)"
+    {
+      "name": "tabs-toggle-link-hover-border-color",
+      "value": "var(--bulma-border-hover)",
+      "css-var": "tabs-toggle-link-hover-border-color"
    },
-    "$tabs-toggle-link-radius": {
-      "name": "$tabs-toggle-link-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
+    {
+      "name": "tabs-toggle-link-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "tabs-toggle-link-radius"
    },
-    "$tabs-toggle-link-active-background-color": {
-      "name": "$tabs-toggle-link-active-background-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "tabs-toggle-link-active-background-color",
+      "value": "var(--bulma-link)",
+      "css-var": "tabs-toggle-link-active-background-color"
    },
-    "$tabs-toggle-link-active-border-color": {
-      "name": "$tabs-toggle-link-active-border-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "tabs-toggle-link-active-border-color",
+      "value": "var(--bulma-link)",
+      "css-var": "tabs-toggle-link-active-border-color"
    },
-    "$tabs-toggle-link-active-color": {
-      "name": "$tabs-toggle-link-active-color",
-      "value": "$link-invert",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "#fff"
+    {
+      "name": "tabs-toggle-link-active-color",
+      "value": "var(--bulma-link-invert)",
+      "css-var": "tabs-toggle-link-active-color"
    }
-  },
-  "list": [
-    "$tabs-border-bottom-color",
-    "$tabs-border-bottom-style",
-    "$tabs-border-bottom-width",
-    "$tabs-link-color",
-    "$tabs-link-hover-border-bottom-color",
-    "$tabs-link-hover-color",
-    "$tabs-link-active-border-bottom-color",
-    "$tabs-link-active-color",
-    "$tabs-link-padding",
-    "$tabs-boxed-link-radius",
-    "$tabs-boxed-link-hover-background-color",
-    "$tabs-boxed-link-hover-border-bottom-color",
-    "$tabs-boxed-link-active-background-color",
-    "$tabs-boxed-link-active-border-color",
-    "$tabs-boxed-link-active-border-bottom-color",
-    "$tabs-toggle-link-border-color",
-    "$tabs-toggle-link-border-style",
-    "$tabs-toggle-link-border-width",
-    "$tabs-toggle-link-hover-background-color",
-    "$tabs-toggle-link-hover-border-color",
-    "$tabs-toggle-link-radius",
-    "$tabs-toggle-link-active-background-color",
-    "$tabs-toggle-link-active-border-color",
-    "$tabs-toggle-link-active-color"
  ],
-  "file_path": "components/tabs.sass"
+  "css-vars": [
+    {
+      "name": "tabs-border-bottom-color",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "tabs-border-bottom-style",
+      "value": "solid"
+    },
+    {
+      "name": "tabs-border-bottom-width",
+      "value": "1px"
+    },
+    {
+      "name": "tabs-link-color",
+      "value": "var(--bulma-text)"
+    },
+    {
+      "name": "tabs-link-hover-border-bottom-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "tabs-link-hover-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "tabs-link-active-border-bottom-color",
+      "value": "var(--bulma-link-text)"
+    },
+    {
+      "name": "tabs-link-active-color",
+      "value": "var(--bulma-link-text)"
+    },
+    {
+      "name": "tabs-link-padding",
+      "value": "0.5em 1em"
+    },
+    {
+      "name": "tabs-boxed-link-radius",
+      "value": "var(--bulma-radius)"
+    },
+    {
+      "name": "tabs-boxed-link-hover-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "tabs-boxed-link-hover-border-bottom-color",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "tabs-boxed-link-active-background-color",
+      "value": "var(--bulma-scheme-main)"
+    },
+    {
+      "name": "tabs-boxed-link-active-border-color",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "tabs-boxed-link-active-border-bottom-color",
+      "value": "transparent"
+    },
+    {
+      "name": "tabs-toggle-link-border-color",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "tabs-toggle-link-border-style",
+      "value": "solid"
+    },
+    {
+      "name": "tabs-toggle-link-border-width",
+      "value": "1px"
+    },
+    {
+      "name": "tabs-toggle-link-hover-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "tabs-toggle-link-hover-border-color",
+      "value": "var(--bulma-border-hover)"
+    },
+    {
+      "name": "tabs-toggle-link-radius",
+      "value": "var(--bulma-radius)"
+    },
+    {
+      "name": "tabs-toggle-link-active-background-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "tabs-toggle-link-active-border-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "tabs-toggle-link-active-color",
+      "value": "var(--bulma-link-invert)"
+    }
+  ]
 }
--- a/docs/_data/variables/elements/block.json
+++ b/docs/_data/variables/elements/block.json
@ -0,0 +1,9 @@
+{
+  "sass-vars": [],
+  "css-vars": [
+    {
+      "name": "block-spacing",
+      "value": "1.5rem"
+    }
+  ]
+}
--- a/docs/_data/variables/elements/box.json
+++ b/docs/_data/variables/elements/box.json
@ -1,57 +1,69 @@
 {
-  "by_name": {
-    "$box-color": {
-      "name": "$box-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+  "sass-vars": [
+    {
+      "name": "box-background-color",
+      "value": "var(--bulma-scheme-main)",
+      "css-var": "box-background-color"
    },
-    "$box-background-color": {
-      "name": "$box-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+    {
+      "name": "box-color",
+      "value": "var(--bulma-text)",
+      "css-var": "box-color"
    },
-    "$box-radius": {
-      "name": "$box-radius",
-      "value": "$radius-large",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "6px"
+    {
+      "name": "box-radius",
+      "value": "var(--bulma-radius-large)",
+      "css-var": "box-radius"
    },
-    "$box-shadow": {
-      "name": "$box-shadow",
-      "value": "$shadow",
-      "type": "variable",
-      "computed_type": "shadow",
-      "computed_value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)"
+    {
+      "name": "box-shadow",
+      "value": "var(--bulma-shadow)",
+      "css-var": "box-shadow"
    },
-    "$box-padding": {
-      "name": "$box-padding",
+    {
+      "name": "box-padding",
      "value": "1.25rem",
-      "type": "size"
+      "css-var": "box-padding"
    },
-    "$box-link-hover-shadow": {
-      "name": "$box-link-hover-shadow",
-      "value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link",
-      "type": "shadow"
+    {
+      "name": "box-link-hover-shadow",
+      "value": "0 0.5em 1em -0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n),\n0 0 0 1px var(--bulma-link)",
+      "css-var": "box-link-hover-shadow"
    },
-    "$box-link-active-shadow": {
-      "name": "$box-link-active-shadow",
-      "value": "inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link",
-      "type": "shadow"
+    {
+      "name": "box-link-active-shadow",
+      "value": "inset 0 1px 2px hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.2\n),\n0 0 0 1px var(--bulma-link)",
+      "css-var": "box-link-active-shadow"
    }
-  },
-  "list": [
-    "$box-color",
-    "$box-background-color",
-    "$box-radius",
-    "$box-shadow",
-    "$box-padding",
-    "$box-link-hover-shadow",
-    "$box-link-active-shadow"
  ],
-  "file_path": "elements/box.sass"
-}
+  "css-vars": [
+    {
+      "name": "box-background-color",
+      "value": "var(--bulma-scheme-main)"
+    },
+    {
+      "name": "box-color",
+      "value": "var(--bulma-text)"
+    },
+    {
+      "name": "box-radius",
+      "value": "var(--bulma-radius-large)"
+    },
+    {
+      "name": "box-shadow",
+      "value": "var(--bulma-shadow)"
+    },
+    {
+      "name": "box-padding",
+      "value": "1.25rem"
+    },
+    {
+      "name": "box-link-hover-shadow",
+      "value": "0 0.5em 1em -0.125em hsla(\nvar(--bulma-scheme-h),\nvar(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1),\n0 0 0 1px var(--bulma-link)"
+    },
+    {
+      "name": "box-link-active-shadow",
+      "value": "inset 0 1px 2px hsla( var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.2),\n0 0 0 1px var(--bulma-link)"
+    }
+  ]
+}
--- a/docs/_data/variables/elements/button.json
+++ b/docs/_data/variables/elements/button.json
@ -1,251 +1,271 @@
 {
-  "by_name": {
-    "$button-color": {
-      "name": "$button-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+  "sass-vars": [
+    {
+      "name": "button-weight",
+      "value": "var(--bulma-weight-medium)",
+      "css-var": "button-weight"
    },
-    "$button-background-color": {
-      "name": "$button-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
-    },
-    "$button-family": {
-      "name": "$button-family",
+    {
+      "name": "button-family",
      "value": "false",
-      "type": "boolean"
+      "css-var": "button-family"
    },
-    "$button-border-color": {
-      "name": "$button-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+    {
+      "name": "button-border-color",
+      "value": "var(--bulma-border)",
+      "css-var": "button-border-color"
    },
-    "$button-border-width": {
-      "name": "$button-border-width",
-      "value": "$control-border-width",
-      "type": "variable"
+    {
+      "name": "button-border-style",
+      "value": "solid",
+      "css-var": "button-border-style"
    },
-    "$button-padding-vertical": {
-      "name": "$button-padding-vertical",
-      "value": "calc(0.5em - #{$button-border-width})",
-      "type": "size"
+    {
+      "name": "button-border-width",
+      "value": "var(--bulma-control-border-width)",
+      "css-var": "button-border-width"
    },
-    "$button-padding-horizontal": {
-      "name": "$button-padding-horizontal",
+    {
+      "name": "button-padding-vertical",
+      "value": "0.5em",
+      "css-var": "button-padding-vertical"
+    },
+    {
+      "name": "button-padding-horizontal",
      "value": "1em",
-      "type": "size"
+      "css-var": "button-padding-horizontal"
    },
-    "$button-hover-color": {
-      "name": "$button-hover-color",
-      "value": "$link-hover",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "button-focus-border-color",
+      "value": "var(--bulma-link-focus-border)",
+      "css-var": "button-focus-border-color"
    },
-    "$button-hover-border-color": {
-      "name": "$button-hover-border-color",
-      "value": "$link-hover-border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 71%)"
-    },
-    "$button-focus-color": {
-      "name": "$button-focus-color",
-      "value": "$link-focus",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$button-focus-border-color": {
-      "name": "$button-focus-border-color",
-      "value": "$link-focus-border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
-    },
-    "$button-focus-box-shadow-size": {
-      "name": "$button-focus-box-shadow-size",
+    {
+      "name": "button-focus-box-shadow-size",
      "value": "0 0 0 0.125em",
-      "type": "size"
+      "css-var": "button-focus-box-shadow-size"
    },
-    "$button-focus-box-shadow-color": {
-      "name": "$button-focus-box-shadow-color",
-      "value": "bulmaRgba($link, 0.25)",
-      "type": "compound"
+    {
+      "name": "button-focus-box-shadow-color",
+      "value": "hsla(\n  var(--bulma-link-h),\n  var(--bulma-link-s),\n  var(--bulma-link-on-scheme-l),\n  0.25\n)",
+      "css-var": "button-focus-box-shadow-color"
    },
-    "$button-active-color": {
-      "name": "$button-active-color",
-      "value": "$link-active",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "button-active-color",
+      "value": "var(--bulma-link-active)",
+      "css-var": "button-active-color"
    },
-    "$button-active-border-color": {
-      "name": "$button-active-border-color",
-      "value": "$link-active-border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "button-active-border-color",
+      "value": "var(--bulma-link-active-border)",
+      "css-var": "button-active-border-color"
    },
-    "$button-text-color": {
-      "name": "$button-text-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "button-text-color",
+      "value": "var(--bulma-text)",
+      "css-var": "button-text-color"
    },
-    "$button-text-decoration": {
-      "name": "$button-text-decoration",
+    {
+      "name": "button-text-decoration",
      "value": "underline",
-      "type": "string"
+      "css-var": "button-text-decoration"
    },
-    "$button-text-hover-background-color": {
-      "name": "$button-text-hover-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "button-text-hover-background-color",
+      "value": "var(--bulma-background)",
+      "css-var": "button-text-hover-background-color"
    },
-    "$button-text-hover-color": {
-      "name": "$button-text-hover-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "button-text-hover-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "button-text-hover-color"
    },
-    "$button-ghost-background": {
-      "name": "$button-ghost-background",
+    {
+      "name": "button-ghost-background",
      "value": "none",
-      "type": "string"
+      "css-var": "button-ghost-background"
    },
-    "$button-ghost-border-color": {
-      "name": "$button-ghost-border-color",
+    {
+      "name": "button-ghost-border-color",
      "value": "transparent",
-      "type": "string"
+      "css-var": "button-ghost-border-color"
    },
-    "$button-ghost-color": {
-      "name": "$button-ghost-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "button-ghost-color",
+      "value": "var(--bulma-link-text)",
+      "css-var": "button-ghost-color"
    },
-    "$button-ghost-decoration": {
-      "name": "$button-ghost-decoration",
+    {
+      "name": "button-ghost-decoration",
      "value": "none",
-      "type": "string"
+      "css-var": "button-ghost-decoration"
    },
-    "$button-ghost-hover-color": {
-      "name": "$button-ghost-hover-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "button-ghost-hover-color",
+      "value": "var(--bulma-link)",
+      "css-var": "button-ghost-hover-color"
    },
-    "$button-ghost-hover-decoration": {
-      "name": "$button-ghost-hover-decoration",
+    {
+      "name": "button-ghost-hover-decoration",
      "value": "underline",
-      "type": "string"
+      "css-var": "button-ghost-hover-decoration"
    },
-    "$button-disabled-background-color": {
-      "name": "$button-disabled-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+    {
+      "name": "button-disabled-background-color",
+      "value": "var(--bulma-scheme-main)",
+      "css-var": "button-disabled-background-color"
    },
-    "$button-disabled-border-color": {
-      "name": "$button-disabled-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+    {
+      "name": "button-disabled-border-color",
+      "value": "var(--bulma-border)",
+      "css-var": "button-disabled-border-color"
    },
-    "$button-disabled-shadow": {
-      "name": "$button-disabled-shadow",
+    {
+      "name": "button-disabled-shadow",
      "value": "none",
-      "type": "shadow"
+      "css-var": "button-disabled-shadow"
    },
-    "$button-disabled-opacity": {
-      "name": "$button-disabled-opacity",
+    {
+      "name": "button-disabled-opacity",
      "value": "0.5",
-      "type": "unitless"
+      "css-var": "button-disabled-opacity"
    },
-    "$button-static-color": {
-      "name": "$button-static-color",
-      "value": "$text-light",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 48%)"
+    {
+      "name": "button-static-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "button-static-color"
    },
-    "$button-static-background-color": {
-      "name": "$button-static-background-color",
-      "value": "$scheme-main-ter",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "button-static-background-color",
+      "value": "var(--bulma-scheme-main-ter)",
+      "css-var": "button-static-background-color"
    },
-    "$button-static-border-color": {
-      "name": "$button-static-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+    {
+      "name": "button-static-border-color",
+      "value": "var(--bulma-border)",
+      "css-var": "button-static-border-color"
    },
-    "$button-colors": {
-      "name": "$button-colors",
-      "value": "$colors",
-      "type": "variable",
-      "computed_type": "map",
-      "computed_value": "Bulma colors"
-    },
-    "$button-responsive-sizes": {
-      "name": "$button-responsive-sizes",
-      "value": "(\"mobile\": (\"small\": ($size-small * 0.75), \"normal\": ($size-small * 0.875), \"medium\": $size-small, \"large\": $size-normal), \"tablet-only\": (\"small\": ($size-small * 0.875), \"normal\": ($size-small), \"medium\": $size-normal, \"large\": $size-medium))",
-      "type": "compound"
+    {
+      "name": "button-colors",
+      "value": "dv.$colors"
    }
-  },
-  "list": [
-    "$button-color",
-    "$button-background-color",
-    "$button-family",
-    "$button-border-color",
-    "$button-border-width",
-    "$button-padding-vertical",
-    "$button-padding-horizontal",
-    "$button-hover-color",
-    "$button-hover-border-color",
-    "$button-focus-color",
-    "$button-focus-border-color",
-    "$button-focus-box-shadow-size",
-    "$button-focus-box-shadow-color",
-    "$button-active-color",
-    "$button-active-border-color",
-    "$button-text-color",
-    "$button-text-decoration",
-    "$button-text-hover-background-color",
-    "$button-text-hover-color",
-    "$button-ghost-background",
-    "$button-ghost-border-color",
-    "$button-ghost-color",
-    "$button-ghost-decoration",
-    "$button-ghost-hover-color",
-    "$button-ghost-hover-decoration",
-    "$button-disabled-background-color",
-    "$button-disabled-border-color",
-    "$button-disabled-shadow",
-    "$button-disabled-opacity",
-    "$button-static-color",
-    "$button-static-background-color",
-    "$button-static-border-color",
-    "$button-colors",
-    "$button-responsive-sizes"
  ],
-  "file_path": "elements/button.sass"
-}
+  "css-vars": [
+    {
+      "name": "button-family",
+      "value": "false"
+    },
+    {
+      "name": "button-weight",
+      "value": "var(--bulma-weight-medium)"
+    },
+    {
+      "name": "button-border-color",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "button-border-style",
+      "value": "solid"
+    },
+    {
+      "name": "button-border-width",
+      "value": "var(--bulma-control-border-width)"
+    },
+    {
+      "name": "button-padding-vertical",
+      "value": "0.5em"
+    },
+    {
+      "name": "button-padding-horizontal",
+      "value": "1em"
+    },
+    {
+      "name": "button-focus-border-color",
+      "value": "var(--bulma-link-focus-border)"
+    },
+    {
+      "name": "button-focus-box-shadow-size",
+      "value": "0 0 0 0.125em"
+    },
+    {
+      "name": "button-focus-box-shadow-color",
+      "value": "hsla(\n  var(--bulma-link-h),\n  var(--bulma-link-s),\n  var(--bulma-link-on-scheme-l),\n  0.25\n)"
+    },
+    {
+      "name": "button-active-color",
+      "value": "var(--bulma-link-active)"
+    },
+    {
+      "name": "button-active-border-color",
+      "value": "var(--bulma-link-active-border)"
+    },
+    {
+      "name": "button-text-color",
+      "value": "var(--bulma-text)"
+    },
+    {
+      "name": "button-text-decoration",
+      "value": "underline"
+    },
+    {
+      "name": "button-text-hover-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "button-text-hover-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "button-ghost-background",
+      "value": "none"
+    },
+    {
+      "name": "button-ghost-border-color",
+      "value": "transparent"
+    },
+    {
+      "name": "button-ghost-color",
+      "value": "var(--bulma-link-text)"
+    },
+    {
+      "name": "button-ghost-decoration",
+      "value": "none"
+    },
+    {
+      "name": "button-ghost-hover-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "button-ghost-hover-decoration",
+      "value": "underline"
+    },
+    {
+      "name": "button-disabled-background-color",
+      "value": "var(--bulma-scheme-main)"
+    },
+    {
+      "name": "button-disabled-border-color",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "button-disabled-shadow",
+      "value": "none"
+    },
+    {
+      "name": "button-disabled-opacity",
+      "value": "0.5"
+    },
+    {
+      "name": "button-static-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "button-static-background-color",
+      "value": "var(--bulma-scheme-main-ter)"
+    },
+    {
+      "name": "button-static-border-color",
+      "value": "var(--bulma-border)"
+    }
+  ]
+}
--- a/docs/_data/variables/elements/container.json
+++ b/docs/_data/variables/elements/container.json
@ -1,21 +0,0 @@
-{
-  "by_name": {
-    "$container-offset": {
-      "name": "$container-offset",
-      "value": "(2 * $gap)",
-      "type": "compound"
-    },
-    "$container-max-width": {
-      "name": "$container-max-width",
-      "value": "$fullhd",
-      "type": "variable",
-      "computed_type": "computed",
-      "computed_value": "1344px + (2 * $gap)"
-    }
-  },
-  "list": [
-    "$container-offset",
-    "$container-max-width"
-  ],
-  "file_path": "elements/container.sass"
-}
--- a/docs/_data/variables/elements/content.json
+++ b/docs/_data/variables/elements/content.json
@ -1,121 +1,159 @@
 {
-  "by_name": {
-    "$content-heading-color": {
-      "name": "$content-heading-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+  "sass-vars": [
+    {
+      "name": "content-heading-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "content-heading-color"
    },
-    "$content-heading-weight": {
-      "name": "$content-heading-weight",
-      "value": "$weight-semibold",
-      "type": "variable",
-      "computed_type": "font-weight",
-      "computed_value": "600"
+    {
+      "name": "content-heading-weight",
+      "value": "var(--bulma-weight-extrabold)",
+      "css-var": "content-heading-weight"
    },
-    "$content-heading-line-height": {
-      "name": "$content-heading-line-height",
+    {
+      "name": "content-heading-line-height",
      "value": "1.125",
-      "type": "unitless"
+      "css-var": "content-heading-line-height"
    },
-    "$content-block-margin-bottom": {
-      "name": "$content-block-margin-bottom",
+    {
+      "name": "content-block-margin-bottom",
      "value": "1em",
-      "type": "size"
+      "css-var": "content-block-margin-bottom"
    },
-    "$content-blockquote-background-color": {
-      "name": "$content-blockquote-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "content-blockquote-background-color",
+      "value": "var(--bulma-background)",
+      "css-var": "content-blockquote-background-color"
    },
-    "$content-blockquote-border-left": {
-      "name": "$content-blockquote-border-left",
-      "value": "5px solid $border",
-      "type": "size"
+    {
+      "name": "content-blockquote-border-left",
+      "value": "5px solid var(--bulma-border)",
+      "css-var": "content-blockquote-border-left"
    },
-    "$content-blockquote-padding": {
-      "name": "$content-blockquote-padding",
+    {
+      "name": "content-blockquote-padding",
      "value": "1.25em 1.5em",
-      "type": "size"
+      "css-var": "content-blockquote-padding"
    },
-    "$content-pre-padding": {
-      "name": "$content-pre-padding",
+    {
+      "name": "content-pre-padding",
      "value": "1.25em 1.5em",
-      "type": "size"
+      "css-var": "content-pre-padding"
    },
-    "$content-table-cell-border": {
-      "name": "$content-table-cell-border",
-      "value": "1px solid $border",
-      "type": "size"
+    {
+      "name": "content-table-cell-border",
+      "value": "1px solid var(--bulma-border)",
+      "css-var": "content-table-cell-border"
    },
-    "$content-table-cell-border-width": {
-      "name": "$content-table-cell-border-width",
+    {
+      "name": "content-table-cell-border-width",
      "value": "0 0 1px",
-      "type": "size"
+      "css-var": "content-table-cell-border-width"
    },
-    "$content-table-cell-padding": {
-      "name": "$content-table-cell-padding",
+    {
+      "name": "content-table-cell-padding",
      "value": "0.5em 0.75em",
-      "type": "size"
+      "css-var": "content-table-cell-padding"
    },
-    "$content-table-cell-heading-color": {
-      "name": "$content-table-cell-heading-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "content-table-cell-heading-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "content-table-cell-heading-color"
    },
-    "$content-table-head-cell-border-width": {
-      "name": "$content-table-head-cell-border-width",
+    {
+      "name": "content-table-head-cell-border-width",
      "value": "0 0 2px",
-      "type": "size"
+      "css-var": "content-table-head-cell-border-width"
    },
-    "$content-table-head-cell-color": {
-      "name": "$content-table-head-cell-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "content-table-head-cell-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "content-table-head-cell-color"
    },
-    "$content-table-body-last-row-cell-border-bottom-width": {
-      "name": "$content-table-body-last-row-cell-border-bottom-width",
+    {
+      "name": "content-table-body-last-row-cell-border-bottom-width",
      "value": "0",
-      "type": "string"
+      "css-var": "content-table-body-last-row-cell-border-bottom-width"
    },
-    "$content-table-foot-cell-border-width": {
-      "name": "$content-table-foot-cell-border-width",
+    {
+      "name": "content-table-foot-cell-border-width",
      "value": "2px 0 0",
-      "type": "size"
+      "css-var": "content-table-foot-cell-border-width"
    },
-    "$content-table-foot-cell-color": {
-      "name": "$content-table-foot-cell-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "content-table-foot-cell-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "content-table-foot-cell-color"
    }
-  },
-  "list": [
-    "$content-heading-color",
-    "$content-heading-weight",
-    "$content-heading-line-height",
-    "$content-block-margin-bottom",
-    "$content-blockquote-background-color",
-    "$content-blockquote-border-left",
-    "$content-blockquote-padding",
-    "$content-pre-padding",
-    "$content-table-cell-border",
-    "$content-table-cell-border-width",
-    "$content-table-cell-padding",
-    "$content-table-cell-heading-color",
-    "$content-table-head-cell-border-width",
-    "$content-table-head-cell-color",
-    "$content-table-body-last-row-cell-border-bottom-width",
-    "$content-table-foot-cell-border-width",
-    "$content-table-foot-cell-color"
  ],
-  "file_path": "elements/content.sass"
+  "css-vars": [
+    {
+      "name": "content-heading-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "content-heading-weight",
+      "value": "var(--bulma-weight-extrabold)"
+    },
+    {
+      "name": "content-heading-line-height",
+      "value": "1.125"
+    },
+    {
+      "name": "content-block-margin-bottom",
+      "value": "1em"
+    },
+    {
+      "name": "content-blockquote-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "content-blockquote-border-left",
+      "value": "5px solid var(--bulma-border)"
+    },
+    {
+      "name": "content-blockquote-padding",
+      "value": "1.25em 1.5em"
+    },
+    {
+      "name": "content-pre-padding",
+      "value": "1.25em 1.5em"
+    },
+    {
+      "name": "content-table-cell-border",
+      "value": "1px solid var(--bulma-border)"
+    },
+    {
+      "name": "content-table-cell-border-width",
+      "value": "0 0 1px"
+    },
+    {
+      "name": "content-table-cell-padding",
+      "value": "0.5em 0.75em"
+    },
+    {
+      "name": "content-table-cell-heading-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "content-table-head-cell-border-width",
+      "value": "0 0 2px"
+    },
+    {
+      "name": "content-table-head-cell-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "content-table-body-last-row-cell-border-bottom-width",
+      "value": "0"
+    },
+    {
+      "name": "content-table-foot-cell-border-width",
+      "value": "2px 0 0"
+    },
+    {
+      "name": "content-table-foot-cell-color",
+      "value": "var(--bulma-text-strong)"
+    }
+  ]
 }
--- a/docs/_data/variables/elements/delete.json
+++ b/docs/_data/variables/elements/delete.json
@ -0,0 +1,21 @@
+{
+  "sass-vars": [],
+  "css-vars": [
+    {
+      "name": "delete-dimensions",
+      "value": "1.25rem"
+    },
+    {
+      "name": "delete-background-l",
+      "value": "0%"
+    },
+    {
+      "name": "delete-background-alpha",
+      "value": "0.5"
+    },
+    {
+      "name": "delete-color",
+      "value": "var(--bulma-white)"
+    }
+  ]
+}
--- a/docs/_data/variables/elements/form.json
+++ b/docs/_data/variables/elements/form.json
@ -1,253 +0,0 @@
-{
-  "by_name": {
-    "$input-color": {
-      "name": "$input-color",
-      "value": "$grey-darker",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$input-background-color": {
-      "name": "$input-background-color",
-      "value": "$white",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
-    },
-    "$input-border-color": {
-      "name": "$input-border-color",
-      "value": "$grey-lighter",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
-    },
-    "$input-height": {
-      "name": "$input-height",
-      "value": "$control-height",
-      "type": "variable"
-    },
-    "$input-shadow": {
-      "name": "$input-shadow",
-      "value": "inset 0 1px 2px rgba($black, 0.1)",
-      "type": "size"
-    },
-    "$input-placeholder-color": {
-      "name": "$input-placeholder-color",
-      "value": "rgba($input-color, 0.3)",
-      "type": "color"
-    },
-    "$input-hover-color": {
-      "name": "$input-hover-color",
-      "value": "$grey-darker",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$input-hover-border-color": {
-      "name": "$input-hover-border-color",
-      "value": "$grey-light",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 71%)"
-    },
-    "$input-focus-color": {
-      "name": "$input-focus-color",
-      "value": "$grey-darker",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$input-focus-border-color": {
-      "name": "$input-focus-border-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(217, 71%,  53%)"
-    },
-    "$input-focus-box-shadow-size": {
-      "name": "$input-focus-box-shadow-size",
-      "value": "0 0 0 0.125em",
-      "type": "size"
-    },
-    "$input-focus-box-shadow-color": {
-      "name": "$input-focus-box-shadow-color",
-      "value": "rgba($link, 0.25)",
-      "type": "color"
-    },
-    "$input-disabled-color": {
-      "name": "$input-disabled-color",
-      "value": "$text-light",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 48%)"
-    },
-    "$input-disabled-background-color": {
-      "name": "$input-disabled-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
-    },
-    "$input-disabled-border-color": {
-      "name": "$input-disabled-border-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
-    },
-    "$input-disabled-placeholder-color": {
-      "name": "$input-disabled-placeholder-color",
-      "value": "rgba($input-disabled-color, 0.3)",
-      "type": "color"
-    },
-    "$input-arrow": {
-      "name": "$input-arrow",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(217, 71%,  53%)"
-    },
-    "$input-icon-color": {
-      "name": "$input-icon-color",
-      "value": "$grey-lighter",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
-    },
-    "$input-icon-active-color": {
-      "name": "$input-icon-active-color",
-      "value": "$grey",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 48%)"
-    },
-    "$input-radius": {
-      "name": "$input-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
-    },
-    "$file-border-color": {
-      "name": "$file-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
-    },
-    "$file-radius": {
-      "name": "$file-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
-    },
-    "$file-cta-background-color": {
-      "name": "$file-cta-background-color",
-      "value": "$white-ter",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
-    },
-    "$file-cta-color": {
-      "name": "$file-cta-color",
-      "value": "$grey-dark",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
-    },
-    "$file-cta-hover-color": {
-      "name": "$file-cta-hover-color",
-      "value": "$grey-darker",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$file-cta-active-color": {
-      "name": "$file-cta-active-color",
-      "value": "$grey-darker",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$file-name-border-color": {
-      "name": "$file-name-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
-    },
-    "$file-name-border-style": {
-      "name": "$file-name-border-style",
-      "value": "solid",
-      "type": "string"
-    },
-    "$file-name-border-width": {
-      "name": "$file-name-border-width",
-      "value": "1px 1px 1px 0",
-      "type": "size"
-    },
-    "$file-name-max-width": {
-      "name": "$file-name-max-width",
-      "value": "16em",
-      "type": "size"
-    },
-    "$label-color": {
-      "name": "$label-color",
-      "value": "$grey-darker",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$label-weight": {
-      "name": "$label-weight",
-      "value": "$weight-bold",
-      "type": "variable",
-      "computed_type": "font-weight",
-      "computed_value": "700"
-    },
-    "$help-size": {
-      "name": "$help-size",
-      "value": "$size-small",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "0.75rem"
-    }
-  },
-  "list": [
-    "$input-color",
-    "$input-background-color",
-    "$input-border-color",
-    "$input-height",
-    "$input-shadow",
-    "$input-placeholder-color",
-    "$input-hover-color",
-    "$input-hover-border-color",
-    "$input-focus-color",
-    "$input-focus-border-color",
-    "$input-focus-box-shadow-size",
-    "$input-focus-box-shadow-color",
-    "$input-disabled-color",
-    "$input-disabled-background-color",
-    "$input-disabled-border-color",
-    "$input-disabled-placeholder-color",
-    "$input-arrow",
-    "$input-icon-color",
-    "$input-icon-active-color",
-    "$input-radius",
-    "$file-border-color",
-    "$file-radius",
-    "$file-cta-background-color",
-    "$file-cta-color",
-    "$file-cta-hover-color",
-    "$file-cta-active-color",
-    "$file-name-border-color",
-    "$file-name-border-style",
-    "$file-name-border-width",
-    "$file-name-max-width",
-    "$label-color",
-    "$label-weight",
-    "$help-size"
-  ],
-  "file_path": "elements/form.sass"
-}
--- a/docs/_data/variables/elements/icon.json
+++ b/docs/_data/variables/elements/icon.json
@ -1,37 +1,51 @@
 {
-  "by_name": {
-    "$icon-dimensions": {
-      "name": "$icon-dimensions",
+  "sass-vars": [
+    {
+      "name": "icon-dimensions",
      "value": "1.5rem",
-      "type": "size"
+      "css-var": "icon-dimensions"
    },
-    "$icon-dimensions-small": {
-      "name": "$icon-dimensions-small",
+    {
+      "name": "icon-dimensions-small",
      "value": "1rem",
-      "type": "size"
+      "css-var": "icon-dimensions-small"
    },
-    "$icon-dimensions-medium": {
-      "name": "$icon-dimensions-medium",
+    {
+      "name": "icon-dimensions-medium",
      "value": "2rem",
-      "type": "size"
+      "css-var": "icon-dimensions-medium"
    },
-    "$icon-dimensions-large": {
-      "name": "$icon-dimensions-large",
+    {
+      "name": "icon-dimensions-large",
      "value": "3rem",
-      "type": "size"
+      "css-var": "icon-dimensions-large"
    },
-    "$icon-text-spacing": {
-      "name": "$icon-text-spacing",
+    {
+      "name": "icon-text-spacing",
      "value": "0.25em",
-      "type": "size"
+      "css-var": "icon-text-spacing"
    }
-  },
-  "list": [
-    "$icon-dimensions",
-    "$icon-dimensions-small",
-    "$icon-dimensions-medium",
-    "$icon-dimensions-large",
-    "$icon-text-spacing"
  ],
-  "file_path": "elements/icon.sass"
+  "css-vars": [
+    {
+      "name": "icon-dimensions",
+      "value": "1.5rem"
+    },
+    {
+      "name": "icon-dimensions-small",
+      "value": "1rem"
+    },
+    {
+      "name": "icon-dimensions-medium",
+      "value": "2rem"
+    },
+    {
+      "name": "icon-dimensions-large",
+      "value": "3rem"
+    },
+    {
+      "name": "icon-text-spacing",
+      "value": "0.25em"
+    }
+  ]
 }
--- a/docs/_data/variables/elements/image.json
+++ b/docs/_data/variables/elements/image.json
@ -1,13 +1,9 @@
 {
-  "by_name": {
-    "$dimensions": {
-      "name": "$dimensions",
-      "value": "16 24 32 48 64 96 128",
-      "type": "string"
+  "sass-vars": [
+    {
+      "name": "dimensions",
+      "value": "16 24 32 48 64 96 128"
    }
-  },
-  "list": [
-    "$dimensions"
  ],
-  "file_path": "elements/image.sass"
+  "css-vars": []
 }
--- a/docs/_data/variables/elements/loader.json
+++ b/docs/_data/variables/elements/loader.json
@ -0,0 +1,4 @@
+{
+  "sass-vars": [],
+  "css-vars": []
+}
--- a/docs/_data/variables/elements/notification.json
+++ b/docs/_data/variables/elements/notification.json
@ -1,57 +1,53 @@
 {
-  "by_name": {
-    "$notification-background-color": {
-      "name": "$notification-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+  "sass-vars": [
+    {
+      "name": "notification-code-background-color",
+      "value": "var(--bulma-scheme-main)",
+      "css-var": "notification-code-background-color"
    },
-    "$notification-code-background-color": {
-      "name": "$notification-code-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+    {
+      "name": "notification-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "notification-radius"
    },
-    "$notification-radius": {
-      "name": "$notification-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
+    {
+      "name": "notification-padding",
+      "value": "1.375em 1.5em",
+      "css-var": "notification-padding"
    },
-    "$notification-padding": {
-      "name": "$notification-padding",
-      "value": "1.25rem 2.5rem 1.25rem 1.5rem",
-      "type": "size"
-    },
-    "$notification-padding-ltr": {
-      "name": "$notification-padding-ltr",
-      "value": "1.25rem 2.5rem 1.25rem 1.5rem",
-      "type": "size"
-    },
-    "$notification-padding-rtl": {
-      "name": "$notification-padding-rtl",
-      "value": "1.25rem 1.5rem 1.25rem 2.5rem",
-      "type": "size"
-    },
-    "$notification-colors": {
-      "name": "$notification-colors",
-      "value": "$colors",
-      "type": "variable",
-      "computed_type": "map",
-      "computed_value": "Bulma colors"
+    {
+      "name": "notification-colors",
+      "value": "dv.$colors"
    }
-  },
-  "list": [
-    "$notification-background-color",
-    "$notification-code-background-color",
-    "$notification-radius",
-    "$notification-padding",
-    "$notification-padding-ltr",
-    "$notification-padding-rtl",
-    "$notification-colors"
  ],
-  "file_path": "elements/notification.sass"
+  "css-vars": [
+    {
+      "name": "notification-h",
+      "value": "#{cv.getVar(\"scheme-h\")},"
+    },
+    {
+      "name": "notification-s",
+      "value": "#{cv.getVar(\"scheme-s\")},"
+    },
+    {
+      "name": "notification-background-l",
+      "value": "#{cv.getVar(\"background-l\")},"
+    },
+    {
+      "name": "notification-color-l",
+      "value": "#{cv.getVar(\"text-strong-l\")},"
+    },
+    {
+      "name": "notification-code-background-color",
+      "value": "var(--bulma-scheme-main)"
+    },
+    {
+      "name": "notification-radius",
+      "value": "var(--bulma-radius)"
+    },
+    {
+      "name": "notification-padding",
+      "value": "1.375em 1.5em"
+    }
+  ]
 }
--- a/docs/_data/variables/elements/progress.json
+++ b/docs/_data/variables/elements/progress.json
@ -1,45 +1,46 @@
 {
-  "by_name": {
-    "$progress-bar-background-color": {
-      "name": "$progress-bar-background-color",
-      "value": "$border-light",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 93%)"
+  "sass-vars": [
+    {
+      "name": "progress-bar-background-color",
+      "value": "var(--bulma-border-weak)",
+      "css-var": "progress-bar-background-color"
    },
-    "$progress-value-background-color": {
-      "name": "$progress-value-background-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "progress-value-background-color",
+      "value": "var(--bulma-text)",
+      "css-var": "progress-value-background-color"
    },
-    "$progress-border-radius": {
-      "name": "$progress-border-radius",
-      "value": "$radius-rounded",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "9999px"
+    {
+      "name": "progress-border-radius",
+      "value": "var(--bulma-radius-rounded)",
+      "css-var": "progress-border-radius"
    },
-    "$progress-indeterminate-duration": {
-      "name": "$progress-indeterminate-duration",
+    {
+      "name": "progress-indeterminate-duration",
      "value": "1.5s",
-      "type": "string"
+      "css-var": "progress-indeterminate-duration"
    },
-    "$progress-colors": {
-      "name": "$progress-colors",
-      "value": "$colors",
-      "type": "variable",
-      "computed_type": "map",
-      "computed_value": "Bulma colors"
+    {
+      "name": "progress-colors",
+      "value": "dv.$colors"
    }
-  },
-  "list": [
-    "$progress-bar-background-color",
-    "$progress-value-background-color",
-    "$progress-border-radius",
-    "$progress-indeterminate-duration",
-    "$progress-colors"
  ],
-  "file_path": "elements/progress.sass"
+  "css-vars": [
+    {
+      "name": "progress-border-radius",
+      "value": "var(--bulma-radius-rounded)"
+    },
+    {
+      "name": "progress-bar-background-color",
+      "value": "var(--bulma-border-weak)"
+    },
+    {
+      "name": "progress-value-background-color",
+      "value": "var(--bulma-text)"
+    },
+    {
+      "name": "progress-indeterminate-duration",
+      "value": "1.5s"
+    }
+  ]
 }
--- a/docs/_data/variables/elements/table.json
+++ b/docs/_data/variables/elements/table.json
@ -1,149 +1,190 @@
 {
-  "by_name": {
-    "$table-color": {
-      "name": "$table-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+  "sass-vars": [
+    {
+      "name": "table-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "table-color"
    },
-    "$table-background-color": {
-      "name": "$table-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+    {
+      "name": "table-background-color",
+      "value": "var(--bulma-scheme-main)",
+      "css-var": "table-background-color"
    },
-    "$table-cell-border": {
-      "name": "$table-cell-border",
-      "value": "1px solid $border",
-      "type": "size"
+    {
+      "name": "table-cell-border-color",
+      "value": "var(--bulma-border)",
+      "css-var": "table-cell-border-color"
    },
-    "$table-cell-border-width": {
-      "name": "$table-cell-border-width",
+    {
+      "name": "table-cell-border-style",
+      "value": "solid",
+      "css-var": "table-cell-border-style"
+    },
+    {
+      "name": "table-cell-border-width",
      "value": "0 0 1px",
-      "type": "size"
+      "css-var": "table-cell-border-width"
    },
-    "$table-cell-padding": {
-      "name": "$table-cell-padding",
+    {
+      "name": "table-cell-padding",
      "value": "0.5em 0.75em",
-      "type": "size"
+      "css-var": "table-cell-padding"
    },
-    "$table-cell-heading-color": {
-      "name": "$table-cell-heading-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "table-cell-heading-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "table-cell-heading-color"
    },
-    "$table-cell-text-align": {
-      "name": "$table-cell-text-align",
+    {
+      "name": "table-cell-text-align",
      "value": "left",
-      "type": "string"
+      "css-var": "table-cell-text-align"
    },
-    "$table-head-cell-border-width": {
-      "name": "$table-head-cell-border-width",
+    {
+      "name": "table-head-cell-border-width",
      "value": "0 0 2px",
-      "type": "size"
+      "css-var": "table-head-cell-border-width"
    },
-    "$table-head-cell-color": {
-      "name": "$table-head-cell-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "table-head-cell-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "table-head-cell-color"
    },
-    "$table-foot-cell-border-width": {
-      "name": "$table-foot-cell-border-width",
+    {
+      "name": "table-foot-cell-border-width",
      "value": "2px 0 0",
-      "type": "size"
+      "css-var": "table-foot-cell-border-width"
    },
-    "$table-foot-cell-color": {
-      "name": "$table-foot-cell-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "table-foot-cell-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "table-foot-cell-color"
    },
-    "$table-head-background-color": {
-      "name": "$table-head-background-color",
+    {
+      "name": "table-head-background-color",
      "value": "transparent",
-      "type": "string"
+      "css-var": "table-head-background-color"
    },
-    "$table-body-background-color": {
-      "name": "$table-body-background-color",
+    {
+      "name": "table-body-background-color",
      "value": "transparent",
-      "type": "string"
+      "css-var": "table-body-background-color"
    },
-    "$table-foot-background-color": {
-      "name": "$table-foot-background-color",
+    {
+      "name": "table-foot-background-color",
      "value": "transparent",
-      "type": "string"
+      "css-var": "table-foot-background-color"
    },
-    "$table-row-hover-background-color": {
-      "name": "$table-row-hover-background-color",
-      "value": "$scheme-main-bis",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 98%)"
+    {
+      "name": "table-row-hover-background-color",
+      "value": "var(--bulma-scheme-main-bis)",
+      "css-var": "table-row-hover-background-color"
    },
-    "$table-row-active-background-color": {
-      "name": "$table-row-active-background-color",
-      "value": "$primary",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(171, 100%, 41%)"
+    {
+      "name": "table-row-active-background-color",
+      "value": "var(--bulma-primary)",
+      "css-var": "table-row-active-background-color"
    },
-    "$table-row-active-color": {
-      "name": "$table-row-active-color",
-      "value": "$primary-invert",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "#fff"
+    {
+      "name": "table-row-active-color",
+      "value": "var(--bulma-primary-invert)",
+      "css-var": "table-row-active-color"
    },
-    "$table-striped-row-even-background-color": {
-      "name": "$table-striped-row-even-background-color",
-      "value": "$scheme-main-bis",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 98%)"
+    {
+      "name": "table-striped-row-even-background-color",
+      "value": "var(--bulma-scheme-main-bis)",
+      "css-var": "table-striped-row-even-background-color"
    },
-    "$table-striped-row-even-hover-background-color": {
-      "name": "$table-striped-row-even-hover-background-color",
-      "value": "$scheme-main-ter",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "table-striped-row-even-hover-background-color",
+      "value": "var(--bulma-scheme-main-ter)",
+      "css-var": "table-striped-row-even-hover-background-color"
    },
-    "$table-colors": {
-      "name": "$table-colors",
-      "value": "$colors",
-      "type": "variable",
-      "computed_type": "map",
-      "computed_value": "Bulma colors"
+    {
+      "name": "table-colors",
+      "value": "dv.$colors"
    }
-  },
-  "list": [
-    "$table-color",
-    "$table-background-color",
-    "$table-cell-border",
-    "$table-cell-border-width",
-    "$table-cell-padding",
-    "$table-cell-heading-color",
-    "$table-cell-text-align",
-    "$table-head-cell-border-width",
-    "$table-head-cell-color",
-    "$table-foot-cell-border-width",
-    "$table-foot-cell-color",
-    "$table-head-background-color",
-    "$table-body-background-color",
-    "$table-foot-background-color",
-    "$table-row-hover-background-color",
-    "$table-row-active-background-color",
-    "$table-row-active-color",
-    "$table-striped-row-even-background-color",
-    "$table-striped-row-even-hover-background-color",
-    "$table-colors"
  ],
-  "file_path": "elements/table.sass"
-}
+  "css-vars": [
+    {
+      "name": "table-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "table-background-color",
+      "value": "var(--bulma-scheme-main)"
+    },
+    {
+      "name": "table-cell-border-color",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "table-cell-border-style",
+      "value": "solid"
+    },
+    {
+      "name": "table-cell-border-width",
+      "value": "0 0 1px"
+    },
+    {
+      "name": "table-cell-padding",
+      "value": "0.5em 0.75em"
+    },
+    {
+      "name": "table-cell-heading-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "table-cell-text-align",
+      "value": "left"
+    },
+    {
+      "name": "table-head-cell-border-width",
+      "value": "0 0 2px"
+    },
+    {
+      "name": "table-head-cell-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "table-foot-cell-border-width",
+      "value": "2px 0 0"
+    },
+    {
+      "name": "table-foot-cell-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "table-head-background-color",
+      "value": "transparent"
+    },
+    {
+      "name": "table-body-background-color",
+      "value": "transparent"
+    },
+    {
+      "name": "table-foot-background-color",
+      "value": "transparent"
+    },
+    {
+      "name": "table-row-hover-background-color",
+      "value": "var(--bulma-scheme-main-bis)"
+    },
+    {
+      "name": "table-row-active-background-color",
+      "value": "var(--bulma-primary)"
+    },
+    {
+      "name": "table-row-active-color",
+      "value": "var(--bulma-primary-invert)"
+    },
+    {
+      "name": "table-striped-row-even-background-color",
+      "value": "var(--bulma-scheme-main-bis)"
+    },
+    {
+      "name": "table-striped-row-even-hover-background-color",
+      "value": "cv.getVar(\n  \"scheme-main-ter\"\n)"
+    }
+  ]
+}
--- a/docs/_data/variables/elements/tag.json
+++ b/docs/_data/variables/elements/tag.json
@ -1,45 +1,56 @@
 {
-  "by_name": {
-    "$tag-background-color": {
-      "name": "$tag-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+  "sass-vars": [
+    {
+      "name": "tag-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "tag-radius"
    },
-    "$tag-color": {
-      "name": "$tag-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
-    },
-    "$tag-radius": {
-      "name": "$tag-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
-    },
-    "$tag-delete-margin": {
-      "name": "$tag-delete-margin",
+    {
+      "name": "tag-delete-margin",
      "value": "1px",
-      "type": "size"
+      "css-var": "tag-delete-margin"
    },
-    "$tag-colors": {
-      "name": "$tag-colors",
-      "value": "$colors",
-      "type": "variable",
-      "computed_type": "map",
-      "computed_value": "Bulma colors"
+    {
+      "name": "tag-colors",
+      "value": "dv.$colors"
    }
-  },
-  "list": [
-    "$tag-background-color",
-    "$tag-color",
-    "$tag-radius",
-    "$tag-delete-margin",
-    "$tag-colors"
  ],
-  "file_path": "elements/tag.sass"
+  "css-vars": [
+    {
+      "name": "tag-h",
+      "value": "#{$tag-h},"
+    },
+    {
+      "name": "tag-s",
+      "value": "#{$tag-s},"
+    },
+    {
+      "name": "tag-background-l",
+      "value": "#{$tag-background-l},"
+    },
+    {
+      "name": "tag-background-l-delta",
+      "value": "#{$tag-background-l-delta},"
+    },
+    {
+      "name": "tag-hover-background-l-delta",
+      "value": "#{$tag-hover-background-l-delta},"
+    },
+    {
+      "name": "tag-active-background-l-delta",
+      "value": "#{$tag-active-background-l-delta},"
+    },
+    {
+      "name": "tag-color-l",
+      "value": "#{$tag-color-l},"
+    },
+    {
+      "name": "tag-radius",
+      "value": "var(--bulma-radius)"
+    },
+    {
+      "name": "tag-delete-margin",
+      "value": "1px"
+    }
+  ]
 }
--- a/docs/_data/variables/elements/title.json
+++ b/docs/_data/variables/elements/title.json
@ -1,125 +1,150 @@
 {
-  "by_name": {
-    "$title-color": {
-      "name": "$title-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+  "sass-vars": [
+    {
+      "name": "title-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "title-color"
    },
-    "$title-family": {
-      "name": "$title-family",
+    {
+      "name": "title-family",
      "value": "false",
-      "type": "boolean"
+      "css-var": "title-family"
    },
-    "$title-size": {
-      "name": "$title-size",
-      "value": "$size-3",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "2rem"
+    {
+      "name": "title-size",
+      "value": "var(--bulma-size-3)",
+      "css-var": "title-size"
    },
-    "$title-weight": {
-      "name": "$title-weight",
-      "value": "$weight-semibold",
-      "type": "variable",
-      "computed_type": "font-weight",
-      "computed_value": "600"
+    {
+      "name": "title-weight",
+      "value": "var(--bulma-weight-extrabold)",
+      "css-var": "title-weight"
    },
-    "$title-line-height": {
-      "name": "$title-line-height",
+    {
+      "name": "title-line-height",
      "value": "1.125",
-      "type": "unitless"
+      "css-var": "title-line-height"
    },
-    "$title-strong-color": {
-      "name": "$title-strong-color",
+    {
+      "name": "title-strong-color",
      "value": "inherit",
-      "type": "string"
+      "css-var": "title-strong-color"
    },
-    "$title-strong-weight": {
-      "name": "$title-strong-weight",
+    {
+      "name": "title-strong-weight",
      "value": "inherit",
-      "type": "string"
+      "css-var": "title-strong-weight"
    },
-    "$title-sub-size": {
-      "name": "$title-sub-size",
+    {
+      "name": "title-sub-size",
      "value": "0.75em",
-      "type": "size"
+      "css-var": "title-sub-size"
    },
-    "$title-sup-size": {
-      "name": "$title-sup-size",
+    {
+      "name": "title-sup-size",
      "value": "0.75em",
-      "type": "size"
+      "css-var": "title-sup-size"
    },
-    "$subtitle-color": {
-      "name": "$subtitle-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "subtitle-color",
+      "value": "var(--bulma-text)",
+      "css-var": "subtitle-color"
    },
-    "$subtitle-family": {
-      "name": "$subtitle-family",
+    {
+      "name": "subtitle-family",
      "value": "false",
-      "type": "boolean"
+      "css-var": "subtitle-family"
    },
-    "$subtitle-size": {
-      "name": "$subtitle-size",
-      "value": "$size-5",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "1.25rem"
+    {
+      "name": "subtitle-size",
+      "value": "var(--bulma-size-5)",
+      "css-var": "subtitle-size"
    },
-    "$subtitle-weight": {
-      "name": "$subtitle-weight",
-      "value": "$weight-normal",
-      "type": "variable",
-      "computed_type": "font-weight",
-      "computed_value": "400"
+    {
+      "name": "subtitle-weight",
+      "value": "var(--bulma-weight-normal)",
+      "css-var": "subtitle-weight"
    },
-    "$subtitle-line-height": {
-      "name": "$subtitle-line-height",
+    {
+      "name": "subtitle-line-height",
      "value": "1.25",
-      "type": "unitless"
+      "css-var": "subtitle-line-height"
    },
-    "$subtitle-strong-color": {
-      "name": "$subtitle-strong-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "subtitle-strong-color",
+      "value": "var(--bulma-text-strong)",
+      "css-var": "subtitle-strong-color"
    },
-    "$subtitle-strong-weight": {
-      "name": "$subtitle-strong-weight",
-      "value": "$weight-semibold",
-      "type": "variable",
-      "computed_type": "font-weight",
-      "computed_value": "600"
-    },
-    "$subtitle-negative-margin": {
-      "name": "$subtitle-negative-margin",
-      "value": "-1.25rem",
-      "type": "size"
+    {
+      "name": "subtitle-strong-weight",
+      "value": "var(--bulma-weight-semibold)",
+      "css-var": "subtitle-strong-weight"
    }
-  },
-  "list": [
-    "$title-color",
-    "$title-family",
-    "$title-size",
-    "$title-weight",
-    "$title-line-height",
-    "$title-strong-color",
-    "$title-strong-weight",
-    "$title-sub-size",
-    "$title-sup-size",
-    "$subtitle-color",
-    "$subtitle-family",
-    "$subtitle-size",
-    "$subtitle-weight",
-    "$subtitle-line-height",
-    "$subtitle-strong-color",
-    "$subtitle-strong-weight",
-    "$subtitle-negative-margin"
  ],
-  "file_path": "elements/title.sass"
+  "css-vars": [
+    {
+      "name": "title-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "title-family",
+      "value": "false"
+    },
+    {
+      "name": "title-size",
+      "value": "var(--bulma-size-3)"
+    },
+    {
+      "name": "title-weight",
+      "value": "var(--bulma-weight-extrabold)"
+    },
+    {
+      "name": "title-line-height",
+      "value": "1.125"
+    },
+    {
+      "name": "title-strong-color",
+      "value": "inherit"
+    },
+    {
+      "name": "title-strong-weight",
+      "value": "inherit"
+    },
+    {
+      "name": "title-sub-size",
+      "value": "0.75em"
+    },
+    {
+      "name": "title-sup-size",
+      "value": "0.75em"
+    },
+    {
+      "name": "subtitle-color",
+      "value": "var(--bulma-text)"
+    },
+    {
+      "name": "subtitle-family",
+      "value": "false"
+    },
+    {
+      "name": "subtitle-size",
+      "value": "var(--bulma-size-5)"
+    },
+    {
+      "name": "subtitle-weight",
+      "value": "var(--bulma-weight-normal)"
+    },
+    {
+      "name": "subtitle-line-height",
+      "value": "1.25"
+    },
+    {
+      "name": "subtitle-strong-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "subtitle-strong-weight",
+      "value": "var(--bulma-weight-semibold)"
+    }
+  ]
 }
--- a/docs/_data/variables/form/checkbox-radio.json
+++ b/docs/_data/variables/form/checkbox-radio.json
@ -0,0 +1,4 @@
+{
+  "sass-vars": [],
+  "css-vars": []
+}
--- a/docs/_data/variables/form/file.json
+++ b/docs/_data/variables/form/file.json
@ -1,87 +1,123 @@
 {
-  "by_name": {
-    "$file-border-color": {
-      "name": "$file-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+  "sass-vars": [
+    {
+      "name": "file-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "file-radius"
    },
-    "$file-radius": {
-      "name": "$file-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
+    {
+      "name": "file-cta-color",
+      "value": "var(--bulma-text)"
    },
-    "$file-cta-background-color": {
-      "name": "$file-cta-background-color",
-      "value": "$scheme-main-ter",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "file-cta-hover-color",
+      "value": "var(--bulma-text-strong)"
    },
-    "$file-cta-color": {
-      "name": "$file-cta-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "file-cta-active-color",
+      "value": "var(--bulma-text-strong)"
    },
-    "$file-cta-hover-color": {
-      "name": "$file-cta-hover-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "file-name-border-color",
+      "value": "var(--bulma-border)",
+      "css-var": "file-name-border-color"
    },
-    "$file-cta-active-color": {
-      "name": "$file-cta-active-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
-    },
-    "$file-name-border-color": {
-      "name": "$file-name-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
-    },
-    "$file-name-border-style": {
-      "name": "$file-name-border-style",
+    {
+      "name": "file-name-border-style",
      "value": "solid",
-      "type": "string"
+      "css-var": "file-name-border-style"
    },
-    "$file-name-border-width": {
-      "name": "$file-name-border-width",
+    {
+      "name": "file-name-border-width",
      "value": "1px 1px 1px 0",
-      "type": "size"
+      "css-var": "file-name-border-width"
    },
-    "$file-name-max-width": {
-      "name": "$file-name-max-width",
+    {
+      "name": "file-name-max-width",
      "value": "16em",
-      "type": "size"
-    },
-    "$file-colors": {
-      "name": "$file-colors",
-      "value": "$form-colors",
-      "type": "variable"
+      "css-var": "file-name-max-width"
    }
-  },
-  "list": [
-    "$file-border-color",
-    "$file-radius",
-    "$file-cta-background-color",
-    "$file-cta-color",
-    "$file-cta-hover-color",
-    "$file-cta-active-color",
-    "$file-name-border-color",
-    "$file-name-border-style",
-    "$file-name-border-width",
-    "$file-name-max-width",
-    "$file-colors"
  ],
-  "file_path": "form/file.sass"
-}
+  "css-vars": [
+    {
+      "name": "file-radius",
+      "value": "var(--bulma-radius)"
+    },
+    {
+      "name": "file-name-border-color",
+      "value": "var(--bulma-border)"
+    },
+    {
+      "name": "file-name-border-style",
+      "value": "solid"
+    },
+    {
+      "name": "file-name-border-width",
+      "value": "1px 1px 1px 0"
+    },
+    {
+      "name": "file-name-max-width",
+      "value": "16em"
+    },
+    {
+      "name": "file-h",
+      "value": "#{$file-h},"
+    },
+    {
+      "name": "file-s",
+      "value": "#{$file-s},"
+    },
+    {
+      "name": "file-background-l",
+      "value": "#{$file-background-l},"
+    },
+    {
+      "name": "file-background-l-delta",
+      "value": "#{$file-background-l-delta},"
+    },
+    {
+      "name": "file-hover-background-l-delta",
+      "value": "#{$file-hover-background-l-delta},"
+    },
+    {
+      "name": "file-active-background-l-delta",
+      "value": "#{$file-active-background-l-delta},"
+    },
+    {
+      "name": "file-border-l",
+      "value": "#{$file-border-l},"
+    },
+    {
+      "name": "file-border-l-delta",
+      "value": "#{$file-border-l-delta},"
+    },
+    {
+      "name": "file-hover-border-l-delta",
+      "value": "#{$file-hover-border-l-delta},"
+    },
+    {
+      "name": "file-active-border-l-delta",
+      "value": "#{$file-active-border-l-delta},"
+    },
+    {
+      "name": "file-cta-color-l",
+      "value": "#{$file-cta-color-l},"
+    },
+    {
+      "name": "file-name-color-l",
+      "value": "#{$file-name-color-l},"
+    },
+    {
+      "name": "file-color-l-delta",
+      "value": "#{$file-color-l-delta},"
+    },
+    {
+      "name": "file-hover-color-l-delta",
+      "value": "#{$file-hover-color-l-delta},"
+    },
+    {
+      "name": "file-active-color-l-delta",
+      "value": "#{$file-active-color-l-delta},"
+    }
+  ]
+}
--- a/docs/_data/variables/form/general.json
+++ b/docs/_data/variables/form/general.json
@ -0,0 +1,174 @@
+{
+  "sass-vars": [
+    {
+      "name": "control-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "control-radius"
+    },
+    {
+      "name": "control-radius-small",
+      "value": "var(--bulma-radius-small)",
+      "css-var": "control-radius-small"
+    },
+    {
+      "name": "control-border-width",
+      "value": "1px",
+      "css-var": "control-border-width"
+    },
+    {
+      "name": "control-size",
+      "value": "var(--bulma-size-normal)",
+      "css-var": "control-size"
+    },
+    {
+      "name": "control-height",
+      "value": "2.5em",
+      "css-var": "control-height"
+    },
+    {
+      "name": "control-line-height",
+      "value": "1.5",
+      "css-var": "control-line-height"
+    },
+    {
+      "name": "control-padding-vertical",
+      "value": "calc(0.5em - 1px)",
+      "css-var": "control-padding-vertical"
+    },
+    {
+      "name": "control-padding-horizontal",
+      "value": "calc(0.75em - 1px)",
+      "css-var": "control-padding-horizontal"
+    },
+    {
+      "name": "control-focus-shadow-l",
+      "value": "50%",
+      "css-var": "control-focus-shadow-l"
+    },
+    {
+      "name": "label-color",
+      "css-var": "label-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "label-weight",
+      "css-var": "label-weight",
+      "value": "var(--bulma-weight-semibold)"
+    },
+    {
+      "name": "help-size",
+      "css-var": "help-size",
+      "value": "var(--bulma-size-small)"
+    }
+  ],
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "var(--bulma-scheme-h)"
+    },
+    {
+      "name": "input-s",
+      "value": "var(--bulma-scheme-s)"
+    },
+    {
+      "name": "input-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-border-l",
+      "value": "var(--bulma-border-l)"
+    },
+    {
+      "name": "input-border-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-hover-border-l-delta",
+      "value": "var(--bulma-hover-border-l-delta)"
+    },
+    {
+      "name": "input-active-border-l-delta",
+      "value": "var(--bulma-active-border-l-delta)"
+    },
+    {
+      "name": "input-focus-h",
+      "value": "var(--bulma-focus-h)"
+    },
+    {
+      "name": "input-focus-s",
+      "value": "var(--bulma-focus-s)"
+    },
+    {
+      "name": "input-focus-l",
+      "value": "var(--bulma-focus-l)"
+    },
+    {
+      "name": "input-focus-shadow-size",
+      "value": "var(--bulma-focus-shadow-size)"
+    },
+    {
+      "name": "input-focus-shadow-alpha",
+      "value": "var(--bulma-focus-shadow-alpha)"
+    },
+    {
+      "name": "input-color-l",
+      "value": "var(--bulma-text-strong-l)"
+    },
+    {
+      "name": "input-background-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-background-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-height",
+      "value": "var(--bulma-control-height)"
+    },
+    {
+      "name": "input-shadow",
+      "value": "inset 0 0.0625em 0.125em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.05\n  )"
+    },
+    {
+      "name": "input-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-strong-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-disabled-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-disabled-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-border-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-weak-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-arrow",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-icon-color",
+      "value": "var(--bulma-text-light)"
+    },
+    {
+      "name": "input-icon-hover-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-icon-focus-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-radius",
+      "value": "var(--bulma-radius)"
+    }
+  ]
+}
--- a/docs/_data/variables/form/input-textarea.json
+++ b/docs/_data/variables/form/input-textarea.json
@ -1,31 +1,42 @@
 {
-  "by_name": {
-    "$textarea-padding": {
-      "name": "$textarea-padding",
-      "value": "$control-padding-horizontal",
-      "type": "variable"
+  "sass-vars": [
+    {
+      "name": "textarea-padding",
+      "value": "var(--bulma-control-padding-horizontal)"
    },
-    "$textarea-max-height": {
-      "name": "$textarea-max-height",
-      "value": "40em",
-      "type": "size"
+    {
+      "name": "textarea-max-height",
+      "value": "40em"
    },
-    "$textarea-min-height": {
-      "name": "$textarea-min-height",
-      "value": "8em",
-      "type": "size"
+    {
+      "name": "textarea-min-height",
+      "value": "8em"
    },
-    "$textarea-colors": {
-      "name": "$textarea-colors",
-      "value": "$form-colors",
-      "type": "variable"
+    {
+      "name": "textarea-colors",
+      "value": "shared.$form-colors"
    }
-  },
-  "list": [
-    "$textarea-padding",
-    "$textarea-max-height",
-    "$textarea-min-height",
-    "$textarea-colors"
  ],
-  "file_path": "form/input-textarea.sass"
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "#{cv.getVar(\"scheme-h\")},"
+    },
+    {
+      "name": "input-s",
+      "value": "#{cv.getVar(\"scheme-s\")},"
+    },
+    {
+      "name": "input-border-style",
+      "value": "solid,"
+    },
+    {
+      "name": "input-border-width",
+      "value": "1px,"
+    },
+    {
+      "name": "input-border-l",
+      "value": "#{cv.getVar(\"border-l\")},"
+    }
+  ]
 }
--- a/docs/_data/variables/form/input.json
+++ b/docs/_data/variables/form/input.json
@ -0,0 +1,249 @@
+{
+  "sass-vars": [
+    {
+      "name": "input-h",
+      "value": "var(--bulma-scheme-h)",
+      "css-var": "input-h"
+    },
+    {
+      "name": "input-s",
+      "value": "var(--bulma-scheme-s)",
+      "css-var": "input-s"
+    },
+    {
+      "name": "input-l",
+      "value": "var(--bulma-scheme-main-l)",
+      "css-var": "input-l"
+    },
+    {
+      "name": "input-border-l",
+      "value": "var(--bulma-border-l)",
+      "css-var": "input-border-l"
+    },
+    {
+      "name": "input-border-l-delta",
+      "value": "0%",
+      "css-var": "input-border-l-delta"
+    },
+    {
+      "name": "input-hover-border-l-delta",
+      "value": "var(--bulma-hover-border-l-delta)",
+      "css-var": "input-hover-border-l-delta"
+    },
+    {
+      "name": "input-active-border-l-delta",
+      "value": "var(--bulma-active-border-l-delta)",
+      "css-var": "input-active-border-l-delta"
+    },
+    {
+      "name": "input-color-l",
+      "value": "var(--bulma-text-strong-l)",
+      "css-var": "input-color-l"
+    },
+    {
+      "name": "input-background-l",
+      "value": "var(--bulma-scheme-main-l)",
+      "css-var": "input-background-l"
+    },
+    {
+      "name": "input-background-l-delta",
+      "value": "0%",
+      "css-var": "input-background-l-delta"
+    },
+    {
+      "name": "input-height",
+      "value": "var(--bulma-control-height)",
+      "css-var": "input-height"
+    },
+    {
+      "name": "input-shadow",
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.05\n)",
+      "css-var": "input-shadow"
+    },
+    {
+      "name": "input-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-strong-l),\n  0.3\n)",
+      "css-var": "input-placeholder-color"
+    },
+    {
+      "name": "input-focus-h",
+      "value": "var(--bulma-focus-h)",
+      "css-var": "input-focus-h"
+    },
+    {
+      "name": "input-focus-s",
+      "value": "var(--bulma-focus-s)",
+      "css-var": "input-focus-s"
+    },
+    {
+      "name": "input-focus-l",
+      "value": "var(--bulma-focus-l)",
+      "css-var": "input-focus-l"
+    },
+    {
+      "name": "input-focus-shadow-size",
+      "value": "var(--bulma-focus-shadow-size)",
+      "css-var": "input-focus-shadow-size"
+    },
+    {
+      "name": "input-focus-shadow-alpha",
+      "value": "var(--bulma-focus-shadow-alpha)",
+      "css-var": "input-focus-shadow-alpha"
+    },
+    {
+      "name": "input-disabled-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "input-disabled-color"
+    },
+    {
+      "name": "input-disabled-background-color",
+      "value": "var(--bulma-background)",
+      "css-var": "input-disabled-background-color"
+    },
+    {
+      "name": "input-disabled-border-color",
+      "value": "var(--bulma-background)",
+      "css-var": "input-disabled-border-color"
+    },
+    {
+      "name": "input-disabled-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-weak-l),\n  0.3\n)",
+      "css-var": "input-disabled-placeholder-color"
+    },
+    {
+      "name": "input-arrow",
+      "value": "var(--bulma-link)",
+      "css-var": "input-arrow"
+    },
+    {
+      "name": "input-icon-color",
+      "value": "var(--bulma-text-light)",
+      "css-var": "input-icon-color"
+    },
+    {
+      "name": "input-icon-hover-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "input-icon-hover-color"
+    },
+    {
+      "name": "input-icon-focus-color",
+      "value": "var(--bulma-link)",
+      "css-var": "input-icon-focus-color"
+    },
+    {
+      "name": "input-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "input-radius"
+    }
+  ],
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "var(--bulma-scheme-h)"
+    },
+    {
+      "name": "input-s",
+      "value": "var(--bulma-scheme-s)"
+    },
+    {
+      "name": "input-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-border-l",
+      "value": "var(--bulma-border-l)"
+    },
+    {
+      "name": "input-border-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-hover-border-l-delta",
+      "value": "var(--bulma-hover-border-l-delta)"
+    },
+    {
+      "name": "input-active-border-l-delta",
+      "value": "var(--bulma-active-border-l-delta)"
+    },
+    {
+      "name": "input-focus-h",
+      "value": "var(--bulma-focus-h)"
+    },
+    {
+      "name": "input-focus-s",
+      "value": "var(--bulma-focus-s)"
+    },
+    {
+      "name": "input-focus-l",
+      "value": "var(--bulma-focus-l)"
+    },
+    {
+      "name": "input-focus-shadow-size",
+      "value": "var(--bulma-focus-shadow-size)"
+    },
+    {
+      "name": "input-focus-shadow-alpha",
+      "value": "var(--bulma-focus-shadow-alpha)"
+    },
+    {
+      "name": "input-color-l",
+      "value": "var(--bulma-text-strong-l)"
+    },
+    {
+      "name": "input-background-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-background-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-height",
+      "value": "var(--bulma-control-height)"
+    },
+    {
+      "name": "input-shadow",
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.05\n)"
+    },
+    {
+      "name": "input-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-strong-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-disabled-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-disabled-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-border-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-weak-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-arrow",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-icon-color",
+      "value": "var(--bulma-text-light)"
+    },
+    {
+      "name": "input-icon-hover-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-icon-focus-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-radius",
+      "value": "var(--bulma-radius)"
+    }
+  ]
+}
--- a/docs/_data/variables/form/select.json
+++ b/docs/_data/variables/form/select.json
@ -1,13 +1,30 @@
 {
-  "by_name": {
-    "$select-colors": {
-      "name": "$select-colors",
-      "value": "$form-colors",
-      "type": "variable"
+  "sass-vars": [
+    {
+      "name": "select-colors",
+      "value": "shared.$form-colors"
    }
-  },
-  "list": [
-    "$select-colors"
  ],
-  "file_path": "form/select.sass"
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "#{cv.getVar(\"scheme-h\")},"
+    },
+    {
+      "name": "input-s",
+      "value": "#{cv.getVar(\"scheme-s\")},"
+    },
+    {
+      "name": "input-border-style",
+      "value": "solid,"
+    },
+    {
+      "name": "input-border-width",
+      "value": "1px,"
+    },
+    {
+      "name": "input-border-l",
+      "value": "#{cv.getVar(\"border-l\")},"
+    }
+  ]
 }
--- a/docs/_data/variables/form/shared.json
+++ b/docs/_data/variables/form/shared.json
@ -1,163 +1,253 @@
 {
-  "by_name": {
-    "$form-colors": {
-      "name": "$form-colors",
-      "value": "$colors",
-      "type": "variable",
-      "computed_type": "map",
-      "computed_value": "Bulma colors"
+  "sass-vars": [
+    {
+      "name": "form-colors",
+      "value": "dv.$colors"
    },
-    "$input-color": {
-      "name": "$input-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "input-h",
+      "value": "var(--bulma-scheme-h)",
+      "css-var": "input-h"
    },
-    "$input-background-color": {
-      "name": "$input-background-color",
-      "value": "$scheme-main",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 100%)"
+    {
+      "name": "input-s",
+      "value": "var(--bulma-scheme-s)",
+      "css-var": "input-s"
    },
-    "$input-border-color": {
-      "name": "$input-border-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+    {
+      "name": "input-l",
+      "value": "var(--bulma-scheme-main-l)",
+      "css-var": "input-l"
    },
-    "$input-height": {
-      "name": "$input-height",
-      "value": "$control-height",
-      "type": "variable"
+    {
+      "name": "input-border-l",
+      "value": "var(--bulma-border-l)",
+      "css-var": "input-border-l"
    },
-    "$input-shadow": {
-      "name": "$input-shadow",
-      "value": "inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05)",
-      "type": "shadow"
+    {
+      "name": "input-border-l-delta",
+      "value": "0%",
+      "css-var": "input-border-l-delta"
    },
-    "$input-placeholder-color": {
-      "name": "$input-placeholder-color",
-      "value": "bulmaRgba($input-color, 0.3)",
-      "type": "compound"
+    {
+      "name": "input-hover-border-l-delta",
+      "value": "var(--bulma-hover-border-l-delta)",
+      "css-var": "input-hover-border-l-delta"
    },
-    "$input-hover-color": {
-      "name": "$input-hover-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "input-active-border-l-delta",
+      "value": "var(--bulma-active-border-l-delta)",
+      "css-var": "input-active-border-l-delta"
    },
-    "$input-hover-border-color": {
-      "name": "$input-hover-border-color",
-      "value": "$border-hover",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 71%)"
+    {
+      "name": "input-color-l",
+      "value": "var(--bulma-text-strong-l)",
+      "css-var": "input-color-l"
    },
-    "$input-focus-color": {
-      "name": "$input-focus-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+    {
+      "name": "input-background-l",
+      "value": "var(--bulma-scheme-main-l)",
+      "css-var": "input-background-l"
    },
-    "$input-focus-border-color": {
-      "name": "$input-focus-border-color",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "input-background-l-delta",
+      "value": "0%",
+      "css-var": "input-background-l-delta"
    },
-    "$input-focus-box-shadow-size": {
-      "name": "$input-focus-box-shadow-size",
-      "value": "0 0 0 0.125em",
-      "type": "size"
+    {
+      "name": "input-height",
+      "value": "var(--bulma-control-height)",
+      "css-var": "input-height"
    },
-    "$input-focus-box-shadow-color": {
-      "name": "$input-focus-box-shadow-color",
-      "value": "bulmaRgba($link, 0.25)",
-      "type": "compound"
+    {
+      "name": "input-shadow",
+      "value": "inset 0 0.0625em 0.125em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.05\n  )",
+      "css-var": "input-shadow"
    },
-    "$input-disabled-color": {
-      "name": "$input-disabled-color",
-      "value": "$text-light",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 48%)"
+    {
+      "name": "input-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-strong-l),\n  0.3\n)",
+      "css-var": "input-placeholder-color"
    },
-    "$input-disabled-background-color": {
-      "name": "$input-disabled-background-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "input-focus-h",
+      "value": "var(--bulma-focus-h)",
+      "css-var": "input-focus-h"
    },
-    "$input-disabled-border-color": {
-      "name": "$input-disabled-border-color",
-      "value": "$background",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 96%)"
+    {
+      "name": "input-focus-s",
+      "value": "var(--bulma-focus-s)",
+      "css-var": "input-focus-s"
    },
-    "$input-disabled-placeholder-color": {
-      "name": "$input-disabled-placeholder-color",
-      "value": "bulmaRgba($input-disabled-color, 0.3)",
-      "type": "compound"
+    {
+      "name": "input-focus-l",
+      "value": "var(--bulma-focus-l)",
+      "css-var": "input-focus-l"
    },
-    "$input-arrow": {
-      "name": "$input-arrow",
-      "value": "$link",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(229, 53%,  53%)"
+    {
+      "name": "input-focus-shadow-size",
+      "value": "var(--bulma-focus-shadow-size)",
+      "css-var": "input-focus-shadow-size"
    },
-    "$input-icon-color": {
-      "name": "$input-icon-color",
-      "value": "$border",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 86%)"
+    {
+      "name": "input-focus-shadow-alpha",
+      "value": "var(--bulma-focus-shadow-alpha)",
+      "css-var": "input-focus-shadow-alpha"
    },
-    "$input-icon-active-color": {
-      "name": "$input-icon-active-color",
-      "value": "$text",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 29%)"
+    {
+      "name": "input-disabled-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "input-disabled-color"
    },
-    "$input-radius": {
-      "name": "$input-radius",
-      "value": "$radius",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "4px"
+    {
+      "name": "input-disabled-background-color",
+      "value": "var(--bulma-background)",
+      "css-var": "input-disabled-background-color"
+    },
+    {
+      "name": "input-disabled-border-color",
+      "value": "var(--bulma-background)",
+      "css-var": "input-disabled-border-color"
+    },
+    {
+      "name": "input-disabled-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-weak-l),\n  0.3\n)",
+      "css-var": "input-disabled-placeholder-color"
+    },
+    {
+      "name": "input-arrow",
+      "value": "var(--bulma-link)",
+      "css-var": "input-arrow"
+    },
+    {
+      "name": "input-icon-color",
+      "value": "var(--bulma-text-light)",
+      "css-var": "input-icon-color"
+    },
+    {
+      "name": "input-icon-hover-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "input-icon-hover-color"
+    },
+    {
+      "name": "input-icon-focus-color",
+      "value": "var(--bulma-link)",
+      "css-var": "input-icon-focus-color"
+    },
+    {
+      "name": "input-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "input-radius"
    }
-  },
-  "list": [
-    "$form-colors",
-    "$input-color",
-    "$input-background-color",
-    "$input-border-color",
-    "$input-height",
-    "$input-shadow",
-    "$input-placeholder-color",
-    "$input-hover-color",
-    "$input-hover-border-color",
-    "$input-focus-color",
-    "$input-focus-border-color",
-    "$input-focus-box-shadow-size",
-    "$input-focus-box-shadow-color",
-    "$input-disabled-color",
-    "$input-disabled-background-color",
-    "$input-disabled-border-color",
-    "$input-disabled-placeholder-color",
-    "$input-arrow",
-    "$input-icon-color",
-    "$input-icon-active-color",
-    "$input-radius"
  ],
-  "file_path": "form/shared.sass"
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "var(--bulma-scheme-h)"
+    },
+    {
+      "name": "input-s",
+      "value": "var(--bulma-scheme-s)"
+    },
+    {
+      "name": "input-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-border-l",
+      "value": "var(--bulma-border-l)"
+    },
+    {
+      "name": "input-border-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-hover-border-l-delta",
+      "value": "var(--bulma-hover-border-l-delta)"
+    },
+    {
+      "name": "input-active-border-l-delta",
+      "value": "var(--bulma-active-border-l-delta)"
+    },
+    {
+      "name": "input-focus-h",
+      "value": "var(--bulma-focus-h)"
+    },
+    {
+      "name": "input-focus-s",
+      "value": "var(--bulma-focus-s)"
+    },
+    {
+      "name": "input-focus-l",
+      "value": "var(--bulma-focus-l)"
+    },
+    {
+      "name": "input-focus-shadow-size",
+      "value": "var(--bulma-focus-shadow-size)"
+    },
+    {
+      "name": "input-focus-shadow-alpha",
+      "value": "var(--bulma-focus-shadow-alpha)"
+    },
+    {
+      "name": "input-color-l",
+      "value": "var(--bulma-text-strong-l)"
+    },
+    {
+      "name": "input-background-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-background-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-height",
+      "value": "var(--bulma-control-height)"
+    },
+    {
+      "name": "input-shadow",
+      "value": "inset 0 0.0625em 0.125em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.05\n  )"
+    },
+    {
+      "name": "input-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-strong-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-disabled-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-disabled-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-border-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-weak-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-arrow",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-icon-color",
+      "value": "var(--bulma-text-light)"
+    },
+    {
+      "name": "input-icon-hover-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-icon-focus-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-radius",
+      "value": "var(--bulma-radius)"
+    }
+  ]
 }
--- a/docs/_data/variables/form/textarea.json
+++ b/docs/_data/variables/form/textarea.json
@ -0,0 +1,41 @@
+{
+  "sass-vars": [
+    {
+      "name": "textarea-padding",
+      "css-var": "textarea-padding",
+      "value": "var(--bulma-control-padding-horizontal)"
+    },
+    {
+      "name": "textarea-max-height",
+      "css-var": "textarea-max-height",
+      "value": "40em"
+    },
+    {
+      "name": "textarea-min-height",
+      "css-var": "textarea-min-height",
+      "value": "8em"
+    }
+  ],
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "#{cv.getVar(\"scheme-h\")},"
+    },
+    {
+      "name": "input-s",
+      "value": "#{cv.getVar(\"scheme-s\")},"
+    },
+    {
+      "name": "input-border-style",
+      "value": "solid,"
+    },
+    {
+      "name": "input-border-width",
+      "value": "1px,"
+    },
+    {
+      "name": "input-border-l",
+      "value": "#{cv.getVar(\"border-l\")},"
+    }
+  ]
+}
--- a/docs/_data/variables/form/tools.json
+++ b/docs/_data/variables/form/tools.json
@ -1,37 +1,26 @@
 {
-  "by_name": {
-    "$label-color": {
-      "name": "$label-color",
-      "value": "$text-strong",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 21%)"
+  "sass-vars": [
+    {
+      "name": "label-color",
+      "value": "var(--bulma-text-strong)"
    },
-    "$label-weight": {
-      "name": "$label-weight",
-      "value": "$weight-bold",
-      "type": "variable",
-      "computed_type": "font-weight",
-      "computed_value": "700"
+    {
+      "name": "label-weight",
+      "value": "var(--bulma-weight-semibold)"
    },
-    "$help-size": {
-      "name": "$help-size",
-      "value": "$size-small",
-      "type": "variable",
-      "computed_type": "size",
-      "computed_value": "0.75rem"
+    {
+      "name": "help-size",
+      "value": "var(--bulma-size-small)"
    },
-    "$label-colors": {
-      "name": "$label-colors",
-      "value": "$form-colors",
-      "type": "variable"
+    {
+      "name": "label-colors",
+      "value": "shared.$form-colors"
    }
-  },
-  "list": [
-    "$label-color",
-    "$label-weight",
-    "$help-size",
-    "$label-colors"
  ],
-  "file_path": "form/tools.sass"
+  "css-vars": [
+    {
+      "name": "block-spacing",
+      "value": "0.75rem,"
+    }
+  ]
 }
--- a/docs/_data/variables/grid/columns.json
+++ b/docs/_data/variables/grid/columns.json
@ -1,13 +1,15 @@
 {
-  "by_name": {
-    "$column-gap": {
-      "name": "$column-gap",
+  "sass-vars": [
+    {
+      "name": "column-gap",
      "value": "0.75rem",
-      "type": "size"
+      "css-var": "column-gap"
    }
-  },
-  "list": [
-    "$column-gap"
  ],
-  "file_path": "grid/columns.sass"
+  "css-vars": [
+    {
+      "name": "column-gap",
+      "value": "0.75rem"
+    }
+  ]
 }
--- a/docs/_data/variables/grid/grid.json
+++ b/docs/_data/variables/grid/grid.json
@ -0,0 +1,13 @@
+{
+  "sass-vars": [],
+  "css-vars": [
+    {
+      "name": "grid-gap-count",
+      "value": "calc(#{cv.getVar(\"grid-column-count\")} - 1),"
+    },
+    {
+      "name": "grid-column-count",
+      "value": "2,"
+    }
+  ]
+}
--- a/docs/_data/variables/grid/tiles.json
+++ b/docs/_data/variables/grid/tiles.json
@ -1,13 +0,0 @@
-{
-  "by_name": {
-    "$tile-spacing": {
-      "name": "$tile-spacing",
-      "value": "0.75rem",
-      "type": "size"
-    }
-  },
-  "list": [
-    "$tile-spacing"
-  ],
-  "file_path": "grid/tiles.sass"
-}
--- a/docs/_data/variables/helpers/spacing.json
+++ b/docs/_data/variables/helpers/spacing.json
@ -1,37 +0,0 @@
-{
-  "by_name": {
-    "$spacing-shortcuts": {
-      "name": "$spacing-shortcuts",
-      "value": "(\"margin\": \"m\", \"padding\": \"p\")",
-      "type": "string"
-    },
-    "$spacing-directions": {
-      "name": "$spacing-directions",
-      "value": "(\"top\": \"t\", \"right\": \"r\", \"bottom\": \"b\", \"left\": \"l\")",
-      "type": "string"
-    },
-    "$spacing-horizontal": {
-      "name": "$spacing-horizontal",
-      "value": "\"x\"",
-      "type": "string"
-    },
-    "$spacing-vertical": {
-      "name": "$spacing-vertical",
-      "value": "\"y\"",
-      "type": "string"
-    },
-    "$spacing-values": {
-      "name": "$spacing-values",
-      "value": "(\"0\": 0, \"1\": 0.25rem, \"2\": 0.5rem, \"3\": 0.75rem, \"4\": 1rem, \"5\": 1.5rem, \"6\": 3rem, \"auto\": auto)",
-      "type": "string"
-    }
-  },
-  "list": [
-    "$spacing-shortcuts",
-    "$spacing-directions",
-    "$spacing-horizontal",
-    "$spacing-vertical",
-    "$spacing-values"
-  ],
-  "file_path": "helpers/spacing.sass"
-}
--- a/docs/_data/variables/layout/container.json
+++ b/docs/_data/variables/layout/container.json
@ -0,0 +1,15 @@
+{
+  "sass-vars": [
+    {
+      "name": "container-offset",
+      "css-var": "container-offset",
+      "value": "64px"
+    },
+    {
+      "name": "container-max-width",
+      "css-var": "container-max-width",
+      "value": "1408px"
+    }
+  ],
+  "css-vars": []
+}
--- a/docs/_data/variables/layout/footer.json
+++ b/docs/_data/variables/layout/footer.json
@ -1,27 +1,33 @@
 {
-  "by_name": {
-    "$footer-background-color": {
-      "name": "$footer-background-color",
-      "value": "$scheme-main-bis",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(0, 0%, 98%)"
+  "sass-vars": [
+    {
+      "name": "footer-background-color",
+      "value": "var(--bulma-scheme-main-bis)",
+      "css-var": "footer-background-color"
    },
-    "$footer-color": {
-      "name": "$footer-color",
+    {
+      "name": "footer-color",
      "value": "false",
-      "type": "boolean"
+      "css-var": "footer-color"
    },
-    "$footer-padding": {
-      "name": "$footer-padding",
+    {
+      "name": "footer-padding",
      "value": "3rem 1.5rem 6rem",
-      "type": "size"
+      "css-var": "footer-padding"
    }
-  },
-  "list": [
-    "$footer-background-color",
-    "$footer-color",
-    "$footer-padding"
  ],
-  "file_path": "layout/footer.sass"
+  "css-vars": [
+    {
+      "name": "footer-background-color",
+      "value": "var(--bulma-scheme-main-bis)"
+    },
+    {
+      "name": "footer-color",
+      "value": "false"
+    },
+    {
+      "name": "footer-padding",
+      "value": "3rem 1.5rem 6rem"
+    }
+  ]
 }
--- a/docs/_data/variables/layout/hero.json
+++ b/docs/_data/variables/layout/hero.json
@ -1,45 +1,66 @@
 {
-  "by_name": {
-    "$hero-body-padding": {
-      "name": "$hero-body-padding",
+  "sass-vars": [
+    {
+      "name": "hero-body-padding",
      "value": "3rem 1.5rem",
-      "type": "size"
+      "css-var": "hero-body-padding"
    },
-    "$hero-body-padding-tablet": {
-      "name": "$hero-body-padding-tablet",
+    {
+      "name": "hero-body-padding-tablet",
      "value": "3rem 3rem",
-      "type": "size"
+      "css-var": "hero-body-padding-tablet"
    },
-    "$hero-body-padding-small": {
-      "name": "$hero-body-padding-small",
+    {
+      "name": "hero-body-padding-small",
      "value": "1.5rem",
-      "type": "size"
+      "css-var": "hero-body-padding-small"
    },
-    "$hero-body-padding-medium": {
-      "name": "$hero-body-padding-medium",
+    {
+      "name": "hero-body-padding-medium",
      "value": "9rem 4.5rem",
-      "type": "size"
+      "css-var": "hero-body-padding-medium"
    },
-    "$hero-body-padding-large": {
-      "name": "$hero-body-padding-large",
+    {
+      "name": "hero-body-padding-large",
      "value": "18rem 6rem",
-      "type": "size"
+      "css-var": "hero-body-padding-large"
    },
-    "$hero-colors": {
-      "name": "$hero-colors",
-      "value": "$colors",
-      "type": "variable",
-      "computed_type": "map",
-      "computed_value": "Bulma colors"
+    {
+      "name": "hero-gradient-h-offset",
+      "value": "5deg",
+      "css-var": "hero-gradient-h-offset"
+    },
+    {
+      "name": "hero-gradient-s-offset",
+      "value": "10%",
+      "css-var": "hero-gradient-s-offset"
+    },
+    {
+      "name": "hero-gradient-l-offset",
+      "value": "5%",
+      "css-var": "hero-gradient-l-offset:"
    }
-  },
-  "list": [
-    "$hero-body-padding",
-    "$hero-body-padding-tablet",
-    "$hero-body-padding-small",
-    "$hero-body-padding-medium",
-    "$hero-body-padding-large",
-    "$hero-colors"
  ],
-  "file_path": "layout/hero.sass"
-}
+  "css-vars": [
+    {
+      "name": "hero-body-padding",
+      "value": "3rem 1.5rem"
+    },
+    {
+      "name": "hero-body-padding-tablet",
+      "value": "3rem 3rem"
+    },
+    {
+      "name": "hero-body-padding-small",
+      "value": "1.5rem"
+    },
+    {
+      "name": "hero-body-padding-medium",
+      "value": "9rem 4.5rem"
+    },
+    {
+      "name": "hero-body-padding-large",
+      "value": "18rem 6rem"
+    }
+  ]
+}
--- a/docs/_data/variables/layout/level.json
+++ b/docs/_data/variables/layout/level.json
@ -0,0 +1,9 @@
+{
+  "sass-vars": [
+    {
+      "name": "level-item-spacing",
+      "value": "calc(var(--bulma-block-spacing) * 0.5)"
+    }
+  ],
+  "css-vars": []
+}
--- a/docs/_data/variables/layout/media-object.json
+++ b/docs/_data/variables/layout/media-object.json
@ -0,0 +1,78 @@
+{
+  "sass-vars": [
+    {
+      "name": "media-border-color",
+      "value": "hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-border-l),\n  0.5\n)",
+      "css-var": "media-border-color"
+    },
+    {
+      "name": "media-border-size",
+      "value": "1px",
+      "css-var": "media-border-size"
+    },
+    {
+      "name": "media-spacing",
+      "value": "1rem",
+      "css-var": "media-spacing"
+    },
+    {
+      "name": "media-spacing-large",
+      "value": "1.5rem",
+      "css-var": "media-spacing-large"
+    },
+    {
+      "name": "media-content-spacing",
+      "value": "0.75rem",
+      "css-var": "media-content-spacing"
+    },
+    {
+      "name": "media-level-1-spacing",
+      "value": "0.75rem",
+      "css-var": "media-level-1-spacing"
+    },
+    {
+      "name": "media-level-1-content-spacing",
+      "value": "0.5rem",
+      "css-var": "media-level-1-content-spacing"
+    },
+    {
+      "name": "media-level-2-spacing",
+      "value": "0.5rem",
+      "css-var": "media-level-2-spacing"
+    }
+  ],
+  "css-vars": [
+    {
+      "name": "media-border-color",
+      "value": "hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-border-l),\n  0.5\n)"
+    },
+    {
+      "name": "media-border-size",
+      "value": "1px"
+    },
+    {
+      "name": "media-spacing",
+      "value": "1rem"
+    },
+    {
+      "name": "media-spacing-large",
+      "value": "1.5rem"
+    },
+    {
+      "name": "media-content-spacing",
+      "value": "0.75rem"
+    },
+    {
+      "name": "media-level-1-spacing",
+      "value": "0.75rem"
+    },
+    {
+      "name": "media-level-1-content-spacing",
+      "value": "0.5rem"
+    },
+    {
+      "name": "media-level-2-spacing",
+      "value": "0.5rem"
+    }
+  ]
+}
--- a/docs/_data/variables/layout/section.json
+++ b/docs/_data/variables/layout/section.json
@ -1,31 +1,42 @@
 {
-  "by_name": {
-    "$section-padding": {
-      "name": "$section-padding",
+  "sass-vars": [
+    {
+      "name": "section-padding",
      "value": "3rem 1.5rem",
-      "type": "size"
+      "css-var": "section-padding"
    },
-    "$section-padding-desktop": {
-      "name": "$section-padding-desktop",
+    {
+      "name": "section-padding-desktop",
      "value": "3rem 3rem",
-      "type": "size"
+      "css-var": "section-padding-desktop"
    },
-    "$section-padding-medium": {
-      "name": "$section-padding-medium",
+    {
+      "name": "section-padding-medium",
      "value": "9rem 4.5rem",
-      "type": "size"
+      "css-var": "section-padding-medium"
    },
-    "$section-padding-large": {
-      "name": "$section-padding-large",
+    {
+      "name": "section-padding-large",
      "value": "18rem 6rem",
-      "type": "size"
+      "css-var": "section-padding-large"
    }
-  },
-  "list": [
-    "$section-padding",
-    "$section-padding-desktop",
-    "$section-padding-medium",
-    "$section-padding-large"
  ],
-  "file_path": "layout/section.sass"
+  "css-vars": [
+    {
+      "name": "section-padding",
+      "value": "3rem 1.5rem"
+    },
+    {
+      "name": "section-padding-desktop",
+      "value": "3rem 3rem"
+    },
+    {
+      "name": "section-padding-medium",
+      "value": "9rem 4.5rem"
+    },
+    {
+      "name": "section-padding-large",
+      "value": "18rem 6rem"
+    }
+  ]
 }
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
Jeremy Thomas	7f4c17bb55	Fix banner overflow	2025-02-05 14:05:26 +00:00
Jeremy Thomas	96a2497155	Merge pull request #3958 from martinkupa/fix-docs [Docs] Mention required order on form controls' modifiers	2025-01-17 14:32:07 +00:00
Jeremy Thomas	8bf59deadc	Fix banner	2025-01-16 13:01:55 +00:00
martinkupa	cce4b20117	Mention required order on form controls' modifiers	2025-01-10 16:44:45 -03:00
Jeremy Thomas	785418143e	Build 1.0.3	2024-12-27 21:25:24 +01:00
Jeremy Thomas	e23cfc1262	Fix README	2024-12-05 15:18:44 +00:00
Jeremy Thomas	33eeeab44e	Update docs dependencies	2024-12-04 23:24:49 +00:00
Jeremy Thomas	679bef8568	Update dependencies	2024-12-04 23:24:49 +00:00
Jeremy Thomas	2172fa18c9	Merge pull request #3873 from smudja/patch-1 Correct spelling in modular.html	2024-11-27 16:11:42 +00:00
Jeremy Thomas	eb4ff2ad41	Merge pull request #3930 from jnoordsij/fix-branch-references Update various references from master to main brach	2024-11-27 16:11:11 +00:00
Jeremy Thomas	3b3ef02f29	Merge pull request #3773 from tonprince/main fixed disabled state for is-outlined button	2024-11-27 16:01:36 +00:00
Jeremy Thomas	4ebf14b538	Merge pull request #3940 from SomethingNew71/sass-deprecation-fix Updates deprecated round functions in Sass Build	2024-11-27 15:47:28 +00:00
Cole Gentry	125f8f8994	Updates deprecated round functions Signed-off-by: Cole Gentry <peapod2007@gmail.com>	2024-11-24 11:44:39 -05:00
Jeremy Thomas	6374a8094d	Fix #3926	2024-11-11 10:32:08 +00:00
Jeremy Thomas	5531ee1d11	Fix #3920	2024-11-11 10:22:12 +00:00
Jeremy Thomas	4abe784fc4	Rebuild website CSS	2024-11-07 14:48:46 +00:00
Jeremy Thomas	eaab45a2ca	Build CSS	2024-11-07 14:40:23 +00:00
Jeremy Thomas	70ecf0771e	Merge branch 'masterclass'	2024-11-07 14:32:06 +00:00
Jeremy Thomas	b85d1898c1	Fix #3918	2024-11-07 14:16:51 +00:00
Jeremy Thomas	1c7fa94bf1	Add fallback	2024-11-07 13:08:51 +00:00
Jeremy Thomas	fc52c88009	Add banner	2024-11-07 12:44:39 +00:00
Jeremy Thomas	66b6a46451	Init Masterclass	2024-11-07 12:26:30 +00:00
Jesper Noordsij	4b3654aad7	Update various references from master to main brach	2024-10-30 16:13:17 +01:00
Jeremy Thomas	3b63997ad2	Remove shop link	2024-10-18 13:53:06 +01:00
Jeremy Thomas	acc5fd2d1e	Merge pull request #3913 from thecodechef/patch-1 Update love.json	2024-10-18 13:50:43 +01:00
Jeremy Bolding	82640b0e14	Update love.json Updated `@db4you` to `@gebsystems` username and fullname also fixed avatar	2024-09-28 03:48:59 -05:00
Jeremy Thomas	4301d4de48	Merge pull request #3900 from thecodechef/main [Fixed] the twitter link now show up in twitter cards Fixes #3898	2024-09-20 15:33:30 +01:00
Jeremy Thomas	15ff0be367	Add documentation of all CSS variables available	2024-09-18 14:46:10 +01:00
Jeremy Thomas	29aea4dfc4	Fix #3842 : restore use of $easing, $radius-rounded and $speed Sass variables	2024-09-18 12:41:28 +01:00
Jeremy Thomas	9e64f5034f	Fix #3849 : fix Light Mode color swatches in Dark Mode	2024-09-18 12:38:23 +01:00
Jeremy Thomas	1bc01f2676	Fix #3904 , #3884 : fix website horizontal overflow	2024-09-18 12:28:20 +01:00
Jeremy Bolding	98e7ac3c12	Merge pull request #1 from thecodechef/update-twitter-links Changed `twitter.com` to `x.com` in `_includes/docs/elements/tw.html` Fixes #3898	2024-09-11 11:53:59 -05:00
Jeremy Bolding	ac4ba07d78	Changed `twitter.com` to `x.com` in `_includes/docs/elements/tw.html`	2024-09-11 11:49:33 -05:00
Corentin Hervaud	9a1b620195	FIx error in example code in with-modular-sass.html	2024-09-04 16:54:14 +01:00
smudja	664f9f14da	Correct spelling compnents -> components	2024-08-05 13:21:12 +02:00
Jeremy Thomas	5c09f18f5f	Set 1.0.2 as main version	2024-08-02 20:20:00 +01:00
Jeremy Thomas	0ce430fc1a	Update docs packages	2024-08-02 20:19:33 +01:00
Sébastien Conejo	dc8fadb764	feat: Update renamed project: CASE becomes Manifest	2024-08-01 00:15:40 +01:00
Jeremy Thomas	230b21f7fb	Merge pull request #3862 from eltociear/patch-3 docs: update modal.html	2024-07-27 15:53:40 +02:00
Ikko Eltociear Ashimine	09411bcbbf	docs: update modal.html seperate -> separate	2024-07-27 02:14:35 +09:00
Jeremy Thomas	3fd2f65026	Build 1.0.2	2024-07-25 16:58:39 +02:00
Jeremy Thomas	0c05f2874e	Merge pull request #3860 from jgthms/1.0.2 1.0.2	2024-07-25 16:56:55 +02:00
Jeremy Thomas	66eda9537e	Merge branch 'main' into 1.0.2	2024-07-25 16:52:23 +02:00
Jeremy Thomas	66336ea4f2	Fix #3757	2024-07-25 16:50:50 +02:00
Jeremy Thomas	3769027216	Fix #3856	2024-07-25 16:29:34 +02:00
Jeremy Thomas	a2b16c2fa7	Update Sidebar	2024-07-11 13:17:08 +01:00
Jeremy Thomas	05f898d4d8	Add more Sass and CSS variables	2024-07-07 21:01:04 +01:00
Jeremy Thomas	ab4a7b7d18	Add fullheight Section, Add more color helpers, Add tablet Container, Add list of checkboxes and radios	2024-07-07 17:59:24 +01:00
Jeremy Thomas	2ed62be159	Fix #3775 , Fix #3829	2024-07-06 15:42:36 +01:00
Jeremy Thomas	fc7db1b204	Fix doc urls	2024-07-01 15:37:50 +01:00
Jeremy Thomas	8ed556711b	Merge pull request #3837 from bagedevimo/fix-bulma-color-brightness Fix bulma color brightness	2024-07-01 15:32:22 +01:00
Jeremy Thomas	bbd8d21bf2	Merge pull request #3848 from jgthms/customizer Add Bulma Customizer	2024-06-27 04:21:44 +01:00
Jeremy Thomas	7ac0831470	Add box shadow	2024-06-27 04:19:20 +01:00
Jeremy Thomas	ff3ffb12ef	Fix styling	2024-06-27 04:03:20 +01:00
Jeremy Thomas	d3e01494db	Fix Export	2024-06-27 03:50:54 +01:00
Jeremy Thomas	3c1e19a9ad	Add Export toggle	2024-06-27 03:04:40 +01:00
Jeremy Thomas	96de5b2f45	Add Export	2024-06-27 02:00:43 +01:00
Jeremy Thomas	762926d492	Fix styling	2024-06-27 01:26:39 +01:00
Jeremy Thomas	bb62f531e1	Add open state	2024-06-27 01:03:51 +01:00
Jeremy Thomas	068b93a878	Make Customizer a floating window	2024-06-27 00:35:13 +01:00
Jeremy Thomas	493aa56bbb	Add Components	2024-06-26 20:00:17 +01:00
Jeremy Thomas	303da19588	Add Control vars	2024-06-26 16:06:52 +01:00
Jeremy Thomas	891e6e3cb7	Add layout elements	2024-06-26 15:29:29 +01:00
Jeremy Thomas	f9a418dd26	Merge branch 'main' into customizer	2024-06-26 15:02:27 +01:00
Jeremy Thomas	fbbb85d40a	Fix #3743 , Fix #3799 , Fix #3846	2024-06-26 14:59:42 +01:00
Jeremy Thomas	a2bd136efa	Add Form elements	2024-06-26 14:33:43 +01:00
Jeremy Thomas	7670f4eed9	Add all Elements	2024-06-26 02:36:41 +01:00
Jeremy Thomas	5b9f3a0d2a	Add scopes	2024-06-26 01:49:55 +01:00
Jeremy Thomas	fd13432ccc	Add Generic vars	2024-06-26 00:49:42 +01:00
Jeremy Thomas	e0477953b3	Add Typography	2024-06-25 23:28:12 +01:00
Jeremy Thomas	c638115ef2	Add Scheme vars	2024-06-25 23:12:07 +01:00
Jeremy Thomas	0014fc4e34	Add Color module	2024-06-25 22:20:37 +01:00
Jeremy Thomas	cb2de3a2a2	Add Hex prompt	2024-06-25 16:20:07 +01:00
Jeremy Thomas	2cc6593269	Add Reset button	2024-06-25 13:48:53 +01:00
Jeremy Thomas	0c9ae61698	Create Context	2024-06-25 03:59:13 +01:00
Jeremy Thomas	34029baa2c	Add HSL sliders	2024-06-24 04:10:08 +01:00
Jeremy Thomas	681592e689	Improve Slider	2024-06-24 03:48:38 +01:00
Jeremy Thomas	4a165737df	Create Slider	2024-06-24 03:25:58 +01:00
Jeremy Thomas	7d92a2b872	Init Customizer	2024-06-24 01:08:40 +01:00
Jeremy Thomas	74c01f42d1	Fix #3830	2024-06-23 23:35:32 +01:00
Jeremy Thomas	1ad4cb21a2	Fix #3824	2024-06-23 23:09:54 +01:00
Jeremy Thomas	d48e275f43	Fix #3823	2024-06-23 22:56:35 +01:00
Jeremy Thomas	45d70e7e65	Merge pull request #3838 from jgthms/shop Shop	2024-06-11 15:15:36 +01:00
Jeremy Thomas	437525415c	Add cookie banner	2024-06-11 15:09:59 +01:00
Jeremy Thomas	c4f6a184cc	Adjust shop styling	2024-06-11 12:42:21 +01:00
Ben Anderson	b252b86cfa	Replace deprecated use of division operator wiith call to math.div	2024-06-11 15:35:53 +12:00
Ben Anderson	4236077572	Correct the implementation of bulmaColorBrightness Instead of using all channels of the colour to approximate brightness, this function was sublty ignoring the blue channel and over-stating other channels.	2024-06-11 15:34:34 +12:00
Jeremy Thomas	b84d16890f	Add photoswipe	2024-06-11 03:03:31 +01:00
Jeremy Thomas	6cebea9ce2	Add carousel	2024-06-11 02:39:35 +01:00
Jeremy Thomas	1a6164b836	Add shop select	2024-06-11 01:30:26 +01:00
Jeremy Thomas	83fcfdcf5e	Use cards for shop	2024-06-11 01:20:25 +01:00
Jeremy Thomas	af7c31b613	Init shop	2024-06-10 23:20:16 +01:00
Jeremy Thomas	db6f2cd0e3	Fix sidebar	2024-06-07 15:33:46 +01:00
Ruan	d0e7ccbadc	Updated broken link in the README.md Sure, here's a more concise and clear version: "The old variable link (https://bulma.io/documentation/overview/variables/) was broken. I used the Wayback Machine to see where it originally directed and found that the variables page was divided into different sections. The new link is now (https://bulma.io/documentation/customize/#docsNav), which I have updated in the README." Is this better?	2024-05-29 18:17:01 +01:00
Jeremy Thomas	43b879db25	Build 1.0.1	2024-05-20 17:38:07 +01:00
Jeremy Thomas	0c3d84519b	Fix #3786	2024-05-20 17:26:44 +01:00
Jeremy Thomas	bb0518451d	Fix select arrow color	2024-05-20 17:22:40 +01:00
Jeremy Thomas	615e58cb3e	Fix homepage	2024-05-20 17:03:57 +01:00
safazi	f28e758c95	fix github link	2024-05-17 20:45:09 +01:00
hfl	2f3c280c9c	Update responsiveness.html link <p> To make use of these breakpoints, Bulma provides <a href="{{ site.url }}/documentation/sass/responsive-mixins/">9 responsive mixins</a>. </p>	2024-05-17 11:22:49 +01:00
Jeremy Thomas	53f62f465b	Fix #3809	2024-04-30 14:12:40 +01:00
Davey Holler	96597e66ea	Update concepts.html Fixes a typo in the docs	2024-04-30 14:09:44 +01:00
Jeremy Thomas	81a4753afd	Fix #3760	2024-04-29 13:17:18 +01:00
Jeremy Thomas	07b6f9e624	Fix #3759	2024-04-29 13:16:06 +01:00
Jeremy Thomas	6da946f083	Fix #3747	2024-04-29 12:49:22 +01:00
Jeremy Thomas	f062fa3aa4	Fix #3744 : build non-minified versions	2024-04-29 12:35:29 +01:00
Jeremy Thomas	e9a4aac496	Fix #3736	2024-04-29 12:27:08 +01:00
Jeremy Thomas	a151ff6d5a	Update changelog	2024-04-29 12:21:59 +01:00
Jeremy Thomas	7786dd0026	Fix #3737	2024-04-29 12:14:31 +01:00
lolzivkovic	7aec58ae38	Fix #3755	2024-04-29 12:07:21 +01:00
Mads Ohm Larsen	72e99d1bf2	Update links.json The `helpers-positioning` and `helpers-spacing` helpers both point to the same page. `helpers-sizing` also points to this page, but is not part of the helpers that are shown in the sidebar menu. I'm removing `helpers-positioning` as the page is called "Spacing helpers" when entering it.	2024-04-21 21:31:26 +01:00
Jeremy Thomas	f1fe176dfb	Update to Font Awesome 6	2024-04-17 14:16:12 +01:00
Jeremy Thomas	fb1dc09095	Fix #3785	2024-04-17 13:59:25 +01:00
Justin Allman	a38cd562d9	Update navbar.html	2024-04-17 12:07:29 +01:00
Stefan Sommer	1a84fafd63	fixed disabled state for is-outlined button	2024-04-05 09:17:18 +07:00
Jeremy Thomas	d2687d444c	Fix #3729	2024-03-24 20:36:20 +00:00
Jeremy Thomas	af09747aef	Fix #3735	2024-03-23 19:25:31 +00:00
Jeremy Thomas	0f694f95c6	Switch to Font Awesome 5	2024-03-23 19:25:09 +00:00
Mehdi El Fadil	f09a0ec38f	Correct Responsiveness page title	2024-03-23 18:43:36 +00:00
Ikko Eltociear Ashimine	ea9095e9e9	Update migrating-to-v1.html minor fix	2024-03-23 18:10:35 +00:00
Matthias Wiehl	078d51ee94	Update online documentation link in README	2024-03-23 10:51:07 +00:00
Jeremy Thomas	62f021fc5c	Fix #3720	2024-03-22 10:28:14 +00:00
Jeremy Thomas	9e361b998d	Fix sizing	2024-03-22 10:20:03 +00:00
Jeremy Thomas	b4499d5af0	Fix #3725	2024-03-22 10:09:02 +00:00
Jeremy Thomas	4a13f5ea86	Merge pull request #3723 from JaberWiki/main added pdf book cover image	2024-03-22 10:05:03 +00:00
~hedy	0fdabda5e6	Fix broken logo links in /brand/	2024-03-22 10:04:17 +00:00
Hossain Mohammad Shahidullah Jaber	2e3f79fb7a	Delete docs/assets/images/book/cover	2024-03-22 02:29:25 +06:00
Hossain Mohammad Shahidullah Jaber	97f49b4900	Add files via upload	2024-03-22 02:28:47 +06:00
Hossain Mohammad Shahidullah Jaber	ff719a6c67	Create cover	2024-03-22 02:28:10 +06:00
Jeremy Thomas	beddf96613	Fix spacing	2024-03-21 18:16:52 +00:00
Jeremy Thomas	b0fbd0a977	Remove floating link	2024-03-21 18:11:25 +00:00
Jeremy Thomas	85f813a621	Fix homepage overflow	2024-03-21 18:10:03 +00:00
Jeremy Thomas	bbcab3aec5	Add alternative versions links	2024-03-21 18:01:41 +00:00
Jeremy Thomas	15e13c8d6c	Include versions in build	2024-03-21 17:47:18 +00:00
Jeremy Thomas	374a7ca77c	Fix grid	2024-03-21 17:43:04 +00:00
Jeremy Thomas	bdd96cae8c	Fix sidebar	2024-03-21 17:36:39 +00:00
Jeremy Thomas	3d5f7a6ad3	Build v1	2024-03-21 17:24:15 +00:00
Jeremy Thomas	e09e0df3a9	Add backers	2024-03-21 17:19:44 +00:00
Jeremy Thomas	ab5b308f88	Fix website transfer includes	2024-03-21 16:39:38 +00:00
Jeremy Thomas	69877a652c	Init v1	2024-03-21 16:11:54 +00:00
presbrey	16f1b76881	fix "at the following" typo should be "add the following"	2024-03-06 09:44:48 +01:00
Jeremy Thomas	e79c723441	Fix broken image	2024-02-16 18:13:52 +00:00
plusleft	8d75afd30e	Update modal.html	2024-02-11 15:42:09 +00:00
Jeremy Thomas	3dafc77dfe	Close v1 beta list	2024-02-04 21:36:04 +00:00
Jeremy Thomas	2983ef2e5e	Fix #3692	2024-01-19 13:39:17 +00:00
Jeremy Thomas	4268eb3e37	Update index.js	2024-01-12 12:45:08 +00:00
Jeremy Thomas	c4f45535e8	Fix v1 title	2024-01-11 21:31:19 +00:00
Jeremy Thomas	3c490cf9db	Fix build issue	2024-01-11 21:17:22 +00:00
Jeremy Thomas	2ad384ca41	Merge branch 'master' of github.com:jgthms/bulma	2024-01-11 21:16:09 +00:00
Jeremy Thomas	3953fe0664	Fix JS	2024-01-11 21:14:22 +00:00
Jeremy Thomas	4301f50d06	Update form copy	2024-01-11 12:57:09 +00:00
Jeremy Thomas	25d054e64b	Update copy	2024-01-11 04:07:13 +00:00
Jeremy Thomas	363f29b026	Add v1 beta link	2024-01-11 03:58:20 +00:00
Jeremy Thomas	f1d23c178d	Fix CSS book link	2024-01-04 16:47:08 +00:00
Jeremy Thomas	47b56b351e	Add logo	2023-12-22 17:21:03 +00:00
Nicolás Omar González Passerino	f9a317c4a3	doc: Adding related project called Reactive Bulma to Bulma (#3705 ) * doc: Adding related project called Reactive Bulma to Bulma * Removing duplicated project	2023-12-18 07:21:16 +00:00
Jeremy Thomas	489a81b72f	Update GH Action workflow	2023-12-14 00:00:48 +00:00
Jeremy Thomas	7f20009ec1	Add v1 banner	2023-12-12 01:55:02 +00:00
Sébastien Conejo	3a03ea1a9c	feat: update case project description (#3701 ) * Bump yaml from 2.2.1 to 2.2.2 in /docs Bumps [yaml](https://github.com/eemeli/yaml) from 2.2.1 to 2.2.2. - [Release notes](https://github.com/eemeli/yaml/releases) - [Commits](https://github.com/eemeli/yaml/compare/v2.2.1...v2.2.2) --- updated-dependencies: - dependency-name: yaml dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> * feat: update case project description --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Sébastien <Conejo>	2023-12-04 15:43:24 +00:00
Jeremy Thomas	77d7840ad8	Update December 2023	2023-12-02 14:49:43 +00:00
Jeremy Thomas	b902ab9d57	Update packages	2023-11-29 21:17:22 +00:00
Jeremy Thomas	7bcecbd126	Update logo size	2023-11-29 21:06:43 +00:00
Jeremy Thomas	3c4c7da44a	Fix logo	2023-11-29 17:18:29 +00:00
Gianluca Casati	1563ce4e3e	fix link to Trunx	2023-11-20 22:36:28 +00:00
Jeremy Thomas	8bbaf56faa	Fix logos	2023-11-18 11:56:15 +00:00
TheFirstSpine	633206b7ed	Packages update	2023-10-22 08:28:01 +01:00
Jeremy Thomas	5441d0aa7f	Update logos	2023-10-21 16:37:51 +01:00
Jeremy Thomas	2d4cf93283	Update Oct 2023	2023-10-02 15:30:55 +01:00
Jeremy Thomas	fa1d448c1f	Update Expo	2023-08-18 18:42:17 +02:00
Jeremy Thomas	bff455e45f	Update August 2023	2023-08-04 15:17:24 +01:00
Jeremy Thomas	3a45c86e57	Merge pull request #3660 from Guiorgy/patch-1 removed deprecated code in example	2023-07-18 17:07:27 +02:00
Guiorgy	91547540aa	removed deprecated code removed `window.event`. replaced `keyCode` with `code`.	2023-07-18 17:07:03 +04:00
Jeremy Thomas	11570110a9	Fix png	2023-07-14 09:44:01 +02:00
Jeremy Thomas	7ced4167f7	Update mid-July	2023-07-14 09:38:25 +02:00
Jeremy Thomas	ae7c694eb6	Update July 2023	2023-07-03 16:41:28 +01:00
Jeremy Thomas	768ce95d69	Update June 2023	2023-06-03 12:35:37 +01:00
Jeremy Thomas	8bda61469a	Update May 2023	2023-05-24 09:32:49 +01:00
Jeremy Thomas	d2d3c3dd7f	Merge pull request #3648 from SebConejo/add-related-project doc: add related project based on bulma	2023-05-15 18:12:48 +01:00
Sébastien	3a4f179fb9	Merge remote-tracking branch 'origin/master' into add-related-project	2023-05-15 18:17:32 +02:00
Jeremy Thomas	1c7a5e3221	Update May 2023	2023-05-04 23:23:29 +02:00
Nathanael	3958430d1b	Add bulma-jumbo-tiny to list of extensions	2023-04-23 22:49:19 +01:00
Jeremy Thomas	40850b15d9	Fix link	2023-04-06 09:31:35 +01:00
SebConejo	e20b049448	doc: add related project based on bulma	2023-04-05 13:49:30 +02:00
Jeremy Thomas	721b66e12f	Update packages	2023-04-03 10:45:04 +01:00
Jeremy Thomas	55f2fdf79b	Update April 2023	2023-04-03 10:29:10 +01:00
Robert Rosenberg	ca6524c5ae	Display text weight typography helpers Noticed the text weight was all strong in the docs for each text weight. Instead I think it would be nice for folks to be able to see the difference in text weight.	2023-03-16 22:40:09 +00:00
Jeremy Thomas	8f1fe93dbf	Fix link	2023-03-06 07:33:55 +00:00
Jeremy Thomas	6805abd747	Update March 2023	2023-03-05 19:10:12 +00:00
Martin Kolárik	538e83f001	Fix "style" field	2023-02-16 07:43:17 +00:00
Jeremy Thomas	99ffccd24e	Update February	2023-02-03 13:09:18 +00:00