feat: add ns-c-mixin

lets you bind a theme to arbitrary elements

Author: gureckis

docs/colors.md

@@ -89,19 +89,27 @@ which contains values for these options which might go well together in a monoch
 
 To apply the theme to a element you simply add the `neversink-{name}-scheme` class to the element and then add another class which binds the CSS vars as you like.
 
+There is one built-in one called `.ns-c-mixin` which applies the color to the background, text, and border of the element. It's definition looks like this:
+
+```css
+.ns-c-mixin {
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+  border-color: var(--neversink-border-color);
+}
+```
+
 For example, to apply the `red` scheme from above to a `div` element you would add the following classes:
 
 ```html
-<div class="neversink-red-scheme colorbinding">This is a red div</div>
+<div class="neversink-red-scheme ns-c-mixin">This is a red div</div>
 ```
 
-and then define the color binding class
+You can also define you own custom binding classes if you want to map the colors from the theme in a different way. For example, you could define a class like this:
 
 ```css
-.colorbinding {
-  background-color: var(--neversink-bg-color);
-  color: var(--neversink-text-color);
-  border-color: var(--neversink-border-color);
+.mymixin {
+  background-color: var(--neversink-text-color);
 }
 ```
 

docs/styling.md

@@ -20,7 +20,30 @@ In addition to the main color [schemes](/colors) there are some additional short
 | `ns-c-COLOR-scheme`    | `neversink-COLOR-scheme`       |
 | `ns-c-COLOR-lt-scheme` | `neversink-COLOR-light-scheme` |
 
-where color can be any of the [colors](/colors) in the project.
+where color is the **first two letters** of the [colors](/colors) in the project (e.g., `ns-c-pi-scheme` for `neversink-pink-scheme`).
+
+## Color mixin
+
+When you want to apply a theme color to an element on a page you can use the
+`ns-c-mixin` class. This will apply the color to the text and the background.
+
+It has a definition like this:
+
+```css
+.ns-c-mixin {
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+  border-color: var(--neversink-border-color);
+}
+```
+
+so to bind the color to a `div` element you can do this:
+
+```md
+<div class="ns-c-mixin ns-c-sk-scheme">
+  This is a with the `ns-c-sk-scheme` (i.e., `neversink-sky-scheme`) color applied.
+</div>
+```
 
 ## Tight bullets
 

styles/neversink-c.css

@@ -153,3 +153,9 @@
   opacity: 0.3;
   pointer-events: none;
 }
+
+.ns-c-mixin {
+  background-color: var(--neversink-bg-color);
+  color: var(--neversink-text-color);
+  border-color: var(--neversink-border-color);
+}