u
This commit is contained in:
@@ -270,8 +270,8 @@ export const ASK_PROMPT_BORDER_PAIR = { light: BLUE_PANEL, dark: BLUE_BORDER };
|
||||
/** Deep petrol — the app's structural dark. */
|
||||
export const NAV_SURFACE = mix(DARK_6, CHROMA.PETROL.dark, 0.3);
|
||||
|
||||
/** Horizontal sheen across the sidebar. */
|
||||
export const NAV_BACKGROUND = `linear-gradient(90deg, ${mix(NAV_SURFACE, DARK_6, 0.4)} 0%, ${mix(NAV_SURFACE, WHITE, 0.06)} 25%, ${NAV_SURFACE} 60%, ${mix(NAV_SURFACE, DARK_6, 0.3)} 100%)`;
|
||||
/** Horizontal sheen across the sidebar — kept very soft, no hard banding. */
|
||||
export const NAV_BACKGROUND = `linear-gradient(90deg, ${mix(NAV_SURFACE, DARK_6, 0.16)} 0%, ${mix(NAV_SURFACE, WHITE, 0.04)} 25%, ${NAV_SURFACE} 60%, ${mix(NAV_SURFACE, DARK_6, 0.12)} 100%)`;
|
||||
|
||||
export const NAV_ITEM = mix(WHITE, CHROMA.PETROL.dark, 0.45);
|
||||
export const NAV_ITEM_HOVER = mix(DARK_5, CHROMA.PETROL.dark, 0.3);
|
||||
@@ -282,6 +282,14 @@ export const NAV_ITEM_ACTIVE_TEXT = mix(CHROMA.PETROL.light, WHITE, 0.15);
|
||||
/** Accent for active items and live draft badges. */
|
||||
export const NAV_ITEM_ACTIVE_ACCENT = CHROMA.PETROL.light;
|
||||
|
||||
/**
|
||||
* Sub-navigation (2nd level) sits on the light app background, not on the
|
||||
* dark sidebar — so its active surface only needs a mid dip to let the light
|
||||
* accent read. Well short of the fully deep `NAV_ITEM_ACTIVE`.
|
||||
*/
|
||||
export const NAV_SUB_ACTIVE = mix(MAIN_BACKGROUND, NAV_ITEM_ACTIVE, 0.55);
|
||||
export const NAV_SUB_ACTIVE_HOVER = mix(MAIN_BACKGROUND, NAV_ITEM_ACTIVE, 0.55);
|
||||
|
||||
/* ────────────────────────────────────────────────────────────────────────────
|
||||
* 9. CHAT / AI ASSISTANT
|
||||
* -------------------------------------------------------------------------*/
|
||||
|
||||
@@ -14,6 +14,9 @@ import { artikelQueryPath } from './article/artikelQuery';
|
||||
import { defaultCategoryPath } from './category/categoryRoute';
|
||||
import { navigationAutomat } from '../automats';
|
||||
import {
|
||||
NAV_ITEM_ACTIVE_ACCENT,
|
||||
NAV_SUB_ACTIVE,
|
||||
NAV_SUB_ACTIVE_HOVER,
|
||||
NAV_SURFACE,
|
||||
} from '../colors';
|
||||
import { ChatFab, ChatDrawer } from './chat';
|
||||
@@ -195,12 +198,16 @@ class AppSubNav extends PureComponent {
|
||||
justifyContent: 'center',
|
||||
gap: 0.5,
|
||||
color: active
|
||||
? theme.palette.primary.main
|
||||
? theme.nav?.itemActiveAccent || NAV_ITEM_ACTIVE_ACCENT
|
||||
: theme.palette.text.secondary,
|
||||
bgcolor: active ? theme.palette.action.selected : 'transparent',
|
||||
bgcolor: active ? theme.nav?.subActive || NAV_SUB_ACTIVE : 'transparent',
|
||||
'&:hover': {
|
||||
bgcolor: theme.palette.action.hover,
|
||||
color: theme.palette.primary.main,
|
||||
bgcolor: active
|
||||
? theme.nav?.subActiveHover || NAV_SUB_ACTIVE_HOVER
|
||||
: theme.palette.action.hover,
|
||||
color: active
|
||||
? theme.nav?.itemActiveAccent || NAV_ITEM_ACTIVE_ACCENT
|
||||
: theme.palette.primary.main,
|
||||
},
|
||||
})}
|
||||
>
|
||||
|
||||
@@ -5,12 +5,14 @@ import {
|
||||
NAV_ITEM,
|
||||
NAV_ITEM_ACTIVE,
|
||||
NAV_ITEM_ACTIVE_ACCENT,
|
||||
NAV_ITEM_ACTIVE_TEXT,
|
||||
NAV_ITEM_HOVER,
|
||||
NAV_ITEM_HOVER_TEXT,
|
||||
NAV_SUB_ACTIVE,
|
||||
NAV_SUB_ACTIVE_HOVER,
|
||||
NAV_SURFACE,
|
||||
PRIMARY,
|
||||
WHITE,
|
||||
NAV_ITEM_ACTIVE_TEXT,
|
||||
} from '../../colors';
|
||||
|
||||
const nav = {
|
||||
@@ -21,8 +23,11 @@ const nav = {
|
||||
itemHover: NAV_ITEM_HOVER,
|
||||
itemHoverText: NAV_ITEM_HOVER_TEXT,
|
||||
itemActive: NAV_ITEM_ACTIVE,
|
||||
itemActiveHover: NAV_ITEM_ACTIVE,
|
||||
itemActiveText: NAV_ITEM_ACTIVE_TEXT,
|
||||
itemActiveAccent: NAV_ITEM_ACTIVE_ACCENT,
|
||||
subActive: NAV_SUB_ACTIVE,
|
||||
subActiveHover: NAV_SUB_ACTIVE_HOVER,
|
||||
};
|
||||
|
||||
export const defaultThemeId = 'default';
|
||||
|
||||
Reference in New Issue
Block a user