refactor(style.css): use new palette

src/judas_server/web/static/css/palette.css

@@ -0,0 +1,80 @@
+:root {
+  --ctp-rosewater: #f5e0dc;
+  --ctp-rosewater-rgb: 245 224 220;
+  --ctp-rosewater-hsl: 9.600 55.556% 91.176%;
+  --ctp-flamingo: #f2cdcd;
+  --ctp-flamingo-rgb: 242 205 205;
+  --ctp-flamingo-hsl: 0.000 58.730% 87.647%;
+  --ctp-pink: #f5c2e7;
+  --ctp-pink-rgb: 245 194 231;
+  --ctp-pink-hsl: 316.471 71.831% 86.078%;
+  --ctp-mauve: #cba6f7;
+  --ctp-mauve-rgb: 203 166 247;
+  --ctp-mauve-hsl: 267.407 83.505% 80.980%;
+  --ctp-red: #f38ba8;
+  --ctp-red-rgb: 243 139 168;
+  --ctp-red-hsl: 343.269 81.250% 74.902%;
+  --ctp-maroon: #eba0ac;
+  --ctp-maroon-rgb: 235 160 172;
+  --ctp-maroon-hsl: 350.400 65.217% 77.451%;
+  --ctp-peach: #fab387;
+  --ctp-peach-rgb: 250 179 135;
+  --ctp-peach-hsl: 22.957 92.000% 75.490%;
+  --ctp-yellow: #f9e2af;
+  --ctp-yellow-rgb: 249 226 175;
+  --ctp-yellow-hsl: 41.351 86.047% 83.137%;
+  --ctp-green: #a6e3a1;
+  --ctp-green-rgb: 166 227 161;
+  --ctp-green-hsl: 115.455 54.098% 76.078%;
+  --ctp-teal: #94e2d5;
+  --ctp-teal-rgb: 148 226 213;
+  --ctp-teal-hsl: 170.000 57.353% 73.333%;
+  --ctp-sky: #89dceb;
+  --ctp-sky-rgb: 137 220 235;
+  --ctp-sky-hsl: 189.184 71.014% 72.941%;
+  --ctp-sapphire: #74c7ec;
+  --ctp-sapphire-rgb: 116 199 236;
+  --ctp-sapphire-hsl: 198.500 75.949% 69.020%;
+  --ctp-blue: #89b4fa;
+  --ctp-blue-rgb: 137 180 250;
+  --ctp-blue-hsl: 217.168 91.870% 75.882%;
+  --ctp-lavender: #b4befe;
+  --ctp-lavender-rgb: 180 190 254;
+  --ctp-lavender-hsl: 231.892 97.368% 85.098%;
+  --ctp-text: #cdd6f4;
+  --ctp-text-rgb: 205 214 244;
+  --ctp-text-hsl: 226.154 63.934% 88.039%;
+  --ctp-subtext1: #bac2de;
+  --ctp-subtext1-rgb: 186 194 222;
+  --ctp-subtext1-hsl: 226.667 35.294% 80.000%;
+  --ctp-subtext0: #a6adc8;
+  --ctp-subtext0-rgb: 166 173 200;
+  --ctp-subtext0-hsl: 227.647 23.611% 71.765%;
+  --ctp-overlay2: #9399b2;
+  --ctp-overlay2-rgb: 147 153 178;
+  --ctp-overlay2-hsl: 228.387 16.757% 63.725%;
+  --ctp-overlay1: #7f849c;
+  --ctp-overlay1-rgb: 127 132 156;
+  --ctp-overlay1-hsl: 229.655 12.775% 55.490%;
+  --ctp-overlay0: #6c7086;
+  --ctp-overlay0-rgb: 108 112 134;
+  --ctp-overlay0-hsl: 230.769 10.744% 47.451%;
+  --ctp-surface2: #585b70;
+  --ctp-surface2-rgb: 88 91 112;
+  --ctp-surface2-hsl: 232.500 12.000% 39.216%;
+  --ctp-surface1: #45475a;
+  --ctp-surface1-rgb: 69 71 90;
+  --ctp-surface1-hsl: 234.286 13.208% 31.176%;
+  --ctp-surface0: #313244;
+  --ctp-surface0-rgb: 49 50 68;
+  --ctp-surface0-hsl: 236.842 16.239% 22.941%;
+  --ctp-base: #1e1e2e;
+  --ctp-base-rgb: 30 30 46;
+  --ctp-base-hsl: 240.000 21.053% 14.902%;
+  --ctp-mantle: #181825;
+  --ctp-mantle-rgb: 24 24 37;
+  --ctp-mantle-hsl: 240.000 21.311% 11.961%;
+  --ctp-crust: #11111b;
+  --ctp-crust-rgb: 17 17 27;
+  --ctp-crust-hsl: 240.000 22.727% 8.627%;
+}

src/judas_server/web/static/css/style.css

