From fecefd0127558226aadd4368f549c9b1835d4df6 Mon Sep 17 00:00:00 2001
From: Chris Burnell <me@chrisburnell.com>
Date: Tue, 25 Aug 2020 21:51:37 +0100
Subject: [PATCH] more description about how to use Bowhead!

---
 README.md    | 25 ++++++++++++++++++++-----
 package.json |  2 +-
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index d5b982b..8d75b88 100644
--- a/README.md
+++ b/README.md
@@ -139,9 +139,9 @@ $bowhead-tokens: (
 
 --------
 
-Then you’ll have to include **Bowhead** in your SCSS somehow. You could use Webpack or if you’re using *npm* something like below should suffice.
+Then you’ll have to include **Bowhead** in your SCSS somehow. You could use *Webpack* or something like that, or if you’re using *npm*, the below code snippet should suffice.
 
-Take note that you need to define any of your **Bowhead** variables (`$bowhead-tokens`, `$bowhead-show-fallback`, `$bowhead-generate`(, `$bowhead-property-map`)) before importing!
+Take note that you need to define any of your **Bowhead** variables (`$bowhead-tokens`, `$bowhead-show-fallback`, `$bowhead-generate`(, `$bowhead-property-map`)) before importing **Bowhead** into your SCSS!
 
 ```scss
 $bowhead-tokens: (
@@ -156,22 +156,29 @@ $bowhead-property-map: (
 @import "node_modules/@chrisburnell/bowhead/bowhead";
 ```
 
-Finally, you can use either the `@v` function or `@v` mixin (or both) however is most comfortable to you:
+Finally, you can use either **Bowhead's** `@v` function, `@v` mixin, both, or just the CSS Variables it can spit out. However you use it is totally up to you! :)
 
 ```scss
-body {
+.thing {
     @include v(background-color, desert);
     @include v(color, brick);
     border: v(measure, small) solid v(color, plankton);
     padding: v(measure, medium) v(measure, large);
     @include v(z-index, above);
+    opacity: var(--opacity-alpha);
+    // 1. if you just want the raw value, this is not really recommended:
+    text-decoration-color: map-get(map-get($bowhead-tokens, "color"), "brick");
+    // 2. this does the same for you:
+    text-decoration-color: v(color, brick, true);
+    // 3. so does this, although it includes the CSS Variable too:
+    @include v(text-decoration-color, brick, true);
 }
 ```
 
 will generate…
 
 ```css
-body {
+.thing {
     background-color: #d2b48c;
     background-color: var(--color-desert);
     color: #b22222;
@@ -180,6 +187,14 @@ body {
     padding: var(--measure-medium) var(--measure-large);
     z-index: 2;
     z-index: var(--z-index-above);
+    opacity: var(--opacity-alpha);
+    /* 1 */
+    text-decoration-color: #b22222;
+    /* 2 */
+    text-decoration-color: #b22222;
+    /* 3 */
+    text-decoration-color: #b22222;
+    text-decoration-color: var(--color-brick);
 }
 ```
 
diff --git a/package.json b/package.json
index 4ea9353..0c7e439 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chrisburnell/bowhead",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Memorable and maintainable design tokens in SCSS",
   "main": "bowhead.scss",
   "scripts": {