feat: cssVariables (#160)

* Implement CSS variables composable

* Add rookie tests

* Update documentation

* Fix test typo

* Update observer options

* Fix mock mistakes

* Fix copy-paste error

* Bound `get` and `set`'s elements

* Update MutationObserver options

docs/.vuepress/components/CssVariablesExample.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div>
+      <label for="foreground-value"
+        >Override the value for <code>--color-foreground</code>:</label
+      >
+      <input
+        type="text"
+        id="foreground-value"
+        @input="set('color-foreground', $event.target.value)"
+        :model="foreground"
+      />
+    </div>
+
+    <div class="text" style="color: var(--color-foreground)">
+      <span v-if="listening">
+        I am a text with the following color:
+      </span>
+      <span v-else>
+        My color will be updated but not my label:
+      </span>
+      {{ foreground }}
+    </div>
+
+    <div>
+      <button type="button" @click="stop()" :disabled="!listening">
+        Stop listening
+      </button>
+      <button type="button" @click="resume()" :disabled="listening">
+        Resume listening
+      </button>
+      <button
+        type="button"
+        @click="foreground = get('color-foreground')"
+        :disabled="listening"
+      >
+        Manual label update
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useCssVariables } from "../../../packages/web/dist/web.cjs.js";
+import { ref } from "@vue/composition-api";
+
+export default {
+  name: "css-variables-example",
+  setup() {
+    const { stop, resume, get, set, listening, foreground } = useCssVariables({
+      foreground: "color-foreground"
+    });
+
+    set("color-foreground", "red");
+
+    return {
+      listening,
+      stop,
+      resume,
+      get,
+      set,
+      listening,
+      foreground,
+      document
+    };
+  }
+};
+</script>
+
+<style scoped>
+div > div {
+  margin-top: 15px;
+}
+
+.text {
+  margin: 15px 0;
+}
+</style>

docs/.vuepress/config.js

@@ -166,7 +166,8 @@ module.exports = {
             ["composable/web/pageVisibility", "PageVisibilityAPI"],
             ["composable/web/language", "Language"],
             ["composable/web/broadcastChannel", "BroadcastChannel API"],
-            ["composable/web/geolocation", "Geolocation API"]
+            ["composable/web/geolocation", "Geolocation API"],
+            ["composable/web/cssVariables", "CSS variables"]
           ]
         },
         {

docs/README.md

@@ -102,6 +102,7 @@ Check out the [examples folder](examples) or start hacking on [codesandbox](http
 - [Language](composable/web/language) - reactive `NavigatorLanguage`
 - [BroadcastChannel](composable/web/broadcastChannel) - reactive `BroadcastChannel API`
 - [Geolocation](composable/web/geolocation) - reactive `Geolocation API`
+- [CSS variables](composable/web/cssVariables) - reactive `CSS variables`
 
 ### Validation