[code] used css var

public/proton-color.css

@@ -0,0 +1,92 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Photon Colors CSS Variables v3.2.0 */
+
+:root {
+    --magenta-50: #ff1ad9;
+    --magenta-60: #ed00b5;
+    --magenta-70: #b5007f;
+    --magenta-80: #7d004f;
+    --magenta-90: #440027;
+  
+    --purple-30: #c069ff;
+    --purple-40: #ad3bff;
+    --purple-50: #9400ff;
+    --purple-60: #8000d7;
+    --purple-70: #6200a4;
+    --purple-80: #440071;
+    --purple-90: #25003e;
+  
+    --blue-40: #45a1ff;
+    --blue-50: #0a84ff;
+    --blue-50-a30: rgba(10, 132, 255, 0.3);
+    --blue-60: #0060df;
+    --blue-70: #003eaa;
+    --blue-80: #002275;
+    --blue-90: #000f40;
+  
+    --teal-50: #00feff;
+    --teal-60: #00c8d7;
+    --teal-70: #008ea4;
+    --teal-80: #005a71;
+    --teal-90: #002d3e;
+  
+    --green-50: #30e60b;
+    --green-60: #12bc00;
+    --green-70: #058b00;
+    --green-80: #006504;
+    --green-90: #003706;
+  
+    --yellow-50: #ffe900;
+    --yellow-60: #d7b600;
+    --yellow-70: #a47f00;
+    --yellow-80: #715100;
+    --yellow-90: #3e2800;
+  
+    --red-50: #ff0039;
+    --red-60: #d70022;
+    --red-70: #a4000f;
+    --red-80: #5a0002;
+    --red-90: #3e0200;
+  
+    --orange-50: #ff9400;
+    --orange-60: #d76e00;
+    --orange-70: #a44900;
+    --orange-80: #712b00;
+    --orange-90: #3e1300;
+  
+    --grey-10: #f9f9fa;
+    --grey-10-a10: rgba(249, 249, 250, 0.1);
+    --grey-10-a20: rgba(249, 249, 250, 0.2);
+    --grey-10-a40: rgba(249, 249, 250, 0.4);
+    --grey-10-a60: rgba(249, 249, 250, 0.6);
+    --grey-10-a80: rgba(249, 249, 250, 0.8);
+    --grey-20: #ededf0;
+    --grey-30: #d7d7db;
+    --grey-40: #b1b1b3;
+    --grey-50: #737373;
+    --grey-60: #4a4a4f;
+    --grey-70: #38383d;
+    --grey-80: #2a2a2e;
+    --grey-90: #0c0c0d;
+    --grey-90-a05: rgba(12, 12, 13, 0.05);
+    --grey-90-a10: rgba(12, 12, 13, 0.1);
+    --grey-90-a20: rgba(12, 12, 13, 0.2);
+    --grey-90-a30: rgba(12, 12, 13, 0.3);
+    --grey-90-a40: rgba(12, 12, 13, 0.4);
+    --grey-90-a50: rgba(12, 12, 13, 0.5);
+    --grey-90-a60: rgba(12, 12, 13, 0.6);
+    --grey-90-a70: rgba(12, 12, 13, 0.7);
+    --grey-90-a80: rgba(12, 12, 13, 0.8);
+    --grey-90-a90: rgba(12, 12, 13, 0.9);
+  
+    --ink-70: #363959;
+    --ink-80: #202340;
+    --ink-90: #0f1126;
+  
+    --white-100: #ffffff;
+  
+  }
+  

public/style.css

@@ -1,3 +1,5 @@
+@import 'proton-color.css';
+
 body {
     font-family: sans-serif;
     margin: 0;
@@ -9,7 +11,7 @@ textarea {
 }
 
 input[type=checkbox] {
-    background-color: #fcd363;
+    background-color: var(--yellow-50);
 }
 
 button,
@@ -17,45 +19,45 @@ input[type=button] {
     border: none;
     padding: 10px 8px 10px 8px;
     min-width: 132px;
-    background-color: #0060df;
+    background-color: var(--blue-60);
     color: #fff;
     border-radius: 5px;
 }
 
 button:hover,
 input[type=button]:hover {
-    background-color: #003eaa;
+    background-color: var(--blue-70);
 }
 
 button:active,
 input[type=button]:active {
-    background-color: #002275;
+    background-color: var(--blue-80);
 }
 
 button:focus,
 input[type=button]:focus,
 button:focus-visible,
 input[type=button]:focus-visible {
-    box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
+    box-shadow: 0 0 0 1px var(--blue-50) inset, 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30);
 }
 
 a {
-    color: #0060df;
+    color: var(--blue-60);
 }
 
 a:hover {
     text-decoration: underline;
-    text-decoration-color: #0060df;
+    text-decoration-color: var(--blue-60);
 }
 
 a:active {
-    color: #003eaa;
+    color: var(--blue-70);
     text-decoration: underline;
-    text-decoration-color: #003eaa;
+    text-decoration-color: var(--blue-70);
 }
 
 a:focus {
-    box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
+    box-shadow: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30);
 }
 
 pre {
@@ -64,7 +66,7 @@ pre {
 
 .note {
     margin-right: 5px;
-    color: #737373;
+    color: var(--grey-50);
 }
 
 #message {
@@ -74,7 +76,7 @@ pre {
     padding: 20px;
     height: 70vh;
     width: calc(100vw - 20px);
-    color: #38383d;
+    color: var(--grey-70);
     font-family: 'Fira Code', Consolas, monospace;
     overflow-y: scroll;
     word-wrap: break-word;
@@ -113,7 +115,7 @@ pre {
 
 .msg-content {
     font-weight: 400;
-    color: #737373;
+    color: var(--grey-50);
 }
 
 .msg-content > *:first-child {
@@ -126,17 +128,17 @@ pre {
 
 .msg-private::after {
     content: " PRIVATE";
-    color: #ff9400;
+    color: var(--orange-50);
 }
 
 .msg-from {
     font-weight: 600;
-    color: #0c0c0d;
+    color: var(--grey-90);
 }
 
 .msg-time {
     font-weight: 400;
-    color: #b1b1b3;
+    color: var(--grey-40);
 }
 
 .msg-from::before {
@@ -144,11 +146,11 @@ pre {
 }
 
 .msg-from-info {
-    color: #0a84ff;
+    color: var(--blue-50);
 }
 
 .msg-from-cb {
-    color: #0c0c0d;
+    color: var(--grey-90);
 }
 
 #prompt-box {
@@ -184,16 +186,16 @@ pre {
     margin: 0 auto;
     border-radius: 5px;
     padding: 8px;
-    color: #0c0c0d;
+    color: var(--grey-90);
     border: none;
     display: block;
     font-size: 15px;
-    border: rgba(12, 12, 13, 0.2) 1px solid;
+    border: var(--grey-90-a20) 1px solid;
 }
 
 #prompt-data:focus {
-    border: #0a84ff 2px solid;
+    border: var(--blue-50) 2px solid;
-    box-shadow: 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
+    box-shadow: 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30);
 }
 
 #prompt-background {