initial commitHEADprimary

1 files changed, 161 insertions, 0 deletions

diff --git a/documentation/EXPANDED.md b/documentation/EXPANDED.md
new file mode 100644
index 0000000..27dd1c9
--- /dev/null
+++ b/documentation/EXPANDED.md
@@ -0,0 +1,161 @@
+# Expanded Palette
+
+The default color palette is [`color_expanded.css`](../definitions/style/color_expanded.css) and consists of ten colors, eight of which have nine stops; gray, red, pink, purple, blue, green, yellow, orange. Yin (black) has ten stops while yang (white) only has one stop.
+
+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-gray-1-raw) / 40%)`.
+
+
+
+## Gray
+
+![](./image/expanded/gray.png)
+
+- `var(--uchu-gray-1)`
+- `var(--uchu-gray-2)`
+- `var(--uchu-gray-3)`
+- `var(--uchu-gray-4)`
+- `var(--uchu-gray-5)`
+- `var(--uchu-gray-6)`
+- `var(--uchu-gray-7)`
+- `var(--uchu-gray-8)`
+- `var(--uchu-gray-9)`
+
+
+
+## Red
+
+![](./image/expanded/red.png)
+
+- `var(--uchu-red-1)`
+- `var(--uchu-red-2)`
+- `var(--uchu-red-3)`
+- `var(--uchu-red-4)`
+- `var(--uchu-red-5)`
+- `var(--uchu-red-6)`
+- `var(--uchu-red-7)`
+- `var(--uchu-red-8)`
+- `var(--uchu-red-9)`
+
+
+
+## Pink
+
+![](./image/expanded/pink.png)
+
+- `var(--uchu-pink-1)`
+- `var(--uchu-pink-2)`
+- `var(--uchu-pink-3)`
+- `var(--uchu-pink-4)`
+- `var(--uchu-pink-5)`
+- `var(--uchu-pink-6)`
+- `var(--uchu-pink-7)`
+- `var(--uchu-pink-8)`
+- `var(--uchu-pink-9)`
+
+
+
+## Purple
+
+![](./image/expanded/purple.png)
+
+- `var(--uchu-purple-1)`
+- `var(--uchu-purple-2)`
+- `var(--uchu-purple-3)`
+- `var(--uchu-purple-4)`
+- `var(--uchu-purple-5)`
+- `var(--uchu-purple-6)`
+- `var(--uchu-purple-7)`
+- `var(--uchu-purple-8)`
+- `var(--uchu-purple-9)`
+
+
+
+## Blue
+
+![](./image/expanded/blue.png)
+
+- `var(--uchu-blue-1)`
+- `var(--uchu-blue-2)`
+- `var(--uchu-blue-3)`
+- `var(--uchu-blue-4)`
+- `var(--uchu-blue-5)`
+- `var(--uchu-blue-6)`
+- `var(--uchu-blue-7)`
+- `var(--uchu-blue-8)`
+- `var(--uchu-blue-9)`
+
+
+
+## Green
+
+![](./image/expanded/green.png)
+
+- `var(--uchu-green-1)`
+- `var(--uchu-green-2)`
+- `var(--uchu-green-3)`
+- `var(--uchu-green-4)`
+- `var(--uchu-green-5)`
+- `var(--uchu-green-6)`
+- `var(--uchu-green-7)`
+- `var(--uchu-green-8)`
+- `var(--uchu-green-9)`
+
+
+
+## Yellow
+
+![](./image/expanded/yellow.png)
+
+- `var(--uchu-yellow-1)`
+- `var(--uchu-yellow-2)`
+- `var(--uchu-yellow-3)`
+- `var(--uchu-yellow-4)`
+- `var(--uchu-yellow-5)`
+- `var(--uchu-yellow-6)`
+- `var(--uchu-yellow-7)`
+- `var(--uchu-yellow-8)`
+- `var(--uchu-yellow-9)`
+
+
+
+## Orange
+
+![](./image/expanded/orange.png)
+
+- `var(--uchu-orange-1)`
+- `var(--uchu-orange-2)`
+- `var(--uchu-orange-3)`
+- `var(--uchu-orange-4)`
+- `var(--uchu-orange-5)`
+- `var(--uchu-orange-6)`
+- `var(--uchu-orange-7)`
+- `var(--uchu-orange-8)`
+- `var(--uchu-orange-9)`
+
+
+
+## General
+
+![](./image/expanded/general.png)
+
+- `var(--uchu-yin-1)`
+- `var(--uchu-yin-2)`
+- `var(--uchu-yin-3)`
+- `var(--uchu-yin-4)`
+- `var(--uchu-yin-5)`
+- `var(--uchu-yin-6)`
+- `var(--uchu-yin-7)`
+- `var(--uchu-yin-8)`
+- `var(--uchu-yin-9)`
+- `var(--uchu-yin)`
+- `var(--uchu-yang)`
+
+
+
+## Sass
+
+If you know what Sass is, you'll know how to use [`color_expanded.scss`](../definitions/style/color_expanded.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_expanded.json) and [`color.ts`](../definitions/script/color_expanded.ts) includes available.