From f1e9546429afd921db0fce2e856a7674c4702456 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Fri, 9 May 2025 14:40:11 +0200 Subject: [PATCH] ui: fixup dark mode colors --- frontend/app/components/Kai/KaiChat.tsx | 2 +- frontend/app/styles/colors-autogen.css | 30 ++++++++++++++++++++++ frontend/app/styles/main.css | 34 ++++++++++++++++++++++--- frontend/app/theme/colors.js | 11 ++++++++ 4 files changed, 72 insertions(+), 5 deletions(-) diff --git a/frontend/app/components/Kai/KaiChat.tsx b/frontend/app/components/Kai/KaiChat.tsx index 8c6d8c4d0..93fa98c28 100644 --- a/frontend/app/components/Kai/KaiChat.tsx +++ b/frontend/app/components/Kai/KaiChat.tsx @@ -90,7 +90,7 @@ function KaiChat() { style={{ height: '70svh', background: - 'radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.50) 0%, rgba(248, 255, 254, 0.50) 46%, rgba(243, 241, 255, 0.50) 100%)', + 'radial-gradient(50% 50% at 50% 50%, var(--color-glassWhite) 0%, var(--color-glassMint) 46%, var(--color-glassLavander) 100%)', }} > {section === 'intro' ? ( diff --git a/frontend/app/styles/colors-autogen.css b/frontend/app/styles/colors-autogen.css index 59cd4fd44..b323c9adc 100644 --- a/frontend/app/styles/colors-autogen.css +++ b/frontend/app/styles/colors-autogen.css @@ -47,6 +47,11 @@ .fill-transparent { fill: var(--color-transparent) } .fill-cyan { fill: var(--color-cyan) } .fill-amber { fill: var(--color-amber) } +.fill-glassWhite { fill: var(--color-glassWhite) } +.fill-glassMint { fill: var(--color-glassMint) } +.fill-glassLavander { fill: var(--color-glassLavander) } +.fill-blueLight { fill: var(--color-blueLight) } +.fill-offWhite { fill: var(--color-offWhite) } .fill-figmaColors-accent-secondary { fill: var(--color-figmaColors-accent-secondary) } .fill-figmaColors-main { fill: var(--color-figmaColors-main) } .fill-figmaColors-primary-outlined-hover-background { fill: var(--color-figmaColors-primary-outlined-hover-background) } @@ -102,6 +107,11 @@ .hover-fill-transparent:hover svg { fill: var(--color-transparent) } .hover-fill-cyan:hover svg { fill: var(--color-cyan) } .hover-fill-amber:hover svg { fill: var(--color-amber) } +.hover-fill-glassWhite:hover svg { fill: var(--color-glassWhite) } +.hover-fill-glassMint:hover svg { fill: var(--color-glassMint) } +.hover-fill-glassLavander:hover svg { fill: var(--color-glassLavander) } +.hover-fill-blueLight:hover svg { fill: var(--color-blueLight) } +.hover-fill-offWhite:hover svg { fill: var(--color-offWhite) } .hover-fill-figmaColors-accent-secondary:hover svg { fill: var(--color-figmaColors-accent-secondary) } .hover-fill-figmaColors-main:hover svg { fill: var(--color-figmaColors-main) } .hover-fill-figmaColors-primary-outlined-hover-background:hover svg { fill: var(--color-figmaColors-primary-outlined-hover-background) } @@ -159,6 +169,11 @@ .color-transparent { color: var(--color-transparent) } .color-cyan { color: var(--color-cyan) } .color-amber { color: var(--color-amber) } +.color-glassWhite { color: var(--color-glassWhite) } +.color-glassMint { color: var(--color-glassMint) } +.color-glassLavander { color: var(--color-glassLavander) } +.color-blueLight { color: var(--color-blueLight) } +.color-offWhite { color: var(--color-offWhite) } .color-figmaColors-accent-secondary { color: var(--color-figmaColors-accent-secondary) } .color-figmaColors-main { color: var(--color-figmaColors-main) } .color-figmaColors-primary-outlined-hover-background { color: var(--color-figmaColors-primary-outlined-hover-background) } @@ -216,6 +231,11 @@ .hover-transparent:hover { color: var(--color-transparent) } .hover-cyan:hover { color: var(--color-cyan) } .hover-amber:hover { color: var(--color-amber) } +.hover-glassWhite:hover { color: var(--color-glassWhite) } +.hover-glassMint:hover { color: var(--color-glassMint) } +.hover-glassLavander:hover { color: var(--color-glassLavander) } +.hover-blueLight:hover { color: var(--color-blueLight) } +.hover-offWhite:hover { color: var(--color-offWhite) } .hover-figmaColors-accent-secondary:hover { color: var(--color-figmaColors-accent-secondary) } .hover-figmaColors-main:hover { color: var(--color-figmaColors-main) } .hover-figmaColors-primary-outlined-hover-background:hover { color: var(--color-figmaColors-primary-outlined-hover-background) } @@ -273,6 +293,11 @@ .border-transparent { border-color: var(--color-transparent) } .border-cyan { border-color: var(--color-cyan) } .border-amber { border-color: var(--color-amber) } +.border-glassWhite { border-color: var(--color-glassWhite) } +.border-glassMint { border-color: var(--color-glassMint) } +.border-glassLavander { border-color: var(--color-glassLavander) } +.border-blueLight { border-color: var(--color-blueLight) } +.border-offWhite { border-color: var(--color-offWhite) } .border-figmaColors-accent-secondary { border-color: var(--color-figmaColors-accent-secondary) } .border-figmaColors-main { border-color: var(--color-figmaColors-main) } .border-figmaColors-primary-outlined-hover-background { border-color: var(--color-figmaColors-primary-outlined-hover-background) } @@ -330,6 +355,11 @@ .bg-transparent { background-color: var(--color-transparent) } .bg-cyan { background-color: var(--color-cyan) } .bg-amber { background-color: var(--color-amber) } +.bg-glassWhite { background-color: var(--color-glassWhite) } +.bg-glassMint { background-color: var(--color-glassMint) } +.bg-glassLavander { background-color: var(--color-glassLavander) } +.bg-blueLight { background-color: var(--color-blueLight) } +.bg-offWhite { background-color: var(--color-offWhite) } .bg-figmaColors-accent-secondary { background-color: var(--color-figmaColors-accent-secondary) } .bg-figmaColors-main { background-color: var(--color-figmaColors-main) } .bg-figmaColors-primary-outlined-hover-background { background-color: var(--color-figmaColors-primary-outlined-hover-background) } diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css index 633524847..018b6066a 100644 --- a/frontend/app/styles/main.css +++ b/frontend/app/styles/main.css @@ -294,6 +294,32 @@ svg { text-indent: 0; border-color: inherit; border-collapse: collapse; + display: block; + max-width: 960px; + overflow-x: scroll; +} + +.markdown-body table::-webkit-scrollbar { + height: 4px; + background-color: var(--color-gray-lightest); +} + +.markdown-body table::-webkit-scrollbar-thumb { + background-color: var(--color-gray-medium); + border-radius: 4px; + cursor: grab; +} + +.markdown-body table::-webkit-scrollbar-thumb:hover { + background-color: var(--color-gray-dark); +} + +.markdown-body table::-webkit-scrollbar-thumb:active { + background-color: var(--color-gray-darkest); +} + +.markdown-body table::-webkit-scrollbar-track { + background-color: var(--color-gray-lightest); } .markdown-body dl dt { @@ -324,11 +350,11 @@ svg { } .markdown-body table thead { - background-color: rgba(235, 235, 255, 1); + background-color: var(--color-blueLight); } .markdown-body table tbody tr { - background-color: rgba(250, 250, 255, 1); + background-color: var(--color-offWhite); } .markdown-body table tbody td { @@ -340,7 +366,7 @@ svg { } .markdown-body table tr:nth-child(2n) { - background-color: rgba(235, 235, 255, 1); + background-color: var(--color-blueLight); } .markdown-body table img { @@ -377,7 +403,7 @@ svg { } .markdown-body a { - color: #394eff; + color: var(--color-teal); text-decoration: none; } diff --git a/frontend/app/theme/colors.js b/frontend/app/theme/colors.js index 2808bc1a8..c8dd23eb6 100644 --- a/frontend/app/theme/colors.js +++ b/frontend/app/theme/colors.js @@ -46,6 +46,11 @@ module.exports = { transparent: 'transparent', cyan: '#EBF4F5', amber: 'oklch(98.7% 0.022 95.277)', + glassWhite: 'rgba(255, 255, 255, 0.5)', + glassMint: 'rgba(248, 255, 254, 0.5)', + glassLavander: 'rgba(243, 241, 255, 0.5)', + blueLight: 'rgba(235, 235, 255, 1)', + offWhite: 'rgba(250, 250, 255, 1)', figmaColors: { 'accent-secondary': 'rgba(62, 170, 175, 1)', @@ -96,6 +101,12 @@ module.exports = { 'light-blue-bg': 'oklch(39.8% 0.07 227.392)', 'disabled-text': 'rgba(255, 255, 255, 0.38)', + glassWhite: 'rgba(30, 30, 30, 0.5)', + glassMint: 'rgba(20, 27, 28, 0.5)', + glassLavander: 'rgba(25, 23, 37, 0.5)', + blueLight: '#343460', + offWhite: 'rgba(30, 30, 50, 1)', + figmaColors: { 'accent-secondary': 'rgba(82, 190, 195, 1)', 'text-disabled': 'rgba(255, 255, 255, 0.38)',