jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: fixup dark mode colors

Browse source
This commit is contained in:
nick-delirium 2025-05-09 14:40:11 +02:00
parent bb8cf3d280
commit f1e9546429
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
4 changed files with 72 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Kai/KaiChat.tsx
View file

@ -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' ? (

30
frontend/app/styles/colors-autogen.css
View file

@ -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) }

34
frontend/app/styles/main.css
View file

@ -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;
}

11
frontend/app/theme/colors.js
View file

@ -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)',