@@ -1,22 +1,4 @@
-:root {
+@import "palette.css";
-    --nord-bg0: #2e3440;
-    --nord-bg1: #3b4252;
-    --nord-bg2: #434c5e;
-    --nord-bg3: #4c566a;
-    --nord-fg0: #eceff4;
-    --nord-fg1: #e5e9f0;
-    --nord-fg2: #d8dee9;
-    --nord-acc0: #8fbcbb;
-    --nord-acc1: #88c0d0;
-    --nord-acc2: #81a1c1;
-    --nord-acc3: #5e81ac;
-    --nord-aur0: #bf616a;
-    --nord-aur1: #d08770;
-    --nord-aur2: #ebcb8b;
-    --nord-aur3: #a3be8c;
-    --nord-aur4: #b48ead;
-
-}
 
 * {
     margin: 0;
@@ -25,22 +7,22 @@
 }
 
 body {
-    background-color: var(--nord-aur4);
+    background-color: var(--ctp-base);
     font-family: monospace, sans-serif !important;
-    color: var(--nord-fg0);
+    color: var(--ctp-text);
 }
 
 input {
     font-family: inherit;
     color: #eceff4;
-    background-color: var(--nord-bg2);
+    background-color: var(--ctp-crust);
     border: none;
     border-radius: 0.25rem;
     padding: 0.25rem;
 }
 
 a {
-    color: var(--nord-acc0);
+    color: var(--ctp-blue);
     text-decoration: none;
 }
 
@@ -54,8 +36,8 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: var(--nord-bg0);
+    background-color: var(--ctp-mantle);
-    color: var(--nord-fg0);
+    /* color: var(--ctp-text); */
     padding: 1rem;
 }
 
@@ -64,34 +46,34 @@ main {
     flex-direction: column;
     gap: 1rem;
     padding: 1rem;
-    background-color: var(--nord-bg1);
+    /* background-color: var(--ctp-base); */
     flex-grow: 1;
     text-align: center;
 }
 
 header a {
     text-decoration: none;
-    color: var(--nord-fg0);
+    /* color: var(--nord-fg0); */
 }
 
 .button {
     display: inline-block;
     padding: 0.5rem 1rem;
-    background-color: var(--nord-acc0);
+    background-color: var(--ctp-lavender);
-    color: var(--nord-bg0);
+    color: var(--ctp-base);
     border: none;
     border-radius: 0.25rem;
     text-decoration: none;
     transition: 0.3s ease-in-out;
 }
 
-.button a:hover {
+/* .button a:hover { */
-    color: var(--nord-bg0);
+/*     color: var(--nord-bg0); */
-    text-decoration: none;
+/*     text-decoration: none; */
-}
+/* } */
 
 .button:hover {
-    background-color: var(--nord-acc2);
+    background-color: var(--ctp-mauve);
     cursor: pointer;
 }
 
@@ -106,9 +88,9 @@ header a {
     justify-content: center;
     margin: 1rem;
     padding: 1rem;
-    background-color: var(--nord-aur0);
+    background-color: var(--ctp-surface0);
-    color: var(--nord-fg0);
+    color: var(--ctp-red);
-    border: 6px solid var(--nord-aur1);
+    border: 6px solid var(--ctp-red);
     border-radius: 24px;
 }
 
@@ -119,7 +101,7 @@ header a {
 
 .select-table {
     border-collapse: collapse;
-    border: 2px solid var(--nord-fg0);
+    border: 2px solid var(--ctp-surface0);
 }
 
 .select-table thead {
@@ -131,18 +113,18 @@ header a {
 .select-table th, .select-table td {
     padding: 0.5rem;
     text-align: center;
-    border: 1px solid var(--nord-fg1);
+    border: 1px solid var(--ctp-surface0);
     border-collapse: collapse;
 }
 
 .select-table th {
-    background-color: var(--nord-bg2);
+    background-color: var(--ctp-surface1);
     color: var(--nord-fg0);
 }
 
 .select-table a {
     display: block;
-    color: var(--nord-acc0);
+    /* color: var(--nord-acc0); */
     text-decoration: none;
     transition: 0.1s ease-in-out;
 }
@@ -152,23 +134,23 @@ header a {
 }
 
 .select-table tr:hover {
-    background-color: var(--nord-acc1);
+    background-color: var(--ctp-surface0);
 }
 
 .select-table tr:hover a {
-    color: var(--nord-bg0);
+    color: var(--ctp-base);
 }
 
 .red-bg {
-    background-color: var(--nord-aur0);
+    background-color: var(--ctp-red);
 }
 
 .yellow-bg {
-    background-color: var(--nord-aur2);
+    background-color: var(--ctp-yellow);
 }
 
 .green-bg {
-    background-color: var(--nord-aur3);
+    background-color: var(--ctp-green);
 }
 
 .button-container {
@@ -183,24 +165,24 @@ header a {
 }
 
 .link:hover {
-    color: var(--nord-acc2);
+    color: var(--ctp-blue);
 }
 
 .details-table tr td:first-child {
     font-weight: 900;
-    background-color: var(--nord-bg3);
+    background-color: var(--ctp-surface0);
     white-space: nowrap;
     width: 1%;
 }
 
 .details-table {
     border-collapse: collapse;
-    border: 2px solid var(--nord-fg0);
+    border: 2px solid var(--ctp-surface1);
 }
 
 .details-table th, .details-table td {
     padding: 0.5rem;
     text-align: left;
-    border: 1px solid var(--nord-fg1);
+    border: 1px solid var(--ctp-text);
     border-collapse: collapse;
 }