Merge branch 'master' into css-variables-with-fallback

Build CSS
Clean up
2020-10-31 20:27:07 +00:00 · 2020-09-18 14:34:38 +01:00 · 2020-09-07 08:56:04 +01:00 · 2020-09-06 14:25:06 +01:00 · 2020-09-06 10:53:18 +01:00 · 2020-09-06 10:28:48 +01:00
7060 changed files with 82938 additions and 847862 deletions
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -22,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 `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) -->
+<!-- 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 `.sass` or documentation files -->
-<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/main/.github/CONTRIBUTING.md#try-your-changes). -->
+<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/master/.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,24 +0,0 @@
-name: End-to-end tests
-on: [push]
-jobs:
-  cypress-run:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup ruby
-        uses: ruby/setup-ruby@v1
-        with:
-          ruby-version: 3.2.2
-      - name: Install gems
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        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,9 +6,7 @@ npm-debug.log
 test.css
 test.css.map
 test.html
-test*.html
 test.sass
-test.scss
 test.css
 test.css.map

@ -19,6 +17,5 @@ test.css.map
 _gh_pages
 _site
 dev
-dist
 node_modules
 test/output/
--- a/.travis.yml
+++ b/.travis.yml
@ -1,21 +1,6 @@
-matrix:
-  include:
-    - language: sass
-      before_install:
-        - gem install sass
-      script:
-        - test/ruby-sass/ruby-sass.sh
-    - language: node_js
-      node_js:
-        - node
-      before_script:
-        - npm install sass
-      script:
-        - node test/dart-sass/dart-sass.js
-    - language: node_js
-      node_js:
-        - node
-      before_script:
-        - npm install node-sass
-      script:
-        - node test/node-sass/node-sass.js
+script:
+ - "test/sass-compile-tester.sh"
+
+language: sass
+before_install:
+ - gem install sass
--- a/BACKERS.md
+++ b/BACKERS.md
@ -1,27 +1,341 @@
-## Prime backers ($30+)
+# Backers via Patreon

-* Becky
-* *ctala
+<div class="bd-content">
+          

-## Generous backers ($10+)
+<h2 class="title is-5">
+  Generous backers ($30+)
+</h2>

-* Jason Seminara
-* Jordan Nemrow
-* Ian Ebden
-* xvxx
-* Tobias E.
-* Robert Wetzlmayr
-* tsunghanliu
-* chazelton331
-* linkdd
-* bekwam
-* Gomah
+<table class="table is-bordered">
+  
+<thead>
+  <tr>
+    <th>Name</th>
+    <th>Twitter</th>
+    <th>Website</th>
+  </tr>
+</thead>

-## Website backers
+  <tbody>
+    
+      <tr>
+  <td>Adrian Ocneanu</td>

-* Greg Hale
-* Dave Miller
-* Ukatarap
-* Brooke Schreier Ganz
+  <td>
+    
+      <a href="https://twitter.com/aocneanu" target="_blank" rel="nofollow">
+        @aocneanu
+      </a>
+    
+  </td>

-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
+  <td>
+    
+      <a href="https://www.earthlink.ro/" target="_blank" rel="nofollow">
+        Earthlink
+      </a>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>Garry Newman</td>
+
+  <td>
+    
+      <a href="https://twitter.com/garrynewman" target="_blank" rel="nofollow">
+        @garrynewman
+      </a>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+    
+  </tbody>
+</table>
+
+
+
+<h2 class="title is-5">
+  Homepage sponsors ($100+)
+</h2>
+
+<table class="table is-bordered">
+  
+<thead>
+  <tr>
+    <th>Name</th>
+    <th>Twitter</th>
+    <th>Website</th>
+  </tr>
+</thead>
+
+  <tbody>
+    
+      <tr>
+  <td>Robert Bolder</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>Sparheld International GmbH</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>Adela Belin</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>Iaroslav Baklan</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>Fintan Costello</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>MonoVM </td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>Raj.bet</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+    
+      <tr>
+  <td>brabusdot</td>
+  <td colspan="2"><a href="https://github.com/brabusdot" target="_blank" rel="nofollow">GitHub</a></td>
+</tr>
+
+    
+      <tr>
+  <td>Pillarwm</td>
+  <td colspan="2"><a href="https://github.com/Pillarwm" target="_blank" rel="nofollow">GitHub</a></td>
+</tr>
+
+    
+      <tr>
+  <td>airtract</td>
+  <td colspan="2"><a href="https://github.com/airtract" target="_blank" rel="nofollow">GitHub</a></td>
+</tr>
+
+    
+      <tr>
+  <td>patrick136</td>
+  <td colspan="2"><a href="https://github.com/patrick136" target="_blank" rel="nofollow">GitHub</a></td>
+</tr>
+
+    
+  </tbody>
+</table>
+
+<h2 class="title is-5">
+  Bulma backers ($10+)
+</h2>
+
+<table class="table is-bordered">
+  
+<thead>
+  <tr>
+    <th>Name</th>
+    <th>Twitter</th>
+    <th>Website</th>
+  </tr>
+</thead>
+
+  <tbody>
+    
+      <tr>
+  <td>Jordan Nemrow</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>Stuart Stanfield</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>Jason Seminara</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>Al Romano</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>xvxx</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+      <tr>
+  <td>Maurice Perry</td>
+
+  <td>
+    
+  </td>
+
+  <td>
+    
+  </td>
+</tr>
+
+    
+    
+      <tr>
+  <td>mieko</td>
+  <td colspan="2"><a href="https://github.com/mieko" target="_blank" rel="nofollow">GitHub</a></td>
+</tr>
+
+    
+      <tr>
+  <td>mmmonica50</td>
+  <td colspan="2"><a href="https://github.com/mmmonica50" target="_blank" rel="nofollow">GitHub</a></td>
+</tr>
+
+    
+      <tr>
+  <td>nafSadh</td>
+  <td colspan="2"><a href="https://github.com/nafSadh" target="_blank" rel="nofollow">GitHub</a></td>
+</tr>
+
+    
+      <tr>
+  <td>linkdd</td>
+  <td colspan="2"><a href="https://github.com/linkdd" target="_blank" rel="nofollow">GitHub</a></td>
+</tr>
+
+    
+      <tr>
+  <td>seansan</td>
+  <td colspan="2"><a href="https://github.com/seansan" target="_blank" rel="nofollow">GitHub</a></td>
+</tr>
+
+    
+      <tr>
+  <td>sasmithjr</td>
+  <td colspan="2"><a href="https://github.com/sasmithjr" target="_blank" rel="nofollow">GitHub</a></td>
+</tr>
+
+    
+      <tr>
+  <td>Gomah</td>
+  <td colspan="2"><a href="https://github.com/Gomah" target="_blank" rel="nofollow">GitHub</a></td>
+</tr>
+
+    
+  </tbody>
+</table>
+
+        </div>
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/2
+++ b/2
@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2023 Jeremy Thomas
+Copyright (c) 2020 Jeremy Thomas

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -37,7 +37,6 @@ bower install bulma
 ```

 ### Import
