diff options
44 files changed, 3518 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..11c8d63 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +# Files +.DS_Store +Thumbs.db diff --git a/README.md b/README.md new file mode 100644 index 0000000..294fe59 --- /dev/null +++ b/README.md @@ -0,0 +1,47 @@ +# Overview + + + +**uchū is the color palette for internet lovers, by [NetOperator Wibby](https://webb.page).** uchū utilizes the OKLCH color space [for reasons](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl). I've been using this color palette for personal projects for about a year and have been quite pleased with it. + +No, [I will not add other color spaces](./documentation/FAQ.md#normal-colors). + + + +## Table of Contents + +- [Expanded Palette](./documentation/EXPANDED.md) + - [Gray](./documentation/EXPANDED.md#gray) + - [Red](./documentation/EXPANDED.md#red) + - [Pink](./documentation/EXPANDED.md#pink) + - [Purple](./documentation/EXPANDED.md#purple) + - [Blue](./documentation/EXPANDED.md#blue) + - [Green](./documentation/EXPANDED.md#green) + - [Yellow](./documentation/EXPANDED.md#yellow) + - [Orange](./documentation/EXPANDED.md#orange) + - [General](./documentation/EXPANDED.md#general) + - [Sass](./documentation/EXPANDED.md#sass) +- [Reduced Palette](./documentation/REDUCED.md) + - [Gray](./documentation/REDUCED.md#gray) + - [Red](./documentation/REDUCED.md#red) + - [Pink](./documentation/REDUCED.md#pink) + - [Purple](./documentation/REDUCED.md#purple) + - [Blue](./documentation/REDUCED.md#blue) + - [Green](./documentation/REDUCED.md#green) + - [Yellow](./documentation/REDUCED.md#yellow) + - [Orange](./documentation/REDUCED.md#orange) + - [General](./documentation/REDUCED.md#general) + - [Sass](./documentation/REDUCED.md#sass) +- [Usage](./documentation/USAGE.md) + - [Pure](./documentation/USAGE.md#pure) + - [Svelte/SvelteKit](./documentation/USAGE.md#svelte-sveltekit) +- [Showcase](./documentation/SHOWCASE.md) + - [Website](./documentation/SHOWCASE.md#websites) +- [FAQ](./documentation/FAQ.md) + - [Origin](./documentation/FAQ.md#origin) + - [Normal colors](./documentation/FAQ.md#normal-colors) + - [Dark Mode](./documentation/FAQ.md#dark-mode) + - [The name](./documentation/FAQ.md#the-name) + - [Virality](./documentation/FAQ.md#virality) + - [The tagline](./documentation/FAQ.md#the-tagline) +- [Why UNLICENSE?](./documentation/UNLICENSE.md) diff --git a/UNLICENSE b/UNLICENSE new file mode 100644 index 0000000..2894708 --- /dev/null +++ b/UNLICENSE @@ -0,0 +1,21 @@ +This is free and unencumbered software released into the public domain. + +Anyone is free to copy, modify, publish, use, compile, sell, or distribute +this software, either in source code form or as a compiled binary, for any +purpose, commercial or non-commercial, and by any means. + +In jurisdictions that recognize copyright laws, the author or authors of this +software dedicate any and all copyright interest in the software to the public +domain. We make this dedication for the benefit of the public at large and to +the detriment of our heirs and successors. We intend this dedication to be an +overt act of relinquishment in perpetuity of all present and future rights to +this software under copyright law. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN +ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +For more information, please refer to <https://unlicense.org> diff --git a/definitions/script/color.json b/definitions/script/color.json new file mode 100644 index 0000000..3d724b7 --- /dev/null +++ b/definitions/script/color.json @@ -0,0 +1,49 @@ +{ + "blue": { + "base": "oklch(62.39% 0.181 258.33)", + "dark": "oklch(43.48% 0.17 260.2)", + "light": "oklch(89.66% 0.046 260.67)" + }, + "general": { + "yang": "oklch(99.4% 0 0)", + "yin": "oklch(14.38% 0.007 256.88)" + }, + "gray": { + "base": "oklch(84.68% 0.002 197.12)", + "dark": "oklch(63.12% 0.004 219.55)", + "light": "oklch(95.57% 0.003 286.35)" + }, + "green": { + "base": "oklch(79.33% 0.179 145.62)", + "dark": "oklch(58.83% 0.158 145.05)", + "light": "oklch(93.96% 0.05 148.74)" + }, + "pink": { + "base": "oklch(85.43% 0.09 354.1)", + "dark": "oklch(64.11% 0.084 353.91)", + "light": "oklch(95.8% 0.023 354.27)" + }, + "purple": { + "base": "oklch(58.47% 0.181 302.06)", + "dark": "oklch(39.46% 0.164 298.29)", + "light": "oklch(89.1% 0.046 305.24)" + }, + "orange": { + "base": "oklch(78.75% 0.14163582809066333 54.32911089172009)", + "dark": "oklch(58.28% 0.128 52.2)", + "light": "oklch(93.83% 0.037 56.93)" + }, + "red": { + "base": "oklch(62.73% 0.209 12.37)", + "dark": "oklch(45.8% 0.177 17.7)", + "light": "oklch(88.98% 0.052 3.28)" + }, + "yellow": { + "base": "oklch(90.92% 0.125 92.56)", + "dark": "oklch(69.14% 0.109 91.04)", + "light": "oklch(97.05% 0.039 91.2)" + }, + "yin": { + "light": "oklch(91.87% 0.003 264.54)" + } +} diff --git a/definitions/script/color.ts b/definitions/script/color.ts new file mode 100644 index 0000000..940eabc --- /dev/null +++ b/definitions/script/color.ts @@ -0,0 +1,49 @@ +export default { + blue: { + base: "oklch(62.39% 0.181 258.33)", + dark: "oklch(43.48% 0.17 260.2)", + light: "oklch(89.66% 0.046 260.67)" + }, + general: { + yang: "oklch(99.4% 0 0)", + yin: "oklch(14.38% 0.007 256.88)" + }, + gray: { + base: "oklch(84.68% 0.002 197.12)", + dark: "oklch(63.12% 0.004 219.55)", + light: "oklch(95.57% 0.003 286.35)" + }, + green: { + base: "oklch(79.33% 0.179 145.62)", + dark: "oklch(58.83% 0.158 145.05)", + light: "oklch(93.96% 0.05 148.74)" + }, + pink: { + base: "oklch(85.43% 0.09 354.1)", + dark: "oklch(64.11% 0.084 353.91)", + light: "oklch(95.8% 0.023 354.27)" + }, + purple: { + base: "oklch(58.47% 0.181 302.06)", + dark: "oklch(39.46% 0.164 298.29)", + light: "oklch(89.1% 0.046 305.24)" + }, + orange: { + base: "oklch(78.75% 0.14163582809066333 54.32911089172009)", + dark: "oklch(58.28% 0.128 52.2)", + light: "oklch(93.83% 0.037 56.93)" + }, + red: { + base: "oklch(62.73% 0.209 12.37)", + dark: "oklch(45.8% 0.177 17.7)", + light: "oklch(88.98% 0.052 3.28)" + }, + yellow: { + base: "oklch(90.92% 0.125 92.56)", + dark: "oklch(69.14% 0.109 91.04)", + light: "oklch(97.05% 0.039 91.2)" + }, + yin: { + light: "oklch(91.87% 0.003 264.54)" + } +} diff --git a/definitions/script/color_expanded.json b/definitions/script/color_expanded.json new file mode 100644 index 0000000..3cfe980 --- /dev/null +++ b/definitions/script/color_expanded.json @@ -0,0 +1,105 @@ +{ + "blue": { + "1": "oklch(89.66% 0.046 260.67)", + "2": "oklch(80.17% 0.091 258.88)", + "3": "oklch(70.94% 0.136 258.06)", + "4": "oklch(62.39% 0.181 258.33)", + "5": "oklch(54.87% 0.222 260.33)", + "6": "oklch(51.15% 0.204 260.17)", + "7": "oklch(47.36% 0.185 259.89)", + "8": "oklch(43.48% 0.17 260.2)", + "9": "oklch(39.53% 0.15 259.87)" + }, + "general": { + "yang": "oklch(99.4% 0 0)", + "yin": "oklch(14.38% 0.007 256.88)" + }, + "gray": { + "1": "oklch(95.57% 0.003 286.35)", + "2": "oklch(92.04% 0.002 197.12)", + "3": "oklch(88.28% 0.003 286.34)", + "4": "oklch(84.68% 0.002 197.12)", + "5": "oklch(80.73% 0.002 247.84)", + "6": "oklch(75.03% 0.002 247.85)", + "7": "oklch(69.01% 0.003 286.32)", + "8": "oklch(63.12% 0.004 219.55)", + "9": "oklch(56.82% 0.004 247.89)" + }, + "green": { + "1": "oklch(93.96% 0.05 148.74)", + "2": "oklch(88.77% 0.096 147.71)", + "3": "oklch(83.74% 0.139 146.57)", + "4": "oklch(79.33% 0.179 145.62)", + "5": "oklch(75.23% 0.209 144.64)", + "6": "oklch(70.03% 0.194 144.71)", + "7": "oklch(64.24% 0.175 144.92)", + "8": "oklch(58.83% 0.158 145.05)", + "9": "oklch(52.77% 0.138 145.41)" + }, + "pink": { + "1": "oklch(95.8% 0.023 354.27)", + "2": "oklch(92.14% 0.046 352.31)", + "3": "oklch(88.9% 0.066 354.39)", + "4": "oklch(85.43% 0.09 354.1)", + "5": "oklch(82.23% 0.112 355.33)", + "6": "oklch(76.37% 0.101 355.37)", + "7": "oklch(70.23% 0.092 354.96)", + "8": "oklch(64.11% 0.084 353.91)", + "9": "oklch(57.68% 0.074 353.14)" + }, + "purple": { + "1": "oklch(89.1% 0.046 305.24)", + "2": "oklch(78.68% 0.091 305)", + "3": "oklch(68.5% 0.136 303.78)", + "4": "oklch(58.47% 0.181 302.06)", + "5": "oklch(49.39% 0.215 298.31)", + "6": "oklch(46.11% 0.198 298.4)", + "7": "oklch(42.77% 0.181 298.49)", + "8": "oklch(39.46% 0.164 298.29)", + "9": "oklch(36.01% 0.145 298.35)" + }, + "orange": { + "1": "oklch(93.83% 0.037 56.93)", + "2": "oklch(88.37% 0.07258208750520016 55.80328658240742)", + "3": "oklch(83.56% 0.10753627570574478 56.492594564236946)", + "4": "oklch(78.75% 0.14163582809066333 54.32911089172009)", + "5": "oklch(74.61% 0.171 51.56)", + "6": "oklch(69.33% 0.157 52.18)", + "7": "oklch(63.8% 0.142 52.1)", + "8": "oklch(58.28% 0.128 52.2)", + "9": "oklch(52.49% 0.113 51.98)" + }, + "red": { + "1": "oklch(88.98% 0.052 3.28)", + "2": "oklch(78.78% 0.109 4.54)", + "3": "oklch(69.86% 0.162 7.82)", + "4": "oklch(62.73% 0.209 12.37)", + "5": "oklch(58.63% 0.231 19.6)", + "6": "oklch(54.41% 0.214 19.06)", + "7": "oklch(49.95% 0.195 18.34)", + "8": "oklch(45.8% 0.177 17.7)", + "9": "oklch(41.17% 0.157 16.58)" + }, + "yellow": { + "1": "oklch(97.05% 0.039 91.2)", + "2": "oklch(95% 0.07 92.39)", + "3": "oklch(92.76% 0.098 92.58)", + "4": "oklch(90.92% 0.125 92.56)", + "5": "oklch(89% 0.146 91.5)", + "6": "oklch(82.39% 0.133 91.5)", + "7": "oklch(75.84% 0.122 92.21)", + "8": "oklch(69.14% 0.109 91.04)", + "9": "oklch(62.29% 0.097 91.9)" + }, + "yin": { + "1": "oklch(91.87% 0.003 264.54)", + "2": "oklch(84.61% 0.004 286.31)", + "3": "oklch(76.89% 0.004 247.87)", + "4": "oklch(69.17% 0.004 247.88)", + "5": "oklch(61.01% 0.005 271.34)", + "6": "oklch(52.79% 0.005 271.32)", + "7": "oklch(43.87% 0.005 271.3)", + "8": "oklch(35.02% 0.005 236.66)", + "9": "oklch(25.11% 0.006 258.36)" + } +} diff --git a/definitions/script/color_expanded.ts b/definitions/script/color_expanded.ts new file mode 100644 index 0000000..4e8a61d --- /dev/null +++ b/definitions/script/color_expanded.ts @@ -0,0 +1,105 @@ +export default { + blue: { + 1: "oklch(89.66% 0.046 260.67)", + 2: "oklch(80.17% 0.091 258.88)", + 3: "oklch(70.94% 0.136 258.06)", + 4: "oklch(62.39% 0.181 258.33)", + 5: "oklch(54.87% 0.222 260.33)", + 6: "oklch(51.15% 0.204 260.17)", + 7: "oklch(47.36% 0.185 259.89)", + 8: "oklch(43.48% 0.17 260.2)", + 9: "oklch(39.53% 0.15 259.87)" + }, + general: { + yang: "oklch(99.4% 0 0)", + yin: "oklch(14.38% 0.007 256.88)" + }, + gray: { + 1: "oklch(95.57% 0.003 286.35)", + 2: "oklch(92.04% 0.002 197.12)", + 3: "oklch(88.28% 0.003 286.34)", + 4: "oklch(84.68% 0.002 197.12)", + 5: "oklch(80.73% 0.002 247.84)", + 6: "oklch(75.03% 0.002 247.85)", + 7: "oklch(69.01% 0.003 286.32)", + 8: "oklch(63.12% 0.004 219.55)", + 9: "oklch(56.82% 0.004 247.89)" + }, + green: { + 1: "oklch(93.96% 0.05 148.74)", + 2: "oklch(88.77% 0.096 147.71)", + 3: "oklch(83.74% 0.139 146.57)", + 4: "oklch(79.33% 0.179 145.62)", + 5: "oklch(75.23% 0.209 144.64)", + 6: "oklch(70.03% 0.194 144.71)", + 7: "oklch(64.24% 0.175 144.92)", + 8: "oklch(58.83% 0.158 145.05)", + 9: "oklch(52.77% 0.138 145.41)" + }, + pink: { + 1: "oklch(95.8% 0.023 354.27)", + 2: "oklch(92.14% 0.046 352.31)", + 3: "oklch(88.9% 0.066 354.39)", + 4: "oklch(85.43% 0.09 354.1)", + 5: "oklch(82.23% 0.112 355.33)", + 6: "oklch(76.37% 0.101 355.37)", + 7: "oklch(70.23% 0.092 354.96)", + 8: "oklch(64.11% 0.084 353.91)", + 9: "oklch(57.68% 0.074 353.14)" + }, + purple: { + 1: "oklch(89.1% 0.046 305.24)", + 2: "oklch(78.68% 0.091 305)", + 3: "oklch(68.5% 0.136 303.78)", + 4: "oklch(58.47% 0.181 302.06)", + 5: "oklch(49.39% 0.215 298.31)", + 6: "oklch(46.11% 0.198 298.4)", + 7: "oklch(42.77% 0.181 298.49)", + 8: "oklch(39.46% 0.164 298.29)", + 9: "oklch(36.01% 0.145 298.35)" + }, + orange: { + 1: "oklch(93.83% 0.037 56.93)", + 2: "oklch(88.37% 0.07258208750520016 55.80328658240742)", + 3: "oklch(83.56% 0.10753627570574478 56.492594564236946)", + 4: "oklch(78.75% 0.14163582809066333 54.32911089172009)", + 5: "oklch(74.61% 0.171 51.56)", + 6: "oklch(69.33% 0.157 52.18)", + 7: "oklch(63.8% 0.142 52.1)", + 8: "oklch(58.28% 0.128 52.2)", + 9: "oklch(52.49% 0.113 51.98)" + }, + red: { + 1: "oklch(88.98% 0.052 3.28)", + 2: "oklch(78.78% 0.109 4.54)", + 3: "oklch(69.86% 0.162 7.82)", + 4: "oklch(62.73% 0.209 12.37)", + 5: "oklch(58.63% 0.231 19.6)", + 6: "oklch(54.41% 0.214 19.06)", + 7: "oklch(49.95% 0.195 18.34)", + 8: "oklch(45.8% 0.177 17.7)", + 9: "oklch(41.17% 0.157 16.58)" + }, + yellow: { + 1: "oklch(97.05% 0.039 91.2)", + 2: "oklch(95% 0.07 92.39)", + 3: "oklch(92.76% 0.098 92.58)", + 4: "oklch(90.92% 0.125 92.56)", + 5: "oklch(89% 0.146 91.5)", + 6: "oklch(82.39% 0.133 91.5)", + 7: "oklch(75.84% 0.122 92.21)", + 8: "oklch(69.14% 0.109 91.04)", + 9: "oklch(62.29% 0.097 91.9)" + }, + yin: { + 1: "oklch(91.87% 0.003 264.54)", + 2: "oklch(84.61% 0.004 286.31)", + 3: "oklch(76.89% 0.004 247.87)", + 4: "oklch(69.17% 0.004 247.88)", + 5: "oklch(61.01% 0.005 271.34)", + 6: "oklch(52.79% 0.005 271.32)", + 7: "oklch(43.87% 0.005 271.3)", + 8: "oklch(35.02% 0.005 236.66)", + 9: "oklch(25.11% 0.006 258.36)" + } +} diff --git a/definitions/style/color.css b/definitions/style/color.css new file mode 100644 index 0000000..ae06232 --- /dev/null +++ b/definitions/style/color.css @@ -0,0 +1,91 @@ +:root { + /*** gray ***/ + --uchu-light-gray-raw: 95.57% 0.003 286.35; + --uchu-light-gray: oklch(var(--uchu-light-gray-raw)); + + --uchu-gray-raw: 84.68% 0.002 197.12; + --uchu-gray: oklch(var(--uchu-gray-raw)); + + --uchu-dark-gray-raw: 63.12% 0.004 219.55; + --uchu-dark-gray: oklch(var(--uchu-dark-gray-raw)); + + /*** red ***/ + --uchu-light-red-raw: 88.98% 0.052 3.28; + --uchu-light-red: oklch(var(--uchu-light-red-raw)); + + --uchu-red-raw: 62.73% 0.209 12.37; + --uchu-red: oklch(var(--uchu-red-raw)); + + --uchu-dark-red-raw: 45.8% 0.177 17.7; + --uchu-dark-red: oklch(var(--uchu-dark-red-raw)); + + /*** pink ***/ + --uchu-light-pink-raw: 95.8% 0.023 354.27; + --uchu-light-pink: oklch(var(--uchu-light-pink-raw)); + + --uchu-pink-raw: 85.43% 0.09 354.1; + --uchu-pink: oklch(var(--uchu-pink-raw)); + + --uchu-dark-pink-raw: 64.11% 0.084 353.91; + --uchu-dark-pink: oklch(var(--uchu-dark-pink-raw)); + + /*** purple ***/ + --uchu-light-purple-raw: 89.1% 0.046 305.24; + --uchu-light-purple: oklch(var(--uchu-light-purple-raw)); + + --uchu-purple-raw: 58.47% 0.181 302.06; + --uchu-purple: oklch(var(--uchu-purple-raw)); + + --uchu-dark-purple-raw: 39.46% 0.164 298.29; + --uchu-dark-purple: oklch(var(--uchu-dark-purple-raw)); + + /*** blue ***/ + --uchu-light-blue-raw: 89.66% 0.046 260.67; + --uchu-light-blue: oklch(var(--uchu-light-blue-raw)); + + --uchu-blue-raw: 62.39% 0.181 258.33; + --uchu-blue: oklch(var(--uchu-blue-raw)); + + --uchu-dark-blue-raw: 43.48% 0.17 260.2; + --uchu-dark-blue: oklch(var(--uchu-dark-blue-raw)); + + /*** green ***/ + --uchu-light-green-raw: 93.96% 0.05 148.74; + --uchu-light-green: oklch(var(--uchu-light-green-raw)); + + --uchu-green-raw: 79.33% 0.179 145.62; + --uchu-green: oklch(var(--uchu-green-raw)); + + --uchu-dark-green-raw: 58.83% 0.158 145.05; + --uchu-dark-green: oklch(var(--uchu-dark-green-raw)); + + /*** yellow ***/ + --uchu-light-yellow-raw: 97.05% 0.039 91.2; + --uchu-light-yellow: oklch(var(--uchu-light-yellow-raw)); + + --uchu-yellow-raw: 90.92% 0.125 92.56; + --uchu-yellow: oklch(var(--uchu-yellow-raw)); + + --uchu-dark-yellow-raw: 69.14% 0.109 91.04; + --uchu-dark-yellow: oklch(var(--uchu-dark-yellow-raw)); + + /*** orange ***/ + --uchu-light-orange-raw: 93.83% 0.037 56.93; + --uchu-light-orange: oklch(var(--uchu-light-orange-raw)); + + --uchu-orange-raw: 78.75% 0.14163582809066333 54.32911089172009; + --uchu-orange: oklch(var(--uchu-orange-raw)); + + --uchu-dark-orange-raw: 58.28% 0.128 52.2; + --uchu-dark-orange: oklch(var(--uchu-dark-orange-raw)); + + /*** general ***/ + --uchu-yang-raw: 99.4% 0 0; + --uchu-yang: oklch(var(--uchu-yang-raw)); + + --uchu-light-yin-raw: 91.87% 0.003 264.54; + --uchu-light-yin: oklch(var(--uchu-light-yin-raw)); + + --uchu-yin-raw: 14.38% 0.007 256.88; + --uchu-yin: oklch(var(--uchu-yin-raw)); +} diff --git a/definitions/style/color.scss b/definitions/style/color.scss new file mode 100644 index 0000000..b7e4fd7 --- /dev/null +++ b/definitions/style/color.scss @@ -0,0 +1,44 @@ +/*** gray ***/ +$uchu-light-gray: oklch(95.57% 0.003 286.35); +$uchu-gray: oklch(84.68% 0.002 197.12); +$uchu-dark-gray: oklch(63.12% 0.004 219.55); + +/*** red ***/ +$uchu-light-red: oklch(88.98% 0.052 3.28); +$uchu-red: oklch(62.73% 0.209 12.37); +$uchu-dark-red: oklch(45.8% 0.177 17.7); + +/*** pink ***/ +$uchu-light-pink: oklch(95.8% 0.023 354.27); +$uchu-pink: oklch(85.43% 0.09 354.1); +$uchu-dark-pink: oklch(64.11% 0.084 353.91); + +/*** purple ***/ +$uchu-light-purple: oklch(89.1% 0.046 305.24); +$uchu-purple: oklch(58.47% 0.181 302.06); +$uchu-dark-purple: oklch(39.46% 0.164 298.29); + +/*** blue ***/ +$uchu-light-blue: oklch(89.66% 0.046 260.67); +$uchu-blue: oklch(62.39% 0.181 258.33); +$uchu-dark-blue: oklch(43.48% 0.17 260.2); + +/*** green ***/ +$uchu-light-green: oklch(93.96% 0.05 148.74); +$uchu-green: oklch(79.33% 0.179 145.62); +$uchu-dark-green: oklch(58.83% 0.158 145.05); + +/*** yellow ***/ +$uchu-light-yellow: oklch(97.05% 0.039 91.2); +$uchu-yellow: oklch(90.92% 0.125 92.56); +$uchu-dark-yellow: oklch(69.14% 0.109 91.04); + +/*** orange ***/ +$uchu-light-orange: oklch(93.83% 0.037 56.93); +$uchu-orange: oklch(78.75% 0.14163582809066333 54.32911089172009); +$uchu-dark-orange: oklch(58.28% 0.128 52.2); + +/*** general ***/ +$uchu-yang: oklch(99.4% 0 0); +$uchu-light-yin: oklch(91.87% 0.003 264.54); +$uchu-yin: oklch(14.38% 0.007 256.88); diff --git a/definitions/style/color_expanded.css b/definitions/style/color_expanded.css new file mode 100644 index 0000000..f0e9a21 --- /dev/null +++ b/definitions/style/color_expanded.css @@ -0,0 +1,185 @@ +:root { + /*** gray ***/ + --uchu-gray-1-raw: 95.57% 0.003 286.35; + --uchu-gray-1: oklch(var(--uchu-gray-1-raw)); + --uchu-gray-2-raw: 92.04% 0.002 197.12; + --uchu-gray-2: oklch(var(--uchu-gray-2-raw)); + --uchu-gray-3-raw: 88.28% 0.003 286.34; + --uchu-gray-3: oklch(var(--uchu-gray-3-raw)); + --uchu-gray-4-raw: 84.68% 0.002 197.12; + --uchu-gray-4: oklch(var(--uchu-gray-4-raw)); + --uchu-gray-5-raw: 80.73% 0.002 247.84; + --uchu-gray-5: oklch(var(--uchu-gray-5-raw)); + --uchu-gray-6-raw: 75.03% 0.002 247.85; + --uchu-gray-6: oklch(var(--uchu-gray-6-raw)); + --uchu-gray-7-raw: 69.01% 0.003 286.32; + --uchu-gray-7: oklch(var(--uchu-gray-7-raw)); + --uchu-gray-8-raw: 63.12% 0.004 219.55; + --uchu-gray-8: oklch(var(--uchu-gray-8-raw)); + --uchu-gray-9-raw: 56.82% 0.004 247.89; + --uchu-gray-9: oklch(var(--uchu-gray-9-raw)); + + /*** red ***/ + --uchu-red-1-raw: 88.98% 0.052 3.28; + --uchu-red-1: oklch(var(--uchu-red-1-raw)); + --uchu-red-2-raw: 78.78% 0.109 4.54; + --uchu-red-2: oklch(var(--uchu-red-2-raw)); + --uchu-red-3-raw: 69.86% 0.162 7.82; + --uchu-red-3: oklch(var(--uchu-red-3-raw)); + --uchu-red-4-raw: 62.73% 0.209 12.37; + --uchu-red-4: oklch(var(--uchu-red-4-raw)); + --uchu-red-5-raw: 58.63% 0.231 19.6; + --uchu-red-5: oklch(var(--uchu-red-5-raw)); + --uchu-red-6-raw: 54.41% 0.214 19.06; + --uchu-red-6: oklch(var(--uchu-red-6-raw)); + --uchu-red-7-raw: 49.95% 0.195 18.34; + --uchu-red-7: oklch(var(--uchu-red-7-raw)); + --uchu-red-8-raw: 45.8% 0.177 17.7; + --uchu-red-8: oklch(var(--uchu-red-8-raw)); + --uchu-red-9-raw: 41.17% 0.157 16.58; + --uchu-red-9: oklch(var(--uchu-red-9-raw)); + + /*** pink ***/ + --uchu-pink-1-raw: 95.8% 0.023 354.27; + --uchu-pink-1: oklch(var(--uchu-pink-1-raw)); + --uchu-pink-2-raw: 92.14% 0.046 352.31; + --uchu-pink-2: oklch(var(--uchu-pink-2-raw)); + --uchu-pink-3-raw: 88.9% 0.066 354.39; + --uchu-pink-3: oklch(var(--uchu-pink-3-raw)); + --uchu-pink-4-raw: 85.43% 0.09 354.1; + --uchu-pink-4: oklch(var(--uchu-pink-4-raw)); + --uchu-pink-5-raw: 82.23% 0.112 355.33; + --uchu-pink-5: oklch(var(--uchu-pink-5-raw)); + --uchu-pink-6-raw: 76.37% 0.101 355.37; + --uchu-pink-6: oklch(var(--uchu-pink-6-raw)); + --uchu-pink-7-raw: 70.23% 0.092 354.96; + --uchu-pink-7: oklch(var(--uchu-pink-7-raw)); + --uchu-pink-8-raw: 64.11% 0.084 353.91; + --uchu-pink-8: oklch(var(--uchu-pink-8-raw)); + --uchu-pink-9-raw: 57.68% 0.074 353.14; + --uchu-pink-9: oklch(var(--uchu-pink-9-raw)); + + /*** purple ***/ + --uchu-purple-1-raw: 89.1% 0.046 305.24; + --uchu-purple-1: oklch(var(--uchu-purple-1-raw)); + --uchu-purple-2-raw: 78.68% 0.091 305; + --uchu-purple-2: oklch(var(--uchu-purple-2-raw)); + --uchu-purple-3-raw: 68.5% 0.136 303.78; + --uchu-purple-3: oklch(var(--uchu-purple-3-raw)); + --uchu-purple-4-raw: 58.47% 0.181 302.06; + --uchu-purple-4: oklch(var(--uchu-purple-4-raw)); + --uchu-purple-5-raw: 49.39% 0.215 298.31; + --uchu-purple-5: oklch(var(--uchu-purple-5-raw)); + --uchu-purple-6-raw: 46.11% 0.198 298.4; + --uchu-purple-6: oklch(var(--uchu-purple-6-raw)); + --uchu-purple-7-raw: 42.77% 0.181 298.49; + --uchu-purple-7: oklch(var(--uchu-purple-7-raw)); + --uchu-purple-8-raw: 39.46% 0.164 298.29; + --uchu-purple-8: oklch(var(--uchu-purple-8-raw)); + --uchu-purple-9-raw: 36.01% 0.145 298.35; + --uchu-purple-9: oklch(var(--uchu-purple-9-raw)); + + /*** blue ***/ + --uchu-blue-1-raw: 89.66% 0.046 260.67; + --uchu-blue-1: oklch(var(--uchu-blue-1-raw)); + --uchu-blue-2-raw: 80.17% 0.091 258.88; + --uchu-blue-2: oklch(var(--uchu-blue-2-raw)); + --uchu-blue-3-raw: 70.94% 0.136 258.06; + --uchu-blue-3: oklch(var(--uchu-blue-3-raw)); + --uchu-blue-4-raw: 62.39% 0.181 258.33; + --uchu-blue-4: oklch(var(--uchu-blue-4-raw)); + --uchu-blue-5-raw: 54.87% 0.222 260.33; + --uchu-blue-5: oklch(var(--uchu-blue-5-raw)); + --uchu-blue-6-raw: 51.15% 0.204 260.17; + --uchu-blue-6: oklch(var(--uchu-blue-6-raw)); + --uchu-blue-7-raw: 47.36% 0.185 259.89; + --uchu-blue-7: oklch(var(--uchu-blue-7-raw)); + --uchu-blue-8-raw: 43.48% 0.17 260.2; + --uchu-blue-8: oklch(var(--uchu-blue-8-raw)); + --uchu-blue-9-raw: 39.53% 0.15 259.87; + --uchu-blue-9: oklch(var(--uchu-blue-9-raw)); + + /*** green ***/ + --uchu-green-1-raw: 93.96% 0.05 148.74; + --uchu-green-1: oklch(var(--uchu-green-1-raw)); + --uchu-green-2-raw: 88.77% 0.096 147.71; + --uchu-green-2: oklch(var(--uchu-green-2-raw)); + --uchu-green-3-raw: 83.74% 0.139 146.57; + --uchu-green-3: oklch(var(--uchu-green-3-raw)); + --uchu-green-4-raw: 79.33% 0.179 145.62; + --uchu-green-4: oklch(var(--uchu-green-4-raw)); + --uchu-green-5-raw: 75.23% 0.209 144.64; + --uchu-green-5: oklch(var(--uchu-green-5-raw)); + --uchu-green-6-raw: 70.03% 0.194 144.71; + --uchu-green-6: oklch(var(--uchu-green-6-raw)); + --uchu-green-7-raw: 64.24% 0.175 144.92; + --uchu-green-7: oklch(var(--uchu-green-7-raw)); + --uchu-green-8-raw: 58.83% 0.158 145.05; + --uchu-green-8: oklch(var(--uchu-green-8-raw)); + --uchu-green-9-raw: 52.77% 0.138 145.41; + --uchu-green-9: oklch(var(--uchu-green-9-raw)); + + /*** yellow ***/ + --uchu-yellow-1-raw: 97.05% 0.039 91.2; + --uchu-yellow-1: oklch(var(--uchu-yellow-1-raw)); + --uchu-yellow-2-raw: 95% 0.07 92.39; + --uchu-yellow-2: oklch(var(--uchu-yellow-2-raw)); + --uchu-yellow-3-raw: 92.76% 0.098 92.58; + --uchu-yellow-3: oklch(var(--uchu-yellow-3-raw)); + --uchu-yellow-4-raw: 90.92% 0.125 92.56; + --uchu-yellow-4: oklch(var(--uchu-yellow-4-raw)); + --uchu-yellow-5-raw: 89% 0.146 91.5; + --uchu-yellow-5: oklch(var(--uchu-yellow-5-raw)); + --uchu-yellow-6-raw: 82.39% 0.133 91.5; + --uchu-yellow-6: oklch(var(--uchu-yellow-6-raw)); + --uchu-yellow-7-raw: 75.84% 0.122 92.21; + --uchu-yellow-7: oklch(var(--uchu-yellow-7-raw)); + --uchu-yellow-8-raw: 69.14% 0.109 91.04; + --uchu-yellow-8: oklch(var(--uchu-yellow-8-raw)); + --uchu-yellow-9-raw: 62.29% 0.097 91.9; + --uchu-yellow-9: oklch(var(--uchu-yellow-9-raw)); + + /*** orange ***/ + --uchu-orange-1-raw: 93.83% 0.037 56.93; + --uchu-orange-1: oklch(var(--uchu-orange-1-raw)); + --uchu-orange-2-raw: 88.37% 0.07258208750520016 55.80328658240742; + --uchu-orange-2: oklch(var(--uchu-orange-2-raw)); + --uchu-orange-3-raw: 83.56% 0.10753627570574478 56.492594564236946; + --uchu-orange-3: oklch(var(--uchu-orange-3-raw)); + --uchu-orange-4-raw: 78.75% 0.14163582809066333 54.32911089172009; + --uchu-orange-4: oklch(var(--uchu-orange-4-raw)); + --uchu-orange-5-raw: 74.61% 0.171 51.56; + --uchu-orange-5: oklch(var(--uchu-orange-5-raw)); + --uchu-orange-6-raw: 69.33% 0.157 52.18; + --uchu-orange-6: oklch(var(--uchu-orange-6-raw)); + --uchu-orange-7-raw: 63.8% 0.142 52.1; + --uchu-orange-7: oklch(var(--uchu-orange-7-raw)); + --uchu-orange-8-raw: 58.28% 0.128 52.2; + --uchu-orange-8: oklch(var(--uchu-orange-8-raw)); + --uchu-orange-9-raw: 52.49% 0.113 51.98; + --uchu-orange-9: oklch(var(--uchu-orange-9-raw)); + + /*** general ***/ + --uchu-yin-1-raw: 91.87% 0.003 264.54; + --uchu-yin-1: oklch(var(--uchu-yin-1-raw)); + --uchu-yin-2-raw: 84.61% 0.004 286.31; + --uchu-yin-2: oklch(var(--uchu-yin-2-raw)); + --uchu-yin-3-raw: 76.89% 0.004 247.87; + --uchu-yin-3: oklch(var(--uchu-yin-3-raw)); + --uchu-yin-4-raw: 69.17% 0.004 247.88; + --uchu-yin-4: oklch(var(--uchu-yin-4-raw)); + --uchu-yin-5-raw: 61.01% 0.005 271.34; + --uchu-yin-5: oklch(var(--uchu-yin-5-raw)); + --uchu-yin-6-raw: 52.79% 0.005 271.32; + --uchu-yin-6: oklch(var(--uchu-yin-6-raw)); + --uchu-yin-7-raw: 43.87% 0.005 271.3; + --uchu-yin-7: oklch(var(--uchu-yin-7-raw)); + --uchu-yin-8-raw: 35.02% 0.005 236.66; + --uchu-yin-8: oklch(var(--uchu-yin-8-raw)); + --uchu-yin-9-raw: 25.11% 0.006 258.36; + --uchu-yin-9: oklch(var(--uchu-yin-9-raw)); + --uchu-yin-raw: 14.38% 0.007 256.88; + --uchu-yin: oklch(var(--uchu-yin-raw)); + --uchu-yang-raw: 99.4% 0 0; + --uchu-yang: oklch(var(--uchu-yang-raw)); +} diff --git a/definitions/style/color_expanded.scss b/definitions/style/color_expanded.scss new file mode 100644 index 0000000..877e505 --- /dev/null +++ b/definitions/style/color_expanded.scss @@ -0,0 +1,100 @@ +/*** gray ***/ +$uchu-gray-1: oklch(95.57% 0.003 286.35); +$uchu-gray-2: oklch(92.04% 0.002 197.12); +$uchu-gray-3: oklch(88.28% 0.003 286.34); +$uchu-gray-4: oklch(84.68% 0.002 197.12); +$uchu-gray-5: oklch(80.73% 0.002 247.84); +$uchu-gray-6: oklch(75.03% 0.002 247.85); +$uchu-gray-7: oklch(69.01% 0.003 286.32); +$uchu-gray-8: oklch(63.12% 0.004 219.55); +$uchu-gray-9: oklch(56.82% 0.004 247.89); + +/*** red ***/ +$uchu-red-1: oklch(88.98% 0.052 3.28); +$uchu-red-2: oklch(78.78% 0.109 4.54); +$uchu-red-3: oklch(69.86% 0.162 7.82); +$uchu-red-4: oklch(62.73% 0.209 12.37); +$uchu-red-5: oklch(58.63% 0.231 19.6); +$uchu-red-6: oklch(54.41% 0.214 19.06); +$uchu-red-7: oklch(49.95% 0.195 18.34); +$uchu-red-8: oklch(45.8% 0.177 17.7); +$uchu-red-9: oklch(41.17% 0.157 16.58); + +/*** pink ***/ +$uchu-pink-1: oklch(95.8% 0.023 354.27); +$uchu-pink-2: oklch(92.14% 0.046 352.31); +$uchu-pink-3: oklch(88.9% 0.066 354.39); +$uchu-pink-4: oklch(85.43% 0.09 354.1); +$uchu-pink-5: oklch(82.23% 0.112 355.33); +$uchu-pink-6: oklch(76.37% 0.101 355.37); +$uchu-pink-7: oklch(70.23% 0.092 354.96); +$uchu-pink-8: oklch(64.11% 0.084 353.91); +$uchu-pink-9: oklch(57.68% 0.074 353.14); + +/*** purple ***/ +$uchu-purple-1: oklch(89.1% 0.046 305.24); +$uchu-purple-2: oklch(78.68% 0.091 305); +$uchu-purple-3: oklch(68.5% 0.136 303.78); +$uchu-purple-4: oklch(58.47% 0.181 302.06); +$uchu-purple-5: oklch(49.39% 0.215 298.31); +$uchu-purple-6: oklch(46.11% 0.198 298.4); +$uchu-purple-7: oklch(42.77% 0.181 298.49); +$uchu-purple-8: oklch(39.46% 0.164 298.29); +$uchu-purple-9: oklch(36.01% 0.145 298.35); + +/*** blue ***/ +$uchu-blue-1: oklch(89.66% 0.046 260.67); +$uchu-blue-2: oklch(80.17% 0.091 258.88); +$uchu-blue-3: oklch(70.94% 0.136 258.06); +$uchu-blue-4: oklch(62.39% 0.181 258.33); +$uchu-blue-5: oklch(54.87% 0.222 260.33); +$uchu-blue-6: oklch(51.15% 0.204 260.17); +$uchu-blue-7: oklch(47.36% 0.185 259.89); +$uchu-blue-8: oklch(43.48% 0.17 260.2); +$uchu-blue-9: oklch(39.53% 0.15 259.87); + +/*** green ***/ +$uchu-green-1: oklch(93.96% 0.05 148.74); +$uchu-green-2: oklch(88.77% 0.096 147.71); +$uchu-green-3: oklch(83.74% 0.139 146.57); +$uchu-green-4: oklch(79.33% 0.179 145.62); +$uchu-green-5: oklch(75.23% 0.209 144.64); +$uchu-green-6: oklch(70.03% 0.194 144.71); +$uchu-green-7: oklch(64.24% 0.175 144.92); +$uchu-green-8: oklch(58.83% 0.158 145.05); +$uchu-green-9: oklch(52.77% 0.138 145.41); + +/*** yellow ***/ +$uchu-yellow-1: oklch(97.05% 0.039 91.2); +$uchu-yellow-2: oklch(95% 0.07 92.39); +$uchu-yellow-3: oklch(92.76% 0.098 92.58); +$uchu-yellow-4: oklch(90.92% 0.125 92.56); +$uchu-yellow-5: oklch(89% 0.146 91.5); +$uchu-yellow-6: oklch(82.39% 0.133 91.5); +$uchu-yellow-7: oklch(75.84% 0.122 92.21); +$uchu-yellow-8: oklch(69.14% 0.109 91.04); +$uchu-yellow-9: oklch(62.29% 0.097 91.9); + +/*** orange ***/ +$uchu-orange-1: oklch(93.83% 0.037 56.93); +$uchu-orange-2: oklch(88.37% 0.07258208750520016 55.80328658240742); +$uchu-orange-3: oklch(83.56% 0.10753627570574478 56.492594564236946); +$uchu-orange-4: oklch(78.75% 0.14163582809066333 54.32911089172009); +$uchu-orange-5: oklch(74.61% 0.171 51.56); +$uchu-orange-6: oklch(69.33% 0.157 52.18); +$uchu-orange-7: oklch(63.8% 0.142 52.1); +$uchu-orange-8: oklch(58.28% 0.128 52.2); +$uchu-orange-9: oklch(52.49% 0.113 51.98); + +/*** general ***/ +$uchu-yin-1: oklch(91.87% 0.003 264.54); +$uchu-yin-2: oklch(84.61% 0.004 286.31); +$uchu-yin-3: oklch(76.89% 0.004 247.87); +$uchu-yin-4: oklch(69.17% 0.004 247.88); +$uchu-yin-5: oklch(61.01% 0.005 271.34); +$uchu-yin-6: oklch(52.79% 0.005 271.32); +$uchu-yin-7: oklch(43.87% 0.005 271.3); +$uchu-yin-8: oklch(35.02% 0.005 236.66); +$uchu-yin-9: oklch(25.11% 0.006 258.36); +$uchu-yin: oklch(14.38% 0.007 256.88); +$uchu-yang: oklch(99.4% 0 0); diff --git a/demo/asset/audio/pronounciation.mp3 b/demo/asset/audio/pronounciation.mp3 Binary files differnew file mode 100644 index 0000000..4f29344 --- /dev/null +++ b/demo/asset/audio/pronounciation.mp3 diff --git a/demo/asset/audio/pronounciation.ogg b/demo/asset/audio/pronounciation.ogg Binary files differnew file mode 100644 index 0000000..dc24a90 --- /dev/null +++ b/demo/asset/audio/pronounciation.ogg diff --git a/demo/asset/audio/pronounciation.wav b/demo/asset/audio/pronounciation.wav Binary files differnew file mode 100644 index 0000000..2efc915 --- /dev/null +++ b/demo/asset/audio/pronounciation.wav diff --git a/demo/asset/image/og.png b/demo/asset/image/og.png Binary files differnew file mode 100644 index 0000000..dbb2d13 --- /dev/null +++ b/demo/asset/image/og.png diff --git a/demo/asset/script/shared.js b/demo/asset/script/shared.js new file mode 100644 index 0000000..73ea5c2 --- /dev/null +++ b/demo/asset/script/shared.js @@ -0,0 +1,48 @@ +function copyTextToClipboard(text, { target = document.body } = {}) { + if (typeof text !== "string") + throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof text}\`.`); + + const element = document.createElement("textarea"); + const previouslyFocusedElement = document.activeElement; + let isSuccess = false; + + element.value = text; + element.setAttribute("readonly", ""); + element.style.contain = "strict"; + element.style.position = "absolute"; + element.style.left = "-9999px"; + element.style.fontSize = "12pt"; + + const selection = document.getSelection(); + const originalRange = selection.rangeCount > 0 && selection.getRangeAt(0); + + target.append(element); + + element.select(); + element.selectionStart = 0; + element.selectionEnd = text.length; + + try { + isSuccess = document.execCommand("copy"); + } catch(_) { + // + } + + element.remove(); + + if (originalRange) { + selection.removeAllRanges(); + selection.addRange(originalRange); + } + + if (previouslyFocusedElement) + previouslyFocusedElement.focus(); + return isSuccess; + + /// via https://github.com/sindresorhus/copy-text-to-clipboard +} + +function playAudio() { + const audio = document.getElementById("speak"); + audio.play(); +} diff --git a/demo/asset/style/shared.css b/demo/asset/style/shared.css new file mode 100644 index 0000000..ed8a6d1 --- /dev/null +++ b/demo/asset/style/shared.css @@ -0,0 +1,207 @@ +*, *::before, *::after { + margin: 0; padding: 0; + box-sizing: inherit; +} + +html { + box-sizing: border-box; + font-size: 12px; + scroll-behavior: smooth; +} + +body { + font-family: system-ui, sans-serif; + font-size: 1.25rem; + line-height: 1.33; +} + +section { + display: flex; + flex-direction: column; + width: 100%; + + &:not(.intro) { + height: 100vh; + } + + &:not(:last-of-type) { + margin-bottom: 1rem; + } + + h2 { + line-height: 1; + text-align: center; + + @media (min-width: 901px) { + font-size: 5vw; + } + + @media (min-width: 701px) and (max-width: 900px) { + font-size: 5rem; + } + + @media (max-width: 700px) { + font-size: 2rem; + } + + span { + opacity: 0.15; + } + } + + h3 { + font-size: 5vw; + line-height: 1; + position: relative; + text-align: right; + + &::after { + width: 100%; height: 100%; + bottom: 0; left: 0; + + content: ""; + position: absolute; + } + } + + a { + transition: color 0.2s; + } + + .info, + .swatches { + width: 100%; height: 50%; + } + + .info { + display: flex; + flex-direction: column; + justify-content: center; + padding: 1rem; + position: relative; + + p { + top: 1rem; left: 1rem; + letter-spacing: 0.05rem; + position: absolute; + } + + h3 { + bottom: 1rem; right: 1rem; + position: absolute; + } + } + + .swatches { + display: flex; + flex-direction: row; + height: 50%; + list-style-type: none; + + .swatch { + display: flex; + flex-direction: column; + height: 100%; + justify-content: end; + position: relative; + + h3 { + z-index: 1; + } + + p { + height: 100%; + padding: 1.5rem 1rem; + opacity: 0.5; + position: absolute; + writing-mode: vertical-rl; + + @media (min-width: 701px) { + width: 100%; + } + + &::after { + width: 100%; height: 75%; + bottom: 0; right: 0; + + content: ""; + position: absolute; + } + } + } + } + + &.intro { + align-items: center; + display: flex; + flex-direction: column; + height: 45vh; + justify-content: center; + + h1 { + cursor: pointer; + font-size: 10rem; + max-width: 280px; + width: fit-content; + } + + p { + padding: 2rem; + text-align: center; + } + + .links { + .link { + border-radius: 5rem; + padding: 0.5rem 1rem; + text-decoration: none; + transition: background-color 0.2s; + + &:not(:first-of-type) { + margin-left: 0.25rem; + } + } + } + + .palette { + display: flex; + flex-direction: row; + width: 280px; + + a { + width: calc(280px / 8); height: calc(280px / 8); + } + } + } +} + +.notify { + width: 100%; height: 5rem; + bottom: 0; left: 0; + + color: var(--uchu-yang); + display: flex; + flex-direction: column; + font-size: 1.5rem; + justify-content: center; + padding: 0 1.25rem; + position: fixed; + transition: transform 0.2s;; + user-select: none; + + &:not(.active) { + transform: translateY(5rem); + z-index: 0; + } + + &.active { + transform: translateY(0); + z-index: 10; + } +} + +@keyframes loading { + 50% { + color: var(--uchu-yang); + } +} diff --git a/demo/favicon.svg b/demo/favicon.svg new file mode 100644 index 0000000..1932816 --- /dev/null +++ b/demo/favicon.svg @@ -0,0 +1,56 @@ +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <style> + circle { + animation: 60s linear infinite both circle-animation; + } + + @keyframes circle-animation { + 0% { + /*** uchu-red ***/ + fill: oklch(62.73% 0.209 12.37); + } + + 12% { + /*** uchu-orange ***/ + fill: oklch(78.75% 0.14163582809066333 54.32911089172009); + } + + 24% { + /*** uchu-yellow ***/ + fill: oklch(90.92% 0.125 92.56); + } + + 36% { + /*** uchu-green ***/ + fill: oklch(79.33% 0.179 145.62); + } + + 48% { + /*** uchu-blue ***/ + fill: oklch(62.39% 0.181 258.33); + } + + 60% { + /*** uchu-purple ***/ + fill: oklch(58.47% 0.181 302.06); + } + + 72% { + /*** uchu-pink ***/ + fill: oklch(85.43% 0.09 354.1); + } + + 84% { + /*** uchu-gray ***/ + fill: oklch(84.68% 0.002 197.12); + } + + 96% { + /*** uchu-yin ***/ + fill: oklch(14.38% 0.007 256.88); + } + } + </style> + + <circle fill="oklch(85.43% 0.09 354.1)" cx="50" cy="50" r="45"/> +</svg> diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..b54ec2b --- /dev/null +++ b/demo/index.html @@ -0,0 +1,1360 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"/> + + <meta name="description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/> + <meta name="referrer" content="strict-origin"/> + <meta name="theme-color" content="oklch(95.57% 0.003 286.35)"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + + <meta property="og:description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/> + <meta property="og:image:height" content="600"/> + <meta property="og:image:secure_url" content="./asset/image/og.png"/> + <meta property="og:image:type" content="image/png"/> + <meta property="og:image:width" content="1200"/> + <meta property="og:locale" content="en_US"/> + <meta property="og:site_name" content="uchū"/> + <meta property="og:title" content="uchū — the color palette for internet lovers"/> + <meta property="og:type" content="website"/> + <meta property="og:url" content="https://uchu.style"/> + + <title>uchū demo · expanded palette</title> + + <link rel="canonical" href="https://uchu.style"/> + <link rel="icon" href="./favicon.svg"/> + + <link href="../definitions/style/color_expanded.css" rel="stylesheet"/> + <link href="./asset/style/shared.css?v=2025.02.19" rel="stylesheet"/> + + <style> + body { + background-color: var(--uchu-yang); + color: var(--uchu-yin-9); + } + + section { + a { + &:not([class]) { + &:not(:hover):not(:visited) { + color: var(--uchu-blue-5); + } + + &:not(:visited):hover { + color: var(--uchu-pink-5); + } + + &:not(:hover):visited { + color: var(--uchu-purple-4); + } + + &:hover:visited { + color: var(--uchu-blue-5); + } + } + } + + .swatches { + .swatch { + width: calc(100% / 8); + + h3 { + padding: 0 1rem 1rem 0; + } + } + } + + &.blue { + .info { + background-color: var(--uchu-blue-1); + color: var(--uchu-blue-9); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-blue-2); + color: var(--uchu-blue-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-blue-2) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-blue-3); + color: var(--uchu-blue-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-blue-3) 0%, transparent 100%); + } + } + + .swatch:nth-child(3) { + background-color: var(--uchu-blue-4); + color: var(--uchu-blue-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-blue-4) 0%, transparent 100%); + } + } + + .swatch:nth-child(4) { + background-color: var(--uchu-blue-5); + color: var(--uchu-blue-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-blue-5) 0%, transparent 100%); + } + } + + .swatch:nth-child(5) { + background-color: var(--uchu-blue-6); + color: var(--uchu-blue-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-blue-6) 0%, transparent 100%); + } + } + + .swatch:nth-child(6) { + background-color: var(--uchu-blue-7); + color: var(--uchu-blue-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-blue-7) 0%, transparent 100%); + } + } + + .swatch:nth-child(7) { + background-color: var(--uchu-blue-8); + color: var(--uchu-blue-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-blue-8) 0%, transparent 100%); + } + } + + .swatch:nth-child(8) { + background-color: var(--uchu-blue-9); + color: var(--uchu-blue-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-blue-9) 0%, transparent 100%); + } + } + } + + &.gray { + .info { + background-color: var(--uchu-gray-1); + color: var(--uchu-gray-9); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-gray-2); + color: var(--uchu-gray-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-gray-2) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-gray-3); + color: var(--uchu-gray-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-gray-3) 0%, transparent 100%); + } + } + + .swatch:nth-child(3) { + background-color: var(--uchu-gray-4); + color: var(--uchu-gray-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-gray-4) 0%, transparent 100%); + } + } + + .swatch:nth-child(4) { + background-color: var(--uchu-gray-5); + color: var(--uchu-gray-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-gray-5) 0%, transparent 100%); + } + } + + .swatch:nth-child(5) { + background-color: var(--uchu-gray-6); + color: var(--uchu-gray-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-gray-6) 0%, transparent 100%); + } + } + + .swatch:nth-child(6) { + background-color: var(--uchu-gray-7); + color: var(--uchu-gray-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-gray-7) 0%, transparent 100%); + } + } + + .swatch:nth-child(7) { + background-color: var(--uchu-gray-8); + color: var(--uchu-gray-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-gray-8) 0%, transparent 100%); + } + } + + .swatch:nth-child(8) { + background-color: var(--uchu-gray-9); + color: var(--uchu-gray-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-gray-9) 0%, transparent 100%); + } + } + } + + &.green { + .info { + background-color: var(--uchu-green-1); + color: var(--uchu-green-9); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-green-2); + color: var(--uchu-green-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-green-2) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-green-3); + color: var(--uchu-green-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-green-3) 0%, transparent 100%); + } + } + + .swatch:nth-child(3) { + background-color: var(--uchu-green-4); + color: var(--uchu-green-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-green-4) 0%, transparent 100%); + } + } + + .swatch:nth-child(4) { + background-color: var(--uchu-green-5); + color: var(--uchu-green-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-green-5) 0%, transparent 100%); + } + } + + .swatch:nth-child(5) { + background-color: var(--uchu-green-6); + color: var(--uchu-green-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-green-6) 0%, transparent 100%); + } + } + + .swatch:nth-child(6) { + background-color: var(--uchu-green-7); + color: var(--uchu-green-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-green-7) 0%, transparent 100%); + } + } + + .swatch:nth-child(7) { + background-color: var(--uchu-green-8); + color: var(--uchu-green-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-green-8) 0%, transparent 100%); + } + } + + .swatch:nth-child(8) { + background-color: var(--uchu-green-9); + color: var(--uchu-green-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-green-9) 0%, transparent 100%); + } + } + } + + &.intro { + .links { + .link { + &:first-of-type { + color: var(--uchu-yang); + + &:not(:hover) { + background-color: var(--uchu-yin); + } + + &:hover { + background-color: var(--uchu-yin-8); + } + } + + &:not(:first-of-type) { + color: var(--uchu-pink-9); + + &:not(:hover) { + background-color: var(--uchu-pink-3); + } + + &:hover { + background-color: var(--uchu-pink-2); + } + } + } + } + + .palette { + a { + &.blue { + background-color: var(--uchu-blue-4); + } + + &.gray { + background-color: var(--uchu-gray-4); + } + + &.green { + background-color: var(--uchu-green-4); + } + + &.orange { + background-color: var(--uchu-orange-4); + } + + &.pink { + background-color: var(--uchu-pink-4); + } + + &.purple { + background-color: var(--uchu-purple-4); + } + + &.red { + background-color: var(--uchu-red-4); + } + + &.yellow { + background-color: var(--uchu-yellow-4); + } + } + } + } + + &.orange { + .info { + background-color: var(--uchu-orange-1); + color: var(--uchu-orange-9); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-orange-2); + color: var(--uchu-orange-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-orange-2) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-orange-3); + color: var(--uchu-orange-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-orange-3) 0%, transparent 100%); + } + } + + .swatch:nth-child(3) { + background-color: var(--uchu-orange-4); + color: var(--uchu-orange-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-orange-4) 0%, transparent 100%); + } + } + + .swatch:nth-child(4) { + background-color: var(--uchu-orange-5); + color: var(--uchu-orange-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-orange-5) 0%, transparent 100%); + } + } + + .swatch:nth-child(5) { + background-color: var(--uchu-orange-6); + color: var(--uchu-orange-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-orange-6) 0%, transparent 100%); + } + } + + .swatch:nth-child(6) { + background-color: var(--uchu-orange-7); + color: var(--uchu-orange-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-orange-7) 0%, transparent 100%); + } + } + + .swatch:nth-child(7) { + background-color: var(--uchu-orange-8); + color: var(--uchu-orange-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-orange-8) 0%, transparent 100%); + } + } + + .swatch:nth-child(8) { + background-color: var(--uchu-orange-9); + color: var(--uchu-orange-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-orange-9) 0%, transparent 100%); + } + } + } + + &.pink { + .info { + background-color: var(--uchu-pink-1); + color: var(--uchu-pink-9); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-pink-2); + color: var(--uchu-pink-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-pink-2) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-pink-3); + color: var(--uchu-pink-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-pink-3) 0%, transparent 100%); + } + } + + .swatch:nth-child(3) { + background-color: var(--uchu-pink-4); + color: var(--uchu-pink-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-pink-4) 0%, transparent 100%); + } + } + + .swatch:nth-child(4) { + background-color: var(--uchu-pink-5); + color: var(--uchu-pink-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-pink-5) 0%, transparent 100%); + } + } + + .swatch:nth-child(5) { + background-color: var(--uchu-pink-6); + color: var(--uchu-pink-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-pink-6) 0%, transparent 100%); + } + } + + .swatch:nth-child(6) { + background-color: var(--uchu-pink-7); + color: var(--uchu-pink-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-pink-7) 0%, transparent 100%); + } + } + + .swatch:nth-child(7) { + background-color: var(--uchu-pink-8); + color: var(--uchu-pink-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-pink-8) 0%, transparent 100%); + } + } + + .swatch:nth-child(8) { + background-color: var(--uchu-pink-9); + color: var(--uchu-pink-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-pink-9) 0%, transparent 100%); + } + } + } + + &.purple { + .info { + background-color: var(--uchu-purple-1); + color: var(--uchu-purple-9); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-purple-2); + color: var(--uchu-purple-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-purple-2) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-purple-3); + color: var(--uchu-purple-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-purple-3) 0%, transparent 100%); + } + } + + .swatch:nth-child(3) { + background-color: var(--uchu-purple-4); + color: var(--uchu-purple-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-purple-4) 0%, transparent 100%); + } + } + + .swatch:nth-child(4) { + background-color: var(--uchu-purple-5); + color: var(--uchu-purple-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-purple-5) 0%, transparent 100%); + } + } + + .swatch:nth-child(5) { + background-color: var(--uchu-purple-6); + color: var(--uchu-purple-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-purple-6) 0%, transparent 100%); + } + } + + .swatch:nth-child(6) { + background-color: var(--uchu-purple-7); + color: var(--uchu-purple-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-purple-7) 0%, transparent 100%); + } + } + + .swatch:nth-child(7) { + background-color: var(--uchu-purple-8); + color: var(--uchu-purple-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-purple-8) 0%, transparent 100%); + } + } + + .swatch:nth-child(8) { + background-color: var(--uchu-purple-9); + color: var(--uchu-purple-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-purple-9) 0%, transparent 100%); + } + } + } + + &.red { + .info { + background-color: var(--uchu-red-1); + color: var(--uchu-red-9); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-red-2); + color: var(--uchu-red-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-red-2) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-red-3); + color: var(--uchu-red-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-red-3) 0%, transparent 100%); + } + } + + .swatch:nth-child(3) { + background-color: var(--uchu-red-4); + color: var(--uchu-red-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-red-4) 0%, transparent 100%); + } + } + + .swatch:nth-child(4) { + background-color: var(--uchu-red-5); + color: var(--uchu-red-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-red-5) 0%, transparent 100%); + } + } + + .swatch:nth-child(5) { + background-color: var(--uchu-red-6); + color: var(--uchu-red-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-red-6) 0%, transparent 100%); + } + } + + .swatch:nth-child(6) { + background-color: var(--uchu-red-7); + color: var(--uchu-red-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-red-7) 0%, transparent 100%); + } + } + + .swatch:nth-child(7) { + background-color: var(--uchu-red-8); + color: var(--uchu-red-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-red-8) 0%, transparent 100%); + } + } + + .swatch:nth-child(8) { + background-color: var(--uchu-red-9); + color: var(--uchu-red-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-red-9) 0%, transparent 100%); + } + } + } + + &.yellow { + .info { + background-color: var(--uchu-yellow-1); + color: var(--uchu-yellow-9); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-yellow-2); + color: var(--uchu-yellow-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yellow-2) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-yellow-3); + color: var(--uchu-yellow-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yellow-3) 0%, transparent 100%); + } + } + + .swatch:nth-child(3) { + background-color: var(--uchu-yellow-4); + color: var(--uchu-yellow-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yellow-4) 0%, transparent 100%); + } + } + + .swatch:nth-child(4) { + background-color: var(--uchu-yellow-5); + color: var(--uchu-yellow-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yellow-5) 0%, transparent 100%); + } + } + + .swatch:nth-child(5) { + background-color: var(--uchu-yellow-6); + color: var(--uchu-yellow-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yellow-6) 0%, transparent 100%); + } + } + + .swatch:nth-child(6) { + background-color: var(--uchu-yellow-7); + color: var(--uchu-yellow-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yellow-7) 0%, transparent 100%); + } + } + + .swatch:nth-child(7) { + background-color: var(--uchu-yellow-8); + color: var(--uchu-yellow-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yellow-8) 0%, transparent 100%); + } + } + + .swatch:nth-child(8) { + background-color: var(--uchu-yellow-9); + color: var(--uchu-yellow-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yellow-9) 0%, transparent 100%); + } + } + } + + &.yin { + .info { + background-color: var(--uchu-yin-1); + color: var(--uchu-yin-9); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-yin-2); + color: var(--uchu-yin-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yin-2) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-yin-3); + color: var(--uchu-yin-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yin-3) 0%, transparent 100%); + } + } + + .swatch:nth-child(3) { + background-color: var(--uchu-yin-4); + color: var(--uchu-yin-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yin-4) 0%, transparent 100%); + } + } + + .swatch:nth-child(4) { + background-color: var(--uchu-yin-5); + color: var(--uchu-yin-9); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yin-5) 0%, transparent 100%); + } + } + + .swatch:nth-child(5) { + background-color: var(--uchu-yin-6); + color: var(--uchu-yin-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yin-6) 0%, transparent 100%); + } + } + + .swatch:nth-child(6) { + background-color: var(--uchu-yin-7); + color: var(--uchu-yin-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yin-7) 0%, transparent 100%); + } + } + + .swatch:nth-child(7) { + background-color: var(--uchu-yin-8); + color: var(--uchu-yin-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yin-8) 0%, transparent 100%); + } + } + + .swatch:nth-child(8) { + background-color: var(--uchu-yin-9); + color: var(--uchu-yin-1); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yin-9) 0%, transparent 100%); + } + } + } + } + + .notify { + background-color: oklch(var(--uchu-yin-9-raw) / 85%); + } + </style> + + <script src="./asset/script/shared.js"></script> + </head> + + <body> + <audio id="speak" preload> + <!--/ https://www.wordhippo.com/what-is/the/japanese-word-for-244fb75b19415c9ee4f143b34b4b241236fb63f5.html /--> + <source src="./asset/audio/pronounciation.ogg" type="audio/ogg"/> + <source src="./asset/audio/pronounciation.wav" type="audio/wav"/> + <source src="./asset/audio/pronounciation.mp3" type="audio/mp3"/> + </audio> + + <section class="intro"> + <h1 onclick="playAudio()" title="click to hear pronounciation">uchū</h1> + + <nav class="palette"> + <a class="gray" href="#uchu_gray"></a> + <a class="red" href="#uchu_red"></a> + <a class="pink" href="#uchu_pink"></a> + <a class="purple" href="#uchu_purple"></a> + <a class="blue" href="#uchu_blue"></a> + <a class="green" href="#uchu_green"></a> + <a class="yellow" href="#uchu_yellow"></a> + <a class="orange" href="#uchu_orange"></a> + </nav> + + <p>the color palette for internet lovers<br/>by <a href="https://webb.page?ref=uchu.style">NetOperator Wibby</a></p> + + <nav class="links"> + <a class="link" href="https://github.com/NeverCease/uchu" target="_blank">Repo</a> + <a class="link" href="./simple.html">Simple Palette</a> + </nav> + </section> + + <section class="gray" id="uchu_gray"> + <div class="info"> + <p>oklch(95.57% 0.003 286.35)</p> + <h2><span>var(</span>--uchu-gray-<span>#)</span></h2> + <h3>1</h3> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3>2</h3> + <p>oklch(92.04% 0.002 197.12)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(88.28% 0.003 286.34)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(84.68% 0.002 197.12)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(80.73% 0.002 247.84)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(75.03% 0.002 247.85)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(69.01% 0.003 286.32)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(63.12% 0.004 219.55)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(56.82% 0.004 247.89)</p> + </li> + </ul> + </section> + + <section class="red" id="uchu_red"> + <div class="info"> + <p>oklch(88.98% 0.052 3.28)</p> + <h2><span>var(</span>--uchu-red-<span>#)</span></h2> + <h3>1</h3> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3>2</h3> + <p>oklch(78.78% 0.109 4.54)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(69.86% 0.162 7.82)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(62.73% 0.209 12.37)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(58.63% 0.231 19.6)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(54.41% 0.214 19.06)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(49.95% 0.195 18.34)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(45.8% 0.177 17.7)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(41.17% 0.157 16.58)</p> + </li> + </ul> + </section> + + <section class="pink" id="uchu_pink"> + <div class="info"> + <p>oklch(95.8% 0.023 354.27)</p> + <h2><span>var(</span>--uchu-pink-<span>#)</span></h2> + <h3>1</h3> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3>2</h3> + <p>oklch(92.14% 0.046 352.31)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(88.9% 0.066 354.39)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(85.43% 0.09 354.1)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(82.23% 0.112 355.33)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(76.37% 0.101 355.37)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(70.23% 0.092 354.96)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(64.11% 0.084 353.91)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(57.68% 0.074 353.14)</p> + </li> + </ul> + </section> + + <section class="purple" id="uchu_purple"> + <div class="info"> + <p>oklch(89.1% 0.046 305.24)</p> + <h2><span>var(</span>--uchu-purple-<span>#)</span></h2> + <h3>1</h3> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3>2</h3> + <p>oklch(78.68% 0.091 305)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(68.5% 0.136 303.78)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(58.47% 0.181 302.06)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(49.39% 0.215 298.31)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(46.11% 0.198 298.4)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(42.77% 0.181 298.49)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(39.46% 0.164 298.29)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(36.01% 0.145 298.35)</p> + </li> + </ul> + </section> + + <section class="blue" id="uchu_blue"> + <div class="info"> + <p>oklch(89.66% 0.046 260.67)</p> + <h2><span>var(</span>--uchu-blue-<span>#)</span></h2> + <h3>1</h3> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3>2</h3> + <p>oklch(80.17% 0.091 258.88)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(70.94% 0.136 258.06)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(62.39% 0.181 258.33)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(54.87% 0.222 260.33)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(51.15% 0.204 260.17)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(47.36% 0.185 259.89)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(43.48% 0.17 260.2)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(39.53% 0.15 259.87)</p> + </li> + </ul> + </section> + + <section class="green" id="uchu_green"> + <div class="info"> + <p>oklch(93.96% 0.05 148.74)</p> + <h2><span>var(</span>--uchu-green-<span>#)</span></h2> + <h3>1</h3> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3>2</h3> + <p>oklch(88.77% 0.096 147.71)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(83.74% 0.139 146.57)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(79.33% 0.179 145.62)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(75.23% 0.209 144.64)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(70.03% 0.194 144.71)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(64.24% 0.175 144.92)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(58.83% 0.158 145.05)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(52.77% 0.138 145.41)</p> + </li> + </ul> + </section> + + <section class="yellow" id="uchu_yellow"> + <div class="info"> + <p>oklch(97.05% 0.039 91.2)</p> + <h2><span>var(</span>--uchu-yellow-<span>#)</span></h2> + <h3>1</h3> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3>2</h3> + <p>oklch(95% 0.07 92.39)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(92.76% 0.098 92.58)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(90.92% 0.125 92.56)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(89% 0.146 91.5)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(82.39% 0.133 91.5)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(75.84% 0.122 92.21)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(69.14% 0.109 91.04)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(62.29% 0.097 91.9)</p> + </li> + </ul> + </section> + + <section class="orange" id="uchu_orange"> + <div class="info"> + <p>oklch(93.83% 0.037 56.93)</p> + <h2><span>var(</span>--uchu-orange-<span>#)</span></h2> + <h3>1</h3> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3>2</h3> + <p>oklch(88.37% 0.07258208750520016 55.80328658240742)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(83.56% 0.10753627570574478 56.492594564236946)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(78.75% 0.14163582809066333 54.32911089172009)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(74.61% 0.171 51.56)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(69.33% 0.157 52.18)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(63.8% 0.142 52.1)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(58.28% 0.128 52.2)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(52.49% 0.113 51.98)</p> + </li> + </ul> + </section> + + <section class="yin" id="uchu_yin"> + <div class="info"> + <p>oklch(91.87% 0.003 264.54)</p> + <h2><span>var(</span>--uchu-yin-<span>#)</span></h2> + <h3>1</h3> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3>2</h3> + <p>oklch(84.61% 0.004 286.31)</p> + </li> + + <li class="swatch"> + <h3>3</h3> + <p>oklch(76.89% 0.004 247.87)</p> + </li> + + <li class="swatch"> + <h3>4</h3> + <p>oklch(69.17% 0.004 247.88)</p> + </li> + + <li class="swatch"> + <h3>5</h3> + <p>oklch(61.01% 0.005 271.34)</p> + </li> + + <li class="swatch"> + <h3>6</h3> + <p>oklch(52.79% 0.005 271.32)</p> + </li> + + <li class="swatch"> + <h3>7</h3> + <p>oklch(43.87% 0.005 271.3)</p> + </li> + + <li class="swatch"> + <h3>8</h3> + <p>oklch(35.02% 0.005 236.66)</p> + </li> + + <li class="swatch"> + <h3>9</h3> + <p>oklch(25.11% 0.006 258.36)</p> + </li> + </ul> + </section> + + <aside class="notify"> + <p>Color value added to clipboard</p> + </aside> + + <script> + const swatches = document.querySelectorAll([".info", ".swatch"]); + let notifierTimeout; + + swatches.forEach(swatch => { + swatch.addEventListener("click", () => { + const colorValue = swatch.getElementsByTagName("p")[0].textContent; + const notifier = document.querySelector(".notify"); + + notifier.classList.remove("active"); + + if (copyTextToClipboard(colorValue)) { + clearTimeout(notifierTimeout); + notifier.classList.add("active"); + + notifierTimeout = setTimeout(() => { + notifier.classList.remove("active"); + }, 1500); + } + }); + }); + </script> + </body> +</html> diff --git a/demo/simple.html b/demo/simple.html new file mode 100644 index 0000000..0936244 --- /dev/null +++ b/demo/simple.html @@ -0,0 +1,607 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"/> + + <meta name="description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/> + <meta name="referrer" content="strict-origin"/> + <meta name="theme-color" content="oklch(95.57% 0.003 286.35)"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + + <meta property="og:description" content="uchū is the color palette for internet lovers, by NetOperator Wibby."/> + <meta property="og:image:height" content="600"/> + <meta property="og:image:secure_url" content="./asset/image/og.png"/> + <meta property="og:image:type" content="image/png"/> + <meta property="og:image:width" content="1200"/> + <meta property="og:locale" content="en_US"/> + <meta property="og:site_name" content="uchū"/> + <meta property="og:title" content="uchū — the color palette for internet lovers"/> + <meta property="og:type" content="website"/> + <meta property="og:url" content="https://uchu.style"/> + + <title>uchū demo · simple palette</title> + + <link rel="canonical" href="https://uchu.style"/> + <link rel="icon" href="./favicon.svg"/> + + <link href="../definitions/style/color.css" rel="stylesheet"/> + <link href="./asset/style/shared.css?v=2025.02.19" rel="stylesheet"/> + + <style> + body { + background-color: var(--uchu-yang); + color: var(--uchu-yin); + } + + section { + a { + &:not([class]) { + &:not(:hover):not(:visited) { + color: var(--uchu-blue); + } + + &:not(:visited):hover { + color: var(--uchu-pink); + } + + &:not(:hover):visited { + color: var(--uchu-purple); + } + + &:hover:visited { + color: var(--uchu-blue); + } + } + } + + .swatches { + .swatch { + width: 50%; + + h3 { + padding: 0 2rem 2rem 2rem; + + @media (min-width: 901px) { + font-size: 3vw; + } + + @media (max-width: 900px) { + font-size: 2rem; + } + + span { + opacity: 0.3; + } + } + } + } + + &.blue { + .info { + background-color: var(--uchu-light-blue); + color: var(--uchu-blue); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-blue); + color: var(--uchu-dark-blue); + + p::after { + background-image: linear-gradient(to top, var(--uchu-blue) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-blue); + color: var(--uchu-light-blue); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-blue) 0%, transparent 100%); + } + } + } + + &.gray { + .info { + background-color: var(--uchu-light-gray); + color: var(--uchu-dark-gray); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-gray); + color: var(--uchu-dark-gray); + + p::after { + background-image: linear-gradient(to top, var(--uchu-gray) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-gray); + color: var(--uchu-light-gray); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-gray) 0%, transparent 100%); + } + } + } + + &.green { + .info { + background-color: var(--uchu-light-green); + color: var(--uchu-dark-green); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-green); + color: var(--uchu-dark-green); + + p::after { + background-image: linear-gradient(to top, var(--uchu-green) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-green); + color: var(--uchu-light-green); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-green) 0%, transparent 100%); + } + } + } + + &.intro { + .links { + .link { + &:first-of-type { + &:not(:hover) { + background-color: var(--uchu-yin); + color: var(--uchu-yang); + } + + &:hover { + background-color: var(--uchu-light-yin); + color: var(--uchu-yin); + } + } + + &:not(:first-of-type) { + color: var(--uchu-dark-pink); + + &:not(:hover) { + background-color: var(--uchu-pink); + } + + &:hover { + background-color: var(--uchu-light-pink); + } + } + } + } + + .palette { + a { + &.blue { + background-color: var(--uchu-blue); + } + + &.gray { + background-color: var(--uchu-gray); + } + + &.green { + background-color: var(--uchu-green); + } + + &.orange { + background-color: var(--uchu-orange); + } + + &.pink { + background-color: var(--uchu-pink); + } + + &.purple { + background-color: var(--uchu-purple); + } + + &.red { + background-color: var(--uchu-red); + } + + &.yellow { + background-color: var(--uchu-yellow); + } + } + } + } + + &.orange { + .info { + background-color: var(--uchu-light-orange); + color: var(--uchu-dark-orange); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-orange); + color: var(--uchu-dark-orange); + + p::after { + background-image: linear-gradient(to top, var(--uchu-orange) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-orange); + color: var(--uchu-light-orange); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-orange) 0%, transparent 100%); + } + } + } + + &.pink { + .info { + background-color: var(--uchu-light-pink); + color: var(--uchu-dark-pink); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-pink); + color: var(--uchu-dark-pink); + + p::after { + background-image: linear-gradient(to top, var(--uchu-pink) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-pink); + color: var(--uchu-light-pink); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-pink) 0%, transparent 100%); + } + } + } + + &.purple { + .info { + background-color: var(--uchu-light-purple); + color: var(--uchu-dark-purple); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-purple); + color: var(--uchu-dark-purple); + + p::after { + background-image: linear-gradient(to top, var(--uchu-purple) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-purple); + color: var(--uchu-light-purple); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-purple) 0%, transparent 100%); + } + } + } + + &.red { + .info { + background-color: var(--uchu-light-red); + color: var(--uchu-dark-red); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-red); + color: var(--uchu-dark-red); + + p::after { + background-image: linear-gradient(to top, var(--uchu-red) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-red); + color: var(--uchu-light-red); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-red) 0%, transparent 100%); + } + } + } + + &.yellow { + .info { + background-color: var(--uchu-light-yellow); + color: var(--uchu-dark-yellow); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-yellow); + color: var(--uchu-dark-yellow); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yellow) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-dark-yellow); + color: var(--uchu-light-yellow); + + p::after { + background-image: linear-gradient(to top, var(--uchu-dark-yellow) 0%, transparent 100%); + } + } + } + + &.yin { + .info { + background-color: var(--uchu-light-yin); + color: var(--uchu-yin); + } + + .swatch:nth-child(1) { + background-color: var(--uchu-yin); + color: var(--uchu-light-yin); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yin-2) 0%, transparent 100%); + } + } + + .swatch:nth-child(2) { + background-color: var(--uchu-yang); + color: var(--uchu-yin); + + p::after { + background-image: linear-gradient(to top, var(--uchu-yang) 0%, transparent 100%); + } + } + } + } + + .notify { + background-color: var(--uchu-yin); + } + </style> + + <script src="./asset/script/shared.js"></script> + </head> + + <body> + <audio id="speak" preload> + <!--/ https://www.wordhippo.com/what-is/the/japanese-word-for-244fb75b19415c9ee4f143b34b4b241236fb63f5.html /--> + <source src="./asset/audio/pronounciation.ogg" type="audio/ogg"/> + <source src="./asset/audio/pronounciation.wav" type="audio/wav"/> + <source src="./asset/audio/pronounciation.mp3" type="audio/mp3"/> + </audio> + + <section class="intro"> + <h1 onclick="playAudio()" title="click to hear pronounciation">uchū</h1> + + <nav class="palette"> + <a class="gray" href="#uchu_gray"></a> + <a class="red" href="#uchu_red"></a> + <a class="pink" href="#uchu_pink"></a> + <a class="purple" href="#uchu_purple"></a> + <a class="blue" href="#uchu_blue"></a> + <a class="green" href="#uchu_green"></a> + <a class="yellow" href="#uchu_yellow"></a> + <a class="orange" href="#uchu_orange"></a> + </nav> + + <p>the color palette for internet lovers<br/>by <a href="https://webb.page?ref=uchu.style">NetOperator Wibby</a></p> + + <nav class="links"> + <a class="link" href="https://github.com/NeverCease/uchu" target="_blank">Repo</a> + <a class="link" href="./index.html">Expanded Palette</a> + </nav> + </section> + + <section class="gray" id="uchu_gray"> + <div class="info"> + <p>oklch(95.57% 0.003 286.35)</p> + <h2><span>var(</span>--uchu-light-gray<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-gray<span>)</span></h3> + <p>oklch(84.68% 0.002 197.12)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-gray<span>)</span></h3> + <p>oklch(63.12% 0.004 219.55)</p> + </li> + </ul> + </section> + + <section class="red" id="uchu_red"> + <div class="info"> + <p>oklch(88.98% 0.052 3.28)</p> + <h2><span>var(</span>--uchu-light-red<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-red<span>)</span></h3> + <p>oklch(62.73% 0.209 12.37)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-red<span>)</span></h3> + <p>oklch(45.8% 0.177 17.7)</p> + </li> + </ul> + </section> + + <section class="pink" id="uchu_pink"> + <div class="info"> + <p>oklch(95.8% 0.023 354.27)</p> + <h2><span>var(</span>--uchu-light-pink<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-pink<span>)</span></h3> + <p>oklch(85.43% 0.09 354.1)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-pink<span>)</span></h3> + <p>oklch(64.11% 0.084 353.91)</p> + </li> + </ul> + </section> + + <section class="purple" id="uchu_purple"> + <div class="info"> + <p>oklch(89.1% 0.046 305.24)</p> + <h2><span>var(</span>--uchu-light-purple<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-purple<span>)</span></h3> + <p>oklch(58.47% 0.181 302.06)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-purple<span>)</span></h3> + <p>oklch(39.46% 0.164 298.29)</p> + </li> + </ul> + </section> + + <section class="blue" id="uchu_blue"> + <div class="info"> + <p>oklch(89.66% 0.046 260.67)</p> + <h2><span>var(</span>--uchu-light-blue<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-blue<span>)</span></h3> + <p>oklch(62.39% 0.181 258.33)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-blue<span>)</span></h3> + <p>oklch(43.48% 0.17 260.2)</p> + </li> + </ul> + </section> + + <section class="green" id="uchu_green"> + <div class="info"> + <p>oklch(93.96% 0.05 148.74)</p> + <h2><span>var(</span>--uchu-light-green<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-green<span>)</span></h3> + <p>oklch(79.33% 0.179 145.62)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-green<span>)</span></h3> + <p>oklch(58.83% 0.158 145.05)</p> + </li> + </ul> + </section> + + <section class="yellow" id="uchu_yellow"> + <div class="info"> + <p>oklch(97.05% 0.039 91.2)</p> + <h2><span>var(</span>--uchu-light-yellow<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-yellow<span>)</span></h3> + <p>oklch(90.92% 0.125 92.56)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-yellow<span>)</span></h3> + <p>oklch(69.14% 0.109 91.04)</p> + </li> + </ul> + </section> + + <section class="orange" id="uchu_orange"> + <div class="info"> + <p>oklch(93.83% 0.037 56.93)</p> + <h2><span>var(</span>--uchu-light-orange<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-orange<span>)</span></h3> + <p>oklch(78.75% 0.14163582809066333 54.32911089172009)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-dark-orange<span>)</span></h3> + <p>oklch(58.28% 0.128 52.2)</p> + </li> + </ul> + </section> + + <section class="yin" id="uchu_yin"> + <div class="info"> + <p>oklch(91.87% 0.003 264.54)</p> + <h2><span>var(</span>--uchu-light-yin<span>)</span></h2> + </div> + + <ul class="swatches"> + <li class="swatch"> + <h3><span>var(</span>--uchu-yin<span>)</span></h3> + <p>oklch(14.38% 0.007 256.88)</p> + </li> + + <li class="swatch"> + <h3><span>var(</span>--uchu-yang<span>)</span></h3> + <p>oklch(99.4% 0 0)</p> + </li> + </ul> + </section> + + <aside class="notify"> + <p>Color value added to clipboard</p> + </aside> + + <script> + const swatches = document.querySelectorAll([".info", ".swatch"]); + let notifierTimeout; + + swatches.forEach(swatch => { + swatch.addEventListener("click", () => { + const colorValue = swatch.getElementsByTagName("p")[0].textContent; + const notifier = document.querySelector(".notify"); + + notifier.classList.remove("active"); + + if (copyTextToClipboard(colorValue)) { + clearTimeout(notifierTimeout); + notifier.classList.add("active"); + + notifierTimeout = setTimeout(() => { + notifier.classList.remove("active"); + }, 1500); + } + }); + }); + </script> + </body> +</html> 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 |
