📦 New option to toggle output of function

.npmignore

@@ -1,2 +1,3 @@
 .github
+.vscode
 *.css

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+ "workbench.colorCustomizations": {
+ // "activityBar.background" : "#507791",
+ // "activityBar.foreground" : "#f9f9f9",
+ "titleBar.activeBackground" : "#4f758e",
+ "titleBar.activeForeground" : "#f9f9f9",
+ "titleBar.inactiveBackground" : "#44657A",
+ "titleBar.inactiveForeground" : "#f9f9f9",
+ "statusBar.background" : "#4f758e",
+ "statusBar.foreground" : "#f9f9f9"
+ }
+}

.vscode/snippets.code-snippets

@@ -0,0 +1,10 @@
+{
+ "CSS Variable Fallback": {
+ "description": "De-abstracts variables from their colloquial names into their programmatic goodness and provides a fallback to the CSS Variables.",
+ "scope": "scss",
+ "prefix": "v",
+ "body": [
+ "@include v($1, $2);"
+ ]
+ }
+}

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@chrisburnell/bowhead",
- "version": "0.1.8",
+ "version": "0.1.9",
  "description": "Memorable and maintainable design tokens in SCSS",
  "main": "bowhead.scss",
  "scripts": {
@@ -21,6 +21,7 @@
  "url": "https://github.com/chrisburnell/bowhead/issues"
  },
  "keywords": [
+ "design tokens",
  "scss"
  ]
 }

src/_config.scss

@@ -1,3 +1,7 @@
+// Decides whether or not use the CSS Variable or raw value when calling the
+// @v function.
+$bowhead-variable-as-default: true !default;
+
 // Decides whether or not to show a fallback value for the CSS Variable.
 $bowhead-show-fallback: true !default;
 

src/_functions.scss

@@ -19,7 +19,7 @@
 ///
 /// @return Associated CSS Variable or SCSS value
 ///
-@function v($property, $value: default, $fallback: false) {
+@function v($property, $value: default, $fallback: not $bowhead-variable-as-default) {
  $generic-values: auto, inherit, initial, none, revert, unset, 0, 1, 100%, currentColor;
  @if (index($generic-values, $value)) {
  @return $value;

src/_mixins.scss

@@ -23,5 +23,5 @@
  @if $show-fallback {
  #{$property}: v($property, $value, true);
  }
- #{$property}: v($property, $value);
+ #{$property}: v($property, $value, false);
 }