diff options
Diffstat (limited to 'documentation')
24 files changed, 441 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 + + + +- `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 + + + +- `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 + + + +- `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 + + + +- `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 + + + +- `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 + + + +- `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 + + + +- `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 + + + +- `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 + + + +- `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. diff --git a/documentation/FAQ.md b/documentation/FAQ.md new file mode 100644 index 0000000..8650c82 --- /dev/null +++ b/documentation/FAQ.md @@ -0,0 +1,93 @@ +# FAQ + +These questions are sourced from the sentiment and actual statements from people on the [Hacker News thread](https://news.ycombinator.com/item?id=43072338). + + + +## Origin + +> Where did these colors come from? + +High-level: looked at the Wikipedia page for Crayola colors, selected my favorites, put a filter over them in Affinity Designer, made more edits (have to research my notes to figure out details), and eventually landed at these color stops. + +It took a long time to settle on yellow/orange because I've never been able to get a good yellow I was happy with, specifically. + + + +## Normal colors + +> Where's the HEX codes? + +The point of this palette is to move away from HEX codes. If you need/want them in your own projects, feel free to fork. + + + +## Dark Mode + +> This site doesn't respect my dark mode preference so I left! + +It's not about "respect," I never implemented a dark mode. + +> A well thought out palette would have all the things + +👍🏾 + + + +## The name + +> Why the name uchū? + +"uchū" means "universe" in Japanese. I use this theme for all of my projects so...universal. + +I can't speak to anything else but personally, I love Japan style/aesthetic/whatever so I'm gonna use a word if it fits. + +> As a non-Japanese person, **I** think that **YOU** shouldn't just pick Japanese words for your project + +...okay + +> ACKHTUALLY it doesn't mean "universe," it's closer to "space" + +My apologies for not being fluent in the Japanese language. + +I didn't look deeper than [WordHippo](https://www.wordhippo.com/what-is/the/japanese-word-for-244fb75b19415c9ee4f143b34b4b241236fb63f5.html) for translation. + +> Typical American, taking things that don't belong to you. Get bent. + +(I never responded to this and this person deleted their comments twice to get even nastier) + + + +## Virality + +> Why is a page full of color codes on the front page? + +Beats me, I just wanted to share something cool I made. + +> These colors aren't even good + +...okay? + +> If you present something to Hacker News, it better be professional and this is subpar. I don't even know what uchū means. + +My bad? + + + +## The tagline + +> This title is clickbait! It annoys me!! + +I don't understand... + +> You don't know how words work!! + +You got it man. + +> You have failed to show the relationship between "the internet" and "love." In what sense is this theme for internet lovers?! + +😳 + +> EXPLAIN TO ME HOW THIS THEME IS FOR SELF-PROFESSED INTERNET LOVERS + +It's not that deep bro 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 + + + +- `var(--uchu-light-gray)` +- `var(--uchu-gray)` +- `var(--uchu-dark-gray)` + + + +## Red + + + +- `var(--uchu-light-red)` +- `var(--uchu-red)` +- `var(--uchu-dark-red)` + + + +## Pink + + + +- `var(--uchu-light-pink)` +- `var(--uchu-pink)` +- `var(--uchu-dark-pink)` + + + +## Purple + + + +- `var(--uchu-light-purple)` +- `var(--uchu-purple)` +- `var(--uchu-dark-purple)` + + + +## Blue + + + +- `var(--uchu-light-blue)` +- `var(--uchu-blue)` +- `var(--uchu-dark-blue)` + + + +## Green + + + +- `var(--uchu-light-green)` +- `var(--uchu-green)` +- `var(--uchu-dark-green)` + + + +## Yellow + + + +- `var(--uchu-light-yellow)` +- `var(--uchu-yellow)` +- `var(--uchu-dark-yellow)` + + + +## Orange + + + +- `var(--uchu-light-orange)` +- `var(--uchu-orange)` +- `var(--uchu-dark-orange)` + + + +## General + + + +- `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. diff --git a/documentation/SHOWCASE.md b/documentation/SHOWCASE.md new file mode 100644 index 0000000..33e8f52 --- /dev/null +++ b/documentation/SHOWCASE.md @@ -0,0 +1,11 @@ +# Showcase + +If you use uchū for your projects/websites/whatever, file a PR or let me know via [Mastodon](https://social.coop/@netopwibby)/[Blueksy](https://bsky.app/profile/webb.page)! + + + +## Websites + +- https://webb.page +- https://blog.webb.page +- https://inc.sh diff --git a/documentation/UNLICENSE.md b/documentation/UNLICENSE.md new file mode 100644 index 0000000..1266592 --- /dev/null +++ b/documentation/UNLICENSE.md @@ -0,0 +1,7 @@ +# Why UNLICENSE? + +LOL, imagine "owning" color. LMAO! + +Did I spend a few weeks working on this? Yes. Did I spend a year living with this? Also yes. + +Did I want to keep copy/pasting these variables into my many projects for the foreseeable future, or wrangling with how to import things from private repos? Absolutely not. Wack. diff --git a/documentation/USAGE.md b/documentation/USAGE.md new file mode 100644 index 0000000..380ce4e --- /dev/null +++ b/documentation/USAGE.md @@ -0,0 +1,64 @@ +# Usage + +I love Deno. URL imports are cool. Anyhoo, you can do the same with uchū: + +- `https://uchu.style/color.css` +- `https://uchu.style/color_expanded.css` + + + +## Pure + +If you're coding a website by hand, you probably want to use the reduced palette. Or not, whatever. + +```html +<!DOCTYPE html> +<html lang="your language code"> + <head> + <meta charset="utf-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <link href="https://uchu.style/color.css" rel="stylesheet"/> + + <style> + body { + background-color: var(--uchu-yang); + color: var(--uchu-yin); + } + </style> + </head> + + <body> + <section> + <p>My background is slightly off-white and my text color is a nuanced black.</p> + </section> + </body> +</html> +``` + + + +## Svelte/SvelteKit + +If you're coding a web app, you probably want to use the expanded palette. Or not, whatever. + +```svelte +<script lang="ts"> + // this example is using Svelte but probably applies to others as well +</script> + +<style lang="scss"> + @import url("https://uchu.style/color_expanded.css"); + + section { + background-color: var(--uchu-yang); + + p { + color: var(--uchu-yin-9); + } + } +</style> + +<section> + <p>My background is slightly off-white and my text color is a nuanced black.</p> +</section> +``` diff --git a/documentation/image/expanded/blue.png b/documentation/image/expanded/blue.png Binary files differnew file mode 100644 index 0000000..ddb5c3f --- /dev/null +++ b/documentation/image/expanded/blue.png diff --git a/documentation/image/expanded/general.png b/documentation/image/expanded/general.png Binary files differnew file mode 100644 index 0000000..a8b9854 --- /dev/null +++ b/documentation/image/expanded/general.png diff --git a/documentation/image/expanded/gray.png b/documentation/image/expanded/gray.png Binary files differnew file mode 100644 index 0000000..c79f405 --- /dev/null +++ b/documentation/image/expanded/gray.png diff --git a/documentation/image/expanded/green.png b/documentation/image/expanded/green.png Binary files differnew file mode 100644 index 0000000..3ea6088 --- /dev/null +++ b/documentation/image/expanded/green.png diff --git a/documentation/image/expanded/orange.png b/documentation/image/expanded/orange.png Binary files differnew file mode 100644 index 0000000..7fa899f --- /dev/null +++ b/documentation/image/expanded/orange.png diff --git a/documentation/image/expanded/pink.png b/documentation/image/expanded/pink.png Binary files differnew file mode 100644 index 0000000..9d8aa6e --- /dev/null +++ b/documentation/image/expanded/pink.png diff --git a/documentation/image/expanded/purple.png b/documentation/image/expanded/purple.png Binary files differnew file mode 100644 index 0000000..8572a5a --- /dev/null +++ b/documentation/image/expanded/purple.png diff --git a/documentation/image/expanded/red.png b/documentation/image/expanded/red.png Binary files differnew file mode 100644 index 0000000..588c12a --- /dev/null +++ b/documentation/image/expanded/red.png diff --git a/documentation/image/expanded/yellow.png b/documentation/image/expanded/yellow.png Binary files differnew file mode 100644 index 0000000..c833eba --- /dev/null +++ b/documentation/image/expanded/yellow.png diff --git a/documentation/image/reduced/blue.png b/documentation/image/reduced/blue.png Binary files differnew file mode 100644 index 0000000..70388e6 --- /dev/null +++ b/documentation/image/reduced/blue.png diff --git a/documentation/image/reduced/general.png b/documentation/image/reduced/general.png Binary files differnew file mode 100644 index 0000000..c7b645d --- /dev/null +++ b/documentation/image/reduced/general.png diff --git a/documentation/image/reduced/gray.png b/documentation/image/reduced/gray.png Binary files differnew file mode 100644 index 0000000..16b11ab --- /dev/null +++ b/documentation/image/reduced/gray.png diff --git a/documentation/image/reduced/green.png b/documentation/image/reduced/green.png Binary files differnew file mode 100644 index 0000000..17aa5d6 --- /dev/null +++ b/documentation/image/reduced/green.png diff --git a/documentation/image/reduced/orange.png b/documentation/image/reduced/orange.png Binary files differnew file mode 100644 index 0000000..6b4b5c2 --- /dev/null +++ b/documentation/image/reduced/orange.png diff --git a/documentation/image/reduced/pink.png b/documentation/image/reduced/pink.png Binary files differnew file mode 100644 index 0000000..538c120 --- /dev/null +++ b/documentation/image/reduced/pink.png diff --git a/documentation/image/reduced/purple.png b/documentation/image/reduced/purple.png Binary files differnew file mode 100644 index 0000000..f196678 --- /dev/null +++ b/documentation/image/reduced/purple.png diff --git a/documentation/image/reduced/red.png b/documentation/image/reduced/red.png Binary files differnew file mode 100644 index 0000000..d3c79e5 --- /dev/null +++ b/documentation/image/reduced/red.png diff --git a/documentation/image/reduced/yellow.png b/documentation/image/reduced/yellow.png Binary files differnew file mode 100644 index 0000000..8e21e33 --- /dev/null +++ b/documentation/image/reduced/yellow.png |
