Add zero-modes and toggle function

Author: mirisuzanne

.sassdocrc

@@ -12,6 +12,7 @@ groups:
     config: Global Settings
   'Sass (optional)':
     palettes: Color Palettes
+    tools: Additional Tools
 
 herman:
   extraDocs:

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.1.0-beta.9 - 2019/11/29
+
+- NEW: `--ccs-mode--zero` and `--ccs-mode--invert-zero`
+  provide mode values of `0` (dark) or `1` (light),
+  rather than `-1` (dark) and `1` (light)
+- NEW: `if-mode($light, $dark)` function returns a CSS `calc()` toggle
+  between two values, depending on the current (light/dark) mode
+
 ## 0.1.0-beta.8 - 2019/11/29
 
 - BREAKING: Set defaults on `background-color`

css/ccs.css

@@ -54,6 +54,9 @@ <h1><a href="https://cascading-colors.netlify.com/" rel="home">Cascading Color S
           <option value="default">
             default
           </option>
+          <option value="oddbird">
+            oddbird
+          </option>
           <option value="complement">
             complement
           </option>

css/ccs.css.map

@@ -1,6 +1,6 @@
 {
   "name": "cascading-color-systems",
-  "version": "0.1.0-beta.8",
+  "version": "0.1.0-beta.9",
   "description": "generate dynamic color palettes with custom properties",
   "main": "dist.js",
   "module": "index.js",

index.html

@@ -27,7 +27,9 @@
   // final mode calculations
   --ccs-mode--cascade: var(--ccs-mode--user, var(--ccs-mode--html, var(--ccs-mode--os, 1)));
   --ccs-mode: var(--ccs-mode--cascade, 1);
+  --ccs-mode--zero: calc((var(--ccs-mode) + 1) * 0.5);
   --ccs-mode--invert: calc(-1 * var(--ccs-mode));
+  --ccs-mode--invert-zero: calc((var(--ccs-mode--invert) + 1) * 0.5);
 
   // full contrast colors, foreground and background
   --ccs--bg-full: hsl(0, 0%, calc(100% * var(--ccs-mode)));

package.json

@@ -1,5 +1,6 @@
 // members only
 @forward 'palettes';
+@forward 'tools';
 
 // setup
 @forward 'root';

sass/partials/_colors.scss

@@ -0,0 +1,36 @@
+// If-Mode
+// -------
+/// Toggles between two number values
+/// (or CSS `var()` functions that return numbers),
+/// depending on the current light/dark mode.
+///
+/// @param {number | var()} $light -
+///   The value to use for light mode
+/// @param {number | var()} $dark -
+///   The value to use for dark mode
+/// @return {calc()} -
+///   A CSS `calc()` function that will toggle the proper values
+///   based on the value of `--ccs-mode--zero` and `--ccs-mode--invert-zero`
+/// @example scss -
+///   [data-ccs-theme='oddbird'] {
+///     --ccs-prime--config: 195;
+///     --ccs-accent--config: 330;
+///     --ccs-prime--theme: #{ccs.if-mode(
+///       $light: var(--ccs-prime--config),
+///       $dark: var(--ccs-accent--config)
+///     )};
+///     --ccs-accent--theme: #{ccs.if-mode(
+///       $light: var(--ccs-accent--config),
+///       $dark: var(--ccs-prime--config)
+///     )};
+///     --ccs-custom-hue: none;
+///   }
+/// @group tools
+@function if-mode(
+  $light,
+  $dark
+) {
+  @return calc(
+    var(--ccs-mode--zero) * #{$light} + var(--ccs-mode--invert-zero) * #{$dark}
+  );
+}