initial commitHEADprimary

1 files changed, 105 insertions, 0 deletions

diff --git a/documentation/REDUCED.md b/documentation/REDUCED.md
new file mode 100644
index 0000000..b158161
--- /dev/null
+++ b/documentation/REDUCED.md
@@ -0,0 +1,105 @@
+# Reduced Palette
+
+Sometimes, an abundance of color options is a hindrance. Analysis paralysis, amirite? To this end [`color.css`](../definitions/style/color.css) reduces the number of stops in the expanded palette to three, save for yin (it only has two) and yang (it only has one).
+
+If you want more granularity (read: opacity), you can call the raw version of the color (append `-raw` to the variable name) which will return the OKLCH values so you can do something like this: `oklch(var(--uchu-light-gray-raw) / 40%)`.
+
+
+
+## Gray
+
+![](./image/reduced/gray.png)
+
+- `var(--uchu-light-gray)`
+- `var(--uchu-gray)`
+- `var(--uchu-dark-gray)`
+
+
+
+## Red
+
+![](./image/reduced/red.png)
+
+- `var(--uchu-light-red)`
+- `var(--uchu-red)`
+- `var(--uchu-dark-red)`
+
+
+
+## Pink
+
+![](./image/reduced/pink.png)
+
+- `var(--uchu-light-pink)`
+- `var(--uchu-pink)`
+- `var(--uchu-dark-pink)`
+
+
+
+## Purple
+
+![](./image/reduced/purple.png)
+
+- `var(--uchu-light-purple)`
+- `var(--uchu-purple)`
+- `var(--uchu-dark-purple)`
+
+
+
+## Blue
+
+![](./image/reduced/blue.png)
+
+- `var(--uchu-light-blue)`
+- `var(--uchu-blue)`
+- `var(--uchu-dark-blue)`
+
+
+
+## Green
+
+![](./image/reduced/green.png)
+
+- `var(--uchu-light-green)`
+- `var(--uchu-green)`
+- `var(--uchu-dark-green)`
+
+
+
+## Yellow
+
+![](./image/reduced/yellow.png)
+
+- `var(--uchu-light-yellow)`
+- `var(--uchu-yellow)`
+- `var(--uchu-dark-yellow)`
+
+
+
+## Orange
+
+![](./image/reduced/orange.png)
+
+- `var(--uchu-light-orange)`
+- `var(--uchu-orange)`
+- `var(--uchu-dark-orange)`
+
+
+
+## General
+
+![](./image/reduced/general.png)
+
+- `var(--uchu-light-yin)`
+- `var(--uchu-yin)`
+- `var(--uchu-yang)`
+
+
+
+## Sass
+
+If you know what Sass is, you'll know how to use [`color.scss`](../definitions/style/color.scss). I didn't provide raw versions of them because Sass comes with so many color tools (and, I've been using regular CSS variables in my Sass _anyways_).
+
+## JS
+
+If you are a fan of CSS-in-JS or need to programmatically grab color values, there's [`color.json`](../definitions/script/color.json) and [`color.ts`](../definitions/script/color.ts) includes available.