Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

style: Rename sidenav background color tokens for clarity and update AppNav hover/focus states (#1632)

Browse source
This commit is contained in:
Elizabet Oliveira 2026-01-21 20:32:14 +00:00 committed by GitHub
parent eef80b7e33
commit 5ba7fe009a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 55 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/warm-clouds-shine.md Normal file
View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
style: Rename sidenav background color tokens for clarity and update AppNav hover/focus states

22
packages/app/src/components/AppNav/AppNav.module.scss
View file

@ -131,17 +131,17 @@ $transition-slow: 0.2s ease;
&:hover {
color: var(--color-text-sidenav-link-active);
background: var(--color-bg-sidenav-link);
background: var(--color-bg-sidenav-link-active);
}
&:focus-visible {
outline: none;
background: var(--color-bg-sidenav-link);
background: var(--color-bg-sidenav-link-active);
}
&Active {
color: var(--color-text-sidenav-link-active);
background: var(--color-bg-sidenav-link);
background: var(--color-bg-sidenav-link-active);
}
}
@ -178,7 +178,7 @@ $transition-slow: 0.2s ease;
transform $transition-fast;
&:hover {
background: var(--color-bg-sidenav-link-hover);
background: var(--color-bg-sidenav-link-active-hover);
color: var(--color-text-sidenav-link-active);
transform: scale(1.1);
}
@ -213,12 +213,12 @@ $transition-slow: 0.2s ease;
&:hover {
color: var(--color-text-sidenav-link-active);
background: var(--color-bg-sidenav-link);
background: var(--color-bg-sidenav-link-active);
}
&:focus-visible {
outline: none;
background: var(--color-bg-sidenav-link);
background: var(--color-bg-sidenav-link-active);
}
i {
@ -227,7 +227,7 @@ $transition-slow: 0.2s ease;
&Active {
color: var(--color-text-sidenav-link-active);
background: var(--color-bg-sidenav-link);
background: var(--color-bg-sidenav-link-active);
}
}
@ -308,7 +308,7 @@ $transition-slow: 0.2s ease;
overflow: hidden;
&:hover {
background: var(--color-bg-sidenav-link);
background: var(--color-bg-sidenav-link-active);
}
@include interactive-press;
@ -321,7 +321,7 @@ $transition-slow: 0.2s ease;
width: fit-content;
&:hover {
background: var(--color-bg-sidenav-link);
background: var(--color-bg-sidenav-link-active);
}
@include interactive-press;
@ -365,7 +365,7 @@ $transition-slow: 0.2s ease;
border-color $transition-slow;
&:hover {
background: var(--color-bg-sidenav-link);
background: var(--color-bg-sidenav-link-active);
border-color: var(--color-border);
}
@ -377,7 +377,7 @@ $transition-slow: 0.2s ease;
background: transparent;
&:hover {
background: var(--color-bg-sidenav-link);
background: var(--color-bg-sidenav-link-active);
}
@include interactive-press;

24
packages/app/src/components/AppNav/AppNav.tsx
View file

@ -120,18 +120,18 @@ function NewDashboardButton() {
if (IS_LOCAL_MODE) {
return (
<Link href="/dashboards">
<Button
data-testid="create-dashboard-button"
variant="transparent"
color="var(--color-text)"
py="0px"
px="sm"
fw={400}
>
<span className="pe-2">+</span> Create Dashboard
</Button>
</Link>
<Button
component={Link}
href="/dashboards"
data-testid="create-dashboard-button"
variant="transparent"
color="var(--color-text)"
py="0px"
px="sm"
fw={400}
>
<span className="pe-2">+</span> Create Dashboard
</Button>
);
}

3
packages/app/src/theme/mantineTheme.ts
View file

@ -9,6 +9,8 @@ import {
Tooltip,
} from '@mantine/core';
import focusClasses from '../../styles/focus.module.scss';
export const makeTheme = ({
fontFamily = '"IBM Plex Sans", monospace',
}: {
@ -16,6 +18,7 @@ export const makeTheme = ({
}): MantineThemeOverride => ({
cursorType: 'pointer',
fontFamily,
focusClassName: focusClasses.focusRing,
primaryColor: 'green',
primaryShade: 8,
autoContrast: true,

7
packages/app/src/theme/semanticColorsGrouped.ts
View file

@ -34,7 +34,12 @@ export const semanticColorsGrouped = {
],
icons: ['color-icon-primary', 'color-icon-muted'],
overlay: ['color-overlay', 'color-backdrop'],
states: ['color-state-hover', 'color-state-selected', 'color-state-focus'],
states: [
'color-state-hover',
'color-state-selected',
'color-state-focus',
'color-outline-focus',
],
json: [
'color-json-string',
'color-json-number',

10
packages/app/styles/_semantic-colors.scss
View file

@ -7,8 +7,8 @@
--color-bg-muted: var(--mantine-color-dark-7);
--color-bg-highlighted: rgb(55 58 64 / 70%);
--color-bg-sidenav: var(--mantine-color-dark-9);
--color-bg-sidenav-link: var(--mantine-color-dark-6);
--color-bg-sidenav-link-hover: var(--mantine-color-dark-7);
--color-bg-sidenav-link-active: var(--mantine-color-dark-6);
--color-bg-sidenav-link-active-hover: var(--mantine-color-dark-7);
--color-bg-header: var(--mantine-color-dark-9);
--color-bg-hover: var(--mantine-color-dark-6);
--color-bg-active: var(--mantine-color-dark-5);
@ -50,6 +50,7 @@
--color-state-hover: var(--mantine-color-dark-6);
--color-state-selected: var(--mantine-color-dark-5);
--color-state-focus: var(--mantine-color-dark-4);
--color-outline-focus: var(--mantine-color-green-4);
/* Code / Misc UI */
--color-bg-code: var(--mantine-color-dark-8);
@ -104,8 +105,8 @@
--color-bg-muted: #f6f6fa;
--color-bg-highlighted: rgb(230 232 237 / 70%);
--color-bg-sidenav: var(--mantine-color-white);
--color-bg-sidenav-link: #f6f6fa;
--color-bg-sidenav-link-hover: var(--mantine-color-gray-2);
--color-bg-sidenav-link-active: #f6f6fa;
--color-bg-sidenav-link-active-hover: var(--mantine-color-gray-2);
--color-bg-header: var(--mantine-color-gray-1);
--color-bg-modal: var(--mantine-color-white);
--color-bg-hover: var(--mantine-color-gray-3);
@ -148,6 +149,7 @@
--color-state-hover: var(--mantine-color-dark-3);
--color-state-selected: var(--mantine-color-dark-4);
--color-state-focus: var(--mantine-color-dark-5);
--color-outline-focus: var(--mantine-color-green-8);
/* Code / Misc UI - inverted */
--color-bg-code: var(--mantine-color-dark-1);

7
packages/app/styles/app.scss
View file

@ -39,6 +39,13 @@ body {
font-size: var(--mantine-font-size-sm);
}
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--color-outline-focus);
outline-offset: 2px;
border-radius: var(--mantine-radius-xs);
}
.accordion-button,
.button,
.form-control {

5
packages/app/styles/focus.module.scss Normal file
View file

@ -0,0 +1,5 @@
.focusRing:focus-visible {
outline: 2px solid var(--color-outline-focus);
outline-offset: 2px;
border-radius: var(--mantine-radius-xs);
}