Hckrnws: updated globals.css

copy/globals.css

@@ -58,7 +58,7 @@ code,
 kbd,
 pre,
 samp {
-  font-family: monospace;
+  font-family: Verdana, Geneva, sans-serif;
   font-size:1em
 }
 small {
@@ -582,7 +582,7 @@ video {
   text-align:center
 }
 .font-mono {
-  font-family: monospace;
+  font-family: Verdana, Geneva, sans-serif;
 }
 .font-sans {
   font-family: Verdana, Geneva, sans-serif;
@@ -678,68 +678,60 @@ button {
   padding-right:1rem;
   color:var(--color-text-tertiary)
 }
-/* App Themes */
+[data-theme=light] {
-
+  --color-text-primary: #0F0F0F; /* 500 */
-[data-theme="light"] {
+  --color-text-secondary: #0F0F0F; /* 300 */
-  --color-text-primary: #1C1B1A; /* 950 (dark gray) */
+  --color-text-tertiary: #737373; /* 700 */
-  --color-text-secondary: #1C1B1A; /* 950 (dark gray) */
+  --color-text-code: #8B8B8B; /* 500 */
-  --color-text-tertiary: #CECDC3; /* 200 (light gray) */
+  --color-text-icon: #A1A1AA; /* Adjusted for neutral gray */
-  --color-text-code: #100F0F; /* black */
+  --color-text-btn: #F2F2F2; /* 50 */
-  --color-text-icon: #403E3C; /* 800 (dark gray) */
+  --color-text-link: #4385BE; /* Blue light color */
-  --color-text-btn: #F0F0F0; /* modified to a pure light gray */
+  --color-bg-primary: #F2F2F2; /* 50 */
-  --color-text-link: #4385BE; /* blue */
+  --color-bg-secondary: #E6E6E6; /* 100 */
-
+  --color-bg-tertiary: #DADADA; /* 150 */
-  --color-bg-primary: #F0F0F0; /* modified to a pure light gray (formerly paper) */
+  --color-bg-hover: #E6E6E6; /* 100 */
-  --color-bg-secondary: #E0E0E0; /* modified to a more neutral light gray */
+  --color-bg-tooltip: #F5F5F5; /* Slightly darker than paper */
-  --color-bg-tertiary: #D0D0D0; /* modified to a very light gray */
+  --color-bg-code: #D0D0D0; /* Adjusted for neutral gray */
-  --color-bg-hover: #E0E0E0; /* modified (similar to secondary) */
+  --color-bg-op: #DADADA; /* 150 */
-  --color-bg-tooltip: #F2F2F2; /* adjusted for a neutral light gray */
+  --color-bg-btn: #8B8B8B; /* 500 */
-  --color-bg-code: #CECDC3; /* 200 (light gray) */
+  --color-border-primary: #CECECE; /* 200 */
-  --color-bg-op: #D0A215; /* still yellow but usually used in context */
+  --color-border-secondary: #B7B7B7; /* 300 */
-  --color-bg-btn: #100F0F; /* black */
-
-  --color-border-primary: #B7B5AC; /* 300 (light gray) */
-  --color-border-secondary: #878580; /* 500 (medium gray) */
 }
 
-[data-theme="dark"] {
+[data-theme=dark] {
-  --color-text-primary: #E0E0E0; /* modified to a light gray (formerly paper) */
+  --color-text-primary: #F2F2F2; /* 50 */
-  --color-text-secondary: #B7B5AC; /* 300 (medium gray) */
+  --color-text-secondary: #CFCFCF; /* 200 */
-  --color-text-tertiary: #CECDC3; /* 200 (light gray) */
+  --color-text-tertiary: #B7B7B7; /* 300 */
-  --color-text-code: #E0E0E0; /* modified to a light gray (formerly paper) */
+  --color-text-code: #F2F2F2; /* 50 */
-  --color-text-icon: #6F6E69; /* 600 (dark gray) */
+  --color-text-icon: #7E7E7E; /* Adjusted for neutrality */
-  --color-text-btn: #100F0F; /* black */
+  --color-text-btn: #8B8B8B; /* 500 */
-  --color-text-link: #4385BE; /* blue */
+  --color-text-link: #205EA6; /* Blue light color */
-
+  --color-bg-primary: #0F0F0F; /* 950 */
-  --color-bg-primary: #100F0F; /* black */
+  --color-bg-secondary: #404040; /* 900 */
-  --color-bg-secondary: #1C1B1A; /* 950 (dark gray) */
+  --color-bg-tertiary: #737373; /* 700 */
-  --color-bg-tertiary: #282726; /* 900 (dark gray) */
+  --color-bg-hover: #494949; /* 850 */
-  --color-bg-hover: #181818; /* darkened color for hover */
+  --color-bg-tooltip: #1A1A1A; /* Adjusted for neutrality */
-  --color-bg-tooltip: #1A1A1A; /* dark gray */
+  --color-bg-code: #404040; /* 900 */
-  --color-bg-code: #403E3C; /* 800 (dark gray) */
+  --color-bg-op: #205EA6;
-  --color-bg-op: #5E409D; /* purple */
+  --color-bg-btn: #F2F2F2; /* 50 */
-  --color-bg-btn: #E0E0E0; /* modified to a light gray (formerly paper) */
+  --color-border-primary: #2B2B2B; /* Adjusted for neutrality */
-
+  --color-border-secondary: #737373; /* 700 */
-  --color-border-primary: #1C1B1A; /* 950 (dark gray) */
-  --color-border-secondary: #343331; /* 850 (dark gray) */
 }
 
-[data-theme="andromeda"] {
+[data-theme=andromeda] {
-  --color-text-primary: #100F0F; /* black */
+  --color-text-primary: #FFFFFF; /* White */
-  --color-text-secondary: #A5ABA8; /* still using adapted gray */
+  --color-text-secondary: #B7B7B7; /* 300 */
-  --color-text-tertiary: #AEABB1; /* still using adapted gray */
+  --color-text-tertiary: #D0D0D0; /* Adjusted for neutrality */
-  --color-text-code: #E0E0E0; /* light gray */
+  --color-text-code: #FFFFFF; /* White */
-  --color-text-icon: #403E3C; /* 800 (dark gray) */
+  --color-text-icon: #7E7E7E; /* Adjusted for neutrality */
-
+  --color-bg-primary: #1C1C1C; /* 950 */
-  --color-bg-primary: #100F0F; /* black */
+  --color-bg-secondary: #404040; /* 900 */
-  --color-bg-secondary: #282726; /* 900 (dark gray) */
+  --color-bg-tertiary: #272727; /* Adjusted for neutrality */
-  --color-bg-tertiary: #343331; /* 850 (dark gray) */
+  --color-bg-hover: #303030; /* New neutral gray */
-  --color-bg-hover: #262930; /* darkened for hover */
+  --color-bg-code: #1C1C1C; /* 950 */
-  --color-bg-code: #1E2025; /* blackish tone for the code */
+  --color-bg-tooltip: #1A1A1A; /* Adjusted for neutrality */
-  --color-bg-tooltip: #1A1A1A; /* dark gray */
+  --color-border-primary: #2B2B2B; /* Adjusted for neutrality */
-
+  --color-border-secondary: #3C3C3C; /* Adjusted for neutrality */
-  --color-border-primary: #2B2E37; /* adapted */
-  --color-border-secondary: #24262D; /* adapted */
 }
 .hover\:border-secondary:hover {
   border-color:var(--color-border-secondary)