styling css gloablization

This commit is contained in:
IGNY8 VPS (Salman)
2025-12-29 05:59:56 +00:00
parent 0ffd21b9bf
commit c91175fdcb
8 changed files with 148 additions and 138 deletions

View File

@@ -147,10 +147,11 @@ function PageProgressCard({ widget, submoduleColor = 'blue' }: { widget: PagePro
{/* Hint with icon */}
{widget.hint && (
<div className="flex items-start gap-2 pt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
<LightBulbIcon className="w-5 h-5 flex-shrink-0 mt-0.5" style={{ color: 'var(--color-warning)' }} />
<span className="text-sm font-medium" style={{ color: 'var(--color-primary)' }}>{widget.hint}</span>
<LightBulbIcon className="w-5 h-5 flex-shrink-0 mt-0.5 text-warning-500" />
<span className="text-sm font-medium text-brand-500">{widget.hint}</span>
</div>
)}
</Card>
);
}
@@ -178,23 +179,21 @@ function ModuleStatsCard({ widget }: { widget: ModuleStatsWidget }) {
{row.fromHref ? (
<Link
to={row.fromHref}
className="text-sm font-medium hover:underline"
style={{ color: 'var(--color-primary)' }}
className="text-sm font-medium hover:underline text-brand-500"
>
{row.fromLabel}
</Link>
) : (
<span className="text-sm font-medium text-[color:var(--color-text)] dark:text-gray-300">{row.fromLabel}</span>
)}
<span className="text-lg font-bold tabular-nums" style={{ color: 'var(--color-primary)' }}>
<span className="text-lg font-bold tabular-nums text-brand-500">
{row.fromValue}
</span>
</div>
{/* Arrow icon */}
<ChevronRightIcon
className="w-6 h-6 flex-shrink-0 mx-2"
style={{ color: 'var(--color-primary)' }}
className="w-6 h-6 flex-shrink-0 mx-2 text-brand-500"
/>
{/* To side */}
@@ -202,8 +201,7 @@ function ModuleStatsCard({ widget }: { widget: ModuleStatsWidget }) {
{row.toHref ? (
<Link
to={row.toHref}
className="text-sm font-medium hover:underline"
style={{ color: 'var(--color-primary)' }}
className="text-sm font-medium hover:underline text-brand-500"
>
{row.toLabel}
</Link>
@@ -236,8 +234,7 @@ function ModuleStatsCard({ widget }: { widget: ModuleStatsWidget }) {
<Link
key={idx}
to={link.href}
className="text-sm font-medium hover:underline flex items-center gap-1"
style={{ color: 'var(--color-primary)' }}
className="text-sm font-medium hover:underline flex items-center gap-1 text-brand-500"
>
<ChevronRightIcon className="w-4 h-4" />
<span>{link.label}</span>
@@ -300,7 +297,7 @@ function CompletionCard({ widget }: { widget: CompletionWidget }) {
<div className="grid grid-cols-2 gap-6 mb-4">
{/* Planner Column */}
<div>
<div className="text-xs font-bold uppercase tracking-wide mb-2" style={{ color: 'var(--color-primary)' }}>
<div className="text-xs font-bold uppercase tracking-wide mb-2 text-brand-500">
Planner
</div>
<div className="space-y-0.5">
@@ -312,7 +309,7 @@ function CompletionCard({ widget }: { widget: CompletionWidget }) {
{/* Writer Column */}
<div>
<div className="text-xs font-bold uppercase tracking-wide mb-2" style={{ color: 'var(--color-success)' }}>
<div className="text-xs font-bold uppercase tracking-wide mb-2 text-success-500">
Writer
</div>
<div className="space-y-0.5">
@@ -347,8 +344,7 @@ function CompletionCard({ widget }: { widget: CompletionWidget }) {
<div className="pt-3 mt-3 border-t border-[color:var(--color-stroke)] dark:border-gray-800">
<Link
to={widget.analyticsHref}
className="text-sm font-medium hover:underline flex items-center gap-1"
style={{ color: 'var(--color-primary)' }}
className="text-sm font-medium hover:underline flex items-center gap-1 text-brand-500"
>
View Full Analytics
<ChevronRightIcon className="w-4 h-4" />

View File

@@ -44,7 +44,7 @@ const RadioSm: React.FC<RadioProps> = ({
{/* Inner Dot */}
<span
className={`h-1.5 w-1.5 rounded-full ${
checked ? "bg-white" : "bg-white dark:bg-[#1e2636]"
checked ? "bg-white" : "bg-white dark:bg-gray-800"
}`}
></span>
</span>

View File

@@ -317,10 +317,10 @@ export default function WordPressIntegrationForm({
</button>
<div className="invisible absolute bottom-full left-1/2 z-50 mb-2.5 -translate-x-1/2 opacity-0 transition-opacity duration-300 group-hover:visible group-hover:opacity-100">
<div className="relative">
<div className="rounded-lg bg-white px-3 py-2 text-xs font-medium whitespace-nowrap text-gray-700 shadow-xs dark:bg-[#1E2634] dark:text-white">
<div className="rounded-lg bg-white px-3 py-2 text-xs font-medium whitespace-nowrap text-gray-700 shadow-xs dark:bg-gray-800 dark:text-white">
Regenerate
</div>
<div className="absolute -bottom-1 left-1/2 h-3 w-4 -translate-x-1/2 rotate-45 bg-white dark:bg-[#1E2634]"></div>
<div className="absolute -bottom-1 left-1/2 h-3 w-4 -translate-x-1/2 rotate-45 bg-white dark:bg-gray-800"></div>
</div>
</div>
</div>

View File

@@ -42,7 +42,7 @@ const toneMap: Record<
brand: {
primary: "bg-brand-500 text-white hover:bg-brand-600",
secondary:
"bg-[#64748b] text-white hover:bg-[#475569] dark:bg-[#64748b] dark:hover:bg-[#475569]",
"bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-500 dark:hover:bg-gray-600",
outline:
"text-brand-600 ring-1 ring-brand-200 hover:bg-brand-25 dark:ring-brand-500/40 dark:text-brand-300 dark:hover:bg-brand-500/[0.08]",
ghost:
@@ -52,7 +52,7 @@ const toneMap: Record<
success: {
primary: "bg-success-500 text-white hover:bg-success-600",
secondary:
"bg-[#64748b] text-white hover:bg-[#475569] dark:bg-[#64748b] dark:hover:bg-[#475569]",
"bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-500 dark:hover:bg-gray-600",
outline:
"text-success-600 ring-1 ring-success-200 hover:bg-success-25 dark:ring-success-500/40 dark:text-success-300",
ghost:
@@ -62,7 +62,7 @@ const toneMap: Record<
warning: {
primary: "bg-warning-500 text-white hover:bg-warning-600",
secondary:
"bg-[#64748b] text-white hover:bg-[#475569] dark:bg-[#64748b] dark:hover:bg-[#475569]",
"bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-500 dark:hover:bg-gray-600",
outline:
"text-warning-600 ring-1 ring-warning-200 hover:bg-warning-25 dark:ring-warning-500/40 dark:text-warning-300",
ghost:
@@ -72,7 +72,7 @@ const toneMap: Record<
danger: {
primary: "bg-error-500 text-white hover:bg-error-600",
secondary:
"bg-[#64748b] text-white hover:bg-[#475569] dark:bg-[#64748b] dark:hover:bg-[#475569]",
"bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-500 dark:hover:bg-gray-600",
outline:
"text-error-600 ring-1 ring-error-200 hover:bg-error-25 dark:ring-error-500/40 dark:text-error-300",
ghost:
@@ -83,7 +83,7 @@ const toneMap: Record<
primary:
"bg-gray-900 text-white hover:bg-gray-800 dark:bg-white/10 dark:hover:bg-white/20",
secondary:
"bg-[#64748b] text-white hover:bg-[#475569] dark:bg-[#64748b] dark:hover:bg-[#475569]",
"bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-500 dark:hover:bg-gray-600",
outline:
"text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50 dark:text-gray-200 dark:ring-white/[0.08] dark:hover:bg-white/[0.04]",
ghost:

View File

@@ -188,7 +188,7 @@ export const ListRadioItem: React.FC<ListRadioItemProps> = ({
onChange={(e) => onChange?.(e.target.value)}
/>
<span className={`mr-2 flex h-4 w-4 items-center justify-center rounded-full border ${checked ? "border-brand-500 bg-brand-500" : "bg-transparent border-gray-300 dark:border-gray-700"}`}>
<span className="h-1.5 w-1.5 rounded-full bg-white dark:bg-[#1e2636]"></span>
<span className="h-1.5 w-1.5 rounded-full bg-white dark:bg-gray-800"></span>
</span>
</span>
{label}