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:
hamed
2026-07-15 17:06:24 +03:30
co-authored by Claude Opus 4.8
parent 89ebeb8fce
commit 62e0cdb518
5 changed files with 83 additions and 13 deletions
@@ -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 (
+1 -1
View File
@@ -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',
}}