feat(admin): add orange rgb(241,119,50) as an exact brand-color option
Revert the earlier mis-scoped orange on the personalization panel and instead expose rgb(241,119,50) as a selectable 'رنگ اصلی' swatch. When picked it overrides --primary/-600/-700/-soft/-soft2/-ring inline with exact hex, so every var(--primary) consumer across the whole admin (buttons, active nav, rings) becomes that orange. Non-fixed hues keep the oklch hue pipeline (inline overrides removed on switch). - uiStore: BrandHue interface + optional fixed hex; shared applyBrand() helper handles fixed vs hue, dark-aware soft tints - AdminLayout: reuse applyBrand() (no divergence with store) - Topbar: swatch shows the exact fixed color - tests: fixed-color apply, dark soft, and override-cleanup on switch Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import Sidebar from './Sidebar';
|
||||
import Topbar from './Topbar';
|
||||
import { useUiStore } from '../../stores/uiStore';
|
||||
import { useUiStore, applyBrand } from '../../stores/uiStore';
|
||||
|
||||
export default function AdminLayout() {
|
||||
const darkMode = useUiStore((s) => s.darkMode);
|
||||
@@ -17,8 +17,7 @@ export default function AdminLayout() {
|
||||
root.classList.toggle('dark', darkMode);
|
||||
root.setAttribute('data-theme', darkMode ? 'dark' : 'light');
|
||||
root.setAttribute('data-density', density);
|
||||
root.style.setProperty('--brand-h', String(brandHue.h));
|
||||
root.style.setProperty('--brand-c', String(brandHue.c));
|
||||
applyBrand(root, brandHue, darkMode);
|
||||
}, [darkMode, density, brandHue]);
|
||||
|
||||
return (
|
||||
|
||||
@@ -124,7 +124,7 @@ export default function Topbar({ onMobileMenuOpen }: { onMobileMenuOpen?: () =>
|
||||
title={hue.name}
|
||||
style={{
|
||||
width: 40, height: 40, borderRadius: 10,
|
||||
background: `oklch(0.55 ${hue.c} ${hue.h})`,
|
||||
background: hue.fixed?.primary ?? `oklch(0.55 ${hue.c} ${hue.h})`,
|
||||
border: brandHue.h === hue.h ? '3px solid var(--text)' : '3px solid transparent',
|
||||
display: 'grid', placeItems: 'center', color: '#fff', cursor: 'pointer',
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user