-
 After installation, you can import the CSS file into your project using this snippet:

 ```sh
@ -52,9 +51,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/main/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/master/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/customize/#docsNav).
+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/).

 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.

@ -62,11 +61,11 @@ There is **no** JavaScript included. People generally want to use their own JS i

 Bulma uses [autoprefixer](https://github.com/postcss/autoprefixer) to make (most) Flexbox features compatible with earlier browser versions. According to [Can I use](https://caniuse.com/#feat=flexbox), Bulma is compatible with **recent** versions of:

- Chrome
- Edge
- Firefox
- Opera
- Safari
+* Chrome
+* Edge
+* Firefox
+* Opera
+* Safari

 Internet Explorer (10+) is only partially supported.

@ -74,72 +73,59 @@ 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/start/overview/)
+Browse the [online documentation here.](https://bulma.io/documentation/overview/start/)

 ## 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](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>
+| 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                                         |
+| [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.                                                |

 ## 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/main/LICENSE).
+Code copyright 2020 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).

 [npm-link]: https://www.npmjs.com/package/bulma
-[awesome-link]: https://github.com/awesome-css-group/awesome-css
+[awesome-link]:  https://github.com/awesome-css-group/awesome-css
 [awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg
--- a/bower.json
+++ b/bower.json
@ -1,27 +1,19 @@
 {
  "name": "bulma",
-  "version": "1.0.3",
+  "version": "0.9.1",
  "homepage": "https://bulma.io",
  "authors": ["jgthms <bbxdesign@gmail.com>"],
  "description": "Modern CSS framework based on Flexbox",
-  "main": "bulma.scss",
-  "keywords": [
-    "css",
-    "sass",
-    "scss",
-    "flexbox",
-    "grid",
-    "responsive",
-    "framework"
-  ],
+  "main": "bulma.sass",
+  "keywords": ["css", "sass", "flexbox", "responsive", "framework"],
  "license": "MIT",
  "ignore": [
    "**/.*",
-    "bower_components",
-    "docs",
-    "images",
    "node_modules",
+    "bower_components",
    "test",
-    "tests"
+    "tests",
+    "docs",
+    "images"
  ]
 }
--- a/bulma-rtl.sass
+++ b/bulma-rtl.sass
@ -0,0 +1,3 @@
+@charset "utf-8"
+$rtl: true
+@import "bulma"
--- a/bulma.sass
+++ b/bulma.sass
@ -0,0 +1,11 @@
+@charset "utf-8"
+/*! bulma.io v0.9.1 | 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/basic"
--- a/bulma.scss
+++ b/bulma.scss
@ -1,4 +0,0 @@
-@charset "utf-8";
-
-/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
-@use "sass";
--- 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
@ -12,7 +12,6 @@ bulma-test.css
 bulma-website-local.sass
 css/bulma-test.css
 css/bulma-docs.css.map
-debug.html
 PUBLISHING.md
 npm-debug.log
 test.html
@ -23,7 +22,6 @@ test.scss

 .sass-cache
 /bulma
-/cypress/videos
 /dev
 /icons
 /styles/node_modules
--- a/docs/.prettierignore
+++ b/docs/.prettierignore
@ -1,4 +0,0 @@
-**/getting-started.html
-**/overview.html
-**/test.html
-modular.html
--- a/docs/.prettierrc
+++ b/docs/.prettierrc
@ -1,13 +0,0 @@
-{
-  "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,21 +1,11 @@
 # Meta

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

 # Build

-markdown: kramdown
-permalink: pretty
-url: https://bulma.io
-exclude:
-  [
-    ".babelrc",
-    "docker-compose.yml",
-    "icons",
-    "node_modules",
-    "package.json",
-    "templates",
-    "website.scss",
-    "yarn.lock",
-  ]
+markdown:      kramdown
+permalink:     pretty
+url:           https://bulma.io
+exclude:       ['icons', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock']
--- a/docs/_data/backers.json
+++ b/docs/_data/backers.json
@ -0,0 +1,87 @@
+{
+  "10": [
+    {
+      "name": "Maurice Perry",
+      "twitter": "",
+      "start_timestamp": 1575826633076
+    },
+    {
+      "name": "xvxx",
+      "twitter": "",
+      "start_timestamp": 1572311879973
+    },
+    {
+      "name": "Al Romano",
+      "twitter": "",
+      "start_timestamp": 1551649687685
+    },
+    {
+      "name": "Jason Seminara",
+      "twitter": "",
+      "start_timestamp": 1532955289949
+    },
+    {
+      "name": "Stuart Stanfield",
+      "twitter": "",
+      "start_timestamp": 1527579663355
+    },
+    {
+      "name": "Jordan Nemrow",
+      "twitter": "",
+      "start_timestamp": 1510767260223
+    }
+  ],
+  "30": [
+    {
+      "name": "Garry Newman",
+      "twitter": "garrynewman",
+      "start_timestamp": 1511186868165
+    },
+    {
+      "name": "Adrian Ocneanu",
+      "twitter": "aocneanu",
+      "start_timestamp": 1510731567799,
+      "website_url": "https://www.earthlink.ro/",
+      "website_name": "Earthlink"
+    }
+  ],
+  "100": [
+    {
+      "name": "Raj.bet",
+      "twitter": "",
+      "start_timestamp": 1598967631148
+    },
+    {
+      "name": "MonoVM ",
+      "twitter": "",
+      "start_timestamp": 1588271410706
+    },
+    {
+      "name": "Fintan Costello",
+      "twitter": "",
+      "start_timestamp": 1584546730317
+    },
+    {
+      "name": "Iaroslav Baklan",
+      "twitter": "",
+      "start_timestamp": 1571294038349
+    },
+    {
+      "name": "Adela Belin",
+      "twitter": "",
+      "start_timestamp": 1564993835335
+    },
+    {
+      "name": "Sparheld International GmbH",
+      "twitter": "",
+      "start_timestamp": 1563870141112
+    },
+    {
+      "name": "Robert Bolder",
+      "twitter": "",
+      "start_timestamp": 1546593784071
+    }
+  ],
+  "300": [],
+  "500": []
+}
--- a/docs/_data/blog/migratingv070.json
+++ b/docs/_data/blog/migratingv070.json
@ -0,0 +1,179 @@
+{
+  "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
@ -1,32 +0,0 @@
-{
-  "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,18 +1,152 @@
 {
-  "lists": ["scheme", "text", "ornament", "code", "link", "status"],
-  "scheme": [
-    "scheme-main",
-    "scheme-main-bis",
-    "scheme-main-ter",
-    "scheme-invert",
-    "scheme-invert-bis",
-    "scheme-invert-ter"
+  "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%)"
+    }
  ],
-  "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"]
+  "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"]
 }
--- a/docs/_data/css-vars.json
+++ b/docs/_data/css-vars.json
@ -1,67 +0,0 @@
-[
-  "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,37 +1,5 @@
 {
  "by_id": {
-    "mullvad": {
-      "name": "mullvad",
-      "url": "https://mullvad.net/",
-      "highlighted": true,
-      "date": "6 Jan 2021"
-    },
-    "klevgrand": {
-      "name": "klevgrand",
-      "url": "https://klevgrand.com/products/kleverb",
-      "date": "3 June 2022"
-    },
-    "starbucks-concept": {
-      "name": "Starbucks Concept",
-      "url": "https://starbucks-product-single-page.vercel.app/",
-      "date": "1 June 2022"
-    },
-    "signal": {
-      "name": "signal",
-      "url": "https://signal.org/",
-      "highlighted": true,
-      "date": "6 Jan 2021"
-    },
-    "tinystore": {
-      "name": "tinystore",
-      "url": "https://tinystore.app/",
-      "date": "4 June 2021"
-    },
-    "searchcity": {
-      "name": "searchcity",
-      "url": "https://searchcity.app/",
-      "date": "8 Sep 2020"
-    },
    "romes": {
      "name": "romes",
      "url": "https://alt-romes.github.io/romes/",
@ -55,7 +23,7 @@
    },
    "vivohostel": {
      "name": "Vivo Hostel",
-      "url": "#",
+      "url": "https://vivohostel.co/",
      "date": "27 Feb 2020"
    },
    "oneprofile": {
@ -416,22 +384,16 @@
    }
  },
  "lists": {
-    "home": ["signal", "getbedtimestories", "counternetwork", "Gustav"],
+    "home": ["getbedtimestories", "divjoy", "counternetwork", "Gustav"],
    "expo": [
-      "mullvad",
-      "klevgrand",
-      "starbucks-concept",
-      "signal",
-      "tinystore",
-      "searchcity",
+      "romes",
      "vinetos",
      "infinitysearch",
      "pentos",
      "vivohostel",
-      "romes",
+      "oneprofile",
      "formalfounder",
      "klimchuk",
-      "oneprofile",
      "pagespeed",
      "rydesignsstuff",
      "divjoy",
--- a/docs/_data/github.json
+++ b/docs/_data/github.json
@ -0,0 +1,41 @@
+{
+  "1": [
+    "scott-joe",
+    "KirillOsenkov",
+    "romainnorberg",
+    "rewtraw",
+    "bastien09",
+    "neetso",
+    "cosgrove39264",
+    "bekwam",
+    "smjnab",
+    "timothymiko",
+    "mattsly",
+    "fabiofdsantos",
+    "marcop135",
+    "aminah-io",
+    "Carpenter0100",
+    "dangowans",
+    "eddielement"
+  ],
+  "10": [
+    "Gomah",
+    "sasmithjr",
+    "seansan",
+    "linkdd",
+    "nafSadh",
+    "mmmonica50",
+    "mieko"
+  ],
+  "100": [
+    "patrick136",
+    "airtract",
+    "Pillarwm",
+    "brabusdot"
+  ],
+  "300": [
+    "wingerdkm1",
+    "stacho",
+    "kevivmatrix"
+  ]
+}
--- a/docs/_data/global.json
+++ b/docs/_data/global.json
@ -0,0 +1,90 @@
+{
+  "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/icons.json
+++ b/docs/_data/icons.json
@ -1,6 +1,6 @@
 {
  "fontawesome4": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
-  "fontawesome5": "https://use.fontawesome.com/releases/v5.15.2/js/all.js",
+  "fontawesome5": "https://use.fontawesome.com/releases/v5.14.0/js/all.js",
  "ionicons": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css",
  "mdi": "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css"
 }
--- 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,21 +2,15 @@
  "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/1.0.2/bulma-1.0.2.zip",
-  "release_notes": "https://github.com/jgthms/bulma/releases/tag/1.0.2",
+  "download": "https://github.com/jgthms/bulma/releases/download/0.9.1/bulma-0.9.1.zip",
+  "release_notes": "https://github.com/jgthms/bulma/releases/tag/0.9.1",
  "github": "https://github.com/jgthms/bulma",
  "twitter": "https://twitter.com/jgthms",
-  "version": "1.0.2",
+  "version": "0.9.1",
  "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",
-  "scrimba_url": "https://scrimba.com/learn/bulma",
+  "scrimba_url": "https://scrimba.com/g/gbulma",
  "patreon_url": "https://www.patreon.com/jgthms",
-  "sponsorship_url": "https://github.com/sponsors/jgthms",
-  "npm": "https://www.npmjs.com/package/bulma",
-  "git_ssh": "git clone git@github.com:jgthms/bulma.git",
-  "git_https": "git clone https://github.com/jgthms/bulma.git",
-  "git_cli": "gh repo clone jgthms/bulma",
-  "jsdelivr": "https://www.jsdelivr.com/package/npm/bulma",
-  "cdnjs": "https://cdnjs.com/libraries/bulma"
+  "sponsorship_url": "https://github.com/users/jgthms/sponsorship"
 }
--- a/docs/_data/palette.json
+++ b/docs/_data/palette.json
@ -1,29 +0,0 @@
-[
-  "",
-  "-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
@ -1,30 +0,0 @@
-[
-  {
-    "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/sizes.json
+++ b/docs/_data/sizes.json
@ -1 +0,0 @@
-["small", "normal", "medium", "large"]
--- a/docs/_data/sponsors.json
+++ b/docs/_data/sponsors.json
@ -1,12 +1,303 @@
 {
  "by_id": {
-    "slotsandluck": {
-      "name": "slotsandluck",
-      "url": "https://www.slotsandluck.com/",
-      "title": "SLots&Luck",
-      "width": "112",
-      "height": "48"
+    "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-essay-please",
+      "title": "write my essay please",
+      "width":"126",
+      "height":"42",
+      "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": "http://writersperhour.com/urgent-essay-writing-service",
+      "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"
+    },
+    "pillarwm": {
+      "name": "pillarwm",
+      "url": "https://pillarwm.com/",
+      "title": "Pillar",
+      "width":"150",
+      "height":"53"
+    },
+    "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"
    }
  },
-  "footer": ["slotsandluck"]
+  "home": [
+    "themeisle"
+    ,"vpsserver"
+    ,"sparheld"
+    ,"bid4papers"
+    ,"writersperhour"
+    ,"clothingric"
+    ,"edubirdie"
+    ,"emucoupon"
+    ,"namobot"
+    ,"firesticktricks"
+    ,"airtract"
+    ,"realtimecommunications"
+    ,"polygon"
+    ,"bonusfinder"
+    ,"monovm"
+    ,"tutlance"
+    ,"pillarwm"
+    ,"coupons4printing"
+    ,"papersowl"
+    ,"edusson"
+    ,"inkoop"
+    ,"vpnreview"
+    ,"dfds"
+    ,"rajbet"
+  ],
+  "footer": [
+    "polygon"
+    ,"inkoop"
+  ]
 }
--- a/docs/_data/tiers.json
+++ b/docs/_data/tiers.json
@ -1,30 +0,0 @@
-[
-  {
-    "amount": 1,
-    "message": "Thank you for supporting Bulma and open source!"
-  },
-  {
-    "amount": 10,
-    "message": "Your name will be put on the Bulma website's backers page, and in `backers.md` in the Bulma repository."
-  },
-  {
-    "amount": 30,
-    "message": "Your name will be put at the **top** of the Bulma website's backers page, and at the top of `backers.md` in the Bulma repository."
-  },
-  {
-    "amount": 100,
-    "message": "Your name or company logo will appear on the Bulma **homepage**."
-  },
-  {
-    "amount": 200,
-    "message": "Two of your names or company logos will appear on the Bulma **homepage**."
-  },
-  {
-    "amount": 300,
-    "message": "Your name or company logo will appear on the Bulma **homepage** and in the footer of **each page** of the website."
-  },
-  {
-    "amount": 500,
-    "message": "Your name or company logo will appear on the Bulma **documentation sidebar**."
-  }
-]
--- a/docs/_data/variables/base/animations.json
+++ b/docs/_data/variables/base/animations.json
@ -1,4 +0,0 @@
-{
-  "sass-vars": [],
-  "css-vars": []
-}
--- a/docs/_data/variables/base/generic.json
+++ b/docs/_data/variables/base/generic.json
@ -1,222 +1,167 @@
 {
-  "sass-vars": [
-    {
-      "name": "body-background-color",
-      "value": "var(--bulma-scheme-main)",
-      "css-var": "body-background-color"
+  "by_name": {
+    "$body-background-color": {
+      "name": "$body-background-color",
+      "value": "$scheme-main",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
    },
-    {
-      "name": "body-size",
-      "value": "1em",
-      "css-var": "body-size"
+    "$body-size": {
+      "name": "$body-size",
+      "value": "16px",
+      "type": "size"
    },
-    {
-      "name": "body-min-width",
+    "$body-min-width": {
+      "name": "$body-min-width",
      "value": "300px",
-      "css-var": "body-min-width"
+      "type": "size"
    },
-    {
-      "name": "body-rendering",
+    "$body-rendering": {
+      "name": "$body-rendering",
      "value": "optimizeLegibility",
-      "css-var": "body-rendering"
+      "type": "keyword"
    },
-    {
-      "name": "body-family",
-      "value": "var(--bulma-family-primary)",
-      "css-var": "body-family"
+    "$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-overflow-x",
+    "$body-overflow-x": {
+      "name": "$body-overflow-x",
      "value": "hidden",
-      "css-var": "body-overflow-x"
+      "type": "string"
    },
-    {
-      "name": "body-overflow-y",
+    "$body-overflow-y": {
+      "name": "$body-overflow-y",
      "value": "scroll",
-      "css-var": "body-overflow-y"
+      "type": "string"
    },
-    {
-      "name": "body-color",
-      "value": "var(--bulma-text)",
-      "css-var": "body-color"
+    "$body-color": {
+      "name": "$body-color",
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
    },
-    {
-      "name": "body-font-size",
+    "$body-font-size": {
+      "name": "$body-font-size",
      "value": "1em",
-      "css-var": "body-font-size"
+      "type": "size"
    },
-    {
-      "name": "body-weight",
-      "value": "var(--bulma-weight-normal)",
-      "css-var": "body-weight"
+    "$body-weight": {
+      "name": "$body-weight",
+      "value": "$weight-normal",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "400"
    },
-    {
-      "name": "body-line-height",
+    "$body-line-height": {
+      "name": "$body-line-height",
      "value": "1.5",
-      "css-var": "body-line-height"
+      "type": "unitless"
    },
-    {
-      "name": "code-family",
-      "value": "var(--bulma-family-code)",
-      "css-var": "code-family"
+    "$code-family": {
+      "name": "$code-family",
+      "value": "$family-code",
+      "type": "variable",
+      "computed_type": "font-family",
+      "computed_value": "monospace"
    },
-    {
-      "name": "code-padding",
+    "$code-padding": {
+      "name": "$code-padding",
      "value": "0.25em 0.5em 0.25em",
-      "css-var": "code-padding"
+      "type": "size"
    },
-    {
-      "name": "code-weight",
+    "$code-weight": {
+      "name": "$code-weight",
      "value": "normal",
-      "css-var": "code-weight"
+      "type": "font-weight"
    },
-    {
-      "name": "code-size",
+    "$code-size": {
+      "name": "$code-size",
      "value": "0.875em",
-      "css-var": "code-size"
+      "type": "size"
    },
-    {
-      "name": "small-font-size",
+    "$small-font-size": {
+      "name": "$small-font-size",
      "value": "0.875em",
-      "css-var": "small-font-size"
+      "type": "size"
    },
-    {
-      "name": "hr-background-color",
-      "value": "var(--bulma-background)",
-      "css-var": "hr-background-color"
+    "$hr-background-color": {
+      "name": "$hr-background-color",
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
    },
-    {
-      "name": "hr-height",
+    "$hr-height": {
+      "name": "$hr-height",
      "value": "2px",
-      "css-var": "hr-height"
+      "type": "size"
    },
-    {
-      "name": "hr-margin",
+    "$hr-margin": {
+      "name": "$hr-margin",
      "value": "1.5rem 0",
-      "css-var": "hr-margin"
+      "type": "size"
    },
-    {
-      "name": "strong-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "strong-color"
+    "$strong-color": {
+      "name": "$strong-color",
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "strong-weight",
-      "value": "var(--bulma-weight-semibold)",
-      "css-var": "strong-weight"
+    "$strong-weight": {
+      "name": "$strong-weight",
+      "value": "$weight-bold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "700"
    },
-    {
-      "name": "pre-font-size",
+    "$pre-font-size": {
+      "name": "$pre-font-size",
      "value": "0.875em",
-      "css-var": "pre-font-size"
+      "type": "size"
    },
-    {
-      "name": "pre-padding",
+    "$pre-padding": {
+      "name": "$pre-padding",
      "value": "1.25rem 1.5rem",
-      "css-var": "pre-padding"
+      "type": "size"
    },
-    {
-      "name": "pre-code-font-size",
+    "$pre-code-font-size": {
+      "name": "$pre-code-font-size",
      "value": "1em",
-      "css-var": "pre-code-font-size"
+      "type": "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"
  ],
-  "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"
-    }
-  ]
+  "file_path": "base/generic.sass"
 }
--- a/docs/_data/variables/base/minireset.json
+++ b/docs/_data/variables/base/minireset.json
@ -1,4 +0,0 @@
-{
-  "sass-vars": [],
-  "css-vars": []
-}
--- a/docs/_data/variables/base/skeleton.json
+++ b/docs/_data/variables/base/skeleton.json
@ -1,51 +0,0 @@
-{
-  "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,60 +1,51 @@
 {
-  "sass-vars": [
-    {
-      "name": "breadcrumb-item-color",
-      "value": "var(--bulma-link-text)",
-      "css-var": "breadcrumb-item-color"
+  "by_name": {
+    "$breadcrumb-item-color": {
+      "name": "$breadcrumb-item-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "breadcrumb-item-hover-color",
-      "value": "var(--bulma-link-text-hover)",
-      "css-var": "breadcrumb-item-hover-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-active-color",
-      "value": "var(--bulma-link-text-active)",
-      "css-var": "breadcrumb-item-active-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-padding-vertical",
+    "$breadcrumb-item-padding-vertical": {
+      "name": "$breadcrumb-item-padding-vertical",
      "value": "0",
-      "css-var": "breadcrumb-item-padding-vertical"
+      "type": "string"
    },
-    {
-      "name": "breadcrumb-item-padding-horizontal",
+    "$breadcrumb-item-padding-horizontal": {
+      "name": "$breadcrumb-item-padding-horizontal",
      "value": "0.75em",
-      "css-var": "breadcrumb-item-padding-horizontal"
+      "type": "size"
    },
-    {
-      "name": "breadcrumb-item-separator-color",
-      "value": "var(--bulma-border)",
-      "css-var": "breadcrumb-item-separator-color"
+    "$breadcrumb-item-separator-color": {
+      "name": "$breadcrumb-item-separator-color",
+      "value": "$border-hover",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 71%)"
    }
+  },
+  "list": [
+    "$breadcrumb-item-color",
+    "$breadcrumb-item-hover-color",
+    "$breadcrumb-item-active-color",
+    "$breadcrumb-item-padding-vertical",
+    "$breadcrumb-item-padding-horizontal",
+    "$breadcrumb-item-separator-color"
  ],
-  "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)"
-    }
-  ]
+  "file_path": "components/breadcrumb.sass"
 }
--- a/docs/_data/variables/components/card.json
+++ b/docs/_data/variables/components/card.json
@ -1,141 +1,113 @@
 {
-  "sass-vars": [
-    {
-      "name": "card-color",
-      "value": "var(--bulma-text)",
-      "css-var": "card-color"
+  "by_name": {
+    "$card-color": {
+      "name": "$card-color",
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
    },
-    {
-      "name": "card-background-color",
-      "value": "var(--bulma-scheme-main)",
-      "css-var": "card-background-color"
+    "$card-background-color": {
+      "name": "$card-background-color",
+      "value": "$scheme-main",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
    },
-    {
-      "name": "card-shadow",
-      "value": "var(--bulma-shadow)",
-      "css-var": "card-shadow"
+    "$card-shadow": {
+      "name": "$card-shadow",
+      "value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
+      "type": "size"
    },
-    {
-      "name": "card-radius",
-      "value": "0.75rem",
-      "css-var": "card-radius"
+    "$card-radius": {
+      "name": "$card-radius",
+      "value": "0.25rem",
+      "type": "size"
    },
-    {
-      "name": "card-header-background-color",
+    "$card-overflow": {
+      "name": "$card-overflow",
+      "value": "hidden",
+      "type": "string"
+    },
+    "$card-header-background-color": {
+      "name": "$card-header-background-color",
      "value": "transparent",
-      "css-var": "card-header-background-color"
+      "type": "string"
    },
-    {
-      "name": "card-header-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "card-header-color"
+    "$card-header-color": {
+      "name": "$card-header-color",
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "card-header-padding",
+    "$card-header-padding": {
+      "name": "$card-header-padding",
      "value": "0.75rem 1rem",
-      "css-var": "card-header-padding"
+      "type": "size"
    },
-    {
-      "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"
+    "$card-header-shadow": {
+      "name": "$card-header-shadow",
+      "value": "0 0.125em 0.25em rgba($scheme-invert, 0.1)",
+      "type": "size"
    },
-    {
-      "name": "card-header-weight",
-      "value": "var(--bulma-weight-bold)",
-      "css-var": "card-header-weight"
+    "$card-header-weight": {
+      "name": "$card-header-weight",
+      "value": "$weight-bold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "700"
    },
-    {
-      "name": "card-content-background-color",
+    "$card-content-background-color": {
+      "name": "$card-content-background-color",
      "value": "transparent",
-      "css-var": "card-content-background-color"
+      "type": "string"
    },
-    {
-      "name": "card-content-padding",
+    "$card-content-padding": {
+      "name": "$card-content-padding",
      "value": "1.5rem",
-      "css-var": "card-content-padding"
+      "type": "size"
    },
-    {
-      "name": "card-footer-background-color",
+    "$card-footer-background-color": {
+      "name": "$card-footer-background-color",
      "value": "transparent",
-      "css-var": "card-footer-background-color"
+      "type": "string"
    },
-    {
-      "name": "card-footer-border-top",
-      "value": "1px solid var(--bulma-border-weak)",
-      "css-var": "card-footer-border-top"
+    "$card-footer-border-top": {
+      "name": "$card-footer-border-top",
+      "value": "1px solid $border-light",
+      "type": "size"
    },
-    {
-      "name": "card-footer-padding",
+    "$card-footer-padding": {
+      "name": "$card-footer-padding",
      "value": "0.75rem",
-      "css-var": "card-footer-padding"
+      "type": "size"
    },
-    {
-      "name": "card-media-margin",
-      "value": "var(--bulma-block-spacing)",
-      "css-var": "card-media-margin"
+    "$card-media-margin": {
+      "name": "$card-media-margin",
+      "value": "$block-spacing",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "1.5rem"
    }
+  },
+  "list": [
+    "$card-color",
+    "$card-background-color",
+    "$card-shadow",
+    "$card-radius",
+    "$card-overflow",
+    "$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"
  ],
-  "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)"
-    }
-  ]
-}
+  "file_path": "components/card.sass"
+}
--- a/docs/_data/variables/components/dropdown.json
+++ b/docs/_data/variables/components/dropdown.json
@ -1,139 +1,115 @@
 {
-  "sass-vars": [
-    {
-      "name": "dropdown-menu-min-width",
+  "by_name": {
+    "$dropdown-menu-min-width": {
+      "name": "$dropdown-menu-min-width",
      "value": "12rem",
-      "css-var": "dropdown-menu-min-width"
+      "type": "size"
    },
-    {
-      "name": "dropdown-content-background-color",
-      "value": "var(--bulma-scheme-main)",
-      "css-var": "dropdown-content-background-color"
+    "$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-offset",
-      "value": "0.25rem",
-      "css-var": "dropdown-content-offset"
+    "$dropdown-content-arrow": {
+      "name": "$dropdown-content-arrow",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "dropdown-content-padding-bottom",
+    "$dropdown-content-offset": {
+      "name": "$dropdown-content-offset",
+      "value": "4px",
+      "type": "size"
+    },
+    "$dropdown-content-padding-bottom": {
+      "name": "$dropdown-content-padding-bottom",
      "value": "0.5rem",
-      "css-var": "dropdown-content-padding-bottom"
+      "type": "size"
    },
-    {
-      "name": "dropdown-content-padding-top",
+    "$dropdown-content-padding-top": {
+      "name": "$dropdown-content-padding-top",
      "value": "0.5rem",
-      "css-var": "dropdown-content-padding-top"
+      "type": "size"
    },
-    {
-      "name": "dropdown-content-radius",
-      "value": "var(--bulma-radius)",
-      "css-var": "dropdown-content-radius"
+    "$dropdown-content-radius": {
+      "name": "$dropdown-content-radius",
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
    },
-    {
-      "name": "dropdown-content-shadow",
-      "value": "var(--bulma-shadow)",
-      "css-var": "dropdown-content-shadow"
+    "$dropdown-content-shadow": {
+      "name": "$dropdown-content-shadow",
+      "value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
+      "type": "size"
    },
-    {
-      "name": "dropdown-content-z",
+    "$dropdown-content-z": {
+      "name": "$dropdown-content-z",
      "value": "20",
-      "css-var": "dropdown-content-z"
+      "type": "string"
    },
-    {
-      "name": "dropdown-divider-background-color",
-      "value": "var(--bulma-border-weak)",
-      "css-var": "dropdown-divider-background-color"
+    "$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(217, 71%,  53%)"
+    },
+    "$dropdown-divider-background-color": {
+      "name": "$dropdown-divider-background-color",
+      "value": "$border-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 93%)"
    }
+  },
+  "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"
  ],
-  "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)"
-    }
-  ]
+  "file_path": "components/dropdown.sass"
 }
--- a/docs/_data/variables/components/level.json
+++ b/docs/_data/variables/components/level.json
@ -0,0 +1,13 @@
+{
+  "by_name": {
+    "$level-item-spacing": {
+      "name": "$level-item-spacing",
+      "value": "($block-spacing / 2)",
+      "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
@ -0,0 +1,13 @@
+{
+  "by_name": {
+    "$media-border-color": {
+      "name": "$media-border-color",
+      "value": "bulmaRgba($border, 0.5)",
+      "type": "compound"
+    }
+  },
+  "list": [
+    "$media-border-color"
+  ],
+  "file_path": "components/media.sass"
+}
--- a/docs/_data/variables/components/menu.json
+++ b/docs/_data/variables/components/menu.json
@ -1,148 +1,111 @@
 {
-  "sass-vars": [
-    {
-      "name": "menu-item-radius",
-      "value": "var(--bulma-radius-small)",
-      "css-var": "menu-item-radius"
+  "by_name": {
+    "$menu-item-color": {
+      "name": "$menu-item-color",
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
    },
-    {
-      "name": "menu-list-border-left",
-      "value": "1px solid var(--bulma-border)",
-      "css-var": "menu-list-border-left"
+    "$menu-item-radius": {
+      "name": "$menu-item-radius",
+      "value": "$radius-small",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "2px"
    },
-    {
-      "name": "menu-list-line-height",
+    "$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(217, 71%,  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",
      "value": "1.25",
-      "css-var": "menu-list-line-height"
+      "type": "unitless"
    },
-    {
-      "name": "menu-list-link-padding",
+    "$menu-list-link-padding": {
+      "name": "$menu-list-link-padding",
      "value": "0.5em 0.75em",
-      "css-var": "menu-list-link-padding"
+      "type": "size"
    },
-    {
-      "name": "menu-nested-list-margin",
+    "$menu-nested-list-margin": {
+      "name": "$menu-nested-list-margin",
      "value": "0.75em",
-      "css-var": "menu-nested-list-margin"
+      "type": "size"
    },
-    {
-      "name": "menu-nested-list-padding-left",
+    "$menu-nested-list-padding-left": {
+      "name": "$menu-nested-list-padding-left",
      "value": "0.75em",
-      "css-var": "menu-nested-list-padding-left"
+      "type": "size"
    },
-    {
-      "name": "menu-label-color",
-      "value": "var(--bulma-text-weak)",
-      "css-var": "menu-label-color"
+    "$menu-label-color": {
+      "name": "$menu-label-color",
+      "value": "$text-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 48%)"
    },
-    {
-      "name": "menu-label-font-size",
+    "$menu-label-font-size": {
+      "name": "$menu-label-font-size",
      "value": "0.75em",
-      "css-var": "menu-label-font-size"
+      "type": "size"
    },
-    {
-      "name": "menu-label-letter-spacing",
+    "$menu-label-letter-spacing": {
+      "name": "$menu-label-letter-spacing",
      "value": "0.1em",
-      "css-var": "menu-label-letter-spacing"
+      "type": "size"
    },
-    {
-      "name": "menu-label-spacing",
+    "$menu-label-spacing": {
+      "name": "$menu-label-spacing",
      "value": "1em",
-      "css-var": "menu-label-spacing"
+      "type": "size"
    }
+  },
+  "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"
  ],
-  "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"
-    }
-  ]
+  "file_path": "components/menu.sass"
 }
--- a/docs/_data/variables/components/message.json
+++ b/docs/_data/variables/components/message.json
@ -1,145 +1,125 @@
 {
-  "sass-vars": [
-    {
-      "name": "message-border-l-delta",
-      "value": "-20%",
-      "css-var": "message-border-l-delta"
+  "by_name": {
+    "$message-background-color": {
+      "name": "$message-background-color",
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
    },
-    {
-      "name": "message-radius",
-      "value": "var(--bulma-radius)",
-      "css-var": "message-radius"
+    "$message-radius": {
+      "name": "$message-radius",
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
    },
-    {
-      "name": "message-header-weight",
-      "value": "var(--bulma-weight-semibold)",
-      "css-var": "message-header-weight"
+    "$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-padding",
-      "value": "1em 1.25em",
-      "css-var": "message-header-padding"
+    "$message-header-color": {
+      "name": "$message-header-color",
+      "value": "$text-invert",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "#fff"
    },
-    {
-      "name": "message-header-radius",
-      "value": "var(--bulma-radius)",
-      "css-var": "message-header-radius"
+    "$message-header-weight": {
+      "name": "$message-header-weight",
+      "value": "$weight-bold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "700"
    },
-    {
-      "name": "message-body-border-width",
+    "$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",
      "value": "0 0 0 4px",
-      "css-var": "message-body-border-width"
+      "type": "size"
    },
-    {
-      "name": "message-body-color",
-      "value": "var(--bulma-text)",
-      "css-var": "message-body-color"
+    "$message-body-color": {
+      "name": "$message-body-color",
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
    },
-    {
-      "name": "message-body-padding",
+    "$message-body-padding": {
+      "name": "$message-body-padding",
      "value": "1.25em 1.5em",
-      "css-var": "message-body-padding"
+      "type": "size"
    },
-    {
-      "name": "message-body-radius",
-      "value": "var(--bulma-radius-small)",
-      "css-var": "message-body-radius"
+    "$message-body-radius": {
+      "name": "$message-body-radius",
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
    },
-    {
-      "name": "message-body-pre-code-background-color",
+    "$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",
      "value": "transparent",
-      "css-var": "message-body-pre-code-background-color"
+      "type": "string"
    },
-    {
-      "name": "message-header-body-border-width",
+    "$message-header-body-border-width": {
+      "name": "$message-header-body-border-width",
      "value": "0",
-      "css-var": "message-header-body-border-width"
+      "type": "string"
    },
-    {
-      "name": "message-colors",
-      "value": "dv.$colors"
+    "$message-colors": {
+      "name": "$message-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
    }
+  },
+  "list": [
+    "$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"
  ],
-  "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},"
-    }
-  ]
+  "file_path": "components/message.sass"
 }
--- a/docs/_data/variables/components/modal.json
+++ b/docs/_data/variables/components/modal.json
@ -1,186 +1,153 @@
 {
-  "sass-vars": [
-    {
-      "name": "modal-z",
+  "by_name": {
+    "$modal-z": {
+      "name": "$modal-z",
      "value": "40",
-      "css-var": "modal-z"
+      "type": "string"
    },
-    {
-      "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-background-background-color": {
+      "name": "$modal-background-background-color",
+      "value": "bulmaRgba($scheme-invert, 0.86)",
+      "type": "compound"
    },
-    {
-      "name": "modal-content-width",
-      "value": "40rem",
-      "css-var": "modal-content-width"
+    "$modal-content-width": {
+      "name": "$modal-content-width",
+      "value": "640px",
+      "type": "size"
    },
-    {
-      "name": "modal-content-margin-mobile",
-      "value": "1.25rem",
-      "css-var": "modal-content-margin-mobile"
+    "$modal-content-margin-mobile": {
+      "name": "$modal-content-margin-mobile",
+      "value": "20px",
+      "type": "size"
    },
-    {
-      "name": "modal-content-spacing-mobile",
-      "value": "10rem",
-      "css-var": "modal-content-spacing-mobile"
+    "$modal-content-spacing-mobile": {
+      "name": "$modal-content-spacing-mobile",
+      "value": "160px",
+      "type": "size"
    },
-    {
-      "name": "modal-content-spacing-tablet",
-      "value": "2.5rem",
-      "css-var": "modal-content-spacing-tablet"
+    "$modal-content-spacing-tablet": {
+      "name": "$modal-content-spacing-tablet",
+      "value": "40px",
+      "type": "size"
    },
-    {
-      "name": "modal-close-dimensions",
-      "value": "2.5rem",
-      "css-var": "modal-close-dimensions"
+    "$modal-close-dimensions": {
+      "name": "$modal-close-dimensions",
+      "value": "40px",
+      "type": "size"
    },
-    {
-      "name": "modal-close-right",
-      "value": "1.25rem",
-      "css-var": "modal-close-right"
+    "$modal-close-right": {
+      "name": "$modal-close-right",
+      "value": "20px",
+      "type": "size"
    },
-    {
-      "name": "modal-close-top",
-      "value": "1.25rem",
-      "css-var": "modal-close-top"
+    "$modal-close-top": {
+      "name": "$modal-close-top",
+      "value": "20px",
+      "type": "size"
    },
-    {
-      "name": "modal-card-spacing",
-      "value": "2.5rem",
-      "css-var": "modal-card-spacing"
+    "$modal-card-spacing": {
+      "name": "$modal-card-spacing",
+      "value": "40px",
+      "type": "size"
    },
-    {
-      "name": "modal-card-head-background-color",
-      "value": "var(--bulma-scheme-main)",
-      "css-var": "modal-card-head-background-color"
+    "$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-padding",
-      "value": "2rem",
-      "css-var": "modal-card-head-padding"
+    "$modal-card-head-border-bottom": {
+      "name": "$modal-card-head-border-bottom",
+      "value": "1px solid $border",
+      "type": "size"
    },
-    {
-      "name": "modal-card-head-radius",
-      "value": "var(--bulma-radius-large)",
-      "css-var": "modal-card-head-radius"
+    "$modal-card-head-padding": {
+      "name": "$modal-card-head-padding",
+      "value": "20px",
+      "type": "size"
    },
-    {
-      "name": "modal-card-title-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "modal-card-title-color"
+    "$modal-card-head-radius": {
+      "name": "$modal-card-head-radius",
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
    },
-    {
-      "name": "modal-card-title-line-height",
+    "$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",
      "value": "1",
-      "css-var": "modal-card-title-line-height"
+      "type": "string"
    },
-    {
-      "name": "modal-card-title-size",
-      "value": "var(--bulma-size-4)",
-      "css-var": "modal-card-title-size"
+    "$modal-card-title-size": {
+      "name": "$modal-card-title-size",
+      "value": "$size-4",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "1.5rem"
    },
-    {
-      "name": "modal-card-foot-background-color",
-      "value": "var(--bulma-scheme-main-bis)",
-      "css-var": "modal-card-foot-background-color"
+    "$modal-card-foot-radius": {
+      "name": "$modal-card-foot-radius",
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
    },
-    {
-      "name": "modal-card-foot-radius",
-      "value": "var(--bulma-radius-large)",
-      "css-var": "modal-card-foot-radius"
+    "$modal-card-foot-border-top": {
+      "name": "$modal-card-foot-border-top",
+      "value": "1px solid $border",
+      "type": "size"
    },
-    {
-      "name": "modal-card-body-background-color",
-      "value": "var(--bulma-scheme-main)",
-      "css-var": "modal-card-body-background-color"
+    "$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-padding",
-      "value": "2rem",
-      "css-var": "modal-card-body-padding"
+    "$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"
    }
+  },
+  "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"
  ],
-  "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"
-    }
-  ]
-}
+  "file_path": "components/modal.sass"
+}
--- a/docs/_data/variables/components/navbar.json
+++ b/docs/_data/variables/components/navbar.json
@ -1,166 +1,281 @@
 {
-  "sass-vars": [
-    {
-      "name": "navbar-background-color",
-      "css-var": "navbar-background-color",
-      "value": "var(--bulma-scheme-main)"
+  "by_name": {
+    "$navbar-background-color": {
+      "name": "$navbar-background-color",
+      "value": "$scheme-main",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
    },
-    {
-      "name": "navbar-box-shadow-size",
-      "css-var": "navbar-box-shadow-size",
-      "value": "0 0.125em 0 0"
+    "$navbar-box-shadow-size": {
+      "name": "$navbar-box-shadow-size",
+      "value": "0 2px 0 0",
+      "type": "size"
    },
-    {
-      "name": "navbar-box-shadow-color",
-      "css-var": "navbar-box-shadow-color",
-      "value": "var(--bulma-background)"
+    "$navbar-box-shadow-color": {
+      "name": "$navbar-box-shadow-color",
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
    },
-    {
-      "name": "navbar-height",
+    "$navbar-height": {
+      "name": "$navbar-height",
      "value": "3.25rem",
-      "css-var": "navbar-height"
+      "type": "size"
    },
-    {
-      "name": "navbar-padding-vertical",
-      "css-var": "navbar-padding-vertical",
-      "value": "1rem"
+    "$navbar-padding-vertical": {
+      "name": "$navbar-padding-vertical",
+      "value": "1rem",
+      "type": "size"
    },
-    {
-      "name": "navbar-padding-horizontal",
-      "css-var": "navbar-padding-horizontal",
-      "value": "2rem"
+    "$navbar-padding-horizontal": {
+      "name": "$navbar-padding-horizontal",
+      "value": "2rem",
+      "type": "size"
    },
-    {
-      "name": "navbar-z",
-      "css-var": "navbar-z",
-      "value": "30"
+    "$navbar-z": {
+      "name": "$navbar-z",
+      "value": "30",
+      "type": "string"
    },
-    {
-      "name": "navbar-fixed-z",
-      "css-var": "navbar-fixed-z",
-      "value": "30"
+    "$navbar-fixed-z": {
+      "name": "$navbar-fixed-z",
+      "value": "30",
+      "type": "string"
    },
-    {
-      "name": "navbar-item-img-max-height",
-      "css-var": "navbar-item-img-max-height",
-      "value": "1.75rem"
+    "$navbar-item-color": {
+      "name": "$navbar-item-color",
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
    },
-    {
-      "name": "navbar-burger-color",
-      "css-var": "navbar-burger-color",
-      "value": "var(--bulma-navbar-item-color)"
+    "$navbar-item-hover-color": {
+      "name": "$navbar-item-hover-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "navbar-tab-hover-background-color",
-      "css-var": "navbar-tab-hover-background-color",
-      "value": "transparent"
+    "$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-border-bottom-color",
-      "css-var": "navbar-tab-hover-border-bottom-color",
-      "value": "var(--bulma-link)"
+    "$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-active-color",
-      "css-var": "navbar-tab-active-color",
-      "value": "var(--bulma-link)"
+    "$navbar-item-active-background-color": {
+      "name": "$navbar-item-active-background-color",
+      "value": "transparent",
+      "type": "string"
    },
-    {
-      "name": "navbar-tab-active-background-color",
-      "css-var": "navbar-tab-active-background-color",
-      "value": "transparent"
+    "$navbar-item-img-max-height": {
+      "name": "$navbar-item-img-max-height",
+      "value": "1.75rem",
+      "type": "size"
    },
-    {
-      "name": "navbar-tab-active-border-bottom-color",
-      "css-var": "navbar-tab-active-border-bottom-color",
-      "value": "var(--bulma-link)"
+    "$navbar-burger-color": {
+      "name": "$navbar-burger-color",
+      "value": "$navbar-item-color",
+      "type": "variable"
    },
-    {
-      "name": "navbar-tab-active-border-bottom-style",
-      "css-var": "navbar-tab-active-border-bottom-style",
-      "value": "solid"
+    "$navbar-tab-hover-background-color": {
+      "name": "$navbar-tab-hover-background-color",
+      "value": "transparent",
+      "type": "string"
    },
-    {
-      "name": "navbar-tab-active-border-bottom-width",
-      "css-var": "navbar-tab-active-border-bottom-width",
-      "value": "0.1875em"
+    "$navbar-tab-hover-border-bottom-color": {
+      "name": "$navbar-tab-hover-border-bottom-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "navbar-dropdown-background-color",
-      "css-var": "navbar-dropdown-background-color",
-      "value": "var(--bulma-scheme-main)"
+    "$navbar-tab-active-color": {
+      "name": "$navbar-tab-active-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "navbar-dropdown-border-l",
-      "css-var": "navbar-dropdown-border-l",
-      "value": "var(--bulma-border-l)"
+    "$navbar-tab-active-background-color": {
+      "name": "$navbar-tab-active-background-color",
+      "value": "transparent",
+      "type": "string"
    },
-    {
-      "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-color": {
+      "name": "$navbar-tab-active-border-bottom-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "navbar-dropdown-border-style",
-      "css-var": "navbar-dropdown-border-style",
-      "value": "solid"
+    "$navbar-tab-active-border-bottom-style": {
+      "name": "$navbar-tab-active-border-bottom-style",
+      "value": "solid",
+      "type": "string"
    },
-    {
-      "name": "navbar-dropdown-border-width",
-      "css-var": "navbar-dropdown-border-width",
-      "value": "0.125em"
+    "$navbar-tab-active-border-bottom-width": {
+      "name": "$navbar-tab-active-border-bottom-width",
+      "value": "3px",
+      "type": "size"
    },
-    {
-      "name": "navbar-dropdown-offset",
-      "css-var": "navbar-dropdown-offset",
-      "value": "-0.25em"
+    "$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-arrow",
-      "css-var": "navbar-dropdown-arrow",
-      "value": "var(--bulma-link)"
+    "$navbar-dropdown-border-top": {
+      "name": "$navbar-dropdown-border-top",
+      "value": "2px solid $border",
+      "type": "size"
    },
-    {
-      "name": "navbar-dropdown-radius",
-      "css-var": "navbar-dropdown-radius",
-      "value": "var(--bulma-radius-large)"
+    "$navbar-dropdown-offset": {
+      "name": "$navbar-dropdown-offset",
+      "value": "-4px",
+      "type": "size"
    },
-    {
-      "name": "navbar-dropdown-z",
-      "css-var": "navbar-dropdown-z",
-      "value": "20"
+    "$navbar-dropdown-arrow": {
+      "name": "$navbar-dropdown-arrow",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "navbar-dropdown-boxed-radius",
-      "css-var": "navbar-dropdown-boxed-radius",
-      "value": "var(--bulma-radius-large)"
+    "$navbar-dropdown-radius": {
+      "name": "$navbar-dropdown-radius",
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
    },
-    {
-      "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-z": {
+      "name": "$navbar-dropdown-z",
+      "value": "20",
+      "type": "string"
    },
-    {
-      "name": "navbar-divider-background-l",
-      "css-var": "navbar-divider-background-l",
-      "value": "var(--bulma-background-l)"
+    "$navbar-dropdown-boxed-radius": {
+      "name": "$navbar-dropdown-boxed-radius",
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
    },
-    {
-      "name": "navbar-divider-height",
-      "css-var": "navbar-divider-height",
-      "value": "0.125em"
+    "$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": "size"
    },
-    {
-      "name": "navbar-bottom-box-shadow-size",
-      "css-var": "navbar-bottom-box-shadow-size",
-      "value": "0 -0.125em 0 0"
+    "$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(217, 71%,  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": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
    }
+  },
+  "list": [
+    "$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"
  ],
-  "css-vars": [
-    {
-      "name": "navbar-height",
-      "css-var": "navbar-height",
-      "value": "3.25rem"
-    }
-  ]
-}
+  "file_path": "components/navbar.sass"
+}
--- a/docs/_data/variables/components/pagination.json
+++ b/docs/_data/variables/components/pagination.json
@ -1,256 +1,163 @@
 {
-  "sass-vars": [
-    {
-      "name": "pagination-margin",
+  "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",
      "value": "-0.25rem",
-      "css-var": "pagination-margin"
+      "type": "size"
    },
-    {
-      "name": "pagination-min-width",
-      "value": "var(--bulma-control-height)",
-      "css-var": "pagination-min-width"
+    "$pagination-min-width": {
+      "name": "$pagination-min-width",
+      "value": "$control-height",
+      "type": "variable"
    },
-    {
-      "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",
+    "$pagination-item-font-size": {
+      "name": "$pagination-item-font-size",
      "value": "1em",
-      "css-var": "pagination-item-font-size"
+      "type": "size"
    },
-    {
-      "name": "pagination-item-margin",
+    "$pagination-item-margin": {
+      "name": "$pagination-item-margin",
      "value": "0.25rem",
-      "css-var": "pagination-item-margin"
+      "type": "size"
    },
-    {
-      "name": "pagination-item-padding-left",
+    "$pagination-item-padding-left": {
+      "name": "$pagination-item-padding-left",
      "value": "0.5em",
-      "css-var": "pagination-item-padding-left"
+      "type": "size"
    },
-    {
-      "name": "pagination-item-padding-right",
+    "$pagination-item-padding-right": {
+      "name": "$pagination-item-padding-right",
      "value": "0.5em",
-      "css-var": "pagination-item-padding-right"
+      "type": "size"
    },
-    {
-      "name": "pagination-nav-padding-left",
-      "value": "0.75em",
-      "css-var": "pagination-nav-padding-left"
+    "$pagination-hover-color": {
+      "name": "$pagination-hover-color",
+      "value": "$link-hover",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "pagination-nav-padding-right",
-      "value": "0.75em",
-      "css-var": "pagination-nav-padding-right"
+    "$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-color",
-      "value": "var(--bulma-text-weak)",
-      "css-var": "pagination-disabled-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-background-color",
-      "value": "var(--bulma-border)",
-      "css-var": "pagination-disabled-background-color"
+    "$pagination-focus-border-color": {
+      "name": "$pagination-focus-border-color",
+      "value": "$link-focus-border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "pagination-disabled-border-color",
-      "value": "var(--bulma-border)",
-      "css-var": "pagination-disabled-border-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-color",
-      "value": "var(--bulma-link-invert)",
-      "css-var": "pagination-current-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-background-color",
-      "value": "var(--bulma-link)",
-      "css-var": "pagination-current-background-color"
+    "$pagination-disabled-color": {
+      "name": "$pagination-disabled-color",
+      "value": "$text-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 48%)"
    },
-    {
-      "name": "pagination-current-border-color",
-      "value": "var(--bulma-link)",
-      "css-var": "pagination-current-border-color"
+    "$pagination-disabled-background-color": {
+      "name": "$pagination-disabled-background-color",
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
    },
-    {
-      "name": "pagination-ellipsis-color",
-      "value": "var(--bulma-text-weak)",
-      "css-var": "pagination-ellipsis-color"
+    "$pagination-disabled-border-color": {
+      "name": "$pagination-disabled-border-color",
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
    },
-    {
-      "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"
+    "$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(217, 71%,  53%)"
+    },
+    "$pagination-current-border-color": {
+      "name": "$pagination-current-border-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
+    },
+    "$pagination-ellipsis-color": {
+      "name": "$pagination-ellipsis-color",
+      "value": "$grey-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 71%)"
    }
+  },
+  "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-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"
  ],
-  "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},"
-    }
-  ]
-}
+  "file_path": "components/pagination.sass"
+}
--- a/docs/_data/variables/components/panel.json
+++ b/docs/_data/variables/components/panel.json
@ -1,208 +1,185 @@
 {
-  "sass-vars": [
-    {
-      "name": "panel-margin",
-      "value": "var(--bulma-block-spacing)",
-      "css-var": "panel-margin"
+  "by_name": {
+    "$panel-margin": {
+      "name": "$panel-margin",
+      "value": "$block-spacing",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "1.5rem"
    },
-    {
-      "name": "panel-item-border",
-      "value": "1px solid var(--bulma-border-weak)",
-      "css-var": "panel-item-border"
+    "$panel-item-border": {
+      "name": "$panel-item-border",
+      "value": "1px solid $border-light",
+      "type": "size"
    },
-    {
-      "name": "panel-radius",
-      "value": "var(--bulma-radius-large)",
-      "css-var": "panel-radius"
+    "$panel-radius": {
+      "name": "$panel-radius",
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
    },
-    {
-      "name": "panel-shadow",
-      "value": "var(--bulma-shadow)",
-      "css-var": "panel-shadow"
+    "$panel-shadow": {
+      "name": "$panel-shadow",
+      "value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
+      "type": "size"
    },
-    {
-      "name": "panel-heading-line-height",
+    "$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",
      "value": "1.25",
-      "css-var": "panel-heading-line-height"
+      "type": "unitless"
    },
-    {
-      "name": "panel-heading-padding",
-      "value": "1em 1.25em",
-      "css-var": "panel-heading-padding"
+    "$panel-heading-padding": {
+      "name": "$panel-heading-padding",
+      "value": "0.75em 1em",
+      "type": "size"
    },
-    {
-      "name": "panel-heading-radius",
-      "value": "var(--bulma-radius)",
-      "css-var": "panel-heading-radius"
+    "$panel-heading-radius": {
+      "name": "$panel-heading-radius",
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
    },
-    {
-      "name": "panel-heading-size",
+    "$panel-heading-size": {
+      "name": "$panel-heading-size",
      "value": "1.25em",
-      "css-var": "panel-heading-size"
+      "type": "size"
    },
-    {
-      "name": "panel-heading-weight",
-      "value": "var(--bulma-weight-bold)",
-      "css-var": "panel-heading-weight"
+    "$panel-heading-weight": {
+      "name": "$panel-heading-weight",
+      "value": "$weight-bold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "700"
    },
-    {
-      "name": "panel-tabs-font-size",
-      "value": "1em",
-      "css-var": "panel-tabs-font-size"
+    "$panel-tabs-font-size": {
+      "name": "$panel-tabs-font-size",
+      "value": "0.875em",
+      "type": "size"
    },
-    {
-      "name": "panel-tab-border-bottom-color",
-      "value": "var(--bulma-border)",
-      "css-var": "panel-tab-border-bottom-color"
+    "$panel-tab-border-bottom": {
+      "name": "$panel-tab-border-bottom",
+      "value": "1px solid $border",
+      "type": "size"
    },
-    {
-      "name": "panel-tab-border-bottom-style",
-      "value": "solid",
-      "css-var": "panel-tab-border-bottom-style"
+    "$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-width",
-      "value": "1px",
-      "css-var": "panel-tab-border-bottom-width"
+    "$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-active-color",
-      "value": "var(--bulma-link-active)",
-      "css-var": "panel-tab-active-color"
+    "$panel-list-item-color": {
+      "name": "$panel-list-item-color",
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
    },
-    {
-      "name": "panel-list-item-color",
-      "value": "var(--bulma-text)",
-      "css-var": "panel-list-item-color"
+    "$panel-list-item-hover-color": {
+      "name": "$panel-list-item-hover-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "panel-list-item-hover-color",
-      "value": "var(--bulma-link)",
-      "css-var": "panel-list-item-hover-color"
+    "$panel-block-color": {
+      "name": "$panel-block-color",
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "panel-block-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "panel-block-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-hover-background-color",
-      "value": "var(--bulma-background)",
-      "css-var": "panel-block-hover-background-color"
+    "$panel-block-active-border-left-color": {
+      "name": "$panel-block-active-border-left-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "panel-block-active-border-left-color",
-      "value": "var(--bulma-link)",
-      "css-var": "panel-block-active-border-left-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-color",
-      "value": "var(--bulma-link-active)",
-      "css-var": "panel-block-active-color"
+    "$panel-block-active-icon-color": {
+      "name": "$panel-block-active-icon-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "panel-block-active-icon-color",
-      "value": "var(--bulma-link)",
-      "css-var": "panel-block-active-icon-color"
+    "$panel-icon-color": {
+      "name": "$panel-icon-color",
+      "value": "$text-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 48%)"
    },
-    {
-      "name": "panel-icon-color",
-      "value": "var(--bulma-text-weak)",
-      "css-var": "panel-icon-color"
-    },
-    {
-      "name": "panel-colors",
-      "value": "dv.$colors"
+    "$panel-colors": {
+      "name": "$panel-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
    }
+  },
+  "list": [
+    "$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"
  ],
-  "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)"
-    }
-  ]
+  "file_path": "components/panel.sass"
 }
--- a/docs/_data/variables/components/tabs.json
+++ b/docs/_data/variables/components/tabs.json
@ -1,222 +1,187 @@
 {
-  "sass-vars": [
-    {
-      "name": "tabs-border-bottom-color",
-      "value": "var(--bulma-border)",
-      "css-var": "tabs-border-bottom-color"
+  "by_name": {
+    "$tabs-border-bottom-color": {
+      "name": "$tabs-border-bottom-color",
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
    },
-    {
-      "name": "tabs-border-bottom-style",
+    "$tabs-border-bottom-style": {
+      "name": "$tabs-border-bottom-style",
      "value": "solid",
-      "css-var": "tabs-border-bottom-style"
+      "type": "string"
    },
-    {
-      "name": "tabs-border-bottom-width",
+    "$tabs-border-bottom-width": {
+      "name": "$tabs-border-bottom-width",
      "value": "1px",
-      "css-var": "tabs-border-bottom-width"
+      "type": "size"
    },
-    {
-      "name": "tabs-link-color",
-      "value": "var(--bulma-text)",
-      "css-var": "tabs-link-color"
+    "$tabs-link-color": {
+      "name": "$tabs-link-color",
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
    },
-    {
-      "name": "tabs-link-hover-border-bottom-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "tabs-link-hover-border-bottom-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-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "tabs-link-hover-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-active-border-bottom-color",
-      "value": "var(--bulma-link-text)",
-      "css-var": "tabs-link-active-border-bottom-color"
+    "$tabs-link-active-border-bottom-color": {
+      "name": "$tabs-link-active-border-bottom-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "tabs-link-active-color",
-      "value": "var(--bulma-link-text)",
-      "css-var": "tabs-link-active-color"
+    "$tabs-link-active-color": {
+      "name": "$tabs-link-active-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "tabs-link-padding",
+    "$tabs-link-padding": {
+      "name": "$tabs-link-padding",
      "value": "0.5em 1em",
-      "css-var": "tabs-link-padding"
+      "type": "size"
    },
-    {
-      "name": "tabs-boxed-link-radius",
-      "value": "var(--bulma-radius)",
-      "css-var": "tabs-boxed-link-radius"
+    "$tabs-boxed-link-radius": {
+      "name": "$tabs-boxed-link-radius",
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
    },
-    {
-      "name": "tabs-boxed-link-hover-background-color",
-      "value": "var(--bulma-background)",
-      "css-var": "tabs-boxed-link-hover-background-color"
+    "$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-border-bottom-color",
-      "value": "var(--bulma-border)",
-      "css-var": "tabs-boxed-link-hover-border-bottom-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-active-background-color",
-      "value": "var(--bulma-scheme-main)",
-      "css-var": "tabs-boxed-link-active-background-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-border-color",
-      "value": "var(--bulma-border)",
-      "css-var": "tabs-boxed-link-active-border-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-bottom-color",
+    "$tabs-boxed-link-active-border-bottom-color": {
+      "name": "$tabs-boxed-link-active-border-bottom-color",
      "value": "transparent",
-      "css-var": "tabs-boxed-link-active-border-bottom-color"
+      "type": "string"
    },
-    {
-      "name": "tabs-toggle-link-border-color",
-      "value": "var(--bulma-border)",
-      "css-var": "tabs-toggle-link-border-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-style",
+    "$tabs-toggle-link-border-style": {
+      "name": "$tabs-toggle-link-border-style",
      "value": "solid",
-      "css-var": "tabs-toggle-link-border-style"
+      "type": "string"
    },
-    {
-      "name": "tabs-toggle-link-border-width",
+    "$tabs-toggle-link-border-width": {
+      "name": "$tabs-toggle-link-border-width",
      "value": "1px",
-      "css-var": "tabs-toggle-link-border-width"
+      "type": "size"
    },
-    {
-      "name": "tabs-toggle-link-hover-background-color",
-      "value": "var(--bulma-background)",
-      "css-var": "tabs-toggle-link-hover-background-color"
+    "$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-border-color",
-      "value": "var(--bulma-border-hover)",
-      "css-var": "tabs-toggle-link-hover-border-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-radius",
-      "value": "var(--bulma-radius)",
-      "css-var": "tabs-toggle-link-radius"
+    "$tabs-toggle-link-radius": {
+      "name": "$tabs-toggle-link-radius",
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
    },
-    {
-      "name": "tabs-toggle-link-active-background-color",
-      "value": "var(--bulma-link)",
-      "css-var": "tabs-toggle-link-active-background-color"
+    "$tabs-toggle-link-active-background-color": {
+      "name": "$tabs-toggle-link-active-background-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "tabs-toggle-link-active-border-color",
-      "value": "var(--bulma-link)",
-      "css-var": "tabs-toggle-link-active-border-color"
+    "$tabs-toggle-link-active-border-color": {
+      "name": "$tabs-toggle-link-active-border-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "tabs-toggle-link-active-color",
-      "value": "var(--bulma-link-invert)",
-      "css-var": "tabs-toggle-link-active-color"
+    "$tabs-toggle-link-active-color": {
+      "name": "$tabs-toggle-link-active-color",
+      "value": "$link-invert",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "#fff"
    }
+  },
+  "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"
  ],
-  "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)"
-    }
-  ]
+  "file_path": "components/tabs.sass"
 }
--- a/docs/_data/variables/elements/block.json
+++ b/docs/_data/variables/elements/block.json
@ -1,9 +0,0 @@
-{
-  "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,69 +1,55 @@
 {
-  "sass-vars": [
-    {
-      "name": "box-background-color",
-      "value": "var(--bulma-scheme-main)",
-      "css-var": "box-background-color"
+  "by_name": {
+    "$box-color": {
+      "name": "$box-color",
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
    },
-    {
-      "name": "box-color",
-      "value": "var(--bulma-text)",
-      "css-var": "box-color"
+    "$box-background-color": {
+      "name": "$box-background-color",
+      "value": "$scheme-main",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
    },
-    {
-      "name": "box-radius",
-      "value": "var(--bulma-radius-large)",
-      "css-var": "box-radius"
+    "$box-radius": {
+      "name": "$box-radius",
+      "value": "$radius-large",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "6px"
    },
-    {
-      "name": "box-shadow",
-      "value": "var(--bulma-shadow)",
-      "css-var": "box-shadow"
+    "$box-shadow": {
+      "name": "$box-shadow",
+      "value": "0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)",
+      "type": "size"
    },
-    {
-      "name": "box-padding",
+    "$box-padding": {
+      "name": "$box-padding",
      "value": "1.25rem",
-      "css-var": "box-padding"
+      "type": "size"
    },
-    {
-      "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-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": "size"
    },
-    {
-      "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"
+    "$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": "size"
    }
+  },
+  "list": [
+    "$box-color",
+    "$box-background-color",
+    "$box-radius",
+    "$box-shadow",
+    "$box-padding",
+    "$box-link-hover-shadow",
+    "$box-link-active-shadow"
  ],
-  "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)"
-    }
-  ]
-}
+  "file_path": "elements/box.sass"
+}
--- a/docs/_data/variables/elements/button.json
+++ b/docs/_data/variables/elements/button.json
@ -1,271 +1,205 @@
 {
-  "sass-vars": [
-    {
-      "name": "button-weight",
-      "value": "var(--bulma-weight-medium)",
-      "css-var": "button-weight"
+  "by_name": {
+    "$button-color": {
+      "name": "$button-color",
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "button-family",
+    "$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",
      "value": "false",
-      "css-var": "button-family"
+      "type": "boolean"
    },
-    {
-      "name": "button-border-color",
-      "value": "var(--bulma-border)",
-      "css-var": "button-border-color"
+    "$button-border-color": {
+      "name": "$button-border-color",
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
    },
-    {
-      "name": "button-border-style",
-      "value": "solid",
-      "css-var": "button-border-style"
+    "$button-border-width": {
+      "name": "$button-border-width",
+      "value": "$control-border-width",
+      "type": "variable"
    },
-    {
-      "name": "button-border-width",
-      "value": "var(--bulma-control-border-width)",
-      "css-var": "button-border-width"
+    "$button-padding-vertical": {
+      "name": "$button-padding-vertical",
+      "value": "calc(0.5em - #{$button-border-width})",
+      "type": "size"
    },
-    {
-      "name": "button-padding-vertical",
-      "value": "0.5em",
-      "css-var": "button-padding-vertical"
-    },
-    {
-      "name": "button-padding-horizontal",
+    "$button-padding-horizontal": {
+      "name": "$button-padding-horizontal",
      "value": "1em",
-      "css-var": "button-padding-horizontal"
+      "type": "size"
    },
-    {
-      "name": "button-focus-border-color",
-      "value": "var(--bulma-link-focus-border)",
-      "css-var": "button-focus-border-color"
+    "$button-hover-color": {
+      "name": "$button-hover-color",
+      "value": "$link-hover",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "button-focus-box-shadow-size",
+    "$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(217, 71%,  53%)"
+    },
+    "$button-focus-box-shadow-size": {
+      "name": "$button-focus-box-shadow-size",
      "value": "0 0 0 0.125em",
-      "css-var": "button-focus-box-shadow-size"
+      "type": "size"
    },
-    {
-      "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-focus-box-shadow-color": {
+      "name": "$button-focus-box-shadow-color",
+      "value": "bulmaRgba($link, 0.25)",
+      "type": "compound"
    },
-    {
-      "name": "button-active-color",
-      "value": "var(--bulma-link-active)",
-      "css-var": "button-active-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-border-color",
-      "value": "var(--bulma-link-active-border)",
-      "css-var": "button-active-border-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-text-color",
-      "value": "var(--bulma-text)",
-      "css-var": "button-text-color"
+    "$button-text-color": {
+      "name": "$button-text-color",
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
    },
-    {
-      "name": "button-text-decoration",
+    "$button-text-decoration": {
+      "name": "$button-text-decoration",
      "value": "underline",
-      "css-var": "button-text-decoration"
+      "type": "string"
    },
-    {
-      "name": "button-text-hover-background-color",
-      "value": "var(--bulma-background)",
-      "css-var": "button-text-hover-background-color"
+    "$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-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "button-text-hover-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-ghost-background",
+    "$button-disabled-background-color": {
+      "name": "$button-disabled-background-color",
+      "value": "$scheme-main",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
+    },
+    "$button-disabled-border-color": {
+      "name": "$button-disabled-border-color",
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
+    },
+    "$button-disabled-shadow": {
+      "name": "$button-disabled-shadow",
      "value": "none",
-      "css-var": "button-ghost-background"
+      "type": "string"
    },
-    {
-      "name": "button-ghost-border-color",
-      "value": "transparent",
-      "css-var": "button-ghost-border-color"
-    },
-    {
-      "name": "button-ghost-color",
-      "value": "var(--bulma-link-text)",
-      "css-var": "button-ghost-color"
-    },
-    {
-      "name": "button-ghost-decoration",
-      "value": "none",
-      "css-var": "button-ghost-decoration"
-    },
-    {
-      "name": "button-ghost-hover-color",
-      "value": "var(--bulma-link)",
-      "css-var": "button-ghost-hover-color"
-    },
-    {
-      "name": "button-ghost-hover-decoration",
-      "value": "underline",
-      "css-var": "button-ghost-hover-decoration"
-    },
-    {
-      "name": "button-disabled-background-color",
-      "value": "var(--bulma-scheme-main)",
-      "css-var": "button-disabled-background-color"
-    },
-    {
-      "name": "button-disabled-border-color",
-      "value": "var(--bulma-border)",
-      "css-var": "button-disabled-border-color"
-    },
-    {
-      "name": "button-disabled-shadow",
-      "value": "none",
-      "css-var": "button-disabled-shadow"
-    },
-    {
-      "name": "button-disabled-opacity",
+    "$button-disabled-opacity": {
+      "name": "$button-disabled-opacity",
      "value": "0.5",
-      "css-var": "button-disabled-opacity"
+      "type": "unitless"
    },
-    {
-      "name": "button-static-color",
-      "value": "var(--bulma-text-weak)",
-      "css-var": "button-static-color"
+    "$button-static-color": {
+      "name": "$button-static-color",
+      "value": "$text-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 48%)"
    },
-    {
-      "name": "button-static-background-color",
-      "value": "var(--bulma-scheme-main-ter)",
-      "css-var": "button-static-background-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-border-color",
-      "value": "var(--bulma-border)",
-      "css-var": "button-static-border-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-colors",
-      "value": "dv.$colors"
+    "$button-colors": {
+      "name": "$button-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
    }
+  },
+  "list": [
+    "$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-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"
  ],
-  "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)"
-    }
-  ]
-}
+  "file_path": "elements/button.sass"
+}
--- a/docs/_data/variables/elements/container.json
+++ b/docs/_data/variables/elements/container.json
@ -0,0 +1,21 @@
+{
+  "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,159 +1,109 @@
 {
-  "sass-vars": [
-    {
-      "name": "content-heading-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "content-heading-color"
+  "by_name": {
+    "$content-heading-color": {
+      "name": "$content-heading-color",
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "content-heading-weight",
-      "value": "var(--bulma-weight-extrabold)",
-      "css-var": "content-heading-weight"
+    "$content-heading-weight": {
+      "name": "$content-heading-weight",
+      "value": "$weight-semibold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "600"
    },
-    {
-      "name": "content-heading-line-height",
+    "$content-heading-line-height": {
+      "name": "$content-heading-line-height",
      "value": "1.125",
-      "css-var": "content-heading-line-height"
+      "type": "unitless"
    },
-    {
-      "name": "content-block-margin-bottom",
-      "value": "1em",
-      "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"
-    },
-    {
-      "name": "content-blockquote-padding",
+    "$content-blockquote-padding": {
+      "name": "$content-blockquote-padding",
      "value": "1.25em 1.5em",
-      "css-var": "content-blockquote-padding"
+      "type": "size"
    },
-    {
-      "name": "content-pre-padding",
+    "$content-pre-padding": {
+      "name": "$content-pre-padding",
      "value": "1.25em 1.5em",
-      "css-var": "content-pre-padding"
+      "type": "size"
    },
-    {
-      "name": "content-table-cell-border",
-      "value": "1px solid var(--bulma-border)",
-      "css-var": "content-table-cell-border"
+    "$content-table-cell-border": {
+      "name": "$content-table-cell-border",
+      "value": "1px solid $border",
+      "type": "size"
    },
-    {
-      "name": "content-table-cell-border-width",
+    "$content-table-cell-border-width": {
+      "name": "$content-table-cell-border-width",
      "value": "0 0 1px",
-      "css-var": "content-table-cell-border-width"
+      "type": "size"
    },
-    {
-      "name": "content-table-cell-padding",
+    "$content-table-cell-padding": {
+      "name": "$content-table-cell-padding",
      "value": "0.5em 0.75em",
-      "css-var": "content-table-cell-padding"
+      "type": "size"
    },
-    {
-      "name": "content-table-cell-heading-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "content-table-cell-heading-color"
+    "$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-head-cell-border-width",
+    "$content-table-head-cell-border-width": {
+      "name": "$content-table-head-cell-border-width",
      "value": "0 0 2px",
-      "css-var": "content-table-head-cell-border-width"
+      "type": "size"
    },
-    {
-      "name": "content-table-head-cell-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "content-table-head-cell-color"
+    "$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-body-last-row-cell-border-bottom-width",
-      "value": "0",
-      "css-var": "content-table-body-last-row-cell-border-bottom-width"
-    },
-    {
-      "name": "content-table-foot-cell-border-width",
+    "$content-table-foot-cell-border-width": {
+      "name": "$content-table-foot-cell-border-width",
      "value": "2px 0 0",
-      "css-var": "content-table-foot-cell-border-width"
+      "type": "size"
    },
-    {
-      "name": "content-table-foot-cell-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "content-table-foot-cell-color"
+    "$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%)"
    }
+  },
+  "list": [
+    "$content-heading-color",
+    "$content-heading-weight",
+    "$content-heading-line-height",
+    "$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-foot-cell-border-width",
+    "$content-table-foot-cell-color"
  ],
-  "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)"
-    }
-  ]
+  "file_path": "elements/content.sass"
 }
--- a/docs/_data/variables/elements/delete.json
+++ b/docs/_data/variables/elements/delete.json
@ -1,21 +0,0 @@
-{
-  "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
@ -0,0 +1,253 @@
+{
+  "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,51 +1,31 @@
 {
-  "sass-vars": [
-    {
-      "name": "icon-dimensions",
+  "by_name": {
+    "$icon-dimensions": {
+      "name": "$icon-dimensions",
      "value": "1.5rem",
-      "css-var": "icon-dimensions"
+      "type": "size"
    },
-    {
-      "name": "icon-dimensions-small",
+    "$icon-dimensions-small": {
+      "name": "$icon-dimensions-small",
      "value": "1rem",
-      "css-var": "icon-dimensions-small"
+      "type": "size"
    },
-    {
-      "name": "icon-dimensions-medium",
+    "$icon-dimensions-medium": {
+      "name": "$icon-dimensions-medium",
      "value": "2rem",
-      "css-var": "icon-dimensions-medium"
+      "type": "size"
    },
-    {
-      "name": "icon-dimensions-large",
+    "$icon-dimensions-large": {
+      "name": "$icon-dimensions-large",
      "value": "3rem",
-      "css-var": "icon-dimensions-large"
-    },
-    {
-      "name": "icon-text-spacing",
-      "value": "0.25em",
-      "css-var": "icon-text-spacing"
+      "type": "size"
    }
+  },
+  "list": [
+    "$icon-dimensions",
+    "$icon-dimensions-small",
+    "$icon-dimensions-medium",
+    "$icon-dimensions-large"
  ],
-  "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"
-    }
-  ]
+  "file_path": "elements/icon.sass"
 }
--- a/docs/_data/variables/elements/image.json
+++ b/docs/_data/variables/elements/image.json
@ -1,9 +1,13 @@
 {
-  "sass-vars": [
-    {
-      "name": "dimensions",
-      "value": "16 24 32 48 64 96 128"
+  "by_name": {
+    "$dimensions": {
+      "name": "$dimensions",
+      "value": "16 24 32 48 64 96 128",
+      "type": "string"
    }
+  },
+  "list": [
+    "$dimensions"
  ],
-  "css-vars": []
+  "file_path": "elements/image.sass"
 }
--- a/docs/_data/variables/elements/loader.json
+++ b/docs/_data/variables/elements/loader.json
@ -1,4 +0,0 @@
-{
-  "sass-vars": [],
-  "css-vars": []
-}
--- a/docs/_data/variables/elements/notification.json
+++ b/docs/_data/variables/elements/notification.json
@ -1,53 +1,57 @@
 {
-  "sass-vars": [
-    {
-      "name": "notification-code-background-color",
-      "value": "var(--bulma-scheme-main)",
-      "css-var": "notification-code-background-color"
+  "by_name": {
+    "$notification-background-color": {
+      "name": "$notification-background-color",
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
    },
-    {
-      "name": "notification-radius",
-      "value": "var(--bulma-radius)",
-      "css-var": "notification-radius"
+    "$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-padding",
-      "value": "1.375em 1.5em",
-      "css-var": "notification-padding"
+    "$notification-radius": {
+      "name": "$notification-radius",
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
    },
-    {
-      "name": "notification-colors",
-      "value": "dv.$colors"
+    "$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": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
    }
+  },
+  "list": [
+    "$notification-background-color",
+    "$notification-code-background-color",
+    "$notification-radius",
+    "$notification-padding",
+    "$notification-padding-ltr",
+    "$notification-padding-rtl",
+    "$notification-colors"
  ],
-  "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"
-    }
-  ]
+  "file_path": "elements/notification.sass"
 }
--- a/docs/_data/variables/elements/progress.json
+++ b/docs/_data/variables/elements/progress.json
@ -1,46 +1,45 @@
 {
-  "sass-vars": [
-    {
-      "name": "progress-bar-background-color",
-      "value": "var(--bulma-border-weak)",
-      "css-var": "progress-bar-background-color"
+  "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%)"
    },
-    {
-      "name": "progress-value-background-color",
-      "value": "var(--bulma-text)",
-      "css-var": "progress-value-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-border-radius",
-      "value": "var(--bulma-radius-rounded)",
-      "css-var": "progress-border-radius"
+    "$progress-border-radius": {
+      "name": "$progress-border-radius",
+      "value": "$radius-rounded",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "290486px"
    },
-    {
-      "name": "progress-indeterminate-duration",
+    "$progress-indeterminate-duration": {
+      "name": "$progress-indeterminate-duration",
      "value": "1.5s",
-      "css-var": "progress-indeterminate-duration"
+      "type": "string"
    },
-    {
-      "name": "progress-colors",
-      "value": "dv.$colors"
+    "$progress-colors": {
+      "name": "$progress-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
    }
+  },
+  "list": [
+    "$progress-bar-background-color",
+    "$progress-value-background-color",
+    "$progress-border-radius",
+    "$progress-indeterminate-duration",
+    "$progress-colors"
  ],
-  "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"
-    }
-  ]
+  "file_path": "elements/progress.sass"
 }
--- a/docs/_data/variables/elements/table.json
+++ b/docs/_data/variables/elements/table.json
@ -1,190 +1,143 @@
 {
-  "sass-vars": [
-    {
-      "name": "table-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "table-color"
+  "by_name": {
+    "$table-color": {
+      "name": "$table-color",
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "table-background-color",
-      "value": "var(--bulma-scheme-main)",
-      "css-var": "table-background-color"
+    "$table-background-color": {
+      "name": "$table-background-color",
+      "value": "$scheme-main",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
    },
-    {
-      "name": "table-cell-border-color",
-      "value": "var(--bulma-border)",
-      "css-var": "table-cell-border-color"
+    "$table-cell-border": {
+      "name": "$table-cell-border",
+      "value": "1px solid $border",
+      "type": "size"
    },
-    {
-      "name": "table-cell-border-style",
-      "value": "solid",
-      "css-var": "table-cell-border-style"
-    },
-    {
-      "name": "table-cell-border-width",
+    "$table-cell-border-width": {
+      "name": "$table-cell-border-width",
      "value": "0 0 1px",
-      "css-var": "table-cell-border-width"
+      "type": "size"
    },
-    {
-      "name": "table-cell-padding",
+    "$table-cell-padding": {
+      "name": "$table-cell-padding",
      "value": "0.5em 0.75em",
-      "css-var": "table-cell-padding"
+      "type": "size"
    },
-    {
-      "name": "table-cell-heading-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "table-cell-heading-color"
+    "$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-text-align",
-      "value": "left",
-      "css-var": "table-cell-text-align"
-    },
-    {
-      "name": "table-head-cell-border-width",
+    "$table-head-cell-border-width": {
+      "name": "$table-head-cell-border-width",
      "value": "0 0 2px",
-      "css-var": "table-head-cell-border-width"
+      "type": "size"
    },
-    {
-      "name": "table-head-cell-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "table-head-cell-color"
+    "$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-foot-cell-border-width",
+    "$table-foot-cell-border-width": {
+      "name": "$table-foot-cell-border-width",
      "value": "2px 0 0",
-      "css-var": "table-foot-cell-border-width"
+      "type": "size"
    },
-    {
-      "name": "table-foot-cell-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "table-foot-cell-color"
+    "$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-head-background-color",
+    "$table-head-background-color": {
+      "name": "$table-head-background-color",
      "value": "transparent",
-      "css-var": "table-head-background-color"
+      "type": "string"
    },
-    {
-      "name": "table-body-background-color",
+    "$table-body-background-color": {
+      "name": "$table-body-background-color",
      "value": "transparent",
-      "css-var": "table-body-background-color"
+      "type": "string"
    },
-    {
-      "name": "table-foot-background-color",
+    "$table-foot-background-color": {
+      "name": "$table-foot-background-color",
      "value": "transparent",
-      "css-var": "table-foot-background-color"
+      "type": "string"
    },
-    {
-      "name": "table-row-hover-background-color",
-      "value": "var(--bulma-scheme-main-bis)",
-      "css-var": "table-row-hover-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-active-background-color",
-      "value": "var(--bulma-primary)",
-      "css-var": "table-row-active-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-color",
-      "value": "var(--bulma-primary-invert)",
-      "css-var": "table-row-active-color"
+    "$table-row-active-color": {
+      "name": "$table-row-active-color",
+      "value": "$primary-invert",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "#fff"
    },
-    {
-      "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-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-hover-background-color",
-      "value": "var(--bulma-scheme-main-ter)",
-      "css-var": "table-striped-row-even-hover-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-colors",
-      "value": "dv.$colors"
+    "$table-colors": {
+      "name": "$table-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
    }
+  },
+  "list": [
+    "$table-color",
+    "$table-background-color",
+    "$table-cell-border",
+    "$table-cell-border-width",
+    "$table-cell-padding",
+    "$table-cell-heading-color",
+    "$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"
  ],
-  "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)"
-    }
-  ]
-}
+  "file_path": "elements/table.sass"
+}
--- a/docs/_data/variables/elements/tag.json
+++ b/docs/_data/variables/elements/tag.json
@ -1,56 +1,45 @@
 {
-  "sass-vars": [
-    {
-      "name": "tag-radius",
-      "value": "var(--bulma-radius)",
-      "css-var": "tag-radius"
+  "by_name": {
+    "$tag-background-color": {
+      "name": "$tag-background-color",
+      "value": "$background",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 96%)"
    },
-    {
-      "name": "tag-delete-margin",
+    "$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",
      "value": "1px",
-      "css-var": "tag-delete-margin"
+      "type": "size"
    },
-    {
-      "name": "tag-colors",
-      "value": "dv.$colors"
+    "$tag-colors": {
+      "name": "$tag-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
    }
+  },
+  "list": [
+    "$tag-background-color",
+    "$tag-color",
+    "$tag-radius",
+    "$tag-delete-margin",
+    "$tag-colors"
  ],
-  "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"
-    }
-  ]
+  "file_path": "elements/tag.sass"
 }
--- a/docs/_data/variables/elements/title.json
+++ b/docs/_data/variables/elements/title.json
@ -1,150 +1,125 @@
 {
-  "sass-vars": [
-    {
-      "name": "title-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "title-color"
+  "by_name": {
+    "$title-color": {
+      "name": "$title-color",
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "title-family",
+    "$title-family": {
+      "name": "$title-family",
      "value": "false",
-      "css-var": "title-family"
+      "type": "boolean"
    },
-    {
-      "name": "title-size",
-      "value": "var(--bulma-size-3)",
-      "css-var": "title-size"
+    "$title-size": {
+      "name": "$title-size",
+      "value": "$size-3",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "2rem"
    },
-    {
-      "name": "title-weight",
-      "value": "var(--bulma-weight-extrabold)",
-      "css-var": "title-weight"
+    "$title-weight": {
+      "name": "$title-weight",
+      "value": "$weight-semibold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "600"
    },
-    {
-      "name": "title-line-height",
+    "$title-line-height": {
+      "name": "$title-line-height",
      "value": "1.125",
-      "css-var": "title-line-height"
+      "type": "unitless"
    },
-    {
-      "name": "title-strong-color",
+    "$title-strong-color": {
+      "name": "$title-strong-color",
      "value": "inherit",
-      "css-var": "title-strong-color"
+      "type": "string"
    },
-    {
-      "name": "title-strong-weight",
+    "$title-strong-weight": {
+      "name": "$title-strong-weight",
      "value": "inherit",
-      "css-var": "title-strong-weight"
+      "type": "string"
    },
-    {
-      "name": "title-sub-size",
+    "$title-sub-size": {
+      "name": "$title-sub-size",
      "value": "0.75em",
-      "css-var": "title-sub-size"
+      "type": "size"
    },
-    {
-      "name": "title-sup-size",
+    "$title-sup-size": {
+      "name": "$title-sup-size",
      "value": "0.75em",
-      "css-var": "title-sup-size"
+      "type": "size"
    },
-    {
-      "name": "subtitle-color",
-      "value": "var(--bulma-text)",
-      "css-var": "subtitle-color"
+    "$subtitle-color": {
+      "name": "$subtitle-color",
+      "value": "$text",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 29%)"
    },
-    {
-      "name": "subtitle-family",
+    "$subtitle-family": {
+      "name": "$subtitle-family",
      "value": "false",
-      "css-var": "subtitle-family"
+      "type": "boolean"
    },
-    {
-      "name": "subtitle-size",
-      "value": "var(--bulma-size-5)",
-      "css-var": "subtitle-size"
+    "$subtitle-size": {
+      "name": "$subtitle-size",
+      "value": "$size-5",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "1.25rem"
    },
-    {
-      "name": "subtitle-weight",
-      "value": "var(--bulma-weight-normal)",
-      "css-var": "subtitle-weight"
+    "$subtitle-weight": {
+      "name": "$subtitle-weight",
+      "value": "$weight-normal",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "400"
    },
-    {
-      "name": "subtitle-line-height",
+    "$subtitle-line-height": {
+      "name": "$subtitle-line-height",
      "value": "1.25",
-      "css-var": "subtitle-line-height"
+      "type": "unitless"
    },
-    {
-      "name": "subtitle-strong-color",
-      "value": "var(--bulma-text-strong)",
-      "css-var": "subtitle-strong-color"
+    "$subtitle-strong-color": {
+      "name": "$subtitle-strong-color",
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "subtitle-strong-weight",
-      "value": "var(--bulma-weight-semibold)",
-      "css-var": "subtitle-strong-weight"
+    "$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"
    }
+  },
+  "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"
  ],
-  "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)"
-    }
-  ]
+  "file_path": "elements/title.sass"
 }
--- a/docs/_data/variables/form/checkbox-radio.json
+++ b/docs/_data/variables/form/checkbox-radio.json
@ -1,4 +0,0 @@
-{
-  "sass-vars": [],
-  "css-vars": []
-}
--- a/docs/_data/variables/form/file.json
+++ b/docs/_data/variables/form/file.json
@ -1,123 +1,87 @@
 {
-  "sass-vars": [
-    {
-      "name": "file-radius",
-      "value": "var(--bulma-radius)",
-      "css-var": "file-radius"
+  "by_name": {
+    "$file-border-color": {
+      "name": "$file-border-color",
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
    },
-    {
-      "name": "file-cta-color",
-      "value": "var(--bulma-text)"
+    "$file-radius": {
+      "name": "$file-radius",
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
    },
-    {
-      "name": "file-cta-hover-color",
-      "value": "var(--bulma-text-strong)"
+    "$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-active-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-name-border-color",
-      "value": "var(--bulma-border)",
-      "css-var": "file-name-border-color"
+    "$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-style",
+    "$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",
      "value": "solid",
-      "css-var": "file-name-border-style"
+      "type": "string"
    },
-    {
-      "name": "file-name-border-width",
+    "$file-name-border-width": {
+      "name": "$file-name-border-width",
      "value": "1px 1px 1px 0",
-      "css-var": "file-name-border-width"
+      "type": "size"
    },
-    {
-      "name": "file-name-max-width",
+    "$file-name-max-width": {
+      "name": "$file-name-max-width",
      "value": "16em",
-      "css-var": "file-name-max-width"
+      "type": "size"
+    },
+    "$file-colors": {
+      "name": "$file-colors",
+      "value": "$form-colors",
+      "type": "variable"
    }
+  },
+  "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"
  ],
-  "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},"
-    }
-  ]
-}
+  "file_path": "form/file.sass"
+}
--- a/docs/_data/variables/form/general.json
+++ b/docs/_data/variables/form/general.json
@ -1,174 +0,0 @@
-{
-  "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,42 +1,31 @@
 {
-  "sass-vars": [
-    {
-      "name": "textarea-padding",
-      "value": "var(--bulma-control-padding-horizontal)"
+  "by_name": {
+    "$textarea-padding": {
+      "name": "$textarea-padding",
+      "value": "$control-padding-horizontal",
+      "type": "variable"
    },
-    {
-      "name": "textarea-max-height",
-      "value": "40em"
+    "$textarea-max-height": {
+      "name": "$textarea-max-height",
+      "value": "40em",
+      "type": "size"
    },
-    {
-      "name": "textarea-min-height",
-      "value": "8em"
+    "$textarea-min-height": {
+      "name": "$textarea-min-height",
+      "value": "8em",
+      "type": "size"
    },
-    {
-      "name": "textarea-colors",
-      "value": "shared.$form-colors"
+    "$textarea-colors": {
+      "name": "$textarea-colors",
+      "value": "$form-colors",
+      "type": "variable"
    }
+  },
+  "list": [
+    "$textarea-padding",
+    "$textarea-max-height",
+    "$textarea-min-height",
+    "$textarea-colors"
  ],
-  "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\")},"
-    }
-  ]
+  "file_path": "form/input-textarea.sass"
 }
--- a/docs/_data/variables/form/input.json
+++ b/docs/_data/variables/form/input.json
@ -1,249 +0,0 @@
-{
-  "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,30 +1,13 @@
 {
-  "sass-vars": [
-    {
-      "name": "select-colors",
-      "value": "shared.$form-colors"
+  "by_name": {
+    "$select-colors": {
+      "name": "$select-colors",
+      "value": "$form-colors",
+      "type": "variable"
    }
+  },
+  "list": [
+    "$select-colors"
  ],
-  "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\")},"
-    }
-  ]
+  "file_path": "form/select.sass"
 }
--- a/docs/_data/variables/form/shared.json
+++ b/docs/_data/variables/form/shared.json
@ -1,253 +1,163 @@
 {
-  "sass-vars": [
-    {
-      "name": "form-colors",
-      "value": "dv.$colors"
+  "by_name": {
+    "$form-colors": {
+      "name": "$form-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
    },
-    {
-      "name": "input-h",
-      "value": "var(--bulma-scheme-h)",
-      "css-var": "input-h"
+    "$input-color": {
+      "name": "$input-color",
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "input-s",
-      "value": "var(--bulma-scheme-s)",
-      "css-var": "input-s"
+    "$input-background-color": {
+      "name": "$input-background-color",
+      "value": "$scheme-main",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 100%)"
    },
-    {
-      "name": "input-l",
-      "value": "var(--bulma-scheme-main-l)",
-      "css-var": "input-l"
+    "$input-border-color": {
+      "name": "$input-border-color",
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
    },
-    {
-      "name": "input-border-l",
-      "value": "var(--bulma-border-l)",
-      "css-var": "input-border-l"
+    "$input-height": {
+      "name": "$input-height",
+      "value": "$control-height",
+      "type": "variable"
    },
-    {
-      "name": "input-border-l-delta",
-      "value": "0%",
-      "css-var": "input-border-l-delta"
+    "$input-shadow": {
+      "name": "$input-shadow",
+      "value": "inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05)",
+      "type": "size"
    },
-    {
-      "name": "input-hover-border-l-delta",
-      "value": "var(--bulma-hover-border-l-delta)",
-      "css-var": "input-hover-border-l-delta"
+    "$input-placeholder-color": {
+      "name": "$input-placeholder-color",
+      "value": "bulmaRgba($input-color, 0.3)",
+      "type": "compound"
    },
-    {
-      "name": "input-active-border-l-delta",
-      "value": "var(--bulma-active-border-l-delta)",
-      "css-var": "input-active-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-color-l",
-      "value": "var(--bulma-text-strong-l)",
-      "css-var": "input-color-l"
+    "$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-background-l",
-      "value": "var(--bulma-scheme-main-l)",
-      "css-var": "input-background-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-delta",
-      "value": "0%",
-      "css-var": "input-background-l-delta"
+    "$input-focus-border-color": {
+      "name": "$input-focus-border-color",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "input-height",
-      "value": "var(--bulma-control-height)",
-      "css-var": "input-height"
+    "$input-focus-box-shadow-size": {
+      "name": "$input-focus-box-shadow-size",
+      "value": "0 0 0 0.125em",
+      "type": "size"
    },
-    {
-      "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-focus-box-shadow-color": {
+      "name": "$input-focus-box-shadow-color",
+      "value": "bulmaRgba($link, 0.25)",
+      "type": "compound"
    },
-    {
-      "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-color": {
+      "name": "$input-disabled-color",
+      "value": "$text-light",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 48%)"
    },
-    {
-      "name": "input-focus-h",
-      "value": "var(--bulma-focus-h)",
-      "css-var": "input-focus-h"
+    "$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-s",
-      "value": "var(--bulma-focus-s)",
-      "css-var": "input-focus-s"
+    "$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-l",
-      "value": "var(--bulma-focus-l)",
-      "css-var": "input-focus-l"
+    "$input-disabled-placeholder-color": {
+      "name": "$input-disabled-placeholder-color",
+      "value": "bulmaRgba($input-disabled-color, 0.3)",
+      "type": "compound"
    },
-    {
-      "name": "input-focus-shadow-size",
-      "value": "var(--bulma-focus-shadow-size)",
-      "css-var": "input-focus-shadow-size"
+    "$input-arrow": {
+      "name": "$input-arrow",
+      "value": "$link",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(217, 71%,  53%)"
    },
-    {
-      "name": "input-focus-shadow-alpha",
-      "value": "var(--bulma-focus-shadow-alpha)",
-      "css-var": "input-focus-shadow-alpha"
+    "$input-icon-color": {
+      "name": "$input-icon-color",
+      "value": "$border",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 86%)"
    },
-    {
-      "name": "input-disabled-color",
-      "value": "var(--bulma-text-weak)",
-      "css-var": "input-disabled-color"
+    "$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-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"
+    "$input-radius": {
+      "name": "$input-radius",
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
    }
+  },
+  "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"
  ],
-  "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)"
-    }
-  ]
+  "file_path": "form/shared.sass"
 }
--- a/docs/_data/variables/form/textarea.json
+++ b/docs/_data/variables/form/textarea.json
@ -1,41 +0,0 @@
-{
-  "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,26 +1,37 @@
 {
-  "sass-vars": [
-    {
-      "name": "label-color",
-      "value": "var(--bulma-text-strong)"
+  "by_name": {
+    "$label-color": {
+      "name": "$label-color",
+      "value": "$text-strong",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 21%)"
    },
-    {
-      "name": "label-weight",
-      "value": "var(--bulma-weight-semibold)"
+    "$label-weight": {
+      "name": "$label-weight",
+      "value": "$weight-bold",
+      "type": "variable",
+      "computed_type": "font-weight",
+      "computed_value": "700"
    },
-    {
-      "name": "help-size",
-      "value": "var(--bulma-size-small)"
+    "$help-size": {
+      "name": "$help-size",
+      "value": "$size-small",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "0.75rem"
    },
-    {
-      "name": "label-colors",
-      "value": "shared.$form-colors"
+    "$label-colors": {
+      "name": "$label-colors",
+      "value": "$form-colors",
+      "type": "variable"
    }
+  },
+  "list": [
+    "$label-color",
+    "$label-weight",
+    "$help-size",
+    "$label-colors"
  ],
-  "css-vars": [
-    {
-      "name": "block-spacing",
-      "value": "0.75rem,"
-    }
-  ]
+  "file_path": "form/tools.sass"
 }
--- a/docs/_data/variables/grid/columns.json
+++ b/docs/_data/variables/grid/columns.json
@ -1,15 +1,13 @@
 {
-  "sass-vars": [
-    {
-      "name": "column-gap",
+  "by_name": {
+    "$column-gap": {
+      "name": "$column-gap",
      "value": "0.75rem",
-      "css-var": "column-gap"
+      "type": "size"
    }
+  },
+  "list": [
+    "$column-gap"
  ],
-  "css-vars": [
-    {
-      "name": "column-gap",
-      "value": "0.75rem"
-    }
-  ]
+  "file_path": "grid/columns.sass"
 }
--- a/docs/_data/variables/grid/grid.json
+++ b/docs/_data/variables/grid/grid.json
@ -1,13 +0,0 @@
-{
-  "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
@ -0,0 +1,13 @@
+{
+  "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
@ -0,0 +1,37 @@
+{
+  "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)",
+      "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
@ -1,15 +0,0 @@
-{
-  "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,33 +1,27 @@
 {
-  "sass-vars": [
-    {
-      "name": "footer-background-color",
-      "value": "var(--bulma-scheme-main-bis)",
-      "css-var": "footer-background-color"
+  "by_name": {
+    "$footer-background-color": {
+      "name": "$footer-background-color",
+      "value": "$scheme-main-bis",
+      "type": "variable",
+      "computed_type": "color",
+      "computed_value": "hsl(0, 0%, 98%)"
    },
-    {
-      "name": "footer-color",
+    "$footer-color": {
+      "name": "$footer-color",
      "value": "false",
-      "css-var": "footer-color"
+      "type": "boolean"
    },
-    {
-      "name": "footer-padding",
+    "$footer-padding": {
+      "name": "$footer-padding",
      "value": "3rem 1.5rem 6rem",
-      "css-var": "footer-padding"
+      "type": "size"
    }
+  },
+  "list": [
+    "$footer-background-color",
+    "$footer-color",
+    "$footer-padding"
  ],
-  "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"
-    }
-  ]
+  "file_path": "layout/footer.sass"
 }
--- a/docs/_data/variables/layout/hero.json
+++ b/docs/_data/variables/layout/hero.json
@ -1,66 +1,39 @@
 {
-  "sass-vars": [
-    {
-      "name": "hero-body-padding",
+  "by_name": {
+    "$hero-body-padding": {
+      "name": "$hero-body-padding",
      "value": "3rem 1.5rem",
-      "css-var": "hero-body-padding"
+      "type": "size"
    },
-    {
-      "name": "hero-body-padding-tablet",
-      "value": "3rem 3rem",
-      "css-var": "hero-body-padding-tablet"
-    },
-    {
-      "name": "hero-body-padding-small",
+    "$hero-body-padding-small": {
+      "name": "$hero-body-padding-small",
      "value": "1.5rem",
-      "css-var": "hero-body-padding-small"
+      "type": "size"
    },
-    {
-      "name": "hero-body-padding-medium",
-      "value": "9rem 4.5rem",
-      "css-var": "hero-body-padding-medium"
+    "$hero-body-padding-medium": {
+      "name": "$hero-body-padding-medium",
+      "value": "9rem 1.5rem",
+      "type": "size"
    },
-    {
-      "name": "hero-body-padding-large",
-      "value": "18rem 6rem",
-      "css-var": "hero-body-padding-large"
+    "$hero-body-padding-large": {
+      "name": "$hero-body-padding-large",
+      "value": "18rem 1.5rem",
+      "type": "size"
    },
-    {
-      "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:"
+    "$hero-colors": {
+      "name": "$hero-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
    }
+  },
+  "list": [
+    "$hero-body-padding",
+    "$hero-body-padding-small",
+    "$hero-body-padding-medium",
+    "$hero-body-padding-large",
+    "$hero-colors"
  ],
-  "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"
-    }
-  ]
-}
+  "file_path": "layout/hero.sass"
+}
--- a/docs/_data/variables/layout/level.json
+++ b/docs/_data/variables/layout/level.json
@ -1,9 +0,0 @@
-{
-  "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
@ -1,78 +0,0 @@
-{
-  "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/Show more
+++ b/Show more
Author	SHA1	Message	Date
Jeremy Thomas	09b68d9754	Merge branch 'master' into css-variables-with-fallback	2020-10-31 20:27:07 +00:00
Jeremy Thomas	11209d3d4b	Build CSS	2020-09-18 14:34:38 +01:00
Jeremy Thomas	4ca02cfb2b	Clean up	2020-09-07 08:56:04 +01:00
Jeremy Thomas	ed23e59334	Replace bulmaDarken and bulmaLighten instances	2020-09-06 14:25:06 +01:00
Jeremy Thomas	3ee48f2236	Fix select and button rgba	2020-09-06 10:53:18 +01:00
Jeremy Thomas	238b43761f	Add CSS var map regex, Fix basic list of CSS vars	2020-09-06 10:28:48 +01:00
Jeremy Thomas	f85f5dea4e	Style more button parts	2020-09-01 20:02:57 +02:00
Jeremy Thomas	ff889b39fd	Add CSS vars to buttons	2020-08-28 13:54:53 +02:00
Jeremy Thomas	ea72271795	Restore correct colored navbar menu styling	2020-08-28 09:48:41 +02:00
Jeremy Thomas	15c7cc7db8	Fix navbar CSS vars	2020-08-28 09:34:24 +02:00
Jeremy Thomas	c5d4770067	Use CSSVar darken for navbar	2020-08-27 14:23:14 +02:00
Jeremy Thomas	85cdc54826	Add HSLA colors with Sass map fallbacks	2020-08-27 14:01:04 +02:00
Jeremy Thomas	cfa4b562b3	Merge branch 'master' into css-variables-with-fallback	2020-08-27 12:04:00 +02:00
Jeremy Thomas	9f3adb4930	Add more CSS variables with fallback	2020-08-27 09:57:33 +02:00
Jeremy Thomas	42815a783d	Add fallback values for input and control CSS variables	2020-08-24 11:46:59 +02:00
Jeremy Thomas	d79c6dbc3c	Get default assignments automatically	2020-08-24 11:41:30 +02:00
Jeremy Thomas	5b91a89ee2	Add CSS variables to form controls	2020-08-23 18:46:09 +02:00
Jeremy Thomas	4cb72c225a	Check if assigned CSS vars are actually used	2020-08-23 13:15:42 +02:00
Jeremy Thomas	64b89dbc63	Add CSS variables test	2020-08-23 13:08:53 +02:00
Jeremy Thomas	5966d31b5e	Add CSS variables to tabs	2020-08-22 11:54:08 +02:00
Jeremy Thomas	9945e9516c	Merge branch 'css-variables-with-fallback' of github.com:jgthms/bulma into css-variables-with-fallback	2020-08-22 11:35:55 +02:00
Jeremy Thomas	591915e0e1	Add CSS vars to navbar	2020-08-22 11:32:55 +02:00
Jeremy Thomas	166fcdb32c	Add functions to register and assign CSS variables	2020-08-22 11:19:21 +02:00
Jeremy Thomas	0ecc5bd35d	Add CSS variables to all elements	2020-08-22 09:02:48 +02:00
Jeremy Thomas	340f13d168	Update elements to CSS variables	2020-08-22 09:02:48 +02:00
Jeremy Thomas	f11812ab86	Fix box and navbar shadows	2020-08-22 09:02:48 +02:00
Jeremy Thomas	2fc648fb94	Fallback to rgb shadow color	2020-08-22 09:02:48 +02:00
Jeremy Thomas	eef8f5577f	Move CSS variables to message scope	2020-08-22 09:02:48 +02:00
Jeremy Thomas	0e4eda2d81	Use primary color in CSS variable for the message component	2020-08-22 09:02:48 +02:00
Jeremy Thomas	7d2dcba944	Update color functions	2020-08-22 09:02:48 +02:00
Jeremy Thomas	681fb52d2b	Update subtitle variables	2020-08-22 09:02:12 +02:00
Jeremy Thomas	b0e546a994	Init themes	2020-08-22 09:02:12 +02:00
Jeremy Thomas	87ef360d10	Add CSS variables to all elements	2020-08-16 00:52:25 +01:00
Jeremy Thomas	d750c197c8	Update elements to CSS variables	2020-08-16 00:40:51 +01:00
Jeremy Thomas	8d613846d3	Fix box and navbar shadows	2020-08-15 16:47:59 +01:00
Jeremy Thomas	8eb16e12d2	Fallback to rgb shadow color	2020-08-15 13:25:39 +01:00
Jeremy Thomas	4a6728aea2	Move CSS variables to message scope	2020-08-15 09:36:21 +01:00
Jeremy Thomas	467768f8bb	Use primary color in CSS variable for the message component	2020-08-15 08:59:45 +01:00
Jeremy Thomas	3f48d2d12d	Update color functions	2020-08-15 08:46:34 +01:00
Jeremy Thomas	7984c70c05	Update subtitle variables	2020-08-15 07:55:18 +01:00
Jeremy Thomas	ac043156e1	Init themes	2020-08-15 07:30:41 +01:00