use generated palette

6 files changed, 74 insertions, 72 deletions

diff --git a/assets/css/buttons.page.css b/assets/css/buttons.page.css
index 99db1b2..99d0b34 100644
--- a/assets/css/buttons.page.css
+++ b/assets/css/buttons.page.css
@@ -33,7 +33,7 @@ main a {
 main a > .icon > div {
     width: 1em;
     height: 1em;
-    background-color: var(--fg);
+    background-color: var(--prismite-fg);
     mask-image: url("/assets/svg/external.svg");
     mask-size: cover;
 }
@@ -49,7 +49,7 @@ main a > img,
 
 main a > .icon,
 main a > .link {
-    --color: var(--bg);
+    --color: var(--prismite-bg);
     background-color: var(--color);
     position: absolute;
     transition: transform 0.4s var(--easing);
@@ -61,7 +61,7 @@ main a > .link {
     transform: translate(-50%, 100%);
     font-size: 0.8em;
     border-radius: var(--border-radius) var(--border-radius) 0 0;
-    border: var(--border) solid var(--border-width);
+    border: var(--prismite-border) solid var(--border-width);
     border-bottom: none;
     padding: var(--padding);
 }
@@ -72,7 +72,7 @@ main a > .icon {
     transform: translate(100%, -50%);
     padding: var(--padding-big);
     border-radius: var(--border-radius) 0 0 var(--border-radius);
-    border: var(--border) solid var(--border-width);
+    border: var(--prismite-border) solid var(--border-width);
     border-right: none;
 }
 
diff --git a/assets/css/colors.css b/assets/css/colors.css
new file mode 100644
index 0000000..4818eee
--- /dev/null
+++ b/assets/css/colors.css
@@ -0,0 +1 @@
+:root{--prismite-bg-high:#171c22;--prismite-bg-highest:#1d2228;--prismite-bg-low:#0c1116;--prismite-bg-lowest:#070c11;--prismite-bg:#12161c;--prismite-blue-bright:#abe4ff;--prismite-blue:#8bc3fc;--prismite-border:#323b46;--prismite-border-variant:#262f39;--prismite-cyan-bright:#8ef4e2;--prismite-cyan:#6dd3c2;--prismite-fg-high:#e8eff8;--prismite-fg-low:#a8afb7;--prismite-fg:#c8ced7;--prismite-green-bright:#abf3b3;--prismite-green:#8bd294;--prismite-orange-bright:#ffc08e;--prismite-orange:#ff9f6f;--prismite-pink-bright:#ffccd4;--prismite-pink:#e5acb4;--prismite-purple-bright:#e4d1ff;--prismite-purple:#c4b1f6;--prismite-red-bright:#ffb2a9;--prismite-red:#ff928a;--prismite-yellow-bright:#ffd278;--prismite-yellow:#ecb256;}:root{--prismite-bg-high:oklch(22.5% 0.01368 253.09);--prismite-bg-highest:oklch(25% 0.01368 253.09);--prismite-bg-low:oklch(17.5% 0.01368 253.09);--prismite-bg-lowest:oklch(15% 0.01368 253.09);--prismite-bg:oklch(20% 0.01368 253.09);--prismite-blue-bright:oklch(90% 0.09994 249.58);--prismite-blue:oklch(80% 0.09994 249.58);--prismite-border:oklch(35% 0.023 253.09);--prismite-border-variant:oklch(30% 0.023 253.09);--prismite-cyan-bright:oklch(90% 0.09919 181.49);--prismite-cyan:oklch(80% 0.09919 181.49);--prismite-fg-high:oklch(95% 0.01368 253.09);--prismite-fg-low:oklch(75% 0.01368 253.09);--prismite-fg:oklch(85% 0.01368 253.09);--prismite-green-bright:oklch(90% 0.11211 147.63);--prismite-green:oklch(80% 0.11211 147.63);--prismite-orange-bright:oklch(90% 0.139 45.216);--prismite-orange:oklch(80% 0.139 45.216);--prismite-pink-bright:oklch(90% 0.06662 9.2146);--prismite-pink:oklch(80% 0.06662 9.2146);--prismite-purple-bright:oklch(90% 0.09923 296.61);--prismite-purple:oklch(80% 0.09923 296.61);--prismite-red-bright:oklch(90% 0.15765 24.728);--prismite-red:oklch(80% 0.15765 24.728);--prismite-yellow-bright:oklch(90% 0.12758 76.402);--prismite-yellow:oklch(80% 0.12758 76.402);}
diff --git a/assets/css/content.css b/assets/css/content.css
index 925fed8..2cb5272 100644
--- a/assets/css/content.css
+++ b/assets/css/content.css
@@ -13,8 +13,8 @@ main a.volatile:visited {
 
 main a:focus,
 main a:hover {
-    background-color: var(--bg);
-    color: var(--yellow);
+    background-color: var(--prismite-bg);
+    color: var(--prismite-yellow);
 }
 
 main a:active {
@@ -26,16 +26,16 @@ main a:active {
 }
 
 a.anchor:link, a.anchor:visited {
-    color: var(--border);
+    color: var(--prismite-border);
 }
 
 a.anchor:focus,
 a.anchor:hover {
-    color: var(--yellow-bright);
+    color: var(--prismite-yellow-bright);
 }
 
 a.anchor:active {
-    color: var(--yellow);
+    color: var(--prismite-yellow);
 }
 
 .anchor::after {
@@ -53,13 +53,13 @@ h1, h2 {
 .anchor::before {
     content: "";
     height: var(--border-width);
-    background-color: var(--border);
+    background-color: var(--prismite-border);
 }
 
 h1::after, h2::after {
     content: "";
     height: var(--border-width);
-    background-color: var(--border);
+    background-color: var(--prismite-border);
     flex-grow: 1;
 }
 
@@ -78,7 +78,7 @@ main li {
 }
 
 main li::marker {
-    color: var(--border);
+    color: var(--prismite-border);
 }
 
 main ol,
@@ -104,8 +104,8 @@ code {
     /* padding-inline: calc(var(--padding) / 2); */
     padding-inline: var(--padding);
     font-family: "Aporetic Mono", monospace;
-    color: var(--fg);
-    background: var(--bg);
+    color: var(--prismite-fg);
+    background: var(--prismite-bg);
     overflow: auto;
     border-radius: var(--border-radius);
 }
@@ -115,7 +115,7 @@ pre > code {
     padding: var(--padding-big);
     position: relative;
     line-height: 1.3;
-    border: var(--border-width) solid var(--border);
+    border: var(--border-width) solid var(--prismite-border);
 }
 
 pre > code[data-lang]::after {
@@ -125,9 +125,9 @@ pre > code[data-lang]::after {
     right: 0;
     padding: var(--padding);
     border-radius: 0 var(--border-radius);
-    border-bottom: var(--border-width) solid var(--border);
-    border-left: var(--border-width) solid var(--border);
-    background-color: var(--bg-high);
+    border-bottom: var(--border-width) solid var(--prismite-border);
+    border-left: var(--border-width) solid var(--prismite-border);
+    background-color: var(--prismite-bg-high);
     transition: transform 0.2s var(--easing);
 }
 
@@ -137,7 +137,7 @@ pre > code[data-lang]:hover::after {
 
 aside {
     padding: var(--padding-big);
-    border: var(--border-width) solid var(--border);
+    border: var(--border-width) solid var(--prismite-border);
     border-radius: var(--border-radius);
     box-sizing: border-box;
     font-size: 0.9em;
@@ -166,12 +166,12 @@ aside::after {
 }
 
 aside::before {
-    border-bottom: var(--arrow-size) solid var(--border);
+    border-bottom: var(--arrow-size) solid var(--prismite-border);
     top: calc(var(--arrow-size) * -1);
 }
 
 aside::after {
-    border-bottom: var(--arrow-size) solid var(--yellow);
+    border-bottom: var(--arrow-size) solid var(--prismite-yellow);
     top: calc(var(--arrow-size) * -1 + var(--border-width));
 }
 
diff --git a/assets/css/deco.css b/assets/css/deco.css
index 66adce3..0646be2 100644
--- a/assets/css/deco.css
+++ b/assets/css/deco.css
@@ -28,7 +28,7 @@ nav .tab > a::after {
 
 nav .tab > a::before,
 nav .tab > a::after {
-    background-color: var(--bg-lowest);
+    background-color: var(--prismite-bg-lowest);
     transition: background-color 0.2s var(--easing);
     z-index: 2;
 }
diff --git a/assets/css/main.css b/assets/css/main.css
index 96dbe49..bfda4d4 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,35 +1,36 @@
 @import url("/assets/css/fonts.css");
+@import url("/assets/css/colors.css");
 
 :root {
-    --fg-low: oklch(70% 0.01368 253.09);
-    --fg: oklch(80% 0.01368 253.09);
-    --fg-high: oklch(90% 0.01368 253.09);
-
-    --bg-lowest: oklch(15% 0.01368 253.09);
-    --bg-low: oklch(17.5% 0.01368 253.09);
-    --bg: oklch(20% 0.01368 253.09);
-    --bg-high: oklch(22.5% 0.01368 253.09);
-    --bg-highest: oklch(25% 0.01368 253.09);
-
-    --border: oklch(35% 0.023 253.09);
-    --border-variant: oklch(30% 0.023 253.09);
-
-    --red: oklch(80% 0.15765 24.728);
-    --red-bright: oklch(90% 0.15765 24.728);
-    --orange: oklch(80% 0.139 45.216);
-    --orange-bright: oklch(90% 0.139 45.216);
-    --yellow: oklch(80% 0.12758 76.402);
-    --yellow-bright: oklch(90% 0.12758 76.402);
-    --green: oklch(80% 0.11211 147.63);
-    --green-bright: oklch(90% 0.11211 147.63);
-    --cyan: oklch(80% 0.09919 181.49);
-    --cyan-bright: oklch(90% 0.09919 181.49);
-    --blue: oklch(80% 0.09994 249.58);
-    --blue-bright: oklch(90% 0.09994 249.58);
-    --purple: oklch(80% 0.09923 296.61);
-    --purple-bright: oklch(90% 0.09923 296.61);
-    --pink: oklch(80% 0.06662 9.2146);
-    --pink-bright: oklch(90% 0.06662 9.2146);
+    /* --fg-low: oklch(70% 0.01368 253.09); */
+    /* --fg: oklch(80% 0.01368 253.09); */
+    /* --fg-high: oklch(90% 0.01368 253.09); */
+    /**/
+    /* --bg-lowest: oklch(15% 0.01368 253.09); */
+    /* --bg-low: oklch(17.5% 0.01368 253.09); */
+    /* --bg: oklch(20% 0.01368 253.09); */
+    /* --bg-high: oklch(22.5% 0.01368 253.09); */
+    /* --bg-highest: oklch(25% 0.01368 253.09); */
+    /**/
+    /* --border: oklch(35% 0.023 253.09); */
+    /* --border-variant: oklch(30% 0.023 253.09); */
+    /**/
+    /* --red: oklch(80% 0.15765 24.728); */
+    /* --red-bright: oklch(90% 0.15765 24.728); */
+    /* --orange: oklch(80% 0.139 45.216); */
+    /* --orange-bright: oklch(90% 0.139 45.216); */
+    /* --yellow: oklch(80% 0.12758 76.402); */
+    /* --yellow-bright: oklch(90% 0.12758 76.402); */
+    /* --green: oklch(80% 0.11211 147.63); */
+    /* --green-bright: oklch(90% 0.11211 147.63); */
+    /* --cyan: oklch(80% 0.09919 181.49); */
+    /* --cyan-bright: oklch(90% 0.09919 181.49); */
+    /* --blue: oklch(80% 0.09994 249.58); */
+    /* --blue-bright: oklch(90% 0.09994 249.58); */
+    /* --purple: oklch(80% 0.09923 296.61); */
+    /* --purple-bright: oklch(90% 0.09923 296.61); */
+    /* --pink: oklch(80% 0.06662 9.2146); */
+    /* --pink-bright: oklch(90% 0.06662 9.2146); */
 
     --border-radius: 5px;
     --border-radius-big: calc(var(--border-radius) * 4);
@@ -42,7 +43,7 @@
 
 body {
     font-family: "Aporetic", "Aporetic Fallback";
-    background-color: var(--bg-lowest);
+    background-color: var(--prismite-bg-lowest);
     background-repeat: repeat;
     color: var(--bg);
     display: flex;
@@ -82,7 +83,7 @@ body {
 }
 
 .subtle {
-    color: var(--fg-low);
+    color: var(--prismite-fg-low);
 }
 
 main {
@@ -92,7 +93,7 @@ main {
     display: flex;
     justify-content: center;
     box-sizing: border-box;
-    background-color: var(--yellow);
+    background-color: var(--prismite-yellow);
     border-radius: var(--border-radius-big);
     overflow: hidden;
     text-wrap: pretty;
@@ -117,9 +118,9 @@ nav > ul {
 }
 
 nav .tab {
-    --color: var(--bg);
+    --color: var(--prismite-bg);
     display: block;
-    color: var(--fg);
+    color: var(--prismite-fg);
     border-radius: var(--border-radius) var(--border-radius) 0 0;
     background-color: var(--color);
     position: relative;
@@ -131,12 +132,12 @@ nav .tab:not(.active) {
 }
 
 nav .tab:hover {
-    --color: var(--bg-high);
+    --color: var(--prismite-bg-high);
 }
 
 nav .tab.active {
-    --color: var(--yellow);
-    color: var(--bg);
+    --color: var(--prismite-yellow);
+    color: var(--prismite-bg);
 }
 
 nav .tab > a {
@@ -150,7 +151,7 @@ nav .tab > a {
 
 nav .tab > a:focus-visible {
     border-radius: var(--border-radius) var(--border-radius) 0 0;
-    outline: var(--blue) solid calc(var(--border-radius) + 1px);
+    outline: var(--prismite-blue) solid calc(var(--border-radius) + 1px);
     outline-offset: 0;
 }
 
@@ -174,12 +175,12 @@ nav .tab > a > div {
 
 footer {
     text-align: center;
-    color: var(--fg);
+    color: var(--prismite-fg);
     border-radius: var(--border-radius-big) var(--border-radius-big) 0 0;
     padding: var(--padding-big);
     font-size: 0.8em;
     position: relative;
-    background-color: var(--bg-lowest);
+    background-color: var(--prismite-bg-lowest);
     z-index: 3;
 }
 
@@ -195,7 +196,7 @@ footer > div > div {
 
 footer > div > div > span:not(:last-of-type)::after {
     content: "";
-    border-left: calc(var(--border-width) * 1) solid var(--border);
+    border-left: calc(var(--border-width) * 1) solid var(--prismite-border);
     margin-left: var(--padding);
     margin-right: var(--padding);
     display: inline-block;
@@ -204,12 +205,12 @@ footer > div > div > span:not(:last-of-type)::after {
 }
 
 footer a {
-    color: var(--fg);
+    color: var(--prismite-fg);
 }
 
 footer a:hover,
 footer a:focus {
-    color: var(--yellow);
+    color: var(--prismite-yellow);
 }
 
 main a {
diff --git a/assets/css/prismite.page.css b/assets/css/prismite.page.css
index 2eb7b9c..a0a0fab 100644
--- a/assets/css/prismite.page.css
+++ b/assets/css/prismite.page.css
@@ -1,15 +1,15 @@
 main {
-    background-color: var(--bg);
-    color: var(--fg);
+    background-color: var(--prismite-bg);
+    color: var(--prismite-fg);
 }
 
 nav .tab {
-    --color: var(--bg-low);
+    --color: var(--prismite-bg-low);
 }
 
 nav .tab.active {
-    --color: var(--bg);
-    color: var(--fg);
+    --color: var(--prismite-bg);
+    color: var(--prismite-fg);
 }
 
 #triangles {
@@ -31,7 +31,7 @@ nav .tab.active {
 }
 
 #color_showcase {
-    color: var(--bg);
+    color: var(--prismite-bg);
     margin-top: var(--padding-big);
     max-width: 100%;
     display: flex;
@@ -78,7 +78,7 @@ nav .tab.active {
 }
 
 .fg-light {
-    color: var(--fg);
+    color: var(--prismite-fg);
 }
 
 main > div > h2 {