diff --git a/copy/globals.css b/copy/globals.css index 31e3fb8..6704dfe 100644 --- a/copy/globals.css +++ b/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: #1C1B1A; /* 950 (dark gray) */ - --color-text-secondary: #1C1B1A; /* 950 (dark gray) */ - --color-text-tertiary: #CECDC3; /* 200 (light gray) */ - --color-text-code: #100F0F; /* black */ - --color-text-icon: #403E3C; /* 800 (dark gray) */ - --color-text-btn: #F0F0F0; /* modified to a pure light gray */ - --color-text-link: #4385BE; /* blue */ - - --color-bg-primary: #F0F0F0; /* modified to a pure light gray (formerly paper) */ - --color-bg-secondary: #E0E0E0; /* modified to a more neutral light gray */ - --color-bg-tertiary: #D0D0D0; /* modified to a very light gray */ - --color-bg-hover: #E0E0E0; /* modified (similar to secondary) */ - --color-bg-tooltip: #F2F2F2; /* adjusted for a neutral light gray */ - --color-bg-code: #CECDC3; /* 200 (light gray) */ - --color-bg-op: #D0A215; /* still yellow but usually used in context */ - --color-bg-btn: #100F0F; /* black */ - - --color-border-primary: #B7B5AC; /* 300 (light gray) */ - --color-border-secondary: #878580; /* 500 (medium gray) */ +[data-theme=light] { + --color-text-primary: #0F0F0F; /* 500 */ + --color-text-secondary: #0F0F0F; /* 300 */ + --color-text-tertiary: #737373; /* 700 */ + --color-text-code: #8B8B8B; /* 500 */ + --color-text-icon: #A1A1AA; /* Adjusted for neutral gray */ + --color-text-btn: #F2F2F2; /* 50 */ + --color-text-link: #4385BE; /* Blue light color */ + --color-bg-primary: #F2F2F2; /* 50 */ + --color-bg-secondary: #E6E6E6; /* 100 */ + --color-bg-tertiary: #DADADA; /* 150 */ + --color-bg-hover: #E6E6E6; /* 100 */ + --color-bg-tooltip: #F5F5F5; /* Slightly darker than paper */ + --color-bg-code: #D0D0D0; /* Adjusted for neutral gray */ + --color-bg-op: #DADADA; /* 150 */ + --color-bg-btn: #8B8B8B; /* 500 */ + --color-border-primary: #CECECE; /* 200 */ + --color-border-secondary: #B7B7B7; /* 300 */ } -[data-theme="dark"] { - --color-text-primary: #E0E0E0; /* modified to a light gray (formerly paper) */ - --color-text-secondary: #B7B5AC; /* 300 (medium gray) */ - --color-text-tertiary: #CECDC3; /* 200 (light gray) */ - --color-text-code: #E0E0E0; /* modified to a light gray (formerly paper) */ - --color-text-icon: #6F6E69; /* 600 (dark gray) */ - --color-text-btn: #100F0F; /* black */ - --color-text-link: #4385BE; /* blue */ - - --color-bg-primary: #100F0F; /* black */ - --color-bg-secondary: #1C1B1A; /* 950 (dark gray) */ - --color-bg-tertiary: #282726; /* 900 (dark gray) */ - --color-bg-hover: #181818; /* darkened color for hover */ - --color-bg-tooltip: #1A1A1A; /* dark gray */ - --color-bg-code: #403E3C; /* 800 (dark gray) */ - --color-bg-op: #5E409D; /* purple */ - --color-bg-btn: #E0E0E0; /* modified to a light gray (formerly paper) */ - - --color-border-primary: #1C1B1A; /* 950 (dark gray) */ - --color-border-secondary: #343331; /* 850 (dark gray) */ +[data-theme=dark] { + --color-text-primary: #F2F2F2; /* 50 */ + --color-text-secondary: #CFCFCF; /* 200 */ + --color-text-tertiary: #B7B7B7; /* 300 */ + --color-text-code: #F2F2F2; /* 50 */ + --color-text-icon: #7E7E7E; /* Adjusted for neutrality */ + --color-text-btn: #8B8B8B; /* 500 */ + --color-text-link: #205EA6; /* Blue light color */ + --color-bg-primary: #0F0F0F; /* 950 */ + --color-bg-secondary: #404040; /* 900 */ + --color-bg-tertiary: #737373; /* 700 */ + --color-bg-hover: #494949; /* 850 */ + --color-bg-tooltip: #1A1A1A; /* Adjusted for neutrality */ + --color-bg-code: #404040; /* 900 */ + --color-bg-op: #205EA6; + --color-bg-btn: #F2F2F2; /* 50 */ + --color-border-primary: #2B2B2B; /* Adjusted for neutrality */ + --color-border-secondary: #737373; /* 700 */ } -[data-theme="andromeda"] { - --color-text-primary: #100F0F; /* black */ - --color-text-secondary: #A5ABA8; /* still using adapted gray */ - --color-text-tertiary: #AEABB1; /* still using adapted gray */ - --color-text-code: #E0E0E0; /* light gray */ - --color-text-icon: #403E3C; /* 800 (dark gray) */ - - --color-bg-primary: #100F0F; /* black */ - --color-bg-secondary: #282726; /* 900 (dark gray) */ - --color-bg-tertiary: #343331; /* 850 (dark gray) */ - --color-bg-hover: #262930; /* darkened for hover */ - --color-bg-code: #1E2025; /* blackish tone for the code */ - --color-bg-tooltip: #1A1A1A; /* dark gray */ - - --color-border-primary: #2B2E37; /* adapted */ - --color-border-secondary: #24262D; /* adapted */ +[data-theme=andromeda] { + --color-text-primary: #FFFFFF; /* White */ + --color-text-secondary: #B7B7B7; /* 300 */ + --color-text-tertiary: #D0D0D0; /* Adjusted for neutrality */ + --color-text-code: #FFFFFF; /* White */ + --color-text-icon: #7E7E7E; /* Adjusted for neutrality */ + --color-bg-primary: #1C1C1C; /* 950 */ + --color-bg-secondary: #404040; /* 900 */ + --color-bg-tertiary: #272727; /* Adjusted for neutrality */ + --color-bg-hover: #303030; /* New neutral gray */ + --color-bg-code: #1C1C1C; /* 950 */ + --color-bg-tooltip: #1A1A1A; /* Adjusted for neutrality */ + --color-border-primary: #2B2B2B; /* Adjusted for neutrality */ + --color-border-secondary: #3C3C3C; /* Adjusted for neutrality */ } .hover\:border-secondary:hover { border-color:var(--color-border-secondary)